/* ClipToEarn premium UI layer — visual/layout only; preserves existing IDs, forms and API hooks. */
:root {
  --bg:#090d18; --bg-card:#101728; --bg-card-raised:#151e32; --bg-elevated:#1b2740;
  --border:#283552; --border-soft:#1c2942; --text:#f3f5ff; --text-muted:#a4b0c9; --text-faint:#71809f;
  --accent:#8b7cff; --money:#a99cff; --success:#48d6a0; --warning:#f6c76a; --danger:#ff737f;
  --radius:18px; --radius-sm:12px;
  --glow:0 18px 60px rgba(44,52,120,.16);
}
html { scroll-behavior:smooth; scroll-padding-top:88px; }
body { background:radial-gradient(ellipse at 70% -12%,rgba(91,78,205,.16),transparent 38%),var(--bg); color:var(--text); }
body::selection { background:rgba(139,124,255,.35); }
a { color:#b3aaff; }
a:focus-visible,button:focus-visible { outline:2px solid #a99cff; outline-offset:3px; }
h1,h2,h3,h4 { letter-spacing:-.025em; }
.container { max-width:1240px; padding:26px 28px 60px; }
.card,.dx-card,.dx-panel,.dx-submit-card,.dx-sheet,.lp-step-card,.lp-type-card { background:linear-gradient(145deg,rgba(19,28,48,.98),rgba(13,20,36,.98)); border:1px solid var(--border-soft); border-radius:18px; box-shadow:var(--glow); }
.card { padding:22px; }
.btn { min-height:42px; border-radius:12px; transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease; }
.btn:hover { transform:translateY(-1px); }
.btn-primary { background:linear-gradient(135deg,#a69aff,#7767ed); color:#0c1020; box-shadow:0 8px 24px rgba(123,105,237,.22); }
.btn-secondary { background:#18223a; border-color:#344263; color:#e5e9ff; }
.btn-danger { background:rgba(255,115,127,.1); }
input,select,textarea { background:#0a1121; border-color:#2c3958; border-radius:12px; min-height:42px; }
textarea { min-height:90px; }
input:focus,select:focus,textarea:focus { outline:2px solid rgba(139,124,255,.65); border-color:#8b7cff; }
.form-group label,label { color:#b6c0d8; }
.badge { background:#202b45; color:#c0c9df; }
.tabs { gap:8px; border-bottom-color:var(--border); }
.tab { border-radius:10px 10px 0 0; padding:11px 15px; }
.tab.active { color:#d8d2ff; border-bottom-color:#9d8eff; background:rgba(139,124,255,.08); }
.alert { border-radius:12px; }
/* Public navigation and landing page */
.lp-header,.lp-nav { background:rgba(9,13,24,.88); backdrop-filter:blur(18px); border-bottom:1px solid rgba(93,108,151,.2); }
.lp-header { padding-top:15px; padding-bottom:15px; }
.lp-brand,.lp-nav .brand { color:#f6f5ff; }
.lp-brand img,.lp-nav .brand img { filter:drop-shadow(0 0 12px rgba(139,124,255,.3)); }
.lp-nav-links { gap:22px; }
.lp-nav-links>a:not(.btn) { transition:color .15s ease; }
.lp-hero { max-width:1240px; min-height:620px; padding-top:82px; padding-bottom:92px; gap:64px; }
.lp-hero h1 { font-size:clamp(44px,5.8vw,76px); line-height:1.01; }
.lp-hero h1 span { color:#a99cff; text-shadow:0 0 40px rgba(139,124,255,.2); }
.lp-eyebrow,.lp-kicker,.lp-type-label { color:#aaa0ff; }
.lp-dot { background:#a99cff; box-shadow:0 0 0 5px rgba(139,124,255,.12); }
.lp-hero-copy>p { max-width:56ch; }
.lp-hero-visual { border-color:#354165; background:linear-gradient(145deg,#18213b,#0c1325); box-shadow:0 32px 100px rgba(0,0,0,.38),0 0 70px rgba(99,83,220,.1); border-radius:24px; }
.lp-balance-mark { background:rgba(139,124,255,.16); color:#b8afff; }
.lp-trust-row span:first-child { color:#b7adff; }
.lp-section { padding:78px 0; }
.lp-wrap { max-width:1240px; }
.lp-step-card { box-shadow:none; background:linear-gradient(145deg,#121b30,#0e1628); border-color:#25324f; transition:transform .18s ease,border-color .18s ease; }
.lp-step-card:hover,.lp-type-card:hover { transform:translateY(-3px); border-color:#655bc0; }
.lp-step-icon,.lp-benefit-icon { background:rgba(139,124,255,.12); color:#b8afff; }
.lp-type-card { box-shadow:none; }
.lp-art-music { background:linear-gradient(145deg,#49358d,#211b45); }
.lp-art-brand { background:linear-gradient(145deg,#254c7d,#151d3b); }
.lp-text-link { color:#b6acff; }
.lp-faq details { border-color:#25314d; }
.lp-final { background:radial-gradient(ellipse at center,rgba(111,92,231,.16),transparent 66%); }
.lp-footer { max-width:1240px; }
/* Account pages */
.auth-page { min-height:100vh; padding:36px 18px; display:grid; place-items:center; background:radial-gradient(ellipse at 50% 0,rgba(111,92,231,.18),transparent 48%); }
.auth-box { width:min(100%,480px); }
.auth-box>.card,.auth-box .card { border-color:#293657; box-shadow:0 28px 90px rgba(0,0,0,.28); }
.auth-box h1,.auth-box h2 { font-size:clamp(26px,5vw,34px); }
.auth-divider { color:var(--text-faint); }
.auth-switch { color:var(--text-muted); }
/* Authenticated legacy pages: desktop left rail; mobile top navigation. */
@media (min-width:1100px) {
  body[data-guard]:not(.dx) > .navbar { position:fixed; z-index:30; inset:0 auto 0 0; width:244px; padding:25px 16px; display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:28px; background:rgba(12,18,32,.97); border-right:1px solid #26314e; border-bottom:0; overflow-y:auto; }
  body[data-guard]:not(.dx) > .navbar .brand { padding:0 10px; font-size:19px; }
  body[data-guard]:not(.dx) > .navbar nav { display:flex; flex-direction:column; align-items:stretch; gap:5px; }
  body[data-guard]:not(.dx) > .navbar nav a,body[data-guard]:not(.dx) > .navbar nav button { width:100%; text-align:left; justify-content:flex-start; padding:11px 12px; border-radius:10px; }
  body[data-guard]:not(.dx) > .navbar nav a { color:#a4b0c9; }
  body[data-guard]:not(.dx) > .navbar nav a:hover,body[data-guard]:not(.dx) > .navbar nav a:focus { color:#f3f5ff; background:#1a2440; }
  body[data-guard]:not(.dx) > .container { margin-left:244px; max-width:1500px; padding:34px clamp(26px,4vw,60px) 70px; }
}
body[data-guard]:not(.dx) > .navbar { box-shadow:0 10px 30px rgba(0,0,0,.08); }
.dashboard-header { margin-top:12px; margin-bottom:28px; }
.dashboard-header h1 { font-size:clamp(27px,3vw,36px); }
.stats-row { gap:14px; }
.stat-card { border-radius:16px; }
.stat-card.balance-card { background:radial-gradient(circle at 90% 0,rgba(139,124,255,.16),transparent 50%),linear-gradient(145deg,#18213b,#101728); border-color:#393c6a; }
.stat-card.balance-card .value { color:#b9afff; }
/* Creator dashboard — retain its existing functional drawer and IDs, refine the shell. */
.dx { background:radial-gradient(ellipse at 75% 0,rgba(91,78,205,.12),transparent 35%),var(--bg); }
.dx-nav { background:rgba(10,15,28,.92)!important; border-bottom:1px solid #25314d!important; backdrop-filter:blur(18px); }
.dx-wrap { max-width:1320px!important; }
.dx-card,.dx-panel { box-shadow:var(--glow); }
.dx-balance,.dx-bal-tile { border-color:#2b3758!important; }
.dx-avail { background:radial-gradient(circle at 100% 0,rgba(139,124,255,.18),transparent 60%),linear-gradient(145deg,#1a2440,#11192c)!important; }
.dx-money { color:#b8afff!important; }
.dx-tab.is-active { color:#c6bdff!important; border-color:#9585ff!important; }
.dx-drawer { background:#0e1628!important; border-color:#293657!important; }
.dx-link:hover,.dx-link[aria-current=page] { background:#1a2440!important; }
/* Brand wizard and admin review screens */
#campaign-form { max-width:100%; }
#campaign-form .card { box-shadow:none; background:#0e1628; }
#campaign-form h3 { margin-top:0; }
#campaign-form .form-group { min-width:0; }
#campaign-form .form-row { gap:18px; }
#campaign-form .btn-primary { margin-top:6px; }
#campaign-wizard { margin-bottom:20px; }
.wizard-step,.campaign-wizard-step { border-color:#334066!important; }
#admin-tabs,.admin-tabs { overflow-x:auto; }
/* Tables, lists and small screens */
table { border-collapse:collapse; width:100%; }
th { color:#c7d0e7; background:#141e34; }
th,td { border-color:#293552!important; }
hr { border-color:#293552; }
@media(max-width:1099px) {
  .container { padding:22px 20px 52px; }
  body[data-guard]:not(.dx) > .navbar { position:sticky; top:0; z-index:30; }
  body[data-guard]:not(.dx) > .navbar nav { gap:7px; }
}
@media(max-width:760px) {
  .container { padding:18px 14px 42px; }
  .card { padding:16px; border-radius:15px; }
  .navbar { padding:12px 14px; }
  body[data-guard]:not(.dx) > .navbar nav { width:100%; gap:5px; }
  body[data-guard]:not(.dx) > .navbar nav a,body[data-guard]:not(.dx) > .navbar nav button { font-size:12px; padding:8px 9px; }
  .dashboard-header { margin:12px 0 20px; }
  .stats-row { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .stat-card .value { font-size:22px; }
  .lp-header { padding:11px 15px; }
  .lp-hero { padding-top:48px; padding-bottom:54px; gap:32px; }
  .lp-section { padding:54px 0; }
  .lp-type-card { grid-template-columns:112px minmax(0,1fr); }
  .lp-type-content { padding:16px; }
  .lp-footer { padding-left:16px; padding-right:16px; }
}
@media(max-width:460px) {
  .stats-row { grid-template-columns:1fr 1fr; }
  .stats-row .stat-card { padding:13px; }
  .lp-type-card { grid-template-columns:1fr; }
  .lp-type-art { min-height:100px; }
  .lp-hero h1 { font-size:clamp(39px,12vw,54px); }
  .lp-cta .btn { flex:1 1 100%; }
  .form-row { grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .lp-step-card:hover,.lp-type-card:hover,.btn:hover { transform:none; } }
/* Four-step campaign builder created by the existing brand.js wizard. */
.campaign-wizard { margin:0 0 24px; padding:18px; border:1px solid #303c61; border-radius:16px; background:linear-gradient(140deg,rgba(139,124,255,.09),rgba(13,20,36,.7)); }
.campaign-wizard-progress { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; padding:0; margin:0 0 20px; list-style:none; }
.campaign-wizard-progress li { min-width:0; padding:10px 8px; border:1px solid #2b3758; border-radius:10px; color:#8998b7; font-size:12px; text-align:center; background:#0d1527; }
.campaign-wizard-progress li[aria-current="step"],.campaign-wizard-progress li.is-active { color:#e4dfff; border-color:#8878f4; background:rgba(139,124,255,.13); }
.campaign-wizard-step { padding:16px 0 4px; border:0!important; border-top:1px solid #293552!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; }
.campaign-wizard-step h3 { margin:0 0 5px; }
.campaign-wizard-controls { display:flex; justify-content:space-between; gap:10px; margin-top:18px; }
.campaign-wizard-controls button { min-width:110px; }
@media(max-width:600px) { .campaign-wizard { padding:12px; } .campaign-wizard-progress { gap:4px; } .campaign-wizard-progress li { padding:8px 3px; font-size:10px; } }