:root{
  --bg:#f5f3fb;
  --surface:#ffffff;
  --surface-2:#f8f6fd;
  --ink:#2f2a40;
  --ink-soft:#797388;
  --ink-faint:#aba6bc;
  --line:#eeebf6;
  --line-2:#e6e2f1;

  --violet:#20b268;   --violet-lip:#15925a;   --violet-wash:#e6f6ed;  /* dino green (brand) */
  --coral:#ff6b5b;    --coral-lip:#e64f40;    --coral-ink:#d83a2b;  --coral-wash:#ffece9;
  --sun:#ffcb45;      --sun-lip:#d99a08;       --sun-wash:#fff6df;
  --teal:#1cc8a8;     --teal-lip:#13a88c;      --teal-wash:#e4faf5;

  --brand:var(--violet); --brand-lip:var(--violet-lip);

  --shadow-sm:0 2px 0 rgba(43,36,64,.03), 0 6px 16px -10px rgba(43,36,64,.18);
  --shadow:0 10px 24px -12px rgba(60,40,120,.20), 0 30px 50px -30px rgba(60,40,120,.24);
  --ring:0 0 0 4px rgba(32,178,104,.22);
  --r-sm:12px; --r:18px; --r-lg:26px;
  --ease:cubic-bezier(.34,1.4,.64,1);
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{
  font-family:Nunito,system-ui,-apple-system,sans-serif;
  color:var(--ink);font-weight:500;font-size:15.5px;line-height:1.55;
  background:
    radial-gradient(640px 320px at 8% -6%, rgba(124,92,252,.07), transparent 60%),
    radial-gradient(640px 320px at 100% -4%, rgba(255,107,91,.06), transparent 58%),
    var(--bg);
  min-height:100vh;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.brand-name{font-family:Fredoka,Nunito,sans-serif;font-weight:600;line-height:1.2}
h1{font-size:1.95rem;margin:0 0 .12em;letter-spacing:0;font-weight:600}
.sub{margin:0;color:var(--ink-soft);font-size:.97rem;max-width:64ch;font-weight:500}
.hint{margin:.1rem 0 .65rem;color:var(--ink-soft);font-size:.87rem;font-weight:500}
.muted{color:var(--ink-faint);font-weight:600}

/* ---------------- top bar ---------------- */
.topbar{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;
  padding:11px clamp(14px,3.5vw,36px);
  background:rgba(245,243,251,.9);backdrop-filter:blur(20px) saturate(1.3);
  border-bottom:1px solid var(--line-2);
}
.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.brand-logo{width:44px;height:44px;flex:0 0 auto;animation:bob 4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-2px) rotate(3deg)}}
.brand-wrap{display:flex;flex-direction:column;line-height:1.05}
.brand-name{font-size:1.24rem;font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.brand-name span{color:var(--brand)}
.brand-tag{font-size:.71rem;color:var(--ink-soft);font-weight:600;white-space:nowrap}
.nav-logout{flex:0 0 auto;font:700 .8rem Nunito;color:var(--ink-soft);text-decoration:none;padding:8px 12px;border-radius:10px;transition:.15s}
.nav-logout:hover{color:var(--coral-ink);background:var(--coral-wash)}

.tabs{display:flex;gap:4px;margin:0 auto;background:var(--surface);border:1.5px solid var(--line-2);padding:5px;border-radius:16px;box-shadow:var(--shadow-sm);max-width:100%;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{border:0;background:transparent;cursor:pointer;white-space:nowrap;font:600 .9rem Nunito,sans-serif;color:var(--ink-soft);padding:9px 15px;border-radius:11px;transition:color .15s,background .15s;display:inline-flex;align-items:center;gap:6px}
.tab:hover{color:var(--ink);background:var(--surface-2)}
.tab.is-active{background:var(--violet-wash);color:var(--violet);font-weight:700}
.nav-upload{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:12px;background:var(--surface);border:1.5px solid var(--line-2);box-shadow:0 3px 0 #e6e2f1;cursor:pointer;font:700 .84rem Nunito;color:var(--violet);transition:transform .1s var(--ease),background .15s}
.nav-upload span[aria-hidden]{font-size:1rem;line-height:1}
.nav-upload:hover{background:var(--violet-wash)}
.nav-upload:active{transform:translateY(3px);box-shadow:0 0 0 #e6e2f1}
.ai-pill{flex:0 0 auto;font-size:.74rem;font-weight:700;padding:7px 13px;border-radius:999px;white-space:nowrap}
.ai-pill.on{background:var(--teal-wash);color:var(--teal-lip)}
.ai-pill.off{background:#efeaf8;color:var(--ink-soft)}

/* ---------------- views ---------------- */
main{max-width:1000px;margin:0 auto;padding:clamp(24px,4vw,44px)}
.view{display:none;animation:rise .35s var(--ease)}
.view.is-active{display:block}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.view-head{margin-bottom:24px}

/* ---------------- buttons (chunky 3D press) ---------------- */
.btn{
  border:0;cursor:pointer;border-radius:14px;
  font:700 .92rem Nunito,sans-serif;
  padding:12px 18px;transition:transform .1s var(--ease),filter .15s,background .15s;
  box-shadow:0 4px 0 var(--lip,#ccc);
}
.btn:hover{filter:brightness(1.03)}
.btn:active{transform:translateY(4px);box-shadow:0 0 0 var(--lip,#ccc)}
.btn-primary{background:var(--brand);color:#fff;--lip:var(--brand-lip)}
.btn-ghost{background:var(--surface);color:var(--ink);--lip:#ddd5f3}
.btn-soft-danger{background:var(--coral-wash);color:var(--coral-ink);--lip:#f6c4bd}
.btn-big{width:100%;padding:15px;font-size:1.02rem;margin-top:16px;border-radius:16px}
.btn-icon{background:var(--surface);border:0;border-radius:11px;width:36px;height:36px;cursor:pointer;font-size:.95rem;display:grid;place-items:center;padding:0;color:var(--ink-soft);box-shadow:0 3px 0 #e6e2f1;transition:transform .1s var(--ease)}
.btn-icon:hover{color:var(--violet)}
.btn-icon:active{transform:translateY(3px);box-shadow:0 0 0 #e6e2f1}
.link-btn{background:none;border:0;color:var(--violet);font:700 .87rem Nunito;cursor:pointer;padding:8px 0 2px}
.link-btn:hover{text-decoration:underline}

/* ---------------- forms ---------------- */
.quick-add,.grabber{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px}
.quick-add input,.grabber input{flex:1;min-width:200px;border:1.5px solid var(--line-2);background:var(--surface);border-radius:14px;padding:12px 16px;font:500 .98rem Nunito;color:var(--ink);transition:.15s}
.grabber .narrow{flex:0 1 130px;min-width:110px}
input::placeholder,textarea::placeholder{color:var(--ink-faint);font-weight:500}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--violet);box-shadow:var(--ring)}
.upload-btn{display:inline-flex;align-items:center}

/* ---------------- TITLE IDEAS list ---------------- */
.idea-list{display:flex;flex-direction:column;gap:12px}
.idea-row{background:var(--surface);border:1.5px solid var(--line-2);border-radius:var(--r);box-shadow:var(--shadow-sm);overflow:hidden;transition:transform .15s var(--ease),border-color .15s,box-shadow .2s}
.idea-row:hover{transform:translateY(-2px)}
.idea-row.open{box-shadow:var(--shadow);border-color:#d3cbf2}
.idea-row.is-next{box-shadow:inset 4px 0 0 var(--coral),var(--shadow-sm)}
.idea-head{width:100%;display:flex;align-items:center;gap:12px;background:transparent;border:0;cursor:pointer;text-align:left;padding:16px 18px;font:inherit;color:var(--ink);transition:.15s}
.idea-head:hover{background:var(--surface-2)}
.idea-caret{color:var(--violet);font-size:.8rem;width:13px;flex:0 0 auto}
.idea-name{flex:1;font-weight:700;font-size:1.08rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tag{font:700 .7rem Nunito;letter-spacing:.01em;padding:4px 10px;border-radius:8px;flex:0 0 auto;white-space:nowrap}
.tag-next{background:var(--coral-wash);color:var(--coral-ink)}
.tag-note{background:var(--surface-2);color:var(--ink-soft)}
.tag-variants{background:var(--surface-2);color:var(--ink-soft)}
.idea-detail{display:none;padding:2px 18px 20px;animation:fade .2s ease}
.idea-row.open .idea-detail{display:block}
@keyframes fade{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.detail-label{display:block;font:700 .76rem Nunito;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-faint);margin:16px 0 8px}

/* split-test title editor */
.titles-edit{display:flex;flex-direction:column;gap:8px}
.title-edit{display:flex;align-items:center;gap:8px}
.title-star{flex:0 0 auto;width:34px;height:34px;border-radius:10px;border:0;background:var(--surface-2);cursor:pointer;font-size:.92rem;color:var(--sun-lip);display:grid;place-items:center;padding:0;box-shadow:0 2px 0 #e6e2f1}
.title-star.is-primary{background:var(--sun-wash);cursor:default;box-shadow:0 2px 0 var(--sun)}
.title-star:not(.is-primary):hover{color:var(--sun-lip);background:var(--sun-wash)}
.title-line{flex:1;border:1.5px solid var(--line-2);border-radius:11px;padding:10px 13px;font:500 .96rem Nunito;background:var(--surface);color:var(--ink)}
.title-edit:first-child .title-line{font-weight:700}
.title-rm{flex:0 0 auto;width:34px;height:34px;border-radius:10px;border:0;background:var(--surface-2);cursor:pointer;color:var(--ink-faint);padding:0;box-shadow:0 2px 0 #e6e2f1}
.title-rm:hover{color:var(--coral-ink);background:var(--coral-wash)}

.detail-outline{width:100%;border:1.5px solid var(--line-2);border-radius:12px;padding:12px 14px;font:500 .96rem Nunito;background:var(--surface);color:var(--ink);resize:vertical;line-height:1.6}
.detail-actions{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}

/* attached-thumbnail tray (shared) */
.thumb-tray{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.tray-thumb{position:relative;width:108px;aspect-ratio:16/9;border-radius:11px;background:#15151c center/cover;border:1.5px solid var(--line-2)}
.tray-x{position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:50%;border:0;background:var(--ink);color:#fff;cursor:pointer;font-size:.72rem;line-height:1;opacity:0;transition:.15s;box-shadow:0 2px 0 rgba(0,0,0,.22)}
.tray-thumb:hover .tray-x{opacity:1}
.tray-badge{position:absolute;left:6px;bottom:6px;background:var(--violet);color:#fff;font:700 .6rem Nunito;text-transform:uppercase;letter-spacing:.03em;padding:2px 7px;border-radius:6px}
.tray-add{height:60px;padding:0 16px;border:1.5px dashed var(--line-2);border-radius:11px;background:var(--surface-2);color:var(--ink-soft);font:700 .84rem Nunito;cursor:pointer;transition:.15s}
.tray-add:hover{border-color:var(--violet);color:var(--violet);background:var(--violet-wash)}

/* ---------------- queue (Up Next) ---------------- */
.queue{display:flex;flex-direction:column;gap:12px}
.q-num{font-family:Fredoka;font-weight:600;color:var(--coral);text-align:center}

/* ---------------- thumbnail gallery ---------------- */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.thumb-card{background:var(--surface);border:1.5px solid var(--line-2);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .18s var(--ease),box-shadow .2s}
.thumb-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.thumb-card .pic{aspect-ratio:16/9;background:#15151c center/cover no-repeat;display:block}
.thumb-meta{padding:12px 14px 8px}
.thumb-meta .tt{font-weight:700;font-size:.95rem;line-height:1.3}
.thumb-meta .vv{display:flex;align-items:center;gap:6px;color:var(--ink-soft);font-size:.83rem;margin-top:6px;font-weight:600}
.thumb-meta .vv b{color:var(--ink)}
.thumb-links{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:0 14px 12px}
.link-chip{display:inline-flex;align-items:center;gap:5px;background:var(--violet-wash);color:var(--violet);font:700 .76rem Nunito;padding:4px 7px 4px 11px;border-radius:999px}
.link-chip button{border:0;background:none;color:inherit;cursor:pointer;font-size:.78rem;line-height:1;padding:0;opacity:.6}
.link-chip button:hover{opacity:1}
.thumb-link-pick{border:1.5px dashed var(--line-2);background:var(--surface);color:var(--ink-soft);border-radius:10px;font:700 .76rem Nunito;padding:6px 10px;cursor:pointer;max-width:100%}
.thumb-link-pick:focus{outline:none;border-color:var(--violet);box-shadow:var(--ring)}
.thumb-acts{display:flex;gap:6px;padding:0 14px 13px}
.thumb-acts a,.thumb-acts button{font:700 .78rem Nunito;border-radius:10px;padding:8px 11px;border:0;background:var(--surface-2);color:var(--ink);cursor:pointer;text-decoration:none;box-shadow:0 2px 0 #e6e2f1;transition:.12s}
.thumb-acts a:hover,.thumb-acts button:hover{color:var(--violet)}
.thumb-acts .del{margin-left:auto;color:var(--coral-ink);background:var(--coral-wash);box-shadow:0 2px 0 #f6c4bd}

/* ---------------- maker ---------------- */
.maker{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.maker-col h3{margin:22px 0 2px;font-size:1.1rem}
.maker-col h3:first-child{margin-top:0}
.opt{font:600 .73rem Nunito;color:var(--ink-soft);background:var(--surface-2);padding:3px 9px;border-radius:999px;vertical-align:middle}
.maker textarea{width:100%;border:1.5px solid var(--line-2);border-radius:13px;padding:12px;font:500 .96rem Nunito;resize:vertical;background:var(--surface);line-height:1.55}
.ref-strip,.source-strip{display:flex;gap:11px;flex-wrap:wrap;margin-bottom:4px}
.ref-thumb{position:relative;width:124px;aspect-ratio:16/9;border-radius:12px;background:#15151c center/cover;cursor:pointer;border:3px solid transparent;transition:transform .15s var(--ease)}
.ref-thumb:hover{transform:scale(1.04)}
.ref-thumb.sel{border-color:var(--violet);box-shadow:var(--ring)}
.ref-del{position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:50%;border:0;background:var(--ink);color:#fff;cursor:pointer;font-size:.72rem;opacity:0;transition:.15s}
.ref-thumb:hover .ref-del{opacity:1}
.ref-empty{color:var(--ink-soft);font-size:.9rem;font-weight:600}
#chooseRefs{margin-top:12px}
.dropzone{display:grid;place-items:center;height:78px;border:1.5px dashed var(--line-2);border-radius:14px;color:var(--ink-soft);cursor:pointer;font-weight:700;background:var(--surface);transition:.15s}
.dropzone:hover,.dropzone.drag{border-color:var(--violet);color:var(--violet);background:var(--violet-wash)}
.source-strip{margin-top:10px}
.src-pill{position:relative;width:82px;aspect-ratio:1;border-radius:12px;background:#eee center/cover;border:1.5px solid var(--line-2)}
.src-pill button{position:absolute;top:-8px;right:-8px;width:23px;height:23px;border-radius:50%;border:0;background:var(--ink);color:#fff;cursor:pointer;font-size:.8rem;line-height:1}
.result-stage{aspect-ratio:16/9;border-radius:var(--r);border:1.5px solid var(--line-2);background:var(--surface-2) center/contain no-repeat;display:grid;place-items:center;overflow:hidden}
.result-stage img{width:100%;height:100%;object-fit:contain}
.result-placeholder{color:var(--ink-soft);font-size:.93rem;padding:24px;text-align:center;line-height:1.55;font-weight:600}
.spinner{width:42px;height:42px;border-radius:50%;border:5px solid var(--line-2);border-top-color:var(--violet);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.result-actions{display:flex;gap:8px;margin-top:14px}

/* ---------------- description ---------------- */
.desc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.desc-stage{max-width:740px;margin:0 auto}
.title-input,.field-ta{width:100%;border:1.5px solid var(--line-2);border-radius:13px;padding:13px;font:500 .97rem Nunito;background:var(--surface);resize:vertical;line-height:1.65;color:var(--ink)}
.desc-pick{margin-bottom:20px;font-weight:700;font-size:1rem;padding:14px 44px 14px 16px}
.desc-empty-state{text-align:center;color:var(--ink-soft);padding:56px 24px;border:1.5px dashed var(--line-2);border-radius:var(--r-lg);background:var(--surface);font-weight:600}
.dz-emoji{font-size:2.6rem;margin-bottom:12px;display:inline-block;animation:bob 3.5s ease-in-out infinite}
.desc-empty-state p{margin:0 auto;max-width:34ch}
.desc-panel{display:flex;flex-direction:column;gap:16px}
.desc-editor{background:var(--surface);border:1.5px solid var(--line-2);border-radius:var(--r);box-shadow:var(--shadow-sm);padding:18px}
.desc-editor .sheet-label{margin-bottom:9px}
.desc-editor .field-ta{background:var(--surface-2)}
.desc-context{display:flex;flex-direction:column;gap:18px;background:var(--surface);border:1.5px solid var(--line-2);border-radius:var(--r);box-shadow:var(--shadow-sm);padding:18px}
.sheet-label{font:700 .76rem Nunito;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-faint);margin-bottom:9px}
.sheet-titles{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.sheet-titles li{display:flex;align-items:center;gap:9px;font-size:.96rem;font-weight:500}
.sheet-titles li::before{flex:0 0 auto;font-size:.85rem}
.sheet-titles li.is-primary::before{content:"★";color:var(--sun-lip)}
.sheet-titles li:not(.is-primary)::before{content:"•";color:var(--ink-faint)}
.sheet-titles li.is-primary .ct-text{font-weight:700}
.ct-text{flex:1;min-width:0}
.ct-copy{border:0;background:var(--surface-2);border-radius:8px;cursor:pointer;width:28px;height:28px;font-size:.82rem;color:var(--ink-soft);flex:0 0 auto;box-shadow:0 2px 0 #e6e2f1}
.ct-copy:hover{color:var(--violet);background:var(--violet-wash)}
.sheet-thumbs{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.sheet-thumb{position:relative;width:128px;aspect-ratio:16/9;border-radius:11px;background:#15151c center/cover;border:1.5px solid var(--line-2);display:block;transition:transform .15s var(--ease)}
.sheet-thumb:hover{transform:scale(1.04)}
.sheet-outline{font-size:.93rem;color:var(--ink-soft);white-space:pre-wrap;line-height:1.6;font-weight:500}
.row-actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}

/* ---------------- modals ---------------- */
.modal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:20px;background:rgba(43,36,64,.4);backdrop-filter:blur(6px);animation:fade .2s ease}
.modal-card{width:min(680px,100%);max-height:86vh;display:flex;flex-direction:column;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:24px;border:1.5px solid var(--line-2);animation:pop .26s var(--ease)}
@keyframes pop{from{opacity:0;transform:scale(.94) translateY(10px)}to{opacity:1;transform:none}}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px}
.modal-head h3{margin:0;font-size:1.3rem}
.picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:12px;overflow:auto;padding:4px;margin-top:8px}
.pick-tile{position:relative;aspect-ratio:16/9;border-radius:12px;background:#15151c center/cover;border:3px solid transparent;cursor:pointer;transition:transform .15s var(--ease);padding:0}
.pick-tile:hover{transform:scale(1.04)}
.pick-tile.on{border-color:var(--violet);box-shadow:var(--ring)}
.pick-check{position:absolute;top:6px;right:6px;width:25px;height:25px;border-radius:50%;background:var(--violet);color:#fff;display:grid;place-items:center;font-size:.8rem;font-weight:700}
.modal-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:18px}
.modal-foot-left{display:flex;gap:8px;flex-wrap:wrap}

/* ---------------- empty states + mascots ---------------- */
.empty{text-align:center;color:var(--ink-soft);padding:48px 20px 52px;font-size:1.02rem;font-weight:600;border:1.5px dashed var(--line-2);border-radius:var(--r-lg);margin-top:10px;background:var(--surface)}
.empty-mascot{font-size:2.8rem;margin-bottom:12px;display:inline-block;animation:bob 3s ease-in-out infinite}

/* ---------------- toast ---------------- */
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(24px) scale(.94);background:var(--ink);color:#fff;padding:13px 24px;border-radius:999px;font-weight:700;font-size:.92rem;box-shadow:var(--shadow);opacity:0;transition:.3s var(--ease);z-index:90;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
.toast.bad{background:var(--coral)}

/* confetti */
.confetti-bit{position:fixed;width:11px;height:11px;border-radius:3px;pointer-events:none;z-index:200;will-change:transform,opacity}

/* full-size image lightbox */
.lightbox{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:24px;background:rgba(24,20,44,.74);backdrop-filter:blur(6px);animation:fade .2s ease;cursor:zoom-out}
.lightbox img{max-width:min(1100px,92vw);max-height:86vh;border-radius:14px;box-shadow:var(--shadow);border:3px solid rgba(255,255,255,.16);background:#111;cursor:default}
.lightbox-close{position:absolute;top:18px;right:18px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.16);color:#fff;font-size:1.05rem;cursor:pointer;backdrop-filter:blur(4px);transition:.15s}
.lightbox-close:hover{background:rgba(255,255,255,.3)}

/* queue number + reorder tools inside the shared row header */
.idea-head .q-num{font-size:1.1rem;min-width:22px;padding:0 2px;flex:0 0 auto}
.head-tools{margin-left:8px;display:inline-flex;gap:5px;flex:0 0 auto}
.head-tools .btn-icon{width:33px;height:33px;font-size:.88rem}

/* maker "working on" selector */
.maker-pick{display:flex;align-items:center;gap:12px;margin-bottom:24px;flex-wrap:wrap}
.maker-pick label{font-weight:700;font-size:.95rem;flex:0 0 auto}
.maker-pick select{flex:0 1 360px;margin-bottom:0}
.maker-pick-hint{font-size:.85rem;color:var(--ink-soft);font-weight:500}

select.title-input{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2320b268' d='M6 8 0 0h12z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;padding-right:40px}

/* ---------------- login screen ---------------- */
.login-body{margin:0;min-height:100vh;display:grid;place-items:center;padding:24px;font-family:Nunito,system-ui,sans-serif;color:var(--ink);
  background:radial-gradient(720px 380px at 50% -12%, rgba(32,178,104,.16), transparent 60%),
    radial-gradient(600px 320px at 100% 110%, rgba(255,203,69,.14), transparent 60%), var(--bg)}
.login-card{width:min(400px,100%);background:var(--surface);border:1.5px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:34px 30px;text-align:center;animation:pop .3s var(--ease)}
.login-logo{width:100px;height:100px;animation:bob 3.5s ease-in-out infinite}
.login-title{font-family:Fredoka,Nunito,sans-serif;font-size:2rem;margin:8px 0 2px;font-weight:700}
.login-title span{color:var(--brand)}
.login-tagline{margin:0 0 22px;color:var(--ink-soft);font-weight:600}
.login-form{display:flex;flex-direction:column;gap:12px}
.login-form input{border:1.5px solid var(--line-2);border-radius:13px;padding:14px 16px;font:600 1rem Nunito;background:var(--surface-2);text-align:center;color:var(--ink)}
.login-form input::placeholder{color:var(--ink-faint)}
.login-form input:focus{outline:none;border-color:var(--brand);box-shadow:var(--ring)}
.login-error{background:var(--coral-wash);color:var(--coral-ink);border-radius:11px;padding:10px;font-weight:700;font-size:.88rem}
.login-foot{margin:22px 0 0;color:var(--ink-faint);font-size:.8rem;font-weight:600}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}
@media(max-width:780px){
  .maker{grid-template-columns:1fr}
  .topbar{flex-wrap:wrap;gap:10px}
  .brand{margin-right:auto}
  .tabs{order:3;width:100%;margin:0}
  .ai-pill{margin-left:0}
  .nav-upload-txt{display:none}
  .brand-tag{display:none}
  h1{font-size:1.7rem}
}