@font-face {
	font-family: "Geist";
	src: url("fonts/geist-latin.woff2") format("woff2");
	font-weight: 400 700;
	font-display: swap;
}

:root {
	--font: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;

	--t-xs: 0.75rem;   /* 12 */
	--t-s: 0.8125rem;  /* 13 */
	--t-m: 0.9375rem;  /* 15 body */
	--t-l: 1.125rem;   /* 18 */
	--t-xl: 1.5rem;    /* 24 */

	--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px;

	--bg: #f4f4f1;
	--surface: #ffffff;
	--surface-2: #fafaf8;
	--sunken: #ebebe6;
	--ink: #17181c;
	--ink-2: #464a53;
	--muted: #686d76;
	--line: #e4e3de;
	--line-2: #d2d1ca;
	--accent: #4338ca;
	--accent-ink: #ffffff;
	--accent-soft: #eceafd;
	--accent-hover: #3730a3;
	--danger: #b42318;
	--focus: 0 0 0 3px rgb(67 56 202 / .35);

	--r-s: 6px; --r-m: 10px; --r-l: 14px; --r-full: 999px;
	--sh-s: 0 1px 2px rgb(23 24 28 / .05), 0 1px 3px rgb(23 24 28 / .07);
	--sh-m: 0 6px 16px rgb(23 24 28 / .08), 0 2px 4px rgb(23 24 28 / .05);
	--sh-l: 0 24px 48px rgb(23 24 28 / .18), 0 6px 12px rgb(23 24 28 / .08);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--t-m)/1.5 var(--font); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { margin: 0; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: var(--accent); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--focus); }
.muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- brand ---------- */
.brand { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 600; font-size: var(--t-m); letter-spacing: -0.01em; }
.brand-mark { width: 22px; height: 22px; border-radius: 7px; background: var(--accent); position: relative; }
.brand-mark::after { content: ""; position: absolute; inset: 6px 5px 6px 6px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); width: 9px; height: 5px; }

/* ---------- gate (sign in) ---------- */
.gate { min-height: 100vh; display: grid; place-items: center; padding: var(--s-4); }
.gate-card { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: var(--s-6); box-shadow: var(--sh-s); }
.gate-card .brand { margin-bottom: var(--s-6); }
.gate-card h1 { font-size: var(--t-xl); margin-bottom: var(--s-1); }
.gate-card .muted { margin-bottom: var(--s-5); }
.gate-card form p { margin: 0 0 var(--s-4); }
.gate-card label { display: block; font-size: var(--t-s); font-weight: 500; margin-bottom: var(--s-1); color: var(--ink-2); }
.gate-card input[type=text], .gate-card input[type=password] { width: 100%; }
.gate-card .login-remember label { display: inline-flex; gap: var(--s-2); align-items: center; font-weight: 400; }
.gate-card input[type=submit] { width: 100%; }
.gate-foot { margin-top: var(--s-4); font-size: var(--t-s); }

/* ---------- controls ---------- */
.input, .select, .textarea, .gate-card input[type=text], .gate-card input[type=password] {
	height: 40px; padding: 0 var(--s-3); border: 1px solid var(--line-2); border-radius: var(--r-s); background: var(--surface); font-size: var(--t-m);
}
.textarea { height: auto; min-height: 120px; padding: var(--s-2) var(--s-3); resize: vertical; line-height: 1.5; width: 100%; }
.select { padding-right: var(--s-6); appearance: none; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%23686d76' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 10px center; }
.input:focus, .select:focus, .textarea:focus, .gate-card input:focus { border-color: var(--accent); box-shadow: var(--focus); outline: none; }

.btn, .gate-card input[type=submit] {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
	height: 40px; padding: 0 var(--s-4); border-radius: var(--r-s); border: 1px solid var(--line-2);
	background: var(--surface); font-size: var(--t-m); font-weight: 500; cursor: pointer; white-space: nowrap; text-decoration: none; color: var(--ink);
}
.btn:hover { background: var(--surface-2); border-color: #bdbcb4; }
.btn-primary, .gate-card input[type=submit] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover, .gate-card input[type=submit]:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-ghost:hover { background: var(--sunken); border-color: transparent; }
.btn-danger { color: var(--danger); }
.btn-s { height: 32px; padding: 0 var(--s-3); font-size: var(--t-s); }
.btn-icon { width: 40px; padding: 0; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.kbd { font-size: var(--t-xs); padding: 1px 6px; border-radius: 4px; background: rgb(255 255 255 / .2); }

/* ---------- app shell ---------- */
.boot { padding: var(--s-7); text-align: center; color: var(--muted); }
.top { position: sticky; top: 0; z-index: 20; background: rgb(244 244 241 / .9); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.top-in { display: flex; align-items: center; gap: var(--s-4); height: 64px; padding: 0 var(--s-5); max-width: 1600px; margin: 0 auto; }
.top-scope { color: var(--muted); font-size: var(--t-s); padding-left: var(--s-4); border-left: 1px solid var(--line-2); }
.top-spacer { flex: 1; }
.user { position: relative; }
.user-btn { display: inline-flex; align-items: center; gap: var(--s-2); height: 40px; padding: 0 var(--s-2); border: 0; background: transparent; border-radius: var(--r-s); cursor: pointer; }
.user-btn:hover { background: var(--sunken); }
.avatar { width: 28px; height: 28px; border-radius: var(--r-full); display: grid; place-items: center; background: var(--ink); color: #fff; font-size: var(--t-xs); font-weight: 600; flex: none; }
.avatar.bot { background: var(--accent); }
.menu { position: absolute; right: 0; top: 46px; min-width: 200px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: var(--sh-m); padding: var(--s-1); }
.menu a { display: block; padding: var(--s-2) var(--s-3); border-radius: var(--r-s); color: var(--ink); text-decoration: none; font-size: var(--t-s); }
.menu a:hover { background: var(--sunken); }
.menu-head { padding: var(--s-2) var(--s-3); font-size: var(--t-xs); color: var(--muted); border-bottom: 1px solid var(--line); margin-bottom: var(--s-1); }

.bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding: var(--s-5) var(--s-5) var(--s-4); max-width: 1600px; margin: 0 auto; }
.bar h1 { font-size: var(--t-xl); margin-right: auto; }
.search { position: relative; }
.search .input { padding-left: 34px; width: 240px; }
.search svg { position: absolute; left: 11px; top: 12px; color: var(--muted); pointer-events: none; }
.seg { display: inline-flex; background: var(--sunken); border-radius: var(--r-s); padding: 3px; }
.seg button { height: 34px; padding: 0 var(--s-3); border: 0; border-radius: 4px; background: transparent; font-size: var(--t-s); font-weight: 500; color: var(--ink-2); cursor: pointer; }
.seg button[aria-pressed=true] { background: var(--surface); color: var(--ink); box-shadow: var(--sh-s); }

/* ---------- board ---------- */
.board { display: grid; grid-template-columns: repeat(4, minmax(260px, 1fr)); gap: var(--s-4); padding: 0 var(--s-5) var(--s-7); max-width: 1600px; margin: 0 auto; align-items: start; }
.col { background: var(--sunken); border-radius: var(--r-l); padding: var(--s-2); min-height: 160px; }
.col-head { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-2) var(--s-3); }
.col-head h2 { font-size: var(--t-s); font-weight: 600; }
.col-head .count { font-size: var(--t-xs); color: var(--muted); background: rgb(255 255 255 / .7); border-radius: var(--r-full); padding: 1px 8px; }
.col-head .dot { width: 8px; height: 8px; border-radius: var(--r-full); }
.col-hint { font-size: var(--t-xs); color: var(--muted); padding: 0 var(--s-2) var(--s-3); margin-top: calc(var(--s-2) * -1); }
.col-list { display: grid; gap: var(--s-2); }
.col-empty { padding: var(--s-5) var(--s-3); text-align: center; color: var(--muted); font-size: var(--t-s); border: 1px dashed var(--line-2); border-radius: var(--r-m); }

.card { display: block; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: var(--s-3) var(--s-3) var(--s-3); cursor: pointer; box-shadow: var(--sh-s); transition: border-color .15s, box-shadow .15s, transform .15s; }
.card:hover { border-color: var(--line-2); box-shadow: var(--sh-m); transform: translateY(-1px); }
.card-site { font-size: var(--t-xs); color: var(--muted); display: flex; align-items: center; gap: var(--s-1); margin-bottom: var(--s-1); }
.card-title { font-weight: 500; font-size: var(--t-m); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-foot { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); font-size: var(--t-xs); color: var(--muted); }
.card-foot .time { margin-left: auto; }

.chip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: var(--r-full); font-size: var(--t-xs); font-weight: 500; background: var(--sunken); color: var(--ink-2); white-space: nowrap; }
.chip .dot { width: 6px; height: 6px; border-radius: var(--r-full); background: currentColor; }
.st-new, .st-cancelled { color: #575b63; background: #ececea; }
.st-triage, .st-in_progress { color: #1e4fb8; background: #e6eefc; }
.st-needs_info { color: #8a4b00; background: #fdf0d9; }
.st-awaiting_approval { color: #5b2fb8; background: #efe8fd; }
.st-approved { color: #0b6b5d; background: #dcf4ef; }
.st-done { color: #1d6b2f; background: #e0f3e4; }
.st-failed { color: #a1241b; background: #fde7e5; }
.pr-high { color: #8a4b00; background: #fdf0d9; }
.pr-urgent { color: #a1241b; background: #fde7e5; }
.tier-auto { color: #1d6b2f; background: #e0f3e4; }
.tier-approve { color: #8a4b00; background: #fdf0d9; }
.tier-ask { color: #a1241b; background: #fde7e5; }

/* mobile column tabs */
.coltabs { display: none; }

/* ---------- list view ---------- */
.list { max-width: 1600px; margin: 0 auto; padding: 0 var(--s-5) var(--s-7); }
.table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; }
.table th { text-align: left; font-size: var(--t-xs); font-weight: 500; color: var(--muted); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); background: var(--surface-2); }
.table td { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); font-size: var(--t-s); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr { cursor: pointer; }
.table tbody tr:hover td { background: var(--surface-2); }
.table .t-title { font-weight: 500; font-size: var(--t-m); }
.list-empty { padding: var(--s-7); text-align: center; color: var(--muted); }

/* ---------- drawer (task detail) ---------- */
.scrim { position: fixed; inset: 0; background: rgb(23 24 28 / .32); z-index: 40; animation: fade .15s ease-out; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(620px, 100vw); background: var(--surface); z-index: 41; box-shadow: var(--sh-l); display: flex; flex-direction: column; animation: slide .2s ease-out; }
.drawer-head { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-4) var(--s-3) var(--s-5); border-bottom: 1px solid var(--line); }
.drawer-head .crumb { font-size: var(--t-s); color: var(--muted); margin-right: auto; }
.drawer-body { flex: 1; overflow-y: auto; padding: var(--s-5); }
.drawer-body h2 { font-size: var(--t-xl); margin-bottom: var(--s-3); }
.meta { display: grid; grid-template-columns: 110px 1fr; gap: var(--s-2) var(--s-4); font-size: var(--t-s); margin: var(--s-5) 0; padding: var(--s-4); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-m); }
.meta dt { color: var(--muted); }
.meta dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.meta .select { height: 32px; font-size: var(--t-s); }
.desc { white-space: pre-wrap; max-width: 65ch; color: var(--ink-2); }
.desc-empty { color: var(--muted); font-style: italic; }
.selector { font-family: ui-monospace, Consolas, monospace; font-size: var(--t-xs); background: var(--sunken); padding: 2px 6px; border-radius: 4px; }

.callout { display: flex; gap: var(--s-3); align-items: center; padding: var(--s-4); border-radius: var(--r-m); margin-bottom: var(--s-5); font-size: var(--t-s); }
.callout p { flex: 1; }
.callout-approve { background: var(--accent-soft); color: #2e2690; }
.callout-info { background: #fdf0d9; color: #6b3a00; }

.section-title { font-size: var(--t-s); font-weight: 600; margin: var(--s-6) 0 var(--s-3); color: var(--ink-2); }
.thread { display: grid; gap: var(--s-4); }
.msg { display: grid; grid-template-columns: 28px 1fr; gap: var(--s-3); }
.msg-head { display: flex; gap: var(--s-2); align-items: baseline; font-size: var(--t-s); }
.msg-head b { font-weight: 600; }
.msg-head time { color: var(--muted); font-size: var(--t-xs); }
.msg-body { white-space: pre-wrap; margin-top: 2px; font-size: var(--t-m); color: var(--ink-2); overflow-wrap: anywhere; }
.msg.internal .msg-body { background: #fff8e6; border: 1px dashed #e9c46a; border-radius: var(--r-s); padding: var(--s-2) var(--s-3); }
.msg.kind-question .msg-body, .msg.kind-proposal .msg-body { background: var(--accent-soft); border-radius: var(--r-s); padding: var(--s-2) var(--s-3); color: #2e2690; }
.tag { font-size: var(--t-xs); color: #8a4b00; }
.log { display: grid; gap: var(--s-2); font-size: var(--t-xs); color: var(--muted); }
.thread-empty { color: var(--muted); font-size: var(--t-s); }

.composer { border-top: 1px solid var(--line); padding: var(--s-4) var(--s-5); background: var(--surface); }
.composer .textarea { min-height: 72px; }
.composer-row { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-2); }
.composer-row .check { margin-right: auto; font-size: var(--t-s); color: var(--ink-2); display: inline-flex; gap: var(--s-2); align-items: center; }

/* ---------- images ---------- */
.gallery { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.shot { display: block; border: 1px solid var(--line); border-radius: var(--r-s); overflow: hidden; background: var(--sunken); line-height: 0; }
.shot img { display: block; width: 160px; height: auto; max-height: 200px; object-fit: cover; }
.shot:hover { border-color: var(--line-2); box-shadow: var(--sh-s); }
.picks { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.picks:not(:empty) { margin-top: var(--s-2); }
.pick { position: relative; width: 72px; height: 72px; border-radius: var(--r-s); overflow: hidden; border: 1px solid var(--line); }
.pick img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pick-x { position: absolute; top: 3px; right: 3px; width: 24px; height: 24px; border-radius: var(--r-full); border: 0; background: rgb(23 24 28 / .75); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; }
.attach-row { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-2); }
.attach-row .hint { margin: 0; }
.attach-btn { color: var(--ink-2); }
.textarea.dropping { border-color: var(--accent); background: var(--accent-soft); }
.composer-row .attach-btn { margin-right: var(--s-1); }

/* ---------- modal (new task) ---------- */
.modal-wrap { position: fixed; inset: 0; z-index: 50; display: grid; place-items: start center; padding: 10vh var(--s-4) var(--s-4); overflow-y: auto; }
.modal { width: 100%; max-width: 560px; background: var(--surface); border-radius: var(--r-l); box-shadow: var(--sh-l); animation: pop .18s ease-out; }
.modal-head { padding: var(--s-5) var(--s-5) 0; }
.modal-head h2 { font-size: var(--t-l); }
.modal-head p { font-size: var(--t-s); color: var(--muted); margin-top: var(--s-1); }
.modal-body { padding: var(--s-5); display: grid; gap: var(--s-4); }
.modal-foot { display: flex; justify-content: flex-end; gap: var(--s-2); padding: var(--s-4) var(--s-5); border-top: 1px solid var(--line); background: var(--surface-2); border-radius: 0 0 var(--r-l) var(--r-l); }
.field label { display: block; font-size: var(--t-s); font-weight: 500; margin-bottom: 6px; color: var(--ink-2); }
.field .hint { font-size: var(--t-xs); color: var(--muted); margin-top: 6px; }
.field .input, .field .select { width: 100%; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.err { color: var(--danger); font-size: var(--t-s); }

/* ---------- toast ---------- */
.toast { position: fixed; left: 50%; bottom: var(--s-5); transform: translateX(-50%); background: var(--ink); color: #fff; padding: var(--s-3) var(--s-4); border-radius: var(--r-m); box-shadow: var(--sh-l); font-size: var(--t-s); z-index: 60; animation: pop .18s ease-out; }
.toast.bad { background: var(--danger); }

@keyframes fade { from { opacity: 0; } }
@keyframes slide { from { transform: translateX(24px); opacity: 0; } }
@keyframes pop { from { transform: translateY(6px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
	.board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
	.top-in { padding: 0 var(--s-4); gap: var(--s-2); }
	.top-scope, .user-name, .btn-new .lbl, .btn-new .kbd { display: none; }
	.btn-new { width: 40px; padding: 0; }
	.bar { padding: var(--s-4); }
	.bar h1 { width: 100%; }
	.search { flex: 1 1 100%; }
	.search .input { width: 100%; }
	.bar .select { flex: 1; min-width: 0; }
	.coltabs { display: flex; gap: var(--s-1); overflow-x: auto; padding: 0 var(--s-4) var(--s-3); scrollbar-width: none; }
	.coltabs::-webkit-scrollbar { display: none; }
	.coltabs button { flex: none; height: 36px; padding: 0 var(--s-3); border-radius: var(--r-full); border: 1px solid var(--line-2); background: var(--surface); font-size: var(--t-s); font-weight: 500; cursor: pointer; }
	.coltabs button[aria-pressed=true] { background: var(--ink); color: #fff; border-color: var(--ink); }
	.board { grid-template-columns: 1fr; padding: 0 var(--s-4) var(--s-7); }
	.board .col:not(.on) { display: none; }
	.board .col-head { display: none; }
	.list { padding: 0 var(--s-4) var(--s-7); }
	.table .hide-m { display: none; }
	.drawer-body, .composer { padding-left: var(--s-4); padding-right: var(--s-4); }
	.meta { grid-template-columns: 1fr; gap: 2px; }
	.meta dd { margin-bottom: var(--s-2); }
	.field-row { grid-template-columns: 1fr; }
	.modal-wrap { padding: var(--s-4); }
}

/* ---------- team nav + worker pill ---------- */
.topnav { display: flex; gap: var(--s-1); margin-left: var(--s-2); }
.topnav button { height: 36px; padding: 0 var(--s-3); border: 0; border-radius: var(--r-s); background: transparent; color: var(--ink-2); font-size: var(--t-s); font-weight: 500; cursor: pointer; }
.topnav button:hover { background: var(--sunken); }
.topnav button[aria-current=page] { background: var(--surface); color: var(--ink); box-shadow: var(--sh-s); }
.wpill { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--r-full); border: 1px solid var(--line-2); background: var(--surface); font-size: var(--t-xs); font-weight: 500; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.wpill::before { content: ""; width: 7px; height: 7px; border-radius: var(--r-full); background: #9a9ea6; }
.wp-working::before { background: #2f62d6; box-shadow: 0 0 0 3px rgb(47 98 214 / .2); }
.wp-idle::before { background: #2f8a46; }
.wp-paused::before { background: #c27a12; }
.wp-offline { color: var(--danger); border-color: #f1c4bf; }
.wp-offline::before { background: var(--danger); }
.st-undo { color: #5b2fb8; background: #efe8fd; }
.st-reverted { color: #575b63; background: #ececea; }

/* ---------- settings ---------- */
.admin { max-width: 1200px; margin: 0 auto; padding-bottom: var(--s-7); }
.admin .bar { padding-left: var(--s-5); padding-right: var(--s-5); }
.admin-tabs { display: flex; gap: var(--s-1); padding: 0 var(--s-5); border-bottom: 1px solid var(--line); margin-bottom: var(--s-5); overflow-x: auto; scrollbar-width: none; }
.admin-tabs::-webkit-scrollbar { display: none; }
.admin-tabs button { height: 40px; padding: 0 var(--s-4); border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--ink-2); font-weight: 500; cursor: pointer; margin-bottom: -1px; }
.admin-tabs button[aria-current=page] { color: var(--ink); border-bottom-color: var(--accent); }
.admin-panel { padding: 0 var(--s-5); }
.admin-panel .section-title { margin-top: var(--s-6); }
.admin-table td { vertical-align: top; }
.admin-table .input-s, .admin-table .select { height: 34px; font-size: var(--t-s); width: 100%; min-width: 120px; }
.admin-table td > .input-s + .input-s, .admin-table td > .select + .input-s { margin-top: var(--s-1); }
.admin-table .row-actions { white-space: nowrap; text-align: right; }
.admin-table .row-actions .btn + .btn { margin-left: var(--s-1); }
.small { font-size: var(--t-xs); }
.dot-status { display: inline-block; width: 8px; height: 8px; border-radius: var(--r-full); background: #9a9ea6; vertical-align: middle; }
.dot-status.on { background: #2f8a46; }
.admin-form { margin-top: var(--s-5); padding: var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); }
.admin-form .section-title { margin-top: 0; }
.admin-inline { display: flex; align-items: flex-end; gap: var(--s-3); flex-wrap: wrap; }
.admin-inline .field { flex: 1; min-width: 220px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s-4); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: var(--t-s); font-weight: 500; color: var(--ink-2); }
.field .input, .field .select { width: 100%; }
.admin-actions { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-4); flex-wrap: wrap; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s-3); }
.stat { display: flex; flex-direction: column; gap: 4px; padding: var(--s-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); }
.stat-label { font-size: var(--t-xs); color: var(--muted); }
.stat b { font-size: var(--t-l); font-weight: 600; }
.stat .wpill { align-self: flex-start; cursor: default; }
.role-admin, .role-team { color: #2e2690; background: var(--accent-soft); }
.role-client { color: #0b6b5d; background: #dcf4ef; }
.role-disabled { color: var(--danger); background: #fde7e5; }
.secret { margin-bottom: var(--s-5); padding: var(--s-4); border: 1px solid #e9c46a; background: #fff8e6; border-radius: var(--r-m); display: grid; gap: var(--s-2); }
.secret-head { display: flex; gap: var(--s-3); align-items: baseline; flex-wrap: wrap; }
.secret-row { display: grid; grid-template-columns: 110px 1fr auto; gap: var(--s-3); align-items: center; }
.secret-row code { font-family: ui-monospace, Consolas, monospace; font-size: var(--t-s); background: var(--surface); padding: 6px 8px; border-radius: 4px; border: 1px solid var(--line); overflow-wrap: anywhere; user-select: all; }
.secret-label { font-size: var(--t-s); color: var(--ink-2); }
.secret-note { font-size: var(--t-s); color: #6b3a00; }
.secret > .btn { justify-self: start; }
@media (max-width: 720px) {
	.topnav { margin-left: 0; }
	.topnav button { padding: 0 var(--s-2); }
	.wpill { display: none; }
	.admin .bar, .admin-panel, .admin-tabs { padding-left: var(--s-4); padding-right: var(--s-4); }
	.admin-table thead { display: none; }
	.admin-table, .admin-table tbody, .admin-table tr, .admin-table td { display: block; width: 100%; }
	.admin-table tr { border-bottom: 1px solid var(--line); padding: var(--s-2) 0; }
	.admin-table td { border: 0; padding: var(--s-1) var(--s-3); }
	.admin-table .row-actions { text-align: left; }
	.secret-row { grid-template-columns: 1fr; }
}

/* ---------- two-step login ---------- */
.nudge { display: flex; align-items: center; justify-content: center; gap: var(--s-3); flex-wrap: wrap; padding: var(--s-2) var(--s-4); background: #fff8e6; border-bottom: 1px solid #e9c46a; font-size: var(--t-s); color: #6b3a00; }
.qr { width: 180px; height: 180px; margin: var(--s-2) 0 var(--s-3); padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-s); }
.qr svg { width: 100%; height: 100%; display: block; }
.tfa-on { margin-left: var(--s-1); color: #1d6b2f; background: #e0f3e4; }
.login-otp label span { color: var(--muted); }