/* Compact creator-console visual layer. Business views keep their existing owners and contracts. */
:root{
  --workspace-sidebar-width:208px;
  --workspace-sidebar-collapsed:64px;
  --workspace-topbar-height:68px;
  --workspace-panel-radius:8px;
  --workspace-content-gap:18px;
  --workspace-canvas:#f4f6f5;
  --workspace-panel:#ffffff;
  --workspace-panel-soft:#f8faf9;
  --workspace-sidebar:#171d1b;
  --workspace-sidebar-hover:#252d2a;
  --workspace-accent:#18745f;
  --workspace-accent-strong:#115847;
  --workspace-accent-soft:#e4f2ed;
  --workspace-ink:#151b19;
  --workspace-muted:#596661;
  --workspace-line:#d7dedb;
  --workspace-line-strong:#b9c5c0;
  --workspace-shadow:0 8px 24px rgb(20 31 27 / .07);
}

html[data-theme="dark"]{
  --workspace-canvas:#0d1210;
  --workspace-panel:#141b18;
  --workspace-panel-soft:#19221e;
  --workspace-sidebar:#090e0c;
  --workspace-sidebar-hover:#18231f;
  --workspace-accent:#6bc7ad;
  --workspace-accent-strong:#8edbc3;
  --workspace-accent-soft:#173129;
  --workspace-ink:#f2f6f4;
  --workspace-muted:#b8c4bf;
  --workspace-line:#33413b;
  --workspace-line-strong:#53665d;
  --workspace-shadow:0 10px 30px rgb(0 0 0 / .28);
}

html,body{background:var(--workspace-canvas);color:var(--workspace-ink)}
.app-shell{grid-template-columns:var(--workspace-sidebar-width) minmax(0,1fr);background:var(--workspace-canvas)}
.app-shell.sidebar-collapsed{grid-template-columns:var(--workspace-sidebar-collapsed) minmax(0,1fr)}
.app-shell>main{background:var(--workspace-canvas)}

.sidebar{
  padding:14px 10px;
  border-right:1px solid rgb(255 255 255 / .08);
  background:var(--workspace-sidebar);
}
.sidebar .brand{
  min-height:54px;
  padding:0 4px 13px;
  border-bottom-color:rgb(255 255 255 / .11);
}
.sidebar .brand strong{font-size:17px;font-weight:760}
.sidebar .brand small{color:#aebbb6;font-size:11px}
.sidebar nav{display:grid;gap:3px;padding-top:14px}
.nav-item{
  position:relative;
  height:40px;
  margin:0;
  padding:0 10px;
  border-radius:6px;
  color:#b9c4bf;
}
.nav-item::before{
  position:absolute;
  top:9px;
  bottom:9px;
  left:0;
  width:2px;
  border-radius:1px;
  background:transparent;
  content:"";
}
.nav-item:hover{background:var(--workspace-sidebar-hover);color:#fff;transform:translateX(1px)}
.nav-item.active{background:rgb(255 255 255 / .09);color:#fff;box-shadow:none}
.nav-item.active::before{background:#79d2b8}
.nav-item .nav-label{font-size:13px;font-weight:650}
.sidebar-collapse:hover{background:var(--workspace-sidebar-hover)}

.topbar{
  height:var(--workspace-topbar-height);
  padding:0 20px;
  gap:16px;
  border-color:var(--workspace-line);
  background:color-mix(in srgb,var(--workspace-panel) 88%,transparent);
  box-shadow:0 1px 0 rgb(255 255 255 / .48);
  backdrop-filter:saturate(125%) blur(18px);
  -webkit-backdrop-filter:saturate(125%) blur(18px);
}
.project-heading{gap:10px}
.project-heading .eyebrow{color:var(--workspace-muted);font-size:10px;font-weight:650}
.project-heading h1{max-width:min(29vw,420px);color:var(--workspace-ink);font-size:16px;font-weight:720}
.status-pill{
  max-width:156px;
  padding:4px 8px;
  border-color:color-mix(in srgb,var(--workspace-accent) 34%,var(--workspace-line));
  border-radius:4px;
  background:var(--workspace-accent-soft);
  color:var(--workspace-accent-strong);
  font-size:11px;
}
.top-actions{gap:7px}
.top-actions .button,.top-actions .icon-btn{height:36px;min-height:36px}
.top-actions .button{padding-inline:11px;font-size:12px}
.top-actions .icon-btn{width:36px;border-radius:6px}
.top-actions .account-email{max-width:150px;color:var(--workspace-muted);font-size:11px}
.top-actions #logoutBtn{padding-inline:9px}
.top-actions #logoutBtn span{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

.appearance-mount{display:flex;align-items:center;flex:none}
.topbar .appearance-control{
  position:fixed;
  z-index:3000;
  top:calc(var(--workspace-topbar-height) + max(12px,env(safe-area-inset-top)));
  right:max(18px,env(safe-area-inset-right));
  font-family:inherit;
}
.topbar .appearance-toggle{
  width:36px;
  min-width:36px;
  min-height:36px;
  padding:0;
  border-color:var(--workspace-line-strong);
  border-radius:6px;
  background:var(--workspace-panel);
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.topbar .appearance-toggle span{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.topbar .appearance-toggle:hover{border-color:var(--workspace-accent);background:var(--workspace-accent-soft);color:var(--workspace-accent-strong)}
.topbar .appearance-popover{top:44px;right:0;width:296px;border-radius:8px}
.topbar .appearance-options label{border-radius:6px}

.server-disclosure{
  min-height:34px;
  margin:0;
  padding:7px 22px;
  border-bottom:1px solid var(--workspace-line);
  background:var(--workspace-panel-soft);
  color:var(--workspace-muted);
  font-size:11px;
}
.server-disclosure b{color:var(--workspace-ink)}

.project-state-card,.autopilot-card,.stepper,.page-body{margin-inline:20px}
.project-state-card{
  margin-top:18px;
  padding:12px 14px;
  border:1px solid var(--workspace-line);
  border-radius:var(--workspace-panel-radius);
  background:var(--workspace-panel);
  box-shadow:var(--workspace-shadow);
}
.project-state-summary i{background:var(--workspace-accent)}
.project-state-summary strong{color:var(--workspace-ink);font-size:13px}
.project-state-summary small{color:var(--workspace-muted);font-size:11px}
.project-state-tools .button{min-height:32px;height:32px;font-size:11px}

.autopilot-card{
  position:relative;
  grid-template-columns:minmax(0,1fr) minmax(190px,260px);
  margin-top:12px;
  padding:16px;
  border:1px solid var(--workspace-line);
  border-radius:var(--workspace-panel-radius);
  background:var(--workspace-panel);
  box-shadow:none;
}
.autopilot-card::before{
  position:absolute;
  top:16px;
  bottom:16px;
  left:0;
  width:1px;
  background:var(--workspace-accent);
  content:"";
}
.autopilot-card h2{color:var(--workspace-ink);font-size:17px;line-height:23px}
.autopilot-card p{max-width:72ch;color:var(--workspace-muted);font-size:12px}
.automation-state-summary{gap:0;border:1px solid var(--workspace-line);border-radius:6px;background:var(--workspace-panel-soft)}
.automation-state-summary>div{padding:9px 10px;border-right:1px solid var(--workspace-line)}
.automation-state-summary>div:last-child{border-right:0}
.automation-state-summary dt{color:var(--workspace-muted);font-size:10px}
.automation-state-summary dd{color:var(--workspace-ink);font-size:12px}

.stepper{
  min-height:58px;
  margin-top:12px;
  padding:7px;
  border:1px solid var(--workspace-line);
  border-radius:var(--workspace-panel-radius);
  background:var(--workspace-panel);
}
.step{min-height:42px;border-radius:6px}
.step:hover{background:var(--workspace-panel-soft)}
.step.active{background:var(--workspace-accent-soft);color:var(--workspace-accent-strong)}
.step b{border-color:var(--workspace-line-strong);background:var(--workspace-panel);color:var(--workspace-muted)}
.step.active b{border-color:var(--workspace-accent);background:var(--workspace-accent);color:var(--appearance-action-on-primary)}
.step span{font-size:12px}.step small{color:var(--workspace-muted);font-size:10px}

.page-body{margin-top:var(--workspace-content-gap);padding:0 0 28px}
.content-area{min-width:0}
.view>header,.view>.page-header{margin-bottom:14px}
.view h2{color:var(--workspace-ink)}
.view .eyebrow{color:var(--workspace-accent-strong)}

.panel,.batch-stage,.batch-hero,.manual-delivery-panel,.video-narrative-panel,.advanced-panel,.guide-disclosure,.project-overview-summary,.project-ledger{
  border-color:var(--workspace-line);
  border-radius:var(--workspace-panel-radius);
  background:var(--workspace-panel);
  box-shadow:none;
}
.batch-hero{padding:18px 20px}
.batch-hero h2{font-size:20px;line-height:27px}
.batch-hero p{max-width:72ch;color:var(--workspace-muted)}
.batch-step-nav{border-color:var(--workspace-line);border-radius:var(--workspace-panel-radius);background:var(--workspace-panel)}
.batch-step-nav li{min-width:0}
.batch-stage{padding:16px 18px}
.batch-stage>header{padding-bottom:12px;border-bottom:1px solid var(--workspace-line)}
.batch-stage-number{border-radius:4px;background:var(--workspace-accent-soft);color:var(--workspace-accent-strong)}
.batch-stage h3{font-size:15px}
.batch-stage p,.empty-inline{color:var(--workspace-muted)}

.button{border-radius:6px}
.button.primary{border-color:var(--workspace-accent);background:var(--workspace-accent);color:var(--appearance-action-on-primary);box-shadow:0 3px 10px color-mix(in srgb,var(--workspace-accent) 18%,transparent)}
.button.primary:hover{border-color:var(--workspace-accent-strong);background:var(--workspace-accent-strong);transform:translateY(-1px)}
.button.secondary,.icon-btn{border-color:var(--workspace-line-strong);background:var(--workspace-panel);color:var(--workspace-ink)}
.button.secondary:hover,.icon-btn:hover{border-color:var(--workspace-accent);background:var(--workspace-accent-soft);color:var(--workspace-accent-strong)}
.button:active,.icon-btn:active{transform:scale(.98)}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea{border-radius:6px;background:var(--workspace-panel);color:var(--workspace-ink)}

@media (max-width:1180px){
  :root{--workspace-sidebar-width:188px}
  .top-actions .account-email{display:none}
  .top-actions #exportTopBtn span,.top-actions #importBtn span{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .top-actions #exportTopBtn,.top-actions #importBtn{width:36px;padding:0}
  .autopilot-card{grid-template-columns:1fr}
}

@media (min-width:761px) and (max-width:1100px){
  .app-shell,.app-shell.sidebar-collapsed{grid-template-columns:var(--workspace-sidebar-collapsed) minmax(0,1fr)}
}

@media (max-width:760px){
  .app-shell,.app-shell.sidebar-collapsed{display:block;padding-bottom:68px}
  .topbar{height:60px;padding:0 10px;gap:8px}
  .mobile-menu{display:inline-grid;width:44px;height:44px;min-width:44px;min-height:44px}
  .project-heading{flex:1;gap:7px}
  .project-heading h1{max-width:34vw;font-size:14px}
  .project-heading .eyebrow,.status-pill,.top-actions #logoutBtn,.top-actions #refreshBtn,.top-actions #exportTopBtn{display:none}
  .top-actions{display:flex;gap:5px}
  .top-actions .icon-btn{width:44px;height:44px;min-height:44px}
  .top-actions #settingsBtn{display:grid}
  .top-actions #importBtn{display:grid;width:44px;height:44px;min-height:44px}
  .topbar .appearance-toggle{width:44px;min-width:44px;min-height:44px}
  .topbar .appearance-control{top:calc(60px + max(8px,env(safe-area-inset-top)));right:max(10px,env(safe-area-inset-right))}
  .topbar .appearance-popover{position:absolute;top:52px;right:0;width:min(296px,calc(100vw - 20px))}
  .server-disclosure{padding-inline:12px}
  .server-disclosure b{display:none}
  .project-state-card,.autopilot-card,.stepper,.page-body{margin-inline:10px}
  .project-state-card{margin-top:12px}
  .project-state-tools{width:100%;justify-content:flex-start}
  .automation-state-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
  .automation-state-summary>div:nth-child(2){border-right:0}
  .automation-state-summary>div:nth-child(-n+2){border-bottom:1px solid var(--workspace-line)}
  .stepper{overflow-x:auto;scrollbar-width:thin}
  .step{min-width:176px}
  .page-body{margin-top:12px;padding-bottom:18px}
  .batch-hero,.batch-stage{padding:14px}
  .batch-stage>header{align-items:flex-start;gap:12px}
}

@media (prefers-reduced-motion:reduce){
  .nav-item,.button,.icon-btn{transition:none}
  .nav-item:hover,.button.primary:hover{transform:none}
}

@media (forced-colors:active){
  .nav-item.active,.step.active,.status-pill,.batch-stage-number{border:1px solid Highlight;background:Canvas;color:CanvasText}
  .nav-item::before,.autopilot-card::before{background:Highlight}
}