:root {
  --app-height: 100dvh;
  --canvas: #f3f4ef;
  --paper: #fff;
  --sidebar: #ecefe9;
  --ink: #15272a;
  --muted: #677578;
  --quiet: #929c9b;
  --line: #dce1dc;
  --line-strong: #cbd3cc;
  --teal: #246c63;
  --teal-dark: #174e49;
  --teal-soft: #e6f1ed;
  --coral: #e96c4f;
  --coral-soft: #fbeae5;
  --yellow: #f1c75b;
  --danger: #a8493c;
  --shadow: 0 22px 65px rgba(23, 43, 45, .16);
  --font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; }
body { margin: 0; overflow: hidden; color: var(--ink); background: var(--canvas); font: 14px/1.55 var(--font); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { color: inherit; font: inherit; }
button { border: 0; background: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
svg { display: block; }
button:focus-visible, a:focus-visible, select:focus-visible, textarea:focus-visible, input:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

.app-shell { display: grid; grid-template-columns: 248px minmax(0, 1fr) 0; height: var(--app-height); transition: grid-template-columns 180ms ease; }
.app-shell.insight-open { grid-template-columns: 248px minmax(0, 1fr) 360px; }

.sidebar { position: relative; z-index: 20; display: flex; flex-direction: column; min-width: 0; padding: 18px 14px 14px; border-right: 1px solid var(--line); background: var(--sidebar); }
.brand-block { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 8px 0 6px; }
.brand-link { display: flex; align-items: center; gap: 11px; }
.brand-link > span:last-child { display: grid; line-height: 1.2; }
.brand-link strong { font-size: 15px; letter-spacing: -.02em; }
.brand-link small { margin-top: 4px; color: var(--quiet); font-size: 9px; letter-spacing: .06em; }
.brand-symbol { position: relative; display: flex; align-items: flex-end; gap: 2px; width: 30px; height: 30px; padding: 6px; border-radius: 9px; background: var(--teal-dark); }
.brand-symbol i { display: block; width: 4px; border-radius: 3px 3px 1px 1px; background: #fff; }
.brand-symbol i:nth-child(1) { height: 8px; opacity: .65; }
.brand-symbol i:nth-child(2) { height: 14px; }
.brand-symbol i:nth-child(3) { height: 11px; background: var(--yellow); }
.icon-button { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; }
.icon-button:hover { background: rgba(21,39,42,.07); }
.sidebar-close, .mobile-menu { display: none; }

.primary-nav { display: grid; gap: 3px; margin-top: 26px; }
.nav-item { display: flex; align-items: center; width: 100%; min-height: 39px; padding: 0 11px; border-radius: 9px; color: #586568; gap: 10px; text-align: left; }
.nav-item:hover { color: var(--ink); background: rgba(255,255,255,.6); }
.nav-item.active { color: var(--teal-dark); background: #fff; box-shadow: 0 1px 2px rgba(23,43,45,.05); font-weight: 650; }
.nav-icon { display: grid; place-items: center; width: 18px; height: 18px; color: currentColor; }
.nav-icon svg, [data-icon] svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nav-item .badge { margin-left: auto; padding: 1px 6px; border-radius: 8px; color: var(--teal); background: var(--teal-soft); font-size: 10px; font-weight: 700; }

.active-work { margin-top: 30px; padding: 15px 12px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-label { color: var(--quiet); font-size: 10px; font-weight: 700; }
.week-progress { height: 5px; margin-top: 14px; overflow: hidden; border-radius: 4px; background: #d9dfd9; }
.week-progress span { display: block; height: 100%; border-radius: inherit; background: var(--teal); }
.week-copy { display: flex; align-items: baseline; justify-content: space-between; margin-top: 8px; }
.week-copy strong { font-size: 16px; }
.week-copy span { color: var(--muted); font-size: 10px; }
.text-button { margin-top: 8px; padding: 0; color: var(--teal); font-size: 11px; font-weight: 650; }

.sidebar-footer { position: relative; margin-top: auto; }
.utility-button { display: flex; align-items: center; width: 100%; padding: 9px 10px; border-radius: 8px; color: var(--muted); gap: 10px; text-align: left; font-size: 12px; }
.utility-button:hover { background: rgba(255,255,255,.65); }
.account-trigger { display: flex; align-items: center; width: 100%; margin-top: 5px; padding: 10px 8px; border-top: 1px solid var(--line); gap: 10px; text-align: left; }
.account-avatar { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; color: white; background: var(--teal); font-weight: 700; }
.account-trigger > span:nth-child(2) { display: grid; flex: 1; min-width: 0; }
.account-trigger strong { font-size: 12px; }
.account-trigger small { color: var(--quiet); font-size: 9.5px; }
.account-trigger b { color: var(--quiet); font-size: 11px; }
.account-popover { position: absolute; z-index: 50; left: 0; right: 0; bottom: 58px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: var(--shadow); }
.account-popover strong { font-size: 13px; }
.account-popover p { margin: 6px 0 12px; color: var(--muted); font-size: 11px; }
.account-popover button { padding: 6px 10px; border-radius: 7px; color: #fff; background: var(--teal); font-size: 11px; }

.main-area { display: flex; flex-direction: column; min-width: 0; height: var(--app-height); background: var(--paper); }
.topbar { display: flex; align-items: center; justify-content: space-between; min-height: 60px; padding: 0 22px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.92); }
.topbar-left, .topbar-actions { display: flex; align-items: center; gap: 12px; }
.breadcrumb { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 650; }
.breadcrumb span { color: var(--quiet); font-weight: 450; }
.sync-pill { display: flex; align-items: center; height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: #fafbf9; gap: 6px; font-size: 10px; }
.sync-pill i { width: 6px; height: 6px; border-radius: 50%; background: #3b8a67; box-shadow: 0 0 0 3px #e2f0e8; }
.role-picker { display: flex; align-items: center; height: 32px; padding: 0 6px 0 10px; border-left: 1px solid var(--line); color: var(--quiet); gap: 6px; font-size: 10px; }
.role-picker select { max-width: 110px; border: 0; color: var(--ink); background: transparent; font-weight: 650; }
.view-root { flex: 1; min-height: 0; overflow: auto; background: #fff; }

.page { width: min(1180px, 100%); margin: 0 auto; padding: 34px 42px 70px; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 25px; gap: 20px; }
.page-heading h1 { margin: 0; font-size: clamp(28px, 3vw, 42px); line-height: 1.12; letter-spacing: -.045em; }
.page-heading p { max-width: 600px; margin: 10px 0 0; color: var(--muted); font-size: 13px; }
.primary-button, .secondary-button, .ghost-button { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 14px; border-radius: 9px; gap: 8px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.primary-button svg, .secondary-button svg, .ghost-button svg { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.primary-button { color: #fff; background: var(--teal-dark); }
.primary-button:hover { background: #103f3b; }
.secondary-button { border: 1px solid var(--line-strong); background: #fff; }
.secondary-button:hover, .ghost-button:hover { background: var(--canvas); }
.ghost-button { color: var(--muted); }

.dashboard-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr); min-height: 275px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #f8f9f5; }
.hero-copy { position: relative; z-index: 2; padding: 34px 36px; }
.hero-copy h1 { max-width: 600px; margin: 0; font-size: clamp(30px, 3.2vw, 47px); line-height: 1.07; letter-spacing: -.055em; }
.hero-copy p { max-width: 520px; margin: 17px 0 23px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.campaign-line { position: relative; min-height: 275px; overflow: hidden; background: var(--teal-dark); }
.campaign-line::before { content:""; position:absolute; width:310px; height:310px; top:-115px; right:-88px; border:1px solid rgba(255,255,255,.18); border-radius:50%; box-shadow:0 0 0 50px rgba(255,255,255,.025),0 0 0 100px rgba(255,255,255,.018); }
.line-title { position: absolute; top: 30px; left: 28px; color: rgba(255,255,255,.64); font-size: 10px; font-weight: 700; }
.line-flow { position: absolute; left: 28px; right: 28px; bottom: 36px; display: grid; grid-template-columns: repeat(5, 1fr); }
.line-flow::before { content:""; position:absolute; left:17px; right:17px; top:15px; height:1px; background:rgba(255,255,255,.25); }
.line-step { position: relative; z-index: 1; color: rgba(255,255,255,.65); font-size: 10px; }
.line-step i { display:grid; place-items:center; width:31px; height:31px; margin-bottom:12px; border:1px solid rgba(255,255,255,.34); border-radius:50%; background:var(--teal-dark); font-style:normal; }
.line-step.active { color:#fff; font-weight:700; }
.line-step.active i { color:var(--teal-dark); border-color:var(--yellow); background:var(--yellow); }
.line-step.done i { color:#fff; background:#3d8279; }

.metric-strip { display:grid; grid-template-columns:repeat(4,1fr); margin-top:16px; border:1px solid var(--line); border-radius:14px; background:#fff; }
.metric { width:100%; padding:17px 20px; border-right:1px solid var(--line); text-align:left; }
.metric:last-child { border-right:0; }
.metric span { color:var(--quiet); font-size:10px; }
.metric strong { display:block; margin-top:4px; font-size:22px; letter-spacing:-.03em; }
.metric small { color:var(--teal); font-size:9px; }

.section-head { display:flex; align-items:center; justify-content:space-between; margin:30px 0 13px; }
.section-head h2 { margin:0; font-size:16px; letter-spacing:-.02em; }
.section-head span { color:var(--quiet); font-size:10px; }
.template-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.template-card { position:relative; min-height:170px; padding:19px; overflow:hidden; border:1px solid var(--line); border-radius:13px; background:#fff; text-align:left; }
.template-card:hover { border-color:#aebcb5; box-shadow:0 10px 28px rgba(25,50,48,.07); transform:translateY(-1px); }
.template-card .template-type { display:inline-flex; padding:4px 7px; border-radius:6px; color:var(--teal); background:var(--teal-soft); font-size:9px; font-weight:700; }
.template-card:nth-child(2) .template-type { color:#9a4d39; background:var(--coral-soft); }
.template-card:nth-child(3) .template-type { color:#7b631d; background:#faf3d9; }
.template-card h3 { margin:13px 0 6px; font-size:16px; }
.template-card p { margin:0; color:var(--muted); font-size:11px; line-height:1.6; }
.template-card b { position:absolute; right:17px; bottom:15px; color:var(--teal); font-size:18px; }

.activity-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:14px; }
.panel-card { border:1px solid var(--line); border-radius:14px; background:#fff; }
.panel-header { display:flex; align-items:center; justify-content:space-between; min-height:48px; padding:0 17px; border-bottom:1px solid var(--line); }
.panel-header strong { font-size:12px; }
.panel-header button { color:var(--teal); font-size:10px; }
.activity-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; min-height:62px; padding:0 17px; border-bottom:1px solid var(--line); gap:12px; }
.activity-row:last-child { border-bottom:0; }
.activity-row strong { display:block; font-size:12px; }
.activity-row span { color:var(--quiet); font-size:9.5px; }
.status { display:inline-flex; align-items:center; padding:4px 7px; border-radius:6px; color:var(--teal); background:var(--teal-soft); font-size:9px; font-weight:700; }
.status.draft { color:#8a6531; background:#faf2de; }
.funnel { display:grid; gap:13px; padding:18px; }
.funnel-row { display:grid; grid-template-columns:62px minmax(0,1fr) 35px; align-items:center; gap:9px; color:var(--muted); font-size:10px; }
.funnel-track { height:7px; overflow:hidden; border-radius:5px; background:#edf0ec; }
.funnel-track i { display:block; height:100%; border-radius:inherit; background:var(--teal); }
.funnel-row:nth-child(2) i { background:#3d8177; }
.funnel-row:nth-child(3) i { background:var(--yellow); }
.funnel-row:nth-child(4) i { background:var(--coral); }

.studio { display:flex; flex-direction:column; min-height:100%; }
.studio-head { display:flex; align-items:center; justify-content:space-between; padding:20px 28px 16px; border-bottom:1px solid var(--line); gap:16px; }
.studio-title { min-width:0; }
.studio-title h1 { margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:20px; letter-spacing:-.03em; }
.studio-title p { margin:4px 0 0; color:var(--muted); font-size:10px; }
.studio-actions { display:flex; gap:8px; }
.process-rail { display:grid; grid-template-columns:repeat(5,1fr); padding:15px 28px; border-bottom:1px solid var(--line); background:#fafbf8; }
.process-step { position:relative; display:flex; align-items:center; color:var(--quiet); gap:8px; font-size:10px; }
.process-step:not(:last-child)::after { content:""; position:absolute; left:29px; right:8px; top:11px; height:1px; background:var(--line-strong); }
.process-step i { position:relative; z-index:1; display:grid; place-items:center; width:23px; height:23px; border:1px solid var(--line-strong); border-radius:50%; background:#fafbf8; font-style:normal; font-size:9px; }
.process-step.done { color:var(--teal); font-weight:700; }
.process-step.done i { color:#fff; border-color:var(--teal); background:var(--teal); }
.process-step.active { color:var(--ink); font-weight:700; }
.process-step.active i { border-color:var(--yellow); box-shadow:0 0 0 4px rgba(241,199,91,.23); }
.studio-grid { display:grid; grid-template-columns:250px minmax(0,1fr); flex:1; min-height:0; }
.brief-panel { padding:22px; border-right:1px solid var(--line); background:#f8f9f6; overflow:auto; }
.brief-panel h2 { margin:0 0 17px; font-size:13px; }
.brief-item { padding:13px 0; border-top:1px solid var(--line); }
.brief-item span { display:block; margin-bottom:5px; color:var(--quiet); font-size:9px; font-weight:700; }
.brief-item p { margin:0; font-size:11px; line-height:1.65; }
.source-link { display:flex; align-items:flex-start; width:100%; padding:10px; border:1px solid var(--line); border-radius:8px; background:#fff; gap:8px; text-align:left; font-size:10px; }
.source-link b { color:var(--teal); }
.editor-area { min-width:0; padding:22px 28px 50px; overflow:auto; }
.channel-tabs { display:flex; align-items:center; gap:4px; padding-bottom:15px; border-bottom:1px solid var(--line); }
.channel-tab { display:flex; align-items:center; min-height:34px; padding:0 11px; border-radius:8px; color:var(--muted); gap:7px; font-size:11px; }
.channel-tab i { width:7px; height:7px; border-radius:50%; background:var(--channel-color); }
.channel-tab.active { color:var(--ink); background:var(--canvas); font-weight:700; }
.channel-tab small { color:var(--quiet); font-size:8px; }
.content-layout { display:grid; grid-template-columns:minmax(0,1fr) 230px; gap:22px; padding-top:20px; }
.field-group { margin-bottom:16px; }
.field-label { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; color:var(--muted); font-size:9px; font-weight:700; }
.field-label span { color:var(--quiet); font-weight:500; }
.editor-input, .editor-textarea { width:100%; border:1px solid var(--line); border-radius:9px; background:#fff; }
.editor-input { height:42px; padding:0 12px; font-size:13px; font-weight:650; }
.editor-textarea { min-height:190px; padding:12px; resize:vertical; line-height:1.8; font-size:12px; }
.cta-input { font-weight:500; }
.editor-toolbar { display:flex; align-items:center; justify-content:space-between; margin-top:14px; gap:10px; }
.editor-toolbar > div { display:flex; align-items:center; gap:7px; }
.editor-note { color:var(--quiet); font-size:9px; }
.preview-card { position:sticky; top:0; }
.phone-preview { overflow:hidden; border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:0 12px 35px rgba(20,38,40,.08); }
.phone-bar { display:flex; align-items:center; justify-content:space-between; height:34px; padding:0 12px; border-bottom:1px solid var(--line); color:var(--quiet); font-size:8px; }
.cover-art { display:flex; align-items:flex-end; min-height:190px; padding:19px; white-space:pre-line; color:#fff; background:linear-gradient(145deg,var(--teal-dark),#2f8074 65%,#efb84e); font-size:23px; font-weight:800; line-height:1.12; letter-spacing:-.04em; }
.preview-copy { padding:13px; }
.preview-copy strong { display:block; font-size:11px; }
.preview-copy p { display:-webkit-box; margin:6px 0 0; overflow:hidden; color:var(--muted); font-size:9px; line-height:1.55; -webkit-box-orient:vertical; -webkit-line-clamp:4; }
.review-card { margin-top:13px; padding:13px; border:1px solid var(--line); border-radius:11px; background:#fafbf9; }
.review-card header { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; font-size:10px; font-weight:700; }
.review-pass { color:var(--teal); }
.review-fail { color:var(--danger); }
.check-row { display:flex; align-items:center; justify-content:space-between; padding:6px 0; border-top:1px solid var(--line); color:var(--muted); font-size:9px; }
.check-row b.pass { color:var(--teal); }
.check-row b.fail { color:var(--danger); }

.list-table { overflow:hidden; border:1px solid var(--line); border-radius:13px; }
.list-row { display:grid; grid-template-columns:minmax(240px,2fr) 110px 110px 120px 30px; align-items:center; min-height:68px; padding:0 18px; border-bottom:1px solid var(--line); gap:12px; }
.list-row:last-child { border-bottom:0; }
.list-row:hover { background:#fafbf8; }
.list-row button { text-align:left; }
.list-title strong { display:block; font-size:12px; }
.list-title span, .list-cell { color:var(--quiet); font-size:10px; }
.row-arrow { color:var(--quiet); }

.calendar-shell { display:grid; grid-template-columns:minmax(0,1fr) 260px; overflow:hidden; border:1px solid var(--line); border-radius:14px; }
.calendar-main { min-width:0; }
.calendar-toolbar { display:flex; align-items:center; justify-content:space-between; min-height:58px; padding:0 17px; border-bottom:1px solid var(--line); }
.calendar-toolbar h2 { margin:0; font-size:14px; }
.calendar-week { display:grid; grid-template-columns:repeat(7, minmax(75px,1fr)); min-height:420px; }
.day-column { min-width:0; padding:13px 9px; border-right:1px solid var(--line); }
.day-column:last-child { border-right:0; }
.day-column.today { background:#fafbf7; }
.day-head { display:grid; gap:2px; padding-bottom:12px; color:var(--quiet); text-align:center; font-size:9px; }
.day-head strong { color:var(--ink); font-size:14px; }
.today .day-head strong { display:grid; place-items:center; width:27px; height:27px; margin:0 auto; border-radius:50%; color:#fff; background:var(--teal); }
.calendar-item { margin-top:8px; padding:9px; border-left:3px solid var(--teal); border-radius:7px; background:var(--teal-soft); font-size:9px; }
.calendar-item.coral { border-color:var(--coral); background:var(--coral-soft); }
.calendar-item strong { display:block; margin-bottom:3px; font-size:9.5px; }
.calendar-item span { color:var(--muted); }
.calendar-side { padding:18px; border-left:1px solid var(--line); background:#f8f9f6; }
.calendar-side h3 { margin:0 0 14px; font-size:12px; }
.queue-item { padding:11px 0; border-top:1px solid var(--line); }
.queue-item strong { display:block; font-size:10.5px; }
.queue-item span { color:var(--quiet); font-size:9px; }

.brand-layout { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.brand-card { padding:22px; border:1px solid var(--line); border-radius:14px; }
.brand-card.wide { grid-column:1/-1; }
.brand-card h2 { margin:0 0 6px; font-size:15px; }
.brand-card > p { margin:0 0 18px; color:var(--muted); font-size:11px; }
.fact-row { display:grid; grid-template-columns:100px 1fr; padding:12px 0; border-top:1px solid var(--line); gap:15px; font-size:11px; }
.fact-row strong { color:var(--teal); font-size:10px; }
.tone-tags { display:flex; flex-wrap:wrap; gap:7px; }
.tone-tag { padding:6px 9px; border:1px solid var(--line); border-radius:7px; color:var(--muted); font-size:10px; }
.tone-tag.avoid { color:var(--danger); border-color:#ebcbc4; background:#fff7f5; }

.insight-panel { min-width:0; border-left:0; background:#fafbf8; overflow:hidden; visibility:hidden; }
.insight-open .insight-panel { visibility:visible; border-left:1px solid var(--line); }
.insight-inner { display:flex; flex-direction:column; height:100%; }
.insight-head { display:flex; align-items:center; justify-content:space-between; min-height:60px; padding:0 17px; border-bottom:1px solid var(--line); }
.insight-head strong { font-size:12px; }
.insight-body { flex:1; padding:21px 18px 50px; overflow:auto; }
.insight-source { padding-bottom:17px; border-bottom:1px solid var(--line); }
.insight-source span { display:inline-flex; padding:4px 7px; border-radius:5px; color:var(--teal); background:var(--teal-soft); font-size:8px; font-weight:700; }
.insight-source h2 { margin:10px 0 6px; font-size:18px; line-height:1.35; }
.insight-source p { margin:0; color:var(--muted); font-size:10px; }
.insight-fact { padding:16px 0; border-bottom:1px solid var(--line); }
.insight-fact strong { display:block; margin-bottom:6px; font-size:10px; }
.insight-fact p { margin:0; color:var(--muted); font-size:11px; line-height:1.7; }
.insight-warning { margin-top:18px; padding:12px; border-left:3px solid var(--coral); color:#754738; background:var(--coral-soft); font-size:10px; line-height:1.65; }

.modal { width:min(500px,calc(100vw - 30px)); padding:0; border:0; border-radius:15px; color:var(--ink); box-shadow:var(--shadow); }
.modal::backdrop { background:rgba(15,35,37,.4); backdrop-filter:blur(3px); }
.modal-head { display:flex; align-items:center; justify-content:space-between; padding:17px 19px; border-bottom:1px solid var(--line); }
.modal-head h2 { margin:0; font-size:15px; }
.modal-body { padding:20px; }
.modal-body p { margin:0 0 12px; color:var(--muted); }
.modal-foot { display:flex; justify-content:flex-end; gap:8px; padding:13px 19px; border-top:1px solid var(--line); }
.schedule-options { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:16px; }
.schedule-option { padding:12px; border:1px solid var(--line); border-radius:9px; text-align:left; }
.schedule-option.active { border-color:var(--teal); background:var(--teal-soft); }
.schedule-option strong { display:block; font-size:11px; }
.schedule-option span { color:var(--quiet); font-size:9px; }
.toast-region { position:fixed; z-index:100; right:18px; bottom:18px; display:grid; gap:8px; pointer-events:none; }
.toast { max-width:340px; padding:11px 14px; border-radius:9px; color:#fff; background:#173f3c; box-shadow:0 12px 34px rgba(15,35,37,.24); font-size:11px; animation:toastIn 160ms ease; }
@keyframes toastIn { from { opacity:0; transform:translateY(7px); } }

.sidebar-backdrop { display:none; }
.empty-state { padding:70px 20px; color:var(--muted); text-align:center; }
.empty-state h2 { color:var(--ink); }

.system-kicker { display:flex; align-items:center; margin-bottom:13px; color:var(--teal); gap:7px; font-size:10px; font-weight:750; }
.system-kicker i { width:7px; height:7px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 4px var(--teal-soft); }
.opportunity-list { overflow:hidden; border:1px solid var(--line); border-radius:14px; }
.opportunity-row { display:grid; grid-template-columns:40px minmax(0,1fr) auto; align-items:center; min-height:67px; padding:0 16px; border-bottom:1px solid var(--line); gap:12px; }
.opportunity-row:last-child { border-bottom:0; }
.opportunity-rank { color:var(--coral); font-size:11px; font-weight:800; }
.opportunity-row div { display:grid; gap:3px; }
.opportunity-row div strong { font-size:12px; }
.opportunity-row div span { color:var(--quiet); font-size:9.5px; }
.operations-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.workflow-mini-list, .recent-output-list { overflow:hidden; border:1px solid var(--line); border-radius:13px; }
.workflow-mini, .recent-output { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; width:100%; min-height:69px; padding:11px 14px; border-bottom:1px solid var(--line); gap:11px; text-align:left; }
.workflow-mini:last-child, .recent-output:last-child { border-bottom:0; }
.workflow-mini:hover, .recent-output:hover { background:#fafbf8; }
.workflow-glyph { display:grid; place-items:center; width:36px; height:36px; border-radius:10px; color:#fff; background:var(--teal-dark); font-size:11px; font-weight:800; }
.workflow-mini > span:nth-child(2), .recent-output > span:nth-child(2) { display:grid; min-width:0; gap:3px; }
.workflow-mini strong, .recent-output strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.workflow-mini small, .recent-output small { color:var(--quiet); font-size:9px; }
.workflow-mini > b { color:var(--teal); font-size:9px; }
.output-thumb { width:38px; height:38px; border-radius:9px; background:linear-gradient(145deg,var(--teal-dark),#3d8b80); }
.output-thumb.agent { background:linear-gradient(145deg,#26344f,#9b68aa); }
.output-thumb.case { background:linear-gradient(145deg,#8a5a35,#e1b466); }
.system-note { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; margin-top:26px; padding:17px 19px; border:1px solid #cfe0d9; border-radius:13px; background:#f4faf7; gap:13px; }
.system-note-icon { display:grid; place-items:center; width:38px; height:38px; border-radius:10px; color:white; background:var(--teal); font-size:10px; font-weight:800; }
.system-note strong { font-size:12px; }
.system-note p { margin:3px 0 0; color:var(--muted); font-size:10px; }

.radar-toolbar, .library-toolbar, .skill-toolbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:15px; gap:16px; }
.radar-toolbar > span { display:flex; align-items:center; color:var(--quiet); gap:7px; font-size:9px; }
.radar-toolbar > span i, .live-dot { width:7px; height:7px; border-radius:50%; background:#36a36b; box-shadow:0 0 0 3px #e4f3ea; }
.platform-chips, .library-tabs { display:flex; flex-wrap:wrap; gap:6px; }
.platform-chips button, .library-tabs button { min-height:31px; padding:0 11px; border:1px solid var(--line); border-radius:8px; color:var(--muted); background:#fff; font-size:10px; }
.platform-chips button.active, .library-tabs button.active { color:#fff; border-color:var(--teal-dark); background:var(--teal-dark); }
.trend-columns { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.trend-column { overflow:hidden; border:1px solid var(--line); border-radius:13px; }
.trend-column > header { display:flex; align-items:center; min-height:48px; padding:0 14px; border-bottom:1px solid var(--line); gap:8px; }
.trend-column > header strong { font-size:12px; }
.trend-column > header small { margin-left:auto; color:var(--quiet); font-size:8.5px; }
.platform-dot { width:8px; height:8px; border-radius:50%; background:#e35151; }
.platform-dot.douyin { background:#24283c; }
.platform-dot.zhihu { background:#1478ee; }
.trend-row { position:relative; display:grid; grid-template-columns:22px minmax(0,1fr) 26px; align-items:start; min-height:78px; padding:13px 11px; border-bottom:1px solid var(--line); gap:7px; }
.trend-row:last-child { border-bottom:0; }
.trend-rank { display:grid; place-items:center; width:20px; height:20px; border-radius:6px; color:var(--quiet); background:var(--canvas); font-size:9px; font-weight:800; }
.trend-rank.top { color:#fff; background:var(--coral); }
.trend-copy { display:grid; min-width:0; gap:5px; }
.trend-copy strong { display:-webkit-box; overflow:hidden; font-size:10.5px; line-height:1.45; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.trend-copy span { color:var(--quiet); font-size:8px; }
.trend-copy span b { color:var(--teal); }
.trend-save { display:grid; place-items:center; width:25px; height:25px; border-radius:7px; color:var(--teal); background:var(--teal-soft); }
.trend-make { grid-column:2/4; justify-self:start; color:var(--teal); font-size:9px; font-weight:700; }
.radar-insight { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; margin-top:16px; padding:17px; border:1px solid #cfe0d9; border-radius:13px; background:#f4faf7; gap:13px; }
.radar-ai { display:grid; place-items:center; width:38px; height:38px; border-radius:10px; color:#fff; background:var(--teal-dark); font-size:10px; font-weight:800; }
.radar-insight strong { font-size:11px; }
.radar-insight p { margin:3px 0 0; color:var(--muted); font-size:10px; line-height:1.6; }

.workflow-status-board { display:grid; grid-template-columns:minmax(230px,1fr) minmax(180px,.8fr) auto auto; align-items:center; margin-bottom:15px; padding:14px 16px; border:1px solid #cfe0d9; border-radius:13px; background:#f4faf7; gap:14px; }
.workflow-status-board > div:first-child { display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:9px; }
.workflow-status-board .live-dot { grid-row:1/3; }
.workflow-status-board strong { font-size:11px; }
.workflow-status-board small { color:var(--muted); font-size:9px; }
.workflow-status-board > span { color:var(--teal); font-size:9px; font-weight:700; }
.workflow-status-board > button { color:var(--teal); font-size:9px; font-weight:700; }
.workflow-progress { height:6px; overflow:hidden; border-radius:5px; background:#dbe7e1; }
.workflow-progress i { display:block; height:100%; border-radius:inherit; background:var(--teal); }
.workflow-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.workflow-card { display:flex; flex-direction:column; min-height:245px; padding:20px; border:1px solid var(--line); border-radius:14px; }
.workflow-card.recommended { border-color:#b9d7cd; background:linear-gradient(145deg,#fff,#f5faf7); }
.workflow-card header { display:flex; align-items:center; justify-content:space-between; }
.workflow-card header b { padding:3px 7px; border-radius:6px; color:var(--teal); background:var(--teal-soft); font-size:8px; }
.workflow-card h2 { margin:15px 0 6px; font-size:15px; }
.workflow-card p { margin:0; color:var(--muted); font-size:10px; line-height:1.6; }
.workflow-skill-chain { display:flex; align-items:center; flex-wrap:wrap; margin:16px 0; gap:5px; }
.workflow-skill-chain span { padding:4px 6px; border:1px solid var(--line); border-radius:5px; background:#fff; font-size:8px; }
.workflow-skill-chain em { color:var(--quiet); font-style:normal; }
.workflow-card footer { display:flex; align-items:center; justify-content:space-between; margin-top:auto; }
.workflow-card footer > span { color:var(--quiet); font-size:9px; }
.workflow-rule { display:flex; align-items:center; justify-content:center; margin-top:15px; padding:15px; border:1px dashed var(--line-strong); border-radius:12px; color:var(--muted); gap:11px; font-size:9px; }
.workflow-rule strong { color:var(--ink); }
.workflow-rule i { color:var(--teal); font-style:normal; }

.library-toolbar label, .skill-toolbar label { display:flex; align-items:center; width:220px; height:34px; padding:0 10px; border:1px solid var(--line); border-radius:8px; gap:6px; }
.library-toolbar input, .skill-toolbar input { width:100%; border:0; outline:0; background:transparent; font-size:10px; }
.output-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; }
.output-card { overflow:hidden; border:1px solid var(--line); border-radius:14px; background:#fff; }
.output-cover { position:relative; display:flex; align-items:flex-end; height:155px; padding:17px; white-space:pre-line; color:#fff; background:linear-gradient(145deg,var(--teal-dark),#39877b 66%,#dfb34f); font-size:20px; font-weight:800; line-height:1.12; }
.output-cover.agent { background:linear-gradient(145deg,#26344f,#895b96 68%,#dc8b6d); }
.output-cover.case { background:linear-gradient(145deg,#64442f,#b47945 68%,#e5c56d); }
.output-cover.trend { background:linear-gradient(145deg,#30374c,#39798f 68%,#ed7c5e); }
.output-cover b { position:absolute; top:12px; right:12px; padding:4px 7px; border:1px solid rgba(255,255,255,.32); border-radius:6px; background:rgba(0,0,0,.14); font-size:8px; }
.output-card-body { padding:14px; }
.output-card-body strong { display:block; min-height:36px; font-size:11.5px; line-height:1.5; }
.output-card-body p { margin:5px 0 13px; color:var(--quiet); font-size:9px; }
.output-card-body footer { display:flex; align-items:center; justify-content:space-between; padding-top:11px; border-top:1px solid var(--line); color:var(--quiet); font-size:8.5px; }

.account-summary { display:grid; grid-template-columns:repeat(4,1fr); margin-bottom:15px; border:1px solid var(--line); border-radius:13px; }
.account-summary > div { padding:15px 18px; border-right:1px solid var(--line); }
.account-summary > div:last-child { border-right:0; }
.account-summary strong { display:block; font-size:18px; }
.account-summary span { color:var(--quiet); font-size:9px; }
.account-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.matrix-account { padding:16px; border:1px solid var(--line); border-radius:13px; }
.matrix-account header { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; }
.platform-logo { display:grid; place-items:center; width:35px; height:35px; border-radius:10px; color:#fff; background:#e75555; font-size:11px; font-weight:800; }
.platform-logo.wechat { background:#169b62; }.platform-logo.douyin { background:#22263b; }.platform-logo.zhihu { background:#1478ee; }.platform-logo.bilibili { background:#e56c96; }.platform-logo.shipinhao { background:#f28a35; }
.matrix-account header > div { display:grid; min-width:0; }
.matrix-account header strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11.5px; }
.matrix-account header small { color:var(--quiet); font-size:8.5px; }
.account-state { display:flex; align-items:center; color:var(--teal); gap:5px; font-size:8.5px; }
.account-state i { width:6px; height:6px; border-radius:50%; background:currentColor; }
.account-state.offline { color:var(--quiet); }
.account-data { display:grid; grid-template-columns:1fr 1fr; margin:15px 0; padding:12px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.account-data span { display:grid; color:var(--quiet); font-size:8px; }
.account-data b { color:var(--ink); font-size:11px; }
.matrix-account footer { display:flex; justify-content:flex-end; gap:7px; }
.matrix-account footer button { padding:6px 9px; border:1px solid var(--line); border-radius:7px; font-size:9px; }
.matrix-account footer button:last-child { color:#fff; border-color:var(--teal); background:var(--teal); }
.account-boundary { display:flex; align-items:center; margin-top:14px; padding:12px 14px; border-left:3px solid var(--yellow); background:#fcf8e9; gap:10px; font-size:9px; }
.account-boundary p { margin:0; color:var(--muted); }

.skill-count { padding:6px 9px; border-radius:7px; color:var(--teal); background:var(--teal-soft); font-size:9px; font-weight:700; }
.skill-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.skill-card { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:start; min-height:105px; padding:15px; border:1px solid var(--line); border-radius:12px; gap:11px; text-align:left; }
.skill-card:hover { border-color:#afc4ba; background:#fafcf9; }
.skill-icon { display:grid; place-items:center; width:35px; height:35px; border-radius:9px; color:#fff; background:var(--teal); font-size:11px; font-weight:800; }
.skill-icon.创作 { background:#4d6ba0; }.skill-icon.视觉 { background:#8d5b92; }.skill-icon.审核 { background:#b66b3c; }.skill-icon.发布 { background:#26344f; }
.skill-main { display:grid; gap:4px; }
.skill-main strong { font-size:11.5px; }
.skill-main small { color:var(--muted); font-size:9px; line-height:1.5; }
.skill-main em { color:var(--quiet); font-size:8px; font-style:normal; }
.skill-state { padding:3px 6px; border-radius:5px; color:var(--teal); background:var(--teal-soft); font-size:8px; }
.skill-state.beta { color:#876329; background:#faf1d9; }
.skill-modal-meta { display:flex; flex-wrap:wrap; gap:7px; margin:14px 0; }
.skill-modal-meta span { padding:5px 7px; border-radius:6px; background:var(--canvas); color:var(--muted); font-size:9px; }

.skill-trace { display:flex; align-items:center; min-height:42px; padding:0 28px; border-bottom:1px solid var(--line); color:var(--quiet); background:#fff; gap:7px; overflow-x:auto; white-space:nowrap; font-size:8.5px; }
.skill-trace > span { display:flex; align-items:center; margin-right:4px; color:var(--teal); font-weight:700; gap:6px; }
.skill-trace > span i { width:6px; height:6px; border-radius:50%; background:#36a36b; }
.skill-trace b { padding:3px 6px; border-radius:5px; background:var(--canvas); color:var(--muted); font-size:8px; }
.skill-trace b.finished { color:var(--teal); background:var(--teal-soft); }
.skill-trace em { font-style:normal; }
.publish-targets { display:grid; gap:8px; margin:15px 0; }
.publish-targets label { display:grid; grid-template-columns:auto auto minmax(0,1fr) auto; align-items:center; padding:10px; border:1px solid var(--line); border-radius:9px; gap:10px; }
.publish-targets input { accent-color:var(--teal); }
.publish-targets .platform-logo { width:30px; height:30px; border-radius:8px; }
.publish-targets label > span:nth-child(3) { display:grid; }
.publish-targets strong { font-size:10.5px; }
.publish-targets small { color:var(--quiet); font-size:8.5px; }
.publish-targets label > b { color:var(--teal); font-size:8.5px; }
.publish-targets label > b.publishing { color:#9a6b22; }
.publish-boundary { padding:10px; border-left:3px solid var(--yellow); background:#fcf8e9; color:var(--muted); font-size:9px; line-height:1.6; }

@media (max-width: 1120px) {
  .app-shell.insight-open { grid-template-columns:248px minmax(0,1fr); }
  .insight-panel { position:fixed; z-index:40; inset:0 0 0 auto; width:min(380px,92vw); box-shadow:-18px 0 50px rgba(23,43,45,.16); transform:translateX(101%); transition:transform 180ms ease; }
  .insight-open .insight-panel { transform:translateX(0); }
  .content-layout { grid-template-columns:minmax(0,1fr) 210px; }
}

@media (max-width: 820px) {
  .app-shell, .app-shell.insight-open { display:block; }
  .sidebar { position:fixed; inset:0 auto 0 0; width:min(286px,86vw); transform:translateX(-102%); transition:transform 180ms ease; box-shadow:18px 0 45px rgba(23,43,45,.18); }
  .sidebar-visible .sidebar { transform:translateX(0); }
  .sidebar-close, .mobile-menu { display:inline-grid; }
  .sidebar-visible .sidebar-backdrop { display:block; position:fixed; z-index:19; inset:0; background:rgba(21,39,42,.3); }
  .main-area { height:var(--app-height); }
  .topbar { min-height:56px; padding:0 12px; }
  .sync-pill { display:none; }
  .page { padding:24px 16px 50px; }
  .dashboard-hero { grid-template-columns:1fr; }
  .campaign-line { min-height:190px; }
  .metric-strip { grid-template-columns:repeat(2,1fr); }
  .metric:nth-child(2) { border-right:0; }
  .metric:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .template-grid { grid-template-columns:1fr; }
  .activity-grid { grid-template-columns:1fr; }
  .operations-grid { grid-template-columns:1fr; }
  .opportunity-row { grid-template-columns:32px minmax(0,1fr); padding:10px 12px; }
  .opportunity-row .secondary-button { grid-column:2; justify-self:start; min-height:32px; }
  .system-note, .radar-insight { grid-template-columns:auto minmax(0,1fr); }
  .system-note .secondary-button, .radar-insight .primary-button { grid-column:2; justify-self:start; }
  .trend-columns { grid-template-columns:1fr; }
  .workflow-grid, .skill-grid { grid-template-columns:1fr; }
  .workflow-status-board { grid-template-columns:1fr auto; }
  .workflow-status-board .workflow-progress { grid-column:1/-1; grid-row:2; }
  .workflow-rule { align-items:flex-start; flex-direction:column; }
  .workflow-rule i { transform:rotate(90deg); }
  .output-grid, .account-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .account-summary { grid-template-columns:repeat(2,1fr); }
  .account-summary > div:nth-child(2) { border-right:0; }
  .account-summary > div:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .radar-toolbar, .library-toolbar, .skill-toolbar { align-items:stretch; flex-direction:column; }
  .library-toolbar label, .skill-toolbar label { width:100%; }
  .studio-head { padding:15px 14px; }
  .studio-actions .secondary-button { display:none; }
  .process-rail { padding:12px 14px; overflow-x:auto; }
  .process-step { min-width:100px; }
  .studio-grid { grid-template-columns:1fr; }
  .brief-panel { display:none; }
  .editor-area { padding:16px 14px 40px; }
  .content-layout { grid-template-columns:1fr; }
  .preview-card { position:static; display:grid; grid-template-columns:160px 1fr; gap:10px; }
  .cover-art { min-height:150px; font-size:18px; }
  .review-card { margin-top:0; }
  .list-row { grid-template-columns:minmax(0,1fr) 26px; padding:10px 13px; }
  .list-cell, .list-row > .status { display:none; }
  .calendar-shell { grid-template-columns:1fr; overflow:auto; }
  .calendar-week { min-width:680px; min-height:350px; }
  .calendar-side { border-top:1px solid var(--line); border-left:0; }
  .brand-layout { grid-template-columns:1fr; }
  .brand-card.wide { grid-column:auto; }
  .insight-panel { width:100vw; }
}

@media (max-width: 520px) {
  .role-picker > span { display:none; }
  .hero-copy { padding:27px 22px; }
  .hero-copy h1 { font-size:33px; }
  .metric { padding:14px; }
  .metric strong { font-size:19px; }
  .preview-card { display:block; }
  .review-card { margin-top:12px; }
  .channel-tabs { overflow-x:auto; }
  .channel-tab { flex:0 0 auto; }
  .schedule-options { grid-template-columns:1fr; }
  .output-grid, .account-grid { grid-template-columns:1fr; }
  .system-note, .radar-insight { grid-template-columns:1fr; }
  .system-note .secondary-button, .radar-insight .primary-button { grid-column:auto; justify-self:stretch; }
  .system-note-icon, .radar-ai { display:none; }
  .skill-card { grid-template-columns:auto minmax(0,1fr); }
  .skill-state { grid-column:2; justify-self:start; }
}

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