@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Barlow+Condensed:wght@400;600;700&display=swap');

:root{
  --bg:#f2f2f3;
  --surface:#e9e9ea;
  --surface-alt:#e7e7ea;
  --border:color-mix(in srgb, #1d1f20 16%, transparent);
  --ink:#1d1f20;
  --ink-muted:color-mix(in srgb, #1d1f20 58%, transparent);
  --ink-faint:color-mix(in srgb, #1d1f20 42%, transparent);
  --accent:#5980a6;
  --accent-ink:#2c455d;
  --accent-soft:#eef6ff;
  --status-ok:#2E7D46; --status-ok-soft:#E1F2E5;
  --status-warn:#A9700A; --status-warn-soft:#FBEED2;
  --status-crit:#B23B3B; --status-crit-soft:#F8E1E1;
  --shadow: 0 1px 2px color-mix(in srgb, #2b2b2d 14%, transparent), 0 8px 24px -12px color-mix(in srgb, #2b2b2d 22%, transparent);

  --accent-100:#eef6ff; --accent-200:#d6ebff; --accent-300:#b5d9fd; --accent-400:#94bce3;
  --accent-500:#749dc4; --accent-600:#597ea3; --accent-700:#416180; --accent-800:#2c455d; --accent-900:#1d2d3d;
  --neutral-100:#f5f5f8; --neutral-200:#e7e7ea; --neutral-300:#d4d4d7; --neutral-400:#b7b7ba;
  --neutral-500:#98989b; --neutral-600:#7a7a7d; --neutral-700:#5d5d60; --neutral-800:#424244; --neutral-900:#2b2b2d;

  --sidebar-bg:#1d2d3d;
  --sidebar-bg-alt:#2c455d;
  --sidebar-border:rgba(231,238,245,0.14);
  --sidebar-text:#b9cbdb;
  --sidebar-label:#6f8ba6;
  --sidebar-active-accent:#94bce3;
  --sidebar-active-bg:rgba(148,188,227,0.16);
  --sidebar-active-text:#ffffff;
  --sidebar-hover-bg:rgba(148,188,227,0.08);

  --corner-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11'%3E%3Cpath d='M5.5 0v11M0 5.5h11' stroke='%231d1f20' stroke-opacity='.55' stroke-width='1'/%3E%3C/svg%3E");
  --bar-1:#416180; --bar-2:#597ea3; --bar-3:#749dc4; --bar-4:#94bce3;

  --font-body:'Barlow','Segoe UI','Malgun Gothic',-apple-system,'Apple SD Gothic Neo',sans-serif;
  --font-heading:'Barlow Condensed','Segoe UI','Malgun Gothic',-apple-system,'Apple SD Gothic Neo',sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#14181f; --surface:#1c222c; --surface-alt:#232a35; --border:color-mix(in srgb, #e7eaf2 16%, transparent);
    --ink:#e7eaf2; --ink-muted:color-mix(in srgb, #e7eaf2 62%, transparent); --ink-faint:color-mix(in srgb, #e7eaf2 42%, transparent);
    --accent:#94bce3; --accent-ink:#b5d9fd; --accent-soft:#20314d;
    --status-ok:#5FCB86; --status-ok-soft:#12301E;
    --status-warn:#E5B14E; --status-warn-soft:#332708;
    --status-crit:#EA8080; --status-crit-soft:#3A1919;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 28px -12px rgba(0,0,0,.5);
    --sidebar-bg:#0f1822; --sidebar-bg-alt:#1a2836; --sidebar-border:rgba(231,238,245,0.1);
    --corner-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11'%3E%3Cpath d='M5.5 0v11M0 5.5h11' stroke='%2394bce3' stroke-opacity='.4' stroke-width='1'/%3E%3C/svg%3E");
    --bar-1:#94bce3; --bar-2:#749dc4; --bar-3:#597ea3; --bar-4:#416180;
  }
}
:root[data-theme="dark"]{
  --bg:#14181f; --surface:#1c222c; --surface-alt:#232a35; --border:color-mix(in srgb, #e7eaf2 16%, transparent);
  --ink:#e7eaf2; --ink-muted:color-mix(in srgb, #e7eaf2 62%, transparent); --ink-faint:color-mix(in srgb, #e7eaf2 42%, transparent);
  --accent:#94bce3; --accent-ink:#b5d9fd; --accent-soft:#20314d;
  --status-ok:#5FCB86; --status-ok-soft:#12301E;
  --status-warn:#E5B14E; --status-warn-soft:#332708;
  --status-crit:#EA8080; --status-crit-soft:#3A1919;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 28px -12px rgba(0,0,0,.5);
  --sidebar-bg:#0f1822; --sidebar-bg-alt:#1a2836; --sidebar-border:rgba(231,238,245,0.1);
  --corner-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11'%3E%3Cpath d='M5.5 0v11M0 5.5h11' stroke='%2394bce3' stroke-opacity='.4' stroke-width='1'/%3E%3C/svg%3E");
  --bar-1:#94bce3; --bar-2:#749dc4; --bar-3:#597ea3; --bar-4:#416180;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body);
  font-size:16px; line-height:1.55; letter-spacing:0;
  font-variant-numeric:tabular-nums;
}
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-heading); font-weight:600; line-height:1.12; letter-spacing:-.015em; margin:0 0 7px;
}
h1{font-size:42px;} h2{font-size:32px;} h3{font-size:25px;} h4{font-size:20px;} h5{font-size:16px;}
h6{font-size:13px; letter-spacing:.08em; text-transform:uppercase;}
.app-brand,.btn,.pill{letter-spacing:0;}
code,.mono{font-family:'Cascadia Mono',ui-monospace,SFMono-Regular,'Consolas',monospace; font-variant-numeric:tabular-nums;}
a{color:inherit;}

.app-shell{display:grid; grid-template-columns:244px 1fr; min-height:100vh;}
.app-nav{
  background:var(--sidebar-bg); border-right:1px solid var(--sidebar-border);
  padding:0; position:sticky; top:0; height:100vh; overflow-y:auto;
  display:flex; flex-direction:column;
}
.app-brand-block{padding:22px 20px 18px; border-bottom:1px solid var(--sidebar-border);}
.app-brand{display:flex; align-items:center; gap:9px; font-family:var(--font-heading); font-weight:600; font-size:19px; letter-spacing:.01em; color:#fff; margin:0;}
.app-brand .dot{width:6px; height:6px; background:var(--sidebar-active-accent); flex:none;}
.app-brand-sub{font-size:11px; color:var(--sidebar-label); text-transform:uppercase; letter-spacing:.1em; margin-top:6px;}
.nav-group{margin-bottom:24px;}
.nav-group:first-child{margin-top:20px;}
.nav-label{font-family:var(--font-heading); font-size:11px; color:var(--sidebar-label); text-transform:uppercase; letter-spacing:.16em; margin:0 0 9px; padding:0 20px;}
.nav-link{
  display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 18px;
  border-left:2px solid transparent; color:var(--sidebar-text); text-decoration:none; font-size:14px;
}
.nav-link:hover{background:var(--sidebar-hover-bg); color:#fff;}
.nav-link.active{border-left-color:var(--sidebar-active-accent); background:var(--sidebar-active-bg); color:var(--sidebar-active-text); font-weight:400;}
.nav-count{font-size:11px; color:var(--sidebar-label); font-variant-numeric:tabular-nums;}
.nav-link.active .nav-count{color:var(--sidebar-active-accent);}
.app-nav-footer{margin-top:auto; padding:16px 20px 18px; border-top:1px solid var(--sidebar-border); display:flex; flex-direction:column; gap:10px;}
.ci-upload{
  width:158px; height:58px; opacity:.72; border:1px dashed var(--sidebar-border); overflow:hidden;
  display:flex; align-items:center; justify-content:center; color:var(--sidebar-label); font-size:11px;
}
.ci-upload.has-image{opacity:1; border-style:solid; border-color:transparent; background:#fff;}
.ci-upload.has-tint{opacity:1; border-style:solid; border-color:transparent; background:transparent; padding:6px;}
.ci-upload img{max-width:100%; max-height:100%; object-fit:contain;}
.ci-tint{
  display:block; width:100%; height:100%;
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
}
.nav-version{font-size:10.5px; color:var(--sidebar-label); letter-spacing:.06em;}
.nav-user{display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12px; color:var(--sidebar-text);}
.nav-user form{margin:0;}
.nav-user .btn-ghost{color:var(--sidebar-label);}
.nav-user .btn-ghost:hover{color:#fff; background:rgba(255,255,255,0.08);}

.app-main{padding:26px 24px 40px; min-width:0;}
.page-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:18px; flex-wrap:wrap;}
.page-head h1{font-family:var(--font-heading); font-size:32px; font-weight:600; margin:0 0 4px; letter-spacing:-.015em; line-height:1.12;}
.page-sub{color:var(--neutral-700); font-size:13px; margin-top:4px;}
.page-meta{font-size:11px; color:var(--neutral-600); text-transform:uppercase; letter-spacing:.1em; white-space:nowrap;}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:8px 12px; border-radius:0;
  border:1px solid var(--border); background:transparent; color:var(--ink);
  font-family:var(--font-heading); font-weight:600; font-size:13px; line-height:1.2; cursor:pointer; text-decoration:none;
}
.btn:hover{background:color-mix(in srgb, var(--ink) 7%, transparent);}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--bg);}
.btn.primary:hover{background:var(--accent-600);}
.btn.danger{color:var(--status-crit); border-color:var(--status-crit-soft);}
.btn.small{padding:3px 9px; font-size:11.5px;}
.btn-ghost, .btn.btn-ghost{color:var(--accent); border-color:transparent; background:transparent;}
.btn-ghost:hover, .btn.btn-ghost:hover{background:color-mix(in srgb, var(--accent) 10%, transparent);}

.card{display:flex; flex-direction:column; gap:7px; background:transparent; border:1px solid var(--border); border-radius:0; padding:18px; box-shadow:none;}
.grid{display:grid; gap:14px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:980px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}}

.corner-marks, .card, .table-wrap, .modal-card{
  position:relative;
  background-image:var(--corner-mark),var(--corner-mark),var(--corner-mark),var(--corner-mark);
  background-repeat:no-repeat; background-size:11px 11px;
  background-position:
    -5.5px -5.5px, calc(100% + 5.5px) -5.5px,
    -5.5px calc(100% + 5.5px), calc(100% + 5.5px) calc(100% + 5.5px);
}
.table-wrap, .modal-card{box-shadow:none;}

.kpi{padding:16px 16px 14px;}
.kpi .lbl{font-size:11px; color:var(--neutral-600); text-transform:uppercase; letter-spacing:.12em; margin-bottom:10px;}
.kpi .num{font-family:var(--font-heading); font-size:38px; font-weight:600; line-height:1; letter-spacing:-.01em;}
.kpi .sub{font-size:12px; color:var(--neutral-700); margin-top:8px;}

.panel-title{font-family:var(--font-heading); font-size:20px; font-weight:600; margin:0 0 14px; display:flex; align-items:baseline; justify-content:space-between; gap:10px;}
.panel-title .lbl-r{font-family:var(--font-body); font-size:12px; font-weight:400; color:var(--neutral-700); text-transform:none; letter-spacing:0;}

.bar-list{display:flex; flex-direction:column; gap:9px;}
.bar-row{display:grid; grid-template-columns:150px 1fr 78px; align-items:center; gap:10px; font-size:12.5px;}
.bar-label{color:var(--neutral-800); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.bar-track{height:14px; background:var(--neutral-200); position:relative; border-radius:0; overflow:hidden;}
.bar-fill{position:absolute; left:0; top:0; bottom:0; display:block; background:var(--bar-4);}
.bar-row.rank-1 .bar-fill{background:var(--bar-1);}
.bar-row.rank-2 .bar-fill{background:var(--bar-2);}
.bar-row.rank-3 .bar-fill{background:var(--bar-3);}
.bar-value{color:var(--neutral-700); text-align:right; font-variant-numeric:tabular-nums; font-size:12px;}

.filter-bar{display:flex; flex-direction:row; gap:12px; flex-wrap:wrap; align-items:flex-end; margin-bottom:16px; padding:14px 16px;}
.filter-bar .f-field{display:flex; flex-direction:column; gap:4px;}
.filter-bar .f-field span{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--neutral-600);}
.filter-bar input[type=text], .filter-bar input[type=search], .filter-bar select{
  padding:6px 9px; border:1px solid var(--border); border-radius:0; background:var(--surface); color:var(--ink);
  font-size:13px; font-family:inherit;
}
.filter-bar input[type=text], .filter-bar input[type=search]{width:100%;}
.filter-bar select{min-width:110px;}

.table-wrap{overflow:auto; max-height:calc(100vh - 230px); border:1px solid var(--border); border-radius:0; background-color:var(--surface-bg, var(--bg));}
.card .table-wrap, .modal-card .table-wrap{border:none; border-radius:0; box-shadow:none; background-image:none;}
table{border-collapse:collapse; width:100%; font-size:14px; min-width:600px;}
th,td{padding:7px 10px; text-align:left; border-bottom:1px solid var(--border); vertical-align:middle; white-space:nowrap;}
thead th{
  position:sticky; top:0; z-index:1; background:var(--neutral-200); color:var(--neutral-900);
  font-family:var(--font-heading); font-weight:600; font-size:13px; letter-spacing:.02em; text-transform:none;
}
tbody tr:hover{background:var(--accent-100);}
tbody tr:last-child td{border-bottom:none;}
td a.row-link{color:var(--accent-ink); font-weight:600; text-decoration:none;}
td a.row-link:hover{text-decoration:underline;}
td.cidr-cell{border-left:3px solid var(--neutral-300);}

.pill{display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:2px; font-size:11px; font-weight:600; white-space:nowrap;}
.pill.ok{background:var(--status-ok-soft); color:var(--status-ok);}
.pill.warn{background:var(--status-warn-soft); color:var(--status-warn);}
.pill.crit{background:var(--status-crit-soft); color:var(--status-crit);}
.pill.neutral{background:var(--surface-alt); color:var(--ink-muted); border:1px solid var(--border);}

.wf-bar{height:6px; border-radius:0; background:var(--border); overflow:hidden;}
.wf-bar > span{display:block; height:100%; background:var(--bar-1);}

.flash{padding:10px 14px; border-radius:0; margin-bottom:16px; font-size:13px; font-weight:400; border:1px solid var(--accent-300); background:var(--accent-100); color:var(--accent-800);}
.flash.ok{background:var(--accent-100); color:var(--accent-800); border-color:var(--accent-300);}
.flash.error{background:var(--status-crit-soft); color:var(--status-crit); border-color:var(--status-crit);}

form.record-form{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
form.record-form.cols-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:860px){form.record-form{grid-template-columns:1fr 1fr;}}
form.record-form label{display:flex; flex-direction:column; gap:4px; font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--neutral-600); font-weight:400;}
form.record-form label.full{grid-column:1/-1;}
form.record-form input, form.record-form select, form.record-form textarea{
  padding:6px 9px; border:1px solid var(--border); border-radius:0; background:var(--surface); color:var(--ink);
  font-size:13px; font-family:var(--font-body); text-transform:none; letter-spacing:0;
}
form.record-form textarea{min-height:70px; resize:vertical;}
.form-actions{grid-column:1/-1; display:flex; justify-content:flex-end; gap:9px; padding-top:8px; margin-top:6px;}

.link-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px;}
.link-card{background:var(--surface-alt); border:1px solid var(--border); padding:12px 14px; font-size:12.5px;}
.link-card .lbl{font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); font-weight:700; display:block; margin-bottom:6px;}
.link-card .kv{display:grid; grid-template-columns:64px 1fr; gap:2px 8px; margin-bottom:2px;}
.link-card .kv b{color:var(--ink-faint); font-weight:500;}
.link-card.empty{color:var(--ink-faint); display:flex; align-items:center; justify-content:center; min-height:64px;}

.tabs{display:flex; gap:4px; border-bottom:1px solid var(--border); margin:20px 0 16px;}
.tabs a{padding:8px 4px; margin-right:16px; color:var(--ink-muted); text-decoration:none; font-size:13.5px; border-bottom:2px solid transparent;}
.tabs a.active{color:var(--accent-ink); border-bottom-color:var(--accent); font-weight:600;}

.pagination{display:flex; gap:6px; align-items:center; margin-top:14px; font-size:13px; color:var(--ink-muted);}
.pagination a, .pagination span{padding:6px 10px; border:1px solid var(--border); text-decoration:none; color:inherit;}
.pagination a:hover{background:var(--surface-alt);}
.pagination .current{background:var(--accent); color:#fff; border-color:var(--accent);}

.kv-table{display:grid; grid-template-columns:120px 1fr; gap:9px 14px; font-size:13px;}
.kv-table b{color:var(--neutral-600); font-weight:400;}

.section-title{font-family:var(--font-heading); font-size:20px; font-weight:600; margin:26px 0 12px; display:flex; align-items:center; gap:8px;}
.count-badge{background:var(--accent-100); color:var(--accent-800); font-size:11px; padding:1px 8px; font-weight:700;}

.upload-box{border:1px dashed var(--neutral-400); padding:34px; text-align:center;}
.upload-box + .upload-box{margin-top:10px;}
.upload-box .up-title{font-family:var(--font-heading); font-size:20px; margin-bottom:6px;}
.upload-box .up-sub{font-size:12.5px; color:var(--neutral-700);}

.ipam-bar{position:relative; height:34px; overflow:hidden; border:1px solid var(--border); background:var(--surface-alt);}
.ipam-seg{position:absolute; top:0; bottom:0; display:block; border-right:1px solid var(--bg); text-decoration:none; cursor:pointer;}
.ipam-seg:last-child{border-right:none;}
.ipam-seg.used{background:var(--accent-soft);}
.ipam-seg.used:hover{background:var(--accent);}
.ipam-seg.free{background-image:repeating-linear-gradient(135deg, var(--border), var(--border) 4px, var(--surface-alt) 4px, var(--surface-alt) 9px);}
.ipam-legend{display:flex; flex-wrap:wrap; gap:12px; margin-top:16px; padding-top:14px; border-top:1px solid var(--border); font-size:11.5px; color:var(--neutral-800);}
.ipam-legend .sw{display:inline-block; width:11px; height:11px; margin-right:6px; vertical-align:middle; border:1px solid var(--border);}
.ipam-legend .sw.used{background:var(--accent-soft);}
.ipam-legend .sw.free{background-image:repeating-linear-gradient(135deg, var(--border), var(--border) 4px, var(--surface-alt) 4px, var(--surface-alt) 9px);}

.ipam-grid{display:grid; grid-template-columns:repeat(16,34px); grid-auto-rows:34px; gap:2px;}
.ipam-cell{display:flex; align-items:center; justify-content:center; font-size:11px; font-variant-numeric:tabular-nums; cursor:default; border:1px solid var(--border); text-decoration:none;}
.ipam-space-tabs{display:flex; gap:10px; margin-bottom:18px;}
.ipam-pick-label{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--neutral-600); margin-bottom:12px;}
.ipam-pick-ip{font-family:ui-monospace,Menlo,monospace; font-size:17px; margin-bottom:12px;}
.ipam-pick-fields{display:flex; flex-direction:column; gap:9px; font-size:13px;}
.ipam-pick-row{display:grid; grid-template-columns:78px minmax(0,1fr); gap:8px;}
.ipam-pick-row span:first-child{color:var(--neutral-600); font-size:12px;}

.field-add-form{display:flex; gap:8px; flex-wrap:wrap; border-top:1px solid var(--border); padding-top:14px;}
.field-add-form input{padding:6px 9px; border:1px solid var(--border); border-radius:0; background:var(--surface); color:var(--ink); font-size:13px;}
.field-add-form input[name=field_name]{width:160px;}
.field-add-form input[name=field_value]{flex:1; min-width:160px;}

.bulk-bar{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:12px; padding:10px 14px;
  background:var(--surface-alt); border:1px solid var(--border);
  position:sticky; bottom:12px; z-index:6; box-shadow:var(--shadow);
}
.bulk-bar select, .bulk-bar input[type=text]{padding:6px 9px; border:1px solid var(--border); background:var(--surface); color:var(--ink); font-size:13px;}
.bulk-bar input[type=text]{flex:1; min-width:160px;}
.bulk-bar #bulk-count{margin-right:auto; font-weight:600; color:var(--ink);}
/* 표 상단 일괄 편집 툴바(정책 및 대역 정보) — 이미 표 위에 있어 아래쪽에 붙일 필요가 없다. */
#bulk-toolbar{position:static; margin-top:0; margin-bottom:10px;}
td[data-field] input[type=text]{width:100%; box-sizing:border-box; padding:4px 6px; border:1px solid var(--accent); background:var(--surface); color:var(--ink); font-size:13px; font-family:inherit;}
tr.editing-row{opacity:1 !important; background:var(--accent-100);}
.bulk-edit-cell{display:flex; gap:3px; align-items:center;}
.bulk-edit-cell input[type=text]{flex:1; min-width:40px;}
.bulk-inherit-btn{
  flex:none; width:20px; height:24px; padding:0; line-height:1; font-size:12px;
  border:1px solid var(--accent); background:var(--accent); color:#fff; cursor:pointer; border-radius:2px;
}
.bulk-inherit-btn:hover{background:var(--accent-ink); border-color:var(--accent-ink);}

.ipam-tree{list-style:none; margin:0; padding-left:20px; font-size:13px;}
.ipam-tree.ipam-tree-root{padding-left:0;}
.ipam-tree li{padding:5px 0 5px 14px; border-left:1px dashed var(--border);}
.ipam-tree li:last-child{border-left-color:transparent;}
.tree-toggle{
  display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px;
  margin-right:2px; border:none; background:none; color:var(--ink-muted); font-size:10px;
  cursor:pointer; padding:0; vertical-align:middle;
}
.tree-toggle:hover{color:var(--ink);}
.tree-leaf-spacer{display:inline-block; width:18px;}

.modal-card{
  background-color:var(--bg); border:1px solid var(--border);
  padding:22px;
}

th[data-filter-col]{position:sticky; padding-right:28px;}
.col-filter-btn{
  position:absolute; right:2px; top:50%; transform:translateY(-50%);
  border:none; background:none; color:var(--ink-faint); font-size:13px; line-height:1; cursor:pointer;
  padding:7px 8px; border-radius:2px;
}
.col-filter-btn:hover{color:var(--ink); background:var(--surface-alt);}
th.col-filter-active .col-filter-btn{color:var(--accent);}
th.col-filter-active{background:var(--accent-soft);}
.col-filter-popover{
  position:fixed; z-index:200; min-width:180px; max-width:260px;
  background:var(--bg); border:1px solid var(--border); box-shadow:var(--shadow);
  padding:8px; text-transform:none; font-weight:400; letter-spacing:normal;
}
.col-filter-actions{display:flex; gap:6px; margin-bottom:6px; padding-bottom:6px; border-bottom:1px solid var(--border);}
.col-filter-list{max-height:220px; overflow-y:auto; display:flex; flex-direction:column; gap:4px; font-size:12.5px;}
.col-filter-list label{display:flex; align-items:center; gap:6px; cursor:pointer; color:var(--ink);}