:root {
  --admin-ink: #181b1d;
  --admin-muted: #72787b;
  --admin-line: #dfe1df;
  --admin-paper: #f4f4f1;
  --admin-white: #fff;
  --admin-accent: #e83b12;
  --miao: #b69b6d;
  --buer: #e62b1e;
  --maituo: #607a68;
  --zhiying: #16a6a1;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { min-width: 320px; }
body { min-height: 100vh; color: var(--admin-ink); background: var(--admin-paper); font-family: Inter, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; letter-spacing: 0; }
body, button, input, select, textarea { font-size: 14px; font-family: inherit; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { letter-spacing: 0; }
button { color: inherit; }
.flat-icon { width: 18px; height: 18px; flex: 0 0 auto; }

.layout { display: flex; min-height: 100vh; }
.sidebar { position: sticky; top: 0; width: 260px; height: 100vh; flex: 0 0 260px; display: flex; flex-direction: column; color: #c4c8c9; background: #121618; border-right: 1px solid #292e30; z-index: 40; }
.sidebar-logo { height: 82px; padding: 0 22px; display: flex; align-items: center; border-bottom: 1px solid #292e30; }
.sidebar-logo a { display: flex; align-items: center; gap: 13px; min-width: 0; }
.sidebar-logo img { width: 38px; height: 38px; object-fit: contain; background: white; }
.sidebar-logo span { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sidebar-logo strong { color: white; font-size: 14px; white-space: nowrap; }
.sidebar-logo small { color: #697174; font: 9px ui-monospace, SFMono-Regular, Consolas, monospace; }
.sidebar-nav { flex: 1; padding: 18px 12px; overflow-y: auto; }
.nav-group { margin-bottom: 22px; }
.nav-group > p { padding: 0 12px 8px; color: #626a6d; font-size: 10px; font-weight: 700; }
.nav-item { min-height: 40px; padding: 0 12px; display: flex; align-items: center; gap: 12px; color: #9ea5a7; border-left: 2px solid transparent; transition: color .15s, background .15s; }
.nav-item:hover { color: white; background: #1c2225; }
.nav-item.active { color: white; background: #22282a; border-left-color: var(--admin-accent); }
.nav-item .flat-icon { width: 17px; height: 17px; }
.brand-dot { width: 10px; height: 10px; border: 1px solid currentColor; }
.brand-dot.tone-miao { color: var(--miao); background: var(--miao); }
.brand-dot.tone-buer { color: var(--buer); background: var(--buer); }
.brand-dot.tone-maituo { color: var(--maituo); background: var(--maituo); }
.brand-dot.tone-zhiying { color: var(--zhiying); background: var(--zhiying); }
.sidebar-footer { padding: 14px 16px; display: grid; gap: 4px; border-top: 1px solid #292e30; }
.sidebar-footer a { min-height: 36px; padding: 0 8px; display: flex; align-items: center; gap: 10px; color: #7e878a; font-size: 12px; }
.sidebar-footer a:hover { color: white; }

.main { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 30; height: 64px; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: rgba(255,255,255,.97); border-bottom: 1px solid var(--admin-line); }
.topbar h1 { margin-right: auto; font-size: 18px; font-weight: 650; }
.topbar-right { display: flex; align-items: center; gap: 9px; color: var(--admin-muted); font-size: 12px; }
.user-state { width: 7px; height: 7px; background: #47a36b; }
.sidebar-toggle { display: none; width: 36px; height: 36px; border: 1px solid var(--admin-line); background: white; align-items: center; justify-content: center; }
.content { flex: 1; padding: 28px; overflow: auto; }
.content-wide { padding: 0; overflow: hidden; }

.page-intro { margin-bottom: 24px; display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.page-intro h2 { margin-bottom: 8px; font-size: 28px; font-weight: 650; }
.page-intro p { color: var(--admin-muted); line-height: 1.7; }
.eyebrow { margin-bottom: 8px; color: var(--admin-accent); font: 700 10px ui-monospace, SFMono-Regular, Consolas, monospace; }

.card { margin-bottom: 20px; padding: 20px; background: var(--admin-white); border: 1px solid var(--admin-line); border-radius: 4px; box-shadow: none; }
.card-title { margin-bottom: 16px; font-size: 15px; font-weight: 650; }
.stat-grid { margin-bottom: 20px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.stat-card { min-height: 132px; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; background: white; border: 1px solid var(--admin-line); border-radius: 3px; }
.stat-card .label { color: var(--admin-muted); font-size: 12px; }
.stat-card .value { font-size: 31px; font-weight: 650; }
.stat-card .value-split { color: var(--admin-muted); font-size: 18px; font-weight: 500; }
.stat-card .sub { color: #969b9d; font-size: 11px; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, .75fr); gap: 20px; }
.brand-workspaces { margin-bottom: 22px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.brand-workspace { min-height: 174px; padding: 20px; display: flex; flex-direction: column; border: 1px solid transparent; }
.brand-workspace .workspace-code { font: 10px ui-monospace, SFMono-Regular, Consolas, monospace; opacity: .65; }
.brand-workspace h3 { margin: 26px 0 4px; font-size: 23px; }
.brand-workspace p { font-size: 12px; opacity: .72; }
.brand-workspace .workspace-meta { margin-top: auto; display: flex; align-items: center; justify-content: space-between; font-size: 12px; }
.brand-workspace .flat-icon { width: 16px; }
.workspace-miao { color: #eee9df; background: #181715; border-color: #393631; }
.workspace-buer { color: white; background: #1d252e; border-color: #35404a; }
.workspace-buer .workspace-meta { color: #ff685e; }
.workspace-maituo { color: #343735; background: #e8ece7; border-color: #cbd3cc; }
.workspace-maituo .workspace-meta { color: #506858; }
.workspace-zhiying { color: #e4ecee; background: #182126; border-color: #324149; }
.workspace-zhiying .workspace-meta { color: #35c4bf; }
.activity-list { display: grid; }
.activity-row { min-height: 64px; display: grid; grid-template-columns: 46px 1fr auto; gap: 12px; align-items: center; border-top: 1px solid var(--admin-line); }
.activity-row:first-child { border-top: 0; }
.activity-index { color: var(--admin-accent); font: 700 10px ui-monospace, monospace; }
.activity-row strong { display: block; font-size: 13px; }
.activity-row small { display: block; margin-top: 5px; color: var(--admin-muted); }
.quick-actions { display: grid; }
.quick-action { min-height: 58px; padding: 0 2px; display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--admin-line); }
.quick-action:first-child { border-top: 0; }
.quick-action span { flex: 1; }
.quick-action .flat-icon:last-child { width: 15px; color: var(--admin-muted); }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { padding: 11px 12px; color: #697073; background: #f7f7f5; border-bottom: 1px solid var(--admin-line); text-align: left; font-size: 11px; font-weight: 650; white-space: nowrap; }
td { padding: 11px 12px; border-bottom: 1px solid #eceeec; vertical-align: middle; }
tbody tr:hover td { background: #fafaf8; }

.btn { min-height: 36px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid transparent; border-radius: 3px; background: white; cursor: pointer; font-weight: 600; transition: background .15s, border .15s; }
.btn .flat-icon { width: 16px; height: 16px; }
.btn-primary { color: white; background: var(--admin-accent); border-color: var(--admin-accent); }
.btn-primary:hover { background: #c92f0b; border-color: #c92f0b; }
.btn-danger { color: #bd3129; background: #fff; border-color: #e4c1bd; }
.btn-danger:hover { background: #fff5f4; }
.btn-default { color: #4f5558; background: #fff; border-color: #d3d6d4; }
.btn-default:hover { background: #f5f5f2; }
.btn-dark { color: white; background: #1a1e20; border-color: #1a1e20; }
.btn-sm { min-height: 30px; padding: 0 10px; font-size: 11px; }
.icon-btn { width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: #656b6e; border: 1px solid #d9dcda; background: white; cursor: pointer; }
.icon-btn:hover { color: var(--admin-accent); border-color: var(--admin-accent); }
.icon-btn.danger:hover { color: #bd3129; border-color: #bd3129; }

.form-group { margin-bottom: 16px; }
.form-group label { margin-bottom: 7px; display: block; color: #555c5f; font-size: 12px; font-weight: 600; }
.form-control, .search-input { width: 100%; min-height: 40px; padding: 8px 11px; color: var(--admin-ink); background: white; border: 1px solid #d4d7d5; border-radius: 3px; outline: 0; }
.form-control:focus, .search-input:focus { border-color: var(--admin-accent); box-shadow: 0 0 0 2px rgba(232,59,18,.08); }
textarea.form-control { min-height: 90px; resize: vertical; line-height: 1.7; }
.form-help { margin-top: 7px; color: #858b8e; font-size: 11px; line-height: 1.6; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.toolbar { margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.toolbar-left { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.search-input { width: 240px; }
.select-compact { width: 150px; }

.business-settings { overflow: hidden; border: 1px solid var(--admin-line); border-radius: 3px; }
.brand-editor-card { max-width: 1040px; }
.business-editor { background: white; border-bottom: 1px solid var(--admin-line); }
.business-editor:last-child { border-bottom: 0; }
.business-editor summary { min-height: 56px; padding: 12px 16px; display: flex; align-items: center; gap: 12px; cursor: pointer; background: #fafaf8; }
.business-editor:nth-child(1) summary { border-left: 3px solid var(--miao); }
.business-editor:nth-child(2) summary { border-left: 3px solid var(--buer); }
.business-editor:nth-child(3) summary { border-left: 3px solid var(--maituo); }
.business-editor:nth-child(4) summary { border-left: 3px solid var(--zhiying); }
.business-editor summary strong { min-width: 90px; }
.business-editor summary span { color: var(--admin-muted); font-size: 11px; }
.business-editor-body { padding: 18px 16px 4px; }
.business-toggle-row { margin-bottom: 16px; display: flex; gap: 24px; }
.business-toggle-row label { display: flex; align-items: center; gap: 7px; font-size: 12px; }
.business-setting-row { min-height: 50px; padding: 10px 12px; display: grid; grid-template-columns: 1fr auto auto; gap: 18px; align-items: center; border-bottom: 1px solid #eceeec; }
.business-setting-row:last-child { border-bottom: 0; }
.business-setting-row label { margin: 0; display: flex; align-items: center; gap: 6px; font-weight: 400; }
.about-editor-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.about-editor-grid .card { margin-bottom: 0; }
.code-textarea { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; line-height: 1.7; }
.sticky-save { position: sticky; bottom: 0; margin-top: 20px; padding: 14px 18px; display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.97); border: 1px solid var(--admin-line); }
.save-success { color: #278349; font-size: 12px; }
.save-error { color: #bd3129; font-size: 12px; }

.badge { min-height: 24px; padding: 0 8px; display: inline-flex; align-items: center; border-radius: 2px; font-size: 11px; }
.badge-success { color: #276c43; background: #e8f3ec; }
.badge-warning { color: #9a5d13; background: #fff2da; }
.badge-danger { color: #a72d27; background: #fbe7e5; }
.badge-info { color: #2a6873; background: #e6f2f4; }
.badge-default { color: #63696c; background: #eceeec; }
.pagination { margin-top: 16px; display: flex; align-items: center; justify-content: flex-end; gap: 6px; font-size: 12px; }
.page-btn { min-height: 32px; padding: 0 10px; display: inline-flex; align-items: center; border: 1px solid #d6d9d7; background: white; cursor: pointer; }
.page-btn:hover, .page-btn.active { color: white; background: var(--admin-accent); border-color: var(--admin-accent); }
.empty, .loading { padding: 46px 20px; color: #92989a; text-align: center; }
.empty .icon { width: 34px; height: 34px; margin: 0 auto 12px; }
.img-thumb { width: 54px; height: 42px; object-fit: cover; background: #eceeec; border-radius: 2px; }

.modal-overlay { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(10,13,14,.64); }
.modal-overlay.show { display: flex; }
.modal { width: 560px; max-width: 100%; max-height: 92vh; display: flex; flex-direction: column; background: white; border-radius: 4px; }
.modal-header { min-height: 58px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--admin-line); }
.modal-header h3 { font-size: 16px; }
.modal-close { width: 34px; height: 34px; color: #858b8e; background: none; border: 0; cursor: pointer; font-size: 22px; }
.modal-body { flex: 1; padding: 20px; overflow-y: auto; }
.modal-footer { padding: 14px 20px; display: flex; justify-content: flex-end; gap: 9px; border-top: 1px solid var(--admin-line); }

/* Works workspace and waterfall editor */
.brand-filter { display: flex; gap: 4px; padding: 4px; background: #e9ebe8; }
.brand-filter button { min-height: 32px; padding: 0 12px; color: #656b6e; border: 0; background: transparent; cursor: pointer; }
.brand-filter button.active { color: white; background: #1a1e20; }
.work-title-cell { min-width: 220px; }
.work-title-cell strong { display: block; }
.work-title-cell small { display: block; margin-top: 5px; color: var(--admin-muted); }
.brand-badge { min-height: 24px; padding: 0 8px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--admin-line); font-size: 11px; }
.brand-badge::before { content: ''; width: 7px; height: 7px; background: currentColor; }
.brand-badge.miao { color: #8e754c; }
.brand-badge.buer { color: #c62f25; }
.brand-badge.maituo { color: #506858; }
.brand-badge.zhiying { color: #128d89; }
.table-actions { display: flex; gap: 6px; }

.work-editor { position: fixed; inset: 0 0 0 260px; z-index: 80; display: none; flex-direction: column; background: #eceeeb; }
.work-editor.show { display: flex; }
.editor-topbar { height: 64px; padding: 0 20px; display: flex; align-items: center; gap: 14px; background: white; border-bottom: 1px solid var(--admin-line); }
.editor-topbar .editor-title { min-width: 0; margin-right: auto; }
.editor-topbar h2 { overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.editor-topbar p { margin-top: 3px; color: var(--admin-muted); font-size: 10px; }
.save-state { color: var(--admin-muted); font-size: 11px; }
.save-state.success { color: #278349; }
.save-state.error { color: #bd3129; }
.editor-layout { min-height: 0; flex: 1; display: grid; grid-template-columns: 292px minmax(420px, 1fr) 364px; }
.editor-meta, .editor-preview { min-height: 0; padding: 20px; overflow-y: auto; background: #f7f7f5; }
.editor-meta { border-right: 1px solid var(--admin-line); }
.editor-preview { border-left: 1px solid var(--admin-line); }
.editor-panel-title { margin-bottom: 18px; display: flex; align-items: center; justify-content: space-between; }
.editor-panel-title h3 { font-size: 13px; }
.editor-panel-title span { color: var(--admin-muted); font-size: 10px; }
.cover-uploader { position: relative; margin-bottom: 16px; aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--admin-muted); background: #e9ebe8; border: 1px dashed #bfc4c1; cursor: pointer; }
.cover-uploader img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cover-uploader span { position: relative; z-index: 1; padding: 7px 9px; display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,.9); }
.cover-uploader input { display: none; }
.cover-asset-button { width: 100%; margin: -8px 0 16px; }
.switch-row { min-height: 42px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--admin-line); }
.switch-row input { accent-color: var(--admin-accent); }
.editor-canvas { min-height: 0; padding: 24px; overflow-y: auto; }
.block-library { position: sticky; top: -24px; z-index: 5; margin: -24px -24px 20px; padding: 12px 24px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; background: rgba(236,238,235,.96); border-bottom: 1px solid #d4d7d5; }
.block-library > span { margin-right: 4px; color: var(--admin-muted); font-size: 10px; }
.block-library button { min-height: 32px; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px; color: #51575a; background: white; border: 1px solid #d2d6d3; cursor: pointer; font-size: 11px; }
.block-list { max-width: 760px; margin: 0 auto; display: grid; gap: 10px; }
.block-empty { min-height: 280px; padding: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #858b8e; text-align: center; background: white; border: 1px dashed #bfc4c1; }
.content-block { background: white; border: 1px solid #d8dbd9; }
.content-block.dragging { opacity: .45; }
.content-block.drop-target { border-color: var(--admin-accent); }
.block-toolbar { min-height: 42px; padding: 0 8px; display: flex; align-items: center; gap: 4px; color: #73797c; background: #f8f8f6; border-bottom: 1px solid #e7e9e7; }
.drag-handle { cursor: grab; }
.block-kind { margin-left: 4px; margin-right: auto; color: #666d70; font-size: 10px; font-weight: 700; }
.block-toolbar .icon-btn { width: 28px; height: 28px; border-color: transparent; background: transparent; }
.block-toolbar .flat-icon { width: 15px; height: 15px; }
.block-body { padding: 18px; }
.block-body input, .block-body textarea, .block-body select { width: 100%; }
.block-body .heading-input { font-size: 22px; font-weight: 650; }
.block-body textarea { min-height: 116px; border: 0; outline: 0; resize: vertical; line-height: 1.8; }
.block-body .quote-input { padding: 12px 16px; background: #f4f4f1; border-left: 3px solid var(--admin-accent); font-size: 16px; }
.image-editor { display: grid; gap: 10px; }
.image-drop { min-height: 150px; display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--admin-muted); background: #f1f2ef; border: 1px dashed #c4c8c5; }
.image-drop img { width: 100%; max-height: 320px; object-fit: contain; }
.image-actions { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.group-images { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.group-image { position: relative; min-height: 105px; display: flex; align-items: center; justify-content: center; background: #f1f2ef; border: 1px solid #d9dcda; }
.group-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.group-image button { position: absolute; top: 4px; right: 4px; z-index: 1; width: 24px; height: 24px; color: white; background: rgba(15,18,20,.7); border: 0; cursor: pointer; }
.divider-preview { margin: 22px 0; border-top: 1px solid #cdd1ce; }
.insert-between { height: 8px; position: relative; }
.insert-between button { position: absolute; top: 50%; left: 50%; width: 24px; height: 24px; display: none; align-items: center; justify-content: center; transform: translate(-50%,-50%); color: white; background: var(--admin-accent); border: 0; cursor: pointer; }
.insert-between:hover button { display: flex; }

.phone-preview { width: 320px; min-height: 620px; margin: 0 auto; overflow: hidden; background: #fff; border: 8px solid #1a1e20; border-radius: 28px; }
.phone-status { height: 26px; padding: 8px 18px 0; display: flex; justify-content: space-between; color: #8b9193; font-size: 8px; }
.preview-scroll { max-height: calc(100vh - 164px); overflow-y: auto; }
.preview-cover { position: relative; min-height: 200px; display: flex; align-items: end; background: #24292b; background-size: cover; background-position: center; }
.preview-cover::before { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent,rgba(8,10,11,.76)); }
.preview-cover div { position: relative; z-index: 1; padding: 22px 18px; color: white; }
.preview-cover small { color: #d1d5d6; }
.preview-cover h2 { margin-top: 7px; font-size: 23px; }
.preview-meta { padding: 13px 18px; display: flex; gap: 16px; color: #777d80; background: #f3f3f0; font-size: 9px; }
.preview-article { padding-bottom: 30px; }
.preview-article h3 { padding: 25px 18px 9px; font-size: 17px; }
.preview-article p { padding: 0 18px 13px; color: #596064; font-size: 12px; line-height: 1.8; white-space: pre-wrap; }
.preview-article blockquote { margin: 10px 18px 16px; padding: 12px; color: #454c4f; background: #f3f3f0; border-left: 3px solid var(--admin-accent); font-size: 12px; line-height: 1.7; }
.preview-article img { width: 100%; display: block; }
.preview-article .preview-caption { padding: 8px 18px; color: #929799; font-size: 9px; text-align: center; }
.preview-group { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.preview-group.three { grid-template-columns: repeat(3, 1fr); }
.preview-group img { height: 100px; object-fit: cover; }
.preview-divider { margin: 20px 18px; border-top: 1px solid #dfe1df; }

.login-page { display: flex; align-items: stretch; background: white; }
.login-shell { width: 100%; min-height: 100vh; display: grid; grid-template-columns: minmax(360px, .78fr) 1.22fr; }
.login-brand { padding: 48px; display: flex; flex-direction: column; justify-content: space-between; color: white; background: #121618; }
.login-brand > a { display: flex; align-items: center; gap: 14px; }
.login-brand img { width: 44px; height: 44px; object-fit: contain; background: white; }
.login-brand a span { display: flex; flex-direction: column; gap: 5px; }
.login-brand a strong { font-size: 15px; }
.login-brand a small, .login-brand > span, .login-brand > div > p { color: #737c7f; font: 10px ui-monospace, SFMono-Regular, Consolas, monospace; }
.login-brand h1 { margin-top: 20px; font-size: 48px; font-weight: 600; line-height: 1.2; }
.login-form { padding: 50px; display: flex; align-items: center; justify-content: center; background: #f4f4f1; }
.login-form form { width: min(400px, 100%); }
.login-form h2 { margin-bottom: 38px; font-size: 30px; }
.login-form .field { margin-bottom: 20px; }
.login-form label { margin-bottom: 8px; display: block; color: #555c5f; font-size: 12px; font-weight: 600; }
.login-form .form-control { min-height: 48px; }
.login-form .btn { width: 100%; min-height: 48px; margin-top: 8px; }
.login-error { min-height: 22px; margin-top: 14px; color: #bd3129; font-size: 12px; }

@media (max-width: 1260px) {
  .editor-layout { grid-template-columns: 260px minmax(390px, 1fr); }
  .editor-preview { display: none; }
  .brand-workspaces { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 980px) {
  .sidebar { position: fixed; left: -260px; transition: left .2s; }
  body.sidebar-open .sidebar { left: 0; }
  body.sidebar-open::after { content: ''; position: fixed; inset: 0; z-index: 35; background: rgba(10,13,14,.55); }
  .sidebar-toggle { display: inline-flex; }
  .work-editor { left: 0; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .editor-layout { grid-template-columns: 240px minmax(360px, 1fr); }
}

@media (max-width: 720px) {
  .topbar { padding: 0 16px; }
  .content { padding: 18px 14px; }
  .page-intro { align-items: start; flex-direction: column; }
  .page-intro h2 { font-size: 24px; }
  .stat-grid, .brand-workspaces, .about-editor-grid, .form-row { grid-template-columns: 1fr; }
  .toolbar { align-items: stretch; flex-direction: column; }
  .toolbar-left, .search-input, .select-compact { width: 100%; }
  .toolbar-left .form-control { width: 100% !important; }
  .editor-layout { display: block; overflow-y: auto; }
  .editor-meta { border-right: 0; border-bottom: 1px solid var(--admin-line); }
  .editor-canvas { overflow: visible; }
  .editor-topbar { padding: 0 10px; }
  .editor-topbar .save-state { display: none; }
  .editor-topbar .editor-title { max-width: 140px; }
  .editor-topbar .editor-title p { display: none; }
  .editor-topbar #draftButton, .editor-topbar #publishButton { width: 38px; padding: 0; }
  .editor-topbar #draftButton span, .editor-topbar #publishButton span { display: none; }
  .block-library { top: 0; }
  .modal-overlay { padding: 8px; }
  .login-shell { grid-template-columns: 1fr; }
  .login-brand { min-height: 230px; padding: 28px 24px; }
  .login-brand h1 { font-size: 34px; }
  .login-form { padding: 46px 24px; align-items: start; }
}

/* Platform operations */
body.modal-open { overflow: hidden; }
.stat-grid.compact .stat-card { min-height: 104px; }
.toolbar-note, .cell-sub, .field-help { display: block; color: var(--admin-muted); font-size: 11px; }
.cell-sub { max-width: 360px; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.code-field, code, .mono-muted { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.mono-muted { color: var(--admin-muted); font-size: 11px; }
.status-badge { min-height: 23px; padding: 0 8px; display: inline-flex; align-items: center; color: #555d60; background: #eceeec; border-left: 2px solid #8c9497; font-size: 11px; white-space: nowrap; }
.status-published, .status-completed, .status-confirmed, .status-read, .status-active { color: #286c47; background: #e8f3ec; border-color: #3f9562; }
.status-review, .status-scheduled, .status-planned, .status-pending, .status-pending_approval, .status-submitted, .status-assigned { color: #895714; background: #fff2db; border-color: #d18b2d; }
.status-processing, .status-in_progress, .status-reading, .status-approved, .status-released { color: #236876; background: #e5f2f4; border-color: #2b8797; }
.status-revoked, .status-locked, .status-closed, .status-archived { color: #7a4744; background: #f4e9e8; border-color: #aa5a55; }
.status-paused, .status-waiting_customer, .status-resolved { color: #5e5475; background: #eeebf4; border-color: #75698f; }
.brand-label { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.brand-label .brand-dot { width: 8px; height: 8px; }
.table-actions { display: flex; gap: 5px; }
.btn-small { min-height: 30px; padding: 0 10px; font-size: 11px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.form-grid .span-2 { grid-column: span 2; }
.modal-wide { width: 760px; }
.modal-actions { min-height: 64px; padding: 12px 20px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--admin-line); }
.modal-header .eyebrow { margin: 0 0 3px; }
.modal-header { padding-top: 8px; padding-bottom: 8px; }
.action-spacer { flex: 1; }
.check-row { grid-column: span 2; min-height: 40px; display: flex; align-items: center; gap: 9px; font-size: 12px; }
.check-row input { width: 17px; height: 17px; accent-color: var(--admin-accent); }
.admin-toast { position: fixed; right: 22px; bottom: 22px; z-index: 1400; max-width: 360px; padding: 12px 16px; color: white; background: #1c2224; border-left: 3px solid #4ca36d; opacity: 0; transform: translateY(12px); pointer-events: none; transition: .18s; font-size: 12px; }
.admin-toast.show { opacity: 1; transform: translateY(0); }
.admin-toast.error { border-left-color: #d94a40; }
.asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.asset-card { min-width: 0; padding: 0; overflow: hidden; color: inherit; background: white; border: 1px solid var(--admin-line); text-align: left; cursor: pointer; }
.asset-card:hover { border-color: #9da3a1; }
.asset-preview { height: 150px; display: grid; place-items: center; background: #e9ebe9; overflow: hidden; }
.asset-preview img { width: 100%; height: 100%; object-fit: cover; }
.file-mark { color: #9c332b; font: 700 24px ui-monospace, monospace; }
.asset-info { min-width: 0; padding: 12px; display: block; }
.asset-info strong, .asset-info small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asset-info strong { font-size: 12px; }
.asset-info small { margin-top: 6px; color: var(--admin-muted); font-size: 10px; }
.admin-asset-picker { width: min(960px, calc(100vw - 40px)); }
.asset-picker-tools { padding: 14px 18px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--admin-line); }
.asset-picker-search { min-width: 0; flex: 1; position: relative; }
.asset-picker-search .flat-icon { position: absolute; left: 11px; top: 50%; width: 17px; transform: translateY(-50%); color: var(--admin-muted); }
.asset-picker-search input { padding-left: 38px; }
.admin-asset-picker-grid { max-height: min(58vh, 600px); padding: 14px 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; overflow-y: auto; background: #f1f2ef; }
.admin-asset-choice { min-width: 0; padding: 0; color: inherit; background: white; border: 1px solid var(--admin-line); cursor: pointer; text-align: left; }
.admin-asset-choice:hover { border-color: #8e9693; }
.admin-asset-choice.selected { border-color: #23816f; box-shadow: inset 0 0 0 2px #23816f; }
.admin-asset-choice-image { position: relative; height: 128px; display: block; overflow: hidden; background: #e1e4e2; }
.admin-asset-choice-image img { width: 100%; height: 100%; object-fit: cover; }
.admin-asset-choice-image i { position: absolute; top: 7px; right: 7px; width: 25px; height: 25px; display: none; place-items: center; color: white; background: #23816f; }
.admin-asset-choice.selected .admin-asset-choice-image i { display: grid; }
.admin-asset-choice-image i .flat-icon { width: 15px; }
.admin-asset-choice > span:last-child { min-width: 0; padding: 9px 10px 10px; display: block; }
.admin-asset-choice strong, .admin-asset-choice small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-asset-choice strong { font-size: 11px; }
.admin-asset-choice small { margin-top: 5px; color: var(--admin-muted); font-size: 9px; }
.asset-picker-empty { min-height: 230px; grid-column: 1 / -1; display: grid; place-content: center; gap: 6px; color: var(--admin-muted); text-align: center; }
.asset-picker-count { color: var(--admin-muted); font-size: 11px; }
.block-image-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 7px; }
.block-image-selection { min-width: 0; color: var(--admin-muted); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empty-state { min-height: 300px; grid-column: 1 / -1; display: grid; place-content: center; gap: 7px; color: var(--admin-muted); text-align: center; }
.empty-state strong { color: #555d60; font-size: 15px; }
.master-detail { min-height: 620px; display: grid; grid-template-columns: minmax(270px, .72fr) minmax(520px, 1.7fr); background: white; border: 1px solid var(--admin-line); }
.master-list { padding: 8px; border-right: 1px solid var(--admin-line); overflow-y: auto; }
.master-row { width: 100%; min-height: 70px; padding: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 0; border-left: 3px solid transparent; border-bottom: 1px solid #eceeec; background: white; text-align: left; cursor: pointer; }
.master-row:hover { background: #f8f8f5; }
.master-row.active { background: #f2f2ef; border-left-color: var(--admin-accent); }
.master-row span:first-child { min-width: 0; }
.master-row strong, .master-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.master-row strong { font-size: 12px; }
.master-row small { margin-top: 6px; color: var(--admin-muted); font-size: 10px; }
.detail-panel { min-width: 0; padding: 24px; }
.detail-header { margin-bottom: 18px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.detail-header h2 { margin-bottom: 7px; font-size: 23px; }
.detail-header p:last-child { max-width: 720px; color: var(--admin-muted); line-height: 1.7; }
.detail-meta { min-height: 44px; margin-bottom: 10px; display: flex; align-items: center; gap: 18px; border-top: 1px solid var(--admin-line); border-bottom: 1px solid var(--admin-line); color: var(--admin-muted); font-size: 11px; }
.detail-section { padding: 20px 0; border-bottom: 1px solid var(--admin-line); }
.section-heading { margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.section-heading h3 { font-size: 14px; }
.section-heading .eyebrow { margin-bottom: 3px; }
.record-list { display: grid; }
.record-row { min-height: 58px; padding: 9px 2px; display: flex; align-items: center; gap: 10px; border-top: 1px solid #eceeec; }
.record-row:first-child { border-top: 0; }
.record-row > span:first-child { min-width: 0; flex: 1; }
.record-row strong, .record-row small { display: block; }
.record-row strong { font-size: 12px; }
.record-row small { margin-top: 5px; color: var(--admin-muted); font-size: 10px; line-height: 1.5; }
.empty-inline { padding: 20px 0; color: var(--admin-muted); font-size: 11px; }
.token-result > p { margin-bottom: 22px; color: var(--admin-muted); font-size: 12px; line-height: 1.7; }
.token-result > label { margin: 16px 0 7px; display: block; color: var(--admin-muted); font-size: 11px; }
.copy-line { display: flex; gap: 6px; }
.token-code { padding: 16px; color: #0e7774; background: #e7f5f4; border: 1px solid #abdcd9; text-align: center; font: 700 28px ui-monospace, Consolas, monospace; letter-spacing: 4px; }
.service-theme .page-intro .eyebrow { color: var(--zhiying); }
.service-theme .stat-card.signal { color: white; background: #172125; border-color: #2d4148; }
.service-theme .stat-card.signal .label { color: #8ba2aa; }
.btn-signal { color: #061113; background: #27c7c1; border-color: #27c7c1; }
.btn-signal:hover { background: #1aaba6; }
.segmented { width: fit-content; margin-bottom: 16px; padding: 3px; display: flex; background: #e4e7e5; }
.segmented button { min-height: 34px; padding: 0 16px; border: 0; background: transparent; color: #626a6d; cursor: pointer; }
.segmented button.active { color: white; background: #192125; }
.scope-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.scope-grid label { min-height: 38px; padding: 0 10px; display: flex; align-items: center; gap: 7px; background: #f4f5f2; border: 1px solid var(--admin-line); font-size: 11px; }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.settings-grid .card { margin: 0; }
.span-full { grid-column: 1 / -1; }
.section-heading.compact { margin-bottom: 16px; align-items: center; }
.section-heading.compact h3 { margin-top: 4px; font-size: 18px; }
.structured-editor, .compact-block-list { display: grid; gap: 10px; }
.media-record { border: 1px solid var(--admin-line); background: #f8f9f8; }
.media-record-head { min-height: 42px; padding: 6px 10px 6px 14px; border-bottom: 1px solid var(--admin-line); display: flex; align-items: center; justify-content: space-between; }
.media-record-head > span { display: flex; gap: 3px; }
.media-record-body { padding: 12px; display: grid; grid-template-columns: 170px 1fr; gap: 12px; }
.media-picker { min-width: 0; padding: 8px; border: 1px dashed #b8bdbb; background: #eef0ef; display: grid; gap: 8px; align-content: start; color: var(--admin-muted); }
.media-picker-preview { width: 100%; height: 120px; display: grid; place-items: center; overflow: hidden; background: #e2e5e3; }
.media-picker-preview img { width: 100%; height: 100%; object-fit: cover; }
.media-picker .block-image-actions { margin: 0; justify-content: center; }
.media-picker .block-image-selection { text-align: center; }
.record-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; }
.record-fields .wide { grid-column: 1 / -1; }
.block-toolbar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; }
.block-image-fields { display: grid; grid-template-columns: 128px 1fr; gap: 10px; }
.block-image-fields img, .image-placeholder { width: 128px; height: 92px; object-fit: cover; background: #eef0ef; border: 1px solid var(--admin-line); }
.image-placeholder { display: grid; place-items: center; color: var(--admin-muted); font-size: 12px; }
.business-contact-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.business-contact-card { padding: 14px; border: 1px solid var(--admin-line); border-top: 3px solid #838987; display: grid; gap: 11px; }
.business-contact-card > div { display: grid; grid-template-columns: 9px 1fr; column-gap: 8px; }
.business-contact-card > div i { width: 9px; height: 9px; margin-top: 4px; background: #838987; }
.business-contact-card > div small { grid-column: 2; color: var(--admin-muted); }
.business-contact-card label { display: grid; gap: 5px; color: var(--admin-muted); font-size: 12px; }
.business-contact-card.tone-miao-laiyi { border-top-color: #ad9366; }
.business-contact-card.tone-buer { border-top-color: #e83b12; }
.business-contact-card.tone-maituo { border-top-color: #607a68; }
.business-contact-card.tone-zhiying { border-top-color: #16a6a1; }
.settings-owner-note { margin: 8px 0 18px; padding: 12px; background: #f3f4f1; border-left: 3px solid var(--admin-accent); }
.settings-owner-note a { margin-left: 4px; color: var(--admin-accent); font-weight: 700; }
.settings-owner-card { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 14px; }
.settings-owner-card p { max-width: 480px; color: var(--admin-muted); font-size: 12px; line-height: 1.8; }
.choice-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.choice-grid label, .relation-choice-list label { min-height: 40px; padding: 8px 10px; display: flex; align-items: center; gap: 8px; background: #f5f6f3; border: 1px solid var(--admin-line); font-size: 11px; cursor: pointer; }
.choice-grid input, .relation-choice-list input { width: 16px; height: 16px; accent-color: var(--admin-accent); }
.relation-choice-list { max-height: 190px; padding: 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; overflow-y: auto; border: 1px solid var(--admin-line); }
.mini-block-library { margin-bottom: 8px; padding: 8px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; background: #f1f2ef; border: 1px solid var(--admin-line); }
.mini-block-library > span { margin-right: 8px; color: var(--admin-muted); font-size: 10px; text-transform: uppercase; }
.compact-block-editor { display: grid; gap: 7px; }
.compact-content-block { padding: 9px; background: #fff; border: 1px solid var(--admin-line); border-left: 3px solid #a7adab; }
.compact-content-block:has(select), .compact-content-block:has(.block-image-fields) { border-left-color: #3f827f; }
.compact-block-head { min-height: 28px; margin-bottom: 7px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.compact-block-head strong { color: var(--admin-muted); font-size: 10px; text-transform: uppercase; }
.compact-block-head span { display: flex; gap: 3px; }
.compact-content-block .form-control + .form-control { margin-top: 6px; }
.compact-content-block hr { border: 0; border-top: 1px solid #8f9694; }
.segmented-control { margin: 4px 0 14px; padding: 3px; display: flex; background: #e7e9e6; }
.segmented-control button { min-height: 38px; flex: 1; border: 0; color: var(--admin-muted); background: transparent; cursor: pointer; }
.segmented-control button.active { color: white; background: #182024; }
.compact-upload { min-height: 104px; }
.selected-document { min-height: 42px; padding: 11px 12px; color: #116864; background: #e6f4f2; border-left: 3px solid #27c7c1; font-size: 11px; }
.project-rich-preview { padding: 16px; background: #f5f6f3; border-bottom: 0; }
.project-rich-preview p:not(.eyebrow) { margin-top: 7px; line-height: 1.7; }
.project-content-heading { font-size: 16px; font-weight: 700; }
.project-content-quote { padding-left: 12px; border-left: 2px solid var(--admin-accent); color: var(--admin-muted); }

@media (max-width: 900px) {
  .business-contact-grid { grid-template-columns: 1fr 1fr; }
  .master-detail { grid-template-columns: 1fr; }
  .master-list { max-height: 300px; border-right: 0; border-bottom: 1px solid var(--admin-line); }
  .detail-panel { padding: 18px; }
}
@media (max-width: 720px) {
  .settings-grid, .choice-grid, .relation-choice-list { grid-template-columns: 1fr; }
  .media-record-body, .block-image-fields, .business-contact-grid { grid-template-columns: 1fr; }
  .media-picker-preview { height: 180px; }
  .stat-grid.compact { grid-template-columns: 1fr 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .span-2, .check-row { grid-column: span 1; }
  .asset-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .admin-asset-picker { width: calc(100vw - 20px); }
  .asset-picker-tools { padding: 10px; align-items: stretch; flex-direction: column; }
  .admin-asset-picker-grid { padding: 10px; grid-template-columns: 1fr 1fr; }
  .admin-asset-choice-image { height: 108px; }
  .asset-preview { height: 116px; }
  .detail-header { align-items: stretch; flex-direction: column; }
  .record-row { align-items: flex-start; flex-wrap: wrap; }
  .segmented { width: 100%; }
  .segmented button { flex: 1; padding: 0 7px; }
}