:root{
  --xp-blue:#0a246a; --luna1:#0058e6; --luna2:#3a93ff; --face:#ece9d8; --border:#0054e3;
  --btn-border:#003c74;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;font:11px Tahoma,"Segoe UI",Verdana,sans-serif;color:#000;user-select:none}
button,input,select,textarea{font:inherit}

/* ---------- Desktop ---------- */
#desktop{
  position:fixed;inset:0 0 30px 0;
  background:
    radial-gradient(ellipse 120% 60% at 30% 118%,#4f9d2a 0 55%,transparent 56%),
    radial-gradient(ellipse 100% 50% at 85% 125%,#3e8a1f 0 55%,transparent 56%),
    linear-gradient(#2a6fd6 0%,#5b9cf0 45%,#a9d0ff 72%,#d8ecff 80%);
}
#icons{position:absolute;left:6px;top:6px;bottom:6px;display:flex;flex-direction:column;flex-wrap:wrap;align-content:flex-start;gap:6px;pointer-events:none}
.dicon{pointer-events:auto;width:76px;text-align:center;color:#fff;text-shadow:1px 1px 2px #000;padding:4px;cursor:default}
.dicon .ico{font-size:32px;line-height:38px;filter:drop-shadow(1px 1px 2px rgba(0,0,0,.5))}
.dicon span{display:block;margin-top:2px}
.dicon.sel span{background:#316ac5;outline:1px dotted #fff}
.dicon.sel .ico{opacity:.7}

/* ---------- Windows ---------- */
.window{
  position:absolute;display:flex;flex-direction:column;background:var(--face);
  border:3px solid var(--border);border-top:none;border-radius:8px 8px 0 0;
  box-shadow:2px 3px 10px rgba(0,0,0,.5);min-width:240px;min-height:120px;
}
.window.inactive{border-color:#7a96df}
.window.max{left:0!important;top:0!important;width:100%!important;height:100%!important;border-radius:0}
.window.hidden{display:none}
.titlebar{
  display:flex;align-items:center;gap:5px;height:28px;padding:0 3px 0 6px;color:#fff;font-weight:bold;font-size:13px;
  text-shadow:1px 1px #0a246a;cursor:default;flex:none;
  background:linear-gradient(#0997ff 0%,#0053ee 8%,#0050ee 40%,#06f 88%,#06f 93%,#005bff 95%,#003dd7 96%,#003dd7 100%);
  border-radius:8px 8px 0 0;margin:0 -3px;padding-left:9px;
}
.window.inactive .titlebar{background:linear-gradient(#7697e7 0%,#7e9ee3 8%,#7a96df 40%,#7a96df 88%,#7a96df 100%);text-shadow:none}
.titlebar .ttitle{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbtns{display:flex;gap:2px}
.tb{
  width:21px;height:21px;padding:0;border:1px solid #fff;border-radius:3px;color:#fff;font:bold 11px Tahoma;cursor:pointer;
  background:radial-gradient(circle at 30% 30%,#7da5f9,#2a5fe0 70%);
}
.tb:hover{filter:brightness(1.15)}
.tb.close{background:radial-gradient(circle at 30% 30%,#f5a58e,#d9421a 70%)}
.wbody{flex:1;min-height:0;display:flex;flex-direction:column;padding:8px;overflow:auto}
.window.resizable{resize:both;overflow:hidden}

/* ---------- Controls ---------- */
.btn{
  min-width:75px;padding:3px 10px;border:1px solid var(--btn-border);border-radius:3px;cursor:pointer;color:#000;
  background:linear-gradient(#fff,#ece9d8 85%,#d6d0c0);
}
.btn:hover{box-shadow:inset 0 0 0 2px #f8b330}
.btn:active{background:linear-gradient(#cdcaba,#e5e1d1)}
.btn.default{box-shadow:inset 0 0 0 1px #8cb0f5,inset 0 0 0 2px #8cb0f5}
.btn:disabled{color:#999;border-color:#aaa;box-shadow:none;cursor:default}
input[type=text],input[type=password],input[type=number],select,textarea{
  border:1px solid #7f9db9;background:#fff;padding:2px 3px;user-select:text;outline:none
}
input[type=text]:focus,input[type=password]:focus,select:focus{border-color:#316ac5}
fieldset{border:1px solid #d0d0bf;border-radius:3px;margin:0 0 8px;padding:6px 8px}
legend{color:#0046d5}
label{cursor:default}
.row{display:flex;align-items:center;gap:8px;margin:4px 0}
.row>label.l{width:80px;flex:none}
.row>input[type=text],.row>input[type=password],.row>select{flex:1}
.spacer{flex:1}
.btnrow{display:flex;justify-content:flex-end;gap:6px;margin-top:auto;padding-top:6px}
.tabs{display:flex;padding-left:3px;flex:none}
.tabs button{
  border:1px solid #919b9c;border-bottom:none;border-radius:3px 3px 0 0;background:linear-gradient(#fcfcfe,#ece9d8);
  padding:3px 10px;margin-right:-1px;cursor:pointer;position:relative;top:1px
}
.tabs button.on{background:#fcfcfe;border-top:2px solid #f8b330;padding-top:4px;z-index:1;top:1px}
.tabpage{display:none;flex:1;border:1px solid #919b9c;background:#fcfcfe;padding:10px;overflow:auto;min-height:0}
.tabpage.on{display:block}
.listbox{border:1px solid #7f9db9;background:#fff;height:90px;overflow:auto}
.listbox div{padding:1px 4px;cursor:default}
.listbox div.sel{background:#316ac5;color:#fff}
input[type=range]{width:100%}

.progress{height:16px;border:1px solid #686868;border-radius:3px;background:#fff;padding:1px;overflow:hidden}
.progress i{
  display:block;height:100%;width:0;
  background:repeating-linear-gradient(90deg,#37d02f 0 7px,transparent 7px 9px);
}
.progress.blue i{background:repeating-linear-gradient(90deg,#2a6fe6 0 7px,transparent 7px 9px)}

/* ---------- Console ---------- */
.console{
  flex:1;min-height:0;margin:-8px;background:#000;color:#c0c0c0;padding:4px 6px;
  font:14px/1.25 "Lucida Console",Consolas,"Courier New",monospace;overflow-y:auto;user-select:text;cursor:text
}
.console .out{white-space:pre-wrap;word-break:break-word}
.console .err{color:#ff5f5f}.console .ok{color:#5fff5f}.console .info{color:#5fd7ff}.console .warn{color:#ffd75f}
.console .line{display:flex}
.console .prompt{white-space:pre}
.console input{
  flex:1;min-width:0;background:transparent;border:none;color:inherit;font:inherit;outline:none;padding:0;caret-color:#c0c0c0;user-select:text
}
.console::-webkit-scrollbar{width:16px}
.console::-webkit-scrollbar-track{background:#ece9d8}
.console::-webkit-scrollbar-thumb{background:linear-gradient(90deg,#c9d6fb,#a7bcf5);border:1px solid #7a96df}

/* ---------- Monitor ---------- */
canvas.graph{width:100%;height:90px;background:#000;border:2px inset #aaa;display:block}

/* ---------- Dialog ---------- */
.dlg-icon{width:32px;height:32px;border-radius:50%;flex:none;color:#fff;font:bold 20px/32px Tahoma;text-align:center}
.dlg-icon.error{background:radial-gradient(circle at 35% 30%,#ff9a8a,#d3200a)}
.dlg-icon.info{background:radial-gradient(circle at 35% 30%,#8cc5ff,#0a5ad6)}
.dlg-icon.warn{background:radial-gradient(circle at 35% 30%,#fff08a,#e0a800);color:#000;border-radius:4px}
.dlg-icon.q{background:radial-gradient(circle at 35% 30%,#8cc5ff,#0a5ad6)}

/* ---------- LevelBot ---------- */
.login-banner{display:flex;align-items:center;gap:12px;padding:12px 16px;color:#fff;background:linear-gradient(90deg,#0a3fb5,#3a8cf2);border-bottom:3px solid #f08a1a;flex:none}
.login-banner .lb-logo{font-size:36px}
.login-banner b{font:italic bold 20px "Trebuchet MS",sans-serif}
.progress.red i{background:repeating-linear-gradient(90deg,#e0452a 0 7px,transparent 7px 9px)}
.progress.gold i{background:repeating-linear-gradient(90deg,#f0b020 0 7px,transparent 7px 9px)}
.b-char{display:flex;gap:10px;align-items:center;padding:6px;border:1px solid #d0d0bf;border-radius:3px;background:#fcfcfe;flex:none}
.b-av{font-size:34px;width:52px;height:52px;text-align:center;line-height:52px;border:2px inset #aaa;background:#dfe9f8;flex:none}
.b-info{flex:1;min-width:0}
.bar-row{display:flex;align-items:center;gap:6px;margin-top:3px}
.bar-row>span:first-child{width:26px}
.bar-row .progress{flex:1;height:13px}
.bar-row>span:last-child{width:64px;text-align:right}
.b-main{flex:1;min-height:0;display:flex;gap:6px}
.b-stages{flex:1;min-width:0;overflow-y:auto;border:1px solid #7f9db9;background:#fff;padding:3px}
.stg{padding:5px 6px;border-bottom:1px solid #eee;opacity:.6}
.stg.cur{opacity:1;background:#e8f0ff;outline:1px solid #7a96df}
.stg.done{opacity:.9}
.stg-h{display:flex;gap:6px;align-items:center}
.stg-h b{flex:1}
.stg .progress{height:12px;margin:3px 0}
.stg-d{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.stg-d .mob{margin-right:4px}
.chip{display:inline-flex;align-items:center;gap:1px;padding:0 4px;border:1px solid #c8c3ae;border-radius:3px;background:#fff;font-size:14px}
.chip.off{opacity:.35;filter:grayscale(1)}
.chip sup{font:bold 10px Tahoma;color:#0046d5}
.b-side{width:200px;flex:none;display:flex;flex-direction:column}
.b-side fieldset{margin-bottom:6px}
.inv{display:grid;grid-template-columns:repeat(4,1fr);gap:3px}
.slot{aspect-ratio:1;border:2px inset #aaa;background:#d8d4c4;display:flex;align-items:center;justify-content:center;font-size:20px;position:relative}
.slot i{position:absolute;right:2px;bottom:0;font:bold 10px Tahoma;font-style:normal;color:#000;text-shadow:1px 1px #fff}
.statgrid{display:grid;grid-template-columns:auto 1fr;gap:2px 8px}
.statgrid b{text-align:right}
.b-foot{display:flex;flex-direction:column;gap:6px;flex:none}
.b-foot .r1{display:flex;align-items:center;gap:8px}
.b-foot .r2{display:flex;gap:6px}
.lootgrid{display:grid;grid-template-columns:1fr 1fr;gap:2px 6px}
.lootitem{display:flex;align-items:center;gap:3px}

/* ---------- Taskbar ---------- */
#taskbar{
  position:fixed;left:0;right:0;bottom:0;height:30px;display:flex;align-items:stretch;z-index:99999;
  background:linear-gradient(#3168d5 0%,#4993e6 3%,#2a6ee0 8%,#245edb 50%,#2160d9 86%,#1941a5 100%);
  border-top:1px solid #0c3fb8;
}
#start{
  display:flex;align-items:center;gap:5px;padding:0 22px 0 10px;border:none;cursor:pointer;color:#fff;
  font:italic bold 17px "Trebuchet MS",Tahoma,sans-serif;text-shadow:1px 1px 2px #1d4a14;
  border-radius:0 12px 12px 0;box-shadow:inset 0 1px 3px rgba(255,255,255,.5),2px 0 4px rgba(0,0,0,.4);
  background:linear-gradient(#5ea850 0%,#3c9a3c 12%,#2e8b2e 50%,#2a7d2a 88%,#1e6a1e 100%);
}
#start:hover{filter:brightness(1.1)}
#start.open{filter:brightness(.88)}
#tasks{flex:1;display:flex;gap:3px;padding:2px 6px;overflow:hidden}
.task{
  flex:0 1 160px;min-width:40px;display:flex;align-items:center;gap:5px;padding:0 8px;color:#fff;cursor:pointer;
  border:1px solid #1a3fa0;border-radius:3px;background:linear-gradient(#4c8ae8,#3a76dd);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px
}
.task.on{background:linear-gradient(#1e50b8,#2a5ec8);box-shadow:inset 1px 1px 3px rgba(0,0,0,.5)}
#tray{
  display:flex;align-items:center;gap:8px;padding:0 12px;color:#fff;
  background:linear-gradient(#0c8ae8,#1198f0 10%,#0f8fe9 80%,#0a6fcb);border-left:1px solid #0b3a9a;box-shadow:inset 1px 0 1px #1a5ec8
}

/* ---------- Start menu ---------- */
#menu{
  position:fixed;left:0;bottom:30px;width:340px;display:none;z-index:99998;border-radius:8px 8px 0 0;overflow:hidden;
  border:1px solid #0b3a9a;box-shadow:3px -2px 8px rgba(0,0,0,.5)
}
#menu.open{display:block}
.m-head{display:flex;align-items:center;gap:8px;padding:8px;color:#fff;font:bold 15px Tahoma;text-shadow:1px 1px 2px #000;
  background:linear-gradient(#1c5fdb,#3a8cf2 40%,#1c5fdb)}
.m-head .av{width:40px;height:40px;border-radius:4px;border:2px solid #fff;background:linear-gradient(#ffd24a,#e58a00);text-align:center;font-size:26px;line-height:36px}
.m-body{display:flex;background:#fff;border-top:2px solid #f08a1a}
.m-col{flex:1;padding:4px 0}
.m-col.r{background:#d3e5fa;border-left:1px solid #95bdee}
.m-item{display:flex;align-items:center;gap:8px;padding:5px 10px;font-size:12px;cursor:pointer}
.m-item:hover{background:#316ac5;color:#fff}
.m-item .mi{font-size:20px;width:26px;text-align:center}
.m-item b{display:block;font-size:12px}
.m-sep{height:1px;background:#d0d0d0;margin:4px 10px}
.m-foot{display:flex;justify-content:flex-end;gap:12px;padding:6px 10px;background:linear-gradient(#3a7bea,#1c5fdb)}
.m-foot button{display:flex;align-items:center;gap:5px;background:none;border:none;color:#fff;cursor:pointer;font-size:11px}
.m-foot button:hover{text-decoration:underline}

/* ---------- Boot / shutdown ---------- */
.screen{position:fixed;inset:0;z-index:999999;background:#000;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;transition:opacity .6s}
.screen.gone{opacity:0;pointer-events:none}
.screen h1{margin:0;font:italic bold 44px "Trebuchet MS",sans-serif}
.screen h1 small{font-size:18px;vertical-align:top}
.screen h1 em{color:#f08a1a;font-style:normal}
.bootbar{width:200px;height:16px;border:2px solid #b2b2b2;border-radius:8px;padding:2px;overflow:hidden}
.bootbar i{display:block;height:100%;width:60px;border-radius:2px;
  background:repeating-linear-gradient(90deg,#2a5ee0 0 8px,transparent 8px 11px);animation:boot 1.4s linear infinite}
@keyframes boot{from{transform:translateX(-70px)}to{transform:translateX(210px)}}
#off{background:#003399;display:none}
#off.show{display:flex}