@font-face{font-family:"thimabi Karla";src:url("/admin-assets/karla-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"thimabi Karla";src:url("/admin-assets/karla-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"thimabi Karla";src:url("/admin-assets/karla-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"thimabi Inconsolata";src:url("/admin-assets/inconsolata-400.woff2") format("woff2");font-weight:400;font-display:swap}
/* The shared family shell uses these roles. Operational controls belong in the workspace below it. */
:root {
  color-scheme:light dark;
  --canvas:#f4f1e9;--surface:#fffefb;--ink:#17242e;--muted:#647078;--rule:#d7d4ca;
  --accent:#1f4e79;--accent-fill:#1f4e79;--on-accent:#fffefb;--tint:#dce8f0;
  --danger:#b3261e;--success:#32663a;--radius:16px;
  --tmb-font-sans:"thimabi Karla",sans-serif;--tmb-family-mono:"thimabi Inconsolata",monospace;
  --tmb-family-line:var(--rule);--tmb-family-surface:var(--surface);--tmb-family-page:var(--canvas);
  --tmb-family-text:var(--ink);--tmb-family-muted:var(--muted);--tmb-family-identity:var(--accent);
  font:400 16px/1.5 var(--tmb-font-sans);
}
@media(prefers-color-scheme:dark) {
  :root {--canvas:#10161a;--surface:#1c252b;--ink:#edf0eb;--muted:#afbbc1;--rule:#344047;--accent:#83b5e0;--accent-fill:#83b5e0;--on-accent:#10161a;--tint:#253a4b;--danger:#ff9d98;--success:#a4d7ab}
}
* {box-sizing:border-box}
body {margin:0;background:var(--canvas);color:var(--ink);min-height:100dvh;display:flex;flex-direction:column}
main {width:min(1180px,calc(100% - 40px));margin:24px auto 0;flex:1}
h1,h2,p {margin:0}
h1 {font-size:28px;line-height:1.2;letter-spacing:-.025em}
h2 {font-size:19px;line-height:1.35;font-weight:700}
a {color:var(--accent);text-underline-offset:3px}
button,input,textarea,select {font:inherit;color:inherit}
button,.button {display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;width:fit-content;padding:9px 16px;border:1px solid var(--rule);border-radius:var(--radius);background:var(--surface);color:var(--ink);font-weight:600;text-decoration:none;cursor:pointer;line-height:1.3}
button:hover,.button:hover {border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,var(--surface))}
button:active,.button:active {background:var(--tint)}
button.primary {background:var(--accent-fill);color:var(--on-accent);border-color:var(--accent-fill)}
button.primary:hover {filter:brightness(.94)}
button.quiet {background:transparent}
button.danger {color:var(--danger)}
button:disabled {opacity:.55;cursor:wait}
/* Input boundaries need stronger contrast than decorative dividers on the same surface. */
input,textarea,select {width:100%;min-width:0;min-height:44px;padding:10px 12px;border:1px solid color-mix(in srgb,var(--muted) 75%,var(--rule));border-radius:12px;background:var(--surface);outline-offset:3px}
textarea {resize:vertical;line-height:1.6}
input[type=checkbox] {width:18px;min-height:18px;height:18px;accent-color:var(--accent);margin:0;flex:none}
label {display:grid;gap:8px;font-size:14px;font-weight:600}
form {display:grid;gap:20px}
fieldset {padding:16px;border:1px solid var(--rule);border-radius:12px;min-width:0}
legend {padding:0 8px;font-weight:600}
fieldset > div {display:grid;gap:12px}
:focus-visible {outline:3px solid var(--accent);outline-offset:3px}
[hidden] {display:none!important}
.icon {width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.surface {border:1px solid var(--rule);border-radius:24px;background:var(--surface)}
.muted,.field-help {color:var(--muted)}
.field-help {font-size:14px;font-weight:400;line-height:1.5}
.data-value {font:400 15px/1.5 var(--tmb-family-mono)}
.skip-link {position:absolute;top:8px;left:20px;transform:translateY(-200%);z-index:50;padding:12px;background:var(--surface);border:1px solid var(--accent);border-radius:12px}
.skip-link:focus {transform:none}
.language-control {position:relative;gap:8px;min-width:125px}
.language-control select {position:absolute;inset:0;opacity:0;cursor:pointer;padding:0}
.language-control:focus-within {outline:3px solid var(--accent);outline-offset:3px}
.language-code {display:none}
.tmb-family-header {box-shadow:0 4px 16px color-mix(in srgb,var(--ink) 4%,transparent)!important}
.login-panel {max-width:440px;padding:32px;margin:40px auto}
.login-panel > .muted {margin:12px 0 24px}
.login-icon {width:32px;height:32px;color:var(--accent);margin-bottom:20px}
.login-panel button {width:100%}
.code-stage {display:grid;gap:12px;padding-top:24px;border-top:1px solid var(--rule)}
input[name=code] {font-family:var(--tmb-family-mono);font-size:20px;letter-spacing:.15em}
.status {padding:12px 16px;margin-bottom:16px;border:1px solid var(--rule);border-radius:12px;background:var(--surface);overflow-wrap:anywhere}
.status[data-tone=error] {border-color:var(--danger);color:var(--danger)}
.status[data-tone=success] {color:var(--success)}
.context-bar,.session-controls,.toolbar-actions,.section-toolbar {display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.context-bar {margin-bottom:20px}
.site-control {display:flex;align-items:center;gap:12px}
.site-control select {min-width:120px;width:auto;font-weight:600}
#operator {overflow-wrap:anywhere;max-width:24rem;font-size:14px}
.workspace-tabs {display:flex;gap:8px;border-bottom:1px solid var(--rule);margin-bottom:24px;padding-bottom:12px;flex-wrap:wrap}
.workspace-tabs button {background:transparent;border-color:transparent}
.workspace-tabs button[aria-selected=true] {color:var(--accent);background:var(--tint);border-color:color-mix(in srgb,var(--accent) 22%,var(--rule))}
.queue-toolbar {display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.queue-toolbar > label {min-width:190px}
.toolbar-actions {justify-content:flex-end}
.collection {min-height:360px;overflow:hidden}
.collection[aria-busy=true] .collection-meta {color:var(--muted)}
.collection-meta {display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:54px;padding:12px 24px;border-bottom:1px solid var(--rule);font-weight:600}
#shown {color:var(--muted);text-align:right}
.comment {padding:24px;border-bottom:1px solid var(--rule)}
.comment:last-child {border-bottom:0}
.comment-header {display:flex;align-items:start;justify-content:space-between;gap:16px}
.comment-author {font-size:17px;font-weight:700;overflow-wrap:anywhere}
.comment-email {font-size:14px;color:var(--muted);overflow-wrap:anywhere;font-weight:400}
.comment-meta {display:flex;gap:8px 16px;align-items:baseline;flex-wrap:wrap;font-size:13px;color:var(--muted);margin-top:12px}
.comment-title {color:var(--ink);font-weight:600}
.badge {display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;line-height:1.4;padding:5px 9px;border:1px solid var(--rule);border-radius:10px;white-space:nowrap}
.badge[data-state=pending] {background:var(--tint);color:var(--accent);border-color:transparent}
.badge[data-state=approved] {color:var(--success)}
.badge[data-state=spam] {color:var(--danger)}
.comment-body {font-size:16px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere;margin:16px 0 20px;max-width:76ch}
.comment-actions,.form-actions {display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.comment-actions {justify-content:space-between}
.secondary-actions {display:flex;gap:8px;flex-wrap:wrap}
.comment-actions button {min-height:40px;padding:8px 12px;font-size:14px;border-radius:12px}
.empty-state {min-height:280px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;padding:32px 24px}
.empty-state > .icon {width:32px;height:32px;color:var(--muted)}
.empty-state > p:first-of-type {font-weight:600;font-size:18px}
.empty-state .muted {max-width:40ch;font-size:14px}
.pagination {display:flex;justify-content:center;padding:0 24px}
.pagination:has(button:not([hidden])) {padding:20px 24px;border-top:1px solid var(--rule)}
.settings-section {padding:24px;margin-bottom:16px}
.settings-section h2 {margin-bottom:20px}
.settings-section form {max-width:580px}
.check-field {display:flex;align-items:center;gap:12px;min-height:32px;font-weight:400;font-size:16px}
.form-grid {display:grid;grid-template-columns:1fr 2fr;gap:16px}
.account-layout {display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:16px}
.section-toolbar {align-items:baseline;margin-bottom:20px}
.section-toolbar h2 {margin:0}
.section-toolbar button {font-size:14px;padding:8px 12px;min-height:38px}
#account-list {display:grid;gap:8px}
#account-list button {width:100%;display:grid;text-align:left;justify-content:start;gap:4px}
#account-list button .muted {font-size:13px;font-weight:400;overflow-wrap:anywhere}
.staff-reply {margin-top:20px;padding:20px;border:1px solid var(--rule);border-radius:16px;background:var(--canvas)}
.tmb-family-footer {margin-top:32px!important;letter-spacing:0!important}
@media(prefers-color-scheme:dark) {
  input,textarea,select {border-color:color-mix(in srgb,var(--muted) 55%,var(--rule))}
}
@media(max-width:760px) {
  main {width:calc(100% - 24px);margin-top:20px}
  .language-control {min-width:52px!important;width:52px!important;gap:4px!important;padding:0 6px!important;overflow:visible!important}
  .language-control::before {display:none!important}
  .language-control .icon {width:16px;height:16px}
  .language-name {display:none}
  .language-code {display:inline;font:400 13px/1 var(--tmb-family-mono)}
  .context-bar {align-items:flex-start}
  .session-controls {justify-content:flex-end;gap:8px}
  .session-controls #operator {max-width:140px}
  .queue-toolbar {align-items:stretch}
  .queue-toolbar > label {flex:1}
  .toolbar-actions {justify-content:flex-start}
  .account-layout {grid-template-columns:1fr}
  .comment {padding:20px}
  .collection-meta {padding:12px 20px}
  .comment-actions {gap:12px}
  .settings-section {padding:20px}
}
@media(max-width:390px) {
  .login-panel {padding:24px;margin:24px auto}
  .context-bar {display:grid}
  .session-controls {justify-content:space-between}
  .session-controls #operator {max-width:170px}
  .workspace-tabs {gap:4px}
  .workspace-tabs button {padding:9px 10px;font-size:14px}
  .form-grid {grid-template-columns:1fr}
  .comment-header {gap:8px}
  .secondary-actions {gap:4px}
  .comment-actions button {padding:8px;font-size:13px}
  .tmb-family-footer {gap:12px!important;font-size:11px!important}
}
@media(forced-colors:active) {
  button.primary,.workspace-tabs button[aria-selected=true] {border:2px solid Highlight}
  .language-control select {opacity:1;position:static}
  .language-control > span,.language-control > svg {display:none}
}