:root{
    color-scheme: light;
    --bg:#f2f2f2; --surface:#ffffff; --surface-2:#f7f7f7; --surface-3:#ededed;
    --text-primary:#111111; --text-secondary:#4d4d4d; --text-muted:#828282;
    --border:rgba(17,17,17,.12); --border-strong:rgba(17,17,17,.22);
    --navy:#141414; --header-bg:#0c0c0c; --header-text:#ffffff; --header-text-dim:#b8b8b8;
    --blue:#ff9815; --blue-soft:rgba(255,152,21,.14);
    --purple:#2a2a2a; --purple-soft:rgba(42,42,42,.10);
    --slate:#6b7280; --slate-soft:rgba(107,114,128,.14);
    --green:#22a565; --green-text:#1c7a4c; --green-soft:rgba(34,165,101,.14);
    --orange:#b6790f; --orange-text:#7a5209; --orange-soft:rgba(182,121,15,.16);
    --red:#e04a4a; --red-text:#b73333; --red-soft:rgba(224,74,74,.13);
    --cyan:#ffb654; --cyan-soft:rgba(255,182,84,.18);
    --shadow:0 1px 2px rgba(17,17,17,.06), 0 14px 32px -20px rgba(17,17,17,.4);
    --radius:14px; --radius-sm:9px;
    --font-display:'Manrope',system-ui,-apple-system,sans-serif;
    --font-body:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
    --font-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',monospace;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      color-scheme: dark;
      --bg:#101010; --surface:#181818; --surface-2:#1e1e1e; --surface-3:#252525;
      --text-primary:#f5f5f5; --text-secondary:#c2c2c2; --text-muted:#8a8a8a;
      --border:rgba(255,255,255,.10); --border-strong:rgba(255,255,255,.18);
      --navy:#1e1e1e; --header-bg:#000000; --header-text:#ffffff; --header-text-dim:#b0b0b0;
      --blue:#ff9815; --blue-soft:rgba(255,152,21,.20);
      --purple:#4a4a4a; --purple-soft:rgba(74,74,74,.20);
      --slate:#8a93a0; --slate-soft:rgba(138,147,160,.20);
      --green:#2fbd78; --green-text:#5be0a0; --green-soft:rgba(47,189,120,.20);
      --orange:#d9a344; --orange-text:#f0c979; --orange-soft:rgba(217,163,68,.20);
      --red:#ea6363; --red-text:#ff8a8a; --red-soft:rgba(234,99,99,.20);
      --cyan:#ffb654; --cyan-soft:rgba(255,182,84,.20);
      --shadow:0 1px 2px rgba(0,0,0,.5), 0 14px 32px -20px rgba(0,0,0,.8);
    }
  }
  :root[data-theme="dark"]{
    color-scheme: dark;
    --bg:#101010; --surface:#181818; --surface-2:#1e1e1e; --surface-3:#252525;
    --text-primary:#f5f5f5; --text-secondary:#c2c2c2; --text-muted:#8a8a8a;
    --border:rgba(255,255,255,.10); --border-strong:rgba(255,255,255,.18);
    --navy:#1e1e1e; --header-bg:#000000; --header-text:#ffffff; --header-text-dim:#b0b0b0;
    --blue:#ff9815; --blue-soft:rgba(255,152,21,.20);
    --purple:#4a4a4a; --purple-soft:rgba(74,74,74,.20);
    --slate:#8a93a0; --slate-soft:rgba(138,147,160,.20);
    --green:#2fbd78; --green-text:#5be0a0; --green-soft:rgba(47,189,120,.20);
    --orange:#d9a344; --orange-text:#f0c979; --orange-soft:rgba(217,163,68,.20);
    --red:#ea6363; --red-text:#ff8a8a; --red-soft:rgba(234,99,99,.20);
    --cyan:#ffb654; --cyan-soft:rgba(255,182,84,.20);
    --shadow:0 1px 2px rgba(0,0,0,.35), 0 10px 28px -16px rgba(0,0,0,.6);
  }

  *{ box-sizing:border-box; }
  body{ margin:0; background:var(--bg); color:var(--text-primary); font-family:var(--font-body); }
  h1,h2,h3{ font-family:var(--font-display); margin:0; text-wrap:balance; }
  p{ margin:0; }
  button{ font-family:inherit; }
  ::selection{ background:var(--blue-soft); }

  .app{ min-height:100%; }
  .topbar{
    background:var(--header-bg); color:var(--header-text);
    padding:14px clamp(16px,4vw,32px); display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  }
  .brand{ display:flex; align-items:center; gap:12px; }
  .brand-mark{
    width:38px; height:38px; border-radius:11px; flex:none;
    background:linear-gradient(145deg, var(--blue), var(--purple));
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-display); font-weight:800; font-size:16px; color:#fff;
  }
  .brand-text h1{ font-size:17px; font-weight:800; letter-spacing:.2px; }
  .brand-text p{ font-size:12px; color:var(--header-text-dim); margin-top:1px; }
  .topbar-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .file-pill{
    display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.14); border-radius:999px; padding:6px 8px 6px 14px;
    font-size:12.5px; color:var(--header-text-dim); max-width:340px;
  }
  .file-pill strong{ color:var(--header-text); font-weight:600; }
  .file-pill span.count{ white-space:nowrap; }
  .btn{
    appearance:none; border:1px solid var(--border-strong); background:var(--surface); color:var(--text-primary);
    font-size:13px; font-weight:600; padding:8px 14px; border-radius:999px; cursor:pointer;
    display:inline-flex; align-items:center; gap:7px; transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
    line-height:1.1;
  }
  .btn:hover{ box-shadow:var(--shadow); }
  .btn:active{ transform:scale(.97); }
  .btn:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; }
  .btn-ghost-light{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.22); color:var(--header-text); }
  .btn-ghost-light:hover{ background:rgba(255,255,255,.16); }
  .btn-primary{ background:var(--blue); border-color:var(--blue); color:#fff; }
  .btn-small{ padding:6px 11px; font-size:12px; border-radius:999px; }
  .btn-clear{ background:transparent; border:1px dashed var(--border-strong); color:var(--text-secondary); }

  .main-nav{
    display:flex; gap:2px; overflow-x:auto; background:var(--header-bg);
    padding:0 clamp(16px,4vw,32px); scrollbar-width:thin;
  }
  .nav-link{
    flex:none; text-decoration:none; cursor:pointer;
    padding:11px 16px 9px; font-family:inherit; font-size:13px; font-weight:600; letter-spacing:.01em;
    color:var(--header-text-dim); white-space:nowrap; display:flex; align-items:center; gap:7px;
    border-bottom:3px solid transparent; transition:color .12s, border-color .12s;
  }
  .nav-link:hover{ color:var(--header-text); }
  .nav-link.active{ color:var(--header-text); border-bottom-color:var(--cyan); }
  .nav-link:focus-visible{ outline:2px solid var(--cyan); outline-offset:-2px; }

  /* Home page */
  .home-hero{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    padding:clamp(22px,4vw,40px); box-shadow:var(--shadow);
  }
  .home-hero h1{ font-size:clamp(22px,3vw,28px); margin-bottom:10px; }
  .home-hero p{ color:var(--text-secondary); font-size:14.5px; line-height:1.65; max-width:680px; }
  .home-hero .home-badges{ display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
  .home-badge{
    display:inline-flex; align-items:center; gap:6px; background:var(--surface-2); border:1px solid var(--border);
    border-radius:999px; padding:6px 12px; font-size:12px; color:var(--text-secondary); font-weight:500;
  }
  .home-section-title{ font-size:15px; font-weight:700; color:var(--text-primary); margin:4px 0 2px; }
  .home-section-sub{ font-size:12.5px; color:var(--text-muted); margin-bottom:4px; }
  .category-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px; }
  .category-card{
    display:flex; flex-direction:column; gap:10px; background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius); padding:18px 20px; text-decoration:none; color:inherit; box-shadow:var(--shadow);
    transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  }
  .category-card:hover{ transform:translateY(-2px); box-shadow:0 6px 20px -10px rgba(22,33,44,.35); border-color:var(--blue); }
  .category-card .cat-icon{
    width:36px; height:36px; border-radius:10px; background:linear-gradient(145deg, var(--blue), var(--purple));
    display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--font-display); font-weight:800; font-size:14px;
  }
  .category-card h3{ font-size:15.5px; font-family:var(--font-display); }
  .category-card p{ font-size:12.5px; color:var(--text-muted); }
  .category-card .cat-arrow{ margin-top:auto; font-size:12.5px; color:var(--blue); font-weight:600; display:flex; align-items:center; gap:4px; }

  .empty-state{
    display:flex; align-items:center; gap:16px; background:var(--surface); border:1px dashed var(--border-strong);
    border-radius:var(--radius); padding:22px clamp(18px,4vw,28px); color:var(--text-secondary); font-size:13.5px; line-height:1.5;
  }
  .empty-state svg{ color:var(--text-muted); flex:none; }
  .empty-state strong{ color:var(--text-primary); }

  .main{ max-width:1360px; margin:0 auto; padding:20px clamp(16px,4vw,32px) 60px; display:flex; flex-direction:column; gap:20px; }

  /* Upload */
  .upload-drop{
    border:2px dashed var(--border-strong); border-radius:var(--radius); background:var(--surface);
    padding:clamp(20px,4vw,36px); text-align:center; cursor:pointer; transition:border-color .15s, background .15s;
  }
  .upload-drop.dragover{ border-color:var(--cyan); background:var(--cyan-soft); }
  .upload-drop svg{ color:var(--blue); }
  .upload-drop h2{ font-size:18px; margin-top:12px; }
  .upload-drop p{ color:var(--text-secondary); font-size:13.5px; margin-top:6px; }
  .upload-drop .upload-actions{ margin-top:16px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
  .upload-drop input[type=file]{ display:none; }
  .upload-error{
    margin-top:14px; text-align:left; background:var(--red-soft); border:1px solid var(--red); color:var(--red-text);
    border-radius:var(--radius-sm); padding:10px 14px; font-size:13px;
  }

  .upload-compact{
    display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:12px 16px; box-shadow:var(--shadow);
  }
  .upload-compact-info{ display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--text-secondary); flex-wrap:wrap; }
  .upload-compact-info strong{ color:var(--text-primary); }
  .dot-badge{ width:8px;height:8px;border-radius:50%; background:var(--green); flex:none; }

  .demo-banner{
    display:flex; align-items:center; gap:10px; background:var(--orange-soft); border:1px solid var(--orange);
    color:var(--orange-text); border-radius:var(--radius-sm); padding:9px 14px; font-size:13px; font-weight:500;
  }

  /* KPIs */
  .kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; }
  .kpi-card{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px;
    display:flex; flex-direction:column; gap:10px; box-shadow:var(--shadow);
  }
  .kpi-head{ display:flex; align-items:center; gap:9px; }
  .kpi-icon{ width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex:none; color:#fff; }
  .kpi-label{ font-size:12.5px; color:var(--text-secondary); font-weight:500; }
  .kpi-value{ font-family:var(--font-display); font-size:25px; font-weight:800; letter-spacing:-.2px; }
  .kpi-sub{ font-size:12px; color:var(--text-muted); }
  .kpi-sub.is-red{ color:var(--red-text); font-weight:600; }
  .kpi-sub.is-orange{ color:var(--orange-text); font-weight:600; }
  .kpi-sub.is-green{ color:var(--green-text); font-weight:600; }

  /* Filters */
  .toolbar{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px;
    display:flex; flex-wrap:wrap; gap:16px 22px; align-items:flex-end; box-shadow:var(--shadow);
  }
  .field{ display:flex; flex-direction:column; gap:6px; }
  .field-label{ font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); font-weight:600; }
  .search-input{
    width:190px; max-width:44vw; border:1px solid var(--border-strong); background:var(--surface-2); color:var(--text-primary);
    border-radius:9px; padding:8px 12px; font-size:13.5px; font-family:inherit;
  }
  .search-input:focus-visible{ outline:2px solid var(--cyan); outline-offset:1px; }
  .chip-group{ display:flex; gap:6px; flex-wrap:wrap; }
  .chip{
    border:1px solid var(--border-strong); background:var(--surface-2); color:var(--text-secondary);
    border-radius:999px; padding:7px 13px; font-size:12.5px; font-weight:600; cursor:pointer; transition:all .12s;
  }
  .chip:hover{ border-color:var(--blue); }
  .chip.active{ background:var(--blue); border-color:var(--blue); color:#fff; }
  .chip.active.is-purple{ background:var(--purple); border-color:var(--purple); }
  .range-field{ min-width:180px; }
  .range-head{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
  .range-values{ font-family:var(--font-mono); font-size:12px; color:var(--text-secondary); font-variant-numeric:tabular-nums; }
  .dual-slider{ position:relative; height:26px; width:100%; min-width:150px; }
  .dual-slider-track{ position:absolute; top:50%; left:2px; right:2px; height:4px; background:var(--border-strong); border-radius:2px; transform:translateY(-50%); }
  .dual-slider-range{ position:absolute; top:50%; height:4px; background:var(--blue); border-radius:2px; transform:translateY(-50%); }
  .dual-slider input[type=range]{
    position:absolute; inset:0; width:100%; margin:0; background:transparent; -webkit-appearance:none; appearance:none; pointer-events:none;
  }
  .dual-slider input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none; pointer-events:all; width:16px; height:16px; border-radius:50%;
    background:var(--surface); border:3px solid var(--blue); cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.3); margin-top:0;
  }
  .dual-slider input[type=range]::-moz-range-thumb{
    pointer-events:all; width:16px; height:16px; border-radius:50%; background:var(--surface); border:3px solid var(--blue); cursor:pointer;
  }
  .dual-slider input[type=range]::-webkit-slider-runnable-track{ background:transparent; }
  .dual-slider input[type=range]::-moz-range-track{ background:transparent; }
  .dual-slider input[type=range]:focus-visible::-webkit-slider-thumb{ outline:2px solid var(--cyan); outline-offset:2px; }

  .active-filters{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
  .filter-tag{
    display:inline-flex; align-items:center; gap:6px; background:var(--blue-soft); color:var(--text-primary);
    border:1px solid var(--blue); border-radius:999px; padding:5px 6px 5px 12px; font-size:12px; font-weight:600;
  }
  .filter-tag button{ background:none; border:none; cursor:pointer; color:var(--text-secondary); width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
  .filter-tag button:hover{ background:rgba(0,0,0,.08); }

  /* Charts */
  .charts-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:14px; }
  .chart-card{
    grid-column:span 12; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    padding:16px 18px 12px; box-shadow:var(--shadow); display:flex; flex-direction:column; min-width:0;
  }
  @media (min-width:760px){
    .chart-card{ grid-column:span 6; }
    .chart-card.span-7{ grid-column:span 7; }
    .chart-card.span-5{ grid-column:span 5; }
    .chart-card.span-6{ grid-column:span 6; }
    .chart-card.span-12{ grid-column:span 12; }
  }
  .chart-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:10px; }
  .chart-title{ font-size:14.5px; font-weight:700; }
  .chart-caption{ font-size:12px; color:var(--text-muted); margin-top:2px; }
  .chart-hint{ font-size:11px; color:var(--text-muted); white-space:nowrap; }
  .chart-body{ position:relative; flex:1; }
  .chart-empty{ padding:30px 8px; text-align:center; color:var(--text-muted); font-size:13px; }
  .legend-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top:10px; padding-top:10px; border-top:1px solid var(--border); }
  .legend-item{ display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--text-secondary); }
  .legend-swatch{ width:10px; height:10px; border-radius:3px; flex:none; }

  /* Table */
  .table-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
  .table-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:16px 18px 4px; flex-wrap:wrap; }
  .table-scroll{ overflow-x:auto; padding:8px 18px 18px; }
  table{ width:100%; border-collapse:collapse; font-size:13px; min-width:640px; }
  thead th{
    text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted);
    font-weight:600; padding:8px 10px; border-bottom:1px solid var(--border-strong); cursor:pointer; user-select:none; white-space:nowrap;
  }
  thead th:hover{ color:var(--text-primary); }
  thead th .arrow{ margin-left:4px; opacity:.6; }
  tbody td{ padding:9px 10px; border-bottom:1px solid var(--border); color:var(--text-secondary); white-space:nowrap; }
  tbody td.name-cell{ color:var(--text-primary); font-weight:600; }
  tbody tr{ cursor:pointer; transition:background .1s; }
  tbody tr:hover{ background:var(--surface-2); }
  tbody tr.selected{ background:var(--blue-soft); }
  tbody tr.dim{ opacity:.4; }
  .num-cell{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; color:var(--text-primary); }
  .dorsal-chip{
    display:inline-flex; align-items:center; justify-content:center; min-width:26px; height:22px; padding:0 6px;
    background:var(--navy); color:#fff; border-radius:6px; font-family:var(--font-mono); font-size:12px; font-weight:600;
  }
  .foot-chip{ display:inline-flex; align-items:center; gap:5px; font-size:12.5px; }
  .foot-chip .dot{ width:8px; height:8px; border-radius:50%; }

  /* Conclusions */
  .conclusions{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow); }
  .conclusions h2{ font-size:16px; margin-bottom:4px; }
  .conclusions .sub{ font-size:12.5px; color:var(--text-muted); margin-bottom:14px; }
  .conclusion-list{ display:flex; flex-direction:column; gap:10px; }
  .conclusion-item{ font-size:13.5px; line-height:1.6; color:var(--text-secondary); padding-left:14px; border-left:3px solid var(--border-strong); }
  .conclusion-item.warn{ border-left-color:var(--orange); background:var(--orange-soft); padding:9px 12px; border-radius:0 8px 8px 0; color:var(--text-primary); }
  .conclusion-item.critical{ border-left-color:var(--red); background:var(--red-soft); padding:9px 12px; border-radius:0 8px 8px 0; color:var(--text-primary); }
  .conclusion-item.good{ border-left-color:var(--green); }
  .conclusion-item strong{ color:var(--text-primary); }

  .footer{ text-align:center; padding:22px 16px 34px; color:var(--text-muted); font-size:12px; display:flex; flex-direction:column; gap:4px; }
  .footer svg{ vertical-align:-2px; margin-right:4px; }

  .export-toast{
    position:fixed; left:50%; bottom:22px; transform:translate(-50%,10px);
    background:var(--navy); color:#fff; padding:11px 18px; border-radius:999px; font-size:13px; font-weight:500;
    box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease; z-index:50; max-width:90vw; text-align:center;
  }
  .export-toast.show{ opacity:1; transform:translate(-50%,0); }

  [hidden]{ display:none !important; }

  @media (max-width:759px){
    .toolbar{ flex-direction:column; align-items:stretch; }
    .search-input{ width:100%; max-width:none; }
    .range-field{ width:100%; }
  }

  /* Print / PDF export */
  .print-header{ display:none; }
  @media print{
    :root{
      --bg:#ffffff; --surface:#ffffff; --surface-2:#f4f7fa; --surface-3:#e9eef3;
      --text-primary:#16212c; --text-secondary:#3f4954; --text-muted:#5b6672;
      --border:#d8dee4; --border-strong:#b9c2cb;
      --navy:#141414; --blue:#ff9815; --purple:#2a2a2a; --slate:#6b7280;
      --green:#22a565; --green-text:#1c7a4c; --orange:#b6790f; --orange-text:#7a5209;
      --red:#e04a4a; --red-text:#b73333; --cyan:#ffb654;
    }
    *{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; color-adjust:exact !important; }
    @page{ margin:14mm; }
    body{ background:#fff; }
    .topbar-actions, .site-nav, .upload-drop, .upload-compact, .demo-banner, .empty-state, .toolbar, .chart-hint,
    .table-head .chart-hint, thead th .arrow, .footer, .site-brand-text p, .export-toast{ display:none !important; }
    .print-header{ display:block !important; margin-bottom:14px; }
    .print-header h1{ font-size:19px; margin-bottom:3px; }
    .print-header .meta{ font-size:11.5px; color:var(--text-secondary); }
    .main{ padding:0; max-width:none; gap:14px; }
    .kpi-card, .chart-card, .table-card, .conclusions{ box-shadow:none; border:1px solid var(--border-strong); break-inside:avoid; }
    .charts-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
    .chart-card{ grid-column:span 1 !important; }
    .chart-body{ min-height:200px; }
    .table-scroll{ overflow:visible; padding:6px 14px 14px; }
    table{ min-width:0; font-size:11px; }
    thead th{ padding:5px 6px; }
    tbody td{ padding:5px 6px; }
    tbody tr{ break-inside:avoid; }
    .conclusion-item{ break-inside:avoid; }
  }