/* Server Dashboard — spacious, premium, hero power buttons. */
:root{
  --bg:#0B0B12;
  --panel:#15141F;
  --panel-2:#1C1A2B;
  --border:#2A2740;
  --border-2:#3A3658;
  --text:#F4F3FB;
  --muted:#A39FC0;
  --dim:#6B6688;
  --accent:#8B5CF6;
  --accent-2:#A78BFA;
  --ok:#34D399;
  --danger:#FB7185;
  --radius:28px;
  --radius-sm:16px;
  --shadow:0 30px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);
  --font:'Sora','Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased}
body{
  margin:0; min-height:100dvh; font-family:var(--font); font-size:16px; line-height:1.5;
  color:var(--text); background:var(--bg); overflow-x:hidden;
}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:10px}

.aura{position:fixed; inset:0; z-index:-1; overflow:hidden;
  background:radial-gradient(900px 600px at 50% -10%, rgba(139,92,246,.18), transparent 60%), var(--bg);}

.page{max-width:1080px; margin:0 auto; padding:64px 32px 72px}
@media(max-width:640px){.page{padding:40px 18px 48px}}

.head{display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:48px; animation:fadeDown .6s ease both}
@keyframes fadeDown{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
.title{display:flex; align-items:center; gap:18px}
.title .logo{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(145deg,var(--accent),var(--accent-2));box-shadow:0 12px 30px rgba(139,92,246,.4), inset 0 1px 0 rgba(255,255,255,.3); animation:floaty 5s ease-in-out infinite}\n.title .logo svg{width:28px;height:28px}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.title h1{margin:0; font-size:30px; font-weight:700; letter-spacing:-.03em}
.title p{margin:4px 0 0; font-size:14px; color:var(--muted)}
.status-pill{display:inline-flex; align-items:center; gap:11px; background:var(--panel); border:1px solid var(--border); border-radius:999px; padding:13px 20px; font-size:14px; color:var(--muted); box-shadow:var(--shadow)}
.status-pill-dot{width:11px;height:11px;border-radius:50%;background:var(--dim);transition:background .3s,box-shadow .3s}
.status-pill-dot.ok{background:var(--ok);box-shadow:0 0 0 6px rgba(52,211,153,.16)}
.status-pill-dot.err{background:var(--danger);box-shadow:0 0 0 6px rgba(251,113,133,.16)}

.grid{display:grid; gap:28px}
@media(min-width:760px){.grid{grid-template-columns:1fr 1fr}}

.card{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg,var(--panel),#121120);
  border:1px solid var(--border); border-radius:var(--radius);
  padding:40px 36px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:26px;
  box-shadow:var(--shadow);
  transition:border-color .25s, transform .25s, box-shadow .25s;
  animation:cardIn .6s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes cardIn{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}
.card:hover{border-color:var(--border-2); transform:translateY(-3px); box-shadow:0 40px 90px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06)}
.card.on{border-color:rgba(52,211,153,.4)}
.card-head{display:flex; flex-direction:column; align-items:center; gap:12px; width:100%}
.device-name{font-size:24px; font-weight:700; letter-spacing:-.02em}
.badge{display:inline-flex; align-items:center; gap:9px; font-size:13px; font-weight:600; padding:8px 15px; border-radius:999px; border:1px solid var(--border); background:rgba(0,0,0,.3); color:var(--muted); transition:.3s}
.badge .b-dot{width:9px;height:9px;border-radius:50%}
.card.on .badge{color:var(--ok); border-color:rgba(52,211,153,.35); background:rgba(52,211,153,.1)}
.badge .b-dot{background:var(--dim)}
.card.on .badge .b-dot{background:var(--ok); box-shadow:0 0 0 5px rgba(52,211,153,.18); animation:breathe 2.4s ease-in-out infinite}
@keyframes breathe{0%,100%{box-shadow:0 0 0 0 rgba(52,211,153,.45)}70%{box-shadow:0 0 0 9px rgba(52,211,153,0)}}

/* HERO power button — big, can't be clipped */
.power{
  width:140px; height:140px; border-radius:50%; display:grid; place-items:center; color:#fff; isolation:isolate;
  background:radial-gradient(130% 130% at 30% 20%, #9d6cf7, var(--accent) 58%, #6d28d9);
  box-shadow:0 22px 50px rgba(139,92,246,.45), inset 0 2px 0 rgba(255,255,255,.25), inset 0 -10px 22px rgba(0,0,0,.2);
  transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .3s, background .3s, color .3s;
}
.power::after{content:""; position:absolute; inset:-9px; border-radius:50%; z-index:-1; background:conic-gradient(from 0deg, transparent, rgba(167,139,250,.75), transparent 34%); opacity:0; filter:blur(4px); transition:opacity .3s}
.power:hover:not(:disabled){transform:translateY(-4px) scale(1.04); box-shadow:0 32px 70px rgba(139,92,246,.55), inset 0 2px 0 rgba(255,255,255,.3)}
.power:hover:not(:disabled)::after{opacity:1; animation:spin 4s linear infinite}
.power:active:not(:disabled){transform:translateY(0) scale(.97)}
.power svg{width:54px;height:54px;display:block;overflow:visible;transition:transform .3s}
.power:hover:not(:disabled) svg{transform:scale(1.08)}
.power:disabled{background:radial-gradient(130% 130% at 30% 20%, #115e54, #0c3a34); color:var(--ok); box-shadow:inset 0 0 0 2px rgba(52,211,153,.4), 0 16px 36px rgba(52,211,153,.16); cursor:default}
.power.loading{pointer-events:none}
.power .spin{width:46px;height:46px;border:4px solid rgba(255,255,255,.32);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.power.flash{animation:pulse 1.1s ease}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,.5)}100%{box-shadow:0 0 0 30px rgba(52,211,153,0)}}

.label{font-size:15px; color:var(--muted); min-height:20px; transition:color .3s}
.label.on{color:var(--ok); font-weight:600}
.ago{font-size:12px; color:var(--dim); opacity:.8}

.empty{grid-column:1/-1; background:var(--panel); border:1px dashed var(--border-2); border-radius:var(--radius); padding:64px 24px; text-align:center; color:var(--muted)}
.empty h3{margin:0 0 8px; color:var(--text); font-size:20px}
.skel{height:330px; border-radius:var(--radius); border:1px solid var(--border); background:linear-gradient(100deg,var(--panel) 30%,var(--panel-2) 50%,var(--panel) 70%); background-size:200% 100%; animation:shimmer 1.3s infinite}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

.toaster{position:fixed; right:22px; bottom:22px; z-index:50; display:grid; gap:12px; width:min(380px,calc(100vw-36px))}
.toast{position:relative; overflow:hidden; background:rgba(21,20,31,.94); backdrop-filter:blur(14px); border:1px solid var(--border); border-radius:18px; padding:16px 18px; display:flex; gap:14px; align-items:flex-start; box-shadow:var(--shadow); opacity:0; transform:translateY(14px) scale(.98); transition:opacity .25s, transform .25s}
.toast.show{opacity:1; transform:none}
.toast.hide{opacity:0; transform:translateY(10px) scale(.98)}
.toast.ok{border-color:rgba(52,211,153,.4)}
.toast.err{border-color:rgba(251,113,133,.4)}
.toast-ic{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-size:15px;flex:0 0 auto}
.toast.ok .toast-ic{background:rgba(52,211,153,.15);color:var(--ok)}
.toast.err .toast-ic{background:rgba(251,113,133,.15);color:var(--danger)}
.toast-msg{font-size:14px; line-height:1.45; flex:1}
.toast-msg b{display:block; font-weight:700; margin-bottom:2px}
.toast-msg span{color:var(--muted)}
.toast .bar{position:absolute; left:0; bottom:0; height:3px; width:100%; background:linear-gradient(90deg,var(--accent),var(--accent-2)); opacity:.7}
.toast.err .bar{background:linear-gradient(90deg,var(--danger),#fbbf24)}

.foot{margin-top:40px; display:flex; align-items:center; gap:16px; color:var(--dim); font-size:13px; border-top:1px solid var(--border); padding-top:22px}
.foot-sep{width:1px; height:14px; background:var(--border-2)}

/* ---- Boot / Critical wake states ---- */
.label.boot{color:var(--accent); font-weight:600}
.label.crit{color:var(--danger); font-weight:600}

.card.booting{border-color:rgba(139,92,246,.5); box-shadow:0 0 0 1px rgba(139,92,246,.35), 0 0 38px rgba(139,92,246,.28); animation:bootGlow 1.6s ease-in-out infinite}
@keyframes bootGlow{0%,100%{box-shadow:0 0 0 1px rgba(139,92,246,.30), 0 0 28px rgba(139,92,246,.18)}50%{box-shadow:0 0 0 1px rgba(139,92,246,.55), 0 0 48px rgba(139,92,246,.38)}}
.card.booting .badge{color:var(--accent); border-color:rgba(139,92,246,.45); background:rgba(139,92,246,.12)}
.card.booting .power{background:radial-gradient(130% 130% at 30% 20%, #5b3aa0, #3a2566); color:#fff; box-shadow:inset 0 0 0 2px rgba(139,92,246,.5)}

.card.critical{border-color:rgba(251,113,133,.5); box-shadow:0 0 0 1px rgba(251,113,133,.4), 0 0 40px rgba(251,113,133,.25)}
.card.critical .badge{color:var(--danger); border-color:rgba(251,113,133,.45); background:rgba(251,113,133,.12)}
.card.critical .power{background:radial-gradient(130% 130% at 30% 20%, #7f1d2e, #4a0f1c); color:var(--danger); box-shadow:inset 0 0 0 2px rgba(251,113,133,.45)}
.card.critical{animation:critPulse 1s ease-in-out infinite}
@keyframes critPulse{0%,100%{box-shadow:0 0 0 1px rgba(251,113,133,.30), 0 0 24px rgba(251,113,133,.15)}50%{box-shadow:0 0 0 1px rgba(251,113,133,.6), 0 0 44px rgba(251,113,133,.34)}}

/* Expanded boot view — terminal fills the WHOLE card box (replaces name+button) */
.card.expanded{gap:0; padding:16px; align-items:center; justify-content:center; animation:expandIn .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes expandIn{from{opacity:.55;transform:scale(.96);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}
.card.expanded .card-head,
.card.expanded .power,
.card.expanded .demo-btn,
.card.expanded .label,
.card.expanded .ago{display:none}
.card.expanded .term{display:block; width:100%; min-height:360px; max-height:440px; margin:0; animation:termIn .35s ease both}

/* Terminal boot log — sci-fi CRT */
.term{display:block; width:100%; margin:14px 0 2px; padding:0; background:rgba(6,10,14,.92); border:1px solid rgba(139,92,246,.35); border-radius:12px; font-family:'SFMono-Regular',ui-monospace,Menlo,Consolas,monospace; font-size:12px; line-height:1.65; color:#8be9fd; white-space:pre-wrap; word-break:break-word; max-height:168px; overflow:auto; text-align:left; position:relative; box-shadow:inset 0 0 30px rgba(139,92,246,.18), 0 0 22px rgba(139,92,246,.12)}
.term:not([hidden]){animation:termIn .3s ease both}
@keyframes termIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.card:not(.booting):not(.critical) .term{display:none}
/* scanline overlay */
.term::after{content:''; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px); border-radius:12px; animation:scan 7s linear infinite; mix-blend-mode:overlay}
@keyframes scan{from{background-position:0 0}to{background-position:0 18px}}
.term-hdr{display:flex; justify-content:space-between; align-items:center; padding:8px 13px; font-size:11px; letter-spacing:.08em; color:#a78bfa; border-bottom:1px solid rgba(139,92,246,.22); background:rgba(139,92,246,.08); text-transform:uppercase}
.term-hdr span{color:#6b7280; letter-spacing:.04em; text-transform:none}
.term-body{padding:11px 13px; min-height:40px}
.term-line{text-shadow:0 0 6px currentColor; opacity:0; animation:lineIn .18s ease forwards}
@keyframes lineIn{from{opacity:0;transform:translateX(-4px)}to{opacity:1;transform:none}}
.term-line.ok{color:#34d399}
.term-line.run{color:#8be9fd}
.term-line.sys{color:#a78bfa; font-weight:600}
.term-line.warn{color:#fbbf24}
.term-line.fail{color:#fb7185}
.term-line.dim{color:#64748b}
.term-cursor{display:inline-block; width:8px; height:15px; margin-left:2px; background:#8be9fd; vertical-align:-2px; box-shadow:0 0 8px #8be9fd; animation:blink .9s steps(1) infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}