/* FUTURE-TECH ADMIN UI */
:root{
  --bg: #0a0c12; --fg:#e6e6f0; --muted:#a1a1b5;
  --card:#111423; --card2:#0f1321;
  --line: rgba(255,255,255,.08);
  --gradA:#22d3ee; --gradB:#6366f1; --gradC:#b967ff;
  --good:#22c55e; --warn:#f59e0b; --bad:#ef4444; --info:#60a5fa;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:radial-gradient(1200px 600px at 10% -10%,#141927,#0a0c12 60%), radial-gradient(800px 400px at 100% 120%,#2a2140,#0a0c12 60%);color:var(--fg);font:15px/1.5 ui-sans-serif,system-ui,Segoe UI,Roboto}
a{color:#a5b4fc;text-decoration:none}
a:hover{opacity:.9}
.grid{display:grid;gap:16px}
.wrap{max-width:1200px;margin:0 auto;padding:22px}
.header{
  position:sticky;top:0;z-index:10;
  backdrop-filter:saturate(140%) blur(12px);
  background:rgba(10,12,18,.55);border-bottom:1px solid var(--line)
}
.header .inner{display:flex;align-items:center;justify-content:space-between;padding:12px 22px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.3px}
.brand .logo{width:28px;height:28px;border-radius:8px;background:conic-gradient(from 0deg,var(--gradA),var(--gradB),var(--gradC),var(--gradA));box-shadow:0 0 30px #22d3ee55}
.nav{display:flex;gap:14px;flex-wrap:wrap}
.nav a{padding:8px 12px;border-radius:10px;border:1px solid var(--line);background:linear-gradient(180deg,#0e1324,#0a0d18)}
.nav a.active{border-color:#22d3ee;box-shadow:0 0 0 1px #22d3ee55, inset 0 0 30px #22d3ee11}

.main{display:grid;grid-template-columns:220px 1fr;gap:18px;margin-top:18px}
.side{position:relative}
.side .panel{position:sticky;top:66px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,#0f1321,#0a0e19);padding:12px}
.side .panel a{display:block;padding:10px 12px;border-radius:10px;color:var(--fg)}
.side .panel a:hover{background:#141a2c}
.side .panel a.sel{background:linear-gradient(180deg,#11172b,#0a0e19);border:1px solid #22d3ee44}

.card{
  background:linear-gradient(180deg,#0e1324,#0b0f1b);
  border:1px solid var(--line); border-radius:16px; padding:16px;
  box-shadow:inset 0 0 60px rgba(255,255,255,.03), 0 10px 30px rgba(0,0,0,.4);
  position:relative; overflow:hidden;
}
.card .bar{position:absolute;inset:-1px;pointer-events:none;border-radius:16px}
.card .bar:before{content:'';position:absolute;inset:-1px;border-radius:16px;
  background:conic-gradient(from var(--rot,0deg), #05d5ff33, #b967ff33, #fffb9633, #05d5ff33);
  filter:blur(20px);animation:spin 14s linear infinite;opacity:.8}
@keyframes spin{to{transform:rotate(1turn)}}
h1{font-size:26px;margin:0 0 10px}
h2{font-size:18px;margin:12px 0}
small.muted, .muted{color:var(--muted)}
.btn{padding:9px 14px;border-radius:12px;border:1px solid #22d3ee55;background:linear-gradient(90deg,#22d3ee,#6366f1);color:#001018;font-weight:700}
.btn.ghost{background:transparent;color:#a5f3fc;border:1px solid #22d3ee55}
.btn.warn{background:linear-gradient(90deg,#f59e0b,#ef4444);border-color:#ef4444aa;color:#201}
input,select,textarea{width:100%;padding:10px;border-radius:10px;border:1px solid #283148;background:#0e1324;color:var(--fg)}
label{display:block;margin:8px 0 6px;font-weight:700}
table{width:100%;border-collapse:collapse}
th,td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top}
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.kpi .item{background:linear-gradient(180deg,#0f1321,#0a0d18);border:1px solid var(--line);border-radius:14px;padding:14px}
.kpi .num{font-size:28px;font-weight:900}
.badge{display:inline-block;font-size:12px;padding:4px 8px;border-radius:999px;border:1px solid var(--line);background:#0f1425}
.good{color:var(--good)} .warnc{color:var(--warn)} .bad{color:var(--bad)} .info{color:var(--info)}
pre.code{background:#0e1324;border:1px solid var(--line);border-radius:10px;padding:12px;white-space:pre-wrap}
hr{border:0;border-top:1px solid var(--line);margin:18px 0}