:root { color-scheme:light; --color-background:#f3f4f2; --color-surface:#fff; --color-surface-subtle:#f8f8f6; --color-surface-raised:#fff; --color-text:#202729; --color-text-muted:#687173; --color-border:#dde1df; --color-border-soft:#ecefed; --color-hover:#f8faf9; --color-row-hover:#fbfbf9; --color-input:#fff; --color-overlay:rgba(18,28,29,.46); --color-shadow:rgba(20,33,30,.16); --color-background-dark:#151918; --color-accent:#79513f; --color-accent-strong:#5f3d2f; --color-accent-soft:#f3ebe6; --color-secondary:#176d69; --color-secondary-soft:#e5f1ef; --color-danger:#ad4438; --color-warning:#b56d31; --color-success:#247358; --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --radius-sm:4px; --radius-md:6px; --control-height:36px; --sidebar-width:224px; --font-size-xs:11px; --font-size-sm:12px; --font-size-md:14px; --font-size-lg:18px; --font-size-xl:24px; --ink:var(--color-text); --muted:var(--color-text-muted); --line:var(--color-border); --paper:var(--color-background); --white:var(--color-surface); --teal:var(--color-secondary); --teal-soft:var(--color-secondary-soft); --orange:var(--color-warning); }
:root[data-theme="dark"] { color-scheme:dark; --color-background:#151918; --color-surface:#1d2221; --color-surface-subtle:#222827; --color-surface-raised:#272d2c; --color-text:#e8ecea; --color-text-muted:#9aa5a2; --color-border:#343c3a; --color-border-soft:#2a312f; --color-hover:#29302e; --color-row-hover:#242b29; --color-input:#202625; --color-overlay:rgba(0,0,0,.7); --color-shadow:rgba(0,0,0,.38); --color-accent:#b77d60; --color-accent-strong:#c78b6d; --color-accent-soft:#372a25; --color-secondary:#63aaa1; --color-secondary-soft:#203a37; --color-danger:#e07b70; --color-warning:#d6975f; --color-success:#65b98d; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
.module-switch,.content-editor { margin-bottom:16px; }
.switch-line { display:flex; align-items:center; gap:10px; }
.taxonomy-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.table-subtitle { margin-top:4px; color:var(--muted); font-size:12px; }
@media (max-width:900px) { .taxonomy-grid { grid-template-columns:1fr; } }
body { margin:0; font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; color:var(--ink); background:var(--paper); }
button,input,select { font:inherit; }
button { cursor:pointer; }
.login-screen { min-height:100vh; display:grid; place-items:center; padding:24px; background:var(--paper); }
.login-panel { width:min(420px,100%); padding:42px 38px; border:1px solid var(--line); background:var(--white); text-align:center; }
.login-panel p { margin:0 0 10px; color:var(--muted); font-size:13px; }
.login-panel h1 { margin:0 0 28px; font-size:28px; font-weight:750; }
.login-panel .primary-button { width:100%; min-height:44px; }
.login-panel span { display:block; margin-top:14px; color:var(--muted); font-size:12px; line-height:1.6; }
.shell { min-height:100vh; display:grid; grid-template-columns:238px minmax(0,1fr); }
.sidebar { padding:24px 16px; border-right:1px solid var(--line); background:#fbfbf9; display:flex; flex-direction:column; }
.brand { display:flex; gap:11px; align-items:center; padding:0 10px 28px; } .brand-mark { display:grid; place-items:center; width:34px; height:34px; background:var(--teal); color:white; font-weight:800; }
.brand strong,.account strong { display:block; font-size:15px; } .brand span,.account span { display:block; margin-top:3px; font-size:12px; color:var(--muted); }
.nav { display:grid; gap:5px; }.nav-item { border:0; background:transparent; text-align:left; padding:12px 13px; border-radius:6px; color:#4b555b; font-weight:650; }.nav-item:hover,.nav-item.active { background:var(--teal-soft); color:#07635c; }.nav-item b { float:right; min-width:20px; padding:2px 6px; text-align:center; border-radius:10px; background:var(--orange); color:#fff; font-size:11px; }
.account { margin-top:auto; display:flex; align-items:center; gap:9px; padding:15px 10px 0; border-top:1px solid var(--line); }.avatar { width:29px;height:29px; display:grid;place-items:center;border-radius:50%;background:#d8ebe6;color:var(--teal);font-size:13px;font-weight:700; }
.account select { width:100%; margin-top:8px; border:1px solid var(--line); border-radius:4px; padding:5px 7px; color:#475158; background:#fff; font-size:11px; }
.logout-button { display:block; margin-top:12px; padding:0; border:0; color:var(--muted); background:transparent; font-size:12px; }
.logout-button:hover { color:var(--orange); }
.workspace { min-width:0; }.topbar { min-height:104px; padding:24px 42px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:rgba(255,255,255,.72); }.topbar p,.dialog p { margin:0 0 4px; color:var(--muted); font-size:13px; }.topbar h1,.dialog h2 { margin:0; font-size:24px; letter-spacing:0; }.top-actions { display:flex; gap:9px; }.icon-button { width:36px;height:36px;border:1px solid var(--line);background:var(--white);border-radius:5px;font-size:21px;line-height:1; }
.primary-button,.secondary-button { min-height:36px; padding:0 14px; border-radius:5px; border:1px solid transparent; font-weight:700; }.primary-button { color:#fff;background:var(--color-accent); }.primary-button:hover { background:var(--color-accent-strong); }.secondary-button { color:#30383a;background:#fff;border-color:var(--line); }.secondary-button:hover { border-color:#aaa19b; background:#faf9f7; }
#view { width:100%; max-width:1680px; margin:0 auto; padding:24px 32px 48px; }.notice { display:flex; gap:11px; align-items:center; padding:11px 13px; border-left:3px solid var(--orange); background:#fff8f2; color:#78472f; font-size:12px; }
.metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin:23px 0; }.metric { padding:16px; border:1px solid var(--line); background:var(--white); }.metric span { color:var(--muted); font-size:13px; }.metric strong { display:block; margin-top:9px; font-size:28px; }
.toolbar { display:flex; gap:10px; align-items:center; margin:20px 0 12px; }.search { flex:1; min-width:200px; border:1px solid var(--line); background:#fff; border-radius:5px; padding:10px 12px; }.select { min-height:38px; background:#fff; border:1px solid var(--line); border-radius:5px; padding:0 10px; }
.table-wrap { max-width:100%; overflow:auto; overscroll-behavior:contain; border:1px solid var(--line); border-radius:6px; background:var(--white); }.table { width:100%; min-width:840px; border-collapse:separate; border-spacing:0; }.table th,.table td { padding:10px 12px; border-bottom:1px solid #ecefed; text-align:left; font-size:12px; line-height:1.45; white-space:nowrap; }.table thead th { position:sticky; z-index:2; top:0; background:#f7f8f6; color:#626b6d; font-size:11px; font-weight:750; }.table tbody tr:hover td { background:#fbfbf9; }.table tbody tr:last-child td { border-bottom:0; }.table th:last-child,.table td:last-child { position:sticky; right:0; background:#fff; box-shadow:-1px 0 0 var(--line); }.table thead th:last-child { background:#f7f8f6; }.product-name { font-weight:750; }.code { color:var(--color-accent); font-family:ui-monospace,SFMono-Regular,monospace; font-size:12px; }.tag { display:inline-block; padding:3px 7px; border-radius:8px; color:#17655e; background:var(--teal-soft); font-size:11px; }.tag-list { white-space:normal!important; min-width:160px; }.tag-list .tag { margin:2px 4px 2px 0; }.status,.status-pill { display:inline-block; padding:3px 7px; border-radius:8px; background:#eef1f1; color:#637078; font-size:11px; }.status.live,.status-published { color:var(--color-success); background:#e6f2eb; }.status-draft { color:#7e644e; background:#f3ede7; }.status-hidden { color:#687173; background:#edf0ef; }.table button.link-button { border:0; padding:2px 0; background:transparent; color:var(--color-secondary); font-weight:700; }
.bulkbar { position:sticky; bottom:16px; display:none; align-items:center; gap:11px; margin-top:14px; padding:12px 14px; background:#172d2a; color:#fff; box-shadow:0 8px 24px rgba(20,33,30,.18); }.bulkbar.visible { display:flex; }.bulkbar .select { min-width:160px; }.bulkbar .primary-button { background:#31a294; }
.customer-directory { margin-top:24px; }.section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin:0 0 12px; }.section-head h2 { margin:4px 0 0; color:#253038; font-size:18px; }.eyebrow { color:var(--teal); font-size:11px; font-weight:800; letter-spacing:.08em; }.approval-overview { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:22px; }.approval-overview-card { display:grid; gap:8px; min-height:118px; padding:17px; border:1px solid var(--line); color:#253038; background:var(--white); text-align:left; cursor:pointer; }.approval-overview-card:hover { border-color:#8bc7bf; background:#f8fcfb; }.approval-overview-card span { color:var(--muted); font-size:13px; }.approval-overview-card strong { font-size:28px; line-height:1; }.approval-overview-card small { color:var(--teal); font-size:12px; font-weight:700; }.approval-page { margin-top:22px; }.approval-page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:18px; }.approval-page-head h2 { margin:5px 0 0; color:#253038; font-size:21px; }.approval-page-head p { margin:7px 0 0; }.approval-tabs { display:flex; gap:20px; border-bottom:1px solid var(--line); }.approval-page-tabs { padding:0 2px; overflow-x:auto; }.approval-tab { flex:0 0 auto; min-height:44px; border:0; border-bottom:2px solid transparent; padding:0; color:var(--muted); background:transparent; font-weight:700; cursor:pointer; }.approval-tab.active { border-bottom-color:var(--teal); color:var(--teal); }.approval-tab b { display:inline-grid; min-width:18px; height:18px; margin-left:4px; place-items:center; border-radius:9px; color:#17655e; background:var(--teal-soft); font-size:10px; }.approval-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }.approval-actions .link-button { border:0; padding:0; color:#9a6547; background:transparent; font-size:12px; font-weight:700; }.approval-history { display:grid; gap:8px; padding:4px 0; }.approval-history div { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; color:#4c5658; font-size:12px; }.approval-history span { flex:0 0 auto; color:var(--muted); font-size:11px; text-align:right; }.history-row td { white-space:normal!important; background:#fbfcfb; }.owner-select { min-height:34px; border:1px solid var(--line); border-radius:5px; padding:0 8px; color:#253038; background:#fff; }.pagination { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; color:var(--muted); font-size:12px; }.pagination > div { display:flex; gap:8px; }
.customer-detail-page { margin-top:22px; }.customer-detail-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:18px; }.customer-detail-head h2 { margin:5px 0 0; color:#253038; font-size:22px; }.customer-detail-head p { margin:8px 0 0; }.customer-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }.detail-panel { padding:18px; border:1px solid var(--line); background:#fff; }.detail-panel h3 { margin:0 0 16px; color:#253038; font-size:16px; }.detail-list { display:grid; gap:12px; margin:0; }.detail-list div { display:grid; grid-template-columns:118px minmax(0,1fr); gap:10px; align-items:center; }.detail-list dt { color:var(--muted); font-size:12px; }.detail-list dd { margin:0; color:#303a3c; font-size:13px; }.internal-tags { display:flex; flex-wrap:wrap; gap:8px; }.detail-note-label { display:grid; gap:7px; margin-top:18px; color:#475158; font-size:12px; font-weight:700; }.detail-note-label textarea { min-height:98px; resize:vertical; border:1px solid var(--line); border-radius:5px; padding:10px; font:inherit; }.detail-note-label + .primary-button { margin-top:12px; }.detail-history { margin-top:14px; }.detail-history .approval-history { max-width:720px; }
.customer-detail-actions { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }.customer-detail-actions h3 { margin-bottom:16px; }.customer-detail-actions .link-button { border:0; padding:0; color:var(--teal); background:transparent; font-size:12px; font-weight:700; }
.customer-tag-settings-page { margin-top:22px; }.customer-tag-settings { max-width:760px; margin-top:18px; padding:22px; }.customer-tag-editor { margin-top:18px; }.customer-tag-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; padding:10px 0; border-top:1px solid var(--line); }.customer-tag-row input { width:100%; height:38px; border:1px solid var(--line); border-radius:5px; padding:0 11px; background:#fff; }.customer-tag-row .link-button { border:0; background:transparent; font-weight:700; }.customer-tag-row.add-row { margin-top:8px; }.danger-text { color:#9a4d3b; }
.transfer-panel { margin-top:18px; }.transfer-panel h2 { margin:5px 0 8px; }.transfer-controls { display:flex; flex-wrap:wrap; align-items:end; gap:12px; margin-top:16px; }.transfer-controls label { display:grid; gap:6px; color:#4c5658; font-size:12px; font-weight:700; }.transfer-controls .primary-button { min-height:36px; }.role-help { margin-top:5px; font-size:11px; }
.help-page { margin-top:22px; }.help-head { display:flex; align-items:end; justify-content:space-between; gap:18px; margin:22px 0 16px; }.help-head h2 { margin:5px 0 0; color:#253038; font-size:22px; }.help-head p { margin:7px 0 0; }.help-head .search { max-width:360px; }.help-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }.help-card { border:1px solid var(--line); background:#fff; padding:18px; }.help-card-meta { display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--muted); font-size:12px; }.help-card h3 { margin:14px 0 8px; color:#253038; font-size:16px; }.help-card h4 { margin:16px 0 6px; color:var(--ink); font-size:13px; }.help-card p { margin:0; color:#536065; font-size:13px; line-height:1.65; }.help-card ol { display:grid; gap:6px; margin:14px 0 0; padding-left:18px; color:#3f4a4f; font-size:13px; line-height:1.55; }.help-card details { margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }.help-card summary { color:var(--teal); font-size:13px; font-weight:800; cursor:pointer; }.help-card details p { margin-top:10px; }
.reminder-page { margin-top:22px; }.reminder-head { margin:22px 0 16px; }.reminder-head h2 { margin:5px 0 0; color:#253038; font-size:22px; }.reminder-head p { margin:7px 0 0; }.reminder-list { display:grid; gap:12px; }.reminder-card { display:flex; align-items:center; justify-content:space-between; gap:18px; border:1px solid var(--line); border-left:3px solid var(--orange); padding:17px; background:#fff; }.reminder-card h3 { margin:10px 0 5px; color:#253038; font-size:16px; }.reminder-card p { margin:0 0 7px; color:#536065; font-size:13px; }.reminder-card small { color:var(--muted); font-size:12px; }.reminder-actions { display:flex; flex:0 0 auto; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.workload-advice { margin-bottom:18px; border-left:3px solid var(--teal); }.workload-advice h2 { margin:5px 0 10px; color:#253038; font-size:18px; }.workload-advice ul { display:grid; gap:8px; margin:0; padding-left:18px; color:#3f4a4f; font-size:13px; line-height:1.55; }
.detail-helper,.tag-update-meta { margin:0 0 14px; color:var(--muted); font-size:12px; line-height:1.55; }.tag-update-meta { margin:10px 0 0; color:#77817e; }
.split { display:grid; grid-template-columns:1.15fr .85fr; gap:14px; }.panel { padding:16px; border:1px solid var(--line); border-radius:6px; background:#fff; }.panel + .panel { margin-top:14px; }.panel h2 { margin:0 0 12px; font-size:16px; }.list { display:grid; gap:0; }.list-row { padding:11px 0; border-top:1px solid #edf0ef; display:flex; justify-content:space-between; gap:16px; }.list-row:first-child { border-top:0; }.muted { color:var(--muted); font-size:12px; }.empty-state { min-height:120px; display:grid; place-items:center; align-content:center; padding:32px 12px; color:var(--muted); text-align:center; }.empty-state strong { color:var(--ink); }.empty-state p { margin:7px 0 0; font-size:12px; }
.dialog { width:min(650px,calc(100vw - 32px)); border:0; padding:0; box-shadow:0 24px 70px rgba(0,0,0,.25); }.dialog::backdrop { background:rgba(18,28,29,.38); }.dialog form { padding:23px; }.dialog header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:20px; }.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }.form-grid label { display:grid; gap:7px; color:#475158; font-size:13px; font-weight:650; }.form-grid input,.form-grid select { width:100%; min-height:40px; border:1px solid var(--line); border-radius:5px; padding:0 10px; background:#fff; }.wide { grid-column:1/-1; }.category-fieldset { margin:0; padding:12px; border:1px solid var(--line); border-radius:5px; }.category-fieldset legend { padding:0 5px; color:#475158; font-size:13px; font-weight:650; }.category-options { display:flex; flex-wrap:wrap; gap:8px; }.check-tag { position:relative; cursor:pointer; }.check-tag input { position:absolute; opacity:0; pointer-events:none; }.check-tag span { display:block; padding:7px 10px; border:1px solid var(--line); border-radius:5px; color:#475158; background:#fff; font-size:13px; }.check-tag input:checked + span { border-color:var(--teal); color:#075d56; background:var(--teal-soft); }.check-tag input:focus-visible + span { border-color:var(--color-secondary); box-shadow:0 0 0 3px color-mix(in srgb,var(--color-secondary) 26%,transparent); }.custom-category { margin-top:12px; }.dialog footer { display:flex; justify-content:flex-end; gap:10px; margin-top:23px; }
.media-picker-dialog { width:min(920px,calc(100vw - 32px)); max-height:82vh; border:0; padding:0; border-radius:6px; box-shadow:0 24px 70px rgba(0,0,0,.25); }
.media-picker-dialog::backdrop { background:rgba(18,28,29,.5); }
.media-picker-shell { display:grid; grid-template-rows:auto auto minmax(220px,1fr) auto; max-height:82vh; background:#fff; }
.media-picker-shell header,.media-picker-shell footer,.media-picker-toolbar { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:18px 22px; border-bottom:1px solid var(--line); }
.media-picker-shell header h2 { margin:3px 0 0; font-size:20px; }
.media-picker-shell footer { justify-content:flex-end; border-top:1px solid var(--line); border-bottom:0; }
.media-picker-toolbar .search { flex:1; }
.media-picker-grid { overflow:auto; padding:18px 22px; display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; align-content:start; }
.media-picker-card { min-width:0; padding:0 0 12px; text-align:left; border:1px solid var(--line); border-radius:6px; background:#fff; overflow:hidden; cursor:pointer; }
.media-picker-card.selected { border-color:var(--teal); box-shadow:0 0 0 2px var(--teal-soft); }
.media-picker-preview { display:grid; place-items:center; height:112px; margin-bottom:10px; background:#f2f1ee; overflow:hidden; }
.media-picker-preview img,.media-picker-preview video { width:100%; height:100%; object-fit:cover; }
.media-picker-card strong,.media-picker-card small { display:block; padding:0 10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.media-picker-card small { margin-top:4px; color:var(--muted); }
.media-reference-control { display:flex; gap:8px; align-items:center; }
.media-reference-control input { flex:1; min-width:0; }
.home-editor-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin:22px 0 16px; }.home-editor-head h2 { margin:0; font-size:19px; }.home-editor-head p { margin:5px 0 0; }.switch { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:12px; }.switch input { accent-color:var(--teal); }.upload-button { position:relative; min-height:36px; display:inline-flex; align-items:center; padding:0 13px; overflow:hidden; border:1px solid var(--line); border-radius:5px; color:#253038; background:#fff; font-size:13px; font-weight:700; cursor:pointer; }.upload-button input { position:absolute; inset:0; opacity:0; cursor:pointer; }.link-button.danger { border:0; background:transparent; color:#b34335; font-weight:700; }.secondary-button:disabled { opacity:.42; cursor:not-allowed; }
.home-save-status { margin:9px 0 0; font-size:12px; font-weight:700; }.home-save-status.success { color:#087a71; }.home-save-status.local { color:#8a5b48; }.home-save-status.error { color:#b34335; }
.visual-designer { display:grid; grid-template-columns:210px minmax(360px,1fr) 288px; min-height:660px; border:1px solid var(--line); background:#f7f8f7; }.designer-modules,.designer-properties { padding:16px; background:#fff; }.designer-modules { border-right:1px solid var(--line); }.designer-properties { border-left:1px solid var(--line); }.designer-side-title { display:flex; align-items:center; justify-content:space-between; color:#253038; font-size:13px; }.designer-side-title span { display:grid; place-items:center; min-width:22px; height:22px; border-radius:11px; background:var(--teal-soft); color:#07635c; font-size:11px; font-weight:800; }.designer-module-list { display:grid; gap:7px; margin-top:15px; }.designer-module { width:100%; min-height:58px; display:flex; align-items:center; gap:10px; border:1px solid transparent; border-radius:5px; padding:9px; text-align:left; background:#fff; cursor:grab; }.designer-module:hover { background:#f7faf9; }.designer-module.selected { border-color:#7bb6af; background:var(--teal-soft); }.module-order { color:#99a4a6; font-family:ui-monospace,SFMono-Regular,monospace; font-size:11px; }.module-list-copy { flex:1; min-width:0; }.module-list-copy strong,.module-list-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.module-list-copy strong { color:#273237; font-size:13px; }.module-list-copy small { margin-top:3px; color:var(--muted); font-size:11px; }.module-state { width:7px; height:7px; border-radius:50%; background:#d6dcda; }.module-state.on { background:#2e9a72; }.add-module-button { width:100%; min-height:36px; margin-top:14px; border:1px dashed #a7b6b3; border-radius:5px; color:#07635c; background:#fff; font-weight:700; }.designer-canvas { display:flex; flex-direction:column; align-items:center; padding:20px; overflow:auto; background:#eff1ef; }.device-label { margin-bottom:10px; color:#71807d; font-size:11px; }.phone-frame { width:318px; min-height:610px; overflow:hidden; border:8px solid #1d2524; border-radius:28px; background:#fff; box-shadow:0 14px 32px rgba(20,33,30,.18); }.phone-top { height:40px; display:flex; align-items:center; justify-content:space-between; padding:0 14px; color:#fff; background:#1d2524; font-size:9px; }.phone-top strong { font-size:11px; }.phone-page { min-height:512px; background:#fff; }.phone-module { position:relative; overflow:hidden; border:2px solid transparent; cursor:pointer; }.phone-module.active { border-color:#e78453; }.phone-module.active::after { content:"已选"; position:absolute; top:7px; right:7px; padding:3px 6px; color:#fff; background:#d6673e; font-size:10px; }.phone-hero { height:310px; }.phone-content { min-height:160px; padding:14px; }.phone-media { position:absolute; inset:0; background:#e7e1db; }.phone-media img,.phone-media video { width:100%; height:100%; display:block; object-fit:cover; }.phone-media-empty { display:grid; width:100%; height:100%; place-items:center; color:#89928e; font-size:12px; }.phone-copy { position:relative; z-index:1; display:grid; gap:6px; min-height:132px; padding:16px; align-content:end; color:#fff; background:linear-gradient(0deg,rgba(0,0,0,.52),rgba(0,0,0,.04)); }.phone-content .phone-copy { margin:-14px; min-height:160px; }.phone-copy span { color:rgba(255,255,255,.78); font-size:9px; letter-spacing:.8px; text-transform:uppercase; }.phone-copy strong { font-size:19px; }.phone-copy small { color:rgba(255,255,255,.84); font-size:10px; }.phone-empty { display:grid; min-height:512px; place-items:center; color:#89928e; font-size:12px; }.phone-nav { height:42px; display:flex; align-items:center; justify-content:space-around; border-top:1px solid #e6e9e8; color:#6e7777; background:#fff; font-size:9px; }.selected-module-name { margin-top:18px; color:#253038; font-size:18px; font-weight:800; }.property-switch { margin-top:12px; }.property-fields { display:grid; gap:12px; margin-top:20px; }.property-fields label { display:grid; gap:6px; color:#475158; font-size:12px; font-weight:650; }.property-fields input,.property-fields select { width:100%; height:36px; border:1px solid var(--line); border-radius:4px; padding:0 9px; background:#fff; }.property-upload { margin-top:20px; }.property-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.designer-help { margin:16px 0 0; color:var(--muted); font-size:12px; line-height:1.7; }.catalog-phone-frame { background:#f7f5f2; }.catalog-phone-page { min-height:512px; overflow:hidden; background:#f7f5f2; }.catalog-preview-module { position:relative; border:2px solid transparent; cursor:pointer; }.catalog-preview-module.active { border-color:#e78453; }.catalog-preview-module.active::after { content:"已选"; position:absolute; z-index:3; top:6px; right:6px; padding:3px 6px; color:#fff; background:#d6673e; font-size:10px; }.catalog-phone-search { padding:10px 10px 12px; background:#fff; }.catalog-phone-input { padding:9px 10px; border-radius:4px; color:#9ca4a2; background:#f3f4f1; font-size:10px; }.catalog-phone-filters { display:flex; gap:6px; margin-top:9px; overflow:hidden; }.catalog-phone-filters span { flex:0 0 auto; padding:5px 8px; border:1px solid #dedbd5; border-radius:3px; color:#5b615e; background:#fff; font-size:9px; }.catalog-phone-banner { position:relative; height:118px; overflow:hidden; }.catalog-phone-media { position:absolute; inset:0; background:#d8cec4; }.catalog-phone-media img,.catalog-phone-media video { width:100%; height:100%; object-fit:cover; }.catalog-phone-banner-copy { position:relative; z-index:1; display:grid; gap:4px; height:100%; align-content:end; padding:13px; color:#fff; background:linear-gradient(0deg,rgba(29,21,18,.54),transparent); }.catalog-phone-banner-copy strong { font-size:15px; }.catalog-phone-banner-copy small { font-size:9px; }.catalog-phone-products { padding:14px 10px 6px; background:#f7f5f2; }.catalog-phone-section-title { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; color:#252220; }.catalog-phone-section-title strong { font-size:13px; }.catalog-phone-section-title small { color:#8b776c; font-size:9px; }.catalog-phone-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }.catalog-phone-card { min-width:0; padding-bottom:7px; color:#31302e; background:#fff; }.catalog-card-image { display:grid; aspect-ratio:1/1.07; place-items:center; overflow:hidden; color:#9e958d; background:#e6ddd3; font-size:9px; }.catalog-card-image img { width:100%; height:100%; object-fit:cover; }.catalog-phone-card small,.catalog-phone-card strong,.catalog-phone-card em { display:block; overflow:hidden; margin:5px 6px 0; text-overflow:ellipsis; white-space:nowrap; }.catalog-phone-card small { color:#9b7766; font-size:8px; }.catalog-phone-card strong { font-size:9px; }.catalog-phone-card em { color:#8a8c89; font-size:8px; font-style:normal; }.catalog-phone-card.roomy { padding:4px; }.catalog-phone-card.roomy .catalog-card-image { margin-bottom:3px; }.catalog-phone-empty-products { grid-column:1/-1; padding:18px 0; color:#9a9f9c; text-align:center; font-size:10px; }.phone-nav-selected { color:#8a513a; font-weight:800; }
.catalog-phone-banner.poster { height:156px; }.catalog-phone-banner.brand-story { height:138px; }.catalog-phone-banner-copy span { color:rgba(255,255,255,.76); font-size:8px; letter-spacing:.8px; }.catalog-phone-categories { padding:13px 10px; background:#fff; }.catalog-category-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }.catalog-category-grid span { display:grid; min-height:33px; place-items:center; border:1px solid #e1ddd6; color:#5b514b; background:#faf9f7; font-size:9px; }
.hero-banner { height:160px; }.catalog-phone-poster { display:grid; grid-template-columns:1.08fr .92fr; min-height:150px; color:#241d19; background:#f2ebe3; }.catalog-poster-image { min-height:150px; overflow:hidden; background:#baaa9a; }.catalog-poster-image img,.catalog-poster-image video { width:100%; height:100%; object-fit:cover; }.catalog-poster-copy { display:flex; flex-direction:column; justify-content:flex-end; gap:7px; padding:13px 10px; }.catalog-poster-copy span,.catalog-video-copy span,.brand-story-copy span { color:#8c5e49; font-size:8px; letter-spacing:1px; }.catalog-poster-copy strong { font-family:Georgia,"Songti SC",serif; font-size:17px; line-height:1.1; }.catalog-poster-copy small { color:#6c6159; font-size:9px; line-height:1.45; }.catalog-poster-copy b { margin-top:3px; color:#7a4733; font-size:9px; }.catalog-phone-video { position:relative; height:145px; overflow:hidden; color:#fff; background:#211c1a; }.catalog-video-media { position:absolute; inset:0; opacity:.62; background:#635852; }.catalog-video-media img,.catalog-video-media video { width:100%; height:100%; object-fit:cover; }.video-play { position:absolute; z-index:1; top:50%; left:50%; display:grid; width:34px; height:34px; place-items:center; transform:translate(-50%,-60%); border:1px solid rgba(255,255,255,.8); border-radius:50%; padding-left:2px; font-size:12px; }.catalog-video-copy { position:absolute; z-index:1; left:13px; right:13px; bottom:12px; display:grid; gap:4px; }.catalog-video-copy span { color:rgba(255,255,255,.76); }.catalog-video-copy strong { font-size:15px; }.catalog-video-copy small { color:rgba(255,255,255,.84); font-size:9px; }.catalog-brand-story { display:grid; grid-template-columns:1.15fr .85fr; min-height:130px; background:#fff; }.brand-story-copy { display:flex; flex-direction:column; justify-content:center; gap:7px; padding:16px 12px; }.brand-story-copy strong { color:#302724; font-family:Georgia,"Songti SC",serif; font-size:16px; line-height:1.18; }.brand-story-copy small { color:#857c75; font-size:9px; line-height:1.5; }.brand-story-copy i { color:#a97860; font-size:8px; font-style:normal; }.brand-story-image { overflow:hidden; background:#d9cfc4; }.brand-story-image img,.brand-story-image video { width:100%; height:100%; object-fit:cover; }.catalog-featured-rail { padding:14px 10px; overflow:hidden; background:#f9f6f1; }.featured-rail { display:flex; gap:8px; overflow:hidden; }.featured-card { flex:0 0 118px; border-radius:0; box-shadow:0 4px 12px rgba(47,35,26,.08); }.featured-card .catalog-card-image { aspect-ratio:1/.84; }.catalog-phone-categories { background:#fffdf9; }.catalog-category-grid .category-tile { min-height:42px; border:0; color:#fff; font-size:9px; }.catalog-category-grid .c1 { background:#8e6352; }.catalog-category-grid .c2 { background:#6e7a67; }.catalog-category-grid .c3 { background:#ac8168; }.catalog-category-grid .c4 { background:#6a605a; }.catalog-category-grid .c5 { background:#957d58; }.catalog-category-grid .c6 { background:#775b58; }
@media (max-width:820px) { .shell{grid-template-columns:1fr}.sidebar{display:none}.topbar,#view{padding-left:20px;padding-right:20px}.metrics,.split,.approval-columns,.completed-approvals,.approval-overview,.customer-detail-grid,.help-grid{grid-template-columns:1fr 1fr}.toolbar{flex-wrap:wrap}.toolbar .search{flex-basis:100%}.help-head{align-items:stretch;flex-direction:column}.help-head .search{max-width:none}.reminder-card{align-items:flex-start;flex-direction:column}.reminder-actions{justify-content:flex-start} }
@media (max-width:1040px) { .visual-designer { grid-template-columns:190px minmax(330px,1fr); }.designer-properties { grid-column:1/-1; border-top:1px solid var(--line); border-left:0; }.property-fields { grid-template-columns:repeat(2,minmax(0,1fr)); }.property-upload,.property-actions { grid-column:1/-1; } }
.home-preview-categories { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; padding:14px; background:#faf7f3; }.home-preview-categories span { display:grid; min-height:44px; place-items:center; color:#fff; background:#8a5b48; font-size:10px; }.home-preview-categories span:nth-child(2n) { background:#6e7767; }.home-preview-categories span:nth-child(3n) { background:#b07e63; }.home-preview-products { display:flex; gap:7px; padding:14px; overflow:hidden; background:#faf7f3; }.home-preview-products > div { display:grid; flex:0 0 88px; gap:4px; min-width:0; color:#332b27; font-size:9px; }.home-preview-products > div > span { display:grid; height:100px; place-items:center; color:#8f8882; background:#dfd7cf; }.home-preview-products small,.home-preview-products strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.home-preview-products small { color:#9a705d; font-size:8px; }.home-preview-products strong { font-size:9px; }.home-preview-sales { display:grid; gap:7px; padding:22px 16px; color:#fff; background:#4c3328; }.home-preview-sales strong { font-size:18px; }.home-preview-sales small { color:rgba(255,255,255,.78); font-size:10px; }.home-preview-sales b { margin-top:4px; font-size:10px; }
.navigation-editor { margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }.navigation-editor-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; color:#253038; font-size:13px; }.navigation-editor-head .link-button { border:0; color:var(--teal); background:transparent; font-weight:700; }.navigation-card { display:grid; grid-template-columns:24px minmax(0,1fr) auto; gap:8px; align-items:start; padding:10px 0; border-top:1px solid #edf0ef; }.navigation-card-number { padding-top:8px; color:#9aa4a3; font-family:ui-monospace,SFMono-Regular,monospace; font-size:11px; }.navigation-card-fields { display:grid; grid-template-columns:1fr 1fr; gap:6px; }.navigation-card-fields input,.navigation-card-fields select { width:100%; height:31px; border:1px solid var(--line); border-radius:4px; padding:0 7px; background:#fff; font-size:11px; }.navigation-upload { position:relative; overflow:hidden; margin-top:5px; color:#07635c; font-size:11px; white-space:nowrap; cursor:pointer; }.navigation-upload input { position:absolute; inset:0; opacity:0; cursor:pointer; }.navigation-card .danger { padding-top:5px; font-size:11px; }
.workbench-sections { display:grid; gap:20px; }
.workbench-section { padding:20px; border:1px solid var(--line); background:#fff; }
.workbench-card-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; margin-top:16px; }
.workbench-card { display:grid; grid-template-columns:minmax(0,1fr) auto 18px; align-items:center; gap:12px; min-height:92px; padding:18px; border:1px solid var(--line); border-radius:6px; color:var(--ink); background:#fff; text-align:left; cursor:pointer; }
.workbench-card:hover { border-color:var(--teal); background:#f8fcfb; }
.workbench-card-copy { display:grid; gap:6px; min-width:0; }
.workbench-card-copy strong { font-size:16px; }
.workbench-card-copy small { color:var(--muted); line-height:1.5; }
.workbench-card-count { color:var(--teal); font-size:28px; }
.workbench-card-arrow { color:var(--muted); font-size:24px; }
.workbench-empty { padding:40px 24px; border:1px solid var(--line); background:#fff; text-align:center; }
.workbench-filter-notice { justify-content:space-between; margin-top:20px; }
@media (max-width:640px) { .workbench-card-grid { grid-template-columns:1fr; } }
.product-filters { display: grid; gap: 14px; margin-bottom: 16px; padding: 16px; border: 1px solid var(--border, #ded8d2); background: #fff; }
.product-filter-grid { display: grid; grid-template-columns: repeat(5, minmax(130px, 1fr)); gap: 12px; }
.product-filter-grid label { display: grid; gap: 6px; color: #665f59; font-size: 13px; }
.product-filter-grid select { min-height: 92px; padding: 8px; border: 1px solid #d8d1cb; background: #fff; }
.filter-actions, .product-detail-head, .setting-add-row, .template-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.filter-actions { justify-content: flex-end; }
.filter-actions > span { margin-right: auto; color: #756d67; }
.product-title-button { display: grid; gap: 4px; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.product-title-button:hover strong { text-decoration: underline; }
.tag.soft { background: #f2ece7; color: #74503f; }
.product-detail-head { justify-content: space-between; margin-bottom: 16px; }
.product-setting-page { max-width: 900px; }
.setting-add-row input, .template-form input { flex: 1 1 180px; }
.setting-option-list { display: grid; gap: 8px; margin-top: 18px; }
.setting-option-list > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid #ece6e1; }
.setting-option-list span { display: grid; gap: 3px; }
.setting-option-list small { color: #7a726c; }
@media (max-width: 900px) { .product-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .product-filter-grid { grid-template-columns: 1fr; } }
.media-toolbar,.media-filters { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.media-upload-button input { display:none; }
.media-filters { margin:16px 0; }
.media-filters .search { flex:1; }
.media-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; }
.media-card { overflow:hidden; border:1px solid var(--line); background:#fff; }
.media-card-preview { display:grid; place-items:center; aspect-ratio:4/3; color:var(--muted); background:#f3f0ec; }
.media-card-preview img,.media-card-preview video { width:100%; height:100%; object-fit:cover; }
.media-card-copy { display:grid; gap:8px; padding:14px; }
.media-card-copy>span { color:var(--muted); font-size:13px; }
.settings-stack { display:grid; gap:18px; }
.settings-form { display:grid; gap:20px; }
.settings-fieldset { margin:18px 0 0; padding:16px; border:1px solid var(--line); border-radius:6px; }
.settings-fieldset legend { padding:0 7px; color:var(--ink); font-size:14px; font-weight:800; }
.settings-form textarea { width:100%; resize:vertical; border:1px solid var(--line); border-radius:5px; padding:10px; color:var(--ink); background:#fff; font:inherit; line-height:1.6; }
.contact-editor-row { margin-bottom:14px; padding:16px; border:1px solid var(--line); background:#faf9f7; }
.compact-panel { margin-top:14px; padding:18px; box-shadow:none; }
.role-grid { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0; }
.role-check { display:flex; align-items:center; gap:7px; min-height:36px; padding:0 10px; border:1px solid var(--line); border-radius:5px; color:#475158; background:#fff; font-size:13px; }
.detail-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:14px 0 0; }
.detail-list div { padding:12px; background:#f7f8f7; }
.detail-list dt { color:var(--muted); font-size:12px; }
.detail-list dd { margin:5px 0 0; color:var(--ink); font-weight:800; }
.page-block-list { display:grid; gap:10px; }
.page-block-row { padding:14px; border:1px solid var(--line); background:#faf9f7; }
.page-block-head,.page-block-add { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.page-block-head { margin-bottom:12px; }
.page-block-add { justify-content:flex-start; margin-top:12px; }
.page-block-add select { min-width:160px; min-height:36px; border:1px solid var(--line); border-radius:5px; padding:0 9px; background:#fff; }
.form-builder-row { display:grid; grid-template-columns:24px minmax(130px,1.2fr) minmax(110px,1fr) 130px minmax(150px,1fr) auto auto; gap:8px; align-items:center; padding:12px 0; border-top:1px solid var(--line); }
.form-builder-row input,.form-builder-row select { min-width:0; height:36px; border:1px solid var(--line); border-radius:4px; padding:0 9px; background:#fff; }
.drag-handle { color:var(--muted); text-align:center; }
.settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.setting-switch { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; border-top:1px solid var(--line); }
.setting-switch span { display:grid; gap:4px; }.setting-switch small { color:var(--muted); font-weight:400; }.setting-switch input { width:18px; height:18px; accent-color:var(--teal); }
@media (max-width:640px) {
  .form-grid,.detail-list { grid-template-columns:1fr; }
  .wide { grid-column:auto; }
}

/* Global admin theme surfaces. Customer-facing phone previews intentionally keep their own palette. */
:root[data-theme="dark"] body { background:var(--color-background); color:var(--color-text); }
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea { color:var(--color-text); background:var(--color-input); border-color:var(--color-border); }
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder { color:#737f7c; }
:root[data-theme="dark"] .login-panel,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .metric,
:root[data-theme="dark"] .detail-panel,
:root[data-theme="dark"] .help-card,
:root[data-theme="dark"] .reminder-card,
:root[data-theme="dark"] .workbench-section,
:root[data-theme="dark"] .workbench-card,
:root[data-theme="dark"] .workbench-empty,
:root[data-theme="dark"] .media-card,
:root[data-theme="dark"] .content-card,
:root[data-theme="dark"] .settings-panel,
:root[data-theme="dark"] .approval-overview-card,
:root[data-theme="dark"] .table-wrap,
:root[data-theme="dark"] .dialog,
:root[data-theme="dark"] .dialog form,
:root[data-theme="dark"] .media-picker-shell,
:root[data-theme="dark"] .media-picker-card,
:root[data-theme="dark"] .content-editor,
:root[data-theme="dark"] .floating-panel { color:var(--color-text); background:var(--color-surface); border-color:var(--color-border); box-shadow:0 18px 48px var(--color-shadow); }
:root[data-theme="dark"] .table th,
:root[data-theme="dark"] .table td { border-color:var(--color-border-soft); }
:root[data-theme="dark"] .table thead th,
:root[data-theme="dark"] .table thead th:last-child { color:var(--color-text-muted); background:var(--color-surface-subtle); }
:root[data-theme="dark"] .table tbody tr:hover td { background:var(--color-row-hover); }
:root[data-theme="dark"] .table th:last-child,
:root[data-theme="dark"] .table td:last-child { background:var(--color-surface); }
:root[data-theme="dark"] .history-row td { background:var(--color-surface-subtle); }
:root[data-theme="dark"] .secondary-button,
:root[data-theme="dark"] .icon-button,
:root[data-theme="dark"] .utility-button,
:root[data-theme="dark"] .profile-trigger,
:root[data-theme="dark"] .upload-button,
:root[data-theme="dark"] .role-check,
:root[data-theme="dark"] .check-tag span { color:var(--color-text); background:var(--color-input); border-color:var(--color-border); }
:root[data-theme="dark"] .secondary-button:hover,
:root[data-theme="dark"] .icon-button:hover,
:root[data-theme="dark"] .utility-button:hover,
:root[data-theme="dark"] .profile-trigger:hover,
:root[data-theme="dark"] .workbench-card:hover,
:root[data-theme="dark"] .approval-overview-card:hover { color:var(--color-text); background:var(--color-hover); border-color:var(--color-secondary); }
:root[data-theme="dark"] .notice { color:#e0ad86; background:#30251f; }
:root[data-theme="dark"] .status,
:root[data-theme="dark"] .status-pill { color:#b6c0bd; background:#29302e; }
:root[data-theme="dark"] .status.live,
:root[data-theme="dark"] .status-published { color:#8bd0aa; background:#20382d; }
:root[data-theme="dark"] .status-draft,
:root[data-theme="dark"] .tag.soft { color:#d4ad91; background:#382d27; }
:root[data-theme="dark"] .status-hidden { color:#aab3b0; background:#292f2e; }
:root[data-theme="dark"] .tag { color:#8ed0c8; background:var(--color-secondary-soft); }
:root[data-theme="dark"] .section-head h2,
:root[data-theme="dark"] .approval-page-head h2,
:root[data-theme="dark"] .customer-detail-head h2,
:root[data-theme="dark"] .detail-panel h3,
:root[data-theme="dark"] .help-head h2,
:root[data-theme="dark"] .help-card h3,
:root[data-theme="dark"] .help-card h4,
:root[data-theme="dark"] .reminder-head h2,
:root[data-theme="dark"] .reminder-card h3,
:root[data-theme="dark"] .workload-advice h2,
:root[data-theme="dark"] .selected-module-name,
:root[data-theme="dark"] .designer-side-title,
:root[data-theme="dark"] .navigation-editor-head { color:var(--color-text); }
:root[data-theme="dark"] .help-card p,
:root[data-theme="dark"] .help-card ol,
:root[data-theme="dark"] .reminder-card p,
:root[data-theme="dark"] .workload-advice ul,
:root[data-theme="dark"] .approval-history div,
:root[data-theme="dark"] .detail-list dd,
:root[data-theme="dark"] .detail-note-label,
:root[data-theme="dark"] .transfer-controls label,
:root[data-theme="dark"] .property-fields label,
:root[data-theme="dark"] .form-grid label,
:root[data-theme="dark"] .category-fieldset legend { color:#c7cfcc; }
:root[data-theme="dark"] .list-row,
:root[data-theme="dark"] .customer-tag-row,
:root[data-theme="dark"] .navigation-card,
:root[data-theme="dark"] .setting-option-list > div { border-color:var(--color-border-soft); }
:root[data-theme="dark"] .contact-editor-row,
:root[data-theme="dark"] .page-block-row,
:root[data-theme="dark"] .detail-list div { background:var(--color-surface-subtle); border-color:var(--color-border); }
:root[data-theme="dark"] .product-filters { background:var(--color-surface); border-color:var(--color-border); }
:root[data-theme="dark"] .product-filter-grid label,
:root[data-theme="dark"] .filter-actions > span { color:var(--color-text-muted); }
:root[data-theme="dark"] .media-card-preview,
:root[data-theme="dark"] .media-picker-preview { background:#292724; }
:root[data-theme="dark"] .dialog::backdrop,
:root[data-theme="dark"] .media-picker-dialog::backdrop { background:var(--color-overlay); }
:root[data-theme="dark"] .visual-designer { background:#171b1a; border-color:var(--color-border); }
:root[data-theme="dark"] .designer-modules,
:root[data-theme="dark"] .designer-properties { background:var(--color-surface); border-color:var(--color-border); }
:root[data-theme="dark"] .designer-module { color:var(--color-text); background:var(--color-surface); }
:root[data-theme="dark"] .designer-module:hover { background:var(--color-hover); }
:root[data-theme="dark"] .designer-module.selected { background:var(--color-secondary-soft); border-color:var(--color-secondary); }
:root[data-theme="dark"] .module-list-copy strong { color:var(--color-text); }
:root[data-theme="dark"] .designer-canvas { background:#111514; }
:root[data-theme="dark"] .add-module-button { color:var(--color-secondary); background:var(--color-input); border-color:#52615e; }
:root[data-theme="dark"] .phone-frame { box-shadow:0 18px 38px rgba(0,0,0,.55); }
:root[data-theme="dark"] .shell-state { color:var(--color-text); background:var(--color-surface); border-color:var(--color-border); }
:root[data-theme="dark"] * { scrollbar-color:#4a5552 #191e1d; }
@media (max-width:980px) { .form-builder-row { grid-template-columns:24px 1fr 1fr; }.form-builder-row [data-field="options"] { grid-column:2/-1; }.settings-grid { grid-template-columns:1fr; } }

/* Shared compact admin surfaces. Editors open as drawers so lists stay in context. */
input,select,textarea { color:var(--ink); outline:none; }
input:focus,select:focus,textarea:focus { border-color:#9a7969!important; box-shadow:0 0 0 3px rgba(121,81,63,.1); }
.toolbar { flex-wrap:wrap; margin:14px 0 10px; }
.toolbar > input,.toolbar > select,.search,.select { min-height:var(--control-height); }
.section-head { align-items:center; margin-bottom:12px; }
.section-head h2 { font-size:16px; }
.eyebrow { color:var(--color-accent); letter-spacing:0; }
.form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.form-grid label { gap:5px; font-size:12px; }
.form-grid input,.form-grid select,.form-grid textarea,.content-editor input,.content-editor select,.content-editor textarea { min-height:var(--control-height); border:1px solid var(--line); border-radius:4px; padding:7px 9px; background:#fff; }
.form-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
.content-editor { position:fixed; z-index:80; top:0; right:0; width:min(620px,calc(100vw - 24px)); height:100vh; margin:0; overflow:auto; border:0; border-left:1px solid var(--line); border-radius:0; padding:20px; box-shadow:-18px 0 52px rgba(31,36,37,.18); }
.content-editor .section-head { position:sticky; z-index:3; top:-20px; margin:-20px -20px 16px; padding:18px 20px 14px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.97); backdrop-filter:blur(10px); }
.content-editor .form-actions { position:sticky; bottom:-20px; margin:18px -20px -20px; padding:14px 20px; background:rgba(255,255,255,.97); backdrop-filter:blur(10px); }
.pagination { margin-top:10px; }
.pagination .secondary-button { min-height:32px; padding:0 11px; }
.media-grid { grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; }
.media-card,.workbench-card,.help-card,.approval-overview-card,.detail-panel,.reminder-card { border-radius:6px; }
.metric { border-radius:6px; padding:14px; }
.metric strong { font-size:24px; }

@media (max-width:1100px) {
  .visual-designer { grid-template-columns:190px minmax(330px,1fr); }
  .designer-properties { grid-column:1/-1; border-top:1px solid var(--line); border-left:0; }
  .taxonomy-grid,.settings-grid { grid-template-columns:1fr; }
}
@media (max-width:820px) {
  #view { padding:18px 16px 36px; }
  .toolbar { align-items:stretch; }
  .toolbar > * { flex:1 1 180px; }
  .form-grid,.customer-detail-grid,.split,.taxonomy-grid { grid-template-columns:1fr; }
  .wide { grid-column:auto; }
  .content-editor { width:100vw; max-width:none; }
  .visual-designer { display:block; }
  .designer-modules,.designer-properties { border:0; border-bottom:1px solid var(--line); }
  .designer-canvas { min-height:560px; }
}
@media (max-width:560px) {
  #view { padding:14px 10px 32px; }
  .panel { padding:13px; }
  .section-head,.home-editor-head,.approval-page-head,.customer-detail-head { align-items:flex-start; flex-direction:column; }
  .section-head > button,.home-editor-head > div:last-child { width:100%; }
  .primary-button,.secondary-button { min-height:38px; }
  .table { min-width:700px; }
  .media-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

:root[data-theme="dark"] .content-editor .section-head,
:root[data-theme="dark"] .content-editor .form-actions {
  color:var(--color-text);
  background:color-mix(in srgb,var(--color-surface) 97%,transparent);
  border-color:var(--color-border);
}
:root[data-theme="dark"] .content-editor .section-head .secondary-button,
:root[data-theme="dark"] .content-editor .form-actions .secondary-button { background:var(--color-surface-raised); }
:root[data-theme="dark"] .danger-text,
:root[data-theme="dark"] .link-button.danger,
:root[data-theme="dark"] .home-save-status.error { color:#ff9b8f; }
:root[data-theme="dark"] .approval-actions .link-button,
:root[data-theme="dark"] .home-save-status.local { color:#e2a985; }
:root[data-theme="dark"] .home-save-status.success { color:#71c8bd; }