/* Selected latest revised image3; common form styles remain in app.css. */
:root { --paper:#f9f8fb; --surface:#fffefe; --ink:#35465e; --muted:#65738a; --line:#d7dce6; --accent:#b4859d; --accent-2:#b5c9dc; --soft:#eeeaf2; --deep:#5c7898; --danger:#98485e; }
html { scroll-padding-bottom:90px; }
.app-shell { min-height:100dvh; padding-bottom:88px; overflow-x:clip; }
.site-header { height:62px; width:min(1000px,calc(100% - 32px)); }
.brand { gap:8px; min-width:0; }
.brand > span:last-child { font-size:21px; white-space:nowrap; letter-spacing:-.3px; }
.brand em { font-style:normal; color:var(--deep); }
.couple-mark { width:50px; height:42px; object-fit:contain; flex:0 0 50px; }
.icon { display:inline-block; object-fit:contain; flex:0 0 auto; filter:invert(29%) sepia(13%) saturate(1067%) hue-rotate(175deg) brightness(94%); }
.button.primary .icon { filter:brightness(0) invert(1); }
.header-actions { gap:7px; font-size:13px; }
.icon-button { border:0; border-radius:8px; }
#sync-state { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.intro { width:min(660px,100%); display:grid; grid-template-columns:68% 32%; gap:0; padding:0; margin-bottom:0; }
.hero { height:132px; border-radius:0; }
.hero img { object-position:center; }
.intro-copy { display:block; padding:0 14px 0 2px; }
.intro h1 { font-family:"Songti SC","Noto Serif CJK SC",SimSun,Georgia,serif; font-size:19px; line-height:1.6; font-weight:400; letter-spacing:.5px; text-wrap:balance; }
.intro-copy:after { content:""; display:block; width:40px; height:1px; background:var(--accent); margin-top:15px; }
.app-shell:not([data-view=picker]) .intro { display:none; }
.tabs { position:fixed; z-index:12; bottom:0; left:50%; transform:translateX(-50%); width:min(1000px,100%); margin:0; padding:5px 12px max(7px,env(safe-area-inset-bottom)); background:var(--paper); border-top:1px solid var(--line); border-bottom:0; display:grid; grid-template-columns:repeat(4,1fr); gap:4px; }
.tabs button { min-height:57px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:4px 2px 7px; font-size:11px; font-weight:400; }
.tabs button.active { color:var(--deep); font-weight:500; }
.tabs button.active:after { left:28%; right:28%; bottom:0; background:var(--deep); }
.tabs .tab-label { background:none; border-radius:0; padding:0; font-size:inherit; }
#wanted-count { font-weight:400; font-size:9px; margin-left:2px; }
.picker-view { width:min(460px,calc(100% - 32px)); }
.picker-heading { display:flex; align-items:center; justify-content:space-between; height:57px; gap:12px; }
.picker-heading h2 { font:500 25px/1.3 "Songti SC","Noto Serif CJK SC",SimSun,Georgia,serif; margin:0; letter-spacing:.5px; }
.picker-heading button { display:flex; align-items:center; gap:9px; min-height:44px; font-size:13px; padding:4px 0 4px 8px; color:var(--muted); }
.movie-deck { height:auto; min-height:380px; position:relative; padding:0 29px; isolation:isolate; }
.deck-back { position:absolute; z-index:-1; inset:12px 29px 10px; border:1px solid var(--line); border-radius:12px; pointer-events:none; overflow:hidden; }
.back-poster { width:100%; height:100%; object-fit:cover; opacity:.24; }
.deck-direction { position:absolute; z-index:2; top:51%; width:44px; height:44px; border-radius:50%; background:var(--paper); display:grid; place-items:center; padding:0; }
.deck-direction-left { left:-9px; }
.deck-direction-right { right:-9px; }
.deck-back-near { background:var(--accent-2); transform:translateX(-9px) rotate(-2deg); opacity:.72; }
.deck-back-far { background:var(--soft); transform:translateX(10px) rotate(2deg); opacity:.85; }
.movie-card { height:auto; min-height:380px; width:100%; display:flex; flex-direction:column; padding:16px; background:var(--surface); border:1px solid var(--line); border-radius:12px; touch-action:pan-y; user-select:none; transform-origin:center 80%; }
.movie-card.is-dragging { will-change:transform; }
.film-heading { display:grid; grid-template-columns:1fr; min-height:175px; gap:12px; padding-bottom:0; border-bottom:1px solid var(--line); }
.film-heading.has-poster { grid-template-columns:minmax(0,1fr) 116px; }
.film-identity { min-width:0; padding-left:5px; }
.film-identity h2 { font:600 29px/1.25 "Songti SC","Noto Serif CJK SC",SimSun,Georgia,serif; margin:5px 0 3px; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.original-title { color:var(--muted); font:15px/1.35 Georgia,serif; margin:4px 0 8px; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.film-meta,.film-genres { color:var(--muted); font-size:11px; line-height:1.6; margin:4px 0; }
.film-genres:empty { display:none; }
.movie-poster,.detail-poster { object-fit:cover; border-radius:5px; background:var(--soft); }
.film-heading .movie-poster { width:116px; height:174px; }
.snapshot-rating { color:var(--muted); font-size:11px; line-height:1.6; margin:12px 0 0; }
.snapshot-rating a { color:inherit; text-decoration:none; }
.movie-copy { padding:0; min-height:0; flex:1; display:flex; flex-direction:column; }
.cast { font-size:11.5px; line-height:1.6; color:var(--muted); margin:10px 0 0; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; flex-shrink:0; }
.cast span { margin-right:10px; }
.movie-copy .overview { font-size:14px; line-height:1.7; margin:10px 0 2px; -webkit-line-clamp:4; height:6.8em; flex:0 0 6.8em; }
.long-title .movie-copy .overview { -webkit-line-clamp:3; height:5.1em; flex-basis:5.1em; }
.long-title .film-identity h2 { font-size:25px; }
.long-title .original-title { display:none; }
.movie-copy .movie-detail-button { align-self:flex-start; flex-shrink:0; min-height:35px; margin-top:auto; padding:6px 0 0; font-size:12px; color:var(--deep); }
.swipe-hint { text-align:center; color:var(--muted); font-size:11px; margin:17px 0 13px; letter-spacing:.5px; }
.choice-row { grid-template-columns:1fr 1fr; gap:12px; margin:0; position:static; padding:0; }
.choice-row .button { min-height:50px; border-radius:9px; font-size:17px; gap:11px; font-weight:400; scroll-margin-bottom:90px; }
.minor-actions { justify-content:center; font-size:11px; gap:12px; min-height:45px; }
.minor-actions button { min-height:44px; padding:8px 1px; }
#skip-button { color:var(--muted); font-size:10px; }
.app-shell[data-view=picker] footer { display:none; }
.view:not(.picker-view) { margin-top:26px; }
.wanted-identity { display:flex; gap:15px; }
.wanted-identity .movie-poster { width:72px; height:108px; flex:0 0 72px; }
.wanted-identity > div { min-width:0; }
.wanted-card .modal-actions .button { font-size:12px; min-width:0; }
.catalog-tile:has(.movie-poster) { display:flex; flex-direction:column; padding:0; overflow:hidden; }
.catalog-tile .movie-poster { width:100%; height:auto; aspect-ratio:2/3; border-radius:0; object-fit:cover; }
.catalog-copy { padding:13px; }
.search-box>span { flex:0 0 auto; white-space:nowrap; }
.search-box input { flex:1; width:auto; min-width:0; }
.catalog-tile .cast { font-size:10px; }
.detail-identity { display:flex; gap:18px; align-items:flex-start; }
.detail-poster { width:100px; height:150px; flex:0 0 100px; margin-top:17px; }
.detail-facts { min-width:0; }
.detail-synopsis p { margin:0; }
.login-shell { background:#f5f3f8; }
.login-card { border-radius:12px; padding:28px; }
.login-mark { display:block; object-fit:contain; margin:0 auto 24px; }
.login-card h1 { font-size:31px; letter-spacing:-.5px; }
.toast { bottom:max(90px,calc(80px + env(safe-area-inset-bottom))); }
@media (min-width:761px) {
  .site-header { height:78px; }
  .intro { margin-top:4px; margin-bottom:6px; }
  .hero { height:166px; }
  .intro h1 { font-size:28px; }
  .picker-heading { height:68px; }
  .movie-deck { min-height:410px; }
  .movie-card { min-height:410px; }
  .film-heading { min-height:166px; }
  .film-identity h2 { font-size:33px; }
  .movie-copy .overview { font-size:15px; }
}
@media (max-width:350px) {
  .site-header { width:calc(100% - 24px); }
  .brand { gap:4px; }
  .couple-mark { width:42px; flex-basis:42px; }
  .brand > span:last-child { font-size:21px; }
  .header-actions { gap:0; font-size:11px; }
  .hero { height:118px; }
  .intro h1 { font-size:18px; }
  .picker-view { width:calc(100% - 24px); }
  .picker-heading h2 { font-size:23px; }
  .movie-deck { min-height:395px; padding-inline:9px; }
  .movie-card { min-height:395px; }
  .movie-card { padding:15px; }
  .film-heading.has-poster { grid-template-columns:minmax(0,1fr) 76px; gap:9px; }
  .film-heading .movie-poster { width:76px; height:114px; }
  .film-heading { min-height:156px; }
  .film-identity h2 { font-size:26px; }
  .original-title { font-size:13px; }
  .detail-identity { display:block; }
  .detail-poster { float:right; margin:12px 0 14px 14px; }
}