/* ═══════════════════════════════════════════════════════════════════
   DRIVEDUPE — black liquid glass · zero border-radius · 3D depth
   ═══════════════════════════════════════════════════════════════════ */

*{ margin:0; padding:0; box-sizing:border-box; border-radius:0 !important; }
[hidden]{ display:none !important; }
:root{
  --ink:#030304;
  --ink2:#07080a;
  --panel-a:rgba(16,17,20,.88);
  --panel-b:rgba(7,8,10,.94);
  --line:rgba(255,255,255,.07);
  --line2:rgba(255,255,255,.13);
  --txt:#e9ebef;
  --dim:#9aa0aa;
  --faint:#5b6069;
  --ice:#bfe3ff;
  --gold:#e8c874;
  --danger:#ff5f57;
  --ok:#7ef0c8;
  --mono:Consolas,"Cascadia Mono",ui-monospace,monospace;
  --sans:"Segoe UI",Inter,system-ui,sans-serif;
}
html,body{ height:100%; }
body{
  background:
    radial-gradient(120% 90% at 20% -10%, rgba(62,72,92,.20), transparent 55%),
    radial-gradient(90% 80% at 100% 110%, rgba(30,40,60,.18), transparent 50%),
    linear-gradient(180deg,#050608,#020203 60%,#040406);
  color:var(--txt);
  font:13px/1.45 var(--sans);
  overflow:hidden;
  user-select:none;
}
input,select,button{ font:inherit; color:inherit; }
input,select{ user-select:text; }

/* ── liquid sheen that slowly flows across every panel ────────────── */
.panel, #main, #titlebar{ position:relative; overflow:hidden; }
.panel::before, #titlebar::before{
  content:""; position:absolute; inset:-40% -10%;
  background:linear-gradient(105deg,
     transparent 34%, rgba(255,255,255,.018) 43%, rgba(190,225,255,.030) 48%,
     rgba(255,255,255,.018) 53%, transparent 62%);
  background-size:280% 100%;
  animation:flow 22s linear infinite;
  pointer-events:none;
}
@keyframes flow{ 0%{ background-position:120% 0; } 100%{ background-position:-180% 0; } }
@media (prefers-reduced-motion:reduce){ .panel::before,#titlebar::before{ animation:none; } }

/* ═══ TITLE BAR ═══ */
#titlebar{
  height:46px; display:flex; align-items:stretch;
  background:linear-gradient(180deg, #0d0f13, #060709 70%, #050607);
  border-bottom:1px solid #000;
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 10px 30px rgba(0,0,0,.55);
}
.tb-left{ display:flex; align-items:center; gap:12px; padding:0 16px; }
.tb-left b{ letter-spacing:.34em; font-size:12px; font-weight:600; }
.tb-sub{ color:var(--faint); font-size:10px; letter-spacing:.14em; text-transform:uppercase; }
.logo{ width:22px; height:22px; display:inline-block; position:relative;
  background:linear-gradient(135deg,#2a2e36,#0a0b0d 60%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -2px 4px rgba(0,0,0,.8), 0 2px 8px rgba(0,0,0,.7);
  transform:rotate(45deg);
}
.logo i{ position:absolute; inset:5px; background:linear-gradient(135deg,#eef3fa,#8f98a8 55%,#3c4250);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.8), 0 0 6px rgba(160,200,255,.25); }
.tb-drag{ flex:1; -webkit-app-region:drag; }
.tb-right{ display:flex; }
.tb-btn{
  width:46px; border:0; background:transparent; color:var(--dim); cursor:pointer;
  border-left:1px solid rgba(255,255,255,.04); font-size:13px; transition:background .15s,color .15s;
  -webkit-app-region:no-drag;
}
.tb-btn:hover{ background:rgba(255,255,255,.06); color:#fff; }
.tb-btn.danger:hover{ background:#c0392b; color:#fff; }

/* ═══ LAYOUT ═══ */
#app{ display:grid; grid-template-columns:318px 1fr; height:calc(100vh - 46px); }
#side{ display:flex; flex-direction:column; gap:10px; padding:12px; overflow:auto;
  background:linear-gradient(180deg,#060709,#040506); border-right:1px solid #000;
  box-shadow: 1px 0 0 rgba(255,255,255,.03) inset; }

/* ═══ PANELS — the glass slabs ═══ */
.panel{
  background:linear-gradient(160deg, var(--panel-a), var(--panel-b));
  border:1px solid var(--line);
  box-shadow:
    0 22px 44px -18px rgba(0,0,0,.9),
    0 4px 12px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.7),
    inset 0 0 0 1px rgba(0,0,0,.35);
  padding:14px 14px 12px;
}
.panel h2{ font-size:10px; letter-spacing:.3em; color:var(--dim); font-weight:600; margin-bottom:12px; display:flex; gap:8px; align-items:center; }
.panel h2 .num{ color:var(--ice); opacity:.75; font-family:var(--mono); font-size:9px; letter-spacing:.1em; }

.lbl{ display:block; font-size:9.5px; letter-spacing:.22em; color:var(--faint); margin:10px 0 5px; }
.field input, input[type=text], input[type=number], select{
  width:100%; background:#050607; border:1px solid var(--line2); color:var(--txt);
  padding:9px 10px; font-size:12.5px; outline:none;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.04);
}
input:focus, select:focus{ border-color:rgba(191,227,255,.5); box-shadow: inset 0 2px 6px rgba(0,0,0,.7), 0 0 0 1px rgba(191,227,255,.25); }
input[type=number]{ width:100%; }

/* ═══ BUTTONS — raised metal-glass slabs ═══ */
.b{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px; cursor:pointer; border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg,#171a20,#0b0d10 70%,#090a0c);
  color:var(--txt); font-size:10.5px; letter-spacing:.18em; font-weight:600;
  box-shadow: 0 4px 10px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.10), inset 0 -2px 3px rgba(0,0,0,.65);
  transition:transform .08s, box-shadow .12s, border-color .15s, background .15s;
}
.b:hover{ border-color:rgba(255,255,255,.22); background:linear-gradient(180deg,#1b1f26,#0d0f13 70%,#0b0c0f); }
.b:active{ transform:translateY(1px); box-shadow: inset 0 3px 8px rgba(0,0,0,.8); }
.b:disabled{ opacity:.38; cursor:default; transform:none; }
.b.danger{ border-color:rgba(255,95,87,.35); color:#ffb4ae; }
.b.danger:hover{ border-color:rgba(255,95,87,.7); color:#fff; background:linear-gradient(180deg,#2a0f0d,#160807); }
.b.big{ width:100%; padding:15px 14px; font-size:12px; letter-spacing:.26em;
  background:linear-gradient(180deg,#20242c,#0e1014 65%,#0a0b0e);
  box-shadow: 0 10px 26px -8px rgba(0,0,0,.9), 0 3px 8px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.14), inset 0 -3px 5px rgba(0,0,0,.7);
}
.b.big:hover{ border-color:rgba(191,227,255,.4); }
.btnrow{ display:flex; gap:8px; }
.btnrow .b{ flex:1; }
.runrow{ display:flex; gap:8px; margin-top:8px; }
.b.half{ flex:1; padding:8px; }
.b.raised{ border-color:rgba(191,227,255,.3); }

/* ═══ CHIPS (detected drives) ═══ */
.chips{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.chip-drive{
  display:inline-flex; align-items:center; gap:7px; padding:6px 10px; cursor:pointer;
  border:1px solid rgba(191,227,255,.28); background:linear-gradient(180deg,rgba(38,48,62,.7),rgba(12,16,22,.8));
  font-size:10px; letter-spacing:.1em; color:var(--ice);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 3px 8px rgba(0,0,0,.5);
}
.chip-drive:hover{ border-color:rgba(191,227,255,.6); }
.chip-drive b{ font-weight:400; color:var(--faint); font-size:9px; }
.hint{ font-size:10.5px; color:var(--faint); margin-top:9px; line-height:1.5; }

.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.checkrow{ display:flex; gap:14px; margin-top:12px; flex-wrap:wrap; }
.ck{ display:inline-flex; align-items:center; gap:7px; font-size:11px; color:var(--dim); cursor:pointer; }
.ck input{ appearance:none; width:14px; height:14px; border:1px solid var(--line2); background:#050607; position:relative; cursor:pointer;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.8); }
.ck input:checked{ border-color:var(--ice); box-shadow: 0 0 8px rgba(191,227,255,.25), inset 0 0 0 2px #050607, inset 0 0 0 9px rgba(191,227,255,.8); }

/* ═══ METER ═══ */
.meter{ height:6px; background:#040506; border:1px solid var(--line); margin-top:12px; overflow:hidden;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.8); }
.meter i{ display:block; height:100%; width:0%; background:linear-gradient(90deg,#31435c,#bfe3ff);
  box-shadow: 0 0 12px rgba(191,227,255,.5); transition:width .3s; }
.meter.unknown i{ width:35%; animation:sweep 1.4s ease-in-out infinite alternate; }
@keyframes sweep{ from{ margin-left:0; } to{ margin-left:65%; } }

/* ═══ MAIN ═══ */
#main{ display:flex; flex-direction:column; min-width:0; height:100%;
  background:
    radial-gradient(90% 60% at 60% -20%, rgba(80,100,130,.10), transparent 60%),
    linear-gradient(180deg,#07080a,#040405 55%); }
.tabs{ display:flex; gap:2px; padding:10px 14px 0; }
.tab{
  padding:10px 16px; cursor:pointer; border:1px solid var(--line); border-bottom:0;
  background:linear-gradient(180deg,rgba(14,15,18,.9),rgba(8,9,11,.9)); color:var(--dim);
  font-size:10px; letter-spacing:.22em; font-weight:600;
}
.tab:hover{ color:#fff; }
.tab.on{ color:#fff; background:linear-gradient(180deg,#1a1d23,#0c0e11); border-color:var(--line2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }
.pill{ display:inline-block; min-width:20px; padding:1px 6px; margin-left:6px; font-size:9px;
  border:1px solid var(--line2); color:var(--ice); background:rgba(191,227,255,.06); }

.tabbody{ flex:1; min-height:0; overflow:auto; padding:14px; }
#statsrow{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.stat{ padding:6px 10px; font-family:var(--mono); font-size:10.5px; color:var(--dim);
  border:1px solid var(--line); background:linear-gradient(180deg,rgba(18,20,24,.8),rgba(8,9,11,.85));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }

/* group cards */
.grp{ margin-bottom:14px; border:1px solid var(--line);
  background:linear-gradient(170deg,rgba(18,20,24,.92),rgba(7,8,10,.95));
  box-shadow: 0 16px 32px -14px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.06); }
.grp-head{ display:flex; align-items:center; gap:10px; padding:11px 12px; border-bottom:1px solid var(--line); flex-wrap:wrap;
  background:linear-gradient(180deg,rgba(30,34,42,.55),rgba(10,11,13,.2)); }
.tag{ font-family:var(--mono); font-size:9px; letter-spacing:.14em; padding:3px 8px; border:1px solid; }
.tag.exact{ color:var(--ok); border-color:rgba(126,240,200,.4); background:rgba(126,240,200,.06); }
.tag.fingerprint{ color:var(--ice); border-color:rgba(191,227,255,.4); background:rgba(191,227,255,.06); }
.tag.ns{ color:var(--gold); border-color:rgba(232,200,116,.4); background:rgba(232,200,116,.06); }
.tag.ss{ color:#9fb0c8; border-color:rgba(159,176,200,.4); background:rgba(159,176,200,.06); }
.tag.pat{ color:#d8a7ff; border-color:rgba(216,167,255,.4); background:rgba(216,167,255,.06); }
.grp-head .gsize{ font-family:var(--mono); font-size:11.5px; color:#fff; }
.grp-head .gwaste{ font-size:10.5px; color:var(--dim); }
.grp-head .gspacer{ flex:1; }
.gactions{ display:flex; gap:6px; flex-wrap:wrap; }
.gactions .b{ padding:6px 9px; font-size:9px; letter-spacing:.14em; }

.files{ display:flex; flex-direction:column; }
.file{ display:grid; grid-template-columns:22px 1fr auto auto; gap:10px; align-items:center;
  padding:8px 12px; border-bottom:1px solid rgba(255,255,255,.035); }
.file:last-child{ border-bottom:0; }
.file:hover{ background:rgba(255,255,255,.02); }
.file .ck2{ appearance:none; width:14px; height:14px; border:1px solid var(--line2); background:#050607; cursor:pointer;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.8); }
.file .ck2:checked{ border-color:var(--ice); box-shadow: 0 0 8px rgba(191,227,255,.25), inset 0 0 0 2px #050607, inset 0 0 0 9px rgba(191,227,255,.8); }
.file .fpath{ font-family:var(--mono); font-size:11px; color:#cfd4dc; word-break:break-all; }
.file .fpath b{ color:#fff; font-weight:500; }
.file .fmeta{ font-family:var(--mono); font-size:10px; color:var(--faint); white-space:nowrap; }
.file .fbtns{ display:flex; gap:4px; }
.fbtn{ border:1px solid var(--line); background:linear-gradient(180deg,#14171c,#0a0b0d); padding:4px 8px; cursor:pointer;
  font-size:9.5px; color:var(--dim); letter-spacing:.06em; }
.fbtn:hover{ color:#fff; border-color:var(--line2); }
.fbtn.trash:hover{ color:#ffb4ae; border-color:rgba(255,95,87,.5); }
.file.trashed{ opacity:.35; }
.file.trashed .fpath{ text-decoration:line-through; }
.file.keep-suggested{ background:rgba(126,240,200,.05); }

.empty{ text-align:center; padding:70px 30px; color:var(--dim); }
.empty-glyph{ font-size:34px; color:#2c323c; margin-bottom:16px; letter-spacing:.3em; }
.empty p{ max-width:560px; margin:0 auto 10px; font-size:13px; line-height:1.7; }
.small{ font-size:11px; color:var(--faint); }

.list .row{ display:grid; grid-template-columns:1fr auto; gap:10px; padding:8px 10px; border-bottom:1px solid rgba(255,255,255,.04); font-family:var(--mono); font-size:11px; }
.list .row .p{ color:#cfd4dc; word-break:break-all; }
.list .row .e{ color:#ff9a92; }

.logbox{ font-family:var(--mono); font-size:11px; color:#aab2bd; white-space:pre-wrap; line-height:1.6; }
.logbox .t{ color:var(--faint); }

/* status bar */
#statusbar{ display:flex; align-items:center; gap:12px; padding:9px 14px; border-top:1px solid #000;
  background:linear-gradient(180deg,#060709,#040506); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
#st-status{ font-size:9.5px; letter-spacing:.26em; color:var(--faint); }
#st-status.on{ color:var(--ice); }
#st-bar{ flex:0 0 220px; height:5px; background:#020303; border:1px solid var(--line); overflow:hidden; }
#st-bar i{ display:block; height:100%; width:0; background:linear-gradient(90deg,#31435c,#bfe3ff); transition:width .25s; }
#st-current{ flex:1; font-family:var(--mono); font-size:10.5px; color:var(--faint); }
.ellip{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#st-counts{ font-family:var(--mono); font-size:10.5px; color:var(--dim); white-space:nowrap; }

/* modal */
#modal{ position:fixed; inset:0; background:rgba(2,3,4,.72); display:flex; align-items:center; justify-content:center; z-index:50;
  backdrop-filter:blur(6px); }
.modal-box{ width:min(560px,90vw); border:1px solid var(--line2); padding:22px;
  background:linear-gradient(170deg,#15171c,#07080a);
  box-shadow: 0 50px 120px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.09); }
.modal-box h3{ font-size:11px; letter-spacing:.3em; color:var(--ice); margin-bottom:14px; }
.modal-box #m-body{ font-size:12.5px; color:var(--dim); line-height:1.65; max-height:44vh; overflow:auto; }
.modal-box #m-body b{ color:#fff; }
.modal-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }

/* scrollbars — thin, sharp */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:#040506; }
::-webkit-scrollbar-thumb{ background:#1a1d23; border:2px solid #040506; }
::-webkit-scrollbar-thumb:hover{ background:#2a2f38; }