@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/manrope-cyrillic.woff2?v=1") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/manrope-latin-ext.woff2?v=1") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/manrope-latin.woff2?v=1") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Outfit;
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/outfit-latin-ext.woff2?v=1") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: Outfit;
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/outfit-latin.woff2?v=1") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-cyrillic-400.woff2?v=1") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-latin-400.woff2?v=1") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-cyrillic-700.woff2?v=1") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-latin-700.woff2?v=1") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

    :root {
      --background: 220 8% 7%;
      --foreground: 210 20% 96%;
      --card: 220 10% 10%;
      --primary: 213 72% 52%;
      --primary-foreground: 0 0% 100%;
      --muted: 220 8% 15%;
      --muted-foreground: 215 12% 62%;
      --destructive: 0 78% 58%;
      --border: 220 8% 18%;
      --input: 220 8% 18%;
      --ring: 213 72% 52%;
      --success: 142 48% 42%;
      --radius: 16px;
      --radius-sm: 8px;
      --radius-md: 12px;
      --space-1: 4px;
      --space-2: 8px;
      --space-3: 12px;
      --space-4: 16px;
      --space-5: 20px;
      --space-6: 24px;
      --space-8: 32px;
      --card-pad: 20px;
      --btn-outline: hsl(0 0% 100% / 0.16);
      --btn-outline-hover: hsl(0 0% 100% / 0.26);
      --btn-outline-ghost: hsl(0 0% 100% / 0.12);
      --header: 56px;
      --nav-bar: 76px;
      --bg: hsl(var(--background));
      --fg: hsl(var(--foreground));
    }
    * { box-sizing: border-box; }
    html, body { margin: 0; min-height: 100%; }
    body {
      font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
      background: var(--bg);
      color: var(--fg);
      line-height: 1.55;
      -webkit-font-smoothing: antialiased;
    }
    a { color: hsl(var(--primary)); text-decoration: none; }
    a:hover { color: hsl(var(--primary) / 0.88); }
    h1, h2, h3, .brand {
      margin: 0; font-weight: 700; letter-spacing: -0.03em;
      font-family: Outfit, Manrope, ui-sans-serif, system-ui, sans-serif;
    }
    p { margin: 0; }
    button, input, textarea { font: inherit; color: inherit; }
    .glow {
      position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
    }
    .glow span:first-child {
      position: absolute; top: 8%; left: 50%; width: 36rem; height: 36rem;
      margin-left: -18rem; border-radius: 9999px;
      background: hsl(var(--primary) / 0.14); filter: blur(130px);
    }
    .glow span:last-child {
      position: absolute; bottom: -4rem; left: -4rem; width: 22rem; height: 22rem;
      border-radius: 9999px; background: hsl(var(--primary) / 0.08); filter: blur(110px);
    }
    @supports (-webkit-touch-callout: none) {
      .glow { display: none; }
    }
    .site-header {
      position: sticky; top: 0; z-index: 40;
      min-height: var(--header);
      display: flex; align-items: center;
      border-bottom: 1px solid hsl(var(--border) / 0.45);
      background: hsl(var(--background) / 0.82);
      backdrop-filter: blur(18px);
    }
    @supports (-webkit-touch-callout: none) {
      .site-header {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: hsl(var(--background));
      }
    }
    .site-header .inner, .page {
      width: 100%; max-width: 72rem; margin: 0 auto; padding: 0 var(--space-4);
    }
    .site-header .inner {
      display: flex; align-items: center; gap: var(--space-4); min-height: var(--header);
    }
    .brand {
      display: inline-flex; align-items: center; gap: var(--space-2);
      color: var(--fg); font-weight: 700; font-size: 1.02rem; flex-shrink: 0;
    }
    .brand:hover { color: var(--fg); }
    .brand svg { color: hsl(var(--primary)); }
    .top-nav {
      display: none; flex: 1; justify-content: center; gap: 0.2rem;
    }
    .top-nav a {
      color: hsl(var(--muted-foreground));
      font-size: 0.92rem; font-weight: 550;
      padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm);
      text-align: center; line-height: 1.2; white-space: nowrap;
    }
    .top-nav a:hover { color: var(--fg); background: hsl(var(--muted) / 0.7); }
    .top-nav a.current { color: #fff; background: hsl(var(--primary) / 0.2); }
    .logout { margin-left: auto; }
    .logout button {
      background: transparent; border: 1px solid var(--btn-outline-ghost);
      color: hsl(var(--muted-foreground)); border-radius: var(--radius-sm);
      padding: var(--space-2) var(--space-4); cursor: pointer;
      box-shadow: none;
    }
    .logout button:hover { color: var(--fg); border-color: var(--btn-outline-hover); }
    .page {
      position: relative; z-index: 1; overflow-x: clip;
      padding: var(--space-6) var(--space-4);
    }
    body.auth { min-height: 100vh; display: flex; flex-direction: column; }
    body.auth .page {
      max-width: 28rem; width: 100%;
      margin-top: auto; margin-bottom: auto;
      padding: var(--space-6) var(--space-4); flex: 1 0 auto;
    }
    .page-head { margin-bottom: var(--space-6); }
    .page-head .lead { margin-top: 6px; margin-bottom: 0; }
    .kicker {
      margin: 0 0 6px;
      color: hsl(var(--muted-foreground));
      font-size: 0.76rem; font-weight: 600;
      letter-spacing: 0.08em; text-transform: uppercase;
    }
    .page-title { font-size: clamp(1.55rem, 3.4vw, 2.05rem); margin-bottom: 6px; line-height: 1.2; }
    .page-head .page-title { margin-bottom: 0; }
    .lead { color: hsl(var(--muted-foreground)); margin-bottom: var(--space-5); max-width: 38rem; }
    .card {
      background: hsl(var(--card) / 0.88);
      border: 1px solid hsl(var(--border) / 0.55);
      border-radius: var(--radius);
      padding: var(--card-pad);
      margin-bottom: var(--space-4);
      box-shadow: 0 12px 40px hsl(220 20% 2% / 0.25);
    }
    .card h2 { font-size: 1.08rem; font-weight: 650; margin-bottom: var(--space-4); }
    .stack { display: grid; gap: var(--space-4); }
    @media (min-width: 640px) {
      .card, .sub-card, .auth-card { padding: var(--space-6); }
      body.auth .page { padding-left: var(--space-6); padding-right: var(--space-6); }
    }
    @media (min-width: 768px) {
      .stack-2 { grid-template-columns: 1fr 1fr; }
      .stack { gap: var(--space-6); }
      .card { margin-bottom: var(--space-6); }
      .top-nav { display: flex; }
      .page { padding-bottom: var(--space-8); }
      .site-header .inner {
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: var(--space-4);
      }
      .logout { margin-left: 0; }
    }
    @media (min-width: 1024px) {
      .site-header .inner, .page { padding-left: var(--space-6); padding-right: var(--space-6); }
    }
    .dl { display: grid; gap: var(--space-3); }
    .dl div {
      display: flex; justify-content: space-between; align-items: baseline;
      gap: var(--space-4); font-size: 0.95rem;
      padding-bottom: var(--space-3);
      border-bottom: 1px solid hsl(var(--border) / 0.4);
    }
    .dl div:last-child { padding-bottom: 0; border-bottom: 0; }
    .dl dt { color: hsl(var(--muted-foreground)); }
    .dl dd { margin: 0; font-weight: 550; text-align: right; word-break: break-word; }
    .term-cell { position: relative; display: inline-flex; align-items: center; justify-content: flex-end; gap: 0.4rem; }
    .term-info {
      width: 1.35rem; height: 1.35rem; padding: 0; border-radius: 999px;
      border: 1px solid hsl(var(--border)); background: transparent; color: inherit;
      font: inherit; font-size: 0.78rem; font-weight: 700; line-height: 1;
      cursor: pointer; flex: 0 0 auto;
    }
    .dl .term-pop {
      position: absolute; right: 0; bottom: calc(100% + 0.45rem);
      display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
      gap: 0.5rem; width: min(20rem, calc(100vw - 2.5rem));
      padding: 0.8rem 0.9rem; border-radius: 0.75rem;
      text-align: left; font-weight: 450; word-break: normal; overflow-wrap: break-word;
      font-size: 0.88rem; line-height: 1.45; z-index: 6;
      background: hsl(var(--card)); border: 1px solid hsl(var(--border));
      box-shadow: 0 12px 40px hsl(220 20% 2% / 0.4);
    }
    .term-pop[hidden] { display: none !important; }
    .dl .term-pop p { margin: 0; }
    .dl .term-pop .term-pop-title { font-weight: 650; }
    .dl .term-pop .term-pop-formula { font-variant-numeric: tabular-nums; }
    .badge {
      display: inline-flex; align-items: center;
      font-size: 0.72rem; font-weight: 650; letter-spacing: 0.05em;
      text-transform: uppercase; padding: 0.28rem 0.65rem; border-radius: 9999px;
      background: hsl(var(--muted)); color: hsl(var(--muted-foreground));
      white-space: nowrap;
    }
    .badge-active { background: hsl(var(--success) / 0.18); color: hsl(142 62% 66%); }
    .badge-expired, .badge-none { background: hsl(var(--destructive) / 0.16); color: hsl(0 90% 72%); }
    .sub-head { display: flex; align-items: center; justify-content: space-between; gap: 0.85rem; margin-bottom: 1.15rem; }
    .sub-head h2 { margin: 0; font-size: 1.2rem; }
    .sub-meta { margin-bottom: 1.2rem; }
    .usage-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.85rem 1.2rem;
      margin-bottom: 1.2rem;
    }
    .usage-value {
      margin: 0;
      font-size: 1.05rem;
      font-weight: 650;
      font-variant-numeric: tabular-nums;
      line-height: 1.35;
    }
    .usage-value.is-pending { color: hsl(var(--muted-foreground)); font-weight: 550; }
    .sub-expiry {
      font-size: clamp(1.35rem, 3vw, 1.7rem);
      font-weight: 700; letter-spacing: -0.035em;
      font-variant-numeric: tabular-nums;
      line-height: 1.25;
    }
    .key-row--solo { margin-top: 0.65rem; }
    .key-devices-btn { min-width: 7.4rem; }
    .btn-copy {
      width: 10.5rem; min-width: 10.5rem; flex: 0 0 10.5rem;
      white-space: nowrap;
    }
    .connect-block {
      display: flex; flex-direction: column; align-items: stretch;
      gap: var(--space-3);
    }
    .connect-block .btn,
    .auth-card .btn { width: 100%; min-width: 0; white-space: nowrap; }
    .device-tools .btn { white-space: normal; }
    .pay-actions .btn { white-space: normal; }
    .muted { color: hsl(var(--muted-foreground)); font-size: 0.92rem; }
    .error, .notice {
      border-radius: 0.75rem; padding: 0.8rem 0.95rem; margin: 0 0 1rem;
    }
    .error {
      color: hsl(0 90% 78%);
      background: hsl(var(--destructive) / 0.12);
      border: 1px solid hsl(var(--destructive) / 0.28);
    }
    .notice {
      color: hsl(142 60% 70%);
      background: hsl(var(--success) / 0.12);
      border: 1px solid hsl(var(--success) / 0.28);
    }
    .toast-modal[hidden] { display: none !important; }
    .toast-modal {
      position: fixed; inset: 0; z-index: 80;
      display: flex; align-items: center; justify-content: center;
      padding: 1.25rem;
      background: hsl(220 20% 2% / 0.62);
    }
    .toast-card {
      position: relative;
      width: min(26rem, 100%);
      padding: 1.35rem 2.75rem 1.35rem 1.2rem;
      border-radius: 0.9rem;
      color: hsl(142 55% 78%);
      background: hsl(142 32% 16%);
      border: 1px solid hsl(var(--success) / 0.55);
      box-shadow: 0 18px 50px hsl(220 20% 2% / 0.45);
    }
    .toast-card p { margin: 0; font-size: 1.02rem; line-height: 1.45; }
    .toast-guide { margin-top: 0.85rem; }
    .toast-links { margin: 0.55rem 0 0; padding: 0; list-style: none; }
    .toast-links a {
      display: inline-block; margin: 0.2rem 0; color: #fff; font-weight: 600;
    }
    .toast-links a:hover { color: hsl(142 70% 82%); }
    .toast-close {
      position: absolute; top: 0.45rem; right: 0.45rem;
      width: 2rem; height: 2rem; padding: 0;
      border: 0; border-radius: 0.5rem;
      background: transparent; color: hsl(142 45% 82%);
      font-size: 1.45rem; line-height: 1; cursor: pointer;
    }
    .toast-close:hover { background: hsl(142 30% 24%); color: #fff; }
    .limit-anchor { position: relative; }
    .limit-anchor.has-toast > .card { padding-top: 4.75rem; }
    .limit-toast {
      position: absolute; z-index: 2;
      top: 0.75rem; left: 0.75rem; right: 0.75rem;
      padding: 0.85rem 2.5rem 0.85rem 1rem;
      border-radius: 0.9rem;
      color: hsl(142 55% 78%);
      background: hsl(142 32% 16%);
      border: 1px solid hsl(var(--success) / 0.55);
      box-shadow: 0 12px 32px hsl(220 20% 2% / 0.35);
      animation: limit-toast-in 0.18s ease-out;
    }
    .limit-toast p { margin: 0; font-size: 1.02rem; line-height: 1.45; }
    @keyframes limit-toast-in {
      from { opacity: 0; transform: translateY(-0.35rem); }
      to { opacity: 1; transform: none; }
    }
    .btn-row { display: flex; justify-content: center; gap: 0.65rem; flex-wrap: wrap; margin-top: 1rem; }
    .btn-row .btn, .btn-row button { margin: 0; width: auto; }
    .rename-actions { flex-wrap: nowrap; align-items: stretch; }
    .rename-actions .btn,
    .rename-actions button {
      flex: 1 1 0;
      width: 100%;
      min-width: 0;
      white-space: nowrap;
    }
    label { display: block; margin: var(--space-4) 0 var(--space-2); font-size: 0.88rem; font-weight: 550; color: hsl(var(--muted-foreground)); }
    input[type="email"], input[type="password"], input[type="text"], textarea {
      width: 100%; max-width: 100%; min-width: 0;
      font-size: 16px;
      background: hsl(var(--muted) / 0.55);
      border: 1px solid hsl(var(--input)); border-radius: var(--radius-md);
      padding: var(--space-3) var(--space-4); outline: none;
    }
    textarea { min-height: 7.5rem; resize: vertical; }
    input:focus, textarea:focus { border-color: hsl(var(--ring)); box-shadow: 0 0 0 3px hsl(var(--ring) / 0.22); }
    .key-box { margin-top: 0.25rem; }
    .referral-card .dl { margin-top: 0; }
    .referral-card .key-box label { color: #fff; }
    .referral-card .key-row { gap: 0.9rem; }
    .referral-card .key-box + label { margin-top: 1.35rem; }
    .referral-card textarea + .cta { margin-top: 0.85rem; }
    .referral-card .cta .btn { width: 100%; }
    .referral-card .share-text {
      display: block;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      min-height: 0;
      height: auto;
      resize: none;
      overflow: hidden;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
      word-break: break-word;
      line-height: 1.5;
    }
    .key-row { display: flex; gap: var(--space-2); align-items: stretch; }
    .key-row input {
      flex: 1 1 auto; min-width: 0;
      font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 0.78rem; letter-spacing: -0.01em;
    }
    .btn, button[type="submit"], .key-row button, .key-row a.btn {
      display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
      background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
      border: 0; border-radius: var(--radius-sm);
      min-height: 44px;
      padding: var(--space-2) var(--space-4); font-weight: 600; cursor: pointer; text-align: center;
      box-shadow: inset 0 0 0 1px var(--btn-outline);
    }
    .btn:hover, button[type="submit"]:hover, .key-row button:hover, .key-row a.btn:hover {
      background: hsl(var(--primary) / 0.9); color: #fff;
      box-shadow: inset 0 0 0 1px var(--btn-outline-hover);
    }
    .key-row button, .key-row a.btn { flex: 0 0 auto; min-width: 7.4rem; }
    .key-row button.btn-ghost,
    .key-row a.btn.btn-ghost {
      background: hsl(var(--card)); color: var(--fg);
      border: 1px solid var(--btn-outline-ghost);
      box-shadow: none;
    }
    .key-row button.btn-ghost:hover,
    .key-row a.btn.btn-ghost:hover {
      background: hsl(var(--muted)); color: var(--fg);
      border-color: var(--btn-outline-hover);
      box-shadow: none;
    }
    .qr-modal[hidden] { display: none; }
    .qr-modal {
      position: fixed; inset: 0; z-index: 85;
      display: flex; align-items: center; justify-content: center;
      padding: 1.25rem;
      background: hsl(220 20% 2% / 0.62);
    }
    .qr-card {
      position: relative;
      width: min(26rem, 100%);
      padding: 1.15rem 0.9rem 1.05rem;
      border-radius: 0.9rem;
      background: hsl(var(--card));
      border: 1px solid hsl(var(--border) / 0.7);
      text-align: center;
      box-shadow: 0 18px 50px hsl(220 20% 2% / 0.45);
    }
    .qr-card h2 { margin: 0 0 0.7rem; font-size: 1.15rem; }
    .qr-frame {
      display: flex;
      align-items: center;
      justify-content: center;
      width: min(19rem, 100%);
      aspect-ratio: 1;
      margin: 0 auto;
      padding: 0.4rem;
      box-sizing: border-box;
      overflow: hidden;
      background: #fff;
      border-radius: 0.7rem;
      line-height: 0;
    }
    .qr-card .qr-frame {
      width: 100%;
      padding: 0.28rem;
      border-radius: 0.4rem;
    }
    .qr-frame svg {
      display: block;
      width: 100%;
      height: 100%;
      shape-rendering: crispEdges;
    }
    .qr-card .muted { margin: 0.95rem 0 0; }
    .qr-close {
      position: absolute; top: 0.4rem; right: 0.4rem;
      width: 2rem; height: 2rem; padding: 0;
      border: 0; border-radius: 0.5rem;
      background: transparent; color: hsl(var(--muted-foreground));
      font-size: 1.45rem; line-height: 1; cursor: pointer;
    }
    .qr-close:hover { background: hsl(var(--muted)); color: var(--fg); }
    @media (max-width: 520px) {
      .usage-grid { grid-template-columns: 1fr; }
      .key-row { flex-direction: column; gap: var(--space-3); }
      .key-row button,
      .key-row a.btn,
      .connect-block .btn {
        width: 100%; min-width: 0; flex: 1 1 auto;
      }
    }
    .auth-card button[type="submit"] { width: 100%; margin-top: var(--space-4); }
    .btn-ghost, .pay-methods button {
      background: hsl(var(--card)); color: var(--fg);
      border: 1px solid var(--btn-outline-ghost);
      box-shadow: none;
    }
    .btn-ghost:hover, .pay-methods button:hover {
      background: hsl(var(--muted)); border-color: var(--btn-outline-hover); color: var(--fg);
      box-shadow: none;
    }
    button.btn-danger, .btn-danger {
      background: hsl(var(--destructive));
      color: #fff;
      box-shadow: inset 0 0 0 1px hsl(0 0% 100% / 0.14);
    }
    button.btn-danger:hover, .btn-danger:hover {
      background: hsl(var(--destructive) / 0.88);
      color: #fff;
      box-shadow: inset 0 0 0 1px hsl(0 0% 100% / 0.22);
    }
    .logout button {
      width: auto; margin: 0;
      background: transparent; border: 1px solid var(--btn-outline-ghost);
      color: hsl(var(--muted-foreground));
      box-shadow: none;
    }
    .logout button:hover { background: transparent; color: var(--fg); border-color: var(--btn-outline-hover); }
    .auth-card { text-align: left; }
    .auth-card .brand { margin-bottom: var(--space-6); font-size: 1.12rem; }
    .auth-card .page-title { margin-bottom: 6px; }
    .auth-hero { text-align: center; }
    .auth-hero .brand { justify-content: center; margin-left: auto; margin-right: auto; }
    .auth-hero .lead, .auth-hero .muted, .auth-hero .error {
      margin-left: auto; margin-right: auto;
    }
    .auth-hint { margin-top: 0.7rem; max-width: 22rem; }
    .auth-hero .cta { margin: 0.85rem 0 0; }
    .link-row { margin-top: 1.15rem; text-align: center; font-size: 0.9rem; }
    .auth-divider {
      display: flex; align-items: center; gap: 0.75rem;
      margin: 1.35rem 0 0.2rem;
      color: hsl(var(--muted-foreground));
      font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase;
    }
    .auth-divider::before, .auth-divider::after {
      content: ""; flex: 1; height: 1px;
      background: hsl(var(--border) / 0.75);
    }
    .tg-form { display: flex; justify-content: center; }
    .tg-choices { flex-direction: column; align-items: center; gap: 0.55rem; }
    .auth-card .tg-form button[type="submit"] {
      width: min(18rem, 100%); min-width: 0; margin-top: 0;
    }
    .promo-form button[type="submit"] { width: 100%; margin-top: 1rem; }
    .stack-form { display: flex; flex-direction: column; align-items: stretch; }
    .stack-form input[type="email"],
    .stack-form input[type="password"],
    .stack-form input[type="text"] { display: block; width: 100%; }
    .stack-form button[type="submit"] {
      display: flex; width: 100%; margin-top: 1rem;
    }
    .password-field { position: relative; display: block; width: 100%; }
    .password-field input { padding-right: 2.75rem; }
    .password-field input::-ms-reveal,
    .password-field input::-ms-clear { display: none; }
    button.password-toggle {
      position: absolute; right: 0.28rem; top: 50%; transform: translateY(-50%);
      width: 2.2rem; height: 2.2rem; margin: 0; padding: 0;
      border: 0; border-radius: 0.45rem; background: transparent;
      color: hsl(var(--muted-foreground)); box-shadow: none; cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center;
    }
    button.password-toggle:hover { color: var(--fg); background: transparent; }
    .password-toggle svg { width: 1.25rem; height: 1.25rem; display: block; }
    .password-toggle .eye-shut { display: none; }
    .password-toggle.is-open .eye-open { display: none; }
    .password-toggle.is-open .eye-shut { display: block; }
    .resend-wait {
      display: flex; align-items: center; justify-content: center;
      width: 100%; box-sizing: border-box; margin-top: 1rem;
      padding: 0.72rem 1.05rem; border-radius: 0.7rem;
      border: 1px solid var(--btn-outline-ghost); background: hsl(var(--card));
      color: var(--fg); font-weight: 650; font-variant-numeric: tabular-nums;
      letter-spacing: 0.04em;
    }
    .resend-wait[hidden], #resend-form[hidden] { display: none !important; }
    .trial-card {
      display: flex; flex-direction: column; align-items: center;
      text-align: center; gap: 0.95rem;
    }
    .trial-card h2 { margin: 0 0 0.3rem; }
    .trial-card .muted { max-width: 24rem; }
    .trial-form { margin: 0; display: flex; width: 100%; justify-content: stretch; }
    .trial-form button[type="submit"] { width: 100%; min-width: 0; margin: 0; }
    .home-bind .muted { margin-bottom: 0.95rem; }
    .home-bind .btn,
    .trial-card--prominent .trial-form button[type="submit"] {
      width: 100%;
      min-width: 0;
      white-space: nowrap;
    }
    .home-bind .btn { display: flex; }
    .trial-card--prominent .trial-form { width: 100%; justify-content: stretch; }
    .btn-trial-prominent, button.btn-trial-prominent[type="submit"] {
      background: hsl(142 56% 44%);
      color: #fff;
      box-shadow: inset 0 0 0 1px hsl(0 0% 100% / 0.18);
    }
    .btn-trial-prominent:hover, button.btn-trial-prominent[type="submit"]:hover {
      background: hsl(142 56% 39%);
      color: #fff;
      box-shadow: inset 0 0 0 1px hsl(0 0% 100% / 0.24);
    }
    .page-head-center { text-align: center; }
    .page-head-center .lead { margin-left: auto; margin-right: auto; }
    .confirm-card { text-align: center; }
    .confirm-card p { max-width: 36rem; margin-left: auto; margin-right: auto; }
    .confirm-card .dl { text-align: left; margin-top: 0.35rem; }
    .return-card { text-align: center; }
    .return-card .muted { margin-left: auto; margin-right: auto; }
    .subheading { font-size: 0.98rem; font-weight: 650; margin: var(--space-6) 0 var(--space-3); }
    .tariff-intro { margin: 0 0 var(--space-4); }
    .tariff-list {
      list-style: none; padding: 0; margin: 0 0 var(--space-4);
      display: grid; gap: var(--space-3);
      grid-template-columns: 1fr;
    }
    @media (min-width: 640px) { .tariff-list { grid-template-columns: 1fr 1fr; } }
    .tariff-list a,
    .tariff-list button {
      display: flex; flex-direction: column; gap: 0.28rem;
      width: 100%; box-sizing: border-box; text-align: left; cursor: pointer;
      padding: var(--card-pad); color: var(--fg);
      background: hsl(var(--card) / 0.88);
      border: 1px solid hsl(var(--border) / 0.55);
      border-radius: var(--radius);
      min-height: 5.4rem; justify-content: center;
      font: inherit;
    }
    .tariff-list a:hover,
    .tariff-list button:hover { border-color: hsl(var(--primary) / 0.55); color: var(--fg); background: hsl(var(--primary) / 0.08); }
    .tariff-list .days { font-size: 1.22rem; font-weight: 700; }
    .tariff-list .price { color: hsl(210 80% 72%); font-size: 1.05rem; font-weight: 650; }
    .device-options {
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-3);
      margin-bottom: 0;
    }
    @media (min-width: 640px) { .device-options { grid-template-columns: repeat(5, 1fr); } }
    .device-options a {
      align-items: center;
      justify-content: center;
      text-align: center;
      min-height: 3.6rem;
      padding: 0.75rem 0.45rem;
      gap: 0.12rem;
    }
    .device-options .days {
      font-size: 1.22rem;
      line-height: 1.15;
      font-variant-numeric: tabular-nums;
    }
    .device-options .price { font-size: 0.92rem; white-space: nowrap; }
    .connect-block .btn,
    .home-bind .btn,
    .auth-card .btn,
    .trial-form button[type="submit"],
    .key-row button,
    .key-row a.btn,
    .referral-card .cta .btn,
    .pay-actions .btn,
    .pay-methods button,
    .pay-methods .btn,
    .device-tools .btn,
    .reissue-bar .btn,
    .stack-form button[type="submit"],
    .promo-form button[type="submit"],
    .auth-card button[type="submit"],
    .cta-buy .btn {
      border-radius: var(--radius);
      padding: 14px var(--space-4);
      min-height: 44px;
    }
    .pay-methods { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
    .pay-methods button, .pay-methods .btn { width: 100%; margin: 0; }
    .table-wrap { overflow-x: auto; margin: 0 -0.15rem; }
    table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
    th, td { text-align: left; padding: 0.7rem 0.4rem; border-bottom: 1px solid hsl(var(--border) / 0.45); vertical-align: top; }
    th { color: hsl(var(--muted-foreground)); font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; }
    .promo-applied td { color: hsl(var(--muted-foreground)); }
    .rules-list { margin: 0; padding-left: 1.15rem; display: grid; gap: 0.85rem; }
    .rules-list li { padding-left: 0.15rem; }
    .help-docs { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.65rem; }
    .help-docs a { font-weight: 550; }
    .help-links {
      display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 1.15rem;
      margin: 0.15rem 0 0.4rem;
    }
    .profile-hero {
      display: flex; align-items: center; gap: 1rem;
      padding: 1.35rem 1.3rem;
    }
    .profile-avatar {
      flex: 0 0 auto;
      width: 3.4rem; height: 3.4rem;
      display: grid; place-items: center;
      border-radius: 9999px;
      background: hsl(var(--primary) / 0.2);
      color: hsl(210 90% 78%);
      font-size: 1.35rem; font-weight: 700;
      text-transform: uppercase;
    }
    .profile-id h2 { margin: 0; font-size: 1.28rem; letter-spacing: -0.02em; }
    .profile-id .muted { margin: 0.15rem 0 0; }
    .profile-card h2 { margin-bottom: 0.35rem; }
    .profile-facts { display: grid; gap: 0; margin: 0.35rem 0 0; }
    .profile-facts div {
      display: flex; justify-content: space-between; align-items: baseline;
      gap: 1rem; padding: 0.8rem 0;
      border-bottom: 1px solid hsl(var(--border) / 0.45);
    }
    .profile-facts div:last-child { border-bottom: 0; padding-bottom: 0.15rem; }
    .profile-facts dt { color: hsl(var(--muted-foreground)); font-size: 0.92rem; }
    .profile-facts dd {
      margin: 0; font-weight: 600; text-align: right;
      word-break: break-word; font-variant-numeric: tabular-nums;
    }
    .email-row {
      display: inline-flex; align-items: center; justify-content: flex-end;
      gap: 0.65rem; flex-wrap: wrap;
    }
    .btn-inline {
      padding: 0.38rem 0.72rem; font-size: 0.84rem; border-radius: 0.6rem;
      white-space: nowrap;
    }
    .profile-facts div.profile-notify { align-items: center; }
    .profile-notify dt { line-height: 1.2; }
    .profile-notify dd { display: flex; align-items: center; justify-content: flex-end; }
    .profile-notify form { display: flex; align-items: center; margin: 0; }
    button.switch {
      position: relative; display: block;
      width: 3.25rem; height: 1.95rem;
      min-width: 3.25rem; min-height: 1.95rem; max-height: 1.95rem;
      padding: 0;
      border: 0; border-radius: 999px; flex: 0 0 auto;
      background: hsl(215 8% 32%); color: inherit;
      box-shadow: none; cursor: pointer;
    }
    button.switch:hover { background: hsl(215 8% 38%); color: inherit; box-shadow: none; }
    button.switch.is-on,
    button.switch.is-on:hover { background: hsl(var(--primary)); }
    button.switch .switch-knob {
      position: absolute; top: 0.16rem; left: 0.16rem;
      width: 1.63rem; height: 1.63rem; border-radius: 999px; background: #fff;
      transition: transform 0.15s ease;
    }
    button.switch.is-on .switch-knob { transform: translateX(1.3rem); }
    .code-tap {
      display: inline-block; margin: 0; padding: 0.15rem 0.2rem;
      border: 0; background: transparent; cursor: pointer;
      font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 2rem; font-weight: 700; letter-spacing: 0.28em;
      color: var(--fg);
    }
    .profile-card { padding-top: 0; padding-bottom: 0; }
    .profile-account { padding-top: var(--space-6); padding-bottom: var(--space-6); }
    .bonus-account .dl { margin: 0; }
    .bonus-confirm { padding-top: var(--space-4); padding-bottom: var(--space-4); }
    .bonus-confirm .dl { margin: 0; }
    .bonus-empty { margin-top: var(--space-4); }
    .profile-menu { display: grid; margin: 0; }
    .profile-menu a {
      display: flex; align-items: center; justify-content: space-between;
      gap: var(--space-3); min-height: 44px;
      padding: var(--space-4) 0;
      color: var(--fg); font-weight: 550;
      border-bottom: 1px solid hsl(var(--border) / 0.45);
    }
    .profile-menu a:last-child { border-bottom: 0; }
    .profile-menu a:hover { color: hsl(210 90% 78%); }
    .profile-chev {
      width: 0.45rem; height: 0.45rem; flex: 0 0 auto;
      border-right: 2px solid hsl(var(--muted-foreground));
      border-bottom: 2px solid hsl(var(--muted-foreground));
      transform: rotate(-45deg);
      margin-right: 0.2rem;
    }
    .help-footer {
      position: relative; z-index: 1;
      display: flex; justify-content: center; gap: 1.15rem; flex-wrap: wrap;
      padding: 0 var(--space-4) calc(var(--nav-bar) + env(safe-area-inset-bottom, 0px) + var(--space-3)); font-size: 0.86rem;
    }
    .help-footer a { color: hsl(var(--muted-foreground)); }
    .help-footer a:hover, .help-footer a.current { color: hsl(var(--primary)); }
    @media (min-width: 768px) { .help-footer { padding-bottom: var(--space-8); } }
    .legal-footer {
      position: relative; z-index: 1; margin-top: auto;
      display: flex; flex-direction: column; align-items: center;
      gap: 0.35rem; padding: 0.35rem 1.15rem 1.45rem;
      font-size: 0.72rem; line-height: 1.45; text-align: center;
    }
    .legal-footer a { color: hsl(var(--muted-foreground) / 0.72); }
    .legal-footer a:hover { color: hsl(215 10% 70%); }
    select {
      width: 100%; background: hsl(var(--muted) / 0.55);
      border: 1px solid hsl(var(--input)); border-radius: var(--radius-md);
      padding: var(--space-3) var(--space-4); outline: none;
    }
    label.check { display: flex; align-items: center; gap: 0.55rem; }
    label.check input { width: auto; }
    button.btn-ghost[type="submit"] {
      background: hsl(var(--card)); color: var(--fg); border: 1px solid var(--btn-outline-ghost);
      box-shadow: none;
    }
    button.btn-ghost[type="submit"]:hover {
      background: hsl(var(--muted)); color: var(--fg);
      border-color: var(--btn-outline-hover);
      box-shadow: none;
    }
    .header-admin {
      color: hsl(var(--muted-foreground)); font-size: 0.88rem; font-weight: 650;
      padding: 0.42rem 0.55rem; border-radius: 0.55rem;
    }
    .header-admin:hover, .header-admin.current { color: var(--fg); background: hsl(var(--muted) / 0.7); }
    .logout { display: flex; align-items: center; gap: 0.35rem; }
    body.admin-open .page { max-width: 72rem; }
    .admin-grid, .admin-list { display: grid; gap: var(--space-3); }
    @media (min-width: 720px) { .admin-grid { grid-template-columns: 1fr 1fr; } }
    .admin-grid a, .admin-list a {
      display: flex; align-items: center; min-height: 44px; padding: var(--space-3) var(--space-4);
      color: var(--fg); font-weight: 550; background: hsl(var(--card) / 0.88);
      border: 1px solid hsl(var(--border) / 0.55); border-radius: var(--radius);
    }
    .admin-grid a:hover, .admin-list a:hover {
      color: var(--fg); border-color: hsl(var(--primary) / 0.5); background: hsl(var(--primary) / 0.1);
    }
    .pager { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0; }
    .pager .btn { width: auto; }
    pre.card, pre.history { white-space: pre-wrap; font: inherit; margin: 0; }
    .tg-report { line-height: 1.55; }
    code { font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.85em; }
    .status-paid { color: hsl(142 60% 66%); font-weight: 600; }
    .status-cancel { color: hsl(0 90% 72%); font-weight: 600; }
    .status-wait { color: hsl(38 90% 64%); font-weight: 600; }
    .cta {
      margin: 0.15rem 0 1.2rem;
      display: flex; justify-content: center; flex-wrap: wrap; gap: 0.65rem;
      text-align: center;
    }
    .cta .btn, .cta button { width: auto; margin: 0; padding: 0.8rem 1.2rem; }
    .cta-buy { width: 100%; }
    .cta-buy .btn {
      width: 100%; min-width: 0;
      border-radius: var(--radius);
      padding: 14px var(--space-4);
    }
    .reissue-bar { margin: 1rem 0 0; }
    .reissue-bar .btn { width: 100%; }
    .device-list { display: grid; gap: 0.65rem; }
    .device-card { padding: 0.85rem 1rem 0.75rem; }
    .device-head {
      display: flex; align-items: center; justify-content: space-between;
      gap: 0.7rem; margin-bottom: 0.5rem;
    }
    .device-head h2 {
      margin: 0; min-width: 0; font-size: 0.98rem; font-weight: 650;
      display: flex; align-items: baseline; gap: 0.5rem; line-height: 1.3;
    }
    .device-num {
      flex: 0 0 auto; min-width: 1rem;
      color: hsl(var(--muted-foreground));
      font-variant-numeric: tabular-nums; font-weight: 700;
    }
    .device-actions { display: flex; gap: 0.4rem; flex: 0 0 auto; }
    .device-head .btn, .device-actions .btn {
      flex: 0 0 auto; width: auto; margin: 0;
      padding: 0.38rem 0.72rem; font-size: 0.8rem;
      border-radius: var(--radius-sm);
    }
    @media (max-width: 520px) {
      .device-head { align-items: flex-start; flex-wrap: wrap; }
      .device-actions { width: 100%; }
      .device-actions .btn { flex: 1 1 auto; }
    }
    .device-meta { gap: 0.22rem; }
    .device-meta div {
      padding-bottom: 0.22rem; font-size: 0.8rem; gap: 0.55rem;
    }
    .device-meta dt { font-size: 0.76rem; }
    .device-meta dd { font-weight: 500; }
    .return-state { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.45rem; }
    .mobile-nav {
      position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
      display: flex; justify-content: space-around; align-items: stretch;
      min-height: calc(var(--nav-bar) + env(safe-area-inset-bottom, 0px));
      padding: var(--space-2) var(--space-2) env(safe-area-inset-bottom, 0px);
      border-top: 1px solid hsl(var(--border) / 0.45);
      background: hsl(var(--background) / 0.9);
      backdrop-filter: blur(18px);
    }
    @supports (-webkit-touch-callout: none) {
      .mobile-nav {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: hsl(var(--background));
      }
    }
    .mobile-nav a {
      flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: var(--space-1); color: hsl(var(--muted-foreground)); font-size: 0.68rem; font-weight: 550;
      line-height: 1.15; text-align: center; padding: 0 0.2rem;
    }
    .mobile-nav a.current { color: hsl(210 80% 74%); }
    .mobile-nav svg { width: 1.28rem; height: 1.28rem; }
    @media (min-width: 768px) { .mobile-nav { display: none; } }
    .install-banner {
      position: fixed; z-index: 90;
      left: var(--space-4); right: var(--space-4);
      bottom: calc(var(--nav-bar) + env(safe-area-inset-bottom, 0px) + var(--space-3));
      display: none;
      padding: 1rem 2.6rem 0.95rem 1rem;
      border-radius: 1.15rem;
      color: #f4f7fb;
      background: linear-gradient(180deg, hsl(220 18% 28% / 0.55), hsl(220 16% 12% / 0.42));
      border: 1px solid hsl(0 0% 100% / 0.18);
      box-shadow: 0 18px 50px hsl(220 30% 2% / 0.42), inset 0 1px 0 hsl(0 0% 100% / 0.22);
      backdrop-filter: blur(22px) saturate(1.6);
      -webkit-backdrop-filter: blur(22px) saturate(1.6);
      pointer-events: auto;
    }
    @supports (-webkit-touch-callout: none) {
      .install-banner {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: hsl(220 16% 14% / 0.96);
      }
    }
    .install-banner.is-visible { display: block; }
    .install-banner p {
      margin: 0 0 0.85rem;
      font-weight: 600;
      line-height: 1.35;
      color: #f4f7fb;
    }
    .install-banner-actions { display: flex; gap: var(--space-2); }
    .install-banner button {
      -webkit-appearance: none;
      appearance: none;
      touch-action: manipulation;
      margin: 0;
      cursor: pointer;
      font: inherit;
    }
    .install-banner button.install-primary,
    .install-banner button.install-quiet {
      flex: 1 1 0;
      min-height: 44px;
      padding: var(--space-2) var(--space-4);
      white-space: normal;
      border-radius: var(--radius-sm);
      font-weight: 650;
    }
    .install-banner button.install-primary {
      background: hsl(var(--primary));
      color: #fff;
      border: 0;
      box-shadow: inset 0 0 0 1px var(--btn-outline);
    }
    .install-banner button.install-quiet {
      background: hsl(0 0% 100% / 0.1);
      color: #f4f7fb;
      border: 1px solid hsl(0 0% 100% / 0.2);
    }
    .install-banner button.install-close {
      position: absolute; top: 0.45rem; right: 0.45rem;
      width: 2.25rem; height: 2.25rem; padding: 0;
      border: 0; border-radius: 999px;
      background: hsl(0 0% 100% / 0.12);
      color: #fff;
      font-size: 1.35rem; line-height: 1;
    }
    body.auth .install-banner { bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); }
    @media (min-width: 768px) {
      .install-banner {
        left: auto; width: min(24rem, calc(100% - 2rem)); right: 1.15rem;
        bottom: 1.15rem;
      }
    }