/* F R E E M A N unified visual system. Structure and behavior stay in app.js. */
:root {
  --bg: #f7f8fa;
  --paper: #ffffff;
  --paper-solid: #ffffff;
  --ink: #20252d;
  --muted: #747a83;
  --line: #eceef1;
  --accent: #f05a0a;
  --accent-deep: #f05a0a;
  --accent-soft: #fff1ea;
  --telegram: #159ed9;
  --danger: #e5483f;
  --shadow: 0 4px 18px rgba(24,31,39,.045);
  --shadow-small: 0 3px 14px rgba(24,31,39,.035);
  --radius: 21px;
  --spring:cubic-bezier(.32,.72,0,1);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --t-screen:420ms;
  --t-tap:180ms;
  --t-cascade:460ms;
  --t-pill:460ms;
  --t-meter:900ms;
  --t-header:260ms;
  --t-expand:380ms;
  --t-content:240ms;
  --t-toast:280ms;
  --t-tab-color:300ms;
  --t-reduced:1ms;
  --stagger-1:20ms;
  --stagger-2:55ms;
  --stagger-3:90ms;
  --stagger-4:120ms;
  --stagger-5:145ms;
  --stagger-6:165ms;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, "Helvetica Neue", Arial, sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
body { background: var(--bg); }
button, input, textarea, select { font: inherit; }
button { letter-spacing: -.01em; }
.ambient { display: none; }
.glass { background: var(--paper); border: 0; box-shadow: var(--shadow); backdrop-filter: none; }

/* Shared surfaces */
.profile-card,.news-item,.access-card,.purchase-card,.ticket-list,.conversation-card,
.support-admin-tools,.money-hero,.telegram-hero,.data-card,.accordion-list details,
.faq-banner,.admin-card,.key-card,.placeholder,.qr-modal,.form-modal {
  background: var(--paper);
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background-image: none;
}
.profile-card:hover,.news-item:hover,.access-card:hover,.purchase-card:hover,
.data-card:hover,.accordion-list details:hover { transform: none; box-shadow: var(--shadow); }
.btn,.mini,.buy-key,.checkout-button,.compact-primary,.money-hero button,.telegram-hero button,
.ticket-list-title button,.conversation-card>header button,.new-ticket button,.support-composer button {
  border: 0;
  border-radius: 12px;
  background: var(--accent);
  background-image: none;
  color: #fff;
  box-shadow: none;
  font-weight: 550;
}
.btn:hover,.mini:hover,.buy-key:hover,.checkout-button:hover,.compact-primary:hover,
.money-hero button:hover,.telegram-hero button:hover { transform: none; box-shadow: none; filter: brightness(.97); }
.btn-soft,.money-hero button.soft,.telegram-hero .proxy-purchase .soft {
  background: var(--accent-soft);
  color: var(--accent);
}
.empty { border: 0; background: rgba(116,122,131,.055); }

/* Authentication uses the same restrained card language. */
.login-shell { background: var(--bg); }
.login-card {
  border: 0; border-radius: 24px; background: var(--paper); box-shadow: var(--shadow); backdrop-filter: none; animation: none;
}
.logo-frame { background: var(--paper); border-radius: 21px; box-shadow: var(--shadow-small); transform: none; }
.login-card h1 { color: var(--ink); font-weight: 650; }
.login-card p,.privacy-note { color: var(--muted); }
.wordmark { color: var(--ink); font-weight: 620; }
.auth-error { background: #fff0ef; color: var(--danger); }

/* Desktop shell uses the same mobile visual language. */
.app-shell { background: var(--bg); }
.sidebar { border-radius: 24px; box-shadow: var(--shadow); }
.brand img { border-radius: 50%; }
.brand strong { color: var(--ink); font-weight: 650; letter-spacing: .16em; }
.nav button,.logout { color: var(--muted); font-weight: 450; }
.nav button:hover,.nav button.active { background: var(--accent-soft); color: var(--accent); transform: none; }
.nav button[data-view="plans"].active,.nav button[data-view="support"].active { background: var(--accent-soft); color: var(--accent); }
.profile-content { color: var(--ink); }

/* Brand and profile */
.mobile-brand { padding-top: 26px; padding-bottom: 18px; }
.mobile-brand img { width: 34px; height: 34px; border-radius: 50%; box-shadow: none; }
.mobile-brand b { color: #555b64; font-size: 1rem; font-weight: 600; letter-spacing: -.02em; }
.mobile-brand b span { color: var(--accent); }
.mobile-brand button,.head-theme {
  width: 40px; height: 40px; padding: 6px; border: 0; background: transparent; color: var(--ink); box-shadow: none;
}
.mobile-brand button svg,.head-theme svg { width: 28px; height: 28px; stroke-width: 1.9; }
.profile-head { padding: 27px 8px 31px; gap: 27px; animation: none; }
.profile-avatar {
  width: 104px; height: 104px; border-radius: 50%; background: #eae7f8; background-image: none;
  box-shadow: 0 4px 14px rgba(24,31,39,.06); font-size: 2.25rem;
}
.profile-head h1 { margin: 0 0 9px; color: var(--ink); font-size: 2.05rem; font-weight: 670; letter-spacing: -.045em; }
.profile-head p { color: var(--muted); font-size: 1rem; line-height: 1.35; }
.profile-head p span { color: var(--accent); font-weight: 650; }
.contact-card { padding: 8px 21px; }
.contact-row { min-height: 60px; grid-template-columns: 30px minmax(0,1fr) 14px; gap: 15px; border-color: var(--line); }
.contact-row span { color: var(--ink); }
.contact-row span.telegram { color: var(--telegram); }
.contact-row b { color: var(--ink); font-size: 1rem; font-weight: 450; }
.contact-row i,.keys-summary>i,.list-row b,.service-card>i,.proxy-link i,.faq-banner i { color: var(--muted); font-weight: 300; }
.keys-summary { margin-top: 24px; padding: 20px 24px; grid-template-columns: 74px minmax(0,1fr) 16px; gap: 20px; transition: none; }
.keys-summary:hover { transform: none; box-shadow: var(--shadow); }
.key-art { width: 72px; height: 72px; border-radius: 20px; background: var(--accent-soft); color: var(--accent); }
.key-art svg { width: 37px; height: 37px; stroke-width: 1.9; }
.keys-summary strong { color: var(--ink); font-size: 2.35rem; font-weight: 680; }
.keys-summary small { color: var(--muted); font-size: .98rem; }

/* Profile service cards share the same white surface. */
.service-grid { gap: 13px; margin-top: 16px; }
.service-card,.proxy-service {
  min-height: 100px; padding: 16px; border: 0; background: var(--paper); background-image: none; box-shadow: var(--shadow);
}
.service-card:hover { transform: none; }
.service-card>span { background: var(--accent-soft); color: var(--accent); }
.service-card.proxy-service>span { background: #eaf7fc; color: var(--telegram); }
.service-card strong { color: var(--muted); font-weight: 450; }
.service-card b { color: var(--ink); font-weight: 580; }
.service-card small { color: var(--muted); }

/* Section rhythm and lists */
.block-title { margin: 37px 4px 14px; color: var(--ink); font-size: 1.25rem; font-weight: 650; }
.link-list { padding: 7px 21px; }
.list-row { min-height: 60px; color: var(--ink); border-color: var(--line); font-size: 1rem; font-weight: 430; }
.list-row:hover { color: var(--ink); }
.list-row .row-icon { color: var(--muted); }
.news-list { gap: 14px; }
.news-item { min-height: 106px; padding: 18px 20px; grid-template-columns: 64px minmax(0,1fr) 8px; gap: 17px; animation: none; }
.news-icon { width: 62px; height: 62px; border-radius: 19px; background: #f1f2f4; color: var(--ink); }
.news-icon svg { width: 30px; height: 30px; stroke-width: 1.8; }
.news-item strong { color: var(--ink); font-size: 1rem; font-weight: 480; line-height: 1.35; }
.news-item time { color: var(--muted); font-size: .82rem; }
.news-item>i { background: var(--accent); }
.theme-row { min-height: 66px; border: 0; box-shadow: var(--shadow); }
.theme-row strong { font-weight: 570; }

/* Shared page headers */
.simple-header,.keys-header,.section-heading { padding-top: 30px; padding-bottom: 20px; }
.simple-header>button,.keys-header>button:first-child {
  width: 42px; height: 42px; border: 0; border-radius: 13px; background: var(--paper); color: var(--muted); box-shadow: var(--shadow-small);
}
.simple-header span,.section-heading span { color: var(--muted); text-transform: none; letter-spacing: 0; font-size: .75rem; }
.simple-header h1,.keys-header h1,.section-heading h1 { color: var(--ink); font-weight: 650; letter-spacing: -.035em; }
.simple-header h1 { font-size: 1.55rem; }
.buy-key { padding: 10px 14px; background: var(--accent); }

/* Keys */
.key-search { height: 56px; padding: 0 18px; border: 0; border-radius: 18px; background: var(--paper); box-shadow: var(--shadow-small); color: var(--muted); }
.key-search input { color: var(--ink); }
.access-list { gap: 13px; margin-top: 18px; }
.access-card { overflow: hidden; }
.access-summary { min-height: 94px; padding: 16px 20px; }
.access-key-icon { background: var(--accent-soft); color: var(--accent); }
.access-summary strong { color: var(--ink); font-weight: 620; }
.access-summary small { color: var(--muted); }
.access-summary em { color: var(--accent); background: var(--accent-soft); font-weight: 500; }
.access-details { border: 0; border-radius: 0; margin: 0 20px 20px; padding: 18px 0 0; border-top: 1px solid var(--line); }
.access-details>code { border: 0; background: var(--bg); }
.key-actions button { min-height: 48px; border: 0; background: var(--bg); color: var(--ink); font-weight: 450; }
.key-actions button.primary { background: var(--accent); color: #fff; }
.key-actions button svg { color: var(--muted); stroke-width: 1.8; }
.key-actions button.primary svg { color: #fff; }
.key-rule { color: var(--muted); }
.device-section { border-color: var(--line); }
.device-row { border: 0; background: var(--paper); box-shadow: var(--shadow-small); }
.device-row>button { background: #fff0ef; color: var(--danger); box-shadow: none; }
.instruction-row { border-color: var(--line); }

/* Tariffs and checkout */
.purchase-card { padding: 20px; margin-bottom: 16px; }
.purchase-title>span { background: #f1f2f4; color: var(--ink); }
.purchase-title strong,.period-card h2,.payment-card h2 { color: var(--ink); font-weight: 620; }
.purchase-title small { color: var(--muted); }
.device-choice,.tariff-choice,.payment-method {
  border: 0; border-radius: 15px; background: var(--bg); color: var(--ink); box-shadow: none;
}
.device-choice.selected,.tariff-choice.selected,.payment-method.selected {
  background: var(--accent-soft); box-shadow: inset 0 0 0 1px rgba(240,90,10,.12);
}
.radio-dot { border-color: #c7cbd0; }
.selected>.radio-dot { border-color: var(--accent); background: var(--accent); }
.device-choice b { background: var(--accent); }
.tariff-name { font-weight: 430; }
.tariff-name b { background: var(--accent-soft); color: var(--accent); }
.tariff-price strong,.payment-method strong { color: var(--ink); font-weight: 520; }
.tariff-price small,.payment-method small { color: var(--muted); }
.payment-method svg { color: var(--accent); }
.balance-use input:checked { background: var(--accent); }
.payment-calc { background: var(--bg); box-shadow: none; }
.checkout-button { min-height: 48px; background: var(--accent); }
.owner-free { background: var(--accent-soft); color: var(--accent); }
.payment-note { color: var(--muted); }

/* Balance, referral, proxy, FAQ and information pages */
.money-hero,.telegram-hero,.data-card { padding: 21px; margin-bottom: 15px; }
.money-hero>strong { color: var(--ink); font-weight: 680; }
.telegram-hero { background: var(--paper); }
.telegram-hero>span { background: var(--telegram); }
.telegram-hero h2,.data-card h2 { color: var(--ink); font-weight: 620; }
.telegram-hero p,.rule-list,.ledger-row small { color: var(--muted); }
.proxy-link,.faq-banner { border: 0; background: var(--paper); box-shadow: var(--shadow-small); }
.proxy-link>span,.faq-banner>span { color: var(--telegram); }
.referral-dashboard article { border: 0; background: var(--paper); box-shadow: var(--shadow-small); }
.referral-dashboard span { color: var(--muted); }
.referral-dashboard strong { color: var(--ink); font-weight: 650; }
.ref-link { border: 0; background: var(--bg); }
.positive { color: var(--accent); }
.negative { color: var(--danger); }
.accordion-list { gap: 11px; }
.accordion-list details { padding: 0 17px; }
.accordion-list summary { color: var(--ink); font-weight: 560; }
.accordion-list p { color: var(--muted); }

/* Support */
.faq-banner { margin-bottom: 15px; }
.support-layout { gap: 15px; }
.ticket-list,.conversation-card,.support-admin-tools { overflow: hidden; }
.ticket-list-title,.conversation-card>header { border-color: var(--line); }
.ticket-list-title button,.conversation-card>header button,.new-ticket button { background: var(--accent-soft); color: var(--accent); }
.ticket-row { border-color: var(--line); color: var(--ink); }
.ticket-row.active { background: var(--accent-soft); }
.message-list { background: var(--bg); background-image: none; }
.support-message { box-shadow: none; }
.support-message.client { background: #eef0f3; color: var(--ink); }
.support-message.admin { background: var(--accent-soft); color: var(--ink); }
.quick-strip button { border: 0; background: var(--bg); color: var(--ink); }
.support-composer textarea,.composer-attach,.support-admin-tools input,.support-admin-tools textarea {
  border: 0; background: var(--bg); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line);
}
.support-composer textarea:focus { box-shadow: inset 0 0 0 1px var(--accent); }
.support-composer button { background: var(--accent); }
.new-ticket>span { background: var(--accent-soft); color: var(--accent); }
.attach-button { border-color: var(--line); background: var(--bg); }
.quick-manage { border-color: var(--line); }
.quick-manage>div { border: 0; background: var(--bg); }
.quick-manage button { background: #fff0ef; color: var(--danger); }

/* Admin and modal controls follow the same system. */
.admin-grid { gap: 16px; }
.admin-card input,.admin-card textarea,.admin-card select,.form-modal input,.form-modal select {
  border: 0; border-radius: 12px; background: var(--bg); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line);
}
.admin-card input:focus,.admin-card textarea:focus,.admin-card select:focus,.form-modal input:focus,.form-modal select:focus {
  outline: 0; box-shadow: inset 0 0 0 1px var(--accent);
}
.mini { background: var(--accent-soft); color: var(--accent); }
.mini.danger { background: #fff0ef; color: var(--danger); }
.modal-backdrop { background: rgba(32,37,45,.28); backdrop-filter: blur(5px); }
.qr-modal,.form-modal { box-shadow: 0 18px 60px rgba(24,31,39,.16); }

/* Bottom navigation */
.mobile-nav {
  background: rgba(255,255,255,.98); border: 0; border-top: 1px solid var(--line); box-shadow: none; backdrop-filter: none;
}
.mobile-nav button { color: var(--muted); font-weight: 430; }
.mobile-nav button.active,.mobile-nav button[data-view="plans"].active,.mobile-nav button[data-view="support"].active {
  background: transparent; color: var(--accent); font-weight: 560;
}
.mobile-nav button svg { stroke-width: 1.8; }

/* Dark mode keeps exactly the same hierarchy and dimensions. */
html[data-theme="dark"] {
  --bg: #111316;
  --paper: #1c1f23;
  --paper-solid: #1c1f23;
  --ink: #f2f3f5;
  --muted: #9a9fa7;
  --line: #2b2f35;
  --accent: #ff6a1a;
  --accent-deep: #ff6a1a;
  --accent-soft: #3a241a;
  --shadow: 0 4px 18px rgba(0,0,0,.16);
  --shadow-small: 0 3px 14px rgba(0,0,0,.13);
  color-scheme: dark;
}
html[data-theme="dark"] body,html[data-theme="dark"] .app-shell { background: var(--bg); color: var(--ink); }
html[data-theme="dark"] .glass,html[data-theme="dark"] .profile-card,html[data-theme="dark"] .news-item,
html[data-theme="dark"] .access-card,html[data-theme="dark"] .purchase-card,html[data-theme="dark"] .ticket-list,
html[data-theme="dark"] .conversation-card,html[data-theme="dark"] .support-admin-tools,html[data-theme="dark"] .data-card,
html[data-theme="dark"] .money-hero,html[data-theme="dark"] .telegram-hero,html[data-theme="dark"] .accordion-list details,
html[data-theme="dark"] .admin-card,html[data-theme="dark"] .qr-modal,html[data-theme="dark"] .form-modal { background: var(--paper); border: 0; }
html[data-theme="dark"] .login-shell { background: var(--bg); }
html[data-theme="dark"] .login-card,html[data-theme="dark"] .logo-frame { background: var(--paper); border: 0; }
html[data-theme="dark"] .device-choice,html[data-theme="dark"] .tariff-choice,html[data-theme="dark"] .payment-method,
html[data-theme="dark"] .key-actions button,html[data-theme="dark"] .payment-calc,html[data-theme="dark"] .message-list,
html[data-theme="dark"] .quick-strip button,html[data-theme="dark"] .key-search,html[data-theme="dark"] .access-details>code,
html[data-theme="dark"] .support-composer textarea,html[data-theme="dark"] .composer-attach { background: var(--bg); color: var(--ink); }
html[data-theme="dark"] .device-choice.selected,html[data-theme="dark"] .tariff-choice.selected,html[data-theme="dark"] .payment-method.selected,
html[data-theme="dark"] .ticket-row.active,html[data-theme="dark"] .support-message.admin { background: var(--accent-soft); }
html[data-theme="dark"] .support-message.client { background: #282c32; }
html[data-theme="dark"] .mobile-nav { background: rgba(28,31,35,.98); }
html[data-theme="dark"] .profile-avatar { background: #29263b; }

@media (max-width: 650px) {
  .profile-content { padding-left: 16px; padding-right: 16px; }
  .mobile-brand { padding: 25px 5px 12px; }
  .profile-head { padding: 24px 7px 26px; gap: 19px; }
  .profile-avatar { width: 82px; height: 82px; font-size: 1.85rem; }
  .profile-head h1 { font-size: 1.72rem; margin-bottom: 7px; }
  .profile-head p { font-size: .87rem; }
  .contact-card { padding: 6px 18px; }
  .contact-row { min-height: 48px; grid-template-columns: 26px minmax(0,1fr) 12px; gap: 12px; }
  .contact-row b { font-size: .91rem; }
  .keys-summary { margin-top: 17px; padding: 14px 17px; grid-template-columns: 58px minmax(0,1fr) 13px; gap: 15px; }
  .key-art { width: 56px; height: 56px; border-radius: 17px; }
  .key-art svg { width: 30px; height: 30px; }
  .keys-summary strong { font-size: 2rem; }
  .keys-summary small { font-size: .86rem; }
  .service-grid { gap: 10px; margin-top: 12px; }
  .service-card { min-height: 88px; padding: 12px; }
  .block-title { margin-top: 27px; margin-bottom: 11px; font-size: 1.13rem; }
  .link-list { padding: 5px 18px; }
  .list-row { min-height: 49px; font-size: .91rem; }
  .news-item { min-height: 84px; padding: 12px 16px; grid-template-columns: 48px minmax(0,1fr) 7px; gap: 14px; }
  .news-icon { width: 47px; height: 47px; border-radius: 14px; }
  .news-icon svg { width: 25px; height: 25px; }
  .news-item strong { font-size: .91rem; }
  .simple-header,.keys-header { padding-top: 27px; padding-bottom: 18px; }
  .purchase-card { padding: 16px; border-radius: 20px; }
  .referral-dashboard article { min-height: 88px; }
  .mobile-nav { min-height: 84px; padding: 12px 10px 16px; }
  .mobile-nav button { gap: 5px; }
  .mobile-nav button svg { width: 24px; height: 24px; }
  .mobile-nav button span { font-size: .67rem; }
}

/* 2026 client cabinet refinements: preserve the established palette and add
   motion only where it communicates a state change. */
.profile-content>* { animation: page-enter var(--t-expand) var(--spring) both; }
@keyframes page-enter { from { opacity:0; transform:translateY(7px) } to { opacity:1; transform:none } }
button,.profile-card,.access-card,.proxy-link,.ticket-row,.tariff-choice,.device-choice,.payment-method {
  transition: transform var(--t-tap) var(--ease-out), box-shadow var(--t-toast) var(--ease-out), background-color var(--t-toast) var(--ease-out), color var(--t-toast) var(--ease-out), opacity var(--t-toast) var(--ease-out);
}
button:active,.profile-card:active,.proxy-link:active { transform:scale(.985); }

/* Brand artwork has transparent padding so it remains complete in both themes. */
.brand-logo { width:38px; height:38px; display:grid; place-items:center; overflow:visible; }
.mobile-brand img,.brand img,.logo-frame img { object-fit:contain; background:transparent!important; }
.mobile-brand img { width:100%; height:100%; border-radius:0; transform:scale(1.16); }
.brand img { border-radius:0; object-fit:contain; }
.logo-frame { display:grid; place-items:center; overflow:visible; background:transparent; box-shadow:none; }
.logo-frame img { width:88%; height:88%; }
html[data-theme="dark"] .mobile-brand img,html[data-theme="dark"] .brand img,html[data-theme="dark"] .logo-frame img { background:transparent!important; }
html[data-theme="dark"] .mobile-brand img,html[data-theme="dark"] .brand img,html[data-theme="dark"] .logo-frame img { content:url('/assets/freeman-logo-dark.png'); }

/* Profile contacts are genuine actions without extra icon tiles. */
.contact-card a,.contact-card button { text-decoration:none; color:inherit; }
.contact-action { width:100%; border:0; background:transparent; text-align:left; cursor:pointer; }
.contact-action b { color:var(--accent); }
.contact-row i { justify-self:end; font-style:normal; font-size:1.45rem; }

/* Keys: purchase action belongs to the list and the newest item is marked. */
.keys-header { grid-template-columns:52px minmax(0,1fr) 52px; }
.keys-header h1 { grid-column:2; }
.keys-buy-row {
  width:100%; min-height:68px; margin:14px 0 4px; padding:0 18px; display:grid;
  grid-template-columns:38px minmax(0,1fr) 12px; align-items:center; gap:12px;
  text-align:left; background:var(--paper); color:var(--ink); box-shadow:var(--shadow-small);
}
.keys-buy-row>span { width:36px; height:36px; border-radius:11px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); }
.keys-buy-row svg { width:20px; height:20px; }
.keys-buy-row b { font-weight:570; }
.keys-buy-row i { font-style:normal; color:var(--muted); font-size:1.4rem; }
.recent-key { display:inline-flex; margin-left:8px; padding:4px 7px; border-radius:999px; background:var(--accent-soft); color:var(--accent); font-size:.62rem; font-style:normal; font-weight:570; vertical-align:middle; }
.access-card { animation:list-in var(--t-expand) var(--ease-out) both; }
@keyframes list-in { from { opacity:0; transform:translateY(6px) } to { opacity:1; transform:none } }

/* Inner tariff controls gain depth without heavy outlines. */
.device-choice,.tariff-choice,.payment-method { border:0!important; box-shadow:0 3px 14px rgba(24,31,39,.055),inset 0 0 0 1px rgba(24,31,39,.035); }
.device-choice.selected,.tariff-choice.selected,.payment-method.selected { box-shadow:0 7px 20px rgba(24,31,39,.075),inset 0 0 0 1.5px var(--accent)!important; }
.payment-method { grid-template-columns:28px minmax(0,1fr) 18px; }
.payment-method>i.radio-dot { justify-self:end; }
.payment-calc { margin-top:13px; }

/* Balance and referral visualisations. */
.section-line { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.section-line>span { color:var(--muted); font-size:.74rem; }
.mini-chart { height:128px; margin-top:18px; display:grid; grid-template-columns:repeat(7,1fr); gap:9px; align-items:end; }
.mini-chart>span { height:100%; display:grid; grid-template-rows:1fr 18px; gap:7px; align-items:end; text-align:center; }
.mini-chart i { width:100%; min-height:5px; border-radius:8px 8px 4px 4px; background:linear-gradient(180deg,#f7a06f,var(--accent)); transform-origin:bottom; animation:bar-grow var(--t-meter) var(--spring) both; }
.mini-chart small { color:var(--muted); font-size:.65rem; }
@keyframes bar-grow { from { transform:scaleY(.08); opacity:.3 } to { transform:none; opacity:1 } }
.segment-control { display:flex; padding:3px; border-radius:11px; background:var(--bg); }
.segment-control button { min-height:30px; padding:0 9px; border:0; border-radius:9px; background:transparent; color:var(--muted); font-size:.7rem; }
.segment-control button.active { background:var(--paper); color:var(--ink); box-shadow:var(--shadow-small); }
.referral-intro { display:flex; gap:15px; align-items:center; margin-bottom:14px; padding:20px; border-radius:var(--radius); background:var(--paper); box-shadow:var(--shadow); }
.referral-intro>span { width:48px; height:48px; flex:0 0 auto; display:grid; place-items:center; border-radius:15px; background:var(--accent-soft); color:var(--accent); }
.referral-intro h2,.referral-intro p { margin:0; }
.referral-intro h2 { font-size:1.05rem; }
.referral-intro p { margin-top:5px; color:var(--muted); font-size:.79rem; line-height:1.4; }
.funnel-bars { display:grid; gap:14px; margin-top:18px; }
.funnel-bars>div { display:grid; grid-template-columns:72px minmax(0,1fr) 28px; align-items:center; gap:10px; font-size:.78rem; }
.funnel-bars i { height:9px; overflow:hidden; border-radius:999px; background:var(--bg); }
.funnel-bars b { display:block; height:100%; min-width:6px; border-radius:inherit; background:var(--accent); animation:funnel-grow var(--t-meter) var(--ease-out) both; }
@keyframes funnel-grow { from { transform:scaleX(0) } to { transform:scaleX(1) } }
.funnel-bars em { color:var(--muted); font-style:normal; text-align:right; }
.invitee-list { display:grid; }
.invitee-row { min-height:68px; display:grid; grid-template-columns:40px minmax(0,1fr) auto; align-items:center; gap:11px; border-bottom:1px solid var(--line); }
.invitee-row:last-child { border:0; }
.invitee-avatar { width:38px; height:38px; display:grid; place-items:center; border-radius:50%; background:var(--accent-soft); color:var(--accent); font-weight:650; }
.invitee-row strong,.invitee-row small { display:block; }
.invitee-row strong { font-size:.84rem; }
.invitee-row small { margin-top:4px; color:var(--muted); font-size:.69rem; }
.invitee-row em,.proxy-entry em { padding:5px 8px; border-radius:999px; font-size:.66rem; font-style:normal; white-space:nowrap; }
.invitee-row em.bought,.proxy-entry em.included { color:#23834c; background:#eaf7ef; }
.invitee-row em.waiting,.proxy-entry em.paid { color:#bb762e; background:#fff4e7; }

/* Personal proxy connections. */
.proxy-list { display:grid; gap:10px; }
.proxy-list h2 { margin-bottom:5px; }
.proxy-entry { min-height:82px; padding:13px 14px; grid-template-columns:42px minmax(0,1fr) 12px; animation:list-in var(--t-expand) var(--ease-out) both; }
.proxy-entry>span { width:40px; height:40px; border-radius:13px; display:grid; place-items:center; background:#eaf7fc; }
.proxy-entry div { min-width:0; }
.proxy-entry strong,.proxy-entry small { display:block; }
.proxy-entry small { margin:4px 0 7px; }
.proxy-entry[aria-disabled="true"] { pointer-events:none; opacity:.6; }

/* The bottom bar floats above the page like an iPhone tab bar. */
@media (max-width:1100px) {
  .profile-content { padding-bottom:124px; }
  .mobile-nav {
    bottom:max(10px,env(safe-area-inset-bottom)); left:50%; right:auto; width:min(620px,calc(100% - 20px));
    min-height:76px; padding:9px 8px; border:1px solid rgba(255,255,255,.68); border-radius:25px;
    background:rgba(255,255,255,.78); box-shadow:0 12px 34px rgba(24,31,39,.13),inset 0 1px rgba(255,255,255,.9);
    backdrop-filter:blur(22px) saturate(1.25); -webkit-backdrop-filter:blur(22px) saturate(1.25);
  }
  .mobile-nav button { position:relative; z-index:1; min-width:62px; border-radius:17px; }
  .mobile-nav button.active { background:var(--accent-soft); }
  html[data-theme="dark"] .mobile-nav { background:rgba(28,31,35,.78); border-color:rgba(255,255,255,.07); }
}

html[data-theme="dark"] .segment-control,html[data-theme="dark"] .mini-chart i,html[data-theme="dark"] .funnel-bars i { background:#25292e; }
html[data-theme="dark"] .invitee-row em.bought,html[data-theme="dark"] .proxy-entry em.included { color:#6fd096; background:#173526; }
html[data-theme="dark"] .invitee-row em.waiting,html[data-theme="dark"] .proxy-entry em.paid { color:#e6a152; background:#3b2a19; }
html[data-theme="dark"] .device-choice,html[data-theme="dark"] .tariff-choice,html[data-theme="dark"] .payment-method { box-shadow:0 3px 14px rgba(0,0,0,.16),inset 0 0 0 1px rgba(255,255,255,.035); }

@media (max-width:650px) {
  .keys-header { grid-template-columns:42px minmax(0,1fr) 42px; }
  .keys-buy-row { min-height:61px; margin-top:12px; border-radius:17px; }
  .recent-key { display:block; width:max-content; margin:5px 0 0; }
  .section-line { display:block; }
  .segment-control { margin-top:12px; width:100%; }
  .segment-control button { flex:1; }
  .invitee-row { grid-template-columns:36px minmax(0,1fr); padding:10px 0; }
  .invitee-row>em { grid-column:2; width:max-content; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration: var(--t-reduced) !important; transition-duration: var(--t-reduced) !important; }
}

/* My keys — reference-accurate colour and surface treatment. */
.keys-header {
  grid-template-columns: 52px minmax(0,1fr) auto;
  gap: 14px;
}
.keys-header h1 { text-align: center; font-size: 1.8rem; }
.keys-header>button:first-child {
  width: 50px; height: 50px; border-radius: 16px;
}
.buy-key {
  min-height: 48px; padding: 0 18px; border-radius: 14px;
  background: #10a957; color: #fff; font-weight: 520;
  box-shadow: 0 4px 14px rgba(16,169,87,.14);
}
.buy-key:hover { background: #0f9f52; }
.key-search {
  height: 60px; border: 1px solid #e5e7ea; background: #fafbfc;
  box-shadow: none;
}
.key-search svg { color: #8d949e; }
.access-list { gap: 14px; margin-top: 20px; }
.access-card {
  border: 1px solid #eceef1; border-radius: 21px;
  box-shadow: 0 4px 18px rgba(25,31,39,.055);
}
.access-summary { min-height: 104px; padding: 20px 24px; }
.access-key-icon {
  width: 64px; height: 64px; border-radius: 16px;
  background: #fff1e8; color: #f05a0a;
}
.access-key-icon svg { width: 36px; height: 36px; stroke-width: 1.9; }
.access-summary strong { font-size: 1.22rem; font-weight: 620; }
.access-summary small { margin-top: 5px; font-size: .9rem; }
.access-summary em {
  padding: 7px 13px; border-radius: 11px;
  background: #eaf7ef; color: #168b4b; font-size: .82rem; font-weight: 500;
}
.access-summary>i { color: #717984; }
.access-details {
  margin: 0 24px 22px; padding: 20px 0 0;
  border-top: 1px solid #e7e9ec;
}
.access-details>label,.device-section>label { color: #5f6670; }
.access-details>code {
  min-height: 54px; display: flex; align-items: center;
  border: 1px solid #e1e4e8; border-radius: 13px;
  background: #f7f8fa; color: var(--ink);
  font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
}
.key-actions { gap: 10px; margin-top: 14px; }
.key-actions button {
  min-height: 52px; border: 1px solid #e1e4e8; border-radius: 14px;
  background: #fff; color: var(--ink); box-shadow: none;
}
.key-actions button:hover { background: #f8f9fa; }
.key-actions button.primary {
  border-color: #10a957; background: #10a957; color: #fff;
}
.key-actions button.primary:hover { background: #0f9f52; }
.device-section { margin-top: 18px; padding-top: 18px; border-color: #e7e9ec; }
.device-row {
  min-height: 76px; margin: 10px 0; padding: 11px 14px;
  border: 1px solid #eceef1; border-radius: 15px;
  box-shadow: 0 3px 14px rgba(25,31,39,.045);
}
.device-row>span { color: #58616d; }
.device-row>button {
  width: 42px; height: 42px; border-radius: 13px;
  background: #fff1ea; color: #d93832;
}
.device-row>button:hover { background: #ffe8df; }
.instruction-row {
  width: 100%; min-height: 60px; margin: 14px 0 0; padding: 0 16px;
  border: 1px solid #e1e4e8; border-radius: 14px;
  background: #fff; color: var(--ink);
}
.instruction-row:hover { background: #f8f9fa; }

html[data-theme="dark"] .key-search,
html[data-theme="dark"] .access-details>code { border-color: #343940; background: #16181b; }
html[data-theme="dark"] .access-card { border: 1px solid #2b2f35; }
html[data-theme="dark"] .access-key-icon { background: #3a241a; color: #ff6a1a; }
html[data-theme="dark"] .access-summary em { background: #173626; color: #61d394; }
html[data-theme="dark"] .key-actions button,
html[data-theme="dark"] .instruction-row { border-color: #343940; background: #202328; color: var(--ink); }
html[data-theme="dark"] .key-actions button:hover,
html[data-theme="dark"] .instruction-row:hover { background: #25292e; }
html[data-theme="dark"] .key-actions button.primary { border-color: #16ad5c; background: #16ad5c; color: #fff; }
html[data-theme="dark"] .device-row { border: 1px solid #30343a; background: #202328; }
html[data-theme="dark"] .device-row>button { background: #3b211e; color: #ff6961; }

@media (max-width: 650px) {
  .keys-header { grid-template-columns: 42px minmax(0,1fr) auto; gap: 9px; }
  .keys-header h1 { font-size: 1.42rem; }
  .keys-header>button:first-child { width: 41px; height: 41px; border-radius: 13px; }
  .buy-key { min-height: 41px; padding: 0 12px; border-radius: 12px; font-size: .78rem; }
  .key-search { height: 52px; border-radius: 16px; }
  .access-list { gap: 12px; margin-top: 16px; }
  .access-summary { min-height: 86px; padding: 13px 15px; }
  .access-key-icon { width: 52px; height: 52px; border-radius: 14px; }
  .access-key-icon svg { width: 29px; height: 29px; }
  .access-summary strong { font-size: 1rem; }
  .access-summary small { font-size: .75rem; }
  .access-summary em { padding: 5px 8px; font-size: .68rem; }
  .access-details { margin: 0 13px 13px; padding-top: 15px; }
  .access-details>code { min-height: 48px; font-size: .78rem; }
  .key-actions button { min-height: 47px; border-radius: 12px; }
  .device-row { min-height: 68px; padding: 9px 11px; }
  .device-row>button { width: 38px; height: 38px; border-radius: 12px; }
  .instruction-row { min-height: 54px; margin-top: 12px; padding: 0 13px; }
}

/* Support landing and sequential mobile chat flow. */
.support-page-header { padding-bottom: 18px; }
.support-stage { display: block; }
.support-intro { margin: 2px 2px 20px; }
.support-intro h2 { margin: 0 0 7px; color: var(--ink); font-size: 1.42rem; font-weight: 650; letter-spacing: -.035em; }
.support-intro p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.45; }
.support-shortcuts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-bottom: 14px; }
.support-shortcuts button {
  min-height: 122px; padding: 18px; border: 1px solid var(--line); border-radius: 20px;
  background: var(--paper); color: var(--ink); box-shadow: var(--shadow-small);
  display: grid; grid-template-columns: 1fr 14px; grid-template-rows: 1fr auto;
  gap: 12px; text-align: left; cursor: pointer;
}
.support-shortcuts button>span { color: #69727e; align-self: start; }
.support-shortcuts button>span svg { width: 31px; height: 31px; stroke-width: 1.7; }
.support-shortcuts button strong { font-size: .94rem; font-weight: 510; }
.support-shortcuts button i { grid-column: 2; grid-row: 1 / 3; align-self: center; color: var(--muted); font-size: 1.55rem; font-style: normal; }
.support-shortcuts button:active,.support-new-card:active,.ticket-row:active { transform: scale(.985); }
.support-new-card {
  width: 100%; min-height: 92px; padding: 17px 20px; border: 1px solid var(--line); border-radius: 20px;
  background: var(--paper); color: var(--ink); box-shadow: var(--shadow);
  display: grid; grid-template-columns: 52px minmax(0,1fr) 14px; gap: 15px;
  align-items: center; text-align: left; cursor: pointer;
}
.support-new-card>span { position: relative; width: 48px; height: 48px; display: grid; place-items: center; color: #65707c; }
.support-new-card>span svg { width: 34px; height: 34px; stroke-width: 1.7; }
.support-new-card>span i { position: absolute; right: 0; top: 0; color: var(--accent); font-size: 1.35rem; font-style: normal; font-weight: 500; }
.support-new-card strong,.support-new-card small { display: block; }
.support-new-card strong { font-size: 1.04rem; font-weight: 620; }
.support-new-card small { margin-top: 6px; color: var(--muted); font-size: .79rem; line-height: 1.35; }
.support-new-card>b { color: var(--muted); font-size: 1.55rem; font-weight: 300; }
.support-list-heading { margin: 30px 3px 13px; color: var(--ink); font-size: 1.2rem; font-weight: 650; letter-spacing: -.025em; }
.support-index .ticket-list { display: grid; gap: 12px; overflow: visible; border: 0; background: transparent; box-shadow: none; }
.support-index .ticket-row {
  min-height: 112px; padding: 17px 20px; border: 1px solid var(--line); border-radius: 20px;
  background: var(--paper); box-shadow: var(--shadow-small);
  grid-template-columns: 48px minmax(0,1fr) 14px; gap: 15px;
}
.support-index .ticket-row.active { background: var(--paper); }
.ticket-type-icon { width: 45px; height: 45px; display: grid; place-items: center; color: #68717c; }
.ticket-type-icon svg { width: 31px; height: 31px; stroke-width: 1.7; }
.ticket-copy { min-width: 0; }
.ticket-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-size: 1rem; font-weight: 620; }
.ticket-copy small { color: var(--muted); font-size: .79rem; margin-top: 5px; }
.ticket-status { width: max-content; margin-top: 9px; padding: 5px 10px; border-radius: 999px; display: flex; align-items: center; gap: 7px; font-size: .72rem; font-style: normal; font-weight: 500; }
.ticket-status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ticket-status.waiting { color: #bb762e; background: #fff4e7; }
.ticket-status.resolved,.ticket-status.answered { color: #23834c; background: #eaf7ef; }
.support-index .ticket-row>b { color: var(--muted); font-size: 1.55rem; font-weight: 300; }
.support-stage>.conversation-card { display: none; }
.support-view.has-ticket .support-stage { display: grid; grid-template-columns: minmax(280px,350px) minmax(0,1fr); gap: 16px; align-items: start; }
.support-view.has-ticket .support-stage>.conversation-card { display: flex; }
.support-view.has-ticket .support-shortcuts button { min-height: 94px; }
.support-view.has-ticket .support-new-card { min-height: 78px; }
.conversation-card>header { gap: 10px; }
.conversation-card>header>div { min-width: 0; flex: 1; }
.conversation-card>header strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.new-ticket-form>h2 { display: none; }

html[data-theme="dark"] .support-shortcuts button,html[data-theme="dark"] .support-new-card,
html[data-theme="dark"] .support-index .ticket-row { background: var(--paper); border-color: var(--line); }
html[data-theme="dark"] .support-shortcuts button>span,html[data-theme="dark"] .ticket-type-icon { color: #a7afb9; }
html[data-theme="dark"] .ticket-status.waiting { color: #e6a152; background: #3b2a19; }
html[data-theme="dark"] .ticket-status.resolved,html[data-theme="dark"] .ticket-status.answered { color: #6fd096; background: #173526; }

@media (max-width: 650px) {
  .support-view.has-ticket .support-page-header { display: none; }
  .support-view.has-ticket .support-stage { display: block; }
  .support-view.has-ticket .support-index { display: none; }
  .support-view.ticket-index .conversation-card { display: none; }
  .support-view.has-ticket .conversation-card { display: flex; min-height: calc(100vh - 122px); margin: 20px 0 0; border-radius: 20px; }
  .support-chat-back { display: grid!important; }
  .support-shortcuts { gap: 10px; }
  .support-shortcuts button { min-height: 112px; padding: 15px; border-radius: 18px; }
  .support-new-card { min-height: 88px; padding: 15px 17px; border-radius: 18px; grid-template-columns: 46px minmax(0,1fr) 12px; gap: 12px; }
  .support-new-card>span { width: 43px; height: 43px; }
  .support-new-card strong { font-size: .98rem; }
  .support-new-card small { font-size: .74rem; }
  .support-list-heading { margin-top: 26px; font-size: 1.12rem; }
  .support-index .ticket-row { min-height: 105px; padding: 15px 16px; border-radius: 18px; grid-template-columns: 43px minmax(0,1fr) 12px; gap: 12px; }
  .ticket-type-icon { width: 41px; height: 41px; }
  .ticket-type-icon svg { width: 29px; height: 29px; }
  .ticket-copy strong { font-size: .95rem; }
  .ticket-copy small { font-size: .74rem; }
  .ticket-status { margin-top: 8px; padding: 4px 9px; font-size: .68rem; }
  .conversation-card>header { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; }
  .message-list { height: min(58vh,470px); }
}

/* Final cascade guards for the client refinements. */
.keys-header { grid-template-columns:52px minmax(0,1fr) 52px; }
.keys-header h1 { grid-column:2; }
.keys-buy-row {
  width:100%; min-height:64px; margin:13px 0 3px; padding:0 17px;
  display:grid; grid-template-columns:38px minmax(0,1fr) 12px; align-items:center; gap:12px;
  border:0; border-radius:18px; background:var(--paper); color:var(--ink);
  box-shadow:var(--shadow-small); text-align:left;
}
.keys-buy-row:hover { background:var(--paper); box-shadow:0 6px 20px rgba(24,31,39,.065); }
.keys-buy-row>span { width:36px; height:36px; border-radius:11px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); }
.keys-buy-row b { font-weight:570; }
.keys-buy-row i { color:var(--muted); font-style:normal; font-size:1.4rem; }
.support-shortcuts button>span,.support-new-card>span,.ticket-type-icon { color:var(--accent); }
.support-shortcuts button>span { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; background:var(--accent-soft); }
.mobile-nav button { flex:1; }
@media (max-width:650px) {
  .keys-header { grid-template-columns:42px minmax(0,1fr) 42px; }
  .keys-buy-row { min-height:59px; border-radius:17px; }
}

/* Apple system palette. The interface uses colour only for state and action. */
:root {
  --bg:#f5f5f7;
  --paper:#ffffff;
  --paper-solid:#ffffff;
  --ink:#1d1d1f;
  --muted:#6e6e73;
  --line:#e8e8ed;
  --accent:#007aff;
  --accent-deep:#0066cc;
  --accent-soft:rgba(0,122,255,.09);
  --telegram:#007aff;
  --shadow:0 5px 22px rgba(0,0,0,.055);
  --shadow-small:0 3px 14px rgba(0,0,0,.045);
}
html[data-theme="dark"] {
  --bg:#000000;
  --paper:#1c1c1e;
  --paper-solid:#1c1c1e;
  --ink:#f5f5f7;
  --muted:#98989d;
  --line:#2c2c2e;
  --accent:#0a84ff;
  --accent-deep:#409cff;
  --accent-soft:rgba(10,132,255,.15);
}
.mobile-brand b span,.profile-head p span,.positive { color:var(--accent); }
.btn,.mini,.buy-key,.checkout-button,.compact-primary,.money-hero button,.telegram-hero button,
.ticket-list-title button,.conversation-card>header button,.new-ticket button,.support-composer button {
  background:var(--accent); color:#fff;
}
.checkout-button,.compact-primary { background:var(--accent); box-shadow:0 7px 18px rgba(0,122,255,.18); }
.device-choice.selected,.tariff-choice.selected,.payment-method.selected {
  background:rgba(0,122,255,.055); box-shadow:0 7px 22px rgba(0,0,0,.065),inset 0 0 0 1px rgba(0,122,255,.16)!important;
}
.selected>.radio-dot { border-color:var(--accent); background:var(--accent); }
.tariff-name b,.owner-free { background:var(--accent-soft); color:var(--accent); }
.mini-chart i,.funnel-bars b { background:linear-gradient(180deg,#69adff,var(--accent)); }
.ticket-status.waiting { color:#6e6e73; background:#f2f2f7; }
.recent-key { background:var(--accent-soft); color:var(--accent); }
.news-item>i { background:var(--accent); }

/* Icons remain independent glyphs: no coloured square or circle behind them. */
.key-art,.service-card>span,.news-icon,.access-key-icon,.purchase-title>span,
.telegram-hero>span,.referral-intro>span,.invitee-avatar,.keys-buy-row>span,
.support-shortcuts button>span,.support-new-card>span,.ticket-type-icon,.proxy-entry>span,
.new-ticket>span,.key-card>span {
  background:transparent!important;
  background-image:none!important;
  border-radius:0!important;
  box-shadow:none!important;
  color:var(--accent)!important;
}
.key-art { width:48px; height:48px; }
.key-art svg { width:34px; height:34px; }
.service-card>span { width:34px; height:40px; }
.news-icon { width:42px; height:48px; }
.access-key-icon { width:42px; height:52px; }
.purchase-title>span { width:36px; height:42px; }
.telegram-hero>span { width:54px; height:54px; color:var(--telegram)!important; }
.telegram-hero>span svg { width:42px; height:42px; }
.referral-intro>span { width:38px; height:48px; }
.invitee-avatar { width:34px; height:38px; }
.keys-buy-row>span { width:30px; height:36px; }
.support-shortcuts button>span { width:38px; height:42px; }
.support-new-card>span { width:42px; height:46px; }
.ticket-type-icon { width:38px; height:44px; }
.proxy-entry>span { width:36px; height:42px; }
html[data-theme="dark"] .access-key-icon,html[data-theme="dark"] .support-shortcuts button>span,
html[data-theme="dark"] .ticket-type-icon { background:transparent!important; color:var(--accent)!important; }

/* Apple Messages-style support conversation. */
.conversation-card { background:var(--paper); }
.conversation-card>header { background:rgba(255,255,255,.82); backdrop-filter:blur(20px) saturate(1.25); }
.message-list { flex:1; height:auto; min-height:280px; padding:18px 14px; gap:11px; background:var(--paper); }
.support-message {
  position:relative; max-width:min(78%,520px); padding:9px 13px 10px; border-radius:19px;
  box-shadow:none; animation:bubble-in var(--t-content) var(--spring) both;
}
@keyframes bubble-in { from { opacity:0; transform:translateY(5px) scale(.98) } to { opacity:1; transform:none } }
.support-message.client { background:#e9e9eb; color:#1d1d1f; border-bottom-left-radius:6px; }
.support-message.admin { background:var(--accent); color:#fff; border-bottom-right-radius:6px; }
.support-message.admin time { color:rgba(255,255,255,.68); }
.support-message.admin strong { color:rgba(255,255,255,.82); }
.support-message strong { font-weight:600; }
.support-message p { font-size:.82rem; line-height:1.42; }
.support-composer { margin-top:auto; padding:10px 12px max(12px,env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:rgba(255,255,255,.9); backdrop-filter:blur(20px); }
.support-composer textarea { min-height:44px; max-height:110px; border-radius:18px; background:#f2f2f7; box-shadow:none; }
.support-composer textarea:focus { box-shadow:inset 0 0 0 1px rgba(0,122,255,.45); }
.composer-attach { border:0; background:transparent; box-shadow:none; color:var(--accent); }
.support-composer button { height:36px; border-radius:18px; padding:0 15px; }
.simple-header>button,.keys-header>button:first-child,.head-theme {
  background:transparent; box-shadow:none; color:var(--accent);
}
.simple-header>button:hover,.keys-header>button:first-child:hover { background:rgba(0,122,255,.06); }
.mobile-nav button.active,.mobile-nav button[data-view="plans"].active,.mobile-nav button[data-view="support"].active {
  background:transparent; color:var(--accent); box-shadow:none;
}
html[data-theme="dark"] .conversation-card>header { background:rgba(28,28,30,.82); }
html[data-theme="dark"] .message-list { background:var(--paper); }
html[data-theme="dark"] .support-message.client { background:#3a3a3c; color:#fff; }
html[data-theme="dark"] .support-message.admin { background:var(--accent); color:#fff; }
html[data-theme="dark"] .support-composer { background:rgba(28,28,30,.9); }
html[data-theme="dark"] .support-composer textarea { background:#2c2c2e; }

@media (max-width:650px) {
  .support-view.has-ticket .conversation-card {
    height:calc(100dvh - 120px); min-height:540px; margin:8px 0 0; border-radius:22px;
  }
  .message-list { min-height:0; }
  .support-message { max-width:84%; }
  .support-composer { flex:0 0 auto; }
}

/* Warm, restrained glass surfaces shared by every client page. */
:root {
  --bg:#f7f6f4;
  --paper:rgba(255,255,255,.78);
  --paper-solid:#fff;
  --ink:#25262a;
  --muted:#74777d;
  --line:rgba(90,83,78,.105);
  --icon:#687078;
  --accent:#c9825e;
  --accent-deep:#aa6344;
  --accent-soft:rgba(201,130,94,.11);
  --telegram:#c9825e;
  --shadow:0 14px 38px rgba(67,54,44,.065),0 2px 8px rgba(67,54,44,.035),inset 0 1px rgba(255,255,255,.88);
  --shadow-small:0 7px 22px rgba(67,54,44,.055),0 1px 4px rgba(67,54,44,.025),inset 0 1px rgba(255,255,255,.86);
}
html[data-theme="dark"] {
  --bg:#141416;
  --paper:rgba(37,37,40,.82);
  --paper-solid:#252528;
  --ink:#f4f4f5;
  --muted:#acacb2;
  --line:rgba(255,255,255,.105);
  --icon:#b1b5bc;
  --accent:#d79a79;
  --accent-deep:#edb596;
  --accent-soft:rgba(215,154,121,.16);
  --telegram:#d79a79;
  --shadow:0 14px 38px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.05);
  --shadow-small:0 7px 22px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.04);
}
body,.app-shell { background:var(--bg); }
html[data-theme="dark"] body,html[data-theme="dark"] .app-shell { background:var(--bg); }
.sidebar,.mobile-nav,.profile-card,.news-item,.access-card,.purchase-card,.ticket-list,.conversation-card,
.support-admin-tools,.data-card,.money-hero,.telegram-hero,.referral-dashboard article,.referral-intro,
.proxy-link,.accordion-list details,.admin-card,.login-card,.modal-backdrop>section {
  background:var(--paper)!important; border:1px solid var(--line)!important;
  box-shadow:var(--shadow); backdrop-filter:blur(20px) saturate(1.18); -webkit-backdrop-filter:blur(20px) saturate(1.18);
}
.profile-card,.ticket-row,.support-shortcuts button,.support-new-card,.device-row,.keys-buy-row {
  backdrop-filter:blur(20px) saturate(1.18); -webkit-backdrop-filter:blur(20px) saturate(1.18);
}
.support-shortcuts button,.support-new-card,.support-index .ticket-row,.device-row,.keys-buy-row {
  background:var(--paper); border:1px solid var(--line); box-shadow:var(--shadow-small);
}
.nav button.active,.mobile-nav button.active,.mobile-nav button[data-view="plans"].active,
.mobile-nav button[data-view="support"].active { background:var(--accent-soft); color:var(--accent-deep); }
.nav button:not(.active) svg,.mobile-nav button:not(.active) svg { color:var(--icon); }
.key-art,.service-card>span,.news-icon,.access-key-icon,.purchase-title>span,.plan-overview>span,
.telegram-hero>span,.referral-intro>span,.invitee-avatar,.keys-buy-row>span,
.support-shortcuts button>span,.support-new-card>span,.ticket-type-icon,.proxy-entry>span,
.new-ticket>span,.key-card>span {
  background:transparent!important; background-image:none!important; color:var(--icon)!important;
  border:0!important; box-shadow:none!important;
}
.profile-head p span,.mobile-brand b span,.positive,.recent-key { color:var(--accent-deep); }
.btn-primary,.buy-key,.checkout-button,.compact-primary,.money-hero button:not(.soft),
.telegram-hero button:not(.soft):not(.link-button),.support-composer button,.key-actions button.primary {
  background:linear-gradient(145deg,#d79a77,#c27d5b)!important; color:#fff!important;
  box-shadow:0 8px 20px rgba(163,103,74,.17),inset 0 1px rgba(255,255,255,.25)!important;
}
.keys-buy-row { background:var(--paper)!important; color:var(--ink)!important; }
.keys-buy-row:hover { background:rgba(255,255,255,.94)!important; color:var(--ink)!important; box-shadow:0 10px 24px rgba(67,54,44,.09)!important; }
.checkout-button:hover,.compact-primary:hover,.key-actions button.primary:hover { filter:brightness(1.035); }
.device-choice.selected,.tariff-choice.selected,.payment-method.selected {
  background:rgba(201,130,94,.11)!important; box-shadow:var(--shadow-small)!important;
}
.selected>.radio-dot,.payment-method.selected>.radio-dot { border-color:var(--accent)!important; background:var(--accent)!important; }
.tariff-choice,.payment-method { background:rgba(255,255,255,.56); border:1px solid var(--line); box-shadow:var(--shadow-small); }
.tariff-choice:focus-visible,.payment-method:focus-visible,.keys-buy-row:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.tariff-name { font-weight:420; }
.tariff-price strong { font-weight:530; }
.plan-overview { display:flex; align-items:center; gap:13px; padding:15px 18px; }
.plan-overview>span { width:28px; height:28px; flex:none; display:grid; place-items:center; }
.plan-overview>span svg { width:24px; height:24px; }
.plan-overview strong,.plan-overview small { display:block; }
.plan-overview strong { font-size:.96rem; font-weight:590; }
.plan-overview small { margin-top:3px; color:var(--muted); font-size:.73rem; line-height:1.35; }
.plan-overview small b { font-weight:600; }
.payment-calc { background:rgba(120,113,105,.055); }
.payment-method svg,.selected>.radio-dot,.recent-key,.tariff-name b { color:var(--accent-deep); }
.mini-chart i,.funnel-bars b { background:linear-gradient(180deg,#edc4aa,var(--accent)); }
.news-item>i { background:var(--accent); }
.key-actions button.key-install { color:var(--accent-deep)!important; background:var(--accent-soft)!important; }
.key-actions button[data-key-devices] { grid-column:1/-1; }
.key-actions button[data-key-devices] svg:last-child { width:16px; margin-left:auto; transition:transform var(--t-tap); }
.key-actions button[data-key-devices][aria-expanded="true"] svg:last-child { transform:rotate(180deg); }
.device-section { margin-top:12px; border-top:1px solid var(--line); }

/* The new conversation starts empty; its composer belongs to the bottom edge. */
.conversation-card { min-height:520px; overflow:hidden; }
.conversation-card>header { background:rgba(255,255,255,.55); }
.message-list { min-height:0; background:transparent; }
.new-ticket-form { width:100%; min-height:0; flex:1; margin:0!important; padding:0!important; display:flex; flex-direction:column; justify-content:flex-end; text-align:left; }
.new-ticket-form .support-composer { width:100%; margin-top:auto; padding:12px 14px 16px; border-top:1px solid var(--line); }
.support-composer { background:rgba(255,255,255,.67); }
.support-composer textarea { background:rgba(118,118,128,.075); color:var(--ink); }
.support-composer textarea:focus { box-shadow:inset 0 0 0 1px rgba(201,130,94,.45); }
.composer-attach { color:var(--icon); }
.support-message.client { background:rgba(226,226,230,.78); color:#28292d; }
.support-message.admin { background:rgba(230,202,183,.75); color:#352e2b; }
.support-message.admin strong,.support-message.admin time { color:#746157; }
.support-message { backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.support-chat-back,.simple-header>button,.keys-header>button:first-child,.head-theme { background:transparent!important; color:var(--icon)!important; box-shadow:none!important; }
.support-chat-back:hover,.simple-header>button:hover,.keys-header>button:first-child:hover { background:var(--accent-soft)!important; }
html[data-theme="dark"] .conversation-card>header,html[data-theme="dark"] .support-composer { background:rgba(37,37,40,.66); }
html[data-theme="dark"] .support-message.client { background:#414146; color:#f3f3f4; }
html[data-theme="dark"] .support-message.admin { background:#5d453a; color:#f8f4f2; }
html[data-theme="dark"] .support-message.admin strong,html[data-theme="dark"] .support-message.admin time { color:#d9c5bb; }
html[data-theme="dark"] .support-composer textarea { background:rgba(255,255,255,.08); }

.modal-backdrop>section.install-modal,.modal-backdrop>section.shortfall-modal { width:min(480px,calc(100vw - 32px)); padding:24px; border-radius:24px; color:var(--ink); }
.install-modal>small { color:var(--muted); font-size:.74rem; }
.install-modal h2,.shortfall-modal h2 { margin:5px 36px 18px 0; font-size:1.3rem; }
.install-modal ol { display:grid; gap:15px; margin:0; padding-left:23px; }
.install-modal li { padding-left:4px; }
.install-modal li::marker { color:var(--accent-deep); font-weight:600; }
.install-modal li b { font-size:.91rem; }
.install-modal li p,.shortfall-modal p { color:var(--muted); font-size:.83rem; line-height:1.5; margin:5px 0 9px; }
.install-modal li a,.install-modal li button { display:inline-flex; align-items:center; gap:7px; color:var(--accent-deep); font-size:.81rem; font-weight:600; }
.install-modal li button { background:var(--accent-soft); border:0; border-radius:11px; padding:9px 12px; cursor:pointer; }
.install-modal li button svg { width:17px; height:17px; }
.install-done,.modal-secondary { display:block; width:100%; border:0; background:transparent; color:var(--accent-deep); margin-top:18px; padding:10px; cursor:pointer; }
.shortfall-modal .checkout-button { margin-top:18px; }
.modal-close { position:absolute; right:16px; top:13px; border:0; background:transparent; color:var(--muted); font-size:1.5rem; cursor:pointer; }
@media (max-width:650px) {
  .support-view.has-ticket .conversation-card { height:calc(100dvh - 112px); min-height:0; margin:6px 0 0; }
  .new-ticket-form .support-composer { padding-bottom:max(15px,env(safe-area-inset-bottom)); }
}

/* Telegram sign-in shares the same understated surfaces as the client cabinet. */
.bot-login-link { display:flex; align-items:center; justify-content:center; min-height:39px; margin:12px 0 15px; border-radius:12px; background:var(--accent-soft); color:var(--accent-deep); font-size:.86rem; font-weight:600; text-decoration:none; }
.bot-login-link:hover { background:rgba(201,130,94,.19); }
.login-divider { display:flex; align-items:center; gap:11px; margin:13px 0; color:var(--muted); font-size:.76rem; }
.login-divider:before,.login-divider:after { content:""; height:1px; flex:1; background:var(--line); }
.bot-code-form { display:grid; gap:9px; text-align:left; }
.bot-code-form input { width:100%; height:42px; padding:0 13px; border:1px solid var(--line); border-radius:12px; outline:none; background:rgba(255,255,255,.54); color:var(--ink); font:inherit; font-size:.86rem; }
.bot-code-form input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.bot-code-form button { height:40px; border:0; border-radius:12px; background:var(--accent); color:#fff; font:inherit; font-size:.86rem; font-weight:600; cursor:pointer; box-shadow:0 6px 16px rgba(168,100,70,.14); }
.login-card .login-form-error { margin:0; color:var(--danger); font-size:.78rem; }
.login-card .login-form-error[hidden] { display:none; }
.login-card .privacy-note { margin:14px auto 0!important; }
.telegram-widget-option { margin-top:13px; color:var(--muted); font-size:.76rem; }
.telegram-widget-option summary { cursor:pointer; list-style:none; }
.telegram-widget-option summary::-webkit-details-marker { display:none; }
.telegram-widget-option .telegram-slot { margin-top:13px; }
html[data-theme="dark"] .bot-code-form input { background:rgba(45,45,48,.6); }

/* Neutral Apple-like canvas; the brand hue belongs to action buttons. */
:root {
  --bg:#f5f5f7;
  --paper:rgba(255,255,255,.82);
  --line:rgba(60,60,67,.10);
  --accent-soft:rgba(118,118,128,.08);
  --shadow:0 12px 34px rgba(28,32,38,.055),0 2px 7px rgba(28,32,38,.025),inset 0 1px rgba(255,255,255,.9);
  --shadow-small:0 6px 18px rgba(28,32,38,.05),0 1px 4px rgba(28,32,38,.025),inset 0 1px rgba(255,255,255,.9);
}
html[data-theme="dark"] {
  --bg:#141416;
  --paper:rgba(38,38,42,.84);
  --line:rgba(255,255,255,.11);
  --accent-soft:rgba(142,142,147,.14);
}
.ambient { display:none; }
.profile-avatar { background:linear-gradient(145deg,#c5c7ce,#9b9fa8); box-shadow:0 12px 30px rgba(30,35,42,.11); }
.nav button.active,.mobile-nav button.active,.mobile-nav button[data-view="plans"].active,
.mobile-nav button[data-view="support"].active { background:transparent; color:var(--accent-deep); }
.nav button:hover,.mobile-nav button:hover { background:rgba(118,118,128,.07); }
.profile-head p span,.positive { color:var(--ink); }
.recent-key,.tariff-name b,.owner-free { background:rgba(118,118,128,.08); color:var(--muted); }
.news-item>i { background:#aeb2ba; }
.mini-chart i,.funnel-bars b { background:linear-gradient(180deg,#b6bbc3,#8d949e); }
.payment-method svg { color:var(--icon); }
.support-message.admin { background:rgba(223,225,230,.83); color:var(--ink); }
.support-message.admin strong,.support-message.admin time { color:var(--muted); }
.support-chat-back:hover,.simple-header>button:hover,.keys-header>button:first-child:hover { background:rgba(118,118,128,.08)!important; }
.device-choice.selected,.tariff-choice.selected,.payment-method.selected {
  background:rgba(255,255,255,.9)!important;
  box-shadow:var(--shadow-small),inset 0 0 0 1px rgba(60,60,67,.10)!important;
}
.bot-login-link,.key-actions button.key-install {
  background:linear-gradient(145deg,#d79a77,#c27d5b)!important;
  color:#fff!important;
  box-shadow:0 8px 20px rgba(163,103,74,.17),inset 0 1px rgba(255,255,255,.25)!important;
}
.bot-login-link:hover,.key-actions button.key-install:hover {
  background:linear-gradient(145deg,#dca381,#ca8564)!important;
  color:#fff!important;
}
.keys-buy-row { background:var(--paper)!important; color:var(--ink)!important; box-shadow:var(--shadow-small)!important; }
.keys-buy-row:hover { background:rgba(255,255,255,.94)!important; color:var(--ink)!important; }
.keys-buy-row>span,.keys-buy-row>span svg { color:var(--icon)!important; }
.key-actions button.key-install svg { color:#fff!important; }
.contact-row span.telegram { color:var(--icon)!important; }
.money-hero button.soft,.mini,.amount-line button { background:rgba(118,118,128,.09); color:var(--ink); }
html[data-theme="dark"] .device-choice.selected,html[data-theme="dark"] .tariff-choice.selected,
html[data-theme="dark"] .payment-method.selected { background:rgba(58,58,62,.92)!important; }
html[data-theme="dark"] .support-message.admin { background:#44454a; color:#f4f4f5; }
html[data-theme="dark"] .support-message.admin strong,html[data-theme="dark"] .support-message.admin time { color:#c0c1c7; }
html[data-theme="dark"] .profile-avatar { background:linear-gradient(145deg,#565962,#383a42); box-shadow:0 12px 30px rgba(0,0,0,.22); }

/* Aegis icon pack and consistent floating controls. */
.aegis-svg { display:block; flex:none; width:1.25em; height:1.25em; fill:none; stroke:currentColor; }
.telegram-logo { display:block; width:1.2em; height:1.2em; object-fit:contain; flex:none; }
.contact-row .telegram-logo,.list-row .telegram-logo { width:20px; height:20px; }
.bot-login-link { gap:8px; }
.bot-login-link .telegram-logo { width:19px; height:19px; }
.mobile-brand img,.brand img,.logo-frame img { content:normal!important; filter:none!important; object-fit:contain; }
.mobile-brand img,.brand img { border-radius:0!important; }
.mobile-brand img,.brand img,.logo-frame img { filter:saturate(1.3) contrast(1.05)!important; }
.brand-logo { overflow:hidden; border-radius:10px; }
html[data-theme="dark"] .mobile-brand img,html[data-theme="dark"] .brand img,html[data-theme="dark"] .logo-frame img { content:url('/assets/freeman-logo-dark.png')!important; }

@media (max-width:1100px) {
  .mobile-nav { display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr)); align-items:stretch; justify-content:stretch; box-sizing:border-box; height:84px; min-height:84px; padding:7px 8px max(10px,env(safe-area-inset-bottom)); }
  .mobile-nav button { width:100%; min-width:0!important; height:65px; padding:6px 2px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; border-radius:12px; box-sizing:border-box; font-weight:500; line-height:1; }
  .mobile-nav button .aegis-svg { width:23px; height:23px; }
  .mobile-nav button span { display:block; height:14px; line-height:14px; white-space:nowrap; font-size:.68rem; }
  .mobile-nav button.active { font-weight:600; }
}
@media (min-width:1101px) { .mobile-nav { display:none!important; } }
.nav button:hover,.mobile-nav button:hover,.mobile-nav button.active:hover { background:transparent!important; filter:none!important; }
.nav button:hover,.mobile-nav button:hover { color:var(--accent-deep); }

/* Small controls share the same translucent surface without gray hover fills. */
.key-actions button:not(.primary):not(.key-install),.mini,.amount-line button,.money-hero button.soft,
.buy-key,.support-shortcuts button,.support-new-card,.instruction-row,.device-row>button,
.support-chat-back,.simple-header>button,.keys-header>button:first-child,.head-theme,
.install-modal li button,.install-done,.modal-secondary,.composer-attach {
  background:var(--paper)!important;
  border:1px solid var(--line)!important;
  box-shadow:var(--shadow-small)!important;
  backdrop-filter:blur(18px) saturate(1.14);
  -webkit-backdrop-filter:blur(18px) saturate(1.14);
}
.key-actions button:not(.primary):not(.key-install):hover,.mini:hover,.amount-line button:hover,
.support-shortcuts button:hover,.support-new-card:hover,.instruction-row:hover,.device-row>button:hover,
.support-chat-back:hover,.simple-header>button:hover,.keys-header>button:first-child:hover,.head-theme:hover {
  background:var(--paper)!important;
  box-shadow:0 9px 22px rgba(28,32,38,.09),inset 0 1px rgba(255,255,255,.9)!important;
  transform:translateY(-1px);
}
.buy-key { background:linear-gradient(145deg,#d79a77,#c27d5b)!important; color:#fff!important; }
.buy-key:hover { background:linear-gradient(145deg,#dca381,#ca8564)!important; }
.keys-buy-row.buy-key,.keys-buy-row.buy-key:hover { background:var(--paper)!important; color:var(--ink)!important; }
.support-new-card .aegis-svg { width:29px; height:29px; }
.support-new-card>span i { display:none; }
.ticket-list { background:transparent!important; border:0!important; box-shadow:none!important; backdrop-filter:none!important; padding:0!important; display:grid; gap:10px; }
.ticket-row,.support-index .ticket-row { background:var(--paper)!important; border:1px solid var(--line)!important; border-radius:19px; box-shadow:var(--shadow-small)!important; backdrop-filter:blur(18px); }
.ticket-row:hover,.support-index .ticket-row:hover { background:var(--paper)!important; box-shadow:var(--shadow)!important; }
.link-list { background:transparent!important; border:0!important; box-shadow:none!important; backdrop-filter:none!important; padding:0!important; display:grid; gap:9px; }
.link-list .list-row { background:var(--paper); border:1px solid var(--line); border-radius:17px; box-shadow:var(--shadow-small); padding:7px 16px; }
.link-list .list-row:hover,.contact-row:hover { background:var(--paper)!important; box-shadow:var(--shadow-small); }
.contact-card { background:transparent!important; border:0!important; box-shadow:none!important; backdrop-filter:none!important; padding:0!important; display:grid; gap:9px; }
.contact-row { background:var(--paper); border:1px solid var(--line)!important; border-radius:17px; box-shadow:var(--shadow-small); padding:7px 16px; }
.support-new-card .aegis-svg * { animation-play-state:paused; }
.support-new-card:hover .aegis-svg *,.support-new-card:focus-visible .aegis-svg * { animation-play-state:running; }
html[data-theme="dark"] .ticket-row,html[data-theme="dark"] .link-list .list-row { background:var(--paper)!important; }
@media (prefers-reduced-motion:reduce) { .aegis-svg * { animation:none!important; } }

/* The supplied pack is the only source for navigational and action glyphs. */
i>.aegis-svg,b>.aegis-svg { width:18px; height:18px; }
.contact-row>i,.list-row>b,.service-card>i,.ticket-row>b,.support-shortcuts button>i,
.support-new-card>b,.proxy-entry>i,.keys-buy-row>i { display:grid; place-items:center; }
.modal-close .aegis-svg,.qr-modal>button .aegis-svg,.form-modal>button:first-child .aegis-svg { width:19px; height:19px; }
.install-modal li a .aegis-svg { display:inline-block; width:15px; height:15px; vertical-align:-3px; margin-left:3px; }
.aegis-animated * { animation-play-state:paused!important; }
button:hover .aegis-animated *,button:focus-visible .aegis-animated *,button.pending .aegis-animated * { animation-play-state:running!important; }
@media (prefers-reduced-motion:reduce) { .aegis-animated * { animation:none!important; } }

@media (max-width:1100px) {
  .mobile-nav { width:min(320px,calc(100% - 32px)); height:68px; min-height:68px; padding:7px 10px max(7px,env(safe-area-inset-bottom)); border-radius:27px; }
  .mobile-nav button { height:52px; min-height:52px; border-radius:18px; }
  .mobile-nav button .aegis-svg { width:24px; height:24px; transition:transform var(--t-content) var(--ease-out),color var(--t-content) var(--ease-out); }
  .mobile-nav button.active .aegis-svg { transform:translateY(-1px); }
  .mobile-nav button span { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
}
.key-actions button[data-autorenew].is-enabled { background:rgba(52,199,89,.12)!important; color:var(--ink)!important; border-color:rgba(52,199,89,.24)!important; }
.key-actions button[data-autorenew].is-enabled svg { color:#248a3d; }

/* Shared motion system: screens, content, controls and feedback. */
body.has-cabinet { overflow:hidden; }
.app-shell { height:100dvh; min-height:0!important; overflow:hidden; }
.profile-content { height:100%; min-height:0; padding:0 4px!important; }
.stage { position:relative; height:100%; min-height:0; isolation:isolate; }
.screen { position:absolute; inset:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior-y:contain; -webkit-overflow-scrolling:touch; }
.screen[hidden] { display:none!important; }
.screen__inner { min-height:100%; padding:5px 4px 125px; }
.scroll-topbar { position:sticky; top:0; z-index:8; height:52px; margin-bottom:-52px; display:grid; place-items:center; background:var(--paper); border-bottom:1px solid var(--line); backdrop-filter:saturate(1.8) blur(22px); -webkit-backdrop-filter:saturate(1.8) blur(22px); opacity:0; transform:translate3d(0,8px,0); pointer-events:none; transition:opacity var(--t-header) var(--ease-out),transform var(--t-header) var(--ease-out); }
.scroll-topbar span { color:var(--ink); font-size:.9rem; font-weight:600; }
.screen.is-scrolled .scroll-topbar { opacity:1; transform:translate3d(0,0,0); }
.stage { animation:none!important; }
.screen .access-card,.screen .proxy-entry,.screen .purchase-card,.screen .news-item,.screen .support-message,.screen .mini-chart i,.screen .funnel-bars b { animation:none; }
.screen.is-entering,.screen.is-leaving { will-change:transform,opacity; }
.screen.is-entering { animation:motion-screen-in var(--t-screen) var(--spring) both; z-index:2; }
.screen.is-leaving { animation:motion-screen-out var(--t-screen) var(--spring) both; pointer-events:none; z-index:1; }
@keyframes motion-screen-in { from { opacity:0; transform:translate3d(calc(var(--dir,1) * 26px),0,0); } to { opacity:1; transform:translate3d(0,0,0); } }
@keyframes motion-screen-out { from { opacity:1; transform:translate3d(0,0,0); } to { opacity:0; transform:translate3d(calc(var(--dir,1) * -14px),0,0); } }
.screen:not(.is-entering) .stagger > * { animation:none!important; }
.screen.is-entering .stagger > * { animation:motion-rise var(--t-cascade) var(--spring) both!important; }
.screen.is-entering .stagger > :nth-child(1) { animation-delay:var(--stagger-1)!important; }
.screen.is-entering .stagger > :nth-child(2) { animation-delay:var(--stagger-2)!important; }
.screen.is-entering .stagger > :nth-child(3) { animation-delay:var(--stagger-3)!important; }
.screen.is-entering .stagger > :nth-child(4) { animation-delay:var(--stagger-4)!important; }
.screen.is-entering .stagger > :nth-child(5) { animation-delay:var(--stagger-5)!important; }
.screen.is-entering .stagger > :nth-child(n+6) { animation-delay:var(--stagger-6)!important; }
@keyframes motion-rise { from { opacity:0; transform:translate3d(0,14px,0); } to { opacity:1; transform:translate3d(0,0,0); } }
.screen .simple-header,.screen .keys-header,.screen .mobile-brand { position:relative; top:auto; z-index:5; border-bottom:1px solid transparent; }
.funnel-bars b,.mini-chart i { transform-origin:left center; }
.screen.is-entering .funnel-bars b,.screen.is-entering .mini-chart i { animation:motion-meter var(--t-meter) var(--spring) var(--stagger-4) both; }
@keyframes motion-meter { from { transform:scaleX(0); } to { transform:scaleX(1); } }
.faq { background:var(--paper); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-small); overflow:hidden; }
.faq__q { width:100%; min-height:56px; padding:12px 16px; display:flex; align-items:center; justify-content:space-between; gap:15px; border:0; background:transparent; color:var(--ink); font:inherit; font-size:.84rem; font-weight:600; text-align:left; cursor:pointer; }
.faq__q i { font-style:normal; transition:transform var(--t-expand) var(--spring); }
.faq.is-open .faq__q i { transform:rotate(90deg); }
.faq__a { display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--t-expand) var(--spring); }
.faq.is-open .faq__a { grid-template-rows:1fr; }
.faq__a>div { min-height:0; overflow:hidden; }
.faq__a p { margin:0; padding:0 16px 16px; color:var(--muted); font-size:.78rem; line-height:1.55; opacity:0; transition:opacity var(--t-content) var(--ease-out) var(--stagger-3); }
.faq.is-open .faq__a p { opacity:1; }
.access-expander { display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--t-expand) var(--spring); }
.access-expander.is-open { grid-template-rows:1fr; }
.access-expander-inner { min-height:0; overflow:hidden; }
.device-expander { display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--t-expand) var(--spring); }
.device-expander.is-open { grid-template-rows:1fr; }
.device-expander-inner { min-height:0; overflow:hidden; }
.pressable { transition:transform var(--t-tap) var(--spring),opacity var(--t-tap) var(--ease-out); }
.pressable:active { transform:scale(.973)!important; }
.list-row.pressable:active .aegis-svg,.ticket-row.pressable:active b .aegis-svg { transform:translate3d(2px,0,0); }
.motion-toast { position:fixed; z-index:200; left:50%; bottom:calc(105px + env(safe-area-inset-bottom,0px)); padding:11px 17px; border-radius:14px; background:var(--paper); color:var(--ink); border:1px solid var(--line); box-shadow:var(--shadow); backdrop-filter:blur(18px); opacity:0; transform:translate3d(-50%,14px,0) scale(.95); pointer-events:none; transition:opacity var(--t-toast) var(--ease-out),transform var(--t-toast) var(--spring); white-space:nowrap; max-width:calc(100vw - 32px); overflow:hidden; text-overflow:ellipsis; }
.motion-toast.is-shown { opacity:1; transform:translate3d(-50%,0,0) scale(1); }
@media (max-width:1100px) {
  .app-shell { padding:0 15px!important; }
  .profile-content { width:100%; height:100%; padding:0!important; }
  .screen__inner { padding:0 0 122px; }
  .mobile-nav { width:min(620px,calc(100% - 20px)); height:82px; min-height:82px; padding:7px 8px 17px; bottom:max(10px,env(safe-area-inset-bottom)); left:50%; right:auto; transform:translateX(-50%); display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr)); align-items:start; box-sizing:border-box; }
  .mobile-nav .tabbar__pill { position:absolute; top:7px; left:8px; width:calc((100% - 16px)/4); height:58px; z-index:0; pointer-events:none; transition:transform var(--t-pill) var(--spring); }
  .mobile-nav .tabbar__pill::before { content:""; position:absolute; inset:0 9%; border-radius:17px; background:var(--accent-soft); }
  .mobile-nav button { position:relative; z-index:1; width:100%; min-width:0!important; height:58px; min-height:58px; padding:4px 2px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; background:transparent!important; }
  .mobile-nav button { transition:color var(--t-tab-color) var(--ease-out),transform var(--t-tap) var(--spring); }
  .mobile-nav button span { position:static; width:auto; height:auto; margin:0; padding:0; overflow:visible; clip-path:none; font-size:11.5px; line-height:14px; white-space:nowrap; }
  .mobile-nav button .aegis-svg { width:26px; height:26px; transition:transform var(--t-pill) var(--spring); }
  .mobile-nav button:active .aegis-svg { transform:scale(.88); }
  .mobile-nav button.active .aegis-svg { transform:translate3d(0,-1px,0); }
}
/* iOS system colors keep the interface neutral while preserving the supplied logo. */
:root {
  --ink:#1d1d1f;
  --icon:#6e6e73;
  --accent:#007aff;
  --accent-deep:#0066d6;
  --accent-soft:rgba(0,122,255,.10);
  --telegram:#229ed9;
  --system-button:#007aff;
  --system-button-hover:#006ee6;
}
html[data-theme="dark"] {
  --ink:#f5f5f7;
  --icon:#a1a1a6;
  --accent:#0a84ff;
  --accent-deep:#64b5ff;
  --accent-soft:rgba(10,132,255,.17);
  --telegram:#36aee2;
  --system-button:#0a84ff;
  --system-button-hover:#3198ff;
}
.mobile-brand img,.brand img,.logo-frame img { filter:none!important; }
.mobile-brand b,.mobile-brand b span { color:var(--ink); }
.btn-primary,.buy-key:not(.keys-buy-row),.checkout-button,.compact-primary,.money-hero button:not(.soft),
.telegram-hero button:not(.soft):not(.link-button),.support-composer button,.key-actions button.primary,
.bot-login-link,.key-actions button.key-install,.bot-code-form button {
  background:var(--system-button)!important;
  color:#fff!important;
  box-shadow:0 7px 17px rgba(0,90,190,.17),inset 0 1px rgba(255,255,255,.22)!important;
}
.btn-primary:hover,.buy-key:not(.keys-buy-row):hover,.checkout-button:hover,.compact-primary:hover,
.bot-login-link:hover,.key-actions button.key-install:hover,.bot-code-form button:hover { background:var(--system-button-hover)!important; filter:none; }
.support-composer textarea:focus { box-shadow:inset 0 0 0 1px rgba(0,122,255,.42); }
.mini-chart i,.funnel-bars b { background:linear-gradient(180deg,#78b9ff,#007aff); }
.news-item>i { background:var(--accent); }
.profile-avatar { background:linear-gradient(145deg,#c5c7ce,#9b9fa8); }
.buy-key { background:var(--system-button)!important; color:#fff!important; }
.buy-key:hover { background:var(--system-button-hover)!important; }
.keys-buy-row.buy-key,.keys-buy-row.buy-key:hover { background:var(--paper)!important; color:var(--ink)!important; }
.payment-method svg { color:var(--icon); }
.invitee-row em.waiting,.proxy-entry em.paid,.ticket-status.waiting {
  color:var(--muted);
  background:rgba(118,118,128,.10);
}
.auth-error { color:#c1302a; background:rgba(255,59,48,.09); }
html[data-theme="dark"] .profile-avatar { background:linear-gradient(145deg,#565962,#383a42); }
html[data-theme="dark"] .invitee-row em.waiting,
html[data-theme="dark"] .proxy-entry em.paid,
html[data-theme="dark"] .ticket-status.waiting {
  color:var(--muted);
  background:rgba(142,142,147,.17);
}
@media (max-width:1100px) {
  .mobile-nav button { gap:0; }
  .mobile-nav button span { display:none!important; }
  .mobile-nav button .aegis-svg { width:32px; height:32px; }
  .mobile-nav .tabbar__pill::before { background:var(--accent-soft); }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:var(--t-reduced)!important; animation-delay:0ms!important; transition-duration:var(--t-reduced)!important; }
}

/* Cards in the profile sit directly on the cabinet canvas. */
.profile-stack { display:contents; background:none!important; border:0!important; box-shadow:none!important; padding:0!important; }
.profile-stack::before,.profile-stack::after { content:none!important; }
.app-shell { box-shadow:none!important; }

/* Fixed proportions and the same content width on every mobile screen. */
@media (max-width:1100px) {
  .screen { scrollbar-width:none; }
  .screen::-webkit-scrollbar { display:none; }
  .mobile-nav {
    width:min(760px,calc(100% - 30px));
    height:82px;
    min-height:82px;
    padding:7px 8px 17px;
    border-radius:24px;
  }
  .mobile-nav button { height:58px; min-height:58px; gap:4px; }
  .mobile-nav button span {
    display:block!important;
    position:static;
    width:auto;
    height:14px;
    padding:0;
    margin:0;
    overflow:visible;
    clip-path:none;
    font-size:11px;
    line-height:14px;
    white-space:nowrap;
  }
  .mobile-nav button .aegis-svg { width:25px; height:25px; }
}