*{box-sizing:border-box;margin:0;padding:0;}
html,body{min-height:100vh;}
body{background:#F6F8FC;font-family:'Hanken Grotesk',-apple-system,sans-serif;color:#161D2B;}
a{text-decoration:none;color:inherit;}
button{cursor:pointer;font-family:inherit;}
img{display:block;max-width:100%;}

.h-nav{background:rgba(246,248,252,.95);backdrop-filter:blur(12px);border-bottom:1px solid rgba(22,29,43,.08);position:sticky;top:0;z-index:100;}
.h-nav-inner{max-width:1200px;margin:0 auto;padding:0 20px;height:56px;display:flex;align-items:center;gap:12px;}
.h-back{width:34px;height:34px;border-radius:50%;border:1px solid rgba(22,29,43,.1);background:#fff;display:flex;align-items:center;justify-content:center;color:#161D2B;}
.h-gap{flex:1;}
.h-av{width:32px;height:32px;border-radius:50%;font:600 12px 'Hanken Grotesk';display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;}
.h-av img{width:100%;height:100%;object-fit:cover;}
.p-btn{border:1px solid rgba(22,29,43,.15);background:#fff;border-radius:11px;padding:8px 14px;font:600 12.5px 'Hanken Grotesk';color:#3d4452;}

.md-page{max-width:1200px;margin:0 auto;padding:0 20px 64px;}

/* ── Hero strip (template) ── */
.md-hero-strip{position:relative;height:200px;overflow:hidden;border-radius:0 0 20px 20px;margin:0 -20px;}
.md-hero-strip-bg{
  position:absolute;inset:0;
  background:var(--md-backdrop-a,#C9D8EE);
  background-image:repeating-linear-gradient(135deg,var(--md-backdrop-a,#C9D8EE) 0,var(--md-backdrop-a,#C9D8EE) 14px,var(--md-backdrop-b,#B8CBE6) 14px,var(--md-backdrop-b,#B8CBE6) 28px);
}
.md-hero-strip-fade{position:absolute;inset:0;background:linear-gradient(transparent,rgba(232,234,240,.55));}
.md-hero-strip-icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--md-banner-icon,rgba(58,107,181,.16));pointer-events:none;}
.md-back-btn{
  position:absolute;top:16px;left:16px;z-index:2;
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.9);backdrop-filter:blur(8px);
  border-radius:10px;padding:8px 13px;
  font:600 13px 'Hanken Grotesk';color:#161D2B;
  border:1px solid rgba(22,29,43,.06);
  box-shadow:0 1px 4px rgba(22,29,43,.06);
}
.md-back-btn:hover{background:#fff;}

/* ── Layout ── */
.md-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:24px;
  align-items:start;
  padding:0 32px 28px;
}
.md-main{min-width:0;}

/* ── Poster + title row ── */
.md-hero-row{display:flex;gap:22px;align-items:flex-end;margin-top:-70px;margin-bottom:22px;position:relative;z-index:2;}
.md-hero-info{flex:1;min-width:0;padding-bottom:6px;display:flex;flex-direction:column;gap:10px;}
.md-hero-info .md-title{font-size:28px;margin-bottom:0;}
.md-hero-info .md-subtitle{margin-bottom:0;}
.md-hero-info .md-meta-line{margin-top:-4px;}
.md-hero-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.md-detail-head{display:flex;flex-direction:column;gap:10px;margin-bottom:22px;}
.md-detail-head .md-title{font-size:28px;margin-bottom:0;}
.md-detail-head .md-subtitle{margin-bottom:0;}
.md-detail-head .md-meta-line{margin-top:-4px;}
.md-poster{
  width:148px;flex:none;
  border-radius:14px;overflow:hidden;
  border:3px solid #fff;
  box-shadow:0 8px 28px rgba(22,29,43,.2);
  background:var(--md-poster-bg,#fff);
  aspect-ratio:2/3;
}
.md-poster img{width:100%;height:100%;object-fit:cover;}
.md-poster-ph{
  width:100%;height:100%;min-height:220px;
  display:flex;align-items:center;justify-content:center;
  background:var(--md-poster-bg,#EEF4FF);
  background-image:repeating-linear-gradient(135deg,var(--md-accent-lite,#DEE7F4) 0,var(--md-accent-lite,#DEE7F4) 10px,var(--md-accent-mid,#CBD9EE) 10px,var(--md-accent-mid,#CBD9EE) 20px);
  color:var(--md-accent-deep,#3a6bb5);
}
.md-title-block{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:6px;}
.md-title-main{display:flex;align-items:center;gap:10px;flex:1;min-width:0;flex-wrap:wrap;}
.md-title{font:800 30px/1.1 'Hanken Grotesk';letter-spacing:-.02em;color:#161D2B;}
.md-subtitle{font:500 14px 'Hanken Grotesk';color:#95a0ae;margin-bottom:6px;}
.md-meta-line{display:flex;align-items:center;flex-wrap:wrap;gap:8px;}
.md-kicker{font:500 13px 'JetBrains Mono';color:#95a0ae;text-transform:uppercase;letter-spacing:.04em;}
.md-sub-meta{font:500 13px 'Hanken Grotesk';color:#95a0ae;}
.md-meta-dot{color:#d0d4de;}

/* ── Status buttons (template) ── */
.md-status-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:none;}
.md-status-group{display:inline-flex;align-items:center;gap:4px;padding:4px;background:#F1F3F8;border-radius:13px;flex-wrap:wrap;}
.md-status-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border:none;border-radius:10px;padding:10px 16px;
  font:700 13px 'Hanken Grotesk';letter-spacing:-.01em;
  color:#fff;cursor:pointer;
  background:linear-gradient(160deg,#3D7CE3 0%,#2C6FD6 52%,#1F5BC0 100%);
  box-shadow:0 5px 13px -2px rgba(35,92,192,.32),inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .16s cubic-bezier(.34,1.56,.64,1),box-shadow .2s ease,color .15s,background .15s;
  white-space:nowrap;text-decoration:none;
}
.md-status-btn i,.md-status-btn [data-lucide]{color:#fff;}
.md-status-btn:hover:not(.on-active){transform:translateY(-1px);filter:brightness(1.03);}
.md-status-btn:active{transform:translateY(0) scale(.97);transition:transform .07s ease;}
.md-status-btn:disabled{opacity:.55;cursor:default;transform:none;}
.md-status-btn.on-active{
  background:#E3E7EF;
  color:#5c6470;
  font-weight:600;
  box-shadow:none;
}
.md-status-btn.on-active i,.md-status-btn.on-active [data-lucide]{color:#8a93a3;}
.md-status-fav{
  width:44px;height:44px;border-radius:12px;flex-shrink:0;padding:0;
  border:1.5px solid #FF9BB5;
  background:#FFF5F8;
  display:inline-flex;align-items:center;justify-content:center;
  color:#FF4F81;cursor:pointer;text-decoration:none;
  transition:transform .16s cubic-bezier(.34,1.56,.64,1),box-shadow .2s ease,background .15s,border-color .15s,color .15s;
}
.md-status-fav i,.md-status-fav [data-lucide]{color:#FF4F81;}
.md-status-fav:hover{transform:translateY(-1px);background:#FFE8EF;border-color:#FF7DA0;}
.md-status-fav:active{transform:translateY(0) scale(.97);}
.md-status-fav:disabled{opacity:.55;cursor:default;transform:none;}
.md-status-fav.on-active{
  border-color:#FF9BB5;
  background:#FFF5F8;
  color:#FF4F81;
  box-shadow:none;
}
.md-status-fav.on-active i,.md-status-fav.on-active [data-lucide]{color:#FF4F81;}
.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;}

/* ── Cards ── */
.md-card{
  background:#fff;border:1px solid rgba(22,29,43,.06);border-radius:16px;
  padding:16px 20px;margin-bottom:20px;
  box-shadow:0 2px 8px rgba(22,29,43,.05);
}
.md-synopsis-card{padding:20px 22px;}
.md-card-hd{font:600 12px 'JetBrains Mono';letter-spacing:.08em;text-transform:uppercase;color:#95a0ae;margin-bottom:12px;}
.md-synopsis{font:400 16px/1.7 'Newsreader';color:#3d4452;margin:0;white-space:pre-wrap;}

.md-friends-row{display:flex;gap:16px;overflow-x:auto;padding-bottom:2px;}
.md-friend{display:flex;flex-direction:column;align-items:center;gap:5px;flex:none;min-width:52px;}
.md-friend-av{
  width:48px;height:48px;border-radius:50%;
  font:700 16px 'Hanken Grotesk';
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  border:3px solid #fff;box-shadow:0 2px 8px rgba(22,29,43,.1);
}
.md-friend-av img{width:100%;height:100%;object-fit:cover;}
.md-friend-name{font:600 11px 'Hanken Grotesk';color:#161D2B;text-align:center;max-width:58px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.md-friend-score{font:700 11px 'Hanken Grotesk';color:#2C6FD6;}
.md-friend-invite{color:#b0b5bf;}
.md-invite-av{
  width:48px;height:48px;border-radius:50%;
  background:#F4F6FB;border:2px dashed #d0d4de;
  display:flex;align-items:center;justify-content:center;color:#b0b5bf;
}

/* ── Tabs ── */
.md-tabs-shell{
  background:#fff;border:1px solid rgba(22,29,43,.06);border-radius:13px;
  padding:4px;margin-bottom:20px;
  box-shadow:0 2px 8px rgba(22,29,43,.05);
}
.md-tabs{display:flex;gap:2px;}
.md-tab{
  flex:1;border:none;border-radius:10px;padding:9px;
  font:600 13px 'Hanken Grotesk';cursor:pointer;
  background:transparent;color:#5c6470;
  transition:all .15s;text-align:center;
}
.md-tab:hover{color:#161D2B;}
.md-tab.on{background:#2C6FD6;color:#fff;}
.md-panel{display:none;}
.md-panel.on{display:block;}
.md-tab-panel-card{margin-bottom:0;}

.md-reviews-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:8px;}
.md-reviews-count{font:600 13px 'Hanken Grotesk';color:#161D2B;}
.md-filter-pills{display:flex;gap:6px;}
.md-filter{
  border-radius:18px;padding:5px 12px;
  font:600 12px 'Hanken Grotesk';cursor:pointer;border:none;
  background:#F4F6FB;color:#5c6470;
}
.md-filter.on{background:#2C6FD6;color:#fff;}
.md-reviews-list{display:flex;flex-direction:column;gap:12px;}

.md-review{
  background:#fff;border:1px solid rgba(22,29,43,.06);border-radius:16px;
  padding:16px 18px;box-shadow:0 2px 8px rgba(22,29,43,.04);
  transition:box-shadow .2s;
}
.md-review:hover{box-shadow:0 4px 16px rgba(22,29,43,.09);}
.md-rev-head{display:flex;align-items:center;gap:10px;margin-bottom:11px;}
.md-rev-av{width:38px;height:38px;border-radius:50%;font:700 14px 'Hanken Grotesk';display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;}
.md-rev-av img{width:100%;height:100%;object-fit:cover;}
.md-rev-info{flex:1;min-width:0;}
.md-rev-name{font:600 14px 'Hanken Grotesk';color:#161D2B;}
.md-rev-meta{font:400 11px 'JetBrains Mono';color:#95a0ae;margin-top:2px;}
.md-rev-score{font:700 15px 'Hanken Grotesk';color:#2C6FD6;flex-shrink:0;}
.md-rev-text{font:400 15px/1.55 'Hanken Grotesk';color:#303744;margin-bottom:8px;white-space:pre-wrap;}
.md-rev-foot{display:flex;align-items:center;margin-top:8px;}
.md-rev-like{display:flex;align-items:center;gap:5px;font:500 12px 'Hanken Grotesk';color:#95a0ae;border:none;background:none;padding:4px 8px;border-radius:8px;margin-left:auto;}
.md-rev-like:hover{background:#F4F6FB;}

.md-form{margin-bottom:14px;}
.md-form textarea{width:100%;border:1.5px solid rgba(22,29,43,.13);border-radius:14px;padding:12px 14px;font:400 14px 'Hanken Grotesk';min-height:100px;resize:vertical;outline:none;background:#fff;color:#161D2B;margin-bottom:10px;}
.md-submit{background:#2C6FD6;color:#fff;border:none;border-radius:11px;padding:10px 16px;font:600 13px 'Hanken Grotesk';}
.md-empty{text-align:center;padding:36px 16px;color:#95a0ae;font:400 14px 'Hanken Grotesk';}

.md-info-row{display:flex;align-items:flex-start;gap:12px;padding:13px 0;border-bottom:1px solid rgba(22,29,43,.07);}
.md-info-row:last-child{border-bottom:none;}
.md-info-icon{width:36px;height:36px;border-radius:10px;background:#F6F8FC;display:flex;align-items:center;justify-content:center;color:#5c6470;flex-shrink:0;}
.md-info-lbl{font:500 10.5px 'JetBrains Mono';letter-spacing:.08em;text-transform:uppercase;color:#95a0ae;margin-bottom:2px;}
.md-info-val{font:500 14px 'Hanken Grotesk';color:#161D2B;}
.md-side-detail-row{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid rgba(22,29,43,.04);}
.md-side-detail-row:last-child{border-bottom:none;}
.md-side-detail-role{font:400 12.5px 'Hanken Grotesk';color:#95a0ae;flex:none;}
.md-side-detail-val{font:600 12.5px 'Hanken Grotesk';color:#161D2B;text-align:right;}

/* ── Sidebar ── */
.md-side{position:sticky;top:24px;display:flex;flex-direction:column;gap:16px;margin-top:24px;}
.md-side-card{
  background:#fff;border:1px solid rgba(22,29,43,.06);border-radius:18px;
  overflow:hidden;box-shadow:0 2px 8px rgba(22,29,43,.05);
}
.md-friend-avg{padding:18px;}
.md-friend-avg-top{display:flex;align-items:center;gap:12px;margin-bottom:15px;}
.md-friend-avg-score{
  background:#F0F5FF;border-radius:13px;padding:8px 14px;
  display:flex;align-items:baseline;gap:3px;flex:none;
}
.md-friend-avg-num{font:800 26px 'Hanken Grotesk';color:#2C6FD6;line-height:1;}
.md-friend-avg-max{font:600 12px 'Hanken Grotesk';color:#7aabf0;}
.md-friend-avg-lbl{font:700 13px 'Hanken Grotesk';color:#161D2B;}
.md-friend-avg-sub{font:400 12px 'Hanken Grotesk';color:#95a0ae;}
.md-friend-avg-bottom{
  display:flex;align-items:center;gap:11px;
  border-top:1px solid rgba(22,29,43,.06);padding-top:14px;
}
.md-friend-avg-avatars{display:flex;padding-left:8px;}
.md-friend-avg-av{
  width:32px;height:32px;border-radius:50%;
  font:700 12px 'Hanken Grotesk';
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  border:2px solid #fff;margin-left:-8px;
}
.md-friend-avg-av:first-child{margin-left:0;}
.md-friend-avg-av img{width:100%;height:100%;object-fit:cover;}
.md-friend-avg-count{font:600 13px 'Hanken Grotesk';color:#3d4452;}

/* ── At a glance ── */
.md-glance{padding:16px 18px;}
.md-glance-hd{font:600 12px 'JetBrains Mono';letter-spacing:.08em;text-transform:uppercase;color:#95a0ae;margin-bottom:12px;}
.md-glance-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.md-glance-grid.cols-3{grid-template-columns:repeat(3,1fr);}
.md-glance-cell{
  background:#F6F8FC;border:1px solid rgba(22,29,43,.05);border-radius:12px;
  padding:12px 10px;min-width:0;
}
.md-glance-num{font:700 20px 'Hanken Grotesk';color:#161D2B;line-height:1;}
.md-glance-num.accent{color:#2C6FD6;}
.md-glance-lbl{font:500 11px 'Hanken Grotesk';color:#95a0ae;margin-top:4px;line-height:1.25;}

.md-breakdown{padding:16px 18px;}
.md-breakdown-hd,.md-side-details-hd,.md-related-hd{
  font:600 12px 'JetBrains Mono';letter-spacing:.08em;text-transform:uppercase;color:#95a0ae;margin-bottom:14px;
}
.md-break-row{margin-bottom:10px;}
.md-break-row:last-child{margin-bottom:0;}
.md-break-top{display:flex;justify-content:space-between;margin-bottom:4px;}
.md-break-lbl{font:500 12px 'Hanken Grotesk';color:#5c6470;}
.md-break-val{font:700 12px 'Hanken Grotesk';color:#161D2B;}
.md-break-bar{height:6px;background:#F0F2F7;border-radius:4px;overflow:hidden;}
.md-break-fill{height:100%;background:#2C6FD6;border-radius:4px;}

.md-side-details{padding:16px 18px;}
.md-related{padding:16px 18px;}
.md-rel-item{display:flex;gap:10px;align-items:center;padding:0 0 10px;margin-bottom:10px;border-bottom:1px solid rgba(22,29,43,.04);}
.md-rel-item:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0;}
.md-rel-img{width:34px;height:48px;border-radius:7px;object-fit:cover;flex-shrink:0;background:var(--md-poster-bg,#EEF4FF);}
.md-rel-img-ph{
  width:34px;height:48px;border-radius:7px;flex-shrink:0;
  background:var(--md-poster-bg,#EEF4FF);
  background-image:repeating-linear-gradient(135deg,var(--md-accent-lite,#DEE7F4) 0,var(--md-accent-lite,#DEE7F4) 5px,var(--md-accent-mid,#CBD9EE) 5px,var(--md-accent-mid,#CBD9EE) 10px);
  display:flex;align-items:center;justify-content:center;color:#2C6FD6;
}
.md-rel-body{flex:1;min-width:0;}
.md-rel-name{font:600 13px 'Hanken Grotesk';color:#161D2B;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.md-rel-sub{font:400 11px 'Hanken Grotesk';color:#95a0ae;}
.md-rel-rate{font:700 13px 'Hanken Grotesk';color:#2C6FD6;flex:none;}

.s-foot{border-top:1px solid rgba(22,29,43,.08);padding:20px 40px;background:#F6F8FC;}
.s-foot-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;}
.s-foot-logo{display:flex;align-items:center;gap:8px;}
.s-foot-mark{width:22px;height:22px;border-radius:50%;background:#2C6FD6;display:flex;align-items:center;justify-content:center;font:700 11px 'Newsreader';color:#fff;}
.s-foot-name{font:600 16px 'Newsreader';color:#161D2B;}
.s-foot-links{display:flex;gap:18px;}
.s-foot-links a{font:500 12.5px 'Hanken Grotesk';color:#7d8593;}
.s-foot-copy{font:400 12px 'Hanken Grotesk';color:#aab4c1;}

.bnav{display:none;}
body.md-film{
  --md-backdrop-a:#C9D8EE;
  --md-backdrop-b:#B8CBE6;
  --md-accent-lite:#DEE7F4;
  --md-accent-mid:#CBD9EE;
  --md-accent-deep:#3a6bb5;
  --md-banner-icon:rgba(58,107,181,.16);
  --md-poster-bg:#EEF4FF;
}
body.md-book{
  --md-backdrop-a:#F0E6D2;
  --md-backdrop-b:#E6D7BC;
  --md-accent-lite:#F3E8D8;
  --md-accent-mid:#E8D6B8;
  --md-accent-deep:#9a7836;
  --md-banner-icon:rgba(154,120,54,.16);
  --md-poster-bg:#F7EAD4;
}

@media(min-width:768px){.h-nav{display:none;}}
@media(max-width:960px){
  .md-layout{grid-template-columns:1fr;padding:0 20px 28px;}
  .md-side{position:static;margin-top:0;}
  .md-hero-strip{margin:0 -20px 0;}
}
@media(max-width:720px){
  .md-hero-row{flex-direction:column;align-items:flex-start;margin-top:-48px;}
  .md-glance-grid.cols-3{grid-template-columns:1fr 1fr;}
  .md-poster{width:120px;}
  .md-detail-head .md-title,.md-hero-info .md-title{font-size:22px;}
  .md-hero-actions{flex-direction:column;align-items:flex-start;}
  .md-status-row{justify-content:flex-start;}
}
@media(max-width:640px){
  .md-poster{width:160px;max-width:100%;}
  .s-foot{display:none;}
  .app-body{padding-bottom:84px;}
  .bnav{display:flex;position:fixed;bottom:0;left:0;right:0;height:84px;border-top:1px solid rgba(22,29,43,.08);background:rgba(246,248,252,.96);align-items:center;justify-content:space-around;padding:0 20px calc(18px + env(safe-area-inset-bottom,0px));z-index:50;}
  .bnav-link{display:flex;align-items:center;justify-content:center;padding:4px;color:#95a0ae;}
  .bnav-link.on{color:#2C6FD6;}
  .bnav-fab{width:54px;height:54px;border-radius:50%;background:#2C6FD6;border:none;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(44,111,214,.35);margin-top:-22px;cursor:pointer;flex-shrink:0;}
}