*{box-sizing:border-box}
html{background:var(--background-deep)}
body{margin:0;min-height:100vh;color:var(--ink);background:
  radial-gradient(circle at 12% -8%,var(--wash-signal),transparent 46%),
  radial-gradient(circle at 96% 4%,var(--wash-aurora),transparent 42%),
  radial-gradient(circle at 78% 92%,var(--wash-ember),transparent 40%),
  radial-gradient(circle at 8% 78%,var(--wash-violet),transparent 36%),
  linear-gradient(165deg,var(--background-deep) 0%,var(--pearl) 48%,#eef8f5 100%);font:14px/1.55 var(--font);letter-spacing:-.01em;-webkit-font-smoothing:antialiased}
::selection{background:rgba(143,182,255,.35)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.45}
input,select,textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--paper);outline-color:var(--signal)}
textarea{min-height:120px;resize:vertical}
a{color:var(--primary)}
h1,h2,h3,p{margin-top:0}
h1{font-size:30px;font-weight:620;letter-spacing:-.04em;line-height:1.15;margin-bottom:8px}
h2{font-size:18px;font-weight:600;letter-spacing:-.02em}
h3{font-size:15px;font-weight:600;letter-spacing:-.015em}
.muted{color:var(--muted)}
.small{font-size:12px;letter-spacing:0}
.shell{display:grid;grid-template-columns:232px 1fr;min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;background:linear-gradient(180deg,#080b18 0%,var(--nav) 100%);color:rgba(196,210,230,.78);padding:28px 18px}
.brand{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:10px 12px;margin:0 8px 4px;text-decoration:none;color:inherit}
.brand-logo{display:block;height:22px;width:auto;max-width:168px;object-fit:contain}
.brand-mark{display:inline-flex;align-items:center;padding:5px 11px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(255,255,255,.06);color:rgba(156,218,255,.88);font-size:12px;font-weight:650;letter-spacing:.16em;text-transform:uppercase;line-height:1}
.sidebar .small{margin-left:8px;color:rgba(175,192,213,.72)}
.nav{position:relative;width:100%;text-align:left;margin-top:6px;border:0;border-radius:var(--radius-sm);background:transparent;color:rgba(185,202,221,.88);padding:12px 14px;letter-spacing:-.01em}
.nav:first-of-type{margin-top:26px}
.nav.active{background:rgba(143,182,255,.14);color:#fff}
.nav-badge{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;margin-left:8px;padding:0 4px;border-radius:999px;background:#e94b4b;color:white;font-size:10px;font-weight:600;line-height:16px;vertical-align:middle}
.nav-badge[hidden]{display:none}
.message-list{display:grid;gap:12px}
.message-item{padding:18px 20px;border:1px solid rgba(216,220,227,.85);border-radius:12px;background:rgba(246,247,249,.55);animation:rise .4s ease both;animation-delay:calc(var(--i,0) * 45ms)}
.message-item.unread{border-color:rgba(143,182,255,.45);background:linear-gradient(180deg,#f7faff 0%,rgba(255,255,255,.92) 100%)}
.message-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.message-head strong{margin-right:8px}
.unread-tag{background:#fff0f0;color:#d43f3f;margin-left:2px}
.message-actions{display:flex;gap:12px;justify-content:flex-end;align-items:center}
.nav.secondary{margin-top:8px;background:none;color:rgba(185,202,221,.88)}
.todo-row{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 8px}
.todo-chip{border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:8px 14px;color:var(--ink)}
.todo-chip b{margin-left:6px;color:var(--primary)}
.todo-chip.warn{border-color:rgba(237,179,141,.55);background:#fff8f1}
.home-board{display:grid;gap:22px}
.home-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap}
.home-lead{margin:0;max-width:36em}
.home-hero h1{margin-bottom:10px}
.pipeline{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.pipe{display:grid;gap:4px;text-align:left;padding:18px 16px;border:1px solid rgba(216,220,227,.9);border-radius:var(--radius);background:rgba(255,255,255,.88);box-shadow:0 12px 36px rgba(18,23,35,.05);backdrop-filter:blur(8px);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.pipe:hover{transform:translateY(-2px);border-color:rgba(143,182,255,.55);box-shadow:0 18px 44px rgba(18,23,35,.08)}
.pipe-count{font-size:28px;font-weight:650;letter-spacing:-.04em;line-height:1;color:var(--ink)}
.pipe-label{font-size:14px;font-weight:600;color:var(--graphite)}
.pipe-hint{margin-top:2px}
.pipe.warn{border-color:rgba(237,179,141,.65);background:linear-gradient(180deg,#fff8f1 0%,rgba(255,255,255,.92) 100%)}
.pipe.warn .pipe-count{color:#a86a35}
.pipe.idle .pipe-count{color:var(--muted)}
.home-recent{padding:20px}
.home-recent-head{margin-bottom:14px}
.home-recent-head h2{margin:0}
.work-list{display:grid;gap:10px}
.work-card{display:grid;grid-template-columns:56px 1fr;gap:14px;align-items:center;width:100%;text-align:left;padding:12px;border:1px solid transparent;border-radius:12px;background:rgba(246,247,249,.55);transition:background .18s ease,border-color .18s ease,transform .18s ease;animation:rise .4s ease both;animation-delay:calc(var(--i,0) * 45ms)}
.work-card:hover{background:rgba(255,255,255,.95);border-color:rgba(143,182,255,.35);transform:translateX(2px)}
.work-cover{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:12px;font-size:20px;font-weight:650;color:#fff;letter-spacing:-.02em;background:
  linear-gradient(145deg,rgba(79,127,209,.95),rgba(135,214,199,.82) 70%,rgba(237,179,141,.7));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.work-meta{display:grid;gap:6px;min-width:0}
.work-meta strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.work-metrics{letter-spacing:0}
.home-empty{padding:42px 18px 28px;text-align:center}
.home-empty-mark{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;margin-bottom:14px;border-radius:18px;font-size:28px;color:#fff;background:linear-gradient(145deg,#4f7fd1,#87d6c7)}
.home-empty h3{margin:0 0 8px}
.home-empty .button{margin-top:16px}
.reveal{animation:rise .45s ease both}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.reveal,.work-card,.pipe,.message-item,.suggestion-item{animation:none!important;transition:none}}
.suggestion-list{display:grid;gap:12px}
.suggestion-item{padding:18px 20px;border:1px solid rgba(216,220,227,.85);border-radius:12px;background:rgba(246,247,249,.55);animation:rise .4s ease both;animation-delay:calc(var(--i,0) * 45ms)}
.suggestion-item header{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:8px}
.suggestion-item .reply{margin-top:12px;padding:12px;border-radius:var(--radius-sm);background:rgba(255,255,255,.88);border:1px solid rgba(216,220,227,.7)}
.home-lead b{color:var(--ink);font-weight:650}
.side-bottom{position:absolute;left:18px;right:18px;bottom:24px;padding:0;font-size:12px}
.profile{display:flex;align-items:center;gap:10px;padding:10px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
.avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:0 0 auto;background:#243044}
.avatar.fallback{display:inline-flex;align-items:center;justify-content:center;color:white;font-weight:600;font-size:14px}
.profile-meta{min-width:0;flex:1}
.profile-meta strong{display:block;color:white;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profile-meta .ghost{padding:4px 0;color:rgba(159,179,201,.9)}
.main{position:relative;min-width:0;min-height:100vh;isolation:isolate;background:
  radial-gradient(circle at 8% -6%,var(--wash-signal),transparent 48%),
  radial-gradient(circle at 100% 0%,var(--wash-aurora),transparent 44%),
  radial-gradient(circle at 86% 100%,var(--wash-ember),transparent 42%),
  radial-gradient(circle at 0% 72%,var(--wash-violet),transparent 38%),
  linear-gradient(165deg,var(--background-deep) 0%,var(--pearl) 52%,#eef8f5 100%)}
.main::before,.main::after{content:"";pointer-events:none;position:absolute;z-index:0;border-radius:50%;border:1px solid transparent}
.main::before{right:-10%;top:4%;width:min(52vw,520px);height:min(52vw,520px);border-top-color:rgba(143,182,255,.22);border-right-color:rgba(167,139,250,.12);opacity:.85}
.main::after{left:-8%;bottom:6%;width:min(42vw,420px);height:min(42vw,420px);border-bottom-color:rgba(135,214,199,.2);border-left-color:rgba(143,182,255,.1)}
.content{position:relative;z-index:1;padding:36px 40px;max-width:1500px;margin:auto}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.spread{justify-content:space-between}
.actions-bar{justify-content:flex-end;margin:8px 0 28px;padding:18px 0;border-top:1px solid var(--line)}
.button{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--paper);padding:10px 18px;font-weight:550;letter-spacing:-.01em}
.primary{color:white;background:var(--primary);border-color:var(--primary)}
.ghost{border:0;background:none;color:var(--muted)}
.danger{color:var(--danger)}
.card{background:rgba(255,255,255,.92);border:1px solid rgba(216,220,227,.85);border-radius:var(--radius);box-shadow:0 18px 50px rgba(18,23,35,.07);backdrop-filter:blur(10px);padding:24px;margin-bottom:20px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:25px 0}
.stat b{display:block;font-size:28px;font-weight:620;letter-spacing:-.03em;margin-top:8px}
.stat{padding:21px;background:rgba(255,255,255,.9);border:1px solid rgba(216,220,227,.85);border-radius:var(--radius);box-shadow:0 12px 36px rgba(18,23,35,.05);backdrop-filter:blur(8px)}
.filters{margin-bottom:20px}
.filters input{max-width:280px}
.filters select{width:150px}
.table-wrap{overflow:auto}
table{border-collapse:collapse;width:100%;text-align:left;white-space:nowrap}
th{font-size:12px;color:var(--muted);font-weight:550;background:var(--pearl);letter-spacing:.02em}
th,td{padding:18px 15px;border-bottom:1px solid var(--line)}
.tag{display:inline-block;font-size:12px;padding:4px 9px;border-radius:999px;background:var(--primary-soft);color:#3d6eb8}
.tag.changes_requested{background:#fff4ea;color:#a86a35}
.tag.published{background:#e8f7f3;color:var(--success)}
.empty{text-align:center;padding:70px 20px;color:var(--muted)}
.editor-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px}
.editor-side{display:grid;gap:12px;align-content:start}
.side-panel{background:rgba(255,255,255,.92);border:1px solid rgba(216,220,227,.85);border-radius:var(--radius);box-shadow:0 18px 50px rgba(18,23,35,.07);backdrop-filter:blur(10px);padding:18px 16px}
.side-panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.side-panel-head h3{margin:0;font-size:14px;letter-spacing:-.01em}
.side-count{display:inline-flex;align-items:center;padding:3px 9px;border-radius:999px;background:#fff4ea;color:#a86a35;font-size:11px;font-weight:600;letter-spacing:.02em}
.side-count.ready{background:#e8f7f3;color:var(--success)}
.side-tip{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border-radius:var(--radius-sm);font-size:13px;font-weight:550;line-height:1.4;margin-bottom:12px}
.side-tip.warn{background:#fff4ea;border:1px solid rgba(237,179,141,.55);color:#a86a35}
.side-tip.ready{background:#e8f7f3;border:1px solid rgba(47,143,122,.25);color:var(--success)}
.side-check{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:18px;height:18px;margin-top:1px;border-radius:50%;background:var(--success);color:#fff;font-size:12px;font-weight:700;line-height:1}
.side-tip .side-check{margin-top:0}
.side-empty{padding:18px 8px 8px;text-align:center}
.side-empty p{margin:0 0 6px;color:var(--ink);font-size:13px;font-weight:550}
.side-empty .small{margin:0}
.side-empty-pending .side-check{display:inline-flex;vertical-align:middle;margin:-2px 4px 0 0}
#work-form[data-locked="true"]{opacity:.92}
#work-form[data-locked="true"] input,#work-form[data-locked="true"] select,#work-form[data-locked="true"] textarea{background:#f3f5f8;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.field{display:block}
.field span{display:block;margin-bottom:7px;font-size:13px;font-weight:500;color:var(--graphite)}
.field.check{display:flex;align-items:center}
.field.check span{display:flex;gap:8px;align-items:center;margin:0}
.field.check input{width:auto}
.full{grid-column:1/-1}
.drop{border:1px dashed #c9d2de;border-radius:var(--radius-sm);padding:18px;background:var(--pearl);min-height:150px}
.drop input{margin-top:12px;background:white;font-size:12px}
.drop h3{margin-bottom:4px}
.asset{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 0;word-break:break-all}
.asset button{padding:4px}
.credit{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;margin-bottom:8px}
.credit-group{padding:15px 0;border-top:1px solid var(--line)}
.checklist{padding:0;margin:0;list-style:none;max-height:38vh;overflow:auto}
.checklist li{display:flex;align-items:flex-start;gap:8px;padding:7px 2px;border-bottom:1px solid rgba(216,220,227,.7);font-size:12.5px;line-height:1.45;color:var(--graphite)}
.checklist li:last-child{border-bottom:0}
.checklist .dot{flex:0 0 auto;width:6px;height:6px;margin-top:6px;border-radius:50%;background:#d0b08a}
.checklist .todo .dot{background:#d0b08a}
.checklist .ok{color:var(--success)}
.checklist .ok .dot{background:var(--aurora)}
.checklist .bad{color:var(--danger)}
.alert{padding:15px 18px;border:1px solid rgba(237,179,141,.55);background:#fff8f1;border-radius:var(--radius-sm);margin:18px 0;color:#926426}
.timeline{border-left:2px solid var(--line);padding-left:20px}
.timeline article{margin:0 0 22px;position:relative}
.timeline article:before{content:'';width:8px;height:8px;position:absolute;left:-25px;top:7px;border-radius:50%;background:var(--signal)}
.prewrap{white-space:pre-wrap;word-break:break-word}
.sticky{position:sticky;top:20px}
.login{min-height:100vh;display:grid;grid-template-columns:1.12fr 1fr}
.login-story{position:relative;overflow:hidden;color:white;padding:12vh 8vw;display:flex;flex-direction:column;justify-content:center;background:
  radial-gradient(circle at 74% 42%,rgba(47,121,157,.18),transparent 28%),
  radial-gradient(circle at 16% 18%,rgba(143,182,255,.18),transparent 34%),
  radial-gradient(circle at 88% 82%,rgba(135,214,199,.14),transparent 30%),
  linear-gradient(145deg,#03050d 0%,#080b18 58%,#04060f 100%)}
.login-story::before,.login-story::after{content:"";pointer-events:none;position:absolute;border-radius:50%;border:1px solid transparent}
.login-story::before{right:-12%;top:8%;width:46vw;height:46vw;max-width:560px;max-height:560px;border-top-color:rgba(143,182,255,.28);border-right-color:rgba(167,139,250,.18);opacity:.9}
.login-story::after{right:6%;bottom:-18%;width:38vw;height:38vw;max-width:420px;max-height:420px;border-bottom-color:rgba(135,214,199,.22);border-left-color:rgba(143,182,255,.12)}
.login-story-inner{position:relative;z-index:1;max-width:520px}
.login-story .brand{margin:0 0 36px;gap:12px 14px}
.login-story .brand-logo{height:30px;max-width:236px}
.login-story .brand-mark{padding:6px 12px;font-size:13px;letter-spacing:.14em}
.login-story h1{font-size:clamp(2.4rem,4.2vw,3.4rem);font-weight:630;line-height:.98;letter-spacing:-.045em;margin:0 0 18px}
.login-story p{color:rgba(196,210,230,.78);font-size:16px;line-height:1.65;max-width:26em;margin:0}
.login-form{position:relative;overflow:hidden;padding:56px 48px;display:flex;justify-content:center;align-items:center;background:
  radial-gradient(circle at 18% -10%,var(--wash-signal),transparent 48%),
  radial-gradient(circle at 100% 8%,var(--wash-aurora),transparent 44%),
  radial-gradient(circle at 70% 110%,var(--wash-ember),transparent 42%),
  linear-gradient(165deg,var(--background-deep) 0%,var(--pearl) 50%,#eef8f5 100%)}
.login-form::before,.login-form::after{content:"";pointer-events:none;position:absolute;border-radius:50%;border:1px solid transparent}
.login-form::before{right:-18%;top:6%;width:min(58vw,460px);height:min(58vw,460px);border-top-color:rgba(143,182,255,.3);border-right-color:rgba(167,139,250,.16)}
.login-form::after{left:-16%;bottom:-12%;width:min(48vw,380px);height:min(48vw,380px);border-bottom-color:rgba(135,214,199,.26);border-left-color:rgba(143,182,255,.12)}
.login-box{position:relative;z-index:1;max-width:400px;width:100%;padding:28px 26px;border:1px solid rgba(216,220,227,.9);border-radius:calc(var(--radius) + 4px);background:rgba(255,255,255,.88);box-shadow:0 24px 64px rgba(18,23,35,.08);backdrop-filter:blur(14px)}
.login-box h2{font-size:26px;letter-spacing:-.03em;margin-bottom:6px}
.login-box .field{margin:20px 0}
.login-box .primary{width:100%;margin-top:10px;padding:12px 18px;border-radius:999px;font-weight:600}
.tabs{display:flex;gap:25px;border-bottom:1px solid var(--line);margin:26px 0}
.tabs button{background:none;border:0;padding:10px 0}
.tabs .active{color:var(--primary);border-bottom:2px solid var(--primary)}
#notice{position:fixed;right:25px;top:22px;z-index:9;max-width:450px;padding:14px 22px;border-radius:var(--radius-sm);background:var(--ink);color:white;box-shadow:0 4px 20px #0002;display:none}
#notice.show{display:block}
#notice.error{background:#aa3750}
#notice.sticky{background:var(--deep,#1a2a4a)}
body.busy{cursor:wait}
body.busy #app{opacity:.72;pointer-events:none}
.drop.uploading{outline:2px dashed var(--signal);outline-offset:4px}
.drop.uploading .upload-status{margin-top:10px;color:var(--ink);font-size:14px}
fieldset{padding:0;border:0;margin:0;min-width:0}
details{margin-top:8px}
summary{cursor:pointer;color:var(--primary)}
.snapshot{padding:12px;border-radius:var(--radius-sm);background:var(--pearl)}
.snapshot dt{color:var(--muted);font-size:12px}
.snapshot dd{margin:0 0 8px}
dialog{border:0;border-radius:var(--radius);max-width:min(90vw,800px);max-height:90vh;overflow:auto}
dialog::backdrop{background:#04060fcc}
dialog img{max-width:100%;max-height:70vh}
dialog audio{width:100%}
.step-nav{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0}
.step-nav a{padding:8px 12px;border:1px solid var(--line);background:white;border-radius:999px;color:var(--muted);text-decoration:none}
.section{scroll-margin-top:20px}
@media(max-width:1100px){
  .editor-grid{grid-template-columns:1fr}
  .sticky{position:static}
  .content{padding:25px}
  .pipeline{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .shell{grid-template-columns:1fr}
  .sidebar{position:static;height:auto;padding:14px 16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .sidebar .small,.side-bottom,.brand-mark{display:none}
  .brand{margin:0;flex-direction:row;align-items:center}
  .brand-logo{height:18px;max-width:132px}
  .nav{width:auto;margin:0}
  .nav:first-of-type{margin-top:0}
  .nav.secondary{margin:0}
  .content{padding:20px 15px}
  .grid{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .pipeline{grid-template-columns:repeat(2,minmax(0,1fr))}
  .login{grid-template-columns:1fr}
  .login-story{padding:40px 28px;min-height:42vh}
  .login-story h1{font-size:2rem;margin:0 0 14px}
  .login-form{padding:32px 24px}
  .credit{grid-template-columns:1fr 1fr auto}
  .card{padding:18px}
}

/* Shared creator list search and pagination. */
.list-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.list-search-field{display:flex;align-items:center;gap:10px;flex:1;max-width:480px;padding-left:14px;border:1px solid var(--line);border-radius:12px;background:rgba(246,247,249,.7);transition:border-color .18s,box-shadow .18s}
.list-search-field:focus-within{border-color:var(--signal);box-shadow:0 0 0 3px rgba(79,127,209,.1)}
.list-search-field svg{width:18px;height:18px;flex-shrink:0;stroke:var(--muted);stroke-width:1.7}
.list-search-field input{min-width:0;border:0;background:transparent;outline:none;padding:11px 12px 11px 0}
.list-toolbar .button{white-space:nowrap}
.list-reset{color:var(--muted)}
.list-pagination{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.list-pagination nav{display:flex;align-items:center;gap:6px}
.page-button{min-width:34px;height:34px;padding:0 10px;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--muted)}
.page-button:hover:not(:disabled){background:#edf3ff;color:#4f7fd1}
.page-button.active{background:#edf3ff;color:#4f7fd1;font-weight:650;opacity:1}
.page-direction{border-color:var(--line);background:var(--paper)}
.page-ellipsis{color:var(--muted);padding:0 3px}
.work-meta .tag{justify-self:start}
@media(max-width:640px){.list-toolbar{flex-wrap:wrap;gap:8px}.list-search-field{max-width:none;flex-basis:100%}.list-pagination{align-items:flex-start;flex-direction:column}.list-pagination nav{flex-wrap:wrap}}
