/* ============================================================
   EFL.ai — Dark Theme · Responsive Rebuild
   Fluid CSS-Grid app shell. No fixed canvas, no transform scaling.
   ============================================================ */

:root{
  --bg:#020716; --panel:#09142cdd; --panel2:#0a1230cc;
  --line:#3356b0aa; --muted:#a5b5d8; --white:#f7fbff;
  --cyan:#00efff; --blue:#0b7bff; --purple:#8d4dff; --pink:#ff33df; --green:#00f2bd; --orange:#ff9c32;
  --shadow:0 22px 60px rgba(0,0,0,.45), inset 0 0 0 1px var(--line);
  --font:'Plus Jakarta Sans',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --display:'Plus Jakarta Sans','Segoe UI',system-ui,sans-serif;

  /* fluid layout knobs */
  --side:clamp(232px, 19vw, 268px);
  --gap:clamp(12px, 1.25vw, 20px);
  --pad:clamp(14px, 1.6vw, 26px);
  --radius:clamp(16px, 1.4vw, 22px);
}

*{box-sizing:border-box}
html{height:100%; font-size:var(--efl-base-size,16px)}
body{
  margin:0; min-height:100dvh; overflow-x:hidden;
  background-color:var(--bg); background-image:radial-gradient(circle at 78% 2%,rgba(7,27,73,.5) 0,transparent 45%); background-attachment:fixed;
  color:var(--white); font-family:var(--font); -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button,input,select,textarea{font:inherit; color:inherit}
button{border:0; color:inherit; background:none; cursor:pointer}
img{display:block; max-width:100%}
svg{width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:2.15; stroke-linecap:round; stroke-linejoin:round}
.symbols{position:absolute; width:0; height:0; overflow:hidden}
:focus-visible{outline:2px solid var(--cyan); outline-offset:2px}

/* ambient particle canvas */
#nebula{position:fixed; inset:0; width:100vw; height:100dvh; z-index:0; opacity:.85; pointer-events:none}

/* soft glass tokens (kept from original look) */
.glass-card{background:linear-gradient(180deg,rgba(9,20,45,.82),rgba(6,11,29,.68)); border:1px solid var(--line); box-shadow:var(--shadow); backdrop-filter:blur(20px)}
.glass-soft{background:linear-gradient(180deg,rgba(17,33,73,.62),rgba(11,18,51,.58)); border:1px solid var(--line); box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),0 16px 40px rgba(0,0,0,.3); backdrop-filter:blur(18px)}

/* ============================================================
   APP SHELL — fluid grid, fills viewport, scrolls naturally
   ============================================================ */
.app{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:var(--side) minmax(0,1fr);
  min-height:100dvh;
  transition:grid-template-columns .34s cubic-bezier(.22,.61,.36,1);
}
.main{min-width:0; display:flex; flex-direction:column}

/* ----------------------- SIDEBAR ----------------------- */
.sidebar{
  position:sticky; top:0; align-self:start; isolation:isolate;
  height:100dvh; overflow:hidden auto; scrollbar-width:thin;
  display:flex; flex-direction:column;
  padding:18px 12px 14px; z-index:20;
  border-radius:0 26px 26px 0;
  background:linear-gradient(160deg,rgba(6,17,38,.92),rgba(6,7,28,.86) 54%,rgba(20,18,78,.6));
  box-shadow:inset -1px 0 0 rgba(71,184,255,.32),0 0 0 1px rgba(80,120,230,.22),15px 0 70px rgba(0,0,0,.48),0 0 55px rgba(0,119,255,.18);
}
.sidebar{scrollbar-color:rgba(90,130,240,.5) transparent}
.sidebar::-webkit-scrollbar{width:8px}
.sidebar::-webkit-scrollbar-track{background:transparent; margin:8px 0}
.sidebar::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(72,150,255,.55),rgba(120,90,240,.55)); border-radius:20px; border:2px solid transparent; background-clip:padding-box}
.sidebar::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,rgba(72,150,255,.85),rgba(120,90,240,.85)); background-clip:padding-box}
.sidebar:before{content:""; position:absolute; inset:0; border-radius:inherit;
  background:radial-gradient(circle at 82% 30%,rgba(0,190,255,.22),transparent 16%),url("assets/sidebar-background.webp") center/cover;
  opacity:.14; filter:saturate(1.4); pointer-events:none}
.sidebar>*{position:relative; z-index:1}

/* ---- Brand / logo (structured, collapse-friendly) ---- */
.brand{flex:0 0 auto; padding:2px 6px 16px 8px; display:flex; align-items:center; gap:11px; overflow:hidden}
.brand-mark{flex:0 0 auto; width:42px; height:42px; display:grid; place-items:center; filter:drop-shadow(0 4px 14px rgba(96,120,250,.4))}
.brand-mark svg{width:42px; height:42px}
.brand-mark img{width:42px; height:42px; object-fit:contain}
.brand-text{min-width:0; display:flex; flex-direction:column; line-height:1.05; transition:opacity .22s ease, max-width .3s ease; max-width:160px; opacity:1; overflow:hidden}
.brand-text b{font-family:var(--display); font-weight:800; font-size:1.5rem; letter-spacing:.2px; white-space:nowrap; color:var(--white)}
.brand-text b i{font-style:normal; background:linear-gradient(90deg,#4f8dff,#a96bff); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.brand-text small{margin-top:2px; font-size:0.65625rem; font-weight:600; letter-spacing:.3px; white-space:nowrap; color:#9fb2da; text-transform:uppercase}

.nav-groups{display:flex; flex-direction:column; gap:2px; flex:1 1 auto}
.nav-title{height:24px; margin:9px 10px 3px 12px; display:flex; align-items:center; gap:12px; text-transform:uppercase; color:#4d82ff; font-size:0.6875rem; font-weight:800; letter-spacing:.7px}
.nav-title span{white-space:nowrap; overflow:hidden; max-width:200px; transition:max-width .3s ease, opacity .2s ease}
.nav-title i{height:1px; flex:1; background:linear-gradient(90deg,rgba(71,100,190,.8),transparent)}

.nav-item{width:100%; min-height:38px; border-radius:11px; padding:0 12px; display:flex; align-items:center; gap:12px; position:relative; font-size:0.875rem; font-weight:750; color:#f1f7ff; transition:.22s ease; overflow:hidden; text-align:left}
.nav-item.small{min-height:32px; font-size:0.8125rem}
.nav-item .icon{font-size:1.25rem; width:22px; flex:0 0 22px; display:grid; place-items:center; color:#fff; filter:drop-shadow(0 0 8px currentColor)}
.nav-item.small .icon{font-size:1.0625rem}
.nav-item .lbl{flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:200px; transition:max-width .3s ease, opacity .2s ease}
.nav-item:hover{background:rgba(35,55,116,.34); box-shadow:inset 0 0 0 1px rgba(78,137,255,.25)}
.nav-item.active{min-height:42px; background:linear-gradient(90deg,var(--efl-grad-1),var(--efl-grad-2) 70%,var(--efl-grad-3)); border:1px solid var(--cyan); box-shadow:0 0 22px rgba(0,173,255,.5),inset 0 0 22px rgba(0,225,255,.17)}
.nav-item em{margin-left:auto; background:linear-gradient(90deg,#075eff,#8f31ff); padding:3px 7px; border-radius:8px; font-size:0.625rem; font-style:normal; font-weight:900; box-shadow:0 0 14px rgba(65,81,255,.65)}
.nav-item .caret{margin-left:auto; width:20px; height:20px; flex:0 0 20px; border-radius:7px; display:grid; place-items:center; background:rgba(8,40,120,.55); color:#cfe6ff; font-size:0.75rem; transition:transform .26s ease, background .2s}
.nav-item .caret:hover{background:#063cff}
.cyan{color:#05f3ff!important}.warm{color:#fff!important}.gold{color:#f6c663!important}.green{color:#00edc1!important}.orange{color:#ff9d32!important}

/* expandable submenu (real dropdowns inside the sidebar) */
.nav-block{display:flex; flex-direction:column}
.nav-block.open .caret{transform:rotate(90deg); background:#063cff; box-shadow:0 0 16px rgba(0,110,255,.7)}
.submenu{display:flex; flex-direction:column; gap:5px; max-height:0; opacity:0; overflow:hidden; margin-left:30px; transition:max-height .3s ease, opacity .25s ease, margin .25s}
.nav-block.open .submenu{max-height:260px; opacity:1; margin-top:5px; margin-bottom:6px}
.submenu button{min-height:31px; border-radius:9px; text-align:left; padding:0 12px; font-size:0.78125rem; font-weight:700; color:#c7d6f5; background:rgba(255,255,255,.035); border:1px solid rgba(98,126,228,.22); transition:.18s}
.submenu button:hover{background:rgba(0,221,255,.12); border-color:#0ef2ff; color:#fff; box-shadow:0 0 16px rgba(0,235,255,.14)}

.storage{flex:0 0 auto; margin:12px 6px 10px; border-radius:14px; padding:12px 13px 11px}
.storage div:first-child{display:flex; justify-content:space-between; align-items:center; font-size:0.75rem; color:#cbdcff}
.storage b{padding:3px 8px; border-radius:10px; background:rgba(255,255,255,.08)}
.storage p{margin:5px 0 9px; font-size:0.75rem; color:#d8e6ff; white-space:nowrap; overflow:hidden; max-width:200px; transition:max-width .3s ease, opacity .2s ease, margin .3s ease}
.bar{height:7px; border-radius:20px; background:rgba(111,107,173,.38); overflow:hidden}
.bar i{display:block; width:21%; height:100%; border-radius:inherit; background:linear-gradient(90deg,#25f5ff,#d92aff); box-shadow:0 0 15px #16e8ff}

.profile{flex:0 0 auto; margin:0 4px; border-radius:18px; display:flex; align-items:center; gap:11px; padding:10px 12px; text-align:left}
.profile img{width:42px; height:42px; flex:0 0 42px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 2px rgba(16,238,255,.75),0 0 18px rgba(0,238,255,.45)}
.profile .lbl{min-width:0; flex:1 1 auto; max-width:200px; overflow:hidden; transition:max-width .3s ease, opacity .2s ease}
.profile b{font-size:0.8125rem; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.profile small{display:block; margin-top:4px; color:#bfd0ef; font-size:0.6875rem}
.profile small i{display:inline-block; width:8px; height:8px; border-radius:50%; margin-left:5px; background:#00a6ff; box-shadow:0 0 8px #00a6ff}
.profile em{margin-left:auto; width:28px; height:28px; flex:0 0 28px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.05); font-size:0.8125rem; transform:rotate(90deg); transition:transform .2s}
.profile[aria-expanded="true"] em{transform:rotate(-90deg)}

/* ----------------------- TOPBAR ----------------------- */
.topbar{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:clamp(10px,1.4vw,22px);
  padding:12px var(--pad);
  background:linear-gradient(180deg,rgba(3,7,22,.86),rgba(3,7,22,.45) 70%,transparent);
  backdrop-filter:blur(8px);
}
.menu-btn{width:48px; height:46px; flex:0 0 auto; border-radius:14px; display:grid; place-items:center; color:#fff; font-size:1.5rem}
.neon-btn{background:rgba(6,12,35,.66); border:1px solid rgba(137,157,255,.52); box-shadow:inset 0 0 20px rgba(255,255,255,.03),0 0 22px rgba(19,90,255,.2)}
.tiny-spark{flex:0 0 auto; color:#22f7ff; font-size:1rem; filter:drop-shadow(0 0 12px #26e7ff)}
.search{flex:1 1 auto; min-width:0; max-width:520px; height:48px; border-radius:14px; display:flex; align-items:center; padding:0 13px 0 16px; color:#fff}
.search>svg{font-size:1.4375rem; color:#fff; margin-right:12px; flex:0 0 auto}
.search input{flex:1; min-width:0; background:transparent; border:0; outline:0; color:#fff; font-size:0.875rem; font-weight:500}
.search input::placeholder{color:#cdd8f4}
.search kbd{flex:0 0 auto; width:46px; height:34px; border-radius:10px; display:grid; place-items:center; background:rgba(65,85,140,.28); border:1px solid rgba(134,156,232,.14); font-size:0.875rem; font-weight:750; color:#fff}

.top-actions{margin-left:auto; flex:0 0 auto; display:flex; align-items:center; gap:clamp(8px,.9vw,16px)}
.round-action{width:46px; height:46px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center; background:rgba(9,14,41,.72); box-shadow:inset 0 0 16px rgba(255,255,255,.025),0 0 18px rgba(32,93,255,.18); font-size:1.3125rem; color:#fff; position:relative; transition:.2s}
.round-action:hover{border-color:#0ef; box-shadow:0 0 20px rgba(0,238,255,.4)}
.round-action.notify span{position:absolute; right:-2px; top:-6px; width:21px; height:21px; border-radius:50%; background:#ff2da9; box-shadow:0 0 14px #ff2da9; display:grid; place-items:center; font-size:0.75rem; font-weight:900}
.round-action.search-mini{display:none}
/* theme toggle: show sun in dark mode, moon in light mode */
.theme-toggle{overflow:hidden}
.theme-toggle svg{position:absolute; transition:transform .32s cubic-bezier(.34,1.4,.5,1), opacity .25s ease}
.theme-toggle .ic-moon{transform:translateY(140%) rotate(-40deg); opacity:0}
.theme-toggle .ic-sun{transform:translateY(0) rotate(0); opacity:1}
html[data-theme="light"] .theme-toggle .ic-sun{transform:translateY(-140%) rotate(40deg); opacity:0}
html[data-theme="light"] .theme-toggle .ic-moon{transform:translateY(0) rotate(0); opacity:1}
.assistant-btn{height:48px; flex:0 0 auto; padding:0 18px; border-radius:24px; background:linear-gradient(100deg,var(--efl-grad-1),var(--efl-grad-2) 58%,var(--efl-grad-3)); border:1px solid var(--cyan); box-shadow:0 0 28px rgba(0,109,255,.8),inset 0 0 18px rgba(255,255,255,.18); display:flex; align-items:center; gap:9px; font-size:0.9375rem; font-weight:850}
.assistant-btn svg{font-size:1.3125rem; color:#00edff}
.avatar{width:54px; height:54px; flex:0 0 auto; border-radius:50%; position:relative; padding:3px; background:linear-gradient(135deg,#fc7d2c,#553bff,#00efff); box-shadow:0 0 26px rgba(0,231,255,.35)}
.avatar img{width:100%; height:100%; border-radius:50%; object-fit:cover; border:3px solid #06132c}
.avatar i{position:absolute; right:3px; bottom:4px; width:13px; height:13px; border-radius:50%; background:#00df88; border:2px solid #06132c; box-shadow:0 0 9px #00e990}

/* ----------------------- CONTENT GRID ----------------------- */
.content{flex:1 1 auto; padding:0 var(--pad) var(--pad); display:flex; flex-direction:column; gap:var(--gap)}
.row-top{display:grid; grid-template-columns:minmax(0,1.92fr) minmax(290px,1fr); gap:var(--gap); align-items:start}
.right-rail{display:flex; flex-direction:column; gap:var(--gap); min-width:0}

/* ----------------------- HERO ----------------------- */
.hero{position:relative; min-width:0; border-radius:var(--radius); overflow:hidden; min-height:clamp(300px,34vw,430px); display:flex}
.hero-img,.hero-img-alt{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 40%}
.hero-img{filter:saturate(1.17) contrast(1.05) brightness(.84)}
.hero-img-alt{opacity:.13; mix-blend-mode:screen; filter:saturate(1.45) brightness(1.05)}
.hero-darken{position:absolute; inset:0; background:linear-gradient(90deg,rgba(1,7,23,.96) 0,rgba(3,8,25,.68) 10%,rgba(3,8,22,.12) 47%,rgba(3,9,28,.2) 75%,rgba(3,8,25,.72) 100%),linear-gradient(180deg,rgba(2,6,19,.1) 0,rgba(2,6,19,.1) 55%,rgba(3,6,18,.96) 100%)}
.hero-copy{position:relative; z-index:4; align-self:center; padding:clamp(20px,3.4vw,46px) clamp(20px,3vw,56px); max-width:640px}
.hero-copy p{margin:0 0 7px; font-size:clamp(0.9375rem,1.5vw,1.1875rem); color:#fff; text-shadow:0 2px 16px rgba(0,0,0,.65)}
.hero-copy h1{font-family:var(--display); margin:0; font-size:clamp(2.125rem,4.7vw,4rem); line-height:.94; font-weight:800; letter-spacing:-.03em; background:linear-gradient(179deg, #50f7ff 0, #05bbed 60%, #a23ff4 77%); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 0 28px rgba(0,239,255,.22)}
.hero-copy h2{margin:clamp(10px,1.4vw,16px) 0 3px; font-size:clamp(1.0625rem,1.9vw,1.5625rem); letter-spacing:-.04em; line-height:1.05; font-weight:800}
.hero-copy h3{margin:0; color:#e5edff; font-size:clamp(0.8125rem,1.2vw,1rem); font-weight:650}
.hero-actions{display:flex; align-items:center; flex-wrap:wrap; gap:clamp(10px,1.3vw,18px); margin-top:clamp(18px,2.4vw,30px)}
.new-project{min-width:190px; height:clamp(50px,5vw,58px); padding:0 22px; border-radius:30px; background:linear-gradient(90deg,var(--efl-grad-1),var(--efl-grad-2) 50%,var(--efl-grad-3)); border:1px solid var(--cyan); box-shadow:0 0 24px rgba(160,42,255,.7),inset 0 0 22px rgba(255,255,255,.19); display:flex; align-items:center; justify-content:center; gap:12px; font-size:clamp(0.9375rem,1.5vw,1.125rem); font-weight:850; position:relative; overflow:hidden}
.new-project:before{content:""; position:absolute; inset:-50%; background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.38) 48%,transparent 62%); transform:translateX(-65%) rotate(10deg); transition:.6s}
.new-project:hover:before,.assistant-btn:hover:before{transform:translateX(60%) rotate(10deg)}
.new-project>svg{font-size:1.5rem;
    stroke-width: 2.8;
    border: 2px solid;
    border-radius: 20px;}
.new-project i{width:22px; height:22px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.23); font-size:0.8125rem}
.circle-play{width:clamp(46px,4.6vw,54px); height:clamp(46px,4.6vw,54px); border-radius:50%; border:1px solid rgba(53,226,255,.83); background:rgba(18,23,67,.56); box-shadow:0 0 20px rgba(28,120,255,.4),inset 0 0 15px rgba(143,36,255,.15); display:grid; place-items:center; color:#7b63ff; font-size:1.375rem}
.circle-play.spark{color:#26efff; filter:drop-shadow(0 0 10px #0bf)}
.circle-play svg{fill: rgb(189 176 255);
    stroke: rgb(39 0 255);
}

/* decorative holographic orb — fixed internal proportions so it never distorts */
.holo-orb{position:absolute; right:clamp(8px,3vw,56px); top:50%; transform:translateY(-50%); width:380px; height:312px; z-index:3; pointer-events:none}
.holo-orb:before{content:""; position:absolute; left:88px; top:36px; width:262px; height:230px; border-radius:50%; background:radial-gradient(circle at 50% 52%,rgba(28,194,255,.18),rgba(44,30,126,.1) 38%,transparent 67%); box-shadow:0 0 55px rgba(0,191,255,.6),inset 0 0 40px rgba(255,20,241,.18)}
.ring{position:absolute; border-radius:50%; border:3px solid transparent; mix-blend-mode:screen}
.ring-a{left:62px; top:12px; width:312px; height:248px; border-left-color:#01f0ff; border-top-color:#017cff; border-right-color:#d929ff; transform:rotate(19deg); box-shadow:0 0 22px #00b7ff}
.ring-b{left:96px; top:37px; width:246px; height:200px; border-left-color:#00efff; border-bottom-color:#ff30dd; border-right-color:#5b6cff; transform:rotate(-27deg); animation:spin 12s linear infinite}
.ring-c{left:112px; top:62px; width:210px; height:150px; border-top-color:#2fffff; border-right-color:#ff2df2; transform:rotate(12deg); opacity:.8}
.orb-grid{position:absolute; left:96px; top:40px; width:246px; height:206px; border-radius:50%; background:linear-gradient(transparent 48%,rgba(43,211,255,.38) 49%,transparent 51%),repeating-linear-gradient(90deg,transparent 0 24px,rgba(20,228,255,.14) 25px 26px),repeating-linear-gradient(0deg,transparent 0 24px,rgba(20,228,255,.12) 25px 26px); -webkit-mask-image:radial-gradient(ellipse at center,#000 45%,transparent 72%); mask-image:radial-gradient(ellipse at center,#000 45%,transparent 72%); opacity:.9; animation:pulse 3s ease-in-out infinite}
.holo-orb b{position:absolute; left:163px; top:146px; transform:translate(-50%,-50%); font-family:var(--display); font-size:clamp(1.75rem,3vw,2.375rem); font-weight:800; letter-spacing:1px; text-shadow:0 0 18px #00cfff,0 0 35px #9451ff}
.person{position:absolute; left:187px; top:212px; width:21px; height:64px; background:#01030b; border-radius:11px 11px 5px 5px; box-shadow:0 0 18px rgba(0,0,0,.8)}
.person:before{content:""; position:absolute; left:5px; top:-13px; width:12px; height:12px; border-radius:50%; background:#02030c}
.person:after{content:""; position:absolute; left:-17px; top:21px; width:56px; height:4px; background:#02030c; border-radius:999px}
.base-light{position:absolute; left:108px; top:272px; width:200px; height:22px; border-radius:50%; background:radial-gradient(ellipse,#7ffcff 0,rgba(0,195,255,.5) 30%,transparent 70%); filter:blur(2px)}

/* ----------------------- RIGHT-RAIL PANELS ----------------------- */
.panel{border-radius:var(--radius); padding:clamp(14px,1.4vw,20px) clamp(16px,1.6vw,22px); min-width:0}
.panel-head{display:flex; align-items:center; justify-content:space-between; gap:10px}
.panel-head h2{margin:0; display:flex; align-items:center; gap:10px; font-size:clamp(0.9375rem,1.4vw,1.0625rem); letter-spacing:-.3px}
.panel-head h2 svg{font-size:1.25rem; color:#06efff; filter:drop-shadow(0 0 9px currentColor)}
.panel-head button{height:31px; padding:0 12px; border-radius:17px; background:rgba(255,255,255,.06); border:1px solid rgba(132,153,255,.2); font-size:0.75rem; font-weight:700; color:#dce7ff; display:inline-flex; align-items:center; gap:6px; transition:.2s}
.panel-head button:hover{border-color:#0ef; background:rgba(0,221,255,.1)}
.panel-head .mini-caret{font-size:0.8125rem; transform:rotate(90deg); color:#9fd6ff}
.panel-head .live-btn i{display:inline-block; width:8px; height:8px; border-radius:50%; background:#00eb91; margin-left:2px; box-shadow:0 0 10px #00eb91; animation:pulse 1.6s ease-in-out infinite}

.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin-top:14px}
.stats article{min-height:66px; padding:8px 6px; border-radius:11px; background:linear-gradient(180deg,rgba(29,49,104,.54),rgba(9,19,49,.67)); box-shadow:inset 0 0 18px rgba(0,0,0,.15); display:grid; place-items:center; text-align:center}
.stats b{font-family:var(--display); font-size:clamp(1.25rem,2vw,1.6875rem); line-height:1; font-weight:800; text-shadow:0 0 15px currentColor}
.stats b small{font-size:0.8125rem}
.stats span{font-size:0.6875rem; font-weight:750; color:#e9eefc; margin-top:3px}
.blue{color:#20dfff}.purple{color:#d43eff}.mint{color:#2cffe6}.pink{color:#ff36e6}

.activity{position:relative}
.wave-wrap{position:relative; height:clamp(64px,7vw,82px); margin-top:14px; overflow:hidden}
.wave-svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.wave-line{fill:none; stroke:url(#waveGrad); stroke-width:2.4; filter:url(#glow)}
.wave-line.back{opacity:.22; stroke-width:9}
.wave-line.front{stroke-dasharray:90 22; animation:dash 5s linear infinite}
.activity-orb{position:absolute; right:41%; top:50%; transform:translateY(-50%); width:clamp(58px,6vw,76px); height:clamp(58px,6vw,76px); border-radius:50%; display:grid; place-items:center; background:radial-gradient(circle,#25fbff 0,#1277ff 27%,#3c20df 48%,rgba(3,7,28,.8) 68%); font-size:1.375rem}
.processing{display:flex; align-items:center; gap:11px; margin-top:14px}
.processing>svg{font-size:1.375rem; color:#e7b6ff; flex:0 0 auto}
.processing span{font-size:0.75rem; line-height:1.25; color:#e6edff; flex:0 0 auto}
.processing .progress{height:5px; flex:1 1 auto; border-radius:999px; background:rgba(75,83,140,.45); overflow:hidden}
.processing .progress i{display:block; height:100%; width:78%; background:linear-gradient(90deg,#19f5ff,#a54cff); box-shadow:0 0 12px #33ddff}
.processing b{font-size:clamp(1rem,1.7vw,1.25rem); flex:0 0 auto}

/* ----------------------- STUDIO STRIP ----------------------- */
.studio-strip{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:var(--gap)}
.studio-card{position:relative; aspect-ratio:1.35/1; border-radius:26px; overflow:hidden; background:#071026; border:2px solid rgb(54 119 255 / 32%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.03),0 17px 42px rgba(0,0,0,.4),0 0 25px rgba(21,97,255,.16); transition:transform .28s ease,box-shadow .28s ease,border-color .28s; cursor:pointer}
.studio-card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(1.18) contrast(1.07) brightness(1.2); transition:transform .5s ease}
.studio-card:before{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 36%,rgba(4,6,19,.9) 82%),radial-gradient(circle at 8% 16%,rgba(255,39,213,.36),transparent 19%); z-index:1}
.studio-card:after{content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 36px rgba(20,231,255,.12); z-index:2; pointer-events:none}
.studio-card:hover{transform:translateY(-7px) scale(1.015); box-shadow:0 24px 60px rgba(0,0,0,.48),0 0 30px rgba(0,238,255,.42)}
.studio-card:hover img{transform:scale(1.09)}
.studio-card.film{border-color: rgb(255 120 42 / 34%)};
.studio-card.pink-card{border-color:rgba(255,77,164,.75)}
.studio-card.green-card{border-color:rgb(0 237 211 / 34%)}
.studio-card.violet-card{border-color:rgba(186,58,255, 34%)}
.badge,.corner{position:absolute; z-index:3; width:36px; height:36px; border-radius:11px; display:grid; place-items:center; background:rgba(80,47,185,.5); border:1px solid rgba(101,223,255,.52); box-shadow:0 0 22px rgba(109,57,255,.6); font-size:1.25rem; color:#24efff}
.badge{left:14px; top:13px}
.corner{right:13px; top:13px; font-size:1.0625rem; background:rgba(122,72,205,.5); color:#fff}
.copy{position:absolute; left:14px; right:12px; bottom:12px; z-index:4; text-shadow:0 2px 10px rgba(0,0,0,.9)}
.copy h3{margin:0 0 4px; font-size:clamp(0.8125rem,1.2vw,0.9375rem); letter-spacing:-.5px}
.copy p{margin:0; color:#fff; font-size:clamp(0.6875rem,1vw,0.75rem); letter-spacing:-.25px}

/* ----------------------- BOTTOM ROW ----------------------- */
.row-bottom{display:grid; grid-template-columns:minmax(0,1.78fr) minmax(300px,0.99fr); gap:var(--gap); align-items:start}
.recent,.pipeline{border-radius:var(--radius); padding:clamp(13px,1.3vw,18px); min-width:0}
.pipeline{position:relative; overflow:hidden}
.section-head{display:flex; align-items:center; justify-content:space-between; gap:10px}
.section-head h2{margin:0; display:flex; align-items:center; gap:10px; font-size:clamp(1rem,1.6vw,1.1875rem); letter-spacing:-.4px}
.section-head h2 span{width:24px; height:24px; border-radius:6px; display:grid; place-items:center; background:#1111a8; border:1px solid #0cf1ff; color:#0cf1ff; box-shadow:0 0 14px rgba(0,238,255,.42); font-size:0.9375rem}
.section-head button{height:32px; border-radius:16px; padding:0 14px; background:rgba(255,255,255,.055); border:1px solid rgba(113,136,234,.25); font-weight:800; font-size:0.75rem; transition:.2s}
.section-head button:hover{border-color:#0ef; background:rgba(0,221,255,.1)}

.project-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; margin-top:12px}
.project-card{position:relative; aspect-ratio:.82/1; border-radius:14px; overflow:hidden; background:#080e22; box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),0 12px 28px rgba(0,0,0,.34); transition:.25s; cursor:pointer}
.project-card:hover{transform:translateY(-5px); border-color:#0ef8ff; box-shadow:0 0 24px rgba(0,238,255,.28),0 18px 42px rgba(0,0,0,.42)}
.project-card img{position:absolute; inset:0; width:100%; height:62%; object-fit:cover; filter:saturate(1.12) brightness(.93); transition:.45s}
.project-card:hover img{transform:scale(1.06)}
.project-card:after{content:""; position:absolute; left:0; right:0; top:40%; bottom:0; background:linear-gradient(180deg,transparent,rgba(3,6,20,.98) 48%); pointer-events:none}
.percent{position:absolute; right:8px; top:8px; z-index:2; padding:5px 10px; border-radius:9px; font-size:0.9375rem; font-weight:900; color:#fff;}
.percent.violet{background:#8030ff}.percent.blue{background:#435cff}.percent.green{background:#00c99b}.percent.orange{background:#b35a13}
.play{position:absolute; left:50%; top:31%; transform:translate(-50%,-50%); z-index:3; width:50px; height:50px; border-radius:50%; display:grid; place-items:center; background:rgba(7,10,25,.65); border:2px solid rgba(255,255,255,.55); box-shadow:0 0 15px rgba(255,255,255,.3); font-size:1.4375rem; backdrop-filter:blur(8px); transition:.2s}
.play:hover{border-color:#0ef; box-shadow:0 0 22px rgba(0,238,255,.5)}
.play svg{transform:translateX(-1px); fill:#fff; stroke:#fff}
.project-meta{position:absolute; left:11px; right:9px; bottom:9px; z-index:3}
.project-meta h3{font-size:0.875rem; margin:0 0 2px; letter-spacing:-.4px}
.project-meta p{font-size:0.6875rem; color:#d8e2fb; margin:0 0 8px}
.avatars{height:22px; display:flex; align-items:center}
.avatars img{width:22px!important; height:22px!important; border-radius:50%; object-fit:cover; margin-right:-5px; border:1px solid #fff; box-shadow:0 0 8px rgba(0,229,255,.45)}
.avatars b{margin-left:8px; font-size:0.6875rem; padding:4px 6px; border-radius:10px; background:rgba(255,255,255,.08)}
.gear{position:absolute; right:0; bottom:2px; width:18px; height:18px; border-radius:50%; border:1px solid #fff; box-shadow:0 0 8px #fff}
.gear:before{content:""; position:absolute; inset:5px; border-radius:50%; background:#fff}
.gear.blue{border-color:#229eff; box-shadow:0 0 8px #229eff}.gear.blue:before{background:#229eff}
.gear.green{border-color:#00ff9d; box-shadow:0 0 8px #00ff9d}.gear.green:before{background:#00ff9d}
.gear.orange{border-color:#ff8e00; box-shadow:0 0 8px #ff8e00}.gear.orange:before{background:#ff8e00}

/* pipeline */
.pipeline{min-height:clamp(240px,26vw,300px)}
.pipeline:before{content:""; position:absolute; right:0; bottom:0; width:46%; height:74%; background:url("assets/02-hologram-human.webp") center/cover; opacity:.22; filter:saturate(1.2); -webkit-mask-image:linear-gradient(90deg,transparent,#000 30%); mask-image:linear-gradient(90deg,transparent,#000 30%); pointer-events:none}
.steps{position:relative; z-index:2; display:flex; flex-direction:column; gap:8px; margin-top:14px; max-width:260px}
.step{min-height:30px; border-radius:15px; background:linear-gradient(90deg,rgba(30,50,104,.78),rgba(18,30,72,.62)); border:1px solid rgba(96,126,220,.48); display:grid; grid-template-columns:28px 22px 1fr auto; align-items:center; gap:8px; text-align:left; color:#fff; padding:4px 12px 4px 6px; font-size:0.71875rem; font-weight:850; position:relative; box-shadow:inset 0 0 16px rgba(255,255,255,.025); transition:.2s}
.step:hover{border-color:#0ef; transform:translateX(3px)}
.step:before{content:""; position:absolute; left:18px; top:-8px; height:8px; width:1px; background:rgba(110,154,255,.38); z-index:-1}
.step:first-child:before{display:none}
.step i{width:23px; height:23px; border-radius:50%; display:grid; place-items:center; background:#00bd8b; color:#fff; font-size:0.8125rem}
.step b{color:#eef6ff}
.step span{letter-spacing:-.2px}
.step em{font-style:normal; justify-self:end; color:#13f7cf; font-size:0.625rem; white-space:nowrap}
.step.ready{background:linear-gradient(90deg,rgba(100,43,184,.85),rgba(36,28,100,.7)); border-color:rgba(130,75,255,.9)}
.step.ready i{background:#7a38ff}.step.ready em{color:#c486ff}
.step.progress{background:linear-gradient(90deg,rgba(188,24,181,.82),rgba(65,25,111,.72)); border-color:rgba(255,38,227,.9)}
.step.progress i{background:#dd00bb}.step.progress em{color:#ffe15b}
.step.wait{opacity:.88}
.step.wait i{background:#27385f; box-shadow:0 0 10px rgba(99,131,255,.25)}
.step.wait em{color:#d7dffc}
.pipe-art{position:absolute; right:45px; bottom:-13px; width:42%; max-width:200px; aspect-ratio:.92/1; z-index:1; opacity:.92; pointer-events:none}
.pipe-art img{width:100%; height:140%; object-fit:cover; object-position:center; -webkit-mask-image:radial-gradient(ellipse at center,#000 45%,transparent 78%); mask-image:radial-gradient(ellipse at center,#000 45%,transparent 78%)}
.pipe-art span{position:absolute; left:18%; bottom:7%; width:72%; height:18px; border-radius:50%; background:radial-gradient(ellipse,#19f8ff,rgba(29,112,255,.45),transparent 68%); filter:blur(2px)}

/* ============================================================
   FLOATING LAYERS (fixed-positioned — work at any size/scroll)
   ============================================================ */
.modal-scrim{position:fixed; inset:0; z-index:60; background:rgba(0,2,11,.5); backdrop-filter:blur(12px); opacity:0; pointer-events:none; transition:.25s ease}
.modal-scrim.show{opacity:1; pointer-events:auto}

.workspace-panel{position:fixed; z-index:64; left:50%; top:50%; transform:translate(-50%,-46%) scale(.985); width:min(1180px,94vw); height:min(840px,88dvh); border-radius:24px; overflow:auto; padding:clamp(18px,2vw,26px); background:linear-gradient(135deg,rgba(8,18,43,.95),rgba(7,9,31,.92) 55%,rgba(17,12,62,.88)); border:1px solid rgba(70,122,255,.58); box-shadow:0 32px 80px rgba(0,0,0,.55),0 0 44px rgba(0,224,255,.18),inset 0 0 0 1px rgba(255,255,255,.035); backdrop-filter:blur(28px); opacity:0; pointer-events:none; transition:.3s cubic-bezier(.2,.8,.2,1)}
.workspace-panel.open{opacity:1; transform:translate(-50%,-50%) scale(1); pointer-events:auto}
.workspace-panel:before{content:""; position:absolute; inset:0; background:radial-gradient(circle at 70% 20%,rgba(0,239,255,.2),transparent 24%),radial-gradient(circle at 25% 85%,rgba(255,43,223,.14),transparent 24%),url("assets/13-hero-city-alt.webp") center/cover; opacity:.2; mix-blend-mode:screen; pointer-events:none}
.workspace-panel>*{position:relative; z-index:1}
.workspace-head{display:flex; align-items:flex-start; justify-content:space-between; gap:14px}
.workspace-title small{display:block; color:#47dfff; text-transform:uppercase; font-size:0.75rem; letter-spacing:.9px; font-weight:900; margin-bottom:6px}
.workspace-title h2{font-family:var(--display); margin:0; font-size:clamp(1.875rem,4vw,3rem); line-height:.94; font-weight:800; letter-spacing:-.06em; background:linear-gradient(180deg,#5dfaff,#08bcf0 45%,#ad41ff); -webkit-background-clip:text; background-clip:text; color:transparent}
.workspace-title p{margin:9px 0 0; color:#dbe8ff; font-size:0.875rem; font-weight:650}
.workspace-close,.modal-close,.chat-close{width:42px; height:42px; flex:0 0 auto; border-radius:50%; background:rgba(255,255,255,.06); border:1px solid rgba(122,160,255,.42); box-shadow:0 0 18px rgba(0,202,255,.18); font-size:1.625rem; line-height:1; display:grid; place-items:center}
.workspace-grid{display:grid; grid-template-columns:1.15fr .85fr .7fr; gap:16px; margin-top:18px}
.workspace-card{position:relative; border-radius:20px; padding:20px; overflow:hidden; min-height:280px; background:linear-gradient(180deg,rgba(15,33,72,.78),rgba(7,10,30,.72)); border:1px solid rgba(83,132,255,.44); box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),0 22px 48px rgba(0,0,0,.32)}
.workspace-card.hero-card{padding:0}
.workspace-card.hero-card img{width:100%; height:100%; object-fit:cover; filter:saturate(1.2) contrast(1.05) brightness(.82)}
.workspace-card.hero-card:after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 36%,rgba(4,7,22,.92))}
.workspace-card.hero-card div{position:absolute; left:20px; right:20px; bottom:18px; z-index:2}
.workspace-card h3{margin:0 0 12px; font-size:1.3125rem; letter-spacing:-.8px}
.workspace-card p{color:#cbdcff; font-size:0.8125rem; line-height:1.45; margin:0}
.workspace-list{display:grid; gap:10px; margin-top:14px}
.workspace-list button{min-height:42px; border-radius:13px; background:rgba(255,255,255,.045); border:1px solid rgba(98,126,228,.32); display:flex; align-items:center; justify-content:space-between; padding:0 14px; font-size:0.8125rem; font-weight:800; color:#e8f3ff; transition:.18s}
.workspace-list button:hover{background:rgba(0,221,255,.12); border-color:#0ef2ff; box-shadow:0 0 18px rgba(0,235,255,.16)}
.workspace-timeline{margin-top:16px; display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.timeline-card{border-radius:18px; background:rgba(10,19,48,.72); border:1px solid rgba(93,121,228,.38); padding:14px; overflow:hidden}
.timeline-card b{font-family:var(--display); font-size:2rem; display:block; color:#25f5ff; filter:drop-shadow(0 0 12px rgba(0,236,255,.45))}
.timeline-card span{font-size:0.8125rem; font-weight:900}
.timeline-card i{display:block; height:78px; margin-top:16px; border-radius:16px; background:linear-gradient(135deg,rgba(0,239,255,.18),rgba(255,43,223,.2)); position:relative; overflow:hidden}
.timeline-card i:before{content:""; position:absolute; left:-20%; top:46%; width:140%; height:2px; background:linear-gradient(90deg,#0ef,#72f,#f2f); box-shadow:0 0 18px #0ef; transform:rotate(-8deg)}

.quick-modal{position:fixed; z-index:72; left:50%; top:50%; width:min(560px,94vw); max-height:90dvh; overflow:auto; border-radius:26px; transform:translate(-50%,-46%) scale(.96); opacity:0; pointer-events:none; padding:24px; background:linear-gradient(145deg,rgba(11,22,53,.97),rgba(8,9,31,.97)); border:1px solid rgba(84,142,255,.56); box-shadow:0 36px 90px rgba(0,0,0,.62),0 0 50px rgba(0,236,255,.18),inset 0 0 0 1px rgba(255,255,255,.035); transition:.26s ease; backdrop-filter:blur(25px)}
.quick-modal.open{opacity:1; transform:translate(-50%,-50%) scale(1); pointer-events:auto}
.modal-head{display:flex; justify-content:space-between; align-items:flex-start; gap:14px; margin-bottom:18px}
.modal-head h2{font-family:var(--display); margin:0; font-size:clamp(1.625rem,3vw,2rem); letter-spacing:-1.5px}
.modal-head p{margin:8px 0 0; color:#b9c9ed; font-size:0.8125rem}
.field-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.field{display:grid; gap:7px}
.field.full{grid-column:1/-1}
.field span{font-size:0.75rem; color:#7fdfff; text-transform:uppercase; font-weight:900; letter-spacing:.6px}
.field input,.field select,.field textarea{min-height:46px; border-radius:14px; background:rgba(255,255,255,.055); border:1px solid rgba(106,139,232,.34); color:#fff; padding:0 14px; outline:none; width:100%}
.field textarea{min-height:84px; padding:12px 14px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:#0ef3ff; box-shadow:0 0 20px rgba(0,238,255,.18)}
.field select option{background:#0b1635}
.modal-actions{display:flex; gap:12px; justify-content:flex-end; flex-wrap:wrap; margin-top:18px}
.primary-action{min-height:45px; border-radius:22px; padding:0 24px; background:linear-gradient(95deg,var(--efl-grad-1),var(--efl-grad-2),var(--efl-grad-3)); border:1px solid var(--cyan); box-shadow:0 0 25px rgba(0,216,255,.35); font-weight:900}
.ghost-action{min-height:45px; border-radius:22px; padding:0 22px; background:rgba(255,255,255,.06); border:1px solid rgba(129,156,255,.34); font-weight:850}

.command{position:fixed; z-index:75; left:50%; top:92px; width:min(600px,92vw); transform:translateY(-10px); transform-origin:top center; border-radius:18px; padding:16px; background:rgba(6,12,35,.97); border:1px solid rgba(80,139,255,.62); box-shadow:0 30px 75px rgba(0,0,0,.55),0 0 44px rgba(0,238,255,.2); backdrop-filter:blur(24px); opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease}
.command.open{opacity:1; transform:translateY(0); pointer-events:auto}
/* fallback centering only when not JS-anchored (mobile / search hidden) */
.command.centered{left:50%; margin-left:calc(min(600px,92vw) / -2)}
.command h3{margin:0 0 10px; font-size:0.875rem; color:#7defff; text-transform:uppercase; letter-spacing:.8px}
.command-row{width:100%; min-height:42px; border-radius:13px; display:flex; align-items:center; gap:12px; padding:0 12px; color:#eaf4ff; font-weight:750; text-align:left}
.command-row:hover,.command-row.active{background:linear-gradient(90deg,rgba(0,224,255,.16),rgba(141,54,255,.12)); box-shadow:inset 0 0 0 1px rgba(0,239,255,.22)}
.command-row svg{font-size:1.125rem; color:#0ef}
.command-empty{padding:16px; color:#a8b8dc; font-size:0.8125rem}

.chat-drawer{position:fixed; right:14px; top:80px; width:min(394px,calc(100vw - 28px)); height:min(808px,calc(100dvh - 96px)); z-index:68; border-radius:24px; background:linear-gradient(180deg,rgba(9,21,50,.96),rgba(8,8,29,.97)); border:1px solid rgba(76,142,255,.58); box-shadow:0 36px 90px rgba(0,0,0,.55),0 0 45px rgba(0,238,255,.22); backdrop-filter:blur(26px); transform:translateX(calc(100% + 30px)); transition:.32s cubic-bezier(.2,.8,.2,1); overflow:hidden; display:flex; flex-direction:column}
.chat-drawer.open{transform:translateX(0)}
.chat-head{flex:0 0 auto; min-height:74px; display:flex; align-items:center; gap:13px; padding:12px 18px; border-bottom:1px solid rgba(84,118,220,.28)}
.chat-head img{width:48px; height:48px; border-radius:16px}
.chat-head b{display:block; font-size:1.125rem}
.chat-head span{font-size:0.75rem; color:#17f2bd; font-weight:800}
.chat-close{margin-left:auto; width:32px; height:32px; font-size:1.25rem}
.chat-body{flex:1 1 auto; padding:17px; display:flex; flex-direction:column; gap:12px; overflow:auto}
.msg{max-width:82%; padding:12px 14px; border-radius:18px; font-size:0.8125rem; line-height:1.35; font-weight:650}
.msg.ai{background:rgba(0,220,255,.13); border:1px solid rgba(0,238,255,.3); align-self:flex-start}
.msg.user{background:linear-gradient(95deg,rgba(93,52,255,.85),rgba(230,41,255,.8)); align-self:flex-end}
.chat-input{flex:0 0 auto; min-height:70px; padding:11px 14px; display:flex; gap:9px; border-top:1px solid rgba(84,118,220,.28)}
.chat-input input{flex:1; border:1px solid rgba(114,151,255,.32); border-radius:18px; background:rgba(255,255,255,.055); color:#fff; padding:0 14px; outline:0}
.chat-input button{width:46px; border-radius:16px; background:linear-gradient(135deg,#00ddff,#a928ff); border:1px solid #0ef; box-shadow:0 0 18px rgba(0,238,255,.32); font-weight:900}

/* generic dropdown menu (profile / avatar / month / notifications) — JS positions via fixed coords */
.menu{position:fixed; z-index:90; min-width:212px; max-width:min(320px,92vw); border-radius:16px; padding:8px; background:rgba(7,13,35,.98); border:1px solid rgba(82,132,255,.5); box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 34px rgba(0,226,255,.16); backdrop-filter:blur(22px); opacity:0; transform:translateY(-6px) scale(.98); transform-origin:top; pointer-events:none; transition:.16s ease}
.menu.open{opacity:1; transform:none; pointer-events:auto}
.menu .menu-title{padding:6px 10px 9px; font-size:0.75rem; font-weight:900; letter-spacing:.6px; color:#7eefff; text-transform:uppercase}
.menu .menu-user{display:flex; align-items:center; gap:10px; padding:6px 8px 10px; border-bottom:1px solid rgba(110,154,255,.22); margin-bottom:6px}
.menu .menu-user img{width:40px; height:40px; border-radius:50%; box-shadow:0 0 0 2px rgba(16,238,255,.6)}
.menu .menu-user b{display:block; font-size:0.875rem}
.menu .menu-user small{display:block; color:#9fb4dd; font-size:0.71875rem; margin-top:2px}
.menu-row{width:100%; min-height:42px; border-radius:11px; display:flex; align-items:center; gap:11px; padding:0 11px; font-size:0.84375rem; font-weight:750; color:#e8f3ff; text-align:left; transition:.15s}
.menu-row:hover{background:linear-gradient(90deg,rgba(0,224,255,.16),rgba(141,54,255,.12)); box-shadow:inset 0 0 0 1px rgba(0,239,255,.22)}
.menu-row .ic{font-size:1.125rem; color:#0ef; flex:0 0 auto}
.menu-row .chk{margin-left:auto; color:#0ef; font-size:1rem; opacity:0}
.menu-row.active .chk{opacity:1}
.menu-row.danger{color:#ff7da6}
.menu-row.danger .ic{color:#ff7da6}
.menu-sep{height:1px; margin:6px 6px; background:linear-gradient(90deg,transparent,rgba(110,154,255,.4),transparent)}
.menu.notif .menu-row{cursor:default}
.menu.notif .menu-row .dot{width:9px; height:9px; flex:0 0 auto; border-radius:50%; background:#ff31cf; box-shadow:0 0 10px #ff31cf}
.menu.notif .menu-row.cyan .dot{background:#0ef; box-shadow:0 0 10px #0ef}
.menu.notif .menu-row.green .dot{background:#00f0b7; box-shadow:0 0 10px #00f0b7}

/* toast */
.toast{position:fixed; right:24px; bottom:24px; z-index:95; padding:12px 18px; border-radius:18px; background:rgba(6,14,39,.9); border:1px solid rgba(0,238,255,.55); box-shadow:0 0 30px rgba(0,238,255,.3); font-size:0.8125rem; font-weight:800; opacity:0; transform:translateY(12px); pointer-events:none; transition:.35s; max-width:calc(100vw - 48px)}
.toast.show{opacity:1; transform:translateY(0)}

/* nav overlay for mobile off-canvas */
.nav-overlay{position:fixed; inset:0; z-index:70; background:rgba(0,2,11,.55); backdrop-filter:blur(6px); opacity:0; pointer-events:none; transition:.3s}

/* ============================================================
   COLLAPSED SIDEBAR (desktop icon rail)
   ============================================================ */
@media (min-width:1025px){
  body.sidebar-collapsed{--side:80px}
  body.sidebar-collapsed .sidebar{padding:18px 10px 14px}
  /* brand: hide wordmark, center the mark */
  body.sidebar-collapsed .brand{justify-content:center; gap:0; padding:2px 0 16px}
  body.sidebar-collapsed .brand-text{max-width:0; opacity:0}
  /* nav items center, labels collapse smoothly */
  body.sidebar-collapsed .nav-item{justify-content:center; gap:0; padding:0 6px}
  body.sidebar-collapsed .nav-item .lbl,
  body.sidebar-collapsed .nav-title span,
  body.sidebar-collapsed .storage p,
  body.sidebar-collapsed .storage div span,
  body.sidebar-collapsed .profile .lbl{max-width:0; opacity:0; margin:0}
  body.sidebar-collapsed .nav-item .caret,
  body.sidebar-collapsed .nav-item em,
  body.sidebar-collapsed .profile em,
  body.sidebar-collapsed .submenu,
  body.sidebar-collapsed .nav-title i{display:none}
  body.sidebar-collapsed .nav-title{margin:12px 0 4px; justify-content:center; min-height:14px}
  body.sidebar-collapsed .nav-title:before{content:""; width:22px; height:2px; border-radius:2px; background:rgba(120,150,240,.45)}
  body.sidebar-collapsed .nav-block.open .submenu{max-height:0; opacity:0; margin:0}
  body.sidebar-collapsed .storage{padding:12px 8px; text-align:center}
  body.sidebar-collapsed .storage div:first-child{justify-content:center}
  body.sidebar-collapsed .profile{justify-content:center; gap:0; padding:0; width:48px; height:48px; margin:14px auto 0; border-radius:50%; align-self:center}
  body.sidebar-collapsed .profile img{margin:0; width:42px; height:42px; flex:0 0 42px}
  body.sidebar-collapsed .profile-login-ic{margin:0; width:42px; height:42px; flex:0 0 42px; border-radius:50%}
}

/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */

/* large laptops: tighten the two big rows */
@media (max-width:1280px){
  .row-top{grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr)}
  .studio-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* tablets / small laptops: stack the major rows, sidebar becomes off-canvas */
@media (max-width:1024px){
  :root{--side:288px}
  .app{grid-template-columns:minmax(0,1fr)}
  .sidebar{position:fixed; left:0; top:0; width:var(--side); height:100dvh; transform:translateX(-105%); z-index:80; border-radius:0 22px 22px 0; transition:transform .32s cubic-bezier(.2,.8,.2,1)}
  body.nav-open .sidebar{transform:none}
  body.nav-open .nav-overlay{opacity:1; pointer-events:auto}
  /* always show full labels inside the mobile drawer */
  .sidebar .lbl,.sidebar em,.sidebar .caret,.nav-title span,.nav-title i{display:flex}
  .nav-item .lbl,.profile .lbl{display:block}

  .row-top{grid-template-columns:minmax(0,1fr)}
  .right-rail{flex-direction:row}
  .right-rail .panel{flex:1 1 0; min-width:0}
  .row-bottom{grid-template-columns:minmax(0,1fr)}
  .holo-orb{right:2vw}
}

/* small tablets / large phones */
@media (max-width:860px){
  .search{display:none}
  .round-action.search-mini{display:grid}
  .assistant-btn b{display:none}
  .assistant-btn{padding:0 14px}
  .right-rail{flex-direction:column}
  .studio-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .holo-orb{display:none}
  .hero-copy{max-width:none}
  .pipeline:before,.pipe-art{opacity:.14}
  .steps{max-width:none}
}

/* phones */
@media (max-width:560px){
  :root{--pad:13px; --gap:12px}
  .topbar{gap:8px}
  .tiny-spark{display:none}
  .round-action{width:42px; height:42px; font-size:1.1875rem}
  .avatar{width:46px; height:46px}
  .top-actions{gap:7px}
  .round-action.chat-toggle{display:none}
  .assistant-btn{display:none}
  .studio-strip{grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px}
  .project-grid{grid-template-columns:repeat(1,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,1fr)}
  .hero{min-height:340px}
  .chat-drawer{right:0; top:0; width:100vw; height:100dvh; border-radius:0}
  .command{top:74px}
  .toast{left:13px; right:13px; bottom:14px}
}

@media (max-width:380px){
  .studio-strip{grid-template-columns:repeat(1,minmax(0,1fr))}
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{50%{opacity:.58; filter:brightness(1.35)}}
@keyframes dash{to{stroke-dashoffset:-224}}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition-duration:.05s!important}
}

/* ============================================================
   THEME SWITCH — global crossfade applied only while toggling
   (added/removed by JS for ~360ms; no permanent cost)
   ============================================================ */
html.theme-switching,
html.theme-switching *{
  transition:background-color .32s ease, background .32s ease, color .32s ease,
             border-color .32s ease, box-shadow .32s ease, fill .32s ease,
             stroke .32s ease, opacity .32s ease !important;
}

/* ============================================================
   LIGHT THEME  ·  html[data-theme="light"]
   Same DOM as dark. Colors / images / treatments only.
   ============================================================ */
html[data-theme="light"]{
  --bg:#f3f6fc; --panel:#ffffff; --panel2:#ffffff;
  --line:#e3e8f4; --muted:#64748b; --white:#1f2738;
  --shadow:0 18px 46px rgba(30,45,90,.10), inset 0 0 0 1px rgba(120,140,200,.10);
}
html[data-theme="light"] body{
  background:#eef2fb radial-gradient(circle at 88% -4%,#ece7fb 0,#eef2fb 34%,#eef1f9 100%) fixed;
  color:var(--white);
}
html[data-theme="light"] #nebula{opacity:0}
:focus-visible{outline-color:#5b6ef5}

/* glass tokens → clean white cards */
html[data-theme="light"] .glass-card{
  background:linear-gradient(180deg,#ffffff,#fbfcff);
  border:1px solid #e6e9f3;
  box-shadow:0 12px 34px rgba(30,45,90,.08), inset 0 0 0 1px rgba(255,255,255,.6);
  backdrop-filter:blur(8px);
}
html[data-theme="light"] .glass-soft{
  background:#f7f9fe;
  border:1px solid #e6e9f3;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5), 0 8px 22px rgba(30,45,90,.06);
}

/* ---------- SIDEBAR ---------- */
html[data-theme="light"] .sidebar{
  background:linear-gradient(170deg,#ffffff,#fbfcff 60%,#f6f4ff);
  box-shadow:1px 0 0 #e6e9f3, 14px 0 50px rgba(30,45,90,.08);
}
html[data-theme="light"] .sidebar:before{
  background:radial-gradient(circle at 84% 22%,rgba(124,108,240,.10),transparent 40%);
  opacity:1; filter:none;
}
html[data-theme="light"] .sidebar{scrollbar-color:#c8d0e8 transparent}
html[data-theme="light"] .sidebar::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#cad2ea,#d6cdf0); background-clip:padding-box;
}
html[data-theme="light"] .sidebar::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,#b6c0e4,#c6baec); background-clip:padding-box;
}

html[data-theme="light"] .brand-text b{color:#1e2538}
html[data-theme="light"] .brand-text b i{-webkit-text-fill-color:transparent}
html[data-theme="light"] .brand-text small{color:#8a96b3}

html[data-theme="light"] .nav-title{color:#8b7cf0}
html[data-theme="light"] .nav-title i{background:linear-gradient(90deg,#d8ddf0,transparent)}
html[data-theme="light"] .nav-title:before{background:#d6dcef}

html[data-theme="light"] .nav-item{color:#334155}
html[data-theme="light"] .nav-item .icon{color:#475569; filter:none}
html[data-theme="light"] .cyan,
html[data-theme="light"] .warm,
html[data-theme="light"] .gold,
html[data-theme="light"] .green,
html[data-theme="light"] .orange{color:#475569 !important}
html[data-theme="light"] .nav-item:hover{
  background:linear-gradient(90deg,#eef2ff,#f4eefe);
  box-shadow:inset 0 0 0 1px #e3e6f6;
}
html[data-theme="light"] .nav-item.active{
  background:linear-gradient(95deg,var(--efl-grad-1),var(--efl-grad-2) 60%,var(--efl-grad-3));
  border:1px solid transparent;
  box-shadow:0 10px 24px rgba(96,108,250,.32);
  color:#fff;
}
html[data-theme="light"] .nav-item.active .icon,
html[data-theme="light"] .nav-item.active .lbl{color:#fff !important}
html[data-theme="light"] .nav-item em{
  background:linear-gradient(90deg,var(--efl-grad-1),var(--efl-grad-3));
  box-shadow:0 4px 10px rgba(96,108,250,.3); color:#fff;
}
html[data-theme="light"] .nav-item .caret{background:#eef1fb; color:#5b6ad0}
html[data-theme="light"] .nav-item .caret:hover{background:#e2e7fb}
html[data-theme="light"] .nav-block.open .caret{background:#4f6dfb; color:#fff; box-shadow:0 4px 12px rgba(79,109,251,.4)}
html[data-theme="light"] .submenu button{
  background:#f6f8fe; border:1px solid #e6e9f3; color:#475569;
}
html[data-theme="light"] .submenu button:hover{
  background:linear-gradient(90deg,#eef2ff,#f4eefe); border-color:#cdd6f5; color:#1e2538;
  box-shadow:0 4px 12px rgba(96,108,250,.12);
}

html[data-theme="light"] .storage div:first-child{color:#475569}
html[data-theme="light"] .storage b{background:#eef1fb; color:#475569}
html[data-theme="light"] .storage p{color:#64748b}
html[data-theme="light"] .bar{background:#e6eaf6}
html[data-theme="light"] .bar i{background:linear-gradient(90deg,#5b8def,#b15bf0); box-shadow:none}

html[data-theme="light"] .profile b{color:#1e2538}
html[data-theme="light"] .profile small{color:#64748b}
html[data-theme="light"] .profile img{box-shadow:0 0 0 2px #fff,0 4px 14px rgba(96,108,250,.3)}
html[data-theme="light"] .profile em{background:#eef1fb; color:#5b6ad0}

/* ---------- TOPBAR ---------- */
html[data-theme="light"] .topbar{
  background:linear-gradient(180deg,rgba(243,246,252,.9),rgba(243,246,252,.5) 70%,transparent);
}
html[data-theme="light"] .menu-btn{color:#475569}
html[data-theme="light"] .neon-btn{
  background:#ffffff; border:1px solid #e3e8f4;
  box-shadow:0 4px 14px rgba(30,45,90,.06);
}
html[data-theme="light"] .tiny-spark{color:#5b6ef5; filter:drop-shadow(0 2px 6px rgba(91,110,245,.4))}
html[data-theme="light"] .search>svg{color:#64748b}
html[data-theme="light"] .search input{color:#1f2738}
html[data-theme="light"] .search input::placeholder{color:#94a3b8}
html[data-theme="light"] .search kbd{background:#eef1fb; border:1px solid #e1e6f4; color:#64748b}

html[data-theme="light"] .round-action{
  background:#ffffff; border:1px solid #e3e8f4; color:#475569;
  box-shadow:0 4px 14px rgba(30,45,90,.06);
}
html[data-theme="light"] .round-action:hover{
  border-color:#c4cdef; box-shadow:0 6px 18px rgba(96,108,250,.18);
}
html[data-theme="light"] .round-action.notify span{
  background:#f43f6e; box-shadow:0 2px 8px rgba(244,63,110,.5); color:#fff;
}
html[data-theme="light"] .assistant-btn{
  background:linear-gradient(100deg,var(--efl-grad-1),var(--efl-grad-2) 58%,var(--efl-grad-3));
  border:1px solid transparent;
  box-shadow:0 10px 26px rgba(96,108,250,.4),inset 0 0 18px rgba(255,255,255,.18);
  color:#fff;
}
html[data-theme="light"] .assistant-btn svg{color:#fff}
html[data-theme="light"] .avatar{box-shadow:0 6px 20px rgba(96,108,250,.3)}
html[data-theme="light"] .avatar img{border:3px solid #fff}
html[data-theme="light"] .avatar i{border:2px solid #fff}

/* ---------- HERO ---------- */
html[data-theme="light"] .hero-img{filter:saturate(1.04) contrast(1.02) brightness(1)}
html[data-theme="light"] .hero-copy p{color:#334155; text-shadow:0 1px 6px rgba(255,255,255,.6)}
html[data-theme="light"] .hero-copy h1{
  background:linear-gradient(179deg,#2f7df6,#3b6ef5 45%,#7c3aed 80%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:none;
}
html[data-theme="light"] .hero-copy h2{color:#1e2538; text-shadow:0 1px 8px rgba(255,255,255,.6)}
html[data-theme="light"] .hero-copy h3{color:#64748b; text-shadow:0 1px 6px rgba(255,255,255,.55)}
html[data-theme="light"] .new-project{
  background:linear-gradient(90deg,var(--efl-grad-1),var(--efl-grad-2) 50%,var(--efl-grad-3));
  border:1px solid transparent;
  box-shadow:0 12px 28px rgba(120,90,250,.4),inset 0 0 22px rgba(255,255,255,.2);
  color:#fff;
}
html[data-theme="light"] .circle-play{
  background:#ffffff; border:1px solid #dfe5f5;
  box-shadow:0 6px 18px rgba(30,45,90,.12); color:#3b6ef5;
}
html[data-theme="light"] .circle-play.spark{color:#7c3aed; filter:none}
html[data-theme="light"] .circle-play svg{fill:#3b6ef5; stroke:#3b6ef5}
html[data-theme="light"] .holo-orb:before{
  background:radial-gradient(circle at 50% 52%,rgba(91,141,239,.16),rgba(124,58,237,.08) 38%,transparent 67%);
  box-shadow:0 0 45px rgba(91,141,239,.35),inset 0 0 36px rgba(124,58,237,.1);
}
html[data-theme="light"] .orb-grid{opacity:.5}
html[data-theme="light"] .holo-orb b{
  background:linear-gradient(90deg,var(--efl-grad-1),var(--efl-grad-2));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  color:#6d4ae0; text-shadow:0 2px 18px rgba(124,58,237,.25);
}

/* ---------- RIGHT-RAIL PANELS ---------- */
html[data-theme="light"] .panel-head h2 svg{color:#4f6dfb; filter:none}
html[data-theme="light"] .panel-head button{
  background:#f4f6fd; border:1px solid #e6e9f3; color:#475569;
}
html[data-theme="light"] .panel-head button:hover{border-color:#c4cdef; background:#eef2ff}
html[data-theme="light"] .panel-head .mini-caret{color:#64748b}

html[data-theme="light"] .stats article{
  background:linear-gradient(180deg,#f7f9fe,#eef2fb);
  box-shadow:inset 0 0 0 1px #eaeefa;
}
html[data-theme="light"] .stats b{text-shadow:none}
html[data-theme="light"] .stats span{color:#64748b}
html[data-theme="light"] .stats .blue{color:#3b6ef5}
html[data-theme="light"] .stats .purple{color:#7c3aed}
html[data-theme="light"] .stats .mint{color:#16a34a}
html[data-theme="light"] .stats .pink{color:#7c3aed}

html[data-theme="light"] .processing span{color:#475569}
html[data-theme="light"] .processing>svg{color:#7c3aed}
html[data-theme="light"] .processing .progress{background:#e6eaf6}
html[data-theme="light"] .processing .progress i{background:linear-gradient(90deg,#3b6ef5,#a14bef); box-shadow:none}

/* ---------- STUDIO STRIP ---------- */
html[data-theme="light"] .studio-card{
  background:#ffffff; border:2px solid #e9edf8;
  box-shadow:0 14px 34px rgba(30,45,90,.08), inset 0 0 0 1px rgba(255,255,255,.6);
}
html[data-theme="light"] .studio-card img{filter:saturate(1.02) contrast(1.01) brightness(1)}
html[data-theme="light"] .studio-card:before{
  background:linear-gradient(180deg,rgba(255,255,255,0) 48%,rgba(255,255,255,.96) 88%);
}
html[data-theme="light"] .studio-card:after{box-shadow:inset 0 0 0 1px rgba(120,140,200,.06)}
html[data-theme="light"] .studio-card:hover{
  box-shadow:0 22px 50px rgba(30,45,90,.14),0 0 0 1px #d6def3;
}
html[data-theme="light"] .studio-card.film{border-color:#fbe3d2}
html[data-theme="light"] .studio-card.pink-card{border-color:#fcd9ea}
html[data-theme="light"] .studio-card.green-card{border-color:#cdeede}
html[data-theme="light"] .studio-card.violet-card{border-color:#e7d9fb}
html[data-theme="light"] .badge{background:#f1ecfd; border:1px solid #e4d8fa; color:#7c3aed; box-shadow:0 4px 12px rgba(124,58,237,.14)}
html[data-theme="light"] .corner{background:#eaf0fe; border:1px solid #d8e3fb; color:#3b6ef5; box-shadow:0 4px 12px rgba(59,110,245,.14)}
html[data-theme="light"] .copy{text-shadow:none}
html[data-theme="light"] .copy h3{color:#1e2538}
html[data-theme="light"] .copy p{color:#64748b}

/* ---------- RECENT PROJECTS ---------- */
html[data-theme="light"] .section-head h2 span{
  background:#eaf0fe; border:1px solid #d8e3fb; color:#3b6ef5; box-shadow:0 4px 12px rgba(59,110,245,.14);
}
html[data-theme="light"] .section-head button{
  background:#f4f6fd; border:1px solid #e6e9f3; color:#475569;
}
html[data-theme="light"] .section-head button:hover{border-color:#c4cdef; background:#eef2ff}
html[data-theme="light"] .project-card{
  background:#ffffff;
  box-shadow:0 12px 28px rgba(30,45,90,.08), inset 0 0 0 1px #eef1f8;
}
html[data-theme="light"] .project-card:hover{
  box-shadow:0 18px 40px rgba(30,45,90,.14),0 0 0 1px #d6def3;
}
/* recent project IMAGES stay vivid/dark — only the card chrome turns light */
html[data-theme="light"] .project-card:after{
  background:linear-gradient(180deg,transparent,#ffffff 52%);
}
html[data-theme="light"] .project-meta h3{color:#1e2538}
html[data-theme="light"] .project-meta p{color:#64748b}
html[data-theme="light"] .avatars img{border:1px solid #fff; box-shadow:0 2px 6px rgba(30,45,90,.18)}
html[data-theme="light"] .avatars b{background:#eef1fb; color:#475569}
html[data-theme="light"] .play{
  background:rgba(255,255,255,.92); border:2px solid #e2e7f5;
  box-shadow:0 6px 16px rgba(30,45,90,.18); backdrop-filter:blur(6px);
}
html[data-theme="light"] .play:hover{border-color:#9fb4f5; box-shadow:0 8px 20px rgba(96,108,250,.28)}
html[data-theme="light"] .play svg{fill:#3b6ef5; stroke:#3b6ef5}

/* ---------- PIPELINE ---------- */
html[data-theme="light"] .pipeline:before{
  background:url("assets/light/14-hologram-human-alt.webp") center/cover;
  opacity:.5; filter:none;
}
html[data-theme="light"] .step{
  background:linear-gradient(90deg,#f5f7fe,#eef2fb);
  border:1px solid #e1e6f4; color:#334155;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);
}
html[data-theme="light"] .step:hover{border-color:#b9c6f2}
html[data-theme="light"] .step:before{background:#d6dcef}
html[data-theme="light"] .step b{color:#1e2538}
html[data-theme="light"] .step i{background:#16a34a; color:#fff}
html[data-theme="light"] .step em{color:#16a34a}
html[data-theme="light"] .step.ready{background:linear-gradient(90deg,#f4eefe,#eef2fb); border-color:#e1d6f8}
html[data-theme="light"] .step.ready i{background:#7c3aed}
html[data-theme="light"] .step.ready em{color:#7c3aed}
html[data-theme="light"] .step.progress{background:linear-gradient(90deg,#fdeaf8,#f4eefe); border-color:#f3d4ec}
html[data-theme="light"] .step.progress i{background:#e24bd0}
html[data-theme="light"] .step.progress em{color:#e2820b}
html[data-theme="light"] .step.wait{background:#f3f5fb; border-color:#e6e9f3; opacity:1}
html[data-theme="light"] .step.wait i{background:#cdd5e6; box-shadow:none}
html[data-theme="light"] .step.wait em{color:#94a3b8}

/* ---------- FLOATING LAYERS (workspace / modal / command / chat / menus) ---------- */
html[data-theme="light"] .modal-scrim{background:rgba(40,55,100,.28)}
html[data-theme="light"] .nav-overlay{background:rgba(40,55,100,.32)}

html[data-theme="light"] .workspace-panel{
  background:linear-gradient(135deg,#ffffff,#fbfcff 55%,#f7f5ff);
  border:1px solid #e6e9f3;
  box-shadow:0 32px 80px rgba(30,45,90,.22),inset 0 0 0 1px rgba(255,255,255,.6);
}
html[data-theme="light"] .workspace-panel:before{
  background:radial-gradient(circle at 70% 20%,rgba(91,141,239,.12),transparent 26%),radial-gradient(circle at 25% 85%,rgba(124,58,237,.08),transparent 26%),url("assets/light/13-hero-city-alt.webp") center/cover;
  opacity:.16; mix-blend-mode:normal;
}
html[data-theme="light"] .workspace-title small{color:#7c3aed}
html[data-theme="light"] .workspace-title h2{
  background:linear-gradient(180deg,#3b6ef5,#7c3aed); -webkit-background-clip:text; background-clip:text; color:transparent;
}
html[data-theme="light"] .workspace-title p{color:#475569}
html[data-theme="light"] .workspace-close,
html[data-theme="light"] .modal-close,
html[data-theme="light"] .chat-close,
html[data-theme="light"] .workspace-card.hero-card div{color:#1e2538}
html[data-theme="light"] .workspace-close,
html[data-theme="light"] .modal-close,
html[data-theme="light"] .chat-close{background:#f1f4fc; border:1px solid #e1e6f4; box-shadow:0 4px 12px rgba(30,45,90,.08)}
html[data-theme="light"] .workspace-card{
  background:linear-gradient(180deg,#f8faff,#f3f5fc); border:1px solid #e6e9f3;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),0 12px 28px rgba(30,45,90,.07);
}
html[data-theme="light"] .workspace-card.hero-card img{filter:saturate(1.04) brightness(1)}
html[data-theme="light"] .workspace-card.hero-card:after{background:linear-gradient(180deg,transparent 40%,rgba(255,255,255,.94))}
html[data-theme="light"] .workspace-card p{color:#64748b}
html[data-theme="light"] .workspace-list button{
  background:#f4f6fd; border:1px solid #e6e9f3; color:#334155;
}
html[data-theme="light"] .workspace-list button:hover{background:#eef2ff; border-color:#c4cdef; box-shadow:0 4px 12px rgba(96,108,250,.12)}
html[data-theme="light"] .timeline-card{background:#f6f8fe; border:1px solid #e6e9f3}
html[data-theme="light"] .timeline-card b{color:#3b6ef5; filter:none}
html[data-theme="light"] .timeline-card i{background:linear-gradient(135deg,rgba(59,110,245,.14),rgba(124,58,237,.14))}
html[data-theme="light"] .timeline-card i:before{background:linear-gradient(90deg,#3b6ef5,#7c3aed); box-shadow:0 0 14px rgba(96,108,250,.4)}

html[data-theme="light"] .quick-modal{
  background:linear-gradient(145deg,#ffffff,#fbfcff); border:1px solid #e6e9f3;
  box-shadow:0 36px 90px rgba(30,45,90,.22),inset 0 0 0 1px rgba(255,255,255,.6);
}
html[data-theme="light"] .modal-head p{color:#64748b}
html[data-theme="light"] .field span{color:#5b6ef5}
html[data-theme="light"] .field input,
html[data-theme="light"] .field select,
html[data-theme="light"] .field textarea{
  background:#f7f8fd; border:1px solid #e2e6f2; color:#1f2738;
}
html[data-theme="light"] .field input:focus,
html[data-theme="light"] .field select:focus,
html[data-theme="light"] .field textarea:focus{border-color:#7c8cf5; box-shadow:0 0 0 3px rgba(124,140,245,.18)}
html[data-theme="light"] .field select option{background:#ffffff; color:#1f2738}
html[data-theme="light"] .primary-action{
  background:linear-gradient(95deg,var(--efl-grad-1),var(--efl-grad-2),var(--efl-grad-3)); border:1px solid transparent;
  box-shadow:0 10px 24px rgba(96,108,250,.32); color:#fff;
}
html[data-theme="light"] .ghost-action{background:#f1f4fc; border:1px solid #e1e6f4; color:#334155}

html[data-theme="light"] .command{
  background:rgba(255,255,255,.98); border:1px solid #e2e7f5;
  box-shadow:0 30px 75px rgba(30,45,90,.2),0 0 0 1px rgba(255,255,255,.6);
}
html[data-theme="light"] .command h3{color:#5b6ef5}
html[data-theme="light"] .command-row{color:#334155}
html[data-theme="light"] .command-row:hover,
html[data-theme="light"] .command-row.active{
  background:linear-gradient(90deg,#eef2ff,#f3edfd); box-shadow:inset 0 0 0 1px #dfe4f6;
}
html[data-theme="light"] .command-row svg{color:#5b6ef5}
html[data-theme="light"] .command-empty{color:#64748b}

html[data-theme="light"] .chat-drawer{
  background:linear-gradient(180deg,#ffffff,#fbfcff); border:1px solid #e6e9f3;
  box-shadow:0 36px 90px rgba(30,45,90,.2);
}
html[data-theme="light"] .chat-head{border-bottom:1px solid #eaeef7}
html[data-theme="light"] .chat-head span{color:#16a34a}
html[data-theme="light"] .msg.ai{background:#eef2fb; border:1px solid #e1e6f4; color:#1f2738}
html[data-theme="light"] .msg.user{background:linear-gradient(95deg,#5b6ef5,#a14bef); color:#fff}
html[data-theme="light"] .chat-input{border-top:1px solid #eaeef7}
html[data-theme="light"] .chat-input input{background:#f7f8fd; border:1px solid #e2e6f2; color:#1f2738}
html[data-theme="light"] .chat-input button{
  background:linear-gradient(135deg,#3b6ef5,#a14bef); border:1px solid transparent;
  box-shadow:0 6px 16px rgba(96,108,250,.3); color:#fff;
}

/* generic dropdown menus — white, dark slate text */
html[data-theme="light"] .menu{
  background:rgba(255,255,255,.99); border:1px solid #e2e7f5;
  box-shadow:0 24px 60px rgba(30,45,90,.18),0 0 0 1px rgba(255,255,255,.6);
}
html[data-theme="light"] .menu .menu-title{color:#5b6ef5}
html[data-theme="light"] .menu .menu-user{border-bottom:1px solid #eaeef7}
html[data-theme="light"] .menu .menu-user img{box-shadow:0 0 0 2px #fff,0 4px 12px rgba(96,108,250,.25)}
html[data-theme="light"] .menu .menu-user small{color:#64748b}
html[data-theme="light"] .menu-row{color:#334155}
html[data-theme="light"] .menu-row:hover{
  background:linear-gradient(90deg,#eef2ff,#f3edfd); box-shadow:inset 0 0 0 1px #dfe4f6;
}
html[data-theme="light"] .menu-row .ic{color:#5b6ef5}
html[data-theme="light"] .menu-row .chk{color:#5b6ef5}
html[data-theme="light"] .menu-row.danger{color:#e11d48}
html[data-theme="light"] .menu-row.danger .ic{color:#e11d48}
html[data-theme="light"] .menu-sep{background:linear-gradient(90deg,transparent,#e1e6f4,transparent)}
html[data-theme="light"] .menu.notif .menu-row .dot{background:#f43f6e; box-shadow:0 0 8px rgba(244,63,110,.5)}
html[data-theme="light"] .menu.notif .menu-row.cyan .dot{background:#3b6ef5; box-shadow:0 0 8px rgba(59,110,245,.5)}
html[data-theme="light"] .menu.notif .menu-row.green .dot{background:#16a34a; box-shadow:0 0 8px rgba(22,163,74,.5)}

/* toast */
html[data-theme="light"] .toast{
  background:#ffffff; border:1px solid #e2e7f5; color:#1f2738;
  box-shadow:0 12px 30px rgba(30,45,90,.16);
}

/* =========================================================================
   EFL Engine — theme additions (empty states, idle, placeholders)
   ========================================================================= */

/* ---- Empty states ---- */
.efl-empty{
	grid-column:1 / -1;
	display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
	gap:14px; padding:38px 24px; min-height:180px;
	border:1px dashed var(--line); border-radius:var(--radius,20px);
	background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0));
	color:var(--muted);
}
.efl-empty-ic{
	width:54px; height:54px; border-radius:16px; display:grid; place-items:center;
	background:rgba(124,140,255,.12); color:var(--white);
}
.efl-empty-ic svg{ width:26px; height:26px; opacity:.9; }
.efl-empty p{ margin:0; font-size:0.84375rem; max-width:42ch; line-height:1.5; }
.efl-empty-cta{
	display:inline-flex; align-items:center; gap:8px; cursor:pointer;
	border:0; border-radius:12px; padding:9px 16px; font-size:0.8125rem; font-weight:600; color:#fff;
	background:linear-gradient(95deg,var(--efl-grad-1,#4f6dfb),var(--efl-grad-2,#7c5cf0) 60%,var(--efl-grad-3,#b07cf0));
	box-shadow:0 10px 22px -10px rgba(124,92,240,.7); transition:filter .15s,transform .15s;
}
.efl-empty-cta:hover{ filter:brightness(1.06); transform:translateY(-1px); }
.efl-empty-cta svg{ width:15px; height:15px; }

/* Activity idle */
.activity.is-idle .wave-wrap{ opacity:.45; filter:saturate(.55); }
.efl-activity-idle{ opacity:.8; }
.efl-activity-idle .progress,.efl-activity-idle b{ display:none; }

/* Pipeline "Not Yet" steps read as neutral/dim */
.pipeline .step.wait em{ opacity:.7; }

/* ---- "Feature not available yet" modal ---- */
.efl-soon-backdrop{
	position:fixed; inset:0; z-index:1200; display:none;
	align-items:center; justify-content:center; padding:20px;
	background:rgba(4,8,22,.62); backdrop-filter:blur(6px);
	opacity:0; transition:opacity .2s ease;
}
.efl-soon-backdrop.is-open{ display:flex; opacity:1; }
.efl-soon{
	width:min(440px,100%); border-radius:22px; padding:26px 24px 22px; text-align:center;
	background:var(--panel); border:1px solid var(--line);
	box-shadow:0 40px 90px -40px rgba(0,0,0,.7);
	transform:translateY(10px) scale(.98); transition:transform .22s ease;
}
.efl-soon-backdrop.is-open .efl-soon{ transform:none; }
.efl-soon-ic{
	width:64px; height:64px; margin:0 auto 14px; border-radius:20px; display:grid; place-items:center;
	background:linear-gradient(135deg,rgba(79,109,251,.22),rgba(176,124,240,.22)); color:var(--white);
}
.efl-soon-ic svg{ width:30px; height:30px; }
.efl-soon h3{ margin:0 0 6px; font-size:1.125rem; color:var(--white); }
.efl-soon p{ margin:0 0 18px; font-size:0.84375rem; color:var(--muted); line-height:1.55; }
.efl-soon .efl-soon-badge{ display:inline-block; margin-bottom:12px; font-size:0.6875rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#cdd6ff; background:rgba(124,140,255,.16); padding:5px 12px; border-radius:999px; }
.efl-soon-close{
	cursor:pointer; border:0; border-radius:12px; padding:10px 22px; font-size:0.84375rem; font-weight:600; color:#fff;
	background:linear-gradient(95deg,var(--efl-grad-1,#4f6dfb),var(--efl-grad-2,#7c5cf0) 60%,var(--efl-grad-3,#b07cf0));
	transition:filter .15s;
}
.efl-soon-close:hover{ filter:brightness(1.06); }

/* ---- My Account modal ---- */
.efl-acct-backdrop{
	position:fixed; inset:0; z-index:1250; display:none; align-items:center; justify-content:center; padding:20px;
	background:rgba(4,8,22,.62); backdrop-filter:blur(6px); opacity:0; transition:opacity .2s ease;
}
.efl-acct-backdrop.is-open{ display:flex; opacity:1; }
.efl-acct{
	width:min(620px,100%); max-height:90vh; overflow:auto; border-radius:22px;
	background:var(--panel); border:1px solid var(--line); box-shadow:0 40px 90px -40px rgba(0,0,0,.7);
	transform:translateY(10px) scale(.98); transition:transform .22s ease;
}
.efl-acct-backdrop.is-open .efl-acct{ transform:none; }
.efl-acct-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--panel); }
.efl-acct-head h3{ margin:0; font-size:1.0625rem; color:var(--white); }
.efl-acct-x{ width:34px; height:34px; border-radius:10px; border:1px solid var(--line); background:transparent; color:var(--muted); font-size:1.25rem; line-height:1; cursor:pointer; transition:color .15s,border-color .15s; }
.efl-acct-x:hover{ color:var(--white); border-color:var(--white); }
.efl-acct-body{ padding:20px 22px 22px; }
.efl-acct-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.efl-acct-field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.efl-acct-field--wide{ grid-column:1 / -1; }
.efl-acct-field span{ font-size:0.75rem; font-weight:600; color:var(--muted); }
.efl-acct-field input,.efl-acct-field select{
	width:100%; font-size:0.84375rem; color:var(--white); background:rgba(255,255,255,.04);
	border:1px solid var(--line); border-radius:11px; padding:10px 12px; font-family:inherit;
}
.efl-acct-field input:focus,.efl-acct-field select:focus{ outline:0; border-color:var(--efl-grad-2,#7c5cf0); box-shadow:0 0 0 3px rgba(124,92,240,.25); }
.efl-acct-field select{ cursor:pointer; }
.efl-acct-field select option{ color:#0f1729; }
.efl-acct-switches{ display:flex; flex-direction:column; gap:12px; margin:18px 0 4px; }
.efl-acct-switch{ display:flex; align-items:center; gap:10px; cursor:pointer; font-size:0.84375rem; color:var(--white); }
.efl-acct-switch input{ position:absolute; opacity:0; width:0; height:0; }
.efl-acct-track{ width:42px; height:24px; border-radius:999px; background:rgba(255,255,255,.16); position:relative; transition:background .18s; flex:0 0 42px; }
.efl-acct-track::after{ content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform .18s; }
.efl-acct-switch input:checked + .efl-acct-track{ background:linear-gradient(120deg,var(--efl-grad-1,#4f6dfb),var(--efl-grad-2,#7c5cf0)); }
.efl-acct-switch input:checked + .efl-acct-track::after{ transform:translateX(18px); }
.efl-acct-actions{ display:flex; align-items:center; gap:14px; margin-top:20px; }
.efl-acct-save{
	cursor:pointer; border:0; border-radius:12px; padding:11px 24px; font-size:0.84375rem; font-weight:600; color:#fff;
	background:linear-gradient(95deg,var(--efl-grad-1,#4f6dfb),var(--efl-grad-2,#7c5cf0) 60%,var(--efl-grad-3,#b07cf0));
	box-shadow:0 10px 22px -10px rgba(124,92,240,.7); transition:filter .15s;
}
.efl-acct-save:hover{ filter:brightness(1.06); }
.efl-acct-save:disabled{ opacity:.6; }
.efl-acct-status{ font-size:0.8125rem; font-weight:600; }
.efl-acct-status.ok{ color:#34d399; }
.efl-acct-status.err{ color:#fb7185; }
.efl-acct-status.busy{ color:var(--muted); }
.efl-acct-foot{ display:flex; gap:18px; margin-top:20px; padding-top:16px; border-top:1px solid var(--line); }
.efl-acct-link{ font-size:0.8125rem; font-weight:600; color:var(--muted); text-decoration:none; }
.efl-acct-link:hover{ color:var(--white); }
.efl-acct-link.danger{ color:#fb7185; margin-left:auto; }
.efl-acct-guest{ text-align:center; padding:24px 10px; display:flex; flex-direction:column; align-items:center; gap:14px; }
.efl-acct-guest p{ margin:0; color:var(--muted); font-size:0.875rem; max-width:38ch; }
@media (max-width:560px){ .efl-acct-grid{ grid-template-columns:1fr; } }

/* ---- Sidebar: organic rounded scrollbar ---- */
.sidebar{ scrollbar-width:thin; scrollbar-color:rgba(124,140,255,.35) transparent; }
.sidebar::-webkit-scrollbar{ width:8px; height:8px; }
.sidebar::-webkit-scrollbar-track{ background:transparent; margin:10px 0; }
.sidebar::-webkit-scrollbar-thumb{
	background:linear-gradient(180deg,rgba(124,140,255,.5),rgba(176,124,240,.4));
	border-radius:999px; border:2px solid transparent; background-clip:padding-box;
}
.sidebar::-webkit-scrollbar-thumb:hover{ background:linear-gradient(180deg,rgba(124,140,255,.75),rgba(176,124,240,.6)); background-clip:padding-box; }
html[data-theme="light"] .sidebar{ scrollbar-color:rgba(79,109,251,.35) transparent; }

/* ---- Sidebar Texture (admin: "Sidebar Texture" image) ---- */
.sidebar::before{
	content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none;
	background-image:var(--efl-side-tex,none); background-size:cover; background-position:center;
	opacity:.5;
}
html[data-theme="light"] body{ background-image:radial-gradient(circle at 80% -10%,rgba(124,140,255,.10) 0,transparent 42%); }

/* ---- Dropdown / chat empty states ---- */
.menu-empty{ padding:16px 14px; text-align:center; font-size:0.8125rem; color:var(--muted); }
.chat-empty{ margin:auto; text-align:center; font-size:0.84375rem; color:var(--muted); padding:30px 18px; line-height:1.6; }

/* =========================================================================
   EFL Engine — guest gate, account tabs, photo upload
   ========================================================================= */

/* ---- Guest controls (replace avatar/profile when signed out) ---- */
/* Guest avatar (topbar) — styled like a real avatar: gradient disc, user glyph,
   neon ring and a muted "offline" status dot. Never flashes the default link red. */
.avatar.avatar--login{
	width:54px; height:54px; border-radius:50%; flex:0 0 auto; position:relative;
	display:grid; place-items:center; text-decoration:none; -webkit-tap-highlight-color:transparent;
	background:linear-gradient(135deg,var(--efl-grad-1),var(--efl-grad-2) 55%,var(--efl-grad-3));
	box-shadow:0 0 26px rgba(0,231,255,.35), inset 0 0 0 3px rgba(255,255,255,.16);
	color:#fff; transition:filter .15s, transform .12s;
}
.avatar.avatar--login:hover{ filter:brightness(1.07); transform:translateY(-1px); }
.avatar.avatar--login svg{ width:24px; height:24px; }
.avatar.avatar--login::after{ content:""; position:absolute; right:2px; bottom:3px; width:13px; height:13px; border-radius:50%; background:#9fb1d8; border:2px solid var(--bg); }
.avatar.avatar--login:link,.avatar.avatar--login:visited,.avatar.avatar--login:hover,.avatar.avatar--login:active,.avatar.avatar--login:focus{ color:#fff; }

.profile.profile--login{ text-decoration:none; align-items:center; -webkit-tap-highlight-color:transparent; }
.profile.profile--login:link,.profile.profile--login:visited,.profile.profile--login:hover,.profile.profile--login:active,.profile.profile--login:focus{ color:inherit; }
.profile.profile--login b{ color:var(--white); }
.profile.profile--login small{ color:var(--muted); }
.profile-login-ic{
	width:38px; height:38px; border-radius:11px; display:grid; place-items:center; flex:0 0 38px;
	background:linear-gradient(135deg,var(--efl-grad-1),var(--efl-grad-2)); color:#fff;
}
.profile-login-ic svg{ width:18px; height:18px; }

/* ---- Login / register gate ---- */
.efl-login-backdrop{
	position:fixed; inset:0; z-index:1300; display:none; align-items:center; justify-content:center; padding:20px;
	background:rgba(3,6,18,.74); backdrop-filter:blur(8px); opacity:0; transition:opacity .2s ease;
}
.efl-login-backdrop.is-open{ display:flex; opacity:1; }
.efl-login{
	width:min(440px,100%); border-radius:24px; padding:30px 26px 22px; text-align:center;
	background:var(--panel); border:1px solid var(--line); box-shadow:0 50px 100px -40px rgba(0,0,0,.75);
	transform:translateY(12px) scale(.97); transition:transform .24s ease;
}
.efl-login-backdrop.is-open .efl-login{ transform:none; }
.efl-login-ic{
	width:70px; height:70px; margin:0 auto 16px; border-radius:22px; display:grid; place-items:center; color:#fff;
	background:linear-gradient(135deg,var(--efl-grad-1),var(--efl-grad-2) 55%,var(--efl-grad-3));
	box-shadow:0 16px 34px -14px rgba(124,92,240,.8);
}
.efl-login-ic svg{ width:32px; height:32px; }
.efl-login h3{ margin:0 0 8px; font-size:1.25rem; color:var(--white); }
.efl-login p{ margin:0 0 22px; font-size:0.875rem; color:var(--muted); line-height:1.55; }
.efl-login-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.efl-login-btn{
	flex:1 1 0; min-width:130px; text-decoration:none; text-align:center; cursor:pointer; border:0;
	border-radius:13px; padding:12px 18px; font-size:0.875rem; font-weight:600; color:#fff;
	background:linear-gradient(95deg,var(--efl-grad-1),var(--efl-grad-2) 60%,var(--efl-grad-3));
	box-shadow:0 12px 24px -12px rgba(124,92,240,.7); transition:filter .15s,transform .15s;
}
.efl-login-btn:hover{ filter:brightness(1.07); transform:translateY(-1px); }
.efl-login-btn.ghost{ background:transparent; color:var(--white); border:1px solid var(--line); box-shadow:none; }
.efl-login-btn.ghost:hover{ border-color:var(--efl-grad-2); }
.efl-login-skip{ margin-top:16px; background:none; border:0; cursor:pointer; color:var(--muted); font-size:0.78125rem; }
.efl-login-skip:hover{ color:var(--white); }

/* ---- Account modal: tabs + photo upload ---- */
.efl-acct-tabs{ display:flex; gap:6px; margin:-2px 0 18px; border-bottom:1px solid var(--line); }
.efl-acct-tab{
	border:0; background:none; cursor:pointer; padding:9px 4px 12px; margin-right:14px;
	font-size:0.84375rem; font-weight:600; color:var(--muted); border-bottom:2px solid transparent; transition:color .15s,border-color .15s;
}
.efl-acct-tab:hover{ color:var(--white); }
.efl-acct-tab.is-active{ color:var(--white); border-bottom-color:var(--efl-grad-2); }
.efl-acct-panel{ display:none; }
.efl-acct-panel.is-active{ display:block; }
.efl-acct-photo{ display:flex; align-items:center; gap:16px; margin-bottom:18px; }
.efl-acct-photo img{ width:76px; height:76px; border-radius:50%; object-fit:cover; border:1px solid var(--line); background:rgba(255,255,255,.05); flex:0 0 76px; }
.efl-acct-photo-side{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.efl-acct-upload{
	align-self:flex-start; cursor:pointer; border:1px solid var(--line); background:rgba(255,255,255,.05);
	color:var(--white); border-radius:10px; padding:8px 14px; font-size:0.8125rem; font-weight:600; transition:border-color .15s,background .15s;
}
.efl-acct-upload:hover{ border-color:var(--efl-grad-2); background:rgba(124,92,240,.12); }
.efl-acct-photo-hint{ font-size:0.71875rem; color:var(--muted); }
.efl-acct-upload-status{ font-size:0.71875rem; font-weight:600; }
.efl-acct-upload-status.ok{ color:#34d399; }
.efl-acct-upload-status.err{ color:#fb7185; }
.efl-acct-upload-status.busy{ color:var(--muted); }

/* =========================================================================
   EFL Engine — in-app auth modal (sign in / register / reset)
   ========================================================================= */
.efl-auth-backdrop{
	position:fixed; inset:0; z-index:1400; display:none; align-items:center; justify-content:center; padding:20px;
	background:rgba(3,6,18,.74); backdrop-filter:blur(10px); opacity:0; transition:opacity .22s ease;
}
.efl-auth-backdrop.is-open{ display:flex; opacity:1; }
.efl-auth{
	position:relative; width:min(860px,100%); max-height:92vh; overflow:hidden; display:grid; grid-template-columns:1fr 1fr;
	border-radius:26px; background:var(--panel); border:1px solid var(--line);
	box-shadow:0 60px 120px -45px rgba(0,0,0,.8);
	transform:translateY(14px) scale(.975); transition:transform .26s cubic-bezier(.2,.8,.2,1);
}
.efl-auth-backdrop.is-open .efl-auth{ transform:none; }
.efl-auth-x{
	position:absolute; top:14px; right:16px; z-index:3; width:34px; height:34px; border-radius:10px;
	border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08); color:#fff; font-size:1.25rem; line-height:1; cursor:pointer; transition:background .15s;
}
.efl-auth-x:hover{ background:rgba(255,255,255,.2); }
/* Art panel */
.efl-auth-art{
	position:relative; overflow:hidden; padding:34px 30px; display:flex; flex-direction:column; justify-content:space-between; color:#fff;
	background:linear-gradient(150deg,var(--efl-grad-1),var(--efl-grad-2) 52%,var(--efl-grad-3));
}
.efl-auth-art-glow{ position:absolute; inset:-30% -30% auto auto; width:80%; height:80%; background:radial-gradient(circle,rgba(255,255,255,.4),transparent 60%); opacity:.5; pointer-events:none; }
.efl-auth-brand{ position:relative; display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.125rem; }
.efl-auth-logo{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:rgba(255,255,255,.2); }
.efl-auth-logo svg{ width:20px; height:20px; }
.efl-auth-art-copy{ position:relative; }
.efl-auth-art-copy h2{ margin:0 0 10px; font-size:1.625rem; line-height:1.15; font-weight:800; letter-spacing:-.02em; }
.efl-auth-art-copy p{ margin:0; font-size:0.84375rem; line-height:1.6; opacity:.92; }
/* Form side */
.efl-auth-main{ padding:30px 30px 26px; overflow:auto; }
.efl-auth-view{ display:none; }
.efl-auth-view.is-active{ display:block; animation:eflAuthIn .28s ease; }
@keyframes eflAuthIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.efl-auth-main h3{ margin:0 0 6px; font-size:1.3125rem; color:var(--white); letter-spacing:-.01em; }
.efl-auth-sub{ margin:0 0 20px; font-size:0.84375rem; color:var(--muted); }
.efl-auth-field{ display:block; margin-bottom:14px; }
.efl-auth-field span{ display:block; font-size:0.75rem; font-weight:600; color:var(--muted); margin-bottom:6px; }
.efl-auth-field input{
	width:100%; box-sizing:border-box; font-size:0.875rem; color:var(--white); font-family:inherit;
	background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:12px; padding:12px 14px; transition:border-color .15s,box-shadow .15s;
}
.efl-auth-field input:focus{ outline:0; border-color:var(--efl-grad-2); box-shadow:0 0 0 3px rgba(124,92,240,.25); }
.efl-auth-hint{ display:block; margin-top:5px; font-size:0.6875rem; color:var(--muted); }
.efl-auth-row{ display:flex; align-items:center; justify-content:space-between; margin:4px 0 18px; gap:10px; flex-wrap:wrap; }
.efl-auth-check{ display:inline-flex; align-items:center; gap:8px; font-size:0.8125rem; color:var(--muted); cursor:pointer; }
.efl-auth-check input{ width:16px; height:16px; accent-color:var(--efl-grad-2); }
.efl-auth-link{ background:none; border:0; cursor:pointer; padding:0; font-size:0.8125rem; font-weight:600; color:var(--efl-grad-2); }
.efl-auth-link:hover{ filter:brightness(1.15); text-decoration:underline; }
.efl-auth-submit{
	width:100%; cursor:pointer; border:0; border-radius:13px; padding:13px; font-size:0.90625rem; font-weight:700; color:#fff;
	background:linear-gradient(95deg,var(--efl-grad-1),var(--efl-grad-2) 60%,var(--efl-grad-3));
	box-shadow:0 14px 28px -12px rgba(124,92,240,.75); transition:filter .15s,transform .12s;
}
.efl-auth-submit:hover{ filter:brightness(1.06); transform:translateY(-1px); }
.efl-auth-submit:disabled{ opacity:.6; transform:none; }
.efl-auth-msg{ min-height:18px; margin:12px 0 0; font-size:0.78125rem; font-weight:600; }
.efl-auth-msg.ok{ color:#34d399; } .efl-auth-msg.err{ color:#fb7185; } .efl-auth-msg.busy{ color:var(--muted); }
.efl-auth-alt{ margin:18px 0 0; font-size:0.8125rem; color:var(--muted); text-align:center; }
@media (max-width:720px){
	.efl-auth{ grid-template-columns:1fr; max-width:440px; }
	.efl-auth-art{ padding:24px 26px; }
	.efl-auth-art-copy{ display:none; }
}

/* Account modal polish: gradient header accent + nicer tabs */
.efl-acct-head{ background:linear-gradient(180deg,rgba(124,92,240,.10),transparent); }
.efl-acct-head h3{ position:relative; padding-left:13px; }
.efl-acct-head h3::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:4px; height:18px; border-radius:3px; background:linear-gradient(180deg,var(--efl-grad-1),var(--efl-grad-3)); }
.efl-acct-pass{
	cursor:pointer; border:0; border-radius:12px; padding:11px 22px; font-size:0.84375rem; font-weight:600; color:#fff;
	background:linear-gradient(95deg,var(--efl-grad-1),var(--efl-grad-2) 60%,var(--efl-grad-3)); box-shadow:0 10px 22px -10px rgba(124,92,240,.7); transition:filter .15s;
}
.efl-acct-pass:hover{ filter:brightness(1.06); }
.efl-acct-pass:disabled{ opacity:.6; }
.efl-acct-pass-status{ font-size:0.8125rem; font-weight:600; }
.efl-acct-pass-status.ok{ color:#34d399; } .efl-acct-pass-status.err{ color:#fb7185; } .efl-acct-pass-status.busy{ color:var(--muted); }

.efl-auth-art.has-img .efl-auth-art-glow{ display:none; }
.efl-auth-art.has-img .efl-auth-art-copy h2,
.efl-auth-art.has-img .efl-auth-art-copy p{ text-shadow:0 2px 14px rgba(0,0,0,.55); }

/* View regions — plugins swap the .content between dashboard and their own views (e.g. billing). */
.view-region{display:flex; flex-direction:column; gap:var(--gap)}
.view-region[hidden]{display:none !important}