:root{--bg:#05050a;--bg2:#0b0c14;--surf:rgba(18,20,32,.92);--surf2:rgba(28,31,48,.97);--bd:rgba(34,211,238,.16);--bd2:rgba(34,211,238,.45);--acc:#22d3ee;--acc2:#e879f9;--txt:#f1f5f9;--dim:#94a3b8;--ok:#34d399;--err:#f87171;--warn:#fbbf24;--r:12px;--mono:'JetBrains Mono',ui-monospace,monospace;--ui:'Outfit',system-ui,sans-serif;--safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px)}
*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--txt);font:14px/1.45 var(--ui);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
button,input,textarea,select{font:inherit;color:inherit}button{cursor:pointer;border:none;background:none}

/* LOGIN – modern, mittig */
#login{position:fixed;inset:0;z-index:100000;background:radial-gradient(ellipse 80% 60% at 50% 40%,#14142a 0%,#05050a 70%);display:flex;align-items:center;justify-content:center;padding:24px;text-align:center}
.login-box{width:min(400px,94vw);background:rgba(18,20,32,.96);border:1px solid rgba(34,211,238,.22);border-radius:20px;padding:36px 28px 32px;box-shadow:0 32px 80px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.03);backdrop-filter:blur(20px)}
.login-logo{font:700 2rem/1 var(--ui);letter-spacing:.12em;background:linear-gradient(120deg,#22d3ee,#a78bfa,#e879f9);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.login-sub{font:500 11px var(--mono);color:var(--dim);letter-spacing:.14em;margin:10px 0 20px;text-transform:uppercase}
.login-warn{font-size:13px;color:var(--dim);margin-bottom:22px;line-height:1.55}
.login-btn{width:100%;justify-content:center;padding:12px;margin-top:10px;font-size:14px;font-weight:500}
.login-or{color:var(--dim);margin:18px 0 12px;font-size:12px}
#login-code{font:13px var(--mono);letter-spacing:.05em;text-align:center;padding:12px;margin-top:0}
#login-err{color:var(--err);margin-top:12px;min-height:1.3em;font-size:13px}
.code-display{font:600 14px/1.7 var(--mono);background:rgba(0,0,0,.5);border:1px solid var(--warn);border-radius:12px;padding:16px 12px;word-break:break-all;color:var(--warn);margin:14px 0;user-select:all;letter-spacing:.03em}

/* DESKTOP */
#desk{position:fixed;inset:0;background:radial-gradient(ellipse 80% 50% at 25% 8%,#12122a 0%,#05050a 55%)}
#pc{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
#app-drawer{display:none}
@media (min-width:769px){
  /* Desktop vertical app rail (resizable) – visible whenever desk is shown */
  #desk #app-drawer,
  body.ws-ready #desk #app-drawer,
  body.ws-ready #app-drawer{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    position:absolute!important;
    top:calc(10px + var(--safe-t))!important;
    left:8px!important;
    right:auto!important;
    bottom:calc(56px + var(--safe-b))!important;
    width:var(--drawer-w, 110px);
    min-width:100px;
    max-width:min(720px, 72vw);
    max-height:none!important;
    height:auto!important;
    z-index:20!important;
    border-radius:16px;
    border:1px solid rgba(148,163,184,.18);
    background:rgba(8,10,22,.55);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    box-shadow:0 8px 32px rgba(0,0,0,.35);
    overflow:visible!important;
    flex-direction:unset!important;
  }
  #desk #app-drawer .drawer-wp,
  #app-drawer .drawer-wp{
    position:absolute;inset:0;width:100%;height:100%;
    z-index:0;pointer-events:none;opacity:.95;
    border-radius:16px;
    display:block!important;
    visibility:visible!important;
  }
  #desk #icons,
  #app-drawer #icons,
  #icons{
    position:absolute;
    inset:0 14px 0 0;
    z-index:1;
    display:grid!important;
    grid-template-columns:repeat(auto-fill, minmax(76px, 1fr));
    gap:8px;
    align-content:start;
    padding:10px 6px 10px 10px;
    overflow:auto;
    scrollbar-width:none;
    -ms-overflow-style:none;
    border-radius:16px 0 0 16px;
  }
  #icons::-webkit-scrollbar{ display:none; width:0; height:0; }
  #desk #drawer-handle,
  #drawer-handle{
    position:absolute;
    top:0; right:-6px;
    width:22px;
    height:100%;
    z-index:20;
    cursor:ew-resize;
    touch-action:none;
    background:transparent;
    display:flex!important;
    align-items:center;
    justify-content:center;
  }
  #drawer-handle::after{
    content:'';
    width:5px;height:56px;border-radius:6px;
    background:linear-gradient(180deg,#22d3ee,#a78bfa);
    box-shadow:0 0 12px rgba(34,211,238,.55);
    pointer-events:none;
  }
  #drawer-handle:hover::after,
  #drawer-handle:focus-visible::after{
    width:6px;
    box-shadow:0 0 16px rgba(34,211,238,.8);
  }
  #app-drawer.resizing{user-select:none}
  #app-drawer.resizing #drawer-handle::after{background:#fff; height:72px}
}
/* mobile: flat icon grid, no drawer chrome */
@media (max-width:768px){
  /* Apps hidden until SW opens the drawer */
  #mobile-drawer-scrim{
    display:none;
    position:fixed;inset:0;
    z-index:10500; /* above apps, below bar */
    background:rgba(0,0,0,.5);
  }
  #mobile-drawer-scrim.on{ display:block; }
  #app-drawer{
    display:none;
    position:fixed;
    left:0;right:0;
    bottom:calc(52px + var(--safe-b));
    top:auto;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:auto;
    max-height:min(72vh, 560px);
    z-index:10550; /* above apps + scrim, below bar */
    border-radius:18px 18px 0 0;
    border:1px solid var(--bd);
    border-bottom:none;
    background:var(--surf2);
    box-shadow:0 -12px 40px rgba(0,0,0,.5);
    /* solid panel – no backdrop-filter on mobile (causes blurry icons) */
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    overflow:hidden;
    padding:0;
    pointer-events:auto;
  }
  #app-drawer.mobile-open{ display:flex; flex-direction:column; }
  #app-drawer .drawer-wp{
    display:none!important;
    pointer-events:none!important;
    visibility:hidden!important;
  }
  #drawer-handle{ display:none!important; }
  #icons{
    position:relative!important;
    inset:auto!important;
    left:auto!important;right:auto!important;top:auto!important;
    display:grid!important;
    grid-template-columns:repeat(auto-fill,minmax(72px,1fr));
    gap:8px;
    padding:14px 12px 16px;
    max-height:min(72vh, 560px);
    overflow:auto;
    z-index:2;
    scrollbar-width:none;
    -ms-overflow-style:none;
    pointer-events:auto;
    filter:none!important;
    opacity:1!important;
    transform:none!important;
  }
  #icons::-webkit-scrollbar{display:none}
  #app-drawer .dico{
    pointer-events:auto;
    filter:none!important;
    opacity:1!important;
    -webkit-tap-highlight-color:rgba(34,211,238,.25);
  }
  #app-drawer .dico .ic{
    filter:none!important;
    backdrop-filter:none!important;
  }
}

.dico{width:84px;padding:10px 4px;display:flex;flex-direction:column;align-items:center;gap:5px;border-radius:11px;cursor:pointer;border:1px solid transparent;user-select:none;transition:.12s}
.dico:hover,.dico:focus-visible{background:rgba(34,211,238,.1);border-color:var(--bd);outline:none;transform:translateY(-1px)}
.dico .ic{width:48px;height:48px;display:grid;place-items:center;font-size:12px;font-weight:600;background:var(--surf);border:1px solid var(--bd);border-radius:13px;color:var(--acc)}
.dico span{font-size:11px;text-align:center;text-shadow:0 1px 2px #000;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

#bar{position:fixed;bottom:0;left:0;right:0;height:calc(48px + var(--safe-b));padding-bottom:var(--safe-b);background:rgba(8,9,16,.95);backdrop-filter:blur(18px);border-top:1px solid var(--bd);display:flex;align-items:center;padding:0 8px;gap:6px;z-index:9000}
.bbtn{height:34px;padding:0 11px;border-radius:8px;color:var(--dim);font-size:12px;display:flex;align-items:center;gap:4px;border:1px solid transparent;transition:.1s}
.bbtn:hover,.bbtn.on{background:var(--surf);border-color:var(--bd);color:var(--acc)}
#start{background:rgba(34,211,238,.14);border-color:var(--bd);color:var(--acc);font-weight:600}
#wins{display:flex;gap:3px;flex:1;overflow-x:auto;scrollbar-width:none}#wins::-webkit-scrollbar{display:none}
#key-badge{display:flex;align-items:center;gap:6px;padding:4px 10px;border-radius:8px;border:1px solid var(--bd);background:rgba(0,0,0,.35);cursor:pointer;max-width:min(280px,40vw);font:11px var(--mono);color:var(--dim);transition:.12s}
#key-badge:hover{border-color:var(--acc);color:var(--acc)}
.key-label{font-weight:600;color:var(--acc);letter-spacing:.06em}
#key-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#clock{font:12px var(--mono);color:var(--dim);padding:0 6px;white-space:nowrap}

.win{position:absolute;min-width:320px;min-height:220px;background:var(--surf2);border:1px solid var(--bd);border-radius:var(--r);box-shadow:0 16px 48px rgba(0,0,0,.55);display:flex;flex-direction:column;overflow:hidden;z-index:100;backdrop-filter:blur(22px)}
.win.foc{border-color:var(--bd2);box-shadow:0 16px 48px rgba(0,0,0,.55),0 0 28px rgba(34,211,238,.1)}
.wtb{height:36px;background:rgba(0,0,0,.35);border-bottom:1px solid var(--bd);display:flex;align-items:center;padding:0 8px 0 12px;cursor:grab;user-select:none;gap:8px;touch-action:none}
.wt{flex:1;font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wc{display:flex;gap:6px;align-items:center}
.wb{
  width:14px;height:14px;border-radius:50%;transition:.1s;
  display:grid;place-items:center;
  font-size:10px;font-weight:700;line-height:1;
  color:rgba(0,0,0,.65);
  padding:0;border:none;cursor:pointer;
  font-family:system-ui,sans-serif;
}
.wb.x{background:#ff5f57}
.wb.m{background:#febc2e}
.wb.a{background:#28c840}
.wb:hover{filter:brightness(1.12);transform:scale(1.08)}

.wbod{flex:1;overflow:auto;background:rgba(5,5,10,.4);-webkit-overflow-scrolling:touch}
.win.max{top:0!important;left:0!important;width:100%!important;height:calc(100% - 48px - var(--safe-b))!important;border-radius:0}
.win.min{display:none!important}
.rh{position:absolute;z-index:20}.rh.se{right:0;bottom:0;width:16px;height:16px;cursor:se-resize}.rh.e{right:0;top:0;bottom:16px;width:5px;cursor:e-resize}.rh.s{bottom:0;left:0;right:16px;height:5px;cursor:s-resize}

.mapp{
  position:fixed;
  top:0;left:0;right:0;
  bottom:calc(52px + var(--safe-b));
  z-index:9000;
  background:var(--bg2);
  display:flex;flex-direction:column;
  transform:translateY(105%);
  transition:transform .25s cubic-bezier(.32,.72,0,1);
  padding-top:var(--safe-t);
  pointer-events:auto;
}
.mapp.show{transform:none}
.mapp.m-minified{display:none!important;pointer-events:none!important;transform:translateY(105%)!important}

.mhd{height:50px;display:flex;align-items:center;padding:0 12px;border-bottom:1px solid var(--bd);background:rgba(0,0,0,.35);gap:10px;flex-shrink:0}
.mhd .back{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:var(--acc);font-size:18px;border:1px solid var(--bd)}
.mhd .mt{flex:1;font-weight:600;font-size:15px}.mbod{flex:1;overflow:auto;-webkit-overflow-scrolling:touch}

.panel{padding:14px}.btn{display:inline-flex;align-items:center;gap:5px;padding:7px 12px;border-radius:8px;border:1px solid var(--bd);background:var(--surf);color:var(--txt);font-size:12px;font-weight:500;transition:.12s}
.btn:hover{border-color:var(--acc);color:var(--acc)}.btn.pri{background:rgba(34,211,238,.18);border-color:var(--acc);color:var(--acc)}.btn.dang{border-color:var(--err);color:var(--err)}.btn:active{transform:scale(.97)}
input,textarea,select{background:rgba(0,0,0,.4);border:1px solid var(--bd);border-radius:8px;color:var(--txt);padding:8px 11px;font:12px var(--mono);outline:none;width:100%}
input:focus,textarea:focus,select:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(34,211,238,.12)}
label{display:block;font-size:11px;color:var(--dim);margin-bottom:4px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:10px}@media(max-width:520px){.g2{grid-template-columns:1fr}}
.card{background:rgba(0,0,0,.3);border:1px solid var(--bd);border-radius:8px;padding:11px}.card .l{font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:.03em}.card .v{font:600 16px/1.2 var(--mono);color:var(--acc);margin-top:2px}

.term{height:100%;background:#07070c;font:12px/1.45 var(--mono);display:flex;flex-direction:column}
.tout{flex:1;overflow:auto;padding:11px;color:#b8d4e8;white-space:pre-wrap;word-break:break-word}.tout .c{color:var(--acc)}.tout .e{color:var(--err)}.tout .o{color:var(--ok)}
.tin{display:flex;align-items:center;padding:8px 11px;border-top:1px solid var(--bd);background:rgba(0,0,0,.35);gap:7px}.tin .p{color:var(--acc)}.tin input{flex:1;background:0;border:0;color:var(--txt);font:12px var(--mono);outline:0;padding:0}

.ed{display:flex;flex-direction:column;height:100%}.ed-toolbar{display:flex;flex-wrap:wrap;gap:6px;padding:8px;background:rgba(0,0,0,.32);border-bottom:1px solid var(--bd);align-items:center}
.ed textarea{flex:1;border:0;border-radius:0;resize:none;font:12px/1.55 var(--mono);padding:12px;background:#0c0c14;tab-size:4}
.ed-status{padding:5px 10px;font-size:11px;color:var(--dim);border-top:1px solid var(--bd);background:rgba(0,0,0,.25);display:flex;gap:12px;flex-wrap:wrap}
.ed-out{height:150px;overflow:auto;background:#050508;border-top:1px solid var(--bd);font:11px/1.4 var(--mono);padding:8px;color:#a5f3fc;white-space:pre-wrap}

.fm{display:flex;flex-direction:column;height:100%}.fm-toolbar{display:flex;flex-wrap:wrap;gap:6px;padding:8px;background:rgba(0,0,0,.3);border-bottom:1px solid var(--bd);align-items:center}
.fm-list{flex:1;overflow:auto;padding:8px}.fi{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--bd);border-radius:8px;margin-bottom:6px;cursor:pointer;background:rgba(0,0,0,.22);transition:.1s}
.fi:hover{border-color:var(--bd2);background:rgba(34,211,238,.06)}.fi .name{flex:1;font-weight:500;word-break:break-all}.fi .meta{font-size:11px;color:var(--dim);white-space:nowrap}
.dropzone{border:2px dashed var(--bd);border-radius:10px;padding:18px;text-align:center;color:var(--dim);margin:8px;transition:.15s}
.dropzone.over{border-color:var(--acc);background:rgba(34,211,238,.07);color:var(--acc)}

.ftp{display:flex;flex-direction:column;height:100%}.ftp-conn{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px;background:rgba(0,0,0,.3);border-bottom:1px solid var(--bd)}
.ftp-conn .full{grid-column:1/-1}.ftp-bar{display:flex;flex-wrap:wrap;gap:6px;padding:8px;border-bottom:1px solid var(--bd);align-items:center}
.ftp-list{flex:1;overflow:auto;padding:8px}.ftp-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:6px;cursor:pointer;border:1px solid transparent}
.ftp-item:hover{background:rgba(34,211,238,.08);border-color:var(--bd)}.ftp-item .ico{width:32px;text-align:center;color:var(--acc);font-size:11px;font-weight:600}.ftp-item.dir .ico{color:var(--warn)}

.calc{padding:14px;display:flex;flex-direction:column;gap:10px;height:100%}.calc-disp{font:600 26px/1.2 var(--mono);text-align:right;padding:14px;background:rgba(0,0,0,.4);border-radius:8px;border:1px solid var(--bd);min-height:56px;word-break:break-all}
.calc-keys{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.calc-keys button{padding:14px;font-size:16px;border-radius:8px;border:1px solid var(--bd);background:var(--surf)}
.calc-keys button:hover{border-color:var(--acc);color:var(--acc)}.calc-keys .op{color:var(--acc)}.calc-keys .eq{background:rgba(34,211,238,.2);border-color:var(--acc);color:var(--acc)}

.md{display:flex;flex-direction:column;height:100%}.md-split{flex:1;display:flex;min-height:0;flex-direction:column}@media(min-width:700px){.md-split{flex-direction:row}}
.md-edit,.md-prev{flex:1;overflow:auto;padding:12px}.md-edit textarea{width:100%;height:100%;border:0;background:#0c0c14;resize:none;font:12px/1.5 var(--mono);padding:10px}
.md-prev{background:rgba(255,255,255,.03);border-left:1px solid var(--bd)}.md-prev h1,.md-prev h2,.md-prev h3{margin:.6em 0 .3em;color:var(--acc)}.md-prev p{margin:.4em 0}.md-prev code{background:rgba(0,0,0,.4);padding:1px 5px;border-radius:4px;font-family:var(--mono)}

.nl,.tl{display:flex;flex-direction:column;gap:6px}.ni,.ti{background:rgba(0,0,0,.25);border:1px solid var(--bd);border-radius:8px;padding:10px;cursor:pointer}.ti.done{opacity:.5;text-decoration:line-through}

.tools{padding:14px;display:flex;flex-direction:column;gap:12px;height:100%;overflow:auto}
.tools textarea{min-height:100px;resize:vertical}

#pal{position:fixed;inset:0;z-index:98000;background:rgba(0,0,0,.55);display:none;align-items:flex-start;justify-content:center;padding-top:10vh;backdrop-filter:blur(5px)}
#pal.on{display:flex}.palb{width:min(460px,94vw);background:var(--surf2);border:1px solid var(--bd2);border-radius:var(--r);box-shadow:0 16px 48px rgba(0,0,0,.55);overflow:hidden}
.palb input{border:0;border-bottom:1px solid var(--bd);border-radius:0;padding:14px 16px;font-size:15px;background:rgba(0,0,0,.25)}.pall{max-height:320px;overflow:auto}
.pali{padding:11px 16px;cursor:pointer;font-size:14px;border-bottom:1px solid rgba(255,255,255,.03)}.pali:hover,.pali.on{background:rgba(34,211,238,.12);color:var(--acc)}

#toasts{position:fixed;top:calc(12px + var(--safe-t));right:12px;z-index:99990;display:flex;flex-direction:column;gap:7px;pointer-events:none}
.toast{padding:10px 14px;border-radius:8px;background:var(--surf2);border:1px solid var(--bd);font-size:13px;animation:ti .22s ease;max-width:min(320px,90vw);pointer-events:auto}
.toast.ok{border-color:var(--ok)}.toast.err{border-color:var(--err)}@keyframes ti{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}

::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-thumb{background:rgba(34,211,238,.22);border-radius:3px}
@media(max-width:768px){.dico{width:76px}.dico .ic{width:42px;height:42px}#bar{height:calc(52px + var(--safe-b))}#key-badge{max-width:120px}.win{display:none!important}}
.dim{color:var(--dim)}.sm{font-size:11px}.mt2{margin-top:8px}.mt3{margin-top:12px}.status-ok{color:var(--ok)}.status-err{color:var(--err)}.status-warn{color:var(--warn)}

/* Files mobile readability */
.fi{flex-wrap:wrap;align-items:flex-start}
.fi .name{white-space:normal;word-break:break-word;line-height:1.35;overflow:visible;text-overflow:unset}
@media(max-width:768px){
  .fi{flex-direction:column;align-items:stretch;gap:8px}
  .fi .name{font-size:13px}
  .fm-toolbar{flex-wrap:wrap}
  .dico span{white-space:normal;line-height:1.2}
}

/* Desktop brand */
#desk-brand{
  position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);
  text-align:center;pointer-events:none;z-index:1;opacity:.55;
  width:min(92vw,640px);
}
.desk-brand-title{
  font-family:var(--font,Outfit,system-ui,sans-serif);
  font-weight:700;letter-spacing:.28em;font-size:clamp(14px,3.2vw,28px);
  text-transform:uppercase;
  background:linear-gradient(120deg,#22d3ee,#a78bfa,#e879f9);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  filter:drop-shadow(0 0 18px rgba(34,211,238,.25));
}
.desk-brand-sub{
  margin-top:8px;font-size:clamp(11px,2vw,14px);letter-spacing:.18em;
  text-transform:lowercase;
  background:linear-gradient(90deg,rgba(34,211,238,.85),rgba(167,139,250,.85));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
@media(max-width:768px){
  #desk-brand{top:28%;opacity:.45}
  .desk-brand-title{letter-spacing:.16em}
}
/* Download popup */
#dl-pop{
  position:fixed;right:16px;bottom:72px;z-index:99999;
  background:rgba(12,16,28,.92);border:1px solid var(--bd,rgba(255,255,255,.12));
  border-radius:14px;padding:14px 18px;min-width:220px;max-width:320px;
  box-shadow:0 12px 40px rgba(0,0,0,.45);backdrop-filter:blur(12px);
  display:none;align-items:center;gap:12px;color:#e2e8f0;font-size:13px;
}
#dl-pop.show{display:flex;animation:dlIn .25s ease}
#dl-pop .spin{
  width:22px;height:22px;border:2px solid rgba(34,211,238,.25);
  border-top-color:var(--acc,#22d3ee);border-radius:50%;animation:spin 0.8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes dlIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* Checkbox rows left-aligned */
.chk-row{display:flex;align-items:flex-start;gap:10px;margin:8px 0;text-align:left;cursor:pointer}
.chk-row input[type=checkbox]{margin-top:3px;flex-shrink:0;width:16px;height:16px}
.chk-row span{word-break:break-word;line-height:1.35;flex:1}
.chk-list{text-align:left}

.login-by{margin-top:4px;font-size:13px;letter-spacing:.12em;color:#6b7280}
.legal-links{margin-top:18px;font-size:12px}
.legal-links a,.bar-legal a{color:#4b5563;text-decoration:none}
.legal-links a:hover,.bar-legal a:hover{color:#9ca3af;text-decoration:underline}
.bar-legal{font-size:11px;white-space:nowrap;padding:0 6px;color:#4b5563}
.desk-brand-ver{margin-top:6px;font-size:11px;letter-spacing:.14em;color:rgba(148,163,184,.7)}
#clock{font-size:12px;line-height:1.25;text-align:right;white-space:pre-line;max-width:120px}
@media(max-width:768px){
  #clock{font-size:10px;max-width:88px}
  .bar-legal{display:none}
}
/* Windows 95 light theme – high contrast */
body.theme-win95{
  --bg:#008080;
  --bg2:#c0c0c0;
  --surf:#ffffff;
  --surf2:#e8e8e8;
  --bd:#808080;
  --bd2:#000080;
  --acc:#000080;
  --acc2:#000080;
  --txt:#000000;
  --dim:#333333;
  --ok:#008000;
  --err:#800000;
  --warn:#808000;
  --muted:#333333;
  --panel:#ffffff;
  --win:#c0c0c0;
  color:#000000;
  background:#008080;
}
body.theme-win95 #desk{
  background:#008080!important;
}
body.theme-win95 #desk-brand{opacity:1}
body.theme-win95 .desk-brand-title{
  background:none!important;-webkit-text-fill-color:#000!important;color:#000!important;
  font-family:Tahoma,"MS Sans Serif",sans-serif;letter-spacing:.08em;font-size:clamp(12px,2.5vw,18px);
  filter:none!important;text-shadow:1px 1px 0 #fff;
}
body.theme-win95 .desk-brand-sub,
body.theme-win95 .desk-brand-ver{
  background:none!important;-webkit-text-fill-color:#000!important;color:#000!important;filter:none!important;
}
body.theme-win95 #bar{
  background:#c0c0c0!important;border-top:2px solid #fff;border-bottom:2px solid #808080;
  color:#000!important;backdrop-filter:none;
}
body.theme-win95 #clock{color:#000!important}
body.theme-win95 .bar-legal,
body.theme-win95 .bar-legal a{color:#333!important}
body.theme-win95 #key-badge{color:#000!important;background:#c0c0c0;border:1px solid #808080}
body.theme-win95 .key-label{color:#000!important}
body.theme-win95 #key-text{color:#000!important}

body.theme-win95 .bbtn,
body.theme-win95 .btn{
  background:#c0c0c0!important;color:#000!important;
  border:2px solid!important;border-color:#fff #808080 #808080 #fff!important;
  border-radius:0!important;font-family:Tahoma,"MS Sans Serif",sans-serif;
}
body.theme-win95 .btn.pri,
body.theme-win95 .bbtn.on,
body.theme-win95 #start{
  background:#000080!important;color:#fff!important;
  border-color:#1084d0 #000 #000 #1084d0!important;
}
body.theme-win95 .btn.dang{
  background:#c0c0c0!important;color:#800000!important;
}

body.theme-win95 .win{
  background:#c0c0c0!important;color:#000!important;
  border:2px solid!important;border-color:#fff #808080 #808080 #fff!important;border-radius:0!important;
  box-shadow:2px 2px 0 #000;
}
body.theme-win95 .wtitle{
  background:#000080!important;color:#fff!important;
  font-family:Tahoma,sans-serif;border-radius:0!important;
}
body.theme-win95 .wtitle *{color:#fff!important}
body.theme-win95 .wbody,
body.theme-win95 .wcontent{
  background:#c0c0c0!important;color:#000!important;
}

/* Content surfaces: always light bg + dark text */
body.theme-win95 .panel,
body.theme-win95 .card,
body.theme-win95 .fm,
body.theme-win95 .fm-list,
body.theme-win95 .dropzone,
body.theme-win95 input,
body.theme-win95 textarea,
body.theme-win95 select,
body.theme-win95 pre,
body.theme-win95 code,
body.theme-win95 table,
body.theme-win95 .ed,
body.theme-win95 .ed-toolbar,
body.theme-win95 .fm-toolbar{
  background:#ffffff!important;
  color:#000000!important;
  border-color:#808080!important;
  border-radius:0!important;
}
body.theme-win95 input::placeholder,
body.theme-win95 textarea::placeholder{color:#555!important;opacity:1}
body.theme-win95 label,
body.theme-win95 .l,
body.theme-win95 .name,
body.theme-win95 .meta,
body.theme-win95 .sm,
body.theme-win95 .dim,
body.theme-win95 p,
body.theme-win95 span,
body.theme-win95 td,
body.theme-win95 th,
body.theme-win95 li{
  color:#000000!important;
}
body.theme-win95 .dim,
body.theme-win95 .sm.dim{color:#333333!important}

body.theme-win95 .fi{
  background:#ffffff!important;color:#000!important;
  border:1px solid #808080!important;
}
body.theme-win95 .fi:hover{background:#e8e8e8!important}

body.theme-win95 .dico{color:#000!important}
body.theme-win95 .dico span{color:#000!important;text-shadow:none}
body.theme-win95 .dico .ic{
  background:#c0c0c0!important;color:#000!important;
  border:2px solid!important;border-color:#fff #808080 #808080 #fff!important;border-radius:0!important;
}

body.theme-win95 .toast{
  background:#ffffe1!important;color:#000!important;
  border:1px solid #000!important;border-radius:0!important;
}
body.theme-win95 .toast.ok{background:#e8ffe8!important}
body.theme-win95 .toast.err{background:#ffe8e8!important}

body.theme-win95 #pal .palb{
  background:#c0c0c0!important;color:#000!important;
  border:2px solid!important;border-color:#fff #808080 #808080 #fff!important;
}
body.theme-win95 .pali{color:#000!important}
body.theme-win95 .pali.on,
body.theme-win95 .pali:hover{background:#000080!important;color:#fff!important}

body.theme-win95 #login{background:#008080!important}
body.theme-win95 .login-box{
  background:#c0c0c0!important;color:#000!important;
  border:2px solid!important;border-color:#fff #808080 #808080 #fff!important;border-radius:0!important;
}
body.theme-win95 .login-logo{
  background:none!important;-webkit-text-fill-color:#000!important;color:#000!important;
  font-family:Tahoma,sans-serif;
}
body.theme-win95 .login-sub,
body.theme-win95 .login-warn,
body.theme-win95 .login-or,
body.theme-win95 .login-by{color:#222!important}
body.theme-win95 .legal-links a{color:#333!important}

/* Inline dark styles from apps */
body.theme-win95 [style*="background:rgba(0,0,0"],
body.theme-win95 [style*="background: rgba(0,0,0"],
body.theme-win95 [style*="background:#0"],
body.theme-win95 [style*="background: #0"],
body.theme-win95 [style*="background:#1"],
body.theme-win95 [style*="background:#11"]{
  background:#ffffff!important;
  color:#000000!important;
}
body.theme-win95 [style*="color:var(--dim)"],
body.theme-win95 [style*="color: var(--dim)"],
body.theme-win95 [style*="color:#94"],
body.theme-win95 [style*="color:#e2"],
body.theme-win95 [style*="color:#f1"]{
  color:#000000!important;
}

body.theme-win95 canvas{
  background:#008080!important;
}

#btn-logout{margin-left:4px;font-weight:600}
body.theme-win95 #btn-logout{color:#000!important}


/* Writer editor surface */
.w-editor{
  background:rgba(0,0,0,.25);
  color:var(--tx,#e2e8f0);
  border:1px solid var(--bd);
  border-radius:8px;
}
body.theme-win95 .w-editor{
  background:#ffffff!important;
  color:#000000!important;
  border:1px solid #808080!important;
}
body.theme-win95 .ed-toolbar{
  background:#c0c0c0!important;
  color:#000!important;
}
body.theme-win95 #w-color{
  /* default color for new text in light theme */
}

/* Writer: active format buttons */
.w-toolbar-bottom .btn.w-on,
.ed-toolbar .btn.w-on{
  background:#facc15!important;
  color:#111!important;
  border-color:#ca8a04!important;
}
body.theme-win95 .w-toolbar-bottom .btn.w-on,
body.theme-win95 .ed-toolbar .btn.w-on{
  background:#ffff00!important;
  color:#000!important;
  border:2px solid #000080!important;
}


/* Taskbar – highest interactive chrome */
#bar{
  position:fixed!important;
  bottom:0!important;
  left:0!important;
  right:0!important;
  z-index:11000!important;
  display:flex!important;
  pointer-events:auto!important;
}
#bar *{ pointer-events:auto!important; }

/* When desk is hidden (login), bar stays display:none via inline style - override only when shown */
#bar[style*="display: none"],
#bar[style*="display:none"]{
  display:none!important;
}
.mapp{
  top:0!important;
  bottom:calc(52px + var(--safe-b))!important;
  height:auto!important;
  z-index:9000!important; /* BELOW taskbar 10080 and drawer 10070 */
  pointer-events:auto;
}

.mapp .mbod{
  padding-bottom:8px;
}
@media(max-width:768px){
  #bar{
    height:calc(52px + var(--safe-b))!important;
    min-height:calc(52px + var(--safe-b));
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
  }
  #desk{padding-bottom:calc(56px + var(--safe-b));}
}

/* Desktop logos: exclusively one per theme */
.desk-brand-logo{
  display:none!important;
  max-width:min(420px,78vw);
  max-height:28vh;
  width:auto;
  height:auto;
  object-fit:contain;
  margin:0 auto 8px;
  pointer-events:none;
  user-select:none;
}
/* Dark theme only */
body:not(.theme-win95) .desk-brand-logo-dark{display:block!important}
/* Win95 theme only */
body.theme-win95 .desk-brand-logo-win95{display:block!important}
body.theme-win95 .desk-brand-logo-dark{display:none!important}
body:not(.theme-win95) .desk-brand-logo-win95{display:none!important}
.desk-brand-title{display:none!important}

/* Desktop icon drag reorder */
.dico.dragging { opacity: 0.45; }
.dico.drag-over { outline: 2px dashed var(--accent, #22d3ee); outline-offset: 2px; }
.dico[draggable="true"] { cursor: grab; }
.dico[draggable="true"]:active { cursor: grabbing; }

body.theme-win95 #app-drawer{
  background:#c0c0c0;
  border:2px solid;
  border-color:#fff #808080 #808080 #fff;
  border-radius:0;
  backdrop-filter:none;
  box-shadow:2px 2px 0 #000;
}
body.theme-win95 #drawer-handle{
  background:#c0c0c0;
  border-left:2px solid #808080;
}
body.theme-win95 #drawer-handle::after{
  background:#000;
  box-shadow:none;
  width:2px;height:28px;
}
body.theme-win95 #icons{background:transparent}


/* ========== THEME: Vista Aero ========== */
body.theme-vista{
  --bg:#1a3a5c;--bg2:#2a5a8c;--surf:rgba(180,210,240,.35);--surf2:rgba(200,220,245,.55);
  --bd:rgba(255,255,255,.35);--bd2:rgba(120,180,255,.55);--acc:#4db8ff;--acc2:#8fd3ff;
  --txt:#0a1a2a;--dim:#3a5a7a;--ok:#2d8a4e;--err:#c0392b;--warn:#d4a017;--r:10px;
}
body.theme-vista #desk{
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(120,190,255,.45) 0%, transparent 55%),
    linear-gradient(160deg, #5ba3d9 0%, #2a6aaa 40%, #1a4060 100%) !important;
}
body.theme-vista #bar{
  background:linear-gradient(180deg, rgba(200,220,255,.55), rgba(140,180,230,.4));
  border-top:1px solid rgba(255,255,255,.4);
  backdrop-filter:blur(16px);
}
body.theme-vista .win{
  background:linear-gradient(180deg, rgba(230,240,255,.72), rgba(180,210,240,.55));
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 12px 40px rgba(0,40,80,.25), inset 0 1px 0 rgba(255,255,255,.6);
  backdrop-filter:blur(18px);
  color:#0a1a2a;
}
body.theme-vista .wtb{
  background:linear-gradient(180deg, #4a9ad4, #2a6aaa);
  color:#fff;border-bottom:1px solid rgba(0,0,0,.15);
}
body.theme-vista .wbod{background:rgba(255,255,255,.25)}
body.theme-vista .dico .ic{background:rgba(255,255,255,.4);border-color:rgba(255,255,255,.5);color:#1a5a9a}
body.theme-vista .dico span{text-shadow:0 1px 2px rgba(255,255,255,.5);color:#0094ff}
body.theme-vista .btn{background:rgba(255,255,255,.35);border-color:rgba(100,160,220,.5);color:#0a2a4a}
body.theme-vista .btn.pri{background:rgba(77,184,255,.35);border-color:#4db8ff;color:#0a3a60}
body.theme-vista input,body.theme-vista textarea,body.theme-vista select{
  background:rgba(255,255,255,.55);border-color:rgba(100,160,220,.45);color:#0a1a2a;
}
body.theme-vista #app-drawer{
  background:rgba(180,210,240,.4);border-color:rgba(255,255,255,.4);
}

/* ========== THEME: Steampunk / Fallout ========== */
body.theme-steampunk{
  --bg:#1a120a;--bg2:#2a1c10;--surf:rgba(60,40,24,.92);--surf2:rgba(72,48,28,.96);
  --bd:rgba(180,120,40,.35);--bd2:rgba(212,160,60,.55);--acc:#d4a03c;--acc2:#c45c2a;
  --txt:#e8d5b0;--dim:#a08060;--ok:#6a8a3a;--err:#b33a2a;--warn:#e0a030;--r:6px;
}
body.theme-steampunk #desk{
  background:
    radial-gradient(ellipse 70% 50% at 30% 20%, rgba(180,80,20,.2) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 80% 70%, rgba(100,60,20,.25) 0%, transparent 45%),
    linear-gradient(180deg, #2a1a0c 0%, #1a1008 50%, #0e0a06 100%) !important;
}
body.theme-steampunk #bar{
  background:linear-gradient(180deg, #3a2818, #241810);
  border-top:2px solid #8a6030;
}
body.theme-steampunk .win{
  background:linear-gradient(160deg, #4a3220, #2e2014);
  border:2px solid #8a6030;
  box-shadow:4px 4px 0 #1a1008, inset 0 0 30px rgba(0,0,0,.35);
  border-radius:4px;
}
body.theme-steampunk .wtb{
  background:linear-gradient(180deg, #6a4828, #4a3018);
  color:#f0d090;border-bottom:1px solid #2a1808;
  font-family:Georgia,serif;
}
body.theme-steampunk .wbod{background:rgba(20,12,6,.5)}
body.theme-steampunk .dico .ic{
  background:linear-gradient(145deg,#5a3a20,#3a2410);
  border:2px solid #a07030;color:#e0b050;border-radius:6px;
}
body.theme-steampunk .btn{
  background:linear-gradient(180deg,#5a3c22,#3a2814);
  border:1px solid #a07030;color:#e8c878;border-radius:4px;
}
body.theme-steampunk .btn.pri{background:linear-gradient(180deg,#8a6020,#6a4010);border-color:#d4a03c;color:#ffe8a0}
body.theme-steampunk input,body.theme-steampunk textarea,body.theme-steampunk select{
  background:#1e140c;border-color:#6a4828;color:#e8d5b0;
}
body.theme-steampunk #app-drawer{
  background:rgba(40,28,16,.85);border:2px solid #8a6030;border-radius:4px;
}

/* ========== THEME: Pastell ========== */
body.theme-pastel{
  --bg:#f5e6f0;--bg2:#e8f0fa;--surf:rgba(255,255,255,.75);--surf2:rgba(255,250,255,.9);
  --bd:rgba(200,160,200,.4);--bd2:rgba(180,140,220,.55);--acc:#d472b0;--acc2:#8b9cf0;
  --txt:#4a3a5a;--dim:#8a7a9a;--ok:#6aba8a;--err:#e07070;--warn:#e0b050;--r:16px;
}
body.theme-pastel #desk{
  background:
    radial-gradient(ellipse 60% 50% at 20% 30%, rgba(255,180,220,.5) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 80% 20%, rgba(180,200,255,.45) 0%, transparent 45%),
    radial-gradient(ellipse 40% 35% at 60% 80%, rgba(180,255,220,.35) 0%, transparent 40%),
    linear-gradient(160deg, #ffe8f4 0%, #e8f0ff 50%, #e8fff4 100%) !important;
}
body.theme-pastel #bar{
  background:rgba(255,255,255,.65);
  border-top:1px solid rgba(200,160,200,.35);
  backdrop-filter:blur(12px);
  color:#4a3a5a;
}
body.theme-pastel .win{
  background:rgba(255,255,255,.78);
  border:1px solid rgba(220,180,220,.45);
  box-shadow:0 12px 36px rgba(160,120,180,.18);
  backdrop-filter:blur(14px);
  color:#4a3a5a;
}
body.theme-pastel .wtb{
  background:linear-gradient(90deg, rgba(255,180,220,.5), rgba(180,200,255,.45));
  color:#4a3a5a;border-bottom:1px solid rgba(200,160,200,.3);
}
body.theme-pastel .wbod{background:rgba(255,250,255,.4)}
body.theme-pastel .dico .ic{
  background:rgba(255,255,255,.8);border-color:rgba(200,160,220,.4);color:#d472b0;
}
body.theme-pastel .dico span{text-shadow:none;color:#cfcbd3}
body.theme-pastel .btn{
  background:rgba(255,255,255,.7);border-color:rgba(200,160,200,.45);color:#6a4a7a;
}
body.theme-pastel .btn.pri{background:rgba(212,114,176,.2);border-color:#d472b0;color:#a04080}
body.theme-pastel input,body.theme-pastel textarea,body.theme-pastel select{
  background:rgba(255,255,255,.85);border-color:rgba(200,160,200,.4);color:#000000;
}
body.theme-pastel #app-drawer{
  background:rgba(255,255,255,.55);border-color:rgba(200,160,220,.35);
}

/* ========== THEME: Bunt / Colorful ========== */
body.theme-colorful{
  --bg:#1a0a2e;--bg2:#2d1b4e;--surf:rgba(40,20,70,.88);--surf2:rgba(55,30,90,.94);
  --bd:rgba(255,100,180,.3);--bd2:rgba(100,220,255,.45);--acc:#ff6bcb;--acc2:#5ce1ff;
  --txt:#fff5fb;--dim:#c9a0d8;--ok:#7dffa0;--err:#ff6b6b;--warn:#ffe66d;--r:14px;
}
body.theme-colorful #desk{
  background:
    radial-gradient(ellipse 55% 45% at 10% 20%, rgba(255,80,160,.35) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 90% 15%, rgba(80,180,255,.32) 0%, transparent 50%),
    radial-gradient(ellipse 45% 40% at 70% 85%, rgba(180,80,255,.28) 0%, transparent 50%),
    radial-gradient(ellipse 40% 35% at 20% 80%, rgba(255,200,60,.18) 0%, transparent 45%),
    linear-gradient(155deg, #1a0a2e 0%, #2a1050 40%, #12082a 100%) !important;
}
body.theme-colorful #bar{
  background:linear-gradient(90deg, rgba(255,80,160,.25), rgba(80,180,255,.22), rgba(180,80,255,.25));
  border-top:1px solid rgba(255,255,255,.15);
  backdrop-filter:blur(14px);
}
body.theme-colorful .win{
  background:linear-gradient(145deg, rgba(60,25,90,.9), rgba(30,15,60,.92));
  border:1px solid rgba(255,120,200,.35);
  box-shadow:0 16px 48px rgba(0,0,0,.4), 0 0 30px rgba(255,80,160,.08);
  backdrop-filter:blur(16px);
}
body.theme-colorful .wtb{
  background:linear-gradient(90deg, #ff4d9a, #7b5cff, #3ecbff);
  color:#fff;border-bottom:none;
  text-shadow:0 1px 2px rgba(0,0,0,.25);
}
body.theme-colorful .wbod{background:rgba(15,5,30,.4)}
body.theme-colorful .dico .ic{
  background:linear-gradient(145deg, rgba(255,100,180,.25), rgba(80,180,255,.2));
  border:1px solid rgba(255,150,220,.4);color:#ff9ad5;
  box-shadow:0 0 14px rgba(255,80,160,.15);
}
body.theme-colorful .dico span{color:#ffe8f6}
body.theme-colorful .btn{
  background:rgba(80,40,120,.55);border-color:rgba(255,120,200,.35);color:#ffe0f0;
}
body.theme-colorful .btn.pri{
  background:linear-gradient(90deg, rgba(255,80,160,.35), rgba(80,180,255,.3));
  border-color:#ff6bcb;color:#fff;
}
body.theme-colorful input,body.theme-colorful textarea,body.theme-colorful select{
  background:rgba(30,12,55,.75);border-color:rgba(255,120,200,.3);color:#fff5fb;
}
body.theme-colorful #app-drawer{
  background:rgba(40,15,70,.9);border-color:rgba(255,120,200,.3);
  box-shadow:0 0 28px rgba(255,80,160,.1);
}
body.theme-colorful #pc{opacity:0.55;filter:hue-rotate(40deg) saturate(1.3)}

/* ========== THEME: Aurora (creative surprise) ========== */
body.theme-aurora{
  --bg:#060818;--bg2:#0c1230;--surf:rgba(12,20,48,.85);--surf2:rgba(18,28,60,.92);
  --bd:rgba(80,255,180,.22);--bd2:rgba(120,200,255,.4);--acc:#5dffc2;--acc2:#7b9fff;
  --txt:#e8f4ff;--dim:#8aa0c0;--ok:#5dffc2;--err:#ff6b9d;--warn:#ffd06b;--r:14px;
}
body.theme-aurora #desk{
  background:
    radial-gradient(ellipse 50% 40% at 15% 80%, rgba(80,255,180,.18) 0%, transparent 55%),
    radial-gradient(ellipse 45% 35% at 85% 30%, rgba(120,100,255,.2) 0%, transparent 50%),
    radial-gradient(ellipse 40% 30% at 50% 10%, rgba(255,100,180,.12) 0%, transparent 45%),
    linear-gradient(165deg, #060818 0%, #0a1430 45%, #081020 100%) !important;
}
body.theme-aurora #bar{
  background:rgba(8,16,40,.75);
  border-top:1px solid rgba(80,255,180,.2);
  backdrop-filter:blur(16px);
  box-shadow:0 -2px 20px rgba(80,255,180,.06);
}
body.theme-aurora .win{
  background:linear-gradient(145deg, rgba(16,28,64,.88), rgba(10,18,42,.92));
  border:1px solid rgba(80,255,180,.25);
  box-shadow:0 16px 48px rgba(0,0,0,.45), 0 0 40px rgba(80,255,180,.06);
  backdrop-filter:blur(20px);
}
body.theme-aurora .wtb{
  background:linear-gradient(90deg, rgba(80,255,180,.12), rgba(120,100,255,.12));
  border-bottom:1px solid rgba(80,255,180,.15);
  color:#e8f4ff;
}
body.theme-aurora .wbod{background:rgba(4,8,24,.35)}
body.theme-aurora .dico .ic{
  background:rgba(12,24,56,.8);
  border:1px solid rgba(80,255,180,.3);
  color:#5dffc2;
  box-shadow:0 0 12px rgba(80,255,180,.1);
}
body.theme-aurora .btn{
  background:rgba(12,24,56,.7);border-color:rgba(80,255,180,.25);color:#c8e8ff;
}
body.theme-aurora .btn.pri{
  background:rgba(80,255,180,.12);border-color:#5dffc2;color:#5dffc2;
  box-shadow:0 0 12px rgba(80,255,180,.12);
}
body.theme-aurora input,body.theme-aurora textarea,body.theme-aurora select{
  background:rgba(6,12,32,.7);border-color:rgba(80,255,180,.2);color:#e8f4ff;
}
body.theme-aurora #app-drawer{
  background:rgba(8,16,40,.7);border-color:rgba(80,255,180,.22);
  box-shadow:0 0 30px rgba(80,255,180,.06);
}

/* Particle canvas: hide on light themes that look better without cyan dots */
body.theme-pastel #pc,
body.theme-vista #pc{opacity:0.25}
body.theme-steampunk #pc{opacity:0.4;filter:sepia(.6) hue-rotate(-15deg)}

/* Account badge – bottom right, not in taskbar, not clickable */
#account-badge{
  position:fixed;
  left:50%;
  right:auto;
  transform:translateX(-50%);
  bottom:calc(52px + var(--safe-b) + 8px);
  z-index:1; /* only above background / particles, under apps & drawer */
  display:flex;
  align-items:center;
  gap:4px;
  padding:4px 8px;
  border-radius:6px;
  border:1px solid var(--bd);
  background:rgba(0,0,0,.4);
  font:10px var(--mono);
  color:var(--dim);
  pointer-events:none;
  user-select:none;
  max-width:min(200px,70vw);
}
#account-badge #key-text{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--dim);
}
#account-badge .key-label{font-weight:600;color:var(--acc);letter-spacing:.06em;font-size:9px}
@media(min-width:769px){
  #account-badge{ bottom:calc(48px + var(--safe-b) + 10px); }
}

#clock{cursor:pointer}
#clock:hover{color:var(--acc)}

/* iOS-like traffic lights on mobile apps */
.m-traffic{display:flex;gap:8px;align-items:center;padding-left:4px;flex-shrink:0}
.m-tl{
  width:16px;height:16px;border-radius:50%;
  border:1px solid rgba(0,0,0,.15);
  padding:0;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
  display:grid;place-items:center;
  font-size:11px;font-weight:700;line-height:1;
  color:rgba(0,0,0,.65);
  font-family:system-ui,sans-serif;
}
.m-tl.m-close{background:#ff5f57}
.m-tl.m-min{background:#febc2e}
.m-tl:active{filter:brightness(.9)}
.mapp .mhd{
  display:flex;align-items:center;gap:8px;
}
.mapp .mhd .mt{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mapp .mhd .back{
  width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  color:var(--acc);font-size:18px;border:1px solid var(--bd);flex-shrink:0;
}
.mapp.m-minified{display:none!important;pointer-events:none}

@media(max-width:768px){
  #wins .bbtn{max-width:52px;overflow:hidden;text-overflow:ellipsis;font-size:11px;padding:0 6px}
  #account-badge{font-size:9px;padding:3px 7px;bottom:calc(56px + var(--safe-b) + 6px);left:50%;right:auto;transform:translateX(-50%)}
}

/* Desktop guarantee – vertical rail always on PC */
@media (min-width:769px){
  #desk #app-drawer,
  body.ws-ready #app-drawer,
  body.ws-ready #app-drawer.mobile-open{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    position:absolute!important;
    left:8px!important;
    right:auto!important;
    top:calc(10px + var(--safe-t))!important;
    bottom:calc(56px + var(--safe-b))!important;
    width:var(--drawer-w,110px);
    max-height:none!important;
    z-index:20!important;
    flex-direction:unset!important;
  }
  #desk #drawer-handle,
  body.ws-ready #drawer-handle{display:flex!important}
  #desk #icons,
  body.ws-ready #icons{display:grid!important}
  #mobile-drawer-scrim{display:none!important}
}

/* Mobile stacking: drawer above apps when open */
@media (max-width:768px){
  .mapp,.mapp.show{z-index:9000!important}
  #app-drawer:not(.mobile-open){display:none!important}
  #mobile-drawer-scrim.on{display:block!important;z-index:99980!important}
  #app-drawer.mobile-open{
    display:flex!important;flex-direction:column!important;
    position:fixed!important;left:0!important;right:0!important;
    bottom:calc(52px + var(--safe-b))!important;top:auto!important;
    width:100%!important;max-height:min(72vh,560px)!important;
    z-index:99990!important;pointer-events:auto!important
  }
  #bar{z-index:99999!important}
}

/* ========== Mitarbeiter-Chat Dock ========== */
.chat-dock {
  position: fixed;
  right: 12px;
  bottom: 88px;
  /* MUST stay below #bar (11000+) and mobile drawer (99990) so SW stays clickable */
  z-index: 8000;
  font-size: 13px;
  pointer-events: none;
  max-width: min(96vw, 640px);
}
.chat-dock > * { pointer-events: auto; }
.chat-dock-tab {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--bd, rgba(148,163,184,.35));
  background: var(--surf2, #1e293b);
  color: var(--tx, #e2e8f0);
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0,0,0,.35);
  font-weight: 600;
}
.chat-dock.collapsed .chat-dock-tab { display: inline-flex; }
.chat-lamp {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #64748b;
  box-shadow: 0 0 0 2px rgba(100,116,139,.35);
  flex-shrink: 0;
}
.chat-lamp.blink {
  background: #22c55e;
  box-shadow: 0 0 0 2px rgba(34,197,94,.35), 0 0 12px rgba(34,197,94,.85);
  animation: chatLampPulse 1s ease-in-out infinite;
}
@keyframes chatLampPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(1.15); }
}
.chat-panel {
  display: none;
  flex-direction: column;
  width: var(--chat-w, 360px);
  height: var(--chat-h, 420px);
  min-width: 280px;
  min-height: 240px;
  max-width: min(96vw, 640px);
  max-height: min(78vh, 720px);
  background: var(--surf, #0f172a);
  border: 1px solid var(--bd, rgba(148,163,184,.35));
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
  overflow: hidden;
  position: relative;
}
.chat-dock:not(.collapsed) .chat-panel { display: flex; }
.chat-resize {
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  cursor: nwse-resize;
  z-index: 3;
  background: linear-gradient(135deg, var(--acc, #22d3ee) 0 2px, transparent 2px),
              linear-gradient(135deg, transparent 8px, var(--acc, #22d3ee) 8px 10px, transparent 10px);
  opacity: 0.85;
}
.chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--bd, rgba(148,163,184,.3));
  background: var(--surf2, #1e293b);
  gap: 8px;
}
.chat-head strong { font-size: 13px; letter-spacing: 0.02em; }
.chat-icon-btn { padding: 2px 10px; min-width: 0; }
.chat-body {
  flex: 1;
  overflow: auto;
  padding: 10px 12px;
  background: rgba(0,0,0,.15);
}
.chat-msgs { display: flex; flex-direction: column; gap: 8px; }
.chat-empty { text-align: center; padding: 24px 8px; }
.chat-foot {
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  border-top: 1px solid var(--bd, rgba(148,163,184,.3));
  background: var(--surf2, #1e293b);
}
.chat-foot input { flex: 1; min-width: 0; }

/* Taskbar green dot (mobile / when covered) */
.chat-bar-dot {
  display: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  margin-left: 4px;
  flex-shrink: 0;
  align-self: center;
}
.chat-bar-dot.blink {
  display: inline-block;
  animation: chatLampPulse 1s ease-in-out infinite;
  box-shadow: 0 0 8px rgba(34,197,94,.9);
}
#bar .chat-bar-dot.blink { display: inline-block; }

/* Mobile: dock above taskbar, full width option when open */
@media (max-width: 768px) {
  .chat-dock {
    right: 8px;
    left: 8px;
    bottom: calc(56px + var(--safe-b) + 8px);
    z-index: 8000 !important;
    max-height: calc(100vh - 56px - var(--safe-b) - 16px);
  }
  .chat-dock:not(.collapsed) .chat-panel {
    width: 100% !important;
    max-width: 100%;
    height: min(var(--chat-h, 45vh), calc(100vh - 72px - var(--safe-b)));
    max-height: calc(100vh - 72px - var(--safe-b));
    min-height: 180px;
  }
  .chat-dock.collapsed {
    left: auto;
    right: 10px;
    max-height: none;
  }
  .chat-resize { display: none; }
  /* Taskbar always above chat + drawer */
  #bar {
    z-index: 100000 !important;
  }
  #start {
    position: relative;
    z-index: 100001 !important;
    pointer-events: auto !important;
  }
}

body.theme-win95 .chat-panel {
  border-radius: 0;
  border: 2px solid #000;
  box-shadow: 2px 2px 0 #000;
}
body.theme-win95 .chat-dock-tab {
  border-radius: 0;
  border: 2px solid #000;
}

/* Chat only meaningful on desktop shell – hide over login via JS body class */
body.login-screen .chat-dock,
body.login-screen .chat-bar-dot { display: none !important; }


/* Chat partner dropup */
.chat-partner {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px 0;
  border-top: 1px solid var(--bd, rgba(148,163,184,.3));
  background: var(--surf2, #1e293b);
}
.chat-dropup {
  position: relative;
  width: 100%;
}
.chat-dropup-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  text-align: left;
  font-weight: 600;
}
.chat-dropup-caret {
  opacity: 0.7;
  font-size: 11px;
}
.chat-dropup-menu {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 4px);
  max-height: 180px;
  overflow: auto;
  background: var(--surf, #0f172a);
  border: 1px solid var(--bd, rgba(148,163,184,.4));
  border-radius: 8px;
  box-shadow: 0 -8px 24px rgba(0,0,0,.4);
  z-index: 5;
  padding: 4px;
}
.chat-dropup-menu[hidden] { display: none !important; }
.chat-dropup-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--tx, #e2e8f0);
  cursor: pointer;
  font-size: 13px;
}
.chat-dropup-item:hover,
.chat-dropup-item:focus {
  background: rgba(34, 211, 238, 0.12);
  outline: none;
}
.chat-dropup-empty { padding: 8px 10px; }
#chat-partner-custom {
  width: 100%;
  box-sizing: border-box;
}
.chat-foot {
  border-top: none;
}

.chat-bubble {
  max-width: 88%;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.35;
  word-break: break-word;
}
.chat-bubble.me {
  align-self: flex-end;
  background: rgba(34, 211, 238, 0.18);
  border: 1px solid rgba(34, 211, 238, 0.35);
}
.chat-bubble.them {
  align-self: flex-start;
  background: var(--surf2, #1e293b);
  border: 1px solid var(--bd, rgba(148,163,184,.35));
}
.chat-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
  font-size: 10px;
  opacity: 0.75;
}
.chat-tick { font-size: 12px; font-weight: 700; }
.chat-tick.sent { color: #94a3b8; }
.chat-tick.delivered { color: #3b82f6; }
.chat-tick.error { color: #ef4444; }

.chat-add-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.chat-add-row input { flex: 1; min-width: 100px; }
.chat-partner-active {
  padding: 6px 2px 0;
  line-height: 1.25;
}
.chat-partner-id {
  font-size: 12px;
  font-weight: 600;
  word-break: break-all;
}
.chat-partner-nick {
  font-size: 11px;
  color: #22c55e;
  font-weight: 600;
}
.chat-dropup-item-row {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
}
.chat-dropup-item-row .chat-dropup-item { flex: 1; }
.chat-dropup-item .chat-item-id { display: block; font-weight: 600; }
.chat-dropup-item .chat-item-nick {
  display: block;
  font-size: 11px;
  color: #22c55e;
  font-weight: 600;
  margin-top: 2px;
}
.chat-dropup-del {
  border: none;
  background: transparent;
  color: #ef4444;
  cursor: pointer;
  padding: 6px 8px;
  font-size: 14px;
  line-height: 1;
}

.chat-head-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}
.chat-me {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  max-width: 55%;
  font-size: 11px;
  font-weight: 500;
  color: var(--dim, #94a3b8);
  opacity: 0.95;
}
.chat-me-hint {
  flex-shrink: 0;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(148,163,184,.15);
  color: var(--dim, #94a3b8);
}
.chat-me-id {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: var(--tx, #e2e8f0);
}
.chat-partner-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.chat-nick-edit {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--dim, #94a3b8);
  cursor: pointer;
  padding: 2px 6px;
  font-size: 14px;
  line-height: 1;
  border-radius: 4px;
  opacity: 0.75;
}
.chat-nick-edit:hover {
  opacity: 1;
  color: #22c55e;
  background: rgba(34,197,94,.12);
}


/* Login screen: hide workspace-only chrome */
body:not(.ws-ready) #account-badge,
body:not(.ws-ready) #chat-dock,
body:not(.ws-ready) #bar,
body:not(.ws-ready) #desk,
body:not(.ws-ready) #mobile-drawer-scrim {
  display: none !important;
}
body:not(.ws-ready) #login {
  display: flex !important;
}