/* ══ NxTGen Journal — profile.css (original styles.css lines 11135-11699) ══ */

/* ════════════════════════════════════════════════════════
   CALENDAR PAGE — Analytics Overhaul (standalone Calendar page only)
   ════════════════════════════════════════════════════════ */
#page-calendar{padding:16px 20px;overflow-y:auto;overflow-x:hidden}
#page-calendar{overflow-x:hidden}
#page-calendar .cal-page-scroll{display:flex;flex-direction:column;gap:14px;min-height:100%;padding-bottom:8px;max-width:100%}
#page-calendar .cal-wrap{height:auto;flex:none}
#page-calendar .cal-grid-with-weeks{min-height:560px}

/* ── Analytics card grid ─────────────────────────── */
.cal-an-grid{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:12px}
.cal-an-grid.row2{grid-template-columns:1fr 1.35fr}

.cal-an-card{
  background:var(--glass-1);
  border:1px solid var(--glass-border);
  border-radius:var(--r-xl);
  padding:16px 18px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  position:relative;overflow:hidden;
  box-shadow:var(--shadow-sm);
  min-height:112px;
  min-width:0;
  container-type:inline-size;
}
[data-theme="light"] .cal-an-card{background:var(--glass-2);box-shadow:var(--shadow-xs)}
.cal-an-card:hover{border-color:var(--glass-border-h);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.cal-an-card--toggle{cursor:pointer;user-select:none}
.cal-an-card--toggle:hover{border-color:rgba(99,179,237,0.35)}
.cal-an-card--toggle:active{transform:scale(0.97)}
.cal-an-toggle-hint{
  font-size:8px;color:var(--text3);text-transform:uppercase;
  letter-spacing:.06em;opacity:.7;margin-left:2px;
  font-family:var(--font-body);font-weight:600;
}

.cal-an-left{display:flex;flex-direction:column;gap:8px;flex:1 1 auto;min-width:0;overflow:hidden}
.cal-an-label{font-size:11.5px;color:var(--text3);display:flex;align-items:center;gap:5px;font-weight:700;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-an-label .info-dot{width:13px;height:13px;border-radius:50%;border:1.4px solid var(--text3);display:inline-flex;align-items:center;justify-content:center;font-size:8.5px;opacity:.55;flex-shrink:0}
.cal-an-value{font-family:var(--font-mono);font-size:clamp(11px,10cqi,27px);font-weight:800;letter-spacing:-.6px;line-height:1;white-space:nowrap;overflow:visible}
.cal-an-value.green{color:var(--green);text-shadow:0 0 22px var(--green-glow)}
.cal-an-value.red{color:var(--red);text-shadow:0 0 22px var(--red-glow)}

.cal-an-badge{
  position:absolute;top:14px;right:16px;
  background:var(--glass-3);border:1px solid var(--glass-border);
  border-radius:var(--r-full);font-size:11px;font-weight:800;color:var(--text2);
  padding:3px 10px;font-family:var(--font-mono);
}
.cal-an-mini-icon{
  width:36px;height:36px;border-radius:var(--r-md);
  background:var(--green-dim);
  display:flex;align-items:center;justify-content:center;
  color:var(--green);flex-shrink:0;
}

/* ── Gauge column (semicircle) ───────────────────── */
.cal-an-gauge-col{display:flex;flex-direction:column;align-items:center;gap:5px;flex:0 0 auto;width:clamp(30px,28cqi,108px);min-width:0}
/* Lock intrinsic shape so a CSS width override can never squash/stretch the arc —
   this is what was distorting the win/BE/loss ring into a torn/uneven shape. */
.cal-an-gauge-col svg{display:block;width:100%;height:auto;aspect-ratio:108/68;overflow:visible}
.cal-an-gauge-legend{display:flex;gap:clamp(2px,1.5cqi,5px)}
.cal-an-legend-chip{
  padding:2px clamp(4px,2cqi,7px);border-radius:var(--r-full);font-size:clamp(8px,3.2cqi,10px);font-weight:800;
  font-family:var(--font-mono);background:var(--glass-2);color:var(--text2);white-space:nowrap;
}
.cal-an-legend-chip.green{color:var(--green);background:var(--green-dim)}
.cal-an-legend-chip.blue{color:var(--blue);background:var(--blue-dim)}
.cal-an-legend-chip.red{color:var(--red);background:var(--red-dim)}

/* ── Ring gauge (profit factor) ──────────────────── */
.cal-an-ring-col{flex:0 0 auto;width:clamp(22px,20cqi,76px);min-width:0}
.cal-an-ring-col svg{display:block;width:100%;height:auto;aspect-ratio:1/1;overflow:visible}

/* ── Avg win/loss bar card ───────────────────────── */
.cal-an-bar-wrap{flex:1;display:flex;flex-direction:column;justify-content:center;gap:9px;min-width:0}
.cal-an-bar-track{height:10px;border-radius:var(--r-full);overflow:hidden;display:flex;background:var(--glass-2);box-shadow:inset 0 1px 2px rgba(0,0,0,.25)}
.cal-an-bar-seg{height:100%;transition:width .3s var(--ease-out)}
.cal-an-bar-seg.green{background:var(--green)}
.cal-an-bar-seg.red{background:var(--red)}
.cal-an-bar-labels{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:13px;font-weight:800}
.cal-an-bar-labels .green{color:var(--green)}
.cal-an-bar-labels .red{color:var(--red)}
.cal-an-bar-stat{display:flex;flex-direction:column;gap:1px;line-height:1.25}
.cal-an-bar-stat.right{align-items:flex-end;text-align:right}
.cal-an-bar-main{font-family:var(--font-mono);font-size:13px;font-weight:800}
.cal-an-bar-sub{font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--text3)}

/* ── Calendar header row (month nav + today + icons) ─ */
.cal-page-header{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cal-today-btn{
  font-size:12px;font-weight:700;padding:7px 15px;border-radius:var(--r-md);
  background:var(--glass-2);border:1px solid var(--glass-border);color:var(--text2);
  cursor:pointer;transition:var(--t-fast);
}
.cal-today-btn:hover{background:var(--glass-3);color:var(--text);border-color:var(--glass-border-h)}
.cal-header-spacer{flex:1}
.cal-header-icons{display:flex;gap:6px}
.cal-icon-btn{
  width:32px;height:32px;border-radius:var(--r-md);
  background:var(--glass-1);border:1px solid var(--glass-border);
  display:flex;align-items:center;justify-content:center;font-size:13.5px;
  color:var(--text2);cursor:pointer;transition:var(--t-fast);
}
.cal-icon-btn:hover{background:var(--glass-3);color:var(--text);border-color:var(--glass-border-h);transform:translateY(-1px)}
.cal-icon-btn svg{width:15px;height:15px;flex-shrink:0;display:block}

/* ── Monthly stats pill row ──────────────────────── */
.cal-stats-pill-row{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--text2);font-weight:700;flex-wrap:wrap;padding:2px 2px 0}
.cal-stats-pill-row .lbl{color:var(--text3);font-weight:600}
.cal-pill{padding:4px 12px;border-radius:var(--r-full);background:var(--glass-2);border:1px solid var(--glass-border);font-family:var(--font-mono);font-weight:800;color:var(--text)}
.cal-pill.green{color:var(--green)}

/* ── Grid + week sidebar ──────────────────────────── */
.cal-grid-with-weeks{flex:1;display:flex;gap:10px;min-height:0;align-items:stretch}
.cal-grid-with-weeks .cal-grid-wrap{flex:1;min-width:0}
#cal-days-2{grid-auto-rows:1fr}
.cal-week-col-wrap{display:flex;flex-direction:column;gap:8px;width:148px;flex-shrink:0;min-width:0;max-width:148px;overflow:hidden}
.cal-week-col-heading{display:none}
.cal-week-col{display:flex;flex-direction:column;gap:8px;flex:1;min-height:0;min-width:0}
.cal-week-card{
  flex:1;background:var(--glass-1);border:1px solid var(--glass-border);
  border-radius:var(--r-lg);padding:12px 14px;display:flex;flex-direction:column;justify-content:center;gap:4px;
  min-height:0;min-width:0;max-width:100%;box-sizing:border-box;overflow:hidden;transition:var(--t-fast);
}
.cal-week-card:hover{background:var(--glass-2);border-color:var(--glass-border-h)}
.cal-week-label{font-size:11px;color:var(--text3);font-weight:700}
.cal-week-pnl{font-family:var(--font-mono);font-size:17px;font-weight:800;letter-spacing:-.4px}
.cal-week-pnl.green{color:var(--green)}
.cal-week-pnl.red{color:var(--red)}
.cal-week-pnl.zero{color:var(--text3)}
.cal-week-days{font-size:10px;color:var(--text3);background:var(--glass-2);border-radius:var(--r-full);padding:3px 9px;width:fit-content}

@media (max-width: 1180px){
  .cal-an-grid{grid-template-columns:1fr 1fr}
  .cal-an-grid > .cal-an-card:first-child{grid-column:1/3}
  .cal-an-grid.row2{grid-template-columns:1fr}
  .cal-week-col-wrap{width:118px}
}
@media (max-width: 760px){
  /* ── Analytics cards: compact 3-up / 2-up rows, matching desktop layout ── */
  .cal-an-grid{grid-template-columns:repeat(3,1fr);gap:7px}
  .cal-an-grid > .cal-an-card:first-child{grid-column:auto}
  .cal-an-grid.row2{grid-template-columns:repeat(2,1fr)}

  .cal-an-card{
    flex-direction:row;align-items:center;justify-content:space-between;
    gap:6px;padding:10px 10px;min-height:0;border-radius:var(--r-lg);
  }
  .cal-an-grid.row2 .cal-an-card{min-height:0}
  .cal-an-left{gap:3px;width:auto;min-width:0}
  .cal-an-label{font-size:9px;gap:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cal-an-label .info-dot{width:10px;height:10px;font-size:7px}
  .cal-an-value{font-size:15px;letter-spacing:-.3px}
  .cal-an-badge{position:static;padding:1px 7px;font-size:9.5px;align-self:flex-start;margin-top:-2px}
  .cal-an-mini-icon{width:26px;height:26px}

  /* Gauge sizing now scales continuously via container query units on the base rule;
     just tighten gaps for the compact mobile card. */
  .cal-an-gauge-col{gap:3px}
  .cal-an-gauge-legend{gap:3px}
  .cal-an-legend-chip{padding:1px 5px}
  .cal-an-bar-wrap{gap:5px}
  .cal-an-bar-track{height:7px}
  .cal-an-bar-labels{font-size:10px}
  .cal-an-bar-main{font-size:10px}
  .cal-an-bar-sub{font-size:9px}

  /* ── Weekly summary: moved BELOW the calendar as its own roomy row, not squeezed to the side ── */
  .cal-grid-with-weeks{flex-direction:column;gap:14px;align-items:stretch}
  #page-calendar .cal-grid-with-weeks{min-height:0}
  .cal-week-col-wrap{width:100%;max-width:100%;flex-shrink:0;gap:8px}
  .cal-week-col-heading{
    display:block;font-size:10.5px;font-weight:800;color:var(--text3);
    text-transform:uppercase;letter-spacing:.08em;padding:0 2px;
  }
  /* ── Weekly summary: ONE row, split into equal columns — 1×4 or 1×5
     depending on how many weeks the month has. Each card stacks its
     label/pnl/day-count internally since columns are narrow on mobile. */
  .cal-week-col{
    display:flex;flex-direction:row;flex-wrap:nowrap;
    gap:6px;
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;padding-bottom:2px;
  }
  .cal-week-col::-webkit-scrollbar{display:none}
  .cal-week-card{
    min-width:56px;width:auto;flex:1 1 0%;padding:10px 6px 9px;
    flex-direction:column;align-items:center;justify-content:center;
    text-align:center;gap:3px;
  }
  .cal-week-label{font-size:9px;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .cal-week-pnl{
    font-size:12.5px;letter-spacing:-.2px;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis;max-width:100%;margin-left:0;
  }
  .cal-week-days{font-size:8px;padding:2px 6px;flex-shrink:0;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}

  /* ── Overall page rhythm: more breathing room, clear of the bottom nav ──
     The floating pill nav is ~63px tall + 10px offset + safe-area; pad well
     past that so nothing (esp. the Weekly P&L row) ever sits under it. */
  #page-calendar{
    padding:14px 12px calc(112px + env(safe-area-inset-bottom, 0px));
    scroll-padding-bottom:calc(112px + env(safe-area-inset-bottom, 0px));
  }
  .cal-page-scroll{gap:12px}
  /* Defensive spacer: guards against Android Chrome cases where a flex
     child's bottom padding gets clipped on overflow instead of scrolled to. */
  .cal-page-scroll::after{content:'';display:block;flex:none;height:1px}
  .cal-wrap{gap:12px}
  .cal-page-header{gap:8px}
  .cal-month-label{font-size:15px;min-width:0}
  .cal-today-btn{font-size:11px;padding:6px 12px}
  .cal-header-icons{gap:5px}
  .cal-icon-btn{width:28px;height:28px;font-size:12px}
  .cal-icon-btn svg{width:13px;height:13px}
  .cal-stats-pill-row{font-size:11px;gap:7px}
  .cal-dow{font-size:9px;padding:6px 0;letter-spacing:.05em}
  .cal-day{min-height:58px;padding:6px 5px}
  .cal-day-num{font-size:11px}
  .cal-today-badge{width:19px;height:19px;font-size:9.5px}
  .cal-day-dot{width:4px;height:4px;top:5px;right:5px}
  .cal-day-pnl{font-size:9.5px;margin-top:3px}
  .cal-day-count{font-size:8px;margin-top:1px}
  .cal-day-pairs{font-size:7px}
}
@media (max-width: 480px){
  /* Devices in the 344–430px range (Fold5 folded, SE, S8+, Pixel 7, XR,
     14 Pro Max, etc.) were still hitting the 760px 3-up/2-up compact grid,
     which left too little room per card and clipped labels/values
     ("Win rate" → "Win rat", "Profit factor" → "Profit facto", the
     Avg win/loss $ and % figures running off the edge). Ease up further
     here before the tighter 360px override kicks in. */
  .cal-an-grid{grid-template-columns:1fr 1fr;gap:7px}
  .cal-an-grid > .cal-an-card:first-child{grid-column:1/3}
  .cal-an-grid.row2{grid-template-columns:1fr}
  .cal-an-card{padding:12px 14px}
  .cal-an-label{font-size:10.5px}
  .cal-an-value{font-size:17px}
  .cal-an-bar-labels{font-size:12px}
  .cal-an-bar-main{font-size:12px}
  .cal-an-bar-sub{font-size:9.5px}
}
@media (max-width: 420px){
  .cal-day{min-height:50px;padding:5px 4px}
  .cal-day-num{font-size:10px}
  .cal-day-pnl{font-size:8.5px}
  .cal-day-count{font-size:7px}
  .cal-day-pairs{font-size:6.5px}
  .cal-week-card{padding:8px 4px 7px;gap:2px}
  .cal-week-label{font-size:8px}
  .cal-week-pnl{font-size:11px}
  .cal-week-days{font-size:7px;padding:1.5px 5px}
  .cal-an-grid{gap:5px}
  .cal-week-card.cal2-week-report{padding:7px 3px 6px !important}
  .cal-week-card.cal2-week-report .cal-week-label{font-size:8px !important}
  .cal-week-card.cal2-week-report .cal2-week-grade{font-size:9px !important}
  .cal-week-card.cal2-week-report .cal-week-pnl{font-size:11px !important}
  .cal-week-card.cal2-week-report .cal-week-days{font-size:7px !important;padding:1.5px 5px !important}
}
@media (max-width: 360px){
  #page-calendar{padding-left:8px;padding-right:8px}
  .cal-day{min-height:44px;padding:4px 3px}
  .cal-day-num{font-size:9.5px}
  .cal-day-pnl{font-size:8px}
  .cal-dow{font-size:8px}
  .cal-an-grid{grid-template-columns:1fr 1fr;gap:6px}
  .cal-an-grid > .cal-an-card:first-child{grid-column:1/3}
  .cal-week-card{padding:7px 3px 6px;gap:2px}
  .cal-week-label{font-size:7.5px}
  .cal-week-pnl{font-size:10px}
  .cal-week-days{font-size:6.5px;padding:1.5px 4px}
  .cal-month-label{font-size:14px}
  .cal-week-card.cal2-week-report{padding:6px 2px 5px !important}
  .cal-week-card.cal2-week-report .cal-week-label{font-size:7.5px !important}
  .cal-week-card.cal2-week-report .cal2-week-grade{font-size:8.5px !important}
  .cal-week-card.cal2-week-report .cal-week-pnl{font-size:10px !important}
  .cal-week-card.cal2-week-report .cal-week-days{font-size:6.5px !important;padding:1.5px 4px !important}
}

/* ── Calendar Settings modal ─────────────────────── */
.cal-settings-overlay{
  position:fixed;inset:0;z-index:400;
  background:rgba(4,6,10,0.55);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;padding:20px;
  animation:fadeIn .15s var(--ease-out);
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.cal-settings-modal{
  width:100%;max-width:400px;
  background:var(--glass-2);border:1px solid var(--glass-border);
  border-radius:var(--r-xl);padding:20px;
  box-shadow:var(--shadow-xl),inset 0 1px 0 var(--glass-shine);
  animation:popupIn .18s var(--ease-spring);
}
[data-theme="light"] .cal-settings-modal{background:rgba(255,255,255,.98)}
.cal-settings-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.cal-settings-title{font-family:var(--font-head);font-size:14px;font-weight:800;letter-spacing:-.2px}
.cal-settings-body{display:flex;flex-direction:column;gap:14px}
.cal-settings-field{display:flex;flex-direction:column;gap:6px}
.cal-settings-field label{font-size:11.5px;color:var(--text3);font-weight:700}
.cal-settings-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}

/* ══════════════════════════════════════════════════════
   ICON SYSTEM — replaces emoji throughout the app.
   Inline SVGs reference a single <symbol> sprite (injected
   once in index.html) via <use>, so markup stays lightweight
   and every icon inherits color from its surrounding text.
═══════════════════════════════════════════════════════ */
.icn{
  display:inline-block;
  width:1em;height:1em;
  vertical-align:-0.15em;
  flex-shrink:0;
  color:currentColor;
  line-height:1;
}
.icn-sm{width:.85em;height:.85em}
.icn-lg{width:1.3em;height:1.3em}
.icn-xl{width:1.6em;height:1.6em;vertical-align:-0.2em}

/* Status-colored icon helpers (used where the emoji previously carried
   its own color, e.g. red/gold/green/blue/muted dots) */
.icn-red{color:var(--red)}
.icn-green{color:var(--green)}
.icn-gold,.icn-yellow{color:var(--gold)}
.icn-blue{color:var(--blue)}
.icn-muted{color:var(--text3)}

/* Buttons / labels that combine an icon + text keep them aligned
   and evenly spaced without layout shift */
.icn-label{display:inline-flex;align-items:center;gap:5px}

/* Sidebar year disclosure chevron (rotates instead of swapping glyphs) */
.yr-arrow-icon{display:inline-flex;color:var(--text3);transition:transform .15s ease}
.yr-arrow-icon.open{transform:rotate(90deg)}

/* ═══════════════════════════════════════════════════════════════════
   NxDropzone — universal drag & drop image upload component
   Single reusable visual language for every image upload field in
   the app. Respects light/dark theme automatically via CSS vars.
   Motion timings match the app's own scale (150–250ms, --ease-out).
═══════════════════════════════════════════════════════════════════ */

.nx-dropzone{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;
  text-align:center;
  padding:28px 20px;
  border-radius:14px;
  border:1.5px dashed var(--glass-border-h);
  background:var(--glass-1);
  cursor:pointer;
  transition:border-color .2s var(--ease-out),background .2s var(--ease-out),
             transform .2s var(--ease-out),box-shadow .2s var(--ease-out);
  outline:none;
  -webkit-tap-highlight-color:transparent;
}
.nx-dropzone:hover{
  border-color:var(--blue);
  background:var(--blue-dim);
}
.nx-dropzone:focus-visible{
  border-color:var(--blue);
  box-shadow:0 0 0 3px var(--blue-glow);
}
.nx-dropzone.nx-drag-over{
  border-color:var(--blue);
  border-style:solid;
  background:var(--blue-dim);
  transform:scale(1.02);
  box-shadow:0 0 0 4px var(--blue-glow),0 8px 28px var(--blue-glow);
}
.nx-dropzone.nx-has-error{
  border-color:rgba(248,113,113,0.55);
  background:rgba(248,113,113,0.06);
}
.nx-dropzone.nx-disabled{
  opacity:.5;pointer-events:none;
}

.nx-dropzone-icon{
  width:34px;height:34px;
  color:var(--blue);
  opacity:.85;
  transition:transform .2s var(--ease-spring);
}
.nx-dropzone.nx-drag-over .nx-dropzone-icon{ transform:translateY(-3px) scale(1.08); }
.nx-dropzone-icon svg{ width:100%;height:100%; }

.nx-dropzone-text-primary{
  font-size:13.5px;font-weight:600;color:var(--text);
  margin-top:4px;
}
.nx-dropzone-text-secondary{
  font-size:12px;color:var(--text2);
}
.nx-dropzone-meta{
  margin-top:6px;
  font-size:10.5px;color:var(--text3);
  letter-spacing:.02em;
}

/* Compact variant — used inside small grid slots (e.g. trade chart slots)
   where the full copy would overflow */
.nx-dropzone.nx-compact{
  padding:10px 8px;gap:3px;border-radius:10px;
}
.nx-dropzone.nx-compact .nx-dropzone-icon{ width:20px;height:20px; }
.nx-dropzone.nx-compact .nx-dropzone-text-primary{ font-size:10.5px; }
.nx-dropzone.nx-compact .nx-dropzone-text-secondary,
.nx-dropzone.nx-compact .nx-dropzone-meta{ display:none; }

.nx-dropzone-input{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ── Loading state ───────────────────────────────────────────────── */
.nx-dropzone-loading{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  color:var(--text2);font-size:12px;
}
.nx-dropzone-spinner{
  width:22px;height:22px;border-radius:50%;
  border:2.5px solid var(--glass-border-h);
  border-top-color:var(--blue);
  animation:nx-spin .7s linear infinite;
}
@keyframes nx-spin{ to{ transform:rotate(360deg); } }

/* ── Inline error banner ─────────────────────────────────────────── */
.nx-dropzone-error{
  display:flex;align-items:center;gap:6px;
  margin-top:8px;padding:6px 10px;
  border-radius:8px;
  background:rgba(248,113,113,0.12);
  border:1px solid rgba(248,113,113,0.3);
  color:var(--red,#f87171);
  font-size:11.5px;font-weight:500;
  text-align:left;
  animation:nx-shake .32s var(--ease-out);
}
.nx-dropzone-error svg{ width:14px;height:14px;flex-shrink:0; }
@keyframes nx-shake{
  0%,100%{ transform:translateX(0); }
  25%{ transform:translateX(-3px); }
  75%{ transform:translateX(3px); }
}

/* ── Preview card (shown once a file is selected/dropped) ──────────── */
.nx-dropzone-preview{
  display:flex;align-items:center;gap:12px;
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--glass-border);
  background:var(--glass-2);
  text-align:left;
  animation:nx-fade-in .2s var(--ease-out);
}
@keyframes nx-fade-in{
  from{ opacity:0; transform:translateY(4px); }
  to{ opacity:1; transform:translateY(0); }
}
.nx-dropzone-preview-thumb{
  width:52px;height:52px;flex-shrink:0;
  border-radius:8px;overflow:hidden;
  background:var(--glass-1);
  border:1px solid var(--glass-border);
  display:flex;align-items:center;justify-content:center;
}
.nx-dropzone-preview-thumb img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.nx-dropzone-preview-info{
  flex:1;min-width:0;
  display:flex;flex-direction:column;gap:2px;
}
.nx-dropzone-preview-name{
  font-size:12.5px;font-weight:600;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.nx-dropzone-preview-meta{
  font-size:11px;color:var(--text3);
}
.nx-dropzone-preview-actions{
  display:flex;gap:6px;flex-shrink:0;
}
.nx-dropzone-preview-actions button{
  display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;
  border-radius:7px;
  border:1px solid var(--glass-border);
  background:var(--glass-1);
  color:var(--text2);
  cursor:pointer;
  transition:all .15s var(--ease-out);
}
.nx-dropzone-preview-actions button:hover{
  background:var(--glass-3);color:var(--text);
  border-color:var(--glass-border-h);
  transform:translateY(-1px);
}
.nx-dropzone-preview-actions button.nx-remove:hover{
  background:rgba(248,113,113,0.14);color:var(--red,#f87171);
  border-color:rgba(248,113,113,0.35);
}
.nx-dropzone-preview-actions button svg{ width:14px;height:14px; }

@media (max-width: 640px){
  .nx-dropzone{ padding:20px 14px; }
  .nx-dropzone-icon{ width:28px;height:28px; }
  .nx-dropzone-text-primary{ font-size:12.5px; }
  .nx-dropzone-text-secondary,.nx-dropzone-meta{ font-size:11px; }
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce){
  .nx-dropzone,.nx-dropzone-icon,.nx-dropzone-preview{ transition:none;animation:none; }
}

/* ── Progressive enhancement for existing legacy zones ──────────────
   These already have dragover/drop wired in JS (see aiChartDragOver /
   aiChartDrop in app.js) and toggle a `.drag-over` class — we simply
   give that state the same glow + scale language as .nx-dropzone so
   the whole app feels consistent even where the exact DOM predates
   this component. */
.ai-chart-upload-wrap.drag-over,
.wl-chart-upload-zone.drag-over,
.wl-day-upload-zone.drag-over{
  border-color:var(--blue) !important;
  border-style:solid !important;
  background:var(--blue-dim) !important;
  transform:scale(1.015);
  box-shadow:0 0 0 4px var(--blue-glow),0 8px 24px var(--blue-glow);
  transition:all .2s var(--ease-out);
}
.chart-sort-thumb.nx-drag-over{
  outline:2px solid var(--blue);
  outline-offset:-2px;
  background:var(--blue-dim);
  transform:scale(1.02);
  box-shadow:0 0 0 4px var(--blue-glow);
}
/* The dragenter/dragleave listeners actually live on `.chart-sort-item`
   (the outer slot), not `.chart-sort-thumb` — so the hover feedback needs
   its own rule on that element too, or nothing lights up while an OS file
   is being dragged across the grid (only the drop itself was visible). */
.chart-sort-item.nx-drag-over{
  transform:scale(1.04);
  z-index:2;
}
.chart-sort-item.nx-drag-over .chart-sort-thumb{
  outline:2px solid var(--blue);
  outline-offset:-2px;
  background:var(--blue-dim);
  box-shadow:0 0 0 4px var(--blue-glow);
  transition:outline-color .12s var(--ease-out), background .12s var(--ease-out), box-shadow .12s var(--ease-out);
}
.chart-sort-item.nx-drag-over .chart-sort-empty span:first-child{
  opacity:.7;
}