:root { color-scheme:light; color:#18332b; background:#f5f7f3; font-family:var(--font-sans); }
* { box-sizing:border-box; }
body { min-width:320px; margin:0; }
button,input,select { font:inherit; }
button { cursor:pointer; }
[hidden] { display:none !important; }
.skip-link { position:absolute; z-index:30; left:12px; top:-50px; padding:9px 12px; border-radius:8px; color:#fff; background:#0d4e3b; }
.skip-link:focus { top:12px; }
.page-header { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; padding:26px clamp(20px,4vw,72px); color:#fff; background:linear-gradient(112deg,#0c3c31 0%,#126345 70%,#1d7e5c 100%); }
.eyebrow,.section-kicker { margin:0 0 8px; color:#b9e6ce; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.page-header h1 { margin:0; font-size:clamp(28px,4vw,40px); line-height:1.08; letter-spacing:-.04em; }
.account-menu { position:relative; flex:0 0 auto; }
.account-button { display:flex; align-items:center; gap:9px; padding:7px 8px 7px 10px; border:1px solid rgba(203,239,218,.42); border-radius:12px; color:#fff; background:rgba(7,49,37,.2); text-align:left; }
.account-button:hover,.account-button[aria-expanded="true"] { border-color:rgba(222,246,229,.75); background:rgba(7,49,37,.34); }
.account-menu :focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible { outline:3px solid #9dcfad; outline-offset:2px; }
.account-avatar { display:grid; width:30px; height:30px; place-items:center; border-radius:50%; color:#13513e; background:#d8f0df; font-size:13px; font-weight:700; }
.account-identity { display:grid; min-width:0; gap:1px; }
.account-identity b { max-width:245px; overflow:hidden; font-size:13px; line-height:1.1; text-overflow:ellipsis; white-space:nowrap; }
.account-identity small { color:#c6e8d2; font-size:11px; }
.account-chevron { width:8px; height:8px; margin:0 4px 3px 3px; border-right:2px solid #d8eee1; border-bottom:2px solid #d8eee1; transform:rotate(45deg); }
.account-button[aria-expanded="true"] .account-chevron { transform:rotate(225deg) translate(-2px,-2px); }
.account-dropdown { position:absolute; z-index:20; top:calc(100% + 8px); right:0; display:grid; min-width:238px; padding:6px; border:1px solid #cfe1d4; border-radius:12px; background:#fff; box-shadow:0 16px 36px rgba(5,42,30,.24); }
.account-dropdown button,.account-menu-link { display:flex; align-items:center; width:100%; min-height:38px; padding:0 11px; border:0; border-radius:8px; color:#1b493a; background:transparent; font-size:13px; text-align:left; text-decoration:none; }
.account-dropdown button:hover,.account-menu-link:hover { background:#edf6ef; }
.account-menu-link[aria-current="page"] { color:#146449; background:#e9f5ec; }
.account-logout { color:#974837 !important; }
.account-logout:hover { background:#fcf0ed !important; }
main { width:min(100%,1480px); margin:0 auto; padding:28px clamp(20px,4vw,64px) 48px; }
.access-status,.data-status { margin:0 0 18px; color:#5e746a; font-size:13px; }
.page-intro { display:flex; align-items:end; justify-content:space-between; gap:22px; margin-bottom:24px; }
.page-intro .section-kicker,.panel .section-kicker { color:#56856b; }
.page-intro h2 { margin:0; font-size:clamp(27px,3vw,36px); line-height:1.1; letter-spacing:-.04em; }
.page-intro p:last-child { margin:9px 0 0; color:#61766a; font-size:14px; }
.data-source-note { flex:0 0 auto; padding:8px 11px; border:1px solid #d9e5da; border-radius:999px; color:#507361; background:#eaf3eb; font-size:11px; font-weight:700; }
.period-card,.panel,.metric-card,.empty-state { border:1px solid #dbe5dc; border-radius:16px; background:#fff; box-shadow:0 7px 22px rgba(22,59,43,.04); }
.period-card { display:grid; grid-template-columns:minmax(150px,.8fr) auto minmax(300px,1.3fr); align-items:end; gap:18px; padding:18px 20px; }
.period-heading h2 { margin:0; font-size:16px; }
.period-heading p { margin:4px 0 0; color:#708378; font-size:11px; }
.preset-buttons { display:flex; flex-wrap:wrap; gap:6px; }
.preset-buttons button { min-height:36px; padding:7px 11px; border:1px solid #d2dfd4; border-radius:8px; color:#2e634b; background:#f8fbf8; font-size:12px; font-weight:700; white-space:nowrap; }
.preset-buttons button:hover { background:#edf6ef; }
.preset-buttons button[aria-pressed="true"] { border-color:#1e7655; color:#fff; background:#1e7655; }
.period-form { display:flex; align-items:end; justify-content:flex-end; gap:8px; }
.period-form label,.product-controls label { display:grid; gap:4px; color:#587166; font-size:11px; font-weight:700; }
.period-form input,.product-controls input,.product-controls select { width:100%; min-height:36px; padding:6px 9px; border:1px solid #c9d7cc; border-radius:8px; color:#18332b; background:#fff; }
.period-form button { min-height:36px; padding:0 15px; border:0; border-radius:8px; color:#fff; background:#176a4e; font-size:12px; font-weight:700; }
.period-form button:hover { background:#0f553e; }
.period-form button:disabled { opacity:.6; cursor:wait; }
.data-status { margin:16px 0; }
.data-status[data-error="true"] { padding:11px 13px; border:1px solid #f0d0c8; border-radius:9px; color:#913c30; background:#fff5f2; }
.empty-state { margin-top:16px; padding:35px; }
.empty-state h2 { margin:0; font-size:18px; }
.empty-state p { margin:7px 0 0; color:#6f8176; font-size:13px; }
.summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:16px; }
.metric-card { display:grid; align-content:space-between; min-height:128px; padding:17px 18px; }
.metric-card span { color:#5c7566; font-size:12px; font-weight:700; }
.metric-card strong { margin-top:15px; color:#183f2d; font-size:clamp(20px,2.4vw,30px); line-height:1.08; letter-spacing:-.04em; font-variant-numeric:tabular-nums; white-space:nowrap; }
.metric-card small { margin-top:6px; color:#779084; font-size:11px; }
.metric-card--good { border-color:#b8d8bf; background:#eff8f0; }
.metric-card--finished { border-color:#b1d4c4; background:#e9f5ee; }
.context-line { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 16px; margin:10px 1px 18px; color:#657c6e; font-size:11px; }
.context-line p { margin:0; }
.quality-note { margin:0 0 16px; padding:10px 12px; border-left:3px solid #c78e4a; color:#785d38; background:#fcf5e9; font-size:12px; }
.quality-note p { margin:0; }
.quality-note ul { display:grid; gap:6px; margin:8px 0 0; padding-left:19px; }
.quality-note a { color:#73501f; font-weight:700; text-decoration:underline; text-underline-offset:2px; }
.quality-note a:focus-visible { outline:3px solid #9dcfad; outline-offset:2px; }
.visual-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(330px,.9fr); gap:14px; }
.panel { min-width:0; padding:20px; }
.panel-heading { display:flex; align-items:start; justify-content:space-between; gap:12px; margin-bottom:16px; }
.panel-heading .section-kicker { margin-bottom:3px; }
.panel-heading h2 { margin:0; font-size:18px; letter-spacing:-.025em; }
.panel-heading p:not(.section-kicker) { margin:5px 0 0; color:#73877a; font-size:11px; }
.panel-note { color:#819387; font-size:11px; white-space:nowrap; }
.chart-legend { display:flex; flex-wrap:wrap; gap:6px 13px; margin-bottom:10px; color:#688072; font-size:10px; }
.chart-legend span { display:inline-flex; align-items:center; gap:5px; }
.swatch { display:inline-block; width:9px; height:9px; border-radius:2px; }
.type-finished { background:#126e51; }.type-intermediate { background:#6bad7f; }.type-residual { background:#b5cda5; }.type-loss { background:#d8a273; }
.swatch-finished { background:#126e51; }.swatch-bar { background:#55a376; }.swatch-str { background:#83b98a; }.swatch-imitation { background:#a7ca92; }.swatch-residual { background:#b5cda5; }.swatch-firewood { background:#d19a69; }.swatch-technological_waste { background:#e1bd99; }
.trend-chart { overflow-x:auto; padding-bottom:4px; }
.trend-chart svg { display:block; min-width:100%; height:250px; }
.trend-chart text { fill:#7a8e81; font-family:var(--font-sans); font-size:10px; }
.trend-chart .gridline { stroke:#e4ece5; stroke-width:1; }
.composition-chart svg { display:block; width:100%; height:28px; }
.composition-legend { display:grid; gap:7px; margin-top:18px; }
.composition-row { display:grid; grid-template-columns:10px minmax(0,1fr) auto; align-items:center; gap:8px; color:#536f5e; font-size:11px; }
.composition-row strong { color:#234536; font-variant-numeric:tabular-nums; }
.chart-details { margin-top:10px; color:#657b6e; font-size:11px; }
.chart-details summary { width:fit-content; cursor:pointer; }
.chart-details .table-scroll { margin-top:8px; max-height:250px; }
.output-types-panel,.products-panel,.personnel-panel { margin-top:14px; }
.product-controls { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:12px; }
.product-controls label:first-child { width:min(240px,100%); }.product-controls label:last-child { flex:1 1 240px; }
.table-scroll { overflow:auto; border:1px solid #e0e9e1; border-radius:10px; }
table { width:100%; border-collapse:collapse; }
th { padding:9px 11px; border-bottom:1px solid #dfebe1; color:#617b69; background:#f6faf7; font-size:10px; font-weight:700; letter-spacing:.04em; text-align:left; text-transform:uppercase; white-space:nowrap; }
td { padding:10px 11px; border-bottom:1px solid #edf1ec; color:#425e4c; font-size:11px; vertical-align:top; }
tr:last-child td { border-bottom:0; }
td:first-child { color:#234637; font-weight:700; }
.numeric { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.products-panel table { min-width:650px; }
.product-kind { display:block; margin-top:2px; color:#839588; font-size:10px; font-weight:500; }
.table-empty { margin:10px 0 0; color:#7b8f80; font-size:11px; }
.details-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:14px; }
.details-grid .panel { padding:18px; }
.details-grid .panel-heading { margin-bottom:10px; }
.details-grid .table-scroll { max-height:330px; }
.input-positions-panel { margin-top:14px; }
.input-positions-panel .table-scroll { max-height:380px; }
.input-positions-panel table { min-width:920px; }
.method-note { margin:16px 1px 0; color:#7a8b7d; font-size:11px; line-height:1.55; }
.build-version { margin:18px 0 0; color:#718178; font-size:12px; text-align:right; font-variant-numeric:tabular-nums; }
@media (max-width:1100px) { .period-card { grid-template-columns:1fr 1fr; }.period-heading { grid-column:1/-1; }.period-form { justify-content:flex-end; }.visual-grid { grid-template-columns:1fr; }.summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:760px) { .page-header { align-items:stretch; flex-direction:column; padding:22px 18px; }.account-menu { align-self:flex-start; } main { padding:20px 14px 32px; }.page-intro { align-items:start; flex-direction:column; }.period-card { grid-template-columns:1fr; padding:16px; }.period-heading { grid-column:auto; }.period-form { justify-content:stretch; }.period-form label { flex:1; }.details-grid { grid-template-columns:1fr; }.panel { padding:16px; } }
@media (max-width:470px) { .summary-grid { gap:8px; }.metric-card { padding:13px; min-height:120px; }.metric-card strong { font-size:19px; white-space:normal; }.period-form { flex-wrap:wrap; }.period-form button { width:100%; }.data-source-note { white-space:normal; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; } }