/* Original neutral material. Optical layers adapt the audited liquid-glass-react
   engine; capsule proportions are informed by 21st.dev's public switcher. */
:root {
  color-scheme: light;
  --bg: #e4e4de;
  --bg-elevated: #ecece6;
  --surface: #eeeee8;
  --surface-raised: #f1f1ed;
  --surface-soft: rgb(255 255 255 / 12%);
  --text: #1d1e20;
  --ink: var(--text);
  --text2: #393a3d;
  --text3: #4c4d4f;
  --text-muted: var(--text3);
  --muted: var(--text3);
  --accent: #343537;
  --accent-strong: #222325;
  --accent2: var(--accent-strong);
  --blue: var(--accent);
  --blue-dark: var(--accent-strong);
  --blue-soft: rgb(255 255 255 / 24%);
  --accent-soft: rgb(255 255 255 / 28%);
  --accent-border: rgb(38 39 42 / 25%);
  --border: rgb(46 47 49 / 15%);
  --border-strong: rgb(46 47 49 / 38%);
  --ring: #343537;
  --glass-filter: none;
  --control-filter: none;
  --glass-edge: rgb(255 255 255 / 80%);
  --glass-shadow: inset 0 1px 0 var(--glass-edge), inset 0 -1px 0 rgb(35 36 38 / 7%), 0 12px 32px rgb(34 36 34 / 8%), 0 2px 5px rgb(34 36 34 / 4%);
  --shadow-sm: var(--glass-shadow);
  --shadow-lg: inset 0 1px 0 var(--glass-edge), inset 0 -1px 0 rgb(35 36 38 / 8%), 0 24px 64px rgb(34 36 34 / 13%);
  --shadow: var(--shadow-lg);
  --radius-md: 24px;
  --radius-lg: 30px;
  --radius: 18px;
  --duration-fast: 160ms;
  --duration-base: 260ms;
  --ease-glass: cubic-bezier(.16, 1, .3, 1);
}
body, body.announcement-page, body.login-body {
  position: relative;
  isolation: isolate;
  color: var(--text);
  background: var(--bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url('liquid-wallpaper.svg') center / cover no-repeat;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --surface: rgb(255 255 255 / 12%);
    --surface-raised: rgb(255 255 255 / 20%);
    --glass-filter: blur(8px) saturate(105%);
    --control-filter: blur(5px);
  }
}
:is(.login-card, .dashboard-nav, .account-workspace, .hero, .section,
  .home-link, .site-content-panel, .site-ad-slot, .site-notice,
  .qr-card, .verification-card, .status-line, .sidebar, .filters, .loading-panel,
  .metric, .metric-card, .stat-card, .panel, .table-card, .content-panel) {
  border: 1px solid var(--border);
  border-top-color: var(--glass-edge);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgb(255 255 255 / 12%), transparent 50%), var(--surface);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
}
.login-card { border-radius: 32px; box-shadow: var(--shadow-lg); }
.login-heading h1, .page-heading h1, .announcement-page-heading h1 {
  color: var(--text); letter-spacing: -.04em;
}
:is(.brand-mark, .login-card .brand-mark, .brand > .brand-mark, .login-brand .brand-mark) {
  color: var(--text);
  border: 1px solid var(--glass-edge);
  background: linear-gradient(145deg, rgb(255 255 255 / 48%), rgb(255 255 255 / 10%));
  box-shadow: inset 0 1px 1px #fff, inset 0 -1px 0 rgb(30 31 33 / 12%), 0 6px 16px rgb(30 31 33 / 9%);
}
.hero { border-radius: var(--radius-lg); background: var(--surface); }
.hero::after { display: none; }
.hero, .workspace-grid { animation: none; }
/* Content stays sharp: nested surfaces use only a light tint, never more blur. */
:is(.status-card, .account-result-card, .account-result-card.running, .message-option,
  .friend-card, .account-add-form, .run-scope-panel, .msg-preview,
  .saved-message-item, .summary-card, .captcha-box, .service-pill,
  .login-import-help, .friends-empty, .license-detail, .private-note,
  .schedule-note, .result-event, .remote-login-steps li) {
  border-color: var(--border);
  background: var(--surface-raised);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 65%);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.hero .qr-card, .section .site-notice, .panel .content-panel {
  background: var(--surface-raised);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.dashboard-nav { border-radius: 28px; background: var(--surface); }
.sidebar { border-radius: 0; }
.workspace > .topbar { background: var(--surface); border-bottom-color: var(--border); }
.nav-link, .nav-item, .account-tab, .day-btn, .message-option,
.run-scope-option, .message-mode-btn {
  transition: background-color var(--duration-fast) ease, border-color var(--duration-fast) ease,
    color var(--duration-fast) ease, box-shadow var(--duration-fast) ease,
    transform 260ms var(--ease-glass);
}
.nav-link, .nav-item { border-radius: 18px; }
:is(.dashboard-nav .nav-link.active, .sidebar .nav-item.active,
  .account-tab.active, .run-scope-option.active, .message-mode-btn.active,
  .message-option.selected, .friend-card.selected, .day-btn.on) {
  color: var(--text);
  border-color: var(--accent-border);
  background: rgb(255 255 255 / 30%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 92%), inset 0 -1px 0 rgb(40 41 43 / 10%), 0 3px 8px rgb(30 31 33 / 6%);
}
.message-mode, .run-scope-switch { background: rgb(255 255 255 / 12%); border-radius: 18px; }
.account-tab, .run-scope-option, .message-mode-btn { border-radius: 14px; }
/* The permanent selection lens moves beneath the original interactive links. */
.liquid-nav-ready { isolation: isolate; }
.liquid-nav-ready:not(.dashboard-nav) { position: relative; }
.liquid-nav-ready > :is(.nav-link, .nav-item, .run-scope-option, .message-mode-btn) {
  position: relative; z-index: 1;
}
.liquid-nav-ready > :is(.nav-link.active, .nav-item.active, .run-scope-option.active, .message-mode-btn.active) {
  border-color: transparent; background: transparent; box-shadow: none;
}
.liquid-lens {
  position: absolute;
  pointer-events: none;
  border-radius: inherit;
}
.liquid-nav-lens {
  inset: 0 auto auto 0;
  z-index: 0;
  border-radius: 18px;
  transform-origin: 0 0;
  transition: transform 340ms var(--ease-glass);
}
.liquid-lens__warp, .liquid-lens__edge { position: absolute; inset: 0; border-radius: inherit; }
.liquid-lens__warp {
  background: rgb(255 255 255 / 12%);
  -webkit-backdrop-filter: var(--control-filter);
  backdrop-filter: var(--control-filter);
}
.liquid-lens__edge {
  border: 1px solid rgb(255 255 255 / 65%);
  background: linear-gradient(125deg, rgb(255 255 255 / 25%), transparent 42%, transparent 70%, rgb(255 255 255 / 12%));
  box-shadow: inset 0 1px 1px rgb(255 255 255 / 90%), inset 0 -1px 1px rgb(34 35 37 / 16%), 0 3px 8px rgb(34 35 37 / 8%);
}
.liquid-control-ready { position: relative; isolation: isolate; }
.liquid-control-lens { inset: 0; z-index: -1; }
:is(.btn, .login-button, .logout-button, .button, .return-link, .primary-link,
  .captcha-actions button, #captcha-close, .logout, .remote-workspace button) {
  border-radius: 16px;
  transition: transform 260ms var(--ease-glass), background-color 160ms ease,
    border-color 160ms ease, box-shadow 160ms ease, color 160ms ease;
}
:is(.btn-primary, .login-button, .primary-link, button.primary, .button.primary, #captcha-confirm),
:is(.btn-primary, .login-button, .primary-link, button.primary, .button.primary, #captcha-confirm):hover {
  color: var(--text);
  border: 1px solid rgb(255 255 255 / 80%);
  background: linear-gradient(130deg, rgb(255 255 255 / 26%), rgb(255 255 255 / 8%));
  box-shadow: inset 0 1px 1px #fff, inset 0 -1px 0 rgb(40 41 43 / 18%), 0 5px 14px rgb(34 35 37 / 12%);
}
:is(.btn-secondary, .logout-button, .return-link, #captcha-refresh, .remote-workspace button) {
  color: var(--text2); border-color: var(--border-strong);
  background: var(--surface-raised); box-shadow: inset 0 1px 0 var(--glass-edge);
}
.btn-danger { color: var(--error, #b42335); background: rgb(255 239 239 / 70%); box-shadow: inset 0 1px 0 #fff; }
button, .button { border-color: var(--border-strong); min-height: 44px; touch-action: manipulation; }
button:not(:disabled):active:not(:focus-visible),
:is(.button, .home-link, .nav-link, .return-link):active:not(:focus-visible) {
  transform: scale(.975); transition-duration: 100ms;
}
button:focus-visible, :is(.button, .home-link, .nav-link, .return-link):focus-visible { transform: none; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
:is(input, textarea, select):not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
  color: var(--text); border-color: var(--border-strong);
  background: rgb(255 255 255 / 24%);
  box-shadow: inset 0 1px 3px rgb(30 31 33 / 5%);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
:is(input, textarea, select)::placeholder { color: var(--text3); }
:is(input, textarea, select):focus-visible { border-color: var(--accent); outline: 2px solid var(--ring); outline-offset: 2px; }
input:is([type="checkbox"], [type="radio"], [type="range"]) { accent-color: var(--accent); }
.field-group input { min-height: 48px; border-radius: 14px; }
.login-form .login-button { min-height: 50px; border-radius: 18px; }
.form-error, .form-success { border-radius: 14px; }
.home-link { border-radius: 24px; color: var(--text2); }
.toggle::after { box-shadow: 0 2px 5px rgb(30 31 33 / 22%); transition: transform 220ms var(--ease-glass); }
.toggle.on::before { background: #48494b; }
.toast { color: #fff; background: #303133; border-color: rgb(255 255 255 / 24%); box-shadow: 0 12px 30px rgb(30 31 33 / 18%); }
#captcha-dialog { color: var(--text); border-color: var(--border); border-top-color: var(--glass-edge); border-radius: 28px; background: rgb(239 239 234 / 92%); box-shadow: var(--shadow-lg); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); }
#captcha-dialog::backdrop { background: rgb(23 24 25 / 42%); -webkit-backdrop-filter: none; backdrop-filter: none; }
#captcha-dialog[open] { animation: glass-dialog-enter 180ms var(--ease-glass); }
#captcha-dialog :is(.captcha-eyebrow, #captcha-instructions, #captcha-status, .captcha-box label, #captcha-login-link, #captcha-close) { color: var(--text2); }
#captcha-dialog :is(button, input, a):focus-visible { outline-color: var(--ring); }
#captcha-slider { accent-color: var(--accent); }
#captcha-close { background: var(--surface-soft); }
/* Official QR, captcha and remote pixels retain their natural, sharp colors. */
.qr-image-area, .qr-img-wrap { background: #fff; }
.remote-dialog, #remote-dialog { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
#remote-dialog::backdrop { background: rgb(23 24 25 / 55%); }
.remote-workspace button[aria-pressed="true"] { color: var(--text); background: rgb(255 255 255 / 40%); border-color: var(--accent); }
a:focus-visible, button:focus-visible, summary:focus-visible, #remote-screen:focus-visible { outline-color: var(--ring); }
.browser-frame { border-color: var(--border-strong); background: #181819; box-shadow: 0 24px 70px rgb(34 35 37 / 14%); }
.loader { border-color: #c9c9c5; border-top-color: var(--accent); }
.remote-login-steps li::before { background: rgb(255 255 255 / 24%); }
.remote-login-steps li.active::before { color: #fff; background: var(--accent-strong); }
.result-event { color: var(--text2); }
.result-event.error { color: var(--error); }
.announcement-page-heading a, .site-ad-cta { color: var(--accent-strong); }
.announcement-page-heading p, .site-notice-date { color: var(--text3); }
:is(.site-content-panel, .site-ad-slot, .announcement-page) :is(a, summary):focus-visible { outline-color: var(--ring); }
th { background: rgb(255 255 255 / 16%); }
td { border-bottom-color: var(--border); }
tbody tr:hover { background: rgb(255 255 255 / 22%); }
.badge:not(.success):not(.error):not(.warning) { color: var(--text2); background: var(--surface-raised); }
#main-content[aria-busy="true"] { opacity: 1; }
.navigation-status { color: var(--text); border-color: var(--border); background: #ecece7; box-shadow: var(--glass-shadow); }
body[data-navigation="loading"]::after {
  content: ""; position: fixed; inset: 0 auto auto 0; width: 32%; height: 3px;
  z-index: 150; pointer-events: none;
  background: linear-gradient(90deg, transparent, #727370, #343537);
  animation: glass-progress 1100ms ease-in-out infinite;
}
@keyframes glass-dialog-enter { from { opacity: 0; transform: translateY(6px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes glass-progress { from { transform: translateX(-100%); } to { transform: translateX(315%); } }
/* Legacy chrome uses the same neutral material; remote loading stays readable. */
.logs { color: var(--text2); background: var(--surface-raised); }
.license-details div, .official-panel summary { background: var(--surface-raised); }
.account-tab:not(.active) { background: var(--surface-raised); }
.browser-placeholder { background: #e4e4de; }
button:hover, .button:hover { border-color: var(--border-strong); }
.status-line:not(.success):not(.error) .status-dot { box-shadow: 0 0 0 4px rgb(34 35 37 / 9%); }
.auth-link-disabled, .breadcrumb > span { color: var(--text3); }
.liquid-lens__edge--screen {
  border-color: rgb(255 255 255 / 45%);
  background: linear-gradient(135deg, rgb(255 255 255 / 12%), transparent 46%, transparent 78%, rgb(255 255 255 / 8%));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 60%), inset 0 -1px 0 rgb(34 35 37 / 8%);
}
.liquid-lens__edge--overlay { background: none; box-shadow: inset 0 -1px 1px rgb(34 35 37 / 14%); border-color: rgb(34 35 37 / 12%); }

@media (hover: hover) and (pointer: fine) {
  :is(.home-link, .btn-secondary, .logout-button, .return-link, .nav-link, .nav-item):hover {
    border-color: var(--accent-border); background-color: rgb(255 255 255 / 26%);
    box-shadow: inset 0 1px 0 var(--glass-edge), 0 5px 14px rgb(34 35 37 / 10%);
  }
  .home-link:hover { transform: translateY(-2px); }
  :is(.btn-primary, .login-button):hover:not(:disabled) { box-shadow: inset 0 1px 1px #fff, inset 0 -1px 0 rgb(40 41 43 / 15%), 0 7px 18px rgb(34 35 37 / 17%); }
}
@media (max-width: 960px) {
  .dashboard-nav {
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    left: max(10px, env(safe-area-inset-left, 0px));
    right: max(10px, env(safe-area-inset-right, 0px));
    padding: 6px; border: 1px solid var(--border); border-top-color: var(--glass-edge);
    border-radius: 26px; box-shadow: var(--glass-shadow);
  }
  .dashboard-nav .nav-link { border-radius: 20px; }
  .dashboard-nav .liquid-nav-lens { border-radius: 20px; }
}
@media (max-width: 600px) {
  :root { --glass-filter: blur(6px); --control-filter: blur(3px); }
  .login-card { border-radius: 28px; }
  .home-link, .section { border-radius: 22px; }
  :is(.sidebar, .workspace > .topbar) { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --surface: #f1f1ec; --surface-raised: #f8f8f3; --surface-soft: #e1e1db; --glass-filter: none; --control-filter: none; }
  body::before { display: none; }
  .liquid-lens__warp { background: #f8f8f3; filter: none !important; }
  :is(.dashboard-nav .nav-link.active, .sidebar .nav-item.active, .account-tab.active, .run-scope-option.active, .message-mode-btn.active) { background: #f8f8f3; }
  :is(input, textarea, select):not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) { background: #f8f8f3; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  body[data-navigation="loading"]::after { width: 100%; }
}
@media (forced-colors: active) {
  :root { --glass-filter: none; --control-filter: none; }
  body::before, .liquid-lens { display: none; }
  a:focus-visible, button:focus-visible, summary:focus-visible, #remote-screen:focus-visible { outline-color: Highlight; }
  :is(.btn, .login-button, .home-link, .nav-link, .account-tab, .login-card, .section, .hero) { border: 1px solid ButtonText; box-shadow: none; }
  :is(.nav-link.active, .nav-item.active, .account-tab.active) { outline: 2px solid Highlight; }
}