:root{--ink:#0a0a0a;--ink-muted:#52575e;--bg:#fff;--surface:#fafbfc;--rule:#e0e4e8;--accent:#0047ab;--accent-ink:#fff;--color-amber:#f59e0b;--color-border:#d1d5db;--color-error:#dc2626;--grid-unit:8px;--measure:60ch;scrollbar-color:var(--accent) var(--surface);caret-color:var(--accent);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--ink:#e8ecf0;--ink-muted:#9ba3b0;--bg:#0a0d14;--surface:#11151e;--rule:#1e2532;--accent:#5b8cff;--accent-ink:#0a0d14}}*,:before,:after{box-sizing:border-box}html{overflow-x:clip}body{-webkit-font-smoothing:antialiased;color:var(--ink);background:var(--bg);background-image:linear-gradient(to right, var(--rule) 1px, transparent 1px), linear-gradient(to bottom, var(--rule) 1px, transparent 1px);background-size:var(--grid-unit) var(--grid-unit);margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:.875rem;line-height:1.6}.screen{min-height:100vh}p{text-wrap:pretty}h1,h2,h3{text-wrap:balance}::selection{background:var(--accent);color:var(--accent-ink)}:focus-visible{outline:2px solid var(--accent);outline-offset:3px}a{color:var(--accent);text-underline-offset:.18em}.num{font-variant-numeric:tabular-nums}button,[role=button],summary,select,input[type=checkbox],input[type=radio]{min-height:44px}button{min-width:44px}input,select,textarea{font:inherit;font-size:max(1rem,16px)}img,video,canvas,svg{max-width:100%;height:auto}pre{overflow-x:auto}@media (width<=480px){.screen{padding-inline:1rem}}@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}.movie-card,.filter-tab,.btn,.floating-add,.form-input,.form-select{transition:all .15s ease-out}}.app-header{background:var(--accent);color:var(--accent-ink);padding:calc(var(--grid-unit) * 3) calc(var(--grid-unit) * 2);background-image:none;position:relative}.header-title{letter-spacing:.08em;text-transform:uppercase;margin-bottom:calc(var(--grid-unit) * 2);font-variant-numeric:tabular-nums;font-size:1.5rem;font-weight:600}.filter-tabs{gap:calc(var(--grid-unit) * 2);margin-bottom:calc(var(--grid-unit) * 2);flex-wrap:wrap;align-items:center;display:flex}.filter-tab{border:1px solid var(--accent-ink);color:var(--accent-ink);padding:calc(var(--grid-unit) * 1) calc(var(--grid-unit) * 2);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;background:0 0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:.75rem;font-weight:600}.filter-tab:hover{background:#ffffff1a}.filter-tab.active{background:var(--accent-ink);color:var(--accent);border-width:2px}.sort-control{align-items:center;gap:var(--grid-unit);display:flex}.sort-control label{letter-spacing:.06em;text-transform:uppercase;font-size:.75rem;font-weight:600}.sort-control select{border:1px solid var(--accent-ink);color:var(--accent-ink);padding:calc(var(--grid-unit) * 1) calc(var(--grid-unit) * 2);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;background:0 0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:.75rem;font-weight:600}.sort-control select option{background:var(--bg);color:var(--ink)}.main-content{padding:calc(var(--grid-unit) * 3);min-height:calc(100vh - 180px)}.movie-grid{gap:calc(var(--grid-unit) * 3);margin-bottom:calc(var(--grid-unit) * 10);grid-template-columns:repeat(auto-fill,minmax(200px,1fr));display:grid}.movie-card{background:var(--surface);border:1px solid var(--rule);padding:calc(var(--grid-unit) * 2);gap:calc(var(--grid-unit) * 2);flex-direction:column;display:flex}.movie-card:hover{border-color:var(--accent)}.movie-poster{aspect-ratio:2/3;object-fit:cover;background:var(--rule);border:1px solid var(--color-border);width:100%}.movie-title{color:var(--ink);font-size:1rem;font-weight:500;line-height:1.3}.movie-genre{letter-spacing:.06em;text-transform:uppercase;color:var(--accent);font-size:.75rem;font-weight:600}.movie-rating{gap:calc(var(--grid-unit) * .5);align-items:center;display:flex}.star{color:var(--color-amber);font-size:1rem}.star.empty{color:var(--rule)}.movie-actions{gap:var(--grid-unit);padding-top:calc(var(--grid-unit) * 2);border-top:1px solid var(--rule);flex-wrap:wrap;align-items:center;margin-top:auto;display:flex}.watched-checkbox{align-items:center;gap:var(--grid-unit);font-size:.75rem;display:flex}.watched-checkbox input{border:1px solid var(--color-border);cursor:pointer;width:20px;height:20px;accent-color:var(--accent)}.btn{border:1px solid var(--ink);color:var(--ink);padding:calc(var(--grid-unit) * 1) calc(var(--grid-unit) * 2);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;background:0 0;justify-content:center;align-items:center;min-width:44px;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:.75rem;font-weight:600;text-decoration:none;display:inline-flex}.btn:hover{background:var(--ink);color:var(--bg)}.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.btn-primary:hover{background:#003a8c;border-color:#003a8c}.btn-delete{border-color:var(--color-error);color:var(--color-error)}.btn-delete:hover{background:var(--color-error);color:var(--accent-ink)}.floating-add{bottom:calc(var(--grid-unit) * 3);right:calc(var(--grid-unit) * 3);background:var(--accent);border:2px solid var(--accent);width:56px;height:56px;color:var(--accent-ink);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;font-size:2rem;line-height:1;display:flex;position:fixed;box-shadow:0 4px 12px #0047ab4d}.floating-add:hover{background:#003a8c;border-color:#003a8c;transform:scale(1.05)}.empty-state{text-align:center;padding:calc(var(--grid-unit) * 6) calc(var(--grid-unit) * 2)}.empty-state h2{margin-bottom:calc(var(--grid-unit) * 2);color:var(--ink);font-size:1.125rem;font-weight:600}.empty-state p{color:var(--ink-muted);margin-bottom:calc(var(--grid-unit) * 3)}.form-container{max-width:600px;padding:calc(var(--grid-unit) * 3);margin:0 auto}.form-header{align-items:center;gap:calc(var(--grid-unit) * 2);margin-bottom:calc(var(--grid-unit) * 4);display:flex}.back-link{letter-spacing:.06em;text-transform:uppercase;color:var(--accent);align-items:center;gap:var(--grid-unit);font-size:.75rem;font-weight:600;text-decoration:none;display:flex}.back-link:hover{text-decoration:underline}.form-title{letter-spacing:.08em;text-transform:uppercase;color:var(--ink);font-size:1.5rem;font-weight:600}.form-group{margin-bottom:calc(var(--grid-unit) * 3)}.form-label{letter-spacing:.06em;text-transform:uppercase;color:var(--ink);margin-bottom:var(--grid-unit);font-size:.75rem;font-weight:600;display:block}.form-input,.form-select{width:100%;padding:calc(var(--grid-unit) * 2);border:1px solid var(--rule);background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}.form-input::placeholder{color:var(--ink-muted)}.rating-input{gap:var(--grid-unit);align-items:center;display:flex}.rating-input input[type=number]{width:80px}.form-actions{gap:calc(var(--grid-unit) * 2);margin-top:calc(var(--grid-unit) * 4);display:flex}.tab-nav{background:var(--accent);padding:var(--grid-unit) calc(var(--grid-unit) * 2);z-index:10;background-image:none;border-top:1px solid #fff3;display:none;position:fixed;bottom:0;left:0;right:0}.tab-nav-list{justify-content:space-around;margin:0;padding:0;list-style:none;display:flex}.tab-nav-link{color:#ffffffb3;letter-spacing:.06em;text-transform:uppercase;padding:calc(var(--grid-unit) * 1.5);justify-content:center;align-items:center;font-size:.75rem;font-weight:600;text-decoration:none;display:flex}.tab-nav-link.active,.tab-nav-link:hover{color:var(--accent-ink)}@media (width<=768px){.movie-grid{gap:calc(var(--grid-unit) * 2);grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}.main-content{padding:calc(var(--grid-unit) * 2);padding-bottom:calc(var(--grid-unit) * 10)}.app-header{padding:calc(var(--grid-unit) * 2)}.header-title{font-size:1.125rem}.filter-tabs{gap:var(--grid-unit)}.tab-nav{display:block}.floating-add{bottom:calc(var(--grid-unit) * 10)}}::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{background:var(--surface);border-left:1px solid var(--rule)}::-webkit-scrollbar-thumb{background:var(--accent);border:2px solid var(--surface)}::-webkit-scrollbar-thumb:hover{background:#003a8c}@media (width<=480px){body,.container,[class*=container],section,header,footer,nav,main,article{padding-inline:max(1rem,16px)}}p,li,dt,dd,blockquote,figcaption,td,th{max-width:min(75ch,100%)}
