/* Pleos Connect simulator (independent illustration based on the public Pleos Connect UI Design Guide) */
.pc{
  position:absolute;inset:0;overflow:hidden;background:#000;
  --bg:#08090b;--win:#1a1c21;--win-2:#25282f;--win-3:#33363e;--elev:#23262c;
  --text:#fff;--text-2:rgba(255,255,255,.7);--text-3:rgba(255,255,255,.45);
  --line:rgba(255,255,255,.08);--line-2:rgba(255,255,255,.16);--handle:rgba(255,255,255,.34);--hover:rgba(255,255,255,.06);
  --accent:#6f5cff;--accent-2:#a196ff;--accent-soft:rgba(111,92,255,.22);--accent-glow:rgba(111,92,255,.6);
  --green:#3adc93;--red:#fa293c;--orange:#ff9b42;--scrim:rgba(0,0,0,.5);
  --shadow-1:0 1px 2px rgba(0,0,0,.4);--shadow-2:0 8px 24px rgba(0,0,0,.35),0 2px 4px rgba(0,0,0,.25);
  --shadow-3:0 20px 40px rgba(0,0,0,.45),0 2px 4px rgba(0,0,0,.3);--win-shadow:none;
  --road:rgba(255,255,255,.035);--road-line:rgba(255,255,255,.3);--car:#eef0f4;--car-o:#737985;
  --map-bg:#121418;--map-bld:#1a1d22;--map-road:#23262d;--map-main:#363b45;--map-casing:#0c0d10;--map-water:#11202f;
  --map-park:#14211a;--map-label:rgba(255,255,255,.42);--map-poi:#5a606c;--map-done:#4a4f5a;
}
.pc[data-theme="day"]{
  --bg:#e9ebef;--win:#fff;--win-2:#f1f2f5;--win-3:#e2e4e9;--elev:#fff;
  --text:#14161a;--text-2:rgba(20,22,26,.68);--text-3:rgba(20,22,26,.45);
  --line:rgba(0,0,0,.08);--line-2:rgba(0,0,0,.14);--handle:rgba(0,0,0,.25);--hover:rgba(0,0,0,.04);
  --accent:#5a46fa;--accent-2:#4b38e9;--accent-soft:rgba(90,70,250,.12);--accent-glow:rgba(90,70,250,.35);
  --scrim:rgba(20,22,26,.18);--shadow-1:0 1px 2px rgba(0,0,0,.08);
  --shadow-2:0 6px 4px -2px rgba(0,0,0,.03),0 16px 24px -4px rgba(0,0,0,.1);
  --shadow-3:0 8px 8px -4px rgba(0,0,0,.04),0 28px 40px -4px rgba(0,0,0,.16);
  --win-shadow:0 1px 2px rgba(0,0,0,.05),0 8px 24px -8px rgba(0,0,0,.08);
  --road:rgba(0,0,0,.04);--road-line:rgba(0,0,0,.24);--car:#3b414b;--car-o:#a8aeb8;
  --map-bg:#eef0f3;--map-bld:#e1e4e9;--map-road:#fff;--map-main:#fff;--map-casing:#d3d7de;--map-water:#cfe0f2;
  --map-park:#d6ead8;--map-label:rgba(20,22,26,.5);--map-poi:#9aa1ac;--map-done:#b9bec7;
}
.pc-stage{
  position:absolute;left:0;top:0;width:1600px;height:900px;transform-origin:0 0;overflow:hidden;
  background:var(--bg);color:var(--text);font-family:'Asta Sans',system-ui,-apple-system,'Apple SD Gothic Neo',sans-serif;
  font-size:22px;line-height:1.35;letter-spacing:-.01em;-webkit-user-select:none;user-select:none;
  -webkit-font-smoothing:antialiased;transition:background-color .4s;touch-action:manipulation;
}
.pc-stage *{box-sizing:border-box}
:where(.pc-stage) button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s ease,background-color .2s,color .2s,opacity .2s}
.pc-stage button:active:not(:disabled):not(.win-handle):not(.clim-val){transform:scale(.95)}
.pc-stage :focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:14px}
.pc-stage .i{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none;display:block;overflow:visible}
:where(.pc-stage) :is(h1,h2,h3,h4,p){margin:0}
:where(.pc-stage) :is(h1,h2,h3,h4){color:inherit;font-weight:600;letter-spacing:-.02em}

/* ---------- driving view ---------- */
.dv{position:absolute;left:0;top:0;width:528px;height:788px}
.dv-road{position:absolute;inset:0;width:100%;height:100%}
.dv-surface{fill:var(--road)}
.dv-edge,.dv-dash{fill:var(--road-line)}
.dv-lka{fill:var(--accent);filter:drop-shadow(0 0 5px var(--accent-glow))}
.dv-path{fill:url(#dvPathG)}
.dv-other{color:var(--car-o)}
.dv-ego{color:var(--car);filter:drop-shadow(0 10px 16px rgba(0,0,0,.45))}
.dv-speed{position:absolute;left:40px;top:24px;display:flex;flex-direction:column}
.dv-speed b{font-size:96px;font-weight:500;line-height:.95;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.dv-speed span{font-size:20px;color:var(--text-2);margin-top:6px}
.dv-gear{position:absolute;left:206px;top:34px;display:flex;gap:4px;font-size:26px;font-weight:600;color:var(--text-3);padding:4px;border-radius:12px}
.dv-gear span{padding:2px 9px;border-radius:8px;transition:background-color .2s,color .2s}
.dv-gear span.on{background:var(--text);color:var(--bg)}
.dv-gear:hover{background:var(--hover)}
.dv-range{position:absolute;right:30px;top:42px;display:flex;align-items:center;gap:10px;font-size:22px;font-weight:500;font-variant-numeric:tabular-nums}
.dv-bat{width:38px;height:20px;border:2px solid var(--text-2);border-radius:6px;padding:2px;position:relative;display:block}
.dv-bat::after{content:'';position:absolute;right:-6px;top:5px;width:3px;height:6px;border-radius:0 2px 2px 0;background:var(--text-2)}
.dv-bat b{display:block;height:100%;border-radius:3px;background:var(--green);width:77%}
.dv-tell{position:absolute;left:214px;top:94px;display:flex;gap:14px;font-size:30px}
.dv-tell .i{color:var(--text);opacity:.16;transition:opacity .3s,color .3s}
.dv-tell .i.on{opacity:1;color:var(--green)}
.dv-set{position:absolute;left:40px;top:168px;display:flex;align-items:center;gap:8px;font-size:28px;color:var(--accent-2);font-weight:600}
.dv-set .i{font-size:32px}
.dv-limit{position:absolute;left:36px;top:226px;display:flex;flex-direction:column;align-items:center;gap:4px}
.dv-limit b{width:70px;height:70px;border-radius:50%;background:#fff;border:7px solid #e8303f;color:#111;display:grid;place-items:center;font-size:27px;font-weight:700;letter-spacing:-.04em}
.dv-limit span{font-size:17px;color:var(--text-2)}
.dv-odo{position:absolute;left:40px;bottom:22px;font-size:19px;color:var(--text-2);font-variant-numeric:tabular-nums}
.dv-handle{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);font-size:28px;color:var(--text-3)}

/* ---------- status bar ---------- */
.sb{position:absolute;left:544px;right:24px;top:0;height:70px;display:flex;align-items:center;gap:4px}
.sb-dyn{flex:1;display:flex;align-items:center;gap:10px;min-width:0}
.sb-btn{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:28px;position:relative}
.sb-btn:hover{background:var(--hover)}
.sb-avatar span{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#8c74ff,#5a46fa);color:#fff;display:grid;place-items:center;font-size:18px;font-weight:600}
.sb-badge{position:absolute;top:7px;right:6px;min-width:20px;height:20px;border-radius:10px;background:var(--red);color:#fff;font-size:12px;font-weight:700;font-style:normal;display:grid;place-items:center;padding:0 5px;line-height:1}
.sb-badge[hidden]{display:none}
.sb-ind{width:46px;display:grid;place-items:center;font-size:28px}
.sb-clock{min-width:128px;text-align:right;font-size:22px;font-weight:500;font-variant-numeric:tabular-nums;padding-left:6px;white-space:nowrap}
.sb-pill{height:44px;border-radius:22px;padding:0 16px 0 12px;display:flex;align-items:center;gap:8px;background:var(--win-2);font-size:18px;max-width:320px;white-space:nowrap;animation:rise .3s}
.sb-pill .i{font-size:22px}
.sb-pill span,.sb-pill em{overflow:hidden;text-overflow:ellipsis}
.sb-pill.call{background:var(--green);color:#05301c}
.sb-pill.call em{font-style:normal;opacity:.8}
.sb-pill.read{background:var(--accent);color:#fff}
.sb-pill.music{color:var(--text-2)}
.eq{display:inline-flex;gap:3px;align-items:flex-end;height:18px;width:15px}
.eq b{width:3px;height:6px;background:currentColor;border-radius:2px;animation:eq .8s ease-in-out infinite alternate}
.eq b:nth-child(2){animation-delay:-.3s}.eq b:nth-child(3){animation-delay:-.55s}
@keyframes eq{from{height:4px}to{height:18px}}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}

/* ---------- app windows ---------- */
.apparea{position:absolute;left:544px;right:24px;top:72px;bottom:116px}
.win{position:absolute;top:0;bottom:0;left:0;width:508px;border-radius:28px;background:var(--win);overflow:hidden;box-shadow:var(--win-shadow);
  transition:left .45s cubic-bezier(.2,.8,.2,1),width .45s cubic-bezier(.2,.8,.2,1),opacity .3s,transform .3s,background-color .4s}
.win[data-slot="1"]{left:524px}
.apparea[data-layout="20"] .win[data-slot="0"]{width:1032px}
.win[data-slot="bg"]{opacity:0;transform:scale(.94);visibility:hidden;pointer-events:none;transition:opacity .25s,transform .25s,visibility 0s .25s}
.win.press{transform:scale(.97)}
.win.drag{transition:opacity .1s;z-index:3;box-shadow:var(--shadow-3)}
.win.closing{transition:transform .22s ease-in,opacity .22s}
.win.pulse{animation:winPulse .45s ease}
@keyframes winPulse{40%{transform:scale(.97)}}
.win-body{position:absolute;inset:0}
.win-bar{position:absolute;top:0;left:50%;transform:translateX(-50%);height:30px;z-index:6}
.win-handle{width:200px;height:30px;display:grid;place-items:center;touch-action:none;cursor:grab}
.win-handle i{width:64px;height:6px;border-radius:3px;background:var(--handle);transition:width .2s}
.win.drag .win-handle i{width:84px}
.win-size{position:absolute;right:14px;top:0;width:40px;height:30px;display:grid;place-items:center;font-size:19px;color:var(--text-3);z-index:6}
.win-size:hover{color:var(--text)}
.win-body>div{position:absolute;inset:0;display:flex;flex-direction:column;padding-top:30px}

/* shared app parts */
.app-head{display:flex;align-items:center;gap:12px;padding:6px 18px 10px 24px;min-height:66px;flex:none}
.app-title{font-size:26px;font-weight:600;flex:1;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-ic{width:60px;height:60px;border-radius:18px;background:linear-gradient(150deg,var(--g1),var(--g2));display:grid;place-items:center;color:#fff;font-size:30px;flex:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 2px 6px rgba(0,0,0,.18)}
.app-ic .i{stroke-width:2}
.app-ic.sm{width:42px;height:42px;border-radius:13px;font-size:23px}
.app-ic.lg{width:78px;height:78px;border-radius:23px;font-size:38px}
.app-ic.xl{width:96px;height:96px;border-radius:28px;font-size:48px}
.icon-btn{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:28px;flex:none}
.icon-btn:hover{background:var(--hover)}
.icon-btn.sel{background:var(--accent-soft);color:var(--accent-2)}
.icon-btn.lg{width:66px;height:66px;font-size:36px}
.chip{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:19px;background:var(--win-2);color:var(--text-2);font-size:16px;white-space:nowrap;flex:none}
.chip .i{font-size:20px}
.kicker{font-size:15px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3)}
.pc-stage .btn{height:56px;padding:0 24px;border-radius:28px;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-size:20px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.pc-stage .btn .i{font-size:24px}
.pc-stage .btn.acc{background:var(--accent);color:#fff}
.pc-stage .btn.sec{background:var(--win-2)}
.pc-stage .btn.line{box-shadow:inset 0 0 0 1.5px var(--line-2)}
.pc-stage .btn.ghost{color:var(--text-2);padding:0 16px}
.pc-stage .btn.danger{background:var(--red);color:#fff}
.pc-stage .btn.sm{height:46px;padding:0 18px;font-size:18px}
.pc-stage .btn.wide{width:100%}
.scroll{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.scroll::-webkit-scrollbar{display:none}
.dot{width:12px;height:12px;border-radius:50%;flex:none;display:inline-block}
.c-work{background:#8f7dff}.c-personal{background:#3adc93}.c-family{background:#ffae4d}
.tabs{display:flex;gap:4px;padding:4px;border-radius:16px;background:var(--win-2)}
.tabs button{flex:1;height:48px;padding:0 16px;border-radius:12px;font-size:18px;font-weight:500;color:var(--text-2);white-space:nowrap}
.tabs button.on{background:var(--elev);color:var(--text);box-shadow:var(--shadow-1)}
.pc[data-theme="night"] .tabs button.on{background:var(--win-3)}
.switch{width:64px;height:38px;border-radius:19px;background:var(--win-3);position:relative;flex:none}
.switch i{position:absolute;top:4px;left:4px;width:30px;height:30px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.25);transition:transform .2s}
.switch.on{background:var(--accent)}
.switch.on i{transform:translateX(26px)}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.set-row:last-child{border-bottom:0}
.set-row.col{flex-direction:column;align-items:stretch;gap:12px}
.set-row strong{display:block;font-size:20px;font-weight:600}
.set-row span{display:block;font-size:16px;color:var(--text-3);margin-top:2px}
.chk-row{display:flex;flex-wrap:wrap;gap:10px}
.chk{height:50px;padding:0 16px 0 10px;border-radius:14px;background:var(--win-2);display:flex;align-items:center;gap:10px;font-size:18px}
.chk .box{width:28px;height:28px;border-radius:8px;box-shadow:inset 0 0 0 2px var(--line-2);display:grid;place-items:center;font-size:18px;color:transparent}
.chk.on .box{background:var(--accent);box-shadow:none;color:#fff}
.chk .i{stroke-width:2.6}
.block{position:absolute;inset:30px 0 0;background:color-mix(in srgb,var(--win) 90%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;font-size:21px;color:var(--text-2);text-align:center;padding:0 48px;animation:rise .3s}
.block .big{font-size:56px;color:var(--text)}

/* ---------- Morning ---------- */
.m-app{background:var(--win)}
.m-scroll{flex:1;padding:2px 24px 14px;min-height:0}
.m-hello h2{font-size:34px;font-weight:600;letter-spacing:-.03em;margin-top:6px;line-height:1.15}
.m-date{display:flex;align-items:center;gap:8px;font-size:18px;color:var(--text-2);flex-wrap:wrap}
.m-date .i{font-size:22px;color:#ffc76b}
.m-tip{display:flex;gap:10px;align-items:flex-start;font-size:17px;color:var(--text-2);background:var(--win-2);border-radius:16px;padding:12px 14px;margin-top:14px;line-height:1.35}
.m-tip .i{font-size:22px;color:#7fb8ff;margin-top:1px}
.m-next{margin-top:14px;background:var(--win-2);border-radius:24px;padding:20px 20px 20px 24px;position:relative;overflow:hidden}
.m-next::before{content:'';position:absolute;left:0;top:22px;bottom:22px;width:5px;border-radius:0 4px 4px 0;background:var(--accent)}
.m-next.empty p{font-size:19px;color:var(--text-2)}
.m-next.empty::before{background:var(--win-3)}
.m-next-top{display:flex;align-items:center;justify-content:space-between}
.m-next h3{font-size:30px;font-weight:600;margin:6px 0 4px;letter-spacing:-.02em;line-height:1.2}
.m-place{display:flex;align-items:center;gap:6px;font-size:18px;color:var(--text-2)}
.m-place .i{font-size:20px}
.m-leave{display:flex;flex-direction:column;margin:12px 0 12px}
.m-leave strong{font-size:25px;font-weight:600;color:var(--accent-2)}
.m-leave span{font-size:16px;color:var(--text-3)}
.m-leave.urgent strong{color:var(--orange)}
.m-go{width:100%}
.m-go.done{background:var(--green);color:#05301c}
.m-sec-head{display:flex;align-items:baseline;justify-content:space-between}
.m-bring{margin-top:18px}
.m-bring h4,.m-list h4{font-size:20px;font-weight:600}
.m-sec-head span{display:flex;align-items:center;gap:6px;font-size:16px;color:var(--text-3)}
.m-sec-head span .i{color:var(--green);font-size:18px;stroke-width:2.6}
.m-bar{height:6px;border-radius:3px;background:var(--win-3);margin:10px 0 12px;overflow:hidden}
.m-bar i{display:block;height:100%;background:var(--green);border-radius:3px;transition:width .35s}
.m-items{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.m-item{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:12px;min-height:100px;padding:14px 14px 12px;border-radius:20px;background:var(--win-2);font-size:18px;line-height:1.2;text-align:left;width:100%}
.m-item>.i{font-size:32px;color:var(--text-2)}
.m-item.on>.i{color:var(--text-3)}
.m-check{width:30px;height:30px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--line-2);display:grid;place-items:center;font-size:18px;color:transparent;transition:background-color .2s,color .2s;flex:none}
.m-item .m-check{position:absolute;top:12px;right:12px}
.m-check .i{stroke-width:2.8}
.m-item.on .m-check,.g-list li.on .m-check{background:var(--green);box-shadow:none;color:#05301c}
.m-item.on span{color:var(--text-3);text-decoration:line-through;text-decoration-thickness:2px}
.m-list{margin-top:24px}
.m-list ul{list-style:none;margin:6px 0 0;padding:0}
.m-list li{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}
.m-list li:last-child{border-bottom:0}
.m-list time{font-size:18px;font-weight:600;min-width:100px;color:var(--text-2);font-variant-numeric:tabular-nums}
.m-list li span{flex:1;display:flex;flex-direction:column;min-width:0}
.m-list strong{font-size:19px;font-weight:500}
.m-list em{font-style:normal;font-size:16px;color:var(--text-3)}
.m-foot{display:flex;gap:10px;padding:12px 20px 18px;border-top:1px solid var(--line);flex:none}
.m-foot .m-read{flex:1}
.m-cap{position:absolute;left:20px;right:20px;bottom:98px;padding:14px 18px;border-radius:18px;background:rgba(10,11,14,.9);color:#fff;font-size:19px;line-height:1.4;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--shadow-3);animation:rise .3s;z-index:2}
.m-cap[hidden]{display:none}
.m-app.wide .m-cols{flex:1;display:grid;grid-template-columns:1.1fr 1fr;gap:28px;padding:0 24px;min-height:0}
.m-cols>.scroll{padding-bottom:16px;min-height:0}
.m-app.wide .m-bring{margin-top:4px}
.m-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 44px;gap:10px}
.m-empty .big{font-size:64px;color:var(--text-3)}
.m-empty h3{font-size:26px;margin-top:6px}
.m-empty p{font-size:18px;color:var(--text-2);margin-bottom:14px;line-height:1.45}
.m-link{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;text-align:center;padding:0 32px}
.qr{width:224px;padding:14px 14px 10px;border-radius:24px;background:#fff;display:flex;flex-direction:column;align-items:center;gap:6px;box-shadow:var(--shadow-2)}
.qr svg{width:190px;height:190px}
.qr span{font-size:14px;color:#777}
.m-link h3{font-size:24px}
.m-code{font-size:22px;font-weight:600;letter-spacing:.06em;margin:8px 0}
.m-wait{display:flex;align-items:center;gap:10px;justify-content:center;color:var(--text-2);font-size:18px}
.spin{width:22px;height:22px;border-radius:50%;border:3px solid var(--line-2);border-top-color:var(--accent);animation:spin 1s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.m-set{flex:1;padding:0 24px 24px;min-height:0}
.m-app.glance{background:var(--win)}
.m-glance{flex:1;display:flex;flex-direction:column;justify-content:center;padding:0 34px;gap:4px}
.g-time{font-size:68px;font-weight:600;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums;margin-top:6px}
.m-glance h3{font-size:36px;font-weight:600;margin-top:8px;letter-spacing:-.02em;line-height:1.15}
.g-sub{display:flex;align-items:center;gap:8px;font-size:21px;color:var(--text-2);margin-top:8px}
.g-sub b{color:var(--green);font-weight:600}
.g-items{display:flex;align-items:center;gap:14px;margin-top:30px}
.g-item{width:64px;height:64px;border-radius:18px;background:var(--win-2);display:grid;place-items:center;font-size:30px;position:relative;color:var(--text-2)}
.g-item>i{position:absolute;right:-6px;top:-6px;width:26px;height:26px;border-radius:50%;background:var(--win-3);display:grid;place-items:center;font-size:15px;color:transparent;border:2px solid var(--win)}
.g-item>i .i{stroke-width:3}
.g-item.on>i{background:var(--green);color:#05301c}
.g-items em{font-style:normal;font-size:18px;color:var(--text-3);margin-left:4px}

/* ---------- Navigation ---------- */
.nav-app{background:var(--map-bg)}
.win-body>.nav-app{padding-top:0}
.map{position:absolute;inset:0;width:100%;height:100%;display:block}
.m-bg{fill:var(--map-bg)}.m-water{fill:var(--map-water)}.m-park{fill:var(--map-park)}.m-bld{fill:var(--map-bld)}
.m-minor{stroke:var(--map-road);stroke-width:9;fill:none}
.m-sub{stroke:var(--map-road);stroke-width:16;fill:none}
.m-main-c{stroke:var(--map-casing);stroke-width:31;fill:none}
.m-main{stroke:var(--map-main);stroke-width:24;fill:none}
.m-lbl{font:600 22px 'Asta Sans',sans-serif;fill:var(--map-label);letter-spacing:.02em}
.m-lbl.sm{font-size:18px;font-weight:500}
.m-poi circle{fill:var(--map-poi);stroke:var(--map-bg);stroke-width:4}
.m-poi text{font:600 21px 'Asta Sans',sans-serif;fill:var(--text-2);paint-order:stroke;stroke:var(--map-bg);stroke-width:6px}
.m-poi.sel circle{fill:var(--accent)}
.m-poi.sel text{fill:var(--accent-2)}
.m-route-c{stroke:rgba(0,0,0,.35);stroke-width:32;fill:none;stroke-linejoin:round;stroke-linecap:round}
.m-route{stroke:var(--accent);stroke-width:20;fill:none;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 0 10px var(--accent-glow))}
.m-route-done{stroke:var(--map-done);stroke-width:20;fill:none;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:0 99999}
.m-dest circle:first-child{fill:var(--accent);opacity:.25}
.m-dest circle:last-child{fill:var(--accent);stroke:#fff;stroke-width:5}
.m-home circle{fill:var(--map-poi);stroke:var(--map-bg);stroke-width:5}
.m-car circle{fill:#fff;filter:drop-shadow(0 4px 10px rgba(0,0,0,.45))}
.m-car path{fill:var(--accent)}
.nav-top{position:absolute;left:16px;right:16px;top:40px;display:flex;justify-content:center;pointer-events:none}
.nav-top>*{pointer-events:auto}
.nav-bot{position:absolute;left:16px;right:16px;bottom:16px}
.nav-search{width:100%;height:64px;border-radius:20px;background:var(--elev);box-shadow:var(--shadow-2);display:flex;align-items:center;gap:12px;padding:0 20px;font-size:21px;color:var(--text-2)}
.nav-search .i{font-size:26px}
.nav-search span{flex:1;text-align:left}
.ns-mic{color:var(--accent-2)}
.tbt{width:100%;display:flex;align-items:center;gap:16px;padding:14px 18px;border-radius:22px;background:var(--elev);box-shadow:var(--shadow-2);animation:rise .3s}
.tbt-ic{width:64px;height:64px;border-radius:18px;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:40px;flex:none}
.tbt-ic .i{stroke-width:2.2}
.tbt>div{min-width:0}
.tbt-dist{display:block;font-size:34px;font-weight:600;color:var(--accent-2);line-height:1.1;font-variant-numeric:tabular-nums}
.tbt-road{display:block;font-size:19px;color:var(--text-2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eta{display:flex;align-items:center;gap:14px;padding:14px 14px 18px 20px;border-radius:22px;background:var(--elev);box-shadow:var(--shadow-2);position:relative;overflow:hidden;animation:rise .3s}
.eta-txt{flex:1;display:flex;flex-direction:column}
.eta-time{font-size:24px;font-weight:600}
.eta-left{font-size:17px;color:var(--text-2)}
.eta-bar{position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--win-3)}
.eta-bar i{display:block;height:100%;background:var(--accent);width:0}
.sheet{padding:18px;border-radius:24px;background:var(--elev);box-shadow:var(--shadow-2);animation:rise .3s}
.sheet-row{display:flex;align-items:center;gap:14px}
.sheet-row>div{flex:1;display:flex;flex-direction:column;min-width:0}
.sheet-row strong{font-size:24px;font-weight:600}
.sheet-row em{font-style:normal;font-size:17px;color:var(--text-2)}
.sheet-ic{width:52px;height:52px;border-radius:16px;background:var(--accent-soft);color:var(--accent-2);display:grid;place-items:center;font-size:28px;flex:none}
.sheet-ic.ok{background:rgba(58,220,147,.18);color:var(--green)}
.sheet-row+.btn{margin-top:16px}
.sheet-meta{display:flex;align-items:baseline;gap:14px;margin:14px 0 16px;font-size:18px;color:var(--text-2);flex-wrap:wrap}
.sheet-meta b{font-size:28px;color:var(--text);font-weight:600}
.sheet-k{font-size:15px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin:2px 4px 4px}
.dest-list{list-style:none;margin:0;padding:0}
.dest-list button{width:100%;display:flex;align-items:center;gap:14px;padding:12px 6px;text-align:left;border-bottom:1px solid var(--line);font-size:19px;border-radius:0}
.dest-list li:last-child button{border-bottom:0}
.dest-list .i{font-size:24px;color:var(--text-3)}
.dest-list span{flex:1;display:flex;flex-direction:column;min-width:0}
.dest-list strong{font-weight:500}
.dest-list em{font-style:normal;font-size:16px;color:var(--text-3)}
.dest-list b{font-size:16px;color:var(--text-2);font-weight:500}
.free{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 20px;border-radius:26px;background:var(--elev);box-shadow:var(--shadow-2);font-size:19px;color:var(--text-2)}
.free .i{color:var(--accent-2)}

/* ---------- Media ---------- */
.md-app{background:linear-gradient(180deg,color-mix(in srgb,var(--a3) 72%,var(--win)) 0%,var(--win) 78%)}
.pc[data-theme="day"] .md-app{background:linear-gradient(180deg,color-mix(in srgb,var(--a1) 30%,#fff) 0%,#fff 70%)}
.md-head{padding-right:14px;gap:8px}
.md-head .drop{display:flex;align-items:center;gap:6px;font-size:19px;font-weight:600;height:44px;padding:0 8px;border-radius:12px;white-space:nowrap}
.md-head .drop .i{font-size:19px;color:var(--text-2)}
.md-head .sep{width:1px;height:22px;background:var(--line-2);flex:none}
.md-head .icon-btn{margin-left:auto}
.md-body{flex:1;display:flex;flex-direction:column;justify-content:space-between;padding:6px 32px 22px;min-height:0}
.md-now{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;min-height:0}
.art{width:268px;height:268px;border-radius:30px;background:radial-gradient(circle at 30% 28%,var(--a1),transparent 58%),linear-gradient(150deg,var(--a2),var(--a3));box-shadow:0 26px 50px -14px rgba(0,0,0,.6);position:relative;overflow:hidden;flex:none}
.art i{position:absolute;left:50%;top:58%;width:60%;height:60%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 40% 35%,rgba(255,255,255,.9),var(--a1) 32%,transparent 70%);opacity:.7}
.art::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.25))}
.art.playing i{animation:breathe 4.5s ease-in-out infinite}
@keyframes breathe{50%{transform:translate(-50%,-50%) scale(1.14);opacity:.95}}
.art.sm{width:56px;height:56px;border-radius:14px;box-shadow:none}
.art.sm i{display:none}
.md-meta{text-align:center}
.md-meta h3{font-size:32px;font-weight:600;letter-spacing:-.02em}
.md-meta p{font-size:20px;color:var(--text-2);margin-top:4px}
.md-ctl{padding-top:10px;flex:none}
.slider{display:flex;align-items:center;gap:14px;height:44px;touch-action:none;cursor:pointer}
.sl-track{flex:1;height:8px;border-radius:4px;background:var(--win-3);position:relative}
.md-app .sl-track{background:color-mix(in srgb,var(--text) 18%,transparent)}
.sl-fill{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:var(--text)}
.sl-knob{position:absolute;top:50%;width:26px;height:26px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);box-shadow:0 2px 6px rgba(0,0,0,.35)}
.seek .sl-knob{width:18px;height:18px}
.sl-ic{font-size:28px;color:var(--text-2)}
.sl-val{min-width:40px;text-align:right;font-size:20px;font-weight:600;font-variant-numeric:tabular-nums}
.md-times{display:flex;justify-content:space-between;font-size:16px;color:var(--text-3);margin-top:-4px;font-variant-numeric:tabular-nums}
.md-btns{display:flex;align-items:center;justify-content:space-between;margin-top:12px}
.md-play{width:88px;height:88px;border-radius:50%;background:var(--text);color:var(--bg);display:grid;place-items:center;font-size:40px;flex:none}
.md-app.wide .md-body{flex-direction:row;align-items:center;gap:56px;padding:6px 56px 22px}
.md-app.wide .md-now{flex:0 0 auto}
.md-app.wide .md-ctl{flex:1}
.md-app.wide .md-queue{flex:0 0 420px}
.md-queue{flex:1;padding-top:6px;min-height:0}
.md-queue ul{list-style:none;margin:10px 0 0;padding:0}
.md-queue button{width:100%;display:flex;align-items:center;gap:14px;padding:8px 4px;text-align:left;border-radius:14px}
.md-queue button.on strong{color:var(--accent-2)}
.md-queue span:not(.art){flex:1;display:flex;flex-direction:column;min-width:0}
.md-queue strong{font-size:20px;font-weight:600}
.md-queue em{font-style:normal;font-size:16px;color:var(--text-3)}
.md-queue time{font-size:16px;color:var(--text-3)}
.md-queue .eq{color:var(--accent-2)}

/* ---------- Phone ---------- */
.ph-app .tabs{margin:0 24px 10px;flex:none}
.ph-body{flex:1;padding:0 18px 18px;min-height:0}
.ph-list{list-style:none;margin:0;padding:0}
.ph-list button{width:100%;display:flex;align-items:center;gap:16px;padding:10px 8px;border-radius:18px;text-align:left}
.ph-list button:hover{background:var(--hover)}
.av{width:56px;height:56px;border-radius:50%;background:var(--c);color:#1a1a1a;display:grid;place-items:center;font-size:24px;font-weight:600;flex:none}
.av.xl{width:132px;height:132px;font-size:56px}
.ph-list button>span:not(.av){flex:1;display:flex;flex-direction:column}
.ph-list strong{font-size:21px;font-weight:500}
.ph-list em{font-style:normal;font-size:16px;color:var(--text-3)}
.ph-list .missed strong,.ph-list .missed em{color:#ff6b78}
.ph-ic{font-size:26px;color:var(--green)}
.ph-list time{font-size:16px;color:var(--text-3)}
.pad{display:flex;flex-direction:column;align-items:center;gap:12px;position:relative;padding-top:2px}
.pad-num{font-size:34px;font-weight:500;letter-spacing:.06em;min-height:46px}
.pad-keys{display:grid;grid-template-columns:repeat(3,96px);gap:10px}
.pad-keys button{height:68px;border-radius:20px;background:var(--win-2);font-size:30px;font-weight:500}
.pad.off .pad-keys,.pad.off>.round{opacity:.28}
.pad-block{position:absolute;left:0;right:0;bottom:4px;display:flex;align-items:center;gap:10px;justify-content:center;font-size:18px;color:var(--text);background:var(--win-2);padding:12px;border-radius:16px}
.round{width:88px;height:88px;border-radius:50%;display:grid;place-items:center;font-size:36px;background:var(--win-2);position:relative;flex:none}
.round span{position:absolute;top:100%;margin-top:8px;font-size:16px;color:var(--text-2);white-space:nowrap}
.round.call{background:var(--green);color:#05301c}
.round.end{background:var(--red);color:#fff}
.round.on{background:var(--text);color:var(--bg)}
.ph-app.call{justify-content:space-between;padding-bottom:64px}
.ph-call{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:70px}
.ph-call h3{font-size:34px;margin-top:8px}
.ph-timer{font-size:22px;color:var(--text-2);font-variant-numeric:tabular-nums}
.ph-call-btns{display:flex;justify-content:center;gap:64px}

/* ---------- App Market ---------- */
.mk-body{flex:1;padding:0 24px 24px;min-height:0}
.mk-card{margin-top:12px;padding:22px;border-radius:24px;background:var(--win-2)}
.mk-top{display:flex;align-items:center;gap:18px}
.mk-top>div{flex:1;min-width:0}
.mk-top h3{font-size:28px}
.mk-top p{font-size:18px;color:var(--text-2);margin:2px 0}
.mk-top em{font-style:normal;font-size:15px;color:var(--text-3)}
.mk-shots{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:20px 0 16px}
.mk-app.wide .mk-shots{grid-template-columns:repeat(3,160px)}
.shot{aspect-ratio:3/4;border-radius:16px;background:linear-gradient(165deg,#2b2e37,#15171c);padding:14px 12px;display:flex;flex-direction:column;gap:9px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.shot i{height:9px;border-radius:5px;background:rgba(255,255,255,.16)}
.shot i:first-child{height:14px;width:72%;background:linear-gradient(90deg,#ffc76b,#ff7a6a)}
.shot.s2 i:first-child{background:#6f5cff;width:54%}
.shot.s3 i:first-child{background:#3adc93;width:62%}
.shot i:nth-child(2){width:88%}
.shot i:nth-child(3){width:46%}
.mk-desc{font-size:18px;color:var(--text-2);margin-bottom:12px;line-height:1.45}
.mk-note{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--text-3)}
.mk-note .i{font-size:18px}
.mk-more{font-size:16px;color:var(--text-3);text-align:center;margin-top:24px}

/* ---------- GNB ---------- */
.gnb{position:absolute;left:0;right:0;bottom:0;height:112px;display:flex;align-items:center;justify-content:space-between;padding:0 20px 4px}
.gnb-side{display:flex;align-items:center;gap:8px}
.gnb-center{display:flex;align-items:center;gap:14px;justify-content:center;flex:1}
.g-btn{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;font-size:32px;position:relative}
.g-btn:hover,.g-app:hover{background:var(--hover)}
.g-btn.sel{background:var(--win-2)}
.g-def.on,.g-auto.on{color:var(--accent-2)}
.g-heat-d.on,.g-heat-p.on{color:var(--orange)}
.g-vent-p.on{color:#4fb5ff}
.lvl{position:absolute;bottom:7px;left:50%;transform:translateX(-50%);display:flex;gap:3px}
.lvl i{width:8px;height:3px;border-radius:2px;background:var(--text-3);opacity:.45}
.g-lvl[data-level="3"] .lvl i,.g-lvl[data-level="2"] .lvl i:nth-child(-n+2),.g-lvl[data-level="1"] .lvl i:first-child{background:currentColor;opacity:1}
.clim{display:flex;align-items:center}
.clim-arr{width:40px;height:64px;display:grid;place-items:center;font-size:26px;color:var(--text-2);border-radius:14px}
.clim-val{min-width:118px;height:76px;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;touch-action:none}
.clim-val.sel,.clim-val:hover{background:var(--win-2)}
.clim-num{display:flex;align-items:center;gap:4px}
.clim-num b{font-size:32px;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1}
.clim-fan{font-size:20px;color:var(--text-2)}
.clim-sub{font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--text-3)}
.g-app{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;position:relative}
.g-app .app-ic{width:60px;height:60px;border-radius:18px;font-size:30px}
.g-app.on::after{content:'';position:absolute;bottom:-11px;left:50%;width:6px;height:6px;border-radius:50%;background:var(--text-2);transform:translateX(-50%)}
.g-lib{font-size:34px}
.g-lib.sel{background:var(--win-2)}
.g-div{width:1px;height:36px;background:var(--line-2);flex:none}

/* ---------- system panels ---------- */
.layer{position:absolute;inset:0;pointer-events:none;z-index:20}
.layer .scrim{position:absolute;left:528px;right:0;top:0;bottom:112px;background:var(--scrim);opacity:0;transition:opacity .25s}
.layer.open .scrim{opacity:1;pointer-events:auto}
.panel{position:absolute;background:var(--elev);border-radius:28px;box-shadow:var(--shadow-3);padding:22px 26px;opacity:0;transform:translateY(16px);transition:opacity .22s,transform .3s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.pc[data-theme="night"] .panel{background:#202329;box-shadow:var(--shadow-3),inset 0 0 0 1px rgba(255,255,255,.05)}
.layer.open .panel{opacity:1;transform:none;pointer-events:auto}
.panel.p-library,.panel.p-climate{left:544px;right:24px;bottom:124px}
.panel.p-vehicle{left:24px;bottom:124px;width:520px}
.panel.p-defrost{left:230px;bottom:124px;width:420px}
.panel.p-notifs,.panel.p-profile,.panel.p-volume{right:24px;top:76px;width:540px}
.pn-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;min-height:46px}
.pn-head h3{font-size:22px;font-weight:600}
.pn-div{display:block;height:1px;background:var(--line);margin:16px 0}
.pn-hint{font-size:16px;color:var(--text-3);margin-top:14px;text-align:center}
.lib-row{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.ctile{min-height:96px;border-radius:20px;background:var(--win-2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-size:15px;color:var(--text-2);text-align:center;padding:8px 6px;line-height:1.15}
.ctile .i{font-size:30px;color:var(--text)}
.ctile.on{background:var(--accent-soft);color:var(--accent-2)}
.ctile.on .i{color:var(--accent-2)}
.lib-app{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:16px;color:var(--text-2);position:relative;padding:8px 0;border-radius:20px}
.lib-app:hover{background:var(--hover)}
.lib-apps.editing .lib-app:not(.dis){animation:wiggle .28s ease-in-out infinite alternate}
.lib-apps.editing .lib-app:nth-child(2n){animation-delay:-.14s}
.lib-app.dis{opacity:.4}
.lib-badge{position:absolute;top:0;right:24px;width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:22px;font-weight:700;line-height:1;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.lib-badge.rm{background:#8a8f99}
@keyframes wiggle{from{transform:rotate(-1.5deg)}to{transform:rotate(1.5deg)}}
.cp-grid{display:grid;grid-template-columns:1fr 1.7fr 1fr;gap:24px;align-items:center}
.cp-zone{display:flex;flex-direction:column;align-items:center;gap:10px}
.cp-zone>span{font-size:17px;color:var(--text-3)}
.stepper{display:flex;align-items:center;gap:6px;background:var(--win-2);border-radius:20px;padding:6px}
.stepper button{width:56px;height:56px;border-radius:14px;display:grid;place-items:center;font-size:26px}
.stepper b{min-width:86px;text-align:center;font-size:34px;font-weight:500;font-variant-numeric:tabular-nums}
.cp-mid{display:flex;flex-direction:column;gap:14px}
.cp-toggles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.cp-toggles .ctile{min-height:84px}
.def-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.nc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.nc-item{width:100%;display:flex;align-items:center;gap:14px;padding:12px;border-radius:18px;background:var(--win-2);text-align:left}
.nc-item>span:nth-child(2){flex:1;display:flex;flex-direction:column;min-width:0}
.nc-item strong{font-size:19px}
.nc-item em{font-style:normal;font-size:16px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nc-item time{font-size:15px;color:var(--text-3)}
.nc-item .app-ic{width:48px;height:48px;border-radius:14px;font-size:24px}
.pn-empty{display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--text-3);font-size:18px;padding:24px 0}
.pn-empty .i{font-size:40px}
.pf-list{display:flex;flex-direction:column;gap:8px}
.pf-item{display:flex;align-items:center;gap:14px;padding:12px;border-radius:18px;background:var(--win-2);text-align:left;width:100%}
.pf-item.on{box-shadow:inset 0 0 0 2px var(--accent)}
.pf-av{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,#8c74ff,#5a46fa);color:#fff;display:grid;place-items:center;font-size:22px;font-weight:600;flex:none}
.pf-item>span:nth-child(2){flex:1;display:flex;flex-direction:column}
.pf-item strong{font-size:20px}
.pf-item em{font-style:normal;font-size:15px;color:var(--text-3)}
.pf-item b{font-size:15px;color:var(--accent-2);font-weight:600}
.vol-row{display:flex;flex-direction:column;gap:2px;padding:6px 0}
.vol-row>span{font-size:16px;color:var(--text-3)}
.p-vehicle .btn.wide{margin-top:18px}
.p-vehicle .tabs{min-width:250px}

/* ---------- heads-up notification, toast, popup ---------- */
.hun{position:absolute;left:704px;top:84px;width:712px;display:flex;align-items:center;gap:16px;padding:16px 16px 20px 18px;border-radius:26px;background:var(--elev);box-shadow:var(--shadow-3);z-index:30;opacity:0;transform:translateY(-24px);pointer-events:none;transition:opacity .25s,transform .4s cubic-bezier(.2,.8,.2,1);overflow:hidden}
.pc[data-theme="night"] .hun{background:#262930;box-shadow:var(--shadow-3),inset 0 0 0 1px rgba(255,255,255,.06)}
.hun.show{opacity:1;transform:none;pointer-events:auto}
.hun-txt{flex:1;display:flex;flex-direction:column;min-width:0}
.hun-txt strong{font-size:21px}
.hun-txt span{font-size:17px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hun-act{display:flex;gap:8px;flex:none}
.hun .btn{height:50px;padding:0 22px;font-size:18px}
.pc[data-theme="night"] .hun .btn.sec{background:rgba(255,255,255,.1)}
.hun-bar{position:absolute;left:0;bottom:0;height:4px;background:var(--accent);width:100%;transform-origin:left}
.hun.show .hun-bar{animation:hunbar 4.2s linear forwards}
@keyframes hunbar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.toast{position:absolute;left:1060px;bottom:146px;max-width:792px;padding:14px 24px;border-radius:24px;background:rgba(18,20,24,.95);color:#fff;font-size:19px;box-shadow:var(--shadow-3);opacity:0;transform:translate(-50%,16px);transition:opacity .2s,transform .25s;pointer-events:none;z-index:50;white-space:nowrap}
.toast.show{opacity:1;transform:translate(-50%,0)}
.layer-popup{z-index:45}
.layer-popup .scrim{bottom:0}
.layer-popup.open .scrim{opacity:1;pointer-events:auto}
.popup{position:absolute;left:1060px;top:50%;width:560px;transform:translate(-50%,-46%);background:var(--elev);border-radius:28px;padding:28px;box-shadow:var(--shadow-3);opacity:0;transition:opacity .2s,transform .25s;pointer-events:none}
.pc[data-theme="night"] .popup{background:#262930}
.layer-popup.open .popup{opacity:1;transform:translate(-50%,-50%);pointer-events:auto}
.popup h3{font-size:26px;margin-bottom:8px}
.popup p{font-size:18px;color:var(--text-2)}
.pp-act{display:flex;gap:10px;margin-top:24px}
.pp-act .btn{flex:1}

/* ---------- Gleo AI ---------- */
.layer-gleo{z-index:35}
.gleo{position:absolute;left:684px;width:752px;bottom:124px;display:flex;flex-direction:column;gap:12px;opacity:0;transform:translateY(20px);transition:opacity .25s,transform .3s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.layer-gleo.open .gleo{opacity:1;transform:none;pointer-events:auto}
.g-convo{background:var(--elev);border-radius:28px;padding:22px 24px;box-shadow:var(--shadow-3);display:flex;flex-direction:column;gap:14px;max-height:520px;overflow:auto;scrollbar-width:none}
.pc[data-theme="night"] .g-convo,.pc[data-theme="night"] .g-input{background:#23262d;box-shadow:var(--shadow-3),inset 0 0 0 1px rgba(255,255,255,.06)}
.g-user{align-self:flex-end;background:var(--accent);color:#fff;padding:12px 18px;border-radius:22px 22px 6px 22px;font-size:20px;max-width:85%;animation:rise .25s}
.g-hint{font-size:21px;color:var(--text-2)}
.g-reply{font-size:24px;font-weight:500;line-height:1.38;animation:rise .3s}
.g-status{font-size:20px;color:var(--text-3)}
.g-panel{background:var(--win-2);border-radius:20px;padding:4px 16px;animation:rise .35s}
.g-list{list-style:none;margin:0;padding:0}
.g-list li{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}
.g-list li:last-child{border-bottom:0}
.g-list time{font-size:17px;font-weight:600;color:var(--text-2);min-width:96px;font-variant-numeric:tabular-nums}
.g-list span{flex:1;display:flex;flex-direction:column}
.g-list strong{font-size:19px;font-weight:500}
.g-list em{font-style:normal;font-size:15px;color:var(--text-3)}
.g-list.check li>.i{font-size:26px;color:var(--text-2)}
.g-chips{display:flex;flex-wrap:wrap;gap:8px}
.g-chip{height:46px;padding:0 18px;border-radius:23px;box-shadow:inset 0 0 0 1.5px var(--line-2);font-size:17px}
.g-chip:hover{background:var(--hover)}
.g-input{display:flex;align-items:center;gap:8px;background:var(--elev);border-radius:26px;padding:8px 8px 8px 22px;box-shadow:var(--shadow-3)}
.g-input input{flex:1;height:50px;border:0;background:none;color:var(--text);font:inherit;font-size:19px;outline:none;min-width:0;-webkit-user-select:text;user-select:text}
.g-input input::placeholder{color:var(--text-3)}
.g-mic{width:52px;height:52px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:26px;flex:none}
.g-chrome{position:relative;height:10px;margin:0 70px}
.g-chrome i{position:absolute;inset:0;border-radius:6px;background:linear-gradient(90deg,#6f5cff,#2ad0ff,#ff6fd8,#6f5cff);background-size:300% 100%;filter:blur(6px);opacity:.9;animation:chrome 3s linear infinite}
.g-chrome i:nth-child(2){filter:blur(16px);opacity:.6}
.g-chrome i:nth-child(3){filter:none;height:3px;top:3.5px;opacity:.95}
.gleo[data-status="think"] .g-chrome i{animation-duration:.8s}
.gleo[data-status="active"] .g-chrome,.gleo[data-status="listen"] .g-chrome{animation:chromeY .5s ease-in-out infinite alternate}
.gleo[data-status="speak"] .g-chrome i{animation-duration:1.6s}
.gleo[data-status="standby"] .g-chrome i{animation-duration:6s;opacity:.45}
@keyframes chrome{to{background-position:300% 0}}
@keyframes chromeY{to{transform:scaleY(1.9)}}

/* ---------- power states ---------- */
.pc-off,.pc-boot{position:absolute;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;opacity:0;pointer-events:none;transition:opacity .6s}
.pc-off{background:radial-gradient(ellipse 70% 60% at 50% 115%,#1b1d24 0%,#050506 70%)}
.pc[data-power="off"] .pc-off{opacity:1;pointer-events:auto}
.off-btn{width:184px;height:184px;border-radius:50%;background:radial-gradient(circle at 50% 30%,#2e3139,#111216);box-shadow:0 0 0 10px rgba(255,255,255,.03),0 22px 44px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 2px rgba(255,255,255,.08);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:58px;animation:ring 2.6s ease-in-out infinite}
.off-btn .i{color:#9d90ff;filter:drop-shadow(0 0 12px rgba(111,92,255,.85));stroke-width:2}
.off-btn span{font-size:19px;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
@keyframes ring{50%{box-shadow:0 0 0 22px rgba(111,92,255,.1),0 22px 44px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 2px rgba(255,255,255,.08)}}
.off-hint{font-size:20px;color:rgba(255,255,255,.5)}
.pc-boot{background:#000}
.pc[data-power="boot"] .pc-boot{opacity:1;transition:opacity .25s}
.boot-avatar{width:124px;height:124px;border-radius:50%;background:linear-gradient(135deg,#8c74ff,#5a46fa);display:grid;place-items:center;font-size:54px;font-weight:600;color:#fff}
.boot-hello{font-size:38px;font-weight:500;color:#fff;letter-spacing:-.02em}
.boot-line{width:260px;height:3px;border-radius:2px;background:linear-gradient(90deg,transparent,#a196ff,transparent);transform:scaleX(0)}
.pc[data-power="boot"] .boot-avatar{animation:bootIn .9s cubic-bezier(.2,.8,.2,1) both}
.pc[data-power="boot"] .boot-hello{animation:bootIn .9s .15s cubic-bezier(.2,.8,.2,1) both}
.pc[data-power="boot"] .boot-line{animation:bootLine 1.8s ease-in-out both}
@keyframes bootIn{from{opacity:0;transform:translateY(18px) scale(.96)}}
@keyframes bootLine{from{transform:scaleX(0);opacity:0}50%{opacity:1}to{transform:scaleX(1);opacity:0}}
.pc[data-power="on"] .dv{animation:uiIn .7s .05s both}
.pc[data-power="on"] .sb{animation:uiIn .7s .15s both}
.pc[data-power="on"] .apparea{animation:uiIn .7s .22s both}
.pc[data-power="on"] .gnb{animation:uiIn .7s .3s both}
@keyframes uiIn{from{opacity:0;transform:translateY(14px)}}

/* highlight requested by the page */
.hl{animation:hl 2.5s ease-out;border-radius:28px}
@keyframes hl{0%,55%{box-shadow:0 0 0 4px var(--accent),0 0 0 16px rgba(111,92,255,.22)}100%{box-shadow:0 0 0 0 rgba(111,92,255,0)}}

@media (prefers-reduced-motion:reduce){
  .pc-stage *,.pc-stage *::before,.pc-stage *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}