/* mi1-tokens:start */
/* MI1 commercial design tokens — single source for the studio (frontend/) and the merchant platform (customer_platform/).
   Dark "creator" theme: near-black canvas, violet gradient actions, magenta→cyan highlights.
   Ramps keep their light-theme roles (50 = soft tint, 900 = strongest text) so existing rules adapt automatically.
   Edit this file, then run: python tools/sync_design_tokens.py */
:root{
color-scheme:dark;
--mi1-font-sans:Poppins,Inter,"PingFang SC","Microsoft YaHei UI","Microsoft YaHei","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
--mi1-font-mono:"Cascadia Code",Consolas,"SFMono-Regular",Menlo,monospace;
--mi1-brand-50:#1b1430;--mi1-brand-100:#271c46;--mi1-brand-200:#3b2a6a;--mi1-brand-300:#7a5cf0;--mi1-brand-400:#b18cff;--mi1-brand-500:#a855f7;--mi1-brand-600:#8b5cf6;--mi1-brand-700:#c9b5ff;--mi1-brand-800:#ddd0ff;--mi1-brand-900:#15101f;--mi1-brand-950:#0b0a0f;
--mi1-accent-50:#0c2629;--mi1-accent-100:#123b40;--mi1-accent-300:#5ce1e6;--mi1-accent-500:#22d3ee;--mi1-accent-600:#06b6d4;--mi1-accent-700:#7ff0f4;
--mi1-gray-0:#151517;--mi1-gray-25:#111113;--mi1-gray-50:#08080a;--mi1-gray-100:#1d1d21;--mi1-gray-200:#2a2a2f;--mi1-gray-300:#3a3a41;--mi1-gray-400:#6c6c77;--mi1-gray-500:#8f8f9a;--mi1-gray-600:#adadb7;--mi1-gray-700:#c6c6ce;--mi1-gray-800:#e2e2e6;--mi1-gray-900:#ffffff;
--mi1-success-50:#0e2619;--mi1-success-600:#4ade80;--mi1-warning-50:#2b210b;--mi1-warning-600:#fbbf24;--mi1-danger-50:#2c1114;--mi1-danger-600:#f87171;
--mi1-bg:var(--mi1-gray-50);--mi1-surface:var(--mi1-gray-0);--mi1-surface-muted:var(--mi1-gray-25);--mi1-surface-sunken:var(--mi1-gray-100);--mi1-surface-glass:rgb(14 14 17/.72);
--mi1-border:var(--mi1-gray-200);--mi1-border-strong:var(--mi1-gray-300);
--mi1-text-strong:var(--mi1-gray-900);--mi1-text:var(--mi1-gray-800);--mi1-text-muted:var(--mi1-gray-600);--mi1-text-subtle:var(--mi1-gray-500);--mi1-text-disabled:var(--mi1-gray-400);--mi1-text-inverse:#ffffff;
--mi1-primary:var(--mi1-brand-600);--mi1-primary-hover:var(--mi1-brand-500);--mi1-primary-soft:var(--mi1-brand-50);--mi1-on-primary:#ffffff;
--mi1-gradient-primary:linear-gradient(90deg,#6841ea 0%,#c263ff 100%);--mi1-gradient-primary-hover:linear-gradient(90deg,#7a55ff 0%,#d27dff 100%);--mi1-gradient-headline:linear-gradient(90deg,#da00ff 0%,#5ce1e6 100%);
--mi1-radius-sm:6px;--mi1-radius-md:10px;--mi1-radius-lg:14px;--mi1-radius-xl:20px;--mi1-radius-pill:48px;
--mi1-shadow-xs:0 1px 2px rgb(0 0 0/.5);--mi1-shadow-sm:0 2px 6px rgb(0 0 0/.45);--mi1-shadow-md:0 12px 32px -12px rgb(0 0 0/.7),0 0 0 1px rgb(255 255 255/.03);--mi1-shadow-lg:0 30px 60px -20px rgb(0 0 0/.8);
--mi1-glow:0 12px 80px rgb(104 65 234/.3),0 2px 80px rgb(104 65 234/.15);--mi1-glow-sm:0 8px 28px -6px rgb(139 92 246/.55);
--mi1-ring:0 0 0 3px rgb(168 85 247/.35);
--mi1-text-xs:12px;--mi1-text-sm:13px;--mi1-text-base:14px;--mi1-text-md:15px;--mi1-text-lg:17px;--mi1-text-xl:20px;--mi1-text-2xl:24px;--mi1-text-3xl:30px;--mi1-text-4xl:44px;
--mi1-ease:cubic-bezier(.2,.7,.2,1);--mi1-duration:.18s;
}
/* mi1-tokens:end */

/* ---------- Base ---------- */
:root{font-family:var(--mi1-font-sans);color:var(--mi1-text);background:var(--mi1-bg);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:radial-gradient(900px 520px at 85% -10%,rgb(104 65 234/.22),transparent 60%),radial-gradient(800px 480px at -10% 10%,rgb(34 211 238/.08),transparent 55%),var(--mi1-bg);background-repeat:no-repeat;background-attachment:fixed}
::selection{background:var(--mi1-brand-100);color:var(--mi1-brand-900)}
:focus-visible{outline:none;box-shadow:var(--mi1-ring)}
a{color:var(--mi1-primary)}

/* ---------- Header ---------- */
header{position:sticky;top:0;z-index:30;height:72px;background:var(--mi1-surface-glass);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--mi1-border);display:flex;align-items:center;padding:0 5vw;gap:28px}
.brand{display:inline-flex;align-items:center;gap:10px;font-size:22px;font-weight:800;letter-spacing:-.5px;text-decoration:none;color:var(--mi1-text-strong);white-space:nowrap}
.brand::before{content:'';flex:none;width:30px;height:30px;border-radius:9px;background:radial-gradient(circle at 70% 30%,var(--mi1-accent-300) 0 4px,transparent 4.5px),var(--mi1-gradient-primary);box-shadow:var(--mi1-glow-sm)}
.brand span{background:var(--mi1-gradient-headline);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:600;margin-left:-4px}
.subtitle,.muted{color:var(--mi1-text-muted);font-size:var(--mi1-text-sm);line-height:1.8}
.subtitle{padding-left:24px;border-left:1px solid var(--mi1-border)}
#account button{white-space:nowrap}
#account{margin-left:auto;display:flex;gap:14px;align-items:center;font-size:var(--mi1-text-sm);color:var(--mi1-text-muted)}
#account>span{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--mi1-text)}
#account>span::before{content:'';width:28px;height:28px;border-radius:50%;background:var(--mi1-gradient-headline)}

/* ---------- Layout & type ---------- */
main{max-width:1440px;margin:auto;padding:32px 5vw 110px}
h1{font-size:var(--mi1-text-3xl);font-weight:750;letter-spacing:-.8px;line-height:1.3;color:var(--mi1-text-strong);margin:8px 0 22px}
h2{font-size:var(--mi1-text-lg);font-weight:700;color:var(--mi1-text-strong);margin:0 0 16px}
h3{font-size:var(--mi1-text-md);font-weight:650;color:var(--mi1-text-strong)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--mi1-brand-400);letter-spacing:1.6px;font-size:var(--mi1-text-xs);font-weight:700;margin:0}
.eyebrow::before{content:'';width:18px;height:2px;border-radius:2px;background:var(--mi1-gradient-headline)}

/* ---------- Landing / auth ---------- */
#auth{display:grid;grid-template-columns:1.35fr 1fr;gap:7vw;align-items:center;min-height:calc(100vh - 230px)}
.hero h1{display:inline-block;font-size:56px;line-height:1.2;letter-spacing:-2px;margin:18px 0 22px}
.hero h1{background:var(--mi1-gradient-headline);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero>p:not(.eyebrow){color:var(--mi1-text-muted);font-size:var(--mi1-text-md);line-height:1.95}
.steps{display:flex;flex-wrap:wrap;gap:12px;font-size:var(--mi1-text-sm);margin-top:34px}
.steps span{display:inline-flex;align-items:center;padding:9px 16px;border-radius:var(--mi1-radius-pill);background:var(--mi1-surface);border:1px solid var(--mi1-border);box-shadow:var(--mi1-shadow-xs);color:var(--mi1-text);font-weight:600}
#auth-form{padding:34px;box-shadow:var(--mi1-glow),var(--mi1-shadow-lg);border-color:var(--mi1-brand-200)}
#auth-form h2{font-size:var(--mi1-text-xl)}

/* ---------- Surfaces ---------- */
.panel{background:linear-gradient(180deg,rgb(255 255 255/.025),transparent 40%),var(--mi1-surface);border:1px solid var(--mi1-border);border-radius:var(--mi1-radius-xl);padding:28px;box-shadow:var(--mi1-shadow-sm)}

/* ---------- Forms ---------- */
label{display:block;font-size:var(--mi1-text-sm);font-weight:600;margin:16px 0;color:var(--mi1-text)}
input,textarea,select{display:block;border:1px solid var(--mi1-border-strong);background:var(--mi1-surface);border-radius:var(--mi1-radius-md);width:100%;padding:11px 13px;font:inherit;font-size:var(--mi1-text-base);font-weight:400;color:var(--mi1-text-strong);margin-top:8px;transition:border-color var(--mi1-duration),box-shadow var(--mi1-duration)}
input::placeholder,textarea::placeholder{color:var(--mi1-text-disabled)}
input:hover,textarea:hover,select:hover{border-color:var(--mi1-gray-400)}
textarea{resize:vertical;line-height:1.7}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--mi1-brand-400);box-shadow:var(--mi1-ring)}
input[type=checkbox],input[type=radio]{accent-color:var(--mi1-primary)}

/* ---------- Buttons ---------- */
button{font:inherit;font-size:var(--mi1-text-sm);font-weight:650;background:var(--mi1-gradient-primary);color:var(--mi1-on-primary);border:1px solid transparent;border-radius:var(--mi1-radius-pill);padding:10px 20px;cursor:pointer;box-shadow:var(--mi1-shadow-xs);transition:background var(--mi1-duration),border-color var(--mi1-duration),box-shadow var(--mi1-duration),transform var(--mi1-duration) var(--mi1-ease)}
button:hover:not(:disabled){background:var(--mi1-gradient-primary-hover);box-shadow:var(--mi1-glow-sm)}
button:active:not(:disabled){transform:translateY(1px)}
button:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.secondary{background:rgb(255 255 255/.04);border-color:var(--mi1-border-strong);color:var(--mi1-text);box-shadow:none}
.secondary:hover:not(:disabled){background:rgb(255 255 255/.09);border-color:var(--mi1-gray-400);box-shadow:none}
form>button{margin-top:14px;margin-right:8px}
#generate{width:100%;padding:14px 18px;font-size:var(--mi1-text-md);border-radius:var(--mi1-radius-pill);box-shadow:var(--mi1-glow)}

/* ---------- Navigation ---------- */
nav{display:flex;gap:4px;width:fit-content;max-width:100%;overflow:auto;padding:5px;margin-bottom:34px;background:var(--mi1-surface-sunken);border:1px solid var(--mi1-border);border-radius:var(--mi1-radius-pill);scrollbar-width:none}
nav::-webkit-scrollbar{display:none}
nav button{background:transparent;color:var(--mi1-text-muted);border-radius:var(--mi1-radius-pill);padding:9px 18px;white-space:nowrap;box-shadow:none}
nav button:hover:not(:disabled){background:rgb(255 255 255/.06);color:var(--mi1-text-strong);box-shadow:none}
nav button.selected,nav button.selected:hover:not(:disabled){background:var(--mi1-gradient-primary);color:#fff;box-shadow:var(--mi1-glow-sm)}

/* ---------- Create page ---------- */
.page-title{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:0 0 26px}
.page-title h1{margin-bottom:0}
.work-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:28px;align-items:start}
.create-panel{position:sticky;top:96px}
.section-title{display:flex;justify-content:space-between;align-items:baseline}
.filters{display:flex;gap:12px;margin-bottom:20px}
.filters input,.filters select{margin-top:0}
.filters>button{margin:0;flex:none}
.filters input{flex:2}
.filters select{flex:1}
.template-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.template-card{background:var(--mi1-surface);border:1px solid var(--mi1-border);border-radius:var(--mi1-radius-lg);overflow:hidden;box-shadow:var(--mi1-shadow-xs);transition:transform .25s var(--mi1-ease),box-shadow .25s var(--mi1-ease),border-color .25s}
.template-card:hover{transform:translateY(-3px);box-shadow:var(--mi1-glow);border-color:var(--mi1-brand-200)}
.template-card.active{border-color:var(--mi1-brand-400);box-shadow:0 0 0 2px var(--mi1-brand-300),var(--mi1-glow)}
.template-art{position:relative;min-height:176px;color:#fff;padding:22px 24px;display:flex;flex-direction:column;justify-content:space-between;gap:12px;overflow:hidden;background:radial-gradient(120% 90% at 100% 0,rgb(255 255 255/.16),transparent 55%),linear-gradient(140deg,#1e1442,#6841ea 60%,#c263ff)}
.template-art::after{content:'';position:absolute;right:-30px;bottom:-40px;width:150px;height:150px;border-radius:50%;border:22px solid rgb(255 255 255/.08)}
.template-art.look-warm{background:radial-gradient(120% 90% at 100% 0,rgb(255 236 210/.25),transparent 55%),linear-gradient(140deg,#3a0f2e,#b0297a 55%,#ff7a59)}
.template-art.look-cool{background:radial-gradient(120% 90% at 100% 0,rgb(220 245 255/.22),transparent 55%),linear-gradient(140deg,#0b1f3a,#2b62d9 55%,#5ce1e6)}
.template-art strong{position:relative;z-index:1;font-size:23px;font-weight:750;max-width:220px;line-height:1.4;text-shadow:0 2px 12px rgb(0 0 0/.18)}
.template-art span{position:relative;z-index:1;align-self:flex-start;font-size:11px;font-weight:600;letter-spacing:1.2px;padding:4px 10px;border-radius:var(--mi1-radius-pill);background:rgb(255 255 255/.16);backdrop-filter:blur(4px)}
.template-body{padding:18px 20px 20px}
.template-body h3{margin:0 0 6px;font-size:var(--mi1-text-md)}
.template-body p{font-size:var(--mi1-text-sm);line-height:1.7;color:var(--mi1-text-muted);min-height:44px;margin:0 0 10px}
.template-body button{padding:8px 13px;margin:12px 6px 0 0}
.tag{display:inline-block;border-radius:var(--mi1-radius-pill);background:var(--mi1-brand-50);padding:3px 10px;font-size:var(--mi1-text-xs);font-weight:600;color:var(--mi1-brand-700);margin:0 6px 4px 0}
.badge{display:inline-flex;align-items:center;gap:8px;font-size:var(--mi1-text-sm);font-weight:650;color:var(--mi1-accent-700);background:var(--mi1-accent-50);border:1px solid var(--mi1-accent-100);padding:9px 16px;border-radius:var(--mi1-radius-pill);white-space:nowrap}
.badge:not(:empty)::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--mi1-accent-500);box-shadow:0 0 0 3px var(--mi1-accent-100)}
.badge:empty{display:none}
.quote{font-size:var(--mi1-text-sm);color:var(--mi1-brand-800);background:var(--mi1-brand-50);border:1px solid var(--mi1-brand-100);border-left:4px solid var(--mi1-brand-500);border-radius:var(--mi1-radius-md);padding:13px 15px;line-height:1.8}
.checkbox{display:flex;gap:10px;align-items:flex-start;line-height:1.7;font-weight:400}
.checkbox input{width:16px;flex:none;margin-top:4px}

/* ---------- Materials / records ---------- */
.upload-panel{max-width:820px}
.material-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:24px}
.material{border:1px solid var(--mi1-border);background:var(--mi1-surface);border-radius:var(--mi1-radius-lg);overflow:hidden;padding:10px;font-size:var(--mi1-text-xs);color:var(--mi1-text-muted);box-shadow:var(--mi1-shadow-xs);transition:box-shadow .2s}
.material:hover{box-shadow:var(--mi1-shadow-md)}
.material img,.material video{width:100%;height:150px;object-fit:cover;border-radius:var(--mi1-radius-md);background:var(--mi1-surface-sunken)}
.material p{overflow-wrap:anywhere}
.record-list{display:grid;gap:12px;margin:18px 0 30px}
.record{padding:18px 20px;border-radius:var(--mi1-radius-lg);border:1px solid var(--mi1-border);background:var(--mi1-surface);line-height:1.9;font-size:var(--mi1-text-sm);color:var(--mi1-text-muted);box-shadow:var(--mi1-shadow-xs)}
.record strong{display:block;font-size:var(--mi1-text-base);color:var(--mi1-text-strong)}
.record video{display:block;max-width:240px;max-height:400px;margin:15px 0;border-radius:var(--mi1-radius-md)}
.record a{color:var(--mi1-primary);font-weight:600}
.record progress,progress{display:block;width:100%;height:8px;margin-top:12px;appearance:none;border:0;border-radius:var(--mi1-radius-pill);background:var(--mi1-surface-sunken);overflow:hidden;accent-color:var(--mi1-brand-500)}
progress::-webkit-progress-bar{background:var(--mi1-surface-sunken);border-radius:var(--mi1-radius-pill)}
progress::-webkit-progress-value{background:var(--mi1-gradient-primary);border-radius:var(--mi1-radius-pill)}
progress::-moz-progress-bar{background:var(--mi1-gradient-primary);border-radius:var(--mi1-radius-pill)}

/* ---------- Wallet ---------- */
.wallet-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:28px;align-items:start}
.large-number{display:block;font-size:56px;margin:12px 0;font-weight:800;letter-spacing:-2px;font-variant-numeric:tabular-nums;background:var(--mi1-gradient-headline);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- Toast, dialog, misc ---------- */
#notice{position:fixed;right:28px;top:88px;z-index:40;max-width:440px;background:var(--mi1-gray-100);border:1px solid var(--mi1-border-strong);color:var(--mi1-text-inverse);padding:14px 20px;border-radius:var(--mi1-radius-md);box-shadow:var(--mi1-shadow-lg);font-size:var(--mi1-text-sm);line-height:1.7;border-left:4px solid var(--mi1-accent-500);animation:mi1-toast .3s var(--mi1-ease)}
#notice:empty{display:none}
@keyframes mi1-toast{from{opacity:0;transform:translateY(-8px)}}
dialog{background:var(--mi1-surface);border:1px solid var(--mi1-border);border-radius:var(--mi1-radius-xl);padding:26px;max-width:640px;width:90vw;box-shadow:var(--mi1-shadow-lg);color:var(--mi1-text)}
dialog::backdrop{background:rgb(0 0 0/.7);backdrop-filter:blur(3px)}
dialog video{display:block;max-height:70vh;max-width:100%;margin:20px auto;border-radius:var(--mi1-radius-md);background:#000}
dialog h3{font-size:var(--mi1-text-xl)}
pre{white-space:pre-wrap;overflow-wrap:anywhere;font-family:var(--mi1-font-mono);font-size:var(--mi1-text-xs);max-height:500px;overflow:auto;background:var(--mi1-surface-sunken);border-radius:var(--mi1-radius-md);padding:14px}
pre:empty{display:none}
footer{text-align:center;font-size:var(--mi1-text-xs);color:var(--mi1-text-subtle);padding:20px 0 50px}
#upload-progress{position:fixed;bottom:0;left:0;right:0;background:var(--mi1-surface-glass);backdrop-filter:blur(12px);border-top:1px solid var(--mi1-border);box-shadow:0 -10px 30px -12px rgb(0 0 0/.6);z-index:20;padding:13px 5vw;font-size:var(--mi1-text-xs)}
.progress-inner{display:flex;gap:18px;align-items:center}
.progress-inner progress{flex:1;margin-top:0}
.progress-inner strong{max-width:30vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--mi1-text-strong)}
#upload-results{margin:8px 0 0;color:var(--mi1-text-muted);white-space:pre-line;max-height:65px;overflow:auto}
[hidden]{display:none!important}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
@media(max-width:950px){.work-grid,.wallet-grid,#auth{grid-template-columns:1fr}.hero h1{font-size:40px;letter-spacing:-1px}.hero{margin-bottom:24px}#auth{min-height:0;padding-top:16px}.create-panel{position:static}.subtitle{display:none}.material-grid{grid-template-columns:repeat(2,1fr)}main{padding:22px 5vw 120px}.progress-inner{flex-wrap:wrap}.progress-inner progress{min-width:45%}.page-title{flex-direction:column;align-items:flex-start;gap:12px}.template-grid{gap:12px}.template-art{min-height:148px;padding:18px}.panel{padding:22px;border-radius:var(--mi1-radius-lg)}header{height:62px;padding:0 16px}.brand{font-size:19px}}
@media(max-width:560px){#account>span{font-size:0;gap:0}header{gap:12px}.filters>button{width:100%}.template-grid{grid-template-columns:1fr}h1{font-size:var(--mi1-text-2xl)}.filters{flex-direction:column}}

/* ---------- Food references ---------- */
.reference-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:20px 0 35px}
.reference-card{transition:box-shadow .2s,transform .2s var(--mi1-ease)}
.reference-card:hover{box-shadow:var(--mi1-shadow-md);transform:translateY(-2px)}
.reference-card h3{font-size:var(--mi1-text-lg);line-height:1.5;margin:12px 0}
.reference-card .reference-badge{display:inline-block;background:var(--mi1-accent-50);border-radius:var(--mi1-radius-pill);padding:5px 12px;font-size:var(--mi1-text-xs);font-weight:600;color:var(--mi1-accent-700)}
.reference-link{display:inline-flex;align-items:center;gap:6px;color:var(--mi1-brand-700);background:var(--mi1-brand-50);border:1px solid var(--mi1-brand-100);padding:9px 14px;border-radius:var(--mi1-radius-md);text-decoration:none;font-size:var(--mi1-text-sm);font-weight:650;margin-top:8px;transition:background .2s}
.reference-link::after{content:'↗'}
.reference-link:hover{background:var(--mi1-brand-100)}
.reference-card>button{margin:10px 8px 0 0}
.reference-card>p{overflow-wrap:anywhere}
.reference-fields{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
#reference-admin{margin-top:45px}
@media(max-width:760px){.reference-grid,.reference-fields{grid-template-columns:1fr}}

/* ---------- Finished samples ---------- */
.finished-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin:28px 0}
.finished-card{background:var(--mi1-surface);border:1px solid var(--mi1-border);border-radius:var(--mi1-radius-lg);overflow:hidden;box-shadow:var(--mi1-shadow-xs);transition:transform .25s var(--mi1-ease),box-shadow .25s var(--mi1-ease)}
.finished-card:hover{transform:translateY(-3px);box-shadow:var(--mi1-glow);border-color:var(--mi1-brand-200)}
.finished-poster{position:relative;display:block;width:100%;padding:0;border:0;border-radius:0;background:#000;overflow:hidden;box-shadow:none}
.finished-poster:hover:not(:disabled){background:#000;box-shadow:none}
.finished-poster img{display:block;width:100%;aspect-ratio:9/12;object-fit:contain;transition:transform .4s var(--mi1-ease)}
.finished-card:hover .finished-poster img{transform:scale(1.03)}
.finished-poster::after{content:'';position:absolute;inset:auto 0 0;height:45%;background:linear-gradient(0deg,rgb(0 0 0/.45),transparent);pointer-events:none}
.finished-play{position:absolute;z-index:1;bottom:12px;right:12px;padding:5px 11px;background:rgb(0 0 0/.55);backdrop-filter:blur(6px);border:1px solid rgb(255 255 255/.18);border-radius:var(--mi1-radius-pill);color:#fff;font-size:var(--mi1-text-xs);font-weight:700;box-shadow:var(--mi1-shadow-sm)}
.finished-card h3{line-height:1.6;margin-top:10px}
.finished-card .template-body p{min-height:0}
.finished-pager{display:flex;justify-content:center;align-items:center;gap:20px;margin:25px 0 50px;color:var(--mi1-text-muted);font-size:var(--mi1-text-sm)}
@media(max-width:1000px){.finished-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.finished-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.finished-card .template-body{padding:12px}}

/* Creation starts with playable finished samples instead of abstract cards. */
.creation-library{min-width:0}
.sample-gallery-intro{color:var(--mi1-text-muted);font-size:var(--mi1-text-sm);line-height:1.8;margin:10px 0 20px}
.creation-sample-grid{gap:18px}
.creation-sample-card.active{border-color:var(--mi1-brand-400);box-shadow:0 0 0 2px var(--mi1-brand-300)}
.creation-sample-card .finished-poster img{height:clamp(220px,28vw,300px);aspect-ratio:auto;object-fit:cover}
.sample-preview-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;display:grid;place-items:center;width:48px;height:48px;border:1px solid rgb(255 255 255/.5);border-radius:50%;background:rgb(0 0 0/.45);color:#fff;font-size:18px;backdrop-filter:blur(5px);padding-left:3px;pointer-events:none}
.finished-poster:hover .sample-preview-icon{background:var(--mi1-primary);border-color:var(--mi1-primary)}
.sample-collection{display:block;color:var(--mi1-text-subtle);font-size:var(--mi1-text-xs);overflow-wrap:anywhere}
.sample-card-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.sample-card-actions button{flex:1;padding:10px 12px;margin:0;white-space:nowrap}
.sample-gallery-message{grid-column:1/-1;padding:36px 12px;text-align:center;color:var(--mi1-text-muted)}
.sample-gallery-message button{margin-top:16px}
.creation-pager{margin:24px 0}
@media(max-width:560px){.creation-sample-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.creation-sample-card .template-body{padding:12px}.creation-sample-card h3{font-size:var(--mi1-text-sm)}.creation-sample-card .sample-card-actions{flex-direction:column}.creation-sample-card .sample-card-actions button{font-size:var(--mi1-text-xs);padding:9px 6px}.sample-preview-icon{width:38px;height:38px;font-size:15px}.creation-library .section-title{align-items:flex-start;gap:12px}.creation-library .section-title h2{font-size:var(--mi1-text-lg)}}

.material-grid.expanded{max-height:760px;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}.material-list-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;color:var(--mi1-text-muted);font-size:var(--mi1-text-sm)}.material-list-controls button{margin:0}@media(max-width:600px){.material-grid.expanded{max-height:65vh}.material-list-controls{flex-wrap:wrap}}

.food-review-dialog{width:min(760px,94vw);max-height:90vh;overflow:auto}.food-review-dialog form{display:grid;gap:12px}.food-source-preview{width:100%;max-height:42vh;background:#111}.food-crop-preview{max-width:100%;max-height:48vh;width:auto;height:auto;display:block;background:#111;margin:auto}.food-review-dialog input[type=number]{max-width:220px}
.food-readiness{margin:12px 0;padding:16px;min-width:0}.food-readiness-list{display:grid;gap:10px;max-height:400px;overflow:auto;overscroll-behavior:contain}.food-readiness-item{padding:12px;border:1px solid var(--mi1-border);border-radius:10px;min-width:0}.food-readiness-item strong{display:block;overflow-wrap:anywhere}.food-readiness-item .badge{margin-top:8px}.food-readiness-item p{margin:8px 0}.food-readiness-item button{margin:0}.food-crop-preview[hidden],.food-source-preview[hidden]{display:none}