:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.1884 0.0128 248.5103);
  --card: oklch(0.9784 0.0011 197.1387);
  --card-foreground: oklch(0.1884 0.0128 248.5103);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.1884 0.0128 248.5103);
  --primary: oklch(0.6723 0.1606 244.9955);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.1884 0.0128 248.5103);
  --secondary-foreground: oklch(1 0 0);
  --muted: oklch(0.9222 0.0013 286.3737);
  --muted-foreground: oklch(0.47 0.015 248.5103);
  --accent: oklch(0.9392 0.0166 250.8453);
  --accent-foreground: oklch(0.6723 0.1606 244.9955);
  --destructive: oklch(0.6188 0.2376 25.7658);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.9317 0.0118 231.6594);
  --input: oklch(0.9809 0.0025 228.7836);
  --ring: oklch(0.6818 0.1584 243.354);
  --chart-1: oklch(0.6723 0.1606 244.9955);
  --chart-2: oklch(0.6907 0.1554 160.3454);
  --chart-3: oklch(0.8214 0.16 82.5337);
  --chart-4: oklch(0.7064 0.1822 151.7125);
  --chart-5: oklch(0.5919 0.2186 10.5826);
  --sidebar: oklch(0.9784 0.0011 197.1387);
  --sidebar-foreground: oklch(0.1884 0.0128 248.5103);
  --sidebar-primary: oklch(0.6723 0.1606 244.9955);
  --sidebar-primary-foreground: oklch(1 0 0);
  --sidebar-accent: oklch(0.9392 0.0166 250.8453);
  --sidebar-accent-foreground: oklch(0.6723 0.1606 244.9955);
  --sidebar-border: oklch(0.9271 0.0101 238.5177);
  --sidebar-ring: oklch(0.6818 0.1584 243.354);
  --font-sans: "Open Sans", Arial, sans-serif;
  --font-mono: Menlo, Consolas, monospace;
  --radius: 1.3rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-xl: calc(var(--radius) + 4px);
  --success: oklch(0.625 0.17 154);
  --warning: oklch(0.72 0.17 73);
  --rose: oklch(0.63 0.20 22);
}

html[data-theme="dark"] {
  --background: oklch(0.155 0.012 248);
  --foreground: oklch(0.94 0.008 248);
  --card: oklch(0.205 0.014 248);
  --card-foreground: oklch(0.94 0.008 248);
  --popover: oklch(0.19 0.014 248);
  --popover-foreground: oklch(0.94 0.008 248);
  --primary: oklch(0.72 0.145 244);
  --primary-foreground: oklch(0.145 0.012 248);
  --secondary: oklch(0.28 0.018 248);
  --secondary-foreground: oklch(0.95 0.006 248);
  --muted: oklch(0.255 0.012 248);
  --muted-foreground: oklch(0.72 0.012 248);
  --accent: oklch(0.255 0.035 248);
  --accent-foreground: oklch(0.79 0.12 244);
  --destructive: oklch(0.72 0.18 24);
  --destructive-foreground: oklch(0.98 0 0);
  --border: oklch(0.31 0.018 248);
  --input: oklch(0.225 0.014 248);
  --ring: oklch(0.72 0.145 244);
  --chart-1: oklch(0.72 0.145 244);
  --chart-2: oklch(0.74 0.14 160);
  --chart-3: oklch(0.80 0.15 82);
  --chart-4: oklch(0.73 0.16 151);
  --chart-5: oklch(0.72 0.17 18);
  --sidebar: oklch(0.18 0.014 248);
  --sidebar-foreground: oklch(0.92 0.008 248);
  --sidebar-primary: oklch(0.72 0.145 244);
  --sidebar-primary-foreground: oklch(0.145 0.012 248);
  --sidebar-accent: oklch(0.255 0.035 248);
  --sidebar-accent-foreground: oklch(0.79 0.12 244);
  --sidebar-border: oklch(0.29 0.018 248);
  --sidebar-ring: oklch(0.72 0.145 244);
  --success: oklch(0.72 0.15 154);
  --warning: oklch(0.80 0.15 73);
  --rose: oklch(0.72 0.17 22);
}

* { box-sizing: border-box; border-color: var(--border); }
html { min-width: 320px; background: var(--background); color: var(--foreground); font-family: var(--font-sans); }
body { overflow-x: hidden; margin: 0; min-height: 100vh; background: var(--background); color: var(--foreground); font-size: 15px; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid color-mix(in oklch, var(--ring) 32%, transparent); outline-offset: 2px; }

.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(360px, 44%) 1fr; }
.login-card { width: min(410px, calc(100% - 48px)); margin: auto; padding: 52px 20px; }
.brand-mark { width: 42px; height: 42px; display: inline-grid; place-items: center; border-radius: 15px; background: var(--primary); color: var(--primary-foreground); flex: 0 0 auto; }
.brand-mark svg { width: 23px; height: 23px; stroke-width: 2.2; }
.theme-brand { display: block; }
.theme-logo { display: block; width: auto; height: auto; }
.theme-logo-dark { display: none; }
html[data-theme="dark"] .theme-logo-light { display: none; }
html[data-theme="dark"] .theme-logo-dark { display: block; }
.login-brand { width: 118px; margin-bottom: 25px; }
.login-brand .theme-logo { width: 100%; }
.login-heading .eyebrow { margin-bottom: 7px; }
.eyebrow { display: block; color: var(--primary); font-size: 12px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.login-heading h1 { margin: 0; font-size: 32px; line-height: 1.2; letter-spacing: -.04em; }
.login-heading p { margin: 10px 0 30px; color: var(--muted-foreground); line-height: 1.6; }
.stack-form { display: grid; gap: 17px; }
.field { display: grid; gap: 7px; min-width: 0; }
.field > span, .filter-panel label > span, .period-picker label > span { color: var(--foreground); font-size: 13px; font-weight: 600; }
.field em { color: var(--muted-foreground); font-size: 12px; font-style: normal; font-weight: 400; }
input, select, textarea { width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--input); transition: border-color .16s, box-shadow .16s, background .16s; }
input, select { height: 43px; padding: 0 13px; }
textarea { min-height: 86px; padding: 11px 13px; resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: color-mix(in oklch, var(--primary) 25%, var(--border)); }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--ring); background: var(--background); box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 15%, transparent); }
input::placeholder, textarea::placeholder { color: color-mix(in oklch, var(--muted-foreground) 65%, transparent); }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 17px) 18px, calc(100% - 12px) 18px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 34px; }
.button { min-height: 43px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: var(--radius-sm); padding: 0 17px; font-weight: 700; font-size: 13px; transition: transform .14s, background .14s, border-color .14s, color .14s; }
.button svg { width: 17px; height: 17px; }
.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(0); }
.button:disabled { cursor: not-allowed; opacity: .58; transform: none; }
.button.primary { background: var(--primary); color: var(--primary-foreground); }
.button.primary:hover { background: color-mix(in oklch, var(--primary) 88%, var(--foreground)); }
.button.secondary { background: var(--secondary); color: var(--secondary-foreground); }
.button.secondary:hover { background: color-mix(in oklch, var(--secondary) 88%, var(--background)); }
.button.ghost { border-color: var(--border); background: var(--background); color: var(--foreground); }
.button.ghost:hover { background: var(--accent); color: var(--accent-foreground); }
.button.full { width: 100%; justify-content: space-between; padding-inline: 18px 14px; }
.button.compact { height: 39px; min-height: 39px; padding-inline: 15px; }
.form-error { margin: 0; border-radius: var(--radius-sm); padding: 10px 12px; background: color-mix(in oklch, var(--destructive) 9%, var(--background)); color: var(--destructive); font-size: 12px; font-weight: 600; line-height: 1.45; }
.login-hint { margin: 22px 0 0; color: var(--muted-foreground); font-size: 12px; line-height: 1.55; }
.login-theme-toggle { position: fixed; z-index: 5; top: 22px; left: 22px; border: 1px solid var(--border); background: var(--card); }
.theme-toggle .theme-sun { display: none; }
.theme-toggle .theme-moon { display: block; }
html[data-theme="dark"] .theme-toggle .theme-sun { display: block; }
html[data-theme="dark"] .theme-toggle .theme-moon { display: none; }
.login-aside { position: relative; overflow: hidden; margin: 14px; border-radius: 30px; background: var(--secondary); color: white; }
.aside-content { position: relative; z-index: 1; min-height: calc(100vh - 28px); display: flex; flex-direction: column; justify-content: center; width: min(610px, 78%); margin: auto; }
.aside-kicker { color: color-mix(in oklch, var(--primary) 78%, white); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.aside-content h2 { max-width: 600px; margin: 14px 0 34px; font-size: clamp(34px, 4vw, 58px); line-height: 1.08; letter-spacing: -.05em; }
.aside-preview { width: min(470px, 100%); overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 24px; padding: 24px 24px 0; background: rgba(255,255,255,.07); backdrop-filter: blur(12px); }
.preview-head { display: flex; justify-content: space-between; align-items: center; color: rgba(255,255,255,.7); font-size: 12px; }
.trend-badge { border-radius: 99px; padding: 5px 8px; background: rgba(59,210,145,.13); color: #72e8b0; }
.aside-preview strong { display: block; margin-top: 9px; font-size: 30px; letter-spacing: -.04em; }
.aside-preview svg { width: calc(100% + 48px); height: 145px; margin: 16px -24px 0; }
.aside-preview .area { fill: color-mix(in oklch, var(--primary) 25%, transparent); stroke: none; }
.aside-preview .line { stroke: color-mix(in oklch, var(--primary) 75%, white); stroke-width: 3; }
.aside-orb { position: absolute; border-radius: 999px; filter: blur(2px); opacity: .23; }
.orb-one { width: 500px; height: 500px; right: -180px; top: -160px; background: var(--primary); }
.orb-two { width: 350px; height: 350px; left: -170px; bottom: -110px; background: var(--chart-2); }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 246px 1fr; }
.sidebar { position: fixed; z-index: 10; inset: 0 auto 0 0; width: 246px; display: flex; flex-direction: column; border-right: 1px solid var(--sidebar-border); padding: 22px 15px 15px; background: var(--sidebar); color: var(--sidebar-foreground); }
.brand { display: block; width: 174px; margin: 0 7px 25px; color: inherit; text-decoration: none; }
.brand .theme-logo { width: 100%; }
.main-nav { display: grid; gap: 4px; }
.main-nav a { display: flex; align-items: center; gap: 11px; height: 43px; border-radius: var(--radius-sm); padding: 0 12px; color: color-mix(in oklch, var(--sidebar-foreground) 70%, transparent); font-size: 13px; font-weight: 600; text-decoration: none; transition: background .15s, color .15s; }
.main-nav a svg { width: 18px; height: 18px; }
.main-nav a:hover { background: color-mix(in oklch, var(--sidebar-accent) 58%, transparent); color: var(--sidebar-accent-foreground); }
.main-nav a.active { background: var(--sidebar-accent); color: var(--sidebar-accent-foreground); }
.nav-label { margin: 18px 12px 5px; color: var(--muted-foreground); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.nav-label:first-child { margin-top: 0; }
.sidebar-note { display: flex; align-items: flex-start; gap: 10px; margin-top: auto; border: 1px solid var(--sidebar-border); border-radius: var(--radius-sm); padding: 13px; background: var(--background); }
.note-icon { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 9px; flex: 0 0 auto; background: var(--accent); color: var(--primary); }
.note-icon svg { width: 14px; height: 14px; }
.sidebar-note div { display: grid; gap: 3px; }
.sidebar-note strong { font-size: 11px; }
.sidebar-note small { color: var(--muted-foreground); font-size: 11px; line-height: 1.4; }
.user-menu { display: flex; align-items: center; gap: 9px; margin-top: 12px; padding: 11px 7px 3px; border-top: 1px solid var(--sidebar-border); }
.avatar { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 12px; flex: 0 0 auto; background: var(--secondary); color: var(--secondary-foreground); font-size: 12px; font-weight: 700; }
.user-copy { min-width: 0; display: grid; gap: 2px; flex: 1; }
.user-copy strong { font-size: 12px; }
.user-copy small { overflow: hidden; color: var(--muted-foreground); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.icon-button { width: 36px; height: 36px; display: inline-grid; place-items: center; border: 0; border-radius: 12px; background: transparent; color: var(--muted-foreground); transition: background .15s, color .15s; }
.icon-button:hover { background: var(--accent); color: var(--accent-foreground); }
.icon-button svg { width: 18px; height: 18px; }
.main-content { grid-column: 2; min-width: 0; }
.topbar { height: 78px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); padding: 0 clamp(22px, 3vw, 44px); background: color-mix(in oklch, var(--background) 95%, transparent); }
.topbar h1 { margin: 3px 0 0; font-size: 19px; letter-spacing: -.03em; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.demo-badge { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border); border-radius: 99px; padding: 7px 11px; background: var(--card); color: var(--muted-foreground); font-size: 11px; font-weight: 600; }
.demo-badge > span { width: 6px; height: 6px; border-radius: 99px; background: var(--chart-2); box-shadow: 0 0 0 3px color-mix(in oklch, var(--chart-2) 18%, transparent); }
.mobile-logout { display: none; }
.page { max-width: 1480px; margin: 0 auto; padding: 33px clamp(22px, 3vw, 44px) 46px; }
.page-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.page-intro h2 { margin: 0; font-size: 24px; line-height: 1.25; letter-spacing: -.035em; }
.page-intro p { margin: 7px 0 0; color: var(--muted-foreground); font-size: 13px; line-height: 1.5; }
.period-picker { display: flex; align-items: flex-end; gap: 7px; border: 1px solid var(--border); border-radius: var(--radius); padding: 8px; background: var(--card); }
.period-picker label { display: grid; gap: 3px; }
.period-picker label > span { padding-left: 5px; color: var(--muted-foreground); font-size: 10px; text-transform: uppercase; }
.period-picker input { width: 138px; height: 35px; border: 0; background: var(--background); font-size: 12px; }
.period-arrow { align-self: center; margin-top: 12px; color: var(--muted-foreground); }
.notice { margin-bottom: 18px; border-radius: var(--radius-sm); padding: 12px 14px; font-size: 12px; }
.notice.error { background: color-mix(in oklch, var(--destructive) 10%, var(--background)); color: var(--destructive); }
.compatibility-alert { border: 1px solid color-mix(in oklch, var(--destructive) 24%, var(--border)); line-height: 1.5; }
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.kpi-card { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; background: var(--card); transition: border-color .16s, box-shadow .16s, transform .16s; }
.kpi-card:hover { border-color: color-mix(in oklch, var(--primary) 24%, var(--border)); box-shadow: 0 8px 24px color-mix(in oklch, var(--foreground) 5%, transparent); transform: translateY(-1px); }
.kpi-card.tone-blue { background: linear-gradient(145deg, color-mix(in oklch, var(--primary) 7%, var(--card)), var(--card) 72%); }
.kpi-card.tone-rose { background: linear-gradient(145deg, color-mix(in oklch, var(--rose) 7%, var(--card)), var(--card) 72%); }
.kpi-card.tone-green { background: linear-gradient(145deg, color-mix(in oklch, var(--success) 7%, var(--card)), var(--card) 72%); }
.kpi-card.tone-amber { background: linear-gradient(145deg, color-mix(in oklch, var(--warning) 9%, var(--card)), var(--card) 72%); }
.kpi-top { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.kpi-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; }
.kpi-icon svg { width: 15px; height: 15px; }
.kpi-icon.blue { background: var(--accent); color: var(--primary); }
.kpi-icon.rose { background: color-mix(in oklch, var(--rose) 12%, var(--card)); color: var(--rose); }
.kpi-icon.green { background: color-mix(in oklch, var(--success) 13%, var(--card)); color: var(--success); }
.kpi-icon.amber { background: color-mix(in oklch, var(--warning) 14%, var(--card)); color: color-mix(in oklch, var(--warning) 82%, var(--foreground)); }
.kpi-icon.inverted { background: color-mix(in oklch, var(--success) 14%, var(--card)); color: var(--success); }
.kpi-label { color: var(--muted-foreground); font-size: 11px; font-weight: 600; }
.kpi-card > strong { display: block; overflow: hidden; margin-bottom: 6px; font-size: clamp(19px, 2vw, 27px); letter-spacing: -.045em; text-overflow: ellipsis; white-space: nowrap; }
.kpi-card > small { display: block; color: var(--muted-foreground); font-size: 11px; line-height: 1.45; }
.stage-badge { display: inline-flex; margin: 0 0 7px; border: 1px solid var(--border); border-radius: 99px; padding: 4px 7px; background: color-mix(in oklch, var(--background) 74%, transparent); color: var(--muted-foreground); font-size: 10px; font-weight: 700; }
.result-highlight { background: linear-gradient(145deg, color-mix(in oklch, var(--success) 11%, var(--card)), var(--card) 74%); }
.result-highlight:hover { box-shadow: 0 10px 28px color-mix(in oklch, var(--success) 13%, transparent); }
.result-highlight.negative { background: linear-gradient(145deg, color-mix(in oklch, var(--destructive) 11%, var(--card)), var(--card) 74%); }
.result-highlight.negative .kpi-icon { background: color-mix(in oklch, var(--destructive) 14%, var(--card)); color: var(--destructive); }
.result-highlight.negative > strong { color: var(--destructive); }
.ticket-card { background: color-mix(in oklch, var(--muted) 36%, var(--card)); }
.kpi-card.negative > strong { color: var(--destructive); }
.kpi-card.result-highlight.negative > strong { color: var(--destructive); }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(280px, .85fr); gap: 13px; margin-top: 13px; }
.panel { min-width: 0; border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; background: var(--card); }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.panel-head h3 { margin: 0; font-size: 14px; letter-spacing: -.015em; }
.panel-head p { margin: 4px 0 0; color: var(--muted-foreground); font-size: 10px; }
.trend-panel { background: linear-gradient(180deg, color-mix(in oklch, var(--accent) 20%, var(--card)), var(--card) 40%); }
.trend-head h3 { margin-top: 5px; font-size: 15px; }
.chart-legend { display: flex; align-items: center; gap: 13px; color: var(--muted-foreground); font-size: 10px; }
.chart-legend span { display: flex; align-items: center; gap: 6px; }
.legend-dot { width: 7px; height: 7px; border-radius: 3px; }
.legend-dot.sales { background: var(--chart-1); }
.legend-dot.expenses { background: var(--chart-5); }
.trend-chart { position: relative; min-height: 205px; margin-top: 8px; }
.trend-chart svg { width: 100%; height: auto; min-height: 205px; overflow: visible; outline: none; touch-action: pan-y; }
.trend-chart svg:focus-visible { border-radius: 8px; box-shadow: 0 0 0 2px color-mix(in oklch, var(--ring) 45%, transparent); }
.trend-chart .grid-line { stroke: color-mix(in oklch, var(--border) 75%, transparent); stroke-width: 1; stroke-dasharray: 2 5; }
.trend-chart .chart-area { stroke: none; opacity: 1; animation: chart-area-in .5s .12s ease-out; transition: opacity .18s; }
.trend-chart .sales-area { fill: url(#sales-area); }
.trend-chart .expenses-area { fill: url(#expenses-area); }
.sales-gradient-start { stop-color: var(--chart-1); stop-opacity: .2; }
.sales-gradient-end { stop-color: var(--chart-1); stop-opacity: .01; }
.expenses-gradient-start { stop-color: var(--chart-5); stop-opacity: .13; }
.expenses-gradient-end { stop-color: var(--chart-5); stop-opacity: 0; }
.trend-chart .chart-line { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: chart-line-in .65s cubic-bezier(.22,.75,.25,1) forwards; transition: opacity .18s, stroke-width .18s; }
.trend-chart .sales-line { stroke: var(--chart-1); }
.trend-chart .expenses-line { stroke: var(--chart-5); }
.trend-chart .chart-line.active { stroke-width: 3; }
.trend-chart .chart-line.muted { opacity: .28; }
.trend-chart .chart-area.active { opacity: 1; }
.trend-chart .chart-area.muted { opacity: .1; }
.trend-chart .chart-point { opacity: 0; pointer-events: none; stroke: var(--card); stroke-width: 2; transition: opacity .15s, r .15s; }
.trend-chart .chart-point.visible { opacity: 1; }
.trend-chart .chart-point.active { r: 5.5px; }
.trend-chart .sales-point { fill: var(--chart-1); }
.trend-chart .expenses-point { fill: var(--chart-5); }
.trend-chart .chart-crosshair { opacity: 0; stroke: color-mix(in oklch, var(--foreground) 22%, transparent); stroke-width: 1; stroke-dasharray: 3 4; pointer-events: none; transition: opacity .15s; }
.trend-chart .chart-crosshair.visible { opacity: 1; }
.trend-chart .chart-hit-area { fill: transparent; stroke: none; cursor: crosshair; }
.trend-chart text { fill: var(--muted-foreground); stroke: none; font: 9px var(--font-sans); }
.chart-tooltip { position: absolute; z-index: 3; width: 156px; display: grid; gap: 7px; border: 1px solid var(--border); border-radius: 11px; padding: 10px; background: color-mix(in oklch, var(--popover) 96%, transparent); box-shadow: 0 10px 30px color-mix(in oklch, var(--foreground) 13%, transparent); pointer-events: none; transform: translate(-50%, -100%); animation: chart-tooltip-in .12s ease-out; }
.chart-tooltip[hidden] { display: none; }
.chart-tooltip-date { font-size: 10px; font-weight: 700; }
.chart-tooltip-row { display: grid; grid-template-columns: 7px minmax(0, 1fr) auto; align-items: center; gap: 6px; color: var(--muted-foreground); font-size: 10px; transition: color .15s; }
.chart-tooltip-row b { color: var(--foreground); font-size: 10px; }
.chart-tooltip-row.active { color: var(--foreground); font-weight: 700; }
@keyframes chart-line-in { to { stroke-dashoffset: 0; } }
@keyframes chart-area-in { from { opacity: 0; } }
@keyframes chart-tooltip-in { from { opacity: 0; transform: translate(-50%, calc(-100% + 4px)); } }
.chart-empty { min-height: 205px; display: grid; place-items: center; color: var(--muted-foreground); font-size: 12px; }
.category-chart { min-height: 255px; display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 22px; margin-top: 16px; }
.donut { position: relative; width: 145px; aspect-ratio: 1; border-radius: 50%; }
.donut::after { content: ""; position: absolute; inset: 28px; border-radius: 50%; background: var(--card); }
.donut-center { position: absolute; z-index: 1; inset: 0; display: grid; place-content: center; text-align: center; }
.donut-center strong { font-size: 14px; letter-spacing: -.03em; }
.donut-center small { color: var(--muted-foreground); font-size: 9px; }
.category-legend { display: grid; gap: 10px; }
.category-item { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 3px 8px; align-items: center; }
.category-item i { width: 7px; height: 7px; grid-row: 1 / 3; border-radius: 3px; }
.category-item span { overflow: hidden; font-size: 10px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.category-item small { color: var(--muted-foreground); font-size: 9px; }
.managerial-disclaimer { margin: 13px 4px 0; color: var(--muted-foreground); font-size: 10px; line-height: 1.5; }
.section-intro { align-items: center; }
.filter-panel { display: grid; grid-template-columns: 145px 145px repeat(3, minmax(150px, 1fr)) auto; align-items: end; gap: 9px; border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; background: var(--card); }
.filter-panel label { min-width: 0; display: grid; gap: 5px; }
.filter-panel input, .filter-panel select { height: 39px; background-color: var(--background); font-size: 12px; }
.expense-filter-panel { grid-template-columns: 145px 145px minmax(160px, .8fr) minmax(220px, 1.5fr) auto; }
.list-summary { display: flex; align-items: center; justify-content: space-between; padding: 18px 4px 9px; }
.list-summary span { color: var(--muted-foreground); font-size: 11px; }
.list-summary strong { font-size: 14px; }
.table-card { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; white-space: nowrap; }
th { position: relative; height: 43px; padding: 0 15px; border-bottom: 1px solid var(--border); color: var(--muted-foreground); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-align: left; text-transform: uppercase; }
td { height: 61px; padding: 9px 15px; border-bottom: 1px solid var(--border); font-size: 12px; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .13s; }
tbody tr:hover { background: color-mix(in oklch, var(--accent) 46%, transparent); }
.primary-cell { display: grid; gap: 3px; min-width: 190px; }
.primary-cell strong { max-width: 250px; overflow: hidden; font-size: 12px; text-overflow: ellipsis; }
.primary-cell small { color: var(--muted-foreground); font-size: 11px; }
.status-pill { display: inline-flex; align-items: center; border-radius: 99px; padding: 5px 8px; background: var(--accent); color: var(--accent-foreground); font-size: 11px; font-weight: 600; }
.expense-pill { background: color-mix(in oklch, var(--rose) 10%, var(--card)); color: color-mix(in oklch, var(--rose) 82%, var(--foreground)); }
.margin-pill { display: inline-flex; align-items: center; border-radius: 99px; padding: 5px 8px; background: color-mix(in oklch, var(--success) 11%, var(--card)); color: color-mix(in oklch, var(--success) 78%, var(--foreground)); font-size: 11px; font-weight: 700; }
.margin-pill.negative { background: color-mix(in oklch, var(--destructive) 9%, var(--card)); color: var(--destructive); }
.money-negative { color: var(--destructive); font-weight: 700; }
.money-positive { color: color-mix(in oklch, var(--success) 78%, var(--foreground)); font-weight: 700; }
.align-right { text-align: right; }
.muted-cell { max-width: 280px; overflow: hidden; color: var(--muted-foreground); text-overflow: ellipsis; }
.row-actions { text-align: right; }
.table-action { min-height: 33px; border: 1px solid var(--border); border-radius: 10px; padding: 0 11px; background: var(--background); color: var(--foreground); font-size: 11px; font-weight: 700; }
.table-action:hover, .table-action:focus-visible { border-color: var(--ring); background: var(--accent); outline: none; }
.sale-action { border-color: color-mix(in oklch, var(--primary) 20%, var(--border)); color: var(--primary); }
.expense-action { border-color: color-mix(in oklch, var(--rose) 20%, var(--border)); color: color-mix(in oklch, var(--rose) 82%, var(--foreground)); }
.expense-action:hover, .expense-action:focus-visible { border-color: color-mix(in oklch, var(--rose) 52%, var(--border)); background: color-mix(in oklch, var(--rose) 9%, var(--card)); }
.empty-state { display: grid; justify-items: center; padding: 56px 20px; text-align: center; }
.empty-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 14px; background: var(--accent); color: var(--primary); }
.empty-icon svg { width: 19px; height: 19px; }
.empty-state h3 { margin: 13px 0 4px; font-size: 14px; }
.empty-state p { margin: 0; color: var(--muted-foreground); font-size: 11px; }

.drawer-dialog { position: fixed; inset: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; overflow: hidden; margin: 0; border: 0; padding: 0; background: transparent; pointer-events: none; }
.drawer-dialog[open] { display: block; pointer-events: auto; }
.drawer-dialog::backdrop { background: color-mix(in oklch, var(--foreground) 28%, transparent); backdrop-filter: blur(2px); }
.drawer { position: absolute; inset: 0 0 0 auto; width: min(620px, 100%); height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; border-left: 1px solid var(--border); background: var(--background); animation: slide-in .2s ease-out; }
@keyframes slide-in { from { transform: translateX(24px); opacity: 0; } }
.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--border); padding: 25px 27px 21px; }
.drawer-head h2 { margin: 5px 0 0; font-size: 20px; letter-spacing: -.03em; }
.drawer-head p { margin: 5px 0 0; color: var(--muted-foreground); font-size: 12px; }
.drawer-body { overflow-y: auto; padding: 24px 27px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 13px; }
.span-2 { grid-column: 1 / -1; }
.section-divider { display: flex; align-items: center; gap: 10px; margin-top: 4px; color: var(--muted-foreground); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.section-divider::after { content: ""; height: 1px; flex: 1; background: var(--border); }
.cost-group { display: grid; gap: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 13px; background: var(--card); }
.cost-group-title { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.cost-group-title strong { font-size: 12px; }
.cost-group-title span { color: var(--muted-foreground); font-size: 10px; text-align: right; }
.cost-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.discount-fields { display: grid; grid-template-columns: 1fr; }
.discount-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.discount-mode label { position: relative; }
.discount-mode input { position: absolute; opacity: 0; pointer-events: none; }
.discount-mode span { min-height: 39px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 11px; background: var(--background); color: var(--muted-foreground); font-size: 11px; font-weight: 700; cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.discount-mode input:checked + span { border-color: color-mix(in oklch, var(--primary) 42%, var(--border)); background: var(--accent); color: var(--accent-foreground); }
.discount-mode input:focus-visible + span { outline: 3px solid color-mix(in oklch, var(--ring) 32%, transparent); outline-offset: 2px; }
.input-prefix, .input-suffix { position: relative; display: block; }
.input-prefix i, .input-suffix i { position: absolute; z-index: 1; top: 50%; transform: translateY(-50%); color: var(--muted-foreground); font-size: 12px; font-style: normal; }
.input-prefix i { left: 13px; }
.input-prefix input { padding-left: 37px; }
.input-suffix i { right: 13px; }
.input-suffix input { padding-right: 34px; }
.sale-preview { display: grid; gap: 13px; margin-top: 20px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 15px; background: var(--card); }
.summary-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.summary-head > div { display: grid; gap: 2px; }
.summary-head span, .summary-block span, .summary-result span { color: var(--muted-foreground); font-size: 11px; }
.summary-head strong { font-size: 13px; }
.summary-badge { border-radius: 99px; padding: 5px 8px; background: var(--accent); color: var(--accent-foreground) !important; font-weight: 600; }
.summary-block { display: grid; gap: 7px; border-top: 1px solid var(--border); padding-top: 11px; }
.summary-block > div { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.summary-block strong { font-size: 12px; }
.summary-block .summary-total { margin-top: 3px; border-top: 1px dashed var(--border); padding-top: 9px; }
.summary-block .summary-total span, .summary-block .summary-total strong { color: var(--foreground); font-weight: 700; }
.summary-result { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; }
.summary-result > div { display: grid; gap: 4px; border-radius: 12px; padding: 11px 12px; background: var(--accent); }
.summary-result strong { color: var(--primary); font-size: 17px; letter-spacing: -.03em; }
.summary-result .money-negative { color: var(--destructive); }
.expense-preview.taxed { background: linear-gradient(145deg, color-mix(in oklch, var(--warning) 7%, var(--card)), var(--card) 72%); }
.expense-value { min-width: 190px; justify-items: end; }
.drawer-body > .form-error { margin-top: 15px; }
.drawer-footer { display: flex; justify-content: flex-end; gap: 9px; border-top: 1px solid var(--border); padding: 14px 27px; background: var(--card); }
.detail-dialog { width: min(620px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); overflow: auto; border: 0; border-radius: calc(var(--radius) + 4px); padding: 0; background: transparent; }
.detail-dialog::backdrop { background: color-mix(in oklch, var(--foreground) 32%, transparent); backdrop-filter: blur(3px); }
.sale-detail-card { overflow: hidden; border: 1px solid var(--border); border-radius: inherit; background: var(--background); box-shadow: 0 24px 70px color-mix(in oklch, var(--foreground) 18%, transparent); }
.detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--border); padding: 22px 24px 18px; }
.detail-head h2 { margin: 5px 0 0; font-size: 20px; letter-spacing: -.03em; }
.detail-head p { margin: 5px 0 0; color: var(--muted-foreground); font-size: 12px; }
.detail-body { display: grid; gap: 13px; padding: 20px 24px; }
.legacy-notice { margin: 0; border: 1px solid color-mix(in oklch, var(--warning) 25%, var(--border)); background: color-mix(in oklch, var(--warning) 10%, var(--card)); color: color-mix(in oklch, var(--warning) 70%, var(--foreground)); line-height: 1.5; }
.detail-hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: 10px; }
.detail-hero > div { display: grid; gap: 5px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 15px; background: var(--card); }
.detail-hero span, .detail-section span { color: var(--muted-foreground); font-size: 11px; }
.detail-hero strong { font-size: 22px; letter-spacing: -.04em; }
.detail-hero small { color: var(--muted-foreground); font-size: 11px; }
.detail-hero > .detail-tone-blue { border-color: color-mix(in oklch, var(--primary) 16%, var(--border)); background: linear-gradient(145deg, color-mix(in oklch, var(--primary) 8%, var(--card)), var(--card) 76%); }
.detail-hero > .detail-tone-green { border-color: color-mix(in oklch, var(--success) 16%, var(--border)); background: linear-gradient(145deg, color-mix(in oklch, var(--success) 9%, var(--card)), var(--card) 76%); }
.detail-hero > .detail-tone-rose { border-color: color-mix(in oklch, var(--rose) 16%, var(--border)); background: linear-gradient(145deg, color-mix(in oklch, var(--rose) 9%, var(--card)), var(--card) 76%); }
.detail-hero > .detail-tone-amber { border-color: color-mix(in oklch, var(--warning) 18%, var(--border)); background: linear-gradient(145deg, color-mix(in oklch, var(--warning) 10%, var(--card)), var(--card) 76%); }
.sale-detail-sale .detail-head { background: color-mix(in oklch, var(--primary) 4%, var(--background)); }
.expense-detail-card .detail-head { background: color-mix(in oklch, var(--rose) 4%, var(--background)); }
.detail-section { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 15px; background: var(--card); }
.detail-section-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--border); padding-bottom: 12px; }
.detail-section-title h3 { margin: 0; font-size: 13px; }
.detail-section-title strong { font-size: 14px; }
.cost-breakdown { display: grid; gap: 9px; margin: 12px 0 0; }
.cost-breakdown div { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.cost-breakdown dt { color: var(--muted-foreground); font-size: 11px; }
.cost-breakdown dd { margin: 0; font-size: 11px; font-weight: 700; text-align: right; }
.detail-metadata { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.detail-metadata div { min-width: 0; display: grid; gap: 4px; }
.detail-metadata div:last-child { grid-column: 1 / -1; border-top: 1px solid var(--border); padding-top: 12px; }
.detail-metadata strong { overflow-wrap: anywhere; font-size: 12px; }
.detail-footer { display: flex; justify-content: flex-end; gap: 9px; border-top: 1px solid var(--border); padding: 14px 24px; background: var(--card); }
.toast-region { position: fixed; z-index: 100; right: 20px; bottom: 20px; display: grid; gap: 8px; }
.toast { display: flex; align-items: center; gap: 10px; width: min(360px, calc(100vw - 40px)); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; background: var(--secondary); color: var(--secondary-foreground); font-size: 12px; animation: toast-in .2s ease-out; }
.toast::before { content: ""; width: 7px; height: 7px; border-radius: 99px; background: var(--chart-2); }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } }

@media (min-width: 821px) {
  body[data-active-page="dashboard"] .topbar { height: 60px; }
  body[data-active-page="dashboard"] .topbar h1 { font-size: 17px; }
  #dashboard-page.page { padding-top: 14px; padding-bottom: 6px; }
  #dashboard-page .page-intro { margin-bottom: 11px; }
  #dashboard-page .page-intro h2 { font-size: 20px; }
  #dashboard-page .page-intro p { margin-top: 3px; font-size: 11px; }
  #dashboard-page .period-picker { gap: 5px; padding: 5px; }
  #dashboard-page .period-picker label { gap: 1px; }
  #dashboard-page .period-picker input { width: 128px; height: 29px; }
  #dashboard-page .period-picker .button { min-height: 33px; height: 33px; }
  #dashboard-page .kpi-grid { gap: 8px; }
  #dashboard-page .kpi-card { min-height: 100px; padding: 11px 13px; }
  #dashboard-page .kpi-top { gap: 8px; margin-bottom: 7px; }
  #dashboard-page .kpi-icon { width: 26px; height: 26px; border-radius: 9px; }
  #dashboard-page .kpi-icon svg { width: 13px; height: 13px; }
  #dashboard-page .kpi-card > strong { margin-bottom: 3px; font-size: clamp(18px, 1.7vw, 22px); }
  #dashboard-page .stage-badge { margin-bottom: 3px; padding: 2px 6px; font-size: 8px; }
  #dashboard-page .dashboard-grid { gap: 8px; margin-top: 8px; }
  #dashboard-page .panel { padding: 13px 15px; }
  #dashboard-page .trend-head h3 { margin-top: 2px; }
  #dashboard-page .trend-chart { margin-top: 3px; }
  #dashboard-page .category-chart { min-height: 205px; grid-template-columns: 112px minmax(0, 1fr); gap: 13px; margin-top: 3px; }
  #dashboard-page .donut { width: 108px; }
  #dashboard-page .donut::after { inset: 22px; }
  #dashboard-page .donut-center strong { font-size: 11px; }
  #dashboard-page .category-legend { gap: 6px; }
  #dashboard-page .category-item { gap: 2px 6px; }
  #dashboard-page .category-item span { font-size: 9px; }
  #dashboard-page .category-item small { font-size: 8px; }
  #dashboard-page .managerial-disclaimer { margin-top: 6px; font-size: 9px; }
}

@media (max-width: 1100px) {
  .filter-panel, .expense-filter-panel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .filter-panel .button { align-self: end; }
}

@media (min-width: 821px) and (max-width: 900px) {
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .login-shell { grid-template-columns: 1fr; }
  .login-aside { display: none; }
  .app-shell { display: block; padding-bottom: 70px; }
  .sidebar { inset: auto 0 0; width: auto; height: 66px; display: block; border: 1px solid var(--sidebar-border); border-width: 1px 0 0; padding: 7px 12px; }
  .brand, .nav-label, .sidebar-note, .user-menu { display: none; }
  .main-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
  .main-nav a { height: 51px; flex-direction: column; justify-content: center; gap: 3px; padding: 0 7px; font-size: 10px; }
  .main-nav a svg { width: 17px; height: 17px; }
  .main-content { min-width: 0; }
  .topbar { height: 68px; }
  .mobile-logout { display: inline-grid; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .page-intro { align-items: flex-start; flex-direction: column; }
  .section-intro { align-items: center; flex-direction: row; }
}

@media (max-width: 620px) {
  .topbar { padding-inline: 16px; }
  .topbar h1 { font-size: 16px; }
  .demo-badge { display: none; }
  .page { padding: 24px 16px 34px; }
  .page-intro { margin-bottom: 20px; }
  .page-intro h2 { font-size: 21px; }
  .period-picker { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .period-picker label input { width: 100%; }
  .period-arrow { display: none; }
  .period-picker .button { grid-column: 1 / -1; }
  .kpi-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .kpi-card { padding: 14px; }
  .kpi-top { margin-bottom: 12px; }
  .kpi-card > strong { font-size: 18px; }
  .kpi-card > small { line-height: 1.4; }
  .panel { padding: 16px; }
  .panel-head { flex-direction: column; }
  .chart-legend { width: 100%; }
  .category-chart { grid-template-columns: 130px 1fr; gap: 15px; }
  .donut { width: 125px; }
  .filter-panel, .expense-filter-panel { grid-template-columns: 1fr 1fr; }
  .filter-panel label:nth-child(n+3), .expense-filter-panel label:nth-child(n+3), .filter-panel .button { grid-column: auto; }
  .search-field { grid-column: 1 / -1 !important; }
  .filter-panel .button { grid-column: 1 / -1; }
  .section-intro { align-items: flex-start; }
  .section-intro p { max-width: 240px; }
  .section-intro .button { flex: 0 0 auto; min-width: 43px; padding-inline: 12px; }
  .drawer-head, .drawer-body { padding-inline: 19px; }
  .drawer-footer { padding-inline: 19px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .span-2 { grid-column: auto; }
  .cost-pair, .summary-result { grid-template-columns: 1fr; }
  .detail-hero, .detail-metadata { grid-template-columns: 1fr; }
  .detail-metadata div:last-child { grid-column: auto; }
  .cost-group-title { align-items: flex-start; flex-direction: column; gap: 3px; }
  .cost-group-title span { text-align: left; }
}

@media (max-width: 460px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .kpi-card { padding: 16px; }
  .kpi-top { margin-bottom: 13px; }
  .kpi-card > strong { font-size: 22px; }
}

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