/* ─── Proximas shared stylesheet — every stage page links this ──────────────────────
   House palette: 1:1 with the desktop Level 0/1 windows
     UiInterop/Views/DesignIntentWindow.xaml  (Level 0 - Design Intent)
     UiInterop/Views/Level1Window.xaml        (Level 1 - System Architecture)

   FONT — Bai Jamjuree is self-hosted; each page links it ITSELF, before this file:
     <link href="/fonts/bai-jamjuree.css" rel="stylesheet">
     <link href="/proximas.css" rel="stylesheet">
   (no @import here: keeps the font request first-class and works air-gapped)        */
:root {
  color-scheme: dark;
  --window: #07111E;        /* DesignIntentWindow WindowBackgroundBrush */
  --panel: #0B1626;         /* PanelBackgroundBrush                     */
  --card: #0D1A2C;          /* CardBackgroundBrush                      */
  --card2: #0B1D35;         /* Level1 BrushPanel                        */
  --panel-inner: #07192D;   /* Level1 BrushPanelInner                   */
  --border: #233A57;        /* BorderBrushBlue                          */
  --border-soft: #184A83;   /* Level1 BrushBorderSoft                   */
  --card-border: #274465;   /* assumption-card border                   */
  --chrome: #1B2D44;        /* window chrome / dividers                 */
  --accent: #4FA3FF;        /* AccentBrush                              */
  --accent-dark: #3D78BD;   /* AccentBrushDark                          */
  --green: #2AA968;         /* Confirm button                           */
  --green-border: #46C88A;
  --green-chip-bg: #0F3D2A; /* "✓ Added" chip                           */
  --green-chip-border: #1E7D4F;
  --green-chip-text: #7CF0B0;
  --amber: #D6A44C;         /* QuestionBrush                            */
  --amber-bg: #2B2418;
  --text: #EAF2FF;          /* TextPrimaryBrush                         */
  --sub: #A9B7CA;           /* TextSecondaryBrush                       */
  --muted: #7E90A8;         /* MutedBrush                               */
  --input-bg: #08111E;      /* ModernInputStyle Background              */
  --thumb: #36A8FF;         /* Level1 BrushScrollThumb                  */

  /* ─── THE LAYER SCALE (founder directive 2026-09-03) ────────────────────────────────
     THREE BANDS. What matters is which band a thing is in, never its exact number.

       WINDOWS          1 – 1999   panels, docks, toolbars, tooltips, context menus, the
                                   CAD part inspector. Pages number these among themselves,
                                   and none of it is this file's business.
       THE ACCOUNT MENU --z-acct-menu   ONE value, above every window on every page.
       DIALOGS          --z-dialog-base + the dialog's old number. Above the menu.

     ⚠ WHY THE MENU NEEDED A BAND OF ITS OWN. It was 30, chosen against the CAD engine's
     part workspace (8) and toolbar (9) — the tallest things on the page WHEN IT WAS
     WRITTEN. #insp then landed at 1000 and #bpPanel at 1200, both right-docked like the
     menu, and the open dropdown was silently painted under a 340px inspector card:
     32,302px² of it covered, and elementFromPoint over that region returned #insp, so
     Usage / Settings / Sign out were not merely hidden but UNCLICKABLE. Picking a number
     that clears today's tallest panel is what caused this; the fix is a band no panel is
     allowed into, not a bigger number.

     ⚠ AND WHY DIALOGS SIT ABOVE IT. A menu is a transient thing you opened; a dialog is
     the thing you opened it FOR. #acctOverlay and #authOverlay were 39 and 40 — under
     that same inspector — so on the CAD page the paywall opened UNDER the model it gates,
     which is the exact failure #authOverlay's own comment warns about.

     ⚠ DIALOGS KEEP THEIR OLD NUMBER AS AN OFFSET (calc(base + 47), not a fresh 3001).
     Pages pair a scrim with the card above it and sometimes hold two dialogs open at
     once; re-numbering by hand would silently reshuffle those pairs. Adding one constant
     to all of them preserves every relative order that already works.                  */
  --z-acct-menu: 2000;
  --z-dialog-base: 3000;
}
* { scrollbar-width: thin; scrollbar-color: #2B4568 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2B4568; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--thumb); }

html, body { height: 100%; }
body { margin: 0; background: var(--window); color: var(--sub);
       font: 13px/1.5 "Segoe UI", system-ui, sans-serif;
       display: flex; flex-direction: column; }

/* Title bar — clone of the DesignIntentWindow chrome row (filled by renderNav) */
header { flex: none; height: 48px; padding: 0 16px; border-bottom: 1px solid var(--chrome);
         display: flex; gap: 14px; align-items: center; }
.logo { width: 22px; height: 22px; border-radius: 6px; flex: none;
        background: linear-gradient(135deg, var(--accent), var(--accent-dark)); }
header b { color: var(--text); font-size: 20px; font-weight: 600;
           font-family: 'Bai Jamjuree', 'Segoe UI', sans-serif; }
header a { color: var(--muted); text-decoration: none; font-size: 12px; }
header a:hover { color: var(--accent); }
header a.home { display: flex; gap: 14px; align-items: center; }
header a.home:hover b { color: var(--accent); }
#msg { color: var(--green-chip-text); font-weight: 600; margin-left: 8px; }
#err { color: #FF7A7A; font-weight: 600; margin-left: 8px; }

/* Step-chip strip — StatusChipStyle pills, now LINKS between the stage pages */
/* The four stage chips are wider than a phone. WRAPPING them is what stops the whole PAGE scrolling
   sideways — a horizontal body scroll drags every stage's content off-screen with it, so this is a
   shared-nav fix, not a Level 1 one. */
#chipbar { flex: none; display: flex; justify-content: center; align-items: center;
           flex-wrap: wrap; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--chrome); }
.chip { display: flex; align-items: center; gap: 7px; text-decoration: none; flex: 0 1 auto; min-width: 0;
        background: #0E1B2C; border: 1px solid #2B4568; border-radius: 16px;
        padding: 8px 16px 8px 13px; }
a.chip:hover { border-color: var(--accent); }
.chip .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex: none; }
.chip.on .dot { background: var(--accent); }
.chip.on { border-color: #3E5E85; }
.chip-body { display: block; font-size: 11.5px; font-weight: 600; color: #FFFFFF; line-height: 1.3;
             font-family: 'Bai Jamjuree', 'Segoe UI', sans-serif; }
/* What the stage DECIDES, under its name. Without it the chips are four proper nouns and the
   reader has to already know the process to place a decision in it. */
.chip-note { display: block; font-size: 9.5px; color: var(--muted); line-height: 1.3; margin-top: 1px; }

/* One-line "what happens at this stage" guide */
.stage-guide { flex: none; text-align: center; padding: 10px 16px 0; color: var(--sub); font-size: 13px; }
.stage-guide b { color: var(--text); }

/* Page body layouts */
main { flex: 1; min-height: 0; }
main.split { display: grid; grid-template-columns: 400px 1fr; gap: 14px; padding: 14px; box-sizing: border-box; }
main.single { overflow: auto; padding: 14px; box-sizing: border-box; }

/* Left panel — clone of the "Define Your Intent" stage (PanelBorderStyle) */
#left { background: var(--panel); border: 1px solid var(--border); border-radius: 18px;
        padding: 22px; overflow: auto; }
#left h1 { margin: 0 0 6px; color: var(--text); font-size: 24px; font-weight: 700;
           font-family: 'Bai Jamjuree', 'Segoe UI', sans-serif; }
.guide { color: var(--sub); font-size: 13px; margin-bottom: 12px; }

label { display: flex; align-items: center; gap: 8px; margin: 12px 0 8px;
        color: var(--text); font-size: 14px; font-weight: 600; }
label i { font-style: italic; color: var(--muted); font-weight: 400; }
.help { width: 20px; height: 20px; border-radius: 50%; flex: none; box-sizing: border-box;
        background: #1B2A3C; border: 1px solid #3E5E85; color: var(--accent);
        font-size: 11px; font-weight: 700; display: inline-flex;
        align-items: center; justify-content: center; cursor: help; }

/* Inputs — ModernInputStyle (radius 12, #08111E on #3D78BD) */
textarea, input, select { box-sizing: border-box; background: var(--input-bg); color: var(--text);
                          border: 1px solid var(--accent-dark); font-family: inherit; }
textarea { width: 100%; border-radius: 12px; padding: 9px 12px; font-size: 15px;
           line-height: 1.5; resize: vertical; }
textarea::placeholder, input::placeholder { color: var(--muted); }
textarea:focus, input:focus, select:focus { outline: none; border-color: var(--accent); }
/* Answer boxes — RefinementAnswerTextBoxStyle (radius 8, height 34, 12px) */
input { width: 100%; border-radius: 8px; min-height: 34px; padding: 6px 10px;
        font-size: 12px; margin: 4px 0 10px; }
select { border-radius: 8px; min-height: 34px; padding: 6px 10px; font-size: 12px; max-width: 100%; }

/* Buttons — Secondary/Primary/Confirm button styles (radius 14, height 36, 13px semibold) */
button { height: 36px; border-radius: 14px; background: #263449; border: 1px solid #4A5E7A;
         color: var(--text); font: 600 13px "Segoe UI", system-ui, sans-serif;
         cursor: pointer; padding: 0 14px; box-sizing: border-box; }
button:hover { background: #31435B; }
button:active { background: #1E2A3C; }
button.primary { background: var(--accent-dark); border-color: var(--accent); color: #fff; }
button.primary:hover { background: #4C86CB; }
button.primary:active { background: #335E91; }
/* Confirm baseline / Generate BOM → the desktop's green Confirm button */
button.green, button[onclick^="confirmPkg"], button[onclick^="genBom"] {
  background: var(--green); border-color: var(--green-border); color: #fff; }
button.green:hover, button[onclick^="confirmPkg"]:hover { background: #3BAE73; }
button.green:active, button[onclick^="confirmPkg"]:active { background: #2C8057; }
#left button { width: 100%; margin-top: 10px; }
#right button, .panel button { margin: 4px 8px 4px 0; }

hr { border: none; border-top: 1px solid var(--chrome); margin: 18px 0 10px; }
b.section { color: var(--text); font-size: 15px; }

/* Intent cards — clone of the Overview-stage assumption cards */
.run { background: var(--card); border: 1px solid var(--card-border); border-radius: 12px;
       padding: 12px; margin-top: 10px; cursor: pointer; color: var(--text); }
.run:hover { border-color: var(--accent); }

.badge { font-size: 11px; font-weight: 600; border-radius: 8px; padding: 1px 8px;
         margin-left: 6px; display: inline-block; }
.locked { background: var(--green-chip-bg); color: var(--green-chip-text);
          border: 1px solid var(--green-chip-border); }
.draft { background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber); }
.muted { color: var(--muted); font-size: 11px; font-weight: 400; }

/* Right panel / single-column stage panel — Intent Overview / Level 1 styling */
#right, .panel { background: var(--panel); border: 1px solid var(--border); border-radius: 18px;
                 padding: 20px 24px; overflow: auto; }
.panel { max-width: 980px; margin: 0 auto; }
#right h3, .panel h3 { margin: 0 0 4px; color: var(--text); font-size: 24px; font-weight: 600;
                       font-family: 'Bai Jamjuree', 'Segoe UI', sans-serif; }
#right h4, .panel h4 { color: var(--text); font-size: 18px; font-weight: 600; margin: 18px 0 8px;
                       font-family: 'Bai Jamjuree', 'Segoe UI', sans-serif; }
#right p, .panel p { margin: 8px 0; }
#right b, .panel b { color: var(--text); }
#right a, .panel a { color: var(--accent); }
#right ul, .panel ul { margin: 6px 0 10px; padding-left: 22px; }

/* AI package + Level 1 architecture — SectionBorderStyle cards (radius 16, #0B1D35 on #184A83) */
#pkg, #arch { background: var(--card2); border: 1px solid var(--border-soft);
              border-radius: 16px; padding: 16px; margin-top: 14px; }
#pkg:empty, #arch:empty { display: none; }
#pkg h4, #arch h4 { margin-top: 0; }

/* History entries */
.ev { border-left: 2px solid var(--border-soft); margin: 10px 0 10px 4px; padding: 2px 0 2px 12px; }
.ev b { color: var(--accent); }

pre { background: var(--panel-inner); border: 1px solid var(--border-soft); border-radius: 10px;
      padding: 8px; white-space: pre-wrap; max-height: 220px; overflow: auto; font-size: 11px; }

/* AI prose — readable card, accent-edged like the desktop section cards */
.prose { background: var(--panel-inner); border: 1px solid var(--border-soft);
         border-left: 3px solid var(--accent-dark); border-radius: 12px; padding: 12px 16px;
         margin: 6px 0; line-height: 1.65; font-size: 13px; max-height: 300px; overflow: auto;
         color: var(--sub); }
.prose p { margin: 0 0 8px 0; } .prose li { margin: 2px 0; }
.prose b { color: var(--text); }

/* "Continue → next stage" bar, bottom right of every guided page */
.continue-bar { flex: none; display: flex; justify-content: flex-end; align-items: center;
                gap: 12px; padding: 4px 14px 14px; }
.continue-hint { color: var(--muted); font-size: 12px; }
a.continue { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 20px;
             border-radius: 14px; background: var(--accent-dark); border: 1px solid var(--accent);
             color: #fff; text-decoration: none;
             font: 600 13px 'Bai Jamjuree', 'Segoe UI', sans-serif; }
a.continue:hover { background: #4C86CB; }
a.continue:active { background: #335E91; }

/* ═══ GUEST TRIAL + AUTH / SUBSCRIPTION MODAL ═══════════════════════════════════════════════════════
   Shared because the gate is: the CAD engine gates Export, Proxima B gates generation, and one modal
   answers both. Lives here rather than in a page's <style> so the screen that asks for money looks the
   same wherever it opens — house palette only, no colour invented locally.

   ⚠ APPEARANCE ONLY FOR THE CHIP. Where #trialChip SITS is the host page's business — it tucks into the
   CAD engine's absolutely-positioned toolbar and would have no meaning in Proxima B's header — so the
   position rule stays with the page and only the look travels. */
#trialChip { height: 30px; display: inline-flex; align-items: center; gap: 6px; padding: 0 11px;
             border-radius: 8px; font-size: 11px; font-weight: 600; background: rgba(8,14,24,.88);
             border: 1px solid var(--chrome); color: var(--muted); pointer-events: none; }
#trialChip.low { border-color: var(--amber); color: var(--amber); }
#trialChip.out { border-color: #E0705F; color: #E0705F; }
#trialChip.hiddenp { display: none; }

/* A paywall that opens UNDER the thing it gates is not a paywall — and 40 stopped clearing "every
   overlay any host page raises" the moment the CAD engine grew #insp (1000) and #bpPanel (1200). It
   is in the DIALOG band now, which no panel is allowed into, so the claim holds by construction
   rather than by having counted the panels that existed in August. */
#authOverlay { position: fixed; inset: 0; z-index: calc(var(--z-dialog-base) + 40); display: flex; align-items: center;
               justify-content: center; padding: 24px; background: rgba(3,7,14,.78);
               backdrop-filter: blur(3px); overflow: auto; }
#authOverlay.hiddenp { display: none; }
#authCard { width: min(720px, 100%); background: var(--card); border: 1px solid var(--card-border);
            border-radius: 14px; padding: 22px 24px 20px; box-shadow: 0 18px 60px rgba(0,0,0,.55);
            font: 400 13px 'Bai Jamjuree', 'Segoe UI', sans-serif; }
#authCard h3 { margin: 0 0 4px; font-size: 17px; color: var(--text); }
#authSub { color: var(--sub); font-size: 12px; line-height: 1.5; margin-bottom: 4px; }
#authWhy { color: var(--muted); font-size: 11px; line-height: 1.5; margin-bottom: 14px; }
.authsec { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
           margin: 16px 0 8px; }
#authProviders { display: flex; gap: 8px; flex-wrap: wrap; }
.oauthbtn { flex: 1 1 190px; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
            height: 40px; padding: 0 14px; cursor: pointer; border-radius: 9px; font-size: 12.5px;
            font-weight: 600; color: var(--text); background: var(--panel-inner);
            border: 1px solid var(--card-border); }
.oauthbtn:hover { border-color: var(--accent); }
.oauthbtn[disabled] { opacity: .5; cursor: not-allowed; }
#authTiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: 9px; }
.tiercard { text-align: left; cursor: pointer; padding: 12px 13px; border-radius: 10px;
            background: var(--panel-inner); border: 1px solid var(--card-border); color: var(--text);
            font: 400 12px 'Bai Jamjuree', 'Segoe UI', sans-serif; }
.tiercard:hover, .tiercard.on { border-color: var(--accent); background: rgba(79,163,255,.10); }
.tiercard b { display: block; font-size: 12.5px; margin-bottom: 2px; }
.tiercard .seats { display: block; font-size: 11px; color: var(--accent); margin-bottom: 6px; }
.tiercard .alw { display: block; font-size: 10.5px; color: var(--muted); line-height: 1.45; }
#authNotice { margin-top: 14px; padding: 9px 11px; border-radius: 8px; font-size: 11px; line-height: 1.5;
              background: var(--amber-bg); border: 1px solid var(--amber); color: var(--amber); }
#authNotice.hiddenp { display: none; }
#authFoot { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
#authFoot .sp { flex: 1; }
#authDismiss { height: 32px; padding: 0 14px; border-radius: 8px; cursor: pointer; font-size: 11.5px;
               background: transparent; border: 1px solid var(--chrome); color: var(--muted); }
#authDismiss:hover { color: var(--text); border-color: var(--card-border); }
#authX { position: relative; float: right; top: -4px; cursor: pointer; background: none; border: 0;
         color: var(--muted); font-size: 13px; }
#authX:hover { color: var(--text); }

/* ═══ ACCOUNT AVATAR, MENU AND PANELS ═══════════════════════════════════════════════════════════
   Moved here from cad_engine.html (founder 2026-08-29: "it should be available on all the pages").
   It lives beside the header rules it belongs to, because the header IS the master page — renderNav
   writes it for all four stage pages, so the account block has to be owned at the same level or
   three of those pages carry a header with a hole in it.
   ⚠ THE HOUSE HAS NO "GLASSMORPHISM" AND THIS DOES NOT INTRODUCE ONE. The brief asked for it, but
   `backdrop-filter` appears exactly once in the whole product — on #authOverlay's backdrop — and
   never in this file. The real house pattern is a blurred DIM behind a SOLID panel, so that is what
   these copy, token for token, from #authOverlay/#authCard. Inventing a translucent-card style here
   would make this one component the only thing on the site that looks like it.

   ⚠ Z-INDEX SITS BELOW THE PAYWALL ON PURPOSE. "A paywall that opens UNDER the thing it gates is
   not a paywall", so the account panel keeps its old 39 against the gate's 40 — both now offset
   into the DIALOG band, which preserves that one-step gap exactly. The MENU is the odd one out: it
   is neither a panel nor a dialog, so it gets its own band between them. See the layer scale at the
   top of this file for why counting the tallest panel of the day was the bug, not the fix. */
#acctWrap { position: relative; flex: none; display: flex; align-items: center; }
#acctBtn { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 8px 0 6px;
           background: none; border: 1px solid transparent; border-radius: 999px; cursor: pointer;
           color: var(--sub); font: 600 11.5px 'Bai Jamjuree', 'Segoe UI', sans-serif; }
#acctBtn:hover, #acctBtn[aria-expanded="true"] { border-color: var(--card-border); background: var(--card); }
#acctBtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.acctAv { position: relative; width: 26px; height: 26px; border-radius: 50%; flex: none;
          display: grid; place-items: center; font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
          color: #06121F; background: linear-gradient(135deg, var(--accent), var(--accent-dark)); }
.acctAv.guest { background: linear-gradient(135deg, #4A5C74, #2F3E52); color: var(--text); }
/* The status pip is a RING first: colour alone is not a signal for a colour-blind reader, so the
   title text below carries the same fact in words. */
.acctAv .pip { position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%;
               border: 2px solid var(--window); background: var(--muted); }
.acctAv .pip.on { background: var(--green-border); }
.acctAv .pip.dev { background: var(--amber); }
#acctName { max-width: 132px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#acctCaret { font-size: 9px; color: var(--muted); }

#acctMenu { position: absolute; top: 40px; right: 0; z-index: var(--z-acct-menu); width: 268px; padding: 6px;
            background: var(--card); border: 1px solid var(--card-border); border-radius: 12px;
            box-shadow: 0 18px 60px rgba(0,0,0,.55);
            font: 400 12px 'Bai Jamjuree', 'Segoe UI', sans-serif; }
#acctMenu.hiddenp { display: none; }
#acctMenu .who { padding: 9px 10px 10px; border-bottom: 1px solid var(--chrome); margin-bottom: 6px; }
#acctMenu .who b { display: block; color: var(--text); font-size: 12.5px; overflow: hidden;
                   text-overflow: ellipsis; white-space: nowrap; }
#acctMenu .who span { display: block; color: var(--muted); font-size: 10.5px; margin-top: 2px;
                      overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acctItem { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px;
            background: none; border: 0; border-radius: 8px; cursor: pointer; text-align: left;
            color: var(--text); font: 400 12px 'Bai Jamjuree', 'Segoe UI', sans-serif; }
.acctItem:hover, .acctItem:focus-visible { background: var(--panel-inner); outline: none; }
.acctItem:focus-visible { box-shadow: inset 0 0 0 1px var(--accent); }
.acctItem .ic { width: 16px; text-align: center; color: var(--accent); font-size: 12px; flex: none; }
.acctItem .lb { flex: 1; }
.acctItem .rt { color: var(--muted); font-size: 10.5px; }
.acctItem.danger { color: #E0705F; } .acctItem.danger .ic { color: #E0705F; }
#acctMenu .sep { height: 1px; background: var(--chrome); margin: 6px 4px; }

#acctOverlay { position: fixed; inset: 0; z-index: calc(var(--z-dialog-base) + 39); display: flex; align-items: center;
               justify-content: center; padding: 24px; background: rgba(3,7,14,.78);
               backdrop-filter: blur(3px); overflow: auto; }
#acctOverlay.hiddenp { display: none; }
#acctCard { width: min(660px, 100%); background: var(--card); border: 1px solid var(--card-border);
            border-radius: 14px; padding: 20px 22px 18px; box-shadow: 0 18px 60px rgba(0,0,0,.55);
            font: 400 13px 'Bai Jamjuree', 'Segoe UI', sans-serif; }
#acctCard h3 { margin: 0 0 3px; font-size: 16px; color: var(--text); }
#acctCard .sub { color: var(--muted); font-size: 11.5px; line-height: 1.5; margin-bottom: 14px; }
#acctCard .sec { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
                 color: var(--muted); margin: 16px 0 8px; }
.acctRow { display: flex; gap: 12px; padding: 8px 10px; border-radius: 8px; background: var(--panel-inner);
           border: 1px solid var(--card-border); margin-bottom: 6px; align-items: baseline; }
.acctRow .k { flex: none; width: 148px; color: var(--muted); font-size: 11px; }
.acctRow .v { flex: 1; color: var(--text); font-size: 12px; word-break: break-word; }
.acctRow .v.dim { color: var(--muted); }
/* An absence is stated, never blanked: a field with no source says so in amber rather than showing
   an empty cell the reader would fill in with a guess. */
.acctRow .v.none { color: var(--amber); }
#acctCard .note { margin-top: 12px; padding: 9px 11px; border-radius: 8px; font-size: 11px;
                  line-height: 1.5; background: var(--amber-bg); border: 1px solid var(--amber);
                  color: var(--amber); }
#acctCard .foot { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
#acctCard .foot .sp { flex: 1; }
.acctBtn2 { height: 34px; padding: 0 14px; border-radius: 9px; cursor: pointer; font-size: 12px;
            font-weight: 600; color: var(--text); background: var(--panel-inner);
            border: 1px solid var(--card-border);
            font-family: 'Bai Jamjuree', 'Segoe UI', sans-serif; }
.acctBtn2:hover { border-color: var(--accent); }
.acctBtn2[disabled] { opacity: .5; cursor: not-allowed; }
.acctBtn2.pri { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.acctBtn2.pri:hover:not([disabled]) { background: var(--accent); }
#acctCard input[type=password], #acctCard input[type=email] {
  width: 100%; padding: 9px 11px; border-radius: 9px; background: var(--input-bg);
  border: 1px solid var(--card-border); color: var(--text);
  font: 13px 'Bai Jamjuree', 'Segoe UI', sans-serif; }
#acctCard input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
#acctCard label { display: block; color: var(--sub); font-size: 11px; margin: 0 0 5px; }
.acctFld + .acctFld { margin-top: 10px; }
#acctMsg { min-height: 15px; margin-top: 9px; font-size: 11.5px; color: var(--muted); }
#acctMsg.bad { color: #E0705F; } #acctMsg.ok { color: var(--green-chip-text); }
@media (max-width: 640px) { #acctName { display: none; } #acctMenu { width: 244px; } }