/* CoreNet Hub panel — shares the marketing site's palette. */
:root{
  --ph3:#4DFFCA;--ph4:#00F5A8;--ph5:#00D68F;--ph6:#00A86E;
  --au3:#8099FF;--au4:#526BFF;
  --n50:#F0F2F5;--n100:#E1E5ED;--n200:#C3CBD9;--n300:#96A3B8;
  --n400:#6B7A94;--n500:#4A5568;--n600:#2D3748;--n700:#1A2235;
  --n800:#0E1521;--n900:#07090F;--n950:#030507;
  --solar:#FFD166;--ember:#FF6B35;
  --bg:var(--n950);--panel:#0A111B;--bd:#182233;--bd2:#243149;
  --t1:var(--n50);--t2:var(--n300);--t3:var(--n400);--ta:var(--ph4);
  --okbg:rgba(0,245,168,.08);--okbd:rgba(0,245,168,.22);
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --eout:cubic-bezier(0,0,.2,1);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(900px 500px at 12% -10%,rgba(0,245,168,.06),transparent 60%),
    radial-gradient(800px 500px at 100% 0%,rgba(82,107,255,.05),transparent 55%),
    var(--bg);
  min-height:100vh;color:var(--t1);
  font:15px/1.55 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--ta);text-decoration:none}
a:hover{text-decoration:underline}
.mono{font-family:var(--mono)}

/* ── shell ── */
.top{position:sticky;top:0;z-index:30;background:rgba(7,9,15,.9);backdrop-filter:blur(18px);
  border-bottom:1px solid var(--bd)}
.top__bar{display:flex;align-items:center;gap:14px;min-height:60px;padding:0 18px}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;letter-spacing:-.02em;font-size:16px;
  color:var(--t1);white-space:nowrap}
.brand:hover{text-decoration:none}
.brand img{width:26px;height:26px;border-radius:7px;display:block;flex:0 0 auto}
.brand span{color:var(--ta)}
.top .sp{flex:1;min-width:0}

.top__nav{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.top__nav a{padding:8px 12px;border-radius:8px;color:var(--t2);font-size:13.5px;font-weight:500;white-space:nowrap}
.top__nav a:hover{background:#111a27;color:var(--t1);text-decoration:none}
.top__nav a.on{background:var(--okbg);color:var(--ta);box-shadow:inset 0 0 0 1px var(--okbd)}

.who{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--t3);min-width:0}
.who .whoami{color:var(--t2);font-weight:600;max-width:20ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who--mobile{display:none}

.menu-btn{display:none;align-items:center;justify-content:center;width:44px;height:44px;flex:0 0 auto;
  border:1px solid var(--bd2);border-radius:10px;background:transparent;color:var(--t2);cursor:pointer}
.menu-btn:hover{color:var(--t1);background:#111a27}

/* Wide screens: one row, links between the brand and the account block. */
@media(min-width:900px){
  .top__bar{gap:18px}
  .top__nav{order:-1;margin-left:6px}
  .top{display:flex;align-items:center;padding:0 4px}
  .top__bar{flex:1;min-width:0}
}

/* Below that the links collapse behind the menu button. Seven customer links
   — eleven for staff — cannot share a row with the account block on a phone. */
@media(max-width:899px){
  .top{display:block}
  .top__nav{display:none;flex-direction:column;align-items:stretch;gap:2px;
    padding:8px 12px 14px;border-top:1px solid var(--bd)}
  .top.open .top__nav{display:flex}
  .top__nav a{padding:12px 14px;font-size:15px;min-height:44px;display:flex;align-items:center}
  .menu-btn{display:inline-flex}
  .who--desktop{display:none}
  .who--mobile{display:flex;margin-top:10px;padding-top:12px;border-top:1px solid var(--bd);
    justify-content:space-between;flex-wrap:wrap;gap:12px}
  .who--mobile .whoami{max-width:none;flex:1}
}

.wrap{max-width:1080px;margin:0 auto;padding:30px 22px 70px}
.wrap.narrow{max-width:520px}
@media(max-width:520px){.wrap{padding:22px 16px 56px}}
h1{font-size:1.6rem;font-weight:800;letter-spacing:-.03em;margin:0 0 4px;overflow-wrap:anywhere}
h2{font-size:1.02rem;font-weight:700;letter-spacing:-.01em;margin:30px 0 12px}
.sub{color:var(--t3);font-size:14px;margin:0 0 22px}

/* ── surfaces ── */
.card{background:linear-gradient(180deg,#0B1420,#080E17);border:1px solid var(--bd);
  border-radius:14px;padding:20px}
.card+.card{margin-top:14px}
.grid{display:grid;gap:14px}
@media(min-width:560px){.g4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:720px){.g2,.g3{grid-template-columns:repeat(2,1fr)}}
/* Four across only once each tile has room to breathe. */
@media(min-width:1000px){.g4{grid-template-columns:repeat(4,1fr)}.g3{grid-template-columns:repeat(3,1fr)}}

.stat{background:linear-gradient(180deg,#0B1420,#080E17);border:1px solid var(--bd);
  border-radius:14px;padding:16px 18px}
.stat .k{font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--t3);font-weight:700}
.stat .v{font-size:1.75rem;font-weight:800;letter-spacing:-.04em;margin-top:6px;color:var(--t1)}
.stat .v.acc{color:var(--ta)}

/* ── forms ── */
label{display:block;font-size:12px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--t3);margin:0 0 7px}
input,select,textarea{width:100%;height:44px;padding:0 13px;color:var(--t1);
  background:#070C14;border:1px solid var(--bd2);border-radius:10px;font:inherit;font-size:14.5px}
textarea{height:auto;padding:11px 13px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ph6);
  box-shadow:0 0 0 3px rgba(0,245,168,.13)}
input::placeholder{color:var(--n500)}
.field{margin-bottom:15px}
.hint{font-size:12.5px;color:var(--t3);margin-top:6px;text-transform:none;letter-spacing:0;font-weight:400}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;
  padding:0 20px;border:0;border-radius:10px;font:inherit;font-size:14.5px;font-weight:700;
  cursor:pointer;background:linear-gradient(135deg,var(--ph4),var(--ph6));color:#04120C;
  white-space:nowrap;transition:filter .15s,transform .15s}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;filter:none}
.btn.full{width:100%}
.btn.ghost{background:transparent;color:var(--t2);box-shadow:inset 0 0 0 1px var(--bd2)}
.btn.ghost:hover{color:var(--t1);background:#111a27}
.btn.sm{height:34px;padding:0 13px;font-size:13px;border-radius:8px}
.btn.danger{background:transparent;color:#FF8A6B;box-shadow:inset 0 0 0 1px rgba(255,107,53,.35)}

/* ── feedback ── */
.msg{padding:11px 14px;border-radius:10px;font-size:13.5px;margin-bottom:16px;display:none}
.msg.show{display:block}
.msg.err{background:rgba(255,107,53,.1);border:1px solid rgba(255,107,53,.32);color:#FFB49B}
.msg.ok{background:var(--okbg);border:1px solid var(--okbd);color:var(--ph3)}
/* Something is scheduled that the customer may still want to undo. */
.msg.warn{background:rgba(255,209,102,.09);border:1px solid rgba(255,209,102,.3);color:var(--solar)}
.empty{padding:34px 20px;text-align:center;color:var(--t3);font-size:14px;
  border:1px dashed var(--bd2);border-radius:14px}

/* ── tables ── */
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{text-align:left;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--t3);font-weight:700;padding:0 12px 10px;border-bottom:1px solid var(--bd)}
.tbl td{padding:13px 12px;border-bottom:1px solid #101a28;color:var(--t2);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl .name{color:var(--t1);font-weight:600}
.scroll-x{overflow-x:auto}

/* ── pills ── */
.pill{display:inline-flex;align-items:center;gap:6px;height:23px;padding:0 10px;border-radius:99px;
  font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  background:#111a27;color:var(--t2);white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.active,.pill.paid{background:var(--okbg);color:var(--ph4)}
.pill.pending{background:rgba(255,209,102,.11);color:var(--solar)}
.pill.provisioning{background:rgba(82,107,255,.13);color:var(--au3)}
.pill.cancelled,.pill.suspended{background:rgba(255,107,53,.11);color:#FF8A6B}

/* ── checkout ── */
.co{display:grid;gap:18px}
@media(min-width:900px){.co{grid-template-columns:1.25fr .85fr;align-items:start}
  .co .summary{position:sticky;top:82px}}
.spec{display:flex;justify-content:space-between;gap:14px;padding:9px 0;
  border-bottom:1px solid #101a28;font-size:13.5px}
.spec:last-of-type{border-bottom:0}
.spec .k{color:var(--t3)}
.spec .v{color:var(--t1);font-weight:600;text-align:right}
.total{display:flex;align-items:baseline;justify-content:space-between;
  margin-top:16px;padding-top:16px;border-top:1px solid var(--bd)}
.total .lbl{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);font-weight:700}
.total .amt{font-size:2rem;font-weight:800;letter-spacing:-.05em;color:var(--ta)}
.total .amt small{font-size:.9rem;font-weight:600;color:var(--t3);letter-spacing:0}

/* term picker */
.terms{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.term{position:relative}
.term input{position:absolute;opacity:0;pointer-events:none}
.term span{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 6px;
  border:1px solid var(--bd2);border-radius:11px;cursor:pointer;font-size:13.5px;font-weight:600;
  color:var(--t2);transition:border-color .15s,background .15s}
.term span em{font-style:normal;font-size:11px;color:var(--ph4);font-weight:700}
.term input:checked+span{border-color:var(--ph5);background:var(--okbg);color:var(--t1)}
.term input:focus-visible+span{box-shadow:0 0 0 3px rgba(0,245,168,.16)}

.steps{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--t3);margin-bottom:20px}
.steps b{color:var(--ta)}
.copy{cursor:pointer;border:0;background:none;color:var(--t3);font:inherit;font-size:12px;padding:2px 4px}
.copy:hover{color:var(--ta)}

/* ── notification bell ── */
.bell{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;flex:0 0 auto;border-radius:9px;color:var(--t3)}
.bell svg{flex:0 0 auto}
.bell:hover{background:#111a27;color:var(--t1);text-decoration:none}
.bell .dot{position:absolute;top:6px;right:6px;width:7px;height:7px;border-radius:50%;
  background:var(--ph4);box-shadow:0 0 0 2px var(--bg)}

/* ── ticket thread ── */
.post{border:1px solid var(--bd);border-radius:12px;padding:15px 17px;margin-bottom:11px;
  background:linear-gradient(180deg,#0B1420,#080E17)}
.post.staff{border-color:rgba(0,245,168,.24);background:linear-gradient(180deg,#081814,#06120F)}
.post.internal{border-style:dashed;border-color:rgba(255,209,102,.4);background:rgba(255,209,102,.05)}
.post .meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:9px;
  font-size:12px;color:var(--t3)}
.post .meta b{color:var(--t1);font-size:13px;font-weight:700}
.post .body{font-size:14px;color:var(--t2);line-height:1.6;word-break:break-word}

/* ── invoice document ── */
.doc{background:linear-gradient(180deg,#0B1420,#080E17);border:1px solid var(--bd);
  border-radius:14px;padding:26px}
.doc-head{display:flex;justify-content:space-between;gap:22px;flex-wrap:wrap;
  padding-bottom:20px;border-bottom:1px solid var(--bd);margin-bottom:20px}
.doc-head h1{margin:0 0 4px}
.doc-addr{font-size:13px;color:var(--t2);line-height:1.65}
.doc-addr .k{display:block;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--t3);font-weight:700;margin-bottom:5px}
.totals{margin-left:auto;max-width:320px;margin-top:16px}
.totals .row{display:flex;justify-content:space-between;gap:20px;padding:7px 0;font-size:14px;color:var(--t2)}
.totals .row.grand{border-top:1px solid var(--bd);margin-top:7px;padding-top:13px;
  font-size:1.15rem;font-weight:800;color:var(--t1)}
.totals .row.grand span:last-child{color:var(--ta)}

/* ── announcements ── */
.ann{border-left:3px solid var(--au4);padding:12px 16px;border-radius:0 11px 11px 0;
  background:#0B1420;margin-bottom:10px}
.ann.maintenance{border-left-color:var(--solar)}
.ann.incident{border-left-color:var(--ember)}
.ann h3{margin:0 0 5px;font-size:14.5px;font-weight:700;color:var(--t1)}
.ann p{margin:0;font-size:13.5px;color:var(--t2);line-height:1.6}
.ann time{display:block;margin-top:7px;font-size:11.5px;color:var(--t3)}

/* ── misc ── */
.row-actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.split{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.unread{border-left:3px solid var(--ph4)}
.check{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--t2);
  text-transform:none;letter-spacing:0;font-weight:500;margin:0 0 13px}
.check input{width:17px;height:17px;accent-color:var(--ph4);flex:0 0 auto}
.pill.high,.pill.urgent{background:rgba(255,107,53,.11);color:#FF8A6B}
.pill.open,.pill.customer_reply{background:rgba(255,209,102,.11);color:var(--solar)}
.pill.staff_reply,.pill.answered{background:var(--okbg);color:var(--ph4)}
.pill.closed,.pill.low{background:#111a27;color:var(--t3)}
.pill.unpaid{background:rgba(255,209,102,.11);color:var(--solar)}
.pill.overdue,.pill.refunded{background:rgba(255,107,53,.11);color:#FF8A6B}
.pill.requested,.pill.in_progress{background:rgba(82,107,255,.13);color:var(--au3)}
.pill.done{background:var(--okbg);color:var(--ph4)}
.pill.failed{background:rgba(255,107,53,.11);color:#FF8A6B}

/* A domain can be far longer than a machine hostname, and monospace does not
   break on its own — let card titles wrap rather than push the card wide. */
.card h2.mono,.card h2 .mono{overflow-wrap:anywhere;min-width:0}

/* ── usage meter ── */
.bar{height:6px;border-radius:999px;background:#111a27;overflow:hidden;margin:-4px 0 10px}
.bar span{display:block;height:100%;border-radius:999px;background:var(--ph5);transition:width .3s var(--eout)}
.bar.warm span{background:var(--solar)}
.bar.hot span{background:var(--ember)}
.card.hi{border-color:var(--ph6)}

/* ── modal sheet ── */
dialog.sheet{width:min(540px,calc(100vw - 32px));padding:0;border:1px solid var(--bd2);border-radius:14px;
  background:var(--panel);color:var(--t1);max-height:calc(100dvh - 48px)}
dialog.sheet::backdrop{background:rgba(3,5,7,.72);backdrop-filter:blur(3px)}
dialog.sheet .sheet__body{padding:22px}
dialog.sheet h2{margin-top:0}
dialog.sheet .row-actions{margin-top:18px}
@media (max-width:560px){
  dialog.sheet .sheet__body{padding:18px}
  /* Keep the desktop order: the way out first, the commitment last. */
  dialog.sheet .row-actions{flex-direction:column;align-items:stretch}
  dialog.sheet .row-actions .btn{width:100%}
}

@media print{
  .top,.no-print{display:none!important}
  body{background:#fff;color:#000}
  .doc{border-color:#ccc;background:#fff;color:#000}
  .doc .v,.doc .name,.totals .row.grand{color:#000!important}
}

/* ── addon / option picker ── */
.opt{display:flex;align-items:flex-start;gap:12px;padding:13px 15px;border:1px solid var(--bd2);
  border-radius:11px;margin-bottom:9px;cursor:pointer;transition:border-color .15s,background .15s}
.opt:hover{border-color:var(--bd2);background:#0d1724}
.opt.on{border-color:var(--ph5);background:var(--okbg)}
.opt input[type=checkbox]{width:18px;height:18px;accent-color:var(--ph4);flex:0 0 auto;margin-top:2px}
.opt .body{flex:1;min-width:0}
.opt .name{font-size:14px;font-weight:700;color:var(--t1);text-transform:none;letter-spacing:0;margin:0}
.opt .desc{font-size:12.5px;color:var(--t3);margin:3px 0 0;line-height:1.5}
/* A picker can be a <label> so the whole row is clickable — undo the form-label
   typography that would otherwise shout the description in caps. */
label.opt{text-transform:none;letter-spacing:0;font-weight:400;font-size:15px;color:var(--t1);margin:0 0 9px}
.opt .price{font-size:13.5px;font-weight:700;color:var(--ta);white-space:nowrap;text-align:right}
.opt .price small{display:block;font-size:11px;color:var(--t3);font-weight:500}
.opt .qty{width:66px;height:32px;padding:0 8px;font-size:13px;margin-top:8px}

/* ── cards ── */
.card-row{display:flex;align-items:center;gap:13px;padding:13px 15px;border:1px solid var(--bd);
  border-radius:11px;margin-bottom:9px}
.card-row .brand{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 9px;border-radius:6px;background:#111a27;color:var(--t2)}
.card-row .num{font-family:var(--mono);font-size:13.5px;color:var(--t1)}
.card-row .exp{font-size:12.5px;color:var(--t3)}
.card-row .sp{flex:1}

/* ── 2FA ── */
.qr{display:block;margin:0 auto 16px;border-radius:11px;background:#fff;padding:9px;width:220px;height:220px}
.codes{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:14px 0}
.codes code{font-family:var(--mono);font-size:13px;padding:9px 11px;border-radius:8px;
  background:#070C14;border:1px solid var(--bd2);color:var(--ph3);text-align:center}

/* ── attachments ── */
.files{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px}
.files a{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:9px;
  border:1px solid var(--bd2);font-size:12.5px;color:var(--t2);background:#0a121c}
.files a:hover{color:var(--t1);border-color:var(--ph6);text-decoration:none}
.files .sz{color:var(--t3);font-size:11.5px}
input[type=file]{padding:9px 11px;height:auto;font-size:13px;color:var(--t2)}
input[type=file]::file-selector-button{margin-right:11px;padding:6px 12px;border-radius:7px;
  border:1px solid var(--bd2);background:#111a27;color:var(--t2);font:inherit;font-size:12.5px;cursor:pointer}

/* ── admin tabs ────────────────────────────────────────────────────────── */
.tabs{display:flex;gap:7px;margin:0 0 20px;flex-wrap:wrap}
.tab{height:34px;padding:0 15px;border-radius:9px;border:1px solid var(--bd2);background:transparent;
  color:var(--t2);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;white-space:nowrap}
.tab:hover{color:var(--t1);background:#111a27}
.tab.on{background:var(--okbg);border-color:var(--okbd);color:var(--ta)}
.tab .n{margin-left:6px;padding:1px 6px;border-radius:99px;background:var(--ember);
  color:#1a0a04;font-size:10.5px;font-weight:800}
.tbl td select,.tbl td input{height:32px;font-size:13px;padding:0 8px;min-width:112px}
/* The box stays table-sized; the label around it carries the hit area, so a
   finger has 44px to aim at without a giant checkbox in a dense grid. */
.cell-check-wrap{display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;margin:-6px 0;cursor:pointer}
.tbl td input.cell-check{width:20px;height:20px;min-width:0;padding:0;margin:0;accent-color:var(--ph4)}

/* On a phone the tab strip scrolls sideways instead of stacking into a wall. */
@media(max-width:640px){
  .tabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;
    scrollbar-width:none;-ms-overflow-style:none}
  .tabs::-webkit-scrollbar{display:none}
}

/* ── accessibility & touch ─────────────────────────────────────────────── */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--ph4);outline-offset:2px;border-radius:6px}

/* iOS Safari zooms the whole page when a focused field is under 16px. */
@media(max-width:899px){
  input,select,textarea,
  input[type=file],
  .tbl td input,.tbl td select,
  .opt .qty{font-size:16px}
  .tbl td input,.tbl td select,.opt .qty{height:40px}
}

/* Fingers need more room than a mouse pointer. */
@media(pointer:coarse){
  .btn.sm{height:40px;padding:0 15px}
  .bell{width:44px;height:44px}
  .tabs .tab{height:44px}
  .files a{padding:10px 13px}
  .opt input[type=checkbox],.opt input[type=radio],.check input{width:22px;height:22px}
  /* The whole label is the hit area, so it carries the 44px minimum. */
  .check{min-height:44px}
}

/* ── narrow-screen layout repairs ──────────────────────────────────────── */
@media(max-width:640px){
  h1{font-size:1.35rem}
  h2{margin:24px 0 10px}
  .card,.stat{padding:16px}
  .doc{padding:18px}
  .terms{grid-template-columns:1fr;gap:8px}
  .term span{flex-direction:row;justify-content:space-between;padding:13px 15px}
  .codes{grid-template-columns:1fr}
  .totals{max-width:none}

  /* Stacked rows instead of squeezed columns. */
  .card-row{flex-wrap:wrap;row-gap:10px}
  .card-row .sp{flex-basis:100%;height:0}
  .opt{flex-wrap:wrap}
  .opt .price{text-align:left}
  .row-actions{justify-content:flex-start}
  .split{align-items:flex-start}
}

/* Long, unbreakable strings — emails, hostnames, invoice numbers. */
.tbl td,.spec .v,.doc-addr,.post .body,.ann p{overflow-wrap:anywhere}
.who .whoami{overflow-wrap:anywhere}