:root {
    --ink: #172033;
    --muted-ink: #5c687d;
    --canvas: #f3f6fa;
    --paper: #ffffff;
    --line: #dce3ed;
    --line-strong: #c6d0de;
    --blue: #2457d6;
    --blue-dark: #173b9c;
    --blue-soft: #e9efff;
    --orange: #c84f13;
    --green: #13795b;
    --green-soft: #e7f5ef;
    --amber: #a45b08;
    --amber-soft: #fff3d9;
    --red: #b4233b;
    --red-soft: #fdecef;
    --sidebar: #111a2b;
    --sidebar-muted: #9caac0;
    --shadow: 0 14px 40px rgba(20, 38, 70, .07);
    font-family: "Noto Sans SC", sans-serif;
    color: var(--ink);
    background: var(--canvas);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; }
html { overflow-x: hidden; }
body { background: var(--canvas); font-size: 15px; line-height: 1.5; }
a { color: inherit; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid rgba(36,87,214,.35); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 248px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; z-index: 20; height: 100vh; display: flex; flex-direction: column; padding: 24px 16px 18px; color: white; background: var(--sidebar); border-right: 1px solid #25314a; }
.brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.brand__mark { width: 39px; height: 39px; display: grid; place-items: center; color: white; background: var(--blue); font: 700 13px/1 "Noto Sans Mono", "Noto Sans SC", monospace; letter-spacing: -.5px; border-radius: 4px 12px 4px 4px; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 17px; letter-spacing: .1px; }
.brand small { margin-top: 1px; color: var(--sidebar-muted); font: 600 9px/1.2 "Noto Sans Mono", "Noto Sans SC", monospace; letter-spacing: 1.5px; }
.live-rail { display: flex; align-items: center; gap: 8px; margin: 28px 4px 14px; padding: 10px 12px; color: #b9c6da; background: #172238; border-left: 2px solid #38c793; font-size: 12px; }
.live-rail span, .pulse { width: 7px; height: 7px; flex: none; border-radius: 50%; background: #38c793; box-shadow: 0 0 0 4px rgba(56,199,147,.12); }
.nav-list { display: grid; gap: 5px; }
.nav-entry { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 38px; align-items: stretch; min-height: 46px; color: #b8c4d7; border-radius: 7px; transition: background-color .18s ease, color .18s ease; }
.nav-entry:hover { color: white; background: #1a2740; }
.nav-entry.active { color: white; background: #223251; box-shadow: inset 3px 0 var(--blue); }
.nav-entry:hover, .nav-entry:focus-within { z-index: 40; }
.nav-link { display: flex; min-width: 0; align-items: center; gap: 12px; padding: 0 4px 0 13px; color: inherit; text-decoration: none; }
.nav-link:focus-visible { position: relative; z-index: 1; border-radius: 6px; }
.nav-entry > svg, .nav-list svg, .icon-button svg { width: 19px; height: 19px; fill: currentColor; }
.nav-help { position: relative; display: grid; place-items: center; width: 38px; min-height: 46px; padding: 0; color: #7f91ad; background: transparent; border: 0; border-radius: 6px; }
.nav-help:hover, .nav-help:focus-visible { color: #dce7fb; background: rgba(255,255,255,.09); outline: 0; }
.nav-help > svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.nav-help__tooltip { position: absolute; z-index: 30; top: 50%; left: calc(100% + 9px); width: 252px; padding: 11px 13px; color: #edf3fc; background: #18263e; border: 1px solid #3a4d6d; border-radius: 6px; box-shadow: 0 12px 26px rgba(5,12,25,.28); font-size: 12px; line-height: 1.55; text-align: left; pointer-events: none; opacity: 0; visibility: hidden; transform: translate(-5px, -50%); transition: opacity .16s ease, transform .16s ease, visibility .16s ease; }
.nav-help__tooltip::before { content: ""; position: absolute; top: 50%; left: -5px; width: 8px; height: 8px; background: #18263e; border-left: 1px solid #3a4d6d; border-bottom: 1px solid #3a4d6d; transform: translateY(-50%) rotate(45deg); }
.nav-help:hover + .nav-help__tooltip, .nav-help:focus-visible + .nav-help__tooltip { opacity: 1; visibility: visible; transform: translate(0, -50%); }
.sidebar__footer { display: grid; grid-template-columns: 35px 1fr auto; align-items: center; gap: 9px; margin-top: auto; padding: 16px 5px 0; border-top: 1px solid #29344a; }
.sidebar__footer strong, .sidebar__footer small { display: block; }
.sidebar__footer strong { overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.sidebar__footer small { color: var(--sidebar-muted); font-size: 11px; }
.admin-avatar { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #475773; border-radius: 50%; color: #dce5f4; font-size: 12px; }
.icon-button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; color: #aab8ce; background: transparent; border: 0; border-radius: 5px; }
.icon-button:hover { color: white; background: #263551; }

.main-content { min-width: 0; padding: 38px clamp(22px, 3.2vw, 52px) 64px; }
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.page-header h1 { margin: 3px 0 1px; font-size: clamp(28px, 3vw, 39px); line-height: 1.18; letter-spacing: -1.5px; }
.page-header p { margin: 0; color: var(--muted-ink); }
.eyebrow, .section-code { color: var(--blue); font: 700 10px/1.3 "Noto Sans Mono", "Noto Sans SC", monospace; letter-spacing: 1.7px; }
.server-clock { display: flex; align-items: center; gap: 11px; min-width: 190px; padding: 11px 14px; background: var(--paper); border: 1px solid var(--line); border-radius: 7px; box-shadow: 0 5px 16px rgba(20,38,70,.04); }
.server-clock strong, .server-clock small { display: block; }
.server-clock strong { font-size: 12px; }
.server-clock small { margin-top: 2px; color: var(--muted-ink); font: 500 11px "Noto Sans Mono", "Noto Sans SC", monospace; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.metric { position: relative; min-height: 140px; padding: 18px 20px 16px; overflow: hidden; background: var(--paper); border: 1px solid var(--line); border-top: 3px solid #7c8ca6; border-radius: 8px; box-shadow: var(--shadow); }
.metric::after { content: ""; position: absolute; right: -18px; bottom: -32px; width: 78px; height: 78px; border: 15px solid rgba(124,140,166,.08); border-radius: 50%; }
.metric--primary { border-top-color: var(--blue); }
.metric--warning { border-top-color: var(--orange); }
.metric--success { border-top-color: var(--green); }
.metric > span, .metric > small, .metric > a { display: block; }
.metric > span { color: var(--muted-ink); font-weight: 600; font-size: 13px; }
.metric > strong { display: block; margin: 5px 0 3px; font: 650 38px/1.15 "Noto Sans Mono", "Noto Sans SC", monospace; letter-spacing: -2px; }
.metric > small { color: #788499; font-size: 12px; }
.metric > a { position: relative; z-index: 1; color: var(--orange); font-size: 12px; font-weight: 700; text-decoration: none; }
.payment-metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: -4px; }
.metric--money > strong { font-size: 30px; overflow-wrap: anywhere; }

.content-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(290px, .7fr); gap: 18px; }
.panel { min-width: 0; background: var(--paper); border: 1px solid var(--line); border-radius: 9px; box-shadow: var(--shadow); }
.panel__header { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 20px; border-bottom: 1px solid var(--line); }
.panel__header h2 { margin: 3px 0 0; font-size: 18px; line-height: 1.25; }
.text-link, .row-link { color: var(--blue); font-weight: 650; text-decoration: none; }
.text-link:hover, .row-link:hover { color: var(--blue-dark); text-decoration: underline; }
.table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; white-space: nowrap; }
th, td { padding: 14px 16px; text-align: left; border-bottom: 1px solid #e9edf3; }
th { color: #6f7a8d; background: #fafbfd; font-size: 11px; font-weight: 700; letter-spacing: .45px; }
td { color: #465268; font-size: 13px; }
td strong, td small { display: block; }
td strong { color: var(--ink); }
td small { margin-top: 2px; color: #7a879a; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: #fbfcff; }
.row--attention td:first-child { box-shadow: inset 3px 0 var(--orange); }
.empty-cell { padding: 30px 18px; color: #788499; text-align: center; white-space: normal; }
.status, .permission { display: inline-flex; align-items: center; min-height: 25px; padding: 3px 9px; border-radius: 999px; color: #566176; background: #edf1f5; font-size: 11px; font-weight: 700; }
.status::before, .permission::before { content: ""; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.status--active, .permission--on { color: var(--green); background: var(--green-soft); }
.status--pending { color: var(--amber); background: var(--amber-soft); }
.status--suspended { color: var(--red); background: var(--red-soft); }
.activity-list { list-style: none; margin: 0; padding: 10px 20px 18px; }
.activity-list li { position: relative; display: grid; grid-template-columns: 13px 1fr; gap: 10px; padding: 12px 0; }
.activity-list li:not(:last-child)::after { content: ""; position: absolute; left: 4px; top: 27px; bottom: -10px; width: 1px; background: var(--line); }
.activity-dot { width: 9px; height: 9px; margin-top: 5px; border: 2px solid var(--paper); border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.activity-list strong { font-size: 13px; }
.activity-list p { margin: 2px 0; color: var(--muted-ink); font-size: 12px; }
.activity-list time { color: #8a95a6; font: 500 10px "Noto Sans Mono", "Noto Sans SC", monospace; }

.filter-bar { display: flex; align-items: flex-end; gap: 10px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.user-filter-bar { flex-wrap: wrap; }
.user-registration-range { width: 340px; }
.date-range-inputs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 7px; }
.date-range-inputs input { min-width: 0; }
.date-range-inputs span { color: var(--muted-ink); font-size: 12px; }
.user-list-tabs { width: fit-content; max-width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, auto)); margin-bottom: 14px; overflow-x: auto; background: var(--paper); border: 1px solid var(--line-strong); border-radius: 7px; }
.user-list-tab { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 8px 18px; color: var(--muted-ink); border-right: 1px solid var(--line); font-size: 13px; font-weight: 650; white-space: nowrap; }
.user-list-tab:last-child { border-right: 0; }
.user-list-tab:hover { color: var(--blue); background: #f7f9fd; }
.user-list-tab.active { color: white; background: var(--blue); }
.field { display: grid; gap: 6px; }
.field label { color: #39465a; font-size: 12px; font-weight: 700; }
.field label small { color: #7b8798; font-weight: 400; }
.field input, .field select { width: 100%; min-height: 42px; padding: 8px 11px; color: var(--ink); background: white; border: 1px solid var(--line-strong); border-radius: 5px; }
.field input:hover, .field select:hover { border-color: #9cabc0; }
.field input:focus, .field select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(36,87,214,.1); outline: 0; }
.field > span { color: var(--red); font-size: 12px; }
.field > small { color: #7b8798; font-size: 11px; }
.field--search { width: min(330px, 40vw); }
.field--compact { width: 160px; }
.button { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 17px; border: 1px solid transparent; border-radius: 5px; font-weight: 700; text-decoration: none; transition: transform .15s ease, background-color .15s ease, border-color .15s ease; }
.button > svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.button:active { transform: translateY(1px); }
.button--primary { color: white; background: var(--blue); border-color: var(--blue); }
.button--primary:hover { background: var(--blue-dark); border-color: var(--blue-dark); }
.button--secondary { color: var(--ink); background: white; border-color: var(--line-strong); }
.button--secondary:hover { border-color: var(--blue); color: var(--blue); }
.button--ghost { color: var(--muted-ink); background: transparent; }
.button--ghost:hover { background: #edf1f6; }
.button--wide { width: 100%; }
.back-link { display: inline-block; margin-bottom: 18px; color: var(--muted-ink); font-size: 12px; text-decoration: none; }
.back-link:hover { color: var(--blue); }
.page-header--detail { align-items: center; }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(250px, .65fr); gap: 18px; }
.control-panel form { padding: 20px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 17px; }
.validity-field { align-content: start; }
.validity-field.is-disabled { opacity: .55; }
.validity-custom { margin-top: 5px; padding: 11px 12px; background: #f8fafd; border: 1px solid var(--line); border-radius: 5px; }
.validity-custom__input { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.validity-custom__input input { padding-right: 42px; }
.validity-custom__input > span { margin-left: -34px; padding-right: 12px; color: var(--muted-ink); font-size: 12px; pointer-events: none; }
.field--full { grid-column: 1 / -1; }
.form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; padding-top: 3px; }
.button--export { color: var(--blue-dark); background: var(--blue-soft); border-color: #b8c9f6; }
.button--export:hover { color: white; background: var(--blue); border-color: var(--blue); }
.button--export:disabled { cursor: wait; color: #758199; background: #edf0f5; border-color: #d8dee7; }
.button--danger-outline { color: var(--red); background: white; border-color: #e4a8b3; }
.button--danger-outline:hover { color: white; background: var(--red); border-color: var(--red); }
.button--danger { color: white; background: var(--red); border-color: var(--red); }
.button--danger:hover { background: #90172d; border-color: #90172d; }
.export-hint { margin: -7px 0 0; color: #7b8798; font-size: 11px; text-align: right; }
.switch-row { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 14px; background: #f8fafd; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; }
.switch-row span strong, .switch-row span small { display: block; }
.switch-row span strong { font-size: 13px; }
.switch-row span small { margin-top: 2px; color: var(--muted-ink); font-size: 11px; }
.switch-row input { position: absolute; opacity: 0; pointer-events: none; }
.switch-row i { position: relative; width: 42px; height: 24px; flex: none; background: #a8b2c1; border-radius: 999px; transition: background .18s ease; }
.switch-row i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: white; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .18s ease; }
.switch-row input:checked + i { background: var(--green); }
.switch-row input:checked + i::after { transform: translateX(18px); }
.switch-row input:focus-visible + i { outline: 3px solid rgba(36,87,214,.35); outline-offset: 2px; }
.safety-note { margin: 0 20px 20px; padding: 13px 15px; color: #71420e; background: #fff7e7; border-left: 3px solid var(--orange); }
.safety-note strong { font-size: 12px; }
.safety-note p { margin: 2px 0 0; font-size: 12px; }
.summary-card { padding: 22px; color: #e9eef7; background: var(--sidebar); border-radius: 9px; box-shadow: var(--shadow); }
.summary-card h2 { margin: 5px 0 22px; font-size: 20px; }
.summary-card dl { margin: 0; }
.summary-card dl div { display: grid; grid-template-columns: 88px 1fr; gap: 10px; padding: 13px 0; border-top: 1px solid #2b3850; }
.summary-card dt { color: #95a4ba; font-size: 12px; }
.summary-card dd { margin: 0; text-align: right; font-size: 12px; font-weight: 700; }
.text-success { color: #52d3a2; }
.text-danger { color: #ff8192; }
.section-gap { margin-top: 18px; }
.count-label { color: var(--muted-ink); font-size: 12px; }
.row-link--button { padding: 0; background: none; border: 0; font-size: 12px; }
.row-link--danger { color: var(--red); }
.inline-confirm { display: inline-block; }
.inline-confirm summary { color: var(--red); font-size: 12px; font-weight: 650; cursor: pointer; list-style: none; }
.inline-confirm summary::-webkit-details-marker { display: none; }
.inline-confirm[open] form { width: 220px; display: grid; gap: 9px; margin-top: 8px; padding: 12px; white-space: normal; color: var(--ink); background: white; border: 1px solid var(--line-strong); border-left: 3px solid var(--red); border-radius: 5px; box-shadow: 0 8px 20px rgba(20,38,70,.1); }
.inline-confirm form span { color: var(--muted-ink); font-size: 11px; }
.inline-confirm--approve summary { color: var(--green); }
.inline-confirm--approve[open] form { border-left-color: var(--green); }
.pagination { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; color: var(--muted-ink); border-top: 1px solid var(--line); font-size: 12px; }
.pagination > div { display: flex; gap: 8px; }
.pagination .button { min-height: 36px; padding: 6px 12px; }
.audit-list { list-style: none; margin: 0; padding: 4px 20px 14px; }
.audit-list li { display: grid; grid-template-columns: 140px 110px minmax(200px, 1fr) 120px; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid #edf0f4; font-size: 12px; }
.audit-list li:last-child { border-bottom: 0; }
.audit-list time { color: #788499; font-family: "Noto Sans Mono", "Noto Sans SC", monospace; }
.audit-list code { overflow: hidden; color: #7c8798; text-overflow: ellipsis; }

.settings-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: 18px; }
.administrator-table { min-width: 1600px; }
.administrator-manage-link { min-height: 36px; padding: 6px 12px; white-space: nowrap; }
.access-denied-panel { max-width: 720px; margin: clamp(32px, 8vh, 88px) auto 0; padding: clamp(28px, 5vw, 52px); }
.access-denied-panel h1 { margin: 12px 0; }
.access-denied-panel p { max-width: 580px; margin: 0 0 28px; color: var(--muted-ink); line-height: 1.75; }
.form-stack { display: grid; gap: 16px; padding: 20px; }
.password-settings { width: 100%; max-width: 560px; padding: 0; }
.form-grid--settings { margin-top: 3px; }
.policy-explainer { margin-top: 18px; padding: 24px; color: white; background: linear-gradient(110deg, #14203a, #192d55); border-radius: 9px; box-shadow: var(--shadow); }
.policy-explainer h2 { margin: 4px 0 20px; }
.policy-explainer ol { counter-reset: chain; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 0; padding: 0; list-style: none; background: #384765; }
.policy-explainer li { position: relative; min-height: 105px; padding: 18px 16px 15px 52px; background: #1c2b49; }
.policy-explainer li::before { counter-increment: chain; content: "0" counter(chain); position: absolute; left: 16px; top: 18px; color: #6286e7; font: 700 12px "Noto Sans Mono", "Noto Sans SC", monospace; }
.policy-explainer strong, .policy-explainer span { display: block; }
.policy-explainer strong { margin-bottom: 5px; }
.policy-explainer span { color: #b8c4d7; font-size: 12px; }
.page-header--codes { display: grid; grid-template-columns: 235px minmax(0, 1fr); align-items: center; gap: 32px; }
.page-header--codes h1 { font-size: 39px; letter-spacing: 0; }
.code-rules { min-width: 0; }
.code-rules h2 { margin: 0 0 7px; font-size: 13px; line-height: 1.5; letter-spacing: 0; }
.code-rules ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 28px; margin: 0; padding-left: 17px; color: var(--muted-ink); font-size: 12px; line-height: 1.6; }
.code-rules li { min-width: 0; overflow-wrap: anywhere; }
.nav-link img { width: 19px; height: 19px; filter: brightness(0) invert(1); opacity: .8; }
.generation-summary { display: grid; gap: 5px; font-size: 13px; color: var(--muted-ink); }
.generation-summary strong { color: var(--ink); }
.generation-summary small { margin-left: 8px; font-size: 11px; }
[data-own-code-generator] .alert { margin: 0; }
[data-generate-submit] { min-width: 132px; }
[data-generate-submit]:disabled { opacity: .6; cursor: progress; }
.generated-code-dialog { width: min(800px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 0; color: var(--ink); background: var(--paper); border: 1px solid var(--line-strong); border-radius: 8px; box-shadow: 0 18px 60px rgba(0,0,0,.22); }
.generated-code-dialog[open] { display: flex; flex-direction: column; overflow: hidden; }
.generated-code-dialog::backdrop { background: rgba(12,20,32,.45); }
.generated-code-dialog__header { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.generated-code-dialog h2 { margin: 0; font-size: 18px; line-height: 1.5; letter-spacing: 0; }
.generated-code-dialog .icon-button { flex: none; width: 40px; height: 40px; padding: 9px; color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 5px; }
.generated-code-dialog .icon-button:hover { background: var(--blue-soft); }
.generated-code-dialog .icon-button img { width: 20px; height: 20px; display: block; }
.generated-code-list { min-height: 0; max-height: min(60dvh, 480px); overflow: auto; padding: 0 18px; }
.generated-code-row { display: grid; grid-template-columns: minmax(0, 1fr) 40px; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.generated-code-row:last-child { border-bottom: 0; }
.generated-code-row code { min-width: 0; overflow-wrap: anywhere; font: 600 13px/1.7 "Noto Sans Mono", "Noto Sans SC", monospace; user-select: all; }
.generated-code-dialog__footer { display: flex; flex: none; align-items: center; gap: 12px; min-height: 64px; padding: 12px 18px; border-top: 1px solid var(--line); }
.generated-code-dialog__footer [data-copy-all] { flex: none; min-height: 40px; white-space: nowrap; }
.generated-code-dialog__footer img { width: 18px; height: 18px; }
.generated-copy-status { flex: 1; min-width: 0; min-height: 20px; margin: 0; color: var(--green); font-size: 13px; overflow-wrap: anywhere; }
.session-policy { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; margin: 18px 0; padding: 0 0 18px; border-bottom: 1px solid var(--line); }
.session-policy .field { width: 280px; max-width: 100%; }
.generated-codes { margin-top: 18px; padding: 22px; color: #113e31; background: var(--green-soft); border: 1px solid #a5d9c5; border-left: 4px solid var(--green); border-radius: 7px; }
.generated-codes h2 { margin: 4px 0 2px; font-size: 19px; }
.generated-codes p { margin: 0 0 15px; color: #376a5b; font-size: 12px; }
.code-stack { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 7px; }
.code-stack code { display: block; padding: 10px 12px; color: #163d32; background: rgba(255,255,255,.7); border: 1px solid #b6ddcf; border-radius: 4px; font: 700 13px "Noto Sans Mono", "Noto Sans SC", monospace; user-select: all; }
.registration-code-record { min-width: 340px; }
.registration-code-record--compact { width: 132px !important; min-width: 132px !important; max-width: 132px !important; }
.registration-code-record--compact .registration-code { white-space: nowrap; }
.registration-code-record small { margin-top: 4px; color: #8a6a31; font-size: 10px; white-space: normal; }
.registration-code { display: block; color: #263e70; font: 650 12px "Noto Sans Mono", "Noto Sans SC", monospace; letter-spacing: .15px; user-select: all; }
.registration-code--masked { color: #7e8797; }
.registration-code[data-copy-registration-code] { cursor: copy; touch-action: manipulation; }
.registration-code[data-copy-registration-code=""] { cursor: not-allowed; }
.registration-code-copy-toast { position: fixed; z-index: 100; right: 14px; bottom: 14px; max-width: calc(100% - 28px); padding: 12px 18px; color: var(--green); background: var(--green-soft); border: 1px solid #a5d9c5; border-radius: 6px; box-shadow: var(--shadow); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; pointer-events: none; opacity: 0; }
.registration-code-copy-toast.is-visible { opacity: 1; }
.registration-code-copy-toast.is-error { color: var(--red); background: var(--red-soft); border-color: #eeb4be; }
.registration-code-table { min-width: 1320px; }
.registration-code-table--orders { min-width: 1900px; }
.registration-code-table--manager { min-width: 1720px; }
.unused-code-table { min-width: 1460px; }
.paid-code-table { min-width: 1880px; }
.paid-code-table td { vertical-align: top; }
.paid-code-table .registration-code-record:not(.registration-code-record--compact) { min-width: 286px; }
.unused-code-table td { vertical-align: top; }
.unused-code-table .issuance-order-number { min-width: 150px; overflow-wrap: anywhere; font-family: "Noto Sans Mono", "Noto Sans SC", monospace; user-select: all; }
.unused-code-table .registration-code-record:not(.registration-code-record--compact) { min-width: 286px; }
.unused-code-table .code-selection { width: 48px; min-width: 48px; padding-right: 6px; text-align: center; }
.unused-code-table .code-selection label { display: grid; place-items: center; }
.unused-code-table .code-selection input { width: 17px; height: 17px; accent-color: var(--blue); }
.bulk-code-actions { min-height: 58px; display: flex; align-items: center; justify-content: flex-end; gap: 14px; padding: 8px 20px; border-bottom: 1px solid var(--line); }
.bulk-code-actions > span { color: var(--muted-ink); font-size: 12px; }
.bulk-code-actions .button:disabled { opacity: .5; cursor: not-allowed; }
.registration-code-table--orders td { vertical-align: top; }
.registration-code-table--manager td { vertical-align: top; }
.registration-code-table--manager th:first-child,
.registration-code-table--manager td:first-child { width: 1%; min-width: 150px; padding-right: 6px; }
.registration-code-table--manager .issuance-order-number { overflow-wrap: anywhere; font-family: "Noto Sans Mono", "Noto Sans SC", monospace; user-select: all; }
.registration-code-table--manager .registration-code-record:not(.registration-code-record--compact) { min-width: 286px; }
.registration-code-table--manager th:nth-child(2),
.registration-code-table--manager td:nth-child(2) { width: 1%; min-width: 88px; padding-left: 6px; }
.registration-code-table--orders td > strong,
.registration-code-table--orders td > small,
.registration-code-table--orders td > code { display: block; margin-top: 4px; }
.registration-code-table--orders td > strong:first-child,
.registration-code-table--orders td > span:first-child { margin-top: 0; }
.registration-code-table--orders td:nth-child(2) { min-width: 175px; }
.registration-code-table--orders td:nth-child(3) { min-width: 210px; }
.registration-code-table--orders td:nth-child(4) { min-width: 230px; }
.registration-code-table--orders td:nth-child(5) { min-width: 190px; }
.registration-code-table--orders td:nth-child(6) { min-width: 260px; }
.registration-code-table--orders td:nth-child(7) { min-width: 175px; }
.code-type { display: inline-flex !important; width: fit-content; margin: 0 0 6px !important; padding: 3px 7px; color: #485a75; background: #edf1f6; border-radius: 999px; font-size: 10px; font-weight: 800; }
.code-type--vip { color: #765114; background: #fff0c9; border: 1px solid #eed697; }
.registration-code-row--vip { background: #fffdf8; }
.registration-code-row--vip:hover { background: #fffbf1 !important; }
.registration-code-row--vip .code-actions { background: #fffdf8; }
.registration-code-row--vip:hover .code-actions { background: #fffbf1 !important; }
.payment-order-id { max-width: 220px; overflow-wrap: anywhere; color: #43516a; font-size: 10px; user-select: all; }
.locked-operation { color: #7c6750; font-size: 11px; white-space: nowrap; }
.registration-code-table .email-address { min-width: 210px; font-family: "Noto Sans Mono", "Noto Sans SC", monospace; user-select: all; }
.registration-code-table th.code-actions,
.registration-code-table .code-actions { position: sticky; right: 0; z-index: 2; min-width: 86px; background: var(--paper); box-shadow: -12px 0 18px -18px rgba(20,38,70,.55); }
.registration-code-table th.code-actions { z-index: 3; background: #fafbfd; }
.registration-code-table tbody tr:hover .code-actions { background: #fbfcff; }
.registration-code-table .code-actions summary,
.registration-code-table .code-actions .row-link--button { min-width: 44px; min-height: 24px; display: inline-flex; align-items: center; justify-content: center; }
.inline-confirm--code-disable summary { color: var(--red); }
.inline-confirm--code-disable[open] form { width: 300px; margin-left: -214px; }
.inline-confirm--code-disable form strong { font-size: 12px; }
.inline-confirm--unused-code[open] form { width: 300px; margin-left: -214px; }
.inline-confirm--unused-code form strong { font-size: 12px; }
.phone-number { min-width: 126px; font-family: "Noto Sans Mono", "Noto Sans SC", monospace; user-select: all; }
.account-email { min-width: 200px; font-family: "Noto Sans Mono", "Noto Sans SC", monospace; user-select: all; }
.user-account-table { min-width: 3080px; }
.user-account-table td { vertical-align: top; }
.ai-font-payment-table { min-width: 1650px; }
.ai-font-generation-table { min-width: 2100px; }
.ai-font-payment-table td, .ai-font-generation-table td { vertical-align: top; }
.ai-font-file-name { min-width: 200px; max-width: 320px; white-space: normal; overflow-wrap: anywhere; }
.user-registration-date { min-width: 145px; }
.user-order-numbers { min-width: 155px; }
.user-order-number { overflow-wrap: anywhere; font-family: "Noto Sans Mono", "Noto Sans SC", monospace; user-select: all; }
.user-order-number + .user-order-number { margin-top: 8px; }
.user-registration-codes:not(.registration-code-record--compact) { min-width: 360px; }
.user-registration-codes .registration-code { letter-spacing: 0; }
.user-registration-code + .user-registration-code { margin-top: 8px; }
.user-registration-owners { min-width: 140px; }
.user-registration-owner + .user-registration-owner { margin-top: 8px; }
.record-remark-cell { width: 220px; min-width: 220px; white-space: normal; }
.record-remark-editor { width: 100%; min-width: 0; }
.record-remark-display { width: 100%; min-height: 38px; padding: 7px 8px; color: var(--ink); background: #f7f9fc; border: 1px solid transparent; border-radius: 4px; font: inherit; line-height: 1.45; text-align: left; overflow-wrap: anywhere; cursor: text; }
.record-remark-display:hover, .record-remark-display:focus-visible { background: white; border-color: var(--line-strong); outline: 0; }
.record-remark-display.is-empty { color: #929cad; text-align: center; }
.record-remark-editor textarea { width: 100%; min-height: 76px; resize: vertical; padding: 7px 8px; color: var(--ink); background: white; border: 1px solid var(--blue); border-radius: 4px; font: inherit; line-height: 1.45; }
.record-remark-editor textarea:focus { outline: 3px solid rgba(36,87,214,.1); }
.record-remark-actions { display: flex; gap: 6px; margin-top: 6px; }
.record-remark-actions .row-link--button { min-height: 28px; padding: 3px 8px; }
.record-remark-editor form[aria-busy="true"] { cursor: progress; opacity: .7; }
.device-limit-editor, .ai-font-limit-editor { display: flex; align-items: center; gap: 6px; min-width: 146px; margin: 0; }
.device-limit-editor input[type="number"], .ai-font-limit-editor input[type="number"] { width: 68px; height: 34px; padding: 5px 7px; color: var(--ink); background: white; border: 1px solid var(--line-strong); border-radius: 5px; font: inherit; }
.device-limit-editor input[type="number"]:focus, .ai-font-limit-editor input[type="number"]:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.device-limit-editor .row-link--button, .ai-font-limit-editor .row-link--button { min-width: 44px; min-height: 34px; }
.device-limit-editor[aria-busy="true"], .ai-font-limit-editor[aria-busy="true"] { cursor: progress; }
.device-limit-editor .row-link--button:disabled, .ai-font-limit-editor .row-link--button:disabled { opacity: .55; cursor: progress; }
.administrator-permission-editor { display: flex; align-items: center; gap: 6px; min-width: 142px; margin: 0; }
.administrator-permission-editor select { width: 86px; height: 34px; padding: 5px 7px; color: var(--ink); background: white; border: 1px solid var(--line-strong); border-radius: 5px; font: inherit; }
.administrator-permission-editor input[type="number"] { width: 120px; height: 34px; padding: 5px 7px; color: var(--ink); background: white; border: 1px solid var(--line-strong); border-radius: 5px; font: inherit; }
.administrator-permission-editor--daily { min-width: 170px; }
.administrator-permission-editor select:focus, .administrator-permission-editor input[type="number"]:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.administrator-permission-editor .row-link--button { min-width: 44px; min-height: 34px; }
.administrator-permission-editor[aria-busy="true"] { cursor: progress; }
.administrator-permission-editor .row-link--button:disabled { opacity: .55; cursor: progress; }
.user-ai-font-quota { min-width: 240px; }
.user-ai-font-quota > small { display: block; margin-top: 4px; }
.user-ai-font-quota > small:first-child { margin: 0 0 4px; }
.ai-font-limit-editor input[type="number"] { width: 92px; }
.device-limit-toast { position: fixed; z-index: 100; top: 20px; right: 20px; width: max-content; max-width: min(420px, calc(100% - 40px)); padding: 12px 18px; color: var(--green); background: var(--green-soft); border: 1px solid #a5d9c5; border-radius: 6px; box-shadow: var(--shadow); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; pointer-events: none; opacity: 0; transform: translateY(-8px); transition: opacity .18s ease, transform .18s ease; }
.device-limit-toast.is-visible { opacity: 1; transform: translateY(0); }
.device-limit-toast.is-error { color: var(--red); background: var(--red-soft); border-color: #eeb4be; }
@media (prefers-reduced-motion: reduce) { .device-limit-toast { transition: none; transform: none; } }
.user-payment-info { min-width: 190px; }
.user-font-payment-info { min-width: 160px; }
.user-payment-info > strong,
.user-payment-info > small,
.user-payment-info > code,
.user-font-payment-info > strong,
.user-font-payment-info > small,
.user-purchase-info > strong,
.user-purchase-info > small { display: block; margin-top: 3px; }
.user-payment-info > strong:first-child,
.user-purchase-info > strong:first-child { margin-top: 0; }
.user-purchase-info { min-width: 230px; }
.user-purchase-info .email-address { min-width: 200px; font-family: "Noto Sans Mono", "Noto Sans SC", monospace; user-select: all; }
.user-auto-renew { min-width: 112px; }
.auto-renew-enabled { width: 30px; height: 30px; display: inline-grid; place-items: center; color: var(--blue); background: var(--blue-soft); border: 1px solid #becdf4; border-radius: 50%; }
.auto-renew-enabled svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.user-account-table th.user-actions,
.user-account-table td.user-actions { position: sticky; right: 0; z-index: 2; min-width: 132px; background: var(--paper); box-shadow: -12px 0 18px -18px rgba(20,38,70,.55); }
.user-account-table th.user-actions { z-index: 3; background: #fafbfd; }
.user-account-table tbody tr:hover td.user-actions { background: #fbfcff; }
.user-action-group { display: flex; align-items: flex-start; gap: 13px; }
.user-inline-action { display: inline-flex; margin: 0; }
.user-enable-action { color: var(--blue); }
.inline-confirm--user-suspension[open] form { width: 310px; margin-left: -238px; }
.inline-confirm--user-suspension form strong { font-size: 12px; }
.code-owner-banner { display: flex; align-items: center; flex-wrap: wrap; gap: 7px 11px; margin: -8px 0 18px; padding: 11px 14px; color: #385079; background: var(--blue-soft); border: 1px solid #c6d3f6; border-left: 3px solid var(--blue); border-radius: 6px; font-size: 12px; }
.code-owner-banner strong { color: var(--blue-dark); font: 700 13px "Noto Sans Mono", "Noto Sans SC", monospace; }
.code-owner-banner small { padding: 2px 7px; color: #6b4b0d; background: #fff1ce; border-radius: 999px; font-size: 10px; font-weight: 700; }
.code-owner-field { padding: 14px; background: #f8fafd; border: 1px solid var(--line); border-radius: 6px; }
.code-owner-field > small { line-height: 1.6; }
.limited-access-note { margin-bottom: 18px; padding: 18px 20px; color: #29456f; background: var(--blue-soft); border: 1px solid #c6d3f6; border-left: 4px solid var(--blue); border-radius: 7px; box-shadow: 0 8px 24px rgba(20,38,70,.05); }
.limited-access-note h2 { margin: 5px 0 4px; color: var(--blue-dark); font-size: 18px; }
.limited-access-note p { max-width: 72ch; margin: 0; line-height: 1.65; }
.inline-filter select { min-height: 38px; padding: 6px 10px; color: var(--ink); background: white; border: 1px solid var(--line-strong); border-radius: 5px; }
.code-manager-register { margin-top: 0; }
.code-manager-search-bar .field--search { width: auto; min-width: 240px; flex: 1; }
.code-manager-notice { margin: 16px 20px 0; }
.alert { margin: 0 0 18px; padding: 11px 14px; border: 1px solid; border-radius: 5px; font-size: 13px; }
.alert:empty { display: none; }
.validation-summary-valid { display: none; }
.alert--success { color: #126348; background: var(--green-soft); border-color: #a5d9c5; }
.alert--error { color: #8d1d31; background: var(--red-soft); border-color: #efb7c1; }
.alert--info { color: #234a9f; background: var(--blue-soft); border-color: #bdcdf7; }
.alert ul { margin: 0; padding-left: 18px; }

.page-header--logs { align-items: center; }
.log-actions { position: relative; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.log-action-form { display: flex; margin: 0; }
.log-actions .button { min-height: 44px; }
.log-action-form .button { min-width: 126px; }
.log-import-form label { position: relative; cursor: pointer; }
.log-import-form label.is-busy { cursor: wait; color: #758199; background: #edf0f5; border-color: #d8dee7; }
.log-file-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.log-import-form label:has(.log-file-input:focus-visible) { outline: 3px solid rgba(36,87,214,.35); outline-offset: 2px; }
.header-confirm { position: relative; }
.header-confirm > summary { list-style: none; }
.header-confirm > summary::-webkit-details-marker { display: none; }
.header-confirm[open] > summary { color: white; background: var(--red); border-color: var(--red); }
.header-confirm > form { position: absolute; z-index: 50; top: calc(100% + 9px); right: 0; width: min(320px, calc(100vw - 28px)); padding: 17px; color: var(--ink); background: white; border: 1px solid #e6b3bd; border-top: 3px solid var(--red); border-radius: 7px; box-shadow: 0 18px 42px rgba(20,38,70,.18); }
.header-confirm > form::before { content: ""; position: absolute; top: -7px; right: 30px; width: 11px; height: 11px; background: var(--red); transform: rotate(45deg); }
.header-confirm form strong { font-size: 14px; }
.header-confirm form p { margin: 5px 0 15px; color: var(--muted-ink); font-size: 12px; }
.header-confirm form div { display: flex; justify-content: flex-end; gap: 7px; }
.header-confirm form .button { min-height: 36px; padding: 6px 12px; }
.log-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.log-metrics article { min-height: 105px; padding: 16px 18px; background: white; border: 1px solid var(--line); border-left: 3px solid var(--blue); border-radius: 7px; box-shadow: 0 7px 24px rgba(20,38,70,.05); }
.log-metrics span, .log-metrics small { display: block; }
.log-metrics span { color: var(--muted-ink); font-size: 12px; font-weight: 650; }
.log-metrics strong { display: block; margin: 3px 0 0; font: 650 28px/1.25 "Noto Sans Mono", "Noto Sans SC", monospace; }
.log-metrics small { color: #8792a3; font-size: 11px; }
.log-metrics .log-metric--risk { border-left-color: var(--red); }
.log-panel-header { min-height: 70px; }
.log-filter { flex-wrap: wrap; }
.field--log-action { width: min(280px, 32vw); }
.log-table { min-width: 1250px; table-layout: fixed; }
.log-table th:nth-child(1) { width: 185px; }
.log-table th:nth-child(2) { width: 175px; }
.log-table th:nth-child(3) { width: 125px; }
.log-table th:nth-child(4) { width: 190px; }
.log-table th:nth-child(5) { width: 390px; }
.log-table th:nth-child(6) { width: 150px; }
.log-table td { vertical-align: top; }
.log-time time, .log-time code, .event-code { display: block; }
.log-time time { color: var(--ink); font: 600 11px/1.5 "Noto Sans Mono", "Noto Sans SC", monospace; }
.log-time code { margin-top: 4px; overflow: hidden; color: #8a95a6; font: 500 9px/1.4 "Noto Sans Mono", "Noto Sans SC", monospace; text-overflow: ellipsis; user-select: all; }
.event-type { display: inline-flex; align-items: center; min-height: 24px; padding: 3px 8px; color: #335189; background: #edf2fb; border-radius: 999px; font-size: 11px; font-weight: 700; }
.event-type::before { content: ""; width: 6px; height: 6px; margin-right: 6px; background: currentColor; border-radius: 50%; }
.event-type--success { color: var(--green); background: var(--green-soft); }
.event-type--danger { color: var(--red); background: var(--red-soft); }
.event-code { margin-top: 5px; overflow: hidden; color: #8994a5; font: 500 9px/1.3 "Noto Sans Mono", "Noto Sans SC", monospace; text-overflow: ellipsis; }
.log-actor { color: var(--ink); font-weight: 650; overflow-wrap: anywhere; white-space: normal; }
.log-target, .log-details { overflow-wrap: anywhere; white-space: normal; }
.log-details { color: #344158; line-height: 1.55; }
.log-ip { font: 500 10px/1.5 "Noto Sans Mono", "Noto Sans SC", monospace; white-space: normal; word-break: break-all; }
.log-retention-note { margin: 14px 2px 0; color: #7b8798; font-size: 11px; }

.login-body { background: var(--sidebar); }
.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(380px, 1.05fr) minmax(430px, .95fr); }
.login-intro { position: relative; display: flex; flex-direction: column; padding: clamp(28px, 5vw, 70px); overflow: hidden; color: white; background: #111a2b; }
.login-intro::before { content: ""; position: absolute; inset: auto -15% -27% auto; width: 540px; height: 540px; border: 92px solid rgba(52,96,214,.11); border-radius: 50%; }
.login-intro::after { content: ""; position: absolute; top: 0; right: 18%; width: 1px; height: 100%; background: rgba(255,255,255,.055); box-shadow: 110px 0 rgba(255,255,255,.035), 220px 0 rgba(255,255,255,.025); }
.brand--login { position: relative; z-index: 1; width: fit-content; }
.login-intro__copy { position: relative; z-index: 1; margin: auto 0; max-width: 630px; }
.login-intro__copy h1 { margin: 12px 0 20px; font-size: clamp(44px, 5.4vw, 78px); line-height: 1.05; letter-spacing: -4px; }
.login-intro__copy p { max-width: 540px; margin: 0; color: #aab9cf; font-size: clamp(15px, 1.4vw, 18px); }
.signal-line { position: relative; z-index: 1; display: grid; grid-template-columns: 9px auto 1fr; align-items: center; gap: 9px; padding-top: 18px; border-top: 1px solid #2b3750; color: #98a8bf; font-size: 11px; }
.signal-line span { width: 8px; height: 8px; background: #38c793; border-radius: 50%; }
.signal-line strong { color: white; }
.signal-line em { justify-self: end; color: #65dcb0; font-style: normal; }
.login-panel { display: grid; place-items: center; padding: 34px; background: #eef2f7; }
.login-card { width: min(430px, 100%); padding: clamp(28px, 4vw, 44px); background: white; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 28px 70px rgba(11,26,52,.15); }
.login-card h2 { margin: 7px 0 3px; font-size: 28px; letter-spacing: -1px; }
.login-card > .muted { margin: 0 0 23px; color: var(--muted-ink); font-size: 13px; }
.login-card .form-stack { padding: 0; }
.login-help { margin: 18px 0 0; color: #7b8798; font-size: 11px; }
.login-help code { color: #526078; word-break: break-all; }

.public-body { min-width: 320px; color: #152139; background: #edf2f8; }
.register-shell { min-height: 100vh; display: grid; place-items: center; padding: clamp(30px, 5vw, 72px); }
.register-panel { width: 100%; display: grid; place-items: center; min-width: 0; }
.register-card { width: min(640px, 100%); padding: clamp(30px, 4vw, 48px); background: white; border: 1px solid #d7dfeb; border-radius: 12px; box-shadow: 0 28px 75px rgba(15,33,65,.14); }
.register-card__heading { margin-bottom: 24px; }
.register-card__heading h2, .register-success h2 { margin: 7px 0 5px; font-size: 30px; line-height: 1.2; letter-spacing: -1px; }
.register-card__heading p { margin: 0; color: var(--muted-ink); font-size: 12px; line-height: 1.65; }
.register-card__heading code { color: #345086; font: 600 11px "Noto Sans Mono", "Noto Sans SC", monospace; user-select: all; }
.register-form { display: grid; gap: 17px; }
.registration-mode { margin: 0; padding: 0; border: 0; }
.registration-mode legend { margin-bottom: 8px; color: var(--ink); font-size: 12px; font-weight: 700; }
.registration-mode__options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.registration-mode__option { position: relative; min-height: 72px; display: flex; align-items: flex-start; gap: 10px; padding: 13px 14px; color: var(--ink); background: #fafbfd; border: 1px solid #d7dfeb; border-radius: 7px; cursor: pointer; transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease; }
.registration-mode__option:hover { border-color: #aebfe0; background: #f7f9fd; }
.registration-mode__option:has(input:checked) { border-color: var(--blue); background: var(--blue-soft); box-shadow: 0 0 0 1px rgba(53,92,181,.12); }
.registration-mode__option:has(input:focus-visible) { outline: 3px solid rgba(53,92,181,.22); outline-offset: 2px; }
.registration-mode__option input { width: 18px; height: 18px; min-height: 18px !important; margin: 2px 0 0; accent-color: var(--blue); }
.registration-mode__option span { display: grid; gap: 3px; }
.registration-mode__option strong { font-size: 13px; }
.registration-mode__option small, .registration-mode__help { color: var(--muted-ink); font-size: 11px; line-height: 1.5; }
.registration-mode__help { display: block; margin-top: 8px; }
.register-form__columns { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.register-form .field label { font-size: 12px; }
.register-required-mark { margin-right: 4px; color: #d92d20; }
.register-form .field input { min-height: 46px; padding: 9px 12px; border-radius: 6px; }
.register-form .field input::placeholder { color: #9aa5b5; font-size: 12px; }
.register-form .field > small { margin-top: -1px; }
.register-password-field { position: relative; }
.register-password-field input { padding-right: 58px !important; }
.password-toggle { position: absolute; top: 5px; right: 5px; min-width: 45px; height: 36px; padding: 0 7px; color: #49618e; background: #edf2fa; border: 0; border-radius: 4px; font-size: 11px; font-weight: 700; }
.password-toggle:hover { color: var(--blue); background: var(--blue-soft); }
.register-code-input { color: #25467e !important; font: 650 13px "Noto Sans Mono", "Noto Sans SC", monospace !important; letter-spacing: .25px; text-transform: uppercase; }
.register-submit { min-height: 48px; margin-top: 3px; border-radius: 6px; }
.register-submit:disabled { cursor: wait; opacity: .72; }
.register-help { margin: 19px 0 0; padding-top: 17px; color: #7d899a; border-top: 1px solid #e7ebf1; font-size: 11px; line-height: 1.65; text-align: center; }
.register-success { text-align: center; }
.register-success__icon { width: 72px; height: 72px; display: grid; place-items: center; margin: 0 auto 22px; color: var(--green); background: var(--green-soft); border: 1px solid #b5dfd0; border-radius: 50%; }
.register-success__icon svg { width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.register-success > p { margin: 0; color: var(--muted-ink); }
.register-success > p strong { color: var(--ink); }
.register-next-step { margin: 28px 0 22px; padding: 17px 18px; text-align: left; background: var(--blue-soft); border: 1px solid #c6d4f7; border-left: 3px solid var(--blue); border-radius: 6px; }
.register-next-step span { color: var(--blue); font: 700 10px/1.3 "Noto Sans Mono", "Noto Sans SC", monospace; letter-spacing: 1.4px; }
.register-next-step p { margin: 5px 0 0; color: #30466d; font-size: 13px; line-height: 1.65; }
.reset-shell { padding-top: clamp(24px, 4vw, 56px); padding-bottom: clamp(24px, 4vw, 56px); }
.reset-card { width: min(500px, 100%); }
.reset-back-button { margin-top: 12px; }
.reset-card .register-help { margin-bottom: 0; }
.reset-verified-account { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 0 0 22px; padding: 15px 16px; color: #36517f; background: var(--blue-soft); border: 1px solid #c6d4f7; border-left: 3px solid var(--blue); border-radius: 6px; }
.reset-verified-account span { grid-row: 1 / 3; align-self: center; color: var(--blue); font: 700 10px/1.3 "Noto Sans Mono", "Noto Sans SC", monospace; letter-spacing: 1px; }
.reset-verified-account strong { color: var(--ink); font: 700 16px/1.35 "Noto Sans Mono", "Noto Sans SC", monospace; overflow-wrap: anywhere; }
.reset-verified-account small { color: var(--muted-ink); font-size: 11px; }
.recover-shell { align-items: start; }
.recover-card { width: min(720px, 100%); }
.recover-card .register-card__heading h1 { margin: 7px 0 5px; font-size: 30px; line-height: 1.2; letter-spacing: -1px; }
.recovery-time-notice { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 11px; align-items: start; margin: 0 0 22px; padding: 14px 15px; color: #65400c; background: var(--amber-soft); border: 1px solid #ecd197; border-left: 3px solid var(--amber); border-radius: 6px; }
.recovery-time-notice svg { width: 21px; height: 21px; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.recovery-time-notice p { margin: 0; font-size: 12px; line-height: 1.65; }
.recovery-time-notice strong { display: block; color: #4f3108; }
.recovery-form { padding-bottom: 7px; }
.recovery-results { display: grid; gap: 12px; margin-top: 28px; padding-top: 26px; border-top: 1px solid #e1e7ef; }
.recovery-results__heading { margin-bottom: 2px; }
.recovery-results__heading h2 { margin: 5px 0 0; font-size: 21px; }
.recovery-order { overflow: hidden; background: #fbfcfe; border: 1px solid var(--line); border-radius: 8px; }
.recovery-order__header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 17px; background: white; border-bottom: 1px solid #e5eaf1; }
.recovery-order__header span, .recovery-order__header code { display: block; }
.recovery-order__header span { color: var(--ink); font-weight: 750; }
.recovery-order__header code { margin-top: 3px; color: #7b8798; font: 500 10px/1.4 "Noto Sans Mono", "Noto Sans SC", monospace; overflow-wrap: anywhere; }
.recovery-status { display: inline-flex; align-items: center; flex: none; min-height: 26px; padding: 4px 9px; border-radius: 999px; font-size: 11px; }
.recovery-status::before { content: ""; width: 6px; height: 6px; margin-right: 6px; background: currentColor; border-radius: 50%; }
.recovery-status--ready { color: var(--green); background: var(--green-soft); }
.recovery-status--used { color: var(--blue-dark); background: var(--blue-soft); }
.recovery-status--expired, .recovery-status--warning { color: var(--red); background: var(--red-soft); }
.recovery-order__dates { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 14px 17px; gap: 12px; }
.recovery-order__dates div { min-width: 0; }
.recovery-order__dates dt { color: #7a8799; font-size: 10px; font-weight: 700; }
.recovery-order__dates dd { margin: 3px 0 0; color: #344259; font: 600 11px/1.45 "Noto Sans Mono", "Noto Sans SC", monospace; overflow-wrap: anywhere; }
.recovered-code, .recovery-bound-account { margin: 0 17px 14px; padding: 15px; border-radius: 6px; }
.recovered-code { color: #174f3e; background: var(--green-soft); border: 1px solid #acdaca; }
.recovered-code > span, .recovered-code > code { display: block; }
.recovered-code > span { font-size: 11px; font-weight: 700; }
.recovered-code > code { margin: 6px 0 13px; padding: 10px; color: #0f4434; background: rgba(255,255,255,.8); border: 1px solid #b9dfd2; border-radius: 4px; font: 700 13px/1.5 "Noto Sans Mono", "Noto Sans SC", monospace; letter-spacing: .15px; overflow-wrap: anywhere; user-select: all; }
.recovery-bound-account { display: grid; gap: 3px; color: #2e4d83; background: var(--blue-soft); border: 1px solid #c4d2f5; border-left: 3px solid var(--blue); }
.recovery-bound-account span { font-size: 10px; font-weight: 700; }
.recovery-bound-account strong { color: var(--ink); font: 700 16px/1.45 "Noto Sans Mono", "Noto Sans SC", monospace; overflow-wrap: anywhere; }
.recovery-bound-account small { color: #5c6f90; font-size: 11px; }
.recovery-order__message { margin: 0; padding: 0 17px 15px; color: #667388; font-size: 11px; line-height: 1.6; }
.recovery-help a, .register-help a { color: var(--blue); font-weight: 700; }
.recovery-help a:hover, .register-help a:hover { color: var(--blue-dark); }

@media (max-width: 1050px) {
    .page-header--codes { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .metric-grid { grid-template-columns: repeat(2, 1fr); }
    .log-metrics { grid-template-columns: repeat(2, 1fr); }
    .content-grid, .settings-grid { grid-template-columns: 1fr; }
    .audit-panel { order: -1; }
    .login-intro__copy h1 { letter-spacing: -2.5px; }
}

@media (max-width: 900px) {
    .login-shell { grid-template-columns: 1fr; }
    .register-shell { padding: 34px 18px 54px; }
}

@media (max-width: 760px) {
    .app-shell { grid-template-columns: 1fr; }
    .sidebar { position: static; width: 100%; height: auto; padding: 14px 16px; }
    .live-rail { display: none; }
    .nav-list { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); margin-top: 13px; }
    .nav-entry { grid-template-columns: minmax(0, 1fr) 42px; min-height: 44px; }
    .nav-link { justify-content: center; min-height: 44px; padding: 0 4px 0 8px; gap: 6px; font-size: 12px; text-align: center; }
    .nav-list svg { display: none; }
    .nav-help { width: 42px; min-height: 44px; }
    .nav-help > svg { display: block; width: 16px; height: 16px; }
    .nav-help__tooltip { top: calc(100% + 8px); left: 0; width: min(260px, calc(100vw - 28px)); transform: translateY(-5px); }
    .nav-entry:nth-child(even) .nav-help__tooltip { right: 0; left: auto; }
    .nav-help__tooltip::before { top: -5px; left: 50%; border-top: 1px solid #3a4d6d; border-right: 1px solid #3a4d6d; border-bottom: 0; border-left: 0; transform: translateX(-50%) rotate(-45deg); }
    .nav-entry:nth-child(even) .nav-help__tooltip::before { right: 14px; left: auto; transform: rotate(-45deg); }
    .nav-help:hover + .nav-help__tooltip, .nav-help:focus-visible + .nav-help__tooltip { transform: translateY(0); }
    .sidebar__footer { position: absolute; right: 14px; top: 14px; width: auto; margin: 0; padding: 0; border: 0; }
    .sidebar__footer > span:nth-child(2) { display: none; }
    .main-content { padding: 25px 14px 45px; }
    .page-header { align-items: flex-start; }
    .page-header--logs { flex-direction: column; }
    .log-actions { width: 100%; justify-content: flex-start; }
    .field--log-action { width: 100%; }
    .server-clock { display: none; }
    .metric-grid { gap: 9px; }
    .metric { min-height: 125px; padding: 15px; }
    .detail-grid { grid-template-columns: 1fr; }
    .summary-card { order: -1; }
    .filter-bar { align-items: stretch; flex-wrap: wrap; }
    .field--search, .field--compact { width: 100%; }
    .user-registration-range { width: 100%; }
    .device-limit-toast { top: auto; right: 14px; bottom: 14px; max-width: calc(100% - 28px); }
    .audit-list li { grid-template-columns: 1fr; gap: 3px; }
    .policy-explainer ol { grid-template-columns: 1fr; }
    .login-shell { grid-template-columns: 1fr; }
    .login-intro { min-height: 310px; padding: 28px; }
    .login-intro__copy { margin-top: 55px; }
    .login-intro__copy h1 { font-size: 42px; }
    .login-intro__copy p { font-size: 14px; }
    .signal-line { display: none; }
    .login-panel { padding: 20px 14px 35px; }
    .pagination { align-items: stretch; flex-direction: column; }
}

@media (max-width: 480px) {
    .code-rules ul { grid-template-columns: minmax(0, 1fr); }
    .nav-list { grid-template-columns: repeat(2, 1fr); }
    .metric-grid { grid-template-columns: 1fr 1fr; }
    .form-grid { grid-template-columns: 1fr; }
    .field--full { grid-column: auto; }
    .switch-row.field--full { grid-column: auto; }
    .form-actions .button { flex: 1 1 140px; }
    .export-hint { text-align: left; }
    .page-header h1 { font-size: 29px; }
    .log-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .log-actions .log-action-form, .log-actions .button, .log-actions .header-confirm { width: 100%; }
    .log-actions .button { min-width: 0; }
    .header-confirm > form { right: 0; }
    .log-metrics { gap: 8px; }
    .log-metrics article { min-height: 96px; padding: 13px; }
    .log-metrics strong { font-size: 24px; }
    .register-shell { padding: 22px 12px 38px; }
    .register-card { padding: 27px 20px; border-radius: 9px; }
    .register-card__heading h2, .register-success h2 { font-size: 27px; }
    .recover-card .register-card__heading h1 { font-size: 27px; }
    .register-form__columns { grid-template-columns: 1fr; gap: 17px; }
    .registration-mode__options { grid-template-columns: 1fr; }
    .register-code-input { font-size: 11px !important; }
    .recovery-order__header { align-items: flex-start; }
    .recovery-order__dates { grid-template-columns: 1fr; gap: 10px; }
    .recovered-code > code { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

.access-protection-copy { margin: 0; max-width: 75ch; line-height: 1.8; }
.access-protection-settings small, .access-protection-panel small, .access-protection-panel th { color: var(--muted-ink); }
.access-protection-panel th, .access-protection-panel td { font-variant-numeric: tabular-nums; }
.access-protection-reason { min-width: 180px; max-width: 320px; white-space: normal; overflow-wrap: anywhere; }
.access-unblock { min-width: 170px; max-width: 260px; }
.access-unblock summary { color: var(--blue); cursor: pointer; padding: 10px 0; font-weight: 600; }
.access-unblock form { display: grid; gap: 10px; padding: 12px 0; white-space: normal; }
.access-unblock input { width: 100%; min-height: 40px; }
.access-unblock small { line-height: 1.65; }
.access-unblock summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }