/* Light operational workspace, informed by Tabler and Arco Pro layout patterns. */
:root {
  color-scheme: light;
  --bg: #ededee; --panel: #fff; --panel-soft: #f5f5f6;
  --text: #353637; --ink: #2a2a2b; --muted: #737475;
  --line: #dfdfe0; --line-strong: #c3c4c6;
  --brand: #3265cf; --brand-dark: #244faa; --primary: #3265cf;
  --ok: #24806b; --success: #24806b; --danger: #bc4c58; --accent: #4678bb;
}
body { background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }
:focus-visible { outline-color: #8faee9; }
.layout { grid-template-columns: 216px minmax(0,1fr); }
.sidebar { background: #2d2d2d; border-right: 1px solid #3a3b3c; padding: 24px 13px 14px; }
.brand { margin: 0 9px 20px; padding: 0 0 0 49px; min-height: 56px; border: 0; }
.brand-logo { width: 36px; height: 36px; border-radius: 7px; filter: grayscale(1) brightness(1.7); border: 1px solid #757576; }
.brand strong { color: #f7f7f7; font-size: 19px; font-weight: 650; }
.brand span { color: #b4bac4; font-size: 11px; }
.nav { gap: 9px; scrollbar-color: #5b5c5d transparent; }
.nav-group-label { color: #a5adb9; font-size: 11px; min-height: 24px; padding-left: 12px; }
.nav .nav-item { color: #cccccc; min-height: 38px; border-radius: 5px; padding: 8px 12px; font-size: 13px; gap: 12px; }
.nav .nav-item svg { color: #a5adba; width: 17px; height: 17px; }
.nav .nav-item:hover { background: #404142; color: #fff; }
.nav .nav-item.active { background: #3865c5; color: #fff; border-color: #527ace; box-shadow: inset 2px 0 0 #a5beff; }
.nav .nav-item.active svg { color: #e6edff; }
.sidebar-bottom { color: #b3bbc7; border-color: #474748; padding: 15px 6px 2px; font-size: 10px; }
.environment-dot { background: #86abea; }
.main { background: var(--bg); }
.topbar { background: #f9fafc; border-bottom: 1px solid #d9d9da; padding: 0 32px; height: 60px; min-height: 60px; }
.topbar h2 { color: #4a4a4a; font-size: 13px; }
.breadcrumb-root,.breadcrumb-divider { color: #737373; }
.user-avatar { background: #e2e8f3; color: #6c6c6d; border: 1px solid #cfd9e9; width: 30px; height: 30px; }
.content { padding: 27px 32px 40px; max-width: 1640px; }
.workspace-page-heading,.dashboard-titlebar { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin: 0 0 23px; }
.workspace-page-heading h1,.dashboard-titlebar h1 { font-size: 26px; color: #2a2a2b; margin: 0; font-weight: 650; }
.workspace-page-heading > span,.dashboard-titlebar em { color: #737373; font-size: 12px; }
.dashboard-titlebar span { color: #737373; font-size: 12px; display: block; margin-top: 5px; }
.btn { border-radius: 5px; min-height: 38px; color: #565656; background: #fff; border-color: #cecfd1; font-size: 13px; }
.btn:hover { background: #f0f4fa; border-color: #9bafcd; color: #294d8a; }
.btn.primary,.dashboard-toolbar .btn.primary,.volume .btn.primary,.highPromo .btn.primary { background: #3868ce; border-color: #3868ce; color: #fff; box-shadow: 0 1px 2px #233e6c12; }
.btn.primary:hover { background: #2856b8; border-color: #2856b8; }
.btn.ghost { color: #737373; }
.btn.ghost:hover { background: #e9edf4; color: #505050; }
.btn.danger { color: #ba4f59; border-color: #dfc5c9; }
.btn.icon-only { width: 38px; height: 38px; min-height: 38px; padding: 0; }
.btn.small { min-height: 29px; font-size: 12px; }
.input,select,textarea,.field input:not([type=checkbox]):not([type=radio]) { min-height: 40px; background: #fff; color: #3d3d3e; border-color: #c7c9cb; border-radius: 5px; padding: 8px 11px; font-size: 13px; }
.input:focus,select:focus,textarea:focus { border-color: #7399df; box-shadow: 0 0 0 3px #e2eaff; }
input::placeholder,textarea::placeholder { color: #737373; }
input[type=checkbox],input[type=radio] { accent-color: #3868ce; }
.field > label,.filter-field > span,.quote-field-grid .field label,.quote-item-row .field label { color: #676767; font-size: 13px; font-weight: 500; }
.field small { font-size: 12px; line-height: 1.7; }
.dashboard-toolbar { margin-bottom: 21px; }
.dashboard-toolbar .input,.dashboard-toolbar .btn { background: #fafbfe; color: #5c5c5d; border: 1px solid #d0d1d3; }
.dashboard-toolbar .dashboard-day-nav .btn { width: 38px; min-width: 38px; }
.period-segments { display: flex; align-items: center; padding: 3px; border: 1px solid #d0d1d2; background: #e4e4e5; border-radius: 6px; }
.period-segments button { border: 0; border-radius: 4px; background: transparent; min-height: 32px; padding: 0 16px; font-size: 12px; color: #737373; }
.period-segments button.active { background: #fff; color: #315dba; box-shadow: 0 1px 4px #283e6124; font-weight: 600; }
.dashboard-hero { display: grid; grid-template-columns: 1.18fr 1fr .9fr; grid-template-areas: none; align-items: stretch; gap: 0; margin: 0 0 15px; padding: 25px 28px; background: #fafbfe; border: 0; border-top: 3px solid #4969a0; border-bottom: 1px solid #d6d7d8; border-radius: 0; min-height: 0; }
.dashboard-hero > div { min-width: 0; background: transparent; border: 0; padding: 0 30px; min-height: 155px; border-radius: 0; }
.dashboard-hero > div:first-child { padding-left: 0; }
.dashboard-hero > div:last-child { padding-right: 0; }
.dashboard-hero > div + div { border-left: 1px solid #e2e3e4; }
.hero-profit { display: flex; flex-direction: column; align-items: flex-start; text-align: left; justify-content: flex-start; gap: 0; }
.hero-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; width: 100%; }
.hero-label > span:first-child { display: flex; align-items: center; gap: 8px; }
.hero-label svg { width: 16px; height: 16px; color: #727373; }
.hero-profit .hero-label span,.hero-revenue .hero-label span,.hero-volume .hero-label span { color: #727373; font-size: 12px; }
.hero-profit .hero-label .profit-rate { font-size: 11px; color: #3860a8; background: #e8eef9; border: 0; border-radius: 4px; padding: 3px 7px; white-space: nowrap; }
.hero-profit > strong { display: block; margin: 16px 0 10px; color: #3e4044; font-size: 43px; font-weight: 600; line-height: 1.15; white-space: normal; overflow-wrap: anywhere; }
.hero-profit.warn > strong { color: #b74957; }
.hero-profit em { color: #737373; font-size: 11px; line-height: 1.8; margin: 0; max-width: 370px; text-align: left; }
.hero-period { display: flex; align-items: center; gap: 7px; margin-top: 14px; }
.hero-period svg,.hero-period span { color: #737373; font-size: 11px; }
.hero-period svg { width: 13px; height: 13px; }
.hero-revenue,.hero-volume { display: flex; flex-direction: column; }
.hero-revenue > strong { color: #4a4a4a; margin: 17px 0 20px; font-size: 38px; font-weight: 500; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.hero-volume > strong { color: #4a4a4a; display: flex; gap: 10px; align-items: baseline; margin: 15px 0 18px; font-size: 41px; font-weight: 500; line-height: 1.2; }
.hero-volume > strong small { color: #737373; font-size: 12px; font-weight: 400; }
.hero-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; font-size: 12px; }
.hero-revenue .hero-foot span,.hero-volume .hero-foot span { color: #737373; }
.hero-foot b { color: #686869; font-size: 13px; font-weight: 500; margin-left: 5px; }
.hero-volume .aftersale-counter b { color: #b95661; }
.dashboard-cards { grid-template-columns: repeat(6,minmax(0,1fr)); gap: 12px; margin-bottom: 17px; }
.cards .metric,.dashboard-cards .metric { background: #f7f9fc; border: 1px solid #dbdcde; border-radius: 6px; padding: 15px 18px; min-height: 93px; box-shadow: 0 1px 2px #2e436407; }
.metric-label { display: flex; align-items: center; gap: 8px; }
.metric .metric-label { color: #737373; font-size: 12px; }
.metric-label svg { width: 16px; height: 16px; color: #737373; }
.cards .metric strong,.dashboard-cards .metric strong { font-size: 23px; margin-top: 11px; font-weight: 550; color: #515152; }
.cards .metric.good strong { color: #25836d; }
.cards .metric.warn strong { color: #b2555f; }
.dashboard-utilities { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; }
.workspace-details { background: transparent; border: 0; border-bottom: 1px solid #d2d3d4; }
.workspace-details > summary { padding: 13px 0; font-size: 12px; color: #696969; }
.workspace-details > summary small { color: #737373; font-size: 11px; }
.dashboard-utilities > details[open] { grid-column: 1 / -1; padding: 0 20px 20px; background: #f9fbff; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: 24px; margin-top: 24px; }
.dashboard-grid > *,.dashboard-grid .quality-panel,.dashboard-grid .material-panel { grid-column: auto; }
.dashboard-grid .detail-panel { grid-column: 1 / -1; }
.panel,.visual-panel,.analysis-panel,.diagnosis-panel,.quote-surface { background: #fafbfe; border: 0; border-top: 1px solid #d0d1d2; border-radius: 0; box-shadow: none; padding: 23px 24px; }
.dashboard-grid .visual-panel { min-height: 0; padding: 23px 24px; }
.dashboard-panel::before { display: none !important; }
.visual-head { align-items: flex-start; margin-bottom: 23px; }
.visual-head h3,.section-titlebar h3,.table-titlebar h3 { color: #414141; font-size: 16px; font-weight: 600; }
.visual-head p { font-size: 12px; color: #727373; margin: 5px 0 0; }
.visual-head > svg { color: #727373; width: 19px; height: 19px; }
.visual-head > span { background: transparent; color: #737373; padding: 0; }
.chart-key { display: flex; gap: 15px; font-size: 11px; color: #727373; }
.chart-key span { display: flex; align-items: center; gap: 6px; background: transparent; padding: 0; }
.chart-key i { width: 8px; height: 8px; border-radius: 2px; }
.sales-key { background: #6189d4; } .profit-key { background: #71ada4; }
.shop-chart { display: grid; grid-template-columns: repeat(var(--shop-count),minmax(64px,1fr)); gap: 14px; }
.shop-column { position: relative; min-width: 0; padding: 0 5px; }
.shop-column-total { color: #686869; font: 500 12px/1.5 "Segoe UI",sans-serif; text-align: center; margin-bottom: 12px; white-space: nowrap; }
.shop-column-bars { display: flex; align-items: flex-end; justify-content: center; gap: 8px; height: 160px; border-bottom: 1px solid #cfd1d3; background: repeating-linear-gradient(to top,transparent 0,transparent 39px,#dbe2ed 39px,#dbe2ed 40px); }
.shop-column-bars i { width: 25px; max-width: 32%; border-radius: 3px 3px 0 0; min-height: 0; }
.sales-bar { background: #6189d4; } .profit-bar { background: #71ada4; } .shop-column-bars .loss-bar { background: #cf8692; }
.shop-column-label { display: flex; align-items: center; flex-direction: column; gap: 4px; padding-top: 12px; }
.shop-column-label b { color: #606060; font-size: 13px; font-weight: 500; }
.shop-column-label span { color: #727373; font-size: 11px; }
.shop-column-tooltip { display: none; position: absolute; bottom: 55px; left: 50%; transform: translateX(-50%); padding: 9px 13px; border: 1px solid #c5d2e6; border-radius: 5px; background: #fff; box-shadow: 0 4px 18px #314b6e20; color: #5c5c5c; font-size: 12px; line-height: 1.9; white-space: nowrap; z-index: 5; pointer-events: none; }
.shop-column:hover .shop-column-tooltip,.shop-column:focus-visible .shop-column-tooltip { display: block; }
.cost-composition { display: grid; grid-template-columns: 162px minmax(0,1fr); gap: 24px; align-items: center; min-height: 232px; }
.cost-ring { width: 162px; aspect-ratio: 1; border-radius: 50%; padding: 13px; }
.cost-ring > div { width: 100%; height: 100%; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: #fafbfe; }
.cost-ring span { color: #727373; font-size: 11px; }
.cost-ring strong { font-size: 20px; color: #525458; font-weight: 500; max-width: 100%; text-align: center; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.cost-legend { display: grid; gap: 11px; min-width: 0; }
.cost-legend > div { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12px; }
.cost-legend span { display: flex; align-items: center; gap: 8px; color: #727373; white-space: nowrap; }
.cost-legend i { width: 6px; height: 6px; border-radius: 1px; flex-shrink: 0; }
.cost-legend b { color: #666667; font-size: 12px; font-weight: 500; white-space: nowrap; }
.staff-card { background: transparent; padding: 17px 0; }
.staff-card > span { background: #e5ecf6; color: #6e7277; border-radius: 4px; }
.staff-card strong { color: #5c5c5d; font-size: 14px; }
.staff-card em { color: #727373; font-size: 12px; }
.staff-card b { color: #666c71; font-weight: 500; font-size: 21px; }
.rank-track { background: #e5ebf3; height: 5px; }
.rank-track i.profit { background: #7c9ac4; }
.quality-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; border: 0; }
.quality-card { background: transparent; border: 0; padding: 4px 0; }
.quality-card strong { font-size: 25px; font-weight: 500; color: #5e5e5f; }
.quality-card span { color: #727373; font-size: 13px; }
.quality-card small,.quality-card em { font-size: 11px; color: #737373; }
.quality-stack { height: 5px; }
.quality-stack .quality-seg { min-width: 0; }
.seg-0 { background: #769bda; } .seg-1 { background: #79ada3; } .seg-2 { background: #b1b3b5; } .seg-3 { background: #c78894; } .seg-4 { background: #979a9e; }
.detail-metrics { background: #edf1f7; border-radius: 0; padding: 16px; margin-bottom: 22px; }
.detail-metrics b { font-size: 15px; }
.detail-table-card { background: transparent; border: 0; padding: 0; }
.content > .toolbar { background: #f8fafe; border-top: 1px solid #d3d4d6; padding: 20px 23px; }
.filter-actions { padding-top: 12px; border-top: 1px solid #dde4ee; }
.table-wrap { background: #fff; border-color: #ccd6e5; border-radius: 5px; }
th { background: #eaf0f8; color: #727373; border-color: #cfd9e8; height: 44px; font-size: 12px; }
td { background: #fff; color: #616161; border-color: #e3e8f0; padding: 12px 13px; font-size: 12px; }
tbody tr:nth-child(even) td { background: #f8fafd; }
tbody tr:hover td { background: #edf3fd; }
body[data-view=orders] .table-wrap th:last-child,body[data-view=offline] .table-wrap th:last-child { background: #eaf0f8; }
body[data-view=orders] .table-wrap td:last-child,body[data-view=offline] .table-wrap td:last-child { background: #f7faff; box-shadow: -6px 0 10px #65666908; }
.quote-workspace { display: grid; grid-template-columns: minmax(330px,.84fr) minmax(0,2fr); gap: 25px; align-items: start; }
.quote-editor { background: #e0e6ef; padding: 23px; border: 0; border-top: 2px solid #aeb0b4; position: static; }
.quote-editor .quote-item-row { background: transparent; }
.quote-surface-head,.quote-size-head { border-color: #c5d0e1; margin-bottom: 20px; padding-bottom: 14px; }
.quote-surface-head h3,.quote-size-head h3 { color: #4b4b4c; font-size: 15px; font-weight: 600; }
.quote-state { color: #6e7278; background: #dce6f7; border: 1px solid #c3d3ed; font-size: 11px; border-radius: 4px; }
.quote-field-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 17px; }
.quote-size-head { margin-top: 23px; }
.quote-result { padding: 23px 0 0; background: transparent; border-top: 2px solid #aeb0b4; }
.quote-modes { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; align-items: stretch; margin-top: 0; }
.quote-mode-card,.quote-mode-card.normal,.quote-mode-card.volume,.quote-mode-card.highPromo { background: #fafcfe; border: 1px solid #c7d3e5; border-top: 3px solid #a6a9ad; border-radius: 6px; box-shadow: 0 2px 5px #36588708; padding: 20px; display: flex; flex-direction: column; min-width: 0; }
.quote-mode-card.volume { border-top-color: #739d99; }
.quote-mode-card.highPromo { background: #edf3ff; border-color: #a2bce9; border-top-color: #4c77d0; }
.quote-mode-head { gap: 0; }
.quote-mode-head > span { display: flex; align-items: center; gap: 8px; color: #676767; font-size: 14px; font-weight: 550; }
.quote-mode-head > span svg { width: 16px; height: 16px; color: #727373; }
.quote-mode-head strong,.quote-mode-card.volume .quote-mode-head strong,.quote-mode-card.highPromo .quote-mode-head strong { color: #4b4d51; margin: 17px 0 0; font-size: 38px; font-weight: 550; line-height: 1.2; white-space: normal; overflow-wrap: anywhere; }
.quote-mode-head strong small { font-size: 20px; color: #727373; margin-right: 4px; font-weight: 400; }
.quote-mode-card.highPromo .quote-mode-head strong { color: #345ead; }
.quote-unit { color: #727373; font-size: 12px; margin: 8px 0 16px; font-weight: 400; }
.quote-mode-detail { display: grid; gap: 10px; margin-top: 0; background: transparent; padding: 14px 0; border-top: 1px solid #d0dced; border-bottom: 0; }
.quote-mode-detail > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.quote-mode-detail span { color: #727373; font-size: 12px; }
.quote-mode-detail b { color: #69696a; font: 500 13px/1.5 "Segoe UI",sans-serif; }
.quote-mode-detail .positive { color: #26806f; }
.quote-mode-detail .negative { color: #bf5967; }
.quote-rule { border-bottom: 1px solid #d0dced; padding: 1px 0 11px; color: #727373; font-size: 11px; }
.quote-rule summary { cursor: pointer; }
.quote-rule p { color: #727373; margin: 8px 0 0; font-size: 12px; line-height: 1.8; }
.quote-price-hint { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px 9px; background: transparent; border: 0; border-left: 2px solid #87a7e2; padding: 0 0 0 12px; border-radius: 0; color: #6e7278; font-size: 12px; margin: 20px 0 0; }
.quote-price-hint > svg { width: 14px; height: 14px; align-self: center; }
.quote-price-hint strong { color: #6d7179; font-size: 12px; }
.quote-script { margin-top: auto; padding-top: 16px; }
.quote-script > label { color: #727373; font-size: 11px; display: block; margin-bottom: 7px; }
.quote-mode-card .quote-script textarea { display: block; background: #f1f4fa; color: #727373; border: 1px solid #d8e1ee; height: 108px; min-height: 108px; padding: 10px 12px; line-height: 1.85; font-size: 12px; font-weight: 400; margin: 0 0 13px; resize: vertical; flex: none; }
.quote-mode-card.highPromo .quote-script textarea { background: #f8faff; }
.quote-mode-card .btn.primary { background: #fff; border-color: #adbfda; color: #727373; box-shadow: none; min-height: 37px; }
.quote-mode-card .btn.primary:hover { background: #e9f0fc; border-color: #7c9ed9; }
.quote-mode-card.highPromo .btn.primary { background: #4272d3; border-color: #4272d3; color: #fff; }
.quote-reference { margin-top: 20px; border-color: #c9d5e7; }
.quote-reference > summary { color: #727373; padding: 13px 0; }
.quote-history { background: #f4f7fc; }
.quote-logistics { background: transparent; border-color: #c9d5e7; margin-top: 20px; padding-top: 17px; }
.quote-logistics strong { font-size: 12px; color: #727373; }
.quote-result-wrap > .quote-surface:not(.quote-result) { background: #f8faff; padding: 20px; margin-top: 20px; border-top-color: #c3d1e5; }
.shop-selected { background: #eaf0fa; border-color: #cad8ed; color: #727373; }
.offline-item-result { background: #edf2fa; color: #727373; }
.segmented-control button.active { color: #3865b3; }
.summary-line strong { color: #666a6f; }
.notice { background: #f0f5fb; border-color: #d4dfed; color: #727373; }
.notice.warn { background: #fff7e9; border-color: #eadabd; color: #967535; }
.expense-hero,.reconcile-hero { background: #dce5f3; color: #66696e; border-top: 2px solid #9db3d4; }
.expense-hero strong,.reconcile-hero strong { color: #55595e; }
.expense-panel { background: #fafcff; }
.expense-cards { grid-template-columns: repeat(4,minmax(0,1fr)); }
.expense-cards > :first-child { grid-column: span 2; }
body[data-view=settings] .content > .toolbar { justify-content: flex-start; gap: 12px; }
.expense-footer { background: #edf3fc; }
.reconcile-filter-card.active { border-color: #95aed4; background: #edf3ff; }
.login-shell { background: #e6ebf3; }
.login-card { border-color: #cdd8e9; box-shadow: 0 15px 45px #304b7012; }
.record-footer { opacity: .8; color: #737373; }
@media(min-width:1700px) {
  .quote-field-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .hero-profit > strong { font-size: 47px; }
  .hero-revenue > strong { font-size: 41px; }
  .shop-column-bars { height: 180px; }
  .cost-composition { grid-template-columns: 180px minmax(0,1fr); gap: 26px; }
  .cost-ring { width: 180px; }
}
@media(max-width:1350px) {
  .layout { grid-template-columns: 193px minmax(0,1fr); }
  .content { padding: 24px; }
  .dashboard-hero { padding: 22px; }
  .dashboard-hero > div { padding: 0 20px; }
  .hero-profit > strong { font-size: 35px; }
  .hero-revenue > strong { font-size: 31px; }
  .hero-profit .hero-label .profit-rate { display: none; }
  .dashboard-cards { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .quote-workspace { grid-template-columns: 1fr; }
  .quote-field-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .quote-item-row { grid-template-columns: repeat(4,minmax(0,1fr)) 38px; }
  .quote-item-row > .field:nth-child(4) { grid-column: auto; }
  .cost-composition { grid-template-columns: 1fr; gap: 18px; }
  .cost-ring { margin: 0 auto; }
  .cost-legend { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .cost-legend > div { flex-direction: column; align-items: flex-start; gap: 3px; }
}
@media(max-width:1000px) {
  .dashboard-hero { grid-template-columns: 1.1fr 1fr; }
  .dashboard-hero > .hero-profit { grid-column: 1 / -1; border: 0; padding: 0 0 20px; margin-bottom: 20px; border-bottom: 1px solid #d4deed; }
  .dashboard-hero > .hero-revenue { border: 0; padding-left: 0; }
  .dashboard-hero > div { min-height: 0; }
  .hero-profit .hero-label .profit-rate { display: block; }
  .hero-profit > strong { font-size: 43px; }
  .hero-foot { flex-wrap: wrap; }
  .shop-chart { overflow-x: auto; }
  .shop-column-total { font-size: 11px; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .dashboard-grid > * { grid-column: 1 / -1; }
  .cost-composition { grid-template-columns: 180px minmax(0,1fr); }
  .cost-legend { grid-template-columns: 1fr; }
  .cost-legend > div { flex-direction: row; }
}
@media(max-width:850px) {
  .expense-cards { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .layout { display: block; }
  .sidebar { width: 216px; }
  .content { padding: 23px 18px; }
  .topbar { padding: 0 16px; }
}
@media(max-width:560px) {
  .content { padding: 21px 15px 35px; }
  .workspace-page-heading h1,.dashboard-titlebar h1 { font-size: 23px; }
  .workspace-page-heading > span { font-size: 11px; }
  .period-segments { width: 100%; flex: 1 0 100%; }
  .period-segments button { flex: 1; padding: 0 10px; }
  .dashboard-toolbar .toolbar-left input[type=date] { flex: 1 1 145px; min-width: 140px; }
  #refreshDash { flex: 0 0 38px; width: 38px; min-width: 38px; }
  .dashboard-hero { padding: 20px; }
  .hero-profit > strong { font-size: 36px; }
  .hero-revenue > strong { font-size: 25px; }
  .hero-volume > strong { font-size: 31px; }
  .hero-volume .hero-label > span:last-child,.hero-revenue .hero-label > svg { display: none; }
  .hero-label > span:first-child { gap: 6px; }
  .dashboard-hero > .hero-volume { padding-right: 0; padding-left: 15px; }
  .hero-foot { flex-direction: column; align-items: flex-start; gap: 4px; font-size: 11px; }
  .hero-foot b { font-size: 12px; margin-left: 0; }
  .dashboard-cards { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .cards .metric,.dashboard-cards .metric { padding: 14px; }
  .cards .metric strong,.dashboard-cards .metric strong { font-size: 21px; }
  .dashboard-utilities { grid-template-columns: 1fr; gap: 2px; }
  .panel,.visual-panel,.analysis-panel,.diagnosis-panel,.quote-surface,.dashboard-grid .visual-panel { padding: 19px 15px; }
  .shop-chart { gap: 3px; }
  .shop-column { padding: 0; }
  .shop-column-bars { height: 140px; }
  .cost-composition { grid-template-columns: 125px minmax(0,1fr); gap: 12px; }
  .cost-ring { width: 122px; padding: 10px; }
  .cost-ring strong { font-size: 16px; }
  .cost-ring span { font-size: 10px; }
  .cost-legend span,.cost-legend b { font-size: 11px; }
  .cost-legend > div { gap: 5px; }
  .cost-legend span { gap: 5px; }
  .quote-workspace { gap: 20px; }
  .quote-result { padding: 18px 0 0; }
  .quote-field-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .quote-item-row { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .quote-item-row > .field:nth-child(4) { grid-column: 1 / 3; }
  .quote-modes { grid-template-columns: 1fr; gap: 15px; }
  .quote-mode-card { padding: 21px; }
  .quote-mode-head { align-items: center; flex-direction: row; }
  .quote-mode-head strong { margin-top: 0; }
  .quote-mode-card .quote-script textarea { height: 90px; min-height: 90px; }
}