/* Phoenix Edge Logbook — V2 Premium Theme (offline/PWA-ready)
 * Design goals:
 * - Phoenix ecosystem alignment (ember primary, neon-cyan secondary)
 * - Premium, cinematic-but-clean UI (no clutter)
 * - High contrast, accessibility-aware, fast to render
 */

:root{
  --bg0:#07070a;
  --bg1:#0b0b0f;
  --surface:#111118;
  --surface2:#0d0d13;
  --border:rgba(255,255,255,.08);
  --border2:rgba(255,255,255,.12);

  --text:#e5e7eb;
  --muted:#9ca3af;
  --muted2:#94a3b8;

  --ember1:#ff5a1f;
  --ember2:#ff7a2f;
  --cyan:#00e5ff;
  --emerald:#00c896;
  --red:#b33939;
  --gold:#fbbf24;

  --r:16px;
  --r2:12px;
  --shadow:0 14px 44px rgba(0,0,0,.55);
  --glow-ember:0 0 26px rgba(255,90,31,.22);
  --glow-cyan:0 0 26px rgba(0,229,255,.16);
  --glow-emerald:0 0 26px rgba(0,200,150,.18);
}

/* Base */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial,
    "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 10% -10%, rgba(255,90,31,.16), transparent 60%),
    radial-gradient(1000px 600px at 90% 0%, rgba(0,229,255,.12), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}

.hidden{ display:none !important; }
.emerald{ color:var(--emerald); }

/* Layout */
main{ max-width:1240px; margin:0 auto; padding: 10px 16px 44px; }

/* Top bar (brand) */
.topbar{
  max-width:1240px;
  margin: 14px auto 0;
  padding: 14px 16px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}

.brand{
  position:relative;
  padding: 8px 0;
}
.brandTitle{
  font-weight: 800;
  letter-spacing: .08em;
  font-size: 14px;
  text-transform: uppercase;
  background: linear-gradient(90deg, #fff, rgba(255,255,255,.78));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.brandSub{
  margin-top: 4px;
  color: rgba(255,255,255,.72);
  font-size: 12px;
  letter-spacing: .06em;
}
.brandHint{
  margin-top: 10px;
  color: rgba(148,163,184,.92);
  font-size: 12px;
}
.brand::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width: 340px;
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(255,90,31,.92), rgba(0,229,255,.88), transparent);
  filter: drop-shadow(0 0 10px rgba(255,90,31,.35));
  opacity: .9;
}

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

/* Toggle */
.toggle{ color: rgba(226,232,240,.92); font-size: 13px; display:inline-flex; gap:10px; align-items:center; }
.toggle input{ accent-color: var(--cyan); }

/* Cards / Grid */
.grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:16px; }
@media (max-width: 1024px){ .grid{ grid-template-columns: 1fr; } .brand::after{ width: 220px; } }

.card{
  background: linear-gradient(180deg, rgba(17,17,24,.98), rgba(9,9,14,.92));
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 16px;
  box-shadow: var(--shadow);
}


/* Accordion (Data & Backups) */
.card.spanAll{ grid-column: 1 / -1; }

.card.accordion{
  padding: 0;
  overflow: hidden;
}

.accordionHeader{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  background: transparent;
  border: 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.accordionHeader:hover{
  background: rgba(255,255,255,.025);
}

.accordionHeaderText{ display:flex; flex-direction:column; gap:4px; }
.accordionTitle{ font-weight: 700; letter-spacing: .5px; }
.accordionHint{ color: var(--muted); font-size: 12px; }

.accordionChevron{
  font-size: 16px;
  color: rgba(255,255,255,.75);
  transition: transform .18s ease;
}

.card.accordion.open .accordionChevron{ transform: rotate(180deg); }

.accordionContent{
  border-top: 1px solid var(--border);
  padding: 14px 16px 16px;
}

.card h3{
  margin:0 0 12px;
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: none;
  color: rgba(255,255,255,.90);
}

/* Forms */
.formrow{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-bottom: 10px; }
.formrow .full{ grid-column:1 / -1; }
@media (max-width: 900px){ .formrow{ grid-template-columns: 1fr; } }

label{ display:flex; flex-direction:column; gap:6px; color: rgba(148,163,184,.92); font-size: 12px; }
/* Prevent long labels (e.g., Target / {Horizon} mo) from wrapping and breaking alignment */
.labelText{ white-space: nowrap; display:block; }
input[type="text"], input[type="number"], input[type="date"], select, textarea{
  background: rgba(11,11,15,.78);
  color: var(--text);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  padding: 10px 12px;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
textarea{ resize:vertical; }
input:focus, select:focus, textarea:focus{
  border-color: rgba(255,90,31,.46);
  box-shadow: var(--glow-ember);
}
input[type="date"]{ min-width: 160px; letter-spacing: .02em; color-scheme: dark; }

/* Buttons */
button{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(11,11,15,.72);
  color: rgba(255,255,255,.92);
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
button:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.20); background: rgba(16,16,24,.82); }
button:active{ transform: translateY(0px); }

button.primary{
  background: linear-gradient(90deg, rgba(255,90,31,.92), rgba(255,122,47,.92));
  border-color: rgba(255,90,31,.35);
  box-shadow: var(--glow-ember);
}
button.primary:hover{ box-shadow: 0 0 30px rgba(255,90,31,.28); }

button.success{
  background: linear-gradient(90deg, rgba(0,200,150,.88), rgba(0,229,255,.38));
  border-color: rgba(0,200,150,.28);
  box-shadow: var(--glow-emerald);
}

button.ghost{ background: rgba(11,11,15,.62); }

.btnrow{ display:flex; flex-wrap:wrap; gap:10px; }

.filelike{
  display:inline-flex; align-items:center; gap:8px;
  cursor:pointer;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  padding: 10px 12px;
  background: rgba(11,11,15,.62);
  color: rgba(255,255,255,.92);
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
.filelike:hover{ transform: translateY(-1px); background: rgba(16,16,24,.82); border-color: rgba(255,255,255,.20); }
.filelike input[type="file"]{ display:none; }

/* Metrics (in-grid card) */
.metricGrid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
@media (max-width: 900px){ .metricGrid{ grid-template-columns: 1fr; } }

.metric{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: radial-gradient(900px 120px at 30% 0%, rgba(255,90,31,.12), transparent 60%), rgba(0,0,0,.12);
  padding: 10px 12px;
  min-width: 0;
  overflow: hidden;
}


.metric .k{ color: rgba(148,163,184,.92); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.metric .v{
display: block;
max-width: 100%;
text-align: center;
font-weight: 800;
line-height: 1.05;
font-variant-numeric: tabular-nums;
/* Analytics-first: keep full value visible */
white-space: nowrap;
overflow: hidden;
/* No ellipsis — we scale instead */
text-overflow: clip;
/* Scale down for long values */
font-size: clamp(10px, 1.7vw, 24px);
letter-spacing: -0.03em;
}

.metricFoot{ margin-top: 10px; color: rgba(148,163,184,.86); font-size: 12px; }

/* Charts */
.charts{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; margin-top:16px; }
@media (max-width:1024px){ .charts{ grid-template-columns: 1fr; } }
.chartWrap{ position:relative; }
svg{ width:100%; height:260px; background: rgba(9,9,14,.72); border-radius: 14px; border:1px solid rgba(255,255,255,.08); }

.tooltip{
  position:absolute;
  min-width: 160px;
  max-width: 280px;
  padding: 6px 10px;
  font-size: 12px;
  color: rgba(226,232,240,.96);
  background: rgba(11,18,32,.88);
  border: 1px solid rgba(0,229,255,.18);
  border-radius: 10px;
  pointer-events:none;
  opacity: .96;
  box-shadow: 0 10px 24px rgba(0,0,0,.55);
  z-index:50;
}

/* Calendar */
.calendar{ margin-top: 16px; }
.calHeader{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 8px; }
.weekdayRow{ display:grid; grid-template-columns: repeat(7,1fr); gap:8px; margin-bottom:8px; color: rgba(148,163,184,.92); font-size: 12px; }
.weekdayRow > div{ text-align:center; }
.calGrid{ display:grid; grid-template-columns: repeat(7,1fr); gap:8px; }

.day{
  min-height: 110px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  padding: 8px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  cursor:pointer;
  transition: transform .14s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.day:hover{ transform: translateY(-1px); background: rgba(255,255,255,.06); box-shadow: 0 0 18px rgba(255,255,255,.06); }

/* Phoenix entry styling */
.day.hasEntry{
  background:
    radial-gradient(800px 140px at 20% 0%, rgba(0,200,150,.12), transparent 55%),
    rgba(255,255,255,.04);
  border-color: rgba(0,200,150,.28);
  box-shadow: var(--glow-emerald);
}

.day.today{ outline: 2px solid rgba(0,229,255,.85); outline-offset: 2px; box-shadow: var(--glow-cyan); }
.day.empty{ opacity: .45; pointer-events: auto; }

.date{ color: rgba(148,163,184,.92); font-size: 12px; display:flex; align-items:center; justify-content:space-between; }

.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0,229,255,.10);
  color: rgba(0,229,255,.88);
  font-size: 11px;
  border: 1px solid rgba(0,229,255,.18);
}

.profit{ font-weight: 800; letter-spacing: .02em; color: rgba(156,163,175,.92); }
.profit.pos{ color: var(--gold); text-shadow: 0 0 18px rgba(255,122,47,.18); }
.profit.neg{ color: rgba(179,57,57,.95); text-shadow: 0 0 16px rgba(179,57,57,.18); }
.trades{ font-size: 11px; color: rgba(226,232,240,.92); }

/* Dialog */
dialog{
  background: rgba(11,11,15,.96);
  color: var(--text);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 16px;
  box-shadow: var(--shadow);
}
dialog::backdrop{ background: rgba(0,0,0,.6); }
dialog h3{ margin:0 0 12px; }
dialog menu{ display:flex; gap:8px; justify-content:flex-end; margin-top: 10px; padding: 0; }

/* Footer */
.siteFoot{
  max-width:1240px;
  margin: 22px auto;
  padding: 0 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  color: rgba(156,163,175,.92);
  font-size: 12px;
}


/* ---------- Segmented control (Calendar / Heatmap) ---------- */
.seg{
  display:inline-flex;
  background: rgba(0,0,0,.25);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px;
  gap: 4px;
  align-items:center;
}
.segBtn{
  appearance:none;
  border: 0;
  background: transparent;
  color: rgba(226,232,240,.86);
  font-weight: 700;
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease, color .15s ease;
}
.segBtn:hover{ transform: translateY(-1px); }
.segBtn.active{
  color: #0b0b0f;
  background: linear-gradient(90deg, rgba(255,90,31,.95), rgba(255,122,47,.95));
  box-shadow: 0 0 18px rgba(255,90,31,.25);
}

/* ---------- Toggle switch (Phoenix style) ---------- */
.toggle{ user-select:none; }
.toggle input{ position:absolute; opacity:0; width:1px; height:1px; }
.toggle span{
  width: 44px;
  height: 24px;
  display:inline-block;
  border-radius: 999px;
  background: rgba(148,163,184,.18);
  border: 1px solid rgba(148,163,184,.25);
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
  transition: background .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.toggle span::after{
  content:"";
  position:absolute;
  width: 18px; height: 18px;
  border-radius: 999px;
  top: 2px; left: 3px;
  background: rgba(226,232,240,.9);
  box-shadow: 0 2px 10px rgba(0,0,0,.45);
  transition: transform .18s ease, background .18s ease;
}
.toggle input:checked + span{
  background: rgba(0,229,255,.18);
  border-color: rgba(0,229,255,.35);
  box-shadow: 0 0 18px rgba(0,229,255,.18), inset 0 0 0 1px rgba(0,0,0,.22);
}
.toggle input:checked + span::after{
  transform: translateX(19px);
  background: #00e5ff;
}
.toggle.saturday{ gap:12px; font-weight: 700; }
.toggle.saturday{ padding: 8px 10px; border-radius: 12px; border: 1px solid rgba(148,163,184,.12); background: rgba(0,0,0,.12); }
.toggle.saturday:hover{ border-color: rgba(0,229,255,.18); box-shadow: 0 0 20px rgba(0,229,255,.08); }

/* ---------- Snapshot hierarchy ---------- */
.metrics .metricGrid .metric.hero{
  border-color: rgba(255,90,31,.22);
  box-shadow: 0 0 22px rgba(255,90,31,.10);
}
.metrics .metricGrid .metric.hero .v{
display: block;
max-width: 100%;
text-align: center;
font-weight: 900;
line-height: 1.05;
font-variant-numeric: tabular-nums;
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
/* Hero tiles can get very large values — allow more shrink */
font-size: clamp(10px, 1.7vw, 24px);
letter-spacing: -0.03em;
}

.metrics .metricGrid .metric.hero .k{ color: rgba(255,165,120,.85); }

/* ---------- Month summary strip ---------- */
.monthSummary{
  margin: 10px 0 14px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.12);
  background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.10));
  color: rgba(226,232,240,.86);
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items:center;
  font-size: 13px;
}
.monthSummary .pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.14);
  background: rgba(0,0,0,.18);
}
.monthSummary .pill strong{ color: rgba(226,232,240,.95); font-weight: 800; }
.monthSummary .pill.pos{ border-color: rgba(255,90,31,.22); box-shadow: 0 0 18px rgba(255,90,31,.10); }
.monthSummary .pill.neg{ border-color: rgba(179,57,57,.22); box-shadow: 0 0 18px rgba(179,57,57,.10); }

/* ---------- Heatmap mode ---------- */
.calGrid.heatmap .day{
  cursor: pointer;
}
.calGrid.heatmap .day .badge,
.calGrid.heatmap .day .trades{
  display:none;
}
.calGrid.heatmap .day .profit{
  display:none;
}
.day.hm-pos-1{ background: linear-gradient(180deg, rgba(31,122,110,.20), rgba(0,0,0,.0)); border-color: rgba(31,122,110,.30); }
.day.hm-pos-2{ background: linear-gradient(180deg, rgba(31,191,165,.22), rgba(0,0,0,.0)); border-color: rgba(31,191,165,.32); }
.day.hm-pos-3{ background: linear-gradient(180deg, rgba(31,191,165,.30), rgba(0,0,0,.0)); border-color: rgba(31,191,165,.40); }
.day.hm-pos-4{ background: linear-gradient(180deg, rgba(0,255,209,.32), rgba(0,0,0,.0)); border-color: rgba(0,255,209,.44); box-shadow: 0 0 18px rgba(0,255,209,.10); }
.day.hm-pos-5{ background: linear-gradient(180deg, rgba(0,255,209,.45), rgba(0,0,0,.0)); border-color: rgba(0,255,209,.58); box-shadow: 0 0 24px rgba(0,255,209,.14); }

.day.hm-neg-1{ background: linear-gradient(180deg, rgba(122,31,31,.20), rgba(0,0,0,.0)); border-color: rgba(122,31,31,.30); }
.day.hm-neg-2{ background: linear-gradient(180deg, rgba(191,48,48,.24), rgba(0,0,0,.0)); border-color: rgba(191,48,48,.34); }
.day.hm-neg-3{ background: linear-gradient(180deg, rgba(191,48,48,.32), rgba(0,0,0,.0)); border-color: rgba(191,48,48,.42); }
.day.hm-neg-4{ background: linear-gradient(180deg, rgba(255,46,46,.34), rgba(0,0,0,.0)); border-color: rgba(255,46,46,.46); box-shadow: 0 0 18px rgba(255,46,46,.10); }
.day.hm-neg-5{ background: linear-gradient(180deg, rgba(255,46,46,.48), rgba(0,0,0,.0)); border-color: rgba(255,46,46,.60); box-shadow: 0 0 24px rgba(255,46,46,.14); }

/* ---------- Print (PDF export via browser "Save as PDF") ---------- */
@media print{
  body{ background:#fff !important; color:#000 !important; }
  header.topbar, .topActions, .seg, #entryDialog, footer{ display:none !important; }
  .card{ box-shadow:none !important; border:1px solid #ddd !important; background:#fff !important; }
  .charts{ page-break-inside: avoid; }
  .calendar{ page-break-before: always; }
}


/* Profiles */
.profileBar{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  background: rgba(11,11,15,.55);
  box-shadow: inset 0 0 0 1px rgba(255,90,31,.06);
}
.profileBar select{
  min-width: 220px;
  background: rgba(11,11,15,.62);
}
@media (max-width: 780px){
  .profileBar select{ min-width: 160px; }
}

/* Profiles dialog layout */
.dialogGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 760px){
  .dialogGrid{ grid-template-columns: 1fr; }
}
.dialogCard{
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 12px;
  background: rgba(11,11,15,.72);
}
.dialogTitle{
  font-weight: 700;
  letter-spacing: .02em;
  margin-bottom: 10px;
}
.dialogLabel{
  display:block;
  margin: 10px 0 6px;
  font-size: 12px;
  color: rgba(226,232,240,.88);
}
.dialogActions{
  display:flex;
  gap: 10px;
  justify-content:flex-end;
  margin-top: 12px;
  flex-wrap: wrap;
}
.rowBetween{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.currentProfileName{ font-size: 14px; font-weight: 700; margin-top: 2px; }
.mutedTiny{ font-size: 11px; color: rgba(156,163,175,.92); }
button.danger{
  border-color: rgba(255, 86, 86, .35);
  box-shadow: 0 0 16px rgba(255, 86, 86, .18);
}
button.danger:hover{
  box-shadow: 0 0 24px rgba(255, 86, 86, .22);
}


/* ----------------------------
   Profiles Modal (premium)
----------------------------- */
dialog.modal{
  border: none;
  padding: 0;
  background: transparent;
  max-width: min(720px, calc(100vw - 24px));
  width: 720px;
  color: inherit;
}
dialog.modal::backdrop{
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
}
.modalCard{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(20,20,28,.92), rgba(10,10,14,.92));
  box-shadow: 0 18px 60px rgba(0,0,0,.65);
  padding: 18px 18px 16px;
}
.modalHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 16px;
  margin-bottom: 10px;
}
.modalTitle{ font-size: 16px; font-weight: 700; letter-spacing: .5px; }
.modalSub{ font-size: 12px; opacity: .75; margin-top: 4px; }
.modalSection{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.modalSection.danger{ border-top-color: rgba(255, 91, 91, .18); }
.labelStrong{ font-weight: 650; font-size: 12px; opacity: .9; margin-bottom: 10px; }
.hint{ font-size: 12px; opacity: .7; margin-top: 4px; }
.rowBetween{ display:flex; align-items:center; justify-content:space-between; gap: 12px; }
.pill{
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  font-size: 12px;
  white-space: nowrap;
}
button.small{ padding: 8px 10px; font-size: 12px; }
.dangerBtn{
  background: rgba(255, 91, 91, .12);
  border: 1px solid rgba(255, 91, 91, .35);
  color: #ffd6d6;
}
.dangerBtn:hover{ filter: brightness(1.08); }


/* =========================================================
   Phoenix Edge — Legal Footer + Terms Modal + Brand Logo
   ========================================================= */

/* Option B: assertive (paid-product) footer */
.siteFoot{
  color: rgba(226,232,240,.88);
  letter-spacing: .02em;
}
.siteFoot .left{ opacity: .92; }
.siteFoot .right{ display:flex; align-items:center; gap:10px; }
.siteFoot a{
  color: rgba(56,189,248,.92);
  text-decoration: none;
  font-weight: 700;
}
.siteFoot a:hover{
  text-decoration: underline;
}
.siteFoot .sig{
  color: rgba(251,146,60,.92);
  font-weight: 800;
}

/* Brand logo */
.brandLogo{
  height: 52px;
  width: auto;
  display:block;
  margin-bottom: 10px;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.45));
}

/* Terms dialog */
.termsDialog::backdrop{
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(6px);
}
.termsDialog{
  width: min(860px, calc(100vw - 24px));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 0;
  background: rgba(10,10,16,.92);
  color: rgba(226,232,240,.92);
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
}
.termsForm{ padding: 16px 16px 14px; }
.termsHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 8px 6px 10px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.termsHead h3{
  margin: 0;
  font-size: 16px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.iconBtn{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(226,232,240,.92);
  border-radius: 10px;
  padding: 8px 10px;
  cursor:pointer;
}
.iconBtn:hover{
  background: rgba(255,255,255,.10);
}
.termsBody{
  padding: 14px 6px 10px;
  max-height: min(62vh, 520px);
  overflow:auto;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(226,232,240,.88);
}
.termsBody h4{
  margin: 14px 0 6px;
  font-size: 13px;
  letter-spacing: .02em;
  color: rgba(251,146,60,.92);
}
.termsBody ul{
  margin: 8px 0 10px 18px;
}
.termsBody a{
  color: rgba(56,189,248,.92);
}
.termsActions{
  display:flex;
  justify-content:flex-end;
  padding: 12px 6px 2px;
  border-top: 1px solid rgba(255,255,255,.10);
}


/* =========================
   Invite-only Auth Overlay
   ========================= */
.authOverlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(6px);
}
.authOverlay.show{ display:flex; }
.authCard{
  width: min(720px, 100%);
  border-radius: 18px;
  border: 1px solid rgba(255,80,80,.28);
  background: linear-gradient(180deg, rgba(20,20,26,.92), rgba(10,10,14,.92));
  box-shadow: 0 0 0 1px rgba(255,80,80,.15), 0 24px 80px rgba(0,0,0,.55);
  padding: 22px;
}
.authTitle{
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 14px;
}
.authSub{
  margin-top: 6px;
  opacity: .85;
  font-size: 13px;
}
.authRow{
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}
#authEmail{
  width: 100%;
  border-radius: 12px;
  padding: 12px 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.28);
  color: inherit;
  outline: none;
}
#authEmail:focus{
  border-color: rgba(0,255,209,.35);
  box-shadow: 0 0 0 3px rgba(0,255,209,.08);
}
.authStatus{
  margin-top: 12px;
  font-size: 12px;
  opacity: .9;
}
.authFinePrint{
  margin-top: 10px;
  font-size: 12px;
  opacity: .75;
}

/* =========================
   Terms Modal
   ========================= */
.termsModal{
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(6px);
}
.termsModal.show{ display:flex; }
.termsCard{
  width: min(860px, 100%);
  max-height: min(82vh, 860px);
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(0,255,209,.22);
  background: linear-gradient(180deg, rgba(18,18,24,.96), rgba(10,10,14,.96));
  box-shadow: 0 0 0 1px rgba(0,255,209,.10), 0 24px 80px rgba(0,0,0,.55);
}
.termsHeader{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.termsTitle{
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 13px;
}
.termsBody{
  padding: 14px 16px 18px;
  overflow: auto;
  font-size: 13px;
  line-height: 1.45;
}
.termsBody p{ margin: 0 0 10px; }

/* =========================
   Footer (single, assertive)
   ========================= */
.legal-footer{
  margin-top: 22px;
  padding: 14px 16px;
  border-top: 1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  color: rgba(255,255,255,.78);
  font-size: 12px;
  background: rgba(0,0,0,.18);
}
.legal-footer a{
  color: inherit;
  text-decoration: none;
}

.legal-footer a:hover{ text-decoration: underline; }
.buildSig{ color: inherit; font-weight: 700; }



/* Cloud sync indicator (Option C) */
.cloud-indicator{
  display:flex;
  align-items:center;
  gap:8px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  user-select:none;
  white-space:nowrap;
}
.cloud-indicator .dot{
  width:10px;
  height:10px;
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(0,0,0,.25);
  background: rgba(255,255,255,.25);
}
.cloud-indicator .label{
  font-size: 12px;
  opacity: .85;
  letter-spacing: .04em;
}
.cloud-indicator.off .dot{ background: rgba(255,255,255,.25); }
.cloud-indicator.locked .dot{ background: rgba(255,170,0,.85); box-shadow: 0 0 14px rgba(255,170,0,.35); }
.cloud-indicator.syncing .dot{ background: rgba(0,200,255,.95); box-shadow: 0 0 16px rgba(0,200,255,.35); }
.cloud-indicator.ok .dot{ background: rgba(34,197,94,.95); box-shadow: 0 0 16px rgba(34,197,94,.35); }
.cloud-indicator.error .dot{ background: rgba(239,68,68,.95); box-shadow: 0 0 16px rgba(239,68,68,.35); }