@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');
:root {
  --bg: #0a0a0f;
  --bg2: #12121a;
  --card: #171722;
  --border: #26263a;
  --text: #e8e8f2;
  --muted: #8a8aa3;
  --accent: #7c6cff;
  --accent2: #4fd1c5;
  --green: #34d399;
  --yellow: #fbbf24;
  --red: #f87171;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(124,108,255,.14), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(79,209,197,.10), transparent 60%),
    var(--bg);
  color: var(--text);
  font: 15px/1.55 ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--accent); text-decoration: none; }
button {
  font: inherit; cursor: pointer; border: none; border-radius: 10px;
  padding: 10px 18px; background: var(--accent); color: white; font-weight: 600;
  transition: filter .15s ease;
}
button:hover { filter: brightness(1.12); }
button.ghost { background: transparent; border: 1px solid var(--border); color: var(--text); }
button.danger { background: transparent; border: 1px solid var(--red); color: var(--red); }
button:disabled { opacity: .45; cursor: not-allowed; }
input, textarea {
  width: 100%; font: inherit; color: var(--text);
  background: var(--bg2); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; outline: none; resize: vertical;
}
input:focus, textarea:focus { border-color: var(--accent); }

.nav {
  display: flex; align-items: center; gap: 18px;
  max-width: 1060px; margin: 0 auto; padding: 20px 24px;
}
.brand { font-weight: 800; font-size: 18px; letter-spacing: .3px; }
.brand span { color: var(--accent); }
.nav .spacer { flex: 1; }
.nav a.plain { color: var(--muted); }
.nav a.plain:hover { color: var(--text); }

.wrap { max-width: 1060px; margin: 0 auto; padding: 0 24px 60px; }
.hero { text-align: center; padding: 70px 0 40px; }
.hero h1 { font-size: 44px; line-height: 1.15; letter-spacing: -1px; }
.hero h1 em { font-style: normal; background: linear-gradient(90deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p { color: var(--muted); margin: 16px auto 28px; max-width: 560px; font-size: 17px; }
.hero .cta { display: flex; gap: 12px; justify-content: center; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 30px; }
.card {
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent 40%), var(--card);
  border: 1px solid var(--border); border-radius: 14px; padding: 22px;
}
.card.featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 12px 40px -18px rgba(124,108,255,.5); }
.card h3 { display: flex; justify-content: space-between; align-items: baseline; }
.price { font-size: 26px; font-weight: 800; }
.price small { color: var(--muted); font-weight: 400; font-size: 13px; }
ul.specs { list-style: none; margin: 14px 0 18px; color: var(--muted); }
ul.specs li { padding: 3px 0; }
ul.specs li b { color: var(--text); font-weight: 600; }

.auth-card { max-width: 420px; margin: 60px auto; }
.auth-card form { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.error { color: var(--red); font-size: 14px; min-height: 20px; }

.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .4px; }
.badge.RUNNING { background: rgba(52,211,153,.14); color: var(--green); }
.badge.PENDING, .badge.PROVISIONING { background: rgba(251,191,36,.14); color: var(--yellow); }
.badge.SUSPENDED, .badge.FAILED, .badge.DESTROYING, .badge.DESTROYED { background: rgba(248,113,113,.14); color: var(--red); }
.tier-chip { background: var(--bg2); border: 1px solid var(--border); color: var(--muted); }

.bar { height: 7px; border-radius: 99px; background: var(--bg2); overflow: hidden; }
.bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); }
.metric { margin: 8px 0; }
.metric .lbl { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-bottom: 4px; }

.topbar-actions { display: flex; gap: 10px; align-items: center; }
.instance-row {
  display: flex; align-items: center; gap: 16px; padding: 18px 20px; cursor: pointer;
}
.instance-row:hover { border-color: var(--accent); }
.instance-row .meta { flex: 1; }
.instance-row .meta .name { font-weight: 700; }

.tabs { display: flex; gap: 4px; margin: 22px 0 0; border-bottom: 1px solid var(--border); }
.tab {
  padding: 10px 18px; border-radius: 10px 10px 0 0; color: var(--muted); cursor: pointer; font-weight: 600;
}
.tab.active { color: var(--text); background: var(--card); border: 1px solid var(--border); border-bottom-color: var(--card); }
#terminal { height: 480px; padding: 6px; background: #0b0b12; border-radius: 12px; }
.kv { display: grid; grid-template-columns: 180px 1fr; row-gap: 10px; margin-top: 16px; font-size: 14px; }
.kv dt { color: var(--muted); }
.kv dd { font-family: ui-monospace, monospace; user-select: all; word-break: break-all; }
.actions { display: flex; gap: 10px; margin-top: 24px; flex-wrap: wrap; }
.modal-back {
  position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex;
  align-items: center; justify-content: center; padding: 20px; z-index: 50;
}
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--card); border: 1px solid var(--border); padding: 10px 18px;
  border-radius: 10px; z-index: 99;
}
.section-title { margin-top: 46px; font-size: 22px; }
.empty {
  text-align: center; padding: 60px 20px; border: 1px dashed var(--border);
  border-radius: 14px; color: var(--muted); margin-top: 24px;
}

/* admin dashboard */
.grid.stats { margin-top: 24px; }
.card.stat { display: flex; flex-direction: column; gap: 6px; }
.card.stat strong { font-size: 26px; }
.grid.charts { grid-template-columns: 1fr 1fr; }
.card h3 a { color: var(--accent); }
.table { width: 100%; border-collapse: collapse; margin-top: 14px; }
.table th, .table td { text-align: left; padding: 9px 10px; border-bottom: 1px solid #232936; font-size: 13.5px; }
.table th { color: var(--muted); font-weight: 500; }
@media (max-width: 760px) { .grid.charts { grid-template-columns: 1fr; } }

/* Refined dark interface */
:root { --bg:#080a0f; --bg2:#10141d; --card:#151a25; --border:#293346; --text:#f4f7fc; --muted:#98a4ba; --accent:#7c6cff; --accent2:#3bd5bf; --green:#4cdaa2; --yellow:#f5c65b; --red:#ff7b83; }
body { font-family:Manrope,ui-sans-serif,system-ui,sans-serif; background:radial-gradient(900px 520px at 88% -8%,rgba(107,91,255,.18),transparent 62%),radial-gradient(720px 500px at -10% 82%,rgba(45,205,180,.10),transparent 62%),linear-gradient(135deg,#080a0f,#0a0d14 55%,#090b11); background-attachment:fixed; }
body::before { content:''; position:fixed; inset:0; pointer-events:none; opacity:.34; background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px); background-size:46px 46px; mask-image:linear-gradient(to bottom,black,transparent 72%); }
a { color:#9b8fff; transition:color .18s ease; } a:hover { color:#c0b9ff; }
button { border:1px solid transparent; border-radius:9px; background:linear-gradient(135deg,var(--accent),#6254df); box-shadow:0 6px 18px rgba(100,84,223,.24); transition:transform .18s ease,box-shadow .18s ease,background .18s ease; }
button:hover { filter:none; transform:translateY(-1px); background:linear-gradient(135deg,#9b8fff,#7265e9); box-shadow:0 10px 22px rgba(100,84,223,.34); }
button:active { transform:translateY(0); } button.ghost { background:rgba(255,255,255,.025); border-color:var(--border); box-shadow:none; } button.ghost:hover { background:#1b2230; border-color:#3c4960; }
input,textarea { background:rgba(4,6,10,.46); border-radius:9px; transition:border-color .18s ease,box-shadow .18s ease,background .18s ease; } input:focus,textarea:focus { background:rgba(8,11,17,.82); box-shadow:0 0 0 3px rgba(124,108,255,.14); }
.nav { max-width:1120px; min-height:78px; padding:18px 30px; border-bottom:1px solid rgba(144,160,188,.14); } .brand { color:var(--text); letter-spacing:-.7px; } .brand:hover { color:var(--text); } .nav a.plain { font-weight:600; font-size:14px; }
.wrap { max-width:1120px; padding:0 30px 74px; } .hero { padding:94px 0 52px; } .hero::before { content:'HIGH-PERFORMANCE CLOUD'; display:block; margin-bottom:18px; color:var(--accent2); font-size:11px; font-weight:800; letter-spacing:.18em; } .hero h1 { max-width:800px; margin:auto; font-size:clamp(39px,5.2vw,64px); letter-spacing:-2.8px; } .hero h1 em { background:linear-gradient(100deg,#a99dff,#5be1ce); -webkit-background-clip:text; background-clip:text; } .hero p { max-width:590px; font-size:16px; }
.card { background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.012) 42%),var(--card); border-color:rgba(144,160,188,.16); border-radius:15px; box-shadow:0 1px 0 rgba(255,255,255,.025) inset,0 20px 55px rgba(0,0,0,.28); } .card.featured { overflow:hidden; border-color:rgba(142,126,255,.72); box-shadow:0 0 0 1px rgba(124,108,255,.16),0 20px 48px rgba(76,62,185,.2); } .card.featured::before { content:''; position:absolute; inset:0 0 auto; height:2px; background:linear-gradient(90deg,var(--accent),var(--accent2)); } .card.featured { position:relative; }
.price { margin-top:14px; font-size:29px; letter-spacing:-1px; } ul.specs { margin:18px 0 22px; font-size:14px; } ul.specs li { position:relative; padding:5px 0 5px 19px; } ul.specs li::before { content:'✓'; position:absolute; left:0; color:var(--accent2); font-weight:800; } .section-title { margin-top:38px; letter-spacing:-.7px; }
.badge { padding:3px 9px; font-size:10px; letter-spacing:.06em; } .badge.RUNNING { border:1px solid rgba(69,214,157,.16); } .badge.PENDING,.badge.PROVISIONING { border:1px solid rgba(246,200,95,.14); } .badge.SUSPENDED,.badge.FAILED,.badge.DESTROYING,.badge.DESTROYED { border:1px solid rgba(255,119,125,.14); } .tier-chip { color:#bdb6ff; background:rgba(124,108,255,.12); border:1px solid rgba(124,108,255,.25); }
.instance-row { color:var(--text); transition:transform .18s ease,border-color .18s ease,background .18s ease; } .instance-row:hover { color:var(--text); transform:translateY(-2px); background:linear-gradient(145deg,rgba(124,108,255,.1),rgba(255,255,255,.02)),#171d29; border-color:rgba(124,108,255,.6); }
.tabs { overflow-x:auto; } .tab { font-size:14px; } #terminal { background:#06080d; border:1px solid var(--border); box-shadow:inset 0 0 28px rgba(0,0,0,.38); } .modal-back { background:rgba(2,4,8,.72); backdrop-filter:blur(10px); } .modal-back>.card { max-height:calc(100vh - 40px); overflow-y:auto; box-shadow:0 28px 90px rgba(0,0,0,.52); } .plan-pick { box-shadow:none; transition:background .18s ease,transform .18s ease,border-color .18s ease; } .plan-pick:hover { transform:translateY(-2px); background:#1b2230; border-color:rgba(124,108,255,.65); }
.row { display:flex; align-items:center; gap:12px; } .row.spread { justify-content:space-between; } .table th,.table td { border-bottom-color:rgba(144,160,188,.14); padding:11px 10px; } .table th { font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; } .table tbody tr { transition:background .15s ease; } .table tbody tr:hover { background:rgba(124,108,255,.06); } canvas { display:block; width:100%; height:auto; }
@media (max-width:760px) { .nav { min-height:66px; padding:14px 18px; gap:10px; } .nav .topbar-actions { gap:8px; } .nav .topbar-actions .muted { display:none; } .nav button { padding:8px 11px; font-size:13px; } .wrap { padding:0 18px 50px; } .hero { padding:62px 0 36px; text-align:left; } .hero::before { margin-bottom:12px; } .hero h1 { font-size:39px; letter-spacing:-1.8px; } .hero p { margin:16px 0 25px; font-size:15px; } .hero .cta { justify-content:flex-start; } .card { padding:18px; } .kv { grid-template-columns:1fr; gap:2px; } .table { min-width:630px; } .card:has(.table) { overflow-x:auto; } }
@media (max-width:430px) { .topbar-actions .plain { display:none; } .hero .cta { flex-direction:column; } .hero .cta button { width:100%; } }