/* ============================================================
   Shared theme for every JPA page: tokens for the four themes,
   base elements, buttons, fields, status pills, dialogs, toast.
   Public site and the member/office app both load this file.
   ============================================================ */

    /* ============================================================
   Jharkhand Photographic Association
   Four themes, one token set. Every colour below is a variable,
   so the switcher swaps a whole look without touching layout.
   Green always means verified, amber waiting, red refused.
   ============================================================ */

    /* ---------- structure tokens (same in every theme) ---------- */
    :root {
      --radius-sm: 10px;
      --radius: 14px;
      --radius-lg: 20px;
      --pill: 999px;
      --shell: 1220px;
      --nav-h: 72px;
      --t1: clamp(.78rem, .755rem + .12vw, .85rem);
      --t2: clamp(.875rem, .85rem + .12vw, .95rem);
      --t3: clamp(.95rem, .92rem + .18vw, 1.06rem);
      --t4: clamp(1.08rem, 1.02rem + .3vw, 1.3rem);
      --h4: clamp(1.15rem, 1.07rem + .4vw, 1.4rem);
      --h3: clamp(1.35rem, 1.2rem + .7vw, 1.85rem);
      --h2: clamp(1.8rem, 1.45rem + 1.6vw, 2.85rem);
      --h1: clamp(2.1rem, 1.5rem + 3.2vw, 3.95rem);
    }

    /* ---------- 1. earth: Jharkhand maroon on cream (default) ---------- */
    [data-theme="earth"] {
      color-scheme: light;
      --bg: #FDF6EC;
      --canvas: radial-gradient(900px 520px at 82% -10%, rgba(110, 27, 27, .10), transparent 58%),
        radial-gradient(720px 460px at 0% 10%, rgba(193, 102, 47, .12), transparent 58%);
      --grid: rgba(110, 27, 27, .055);
      --grid-op: .8;
      --surface: #FFFDF8;
      --surface-2: #F6EADA;
      --surface-3: #EFDFC9;
      --border: #E7D8C2;
      --border-strong: #D0B695;
      --ink: #2A1A15;
      --ink-strong: #1A0F0B;
      --muted: #6B564C;
      --faint: #95796B;
      --primary: #6E1B1B;
      --accent: #C1662F;
      --grad: linear-gradient(135deg, #6E1B1B 0%, #C1662F 100%);
      --grad-soft: linear-gradient(135deg, rgba(110, 27, 27, .12), rgba(193, 102, 47, .12));
      --on-primary: #FFF7EE;
      --verified: #2E7D32;
      --verified-bg: #E9F3E7;
      --verified-line: #BCD9BA;
      --verified-btn: linear-gradient(135deg, #2E7D32, #3E9D45);
      --on-verified: #FFFFFF;
      --pending: #A05A00;
      --pending-bg: #FBEEDB;
      --pending-line: #EBD2A9;
      --refuse: #A82A20;
      --refuse-bg: #FAE9E7;
      --refuse-line: #EBC6C1;
      --nav-bg: rgba(253, 246, 236, .92);
      --foot-bg: #F6EADA;
      --sheet-bg: #FFFDF8;
      --card-bg: linear-gradient(160deg, #FFFDF8, #F7EEDF);
      --console-bg: #F6EADA;
      --field-bg: #FFFFFF;
      --field-focus: rgba(110, 27, 27, .06);
      --shadow-md: 0 10px 26px rgba(75, 35, 20, .12);
      --shadow-lg: 0 26px 60px rgba(75, 35, 20, .18);
      --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B564C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
      --av1: linear-gradient(145deg, #6E1B1B, #A33B2A);
      --av2: linear-gradient(145deg, #C1662F, #E08B4C);
      --av3: linear-gradient(145deg, #2E7D32, #4EA352);
      --av4: linear-gradient(145deg, #8A4B12, #C1852F);
      --av5: linear-gradient(145deg, #7A2E3C, #A85263);
      --av6: linear-gradient(145deg, #4A5D23, #748A3C);
    }

    /* ---------- 2. paper: light premium, the logo's own red and blue ---------- */
    [data-theme="paper"] {
      color-scheme: light;
      --bg: #FBFAF7;
      --canvas: radial-gradient(900px 520px at 80% -10%, rgba(21, 87, 176, .10), transparent 60%),
        radial-gradient(760px 460px at 2% 6%, rgba(198, 40, 40, .07), transparent 58%);
      --grid: rgba(26, 29, 33, .045);
      --grid-op: .7;
      --surface: #FFFFFF;
      --surface-2: #F4F3EE;
      --surface-3: #EBE9E1;
      --border: #E4E1D8;
      --border-strong: #CCC7BA;
      --ink: #1A1D21;
      --ink-strong: #0B0D10;
      --muted: #5B6672;
      --faint: #8B939D;
      --primary: #1557B0;
      --accent: #C62828;
      --grad: linear-gradient(135deg, #C62828 0%, #1557B0 100%);
      --grad-soft: linear-gradient(135deg, rgba(198, 40, 40, .10), rgba(21, 87, 176, .10));
      --on-primary: #FFFFFF;
      --verified: #1F7A32;
      --verified-bg: #E8F4E9;
      --verified-line: #B7DCBC;
      --verified-btn: linear-gradient(135deg, #1F7A32, #2E9C45);
      --on-verified: #FFFFFF;
      --pending: #A25B00;
      --pending-bg: #FDF1DF;
      --pending-line: #F0D6AC;
      --refuse: #BE2626;
      --refuse-bg: #FBEBEB;
      --refuse-line: #EFC9C9;
      --nav-bg: rgba(251, 250, 247, .9);
      --foot-bg: #F4F3EE;
      --sheet-bg: #FFFFFF;
      --card-bg: linear-gradient(160deg, #FFFFFF, #F7F6F1);
      --console-bg: #F4F3EE;
      --field-bg: #FFFFFF;
      --field-focus: rgba(21, 87, 176, .07);
      --shadow-md: 0 10px 26px rgba(20, 25, 35, .09);
      --shadow-lg: 0 26px 60px rgba(20, 25, 35, .14);
      --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6672' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
      --av1: linear-gradient(145deg, #1557B0, #3B82C4);
      --av2: linear-gradient(145deg, #C62828, #E05252);
      --av3: linear-gradient(145deg, #1F7A32, #3FA352);
      --av4: linear-gradient(145deg, #4B3FA8, #6E62CF);
      --av5: linear-gradient(145deg, #0E6E78, #2A97A1);
      --av6: linear-gradient(145deg, #8A4B12, #B87333);
    }

    /* ---------- 3. emerald: a registered body, gold on deep green ---------- */
    [data-theme="emerald"] {
      color-scheme: dark;
      --bg: #08231B;
      --canvas: radial-gradient(900px 520px at 80% -10%, rgba(212, 175, 55, .16), transparent 60%),
        radial-gradient(760px 460px at 4% 8%, rgba(16, 110, 80, .30), transparent 60%);
      --grid: rgba(212, 175, 55, .06);
      --grid-op: .6;
      --surface: rgba(12, 48, 36, .88);
      --surface-2: rgba(255, 255, 255, .055);
      --surface-3: rgba(255, 255, 255, .085);
      --border: rgba(212, 175, 55, .2);
      --border-strong: rgba(212, 175, 55, .42);
      --ink: #E9F3EC;
      --ink-strong: #FFFFFF;
      --muted: #A5C3B2;
      --faint: #80A08E;
      --primary: #D4AF37;
      --accent: #E8C766;
      --grad: linear-gradient(135deg, #E8C766 0%, #B98C1F 100%);
      --grad-soft: linear-gradient(135deg, rgba(212, 175, 55, .2), rgba(212, 175, 55, .08));
      --on-primary: #0A2A1F;
      --verified: #4ADE80;
      --verified-bg: rgba(74, 222, 128, .14);
      --verified-line: rgba(74, 222, 128, .34);
      --verified-btn: linear-gradient(135deg, #34D399, #4ADE80);
      --on-verified: #05231A;
      --pending: #FBBF24;
      --pending-bg: rgba(251, 191, 36, .14);
      --pending-line: rgba(251, 191, 36, .32);
      --refuse: #F87171;
      --refuse-bg: rgba(248, 113, 113, .13);
      --refuse-line: rgba(248, 113, 113, .32);
      --nav-bg: rgba(6, 27, 21, .88);
      --foot-bg: rgba(5, 24, 18, .9);
      --sheet-bg: linear-gradient(160deg, #0E3226, #071F18);
      --card-bg: linear-gradient(160deg, rgba(17, 60, 45, .96), rgba(7, 31, 24, .96));
      --console-bg: #08231B;
      --field-bg: rgba(255, 255, 255, .05);
      --field-focus: rgba(212, 175, 55, .12);
      --shadow-md: 0 10px 25px rgba(0, 0, 0, .45);
      --shadow-lg: 0 24px 60px rgba(0, 0, 0, .6);
      --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A5C3B2' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
      --av1: linear-gradient(145deg, #D4AF37, #8E6B1F);
      --av2: linear-gradient(145deg, #1F7A5A, #0E4B37);
      --av3: linear-gradient(145deg, #B98C1F, #6E5214);
      --av4: linear-gradient(145deg, #2E8B6F, #14604A);
      --av5: linear-gradient(145deg, #E8C766, #B98C1F);
      --av6: linear-gradient(145deg, #116B4F, #073A2B);
    }

    /* ---------- 4. mono: exhibition wall, colour only on status ---------- */
    [data-theme="mono"] {
      color-scheme: dark;
      --bg: #0A0A0A;
      --canvas: radial-gradient(1000px 560px at 78% -12%, rgba(255, 255, 255, .07), transparent 62%);
      --grid: rgba(255, 255, 255, .035);
      --grid-op: .55;
      --surface: #151515;
      --surface-2: rgba(255, 255, 255, .055);
      --surface-3: rgba(255, 255, 255, .09);
      --border: #2B2B2B;
      --border-strong: #4A4A4A;
      --ink: #EDEDED;
      --ink-strong: #FFFFFF;
      --muted: #A8A8A8;
      --faint: #787878;
      --primary: #FFFFFF;
      --accent: #FFFFFF;
      --grad: linear-gradient(135deg, #FFFFFF 0%, #CFCFCF 100%);
      --grad-soft: linear-gradient(135deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .05));
      --on-primary: #0A0A0A;
      --verified: #4ADE80;
      --verified-bg: rgba(74, 222, 128, .13);
      --verified-line: rgba(74, 222, 128, .3);
      --verified-btn: linear-gradient(135deg, #22C55E, #4ADE80);
      --on-verified: #05200F;
      --pending: #FACC15;
      --pending-bg: rgba(250, 204, 21, .13);
      --pending-line: rgba(250, 204, 21, .3);
      --refuse: #FB7185;
      --refuse-bg: rgba(251, 113, 133, .12);
      --refuse-line: rgba(251, 113, 133, .3);
      --nav-bg: rgba(10, 10, 10, .9);
      --foot-bg: #0D0D0D;
      --sheet-bg: linear-gradient(160deg, #1A1A1A, #0E0E0E);
      --card-bg: linear-gradient(160deg, #1C1C1C, #0F0F0F);
      --console-bg: #0A0A0A;
      --field-bg: rgba(255, 255, 255, .05);
      --field-focus: rgba(255, 255, 255, .1);
      --shadow-md: 0 10px 25px rgba(0, 0, 0, .6);
      --shadow-lg: 0 24px 60px rgba(0, 0, 0, .7);
      --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8A8A8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
      --av1: linear-gradient(145deg, #3A3A3A, #111111);
      --av2: linear-gradient(145deg, #4F4F4F, #1A1A1A);
      --av3: linear-gradient(145deg, #2A2A2A, #0B0B0B);
      --av4: linear-gradient(145deg, #5C5C5C, #242424);
      --av5: linear-gradient(145deg, #333333, #0E0E0E);
      --av6: linear-gradient(145deg, #454545, #161616);
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box
    }

    html {
      -webkit-text-size-adjust: 100%;
      scroll-behavior: smooth
    }

    body {
      margin: 0;
      background: var(--bg);
      color: var(--ink);
      font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
      font-size: var(--t3);
      line-height: 1.62;
      letter-spacing: -.005em;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
      transition: background-color .25s ease, color .25s ease;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -2;
      pointer-events: none;
      background: var(--canvas), var(--bg)
    }

    body::after {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      opacity: var(--grid-op);
      background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
      background-size: 64px 64px;
      -webkit-mask-image: radial-gradient(900px 700px at 60% 0%, #000 0%, transparent 75%);
      mask-image: radial-gradient(900px 700px at 60% 0%, #000 0%, transparent 75%);
    }

    h1,
    h2,
    h3,
    h4,
    h5 {
      margin: 0;
      line-height: 1.1;
      letter-spacing: -.028em;
      color: var(--ink-strong);
      font-weight: 800
    }

    h1 {
      font-size: var(--h1);
      font-weight: 900;
      letter-spacing: -.035em
    }

    h2 {
      font-size: var(--h2)
    }

    h3 {
      font-size: var(--h3)
    }

    h4 {
      font-size: var(--h4)
    }

    p {
      margin: 0
    }

    img {
      max-width: 100%;
      display: block
    }

    a {
      color: var(--primary);
      text-decoration: none
    }

    a:hover {
      text-decoration: underline;
      text-underline-offset: 3px
    }

    button {
      font: inherit;
      cursor: pointer;
      color: inherit
    }

    [hidden] {
      display: none !important
    }

    ::selection {
      background: var(--grad-soft);
      color: var(--ink-strong)
    }

    :focus-visible {
      outline: 2px solid var(--primary);
      outline-offset: 3px;
      border-radius: 6px
    }

    .sr {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
      border: 0
    }

    .shell {
      width: min(100% - 32px, var(--shell));
      margin-inline: auto
    }

    .section {
      padding: clamp(56px, 7vw, 108px) 0;
      position: relative
    }

    section[id] {
      scroll-margin-top: calc(var(--nav-h) + 16px)
    }

    .lede {
      color: var(--muted);
      font-size: var(--t4);
      line-height: 1.6;
      max-width: 60ch
    }

    .grad-text {
      background: var(--grad);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 14px;
      border-radius: var(--pill);
      background: var(--surface-2);
      border: 1px solid var(--border);
      color: var(--muted);
      font-size: var(--t1);
      font-weight: 600
    }

    .eyebrow .dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--verified);
      box-shadow: 0 0 0 4px var(--verified-bg);
      flex: none
    }

    /* ---------- buttons ---------- */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      min-height: 46px;
      padding: 0 22px;
      border: 1px solid transparent;
      border-radius: var(--pill);
      font-weight: 600;
      font-size: var(--t2);
      letter-spacing: -.01em;
      white-space: nowrap;
      transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease;
    }

    .btn:hover {
      text-decoration: none
    }

    .btn-primary {
      background: var(--grad);
      color: var(--on-primary);
      box-shadow: var(--shadow-md)
    }

    .btn-primary:hover {
      transform: translateY(-1px)
    }

    .btn-ghost {
      background: var(--surface-2);
      color: var(--ink);
      border-color: var(--border)
    }

    .btn-ghost:hover {
      background: var(--surface-3);
      border-color: var(--border-strong)
    }

    .btn-verify {
      background: var(--verified-btn);
      color: var(--on-verified);
      font-weight: 700;
      box-shadow: var(--shadow-md)
    }

    .btn-verify:hover {
      transform: translateY(-1px)
    }

    .btn-refuse {
      background: transparent;
      color: var(--refuse);
      border-color: var(--refuse-line)
    }

    .btn-refuse:hover {
      background: var(--refuse-bg)
    }

    .btn-sm {
      min-height: 38px;
      padding: 0 16px;
      font-size: var(--t1)
    }

    .btn-block {
      width: 100%
    }

    .btn:disabled {
      opacity: .5;
      cursor: not-allowed;
      transform: none
    }

    /* ---------- form controls ---------- */
    .field {
      display: block;
      min-width: 0
    }

    .field>.label {
      display: block;
      font-size: var(--t1);
      font-weight: 600;
      color: var(--muted);
      margin-bottom: 7px
    }

    .input,
    .select,
    textarea.input {
      width: 100%;
      min-height: 48px;
      padding: 12px 14px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--field-bg);
      color: var(--ink);
      font: inherit;
      transition: border-color .15s ease, background-color .15s ease;
    }

    .select {
      appearance: none;
      background-image: var(--arrow);
      background-repeat: no-repeat;
      background-position: right 12px center;
      background-size: 18px;
      padding-right: 42px
    }

    textarea.input {
      min-height: 96px;
      resize: vertical
    }

    .input::placeholder {
      color: var(--faint)
    }

    .input:hover,
    .select:hover {
      border-color: var(--border-strong)
    }

    .input:focus,
    .select:focus {
      outline: none;
      border-color: var(--primary);
      background: var(--field-focus);
      box-shadow: 0 0 0 4px var(--grad-soft)
    }

    .check {
      display: flex;
      gap: 11px;
      align-items: flex-start;
      padding: 12px 14px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--surface-2);
      cursor: pointer
    }

    .check:hover {
      border-color: var(--border-strong)
    }

    .check input {
      margin-top: 3px;
      width: 17px;
      height: 17px;
      accent-color: var(--primary);
      flex: none
    }

    .check span {
      font-size: var(--t2);
      color: var(--ink)
    }

    .hint {
      font-size: var(--t1);
      color: var(--faint);
      line-height: 1.55
    }

    .error-text {
      font-size: var(--t1);
      color: var(--refuse);
      margin-top: 12px
    }

    /* ---------- status pills ---------- */
    .pill {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 5px 12px;
      border-radius: var(--pill);
      font-size: var(--t1);
      font-weight: 600;
      white-space: nowrap
    }

    .pill-verified {
      background: var(--verified-bg);
      color: var(--verified);
      border: 1px solid var(--verified-line)
    }

    .pill-pending {
      background: var(--pending-bg);
      color: var(--pending);
      border: 1px solid var(--pending-line)
    }

    .pill-refuse {
      background: var(--refuse-bg);
      color: var(--refuse);
      border: 1px solid var(--refuse-line)
    }

    .pill .dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: currentColor;
      flex: none
    }

    .tick {
      width: 14px;
      height: 14px;
      flex: none
    }

    .tag {
      display: inline-flex;
      align-items: center;
      padding: 4px 11px;
      border-radius: var(--pill);
      background: var(--surface-2);
      border: 1px solid var(--border);
      color: var(--muted);
      font-size: var(--t1)
    }

    /* ---------- header ---------- */
    .nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 50;
      background: var(--nav-bg);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--border);
      padding-top: env(safe-area-inset-top, 0px)
    }

    .nav-in {
      display: flex;
      align-items: center;
      gap: 12px;
      height: var(--nav-h)
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 11px;
      min-width: 0;
      color: var(--ink)
    }

    .logo:hover {
      text-decoration: none
    }

    .logo img {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      flex: none;
      background: #000;
      box-shadow: 0 0 0 1px var(--border)
    }

    .logo b {
      display: block;
      font-size: .95rem;
      font-weight: 800;
      color: var(--ink-strong);
      letter-spacing: -.02em;
      line-height: 1.2
    }

    .logo span {
      display: block;
      font-size: .72rem;
      color: var(--muted);
      letter-spacing: .03em
    }

    .nav .logo {
      margin-right: auto
    }

    .nav .logo b {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: min(46vw, 400px)
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 2px
    }

    .nav-links a {
      padding: 9px 12px;
      border-radius: var(--pill);
      color: var(--muted);
      font-size: var(--t2);
      font-weight: 500
    }

    .nav-links a:hover {
      color: var(--ink-strong);
      background: var(--surface-2);
      text-decoration: none
    }

    .nav-links .btn {
      display: none
    }

    .nav-actions {
      display: flex;
      align-items: center;
      gap: 9px
    }

    .burger {
      display: none;
      width: 44px;
      height: 44px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: var(--surface-2);
      align-items: center;
      justify-content: center;
      flex: none;
      color: var(--ink)
    }

    .burger svg {
      width: 20px;
      height: 20px
    }

    main {
      padding-top: var(--nav-h)
    }

    /* ---------- theme switcher ---------- */
    .theme-wrap {
      position: relative
    }

    .theme-btn {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      min-height: 40px;
      padding: 0 13px;
      border-radius: var(--pill);
      border: 1px solid var(--border);
      background: var(--surface-2);
      color: var(--ink);
      font-size: var(--t1);
      font-weight: 600
    }

    .theme-btn:hover {
      border-color: var(--border-strong);
      background: var(--surface-3)
    }

    .theme-btn .swatch {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: var(--grad);
      border: 1px solid var(--border-strong);
      flex: none
    }

    .theme-btn svg {
      width: 14px;
      height: 14px;
      color: var(--muted)
    }

    .theme-menu {
      position: absolute;
      top: calc(100% + 10px);
      right: 0;
      z-index: 60;
      width: 276px;
      padding: 8px;
      background: var(--sheet-bg);
      border: 1px solid var(--border-strong);
      border-radius: var(--radius);
      box-shadow: var(--shadow-lg)
    }

    .theme-menu[hidden] {
      display: none
    }

    .theme-opt {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      width: 100%;
      padding: 10px 11px;
      border: 0;
      border-radius: var(--radius-sm);
      background: transparent;
      text-align: left;
      color: var(--ink)
    }

    .theme-opt:hover {
      background: var(--surface-2)
    }

    .theme-opt[aria-checked="true"] {
      background: var(--surface-2);
      box-shadow: inset 0 0 0 1px var(--border-strong)
    }

    .theme-opt .dots {
      display: flex
    }

    .theme-opt .dots i {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      box-shadow: 0 0 0 1.5px var(--sheet-bg);
      margin-left: -5px
    }

    .theme-opt .dots i:first-child {
      margin-left: 0
    }

    .theme-opt b {
      display: block;
      font-size: var(--t2);
      font-weight: 600;
      line-height: 1.3;
      color: var(--ink-strong)
    }

    .theme-opt small {
      display: block;
      font-size: var(--t1);
      color: var(--muted);
      line-height: 1.35
    }

    .theme-opt .on {
      color: var(--verified);
      opacity: 0;
      display: grid;
      place-items: center;
      width: 18px
    }

    .theme-opt[aria-checked="true"] .on {
      opacity: 1
    }

    /* ---------- dialogs ---------- */
    dialog {
      border: 0;
      padding: 0;
      background: transparent;
      width: min(100% - 28px, 580px);
      max-height: calc(100dvh - 40px);
      color: var(--ink)
    }

    dialog::backdrop {
      background: rgba(6, 8, 14, .6);
      backdrop-filter: blur(5px)
    }

    .sheet {
      background: var(--sheet-bg);
      border: 1px solid var(--border-strong);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-lg);
      max-height: calc(100dvh - 40px);
      overflow: auto;
      padding: clamp(20px, 3vw, 30px)
    }

    .sheet-head {
      display: flex;
      gap: 16px;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 18px
    }

    .sheet-head h3 {
      overflow-wrap: anywhere
    }

    .x {
      width: 38px;
      height: 38px;
      flex: none;
      border-radius: 11px;
      border: 1px solid var(--border);
      background: var(--surface-2);
      display: grid;
      place-items: center;
      color: var(--muted)
    }

    .x:hover {
      color: var(--ink-strong);
      border-color: var(--border-strong)
    }

    .x svg {
      width: 17px;
      height: 17px
    }

    .tabs {
      display: flex;
      gap: 6px;
      padding: 5px;
      border-radius: var(--pill);
      background: var(--surface-2);
      border: 1px solid var(--border);
      margin-bottom: 22px
    }

    .tabs button {
      flex: 1;
      min-height: 40px;
      border: 0;
      background: transparent;
      border-radius: var(--pill);
      font-weight: 600;
      font-size: var(--t2);
      color: var(--muted);
      padding: 0 10px
    }

    .tabs button[aria-selected="true"] {
      background: var(--grad);
      color: var(--on-primary);
      box-shadow: var(--shadow-md)
    }

    .note {
      padding: 13px 15px;
      border-radius: var(--radius);
      background: var(--grad-soft);
      border: 1px solid var(--border-strong);
      color: var(--ink);
      font-size: var(--t1);
      margin-bottom: 18px;
      line-height: 1.55
    }

    .note b {
      color: var(--ink-strong);
      font-variant-numeric: tabular-nums
    }

    /* ---------- toast ---------- */
    .toast {
      position: fixed;
      left: 50%;
      transform: translateX(-50%);
      bottom: calc(24px + env(safe-area-inset-bottom, 0px));
      z-index: 80;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 18px;
      border-radius: var(--radius);
      background: var(--sheet-bg);
      border: 1px solid var(--border-strong);
      box-shadow: var(--shadow-lg);
      color: var(--ink);
      font-size: var(--t2);
      width: max-content;
      max-width: min(92vw, 470px);
      animation: rise .25s ease both
    }

    @keyframes rise {
      from {
        opacity: 0;
        transform: translate(-50%, 10px)
      }

      to {
        opacity: 1;
        transform: translate(-50%, 0)
      }
    }

    @keyframes stamp {
      0% {
        transform: scale(1.4) rotate(-10deg);
        opacity: 0
      }

      70% {
        transform: scale(.97) rotate(2deg);
        opacity: 1
      }

      100% {
        transform: scale(1) rotate(0);
        opacity: 1
      }
    }

    .stamped {
      animation: stamp .4s cubic-bezier(.2, .8, .3, 1) both
    }

    
/* easing shared by the motion layer */
:root{--ease:cubic-bezier(.22,1,.36,1)}

/* ---------- +91 sits inside the mobile field ---------- */
.input-wrap{position:relative;display:block}
.input-wrap > i{position:absolute;inset-inline-start:14px;top:50%;transform:translateY(-50%);font-style:normal;
  font-weight:700;font-size:var(--t2);color:var(--faint);pointer-events:none;
  padding-inline-end:10px;border-inline-end:1px solid var(--border)}
.input.has-prefix{padding-inline-start:64px}

/* ---------- show or hide a password ---------- */
.input.has-suffix{padding-inline-end:50px}
.pw-eye{position:absolute;inset-inline-end:6px;top:50%;transform:translateY(-50%);width:36px;height:36px;
  display:grid;place-items:center;border:0;border-radius:var(--radius-sm);background:none;color:var(--faint);cursor:pointer}
.pw-eye:hover{color:var(--primary);background:var(--surface-2)}
.pw-eye svg{width:19px;height:19px}
.pw-eye.on{color:var(--primary)}

/* ---------- shared by the public page and the app ---------- */
.idcard{position: relative;width: min(100%, 430px);border-radius: var(--radius-lg);padding: 20px;background: var(--card-bg);border: 1px solid var(--border-strong);box-shadow: var(--shadow-lg)}
.idcard-top{display: flex;align-items: center;gap: 11px;padding-bottom: 15px;border-bottom: 1px solid var(--border);min-width: 0}
.idcard-top img{width: 36px;height: 36px;border-radius: 50%;flex: none}
.idcard-top b{display: block;font-size: .83rem;font-weight: 700;color: var(--ink-strong);line-height: 1.25}
.idcard-top span{display: block;font-size: .66rem;color: var(--muted);letter-spacing: .09em;font-weight: 600}
.idcard-body{display: grid;grid-template-columns: 76px minmax(0, 1fr);gap: 16px;padding: 18px 0 6px}
.avatar{aspect-ratio: 1;border-radius: var(--radius);display: grid;place-items: center;color: #fff;font-weight: 800;font-size: 1.45rem;letter-spacing: -.02em;border: 1px solid rgba(255, 255, 255, .16)}
.av1{background: var(--av1)}
.av2{background: var(--av2)}
.av3{background: var(--av3)}
.av4{background: var(--av4)}
.av5{background: var(--av5)}
.av6{background: var(--av6)}
.idcard-name{font-size: 1.18rem;font-weight: 800;color: var(--ink-strong);letter-spacing: -.025em;line-height: 1.2;overflow-wrap: anywhere}
.idcard-studio{color: var(--muted);font-size: var(--t2);margin-top: 3px;overflow-wrap: anywhere}
.kv{margin: 14px 0 0;display: grid;grid-template-columns: auto minmax(0, 1fr);gap: 7px 14px;font-size: var(--t1)}
.kv dt{color: var(--faint)}
.kv dd{margin: 0;color: var(--ink);font-weight: 600;font-variant-numeric: tabular-nums;overflow-wrap: anywhere}
.idcard-foot{display: flex;align-items: center;justify-content: space-between;gap: 12px;margin-top: 16px;padding-top: 15px;border-top: 1px solid var(--border)}
.seal{display: inline-flex;align-items: center;gap: 9px;color: var(--verified);font-weight: 700;font-size: var(--t1)}
.seal svg{width: 30px;height: 30px;flex: none}
.qr{width: 48px;height: 48px;flex: none;border-radius: 6px;padding: 4px;background: #fff;border: 1px solid var(--border)}
.qr i{display: block;width: 100%;height: 100%;background: repeating-linear-gradient(90deg, #111 0 3px, transparent 3px 6px), repeating-linear-gradient(0deg, #111 0 3px, transparent 3px 6px)}
.badge{width: 30px;height: 30px;border-radius: 9px;display: grid;place-items: center;flex: none;background: var(--verified-bg);color: var(--verified)}

/* ---------- every word on both pages can be selected and copied ---------- */
html{-webkit-text-size-adjust:100%}
body,button,input,select,textarea{-webkit-user-select:text;user-select:text}
.burger,.pw-eye,.side-toggle,.x,.arena{-webkit-user-select:none;user-select:none}
::selection{background:color-mix(in srgb,var(--primary) 26%,transparent);color:var(--ink-strong)}

/* ---------- icons inside buttons keep their size ---------- */
.btn svg{width:17px;height:17px;flex:none}
.btn-sm svg{width:15px;height:15px}

/* ---------- the short name for narrow headers ---------- */
.nm-short{display:none}
@media (max-width:540px){
  .nav .nm-long{display:none}
  .nav .nm-short{display:inline}
  .nav .logo b{font-size:1.06rem;-webkit-line-clamp:1;white-space:nowrap}
  .nav .logo > span > span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3}
}

/* ---------- the two name forms are inline, not block like the rest of the logo ---------- */
.logo .nm-long,.logo .nm-short{display:inline}
.logo .nm-short{display:none}
@media (max-width:540px){
  .nav .logo .nm-long{display:none}
  .nav .logo .nm-short{display:inline}
}