/* =========================================================
   Staff Panel – Design-Demo · Basis + Layouts + 25 Themes
   ========================================================= */
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{font-family:Inter,system-ui,sans-serif;background:#0d0e12;color:#e8e8ea;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none;cursor:pointer}
.ic{width:18px;height:18px;flex:none}

/* ---------- Default-Tokens ---------- */
.app,.mini{
  --bg:#0f1115;--bg-img:none;--surface:#171a21;--surface-2:#1e222b;--border:#2a2f3a;--border-w:1px;
  --text:#e6e8ee;--muted:#8b93a7;--accent:#8b5cf6;--accent-2:#22d3ee;--accent-text:#fff;
  --ok:#22c55e;--warn:#f59e0b;--err:#ef4444;
  --nav-bg:#0b0d11;--nav-text:#c9cdd8;--nav-active-bg:color-mix(in srgb,var(--accent) 18%,transparent);--nav-active-text:#fff;
  --subnav-bg:var(--surface);--top-bg:transparent;
  --radius:12px;--radius-sm:8px;--shadow:none;--blur:none;
  --font:Inter,system-ui,sans-serif;--font-head:var(--font);--font-mono:'JetBrains Mono',ui-monospace,monospace;
  --fs:14px;--pad:18px;--pad-page:28px;--gap:16px;--h1:24px;
}
.app{min-height:100vh;background:var(--bg);background-image:var(--bg-img);background-attachment:fixed;color:var(--text);font-family:var(--font);font-size:var(--fs);line-height:1.45}

/* ---------- Shell ---------- */
.shell{display:grid;min-height:100vh}
.nav{background:var(--nav-bg);color:var(--nav-text);display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100vh;padding:16px 12px;border-right:var(--border-w) solid var(--border);z-index:20;backdrop-filter:var(--blur)}
.brand{display:flex;align-items:center;gap:10px;padding:6px 8px 16px;cursor:default}
.logo{width:36px;height:36px;border-radius:var(--radius-sm);background:var(--accent);color:var(--accent-text);display:grid;place-items:center;flex:none}
.brand-t b{display:block;font-family:var(--font-head);font-size:15px;color:var(--text)}
.brand-t small{color:var(--muted);font-size:11.5px}
.nav-items{display:flex;flex-direction:column;gap:2px;flex:1}
.nav-item{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:var(--radius-sm);color:var(--nav-text);font-weight:500;transition:background .15s,color .15s;position:relative;white-space:nowrap}
.nav-item:hover{background:color-mix(in srgb,var(--nav-text) 8%,transparent)}
.nav-item.active{background:var(--nav-active-bg);color:var(--nav-active-text)}
.nav-item .key{display:none;font-family:var(--font-mono);font-size:11px;opacity:.6}
.nav-children{display:none;flex-direction:column;gap:2px;margin:2px 0 4px 22px;padding-left:12px;border-left:1px solid var(--border)}
.nav-child{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:var(--radius-sm);font-size:13px;color:var(--nav-text);opacity:.8}
.nav-child .ic{width:15px;height:15px}
.nav-child:hover{opacity:1}
.nav-child.active{opacity:1;color:var(--nav-active-text);background:var(--nav-active-bg)}
.nav-foot{border-top:var(--border-w) solid var(--border);padding-top:12px}
.me{display:flex;align-items:center;gap:10px;padding:4px 6px}
.me-t b{display:block;font-size:13px;color:var(--text)}
.me-t small{color:var(--muted);font-size:11.5px}

.main{min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:14px;padding:18px var(--pad-page);background:var(--top-bg)}
.titles .crumb{font-size:12px;color:var(--muted)}
.titles h1{font-family:var(--font-head);font-size:var(--h1);font-weight:700;letter-spacing:-.01em;line-height:1.2}
.sp{flex:1}
.search{display:flex;align-items:center;gap:8px;background:var(--surface);border:var(--border-w) solid var(--border);border-radius:var(--radius-sm);padding:7px 12px;color:var(--muted);width:240px}
.search input{background:none;border:0;outline:none;width:100%;color:var(--text)}
.subtabs{display:flex;gap:4px;padding:0 var(--pad-page);border-bottom:var(--border-w) solid var(--border);overflow-x:auto}
.subtab{padding:10px 14px;border-bottom:2px solid transparent;color:var(--muted);font-weight:500;white-space:nowrap;margin-bottom:-1px}
.subtab:hover{color:var(--text)}
.subtab.active{color:var(--text);border-bottom-color:var(--accent)}
.content{padding:var(--pad-page);display:flex;flex-direction:column;gap:var(--gap);min-width:0;flex:1}
.subnav{background:var(--subnav-bg);border-right:var(--border-w) solid var(--border);padding:18px 10px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:2px}
.subnav-h{font-family:var(--font-head);font-weight:700;font-size:15px;padding:4px 10px 14px;border-bottom:var(--border-w) solid var(--border);margin-bottom:10px}
.subnav-sec{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:14px 10px 6px}
.subnav a{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:var(--radius-sm);color:var(--muted)}
.subnav a:hover{background:var(--surface-2);color:var(--text)}
.subnav a.active{background:var(--surface-2);color:var(--text)}
.subnav .ic{width:16px;height:16px}

/* -- Layout: Sidebar / Terminal -- */
.layout-sidebar .shell,.layout-terminal .shell{grid-template-columns:var(--nav-w,248px) minmax(0,1fr)}
.layout-sidebar .nav-children,.layout-terminal .nav-children,.layout-right .nav-children{display:flex}
/* -- Layout: Right -- */
.layout-right .shell{grid-template-columns:minmax(0,1fr) 248px}
.layout-right .nav{order:2;border-right:0;border-left:var(--border-w) solid var(--border)}
/* -- Layout: Rail -- */
.layout-rail .shell{grid-template-columns:88px minmax(0,1fr)}
.layout-rail .nav{padding:14px 6px;align-items:center}
.layout-rail .brand{padding:4px 0 14px}
.layout-rail .brand-t,.layout-rail .me-t{display:none}
.layout-rail .nav-items{gap:6px;width:100%}
.layout-rail .nav-item{flex-direction:column;gap:4px;padding:4px 0;font-size:11px;background:none!important}
.layout-rail .nav-item .ic{width:56px;height:32px;padding:6px 18px;border-radius:999px;box-sizing:border-box;transition:background .2s}
.layout-rail .nav-item:hover .ic{background:color-mix(in srgb,var(--nav-text) 10%,transparent)}
.layout-rail .nav-item.active .ic{background:var(--nav-active-bg);color:var(--nav-active-text)}
.layout-rail .nav-item.active{color:var(--text)}
.layout-rail .nav-foot{border:0}
/* -- Layout: Chat (Icon-Spalte + Kanal-Spalte) -- */
.layout-chat .shell{grid-template-columns:76px 236px minmax(0,1fr)}
.layout-chat .nav{padding:12px 0;align-items:center;border-right:0}
.layout-chat .brand{padding:0 0 10px;margin-bottom:6px;border-bottom:2px solid var(--border);width:44px;justify-content:center}
.layout-chat .brand-t,.layout-chat .me-t,.layout-chat .lbl{display:none}
.layout-chat .nav-items{align-items:center;gap:8px}
.layout-chat .nav-item{width:48px;height:48px;padding:0;justify-content:center;border-radius:50%;background:var(--surface-2);transition:border-radius .2s,background .2s}
.layout-chat .nav-item:hover,.layout-chat .nav-item.active{border-radius:16px;background:var(--accent);color:var(--accent-text)}
.layout-chat .nav-item.active::before{content:'';position:absolute;left:-14px;width:5px;height:36px;border-radius:0 4px 4px 0;background:var(--text)}
.layout-chat .nav-foot{border:0}
/* -- Layout: Topbar & Tabs -- */
.layout-topbar .shell,.layout-tabs .shell{grid-template-columns:1fr;grid-template-rows:auto 1fr}
.layout-topbar .nav,.layout-tabs .nav{flex-direction:row;align-items:center;height:auto;padding:10px var(--pad-page);border-right:0;border-bottom:var(--border-w) solid var(--border)}
.layout-topbar .brand,.layout-tabs .brand{padding:0 16px 0 0}
.layout-topbar .nav-items,.layout-tabs .nav-items{flex-direction:row;overflow-x:auto;scrollbar-width:none}
.layout-topbar .nav-foot,.layout-tabs .nav-foot{border:0;padding:0}
.layout-topbar .nav-item{padding:8px 12px;gap:8px}
.layout-tabs .nav{padding-bottom:0;align-items:flex-end;gap:0}
.layout-tabs .brand{align-self:center;padding-bottom:10px}
.layout-tabs .nav-foot{align-self:center;padding-bottom:10px}
.layout-tabs .nav-items{gap:2px}
.layout-tabs .nav-item{border-radius:var(--radius-sm) var(--radius-sm) 0 0;padding:10px 16px;gap:8px;background:transparent;border:var(--border-w) solid transparent;border-bottom:0;margin-bottom:calc(var(--border-w) * -1)}
.layout-tabs .nav-item.active{background:var(--bg);color:var(--text);border-color:var(--border)}
.layout-tabs .nav-item::after{content:'×';margin-left:6px;opacity:0;font-size:14px}
.layout-tabs .nav-item.active::after{opacity:.45}
/* -- Layout: Dock -- */
.layout-dock .shell{grid-template-columns:1fr}
.layout-dock .nav{position:fixed;top:auto;bottom:18px;left:50%;transform:translateX(-50%);height:auto;flex-direction:row;align-items:center;padding:8px;border:var(--border-w) solid var(--border);border-radius:22px;box-shadow:0 18px 50px rgba(0,0,0,.35)}
.layout-dock .brand,.layout-dock .nav-foot,.layout-dock .lbl{display:none}
.layout-dock .nav-items{flex-direction:row;gap:6px}
.layout-dock .nav-item{width:50px;height:50px;padding:0;justify-content:center;border-radius:15px;transition:transform .18s,background .18s}
.layout-dock .nav-item:hover{transform:translateY(-6px) scale(1.12)}
.layout-dock .nav-item .ic{width:22px;height:22px}
.layout-dock .nav-item.active::after{content:'';position:absolute;bottom:-5px;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.layout-dock .content{padding-bottom:120px}
/* -- Layout: Launcher -- */
.layout-launcher .shell{grid-template-columns:1fr}
.layout-launcher .nav{display:none}

/* ---------- Launcher-Home ---------- */
.hero{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap;padding:12px 0 6px}
.hero h2{font-family:var(--font-head);font-size:clamp(28px,4vw,44px);line-height:1.05;letter-spacing:-.02em}
.hero p{color:var(--muted);margin-top:8px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));grid-auto-rows:160px;gap:var(--gap)}
.tile{background:var(--surface);border:var(--border-w) solid var(--border);border-radius:var(--radius);padding:20px;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;transition:transform .2s,border-color .2s;position:relative;overflow:hidden;backdrop-filter:var(--blur);box-shadow:var(--shadow)}
.tile:hover{transform:translateY(-3px);border-color:var(--accent)}
.tile .ic{width:30px;height:30px;color:var(--accent)}
.tile b{font-family:var(--font-head);font-size:20px;display:block}
.tile small{color:var(--muted)}
.tile:first-child{grid-column:span 2;grid-row:span 2;background:var(--accent);color:var(--accent-text);border-color:transparent}
.tile:first-child .ic{color:var(--accent-text);width:44px;height:44px}
.tile:first-child b{font-size:34px}
.tile:first-child small{color:inherit;opacity:.75}
.tile:nth-child(4){grid-row:span 2}
.tile .kpi{font-family:var(--font-head);font-size:40px;font-weight:700;line-height:1}

/* ---------- Komponenten ---------- */
.card{background:var(--surface);border:var(--border-w) solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);min-width:0;backdrop-filter:var(--blur);overflow:hidden}
.card-h{display:flex;align-items:center;gap:10px;padding:13px var(--pad);border-bottom:var(--border-w) solid var(--border);min-height:52px}
.card-h h3{font-family:var(--font-head);font-size:14.5px;font-weight:650}
.card-b{padding:var(--pad)}
.card-b.flush{padding:0}
.grid{display:grid;gap:var(--gap)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-auto{grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.g-21{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.g-12{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:8px 14px;border-radius:var(--radius-sm);background:var(--surface-2);border:var(--border-w) solid var(--border);font-weight:550;font-size:13px;white-space:nowrap;transition:filter .15s,transform .1s;color:var(--text)}
.btn:hover{filter:brightness(1.12)}
.btn:active{transform:translateY(1px)}
.btn .ic{width:15px;height:15px}
.btn.primary{background:var(--accent);color:var(--accent-text);border-color:transparent}
.btn.danger{color:var(--err)}
.btn.ghost{background:transparent;border-color:transparent}
.btn:disabled{opacity:.35;cursor:not-allowed;filter:none;transform:none}
.btn.sm{padding:5px 10px;font-size:12px}
.icon-btn{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:var(--radius-sm);position:relative;color:var(--text);flex:none}
.icon-btn:hover{background:var(--surface-2)}
.icon-btn .dot{position:absolute;top:7px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--err);border:2px solid var(--bg)}
.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:650;background:color-mix(in srgb,var(--c,var(--muted)) 16%,transparent);color:var(--c,var(--muted));white-space:nowrap}
.badge::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.badge.plain::before{display:none}
.badge.ok{--c:var(--ok)}.badge.warn{--c:var(--warn)}.badge.err{--c:var(--err)}.badge.info{--c:var(--accent)}
.badge.pulse::before{animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.2}}
.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:650;padding:10px var(--pad);border-bottom:var(--border-w) solid var(--border);white-space:nowrap}
.tbl td{padding:10px var(--pad);border-bottom:1px solid color-mix(in srgb,var(--border) 70%,transparent);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:color-mix(in srgb,var(--surface-2) 70%,transparent)}
.tbl-wrap{overflow-x:auto}
.input,.select{background:var(--surface-2);border:var(--border-w) solid var(--border);border-radius:var(--radius-sm);padding:8px 12px;outline:none;min-width:0;color:var(--text)}
.input:focus,.select:focus{border-color:var(--accent)}
textarea.input{resize:vertical;min-height:80px;width:100%}
.switch{width:38px;height:22px;border-radius:99px;background:var(--border);position:relative;flex:none;transition:background .2s}
.switch::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .2s}
.switch.on{background:var(--accent)}
.switch.on::after{left:19px}
.bar{height:6px;border-radius:99px;background:var(--surface-2);overflow:hidden;min-width:60px}
.bar i{display:block;height:100%;background:var(--accent);border-radius:inherit;transition:width .4s}
.bar.hot i{background:var(--warn)}
.bar.crit i{background:var(--err)}
.av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:11.5px;font-weight:750;background:var(--accent);color:var(--accent-text);flex:none}
.av.sq{border-radius:var(--radius-sm)}
.av.sm{width:24px;height:24px;font-size:10px}
.muted{color:var(--muted)}
.small{font-size:12px}
.mono{font-family:var(--font-mono)}
.row{display:flex;align-items:center;gap:10px}
.row.wrap{flex-wrap:wrap}
.col{display:flex;flex-direction:column;gap:10px}
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{padding:6px 12px;border-radius:99px;border:var(--border-w) solid var(--border);font-size:12.5px;font-weight:550;color:var(--muted)}
.chip:hover{color:var(--text)}
.chip.active{background:var(--accent);color:var(--accent-text);border-color:transparent}
.stat{display:flex;flex-direction:column;gap:6px;padding:var(--pad)}
.stat .lbl{color:var(--muted);font-size:12.5px;display:flex;align-items:center;gap:8px}
.stat .val{font-family:var(--font-head);font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.stat .delta{font-size:12px;color:var(--ok)}
.stat .delta.down{color:var(--err)}
.list{display:flex;flex-direction:column}
.li{display:flex;align-items:center;gap:12px;padding:11px var(--pad);border-bottom:1px solid color-mix(in srgb,var(--border) 70%,transparent)}
.li:last-child{border-bottom:0}
.li.click{cursor:pointer}
.li.click:hover,.li.sel{background:var(--surface-2)}
.li .t{flex:1;min-width:0}
.li .t b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.li .t small{color:var(--muted);font-size:12px}
.empty{padding:30px;text-align:center;color:var(--muted)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:13px}
.kv dt{color:var(--muted)}
.sec-title{font-family:var(--font-head);font-size:16px;font-weight:700}
.dotc{width:10px;height:10px;border-radius:50%;flex:none}
.chart{width:100%;height:180px;display:block}
.chart .grid-l{stroke:var(--border);stroke-width:1}
.chart .ln{fill:none;stroke:var(--accent);stroke-width:2.5;vector-effect:non-scaling-stroke}
.chart .ar{fill:var(--accent);opacity:.14}
.chart-x{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);padding:6px 2px 0}

/* Konsole */
.console{background:color-mix(in srgb,#000 55%,var(--surface));color:#d6e2d6;font-family:var(--font-mono);font-size:12.5px;line-height:1.65;height:400px;overflow:auto;padding:14px 16px}
.console .l-info{color:#9fb0c0}.console .l-warn{color:#f5c26b}.console .l-err{color:#ff7b7b}.console .l-cmd{color:#7fdcff}.console .l-ok{color:#8ae68a}
.console .ts{opacity:.5;margin-right:8px}
.console-in{display:flex;align-items:center;gap:8px;border-top:var(--border-w) solid var(--border);padding:8px 12px;font-family:var(--font-mono)}
.console-in input{flex:1;background:none;border:0;outline:none;color:var(--text)}

/* Code-Editor */
.code-wrap{display:grid;grid-template-columns:230px minmax(0,1fr);min-height:520px}
.tree{border-right:var(--border-w) solid var(--border);padding:10px 6px;font-size:13px}
.tree a{display:flex;align-items:center;gap:7px;padding:5px 8px;border-radius:6px;color:var(--muted)}
.tree a:hover{background:var(--surface-2);color:var(--text)}
.tree a.active{background:var(--surface-2);color:var(--text)}
.tree .ic{width:15px;height:15px}
.tree .ind{padding-left:22px}
.tree .ind2{padding-left:36px}
.ftabs{display:flex;border-bottom:var(--border-w) solid var(--border);overflow-x:auto}
.ftab{padding:9px 14px;font-size:12.5px;border-right:var(--border-w) solid var(--border);color:var(--muted);display:flex;gap:8px;align-items:center;white-space:nowrap}
.ftab.active{background:var(--surface-2);color:var(--text);box-shadow:inset 0 2px 0 var(--accent)}
.code{font-family:var(--font-mono);font-size:13px;line-height:1.7;white-space:pre;padding:14px 0;overflow:auto;outline:none;counter-reset:ln;min-height:420px}
.code .ln{display:block;padding:0 16px 0 0}
.code .ln::before{counter-increment:ln;content:counter(ln);display:inline-block;width:44px;padding-right:14px;text-align:right;color:var(--muted);opacity:.5}
.code .k{color:#c792ea}.code .s{color:#c3e88d}.code .c{color:#7f8c98;font-style:italic}.code .n{color:#f78c6c}
.statusbar{display:flex;gap:16px;padding:6px 14px;font-size:11.5px;background:var(--accent);color:var(--accent-text);font-family:var(--font-mono)}

/* Kanban */
.kb{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,1fr);gap:var(--gap);overflow-x:auto;padding-bottom:6px;align-items:start}
.kb-col{background:color-mix(in srgb,var(--surface-2) 75%,transparent);border:var(--border-w) solid var(--border);border-radius:var(--radius);padding:10px;display:flex;flex-direction:column;gap:8px;min-height:200px;transition:outline .1s}
.kb-col.over{outline:2px dashed var(--accent);outline-offset:2px}
.kb-h{display:flex;align-items:center;gap:8px;padding:4px 6px 6px;font-weight:650;font-family:var(--font-head)}
.kb-h .n{font-size:11px;background:var(--surface);border-radius:99px;padding:1px 8px;color:var(--muted)}
.kb-card{background:var(--surface);border:var(--border-w) solid var(--border);border-radius:var(--radius-sm);padding:12px;cursor:grab;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow)}
.kb-card:hover{border-color:var(--accent)}
.kb-card.dragging{opacity:.4}
.kb-card .ttl{font-weight:550}
.kb-add{color:var(--muted);padding:8px;border-radius:var(--radius-sm);text-align:left;font-size:13px}
.kb-add:hover{background:var(--surface);color:var(--text)}
.tag{display:inline-block;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:99px;background:color-mix(in srgb,var(--c) 18%,transparent);color:var(--c);text-transform:uppercase;letter-spacing:.04em}

/* Kalender */
.cal-head{display:grid;grid-template-columns:repeat(7,1fr);font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;border-bottom:var(--border-w) solid var(--border)}
.cal-head div{padding:10px}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.cal-day{min-height:104px;padding:6px;border-right:1px solid color-mix(in srgb,var(--border) 70%,transparent);border-bottom:1px solid color-mix(in srgb,var(--border) 70%,transparent);cursor:pointer;min-width:0;transition:background .12s}
.cal-day:nth-child(7n){border-right:0}
.cal-day:hover{background:var(--surface-2)}
.cal-day.other{opacity:.35}
.cal-day .num{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;font-size:12.5px;font-weight:600}
.cal-day.today .num{background:var(--accent);color:var(--accent-text)}
.cal-day.sel{background:color-mix(in srgb,var(--accent) 10%,transparent);box-shadow:inset 0 0 0 2px var(--accent)}
.ev{display:block;font-size:11px;padding:2px 6px;border-radius:4px;margin-top:3px;background:color-mix(in srgb,var(--c) 20%,transparent);color:var(--text);border-left:3px solid var(--c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Files */
.crumbs{display:flex;align-items:center;gap:4px;flex-wrap:wrap;font-size:13px}
.crumbs a{padding:4px 8px;border-radius:6px;color:var(--muted)}
.crumbs a:hover{background:var(--surface-2);color:var(--text)}
.crumbs a:last-child{color:var(--text);font-weight:600}
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px;padding:var(--pad)}
.fitem{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 8px 12px;border-radius:var(--radius-sm);cursor:pointer;text-align:center;font-size:12.5px;border:var(--border-w) solid transparent;word-break:break-word}
.fitem:hover{background:var(--surface-2)}
.fitem.sel{background:color-mix(in srgb,var(--accent) 14%,transparent);border-color:var(--accent)}
.fitem .ic{width:40px;height:40px;stroke-width:1.5}
.fitem .ic.dir{color:var(--accent)}
.fprev{height:150px;border-radius:var(--radius-sm);display:grid;place-items:center;background:var(--surface-2);overflow:hidden;font-family:var(--font-mono);font-size:11.5px;color:var(--muted)}
.fprev pre{padding:12px;width:100%;height:100%;white-space:pre-wrap;text-align:left}

/* Web-Editor */
.we{display:grid;grid-template-columns:200px minmax(0,1fr) 250px;gap:var(--gap);align-items:start}
.blocks-pal{display:grid;gap:6px}
.blocks-pal button{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-sm);background:var(--surface-2);border:var(--border-w) dashed var(--border);text-align:left;font-size:13px}
.blocks-pal button:hover{border-color:var(--accent);color:var(--accent)}
.canvas-wrap{background:repeating-linear-gradient(45deg,var(--surface-2) 0 10px,var(--surface) 10px 20px);border-radius:var(--radius);padding:26px 16px;display:flex;justify-content:center;border:var(--border-w) solid var(--border)}
.canvas{background:#fff;color:#18181b;width:100%;max-width:var(--cw,900px);transition:max-width .35s;border-radius:10px;box-shadow:0 10px 40px rgba(0,0,0,.25);font-family:Inter,sans-serif;font-size:15px;overflow:hidden}
.canvas .site-nav{display:flex;align-items:center;gap:18px;padding:14px 22px;border-bottom:1px solid #eee;font-size:13px;color:#555}
.canvas .site-nav b{color:#111;margin-right:auto;font-size:15px}
.canvas .site-body{padding:20px 22px 30px;display:flex;flex-direction:column;gap:4px;min-height:420px}
.blk{position:relative;padding:8px 10px;border:1.5px dashed transparent;border-radius:6px;outline:none}
.blk:hover,.blk:focus-within{border-color:#60a5fa}
.blk-tools{position:absolute;top:-13px;right:8px;display:none;gap:2px;background:#2563eb;border-radius:6px;padding:2px}
.blk:hover .blk-tools{display:flex}
.blk-tools button{color:#fff;width:22px;height:22px;display:grid;place-items:center;border-radius:4px}
.blk-tools button:hover{background:rgba(255,255,255,.2)}
.blk-tools .ic{width:13px;height:13px}
.blk h1{font-size:32px;line-height:1.15;letter-spacing:-.02em;outline:none}
.blk h2{font-size:22px;outline:none}
.blk p{color:#3f3f46;line-height:1.6;outline:none}
.blk .img{height:180px;border-radius:10px;background:linear-gradient(135deg,#4ade80,#16a34a 40%,#78350f 41%,#a16207);display:grid;place-items:center;color:#fff;font-weight:700;font-size:13px}
.blk .cta{display:inline-block;background:#16a34a;color:#fff;padding:10px 20px;border-radius:8px;font-weight:600;outline:none}
.blk hr{border:0;border-top:1px solid #e5e7eb;margin:8px 0}
.preview-mode .blk{border-color:transparent!important}
.preview-mode .blk-tools{display:none!important}

/* Modal / Toast / Popover */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.55);display:grid;place-items:center;z-index:200;padding:16px;animation:fade .15s}
.modal{width:min(460px,100%);background:var(--surface);border:var(--border-w) solid var(--border);border-radius:var(--radius);box-shadow:0 30px 80px rgba(0,0,0,.4);overflow:hidden;color:var(--text);font-family:var(--font)}
.modal .card-b{display:flex;flex-direction:column;gap:12px}
.modal label{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--muted)}
.modal-f{display:flex;justify-content:flex-end;gap:8px;padding:12px var(--pad);border-top:var(--border-w) solid var(--border);background:var(--surface-2)}
@keyframes fade{from{opacity:0}}
.toasts{position:fixed;top:16px;right:16px;display:flex;flex-direction:column;gap:8px;z-index:300;pointer-events:none}
.toast{background:var(--surface);color:var(--text);border:var(--border-w) solid var(--border);border-left:4px solid var(--accent);border-radius:var(--radius-sm);padding:11px 16px;box-shadow:0 10px 30px rgba(0,0,0,.3);font-size:13px;animation:tin .25s;max-width:340px;font-family:var(--font)}
@keyframes tin{from{transform:translateX(30px);opacity:0}}
.pop{position:absolute;top:calc(100% + 8px);right:0;width:320px;background:var(--surface);border:var(--border-w) solid var(--border);border-radius:var(--radius);box-shadow:0 20px 50px rgba(0,0,0,.35);z-index:50;overflow:hidden;text-align:left}
.rel{position:relative}

/* ---------- Design-Switcher (neutral) ---------- */
.sw{position:fixed;left:16px;bottom:16px;z-index:400;display:flex;align-items:center;gap:4px;background:rgba(17,18,22,.92);color:#f1f1f3;border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:5px;font:500 13px Inter,system-ui,sans-serif;box-shadow:0 12px 40px rgba(0,0,0,.4);backdrop-filter:blur(12px)}
.sw button{color:#f1f1f3;padding:7px 10px;border-radius:9px;display:flex;align-items:center;gap:8px}
.sw button:hover{background:rgba(255,255,255,.1)}
.sw .num{font-variant-numeric:tabular-nums;opacity:.6}
.sw .ic{width:16px;height:16px}
.sw-list{position:absolute;bottom:calc(100% + 8px);left:0;width:300px;max-height:60vh;overflow:auto;background:rgba(17,18,22,.97);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:6px}
.sw-list button{width:100%;justify-content:flex-start}
.sw-list button.on{background:rgba(255,255,255,.12)}
.sw-list i{width:12px;height:12px;border-radius:4px;flex:none}
.layout-dock ~ .sw,.layout-dock .sw{bottom:16px}

/* ---------- Galerie ---------- */
.gal{max-width:1360px;margin:0 auto;padding:48px 24px 80px}
.gal-h{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:28px}
.gal-h h1{font-size:clamp(28px,4vw,42px);letter-spacing:-.02em;line-height:1.1}
.gal-h p{color:#9a9ca6;margin-top:10px;max-width:640px}
.gal .chips .chip{color:#a6a8b2;border-color:#2b2d35}
.gal .chips .chip.active{background:#f1f1f3;color:#0d0e12}
.gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.gcard{background:#15161b;border:1px solid #25272f;border-radius:16px;overflow:hidden;cursor:pointer;transition:transform .2s,border-color .2s;display:flex;flex-direction:column}
.gcard:hover{transform:translateY(-4px);border-color:#4a4d5a}
.gcard-b{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px}
.gcard-b .nr{font:600 11px 'JetBrains Mono',monospace;color:#7d808c}
.gcard-b b{font-size:16px}
.gcard-b p{font-size:13px;color:#9a9ca6;line-height:1.45}
.gtags{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.gtags span{font-size:11px;padding:2px 8px;border-radius:99px;background:#22242c;color:#b4b6c0}
.mini{height:178px;background:var(--bg);background-image:var(--bg-img);background-size:auto;display:flex;gap:6px;padding:9px;position:relative;overflow:hidden}
.m-nav{background:var(--nav-bg);border-radius:4px;width:22%;display:flex;flex-direction:column;gap:6px;padding:9px 7px;border:1px solid var(--border)}
.m-nav i{height:6px;border-radius:3px;background:var(--nav-text);opacity:.35;flex:none}
.m-nav i:nth-child(1){width:60%;background:var(--accent);opacity:1;height:9px;margin-bottom:4px}
.m-nav i:nth-child(3){background:var(--accent);opacity:.9}
.m-main{flex:1;display:flex;flex-direction:column;gap:7px;min-width:0}
.m-head{height:10px;border-radius:3px;background:var(--text);opacity:.85;width:38%;flex:none;margin:3px 0}
.m-row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.m-row b,.m-big b{background:var(--surface);border:1px solid var(--border);border-radius:min(var(--radius),8px)}
.m-row b{height:36px}
.m-row b:first-child{background:var(--accent);border-color:transparent}
.m-row b:nth-child(n+4){display:none}
.m-big{flex:1;display:grid;grid-template-columns:2fr 1fr;gap:6px}
.ml-topbar,.ml-tabs{flex-direction:column}
.ml-topbar .m-nav,.ml-tabs .m-nav{width:100%;height:20px;flex-direction:row;align-items:center;padding:0 8px;flex:none}
.ml-topbar .m-nav i,.ml-tabs .m-nav i{width:9%;height:5px}
.ml-topbar .m-nav i:nth-child(1),.ml-tabs .m-nav i:nth-child(1){width:12%;margin:0 8px 0 0}
.ml-tabs .m-nav i:nth-child(3){height:14px;align-self:flex-end;border-radius:3px 3px 0 0;background:var(--bg);opacity:1}
.ml-right{flex-direction:row-reverse}
.ml-rail .m-nav{width:9%;align-items:center}
.ml-rail .m-nav i{width:70%}
.ml-chat .m-nav{width:8%;align-items:center;padding:7px 3px}
.ml-chat .m-nav i{width:14px;height:14px;border-radius:50%}
.ml-chat .m-nav::after{content:'';position:absolute;left:calc(8% + 15px);top:9px;bottom:9px;width:17%;background:var(--subnav-bg);border-radius:4px}
.ml-chat .m-main{margin-left:19%}
.ml-dock .m-nav{position:absolute;bottom:9px;left:28%;width:44%;height:18px;flex-direction:row;align-items:center;justify-content:center;border-radius:8px;padding:0 6px}
.ml-dock .m-nav i{width:10px;height:10px;border-radius:3px}
.ml-dock .m-big{margin-bottom:24px}
.ml-launcher .m-nav{display:none}
.ml-launcher .m-head{width:50%;height:14px}
.ml-launcher .m-row{flex:1;grid-template-rows:1fr 1fr}
.ml-launcher .m-row b{height:auto}
.ml-launcher .m-row b:first-child{grid-row:span 2}
.ml-launcher .m-row b:nth-child(n+4){display:block}
.ml-launcher .m-row b:nth-child(n+5){display:none}
.ml-launcher .m-big{display:none}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .layout-sidebar .shell,.layout-terminal .shell,.layout-right .shell,.layout-rail .shell,.layout-chat .shell{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .layout-sidebar .nav,.layout-terminal .nav,.layout-right .nav,.layout-rail .nav,.layout-chat .nav{order:0;flex-direction:row;height:auto;align-items:center;padding:8px 12px;border-right:0;border-left:0;border-bottom:var(--border-w) solid var(--border);overflow-x:auto}
  .nav .brand{padding:0 10px 0 0}
  .nav .brand-t,.nav .nav-foot,.nav-children,.subnav{display:none!important}
  .nav-items{flex-direction:row!important}
  .nav .lbl{display:none}
  .layout-chat .nav-item.active::before{display:none}
  .layout-rail .nav-item{font-size:0}
  .g2,.g3,.g4,.g-21,.g-12,.we,.code-wrap{grid-template-columns:1fr}
  .tree{border-right:0;border-bottom:var(--border-w) solid var(--border)}
  .search{display:none}
  .tile:first-child{grid-column:span 1}
  .cal-day{min-height:64px}
  .cal-day .ev{font-size:0;height:5px;padding:0}
  :root .app{--pad-page:16px}
}

/* =========================================================
   25 THEMES
   ========================================================= */
/* 01 Obsidian */
.t-1{--bg:#0f1115;--surface:#161920;--surface-2:#1e222b;--border:#262b36;--text:#e6e8ee;--muted:#8b93a7;--accent:#8b5cf6;--accent-2:#22d3ee;--nav-bg:#0b0d11;--nav-text:#aeb4c4}
/* 02 Daylight */
.t-2{--bg:#f5f6fa;--surface:#fff;--surface-2:#f1f3f8;--border:#e4e7ee;--text:#111827;--muted:#6b7280;--accent:#2563eb;--accent-2:#0ea5e9;--nav-bg:#ffffff;--nav-text:#4b5563;--nav-active-bg:#eff4ff;--nav-active-text:#1d4ed8;--shadow:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.06);--radius:10px}
.t-2 .icon-btn .dot{border-color:#fff}
/* 03 Creeper (Pixel/Block) */
.t-3{--bg:#1c2716;--bg-img:linear-gradient(45deg,rgba(0,0,0,.12) 25%,transparent 25%,transparent 75%,rgba(0,0,0,.12) 75%),linear-gradient(45deg,rgba(0,0,0,.12) 25%,transparent 25%,transparent 75%,rgba(0,0,0,.12) 75%);--surface:#2a3a20;--surface-2:#34482a;--border:#0f1709;--border-w:3px;--text:#eaf6dc;--muted:#a7bd90;--accent:#62c33d;--accent-2:#3fa9f5;--accent-text:#0f1709;--nav-bg:#6b4a2b;--nav-text:#f3e3cf;--nav-active-bg:#62c33d;--nav-active-text:#0f1709;--radius:0;--radius-sm:0;--font:'IBM Plex Mono',monospace;--font-head:'VT323',monospace;--h1:16px}
.t-3.app{background-size:32px 32px;background-position:0 0,16px 16px}
.t-3 .nav{border-bottom:6px solid #62c33d!important;box-shadow:inset 0 -10px 0 rgba(0,0,0,.15)}
.t-3 .titles h1{font-family:'Press Start 2P',monospace;line-height:1.6}
.t-3 .card-h h3,.t-3 .kb-h{font-size:22px;font-weight:400}
.t-3 .stat .val,.t-3 .tile .kpi{font-size:42px;font-weight:400}
.t-3 .card,.t-3 .btn,.t-3 .kb-card,.t-3 .tile{box-shadow:inset -3px -3px 0 rgba(0,0,0,.35),inset 3px 3px 0 rgba(255,255,255,.14)}
.t-3 .btn.primary{border-color:#0f1709}
.t-3 .badge,.t-3 .chip,.t-3 .av,.t-3 .switch,.t-3 .switch::after,.t-3 .bar,.t-3 .cal-day .num{border-radius:0}
.t-3 .logo{background:#62c33d;box-shadow:inset -4px -4px 0 #3a7d22}
/* 04 Nether */
.t-4{--bg:#140a0a;--bg-img:radial-gradient(circle at 80% -10%,rgba(255,90,31,.18),transparent 45%);--surface:#1f1010;--surface-2:#2b1515;--border:#3a1c1c;--text:#fbe9e2;--muted:#b98a7f;--accent:#ff5a1f;--accent-2:#ffb020;--accent-text:#160b0b;--nav-bg:#190c0c;--nav-text:#d9a99b;--nav-active-bg:rgba(255,90,31,.2);--nav-active-text:#ffb08f;--font:'Space Grotesk',sans-serif;--radius:10px}
.t-4 .stat .val{background:linear-gradient(90deg,#ff5a1f,#ffb020);-webkit-background-clip:text;background-clip:text;color:transparent}
/* 05 Glass Aurora */
.t-5{--bg:#0b0a1c;--bg-img:radial-gradient(at 15% 20%,rgba(124,58,237,.55),transparent 45%),radial-gradient(at 85% 15%,rgba(14,165,233,.45),transparent 45%),radial-gradient(at 60% 90%,rgba(236,72,153,.4),transparent 50%);--surface:rgba(255,255,255,.07);--surface-2:rgba(255,255,255,.1);--border:rgba(255,255,255,.14);--text:#fff;--muted:rgba(255,255,255,.62);--accent:#7dd3fc;--accent-2:#f0abfc;--accent-text:#0b1020;--nav-bg:rgba(20,18,40,.55);--nav-text:#e5e7ff;--nav-active-bg:rgba(255,255,255,.18);--radius:20px;--radius-sm:12px;--blur:blur(18px) saturate(150%);--font:'Space Grotesk',sans-serif}
.t-5 .console{background:rgba(0,0,0,.4)}
/* 06 Terminal */
.t-6{--bg:#040804;--surface:#050a05;--surface-2:#0b160b;--border:#1d5a1d;--text:#3dff6e;--muted:#1fa64a;--accent:#3dff6e;--accent-2:#ffd23d;--accent-text:#021002;--ok:#3dff6e;--warn:#ffd23d;--err:#ff4d4d;--nav-bg:#030603;--nav-text:#2fd65a;--nav-active-bg:#3dff6e;--nav-active-text:#021002;--radius:0;--radius-sm:0;--font:'JetBrains Mono',monospace;--font-head:'JetBrains Mono',monospace;--fs:13px;--h1:20px}
.t-6.app{text-shadow:0 0 6px rgba(61,255,110,.35)}
.t-6 .shell::after{content:'';position:fixed;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.25) 0 1px,transparent 1px 3px);z-index:150}
.t-6 .nav-item .key{display:inline}
.t-6 .nav-item .key::before{content:'['}.t-6 .nav-item .key::after{content:']'}
.t-6 .nav-item .ic{display:none}
.t-6 .card-h h3::before{content:'┌─ '}
.t-6 .titles h1::before{content:'root@blockwerk:~$ ';color:var(--muted)}
.t-6 .card{border-style:solid}
.t-6 .badge{background:none;border:1px solid currentColor;border-radius:0}
.t-6 .av,.t-6 .chip,.t-6 .switch,.t-6 .switch::after,.t-6 .cal-day .num{border-radius:0}
.t-6 .btn.primary,.t-6 .nav-item.active,.t-6 .chip.active{text-shadow:none}
.t-6 .canvas{text-shadow:none}
/* 07 Brutalist */
.t-7{--bg:#fffbe8;--surface:#ffffff;--surface-2:#fff3b0;--border:#000;--border-w:2.5px;--text:#000;--muted:#3d3d3d;--accent:#ffd600;--accent-2:#ff4ecd;--accent-text:#000;--ok:#00a650;--warn:#ff8a00;--err:#ff2e2e;--nav-bg:#000;--nav-text:#fff;--nav-active-bg:#ffd600;--nav-active-text:#000;--radius:0;--radius-sm:0;--shadow:6px 6px 0 #000;--font:'Space Grotesk',sans-serif;--h1:38px}
.t-7 .titles h1{text-transform:uppercase;font-weight:800;letter-spacing:-.03em}
.t-7 .btn{box-shadow:3px 3px 0 #000;font-weight:700}
.t-7 .btn:active{transform:translate(3px,3px);box-shadow:none}
.t-7 .card-h{background:var(--accent)}
.t-7 .card-h h3{text-transform:uppercase;font-weight:800}
.t-7 .badge{border:2px solid #000;color:#000;background:color-mix(in srgb,var(--c) 45%,#fff)}
.t-7 .icon-btn .dot{border-color:#000}
/* 08 Nord Frost */
.t-8{--bg:#2e3440;--surface:#3b4252;--surface-2:#434c5e;--border:#4c566a;--text:#eceff4;--muted:#a7b1c2;--accent:#88c0d0;--accent-2:#b48ead;--accent-text:#2e3440;--ok:#a3be8c;--warn:#ebcb8b;--err:#bf616a;--nav-bg:#272c36;--nav-text:#d8dee9;--nav-active-bg:rgba(136,192,208,.25);--nav-active-text:#eceff4;--font:'IBM Plex Sans',sans-serif;--radius:10px}
/* 09 Community (Chat-Layout) */
.t-9{--bg:#2b2d36;--surface:#33363f;--surface-2:#3c3f4a;--border:#23252c;--text:#f2f3f5;--muted:#a0a4ae;--accent:#6c74f5;--accent-2:#3ba55c;--accent-text:#fff;--nav-bg:#1e1f25;--nav-text:#dbdee1;--subnav-bg:#262830;--radius:8px;--radius-sm:6px}
/* 10 Bento Launcher */
.t-10{--bg:#0b0b0d;--surface:#151518;--surface-2:#1e1e22;--border:#25252a;--text:#fafafa;--muted:#8e8e96;--accent:#22d3ee;--accent-2:#a3e635;--accent-text:#04161a;--radius:24px;--radius-sm:12px;--font:'Space Grotesk',sans-serif}
.t-10 .tile:nth-child(4){background:var(--accent-2);color:#141a05;border-color:transparent}
.t-10 .tile:nth-child(4) .ic,.t-10 .tile:nth-child(4) small{color:#141a05}
/* 11 Paper */
.t-11{--bg:#f3eee4;--surface:#fbf8f2;--surface-2:#efe8da;--border:#d9cfbd;--text:#2b2520;--muted:#7a6e60;--accent:#b4532a;--accent-2:#3f6c5a;--accent-text:#fff;--nav-bg:#f3eee4;--nav-text:#5e5347;--nav-active-bg:transparent;--nav-active-text:#b4532a;--radius:3px;--radius-sm:3px;--font:'IBM Plex Sans',sans-serif;--font-head:'Newsreader',serif;--h1:36px}
.t-11 .titles h1{font-weight:500;font-style:italic}
.t-11 .nav-item.active{box-shadow:inset 0 -2px 0 var(--accent);border-radius:0}
.t-11 .card-h h3{font-size:19px;font-weight:600}
.t-11 .stat .val{font-weight:500}
/* 12 Neon Grid */
.t-12{--bg:#0a0614;--bg-img:linear-gradient(rgba(255,43,214,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(0,240,255,.06) 1px,transparent 1px);--surface:#120b24;--surface-2:#1b1035;--border:rgba(255,43,214,.35);--text:#f6eaff;--muted:#a993cc;--accent:#ff2bd6;--accent-2:#00f0ff;--accent-text:#0a0614;--nav-bg:#0d0820;--nav-text:#cdb6f0;--nav-active-bg:rgba(0,240,255,.12);--nav-active-text:#00f0ff;--radius:0;--radius-sm:0;--font:'Rajdhani',sans-serif;--font-head:'Orbitron',sans-serif;--fs:15px;--h1:22px}
.t-12.app{background-size:40px 40px}
.t-12 .titles h1{text-transform:uppercase;letter-spacing:.08em;color:var(--accent-2);text-shadow:0 0 14px rgba(0,240,255,.6)}
.t-12 .card,.t-12 .tile{clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px))}
.t-12 .card-h h3{text-transform:uppercase;letter-spacing:.1em;font-size:12px}
.t-12 .btn.primary{box-shadow:0 0 18px rgba(255,43,214,.6)}
.t-12 .nav-item.active{box-shadow:inset -3px 0 0 var(--accent-2)}
.t-12 .stat .val{color:var(--accent-2);text-shadow:0 0 12px rgba(0,240,255,.5)}
/* 13 Solarized Tabs */
.t-13{--bg:#fdf6e3;--surface:#fffbef;--surface-2:#eee8d5;--border:#e3dbc2;--text:#073642;--muted:#657b83;--accent:#268bd2;--accent-2:#2aa198;--accent-text:#fff;--ok:#859900;--warn:#b58900;--err:#dc322f;--nav-bg:#eee8d5;--nav-text:#586e75;--nav-active-text:#073642;--radius:6px;--radius-sm:6px;--font:'IBM Plex Sans',sans-serif;--font-mono:'IBM Plex Mono',monospace}
/* 14 Mono Minimal */
.t-14{--bg:#ffffff;--surface:#fff;--surface-2:#f5f5f5;--border:#ebebeb;--text:#0a0a0a;--muted:#737373;--accent:#0a0a0a;--accent-2:#737373;--accent-text:#fff;--nav-bg:#fff;--nav-text:#737373;--nav-active-bg:transparent;--nav-active-text:#0a0a0a;--radius:6px;--radius-sm:6px;--pad:22px;--pad-page:40px;--gap:22px;--h1:30px}
.t-14 .nav-item.active{font-weight:650}
.t-14 .card{border-color:#ededed}
.t-14 .badge{background:none;border:1px solid var(--border);color:var(--text)}
.t-14 .badge.ok::before{background:#16a34a}.t-14 .badge.err::before{background:#dc2626}.t-14 .badge.warn::before{background:#d97706}
.t-14 .icon-btn .dot{border-color:#fff}
/* 15 Ocean */
.t-15{--bg:#06141f;--surface:#0b2131;--surface-2:#102c40;--border:#173a52;--text:#e0f2fe;--muted:#7fa7c0;--accent:#2dd4bf;--accent-2:#38bdf8;--accent-text:#042f2e;--nav-bg:linear-gradient(180deg,#0e7490 0%,#0b2131 70%);--nav-text:#cff6ff;--nav-active-bg:rgba(255,255,255,.16);--radius:14px}
/* 16 Sunset Launcher */
.t-16{--bg:#ffb38a;--bg-img:linear-gradient(160deg,#ffd3a5 0%,#ff9a8b 45%,#c86dd7 100%);--surface:rgba(255,255,255,.82);--surface-2:rgba(255,255,255,.6);--border:rgba(255,255,255,.9);--text:#3a1a24;--muted:#8a5a63;--accent:#e8590c;--accent-2:#c2255c;--accent-text:#fff;--radius:22px;--radius-sm:12px;--blur:blur(10px);--font:'Nunito',sans-serif;--shadow:0 10px 30px rgba(120,40,40,.12)}
.t-16 .titles h1,.t-16 .hero h2{color:#2b0f18}
/* 17 Pastell Tonal */
.t-17{--bg:#fbf7fd;--surface:#fff;--surface-2:#f2ebf6;--border:#e7dfec;--text:#1d1b20;--muted:#6b6470;--accent:#6750a4;--accent-2:#7d5260;--accent-text:#fff;--nav-bg:#f3edf7;--nav-text:#49454f;--nav-active-bg:#e8def8;--nav-active-text:#1d192b;--radius:26px;--radius-sm:999px;--font:'Nunito',sans-serif}
.t-17 .card{border:0;background:var(--surface-2)}
.t-17 .card-h{border:0}
.t-17 .tbl td{border-color:#e7dfec}
.t-17 .input,.t-17 .select{border-radius:14px;background:#fff}
/* 18 Retro OS */
.t-18{--bg:#008080;--surface:#c0c0c0;--surface-2:#d4d0c8;--border:#808080;--text:#000;--muted:#3a3a3a;--accent:#000080;--accent-2:#008080;--accent-text:#fff;--ok:#007a00;--warn:#8a6d00;--err:#c00000;--nav-bg:#c0c0c0;--nav-text:#000;--nav-active-bg:#000080;--nav-active-text:#fff;--radius:0;--radius-sm:0;--font:Tahoma,Verdana,'Segoe UI',sans-serif;--fs:13px;--h1:18px}
.t-18 .card,.t-18 .kb-col,.t-18 .modal,.t-18 .tile{border:0;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px #808080,inset 2px 2px #dfdfdf;padding:3px}
.t-18 .card-h{background:linear-gradient(90deg,#000080,#1084d0);color:#fff;border:0;min-height:0;padding:4px 6px 4px 8px}
.t-18 .card-h h3{font-size:12.5px;font-weight:700}
.t-18 .card-h::after{content:'✕';font-size:10px;width:16px;height:14px;display:grid;place-items:center;background:#c0c0c0;color:#000;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff;margin-left:auto}
.t-18 .card-h .btn{margin-left:auto}
.t-18 .card-h .btn ~ .btn{margin-left:0}
.t-18 .btn{background:#c0c0c0;border:0;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px #808080,inset 2px 2px #dfdfdf;color:#000}
.t-18 .btn.primary{background:#c0c0c0;color:#000;font-weight:700;outline:1px solid #000}
.t-18 .btn:active{box-shadow:inset 1px 1px #0a0a0a,inset -1px -1px #fff}
.t-18 .input,.t-18 .select,.t-18 .search,.t-18 .console,.t-18 .canvas-wrap{background:#fff;border:0;box-shadow:inset 1px 1px #808080,inset -1px -1px #fff,inset 2px 2px #0a0a0a}
.t-18 .topbar{background:#c0c0c0;box-shadow:inset 0 -2px #808080}
.t-18 .subtabs{background:#c0c0c0}
.t-18 .nav{box-shadow:inset -2px 0 #808080;border:0}
.t-18 .nav .logo{background:#008080}
.t-18 .badge,.t-18 .av,.t-18 .chip,.t-18 .switch,.t-18 .switch::after,.t-18 .cal-day .num{border-radius:0}
.t-18 .console{background:#000;color:#c0c0c0}
.t-18 .icon-btn .dot{border-color:#c0c0c0}
.t-18 .tile{background:#c0c0c0}
.t-18 .tile:first-child{background:#000080}
.t-18 .hero h2,.t-18 .hero p{color:#fff}
/* 19 Forest */
.t-19{--bg:#f0f3ec;--surface:#fff;--surface-2:#e8eee2;--border:#d6dfcd;--text:#1f2a1c;--muted:#61705a;--accent:#3f7d3a;--accent-2:#c27c2c;--accent-text:#fff;--nav-bg:#1f3a1d;--nav-text:#cfe0c6;--nav-active-bg:rgba(255,255,255,.12);--nav-active-text:#fff;--radius:14px;--font:'IBM Plex Sans',sans-serif;--font-head:'Newsreader',serif;--h1:30px;--shadow:0 1px 3px rgba(31,58,29,.08)}
.t-19 .brand-t b{color:#fff}
.t-19 .me-t b{color:#fff}
.t-19 .icon-btn .dot{border-color:#fff}
/* 20 High Contrast */
.t-20{--bg:#000;--surface:#000;--surface-2:#141414;--border:#fff;--border-w:2px;--text:#fff;--muted:#e0e0e0;--accent:#ffeb3b;--accent-2:#4dd0ff;--accent-text:#000;--ok:#5cff7a;--warn:#ffb74d;--err:#ff6b6b;--nav-bg:#000;--nav-text:#fff;--nav-active-bg:#ffeb3b;--nav-active-text:#000;--radius:4px;--radius-sm:4px;--font:'Atkinson Hyperlegible',sans-serif;--fs:16px;--h1:28px}
.t-20 *:focus-visible{outline:3px solid #ffeb3b!important;outline-offset:2px}
.t-20 .nav-item,.t-20 .subtab{text-decoration:underline;text-underline-offset:4px}
.t-20 .nav-item.active{text-decoration:none}
.t-20 .badge{border:2px solid currentColor;background:#000}
/* 21 Candy */
.t-21{--bg:#fff0f6;--bg-img:radial-gradient(circle at 10% 10%,#ffe0ef,transparent 40%),radial-gradient(circle at 90% 80%,#e9e3ff,transparent 45%);--surface:#fff;--surface-2:#ffe6f1;--border:#ffd0e3;--text:#4a1d3a;--muted:#a0628a;--accent:#ff5fa2;--accent-2:#7c5cff;--accent-text:#fff;--nav-bg:#ffffff;--nav-text:#a0628a;--radius:24px;--radius-sm:14px;--font:'Nunito',sans-serif;--shadow:0 8px 24px rgba(255,95,162,.12)}
.t-21 .titles h1{font-weight:900}
.t-21 .btn{border-radius:999px}
/* 22 Midnight Gold */
.t-22{--bg:#0a0a0b;--surface:#121214;--surface-2:#1a1a1d;--border:#2a2620;--text:#f3ead8;--muted:#9c927e;--accent:#d4af37;--accent-2:#8f7a4a;--accent-text:#0a0a0b;--nav-bg:#0a0a0b;--nav-text:#b9ad94;--nav-active-bg:transparent;--nav-active-text:#d4af37;--radius:4px;--radius-sm:3px;--font:Inter,sans-serif;--font-head:'Playfair Display',serif;--h1:32px}
.t-22 .nav-item.active{box-shadow:inset 2px 0 0 var(--accent)}
.t-22 .card-h h3{font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:.18em;font-size:11px;color:var(--accent)}
.t-22 .titles h1{font-weight:500}
.t-22 .stat .val{font-weight:500}
/* 23 Blueprint */
.t-23{--bg:#0c3d8f;--bg-img:linear-gradient(rgba(255,255,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.16) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);--surface:rgba(12,61,143,.75);--surface-2:rgba(255,255,255,.08);--border:rgba(255,255,255,.55);--text:#fff;--muted:#b8cdf5;--accent:#fff;--accent-2:#ffd166;--accent-text:#0c3d8f;--ok:#7dffb0;--warn:#ffd166;--err:#ff8fa3;--nav-bg:rgba(8,44,104,.9);--nav-text:#dbe7ff;--nav-active-bg:#fff;--nav-active-text:#0c3d8f;--radius:0;--radius-sm:0;--font:'JetBrains Mono',monospace;--fs:13px}
.t-23.app{background-size:100px 100px,100px 100px,20px 20px,20px 20px}
.t-23 .card{border-style:dashed}
.t-23 .card-h h3::before{content:'FIG. ';opacity:.6}
.t-23 .card-h h3,.t-23 .titles h1{text-transform:uppercase;letter-spacing:.08em}
.t-23 .badge,.t-23 .av,.t-23 .chip{border-radius:0}
/* 24 Compact Ops */
.t-24{--bg:#111217;--surface:#181b1f;--surface-2:#22252b;--border:#2c3036;--text:#d8d9da;--muted:#8e9099;--accent:#ff9830;--accent-2:#5794f2;--accent-text:#111217;--ok:#73bf69;--warn:#fade2a;--err:#f2495c;--nav-bg:#0b0c0e;--nav-text:#ccccdc;--radius:3px;--radius-sm:2px;--font:'IBM Plex Sans',sans-serif;--fs:12.5px;--pad:11px;--pad-page:14px;--gap:10px;--h1:17px}
.t-24 .nav-item .key{display:inline;margin-left:4px}
.t-24 .card-h{min-height:36px;padding:7px var(--pad)}
.t-24 .card-h h3{font-size:12.5px}
.t-24 .stat .val{font-size:24px}
.t-24 .tbl td,.t-24 .tbl th{padding:6px var(--pad)}
.t-24 .topbar{padding:10px var(--pad-page)}
/* 25 End Dimension */
.t-25{--bg:#07040f;--bg-img:radial-gradient(1px 1px at 20px 30px,#fff,transparent),radial-gradient(1px 1px at 120px 80px,#cbb8ff,transparent),radial-gradient(1.5px 1.5px at 170px 160px,#fff,transparent),radial-gradient(1px 1px at 60px 140px,#e9e35a,transparent),radial-gradient(ellipse at 70% 0%,rgba(176,124,255,.25),transparent 55%);--surface:rgba(18,12,34,.88);--surface-2:#1c1433;--border:#2e2150;--text:#efe9ff;--muted:#9b8fc0;--accent:#e9e35a;--accent-2:#b07cff;--accent-text:#16102a;--radius:16px;--font:'Space Grotesk',sans-serif}
.t-25.app{background-size:200px 200px,200px 200px,200px 200px,200px 200px,100% 100%}
.t-25 .tile:first-child{background:linear-gradient(135deg,#b07cff,#e9e35a)}
.t-25 .card,.t-25 .tile{box-shadow:0 0 0 1px rgba(176,124,255,.08),0 10px 40px rgba(80,40,160,.2)}

/* =========================================================
   GitHub-Stil (Layout + Themes 26/27)
   ========================================================= */
.layout-github{display:flex;flex-direction:column}
.gh-top{display:flex;align-items:center;gap:12px;padding:14px 24px 10px;background:var(--gh-header);color:var(--text)}
.gh-top .logo{width:32px;height:32px;border-radius:50%;background:var(--text);color:var(--bg)}
.gh-crumb{display:flex;align-items:center;gap:6px;font-size:14px}
.gh-crumb a,.gh-crumb b{padding:4px 6px;border-radius:6px;cursor:pointer}
.gh-crumb a:hover,.gh-crumb b:hover{background:var(--surface-2)}
.gh-crumb span{color:var(--muted)}
.gh-crumb b{font-weight:600}
.gh-ibtn{display:inline-flex;align-items:center;gap:2px;height:32px;min-width:32px;justify-content:center;padding:0 6px;border:1px solid var(--border);border-radius:6px;color:var(--muted);position:relative}
.gh-ibtn:hover{background:var(--surface-2);color:var(--text)}
.gh-ibtn .ic{width:16px;height:16px}
.gh-dot{position:absolute;top:-3px;right:-3px;width:10px;height:10px;border-radius:50%;background:var(--accent);border:2px solid var(--gh-header)}
.gh-search{display:flex;align-items:center;gap:8px;height:32px;width:280px;padding:0 10px;border:1px solid var(--border);border-radius:6px;color:var(--muted)}
.gh-search input{background:none;border:0;outline:none;width:100%;color:var(--text);font-size:13px}
.gh-search .ic{width:16px;height:16px}
.gh-tabs{display:flex;gap:4px;padding:0 24px;background:var(--gh-header);border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none;position:sticky;top:0;z-index:20}
.gh-tab{display:flex;align-items:center;gap:8px;padding:8px 8px 10px;margin-bottom:-1px;font-size:14px;color:var(--text);border-bottom:2px solid transparent;white-space:nowrap;position:relative;z-index:0}
.gh-tab::before{content:'';position:absolute;inset:4px 0 6px;border-radius:6px;z-index:-1}
.gh-tab:hover::before{background:var(--surface-2)}
.gh-tab .ic{width:16px;height:16px;color:var(--muted)}
.gh-tab.active{border-bottom-color:var(--gh-tab);font-weight:600}
.gh-tab.active .ic{color:var(--text)}
.gh-count{font-size:12px;font-weight:500;line-height:18px;padding:0 6px;border-radius:2em;background:var(--gh-counter);color:var(--text)}
.gh-main{width:100%;max-width:1280px;margin:0 auto;flex:1}
.gh-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:24px 24px 0}
.gh-head h1{font-size:20px;font-weight:600}
.gh-head h1 .muted{font-weight:400}
.gh-seg{display:inline-flex;border:1px solid var(--border);border-radius:6px;overflow:hidden}
.gh-seg button{display:flex;align-items:center;gap:6px;padding:5px 12px;font-size:12.5px;font-weight:500;color:var(--text);background:var(--gh-btn);border-right:1px solid var(--border)}
.gh-seg button:last-child{border-right:0}
.gh-seg button:hover{background:var(--surface-2)}
.gh-seg button.active{background:var(--gh-seg-on);box-shadow:inset 0 0 0 1px var(--gh-seg-on-b);font-weight:600}
.gh-seg .ic{width:14px;height:14px;color:var(--muted)}
.layout-github .content{padding:16px 24px 80px}
.gh-foot{display:flex;align-items:center;justify-content:center;gap:8px;padding:30px;color:var(--muted);font-size:12px;border-top:1px solid var(--border)}
.gh-foot .ic{width:16px;height:16px}
.layout-github .card-h{background:var(--surface-2);min-height:0;padding:12px 16px}
.layout-github .card-h h3{font-size:14px;font-weight:600}
.layout-github .btn{background:var(--gh-btn);font-weight:500;padding:5px 12px;line-height:20px}
.layout-github .btn:hover{background:var(--surface-2);filter:none}
.layout-github .btn.sm{padding:3px 10px;line-height:18px}
.layout-github .btn.primary{background:var(--gh-green);color:#fff;border-color:rgba(240,246,252,.1)}
.layout-github .btn.primary:hover{background:var(--gh-green-h)}
.layout-github .btn.danger:hover{background:var(--err);color:#fff}
.layout-github .btn.ghost{background:transparent;border-color:transparent}
.layout-github .badge{background:transparent;border:1px solid color-mix(in srgb,var(--c,var(--muted)) 60%,transparent);font-weight:500}
.layout-github .badge::before{display:none}
.layout-github .badge.ok:not(.plain){background:var(--gh-green);color:#fff;border-color:transparent}
.layout-github .chip{border-radius:6px}
.layout-github .chip.active{background:var(--accent);color:#fff}
.layout-github .tbl th{text-transform:none;letter-spacing:0;font-size:12px;background:var(--surface-2)}
.layout-github .stat .val{font-size:26px;font-weight:600}
.layout-github .av{background:var(--surface-2);color:var(--text);box-shadow:0 0 0 1px var(--border)}
.layout-github .statusbar{background:var(--surface-2);color:var(--muted);border-top:1px solid var(--border)}
.layout-github .ftab.active{box-shadow:inset 0 2px 0 var(--gh-tab)}
.layout-github .kb-col{background:var(--surface-2)}
/* Contribution-Heatmap */
.hm-wrap{overflow-x:auto;max-width:880px}
.hm-months{display:grid;grid-template-columns:repeat(12,1fr);font-size:11px;color:var(--muted);min-width:680px;margin-bottom:4px}
.hm-grid{display:grid;grid-template-columns:repeat(53,1fr);grid-template-rows:repeat(7,auto);gap:3px;min-width:680px}
.hm{display:block;aspect-ratio:1;border-radius:2px;background:var(--hm0);outline:1px solid rgba(27,31,35,.06);outline-offset:-1px}
.row .hm{width:11px;height:11px}
.hm.l1{background:var(--hm1)}.hm.l2{background:var(--hm2)}.hm.l3{background:var(--hm3)}.hm.l4{background:var(--hm4)}
/* Galerie-Mini */
.ml-github{flex-direction:column;padding:0;gap:0}
.ml-github .m-nav{width:100%;height:28px;flex:none;flex-direction:row;align-items:flex-end;padding:0 10px;border:0;border-bottom:1px solid var(--border);border-radius:0;background:var(--gh-header)}
.ml-github .m-nav i{width:9%;height:5px;margin-bottom:7px}
.ml-github .m-nav i:nth-child(1){width:14px;height:14px;border-radius:50%;background:var(--text);align-self:center;margin:0 10px 0 0}
.ml-github .m-nav i:nth-child(3){background:var(--text);box-shadow:0 7px 0 -1px var(--gh-tab)}
.ml-github .m-main{padding:9px}
.ml-github .m-row b:first-child{background:var(--surface);border-color:var(--border);box-shadow:inset 0 10px 0 var(--surface-2)}
@media (max-width:900px){.gh-search,.gh-crumb span,.gh-crumb a{display:none}.gh-top,.gh-tabs,.gh-head,.layout-github .content{padding-left:16px;padding-right:16px}}

/* 26 GitHub Dark */
.t-26{--bg:#0d1117;--surface:#0d1117;--surface-2:#151b23;--border:#3d444d;--text:#f0f6fc;--muted:#9198a1;--accent:#4493f8;--accent-2:#ab7df8;--accent-text:#fff;--ok:#3fb950;--warn:#d29922;--err:#f85149;
  --gh-header:#010409;--gh-tab:#f78166;--gh-counter:rgba(101,108,118,.4);--gh-btn:#212830;--gh-green:#238636;--gh-green-h:#29903b;--gh-seg-on:#2a313c;--gh-seg-on-b:#3d444d;
  --hm0:#151b23;--hm1:#033a16;--hm2:#196c2e;--hm3:#2ea043;--hm4:#56d364;
  --radius:6px;--radius-sm:6px;--font:-apple-system,BlinkMacSystemFont,'Segoe UI','Noto Sans',Helvetica,Arial,sans-serif;--font-mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;--pad:16px}
.t-26 .hm{outline-color:rgba(255,255,255,.05)}
/* 27 GitHub Light */
.t-27{--bg:#ffffff;--surface:#ffffff;--surface-2:#f6f8fa;--border:#d1d9e0;--text:#1f2328;--muted:#59636e;--accent:#0969da;--accent-2:#8250df;--accent-text:#fff;--ok:#1a7f37;--warn:#9a6700;--err:#d1242f;
  --gh-header:#f6f8fa;--gh-tab:#fd8c73;--gh-counter:rgba(129,139,152,.2);--gh-btn:#f6f8fa;--gh-green:#1f883d;--gh-green-h:#1c8139;--gh-seg-on:#fff;--gh-seg-on-b:#d1d9e0;
  --hm0:#eff2f5;--hm1:#aceebb;--hm2:#4ac26b;--hm3:#2da44e;--hm4:#116329;
  --radius:6px;--radius-sm:6px;--font:-apple-system,BlinkMacSystemFont,'Segoe UI','Noto Sans',Helvetica,Arial,sans-serif;--font-mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;--pad:16px}
/* 28 GitHub Gold (goldener Darkmode) */
/* GitHub-Dark-Basis (Farben, Schrift, Flächen) – nur der Akzent ist Gold */
.t-28{--bg:#0d1117;--surface:#0d1117;--surface-2:#151b23;--border:#3d444d;--text:#f0f6fc;--muted:#9198a1;--accent:#e3b341;--accent-2:#ab7df8;--accent-text:#0d1117;--ok:#3fb950;--warn:#d29922;--err:#f85149;
  --gh-header:#010409;--gh-tab:#e3b341;--gh-counter:rgba(101,108,118,.4);--gh-btn:#212830;--gh-green:#d4a72c;--gh-green-h:#e3b341;--gh-seg-on:#2a313c;--gh-seg-on-b:#3d444d;
  --hm0:#151b23;--hm1:#4b3a0b;--hm2:#7d6214;--hm3:#bb8f1f;--hm4:#f2cc60;
  --radius:6px;--radius-sm:6px;--font:-apple-system,BlinkMacSystemFont,'Segoe UI','Noto Sans',Helvetica,Arial,sans-serif;--font-mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;--pad:16px}
.t-28 .btn.primary,.t-28 .chip.active,.t-28 .badge.ok:not(.plain){color:#0d1117;font-weight:600}
.t-28 .gh-top .logo{background:#e3b341;color:#0d1117}
.t-28 .chart .ln{stroke:#e3b341}
.t-28 .hm{outline-color:rgba(255,255,255,.05)}
.t-27 .console{background:#1f2328}
.t-27 .code .k{color:#cf222e}.t-27 .code .s{color:#0a3069}.t-27 .code .c{color:#59636e}.t-27 .code .n{color:#0550ae}