/* Creator AI premium workspace layer
   Scoped to .app so public marketing surfaces keep their existing light identity. */

.app{
  --bg:#0b0b0c;
  --panel:#141416;
  --ink:#f5f5f7;
  --text:#f5f5f7;
  --muted:#8e8e93;
  --line:rgba(255,255,255,.09);
  --border:rgba(255,255,255,.09);
  --card:#141416;
  --accent:#f5f5f7;
  --soft:#1c1c1e;
  --good:#4bd98b;
  --warn:#f6b94b;
  --radius:22px;
  --shadow:0 18px 52px rgba(0,0,0,.20);
  min-height:100vh;
  background:
    radial-gradient(circle at 72% -12%,rgba(255,255,255,.055),transparent 31%),
    #0b0b0c;
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  color-scheme:dark;
  -webkit-text-size-adjust:100%;
}
.app ::selection{background:rgba(255,255,255,.20);color:#fff}
.app button:focus-visible,
.app a:focus-visible,
.app input:focus-visible,
.app select:focus-visible,
.app textarea:focus-visible{outline:2px solid #f5f5f7;outline-offset:2px}

.app .sidebar{
  position:sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  padding:22px 14px 18px;
  border-right:1px solid var(--line);
  background:rgba(16,16,18,.84);
  backdrop-filter:saturate(150%) blur(28px);
  -webkit-backdrop-filter:saturate(150%) blur(28px);
  scrollbar-width:none;
}
.app .sidebar::-webkit-scrollbar{display:none}

.app .brand{
  gap:11px;
  padding:6px 9px 24px;
}
.app .logo{
  width:36px;
  height:36px;
  border-radius:11px;
  background:linear-gradient(145deg,#fafafa,#d5d5d8);
  color:#111113;
  box-shadow:0 7px 18px rgba(0,0,0,.22),inset 0 0 0 1px rgba(255,255,255,.72);
  font-size:14px;
  letter-spacing:-.04em;
}
.app .brand strong{
  color:#f5f5f7;
  font-size:16px;
  font-weight:650;
  letter-spacing:-.025em;
}
.app .nav{flex:1;align-content:start;display:grid;gap:18px}
.app .nav-group{display:grid;gap:3px}
.app .nav-label{
  padding:0 11px 6px;
  color:#5f5f65;
  font-size:9px;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  user-select:none;
}
.app .nav button{
  color:#98989d;
  font-size:13px;
  font-weight:520;
}
.app .nav button:hover{
  color:#f1f1f3;
  background:rgba(255,255,255,.055);
}
.app .nav button.active{
  color:#fff;
  background:rgba(255,255,255,.095);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.055);
}
.app .nav button.active::before{background:#f5f5f7}
.app .nav button:focus-visible{outline-color:#f5f5f7}
.app .nav-icon{opacity:.88}
.app .nav button.active .nav-icon{opacity:1}

.app .profile-card{
  margin-top:18px;
  padding:13px;
  border:1px solid rgba(255,255,255,.065);
  border-radius:16px;
  background:rgba(255,255,255,.035);
}
.app .profile-card small{color:#77777d;font-size:10px;text-transform:uppercase;letter-spacing:.09em}
.app .profile-card strong{display:block;color:#dcdcdf;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app .profile-card .logout-btn{margin-top:10px;border:0;cursor:pointer}

.app .main{
  max-width:1480px;
  padding:36px 40px 48px;
}
.app .topbar{
  min-height:66px;
  margin-bottom:30px;
}
.app .page-heading{min-width:0}
.app .eyebrow{
  color:#77777d;
  font-size:10px;
  font-weight:650;
  letter-spacing:.13em;
}
.app h1{
  margin-top:6px;
  color:#f5f5f7;
  font-size:clamp(32px,3.2vw,42px);
  font-weight:650;
  letter-spacing:-.052em;
}
.app .top-actions{gap:9px}
.app .pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:38px;
  padding:0 13px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.035);
  color:#a9a9ae;
  font-size:12px;
  font-weight:540;
}
.app .status-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#4bd98b;
  box-shadow:0 0 0 3px rgba(75,217,139,.10);
}
.app .avatar{
  width:40px;
  height:40px;
  border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(145deg,#29292d,#18181b);
  color:#f5f5f7;
  font-size:12px;
  font-weight:650;
  letter-spacing:.02em;
  box-shadow:0 7px 20px rgba(0,0,0,.16);
}

.app .card{
  border-color:var(--line);
  background:rgba(20,20,22,.92);
  box-shadow:0 16px 46px rgba(0,0,0,.15);
}
.app .list-card{padding:22px}
.app .mini,
.app .agent,
.app .hook,
.app .clip-card{
  border-color:var(--line);
  background:rgba(255,255,255,.025);
}
.app .action,
.app .service,
.app .edit-segment{border-color:var(--line)}

.app .input,
.app .select,
.app .textarea{
  min-height:44px;
  border-color:rgba(255,255,255,.095);
  background:#111113;
  color:#f5f5f7;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018);
}
.app .input::placeholder,
.app .textarea::placeholder{color:#68686e}
.app .input:focus,
.app .select:focus,
.app .textarea:focus{
  border-color:rgba(255,255,255,.26);
  box-shadow:0 0 0 4px rgba(255,255,255,.055);
}
.app .select option{background:#1c1c1e;color:#f5f5f7}

.app .primary,
.app .secondary{
  min-height:44px;
  transition:transform .16s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.app .primary{
  background:#f5f5f7;
  color:#111113;
  font-weight:650;
  box-shadow:0 8px 24px rgba(0,0,0,.16);
}
.app .primary:hover:not(:disabled){
  background:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,.22);
  transform:translateY(-1px);
}
.app .secondary{
  border-color:rgba(255,255,255,.10);
  background:rgba(255,255,255,.045);
  color:#e7e7ea;
  font-weight:600;
}
.app .secondary:hover:not(:disabled){
  border-color:rgba(255,255,255,.16);
  background:rgba(255,255,255,.075);
}
.app .primary:active:not(:disabled),
.app .secondary:active:not(:disabled){transform:scale(.985)}
.app .primary:focus-visible,
.app .secondary:focus-visible{outline:2px solid #f5f5f7;outline-offset:2px}

.app .badge{
  background:rgba(255,255,255,.06);
  color:#aaaab0;
}
.app .demo-banner{
  border-color:rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:#9b9ba1;
}
.app .demo-banner strong{color:#e5e5e8}
.app .section-head h2{color:#eaeaed;font-weight:620}
.app .section-head span,
.app .intro,
.app .action-reason,
.app .service-meta,
.app .studio-note{color:#8e8e93}

.app .ai-edit-conversation{
  margin-top:22px;
  padding:22px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:20px;
  background:
    radial-gradient(circle at 88% 0%,rgba(255,255,255,.07),transparent 35%),
    rgba(255,255,255,.025);
}
.app .ai-edit-conversation h3{margin:8px 0 6px;font-size:22px;letter-spacing:-.035em}
.app .ai-edit-preset-row,
.app .ai-edit-actions,
.app .ai-edit-operation-list{display:flex;gap:8px;flex-wrap:wrap}
.app .ai-edit-preset-row{margin:2px 0 4px}
.app .ai-edit-quick-controls{
  border:1px solid rgba(255,255,255,.075);
  border-radius:16px;
  padding:13px 14px;
  background:rgba(255,255,255,.018);
}
.app .ai-edit-quick-controls summary{cursor:pointer;color:#aaaab0;font-size:12px;font-weight:600}
.app .ai-edit-control-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;margin:13px 0}
.app .ai-edit-control-grid label{display:grid;gap:6px;color:#77777d;font-size:10px;font-weight:650;letter-spacing:.05em;text-transform:uppercase}
.app .ai-edit-revision{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.app .ai-edit-operation-list{margin:10px 0}
.app .ai-edit-actions{margin-top:14px}
.app .ai-edit-preview-result{display:grid;gap:10px;margin-top:12px}
.app .ai-edit-original{margin-top:16px}
.app .ai-edit-original summary{cursor:pointer;color:#77777d}
.app .ai-video-create-card{
  background:
    radial-gradient(circle at 92% 4%,rgba(255,255,255,.06),transparent 34%),
    rgba(20,20,22,.92);
}
.app .ai-video-create-card>h3{margin:8px 0 6px;font-size:24px;letter-spacing:-.04em}
.app .ai-video-plan{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}

@media(max-width:1050px){
  .app .sidebar{padding:18px 10px}
  .app .brand{padding-left:0;padding-right:0}
  .app .nav{gap:12px}
  .app .nav-label{display:none}
  .app .nav-group{gap:3px}
  .app .main{padding:32px 28px 44px}
  .app .ai-edit-control-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:720px){
  .app .sidebar{display:none}
  .app .main{padding:22px 16px 112px}
  .app .topbar{margin-bottom:23px}
  .app .top-actions .pill,
  .app .top-actions .pwa-install-compact{display:none}
  .app .mobile-nav{
    background:rgba(18,18,20,.92);
    border-top-color:rgba(255,255,255,.08);
    backdrop-filter:saturate(150%) blur(24px);
    -webkit-backdrop-filter:saturate(150%) blur(24px);
  }
  .app .mobile-nav{scroll-snap-type:x proximity;overscroll-behavior-x:contain;padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}
  .app .mobile-nav button{min-height:44px;color:#8e8e93;scroll-snap-align:center}
  .app .ai-edit-control-grid{grid-template-columns:1fr}
  .app .mobile-nav button.active{background:#f5f5f7;color:#111113}
  .app .mobile-nav button:focus-visible{outline-color:#f5f5f7}
}
@media(prefers-reduced-motion:reduce){
  .app *,
  .app *::before,
  .app *::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}