:root {
  color-scheme: dark;
  --ink: #f6f2e8;
  --muted: #99968f;
  --bg: #090909;
  --panel: #121212;
  --panel-2: #191816;
  --line: #2c2a26;
  --amber: #f5a623;
  --amber-2: #ffd27a;
  --red: #ff6b5d;
  --radius: 18px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; min-width: 320px; min-height: 100vh; color: var(--ink); background: radial-gradient(circle at 78% -10%, rgba(245,166,35,.11), transparent 30rem), var(--bg); }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .55; }
a { color: inherit; text-decoration: none; }
svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.brand { display: inline-flex; align-items: center; gap: .75rem; font-weight: 680; letter-spacing: -.02em; }
.brand-mark { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border: 1px solid #645538; border-radius: 50%; color: var(--amber-2); font-family: Georgia, serif; font-size: .72rem; letter-spacing: .06em; background: #1a1711; box-shadow: 0 0 0 4px rgba(245,166,35,.04); }
.brand.large { font-size: 1.1rem; }
.brand.large .brand-mark { width: 2.75rem; height: 2.75rem; }
.eyebrow { margin: 0 0 .7rem; color: var(--amber-2); font-size: .75rem; font-weight: 750; letter-spacing: .16em; text-transform: uppercase; }

.loading-card, .message-card { display: grid; justify-items: center; gap: 1rem; width: min(92vw, 30rem); margin: 20vh auto 0; padding: 2.5rem; text-align: center; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.spinner { width: 2rem; height: 2rem; border: 2px solid var(--line); border-top-color: var(--amber); border-radius: 50%; animation: spin .75s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.login-shell { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(22rem, .6fr); min-height: 100vh; }
.login-art { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; padding: clamp(2rem, 5vw, 5rem); overflow: hidden; border-right: 1px solid var(--line); background: linear-gradient(145deg, #16130e, #090909 63%); }
.login-art h1 { position: relative; max-width: 12ch; margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(3.5rem, 7vw, 7.6rem); font-weight: 400; line-height: .91; letter-spacing: -.055em; }
.projector-glow { position: absolute; width: 60vw; height: 15vw; top: 43%; left: -5%; transform: rotate(-7deg); background: linear-gradient(90deg, rgba(245,166,35,.18), transparent 70%); filter: blur(14px); clip-path: polygon(0 42%, 100% 0, 100% 100%, 0 58%); }
.login-foot { color: var(--muted); font-size: .9rem; }
.login-card { align-self: center; width: min(80%, 26rem); margin: auto; padding: 2.25rem; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(18,18,18,.92); box-shadow: 0 30px 90px rgba(0,0,0,.35); }
.login-card h2, dialog h2 { margin: 0 0 2rem; font-family: Georgia, serif; font-size: 2.25rem; font-weight: 400; line-height: 1; }
label { display: block; margin: 1rem 0 .55rem; color: #cac6bd; font-size: .85rem; font-weight: 650; }
input, select { width: 100%; height: 3rem; padding: 0 .9rem; color: var(--ink); border: 1px solid #3a3833; border-radius: 10px; outline: none; background: #0d0d0d; }
input:focus, select:focus { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(245,166,35,.12); }
button[type="submit"], .pin-card button, .message-card button { width: 100%; min-height: 3rem; margin-top: 1rem; border: 0; border-radius: 10px; color: #181109; font-weight: 760; background: var(--amber); }
.form-error { min-height: 1.25rem; margin: .7rem 0 0; color: #ff8b7f; font-size: .85rem; }

.topbar { position: sticky; top: 0; z-index: 10; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 4.7rem; padding: 0 clamp(1.25rem, 4vw, 4rem); border-bottom: 1px solid var(--line); background: rgba(9,9,9,.88); backdrop-filter: blur(18px); }
.topbar nav { display: flex; align-items: center; gap: .25rem; padding: .3rem; border: 1px solid var(--line); border-radius: 999px; background: #0d0d0d; }
.nav-button { min-height: 2.3rem; padding: 0 1rem; border: 0; border-radius: 999px; color: var(--muted); background: transparent; }
.nav-button.active { color: var(--ink); background: #272521; }
.count { display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; margin-left: .3rem; padding: 0 .3rem; border-radius: 99px; color: #19130a; font-size: .7rem; font-weight: 800; background: var(--amber); }
.avatar { justify-self: end; width: 2.35rem; height: 2.35rem; border: 1px solid #55492f; border-radius: 50%; color: var(--amber-2); font-weight: 800; background: #1a1711; }
.dashboard { width: min(92vw, 92rem); margin: 0 auto; padding: 4rem 0 6rem; }
.library-head { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2.5rem; }
.library-head h1 { margin: 0; font-family: Georgia, serif; font-size: clamp(2.7rem, 5vw, 5rem); font-weight: 400; line-height: .95; letter-spacing: -.045em; }
.folder-path { max-width: 42rem; margin: .9rem 0 0; overflow: hidden; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.library-actions { display: flex; gap: .75rem; }
.search-box { position: relative; display: flex; align-items: center; width: min(22rem, 35vw); margin: 0; }
.search-box svg { position: absolute; left: .9rem; color: #77736b; }
.search-box input { padding-left: 2.7rem; }
.secondary { min-height: 3rem; padding: 0 1.15rem; border: 1px solid #3a3833; border-radius: 10px; color: var(--ink); background: #171715; }
.secondary:hover { border-color: #625b4d; background: #201f1c; }
.secondary.full { width: 100%; }

.movie-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 2rem); }
.movie-card { min-width: 0; }
.poster { position: relative; display: flex; flex-direction: column; justify-content: space-between; width: 100%; aspect-ratio: 2 / 2.7; padding: 1.25rem; overflow: hidden; text-align: left; border: 1px solid #2f2b24; border-radius: var(--radius); color: var(--ink); background: linear-gradient(145deg, #29231a, #12100d 47%, #090909); transition: transform .2s ease, border-color .2s ease; }
.poster::after { content: ""; position: absolute; inset: 0; opacity: .24; background: repeating-linear-gradient(115deg, transparent 0 20px, rgba(255,255,255,.035) 21px, transparent 22px 48px); }
.poster:hover { transform: translateY(-4px); border-color: #7a653d; }
.poster-index { position: relative; z-index: 1; color: #756b5a; font-family: Georgia, serif; font-size: 1.1rem; }
.poster-play { position: absolute; z-index: 2; top: 50%; left: 50%; display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border: 1px solid rgba(255,210,122,.5); border-radius: 50%; color: var(--amber-2); background: rgba(9,9,9,.65); opacity: 0; transform: translate(-50%,-40%); transition: opacity .2s, transform .2s; }
.poster:hover .poster-play, .poster:focus-visible .poster-play { opacity: 1; transform: translate(-50%,-50%); }
.poster-title { position: relative; z-index: 1; max-width: 12ch; font-family: Georgia, serif; font-size: clamp(1.7rem, 2.4vw, 2.7rem); line-height: .95; letter-spacing: -.04em; overflow-wrap: anywhere; }
.movie-meta { display: flex; align-items: start; justify-content: space-between; gap: 1rem; padding: 1rem .15rem 0; }
.movie-meta h2, .share-row h2 { margin: 0 0 .3rem; overflow: hidden; font-size: .98rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.movie-meta p, .share-row p { margin: 0; color: var(--muted); font-size: .78rem; }
.icon-button { display: grid; flex: 0 0 auto; place-items: center; width: 2.35rem; height: 2.35rem; border: 1px solid var(--line); border-radius: 50%; color: #c8c2b6; background: transparent; }
.icon-button:hover { color: var(--amber-2); border-color: #655739; }
.compat-note { margin: .6rem .15rem 0; color: #bb8f52; font-size: .72rem; }

.empty-state { display: grid; justify-items: center; gap: .65rem; min-height: 22rem; place-content: center; padding: 2rem; text-align: center; border: 1px dashed #38352f; border-radius: var(--radius); background: rgba(18,18,18,.55); }
.empty-state svg { width: 2.25rem; height: 2.25rem; color: var(--amber); }
.empty-state h2 { margin: .5rem 0 0; font-family: Georgia, serif; font-size: 2rem; font-weight: 400; }
.empty-state p { max-width: 34rem; margin: 0; color: var(--muted); line-height: 1.6; }
.empty-state.compact { min-height: 14rem; }

.share-list { border-top: 1px solid var(--line); }
.share-list-head, .share-row { display: grid; grid-template-columns: minmax(14rem, 1.4fr) minmax(8rem, .65fr) minmax(12rem, .8fr) 3rem; align-items: center; gap: 1rem; padding: 1rem .75rem; border-bottom: 1px solid var(--line); }
.share-list-head { color: var(--muted); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.share-row { min-height: 5.4rem; }
.share-row.expired { opacity: .48; }
.share-row strong { display: block; margin-bottom: .3rem; font-size: .86rem; font-weight: 600; }
.access-pill { justify-self: start; padding: .35rem .6rem; border: 1px solid #3d3931; border-radius: 99px; color: #cfc7b7; font-size: .75rem; }
.icon-button.danger:hover { color: var(--red); border-color: #724038; }

dialog { width: min(92vw, 31rem); padding: 2.2rem; border: 1px solid #3a362f; border-radius: 22px; color: var(--ink); background: #151412; box-shadow: 0 30px 100px rgba(0,0,0,.7); }
dialog::backdrop { background: rgba(0,0,0,.74); backdrop-filter: blur(8px); }
.dialog-close { position: absolute; top: .85rem; right: .85rem; width: 2.4rem; height: 2.4rem; border: 0; color: var(--muted); font-size: 1.6rem; background: transparent; }
.dialog-copy { margin: -1rem 0 1.5rem; color: var(--muted); font-size: .9rem; line-height: 1.55; }
.copy-row { display: grid; grid-template-columns: 1fr auto; gap: .6rem; margin: 1.4rem 0; }
.copy-row button { display: flex; align-items: center; gap: .45rem; padding: 0 1rem; border: 0; border-radius: 10px; color: #171109; font-weight: 750; background: var(--amber); }

.watch-body { background: radial-gradient(circle at 50% 10%, #241b0e 0, #090909 45%); }
.watch-shell { width: min(94vw, 88rem); margin: 0 auto; }
.watch-header { display: flex; align-items: center; min-height: 5.5rem; }
.watch-stage { padding: 4vh 0 6rem; text-align: center; }
.watch-stage h1 { max-width: 18ch; margin: 0 auto 2rem; font-family: Georgia, serif; font-size: clamp(2.8rem, 6vw, 6rem); font-weight: 400; line-height: .92; letter-spacing: -.05em; }
.watch-stage video { display: block; width: 100%; max-height: 72vh; aspect-ratio: 16/9; border: 1px solid #332d23; border-radius: clamp(10px, 2vw, 24px); background: #000; box-shadow: 0 40px 120px rgba(0,0,0,.55); }
.privacy-note { margin: 1.25rem 0; color: var(--muted); font-size: .8rem; }
.pin-card { width: min(92vw, 25rem); margin: 3rem auto 0; padding: 2rem; text-align: left; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.pin-card label { margin-top: 0; color: var(--ink); font-family: Georgia, serif; font-size: 1.7rem; font-weight: 400; }
.pin-card p { color: var(--muted); font-size: .9rem; line-height: 1.5; }
.toast { position: fixed; z-index: 100; right: 1.5rem; bottom: 1.5rem; padding: .8rem 1rem; border: 1px solid #5f5238; border-radius: 10px; color: #181109; font-weight: 750; background: var(--amber-2); opacity: 0; transform: translateY(1rem); transition: .2s; }
.toast.show { opacity: 1; transform: translateY(0); }

@media (max-width: 900px) {
  .login-shell { grid-template-columns: 1fr; }
  .login-art { min-height: 48vh; padding: 2rem; border-right: 0; border-bottom: 1px solid var(--line); }
  .login-art h1 { font-size: clamp(3rem, 12vw, 5.2rem); }
  .login-card { width: min(90%, 28rem); margin: 3rem auto; }
  .movie-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topbar { grid-template-columns: 1fr auto; }
  .topbar nav { position: fixed; z-index: 20; right: 1rem; bottom: 1rem; left: 1rem; justify-content: center; box-shadow: 0 10px 35px #000; }
  .avatar { grid-column: 2; }
  .share-list-head { display: none; }
  .share-row { grid-template-columns: 1fr auto; }
  .share-row > :nth-child(2), .share-row > :nth-child(3) { justify-self: start; }
}

@media (max-width: 620px) {
  .topbar { padding: 0 1rem; }
  .topbar .brand > span:last-child { display: none; }
  .dashboard { width: min(92vw, 32rem); padding-top: 2.5rem; }
  .library-head { align-items: stretch; flex-direction: column; }
  .library-actions { display: grid; grid-template-columns: 1fr auto; }
  .search-box { width: 100%; }
  .movie-grid { gap: 1.4rem .75rem; }
  .poster { padding: .9rem; border-radius: 13px; }
  .poster-title { font-size: clamp(1.35rem, 7vw, 2rem); }
  .movie-meta .icon-button { display: none; }
  .share-row { align-items: start; padding: 1.2rem 0; }
  .share-row > :nth-child(3) { grid-column: 1; }
  dialog { padding: 1.5rem; }
  .watch-header { min-height: 4.5rem; }
  .watch-stage { padding-top: 2vh; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation-duration: .01ms !important; }
}