:root{
    --bg:#F4F8FC;
    --surface:#FFFFFF;
    --teal:#2A7CB8;
    --teal-dark:#1F5A86;
    --teal-light:#E4F0F9;
    --purple:#1B4B72;
    --purple-dark:#123650;
    --amber:#F5A623;
    --danger:#E5484D;
    --success:#22A06B;
    --text:#0B2338;
    --text-soft:#51708A;
    --line:#DCE7F1;
  }

  /* ---------- DARK MODE + FIRE-GLOW ACCENTS ----------
     Toggled by setting data-theme="dark" on <html> (see toggleTheme()/
     initTheme() in the script). Reuses the same variable names as the
     light theme so every rule that already reads var(--teal), var(--text),
     etc. re-themes automatically -- only the handful of rules below that
     use a hardcoded hex color needed an explicit dark override. */
  html[data-theme="dark"]{
    --bg:#17120F;
    --surface:#211A16;
    --teal:#3FBEF5;
    --teal-dark:#0EA5D9;
    --teal-light:#15303C;
    --purple:#FF8A3D;      /* brand accent becomes a fire-orange in dark mode */
    --purple-dark:#E0651A;
    --amber:#FFB020;
    --danger:#FF6B6B;
    --success:#34D399;
    --text:#F5EAE0;
    --text-soft:#B9A99A;
    --line:#3A2C22;
    --fire-1:#FF8A3D;
    --fire-2:#FF3D1F;
  }
  :root{ --fire-1:#FF8A3D; --fire-2:#FF3D1F; }

  html[data-theme="dark"] body{
    background:linear-gradient(160deg, #17120F 0%, #201712 45%, #241209 100%);
  }
  html[data-theme="dark"] .modal{background:var(--surface);color:var(--text);}
  html[data-theme="dark"] .modal-overlay{background:rgba(6,4,3,0.72);}
  html[data-theme="dark"] .filter-field input,
  html[data-theme="dark"] .filter-field select,
  html[data-theme="dark"] select,
  html[data-theme="dark"] .search-box input,
  html[data-theme="dark"] .preview-table-wrap{
    background:#241C17;
  }
  html[data-theme="dark"] .dropzone:hover, html[data-theme="dark"] .dropzone.dragover{background:#2B2018;}
  html[data-theme="dark"] .data-quality-banner{
    background:rgba(255,176,32,0.12);border:1px solid rgba(255,176,32,0.35);color:var(--amber);
  }
  html[data-theme="dark"] .pill.normal{background:rgba(52,211,153,0.16);}
  html[data-theme="dark"] .pill.under{background:rgba(63,190,245,0.16);color:var(--teal);}
  html[data-theme="dark"] .pill.over{background:rgba(255,176,32,0.16);color:var(--amber);}
  html[data-theme="dark"] .pill.obese{background:rgba(255,107,107,0.16);}
  html[data-theme="dark"] .kpi-card, html[data-theme="dark"] .card{
    box-shadow:0 0 0 1px rgba(255,138,61,0.06), 0 18px 40px rgba(0,0,0,0.35);
  }

  /* Ambient "fire lighting" -- soft glowing embers drifting behind the
     dashboard content. Hidden in light mode, faded in for dark mode. */
  .fire-ambient{
    position:fixed;inset:0;z-index:-1;pointer-events:none;
    opacity:0;transition:opacity .5s ease;
  }
  html[data-theme="dark"] .fire-ambient{opacity:1;}
  .fire-blob{
    position:absolute;border-radius:50%;filter:blur(90px);
    background:radial-gradient(circle, var(--fire-1) 0%, var(--fire-2) 55%, transparent 75%);
    animation:fireFlicker 6s ease-in-out infinite;
  }
  .fire-blob.fb1{width:480px;height:480px;top:-180px;left:-120px;}
  .fire-blob.fb2{width:420px;height:420px;top:22%;right:-160px;opacity:0.75;animation-delay:1.6s;}
  .fire-blob.fb3{width:360px;height:360px;bottom:-160px;left:32%;opacity:0.6;animation-delay:3.2s;}
  @keyframes fireFlicker{
    0%,100%{transform:scale(1) translateY(0);opacity:0.5;}
    25%{transform:scale(1.08) translateY(-12px);opacity:0.72;}
    50%{transform:scale(0.95) translateY(6px);opacity:0.42;}
    75%{transform:scale(1.05) translateY(-4px);opacity:0.62;}
  }

  /* Theme toggle button (sits in the topbar next to the other actions) */
  .theme-toggle{
    border:2px solid var(--line);background:var(--surface);color:var(--text-soft);
    width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;
    font-size:16px;padding:0;flex-shrink:0;
  }
  .theme-toggle:hover{border-color:var(--amber);color:var(--amber);}

  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:linear-gradient(160deg, #FFFFFF 0%, #DCEEFB 50%, #123650 100%);
    background-attachment:fixed;
    color:var(--text);
    font-family:'Inter',system-ui,sans-serif;
    font-weight:600;
  }
  h1,h2,h3,.display{
    font-family:'Poppins',system-ui,sans-serif;
    font-weight:800;
    letter-spacing:-0.02em;
  }
  button{font-family:inherit;font-weight:800;cursor:pointer;}
  ::selection{background:var(--teal);color:#fff;}

  /* ---------- LOGIN SCREEN ---------- */
  #loginScreen{
    min-height:100vh;
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(160deg,#EAF3FB 0%, #BFDCF2 42%, #1F5A86 78%, #0B2338 100%);
  }
  .login-hero{
    position:absolute;inset:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:60px 80px;
    color:#fff;
    pointer-events:none;
  }
  .login-hero svg.pulse{position:absolute;bottom:-10px;left:0;width:100%;height:60%;opacity:0.4;}
  .login-hero svg.pulse2{position:absolute;top:-40px;right:-10%;width:70%;height:50%;opacity:0.22;transform:scaleX(-1);}
  .glow{position:absolute;border-radius:50%;filter:blur(80px);opacity:0.35;}
  .glow.g1{width:420px;height:420px;background:var(--purple);top:-120px;right:8%;}
  .glow.g2{width:360px;height:360px;background:#5FA8DA;bottom:-140px;left:6%;}
  .brand-mark{
    display:flex;align-items:center;gap:12px;position:relative;z-index:2;
  }
  .logo-badge{
    display:inline-flex;align-items:center;background:#fff;padding:8px 18px;border-radius:14px;
    box-shadow:0 8px 24px rgba(0,0,0,0.12);
  }
  .logo-badge img{display:block;height:34px;width:auto;}
  .login-hero .logo-badge img{height:46px;}
  .login-hero .logo-badge{margin-bottom:40px;}
  .brand-mark .dot{width:14px;height:14px;border-radius:50%;background:var(--purple);box-shadow:0 0 0 6px rgba(88,52,137,0.25);}
  .brand-mark span{font-family:'Poppins';font-weight:900;font-size:22px;letter-spacing:-0.01em;}
  .login-hero h1{font-size:clamp(32px,4.5vw,58px);line-height:1.05;margin:0 0 18px;max-width:640px;position:relative;z-index:2;}
  .login-hero p{font-size:17px;font-weight:600;max-width:480px;opacity:0.88;line-height:1.6;position:relative;z-index:2;}
  .hero-stats{display:flex;gap:36px;margin-top:44px;position:relative;z-index:2;}
  .hero-stats div b{display:block;font-family:'Poppins';font-size:26px;font-weight:900;}
  .hero-stats div span{font-size:12px;text-transform:uppercase;letter-spacing:0.08em;opacity:0.75;}

  .login-panel{
    position:relative;z-index:5;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:40px;
    width:100%;
  }
  .logo-center{
    display:flex;align-items:center;justify-content:center;
    margin-bottom:32px;
    background:transparent;
  }
  .logo-center img{
    display:block;height:150px;width:auto;
    filter:drop-shadow(0 8px 20px rgba(0,0,0,0.35));
  }
  .login-card{
    width:100%;max-width:420px;
    background:rgba(255,255,255,0.16);
    backdrop-filter:blur(22px) saturate(160%);
    -webkit-backdrop-filter:blur(22px) saturate(160%);
    border-radius:26px;
    padding:44px 38px;
    box-shadow:0 30px 80px rgba(4,30,27,0.35);
    border:1px solid rgba(255,255,255,0.35);
  }
  .login-card h2{font-size:26px;margin:0 0 6px;color:#fff;}
  .login-card .sub{font-size:14px;font-weight:600;color:rgba(255,255,255,0.85);margin-bottom:30px;}
  .field{margin-bottom:18px;}
  .field label{display:block;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:0.06em;color:#fff;margin-bottom:8px;}
  .field input{
    width:100%;padding:14px 16px;border-radius:12px;border:1.5px solid rgba(255,255,255,0.5);
    font-family:'Inter';font-weight:700;font-size:15px;color:#0B2B26;
    background:rgba(255,255,255,0.92);
  }
  .field input::placeholder{color:#7C948F;font-weight:600;}
  .field input:focus{outline:none;border-color:var(--purple);}
  .ip-hint{font-size:12px;font-weight:600;color:rgba(255,255,255,0.75);margin-top:6px;}
  .ip-error{font-size:12px;font-weight:800;color:#FFD3CE;margin-top:8px;display:none;
    background:rgba(229,72,77,0.25);border:1px solid rgba(255,180,170,0.5);border-radius:8px;padding:8px 10px;}
  .ip-error.show{display:block;}
  .btn-primary{
    width:100%;padding:15px;border:none;border-radius:12px;
    background:var(--purple);color:#fff;font-size:15px;letter-spacing:0.02em;
    box-shadow:0 10px 24px rgba(88,52,137,0.4);
    margin-top:8px;
  }
  .btn-primary:hover{background:var(--purple-dark);}
  .login-note{font-size:12px;color:rgba(255,255,255,0.75);margin-top:16px;text-align:center;font-weight:600;}

  /* ---------- DASHBOARD ---------- */
  #dashScreen{display:none;min-height:100vh;}
  .topbar{
    background:var(--bg);border-bottom:1px solid var(--line);
    padding:16px 32px;display:flex;align-items:center;justify-content:space-between;
    position:sticky;top:0;z-index:20;
    position:relative;
  }
  .topbar-pulse{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:0.5;}
  .topbar-pulse svg{position:absolute;top:0;left:0;height:100%;width:200%;animation:pulseScroll 7s linear infinite;}
  @keyframes pulseScroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
  .topbar > *{position:relative;z-index:2;}
  .topbar .brand-mark span{color:var(--text);}
  .topbar .brand-mark .dot{box-shadow:0 0 0 5px rgba(88,52,137,0.3);}
  .topbar .logo-badge{background:transparent;box-shadow:none;padding:0;}
  .topbar .logo-badge img{height:96px;width:auto;}
  .topbar-right{display:flex;align-items:center;gap:18px;}
  .user-chip{
    display:flex;align-items:center;gap:10px;background:var(--teal-light);
    padding:8px 14px;border-radius:999px;font-size:13px;font-weight:700;color:var(--teal-dark);
  }
  .user-chip .avatar{width:26px;height:26px;border-radius:50%;background:var(--teal);color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;}
  .topbar-right .avatar{width:36px;height:36px;border-radius:50%;background:var(--purple);color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;
    text-transform:uppercase;box-shadow:0 0 0 2px rgba(255,255,255,0.35);}
  .btn-ghost{
    border:2px solid var(--line);background:transparent;padding:9px 16px;border-radius:10px;
    font-size:13px;color:var(--text-soft);
  }
  .btn-ghost:hover{border-color:var(--teal-dark);color:var(--teal-dark);}
  .btn-add{
    border:none;background:var(--teal);color:#fff;padding:10px 18px;border-radius:10px;font-size:13px;
    box-shadow:0 8px 18px rgba(15,118,110,0.25);
  }
  .btn-add:hover{background:var(--teal-dark);}
  .settings-dropdown{position:relative;display:inline-block;}
  .settings-menu{
    display:none;position:absolute;top:calc(100% + 8px);right:0;min-width:220px;
    background:var(--surface,#fff);border:1px solid var(--line);border-radius:12px;
    box-shadow:0 12px 30px rgba(0,0,0,0.18);padding:6px;z-index:60;flex-direction:column;gap:2px;
  }
  html[dir="rtl"] .settings-menu{right:auto;left:0;}
  .settings-menu.open{display:flex;}
  .settings-menu-item{
    display:block;width:100%;text-align:left;border:none;background:transparent;
    padding:10px 12px;border-radius:8px;font-size:13px;color:var(--text,#333);cursor:pointer;
  }
  html[dir="rtl"] .settings-menu-item{text-align:right;}
  .settings-menu-item:hover{background:var(--teal-light);color:var(--teal-dark);}
  .btn-icon{
    border:none;background:transparent;padding:6px 8px;border-radius:8px;font-size:15px;
    cursor:pointer;color:var(--text-soft);line-height:1;
  }
  .btn-icon:hover{background:var(--teal-light);color:var(--teal-dark);}
  .btn-icon.danger:hover{background:#FDE7E7;color:var(--danger);}
  td.row-actions{white-space:nowrap;}

  .dash-body{padding:28px 32px 60px;max-width:1440px;margin:0 auto;}
  .filter-bar{
    background:var(--surface);border:1px solid var(--line);border-radius:16px;
    padding:16px 20px;display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;margin-bottom:24px;
  }
  .filter-field{display:flex;flex-direction:column;gap:6px;min-width:150px;flex:1;}
  .filter-field.search-field{flex:1.6;min-width:220px;}
  .filter-field label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-soft);}
  .filter-field input, .filter-field select{
    padding:10px 12px;border-radius:10px;border:2px solid var(--line);font-weight:700;font-size:13px;color:var(--text);
    background:#FCFFFE;
  }
  .filter-field input:focus, .filter-field select:focus{outline:none;border-color:var(--teal);}
  .btn-reset{
    border:2px solid var(--line);background:transparent;color:var(--text-soft);padding:10px 16px;
    border-radius:10px;font-size:12px;white-space:nowrap;
  }
  .btn-reset:hover{border-color:var(--purple);color:var(--purple);}
  .filter-live-tag{
    display:flex;align-items:center;gap:6px;font-size:11px;font-weight:800;color:var(--teal);
    text-transform:uppercase;letter-spacing:0.06em;padding:10px 4px;
  }
  .filter-live-tag .blip{width:8px;height:8px;border-radius:50%;background:var(--purple);animation:blip 1.4s ease-in-out infinite;}
  @keyframes blip{0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.4;transform:scale(0.7);}}
  .section-title{font-size:13px;text-transform:uppercase;letter-spacing:0.1em;color:var(--text-soft);
    margin:34px 0 14px;font-weight:800;display:flex;align-items:center;gap:10px;}
  .section-title:first-child{margin-top:0;}
  .n-badge{
    background:var(--teal-light);color:var(--teal-dark);padding:3px 10px;border-radius:999px;
    font-size:11px;font-weight:800;text-transform:none;letter-spacing:0;
  }
  .data-quality-banner{
    background:#FFF8E9;border:1px solid #F5DFA6;color:#8A6416;border-radius:12px;
    padding:12px 16px;font-size:13px;font-weight:700;margin-bottom:18px;display:none;
    align-items:center;gap:10px;
  }
  .data-quality-banner.show{display:flex;}
  .data-quality-banner .icon{font-size:16px;}

  .kpi-row{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;}
  .kpi-card{
    background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px 20px;
    position:relative;overflow:hidden;
  }
  .kpi-card .kpi-label{font-size:12px;font-weight:800;color:var(--text-soft);text-transform:uppercase;letter-spacing:0.05em;}
  .kpi-card .kpi-value{font-family:'Poppins';font-size:28px;font-weight:900;color:var(--text);margin-top:8px;}
  .kpi-card .kpi-sub{font-size:12px;font-weight:700;margin-top:6px;}
  .kpi-card .kpi-icon{position:absolute;right:14px;top:14px;width:34px;height:34px;border-radius:10px;
    display:flex;align-items:center;justify-content:center;font-size:16px;}
  .up{color:var(--success);} .down{color:var(--danger);} .flat{color:var(--amber);}

  .grid-2{display:grid;grid-template-columns:1.3fr 1fr;gap:18px;}
  .grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;}
  .card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px;}
  .card h3{font-size:16px;margin:0 0 4px;color:var(--text);}
  .card .card-sub{font-size:12px;color:var(--text-soft);font-weight:700;margin-bottom:16px;}
  .chart-wrap{position:relative;height:260px;}
  .chart-wrap.tall{height:300px;}

  .legend-row{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px;}
  .legend-item{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--text-soft);}
  .legend-dot{width:10px;height:10px;border-radius:3px;}

  table{width:100%;border-collapse:collapse;font-size:13px;}
  thead th{
    text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:0.05em;
    color:var(--text-soft);padding:10px 12px;border-bottom:2px solid var(--line);white-space:nowrap;
  }
  tbody td{padding:11px 12px;border-bottom:1px solid var(--line);white-space:nowrap;font-weight:700;color:var(--text);}
  tbody tr:hover{background:var(--teal-light);}
  .pill{padding:4px 10px;border-radius:999px;font-size:11px;font-weight:800;display:inline-block;}
  .pill.normal{background:#E3F7EE;color:var(--success);}
  .pill.under{background:#EAF2FF;color:#3B6FD1;}
  .pill.over{background:#FFF4E1;color:#B67A0E;}
  .pill.obese{background:#FDE7E7;color:var(--danger);}

  .table-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:12px;flex-wrap:wrap;}
  .search-box{flex:1;max-width:320px;position:relative;}
  .search-box input{
    width:100%;padding:10px 14px 10px 36px;border-radius:10px;border:2px solid var(--line);font-weight:700;font-size:13px;
  }
  .search-box::before{content:"⌕";position:absolute;left:12px;top:9px;color:var(--text-soft);font-size:16px;}
  .table-scroll{overflow-x:auto;border-radius:12px;}

  /* Modal */
  .modal-overlay{
    display:none;position:fixed;inset:0;background:rgba(10,35,54,0.45);z-index:50;
    align-items:center;justify-content:center;padding:20px;
  }
  .modal-overlay.open{display:flex;}
  .modal{background:#fff;border-radius:20px;padding:30px;width:100%;max-width:1400px;max-height:88vh;overflow-y:auto;}
  .modal h2{font-size:20px;margin:0 0 20px;}
  /* Row-style layout: every field sits side-by-side in one horizontal row,
     like a spreadsheet/table row, instead of stacked one field per line.
     Scrolls horizontally on narrow screens instead of wrapping. */
  .form-grid{
    display:flex;flex-wrap:nowrap;align-items:flex-start;gap:12px;
    overflow-x:auto;padding-bottom:8px;
  }
  .form-grid .field{margin-bottom:0;flex:0 0 150px;min-width:150px;}
  .form-grid .field label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;}
  .form-grid .full{flex:0 0 220px;min-width:220px;}
  .modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px;}
  .btn-cancel{border:2px solid var(--line);background:transparent;padding:11px 20px;border-radius:10px;font-size:13px;color:var(--text-soft);}
  .btn-save{border:none;background:var(--teal);color:#fff;padding:11px 22px;border-radius:10px;font-size:13px;}

  select{width:100%;padding:13px 15px;border-radius:12px;border:2px solid var(--line);font-family:'Inter';font-weight:700;font-size:15px;color:var(--text);background:#FCFFFE;}

  .dropzone{
    border:2.5px dashed var(--line);border-radius:16px;padding:36px 20px;text-align:center;
    cursor:pointer;background:var(--teal-light);transition:border-color .15s, background .15s;
  }
  .dropzone:hover, .dropzone.dragover{border-color:var(--teal);background:#E1EEF7;}
  .dropzone-icon{font-size:28px;color:var(--teal);margin-bottom:8px;}
  .dropzone-title{font-size:14px;font-weight:800;color:var(--text);}
  .dropzone-sub{font-size:12px;font-weight:700;color:var(--text-soft);margin-top:4px;}
  .upload-status{font-size:13px;font-weight:700;margin-top:14px;}
  .upload-status.error{color:var(--danger);}
  .upload-status.ok{color:var(--success);}
  .preview-table-wrap{margin-top:14px;max-height:220px;overflow:auto;border:1px solid var(--line);border-radius:10px;}
  .preview-table-wrap table{font-size:12px;}
  .preview-table-wrap th, .preview-table-wrap td{padding:7px 10px;}

  .empty-state{text-align:center;padding:40px 20px;color:var(--text-soft);font-weight:700;}

  @media(max-width:1100px){
    .kpi-row{grid-template-columns:repeat(2,1fr);}
    .grid-2,.grid-3{grid-template-columns:1fr;}
    .login-hero{display:none;}
    .login-panel{flex:1;}
  }

  /* Upload preprocessing report */
  .report-modal{max-width:760px;}
  .pp-file{font-size:13px;color:var(--text-soft);font-weight:700;margin-bottom:12px;}
  .pp-warn{background:rgba(245,166,35,0.14);color:var(--amber);border-radius:10px;padding:9px 12px;font-size:12px;font-weight:800;margin-bottom:12px;}
  .pp-tiles{display:flex;gap:12px;margin:14px 0 6px;flex-wrap:wrap;}
  .pp-tile{flex:1 1 150px;border:2px solid var(--line);border-radius:14px;padding:14px 16px;}
  .pp-tile.ok{border-color:var(--success);} .pp-tile.warn{border-color:var(--amber);}
  .pp-tile-v{font-family:'Poppins';font-size:26px;font-weight:900;color:var(--text);}
  .pp-tile-l{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-soft);margin-top:2px;}
  .report-modal h4{font-size:12px;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-soft);margin:22px 0 8px;}
  .pp-table{width:100%;border-collapse:collapse;}
  .pp-table td{padding:8px 4px;border-bottom:1px solid var(--line);font-size:13px;font-weight:700;color:var(--text);white-space:normal;}
  .pp-table .pp-n{text-align:right;width:90px;font-family:'Poppins';}
  .pp-table .pp-sub td{padding-left:18px;color:var(--text-soft);font-weight:600;font-size:12px;}
  .pp-line{font-size:13px;font-weight:700;color:var(--text);margin:6px 0;}
  .pp-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px;}
  .pp-chip{background:var(--teal-light);color:var(--teal-dark);border-radius:999px;padding:4px 10px;font-size:11px;font-weight:800;}
  .pp-chip-warn{background:rgba(245,166,35,0.16);color:var(--amber);}
  .pp-list{margin:6px 0 0;padding-inline-start:20px;font-size:13px;font-weight:600;color:var(--text);line-height:1.7;}
  html[dir="rtl"] .pp-table .pp-n{text-align:left;}

  .settings-menu-item.danger{color:var(--danger);}
  .settings-menu-item.danger:hover{background:rgba(229,72,77,0.12);color:var(--danger);}

  .grid-2.eq{grid-template-columns:1fr 1fr;}
  @media(max-width:1100px){ .grid-2.eq{grid-template-columns:1fr;} }

  /* Date slicer */
  .date-slicer{flex:1 1 100%;display:flex;flex-direction:column;gap:8px;padding-bottom:14px;margin-bottom:2px;border-bottom:1px dashed var(--line);}
  .ds-head{display:flex;flex-wrap:wrap;align-items:center;gap:12px;}
  .ds-head > label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-soft);}
  .ds-presets{display:flex;flex-wrap:wrap;gap:6px;}
  .ds-presets button{border:2px solid var(--line);background:transparent;border-radius:999px;padding:5px 12px;font-size:12px;font-weight:800;color:var(--text-soft);cursor:pointer;}
  .ds-presets button:hover{border-color:var(--teal-dark);color:var(--teal-dark);}
  .ds-presets button.active{border-color:var(--teal);background:var(--teal-light);color:var(--teal-dark);}
  .ds-inputs{display:flex;align-items:center;gap:8px;}
  .ds-arrow{color:var(--text-soft);font-weight:800;}
  .date-slicer input[type="date"]{width:auto;padding:8px 10px;border-radius:10px;border:2px solid var(--line);font-weight:700;font-size:13px;color:var(--text);background:#FCFFFE;font-family:inherit;}
  html[data-theme="dark"] .date-slicer input[type="date"]{background:#241C17;color-scheme:dark;}
  .ds-count{margin-inline-start:auto;font-size:12px;font-weight:800;color:var(--text-soft);}
  .ds-slider{position:relative;height:28px;margin:2px 9px 0;}
  .ds-track,.ds-range{position:absolute;top:11px;height:6px;border-radius:3px;}
  .ds-track{left:0;right:0;background:var(--line);}
  .ds-range{background:var(--teal);}
  .ds-slider input[type="range"]{position:absolute;left:-9px;top:0;width:calc(100% + 18px);height:28px;margin:0;padding:0;border:0;background:none;
    pointer-events:none;-webkit-appearance:none;appearance:none;outline:none;}
  .ds-slider input[type="range"]::-webkit-slider-runnable-track{background:transparent;height:28px;}
  .ds-slider input[type="range"]::-moz-range-track{background:transparent;height:28px;}
  .ds-slider input[type="range"]::-webkit-slider-thumb{pointer-events:auto;-webkit-appearance:none;appearance:none;width:18px;height:18px;margin-top:5px;border-radius:50%;
    background:var(--surface);border:3px solid var(--teal);cursor:grab;box-shadow:0 1px 4px rgba(0,0,0,0.25);}
  .ds-slider input[type="range"]::-moz-range-thumb{pointer-events:auto;box-sizing:border-box;width:18px;height:18px;border-radius:50%;
    background:var(--surface);border:3px solid var(--teal);cursor:grab;box-shadow:0 1px 4px rgba(0,0,0,0.25);}
  .ds-slider input[type="range"]:focus-visible::-webkit-slider-thumb{outline:2px solid var(--teal-dark);outline-offset:2px;}
  .ds-ends{display:flex;justify-content:space-between;font-size:11px;font-weight:700;color:var(--text-soft);}
  .date-slicer.disabled{opacity:0.5;pointer-events:none;}