:root{--bg:#f6f7f3;--surface:#fff;--surface-soft:#f9faf6;--surface-strong:#111827;--text:#374151;--text-muted:#6b7280;--text-soft:#9ca3af;--heading:#101827;--border:#e3e5df;--border-strong:#d1d5c9;--primary:#2563eb;--primary-strong:#1d4ed8;--primary-soft:#eff6ff;--accent:#7c3aed;--success:#059669;--danger:#dc2626;--warning:#b45309;--shadow-sm:0 1px 2px #1118270f;--shadow-md:0 18px 45px #1f29371a;--radius:8px;--font-sans:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;font-family:var(--font-sans);color:var(--text);background:radial-gradient(circle at top left, #2563eb14, transparent 32rem), linear-gradient(180deg, #fbfcf8 0%, var(--bg) 54%, #f2f4ee 100%);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{min-width:320px;min-height:100svh;margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed}button:focus-visible,input:focus-visible{outline-offset:2px;outline:3px solid #2563eb40}h1,h2,h3,p{margin:0}#root{min-height:100svh}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.app-shell{width:min(1180px,100% - 32px);margin:0 auto;padding:28px 0 56px}.app-header{justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px;display:flex}.app-eyebrow,.section-kicker{color:var(--text-muted);letter-spacing:.12em;text-transform:uppercase;font-size:11px;font-weight:700}.app-title{color:var(--heading);margin-top:4px;font-size:clamp(24px,3vw,34px);font-weight:760;line-height:1.12}.app-tabs{border:1px solid var(--border);box-shadow:var(--shadow-sm);background:#ffffffbf;border-radius:999px;align-items:center;gap:4px;margin-bottom:18px;padding:4px;display:inline-flex}.app-tab{min-height:38px;color:var(--text-muted);background:0 0;border:0;border-radius:999px;align-items:center;gap:7px;padding:0 18px;font-size:14px;font-weight:650;transition:background-color .18s,color .18s,box-shadow .18s;display:inline-flex}.app-tab svg,.primary-button svg,.secondary-button svg,.accent-button svg,.add-photo-button svg,.save-all-button svg{flex:none}.app-tab.is-active{background:var(--surface-strong);color:#fff;box-shadow:0 8px 22px #11182729}.app-tab-badge{min-width:20px;height:20px;color:inherit;background:#ffffff2e;border-radius:999px;place-items:center;padding:0 7px;font-size:11px;font-weight:750;display:inline-grid}.app-tab:not(.is-active) .app-tab-badge{color:#4b5563;background:#e5e7eb}.home-layout,.gallery-layout{flex-direction:column;gap:16px;display:flex}.hero-panel,.control-panel,.export-panel{border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);background:#ffffffdb}.hero-panel{grid-template-columns:minmax(0,1fr) minmax(270px,auto);align-items:center;gap:16px;padding:16px;display:grid;overflow:hidden}.hero-copy{max-width:700px}.hero-copy h2{color:var(--heading);margin:6px 0;font-size:19px;font-weight:720;line-height:1.3}.hero-copy p:last-child{color:var(--text-muted);font-size:13px}.status-metrics{grid-template-columns:repeat(3,minmax(82px,1fr));gap:8px;display:grid}.status-metrics div{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-soft);text-align:left;min-width:82px;padding:12px 12px 12px 42px;position:relative}.status-metrics svg{color:var(--primary);position:absolute;top:13px;left:13px}.status-metrics div:nth-child(2) svg{color:var(--warning)}.status-metrics div:nth-child(3) svg{color:var(--danger)}.status-metrics strong{color:var(--heading);font-size:24px;line-height:1;display:block}.status-metrics span{color:var(--text-muted);margin-top:6px;font-size:12px;font-weight:650;display:block}.upload-zone{border-radius:var(--radius);min-height:178px;color:var(--heading);text-align:center;background:linear-gradient(135deg,#2563eb14,#05966914),#ffffffbd;border:1.5px dashed #9aa6b2;place-content:center;justify-items:center;gap:8px;padding:28px;transition:border-color .18s,box-shadow .18s,transform .18s;display:grid}.upload-zone:hover{border-color:var(--primary);box-shadow:var(--shadow-md);transform:translateY(-1px)}.upload-zone strong{font-size:18px}.upload-zone span{color:var(--text-muted);font-size:13px}.upload-zone svg{color:var(--primary)}.add-photo-button{border-radius:var(--radius);background:var(--primary-soft);min-height:48px;color:var(--primary-strong);border:1.5px dashed #93c5fd;justify-content:center;align-items:center;gap:8px;padding:0 16px;font-size:14px;font-weight:720;display:inline-flex}.control-panel{flex-direction:column;gap:12px;padding:16px;display:flex}.action-bar,.gallery-toolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;display:flex}.status-line,.gallery-toolbar p{color:var(--text-muted);font-size:13px}.primary-button,.secondary-button,.accent-button,.save-all-button{border-radius:var(--radius);justify-content:center;align-items:center;gap:8px;min-height:40px;font-size:13px;font-weight:720;transition:transform .16s,box-shadow .16s,background-color .16s;display:inline-flex}.primary-button,.accent-button,.save-all-button{color:#fff;border:0}.primary-button{background:var(--primary);padding:0 20px}.primary-button:hover,.save-all-button:hover{background:var(--primary-strong);transform:translateY(-1px);box-shadow:0 10px 22px #2563eb2e}.secondary-button{background:var(--primary-soft);color:var(--primary-strong);border:1px solid #bfdbfe;padding:0 16px}.accent-button{background:var(--accent);padding:0 14px}.empty-state{border:1px dashed var(--border-strong);border-radius:var(--radius);color:var(--text-muted);text-align:center;background:#ffffffa6;padding:72px 20px}.empty-state .primary-button{margin-top:12px}.export-panel{margin-top:4px;padding:16px}.save-all-button{background:var(--success);width:100%}.save-all-button:disabled{color:#64748b;box-shadow:none;background:#cbd5e1;transform:none}@media (width<=760px){.app-shell{width:min(100% - 20px,1180px);padding-top:16px}.app-header,.hero-panel{grid-template-columns:1fr;align-items:stretch}.app-header{flex-direction:column}.app-tabs{width:100%}.app-tab{flex:1;justify-content:center;padding-inline:12px}.status-metrics{grid-template-columns:repeat(3,1fr)}.status-metrics div{min-width:0}}
