/* ── Reset & Tokens ───────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root,[data-theme="light"]{
  --color-bg:#f7f6f2;--color-surface:#f9f8f5;--color-surface-2:#fbfbf9;
  --color-surface-offset:#f3f0ec;--color-divider:#dcd9d5;--color-border:#d4d1ca;
  --color-text:#28251d;--color-text-muted:#7a7974;--color-text-faint:#bab9b4;
  --color-primary:#01696f;--color-primary-hover:#0c4e54;
  --color-primary-highlight:#cedcd8;
  --color-success:#437a22;--color-warning:#964219;--color-error:#a12c7b;
  --shadow-sm:0 1px 2px oklch(0.2 0.01 80/0.06);
  --shadow-md:0 4px 12px oklch(0.2 0.01 80/0.08);
  --shadow-lg:0 12px 32px oklch(0.2 0.01 80/0.12);
  --radius-sm:0.375rem;--radius-md:0.5rem;--radius-lg:0.75rem;--radius-xl:1rem;--radius-full:9999px;
  --font-display:'Instrument Serif',Georgia,serif;--font-body:'Inter','Helvetica Neue',sans-serif;
  --text-xs:clamp(0.75rem,0.7rem + 0.25vw,0.875rem);
  --text-sm:clamp(0.875rem,0.8rem + 0.35vw,1rem);
  --text-base:clamp(1rem,0.95rem + 0.25vw,1.125rem);
  --text-lg:clamp(1.125rem,1rem + 0.75vw,1.5rem);
  --text-xl:clamp(1.5rem,1.2rem + 1.25vw,2.25rem);
  --text-2xl:clamp(2rem,1.2rem + 2.5vw,3.5rem);
  --transition:180ms cubic-bezier(0.16,1,0.3,1);
  --content-default:960px;
}
[data-theme="dark"]{
  --color-bg:#171614;--color-surface:#1c1b19;--color-surface-2:#201f1d;
  --color-surface-offset:#1d1c1a;--color-divider:#262523;--color-border:#393836;
  --color-text:#cdccca;--color-text-muted:#797876;--color-text-faint:#5a5957;
  --color-primary:#4f98a3;--color-primary-hover:#227f8b;
  --color-primary-highlight:#313b3b;
  --color-success:#6daa45;--color-warning:#bb653b;--color-error:#d163a7;
  --shadow-sm:0 1px 2px oklch(0 0 0/0.2);
  --shadow-md:0 4px 12px oklch(0 0 0/0.3);
  --shadow-lg:0 12px 32px oklch(0 0 0/0.4);
}
@media(prefers-color-scheme:dark){:root:not([data-theme]){
  --color-bg:#171614;--color-surface:#1c1b19; --color-surface-2:#201f1d;
  --color-surface-offset:#1d1c1a;--color-divider:#262523;--color-border:#393836;
  --color-text:#cdccca;--color-text-muted:#797876;--color-text-faint:#5a5957;
  --color-primary:#4f98a3;--color-primary-hover:#227f8b;
  --color-primary-highlight:#313b3b;
  --shadow-sm:0 1px 2px oklch(0 0 0/0.2);
  --shadow-md:0 4px 12px oklch(0 0 0/0.3);
  --shadow-lg:0 12px 32px oklch(0 0 0/0.4);
}}

html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth}
body{min-height:100dvh;line-height:1.6;font-family:var(--font-body);font-size:var(--text-base);color:var(--color-text);background:var(--color-bg)}
input,button{font:inherit;color:inherit}
h1,h2,h3{text-wrap:balance;line-height:1.2}
::selection{background:oklch(from var(--color-primary) l c h/0.2);color:var(--color-text)}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;border-radius:var(--radius-sm)}
button{cursor:pointer;background:none;border:none}
a{color:var(--color-primary)}

/* ── Nav ──────────────────────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:100;background:color-mix(in oklch,var(--color-bg) 88%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid oklch(from var(--color-text) l c h/0.08)}
.nav-inner{max-width:var(--content-default);margin-inline:auto;padding:.75rem 1.5rem;display:flex;align-items:center;justify-content:space-between}
.nav-logo{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:var(--color-text)}
.nav-logo-text{font-family:var(--font-display);font-size:var(--text-lg);letter-spacing:-0.02em}
.nav-actions{display:flex;align-items:center;gap:.5rem}
.btn-theme{padding:.5rem;border-radius:var(--radius-md);color:var(--color-text-muted);display:flex;align-items:center;transition:background var(--transition),color var(--transition)}
.btn-theme:hover{background:var(--color-surface-offset);color:var(--color-text)}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.625rem 1.25rem;border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:500;text-decoration:none;border:none;cursor:pointer;transition:all var(--transition)}
.btn-primary{background:var(--color-primary);color:#fff}
.btn-primary:hover:not(:disabled){background:var(--color-primary-hover);box-shadow:var(--shadow-md)}
.btn-primary:disabled{opacity:.45;cursor:not-allowed}
.btn-secondary{background:var(--color-surface);color:var(--color-text);border:1px solid oklch(from var(--color-text) l c h/0.12)}
.btn-secondary:hover{background:var(--color-surface-offset)}
.btn-lg{padding:.875rem 1.75rem;font-size:var(--text-base);border-radius:var(--radius-lg)}
.btn-analyze{width:100%;justify-content:center;margin-top:1rem}

/* ── Container ────────────────────────────────────────────────────────────── */
.container{max-width:var(--content-default);margin-inline:auto;padding-inline:1.5rem}

/* ── Upload Section ───────────────────────────────────────────────────────── */
.upload-section{display:flex;align-items:center;justify-content:center;min-height:calc(100dvh - 60px);padding:2rem 1.5rem}
.upload-container{width:100%;max-width:580px;display:flex;flex-direction:column;gap:1.25rem}
.upload-header{text-align:center}
.upload-header h1{font-family:var(--font-display);font-size:var(--text-2xl);letter-spacing:-0.02em;margin-bottom:.5rem}
.upload-sub{color:var(--color-text-muted);font-size:var(--text-sm)}
.upload-free-badge{display:inline-block;background:var(--color-primary-highlight);color:var(--color-primary);padding:.25rem 1rem;border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin-top:.75rem}

/* Drop Zone */
.drop-zone{border:2px dashed var(--color-border);border-radius:var(--radius-xl);padding:2.5rem 2rem;text-align:center;cursor:pointer;transition:all var(--transition);position:relative;background:var(--color-surface)}
.drop-zone:hover,.drop-zone.drag-over{border-color:var(--color-primary);background:color-mix(in oklch,var(--color-primary) 4%,var(--color-surface))}
.drop-zone:focus-visible{border-color:var(--color-primary)}
.drop-zone input[type="file"]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.drop-zone-inner{pointer-events:none}
.drop-icon{margin:0 auto 1rem;color:var(--color-text-faint)}
.drop-title{font-weight:600;font-size:var(--text-base);margin-bottom:.25rem}
.drop-sub{font-size:var(--text-sm);color:var(--color-text-muted)}
.drop-formats{font-size:var(--text-xs);color:var(--color-text-faint);margin-top:.75rem}

/* Selected File */
.selected-file{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);font-size:var(--text-sm)}
.selected-file svg{color:var(--color-primary);flex-shrink:0}
.selected-file span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.btn-clear{color:var(--color-text-faint);font-size:1.2rem;padding:.125rem .375rem;border-radius:var(--radius-sm);transition:color var(--transition),background var(--transition)}
.btn-clear:hover{color:var(--color-error);background:color-mix(in oklch,var(--color-error) 10%,transparent)}

/* ── State Sections ───────────────────────────────────────────────────────── */
.state-section{display:flex;align-items:center;justify-content:center;min-height:calc(100dvh - 60px);padding:2rem}
.state-container{text-align:center;max-width:400px}
.state-title{font-size:var(--text-lg);font-weight:600;margin-bottom:.5rem;margin-top:1rem}
.state-sub{font-size:var(--text-sm);color:var(--color-text-muted)}
.error-icon{font-size:2.5rem;margin-bottom:.5rem}

/* Spinner */
.spinner{width:44px;height:44px;border:3px solid var(--color-primary-highlight);border-top-color:var(--color-primary);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Paywall Modal ────────────────────────────────────────────────────────── */
.overlay{position:fixed;inset:0;background:oklch(0 0 0/0.5);z-index:200;display:flex;align-items:center;justify-content:center;padding:1.5rem;backdrop-filter:blur(4px)}
.modal{background:var(--color-surface);border-radius:var(--radius-xl);padding:2rem;max-width:440px;width:100%;box-shadow:var(--shadow-lg);border:1px solid oklch(from var(--color-text) l c h/0.08)}
.modal-header{text-align:center;margin-bottom:1.5rem}
.modal-icon{font-size:2rem;margin-bottom:.75rem}
.modal-header h2{font-size:var(--text-lg);font-weight:700;margin-bottom:.5rem}
.modal-sub{font-size:var(--text-sm);color:var(--color-text-muted)}
.modal-pricing{background:var(--color-surface-offset);border-radius:var(--radius-lg);padding:1.25rem;margin-bottom:1.5rem}
.modal-price{font-family:var(--font-display);font-size:2.5rem;letter-spacing:-0.02em;margin-bottom:.75rem}
.modal-price span{font-family:var(--font-body);font-size:var(--text-sm);font-weight:400;color:var(--color-text-muted)}
.modal-features{list-style:none;display:flex;flex-direction:column;gap:.5rem}
.modal-features li{font-size:var(--text-sm);color:var(--color-success)}
.modal-actions{display:flex;flex-direction:column;gap:.75rem}
.input-email{width:100%;padding:.75rem 1rem;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);font-size:var(--text-sm);transition:border-color var(--transition)}
.input-email:focus{outline:none;border-color:var(--color-primary)}
.input-email.invalid{border-color:var(--color-error)}

/* ── Report ───────────────────────────────────────────────────────────────── */
.report-section{padding-bottom:4rem}
.report-header{background:var(--color-surface);border-bottom:1px solid var(--color-divider);padding:1.25rem 0;margin-bottom:2rem}
.report-title-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.report-filename{font-weight:600;font-size:var(--text-base)}
.report-meta{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:.25rem}
.report-header-actions{display:flex;gap:.75rem;flex-shrink:0}

/* Score Card */
.score-card{background:var(--color-surface);border:1px solid oklch(from var(--color-text) l c h/0.08);border-radius:var(--radius-xl);padding:2rem;display:flex;gap:2rem;align-items:center;margin-bottom:1.5rem;flex-wrap:wrap}
.score-left{flex-shrink:0}
.score-label-top{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted);margin-bottom:.25rem}
.score-number{font-family:var(--font-display);font-size:clamp(3rem,6vw,5rem);line-height:1;color:var(--color-primary)}
.score-label-bottom{font-size:var(--text-sm);color:var(--color-text-muted);margin-top:.25rem;font-weight:500}
.score-right{flex:1;min-width:200px}
.score-bar-wrap{height:10px;background:var(--color-surface-offset);border-radius:var(--radius-full);overflow:hidden;margin-bottom:1rem}
.score-bar{height:100%;border-radius:var(--radius-full);transition:width .8s cubic-bezier(0.16,1,0.3,1),background .4s}
.score-pills{display:flex;flex-wrap:wrap;gap:.5rem}
.pill{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .75rem;border-radius:var(--radius-full);font-size:var(--text-xs)}
.pill-green{background:color-mix(in oklch,var(--color-success) 12%,var(--color-surface));color:var(--color-success)}
.pill-orange{background:color-mix(in oklch,var(--color-warning) 12%,var(--color-surface));color:var(--color-warning)}
.pill-red{background:color-mix(in oklch,var(--color-error) 12%,var(--color-surface));color:var(--color-error)}

/* Overview Grid */
.overview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(180px,100%),1fr));gap:1rem;margin-bottom:2rem}
.overview-card{background:var(--color-surface);border:1px solid oklch(from var(--color-text) l c h/0.08);border-radius:var(--radius-lg);padding:1.25rem}
.overview-val{font-size:var(--text-xl);font-weight:700;line-height:1;margin-bottom:.25rem}
.overview-name{font-size:var(--text-xs);color:var(--color-text-muted)}
.val-ok{color:var(--color-success)}
.val-warn{color:var(--color-warning)}
.val-err{color:var(--color-error)}
.val-neutral{color:var(--color-text)}

/* Issues */
.issues-section{margin-bottom:2rem}
.section-title-sm{font-size:var(--text-lg);font-weight:600;margin-bottom:1rem}
.issues-list{list-style:none;display:flex;flex-direction:column;gap:.5rem}
.issue-item{display:flex;align-items:flex-start;gap:.75rem;padding:.875rem 1rem;border-radius:var(--radius-lg);font-size:var(--text-sm)}
.issue-critical{background:color-mix(in oklch,var(--color-error) 8%,var(--color-surface));border-left:3px solid var(--color-error)}
.issue-warning{background:color-mix(in oklch,var(--color-warning) 8%,var(--color-surface));border-left:3px solid var(--color-warning)}
.issue-info{background:color-mix(in oklch,var(--color-primary) 6%,var(--color-surface));border-left:3px solid var(--color-primary)}
.issue-icon{font-size:1rem;flex-shrink:0;margin-top:.1rem}

/* Columns */
.columns-section{margin-bottom:2rem}
.columns-list{display:flex;flex-direction:column;gap:.75rem}
.col-card{background:var(--color-surface);border:1px solid oklch(from var(--color-text) l c h/0.08);border-radius:var(--radius-lg);overflow:hidden}
.col-card-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;cursor:pointer;gap:1rem;user-select:none;transition:background var(--transition)}
.col-card-header:hover{background:var(--color-surface-offset)}
.col-card-left{display:flex;align-items:center;gap:.75rem;min-width:0}
.col-name{font-weight:600;font-size:var(--text-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.col-type-badge{font-size:var(--text-xs);padding:.15rem .6rem;border-radius:var(--radius-full);background:var(--color-primary-highlight);color:var(--color-primary);white-space:nowrap;flex-shrink:0}
.col-card-right{display:flex;align-items:center;gap:.75rem;flex-shrink:0}
.col-stat{font-size:var(--text-xs);color:var(--color-text-muted);white-space:nowrap}
.col-stat.bad{color:var(--color-warning)}
.col-expand-btn{color:var(--color-text-faint);transition:transform var(--transition);display:flex;align-items:center}
.col-card.open .col-expand-btn{transform:rotate(180deg)}
.col-card-body{display:none;padding:1.25rem;border-top:1px solid var(--color-divider)}
.col-card.open .col-card-body{display:block}

/* Column metrics grid */
.col-metrics-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(140px,100%),1fr));gap:.75rem;margin-bottom:1.25rem}
.col-metric{background:var(--color-surface-offset);padding:.875rem;border-radius:var(--radius-md)}
.col-metric-val{font-size:var(--text-base);font-weight:700;line-height:1;margin-bottom:.2rem}
.col-metric-name{font-size:var(--text-xs);color:var(--color-text-muted)}

/* Top values */
.top-values{margin-bottom:1.25rem}
.top-values-title{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted);margin-bottom:.75rem}
.top-values-list{display:flex;flex-direction:column;gap:.375rem}
.top-val-row{display:flex;align-items:center;gap:.75rem;font-size:var(--text-sm)}
.top-val-bar-wrap{flex:1;height:6px;background:var(--color-surface-offset);border-radius:var(--radius-full);overflow:hidden}
.top-val-bar{height:100%;background:var(--color-primary);border-radius:var(--radius-full)}
.top-val-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px}
.top-val-count{color:var(--color-text-muted);white-space:nowrap}

/* Column issues */
.col-issues{display:flex;flex-direction:column;gap:.375rem;margin-top:.75rem}
.col-issue-item{font-size:var(--text-xs);color:var(--color-text-muted);padding:.375rem .625rem;background:var(--color-surface-offset);border-radius:var(--radius-sm)}

/* Plotly chart wrapper */
.chart-wrap{margin-bottom:1rem}

/* ── Footer ───────────────────────────────────────────────────────────────── */
.app-footer{padding:1.5rem;border-top:1px solid var(--color-divider);text-align:center;font-size:var(--text-xs);color:var(--color-text-faint)}
.app-footer a{color:var(--color-text-muted)}

/* ── Utilities ────────────────────────────────────────────────────────────── */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}
[hidden]{display:none!important}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media(max-width:600px){
  .score-card{flex-direction:column;gap:1rem}
  .report-title-row{flex-direction:column;align-items:flex-start}
  .report-header-actions{flex-wrap:wrap}
  .col-metrics-grid{grid-template-columns:repeat(2,1fr)}
}