:root {
  --ink: #172b3a;
  --muted: #647586;
  --line: #dce6ec;
  --paper: #f3f7fa;
  --white: #ffffff;
  --forest: #07c160;
  --forest-dark: #102d45;
  --mint: #e3f5ed;
  --shell-blue: #2d80b3;
  --shell-blue-dark: #1c5f8a;
  --shell-blue-soft: #e8f3fa;
  --coral: #df6650;
  --yellow: #efbd4a;
  --shadow: 0 14px 36px rgba(24, 58, 82, .08);
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 14px; line-height: 1.45; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
.login-gate { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: #eaf3f8; }.login-gate[hidden] { display: none; }.login-panel { width: min(420px, 100%); padding: 36px; border: 1px solid #d2e3ec; border-radius: 8px; background: rgba(255, 255, 255, .97); box-shadow: 0 24px 70px rgba(18, 52, 76, .14); }.login-panel .brand-mark { width: 48px; height: 48px; margin-bottom: 26px; border-radius: 8px; color: #fff; background: var(--shell-blue); font-size: 22px; }.login-panel h1 { margin: 8px 0 10px; font-size: 28px; }.login-panel > p:not(.section-label):not(.login-error) { color: var(--muted); }.login-panel label { display: grid; gap: 7px; margin: 20px 0 0; color: #294457; font-size: 13px; font-weight: 700; }.login-panel input { width: 100%; padding: 12px 13px; border: 1px solid #cbdce6; border-radius: 5px; color: var(--ink); background: #fff; outline: 0; }.login-panel input:focus { border-color: var(--shell-blue); box-shadow: 0 0 0 3px rgba(45, 128, 179, .12); }.login-panel .primary-button { width: 100%; justify-content: center; margin-top: 24px; padding: 12px 16px; }.login-error { min-height: 20px; margin: 12px 0 0; color: #b34b41; font-size: 12px; }body.login-required .shell { display: none; }
.shell { min-height: 100vh; display: grid; grid-template-columns: 244px minmax(0, 1fr); }
.sidebar { min-height: 100vh; position: sticky; top: 0; display: flex; flex-direction: column; padding: 22px 14px; color: #e8f3fa; background: var(--forest-dark); }
.brand { display: flex; align-items: center; gap: 10px; padding: 0 9px 26px; }
.brand-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 7px; color: #fff; background: var(--shell-blue); font-size: 18px; font-weight: 800; }
.brand strong, .sidebar-user strong { display: block; font-size: 15px; }
.brand small, .sidebar-user small { display: block; margin-top: 2px; color: #9db9c9; font-size: 11px; }
.nav { display: grid; gap: 4px; }
.nav-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; border: 0; border-radius: 6px; color: #b8cfdd; background: transparent; text-align: left; }
.nav-item svg { width: 18px; height: 18px; }
.nav-item:hover, .nav-item.active { color: #fff; background: rgba(45, 128, 179, .34); }.nav-item.active svg { color: #60d895; }
.sidebar-user { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 16px 9px 2px; border-top: 1px solid rgba(226, 246, 233, .15); }
.avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: #fff; background: var(--shell-blue); font-weight: 700; }
.main { min-width: 0; padding: 30px clamp(22px, 4vw, 58px) 64px; }
.user-list { display: grid; gap: 8px; margin-top: 16px; }.user-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: #fbfdfb; }.user-row small { color: var(--muted); }
.topbar, .section-top, .panel-head, .modal-head, .modal-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.topbar { margin-bottom: 28px; }
.eyebrow, .section-label { margin: 0 0 4px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(24px, 3vw, 32px); letter-spacing: 0; }
h2 { margin-bottom: 0; font-size: 19px; letter-spacing: 0; }
.top-actions { display: flex; gap: 10px; align-items: center; }
.primary-button, .secondary-button, .icon-button, .text-button { border: 0; border-radius: 6px; font-weight: 700; }
.primary-button { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; color: #fff; background: var(--forest); box-shadow: 0 6px 12px rgba(7, 193, 96, .18); }.primary-button:hover { background: #00a653; transform: translateY(-1px); }.primary-button:active { transform: translateY(0); }
.primary-button svg { width: 16px; height: 16px; }
.secondary-button { padding: 10px 14px; color: var(--shell-blue-dark); border: 1px solid #c9e0ed; background: var(--shell-blue-soft); }.secondary-button:hover { border-color: #9fc9df; background: #dceef8; }.icon-button { display: inline-grid; place-items: center; width: 40px; height: 40px; color: var(--shell-blue-dark); background: #e7f2f8; }.icon-button:hover { color: var(--forest); background: #d9f3e7; }
.icon-button svg { width: 18px; height: 18px; }
.text-button { padding: 4px 0; color: var(--shell-blue-dark); background: transparent; }.text-button:hover { color: var(--forest); }
.view { display: none; }
.view.active { display: block; }
.hero-strip { position: relative; overflow: hidden; display: flex; align-items: end; min-height: 210px; margin-bottom: 20px; border-radius: 7px; background: #263d35; }
.hero-strip::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 36, 30, .91), rgba(8, 36, 30, .54), rgba(8, 36, 30, .16)); }
.hero-strip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-copy { position: relative; z-index: 1; max-width: 720px; padding: 28px clamp(22px, 4vw, 46px); color: #fff; }
.hero-copy span { color: #c3e5cc; font-weight: 700; font-size: 13px; }
.hero-copy h2 { margin: 8px 0; max-width: 660px; font-size: clamp(23px, 3vw, 34px); line-height: 1.22; }
.hero-copy p { margin-bottom: 0; color: #d1e0d6; }
.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 14px; margin-bottom: 20px; }
.metric { padding: 17px; border: 1px solid var(--line); border-radius: 7px; background: var(--white); }
.metric span { display: block; color: var(--muted); font-size: 12px; }
.metric strong { display: block; margin-top: 7px; font-size: 28px; }
.metric small { color: var(--forest); font-weight: 700; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, .8fr); gap: 20px; }
.panel { min-width: 0; border: 1px solid var(--line); border-radius: 7px; background: var(--white); box-shadow: var(--shadow); }
.panel-head { padding: 18px 20px; border-bottom: 1px solid var(--line); }
.hot-list { padding: 4px 20px 12px; }
.hot-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 15px 0; border-bottom: 1px solid #edf0ec; }
.hot-row:last-child { border-bottom: 0; }
.heat { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 6px; color: var(--forest-dark); background: var(--mint); font-weight: 800; }
.hot-row h3 { margin: 0 0 4px; font-size: 15px; }
.hot-row p { margin: 0; color: var(--muted); font-size: 12px; }
.tag, .status-pill { display: inline-block; padding: 4px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.tag { color: #835b08; background: #fff0c9; }
.activity-list { padding: 5px 20px 14px; }
.activity { position: relative; padding: 14px 0 14px 16px; border-bottom: 1px solid #edf0ec; }
.activity::before { content: ""; position: absolute; top: 19px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--forest); }
.activity.content::before { background: var(--coral); }.activity.hot::before { background: var(--yellow); }
.activity p { margin: 0 0 4px; font-size: 13px; }.activity time { color: var(--muted); font-size: 11px; }
.section-top { align-items: flex-end; margin-bottom: 18px; }.section-top h2 { font-size: 26px; }.section-top p:not(.section-label) { margin: 6px 0 0; color: var(--muted); }
.section-actions { display: flex; flex-wrap: wrap; gap: 9px; }.task-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }.task-stat { padding: 16px 18px; border: 1px solid var(--line); border-radius: 7px; background: var(--white); }.task-stat span { color: var(--muted); font-size: 12px; }.task-stat strong { display: block; margin-top: 5px; font-size: 26px; }.task-list { padding: 0 20px; }.task-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto; gap: 13px; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--line); }.task-row:last-child { border-bottom: 0; }.task-check { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; color: var(--forest); background: transparent; }.task-check svg { width: 21px; height: 21px; }.task-copy strong { display: block; }.task-copy p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }.task-row time { color: var(--muted); font-size: 12px; }.task-row.completed .task-copy { opacity: .5; text-decoration: line-through; }
.notice { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 18px; padding: 12px 14px; border: 1px solid #d5e7d9; border-radius: 6px; color: #3e6551; background: #ecf6ee; font-size: 13px; }.notice svg { width: 18px; flex: none; }
.hotspot-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -4px 0 18px; }.scope-tabs { display: flex; flex-wrap: wrap; gap: 7px; }.scope-tab { padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); background: var(--white); font-size: 12px; font-weight: 800; }.scope-tab:hover, .scope-tab.active { border-color: var(--forest); color: #fff; background: var(--forest); }.hotspot-count { color: var(--muted); font-size: 12px; font-weight: 700; white-space: nowrap; }
.hotspot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 14px; }
.creation-layout, .video-copy-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }.segmented-control, .template-tabs { display: flex; gap: 7px; margin-bottom: 16px; }.segment, .template-tab { padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); background: var(--white); font-weight: 800; }.segment.active, .template-tab.active { border-color: var(--forest); color: #fff; background: var(--forest); }.reference-preview { display: grid; place-items: center; min-height: 78px; margin: 8px 0 14px; border: 1px dashed #cbd7ce; border-radius: 6px; color: var(--muted); font-size: 12px; overflow: hidden; }.reference-preview img { width: 100%; height: 160px; object-fit: cover; }.image-preview-card { display: grid; place-items: end start; aspect-ratio: 3 / 4; max-height: 470px; margin: 20px; padding: 24px; border-radius: 8px; color: #fff; background: linear-gradient(145deg, #184f43, #699681); }.image-preview-copy span, .image-preview-copy small { display: block; color: #e1f0e3; font-size: 12px; }.image-preview-copy strong { display: block; max-width: 340px; margin: 10px 0; font-size: 28px; line-height: 1.25; }.preview-note { padding: 0 20px 20px; color: var(--muted); font-size: 12px; }.note-generator { margin-top: 20px; }.note-result, .video-copy-result { padding: 20px; }.note-result h3 { margin: 0 0 12px; font-size: 20px; }.note-result p { white-space: pre-wrap; line-height: 1.8; }.copy-section { padding: 14px 0; border-bottom: 1px solid var(--line); }.copy-section strong { color: var(--forest); font-size: 13px; }.copy-section p { margin: 7px 0 0; line-height: 1.75; white-space: pre-wrap; }
.hotspot-card { display: flex; flex-direction: column; min-height: 224px; padding: 20px; border: 1px solid var(--line); border-radius: 7px; background: var(--white); box-shadow: var(--shadow); }
.hotspot-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }.source { color: var(--muted); font-size: 12px; }
.hotspot-card h3 { margin: 0 0 9px; font-size: 17px; line-height: 1.4; }.hotspot-card p { color: var(--muted); font-size: 13px; }
.hotspot-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; }.hotspot-footer time { color: var(--muted); font-size: 11px; }
.content-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(290px, .8fr); gap: 20px; }.editor-panel { min-height: 530px; }.draft-list-panel { max-height: 625px; overflow: auto; }
.draft-editor { padding: 22px; }.empty-state { display: grid; place-items: center; min-height: 380px; color: var(--muted); }
.script-block { padding: 16px 0; border-bottom: 1px solid var(--line); }.script-block:first-child { padding-top: 0; }.script-block:last-child { border-bottom: 0; }.script-block h3 { margin: 0 0 7px; color: var(--forest); font-size: 13px; }.script-block p { margin: 0; white-space: pre-wrap; font-size: 15px; line-height: 1.75; }
.draft-rule { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 18px; }.draft-rule span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 9px; border-radius: 999px; color: #315c4c; background: #e8f3eb; font-size: 12px; font-weight: 800; }.draft-rule svg { width: 14px; height: 14px; }
.timeline-list { display: grid; gap: 10px; margin-bottom: 16px; }.timeline-item { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 7px; background: #fbfcfa; }.timeline-item.selling { border-color: #f0d28c; background: #fffaf0; }.timeline-time { color: var(--forest); font-weight: 900; font-size: 13px; }.timeline-item h3 { margin: 0 0 6px; font-size: 14px; color: var(--forest); }.timeline-item p { margin: 0; font-size: 15px; line-height: 1.7; }.timeline-item small { display: block; margin-top: 7px; color: var(--muted); line-height: 1.5; }
.hashtag-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }.hashtag-row span { padding: 5px 8px; border-radius: 999px; color: #5b6538; background: #f2edcf; font-size: 12px; font-weight: 800; }.compact-notice { margin: 16px 0 0; }
.editor-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; }
.draft-item { width: 100%; padding: 16px 20px; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; }.draft-item:hover, .draft-item.active { background: #f2f8f3; }.draft-item-top { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; }.draft-item strong { font-size: 14px; }.draft-item small { color: var(--muted); }
.status-pill { color: #416a54; background: #e7f3e9; }.status-pill.published { color: #805616; background: #fff0c8; }.status-pill.scheduled { color: #8a4437; background: #fde4de; }
.inbox-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.inbox-stat { padding: 17px; border: 1px solid var(--line); border-radius: 7px; background: var(--white); }
.inbox-stat span { display: block; color: var(--muted); font-size: 12px; }.inbox-stat strong { display: block; margin-top: 6px; font-size: 26px; }
.inbox-panel { overflow: hidden; }.inbox-list { padding: 0 20px; }
.inbox-item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .72fr); gap: 22px; padding: 20px 0; border-bottom: 1px solid var(--line); }.inbox-item:last-child { border-bottom: 0; }
.inbox-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }.inbox-meta strong { font-size: 15px; }.inbox-meta small { margin-left: auto; color: var(--muted); }
.intent-pill { display: inline-block; padding: 3px 7px; border-radius: 999px; color: #844221; background: #fce0d5; font-size: 11px; font-weight: 700; }.intent-pill.normal { color: #6b6330; background: #f8efca; }.intent-pill.low { color: #466758; background: #e5f1e8; }
.inbox-message { margin: 0; color: #344740; font-size: 15px; line-height: 1.65; }.reply-box { padding: 14px; border-radius: 6px; background: #f3f7f3; }.reply-box label { display: block; margin-bottom: 7px; color: var(--forest); font-size: 12px; font-weight: 800; }.reply-box textarea { width: 100%; min-height: 82px; padding: 0; border: 0; outline: 0; resize: vertical; color: var(--ink); background: transparent; line-height: 1.55; }.reply-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.pipeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }.stage { padding: 14px; border-radius: 6px; background: #e9efea; }.stage strong { display: block; margin-top: 4px; font-size: 24px; }.stage span { color: var(--muted); font-size: 12px; }
.table-panel { overflow: hidden; }.table-scroll { overflow-x: auto; }table { width: 100%; border-collapse: collapse; text-align: left; min-width: 740px; }th { padding: 13px 20px; color: var(--muted); background: #f5f7f4; font-size: 12px; font-weight: 700; }td { padding: 15px 20px; border-top: 1px solid var(--line); vertical-align: middle; }td strong { display: block; }td small { color: var(--muted); }.stage-select { padding: 6px 8px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); background: #fff; }.lead-phone { display: inline-flex; align-items: center; gap: 3px; margin-top: 2px; }.lead-phone small { line-height: 18px; }.phone-visibility-toggle { display: inline-grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 4px; color: #537468; background: transparent; }.phone-visibility-toggle:hover { color: var(--forest); background: #e8f3eb; }.phone-visibility-toggle svg { width: 13px; height: 13px; }
.commission-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }.commission-card { padding: 18px; border-radius: 7px; color: #fff; background: var(--forest); }.commission-card:nth-child(2) { background: #336f60; }.commission-card:nth-child(3) { color: var(--ink); background: #f6d36e; }.commission-card span { font-size: 12px; }.commission-card strong { display: block; margin-top: 9px; font-size: 27px; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }.settings-body { padding: 20px; }.settings-body > p, .property-body > p { color: var(--muted); }.settings-body label { display: grid; gap: 6px; margin: 13px 0; color: #3b5147; font-weight: 700; font-size: 13px; }.settings-body input, .settings-body select { width: 100%; padding: 10px 11px; border: 1px solid #cbd7ce; border-radius: 5px; color: var(--ink); background: #fff; }.setting-line { display: flex; justify-content: space-between; gap: 10px; padding: 13px 0; border-top: 1px solid var(--line); }.setting-line strong { color: var(--forest); }.hint { font-size: 12px; }.platform-list { padding: 0 20px; }.platform-list div { display: flex; align-items: center; gap: 10px; padding: 15px 0; border-bottom: 1px solid var(--line); font-weight: 700; }.platform-list small { margin-left: auto; color: var(--muted); font-weight: 400; }.platform-dot { width: 10px; height: 10px; border-radius: 50%; background: #202020; }.platform-dot.kuaishou { background: #f3573d; }.platform-dot.red { background: #e64b50; }.platform-dot.green { background: #37a470; }
.property-body { padding: 20px; }.property-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 18px; }.property-chip { display: inline-flex; gap: 6px; align-items: center; padding: 7px 9px; border-radius: 999px; color: #315c4c; background: #e8f3eb; font-size: 12px; font-weight: 800; }.property-chip small { color: #648274; font-weight: 600; }.property-form { display: grid; grid-template-columns: minmax(0, 1fr) 110px auto; gap: 10px; }.property-form input, .property-form select { min-width: 0; padding: 10px 11px; border: 1px solid #cbd7ce; border-radius: 5px; color: var(--ink); background: #fff; }
.settings-body textarea { width: 100%; min-height: 132px; padding: 10px 11px; border: 1px solid #cbd7ce; border-radius: 5px; color: var(--ink); background: #fff; resize: vertical; line-height: 1.55; }
.modal { width: min(520px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 8px; color: var(--ink); box-shadow: 0 24px 70px rgba(0, 0, 0, .3); }.modal::backdrop { background: rgba(13, 35, 29, .5); }.modal form { padding: 22px; }.modal-head { margin-bottom: 18px; }.modal label { display: grid; gap: 6px; margin: 13px 0; color: #3b5147; font-weight: 700; font-size: 13px; }.modal input, .modal textarea, .modal select { width: 100%; padding: 10px 11px; border: 1px solid #cbd7ce; border-radius: 5px; outline: none; color: var(--ink); background: #fff; }.modal textarea { min-height: 88px; resize: vertical; }.modal input:focus, .modal textarea:focus, .modal select:focus { border-color: var(--forest); box-shadow: 0 0 0 3px rgba(15, 88, 73, .1); }.modal .check-line { display: flex; align-items: flex-start; gap: 8px; font-weight: 400; line-height: 1.5; }.check-line input { width: auto; margin-top: 3px; }.modal-actions { justify-content: flex-end; margin-top: 20px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.form-grid label { min-width: 0; }
.follow-history-wrap { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }.follow-history { display: grid; gap: 10px; max-height: 176px; overflow: auto; }.follow-entry { padding: 10px 12px; border-radius: 5px; background: #f3f7f3; }.follow-entry strong { display: block; color: var(--forest); font-size: 12px; }.follow-entry p { margin: 4px 0 0; font-size: 12px; line-height: 1.55; }.follow-entry small { color: var(--muted); }
.toast { position: fixed; right: 20px; bottom: 20px; z-index: 10; max-width: min(400px, calc(100vw - 40px)); padding: 13px 16px; border-radius: 6px; color: #fff; background: var(--forest-dark); box-shadow: var(--shadow); opacity: 0; transform: translateY(14px); pointer-events: none; transition: .2s ease; }.toast.show { opacity: 1; transform: translateY(0); }.toast.error { background: #9d3f34; }

/* Premium blue-green finish: blue carries navigation and information, green carries action. */
:focus-visible { outline: 3px solid rgba(45, 128, 179, .28); outline-offset: 2px; }
.eyebrow, .section-label { color: var(--shell-blue-dark); }
.topbar { padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.panel, .metric, .task-stat, .inbox-stat, .commission-card, .hotspot-card { border-color: #d7e3ea; }
.panel { box-shadow: 0 12px 30px rgba(24, 58, 82, .06); }
.panel:hover, .metric:hover, .task-stat:hover, .inbox-stat:hover, .hotspot-card:hover { border-color: #bdd6e4; box-shadow: 0 16px 34px rgba(24, 78, 108, .1); }
.hero-strip { background: var(--forest-dark); }
.hero-strip::after { background: linear-gradient(90deg, rgba(16, 45, 69, .94), rgba(16, 45, 69, .64), rgba(16, 45, 69, .2)); }
.hero-copy span { color: #8de5b2; }
.hero-copy p { color: #d8e8f1; }
.metric:nth-child(1), .metric:nth-child(4) { border-top: 3px solid var(--shell-blue); }
.metric:nth-child(2), .metric:nth-child(5) { border-top: 3px solid var(--forest); }
.metric small, .copy-section strong, .script-block h3, .timeline-item h3, .timeline-time { color: var(--shell-blue-dark); }
.heat { color: var(--shell-blue-dark); background: var(--shell-blue-soft); }
.activity::before { background: var(--shell-blue); }
.activity.content::before { background: var(--forest); }
.task-check { color: var(--forest); }
.notice { border-color: #c6e7d7; color: #26704d; background: #edf9f2; }
.scope-tab:hover, .scope-tab.active, .segment.active, .template-tab.active { border-color: var(--shell-blue); background: var(--shell-blue); }
.scope-tab.active:hover, .segment.active:hover, .template-tab.active:hover { background: var(--shell-blue-dark); }
.reference-preview { border-color: #b7d3e2; background: #f8fbfd; }
.image-preview-card { background: linear-gradient(145deg, #1c5f8a, #2d80b3 58%, #07a957); box-shadow: 0 18px 34px rgba(24, 78, 108, .18); }
.preview-note { color: #718493; }
.timeline-item.selling { border-color: #b9d9e8; background: #f5fbfe; }
.timeline-item.selling .timeline-time { color: var(--forest); }
.draft-item:hover, .draft-item.active { background: #edf7fb; }
.status-pill { color: #21724d; background: #e3f6eb; }
.status-pill.scheduled { color: var(--shell-blue-dark); background: #e3f1f9; }
.status-pill.published { color: #80601b; background: #fff2cc; }
.reply-box { background: #eef8f4; }
.reply-box label { color: var(--shell-blue-dark); }
.stage { background: #e7f2f8; }.stage:nth-child(even) { background: #e5f5ed; }
th { color: var(--shell-blue-dark); background: #edf5f9; }
.stage-select:focus, .settings-body input:focus, .settings-body textarea:focus, .settings-body select:focus, .modal input:focus, .modal textarea:focus, .modal select:focus { border-color: var(--shell-blue); box-shadow: 0 0 0 3px rgba(45, 128, 179, .11); }
.property-chip, .draft-rule span { color: var(--shell-blue-dark); background: var(--shell-blue-soft); }
.follow-entry { background: #eef8f4; }
.follow-entry strong { color: var(--shell-blue-dark); }
.platform-dot { background: var(--shell-blue); }.platform-dot.green { background: var(--forest); }
.commission-card { background: var(--shell-blue-dark); }.commission-card:nth-child(2) { background: var(--forest); }
.modal::backdrop { background: rgba(16, 45, 69, .54); }
.toast { background: var(--shell-blue-dark); }.toast.error { background: #b34b41; }
@media (max-width: 980px) { .shell { grid-template-columns: 70px minmax(0, 1fr); }.brand { justify-content: center; padding-left: 0; padding-right: 0; }.brand div, .nav-item span, .sidebar-user div { display: none; }.nav-item { justify-content: center; padding: 12px; }.sidebar-user { justify-content: center; padding-left: 0; padding-right: 0; }.metric-grid { grid-template-columns: repeat(2, 1fr); }.dashboard-grid, .content-layout, .settings-grid, .creation-layout, .video-copy-layout { grid-template-columns: 1fr; }.draft-list-panel { max-height: none; }.inbox-item { grid-template-columns: 1fr; } }
@media (max-width: 660px) { .shell { display: block; }.sidebar { position: fixed; z-index: 5; bottom: 0; top: auto; width: 100%; min-height: 82px; padding: 6px 8px; flex-direction: row; background: var(--forest-dark); }.brand, .sidebar-user { display: none; }.nav { width: 100%; grid-template-columns: repeat(5, 1fr); gap: 2px; }.nav-item { padding: 7px 2px; justify-content: center; }.nav-item svg { width: 19px; height: 19px; }.main { padding: 22px 16px 104px; }.topbar { align-items: flex-start; }.top-actions .primary-button { width: 40px; padding: 0; justify-content: center; font-size: 0; }.top-actions .primary-button svg { width: 18px; height: 18px; }.hero-strip { min-height: 245px; }.hero-copy { padding: 22px; }.hero-copy h2 { font-size: 25px; }.metric-grid, .pipeline, .commission-summary, .inbox-summary, .task-summary { grid-template-columns: repeat(2, 1fr); }.form-grid { grid-template-columns: 1fr; }.section-top { align-items: flex-start; flex-direction: column; }.section-top .primary-button { width: 100%; justify-content: center; }.hotspot-toolbar { align-items: flex-start; flex-direction: column; }.hot-row { grid-template-columns: 40px minmax(0, 1fr); }.hot-row .tag { display: none; }.timeline-item { grid-template-columns: 1fr; }.timeline-time { font-size: 12px; }.inbox-list { padding: 0 16px; }.inbox-meta small { width: 100%; margin-left: 0; }.property-form { grid-template-columns: 1fr; }.property-form .secondary-button { width: 100%; }.task-row { grid-template-columns: 30px minmax(0, 1fr); }.task-row .tag, .task-row time { grid-column: 2; } }