:root { --ink:#202e30; --muted:#697776; --paper:#f5f6f2; --line:#dce3dd; --green:#1e5946; --mint:#e7f0e6; --red:#a03732}
* { box-sizing:border-box}
body { margin:0; background:var(--paper); color:var(--ink); font:15px/1.6 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
a { color:var(--green); text-decoration:none}
a:hover { text-decoration:underline}
button,input { font:inherit}
.topbar { min-height:84px; background:#fff; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:42px; padding:16px 5vw}
.brand { display:flex; align-items:center; gap:12px; color:var(--ink); font-size:20px; font-weight:700; white-space:nowrap}
.brand-mark { width:34px; height:34px; display:grid; place-items:center; background:var(--green); color:#fff; border-radius:10px}
.brand-label { font-size:10px; font-weight:500; letter-spacing:.15em; border-left:1px solid var(--line); padding-left:18px; margin-left:6px; color:var(--muted)}
nav { display:flex; gap:26px; margin-left:auto}
nav a { font-weight:600; color:var(--muted)}
.topbar form { margin:0}
.container { width:min(1240px,90vw); margin:54px auto 80px; min-height:65vh}
.page-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:30px}
h1 { font-size:42px; letter-spacing:-.045em; line-height:1.2; margin:12px 0}
h2 { font-size:23px; letter-spacing:-.025em; line-height:1.3; margin:10px 0}
p { margin:8px 0 16px}
.eyebrow { font-size:10px; letter-spacing:.17em; font-weight:750; color:var(--muted)}
.muted,.hint { color:var(--muted)}
.small { font-size:13px}
.block { display:block}
.panel { background:#fff; border:1px solid var(--line); border-radius:14px; padding:30px; box-shadow:0 4px 12px #22372b03}
.button { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 18px; border:1px solid var(--line); border-radius:7px; background:#fff; color:var(--ink); font-weight:600; cursor:pointer; white-space:nowrap}
.button:hover { text-decoration:none; background:#f0f3ee}
.button.primary { background:var(--green); border-color:var(--green); color:#fff}
.button.primary:hover { background:#154534}
.button.danger { background:var(--red); border-color:var(--red); color:#fff}
.link-button { border:0; background:none; padding:8px; color:var(--muted); cursor:pointer}
.summary-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:28px}
.metric { font-size:48px; letter-spacing:-.06em; font-weight:600; margin-top:10px}
.summary-grid p { color:var(--muted); font-size:13px; margin-bottom:0}
.workflow-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px}
.workflow-grid .panel { padding:32px; display:flex; align-items:flex-start; flex-direction:column}
.workflow-grid p { max-width:460px}
.workflow-grid a { margin-top:auto; padding-top:14px; font-weight:600}
.channel-label { font-size:10px; font-weight:700; letter-spacing:.13em; color:var(--green); background:var(--mint); padding:4px 8px; border-radius:4px}
.badge { display:inline-block; white-space:nowrap; padding:3px 8px; border-radius:5px; background:#f1f4ef; color:#526252; font-size:11px; font-weight:600}
.badge.on { background:var(--mint); color:var(--green)}
.badges { display:flex; flex-wrap:wrap; gap:5px}
.panel.directory { padding:0; overflow:hidden}
.table-toolbar { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 28px}
.search { display:flex; gap:8px; position:relative}
.search input { width:250px}
.table-scroll { overflow:auto; position:relative}
table { width:100%; border-collapse:collapse; text-align:left}
th { font-size:10px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); background:#f9faf7; padding:13px 24px; border-top:1px solid var(--line)}
td { padding:23px 24px; border-top:1px solid var(--line); vertical-align:middle}
tbody tr:hover { background:#fbfcfa}
.person { display:flex; align-items:center; gap:12px; min-width:180px}
.avatar { width:37px; height:37px; flex-shrink:0; border:1px solid #d8e4d3; background:var(--mint); border-radius:50%; display:grid; place-items:center; color:var(--green); font-size:14px; font-weight:600}
.accounts span { display:block; font-size:11px; color:var(--muted); white-space:nowrap}
.accounts code { color:var(--ink); font-size:11px; margin-left:5px}
.connection { font-size:12px; white-space:nowrap; color:var(--muted)}
.connection:before { content:""; display:inline-block; width:6px; height:6px; background:#bcc5bb; border-radius:50%; margin-right:6px}
.connection.connected:before { background:#39845d}
.connection.connected { color:var(--green)}
.row-actions { white-space:nowrap; font-size:12px}
.row-actions a+a { margin-left:16px}
.row-actions form { display:inline-block; margin-right:16px }
.row-actions .button { font-size:12px; padding:7px 10px }
.row-actions button:disabled { opacity:.5; cursor:not-allowed }
.danger-link { color:var(--red)}
.page-note { margin-top:20px}
.empty-state { text-align:center; padding:54px 20px 68px}
.empty-mark { display:inline-grid; place-items:center; height:48px; width:48px; background:var(--mint); border-radius:12px; font-size:24px; color:var(--green)}
.empty-state p { max-width:440px; margin:10px auto 24px}
.user-form { max-width:860px}
.user-form .panel { margin-bottom:20px}
.section-heading { display:flex; gap:16px; margin-bottom:22px}
.section-heading h2 { margin:0}
.section-heading p { margin:4px 0 0}
.step { width:29px; height:29px; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; font-size:11px; color:var(--muted); flex-shrink:0}
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px}
label { display:block; font-size:13px; font-weight:600; margin-bottom:7px}
input:not([type=checkbox]):not([type=hidden]) { width:100%; padding:10px 12px; background:#fff; border:1px solid #cfd9d0; border-radius:6px; color:var(--ink); min-width:0}
input:focus { outline:2px solid #92b49d; outline-offset:2px}
.required { color:var(--red)}
.hint { font-size:11px; margin:6px 0 0}
.check-row { display:flex; gap:12px; align-items:flex-start; padding:16px 0; border-bottom:1px solid #edf0eb; margin:0; cursor:pointer}
.check-row:last-child { border:0; padding-bottom:0}
.check-row input { accent-color:var(--green); width:17px; height:17px; margin-top:3px}
.check-row small { display:block; font-weight:400; color:var(--muted); font-size:12px; margin-top:3px}
.form-actions { display:flex; justify-content:flex-end; gap:12px; margin-top:24px}
.back-link { font-size:13px}
.notice { padding:14px 18px; border:1px solid #dbe1cb; background:#f5f7eb; border-radius:8px; margin:0 0 22px; font-size:13px}
.notice.success { background:#edf5eb; border-color:#d4e4cf; color:var(--green)}
.notice.subtle { margin:20px 0 0; font-size:12px; background:#fafbf7}
.validation { color:var(--red); font-size:13px; background:#fff0ed; border-radius:7px}
.validation ul { padding:12px 28px}
.validation-summary-valid { display:none}
.login-panel { max-width:470px; margin:85px auto; padding:40px}
.login-panel h1 { font-size:34px}
.login-panel form { margin-top:28px}
.login-panel button { margin-top:24px; width:100%}
.delete-panel { max-width:700px; margin-top:28px}
.delete-panel h1 { font-size:32px}
.footer { width:90vw; margin:0 auto; border-top:1px solid var(--line); padding:22px 0; color:var(--muted); font-size:12px}
.footer span { float:right}
.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
@media(max-width:850px) { .brand-label { display:none}
.topbar { gap:16px}
nav { gap:14px}
.container { margin-top:30px}
.summary-grid { gap:12px}
.panel { padding:22px}
.page-heading h1 { font-size:34px}
.table-toolbar { align-items:flex-start; flex-direction:column}
.search { width:100%}
.search input { width:100%}
}
@media(max-width:580px) { .topbar { flex-wrap:wrap; gap:12px; padding:14px 5vw}
.brand { font-size:18px}
.topbar form { margin-left:auto}
nav { order:3; width:100%; padding-top:10px; border-top:1px solid var(--line)}
.page-heading { align-items:flex-start; flex-direction:column}
.summary-grid,.workflow-grid,.form-grid { grid-template-columns:1fr}
.summary-grid .panel { display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.summary-grid .metric { font-size:32px; margin:0}
.summary-grid .eyebrow { width:100%}
.summary-grid p { margin:0}
.user-form .panel { padding:22px}
.login-panel { margin:35px 0; padding:28px}
.footer span { float:none; display:block}
.form-actions .button { flex:1}
h1 { font-size:34px}
}