/* ══════════════════════════════════════════════════════════════
   App 2026 design layer — visual only. Restyles existing markup;
   no display/visibility logic of the app is changed here.
   ══════════════════════════════════════════════════════════════ */
:root {
  --ink: #0f0d1f; --ink2: #4b4766; --ink3: #8d89a8; --line2: #ebe9f4; --pl2: #f1ecff; --coral: #ff6b5b; --mint: #12b981;
  --r2: 22px;
  --sh2: 0 1px 2px rgba(30,20,80,.04), 0 12px 40px -18px rgba(60,40,140,.22);
}
body { background: #fbfaff; -webkit-font-smoothing: antialiased; }

/* ── Frosted pill navigation ── */
#main-nav { position: sticky; top: 12px; z-index: 200; margin: 12px auto 0; width: min(1180px, calc(100% - 24px)); border-radius: 999px; padding: 0 8px 0 14px;
  background: rgba(255,255,255,.72); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: none; box-shadow: inset 0 0 0 1px rgba(235,233,244,.95), 0 10px 30px -20px rgba(50,30,120,.35); }
#main-nav .nav-inner { height: 58px; }
#main-nav .btn { border-radius: 999px; }
#main-nav .btn-primary { background: var(--ink); box-shadow: none; }
#main-nav .btn-primary:hover { background: #25213f; }

/* ── Buttons ── */
.btn { border-radius: 999px; font-weight: 600; }
.btn-primary { background: var(--ink); color: #fff; box-shadow: 0 6px 18px -8px rgba(15,13,31,.45); }
@media (hover: hover) { .btn-primary:hover { background: #25213f; transform: none; box-shadow: 0 8px 22px -8px rgba(15,13,31,.5); } }
.btn-ghost { background: #fff; border: none; box-shadow: inset 0 0 0 1px var(--line2); color: var(--ink); }
@media (hover: hover) { .btn-ghost:hover { background: #f7f5ff; } }
.btn-success { background: var(--purple); color: #fff; box-shadow: 0 8px 22px -10px rgba(109,70,195,.7); }
@media (hover: hover) { .btn-success:hover { background: #5b39ad; transform: none; } }

/* ── Inputs ── */
.form-input, .form-textarea, select.form-input { border-radius: 16px; border: none; box-shadow: inset 0 0 0 1.5px var(--line2); background: #fff; padding: 13px 16px; }
.form-input:focus, .form-textarea:focus { box-shadow: inset 0 0 0 2px var(--purple), 0 0 0 4px rgba(109,70,195,.12); }
.form-input.error { box-shadow: inset 0 0 0 2px var(--pink); }
.form-label { font-weight: 700; color: var(--ink); font-size: .86rem; }

/* ── Cards, chips, badges ── */
.card, .chal-card, .client-row, .auth-box, .wizard-card, .modal, .inf-extra-card, .prof-panel { border-radius: var(--r2); border: none; box-shadow: var(--sh2), inset 0 0 0 1px var(--line2); }
.filter-bar { gap: 8px; }
.filter-btn { border: none; box-shadow: inset 0 0 0 1px var(--line2); background: #fff; color: var(--ink2); padding: 9px 16px; font-size: .85rem; }
.filter-btn.active { background: var(--ink); color: #fff; box-shadow: none; }
.badge { border-radius: 999px; font-weight: 700; }

/* ── Dashboards ── */
.dashboard-wrap { position: relative; }
.dashboard-title { font-family: var(--lp-display); font-weight: 800; letter-spacing: -.025em; font-size: clamp(1.8rem, 3.2vw, 2.4rem); }
.dashboard-sub { color: var(--ink3); }

/* Influencer campaign wall: cover-first cards */
.challenges-grid { gap: 18px; }
.chal-card { overflow: hidden; transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; }
@media (hover: hover) { .chal-card:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(30,20,80,.05), 0 24px 50px -22px rgba(60,40,140,.35), inset 0 0 0 1px var(--line2); } }
.chal-cover-wrap { border-radius: 18px; overflow: hidden; }
.chal-cover-wrap img { transition: transform .5s cubic-bezier(.2,.8,.2,1); }
@media (hover: hover) { .chal-card:hover .chal-cover-wrap img { transform: scale(1.04); } }
.chal-artist-name { font-family: var(--lp-display); font-weight: 800; letter-spacing: -.02em; }
.chal-prize-box { border-radius: 16px; background: linear-gradient(135deg, var(--pl2), #fff4f2); border: none; }
.chal-prize-amount { font-family: var(--lp-display); font-weight: 800; color: var(--purple); letter-spacing: -.02em; }
.chal-stat-box { border-radius: 14px; border: none; background: #f7f6fc; }
.chal-enter-btn { border-radius: 999px; background: var(--ink); }
.chal-preview-btn { border-radius: 999px; }
.snip-btn { background: var(--pl2) !important; color: var(--purple) !important; }

/* Client campaign list */
.client-row { transition: transform .2s, box-shadow .2s; }
@media (hover: hover) { .client-row:hover { transform: translateY(-2px); } }
.client-row-name { font-family: var(--lp-display); font-weight: 800; letter-spacing: -.02em; }
.client-stat { border-radius: 14px; background: #f7f6fc; border: none; }
.client-stat-val { font-family: var(--lp-display); font-weight: 800; letter-spacing: -.02em; }

/* ── Campaign page ── */
.campaign-hero { border-radius: 30px; background: linear-gradient(130deg, #f1ecff, #fff 55%, #fff1ee); box-shadow: inset 0 0 0 1px var(--line2); border: none; }
.campaign-title-text { font-family: var(--lp-display); font-weight: 800; letter-spacing: -.03em; }
.campaign-stats-bar { border-radius: 20px; border: none; box-shadow: var(--sh2), inset 0 0 0 1px var(--line2); background: #fff; overflow: hidden; }
.campaign-stat-val { font-family: var(--lp-display); font-weight: 800; letter-spacing: -.03em; }
.campaign-section { border-radius: var(--r2); border: none; box-shadow: var(--sh2), inset 0 0 0 1px var(--line2); }
.campaign-cta-bar { border-radius: 999px; }
.lb-row { border-radius: 14px; }

/* ── Wizard ── */
.wizard-card { padding: 28px; }
.wizard-title { font-family: var(--lp-display); font-weight: 800; letter-spacing: -.025em; }
.wizard-step-circle { box-shadow: 0 0 0 4px #fff; }
.platform-opt { border-radius: 18px; border: none; box-shadow: inset 0 0 0 1.5px var(--line2); background: #fff; }
.platform-opt.selected { box-shadow: inset 0 0 0 2px var(--purple); background: var(--pl2); }
.link-preview { border-radius: 16px; }

/* ── Auth pages ── */
.auth-wrap { background: radial-gradient(60% 50% at 50% 0%, #e9e1ff 0%, transparent 70%), radial-gradient(40% 40% at 90% 70%, #ffe1dc 0%, transparent 70%), #fbfaff; }
.auth-box { background: rgba(255,255,255,.85); backdrop-filter: blur(14px); padding: 32px; }
.auth-type-opt { border-radius: 18px; border: none; box-shadow: inset 0 0 0 1.5px var(--line2); }
.auth-type-opt.selected, .auth-type-opt:hover { box-shadow: inset 0 0 0 2px var(--purple); background: var(--pl2); }

/* ── Modals ── */
.modal-backdrop { background: rgba(15,13,31,.4); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.modal-title { font-family: var(--lp-display); font-weight: 800; letter-spacing: -.02em; }

/* ── Toasts ── */
.toast { border-radius: 16px; border: none; box-shadow: 0 14px 40px -12px rgba(30,20,80,.35), inset 0 0 0 1px var(--line2); }

/* ══ App chrome: sidebar (desktop) + tab bar (mobile) — only on logged-in app pages ══ */
#app-side, #app-tabbar { display: none; }
@media (min-width: 1024px) {
  body.in-app #app-side { display: flex; position: fixed; z-index: 150; left: 0; top: 0; bottom: 0; width: 248px; flex-direction: column; gap: 4px; padding: 22px 14px; background: #fff; border-right: 1px solid var(--line2); }
  body.in-app #app-shell { padding-left: 248px; }
  body.in-app #main-nav { display: none; }
  body.in-app #app-shell { padding-top: 12px; }
}
#app-side .as-logo { height: 22px; width: auto; align-self: flex-start; margin: 4px 10px 26px; cursor: pointer; }
.as-item { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 14px; font-size: .92rem; font-weight: 600; color: var(--ink2); background: none; border: 0; font-family: inherit; cursor: pointer; text-align: left; width: 100%; }
.as-item svg { width: 19px; height: 19px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.as-item.on { background: var(--pl2); color: var(--purple); }
@media (hover: hover) { .as-item:not(.on):hover { background: #f7f6fc; color: var(--ink); } }
.as-promo { margin-top: auto; border-radius: 18px; padding: 16px; background: linear-gradient(150deg, var(--purple), #4c2e9e); color: #fff; font-size: .84rem; line-height: 1.5; }
.as-promo b { display: block; font-family: var(--lp-display); font-weight: 800; font-size: 1rem; margin-bottom: 4px; }
.as-promo button { margin-top: 10px; background: #fff; color: var(--purple); border: 0; border-radius: 999px; padding: 8px 14px; font: 700 .8rem 'DM Sans', sans-serif; cursor: pointer; }
@media (max-width: 1023px) {
  body.in-app #app-tabbar { display: flex; position: fixed; z-index: 150; top: auto; height: auto; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); justify-content: space-around; padding: 8px; border-radius: 24px;
    background: rgba(255,255,255,.86); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); box-shadow: 0 10px 40px -10px rgba(40,20,110,.35), inset 0 0 0 1px var(--line2); }
  body.in-app #app-shell { padding-bottom: 92px; }
  body.in-app #toast-container { bottom: calc(96px + env(safe-area-inset-bottom)); }
}
.tb-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 4px; border: 0; background: none; font: 600 .68rem 'DM Sans', sans-serif; color: var(--ink3); cursor: pointer; border-radius: 16px; }
.tb-item svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tb-item.on { color: var(--purple); background: var(--pl2); }

/* Soft glow behind app pages */
body.in-app::before { content: ''; position: fixed; z-index: -1; width: 620px; height: 620px; right: -160px; top: -260px; border-radius: 50%; background: radial-gradient(circle, rgba(201,182,255,.55), transparent 65%); pointer-events: none; }

/* Page-load reveal for app content */
@media (prefers-reduced-motion: no-preference) {
  body.in-app .page.active > * { animation: appRise .5s cubic-bezier(.2,.8,.2,1) both; }
}
@keyframes appRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.platform-opt.selected { background: var(--pl2) !important; box-shadow: inset 0 0 0 2px var(--purple) !important; }

/* ══ Round 2 ══ */
/* Client KPI row */
.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 0 0 22px; }
.kpi-box { background: #fff; border-radius: 20px; padding: 18px 20px; box-shadow: var(--sh2), inset 0 0 0 1px var(--line2); }
.kpi-l { font-size: .8rem; color: var(--ink3); font-weight: 600; }
.kpi-v { font-family: var(--lp-display); font-weight: 800; font-size: 1.9rem; letter-spacing: -.03em; margin-top: 6px; color: var(--ink); }
@media (max-width: 760px) { .kpi-row { grid-template-columns: 1fr 1fr; } .kpi-v { font-size: 1.5rem; } }

/* Influencer cards: cover-first, labels float on the artwork */
.chal-card { position: relative; background: #fff; }
.chal-card-header { position: absolute; z-index: 2; top: 12px; left: 12px; right: 12px; background: none !important; padding: 0 !important; }
.chal-card-header-left { background: rgba(255,255,255,.9); backdrop-filter: blur(8px); color: var(--ink) !important; border-radius: 999px; padding: 5px 11px; font-size: .7rem !important; font-weight: 800; }
.chal-card-header .badge { background: rgba(15,13,31,.78) !important; color: #fff !important; backdrop-filter: blur(8px); }
.chal-cover-wrap { border-radius: 0 !important; position: relative; }
.chal-cover-wrap::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,13,31,.3) 0%, transparent 30%); pointer-events: none; }

/* Landing: gradient accent, floating stat cards */
.lp-hl { background: linear-gradient(100deg, var(--purple) 10%, #8b5cf6 45%, var(--coral) 95%); -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; }
.lp-growth, .lp-before { box-shadow: 0 1px 2px rgba(30,20,80,.04), 0 20px 50px -20px rgba(60,40,140,.35) !important; backdrop-filter: blur(14px); }
@media (prefers-reduced-motion: no-preference) {
  .lp-growth { animation: lpFloat 6s ease-in-out infinite; }
  .lp-before { animation: lpFloat 7s ease-in-out -3s infinite; }
}
@keyframes lpFloat { 50% { translate: 0 -8px; } }