/* ===========================================================================
   PDM Analytics & Monitoring Management System — design tokens
   Palette: data-dense dashboard (blue data + amber highlights), WCAG AA.
   =========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Fira+Sans:wght@300;400;500;600;700&display=swap');

:root{
  --primary:#1E40AF; --primary-soft:#EFF4FF; --secondary:#3B82F6; --accent:#D97706; --accent-soft:#FEF3E2;
  --bg:#F8FAFC; --surface:#FFFFFF; --surface-2:#F1F5FE; --muted:#E9EEF6; --border:#DBEAFE; --border-strong:#BFD3F5;
  --text:#132048; --text-2:#41527A; --text-3:#6C7A9C; --danger:#DC2626; --danger-soft:#FEF2F2;
  --ok:#047857; --ok-soft:#ECFDF5; --warn:#B45309; --warn-soft:#FFFBEB; --info:#0E7490; --info-soft:#ECFEFF;
  --c1:#1E40AF; --c2:#3B82F6; --c3:#D97706; --c4:#0E7490; --c5:#7C3AED; --c6:#047857; --c7:#BE123C; --c8:#64748B;
  --radius:10px; --radius-sm:7px; --shadow:0 1px 2px rgba(15,23,42,.06),0 8px 24px -18px rgba(15,23,42,.35);
  --font-body:"Fira Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-mono:"Fira Code",ui-monospace,SFMono-Regular,Menlo,monospace;
  --icon-sm:16px; --icon-md:18px; --icon-lg:22px; --avatar-md:36px;
  --sidebar:252px; --topbar:66px; --t:180ms cubic-bezier(.16,1,.3,1);
}
[data-theme="dark"]{
  --primary:#7EA6FF; --primary-soft:#14203B; --secondary:#60A5FA; --accent:#F0A63C; --accent-soft:#2A1F0C;
  --bg:#0A0F1C; --surface:#0F1728; --surface-2:#131D33; --muted:#16223A; --border:#1E2C48; --border-strong:#2C3E63;
  --text:#E6EDFB; --text-2:#AEC0DE; --text-3:#7F91B3; --danger:#F87171; --danger-soft:#2B1416;
  --ok:#4ADE9B; --ok-soft:#0C2A20; --warn:#FBBF4A; --warn-soft:#2A2210; --info:#4DD0E1; --info-soft:#0A2730;
  --c1:#7EA6FF; --c2:#60A5FA; --c3:#F0A63C; --c4:#4DD0E1; --c5:#A78BFA; --c6:#4ADE9B; --c7:#FB7185; --c8:#94A3B8;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 30px -20px rgba(0,0,0,.8);
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.01em}
h1{font-size:1.06rem}h2{font-size:1.15rem}h3{font-size:.98rem}h4{font-size:.86rem}
p{margin:0}
a{color:var(--primary);text-decoration:none}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
svg.lucide,[data-lucide]{width:var(--icon-md);height:var(--icon-md);stroke-width:1.75;flex:none}
[data-lucide]{display:inline-block}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.muted{color:var(--text-3)}
.small{font-size:.78rem}
.tiny{font-size:.72rem}
.grow{flex:1}
.nowrap{white-space:nowrap}
.hidden{display:none !important}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms !important;transition-duration:.001ms !important}}

/* ---------------------------------------------------------------- app shell */
.app{display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr);min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:1rem;padding:1rem .75rem;background:var(--surface);border-right:1px solid var(--border);z-index:40}
.brand{display:flex;align-items:center;gap:.6rem;padding:.35rem .5rem 1rem;border-bottom:1px solid var(--border)}
.brand-mark{display:grid;place-items:center;width:36px;height:36px;border-radius:9px;background:var(--primary);color:#fff}
.brand-mark svg{width:20px;height:20px}
.brand-text{display:flex;flex-direction:column;min-width:0}
.brand-text strong{font-size:.95rem;letter-spacing:-.02em}
.brand-text small{color:var(--text-3);font-size:.68rem;text-transform:uppercase;letter-spacing:.09em}
.nav{display:flex;flex-direction:column;gap:2px;overflow-y:auto;flex:1}
.nav-item{display:flex;align-items:center;gap:.6rem;padding:.55rem .6rem;border:1px solid transparent;border-radius:var(--radius-sm);background:none;color:var(--text-2);font-size:.86rem;text-align:left;transition:background var(--t),color var(--t),transform var(--t)}
.nav-item:hover{background:var(--surface-2);color:var(--text);transform:translateX(2px)}
.nav-item.active{background:var(--primary-soft);color:var(--primary);border-color:var(--border);font-weight:600}
.nav-item .badge-count{margin-left:auto;font-size:.68rem;padding:.05rem .4rem;border-radius:999px;background:var(--muted);color:var(--text-3)}
.storage-card{padding:.7rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-2);font-size:.75rem;color:var(--text-2)}
.meter{height:6px;border-radius:999px;background:var(--muted);overflow:hidden;margin:.45rem 0 .3rem}
.meter>span{display:block;height:100%;background:var(--secondary);border-radius:999px;transition:width .4s}
.shell{display:flex;flex-direction:column;min-width:0}
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.6rem 1.1rem;min-height:var(--topbar);background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(14px) saturate(160%);border-bottom:1px solid var(--border)}
.topbar-left,.topbar-right{display:flex;align-items:center;gap:.6rem;min-width:0}
.page-id{min-width:0}
.page-id h1{font-size:1.05rem;white-space:nowrap}
.page-id p{font-size:.74rem;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42ch}
.view{flex:1;padding:1.1rem;display:flex;flex-direction:column;gap:1rem;min-width:0}
.view:focus{outline:none}
.only-mobile{display:none}
@media (max-width:1023px){
  .app{grid-template-columns:1fr}
  .sidebar{position:fixed;inset:0 auto 0 0;width:270px;transform:translateX(-102%);transition:transform var(--t);box-shadow:var(--shadow)}
  .sidebar.open{transform:none}
  .only-mobile{display:inline-grid}
  .page-id p{max-width:26ch}
}

/* ------------------------------------------------------------ controls */
.btn{display:inline-flex;align-items:center;gap:.45rem;padding:.48rem .8rem;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font-size:.83rem;font-weight:500;transition:transform var(--t),box-shadow var(--t),background var(--t),border-color var(--t);min-height:36px}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow);border-color:var(--primary)}
.btn:active{transform:none}
.btn svg{width:var(--icon-sm);height:var(--icon-sm)}
.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}
[data-theme="dark"] .btn-primary{color:#08111F}
.btn-primary:hover{background:var(--secondary);border-color:var(--secondary)}
.btn-danger{background:var(--danger);border-color:var(--danger);color:#fff}
.btn-danger:hover{filter:brightness(1.06)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--text-2)}
.btn-ghost:hover{background:var(--surface-2);color:var(--text);box-shadow:none}
.btn-add{box-shadow:0 6px 18px -10px color-mix(in srgb,var(--primary) 80%,transparent)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;pointer-events:none}
.icon-btn{display:inline-grid;place-items:center;width:36px;height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text-2);transition:background var(--t),color var(--t),transform var(--t)}
.icon-btn:hover{background:var(--surface-2);color:var(--text);transform:translateY(-1px)}
.icon-text-btn{display:inline-flex;align-items:center;gap:.45rem;padding:.45rem .7rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);font-size:.82rem;color:var(--text-2);min-height:36px}
.icon-text-btn:hover{border-color:var(--primary);color:var(--text)}
.link-btn{background:none;border:none;padding:.15rem .3rem;color:var(--primary);font-size:.78rem;border-radius:4px}
.link-btn:hover{background:var(--primary-soft);text-decoration:underline}
.avatar{display:grid;place-items:center;width:var(--avatar-md);height:var(--avatar-md);border-radius:50%;background:color-mix(in srgb,var(--primary) 16%,var(--surface));color:var(--primary);font-weight:600;font-size:.78rem;border:1px solid var(--border)}

/* ------------------------------------------------------- PDM selector */
.selector-wrap,.period-wrap{position:relative}
.selector-btn{display:flex;align-items:center;gap:.55rem;padding:.4rem .6rem;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface);max-width:330px;transition:border-color var(--t),box-shadow var(--t)}
.selector-btn:hover{border-color:var(--primary);box-shadow:var(--shadow)}
.selector-btn .sel-icon{color:var(--primary)}
.sel-body{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.sel-body small{font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3)}
.sel-body strong{font-size:.82rem;font-weight:600;max-width:250px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sel-caret{color:var(--text-3);width:15px !important;height:15px !important}
.selector-panel,.period-panel{position:absolute;right:0;top:calc(100% + 8px);z-index:60;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius);box-shadow:var(--shadow);animation:fadeUp .18s ease both}
.selector-panel{width:min(430px,92vw);display:flex;flex-direction:column;overflow:hidden}
.sel-head{display:flex;align-items:center;gap:.5rem;padding:.6rem .7rem;border-bottom:1px solid var(--border)}
.sel-head input{flex:1;border:none;background:none;outline:none;font-size:.84rem}
.sel-actions{display:flex;gap:.4rem;padding:.45rem .7rem;border-bottom:1px solid var(--border);background:var(--surface-2)}
.sel-list{max-height:min(46vh,340px);overflow-y:auto;padding:.3rem}
.sel-group-label{padding:.45rem .6rem .25rem;font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3)}
.sel-item{display:flex;align-items:center;gap:.55rem;padding:.5rem .6rem;border-radius:var(--radius-sm);border:1px solid transparent;cursor:pointer;transition:background var(--t)}
.sel-item:hover{background:var(--surface-2)}
.sel-item.checked{background:var(--primary-soft);border-color:var(--border)}
.sel-item input{margin:0;accent-color:var(--primary);width:15px;height:15px}
.sel-item-main{display:flex;flex-direction:column;min-width:0}
.sel-item-main strong{font-size:.83rem}
.sel-item-main span{font-size:.72rem;color:var(--text-3)}
.sel-item .pill{margin-left:auto}
.sel-foot{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.55rem .7rem;border-top:1px solid var(--border);background:var(--surface-2);font-size:.75rem;color:var(--text-2)}
.sel-foot-actions{display:flex;gap:.4rem}
.period-panel{width:270px;padding:.8rem;display:flex;flex-direction:column;gap:.6rem}
.period-panel label{display:flex;flex-direction:column;gap:.25rem;font-size:.72rem;color:var(--text-3)}
.period-panel input{padding:.4rem .5rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-2)}
.period-foot{display:flex;justify-content:flex-end;gap:.4rem}

/* ------------------------------------------------------------ surfaces */
.scope-banner{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;padding:.5rem 1.1rem;background:var(--primary-soft);border-bottom:1px solid var(--border);font-size:.78rem;color:var(--text-2)}
.scope-banner strong{color:var(--primary)}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:1rem;animation:fadeUp .26s ease both}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.8rem;margin-bottom:.85rem;flex-wrap:wrap}
.card-head h3{display:flex;align-items:center;gap:.45rem;font-size:.95rem}
.card-head h3 svg{color:var(--primary)}
.card-head p{font-size:.76rem;color:var(--text-3);max-width:78ch}
.grid{display:grid;gap:1rem}
.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.span-2{grid-column:span 2}
.split-2-1{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
@media (max-width:1200px){.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}.split-2-1,.cols-3{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){.cols-2,.cols-4{grid-template-columns:minmax(0,1fr)}.span-2{grid-column:auto}}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ------------------------------------------------------------ KPI cards */
.kpis{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.kpi{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:.8rem .85rem;box-shadow:var(--shadow);transition:transform var(--t),box-shadow var(--t);overflow:hidden}
.kpi:hover{transform:translateY(-2px);box-shadow:0 16px 30px -22px rgba(15,23,42,.6)}
.kpi::after{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--primary);opacity:.9}
.kpi.accent::after{background:var(--accent)}
.kpi.ok::after{background:var(--ok)}
.kpi.warn::after{background:var(--warn)}
.kpi-top{display:flex;align-items:center;gap:.4rem;color:var(--text-3);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.35rem}
.kpi-top svg{width:14px;height:14px}
.kpi-val{font-family:var(--font-mono);font-size:1.72rem;font-weight:600;letter-spacing:-.03em;line-height:1.1}
.kpi-val small{font-size:.9rem;font-weight:500;color:var(--text-2);margin-left:.1rem}
.kpi-sub{font-size:.74rem;color:var(--text-3);margin-top:.3rem;display:flex;align-items:center;gap:.3rem;flex-wrap:wrap}
.kpi-sub svg{width:13px;height:13px}
.delta{display:inline-flex;align-items:center;gap:.15rem;font-weight:600;font-family:var(--font-mono);font-size:.74rem;padding:.05rem .3rem;border-radius:4px}
.delta.up{color:var(--ok);background:var(--ok-soft)}
.delta.down{color:var(--danger);background:var(--danger-soft)}
.delta.flat{color:var(--text-2);background:var(--muted)}

/* -------------------------------------------------------------- chips */
.chip{display:inline-flex;align-items:center;gap:.35rem;padding:.16rem .5rem;border-radius:999px;border:1px solid var(--border);background:var(--surface-2);font-size:.73rem;color:var(--text-2);white-space:nowrap}
.chip svg{width:13px;height:13px}
.chip.branch{border-style:dashed}
.pill{display:inline-flex;align-items:center;gap:.3rem;padding:.14rem .48rem;border-radius:999px;font-size:.7rem;font-weight:600;border:1px solid transparent;white-space:nowrap}
.pill.ok{background:var(--ok-soft);color:var(--ok);border-color:color-mix(in srgb,var(--ok) 30%,transparent)}
.pill.warn{background:var(--warn-soft);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 30%,transparent)}
.pill.err{background:var(--danger-soft);color:var(--danger);border-color:color-mix(in srgb,var(--danger) 30%,transparent)}
.pill.info{background:var(--info-soft);color:var(--info);border-color:color-mix(in srgb,var(--info) 30%,transparent)}
.pill.neutral{background:var(--muted);color:var(--text-2);border-color:var(--border)}
.chip-row{display:flex;gap:.35rem;flex-wrap:wrap;align-items:center}

/* ----------------------------------------------------------- tables */
.table-wrap{overflow:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);max-width:100%}
table.data{width:100%;border-collapse:separate;border-spacing:0;font-size:.8rem}
table.data th,table.data td{padding:.5rem .6rem;text-align:left;border-bottom:1px solid var(--border);vertical-align:top}
table.data thead th{position:sticky;top:0;background:var(--surface-2);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-2);z-index:2;white-space:nowrap}
table.data tbody tr{transition:background var(--t)}
table.data tbody tr:hover{background:var(--surface-2)}
table.data tbody tr:last-child td{border-bottom:none}
table.data td.num,table.data th.num{text-align:right;font-family:var(--font-mono)}
table.data .row-actions{display:flex;gap:.2rem;justify-content:flex-end}
table.data .row-actions .icon-btn{width:30px;height:30px;border-color:transparent;background:transparent}
table.data .row-actions .icon-btn:hover{background:var(--primary-soft);border-color:var(--border)}
.table-toolbar{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.7rem}
.table-toolbar .search-field{display:flex;align-items:center;gap:.4rem;padding:.4rem .6rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);min-width:240px;flex:1;max-width:420px}
.table-toolbar .search-field input{border:none;background:none;outline:none;width:100%}
select.ctl,input.ctl,textarea.ctl{padding:.42rem .55rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);min-height:36px;transition:border-color var(--t)}
select.ctl:hover,input.ctl:hover{border-color:var(--primary)}
textarea.ctl{min-height:70px;resize:vertical}
.pager{display:flex;align-items:center;gap:.5rem;justify-content:flex-end;margin-top:.7rem;font-size:.78rem;color:var(--text-2)}
.field{display:flex;flex-direction:column;gap:.25rem}
.field>label{font-size:.74rem;color:var(--text-2);font-weight:500}
.field .hint{font-size:.7rem;color:var(--text-3)}
.form-grid{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.required>label::after{content:" *";color:var(--danger)}
.empty{padding:2rem 1rem;text-align:center;color:var(--text-3);font-size:.85rem;border:1px dashed var(--border-strong);border-radius:var(--radius);background:var(--surface-2)}
.empty svg{width:26px;height:26px;margin-bottom:.4rem;color:var(--text-3)}

/* -------------------------------------------------------------- charts */
.chart-box{position:relative;width:100%;min-height:240px}
.chart-box.short{min-height:190px}
.chart-box.tall{min-height:320px}
.chart-box>canvas{position:absolute;top:0;left:0;width:100%!important;height:100%!important;display:block}
.chart-box>.empty{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.75rem}
.chart-legend{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:.5rem;font-size:.74rem;color:var(--text-2)}
.chart-legend i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:.25rem}
.callout{display:flex;gap:.6rem;padding:.65rem .75rem;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface-2);font-size:.81rem;color:var(--text-2);align-items:flex-start}
.callout svg{width:var(--icon-md);height:var(--icon-md);flex:none;margin-top:1px}
.callout.info{background:var(--info-soft);border-color:color-mix(in srgb,var(--info) 25%,transparent)}
.callout.warn{background:var(--warn-soft);border-color:color-mix(in srgb,var(--warn) 30%,transparent)}
.callout.err{background:var(--danger-soft);border-color:color-mix(in srgb,var(--danger) 30%,transparent)}
.callout.ok{background:var(--ok-soft);border-color:color-mix(in srgb,var(--ok) 25%,transparent)}
.callout strong{color:var(--text)}
.insights{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.insight{border:1px solid var(--border);border-left:3px solid var(--primary);border-radius:var(--radius-sm);padding:.6rem .7rem;background:var(--surface)}
.insight.good{border-left-color:var(--ok)}
.insight.attention{border-left-color:var(--accent)}
.insight.risk{border-left-color:var(--danger)}
.insight h4{font-size:.82rem;margin-bottom:.2rem}
.insight p{font-size:.79rem;color:var(--text-2)}

/* -------------------------------------------------------------- modal */
.modal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:1rem}
.modal-scrim{position:absolute;inset:0;background:rgba(9,14,26,.55);backdrop-filter:blur(2px);animation:fadeUp .2s ease both}
.modal-card{position:relative;width:min(640px,96vw);max-height:92vh;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border-strong);border-radius:14px;box-shadow:0 30px 60px -30px rgba(6,12,26,.7);animation:fadeUp .22s cubic-bezier(.16,1,.3,1) both;overflow:hidden}
.modal-lg{width:min(1080px,97vw)}
.modal-sm{width:min(450px,96vw)}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.8rem;padding:.9rem 1rem;border-bottom:1px solid var(--border);background:var(--surface-2)}
.modal-head h2{display:flex;align-items:center;gap:.45rem;font-size:1rem}
.modal-head h2 svg{color:var(--primary)}
.modal-head p{font-size:.76rem;color:var(--text-3)}
.modal-body{padding:1rem;overflow-y:auto;display:flex;flex-direction:column;gap:.85rem}
.modal-foot{display:flex;align-items:center;gap:.5rem;padding:.7rem 1rem;border-top:1px solid var(--border);background:var(--surface-2)}
.steps{display:flex;gap:.3rem;list-style:none;margin:0;padding:.6rem 1rem;border-bottom:1px solid var(--border);overflow-x:auto}
.steps li{display:flex;align-items:center;gap:.4rem;font-size:.76rem;color:var(--text-3);padding:.3rem .6rem;border-radius:999px;border:1px solid transparent;white-space:nowrap}
.steps li span{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--muted);color:var(--text-2);font-size:.68rem;font-weight:600}
.steps li.active{color:var(--primary);background:var(--primary-soft);border-color:var(--border)}
.steps li.active span{background:var(--primary);color:#fff}
.steps li.done span{background:var(--ok);color:#fff}
.steps li.done{color:var(--ok)}
.dropzone{position:relative;display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:1.5rem 1rem;border:1.5px dashed var(--border-strong);border-radius:var(--radius);background:var(--surface-2);text-align:center;cursor:pointer;transition:border-color var(--t),background var(--t)}
.dropzone:hover,.dropzone.drag{border-color:var(--primary);background:var(--primary-soft)}
.dropzone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.dropzone svg{width:28px;height:28px;color:var(--primary)}
.dropzone strong{font-size:.88rem}
.dropzone small{color:var(--text-3);font-size:.75rem}
.file-chip{display:inline-flex;align-items:center;gap:.45rem;padding:.35rem .6rem;border:1px solid var(--border);border-radius:999px;background:var(--surface);font-size:.78rem}
.mapping-table td select{width:100%;min-width:200px}
.conf-bar{display:inline-block;height:6px;border-radius:999px;background:var(--muted);width:60px;vertical-align:middle;overflow:hidden}
.conf-bar>span{display:block;height:100%;background:var(--ok)}
.conf-bar.low>span{background:var(--accent)}
.conf-bar.none>span{background:var(--danger)}
.stat-list{display:grid;gap:.35rem}
.stat-row{display:flex;justify-content:space-between;gap:1rem;padding:.32rem .5rem;border-radius:5px;font-size:.79rem}
.stat-row:nth-child(odd){background:var(--surface-2)}
.stat-row span:last-child{font-family:var(--font-mono);font-weight:600}
.progress-list{display:grid;gap:.5rem}
.progress-row{display:grid;grid-template-columns:minmax(120px,1.4fr) minmax(80px,3fr) auto;gap:.6rem;align-items:center;font-size:.79rem}
.bar-track{height:8px;border-radius:999px;background:var(--muted);overflow:hidden}
.bar-track>span{display:block;height:100%;border-radius:999px;background:var(--secondary);transition:width .5s cubic-bezier(.16,1,.3,1)}
.rec-grid{display:grid;gap:.45rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.rec-item{border:1px solid var(--border);border-radius:var(--radius-sm);padding:.45rem .6rem;background:var(--surface-2)}
.rec-item dt{font-size:.7rem;color:var(--text-3);text-transform:uppercase;letter-spacing:.05em}
.rec-item dd{margin:.1rem 0 0;font-size:.82rem}
.filter-bar{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.section-title{display:flex;align-items:baseline;gap:.6rem;margin-top:.3rem}
.section-title h2{font-size:1rem}
.section-title p{font-size:.76rem;color:var(--text-3)}

/* ------------------------------------------------------------- toasts */
.toasts{position:fixed;right:1rem;bottom:1rem;z-index:120;display:flex;flex-direction:column;gap:.5rem;max-width:360px}
.toast{display:flex;gap:.55rem;align-items:flex-start;padding:.65rem .75rem;border-radius:var(--radius-sm);background:var(--surface);border:1px solid var(--border-strong);box-shadow:var(--shadow);font-size:.81rem;animation:fadeUp .2s ease both}
.toast svg{flex:none;width:var(--icon-md);height:var(--icon-md)}
.toast.ok{border-left:3px solid var(--ok)}.toast.ok svg{color:var(--ok)}
.toast.err{border-left:3px solid var(--danger)}.toast.err svg{color:var(--danger)}
.toast.warn{border-left:3px solid var(--warn)}.toast.warn svg{color:var(--warn)}
.toast.info{border-left:3px solid var(--info)}.toast.info svg{color:var(--info)}
.toast strong{display:block;font-size:.82rem}
.toast button{margin-left:auto;background:none;border:none;color:var(--text-3);padding:0}
.spin{width:16px;height:16px;border:2px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.skeleton{background:linear-gradient(90deg,var(--muted) 25%,var(--surface-2) 37%,var(--muted) 63%);background-size:400% 100%;animation:sk 1.3s ease infinite;border-radius:6px;height:14px}
@keyframes sk{0%{background-position:100% 50%}100%{background-position:0 50%}}
@media print{
  .sidebar,.topbar,.toasts,.no-print,.modal{display:none !important}
  .app{display:block}.view{padding:0}
  .card,.kpi{box-shadow:none;break-inside:avoid;border-color:#cbd5e1}
  body{background:#fff;color:#000}
}
@media (max-width:640px){
  .topbar{flex-direction:column;align-items:stretch}
  .topbar-right{flex-wrap:wrap}
  .selector-btn{max-width:none;flex:1}
  .sel-body strong{max-width:150px}
}