/* Admin console: access gate, section rail, lists, drawers, confirmation dialog, announcement editor and download version. */

.admin-container { padding-top: 26px; }

/* ---------- Hero session pill ---------- */
.admin-hero .page-hero-row { align-items: center; }
.admin-session { display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); animation: view-in .35s var(--ease-out); }
.session-ring { position: relative; display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; color: var(--accent-text); }
.session-ring > svg:first-child { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); fill: none; stroke-width: 3.5; }
.session-ring svg.icon { width: 17px; height: 17px; }
.session-ring-track { stroke: var(--surface-3); }
.session-ring-bar { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset 1s linear, stroke .3s; }
.admin-session[data-low="true"] .session-ring-bar { stroke: var(--gold); }
.admin-session[data-low="true"] .session-ring { color: var(--warning-text); }
.session-text { display: grid; line-height: 1.3; }
.session-text strong { font-size: .84rem; }
.session-text span { font-size: .76rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.session-recent { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px; border-radius: 999px; background: var(--surface-2); color: var(--ink-3); font-size: .76rem; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.session-recent-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }
.session-recent[data-state="ok"] { background: var(--accent-soft); color: var(--accent-text); }
.session-recent[data-state="ok"] .session-recent-dot { background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }

/* ---------- Access gate ---------- */
.admin-gate { display: grid; justify-items: center; gap: 14px; max-width: 520px; margin: 12px auto 24px; padding: 48px 28px 40px; text-align: center; border-radius: 28px; overflow: hidden; isolation: isolate; animation: view-in .4s var(--ease-out); }
.admin-gate::before { content: ""; position: absolute; inset: 0 0 auto; height: 150px; z-index: -1; background: linear-gradient(rgb(255 255 255 / .1) 1px, transparent 1px) 0 0 / 14px 14px, linear-gradient(90deg, rgb(255 255 255 / .1) 1px, transparent 1px) 0 0 / 14px 14px, var(--brand-gradient); opacity: .14; -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); animation: brand-flow 12s linear infinite; }
.vault { width: 88px; height: 88px; image-rendering: pixelated; filter: drop-shadow(0 14px 18px rgb(106 63 210 / .28)); animation: vault-float 4s ease-in-out infinite; }
.vault-shackle { transition: transform .4s var(--ease-out); }
.admin-gate[data-state="forbidden"] .vault, .admin-gate[data-state="error"] .vault, .admin-gate[data-state="unsupported"] .vault { filter: grayscale(1) opacity(.55); animation: none; }
.admin-gate[data-state="loading"] .vault-shackle { animation: shackle-tug 1.2s ease-in-out infinite; }
@keyframes vault-float { 50% { translate: 0 -4px; } }
@keyframes shackle-tug { 50% { transform: translateY(-1px); } }
.admin-gate .passkey-orb { margin: 4px 0 6px; }
.admin-gate-view { display: grid; justify-items: center; gap: 10px; width: 100%; }
.admin-gate-view h2 { font-size: 1.45rem; }
.admin-gate-view .form-actions { justify-content: center; margin-top: 8px; }
.admin-gate-view .notice { width: 100%; text-align: left; }
.admin-gate-view[data-gate="loading"] { color: var(--ink-3); }
.passkey-button::before { content: ""; width: 20px; height: 20px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8.5' cy='8' r='4'/%3E%3Cpath d='M3.5 20.5v-1a5 5 0 0 1 5-5h1.2M16.5 11.5a2.8 2.8 0 1 1 0 5.6 2.8 2.8 0 0 1 0-5.6ZM16.5 17v4l1.5-1.2'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8.5' cy='8' r='4'/%3E%3Cpath d='M3.5 20.5v-1a5 5 0 0 1 5-5h1.2M16.5 11.5a2.8 2.8 0 1 1 0 5.6 2.8 2.8 0 0 1 0-5.6ZM16.5 17v4l1.5-1.2'/%3E%3C/svg%3E") center / contain no-repeat; }

/* ---------- Console frame ---------- */
.admin-console { display: grid; grid-template-columns: 212px minmax(0, 1fr); gap: 28px; align-items: start; animation: view-in .45s var(--ease-out); }
.admin-nav { position: sticky; top: calc(var(--header-height) + 24px); display: grid; gap: 4px; padding: 10px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.admin-nav button { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: 13px; background: none; color: var(--ink-2); font-weight: 650; font-size: .92rem; text-align: left; white-space: nowrap; transition: background-color .2s, color .2s; }
.admin-nav button:hover { background: var(--surface-2); color: var(--ink); }
.admin-nav button[aria-current] { background: var(--accent-soft); color: var(--accent-text); }
.admin-nav button svg.icon { width: 19px; height: 19px; }
.nav-count { display: grid; place-items: center; min-width: 22px; height: 22px; margin-left: auto; padding: 0 6px; border-radius: 999px; background: var(--gold); color: #3a2600; font-size: .72rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.admin-main { min-width: 0; }
.admin-panel { display: grid; gap: 16px; animation: view-in .35s var(--ease-out); }
.panel-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.panel-head h2 { font-size: 1.6rem; letter-spacing: -.035em; }
.panel-sub { margin-top: 4px; font-size: .84rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.panel-sub:empty { display: none; }
.panel-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Toolbar ---------- */
.admin-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.admin-search { flex: 1 1 340px; height: 48px; border-radius: 14px; }
.admin-search .btn { min-height: 36px; border-radius: 10px; }
.filter-pill { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 4px 0 13px; border-radius: 999px; background: var(--violet-soft); color: var(--violet-text); font-size: .82rem; font-weight: 650; }
.filter-pill code { font-size: .76rem; }
.filter-pill button { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: none; color: inherit; }
.filter-pill button:hover { background: color-mix(in srgb, var(--violet) 14%, transparent); }
.filter-pill svg.icon { width: 15px; height: 15px; }

/* ---------- Lists ---------- */
.admin-list { display: grid; gap: 8px; transition: opacity .2s; }
.admin-list[aria-busy="true"] { opacity: .55; }
.admin-list > .empty { padding-block: 52px; border: 1.5px dashed var(--line-2); border-radius: 20px; }
.admin-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; width: 100%; min-width: 0; padding: 13px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-xs); color: var(--ink); text-align: left; transition: border-color .2s, box-shadow .2s, background-color .2s; animation: view-in .3s var(--ease-out) both; }
button.admin-row:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); box-shadow: var(--shadow-sm); }
.admin-row:nth-child(2) { animation-delay: .02s; } .admin-row:nth-child(3) { animation-delay: .04s; } .admin-row:nth-child(n+4) { animation-delay: .06s; }
.row-lead { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--surface-2); color: var(--ink-3); flex-shrink: 0; }
.row-lead .author-avatar { width: 40px; height: 40px; border-radius: 12px; font-size: 1rem; }
.row-lead svg.icon { width: 19px; height: 19px; }
.row-main { display: grid; gap: 3px; min-width: 0; }
.row-title { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 700; font-size: .95rem; }
.row-title > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-sub { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: .78rem; color: var(--ink-3); min-width: 0; }
.row-sub > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.row-side { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; }
.row-side time { font-size: .76rem; color: var(--ink-3); white-space: nowrap; }
.admin-row .badge { height: 22px; font-size: .7rem; }
.muted-badge { background: var(--surface-2); color: var(--ink-3); }

/* Reports */
.report-card { display: grid; gap: 12px; padding: 18px 20px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-xs); animation: view-in .3s var(--ease-out) both; }
.report-card[data-open="true"] { border-left: 4px solid var(--gold); }
.report-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.report-head h3 { font-size: 1.02rem; overflow-wrap: anywhere; }
.report-head .link-button { color: var(--ink); font-weight: 750; text-align: left; }
.report-head .link-button:hover { color: var(--accent-text); }
.report-reason { padding: 11px 14px; border-radius: 12px; background: var(--surface-2); font-size: .9rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.report-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .78rem; color: var(--ink-3); }
.report-meta code { font-size: .74rem; }
.report-resolution { display: grid; gap: 4px; padding: 11px 14px; border-radius: 12px; border: 1px dashed var(--line-2); font-size: .84rem; }
.report-resolution p { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink-2); }
.report-card .form-actions { padding-top: 2px; }

/* Capes */
.cape-admin-list { gap: 12px; }
.cape-admin-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 18px; padding: 16px 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-xs); animation: view-in .3s var(--ease-out) both; }
.cape-admin-card[data-status="blocked"] { border-left: 4px solid var(--danger); }
.cape-admin-card[data-deleted="true"] .cape-admin-visual { opacity: .6; }
.cape-admin-visual { display: grid; grid-template-columns: auto 172px; align-items: center; gap: 12px; }
.cape-admin-art { display: grid; place-items: center; width: 74px; height: 104px; border-radius: 12px; background: linear-gradient(160deg, var(--surface-2), var(--surface-3)); }
.cape-admin-art .cape-face { width: 50px; height: 80px; filter: drop-shadow(0 6px 8px rgb(15 26 20 / .25)); }
.cape-admin-art[data-image="loading"] .cape-face { background-color: var(--line-2); animation: beat 1.4s ease-in-out infinite; }
.cape-admin-art[data-image="error"] .cape-face { background-color: var(--line); }
.cape-admin-card[data-status="blocked"] .cape-admin-art { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--danger) 45%, transparent); }
.cape-admin-texture .cape-texture { padding: 6px; border-radius: 10px; }
.cape-admin-main { display: grid; gap: 10px; min-width: 0; }
.cape-admin-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.cape-admin-head h3 { font-size: 1.02rem; overflow-wrap: anywhere; }
.cape-admin-main .kv { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 0; }

/* Audit */
.audit-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) repeat(2, minmax(0, 1.15fr)); gap: 12px; align-items: end; padding: 16px; border-radius: 18px; box-shadow: var(--shadow-xs); }
.audit-filters .field > span:first-child { font-size: .75rem; }
.audit-filters .input { min-height: 40px; padding: 8px 11px; font-size: .86rem; border-radius: 10px; }
.audit-filters .form-actions { grid-column: 1 / -1; justify-content: flex-end; }
.audit-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 4px 18px; padding: 12px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); animation: view-in .3s var(--ease-out) both; }
.audit-row time { font-size: .78rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.audit-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; font-size: .85rem; }
.audit-action { padding: 2px 8px; border-radius: 7px; background: var(--ink); color: var(--bg); font-family: var(--font-mono); font-size: .74rem; font-weight: 700; }
.audit-line code { font-size: .76rem; color: var(--ink-2); overflow-wrap: anywhere; }
.audit-reason { grid-column: 2; font-size: .84rem; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- Overview ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.stat-grid[aria-busy="true"] .stat-value { opacity: .5; }
.stat-tile { position: relative; display: flex; flex-direction: column; gap: 10px; grid-column: span 2; min-width: 0; padding: 20px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); overflow: hidden; }
.stat-online, .stat-mail { grid-column: span 3; }
.stat-tile h3 { font-size: .82rem; font-weight: 700; color: var(--ink-3); letter-spacing: .02em; }
.stat-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.stat-value { font-family: var(--font-display); font-size: clamp(2rem, 3.4vw, 2.7rem); font-weight: 800; line-height: 1.05; letter-spacing: -.045em; font-variant-numeric: tabular-nums; transition: opacity .2s; }
.stat-meter, .stat-stack { display: flex; height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.stat-meter span, .stat-stack span { width: 0; height: 100%; transition: width .6s var(--ease-out); }
.stat-meter span { background: var(--brand-gradient); border-radius: inherit; }
.stat-stack span[data-tone="ok"], .stat-list i[data-tone="ok"] { background: var(--accent); }
.stat-stack span[data-tone="warning"], .stat-list i[data-tone="warning"] { background: var(--gold); }
.stat-stack span[data-tone="danger"], .stat-list i[data-tone="danger"] { background: var(--danger); }
.stat-list { display: grid; gap: 2px; margin-top: auto; font-size: .82rem; }
.stat-list > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 3px 0; }
.stat-list dt { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-3); }
.stat-list dd { font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-list i { width: 8px; height: 8px; border-radius: 2px; }
.stat-list-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.stat-list-grid > div { display: grid; gap: 0; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.stat-list-grid dd { font-size: 1.1rem; }
.stat-list-grid > div[data-tone="warning"] { background: var(--warning-soft); }
.stat-list-grid > div[data-tone="danger"] { background: var(--danger-soft); }
.stat-list-grid > div[data-tone="danger"] dd { color: var(--danger-text); }
.stat-reports[data-open="true"] { border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); background: linear-gradient(150deg, color-mix(in srgb, var(--gold) 11%, var(--surface)), var(--surface) 60%); }
.stat-reports[data-open="true"] .stat-value { color: var(--warning-text); }
.stat-action { align-self: flex-start; margin-top: auto; }
.stat-note { display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--ink-3); }
.stat-online .online-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); }
.stat-online[data-state="ok"] .online-dot { background: #22c55e; }
.stat-online[data-state="ok"] .online-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #22c55e; animation: ring-pulse 1.8s ease-out infinite; }
.stat-online[data-state="stale"] .online-dot { background: var(--gold); }
.stat-online[data-state="unavailable"] .stat-value { color: var(--ink-3); font-size: 1.6rem; letter-spacing: -.02em; }

/* ---------- Drawers ---------- */
.drawer { width: min(600px, 100%); max-width: none; height: 100dvh; max-height: none; margin: 0 0 0 auto; border-width: 0 0 0 1px; border-radius: 26px 0 0 26px; overflow: hidden; }
.drawer[open] { display: flex; animation: drawer-in .38s var(--ease-out); }
@keyframes drawer-in { from { opacity: 0; transform: translateX(48px); } to { opacity: 1; transform: none; } }
.drawer-inner { display: flex; flex-direction: column; width: 100%; min-height: 0; }
.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 24px 16px; border-bottom: 1px solid var(--line); }
.drawer-identity { display: flex; align-items: center; gap: 14px; min-width: 0; }
.drawer-identity .player-avatar { width: 56px; height: 56px; border-radius: 16px; font-size: 1.3rem; box-shadow: var(--shadow-sm); }
.drawer-identity-text { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.drawer-identity h2 { font-size: 1.3rem; letter-spacing: -.025em; overflow-wrap: anywhere; }
.drawer-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.drawer-body { flex: 1; min-height: 0; overflow: auto; padding: 18px 24px 24px; overscroll-behavior: contain; }
.drawer-loading { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 60px 0; color: var(--ink-3); }
.drawer-content { display: grid; gap: 22px; animation: view-in .3s var(--ease-out); }
.drawer-content h3 { margin-bottom: 10px; font-size: .78rem; font-weight: 700; letter-spacing: .06em; color: var(--ink-3); }
.drawer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 24px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--surface-2); }
.drawer-actions .drawer-note { flex-basis: 100%; font-size: .8rem; color: var(--ink-3); }
.drawer-body > .notice { position: sticky; top: 0; z-index: 2; margin-bottom: 14px; box-shadow: 0 0 0 4px var(--surface), var(--shadow-sm); }
.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; border-top: 1px solid var(--line); }
.kv > div { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.kv > div.kv-wide { grid-column: 1 / -1; }
.kv dt { font-size: .74rem; color: var(--ink-3); }
.kv dd { font-size: .9rem; font-weight: 650; overflow-wrap: anywhere; }
.kv code { font-size: .8rem; }
.kv .link-button { text-align: left; overflow-wrap: anywhere; }
.history-list, .ban-list { display: grid; gap: 8px; }
.history-item, .ban-item { display: grid; gap: 4px; padding: 11px 14px; border-radius: 14px; background: var(--surface-2); font-size: .84rem; }
.history-item strong, .ban-item strong { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.history-item > code, .ban-item > code { font-size: .74rem; color: var(--ink-3); overflow-wrap: anywhere; }
.ban-item[data-active="true"] { background: var(--danger-soft); }
.ban-item p { color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.ban-item .btn { justify-self: start; margin-top: 4px; }
.drawer-empty { padding: 14px; border-radius: 14px; border: 1.5px dashed var(--line-2); color: var(--ink-3); font-size: .84rem; text-align: center; }
.drawer-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.8; }
.code-block { max-height: 420px; margin: 0; padding: 16px; border-radius: 14px; background: #0d1912; color: #d8f5e2; font-family: var(--font-mono); font-size: .76rem; line-height: 1.65; white-space: pre; overflow: auto; tab-size: 2; scrollbar-width: thin; }
:root[data-theme="dark"] .code-block { background: #050a07; box-shadow: inset 0 0 0 1px var(--line); }

/* ---------- Supporter entitlement ---------- */
.supporter-admin { display: grid; gap: 12px; padding: 14px 16px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); transition: border-color .3s; }
.supporter-admin[data-active="true"] { border-color: color-mix(in srgb, var(--supporter) 45%, var(--line)); background: linear-gradient(150deg, var(--supporter-soft), transparent 60%) var(--surface); }
.supporter-admin-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.supporter-uuid { min-width: 0; font-size: .8rem; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.supporter-admin-loading { padding: 10px 0; font-size: .84rem; color: var(--ink-3); }
.supporter-admin-body { display: grid; gap: 14px; transition: opacity .2s; }
.supporter-admin[aria-busy="true"] .supporter-admin-body { opacity: .55; }
.supporter-admin > .notice { margin: 0; }
.supporter-binding { display: grid; gap: 8px; }
.supporter-binding h4 { font-size: .74rem; font-weight: 700; letter-spacing: .06em; color: var(--ink-3); }
.supporter-warning { padding: 8px 12px; border-radius: 10px; background: var(--warning-soft); color: var(--warning-text); font-size: .82rem; font-weight: 600; }
.supporter-form { display: grid; gap: 12px; padding-top: 12px; border-top: 1px dashed var(--line-2); }
.supporter-term { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-width: 0; margin: 0; padding: 0; border: 0; }
.supporter-term legend { float: left; margin-right: 2px; padding: 0; font-size: .74rem; font-weight: 700; letter-spacing: .06em; color: var(--ink-3); }
.supporter-choice { display: inline-flex; align-items: center; gap: 7px; font-size: .88rem; font-weight: 650; cursor: pointer; }
.supporter-choice input { width: 16px; height: 16px; margin: 0; accent-color: var(--supporter); }
.supporter-term:disabled .supporter-choice { cursor: not-allowed; opacity: .55; }
.supporter-until { width: auto; flex: 1 1 210px; max-width: 260px; min-height: 40px; padding-block: 6px; font-size: .86rem; font-variant-numeric: tabular-nums; }
.supporter-preview { flex-basis: 100%; font-size: .78rem; line-height: 1.6; color: var(--ink-3); overflow-wrap: anywhere; }
.supporter-preview[data-kind="error"] { color: var(--danger-text); }
.supporter-form .form-actions { margin: 0; }
.supporter-form .drawer-note { font-size: .8rem; color: var(--ink-3); }
.history-supporter-toggle { justify-self: start; margin-top: 4px; }
.history-supporter:empty { display: none; }
.history-supporter { margin-top: 6px; }

/* ---------- Confirmation ---------- */
.confirm-modal { width: min(520px, calc(100% - 32px)); }
.confirm-kicker { font-size: .75rem; font-weight: 700; letter-spacing: .06em; color: var(--ink-3); }
.confirm-modal .modal-head h2 { margin-top: 2px; }
.confirm-modal[data-danger="true"] .confirm-kicker { color: var(--danger-text); }
.confirm-target { display: grid; gap: 0; padding: 4px 16px; border-radius: 14px; background: var(--surface-2); }
.confirm-target > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: .86rem; }
.confirm-target > div:last-child { border-bottom: 0; }
.confirm-target dt { color: var(--ink-3); }
.confirm-target dd { font-weight: 650; overflow-wrap: anywhere; white-space: pre-wrap; }
.confirm-target dd code { font-size: .78rem; }
.confirm-impact { display: grid; gap: 8px; }
.confirm-impact:empty { display: none; }
.confirm-impact li { position: relative; padding-left: 26px; font-size: .86rem; line-height: 1.6; color: var(--ink-2); }
.confirm-impact li::before { content: ""; position: absolute; left: 2px; top: 4px; width: 15px; height: 15px; background: var(--accent-text); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5M12 7.5h.01'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5M12 7.5h.01'/%3E%3C/svg%3E") center / contain no-repeat; }
.confirm-modal[data-danger="true"] .confirm-impact li::before { background: var(--danger-text); }
.confirm-impact li[data-kind="warning"]::before { background: var(--warning-text); }
.confirm-fields { display: grid; gap: 12px; }
/* A choice sent with the change, such as also barring purchases when a slot is stopped. */
.confirm-option { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); cursor: pointer; transition: border-color .2s, background-color .2s; }
.confirm-option input { flex: none; width: 16px; height: 16px; margin: 3px 0 0; accent-color: var(--danger); }
.confirm-option > span { display: grid; gap: 2px; font-size: .88rem; }
.confirm-option:has(input:checked) { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); background: var(--danger-soft); }
.confirm-option:has(input:disabled) { cursor: not-allowed; opacity: .6; }
.confirm-auth { display: flex; align-items: center; gap: 9px; font-size: .8rem; font-weight: 600; color: var(--warning-text); }
.confirm-auth-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 25%, transparent); }
.confirm-auth[data-state="ok"] { color: var(--accent-text); }
.confirm-auth[data-state="ok"] .confirm-auth-dot { background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }

/* ---------- Announcement editor ---------- */
.editor-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.editor-head h2 { font-size: 1.4rem; letter-spacing: -.03em; }
.editor-revision { font-size: .78rem; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.editor-loading { display: flex; align-items: center; gap: 12px; padding: 40px 0; color: var(--ink-3); }
.ann-conflict { display: grid; gap: 10px; justify-items: start; }
.editor-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .78fr); gap: 18px; align-items: start; }
.ann-form { padding: 22px; border-radius: 22px; }
.ann-body-input { min-height: 320px; line-height: 1.75; }
.ann-actions { padding-top: 6px; border-top: 1px solid var(--line); }
.ann-actions:first-child { border-top: 0; }
.switch { display: inline-flex; align-items: center; gap: 12px; width: fit-content; font-weight: 650; font-size: .9rem; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track { position: relative; width: 44px; height: 26px; border-radius: 99px; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line-2); transition: background-color .25s; }
.switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-sm); transition: translate .3s var(--ease-out); }
.switch input:checked + .switch-track { background: var(--gold); box-shadow: none; }
.switch input:checked + .switch-track::after { translate: 18px 0; }
.switch input:focus-visible + .switch-track { outline: 3px solid var(--accent-ring); outline-offset: 2px; }
.ann-preview { position: sticky; top: calc(var(--header-height) + 24px); display: grid; gap: 10px; min-width: 0; }
.ann-preview-label { font-size: .75rem; font-weight: 700; letter-spacing: .06em; color: var(--ink-3); }
.ann-preview-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; justify-items: start; max-height: 70vh; padding: 22px; border-radius: 22px; background: var(--surface-2); border: 1px dashed var(--line-2); overflow: auto; }
.ann-preview-card h3 { font-size: 1.35rem; letter-spacing: -.03em; line-height: 1.25; overflow-wrap: anywhere; }
.ann-preview-summary { position: relative; padding-left: 14px; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.ann-preview-summary::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 3px; border-radius: 3px; background: var(--brand-gradient); }
.ann-preview-body { width: 100%; font-size: .9rem; line-height: 1.85; white-space: pre-wrap; overflow-wrap: anywhere; }
.ann-preview-body:empty::before { content: "正文会按原样显示在这里。"; color: var(--ink-3); }
.ann-preview-body.ann-flow { --ann-bg: var(--surface-2); }

/* Body format and the block editor */
.ann-body-field { gap: 10px; }
.ann-body-field > .field-head { align-items: center; }
.ann-format { display: inline-grid; grid-auto-flow: column; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-2); }
.ann-format-option { min-height: 30px; padding: 0 14px; border: 0; border-radius: 8px; background: none; color: var(--ink-3); font-size: .8rem; font-weight: 700; transition: background-color .2s, color .2s, box-shadow .2s; }
.ann-format-option:hover { color: var(--ink); }
.ann-format-option[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line); }
.ann-plain { display: grid; gap: 7px; }
.ann-plain .field-hint { display: flex; justify-content: space-between; gap: 12px; }
.ann-blocks { display: grid; gap: 6px; }
.ann-block-list { display: grid; }
.ann-block { position: relative; display: grid; gap: 8px; min-width: 0; padding: 8px 10px 12px 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-xs); transition: border-color .2s, box-shadow .2s, opacity .2s; animation: view-in .25s var(--ease-out); }
.ann-block:focus-within { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); box-shadow: 0 0 0 3px var(--accent-ring); }
.ann-block[data-type="image"] { background: linear-gradient(135deg, color-mix(in srgb, var(--violet) 5%, var(--surface)), var(--surface) 55%); }
.ann-block[data-dragging="true"] { opacity: .4; }
.ann-block[data-drop="before"]::before, .ann-block[data-drop="after"]::after { content: ""; position: absolute; left: 12px; right: 12px; height: 3px; border-radius: 3px; background: var(--brand-gradient); pointer-events: none; }
.ann-block[data-drop="before"]::before { top: -11px; }
.ann-block[data-drop="after"]::after { bottom: -11px; }
.ann-block-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-height: 30px; }
.ann-block-kind { font-size: .74rem; font-weight: 750; letter-spacing: .05em; color: var(--ink-3); }
.ann-block[data-type="image"] .ann-block-kind { color: var(--violet-text); }
.ann-block-tools { display: flex; gap: 2px; margin-left: auto; }
.ann-tool { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 9px; background: none; color: var(--ink-3); transition: background-color .2s, color .2s; }
.ann-tool:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }
.ann-tool:disabled { opacity: .3; cursor: default; }
.ann-tool svg.icon { width: 16px; height: 16px; }
.ann-block-remove:hover:not(:disabled) { background: var(--danger-soft); color: var(--danger-text); }
.ann-grip { margin-left: -4px; cursor: grab; }
.ann-grip:active { cursor: grabbing; }
.ann-grip svg.icon { stroke-width: 3.2; }
.ann-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 9px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.ann-seg-option { display: grid; place-items: center; min-width: 30px; height: 26px; padding: 0 9px; border: 0; border-radius: 7px; background: none; color: var(--ink-3); font-size: .76rem; font-weight: 700; transition: background-color .2s, color .2s; }
.ann-seg-option:hover { color: var(--ink); }
.ann-seg-option[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-xs), inset 0 0 0 1px var(--line); }
.ann-seg-option svg.icon { width: 15px; height: 15px; }
.ann-block-input { line-height: 1.7; }
textarea.ann-block-input { field-sizing: content; min-height: 4.4em; max-height: 460px; resize: vertical; }
.ann-block[data-type="heading"] .ann-block-input { font-weight: 750; font-size: 1.04rem; }
.ann-block[data-type="quote"] .ann-block-input { border-left: 4px solid var(--violet); }
.ann-divider-sample { --ann-bg: var(--surface); padding: 12px 8px; }
/* List block: one field per item, the marker it will show on the left. */
.ann-list-edit { display: grid; gap: 6px; }
.ann-list-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: start; gap: 6px; }
.ann-list-marker { display: grid; place-items: center; height: 44px; font-size: .84rem; font-weight: 800; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.ann-list-marker:empty::before { content: ""; width: 6px; height: 6px; background: var(--accent-text); }
textarea.ann-list-input { min-height: 44px; resize: none; }
/* Without field-sizing an item with a line break would show one line and could not be pulled taller. */
@supports not (field-sizing: content) { textarea.ann-list-input { resize: vertical; } }
.ann-list-remove { margin-top: 7px; }
.ann-list-row:not(:hover, :focus-within) .ann-list-remove { opacity: 0; }
@media (hover: none) { .ann-list-row .ann-list-remove { opacity: 1; } }
.ann-list-add { justify-self: start; min-height: 30px; margin-left: 28px; padding: 0 12px; border: 1px dashed var(--line-2); border-radius: 9px; background: none; color: var(--ink-3); font-size: .8rem; font-weight: 650; transition: color .2s, border-color .2s; }
.ann-list-add:hover { border-color: var(--accent); color: var(--accent-text); }
/* An insertion point between blocks: a thin line and a + that appear on hover or focus. */
.ann-slot { position: relative; display: grid; place-items: center; height: 18px; }
.ann-slot::before { content: ""; position: absolute; left: 16px; right: 16px; top: 50%; height: 2px; border-radius: 2px; background: var(--accent); opacity: 0; transition: opacity .15s; }
.ann-slot-button { position: relative; z-index: 1; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 1px solid var(--line-2); border-radius: 7px; background: var(--surface); color: var(--ink-3); opacity: 0; scale: .7; transition: opacity .15s, scale .2s var(--ease-out), color .2s, border-color .2s; }
.ann-slot-button svg.icon { width: 13px; height: 13px; }
.ann-slot:hover::before, .ann-slot:focus-within::before { opacity: .5; }
.ann-slot:hover .ann-slot-button, .ann-slot-button:focus-visible { opacity: 1; scale: 1; }
.ann-slot-button:hover { color: var(--accent-text); border-color: var(--accent); }
@media (hover: none) { .ann-slot-button { opacity: .65; scale: .9; } }
.ann-slot[data-open="true"] { height: auto; padding: 6px 0; }
.ann-slot[data-open="true"]::before { display: none; }
.ann-add { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px; border: 1.5px dashed var(--line-2); border-radius: 14px; }
.ann-slot .ann-add { width: 100%; border-style: solid; border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: var(--accent-soft); animation: view-in .2s var(--ease-out); }
.ann-add-label { padding: 0 6px; font-size: .74rem; font-weight: 750; letter-spacing: .05em; color: var(--ink-3); }
.ann-add-option { min-height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink-2); font-size: .82rem; font-weight: 650; transition: border-color .2s, color .2s, background-color .2s; }
.ann-add-option:hover { border-color: var(--line-2); color: var(--ink); }
.ann-add-image { color: var(--violet-text); }
.ann-add-image:hover { border-color: color-mix(in srgb, var(--violet) 40%, var(--line)); color: var(--violet-text); }
.ann-add-cancel { margin-left: auto; border-color: transparent; background: none; color: var(--ink-3); }
.ann-blocks-meta { font-size: .76rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ann-blocks-meta[data-over="true"] { color: var(--danger-text); font-weight: 650; }
/* Image block: a transparency checkerboard behind the picture, layout controls beside it. */
.ann-image-edit { display: grid; grid-template-columns: 156px minmax(0, 1fr); gap: 14px; align-items: start; }
.ann-image-thumb, .ann-tile-art { position: relative; display: grid; place-items: center; overflow: hidden; border-radius: 12px; background: repeating-conic-gradient(var(--surface-2) 0 25%, var(--surface-3) 0 50%) 0 0 / 14px 14px; box-shadow: inset 0 0 0 1px var(--line); }
.ann-image-thumb img, .ann-tile-art img { display: block; width: 100%; height: auto; max-height: 200px; object-fit: contain; }
.ann-image-thumb img[data-state="loading"], .ann-tile-art img[data-state="loading"] { min-height: 90px; opacity: .4; }
.ann-image-thumb img[data-state="error"], .ann-tile-art img[data-state="error"] { display: none; }
.ann-thumb-fallback { display: none; padding: 26px 10px; font-size: .76rem; color: var(--ink-3); text-align: center; }
img[data-state="error"] + .ann-thumb-fallback { display: block; }
.ann-image-fields { display: grid; gap: 8px; min-width: 0; }
.ann-image-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.ann-width { display: flex; flex: 1 1 200px; align-items: center; gap: 10px; font-size: .78rem; font-weight: 650; color: var(--ink-3); }
.ann-width input { flex: 1; min-width: 80px; accent-color: var(--accent); }
.ann-width output { min-width: 3.2em; text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.ann-image-pending { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 8px 8px 12px; border-radius: 10px; background: var(--info-soft); color: var(--info-text); font-size: .8rem; line-height: 1.5; }
.ann-image-pending[data-state="error"] { background: var(--danger-soft); color: var(--danger-text); }
/* Image library */
.ann-library { margin-top: 4px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.ann-library > summary { display: flex; align-items: center; gap: 10px; padding: 11px 14px; font-size: .86rem; font-weight: 700; cursor: pointer; list-style: none; }
.ann-library > summary::-webkit-details-marker { display: none; }
.ann-library > summary::after { content: ""; width: 8px; height: 8px; margin-left: auto; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); rotate: 45deg; translate: 0 -2px; transition: rotate .2s, translate .2s; }
.ann-library[open] > summary::after { rotate: 225deg; translate: 0 2px; }
.ann-library-count { font-size: .76rem; font-weight: 650; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ann-library-body { display: grid; gap: 10px; padding: 0 14px 14px; }
.ann-library-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ann-library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ann-library-grid > .drawer-empty { grid-column: 1 / -1; }
.ann-tile { display: grid; gap: 7px; align-content: start; min-width: 0; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.ann-tile-art { aspect-ratio: 4 / 3; }
.ann-tile-art img { height: 100%; max-height: none; }
.ann-tile .badge { justify-self: start; }
.ann-tile-meta { font-size: .72rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ann-tile-actions { display: flex; gap: 6px; }
.ann-tile-actions .btn { flex: 1; min-height: 30px; padding-inline: 8px; font-size: .76rem; }

/* ---------- Rich text editor ---------- */
.ann-format-row { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.ann-to-rich { min-height: 32px; color: var(--violet-text); }
.ann-rich-badge { padding-inline: 12px; }
.ann-rich { display: grid; gap: 6px; }
.ann-rich-locked { display: grid; gap: 4px; }
.rt-editor { display: grid; gap: 6px; min-width: 0; }
.rt-editor[hidden] { display: none; }
/* The toolbar stays in reach while a long body scrolls under it. */
.rt-head { position: sticky; top: calc(var(--header-height) + 10px); z-index: 6; display: grid; gap: 6px; }
.rt-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 5px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-glass); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); box-shadow: var(--shadow-sm); }
.rt-group { display: inline-flex; align-items: center; gap: 2px; }
.rt-group + .rt-group { margin-left: 2px; padding-left: 6px; border-left: 1px solid var(--line); }
.rt-tool { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 1px; min-width: 32px; height: 32px; padding: 0 6px; border: 0; border-radius: 9px; background: none; color: var(--ink-2); transition: background-color .15s, color .15s, box-shadow .15s; }
.rt-tool:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }
.rt-tool:disabled { opacity: .35; cursor: default; }
.rt-tool[hidden] { display: none; }
.rt-tool[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); }
.rt-tool[aria-expanded="true"] { background: var(--surface-3); color: var(--ink); }
.rt-tool svg.icon { width: 17px; height: 17px; }
.rt-tool-menu > svg.icon:last-child { width: 11px; height: 11px; opacity: .55; stroke-width: 2.4; }
.rt-letter { font-family: var(--font-display); font-size: 15px; line-height: 1; }
strong.rt-letter { font-weight: 860; }
em.rt-letter { font-family: Georgia, "Times New Roman", serif; font-size: 16px; font-weight: 600; }
u.rt-letter, s.rt-letter { font-weight: 650; text-underline-offset: 3px; }
.rt-color-sample { display: inline-grid; place-items: center; width: 18px; padding-bottom: 1px; border-bottom: 3px solid currentColor; font-size: 15px; font-weight: 820; line-height: 1; }
.rt-color-sample:not([data-color]) { border-bottom-color: var(--line-2); }
.rt-tool[data-tool="size"][data-value]:not([data-value=""])::after { content: attr(data-value); position: absolute; top: 0; right: 0; padding: 0 3px; border-radius: 5px; background: var(--accent); color: var(--accent-ink); font-size: 9px; font-weight: 800; line-height: 13px; }
.rt-tool[data-tool="highlight"]::after { content: ""; position: absolute; left: 7px; right: 17px; bottom: 4px; height: 3px; border-radius: 2px; background: var(--rt-hl, transparent); }
.rt-tool[data-tool="highlight"][data-value="yellow"] { --rt-hl: #f5c400; }
.rt-tool[data-tool="highlight"][data-value="green"] { --rt-hl: #3fc477; }
.rt-tool[data-tool="highlight"][data-value="blue"] { --rt-hl: #5b8def; }
.rt-tool[data-tool="highlight"][data-value="pink"] { --rt-hl: #f06ba8; }
.rt-menu { position: absolute; z-index: 7; top: var(--rt-menu-top, 46px); left: clamp(0px, var(--rt-menu-left, 0px), calc(100% - 196px)); display: grid; gap: 2px; min-width: 186px; max-height: 360px; padding: 6px; overflow-y: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-lg); animation: view-in .16s var(--ease-out); }
.rt-menu[hidden] { display: none; }
.rt-menu-item { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 3px 10px; border: 0; border-radius: 9px; background: none; color: var(--ink-2); font-size: .84rem; font-weight: 600; text-align: left; }
.rt-menu-item:hover, .rt-menu-item:focus-visible { background: var(--surface-2); color: var(--ink); outline: none; }
.rt-menu-item[aria-checked="true"] { background: var(--accent-soft); color: var(--accent-text); }
.rt-menu-item[aria-checked="true"]::after { content: ""; width: 9px; height: 5px; margin-left: auto; border-bottom: 2px solid currentColor; border-left: 2px solid currentColor; rotate: -45deg; translate: 0 -2px; }
.rt-menu-sample { display: inline-grid; place-items: center; min-width: 30px; font-weight: 760; line-height: 1.25; }
.rt-menu[data-for="size"] .rt-menu-sample { min-width: 52px; }
.rt-linkbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-md); animation: view-in .18s var(--ease-out); }
.rt-linkbar[hidden] { display: none; }
.rt-link-field { display: flex; flex: 1 1 260px; align-items: center; gap: 8px; color: var(--ink-3); }
.rt-link-field svg.icon { width: 17px; height: 17px; }
.rt-link-field .input { flex: 1; min-width: 0; height: 36px; font-family: var(--font-mono); font-size: .84rem; }
.rt-link-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.rt-link-actions .btn[hidden] { display: none; }
.rt-link-note { flex-basis: 100%; margin: 0; font-size: .78rem; line-height: 1.5; color: var(--ink-3); overflow-wrap: anywhere; }
.rt-link-note[hidden] { display: none; }
.rt-link-note[data-kind="error"] { color: var(--danger-text); font-weight: 650; }
.rt-link-note[data-kind="ok"] { color: var(--accent-text); }
/* Text fields draw their spans with the same colours, sizes and highlights as the public page. */
.rt-field { position: relative; min-height: 2.95em; padding: 9px 12px; border: 1px solid var(--line-2); border-radius: 11px; background: var(--surface); color: var(--ink); font-size: .95rem; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; outline: none; cursor: text; transition: border-color .2s, box-shadow .2s; }
.rt-field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.rt-field[data-empty="true"]::before { content: attr(data-placeholder); position: absolute; top: 9px; left: 13px; right: 12px; overflow: hidden; color: var(--ink-3); white-space: nowrap; text-overflow: ellipsis; pointer-events: none; }
.rt-bold { font-weight: 760; }
.rt-italic { font-style: italic; font-synthesis: style; }
.rt-underline { text-decoration: underline; text-underline-offset: .2em; }
.rt-strike { text-decoration: line-through; }
.rt-underline.rt-strike { text-decoration-line: underline line-through; }
.rt-code { padding: .05em .32em; border-radius: 5px; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line); font-family: var(--font-mono); font-size: .87em; }
.rt-link { color: var(--ann-link); text-decoration-line: underline; text-underline-offset: .2em; text-decoration-color: color-mix(in srgb, currentColor 55%, transparent); }
.rt-link.rt-strike { text-decoration-line: underline line-through; }
.rt-link-bad { color: var(--danger-text); text-decoration-style: wavy; }
.rt-block { animation: none; }
.rt-block[data-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.rt-block[data-type="heading"] .rt-heading-input { font-size: 1.2rem; font-weight: 780; letter-spacing: -.02em; line-height: 1.5; }
.rt-block[data-type="heading"][data-level="3"] .rt-heading-input { font-size: 1.05rem; }
.rt-block[data-align="center"] > .rt-field, .rt-block[data-align="center"] .rt-button-edit .input:first-child { text-align: center; }
.rt-block[data-align="right"] > .rt-field, .rt-block[data-align="right"] .rt-button-edit .input:first-child { text-align: right; }
.rt-block[data-type="quote"] > .rt-field { border-left: 4px solid var(--violet); background: var(--surface-2); color: var(--ink-2); }
.rt-list .rt-list-input { min-height: 44px; padding-block: 8px; }
.rt-block :is([data-type="callout"], [data-type="details"], [data-type="table"], [data-type="code"]) .ann-block-kind { color: var(--accent-text); }
.rt-block:is([data-type="callout"], [data-type="table"], [data-type="code"], [data-type="details"], [data-type="button"]) > .ann-block-bar .ann-block-kind { color: var(--accent-text); }
.rt-callout-edit { --rt-tone: var(--info-text); --rt-tone-soft: var(--info-soft); display: grid; gap: 8px; padding: 10px; border-radius: 13px; background: var(--rt-tone-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rt-tone) 25%, transparent); }
.rt-callout-edit[data-tone="success"] { --rt-tone: var(--accent-text); --rt-tone-soft: var(--accent-soft); }
.rt-callout-edit[data-tone="warning"] { --rt-tone: var(--warning-text); --rt-tone-soft: var(--warning-soft); }
.rt-callout-edit[data-tone="danger"] { --rt-tone: var(--danger-text); --rt-tone-soft: var(--danger-soft); }
.rt-callout-title { height: 38px; color: var(--rt-tone); font-weight: 720; }
.rt-button-edit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 8px; }
.rt-button-edit .rt-link-note { grid-column: 1 / -1; }
.rt-mono { font-family: var(--font-mono); font-size: .86rem; }
.rt-code-edit { display: grid; gap: 8px; }
.rt-code-language { max-width: 280px; height: 36px; }
textarea.rt-code-input { min-height: 7.5em; max-height: 520px; overflow-x: auto; field-sizing: content; resize: vertical; background: var(--surface-2); line-height: 1.6; white-space: pre; tab-size: 4; }
.rt-table-edit { display: grid; gap: 8px; min-width: 0; }
.rt-table-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.rt-table-actions .btn { min-height: 30px; padding: 0 10px; font-size: .78rem; }
.rt-table-size { margin-left: auto; font-size: .74rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.rt-table-scroll { overflow-x: auto; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); scrollbar-width: thin; }
.rt-table-grid { display: grid; grid-template-columns: repeat(var(--rt-columns, 2), minmax(130px, 1fr)); width: max(100%, calc(var(--rt-columns, 2) * 130px)); }
.rt-cell { min-height: 2.7em; padding: 8px 10px; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; font-size: .88rem; }
.rt-cell:focus { border-color: var(--line); box-shadow: inset 0 0 0 2px var(--accent); }
.rt-cell-head { background: var(--surface-2); font-weight: 720; }
.rt-check { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 650; color: var(--ink-2); cursor: pointer; }
.rt-check input { width: 15px; height: 15px; accent-color: var(--accent); }
.rt-details-edit { display: grid; gap: 8px; padding: 10px; border-radius: 13px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.rt-details-title { height: 40px; font-weight: 720; }
.rt-details-list { padding-left: 10px; border-left: 2px dashed var(--line-2); }
.rt-details-list:empty { display: none; }
.rt-details-edit > .ann-add { background: var(--surface); }
@media (max-width: 640px) {
  .rt-button-edit { grid-template-columns: 1fr; }
  .rt-head { top: calc(var(--header-height) + 4px); }
  .rt-group + .rt-group { margin-left: 0; padding-left: 4px; }
}

/* Categories: a filter beside the status chips, a manager under the toolbar and a tag on each row. */
.ann-filter-category select { min-width: 160px; height: 40px; padding-block: 0; border-radius: 12px; font-size: .86rem; font-weight: 600; }
/* In a styled category list each name carries the diamond of the public category tag: hollow for "uncategorized" and
   in the brand gradient for "all categories". */
@supports (appearance: base-select) {
  :is(#ann-category, #ann-filter-category) option::before { content: ""; flex: none; width: 7px; height: 7px; margin-inline: 2px 4px; rotate: 45deg; background: var(--accent); }
  :is(#ann-category option[value=""], #ann-filter-category option[value="uncategorized"])::before { background: none; box-shadow: inset 0 0 0 1.5px var(--ink-3); }
  #ann-filter-category option[value=""]::before { background: var(--brand-gradient); }
}
.ann-row-category { flex: none; padding: 0 8px; border-radius: 99px; background: color-mix(in srgb, var(--accent) 13%, var(--surface)); color: var(--accent-text); font-weight: 700; }
.ann-row-category[data-empty] { background: var(--surface-2); color: var(--ink-3); font-weight: 600; }
.ann-categories { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-xs); }
.ann-categories > summary { display: flex; align-items: center; gap: 10px; padding: 12px 16px; font-size: .9rem; font-weight: 700; cursor: pointer; list-style: none; }
.ann-categories > summary::-webkit-details-marker { display: none; }
.ann-categories > summary::before { content: ""; width: 9px; height: 9px; rotate: 45deg; background: var(--brand-gradient); }
.ann-categories > summary::after { content: ""; width: 8px; height: 8px; margin-left: auto; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); rotate: 45deg; translate: 0 -2px; transition: rotate .2s, translate .2s; }
.ann-categories[open] > summary::after { rotate: 225deg; translate: 0 2px; }
.ann-categories-count { font-size: .76rem; font-weight: 650; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ann-categories-body { display: grid; gap: 12px; padding: 0 16px 16px; }
.ann-category-new { display: flex; gap: 8px; }
.ann-category-new .input { flex: 1; min-width: 0; }
.ann-category-list { display: grid; gap: 6px; }
.ann-category { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-height: 48px; padding: 7px 8px 7px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.ann-category[data-editing] { background: var(--surface); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.ann-category[data-editing] .input { flex: 1 1 200px; min-width: 0; height: 36px; }
.ann-category-name { flex: 1 1 160px; min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.ann-category-actions { display: flex; gap: 6px; }
.ann-category .btn { min-height: 32px; padding-inline: 12px; font-size: .78rem; }

/* Category and popup settings: a card of its own under the body form, saved apart from it. */
.ann-main { display: grid; gap: 18px; min-width: 0; }
.ann-settings { padding: 22px; border-radius: 22px; }
.ann-settings-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ann-settings-head h3 { font-size: 1.05rem; letter-spacing: -.01em; }
.ann-settings-head .editor-revision { margin-left: auto; }
.ann-pages-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.ann-pages-field legend { margin-bottom: 8px; padding: 0; font-weight: 650; font-size: .9rem; }
.ann-pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin-bottom: 4px; }
.ann-page { display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); cursor: pointer; transition: border-color .2s, background-color .2s, box-shadow .2s; }
.ann-page:hover { border-color: var(--line-2); }
.ann-page input { flex: none; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--accent); }
.ann-page:has(input:checked) { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); box-shadow: inset 3px 0 0 var(--accent); }
.ann-page:has(input:disabled) { cursor: not-allowed; opacity: .6; }
.ann-page:has(input:focus-visible) { outline: 3px solid var(--accent-ring); outline-offset: 1px; }
.ann-page-text { display: grid; gap: 2px; min-width: 0; font-size: .86rem; }
.ann-page-text code { font-size: .72rem; color: var(--ink-3); overflow-wrap: anywhere; }

/* AI translation: the settings panel beside the category manager, a card per announcement and language tabs on the preview. */
.ann-translate > summary::before { background: linear-gradient(135deg, var(--violet), var(--accent)); }
.ann-translate > summary .badge { height: 22px; font-size: .7rem; }
.ann-translate-form { display: grid; gap: 14px; }
.ann-translate-switches { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.ann-translate-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 12px 14px; }
.ann-translate-wide { grid-column: 1 / -1; }
.ann-translate-grid .mono, .ann-translate-grid input.mono { font-family: var(--font-mono); font-size: .86rem; }
#ann-translate-endpoint { overflow-wrap: anywhere; }
.ann-translate-langs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ann-translate-result { display: grid; gap: 10px; padding: 14px 16px; border-radius: 14px; background: var(--accent-soft); color: var(--ink); animation: view-in .3s var(--ease-out); }
.ann-translate-result[data-kind="error"] { background: var(--danger-soft); }
.ann-translate-head { font-weight: 750; color: var(--accent-text); }
.ann-translate-result[data-kind="error"] .ann-translate-head { color: var(--danger-text); }
.ann-translate-sample { display: grid; gap: 8px; }
.ann-translate-sample li { display: grid; gap: 2px; padding-left: 12px; border-left: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.ann-translate-source { font-size: .78rem; color: var(--ink-3); }
.ann-translate-text { font-weight: 600; }
.ann-translate-sample mark { padding: 0 3px; border-radius: 4px; background: color-mix(in srgb, var(--violet) 18%, transparent); color: inherit; }
.ann-langs { display: grid; gap: 14px; }
.ann-lang-list { display: grid; gap: 8px; }
.ann-lang-list:empty { display: none; }
.ann-lang { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 10px 10px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); box-shadow: inset 3px 0 0 var(--line-2); transition: box-shadow .25s, background-color .25s; }
.ann-lang[data-state="ready"] { box-shadow: inset 3px 0 0 var(--accent); }
.ann-lang[data-state="failed"] { box-shadow: inset 3px 0 0 var(--danger); }
.ann-lang[data-state="stale"] { box-shadow: inset 3px 0 0 var(--gold); }
.ann-lang:is([data-state="queued"], [data-state="running"]) { background: linear-gradient(100deg, var(--surface-2) 30%, color-mix(in srgb, var(--violet) 9%, var(--surface-2)) 50%, var(--surface-2) 70%) 0 0 / 300% 100%; box-shadow: inset 3px 0 0 var(--violet); animation: ann-lang-work 2.4s linear infinite; }
@keyframes ann-lang-work { to { background-position: -150% 0; } }
.ann-lang-body { display: grid; gap: 3px; flex: 1 1 220px; min-width: 0; }
.ann-lang-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ann-lang-head strong { font-size: .92rem; }
.ann-lang-detail { font-size: .78rem; color: var(--ink-3); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ann-lang-error { font-size: .8rem; color: var(--danger-text); overflow-wrap: anywhere; }
.ann-lang-actions { display: flex; gap: 6px; }
.ann-lang .btn { min-height: 32px; padding-inline: 12px; font-size: .78rem; }
.ann-lang .btn[aria-pressed="true"] { background: var(--violet-soft); color: var(--violet-text); }
.ann-preview-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.ann-preview-langs .ann-format-option { min-height: 26px; padding: 0 10px; font-size: .74rem; }
.ann-preview-note { font-size: .78rem; color: var(--violet-text); }
.ann-preview-note[data-state="old"] { color: var(--warning-text); }
@media (prefers-reduced-motion: reduce) { .ann-lang:is([data-state="queued"], [data-state="running"]) { animation: none; } }
@media (max-width: 640px) { .ann-translate-grid { grid-template-columns: 1fr; } }

/* ---------- Download display version ---------- */
.dl-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; align-items: stretch; }
.dl-preview { position: relative; isolation: isolate; display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: center; gap: 16px 22px; padding: 26px; border-radius: 24px; overflow: hidden; color: #f2f7f3; background: radial-gradient(110% 130% at 0% 0%, #1d7247 0%, transparent 55%), radial-gradient(110% 120% at 100% 100%, #4a2aa6 0%, transparent 58%), #0d1912; box-shadow: var(--shadow-md); }
.dl-preview::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgb(255 255 255 / .05) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .05) 1px, transparent 1px); background-size: 24px 24px; -webkit-mask-image: linear-gradient(115deg, #000 10%, transparent 70%); mask-image: linear-gradient(115deg, #000 10%, transparent 70%); }
.dl-preview-copy { display: grid; align-content: center; }
.dl-preview-copy strong { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums; }
.dl-preview-label { font-size: .74rem; font-weight: 600; color: rgb(255 255 255 / .55); }
.dl-preview-card { display: grid; align-content: center; gap: 4px; padding: 16px 18px; border-radius: 16px; background: rgb(255 255 255 / .07); border: 1px solid rgb(255 255 255 / .14); font-size: .9rem; color: rgb(255 255 255 / .85); }
.dl-preview-card strong { color: #fff; font-variant-numeric: tabular-nums; }
.dl-preview [data-dl-preview] { transition: color .3s; }
.dl-preview[data-changed="true"] [data-dl-preview] { color: #9cf0bb; }
.dl-preview-note { grid-column: 1 / -1; font-size: .78rem; color: rgb(255 255 255 / .6); }
.dl-form { gap: 16px; padding: 22px; border-radius: 24px; }
.dl-current { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.dl-current > div { display: grid; }
.dl-current dt { font-size: .75rem; color: var(--ink-3); }
.dl-current dd { font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.dl-current > div:last-child dd { font-family: var(--font-mono); font-size: 1rem; color: var(--ink-3); text-align: right; }
.dl-input { font-family: var(--font-mono); font-size: 1.05rem; letter-spacing: .04em; }
.dl-input[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.dl-scope { font-size: .8rem; line-height: 1.65; color: var(--ink-3); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-tile, .stat-online { grid-column: span 1; }
  .stat-mail { grid-column: 1 / -1; }
  .editor-grid { grid-template-columns: 1fr; }
  .ann-preview { position: static; }
  .audit-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .admin-console { grid-template-columns: 1fr; gap: 18px; }
  .admin-nav { position: static; display: flex; overflow-x: auto; scrollbar-width: none; gap: 4px; padding: 6px; border-radius: 18px; }
  .admin-nav::-webkit-scrollbar { display: none; }
  .admin-nav button { width: auto; flex-shrink: 0; min-height: 40px; }
  .nav-count { margin-left: 2px; }
  .dl-layout { grid-template-columns: 1fr; }
  .admin-hero .page-hero-row { flex-wrap: wrap; align-items: flex-end; }
}
@media (max-width: 680px) {
  .stat-grid { grid-template-columns: 1fr; }
  .stat-tile, .stat-online, .stat-mail { grid-column: auto; }
  .stat-list-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-row { grid-template-columns: auto minmax(0, 1fr); }
  .row-side { grid-column: 2; justify-content: flex-start; }
  .audit-filters { grid-template-columns: 1fr 1fr; }
  .audit-filters .field:nth-child(3) { grid-column: 1 / -1; }
  .audit-row { grid-template-columns: 1fr; }
  .audit-reason { grid-column: auto; }
  .admin-session { flex-wrap: wrap; border-radius: 22px; }
  .kv { grid-template-columns: 1fr; }
  .cape-admin-card { grid-template-columns: 1fr; }
  .cape-admin-main .kv { grid-template-columns: 1fr 1fr; }
  .cape-admin-visual { grid-template-columns: auto minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .admin-container { padding-top: 18px; }
  .admin-gate { padding: 36px 18px 28px; border-radius: 22px; }
  .admin-nav button span:not(.nav-count) { font-size: .86rem; }
  .admin-nav button svg.icon { display: none; }
  .panel-head { align-items: flex-start; flex-wrap: wrap; }
  .panel-head h2 { font-size: 1.35rem; }
  .ann-form, .dl-form { padding: 18px; border-radius: 18px; }
  .ann-image-edit { grid-template-columns: 1fr; }
  .ann-image-thumb { max-width: 240px; }
  .ann-library-head { flex-direction: column; }
  .dl-preview { grid-template-columns: 1fr; padding: 20px; }
  .drawer { width: 100%; height: auto; max-height: 92dvh; margin: auto 0 0; border-width: 1px 0 0; border-radius: 22px 22px 0 0; }
  .drawer[open] { animation-name: sheet-in; }
  .drawer-head { padding: 18px 18px 14px; }
  .drawer-body { padding: 16px 18px 20px; }
  .drawer-actions { padding-inline: 18px; }
  .confirm-target > div { grid-template-columns: 80px minmax(0, 1fr); }
}

/* Supporter days and animated cape slots */
.supporter-extend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.supporter-extend-label { color: var(--ink-2); font-size: .9rem; }
.supporter-days { width: 96px; }
.supporter-slots { display: grid; gap: 10px; margin-top: 18px; }
.supporter-slots-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.supporter-slot-list { display: grid; gap: 10px; }
.supporter-slot { display: grid; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.supporter-slot-new { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px; border: 1.5px dashed var(--line-2); border-radius: 14px; }
.supporter-slot-new .drawer-note { flex-basis: 100%; margin: 0; font-size: .8rem; color: var(--ink-3); }
/* Whether this UUID may buy or redeem animated capes at all, above its slots. */
.supporter-slot-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px; }
.supporter-slot-bar[data-barred="true"] { border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); background: var(--danger-soft); }
.supporter-slot-bar-text { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; }

/* ---------- Segmented filters ---------- */
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.seg > button { height: 32px; padding: 0 12px; border: 0; border-radius: 9px; background: none; color: var(--ink-2); font-size: .82rem; font-weight: 650; white-space: nowrap; transition: background-color .2s, color .2s, box-shadow .2s; }
.seg > button:hover:not(:disabled) { color: var(--ink); }
.seg > button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm), 0 0 0 1px var(--line); }
.seg > button:disabled { opacity: .4; cursor: not-allowed; }
.seg-lg > button { height: 38px; padding: 0 16px; font-size: .88rem; }
.seg > button[data-product="SUPPORTER"][aria-pressed="true"] { color: var(--supporter); }
.seg > button[data-product^="CAPE"][aria-pressed="true"] { color: var(--violet-text); }

/* ---------- Folding rows (orders, redemption codes) ---------- */
.fold-list { gap: 8px; }
.fold-row { position: relative; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-xs); overflow: hidden; transition: border-color .2s, box-shadow .25s; animation: view-in .3s var(--ease-out) both; }
.fold-row:nth-child(2) { animation-delay: .02s; } .fold-row:nth-child(3) { animation-delay: .04s; } .fold-row:nth-child(n+4) { animation-delay: .06s; }
.fold-row::before { content: ""; position: absolute; z-index: 1; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; }
.fold-row[data-tone="danger"]::before { background: var(--danger); }
.fold-row[data-tone="warning"]::before { background: var(--gold); }
.fold-row[data-tone="ok"]::before { background: var(--accent); }
.fold-row[data-open="true"] { border-color: var(--line-2); box-shadow: var(--shadow-md); }
.fold-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 14px; width: 100%; padding: 12px 16px; border: 0; background: none; color: var(--ink); text-align: left; transition: background-color .2s; }
.fold-head:hover { background: var(--surface-2); }
.fold-row[data-open="true"] .fold-head { background: var(--surface-2); }
.fold-lead { display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: 12px; background: var(--surface-2); color: var(--ink-3); }
.fold-lead[data-product="supporter"] { background: var(--supporter-soft); color: var(--supporter); }
.fold-lead[data-product="cape"] { background: var(--violet-soft); color: var(--violet-text); }
.fold-lead svg.icon { width: 19px; height: 19px; }
.fold-main { display: grid; gap: 3px; min-width: 0; }
.fold-title { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: .94rem; font-weight: 700; }
.fold-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fold-amount { flex-shrink: 0; color: var(--ink-2); font-weight: 650; font-variant-numeric: tabular-nums; }
.fold-title .badge { height: 20px; font-size: .68rem; }
.fold-sub { display: flex; gap: 12px; min-width: 0; font-size: .78rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; }
.fold-sub > * { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fold-sub > .fold-alert { flex-shrink: 0; color: var(--danger-text); font-weight: 650; }
.fold-quote { color: var(--ink-2); }
.fold-mono { font-family: var(--font-mono); font-size: .74rem; }
.fold-side { display: flex; align-items: center; gap: 10px; }
.fold-side time { font-size: .76rem; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fold-side .badge { height: 22px; font-size: .7rem; }
.fold-chevron { width: 9px; height: 9px; margin: 0 4px 0 2px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg) translate(-2px, -2px); transition: transform .3s var(--ease-out); }
.fold-head[aria-expanded="true"] .fold-chevron { transform: rotate(225deg) translate(-2px, -2px); }
.fold-body { padding: 0 16px 16px; border-top: 1px dashed var(--line-2); animation: notice-in .3s var(--ease-out); }
.fold-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(250px, 1fr); gap: 18px; align-items: start; }
.fold-info { display: grid; gap: 4px; min-width: 0; padding-top: 12px; }
.fold-info .kv { border-top: 0; }
.fold-remark { display: grid; gap: 3px; margin: 0 0 4px; padding: 10px 14px; border-radius: 12px; background: var(--violet-soft); box-shadow: inset 3px 0 0 var(--violet); }
.fold-remark-label { font-size: .72rem; font-weight: 700; color: var(--violet-text); }
.fold-remark p { font-size: .92rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.fold-act { display: grid; gap: 12px; margin-top: 14px; padding: 14px 16px; border-radius: 16px; background: var(--surface-2); }
.fold-act h4 { font-size: .74rem; font-weight: 700; letter-spacing: .06em; color: var(--ink-3); }
.fold-act-alt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding-top: 12px; border-top: 1px dashed var(--line-2); }
.fold-row-actions { align-items: center; padding-top: 6px; }
.fold-row-actions .drawer-note { flex-basis: 100%; margin: 0; font-size: .8rem; color: var(--ink-3); }

/* ---------- Afdian orders ---------- */
.afdian-health { display: grid; gap: 10px; padding: 12px 14px 12px 18px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); box-shadow: inset 4px 0 0 var(--accent), var(--shadow-xs); transition: opacity .2s, box-shadow .3s; }
.afdian-health[data-tone="warning"] { box-shadow: inset 4px 0 0 var(--gold), var(--shadow-xs); }
.afdian-health[data-tone="danger"] { box-shadow: inset 4px 0 0 var(--danger), var(--shadow-xs); }
.afdian-health[aria-busy="true"] { opacity: .6; }
.afdian-health-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.afdian-signals { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; padding: 0; list-style: none; }
.afdian-signal { display: grid; gap: 1px; min-width: 0; }
.afdian-signal-label { font-size: .72rem; color: var(--ink-3); }
.afdian-signal strong { display: inline-flex; align-items: center; gap: 7px; font-size: .88rem; font-variant-numeric: tabular-nums; }
.afdian-signal[data-tone] strong::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.afdian-signal[data-tone="ok"] strong { color: var(--accent-text); }
.afdian-signal[data-tone="ok"] strong::before { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.afdian-signal[data-tone="warning"] strong { color: var(--warning-text); }
.afdian-signal[data-tone="danger"] strong { color: var(--danger-text); }
.afdian-setup-toggle[aria-expanded="true"] { background: var(--surface-3); color: var(--ink); }
.afdian-alerts { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.afdian-alerts li { padding: 7px 12px; border-radius: 10px; font-size: .82rem; font-weight: 600; background: var(--warning-soft); color: var(--warning-text); overflow-wrap: anywhere; }
.afdian-alerts li[data-tone="danger"] { background: var(--danger-soft); color: var(--danger-text); }
.afdian-setup { display: grid; gap: 12px; padding-top: 12px; border-top: 1px dashed var(--line-2); animation: notice-in .3s var(--ease-out); }
.afdian-plans { display: flex; flex-wrap: wrap; gap: 10px; }
.afdian-plans > div { display: grid; gap: 2px; min-width: 0; padding: 10px 14px; border-radius: 12px; background: var(--surface-2); }
.afdian-plans dt { font-size: .72rem; color: var(--ink-3); }
.afdian-plans dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.afdian-plans strong { font-size: 1rem; font-variant-numeric: tabular-nums; }
.afdian-plans code { font-size: .72rem; color: var(--ink-3); overflow-wrap: anywhere; }
.afdian-probe-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.afdian-probe { padding: 2px 14px 6px; border-radius: 14px; border: 1px dashed var(--line-2); }
.afdian-probe[data-state="error"] { padding: 0; border: 0; }
.afdian-probe .notice { margin: 0; }
.queue-tabs { display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-xs); overflow-x: auto; scrollbar-width: none; }
.queue-tabs::-webkit-scrollbar { display: none; }
.queue-tabs > button { display: inline-flex; flex-shrink: 0; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 0; border-radius: 12px; background: none; color: var(--ink-2); font-size: .88rem; font-weight: 650; white-space: nowrap; transition: background-color .2s, color .2s; }
.queue-tabs > button:hover { background: var(--surface-2); color: var(--ink); }
.queue-tabs > button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
:root[data-theme="dark"] .queue-tabs > button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.queue-count { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--surface-3); color: var(--ink-2); font-size: .72rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.queue-count:empty { display: none; }
.queue-count[data-zero="true"] { opacity: .55; }
.queue-tabs > button[data-tone="danger"] .queue-count:not([data-zero="true"]) { background: var(--danger); color: #fff; }
.queue-tabs > button[data-tone="warning"] .queue-count:not([data-zero="true"]) { background: var(--gold); color: #3a2600; }
.queue-tabs > button[aria-pressed="true"] .queue-count[data-zero="true"] { background: rgb(255 255 255 / .16); color: inherit; }
.queue-gap { flex: 1 0 14px; }
.afdian-claim { display: grid; gap: 8px; }
.afdian-claim-line { display: flex; flex-wrap: wrap; gap: 8px; }
.afdian-claim-line .input { flex: 1 1 200px; min-width: 0; min-height: 38px; padding-block: 6px; font-size: .84rem; }
.afdian-claim-line select.input { flex: 0 0 auto; width: auto; }
.afdian-claim .btn { justify-self: start; }

/* ---------- Redemption codes ---------- */
.redeem-composer { display: grid; gap: 16px; padding: 20px 22px; border-radius: 22px; border: 1px solid var(--line); background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--violet) 10%, transparent), transparent 55%), radial-gradient(90% 120% at 0% 100%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%), var(--surface); box-shadow: var(--shadow-md); animation: view-in .35s var(--ease-out); }
.composer-row { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 14px; }
.composer-label { font-size: .8rem; font-weight: 700; color: var(--ink-3); }
.composer-field { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; min-width: 0; }
.composer-inline { display: inline-flex; align-items: center; gap: 8px; font-size: .86rem; color: var(--ink-2); }
.composer-inline .input { width: 104px; min-height: 38px; padding: 6px 10px; font-variant-numeric: tabular-nums; }
.composer-date { width: auto; min-height: 38px; padding: 6px 10px; font-size: .86rem; font-variant-numeric: tabular-nums; }
.composer-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px dashed var(--line-2); }
.composer-summary { flex: 1 1 260px; font-size: .9rem; font-weight: 650; }
.composer-summary[data-kind="error"] { color: var(--danger-text); }
.composer-foot .form-actions { margin: 0; }
.redeem-composer > .notice { margin: 0; }
.redeem-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.redeem-lookup { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 12px 14px; border-radius: 16px; border: 1px dashed var(--line-2); background: var(--surface-2); animation: notice-in .3s var(--ease-out); }
.redeem-lookup .input { flex: 1 1 320px; min-width: 0; min-height: 40px; padding-block: 6px; letter-spacing: .04em; }
.redeem-lookup .field-hint, .redeem-lookup .notice { flex-basis: 100%; margin: 0; }
.redeem-lookup-result { display: grid; gap: 8px; padding: 10px; border-radius: 18px; background: var(--violet-soft); animation: notice-in .3s var(--ease-out); }
.redeem-lookup-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 4px 0 8px; font-size: .84rem; color: var(--violet-text); }
.redeem-row[data-state="REVOKED"] .fold-name, .redeem-row[data-state="EXPIRED"] .fold-name { color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 1px; }
.redeem-result { width: min(600px, calc(100% - 32px)); }
.redeem-result-head { display: flex; align-items: center; gap: 14px; }
.redeem-result-head h2 { margin-top: 2px; font-size: 1.25rem; }
.redeem-result-art { display: grid; place-items: center; width: 52px; height: 52px; flex-shrink: 0; border-radius: 16px; color: #fff; background: var(--brand-gradient); box-shadow: 0 14px 26px -14px rgb(106 63 210 / .75); animation: ticket-pop .7s var(--ease-out) both, brand-flow 10s linear infinite; }
.redeem-result-art svg.icon { width: 26px; height: 26px; }
@keyframes ticket-pop { 0% { opacity: 0; scale: .4; rotate: -16deg; } 65% { opacity: 1; scale: 1.08; rotate: 4deg; } 100% { scale: 1; rotate: 0deg; } }
.redeem-codes { display: grid; gap: 2px; max-height: min(340px, 42dvh); margin: 0; padding: 10px; border-radius: 14px; background: #0d1912; list-style: none; counter-reset: code; overflow: auto; scrollbar-width: thin; }
:root[data-theme="dark"] .redeem-codes { background: #050a07; box-shadow: inset 0 0 0 1px var(--line); }
.redeem-codes li { display: flex; align-items: baseline; gap: 12px; padding: 5px 8px; border-radius: 8px; counter-increment: code; }
.redeem-codes li:hover { background: rgb(255 255 255 / .05); }
.redeem-codes li::before { content: counter(code, decimal-leading-zero); min-width: 2ch; color: rgb(216 245 226 / .38); font-family: var(--font-mono); font-size: .7rem; }
.redeem-codes code { color: #d8f5e2; font-size: .88rem; letter-spacing: .04em; user-select: all; overflow-wrap: anywhere; }
.redeem-result-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.redeem-result-actions #redeem-result-close { margin-left: auto; }
.redeem-result .notice { margin: 0; }

/* ---------- Xianyu sales ---------- */
/* One nav entry, two views: orders and product setup, switched by a pill pair under the title. */
.sale-views { display: inline-flex; justify-self: start; gap: 2px; padding: 4px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-xs); }
.sale-views > button { height: 36px; padding: 0 16px; border: 0; border-radius: 10px; background: none; color: var(--ink-2); font-size: .88rem; font-weight: 700; transition: background-color .2s, color .2s; }
.sale-views > button:hover { background: var(--surface-2); color: var(--ink); }
.sale-views > button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
:root[data-theme="dark"] .sale-views > button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.sale-health .field-hint { font-size: .76rem; }
/* "Issued" is easy to misread as "delivered"; the line says what it is not, in the margin of every order view. */
.sale-truth { position: relative; padding: 10px 14px 10px 40px; border-radius: 14px; background: var(--info-soft); color: var(--info-text); font-size: .84rem; line-height: 1.6; }
.sale-truth::before { content: "i"; position: absolute; left: 13px; top: 11px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--info-text); color: var(--info-soft); font: 800 .72rem/1 var(--font-mono); }
.sale-editor { background: radial-gradient(120% 140% at 100% 0%, rgb(255 214 0 / .12), transparent 55%), radial-gradient(90% 120% at 0% 100%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%), var(--surface); }
.sale-editor-head { display: flex; align-items: center; gap: 10px; }
.sale-editor-head h3 { font-size: 1.1rem; letter-spacing: -.01em; }
.sale-wide { flex: 1 1 420px; min-width: 0; min-height: 40px; padding-block: 6px; }
.sale-id { flex: 0 1 260px; min-width: 0; min-height: 40px; padding-block: 6px; }
.sale-spec { flex: 1 1 180px; min-width: 0; min-height: 40px; padding-block: 6px; }
#sale-price { width: 120px; }
.sale-editor .composer-row { align-items: start; }
.sale-editor .composer-label { padding-top: 10px; }
.sale-editor .composer-field .field-hint { flex-basis: 100%; margin: 0; }
.sale-conflict { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; padding: 12px 14px; border-radius: 14px; background: var(--warning-soft); color: var(--warning-text); font-size: .86rem; font-weight: 600; line-height: 1.6; animation: notice-in .3s var(--ease-out); }
.sale-conflict p { flex: 1 1 320px; }
.fold-rev { font-size: .74rem; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sale-product[data-enabled="false"] .fold-name { color: var(--ink-2); }
.sale-link { overflow-wrap: anywhere; font-size: .8rem; }
/* Issued, redeemed and after-sale each come from somewhere else, so they sit side by side, never merged into one badge. */
.sale-states { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 6px; }
.sale-state { display: grid; align-content: start; gap: 2px; min-width: 0; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); box-shadow: inset 0 3px 0 var(--line-2); }
.sale-state[data-tone="ok"] { box-shadow: inset 0 3px 0 var(--accent); }
.sale-state[data-tone="violet"] { box-shadow: inset 0 3px 0 var(--violet); }
.sale-state[data-tone="warning"] { box-shadow: inset 0 3px 0 var(--gold); }
.sale-state-label { font-size: .7rem; font-weight: 700; letter-spacing: .06em; color: var(--ink-3); }
.sale-state strong { font-size: .92rem; }
.sale-state-detail { font-size: .74rem; line-height: 1.5; color: var(--ink-3); overflow-wrap: anywhere; }
.sale-act-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sale-act-line .field-hint { flex-basis: 100%; margin: 0; }
.sale-order[data-code="REVOKED"] .fold-name, .sale-order[data-code="EXPIRED"] .fold-name { color: var(--ink-3); }
.sale-content-art { background: linear-gradient(110deg, #ffd21f, #f29d0a); color: #3a2600; box-shadow: 0 14px 26px -14px rgb(200 140 0 / .8); animation: ticket-pop .7s var(--ease-out) both; }
.sale-content-text { max-height: min(340px, 42dvh); margin: 0; padding: 14px 16px; border-radius: 14px; background: #0d1912; color: #d8f5e2; font: .86rem/1.7 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; overflow: auto; user-select: all; }
:root[data-theme="dark"] .sale-content-text { background: #050a07; box-shadow: inset 0 0 0 1px var(--line); }
.redeem-result-actions #sale-content-close { margin-left: auto; }
@media (max-width: 680px) {
  .sale-states { grid-template-columns: 1fr; }
  .fold-side { flex-wrap: wrap; row-gap: 6px; }
  .sale-editor .composer-label { padding-top: 0; }
  .redeem-result-actions #sale-content-close { margin-left: 0; }
  .fold-head { grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 12px; padding: 12px 14px; }
  .fold-side { grid-column: 2; grid-row: 2; }
  .fold-chevron { grid-column: 3; grid-row: 1; }
  .fold-grid { grid-template-columns: 1fr; gap: 0; }
  .fold-body { padding: 0 14px 14px; }
  .composer-row { grid-template-columns: 1fr; gap: 8px; }
  .redeem-composer { padding: 18px; border-radius: 18px; }
  .queue-gap { flex: 0 0 1px; }
  .redeem-result-actions #redeem-result-close { margin-left: 0; }
}

/* Animated cape content */
.anim-admin-card { grid-template-columns: minmax(0, 1fr); }
.anim-admin-sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 6px; min-height: 52px; padding: 10px; border-radius: 14px; background: var(--surface-2); }
.anim-admin-sheet[data-image="loading"]::before, .anim-admin-sheet[data-image="error"]::before { grid-column: 1 / -1; align-self: center; font-size: .82rem; color: var(--ink-3); }
.anim-admin-sheet[data-image="loading"]::before { content: "正在读取图案…"; }
.anim-admin-sheet[data-image="error"]::before { content: "图案读取失败或与登记的 Hash 不一致。"; color: var(--danger-text); }
.anim-admin-frame { aspect-ratio: 2 / 1; border-radius: 6px; background-color: var(--surface); background-repeat: no-repeat; image-rendering: pixelated; box-shadow: inset 0 0 0 1px var(--line); }
.anim-admin-card[data-status="blocked"] .anim-admin-sheet { opacity: .55; }

/* ---------- Page effects ---------- */
/* Counter: the overview numbers roll on the stat value's own line height. */
.stat-value { --roll-h: 1.05em; }
/* Line Sidebar (shell.js): the items near the pointer lean aside. */
.admin-nav.line-nav > button { translate: calc(var(--near, 0) * 12px) 0; transition: translate .25s var(--ease-out), background-color .2s, color .2s; }
.admin-nav.line-nav > [style*="--near"]:not([aria-current]) { color: color-mix(in srgb, var(--ink) calc(var(--near, 0) * 100%), var(--ink-2)); }
.confirm-hold-hint { margin: 0 0 -4px; }