/* Sparkpro Studio OS — app.css */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --spark-50:#e6f1fb;--spark-100:#b5d4f4;--spark-500:#26A9E0;--spark-600:#0099d4;--spark-800:#0c447c;
  --ink-900:#051825;--ink-800:#0d2d45;--ink-700:#1e4d6b;--ink-600:#2a5f80;--ink-500:#3d6a88;
  --ink-400:#5a8aaa;--ink-300:#90bcd8;--mist:#e8f4ff;--paper:#f5faff;--line:#daeeff;
  --danger:#dc2626;--warning:#d97706;--success:#16a34a;
  --font-sans:'IBM Plex Sans',sans-serif;--font-mono:'IBM Plex Mono',monospace;
  --r:6px;--r-md:8px;--r-lg:12px;
}
html,body{height:100%;font-family:var(--font-sans);font-size:14px;color:var(--ink-800);background:var(--paper);overflow:hidden;-webkit-font-smoothing:antialiased}
::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}

/* LOGIN */
#login{position:fixed;inset:0;z-index:100;}
.login-wrap{background:#fff;border:1px solid var(--line);border-radius:16px;padding:44px;width:100%;max-width:420px;box-shadow:0 8px 40px rgba(0,100,180,.1)}
.login-brand{display:flex;align-items:center;gap:12px;margin-bottom:24px}
.login-brand img{width:40px;height:40px}
.login-brand__name{font-size:22px;font-weight:700;color:var(--ink-900)}
.login-brand__sub{font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-400)}
.login-wrap h1{font-size:20px;font-weight:600;color:var(--ink-900);margin-bottom:6px}
.login-wrap p{font-size:13px;color:var(--ink-400);margin-bottom:24px}
.err{color:var(--danger);font-size:13px;padding:10px 14px;background:#fef2f2;border-radius:var(--r);border:1px solid #fecaca;margin-bottom:14px}
.hidden{display:none!important}

/* SHELL */
.shell{display:flex;height:100vh;overflow:hidden}
.side{width:220px;flex-shrink:0;background:var(--spark-500);display:flex;flex-direction:column;overflow:hidden}
.side__brand{display:flex;align-items:center;gap:9px;padding:14px 12px 12px;border-bottom:1px solid rgba(255,255,255,.18)}
.side__brand img{width:22px;height:22px;filter:brightness(0) invert(1);flex-shrink:0}
.side__name{font-size:15px;font-weight:700;color:#fff}
.side__sub{font-family:var(--font-mono);font-size:7.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.side__nav{flex:1;overflow-y:auto;padding:6px 6px;scrollbar-width:none}
.side__nav::-webkit-scrollbar{display:none}
.side__sec{font-family:var(--font-mono);font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5);padding:12px 8px 3px}
.navlink{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:var(--r);color:rgba(255,255,255,.82);text-decoration:none;font-size:13px;cursor:pointer;position:relative;margin-bottom:1px;transition:background .1s}
.navlink svg{width:15px;height:15px;flex-shrink:0;opacity:.8}
.navlink span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.navlink:hover{background:rgba(255,255,255,.14);color:#fff}
.navlink.on{background:rgba(255,255,255,.2);color:#fff;font-weight:600}
.navlink.on::before{content:'';position:absolute;left:0;top:5px;bottom:5px;width:3px;background:#fff;border-radius:2px}
.navlink.on svg{opacity:1}
.badge{margin-left:auto;background:var(--danger);color:#fff;font-family:var(--font-mono);font-size:9px;font-weight:700;padding:0 5px;border-radius:8px}
.side__foot{padding:10px 10px;border-top:1px solid rgba(255,255,255,.18);flex-shrink:0;display:flex;align-items:center;gap:8px}
.av{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.25);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:700;flex-shrink:0}
.nm{font-size:12px;font-weight:600;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rl{font-family:var(--font-mono);font-size:9px;color:rgba(255,255,255,.55)}

/* MAIN */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.topbar{height:50px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;padding:0 20px;flex-shrink:0}
.topbar__title{display:flex;flex-direction:column;gap:1px}
.topbar__crumb{font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-400)}
.topbar__page{font-size:15px;font-weight:600;color:var(--ink-900)}
.bell{background:var(--spark-50);border:1px solid var(--spark-100);border-radius:var(--r);width:34px;height:34px;cursor:pointer;position:relative;font-size:15px;display:flex;align-items:center;justify-content:center}
.bell__dot{position:absolute;top:-3px;right:-3px;width:9px;height:9px;border-radius:50%;background:var(--danger);border:2px solid #fff}
.page{flex:1;overflow-y:auto;padding:22px 24px 60px}

/* CARDS */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin-bottom:14px}
.card--pad{padding:18px}
.card--hover:hover{box-shadow:0 4px 16px rgba(0,100,180,.08);transform:translateY(-1px);transition:all .15s}
.kpi{padding:16px;text-align:left}
.kpi .n{font-family:var(--font-mono);font-size:26px;font-weight:300;color:var(--ink-900);line-height:1}
.kpi .l{font-family:var(--font-mono);font-size:9px;font-weight:500;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-400);margin-top:6px}

/* TABLE */
table{width:100%;border-collapse:collapse;font-size:13px}
th{padding:8px 13px;text-align:left;color:var(--ink-400);font-family:var(--font-mono);font-size:9px;font-weight:500;text-transform:uppercase;letter-spacing:.1em;border-bottom:1px solid var(--line);background:var(--paper);white-space:nowrap}
td{padding:11px 13px;border-bottom:1px solid var(--line);vertical-align:middle;color:var(--ink-800)}
tr:last-child td{border-bottom:none}
tbody tr{transition:background .07s}
tbody tr:hover td{background:var(--spark-50)}
td.b{font-weight:600}td.muted,.muted{color:var(--ink-400)}td.mono{font-family:var(--font-mono);font-size:11px}
.clickable{cursor:pointer}
.empty{display:flex;align-items:center;justify-content:center;padding:36px;font-size:13px;color:var(--ink-400)}

/* CHIPS */
.chip{display:inline-flex;align-items:center;gap:4px;font-family:var(--font-mono);font-size:9px;font-weight:500;padding:2px 8px;border-radius:20px;border:1px solid var(--line);background:#fff;color:var(--ink-500);white-space:nowrap}
.chip .d{width:6px;height:6px;border-radius:50%;background:currentColor}
.chip--ok{background:#eaf3de;border-color:transparent;color:#27500a}
.chip--blue{background:var(--spark-50);border-color:transparent;color:var(--spark-800)}
.chip--warn{background:#fef3c7;border-color:transparent;color:#92400e}
.chip--danger{background:#fef2f2;border-color:transparent;color:#991b1b}
.chip.cgi,.chip--cgi{background:rgba(124,58,237,.1);color:#5b21b6;border-color:transparent}
.chip.studio,.chip--studio{background:rgba(8,145,178,.1);color:#0e7490;border-color:transparent}
.chip.status,.chip--status{font-size:9px;text-transform:capitalize}
.role{font-family:var(--font-mono);font-size:9px;padding:2px 8px;border-radius:20px;border:1px solid currentColor}
.role--admin{color:var(--spark-800)}.role--cgi{color:#7c3aed}.role--studio{color:#0891b2}.role--cs{color:#0099d4}.role--qc{color:#d97706}.role--client{color:var(--ink-500)}

/* BUTTONS */
.btn{padding:6px 14px;border-radius:var(--r);border:1px solid var(--line);background:#fff;color:var(--ink-600);font-size:12px;font-weight:500;cursor:pointer;font-family:var(--font-sans);display:inline-flex;align-items:center;gap:6px;transition:all .1s;white-space:nowrap;text-decoration:none}
.btn:hover{border-color:var(--spark-500);color:var(--spark-600);background:var(--spark-50)}
.btn--primary{background:var(--spark-500);color:#fff;border-color:var(--spark-600);font-weight:700}
.btn--primary:hover{background:var(--spark-600);border-color:var(--spark-600);color:#fff}
.btn--ghost{border-color:transparent;color:var(--ink-400);background:transparent}
.btn--ghost:hover{border-color:var(--line);color:var(--ink-600);background:var(--paper)}
.btn--sm{padding:3px 10px;font-size:11px}
.btn--block{width:100%;justify-content:center;padding:10px}
.btn:disabled{opacity:.35;cursor:not-allowed}

/* FORMS */
.field{margin-bottom:12px}
.field label{display:block;font-family:var(--font-mono);font-size:8.5px;font-weight:500;color:var(--ink-400);text-transform:uppercase;letter-spacing:.09em;margin-bottom:4px}
.input{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r);font-size:13px;font-family:var(--font-sans);color:var(--ink-800);background:#fff;outline:none;transition:border-color .1s}
.input:focus{border-color:var(--spark-500)}
textarea.input{resize:vertical;min-height:56px;line-height:1.5}
select.input option{background:#fff}
.grid{display:grid;gap:12px}.grid.g2{grid-template-columns:1fr 1fr}.grid.g3{grid-template-columns:1fr 1fr 1fr}

/* SPINNER */
.spinner{width:22px;height:22px;border:2px solid var(--line);border-top-color:var(--spark-500);border-radius:50%;animation:spin .5s linear infinite;margin:60px auto}
@keyframes spin{to{transform:rotate(360deg)}}

/* KANBAN */
.kanban{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px}
.kcol{min-width:190px;max-width:190px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.kcol__h{padding:9px 12px;font-size:12px;font-weight:600;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.kcol__h .c{font-family:var(--font-mono);font-size:10px;background:currentColor;color:#fff;padding:1px 6px;border-radius:8px;opacity:.8}
.kcard{padding:9px 10px;border-bottom:1px solid var(--line)}
.kcard:last-child{border-bottom:none}
.kcard .t{font-size:12px;font-weight:600;color:var(--ink-800)}

/* SETTINGS TABS */
.stab{display:flex;align-items:center;gap:8px;padding:10px 14px;font-size:13px;cursor:pointer;border-left:3px solid transparent;color:var(--ink-500);transition:all .1s}
.stab:hover{background:#fff;color:var(--ink-800)}

/* SEC HEAD (section header with action) */
.sec-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.sec-head h3{font-size:15px;font-weight:500;color:var(--ink-900)}
.sec-head h4{font-size:13px;font-weight:500;color:var(--ink-800)}

/* ROW UTILITY */
.row{display:flex}.row.ac{align-items:center}.row.jb{justify-content:space-between}.row.wrap{flex-wrap:wrap}

/* SPLIT LOGIN */
/* ============================ LOGIN — premium split ============================ */
@keyframes spkFloat{0%,100%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(0,-18px) rotate(4deg)}}
@keyframes spkFloat2{0%,100%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(14px,-10px) rotate(-6deg)}}
@keyframes spkFadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes spkFadeIn{from{opacity:0}to{opacity:1}}
@keyframes spkShimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes spkPulseDot{0%,100%{opacity:.4}50%{opacity:1}}

.login-split{display:flex;height:100vh;overflow:hidden}

.login-left{
  width:46%;flex-shrink:0;min-height:100vh;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;padding:48px;
  background:
    radial-gradient(ellipse 600px 500px at 18% 12%, rgba(255,255,255,.16), transparent 60%),
    radial-gradient(ellipse 500px 600px at 90% 88%, rgba(255,255,255,.10), transparent 55%),
    linear-gradient(155deg, #1690c9 0%, #26A9E0 38%, #3ec0ee 78%, #5fd0f5 100%);
}
.login-left::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(ellipse 70% 70% at 50% 40%, #000 0%, transparent 75%);
}
.login-orb{position:absolute;border-radius:50%;pointer-events:none;filter:blur(2px)}
.login-orb--1{width:260px;height:260px;top:-60px;right:-70px;background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.22), rgba(255,255,255,0) 70%);animation:spkFloat 9s ease-in-out infinite}
.login-orb--2{width:170px;height:170px;bottom:6%;left:-50px;background:radial-gradient(circle at 40% 40%, rgba(255,255,255,.16), rgba(255,255,255,0) 70%);animation:spkFloat2 11s ease-in-out infinite}
.login-orb--3{width:90px;height:90px;top:18%;left:8%;background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.14), rgba(255,255,255,0) 70%);animation:spkFloat 7s ease-in-out infinite reverse}

.login-left__inner{max-width:380px;width:100%;position:relative;z-index:1;animation:spkFadeUp .7s cubic-bezier(.16,1,.3,1) both}

.login-logo{display:flex;align-items:center;gap:13px;margin-bottom:52px}
.login-logo__mark{
  width:44px;height:44px;border-radius:13px;flex-shrink:0;
  background:rgba(255,255,255,.16);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.3);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 18px rgba(0,30,60,.18), inset 0 1px 0 rgba(255,255,255,.25);
}
.login-logo__mark img{width:24px;height:24px;filter:brightness(0) invert(1)}
.login-logo__name{font-size:19px;font-weight:700;color:#fff;letter-spacing:-.2px;line-height:1.15}
.login-logo__sub{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.65);margin-top:2px}

.login-headline{
  font-size:38px;font-weight:700;color:#fff;line-height:1.16;margin-bottom:16px;letter-spacing:-1px;
}
.login-headline em{font-style:normal;position:relative;white-space:nowrap}
.login-headline em::after{
  content:'';position:absolute;left:0;right:0;bottom:3px;height:9px;
  background:rgba(255,255,255,.28);border-radius:3px;z-index:-1;
}
.login-sub{font-size:14.5px;color:rgba(255,255,255,.82);line-height:1.65;margin-bottom:36px;max-width:320px;font-weight:300}

.login-pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:44px}
.login-pill{
  font-family:var(--font-mono);font-size:10px;font-weight:500;padding:6px 13px;border-radius:20px;
  background:rgba(255,255,255,.13);color:#fff;border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(4px);transition:all .2s;letter-spacing:.02em;
}
.login-pill:hover{background:rgba(255,255,255,.22);transform:translateY(-1px)}

.login-stats{display:flex;gap:28px;padding-top:28px;border-top:1px solid rgba(255,255,255,.18)}
.login-stat__n{font-family:var(--font-mono);font-size:22px;font-weight:600;color:#fff;line-height:1}
.login-stat__l{font-size:10.5px;color:rgba(255,255,255,.65);margin-top:5px;letter-spacing:.02em}

.login-right{
  flex:1;display:flex;align-items:center;justify-content:center;padding:40px;
  background:
    radial-gradient(ellipse 700px 500px at 80% -10%, var(--spark-50), transparent 60%),
    #ffffff;
  min-height:100vh;position:relative;
}
.login-form-wrap{
  background:#fff;border:1px solid var(--line);border-radius:20px;padding:44px 42px;
  width:100%;max-width:392px;
  box-shadow:0 2px 8px rgba(8,60,100,.04), 0 24px 56px -16px rgba(8,60,100,.14);
  animation:spkFadeUp .7s cubic-bezier(.16,1,.3,1) .1s both;
}
.login-form-wrap .login-badge{
  display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10px;font-weight:500;
  color:var(--spark-600);background:var(--spark-50);border:1px solid var(--spark-100);
  padding:4px 11px;border-radius:20px;margin-bottom:18px;letter-spacing:.04em;
}
.login-form-wrap .login-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--spark-500);animation:spkPulseDot 2s ease-in-out infinite}
.login-form-wrap h2{font-size:25px;font-weight:700;color:var(--ink-900);margin-bottom:7px;letter-spacing:-.4px}
.login-form-wrap p{font-size:13.5px;color:var(--ink-400);margin-bottom:30px;line-height:1.5}

#loginForm .field{margin-bottom:18px}
#loginForm .field label{
  display:block;font-family:var(--font-mono);font-size:9px;font-weight:600;color:var(--ink-500);
  text-transform:uppercase;letter-spacing:.1em;margin-bottom:7px;
}
#loginForm .input{
  height:46px;font-size:14px;border-radius:11px;border:1.5px solid var(--line);
  padding:0 16px;transition:border-color .15s,box-shadow .15s,background .15s;background:var(--paper);
}
#loginForm .input:hover{border-color:var(--spark-100)}
#loginForm .input:focus{border-color:var(--spark-500);background:#fff;box-shadow:0 0 0 4px var(--spark-50)}
#loginForm .input::placeholder{color:var(--ink-300)}

#liBtn{
  height:48px;border-radius:11px;font-size:14px;font-weight:600;margin-top:6px;
  background:linear-gradient(135deg, var(--spark-500), var(--spark-600));
  border:none;box-shadow:0 4px 14px rgba(38,169,224,.32), inset 0 1px 0 rgba(255,255,255,.2);
  transition:transform .15s, box-shadow .15s;letter-spacing:.01em;
}
#liBtn:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(38,169,224,.4), inset 0 1px 0 rgba(255,255,255,.25)}
#liBtn:active{transform:translateY(0)}
#liBtn:disabled{opacity:.7;transform:none}

.err{animation:spkFadeIn .25s ease}

@media(max-width:880px){.login-left{display:none}.login-right{width:100%}}
@media(max-width:460px){.login-form-wrap{padding:32px 24px;border-radius:16px}.login-form-wrap h2{font-size:22px}}