:root { --ink:#17211b; --muted:#6e776f; --green:#173e2b; --green-2:#2f6b49; --gold:#c5a45b; --paper:#f4f2ed; --line:#e3ded4; --white:#fff; --good:#238552; --risk:#b84b43; --watch:#b27a20; }
html, body { margin:0; min-height:100%; font-family: Inter, "Segoe UI", Arial, sans-serif; background:var(--paper); color:var(--ink); }
button, input, select { font:inherit; }
button { cursor:pointer; }
h1:focus { outline:none; }
.dashboard-header { display:flex; align-items:flex-end; justify-content:space-between; gap:28px; margin-bottom:22px; }
.dashboard-header h1 { font-family: Georgia, "Times New Roman", serif; font-size:clamp(2.8rem,5vw,4.8rem); font-weight:500; letter-spacing:-.055em; line-height:.92; margin:7px 0 10px; color:#173526; }
.dashboard-header p { margin:0; color:var(--muted); font-size:.96rem; }
.eyebrow,.section-kicker { display:block; color:#97782f; font-size:.62rem; font-weight:850; letter-spacing:.17em; }
.header-actions { display:flex; align-items:center; gap:14px; }
.freshness { display:flex; align-items:center; gap:8px; color:#748078; font-size:.72rem; white-space:nowrap; }
.freshness i { width:7px; height:7px; border-radius:50%; background:#4dab6e; box-shadow:0 0 0 4px rgba(77,171,110,.12); }
.refresh-button,.apply-button,.clear-button { border:0; border-radius:10px; font-weight:700; transition:.18s ease; }
.refresh-button { padding:10px 14px; color:#284535; background:#fff; border:1px solid var(--line); box-shadow:0 3px 10px rgba(32,45,37,.04); font-size:.78rem; }
.refresh-button:hover { transform:translateY(-1px); border-color:#b8c5bc; }
.refresh-button:disabled,.apply-button:disabled { opacity:.6; cursor:wait; }
.filter-panel { background:rgba(255,255,255,.86); border:1px solid var(--line); border-radius:17px; padding:15px; box-shadow:0 7px 22px rgba(42,53,45,.04); }
.filter-row { display:grid; gap:10px; align-items:end; }
.primary-filters { grid-template-columns:repeat(5,minmax(120px,1fr)) auto; }
.filter-row label { min-width:0; }
.filter-row label > span { display:block; margin:0 0 6px 2px; color:#767d77; font-size:.62rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.filter-row select,.filter-row input { width:100%; height:42px; border:1px solid #dedbd3; border-radius:9px; color:#25332a; background:#faf9f6; padding:0 11px; outline:none; font-size:.78rem; }
.filter-row select:focus,.filter-row input:focus { border-color:#6d967d; box-shadow:0 0 0 3px rgba(80,128,96,.1); }
.apply-button { height:42px; padding:0 20px; color:white; background:var(--green); font-size:.76rem; white-space:nowrap; }
.apply-button:hover { background:#22563a; }
.advanced-filters { border-top:1px solid #ece8df; margin-top:13px; padding-top:10px; }
.advanced-filters summary { list-style:none; cursor:pointer; width:max-content; color:#31543f; font-size:.73rem; font-weight:750; }
.advanced-filters summary::-webkit-details-marker { display:none; }
.advanced-filters summary::after { content:"＋"; margin-left:7px; color:#9b803f; }
.advanced-filters[open] summary::after { content:"−"; }
.advanced-filters summary span { color:#929791; font-weight:450; margin-left:9px; }
.advanced-grid { grid-template-columns:repeat(5,minmax(120px,1fr)); margin-top:14px; }
.clear-button { height:42px; padding:0 14px; color:#6c6457; background:#f2eee5; font-size:.72rem; }
.scenario-strip { margin:14px 0; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:16px 18px; border-radius:15px; color:white; background:linear-gradient(120deg,#173828,#214d36); box-shadow:0 11px 25px rgba(22,53,37,.12); }
.scenario-strip > div:first-child { min-width:245px; }
.scenario-strip > div:first-child strong { display:block; font-family:Georgia,serif; font-size:1.55rem; font-weight:500; margin:3px 0; }
.scenario-strip > div:first-child small { color:#afc5b6; font-size:.67rem; }
.scenario-options { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; flex:1; max-width:720px; }
.scenario-options button { border:1px solid rgba(255,255,255,.11); border-radius:10px; padding:9px 11px; text-align:left; color:#c7d4ca; background:rgba(255,255,255,.04); }
.scenario-options button span,.scenario-options button small { display:block; }
.scenario-options button span { font-size:.72rem; font-weight:750; }
.scenario-options button small { margin-top:2px; color:#829b8b; font-size:.59rem; }
.scenario-options button.active { border-color:rgba(211,180,106,.75); color:#fff; background:rgba(197,164,91,.16); box-shadow:inset 0 0 0 1px rgba(197,164,91,.12); }
.scenario-options button.active small { color:#d7c28d; }
.kpi-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.kpi-card { min-height:142px; padding:18px 19px 15px; border:1px solid var(--line); border-radius:15px; background:#fff; box-shadow:0 6px 18px rgba(35,47,39,.035); }
.kpi-card.kpi-primary { color:white; border-color:#173d2a; background:radial-gradient(circle at 90% 5%,rgba(204,171,94,.23),transparent 38%),linear-gradient(135deg,#173b29,#28593e); }
.kpi-heading { display:flex; justify-content:space-between; align-items:center; color:#7e857f; font-size:.67rem; }
.kpi-heading b { padding:4px 6px; border-radius:5px; color:#8f7538; background:#f7f0df; font-size:.52rem; letter-spacing:.08em; }
.kpi-primary .kpi-heading { color:#b7c9bc; }.kpi-primary .kpi-heading b { color:#eed799; background:rgba(211,180,106,.13); }
.kpi-card > strong { display:block; margin:17px 0 6px; font-family:Georgia,serif; font-size:clamp(1.65rem,2.4vw,2.3rem); font-weight:500; letter-spacing:-.04em; }
.kpi-card p { margin:0; color:#8a908b; font-size:.67rem; }
.kpi-primary p { color:#aebfb4; }
.positive,.status-good > strong { color:var(--good)!important; }.negative,.status-risk > strong { color:var(--risk)!important; }.watch,.status-watch > strong { color:var(--watch)!important; }
.kpi-primary > strong { color:white!important; }
.mini-progress { width:100%; height:4px; margin:7px 0 8px; border-radius:9px; background:#eeeae2; overflow:hidden; }
.mini-progress i { display:block; height:100%; border-radius:inherit; background:#b18b37; }
.status-good .mini-progress i { background:var(--good); }.status-risk .mini-progress i { background:var(--risk); }
.dashboard-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(320px,.8fr); gap:10px; margin-top:10px; }
.panel { border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:0 6px 18px rgba(35,47,39,.035); }
.trend-panel,.pulse-panel { min-height:390px; padding:20px; }
.panel-header { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.panel-header h2 { margin:4px 0 0; color:#26342c; font-family:Georgia,serif; font-size:1.28rem; font-weight:500; }
.legend { display:flex; align-items:center; gap:6px; color:#858c87; font-size:.62rem; }
.legend span { width:8px; height:8px; border-radius:2px; margin-left:7px; }.legend .real { background:#2d7050; }.legend .plan { background:#d6bc7a; }
.bar-chart { height:295px; display:flex; align-items:stretch; gap:7px; padding:24px 8px 0; border-bottom:1px solid #ddd9d0; background:repeating-linear-gradient(to bottom,transparent 0,transparent 72px,#efede7 73px); overflow-x:auto; }
.month-column { min-width:38px; flex:1; display:grid; grid-template-rows:1fr auto auto; text-align:center; }
.bar-area { display:flex; justify-content:center; align-items:flex-end; gap:3px; min-height:220px; }
.bar { width:min(14px,42%); min-height:3px; border-radius:4px 4px 1px 1px; transition:.25s ease; }.real-bar { background:linear-gradient(#3d8360,#235c40); }.plan-bar { background:#d8c183; opacity:.8; }
.month-column > span { margin-top:8px; color:#5f6861; font-size:.6rem; text-transform:capitalize; }.month-column > small { color:#a2a7a3; font-size:.52rem; }
.pulse-score { display:flex; align-items:baseline; gap:10px; margin:24px 0 18px; padding-bottom:18px; border-bottom:1px solid #ece9e2; }
.pulse-score strong { font-family:Georgia,serif; font-size:2.6rem; font-weight:500; }.pulse-score span { max-width:130px; color:#7c847e; font-size:.66rem; line-height:1.35; }
.insight-list { display:grid; gap:14px; }.insight-list > div { display:grid; grid-template-columns:28px 1fr; gap:10px; }.insight-list i { width:25px; height:25px; display:grid; place-items:center; border-radius:50%; color:#9a7a34; background:#f5eedf; font-size:.51rem; font-style:normal; font-weight:800; }
.insight-list p { margin:0; color:#6d756f; font-size:.68rem; line-height:1.45; }.insight-list strong { display:block; color:#2d3d33; font-size:.71rem; margin-bottom:2px; }
.ranking-panel { margin-top:10px; padding:20px; }.ranking-header { align-items:center; }.ranking-tabs { display:flex; gap:4px; padding:3px; border-radius:9px; background:#f1eee7; }.ranking-tabs button { border:0; padding:7px 10px; border-radius:7px; color:#747b76; background:transparent; font-size:.64rem; }.ranking-tabs button.active { color:#244c35; background:white; box-shadow:0 2px 6px rgba(30,40,33,.08); font-weight:750; }
.ranking-table { margin-top:16px; }.ranking-row { display:grid; grid-template-columns:minmax(220px,1.4fr) repeat(3,minmax(100px,.55fr)); gap:16px; align-items:center; min-height:48px; border-top:1px solid #efede8; font-size:.69rem; }.ranking-labels { min-height:32px; border:0; color:#959a96; font-size:.56rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }.ranking-name strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.ranking-name > div { height:3px; margin-top:6px; border-radius:5px; background:#efede8; overflow:hidden; }.ranking-name i { display:block; height:100%; border-radius:inherit; background:#3b7958; }.ranking-row > b { font-size:.72rem; }
.support-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin-top:10px; }.support-grid article { padding:15px 16px; border:1px solid var(--line); border-radius:13px; background:rgba(255,255,255,.7); }.support-grid span,.support-grid small { display:block; color:#858c87; font-size:.58rem; }.support-grid strong { display:block; margin:7px 0 3px; font-family:Georgia,serif; font-size:1.15rem; font-weight:500; }
.dashboard-error { display:flex; flex-direction:column; gap:5px; padding:18px; border:1px solid #e6b9b5; border-radius:14px; color:#873a34; background:#fff3f2; }.dashboard-error span { font-size:.78rem; }
.loading-dashboard { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }.loading-dashboard div { height:140px; border-radius:15px; background:linear-gradient(90deg,#e9e5dc,#f6f4ef,#e9e5dc); background-size:200% 100%; animation:pulse 1.4s infinite; }.empty-state { height:280px; display:grid; place-items:center; color:#8a918c; font-size:.75rem; }
@keyframes pulse { to { background-position:-200% 0; } }
.valid.modified:not([type=checkbox]) { outline:1px solid #26b050; }.invalid { outline:1px solid #e50000; }.validation-message { color:#e50000; }
#blazor-error-ui { color-scheme:light only; }

@media (max-width:1200px) { .primary-filters { grid-template-columns:repeat(3,1fr); }.advanced-grid { grid-template-columns:repeat(3,1fr); }.support-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:980px) { .dashboard-grid { grid-template-columns:1fr; }.scenario-strip { align-items:flex-start; flex-direction:column; }.scenario-options { width:100%; max-width:none; }.kpi-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:680px) { .dashboard-header { align-items:flex-start; flex-direction:column; }.dashboard-header h1 { font-size:3.2rem; }.header-actions { width:100%; justify-content:space-between; }.primary-filters,.advanced-grid { grid-template-columns:1fr 1fr; }.apply-button,.clear-button { grid-column:1/-1; }.advanced-filters summary span { display:none; }.scenario-options { grid-template-columns:1fr 1fr; }.kpi-grid { grid-template-columns:1fr; }.ranking-header { align-items:flex-start; flex-direction:column; }.ranking-tabs { width:100%; overflow:auto; }.ranking-row { grid-template-columns:minmax(145px,1.3fr) minmax(85px,.7fr); }.ranking-row > span:nth-of-type(2),.ranking-row > b,.ranking-labels > span:nth-of-type(3),.ranking-labels > span:nth-of-type(4) { display:none; }.support-grid { grid-template-columns:1fr 1fr; }.freshness { display:none; } }
