:root{
  --bg:#f3f0ed;
  --bg2:#faf7f5;
  --surface:#ffffff;
  --surface-strong:#2a252d;
  --card:#ffffff;
  --card2:#f7f3f6;
  --line:rgba(34,30,38,.12);
  --line-soft:rgba(34,30,38,.08);
  --text:#231f27;
  --muted:#6f6773;
  --muted2:#4f4753;
  --brand:#d22d97;
  --brand-2:#ee4cb0;
  --charcoal:#26222a;
  --charcoal-2:#332d37;
  --ink:#17141b;
  --green:#1f9a6d;
  --amber:#c98a13;
  --red:#d94b64;
  --purple:#8b6ccf;
  --shadow:0 18px 44px rgba(24,16,28,.10);
  --shadow-soft:0 10px 28px rgba(24,16,28,.07);
  --radius:24px;
  --radius-sm:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,sans-serif;background:
  radial-gradient(circle at top left, rgba(210,45,151,.08), transparent 28%),
  radial-gradient(circle at bottom right, rgba(82,67,96,.06), transparent 26%),
  linear-gradient(180deg, var(--bg), var(--bg2));color:var(--text)}
body{min-height:100vh}
button,input,select{font:inherit}
button{cursor:pointer}
.page-glow{position:fixed;inset:auto;pointer-events:none;filter:blur(100px);opacity:.34;z-index:0}
.glow-a{width:300px;height:300px;left:-80px;top:40px;background:rgba(210,45,151,.20)}
.glow-b{width:260px;height:260px;right:-60px;top:300px;background:rgba(65,52,74,.16)}
.noise{position:fixed;inset:0;pointer-events:none;opacity:.015;background-image:radial-gradient(circle at 20% 20%, #000 1px, transparent 1px);background-size:18px 18px;z-index:0}

.app-shell{position:relative;z-index:1;display:grid;grid-template-columns:340px minmax(0,1fr);gap:22px;max-width:1600px;margin:0 auto;padding:22px}
.controls-panel,.card-surface,.card,.topbar,.section-nav,.detail-shell{box-shadow:var(--shadow)}
.controls-panel{background:linear-gradient(180deg, rgba(40,34,44,.98), rgba(30,24,34,.98));color:#fff;border:1px solid rgba(255,255,255,.08);border-radius:28px;padding:18px;display:flex;flex-direction:column;gap:14px;align-self:start}
.controls-panel p,.controls-panel .note,.controls-panel .summary-hint{color:rgba(255,255,255,.72)}
.controls-header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.brand-card{display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;align-items:start}
.brand-mark{width:64px;height:64px;border-radius:16px;display:grid;place-items:center;font-weight:900;font-size:21px;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;box-shadow:0 16px 34px rgba(210,45,151,.34)}
.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:11px;color:var(--brand);font-weight:800;margin-bottom:6px}
.controls-panel .eyebrow{color:#ff7fcc}
h1,h2,h3{margin:0;line-height:1.06;letter-spacing:-.02em}
h1{font-size:22px} h2{font-size:24px} h3{font-size:20px}
p{margin:0;color:var(--muted);line-height:1.6}

.panel{border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));border-radius:22px;padding:16px}
.fold{padding:0;overflow:hidden}
.summary-head{list-style:none;padding:16px;cursor:pointer}
.summary-head::-webkit-details-marker{display:none}
.summary-hint{font-size:12px}
.panel-body{padding:0 16px 16px}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.panel-head h3{font-size:16px}
.tag,.pill,.metric-chip,.nav-chip,.detail-tab{border:1px solid var(--line);border-radius:999px;padding:9px 13px;font-size:12px;background:rgba(255,255,255,.85);color:var(--muted2)}
.controls-panel .tag,.controls-panel .pill,.controls-panel .metric-chip{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12);color:#fff}
.tag.good,.metric-chip.good{background:rgba(31,154,109,.10);color:var(--green);border-color:rgba(31,154,109,.22)}
.metric-chip.warn{background:rgba(201,138,19,.10);color:var(--amber);border-color:rgba(201,138,19,.22)}
.metric-chip.bad{background:rgba(217,75,100,.11);color:var(--red);border-color:rgba(217,75,100,.22)}
.metric-chip.neutral{background:rgba(210,45,151,.10);color:var(--brand);border-color:rgba(210,45,151,.22)}
.file-drop{display:grid;place-items:center;min-height:96px;border:1px dashed rgba(255,127,204,.36);border-radius:18px;background:rgba(255,127,204,.08);color:#fff;margin-bottom:12px;text-align:center;padding:12px}
.file-drop input{display:none}
.action-row{display:grid;gap:10px}.action-row.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.btn,.icon-btn{border:none;border-radius:999px;padding:12px 16px;background:var(--charcoal);color:#fff;font-weight:800;transition:transform .18s ease, box-shadow .18s ease, background .18s ease}
.btn:hover,.icon-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-soft)}
.btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));box-shadow:0 14px 26px rgba(210,45,151,.24)}
.btn.ghost,.icon-btn{background:rgba(255,255,255,.86);border:1px solid rgba(34,30,38,.10);color:var(--charcoal)}
.controls-panel .btn.ghost,.controls-panel .icon-btn{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12);color:#fff}
.icon-btn{width:42px;height:42px;padding:0}
.note{font-size:12px;line-height:1.55;margin-top:10px}
.grid{display:grid;gap:12px}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
label{display:grid;gap:8px;font-size:12px;color:inherit}
input,select{width:100%;border-radius:16px;border:1px solid rgba(34,30,38,.12);background:#fff;color:var(--text);padding:12px 13px;outline:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.controls-panel input,.controls-panel select{background:rgba(255,255,255,.96)}
input:focus,select:focus{border-color:rgba(210,45,151,.55);box-shadow:0 0 0 3px rgba(210,45,151,.10)}

.workspace{display:flex;flex-direction:column;gap:18px;min-width:0}
.card-surface,.topbar,.section-nav,.detail-shell,.card{border-radius:26px;padding:20px;border:1px solid var(--line);background:var(--surface)}
.topbar,.section-nav{display:flex;justify-content:space-between;align-items:center;gap:14px}
.topbar{background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(250,246,248,.98))}
.topbar-actions{display:flex;gap:10px;align-items:center}
.section-nav{flex-wrap:wrap;justify-content:flex-start;background:rgba(255,255,255,.78)}
.nav-chip{background:#fff;transition:.2s ease;color:var(--muted2);font-weight:700;border-color:rgba(34,30,38,.10)}
.nav-chip.active,.nav-chip:hover,.detail-tab.active{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;border-color:transparent;box-shadow:0 12px 24px rgba(210,45,151,.20)}
.hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);gap:18px;align-items:start;background:linear-gradient(180deg, rgba(40,34,44,.98), rgba(29,24,33,.98));border-color:rgba(255,255,255,.05);color:#fff;overflow:hidden;position:relative}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 18%, rgba(255,127,204,.22), transparent 26%), radial-gradient(circle at 15% 0%, rgba(255,255,255,.05), transparent 18%);pointer-events:none}
.hero .eyebrow,.hero h3,.hero p,.hero .pill{position:relative;z-index:1}
.hero .eyebrow{color:#ff7fcc}
.hero h3{font-size:32px;margin-bottom:10px}
.hero p{color:rgba(255,255,255,.78)}
.hero-side{display:grid;gap:14px;position:relative;z-index:1}
.meta-grid,.target-board{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.mini-stat,.target-card,.kpi,.qa-card,.bottleneck{padding:16px;border-radius:20px;border:1px solid var(--line-soft);background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,244,246,.98));box-shadow:var(--shadow-soft)}
.hero .mini-stat,.hero .target-card{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.10);backdrop-filter:blur(10px);box-shadow:none}
.hero .mini-stat span,.hero .target-card span,.hero .target-card small,.hero .mini-stat strong,.hero .target-card strong{color:#fff}
.hero .target-card small{color:rgba(255,255,255,.7)}
.mini-stat span,.target-card span,.kpi .label,.qa-card span,.bottleneck .label{display:block;font-size:11px;color:var(--muted);margin-bottom:8px;text-transform:uppercase;letter-spacing:.12em;font-weight:700}
.mini-stat strong,.target-card strong,.kpi .value,.qa-card strong,.bottleneck strong{font-size:26px;line-height:1.05;letter-spacing:-.03em}
.target-card small,.kpi .sub,.qa-card p,.bottleneck p,.micro-note,.subtle{color:var(--muted);font-size:12px;line-height:1.55}
.target-card.good{border-color:rgba(31,154,109,.20)} .target-card.warn{border-color:rgba(201,138,19,.20)} .target-card.bad{border-color:rgba(217,75,100,.20)}
.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.kpi{background:linear-gradient(180deg, #fff, #fbf7f9)}
.kpi .value{font-size:30px;margin-bottom:8px}
.section-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.span-12{grid-column:span 12}.span-8{grid-column:span 8}.span-7{grid-column:span 7}.span-6{grid-column:span 6}.span-5{grid-column:span 5}.span-4{grid-column:span 4}
.card-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:14px}.space-between{justify-content:space-between}
.card-head h3{font-size:22px}
.lead-copy{margin-bottom:14px}
.pill-row{display:flex;flex-wrap:wrap;gap:8px}
.metric-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
.metric-grid .mini-stat{padding:14px}
.chart-wrap{position:relative;width:100%}.chart-wrap.lg{height:360px}.chart-wrap.md{height:320px}.chart-wrap.sm{height:260px}
canvas{width:100% !important;height:100% !important}
.accent-blue,.accent-amber{background:linear-gradient(180deg, rgba(40,34,44,.98), rgba(29,24,33,.98));border-color:rgba(255,255,255,.05);color:#fff;position:relative;overflow:hidden}
.accent-blue::before,.accent-amber::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at top right, rgba(210,45,151,.20), transparent 36%);pointer-events:none}
.accent-blue .eyebrow,.accent-amber .eyebrow{color:#ff7fcc}
.accent-blue p,.accent-amber p,.accent-blue .subtle,.accent-amber .subtle{color:rgba(255,255,255,.72)}
.accent-blue .mini-stat,.accent-amber .mini-stat,.accent-blue .bottleneck,.accent-amber .bottleneck{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.10);box-shadow:none}
.accent-blue .mini-stat span,.accent-blue .mini-stat strong,.accent-amber .bottleneck .label,.accent-amber .bottleneck strong,.accent-amber .bottleneck p{color:#fff}
.bottleneck-list{display:grid;gap:12px}
.bottleneck.good{border-color:rgba(31,154,109,.20)} .bottleneck.warn{border-color:rgba(201,138,19,.20)} .bottleneck.bad{border-color:rgba(217,75,100,.20)}
.heatmap-wrap{overflow:auto;border:1px solid var(--line-soft);border-radius:20px;background:#fff}
.table-wrap{overflow:auto;border:1px solid var(--line-soft);border-radius:20px;background:#fff;box-shadow:var(--shadow-soft)}
.table-wrap.compact table td,.table-wrap.compact table th{padding:10px 12px}
.split-table{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
table{width:100%;border-collapse:collapse;min-width:720px}
th,td{padding:12px 14px;border-bottom:1px solid rgba(34,30,38,.07);text-align:left;vertical-align:top}
th{position:sticky;top:0;background:#f8f3f6;color:var(--muted2);font-size:12px;text-transform:uppercase;letter-spacing:.08em;z-index:1}
td{color:var(--text);font-size:13px} tr:hover td{background:rgba(210,45,151,.03)}
.heatmap{min-width:980px}.heatmap th,.heatmap td{text-align:center;padding:10px;border-bottom:1px solid rgba(34,30,38,.07)} .heatmap td strong{display:block;font-size:12px}.heatmap td span{font-size:10px;color:var(--muted)}
.qa-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.qa-card.good{border-color:rgba(31,154,109,.20)} .qa-card.warn{border-color:rgba(201,138,19,.20)} .qa-card.bad{border-color:rgba(217,75,100,.20)}
.detail-shell{display:flex;flex-direction:column;gap:16px;background:linear-gradient(180deg, #fff, #faf6f8)}
.detail-tabs{display:flex;flex-wrap:wrap;gap:8px}
.detail-tab{font-weight:700}
.detail-pane{display:none}.detail-pane.active{display:block}
.controls-backdrop{display:none}
.mobile-only{display:none}
.hidden-controls .app-shell{grid-template-columns:minmax(0,1fr)}
.hidden-controls #controlsPanel{display:none}

@media (max-width: 1220px){
  .app-shell{grid-template-columns:300px minmax(0,1fr)}
  .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero{grid-template-columns:1fr}
  .span-8,.span-7,.span-6,.span-5,.span-4{grid-column:span 12}
  .split-table,.qa-grid,.meta-grid,.target-board{grid-template-columns:1fr}
}
@media (max-width: 920px){
  .app-shell{grid-template-columns:minmax(0,1fr);padding:14px}
  .controls-panel{position:fixed;left:12px;top:12px;bottom:12px;width:min(92vw,360px);z-index:30;transform:translateX(-115%);transition:transform .25s ease;overflow:auto}
  body.controls-open .controls-panel{transform:translateX(0)}
  body.controls-open .controls-backdrop{display:block;position:fixed;inset:0;background:rgba(24,16,28,.34);z-index:20}
  .mobile-only{display:inline-flex}
  .grid.two,.action-row.two,.metric-grid,.kpi-grid{grid-template-columns:1fr}
  .chart-wrap.lg,.chart-wrap.md,.chart-wrap.sm{height:260px}
  h2{font-size:20px}.hero h3{font-size:24px}
}


.multi-filter-card{display:flex;flex-direction:column;gap:10px;padding:12px;border:1px solid rgba(34,30,38,.08);border-radius:18px;background:rgba(255,255,255,.82)}
.filter-label-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;font-weight:700;color:#514a56;text-transform:uppercase;letter-spacing:.04em}
.filter-label-row select{min-width:150px}
.multi-filter-card select[multiple]{min-height:148px;padding:10px;border-radius:14px}
textarea#combineRules{min-height:120px;resize:vertical}
@media (max-width: 900px){.advanced-filter-grid{grid-template-columns:1fr !important}.filter-label-row{flex-direction:column;align-items:flex-start}.filter-label-row select{width:100%}}


/* Filter panel refinement */
.panel-body .advanced-filter-grid{grid-template-columns:1fr !important;gap:14px}
.multi-filter-card{
  padding:14px;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,243,246,.96));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
.filter-label-row{
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
}
.filter-label-row span{
  font-size:12px;
  letter-spacing:.08em;
  color:#6a6270;
}
.filter-label-row select{
  width:100%;
  min-width:0;
  padding:10px 14px;
  border-radius:999px;
  background:#fff;
}
.multi-filter-card select[multiple]{
  width:100%;
  min-height:132px;
  max-height:180px;
  padding:12px 14px;
  border-radius:18px;
  background:#fff;
  line-height:1.45;
}
.multi-filter-card select[multiple] option{padding:4px 2px}
.controls-panel .grid.two{gap:14px}
.controls-panel .note{line-height:1.45}
@media (min-width: 921px){
  .controls-panel{max-width:360px}
}
@media (max-width: 920px){
  .multi-filter-card select[multiple]{min-height:120px;max-height:160px}
}



/* Compact filter panel refinements */
.filters-grid,
.filter-grid,
.advanced-filters-grid{
  gap: 10px !important;
}

.filter-card,
.filter-group-card,
.control-card{
  padding: 12px !important;
  border-radius: 18px !important;
}

.filter-card h3,
.filter-group-card h3,
.control-card h3{
  margin-bottom: 8px !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.08em !important;
}

.filter-card .muted,
.filter-group-card .muted,
.control-card .muted{
  margin-bottom: 8px !important;
  font-size: 0.78rem !important;
}

.filter-row,
.control-row{
  gap: 8px !important;
  margin-bottom: 8px !important;
}

.filter-card label,
.filter-group-card label,
.control-card label{
  font-size: 0.78rem !important;
  margin-bottom: 4px !important;
}

.filter-card input,
.filter-card select,
.filter-group-card input,
.filter-group-card select,
.control-card input,
.control-card select{
  min-height: 40px !important;
  padding: 8px 12px !important;
  border-radius: 14px !important;
  font-size: 0.92rem !important;
}

.filter-card textarea,
.filter-group-card textarea,
.control-card textarea{
  min-height: 78px !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
  font-size: 0.9rem !important;
}

.filter-mode-row,
.include-exclude-row,
.mode-row{
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 6px !important;
  margin: 6px 0 8px !important;
}

.filter-card .chip,
.filter-group-card .chip,
.control-card .chip,
.filter-card .pill,
.filter-group-card .pill,
.control-card .pill{
  padding: 6px 10px !important;
  border-radius: 999px !important;
  font-size: 0.78rem !important;
}

.filter-card .multiselect,
.filter-group-card .multiselect,
.control-card .multiselect,
.filter-card select[multiple],
.filter-group-card select[multiple],
.control-card select[multiple]{
  min-height: 120px !important;
  max-height: 140px !important;
  padding: 8px 10px !important;
}

.filters-panel .actions,
.control-panel .actions,
.filter-actions{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.filters-panel .actions .btn,
.control-panel .actions .btn,
.filter-actions .btn{
  min-height: 40px !important;
  padding: 10px 14px !important;
}

@media (min-width: 900px){
  .filters-grid,
  .advanced-filters-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .filter-compact-span,
  .full-span{
    grid-column: 1 / -1 !important;
  }

  .filter-card,
  .filter-group-card,
  .control-card{
    padding: 12px !important;
  }

  .filter-card .multiselect,
  .filter-group-card .multiselect,
  .control-card .multiselect,
  .filter-card select[multiple],
  .filter-group-card select[multiple],
  .control-card select[multiple]{
    min-height: 104px !important;
    max-height: 124px !important;
  }
}

@media (max-width: 640px){
  .filter-card,
  .filter-group-card,
  .control-card{
    padding: 10px !important;
    border-radius: 16px !important;
  }

  .filter-card input,
  .filter-card select,
  .filter-group-card input,
  .filter-group-card select,
  .control-card input,
  .control-card select{
    min-height: 38px !important;
    padding: 8px 10px !important;
  }

  .filter-card .multiselect,
  .filter-group-card .multiselect,
  .control-card .multiselect,
  .filter-card select[multiple],
  .filter-group-card select[multiple],
  .control-card select[multiple]{
    min-height: 96px !important;
    max-height: 112px !important;
  }
}



/* ===== Filter system polish: neater + more efficient ===== */
.filters-panel,
.control-panel {
  position: relative;
}

.filter-card,
.filter-group-card,
.control-card {
  background: rgba(255,255,255,0.92) !important;
  border: 1px solid rgba(47,38,58,0.08) !important;
  box-shadow: 0 10px 28px rgba(28, 20, 38, 0.06) !important;
}

.filter-card h3,
.filter-group-card h3,
.control-card h3 {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-bottom: 6px !important;
}

.filter-card h3::after,
.filter-group-card h3::after,
.control-card h3::after {
  content: attr(data-count);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(64,52,77,0.72);
}

.filter-card .muted,
.filter-group-card .muted,
.control-card .muted {
  display: none !important;
}

/* Make date filters denser */
.filter-row,
.control-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: 8px !important;
}

.filter-card label,
.filter-group-card label,
.control-card label {
  color: rgba(76,66,90,0.9) !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
}

.filter-card input,
.filter-card select,
.filter-group-card input,
.filter-group-card select,
.control-card input,
.control-card select,
.filter-search-input {
  background: #ffffff !important;
  border: 1px solid rgba(59,45,74,0.12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8) !important;
}

.filter-card select:not([multiple]),
.filter-group-card select:not([multiple]),
.control-card select:not([multiple]) {
  font-weight: 600 !important;
}

/* Search box added above multiselects */
.filter-search-wrap {
  margin: 0 0 8px 0;
}

.filter-search-input {
  width: 100%;
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 0.88rem;
  color: #251f2e;
}

.filter-search-input::placeholder {
  color: rgba(84,76,95,0.65);
}

/* Multi-selects tighter */
.filter-card select[multiple],
.filter-group-card select[multiple],
.control-card select[multiple] {
  min-height: 96px !important;
  max-height: 116px !important;
  border-radius: 16px !important;
  line-height: 1.35 !important;
}

.filter-card select[multiple] option,
.filter-group-card select[multiple] option,
.control-card select[multiple] option {
  padding: 4px 6px !important;
}

/* Active summary row */
.filter-summary-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px 0;
}

.filter-summary-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.84);
  border: 1px solid rgba(59,45,74,0.10);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #44374f;
}

.filter-summary-pill strong {
  color: #d4389a;
}

/* Make cards less tall */
.filter-card.compact-filter-card,
.filter-group-card.compact-filter-card,
.control-card.compact-filter-card {
  padding: 10px !important;
}

.filter-stack {
  display: grid;
  gap: 10px;
}

@media (min-width: 920px) {
  .filter-stack {
    grid-template-columns: repeat(2, minmax(0,1fr));
    align-items: start;
  }
  .filter-stack .span-full {
    grid-column: 1 / -1;
  }
}

/* Reduce oversized left rail feel */
.sidebar,
.controls-sidebar,
.control-shell {
  gap: 10px !important;
}

/* Better mobile density */
@media (max-width: 640px) {
  .filter-row,
  .control-row {
    grid-template-columns: 1fr !important;
  }

  .filter-card select[multiple],
  .filter-group-card select[multiple],
  .control-card select[multiple] {
    min-height: 88px !important;
    max-height: 98px !important;
  }

  .filter-summary-bar {
    margin-bottom: 8px;
  }
}


/* Collapsible filter cards */
.filter-card,
.filter-group-card,
.control-card{
  overflow: hidden;
}

.filter-card h3,
.filter-group-card h3,
.control-card h3{
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-right: 28px;
}

.filter-card h3::before,
.filter-group-card h3::before,
.control-card h3::before{
  content: "▾";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  line-height: 1;
  color: rgba(64,52,77,0.72);
  transition: transform 0.18s ease;
}

.filter-card.is-collapsed h3::before,
.filter-group-card.is-collapsed h3::before,
.control-card.is-collapsed h3::before{
  transform: translateY(-50%) rotate(-90deg);
}

.filter-card .card-collapsible,
.filter-group-card .card-collapsible,
.control-card .card-collapsible{
  display: block;
}

.filter-card.is-collapsed .card-collapsible,
.filter-group-card.is-collapsed .card-collapsible,
.control-card.is-collapsed .card-collapsible{
  display: none !important;
}


/* Stronger collapsible filter sections */
.filter-card,
.filter-group-card,
.control-card{
  overflow: hidden !important;
}

.filter-collapse-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  background:transparent;
  border:none;
  padding:0;
  margin:0 0 8px 0;
  cursor:pointer;
  text-align:left;
}

.filter-collapse-header .filter-collapse-title{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  flex:1 1 auto;
}

.filter-collapse-header .filter-collapse-title h3{
  margin:0 !important;
  padding:0 !important;
  cursor:pointer !important;
}

.filter-collapse-header .filter-collapse-meta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}

.filter-collapse-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:32px;
  height:24px;
  padding:0 8px;
  border-radius:999px;
  background:rgba(212,56,154,0.10);
  color:#b4217a;
  font-size:0.74rem;
  font-weight:800;
  letter-spacing:0.04em;
}

.filter-collapse-chevron{
  width:28px;
  height:28px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(59,45,74,0.06);
  color:rgba(59,45,74,0.78);
  font-size:14px;
  transition:transform 0.18s ease, background 0.18s ease;
}

.filter-card.is-collapsed .filter-collapse-chevron,
.filter-group-card.is-collapsed .filter-collapse-chevron,
.control-card.is-collapsed .filter-collapse-chevron{
  transform:rotate(-90deg);
}

.card-collapsible{
  display:block;
}

.filter-card.is-collapsed .card-collapsible,
.filter-group-card.is-collapsed .card-collapsible,
.control-card.is-collapsed .card-collapsible{
  display:none !important;
}

.filter-card.is-collapsed,
.filter-group-card.is-collapsed,
.control-card.is-collapsed{
  padding-bottom:10px !important;
}



/* ===== Masterful final polish ===== */
html { scroll-behavior: smooth; }
body { line-height: 1.45; }

.controls-panel {
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 32px);
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.18) transparent;
}
.controls-panel::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar,
.detail-shell::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.controls-panel::-webkit-scrollbar-thumb,
.table-wrap::-webkit-scrollbar-thumb,
.detail-shell::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.18);
  border-radius: 999px;
}
.controls-panel::-webkit-scrollbar-track,
.table-wrap::-webkit-scrollbar-track,
.detail-shell::-webkit-scrollbar-track {
  background: transparent;
}

.topbar,
.section-nav {
  backdrop-filter: blur(10px);
}

.card,
.card-surface,
.detail-shell,
.topbar,
.section-nav {
  border: 1px solid rgba(34,30,38,.08);
}

.card-head h3,
.panel-head h3 {
  letter-spacing: -.02em;
}

.kpi {
  min-height: 172px;
}
.kpi .label {
  letter-spacing: .12em;
}
.kpi .value {
  font-size: clamp(28px, 2.4vw, 42px);
}
.kpi .sub {
  max-width: 26ch;
}

.filter-utility-bar {
  display: grid;
  gap: 10px;
  margin: 0 0 12px 0;
}
.active-filter-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 2px;
}
.active-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(34,30,38,.10);
  color: #493f52;
  font-size: 12px;
  font-weight: 700;
}
.active-filter-pill strong {
  color: var(--brand);
}
.filter-utility-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.btn.compact {
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 999px;
}
.btn.soft {
  background: rgba(255,255,255,.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,.10);
}
.btn.soft:hover {
  background: rgba(255,255,255,.18);
}

.panel.fold .panel-body {
  padding-top: 2px;
}

.panel-body .advanced-filter-grid {
  display: grid;
  grid-template-columns: 1fr !important;
  gap: 10px;
}

.multi-filter-card {
  position: relative;
  padding: 10px !important;
  border-radius: 20px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,243,246,.98)) !important;
  border: 1px solid rgba(34,30,38,.08) !important;
  box-shadow: 0 8px 22px rgba(24,16,28,.05), inset 0 1px 0 rgba(255,255,255,.85) !important;
  gap: 8px !important;
}

.multi-filter-card.is-collapsed .multi-filter-body {
  display: none !important;
}

.multi-filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  user-select: none;
  padding: 2px 2px 0 2px;
}
.multi-filter-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}
.multi-filter-title span {
  text-transform: uppercase;
  letter-spacing: .09em;
  font-size: 11px;
  font-weight: 800;
  color: #655d69;
}
.multi-filter-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.multi-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 24px;
  border-radius: 999px;
  padding: 0 8px;
  background: rgba(210,45,151,.10);
  color: #b1257b;
  font-size: 11px;
  font-weight: 800;
}
.multi-filter-chevron {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(34,30,38,.06);
  color: #5b5260;
  font-size: 13px;
  transition: transform .18s ease, background .18s ease;
}
.multi-filter-card.is-collapsed .multi-filter-chevron {
  transform: rotate(-90deg);
}

.multi-filter-body {
  display: grid;
  gap: 8px;
}

.filter-toolbar-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) 170px;
  gap: 8px;
  align-items: center;
}

.filter-search-input {
  width: 100%;
  min-height: 38px;
  padding: 9px 12px;
  border-radius: 14px;
  border: 1px solid rgba(34,30,38,.10);
  background: #fff;
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.filter-search-input::placeholder {
  color: #887e8b;
}

.filter-label-row {
  display: block !important;
  margin: 0 !important;
}
.filter-label-row > span {
  display: none !important;
}
.filter-label-row select {
  min-width: 0 !important;
  width: 100% !important;
  min-height: 38px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 700;
  color: #342d3a;
  background: #fff;
  border: 1px solid rgba(34,30,38,.10);
}

.multi-filter-card select[multiple] {
  min-height: 104px !important;
  max-height: 132px !important;
  padding: 8px !important;
  border-radius: 16px !important;
  background: #fff !important;
  border: 1px solid rgba(34,30,38,.10) !important;
  line-height: 1.3;
}
.multi-filter-card select[multiple] option {
  padding: 6px 8px;
  border-radius: 8px;
}
.multi-filter-card select[multiple] option:checked {
  background: linear-gradient(180deg, rgba(210,45,151,.14), rgba(210,45,151,.22));
  color: #2b2331;
}

.note {
  font-size: 12px;
}

table th {
  position: sticky;
  top: 0;
  background: #fbf7f9;
  z-index: 1;
}
.table-wrap {
  border-radius: 18px;
  overflow: auto;
  border: 1px solid rgba(34,30,38,.08);
}

canvas {
  image-rendering: auto;
}

@media (max-width: 1100px) {
  .controls-panel {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    max-height: none;
  }
}

@media (max-width: 900px) {
  .filter-toolbar-row {
    grid-template-columns: 1fr;
  }
  .filter-utility-actions {
    width: 100%;
  }
  .filter-utility-actions .btn {
    flex: 1 1 auto;
  }
  .kpi-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 640px) {
  .kpi-grid {
    grid-template-columns: 1fr;
  }
  .multi-filter-card select[multiple] {
    min-height: 92px !important;
    max-height: 112px !important;
  }
}


/* ===== Fully responsive layout system ===== */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

img, canvas, svg, video {
  max-width: 100%;
  height: auto;
}

body { min-width: 320px; }

.app-shell,
.shell,
.page-shell,
.dashboard-shell,
.layout-shell,
main,
section,
article {
  max-width: 100%;
  min-width: 0;
}

.controls-panel,
.sidebar,
.controls-sidebar,
.control-shell,
.content-panel,
.main-panel,
.dashboard-main,
.detail-shell,
.table-wrap,
.chart-card,
.card,
.panel,
.section,
.kpi,
.kpi-grid,
.grid,
.row {
  min-width: 0;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.section-grid-2,
.two-col,
.dual-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.section-grid-3,
.three-col {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.card,
.panel,
.chart-card,
.kpi {
  width: 100%;
  min-width: 0;
}

.chart-wrap,
.canvas-wrap {
  position: relative;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

canvas {
  display: block;
  width: 100% !important;
  max-width: 100%;
}

.table-wrap {
  width: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%;
  min-width: 720px;
}

.filter-toolbar-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(140px, 180px);
  gap: 8px;
}

.multi-filter-card,
.filter-card,
.filter-group-card,
.control-card,
.multi-filter-body {
  width: 100%;
  min-width: 0;
}

.multi-filter-card select[multiple],
.filter-card select[multiple],
.filter-group-card select[multiple],
.control-card select[multiple] {
  width: 100%;
  min-width: 0;
}

.controls-panel {
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 32px);
  overflow: auto;
}

.mobile-controls-toggle {
  position: fixed;
  right: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 1200;
  display: none;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(180deg, rgba(210,45,151,.96), rgba(191,34,136,.96));
  color: #fff;
  font-weight: 800;
  letter-spacing: .03em;
  box-shadow: 0 12px 26px rgba(191,34,136,.28);
}

.mobile-controls-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1090;
  background: rgba(18, 14, 24, .48);
  backdrop-filter: blur(3px);
}

@media (max-width: 1400px) {
  .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1200px) {
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section-grid-3,
  .three-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .controls-panel {
    position: static !important;
    top: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

@media (max-width: 1024px) {
  .section-grid-2,
  .two-col,
  .dual-grid,
  .section-grid-3,
  .three-col {
    grid-template-columns: 1fr;
  }

  .topbar,
  .section-nav {
    position: static !important;
    top: auto !important;
  }
}

@media (max-width: 900px) {
  .mobile-controls-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .controls-panel,
  .sidebar,
  .controls-sidebar,
  .control-shell {
    position: fixed !important;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1100;
    width: min(92vw, 420px) !important;
    max-width: 420px;
    max-height: none !important;
    overflow: auto !important;
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
    transform: translateX(-104%);
    transition: transform .24s ease;
    box-shadow: 20px 0 40px rgba(16,12,20,.22);
  }

  body.mobile-controls-open .controls-panel,
  body.mobile-controls-open .sidebar,
  body.mobile-controls-open .controls-sidebar,
  body.mobile-controls-open .control-shell {
    transform: translateX(0);
  }

  body.mobile-controls-open { overflow: hidden; }

  .main-grid,
  .app-grid,
  .dashboard-grid,
  .layout-grid {
    grid-template-columns: 1fr !important;
  }

  .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .kpi { min-height: 148px; }

  .card,
  .panel,
  .chart-card,
  .kpi,
  .detail-shell { border-radius: 20px !important; }

  .panel-body,
  .card-body,
  .detail-shell {
    padding-left: 14px;
    padding-right: 14px;
  }
}

@media (max-width: 700px) {
  .filter-toolbar-row { grid-template-columns: 1fr; }
  .filter-utility-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .filter-utility-actions .btn { width: 100%; }
  table { min-width: 640px; }
}

@media (max-width: 640px) {
  body { font-size: 15px; }
  .kpi-grid { grid-template-columns: 1fr; }
  .kpi { min-height: 134px; }
  .kpi .value { font-size: clamp(26px, 8vw, 38px); }

  .topbar,
  .section-nav,
  .card,
  .panel,
  .chart-card,
  .detail-shell { border-radius: 18px !important; }

  .panel-head,
  .card-head { padding: 14px 14px 8px 14px !important; }

  .panel-body,
  .card-body,
  .detail-shell { padding: 12px !important; }

  .multi-filter-card,
  .filter-card,
  .filter-group-card,
  .control-card {
    padding: 10px !important;
    border-radius: 18px !important;
  }

  .multi-filter-card select[multiple],
  .filter-card select[multiple],
  .filter-group-card select[multiple],
  .control-card select[multiple] {
    min-height: 92px !important;
    max-height: 108px !important;
  }

  .active-filter-pill {
    font-size: 11px;
    padding: 6px 10px;
  }

  table { min-width: 560px; }
}

@media (max-width: 420px) {
  .mobile-controls-toggle {
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    min-height: 42px;
    padding: 9px 12px;
  }

  .controls-panel,
  .sidebar,
  .controls-sidebar,
  .control-shell {
    width: 100vw !important;
    max-width: 100vw;
  }

  .kpi .label { font-size: 11px; }
  .kpi .sub { font-size: 13px; }
  table { min-width: 520px; }
}