:root {
            --bg-void: #0D0D0D;
            --panel-bg: #141414;
            --border-line: #222222;
            --cyan-glow: #00FFFF;
            --pink-glow: #FF007F;
            --green-glow: #00FF66;
            --amber-glow: #FFB300;
            --text-main: #E2E2E8;
            --text-muted: #8A8A9E;
        }
        body {
            background-color: var(--bg-void);
            color: var(--text-main);
            font-family: 'JetBrains Mono', monospace;
        }
        .font-heading {
            font-family: 'Michroma', sans-serif;
        }
        .glow-cyan { text-shadow: 0 0 10px rgba(0, 255, 255, 0.6); }
        .glow-pink { text-shadow: 0 0 10px rgba(255, 0, 127, 0.6); }
        .glow-green { text-shadow: 0 0 10px rgba(0, 255, 102, 0.6); }
        .border-panel {
            border: 1px solid var(--border-line);
            background-color: var(--panel-bg);
        }
        .crt-scanlines {
            background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
            background-size: 100% 3px, 6px 100%;
            pointer-events: none;
        }
        /* ===== Motion (startup shift + HUD beats). body.still turns every animation off. ===== */
        body.still *, body.still *::before, body.still *::after { animation: none !important; transition-duration: 0s !important; }
        #splash { position: fixed; inset: 0; z-index: 60; overflow: hidden; background: #050607; isolation: isolate; }
        #splash .aurora { position: absolute; inset: -30%; z-index: -3; filter: blur(70px) saturate(140%); opacity: .62; }
        #splash .ribbon { position: absolute; border-radius: 50%; mix-blend-mode: screen; }
        #splash .r1 { width: 75%; height: 26%; left: 5%; top: 30%; background: linear-gradient(90deg, transparent, #00ffd0 30%, #00ff66 55%, transparent); animation: px-d1 22s ease-in-out infinite alternate; }
        #splash .r2 { width: 65%; height: 22%; left: 30%; top: 44%; background: linear-gradient(90deg, transparent, #00b3ff 25%, #7a5cff 60%, transparent); animation: px-d2 27s ease-in-out infinite alternate; }
        #splash .r3 { width: 50%; height: 18%; left: 15%; top: 56%; background: linear-gradient(90deg, transparent, #ff007f 40%, transparent); opacity: .55; animation: px-d3 31s ease-in-out infinite alternate; }
        @keyframes px-d1 { from { transform: translate(-6%, -4%) rotate(-8deg); } to { transform: translate(8%, 6%) rotate(6deg) scaleY(1.5); } }
        @keyframes px-d2 { from { transform: translate(6%, 5%) rotate(10deg); } to { transform: translate(-10%, -6%) rotate(-4deg) scaleY(1.4); } }
        @keyframes px-d3 { from { transform: translate(-4%, 6%) rotate(4deg); } to { transform: translate(12%, -8%) rotate(-10deg); } }
        #splash .prism { position: absolute; inset: 0; z-index: -2; pointer-events: none; background: linear-gradient(105deg, transparent 44%, rgba(0,255,255,.045) 47.5%, rgba(0,255,102,.055) 50%, rgba(255,0,127,.045) 52.5%, transparent 56%); background-size: 260% 100%; animation: px-sweep 16s ease-in-out infinite; }
        @keyframes px-sweep { 0%, 30% { background-position: 130% 0; } 75%, 100% { background-position: -40% 0; } }
        #splash .vignette { position: absolute; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(ellipse 55% 60% at 50% 50%, rgba(5,6,7,.78) 0%, rgba(5,6,7,.45) 55%, transparent 100%); }
        #splash .wrap { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px 16px; }
        #splash .glass { width: min(380px, 100%); background: rgba(10,12,16,.58); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border: 1px solid rgba(255,255,255,.14); border-radius: 16px; padding: 30px 24px 24px; display: grid; gap: 14px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08); }
        #splash .brand { font-family: 'Michroma', sans-serif; font-size: 22px; letter-spacing: .3em; color: #fff; text-shadow: 0 0 16px rgba(0,255,255,.55), 0 0 36px rgba(0,255,255,.2); }
        #splash .tag { font-size: 11px; color: #b7bccb; letter-spacing: .06em; margin-top: -6px; }
        #splash .hello { font-size: 13px; color: #E2E2E8; }
        #splash .shift-btn { font-family: 'Michroma', sans-serif; font-size: 12px; letter-spacing: .14em; color: #fff; border: 1px solid rgba(0,255,255,.55); border-radius: 10px; padding: 13px; cursor: pointer; background: linear-gradient(135deg, rgba(0,255,255,.28), rgba(122,92,255,.35)); animation: px-breathe 3.6s ease-in-out infinite; }
        #splash .shift-btn:hover { background: linear-gradient(135deg, rgba(0,255,255,.42), rgba(122,92,255,.5)); }
        #splash .shift-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
        @keyframes px-breathe { 0%, 100% { box-shadow: 0 0 10px rgba(0,255,255,.25); } 50% { box-shadow: 0 0 26px rgba(0,255,255,.55), 0 0 44px rgba(122,92,255,.35); } }
        #splash .skip { font-size: 11px; color: #8A8A9E; }
        #splash.glitching .aurora { animation: px-glitch .7s steps(1) forwards; }
        #splash.glitching .glass { animation: px-split .7s steps(1) forwards; }
        @keyframes px-glitch {
          10% { transform: translateX(-6%) skewX(8deg); filter: blur(20px) hue-rotate(90deg) saturate(4); clip-path: inset(10% 0 55% 0); }
          20% { transform: translateX(7%); filter: blur(10px) hue-rotate(-120deg) contrast(3); clip-path: inset(40% 0 20% 0); }
          30% { transform: translateX(-3%) skewX(-14deg); filter: blur(4px) invert(1); clip-path: inset(0 0 70% 0); }
          45% { transform: translateX(9%); filter: hue-rotate(160deg) saturate(6); clip-path: inset(65% 0 5% 0); }
          60% { transform: translateX(-10%) scaleY(1.3); filter: blur(2px) contrast(4); clip-path: inset(25% 0 35% 0); }
          75% { transform: translateX(4%); filter: invert(1); clip-path: inset(48% 0 46% 0); }
          100% { opacity: 0; clip-path: inset(50% 0 50% 0); }
        }
        @keyframes px-split {
          15% { transform: translate(-4px, 1px); text-shadow: 3px 0 #ff0050, -3px 0 #00e5ff; filter: saturate(3); }
          35% { transform: translate(5px, -2px) skewX(6deg); text-shadow: -4px 0 #ff0050, 4px 0 #00e5ff; }
          55% { transform: translate(-6px, 0); clip-path: inset(30% 0 20% 0); }
          75% { transform: translate(3px, 2px); clip-path: inset(55% 0 10% 0); opacity: .6; }
          100% { opacity: 0; }
        }
        #splash .noise { position: absolute; inset: 0; pointer-events: none; z-index: 5; display: none; }
        #splash.glitching .noise { display: block; }
        #splash .noise i { position: absolute; left: 0; right: 0; height: 6px; background: rgba(255,255,255,.7); mix-blend-mode: difference; animation: px-nbar .7s steps(6) forwards; }
        @keyframes px-nbar { to { transform: translateY(80vh); opacity: 0; } }
        #splash.powering { background: transparent; }
        #splash.powering > :not(.power) { display: none; }
        #splash .power { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; animation: px-powerbg .95s ease forwards; }
        #splash .power .line { width: 100%; height: 3px; background: #fff; box-shadow: 0 0 20px #fff, 0 0 60px #bfffff; animation: px-line .95s cubic-bezier(.7,0,.2,1) forwards; }
        @keyframes px-line { 0% { transform: scaleX(0); } 30% { transform: scaleX(1); } 48% { transform: scaleX(1) scaleY(140); opacity: 1; } 70% { transform: scaleX(1) scaleY(1); opacity: .9; } 100% { transform: scaleX(0); opacity: 0; } }
        @keyframes px-powerbg { 0%, 55% { background: #000; } 100% { background: transparent; } }
        .px-settle { animation: px-settle 1.2s ease-out; }
        @keyframes px-settle { 0% { filter: brightness(2) contrast(1.3); } 100% { filter: none; } }
        /* Loot Drop decrypt flash */
        .px-cashflash { animation: px-cashflash .7s ease-out; }
        @keyframes px-cashflash { 0% { color: #fff; text-shadow: 0 0 18px #fff, 0 0 40px #00FF66; } 100% { text-shadow: none; } }
        /* Envelope drain: pink flash over the slice just spent */
        .px-ghost { position: fixed; z-index: 55; pointer-events: none; background: #FF007F; border-radius: 2px; animation: px-ghost 1.2s ease-out forwards; }
        @keyframes px-ghost { 0% { opacity: .9; } 100% { opacity: 0; } }
        /* Boss shatter, drawn over the card so a refresh can't cut it short */
        .px-boss { position: fixed; z-index: 55; pointer-events: none; }
        .px-boss .piece { position: absolute; inset: 0; border: 1px solid #FF007F; border-radius: 4px; background: rgba(255,0,127,.12); display: grid; place-items: center; font-family: 'Michroma', sans-serif; font-size: 12px; letter-spacing: .14em; color: #FF007F; animation: px-shard 1s cubic-bezier(.2,.6,.3,1) forwards; }
        @keyframes px-shard { to { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); } }
        .px-boss .stamp { position: absolute; inset: 0; display: grid; place-items: center; font-family: 'Michroma', sans-serif; font-size: 15px; letter-spacing: .22em; color: #00FF66; text-shadow: 0 0 12px rgba(0,255,102,.7); opacity: 0; animation: px-stamp 2.6s ease-out .55s forwards; }
        @keyframes px-stamp { 0% { opacity: 0; transform: scale(1.6); } 15% { opacity: 1; transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }
        /* Vault: glowing rings */
        .px-ring circle { fill: none; stroke-width: 6; }
        .px-ring .bg { stroke: #1d1d1d; }
        .px-ring .fg { stroke: #00FF66; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 1.1s cubic-bezier(.3,.7,.2,1); }
        .px-glow { filter: drop-shadow(0 0 7px rgba(0,255,102,.75)); transition: filter .4s; }
        /* Trophy Room + share cards */
        .trophy-tier { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; min-width: 64px; opacity: .3; filter: grayscale(1); }
        .trophy-tier.on { opacity: 1; filter: none; }
        .trophy-tier .medal { font-size: 22px; line-height: 1; }
        .trophy-tier.on .medal { text-shadow: 0 0 12px rgba(255,211,77,.7); }
        .trophy-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #222222; border-radius: 4px; padding: 4px 8px; font-size: 11px; background: #0D0D0D; cursor: pointer; color: #E2E2E8; }
        .trophy-chip:hover { border-color: #00FFFF; color: #00FFFF; }
        .trophy-chip:focus-visible { outline: 2px solid #00FFFF; outline-offset: 2px; }
        #share-modal { position: fixed; inset: 0; z-index: 58; background: rgba(0,0,0,.8); display: grid; place-items: center; padding: 16px; overflow-y: auto; }
        #share-modal .sheet { width: min(860px, 100%); background: #141414; border: 1px solid #222222; border-radius: 8px; padding: 16px; display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 16px; }
        @media (max-width: 700px) { #share-modal .sheet { grid-template-columns: 1fr; } }
        #share-canvas { display: block; max-width: 100%; height: auto; border-radius: 6px; margin: 0 auto; box-shadow: 0 10px 40px rgba(0,0,0,.6); }
        #share-canvas.story { width: 300px; }
        #share-canvas.square { width: 420px; }
        .share-seg button { font-size: 11px; border: 1px solid #222222; border-radius: 4px; padding: 4px 8px; background: #0D0D0D; color: #E2E2E8; }
        .share-seg button[aria-pressed="true"] { border-color: #00FFFF; color: #00FFFF; }
        #win-toast { position: fixed; right: 16px; bottom: 16px; z-index: 57; background: #141414; border: 1px solid #00FF66; border-radius: 6px; padding: 10px 12px; font-size: 12px; display: flex; gap: 10px; align-items: center; box-shadow: 0 0 20px rgba(0,255,102,.25); }
        /* These set their own display, which beats the browser's [hidden] rule: hide them explicitly */
        #share-modal[hidden], #win-toast[hidden] { display: none; }
        #main-nav > button { flex-shrink: 0; white-space: nowrap; }
    

/* PHONE // PAIRING: the server's QR SVG fills its white box */
.pairing-qr svg { width: 100%; height: 100%; }
        /* ===== Hosted offline mode (static/offline.js): last numbers, read-only ===== */
        #offline-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 55; padding: 8px 14px; font-size: 11px;
            background: #1a1405; color: #FFB300; border-bottom: 1px solid rgba(255,179,0,.45); text-align: center; }
        #offline-banner[hidden] { display: none; }
        body.paradigm-offline { padding-top: 52px !important; }
        body.paradigm-offline [id^="tab-"] { filter: saturate(.55); }
        /* Hosted phones get a third console button (✍ LOG SPEND): keep the command box usable, buttons wrap below */
        body[data-hosted] #command-form > .relative { min-width: 220px; }

        /* ===== First-run walkthrough (static/walkthrough.js). Full-screen terminal; the tour shrinks it
           to a caption card and dims everything but the spotlighted part of the real HUD. ===== */
        #walkthrough { position: fixed; inset: 0; z-index: 70; background: rgba(13, 13, 13, 0.97); overflow-y: auto;
                       display: flex; align-items: flex-start; justify-content: center; padding: 24px 16px; }
        #walkthrough[hidden] { display: none; }
        #walkthrough::before { content: ""; position: fixed; inset: 0; pointer-events: none;
            background: repeating-linear-gradient(0deg, rgba(0, 255, 255, 0.035) 0 1px, transparent 1px 3px); }
        #walkthrough.wt-tour { background: transparent; pointer-events: none; align-items: flex-end; padding: 16px; }
        #walkthrough.wt-tour::before { display: none; }
        body.wt-open { overflow: hidden; }
        .wt-panel, .wt-card { position: relative; width: 100%; max-width: 680px; background: var(--panel-bg);
            border: 1px solid rgba(0, 255, 255, 0.45); border-radius: 6px; padding: 20px;
            box-shadow: 0 0 40px rgba(0, 255, 255, 0.12), inset 0 0 60px rgba(0, 255, 255, 0.03); }
        .wt-card { max-width: 520px; pointer-events: auto; margin: 0 auto; box-shadow: 0 0 40px rgba(0, 0, 0, 0.9), 0 0 24px rgba(0, 255, 255, 0.2); }
        .wt-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px;
                   border-bottom: 1px solid var(--border-line); padding-bottom: 10px; margin-bottom: 12px; }
        .wt-title { font-family: 'Michroma', sans-serif; font-size: 12px; letter-spacing: .08em; color: var(--cyan-glow);
                    text-shadow: 0 0 8px rgba(0, 255, 255, 0.5); }
        .wt-step { font-size: 10px; letter-spacing: .12em; color: var(--pink-glow); margin-bottom: 8px; }
        .wt-skip { font-size: 10px; letter-spacing: .1em; color: var(--text-muted); border: 1px solid var(--border-line);
                   border-radius: 4px; padding: 6px 10px; background: transparent; cursor: pointer; }
        .wt-skip:hover, .wt-skip:focus-visible { color: var(--pink-glow); border-color: var(--pink-glow); }
        .wt-text { min-height: 3.5em; cursor: default; }
        .wt-line { font-size: 14px; line-height: 1.6; color: var(--text-main); margin: 0 0 8px; }
        .wt-line:first-child { color: var(--green-glow); }
        .wt-caret::after { content: "▌"; color: var(--cyan-glow); animation: wt-blink 1s steps(1) infinite; margin-left: 2px; }
        @keyframes wt-blink { 50% { opacity: 0; } }
        .wt-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
        .wt-hidden { display: none; }
        .wt-field { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--text-muted); }
        .wt-wide, .wt-actions, .wt-hint, .wt-error { grid-column: 1 / -1; }
        .wt-label { display: block; font-size: 11px; color: var(--text-muted); margin-bottom: 6px; }
        .wt-controls input, .wt-controls select { width: 100%; min-width: 0; background: var(--bg-void); color: #fff;
            border: 1px solid var(--border-line); border-radius: 4px; padding: 9px 10px; font: inherit; font-size: 13px; }
        .wt-controls input:focus, .wt-controls select:focus { outline: none; border-color: var(--cyan-glow);
            box-shadow: 0 0 0 1px rgba(0, 255, 255, 0.4); }
        .wt-row { display: grid; grid-template-columns: 1fr auto; gap: 6px; margin-bottom: 6px; align-items: center; }
        .wt-grid3 { grid-template-columns: 2fr 1fr 1fr auto; }
        .wt-grid4 { grid-template-columns: 2fr 1fr 0.8fr 1.3fr auto; }
        .wt-grid5 { grid-template-columns: 1.6fr 1fr 1fr 0.7fr 0.8fr auto; }
        .wt-x { color: var(--text-muted); background: transparent; border: 1px solid var(--border-line); border-radius: 4px;
                padding: 8px 10px; cursor: pointer; }
        .wt-x:hover { color: var(--pink-glow); border-color: var(--pink-glow); }
        .wt-add { font-size: 11px; color: var(--cyan-glow); background: transparent; border: 0; cursor: pointer; padding: 4px 0; }
        .wt-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
        .wt-chips .wt-label { width: 100%; margin: 0; }
        .wt-chip { font-size: 11px; color: var(--green-glow); border: 1px solid rgba(0, 255, 102, 0.4); background: rgba(0, 255, 102, 0.06);
                   border-radius: 999px; padding: 5px 10px; cursor: pointer; }
        .wt-chip:hover { background: rgba(0, 255, 102, 0.16); }
        .wt-hint { font-size: 11px; color: var(--text-muted); margin: 0; }
        .wt-error { font-size: 12px; color: var(--pink-glow); margin: 0; }
        .wt-dim { color: var(--text-muted); }
        .wt-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 6px; }
        .wt-btn { font-family: 'Michroma', sans-serif; font-size: 10px; letter-spacing: .1em; padding: 10px 14px; border-radius: 4px;
                  border: 1px solid var(--border-line); color: var(--text-main); background: transparent; cursor: pointer; }
        .wt-btn:hover, .wt-btn:focus-visible { border-color: var(--cyan-glow); color: var(--cyan-glow); outline: none; }
        .wt-btn:disabled { opacity: .5; cursor: wait; }
        .wt-primary { background: var(--cyan-glow); color: var(--bg-void); border-color: var(--cyan-glow); font-weight: 700; }
        .wt-primary:hover, .wt-primary:focus-visible { background: #7ffcff; color: var(--bg-void); }
        .wt-toggle { grid-column: 1 / -1; justify-self: start; }
        .wt-toggle.wt-on { border-color: var(--green-glow); color: var(--green-glow); box-shadow: 0 0 12px rgba(0, 255, 102, 0.25); }
        .wt-shift { width: 100%; font-size: 14px; padding: 18px; box-shadow: 0 0 30px rgba(0, 255, 255, 0.45); }
        .wt-review { border: 1px solid var(--border-line); border-radius: 4px; }
        .wt-rev { display: grid; grid-template-columns: 9.5rem 1fr; gap: 10px; padding: 8px 10px; font-size: 12px;
                  border-bottom: 1px solid var(--border-line); }
        .wt-rev:last-child { border-bottom: 0; }
        .wt-rev span:first-child { color: var(--text-muted); }
        .wt-rev span:last-child { color: #fff; word-break: break-word; }
        /* !important: tailwind.css loads after this file and some targets carry their own shadow-[...] */
        .wt-spot { position: relative; z-index: 60; border-radius: 6px; outline: 2px solid var(--cyan-glow) !important; outline-offset: 4px;
                   box-shadow: 0 0 0 4px var(--bg-void), 0 0 0 9999px rgba(13, 13, 13, 0.82), 0 0 28px rgba(0, 255, 255, 0.6) !important; }
        @media (max-width: 640px) {
            #walkthrough { padding: 12px 12px 24px; }
            .wt-panel { padding: 16px; }
            .wt-controls { grid-template-columns: 1fr; }
            .wt-grid3, .wt-grid4, .wt-grid5 { grid-template-columns: 1fr 1fr; padding: 8px; border: 1px solid var(--border-line); border-radius: 4px; }
            .wt-grid3 > input:first-child, .wt-grid4 > input:first-child, .wt-grid5 > input:first-child { grid-column: 1 / -1; }
            .wt-rev { grid-template-columns: 1fr; gap: 2px; }
            .wt-line { font-size: 13px; }
        }
        @media (prefers-reduced-motion: reduce) { .wt-caret::after { animation: none; } }
        body.still .wt-spot { box-shadow: 0 0 0 4px var(--bg-void), 0 0 0 9999px rgba(13, 13, 13, 0.82) !important; }