/* Five Years of Cinema — focus view, diary, settings and public profile.
   Quiet list rows with one alignment grid: poster | text | actions. Letterboxd-inspired accents. */
.fx{
  --star:#00a82d; --heart:#f27405; --bad:#c62828; --accent:var(--lA); --on-star:#fff;
  --serif:"Instrument Serif", Georgia, "Times New Roman", serif;
  --sans:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, Roboto, "Helvetica Neue", sans-serif;
  --mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --star-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.8 6 6.6.7-4.9 4.5 1.4 6.5L12 17l-5.9 3.3 1.4-6.5-4.9-4.5 6.6-.7z'/%3E%3C/svg%3E");
  --rw-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.2 12a8.2 8.2 0 1 1-2.4-5.8'/%3E%3Cpath d='M20.4 3.6v5.2h-5.2'/%3E%3C/svg%3E");
  --rv-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M4 6.5h16M4 12h16M4 17.5h10'/%3E%3C/svg%3E");
  --heart-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.2C.9 8.4 2.8 4.5 6.6 4.5c2.2 0 3.9 1.3 5.4 3.2 1.5-1.9 3.2-3.2 5.4-3.2 3.8 0 5.7 3.9 4.2 7.3C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E");
  max-width:660px; margin:0 auto; display:grid; gap:22px; padding:30px max(18px, env(safe-area-inset-left,0px)) 34px;
  direction:rtl; text-align:start; color:var(--ink);
}
@media (prefers-color-scheme: dark){ .fx{--star:#00e054; --heart:#ff8000; --bad:#ff6b6b; --on-star:#04220f} }
:root[data-theme="dark"] .fx{--star:#00e054; --heart:#ff8000; --bad:#ff6b6b; --on-star:#04220f}
:root[data-theme="light"] .fx{--star:#00a82d; --heart:#f27405; --bad:#c62828}
.fx[dir="ltr"]{direction:ltr; font-family:var(--sans); letter-spacing:-.005em}

/* ---------- header ---------- */
.fx-head{display:grid; gap:8px}
.fx-hrow{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px}
.fx-h1{margin:0; font-family:"Reem Kufi", "Vazirmatn", Tahoma, sans-serif; font-weight:700; font-size:30px; line-height:1.2}
.fx[dir="ltr"] .fx-h1{font-family:var(--serif); font-weight:400; font-size:46px; line-height:1; letter-spacing:-.015em}
.fx-eye{font-size:12.5px; color:var(--muted)}
.fx[dir="ltr"] .fx-eye{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase}
.fx-th{font-size:13px; color:var(--muted)}
.fx[dir="ltr"] .fx-th{font-family:var(--serif); font-style:italic; font-size:19px; color:var(--muted)}
.fx-dots{display:flex; gap:5px; flex-wrap:wrap; margin-top:2px}
.fx-dots i{width:7px; height:7px; border-radius:50%; background:var(--line); display:block}
.fx-dots i.on{background:var(--star)}
.fx-dots i.sk{background:transparent; box-shadow:inset 0 0 0 1px var(--line)}

/* ---------- film rows ---------- */
.fx-list{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.fx-i{display:grid; grid-template-columns:minmax(0,1fr) 64px; gap:0 16px; align-items:start; padding:16px 0; border-bottom:1px solid var(--line); position:relative}
.fx-hasp .fx-i{grid-template-columns:60px minmax(0,1fr) 64px}
.fx-b{min-width:0; display:grid; gap:3px; align-content:start}
.fx-tl{display:flex; flex-wrap:wrap; align-items:baseline; column-gap:8px; row-gap:0}
.fx-film{font-family:var(--serif); font-size:22px; line-height:1.15; color:var(--ink); text-decoration:none; direction:ltr; unicode-bidi:isolate}
a.fx-film:hover{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px}
.fx-y{font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums}
.fx-sub{font-size:13.5px; color:var(--muted)}
/* middot separators that never start a wrapped line: the leading dot of each line is clipped */
.fx-sub, .fx-tags{overflow:hidden}
.fx-tw{display:flex; flex-wrap:wrap; align-items:center; margin-inline-start:-15px}
.fx-tw > *::before{content:"·"; display:inline-block; width:15px; text-align:center; color:var(--faint)}
.fx-tags{font-size:12px; color:var(--faint); margin-top:1px}
.fx-tg{display:inline-flex; align-items:center; white-space:nowrap}
.fx-tg.lane{color:var(--muted)}
.fx-ldot{display:inline-block; width:6px; height:6px; border-radius:50%; margin-inline-end:6px; background:var(--faint)}
.fx-tg.A .fx-ldot{background:var(--lA)} .fx-tg.C .fx-ldot{background:var(--lC)} .fx-tg.H .fx-ldot{background:var(--lH)} .fx-tg.P .fx-ldot{background:var(--lP)}
.fx-tg.F .fx-ldot{background:transparent; box-shadow:inset 0 0 0 1.5px var(--faint)}
.fx-tg.fr i{display:inline-block; width:11px; height:11px; margin-inline:4px 2px; background:var(--star); -webkit-mask:var(--star-mask) center/11px no-repeat; mask:var(--star-mask) center/11px no-repeat}
.fx-tg.warn{color:var(--need)}
.fx-tg.x{color:var(--accent)}

/* actions column: check on top, small text actions below — always the same width so titles line up */
.fx-acts{display:grid; justify-items:center; align-content:start; gap:7px; padding-top:2px}
.fx-chk{all:unset; box-sizing:border-box; width:30px; height:30px; border-radius:50%; box-shadow:inset 0 0 0 1.5px var(--faint); display:grid; place-items:center; cursor:pointer; font-size:15px; font-weight:700; color:#fff; transition:background .15s, box-shadow .15s}
.fx-chk:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.fx-chk:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.fx-chk[aria-pressed="true"]{background:var(--star); box-shadow:none}
.fx-chk.ghost{box-shadow:inset 0 0 0 1.5px var(--line); cursor:default}
.fx-link{all:unset; cursor:pointer; color:var(--muted); font-size:12.5px; text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px; white-space:nowrap}
.fx-link:hover{color:var(--ink); text-decoration-color:currentColor}
.fx-link:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:3px}
.fx-al{font-size:11.5px; text-decoration:none; color:var(--faint)}
.fx[dir="ltr"] .fx-al{font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase}
.fx-al:hover{color:var(--ink)}
.fx-other{justify-self:start; margin-top:4px}

.fx-i.done .fx-film{color:var(--muted)}
.fx-i.skip .fx-b{opacity:.45}
.fx-i.skip .fx-film{text-decoration:line-through; text-decoration-color:var(--faint)}
.fx-i.pick::before{content:""; position:absolute; inset-block:10px; inset-inline-start:-14px; width:3px; border-radius:2px; background:var(--accent)}
.fx-tonight{justify-self:start; font-size:11px; font-weight:600; color:var(--accent); margin-bottom:2px}
.fx[dir="ltr"] .fx-tonight{font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase}

/* posters */
.fx-pos{position:relative; display:block; width:60px; aspect-ratio:2/3; border-radius:4px; overflow:hidden; background:var(--sunk); box-shadow:inset 0 0 0 1px rgba(127,127,127,.18); text-decoration:none}
.fx-pos img{position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover; display:block}
.fx-pos img:not([src]){visibility:hidden}
.fx-pt{position:absolute; inset:0; display:grid; place-items:center; padding:5px; text-align:center; font-family:var(--serif); font-size:10.5px; line-height:1.15; color:var(--muted); overflow:hidden}
.fx-pos.none{background:repeating-linear-gradient(135deg, var(--sunk) 0 6px, transparent 6px 12px)}

/* rating + review */
.fx-rate{display:flex; align-items:center; gap:12px; margin-top:8px; flex-wrap:wrap}
.fx-stars{position:relative; display:inline-block; width:120px; height:24px; flex:none; font-size:0; line-height:0}
.fx-stars::before,.fx-stars::after{content:""; position:absolute; top:0; bottom:0; left:0; -webkit-mask:var(--star-mask) left center/24px 24px repeat-x; mask:var(--star-mask) left center/24px 24px repeat-x; pointer-events:none}
.fx-stars::before{width:100%; background:var(--line)}
.fx-stars::after{width:calc(var(--r) * 12px); background:var(--star)}
.fx-stars button{all:unset; position:relative; z-index:1; display:inline-block; width:12px; height:24px; cursor:pointer}
.fx-stars button:focus-visible{outline:2px solid var(--accent); outline-offset:-2px; border-radius:3px}
.fx-heart{all:unset; box-sizing:border-box; width:24px; height:24px; cursor:pointer; background:var(--line); -webkit-mask:var(--heart-mask) center/21px 21px no-repeat; mask:var(--heart-mask) center/21px 21px no-repeat}
.fx-heart.on{background:var(--heart)}
.fx-heart:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.fx-ask{font-size:12px; color:var(--faint)}
.fx[dir="ltr"] .fx-ask{font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase}
.fx-rv{width:100%; min-height:96px; font:inherit; font-size:15px; line-height:1.55; padding:11px 13px; border-radius:8px; border:1px solid var(--line); background:var(--surface); color:var(--ink); resize:vertical; margin-top:8px}
.fx-rv:focus{outline:none; border-color:var(--accent)}
.fx-rvx{margin:6px 0 0; font-size:14.5px; line-height:1.6; color:var(--ink); white-space:pre-wrap; overflow-wrap:anywhere}
.fx[dir="ltr"] .fx-rvx{font-family:var(--serif); font-size:17.5px; line-height:1.45}
.fx-rvb{justify-self:start; margin-top:4px; font-size:12px}
.fx-alt{display:flex; gap:6px; margin-top:6px}
.fx-alt input{flex:1; min-width:0; font:inherit; font-size:14px; padding:6px 10px; border-radius:8px; border:1px solid var(--line); background:var(--surface); color:var(--ink)}
.fx-alt button{font:inherit; font-size:13px; cursor:pointer; border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:8px; padding:4px 12px}

/* ---------- buttons, rows, misc ---------- */
.fx-btn{font:inherit; font-size:14px; cursor:pointer; border:1px solid var(--line); background:transparent; color:var(--ink); border-radius:999px; padding:7px 16px; line-height:1.2}
.fx-btn:hover{border-color:var(--ink)}
.fx-btn.primary{background:var(--ink); color:var(--bg); border-color:var(--ink); font-weight:600}
.fx-act{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.fx-row{display:flex; gap:14px; align-items:center; flex-wrap:wrap}
.fx-muted{color:var(--muted); font-size:13.5px}
.fx-next{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:14px 16px; border-radius:10px; background:var(--sunk)}
.fx-rest{display:grid; gap:12px; justify-items:start}
.fx-rest p{margin:0}
.fx[dir="ltr"] .fx-rest > p:first-child{font-family:var(--serif); font-size:22px; line-height:1.3}
.fx-rest .fx-list{justify-self:stretch}
.fx-more{border-top:1px solid var(--line); padding-top:12px}
.fx-more summary{cursor:pointer; color:var(--muted); font-size:13.5px}
.fx-more[open] summary{margin-bottom:10px}
.fx-pre{margin:0 0 10px; padding:10px 12px; border-radius:8px; background:var(--sunk); font-family:var(--mono); font-size:12px; line-height:1.6; white-space:pre-wrap; text-align:left}
.fx-dlink{display:flex}
.fx-foot{display:flex; justify-content:center; gap:22px; padding-top:4px}
.fx-sd{display:inline-block; width:6px; height:6px; border-radius:50%; margin-inline-start:6px; vertical-align:middle}
.fx-sd.ok{background:var(--star)} .fx-sd.err{background:var(--bad)} .fx-sd.busy{background:var(--faint)}

/* add / replace picker */
.fx-picker{gap:10px}
.fx-pick-h{font-weight:600}
.fx[dir="ltr"] .fx-pick-h{font-family:var(--serif); font-weight:400; font-size:22px}
.fx-pick-q{font:inherit; font-size:16px; padding:9px 13px; border-radius:8px; border:1px solid var(--line); background:var(--surface); color:var(--ink); width:100%}
.fx-pick-q:focus{outline:none; border-color:var(--accent)}
.fx-res{list-style:none; margin:0; padding:0; display:grid}
.fx-hit{all:unset; box-sizing:border-box; width:100%; cursor:pointer; padding:8px 4px; border-bottom:1px solid var(--line); display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px}
.fx-hit:hover, .fx-hit:focus-visible{background:var(--sunk)}
.fx-hit .fx-film{font-size:18px}
.fx-hd{font-size:12.5px; color:var(--muted)}
.fx-asis{color:var(--accent); font-size:14px; border-bottom:0}

/* ---------- diary ---------- */
.fx-mon{margin:22px 0 0; padding-bottom:8px; border-bottom:1px solid var(--line); font-size:14px; font-weight:700; color:var(--muted)}
.fx[dir="ltr"] .fx-mon{font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase}
.fx-diary .fx-mon:first-child{margin-top:0}
.fx-dl{list-style:none; margin:0; padding:0}
.fx-de{display:grid; grid-template-columns:34px minmax(0,1fr) 54px; gap:0 14px; align-items:start; padding:14px 0; border-bottom:1px solid var(--line)}
.fx-hasp .fx-de{grid-template-columns:34px 46px minmax(0,1fr) 54px}
.fx-de .fx-pos{width:46px}
.fx-dday{font-size:20px; line-height:1; color:var(--ink); padding-top:4px; text-align:center; font-variant-numeric:tabular-nums}
.fx[dir="ltr"] .fx-dday{font-family:var(--serif); font-size:26px}
.fx-dm{display:flex; flex-wrap:wrap; gap:4px 10px; align-items:center; margin-top:2px}
.fx-mini{color:var(--star); font-size:13px; letter-spacing:1px; white-space:nowrap}
.fx-mh{color:var(--heart); font-size:13px}
.fx-rvi{font-size:11px; color:var(--faint)}
.fx[dir="ltr"] .fx-rvi{font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase}
.fx-ded{display:grid; gap:12px; margin-top:10px; padding:14px; border-radius:10px; background:var(--sunk)}
.fx-dlab{display:flex; gap:10px; align-items:center; font-size:13px; color:var(--muted)}
.fx-date{font:inherit; font-size:14px; padding:5px 10px; border-radius:8px; border:1px solid var(--line); background:var(--surface); color:var(--ink)}
.fx-de.hl{background:color-mix(in srgb, var(--accent) 8%, transparent)}

/* ---------- settings ---------- */
.fx-card{display:grid; gap:12px; padding:18px 0; border-top:1px solid var(--line)}
.fx-card h2{margin:0; font-size:15px; font-weight:700}
.fx[dir="ltr"] .fx-card h2{font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.fx-card p{margin:0; font-size:14.5px; line-height:1.6}
.fx-card a{color:var(--accent)}
.fx-steps{margin:0; padding-inline-start:20px; display:grid; gap:4px; font-size:14px; list-style-type:persian}
.fx[dir="ltr"] .fx-steps{list-style-type:decimal}
.fx-form{display:flex; gap:8px; flex-wrap:wrap}
.fx-form input, .fx-field input{flex:1; min-width:0; font:inherit; font-size:15px; padding:8px 12px; border-radius:8px; border:1px solid var(--line); background:var(--surface); color:var(--ink)}
.fx-form input:focus, .fx-field input:focus{outline:none; border-color:var(--accent)}
.fx-field{display:grid; gap:6px; font-size:12.5px; color:var(--muted)}
.fx-links-ed{display:grid; gap:6px}
.fx-links-ed label{display:grid; grid-template-columns:150px minmax(0,1fr); gap:10px; align-items:center; font-size:13px}
.fx-check{display:flex; gap:9px; align-items:center; font-size:14px; cursor:pointer}
.fx-check input{width:17px; height:17px; accent-color:var(--star)}
.fx-note{font-size:13.5px}
.fx-note.ok{color:var(--ready)} .fx-note.bad,.fx-bad{color:var(--bad)} .fx-note.busy{color:var(--muted)}
.fx-link-pre{user-select:all; -webkit-user-select:all; word-break:break-all}

/* ---------- public profile ---------- */
.fx-share .fx-i{grid-template-columns:minmax(0,1fr) 40px}
.fx-share.fx-hasp .fx-i{grid-template-columns:60px minmax(0,1fr) 40px}
.fx-ro .fx-chk{cursor:default; width:24px; height:24px; font-size:12px}
.fx-ro .fx-chk:hover{box-shadow:inset 0 0 0 1.5px var(--faint)}
.fx-ro.done .fx-chk{background:var(--star); box-shadow:none}
.fx-seen{font-size:12.5px; color:var(--muted)}
.fx-strip{color:var(--muted)}
.fx-links{display:flex; flex-wrap:wrap; gap:4px 0; font-size:13.5px}
.fx-links a{color:var(--ink); text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:4px}
.fx-links a:hover{text-decoration-color:var(--ink)}
.fx-links{overflow:hidden}
.fx-links > .fx-tw > *::before{width:19px}
.fx-links .fx-tw{margin-inline-start:-19px}
.fx-tabs{display:flex; gap:2px; border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none}
.fx-tabs button{all:unset; cursor:pointer; padding:9px 12px; font-size:14px; color:var(--muted); border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap}
.fx[dir="ltr"] .fx-tabs button{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase}
.fx-tabs button[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--star)}
.fx-tabs button:focus-visible{outline:2px solid var(--accent)}
.fx-pub .fx-de{grid-template-columns:34px minmax(0,1fr) 28px}
.fx-pub.fx-hasp .fx-de{grid-template-columns:34px 46px minmax(0,1fr) 28px}
.fx-revs .fx-de{padding:18px 0}
.fx-perma{all:unset; cursor:pointer; color:var(--faint); font-size:13px; justify-self:center; padding-top:4px}
.fx-perma:hover{color:var(--ink)}
.fx-hist2{display:grid; grid-template-columns:repeat(10, 1fr); gap:3px; height:84px; align-items:end}
.fx-bar{height:100%; display:flex; align-items:flex-end}
.fx-bar i{display:block; width:100%; background:var(--star); border-radius:2px 2px 0 0; min-height:2px; opacity:.85}
.fx-hist2-ax{display:flex; justify-content:space-between; font-size:11px; color:var(--star)}
.fx-rows{display:grid; gap:6px}
.fx-rowbar{display:grid; grid-template-columns:52px minmax(0,1fr) 34px; gap:10px; align-items:center}
.fx-rk, .fx-rn{font-family:var(--mono); font-size:11px; color:var(--muted)}
.fx-rn{text-align:end}
.fx-rb{height:6px; background:var(--sunk); border-radius:3px; overflow:hidden}
.fx-rb i{display:block; height:100%; background:var(--muted); border-radius:3px}
.fx-top{margin:0; padding-inline-start:22px; display:grid; gap:5px; font-size:14px}
.fx-top li{display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.fx-top .fx-rn{font-size:12px}

@media (max-width:420px){
  .fx{gap:18px; padding-top:22px}
  .fx[dir="ltr"] .fx-h1{font-size:40px}
  .fx-i{grid-template-columns:minmax(0,1fr) 56px; gap:0 12px}
  .fx-hasp .fx-i{grid-template-columns:52px minmax(0,1fr) 56px}
  .fx-pos{width:52px}
  .fx-film{font-size:20px}
  .fx-links-ed label{grid-template-columns:1fr}
}
/* watched-on date, editable in place */
.fx-when{display:inline-flex; align-items:center; gap:8px; margin-top:6px; font-size:12.5px; color:var(--muted); justify-self:start}
.fx[dir="ltr"] .fx-when > span{font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase}
.fx-date-in{font:inherit; font-size:13.5px; color:var(--ink); background:transparent; border:0; border-bottom:1px dashed var(--faint); border-radius:0; padding:1px 0; min-height:24px; cursor:pointer; -webkit-appearance:none; appearance:none}
.fx-date-in:focus{outline:none; border-bottom-color:var(--accent)}
.fx-date-in::-webkit-calendar-picker-indicator{opacity:.5; cursor:pointer}
/* year filter, like Letterboxd's diary years */
.fx-years{display:flex; flex-wrap:wrap; gap:6px}
.fx-years button{all:unset; cursor:pointer; padding:4px 11px; border-radius:999px; font-size:13px; color:var(--muted); box-shadow:inset 0 0 0 1px var(--line); font-variant-numeric:tabular-nums}
.fx[dir="ltr"] .fx-years button{font-family:var(--mono); font-size:11px; letter-spacing:.06em}
.fx-years button[aria-pressed="true"]{background:var(--ink); color:var(--bg); box-shadow:none}
.fx-years button:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.fx-lblog{justify-self:start; margin-top:6px; font-size:12px}
.fx-links a.fx-app{font-size:11px; margin-inline-start:6px; color:var(--muted); text-decoration:none; padding:1px 6px; border-radius:999px; box-shadow:inset 0 0 0 1px var(--line); vertical-align:1px}
.fx-links a.fx-app::before{content:none}

/* ---------- favorite four ---------- */
.fx-favs{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px}
.fx-fav{display:grid; gap:6px; justify-items:center; min-width:0}
.fx-favb{all:unset; box-sizing:border-box; cursor:pointer; position:relative; display:block; width:100%; aspect-ratio:2/3; border-radius:5px; overflow:hidden; background:var(--sunk); box-shadow:inset 0 0 0 1px rgba(127,127,127,.2); text-decoration:none; transition:transform .15s, box-shadow .15s}
a.fx-favb:hover, button.fx-favb:hover{box-shadow:inset 0 0 0 2px var(--star)}
.fx-favb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1}
.fx-favb img:not([src]){visibility:hidden}
.fx-favt{position:absolute; inset:0; display:grid; place-items:center; padding:6px; text-align:center; font-family:var(--serif); font-size:12.5px; line-height:1.15; color:var(--muted)}
.fx-favb.empty{display:grid; place-items:center; font-size:22px; color:var(--faint); box-shadow:inset 0 0 0 1.5px var(--line); background:transparent}
.fx-favrow{display:grid; gap:10px}
/* ---------- picker: plan + TMDB ---------- */
.fx-resh{font-size:11px; color:var(--faint); padding:10px 4px 2px; list-style:none}
.fx[dir="ltr"] .fx-resh{font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase}
.fx-tmhit{align-items:center; flex-wrap:nowrap; gap:10px}
.fx-tmhit img, .fx-tmph{width:28px; aspect-ratio:2/3; border-radius:2px; object-fit:cover; flex:none; background:var(--sunk)}
/* ---------- diary extras ---------- */
.fx-rw{color:var(--star); font-size:13px; font-weight:700}
.fx-ww{font-size:12px; color:var(--muted); font-style:italic}
.fx-tagc{font-size:11px; color:var(--muted); padding:0 7px; border-radius:999px; box-shadow:inset 0 0 0 1px var(--line); line-height:18px}
.fx-spoil{all:unset; box-sizing:border-box; cursor:pointer; display:flex; flex-wrap:wrap; gap:4px 10px; align-items:center; margin-top:8px; padding:10px 12px; border-radius:8px; background:var(--sunk); font-size:13px; color:var(--muted)}
.fx-spoil b{color:var(--ink); font-weight:600}
.fx-spoil:focus-visible{outline:2px solid var(--accent)}
/* ---------- watch calendar ---------- */
.fx-calwrap summary{margin-bottom:6px}
.fx-calstats{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; margin-bottom:18px}
.fx-cst{display:grid; gap:2px; align-content:start; padding:12px 13px 12px; border-radius:10px; background:var(--surface); box-shadow:inset 0 0 0 1px var(--line); min-width:0}
.fx-cst b{font-weight:400; font-size:24px; line-height:1.05; color:var(--ink); font-variant-numeric:tabular-nums; overflow-wrap:anywhere}
.fx[dir="ltr"] .fx-cst b{font-family:var(--serif); font-size:31px; letter-spacing:-.01em}
.fx-cst b small{font-size:13px; margin-inline-start:5px; color:var(--muted); font-family:var(--sans); letter-spacing:0}
.fx-cstl{font-size:11.5px; color:var(--muted); margin-top:6px}
.fx[dir="ltr"] .fx-cstl{font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase}
.fx-csts{font-size:12px; color:var(--faint); line-height:1.35}
@media (max-width:560px){ .fx-calstats{grid-template-columns:repeat(2, minmax(0,1fr))} }
.fx-cal{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px 12px}
.fx-calm{display:grid; gap:5px; min-width:0}
.fx-calm > span{font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.fx-calg{display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:2px}
.fx-calg i{display:block; aspect-ratio:1; border-radius:2px; background:var(--sunk)}
.fx-calg i.pad{background:transparent}
.fx-calg i.l1{background:color-mix(in srgb, var(--star) 40%, var(--sunk))}
.fx-calg i.l2{background:color-mix(in srgb, var(--star) 70%, var(--sunk))}
.fx-calg i.l3{background:var(--star)}
.fx-calg i.fut{opacity:.35}
.fx-calg i.today{box-shadow:0 0 0 1.5px var(--ink)}
.fx-callegend{display:flex; align-items:center; justify-content:flex-end; gap:3px; margin-top:10px; font-size:10.5px; color:var(--muted)}
.fx-callegend i{width:10px; height:10px; border-radius:2px; background:var(--sunk)}
.fx-callegend i.l1{background:color-mix(in srgb, var(--star) 40%, var(--sunk))} .fx-callegend i.l2{background:color-mix(in srgb, var(--star) 70%, var(--sunk))} .fx-callegend i.l3{background:var(--star)}
.fx-callegend span{margin-inline:4px}
@media (max-width:420px){ .fx-cal{grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px 10px} .fx-favs{gap:7px} }

/* ---------- app shell: bottom tab bar ---------- */
.fx.fx-app, #root .fx.fx-app{padding-bottom:calc(92px + env(safe-area-inset-bottom, 0px))}
.fx-tabbar{position:fixed; left:0; right:0; bottom:0; z-index:50; background:color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter:saturate(1.5) blur(16px); backdrop-filter:saturate(1.5) blur(16px); border-top:1px solid var(--line); padding:0 max(10px, env(safe-area-inset-left, 0px)) env(safe-area-inset-bottom, 0px)}
.fx-tabbar > div{max-width:660px; margin:0 auto; display:grid; grid-auto-flow:column; grid-auto-columns:1fr}
.fx-tabbar button{all:unset; cursor:pointer; position:relative; text-align:center; padding:15px 6px 14px; font-size:13.5px; font-weight:500; color:var(--muted)}
.fx[dir="ltr"] .fx-tabbar button{font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase}
.fx-tabbar button:hover{color:var(--ink)}
.fx-tabbar button[aria-current="page"]{color:var(--ink)}
.fx-tabbar button[aria-current="page"]::before{content:""; position:absolute; top:-1px; left:50%; width:28px; margin-left:-14px; height:2px; border-radius:2px; background:var(--star)}
.fx-tabbar button:focus-visible{outline:2px solid var(--accent); outline-offset:-4px; border-radius:6px}
.fx-foot{justify-content:flex-start; padding-top:0}

/* ---------- watched cards: one tappable summary line ---------- */
.fx-i.done{cursor:pointer}
.fx-meta{all:unset; box-sizing:border-box; cursor:pointer; justify-self:start; display:inline-flex; flex-wrap:wrap; align-items:center; gap:3px 10px; margin:6px 0 0; margin-inline-start:-8px; padding:4px 8px; border-radius:8px; min-height:30px}
.fx-meta:hover{background:var(--sunk)}
.fx-meta:focus-visible{outline:2px solid var(--accent)}
.fx-meta .fx-mini{font-size:14px}
.fx-mdate{font-size:12px; color:var(--faint)}
.fx[dir="ltr"] .fx-mdate{font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase}
.fx-meta .fx-ask{color:var(--accent)}
.fx-tap{cursor:pointer}
.fx-de.fx-tap{transition:background .15s}
.fx-de.fx-tap:hover{background:color-mix(in srgb, var(--sunk) 55%, transparent)}
.fx-de.hl, .fx-i.hl{animation:fx-hl 1.8s ease-out}
@keyframes fx-hl{from{background:color-mix(in srgb, var(--star) 16%, transparent)} to{background:transparent}}
a.fx-btn{display:inline-block; text-decoration:none}
.fx-favc{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11.5px; color:var(--muted); text-align:center}

/* ---------- the log sheet ---------- */
html.fx-lock, html.fx-lock body{overflow:hidden}
.fx-sheetwrap{position:fixed; inset:0; z-index:1000}
.fx-sheetwrap[hidden]{display:none}
.fx-scrim{position:absolute; inset:0; background:rgba(6,8,12,.52); animation:fx-fade .18s ease-out}
.fx.fx-sheet{position:absolute; left:0; right:0; bottom:0; top:max(26px, calc(env(safe-area-inset-top, 0px) + 10px)); max-width:none; margin:0; padding:0; gap:0; display:flex; flex-direction:column; background:var(--bg); border-radius:16px 16px 0 0; box-shadow:0 -12px 48px rgba(0,0,0,.28); overflow:hidden; animation:fx-up .28s cubic-bezier(.2,.8,.2,1)}
@media (min-width:720px){ .fx.fx-sheet{top:5vh; bottom:5vh; width:600px; max-width:calc(100% - 32px); margin-inline:auto; border-radius:16px; animation:fx-pop .2s ease-out} }
.fx-shh{flex:none; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid var(--line)}
.fx-shh .fx-shb:first-child{justify-self:start}
.fx-shh .fx-shb:last-child{justify-self:end}
.fx-sht{font-weight:700; font-size:15px; white-space:nowrap}
.fx[dir="ltr"] .fx-sht{font-family:var(--mono); font-weight:500; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted)}
.fx-shb{all:unset; cursor:pointer; padding:8px 12px; border-radius:999px; font-size:15px; color:var(--muted); line-height:1.2}
.fx-shb:hover{color:var(--ink)}
.fx-shb.primary{background:var(--star); color:var(--on-star); font-weight:700; padding:8px 20px}
.fx-shb.primary:hover{filter:brightness(1.06); color:var(--on-star)}
.fx-shb.warn{color:var(--bad); font-weight:600}
.fx-shb:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.fx-shbody{flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding:20px 18px calc(30px + env(safe-area-inset-bottom, 0px)); display:grid; gap:18px; align-content:start; grid-auto-rows:max-content; grid-template-columns:minmax(0,1fr)}
.fx-shfilm{display:grid; grid-template-columns:auto minmax(0,1fr); gap:16px; align-items:center}
.fx-shfilm .fx-shpos{width:64px}
.fx-shfilm .fx-film{font-size:27px}
.fx-shgroup{display:grid; border-radius:12px; background:var(--surface); box-shadow:inset 0 0 0 1px var(--line); overflow:hidden}
.fx-shline{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 14px; min-height:50px; box-sizing:border-box; font-size:15px; cursor:pointer}
.fx-shline + .fx-shline{border-top:1px solid var(--line)}
.fx-shline > span{min-width:0}
.fx-shline .fx-rw{font-style:normal; margin-inline-end:4px}
.fx-shdate{font:inherit; font-size:15px; color:var(--accent); background:transparent; border:0; padding:0; text-align:end; min-height:30px; -webkit-appearance:none; appearance:none; cursor:pointer}
.fx-shdate:focus{outline:none}
.fx-shdate::-webkit-date-and-time-value{text-align:end}
.fx-shtext{cursor:text}
.fx-shtext > span{flex:none; color:var(--ink)}
.fx-shtext input{flex:1; min-width:0; text-align:end; font:inherit; font-size:15px; border:0; background:transparent; color:var(--ink); padding:4px 0}
.fx-shtext input:focus{outline:none}
.fx-shtext input::placeholder, .fx-tagin::placeholder, .fx-shrv::placeholder{color:var(--faint)}
.fx-sw{-webkit-appearance:none; appearance:none; flex:none; box-sizing:border-box; width:48px; height:29px; margin:0; border-radius:999px; background:var(--line); position:relative; cursor:pointer; transition:background .18s}
.fx-sw::after{content:""; position:absolute; top:3px; inset-inline-start:3px; width:23px; height:23px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.28); transition:transform .18s}
.fx-sw:checked{background:var(--star)}
.fx-sw:checked::after{transform:translateX(19px)}
.fx[dir="rtl"] .fx-sw:checked::after{transform:translateX(-19px)}
.fx-sw:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.fx-shrate{display:grid; justify-items:center; gap:10px; padding:4px 0}
.fx-shlab{font-size:12.5px; color:var(--muted)}
.fx[dir="ltr"] .fx-shlab{font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase}
.fx-shrrow{display:flex; align-items:center; gap:20px}
.fx-stars.big{width:220px; height:44px}
.fx-stars.big::before, .fx-stars.big::after{-webkit-mask-size:44px 44px; mask-size:44px 44px}
.fx-stars.big::after{width:calc(var(--r) * 22px)}
.fx-stars.big button{width:22px; height:44px}
.fx-heart.big{width:42px; height:42px; -webkit-mask-size:34px 34px; mask-size:34px 34px}
.fx-shrv{width:100%; box-sizing:border-box; min-height:150px; margin:0; font:inherit; font-size:16px; line-height:1.55; padding:14px 15px; border-radius:12px; border:0; box-shadow:inset 0 0 0 1px var(--line); background:var(--surface); color:var(--ink); resize:vertical}
.fx[dir="ltr"] .fx-shrv{font-family:var(--serif); font-size:20px; line-height:1.4}
.fx-shrv:focus{outline:none; box-shadow:inset 0 0 0 1.5px var(--accent)}
.fx-shtags{display:grid; gap:8px}
.fx-tagbox{display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding:8px 10px; min-height:50px; box-sizing:border-box; border-radius:12px; background:var(--surface); box-shadow:inset 0 0 0 1px var(--line); cursor:text}
.fx-tagbox:focus-within{box-shadow:inset 0 0 0 1.5px var(--accent)}
.fx-chip{all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:6px; padding:4px 8px 4px 11px; border-radius:999px; background:var(--sunk); font-size:14px; line-height:1.3; color:var(--ink)}
.fx[dir="rtl"] .fx-chip{padding:4px 11px 4px 8px}
.fx-chip i{font-style:normal; font-size:16px; line-height:1; color:var(--faint)}
.fx-chip:hover i{color:var(--bad)}
.fx-chip:focus-visible{outline:2px solid var(--accent)}
.fx-tagin{flex:1; min-width:120px; border:0; background:transparent; font:inherit; font-size:15px; color:var(--ink); padding:5px 2px}
.fx-tagin:focus{outline:none}
.fx-shhint{font-size:11.5px; color:var(--faint)}
.fx-tagsug{display:flex; flex-wrap:wrap; gap:6px}
.fx-tagsug button{all:unset; cursor:pointer; font-size:13px; color:var(--muted); padding:4px 11px; border-radius:999px; box-shadow:inset 0 0 0 1px var(--line)}
.fx-tagsug button:hover{color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink)}
.fx-shfoot{display:flex; flex-wrap:wrap; gap:8px; padding-top:6px; border-top:1px solid var(--line)}
.fx-shfoot .fx-btn{font-size:13.5px; padding:8px 15px}
.fx-shdel{all:unset; cursor:pointer; justify-self:center; padding:10px 18px; border-radius:999px; font-size:14px; color:var(--bad); transition:background .15s, color .15s}
.fx-shdel.armed{background:var(--bad); color:#fff; font-weight:600}
.fx-shdel:focus-visible{outline:2px solid var(--accent)}
@keyframes fx-up{from{transform:translateY(48px); opacity:.4} to{transform:none; opacity:1}}
@keyframes fx-pop{from{transform:scale(.98); opacity:0} to{transform:none; opacity:1}}
@keyframes fx-fade{from{opacity:0} to{opacity:1}}
@media (prefers-reduced-motion: reduce){ .fx.fx-sheet, .fx-scrim, .fx-de.hl, .fx-i.hl{animation:none} }

/* ---------- reviews: four lines in lists, the whole thing on its own page ---------- */
.fx-clamp{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; line-clamp:4; overflow:hidden}
.fx-spnote{margin:8px 0 0; font-size:13px; color:var(--muted); font-style:italic}
.fx-rvb{justify-self:start; margin-top:6px; font-size:12.5px; text-decoration:none; color:var(--accent)}
.fx[dir="ltr"] .fx-rvb{font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase}
.fx-ebar{display:flex}
.fx-backl{font-size:13px; text-decoration:none}
.fx[dir="ltr"] .fx-backl{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase}
.fx-entry{display:grid; gap:18px}
.fx-efilm{display:grid; grid-template-columns:auto minmax(0,1fr); gap:18px; align-items:end}
.fx-efilm .fx-pos.fx-epos{width:112px; border-radius:6px}
.fx-efilm .fx-film{font-size:34px; line-height:1.05}
.fx-efilm .fx-eye{margin-bottom:6px}
.fx-erate{display:flex; align-items:center; gap:14px}
.fx-erate .fx-stars.big{width:150px; height:30px}
.fx-erate .fx-stars.big::before, .fx-erate .fx-stars.big::after{-webkit-mask-size:30px 30px; mask-size:30px 30px}
.fx-erate .fx-stars.big::after{width:calc(var(--r) * 15px)}
.fx-erate .fx-heart.big{width:30px; height:30px; -webkit-mask-size:26px 26px; mask-size:26px 26px}
.fx-ewhen{font-size:13px; color:var(--muted)}
.fx[dir="ltr"] .fx-ewhen{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase}
.fx-ewhen .fx-ww{text-transform:none; letter-spacing:0; font-family:var(--sans); font-size:13px}
.fx-rvfull{white-space:pre-wrap; overflow-wrap:anywhere; font-size:16px; line-height:1.8; color:var(--ink)}
.fx[dir="ltr"] .fx-rvfull{font-family:var(--serif); font-size:21px; line-height:1.5}
.fx-spgate{display:grid; gap:12px; justify-items:start; padding:18px; border-radius:12px; background:var(--sunk)}
.fx-spgate p{margin:0; color:var(--muted)}
@media (max-width:420px){ .fx-efilm .fx-pos.fx-epos{width:96px} .fx-efilm .fx-film{font-size:29px} }

/* ---------- like / rewatch / review marks (icons, in Letterboxd's order) ---------- */
.fx-ico{display:inline-block; flex:none; width:15px; height:15px; vertical-align:-2px; background:var(--faint); -webkit-mask:var(--rv-mask) center/contain no-repeat; mask:var(--rv-mask) center/contain no-repeat}
.fx-ico.lk{background:var(--heart); -webkit-mask-image:var(--heart-mask); mask-image:var(--heart-mask)}
.fx-ico.rw{background:var(--star); -webkit-mask-image:var(--rw-mask); mask-image:var(--rw-mask)}
.fx-ico.rv{background:var(--faint); width:14px}
.fx-dm, .fx-meta{column-gap:9px}
.fx-shline .fx-ico.rw{width:17px; height:17px; margin-inline-end:9px; vertical-align:-3px}
.fx-shfoot .fx-ico.rw{width:14px; height:14px; margin-inline-end:7px; background:currentColor}
.fx-ewhen .fx-ico.rw{width:13px; height:13px; margin-inline-end:6px; vertical-align:-1px}

/* ---------- personal list (template edition) ---------- */
.fx-lbar{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px}
.fx-file{position:relative; overflow:hidden; display:inline-flex; align-items:center}
.fx-file input{position:absolute; inset:0; opacity:0; cursor:pointer; font-size:0}
.fx-file:focus-within{outline:2px solid var(--accent); outline-offset:2px}
.fx-step{display:inline-flex; align-items:center; gap:8px; font-size:13.5px; color:var(--muted)}
.fx-step button{all:unset; cursor:pointer; width:30px; height:30px; display:grid; place-items:center; border-radius:50%; box-shadow:inset 0 0 0 1px var(--line); color:var(--ink); font-size:17px; line-height:1}
.fx-step button:hover:not([disabled]){box-shadow:inset 0 0 0 1px var(--ink)}
.fx-step button[disabled]{opacity:.35; cursor:default}
.fx-step b{min-width:22px; text-align:center; color:var(--ink); font-variant-numeric:tabular-nums; font-size:15px}
.fx-small{font-size:12.5px}
.fx-lnow{color:var(--star); letter-spacing:inherit}
.fx-ll .fx-li{grid-template-columns:minmax(0,1fr) auto; align-items:center; padding:10px 0}
.fx-hasp .fx-ll .fx-li{grid-template-columns:42px minmax(0,1fr) auto}
.fx-ll .fx-li .fx-pos{width:42px}
.fx-ll .fx-li.done .fx-film{color:var(--muted)}
.fx-lacts{display:flex; align-items:center; gap:2px}
.fx-lb{all:unset; cursor:pointer; min-width:32px; height:32px; padding:0 4px; box-sizing:border-box; display:grid; place-items:center; border-radius:8px; color:var(--faint); font-size:16px}
.fx-lb:hover:not([disabled]){color:var(--ink); background:var(--sunk)}
.fx-lb[disabled]{opacity:.25; cursor:default}
.fx-lb.rm.armed{color:#fff; background:var(--bad); font-size:12.5px; font-weight:600; padding:0 10px}
.fx-lb:focus-visible{outline:2px solid var(--accent)}
.fx-warn{color:var(--bad) !important}
.fx-hit[disabled]{cursor:default; opacity:.6}

/* ---------- first visit (template edition) ---------- */
.fx-onb .fx-lede{margin:6px 0 0; font-size:16px; color:var(--muted); max-width:34em}
.fx[dir="ltr"].fx-onb .fx-lede{font-family:var(--serif); font-size:20px; line-height:1.35}
.fx-onb .fx-opt{padding:18px; border:1px solid var(--line); border-radius:14px; background:var(--surface)}
.fx-onb .fx-opt + .fx-opt{border-top:1px solid var(--line)}
.fx-onb .fx-opt h2{margin:0}
.fx-onb .fx-opt p{margin:0; color:var(--muted); line-height:1.55}
.fx-lweek{display:grid; gap:0}
.fx-lweek .fx-month{margin:0 0 2px}
.fx-lweek .fx-ll{margin:0}

/* ---------- backdrop: a still across the top, fading into the page (app and public profile) ---------- */
#root .fx.fx-withbd, .fx.fx-withbd{padding-top:0}
body:has(.fx-withbd){overflow-x:clip}
.fx-hero{position:relative; margin:0 calc(50% - 50vw) -110px; height:clamp(230px, 48vw, 460px); overflow:hidden; pointer-events:none; z-index:0}
.fx-hero img{width:100%; height:100%; object-fit:cover; object-position:center 30%; display:block}
.fx-hero::after{content:""; position:absolute; inset:0; background:linear-gradient(to bottom, color-mix(in srgb, var(--bg) 10%, transparent) 0%, transparent 30%, color-mix(in srgb, var(--bg) 70%, transparent) 72%, var(--bg) 100%), linear-gradient(to right, color-mix(in srgb, var(--bg) 55%, transparent), transparent 22%, transparent 78%, color-mix(in srgb, var(--bg) 55%, transparent))}
.fx-withbd > .fx-head, .fx-withbd > header{position:relative; z-index:1}
.fx-withbd > .fx-head .fx-h1{text-shadow:0 1px 18px color-mix(in srgb, var(--bg) 70%, transparent)}
.fx-withbd > *:not(.fx-hero):not(.fx-tabbar){position:relative; z-index:1}
.fx-bdprev{position:relative; border-radius:10px; overflow:hidden; aspect-ratio:16/9; max-width:420px; background:var(--sunk)}
.fx-bdprev img{width:100%; height:100%; object-fit:cover; display:block}
.fx-bdprev span{position:absolute; inset-inline-start:10px; bottom:8px; font-size:12px; color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.7)}
.fx-pph{display:flex; align-items:center; justify-content:space-between; gap:12px}
.fx-bdgrid{display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:8px}
.fx-bdg{all:unset; cursor:pointer; aspect-ratio:16/9; border-radius:8px; overflow:hidden; background:var(--sunk); box-shadow:inset 0 0 0 1px var(--line)}
.fx-bdg img{width:100%; height:100%; object-fit:cover; display:block}
.fx-bdg.on, .fx-pg.on{box-shadow:0 0 0 3px var(--star)}
.fx-bdg:focus-visible, .fx-pg:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
/* choosing a poster */
button.fx-pos{all:unset; cursor:pointer; position:relative; display:block}
.fx-shfilm .fx-shpos{width:64px; aspect-ratio:2/3; border-radius:4px; overflow:hidden; box-shadow:0 0 0 1px var(--line)}
.fx-shpos img{width:100%; height:100%; object-fit:cover; display:block}
.fx-chg{position:absolute; inset:auto 0 0 0; padding:3px 0 4px; font-size:9px; letter-spacing:.06em; text-align:center; color:#fff; background:linear-gradient(transparent, rgba(0,0,0,.75)); text-transform:uppercase}
.fx-pgrid{display:grid; grid-template-columns:repeat(auto-fill, minmax(92px, 1fr)); gap:10px}
.fx-pg{all:unset; cursor:pointer; aspect-ratio:2/3; border-radius:6px; overflow:hidden; background:var(--sunk); box-shadow:inset 0 0 0 1px var(--line); display:grid; place-items:center; font-size:12.5px; color:var(--muted); text-align:center}
.fx-pg img{width:100%; height:100%; object-fit:cover; display:block}
.fx-h2{margin:0; font-size:18px}
/* stats, Letterboxd-style: the headline numbers, then cards that switch between most watched and highest rated */
.fx-big{display:grid; grid-template-columns:repeat(auto-fit, minmax(56px, 1fr)); gap:16px 8px; padding:20px 0 22px; border-top:1px solid var(--line)}
.fx-big div{display:grid; gap:4px; justify-items:center; text-align:center}
.fx-big b{font-family:"Reem Kufi", "Vazirmatn", Tahoma, sans-serif; font-weight:700; font-size:28px; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums}
.fx[dir="ltr"] .fx-big b{font-family:var(--serif); font-weight:400; font-size:clamp(30px, 9vw, 42px); letter-spacing:-.01em}
.fx-big span{font-size:11.5px; line-height:1.3; color:var(--muted)}
.fx[dir="ltr"] .fx-big span{font-family:var(--mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase}
.fx-cardh{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 14px}
.fx-segs{display:flex; flex-wrap:wrap; gap:8px 14px}
.fx-seg{gap:4px}
.fx-seg button{padding:3px 9px}
.fx[dir="ltr"] .fx-seg button{font-size:10px}
.fx-wide .fx-rowbar{grid-template-columns:minmax(96px, 32%) minmax(0,1fr) 54px}
.fx-wide .fx-rk{font-family:inherit; font-size:13px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.fx-wide .fx-rb i{background:var(--star)}
.fx-top .fx-rn{white-space:nowrap}
.fx-few{margin:0; font-size:13px}
/* games on the profile: tiles, «این یا اون», «امشب چی ببینم؟», «هم‌سلیقگی» */
.fx-play{display:grid; gap:16px; padding:18px 0 8px}
.fx-center{justify-content:center; text-align:center}
.fx-games{display:grid; gap:10px}
.fx-game{all:unset; cursor:pointer; display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px; align-items:center; padding:14px; border-radius:12px; background:var(--sunk); transition:transform .15s ease}
.fx-game:hover{transform:translateY(-1px)}
.fx-game:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.fx-game .fx-b{display:grid; gap:4px}
.fx-gt{font-size:17px; font-weight:700; color:var(--ink)}
.fx[dir="ltr"] .fx-gt{font-family:var(--serif); font-weight:400; font-size:22px; line-height:1.1}
.fx-game .fx-muted{font-size:13px; line-height:1.5}
.fx-gstrip{display:flex; direction:ltr}
.fx-gstrip img{width:38px; aspect-ratio:2/3; object-fit:cover; border-radius:3px; box-shadow:0 0 0 2px var(--sunk); background:var(--bg)}
.fx-gstrip img + img{margin-left:-14px}
.fx-gintro{display:grid; gap:6px; justify-items:center; text-align:center}
.fx-gintro .fx-gstrip img{width:54px}
.fx-gintro .fx-gstrip img + img{margin-left:-18px}
.fx-gh{margin:0; font-size:20px; font-weight:700}
.fx[dir="ltr"] .fx-gh{font-family:var(--serif); font-weight:400; font-size:30px; line-height:1.05}
.fx-gh2{margin:6px 0 0; font-size:14px; font-weight:700}
.fx[dir="ltr"] .fx-gh2{font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.fx-vs{display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:10px; align-items:center}
.fx-vsb{all:unset; cursor:pointer; display:grid; gap:8px; justify-items:center; text-align:center; -webkit-tap-highlight-color:transparent}
.fx-vsb .fx-pos{width:100%; max-width:220px; border-radius:8px; box-shadow:0 6px 24px rgba(0,0,0,.18); transition:transform .15s ease, box-shadow .15s ease}
.fx-vsb:hover .fx-pos{transform:translateY(-3px); box-shadow:0 10px 30px rgba(0,0,0,.24)}
.fx-vsb:active .fx-pos{transform:scale(.97)}
.fx-vsb:focus-visible .fx-pos{outline:3px solid var(--star); outline-offset:3px}
.fx-vsb .fx-pt{font-size:13px}
.fx-vst{font-family:var(--serif); font-size:17px; line-height:1.15; color:var(--ink); direction:ltr}
.fx-vst .fx-y, .fx-ctitle .fx-y{font-family:var(--mono); font-size:11px; color:var(--muted)}
.fx-vso{font-family:var(--serif); font-style:italic; font-size:20px; color:var(--muted)}
.fx-champ{display:grid; gap:8px; justify-items:center; text-align:center}
.fx-champ .fx-cpos{width:min(58vw, 230px); border-radius:8px; box-shadow:0 0 0 3px var(--star), 0 12px 34px rgba(0,0,0,.25)}
.fx-ctitle{font-family:var(--serif); font-size:26px; line-height:1.1; color:var(--ink); direction:ltr}
.fx-rank{margin:0; padding:0; list-style:none; display:grid; gap:10px}
.fx-rank li{display:grid; grid-template-columns:44px minmax(0,1fr); gap:10px; align-items:start}
.fx-rank .fx-rk{font-family:var(--mono); font-size:12px; color:var(--muted); padding-top:4px}
.fx-rkf{display:flex; flex-wrap:wrap; gap:8px 12px}
.fx-rkp{display:flex; align-items:center; gap:8px; font-size:14px}
.fx-rkpos{width:34px !important; flex:none}
.fx-reel{display:grid; justify-items:center}
.fx-reelpos, .fx-pickpos{width:min(46vw, 190px) !important; border-radius:8px; box-shadow:0 10px 30px rgba(0,0,0,.22)}
.fx-pick{display:grid; gap:14px; justify-items:center; text-align:center}
.fx-pick .fx-b{display:grid; gap:6px; justify-items:center}
.fx-pick .fx-rvx{text-align:start; max-width:52ch}
.fx-sels select{font:inherit; font-size:14px; color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:999px; padding:6px 12px}
.fx-score{display:grid; justify-items:center; gap:2px}
.fx-score b{font-family:"Reem Kufi", "Vazirmatn", Tahoma, sans-serif; font-size:64px; line-height:1; color:var(--star)}
.fx[dir="ltr"] .fx-score b{font-family:var(--serif); font-weight:400; font-size:84px}
.fx-score small{font-size:.45em; margin-inline-start:2px}
.fx-score span{font-size:15px; color:var(--ink)}
.fx-pairs{margin:0; padding:0; list-style:none; display:grid; gap:10px}
.fx-pairs li{display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; align-items:center}
.fx-pairs .fx-b{display:grid; gap:2px}
.fx-mt{font-family:var(--serif); font-size:17px; line-height:1.15; direction:ltr; text-align:start}
.fx-mr{display:flex; gap:6px; align-items:center; font-size:12px; color:var(--muted)}
.fx-recs{display:grid; grid-template-columns:repeat(auto-fill, minmax(84px, 1fr)); gap:10px}
.fx-rec{display:grid; gap:4px; justify-items:center; text-decoration:none}
.fx-recpos{width:100% !important}
.fx-friends button{font-family:var(--mono); font-size:12px}
.fx-uform input{flex:1 1 180px; min-width:0; font:inherit; font-size:15px; padding:8px 14px; border-radius:999px; border:1px solid var(--line); background:var(--bg); color:var(--ink)}
.fx-exp{display:grid; gap:8px; padding:14px; border-radius:12px; background:var(--sunk)}
@media (prefers-reduced-motion: reduce){ .fx-game, .fx-vsb .fx-pos{transition:none} }
.fx[dir="rtl"] .fx-mt{text-align:right}
.fx-btn.fx-danger{background:#b3261e; border-color:#b3261e; color:#fff}
.fx-pwform{flex-wrap:wrap}
.fx-pwform input{flex:1 1 160px}
/* the multi-user site: sign-in, the Friends tab, follow on profiles */
.fx-authtabs{justify-content:center; margin:4px 0 14px}
.fx-authf{display:grid; gap:14px}
.fx-authf .fx-field input{width:100%}
.fx-feed{list-style:none; margin:0; padding:0; display:grid}
.fx-fr{display:grid; grid-template-columns:46px minmax(0,1fr); gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line); text-decoration:none; color:inherit}
.fx-feed li:last-child .fx-fr{border-bottom:0}
.fx-fr .fx-pos{width:46px; aspect-ratio:2/3; border-radius:4px}
.fx-fr .fx-b{display:grid; gap:3px; min-width:0}
.fx-ft{font-family:var(--serif); font-size:18px; line-height:1.15; color:var(--ink); direction:ltr; text-align:start; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.fx[dir="rtl"] .fx-ft{text-align:right}
.fx-ft .fx-y{font-family:var(--mono); font-size:11px; color:var(--muted)}
.fx-fm{display:flex; gap:6px; align-items:center; min-height:16px}
.fx-fw{font-size:12px; color:var(--muted)}
.fx-find{width:100%; box-sizing:border-box; font:inherit; font-size:15px; padding:8px 14px; border-radius:999px; border:1px solid var(--line); background:var(--bg); color:var(--ink)}
.fx-people{list-style:none; padding:0; margin:8px 0 0; display:grid}
.fx-people li{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--line)}
.fx-people li:last-child{border-bottom:0}
.fx-pn{display:grid; gap:2px; text-decoration:none; color:inherit; min-width:0}
.fx-pn b{font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.fx-pn span{font-family:var(--mono); font-size:12px; color:var(--muted)}
.fx-pn .fx-badge{font-family:inherit; font-size:11px; color:var(--star)}
.fx-people .fx-btn{flex:none}
.fx-pmeta{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-top:12px}
.fx-pmeta .fx-muted{font-size:13px}
/* Solar Hijri calendar: Persian month names, joined letters, no caps spacing */
.fx-cal[dir="rtl"] .fx-calm > span{font-family:"Vazirmatn", Tahoma, sans-serif; letter-spacing:0; text-transform:none; font-size:11px}
.fx-callegend[dir="rtl"] span{font-family:"Vazirmatn", Tahoma, sans-serif; letter-spacing:0}

/* ---- Friends: activity with reactions (multi-user site) ---- */
.fx-tabbar button .fx-ndot{position:absolute; top:11px; inset-inline-end:calc(50% - 30px); width:7px; height:7px; border-radius:50%; background:var(--heart)}
.fx-afeed{list-style:none; margin:0; padding:0; display:grid}
.fx-actv{display:grid; grid-template-columns:78px minmax(0,1fr); gap:14px; padding:16px 0; border-bottom:1px solid var(--line)}
.fx-actv:first-child{padding-top:4px}
.fx-actv:last-child{border-bottom:0}
.fx-apos{position:relative; display:block; width:78px; aspect-ratio:2/3; border-radius:5px; overflow:hidden; background:var(--sunk); box-shadow:inset 0 0 0 1px rgba(127,127,127,.18); text-decoration:none; align-self:start}
.fx-apos img{position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover; display:block}
.fx-apos.none{background:repeating-linear-gradient(135deg, var(--sunk) 0 6px, transparent 6px 12px)}
.fx-ab{display:grid; grid-template-columns:minmax(0,1fr); gap:4px; min-width:0; align-content:start}
.fx-aw{font-size:12.5px; color:var(--muted)}
.fx-aw a{color:var(--ink); text-decoration:none}
.fx-aw b{font-weight:600}
.fx-at, .fx-card a.fx-at{font-family:var(--serif); font-size:21px; line-height:1.15; color:var(--ink); text-decoration:none; direction:ltr; text-align:start; overflow-wrap:anywhere}
.fx[dir="rtl"] .fx-at{text-align:right}
.fx-at .fx-y{font-family:var(--mono); font-size:11px; color:var(--muted)}
.fx-ab .fx-fm{display:flex; gap:8px; align-items:center; flex-wrap:wrap; min-height:18px}
.fx-mine{font-size:12px; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:1px 8px}
.fx-mine span{color:var(--star); letter-spacing:1px}
.fx-arx{margin:2px 0 0; font-size:14px; line-height:1.55; color:var(--ink); white-space:pre-wrap; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden}
.fx-rx{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px}
.fx-rxb{font:inherit; font-size:12.5px; display:inline-flex; align-items:center; gap:5px; cursor:pointer; border:1px solid var(--line); background:transparent; color:var(--muted); border-radius:999px; padding:4px 10px 4px 9px; line-height:1.2}
.fx-rxb:hover{color:var(--ink); border-color:var(--muted)}
.fx-rxb b{font-weight:600; color:var(--ink)}
.fx-rxb i, .fx-rwho i{display:inline-block; width:13px; height:13px; background:currentColor; -webkit-mask:var(--rv-mask) center/contain no-repeat; mask:var(--rv-mask) center/contain no-repeat}
.rx-h i{-webkit-mask-image:var(--heart-mask); mask-image:var(--heart-mask)}
.rx-s i{-webkit-mask-image:var(--eye-mask); mask-image:var(--eye-mask)}
.rx-w i{-webkit-mask-image:var(--mark-mask); mask-image:var(--mark-mask)}
.rx-c i{-webkit-mask-image:var(--bubble-mask); mask-image:var(--bubble-mask)}
.fx-rxb[aria-pressed="true"]{color:var(--ink); border-color:transparent; background:var(--sunk)}
.fx-rxb.rx-h[aria-pressed="true"] i, .fx-rwho .rx-h i{background:var(--heart)}
.fx-rxb.rx-s[aria-pressed="true"] i, .fx-rwho .rx-s i{background:var(--star)}
.fx-rxb.rx-w[aria-pressed="true"] i, .fx-rwho .rx-w i{background:var(--accent, var(--star))}
.fx-rxb[disabled]{opacity:.6; cursor:default}
.fx{--eye-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.8 12S5.6 5 12 5s10.2 7 10.2 7-3.8 7-10.2 7S1.8 12 1.8 12z'/%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3C/svg%3E");
  --mark-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linejoin='round'%3E%3Cpath d='M6 3.5h12v17l-6-4.2-6 4.2z'/%3E%3C/svg%3E");
  --bubble-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3C/svg%3E")}
.fx-rwho{display:flex; flex-wrap:wrap; gap:4px 12px; font-size:12px; color:var(--muted); margin-top:2px}
.fx-rwho span{display:inline-flex; align-items:center; gap:5px}
.fx-cm{list-style:none; margin:4px 0 0; padding:0; display:grid; gap:6px}
.fx-cm li{font-size:14px; line-height:1.5; overflow-wrap:anywhere; background:var(--sunk); border-radius:10px; padding:7px 11px}
.fx-cm a{color:var(--ink); text-decoration:none}
.fx-cmt{font-size:11px; color:var(--faint); white-space:nowrap}
.fx-cmdel{font-size:15px; padding:0 4px; line-height:1}
.fx-cform{display:flex; gap:8px; margin-top:6px; min-width:0}
.fx-cform input{flex:1; min-width:0; font:inherit; font-size:15px; padding:7px 12px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--ink)}
.fx-cform .fx-btn{padding:6px 14px; font-size:13px}
.fx-inbox{list-style:none; margin:0; padding:0; display:grid}
.fx-inbox > li{display:grid; gap:4px; padding:12px 0; border-bottom:1px solid var(--line)}
.fx-inbox > li:first-child{padding-top:2px}
.fx-inbox > li:last-child{border-bottom:0}
.fx-inbox > li.fresh .fx-at::after{content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--heart); margin-inline-start:8px; vertical-align:middle}
.fx-inbox .fx-at, .fx-card .fx-inbox a.fx-at{font-size:18px}
.fx-wl > summary{font-weight:600}
.fx-wll{list-style:none; margin:10px 0 0; padding:0; display:grid}
.fx-wll li{display:grid; grid-template-columns:42px minmax(0,1fr) auto; gap:12px; align-items:center; padding:8px 0; border-bottom:1px solid var(--line)}
.fx-wll li:last-child{border-bottom:0}
.fx-wll .fx-apos{width:42px; border-radius:3px}
.fx-wll .fx-pt{font-size:7px}
.fx-wll .fx-at{font-size:17px}
@media (min-width:700px){ .fx-actv{grid-template-columns:92px minmax(0,1fr); gap:18px} .fx-apos{width:92px} }
/* phones: the reaction buttons are icons (their names are in aria-label and in the line under them) */
@media (max-width:520px){ .fx-actv{grid-template-columns:66px minmax(0,1fr); gap:12px} .fx-apos{width:66px} .fx-rxb > span{display:none} .fx-rxb{padding:5px 11px; gap:6px} .fx-rxb i{width:15px; height:15px} }
/* ---- Activity: segments and notifications ---- */
.fx-aseg{margin-top:-6px}
.fx-ncount{display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--heart); color:#fff; font:600 11px/1 var(--sans); letter-spacing:0; vertical-align:1px}
.fx-notes{list-style:none; margin:0; padding:0; display:grid}
.fx-note-i{display:grid; grid-template-columns:22px minmax(0,1fr) auto; gap:10px; align-items:start; padding:12px 0; border-bottom:1px solid var(--line)}
.fx-note-i:first-child{padding-top:2px}
.fx-note-i:last-child{border-bottom:0}
.fx-note-i.fresh{background:linear-gradient(90deg, color-mix(in srgb, var(--heart) 9%, transparent), transparent 70%); margin:0 -10px; padding-left:10px; padding-right:10px; border-radius:8px}
.fx-nico{width:18px; height:18px; margin-top:2px; background:var(--muted); -webkit-mask:var(--bubble-mask) center/contain no-repeat; mask:var(--bubble-mask) center/contain no-repeat}
.fx-note-i.nh .fx-nico{background:var(--heart); -webkit-mask-image:var(--heart-mask); mask-image:var(--heart-mask)}
.fx-note-i.ns .fx-nico{background:var(--star); -webkit-mask-image:var(--eye-mask); mask-image:var(--eye-mask)}
.fx-note-i.nw .fx-nico{background:var(--accent, var(--star)); -webkit-mask-image:var(--mark-mask); mask-image:var(--mark-mask)}
.fx-note-i.nf .fx-nico{background:var(--ink); -webkit-mask-image:var(--person-mask); mask-image:var(--person-mask)}
.fx{--person-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1-4.4 4.2-6.6 8-6.6s7 2.2 8 6.6'/%3E%3C/svg%3E")}
.fx-nb{display:grid; gap:5px; min-width:0}
.fx-nb > p{margin:0; font-size:14.5px; line-height:1.45; overflow-wrap:anywhere}
.fx-nb a{color:var(--ink); text-decoration:none}
.fx-card .fx-nb a.fx-nfilm{color:var(--ink); font-family:var(--serif); font-size:17px; text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px}
.fx-nq{margin:0; font-size:14px; line-height:1.5; color:var(--ink); border-inline-start:2px solid var(--line); padding-inline-start:10px; white-space:pre-wrap; overflow-wrap:anywhere}
.fx-nb > .fx-link{justify-self:start; font-size:13px}
.fx-nthread{margin-top:2px}
.fx-note-i .fx-btn{padding:5px 12px; font-size:13px}
/* profile header: the visitor's taste match */
.fx-tchip{justify-self:start; font:inherit; font-size:13px; cursor:pointer; border:1px solid var(--line); background:transparent; color:var(--muted); border-radius:999px; padding:5px 13px; margin-top:4px}
.fx-tchip b{color:var(--star); font-weight:700; font-size:14px}
.fx-tchip:hover{border-color:var(--ink); color:var(--ink)}
/* the + in the tab bar: log a film from anywhere */
.fx-tabbar .fx-tplus{display:grid; place-items:center; padding:8px 6px}
.fx-tabbar .fx-tplus i{display:block; width:38px; height:30px; border-radius:9px; background:var(--star); position:relative}
.fx-tabbar .fx-tplus i::before, .fx-tabbar .fx-tplus i::after{content:""; position:absolute; left:50%; top:50%; width:14px; height:2.4px; margin:-1.2px 0 0 -7px; border-radius:2px; background:var(--on-star)}
.fx-tabbar .fx-tplus i::after{transform:rotate(90deg)}
.fx-tabbar .fx-tplus:hover i{filter:brightness(1.08)}
.fx-qlog{margin-top:-4px}
.fx-wla{display:flex; align-items:center; gap:10px}
.fx-wla .fx-btn{padding:4px 12px; font-size:13px}
/* diary as a wall of posters */
.fx-dview{margin-top:-6px}
.fx-dgrid{list-style:none; margin:0 0 6px; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(78px, 1fr)); gap:14px 10px}
.fx-dgrid li{display:grid; gap:5px; min-width:0}
.fx-gcell{all:unset; cursor:pointer; position:relative; display:block; border-radius:5px}
.fx-gcell:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.fx-gcell .fx-pos{width:100%; border-radius:5px}
.fx-gcell:hover .fx-pos{box-shadow:inset 0 0 0 2px var(--star)}
.fx-gday{position:absolute; z-index:2; top:5px; inset-inline-start:5px; min-width:20px; padding:1px 5px; border-radius:5px; background:rgba(0,0,0,.62); color:#fff; font:600 11px/1.5 var(--sans); text-align:center}
.fx-gmeta{display:flex; align-items:center; gap:4px; min-height:15px; flex-wrap:wrap}
.fx-gmeta .fx-mini{font-size:11px; letter-spacing:0}
.fx-gmeta .fx-ico{width:11px; height:11px}
@media (min-width:600px){ .fx-dgrid{grid-template-columns:repeat(auto-fill, minmax(96px, 1fr))} }
.fx-tabbar.fx-hasplus button{white-space:nowrap}
.fx[dir="ltr"] .fx-tabbar.fx-hasplus button{letter-spacing:.07em; font-size:10px; padding-left:2px; padding-right:2px}
@media (min-width:480px){ .fx[dir="ltr"] .fx-tabbar.fx-hasplus button{letter-spacing:.14em; font-size:10.5px} }
/* ---- a year in film (wrapped.js) ---- */
.fw-wrap{position:fixed; inset:0; z-index:200; display:block; max-width:none; padding:0; margin:0; direction:ltr}
.fw-scrim{position:absolute; inset:0; background:rgba(5,7,9,.72); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.fw{position:absolute; inset:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; max-width:620px; margin:0 auto; padding:26px 18px calc(40px + env(safe-area-inset-bottom, 0px));
  background:linear-gradient(180deg, #0b0d10, #151a20); color:#eef2f5; display:grid; gap:16px; align-content:start; text-align:left;
  --ink:#eef2f5; --muted:#9aabbb; --line:#26303a; --sunk:#1c242c}
@media (min-width:660px){ .fw{inset:24px 0; border-radius:18px; box-shadow:0 30px 80px rgba(0,0,0,.5)} }
.fw-x{position:sticky; top:0; justify-self:end; margin-bottom:-44px; z-index:3; width:38px; height:38px; border-radius:50%; border:0; background:rgba(20,26,32,.82); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:0 0 0 1px rgba(255,255,255,.12); color:#fff; font-size:24px; line-height:1; cursor:pointer}
.fw-hero{padding:14px 0 6px; background:radial-gradient(500px 220px at 90% 0%, rgba(0,224,84,.18), transparent 70%)}
.fw-eye{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.fw-hero h2{margin:4px 0 0; font-family:var(--serif); font-weight:400; font-size:clamp(96px, 30vw, 150px); line-height:.9; letter-spacing:-.02em}
.fw-hero p{margin:6px 0 0; font-family:var(--serif); font-size:24px; color:#c9d3dc}
.fw-big{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px}
.fw-big div{background:var(--sunk); border-radius:14px; padding:16px 16px 14px; display:grid; gap:2px}
.fw-big b{font-family:var(--serif); font-weight:400; font-size:52px; line-height:1}
.fw-big div:first-child b{color:#00e054}
.fw-big span{font-size:13px; color:var(--muted)}
.fw-card{background:var(--sunk); border-radius:14px; padding:16px; display:grid; gap:10px}
.fw-card h3{margin:0; font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.fw-posters{display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:8px}
.fw-posters figure{margin:0; display:grid; gap:6px; min-width:0}
.fw-posters img, .fw-posters figure > span{width:100%; aspect-ratio:2/3; object-fit:cover; border-radius:6px; display:grid; place-items:center; background:#26303a; font-family:var(--serif); font-size:12px; text-align:center; padding:4px; overflow:hidden}
.fw-posters figcaption{font-size:11.5px; line-height:1.25; color:#c9d3dc; display:grid; gap:2px; overflow-wrap:anywhere}
.fw-posters figcaption small{color:var(--muted)}
.fw-posters figcaption i{font-style:normal; color:#00e054; font-size:10px; letter-spacing:1px}
.fw-months{display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:5px; height:120px; align-items:end}
.fw-months div{display:grid; grid-template-rows:1fr auto; height:100%; gap:5px; text-align:center}
.fw-months i{align-self:end; display:block; min-height:4px; border-radius:4px 4px 2px 2px; background:#2c3844}
.fw-months div.on i{background:#00e054}
.fw-months span{font-family:var(--mono); font-size:10px; color:var(--muted)}
.fw-note{margin:0; font-size:14px; color:#c9d3dc}
.fw-rank{list-style:none; margin:0; padding:0; display:grid; gap:8px; counter-reset:r}
.fw-rank li{display:grid; grid-template-columns:22px minmax(0,1fr) auto; gap:8px; align-items:baseline; font-family:var(--serif); font-size:21px; counter-increment:r}
.fw-rank li::before{content:counter(r); font-family:var(--mono); font-size:12px; color:var(--muted)}
.fw-rank li span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.fw-rank b{font-family:var(--mono); font-weight:500; font-size:13px; color:var(--muted)}
.fw-two{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px}
.fw-two:empty{display:none}
@media (max-width:420px){ .fw-two{grid-template-columns:minmax(0,1fr)} }
.fw-facts ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.fw-facts li{display:grid; gap:1px; font-family:var(--serif); font-size:21px; line-height:1.2}
.fw-facts li span{font-family:var(--sans); font-size:12.5px; color:var(--muted)}
.fw-facts small{font-family:var(--mono); font-size:12px; color:var(--muted)}
.fw-foot{display:grid; gap:12px; justify-items:center; padding-top:6px}
.fw-btn{font:inherit; font-size:15px; font-weight:600; cursor:pointer; border:0; background:#00e054; color:#04220f; border-radius:999px; padding:11px 22px; text-decoration:none; display:inline-block}
.fw-btn.ghost{background:transparent; color:#eef2f5; box-shadow:inset 0 0 0 1px #3a4652}
.fw-btn[disabled]{opacity:.6}
.fw-prev{display:grid; gap:12px; justify-items:center}
.fw-prev img{width:min(300px, 80%); border-radius:12px; box-shadow:0 12px 40px rgba(0,0,0,.45)}
.fw-row{display:flex; gap:10px; flex-wrap:wrap; justify-content:center}
/* the way in: diary and stats */
.fx-wbtn{justify-self:start; font:inherit; font-size:14px; font-weight:600; cursor:pointer; border:0; border-radius:999px; padding:8px 16px; background:linear-gradient(90deg, #00b843, #00e054); color:#04220f}
/* ---- Activity → Tonight: a film to watch together ---- */
.fx-tgcard{gap:12px}
.fx[dir] .fx-card h2.fx-tgh{font-family:var(--serif); font-size:26px; font-weight:400; letter-spacing:0; text-transform:none; color:var(--ink); margin:0}
.fx-tgwho{display:flex; flex-wrap:wrap; gap:7px}
.fx-tgc{font:inherit; font-size:14px; cursor:pointer; border:1px solid var(--line); background:transparent; color:var(--ink); border-radius:999px; padding:6px 14px}
.fx-tgc.on{background:var(--star); border-color:var(--star); color:var(--on-star); font-weight:600}
span.fx-tgc{cursor:default}
.fx-tgpick{grid-template-columns:132px minmax(0,1fr); gap:18px; align-items:start}
.fx-tgbig{position:relative; width:132px; aspect-ratio:2/3; border-radius:8px; overflow:hidden; background:repeating-linear-gradient(135deg, var(--sunk) 0 6px, transparent 6px 12px); box-shadow:0 10px 30px rgba(0,0,0,.25)}
.fx-tgbig img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.fx-tgbig .fx-pt{position:absolute; inset:0; display:grid; place-items:center; padding:8px; text-align:center; font-family:var(--serif); font-size:15px}
.fx-tgb{display:grid; gap:8px; min-width:0; align-content:start}
.fx-tgb .fx-at{font-size:28px}
.fx-why{list-style:none; margin:0; padding:0; display:grid; gap:4px; font-size:13.5px; color:var(--ink)}
.fx-why li::before{content:"· "; color:var(--star); font-weight:700}
@media (max-width:420px){ .fx-tgpick{grid-template-columns:104px minmax(0,1fr); gap:14px} .fx-tgbig{width:104px} .fx-tgb .fx-at{font-size:23px} }