/* ============================================================================
   GMS Hive · Leitstand (v163)
   1) Tokens + weiche Optik für Alt-Seiten (styles.css bleibt geladen)
   2) Leitstand-Hülle und -Seiten: Demo-Stylesheet, gekapselt unter
      .lsapp (Menü/Kopfzeile) und #page.ls (Seiteninhalt)
   ============================================================================ */


:root{
  --bg:#1A1B20; --surface:#24262D; --surface-2:#2E313A; --surface-3:#393C46;
  --ln:rgba(255,255,255,.06); --ln-2:rgba(255,255,255,.14);
  --text:#F1F1F4; --text-2:#A9ABB5; --text-3:#7C7F8B;
  --ok:#5FC98C; --warn:#EBA53E; --bad:#EA6D57; --info:#7FB2E5;
  --sh-up:6px 6px 14px rgba(0,0,0,.38),-4px -4px 10px rgba(255,255,255,.028);
  --sh-in:inset 3px 3px 8px rgba(0,0,0,.4),inset -2px -2px 6px rgba(255,255,255,.03);
  --raise:var(--surface-2);
  --panel:var(--surface);
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-in-out:cubic-bezier(.77,0,.175,1);
  --elev:var(--sh-up); --sheen:none;
  --r-tile:12px; --r-panel:22px;
}
:root[data-accent="hive"]{--accent-grad:var(--accent)}
html,body{background:var(--bg)}
body{color:var(--text);font-size:13px;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
::selection{background:var(--accent);color:var(--accent-ink)}
*{scrollbar-width:thin;scrollbar-color:var(--surface-3) transparent}
*::-webkit-scrollbar{width:8px;height:8px}*::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:4px}

/* ───── Menü ───── */
.sidebar{background:var(--bg)!important;border-right:1px solid transparent!important;transition:width 200ms var(--ease-out),background 200ms}
.sidebar:hover{background:var(--surface)!important}
.nav button{border-left:0!important;border-radius:11px;color:var(--text-2);transition:background 120ms,color 120ms,transform 160ms var(--ease-out)}
.nav button svg{transition:transform 200ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.nav button:hover:not(.on){background:var(--surface-2)!important;color:var(--text)}.nav button:hover:not(.on) svg{transform:translateY(-1px)}}
.nav button:active{transform:scale(.97)}
.nav button.on{background:var(--raise)!important;box-shadow:var(--sh-up);color:var(--accent)!important;font-weight:600}
.nav button.on svg{color:var(--accent)!important}
.side-av,.side-toggle,.mnav-gear{border-radius:11px}
.side-user,.logo-div{border-color:var(--ln)!important}
.side-av{background:var(--raise);box-shadow:var(--sh-up);color:var(--text-2)}
.logo-mark svg,.topbar-wabe svg{filter:drop-shadow(0 4px 10px rgba(0,0,0,.35))}

/* ───── Kopfzeile ───── */
.topbar{padding:12px 20px 8px 12px}
.topbar-title{font-size:15px;font-weight:600;color:var(--text)}
.topbar-hi-name{font-size:15px;font-weight:600}
.topbar-hi-date{color:var(--text-3)}
.icon-btn,.zoom-lvl,.topbar-fs,.gm-chip,.bell-btn,.fb-float{background:var(--raise)!important;box-shadow:var(--sh-up);border:1px solid transparent!important;border-radius:11px!important;color:var(--text-2);transition:transform 150ms var(--ease-out),color 150ms}
@media (hover:hover) and (pointer:fine){.icon-btn:hover,.topbar-fs:hover,.bell-btn:hover{opacity:1;color:var(--text);transform:translateY(-1px)}}
.icon-btn:active,.topbar-fs:active{transform:scale(.95)}
.content{padding:4px 20px 20px 12px}

/* ───── Karten / Widgets ───── */
.card,.stat,.lds-w,.ld2-left,.ld2-dh,.ld2-detail-empty,.svc-card,.tw-card,.hm-hero,.crm-card,.rem-create,.rem-list,.inv-form,.tool,.sales-rail,.hm-panel,.ue-cell{
  background:var(--panel)!important;border:1px solid transparent!important;border-radius:var(--r-panel)!important;box-shadow:var(--sh-up)!important}
.hm-hero{background:color-mix(in oklab,var(--accent) 5%,var(--surface))!important}
.card-head,.ld2-lh,.lds-wh,.rem-list-h,.card-foot,.svc-card-top{border-color:var(--ln)!important}
.card-head{padding:14px 18px 8px}
.card-title,.lds-wt,.ld2-lh-t,.phead-title{color:var(--text);letter-spacing:-.01em}
.card-title{font-size:14px;font-weight:600}
.phead-title{font-size:18px}
.card-sub,.card-meta,.phead-meta,.stat-sub,.lds-fact .l,.ld2-lh-n,.rem-item-sub,.ld2-row-addr{color:var(--text-3)}
.stat-val{font-weight:700;letter-spacing:-.02em}
.stat-ico,.empty-ico,.ue-fn-lab svg{border-radius:12px}
.ld2-row,.rem-item,.svc-act-stop,.tool,.crm-nav,.sales-stage,.ue-clik,.hm-hstat{border-radius:14px}
.ld2-row{background:transparent!important;border:1px solid transparent!important;border-left:3px solid var(--stc,transparent)!important;transition:background 150ms ease,transform 150ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.ld2-row:hover{background:color-mix(in oklab,var(--surface-2) 60%,transparent)!important;transform:translateY(-1px)}}
.ld2-row.on{background:var(--raise)!important;box-shadow:var(--sh-up)}
.ld2-row-co{font-size:13.5px;font-weight:500}
.rem-item{border-top:1px solid var(--ln)!important}
.ld2-lh{border-bottom:1px solid var(--ln)!important}
.dok-tbl th,.dok-tbl td{border-bottom:1px solid var(--ln)!important}
.dok-tbl th{color:var(--text-3);font-size:11px;text-transform:uppercase;letter-spacing:.04em;font-weight:500}
.dok-tbl tbody tr{transition:background 150ms}
@media (hover:hover) and (pointer:fine){.dok-tbl tbody tr:hover td{background:color-mix(in oklab,var(--surface-2) 60%,transparent)}}
.badge{border-radius:8px;font-weight:600;font-size:11px}
.empty-txt{color:var(--text-3)}

/* ───── Eingaben ───── */
input:not([type=checkbox]):not([type=radio]):not([type=range]),textarea,select,.ld2-search,.ld-in,.rem-text,.fld input,.search,.dd-fld{
  background:var(--bg)!important;border:1px solid transparent!important;box-shadow:var(--sh-in);border-radius:var(--r-tile)!important;color:var(--text)}
.ld2-search-in,.search input{background:transparent!important;box-shadow:none;border:0!important}
input:focus,textarea:focus,.ld2-search:focus-within,.ld-in:focus-within{outline:0;box-shadow:var(--sh-in),0 0 0 2px rgba(var(--accent-rgb),.25)!important}
input::placeholder,textarea::placeholder{color:var(--text-3)}
.dd-trig{color:var(--text)}

/* ───── Buttons ───── */
.btn,.btn-ghost,.link-btn,.seg button,.hm-chip,.roleswitch-chip,.tab-btn{border-radius:12px!important;transition:background 150ms ease,transform 160ms var(--ease-out),color 150ms}
.btn{background:var(--raise);box-shadow:var(--sh-up);color:var(--text);font-weight:500}
.btn:active,.btn-primary:active,.icon-btn:active{transform:scale(.96)}
.btn-primary{background:var(--accent-grad)!important;color:var(--accent-ink)!important;font-weight:600}
@media (hover:hover) and (pointer:fine){.btn-primary:hover{opacity:1;filter:brightness(1.06)}.btn-ghost:hover{background:var(--surface-2)!important;color:var(--text)}}
.btn-ghost{background:transparent!important;box-shadow:none;border:1px solid var(--ln)!important;color:var(--text-2)}
.link{color:var(--accent)}
.seg{background:var(--bg);box-shadow:var(--sh-in);border-radius:12px!important;padding:3px}
.seg button.on{background:var(--raise)!important;box-shadow:var(--sh-up);color:var(--text)!important}

/* ───── Bewegung beim Seitenwechsel ───── */
.content.page-in > .stack > *,.content.page-in > .ld-page > *,.content.page-in > .rem-page > *,.content.page-in > .crm-wrap > *{animation:lsIn 220ms var(--ease-out) both}
.content.page-in > .stack > *:nth-child(2){animation-delay:40ms}.content.page-in > .stack > *:nth-child(3){animation-delay:80ms}.content.page-in > .stack > *:nth-child(4){animation-delay:120ms}.content.page-in > .stack > *:nth-child(5){animation-delay:160ms}
@keyframes lsIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.lds-w{animation:lsIn 220ms var(--ease-out) both}
@media (prefers-reduced-motion:reduce){.content.page-in > .stack > *,.lds-w{animation:lsFade 150ms ease both}@keyframes lsFade{from{opacity:0}to{opacity:1}}.nav button,.ld2-row,.btn{transition:none}}



:root{--bg:#1A1B20;--surface:#24262D;--surface-2:#2E313A;--surface-3:#393C46;--border:rgba(255,255,255,.06);--border-2:rgba(255,255,255,.14);
  --text:#F1F1F4;--text-2:#A9ABB5;--text-3:#7C7F8B;
  --sh-up:6px 6px 14px rgba(0,0,0,.38),-4px -4px 10px rgba(255,255,255,.028);--sh-in:inset 3px 3px 8px rgba(0,0,0,.4),inset -2px -2px 6px rgba(255,255,255,.03);
  --primary:var(--accent,#FDD329);--on-primary:var(--accent-ink,#1A1600);--primary-dim:rgba(var(--accent-rgb,253,211,41),.12);
  --ok:#5FC98C;--warn:#EBA53E;--bad:#EA6D57;--info:#7FB2E5;
  --ok-dim:rgba(95,201,140,.14);--warn-dim:rgba(235,165,62,.14);--bad-dim:rgba(234,109,87,.16);--info-dim:rgba(127,178,229,.14);
  --ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1);
  --r-tile:12px;--r-panel:22px;--tile:60px;--gap:8px;
  color-scheme:dark;}
.lsapp *{box-sizing:border-box}
#page.ls button,.lside button,.ltop button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
#page.ls input,.lside input,.ltop input,#page.ls textarea,.lside textarea,.ltop textarea,#page.ls select,.lside select,.ltop select{font:inherit;color:var(--text);background:var(--surface-2);border:1px solid transparent;border-radius:var(--r-tile);padding:6px 10px;outline:0;width:100%}
#page.ls input:focus,.lside input:focus,.ltop input:focus,#page.ls textarea:focus,.lside textarea:focus,.ltop textarea:focus{border-color:var(--border-2);box-shadow:0 0 0 2px var(--primary-dim)}
#page.ls textarea,.lside textarea,.ltop textarea{resize:none}
#page.ls svg,.lside svg,.ltop svg{display:block}
.lsapp :focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.lsapp{display:grid;grid-template-columns:72px minmax(0,1fr);grid-template-rows:minmax(0,1fr);height:100dvh}
.lsapp .lside{width:72px;background:var(--bg);border-right:1px solid transparent;display:flex;flex-direction:column;padding:12px 10px;gap:4px;position:relative;z-index:20;transition:width 200ms var(--ease-out);overflow:hidden}
.lsapp .lside:hover{width:240px;background:var(--surface)}
.lsapp .lside .llogo{display:flex;align-items:center;gap:12px;height:44px;padding:0 4px;margin-bottom:12px}
.lsapp .lside .llogo .hex{width:38px;height:38px;flex:none;display:grid;place-items:center;background:var(--accent);color:var(--on-primary);border-radius:12px;font-weight:700;font-size:15px;box-shadow:var(--sh-up)}
.lsapp .lside .llogo b{font-weight:600;font-size:15px;white-space:nowrap;opacity:0;transition:opacity 150ms}
.lsapp .lside:hover .llogo b{opacity:1}
.lsapp .lnav{display:flex;align-items:center;gap:14px;height:40px;padding:0 14px;border-radius:10px;color:var(--text-2);white-space:nowrap;transition:background 120ms,color 120ms,transform 160ms var(--ease-out);width:100%;text-align:start;position:relative}
.lsapp .lnav svg{flex:none;width:20px;height:20px;transition:transform 200ms var(--ease-out)}
.lsapp .lnav span{opacity:0;transition:opacity 150ms}
.lsapp .lside:hover .lnav span{opacity:1}
@media (hover:hover) and (pointer:fine){
.lsapp .lnav:hover{background:var(--surface-2);color:var(--text)}
.lsapp .lnav:hover svg{transform:translateY(-1px)}}
.lsapp .lnav:active{transform:scale(.97)}
.lsapp .lnav.on{background:var(--surface-2);box-shadow:var(--sh-up);color:var(--primary)}
.lsapp .lnav .n{margin-inline-start:auto;font-size:11px;font-weight:600;color:var(--text-3);min-width:18px;height:18px;border-radius:9px;display:grid;place-items:center;padding:0 5px;background:var(--bg)}
.lsapp .lnav .n.bad{color:var(--bad)}
.lsapp .lnav .n.warn{color:var(--warn)}
.lsapp .lnav.on .n{color:var(--primary)}
.lsapp .lnav .dotn{position:absolute;inset-inline-start:30px;top:9px;width:7px;height:7px;border-radius:50%;background:var(--bad);border:2px solid var(--surface);transition:opacity 150ms}
.lsapp .lside:hover .lnav .dotn{opacity:0}
.lsapp .lside .sp{flex:1}
.lsapp .lside .me{display:flex;align-items:center;gap:12px;padding:6px 4px;white-space:nowrap}
.lsapp .lside .me .av{width:38px;height:38px;flex:none;border-radius:12px;background:var(--surface-2);box-shadow:var(--sh-up);display:grid;place-items:center;font-weight:600;font-size:12px;color:var(--text-2)}
.lsapp .lside .me div{opacity:0;transition:opacity 150ms;line-height:1.3}
.lsapp .lside:hover .me div{opacity:1}
.lsapp .lside .me small{display:block;color:var(--text-3);font-size:11px}
.lsapp .lmain{display:flex;flex-direction:column;min-width:0;min-height:0}
.lsapp .ltop{height:56px;flex:none;display:flex;align-items:center;gap:16px;padding:0 20px 0 12px}
.lsapp .ltop h1{font-size:15px;font-weight:600;margin:0;white-space:nowrap;display:flex;align-items:center;gap:10px;min-width:0}
.lsapp .ltop h1 .pt{color:var(--text-2);font-weight:500}
.lsapp .ltop h1 .crumb{color:var(--text-3);font-weight:400}
.lsapp .ltop h1 .ct{overflow:hidden;text-overflow:ellipsis}
.lsapp .ltop h1 .csub{font-size:12px;font-weight:400;color:var(--text-3);white-space:nowrap}
.lsapp .ltop h1 .cr{display:inline-flex;align-items:center;gap:8px;margin-inline-start:4px}
.lsapp .ltop h1 .cr small{font-size:12px;font-weight:400;color:var(--text-3)}
.lsapp .ltop .lsearch{margin-inline:auto;width:min(360px,30%);position:relative;flex:none}
.lsapp .ltop .lsearch input{padding-inline-start:32px;height:36px;background:var(--bg);box-shadow:var(--sh-in);border-radius:12px;transition:border-color 150ms ease}
.lsapp .ltop .lsearch svg{position:absolute;inset-inline-start:10px;top:8px;width:16px;height:16px;color:var(--text-3)}
.lsapp .ltop .lsearch kbd{position:absolute;inset-inline-end:8px;top:7px;font:11px Inter;color:var(--text-3);border:1px solid var(--border);border-radius:4px;padding:1px 5px}
.lsapp .ltop .right{display:flex;align-items:center;gap:8px}
.lsapp .pill{height:32px;display:inline-flex;align-items:center;gap:7px;padding:0 12px;border-radius:11px;background:var(--surface-2);box-shadow:var(--sh-up);border:1px solid transparent;color:var(--text-2);font-size:12px}
.lsapp .dot{width:7px;height:7px;border-radius:50%;flex:none}
.lsapp .dot.pulse{box-shadow:0 0 0 0 color-mix(in oklab,var(--ok) 60%,transparent);animation:pulse 2s ease-out infinite}

@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in oklab,var(--ok) 55%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
main#page{flex:1;min-height:0;padding:4px 20px 20px 12px;display:flex;flex-direction:column}
#page.ls .cols{display:grid;height:100%;gap:12px;grid-template-columns:var(--c1,300px) var(--c2,340px) minmax(0,1fr);transition:grid-template-columns 300ms var(--ease-in-out)}
#page.ls .cols.sel{--c1:64px}
#page.ls .cols.sel.open{--c1:300px}
#page.ls .cols.two{grid-template-columns:var(--c1,300px) 0px minmax(0,1fr)}
#page.ls .cols.two>:nth-child(2){grid-column:3;margin-inline-start:-12px}
#page.ls .pan{--kc:var(--text-2);background:var(--surface);border-radius:var(--r-panel);border:1px solid transparent;box-shadow:var(--sh-up);display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;position:relative}
#page.ls .pan::before{content:"";position:absolute;inset-inline-start:0;top:0;width:260px;height:140px;background:radial-gradient(closest-side at 0 0,color-mix(in oklab,var(--kc) 8%,transparent),transparent);pointer-events:none}
#page.ls .pan.k-act{--kc:var(--primary)}
#page.ls .pan.k-info{--kc:var(--info)}
#page.ls .pan.k-ok{--kc:var(--ok)}
#page.ls .pan.k-alert{--kc:var(--bad)}
#page.ls .pan.k-data{--kc:var(--text-2)}
#page.ls .pan.k-list{--kc:var(--text-3)}
#page.ls .pan.k-act{background:color-mix(in oklab,var(--primary) 4%,var(--surface))}
#page.ls .pan>.ph .pi{width:18px;height:18px;display:grid;place-items:center;color:var(--kc);flex:none}
#page.ls .pan>.ph .pi svg{width:16px;height:16px}
#page.ls .pan.enter{animation:slide 260ms var(--ease-out) both}
#page.ls .ghost{transition:opacity 220ms ease,transform 220ms var(--ease-out);opacity:1}
#page.ls .ghost.out{opacity:0;transform:translateX(24px) scale(.98)}
#page.ls .pb.swap{animation:swap 220ms ease both}

@keyframes swap{from{opacity:.35}to{opacity:1}}
#page.ls .pan>.ph{height:48px;flex:none;display:flex;align-items:center;gap:9px;padding:4px 10px 0 18px;position:relative}
#page.ls .ph b{font-weight:600;font-size:14px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:8px}
#page.ls .ph .cnt{color:var(--text-3);font-weight:400}
#page.ls .ph .ph-r{margin-inline-start:auto;display:flex;gap:2px;align-items:center}
#page.ls .ib{width:28px;height:28px;border-radius:7px;display:grid;place-items:center;color:var(--text-2);transition:background 120ms,color 120ms,transform 120ms var(--ease-out)}
#page.ls .ib svg{width:16px;height:16px}
@media (hover:hover) and (pointer:fine){
#page.ls .ib:hover{background:var(--surface-2);color:var(--text)}}
#page.ls .ib:active{transform:scale(.94)}
#page.ls .pb{flex:1;min-height:0;display:flex;flex-direction:column;gap:var(--gap);padding:4px 12px 14px}
#page.ls .pb.scroll{overflow:auto}
#page.ls .pf{flex:none;display:flex;align-items:center;gap:8px;padding:8px 12px 12px}
#page.ls .pf .sp{flex:1}
#page.ls .desk .wid>.pan:not(.tall),#page.ls .cols>.pan:not(.listpan):not(.tall){align-self:start;max-height:100%}
#page.ls .tg{display:grid;gap:4px var(--gap);grid-template-columns:repeat(var(--n,2),minmax(0,1fr));grid-auto-rows:var(--tile);flex:none}
#page.ls .tg.kpi{grid-auto-rows:100px;gap:14px}
#page.ls .tg.kpi .t.big{grid-row:auto;background:var(--surface);box-shadow:var(--sh-up);border-radius:20px;padding:14px 20px}
#page.ls .tg.kpi .t.big b{font-size:30px;font-weight:700}
#page.ls .tg.kpi .t .ico{display:none}
#page.ls .t{background:transparent;border:1px solid transparent;border-radius:var(--r-tile);padding:8px 10px;display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0;position:relative;overflow:hidden}
#page.ls .t small{font-size:11px;color:var(--text-3);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#page.ls .t b{font-weight:500;font-size:14px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#page.ls .t.big b{font-size:24px;font-weight:700;line-height:1.1;letter-spacing:-.02em}
#page.ls .t.big{grid-row:span 2}
#page.ls .t .sub{font-size:11px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#page.ls .t.x2{grid-column:span 2}
#page.ls .t.x3{grid-column:span 3}
#page.ls .t.x4{grid-column:span 4}
#page.ls .t.wrap b{white-space:normal;font-size:13px;font-weight:400}
#page.ls .t .st{position:absolute;inset-inline-end:10px;top:10px;width:8px;height:8px;border-radius:50%;box-shadow:0 0 0 3px color-mix(in oklab,currentColor 0%,transparent)}
#page.ls .t .spark{position:absolute;inset-inline-end:12px;bottom:12px;width:72px;height:26px;opacity:.9}
#page.ls .t .ring{position:absolute;inset-inline-end:10px;top:50%;transform:translateY(-50%);width:40px;height:40px}
#page.ls .t .ring text{font:600 11px Inter;fill:var(--text)}
#page.ls .t .ico{position:absolute;inset-inline-end:12px;top:12px;width:16px;height:16px;color:var(--text-3)}
#page.ls .t.k{cursor:pointer;transition:border-color 150ms ease,background 150ms ease,transform 150ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){
#page.ls .t.k:hover{background:color-mix(in oklab,var(--surface-2) 60%,transparent);transform:translateY(-1px)}}
#page.ls .t.k:active{transform:scale(.985)}
#page.ls .t.sel{border-color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary)}
#page.ls .t.in{padding:6px 10px;justify-content:stretch;background:var(--bg);box-shadow:var(--sh-in);transition:box-shadow 150ms ease}
#page.ls .t.in:focus-within{box-shadow:var(--sh-in),0 0 0 2px var(--primary-dim)}
#page.ls .t.in input,#page.ls .t.in select{height:100%;background:transparent;border:0;padding:0 4px;border-radius:0;box-shadow:none}
#page.ls .t.in small{padding:0 4px}
#page.ls .t.in.ta{grid-row:span 2}
#page.ls .pb>.t.in.ta.grow{flex:1;min-height:calc(var(--tile)*2 + var(--gap))}
#page.ls .t.in textarea{background:transparent;border:0;padding:0 4px;flex:1;line-height:1.4;box-shadow:none}
#page.ls .t.act{background:var(--surface-2);box-shadow:var(--sh-up);border-color:transparent;border-radius:14px;cursor:pointer;flex-direction:row;align-items:center;gap:10px;transition:background 150ms ease,transform 150ms var(--ease-out)}
#page.ls .t.act>svg{width:18px;height:18px;flex:none;color:var(--text-2);transition:transform 200ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){
#page.ls .t.act:hover{background:var(--border)}
#page.ls .t.act:hover>svg{transform:scale(1.12)}}
#page.ls .t.act:active{transform:scale(.97)}
#page.ls .t.act.pri{background:var(--accent);color:var(--on-primary);box-shadow:6px 6px 16px rgba(0,0,0,.4),0 8px 22px -10px color-mix(in oklab,var(--primary) 60%,transparent)}
#page.ls .t.act.pri>svg{color:var(--on-primary)}
@media (hover:hover) and (pointer:fine){
#page.ls .t.act.pri:hover{background:color-mix(in oklab,var(--accent) 86%,white)}}
#page.ls .t.act.pri b{font-weight:600}
#page.ls .t.act b{font-size:13px}
#page.ls .t.act small{color:inherit;opacity:.7;display:block}
#page.ls .grp{grid-column:1/-1;display:flex;align-items:center;gap:8px;height:26px;font-size:11px;font-weight:500;color:var(--text-3);padding-inline:6px;margin-top:4px;text-transform:uppercase;letter-spacing:.04em}
#page.ls .grp::after{content:"";flex:1;height:1px;background:var(--border);opacity:.7}
#page.ls .grp .gc{color:var(--text-2);font-weight:500}
#page.ls .tg.hasgrp{grid-auto-rows:auto}
#page.ls .tg.hasgrp>.t{height:var(--tile)}
#page.ls .tg.hasgrp>.t.big{height:calc(var(--tile)*2 + var(--gap))}
#page.ls .tg.hasgrp>.t.in.ta{height:calc(var(--tile)*2 + var(--gap))}
#page.ls .t.ls{flex-direction:row;align-items:center;gap:12px;padding:0 10px 0 14px;height:60px}
#page.ls .tg.hasgrp>.t.ls,#page.ls .tg>.t.ls{height:60px}
#page.ls .tg.ls{grid-auto-rows:60px}
#page.ls .t.ls::before{content:"";position:absolute;inset-inline-start:0;top:14px;bottom:14px;width:3px;border-radius:2px;background:var(--stc,transparent)}
#page.ls .t.ls.bad{background:color-mix(in oklab,var(--bad) 7%,var(--surface))}
@media (hover:hover) and (pointer:fine){
#page.ls .t.ls.bad:hover{background:color-mix(in oklab,var(--bad) 11%,var(--surface))}}
#page.ls .t.ls .id{width:36px;height:36px;border-radius:11px;background:var(--surface-2);box-shadow:3px 3px 8px rgba(0,0,0,.3),-2px -2px 6px rgba(255,255,255,.03);display:grid;place-items:center;font-size:11px;font-weight:600;color:var(--text-2);flex:none;letter-spacing:-.01em}
#page.ls .t.ls .id.sm{font-size:10px}
#page.ls .t.ls .m{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px}
#page.ls .t.ls .m b{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#page.ls .t.ls .m small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#page.ls .t.ls .vis{display:flex;align-items:center;gap:10px;flex:none;color:var(--text-2)}
#page.ls .t.ls .r{text-align:end;flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:3px;min-width:44px}
#page.ls .t.ls .r b{font-size:13px;font-weight:500;color:var(--text-2)}
#page.ls .t.ls .r small{color:var(--text-3)}
#page.ls .t.ls .arr{width:16px;height:16px;color:var(--text-3);flex:none;opacity:0;transform:translateX(-4px);transition:opacity 150ms ease,transform 150ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){
#page.ls .t.ls:hover .arr{opacity:1;transform:none}}
#page.ls .bat{width:26px;height:13px;display:block}
#page.ls .sig{display:flex;align-items:flex-end;gap:2px;height:14px}
#page.ls .sig i{display:block;width:3px;border-radius:1px;background:var(--border-2)}
#page.ls .sig i.on{background:var(--text-2)}
#page.ls .chip{height:22px;padding:0 8px;border-radius:6px;font-size:11px;font-weight:600;color:var(--c);background:color-mix(in oklab,var(--c) 14%,transparent);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
#page.ls .chip .dot{background:var(--c)}
#page.ls .list{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:4px}
#page.ls .row{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:10px;padding:6px 8px 6px 6px;border-radius:10px;text-align:start;transition:background 150ms ease,transform 150ms var(--ease-out);min-height:52px}
@media (hover:hover) and (pointer:fine){
#page.ls .row:hover{background:var(--surface-2)}
#page.ls .row:hover .ch{border-color:var(--border-2)}}
#page.ls .row:active{transform:scale(.985)}
#page.ls .row.on{background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--border-2)}
#page.ls .row .ch{width:36px;height:36px;border-radius:11px;background:var(--surface-2);box-shadow:3px 3px 8px rgba(0,0,0,.3),-2px -2px 6px rgba(255,255,255,.03);border:1px solid transparent;display:grid;place-items:center;font-size:11px;font-weight:600;color:var(--text-2);position:relative;letter-spacing:-.01em;transition:border-color 150ms ease,color 150ms ease}
#page.ls .row .ch.sm{font-size:10px}
#page.ls .row.on .ch{border-color:var(--primary);color:var(--primary)}
#page.ls .row .ch i{position:absolute;inset-inline-end:-3px;top:-3px;width:9px;height:9px;border-radius:50%;border:2px solid var(--surface)}
#page.ls .row .tx{min-width:0;line-height:1.3}
#page.ls .row .tx b{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#page.ls .row .tx small{display:block;color:var(--text-3);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#page.ls .row .rt{font-size:11px;color:var(--text-3);text-align:end;white-space:nowrap;line-height:1.3}
#page.ls .row .rt b{display:block;color:var(--text-2);font-weight:500}
#page.ls .sel:not(.open) .listpan .row{grid-template-columns:36px;padding:6px}
#page.ls .sel:not(.open) .listpan .row .tx,#page.ls .sel:not(.open) .listpan .row .rt,#page.ls .sel:not(.open) .listpan .ph b,#page.ls .sel:not(.open) .listpan .pf{display:none}
#page.ls .sel:not(.open) .listpan .ph .ph-r{display:flex}
#page.ls .sel:not(.open) .listpan .ph .ph-r>:not(.pin){display:none}
#page.ls .sel:not(.open) .listpan .ph .pin{display:grid}
#page.ls .sel:not(.open) .listpan .ph .ph-r{display:flex}
#page.ls .sel:not(.open) .listpan .ph .ph-r>:not(.pin){display:none}
#page.ls .sel:not(.open) .listpan .ph{padding:0;justify-content:center}
#page.ls .sel:not(.open) .listpan .pb{padding:10px 8px}
#page.ls .sel:not(.open) .listpan .grp{font-size:10px;white-space:nowrap;overflow:hidden;padding:0}
#page.ls .sel:not(.open) .listpan .grp::after{display:none}
#page.ls .tabs{display:flex;gap:2px;padding:0 12px 6px;flex:none}
#page.ls .tab{height:28px;padding:0 10px;border-radius:7px;color:var(--text-3);font-size:12px;font-weight:500;transition:background 150ms ease,color 150ms ease}
@media (hover:hover) and (pointer:fine){
#page.ls .tab:hover{color:var(--text)}}
#page.ls .tab.on{background:var(--surface-2);color:var(--text)}
#page.ls .sel:not(.open) .listpan .tabs{display:none}
#page.ls .listpan .pin{display:none;width:32px;height:32px;border-radius:10px;place-items:center;color:var(--text-3);transition:color 150ms,transform 150ms var(--ease-out)}
#page.ls .listpan .pin svg{width:16px;height:16px}
@media (hover:hover) and (pointer:fine){
#page.ls .listpan .pin:hover{color:var(--text);transform:translateX(2px)}}
#page.ls .sel.open .listpan .ph-r .pin{display:grid;transform:rotate(180deg)}
@media (hover:hover) and (pointer:fine){
#page.ls .sel.open .listpan .ph-r .pin:hover{transform:rotate(180deg) translateX(2px)}}
#page.ls .log{display:flex;flex-direction:column;gap:2px;overflow:auto;min-height:0;flex:1;position:relative}
#page.ls .lg{display:grid;grid-template-columns:8px minmax(0,1fr) auto;gap:10px;padding:7px 8px;border-radius:var(--r-tile);align-items:start;position:relative}
#page.ls .lg::before{display:none}
#page.ls .lg:last-child::before{display:none}
#page.ls .lg i{width:8px;height:8px;border-radius:50%;margin-top:5px}
#page.ls .lg b{font-weight:500;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#page.ls .lg small{color:var(--text-3);font-size:11px}
#page.ls .lg .lt{font-size:11px;color:var(--text-3);white-space:nowrap;margin-top:2px}
#page.ls .empty{flex:1;display:grid;place-items:center;color:var(--text-3);text-align:center;padding:20px}
#page.ls .empty b{display:block;color:var(--text-2);font-weight:500;margin-bottom:2px}
#page.ls .btn{height:36px;padding:0 16px;border-radius:12px;background:var(--surface-2);box-shadow:var(--sh-up);color:var(--text);font-weight:500;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;transition:background 150ms ease,transform 160ms var(--ease-out)}
#page.ls .btn svg{width:16px;height:16px}
@media (hover:hover) and (pointer:fine){
#page.ls .btn:hover{background:var(--border)}}
#page.ls .btn:active{transform:scale(.96)}
#page.ls .btn.pri{background:var(--accent);color:var(--on-primary);font-weight:600}
@media (hover:hover) and (pointer:fine){
#page.ls .btn.pri:hover{background:color-mix(in oklab,var(--accent) 86%,white)}}
#page.ls .btn.ghost{background:transparent;box-shadow:none;color:var(--text-2)}
@media (hover:hover) and (pointer:fine){
#page.ls .btn.ghost:hover{background:var(--surface-2);color:var(--text)}}
#page.ls .btn[disabled]{opacity:.4;pointer-events:none}
#page.ls .desk{display:flex;flex-direction:column;min-width:0;min-height:0;gap:12px}
#page.ls .desk .head{flex:none;display:flex;align-items:center;gap:12px;padding:0 4px;min-height:28px}
#page.ls .desk .head h2{margin:0;font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#page.ls .desk .head small{color:var(--text-3);white-space:nowrap}
#page.ls .desk .wid{flex:1;min-height:0;display:grid;gap:12px;grid-template-columns:minmax(0,1fr);transition:grid-template-columns 300ms var(--ease-in-out)}
#page.ls .desk .wid.w2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
#page.ls .desk .wid.w3{grid-template-rows:auto minmax(0,1fr);align-content:start}
#page.ls .desk .wid.w3>.pan:last-child{grid-column:1/-1}
#page.ls .slide{animation:slide 220ms var(--ease-out) both}

@keyframes slide{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
#page.ls .calltimer{font-size:28px;font-weight:600;line-height:1}
#page.ls .rate{display:flex;gap:6px}
#page.ls .rate button{flex:1;height:100%;border-radius:8px;background:var(--surface-2);box-shadow:3px 3px 8px rgba(0,0,0,.3);color:var(--text-2);font-weight:500;transition:background 150ms ease,color 150ms ease,transform 120ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){
#page.ls .rate button:hover{background:var(--border);color:var(--text)}}
#page.ls .rate button:active{transform:scale(.96)}
#page.ls .rate button.on{background:var(--primary-dim);color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary)}
#page.ls .live{display:inline-flex;align-items:center;gap:8px;color:var(--ok);font-size:11px;font-weight:600}
#page.ls .bar{height:6px;border-radius:3px;background:var(--bg);box-shadow:inset 1px 1px 3px rgba(0,0,0,.4);overflow:hidden;margin-top:4px}
#page.ls .bar i{display:block;height:100%;border-radius:3px;background:var(--text-2);transform-origin:left}
#page.ls .pan.tall .chart{height:auto;flex:1;min-height:0;max-height:320px}
#page.ls .chart{height:200px;flex:none;display:flex;align-items:flex-end;justify-content:center;gap:12px;padding:8px 4px 0}
#page.ls .chart .c{flex:1;max-width:72px;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
#page.ls .chart .c i{display:block;width:100%;max-width:40px;border-radius:8px;background:var(--surface-3);box-shadow:var(--sh-up);transform-origin:bottom;transition:background 150ms ease}
#page.ls .chart .c i.hi{background:var(--accent)}
@media (hover:hover) and (pointer:fine){
#page.ls .chart .c:hover i{background:var(--text-2)}
#page.ls .chart .c:hover i.hi{background:var(--text)}}
#page.ls .chart .c small{font-size:11px;color:var(--text-3)}
#page.ls .chart .c b{font-size:11px;font-weight:500;color:var(--text-2)}
#page.ls.anim .pan{animation:pin 220ms var(--ease-out) both;animation-delay:calc(var(--p,0)*40ms)}
#page.ls.anim .t,#page.ls.anim .row,#page.ls.anim .lg{animation:tin 200ms var(--ease-out) both;animation-delay:calc(var(--p,0)*40ms + var(--i,0)*22ms)}
#page.ls.anim .bar i{animation:grow 500ms var(--ease-out) both;animation-delay:calc(var(--p,0)*40ms + 120ms)}
#page.ls.anim .chart .c i{animation:grow-y 420ms var(--ease-out) both;animation-delay:calc(var(--p,0)*40ms + var(--i,0)*40ms)}

@keyframes pin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

@keyframes tin{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

@keyframes grow-y{from{transform:scaleY(0)}to{transform:scaleY(1)}}
#page.ls .bento{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,.9fr) minmax(0,1fr);gap:14px;flex:none}
#page.ls .hero{position:relative;overflow:hidden;background:var(--surface);border-radius:24px;box-shadow:var(--sh-up);padding:20px 22px;display:flex;flex-direction:column;gap:14px;min-height:196px}
#page.ls .hero::before{content:"";position:absolute;inset-inline-start:-60px;top:-100px;width:360px;height:280px;background:radial-gradient(closest-side,color-mix(in oklab,var(--hc,var(--text-2)) 10%,transparent),transparent);pointer-events:none}
#page.ls .hero .hi{color:var(--text-3);font-size:12px;display:flex;align-items:center;gap:8px}
#page.ls .hero .hi svg{width:14px;height:14px}
#page.ls .hero h2{margin:0;font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.15;text-wrap:balance}
#page.ls .hero h2 em{font-style:normal;color:var(--bad)}
#page.ls .hero h2 em.ok{color:var(--ok)}
#page.ls .hero h2 em.warn{color:var(--warn)}
#page.ls .hero p{margin:0;color:var(--text-2);font-size:12.5px}
#page.ls .hero .top2{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center}
#page.ls .pods{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto}
#page.ls .pod{flex:1;display:flex;align-items:center;gap:10px;padding:8px 12px 8px 8px;border-radius:14px;background:var(--surface-2);box-shadow:var(--sh-up);cursor:pointer;transition:transform 150ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){
#page.ls .pod:hover{transform:translateY(-1px)}}
#page.ls .pod:active{transform:scale(.97)}
#page.ls .pod .pi2{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--bg);box-shadow:var(--sh-in);color:var(--pc,var(--text-2))}
#page.ls .pod .pi2 svg{width:15px;height:15px}
#page.ls .pod b{display:block;font-size:16px;font-weight:700;line-height:1;letter-spacing:-.02em}
#page.ls .pod small{display:block;color:var(--text-3);font-size:10.5px;margin-top:2px}
#page.ls .hero .ring2 svg{width:118px;height:118px}
#page.ls .hero .acts{display:flex;gap:10px;align-items:center}
#page.ls .cal{display:flex;flex-direction:column;gap:6px;flex:1;min-height:0}
#page.ls .calh{display:flex;align-items:center;justify-content:space-between}
#page.ls .calh b{font-size:13px;font-weight:600}
#page.ls .calg{display:grid;grid-template-columns:repeat(7,1fr);gap:3px 0;text-align:center}
#page.ls .calg .wd{font-size:10px;color:var(--text-3);font-weight:500;padding-bottom:2px}
#page.ls .calg .d{position:relative;height:26px;line-height:26px;font-size:12px;color:var(--text-2);border-radius:8px;cursor:default}
#page.ls .calg .d.we{color:var(--text-3)}
#page.ls .calg .d.today{background:var(--accent);color:var(--on-primary);font-weight:700;box-shadow:var(--sh-up);border-radius:8px}
#page.ls .calg .d.ul{background:color-mix(in oklab,var(--info) 22%,transparent);color:var(--text);border-radius:0}
#page.ls .calg .d.tm{background:color-mix(in oklab,var(--text-3) 22%,transparent);color:var(--text);border-radius:0}
#page.ls .calg .d.us{border-radius:8px 0 0 8px}
#page.ls .calg .d.ue{border-radius:0 8px 8px 0}
#page.ls .calg .d i{position:absolute;left:50%;bottom:2px;width:4px;height:4px;border-radius:50%;background:var(--text);transform:translateX(-50%)}
#page.ls .calg .d.today i{background:var(--on-primary)}
#page.ls .call{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:10.5px;color:var(--text-3);margin-top:auto;align-items:center}
#page.ls .call span{display:flex;align-items:center;gap:6px}
#page.ls .call i{width:8px;height:8px;border-radius:3px}
#page.ls .call .dotl{width:4px;height:4px;border-radius:50%;background:var(--text);margin:0 2px}
#page.ls .call .fh{margin-inline-start:auto;color:var(--text-2)}
#page.ls .call .fh svg{width:12px;height:12px}
#page.ls .lage{display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px;align-items:end;flex:1}
#page.ls .nextgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;flex:1;align-content:end}
#page.ls .nx2{display:flex;align-items:center;gap:12px;padding:10px 12px 10px 10px;border-radius:14px;background:var(--surface-2);box-shadow:var(--sh-up);text-align:start;min-width:0;transition:transform 150ms var(--ease-out)}
#page.ls .nx2 .pi2{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--bg);box-shadow:var(--sh-in);color:var(--pc);flex:none}
#page.ls .nx2 .pi2 svg{width:15px;height:15px}
#page.ls .nx2 .m{min-width:0;flex:1}
#page.ls .nx2 b{display:block;font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#page.ls .nx2 small{display:block;font-size:11px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#page.ls .nx2 .arr{width:14px;height:14px;color:var(--text-3);flex:none;opacity:0;transform:translateX(-4px);transition:opacity 150ms,transform 150ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){
#page.ls .nx2:hover{transform:translateY(-1px)}
#page.ls .nx2:hover .arr{opacity:1;transform:none}}
#page.ls .nx2:active{transform:scale(.98)}
.lsapp .dots{display:grid;grid-template-columns:repeat(7,16px);gap:10px;align-self:center}
.lsapp .dots i{width:16px;height:16px;border-radius:50%;background:var(--ok);box-shadow:inset 0 -2px 3px rgba(0,0,0,.25),0 1px 0 rgba(255,255,255,.06);transition:transform 150ms var(--ease-out)}
.lsapp .dots i.warn{background:var(--warn)}
.lsapp .dots i.bad{background:var(--bad);box-shadow:0 0 0 3px color-mix(in oklab,var(--bad) 30%,transparent);animation:pulse-bad 2s ease-out infinite}
.lsapp .dots i.off{background:var(--surface-3)}
.lsapp .dots i[onclick]{cursor:pointer}
@media (hover:hover) and (pointer:fine){
.lsapp .dots i[onclick]:hover{transform:scale(1.25)}}

@keyframes pulse-bad{0%{box-shadow:0 0 0 0 color-mix(in oklab,var(--bad) 50%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
#page.ls .hero.act{--hc:var(--primary);align-items:stretch}
#page.ls .hero.act .big{display:flex;align-items:center;gap:14px}
#page.ls .hero.act .big .ico2{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--accent);color:var(--on-primary);box-shadow:var(--sh-up);flex:none}
#page.ls .hero.act .big .ico2 svg{width:24px;height:24px}
#page.ls .hero.act .big b{font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1;display:block}
#page.ls .hero.act .big small{color:var(--text-3);font-size:12px;display:block;margin-top:4px}
#page.ls .hero .btn.wide{width:100%;justify-content:center;height:40px;margin-top:auto}
#page.ls .hero .next{display:flex;gap:8px}
#page.ls .hero .nx{flex:1;display:flex;align-items:center;gap:8px;padding:6px 8px 6px 6px;border-radius:12px;background:var(--surface-2);box-shadow:var(--sh-up);text-align:start;min-width:0;transition:transform 150ms var(--ease-out)}
#page.ls .hero .nx .ch2{width:28px;height:28px;border-radius:8px;background:var(--bg);box-shadow:var(--sh-in);display:grid;place-items:center;font-size:10px;font-weight:600;color:var(--text-2);flex:none}
#page.ls .hero .nx b{display:block;font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#page.ls .hero .nx small{display:block;font-size:10.5px;color:var(--text-3)}
@media (hover:hover) and (pointer:fine){
#page.ls .hero .nx:hover{transform:translateY(-1px)}}
#page.ls .hero .nx:active{transform:scale(.97)}
#page.ls .hero .mini .btn{flex:1;justify-content:center;padding:0 8px;font-size:12px}
#page.ls .hero.trend .area{flex:1;min-height:0;width:100%;height:84px}
#page.ls .hero .delta{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--ok);background:color-mix(in oklab,var(--ok) 14%,transparent);padding:3px 8px;border-radius:8px}
#page.ls .hero .delta svg{width:12px;height:12px}
#page.ls .hero .tv{display:flex;align-items:baseline;gap:10px}
#page.ls .hero .tv b{font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1}
#page.ls .hero .tv small{color:var(--text-3);font-size:12px}
#page.ls .hero .ib2{display:flex;gap:8px}
#page.ls .hero .ib2 button{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--surface-2);box-shadow:var(--sh-up);color:var(--text-2);transition:transform 150ms var(--ease-out),color 150ms}
#page.ls .hero .ib2 button svg{width:16px;height:16px}
@media (hover:hover) and (pointer:fine){
#page.ls .hero .ib2 button:hover{color:var(--text);transform:translateY(-1px)}}
#page.ls .hero .ib2 button:active{transform:scale(.95)}
#page.ls .hero.slim{min-height:0;padding:18px 22px}
#page.ls.anim .hero{animation:pin 240ms var(--ease-out) both}
#page.ls.anim .bento .hero:nth-child(2){animation-delay:60ms}
#page.ls.anim .bento .hero:nth-child(3){animation-delay:120ms}
.lsapp .ltoast{position:fixed;top:14px;left:50%;transform:translate(-50%,-8px);opacity:0;background:var(--surface-3);color:var(--text);box-shadow:var(--sh-up);padding:8px 14px;border-radius:8px;font-weight:500;font-size:12px;transition:transform 200ms var(--ease-out),opacity 200ms ease;z-index:50;pointer-events:none;display:flex;align-items:center;gap:8px}
.lsapp .ltoast svg{width:14px;height:14px}
.lsapp .ltoast.on{transform:translate(-50%,0);opacity:1}
@media (prefers-reduced-motion:reduce){
#page.ls .cols,#page.ls .desk .wid,.lsapp .lside,.lsapp .lnav svg,#page.ls .t.k,#page.ls .t.act>svg{transition:none}
#page.ls .slide,#page.ls .pan.enter,#page.ls.anim .pan,#page.ls.anim .t,#page.ls.anim .row,#page.ls.anim .lg{animation:fade 150ms ease both}
#page.ls.anim .bar i,#page.ls.anim .chart .c i{animation:none}
.lsapp .dot.pulse{animation:none}

  @keyframes fade{from{opacity:0}to{opacity:1}}
@media (hover:hover){
#page.ls .t.k:hover,.lsapp .lnav:hover svg{transform:none}}
}

/* ============================================================================
   Leitstand-Hülle (Desktop ≥ 900px): Menü · Kopfzeile · Seite
   ============================================================================ */
body.ls-shell{overflow:hidden}
body.ls-shell #root{height:100dvh}
.lsapp{font:13px/1.45 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}
.lsapp .lside:hover{box-shadow:12px 0 44px rgba(0,0,0,.45)}
.lsapp .lside .llogo .hex svg{width:22px;height:22px}
.lsapp .lnav .n{margin-inline-start:auto}
.lsapp .lside .lnav span.lab{opacity:0;transition:opacity 150ms}
.lsapp .lside:hover .lnav span.lab{opacity:1}
.lsapp .lside .ltools{display:flex;align-items:center;gap:6px;padding:0 2px;white-space:nowrap;min-height:36px}
.lsapp .lside .ltools .sel-role{opacity:0;transition:opacity 150ms;flex:1;min-width:0}
.lsapp .lside:hover .ltools .sel-role{opacity:1}
.lsapp .lside .ltools .dd-trig{background:var(--bg)!important;box-shadow:var(--sh-in);border:0!important;border-radius:10px!important;height:34px}
.lsapp .lside .me{position:relative}
.lsapp .lside .me .lo{position:absolute;inset-inline-end:0;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:10px;display:grid;place-items:center;color:var(--text-3);opacity:0;transition:opacity 150ms,color 150ms}
.lsapp .lside:hover .me .lo{opacity:1}
.lsapp .lside .me .lo svg{width:16px;height:16px}
@media (hover:hover) and (pointer:fine){.lsapp .lside .me .lo:hover{color:var(--bad);background:var(--surface-2)}}
/* Kopfzeile: Suche als Taste, Chips rechts im Pillen-Look */
.lsapp .ltop .lsearch{cursor:text;height:36px;display:flex;align-items:center;gap:8px;padding:0 10px 0 32px;background:var(--bg);box-shadow:var(--sh-in);border-radius:12px;color:var(--text-3);text-align:start;font-size:13px;position:relative}
.lsapp .ltop .lsearch svg{position:absolute;inset-inline-start:10px;top:10px;width:16px;height:16px;color:var(--text-3)}
.lsapp .ltop .lsearch kbd{position:absolute;inset-inline-end:8px;top:8px;font:11px Inter,system-ui;color:var(--text-3);border:1px solid var(--border);border-radius:4px;padding:1px 5px}
.lsapp .ltop .right .icon-btn,.lsapp .ltop .right .zoom-lvl,.lsapp .ltop .right .topbar-fs,.lsapp .ltop .right .gm-chip,.lsapp .ltop .right .bell-btn,.lsapp .ltop .right .fb-fab{
  position:static!important;height:32px;min-width:32px;padding:0 10px;border-radius:11px!important;background:var(--surface-2)!important;box-shadow:var(--sh-up);border:1px solid transparent!important;color:var(--text-2);display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:12px;transition:transform 150ms var(--ease-out),color 150ms}
.lsapp .ltop .right .icon-btn svg,.lsapp .ltop .right .topbar-fs svg,.lsapp .ltop .right .bell-btn svg,.lsapp .ltop .right .fb-fab svg{width:16px;height:16px}
.lsapp .ltop .right .zoomctl{display:flex;gap:4px;align-items:center}
.lsapp .ltop .right .bell-badge{position:absolute;top:-4px;inset-inline-end:-4px}
.lsapp .ltop .right .bell-btn{position:relative!important}
@media (hover:hover) and (pointer:fine){.lsapp .ltop .right button:hover{color:var(--text);transform:translateY(-1px)}}
.lsapp .ltop .right button:active{transform:scale(.95)}
/* Seite: Leitstand-Inhalt füllt, Alt-Seiten scrollen wie bisher */
.lsapp main#page{display:flex;flex-direction:column;min-height:0}
.lsapp main#page>.content{flex:1;min-height:0;padding:0;overflow:auto}
.lsapp main#page.ls>.content{overflow:hidden;display:flex;flex-direction:column}
.lsapp main#page.ls>.content>*{flex:1;min-height:0}
.lsapp main#page:not(.ls)>.content{padding:6px 8px 20px 8px}
.lsapp main#page.ls>.content.page-in>*{animation:none}
/* Demo-Buttons neben Alt-Buttons */
#page.ls .btn{font-size:13px;border:0}
#page.ls .btn.pri{background:var(--accent)!important;color:var(--on-primary)!important}
#page.ls .btn.ghost{background:transparent!important;box-shadow:none!important;border:0!important;color:var(--text-2)}
#page.ls .chip.on{background:color-mix(in oklab,var(--c) 14%,transparent)}
#page.ls .row{border:0;background:none;width:100%}
#page.ls .row.on{background:var(--surface-2)}
#page.ls .t.in input,#page.ls .t.in select,#page.ls .t.in textarea{background:transparent!important;box-shadow:none!important;border:0!important;border-radius:0!important;padding:0 4px!important;width:100%}
#page.ls .t.in input[type=date],#page.ls .t.in input[type=datetime-local]{color-scheme:dark}
#page.ls .t.in select{appearance:none;-webkit-appearance:none}
#page.ls .t.in .dd-trig{background:transparent!important;box-shadow:none!important;border:0!important;padding:0 4px!important;height:auto}
#page.ls .listpan .list{padding:0 2px}
#page.ls .list .grp{margin-top:8px}
#page.ls .tabs .tab.on{background:var(--surface-2)}
#page.ls .lsel{height:32px;padding:0 8px;border-radius:10px;background:var(--bg)!important;box-shadow:var(--sh-in);border:0!important;color:var(--text);font-weight:500;max-width:100%;min-width:0}
#page.ls .listpan .ph .lsel{flex:1;min-width:0}
#page.ls .listpan .ph b{flex:none}
#page.ls .listpan .ph.hasSel b{display:none}
#page.ls .listpan .lsrch{display:flex;align-items:center;gap:8px;margin:0 12px 6px;height:32px;padding:0 10px;border-radius:10px;background:var(--bg);box-shadow:var(--sh-in);flex:none}
#page.ls .listpan .lsrch svg{width:14px;height:14px;color:var(--text-3);flex:none}
#page.ls .listpan .lsrch input{background:transparent!important;box-shadow:none!important;border:0!important;padding:0!important;height:100%}
#page.ls .sel:not(.open) .listpan .lsrch,#page.ls .sel:not(.open) .listpan .lsel{display:none}
#page.ls .empty{color:var(--text-3)}
/* Kalender (Feiertage) */
#page.ls .calg .d.hol{color:var(--warn);font-weight:600}
#page.ls .call svg{width:12px;height:12px}
#page.ls .hero .ib button.ib{width:28px;height:28px}
/* Alt-Inhalte in Leitstand-Panels (Pipeline, Fokus, Tabelle) */
#page.ls .pb.legacy{display:block;overflow:auto;padding:0 12px 12px}
#page.ls .pb.legacy .card{box-shadow:none!important;background:transparent!important;border:0!important}
#page.ls .pb.legacy .btn{height:auto}
#page.ls .pb.legacy .btn-primary{background:var(--accent-grad)!important;color:var(--accent-ink)!important;padding:8px 14px}
#page.ls .pb.legacy .btn-ghost{background:transparent!important;border:1px solid var(--border)!important;padding:6px 12px}
#page.ls .pb.legacy input,#page.ls .pb.legacy select,#page.ls .pb.legacy textarea{width:auto}
#page.ls .pb.legacy .crm-search,#page.ls .pb.legacy .ld2-search-in{width:100%}
#page.ls .pb.legacy .pf,#page.ls .pb.legacy .phead{display:none}
#page.ls .pb.legacy .stack{gap:12px}
#page.ls .pb.legacy .card-head{padding:10px 0}
/* Kacheln mit Eingabe-Elementen aus der Alt-App */
#page.ls .t .badge{align-self:flex-start}
#page.ls .t.k.on{background:var(--surface-2)}
#page.ls .t .dd-pill .dd-trig{background:transparent!important;border:0!important;box-shadow:none!important;padding:0}
#page.ls .lg .lt{flex:none}
#page.ls .log .lg b{font-size:12.5px}
#page.ls .lds-steps{display:inline-flex;align-items:center;gap:6px;margin-inline-start:6px}
#page.ls .lds-stp{display:inline-flex;align-items:center;gap:6px;color:var(--text-3);font-size:12px;font-weight:500}
#page.ls .lds-stp i{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-style:normal;background:var(--surface-2);color:var(--text-3)}
#page.ls .lds-stp.on{color:var(--text)}#page.ls .lds-stp.on i{background:var(--primary);color:var(--on-primary)}
#page.ls .lds-stp.done i{background:var(--ok-dim);color:var(--ok)}#page.ls .lds-stp i svg{width:10px;height:10px}
#page.ls .lds-ln{width:14px;height:1px;background:var(--border-2)}
#page.ls .rate button.on{background:var(--primary-dim);color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary)}
#page.ls .rate button.neg.on{background:var(--bad-dim);color:var(--bad);box-shadow:inset 0 0 0 1px var(--bad)}
#page.ls .rate button.pos.on{background:var(--ok-dim);color:var(--ok);box-shadow:inset 0 0 0 1px var(--ok)}
#page.ls .rgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;grid-column:1/-1}
#page.ls .rcol{display:flex;flex-direction:column;gap:4px}
#page.ls .rcol .rh{font-size:11px;font-weight:600;color:var(--c);display:flex;align-items:center;gap:6px;padding:2px 6px;text-transform:uppercase;letter-spacing:.04em}
#page.ls .rcol .rh i{width:7px;height:7px;border-radius:50%;background:var(--c)}
#page.ls .ri{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 10px;border-radius:10px;text-align:start;color:var(--text-2);transition:background 120ms,color 120ms}
#page.ls .ri small{display:block;color:var(--text-3);font-size:10.5px}
#page.ls .ri .k{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--bg);box-shadow:var(--sh-in);color:transparent}
#page.ls .ri .k svg{width:11px;height:11px}
@media (hover:hover) and (pointer:fine){#page.ls .ri:hover{background:var(--surface-2);color:var(--text)}}
#page.ls .ri.pick{background:color-mix(in oklab,var(--c) 14%,transparent);color:var(--text)}
#page.ls .ri.pick .k{background:var(--c);color:var(--on-primary);box-shadow:none}
#page.ls .ivrow{display:flex;align-items:center;gap:10px;flex:1}
#page.ls .ivrow input[type=range]{flex:1;accent-color:var(--primary);height:4px}
#page.ls .ivrow b{font-size:12px;white-space:nowrap}
#page.ls .wv{display:flex;gap:6px;flex-wrap:wrap;grid-column:1/-1}
#page.ls .wv button{height:36px;padding:0 14px;border-radius:10px;background:var(--surface-2);box-shadow:var(--sh-up);color:var(--text-2);font-weight:500}
#page.ls .wv button.pick{background:var(--warn-dim);color:var(--warn);box-shadow:inset 0 0 0 1px var(--warn)}
#page.ls .t.act.done{opacity:.55}
#page.ls .t.act.done>svg{color:var(--ok)}
#page.ls .t.act .chk{display:none}
#page.ls .t.act small{white-space:normal;line-height:1.3}
#page.ls .calltimer{font-size:28px;font-weight:600;line-height:1}
#page.ls .cal .ib{width:28px;height:28px}
#page.ls .ltab{position:absolute;inset:0;overflow:auto;padding:0 12px 12px}
#page.ls .pb.rel{position:relative}
#page.ls .desk .head{display:none}
#page.ls .crm-pipe{display:flex;flex-wrap:wrap;gap:6px;grid-column:1/-1;padding:2px 0 6px}
#page.ls .crm-pipe-btn{height:28px;padding:0 10px;border-radius:8px;font-size:11.5px;font-weight:500;color:var(--text-3);background:var(--surface-2);transition:background 120ms,color 120ms}
#page.ls .crm-pipe-btn.on{background:color-mix(in oklab,var(--pc) 16%,transparent);color:var(--pc)}
#page.ls .kpi .t.big small{font-size:11px}
#page.ls .tbl{width:100%;border-collapse:collapse;font-size:12.5px}
#page.ls .tbl th{font-size:11px;font-weight:500;color:var(--text-3);text-align:start;padding:6px 8px;border-bottom:1px solid var(--border);text-transform:uppercase;letter-spacing:.04em}
#page.ls .tbl td{padding:7px 8px;border-bottom:1px solid var(--border)}
#page.ls .tbl td.num,#page.ls .tbl th.num{text-align:end;font-variant-numeric:tabular-nums}
#page.ls .chart-wrap{width:100%}
#page.ls .chart-wrap svg{width:100%;height:auto}
@media (prefers-reduced-motion:reduce){.lsapp .lside{transition:none}}
/* Kollisionen mit Alt-Klassen (.sel, a) */
#page.ls .cols.sel{height:100%;border:0;border-radius:0;font-size:inherit;font-weight:inherit;padding:0;text-align:start;cursor:default;-webkit-appearance:none;appearance:none;outline:none}
#page.ls a{color:inherit;text-decoration:none}
#page.ls .rate button svg,#page.ls .ri .k svg{width:14px;height:14px}
#page.ls .rate button{display:inline-flex;align-items:center;justify-content:center;gap:6px}
#page.ls .t.act>svg{width:18px;height:18px;flex:none}
#page.ls .ib svg{width:16px;height:16px}
#page.ls .ph .pi svg{width:16px;height:16px}
#page.ls .nx2 .pi2 svg,#page.ls .pod .pi2 svg{width:15px;height:15px}
#page.ls .hero .hi svg{width:14px;height:14px}
#page.ls .t .ico svg{width:16px;height:16px}
#page.ls .lds-stp i svg{width:10px;height:10px}
#page.ls .btn svg{width:16px;height:16px}
#page.ls .hero .ib2 button svg{width:16px;height:16px}
#page.ls .lg svg{width:12px;height:12px}
/* Kopfzeile: Titel darf schrumpfen */
.lsapp .ltop h1{flex:1;min-width:0;overflow:hidden}
.lsapp .ltop h1 .cr{min-width:0;overflow:hidden}
.lsapp .ltop .lsearch{width:min(300px,24%);flex:none;margin-inline:0}
.lsapp .ltop .right{flex:none}
.lsapp .lside .llogo .hex svg{width:22px;height:22px}
.lsapp .lside .llogo .hex{width:38px;height:38px}
.lsapp .lnav svg{width:20px!important;height:20px!important}
.lsapp .ltop h1 .csub{overflow:hidden;text-overflow:ellipsis;max-width:220px;flex:none}
.lsapp .ltop h1 .ct{flex:none;max-width:260px}
.lsapp .ltop h1 .cr{flex:none;overflow:visible}
.lsapp .ltop .lsearch{width:min(260px,20%)}
@media (max-width:1400px){.lsapp .ltop h1 .csub{display:none}.lsapp .ltop .lsearch{width:180px}}

/* Logo im Menü */
.lsapp .lside .llogo .hex{background:none;box-shadow:none;color:var(--accent);width:38px;height:38px}
.lsapp .lside .llogo .hex svg{width:30px;height:34px}
.lsapp .lside .llogo b{color:var(--text);display:flex;align-items:center}
.lsapp .lside .llogo b svg{height:14px;width:auto}
/* Pin: eingeklappt mittig, aufgeklappt rechts gedreht */
#page.ls .listpan .ph .ph-r{gap:2px}
#page.ls .sel:not(.open) .listpan .ph{justify-content:center;padding:0}
#page.ls .sel:not(.open) .listpan .ph .ph-r{margin:0}
#page.ls .sel.open .listpan .ph .pin{display:grid;transform:rotate(180deg)}
#page.ls .cols.two .listpan .pin{display:none}
/* Flach: keine Verläufe */
#page.ls .btn.pri{background:var(--accent)!important}
#page.ls .t.act.pri{box-shadow:var(--sh-up)}
/* Gelbe Elemente: beim Hovern ins Negativ (dunkel mit gelber Schrift), keine Bewegung */
@media (hover:hover) and (pointer:fine){
  #page.ls .t.act.pri:hover,#page.ls .btn.pri:hover,#page.ls .btn-primary:hover,.lsapp .btn-primary:hover,#page.ls .hero .btn.pri:hover{background:var(--accent-ink)!important;color:var(--accent)!important;filter:none!important;opacity:1!important;transform:none;box-shadow:var(--sh-up),inset 0 0 0 1.5px var(--accent)}
  #page.ls .t.act.pri:hover>svg,#page.ls .btn.pri:hover svg,#page.ls .btn-primary:hover svg{color:var(--accent);transform:none}
  #page.ls .t.act.pri:hover small{color:var(--accent);opacity:.8}
  .lsapp .lnav.on:hover{background:var(--surface-2)}
}
#page.ls .t.act.pri,#page.ls .btn.pri{transition:background 140ms ease,color 140ms ease,box-shadow 140ms ease,transform 120ms var(--ease-out)}
#page.ls .t.act.pri:active,#page.ls .btn.pri:active{transform:scale(.98)}
/* Scrollen ohne sichtbaren Scrollbalken */
#page.ls .pb.scroll,#page.ls .list,#page.ls .log,#page.ls .pb.legacy,#page.ls .ltab,#page.ls .pb,#page.ls .desk,#page.ls .cols{scrollbar-width:none;-ms-overflow-style:none}
#page.ls .pb.scroll::-webkit-scrollbar,#page.ls .list::-webkit-scrollbar,#page.ls .log::-webkit-scrollbar,#page.ls .pb.legacy::-webkit-scrollbar,#page.ls .ltab::-webkit-scrollbar,#page.ls .pb::-webkit-scrollbar,#page.ls .desk::-webkit-scrollbar,#page.ls .cols::-webkit-scrollbar{display:none;width:0;height:0}
/* Eingeklappte Liste: der ganze Kopf öffnet sie */
#page.ls .sel:not(.open) .listpan .ph{cursor:pointer}
#page.ls .listpan .pin{pointer-events:auto}

#page.ls .t.act.neg>svg{color:var(--bad)}
#page.ls .hero .pods .pod{flex:none;min-width:120px}
#page.ls .t .bar{margin-top:6px}
#page.ls .desk .wid.w3.crm{grid-template-rows:minmax(0,1.1fr) minmax(0,.9fr)}
#page.ls .desk .wid.w3.crm>.pan{max-height:100%;align-self:stretch}