:root { color-scheme: light; --ink:#14221d; --muted:#64726d; --line:#dce5e1; --paper:#f5f8f6; --white:#fff; --green:#0c8a61; --green-dark:#086246; --red:#b43c3c; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif; }
button,input,textarea { font:inherit; }
button { border:0; border-radius:9px; padding:11px 17px; background:var(--green); color:white; font-weight:700; cursor:pointer; }
button:hover { background:var(--green-dark); }
button.secondary { background:white; color:var(--ink); border:1px solid var(--line); }
button.danger { background:#fff4f2; color:var(--red); border:1px solid #f0cfca; }
.topbar { height:68px; padding:0 max(28px,calc((100vw - 1124px)/2)); display:flex; align-items:center; justify-content:space-between; background:white; border-bottom:1px solid var(--line); }
.topbar>div { display:flex; align-items:center; gap:11px; }
.topbar-actions form { margin:0; }
.brand-mark { width:50px; height:50px; display:grid; place-items:center; border-radius:14px; color:white; background:linear-gradient(135deg,#0b9a69,#173f34); font-weight:900; letter-spacing:-1px; box-shadow:0 10px 25px #0c8a6133; }
.brand-mark.small { display:inline-grid; width:34px; height:34px; border-radius:9px; font-size:13px; }
.badge,.state { padding:5px 9px; border-radius:99px; background:#e8f7f1; color:#087451; font-size:11px; font-weight:800; letter-spacing:.06em; }
.shell { max-width:1180px; margin:auto; padding:48px 28px 80px; }
h1 { margin:6px 0 10px; font-size:clamp(34px,5vw,54px); line-height:1.03; letter-spacing:-.045em; }
h2 { margin:3px 0; font-size:25px; letter-spacing:-.02em; }
.eyebrow,small { margin:0; color:var(--muted); font-size:11px; font-weight:800; letter-spacing:.12em; }
.muted { color:var(--muted); max-width:640px; line-height:1.6; }
.config-grid { display:grid; grid-template-columns:repeat(3,1fr); margin-bottom:52px; background:white; border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.config-grid>div { min-width:0; padding:18px; border-right:1px solid var(--line); }
.config-grid>div:last-child { border:0; }
.config-grid small { display:block; margin-bottom:8px; }
code { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#275349; }
.section-title { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:15px; }
.count { color:var(--muted); font-size:13px; }
.users { display:grid; gap:10px; }
.user-card { display:grid; grid-template-columns:52px minmax(170px,1.2fr) 1fr 1.6fr auto auto; align-items:center; gap:18px; padding:17px; background:white; border:1px solid var(--line); border-radius:13px; }
.user-card.disabled { opacity:.58; }
.avatar { width:46px; height:46px; display:grid; place-items:center; border-radius:50%; color:#155747; background:#def1ea; font-weight:800; }
.identity { display:flex; flex-direction:column; min-width:0; }
.identity span { color:var(--muted); font-size:13px; overflow:hidden; text-overflow:ellipsis; }
.chips { display:flex; flex-wrap:wrap; gap:4px; margin-top:5px; }
.chip { padding:4px 7px; border-radius:6px; background:#f0f4f2; color:#3f544c; font-size:11px; }
.empty { color:#9ba7a2; font-size:12px; }
.row-actions { display:flex; gap:6px; }
.row-actions button { padding:8px 10px; font-size:12px; }
dialog { width:min(650px,calc(100vw - 30px)); border:0; border-radius:17px; padding:0; box-shadow:0 30px 100px #14221d44; }
dialog::backdrop { background:#10241d99; backdrop-filter:blur(3px); }
#user-form { padding:28px; }
.dialog-title { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
button.icon { padding:2px 9px; background:transparent; color:var(--muted); font-size:28px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
label { display:grid; gap:7px; margin-bottom:15px; color:#43514c; font-size:13px; font-weight:700; }
label small { letter-spacing:0; font-weight:500; }
input,textarea { width:100%; border:1px solid #cad6d1; border-radius:9px; padding:11px 12px; outline:none; background:white; color:var(--ink); }
input:focus,textarea:focus { border-color:var(--green); box-shadow:0 0 0 3px #0c8a6118; }
textarea { min-height:74px; resize:vertical; }
.toggle { display:flex; align-items:center; grid-template-columns:auto 1fr; }
.toggle input { width:auto; }
.actions { display:flex; justify-content:flex-end; gap:9px; margin-top:24px; }
.alert { padding:11px 13px; border:1px solid #efc4be; border-radius:9px; color:#902f2f; background:#fff1ef; font-size:13px; }
.hidden { display:none; }
.blank { padding:40px; text-align:center; border:1px dashed #cbd6d1; border-radius:13px; color:var(--muted); }
.login-page { min-height:100vh; display:grid; place-items:center; padding:25px; background:radial-gradient(circle at 50% 0,#d9f3e9,transparent 45%),var(--paper); }
.login-card { width:min(430px,100%); padding:38px; border:1px solid var(--line); border-radius:20px; background:#ffffffee; box-shadow:0 30px 100px #153c2e1a; }
.login-card h1 { font-size:36px; }
.login-card form { margin-top:25px; }
.login-card button { width:100%; margin-top:4px; padding:13px; }
.footnote { margin:22px 0 0; text-align:center; font-size:13px; }
a { color:var(--green-dark); }
@media(max-width:900px) { .config-grid { grid-template-columns:1fr 1fr; }.config-grid>div { border-bottom:1px solid var(--line); }.user-card { grid-template-columns:52px 1fr auto; }.user-card>div:nth-child(3),.user-card>div:nth-child(4){grid-column:2/4}.row-actions{grid-column:2/4} }
@media(max-width:560px) { .config-grid,.form-grid { grid-template-columns:1fr; }.config-grid>div { border-right:0; }.topbar{padding:0 15px}.badge{display:none}.shell{padding:35px 15px}.user-card{grid-template-columns:48px 1fr}.user-card>.state{grid-column:2}.user-card>div:nth-child(3),.user-card>div:nth-child(4),.row-actions{grid-column:1/3}.login-card{padding:27px} }