/* CrashCompute — shared shell for login, pricing, and account pages.
   Tokens mirror the app in index.html so the surfaces read as one product. */

:root{
  --paper:#E7E3D7;
  --sheet:#F4F2EC;
  --ink:#16191C;
  --graphite:#555D65;
  --rod:#C99503;
  --rod-ink:#7E5D00;
  --rod-wash:#F6E9B8;
  --paint:#B8401A;
  --good:#1F7A4D;
  --rule:rgba(22,25,28,.14);
  --rule-soft:rgba(22,25,28,.07);
  --shadow:0 1px 0 rgba(22,25,28,.06), 0 10px 28px -18px rgba(22,25,28,.55);
}
:root[data-theme="night"]{
  --paper:#12161B;
  --sheet:#1A2028;
  --ink:#E6E2D7;
  --graphite:#929BA5;
  --rod:#F0BE2E;
  --rod-ink:#F0BE2E;
  --rod-wash:rgba(240,190,46,.15);
  --paint:#E8703F;
  --good:#4FBF87;
  --rule:rgba(230,226,215,.16);
  --rule-soft:rgba(230,226,215,.08);
  --shadow:0 1px 0 rgba(0,0,0,.4), 0 12px 30px -20px #000;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
a{color:inherit}
button,input,select{font:inherit;color:inherit}
button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}

/* ---------- type ---------- */
.mono{font-family:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;font-variant-numeric:tabular-nums}
.eyebrow{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:10.5px;letter-spacing:.19em;text-transform:uppercase;
  font-weight:600;color:var(--graphite);margin:0;
}
h1{font-weight:800;letter-spacing:-.035em;line-height:1.02;margin:0;text-wrap:balance}
h2{font-weight:800;letter-spacing:-.025em;line-height:1.1;margin:0;text-wrap:balance}
h3{font-weight:800;letter-spacing:-.015em;margin:0}
p{margin:0}

/* ---------- brand mark ---------- */
.mark{display:block;width:auto;flex-shrink:0;color:var(--ink);overflow:visible}
.mark-sm{height:26px}
.mark-lg{height:76px}

.lockup{display:grid;justify-items:center;gap:16px;text-align:center}
.lockup .name{font-weight:800;font-size:27px;letter-spacing:-.03em;line-height:1}
.lockup .bar{width:58px;height:2px;background:var(--rod)}
.lockup .sub{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--graphite);font-weight:600;
}

/* ---------- masthead ---------- */
.masthead{
  position:sticky;top:0;z-index:40;
  background:var(--paper);
  border-bottom:1px solid var(--rule);
  display:flex;align-items:center;gap:14px;
  padding:11px 18px;
}
.masthead .brand{display:flex;align-items:center;gap:11px;text-decoration:none;min-width:0}
.masthead .brand-name{font-weight:800;font-size:15.5px;letter-spacing:-.015em;white-space:nowrap}
.masthead nav{margin-left:auto;display:flex;align-items:center;gap:7px;flex-wrap:wrap}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid var(--rule);background:transparent;color:var(--graphite);
  padding:9px 14px;font-size:12px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  cursor:pointer;text-decoration:none;border-radius:2px;
  min-height:40px;transition:border-color .12s,color .12s,background .12s;
}
.btn:hover{color:var(--ink);border-color:var(--ink)}
.btn:focus-visible{outline:2px solid var(--rod);outline-offset:2px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-primary:hover{background:var(--rod);color:var(--ink);border-color:var(--rod)}
.btn-rod{background:var(--rod);color:#16191C;border-color:var(--rod)}
.btn-rod:hover{filter:brightness(1.07);color:#16191C}
.btn-block{width:100%}
.btn-danger{color:var(--paint);border-color:var(--rule)}
.btn-danger:hover{border-color:var(--paint);color:var(--paint)}

/* ---------- cards & surfaces ---------- */
.card{background:var(--sheet);border:1px solid var(--rule);padding:22px}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}
.wrap-narrow{max-width:460px;margin:0 auto;padding:0 22px}

/* ---------- forms ---------- */
.field{display:grid;gap:6px;margin-bottom:14px}
.field label{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:var(--graphite);
}
.field input,.field select{
  width:100%;padding:11px 12px;font-size:16px;
  background:var(--paper);color:var(--ink);
  border:1.5px solid var(--rule);border-radius:2px;
}
.field input:focus,.field select:focus{outline:none;border-color:var(--rod)}
.field .hint{font-size:12px;color:var(--graphite)}

.notice{
  padding:11px 13px;border-left:3px solid var(--paint);
  background:var(--sheet);font-size:13.5px;line-height:1.5;margin-bottom:16px;
}
.notice.ok{border-left-color:var(--good)}
.notice[hidden]{display:none}

.divider{display:flex;align-items:center;gap:12px;margin:20px 0;color:var(--graphite)}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--rule)}
.divider span{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
}

/* ---------- badges ---------- */
.badge{
  display:inline-block;
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  padding:4px 8px;border:1px solid var(--rule);border-radius:2px;color:var(--graphite);
}
.badge-rod{background:var(--rod);color:#16191C;border-color:var(--rod)}
.badge-good{color:var(--good);border-color:var(--good)}
.badge-warn{color:var(--paint);border-color:var(--paint)}

/* ---------- tables ---------- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.grid{width:100%;border-collapse:collapse;font-size:13.5px}
table.grid th,table.grid td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--rule-soft)}
table.grid thead th{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--graphite);font-weight:600;border-bottom:1px solid var(--rule);
}
table.grid tbody tr:last-child td{border-bottom:0}

/* ---------- footer ---------- */
.site-foot{
  border-top:1px solid var(--rule);margin-top:56px;padding:24px 0 48px;
  font-size:13px;color:var(--graphite);
}
.site-foot a{font-weight:600}

.skip-link{
  position:absolute;left:12px;top:-48px;z-index:100;
  background:var(--ink);color:var(--paper);padding:8px 12px;
  font-size:12px;font-weight:700;text-decoration:none;letter-spacing:.06em;
}
.skip-link:focus{top:12px}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}