:root{--bg:#faf7f2;--surface:#fff;--text:#2b2420;--muted:#7a6e66;--accent:#6b4f3a;--border:#e6ded5;color:var(--text);background:var(--bg);font-family:system-ui,Segoe UI,Arial,sans-serif}*{box-sizing:border-box}body{margin:0}button{font:inherit;cursor:pointer}.app{flex-direction:column;max-width:600px;min-height:100dvh;margin:0 auto;display:flex}.header{padding:16px;padding-top:max(16px, env(safe-area-inset-top));justify-content:space-between;align-items:center;display:flex}.header h1{color:var(--accent);margin:0}.tagline{color:var(--muted);margin:4px 0 0;font-size:.9rem}.lang{border:1px solid var(--border);background:var(--surface);border-radius:999px;padding:6px 14px}.header-actions{gap:8px;display:flex}.content{flex:1;padding:0 16px}.hint{color:var(--muted);font-size:.9rem}.status{font-size:.85rem}.status.missing{color:#b26a00}.login form{flex-direction:column;gap:12px;display:flex}.login label{color:var(--muted);font-size:.9rem}.login input{font:inherit;border:1px solid var(--border);background:var(--surface);border-radius:10px;padding:12px}.login input.code{letter-spacing:.3em;text-align:center;font-size:1.5rem}.primary{background:var(--accent);color:#fff;border:none;border-radius:10px;padding:12px;font-weight:600}.primary:disabled{opacity:.6}.google{border:1px solid var(--border);background:var(--surface);border-radius:10px;justify-content:center;align-items:center;gap:10px;width:100%;padding:12px;font-weight:600;display:flex}.divider{text-align:center;color:var(--muted);margin:8px 0 0}.link{color:var(--accent);background:0 0;border:none;text-decoration:underline}.error{color:#c62828}.success{color:#2e7d32;font-weight:600}.add-item{flex-direction:column;gap:16px;padding-bottom:24px;display:flex}.add-item h3{margin:0 0 8px;font-size:1rem}.add-item .hint{margin:-4px 0 8px}.photo-buttons{gap:8px;display:flex}.photo-buttons button:disabled{opacity:.6}.preview{object-fit:contain;background:var(--surface);border:1px solid var(--border);border-radius:12px;width:100%;max-height:50vh}.ai-box{color:var(--accent);background:#f3ece3;border-radius:10px;margin:0;padding:12px}.ai-box.done{color:#2e7d32;background:#e8f3e8}.ai-box progress{width:100%;accent-color:var(--accent)}.camera{z-index:10;background:#000;flex-direction:column;display:flex;position:fixed;inset:0}.camera video{object-fit:cover;flex:1;width:100%;min-height:0}.camera-frame{pointer-events:none;border:3px dashed #ffffffd9;border-radius:16px;position:absolute;inset:12% 15% 28%}.camera-hint{top:max(12px, env(safe-area-inset-top));color:#fff;text-align:center;background:#0000008c;border-radius:10px;margin:0;padding:8px 12px;font-size:.9rem;position:absolute;left:16px;right:16px}.camera-controls{padding:20px 24px;padding-bottom:max(20px, env(safe-area-inset-bottom));justify-content:space-between;align-items:center;display:flex}.camera-cancel{color:#fff;background:0 0;border:none;width:72px}.camera-spacer{width:72px}.torch{color:#fff;background:0 0;border:1px solid #fff9;border-radius:999px;width:72px;padding:8px 0;font-size:.85rem}.torch.on{color:#000;background:#ffd54f;border-color:#ffd54f}.shutter{background:#ffffff59;border:5px solid #fff;border-radius:50%;width:72px;height:72px}.shutter:active{background:#fff}.shutter:disabled{opacity:.4}.chips{flex-wrap:wrap;gap:8px;display:flex}.chip{border:1px solid var(--border);background:var(--surface);border-radius:999px;padding:8px 14px}.chip.on{background:var(--accent);border-color:var(--accent);color:#fff}.swatch{border:2px solid var(--border);border-radius:50%;width:40px;height:40px;padding:0}.add-swatch{background:var(--surface);color:var(--muted);cursor:pointer;justify-content:center;align-items:center;font-size:1.4rem;display:flex;position:relative}.add-swatch input{opacity:0;cursor:pointer;position:absolute;inset:0}.text-input{width:100%;font:inherit;border:1px solid var(--border);background:var(--surface);border-radius:10px;padding:12px}.save{width:100%}.tabbar{background:var(--surface);border-top:1px solid var(--border);padding-bottom:env(safe-area-inset-bottom);display:flex;position:sticky;bottom:0}.tabbar button{color:var(--muted);background:0 0;border:none;flex:1;padding:14px 0}.tabbar button.active{color:var(--accent);font-weight:600}
