:root{
  --bg0:#030410; --panel: rgba(10,12,34,0.62); --panel2: rgba(10,12,34,0.78);
  --stroke: rgba(255,255,255,0.12); --stroke2: rgba(255,255,255,0.18);
  --text: rgba(255,255,255,0.92); --muted: rgba(255,255,255,0.62); --muted2: rgba(255,255,255,0.42);
  --accent1:#7cd4ff; --accent2:#b06bff; --accent3:#ff8fd8;
  --good: rgba(90,255,210,0.9); --warn: rgba(255,220,120,0.95);
  --shadow: 0 18px 60px rgba(0,0,0,0.45);
}
*{box-sizing:border-box;}
html,body{height:100%;margin:0;background: radial-gradient(circle at 30% 10%, #14194a, var(--bg0) 60%);color:var(--text);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow:hidden;}
a{color:inherit;text-decoration:none;}
button,input{font-family:inherit;}
.bg-noise{position:fixed;inset:0;pointer-events:none;background-image:
  radial-gradient(circle at 20% 30%, rgba(124,212,255,0.10), transparent 45%),
  radial-gradient(circle at 70% 20%, rgba(176,107,255,0.12), transparent 40%),
  radial-gradient(circle at 60% 75%, rgba(255,143,216,0.10), transparent 42%);}
.bg-grid{position:fixed;inset:-20%;background-image:linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size:56px 56px;transform:rotate(10deg);opacity:0.10;pointer-events:none;
  mask-image: radial-gradient(circle at 50% 40%, rgba(0,0,0,1), rgba(0,0,0,0) 70%);}
.badge{display:inline-flex;align-items:center;gap:8px;padding:4px 10px;border-radius:999px;border:1px solid rgba(255,255,255,0.12);
  background: rgba(7,8,24,0.55);backdrop-filter: blur(10px);will-change: box-shadow;}
.badge .dot{width:6px;height:6px;border-radius:999px;background: radial-gradient(circle at 30% 0, #ffffff, var(--good));
  box-shadow:0 0 10px rgba(90,255,210,0.55);opacity:0.85;}
.badge.glow{animation:rnebuGlow 5.8s ease-in-out infinite;}
@keyframes rnebuGlow{0%,100%{box-shadow:0 0 0 rgba(120,180,255,0.0);border-color:rgba(255,255,255,0.10);}
  50%{box-shadow:0 10px 26px rgba(120,180,255,0.16);border-color:rgba(255,255,255,0.18);}}

/* OS shell */
.topbar{position:fixed;top:0;left:0;right:0;height:56px;display:flex;align-items:center;justify-content:space-between;
  padding:0 16px 0 72px;backdrop-filter: blur(14px);background: linear-gradient(180deg, rgba(8,10,30,0.78), rgba(8,10,30,0.42));
  border-bottom:1px solid var(--stroke);z-index:50;}
.brand{display:flex;align-items:center;gap:10px;letter-spacing:.24em;text-transform:uppercase;font-weight:800;}
.brand .dot{width:8px;height:8px;border-radius:999px;background: radial-gradient(circle at 30% 0,#fff,var(--good));box-shadow:0 0 18px rgba(90,255,210,0.45);opacity:.9;}
.kpis{display:flex;align-items:center;gap:14px;font-size:12px;color:var(--muted);letter-spacing:.14em;text-transform:uppercase;}
.kpis .pill{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;border:1px solid var(--stroke);background: rgba(7,8,24,0.50);}
.kpis .pill strong{color:var(--text);font-weight:700;letter-spacing:.12em;}
.sidebar{position:fixed;top:0;left:0;bottom:0;width:64px;padding-top:64px;border-right:1px solid var(--stroke);
  background: rgba(6,7,22,0.55);backdrop-filter: blur(14px);z-index:60;}
.sidebtn{width:44px;height:44px;margin:10px auto;border-radius:14px;border:1px solid rgba(255,255,255,0.10);
  background: rgba(10,12,34,0.45);display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;}
.sidebtn:hover{transform:translateY(-1px);border-color: rgba(255,255,255,0.18);box-shadow:0 12px 28px rgba(0,0,0,0.35);}
.sidebtn.active{border-color: rgba(124,212,255,0.38);box-shadow:0 0 0 2px rgba(124,212,255,0.10), 0 16px 40px rgba(124,212,255,0.12);}
.sidebtn span{font-size:18px;opacity:.95;}
.desktop{position:fixed;top:56px;left:64px;right:0;bottom:76px;padding:18px;overflow:hidden;}
.widget-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;height:100%;}
.card{border:1px solid var(--stroke);background: var(--panel);backdrop-filter: blur(16px);border-radius:22px;box-shadow: var(--shadow);
  padding:16px;overflow:hidden;}
.card h3{margin:0;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color: var(--muted);}
.card .big{margin-top:10px;font-size:28px;letter-spacing:.06em;font-weight:800;}
.card .sub{margin-top:6px;color: var(--muted);font-size:12px;letter-spacing:.06em;line-height:1.5;}
.dock{position:fixed;left:64px;right:0;bottom:0;height:76px;display:flex;align-items:center;justify-content:center;padding:12px 14px;
  border-top:1px solid var(--stroke);background: rgba(6,7,22,0.55);backdrop-filter: blur(18px);z-index:55;}
.dock-inner{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:999px;border:1px solid rgba(255,255,255,0.10);
  background: rgba(10,12,34,0.35);}
.dockbtn{width:44px;height:44px;border-radius:16px;border:1px solid rgba(255,255,255,0.10);background: rgba(10,12,34,0.55);
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;}
.dockbtn:hover{transform:translateY(-1px);border-color: rgba(255,255,255,0.18);box-shadow:0 12px 28px rgba(0,0,0,0.35);}
.dockbtn span{font-size:18px;opacity:.95;}
.window{position:absolute;width:520px;height:360px;border-radius:22px;border:1px solid var(--stroke2);background: var(--panel2);
  backdrop-filter: blur(18px);box-shadow:0 30px 90px rgba(0,0,0,0.55);overflow:hidden;z-index:30;}
.window.hidden{display:none;}
.winbar{height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;border-bottom:1px solid rgba(255,255,255,0.10);
  cursor:grab;user-select:none;}
.winbar:active{cursor:grabbing;}
.winleft{display:flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.wincontrols{display:flex;gap:8px;}
.ctrl{width:10px;height:10px;border-radius:999px;border:1px solid rgba(255,255,255,0.18);opacity:.9;}
.ctrl.red{background: rgba(255,120,160,0.8);} .ctrl.yellow{background: rgba(255,220,120,0.85);} .ctrl.green{background: rgba(90,255,210,0.8);}
.winbody{padding:14px;height: calc(100% - 44px);overflow:auto;}
.winbody h4{margin:0 0 10px 0;letter-spacing:.12em;text-transform:uppercase;font-size:12px;color:var(--muted);}
.list{display:flex;flex-direction:column;gap:10px;}
.row{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:16px;border:1px solid rgba(255,255,255,0.10);background: rgba(0,0,0,0.18);}
.row .left{display:flex;flex-direction:column;gap:4px;}
.row .name{font-weight:700;letter-spacing:.06em;}
.row .desc{font-size:12px;color:var(--muted);line-height:1.4;}
.row .right{font-size:12px;color:var(--muted);letter-spacing:.14em;text-transform:uppercase;}
.footer-credit{position:fixed;right:16px;bottom:16px;color: rgba(255,255,255,0.42);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  z-index:70;pointer-events:none;}
.toggle{appearance:none;width:44px;height:24px;border-radius:999px;border:1px solid rgba(255,255,255,0.16);background: rgba(255,255,255,0.08);
  position:relative;cursor:pointer;}
.toggle:before{content:"";position:absolute;top:50%;left:3px;width:18px;height:18px;border-radius:999px;transform: translateY(-50%);
  background: rgba(255,255,255,0.82);transition: left .18s ease, background .18s ease;}
.toggle:checked{background: rgba(90,255,210,0.22);border-color: rgba(90,255,210,0.35);}
.toggle:checked:before{left:23px;background: rgba(90,255,210,0.95);}
.small{font-size:12px;color:var(--muted);line-height:1.55;}

/* Login */
.login-wrap{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:26px;}
.login-card{width:min(420px,92vw);border-radius:28px;border:1px solid rgba(255,255,255,0.14);background: rgba(10,12,34,0.50);
  backdrop-filter: blur(18px);box-shadow:0 40px 120px rgba(0,0,0,0.60);padding:22px 22px 18px;text-align:center;}
.avatar{
  width:92px;height:92px;border-radius:999px;margin:6px auto 14px;
  border:1px solid rgba(255,255,255,0.18);
  background:
    radial-gradient(circle at 50% 50%, rgba(124,212,255,0.22), rgba(176,107,255,0.10) 55%, rgba(0,0,0,0) 70%),
    url("assets/login-logo.png") center/cover no-repeat;
  box-shadow:
    0 18px 60px rgba(0,0,0,0.45),
    0 0 0 4px rgba(124,212,255,0.08),
    0 0 26px rgba(124,212,255,0.20);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.login-title{letter-spacing:.22em;text-transform:uppercase;font-weight:900;margin:0 0 10px 0;}
.login-sub{color:var(--muted);font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px;}
.login-input{width:100%;padding:12px 14px;border-radius:16px;border:1px solid rgba(255,255,255,0.12);background: rgba(0,0,0,0.22);
  color: rgba(255,255,255,0.92);outline:none;font-size:14px;letter-spacing:.06em;}
.login-input:focus{border-color: rgba(124,212,255,0.34);box-shadow:0 0 0 4px rgba(124,212,255,0.10);}
.login-row{margin-top:12px;display:flex;gap:10px;}
.login-btn{flex:1;padding:12px 14px;border-radius:16px;border:1px solid rgba(255,255,255,0.16);background: rgba(10,12,34,0.65);
  color: rgba(255,255,255,0.92);cursor:pointer;letter-spacing:.14em;text-transform:uppercase;font-size:12px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;}
.login-btn:hover{transform:translateY(-1px);border-color: rgba(255,255,255,0.26);box-shadow:0 18px 44px rgba(120,180,255,0.16);}
.login-btn.primary{border-color: rgba(124,212,255,0.34);background: linear-gradient(135deg, rgba(124,212,255,0.22), rgba(176,107,255,0.18));}
.login-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color: rgba(255,255,255,0.46);}
.shake{animation:shake .28s ease;}
@keyframes shake{0%,100%{transform:translateX(0);}20%{transform:translateX(-7px);}40%{transform:translateX(7px);}
  60%{transform:translateX(-5px);}80%{transform:translateX(5px);}}