/* ── Reset & Base ─────────────────────────────────── */
*{box-sizing:border-box;}
body{background:#0a0a0f;background-image:radial-gradient(ellipse at top, #0f0a1e 0%, #0a0a0f 60%);background-attachment:fixed;color:#fff;font-family:'Inter',system-ui,-apple-system,sans-serif;margin:0;overflow-x:hidden;max-width:100vw;}
.screen{display:none;min-height:100vh;overflow-x:hidden;}
.screen.active{display:block !important;animation:fadeIn .15s ease;}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}}

/* ── Gradient utilities ───────────────────────────── */
.grad-text{background:linear-gradient(90deg,#22d3ee,#8b5cf6,#ec4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.grad-bg{background:linear-gradient(135deg,#22d3ee,#8b5cf6,#ec4899);}

/* ── Scrollbar ────────────────────────────────────── */
::-webkit-scrollbar{width:4px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:4px;}

/* ── Spinner ──────────────────────────────────────── */
.spinner{display:inline-block;width:18px;height:18px;border:2px solid rgba(255,255,255,.2);border-top-color:#8b5cf6;border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle;}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Loading screen ───────────────────────────────── */
.loading-screen{position:fixed;inset:0;background:#0a0a0f;display:flex;align-items:center;justify-content:center;z-index:999;flex-direction:column;gap:16px;}

/* ── Toast ────────────────────────────────────────── */
#toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);background:#1e1e30;border:1px solid rgba(139,92,246,.4);color:#fff;padding:10px 20px;border-radius:12px;font-size:13px;z-index:999999;opacity:0;transition:opacity .3s;pointer-events:none;white-space:nowrap;}
#toast.show{opacity:1;}
#toast.error{border-color:rgba(239,68,68,.5);background:#2a1010;}

/* ── Feedback boxes ───────────────────────────────── */
.err-box{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);border-radius:10px;padding:10px 14px;font-size:13px;color:#f87171;margin-bottom:14px;display:none;}
.suc-box{background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.3);border-radius:10px;padding:10px 14px;font-size:13px;color:#34d399;margin-bottom:14px;display:none;}

/* ── Mobile fixes ─────────────────────────────────── */
@media (max-width: 768px) {
  /* Landing: stack hero + table */
  #screen-landing [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  /* Landing: 3-col cards → 1 col */
  #screen-landing [style*="repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
  }
  /* Landing: stats 4-col → 2 col */
  #screen-landing [style*="repeat(4,1fr)"] {
    grid-template-columns: repeat(2,1fr) !important;
  }
  /* Landing: stats+CTA side by side → stack */
  #screen-landing [style*="1fr auto"] {
    grid-template-columns: 1fr !important;
  }
  /* Landing nav: hide login text, keep signup */
  #screen-landing .btn-ghost { font-size: 11px !important; padding: 4px 8px !important; }

  /* Profile: stat grid → 2 col */
  #screen-my-profile [style*="repeat(4,1fr)"],
  #screen-creator-dashboard [style*="repeat(3,1fr)"] {
    grid-template-columns: repeat(2,1fr) !important;
  }

  /* Founding creator: 3 col → 1 col */
  #screen-founding-creator [style*="repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* Subscription plans: 2 col → 1 col */
  #screen-subscription-plans [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Itinerary grid: 2 col minimum */
  .itin-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* Top nav: tighter */
  #top-nav { padding: 0 12px !important; }
  #top-nav span[style*="letter-spacing"] { font-size: 16px !important; }

  /* Bottom nav: slightly taller for touch */
  #bottom-nav { height: 62px !important; }

  /* Feed card: tighter social buttons */
  .feed-item h3 { font-size: 14px !important; }
  .feed-item [style*="width:44px;height:44px;border-radius:50%"] { width: 38px !important; height: 38px !important; }
  .feed-item [style*="width:80px;height:120px"] { width: 60px !important; height: 90px !important; }
  .feed-info { bottom: 110px !important; }
  .feed-item p { font-size: 11px !important; -webkit-line-clamp: 1 !important; }
  .feed-item [style*="margin-bottom:8px"] { margin-bottom: 4px !important; }

  /* Settings/profile: full width cards */
  .card { border-radius: 12px !important; }

  /* AI curator: tighter padding */
  #screen-ai-curator > div { padding-left: 14px !important; padding-right: 14px !important; }

  /* AI learning: stats 4 col → 2 col */
  #screen-ai-learning [style*="repeat(4,1fr)"] {
    grid-template-columns: repeat(2,1fr) !important;
  }

  /* Onboarding: interest grid → 2 col */
  #ob-interests {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Creator dashboard: referral + new itin buttons stack */
  #screen-creator-dashboard [style*="display:flex;gap:8px"] {
    flex-direction: column !important;
  }

  /* Toast: don't overflow */
  #toast { max-width: 90vw; white-space: normal !important; text-align: center; }

  /* Explore: category pills scroll */
  #cat-pills { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; }
  #cat-pills::-webkit-scrollbar { display: none; }

  /* Stop card: stack image + text */
  .stop-card-img { width: 100% !important; height: 180px !important; }
}

@media (max-width: 400px) {
  /* Very small screens */
  .itin-grid { grid-template-columns: 1fr !important; }
  #screen-landing h1 { font-size: 24px !important; }
  .btn-primary { font-size: 13px !important; padding: 10px 18px !important; }
  .btn-outline { font-size: 12px !important; padding: 9px 14px !important; }
}

@media (max-width: 430px) {
  /* iPhone Pro Max and similar */
  .feed-item [style*="gap:14px"] { gap: 10px !important; }
  .feed-item [style*="bottom:130px"] { bottom: 140px !important; }
  .feed-info { bottom: 115px !important; }
  .feed-item .tag { font-size: 10px !important; padding: 2px 7px !important; }
  .feed-item [style*="gap:10px;align-items:center;flex-wrap"] { gap: 6px !important; }
}

/* ── Light mode ───────────────────────────────────── */
body.light-mode {
  background: #f5f5f7 !important;
  background-image: none !important;
  color: #1a1a2e !important;
}
body.light-mode .card,
body.light-mode .glass,
body.light-mode .stat-card,
body.light-mode .itin-card {
  background: #fff !important;
  border-color: rgba(0,0,0,.08) !important;
  color: #1a1a2e !important;
}
body.light-mode .inp {
  background: rgba(0,0,0,.04) !important;
  border-color: rgba(0,0,0,.12) !important;
  color: #1a1a2e !important;
}
body.light-mode .inp::placeholder { color: rgba(0,0,0,.35) !important; }
body.light-mode #top-nav,
body.light-mode #bottom-nav {
  background: rgba(245,245,247,.97) !important;
  border-color: rgba(0,0,0,.08) !important;
}
body.light-mode .nav-tab { color: rgba(0,0,0,.4) !important; }
body.light-mode .nav-tab.active { color: #8b5cf6 !important; }
body.light-mode #toast { background: #fff !important; color: #1a1a2e !important; border-color: rgba(139,92,246,.3) !important; }
body.light-mode .btn-ghost { color: rgba(0,0,0,.6) !important; }
body.light-mode .btn-ghost:hover { background: rgba(0,0,0,.06) !important; }
body.light-mode .cat-pill { background: rgba(0,0,0,.04) !important; border-color: rgba(0,0,0,.12) !important; color: #1a1a2e !important; }
body.light-mode .cat-pill.active { background: rgba(139,92,246,.12) !important; border-color: #8b5cf6 !important; color: #8b5cf6 !important; }
body.light-mode p, body.light-mode span, body.light-mode label,
body.light-mode h1, body.light-mode h2, body.light-mode h3,
body.light-mode div, body.light-mode button, body.light-mode a {
  color: inherit !important;
}
body.light-mode #screen-landing, body.light-mode #screen-landing * { color: #fff !important; }
body.light-mode #screen-landing .btn-primary { color: #fff !important; }
body.light-mode .grad-text {
  -webkit-text-fill-color: transparent !important;
}
body.light-mode .btn-primary {
  color: #fff !important;
}
body.light-mode .tag-free { color: #0891b2 !important; }
body.light-mode .tag-paid { color: #7c3aed !important; }
body.light-mode .tag-cat { color: #db2777 !important; }
body.light-mode .feed-item, body.light-mode .feed-item * { color: #fff !important; }
body.light-mode #notif-badge { color: #fff !important; }
body.light-mode .screen.active { background: #f5f5f7; }

body.light-mode #trending-locs p { color: #fff !important; }
body.light-mode #screen-contact select.inp { color: #1a1a2e !important; background: rgba(0,0,0,.04) !important; }
body.light-mode #screen-contact select.inp option { color: #1a1a2e; background: #fff; }
body.light-mode #screen-contact { background: #f5f5f7 !important; }
body.light-mode #screen-contact * { color: #1a1a2e !important; }
body.light-mode #screen-contact .card { background: #fff !important; }
body.light-mode #screen-contact .inp { background: rgba(0,0,0,.04) !important; color: #1a1a2e !important; border-color: rgba(0,0,0,.15) !important; }
body.light-mode #screen-contact .btn-primary { color: #fff !important; }
body.light-mode #screen-contact p { color: rgba(0,0,0,.5) !important; }
body.light-mode #screen-contact a { color: #8b5cf6 !important; }
body.light-mode #screen-settings { background: #f5f5f7 !important; }
body.light-mode #screen-admin-tickets { background: #f5f5f7 !important; }
body.light-mode #screen-legal { background: #f5f5f7 !important; }
body.light-mode .card { border-color: rgba(0,0,0,.1) !important; }
body.light-mode .stat-card { border-color: rgba(0,0,0,.1) !important; }
body.light-mode .glass { border-color: rgba(0,0,0,.08) !important; background: rgba(0,0,0,.03) !important; }
body.light-mode .itin-card { border: 1px solid rgba(0,0,0,.1) !important; }
body.light-mode .inp { border-color: rgba(0,0,0,.15) !important; }
body.light-mode hr { border-color: rgba(0,0,0,.08) !important; }
body.light-mode [style*="border-bottom:1px solid rgba(255,255,255"] { border-color: rgba(0,0,0,.08) !important; }
body.light-mode [style*="border:1px solid rgba(255,255,255"] { border-color: rgba(0,0,0,.1) !important; }

/* iOS horizontal scroll fix */
html, body { max-width: 100vw; overflow-x: hidden; }
#screens { overflow-x: hidden; }
.feed-item { max-width: 100vw; }
body.light-mode #screen-ai-curator { background: #f5f5f7 !important; }
body.light-mode #screen-ai-curator * { color: #1a1a2e !important; }
body.light-mode #screen-ai-curator .card { background: #fff !important; }
body.light-mode #screen-ai-curator .inp { background: rgba(0,0,0,.04) !important; color: #1a1a2e !important; border-color: rgba(0,0,0,.15) !important; }
body.light-mode #screen-ai-curator select.inp { appearance: auto !important; }
body.light-mode #screen-ai-curator select.inp option { color: #1a1a2e; background: #fff; }
body.light-mode #screen-ai-curator .btn-primary { color: #fff !important; }
body.light-mode #screen-ai-curator .btn-outline { border-color: rgba(0,0,0,.15) !important; }
body.light-mode #screen-ai-curator label { color: rgba(0,0,0,.6) !important; }
body.light-mode #screen-ai-curator p { color: rgba(0,0,0,.5) !important; }
body.light-mode #screen-ai-curator textarea.inp { background: rgba(0,0,0,.04) !important; color: #1a1a2e !important; }
body.light-mode #screen-ai-curator [style*="background:rgba(139,92,246"] { background: rgba(139,92,246,.08) !important; }
body.light-mode #screen-ai-curator .inp::placeholder { color: rgba(0,0,0,.35) !important; }
body.light-mode #screen-ai-curator > div > div[style*="background:rgba(17,17,34"] { background: #fff !important; border-color: rgba(0,0,0,.1) !important; }
body.light-mode #screen-ai-curator div[style*="background:rgba(17,17,34"] { background: #fff !important; border-color: rgba(0,0,0,.1) !important; }

@media (max-width: 768px) {
}

.feed-gallery::-webkit-scrollbar { display: none; }
.feed-gallery { scrollbar-width: none; }
[onscroll*="GalleryScroll"]::-webkit-scrollbar { display: none; }
[onscroll*="GalleryScroll"] { scrollbar-width: none; }

body.light-mode #screen-itinerary-full { background: #f5f5f7 !important; }
body.light-mode #screen-itinerary-full [style*="background:rgba(17,17"] { background: #fff !important; border-color: rgba(0,0,0,.1) !important; }
body.light-mode #screen-itinerary-full h3, body.light-mode #screen-itinerary-full p { color: #1a1a2e !important; }
body.light-mode #screen-itinerary-full [style*="color:rgba(255,255,255"] { color: rgba(0,0,0,.6) !important; }
body.light-mode #screen-itinerary-full [style*="position:relative;height:280px"] *,
body.light-mode #screen-itinerary-full [style*="position:relative;height:320px"] * { color: #fff !important; }