/* Freeman ONE: shared cool glass material and subscription controls. */
:root {
  --bg:#f8fafc;
  --paper:rgba(255,255,255,.82);
  --paper-solid:#fff;
  --ink:#0b1028;
  --muted:#66708a;
  --line:rgba(89,108,145,.12);
  --accent:#0878ff;
  --accent-deep:#0062f8;
  --accent-soft:rgba(8,120,255,.09);
  --icon:#263250;
  --telegram:#229ed9;
  --ok:#168f5a;
  --danger:#ff3b30;
  --shadow:0 8px 28px rgba(24,38,66,.055);
  --shadow-small:0 4px 14px rgba(29,45,73,.035);
  --radius:22px;
}
html,body { background:#f8fafc; color:var(--ink); }
body { background:linear-gradient(180deg,#fafcfe 0%,#f6f9fc 100%); }
.app-shell { background:transparent; }
.glass,.profile-card,.service-card,.news-item,.purchase-card,.support-new-card,.support-shortcuts button,.ticket-row,.conversation-card,.faq,.referral-card,.proxy-entry,.proxy-hero,.balance-card,.form-modal,.install-modal,.qr-modal,.shortfall-modal {
  background:rgba(255,255,255,.82);
  border:1px solid rgba(89,108,145,.12);
  box-shadow:0 8px 28px rgba(24,38,66,.055);
  backdrop-filter:blur(22px) saturate(135%);
  -webkit-backdrop-filter:blur(22px) saturate(135%);
}
.profile-card,.service-card,.news-item,.purchase-card,.support-new-card,.support-shortcuts button,.ticket-row,.faq,.referral-card,.proxy-entry,.balance-card { border-radius:22px; }
.keys-buy-row.buy-key,.keys-buy-row.buy-key:hover { background:rgba(255,255,255,.82)!important; color:var(--ink)!important; border:1px solid var(--line); box-shadow:var(--shadow-small); }
.key-search { background:rgba(255,255,255,.82); border:1px solid var(--line); box-shadow:var(--shadow-small); }
button:focus-visible,a:focus-visible,input:focus-visible { outline:2px solid #0878ff; outline-offset:2px; }

/* Subscription card: preserve the existing accordions and real API actions. */
.access-list { gap:16px; }
.subscription-card.access-card {
  width:100%; overflow:hidden; border-radius:30px;
  border:1px solid rgba(89,108,145,.11);
  background:rgba(255,255,255,.84);
  box-shadow:0 14px 40px rgba(24,38,66,.065);
  backdrop-filter:blur(22px) saturate(135%);
  -webkit-backdrop-filter:blur(22px) saturate(135%);
}
.subscription-card .access-expander:not(.is-open),.subscription-card .device-expander:not(.is-open) { max-height:0; overflow:hidden; }
.subscription-summary.access-summary {
  min-height:130px; padding:27px 30px;
  grid-template-columns:70px minmax(0,1fr) auto 24px;
  gap:20px; color:#0b1028;
}
html .screen .subscription-summary.access-summary .access-key-icon {
  width:70px; height:70px; border-radius:21px!important;
  background:linear-gradient(145deg,#f7faff,#e5efff)!important;
  border:1px solid rgba(118,145,193,.16)!important;
  color:#102047!important;
  box-shadow:0 6px 18px rgba(35,61,105,.07),inset 0 1px rgba(255,255,255,.75)!important;
}
.subscription-summary .access-key-icon svg { width:32px; height:32px; stroke-width:2; }
.subscription-title { display:grid; grid-template-columns:max-content 1fr; column-gap:13px; row-gap:7px; align-items:center; min-width:0; }
.subscription-summary .subscription-title strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:1.48rem; line-height:1.18; font-weight:680; letter-spacing:-.035em; }
.subscription-title small { grid-column:1/-1; margin:0!important; font-size:.94rem!important; color:#66708a!important; }
.subscription-status { display:inline-flex; align-items:center; gap:8px; justify-self:start; padding:8px 12px; border-radius:999px; font-size:.84rem; line-height:1; white-space:nowrap; }
.subscription-status::before { content:""; width:8px; height:8px; border-radius:50%; background:currentColor; }
.subscription-status.is-active { color:#087b37; background:#e8f9ed; }
.subscription-status.is-inactive { color:#69738b; background:#eef1f6; }
.subscription-summary em { display:inline-flex; align-items:center; gap:9px; margin:0; padding:12px 16px!important; border-radius:999px!important; background:#e7f8ed!important; color:#087b37!important; font-size:.94rem!important; font-weight:500; }
.subscription-summary em svg { width:20px; height:20px; }
.subscription-summary>i { color:#56637e; }
.subscription-body { display:grid; gap:14px; padding:0 24px 26px; }
.subscription-access,.subscription-devices-panel {
  min-width:0; padding:20px; border-radius:23px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(89,108,145,.10);
  box-shadow:0 7px 22px rgba(24,38,66,.045);
}
.subscription-access h3,.subscription-devices-panel h3 { margin:0 0 12px; color:#66708a; font-size:.92rem; font-weight:500; }
.subscription-access-grid { display:grid; grid-template-columns:190px minmax(0,1fr); gap:14px; align-items:stretch; }
.subscription-qr {
  display:grid; grid-template-columns:44px 1fr 18px; align-items:center; gap:10px;
  min-height:92px; padding:12px; text-align:left; cursor:pointer;
  border-radius:19px; border:1px solid rgba(89,108,145,.14);
  background:rgba(250,252,255,.85); color:#0b1028;
  box-shadow:0 4px 14px rgba(29,45,73,.035);
}
.subscription-qr>span { display:grid; place-items:center; width:44px; height:44px; border-radius:13px; background:rgba(255,255,255,.82); box-shadow:var(--shadow-small); }
.subscription-qr>span svg { width:24px; height:24px; }
.subscription-qr>b { min-width:0; font-size:1rem; font-weight:600; }
.subscription-qr b small { display:block; margin-top:4px; color:#7b859b; font-size:.75rem; font-weight:400; }
.subscription-qr>.aegis-svg { width:17px; height:17px; color:#66708a; }
.subscription-key-field {
  display:flex; align-items:center; justify-content:space-between; min-width:0; min-height:92px;
  padding:12px 12px 12px 20px; gap:10px;
  border-radius:19px; border:1px solid rgba(111,134,174,.15);
  background:rgba(247,250,254,.78);
}
.subscription-key-field code { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#10172f; font:500 1rem/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.02em; }
.subscription-key-field button {
  flex:none; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:55px; padding:0 15px; border-radius:15px; border:1px solid rgba(89,108,145,.14);
  background:rgba(255,255,255,.9); box-shadow:0 4px 14px rgba(27,43,72,.045);
  color:#17203e; font-size:.88rem; cursor:pointer;
}
.subscription-key-field button svg { width:20px; height:20px; }
.subscription-key-help { display:block; margin:8px 0 0 204px; color:#7b869e; font-size:.76rem; }
.subscription-primary-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.subscription-primary-actions button {
  display:grid; grid-template-columns:34px 1fr 22px; align-items:center; gap:12px;
  min-height:80px; padding:0 25px; border-radius:21px;
  color:#fff; font-size:1.13rem; font-weight:600; cursor:pointer;
  text-align:center; text-shadow:0 1px rgba(0,0,0,.08);
  box-shadow:inset 0 1px rgba(255,255,255,.22);
}
.subscription-primary-actions button svg:first-child { width:30px; height:30px; }
.subscription-primary-actions button svg:last-child { width:22px; height:22px; justify-self:end; }
.subscription-install { border:1px solid rgba(0,91,245,.38); background:linear-gradient(135deg,#0a7cff 0%,#0670fe 45%,#0062f8 100%); box-shadow:0 8px 22px rgba(0,101,255,.18),inset 0 1px rgba(255,255,255,.25)!important; }
.subscription-renew { border:1px solid rgba(16,153,92,.3); background:linear-gradient(135deg,#25b57b 0%,#1ba96b 45%,#188f5a 100%); box-shadow:0 8px 22px rgba(18,145,84,.17),inset 0 1px rgba(255,255,255,.25)!important; }
.subscription-setting {
  display:flex; align-items:center; width:100%; min-height:74px; gap:18px;
  padding:0 22px; border-radius:20px; border:1px solid rgba(89,108,145,.12);
  background:rgba(255,255,255,.86); box-shadow:0 5px 17px rgba(24,38,66,.045);
  color:#0b1028; text-align:left; font-size:1rem; cursor:pointer;
}
.subscription-setting>.aegis-svg:first-child { width:24px; height:24px; flex:none; color:#445375; }
.subscription-setting>span { flex:1; min-width:0; }
.subscription-setting>span small { color:#66708a; font-size:.95rem; }
.subscription-setting>.aegis-svg:last-child { width:20px; height:20px; flex:none; color:#66708a; }
.subscription-switch { width:49px; height:29px; padding:3px; border-radius:999px; background:#d2d9e4; flex:none; }
.subscription-switch::after { content:""; display:block; width:23px; height:23px; border-radius:50%; background:#fff; box-shadow:0 2px 5px rgba(0,0,0,.18); }
.subscription-setting[aria-checked="true"] .subscription-switch { background:#23b677; }
.subscription-setting[aria-checked="true"] .subscription-switch::after { transform:translateX(20px); }
.subscription-renew-note { margin:-6px 4px 0; color:#66708a; font-size:.8rem; }
.subscription-devices-panel h3 { margin:0 0 4px; color:#0b1028; font-size:1.05rem; font-weight:620; }
.subscription-devices-panel>p { margin:0 0 15px; color:#66708a; font-size:.86rem; }
.subscription-device { display:flex; align-items:center; gap:14px; min-height:82px; margin-top:10px; padding:11px 14px; border-radius:18px; border:1px solid rgba(89,108,145,.10); background:rgba(255,255,255,.92); box-shadow:0 4px 14px rgba(24,38,66,.04); }
.subscription-device-icon { display:grid; place-items:center; flex:none; width:48px; height:48px; border-radius:14px; background:linear-gradient(145deg,#f6f9fd,#eef3fa); color:#102047; }
.subscription-device-icon svg { width:24px; height:24px; }
.subscription-device-copy { display:grid; gap:4px; flex:1; min-width:0; }
.subscription-device-copy strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#0b1028; font-size:.96rem; font-weight:620; }
.subscription-device-copy small { color:#66708a; font-size:.78rem; }
.subscription-delete { display:inline-flex; align-items:center; justify-content:center; gap:9px; flex:none; min-height:43px; padding:0 14px; border-radius:14px; border:1px solid rgba(255,59,48,.15); background:#fff5f5; color:#f02f28; cursor:pointer; font-size:.82rem; }
.subscription-delete svg { width:18px; height:18px; }
.subscription-devices-panel footer { display:flex; align-items:center; gap:9px; margin-top:16px; padding-top:14px; border-top:1px solid var(--line); color:#66708a; font-size:.8rem; }
.subscription-devices-panel footer svg { width:17px; height:17px; flex:none; }
.subscription-devices-empty { padding:17px; text-align:center; border-radius:14px; background:#f8fafc; }

/* The other customer pages use the same material and semantic accent. */
.referral-view .app-shell,.referral-view .screen { background:transparent; }
.referral-page {
  --ref-accent:#0878ff; --ref-accent-hover:#0068df;
  --ref-text:#0b1028; --ref-muted:#66708a;
  --ref-surface:rgba(255,255,255,.82);
  --ref-border:rgba(89,108,145,.12);
  --ref-shadow:0 8px 28px rgba(24,38,66,.055);
}
.referral-page .ref-copy,.referral-page .ref-balance { background:#0878ff; box-shadow:0 8px 20px rgba(0,101,255,.16); }
.referral-page .ref-copy,.referral-page .ref-balance { color:#fff!important; }
.referral-page .ref-copy:hover,.referral-page .ref-balance:hover { background:#0068df; }
.referral-page .ref-step-number { background:rgba(8,120,255,.09); }
.referral-page .ref-link-body code,.referral-page .ref-link-icon,.referral-page .ref-step-icon,.referral-page .ref-history-icon { background:#f4f8fd; }
.referral-view .mobile-nav button.active { color:#0878ff!important; }
.referral-view .mobile-nav .tabbar__pill::before { background:rgba(8,120,255,.09); }
.proxy-page :is(.proxy-connection,.proxy-guide-card,.proxy-empty),.support-page :is(.support-new-card,.ticket-row),.balance-page :is(.purchase-card,.balance-card) { background:rgba(255,255,255,.82); border-color:var(--line); box-shadow:var(--shadow); }
.proxy-page :is(.proxy-icon-button,.proxy-icon-tile,.proxy-action:not(.primary)),.simple-header>button,.keys-header>button:first-child { background:rgba(255,255,255,.9); border:1px solid var(--line); box-shadow:var(--shadow-small); }
/* Existing customer actions inherit the same blue, green and neutral semantics. */
.btn-primary,.buy-key,.checkout-button,.compact-primary,.money-hero button:not(.soft),.telegram-hero button:not(.soft):not(.link-button),.support-composer button,.bot-login-link,.key-actions button.primary,.key-actions button.key-install {
  color:#fff!important;
  background:linear-gradient(135deg,#0a7cff 0%,#0670fe 45%,#0062f8 100%)!important;
  border-color:rgba(0,91,245,.3)!important;
  box-shadow:0 8px 22px rgba(0,101,255,.18),inset 0 1px rgba(255,255,255,.22)!important;
}
.btn-primary:hover,.buy-key:hover,.checkout-button:hover,.compact-primary:hover,.bot-login-link:hover,.key-actions button.key-install:hover { color:#fff!important; filter:brightness(1.035); }
.keys-buy-row.buy-key,.keys-buy-row.buy-key:hover { color:var(--ink)!important; background:rgba(255,255,255,.82)!important; border-color:var(--line)!important; box-shadow:var(--shadow-small)!important; filter:none; }
.device-choice.selected,.tariff-choice.selected,.payment-method.selected { background:rgba(8,120,255,.075)!important; box-shadow:var(--shadow-small),inset 0 0 0 1px rgba(8,120,255,.18)!important; }
.selected>.radio-dot,.payment-method.selected>.radio-dot { border-color:#0878ff!important; background:#0878ff!important; }
.recent-key,.tariff-name b,.owner-free { color:#176be3; background:rgba(8,120,255,.08); }
.payment-method svg,.plan-overview>span svg { color:#263250; }
.news-item>i { background:#0878ff; }
.mini-chart i,.funnel-bars b { background:linear-gradient(180deg,#6fb5ff,#0878ff); }
.support-composer textarea:focus { box-shadow:inset 0 0 0 1px rgba(8,120,255,.4); }
.support-message.admin { background:rgba(228,239,253,.9); color:#0b1028; }
.support-message.client { background:rgba(245,248,252,.94); color:#0b1028; }
.ticket-status.waiting { color:#a65a12; background:#fff3e8; }
.screen .keys-buy-row>span { color:#0878ff!important; background:rgba(8,120,255,.09)!important; }
.screen .balance-service>span { color:#168f5a!important; background:rgba(28,166,109,.1)!important; }
input,textarea,select { border-color:var(--line); }
.modal-backdrop :is(.install-modal,.qr-modal,.shortfall-modal,.form-modal) { background:rgba(255,255,255,.94); border:1px solid var(--line); box-shadow:0 18px 55px rgba(24,38,66,.14); }

@media(max-width:650px) {
  .subscription-card.access-card { border-radius:23px; }
  .subscription-summary.access-summary { min-height:98px; padding:17px; grid-template-columns:52px minmax(0,1fr) 18px; gap:11px; }
  html .screen .subscription-summary.access-summary .access-key-icon { width:52px; height:52px; border-radius:15px!important; }
  .subscription-summary .access-key-icon svg { width:25px; height:25px; }
  .subscription-title { grid-template-columns:1fr; gap:4px; }
  .subscription-summary .subscription-title strong { font-size:1.05rem; }
  .subscription-title small { font-size:.76rem!important; }
  .subscription-status { padding:5px 8px; font-size:.68rem; }
  .subscription-status::before { width:6px; height:6px; }
  .subscription-summary em { grid-column:2; grid-row:2; justify-self:start; padding:6px 9px!important; font-size:.7rem!important; }
  .subscription-summary em svg { width:14px; height:14px; }
  .subscription-summary>i { grid-column:3; grid-row:1 / span 2; }
  .subscription-body { padding:0 12px 16px; gap:10px; }
  .subscription-access,.subscription-devices-panel { padding:14px; border-radius:18px; }
  .subscription-access-grid { grid-template-columns:1fr; gap:9px; }
  .subscription-qr { min-height:58px; grid-template-columns:35px 1fr 17px; }
  .subscription-qr>span { width:35px; height:35px; }
  .subscription-qr>span svg { width:21px; height:21px; }
  .subscription-key-field { min-height:64px; padding:8px 8px 8px 12px; }
  .subscription-key-field code { font-size:.8rem; }
  .subscription-key-field button { min-height:43px; padding:0 11px; font-size:.76rem; }
  .subscription-key-help { margin:8px 0 0; }
  .subscription-primary-actions { gap:9px; }
  .subscription-primary-actions button { grid-template-columns:22px 1fr 14px; gap:5px; min-height:60px; padding:0 11px; border-radius:16px; font-size:.86rem; }
  .subscription-primary-actions button svg:first-child { width:22px; height:22px; }
  .subscription-primary-actions button svg:last-child { width:15px; height:15px; }
  .subscription-setting { min-height:58px; gap:11px; padding:0 14px; border-radius:16px; font-size:.88rem; }
  .subscription-setting>.aegis-svg:first-child { width:20px; height:20px; }
  .subscription-setting>span small { font-size:.8rem; }
  .subscription-device { min-height:70px; gap:9px; padding:9px; }
  .subscription-device-icon { width:38px; height:38px; border-radius:11px; }
  .subscription-device-icon svg { width:21px; height:21px; }
  .subscription-device-copy strong { font-size:.84rem; }
  .subscription-device-copy small { font-size:.7rem; }
  .subscription-delete { min-height:37px; padding:0 9px; font-size:.72rem; }
  .subscription-delete svg { width:16px; height:16px; }
}

html[data-theme="dark"] {
  --bg:#10151f; --paper:rgba(28,35,49,.88); --paper-solid:#1c2331;
  --ink:#f4f7fd; --muted:#a9b5ca; --line:rgba(168,188,222,.14);
  --icon:#c1cce0; --accent:#0a84ff; --accent-deep:#3298ff; --accent-soft:rgba(10,132,255,.16); --telegram:#45b8e7;
  --shadow:0 8px 28px rgba(0,0,0,.2); --shadow-small:0 4px 14px rgba(0,0,0,.17);
}
html[data-theme="dark"],html[data-theme="dark"] body { background:#10151f; color:var(--ink); }
html[data-theme="dark"] .app-shell { background:transparent; }
html[data-theme="dark"] :is(.glass,.profile-card,.service-card,.news-item,.purchase-card,.support-new-card,.support-shortcuts button,.ticket-row,.conversation-card,.faq,.referral-card,.proxy-entry,.proxy-hero,.balance-card,.form-modal,.install-modal,.qr-modal,.shortfall-modal) { background:rgba(28,35,49,.88); border-color:var(--line); box-shadow:var(--shadow); }
html[data-theme="dark"] :is(.key-search,.keys-buy-row.buy-key,.simple-header>button,.keys-header>button:first-child,.proxy-page .proxy-icon-button,.proxy-page .proxy-icon-tile) { background:rgba(28,35,49,.88)!important; border-color:var(--line)!important; color:var(--ink)!important; }
html[data-theme="dark"] :is(.device-choice.selected,.tariff-choice.selected,.payment-method.selected) { background:rgba(10,132,255,.13)!important; }
html[data-theme="dark"] .support-message.admin { background:rgba(28,70,110,.84); color:var(--ink); }
html[data-theme="dark"] .support-message.client { background:rgba(38,47,63,.9); color:var(--ink); }
html[data-theme="dark"] .subscription-card.access-card,html[data-theme="dark"] .subscription-access,html[data-theme="dark"] .subscription-devices-panel,html[data-theme="dark"] .subscription-setting,html[data-theme="dark"] .subscription-device { background:rgba(28,35,49,.88); border-color:var(--line); }
html[data-theme="dark"] .subscription-summary.access-summary,html[data-theme="dark"] .subscription-summary .subscription-title strong,html[data-theme="dark"] .subscription-access h3,html[data-theme="dark"] .subscription-devices-panel h3,html[data-theme="dark"] .subscription-setting,html[data-theme="dark"] .subscription-device-copy strong { color:var(--ink); }
html[data-theme="dark"] .subscription-title small,html[data-theme="dark"] .subscription-access h3,html[data-theme="dark"] .subscription-devices-panel>p,html[data-theme="dark"] .subscription-device-copy small { color:var(--muted)!important; }
html[data-theme="dark"] .subscription-qr,html[data-theme="dark"] .subscription-key-field { background:rgba(19,27,40,.9); border-color:var(--line); }
html[data-theme="dark"] .subscription-qr,html[data-theme="dark"] .subscription-key-field code { color:var(--ink); }
html[data-theme="dark"] .subscription-key-field button { background:#263146; border-color:var(--line); color:var(--ink); }
html[data-theme="dark"] .subscription-status.is-active,html[data-theme="dark"] .subscription-summary em { background:#193d2c!important; color:#74dfa0!important; }
html[data-theme="dark"] .subscription-status.is-inactive { background:#303748; color:#bdc6d7; }
html[data-theme="dark"] .subscription-device-icon { background:#263146; color:#c9d6f3; }
html[data-theme="dark"] .screen .subscription-summary.access-summary .access-key-icon { background:linear-gradient(145deg,#283a56,#1d2c45)!important; border-color:rgba(158,185,228,.18)!important; color:#dceaff!important; }
html[data-theme="dark"] .subscription-delete { background:#452a30; color:#ff817b; }
html[data-theme="dark"] .ticket-status.waiting { color:#ffbd78; background:rgba(255,149,0,.13); }
html[data-theme="dark"] .referral-view .app-shell,html[data-theme="dark"] .referral-view .screen { background:transparent; }
html[data-theme="dark"] .referral-page { --ref-accent:#0a84ff; --ref-accent-hover:#3298ff; --ref-text:#f4f7fd; --ref-muted:#a9b5ca; --ref-surface:rgba(28,35,49,.88); --ref-border:rgba(168,188,222,.14); --ref-shadow:0 8px 28px rgba(0,0,0,.2); }
html[data-theme="dark"] .referral-page .ref-link-body code,html[data-theme="dark"] .referral-page .ref-link-icon,html[data-theme="dark"] .referral-page .ref-step-icon,html[data-theme="dark"] .referral-page .ref-history-icon { background:#263146; }