:root{
  --bg: #071527;

  --panel: rgba(255,255,255,.035);
  --panel2: rgba(255,255,255,.055);

  --line: rgba(255,255,255,.11);
  --text: #e9f2ff;
  --muted: #a9bdd6;

  --accent: #5dd6ff;
  --accent2: #2fd0ff;

  --ok: #2fd0c6;
  --bad: #ff5a6e;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:radial-gradient(1200px 700px at 30% 0%, #132a4a, var(--bg));
  color:var(--text)
}

.topline{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 16px;
  border-bottom:1px solid var(--line);
  background:rgba(10,17,31,.7);
  backdrop-filter:blur(6px)
}

.appmeta{font-size:12px;color:var(--muted)}
.topactions{display:flex;gap:8px}

.important{
  margin:12px 16px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,.03);
  color:var(--muted)
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
}
/* Force identical width for all TOP-level section cards */
body > .card{
  width: min(var(--pageW), calc(100% - (var(--pagePad) * 2))) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


.card{
  margin:12px 16px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02))
}

.cardtitle{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:10px
}

.h1{font-size:18px;font-weight:700}
.right{display:flex;align-items:center;gap:10px}
.preset{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:12px}

.evalwin{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:12px}
.evalwin input{
  width:90px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background: rgba(0,0,0,.22);
  color:var(--text);
  outline:none;
}

.grid4{display:grid;grid-template-columns:repeat(4,minmax(220px,1fr));gap:12px}
@media (max-width:1200px){.grid4{grid-template-columns:repeat(2,minmax(220px,1fr));}}
@media (max-width:700px){.grid4{grid-template-columns:1fr;}}

.field label{display:block;color:var(--muted);font-size:12px;margin:0 0 6px 2px}
.field input,.field select,textarea{
  width:100%;
  padding:10px 10px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.22);
  color:var(--text);
  outline:none;
}

.crit input,
.crit select{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.22);
  color:var(--text);
  outline:none;
}

/* Optional: make file input + selects consistently dark */
input[type="file"]{ color: var(--text); }

.hiddenFile{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  opacity:0;
}

select{ background: rgba(0,0,0,.22); color: var(--text); }

.field.wide2{grid-column:span 2}
.row2{display:flex;gap:10px;align-items:center}
.actions{display:flex;gap:10px;align-items:center;margin-top:12px;flex-wrap:wrap}
.quota{margin-left:auto;color:var(--muted);font-size:12px}
.status{color:var(--muted);font-size:12px}
.hint{color:var(--muted);font-size:12px}

.actions .actionTools{
  display:flex;
  gap:10px;
  align-items:center;
}

.actions .actionBadges{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
}

.actions .badge{
  display:inline-flex;
  align-items:center;
  gap:10px;

  padding:10px 14px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;

  background: rgba(0,0,0,.22);
  box-shadow: 0 0 0 1px rgba(255,255,255,.05) inset;

  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2px;
  white-space: nowrap;
}

.actions .badge::before{
  content:"";
  width:10px;
  height:10px;
  border-radius:999px;
  background: rgba(93,221,255,.9);
  box-shadow: 0 0 0 3px rgba(93,221,255,.12);
  flex:0 0 auto;
}

/* Recent CSVs: dot left of label (not above) */
.actions.importActions.importCsvRow .csvRecentWrap.badge{
  position: relative;
  padding-left: 34px;     /* space for dot */
}

.actions.importActions.importCsvRow .csvRecentWrap.badge::before{
  position: absolute;
  left: 14px;
  top: 16px;              /* aligns with "Recent CSVs:" line */
  margin: 0;
}


.btn{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:var(--text);
  cursor:pointer
}
.btn:hover{border-color:#2b416a}
.btn.primary{border-color:rgba(93,169,255,.6);background:rgba(93,169,255,.18)}
.btn.ghost{background:transparent}

.hidden{display:none !important}

.critgrid{display:grid;grid-template-columns:repeat(3,minmax(220px,1fr));gap:12px}
@media (max-width:1000px){.critgrid{grid-template-columns:repeat(2,minmax(220px,1fr));}}
@media (max-width:650px){.critgrid{grid-template-columns:1fr;}}

.crit{padding:10px;border:1px solid var(--line);border-radius:14px;background:rgba(0,0,0,.16)}
.critlabel{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px;margin-bottom:8px}
.tag{padding:2px 8px;border-radius:999px;border:1px solid var(--line);font-size:11px;color:var(--muted)}
.tip{margin-top:10px;color:var(--muted);font-size:12px}

.tablewrap{overflow:auto;border:1px solid var(--line);border-radius:14px}
table{width:100%;border-collapse:collapse;font-size:13px}
thead th{
  position:sticky;
  top:0;
  background:rgba(0,0,0,.25);
  color:var(--muted);
  text-align:left;
  padding:10px;
  border-bottom:1px solid var(--line);
  white-space:nowrap
}
tbody td{padding:10px;border-bottom:1px solid rgba(28,42,67,.65);white-space:nowrap}
tbody tr:hover{background:rgba(93,169,255,.06)}

.pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;border:1px solid var(--line)}
.pill.ok{color:var(--ok);border-color:rgba(68,230,176,.35);background:rgba(68,230,176,.08)}
.pill.bad{color:var(--bad);border-color:rgba(255,90,110,.35);background:rgba(255,90,110,.08)}
.pill.warn{color:#ff9800;border-color:rgba(255,152,0,.35);background:rgba(255,152,0,.08)}
.pill.score-green{color:#4caf50;border-color:rgba(76,175,80,.35);background:rgba(76,175,80,.12);font-weight:700}
.pill.score-orange{color:#ff9800;border-color:rgba(255,152,0,.35);background:rgba(255,152,0,.12);font-weight:700}
.pill.score-red{color:#f44336;border-color:rgba(244,67,54,.35);background:rgba(244,67,54,.12);font-weight:700}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.65);display:flex;align-items:center;justify-content:center;z-index:999}
.modalcard{width:min(980px,calc(100% - 24px));background:rgba(15,27,46,.98);border:1px solid var(--line);border-radius:16px;padding:14px}
.modaltitle{font-weight:800;margin-bottom:8px}
.modalbody{margin:0;white-space:pre-wrap;color:var(--text);background:rgba(0,0,0,.18);border:1px solid var(--line);border-radius:12px;padding:10px;max-height:60vh;overflow:auto}
.modalactions{display:flex;justify-content:flex-end;margin-top:10px}

/* switch */
.switch{position:relative;display:inline-block;width:46px;height:26px}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,.06);border:1px solid var(--line);transition:.2s;border-radius:999px}
.slider:before{position:absolute;content:"";height:20px;width:20px;left:3px;bottom:2px;background:rgba(255,255,255,.80);transition:.2s;border-radius:50%}
.switch input:checked + .slider{background:rgba(95,221,255,.16);border-color:rgba(95,221,255,.40)}
.switch input:checked + .slider:before{transform:translateX(20px)}

/* FYTAHQ Buttons (steel/cyan, no gradient) */
.btn,
button.btn{
  appearance:none;
  border:1px solid var(--line);
  background:rgba(255,255,255,.05);
  color:var(--text);
  padding:9px 14px;
  border-radius:12px;
  font-weight:600;
  cursor:pointer;
  transition:background .12s ease, border-color .12s ease, transform .06s ease, box-shadow .12s ease;
}

.btn:hover,
button.btn:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.16);
}

.btn:active,
button.btn:active{ transform:translateY(1px); }

.btn:disabled,
button.btn:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
}

/* Primary = FYTAHQ cyan */
.btn.primary,
button.btn.primary{
  background:rgba(93,214,255,.16);
  border-color:rgba(93,214,255,.42);
  color:var(--text);
}

.btn.primary:hover,
button.btn.primary:hover{
  background:rgba(93,214,255,.22);
  border-color:rgba(93,214,255,.60);
}

.btn:focus-visible,
button.btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(93,214,255,.20);
}

/* Ghost / subtle */
.btn.ghost,
button.btn.ghost{
  background:rgba(0,0,0,.18);
  border-color:var(--line);
}

.btn.ghost:hover,
button.btn.ghost:hover{
  background:rgba(0,0,0,.26);
}

/* Import Channels (CSV) – layout: left | center | right */
.actions.importActions{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 24px;
}

/* Left group: Select File + filename */
.actions.importActions .importLeft{
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Center group: Analyze + CSV hint */
.actions.importActions .importCenter{
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Right group: reserved (can stay empty) */
.actions.importActions .importRight{
  justify-self: end;
}

/* Keep the CSV hint on one line */
.actions.importActions .csvHint{ white-space: nowrap; }

/* FYTAHQ Brand in topbar (wordmark style) */
.topbar .brand{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}

.topbar .brandLogo{
  width:52px;
  height:52px;
  object-fit:contain;
  flex:0 0 auto;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.40));
}

.topbar .brandText{
  display:flex;
  flex-direction:column;
  line-height:1.05;
  min-width:0;
}

.topbar .brandTop{
  font-weight:800;
  letter-spacing:1.2px;
  font-size:22px;
  text-transform:uppercase;
  text-shadow: 0 2px 0 rgba(0,0,0,.35), 0 10px 22px rgba(0,0,0,.35);
}

.topbar .brandAccent{
  color:var(--accent);
  text-shadow:0 2px 12px rgba(93,214,255,.28);
}

.topbar .brandBottom{
  margin-top:2px;
  font-weight:800;
  font-size:13.5px;
  color:rgba(93,214,255,.62);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-shadow:0 2px 10px rgba(0,0,0,.25);
}

.topbar .brandHQ{
  display:inline-block;
  margin-left:8px;
  padding:2px 7px;
  border-radius:8px;
  background:rgba(93,214,255,.16);
  border:1px solid rgba(93,214,255,.38);
  color:var(--text);
  font-weight:800;
  font-size:11px;
  letter-spacing:.6px;
}

/* Top header bar */
.topbar{
  position: sticky;
  top: 0;
  z-index: 1000;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  margin: 10px 12px 14px;
  padding: 30px 24px;
  border-radius: 14px;
  border: 1px solid var(--line);

  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* FYTAHQ left banner (scale down inside topbar) */
.topbar .fytaBrandBanner{
  height: 66px;
  width: auto;
  max-width: 520px;
  object-fit: contain;
  display:block;
}

.topbar .brand{ flex: 0 0 200px; }

.topbar .topcenter{
  flex: 1 1 auto;
  display:flex;
  justify-content:center;
  align-items:center;
  min-width: 0;
  padding: 0 16px;
}

.topbar .nrWordmark{
  height: 120px;
  width: auto;
  max-width: 520px;
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.45));
}

.topbar .topright{
  flex: 0 0 200px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.topbar .vrmLogo{
  height: 160px;
  width: 160px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.40));
}

.topbar .topactions{ flex:0 0 auto; }

.topbar .brand{
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .3px;
  color: var(--text);
}

.topbar .topactions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}

.card{ box-shadow: 0 14px 40px rgba(0,0,0,.35); }

/* Buttons: clearer primary + consistent hover/focus */
.btn{
  transition: transform .08s ease, filter .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.btn.primary{
  border-color: rgba(93,214,255,.45);
  background: linear-gradient(180deg, rgba(93,214,255,.18), rgba(255,255,255,.04));
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}

.btn.primary:hover{
  filter: brightness(1.08);
  border-color: rgba(138,125,255,.55);
}

.btn.primary:active{ transform: translateY(1px); }

.btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(93,214,255,.18), 0 12px 28px rgba(0,0,0,.35);
}

/* FYTAHQ polish #2: topline + ghost buttons */
.topline{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 10px 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,.30);
}

.btn.ghost{
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
}

.btn.ghost:hover{
  border-color: rgba(93,214,255,.35);
  background: rgba(255,255,255,.06);
}

/* Links styled as buttons should have no underline */
a.btn, a.btn:hover, a.btn:visited, a.btn:active {
  text-decoration: none;
}

/* === FYTAHQ: Import CSV (SS1) + Analyze Output (SS2) - FINAL BLOCK === */
/* This is the ONLY SS1/SS2 styling. Keep this at the VERY END of file. */

.actions.importActions textarea#csvText.csvText,
.actions.importActions pre#csvOut.csvOut{
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.12));
  color: var(--text);
  padding: 12px 14px;
  box-shadow:
    0 10px 26px rgba(0, 0, 0, .22),
    inset 0 1px 0 rgba(255,255,255,.06);
  outline: none;
}

/* SS1: CSV preview textarea */
.actions.importActions textarea#csvText.csvText{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12.5px;
  line-height: 1.55;
  min-height: 92px;
  max-height: 180px;
  resize: vertical;
  white-space: pre;
  overflow: auto;
  caret-color: var(--accent);
}

.actions.importActions textarea#csvText.csvText::placeholder{
  color: var(--muted);
}

/* SS2: Analyze output (pre) */
.actions.importActions pre#csvOut.csvOut{
  margin: 10px 0 0 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12.5px;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
  overflow: auto;
  max-height: 520px;
}

/* Subtle hover/focus polish (both) */
.actions.importActions textarea#csvText.csvText:focus,
.actions.importActions pre#csvOut.csvOut:focus,
.actions.importActions textarea#csvText.csvText:hover,
.actions.importActions pre#csvOut.csvOut:hover{
  border-color: rgba(93, 214, 255, .55);
  box-shadow:
    0 12px 30px rgba(0, 0, 0, .26),
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 0 2px rgba(93, 214, 255, .08);
}

/* Scoped scrollbars (WebKit) */
.actions.importActions textarea#csvText.csvText::-webkit-scrollbar,
.actions.importActions pre#csvOut.csvOut::-webkit-scrollbar{
  width: 10px;
  height: 10px;
}

.actions.importActions textarea#csvText.csvText::-webkit-scrollbar-thumb,
.actions.importActions pre#csvOut.csvOut::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.14);
  border-radius: 10px;
  border: 2px solid rgba(0,0,0,.25);
}

.actions.importActions textarea#csvText.csvText::-webkit-scrollbar-thumb:hover,
.actions.importActions pre#csvOut.csvOut::-webkit-scrollbar-thumb:hover{
  background: rgba(255,255,255,.22);
}

.actions.importActions textarea#csvText.csvText::-webkit-scrollbar-corner,
.actions.importActions pre#csvOut.csvOut::-webkit-scrollbar-corner{
  background: transparent;
}
/* === END FINAL BLOCK === */
/* === HOTFIX: SS1/SS2 selectors are NOT inside .actions.importActions === */
/* Put this at the VERY END of public/styles.css */

textarea#csvText.csvText{
  width:100%;
  box-sizing:border-box;
  min-height:140px;        /* was too flat before */
  max-height:220px;
  resize:vertical;
  white-space:pre;
  overflow:auto;
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size:12.5px;
  line-height:1.55;
  border:1px solid var(--line);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.12));
  color:var(--text);
  padding:12px 14px;
  box-shadow:0 10px 26px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06);
  outline:none;
  caret-color:var(--accent);
}

pre#csvOut.csvOut{
  width:100%;
  box-sizing:border-box;
  margin:10px 0 0 0;
  max-height:360px;        /* prevents SS2 from taking the whole page */
  overflow:auto;
  white-space:pre-wrap;
  word-break:break-word;
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size:12.5px;
  line-height:1.65;
  border:1px solid var(--line);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.12));
  color:var(--text);
  padding:12px 14px;
  box-shadow:0 10px 26px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06);
}

textarea#csvText.csvText:focus,
pre#csvOut.csvOut:hover,
pre#csvOut.csvOut:focus,
textarea#csvText.csvText:hover{
  border-color:rgba(93,214,255,.55);
  box-shadow:0 12px 30px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 2px rgba(93,214,255,.08);
}

/* Scrollbars (scoped) */
textarea#csvText.csvText::-webkit-scrollbar,
pre#csvOut.csvOut::-webkit-scrollbar{ width:10px; height:10px; }

textarea#csvText.csvText::-webkit-scrollbar-thumb,
pre#csvOut.csvOut::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.14);
  border-radius:10px;
  border:2px solid rgba(0,0,0,.25);
}
textarea#csvText.csvText::-webkit-scrollbar-thumb:hover,
pre#csvOut.csvOut::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.22); }
textarea#csvText.csvText::-webkit-scrollbar-corner,
pre#csvOut.csvOut::-webkit-scrollbar-corner{ background:transparent; }

/* ===================== CSV Modal v2 (csvModal2*) ===================== */
/* Put this at the VERY END of public/styles.css */

#csvModal2{
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(6px);
}

#csvModal2.hidden{ display:none !important; }

#csvModal2Card{
  position: relative;
  width: min(1280px, calc(100vw - 28px));
  height: min(72vh, 820px);
  min-width: 720px;
  min-height: 360px;

  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: 0 18px 60px rgba(0,0,0,.55);

  overflow: hidden; /* keeps header/body clean */
}

@media (max-width: 900px){
  #csvModal2Card{
    min-width: 0;
    width: calc(100vw - 24px);
    height: min(78vh, 900px);
  }
}

#csvModal2Header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  cursor: move;           /* important for the drag step */
  user-select: none;      /* prevents text selection while dragging */
}

#csvModal2Title{
  font-weight: 800;
  letter-spacing: .2px;
}

#csvModal2Close{
  appearance: none;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  border-radius: 10px;
  padding: 6px 10px;
  font-weight: 700;
  cursor: pointer;
}

#csvModal2Close:hover{
  border-color: rgba(93,214,255,.40);
  background: rgba(255,255,255,.08);
}

#csvModal2Body{
  height: calc(100% - 48px);
  overflow: auto;
  padding: 12px;
}

/* Make whatever is inside look like your “code blocks” */
#csvModal2Body pre,
#csvModal2Body code,
#csvModal2Body .modalbody{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  font-size: 12.75px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;

  color: rgba(255,255,255,.92);
  background: linear-gradient(180deg, rgba(0,0,0,.44), rgba(0,0,0,.26));
  border: 1px solid rgba(93,214,255,.18);
  border-radius: 14px;
  padding: 12px 14px;
}

/* Resize handle (visual only; JS comes next) */
#csvModal2Resize{
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 16px;
  height: 16px;
  opacity: .85;
  cursor: nwse-resize;

  border-right: 2px solid rgba(93,214,255,.55);
  border-bottom: 2px solid rgba(93,214,255,.55);
  border-radius: 2px;
}
#csvModal2Resize:hover{ opacity: 1; }
/* ==== CSV Import Bar: Selected file + hint (SS1/SS2) ==== */

.importLeft{
  display:flex;
  align-items:center;
  gap:12px;
}

/* Selected filename badge (right of Select File) */
.importLeft #csvFileName,
.importLeft .fileName,
.importLeft .fileHint,
.importLeft .selectedFile,
.importLeft .hint{
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(0,0,0,.18);
  color:var(--text);
  font-size:15px;
  font-weight:600;
  line-height:1;
}


/* optional: if you set text to "No file selected" */
#csvFileName.empty{
  opacity:.65;
  font-weight:500;
}

/* Hint text next to Analyze button */
.importRight{
  font-size:12px;
  color:var(--muted);
  opacity:.9;
  white-space:nowrap;
}

/* mobile: hide hint to keep UI clean */
@media (max-width: 980px){
  .importRight{ display:none; }
}
/* CSV: file name chip next to Select File */
#importLeft, .importLeft { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

#csvFileName{
  display:inline-flex;
  align-items:center;
  min-height:34px;              /* match .btn height */
  padding:0 14px;
  border-radius:999px;
  font-size:14px;               /* bigger */
  font-weight:600;
  letter-spacing:0.2px;
  color:var(--text);

  background: rgba(0,0,0,.18);
  border: 1px solid var(--line);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

#csvFileName.empty{
  opacity:.75;
  font-weight:500;
}

/* keep it readable even when long */
#csvFileName{
  max-width:520px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
/* Dark-mode scrollbars (CSV modal + table area) */
#csvModal2Body,
#csvModal2Body .tablewrap,
#csvModal2Card {
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: rgba(255,255,255,.35) rgba(0,0,0,.18);
}

/* Chrome/Edge/Safari */
#csvModal2Body::-webkit-scrollbar,
#csvModal2Body .tablewrap::-webkit-scrollbar,
#csvModal2Card::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

#csvModal2Body::-webkit-scrollbar-track,
#csvModal2Body .tablewrap::-webkit-scrollbar-track,
#csvModal2Card::-webkit-scrollbar-track {
  background: rgba(0,0,0,.18);
  border-radius: 999px;
}

#csvModal2Body::-webkit-scrollbar-thumb,
#csvModal2Body .tablewrap::-webkit-scrollbar-thumb,
#csvModal2Card::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.28);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
}

#csvModal2Body::-webkit-scrollbar-thumb:hover,
#csvModal2Body .tablewrap::-webkit-scrollbar-thumb:hover,
#csvModal2Card::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,.38);
}
/* SS2 Summary headline: make it a nice banner */
#csvAnalyzeStat{
  display: inline-flex;
  align-items: center;
  gap: 10px;

  margin: 10px 0 12px 0 !important;
  padding: 10px 14px;

  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;

  background: rgba(0,0,0,.22);
  box-shadow: 0 0 0 1px rgba(255,255,255,.05) inset;

  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .2px;
}

/* small "info dot" to the left */
#csvAnalyzeStat::before{
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(93,221,255,.9);
  box-shadow: 0 0 0 3px rgba(93,221,255,.12);
  flex: 0 0 auto;
}
/* ===== LAYOUT NORMALIZER (Header/Main/Footer gleiche Breite) ===== */
:root{
  --pageW: 1240px;      /* wenn du willst: später fein-tunen */
  --pagew: var(--pageW);
  --pagePad: 16px;      /* links/rechts Abstand zum Viewport */
}

/* gleiche Außenbreite + zentriert */
.topbar,
.topline,
.important,
.card,
.footerbar{
  width: min(var(--pageW), calc(100% - (var(--pagePad) * 2)));
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Footer als eigener “Container” */
.footerbar{
  margin-top: 12px;
  margin-bottom: 18px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: 0 12px 30px rgba(0,0,0,.30);
}

.footerInner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.footerLeft, .footerRight{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Appmeta im Footer etwas “sauberer” */
.footerLeft .appmeta{
  padding: 2px 0;
}
/* === Import Channels (CSV) row: clean layout override (VERTICAL recent list) === */
.actions.importActions.importCsvRow{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.actions.importActions.importCsvRow .importHead{
  flex: 0 0 100%;
  margin: 0 0 10px 0;
}

.actions.importActions.importCsvRow .importLeft{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}

.actions.importActions.importCsvRow .importMid{
  flex:1 1 auto;
  min-width:260px;
}

/* Recent CSVs badge: label + list stacked vertically */
.actions.importActions.importCsvRow .csvRecentWrap{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;

  /* override badge defaults */
  white-space:normal !important;
}

/* File list: one item per line */
.actions.importActions.importCsvRow .csvFileList{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;

  /* remove horizontal scroller */
  overflow:visible;
  max-width:100%;
  padding:0;
}

/* make any generated item behave like a line */
.actions.importActions.importCsvRow .csvFileList > *{
  display:block;
  white-space:nowrap;
  max-width:520px;
  overflow:hidden;
  text-overflow:ellipsis;
}

.actions.importActions.importCsvRow .importCenter{
  display:flex;
  align-items:center;
  gap:12px;
  flex:0 0 auto;
}

.actions.importActions.importCsvRow .csvHintBadge{
  white-space:nowrap;
}

/* Responsive fallback */
@media (max-width: 980px){
  .actions.importActions.importCsvRow{ flex-wrap:wrap; }
  .actions.importActions.importCsvRow .importMid{ min-width:100%; }
  .actions.importActions.importCsvRow .csvFileList > *{ max-width:100%; }
}

/* === DARK MODE: Switch/Toggles + Range sliders === */
.switch .slider{
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.14);
}
.switch .slider:before{
  background: rgba(233,242,255,.86);
  box-shadow: 0 2px 8px rgba(0,0,0,.45);
}
.switch input:checked + .slider{
  background: rgba(93,214,255,.18);
  border-color: rgba(93,214,255,.50);
}
.switch input:focus-visible + .slider{
  box-shadow: 0 0 0 3px rgba(93,214,255,.18);
}

/* Range slider (if any) */
input[type="range"]{
  background: transparent;
}
input[type="range"]::-webkit-slider-runnable-track{
  height: 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.14);
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -6px;
  border-radius: 50%;
  background: rgba(93,214,255,.90);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 2px 10px rgba(0,0,0,.45);
}
input[type="range"]::-moz-range-track{
  height: 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.14);
}
input[type="range"]::-moz-range-thumb{
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(93,214,255,.90);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 2px 10px rgba(0,0,0,.45);
}

/* === DARK MODE: Results table scrollbars (SS2) === */
.tablewrap{
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: rgba(255,255,255,.28) rgba(0,0,0,.18);
}

/* Chrome/Edge/Safari */
.tablewrap::-webkit-scrollbar{ width:12px; height:12px; }
.tablewrap::-webkit-scrollbar-track{
  background: rgba(0,0,0,.18);
  border-radius: 999px;
}
.tablewrap::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.24);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
}
.tablewrap::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.34); }
.tablewrap::-webkit-scrollbar-corner{ background: transparent; }
/* IMPORTANT: force visible depth (override any earlier rules) */
.important{
  position: relative;
  z-index: 1;

  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.12));

  box-shadow: 0 18px 55px rgba(0,0,0,.55);
}

/* === Import Channels: outer background + inner platform (like Search Criteria) === */

/* Row stays layout-only (NO card background here) */
.actions.importActions.importCsvRow{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}

/* Outer wrapper card: remove padding so inner platform can "float" inset */
.card.importCard{
  padding: 0 !important;
  width: min(var(--pageW), calc(100% - (var(--pagePad) * 2))) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* Inner platform: this is the actual "card" you want */
.card.importCard .importPanel{
  margin: calc(var(--pagePad) + 14px);        /* controls the visible inset + makes it narrower */
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:16px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: 0 18px 55px rgba(0,0,0,.55);

/* Import Channels: make the CSV analyze panel look like an inner platform */
.card.importCard #csvAnalyzePanelHome,
.card.importCard #csvAnalyzePanel{
  margin: calc(var(--pagePad) + 14px) !important;
  padding: 14px 16px !important;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: 0 18px 55px rgba(0,0,0,.55);
}

}

/* === Results: outer background + inner platform (like Import Channels) === */
.card.resultsCard{
  padding:0 !important;
}

.card.resultsCard .resultsPanel{
  margin: calc(var(--pagePad) + 14px);
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: 0 18px 55px rgba(0,0,0,.55);
}

/* === Auth Container (legacy - for other pages) === */
.authContainer {
  position: fixed;
  top: 12px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 1000;
  padding: 8px 14px;
  border-radius: 24px;
  background: rgba(10, 17, 31, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
}

#userInfo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.userAvatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--accent);
}

.userName {
  font-size: 13px;
  color: var(--text);
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#loginBtn, #logoutBtn {
  font-size: 12px;
  padding: 6px 14px;
}

/* === Landing Page === */
.landingCard {
  text-align: center;
  padding: 60px 40px !important;
}

.landingContent {
  max-width: 500px;
  margin: 0 auto;
}

.landingSubtitle {
  color: var(--muted);
  font-size: 16px;
  margin-bottom: 40px;
  line-height: 1.6;
}

.landingAuthBox {
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}

.loginBtnLarge {
  font-size: 18px !important;
  padding: 16px 40px !important;
  border-radius: 12px !important;
}

.landingHint {
  color: var(--muted);
  font-size: 13px;
  margin-top: 16px;
  margin-bottom: 0;
}

/* === Auth Status Card (logged in) === */
.authStatusCard {
  padding: 16px 20px !important;
}

.authStatusInner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.userInfoBox {
  display: flex;
  align-items: center;
  gap: 14px;
}

.userAvatarLarge {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 3px solid var(--accent);
}

.userDetails {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.userNameLarge {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.userEmail {
  font-size: 13px;
  color: var(--muted);
}

.authActions {
  display: flex;
  align-items: center;
  gap: 10px;
}