:root { color-scheme: dark; --bg:#061a19; --panel:#0e302e; --line:#28605c; --gold:#d5b36c; --text:#f2f5f3; --muted:#a9bbb7; --bad:#ff7e7e; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at top right,#123c39 0,var(--bg) 42%); color:var(--text); font:15px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif; }
.shell { width:min(1180px,calc(100% - 32px)); margin:0 auto; padding:42px 0 70px; }
header,.row-between { display:flex; align-items:center; justify-content:space-between; gap:20px; }
h1 { margin:2px 0 8px; font-size:clamp(28px,5vw,42px); }
h2 { margin:0 0 20px; font-size:21px; }
.eyebrow { color:var(--gold); letter-spacing:.16em; font-weight:700; margin:0; }
.muted { color:var(--muted); margin:0; }
.card { background:color-mix(in srgb,var(--panel) 94%,black); border:1px solid var(--line); border-radius:18px; padding:24px; box-shadow:0 22px 60px #0005; }
.narrow { width:min(460px,100%); margin:44px auto 0; }
.grid { display:grid; grid-template-columns:minmax(280px,380px) 1fr; gap:22px; margin-top:34px; align-items:start; }
form { display:grid; gap:15px; }
label { display:grid; gap:7px; color:var(--muted); font-weight:600; }
input,select { width:100%; border:1px solid #56817e; border-radius:10px; background:#092321; color:var(--text); padding:12px 13px; font:inherit; outline:none; }
input:focus,select:focus { border-color:var(--gold); box-shadow:0 0 0 3px #d5b36c25; }
.check { grid-template-columns:auto 1fr; align-items:center; }
.check input { width:auto; }
button { border:0; border-radius:10px; background:var(--gold); color:#101817; padding:11px 17px; font:700 15px/1 system-ui; cursor:pointer; }
button:hover { filter:brightness(1.08); }
button:disabled { opacity:.55; cursor:wait; }
button.secondary { background:transparent; color:var(--text); border:1px solid #668b88; }
.hidden { display:none !important; }
.users { display:grid; gap:11px; }
.user { display:grid; gap:14px; padding:15px; background:#092321; border:1px solid #204b48; border-radius:12px; }
.user-head { display:flex; justify-content:space-between; gap:14px; align-items:start; }
.entitlements { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:8px 14px; padding-top:12px; border-top:1px solid #204b48; }
.entitlements label { display:flex; align-items:center; gap:8px; font-weight:500; }
.entitlements input { width:auto; }
.plan-row { display:flex; align-items:center; gap:10px; }
.plan-row select { width:auto; min-width:150px; padding:8px 10px; }
.user strong { font-size:16px; }
.user small { display:block; color:var(--muted); margin-top:4px; }
.actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:7px; }
.actions button { padding:8px 10px; font-size:13px; }
.badge { color:var(--gold); font-size:12px; font-weight:700; }
.disabled { opacity:.6; }
#message { position:fixed; right:20px; bottom:20px; max-width:min(430px,calc(100% - 40px)); padding:13px 16px; border-radius:10px; background:#173c39; border:1px solid #4d7b77; box-shadow:0 14px 40px #0006; transform:translateY(140%); transition:.2s ease; }
#message.show { transform:translateY(0); }
#message.error { background:#4a1d22; border-color:#9c454e; }
@media (max-width:800px) { .grid { grid-template-columns:1fr; } header { align-items:flex-start; } .user { grid-template-columns:1fr; } .actions { justify-content:flex-start; } }