:root {
  color-scheme: light;
  --primary: #4F46E5;
  --primary-strong: #3730A3;
  --canvas: #F4F2EE;
  --surface: #FFFFFF;
  --line: #E7E2DA;
  --ink: #18181B;
  --muted: #71717A;
  --positive: #188253;
  --positive-bg: #EAF7EF;
  --negative: #B5453B;
  --negative-bg: #FFF0EE;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background-color: var(--canvas); background-image: radial-gradient(rgba(24, 24, 27, .055) .6px, transparent .7px); background-size: 7px 7px; color: var(--ink); }
body.auth-pending { visibility: hidden; }
main { width: calc(100% - 56px); max-width: 1680px; margin: 32px auto 68px; }
body.app-shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
body.app-shell main { width: auto; max-width: none; min-width: 0; margin: 28px 30px 68px; }
.side-nav { position: sticky; top: 0; z-index: 10; height: 100vh; padding: 24px 16px; overflow-y: auto; border-right: 1px solid var(--line); background: rgba(255, 255, 255, .9); box-shadow: 1px 0 2px rgba(24, 24, 27, .035), inset -1px 0 0 rgba(255, 255, 255, .65); backdrop-filter: blur(14px); }
.side-brand { display: grid; gap: 3px; padding: 4px 10px 22px; }
.side-brand .eyebrow { font-size: 11px; }
.side-brand strong { font-size: 19px; letter-spacing: -.035em; }
.side-brand small { color: var(--muted); font-size: 12px; }
.side-menu { display: grid; gap: 20px; }
.side-nav-group { display: grid; gap: 5px; }
.side-nav-group-title { padding: 0 10px 4px; color: #A1A1AA; font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.side-menu a { display: grid; gap: 2px; padding: 10px 11px; border: 1px solid transparent; border-radius: 14px; color: var(--ink); text-decoration: none; }
.side-menu a span { font-size: 14px; font-weight: 800; }
.side-menu a small { color: var(--muted); font-size: 11px; font-weight: 500; line-height: 1.4; }
.side-menu a:hover { border-color: var(--line); background: #F7F6FB; color: var(--primary); }
.side-menu a.active { border-color: #D6D3FA; background: #ECEBFD; color: var(--primary); }
.side-menu a.active small { color: #625CC6; }
.panel[id] { scroll-margin-top: 24px; }

.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.header-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.session-box { display: flex; align-items: center; gap: 9px; padding: 6px 7px 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .78); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7); color: var(--muted); font-size: 13px; }
.eyebrow { color: var(--primary); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
h1 { margin: 7px 0 8px; font-size: clamp(32px, 3.2vw, 45px); font-weight: 800; letter-spacing: -.055em; line-height: 1.05; }
h2 { margin: 0 0 5px; font-size: 20px; letter-spacing: -.025em; }
h3 { margin: 4px 0 0; font-size: 17px; }
p { margin: 0; color: var(--muted); line-height: 1.65; }
a { color: var(--primary); font-weight: 700; }

.online-state { flex: none; margin-top: 6px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .78); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7); color: var(--muted); font-size: 13px; }
.online-state.ok { background: var(--positive-bg); color: var(--positive); }
.online-state.error { background: var(--negative-bg); color: var(--negative); }
.top-nav { display: inline-flex; gap: 6px; padding: 5px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255, 255, 255, .84); box-shadow: 0 1px 2px rgba(24, 24, 27, .055), inset 0 1px 0 rgba(255, 255, 255, .75); }
.top-nav a { min-width: 130px; padding: 9px 16px; border: 1px solid transparent; border-radius: 13px; color: var(--muted); text-align: center; text-decoration: none; font-weight: 750; }
.top-nav a:hover { background: #F1F0FB; color: var(--primary); }
.top-nav a.active { background: var(--primary); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); color: #fff; }

.panel { margin-top: 20px; padding: 24px; border: 1px solid var(--line); border-radius: 24px; background: rgba(255, 255, 255, .93); box-shadow: 0 1px 2px rgba(24, 24, 27, .06), inset 0 1px 0 rgba(255, 255, 255, .75); }
.current-panel { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.button-row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.section-label, .muted, .file-name { color: var(--muted); font-size: 13px; }
.metric { margin: 5px 0 3px; font-size: 24px; font-weight: 800; letter-spacing: -.045em; }
.step-heading { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.step-heading > span { display: grid; flex: none; place-items: center; width: 30px; height: 30px; border-radius: 11px; background: var(--primary); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); color: #fff; font-weight: 800; }

button, .file-picker, .button-link { display: inline-flex; align-items: center; justify-content: center; min-height: 41px; padding: 0 16px; border: 1px solid transparent; border-radius: 16px; background: var(--primary); box-shadow: 0 1px 2px rgba(24, 24, 27, .1), inset 0 1px 0 rgba(255, 255, 255, .4); color: #fff; cursor: pointer; font: inherit; font-weight: 750; text-decoration: none; white-space: nowrap; transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease; }
button:hover:not(:disabled), .file-picker:hover, .button-link:hover { background: var(--primary-strong); color: #fff; transform: translateY(-1px); box-shadow: 0 3px 7px rgba(24, 24, 27, .11), inset 0 1px 0 rgba(255, 255, 255, .4); }
button:active:not(:disabled), .file-picker:active, .button-link:active { transform: translateY(0); box-shadow: inset 0 1px 1px rgba(24, 24, 27, .14); }
button:disabled { cursor: not-allowed; opacity: .45; box-shadow: none; }
.secondary { border-color: var(--line); background: var(--surface); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7); color: var(--ink); }
.secondary:hover:not(:disabled) { background: #F1F0FB; color: var(--primary); }
.danger { border-color: #F1C7C1; background: var(--negative-bg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7); color: var(--negative); }
.danger:hover:not(:disabled) { background: #FBE1DD; color: var(--negative); }
.small-button { min-height: 34px; padding: 0 12px; }
.file-picker input { display: none; }
.template-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.file-name { margin-left: 4px; }

.notice { margin-top: 14px; padding: 11px 13px; border: 1px solid #F0DFC6; border-radius: 16px; background: #FFF8ED; color: #795D3D; font-size: 13px; line-height: 1.55; }
.preview-metrics { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); gap: 12px; margin-bottom: 14px; }
.preview-metrics > div { padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: #FAF9F7; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72); }
.preview-metrics strong, .preview-metrics span { display: block; }
.preview-metrics strong { font-size: 24px; font-weight: 800; }
.preview-metrics span { margin-top: 2px; color: var(--muted); font-size: 12px; }
.validation { margin: 12px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 16px; background: #FAF9F7; color: var(--muted); white-space: pre-wrap; }
.validation.ok { border-color: #CDE9D6; background: var(--positive-bg); color: var(--positive); }
.validation.error { border-color: #F1C7C1; background: var(--negative-bg); color: var(--negative); }

.table-wrap { max-width: 100%; overflow: auto; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72); }
.preview-table-wrap { max-height: 430px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
.wide-table { min-width: 1050px; }
th { position: sticky; top: 0; z-index: 1; background: #F8F7F4; color: var(--muted); text-align: left; font-weight: 800; }
th, td { padding: 11px; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:nth-child(even) { background: #FCFBF9; }
tbody tr:hover { background: #F6F5FF; }
td { overflow-wrap: anywhere; }
.empty { color: var(--muted); text-align: center; }
.tone-positive, .change-added { color: var(--positive); }
.tone-negative, .change-removed { color: var(--negative); }
.tone-neutral { color: var(--muted); }

.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.wide-field { grid-column: 1 / -1; }
.advanced-field { display: none; }
label { display: block; color: var(--ink); font-size: 13px; font-weight: 750; }
.field-help { display: block; margin-top: 6px; color: var(--muted); font-size: 11px; font-weight: 500; line-height: 1.45; }
input, select, textarea { display: block; width: 100%; min-width: 0; min-height: 42px; margin-top: 7px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, .92); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72); color: inherit; font: inherit; }
textarea { min-height: 68px; resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(79, 70, 229, .15); border-color: #AAA5F5; }
.message { min-height: 24px; margin-top: 10px; color: var(--muted); white-space: pre-wrap; }
.message.ok { color: var(--positive); }
.message.error { color: var(--negative); }

.panel-heading-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.search-field { width: min(360px, 100%); }
.data-tabs { display: flex; gap: 8px; margin: 18px 0 12px; border-bottom: 1px solid var(--line); }
.data-tab { min-height: 42px; border: 1px solid transparent; border-radius: 14px 14px 0 0; background: transparent; box-shadow: none; color: var(--muted); }
.data-tab:hover:not(:disabled) { background: #F1F0FB; color: var(--primary); transform: none; }
.data-tab.active { border-color: var(--line); border-bottom-color: var(--surface); background: var(--surface); color: var(--primary); transform: translateY(1px); }
.data-tab span { margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: #ECEBFD; font-size: 12px; }
.managed-table-wrap { max-height: 650px; }
.managed-table { min-width: 1080px; }
.managed-table th:last-child, .managed-table td:last-child { width: 170px; text-align: center; }
.table-row-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; min-width: 148px; }
.identifier-cell { font-weight: 800; white-space: nowrap; }
.label-preview-list { display: grid; gap: 7px; min-width: 350px; }
.label-preview-row { display: grid; grid-template-columns: max-content 1fr; align-items: start; gap: 8px; }
.tag-pill { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 8px; border: 1px solid; border-radius: 999px; font-size: 12px; font-weight: 750; white-space: nowrap; }
.tone-bg-positive { border-color: #BCE4C8; background: var(--positive-bg); color: var(--positive); }
.tone-bg-negative { border-color: #F0C6C0; background: var(--negative-bg); color: var(--negative); }
.tone-bg-neutral { border-color: var(--line); background: #F8F7F4; color: var(--muted); }
.label-detail { color: var(--muted); line-height: 1.55; }
.pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.pagination > div { display: flex; gap: 8px; }

.editor-panel { scroll-margin-top: 20px; border-color: #D4D0F7; }
.editor-heading, .history-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.base-field-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.subheading { margin-top: 20px; }
.editor-rows { display: grid; gap: 10px; margin-top: 12px; }
.tag-edit-row { display: grid; grid-template-columns: minmax(160px, 1fr) 120px minmax(260px, 2fr) auto; align-items: start; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 18px; background: #FAF9F7; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72); }
.tag-edit-row input, .tag-edit-row select, .tag-edit-row textarea { margin-top: 0; background: var(--surface); }
.tag-edit-row button { min-height: 41px; }
.editor-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; }
.history-heading { align-items: center; }
.history-actions { display: flex; align-items: flex-end; gap: 10px; width: min(720px, 58%); }
.history-search-field { flex: 1; }
.history-list { display: grid; gap: 12px; margin-top: 14px; }
.history-entry { border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72); }
.history-entry > summary { display: grid; grid-template-columns: minmax(170px, .9fr) minmax(140px, .7fr) minmax(120px, .6fr) max-content; align-items: center; gap: 18px; padding: 14px; cursor: pointer; list-style: none; }
.history-entry > summary::-webkit-details-marker { display: none; }
.history-version { color: var(--primary); font-weight: 800; }
.history-date, .history-submitter, .history-count { display: grid; gap: 3px; min-width: 0; }
.history-date small, .history-submitter small, .history-count small { color: var(--muted); font-size: 11px; font-weight: 650; }
.history-date strong, .history-submitter strong, .history-count strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.history-body { padding: 0 14px 14px; }
.history-entry:not([open]) > .history-body { display: none; }
.history-entry-actions { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.history-note { flex: 1; padding: 9px 11px; border: 1px solid var(--line); border-radius: 14px; background: #FAF9F7; color: var(--muted); font-size: 13px; }
.history-change-table { min-width: 1050px; }

.batch-submit-fields { margin-top: 16px; }
.batch-preview-wrap { max-height: 520px; margin: 12px 0 14px; }
.batch-preview-table { min-width: 900px; }
.batch-preview-table th:nth-child(1) { width: 80px; }
.batch-preview-table th:nth-child(2) { width: 150px; }
.batch-preview-table th:nth-child(3) { width: 270px; }
.batch-preview-table .label-preview-list { min-width: 360px; }
.operation-delete { color: var(--negative); }
.review-list, .submission-history { display: grid; gap: 12px; margin-top: 14px; }
.review-batch-toolbar { display: grid; grid-template-columns: max-content minmax(160px, .65fr) minmax(240px, 1fr) auto; align-items: end; gap: 10px; margin-top: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 18px; background: #FAF9F7; }
.review-select-all { display: flex; align-items: center; align-self: center; gap: 8px; white-space: nowrap; }
.review-select-all input, .review-card-selection input { width: 18px; min-height: 18px; margin: 0; padding: 0; box-shadow: none; accent-color: var(--primary); }
.review-empty { padding: 24px; border: 1px dashed #CFC8BE; border-radius: 18px; background: #FAF9F7; color: var(--muted); text-align: center; }
.review-card { padding: 16px; border: 1px solid var(--line); border-radius: 20px; background: #FAF9F7; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72); }
.review-card-selected { border-color: #AAA5F5; background: #F6F5FF; }
.review-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.review-card-title { display: flex; align-items: flex-start; gap: 10px; }
.review-card-selection { padding-top: 2px; }
.review-card-heading strong { display: block; margin-top: 4px; font-size: 16px; }
.review-meta, .review-submit-note { margin-top: 10px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.review-labels { display: grid; gap: 7px; margin-top: 12px; }
.review-labels > div, .submission-item { display: grid; grid-template-columns: max-content 1fr; align-items: start; gap: 9px; color: var(--ink); line-height: 1.55; }
.review-controls { display: grid; grid-template-columns: minmax(180px, .7fr) minmax(260px, 1.5fr) auto; align-items: end; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.review-actions { display: flex; gap: 8px; }

.subheading-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; }
.submission-note { margin: 14px 0; }
.submission-batch-entry { border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72); }
.submission-batch-entry > summary { display: grid; grid-template-columns: minmax(190px, 1fr) minmax(130px, .65fr) minmax(120px, .55fr) max-content; align-items: center; gap: 18px; padding: 15px 16px; cursor: pointer; list-style: none; }
.submission-batch-entry > summary::-webkit-details-marker { display: none; }
.submission-batch-date, .submission-batch-submitter, .submission-batch-count { display: grid; gap: 3px; min-width: 0; }
.submission-batch-date small, .submission-batch-submitter small, .submission-batch-count small { color: var(--muted); font-size: 11px; font-weight: 650; }
.submission-batch-date strong, .submission-batch-submitter strong, .submission-batch-count strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.submission-batch-body { padding: 0 16px 16px; }
.submission-batch-entry:not([open]) > .submission-batch-body { display: none; }
.submission-batch-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.approval-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0 0 12px; padding: 14px; border-top: 1px solid var(--line); border-radius: 0 0 12px 12px; background: #FAF9F7; }
.approval-step { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: start; min-width: 0; padding-right: 18px; }
.approval-step:not(:nth-child(3))::after { position: absolute; top: 6px; right: 5px; left: 12px; height: 2px; background: #DDD9D2; content: ""; }
.approval-marker { position: relative; z-index: 1; width: 12px; height: 12px; margin-top: 1px; border: 2px solid #C9C4BC; border-radius: 50%; background: var(--surface); }
.approval-step > span:last-child { position: relative; z-index: 1; display: grid; gap: 3px; min-width: 0; }
.approval-step strong { font-size: 12px; }
.approval-step small { color: var(--muted); font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
.approval-step.done .approval-marker, .approval-step.approved .approval-marker { border-color: var(--positive); background: var(--positive); }
.approval-step.current .approval-marker { border-color: #B98A43; background: #FFF4DF; }
.approval-step.rejected .approval-marker { border-color: var(--negative); background: var(--negative); }
.approval-step.rejected strong { color: var(--negative); }
.approval-step.approved strong { color: var(--positive); }
.approval-note { grid-column: 1 / -1; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.submission-batch-source { min-width: 0; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.submission-batch-items { display: grid; gap: 8px; }
.submission-entry { border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72); }
.submission-entry > summary { display: grid; grid-template-columns: max-content minmax(240px, 1fr) max-content; align-items: center; gap: 12px; padding: 13px 14px; cursor: pointer; list-style: none; }
.submission-entry > summary::-webkit-details-marker { display: none; }
.submission-entry-body { display: grid; gap: 8px; padding: 0 14px 14px; }
.submission-entry:not([open]) > .submission-entry-body { display: none; }
.status-pill { display: inline-flex; align-items: center; min-height: 25px; padding: 2px 8px; border: 1px solid #EAD7B9; border-radius: 999px; background: #FFF8ED; color: #795D3D; font-size: 12px; font-weight: 750; white-space: nowrap; }
.status-pill-approved { border-color: #BCE4C8; background: var(--positive-bg); color: var(--positive); }
.status-pill-rejected { border-color: #F0C6C0; background: var(--negative-bg); color: var(--negative); }
.status-pill-mixed { border-color: #CFCBF9; background: #F1F0FF; color: var(--primary); }
.public-table th:last-child, .public-table td:last-child { width: auto; text-align: left; }
.compact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.log-filters { display: grid; grid-template-columns: 180px minmax(260px, 1fr); gap: 14px; margin: 16px 0 4px; }
.log-table { min-width: 1400px; }
.log-table th:nth-child(1), .log-table td:nth-child(1) { width: 150px; white-space: nowrap; overflow-wrap: normal; }
.log-table th:nth-child(2), .log-table td:nth-child(2) { width: 88px; white-space: nowrap; overflow-wrap: normal; }
.log-table th:nth-child(3), .log-table td:nth-child(3) { width: 150px; white-space: nowrap; overflow-wrap: normal; }
.log-table th:nth-child(4), .log-table td:nth-child(4) { width: 88px; white-space: nowrap; overflow-wrap: normal; }
.log-table th:nth-child(5), .log-table td:nth-child(5) { width: 110px; white-space: nowrap; overflow-wrap: normal; }
.log-table th:nth-child(6), .log-table td:nth-child(6) { min-width: 360px; }
.log-table-wrap { max-height: 620px; }
.log-result-success, .log-result-approved { color: var(--positive); font-weight: 800; }
.log-result-failed, .log-result-client_error, .log-result-rejected { color: var(--negative); font-weight: 800; }
.local-log-list { display: grid; gap: 7px; margin-top: 12px; }
.local-log-list > div { padding: 9px 11px; border: 1px solid var(--line); border-radius: 14px; background: #FAF9F7; color: var(--muted); font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.member-table-wrap { max-height: 320px; margin-top: 18px; }
.member-table { min-width: 760px; }
.member-action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.member-action-card { display: flex; min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 20px; background: #FAF9F7; flex-direction: column; }
.member-action-card h3 { margin: 0 0 5px; font-size: 17px; }
.member-action-card > div:first-child p { min-height: 40px; margin: 0 0 14px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.member-action-card .field-grid { margin-bottom: 14px; }
.member-action-card > button { align-self: flex-start; margin-top: auto; }
.member-action-card .message { margin-bottom: -6px; }
.member-account-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.account-settings-panel strong { color: var(--primary); }
#manual-publish, #change-password { margin-top: 14px; }

.changelog-main { max-width: 1400px; }
.changelog-header { margin-bottom: 46px; }
.changelog-day + .changelog-day { margin-top: 54px; }
.changelog-date { display: flex; align-items: baseline; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.changelog-date h2 { font-size: 28px; letter-spacing: -.04em; }
.changelog-date span { color: var(--muted); font-size: 13px; }
.changelog-entry { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 28px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.changelog-entry-meta { display: grid; align-content: start; gap: 10px; padding-right: 24px; border-right: 1px solid var(--line); }
.changelog-entry-meta time { font: 700 14px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
.change-type { width: max-content; padding: 4px 9px; border: 1px solid var(--line); border-radius: 999px; background: #F8F7F4; color: var(--muted); font-size: 12px; font-weight: 800; }
.change-type-new { border-color: #BCE4C8; background: var(--positive-bg); color: var(--positive); }
.change-type-improved { border-color: #CFCBF9; background: #F1F0FF; color: var(--primary); }
.change-type-fixed { border-color: #F0C6C0; background: var(--negative-bg); color: var(--negative); }
.changelog-entry-content h3 { margin: 0 0 9px; font-size: 20px; letter-spacing: -.025em; }
.changelog-entry-content p { max-width: 880px; }
.changelog-entry-content ul { display: grid; gap: 7px; margin: 14px 0 0; padding-left: 20px; color: var(--muted); line-height: 1.65; }

.role-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 28px 0 22px; }
.role-button { display: block; min-height: 94px; padding: 15px; border: 1px solid var(--line); border-radius: 20px; background: #FAF9F7; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72); color: var(--muted); text-align: left; white-space: normal; }
.role-button:hover { background: #F1F0FB; color: var(--primary); transform: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72); }
.role-button strong, .role-button span { display: block; }
.role-button strong { margin-bottom: 5px; color: var(--ink); font-size: 16px; }
.role-button span { font-size: 12px; font-weight: 500; line-height: 1.5; }
.role-button.active { border-color: #AAA5F5; background: #ECEBFD; color: var(--primary); }
.role-button.active strong { color: var(--primary); }

.login-body { position: relative; display: grid; min-height: 100vh; place-items: center; overflow: hidden; background-color: #E8E7FF; background-image: radial-gradient(rgba(24, 24, 27, .06) .6px, transparent .7px); background-size: 7px 7px; }
.login-body::before { position: fixed; top: -18vw; right: -12vw; width: min(54vw, 690px); height: min(54vw, 690px); border-radius: 50%; background: var(--primary); content: ""; opacity: .96; }
.login-body::after { position: fixed; bottom: -12vw; left: -8vw; width: min(42vw, 540px); height: min(42vw, 540px); border-radius: 42% 58% 45% 55%; background: #FFFFFF; content: ""; opacity: .75; }
.login-shell { position: relative; z-index: 1; width: min(620px, calc(100% - 36px)); margin: 28px auto; }
.login-card { padding: clamp(28px, 5vw, 48px); border: 1px solid rgba(255, 255, 255, .65); border-radius: 30px; background: rgba(255, 255, 255, .92); box-shadow: 0 10px 26px rgba(53, 48, 130, .12), inset 0 1px 0 rgba(255, 255, 255, .75); }
.login-card .eyebrow { color: var(--primary); }
.login-card h1 { margin: 11px 0 16px; font-size: clamp(44px, 7vw, 76px); font-weight: 800; letter-spacing: -.08em; line-height: .96; }
.login-card form { display: grid; gap: 16px; }
.login-card form button { width: 100%; min-height: 48px; font-size: 16px; }
.login-help { margin-top: 20px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 16px; background: #FAF9F7; color: var(--muted); font-size: 12px; line-height: 1.55; }
.login-password-change { margin-top: 18px; border: 1px solid var(--line); border-radius: 18px; background: #FAF9F7; }
.login-password-change > summary { padding: 13px 15px; cursor: pointer; font-weight: 800; }
.login-password-change > p { margin: 0; padding: 0 15px 12px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.login-password-change form { padding: 0 15px 15px; }
.login-password-change .message { padding: 0 15px 14px; }

/* Unified workspace density: one task per routed view, lighter containers, smaller type. */
body { background: #FFFFFF; font-size: 13px; }
body.app-shell { grid-template-columns: 210px minmax(0, 1fr); }
body.app-shell main { margin: 30px 36px 64px; }
.side-nav { padding: 28px 14px; background: #FBFBFF; box-shadow: none; backdrop-filter: none; }
.side-brand { padding: 4px 12px 30px; }
.side-brand strong { font-size: 18px; }
.side-menu { gap: 8px; }
.side-nav-group { gap: 3px; }
.side-nav-group-title, .side-menu a small { display: none; }
.side-menu a { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 10px; }
.side-menu a span { font-size: 13px; }
.side-menu a.active { border-color: transparent; background: #EEEBFF; }
.page-header { margin-bottom: 20px; }
h1 { margin: 4px 0 7px; font-size: clamp(30px, 2.7vw, 36px); }
h2 { font-size: 18px; }
h3 { font-size: 16px; }
p { font-size: 13px; line-height: 1.55; }
.eyebrow { font-size: 11px; }
.panel { margin-top: 16px; padding: 20px; border-radius: 14px; background: #FFFFFF; box-shadow: none; }
.current-panel { border-color: #E9E7ED; }
.metric { font-size: 22px; }
.section-label, .muted, .file-name, .online-state, .session-box { font-size: 12px; }
button, .file-picker, .button-link { min-height: 38px; padding: 0 14px; border-radius: 9px; font-size: 13px; }
.small-button { min-height: 32px; padding: 0 10px; font-size: 12px; }
input, select, textarea { min-height: 38px; margin-top: 6px; padding: 8px 10px; border-radius: 9px; font-size: 13px; }
table { font-size: 12px; }
th, td { padding: 10px; }
.table-wrap { border-radius: 12px; box-shadow: none; }
.tag-pill, .status-pill { font-size: 11px; }
.platform-cell { white-space: nowrap; }
.platform-icon { width: 18px; height: 18px; margin-right: 7px; vertical-align: middle; object-fit: contain; }
.data-tabs { margin: 14px 0 10px; }
.data-tab { min-height: 38px; font-size: 13px; }
.review-batch-toolbar { border-radius: 12px; }

/* Full admin and collaboration workspace: browse first, edit only when needed. */
body { background: #F7F8FC; }
body.app-shell { grid-template-columns: 224px minmax(0, 1fr); }
body.app-shell main { width: min(1440px, calc(100% - 64px)); margin: 0 auto 72px; padding-top: 34px; }
.side-nav { padding: 26px 14px; border-right-color: #E6E8F0; background: #FBFCFF; }
.side-brand { gap: 5px; padding: 4px 12px 26px; }
.side-brand strong { font-size: 19px; }
.side-brand small { font-size: 11px; }
.side-menu { gap: 10px; }
.side-nav-group { gap: 4px; }
.side-menu a { position: relative; min-height: 40px; padding: 10px 12px; color: #313444; }
.side-menu a:hover { border-color: transparent; background: #F0F2F8; }
.side-menu a.active { background: #EAE7FF; color: #5046D8; }
.side-menu a.active::after { width: 4px; height: 18px; border-radius: 999px; background: #5046D8; content: ""; }
.page-header { align-items: center; min-height: 82px; padding-bottom: 22px; border-bottom: 1px solid #E8EAF1; }
.page-header h1 { max-width: 760px; margin-bottom: 0; font-size: clamp(28px, 2.4vw, 34px); }
.page-header p { max-width: 760px; margin-top: 7px; color: #7A7F92; }
.header-actions { flex-direction: row; align-items: center; }
.online-state, .session-box { border-color: #E3E6EF; background: #FFFFFF; }
.panel { margin-top: 18px; padding: 22px 24px; border-color: #E4E7EF; border-radius: 16px; background: #FFFFFF; }
.current-panel { min-height: 112px; border-color: #E1E4ED; }
.current-panel .metric { margin-top: 7px; font-size: 26px; }
.data-panel, .review-panel, .history-panel, .log-panel { padding: 22px 24px 24px; }
.editor-panel, .publish-panel, .submission-panel, .batch-panel, .account-settings-panel { max-width: 1060px; }
.panel-heading-row, .history-heading { align-items: flex-start; }
.panel-heading-row h2, .history-heading h2, .step-heading h2 { margin-bottom: 7px; }
.field-grid, .base-field-grid { gap: 12px; }
.field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.base-field-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.template-actions, .button-row, .editor-actions { gap: 8px; }
.notice, .validation, .review-meta, .review-submit-note, .history-note { border-radius: 10px; }
.preview-metrics { gap: 10px; }
.preview-metrics > div { padding: 13px 14px; border-radius: 12px; background: #F8F9FC; }
.preview-metrics strong { font-size: 22px; }
.table-wrap { border-color: #E5E7EF; border-radius: 12px; }
th { background: #F7F8FB; color: #6E7385; }
th, td { padding: 11px 12px; }
tbody tr:nth-child(even) { background: #FCFCFE; }
tbody tr:hover { background: #F4F3FF; }
.data-tabs { gap: 4px; margin-top: 18px; }
.data-tab { min-height: 36px; padding-inline: 13px; border-radius: 9px 9px 0 0; }
.data-tab.active { background: #F6F5FF; }
.tag-edit-row, .review-card, .history-entry, .submission-batch-entry, .submission-entry { border-color: #E4E7EF; border-radius: 14px; box-shadow: none; }
.tag-edit-row, .review-card { background: #FBFCFE; }
.review-batch-toolbar { gap: 12px; padding: 14px; border-color: #E4E7EF; background: #F8F9FC; }
.review-controls { gap: 12px; }
.member-action-card { border-color: #E4E7EF; border-radius: 14px; background: #FBFCFE; box-shadow: none; }
.pagination { padding-top: 2px; }
.local-log-panel, .diagnostic-panel { max-width: 980px; }
body[data-current-view="label-library"] #tag-editor:not([hidden]),
body[data-current-view="label-library"] #direct-publish:not([hidden]) { margin-top: 18px; }

/* Functional module framing: one route, one primary task. */
.module-mode-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.module-mode-tabs a { display: grid; gap: 4px; min-height: 72px; padding: 15px 17px; border: 1px solid #E1E5F0; border-radius: 14px; background: #FFFFFF; color: #242738; text-decoration: none; }
.module-mode-tabs a:hover { border-color: #B9B2F7; background: #F7F6FF; color: #5046D8; }
.module-mode-tabs span { color: #7A7F92; font-size: 12px; font-weight: 500; }
body[data-current-view="template-import"] .module-mode-tabs a[href="#template-import"],
body[data-current-view="manual-add"] .module-mode-tabs a[href="#manual-add"] { border-color: #AAA3F5; background: #EFEDFF; color: #5046D8; }
.workflow-panel { max-width: 1180px; }
body[data-current-view="manual-add"] .workflow-panel { max-width: 1060px; }
body[data-current-view="template-import"] #new-preview,
body[data-current-view="template-import"] #new-publish { border-left: 3px solid #DED9FF; }
body[data-current-view="manual-add"] .module-mode-tabs { margin-bottom: 2px; }

/* Reference workspace treatment: stable left navigation, focused content canvas and edit drawer. */
:root {
  --primary: #4433E6;
  --primary-strong: #3324C8;
  --canvas: #FFFFFF;
  --line: #E7E8F1;
  --ink: #1C1D28;
  --muted: #75798A;
}

body { background: #FFFFFF; }
body.app-shell { grid-template-columns: 224px minmax(0, 1fr); }
body.app-shell main { width: min(1280px, calc(100% - 72px)); margin: 0 auto 86px; padding-top: 34px; }
.side-nav { padding: 32px 14px; border-right: 1px solid #ECECF4; background: #FAFAFF; }
.side-brand { padding: 2px 12px 38px; }
.side-brand .eyebrow { color: #4433E6; font-size: 12px; letter-spacing: 0; text-transform: none; }
.side-brand strong { color: #171822; font-size: 21px; letter-spacing: -.04em; }
.side-brand small { color: #8A8D9B; font-size: 12px; }
.side-menu { gap: 14px; }
.side-nav-group { gap: 3px; }
.side-menu a { min-height: 44px; padding: 11px 13px; border-radius: 11px; font-weight: 750; }
.side-menu a span { font-size: 14px; }
.side-menu a.active { background: #F0EEFF; color: #4433E6; }
.side-menu a.active::after { width: 0; height: 0; }
.page-header { min-height: 88px; margin-bottom: 26px; padding-bottom: 0; border-bottom: 0; }
.page-header h1 { margin: 3px 0 8px; color: #171822; font-size: clamp(28px, 2.45vw, 36px); font-weight: 800; letter-spacing: -.055em; }
.page-header p { max-width: 690px; margin: 0; color: #777B8B; font-size: 14px; line-height: 1.65; }
.header-actions { gap: 10px; }
.online-state { border: 0; border-radius: 999px; background: #EDF8F1; color: #208651; }
.session-box { padding: 5px 6px 5px 12px; border-color: #E7E8F1; border-radius: 12px; color: #777B8B; }
.panel { margin-top: 18px; padding: 24px; border-color: #E8E9F1; border-radius: 15px; background: #FFFFFF; }
.current-panel { display: flex; align-items: center; justify-content: space-between; min-height: 116px; }
.current-panel .metric { margin-top: 4px; font-size: 25px; letter-spacing: -.04em; }
.current-panel .button-row { margin-left: auto; }
.section-label { color: #8A8E9D; font-size: 12px; font-weight: 600; }
.panel-heading-row h2, .history-heading h2, .step-heading h2 { color: #20212D; font-size: 19px; }
.panel-heading-row p, .history-heading p, .step-heading p { max-width: 680px; font-size: 13px; }
.module-mode-tabs { gap: 14px; margin-top: 0; }
.module-mode-tabs a { min-height: 82px; padding: 18px; border-color: #E8E9F1; border-radius: 14px; font-size: 15px; }
.module-mode-tabs a span { font-size: 12px; }
button, .file-picker, .button-link { border-radius: 8px; font-weight: 750; }
button:not(.secondary), .file-picker { background: #4433E6; box-shadow: 0 5px 12px rgba(68, 51, 230, .18); }
button:not(.secondary):hover, .file-picker:hover { background: #3324C8; }
.secondary, .button-link.secondary { border-color: #E2E4EF; background: #FFFFFF; color: #2D2F3C; box-shadow: none; }
input, select, textarea { border-color: #E3E5EF; background: #FFFFFF; }
input:focus, select:focus, textarea:focus { border-color: #8176F3; box-shadow: 0 0 0 3px rgba(68, 51, 230, .10); }
.data-panel, .review-panel, .history-panel, .log-panel { padding: 24px; }
.data-tabs { padding-bottom: 0; border-bottom-color: #E8E9F1; }
.data-tab { color: #737789; font-weight: 750; }
.data-tab.active { border-bottom-color: #4433E6; background: #FFFFFF; color: #4433E6; }
.table-wrap { border-color: #E8E9F1; border-radius: 12px; }
th { height: 52px; background: #FFFFFF; color: #717587; font-size: 12px; font-weight: 700; }
th, td { padding: 13px 12px; border-bottom-color: #ECEEF4; }
tbody tr:nth-child(even) { background: #FFFFFF; }
tbody tr:hover { background: #F9F8FF; }
.tag-pill { border-radius: 5px; background: #F0EEFF; color: #4433E6; }
.review-card, .history-entry, .submission-batch-entry, .submission-entry, .member-action-card { border-color: #E8E9F1; border-radius: 12px; background: #FFFFFF; }
.review-card { padding: 18px; }
.review-batch-toolbar { border-color: #E8E9F1; border-radius: 12px; background: #FAFAFE; }
.preview-metrics > div { border: 1px solid #E8E9F1; background: #FFFFFF; }
.preview-metrics > div:nth-child(1) strong { color: #4433E6; }
.preview-metrics > div:nth-child(2) strong { color: #2875F5; }
.preview-metrics > div:nth-child(3) strong { color: #14854C; }
.preview-metrics > div:nth-child(4) strong { color: #9A5C16; }
.history-entry > summary, .submission-batch-entry > summary { padding: 16px; }
.log-panel .table-wrap, .member-table-wrap { max-height: 620px; }

/* Editing is a real task drawer instead of another full-width block below the table. */
body.has-detail-drawer main { width: min(820px, calc(100% - 512px)); margin-left: 36px; margin-right: auto; }
body.has-detail-drawer #tag-editor:not([hidden]) { position: fixed; z-index: 30; top: 0; right: 0; width: min(448px, 38vw); height: 100vh; max-width: none; margin: 0; padding: 28px 26px 112px; overflow-y: auto; border: 0; border-left: 1px solid #E7E8F1; border-radius: 0; box-shadow: -18px 0 42px rgba(31, 32, 52, .10); }
body.has-detail-drawer #tag-editor .editor-heading { position: sticky; z-index: 1; top: -28px; margin: -28px -26px 20px; padding: 28px 26px 16px; border-bottom: 1px solid #ECEEF4; background: #FFFFFF; }
body.has-detail-drawer #tag-editor .editor-heading::before { display: block; margin-bottom: 6px; color: #777B8B; content: "标签详情"; font-size: 12px; font-weight: 700; }
body.has-detail-drawer #tag-editor .base-field-grid { grid-template-columns: 1fr; }
body.has-detail-drawer #tag-editor .tag-edit-row { grid-template-columns: 1fr; padding: 14px; }
body.has-pending-edits #direct-publish:not([hidden]) { position: fixed; z-index: 31; right: 24px; bottom: 22px; width: min(520px, calc(100vw - 280px)); margin: 0; padding: 14px 16px; border-color: #D9D4FF; border-radius: 14px; box-shadow: 0 14px 34px rgba(44, 35, 152, .18); }
body.has-pending-edits #direct-publish .step-heading { display: none; }
body.has-pending-edits #direct-publish .field-grid { display: grid; grid-template-columns: 140px 1fr auto; align-items: end; gap: 9px; }
body.has-pending-edits #direct-publish .wide-field { grid-column: auto; }
body.has-pending-edits #direct-publish .advanced-field, body.has-pending-edits #direct-publish .message { display: none; }
body.has-pending-edits #direct-publish button { grid-column: 3; grid-row: 1; }

@media (max-width: 1000px) {
  body.has-detail-drawer main { width: calc(100% - 32px); margin: 0 auto 72px; }
  body.has-detail-drawer #tag-editor:not([hidden]) { width: min(460px, 92vw); }
}

/* Blue refinement: remove the cold gray surfaces and reserve red for destructive actions. */
:root {
  --primary: #2E8FF7;
  --primary-strong: #197FEA;
  --canvas: #F7FBFF;
  --line: #DFEAF5;
  --muted: #728197;
}

body { background: #F7FBFF; }
.side-nav { border-right-color: #E1ECF6; background: #F8FBFF; }
.side-brand .eyebrow, .side-menu a.active, .data-tab.active, .tag-pill { color: #237FDE; }
.side-menu a.active { background: #EAF4FF; }
.side-menu a:hover { background: #F0F7FF; color: #237FDE; }
.online-state { background: #EDF9F3; }
.panel, .module-mode-tabs a, .table-wrap, .session-box, .secondary, .button-link.secondary { border-color: #DFEAF5; }
.module-mode-tabs a:hover { border-color: #B8DDFE; background: #F4FAFF; color: #237FDE; }
body[data-current-view="template-import"] .module-mode-tabs a[href="#template-import"],
body[data-current-view="manual-add"] .module-mode-tabs a[href="#manual-add"] { border-color: #B7DCFE; background: #EAF4FF; color: #237FDE; }
button:not(.secondary), .file-picker { background: #2E8FF7; box-shadow: 0 5px 12px rgba(46, 143, 247, .14); }
button:not(.secondary):hover, .file-picker:hover { background: #197FEA; }
.data-tabs { border-bottom-color: #DFEAF5; }
.data-tab.active { border-color: #D4E7FA; border-bottom-color: #2E8FF7; background: #EEF7FF; }
.data-tab span { background: #DFF0FF; color: #237FDE; }
th { background: #FFFFFF; color: #708097; }
tbody tr:nth-child(even), tbody tr:hover { background: #FFFFFF; }
tbody tr:hover td { background: #F5FAFF; }
.tag-pill { border-color: #C7E3FD; background: #ECF6FF; }
.preview-metrics > div, .review-batch-toolbar, .member-action-card { border-color: #DFEAF5; background: #FFFFFF; }
.member-account-actions .danger,
button.danger:not(.secondary) { border-color: #FFC9C5; background: #FFF5F4; box-shadow: none; color: #D94A43; }
.member-account-actions .danger:hover:not(:disabled),
button.danger:not(.secondary):hover:not(:disabled) { border-color: #FFAFA9; background: #FFE9E7; color: #BF342E; }

/* Weiboyi-style enterprise console: white canvas, compact controls and data-first tables. */
:root {
  --primary: #4A9FF5;
  --primary-strong: #298CEE;
  --canvas: #FFFFFF;
  --line: #EDF0F5;
  --ink: #30343B;
  --muted: #7D8795;
}

body { background: #FFFFFF; font-size: 12px; }
body.app-shell { grid-template-columns: 202px minmax(0, 1fr); }
body.app-shell main { width: min(1560px, calc(100% - 44px)); margin: 0 auto 52px; padding-top: 20px; }
.side-nav { padding: 18px 10px; border-right-color: #E7EBF1; background: #FFFFFF; }
.side-brand { padding: 2px 10px 20px; }
.side-brand .eyebrow { color: #2C94EF; font-size: 11px; }
.side-brand strong { font-size: 17px; font-weight: 700; }
.side-brand small { font-size: 11px; }
.side-menu { gap: 8px; }
.side-nav-group { gap: 0; }
.side-menu a { min-height: 34px; padding: 8px 12px; border-radius: 3px; font-weight: 600; }
.side-menu a span { font-size: 12px; }
.side-menu a.active { background: #EEF7FF; color: #258DEB; }
.side-menu a:hover { background: #F6FAFE; color: #258DEB; }
.page-header { min-height: 48px; margin-bottom: 14px; padding: 0 0 12px; border-bottom: 1px solid #EDF0F5; }
.page-header h1 { margin: 0 0 4px; font-size: 22px; font-weight: 650; letter-spacing: -.025em; }
.page-header p { font-size: 12px; line-height: 1.45; }
.header-actions { gap: 8px; }
.online-state, .session-box { min-height: 28px; padding: 4px 8px; border-radius: 3px; font-size: 11px; }
.panel { margin-top: 14px; padding: 0; border: 0; border-radius: 0; background: transparent; }
.current-panel { min-height: 72px; align-items: flex-start; }
.current-panel > div:first-child { min-width: 174px; padding: 10px 18px; border-radius: 3px; background: #4A9FF5; color: #FFFFFF; }
.current-panel .section-label, .current-panel .muted { color: rgba(255, 255, 255, .82); }
.current-panel .metric { margin: 2px 0; color: #FFFFFF; font-size: 22px; }
.current-panel .button-row { margin-top: 10px; }
.module-mode-tabs { gap: 8px; margin-top: 6px; }
.module-mode-tabs a { min-height: 56px; padding: 10px 13px; border-color: #E8EDF3; border-radius: 3px; font-size: 13px; }
.module-mode-tabs a span { font-size: 11px; }
body[data-current-view="template-import"] .module-mode-tabs a[href="#template-import"],
body[data-current-view="manual-add"] .module-mode-tabs a[href="#manual-add"] { border-color: #B7DDFE; background: #F0F8FF; color: #258DEB; }
.data-panel, .review-panel, .history-panel, .log-panel, .batch-panel, .submission-panel, .account-settings-panel, .editor-panel { padding-top: 4px; }
.panel-heading-row, .history-heading { padding-bottom: 10px; border-bottom: 1px solid #EDF0F5; }
.panel-heading-row h2, .history-heading h2, .step-heading h2 { margin-bottom: 4px; font-size: 16px; }
.panel-heading-row p, .history-heading p, .step-heading p { font-size: 12px; }
.step-heading { margin-bottom: 14px; }
.step-heading > span { width: 24px; height: 24px; border-radius: 3px; background: #EAF5FF; color: #258DEB; font-size: 13px; }
button, .file-picker, .button-link { min-height: 30px; padding: 0 11px; border-radius: 3px; font-size: 12px; font-weight: 600; }
button:not(.secondary), .file-picker { background: #4A9FF5; box-shadow: none; }
button:not(.secondary):hover, .file-picker:hover { background: #298CEE; }
.secondary, .button-link.secondary { border-color: #DDE5EE; border-radius: 3px; }
input, select, textarea { min-height: 30px; margin-top: 4px; padding: 5px 8px; border-color: #DDE5EE; border-radius: 3px; font-size: 12px; }
.data-tabs { gap: 5px; margin: 12px 0 8px; border-bottom: 0; }
.data-tab { min-height: 34px; padding: 0 14px; border: 1px solid #DDE5EE; border-radius: 3px; background: #FFFFFF; color: #566170; }
.data-tab.active { border-color: #4A9FF5; background: #EEF7FF; color: #258DEB; transform: none; }
.data-tab span { background: transparent; color: inherit; }
.table-wrap { border-color: #E7ECF2; border-radius: 0; }
th { height: 36px; background: #F8FAFC; color: #5E6977; font-size: 11px; font-weight: 600; }
th, td { padding: 8px 10px; }
tbody tr:hover td { background: #F6FBFF; }
.tag-pill, .status-pill { min-height: 20px; padding: 1px 6px; border-radius: 2px; font-size: 11px; }
.tag-pill { border-color: #C7E3FD; background: #EDF7FF; color: #258DEB; }
.preview-metrics { gap: 8px; }
.preview-metrics > div { padding: 10px 12px; border-color: #E7ECF2; border-radius: 3px; }
.preview-metrics strong { font-size: 20px; }
.notice, .validation, .review-meta, .review-submit-note, .history-note { border-radius: 3px; font-size: 12px; }
.review-card, .history-entry, .submission-batch-entry, .submission-entry, .member-action-card { border-color: #E7ECF2; border-radius: 3px; }
.review-card, .member-action-card { padding: 12px; }
.review-batch-toolbar { padding: 10px; border-color: #E7ECF2; border-radius: 3px; background: #F8FAFC; }
.history-entry > summary, .submission-batch-entry > summary { padding: 11px 12px; }
.member-account-actions .danger,
button.danger:not(.secondary) { border-color: #FFCCC7; background: #FFFFFF; color: #E0544E; }
.member-account-actions .danger:hover:not(:disabled),
button.danger:not(.secondary):hover:not(:disabled) { border-color: #FFA39E; background: #FFF1F0; color: #CF3E38; }
body.has-detail-drawer #tag-editor:not([hidden]) { border-left-color: #E7ECF2; box-shadow: -10px 0 24px rgba(39, 74, 111, .10); }
body.has-detail-drawer #tag-editor .editor-heading { border-bottom-color: #E7ECF2; }
body.has-pending-edits #direct-publish:not([hidden]) { border-color: #B7DDFE; border-radius: 3px; box-shadow: 0 10px 22px rgba(39, 112, 180, .14); }

/* Filled controls and badges always use white copy for a single, clear contrast rule. */
.side-menu a.active { background: #4A9FF5; color: #FFFFFF; }
.side-menu a.active span { color: inherit; }
.module-mode-tabs a[href="#template-import"],
.module-mode-tabs a[href="#manual-add"] { transition: background-color .15s ease, border-color .15s ease; }
body[data-current-view="template-import"] .module-mode-tabs a[href="#template-import"],
body[data-current-view="manual-add"] .module-mode-tabs a[href="#manual-add"] { border-color: #4A9FF5; background: #4A9FF5; color: #FFFFFF; }
body[data-current-view="template-import"] .module-mode-tabs a[href="#template-import"] span,
body[data-current-view="manual-add"] .module-mode-tabs a[href="#manual-add"] span { color: rgba(255, 255, 255, .82); }
.data-tab.active { border-color: #4A9FF5; border-bottom-color: #4A9FF5; background: #4A9FF5; color: #FFFFFF; }
.data-tab.active span { color: #FFFFFF; }
button.data-tab:not(.active) { border-color: #DDE5EE; background: #FFFFFF; color: #566170; box-shadow: none; }
button.data-tab:not(.active):hover:not(:disabled) { border-color: #B8DDFE; background: #F4FAFF; color: #258DEB; }
.step-heading > span { background: #4A9FF5; color: #FFFFFF; }
.online-state.ok { border-color: #45AF77; background: #45AF77; color: #FFFFFF; }
.online-state.error { border-color: #E0645E; background: #E0645E; color: #FFFFFF; }
.tag-pill { border-color: #4A9FF5; background: #4A9FF5; color: #FFFFFF; }
.tone-bg-positive, .status-pill-approved, .change-type-new { border-color: #45AF77; background: #45AF77; color: #FFFFFF; }
.tone-bg-negative, .status-pill-rejected, .change-type-fixed { border-color: #E0645E; background: #E0645E; color: #FFFFFF; }
.tone-bg-neutral, .status-pill, .status-pill-mixed, .change-type, .change-type-improved { border-color: #8291A6; background: #8291A6; color: #FFFFFF; }

/* Selected blue workspace: soft Chinese type, white surfaces, and one consistent action color. */
:root {
  color-scheme: light;
  --primary: #2678F2;
  --primary-strong: #1469DF;
  --canvas: #F8FBFF;
  --surface: #FFFFFF;
  --line: #E5ECF5;
  --ink: #202938;
  --muted: #718096;
  --positive: #19A46A;
  --positive-bg: #EAF9F1;
  --negative: #E2574C;
  --negative-bg: #FFF1F0;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Inter, -apple-system, BlinkMacSystemFont, sans-serif;
}

body { background: #F8FBFF; background-image: none; font-size: 13px; }
body.app-shell { grid-template-columns: 230px minmax(0, 1fr); background: #F8FBFF; }
body.app-shell main { width: min(1460px, calc(100% - 56px)); margin: 0 auto 64px; padding-top: 30px; }
.side-nav { top: 14px; height: calc(100vh - 28px); margin: 14px 0 14px 14px; padding: 22px 10px; border: 1px solid #E5ECF5; border-radius: 18px; background: #FFFFFF; box-shadow: 0 12px 30px rgba(48, 86, 135, .055); }
.side-brand { gap: 4px; padding: 2px 12px 26px; }
.side-brand .eyebrow { color: #2678F2; font-size: 12px; font-weight: 650; letter-spacing: 0; text-transform: none; }
.side-brand strong { color: #202938; font-size: 19px; font-weight: 650; letter-spacing: -.025em; }
.side-brand small { color: #8A98AA; font-size: 12px; }
.side-menu { gap: 10px; }
.side-nav-group { gap: 3px; }
.side-menu a { min-height: 38px; padding: 9px 12px; border-radius: 8px; color: #4D5B6E; }
.side-menu a span { font-size: 13px; font-weight: 550; }
.side-menu a:hover, button.data-tab:not(.active):hover:not(:disabled) { border-color: #D8E8FF; background: #F2F7FF; color: #2678F2; }
.side-menu a.active { border-color: #CDE0FF; background: #EDF5FF; color: #2678F2; }
.side-menu a.active span { color: inherit; font-weight: 650; }
.page-header { align-items: flex-start; min-height: 74px; margin-bottom: 22px; padding: 0; border: 0; }
.page-header h1 { margin: 4px 0 6px; color: #202938; font-size: clamp(28px, 2.75vw, 38px); font-weight: 650; letter-spacing: -.045em; line-height: 1.2; }
.page-header p { max-width: 740px; color: #718096; font-size: 14px; font-weight: 400; line-height: 1.65; }
.eyebrow { color: #718096; font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.header-actions { gap: 8px; }
.online-state, .session-box { border-color: #E5ECF5; border-radius: 10px; background: #FFFFFF; box-shadow: 0 2px 10px rgba(48, 86, 135, .04); color: #718096; }
.online-state.ok { border-color: #C8EFDA; background: #EAF9F1; color: #168757; }
.online-state.error { border-color: #FFD2CE; background: #FFF1F0; color: #D84D43; }

.panel { margin-top: 18px; padding: 22px; border-color: #E5ECF5; border-radius: 14px; background: #FFFFFF; box-shadow: 0 8px 26px rgba(48, 86, 135, .045); }
.current-panel { min-height: 108px; }
.current-panel > div:first-child { min-width: 180px; padding: 0; border-radius: 0; background: transparent; color: inherit; }
.current-panel .section-label, .current-panel .muted { color: #718096; }
.current-panel .metric { margin: 4px 0 2px; color: #202938; font-size: 26px; font-weight: 650; }
.current-panel .button-row { margin-top: 0; }
.module-mode-tabs { gap: 12px; margin-top: 18px; }
.module-mode-tabs a { min-height: 74px; padding: 16px; border-color: #E5ECF5; border-radius: 12px; background: #FFFFFF; box-shadow: 0 6px 18px rgba(48, 86, 135, .035); color: #304154; font-size: 14px; font-weight: 600; }
.module-mode-tabs a span { color: #8A98AA; font-size: 12px; font-weight: 400; }
body[data-current-view="template-import"] .module-mode-tabs a[href="#template-import"],
body[data-current-view="manual-add"] .module-mode-tabs a[href="#manual-add"] { border-color: #2678F2; background: #2678F2; color: #FFFFFF; box-shadow: 0 10px 20px rgba(38, 120, 242, .18); }
body[data-current-view="template-import"] .module-mode-tabs a[href="#template-import"] span,
body[data-current-view="manual-add"] .module-mode-tabs a[href="#manual-add"] span { color: rgba(255, 255, 255, .78); }

button, .file-picker, .button-link { min-height: 38px; padding: 0 15px; border-radius: 8px; background: #2678F2; box-shadow: 0 6px 14px rgba(38, 120, 242, .16); color: #FFFFFF; font-size: 13px; font-weight: 600; }
button:not(.secondary), .file-picker { background: #2678F2; box-shadow: 0 6px 14px rgba(38, 120, 242, .16); color: #FFFFFF; }
button:not(.secondary):hover:not(:disabled), .file-picker:hover { background: #1469DF; box-shadow: 0 8px 18px rgba(38, 120, 242, .22); }
.secondary, .button-link.secondary { border-color: #DCE7F3; border-radius: 8px; background: #FFFFFF; box-shadow: none; color: #415165; }
.secondary:hover:not(:disabled), .button-link.secondary:hover { border-color: #CDE0FF; background: #F2F7FF; color: #2678F2; }
.danger, .member-account-actions .danger, button.danger:not(.secondary) { border-color: #FFD2CE; background: #FFFFFF; box-shadow: none; color: #D84D43; }
.danger:hover:not(:disabled), .member-account-actions .danger:hover:not(:disabled), button.danger:not(.secondary):hover:not(:disabled) { border-color: #FFB8B2; background: #FFF1F0; color: #C74036; }

label { color: #3D4C5E; font-size: 13px; font-weight: 550; }
input, select, textarea { min-height: 38px; margin-top: 6px; padding: 8px 10px; border-color: #DCE7F3; border-radius: 8px; background: #FFFFFF; box-shadow: none; color: #263548; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(38, 120, 242, .12); border-color: #78B2FF; }
.notice, .validation { border-color: #D8E8FF; border-radius: 9px; background: #F4F9FF; color: #50647A; }
.validation.ok { border-color: #C8EFDA; background: #EAF9F1; color: #168757; }
.validation.error { border-color: #FFD2CE; background: #FFF1F0; color: #D84D43; }
.preview-metrics > div { border-color: #E5ECF5; border-radius: 10px; background: #FFFFFF; box-shadow: none; }
.preview-metrics strong { color: #2678F2; font-size: 23px; font-weight: 650; }

.data-tabs { gap: 7px; margin: 16px 0 12px; border-bottom: 0; }
button.data-tab:not(.active) { min-height: 36px; border-color: #DCE7F3; border-radius: 8px; background: #FFFFFF; box-shadow: none; color: #59697D; }
button.data-tab:not(.active):hover:not(:disabled) { border-color: #CDE0FF; background: #F2F7FF; color: #2678F2; }
button.data-tab.active { min-height: 36px; border-color: #2678F2; border-bottom-color: #2678F2; border-radius: 8px; background: #2678F2; box-shadow: 0 6px 14px rgba(38, 120, 242, .16); color: #FFFFFF; transform: none; }
button.data-tab.active span { color: #FFFFFF; }
.data-tab span { background: transparent; }
.table-wrap { border-color: #E5ECF5; border-radius: 10px; box-shadow: none; }
th { height: 42px; background: #F8FBFF; color: #718096; font-size: 12px; font-weight: 600; }
th, td { padding: 10px 11px; border-bottom-color: #EDF2F7; }
tbody tr:nth-child(even) { background: #FFFFFF; }
tbody tr:hover td { background: #F6FAFF; }
.tag-pill, .status-pill { min-height: 22px; padding: 2px 7px; border-radius: 5px; font-size: 11px; font-weight: 550; }
.tag-pill { border-color: #CDE0FF; background: #EDF5FF; color: #2678F2; }
.tone-bg-positive, .status-pill-approved { border-color: #C8EFDA; background: #EAF9F1; color: #168757; }
.tone-bg-negative, .status-pill-rejected { border-color: #FFD2CE; background: #FFF1F0; color: #D84D43; }
.tone-bg-neutral, .status-pill, .status-pill-mixed { border-color: #DCE7F3; background: #F4F7FA; color: #5D6D80; }

.platform-cell { display: table-cell; white-space: nowrap; }
.platform-icon-badge { display: inline-flex; align-items: center; justify-content: center; width: 25px; height: 25px; margin-right: 7px; border-radius: 7px; background: var(--platform-icon-background); box-shadow: 0 2px 5px rgba(32, 41, 56, .12); vertical-align: middle; }
.platform-icon { display: block; width: 16px; height: 16px; margin: 0; object-fit: contain; }

.review-batch-toolbar, .review-card, .history-entry, .submission-batch-entry, .submission-entry, .member-action-card, .tag-edit-row { border-color: #E5ECF5; border-radius: 10px; background: #FFFFFF; box-shadow: none; }
.review-batch-toolbar { background: #F8FBFF; }
.review-card-selected { border-color: #A9CEFF; background: #F2F7FF; }
.history-note, .review-meta, .review-submit-note, .local-log-list > div { border-color: #E5ECF5; border-radius: 8px; background: #F8FBFF; }
.member-action-card { padding: 16px; }
.pagination { margin-top: 16px; }
.page-size-control { display: inline-flex; align-items: center; gap: 4px; color: #718096; font-size: 12px; font-weight: 500; white-space: nowrap; }
.page-size-control select { min-width: 56px; min-height: 32px; margin: 0; padding: 4px 24px 4px 8px; border-radius: 7px; font-size: 12px; }
.filterable-column { min-width: 126px; vertical-align: top; }
.filterable-column > span { display: block; margin-bottom: 5px; }
.column-filter-input, .column-filter-select { display: block; width: 100%; min-width: 0; min-height: 28px; margin: 0; padding: 3px 7px; border-color: #DCE7F3; border-radius: 6px; background: #FFFFFF; color: #415165; font-size: 11px; font-weight: 500; }
.column-filter-select { padding-right: 20px; }

body.has-detail-drawer main { width: min(940px, calc(100% - 520px)); margin-left: 30px; margin-right: auto; }
body.has-detail-drawer #tag-editor:not([hidden]) { top: 14px; right: 14px; width: min(450px, 38vw); height: calc(100vh - 28px); padding: 24px 22px 96px; border: 1px solid #E5ECF5; border-radius: 16px; background: #FFFFFF; box-shadow: 0 18px 42px rgba(48, 86, 135, .13); }
body.has-detail-drawer #tag-editor .editor-heading { top: -24px; margin: -24px -22px 18px; padding: 24px 22px 14px; border-bottom-color: #E5ECF5; background: #FFFFFF; }
body.has-detail-drawer #tag-editor .editor-heading::before { color: #718096; font-weight: 500; }
body.has-pending-edits #direct-publish:not([hidden]) { right: 30px; bottom: 28px; width: min(540px, calc(100vw - 290px)); border-color: #CDE0FF; border-radius: 12px; background: #FFFFFF; box-shadow: 0 16px 34px rgba(38, 120, 242, .16); }

@media (max-width: 1000px) {
  body.app-shell main { width: calc(100% - 32px); }
  .side-nav { margin: 0; border: 0; border-radius: 0; box-shadow: none; }
  body.has-detail-drawer #tag-editor:not([hidden]) { top: 12px; right: 12px; height: calc(100vh - 24px); }
}

@media (max-width: 900px) {
  body.app-shell { display: block; }
  body.app-shell main { width: calc(100% - 32px); margin: 24px auto 68px; }
  .side-nav { position: static; height: auto; padding: 12px 16px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .side-brand { display: flex; align-items: center; gap: 8px; padding: 0 4px 10px; white-space: nowrap; }
  .side-brand .eyebrow, .side-brand small, .side-nav-group-title, .side-menu a small { display: none; }
  .side-menu, .side-nav-group { display: flex; gap: 6px; width: max-content; }
  .side-menu { gap: 12px; }
  .side-menu a { min-width: max-content; padding: 8px 11px; }
  body.app-shell main { width: calc(100% - 32px); padding-top: 22px; }
  main { width: calc(100% - 32px); margin-top: 24px; }
  .page-header, .current-panel, .panel-heading-row, .history-heading { display: block; }
  .header-actions { align-items: flex-start; margin-top: 14px; }
  .online-state { display: inline-block; margin-top: 12px; }
  .search-field { width: 100%; margin-top: 14px; }
  .field-grid, .base-field-grid, .compact-grid, .log-filters, .member-action-grid { grid-template-columns: 1fr; }
  .wide-field { grid-column: auto; }
  .tag-edit-row { grid-template-columns: 1fr; }
  .review-batch-toolbar, .review-controls { grid-template-columns: 1fr; }
  .review-card-heading { display: block; }
  .review-card-heading > .muted { display: block; margin-top: 6px; }
  .preview-metrics { grid-template-columns: 1fr 1fr; }
  .module-mode-tabs { grid-template-columns: 1fr; }
  .history-actions { display: grid; width: 100%; margin-top: 12px; }
  .history-heading button { margin-top: 0; }
  .history-entry > summary { grid-template-columns: 1fr 1fr; }
  .history-version { justify-self: end; }
  .history-entry-actions { align-items: stretch; flex-direction: column; }
  .submission-batch-entry > summary { grid-template-columns: 1fr 1fr; }
  .submission-batch-entry > summary > .status-pill { justify-self: start; }
  .submission-batch-toolbar { align-items: stretch; flex-direction: column; }
  .approval-flow { grid-template-columns: 1fr; gap: 10px; }
  .approval-step:not(:nth-child(3))::after { display: none; }
  .submission-entry > summary { grid-template-columns: max-content 1fr; }
  .submission-entry > summary > .muted { grid-column: 1 / -1; }
  .review-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .changelog-header { margin-bottom: 34px; }
  .changelog-entry { grid-template-columns: 1fr; gap: 14px; }
  .changelog-entry-meta { display: flex; align-items: center; padding-right: 0; border-right: 0; }
}

@media (max-width: 520px) {
  main { width: calc(100% - 24px); }
  .panel { padding: 18px; border-radius: 20px; }
  .top-nav { display: flex; flex-wrap: wrap; border-radius: 16px; }
  .top-nav a { flex: 1; min-width: 0; padding: 9px 10px; }
  .preview-metrics { grid-template-columns: 1fr 1fr; }
  .template-actions { align-items: stretch; }
  .template-actions .button-link, .template-actions .file-picker { width: 100%; }
  .button-row { justify-content: stretch; }
  .button-row button { flex: 1; }
  .login-card { padding: 30px 22px; border-radius: 26px; }
  .login-card h1 { font-size: 52px; }
  .role-picker { grid-template-columns: 1fr; }
}