/* Pre-paint auth gating: hide whichever view doesn't match the saved token, set synchronously in so there's no login-page flash on refresh. The main script still calls showApp()/logout to keep these in sync. */ html[data-auth="in"] #login { display:none !important; } html[data-auth="out"] #app { display:none !important; } /* No-flash i18n: keep the page invisible until the i18n module has filled in the static text in the resolved language, so the user never sees a flash of the source language before it's translated. Revealed by setting data-i18n-ready (see js/i18n.js), which runs before first meaningful paint. */ html:not([data-i18n-ready]) body { visibility:hidden; } /* ---- Theme tokens: dark (default) ---- */ :root { --bg:#070b14; --panel:rgba(18,26,42,0.72); --panel-solid:#0e1626; --panel2:rgba(8,13,24,0.85); --line:rgba(90,120,180,0.18); --line2:rgba(90,120,180,0.30); --fg:#dbe6f5; --mut:#8294b0; --cy:#22d3ee; --br:#3b82f6; --vio:#8b5cf6; --ok:#34d399; --err:#fb7185; --warn:#fbbf24; --glow:0 0 24px rgba(34,211,238,0.18); --shadow:0 10px 40px rgba(0,0,0,0.4); --hov:rgba(60,80,120,0.14); --acc-soft:rgba(59,130,246,0.14); --app-bg: radial-gradient(1200px 700px at 85% -10%, rgba(59,130,246,0.16), transparent 60%), radial-gradient(900px 600px at -10% 110%, rgba(139,92,246,0.14), transparent 55%), var(--bg); } /* ---- Light theme overrides ---- */ html[data-theme="light"] { --bg:#eef2f8; --panel:rgba(255,255,255,0.82); --panel-solid:#ffffff; --panel2:rgba(255,255,255,0.92); --line:rgba(40,70,120,0.14); --line2:rgba(40,70,120,0.24); --fg:#1b2536; --mut:#5d6b85; --cy:#0891b2; --br:#2563eb; --vio:#7c3aed; --ok:#059669; --err:#e11d48; --warn:#d97706; --glow:0 0 24px rgba(37,99,235,0.10); --shadow:0 10px 30px rgba(30,50,90,0.12); --hov:rgba(40,70,120,0.07); --acc-soft:rgba(37,99,235,0.10); --app-bg: radial-gradient(1100px 650px at 88% -12%, rgba(37,99,235,0.10), transparent 60%), radial-gradient(820px 560px at -8% 112%, rgba(124,58,237,0.08), transparent 55%), var(--bg); } * { box-sizing:border-box; } html,body { height:100%; overscroll-behavior:none; } body { margin:0; color:var(--fg); font:14px/1.55 -apple-system,Segoe UI,Roboto,"PingFang SC",sans-serif; background:var(--app-bg); background-attachment:fixed; transition:background .25s,color .25s; } a { color:var(--cy); } .hidden { display:none !important; } .mono { font-family:ui-monospace,Menlo,Consolas,monospace; } .mut { color:var(--mut); } input,select,textarea,button { font:inherit; color:var(--fg); } .field { width:100%; padding:10px 12px; background:var(--panel2); border:1px solid var(--line); border-radius:10px; outline:none; transition:border-color .15s,box-shadow .15s; } .field:focus { border-color:var(--cy); box-shadow:0 0 0 3px var(--acc-soft); } /* The console is mouse-driven. Tabbing must never paint the browser's default focus ring (it looked broken on buttons, links, cells and scroll regions). Deliberate focus affordances (inputs, terminal) use border/box-shadow, not outline, so they are unaffected. */ :focus { outline:none !important; } :focus-visible { outline:none !important; } /* Password field with an inline show/hide eye button. */ .pwf { position:relative; } .pwf .field { padding-right:38px; } .pwf-eye { position:absolute; right:6px; top:50%; transform:translateY(-50%); width:28px; height:28px; display:flex; align-items:center; justify-content:center; background:none; border:none; color:var(--mut); cursor:pointer; border-radius:7px; } .pwf-eye:hover { color:var(--fg); background:var(--hov); } select.field { appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:32px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238294b0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 11px center; } /* Custom select popup: replaces the native OS dropdown list so options match the app theme. The real