/* emergency-ai — matte-black neon "JARVIS HUD" design system Ambient urgency theming via */ :root{ --bg:#04060a; --bg-1:#070b12; --surface:rgba(18,24,34,.62); --surface-2:rgba(28,36,50,.72); --glass-brd:rgba(120,190,255,.14); --glass-hi:rgba(180,230,255,.06); --neon:#2ee6ff; --neon-dim:#1aa6c4; --neon-soft:rgba(46,230,255,.14); --ok:#30e87a; --u-low:#30e87a; --u-medium:#ffd60a; --u-high:#ff7a18; --u-critical:#ff2d55; --text:#eaf6ff; --text-dim:#8fa6bd; --text-mut:#5b6f86; --r-s:10px; --r-m:16px; --r-l:24px; --r-xl:34px; --blur:18px; --glow:0 0 22px var(--neon-soft); --glow-strong:0 0 38px rgba(46,230,255,.32); --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace; --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif; --ease:cubic-bezier(.22,1,.36,1); --ease-in:cubic-bezier(.5,0,.75,0); /* accent = ambient urgency colour; idle = neon */ --accent:var(--neon); --accent-soft:var(--neon-soft); --pulse:7s; } html[data-urgency="low"] {--accent:var(--u-low); --accent-soft:rgba(48,232,122,.16); --pulse:7s;} html[data-urgency="medium"] {--accent:var(--u-medium); --accent-soft:rgba(255,214,10,.16); --pulse:4.5s;} html[data-urgency="high"] {--accent:var(--u-high); --accent-soft:rgba(255,122,24,.20); --pulse:3s;} html[data-urgency="critical"]{--accent:var(--u-critical);--accent-soft:rgba(255,45,85,.26); --pulse:1.6s;} *{box-sizing:border-box;margin:0;padding:0} html,body{height:100%} body{ font-family:var(--sans); color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; position:relative; min-height:100dvh; background: radial-gradient(1200px 700px at 80% -10%, rgba(46,230,255,.07), transparent 60%), radial-gradient(1000px 600px at -10% 110%, rgba(46,230,255,.05), transparent 55%), var(--bg); } button,input,select{font-family:inherit;color:inherit} button{cursor:pointer;border:none;background:none} b{font-weight:700} /* grain + ambient breathing glow that reacts to urgency */ .grain{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.05;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");} .ambient{position:fixed;inset:-20%;pointer-events:none;z-index:0; background:radial-gradient(60% 50% at 50% 18%, var(--accent-soft), transparent 70%); animation:breathe var(--pulse) var(--ease) infinite; transition:background .6s linear;} @keyframes breathe{0%,100%{opacity:.45;transform:scale(1)}50%{opacity:.9;transform:scale(1.06)}} #app{position:relative;z-index:2;max-width:540px;margin:0 auto;padding:14px 16px calc(28px + env(safe-area-inset-bottom)); display:flex;flex-direction:column;gap:16px} /* ── topbar ── */ .topbar{display:flex;align-items:center;justify-content:space-between;padding-top:env(safe-area-inset-top)} .brand{display:flex;align-items:center;gap:9px} .logo{width:30px;height:30px;filter:drop-shadow(0 0 8px var(--accent-soft))} .logo-bg{fill:rgba(20,28,40,.9);stroke:var(--glass-brd);stroke-width:1} .logo-cross{stroke:var(--accent);stroke-width:2.4;stroke-linecap:round;transition:stroke .5s} .logo-pulse{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round; opacity:.85;stroke-dasharray:40;animation:trace 3.2s linear infinite;transition:stroke .5s} @keyframes trace{from{stroke-dashoffset:40}to{stroke-dashoffset:-40}} .brand-name{font-weight:600;letter-spacing:.3px;font-size:17px} .brand-name b{color:var(--accent);font-weight:800} .topbar-right{display:flex;align-items:center;gap:8px} .icon-btn{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:17px; background:var(--surface);border:1px solid var(--glass-brd);backdrop-filter:blur(var(--blur)); transition:transform .2s var(--ease),border-color .2s} .icon-btn:active{transform:scale(.92)} .icon-btn:hover{border-color:var(--accent)} .badge{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:999px;font-size:12px; background:var(--surface);border:1px solid var(--glass-brd);backdrop-filter:blur(var(--blur));color:var(--text-dim)} .badge .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok)} .badge-net[data-mode="live"] .dot{background:var(--neon);box-shadow:0 0 10px var(--neon)} .badge-net[data-mode="offline"] .dot{background:var(--u-medium);box-shadow:0 0 10px var(--u-medium)} /* ── hero: SOS orb ── */ .hero{display:flex;flex-direction:column;align-items:center;gap:18px;padding:8px 0 4px} .orb-wrap{position:relative;width:200px;height:200px;display:grid;place-items:center} .sos-orb{position:relative;width:184px;height:184px;border-radius:50%;display:grid;place-items:center; background:radial-gradient(circle at 50% 38%, rgba(46,230,255,.20), rgba(10,16,24,.9) 66%); border:1px solid var(--glass-brd);box-shadow:var(--glow),inset 0 0 40px rgba(46,230,255,.08); -webkit-tap-highlight-color:transparent;touch-action:none; animation:orbPulse var(--pulse) var(--ease) infinite;transition:box-shadow .4s} @keyframes orbPulse{0%,100%{box-shadow:0 0 30px var(--accent-soft),inset 0 0 40px rgba(46,230,255,.08)} 50%{box-shadow:0 0 64px var(--accent-soft),inset 0 0 60px rgba(46,230,255,.14)}} .orb-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)} .orb-track{fill:none;stroke:rgba(255,255,255,.06);stroke-width:3} .orb-fill{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round; stroke-dasharray:339;stroke-dashoffset:339;filter:drop-shadow(0 0 6px var(--accent));transition:stroke-dashoffset .08s linear} .orb-core{display:flex;flex-direction:column;align-items:center;gap:2px;z-index:2} .orb-label{font-weight:800;font-size:40px;letter-spacing:3px;color:var(--text);text-shadow:0 0 18px var(--accent-soft)} .orb-hint{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--text-mut)} .sos-orb.charging .orb-core{transform:scale(1.06);transition:transform .3s} .sos-orb.fired{animation:fired .5s var(--ease)} @keyframes fired{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}} /* ── ask field ── */ .ask-row{width:100%;display:flex;flex-direction:column;gap:10px} .ask-field{position:relative;display:flex;align-items:center} .ask-input{flex:1;padding:16px 54px 16px 18px;border-radius:var(--r-l);font-size:16px; background:var(--surface);border:1px solid var(--glass-brd);backdrop-filter:blur(var(--blur)); box-shadow:inset 0 0 0 1px var(--glass-hi);transition:border-color .25s,box-shadow .25s} .ask-input::placeholder{color:var(--text-mut)} .ask-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)} .mic-btn{position:absolute;right:8px;width:40px;height:40px;border-radius:50%;font-size:18px;display:grid;place-items:center; background:var(--surface-2);border:1px solid var(--glass-brd);transition:transform .2s} .mic-btn:active{transform:scale(.9)} .mic-btn.recording{background:var(--u-critical);border-color:var(--u-critical);animation:rec 1s infinite} @keyframes rec{50%{box-shadow:0 0 0 8px rgba(255,45,85,.25)}} .city-row{display:flex;gap:10px} .city-select{flex:1;padding:13px 16px;border-radius:var(--r-m);font-size:14px;appearance:none; background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238fa6bd' fill='none' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 16px center; border:1px solid var(--glass-brd);backdrop-filter:blur(var(--blur))} .ghost-btn{padding:13px 16px;border-radius:var(--r-m);font-size:13px;white-space:nowrap;color:var(--text-dim); background:transparent;border:1px solid var(--glass-brd);transition:border-color .2s,color .2s} .ghost-btn:hover{border-color:var(--accent);color:var(--text)} /* ── latency HUD + heatmap ── */ .hud-row{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:10px 14px;align-items:center; padding:12px 14px;border-radius:var(--r-m);background:var(--surface);border:1px solid var(--glass-brd);backdrop-filter:blur(var(--blur))} .gauge{position:relative;width:120px;grid-row:span 2} .gauge svg{width:120px;height:70px;overflow:visible} .gauge-track{fill:none;stroke:rgba(255,255,255,.08);stroke-width:7;stroke-linecap:round} .gauge-arc{fill:none;stroke:var(--accent);stroke-width:7;stroke-linecap:round;stroke-dasharray:157; stroke-dashoffset:157;filter:drop-shadow(0 0 6px var(--accent));transition:stroke-dashoffset .6s var(--ease)} .gauge-needle{stroke:var(--accent);stroke-width:2.4;stroke-linecap:round;transform-origin:60px 64px; transform:rotate(-90deg);transition:transform .6s var(--ease)} .gauge-read{position:absolute;bottom:-2px;left:0;right:0;text-align:center} .gauge-read b{font-family:var(--mono);font-size:20px;color:var(--accent)} .gauge-read span{display:block;font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-mut)} .hud-meta{display:flex;gap:16px} .hud-stat{display:flex;flex-direction:column} .hud-stat span{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--text-mut)} .hud-stat b{font-family:var(--mono);font-size:15px;color:var(--text)} .heatmap{grid-column:2;display:flex;flex-wrap:wrap;gap:5px} .heat-chip{font-size:10px;padding:3px 7px;border-radius:6px;border:1px solid var(--glass-brd);color:var(--text-mut); transition:all .5s} .heat-chip.warm{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);box-shadow:0 0 10px var(--accent-soft)} /* ── response panel ── */ .response{display:flex;flex-direction:column;gap:14px;padding:16px;border-radius:var(--r-l); background:var(--surface);border:1px solid var(--glass-brd);backdrop-filter:blur(var(--blur)); box-shadow:0 12px 40px rgba(0,0,0,.4),inset 0 0 0 1px var(--glass-hi); animation:rise .5s var(--ease)} @keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} .resp-head{display:flex;align-items:center;justify-content:space-between;gap:12px} .urgency-banner{flex:1;padding:12px 16px;border-radius:var(--r-m);font-weight:800;letter-spacing:2px;text-transform:uppercase; font-size:15px;color:#fff;background:linear-gradient(100deg,var(--accent),transparent 140%); border:1px solid var(--accent);box-shadow:0 0 24px var(--accent-soft)} .resp-timer{text-align:center;min-width:74px;padding:8px;border-radius:var(--r-m);background:var(--bg-1);border:1px solid var(--glass-brd)} .resp-timer .t-num{font-family:var(--mono);font-size:26px;font-weight:700;color:var(--accent)} .resp-timer .t-unit{font-family:var(--mono);font-size:14px;color:var(--text-dim)} .resp-timer .t-cap{display:block;font-size:9px;letter-spacing:1px;text-transform:uppercase;color:var(--text-mut)} .resp-block{display:flex;flex-direction:column;gap:8px} .resp-h{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-dim); display:flex;align-items:center;justify-content:space-between} .chip-toggle{font-size:11px;padding:4px 10px;border-radius:999px;color:var(--text-mut);border:1px solid var(--glass-brd);transition:all .2s} .chip-toggle[aria-pressed="true"]{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)} .actions{list-style:none;display:flex;flex-direction:column;gap:8px;counter-reset:a} .actions li{position:relative;padding:12px 12px 12px 44px;border-radius:var(--r-m);background:var(--bg-1); border:1px solid var(--glass-brd);font-size:15px;line-height:1.4;counter-increment:a; transition:border-color .2s,background .2s} .actions li::before{content:counter(a);position:absolute;left:10px;top:11px;width:24px;height:24px;border-radius:50%; display:grid;place-items:center;font-family:var(--mono);font-size:13px;font-weight:700;color:var(--accent); background:var(--accent-soft);border:1px solid var(--accent)} .actions li.done{opacity:.5;text-decoration:line-through} .actions li.done::before{content:'✓';color:var(--ok);background:rgba(48,232,122,.14);border-color:var(--ok)} .actions li .why{margin-top:7px;font-size:13px;color:var(--text-dim);border-left:2px solid var(--accent);padding-left:10px; max-height:0;overflow:hidden;transition:max-height .3s var(--ease),margin .3s,opacity .3s;opacity:0} .actions.show-why li .why{max-height:120px;margin-top:8px;opacity:1} /* streaming token reveal */ .tok{opacity:0;filter:blur(6px);display:inline;animation:tokIn .26s var(--ease) forwards} @keyframes tokIn{to{opacity:1;filter:blur(0)}} .calls{display:flex;flex-wrap:wrap;gap:8px} .call-btn{display:flex;align-items:center;gap:9px;padding:11px 15px;border-radius:var(--r-m);font-size:15px;font-weight:600; background:linear-gradient(120deg,var(--accent),var(--neon-dim));color:#04121a;text-decoration:none; box-shadow:0 4px 18px var(--accent-soft);transition:transform .15s} .call-btn:active{transform:scale(.95)} .call-btn small{font-weight:500;opacity:.7;font-size:11px} .call-btn.secondary{background:var(--surface-2);color:var(--text);border:1px solid var(--glass-brd);box-shadow:none} .avoid{list-style:none;display:flex;flex-direction:column;gap:6px} .avoid li{position:relative;padding:8px 12px 8px 30px;font-size:14px;color:var(--text-dim);border-radius:var(--r-s);background:rgba(255,45,85,.05)} .avoid li::before{content:'✕';position:absolute;left:11px;top:8px;color:var(--u-critical);font-weight:700} .notes{font-size:13px;line-height:1.55;color:var(--text-dim);padding:11px 13px;border-radius:var(--r-m); background:var(--bg-1);border:1px solid var(--glass-brd);border-left:3px solid var(--u-medium)} .resp-foot{display:flex;flex-direction:column;gap:10px} .conf{display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--text-mut)} .conf-bar{flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,.06);overflow:hidden} .conf-bar i{display:block;height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,var(--u-high),var(--ok)); box-shadow:0 0 10px var(--accent-soft);transition:width .8s var(--ease)} .disclaimer{font-size:11px;line-height:1.5;color:var(--text-mut);padding:9px 11px;border-radius:var(--r-s); background:rgba(255,214,10,.05);border:1px solid rgba(255,214,10,.14)} /* action bar */ .actionbar{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:2px} .ab{display:flex;flex-direction:column;align-items:center;gap:4px;padding:11px 4px;border-radius:var(--r-m); background:var(--bg-1);border:1px solid var(--glass-brd);transition:transform .15s,border-color .2s,background .2s} .ab span{font-size:19px} .ab small{font-size:10px;color:var(--text-dim);letter-spacing:.3px} .ab:active{transform:scale(.93)} .ab:hover{border-color:var(--accent)} .ab.active{border-color:var(--accent);background:var(--accent-soft)} .ab.active small{color:var(--accent)} /* ── scenario grid ── */ .section-h{display:flex;align-items:center;justify-content:space-between;font-size:13px;letter-spacing:1.5px; text-transform:uppercase;color:var(--text-dim);margin-bottom:2px} .kbd-hint{font-family:var(--mono);font-size:11px;padding:4px 9px;border-radius:7px;color:var(--text-mut); border:1px solid var(--glass-brd);background:var(--surface)} .scenario-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px} .scn{display:flex;flex-direction:column;align-items:center;gap:6px;padding:13px 4px;border-radius:var(--r-m); background:var(--surface);border:1px solid var(--glass-brd);backdrop-filter:blur(var(--blur)); transition:transform .15s,border-color .2s,box-shadow .2s;text-align:center} .scn:active{transform:scale(.94)} .scn:hover{border-color:var(--accent);box-shadow:0 0 18px var(--accent-soft)} .scn .scn-ico{font-size:23px} .scn .scn-lbl{font-size:10.5px;line-height:1.2;color:var(--text-dim)} .scn[data-u="critical"] .scn-ico{filter:drop-shadow(0 0 6px var(--u-critical))} /* ── tools ── */ .tools{display:grid;grid-template-columns:repeat(2,1fr);gap:8px} .tool{display:flex;align-items:center;gap:9px;padding:13px 15px;border-radius:var(--r-m);font-size:13px;text-align:left; background:var(--surface);border:1px solid var(--glass-brd);backdrop-filter:blur(var(--blur)); transition:border-color .2s,transform .15s} .tool:active{transform:scale(.97)} .tool:hover{border-color:var(--accent)} .appfoot{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--text-mut); padding-top:6px;border-top:1px solid var(--glass-brd)} .appfoot a{color:var(--text-dim);text-decoration:none} .appfoot a:hover{color:var(--accent)} /* ── modals & sheets ── */ .modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:20px; background:rgba(2,4,8,.72);backdrop-filter:blur(8px);animation:fade .25s var(--ease)} @keyframes fade{from{opacity:0}to{opacity:1}} .modal-card{width:100%;max-width:440px;padding:24px;border-radius:var(--r-l); background:var(--surface-2);border:1px solid var(--glass-brd);backdrop-filter:blur(26px); box-shadow:0 24px 70px rgba(0,0,0,.6);animation:rise .35s var(--ease)} .triage-q{font-size:21px;font-weight:700;line-height:1.3;margin-bottom:18px;text-align:center} .triage-opts{display:flex;flex-direction:column;gap:10px} .triage-opt{padding:16px;border-radius:var(--r-m);font-size:16px;font-weight:600;text-align:left; background:var(--bg-1);border:1px solid var(--glass-brd);transition:transform .15s,border-color .2s} .triage-opt:active{transform:scale(.97)} .triage-opt:hover{border-color:var(--accent)} .modal-skip{display:block;margin:16px auto 0;font-size:12px;color:var(--text-mut)} /* guided full-screen */ .guided{background:rgba(2,4,8,.94);backdrop-filter:blur(4px)} .guided-inner{position:relative;width:100%;max-width:520px;height:100%;max-height:680px;display:flex;flex-direction:column; align-items:center;justify-content:center;text-align:center;gap:24px;padding:30px} .guided-step-num{font-family:var(--mono);font-size:14px;color:var(--text-mut)} .guided-step-num span:first-child{color:var(--accent);font-size:18px} .guided-text{font-size:30px;font-weight:700;line-height:1.25;max-width:14ch} .guided-why{font-size:15px;color:var(--text-dim);max-width:30ch;border-top:1px solid var(--glass-brd);padding-top:14px} .guided-controls{display:flex;gap:12px;width:100%;max-width:420px} .g-btn{flex:1;padding:18px;border-radius:var(--r-m);font-size:16px;font-weight:600; background:var(--surface);border:1px solid var(--glass-brd);transition:transform .15s} .g-btn:active{transform:scale(.96)} .g-next{background:linear-gradient(120deg,var(--accent),var(--neon-dim));color:#04121a;border:none} .g-done{display:none} .guided-close{position:absolute;top:16px;right:16px;width:42px;height:42px;border-radius:50%;font-size:18px; background:var(--surface);border:1px solid var(--glass-brd)} .guided-metro{position:absolute;bottom:24px;font-family:var(--mono);font-size:13px;color:var(--accent);display:flex;align-items:center;gap:8px} .metro-dot{width:12px;height:12px;border-radius:50%;background:var(--u-critical);box-shadow:0 0 12px var(--u-critical)} .metro-dot.beat{animation:beat .12s var(--ease)} @keyframes beat{0%{transform:scale(1.8);opacity:1}100%{transform:scale(1)}} /* command palette */ .palette{align-items:flex-start;padding-top:14vh} .palette-card{width:100%;max-width:480px;border-radius:var(--r-l);overflow:hidden; background:var(--surface-2);border:1px solid var(--glass-brd);backdrop-filter:blur(26px); box-shadow:0 24px 70px rgba(0,0,0,.6);animation:rise .25s var(--ease)} .palette-input{width:100%;padding:18px 20px;font-size:17px;background:transparent;border:none;border-bottom:1px solid var(--glass-brd)} .palette-input:focus{outline:none} .palette-results{max-height:50vh;overflow-y:auto} .pal-item{display:flex;align-items:center;gap:12px;padding:13px 20px;font-size:15px;cursor:pointer;transition:background .12s} .pal-item .pal-ico{font-size:18px;width:24px;text-align:center} .pal-item .pal-kind{margin-left:auto;font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--text-mut)} .pal-item.sel,.pal-item:hover{background:var(--accent-soft)} /* bottom sheet */ .sheet{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center; background:rgba(2,4,8,.6);backdrop-filter:blur(6px);animation:fade .2s var(--ease)} .sheet-card{width:100%;max-width:540px;max-height:86vh;overflow-y:auto;border-radius:var(--r-xl) var(--r-xl) 0 0; background:var(--surface-2);border:1px solid var(--glass-brd);border-bottom:none;backdrop-filter:blur(26px); padding:18px 18px calc(28px + env(safe-area-inset-bottom));animation:sheetUp .35s var(--ease)} @keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}} .sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;position:sticky;top:0} .sheet-head h3{font-size:18px} .sheet-body{display:flex;flex-direction:column;gap:12px} /* generic cards inside sheets */ .law-city{padding:14px;border-radius:var(--r-m);background:var(--bg-1);border:1px solid var(--glass-brd)} .law-city h4{font-size:15px;margin-bottom:6px;display:flex;gap:8px;align-items:center} .law-item{font-size:13px;color:var(--text-dim);line-height:1.5;margin-top:7px;padding-left:12px;border-left:2px solid var(--accent)} .law-item b{color:var(--text)} .kv{display:flex;justify-content:space-between;font-size:14px;padding:9px 0;border-bottom:1px solid var(--glass-brd)} .kv:last-child{border:none} .field{display:flex;flex-direction:column;gap:5px} .field label{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--text-mut)} .field input,.field textarea,.field select{padding:11px 13px;border-radius:var(--r-s);font-size:14px; background:var(--bg-1);border:1px solid var(--glass-brd)} .field input:focus,.field textarea:focus{outline:none;border-color:var(--accent)} .btn-primary{padding:13px;border-radius:var(--r-m);font-size:15px;font-weight:600; background:linear-gradient(120deg,var(--accent),var(--neon-dim));color:#04121a} .timeline-row{display:flex;gap:12px;font-size:13px;padding:9px 0;border-bottom:1px solid var(--glass-brd)} .timeline-row time{font-family:var(--mono);color:var(--text-mut);min-width:64px} /* skeleton shimmer */ .skel{position:relative;overflow:hidden;background:var(--bg-1);border-radius:var(--r-m)} .skel::after{content:'';position:absolute;inset:0;transform:translateX(-100%); background:linear-gradient(90deg,transparent,var(--glass-hi),transparent);animation:shimmer 1.2s infinite} @keyframes shimmer{100%{transform:translateX(100%)}} .skel-line{height:44px;margin-bottom:8px} /* toast */ .toast{position:fixed;left:50%;bottom:calc(26px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(20px); z-index:80;max-width:90vw;padding:13px 20px;border-radius:999px;font-size:14px;opacity:0;pointer-events:none; background:var(--surface-2);border:1px solid var(--accent);backdrop-filter:blur(20px);box-shadow:var(--glow-strong); transition:opacity .3s,transform .3s var(--ease)} .toast.show{opacity:1;transform:translateX(-50%) translateY(0)} [hidden]{display:none!important} /* desktop niceties */ @media(min-width:600px){ #app{padding-top:24px} .scenario-grid{grid-template-columns:repeat(5,1fr)} } /* RTL for Arabic */ html[dir="rtl"] .actions li{padding:12px 44px 12px 12px} html[dir="rtl"] .actions li::before{left:auto;right:10px} html[dir="rtl"] .avoid li{padding:8px 30px 8px 12px} html[dir="rtl"] .avoid li::before{left:auto;right:11px} @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} .ambient{animation:none} }