:root{--bg:#f1f5f9;--surface:#fff;--border:#e2e8f0;--text:#0f172a;--muted:#64748b;--accent:#0f172a;--accent-fg:#fff;--danger:#ef4444;--warn-bg:#fef3c7;--warn-fg:#92400e;--radius:10px;--radius-sm:6px;--shadow:0 1px 2px #0f172a0f, 0 4px 12px #0f172a0a;color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:14px}*{box-sizing:border-box}html,body,#root{background:var(--bg);height:100%;margin:0}.app{flex-direction:column;height:100dvh;display:flex;overflow:hidden}.app-header{background:var(--surface);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:12px 20px;display:flex}.brand{align-items:center;gap:10px;display:flex}.brand h1{letter-spacing:-.01em;margin:0;font-size:18px;font-weight:600}.brand-dot{background:var(--text);border-radius:50%;width:18px;height:18px;position:relative}.brand-dot:after{content:"";border:2px solid #ef4444;border-radius:50%;position:absolute;inset:4px}.brand-tag{color:var(--muted);padding-left:4px;font-size:12px}.app-main{flex:1;grid-template-columns:360px 1fr;gap:0;min-height:0;display:grid}.app-controls{background:var(--surface);border-right:1px solid var(--border);padding:16px;overflow-y:auto}.app-preview{flex-direction:column;gap:12px;min-height:0;padding:16px;display:flex;overflow:hidden}.panel{flex-direction:column;gap:12px;display:flex}.card{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);flex-direction:column;gap:10px;padding:12px 14px;display:flex}.card h2{color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:0;font-size:13px;font-weight:600}.field{flex-direction:column;gap:4px;display:flex}.field label{color:var(--muted);font-size:12px}.field input{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);width:100%;color:var(--text);padding:8px 10px;font-size:14px}.field input:focus{outline:2px solid var(--accent);outline-offset:-1px}.grid-2{grid-template-columns:1fr 1fr;gap:8px;display:grid}.segmented{border:1px solid var(--border);border-radius:var(--radius-sm);display:flex;overflow:hidden}.seg{background:var(--surface);border:none;border-right:1px solid var(--border);color:var(--text);cursor:pointer;flex:1;padding:8px 10px;font-size:13px}.seg:last-child{border-right:none}.seg.active{background:var(--accent);color:var(--accent-fg)}.upload-row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.filename{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;max-width:160px;font-size:12px;overflow:hidden}.thumb-row{align-items:center;gap:10px;display:flex}.order-summary{border-radius:var(--radius-sm);color:#065f46;background:#ecfdf5;border:1px solid #6ee7b7;margin-top:4px;padding:8px 10px;font-size:13px}.order-summary strong{color:#064e3b;font-weight:700}.order-summary.warn{background:var(--warn-bg);color:var(--warn-fg);border-color:#fbbf24}.preset-card{background:#f8fafc;border-color:#cbd5e1}.preset-row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.preset-select{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);min-width:140px;color:var(--text);flex:1;padding:7px 10px;font-size:14px}.preset-name-input{border:1px solid var(--border);border-radius:var(--radius-sm);flex:1;min-width:120px;padding:7px 10px;font-size:13px}.ghost-btn.danger{color:var(--danger);border-color:#fecaca}.ghost-btn.danger:hover:not(:disabled){background:#fef2f2}.primary-btn.small,.ghost-btn.small{padding:6px 10px;font-size:12px}.suggest-chip{color:#065f46;border-radius:var(--radius-sm);cursor:pointer;text-align:left;background:#ecfdf5;border:1px solid #6ee7b7;justify-content:space-between;align-items:center;gap:10px;width:100%;padding:8px 10px;font-size:12px;display:flex}.suggest-chip:hover{background:#d1fae5}.suggest-chip-action{color:#047857;white-space:nowrap;font-weight:600}.thumb{object-fit:contain;border:1px solid var(--border);border-radius:var(--radius-sm);background:#f8fafc;width:48px;height:48px}.primary-btn{background:var(--accent);color:var(--accent-fg);border-radius:var(--radius-sm);cursor:pointer;border:none;padding:8px 14px;font-size:13px;font-weight:500}.primary-btn:hover:not(:disabled){background:#1e293b}.primary-btn:disabled{cursor:not-allowed;background:#cbd5e1}.ghost-btn{color:var(--text);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;background:0 0;padding:8px 14px;font-size:13px}.ghost-btn:hover:not(:disabled){background:#f8fafc}.ghost-btn:disabled{color:#cbd5e1;cursor:not-allowed}.muted{color:var(--muted)}.small{font-size:12px}.preview-shell{flex-direction:column;flex:1;gap:8px;min-height:0;display:flex}.preview-meta{color:var(--muted);align-items:center;gap:8px;font-size:12px;display:flex}.preview-mode-toggle{border:1px solid var(--border);border-radius:var(--radius-sm);margin-right:4px;display:inline-flex;overflow:hidden}.preview-mode-toggle .seg{background:var(--surface);border:none;border-right:1px solid var(--border);color:var(--text);cursor:pointer;flex:none;padding:5px 12px;font-size:12px}.preview-mode-toggle .seg:last-child{border-right:none}.preview-mode-toggle .seg.active{background:var(--accent);color:var(--accent-fg)}.preview-canvas{border-radius:var(--radius);background:#e2e8f0;flex:1;justify-content:center;align-items:center;min-height:0;padding:16px;display:flex;overflow:hidden}.preview-canvas svg{width:auto;max-width:100%;height:auto;max-height:100%;box-shadow:var(--shadow);display:block}.preview-canvas{position:relative}.preview-warnings{background:var(--warn-bg);color:var(--warn-fg);border-radius:var(--radius-sm);flex-direction:column;gap:4px;margin:0;padding:8px 12px;font-size:12px;list-style:none;display:flex}.export-bar{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);flex-wrap:wrap;align-items:center;gap:8px;padding:12px;display:flex}.export-divider{background:var(--border);align-self:stretch;width:1px;margin:2px 4px}.proof-btn{color:#fff;border-radius:var(--radius-sm);cursor:pointer;background:#065f46;border:none;padding:8px 14px;font-size:13px;font-weight:500}.proof-btn:hover:not(:disabled){background:#047857}.proof-btn:disabled{cursor:not-allowed;background:#cbd5e1}@media (width<=900px){.app{height:auto;min-height:100vh;overflow:visible}.app-main{grid-template-columns:1fr}.app-controls{border-right:none;border-bottom:1px solid var(--border);overflow:visible}.app-preview{overflow:visible}}