:root{
  --bg:#101108; --bg-2:#15170D; --surface:#1A1D11; --surface-2:#232818;
  --cream:#FFECD1; --text:#CECCB9; --muted:#8C8D78;
  --olive:#3F4D2E; --sage:#A9C97E; --sage-2:#C6DDA6; --sage-soft:rgba(169,201,126,.12);
  --amethyst:#9577D6; --garnet:#A8302B;
  --line:rgba(255,236,209,.09); --line-2:rgba(255,236,209,.17); --line-sage:rgba(169,201,126,.34);
  --serif:'Fraunces',Georgia,serif; --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Consolas,monospace; --display:'Orbitron','Inter',sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.55;font-size:16px;display:flex;flex-direction:column;min-height:100vh}
a{color:var(--sage);text-decoration:none}
a:hover{color:var(--sage-2)}

.wrap{max-width:1040px;margin:0 auto;padding:0 1.4rem;width:100%}
h1{font-family:var(--display);text-transform:uppercase;font-weight:600;letter-spacing:-.01em;color:var(--cream);font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.15;margin:.2rem 0}
h2{font-family:var(--display);text-transform:uppercase;font-weight:600;color:var(--cream);font-size:1.12rem;margin:0 0 .9rem}
.eyebrow{font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;color:var(--sage);margin:0 0 .3rem}
.eyebrow a{color:var(--muted)}
.sub{color:var(--muted);margin:.4rem 0 1.4rem}
.muted{color:var(--muted)}
.small{font-size:.85rem}

/* nav */
.nav{border-bottom:1px solid var(--line);background:rgba(16,17,8,.85);backdrop-filter:blur(10px);position:sticky;top:0;z-index:20}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:62px}
.brand{display:flex;align-items:center;gap:.55rem;font-family:var(--display);text-transform:uppercase;color:var(--cream);font-weight:700;letter-spacing:.02em}
.brand-dot{color:var(--sage)}
.brand-sub{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;color:var(--muted);text-transform:uppercase;border:1px solid var(--line-2);padding:.15rem .42rem;border-radius:5px}
.nav-links{display:flex;align-items:center;gap:1.3rem;font-family:var(--mono);font-size:.82rem;text-transform:uppercase;letter-spacing:.04em}
.nav-links a{color:var(--text)}
.nav-links a:hover{color:var(--sage)}
.nav-cta{border:1px solid var(--line-sage);padding:.42rem .82rem;border-radius:8px;color:var(--sage)!important}
.nav-cta:hover{background:var(--sage-soft)}

/* layout */
.main{flex:1;padding:2.2rem 0 3rem}
.page-head{margin-bottom:1.4rem}
.row-between{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap}

/* flashes */
.flashes{margin-bottom:1.3rem;display:flex;flex-direction:column;gap:.55rem}
.flash{padding:.72rem 1rem;border-radius:9px;border:1px solid var(--line-2);font-size:.92rem;background:var(--surface);word-break:break-word}
.flash-success{border-color:var(--line-sage);background:var(--sage-soft);color:var(--sage-2)}
.flash-error{border-color:rgba(168,48,43,.5);background:rgba(168,48,43,.12);color:#e8a39f}
.flash-info{border-color:var(--line-2)}

/* cards */
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:1.4rem 1.5rem;margin-bottom:1.2rem}
.narrow{max-width:540px}
.center{text-align:center}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--mono);text-transform:uppercase;letter-spacing:.04em;font-size:.8rem;font-weight:500;padding:.72rem 1.3rem;border-radius:10px;border:1px solid transparent;cursor:pointer;transition:.15s;text-decoration:none}
.btn-primary{background:var(--sage);color:#101108;border-color:var(--sage)}
.btn-primary:hover{background:var(--sage-2);color:#101108;transform:translateY(-1px)}
.btn-ghost{background:transparent;border-color:var(--line-2);color:var(--cream)}
.btn-ghost:hover{border-color:var(--sage);color:var(--sage);background:var(--sage-soft)}
.btn-block{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.1rem}
.actions form{margin:0}

/* forms */
.field{margin-bottom:1rem;display:block}
.field>label{display:block;font-size:.78rem;color:var(--muted);margin-bottom:.35rem;font-family:var(--mono);text-transform:uppercase;letter-spacing:.05em}
.field input{width:100%;background:var(--bg);border:1px solid var(--line-2);color:var(--text);padding:.72rem .85rem;border-radius:9px;font-family:var(--sans);font-size:.98rem}
.field input:focus{outline:none;border-color:var(--sage);box-shadow:0 0 0 3px var(--sage-soft)}
.field.static{display:flex;justify-content:space-between;gap:1rem;align-items:center;border-bottom:1px solid var(--line);padding:.55rem 0;margin:0}
.field .lbl{color:var(--muted);font-family:var(--mono);text-transform:uppercase;font-size:.72rem;letter-spacing:.05em}
.check{display:flex;align-items:center;gap:.5rem;margin:.2rem 0 1.1rem;font-size:.9rem;color:var(--muted)}
.check input{width:auto}
.err{display:block;color:#e8a39f;font-size:.82rem;margin-top:.3rem}
.hint{color:var(--muted);font-size:.82rem;margin:-.4rem 0 1rem}

/* auth / hero cards */
.auth-card,.hero-card{max-width:420px;margin:2rem auto;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:2rem}
.hero-card{max-width:560px;text-align:center}
.auth-foot{margin-top:1.1rem;font-size:.9rem;text-align:center}

/* dashboard */
.status-card .status-row{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.plan-name{font-family:var(--display);text-transform:uppercase;color:var(--cream);font-size:1.2rem;margin:.2rem 0}
.k{font-family:var(--mono);text-transform:uppercase;font-size:.7rem;letter-spacing:.1em;color:var(--muted);margin:0}
.empty-card{text-align:center;padding:2.4rem 1.5rem}
.empty-card h2{margin-bottom:.4rem}

/* pills */
.pill{display:inline-block;font-family:var(--mono);text-transform:uppercase;font-size:.66rem;letter-spacing:.06em;padding:.24rem .58rem;border-radius:20px;border:1px solid var(--line-2);color:var(--muted)}
.pill-active{color:var(--sage);border-color:var(--line-sage);background:var(--sage-soft)}
.pill-invited{color:var(--amethyst);border-color:rgba(149,119,214,.4)}
.pill-disabled,.pill-cancelled{color:#e8a39f;border-color:rgba(168,48,43,.4)}
.pill-past_due,.pill-pending{color:#dcc07a;border-color:rgba(220,192,122,.4)}

/* tiers */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.1rem}
.tier{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:1.5rem;display:flex;flex-direction:column;position:relative}
.tier.featured{border-color:var(--line-sage);box-shadow:0 0 0 1px var(--line-sage),0 18px 40px -24px rgba(169,201,126,.45)}
.tier .badge{position:absolute;top:-11px;left:1.4rem;background:var(--sage);color:#101108;font-family:var(--mono);text-transform:uppercase;font-size:.62rem;letter-spacing:.08em;padding:.22rem .6rem;border-radius:20px;font-weight:700}
.t-name{font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--sage);font-size:.82rem;margin:.2rem 0}
.t-price{font-family:var(--display);font-size:1.7rem;color:var(--cream);margin:.1rem 0}
.t-price small{font-size:.9rem;color:var(--muted);font-family:var(--sans)}
.t-tag{font-size:.88rem;min-height:2.5em}
.tier ul{list-style:none;padding:0;margin:1rem 0 1.3rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.tier li{padding-left:1.45rem;position:relative;font-size:.92rem}
.tier li::before{content:"✓";position:absolute;left:0;color:var(--sage);font-weight:700}

/* tables */
.table-card{padding:0;overflow:hidden}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:.85rem 1.2rem;border-bottom:1px solid var(--line);font-size:.92rem}
th{font-family:var(--mono);text-transform:uppercase;font-size:.68rem;letter-spacing:.06em;color:var(--muted);background:var(--bg-2)}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--sage-soft)}
td a{color:var(--cream)}
td a:hover{color:var(--sage)}

/* grid */
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.2rem;align-items:start}

/* footer */
.footer{border-top:1px solid var(--line);padding:1.4rem 0;color:var(--muted);font-size:.82rem}
.foot-inner{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.footer a{color:var(--muted)}
.footer a:hover{color:var(--sage)}

@media(max-width:560px){.nav-links{gap:.85rem}.brand-sub{display:none}}