@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";:root{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;line-height:1.6;font-weight:400;color:#e8e6e3;background-color:#0f0f10;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--ink: #e8e6e3;--ink-muted: rgba(232, 230, 227, .6);--ink-faint: rgba(232, 230, 227, .4);--paper: #0f0f10;--paper-muted: #18181b;--surface: #1f1f23;--surface-raised: #27272a;--accent: #6366f1;--accent-hover: #818cf8;--accent-muted: rgba(99, 102, 241, .15);--accent-glow: rgba(99, 102, 241, .4);--sage: #34d399;--sage-muted: rgba(52, 211, 153, .15);--warning: #f59e0b;--shadow: 0 24px 60px rgba(0, 0, 0, .5);--shadow-sm: 0 8px 24px rgba(0, 0, 0, .4);--border: 1px solid rgba(255, 255, 255, .08);--border-subtle: 1px solid rgba(255, 255, 255, .05);--ring: 0 0 0 3px rgba(99, 102, 241, .4);--glow: 0 0 40px rgba(99, 102, 241, .15)}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:linear-gradient(180deg,#0f0f10,#111113,#0a0a0b);color:var(--ink);position:relative;overflow-x:hidden}.login-overlay{position:fixed;inset:0;background:var(--paper);display:flex;align-items:flex-start;justify-content:center;z-index:1000;overflow-y:auto;padding:60px 24px}.login-overlay.hidden{display:none}.landing-container{max-width:720px;width:100%;display:flex;flex-direction:column;align-items:center;gap:56px}.landing-hero{text-align:center;display:flex;flex-direction:column;align-items:center}.landing-logo{width:88px;height:88px;object-fit:contain;margin-bottom:28px;border-radius:22px;background:var(--surface);padding:16px;box-shadow:0 0 0 1px #ffffff14,0 8px 32px #6366f133,0 0 60px #6366f11a}.landing-hero h1{margin:0 0 16px;font-size:2.75rem;font-weight:700;color:var(--ink);letter-spacing:-.03em;line-height:1.1}.landing-tagline{margin:0;font-size:1.2rem;color:var(--ink-muted);max-width:360px;line-height:1.5}.landing-features{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;width:100%}.feature-card{background:var(--surface);border:var(--border);border-radius:14px;padding:20px 16px;text-align:center;transition:transform .2s,box-shadow .2s,border-color .2s}.feature-card:hover{transform:translateY(-3px);box-shadow:0 12px 32px #0000004d;border-color:#ffffff1f}.feature-icon{font-size:1.75rem;margin-bottom:10px;display:block}.feature-card h3{margin:0 0 6px;font-size:.85rem;font-weight:600;color:var(--ink)}.feature-card p{margin:0;font-size:.75rem;color:var(--ink-muted);line-height:1.4}.login-card{background:var(--surface);border:var(--border);border-radius:20px;padding:36px 40px;text-align:center;box-shadow:var(--shadow);max-width:360px;width:100%}.login-card h2{margin:0 0 6px;font-size:1.35rem;font-weight:600;color:var(--ink)}.login-card>p{margin:0 0 24px;color:var(--ink-muted);font-size:.9rem}#login-form{display:flex;flex-direction:column;gap:14px}#login-password{padding:14px 18px;border:var(--border);border-radius:12px;background:var(--paper);color:var(--ink);font-size:1rem;font-family:inherit;outline:none;transition:border-color .2s,box-shadow .2s}#login-password:focus{border-color:var(--accent);box-shadow:var(--ring)}#login-password::placeholder{color:var(--ink-faint)}.login-error{margin:14px 0 0;color:#ef4444;font-size:.875rem}.login-error.hidden{display:none}.landing-footer{text-align:center}.landing-footer p{margin:0;color:var(--ink-faint);font-size:.8rem}@media(max-width:700px){.login-overlay{padding:40px 20px}.landing-container{gap:40px}.landing-hero h1{font-size:2rem}.landing-tagline{font-size:1.05rem}.landing-features{grid-template-columns:repeat(2,1fr);gap:12px}.feature-card{padding:16px 12px}.feature-icon{font-size:1.5rem}.feature-card h3{font-size:.8rem}.feature-card p{font-size:.7rem}.landing-logo{width:72px;height:72px;padding:14px}.login-card{padding:28px 24px}}@media(max-width:400px){.landing-features{grid-template-columns:1fr}}body:before,body:after{content:"";position:absolute;z-index:0;width:600px;height:600px;border-radius:50%;filter:blur(120px);opacity:.4}body:before{background:radial-gradient(circle,rgba(99,102,241,.3),transparent 60%);top:-200px;right:-150px}body:after{background:radial-gradient(circle,rgba(52,211,153,.2),transparent 60%);bottom:-300px;left:-200px}#app{max-width:1200px;margin:0 auto;padding:48px 32px 96px;display:flex;flex-direction:column;gap:48px;position:relative;z-index:1}.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,360px);gap:32px;align-items:center}.hero-text h1{font-size:clamp(2.4rem,3.2vw,3.6rem);font-weight:700;margin:10px 0 16px;letter-spacing:-.03em;background:linear-gradient(135deg,#fff,#ffffffb3);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.eyebrow{text-transform:uppercase;letter-spacing:.28em;font-size:.7rem;color:var(--accent);margin:0;font-weight:600}.subtitle{font-size:1.1rem;margin:0;color:var(--ink-muted)}.hero-card{background:linear-gradient(145deg,var(--surface) 0%,var(--paper-muted) 100%);padding:28px;border-radius:24px;border:var(--border);box-shadow:var(--shadow),var(--glow);display:grid;gap:14px}.hero-card-row{display:flex;flex-direction:column;gap:4px}.hero-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.15em;color:var(--sage)}.hero-value{font-weight:600;color:var(--ink)}.step{background:var(--surface);padding:34px;border-radius:24px;border:var(--border);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:24px;animation:fadeUp .5s ease}.hidden{display:none!important}.step-header h2{margin:0 0 8px;font-size:1.75rem;font-weight:700;letter-spacing:-.02em}.step-header p{margin:0;color:var(--ink-muted)}.upload-zones{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}.upload-zone{border-radius:20px;padding:24px;background:var(--paper-muted);border:1px dashed rgba(255,255,255,.12);display:flex;flex-direction:column;gap:16px;position:relative;overflow:hidden;transition:border-color .3s ease,background .3s ease}.upload-zone:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,var(--accent-muted),transparent 60%);opacity:0;transition:opacity .3s ease}.upload-zone:hover{border-color:#6366f14d;background:var(--surface)}.upload-zone:hover:after{opacity:1}.upload-zone.drag-over{border-color:var(--accent);border-style:solid;background:var(--surface)}.upload-zone.drag-over:after{opacity:1}.zone-content{display:flex;flex-direction:column;gap:8px;position:relative;z-index:1}.zone-content h3{margin:0;font-weight:600}.zone-content p{margin:0;color:var(--ink-muted);font-size:.9rem}.zone-tag{text-transform:uppercase;font-size:.7rem;letter-spacing:.2em;color:var(--accent);font-weight:600}.upload-zone input{display:none}.upload-btn{display:inline-flex;align-items:center;justify-content:center;border-radius:12px;padding:12px 20px;background:var(--accent);color:#fff;font-weight:600;cursor:pointer;width:fit-content;transition:transform .2s ease,box-shadow .2s ease,background .2s ease;box-shadow:0 8px 24px var(--accent-glow)}.upload-btn:hover{transform:translateY(-2px);background:var(--accent-hover);box-shadow:0 12px 32px var(--accent-glow)}.photo-count{font-size:.85rem;color:var(--ink-faint)}.thumbnails-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}.thumbnail-section h4{margin:0 0 12px;font-weight:600;color:var(--ink)}.thumbnails,.selectable-photos,.draggable-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:12px;will-change:transform}.thumb,.film-card{background:var(--surface-raised);border-radius:12px;border:var(--border-subtle);padding:8px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--shadow-sm);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.thumb img,.film-card img{width:100%;height:90px;object-fit:cover;border-radius:8px;background:var(--paper-muted)}.thumb-fallback{width:100%;height:90px;border-radius:8px;background:var(--paper-muted);color:var(--ink-faint);font-size:.75rem;display:flex;align-items:center;justify-content:center;text-align:center;padding:6px}.thumb-label,.film-card-label{font-size:.7rem;color:var(--ink-muted);word-break:break-word;line-height:1.3}.selectable{cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.selectable:hover{transform:translateY(-3px);box-shadow:0 12px 28px #00000080;border-color:#ffffff26}.range-selection{display:grid;gap:20px}.anchor-pair{display:flex;flex-direction:column;gap:12px}.anchor-label{font-weight:600;color:var(--ink)}.anchor-slots{display:flex;align-items:center;gap:16px}.anchor-slot{flex:1;min-height:120px;border-radius:16px;border:1px dashed rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;gap:12px;padding:16px;background:var(--paper-muted);transition:border-color .3s ease,background .3s ease}.anchor-slot:hover{border-color:#6366f166;background:var(--surface)}.anchor-slot img{width:70px;height:70px;object-fit:cover;border-radius:10px}.slot-label{font-size:.8rem;color:var(--ink-muted)}.placeholder{color:var(--ink-faint);font-size:.9rem}.arrow{color:var(--ink-faint);font-size:1.2rem}.range-photos{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}.range-photo-section h4{margin:0 0 12px;font-weight:600;color:var(--ink)}.button-row{display:flex;flex-wrap:wrap;gap:12px}.primary-btn,.secondary-btn{border:none;border-radius:12px;padding:14px 28px;font-weight:600;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background .2s ease;font-size:.95rem}.primary-btn{background:var(--accent);color:#fff;box-shadow:0 8px 24px var(--accent-glow)}.primary-btn:disabled{background:var(--surface-raised);color:var(--ink-faint);cursor:not-allowed;box-shadow:none}.secondary-btn{background:var(--surface-raised);border:var(--border);color:var(--ink)}.secondary-btn:hover{background:var(--surface);border-color:#ffffff26}#new-roll-btn{background:var(--sage-muted);border:1px solid rgba(52,211,153,.3);color:var(--sage)}#new-roll-btn:hover{background:#34d39940;border-color:var(--sage)}.primary-btn:hover:not(:disabled){transform:translateY(-2px);background:var(--accent-hover);box-shadow:0 12px 32px var(--accent-glow)}.primary-btn:focus-visible,.secondary-btn:focus-visible,.upload-btn:focus-visible{outline:none;box-shadow:var(--ring)}.timeline-controls{display:flex;align-items:center;justify-content:space-between;gap:12px}.match-stats{font-weight:600;color:var(--sage)}#timeline-container{overflow-x:auto;padding:12px 0;will-change:transform}#timeline{min-width:700px}#timeline-track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(160px,1fr);gap:16px}.timeline-node{background:var(--paper-muted);border-radius:16px;padding:12px;border:var(--border);display:grid;gap:10px;min-height:240px;transition:border-color .3s ease,background .3s ease}.timeline-node:hover{border-color:#ffffff26;background:var(--surface)}.timeline-node img{width:100%;height:110px;object-fit:cover;border-radius:10px;background:var(--surface)}.timeline-label{font-size:.75rem;color:var(--ink-muted)}.node-film{display:grid;gap:8px}.node-film .film-card{background:var(--surface-raised);border:1px solid rgba(99,102,241,.3)}#unmatched-film{display:grid;gap:12px}#unmatched-film h4{margin:0;font-weight:600;color:var(--ink)}.rename-config{display:grid;gap:24px}.rename-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}.rename-field{display:flex;flex-direction:column;gap:8px}.rename-field label{font-size:.85rem;font-weight:500;color:var(--ink-muted)}.rename-field input{background:var(--paper-muted);border:var(--border);border-radius:10px;padding:12px 16px;color:var(--ink);font-size:1rem;font-family:inherit;transition:border-color .2s ease,background .2s ease}.rename-field input:focus{outline:none;border-color:var(--accent);background:var(--surface)}.rename-field input::placeholder{color:var(--ink-faint)}.rename-preview{background:var(--paper-muted);border-radius:16px;padding:20px;border:var(--border-subtle)}.rename-preview h4{margin:0 0 16px;font-weight:600;color:var(--ink)}#rename-preview-list{display:grid;gap:8px;max-height:300px;overflow-y:auto}.rename-preview-item{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--surface);border-radius:10px;font-size:.85rem}.rename-original{color:var(--ink-faint);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rename-arrow{color:var(--accent);flex-shrink:0}.rename-new{color:var(--sage);font-weight:500;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#export-preview{overflow-x:auto;border-radius:16px;border:var(--border);background:var(--paper-muted)}#export-table{width:100%;border-collapse:collapse;min-width:600px}#export-table th{text-align:left;padding:14px 12px;border-bottom:var(--border);font-size:.8rem;font-weight:600;color:var(--ink-muted);text-transform:uppercase;letter-spacing:.05em;background:var(--surface)}#export-table td{text-align:left;padding:14px 12px;border-bottom:var(--border-subtle);font-size:.9rem;color:var(--ink)}#export-table tr:last-child td{border-bottom:none}#export-table tr:hover td{background:var(--surface)}#export-progress{display:grid;gap:10px}.progress-bar{width:100%;height:8px;background:var(--paper-muted);border-radius:999px;overflow:hidden}.progress-fill{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--sage));border-radius:999px;transition:width .3s ease}#progress-text{font-size:.85rem;color:var(--ink-muted)}@keyframes fadeUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@media(max-width:900px){.hero{grid-template-columns:1fr}#app{padding:32px 20px 72px}.timeline-controls{flex-direction:column;align-items:flex-start}}@media(max-width:600px){.anchor-slots{flex-direction:column}#timeline-track{grid-auto-columns:minmax(140px,1fr)}.step{padding:24px 20px;border-radius:20px}.rename-fields{grid-template-columns:1fr}}