:root{
  --bg1:#0b0c10; --bg2:#14161c;
  --glass:rgba(255,255,255,.06); --stroke:rgba(255,255,255,.12);
  --text:#fff; --muted:#c7cad8;
  --pillGrad:linear-gradient(135deg,#ff2d95,#7a5cff);
  --blueGrad:linear-gradient(135deg,#5aa7ff,#9aa8ff);
  --good:#2bd99f; --warn:#ffd166; --bad:#ff6b6b; --info:#7dc3ff;
  --font:-apple-system, SF Pro Text, SF Pro Display, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
}
*{box-sizing:border-box}html,body{height:100%}html{color-scheme:dark}
body{margin:0;color:var(--text);font:16px/1.6 var(--font);overflow-y:overlay}
body::before{
  content:""; position:fixed; inset:0; z-index:-1;
  background:
   radial-gradient(1000px 700px at 15% -10%, rgba(255,45,149,.16), transparent 60%),
   radial-gradient(1000px 700px at 85% -10%, rgba(122,92,255,.12), transparent 60%),
   linear-gradient(180deg,var(--bg1) 0%, var(--bg2) 100%);
  will-change:transform; transform:translateZ(0);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.header{position:sticky;top:0;z-index:50}
.bar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;padding:14px}
.brand{justify-self:center}
.pill{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid var(--stroke)}
.pill.grad{background:var(--pillGrad);box-shadow:0 12px 40px rgba(122,92,255,.35),0 10px 30px rgba(255,45,149,.2)}
.user{display:flex;align-items:center;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:10px 16px;border-radius:14px;border:1px solid var(--stroke);background:rgba(255,255,255,.06);cursor:pointer;transition:transform .14s ease, box-shadow .14s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(122,92,255,.25)}
.btn.grad{background:var(--blueGrad);border-color:transparent;color:#0b1020}
.btn.secondary{background:rgba(255,255,255,.05)}
.btn.link{background:transparent;border-color:transparent;padding:8px}
.btn.close{float:right}
.container{max-width:1200px;margin:0 auto;padding:26px}
.centerBox{min-height:calc(100vh - 72px);display:grid;place-items:center}
.grid{display:grid;gap:18px}
.grid.col1{grid-template-columns:1fr;max-width:720px;margin:0 auto}
.card{padding:18px;border-radius:18px;background:var(--glass);border:1px solid var(--stroke)}
.tile{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid var(--stroke)}
.tile .left{display:flex;align-items:center;gap:12px}
.tile h4{margin:0} .subtitle{color:var(--muted)}
/* spinner overlay */
.spinOverlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.45);z-index:60}
.spinOverlay.show{display:flex}
.spinner{width:56px;height:56px;border-radius:50%;border:5px solid rgba(255,255,255,.18);border-top-color:#68b6ff;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
/* estate */
.filters{display:flex;gap:10px;align-items:center;background:rgba(255,255,255,.05);border:1px solid var(--stroke);border-radius:14px;padding:8px}
.fbtn{padding:8px 14px;border-radius:12px;border:1px solid var(--stroke);background:rgba(255,255,255,.04);cursor:pointer}
.fbtn.active{background:var(--pillGrad);border-color:transparent;box-shadow:0 10px 30px rgba(122,92,255,.3),0 8px 24px rgba(255,45,149,.2)}
.healthbar{height:10px;border-radius:999px;overflow:hidden;border:1px solid var(--stroke);background:#101217}
.seg{height:100%;float:left}
.list{list-style:none;margin:0;padding:0}
.list li{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--stroke)}
/* forms */
input,select,textarea{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--stroke);background:rgba(255,255,255,.06);color:#fff}
select option{color:#000;background:#fff}
select option:hover{background:#eee}
.badge{padding:4px 10px;border-radius:999px;border:1px solid var(--stroke);background:rgba(255,255,255,.06);font-size:12px}
.badge.good{color:var(--good);border-color:rgba(43,217,159,.35)}
.badge.warn{color:var(--warn);border-color:rgba(255,209,102,.35)}
.badge.bad{color:var(--bad);border-color:rgba(255,107,107,.35)}
.mono{font-family:ui-monospace,Consolas,Menlo,monospace}
.pageTitle{font-size:32px;margin:6px 0 18px}

/* === NEW: solid modal/drawer with blurred backdrop === */
.backdrop{position:fixed;inset:0;padding:20px;z-index:70;
  background:rgba(8,10,14,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:flex;align-items:flex-start;justify-content:center}
.panel{max-width:760px;width:96%;border-radius:18px;background:#0d1117;border:1px solid #202733;
  box-shadow:0 30px 120px rgba(0,0,0,.65);padding:16px;position:relative}
.panel.right{margin-left:auto;margin-right:8px;max-width:460px}
.panel .x{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:10px;border:1px solid var(--stroke);
  background:rgba(255,255,255,.08);display:grid;place-items:center;cursor:pointer}