html [data-liquid-admin] {
  --liquid-ink: #20384c;
  --liquid-muted: #62788b;
  --liquid-blue: #2368b4;
  --liquid-secondary: #735899;
  --liquid-primary-soft: #e8f1ff;
  --liquid-secondary-soft: #f3eafa;
  --liquid-primary-glow: #c5dcfa;
  --liquid-secondary-glow: #e7d2f4;
  --liquid-primary-edge: #9abbe9;
  --liquid-line: rgba(106, 146, 178, .17);
  --liquid-surface: rgba(255, 255, 255, .76);
  --liquid-shadow: 0 8px 24px rgba(60, 97, 132, .07), inset 0 1px 0 rgba(255, 255, 255, .96);
  --liquid-background: #f7f8fc;
  color: var(--liquid-ink);
  font-family: "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html .page-wrapper[data-liquid-admin],
html .management-page[data-liquid-admin],
html .admin-layout[data-liquid-admin] {
  position: relative;
  isolation: isolate;
  background: var(--liquid-background);
}

html [data-liquid-admin] > .admin-liquid-art {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  user-select: none;
}

html [data-liquid-admin] > .admin-liquid-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/assets/img/admin-liquid-pattern.svg?v=20261012-2") repeat;
  background-size: 460px 620px;
  opacity: .66;
}

html [data-liquid-admin] > .admin-liquid-art > .admin-liquid-color-layer {
  position: absolute;
  inset: -8%;
  opacity: 0;
  background: radial-gradient(ellipse at 9% 4%, var(--art-first), transparent 65%), radial-gradient(ellipse at 96% 53%, var(--art-second), transparent 62%), radial-gradient(ellipse at 25% 100%, var(--art-first), transparent 65%);
  transition: opacity 4s ease-in-out;
  animation: liquid-art-drift 24s ease-in-out infinite alternate;
}

html [data-liquid-admin] > .admin-liquid-art > .admin-liquid-color-layer.is-active { opacity: .94; }

@keyframes liquid-art-drift {
  from { transform: translate(-1%, -1%) scale(1); }
  to { transform: translate(2%, 1%) scale(1.04); }
}

html .page-wrapper[data-liquid-admin] > .main-content,
html .page-wrapper[data-liquid-admin] > .desktop-home-panel,
html .page-wrapper[data-liquid-admin] > .desktop-chat-full,
html [data-liquid-admin="management"] > .main-content > .content-body {
  background: transparent !important;
}

html .page-wrapper[data-liquid-admin] > .main-content::before,
html .page-wrapper[data-liquid-admin] > .main-content::after {
  display: none;
}

html .page-wrapper[data-liquid-admin] > .main-content:not(.chat-content) {
  padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
}

html .page-wrapper[data-liquid-admin] > .main-content > .content,
html .page-wrapper[data-liquid-admin] .desktop-home-scroll {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 20px 18px 24px;
}

html .page-wrapper[data-liquid-admin] > .main-content > .content > .page-title,
html .page-wrapper[data-liquid-admin] .desktop-home-scroll > .page-title {
  display: none;
}

html .page-wrapper[data-liquid-admin] > .main-content > .content > .tg-notice,
html .page-wrapper[data-liquid-admin] .desktop-home-scroll > .tg-notice {
  order: -1;
  position: relative;
  min-height: 56px;
  padding: 0 3px 14px;
  margin: 0 0 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html .page-wrapper[data-liquid-admin] .tg-notice::before {
  content: "";
  position: absolute;
  right: 5px;
  top: -2px;
  width: 70px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, .95);
  border-radius: 50%;
  background: linear-gradient(130deg, rgba(255, 255, 255, .9), var(--liquid-secondary-glow));
  box-shadow: inset 0 2px 4px #fff, 0 8px 18px rgba(74, 71, 111, .12);
  transform: rotate(-25deg);
  transition: background-color 4s ease, border-color 4s ease;
}

html .page-wrapper[data-liquid-admin] .tg-notice::after {
  content: "";
  position: absolute;
  right: 25px;
  top: 0;
  width: 27px;
  height: 27px;
  background: var(--liquid-blue);
  clip-path: polygon(50% 0, 62% 36%, 100% 50%, 62% 64%, 50% 100%, 38% 64%, 0 50%, 38% 36%);
  opacity: .7;
  transition: background-color 4s ease;
}

html .page-wrapper[data-liquid-admin] .tg-notice > .brand-signature {
  display: inline-block;
  font-size: 34px !important;
  line-height: 1.15 !important;
  letter-spacing: .07em !important;
  color: var(--liquid-blue) !important;
  text-shadow: 0 2px 6px rgba(70, 107, 144, .09) !important;
  transition: color 4s ease;
  transform: rotate(-5deg);
}

html .page-wrapper[data-liquid-admin] .tg-notice > .brand-signature::after {
  content: "";
  display: block;
  width: 54px;
  height: 2px;
  margin: 6px 0 0 13px;
  border-radius: 100%;
  background: currentColor;
  opacity: .5;
  transform: rotate(-7deg);
}

html .page-wrapper[data-liquid-admin] .info-card {
  margin: 0 0 18px;
  border: 1px solid rgba(255, 255, 255, .94);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .62));
  box-shadow: 0 10px 26px rgba(50, 65, 103, .08), inset 0 1px 0 #fff;
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
}

html .page-wrapper[data-liquid-admin] .info-row {
  min-height: 43px;
  padding: 11px 15px;
  border-bottom-color: var(--liquid-line);
  gap: 3px;
}

html .page-wrapper[data-liquid-admin] .info-label { width: 43px; flex-shrink: 0; font-size: 12px; color: var(--liquid-muted); }
html .page-wrapper[data-liquid-admin] .info-value { min-width: 0; font-size: 13px; font-weight: 500; color: var(--liquid-ink); font-variant-numeric: tabular-nums; }
html .page-wrapper[data-liquid-admin] .refresh-hint { font-size: 10px; color: var(--liquid-muted); margin-right: 2px; }
html .page-wrapper[data-liquid-admin] .info-row .arrow { color: #7a95ac; font-size: 18px; }
html .page-wrapper[data-liquid-admin] .admin-badge { color: var(--liquid-blue); background: var(--liquid-primary-soft); font-size: 10px; padding: 3px 7px; margin-right: 2px; border-radius: 7px; transition: color 4s ease, background-color 4s ease; }
html .page-wrapper[data-liquid-admin] .expire-days { font-size: 10px; padding: 3px 7px; margin-right: 2px; }

html .page-wrapper[data-liquid-admin] .feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

html .page-wrapper[data-liquid-admin] .feature-grid > .feature-item {
  --tile-wash: var(--liquid-primary-soft);
  --tile-color: var(--liquid-blue);
  position: relative;
  width: 100%;
  min-width: 0;
  height: 64px;
  min-height: 64px !important;
  padding: 0 12px;
  flex-direction: row;
  justify-content: flex-start;
  text-align: left;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, .94);
  border-radius: 19px;
  color: var(--liquid-ink);
  background: linear-gradient(125deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .55)), var(--tile-wash);
  box-shadow: 0 5px 16px rgba(64, 78, 118, .07), inset 0 1px 0 #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: transform .16s ease, background-color 4s ease, box-shadow .16s ease;
  will-change: auto;
}

html .page-wrapper[data-liquid-admin] .feature-grid > .feature-item:nth-child(4n + 2),
html .page-wrapper[data-liquid-admin] .feature-grid > .feature-item:nth-child(4n + 3) {
  --tile-wash: var(--liquid-secondary-soft);
  --tile-color: var(--liquid-secondary);
}

html .page-wrapper[data-liquid-admin] .feature-grid > .feature-item::before {
  content: "";
  position: absolute;
  right: 5px;
  top: 5px;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: 1px solid var(--tile-color);
  box-shadow: inset 0 0 0 5px var(--tile-wash), inset 0 0 0 6px var(--tile-color);
  opacity: .08;
  pointer-events: none;
}

html .page-wrapper[data-liquid-admin] .feature-grid > .feature-item::after {
  content: "";
  position: absolute;
  inset: 1px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 17px;
  pointer-events: none;
}

html .page-wrapper[data-liquid-admin] .feature-icon {
  width: 32px;
  height: 32px;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, .92);
  border-radius: 10px;
  color: var(--tile-color);
  background: linear-gradient(135deg, rgba(255, 255, 255, .75), transparent), var(--tile-wash);
  box-shadow: 0 2px 4px rgba(71, 106, 139, .04);
}

html .page-wrapper[data-liquid-admin] .feature-icon svg { width: 20px; height: 20px; filter: none; opacity: .92; }
html .page-wrapper[data-liquid-admin] .feature-text { color: var(--liquid-ink); font-size: 13px; font-weight: 550; letter-spacing: .01em; white-space: nowrap; }
html .page-wrapper[data-liquid-admin] .feature-item:not(.disabled-feature):active { transform: scale(.975); background: rgba(237, 246, 254, .94); box-shadow: inset 0 2px 5px rgba(68, 107, 141, .08); }

html .page-wrapper[data-liquid-admin] > .custom-tabbar {
  left: 16px;
  right: 16px;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  height: 62px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, .97);
  border-radius: 25px;
  background: rgba(255, 255, 255, .77);
  box-shadow: 0 10px 32px rgba(55, 94, 134, .14), inset 0 1px 0 #fff;
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
}

html .page-wrapper[data-liquid-admin] > .custom-tabbar .tab-item { height: 48px; margin: 0 2px; padding: 5px 0; border-radius: 18px; color: var(--liquid-muted); }
html .page-wrapper[data-liquid-admin] > .custom-tabbar .tab-item.active { background: var(--liquid-primary-soft); box-shadow: inset 0 1px 0 #fff, 0 2px 4px rgba(57, 92, 125, .04); color: var(--liquid-blue); transition: color 4s ease, background-color 4s ease; }
html .page-wrapper[data-liquid-admin] > .custom-tabbar .tab-item svg { width: 21px; height: 21px; }
html .page-wrapper[data-liquid-admin] > .custom-tabbar .tab-item svg path { fill: currentColor; }
html .page-wrapper[data-liquid-admin] > .custom-tabbar .tab-text { margin-top: 2px; font-size: 10px; color: inherit; }
html .page-wrapper[data-liquid-admin] > .custom-tabbar .tab-item.active .tab-text { color: var(--liquid-blue); }
html .page-wrapper[data-liquid-admin] > .desktop-sidebar-nav { margin: 12px 0 12px 12px; height: calc(100% - 24px); border: 1px solid #fff; border-radius: 24px; background: var(--liquid-surface); box-shadow: var(--liquid-shadow); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
html .page-wrapper[data-liquid-admin] .nav-icon-item.active { background: var(--liquid-primary-soft); color: var(--liquid-blue); }

html .page-wrapper[data-liquid-admin] .chat-page[data-v-d7c5d04c] { background: transparent; }
html .page-wrapper[data-liquid-admin] .chat-page[data-v-d7c5d04c] .session-list-view { background: transparent; }
html .page-wrapper[data-liquid-admin] .chat-page[data-v-d7c5d04c] :is(.chat-header, .chat-detail-header, .message-input-area) { background: rgba(250, 253, 255, .9); border-color: var(--liquid-line); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
html .page-wrapper[data-liquid-admin] .chat-page[data-v-d7c5d04c] .session-item { margin: 6px 12px; border: 1px solid rgba(255, 255, 255, .95); border-radius: 18px; background: var(--liquid-surface); box-shadow: 0 3px 12px rgba(60, 97, 132, .04); backdrop-filter: none; -webkit-backdrop-filter: none; }
html .page-wrapper[data-liquid-admin] .chat-page[data-v-d7c5d04c] .session-item.active { background: var(--liquid-primary-soft); border-color: var(--liquid-primary-edge); }
html .page-wrapper[data-liquid-admin] .chat-page[data-v-d7c5d04c] .session-item.pinned { background: #f0f5fb; }
html .page-wrapper[data-liquid-admin] .chat-page[data-v-d7c5d04c] .session-name { color: var(--liquid-ink); }
html .page-wrapper[data-liquid-admin] .chat-page[data-v-d7c5d04c] .filter-tabs { background: #eaf1f7; border: 1px solid #fff; }
html .page-wrapper[data-liquid-admin] .chat-page[data-v-d7c5d04c] .filter-tab.active { color: var(--liquid-blue); background: #fff; }
html .page-wrapper[data-liquid-admin] .chat-page[data-v-d7c5d04c] .search-bar { border: 1px solid #fff; background: rgba(255, 255, 255, .8); border-radius: 14px; }
html .page-wrapper[data-liquid-admin] .chat-page[data-v-d7c5d04c] .input-box { border: 1px solid #dbe7f1; background: #fff; }

html .page-wrapper[data-liquid-admin] .settings-page[data-v-c1ab1b88] { background: transparent; }
html .page-wrapper[data-liquid-admin] .settings-page[data-v-c1ab1b88] .settings-card { border: 1px solid #fff; border-radius: 20px; background: var(--liquid-surface); box-shadow: var(--liquid-shadow); }
html .page-wrapper[data-liquid-admin] .settings-page[data-v-c1ab1b88] .card-title { color: var(--liquid-ink); }

html [data-liquid-admin="management"] :is(.topbar, .management-header) { border-bottom: 1px solid var(--liquid-line); background: rgba(255, 255, 255, .84); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
html [data-liquid-admin="management"] :is(.nav-item, .mobile-menu-item) { border-radius: 12px; }
html [data-liquid-admin="management"] :is(.nav-item.active, .mobile-menu-item.active) { background: var(--liquid-primary-soft); color: var(--liquid-blue); box-shadow: inset 0 1px 0 #fff; }
html [data-liquid-admin="management"] .mobile-menu { background: rgba(249, 253, 255, .98); border-color: var(--liquid-line); border-radius: 0 0 20px 20px; box-shadow: 0 12px 30px rgba(42, 78, 117, .12); }
html [data-liquid-admin="management"] :is(.api-card, .user-card, .settings-card, .stat-card, .monitor-card, .relay-title-settings, .table-container, .user-table, .data-table) { border-color: var(--liquid-line); border-radius: 18px; background: var(--liquid-surface); box-shadow: var(--liquid-shadow); }
html [data-liquid-admin="management"] :is(.user-table, .data-table) { border-collapse: separate; border-spacing: 0; }
html [data-liquid-admin="management"] :is(.user-table, .data-table) th { background: #edf4fa; color: var(--liquid-muted); border-bottom-color: var(--liquid-line); }
html [data-liquid-admin="management"] :is(.user-table, .data-table) th:first-child { border-top-left-radius: 17px; }
html [data-liquid-admin="management"] :is(.user-table, .data-table) th:last-child { border-top-right-radius: 17px; }
html [data-liquid-admin="management"] :is(.add-btn, .btn-primary) { background: var(--liquid-blue); color: #fff; border-radius: 11px; box-shadow: 0 3px 9px rgba(35, 104, 180, .15); transition: background-color 4s ease; }
html [data-liquid-admin="management"] :is(.btn-secondary, .action-btn, .logout-btn, .menu-toggle, .edit-input, .search-input) { border-color: #cfdfec; border-radius: 10px; }
html [data-liquid-admin="management"] :is(.search-input, .edit-input) { background: rgba(255, 255, 255, .94); color: var(--liquid-ink); }
html [data-liquid-admin="management"] :is(.modal, .modal-content, .modal-container) { border: 1px solid #fff; border-radius: 20px; background: #f8fcff; box-shadow: 0 18px 60px rgba(35, 68, 105, .2); }
html [data-liquid-admin="management"] :is(.empty-state, .batch-bar) { border-radius: 16px; }
html [data-liquid-admin] :focus-visible { outline: 2px solid var(--liquid-blue); outline-offset: 3px; }

@media (hover: hover) {
  html .page-wrapper[data-liquid-admin] .feature-item:not(.disabled-feature):hover { transform: translateY(-2px); background: rgba(255, 255, 255, .95); box-shadow: 0 8px 22px rgba(60, 97, 132, .09), inset 0 1px 0 #fff; }
}

@media (min-width: 769px) {
  html [data-liquid-admin="management"] > .topbar { margin: 12px 16px 0; border: 1px solid #fff; border-radius: 18px; box-shadow: var(--liquid-shadow); }
  html .page-wrapper[data-liquid-admin] .desktop-home-scroll .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html .page-wrapper[data-liquid-admin] .desktop-home-scroll .feature-grid > .feature-item { height: 68px; padding: 0 10px; gap: 8px; }
}

@media (max-width: 768px) {
  html .page-wrapper[data-liquid-admin] .chat-page[data-v-d7c5d04c] .session-list-scroll { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); scroll-padding-bottom: 84px; }
}

@media (max-width: 360px) {
  html .page-wrapper[data-liquid-admin] > .main-content > .content { padding: 16px 12px 24px; }
  html .page-wrapper[data-liquid-admin] .feature-grid { gap: 8px; }
  html .page-wrapper[data-liquid-admin] .feature-grid > .feature-item { height: 60px; min-height: 60px !important; padding: 0 9px; gap: 7px; }
  html .page-wrapper[data-liquid-admin] .feature-text { font-size: 12px; }
  html .page-wrapper[data-liquid-admin] .info-row { padding: 10px 11px; }
  html .page-wrapper[data-liquid-admin] > .custom-tabbar { left: 12px; right: 12px; }
}

html .page-wrapper[data-liquid-admin]:not(.glass-effect) :is(.info-card, .custom-tabbar, .desktop-sidebar-nav) { background: #f8fcff; backdrop-filter: none; -webkit-backdrop-filter: none; }
html .page-wrapper[data-liquid-admin] .chat-page:not(.glass-effect)[data-v-d7c5d04c] :is(.chat-header, .chat-detail-header, .message-input-area) { backdrop-filter: none; -webkit-backdrop-filter: none; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html .page-wrapper[data-liquid-admin] :is(.info-card, .custom-tabbar, .desktop-sidebar-nav), html [data-liquid-admin="management"] :is(.topbar, .management-header) { background: #f8fcff; }
}

@media (prefers-reduced-motion: reduce) {
  html [data-liquid-admin] :is(.feature-item, .brand-signature, .admin-liquid-color-layer, .admin-badge, .tab-item, .add-btn, .btn-primary) { transition: none !important; animation: none !important; }
  html .page-wrapper[data-liquid-admin] .feature-item:not(.disabled-feature):is(:hover, :active) { transform: none; }
}
