/* v2.2 Liquid Glass: readable fallback first, progressive blur on shared surfaces. */
:root {

  --ds-bg: #081321; --ds-text: #edf4ff; --ds-muted: #b0c0d5;
  --ds-brand: #a096ff; --ds-cyan: #7ee1f4; --ds-gold: #f1d8a1;
  --glass-bg: rgba(20, 39, 64, .62);
  --glass-raised: rgba(16, 32, 53, .88);
  --glass-fallback: #12243b;
  --glass-border: rgba(182, 212, 255, .22);
  --glass-highlight: rgba(223, 242, 255, .24);
  --glass-shadow: inset 0 1px 0 var(--glass-highlight), 0 16px 42px rgba(0, 5, 18, .24), 0 3px 10px rgba(0, 8, 22, .12);
  --ambient-blue: rgba(55, 123, 235, .32);
  --ambient-purple: rgba(135, 98, 230, .25);
  --ambient-cyan: rgba(25, 163, 184, .16);
  --ds-soft: rgba(152, 184, 232, .10);
  --badge-bg: rgba(154, 184, 232, .12); --badge-text: #c7d6ed;
  --badge-release-bg: rgba(158, 124, 255, .18); --badge-release: #d3c5ff;
  --badge-service-bg: rgba(85, 200, 223, .14); --badge-service: #8fe6f6;
  --badge-maintenance-bg: rgba(240, 182, 95, .15); --badge-maintenance: #ffdb9f;

  --glass-blur: 18px; --ds-radius: 18px;
  --ds-surface: var(--glass-fallback); --ds-border: var(--glass-border);
  --ds-shadow: var(--glass-shadow);
  --text: var(--ds-text); --text-muted: var(--ds-muted); --text-soft: var(--ds-muted);
  --cyan: var(--ds-cyan); --purple: var(--ds-brand); --glass: var(--glass-bg);
  color-scheme: dark;
}
:root[data-theme=light] {

  --ds-bg: #edf3fc; --ds-text: #172c47; --ds-muted: #465f7c;
  --ds-brand: #6650be; --ds-cyan: #12667c; --ds-gold: #775213;
  --glass-bg: rgba(255, 255, 255, .64);
  --glass-raised: rgba(248, 252, 255, .92);
  --glass-fallback: #f7fbff;
  --glass-border: rgba(71, 113, 164, .24);
  --glass-highlight: rgba(255, 255, 255, .94);
  --glass-shadow: inset 0 1px 0 var(--glass-highlight), 0 14px 38px rgba(44, 82, 138, .12), 0 3px 10px rgba(44, 82, 138, .06);
  --ambient-blue: rgba(111, 165, 247, .25);
  --ambient-purple: rgba(166, 146, 235, .20);
  --ambient-cyan: rgba(109, 208, 227, .20);
  --ds-soft: rgba(60, 100, 163, .07);
  --badge-bg: rgba(51, 87, 140, .08); --badge-text: #3f5878;
  --badge-release-bg: rgba(120, 84, 190, .11); --badge-release: #63429e;
  --badge-service-bg: rgba(25, 127, 152, .11); --badge-service: #145e72;
  --badge-maintenance-bg: rgba(195, 128, 32, .12); --badge-maintenance: #80500b;
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme=dark]):not([data-theme=light]) {

  --ds-bg: #edf3fc; --ds-text: #172c47; --ds-muted: #465f7c;
  --ds-brand: #6650be; --ds-cyan: #12667c; --ds-gold: #775213;
  --glass-bg: rgba(255, 255, 255, .64);
  --glass-raised: rgba(248, 252, 255, .92);
  --glass-fallback: #f7fbff;
  --glass-border: rgba(71, 113, 164, .24);
  --glass-highlight: rgba(255, 255, 255, .94);
  --glass-shadow: inset 0 1px 0 var(--glass-highlight), 0 14px 38px rgba(44, 82, 138, .12), 0 3px 10px rgba(44, 82, 138, .06);
  --ambient-blue: rgba(111, 165, 247, .25);
  --ambient-purple: rgba(166, 146, 235, .20);
  --ambient-cyan: rgba(109, 208, 227, .20);
  --ds-soft: rgba(60, 100, 163, .07);
  --badge-bg: rgba(51, 87, 140, .08); --badge-text: #3f5878;
  --badge-release-bg: rgba(120, 84, 190, .11); --badge-release: #63429e;
  --badge-service-bg: rgba(25, 127, 152, .11); --badge-service: #145e72;
  --badge-maintenance-bg: rgba(195, 128, 32, .12); --badge-maintenance: #80500b;
    color-scheme: light;
  }
}
*{box-sizing:border-box}body{color:var(--ds-text)!important;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;line-height:1.6}a{color:var(--ds-cyan)}button,input,select,textarea{font:inherit}button,a,input,select,summary{touch-action:manipulation}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--ds-cyan);outline-offset:3px}button:disabled{opacity:.5;cursor:not-allowed}.glass:before,.glass:after{display:none!important}.app-shell,.user-center-shell,.service-shell,.community-shell{max-width:1160px!important;padding:24px;margin:auto}h1,h2,h3,p{overflow-wrap:anywhere}h1{font-size:24px!important;letter-spacing:-.025em}h2{font-size:19px!important;letter-spacing:-.02em}h3{font-size:16px!important}.topbar{min-height:64px;padding:12px 20px!important;gap:12px;border-radius:16px!important}.topbar h1{font-size:19px!important;margin:0}.topbar .eyebrow{display:none}.topbar-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.data-note,.service-note,.user-center-copy,.login-copy,.muted,.meta-label{color:var(--ds-muted)!important}.primary-button,.ghost-button,.button-link,.tutorial-button{min-height:42px;border-radius:11px!important;padding:9px 16px!important;font-size:14px!important;line-height:1.4;display:inline-flex;justify-content:center;align-items:center;gap:6px;max-width:100%;white-space:normal}.ghost-button,.tutorial-button{background:var(--ds-soft)!important;color:var(--ds-text)!important;border:1px solid var(--ds-border)!important;box-shadow:none!important}.ghost-button:hover,.button-link:hover{filter:brightness(1.08)}input:not([type=checkbox]):not([type=radio]),select,textarea{background:var(--ds-soft)!important;color:var(--ds-text)!important;border:1px solid var(--ds-border)!important;border-radius:11px!important;max-width:100%;min-width:0}input:not([type=checkbox]):not([type=radio]),select{min-height:48px;padding:10px 12px}textarea{padding:12px}input[type=checkbox],input[type=radio]{accent-color:var(--ds-brand);width:18px;height:18px;flex-shrink:0}label{color:var(--ds-text)!important}.service-main,.community-main{gap:24px}.service-section{padding:24px}.service-dialog,dialog{color:var(--ds-text)!important;border:1px solid var(--ds-border)!important;border-radius:20px;max-width:min(620px,calc(100vw - 28px));max-height:90dvh;overflow:auto;padding:24px}dialog::backdrop{background:#020813ad;backdrop-filter:blur(4px)}.global-nav{display:flex;gap:4px;border-bottom:1px solid var(--ds-border);padding:14px 0;margin-bottom:24px;overflow:auto}.global-nav a{color:var(--ds-muted);text-decoration:none;padding:8px 14px;border-radius:9px;white-space:nowrap;font-size:14px}.global-nav a[aria-current=page]{color:var(--ds-text);background:var(--ds-soft);font-weight:600}.global-nav a:hover{background:var(--ds-soft)}.account-menu{position:relative}.account-menu summary{list-style:none;cursor:pointer}.account-menu summary::-webkit-details-marker{display:none}.account-menu-panel{position:absolute;right:0;top:calc(100% + 8px);min-width:190px;padding:8px;border-radius:14px;z-index:50}.account-menu-panel a,.account-menu-panel button{display:block;width:100%;text-align:left;background:transparent;color:var(--ds-text);border:0;padding:10px;border-radius:8px;text-decoration:none}.account-menu-panel a:hover,.account-menu-panel button:hover{background:var(--ds-soft)}.theme-control{padding:8px 12px}.page-heading{display:flex;align-items:start;justify-content:space-between;gap:16px;margin-bottom:20px}.page-heading h1,.page-heading h2{margin:0}.page-heading p{margin:6px 0 0;color:var(--ds-muted)}.stack{display:grid;gap:20px}.compact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.muted{font-size:14px}.status-dot:before{content:' ';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ds-cyan);margin-right:7px}.empty-state{padding:30px;text-align:center;border:1px dashed var(--ds-border);border-radius:16px;color:var(--ds-muted)}.feedback{padding:12px 16px;border-radius:12px;background:var(--ds-soft);color:var(--ds-text);overflow-wrap:anywhere}.feedback:empty{display:none}.feedback[data-error=true]{border-left:3px solid #e77983}.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.section-head h2{margin:0}.tag{padding:4px 9px;background:var(--ds-soft);border:1px solid var(--ds-border);border-radius:8px;font-size:12px;display:inline-block}.inline-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.text-button{border:0;background:transparent;color:var(--ds-cyan);cursor:pointer;padding:8px 0}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:12px;border-bottom:1px solid var(--ds-border)}th{font-size:12px;color:var(--ds-muted)}.stepper{display:flex;gap:8px;padding:0;list-style:none;counter-reset:steps}.stepper li{flex:1;border-bottom:2px solid var(--ds-border);padding:10px 0;font-size:14px;color:var(--ds-muted)}.stepper li:before{counter-increment:steps;content:counter(steps);display:inline-grid;place-items:center;width:25px;height:25px;border-radius:50%;background:var(--ds-soft);margin-right:7px}.stepper li[aria-current=step]{color:var(--ds-text);border-color:var(--ds-brand)}.form-stack{display:grid;gap:18px}.form-stack label{display:grid;gap:8px}.form-stack .check-label,.platform-choice{display:flex;gap:10px;align-items:center}.platform-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.platform-choice{padding:12px;border:1px solid var(--ds-border);border-radius:12px;cursor:pointer}.platform-choice:has(input:checked){border-color:var(--ds-brand);background:var(--ds-soft)}.detail-list{display:flex;flex-wrap:wrap;gap:20px;margin:16px 0}.detail-list div{min-width:100px}.detail-list dt{font-size:12px;color:var(--ds-muted)}.detail-list dd{margin:4px 0 0;font-size:15px;font-weight:600}.private-link{overflow-wrap:anywhere;word-break:break-all;max-height:140px;overflow:auto;user-select:all;background:var(--ds-soft);padding:14px;border-radius:12px;font-size:12px}.qr-image{display:block;width:260px;max-width:100%;height:auto;margin:20px auto;background:white;padding:8px;border-radius:12px}.faq details{border-top:1px solid var(--ds-border);padding:15px 0}.faq summary{cursor:pointer;font-weight:600}.faq p{color:var(--ds-muted)}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0)}[hidden]{display:none!important}
@media(max-width:700px){.app-shell,.user-center-shell,.service-shell,.community-shell{padding:14px!important}.topbar{padding:10px 12px!important;align-items:center}.topbar h1{font-size:17px!important}.topbar-actions{gap:6px}.global-nav{flex-wrap:wrap;gap:2px;overflow:visible;margin-bottom:20px;padding:10px 0}.global-nav a{padding:7px 11px;font-size:13px}.compact-grid{grid-template-columns:1fr}.service-section{padding:18px}.page-heading{flex-wrap:wrap}.platform-grid{grid-template-columns:1fr}.stepper{gap:6px}.stepper li{font-size:12px}.stepper li:before{width:20px;height:20px;margin-right:4px}.account-menu-panel{min-width:180px}.detail-list{gap:15px}.theme-control{font-size:12px!important;padding:8px!important}dialog{padding:18px}.topbar .updated-pill{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Keep narrow-screen identity and account controls on one compact row. */
@media(max-width:700px){.topbar{flex-direction:row!important;justify-content:space-between!important}.topbar .brand-row{min-width:0}.topbar .brand-mark{width:34px;height:34px}.topbar h1{font-size:15px!important}.topbar-actions{margin-left:auto}.topbar-actions .ghost-button{padding:8px 10px!important}.topbar .theme-control{display:none}.global-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.global-nav a{text-align:center}}
.topbar-actions{width:auto!important;flex:0 0 auto}.topbar .brand-mark{flex-shrink:0}.topbar h1{white-space:nowrap}.topbar .brand-row{gap:12px}
.legacy-topbar-action{display:none!important}.context-actions{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 20px}.context-actions a{font-size:13px}
/* The account popover must escape the glass surface and sit above page cards. */
.topbar{position:relative;overflow:visible;z-index:30}
.dashboard-nav a[href="/claim"],.dashboard-nav a[href="/announcements"],.dashboard-nav a[href="/my-subscription"],.dashboard-nav a[href="/admin/users"],.dashboard-nav a[href="/admin/orders"],.dashboard-nav a[href="/admin/announcements"]{display:none!important}


html { background: var(--ds-bg); }
/* Explicit themes override the legacy theme-specific tokens at equal specificity. */
:root[data-theme=dark], :root[data-theme=light] {
  --text: var(--ds-text); --text-muted: var(--ds-muted); --text-soft: var(--ds-muted);
  --cyan: var(--ds-cyan); --purple: var(--ds-brand); --glass: var(--glass-bg);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --text: var(--ds-text); --text-muted: var(--ds-muted); --text-soft: var(--ds-muted);
    --cyan: var(--ds-cyan); --purple: var(--ds-brand); --glass: var(--glass-bg);
  }
}
body {
  isolation: isolate;
  background: var(--ds-bg) !important;
}
/* Fixed light fields sit behind content on every page, including legacy templates. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse at 6% 4%, var(--ambient-blue), transparent 56%),
    radial-gradient(ellipse at 92% 28%, var(--ambient-purple), transparent 55%),
    radial-gradient(ellipse at 42% 100%, var(--ambient-cyan), transparent 58%);
}
body .ambient { display: none; }
.glass, .service-section, .jp-service, .auth-card,
dialog, .service-dialog, .account-menu-panel, .more-menu > div {
  background: var(--glass-fallback);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}
.glass, .service-section, .jp-service, .auth-card { border-radius: var(--ds-radius); }
/* Safari supports the prefixed property. Unsupported engines keep opaque surfaces. */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .glass, .service-section, .jp-service, .auth-card,
  dialog, .service-dialog, .account-menu-panel, .more-menu > div {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(135%);
    backdrop-filter: blur(var(--glass-blur)) saturate(135%);
  }
  .topbar, dialog, .service-dialog, .account-menu-panel, .more-menu > div {
    background: var(--glass-raised);
  }
}
.primary-button {
  background: linear-gradient(125deg, #4966c9, #7059c3) !important;
  color: #fff !important; border: 1px solid rgba(225, 229, 255, .26) !important;
  box-shadow: inset 0 1px 0 #ffffff24, 0 4px 14px #3655bb24 !important;
}
.primary-button:hover:not(:disabled) { filter: brightness(1.1); }
.ghost-button, .primary-button, .offer-card, .admin-links a {
  transition: background-color 150ms ease, border-color 150ms ease, filter 150ms ease;
}
.badge, .soft-pill, .service-badge, .announcement-type, .tag {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-height: 26px; max-width: 100%; padding: 3px 9px;
  border: 1px solid var(--glass-border); border-radius: 8px;
  background: var(--badge-bg); color: var(--badge-text);
  font-size: 12px; font-weight: 500; line-height: 1.5; white-space: nowrap;
  vertical-align: middle;
}
.announcement-type[data-type=release], .announcement-type[data-type=version] {
  background: var(--badge-release-bg); color: var(--badge-release);
}
.announcement-type[data-type=service] {
  background: var(--badge-service-bg); color: var(--badge-service);
}
.announcement-type[data-type=maintenance] {
  background: var(--badge-maintenance-bg); color: var(--badge-maintenance);
}
.announcement-flags { align-items: center; }
.context-actions { align-items: center; }
.context-actions .primary-button { width: auto; }