:root { color-scheme: light; --ink:#1c2025; --muted:#586068; --line:#d7dcdf; --silver:#f2f3f4; --crimson:#ab2034; --dark-red:#86162b; font-family:Arial,Helvetica,sans-serif; scroll-behavior:smooth; }
*,*::before,*::after { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:#f5f6f7; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
a { color:inherit; }
:focus-visible { outline:3px solid var(--crimson); outline-offset:3px; }
[hidden] { display:none !important; }
.shell { width:min(100% - 80px,1360px); margin-inline:auto; }
.site-header { background:#fff; border-bottom:1px solid var(--line); }
.header-inner { min-height:86px; display:flex; align-items:center; justify-content:space-between; gap:32px; }
.brand { display:inline-flex; align-items:center; gap:12px; text-decoration:none; font-size:1.36rem; font-weight:800; letter-spacing:.075em; white-space:nowrap; }
.brand-mark { display:inline-flex; align-items:center; justify-content:center; width:31px; height:32px; background:var(--crimson); color:#fff; font-size:1.15rem; font-weight:900; letter-spacing:-.12em; padding-right:3px; clip-path:polygon(0 0,100% 0,100% 80%,80% 100%,0 100%); }
.site-nav { display:flex; align-items:center; gap:clamp(18px,2.8vw,42px); font-size:.91rem; font-weight:700; }
.site-nav a { text-decoration:none; }
.site-nav a:hover,.nav-tools summary:hover { color:var(--crimson); }
.nav-contact { padding:11px 17px; border:1px solid var(--crimson); color:var(--crimson); }
.nav-contact:hover { background:var(--crimson); color:#fff !important; }
.nav-tools { position:relative; }
.nav-tools summary { list-style:none; cursor:pointer; padding:10px 0; user-select:none; }
.nav-tools summary::-webkit-details-marker { display:none; }
.nav-tools summary::after { content:'⌄'; display:inline-block; margin-left:7px; color:var(--crimson); transition:transform .2s ease; }
.nav-tools[open] summary::after { transform:rotate(180deg); }
.nav-tools-menu { position:absolute; z-index:8; top:calc(100% + 6px); left:-20px; width:275px; padding:7px; background:#fff; border:1px solid var(--line); box-shadow:0 18px 45px rgba(24,29,34,.14); }
.nav-tools-menu a { display:block; padding:13px 14px; }
.nav-tools-menu a:hover { background:var(--silver); }
.nav-tools-menu small { display:block; margin-top:5px; color:var(--muted); font-size:.79rem; font-weight:400; }
.tool-intro { padding:75px 0 61px; }
.eyebrow { color:var(--crimson); font-size:.78rem; font-weight:800; letter-spacing:.17em; }
.eyebrow::before { content:''; display:inline-block; vertical-align:4px; width:26px; height:2px; margin-right:12px; background:currentColor; }
h1,h2,h3,p { margin-top:0; }
h1 { margin:25px 0 23px; max-width:820px; font-size:clamp(3.1rem,5vw,5.6rem); line-height:1; letter-spacing:-.063em; }
h1 em { color:var(--crimson); font-style:normal; }
.tool-intro>p { max-width:720px; margin-bottom:22px; font-size:1.13rem; line-height:1.58; color:#474e54; }
.privacy { display:inline-flex; align-items:center; gap:9px; padding:11px 14px; border:1px solid var(--line); background:#fff; font-size:.89rem; color:#45505a; }
.privacy span { color:var(--crimson); font-size:.8rem; }
.workspace { display:grid; grid-template-columns:minmax(290px,370px) minmax(0,1fr); gap:22px; align-items:start; padding-bottom:90px; }
.import-panel,.result-panel { background:#fff; border:1px solid var(--line); }
.import-panel { padding:28px; position:sticky; top:18px; }
.result-panel { min-height:550px; padding:28px 32px 34px; border-top:5px solid var(--crimson); }
.panel-heading { margin-bottom:26px; }
.panel-heading>span { display:block; color:var(--crimson); font-size:.75rem; font-weight:800; letter-spacing:.15em; margin-bottom:9px; }
.panel-heading h2 { font-size:1.55rem; line-height:1.15; letter-spacing:-.036em; margin:0; }
.file-label,.field-group>label,.action-fields>label { display:block; font-weight:700; font-size:.92rem; line-height:1.35; margin-bottom:9px; }
.file-label span { display:block; color:var(--muted); font-size:.78rem; font-weight:400; margin-top:5px; }
input[type=file] { display:block; width:100%; padding:11px; border:1px solid #b9c1c7; font-size:.83rem; background:#fff; }
input[type=file]::file-selector-button { margin-right:11px; padding:8px 11px; border:0; background:var(--ink); color:#fff; cursor:pointer; }
.import-actions { display:flex; align-items:center; flex-wrap:wrap; gap:15px; margin:16px 0; }
.import-actions>a { color:var(--crimson); font-size:.88rem; font-weight:700; text-underline-offset:4px; }
.legend-details { margin:0 0 17px; border:1px solid #cbd2d7; background:#fbfcfc; }
.legend-details summary { display:flex; justify-content:space-between; gap:14px; padding:12px 14px; cursor:pointer; list-style:none; color:var(--ink); font-size:.88rem; font-weight:700; line-height:1.35; }
.legend-details summary::-webkit-details-marker { display:none; }
.legend-details summary::after { content:'+'; color:var(--crimson); font-size:1.18rem; line-height:1; }
.legend-details[open] summary::after { content:'−'; }
.legend-list { margin:0; padding:0 14px 12px; }
.legend-list>div { border-top:1px solid var(--line); padding:10px 0; }
.legend-list dt { font-size:.84rem; font-weight:800; line-height:1.35; overflow-wrap:anywhere; }
.legend-list dd { margin:4px 0 0; color:#515b62; font-size:.83rem; line-height:1.48; }
.result-panel .legend-list>div { display:grid; grid-template-columns:minmax(130px,165px) minmax(0,1fr); gap:16px; }
.result-panel .legend-list dd { margin-top:0; }
.status-key,.bar-key { display:flex; flex-wrap:wrap; align-items:center; gap:7px 17px; color:var(--muted); font-size:.78rem; line-height:1.3; }
.status-key { margin:-5px 0 14px; }
.status-key>span,.bar-key>span { display:inline-flex; align-items:center; gap:6px; }
.key-dot { width:9px; height:9px; flex:none; display:inline-block; background:#a9b0b5; }
.key-good { background:#578b7c; }
.key-alert { background:var(--crimson); }
.key-other { background:#747c83; }
.secondary-button { padding:10px 13px; border:1px solid var(--ink); background:#fff; font-weight:700; font-size:.87rem; }
.secondary-button:hover { background:var(--silver); }
.import-message { margin:0 0 24px; padding:11px 12px; border-left:3px solid #aab2b8; background:#f2f4f5; color:#45505a; font-size:.85rem; line-height:1.45; overflow-wrap:anywhere; }
.import-message.error { border-color:var(--crimson); background:#fff2f4; color:#812337; }
.import-message.success { border-color:#386d61; background:#edf5f2; color:#28574c; }
.field-group { margin-top:22px; }
.field-group small,.action-fields small { font-weight:400; color:var(--muted); }
.field-group input,.field-group select,.action-fields input,.action-fields select,.action-fields textarea,.threshold-grid input { width:100%; min-height:43px; padding:10px 11px; border:1px solid #bac2c7; background:#fff; color:var(--ink); border-radius:0; }
.field-group select:disabled { color:#7c848a; background:#f4f5f5; }
.thresholds { margin-top:27px; border-top:1px solid var(--line); padding-top:21px; }
.thresholds summary { cursor:pointer; color:var(--crimson); font-size:.91rem; font-weight:700; }
.thresholds p { color:var(--muted); font-size:.83rem; line-height:1.47; margin:16px 0; }
.threshold-grid { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.threshold-grid label { font-size:.875rem; font-weight:700; line-height:1.35; }
.threshold-grid label:last-child { grid-column:1/-1; }
.threshold-grid span { color:var(--muted); font-weight:400; }
.threshold-grid input { display:block; margin-top:6px; min-height:39px; padding:8px; }
.empty-state { display:flex; flex-direction:column; justify-content:center; min-height:440px; padding:40px; border:1px dashed #b7c0c5; background:linear-gradient(137deg,#f5f6f7,#fff 64%); }
.empty-index { color:var(--crimson); font-size:.79rem; font-weight:800; letter-spacing:.16em; }
.empty-state p { max-width:550px; margin:25px 0 0; font-size:clamp(1.6rem,2.45vw,2.6rem); line-height:1.18; letter-spacing:-.043em; font-weight:700; }
.report-top { display:flex; justify-content:space-between; align-items:start; gap:22px; padding-bottom:23px; border-bottom:1px solid var(--line); }
.report-period { font-size:1.22rem; font-weight:800; }
.report-source { color:var(--muted); font-size:.84rem; margin:8px 0 0; }
.status-tag { display:inline-block; padding:8px 11px; color:#802034; background:#ffedf0; font-size:.79rem; font-weight:800; white-space:nowrap; }
.status-tag.good { color:#2d6256; background:#e7f1ed; }
.status-tag.partial { color:#795b20; background:#fff4dc; }
.kpi-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px; padding:23px 0 26px; }
.kpi-card { border:1px solid var(--line); padding:18px 16px; min-height:155px; }
.kpi-card.alert { border-top:3px solid var(--crimson); padding-top:16px; }
.kpi-card.good { border-top:3px solid #578b7c; padding-top:16px; }
.kpi-card.missing { border-top:3px solid #aaa; padding-top:16px; }
.kpi-title { display:block; color:var(--muted); font-size:.875rem; line-height:1.3; min-height:2.4em; }
.kpi-value { display:block; margin:15px 0 9px; font-size:clamp(1.43rem,2vw,2.18rem); line-height:1; font-weight:800; letter-spacing:-.04em; white-space:nowrap; }
.kpi-target { display:block; font-size:.76rem; line-height:1.3; color:var(--muted); }
.data-warning { background:#fff5df; color:#6a5222; padding:11px 14px; margin:0 0 24px; font-size:.86rem; line-height:1.45; }
.report-block { border-top:1px solid var(--line); padding-top:23px; margin-top:8px; margin-bottom:25px; }
.block-title { display:flex; align-items:center; gap:14px; margin-bottom:19px; }
.block-title span { color:var(--crimson); font-size:.74rem; font-weight:800; }
.block-title h3 { margin:0; font-size:1.26rem; letter-spacing:-.03em; }
.action-fields { display:grid; grid-template-columns:1fr 1fr; column-gap:18px; }
.action-fields label { grid-column:1/-1; margin:0 0 8px; }
.action-fields select,.action-fields textarea { grid-column:1/-1; margin:0 0 16px; }
.action-fields input { grid-column:1/-1; }
.action-fields textarea { resize:vertical; min-height:80px; line-height:1.4; }
.table-wrap { max-width:100%; overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:.86rem; min-width:610px; }
th { text-align:left; color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.07em; }
th,td { padding:12px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
th:first-child,td:first-child { padding-left:0; font-weight:700; }
td:last-child { min-width:180px; }
.report-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; border-top:1px solid var(--line); padding-top:24px; }
.report-footer>span { color:var(--muted); font-size:.83rem; }
.primary-button { display:inline-flex; align-items:center; justify-content:space-between; gap:20px; min-height:48px; padding:11px 16px; border:0; background:var(--crimson); color:#fff; font-size:.89rem; font-weight:700; }
.primary-button:hover { background:var(--dark-red); }
.primary-button:disabled { opacity:.5; cursor:not-allowed; }
.custom-tool-cta { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr); margin-bottom:76px; background:#fff; border:1px solid var(--line); border-top:5px solid var(--crimson); box-shadow:0 18px 48px rgba(28,32,37,.07); }
.custom-tool-content { padding:38px 42px 40px; }
.custom-tool-kicker { display:block; margin-bottom:17px; color:var(--crimson); font-size:.75rem; font-weight:800; letter-spacing:.16em; }
.custom-tool-cta h2 { max-width:760px; margin:0 0 19px; font-size:clamp(2rem,3.25vw,3.25rem); line-height:1.02; letter-spacing:-.052em; }
.custom-tool-lead { max-width:830px; margin-bottom:16px; color:#333a40; font-size:1.06rem; line-height:1.62; }
.custom-tool-trigger { max-width:830px; margin-bottom:26px; padding-left:17px; border-left:3px solid var(--crimson); color:var(--ink); font-size:1rem; font-weight:700; line-height:1.55; }
.custom-tool-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px 24px; margin:0; padding:0; list-style:none; }
.custom-tool-list li { position:relative; padding-left:19px; color:#444c53; font-size:.91rem; line-height:1.42; }
.custom-tool-list li::before { content:''; position:absolute; top:.48em; left:0; width:8px; height:8px; background:var(--crimson); }
.custom-tool-side { display:flex; flex-direction:column; align-items:flex-start; padding:38px 34px 34px; background:var(--ink); color:#fff; }
.custom-tool-side>span { display:block; margin-bottom:16px; color:#ef9aa7; font-size:.72rem; font-weight:800; letter-spacing:.16em; }
.custom-tool-side h3 { margin:0 0 15px; font-size:clamp(1.45rem,2.2vw,2rem); line-height:1.1; letter-spacing:-.035em; }
.custom-tool-side p { margin:0 0 24px; color:#d5dade; font-size:.94rem; line-height:1.58; }
.custom-tool-side a { display:flex; align-items:center; justify-content:space-between; gap:24px; width:100%; margin-top:auto; padding:15px 17px; background:var(--crimson); color:#fff; font-size:.91rem; font-weight:800; line-height:1.35; text-decoration:none; }
.custom-tool-side a:hover { background:var(--dark-red); }
.custom-tool-side small { display:block; margin-top:17px; color:#aeb6bb; font-size:.76rem; line-height:1.5; }
.method-note { padding:0 0 82px; color:var(--muted); }
.method-note h2 { color:var(--ink); font-size:1.15rem; margin-bottom:13px; }
.method-note p { max-width:1000px; font-size:.92rem; line-height:1.55; margin:0 0 9px; }
.coffee-callout { display:flex; align-items:center; justify-content:space-between; gap:30px; padding:29px 34px; margin-bottom:68px; background:var(--ink); color:#fff; border-top:4px solid var(--crimson); }
.coffee-callout>div>span { display:block; color:#e68593; font-size:.75rem; letter-spacing:.13em; font-weight:800; }
.coffee-callout h2 { margin:9px 0 8px; font-size:clamp(1.42rem,2.2vw,2rem); letter-spacing:-.035em; }
.coffee-callout p { margin:0; max-width:650px; color:#d1d7da; font-size:.91rem; line-height:1.5; }
.coffee-callout a { flex:none; display:inline-flex; padding:13px 18px; background:var(--crimson); color:#fff; text-decoration:none; font-weight:700; }
.coffee-callout a:hover { background:var(--dark-red); }
.site-footer { border-top:1px solid var(--line); background:#fff; color:var(--muted); }
.footer-inner { display:flex; justify-content:space-between; gap:20px; padding:28px 0; font-size:.83rem; }
.footer-inner strong { color:var(--ink); letter-spacing:.11em; }
.footer-inner a { color:var(--crimson); font-weight:700; }
@media (max-width:1100px) { .shell { width:min(100% - 48px,1360px); } .workspace { grid-template-columns:minmax(260px,330px) minmax(0,1fr); } .kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:900px) { .custom-tool-cta { grid-template-columns:1fr; } .custom-tool-side { min-height:0; } }
@media (max-width:800px) { .workspace { grid-template-columns:1fr; } .import-panel { position:static; } .kpi-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:620px) { .shell { width:min(100% - 36px,640px); } .header-inner { flex-wrap:wrap; gap:13px; padding:14px 0; } .brand { font-size:1.14rem; } .brand-mark { width:28px; height:29px; } .site-nav { width:100%; justify-content:space-between; gap:14px; font-size:.85rem; } .site-nav .back-home { display:none; } .nav-tools-menu { left:0; } .tool-intro { padding:57px 0 42px; } h1 { font-size:clamp(2.75rem,11vw,4.8rem); } .tool-intro>p { font-size:1.04rem; } .privacy { display:flex; line-height:1.4; } .workspace { gap:15px; padding-bottom:61px; } .import-panel,.result-panel { padding:23px 20px; } .result-panel .legend-list>div { display:block; } .result-panel .legend-list dd { margin-top:4px; } .empty-state { min-height:250px; padding:25px; } .kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .report-top { flex-direction:column; } .report-footer { flex-direction:column; align-items:stretch; } .primary-button { width:100%; } .custom-tool-cta { margin-bottom:58px; } .custom-tool-content,.custom-tool-side { padding:28px 22px; } .custom-tool-list { grid-template-columns:1fr; gap:10px; } .footer-inner { flex-direction:column; gap:8px; } }
@media (max-width:400px) { .kpi-grid { grid-template-columns:1fr 1fr; } .kpi-card { padding-inline:12px; min-height:145px; } .kpi-value { font-size:1.5rem; } .threshold-grid { grid-template-columns:1fr; } .threshold-grid label:last-child { grid-column:auto; } }
@media (max-width:620px) { .coffee-callout { flex-direction:column; align-items:start; padding:25px 22px; } }
@media (prefers-reduced-motion:reduce) { :root { scroll-behavior:auto; } .nav-tools summary::after { transition:none; } }