/* DeepinGEO customer workspace & operations console skin (src/components/portal/views.tsx).
   Loads after the shared styles-tokens.css. Shell classes use the cw- prefix and dashboard
   classes the dash- prefix; the unprefixed content classes are kept verbatim because
   product-client.ts / client.ts generate markup with them at runtime (order-card, geo-step, badge, pipeline-stage, …). */
:root {
  --blue: var(--dg-primary);
  --muted: var(--dg-muted);
  --line: var(--dg-line);
  --radius: var(--dg-radius-card);
  --surface: var(--dg-card);
}
html { font-family: var(--dg-font); }
body { margin: 0; font-family: var(--dg-font); color: var(--dg-body); background: var(--dg-surface); font-size: 14px; line-height: 1.6; font-synthesis: none; }
a { color: var(--dg-primary); text-decoration: none; }
button, input, textarea, select { font: inherit; }
button, a { touch-action: manipulation; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
fieldset:disabled { opacity: .65; }
h1, h2, h3, h4, p { margin: 0; }
h1 { font-size: 28px; line-height: 1.35; letter-spacing: -.7px; color: var(--dg-ink); }
h2 { font-size: 18px; line-height: 1.4; letter-spacing: -.3px; color: var(--dg-ink); }
h3 { font-size: 16px; color: var(--dg-ink); }
svg { width: 20px; height: 20px; flex-shrink: 0; }

/* ------------------------------------------------------------------ cw- shell */
.cw-app-shell { display: flex; min-height: 100vh; }
.cw-sidebar { position: fixed; inset: 0 auto 0 0; width: 248px; padding: 28px 16px 20px; background: var(--dg-card); border-right: 1px solid var(--dg-line); display: flex; flex-direction: column; z-index: 40; overflow-y: auto; }
.cw-brand { display: flex; align-items: center; gap: 10px; color: var(--dg-ink); font-size: 21px; font-weight: 750; letter-spacing: -.6px; line-height: 1.2; padding: 0 10px; }
.cw-brand small { display: block; margin-top: 5px; color: var(--dg-faint); font-size: 10px; letter-spacing: .25px; font-weight: 500; }
.cw-brand-mark { width: 34px; height: 36px; border-radius: 10px; background: var(--dg-primary); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 23px; box-shadow: var(--dg-shadow-card); }
.cw-nav { display: grid; gap: 4px; margin-top: 26px; align-content: start; }
.cw-nav-caption { font-size: 11px; font-weight: 600; color: var(--dg-faint); letter-spacing: .8px; margin: 0 12px 4px; }
.cw-nav-item { display: flex; gap: 12px; align-items: center; padding: 9px 13px; border-radius: var(--dg-radius-control); color: var(--dg-muted); font-size: 13px; font-weight: 500; transition: background .15s, color .15s; min-height: 40px; }
.cw-nav-item svg { width: 18px; height: 18px; }
.cw-nav-item:hover { background: var(--dg-surface); color: var(--dg-ink); }
.cw-nav-item.active { color: var(--dg-primary); background: var(--dg-primary-soft); font-weight: 650; }
/* Low-frequency pages hide in a zero-JS disclosure at the bottom of the nav. */
.cw-nav-more { margin-top: 10px; border-top: 1px solid var(--dg-line); padding-top: 8px; }
.cw-nav-more > summary { list-style: none; cursor: pointer; display: flex; align-items: center; padding: 9px 13px; border-radius: var(--dg-radius-control); color: var(--dg-muted); font-size: 13px; font-weight: 500; }
.cw-nav-more > summary::-webkit-details-marker { display: none; }
.cw-nav-more > summary::after { content: '›'; margin-left: auto; color: var(--dg-faint); transition: transform .15s; }
.cw-nav-more[open] > summary::after { transform: rotate(90deg); }
.cw-nav-more > summary:hover { color: var(--dg-ink); }
.cw-nav-more a { display: block; padding: 7px 13px 7px 25px; border-radius: var(--dg-radius-control); color: var(--dg-muted); font-size: 12px; }
.cw-nav-more a:hover { background: var(--dg-surface); color: var(--dg-ink); }
.cw-nav-more a.active { color: var(--dg-primary); font-weight: 650; }
.cw-sidebar-bottom { margin-top: auto; padding: 28px 12px 0; font-size: 11px; color: var(--dg-faint); }
.cw-sidebar-bottom p { font-size: 11px; line-height: 1.7; }
.cw-legacy-link { display: flex; align-items: center; gap: 8px; color: var(--dg-muted); font-size: 12px; }
.cw-legacy-link:hover { color: var(--dg-primary); }
.cw-legacy-link svg { width: 16px; }
.cw-sidebar-label { font-size: 11px; color: var(--dg-faint); }
.cw-workspace { margin-left: 248px; width: calc(100% - 248px); min-width: 0; }
.cw-topbar { height: 72px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--dg-line); display: flex; justify-content: space-between; align-items: center; padding: 0 36px; gap: 20px; position: sticky; top: 0; z-index: 30; }
.cw-topbar-title, .cw-topbar-account { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.cw-topbar-crumb, .cw-topbar-divider { color: var(--dg-faint); }
.cw-topbar-title strong { font-weight: 600; color: var(--dg-ink); }
.cw-topbar-account { color: var(--dg-muted); position: relative; }
/* Zero-JS topbar account menu: the <details>/<summary> pair renders the button and the popover. */
.cw-account-menu { position: relative; }
.cw-account-menu > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; border: 1px solid transparent; border-radius: var(--dg-radius-control); color: var(--dg-body); background: #fff; }
.cw-account-menu > summary::-webkit-details-marker { display: none; }
.cw-account-menu > summary:hover { border-color: var(--dg-line); }
.cw-account-menu[open] > summary { border-color: var(--dg-line); box-shadow: var(--dg-shadow-card); }
.cw-account-caret { color: var(--dg-faint); font-size: 11px; transition: transform .15s; }
.cw-account-menu[open] > summary .cw-account-caret { transform: rotate(180deg); }
.cw-account-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 45; min-width: 200px; max-width: calc(100vw - 32px); padding: 6px; background: #fff; border: 1px solid var(--dg-line); border-radius: var(--dg-radius-card); box-shadow: 0 8px 24px rgba(16, 24, 40, .12); display: flex; flex-direction: column; }
.cw-account-pop a, .cw-account-pop .cw-account-logout { display: block; padding: 9px 12px; border: 0; border-radius: var(--dg-radius-control); background: none; color: var(--dg-body); font-size: 13px; text-align: left; cursor: pointer; }
.cw-account-pop a:hover, .cw-account-pop .cw-account-logout:hover { background: var(--dg-surface); color: var(--dg-ink); }
.cw-account-sep { height: 1px; margin: 5px 4px; background: var(--dg-line); }
.cw-account-pop .cw-account-danger { color: #D92D20; }
.cw-account-pop .cw-account-danger:hover { background: #FEF3F2; color: #D92D20; }
.cw-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--dg-primary-soft); color: var(--dg-primary); display: grid; place-items: center; font-weight: 600; }
.cw-text-button { border: 0; background: none; color: var(--dg-muted); padding: 6px; font-size: 12px; border-radius: 8px; }
.cw-text-button:hover { color: var(--dg-primary); background: var(--dg-primary-soft); }
.cw-menu-toggle { display: none; }
.cw-icon-button { width: 38px; height: 38px; border: 1px solid var(--dg-line); background: #fff; border-radius: var(--dg-radius-control); color: var(--dg-body); }
.cw-icon-button:hover { border-color: var(--dg-primary); color: var(--dg-primary); }
.cw-sidebar-close { display: none; }
.cw-nav-backdrop { display: none; }
.cw-skip-link { position: fixed; top: 8px; left: 268px; z-index: 100; background: #fff; border: 1px solid var(--dg-primary); color: var(--dg-primary); padding: 10px 18px; border-radius: var(--dg-radius-control); transform: translateY(-200%); }
.cw-skip-link:focus { transform: none; }
.cw-main { max-width: 1440px; margin: 0 auto; padding: 32px 36px 0; min-width: 0; }
.page-footer { border-top: 1px solid var(--dg-line); display: flex; justify-content: space-between; gap: 16px; padding: 24px 0; margin-top: 36px; color: var(--dg-faint); font-size: 11px; }
.page-footer-icp { margin: -24px 0 0; padding: 0 0 20px; color: var(--dg-faint); font-size: 11px; }
.upload-limit-error { color: #a84538; }

/* Standalone 404 page for browser navigation to unknown portal paths (NotFoundDocument). */
.nf-body { min-height: 100vh; display: grid; place-items: center; background: var(--dg-wash); color: var(--dg-body); }
.nf-main { text-align: center; padding: 48px 24px; }
.nf-code { font-size: 13px; font-weight: 700; letter-spacing: 3px; color: var(--dg-primary); margin: 0 0 10px; }
.nf-main h1 { font-size: 26px; color: var(--dg-ink); margin: 0 0 10px; }
.nf-lead { color: var(--dg-muted); font-size: 14px; margin: 0 0 26px; }
.nf-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ------------------------------------------------------------------ page scaffolding */
.page-intro { margin: 0 0 26px; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.page-intro > div:first-child { min-width: 0; }
.page-intro h1, .page-intro h2 { font-size: 28px; margin: 7px 0 9px; }
.page-intro p { color: var(--dg-muted); max-width: 760px; font-size: 14px; line-height: 1.8; }
.page-intro > .button, .page-intro > .page-actions { margin-top: 9px; flex-shrink: 0; }
.eyebrow { display: block; color: var(--dg-muted); font-size: 11px; font-weight: 650; letter-spacing: 1.2px; }
.page-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.page-heading > div:first-child { min-width: 0; }
.page-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 5px; }
.hero { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 32px 36px; border: 1px solid var(--dg-line); border-radius: var(--dg-radius-card); background: linear-gradient(135deg, var(--dg-primary-soft) 0%, #fff 70%); box-shadow: var(--dg-shadow-card); overflow: hidden; color: var(--dg-ink); margin-bottom: 22px; }
.hero .eyebrow { color: var(--dg-primary); }
.hero h1, .hero h2 { font-size: 28px; line-height: 1.35; letter-spacing: -.7px; margin: 9px 0; }
.hero p { max-width: 760px; color: var(--dg-body); font-size: 14px; line-height: 1.8; }
.hero .button { margin-top: 20px; }
.hero-emblem { display: none; }
.hero > .page-actions { flex-shrink: 0; align-self: flex-start; }
.hero > .page-actions .button { margin-top: 0; }
.button-white { background: var(--dg-primary) !important; color: #fff !important; }
.button-white:hover { background: var(--dg-primary-hover) !important; }

/* ------------------------------------------------------------------ buttons */
.button { display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 42px; border: 1px solid transparent; border-radius: var(--dg-radius-control); background: var(--dg-primary); color: #fff; font-size: 13px; font-weight: 600; padding: 10px 17px; white-space: nowrap; transition: background .15s, box-shadow .15s; }
.button:hover { background: var(--dg-primary-hover); }
.button svg { width: 16px; height: 16px; }
.button-quiet { background: #fff; color: var(--dg-body); border-color: var(--dg-line); box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.button-quiet:hover { background: var(--dg-surface); border-color: #c3cede; color: var(--dg-ink); }
.button-small { min-height: 36px; padding: 7px 12px; font-size: 12px; }
.button-wide { width: 100%; }
.text-link { font-size: 13px; font-weight: 500; }
.text-link:hover { text-decoration: underline; }
.text-link-quiet { color: var(--dg-muted); }
.button[aria-busy=true] { cursor: wait; }

/* ------------------------------------------------------------------ panels & headings */
.panel { padding: 26px 28px; background: var(--dg-card); border: 1px solid var(--dg-line); border-radius: var(--dg-radius-card); box-shadow: var(--dg-shadow-card); margin: 20px 0; min-width: 0; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; min-width: 0; }
.section-heading > div:first-child { min-width: 0; }
.section-heading h2 { font-size: 16px; font-weight: 650; }
.section-heading p { font-size: 13px; color: var(--dg-muted); margin-top: 5px; line-height: 1.7; }
.section-heading select { width: auto; max-width: 100%; }
.section-heading > .badge { flex-shrink: 1; }
.workspace-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.workspace-grid .panel { margin-top: 0; }
.workspace-main, .workspace-aside { min-width: 0; }
.workspace-aside > .panel { margin-top: 0; }
.form-section { padding: 24px 0; border-bottom: 1px solid var(--dg-line); }
.form-section:first-child { padding-top: 0; }
.form-section:last-of-type { border-bottom: 0; }
.form-section-heading { margin-bottom: 18px; }
.form-section-heading h2, .form-section-heading h3 { font-size: 15px; font-weight: 650; }
.form-section-heading p { font-size: 13px; color: var(--dg-muted); margin-top: 5px; }
.form-section > .form-grid { margin-top: 16px; }
.form-section-heading + .form-grid { margin-top: 0; }
.section-anchor-nav { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 0 20px; margin-bottom: 24px; border-bottom: 1px solid var(--dg-line); }
.section-anchor-nav a { padding: 7px 12px; border: 1px solid var(--dg-line); border-radius: var(--dg-radius-control); color: var(--dg-muted); font-size: 12px; }
.section-anchor-nav a:hover { color: var(--dg-primary); border-color: var(--dg-primary); background: var(--dg-primary-soft); }

/* ------------------------------------------------------------------ forms */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.span-all { grid-column: 1/-1; }
.form-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.form-actions select { width: auto; min-width: 130px; }
.form-actions .field-help { max-width: 540px; }
.form-actions.span-all { border-top: 1px solid var(--dg-line); padding-top: 20px; margin-top: 4px; }
label { display: flex; flex-direction: column; gap: 7px; color: var(--dg-ink); font-size: 13px; font-weight: 500; min-width: 0; }
input, textarea, select { width: 100%; min-width: 0; border: 1px solid #d0d8e5; border-radius: var(--dg-radius-control); padding: 10px 12px; background: #fff; color: var(--dg-body); font-size: 14px; line-height: 1.5; box-shadow: 0 1px 2px rgba(16, 24, 40, .03); }
input, select { min-height: 42px; }
input::placeholder, textarea::placeholder { color: var(--dg-faint); }
input:hover, textarea:hover, select:hover { border-color: #a5b7d1; }
input:focus, textarea:focus, select:focus { border-color: var(--dg-primary); outline: none; box-shadow: 0 0 0 3px var(--dg-primary-soft); }
/* Browsers paint autofilled fields (usually the password box) with their own tinted
   background; force the same neutral white as a manual entry so both fields look alike. */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill, select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
  -webkit-text-fill-color: var(--dg-body);
  caret-color: var(--dg-body);
  transition: background-color 999999s ease-in-out 0s;
}
textarea { resize: vertical; line-height: 1.75; min-height: 100px; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { font-size: 13px; color: var(--dg-ink); font-weight: 600; margin-bottom: 12px; }
.field-help { font-size: 12px; color: var(--dg-muted); font-weight: 400; line-height: 1.7; }
.check { display: flex; flex-direction: row; align-items: flex-start; gap: 9px; font-weight: 400; font-size: 13px; color: var(--dg-body); }
.check input { width: 16px; height: 16px; min-height: 0; flex: 0 0 16px; margin: 3px 0 0; accent-color: var(--dg-primary); }
.checkbox-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 10px; }
.platform-option { padding: 12px; border: 1px solid var(--dg-line); border-radius: var(--dg-radius-control); background: var(--dg-surface); }
.compact-form { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; padding-top: 18px; margin-top: 18px; border-top: 1px solid var(--dg-line); }
.compact-form label { flex: 1; min-width: 180px; }
.compact-form .check { flex-basis: 100%; }
.password-field { display: flex; position: relative; }
.password-field input { padding-right: 63px; }
.password-toggle { position: absolute; right: 4px; top: 4px; height: 34px; border: 0; background: transparent; color: var(--dg-muted); font-size: 12px; padding: 0 10px; border-radius: 8px; }
.password-toggle:hover { color: var(--dg-primary); }
.file-picker { position: relative; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border: 1px dashed #bbc9de; border-radius: var(--dg-radius-control); padding: 18px; background: var(--dg-surface); cursor: pointer; }
.file-picker:focus-within { outline: 3px solid var(--dg-primary-soft); border-color: var(--dg-primary); }
.file-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.file-names { font-size: 12px; color: var(--dg-muted); overflow-wrap: anywhere; }
.file-input:disabled { cursor: not-allowed; }
.disclosure > summary, .channel-setup > summary { cursor: pointer; color: var(--dg-ink); font-size: 14px; font-weight: 600; list-style: none; display: flex; gap: 14px; justify-content: space-between; align-items: center; }
.disclosure > summary::after, .channel-setup > summary::after { content: '＋'; font-size: 20px; font-weight: 400; color: var(--dg-faint); }
.disclosure[open] > summary::after, .channel-setup[open] > summary::after { content: '−'; }
.disclosure[open] > summary, .channel-setup[open] > summary { margin-bottom: 20px; }
.disclosure > summary small { display: block; font-weight: 400; font-size: 12px; color: var(--dg-muted); margin-top: 4px; }
.disclosure .form-grid { margin-top: 18px; }

/* Operations console: per-company 用量与计划 panel (client.ts usageDetailsPanel). */
.usage-details { margin-top: 18px; }
.usage-details .order-details { margin-top: 12px; margin-bottom: 2px; }
.usage-details .order-details strong { font-variant-numeric: tabular-nums; }
.usage-details .project-platforms { margin-top: 10px; }

/* ------------------------------------------------------------------ stat cards & badges */
.stats-grid, .metrics-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 20px 0; }
.metrics-grid-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.metrics-grid-five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.stat-card { border: 1px solid var(--dg-line); background: var(--dg-card); box-shadow: var(--dg-shadow-card); padding: 20px 22px; border-radius: var(--dg-radius-card); display: flex; flex-direction: column; min-width: 0; }
.stat-card > span { font-size: 13px; color: var(--dg-muted); }
.stat-card > strong { font-size: 32px; font-weight: 650; letter-spacing: -.7px; line-height: 1.35; margin: 8px 0; color: var(--dg-ink); }
.stat-card > small { font-size: 12px; color: var(--dg-muted); line-height: 1.6; }
.panel .stats-grid, .panel .metrics-grid { margin: 0; }
.stat-warning { color: #a16415 !important; }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 6px; background: var(--dg-surface); color: var(--dg-muted); font-size: 11px; font-weight: 500; white-space: nowrap; }
.badge-success { background: var(--dg-success-soft); color: #23774f; }
.badge-pending { background: #fff6e7; color: #946322; }
.balance-pill { display: inline-block; background: var(--dg-primary-soft); color: var(--dg-primary); padding: 6px 12px; border-radius: 999px; font-size: 12px; }
.balance-pill strong { margin-left: 5px; }

/* ------------------------------------------------------------------ notices & empty states */
.notice, .inline-note { padding: 13px 16px; border: 1px solid #cfe0ff; border-radius: var(--dg-radius-control); background: var(--dg-primary-soft); color: #2b4a80; font-size: 13px; margin: 0 0 20px; overflow-wrap: anywhere; line-height: 1.7; }
.notice { position: relative; padding-right: 42px; }
.notice-error { background: #fff4f3; border-color: #f4d0ca; color: #a84538; }
.notice-success { background: var(--dg-success-soft); border-color: #cce8d7; color: #28704a; }
.notice-dismiss { position: absolute; right: 8px; top: 8px; background: transparent; border: 0; color: inherit; width: 28px; height: 28px; font-size: 20px; border-radius: 8px; }
.inline-note { display: flex; gap: 10px; margin: 18px 0; }
.access-notice { padding: 20px 22px; border: 1px solid #eadcc0; border-radius: var(--dg-radius-card); background: #fffaf1; color: #85612b; margin: 18px 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 20px; align-items: center; }
.access-notice strong { font-size: 14px; }
.access-notice p { font-size: 13px; color: #8a7048; margin: 0; }
.access-notice > .button { grid-column: 2; grid-row: 1/4; align-self: center; }
.access-notice > .support-contact { grid-column: 1; }
.support-contact { display: block; margin-top: 6px; }
.empty-state { padding: 36px 20px; grid-column: 1/-1; width: 100%; color: var(--dg-muted); text-align: center; font-size: 13px; }
.empty-symbol { display: none; }
.muted { color: var(--dg-muted); }
.quick-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.quick-card { display: flex; flex-direction: column; align-items: flex-start; padding: 20px; border: 1px solid var(--dg-line); border-radius: var(--dg-radius-card); background: var(--dg-card); color: var(--dg-ink); transition: box-shadow .2s, transform .2s; }
.quick-card:hover { box-shadow: var(--dg-shadow-card-hover); transform: translateY(-2px); }
.quick-card svg { color: var(--dg-primary); margin-bottom: 14px; }
.quick-card strong { font-size: 14px; }
.quick-card > span, .quick-card > small { color: var(--dg-muted); font-size: 12px; margin-top: 6px; }

/* ------------------------------------------------------------------ order & project cards */
.order-list, .project-list { display: grid; gap: 12px; }
.order-card, .project-card, .format-card { border: 1px solid var(--dg-line); border-radius: var(--dg-radius-card); padding: 18px 20px; background: var(--dg-card); min-width: 0; }
.card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.card-top h3 { font-size: 15px; overflow-wrap: anywhere; }
.order-number { font-family: ui-monospace, Consolas, monospace; font-size: 11px; color: var(--dg-faint); margin-top: 4px; overflow-wrap: anywhere; }
.order-details { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 16px; font-size: 12px; color: var(--dg-muted); }
.order-details strong { color: var(--dg-ink); font-weight: 600; }
.order-hint { font-size: 12px; color: var(--dg-muted); margin-top: 12px; }
.order-main { display: grid; gap: 6px; min-width: 0; }
.order-main > .muted { font-size: 12px; line-height: 1.8; }
.order-card strong + .muted { margin-left: 0; }
.order-card > .muted { display: block; font-size: 12px; margin-top: 5px; }
.project-brief { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--dg-muted); font-size: 13px; margin-top: 14px; }
.project-platforms { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.project-platforms span { font-size: 12px; background: var(--dg-surface); border-radius: 6px; padding: 4px 9px; color: var(--dg-muted); }
.project-date { font-size: 11px; color: var(--dg-muted); margin-top: 12px; }
.projects-heading { margin: 28px 0 16px; }
.delivery-list { border-top: 1px solid var(--dg-line); padding-top: 16px; margin-top: 16px; display: grid; gap: 14px; }
.delivery-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: 13px; }
.delivery-row > span { display: flex; flex-direction: column; gap: 4px; }
.delivery-row small { color: var(--dg-muted); font-size: 12px; }
.delivery-form { border-top: 1px solid var(--dg-line); padding-top: 20px; margin-top: 20px; }
.delivery-form .form-grid { grid-template-columns: 1fr 2fr; }

/* ------------------------------------------------------------------ plans & formats */
.plans-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.plan-card { position: relative; border: 1px solid var(--dg-line); background: var(--dg-card); box-shadow: var(--dg-shadow-card); border-radius: var(--dg-radius-card); padding: 26px; display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s; }
.plan-card:hover { box-shadow: var(--dg-shadow-card-hover); transform: translateY(-2px); }
.plan-card h3 { font-size: 18px; }
.plan-description { color: var(--dg-muted); font-size: 13px; margin-top: 9px; min-height: 44px; }
.plan-price { font-size: 36px; letter-spacing: -1px; font-weight: 700; color: var(--dg-ink); margin: 22px 0 16px; }
.plan-price small { font-size: 13px; font-weight: 400; color: var(--dg-faint); margin-left: 6px; letter-spacing: 0; }
.plan-credit { font-size: 13px; background: var(--dg-primary-soft); color: var(--dg-primary); padding: 10px 12px; border-radius: var(--dg-radius-control); }
.plan-features { list-style: none; margin: 20px 0 24px; padding: 0; flex: 1; font-size: 13px; color: var(--dg-muted); }
.plan-features li { display: flex; align-items: center; gap: 8px; margin: 10px 0; }
.feature-check { color: var(--dg-success); }
.plan-card .button { width: 100%; }
.plan-badge { position: absolute; right: 24px; top: 28px; font-size: 11px; color: var(--dg-faint); }
.format-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.format-card h3 { display: flex; align-items: center; gap: 10px; }
.platform-initial { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--dg-radius-control); background: var(--dg-primary-soft); color: var(--dg-primary); }
.format-specs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.format-specs span { font-size: 12px; border: 1px solid var(--dg-line); border-radius: 6px; padding: 4px 8px; color: var(--dg-muted); }
.format-notes { padding-left: 18px; color: var(--dg-muted); font-size: 13px; margin: 18px 0; }
.format-context, .format-date { font-size: 12px; color: var(--dg-muted); margin-top: 12px; }
.source-links { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; }

/* ------------------------------------------------------------------ auth pages */
.auth-layout { min-height: 100vh; display: grid; grid-template-columns: 44% 56%; background: #fff; }
.auth-story { padding: 44px 52px; background: linear-gradient(155deg, #2b85ff 0%, var(--dg-primary) 40%, var(--dg-primary-active) 100%); color: #fff; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.auth-story::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 50% at 85% 8%, rgba(255, 255, 255, .16), transparent 70%); pointer-events: none; }
.brand-light { padding: 0; color: #fff; }
.brand-light small { color: rgba(255, 255, 255, .65); }
.auth-story > div { z-index: 1; }
.auth-story h1, .auth-story h2 { font-size: clamp(32px, 3.2vw, 48px); line-height: 1.5; letter-spacing: -1px; margin: 20px 0; color: #fff; }
.auth-story p { font-size: 14px; line-height: 2; color: rgba(255, 255, 255, .75); }
.auth-story .eyebrow { color: #cfe4ff; }
.story-tags { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 28px; }
.story-tags span { border: 1px solid rgba(255, 255, 255, .28); padding: 6px 12px; border-radius: 999px; font-size: 12px; color: rgba(255, 255, 255, .85); }
.story-footer { font-size: 11px !important; color: rgba(255, 255, 255, .5) !important; }
.auth-main { display: grid; place-items: center; padding: 48px; }
.auth-card { width: 100%; max-width: 380px; }
.auth-card h1, .auth-card h2 { font-size: 28px; margin: 8px 0 12px; }
.auth-card > .muted { font-size: 14px; line-height: 1.8; margin-bottom: 28px; }
.auth-card form { display: grid; gap: 20px; }
.auth-card form > .button { margin-top: 4px; }
.auth-switch { text-align: center; color: var(--dg-muted); font-size: 13px; margin-top: 20px; line-height: 1.8; }
.auth-switch a { margin-left: 6px; }
.auth-forgot { margin-top: 16px; border-top: 1px solid var(--dg-line); padding-top: 14px; }
.auth-forgot summary { list-style: none; cursor: pointer; color: var(--dg-muted); font-size: 13px; }
.auth-forgot summary::-webkit-details-marker { display: none; }
.auth-forgot summary:hover { color: var(--dg-primary); }
.auth-forgot[open] summary { margin-bottom: 8px; color: var(--dg-ink); }
.auth-forgot p { font-size: 12px; color: var(--dg-muted); line-height: 1.8; }
.back-link { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--dg-muted); font-size: 12px; margin-top: 30px; }
.back-link svg { width: 14px; }

/* ------------------------------------------------------------------ dashboard progress, goal & activity */
/* Slim greeting bar: one line of identity plus the membership pill and the single primary action. */
.dash-greeting { display: flex; justify-content: space-between; align-items: center; gap: 18px 24px; flex-wrap: wrap; margin: 2px 0 20px; }
.dash-greeting-text { display: grid; gap: 3px; min-width: 0; }
.dash-greeting-text strong { font-size: 18px; letter-spacing: -.3px; color: var(--dg-ink); }
.dash-greeting-text span { font-size: 13px; color: var(--dg-muted); }
.dash-greeting-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.dash-pill { display: inline-flex; align-items: center; min-height: 32px; padding: 5px 13px; border: 1px solid var(--dg-line); border-radius: 999px; background: #fff; color: var(--dg-muted); font-size: 12px; white-space: nowrap; }
.dash-pill:hover { border-color: var(--dg-primary); color: var(--dg-primary); }
/* Horizontal service-progress stepper: dot + label per step, the summary line sits below.
   Deliberately slim — in the running dashboard it is a status strip, not the main event. */
.dash-stepper { list-style: none; margin: 2px 0 0; padding: 0; display: flex; align-items: flex-start; }
.dash-stepper li { flex: 1; min-width: 0; display: grid; justify-items: center; gap: 5px; position: relative; text-align: center; padding: 0 4px; }
.dash-stepper li::before { content: ""; position: absolute; top: 10px; left: calc(-50% + 14px); width: calc(100% - 28px); height: 2px; background: var(--dg-line); }
.dash-stepper li:first-child::before { display: none; }
.dash-step-done::before, .dash-step-current::before { background: var(--dg-success); }
.dash-step-current::before { background: var(--dg-line); }
.dash-step-dot { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--dg-surface); border: 1px solid var(--dg-line); color: var(--dg-faint); font-size: 11px; font-weight: 650; }
.dash-step-label { font-size: 11px; color: var(--dg-muted); line-height: 1.5; }
.dash-step-done .dash-step-dot { background: var(--dg-success); border-color: var(--dg-success); color: #fff; }
.dash-step-done .dash-step-label { color: #23774f; }
.dash-step-current .dash-step-dot { background: var(--dg-primary); border-color: var(--dg-primary); color: #fff; box-shadow: 0 0 0 3px var(--dg-primary-soft); }
.dash-step-current .dash-step-label { color: var(--dg-ink); font-weight: 600; }
.dash-stepper + .cw-progress-note { margin-top: 10px; }
.customer-progress { padding: 16px 18px; }
.customer-progress .section-heading { margin-bottom: 10px; }
.customer-progress .section-heading p { display: none; }
/* Phase-driven dashboard: the server renders both forms and data-dash-phase picks one, so switching
   never re-renders content — product-client.ts only flips the attribute once /progress arrives. */
.dash[data-dash-phase='onboarding'] .dash-running { display: none; }
.dash[data-dash-phase='running'] .dash-onboarding { display: none; }
/* Metric strip: one compact row of small labeled numbers; items without data are not rendered at all. */
.dash-metrics { display: flex; flex-wrap: wrap; gap: 10px 40px; align-items: baseline; margin: 2px 0 18px; padding: 12px 18px; border: 1px solid var(--dg-line); border-radius: var(--dg-radius-card); background: var(--dg-card); box-shadow: 0 1px 2px rgba(16, 24, 40, .05); }
.dash-metrics[hidden], .dash-metric[hidden] { display: none; }
.dash-metric { display: grid; gap: 1px; min-width: 0; }
.dash-metric-label { font-size: 12px; color: var(--dg-muted); }
.dash-metric-value { font-size: 20px; font-weight: 650; letter-spacing: -.4px; line-height: 1.4; color: var(--dg-ink); font-variant-numeric: tabular-nums; }
.dash-metric-hint { font-size: 11px; color: var(--dg-muted); }
/* Onboarding form: the checklist card is the whole page until the three free setup pillars are done. */
.onboarding-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.onboarding-step { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--dg-line); border-radius: var(--dg-radius-control); background: var(--dg-card); }
.onboarding-step-main { flex: 1; display: grid; gap: 2px; min-width: 0; }
.onboarding-step-title { font-size: 13px; font-weight: 600; color: var(--dg-ink); }
.onboarding-step-why { font-size: 12px; color: var(--dg-muted); }
.onboarding-step-next { border-color: var(--dg-primary); background: var(--dg-primary-soft); box-shadow: 0 2px 10px rgba(22, 119, 255, .12); }
.onboarding-step-next .geo-step-mark { background: var(--dg-primary); color: #fff; }
.onboarding-step-next .onboarding-step-title { color: var(--dg-primary); }
.onboarding-done { margin-top: 12px; font-size: 12px; color: var(--dg-muted); }
.onboarding-done[hidden], .onboarding-membership[hidden] { display: none; }
.onboarding-done summary { cursor: pointer; }
.onboarding-done-list { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: 12px; color: var(--dg-muted); }
.onboarding-membership { margin: 16px 0 0; padding: 12px 14px; border: 1px solid #dce5fa; border-radius: var(--dg-radius-control); background: var(--dg-primary-soft); font-size: 13px; color: var(--dg-body); }
/* Growth: the goal and the opportunities share one panel, each folded behind its own disclosure. */
.dash-growth-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.dash-growth-item { border: 1px solid var(--dg-line); border-radius: var(--dg-radius-control); background: var(--dg-card); }
.dash-growth-item[hidden] { display: none; }
.dash-growth-item > summary { display: flex; align-items: center; gap: 8px; padding: 12px 14px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--dg-ink); list-style: none; }
.dash-growth-item > summary::-webkit-details-marker { display: none; }
.dash-growth-item > summary::before { content: "▸"; color: var(--dg-muted); font-size: 11px; }
.dash-growth-item[open] > summary::before { content: "▾"; }
.dash-growth-title { flex: 1; }
.dash-growth-body { padding: 4px 14px 14px; border-top: 1px solid var(--dg-line); display: grid; gap: 4px; }
.dash-growth-lead { margin: 10px 0 6px; font-size: 12px; color: var(--dg-muted); line-height: 1.7; }
.dash-growth-actions { margin: 4px 0 8px; }
.dash-growth .section-heading { margin-bottom: 14px; }
.cw-progress-note { margin: 0 0 16px; font-size: 13px; color: var(--dg-body); }
.cw-progress-note strong { color: var(--dg-primary); }
.geo-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.geo-step { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--dg-line); border-radius: var(--dg-radius-control); color: var(--dg-muted); font-size: 13px; background: var(--dg-card); }
.geo-step-mark { width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%; display: grid; place-items: center; background: var(--dg-surface); color: var(--dg-faint); font-size: 11px; font-weight: 650; }
.geo-step-label { flex: 1; }
.geo-step-done { color: #23774f; background: var(--dg-success-soft); border-color: #d6efe3; }
.geo-step-done .geo-step-mark { background: var(--dg-success); color: #fff; }
.geo-step-next { border-color: var(--dg-primary); color: var(--dg-ink); background: var(--dg-primary-soft); box-shadow: 0 2px 10px rgba(22, 119, 255, .12); }
.geo-step-next .geo-step-mark { background: var(--dg-primary); color: #fff; }
.goal-meter { position: relative; height: 12px; border-radius: 8px; background: var(--dg-surface); margin: 6px 0 10px; overflow: visible; }
.goal-meter-fill { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--dg-primary), var(--dg-primary-hover)); min-width: 2px; transition: width .3s; }
.goal-meter-mark { position: absolute; top: -4px; width: 2px; height: 20px; background: var(--dg-primary-active); border-radius: 2px; }
.goal-legend { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--dg-muted); margin-bottom: 16px; }
.goal-questions { gap: 8px; }
.goal-question { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border: 1px solid var(--dg-line); border-radius: var(--dg-radius-control); font-size: 13px; border-width: 0 0 1px; border-radius: 0; }
.goal-question strong { font-weight: 600; color: var(--dg-ink); }
.goal-edit { margin-top: 16px; }
.goal-edit summary { cursor: pointer; color: var(--dg-primary); font-size: 12px; }
.agent-events { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-height: 420px; overflow-y: auto; }
.agent-event { border-left: 3px solid #c9d6ea; padding: 4px 0 4px 12px; }
.agent-event p { font-size: 13px; color: var(--dg-body); margin-top: 2px; }
.agent-event-success { border-color: var(--dg-success); }
.agent-event-warning { border-color: #d9a13b; }
.team-member { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
#team-invite-result input { margin: 8px 0; }

/* ------------------------------------------------------------------ geo bars, keywords & responses */
.geo-bars { display: grid; gap: 16px; margin-top: 12px; }
.geo-bar-group h3 { font-size: 14px; margin: 0 0 8px; }
.geo-bar { display: grid; grid-template-columns: minmax(90px, 180px) 1fr 48px; align-items: center; gap: 10px; margin: 6px 0; font-size: 13px; }
.geo-bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.geo-bar-fill { display: block; height: 10px; border-radius: 6px; background: #8aa4ff; min-width: 2px; }
.geo-bar-own .geo-bar-fill { background: var(--dg-success); }
.geo-bar b { text-align: right; }
#login-qrcode img { display: block; margin: 8px 0; border-radius: var(--dg-radius-control); }
.keyword-card-header, .response-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.keyword-card-header > strong, .response-card-header > strong { font-size: 14px; color: var(--dg-ink); font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.keyword-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 18px 0 0; padding: 16px 0; border-top: 1px solid var(--dg-line); border-bottom: 1px solid var(--dg-line); }
.keyword-metrics dt { font-size: 12px; color: var(--dg-muted); margin-bottom: 5px; }
.keyword-metrics dd { margin: 0; font-size: 18px; font-weight: 600; color: var(--dg-ink); }
.keyword-card-footer { display: grid; gap: 7px; margin-top: 12px; }
.keyword-rivals { color: var(--dg-muted); font-size: 12px; line-height: 1.7; }
.response-meta { color: var(--dg-faint); font-size: 11px; margin-top: 7px; }
.response-excerpt { font-size: 13px; color: var(--dg-body); line-height: 1.9; margin-top: 14px; }
.response-source-block { border-top: 1px solid var(--dg-line); padding-top: 12px; margin-top: 14px; }
.response-sources { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 5px; font-size: 12px; }
.response-sources a { font-size: 12px; overflow-wrap: anywhere; }
.response-card .badge { flex-shrink: 0; }
.keyword-card-header .badge { flex-shrink: 0; }

/* ------------------------------------------------------------------ content pipeline & articles */
.pipeline-stages { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.pipeline-stage { padding: 12px 14px; border: 1px solid var(--dg-line); border-radius: var(--dg-radius-control); display: grid; gap: 4px; align-content: start; }
.pipeline-stage strong { font-size: 12px; color: var(--dg-body); }
.pipeline-stage .badge { justify-self: start; font-size: 11px; }
.pipeline-stage[data-status=done] .badge, .pipeline-stage[data-status=passed] .badge, .pipeline-stage[data-status=published] .badge, .pipeline-stage[data-status=active] .badge { color: #218564; background: var(--dg-success-soft); }
.pipeline-stage[data-status=pending] .badge, .pipeline-stage[data-status=waiting] .badge, .pipeline-stage[data-status=sending] .badge, .pipeline-stage[data-status=running] .badge { color: #af802e; background: #fff7e9; }
.pipeline-stage[data-status=failed], .pipeline-stage[data-status=blocked], .pipeline-stage[data-status=error] { border-color: #f4cece; background: #fffafa; }
.pipeline-stage[data-status=failed] .badge, .pipeline-stage[data-status=blocked] .badge, .pipeline-stage[data-status=error] .badge { color: #ad4b4b; background: #fff3f3; }
.pipeline-setup { display: grid; gap: 4px; margin: 16px 0 0; }
.article-stage-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
.article-stage-grid > div { padding: 10px 12px; background: var(--dg-surface); border-radius: var(--dg-radius-control); display: grid; gap: 2px; }
.article-stage-grid strong { font-size: 12px; color: var(--dg-body); }
.article-outcomes { margin-top: 14px; border-top: 1px solid var(--dg-line); padding-top: 12px; display: grid; gap: 8px; }
.article-outcomes h4 { margin: 0; font-size: 12px; color: var(--dg-body); }
.pipeline-delivery { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; }
.pipeline-delivery[data-delivery-status=failed] .badge { color: #ad4b4b; background: #fff3f3; }
.article-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; }
.article-metrics div { background: var(--dg-surface); border-radius: var(--dg-radius-control); padding: 8px 10px; }
.article-metrics dt { font-size: 10px; color: var(--dg-muted); }
.article-metrics dd { margin: 0; font-size: 15px; font-weight: 650; color: var(--dg-body); }
.article-citations { margin: 0; padding-left: 18px; font-size: 11px; color: var(--dg-muted); display: grid; gap: 4px; }
.article-citations a { margin-left: 8px; }
.article-preview { margin: 16px 0; border-top: 1px solid var(--dg-line); padding-top: 12px; }
.article-preview summary { cursor: pointer; color: var(--dg-primary); font-size: 12px; padding: 6px 0; }
.article-preview-text { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: 14px; line-height: 1.9; color: var(--dg-body); max-height: 65vh; overflow-y: auto; background: var(--dg-surface); border: 1px solid var(--dg-line); border-radius: var(--dg-radius-control); padding: 16px; margin-top: 10px; }
#content-list .order-card > strong { display: block; line-height: 1.6; }

/* ------------------------------------------------------------------ question ideas & opportunities */
.question-ideas { display: grid; gap: 8px; margin: 16px 0 14px; }
.question-idea { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; padding: 10px 14px; border: 1px solid var(--dg-line); border-radius: var(--dg-radius-control); cursor: pointer; }
.question-idea input { width: 16px; height: 16px; min-height: 16px; flex: 0 0 16px; margin-top: 3px; accent-color: var(--dg-primary); }
.question-idea-body { display: grid; gap: 2px; }
.question-idea-body strong { font-size: 13px; font-weight: 600; color: var(--dg-ink); }
.question-idea-high { border-color: #c9dafc; background: var(--dg-primary-soft); }
.opportunity-summary { margin: 0 0 14px; padding-left: 18px; font-size: 13px; color: var(--dg-body); display: grid; gap: 4px; }
.opportunity-list { display: grid; gap: 10px; }
.opportunity { border: 1px solid var(--dg-line); border-radius: var(--dg-radius-control); padding: 12px 14px; display: grid; gap: 6px; }
.opportunity p { font-size: 13px; color: var(--dg-body); }
.opportunity-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.opportunity-head strong { font-size: 13px; color: var(--dg-ink); }

/* ------------------------------------------------------------------ media workflow & publishing */
.media-workflow { display: grid; gap: 20px; }
.workflow-step { scroll-margin-top: 24px; }
.channel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.channel-grid > .panel { margin: 0; }
.channel-grid.channel-selector { grid-template-columns: 1fr; gap: 14px; margin-bottom: 20px; }
.channel-card h2 { font-size: 15px; margin-bottom: 12px; }
.channel-setup { margin: 0 !important; }
.channel-setup[open] { border-color: #bacaf0; }
.channel-setup summary strong { display: block; font-size: 14px; }
.channel-setup summary small { display: block; font-size: 12px; font-weight: 400; color: var(--dg-muted); margin-top: 3px; }
.channel-setup summary > span[aria-hidden] { display: none; }
.channel-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px !important; max-width: 760px; }
.channel-form .button { justify-self: start; align-self: end; }
.channel-steps { margin: 0 0 14px; padding-left: 18px; font-size: 12px; color: var(--dg-muted); display: grid; gap: 4px; line-height: 1.8; max-width: 840px; }
.channel-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.channel-note { margin: 18px 0 0; }
.publishing-compose-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.publishing-flow-guide h2 { font-size: 15px; margin-bottom: 12px; }
.publishing-flow-guide ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.publishing-flow-guide li { display: grid; gap: 3px; font-size: 13px; }
.publishing-flow-guide li span { color: var(--dg-muted); font-size: 12px; line-height: 1.7; }
.publishing-flow-guide .text-link { display: inline-block; margin-top: 16px; }
.publishing-flow-guide > .field-help { margin-top: 12px; }
.publishing-accounts { display: grid; gap: 10px; }
.publishing-flow-note { margin: 12px 0 0; }
#sync-status { white-space: normal; overflow-wrap: anywhere; max-width: 420px; }

/* Publish helper: per-article sync to 知乎、百家号… */
.sync-panel { margin-top: 8px; border-top: 1px dashed var(--dg-line); padding-top: 8px; }
.sync-panel > summary { cursor: pointer; font-weight: 600; }
.sync-panel .stack { display: grid; gap: 8px; margin-top: 8px; }
.sync-choices { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.sync-choice { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.sync-choice input { width: 16px; min-height: 16px; accent-color: var(--dg-primary); }
.sync-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 4px 0; }

/* Shorts: vertical preview beside why it was picked and its post copy */
.clip-card { display: grid; grid-template-columns: minmax(140px, 200px) 1fr; gap: 16px; padding: 12px 0; border-top: 1px solid var(--dg-line); }
.clip-video { width: 100%; aspect-ratio: 9 / 16; background: #000; border-radius: var(--dg-radius-control); object-fit: contain; }
.clip-info { display: grid; gap: 6px; align-content: start; min-width: 0; }
.clip-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.clip-description { white-space: pre-wrap; }
.clip-tags { color: var(--dg-primary); }
.clip-publish > summary { cursor: pointer; font-weight: 600; }

/* Payment (member checkout) */
.pay-panel { display: grid; gap: 16px; border-top: 1px solid var(--dg-line); padding-top: 18px; margin-top: 18px; }
.pay-methods { display: flex; flex-wrap: wrap; gap: 12px; }
.pay-alipay { background: #1671db; }
.pay-wxpay { background: #16855e; }
.pay-result { display: grid; gap: 12px; justify-items: start; }
.pay-result img { max-width: 100%; border: 1px solid var(--dg-line); border-radius: var(--dg-radius-control); padding: 8px; }
.pay-panel-open { background: var(--dg-primary-soft); border: 1px solid #dce5fa; padding: 18px; border-radius: var(--dg-radius-control); }

/* ------------------------------------------------------------------ customer activity & misc states */
.customer-activity { border-top: 1px solid var(--dg-line); padding-top: 16px; margin-top: 20px; }
.customer-activity summary { font-size: 13px; font-weight: 500; color: var(--dg-muted); cursor: pointer; }
.customer-activity[open] .agent-events { margin-top: 16px; max-height: 280px; }
.draft-unsaved { color: #a16415; }
.panel-narrow { max-width: 760px; }
.form-single { grid-template-columns: 1fr; max-width: 560px; }
.goal-questions .goal-question:last-child { border-bottom: 0; }

/* ------------------------------------------------------------------ 汇报大屏 (dark data screen) */
body[data-view='/customer/screen'] { background: #0d172a; color: #e7edf8; }
body[data-view='/customer/screen'] .cw-sidebar, body[data-view='/customer/screen'] .cw-topbar, body[data-view='/customer/screen'] .page-footer { display: none; }
body[data-view='/customer/screen'] .cw-workspace { margin: 0; width: 100%; }
body[data-view='/customer/screen'] .cw-main { max-width: none; padding: 0; }
body[data-view='/customer/screen'] #notice { margin: 20px; }
.report-screen { padding: 30px 42px 20px; min-height: 100vh; background: radial-gradient(ellipse at 80% 0, #1c305344, transparent 55%), #0d172a; }
.screen-header { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.screen-brand { display: flex; align-items: center; gap: 15px; }
.screen-mark { width: 44px; height: 44px; display: grid; place-items: center; background: #67d4c6; color: #112e36; border-radius: 12px; font-size: 28px; font-weight: 750; }
.screen-brand p { color: #8faccb; font-size: 12px; letter-spacing: 1.5px; }
.screen-brand h1 { font-size: 26px; letter-spacing: .3px; margin-top: 4px; color: #edf4ff; }
.screen-controls { display: flex; align-items: center; gap: 12px; }
.screen-controls > span { font-size: 13px; color: #8faccb; margin-right: 10px; }
.screen-button { padding: 8px 13px; font-size: 12px; border: 1px solid #32445e; border-radius: 7px; background: #17243b; color: #bed0e6; }
.screen-button:hover { background: #243650; color: #fff; }
.screen-context { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin: 22px 0; color: #91a7c3; font-size: 12px; }
.screen-context > div { display: flex; align-items: center; gap: 14px; }
.screen-text-button { font-size: 12px; color: #72cfc7; border: 0; background: none; padding: 4px; }
.screen-message { padding: 12px 16px; background: #332e28; border: 1px solid #64543a; border-radius: 8px; color: #f0ce94; font-size: 13px; margin-bottom: 20px; }
.screen-message a { margin-left: 14px; color: #a1e7dc; }
.screen-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-bottom: 20px; }
.screen-kpis article { border: 1px solid #2a3a51; background: #142238; border-radius: 12px; padding: 22px 26px; display: flex; flex-direction: column; }
.screen-kpis article > span { font-size: 14px; color: #9eb2ce; }
.screen-kpis strong { font-size: clamp(36px, 3.6vw, 64px); line-height: 1.2; letter-spacing: -1.5px; color: #e9f5ff; font-variant-numeric: tabular-nums; margin: 12px 0 8px; font-weight: 600; }
.screen-kpis article:first-child strong { color: #78dfca; }
.screen-kpis small { font-size: 12px; color: #819bbd; }
.screen-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px; align-items: stretch; }
.screen-panel { border: 1px solid #263851; background: #121f33; border-radius: 12px; padding: 24px 26px; min-width: 0; }
.screen-panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 22px; }
.screen-panel-heading h2 { font-size: 16px; font-weight: 550; color: #dce8fa; letter-spacing: .5px; }
.screen-panel-heading span, .screen-panel-heading a { font-size: 12px; color: #839bbc; }
.screen-panel-heading a:hover { color: #78dfca; }
.screen-voice { display: grid; gap: 18px; }
.screen-bar-title { display: flex; justify-content: space-between; gap: 20px; font-size: 13px; margin-bottom: 8px; color: #b2c4dc; }
.screen-bar-title strong { font-weight: 500; }
.screen-bar-track { height: 8px; background: #1e314c; border-radius: 4px; overflow: hidden; }
.screen-bar-track span { display: block; height: 100%; border-radius: 4px; background: #6589c8; }
.screen-bar-own .screen-bar-track span { background: #70d7c3; }
.screen-bar-own .screen-bar-title { color: #84e0cd; }
.screen-keyword { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid #26364c; padding: 12px 0; }
.screen-keyword:first-child { padding-top: 0; }
.screen-keyword:last-child { border: 0; padding-bottom: 0; }
.screen-keyword strong { display: block; font-size: 14px; color: #c6d7ec; font-weight: 500; }
.screen-keyword small { display: block; font-size: 12px; color: #7e99ba; margin-top: 3px; }
.screen-keyword b { font-size: 18px; color: #79d9c8; font-weight: 500; white-space: nowrap; }
.screen-keyword > div { min-width: 0; }
.screen-actions { list-style: none; display: grid; gap: 18px; margin: 0; padding: 0; }
.screen-actions li { display: flex; align-items: flex-start; gap: 14px; font-size: 14px; }
.screen-actions li > span { flex: 0 0 25px; width: 25px; height: 25px; background: #233551; color: #7eb3d0; display: grid; place-items: center; border-radius: 6px; font-size: 12px; }
.screen-actions a { color: #c4d5eb; }
.screen-actions a:hover { color: #7ee3ce; }
.screen-progress { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; }
.screen-step { display: flex; align-items: center; gap: 9px; color: #8198b7; font-size: 12px; }
.screen-step.is-done { color: #94c9c0; }
.screen-step > span:first-child { color: #6d8eb5; }
.screen-step.is-done > span:first-child { color: #78dfca; }
.screen-resources { display: flex; flex-wrap: wrap; gap: 14px 24px; border-top: 1px solid #26364c; padding-top: 18px; margin-top: 20px; font-size: 12px; color: #849ebf; }
.screen-resources b { color: #b7cde5; font-size: 14px; font-weight: 500; margin-left: 6px; }
.screen-empty { color: #7f99ba; font-size: 14px; line-height: 1.9; padding: 16px 0; max-width: 580px; }
.screen-footer { display: flex; justify-content: space-between; gap: 18px; color: #637d9e; font-size: 10px; letter-spacing: .5px; padding-top: 20px; }

/* ------------------------------------------------------------------ responsive */
@media (min-width: 1800px) {
  .cw-main { padding-top: 40px; max-width: 1600px; }
  .page-intro h1 { font-size: 32px; }
  .panel { padding: 28px; }
  .stats-grid { gap: 20px; }
  .report-screen { padding: 38px 52px 24px; }
  .screen-panel { padding: 28px 32px; }
  .screen-panel-heading h2 { font-size: 18px; }
  .screen-bar-title, .screen-keyword strong, .screen-actions li { font-size: 16px; }
  .screen-step, .screen-resources { font-size: 14px; }
  .screen-panel-heading { margin-bottom: 26px; }
  .screen-voice { gap: 24px; }
  .screen-bar-track { height: 10px; }
  .screen-kpis article { padding: 26px 32px; }
}
@media (max-width: 1180px) {
  .cw-main { padding: 26px 26px 0; }
  .cw-topbar { padding: 0 26px; }
  .workspace-grid { grid-template-columns: minmax(0, 1fr) 280px; gap: 18px; }
  .plans-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metrics-grid-five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-heading { flex-wrap: wrap; gap: 14px; }
}
@media (max-width: 1100px) {
  .channel-grid { grid-template-columns: 1fr; }
  .publishing-compose-layout { grid-template-columns: 1fr; }
}
@media (max-width: 1000px) {
  .workspace-grid { grid-template-columns: 1fr; }
  .workspace-aside { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .workspace-aside > .panel { margin: 0; }
  .metrics-grid-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .auth-story { padding: 36px; }
  .auth-main { padding: 36px; }
  .channel-form { grid-template-columns: 1fr; }
  .screen-header { align-items: flex-start; }
  .screen-controls { flex-wrap: wrap; justify-content: flex-end; }
  .report-screen { padding: 26px; }
  .screen-kpis { gap: 12px; }
  .screen-kpis article { padding: 20px; }
  .screen-grid { grid-template-columns: 1fr 1fr; }
  .screen-panel { padding: 20px; }
  .screen-controls > span { display: none; }
}
@media (max-width: 800px) {
  .cw-sidebar { transform: translateX(-100%); transition: transform .2s; width: 260px; }
  .cw-sidebar.open { transform: translateX(0); box-shadow: 12px 0 36px rgba(16, 24, 40, .13); }
  .cw-workspace { margin: 0; width: 100%; }
  .cw-menu-toggle { display: inline-grid; place-items: center; }
  .cw-topbar { height: 64px; }
  .cw-topbar-crumb, .cw-topbar-divider { display: none; }
  body.nav-open { overflow: hidden; }
  .cw-nav-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 35; background: rgba(16, 24, 40, .4); border: 0; border-radius: 0; width: 100%; height: 100%; padding: 0; }
  .auth-layout { grid-template-columns: 38% 62%; }
  .auth-story { padding: 28px; }
  .auth-story h2 { font-size: 30px; }
  .auth-story p { font-size: 13px; }
  .auth-story .cw-brand { font-size: 19px; }
  .cw-sidebar-close { display: grid; place-items: center; position: absolute; right: 12px; top: 12px; width: 28px; height: 28px; }
  .cw-sidebar .cw-brand { margin-top: 14px; }
  .cw-skip-link { left: 16px; }
  .screen-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .screen-grid { grid-template-columns: 1fr; }
  .screen-brand h1 { font-size: 22px; }
  .screen-panel-heading h2 { font-size: 16px; }
}
@media (max-width: 640px) {
  .clip-card { grid-template-columns: 1fr; }
  .clip-video { max-width: 240px; }
}
@media (max-width: 600px) {
  .cw-main { padding: 22px 16px 0; }
  .cw-topbar { padding: 0 16px; }
  .cw-topbar-title { gap: 10px; }
  .cw-topbar-account { gap: 8px; }
  .cw-topbar-account #user-name { max-width: 100px; overflow: hidden; text-overflow: ellipsis; }
  .page-intro { margin-bottom: 20px; flex-wrap: wrap; gap: 14px; }
  .page-intro h1, .page-intro h2 { font-size: 24px; }
  .page-intro p { font-size: 13px; }
  .page-intro > .page-actions, .page-intro > .button { margin: 0; width: 100%; }
  .page-heading { gap: 12px; }
  .page-actions { width: 100%; padding: 0; }
  .page-actions .button { flex: 1; }
  .hero { padding: 24px; margin-bottom: 16px; flex-wrap: wrap; }
  .hero h1, .hero h2 { font-size: 24px; }
  .hero p { font-size: 13px; }
  .hero > .page-actions { width: 100%; }
  .stats-grid, .metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 16px 0; }
  .stats-grid > .stat-card:last-child:nth-child(odd), .metrics-grid > .stat-card:last-child:nth-child(odd) { grid-column: 1/-1; }
  .stat-card { padding: 16px; }
  .stat-card > strong { font-size: 28px; }
  .panel { padding: 20px 16px; margin: 16px 0; }
  .section-heading { gap: 12px; align-items: flex-start; flex-wrap: wrap; }
  .section-heading > .form-actions { width: 100%; }
  .section-heading p { font-size: 12px; }
  .section-heading select { min-height: 38px; }
  .form-grid, .channel-form { grid-template-columns: 1fr; gap: 18px; }
  .form-actions.span-all { padding-top: 16px; }
  .form-actions > .button { flex: 1; }
  .workspace-aside { grid-template-columns: 1fr; }
  .order-card, .project-card { padding: 16px; }
  .order-details { gap: 8px 18px; }
  .card-top { flex-wrap: wrap; }
  .geo-step { flex-wrap: wrap; gap: 9px; font-size: 12px; }
  .geo-step-label { min-width: 60%; }
  .geo-step .text-link { margin-left: 33px; }
  .geo-step-mark { font-size: 12px; }
  .plans-grid, .format-grid, .quick-grid { grid-template-columns: 1fr; }
  .plan-card { padding: 24px; }
  .plan-badge { position: static; align-self: start; margin-bottom: 8px; }
  .delivery-form .form-grid { grid-template-columns: 1fr; }
  .delivery-row { flex-wrap: wrap; }
  .compact-form label { min-width: 100%; }
  .compact-form .button { width: 100%; }
  .page-footer { font-size: 10px; line-height: 1.8; margin-top: 28px; }
  .page-footer > span:last-child { display: none; }
  .auth-layout { display: block; }
  .auth-story { min-height: 0; padding: 24px; }
  .auth-story > div, .story-footer { display: none; }
  .auth-main { padding: 34px 24px 48px; }
  .auth-card { max-width: 420px; }
  .auth-card h1 { font-size: 26px; }
  .clip-card { grid-template-columns: 1fr !important; }
  .clip-video { max-width: 240px; }
  .geo-bar { grid-template-columns: minmax(65px, 110px) 1fr 42px !important; }
  .checkbox-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .access-notice { grid-template-columns: 1fr; gap: 9px; }
  .access-notice > .button { grid-column: 1; grid-row: auto; justify-self: start; }
  .page-intro > .button { width: 100%; }
  .dash-greeting { margin-bottom: 16px; }
  .dash-greeting-actions { width: 100%; }
  .dash-greeting-actions .button { flex: 1; }
  .dash-stepper { overflow-x: auto; padding-bottom: 4px; }
  .dash-stepper li { flex: 0 0 104px; }
  .dash-metrics { gap: 10px 28px; padding: 12px 14px; }
  .dash-growth-grid { grid-template-columns: 1fr; }
  .keyword-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
  .keyword-card-header, .response-card-header { gap: 12px; }
  input, textarea, select { font-size: 16px; }
  .report-screen { padding: 22px 16px; }
  .screen-header { flex-wrap: wrap; gap: 20px; }
  .screen-controls { justify-content: flex-start; }
  .screen-context { align-items: flex-start; flex-wrap: wrap; margin: 18px 0; }
  .screen-context > div { justify-content: space-between; width: 100%; }
  .screen-kpis article { padding: 18px 16px; }
  .screen-kpis strong { font-size: 36px; }
  .screen-kpis small { font-size: 11px; }
  .screen-footer > span:last-child { display: none; }
  .screen-progress { gap: 12px; }
  .screen-panel { padding: 20px 18px; }
}
@media (max-width: 560px) {
  .article-stage-grid, .article-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .cw-sidebar, .cw-topbar, .page-footer, .page-actions, #report-print, .notice, .cw-menu-toggle { display: none !important; }
  .cw-workspace { margin: 0; width: 100%; }
  .cw-main { padding: 0; }
  .panel, .stat-card { break-inside: avoid; }
}

/* ------------------------------------------------------------------ order invoicing */
.invoice-action { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 14px; border-top: 1px solid var(--dg-line); padding-top: 14px; font-size: 12px; }
.invoice-action .order-hint { margin-top: 0; }
.invoice-action-requested { border: 1px solid #f0d9a8; background: #fffcf4; border-radius: var(--dg-radius-control); padding: 12px 14px; }
.invoice-apply { margin-top: 14px; border-top: 1px solid var(--dg-line); padding-top: 12px; font-size: 13px; }
.invoice-apply > summary { cursor: pointer; color: var(--dg-primary); font-weight: 500; }
.invoice-apply .compact-form { margin-top: 12px; }

/* ------------------------------------------------------------------ public legal pages */
.legal-page { background: var(--dg-surface); min-height: 100vh; display: flex; flex-direction: column; }
.legal-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 28px; border-bottom: 1px solid var(--dg-line); background: var(--dg-card); flex-wrap: wrap; }
.legal-header-links { display: flex; gap: 18px; font-size: 13px; font-weight: 500; }
.legal-main { flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: 32px 24px 48px; }
.legal-banner { margin: 0 0 24px; padding: 13px 16px; border: 1px solid #f0d9a8; border-radius: var(--dg-radius-control); background: #fef3c7; color: #92400e; font-size: 13px; font-weight: 500; line-height: 1.7; }
.legal-doc h1 { margin: 0 0 8px; }
.legal-meta { font-size: 12px; color: var(--dg-faint); margin: 0 0 24px; }
.legal-section { margin: 0 0 8px; }
.legal-section h2 { font-size: 16px; margin: 22px 0 8px; }
.legal-section p { font-size: 13.5px; line-height: 1.9; color: var(--dg-body); margin: 0; }
.legal-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--dg-line); padding: 20px 28px; color: var(--dg-faint); font-size: 11px; }
.legal-footer nav { display: flex; gap: 16px; font-size: 12px; }

/* Chinese product wordmark fits the workspace sidebar and compact login header. */
.cw-brand-mark { flex-shrink: 0; }
.cw-sidebar .cw-brand { font-size: 16px; letter-spacing: -.3px; padding-inline: 4px; gap: 8px; }
.auth-story .cw-brand { flex-wrap: nowrap; }
.auth-story .cw-brand > span:last-child { min-width: 0; }