:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#0d0e12;--surface:#17191f;--surface-2:#21242c;--border:#343843;--text:#f4f4f6;--text-muted:#a9aebb;--accent:#ffc23d;--accent-hover:#ffd36e;--on-accent:#1b1300;--danger:#ff7a7a;--focus:#8ec5ff;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--radius:12px;--radius-sm:8px;--tap:44px;--drawbar-height:88px;-webkit-text-size-adjust:100%;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5}*,:before,:after{box-sizing:border-box}body{background:var(--bg);min-height:100dvh;color:var(--text);margin:0}#root{flex-direction:column;min-height:100dvh;display:flex}main{outline:none;flex:1}[tabindex="-1"]:focus{outline:none}h1,h2,h3{margin:0;line-height:1.25}h1{font-size:1.5rem}h2{font-size:1.125rem}h3{font-size:1rem}p{margin:0}a{color:var(--accent)}img{max-width:100%;display:block}:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.skip-link{left:var(--space-2);z-index:100;padding:var(--space-2) var(--space-4);background:var(--accent);color:var(--on-accent);border-radius:var(--radius-sm);font-weight:600;position:absolute;top:-100px}.skip-link:focus{top:var(--space-2)}.page{width:100%;max-width:1200px;padding:var(--space-4);padding-top:max(var(--space-4), env(safe-area-inset-top));gap:var(--space-5);flex-direction:column;margin:0 auto;display:flex}.page-narrow{max-width:560px}.page-center{text-align:center;justify-content:center;align-items:center;gap:var(--space-4);min-height:60dvh}.stack{gap:var(--space-3);flex-direction:column;display:flex}.section-head{justify-content:space-between;align-items:center;gap:var(--space-3);flex-wrap:wrap;display:flex}.muted{color:var(--text-muted)}.small{font-size:.875rem}.count{color:var(--text-muted);font-weight:400}.big-emoji{font-size:4rem;line-height:1}.empty-state{padding:var(--space-5) var(--space-4);border:1px dashed var(--border);border-radius:var(--radius);color:var(--text-muted);text-align:center}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-4)}.site-footer{padding:var(--space-4);text-align:center;color:var(--text-muted);font-size:.8125rem}html:has(.has-drawbar){scroll-padding-bottom:calc(var(--drawbar-height) + env(safe-area-inset-bottom) + var(--space-2))}main:has(.has-drawbar)+.site-footer{padding-bottom:calc(var(--drawbar-height) + env(safe-area-inset-bottom) + var(--space-4))}button{font:inherit;color:inherit}.btn{justify-content:center;align-items:center;gap:var(--space-2);min-height:var(--tap);min-width:var(--tap);padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm);cursor:pointer;border:1px solid #0000;font-weight:600;text-decoration:none;transition:background-color .15s,transform .1s;display:inline-flex}.btn:active:not(:disabled){transform:scale(.97)}.btn:disabled{cursor:not-allowed;opacity:.7}.btn-primary{background:var(--accent);color:var(--on-accent)}.btn-primary:hover:not(:disabled){background:var(--accent-hover)}.btn-secondary{background:var(--surface-2);border-color:var(--border);color:var(--text)}.btn-secondary:hover:not(:disabled){border-color:var(--accent)}.btn-ghost{border-color:var(--border);color:var(--text);background:0 0}.btn-ghost:hover:not(:disabled){background:var(--surface-2)}.btn-danger{background:var(--danger);color:#1d0000}.btn-block{width:100%}.button-row{gap:var(--space-2);flex-wrap:wrap;justify-content:flex-end;display:flex}.icon-btn{width:var(--tap);height:var(--tap);color:var(--text);cursor:pointer;background:0 0;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:1.5rem;line-height:1;text-decoration:none;display:inline-flex}.icon-btn:hover{background:var(--surface-2)}.field{gap:var(--space-1);flex-direction:column;display:flex}label,legend{font-size:.9375rem;font-weight:600}input[type=text],input[type=search]{min-height:var(--tap);width:100%;padding:var(--space-2) var(--space-3);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-2);color:var(--text);font:inherit;font-size:1rem}input::placeholder{color:var(--text-muted);opacity:1}input:focus-visible{border-color:var(--focus)}.hint{color:var(--text-muted);font-size:.875rem}.form-error{color:var(--danger);font-weight:500}.emoji-picker{border:none;margin:0;padding:0}.emoji-options{gap:var(--space-2);margin-top:var(--space-2);flex-wrap:wrap;display:flex}.emoji-option{position:relative}.emoji-option input{opacity:0;cursor:pointer;margin:0;position:absolute;inset:0}.emoji-option span{width:var(--tap);height:var(--tap);border:2px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-2);justify-content:center;align-items:center;font-size:1.375rem;display:flex}.emoji-option input:checked+span{border-color:var(--accent);background:#3a3220}.emoji-option input:focus-visible+span{outline:3px solid var(--focus);outline-offset:2px}.toggle{align-items:center;gap:var(--space-2);min-height:var(--tap);cursor:pointer;font-weight:500;display:inline-flex}.toggle input{width:20px;height:20px;accent-color:var(--accent);margin:0}.home-header{padding:var(--space-4) 0 0}.logo{letter-spacing:-.02em;font-size:1.75rem;font-weight:800}.pot-list{gap:var(--space-2);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.pot-link{align-items:center;gap:var(--space-3);min-height:56px;padding:var(--space-2) var(--space-4);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-weight:600;text-decoration:none;display:flex}.pot-link:hover{border-color:var(--accent)}.pot-link-emoji{font-size:1.5rem}.pot-link-name{overflow-wrap:anywhere;flex:1}.pot-link-arrow{color:var(--text-muted);font-size:1.5rem}.settings{padding-top:var(--space-4);border-top:1px solid var(--border)}.pot-header{align-items:center;gap:var(--space-1);margin-inline:calc(var(--space-2) * -1);display:flex}.pot-title{flex:1;min-width:0;font-size:1.375rem}.pot-title-button{align-items:center;gap:var(--space-2);width:100%;min-height:var(--tap);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);text-align:left;cursor:pointer;background:0 0;border:none;font-weight:700;display:flex}.pot-title-button:hover{background:var(--surface-2)}.pot-title-name{overflow-wrap:anywhere}.pot-title-edit{color:var(--text-muted);font-size:1rem;font-weight:400}.pot-actions{display:flex}.rename-form{align-items:center;gap:var(--space-1);flex:1;display:flex}.menu{position:relative}.menu-panel{right:0;top:calc(100% + var(--space-1));z-index:20;min-width:200px;padding:var(--space-1);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);flex-direction:column;display:flex;position:absolute;box-shadow:0 8px 24px #00000080}.menu-panel button{min-height:var(--tap);padding:var(--space-2) var(--space-3);text-align:left;cursor:pointer;background:0 0;border:none;border-radius:6px}.menu-panel button:hover{background:var(--surface)}.menu-panel button.danger{color:var(--danger)}.card-menu{position:static}.card-menu .menu-button{top:var(--space-1);right:var(--space-1);background:#0d0e12bf;font-size:1.25rem;position:absolute}.card-menu .menu-button:hover{background:#0d0e12f2}.card-menu .menu-panel{left:var(--space-1);right:var(--space-1);min-width:0;top:52px}.search-results{gap:var(--space-2);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.search-result{align-items:center;gap:var(--space-3);padding:var(--space-2);background:var(--surface);border-radius:var(--radius-sm);display:flex}.search-result-text{gap:var(--space-1);flex-direction:column;flex:1;min-width:0;display:flex}.search-result-title{overflow-wrap:anywhere;font-weight:600}.search-result .btn{padding-inline:var(--space-3);flex-shrink:0}.poster{aspect-ratio:2/3;object-fit:cover;border-radius:var(--radius-sm);background:var(--surface-2);width:100%}.poster-placeholder{border:1px solid var(--border);background:linear-gradient(160deg,#2a2d36,#1a1c22);justify-content:center;align-items:center;font-size:2.5rem;display:flex}.poster-thumb{border-radius:6px;flex-shrink:0;width:48px;font-size:1.25rem}.movie-grid{gap:var(--space-4) var(--space-3);grid-template-columns:repeat(2,minmax(0,1fr));margin:0;padding:0;list-style:none;display:grid}.movie-card{gap:var(--space-2);flex-direction:column;display:flex;position:relative}.movie-card.is-watched .poster{opacity:.45}.movie-title{overflow-wrap:anywhere;font-size:.9375rem}.badge{top:var(--space-2);left:var(--space-2);padding:2px var(--space-2);background:var(--accent);color:var(--on-accent);border-radius:999px;font-size:.75rem;font-weight:700;position:absolute}.skeleton{background:linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 50%, var(--surface) 100%);border-radius:var(--radius-sm);background-size:200% 100%;animation:1.2s linear infinite shimmer}.skeleton-line{height:14px;margin-top:var(--space-2);width:80%}.skeleton-line.short{width:40%}.skeleton-title{width:60%;height:32px}.skeleton-input{height:72px}.search-result .skeleton.poster-thumb{aspect-ratio:2/3}@keyframes shimmer{to{background-position:-200% 0}}.dialog{width:min(100% - 2 * var(--space-4), 420px);max-height:calc(100dvh - 2 * var(--space-4));border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);padding:0}.dialog::backdrop{background:#000000bf}.dialog-body{padding:var(--space-5);gap:var(--space-4);flex-direction:column;display:flex}.toast{left:50%;bottom:calc(var(--drawbar-height) + env(safe-area-inset-bottom) + var(--space-2));z-index:50;max-width:calc(100% - 2 * var(--space-4));padding:var(--space-3) var(--space-4);border-radius:var(--radius-sm);background:var(--text);color:var(--bg);text-align:center;opacity:0;pointer-events:none;font-weight:600;transition:opacity .2s,transform .2s;position:fixed;transform:translate(-50%,16px)}.toast.is-visible{opacity:1;transform:translate(-50%)}.draw-bar{z-index:30;padding:var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));background:linear-gradient(to top, var(--bg) 60%, #0d0e1200);justify-content:center;display:flex;position:fixed;bottom:0;left:0;right:0}.btn-draw{border-radius:999px;width:100%;max-width:480px;min-height:60px;font-size:1.25rem;font-weight:800;box-shadow:0 6px 24px #ffc23d40}.draw-dialog .dialog-body{text-align:center;align-items:center}.draw-poster{width:min(60vw,240px)}.draw-poster .poster{box-shadow:0 12px 32px #0009}.shuffle .poster{animation:.12s ease-in-out infinite alternate shuffle-flip}@keyframes shuffle-flip{0%{transform:scale(.94)rotate(-2deg)}to{transform:scale(1)rotate(2deg)}}.draw-result .poster{animation:.35s ease-out reveal}@keyframes reveal{0%{opacity:0;transform:scale(.85)}}.draw-title{font-size:1.375rem}.draw-actions{gap:var(--space-2);flex-direction:column;width:100%;display:flex}@media (width>=600px){.page{padding:var(--space-5)}.movie-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.draw-actions{flex-flow:row-reverse wrap}.draw-actions .btn{flex:1}}@media (width>=900px){.movie-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.pot-title{font-size:1.75rem}}@media (width>=1200px){.movie-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
