:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --ink:#292335; --muted:#6e6272; --line:#ddd0bd; --paper:#fffaf0; --accent:#5b3fb1; --accent-dark:#432c8e; --bg:#f8f4ec; --danger:#a33b4f; }

.studio-nav { display:flex; gap:8px; margin:0 0 24px; border-bottom:1px solid var(--line); } .nav-button { border:0; border-bottom:3px solid transparent; padding:11px 12px 9px; background:transparent; color:var(--muted); font-weight:850; } .nav-button.active { color:var(--accent-dark); border-bottom-color:var(--accent); } .count-badge { display:inline-grid; min-width:20px; place-items:center; padding:1px 5px; border-radius:999px; background:#e9e0fd; font-size:12px; } .asset-actions,.section-actions { display:flex; gap:9px; flex-wrap:wrap; align-items:center; } .section-actions .form-status,.section-actions p { margin:0; } .library-editor,.candidate-editor { display:grid; gap:10px; padding-top:4px; border-top:1px solid #eee5d8; } .library-editor label,.candidate-editor label { font-size:12px; } .library-editor textarea,.candidate-editor textarea { min-height:76px; } .library-tools { display:grid; grid-template-columns:minmax(220px,2fr) repeat(4,minmax(145px,1fr)); gap:14px; margin:0 0 20px; } .storefront-editor { display:grid; gap:10px; margin:2px 0 0; padding:12px; border:1px solid #e3d7c5; border-radius:7px; } .storefront-editor legend { padding:0 5px; color:var(--muted); font-size:12px; font-weight:850; } .check-row { grid-template-columns:auto 1fr; align-items:center; } .check-row input { width:auto; } .candidate-suggestions { display:flex; flex-wrap:wrap; gap:7px; } .suggestion { border:1px solid #cfc2ed; border-radius:999px; padding:6px 9px; background:#f8f4ff; color:var(--accent-dark); font-size:12px; font-weight:750; text-align:left; } .danger { min-height:38px; border:1px solid #d9a9af; border-radius:7px; padding:8px 12px; background:transparent; color:var(--danger); font-weight:800; } .reference-asset { display:grid; grid-template-columns:48px 1fr auto; gap:10px; align-items:center; padding:10px; border:1px solid #cfc2ed; border-radius:7px; background:#f8f4ff; } .reference-asset img { width:48px; height:48px; object-fit:contain; background:repeating-conic-gradient(#f1eee8 0 25%, #fff 0 50%) 50%/16px 16px; } .reference-asset p { margin:3px 0 0; color:var(--muted); font-size:13px; } @media (max-width:900px) { .library-tools { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:760px) { .library-tools { grid-template-columns:1fr; } .reference-asset { grid-template-columns:42px 1fr; } .reference-asset .quiet { grid-column:1/-1; } }
.recipe-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } @media (max-width:760px) { .recipe-fields { grid-template-columns:1fr; } }
.production-builder { display:grid; gap:16px; max-width:900px; } .sheet-picker { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; } .sheet-choice { display:grid; gap:8px; padding:10px; border:1px solid var(--line); border-radius:8px; background:var(--paper); cursor:pointer; } .sheet-choice:has(input:checked) { border-color:var(--accent); box-shadow:0 0 0 3px rgba(91,63,177,.12); } .sheet-choice img { width:100%; aspect-ratio:1; object-fit:contain; background:repeating-conic-gradient(#f1eee8 0 25%, #fff 0 50%) 50%/20px 20px; } .sheet-choice span { font-size:13px; font-weight:800; line-height:1.25; }
.sheet-tools { display:grid; grid-template-columns:minmax(0,1fr) 220px; gap:14px; } .sheet-selection,.sheet-fit { display:grid; gap:12px; padding:16px; border:1px solid var(--line); border-radius:8px; background:var(--paper); } .sheet-selection .section-heading { margin:0; } .selected-strip { display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); gap:10px; } .selected-asset { display:grid; gap:7px; padding:9px; border:1px solid #ddd0bd; border-radius:7px; background:#fffdf8; } .selected-asset img { width:100%; aspect-ratio:1; object-fit:contain; background:repeating-conic-gradient(#f1eee8 0 25%, #fff 0 50%) 50%/18px 18px; } .selected-asset strong { font-size:12px; line-height:1.25; } .selected-asset .quiet { min-height:32px; padding:5px 8px; font-size:12px; } .sheet-fit { grid-template-columns:minmax(0,1fr) minmax(230px,380px); align-items:center; } .sheet-fit p { margin:0; } .sheet-fit-preview { display:grid; grid-template-columns:repeat(2,1fr); gap:7px; padding:9px; border:2px solid #222; border-radius:4px; background:#fff; aspect-ratio:6.2/9.2; } .sheet-fit-slot { display:grid; place-items:center; min-height:0; overflow:hidden; border:1px dashed #cdbfae; border-radius:4px; color:#9b8e7e; font-size:12px; font-weight:850; } .sheet-fit-slot img { width:100%; height:100%; object-fit:contain; background:repeating-conic-gradient(#f1eee8 0 25%, #fff 0 50%) 50%/14px 14px; } @media (max-width:760px) { .sheet-tools,.sheet-fit { grid-template-columns:1fr; } }
.sheet-result { display:grid; gap:10px; padding:18px; border:1px solid #b9aadf; border-radius:8px; background:#f8f4ff; } .sheet-result h3,.sheet-result p { margin:0; } .sheet-result .primary-action,.sheet-result .quiet { display:inline-flex; align-items:center; text-decoration:none; }
.bulk-import { display:grid; gap:10px; padding:12px; border:1px solid var(--line); border-radius:7px; background:#fffdf8; } .bulk-import summary { cursor:pointer; font-weight:850; } .bulk-import p { margin:0; color:var(--muted); font-size:13px; line-height:1.45; }
.test-run-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; padding:18px; border:1px solid var(--line); border-radius:8px; background:var(--paper); } .test-run-form label:has(textarea) { grid-column:1/-1; } .test-run-form button,.test-run-form .form-status { width:max-content; } @media (max-width:760px) { .test-run-form { grid-template-columns:1fr; } }
* { box-sizing:border-box; } body { margin:0; min-height:100vh; background:var(--bg); color:var(--ink); } button,input,textarea,select { font:inherit; } button { cursor:pointer; } main { width:min(1180px, calc(100vw - 32px)); margin:0 auto; padding:48px 0 72px; } .topbar { min-height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 max(16px, calc((100vw - 1180px)/2)); border-bottom:1px solid var(--line); background:rgba(255,250,240,.88); } .brand { color:var(--ink); font-size:18px; font-weight:900; text-decoration:none; } .brand span { color:var(--accent); } .account { display:flex; gap:12px; align-items:center; } .account span { border:1px solid #cfc2ed; border-radius:999px; padding:4px 9px; color:var(--accent-dark); font-size:12px; font-weight:800; text-transform:uppercase; } .eyebrow { margin:0 0 9px; color:var(--muted); font-size:12px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; } h1,h2,h3,p { margin-top:0; } h1 { margin-bottom:12px; font-size:clamp(36px, 5vw, 60px); line-height:1.06; } h2 { margin-bottom:8px; font-size:22px; } h3 { margin:0; font-size:18px; line-height:1.2; } .lede,.page-heading p,.section-heading p,.workflow-note p { color:var(--muted); line-height:1.55; } .welcome { max-width:760px; padding:clamp(52px,11vh,120px) 0; } .welcome .lede { max-width:680px; margin-bottom:30px; font-size:20px; } .primary-action,.accept { min-height:44px; border:0; border-radius:7px; padding:10px 16px; background:var(--accent); color:#fff; font-weight:850; } .primary-action:hover,.accept:hover { background:var(--accent-dark); } .quiet { min-height:38px; border:1px solid #b9aadf; border-radius:7px; padding:8px 12px; background:transparent; color:var(--accent-dark); font-weight:800; } .footnote,.form-status { color:var(--muted); line-height:1.5; } .page-heading { display:flex; justify-content:space-between; gap:24px; align-items:flex-start; margin-bottom:28px; } .page-heading h1 { font-size:38px; } .workspace { display:grid; grid-template-columns:minmax(0, 1fr) 280px; gap:20px; align-items:start; } .maker-panel,.workflow-note,.asset-card { border:1px solid var(--line); border-radius:8px; background:var(--paper); } .maker-panel { display:grid; gap:15px; padding:24px; } label { display:grid; gap:7px; font-size:14px; font-weight:800; } input,textarea,select { width:100%; border:1px solid #cdbfae; border-radius:6px; padding:10px 11px; background:#fffdf8; color:var(--ink); } textarea { resize:vertical; } input:focus,textarea:focus,select:focus { outline:3px solid rgba(91,63,177,.18); border-color:var(--accent); } .optional { color:var(--muted); font-weight:600; } .workflow-note { padding:22px; } .workflow-note ol { padding-left:21px; line-height:1.6; } .workflow-note li+li { margin-top:8px; } .form-status { min-height:22px; margin:0; } .form-status.error,.asset-error { color:var(--danger); } .form-status.success { color:#236849; } .library-section { margin-top:48px; } .section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:16px; } .section-heading p { margin-bottom:0; } .asset-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:16px; } .asset-card { overflow:hidden; } .asset-preview { position:relative; display:grid; place-items:center; aspect-ratio:1; overflow:hidden; background:repeating-conic-gradient(#f1eee8 0 25%, #fff 0 50%) 50%/24px 24px; } .asset-preview img { width:100%; height:100%; object-fit:contain; } .asset-placeholder { color:var(--muted); font-weight:800; } .asset-copy { display:grid; gap:10px; padding:15px; } .asset-state { margin:0; color:var(--accent-dark); font-size:12px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; } .asset-state[data-status="accepted"] { color:#236849; } .asset-state[data-status="failed"] { color:var(--danger); } .asset-meta,.asset-error { margin:0; color:var(--muted); font-size:13px; line-height:1.45; } .asset-actions { display:flex; gap:9px; } .empty-state { grid-column:1/-1; margin:0; padding:30px; border:1px dashed #cdbfae; border-radius:8px; color:var(--muted); text-align:center; } @media (max-width:760px) { main { width:min(100vw - 24px,1180px); padding-top:32px; } .workspace { grid-template-columns:1fr; } .page-heading,.section-heading { align-items:flex-start; flex-direction:column; } .page-heading .quiet { width:100%; } }