@import"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600&family=IBM+Plex+Mono:wght@400;500&display=swap";:root{color-scheme:light;--bg: #f7f5f0;--ink: #141414;--muted: #5c5c5c;--accent: #ff6b4a;--accent-2: #2a9d8f;--card: #ffffff;--border: rgba(20, 20, 20, .1);--shadow: 0 20px 40px rgba(20, 20, 20, .08)}*{box-sizing:border-box}body{margin:0;font-family:Space Grotesk,sans-serif;color:var(--ink);background:radial-gradient(circle at 10% 10%,#fff6e8,transparent 50%),radial-gradient(circle at 90% 0%,#e6f5ff,transparent 45%),linear-gradient(120deg,#f7f5f0,#f1f3f8);min-height:100vh}button,input,select{font-family:inherit}.app{display:flex;flex-direction:column;min-height:100vh}.topbar{display:flex;justify-content:space-between;align-items:center;padding:20px 32px;border-bottom:1px solid var(--border);background:#ffffffb3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.title{font-size:24px;font-weight:600;letter-spacing:-.02em}.subtitle{font-size:13px;color:var(--muted)}.auth{display:flex;align-items:center;gap:12px;font-size:14px}.auth button{padding:8px 14px;border-radius:999px;border:1px solid var(--border);background:#fff;cursor:pointer}.auth .primary{background:var(--accent);color:#fff;border:none}.content{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding:24px 32px 32px;flex:1}.panel{background:var(--card);border-radius:20px;box-shadow:var(--shadow);border:1px solid var(--border);padding:20px}.panel.upload{display:flex;flex-direction:column;min-height:0}.panel h2{margin:0 0 12px;font-size:18px}.upload input{width:100%;padding:12px;border:1px dashed var(--border);border-radius:12px;background:#fafafa}.photo-list{display:flex;flex-direction:column;gap:10px;margin-top:16px;flex:1;min-height:0;overflow:auto}.photo-item{display:flex;align-items:center;gap:12px;padding:8px;border-radius:12px;border:1px solid transparent;cursor:pointer}.photo-thumb-wrap{flex:2;max-width:40%;height:96px;border-radius:12px;background:#f4f4f4;display:flex;align-items:center;justify-content:center;overflow:hidden}.photo-item .photo-info{flex:2;min-width:0}.photo-item .remove-btn{flex:1;max-width:20%}.photo-item.dragging{opacity:.6;cursor:grabbing}.photo-item:active{cursor:grabbing}.photo-info{flex:1}.remove-btn{padding:6px 10px;border-radius:999px;border:1px solid var(--border);background:#fff;font-size:12px;cursor:pointer}.remove-btn:hover{background:#ffe9e4;border-color:#ff6b4a66}.photo-item.selected{border-color:var(--accent);background:#ff6b4a14}.photo-thumb{width:100%;height:100%;object-fit:contain;border-radius:8px}.photo-meta{font-size:12px;color:var(--muted)}.canvas-wrap{background:#0f0f0f;border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:12px;color:#f5f5f5}.canvas-wrap canvas{width:100%;height:auto;border-radius:14px;background:#111}.controls{display:flex;flex-direction:column;gap:12px;font-size:14px}.preview-panel{display:flex;flex-direction:column;gap:16px}.preview-controls{display:flex;flex-direction:column;gap:12px}.preview-controls label{display:block;margin-bottom:6px;font-size:12px;color:var(--muted)}.preview-controls select{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--border);background:#fff;font-size:14px}.preview-controls input[type=range]{width:100%;accent-color:var(--accent)}.controls label{font-size:12px;color:var(--muted)}.controls input[type=range],.controls select,.controls button{width:100%}.controls button{padding:10px 14px;border-radius:12px;border:none;background:var(--accent-2);color:#fff;cursor:pointer}.controls .primary-cta{padding:16px 20px;font-size:17px;font-weight:600;border-radius:16px;background:var(--accent);box-shadow:0 12px 24px #ff6b4a40}.preview-controls .primary-cta{width:100%;padding:16px 20px;font-size:17px;font-weight:600;border-radius:16px;background:var(--accent);color:#fff;border:none;cursor:pointer;box-shadow:0 12px 24px #ff6b4a40}.mute-toggle{width:32px;height:32px;border-radius:6px;border:none;background:transparent;color:var(--accent);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s ease;flex-shrink:0}.mute-toggle:hover:not(:disabled){background:#ff6b4a1a}.mute-toggle:disabled{opacity:.4;cursor:not-allowed}.controls .secondary{background:#f1f1f1;color:#222;border:1px solid var(--border)}.adjuster{display:flex;flex-direction:column;gap:10px}.adjuster canvas{width:100%;height:auto;aspect-ratio:1 / 1;border-radius:12px;background:#f4f4f4;touch-action:none;cursor:crosshair}.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;background:#2a9d8f26;color:#1a6f65}.status{font-family:IBM Plex Mono,monospace;font-size:12px;color:var(--muted)}.photo-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.photo-nav-btn{min-width:90px;min-height:48px;padding:10px 18px;border-radius:14px;border:1px solid var(--border);background:#fff;font-size:16px;font-weight:600;font-family:inherit;cursor:pointer;color:var(--ink);transition:background .15s,border-color .15s,transform .1s;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.photo-nav-btn:active{transform:scale(.96);background:#f0f0f0}.photo-nav-btn:disabled{opacity:.35;cursor:default}.photo-nav-btn:not(:disabled):hover{background:#ff6b4a14;border-color:#ff6b4a66}.photo-nav-label{font-family:IBM Plex Mono,monospace;font-size:15px;font-weight:500;color:var(--muted);white-space:nowrap}.photo-nav-name{font-size:13px;color:var(--muted);text-align:center;margin-bottom:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media (max-width: 980px){html,body{overflow-x:hidden}.topbar{padding:16px}.content{grid-template-columns:1fr;padding:16px;gap:16px}.panel{padding:14px;max-width:100%;overflow:hidden}.canvas-wrap{padding:10px}.canvas-wrap canvas{max-width:100%}.adjuster canvas{max-width:100%}.upload input{max-width:100%}.photo-nav-btn{min-width:0;flex:1;min-height:52px;font-size:17px;padding:12px 10px}}