:root {
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  color: #20242b;
  background: #f4f5f7;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --accent: #ff7733;
  --ink: #20242b;
  --muted: #7e8793;
  --line: #e8eaee;
  --surface: #fff;
  --green: #13a56b;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 920px; min-height: 100vh; }
button, textarea { font: inherit; }
button { color: inherit; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 5; width: 244px; display: flex; flex-direction: column; padding: 23px 15px 14px; background: #fff; border-right: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 11px; padding: 0 9px 24px; color: inherit; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 11px; color: #fff; background: var(--accent); font-size: 21px; font-weight: 700; }
.brand-copy { display: grid; gap: 1px; }
.brand-copy b { font-size: 16px; font-weight: 700; }.brand-copy em { color: var(--accent); font-style: normal; }.brand-copy small { color: #9098a3; font-size: 11px; }
.workspace-switch { display: flex; align-items: center; gap: 9px; width: 100%; padding: 10px; text-align: left; border: 1px solid #eceef1; border-radius: 7px; background: #fff; cursor: pointer; }
.workspace-avatar,.profile-avatar,.top-avatar { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 7px; color: #fff; background: #4b5563; font-weight: 600; }
.workspace-switch b,.profile-button b { display: block; font-size: 12px; font-weight: 600; }.workspace-switch small,.profile-button small { display: block; margin-top: 2px; color: #9299a3; font-size: 10px; }.switch-caret { margin-left: auto; color: #9299a3; }
.nav-caption { margin: 27px 10px 9px; color: #a1a7af; font-size: 10px; font-weight: 600; }
.primary-nav { display: grid; gap: 4px; }
.nav-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 11px; color: #59616c; border: 0; border-radius: 6px; background: transparent; text-align: left; font-size: 13px; cursor: pointer; }
.nav-item svg { width: 17px; height: 17px; color: #737d89; }.nav-item:hover { background: #f7f8f9; }.nav-item.is-active { color: #272c33; background: #fff3ed; font-weight: 600; }.nav-item.is-active svg { color: var(--accent); }.nav-chevron { margin-left: auto; color: #a4abb4; }
.sidebar-bottom { margin-top: auto; }.connection-pill { display: flex; align-items: center; gap: 7px; margin: 0 6px 12px; color: #717985; font-size: 11px; }.connection-pill i,.service-state i { width: 7px; height: 7px; border-radius: 50%; background: #c4c9cf; }.connection-pill i { box-shadow: 0 0 0 3px #f0f1f3; }
.profile-button { display: flex; align-items: center; width: 100%; gap: 9px; padding: 10px 6px 3px; border: 0; border-top: 1px solid var(--line); background: transparent; text-align: left; }.profile-avatar { border-radius: 50%; color: #606975; background: #e9edf1; }.more { margin-left: auto; color: #8d96a1; font-size: 21px; }

.main-area { min-height: 100vh; margin-left: 244px; }
.topbar { position: sticky; top: 0; z-index: 4; display: flex; align-items: center; justify-content: space-between; height: 58px; padding: 0 34px; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); }
.breadcrumbs,.top-actions { display: flex; align-items: center; gap: 10px; color: #939ba5; font-size: 11px; }.breadcrumbs svg { width: 13px; height: 13px; }.breadcrumbs b { color: #3a414a; font-weight: 600; }.top-actions { gap: 22px; }.service-state { display: flex; align-items: center; gap: 7px; color: #777f8a; }.help-button { padding: 0; border: 0; background: none; color: #67717d; font-size: 11px; }.top-avatar { width: 29px; height: 29px; border-radius: 50%; font-size: 11px; background: #e7ebef; color: #59616c; }
.page-content { max-width: 1480px; margin: 0 auto; padding: 35px 38px 25px; }
.page-heading { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 23px; }.eyebrow,.section-kicker { color: #9aa2ac; font-size: 9px; letter-spacing: 1px; font-weight: 700; }.page-heading h1 { margin: 6px 0 5px; font-size: 25px; line-height: 1.3; font-weight: 700; }.page-heading p,.panel-header p { margin: 0; color: #7d8691; font-size: 12px; }.date-filter { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 11px; color: #535c67; border: 1px solid var(--line); border-radius: 6px; background: #fff; font-size: 11px; }.date-filter svg { width: 15px; height: 15px; color: #828b96; }
.metrics-row { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin-bottom: 18px; background: #fff; border: 1px solid var(--line); border-radius: 7px; }.metric { min-height: 104px; padding: 16px 19px; border-right: 1px solid var(--line); }.metric:last-child { border-right: 0; }.metric-label { color: #737d88; font-size: 11px; }.metric-value { margin: 9px 0 5px; color: #333a43; font-size: 24px; font-weight: 600; line-height: 1; }.metric small { color: #a0a7b0; font-size: 10px; }.metric-status-value { display: flex; align-items: center; gap: 7px; margin: 10px 0 6px; color: #525b66; font-size: 14px; font-weight: 600; }.metric-status-value i { width: 7px; height: 7px; border-radius: 50%; background: #c2c8cf; }
.work-grid { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(300px,.85fr); gap: 16px; align-items: stretch; }.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 7px; }.demand-panel { padding: 21px 22px 19px; }.panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 21px; }.panel-header h2 { margin: 5px 0 5px; font-size: 16px; line-height: 1.4; }.panel-icon { display: grid; place-items: center; width: 32px; height: 32px; color: var(--accent); background: #fff3ec; border-radius: 6px; }.panel-icon svg { width: 17px; }.field-label { display: block; margin-bottom: 7px; color: #535c67; font-size: 11px; font-weight: 600; }.demand-panel textarea { display: block; width: 100%; min-height: 126px; resize: vertical; padding: 12px 13px; border: 1px solid #e1e5e9; border-radius: 6px; outline: none; color: #2d333a; font-size: 12px; line-height: 1.65; }.demand-panel textarea:focus { border-color: #f2a27a; box-shadow: 0 0 0 3px rgba(255,119,51,.09); }.demand-panel textarea::placeholder { color: #a1a8b1; }.input-footer { display: flex; justify-content: space-between; margin-top: 7px; color: #a1a8b1; font-size: 10px; }.form-actions { display: flex; gap: 9px; margin-top: 15px; }.button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 35px; padding: 0 13px; border-radius: 5px; font-size: 11px; font-weight: 600; cursor: pointer; }.button svg { width: 15px; height: 15px; }.button:disabled { opacity: .45; cursor: not-allowed; }.button-secondary { border: 1px solid #dfe3e8; background: #fff; color: #535c67; }.button-primary { border: 1px solid var(--accent); background: var(--accent); color: #fff; }.button-primary svg { color: #fff; }
.integration-note { margin-top: 10px; color: #929aa4; font-size: 10px; line-height: 1.6; }
.notice { margin-top: 12px; padding: 9px 10px; color: #6a727c; border-radius: 5px; background: #f6f7f8; font-size: 11px; }.frame-preview { margin-top: 13px; padding: 12px; border: 1px solid #f0e6e0; border-radius: 6px; background: #fffaf7; }.frame-title { display: flex; justify-content: space-between; color: #4d555f; font-size: 11px; }.frame-title span { color: #b46f4c; }.spec-line { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }.spec-line span { padding: 4px 7px; color: #46515c; border: 1px solid #e9e4e1; border-radius: 4px; background: #fff; font-size: 10px; }.confirm-line { margin-top: 9px; color: #a7663b; font-size: 10px; }.confirm-line.is-ready { color: #50836e; }
.tasks-panel { padding: 21px 20px; }.compact { align-items: center; margin-bottom: 14px; }.compact h2 { margin-bottom: 0; }.text-button,.task-card-bottom button { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; color: #77818d; font-size: 10px; cursor: pointer; }.text-button svg,.task-card-bottom svg { width: 13px; height: 13px; }.empty-state { display: flex; align-items: center; flex-direction: column; justify-content: center; min-height: 235px; padding: 20px; text-align: center; }.empty-icon { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 13px; color: #98a1ab; background: #f4f5f7; border-radius: 50%; }.empty-state>b { color: #505963; font-size: 12px; }.empty-state p { max-width: 235px; margin: 8px 0; color: #929aa4; font-size: 10px; line-height: 1.7; }.empty-note { color: #b0b6be; font-size: 9px; }.task-card { padding: 13px; border: 1px solid var(--line); border-radius: 6px; }.task-card-top,.task-card-bottom { display: flex; justify-content: space-between; align-items: center; color: #9aa1aa; font-size: 9px; }.task-status { color: #b36d45; }.task-card>b { display: block; margin: 12px 0 6px; color: #404851; font-size: 12px; }.task-card>p { color: #7c8590; font-size: 10px; }.task-card-bottom { padding-top: 10px; border-top: 1px solid #eff0f2; }.task-card-bottom button { color: #bd7651; }
.activity-panel { margin-top: 16px; padding: 18px 21px 20px; }.muted-label { color: #a0a7b0; font-size: 10px; }.workflow { display: grid; grid-template-columns: 1fr 1.2fr 1fr 1.2fr 1fr 1.2fr 1fr; align-items: center; padding: 5px 12px 0; }.workflow>i { height: 1px; margin: 0 10px; background: #e6e9ed; }.workflow-step { display: grid; grid-template-columns: 25px auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; min-width: 120px; }.workflow-step>span { display: grid; place-items: center; grid-row: 1 / span 2; width: 25px; height: 25px; border-radius: 50%; color: #86909b; background: #f0f2f4; font-size: 10px; }.workflow-step.is-current>span { color: white; background: var(--accent); }.workflow-step b { color: #515a64; font-size: 10px; }.workflow-step small { margin-top: 2px; color: #a1a8b0; font-size: 9px; }.workflow-step.is-current b { color: #b55f34; }
.page-footer { display: flex; justify-content: space-between; gap: 16px; margin-top: 18px; color: #a4abb3; font-size: 9px; }.legal-links { display: inline-flex; gap: 12px; white-space: nowrap; }.legal-links a { color: #8b949e; text-decoration: none; }.legal-links a:hover { color: #c8663b; text-decoration: underline; }
.module-intro { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; padding: 18px 20px; }.module-icon { display: grid; flex: 0 0 38px; place-items: center; width: 38px; height: 38px; color: #bd6a42; border-radius: 8px; background: #fff3ed; }.module-icon svg { width: 19px; height: 19px; }.module-copy { flex: 1; }.module-copy h2 { margin: 3px 0 5px; color: #343c45; font-size: 16px; }.module-copy p { margin: 0 0 3px; color: #6f7882; font-size: 11px; line-height: 1.6; }.module-copy small { color: #a0a7b0; font-size: 10px; }
.module-intro > .button { flex: 0 0 auto; }

@media (max-width: 1120px) { .sidebar { width: 210px; }.main-area { margin-left: 210px; }.page-content { padding-right: 22px; padding-left: 22px; }.work-grid { grid-template-columns: minmax(0,1.15fr) minmax(275px,.85fr); }.metric { padding-right: 12px; padding-left: 12px; }.workflow { padding-right: 0; padding-left: 0; }.workflow-step { min-width: 95px; } }
.legal-page { min-height: 100vh; padding: 48px 20px; background: #f5f6f7; color: #4d555f; }.legal-card { max-width: 760px; margin: 0 auto; padding: 42px 48px; border: 1px solid #e7eaed; border-radius: 8px; background: #fff; box-shadow: 0 8px 28px rgba(35,43,53,.06); }.legal-back { color: #bd6a42; font-size: 13px; text-decoration: none; }.legal-card h1 { margin: 26px 0 8px; color: #303840; font-size: 28px; }.legal-updated { margin-bottom: 34px; color: #9aa2ab; font-size: 12px; }.legal-card h2 { margin: 24px 0 8px; color: #3f4852; font-size: 16px; }.legal-card p { margin: 0; color: #68727d; font-size: 14px; line-height: 1.9; }.legal-card a { color: #bd6a42; }
.product-eyebrow { margin-top: 26px; }.product-lead { max-width: 590px; font-size: 16px !important; }.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 30px 0; }.product-grid article { padding: 18px; border: 1px solid #edf0f2; border-radius: 7px; background: #fafbfb; }.product-grid b { color: #3f4852; font-size: 14px; }.product-grid p { margin-top: 7px; font-size: 13px; }.product-contact { margin-top: 26px !important; }
.login-page { min-height: 100vh; padding: 0 5.5vw; background: #f5f6f7; color: #404851; }.auth-topbar { display: flex; align-items: center; justify-content: space-between; height: 76px; border-bottom: 1px solid #e7eaed; }.login-brand { display: inline-flex; align-items: center; gap: 10px; color: #37404a; text-decoration: none; }.login-brand .brand-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 7px; background: #f4773b; color: #fff; font-size: 18px; font-weight: 700; }.login-brand b { display: block; font-size: 16px; }.login-brand em { color: #f4773b; font-style: normal; }.login-brand small { display: block; margin-top: 3px; color: #98a0a9; font-size: 10px; }.auth-back { color: #77818b; font-size: 12px; text-decoration: none; }.auth-main { display: grid; grid-template-columns: minmax(360px, 1fr) minmax(390px, 460px); align-items: center; gap: clamp(50px, 9vw, 150px); width: min(100%, 1100px); min-height: calc(100vh - 140px); margin: 0 auto; }.auth-intro { max-width: 490px; }.auth-intro .section-kicker { color: #a0a8b1; font-size: 10px; }.auth-intro h1 { margin: 16px 0 14px; color: #303840; font-size: 36px; line-height: 1.32; }.auth-intro > p { max-width: 420px; margin: 0; color: #737d88; font-size: 14px; line-height: 1.8; }.auth-principles { display: grid; gap: 22px; margin-top: 52px; }.auth-principles > div { display: flex; align-items: flex-start; gap: 14px; }.auth-principles i { color: #f4773b; font-size: 11px; font-style: normal; font-weight: 700; }.auth-principles b { display: block; color: #454e58; font-size: 13px; }.auth-principles small { display: block; margin-top: 5px; color: #929aa4; font-size: 11px; }.auth-form { width: 100%; padding: 0 4px; }.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; height: 44px; border-bottom: 1px solid #dfe3e7; }.auth-tab { position: relative; border: 0; background: transparent; color: #8b949e; font: inherit; font-size: 13px; cursor: pointer; }.auth-tab.is-active { color: #303840; font-weight: 600; }.auth-tab.is-active::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: #f4773b; content: ''; }.login-heading { margin-top: 25px; }.login-heading h2 { margin: 0 0 7px; color: #303840; font-size: 22px; }.login-heading p { margin: 0; color: #7b8590; font-size: 12px; line-height: 1.7; }.qr-stage { display: grid; place-items: center; width: 184px; height: 184px; margin: 22px auto 17px; border: 1px solid #e2e6e9; border-radius: 5px; background: #fff; }.qr-placeholder { display: flex; align-items: center; flex-direction: column; gap: 10px; padding: 20px; text-align: center; }.wechat-mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #f1f3f4; color: #78838d; font-size: 17px; }.qr-placeholder b { color: #4a535d; font-size: 12px; }.qr-placeholder p { margin: 0; color: #929aa4; font-size: 11px; line-height: 1.6; }.login-button { display: grid; grid-template-columns: 22px 1fr 22px; align-items: center; width: 100%; min-height: 44px; padding: 0 14px; border-radius: 5px; background: #f4773b; color: #fff; font-size: 13px; font-weight: 600; text-align: center; text-decoration: none; }.login-button:hover { background: #e96d34; }.login-button[aria-disabled="true"] { background: #f1b59a; cursor: not-allowed; }.wechat-button-mark { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,.2); font-size: 11px; }.login-help { margin: 12px 0 20px; color: #858e98; font-size: 11px; line-height: 1.7; }.login-legal { display: flex; gap: 18px; padding-top: 16px; border-top: 1px solid #e7eaed; }.login-legal a,.login-back { color: #818b96; font-size: 10px; text-decoration: none; }.auth-footer { display: flex; justify-content: space-between; gap: 16px; padding: 15px 0; border-top: 1px solid #e7eaed; color: #9ba3ac; font-size: 10px; }.callback-panel { width: min(100%, 480px); margin: 80px auto; padding: 30px 0; }.callback-panel .login-heading { margin-top: 0; }.callback-loader { width: 34px; height: 34px; margin: 24px auto; border: 3px solid #edf0f1; border-top-color: #f4773b; border-radius: 50%; animation: login-spin .8s linear infinite; }.callback-loader.is-error { border-color: #f2e6df; border-top-color: #d46b45; animation: none; }.secondary-login { margin: 10px 0 14px; background: #f2f4f5; color: #59636e; }.login-back { display: block; text-align: center; }.callback-panel #callback-status { overflow-wrap: anywhere; }
@keyframes login-spin { to { transform: rotate(360deg); } }
@media (max-width: 760px) { .login-page { padding: 0 18px; }.auth-topbar { height: 64px; }.auth-main { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 32px; min-height: calc(100vh - 115px); padding: 28px 0; }.auth-intro { max-width: none; }.auth-intro h1 { margin: 10px 0; font-size: 27px; }.auth-principles { display: none; }.auth-form { max-width: 460px; align-self: center; }.auth-footer { flex-direction: column; gap: 5px; }.product-card { padding: 30px 24px; }.product-grid { grid-template-columns: 1fr; } }


/* Shared desktop workbench and public-page baseline. Auth styles above remain unchanged. */
:root { --accent: #f4773b; --ink: #303840; --muted: #78828d; --line: #e7eaed; --surface: #fff; --canvas: #f5f6f7; }
body:not(.login-page):not(.legal-page) { background: var(--canvas); color: var(--ink); }
.sidebar { width: 232px; padding: 22px 14px 14px; }
.main-area { margin-left: 232px; }
.brand { padding-bottom: 20px; }
.brand-mark { border-radius: 7px; background: var(--accent); }
.workspace-switch { border-color: transparent; background: #f6f7f8; border-radius: 5px; }
.nav-caption { margin-top: 24px; }
.nav-item { min-height: 41px; border-radius: 5px; }
.nav-item.is-active { color: #303840; background: #fff1e9; }
.nav-item.is-active svg { color: var(--accent); }
.topbar { padding-right: 32px; padding-left: 32px; }
.page-content { padding-top: 30px; }
.page-heading { align-items: center; margin-bottom: 19px; }
.page-heading h1 { color: #303840; font-size: 24px; }
.page-heading p { color: #77818b; }
.metrics-row, .panel { border-color: #e7eaed; border-radius: 5px; box-shadow: none; }
.metric { min-height: 96px; padding-top: 14px; padding-bottom: 13px; }
.metric-label { color: #707a84; font-size: 12px; }
.metric small { color: #929aa3; font-size: 11px; }
.work-grid { gap: 14px; }
.demand-panel, .tasks-panel { padding: 19px 20px; }
.panel-header { margin-bottom: 17px; }
.panel-header h2 { color: #303840; font-size: 17px; }
.panel-header p { font-size: 12px; }
.demand-panel textarea { border-radius: 4px; font-size: 13px; }
.button { min-height: 38px; border-radius: 4px; font-size: 12px; }
.button-primary { border-color: var(--accent); background: var(--accent); }
.button-primary:not(:disabled):hover { background: #e86b31; }
.activity-panel { margin-top: 14px; padding: 18px 20px; }
.workflow-step > span { border-radius: 4px; }
.module-view { display: grid; gap: 14px; }
.module-intro { gap: 14px; margin: 0; padding: 18px 20px; border-radius: 5px; }
.module-icon { border-radius: 5px; background: #fff1e9; color: #d9662e; }
.module-empty { min-height: 300px; display: grid; place-items: center; }
.module-empty .empty-state { min-height: 260px; }
.module-empty .empty-state p { max-width: 360px; font-size: 12px; }
.module-empty .button { margin-top: 8px; text-decoration: none; }
.page-footer { color: #87909a; }
.page-footer a, .legal-links a { color: #68727d; }
.page-footer a:hover, .legal-links a:hover { color: #d9662e; }

.legal-page { padding: 0; background: var(--canvas); color: var(--ink); }
.legal-card { max-width: none; min-height: 100vh; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.legal-topbar { height: 62px; display: flex; align-items: center; justify-content: space-between; padding: 0 max(28px, calc((100vw - 1120px) / 2)); background: #fff; border-bottom: 1px solid var(--line); }
.public-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-size: 15px; font-weight: 650; text-decoration: none; }
.public-brand-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 5px; color: #fff; background: var(--accent); font-size: 17px; }
.public-nav { display: flex; align-items: center; gap: 22px; }
.public-nav a { color: #68727d; font-size: 12px; text-decoration: none; }
.public-nav a:hover { color: #d9662e; }
.public-main { width: min(100% - 48px, 960px); margin: 0 auto; padding: 52px 0 70px; }
.public-main h1 { margin: 12px 0 10px; color: #303840; font-size: 30px; line-height: 1.35; }
.public-main .legal-updated { margin: 0 0 35px; color: #929aa3; font-size: 12px; }
.public-main h2 { margin: 30px 0 9px; color: #3d4650; font-size: 17px; }
.public-main p { margin: 0 0 14px; color: #66717c; font-size: 14px; line-height: 1.9; }
.public-main a { color: #c85d2b; }
.product-main { max-width: 1040px; }
.product-head { padding: 23px 0 31px; border-bottom: 1px solid var(--line); }
.product-head .product-lead { max-width: 680px; margin: 0; color: #6d7782; font-size: 15px !important; line-height: 1.8; }
.product-grid { gap: 0; margin: 24px 0 0; grid-template-columns: repeat(2, minmax(0, 1fr)); background: #fff; border-top: 1px solid var(--line); }
.product-grid article { min-height: 132px; padding: 21px 22px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.product-grid article:nth-child(odd) { border-right: 1px solid var(--line); }
.product-grid b { color: #343d46; font-size: 15px; }
.product-grid p { margin: 7px 0 0; color: #74808a; font-size: 13px; line-height: 1.7; }
.product-main .notice { margin-top: 25px; padding: 14px 16px; border-left: 3px solid var(--accent); border-radius: 0; background: #fff; color: #626d77; font-size: 12px; }
.product-contact { margin-top: 30px !important; }
.public-footer { padding: 18px 24px; border-top: 1px solid var(--line); color: #8c959e; text-align: center; font-size: 11px; }

@media (max-width: 900px) {
  body:not(.login-page) { min-width: 0; }
  .sidebar { width: 190px; padding-right: 10px; padding-left: 10px; }
  .main-area { margin-left: 190px; }
  .topbar { padding-right: 18px; padding-left: 18px; }
  .page-content { padding: 24px 18px; }
  .metrics-row { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .metric:nth-child(2) { border-right: 0; }
  .metric:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .work-grid { grid-template-columns: 1fr; }
  .tasks-panel .empty-state { min-height: 170px; }
}
@media (max-width: 620px) {
  .sidebar { position: static; width: auto; height: auto; padding: 12px 14px 8px; border-right: 0; border-bottom: 1px solid var(--line); }
  .brand { padding: 0 2px 12px; }
  .brand-mark { width: 32px; height: 32px; font-size: 18px; }
  .brand-copy small, .workspace-switch, .nav-caption, .sidebar-bottom { display: none; }
  .primary-nav { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 2px; }
  .nav-item { flex: 0 0 auto; width: auto; min-height: 36px; gap: 7px; padding: 0 10px; white-space: nowrap; font-size: 12px; }
  .nav-item svg { width: 15px; height: 15px; }
  .nav-chevron { display: none; }
  .main-area { margin-left: 0; }
  .topbar { height: 48px; padding: 0 15px; }
  .top-actions { gap: 12px; }
  .help-button, .service-state { display: none; }
  .page-content { padding: 21px 14px 26px; }
  .page-heading { align-items: flex-start; gap: 10px; }
  .page-heading h1 { font-size: 21px; }
  .page-heading p { max-width: 290px; font-size: 11px; line-height: 1.6; }
  .date-filter { flex: 0 0 auto; height: 31px; padding: 0 8px; font-size: 10px; }
  .metric { min-height: 88px; padding: 12px; }
  .metric-value { font-size: 21px; }
  .demand-panel, .tasks-panel, .activity-panel { padding: 16px 14px; }
  .form-actions { flex-wrap: wrap; }
  .form-actions .button { flex: 1 1 auto; }
  .workflow { overflow-x: auto; }
  .workflow-step { min-width: 95px; }
  .module-intro { align-items: flex-start; flex-wrap: wrap; padding: 15px; }
  .module-copy { min-width: calc(100% - 58px); }
  .module-intro > .button { margin-left: 52px; }
  .module-empty { min-height: 250px; }
  .page-footer { align-items: flex-start; gap: 10px; }
  .legal-topbar { height: 54px; padding: 0 15px; }
  .public-nav { gap: 12px; }
  .public-nav a { font-size: 11px; }
  .public-main { width: calc(100% - 32px); padding: 34px 0 48px; }
  .public-main h1 { font-size: 25px; }
  .product-grid { grid-template-columns: 1fr; }
  .product-grid article:nth-child(odd) { border-right: 0; }
}