:root { --accent:#2563d9; --border:#dbe4f2; --muted:#596982; font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:#14243e; background:#f8faff; font-synthesis:none; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; }
button,input { font:inherit; }
button { cursor:pointer; }
button:disabled { cursor:wait; opacity:.65; }
a { color:#235cc8; }
:focus-visible { outline:3px solid #81a5ef; outline-offset:3px; }
.page { width:min(1240px,calc(100% - 40px)); margin:0 auto; }
.topbar { background:#fff; box-shadow:0 1px 2px rgba(20,36,62,.05), 0 4px 16px rgba(20,36,62,.06); margin-bottom:28px; }
.topbar-inner { display:flex; justify-content:center; align-items:center; gap:28px; padding:18px 20px; }
.brand { margin:0; line-height:0; }
.logo { display:block; height:52px; width:auto; max-width:100%; }
h1,h2,h3,p { margin-top:0; }
h1 { margin-bottom:4px; font-size:clamp(1.6rem,3vw,2.15rem); line-height:1.15; }
.tagline { margin:0; padding-left:28px; border-left:1px solid #dbe4f2; color:#596982; font-size:1.05rem; line-height:1.45; max-width:17em; }
.layout { display:grid; grid-template-columns:minmax(290px, .82fr) minmax(0,1.25fr); gap:20px; align-items:start; }
.panel { background:white; border:1px solid #dbe4f2; border-radius:12px; padding:26px; min-width:0; }
h2 { font-size:1.4rem; margin-bottom:24px; }
.drop-zone { min-height:176px; border:2px dashed #bdcce4; border-radius:8px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; color:#53647e; padding:20px; cursor:pointer; }
.drop-zone:hover,.drop-zone.dragging { border-color:#2563d9; background:#f4f8ff; }
.drop-zone strong { color:#14243e; font-size:1.1rem; }
.upload-icon { font-size:2.4rem; color:#2563d9; line-height:1; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.selection { margin:10px 0 16px; color:#627089; font-size:.88rem; min-height:1.3em; overflow-wrap:anywhere; }
.workers { border:0; border-top:1px solid #e4eaf3; padding:22px 0 0; margin:18px 0 24px; }
.workers legend { padding:22px 0 0; font-weight:600; float:left; width:100%; }
.choices { display:flex; clear:both; padding-top:12px; gap:8px; }
.choices label { flex:1; }
.choices input { position:absolute; opacity:0; width:1px; height:1px; }
.choices span { display:block; text-align:center; padding:10px; border:1px solid #dbe4f2; border-radius:8px; cursor:pointer; font-weight:600; }
.choices input:checked + span { background:#2563d9; border-color:#2563d9; color:white; }
.choices input:focus-visible + span { outline:3px solid #81a5ef; outline-offset:3px; }
.primary-button { display:block; width:100%; border:0; border-radius:8px; padding:14px 20px; color:white; background:#2563d9; font-weight:700; }
.primary-button:hover:not(:disabled) { background:#1b50b8; }
.secondary-button { margin:0 0 16px; border:1px solid var(--accent); border-radius:8px; padding:8px 14px; color:var(--accent); background:transparent; font-weight:600; cursor:pointer; }
.secondary-button:hover { background:#eaf1fd; }
.status { color:#596982; font-size:.88rem; margin:14px 0 0; min-height:1.3em; }
.status.error { color:#ad2936; }
.results-panel { min-height:495px; }
.empty { color:#66758d; border:1px dashed #dbe4f2; border-radius:8px; text-align:center; padding:84px 16px; }
.loading { display:flex; flex-direction:column; align-items:center; gap:14px; }
.loading[hidden] { display:none; }
.spinner { width:36px; height:36px; border:4px solid #dbe4f2; border-top-color:#2563d9; border-radius:50%; animation:spin .8s linear infinite; }
.progress { width:min(100%,460px); margin-top:8px; text-align:left; color:#14243e; font-size:.9rem; }
.progress-round { margin:0 0 10px; font-weight:650; }
.progress-stages { display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin:0 0 20px; padding:0; }
.progress-stages li { padding:5px 10px; border:1px solid var(--border); border-radius:999px; color:var(--muted); font-size:.8rem; white-space:nowrap; }
.progress-stages li.done { color:#11674b; background:#eaf9f3; border-color:#cdeedf; }
.progress-stages li.current { color:#fff; background:var(--accent); border-color:var(--accent); font-weight:600; }
.progress-row { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:6px; }
.progress-label { font-weight:600; }
.progress-count { color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.progress-total-row { margin-top:16px; }
.progress progress { display:block; width:100%; height:8px; border:0; border-radius:999px; background:#e7ecf6; overflow:hidden; appearance:none; }
.progress progress::-webkit-progress-bar { background:#e7ecf6; border-radius:999px; }
.progress progress::-webkit-progress-value { background:var(--accent); border-radius:999px; }
.progress progress::-moz-progress-bar { background:var(--accent); border-radius:999px; }
#progress-step-bar::-webkit-progress-value { background:#8ea3ff; }
#progress-step-bar::-moz-progress-bar { background:#8ea3ff; }
@keyframes spin { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { .spinner { animation-duration:2.4s; } }
.metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.metric { background:#f5f8fd; padding:18px 14px; border-radius:8px; min-width:0; }
.metric span { display:block; color:#5a6981; font-size:.9rem; }
.metric strong { display:block; color:#235cc8; font-size:clamp(1.25rem,2.5vw,2rem); margin-top:10px; overflow-wrap:anywhere; }
.metric.accent { background:#eaf2ff; }
.verification { background:#eaf9f3; color:#11674b; padding:13px 16px; border-radius:8px; margin:16px 0 0; font-weight:600; }
.verification.failed { background:#fff1f1; color:#ad2936; }
.chart-block { border-top:1px solid #e4eaf3; margin-top:24px; padding-top:20px; }
.chart { display:grid; gap:10px; }
.chart-row { display:grid; grid-template-columns:7.5rem minmax(0,1fr) 8.5rem; align-items:center; gap:12px; font-size:.9rem; }
.chart-label { color:#596982; }
.chart-row.selected .chart-label { color:#14243e; font-weight:600; }
.chart-track { position:relative; height:22px; }
.chart-ideal { position:absolute; top:-3px; bottom:-3px; width:2px; margin-left:-1px; background:#14243e; border-radius:1px; }
.chart-legend { display:flex; align-items:center; gap:8px; margin:12px 0 0; color:#66758d; font-size:.83rem; }
.ideal-swatch { display:inline-block; width:2px; height:14px; background:#14243e; border-radius:1px; }
.chart-bar { height:100%; min-width:4px; background:#a9c1ee; border-radius:0 4px 4px 0; }
.chart-row.selected .chart-bar { background:#2563d9; }
.chart-value { color:#14243e; font-variant-numeric:tabular-nums; text-align:right; }
.chart-value span { color:#66758d; }
.comparison { border-top:1px solid #e4eaf3; margin-top:24px; padding-top:20px; }
h3 { font-size:1.05rem; margin-bottom:18px; }
.gallery { margin-top:16px; }
.thumbs { display:grid; grid-template-columns:repeat(auto-fill,minmax(64px,1fr)); gap:10px; }
.thumb { aspect-ratio:1; padding:4px; border:1px solid #e4eaf3; border-radius:8px; background:#edf1f6; cursor:pointer; }
.thumb img { display:block; width:100%; height:100%; object-fit:contain; border-radius:4px; }
.thumb:hover { border-color:#a9c1ee; }
.thumb[aria-pressed="true"] { border:2px solid #2563d9; background:white; padding:3px; }
.image-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
figure { margin:0; min-width:0; }
figcaption { margin-bottom:9px; font-size:.9rem; font-weight:600; }
figure img,figure canvas { display:block; width:100%; aspect-ratio:4/3; object-fit:contain; background:#edf1f6; border-radius:6px; }
.run-info { border-top:1px solid #e4eaf3; margin-top:24px; padding-top:20px; }
.detail { display:grid; gap:8px; margin:0; font-size:.86rem; line-height:1.45; }
.detail div { display:grid; grid-template-columns:7.5rem minmax(0,1fr); gap:12px; }
.detail dt { color:#66758d; }
.detail dd { margin:0; color:#14243e; }
.explain { margin-top:18px; color:#66758d; font-size:.86rem; line-height:1.5; }
.explain summary { cursor:pointer; color:#14243e; font-weight:600; }
.explain li { color:#14243e; }
.note { margin:14px 0 0; color:#66758d; font-size:.75rem; line-height:1.45; }
.note code { font-size:.95em; }
.explain ul { display:grid; gap:6px; margin:8px 0 0; padding-left:1.1rem; }
footer.footer { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:28px; padding:24px 0 34px; border-top:1px solid #dbe4f2; font-size:.86rem; color:#66758d; }
.footer a { display:inline-flex; align-items:center; gap:9px; color:#235cc8; font-weight:550; text-underline-offset:3px; }
.footer a svg { width:20px; height:20px; color:#202b43; flex:none; }
@media(max-width:760px) { footer.footer { align-items:flex-start; flex-direction:column; gap:14px; margin-top:22px; padding:22px 0 30px; } .page { width:min(100% - 28px,540px); } .layout { grid-template-columns:1fr; } .panel { padding:20px; } .results-panel { min-height:0; } .empty { padding:50px 14px; } #loading { padding:36px 4px; } }
@media(max-width:480px) { .detail div { grid-template-columns:6.5rem minmax(0,1fr); } .chart-row { grid-template-columns:6.5rem minmax(0,1fr); row-gap:4px; } .chart-value { grid-column:2; text-align:left; } }
@media(max-width:380px) { .metrics { grid-template-columns:1fr 1fr; } .metric.accent { grid-column:1/-1; } }
@media(max-width:600px) { .topbar { margin-bottom:22px; } .topbar-inner { flex-direction:column; gap:8px; padding:16px; } .logo { height:40px; } .tagline { padding-left:0; border-left:0; max-width:none; text-align:center; font-size:.95rem; } }