/* ================================
   N O V A  —  2025 UI System
   ================================ */

/* Fluid scales */
:root{
  --r-xl: 20px; --r-lg: 14px; --r-md: 10px;
  --gap-1: clamp(6px, .7vw, 10px);
  --gap-2: clamp(10px, 1vw, 14px);
  --gap-3: clamp(14px, 1.6vw, 20px);
  --gap-4: clamp(18px, 2.4vw, 28px);
  --fs-xs: clamp(11px, .8vw, 12px);
  --fs-sm: clamp(12px, .95vw, 13px);
  --fs-md: clamp(13px, 1.05vw, 14px);
  --fs-lg: clamp(14px, 1.2vw, 16px);
  --fs-xl: clamp(18px, 2.2vw, 22px);
  --e1: 0 8px 24px rgba(0,0,0,.20);
  --e2: 0 18px 50px rgba(0,0,0,.38);
}

/* Themes */
body[data-theme="nova-dark"]{
  --bg: #0b0f14;     --panel: #0f1420;
  --card: #121a28;   --border: #243246;
  --text: #e9eef7;   --muted: #9fb0c8;
  --accent: #7cafff; --accent-2: #8d7cff;
  --ok:#2cd7a5; --warn:#f9b44e; --danger:#ff6b6b;
  --chip: #0f1420;   --chip-brd:#2a3952;
  --ring: 0 0 0 2px #0f1420, 0 0 0 4px rgba(124,175,255,.55);
  color-scheme: dark;
}
body[data-theme="nova-light"]{
  --bg: #f7f8fc;     --panel:#ffffff;
  --card:#f1f4fb;    --border:#d9e0ee;
  --text:#08121f;    --muted:#4a5570;
  --accent:#2563eb;  --accent-2:#7c4dff;
  --ok:#10b981; --warn:#d97706; --danger:#dc2626;
  --chip:#ffffff;    --chip-brd:#dee6f6;
  --ring: 0 0 0 2px #ffffff, 0 0 0 4px rgba(37,99,235,.45);
  color-scheme: light;
}
body[data-theme="neo-oled"]{
  --bg:#000; --panel:#080a0e; --card:#0b0f18; --border:#1a2130;
  --text:#eef2fb; --muted:#9aa7bd;
  --accent:#4aa8ff; --accent-2:#a08aff;
  --ok:#22d3a3; --warn:#ffc34d; --danger:#ff7070;
  --chip:#0b0f18; --chip-brd:#24324a;
  --ring: 0 0 0 2px #080a0e, 0 0 0 4px rgba(74,168,255,.55);
  color-scheme: dark;
}
body[data-theme="sunset"]{
  --bg:#110d10; --panel:#17121a; --card:#1c1522; --border:#2a1f37;
  --text:#f6ecff; --muted:#b7a6c7;
  --accent:#ff7ab6; --accent-2:#ffb36b;
  --ok:#2dd4bf; --warn:#f59e0b; --danger:#fb7185;
  --chip:#1c1522; --chip-brd:#372a4a;
  --ring: 0 0 0 2px #17121a, 0 0 0 4px rgba(255,122,182,.55);
  color-scheme: dark;
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: radial-gradient(1200px 800px at 10% -10%, color-mix(in oklab, var(--accent) 12%, transparent), transparent),
              radial-gradient(900px 700px at 110% 0%, color-mix(in oklab, var(--accent-2) 10%, transparent), transparent),
              var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

/* Layout */
.app{ display:grid; grid-template-columns: 280px 1fr; min-height:100svh }
@media (max-width: 1000px){ .app{ grid-template-columns: 1fr } }

.sidebar{
  padding: var(--gap-4) var(--gap-3);
  background: linear-gradient(180deg, var(--panel), transparent 60%);
  border-right: 1px solid var(--border);
  position: sticky; top:0; height:100svh; overflow:auto;
}
@media (max-width: 1000px){ .sidebar{ position:relative; height:auto; border-right:0; border-bottom:1px solid var(--border) } }

.brand{ display:flex; gap: var(--gap-2); align-items:center; margin-bottom: var(--gap-3) }
.badge{ width:40px; height:40px; border-radius: 12px; display:grid; place-items:center; font-weight:800; color:#fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: var(--e1) }
.brand h1{ margin:0; font-size: var(--fs-xl) }
.brand p{ margin:2px 0 0; color: var(--muted); font-size: var(--fs-xs) }

.sep{ height:1px; background: var(--border); margin: var(--gap-2) 0 }
.hint{ color: var(--muted); font-size: var(--fs-xs); margin-top: var(--gap-2) }
.themes{ display:flex; gap:8px; flex-wrap:wrap }
.pill{ padding:6px 10px; border-radius: 999px; border:1px solid var(--chip-brd); background: var(--chip); color: var(--muted); cursor:pointer; font-weight:700 }
.pill:hover{ border-color: var(--accent); color: var(--text) }

/* Bucket list */
.buckets{ display:grid; gap:8px }
.buckets button{
  text-align:left; width:100%; border-radius: 12px; border:1px solid var(--border);
  background: var(--card); color: var(--text); padding:10px 12px; cursor:pointer;
}
.buckets button[aria-current="true"]{ outline: var(--ring); border-color: var(--accent) }
.buckets small{ color: var(--muted); display:block; margin-top:4px; word-break: break-all }

/* Main */
.main{ padding: var(--gap-3) var(--gap-4); display:grid; grid-template-rows:auto auto auto 1fr; gap: var(--gap-3) }
@media (max-width:680px){ .main{ padding: var(--gap-2) } }

/* Top bar */
.topbar{ display:flex; gap: var(--gap-2); align-items:center; flex-wrap:wrap }
.field{ border:1px solid var(--border); background: var(--panel); color: var(--text); border-radius: 12px; padding: 10px 12px }
.field.search{ display:flex; align-items:center; gap:10px; min-width: min(420px, 100%) }
.field.search input{ background:transparent; border:0; outline:0; color: inherit; width:100% }
.field.select{ appearance:none }
.grow{ flex:1 }

.segmented{ display:flex; gap:6px; padding:4px; border:1px solid var(--border); border-radius: 12px; background: var(--panel) }
.seg{ padding:8px 12px; border-radius: 8px; border:0; background: transparent; color: var(--text); cursor:pointer }
.seg.is-active{ background: var(--card); border:1px solid var(--accent) }

.btn{ border:1px solid var(--border); border-radius: 12px; padding:10px 12px; cursor:pointer; background: var(--panel); color: var(--text) }
.btn.primary{ background: linear-gradient(180deg, var(--accent), color-mix(in oklab, var(--accent) 60%, #000)); color:#fff; border-color: transparent }
.btn.ghost{ background: var(--panel) }
.btn.danger{ background: linear-gradient(180deg, var(--danger), color-mix(in oklab, var(--danger) 60%, #000)); color:#fff; border-color: transparent }
.icon{ border:1px solid var(--border); border-radius: 10px; background: var(--panel); color: var(--text); padding:6px 8px; cursor:pointer }

/* Status bar */
.statusbar{ display:flex; gap:8px; flex-wrap:wrap; align-items:center }
.chip{ padding:6px 10px; border-radius: 999px; border:1px solid var(--chip-brd); background: var(--chip); color: var(--muted); font-weight:700; font-size: var(--fs-xs) }
.chip.tone{ color:#fff; background: linear-gradient(180deg, var(--accent), color-mix(in oklab, var(--accent) 60%, #000)); border-color: transparent }

/* Dropzone */
.drop{ border:2px dashed var(--border); border-radius: var(--r-xl); background: color-mix(in oklab, var(--panel) 70%, transparent); }
.drop .drop-inner{ display:grid; place-items:center; padding: 24px; text-align:center; color: var(--muted); gap:6px }
.drop.drag{ border-color: var(--accent); box-shadow: var(--e1) }
.emoji{ font-size: 24px }

/* Files */
.files{ display:grid; gap: var(--gap-2); grid-auto-rows: 1fr; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) }
.files.list{ grid-template-columns: 1fr }

.card{
  display:flex; gap:12px; align-items:stretch;
  border:1px solid var(--border); border-radius: 16px; background: var(--card); box-shadow: var(--e1); overflow:hidden;
  padding: 10px; min-height: 110px;
}
.files.grid .card{ flex-direction:column }
.files.list .card{ flex-direction:row }

.media{
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff; display:grid; place-items:center;
  border-radius: 10px; overflow:hidden; flex:0 0 auto; width:100%; aspect-ratio: 16/10;
}
.files.list .media{ width:140px; aspect-ratio: 1 / 1 }

.media img{ width:100%; height:100%; object-fit:cover; display:block }
.media .ext{ font-size: 12px; font-weight: 800; padding:6px 10px; background: rgba(0,0,0,.25); border-radius: 999px }

.info{ display:grid; gap:8px; min-width:0; flex:1 }
.name{ font-weight:800; font-size: var(--fs-md); word-break: break-all; line-height:1.25; max-height: 3.2em; overflow: hidden }
.meta{ color: var(--muted); font-size: var(--fs-xs) }

.actions{ display:flex; gap:8px; margin-top:auto }
.actions .btn{ flex:1; padding:8px 10px; font-size: var(--fs-xs) }

/* Dialog */
dialog{ border:0; border-radius: 16px; background: var(--panel); color: var(--text); box-shadow: var(--e2); width:min(520px, 92vw) }
dialog::backdrop{ background: rgb(0 0 0 / .5) }
.dialog-head{ display:flex; align-items:center; justify-content:space-between; padding: 12px 12px; border-bottom:1px solid var(--border) }
.dialog-body{ padding: 14px }

/* Toasts */
.toasts{ position: fixed; right: 18px; bottom: 18px; display:grid; gap:8px; z-index: 9999 }
.toast{ background: var(--panel); border:1px solid var(--border); padding: 10px 12px; border-radius: 12px; color: var(--text); box-shadow: var(--e2) }

/* Utility */
.row{ display:flex; gap:8px; align-items:center }
.row.end{ justify-content:flex-end }

/* Mobile */
@media (max-width: 640px){
  .topbar{ gap:8px }
  .field.search{ min-width: 100% }
  .segmented{ order: 3 }
  .statusbar{ position: sticky; top: 4px; z-index: 3 }
  .files.grid{ grid-template-columns: 1fr }
  .media{ aspect-ratio: 16/9 }
}