:root{--bg: #0f172a;--surface: #1e293b;--surface-2: #273449;--border: #334155;--text: #e2e8f0;--muted: #94a3b8;--accent: #38bdf8;--accent-text: #052c3d;--danger: #f87171;--success: #4ade80;--radius: 14px}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}.app{max-width:720px;margin:0 auto;min-height:100%;display:flex;flex-direction:column}.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:12px;padding:14px 16px;padding-top:max(14px,env(safe-area-inset-top));background:#0f172aeb;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}.topbar h1{font-size:17px;margin:0;flex:1;font-weight:600}.topbar .sub{font-size:13px;color:var(--muted);font-weight:400}.content{flex:1;padding:16px;padding-bottom:max(24px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;text-decoration:none;color:inherit;display:block}.card+.card{margin-top:0}a.card:active{background:var(--surface-2)}.card-title{font-weight:600;margin-bottom:4px}.card-meta{font-size:14px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 12px}label{display:block;font-size:14px;color:var(--muted);margin-bottom:6px}input,select,textarea{width:100%;padding:13px 14px;font-size:16px;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);font-family:inherit}input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:-1px}.field+.field{margin-top:14px}button{font-family:inherit;font-size:16px;font-weight:600;padding:14px 18px;border-radius:var(--radius);border:1px solid transparent;background:var(--accent);color:var(--accent-text);cursor:pointer;width:100%}button:disabled{opacity:.55;cursor:default}button.secondary{background:transparent;border-color:var(--border);color:var(--text)}button.quiet{background:transparent;border:none;color:var(--muted);width:auto;padding:8px;font-weight:500}.error{background:#f871711f;border:1px solid rgba(248,113,113,.4);color:#fecaca;padding:12px 14px;border-radius:var(--radius);font-size:15px}.empty{text-align:center;color:var(--muted);padding:48px 16px}.badge{display:inline-block;font-size:12px;padding:3px 9px;border-radius:999px;background:var(--surface-2);color:var(--muted);white-space:nowrap}.badge.done{color:var(--success)}.center{display:flex;align-items:center;justify-content:center;min-height:100%;padding:24px}.login-box{width:100%;max-width:380px}.login-box h1{font-size:24px;margin:0 0 6px}.login-box p{color:var(--muted);margin:0 0 24px;font-size:15px}.tiles{display:flex;flex-wrap:wrap;gap:8px}.tile{position:relative;width:88px;height:88px;padding:0;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-2);display:flex;align-items:center;justify-content:center}.tile img{width:100%;height:100%;object-fit:cover;display:block}.tile.error{border-color:var(--danger)}.tile-label{font-size:12px;color:var(--muted);padding:6px;text-align:center}.tile-progress{position:absolute;left:0;bottom:0;height:100%;background:#4ade8059;border-right:2px solid var(--success);transition:width .15s linear;pointer-events:none}.tile-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:700;pointer-events:none}.done-overlay{background:#4ade8059;color:#052e16;font-size:34px;text-shadow:0 1px 2px rgba(255,255,255,.6)}.error-overlay{background:#0f172ab8;color:var(--danger);font-size:13px}.tile-actions{display:flex;gap:8px;margin-top:10px}.offline-note{background:#fbbf241f;border:1px solid rgba(251,191,36,.4);color:#fde68a;padding:12px 14px;border-radius:var(--radius);font-size:14px}body[data-theme=light]{--bg: #f8fafc;--surface: #ffffff;--surface-2: #f1f5f9;--border: #e2e8f0;--text: #0f172a;--muted: #64748b;--accent: #0284c7;--accent-text: #ffffff;background:var(--bg);color:var(--text)}.row{display:flex;gap:8px}.row button{flex:1}.link-box{margin-top:8px;padding:12px 14px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);font-size:14px;word-break:break-all;-webkit-user-select:all;user-select:all}.password{font-size:18px;letter-spacing:2px;-webkit-user-select:all;user-select:all}.quiet-link{display:inline-block;margin-top:12px;color:var(--accent);font-size:14px}.switch{display:flex;align-items:center;gap:10px;margin:14px 0 6px;color:var(--text);font-size:16px}.switch input{width:22px;height:22px;margin:0;flex:none}.tile.picked{outline:3px solid var(--success);outline-offset:-3px}.tile.picked img{opacity:.75}.pick-mark{position:absolute;right:4px;bottom:2px;color:var(--success);font-size:20px;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.6)}.public-head{display:flex;justify-content:center;padding:24px 16px 4px}.public-head .logo{max-height:56px;max-width:70%}.logo-text{font-size:20px;font-weight:700;letter-spacing:.3px}.public-title{margin:0 0 8px;font-size:22px}.public-message{margin:0 0 12px;color:var(--muted)}.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}.fact{display:flex;flex-direction:column}.fact span{font-size:13px;color:var(--muted)}.stage-name{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);margin-bottom:8px}.stage-name:before{content:"";width:8px;height:8px;border-radius:999px;background:currentColor}.stage-name.before{color:#f59e0b}.stage-name.after{color:#16a34a}.stage-count{font-weight:500;color:var(--muted)}.stages{margin-top:12px}.compare{display:grid;gap:16px}@media(min-width:560px){.compare{grid-template-columns:1fr 1fr}}.stage+.stage{margin-top:0}.step-number{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-right:8px;border-radius:999px;background:var(--surface-2);color:var(--muted);font-size:13px;vertical-align:middle}.pick-group+.pick-group{margin-top:18px;padding-top:14px;border-top:1px solid var(--border)}.pick-group{margin-top:14px}.pick-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}.pick-head .stage-name{margin-bottom:0}.pick-step{font-weight:600}.public-foot{text-align:center;color:var(--muted);font-size:13px;padding:24px 16px 32px}.lightbox{position:fixed;inset:0;z-index:50;background:#020617eb;display:flex;align-items:center;justify-content:center;padding:16px}.lightbox img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px}.lightbox-bar{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:12px;padding:max(10px,env(safe-area-inset-top)) 12px 10px;background:linear-gradient(#020617d9,#02061700);color:#e2e8f0}.lightbox-title{flex:1;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lightbox-count{font-size:14px;color:#94a3b8;white-space:nowrap}.lightbox-bar .quiet{color:#e2e8f0}.lightbox-arrow{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:64px;padding:0;display:flex;align-items:center;justify-content:center;font-size:34px;line-height:1;color:#e2e8f0;background:#0f172a8c;border:1px solid rgba(148,163,184,.25);border-radius:var(--radius)}.lightbox-arrow.left{left:8px}.lightbox-arrow.right{right:8px}.button-link{display:block;margin-top:12px;padding:14px 18px;border-radius:var(--radius);background:var(--accent);color:var(--accent-text);font-weight:600;text-align:center;text-decoration:none}.usage-head{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}.usage-head b{font-size:20px}.usage-head .badge{margin-left:auto}.bar{height:10px;border-radius:999px;background:var(--surface-2);overflow:hidden}.bar-fill{height:100%;background:var(--success);transition:width .3s}.bar-fill.warn{background:#f59e0b}.bar-fill.danger{background:var(--danger)}.badge.warn{background:#f59e0b2e;color:#fbbf24}.badge.danger{background:#f871712e;color:#fca5a5}.usage-parts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}.logo-row{display:flex;align-items:center;gap:14px;margin:12px 0 8px}.logo-preview{width:96px;height:64px;object-fit:contain;background:var(--surface-2);border-radius:8px;padding:6px}.logo-empty{width:96px;height:64px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:12px;color:var(--muted);background:var(--surface-2);border:1px dashed var(--border);border-radius:8px}.person{display:flex;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid var(--border)}.person:last-child{border-bottom:none}.muted{color:var(--muted);text-decoration:line-through}.notice{padding:12px 14px;border-radius:var(--radius);font-size:15px;margin-bottom:12px}.notice.warn{background:#f59e0b1f;border:1px solid rgba(245,158,11,.4);color:#fcd34d}.notice.danger{background:#f871711f;border:1px solid rgba(248,113,113,.4);color:#fecaca}.app.wide{max-width:1000px}