/* ============================================================
   DREAMR — Design Layer  (loaded AFTER main.css)
   Dark mode  = Futuristic Neon Glass (toned down)
   Light mode = Sleek Premium / Apple-like
   Theme toggle (data-theme) switches the whole look.
   Additive only — no markup or JS changes, all functionality intact.
   ============================================================ */

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ============================================================
   TOKEN OVERRIDES
   ============================================================ */
:root,[data-theme="dark"]{
  --brand:#5EEAD4; --brand-2:#818CF8;
  --bg:#06060E; --bg-soft:#0A0A16; --surface:#111120; --surface-2:#16162A; --elev:#1B1B32;
  --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.11); --line-3:rgba(255,255,255,.16);
  --ink:#EEF0FF; --ink-2:#C2C6E8; --mute:#7C80A8; --mute-2:#565A80;
  --radius-sm:12px; --radius:18px; --radius-lg:24px; --radius-xl:30px;
  /* toned-down neon glow strengths */
  --neon:14%; --neon-soft:8%;
  --shadow:0 10px 30px -14px rgba(0,0,0,.6);
  --shadow-lg:0 26px 60px -30px rgba(0,0,0,.7);
  --ring:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent);
}
[data-theme="light"]{
  --brand:#0EA5A0; --brand-2:#14B8A6;
  --bg:#F6F7F9; --bg-soft:#FFFFFF; --surface:#FFFFFF; --surface-2:#F1F3F6; --elev:#FFFFFF;
  --line:#E7E9EE; --line-2:#DDE1E8; --line-3:#CBD1DC;
  --ink:#0B0B14; --ink-2:#41414F; --mute:#8A8A97; --mute-2:#AEB2BE;
  --radius-sm:14px; --radius:22px; --radius-lg:26px; --radius-xl:32px;
  --shadow:0 1px 2px rgba(16,24,40,.04),0 12px 32px -14px rgba(16,24,40,.10);
  --shadow-lg:0 24px 60px -26px rgba(16,24,40,.18);
  --ring:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent);
}

/* ============================================================
   BACKDROP
   ============================================================ */
/* Dark: soft neon aurora + faint grid (toned down) */
[data-theme="dark"] body::before{
  background-color:var(--bg)!important;
  background-image:
    radial-gradient(50% 40% at 14% 8%,  color-mix(in srgb,var(--brand-2) var(--neon),transparent),transparent 60%),
    radial-gradient(46% 44% at 90% 16%, color-mix(in srgb,var(--brand) var(--neon-soft),transparent),transparent 60%),
    radial-gradient(50% 50% at 72% 100%,color-mix(in srgb,#F0ABFC 6%,transparent),transparent 60%)!important;
  animation:aurora 30s ease-in-out infinite alternate!important;
}
[data-theme="dark"] body::after{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask:radial-gradient(72% 62% at 50% 38%,#000,transparent);
          mask:radial-gradient(72% 62% at 50% 38%,#000,transparent);
}
@keyframes aurora{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-2%,1.5%,0) scale(1.05)}100%{transform:translate3d(2%,-1%,0) scale(1.02)}}
/* Light: clean soft wash, no grid/stars */
[data-theme="light"] body::before{
  background-color:var(--bg)!important;
  background-image:
    radial-gradient(70% 50% at 85% -5%,color-mix(in srgb,var(--brand) 8%,transparent),transparent 60%),
    radial-gradient(60% 50% at 0% 100%,color-mix(in srgb,var(--brand-2) 7%,transparent),transparent 60%)!important;
  animation:none!important;
}
[data-theme="light"] body::after{display:none!important}

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar{
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 94%,transparent),color-mix(in srgb,var(--bg-soft) 96%,transparent))!important;
  border-right:1px solid var(--line)!important;
}
[data-theme="dark"] .sidebar{backdrop-filter:blur(20px) saturate(1.15);-webkit-backdrop-filter:blur(20px) saturate(1.15);box-shadow:16px 0 46px -34px rgba(0,0,0,.7)}
[data-theme="dark"] .sidebar::after{content:'';position:absolute;top:0;right:0;width:1px;height:100%;background:linear-gradient(180deg,transparent,var(--brand),var(--brand-2),transparent);opacity:.4}
.sb-logo{border-bottom:1px solid var(--line)!important}
.sb-logo .wordmark{
  font-family:'Shrikhand',cursive!important;
  background:linear-gradient(90deg,var(--brand),var(--brand-2),var(--brand));background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent!important;
  animation:wordmark-shine 7s linear infinite;
}
[data-theme="light"] .sb-logo .wordmark{color:var(--ink)!important;-webkit-text-fill-color:initial;background:none;animation:none}
@keyframes wordmark-shine{to{background-position:200% center}}
[data-theme="dark"] .sb-logo img{filter:drop-shadow(0 0 7px color-mix(in srgb,var(--brand) 45%,transparent))}

.sidebar .nav-item{border-radius:13px!important;transition:background .18s,color .18s,transform .16s cubic-bezier(.34,1.56,.64,1)!important}
.sidebar .nav-item .icon{transition:transform .22s cubic-bezier(.34,1.56,.64,1),color .18s}
.sidebar .nav-item:hover{transform:translateX(3px)}
.sidebar .nav-item:hover .icon{transform:scale(1.12) rotate(-3deg)}

/* Dark active = subtle neon; Light active = solid ink pill (Apple-like) */
[data-theme="dark"] .sidebar .nav-item:hover{background:color-mix(in srgb,var(--brand) 8%,transparent)!important;color:#fff}
[data-theme="dark"] .sidebar .nav-item.active{
  background:linear-gradient(100deg,color-mix(in srgb,var(--brand) 14%,transparent),color-mix(in srgb,var(--brand-2) 7%,transparent))!important;
  border-color:color-mix(in srgb,var(--brand) 30%,transparent)!important;color:#fff;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 22%,transparent);
}
[data-theme="dark"] .sidebar .nav-item.active .icon{color:var(--brand);filter:drop-shadow(0 0 4px color-mix(in srgb,var(--brand) 55%,transparent))}
[data-theme="dark"] .sidebar .nav-item.active::before{
  content:'';position:absolute;left:-14px;top:50%;transform:translateY(-50%);width:4px;height:60%;border-radius:0 4px 4px 0;
  background:linear-gradient(var(--brand),var(--brand-2));box-shadow:0 0 10px var(--brand)}
[data-theme="light"] .sidebar .nav-item:hover{background:var(--surface-2)!important}
[data-theme="light"] .sidebar .nav-item.active{background:var(--ink)!important;color:#fff!important;border-color:transparent!important;box-shadow:0 8px 20px -12px rgba(16,24,40,.5)}
[data-theme="light"] .sidebar .nav-item.active .icon{color:#fff!important}

.sidebar .nav-item{animation:slide-in-left .4s ease both}
.sidebar .nav-item:nth-child(1){animation-delay:.03s}.sidebar .nav-item:nth-child(2){animation-delay:.06s}
.sidebar .nav-item:nth-child(3){animation-delay:.09s}.sidebar .nav-item:nth-child(4){animation-delay:.12s}
.sidebar .nav-item:nth-child(5){animation-delay:.15s}.sidebar .nav-item:nth-child(6){animation-delay:.18s}
.sidebar .nav-item:nth-child(7){animation-delay:.21s}.sidebar .nav-item:nth-child(8){animation-delay:.24s}
.sidebar .nav-item:nth-child(9){animation-delay:.27s}.sidebar .nav-item:nth-child(10){animation-delay:.30s}
@keyframes slide-in-left{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:translateX(0)}}

.sb-av{background:linear-gradient(135deg,var(--brand),var(--brand-2))!important;color:#06121a!important;font-weight:800}
[data-theme="dark"] .sb-av{box-shadow:0 3px 12px -6px var(--brand)}
.sb-user{border-radius:14px;transition:background .18s,transform .15s}
.sb-user:hover{transform:translateY(-1px)}
[data-theme="dark"] .sb-user:hover{background:color-mix(in srgb,var(--brand) 7%,transparent)}
[data-theme="light"] .sb-user:hover{background:var(--surface-2)}

/* ============================================================
   CARDS
   ============================================================ */
.card{
  border:1px solid var(--line)!important;border-radius:var(--radius)!important;
  transition:transform .24s cubic-bezier(.22,.61,.36,1),box-shadow .25s,border-color .2s;
  animation:fade-up .5s cubic-bezier(.22,.61,.36,1) both;
}
[data-theme="dark"] .card{
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface-2) 90%,transparent),color-mix(in srgb,var(--surface) 92%,transparent))!important;
  box-shadow:0 1px 0 0 color-mix(in srgb,#fff 5%,transparent) inset,var(--shadow);
}
[data-theme="light"] .card{background:var(--surface)!important;box-shadow:var(--shadow)}
/* gentle hover — NOT a heavy color slab */
[data-theme="dark"] .card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--brand) 22%,transparent)!important;box-shadow:0 18px 46px -28px color-mix(in srgb,var(--brand) 40%,transparent),var(--shadow-lg)}
[data-theme="light"] .card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--line-2)!important}
.card:nth-child(1){animation-delay:.02s}.card:nth-child(2){animation-delay:.06s}
.card:nth-child(3){animation-delay:.10s}.card:nth-child(4){animation-delay:.14s}
.card:nth-child(5){animation-delay:.18s}.card:nth-child(6){animation-delay:.22s}

/* stat numbers */
.stat-value,.stat-val,.kpi-value,.metric-value,.big-num{
  background:linear-gradient(120deg,var(--brand),var(--brand-2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
[data-theme="light"] .stat-value,[data-theme="light"] .stat-val,[data-theme="light"] .kpi-value,[data-theme="light"] .metric-value,[data-theme="light"] .big-num{
  background:none;-webkit-text-fill-color:initial;color:var(--ink)}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{position:relative;overflow:hidden;transition:transform .14s ease,box-shadow .22s,filter .2s,background .2s,border-color .2s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.985)}
.btn-primary{background:linear-gradient(120deg,var(--brand),var(--brand-2))!important;color:#06121a!important;border:none!important;font-weight:800!important}
[data-theme="dark"] .btn-primary{box-shadow:0 8px 22px -12px var(--brand),inset 0 1px 0 rgba(255,255,255,.3)}
[data-theme="light"] .btn-primary{background:var(--ink)!important;color:#fff!important;box-shadow:0 8px 20px -12px rgba(16,24,40,.5)}
[data-theme="light"] .btn-primary:hover{filter:none;box-shadow:var(--shadow)}
[data-theme="dark"] .btn-primary:hover{filter:brightness(1.05);box-shadow:0 12px 30px -12px var(--brand)}
.btn-primary::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-130%);transition:transform .6s ease}
.btn-primary:hover::after{transform:translateX(130%)}
.btn .ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.35);transform:scale(0);pointer-events:none;animation:ripple .6s ease-out forwards}
[data-theme="light"] .btn .ripple{background:rgba(255,255,255,.5)}
@keyframes ripple{to{transform:scale(3.6);opacity:0}}

/* ============================================================
   HEADERS / INPUTS
   ============================================================ */
.ph-title,.page-title{position:relative}
.ph-title::after,.page-title::after{content:'';display:block;width:44px;height:3px;border-radius:3px;margin-top:8px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));animation:grow-underline .6s cubic-bezier(.22,.61,.36,1) both}
[data-theme="dark"] .ph-title::after,[data-theme="dark"] .page-title::after{box-shadow:0 0 10px color-mix(in srgb,var(--brand) 45%,transparent)}
@keyframes grow-underline{from{width:0;opacity:0}to{width:44px;opacity:1}}
.fi,input.fi,textarea.fi,select.fi{border-radius:12px!important;transition:border-color .18s,box-shadow .22s,background .2s}
.fi:focus,input.fi:focus,textarea.fi:focus,select.fi:focus{border-color:var(--brand)!important;box-shadow:var(--ring)}

/* page + misc motion */
.main .page{animation:fade-up .5s cubic-bezier(.22,.61,.36,1) both}
@keyframes fade-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.nav-badge,.notif-badge,.tabbar-badge{animation:badge-pop .3s cubic-bezier(.34,1.56,.64,1)}
@keyframes badge-pop{from{transform:scale(0)}to{transform:scale(1)}}
.notif-bell-fab.ring{animation:bell-ring .6s ease}
@keyframes bell-ring{0%,100%{transform:rotate(0)}20%{transform:rotate(14deg)}40%{transform:rotate(-11deg)}60%{transform:rotate(7deg)}80%{transform:rotate(-4deg)}}
.toast,.rt-toast{animation:toast-in .4s cubic-bezier(.22,.61,.36,1) both}
@keyframes toast-in{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
.skeleton{background:linear-gradient(90deg,var(--surface-2) 25%,var(--line-2) 37%,var(--surface-2) 63%);background-size:400% 100%;animation:shimmer 1.4s ease infinite;border-radius:8px}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}

/* ============================================================
   DREAMR LOADER — "Dream Bubble Split" (Concept C)
   Gooey mark breathes and parts into moon/brain halves; the
   seam droplet pulses. Colours come from the SVG (theme-aware).
   ============================================================ */
.dreamr-loader{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
.dl-stage{position:relative;display:inline-block}
.dl-stage svg{display:block;overflow:visible}
.dl-left {transform-origin:75px 74px;animation:dl-left 2.6s ease-in-out infinite}
.dl-right{transform-origin:75px 74px;animation:dl-right 2.6s ease-in-out infinite}
.dl-drop {transform-origin:75px 72px;animation:dl-drop 2.6s ease-in-out infinite}
.dl-seam {transform-origin:75px 74px;animation:dl-seam 2.6s ease-in-out infinite}
@keyframes dl-left {0%,100%{transform:translateX(0) scale(1)}50%{transform:translateX(-9px) scale(1.05)}}
@keyframes dl-right{0%,100%{transform:translateX(0) scale(1)}50%{transform:translateX(9px) scale(1.05)}}
@keyframes dl-drop {0%,100%{transform:scale(0);opacity:0}38%{transform:translateY(5px) scale(1);opacity:1}72%{transform:translateY(24px) scale(.4);opacity:0}}
@keyframes dl-seam {0%,100%{opacity:.85;transform:scaleY(1)}50%{opacity:.4;transform:scaleY(1.08)}}
.dl-cap,.dl-splash-cap{font-family:'Bebas Neue',sans-serif;letter-spacing:2.5px;font-size:13px;color:var(--mute);text-transform:uppercase;animation:dl-fade 1.6s ease-in-out infinite}
@keyframes dl-fade{0%,100%{opacity:.4}50%{opacity:1}}
.dl-wordmark{font-family:'Shrikhand',cursive;font-size:30px;line-height:1;margin-top:2px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2),var(--brand));background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:wordmark-shine 4s linear infinite}
[data-theme="light"] .dl-wordmark{color:var(--ink)!important;-webkit-text-fill-color:initial;background:none;animation:none}

.dreamr-splash{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(60% 50% at 50% 42%,color-mix(in srgb,var(--brand) 12%,transparent),transparent 70%),var(--bg);
  transition:opacity .45s ease,visibility .45s ease}
.dreamr-splash.done{opacity:0;visibility:hidden;pointer-events:none}
.dl-splash-inner{display:flex;flex-direction:column;align-items:center;gap:10px}

/* ============================================================
   PER-CREATIVE-FOCUS SIGNATURE ANIMATIONS  (body[data-focus])
   ============================================================ */
.sb-workspace .icon,.sb-focus .icon,.focus-anim .icon{transform-origin:center;display:inline-flex}
body[data-focus="visual-artist"] .sb-focus .icon,body[data-focus="visual-artist"] .sb-workspace .icon{animation:fa-sway 3.4s ease-in-out infinite}
@keyframes fa-sway{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
body[data-focus="photographer"] .sb-focus .icon,body[data-focus="photographer"] .sb-workspace .icon{animation:ph-shutter 2.8s ease-in-out infinite}
@keyframes ph-shutter{0%,86%,100%{transform:scale(1);opacity:1}90%{transform:scale(.82);opacity:.55}94%{transform:scale(1.05)}}
body[data-focus="musician"] .sb-focus .icon,body[data-focus="musician"] .sb-workspace .icon{animation:mu-beat .9s cubic-bezier(.3,.7,.4,1) infinite}
@keyframes mu-beat{0%,100%{transform:translateY(0) scale(1)}30%{transform:translateY(-3px) scale(1.12)}60%{transform:translateY(0) scale(.96)}}
body[data-focus="influencer"] .sb-focus .icon,body[data-focus="influencer"] .sb-workspace .icon{animation:in-rise 2.2s ease-in-out infinite}
@keyframes in-rise{0%,100%{transform:translateY(2px) scale(1)}50%{transform:translateY(-3px) scale(1.08);filter:drop-shadow(0 0 6px var(--brand))}}
body[data-focus="videographer"] .sb-focus .icon,body[data-focus="videographer"] .sb-workspace .icon{animation:vi-reel 4s linear infinite}
@keyframes vi-reel{to{transform:rotate(360deg)}}
body[data-focus="graphic-designer"] .sb-focus .icon,body[data-focus="graphic-designer"] .sb-workspace .icon{animation:gd-snap 3.2s cubic-bezier(.7,0,.3,1) infinite}
@keyframes gd-snap{0%,20%{transform:rotate(0)}25%,45%{transform:rotate(90deg)}50%,70%{transform:rotate(180deg)}75%,95%{transform:rotate(270deg)}100%{transform:rotate(360deg)}}
body[data-focus="illustrator"] .sb-focus .icon,body[data-focus="illustrator"] .sb-workspace .icon{animation:il-draw 2.6s ease-in-out infinite}
@keyframes il-draw{0%,100%{transform:rotate(-6deg) translateX(-1px)}50%{transform:rotate(6deg) translateX(1px)}}
body[data-focus="writer"] .sb-focus .icon,body[data-focus="writer"] .sb-workspace .icon{animation:wr-type 1.4s steps(1) infinite}
@keyframes wr-type{0%,49%{opacity:1}50%,100%{opacity:.35}}
body[data-focus="default"] .sb-focus .icon,body[data-focus="other"] .sb-focus .icon,body[data-focus="default"] .sb-workspace .icon,body[data-focus="other"] .sb-workspace .icon{animation:df-breathe 3s ease-in-out infinite}
@keyframes df-breathe{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.12);opacity:1;filter:drop-shadow(0 0 5px var(--brand))}}

/* ============================================================
   FILE SOURCE PICKER (device / Google Drive / Dropbox)
   ============================================================ */
.fp-wrap{display:flex;flex-direction:column;gap:10px}
.fp-row{display:flex;gap:10px;flex-wrap:wrap}
.fp-src{display:flex;align-items:center;gap:9px;padding:11px 15px;border-radius:12px;cursor:pointer;
  font-family:inherit;font-size:13.5px;font-weight:600;color:var(--ink);
  background:var(--surface-2);border:1px solid var(--line);transition:.18s}
.fp-src:hover{border-color:var(--brand);transform:translateY(-1px);box-shadow:var(--shadow)}
[data-theme="dark"] .fp-src:hover{background:color-mix(in srgb,var(--brand) 8%,transparent)}
.fp-ic{display:inline-flex;color:var(--brand)}
.fp-src .fp-ic svg{display:block}
.fp-picked{align-items:center;gap:9px;padding:10px 14px;border-radius:12px;
  background:color-mix(in srgb,var(--brand) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--brand) 30%,transparent);font-size:13px;font-weight:600}
.fp-check{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:var(--brand);color:#06121a;font-size:12px;font-weight:800}
.fp-name{color:var(--ink);word-break:break-all}

/* Tighter, subtler nav section dividers (less empty gap) */
.sidebar .sb-sep{margin:7px 12px!important;height:1px!important;
  background:linear-gradient(90deg,transparent,var(--line),transparent)!important;opacity:.7}