:root{
  --bg:#0e1116; --panel:#161b22; --line:#262d38; --fg:#e6edf3; --muted:#8b949e;
  --accent:#e5a00d;            /* Plex amber */
  --accent-fg:#1a1205;
  --ok:#2ea043; --warn:#d29922; --bad:#da3633;
  --radius:12px;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-text-size-adjust:100%;
}
.wrap{max-width:680px; margin:0 auto; padding:32px 20px 64px}
.wrap.wide{max-width:920px}
header.site{display:flex; align-items:center; gap:12px; margin-bottom:28px}
header.site .dot{width:10px; height:10px; border-radius:50%; background:var(--accent)}
header.site h1{font-size:17px; margin:0; font-weight:600; letter-spacing:.2px}
header.site .spacer{flex:1}
header.site a{color:var(--muted); font-size:14px; text-decoration:none}
header.site a:hover{color:var(--fg)}

h2{font-size:26px; margin:0 0 10px; line-height:1.25}
p.lead{color:var(--muted); margin:0 0 26px}

.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:22px; margin-bottom:18px}
.card h3{margin:0 0 12px; font-size:15px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:600}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:var(--accent); color:var(--accent-fg); border:0; cursor:pointer;
  font:600 16px/1 inherit; padding:15px 22px; border-radius:10px;
  text-decoration:none; width:100%;
}
.btn:hover{filter:brightness(1.08)}
.btn.secondary{background:transparent; color:var(--fg); border:1px solid var(--line)}
.btn.danger{background:var(--bad); color:#fff}
.btn.sm{width:auto; padding:9px 14px; font-size:14px}
.btn[disabled]{opacity:.5; cursor:not-allowed}

.terms{
  background:#0b0e13; border:1px solid var(--line); border-radius:10px;
  padding:18px 20px; max-height:44vh; overflow-y:auto; margin-bottom:18px;
  font-size:15px;
}
.terms h1,.terms h2{font-size:17px; margin:18px 0 8px}
.terms h1:first-child,.terms h2:first-child{margin-top:0}
.terms ul{padding-left:20px}
.terms code{background:#161b22; padding:2px 5px; border-radius:4px; font-size:13px}

label.agree{display:flex; gap:12px; align-items:flex-start; cursor:pointer; margin-bottom:18px}
label.agree input{margin-top:5px; width:18px; height:18px; accent-color:var(--accent); flex:none}

.who{display:flex; align-items:center; gap:12px; margin-bottom:18px}
.who img{width:44px; height:44px; border-radius:50%; background:var(--line)}
.who .n{font-weight:600}
.who .e{color:var(--muted); font-size:14px; word-break:break-all}

.badge{display:inline-block; padding:4px 11px; border-radius:999px; font-size:12px;
       font-weight:700; letter-spacing:.05em; text-transform:uppercase}
.badge.pending{background:rgba(210,153,34,.16); color:var(--warn)}
.badge.approved{background:rgba(46,160,67,.16); color:var(--ok)}
.badge.declined{background:rgba(218,54,51,.16); color:var(--bad)}

.steps{list-style:none; padding:0; margin:0}
.steps li{display:flex; gap:12px; padding:11px 0; border-bottom:1px solid var(--line)}
.steps li:last-child{border-bottom:0}
.steps .mark{flex:none; width:22px; text-align:center}
.steps .done{color:var(--ok)} .steps .wait{color:var(--muted)}

table{width:100%; border-collapse:collapse; font-size:14px}
th,td{text-align:left; padding:11px 10px; border-bottom:1px solid var(--line); vertical-align:middle}
th{color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.06em}
td.actions{white-space:nowrap; display:flex; gap:8px}
.err{background:rgba(218,54,51,.1); border:1px solid rgba(218,54,51,.4); color:#ff9992;
     padding:11px 14px; border-radius:8px; margin-bottom:16px; font-size:14px}
.muted{color:var(--muted); font-size:13px}
.tablewrap{overflow-x:auto}
@media (max-width:560px){ h2{font-size:22px} .wrap{padding:22px 15px 48px} }