:root{
  color-scheme:dark;
  --bg:#070b11;
  --panel:#111821;
  --panel2:#151f2b;
  --line:rgba(255,255,255,.085);
  --text:#f7f9fc;
  --muted:#8d99a9;
  --good:#39d98a;
  --danger:#ff5160;
  --blue:#62a8ff;
  --orange:#ff9f43;
  --purple:#aa8cff;
  --cyan:#36d1dc;
  --shadow:0 22px 65px rgba(0,0,0,.34);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}
body{overflow-x:hidden}
button,input{font:inherit}
button{color:inherit}
svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cutout{fill:none}
.wall-bg{position:fixed;inset:0;background:
radial-gradient(circle at 15% -10%,rgba(70,104,255,.18),transparent 31%),
radial-gradient(circle at 95% 5%,rgba(255,79,97,.12),transparent 24%),
linear-gradient(180deg,#080d14,#070b11 58%,#05080d);z-index:-1}

.launcher-shell{width:min(1180px,100%);margin:auto;padding:30px 24px 45px}
.smart-header{display:flex;justify-content:space-between;align-items:flex-start;gap:24px}
.clock{font-size:clamp(3.7rem,9vw,6.4rem);font-weight:760;letter-spacing:-.065em;line-height:.9}
.date{margin-top:10px;font-size:1rem;color:#d6dde7}
.greeting{margin-top:6px;color:var(--muted);font-size:.92rem}
.header-right{display:flex;align-items:center;gap:12px}
.weather-card{display:flex;gap:12px;align-items:center;padding:12px 15px;background:rgba(17,24,33,.82);border:1px solid var(--line);border-radius:18px;backdrop-filter:blur(12px)}
.weather-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:rgba(98,168,255,.12);color:#7db8ff}
.weather-icon svg{width:24px;height:24px}
.weather-card strong{display:block;font-size:1.05rem}
.weather-card span{display:block;color:var(--muted);font-size:.75rem;margin-top:1px}
.round-action{width:48px;height:48px;border-radius:16px;border:1px solid var(--line);background:#121a24;display:grid;place-items:center;cursor:pointer}
.round-action svg{width:21px;height:21px}
.status-ribbon{display:flex;justify-content:space-between;align-items:center;margin:24px 0 19px;border:1px solid var(--line);border-radius:15px;background:rgba(14,21,30,.78);padding:12px 14px;color:var(--muted);font-size:.8rem}
.status-ribbon>div{display:flex;align-items:center;gap:7px}
.status-ribbon strong{color:#eaf0f7}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--good);box-shadow:0 0 12px rgba(57,217,138,.7)}

.app-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.app-tile{appearance:none;text-align:left;min-height:178px;border-radius:25px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(20,29,41,.96),rgba(11,17,25,.96));padding:18px;cursor:pointer;box-shadow:var(--shadow);position:relative;overflow:hidden;transition:.18s}
.app-tile:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 90% 10%,var(--tile-glow),transparent 42%);opacity:.18;pointer-events:none}
.app-tile:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.14)}
.app-tile:active{transform:scale(.985)}
.app-icon{width:64px;height:64px;border-radius:21px;display:grid;place-items:center;margin-bottom:25px;background:var(--tile-bg);color:var(--tile-color);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.app-icon svg{width:34px;height:34px}
.app-name{display:block;font-size:1.04rem;font-weight:850}
.app-state{display:block;margin-top:5px;color:var(--muted);font-size:.77rem}
.youtube{--tile-bg:rgba(255,81,96,.14);--tile-color:#ff6976;--tile-glow:#ff5160}
.emby{--tile-bg:rgba(57,217,138,.12);--tile-color:#52e29a;--tile-glow:#39d98a}
.proxmox{--tile-bg:rgba(255,159,67,.13);--tile-color:#ffaf63;--tile-glow:#ff9f43}
.opnsense{--tile-bg:rgba(98,168,255,.13);--tile-color:#79b7ff;--tile-glow:#62a8ff}
.truenas{--tile-bg:rgba(54,209,220,.12);--tile-color:#65e4ec;--tile-glow:#36d1dc}
.cameras{--tile-bg:rgba(170,140,255,.12);--tile-color:#b9a3ff;--tile-glow:#aa8cff}
.network{--tile-bg:rgba(63,210,255,.12);--tile-color:#69ddff;--tile-glow:#3fd2ff}
.settings{--tile-bg:rgba(255,255,255,.08);--tile-color:#d9e1eb;--tile-glow:#ffffff}
.disabled-tile{opacity:.68;cursor:default}
.disabled-tile:hover{transform:none}
.online-text{color:var(--good)!important}

.quick-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:16px}
.quick-card{background:rgba(13,20,29,.74);border:1px solid var(--line);border-radius:15px;padding:12px 14px}
.quick-card span{display:block;color:var(--muted);font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;font-weight:800}
.quick-card strong{display:block;margin-top:4px;font-size:.86rem}
.launcher-footer{text-align:center;color:#4e5b6a;font-size:.7rem;margin-top:22px}
.launcher-footer span{margin:0 4px}

.overlay{position:fixed;inset:0;background:rgba(0,0,0,.54);backdrop-filter:blur(5px);opacity:0;pointer-events:none;transition:.22s;z-index:20}
.overlay.show{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(520px,100%);background:linear-gradient(180deg,#111923,#0a1017);border-left:1px solid var(--line);padding:26px;transform:translateX(102%);transition:.26s cubic-bezier(.2,.8,.2,1);z-index:21;box-shadow:-30px 0 80px rgba(0,0,0,.42);overflow:auto}
.drawer.open{transform:translateX(0)}
.drawer-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}
.drawer-title{display:flex;align-items:center;gap:12px}
.drawer-title small{color:#ff7480;font-size:.68rem;font-weight:900;letter-spacing:.13em}
.drawer-title h2{margin:2px 0 0;font-size:1.35rem}
.mini-icon{width:46px;height:46px;border-radius:15px;background:var(--tile-bg);color:var(--tile-color);display:grid;place-items:center}
.mini-icon svg{width:25px;height:25px}
.close-drawer{width:40px;height:40px;border-radius:13px;border:1px solid var(--line);background:#17212d;font-size:1.5rem;cursor:pointer}
.device-grid{display:grid;gap:12px}
.device{background:#0e151e;border:1px solid var(--line);border-radius:17px;padding:15px}
.device-top{display:flex;justify-content:space-between;gap:10px}
.device-name{font-weight:820}
.device-meta{color:var(--muted);font-size:.77rem;margin-top:4px}
.badge{font-size:.67rem;font-weight:900;letter-spacing:.05em;padding:6px 9px;border-radius:999px}
.badge.blocked{color:#ff7f89;background:rgba(255,81,96,.10);border:1px solid rgba(255,81,96,.24)}
.badge.allowed{color:#63e4a5;background:rgba(57,217,138,.10);border:1px solid rgba(57,217,138,.24)}
.device-actions,.drawer-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px}
.action-btn{min-height:46px;border-radius:13px;border:1px solid transparent;padding:0 14px;font-weight:850;cursor:pointer}
.action-btn.danger{background:linear-gradient(180deg,#dc4b57,#aa3039)}
.action-btn.success{background:linear-gradient(180deg,#31b978,#25885d)}
.action-btn.neutral{background:#182330;border-color:var(--line)}
.action-btn.primary{background:linear-gradient(180deg,#ff5964,#d2343e)}
.action-btn:disabled{opacity:.4}
.wide{width:100%;margin-top:12px}
.detail-box{background:#0e151e;border:1px solid var(--line);border-radius:17px;padding:16px;margin-bottom:12px}
.detail-row{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.05);color:var(--muted)}
.detail-row:last-child{border-bottom:0}
.detail-row strong{color:var(--text)}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(18px);background:#17222f;border:1px solid var(--line);padding:12px 16px;border-radius:14px;opacity:0;pointer-events:none;transition:.2s;z-index:40}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

.login-page{display:grid;place-items:center;min-height:100vh;padding:24px}
.login-shell{width:min(470px,100%);position:relative}
.login-clock{text-align:center;margin-bottom:22px}
.login-clock div{font-size:4.2rem;font-weight:760;letter-spacing:-.06em}
.login-clock span{color:var(--muted)}
.login-card{background:linear-gradient(180deg,rgba(19,28,40,.96),rgba(10,16,23,.96));border:1px solid var(--line);border-radius:28px;padding:30px;box-shadow:var(--shadow)}
.login-home-icon{width:62px;height:62px;border-radius:20px;background:linear-gradient(145deg,#ff5b67,#c72f39);display:grid;place-items:center;margin-bottom:18px}
.login-home-icon svg{width:30px;height:30px}
.login-card small{color:#ff737d;font-weight:900;letter-spacing:.14em}
.login-card h1{font-size:2rem;margin:8px 0 4px}
.login-card p{color:var(--muted);margin:0 0 20px}
.input-wrap{position:relative}
.input-wrap svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:#6f7c8b}
input{width:100%;background:#0c131b;border:1px solid var(--line);border-radius:14px;color:white;padding:14px 14px 14px 43px;outline:none}
.alert{background:rgba(255,81,96,.1);border:1px solid rgba(255,81,96,.25);color:#ff8c95;padding:10px 12px;border-radius:12px;margin-bottom:12px}

@media(max-width:900px){
  .app-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .quick-row{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:680px){
  .launcher-shell{padding:18px 14px 36px}
  .smart-header{align-items:flex-start}
  .header-right{flex-direction:column;align-items:flex-end}
  .weather-card{padding:9px 11px}
  .weather-icon{width:38px;height:38px}
  .app-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .app-tile{min-height:155px;border-radius:21px;padding:15px}
  .app-icon{width:57px;height:57px;border-radius:18px;margin-bottom:20px}
  .app-icon svg{width:30px;height:30px}
  .quick-row{grid-template-columns:1fr 1fr}
  .status-ribbon{font-size:.72rem}
}