/* Manhwa Index — MangaLek bulk importer + shared work genre editor */
.mangalek-import-shell{display:grid;gap:16px}
.mangalek-import-card{border:1px solid var(--line);border-radius:22px;background:var(--surface);padding:18px;display:grid;gap:15px}
.mangalek-import-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.mangalek-import-head>div{display:grid;gap:5px}
.mangalek-import-head span{font-size:8px;color:var(--muted);letter-spacing:.12em}
.mangalek-import-head h2{font-size:18px;margin:0}
.mangalek-import-head p{font-size:9px;color:var(--muted);line-height:1.8;margin:0;max-width:760px}
.mangalek-controls{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:10px;align-items:end}
.mangalek-controls label{display:grid;gap:6px}
.mangalek-controls label>span{font-size:8px;color:var(--muted)}
.mangalek-controls select,.mangalek-controls input{width:100%;border:1px solid var(--line);border-radius:13px;background:var(--surface2);color:var(--text);padding:11px;font-size:10px;outline:none}
.mangalek-options{display:flex;flex-wrap:wrap;gap:9px}
.mangalek-options label{display:flex;align-items:center;gap:7px;padding:9px 11px;border:1px solid var(--line);border-radius:999px;background:var(--surface2);font-size:9px}
.mangalek-actions{display:flex;flex-wrap:wrap;gap:9px}
.mangalek-actions button:disabled{opacity:.5;cursor:not-allowed}
.mangalek-results-toolbar{display:flex;justify-content:space-between;gap:12px;align-items:center}
.mangalek-results-toolbar>div{display:flex;gap:8px;flex-wrap:wrap}
.mangalek-results-toolbar small{color:var(--muted);font-size:8px}
.mangalek-result-list{display:grid;gap:8px;max-height:720px;overflow:auto;padding-inline-end:3px}
.mangalek-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:11px;align-items:center;border:1px solid var(--line);border-radius:15px;padding:11px;background:var(--surface2)}
.mangalek-row input{width:17px;height:17px}
.mangalek-row h3{font-size:10px;margin:0 0 3px}
.mangalek-row p{font-size:8px;color:var(--muted);margin:0;direction:ltr;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mangalek-row-state{font-size:8px;font-weight:800;white-space:nowrap}
.mangalek-row[data-state="success"] .mangalek-row-state{color:#2e9c66}
.mangalek-row[data-state="error"] .mangalek-row-state{color:var(--danger)}
.mangalek-row[data-state="skip"] .mangalek-row-state{color:var(--muted)}
.mangalek-progress{height:7px;border-radius:999px;background:var(--surface2);overflow:hidden;border:1px solid var(--line)}
.mangalek-progress>i{display:block;height:100%;width:0;background:var(--accent);transition:width .2s ease}
.mangalek-source-note{font-size:8px;color:var(--muted);line-height:1.8;padding:11px 13px;border:1px dashed var(--line);border-radius:14px}

.work-genre-preference-editor{grid-column:1/-1;display:grid;gap:10px;margin-top:11px}
.work-genre-preference-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.work-genre-preference-head>div{display:grid;gap:3px}
.work-genre-preference-head strong{font-size:9px}
.work-genre-preference-head small{font-size:8px;color:var(--muted);line-height:1.6}
#workGenrePreferenceCount{white-space:nowrap;font-size:8px;color:var(--muted)}
.work-genre-preference-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.work-genre-preference-choice{position:relative;display:block;min-width:0}
.work-genre-preference-choice input{position:absolute;opacity:0;pointer-events:none}
.work-genre-preference-choice span{min-height:42px;display:flex;align-items:center;justify-content:center;gap:7px;padding:9px 8px;border:1px solid var(--line);border-radius:12px;background:var(--surface2);font-size:8px;font-weight:700;text-align:center;cursor:pointer;transition:.18s ease}
.work-genre-preference-choice span svg{width:16px;height:16px;flex:0 0 16px;stroke:currentColor;fill:none}
.work-genre-preference-choice input:checked+span{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--surface2));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 28%,transparent)}
.work-genre-preference-choice input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.work-genre-original-field{display:none!important}

@media(max-width:900px){
  .mangalek-controls{grid-template-columns:1fr 1fr}
  .mangalek-import-head{flex-direction:column}
  .work-genre-preference-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:620px){
  .work-genre-preference-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .work-genre-preference-head{align-items:flex-start;flex-direction:column}
}
@media(max-width:560px){
  .mangalek-controls{grid-template-columns:1fr}
  .mangalek-row{grid-template-columns:auto minmax(0,1fr)}
  .mangalek-row-state{grid-column:2}
  .mangalek-results-toolbar{align-items:flex-start;flex-direction:column}
}

.mangalek-admin-shortcut{width:100%;margin:18px 0 10px;border:1px solid rgba(139,92,246,.35);border-radius:18px;background:linear-gradient(135deg,var(--surface),var(--surface2));color:var(--text);padding:16px 18px;display:grid;grid-template-columns:auto auto 1fr;gap:10px;align-items:center;text-align:right;box-shadow:0 12px 34px rgba(0,0,0,.12)}
.mangalek-admin-shortcut span{font-size:7px;color:var(--accent2);white-space:nowrap}.mangalek-admin-shortcut strong{font:800 15px Arial;letter-spacing:.2px}.mangalek-admin-shortcut small{font-size:7px;color:var(--muted);justify-self:start}.mangalek-admin-shortcut:hover{border-color:var(--accent);transform:translateY(-1px)}
@media(max-width:740px){.mangalek-admin-shortcut{grid-template-columns:1fr auto;gap:5px 10px}.mangalek-admin-shortcut small{grid-column:1/-1;justify-self:stretch}.admin-tabs{scrollbar-width:thin}.admin-tabs [data-admin-tab="mangalek"]{order:-1;position:sticky;right:0;z-index:2;box-shadow:0 0 0 1px var(--line)}}

.unified-import-shortcut{width:100%;margin:18px 0 4px;border:1px solid rgba(34,197,185,.35);border-radius:18px;background:linear-gradient(135deg,rgba(34,197,185,.12),rgba(139,92,246,.10));color:var(--text);padding:17px 19px;text-align:right;display:grid;gap:4px}
.unified-import-shortcut span{font-size:7px;color:var(--accent2);letter-spacing:.6px}.unified-import-shortcut strong{font-size:17px}.unified-import-shortcut small{font-size:7px;color:var(--muted);line-height:1.8}
.unified-import-shell{display:grid;gap:16px}.unified-card{border:1px solid var(--line);border-radius:20px;background:var(--surface);padding:20px}.unified-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.unified-head h2{margin:5px 0 7px;font-size:22px}.unified-head p{margin:0;color:var(--muted);font-size:8px;line-height:1.9;max-width:760px}.unified-badge{border:1px solid rgba(34,197,185,.32);background:rgba(34,197,185,.09);color:var(--accent2);border-radius:99px;padding:8px 11px;font-size:7px;white-space:nowrap}
.unified-diagnostics{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:15px 0}.unified-source{border:1px solid var(--line);border-radius:13px;padding:10px;background:var(--surface2);display:grid;gap:4px}.unified-source strong{font-size:8px}.unified-source small{font-size:6px;color:var(--muted)}.unified-source.ok{border-color:rgba(130,230,170,.38)}.unified-source.bad{border-color:rgba(255,101,119,.38)}
.unified-controls{display:grid;grid-template-columns:1.3fr .8fr .8fr auto;gap:9px;align-items:end;margin-top:14px}.unified-controls label{display:grid;gap:6px}.unified-controls label span{font-size:7px;color:var(--muted)}.unified-controls select,.unified-controls input{width:100%;border:1px solid var(--line);border-radius:11px;background:var(--surface2);color:var(--text);padding:11px;font-size:8px;outline:0}.unified-search-row{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:10px}.unified-search-row input{border:1px solid var(--line);border-radius:11px;background:var(--surface2);color:var(--text);padding:11px;font-size:8px;outline:0}
.unified-options{display:flex;gap:14px;flex-wrap:wrap;margin:12px 0;font-size:7px;color:var(--muted)}.unified-options label{display:flex;gap:6px;align-items:center}.unified-progress{height:5px;border-radius:99px;background:var(--surface2);overflow:hidden;margin:10px 0}.unified-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .25s}.unified-toolbar{display:flex;justify-content:space-between;gap:10px;align-items:center;margin:12px 0}.unified-toolbar>div{display:flex;gap:7px;flex-wrap:wrap}.unified-toolbar small{font-size:7px;color:var(--muted)}
.unified-result-list{display:grid;gap:8px}.unified-result{display:grid;grid-template-columns:auto 64px 1fr auto;gap:10px;align-items:center;border:1px solid var(--line);border-radius:14px;background:var(--surface2);padding:9px}.unified-result img{width:64px;height:86px;object-fit:cover;border-radius:9px;background:var(--surface3)}.unified-result h3{font-size:9px;margin:0 0 4px}.unified-result p{font-size:7px;color:var(--muted);margin:0;line-height:1.7;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.unified-meta{display:flex;gap:5px;flex-wrap:wrap;margin-top:5px}.unified-meta span{font-size:6px;border:1px solid var(--line);border-radius:99px;padding:3px 6px;color:var(--muted)}.unified-state{font-size:7px;max-width:120px;text-align:center}.unified-state.success{color:var(--success)}.unified-state.error{color:var(--danger)}.unified-state.skip{color:var(--muted)}
.unified-import-actions{display:flex;justify-content:flex-end;margin-top:12px}.unified-credit{font-size:6px;color:var(--muted);line-height:1.8;margin-top:12px}
@media(max-width:740px){.unified-head{display:grid}.unified-diagnostics{grid-template-columns:1fr 1fr}.unified-controls{grid-template-columns:1fr 1fr}.unified-controls button{grid-column:1/-1}.unified-result{grid-template-columns:auto 52px 1fr}.unified-result img{width:52px;height:72px}.unified-state{grid-column:3}.unified-toolbar{align-items:flex-start;display:grid}.unified-search-row{grid-template-columns:1fr}.unified-search-row button{width:100%}}

.unified-import-actions-top{position:sticky;top:8px;z-index:35;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0 14px;padding:11px 12px;border:1px solid rgba(34,197,185,.35);border-radius:15px;background:color-mix(in srgb,var(--surface) 94%,transparent);box-shadow:0 12px 35px rgba(0,0,0,.16);backdrop-filter:blur(12px)}
.unified-import-actions-top.hidden{display:none}.unified-import-actions-top>div{display:grid;gap:3px}.unified-import-actions-top strong{font-size:9px}.unified-import-actions-top small{font-size:7px;color:var(--muted)}.unified-import-actions-top .ink-button{min-width:190px}
@media(max-width:740px){.unified-import-actions-top{top:6px;display:grid}.unified-import-actions-top.hidden{display:none}.unified-import-actions-top .ink-button{width:100%;min-width:0;padding:14px}}

.unified-result.match-confirmed{border-color:rgba(46,204,113,.35)}
.unified-result.match-strong{border-color:rgba(34,197,185,.30)}
.unified-result.match-review{border-color:rgba(245,158,11,.38)}
.unified-result.match-weak{border-color:rgba(239,68,68,.28)}
.unified-aliases{display:block;margin:-1px 0 5px;color:var(--muted);font-size:6px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.unified-meta .match-badge.confirmed{color:var(--success);border-color:rgba(46,204,113,.35)}
.unified-meta .match-badge.strong{color:var(--accent2);border-color:rgba(34,197,185,.35)}
.unified-meta .match-badge.review{color:#f59e0b;border-color:rgba(245,158,11,.40)}
.unified-meta .match-badge.weak{color:var(--danger);border-color:rgba(239,68,68,.30)}
.unified-state.review{color:#f59e0b}

/* Stable Importer v8 — direct URL/ID resolver */
.stable-direct-resolver{margin:14px 0;padding:14px;border:1px solid var(--line,#d9dde7);border-radius:16px;background:var(--surface,#fff);display:grid;gap:10px}
.stable-direct-resolver>div{display:grid;gap:3px}.stable-direct-resolver small{opacity:.72}
.stable-direct-form{display:grid;grid-template-columns:minmax(120px,.5fr) minmax(0,2fr) auto;gap:8px;align-items:center}
.stable-direct-form select,.stable-direct-form input{width:100%;min-height:44px;border:1px solid var(--line,#d9dde7);border-radius:12px;padding:10px 12px;background:var(--surface,#fff);color:inherit}
@media(max-width:720px){.stable-direct-form{grid-template-columns:1fr}.stable-direct-form button{width:100%}}



/* ===== style-1 ===== */
:root{--bg:#090d14;--surface:#111722;--surface2:#171f2d;--surface3:#202a39;--text:#f6f8fc;--muted:#8e99ab;--line:rgba(255,255,255,.09);--accent:#8b5cf6;--accent2:#22c5b9;--danger:#ff6577;--success:#82e6aa;--shadow:0 28px 70px rgba(0,0,0,.34);--radius:22px;--header:76px}body.light{--bg:#f4f6fa;--surface:#fff;--surface2:#eef1f6;--surface3:#e5e9f1;--text:#111725;--muted:#697386;--line:rgba(17,23,37,.1);--shadow:0 26px 65px rgba(42,48,62,.12)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:"Droid Arabic Kufi","DroidArabicKufiRegular",Tahoma,Arial,sans-serif;min-height:100vh;overflow-x:hidden}button,input,select,textarea{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}.hidden{display:none!important}.ambient{position:fixed;width:480px;height:480px;border-radius:50%;filter:blur(130px);opacity:.12;pointer-events:none;z-index:-1}.ambient-one{background:var(--accent);right:-180px;top:-180px}.ambient-two{background:var(--accent2);left:-200px;bottom:-220px}.site-header{height:var(--header);position:sticky;top:0;z-index:60;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 4vw;border-bottom:1px solid var(--line);background:rgba(9,13,20,.88);backdrop-filter:blur(18px)}body.light .site-header{background:rgba(244,246,250,.88)}.brand{display:flex;align-items:center;gap:12px;justify-self:end}.brand-mark{width:43px;height:43px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),#5eead4);color:#fff;font:800 12px Arial;box-shadow:0 10px 28px rgba(139,92,246,.25)}.brand strong,.brand small{display:block}.brand strong{font-size:15px}.brand small{font-size:7px;color:var(--muted);margin-top:4px}.desktop-nav{display:flex;align-items:center;gap:4px}.desktop-nav button{border:0;background:transparent;color:var(--muted);padding:10px 14px;border-radius:12px;font-size:9px}.desktop-nav button:hover,.desktop-nav button.active{background:var(--surface2);color:var(--text)}.header-actions{justify-self:start;display:flex;align-items:center;gap:8px}.icon-button{width:42px;height:42px;border:1px solid var(--line);border-radius:13px;background:var(--surface);color:var(--text)}.profile-button{height:44px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--text);display:flex;align-items:center;gap:9px;padding:4px 5px 4px 13px;font-size:8px}.avatar{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),#34d399);color:white;font-weight:800}.search-overlay{position:fixed;inset:0;z-index:120;background:rgba(5,8,13,.94);backdrop-filter:blur(18px);display:grid;place-items:center;padding:25px}.search-overlay>div{width:min(850px,92vw);display:grid;gap:12px}.search-overlay input{width:100%;border:0;border-bottom:2px solid var(--accent);background:transparent;color:white;padding:18px 0;font-size:clamp(26px,5vw,58px);outline:0}.search-overlay small{color:#9ca3af;font-size:8px}.close-button{position:absolute;top:22px;left:22px;width:44px;height:44px;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:#141a24;color:white;font-size:22px}.view{display:none;padding:0 4vw 90px}.view.active{display:block;animation:viewIn .42s ease}@keyframes viewIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}.hero-shell{min-height:610px;margin-top:26px;border:1px solid var(--line);border-radius:32px;background:linear-gradient(135deg,var(--surface),rgba(23,31,45,.75));display:grid;grid-template-columns:1fr .88fr;align-items:center;gap:35px;padding:55px 6%;overflow:hidden;position:relative}.hero-shell:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 18% 18%,rgba(139,92,246,.2),transparent 32%),radial-gradient(circle at 85% 80%,rgba(34,197,185,.12),transparent 25%);pointer-events:none}.hero-content,.featured-card{position:relative;z-index:2}.eyebrow{font-size:8px;color:var(--accent2);letter-spacing:.8px;font-weight:700}.hero-content h1{font-size:clamp(44px,6.5vw,88px);line-height:1.25;letter-spacing:-3px;margin:17px 0}.hero-content h1 em{font-style:normal;color:#a78bfa}.hero-content>p{max-width:630px;color:var(--muted);font-size:11px;line-height:2.1}.button-row,.detail-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:24px}.primary-button,.secondary-button,.follow-button,.text-button,.back-button{border-radius:13px;padding:12px 18px;font-size:9px;font-weight:700}.primary-button{border:0;background:linear-gradient(135deg,var(--accent),#6d5dfc);color:white;box-shadow:0 12px 30px rgba(139,92,246,.22)}.secondary-button,.follow-button,.back-button{border:1px solid var(--line);background:var(--surface2);color:var(--text)}.follow-button.following,.primary-button.following{background:var(--success);color:#07150e;box-shadow:none}.text-button{border:0;background:transparent;color:var(--muted);padding-inline:0}.hero-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:35px}.hero-badges span,.count-pill{border:1px solid var(--line);border-radius:99px;padding:7px 10px;font-size:7px;color:var(--muted);background:rgba(255,255,255,.025)}.featured-card{display:grid;grid-template-columns:240px 1fr;gap:0;background:var(--surface2);border:1px solid var(--line);border-radius:25px;overflow:hidden;box-shadow:var(--shadow)}.featured-cover{height:390px;position:relative}.featured-cover img{width:100%;height:100%;object-fit:cover}.score-badge{position:absolute;bottom:13px;right:13px;background:#0b1020;color:#d8ff6e;border:1px solid rgba(255,255,255,.15);padding:8px 10px;border-radius:11px;font:800 15px Arial}.featured-copy{padding:34px 25px;display:flex;flex-direction:column;justify-content:center}.muted-label{font-size:8px;color:var(--muted)}.featured-copy h2{font-size:27px;margin:13px 0 10px}.featured-copy p{font-size:9px;line-height:1.9;color:var(--muted)}.content-section{padding-top:75px}.section-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:23px}.section-heading h2{font-size:29px;margin:7px 0 0}.ranked-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.ranked-card{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--surface);cursor:pointer;position:relative;transition:.25s}.ranked-card:hover,.poster-card:hover,.collection-card:hover,.collection-editorial-card:hover{transform:translateY(-5px);border-color:rgba(139,92,246,.38)}.ranked-card img{width:100%;height:230px;object-fit:cover}.rank-number{position:absolute;top:10px;right:10px;background:rgba(9,13,20,.82);border:1px solid rgba(255,255,255,.13);padding:6px 8px;border-radius:10px;font:700 10px Arial}.ranked-copy{padding:15px}.ranked-copy h3{font-size:11px;margin:0 0 7px}.ranked-copy p{font-size:7px;color:var(--muted);margin:0}.ranked-copy strong{display:block;margin-top:10px;color:#c4ff75;font:800 16px Arial}.poster-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}.poster-card{cursor:pointer;min-width:0;transition:.25s}.poster-cover{aspect-ratio:5/7;border-radius:20px;overflow:hidden;position:relative;background:var(--surface2);border:1px solid var(--line)}.poster-cover img{width:100%;height:100%;object-fit:cover;transition:.45s}.poster-card:hover .poster-cover img{transform:scale(1.05)}.poster-score{position:absolute;bottom:9px;right:9px;background:rgba(9,13,20,.86);color:#d8ff6e;padding:6px 8px;border-radius:9px;font:800 10px Arial}.poster-actions{position:absolute;top:9px;left:9px}.poster-actions button,.inline-follow{width:34px;height:34px;border:1px solid rgba(255,255,255,.2);border-radius:11px;background:rgba(9,13,20,.74);color:#fff}.poster-actions button.following,.inline-follow.following{background:var(--success);color:#07150e}.poster-copy{padding:12px 3px}.poster-copy span{font-size:7px;color:var(--accent2)}.poster-copy h3{font-size:10px;margin:6px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.poster-copy p{font-size:7px;color:var(--muted);margin:0}.collections-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.compact-grid{grid-template-columns:repeat(4,1fr)}.collection-card,.collection-editorial-card{border:1px solid var(--line);border-radius:22px;background:var(--surface);overflow:hidden;cursor:pointer;position:relative;transition:.25s}.collection-card-cover{height:190px;position:relative;overflow:hidden;background:var(--surface2)}.collection-card-cover img{width:100%;height:100%;object-fit:cover;transition:.45s}.collection-card:hover img,.collection-editorial-card:hover img{transform:scale(1.05)}.inline-follow{position:absolute;top:11px;left:11px;z-index:2}.collection-card-copy{padding:17px}.collection-card-copy h3{font-size:11px;margin:0 0 8px}.collection-card-copy p{font-size:7px;line-height:1.8;color:var(--muted);min-height:40px}.collection-card-meta{display:flex;justify-content:space-between;font-size:7px;color:var(--accent2);margin-top:12px}.page-head{padding:65px 0 32px;border-bottom:1px solid var(--line)}.page-head h1{font-size:clamp(37px,6vw,68px);margin:10px 0}.page-head p{font-size:9px;line-height:1.9;color:var(--muted)}.catalog-tabs,.following-tabs,.admin-tabs{display:flex;gap:7px;margin-top:27px;overflow:auto}.catalog-tabs button,.following-tabs button,.admin-tabs button,.library-state-tabs button{border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--muted);padding:10px 14px;font-size:8px;white-space:nowrap}.catalog-tabs button.active,.following-tabs button.active,.admin-tabs button.active,.library-state-tabs button.active{background:var(--accent);color:white;border-color:var(--accent)}.filter-bar{display:grid;grid-template-columns:1.7fr repeat(3,1fr);gap:10px;margin-top:22px;padding:14px;border:1px solid var(--line);border-radius:18px;background:var(--surface)}.filter-bar label{display:grid;gap:7px}.filter-bar label>span{font-size:7px;color:var(--muted)}.filter-bar input,.filter-bar select{border:1px solid var(--line);border-radius:11px;background:var(--surface2);color:var(--text);padding:11px;outline:0;width:100%;font-size:8px}.search-field{display:flex!important;align-items:center}.search-field>span{font-size:18px!important}.results-line{display:flex;justify-content:flex-end;align-items:end;gap:7px;padding:17px 0}.results-line span{font-size:7px;color:var(--muted)}.results-line strong{font:800 25px Arial}.api-search-card{display:grid;grid-template-columns:1fr 1.3fr;gap:22px;align-items:end;margin-top:23px;padding:23px;border:1px solid var(--line);border-radius:20px;background:var(--surface)}.api-search-card h2{font-size:22px;margin:7px 0}.api-search-card p{font-size:8px;color:var(--muted)}.api-search-card label{display:flex}.api-search-card input{flex:1;border:1px solid var(--line);border-radius:13px 0 0 13px;background:var(--surface2);color:var(--text);padding:12px;outline:0}.api-search-card button{border-radius:0 13px 13px 0}.inline-status{padding:12px 2px;font-size:8px;color:var(--muted)}.inline-status.error{color:var(--danger)}.inline-status.success{color:#111}.inline-status.loading{color:var(--accent2)}.pagination{display:flex;justify-content:center;align-items:center;gap:13px;margin-top:25px;font-size:8px}.empty-state{text-align:center;border:1px dashed var(--line);border-radius:20px;padding:65px 20px;margin-top:25px}.empty-state h3{font-size:20px}.empty-state p{font-size:8px;color:var(--muted)}.detail-view{padding-top:24px}.back-button{margin-bottom:16px}.work-hero{min-height:580px;border:1px solid var(--line);border-radius:28px;overflow:hidden;position:relative;background:var(--surface2) center/cover no-repeat;display:grid;grid-template-columns:300px 1fr;gap:38px;padding:42px}.work-hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,13,20,.96) 30%,rgba(9,13,20,.75),rgba(9,13,20,.92)),linear-gradient(0deg,rgba(9,13,20,.92),transparent);backdrop-filter:blur(24px)}.work-cover-column,.work-summary{position:relative;z-index:2}.work-main-cover{width:100%;aspect-ratio:5/7;object-fit:cover;border-radius:19px;box-shadow:var(--shadow)}.thumb-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:10px}.thumb-gallery img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:9px;cursor:pointer;border:1px solid rgba(255,255,255,.12)}.work-summary{align-self:center}.status-pill{display:inline-block;border:1px solid rgba(255,255,255,.16);border-radius:99px;background:rgba(255,255,255,.06);padding:7px 10px;font-size:7px;color:#c9f8ed}.work-summary h1{font-size:clamp(38px,6vw,72px);line-height:1.25;margin:14px 0}.alt-titles{font-size:8px;color:#9ba5b5}.tag-row{display:flex;gap:6px;flex-wrap:wrap;margin:18px 0}.tag-row span{border:1px solid rgba(255,255,255,.12);border-radius:99px;padding:6px 9px;font-size:7px;color:#aab5c6}.work-description{font-size:10px;line-height:2.05;color:#b2bbca;max-width:780px}.work-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:27px}.work-meta div{padding:13px;border:1px solid rgba(255,255,255,.1);border-radius:13px;background:rgba(255,255,255,.045)}.work-meta span,.work-meta strong{display:block}.work-meta span{font-size:7px;color:#9aa5b5}.work-meta strong{font-size:13px;margin-top:6px}.site-rating-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.site-rating-pill{border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:8px 11px;background:rgba(255,255,255,.04);font-size:7px}.site-rating-pill strong{color:#d8ff6e;margin-right:6px}.detail-layout{display:grid;grid-template-columns:1fr 270px;gap:22px;margin-top:22px}.detail-main{display:grid;gap:18px}.detail-side{min-width:0}.review-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.review-card,.editor-note,.community-card,.comments-card,.side-card{border:1px solid var(--line);border-radius:20px;background:var(--surface);padding:21px}.review-card>span,.editor-note>span{font-size:8px;color:var(--accent2)}.review-card>div>div{font-size:8px;color:var(--muted);padding-right:14px;position:relative;line-height:1.8;margin-top:9px}.review-card>div>div:before{content:"";position:absolute;right:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--danger)}.review-card.positive>div>div:before{background:var(--success)}.editor-note p{font-size:9px;line-height:1.9;color:var(--muted)}.community-head,.comments-head{display:flex;justify-content:space-between;align-items:end}.community-head h2,.comments-head h2{font-size:20px;margin:6px 0}.community-head>div:last-child{text-align:left}.community-head strong,.community-head small{display:block}.community-head strong{font:800 32px Arial}.community-head small{font-size:7px;color:var(--muted)}.rating-scale{display:grid;grid-template-columns:repeat(10,1fr);gap:5px;margin-top:16px}.rating-scale button{height:39px;border:1px solid var(--line);border-radius:9px;background:var(--surface2);color:var(--muted);font:700 9px Arial}.rating-scale button:hover,.rating-scale button.active{background:var(--success);color:#06130c}.comments-head select{border:1px solid var(--line);border-radius:10px;background:var(--surface2);color:var(--text);padding:8px;font-size:7px}.comment-composer{display:flex;gap:10px;margin:17px 0}.comment-composer label{flex:1;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface2)}.comment-composer textarea{width:100%;border:0;background:transparent;color:var(--text);padding:12px;outline:0;resize:vertical}.comment-composer label>span{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding:8px}.comment-composer small{font-size:7px;color:var(--muted)}.comment-composer button{padding:8px 12px}.comments-list{display:grid;gap:9px}.comment-card{display:grid;grid-template-columns:40px 1fr auto;gap:10px;padding:13px;border:1px solid var(--line);border-radius:14px;background:var(--surface2)}.comment-card h4{font-size:8px;margin:0}.comment-card time{font-size:6px;color:var(--muted)}.comment-card p{font-size:8px;line-height:1.8;color:var(--muted)}.comment-delete{border:0;background:transparent;color:var(--danger);font-size:7px}.comment-empty{text-align:center;padding:22px;color:var(--muted);font-size:8px}.side-card{position:sticky;top:96px}.detail-collection-links{display:grid;gap:8px;margin-top:12px}.detail-collection-link{border:1px solid var(--line);border-radius:12px;background:var(--surface2);color:var(--text);padding:11px;text-align:right;font-size:8px}.collection-hero{min-height:430px;border:1px solid var(--line);border-radius:28px;background:var(--surface);display:grid;grid-template-columns:380px 1fr;gap:35px;padding:27px}.collection-hero-cover{min-height:370px;border-radius:21px;background:var(--surface2) center/cover no-repeat}.collection-hero-content{align-self:center}.collection-icon{font-size:34px}.collection-hero-content h1{font-size:clamp(36px,5vw,62px);margin:14px 0}.collection-hero-content p{max-width:700px;font-size:10px;line-height:2;color:var(--muted)}.following-tabs{margin-bottom:21px}.follow-panel{padding-top:5px}.library-state-tabs{display:flex;gap:7px;margin-bottom:13px}.reading-list{display:grid;gap:9px}.reading-item{display:grid;grid-template-columns:62px 1fr 150px auto;align-items:center;gap:13px;border:1px solid var(--line);border-radius:15px;background:var(--surface);padding:9px}.reading-item img{width:62px;height:82px;object-fit:cover;border-radius:11px}.reading-item h3{font-size:9px}.reading-item p{font-size:7px;color:var(--muted)}.reading-item select{border:1px solid var(--line);border-radius:10px;background:var(--surface2);color:var(--text);padding:9px;font-size:7px}.reading-item>button{border:0;background:transparent;color:var(--danger);font-size:18px}.admin-dashboard{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:15px}.admin-dashboard article{border:1px solid var(--line);border-radius:17px;background:var(--surface);padding:18px}.admin-dashboard span,.admin-dashboard strong{display:block}.admin-dashboard span{font-size:7px;color:var(--muted)}.admin-dashboard strong{font:800 25px Arial;margin-top:8px}.admin-panel{display:none;padding-top:20px}.admin-panel.active{display:block}.manager-toolbar{display:flex;justify-content:space-between;gap:10px;margin-bottom:12px}.manager-toolbar label{display:flex;align-items:center;gap:8px;min-width:300px;border:1px solid var(--line);border-radius:13px;background:var(--surface);padding:9px}.manager-toolbar input{border:0;background:transparent;color:var(--text);outline:0;width:100%}.admin-works-list,.manage-collections-list{display:grid;gap:8px}.admin-work-row,.manage-collection-row{display:grid;grid-template-columns:65px 1fr 100px 160px;align-items:center;gap:12px;border:1px solid var(--line);border-radius:15px;background:var(--surface);padding:9px}.admin-work-row img,.manage-collection-row img{width:65px;height:82px;object-fit:cover;border-radius:10px}.admin-work-row h3,.manage-collection-row h3{font-size:9px}.admin-work-row p{font-size:7px;color:var(--muted)}.row-actions{display:flex;gap:6px}.row-actions button{border:1px solid var(--line);border-radius:9px;background:var(--surface2);color:var(--text);padding:8px;font-size:7px}.row-actions .delete{color:var(--danger)}.editor-shell{border:1px solid var(--line);border-radius:20px;background:var(--surface);overflow:hidden}.editor-topline{display:flex;justify-content:space-between;align-items:center;padding:21px;border-bottom:1px solid var(--line)}.editor-topline h2{font-size:21px;margin:6px 0}.editor-topline span,.block-heading p{font-size:7px;color:var(--muted)}.editor-block{display:grid;grid-template-columns:60px 1fr;border-bottom:1px solid var(--line)}.editor-number{display:grid;place-items:start center;padding-top:23px;border-left:1px solid var(--line);color:var(--accent);font:800 17px Arial}.editor-block-content{padding:22px}.block-heading h3{font-size:13px;margin:0 0 5px}.modern-form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.modern-form-grid label,.wide-field,.url-field,.pros-cons-grid label{display:grid;gap:7px}.modern-form-grid span,.wide-field span,.url-field span,.pros-cons-grid span{font-size:7px;color:var(--muted)}.modern-form-grid input,.modern-form-grid select,.wide-field input,.wide-field textarea,.url-field input,.pros-cons-grid textarea,.ratings-editor input,.auth-form input{border:1px solid var(--line);border-radius:11px;background:var(--surface2);color:var(--text);padding:11px;outline:0;width:100%;font-size:8px}.wide-field{margin-top:11px}.pros-cons-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.media-upload-grid{display:grid;grid-template-columns:1.1fr .9fr 1.1fr;gap:10px}.upload-zone{min-height:150px;position:relative;border:1px dashed rgba(139,92,246,.4);border-radius:14px;background:var(--surface2);display:grid;place-content:center;text-align:center;gap:5px;overflow:hidden}.upload-zone input{position:absolute;inset:0;opacity:0;cursor:pointer}.upload-zone strong{font-size:8px}.upload-zone small{font-size:6px;color:var(--muted)}.upload-icon{font-size:23px;color:var(--accent)}.upload-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.existing-gallery{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}.gallery-admin-item{position:relative;width:90px;height:115px}.gallery-admin-item img{width:100%;height:100%;object-fit:cover;border-radius:9px}.gallery-admin-item button{position:absolute;top:4px;left:4px;border:0;border-radius:7px;background:var(--danger);color:white}.ratings-editor{display:grid;gap:7px}.rating-row{display:grid;grid-template-columns:1fr 140px auto;gap:7px}.rating-row button{border:1px solid var(--line);border-radius:9px;background:var(--surface2);color:var(--danger)}.choice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.choice-item{display:flex;gap:7px;align-items:center;border:1px solid var(--line);border-radius:10px;background:var(--surface2);padding:9px;font-size:7px}.editor-submit-bar{position:sticky;bottom:0;display:flex;justify-content:space-between;align-items:center;padding:14px 20px;background:rgba(17,23,34,.96);border-top:1px solid var(--line)}.editor-submit-bar span{font-size:7px;color:var(--muted)}.collection-admin-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:15px}.compact-editor{padding:20px}.collection-cover-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}.work-picker{max-height:370px;overflow:auto;display:grid;grid-template-columns:repeat(2,1fr);gap:6px}.work-pick{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:7px;border:1px solid var(--line);border-radius:9px;background:var(--surface2);padding:6px}.work-pick img{width:38px;height:50px;object-fit:cover;border-radius:7px}.work-pick b{font-size:7px}.import-results{display:grid;gap:8px}.import-row{display:grid;grid-template-columns:70px 1fr auto;align-items:center;gap:11px;border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:9px}.import-row img{width:70px;height:90px;object-fit:cover;border-radius:9px}.import-row h3{font-size:9px}.import-row p{font-size:7px;color:var(--muted);line-height:1.7}.modal-backdrop,.welcome-backdrop{position:fixed;inset:0;z-index:130;background:rgba(5,8,13,.84);backdrop-filter:blur(12px);display:grid;place-items:center;padding:20px}.auth-modal,.welcome-card{position:relative;width:min(480px,95vw);border:1px solid var(--line);border-radius:24px;background:var(--surface);padding:30px;box-shadow:var(--shadow)}.auth-modal h2,.welcome-card h2{font-size:28px;margin:9px 0}.auth-modal>p,.welcome-card>p{font-size:8px;color:var(--muted);line-height:1.8}.modal-close{position:absolute;top:13px;left:13px;width:36px;height:36px;border:1px solid var(--line);border-radius:11px;background:var(--surface2);color:var(--text)}.google-button{width:100%;margin-top:14px;border:1px solid var(--line);border-radius:12px;background:var(--surface2);color:var(--text);padding:11px}.auth-divider{display:flex;align-items:center;gap:8px;margin:13px 0;font-size:7px;color:var(--muted)}.auth-divider:before,.auth-divider:after{content:"";height:1px;background:var(--line);flex:1}.auth-tabs{display:flex;gap:6px}.auth-tabs button{flex:1;border:1px solid var(--line);border-radius:10px;background:var(--surface2);color:var(--muted);padding:9px}.auth-tabs button.active{background:var(--accent);color:white}.auth-form{display:grid;gap:8px;margin-top:11px}.signed-in-panel{display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:center}.signed-in-panel strong,.signed-in-panel small{display:block}.signed-in-panel small{font-size:6px;color:var(--muted)}.welcome-card{width:min(650px,95vw);padding:42px}.welcome-number{display:none}.welcome-card h2 em{font-style:normal;color:#a78bfa}.welcome-points{display:grid;gap:7px;margin:17px 0}.welcome-points span{border:1px solid var(--line);border-radius:10px;background:var(--surface2);padding:9px;font-size:7px}.toast{position:fixed;left:22px;bottom:22px;z-index:200;border-radius:12px;background:var(--success);color:#07150e;padding:11px 14px;font-size:8px;font-weight:700;transform:translateY(70px);opacity:0;transition:.25s}.toast.show{transform:none;opacity:1}.reveal{opacity:0;transform:translateY(15px);transition:.6s ease}.reveal.visible{opacity:1;transform:none}.mobile-nav{display:none}@media(max-width:1100px){.desktop-nav{display:none}.site-header{grid-template-columns:auto 1fr auto}.hero-shell{grid-template-columns:1fr}.hero-content{text-align:center}.hero-content>p{margin-inline:auto}.button-row,.hero-badges{justify-content:center}.featured-card{max-width:730px;margin:auto}.ranked-grid{grid-template-columns:repeat(2,1fr)}.poster-grid{grid-template-columns:repeat(4,1fr)}.compact-grid{grid-template-columns:repeat(2,1fr)}.work-hero{grid-template-columns:260px 1fr}.detail-layout{grid-template-columns:1fr}.detail-side{order:-1}.side-card{position:static}.modern-form-grid{grid-template-columns:repeat(2,1fr)}.collection-admin-layout{grid-template-columns:1fr}}@media(max-width:740px){:root{--header:66px}.site-header{padding:0 14px}.brand>span:last-child{display:none}.header-actions .icon-button{display:none}.profile-button>span:last-child{display:none}.view{padding:0 15px 90px}.hero-shell{margin-top:14px;padding:37px 20px;border-radius:24px}.hero-content h1{font-size:44px;letter-spacing:-1px}.featured-card{grid-template-columns:1fr}.featured-cover{height:330px}.featured-copy{padding:23px}.content-section{padding-top:55px}.section-heading h2{font-size:23px}.ranked-grid{grid-template-columns:1fr 1fr;gap:10px}.ranked-card img{height:180px}.poster-grid{grid-template-columns:repeat(2,1fr);gap:13px}.collections-grid,.compact-grid{grid-template-columns:1fr}.page-head{padding:48px 0 26px}.page-head h1{font-size:38px}.filter-bar{grid-template-columns:1fr 1fr}.search-field{grid-column:1/-1}.api-search-card{grid-template-columns:1fr;padding:17px}.collection-hero{grid-template-columns:1fr;padding:17px}.collection-hero-cover{min-height:280px}.work-hero{grid-template-columns:1fr;padding:18px;gap:18px}.work-hero-overlay{background:linear-gradient(0deg,rgba(9,13,20,.98),rgba(9,13,20,.66))}.work-cover-column{max-width:250px;margin:auto}.work-summary{text-align:center}.tag-row,.detail-actions{justify-content:center}.work-description{margin-inline:auto}.work-meta{grid-template-columns:1fr 1fr}.site-rating-row{justify-content:center}.review-grid{grid-template-columns:1fr}.rating-scale{grid-template-columns:repeat(5,1fr)}.comment-card{grid-template-columns:36px 1fr}.comment-card>button{grid-column:2}.reading-item{grid-template-columns:55px 1fr auto}.reading-item img{width:55px;height:75px}.reading-item select{grid-column:2/-1}.admin-dashboard{grid-template-columns:1fr}.admin-work-row,.manage-collection-row{grid-template-columns:55px 1fr auto}.admin-work-row img,.manage-collection-row img{width:55px;height:70px}.admin-work-row>span{display:none}.row-actions{grid-column:2/-1}.manager-toolbar{align-items:stretch}.manager-toolbar label{min-width:0;flex:1}.editor-block{grid-template-columns:42px 1fr}.editor-block-content{padding:16px 12px}.modern-form-grid,.pros-cons-grid,.media-upload-grid,.choice-grid,.collection-cover-fields{grid-template-columns:1fr}.editor-submit-bar{display:grid;gap:8px}.work-picker{grid-template-columns:1fr}.mobile-nav{display:grid;position:fixed;bottom:0;left:0;right:0;z-index:80;grid-template-columns:repeat(5,1fr);padding:7px 5px calc(7px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:rgba(9,13,20,.94);backdrop-filter:blur(15px)}body.light .mobile-nav{background:rgba(244,246,250,.94)}.mobile-nav button{border:0;background:transparent;color:var(--muted);font-size:6px;display:grid;gap:2px;justify-items:center}.mobile-nav button span{font-size:17px}.mobile-nav button.active{color:#a78bfa}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* =========================================================
   V9 — Series page inspired by modern comic landing pages
   ========================================================= */

.series-page{
  padding-inline:0;
}
.series-page>.back-button{
  margin:22px 4vw 12px;
}
.series-hero{
  position:relative;
  min-height:560px;
  overflow:hidden;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#080b11;
}
.series-hero-blur{
  position:absolute;
  inset:-45px;
  background-position:center;
  background-size:cover;
  filter:blur(34px) saturate(.72);
  transform:scale(1.12);
  opacity:.55;
}
.series-hero-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(8,11,17,.98) 6%,rgba(8,11,17,.83) 45%,rgba(8,11,17,.45)),
    linear-gradient(0deg,#090d14 0%,transparent 58%);
}
.series-hero-inner{
  position:relative;
  z-index:2;
  width:min(1180px,92vw);
  min-height:560px;
  margin:auto;
  display:grid;
  grid-template-columns:300px minmax(0,1fr);
  gap:48px;
  align-items:center;
  padding:48px 0;
}
.series-cover-area{
  align-self:end;
}
.series-cover{
  width:100%;
  aspect-ratio:5/7;
  object-fit:cover;
  border-radius:16px;
  box-shadow:0 28px 70px rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.15);
}
.series-cover-thumbs{
  display:flex;
  gap:8px;
  overflow:auto;
  margin-top:10px;
  scrollbar-width:none;
}
.series-cover-thumbs::-webkit-scrollbar{display:none}
.series-cover-thumbs img{
  width:58px;
  height:72px;
  flex:0 0 auto;
  object-fit:cover;
  border-radius:8px;
  border:2px solid transparent;
  cursor:pointer;
  opacity:.72;
  transition:.2s;
}
.series-cover-thumbs img:hover{
  opacity:1;
  border-color:var(--accent);
}
.series-main-info{
  max-width:760px;
  padding-top:28px;
}
.series-breadcrumb{
  display:flex;
  align-items:center;
  gap:8px;
  color:#c7c9d0;
  font-size:8px;
  margin-bottom:16px;
}
.series-status{
  display:inline-flex;
  padding:7px 11px;
  border-radius:999px;
  background:rgba(34,197,94,.14);
  border:1px solid rgba(34,197,94,.35);
  color:#8df3ad;
  font-size:8px;
}
.series-main-info h1{
  margin:16px 0 8px;
  color:#fff;
  font-size:clamp(38px,5.5vw,72px);
  line-height:1.22;
  letter-spacing:-2px;
}
.series-alt-titles{
  color:#b8bbc4;
  font-size:9px;
  line-height:1.8;
  margin:0 0 24px;
}
.series-creator-line{
  display:flex;
  gap:34px;
  flex-wrap:wrap;
  margin:16px 0 22px;
}
.series-creator-line div{
  display:grid;
  gap:5px;
}
.series-creator-line span{
  color:#9196a2;
  font-size:7px;
}
.series-creator-line strong{
  color:#fff;
  font-size:9px;
}
.series-social-stats{
  display:flex;
  gap:1px;
  width:min(560px,100%);
  overflow:hidden;
  border-radius:13px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.1);
}
.series-social-stats div{
  flex:1;
  padding:14px 16px;
  background:rgba(10,14,22,.62);
  backdrop-filter:blur(10px);
}
.series-social-stats strong,
.series-social-stats span{
  display:block;
}
.series-social-stats strong{
  color:#fff;
  font:800 18px Arial,sans-serif;
}
.series-social-stats span{
  color:#9da1aa;
  font-size:7px;
  margin-top:4px;
}
.series-actions{
  justify-content:flex-start;
  margin-top:24px;
}
.series-tabs{
  position:sticky;
  top:var(--header);
  z-index:35;
  display:flex;
  justify-content:center;
  gap:3px;
  padding:10px 4vw;
  border-bottom:1px solid var(--line);
  background:rgba(9,13,20,.94);
  backdrop-filter:blur(15px);
  overflow:auto;
}
body.light .series-tabs{background:rgba(244,246,250,.95)}
.series-tabs button{
  border:0;
  border-radius:9px;
  background:transparent;
  color:var(--muted);
  padding:10px 15px;
  font-size:8px;
  white-space:nowrap;
}
.series-tabs button:hover,
.series-tabs button.active{
  background:var(--surface2);
  color:var(--text);
}
.series-content-layout{
  width:min(1180px,92vw);
  margin:34px auto 80px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
  gap:24px;
  align-items:start;
}
.series-content-main{
  display:grid;
  gap:18px;
}
.series-section,
.series-info-card{
  scroll-margin-top:145px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--surface);
  padding:24px;
}
.series-section-title{
  margin-bottom:16px;
}
.series-section-title h2,
.series-info-head h2{
  margin:6px 0 0;
  font-size:22px;
}
.series-synopsis{
  margin:0;
  color:var(--muted);
  font-size:10px;
  line-height:2.25;
  white-space:pre-line;
}
.series-tags{
  margin-top:20px;
}
.series-gallery-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.series-gallery-grid img{
  width:100%;
  aspect-ratio:16/10;
  border-radius:12px;
  object-fit:cover;
  cursor:pointer;
  transition:.25s;
}
.series-gallery-grid img:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow);
}
.empty-gallery{
  padding:34px;
  border:1px dashed var(--line);
  border-radius:12px;
  color:var(--muted);
  text-align:center;
  font-size:8px;
}
.series-sidebar{
  display:grid;
  gap:14px;
}
.series-info-card{
  padding:20px;
}
.series-info-head{
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
  margin-bottom:4px;
}
.series-info-list{
  margin:0;
}
.series-info-list>div{
  display:grid;
  grid-template-columns:105px 1fr;
  gap:12px;
  padding:12px 0;
  border-bottom:1px solid var(--line);
}
.series-info-list>div:last-child{
  border-bottom:0;
}
.series-info-list dt{
  color:var(--muted);
  font-size:7px;
}
.series-info-list dd{
  margin:0;
  color:var(--text);
  font-size:8px;
  line-height:1.65;
}
.series-source-link{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:14px;
  padding:11px;
  border-radius:10px;
  background:var(--accent);
  color:#fff;
  font-size:8px;
}
.site-rating-list{
  display:grid;
  gap:8px;
}
.site-rating-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:11px 12px;
  border:1px solid var(--line);
  border-radius:11px;
  background:var(--surface2);
}
.site-rating-item span{
  font-size:8px;
}
.site-rating-item strong{
  color:#f6c45c;
  font:800 14px Arial,sans-serif;
}
.detail-collection-links{
  display:grid;
  gap:8px;
}
.detail-collection-link{
  width:100%;
  text-align:right;
  border:1px solid var(--line);
  border-radius:11px;
  background:var(--surface2);
  color:var(--text);
  padding:11px;
  font-size:8px;
}
.detail-collection-link:hover{
  border-color:var(--accent);
  color:#a78bfa;
}
.related-grid{
  grid-template-columns:repeat(3,1fr);
}
.communityAverageTop{}
.curation-hero{
  position:relative;
  min-height:460px;
  overflow:hidden;
  border-radius:26px;
  border:1px solid var(--line);
  margin-top:18px;
  background:#0a0e16 center/cover no-repeat;
}
.curation-hero-shade{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(7,10,16,.97),rgba(7,10,16,.64) 62%,rgba(7,10,16,.25));
}
.curation-inner{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:270px minmax(0,1fr);
  align-items:center;
  gap:38px;
  width:min(1050px,90%);
  min-height:460px;
  margin:auto;
  padding:38px 0;
}
.curation-cover{
  width:100%;
  aspect-ratio:5/6;
  object-fit:cover;
  border-radius:18px;
  box-shadow:0 25px 60px rgba(0,0,0,.46);
}
.curation-copy{
  max-width:650px;
}
.curation-title-row{
  display:flex;
  align-items:center;
  gap:14px;
}
.curation-copy h1{
  color:#fff;
  font-size:clamp(34px,5vw,62px);
  margin:15px 0;
}
.curation-copy>p{
  color:#c0c3cc;
  font-size:10px;
  line-height:2.1;
}
.curation-meta{
  display:flex;
  gap:10px;
  margin-top:20px;
}
.curation-meta span{
  padding:8px 11px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:999px;
  color:#d4d6dc;
  font-size:8px;
}
.curation-content{
  padding-top:55px;
}
.form-span-2{
  grid-column:span 2;
}

@media(max-width:980px){
  .series-hero-inner{grid-template-columns:250px 1fr;gap:30px}
  .series-content-layout{grid-template-columns:1fr}
  .series-sidebar{grid-template-columns:repeat(3,1fr)}
  .related-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:740px){
  .series-page>.back-button{margin-inline:15px}
  .series-hero{min-height:auto}
  .series-hero-inner{
    width:100%;
    min-height:0;
    grid-template-columns:1fr;
    gap:22px;
    padding:28px 18px 36px;
  }
  .series-cover-area{
    width:min(240px,70vw);
    margin:auto;
  }
  .series-main-info{
    text-align:center;
    padding-top:0;
  }
  .series-breadcrumb,
  .series-creator-line,
  .series-actions{
    justify-content:center;
  }
  .series-main-info h1{
    font-size:38px;
    letter-spacing:-1px;
  }
  .series-social-stats{
    margin:auto;
  }
  .series-content-layout{
    width:auto;
    margin:20px 15px 75px;
  }
  .series-section,
  .series-info-card{
    padding:17px;
    border-radius:15px;
  }
  .series-sidebar{
    grid-template-columns:1fr;
    order:-1;
  }
  .series-gallery-grid{
    grid-template-columns:1fr 1fr;
  }
  .related-grid{
    grid-template-columns:1fr 1fr;
  }
  .series-tabs{
    justify-content:flex-start;
  }
  .curation-hero{
    border-radius:20px;
    min-height:auto;
  }
  .curation-inner{
    width:auto;
    min-height:0;
    grid-template-columns:1fr;
    padding:24px 18px 32px;
  }
  .curation-cover-wrap{
    width:min(250px,72vw);
    margin:auto;
  }
  .curation-copy{
    text-align:center;
  }
  .curation-title-row,
  .curation-meta,
  .curation-copy .detail-actions{
    justify-content:center;
  }
  .curation-copy h1{
    font-size:34px;
  }
  .form-span-2{
    grid-column:auto;
  }
}


/* ==========================================================
   V10 — Clean discovery interface, white / deep-black themes
   ========================================================== */
:root{
  --bg:#0a0a0b;
  --surface:#101012;
  --surface2:#171719;
  --surface3:#202023;
  --text:#ffffff;
  --muted:#9c9ca3;
  --line:rgba(255,255,255,.12);
  --accent:#ff3d63;
  --accent2:#ff3d63;
  --danger:#ff4d67;
  --success:#55d98d;
  --warning:#ffcf4b;
  --shadow:0 22px 55px rgba(0,0,0,.34);
  --radius:16px;
}
body.light{
  --bg:#ffffff;
  --surface:#ffffff;
  --surface2:#f5f5f6;
  --surface3:#ececee;
  --text:#141416;
  --muted:#727278;
  --line:#e4e4e7;
  --shadow:0 18px 45px rgba(20,20,24,.09);
}
body{
  background:var(--bg);
}
.ambient{display:none!important}
.site-header{
  background:rgba(10,10,11,.96);
  border-bottom-color:var(--line);
  backdrop-filter:blur(14px);
}
body.light .site-header{
  background:rgba(255,255,255,.96);
}
.brand-mark{
  border-radius:7px;
  background:var(--accent);
  box-shadow:none;
}
.brand strong{font-weight:800}
.desktop-nav button{
  border-radius:7px;
}
.desktop-nav button:hover,
.desktop-nav button.active{
  background:var(--text);
  color:var(--bg);
}
.icon-button,
.profile-button{
  border-radius:8px;
  box-shadow:none;
}
.avatar{
  border-radius:7px;
  background:var(--accent);
}
.primary-button{
  border-radius:8px;
  background:var(--accent);
  box-shadow:none;
}
.secondary-button,
.follow-button,
.back-button{
  border-radius:8px;
}
.eyebrow,
.poster-copy span{
  color:var(--accent);
}
.poster-cover{
  border-radius:10px;
}
.poster-score{
  border-radius:6px;
  background:rgba(10,10,11,.88);
  color:#fff;
}
.poster-actions button,
.inline-follow{
  border-radius:7px;
}
.poster-card:hover{
  transform:translateY(-4px);
}
.poster-card:hover .poster-cover{
  border-color:var(--accent);
}
.collection-card,
.collection-editorial-card,
.ranked-card,
.editor-shell,
.auth-modal,
.welcome-card{
  border-radius:12px;
}
.search-overlay{
  background:rgba(10,10,11,.97);
}
.discover-home{
  padding-top:0;
}
.discover-shortcuts{
  position:sticky;
  top:var(--header);
  z-index:34;
  display:flex;
  justify-content:center;
  gap:2px;
  margin-inline:-4vw;
  padding:10px 4vw;
  overflow:auto;
  border-bottom:1px solid var(--line);
  background:rgba(10,10,11,.96);
  backdrop-filter:blur(12px);
  scrollbar-width:none;
}
body.light .discover-shortcuts{
  background:rgba(255,255,255,.96);
}
.discover-shortcuts::-webkit-scrollbar{display:none}
.discover-shortcuts button{
  min-width:95px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:11px 14px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--muted);
  font-size:8px;
  white-space:nowrap;
}
.discover-shortcuts button span{
  font-size:15px;
}
.discover-shortcuts button:hover,
.discover-shortcuts button.active{
  background:var(--surface2);
  color:var(--text);
}
.discover-feature{
  min-height:520px;
  position:relative;
  overflow:hidden;
  margin:22px 0 0;
  border:1px solid var(--line);
  border-radius:18px;
  background:#0a0a0b;
}
.discover-feature-backdrop{
  position:absolute;
  inset:0;
  background:center/cover no-repeat;
  filter:saturate(.72);
  transform:scale(1.03);
}
.discover-feature-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(8,8,9,.98) 8%,rgba(8,8,9,.82) 48%,rgba(8,8,9,.28)),
    linear-gradient(0deg,rgba(8,8,9,.72),transparent 65%);
}
.discover-feature-content{
  position:relative;
  z-index:2;
  min-height:520px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 440px;
  align-items:center;
  gap:40px;
  padding:48px 5%;
}
.feature-copy{
  color:#fff;
  max-width:660px;
}
.feature-label-row{
  display:flex;
  align-items:center;
  gap:12px;
}
.feature-label{
  padding:7px 10px;
  border-radius:999px;
  background:var(--accent);
  color:#fff;
  font-size:7px;
  font-weight:800;
}
.feature-rank{
  color:#c8c8ce;
  font:800 11px Arial,sans-serif;
}
.feature-copy h1{
  margin:17px 0 12px;
  font-size:clamp(38px,5.5vw,70px);
  line-height:1.25;
  letter-spacing:-2px;
}
.feature-copy>p{
  max-width:620px;
  margin:0;
  color:#c8c8ce;
  font-size:10px;
  line-height:2;
}
.feature-stats{
  display:flex;
  gap:10px;
  margin-top:23px;
}
.feature-stats span{
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px 11px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:8px;
  background:rgba(0,0,0,.28);
  color:#d9d9de;
  font-size:8px;
}
.feature-stats strong{
  color:#fff;
  font:800 15px Arial,sans-serif;
}
.feature-actions{
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  margin-top:24px;
}
.feature-actions .secondary-button{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.22);
  color:#fff;
}
.feature-slider-controls{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:28px;
}
.feature-slider-controls>button{
  width:34px;
  height:34px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:50%;
  background:rgba(0,0,0,.28);
  color:#fff;
}
.feature-dots{
  display:flex;
  gap:6px;
}
.feature-dots button{
  width:7px;
  height:7px;
  padding:0;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.35);
  transition:.2s;
}
.feature-dots button.active{
  width:24px;
  background:var(--accent);
}
.feature-work-collage{
  min-height:400px;
  position:relative;
}
.feature-mini-work{
  position:absolute;
  width:180px;
  cursor:pointer;
  transition:.35s;
}
.feature-mini-work img{
  width:100%;
  aspect-ratio:5/7;
  object-fit:cover;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.2);
  box-shadow:0 20px 45px rgba(0,0,0,.42);
}
.feature-mini-work span{
  display:block;
  margin-top:7px;
  color:#fff;
  font-size:7px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.feature-mini-work:hover{
  transform:translateY(-8px)!important;
  z-index:10;
}
.feature-mini-1{right:20px;top:5px;transform:rotate(3deg)}
.feature-mini-2{right:185px;top:70px;transform:rotate(-5deg)}
.feature-mini-3{right:55px;top:190px;transform:rotate(5deg)}
.feature-mini-4{right:220px;top:235px;transform:rotate(-2deg)}
.feature-timer{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:3px;
  background:rgba(255,255,255,.13);
}
.feature-timer span{
  display:block;
  width:0;
  height:100%;
  background:var(--accent);
}
.feature-timer span.running{
  animation:featureCountdown 6.5s linear forwards;
}
@keyframes featureCountdown{from{width:0}to{width:100%}}
.discover-section{
  scroll-margin-top:145px;
  padding-top:62px;
}
.discover-section-heading{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:20px;
  margin-bottom:20px;
}
.discover-section-heading h2{
  margin:5px 0 0;
  font-size:28px;
}
.discover-section-heading p{
  max-width:520px;
  margin:7px 0 0;
  color:var(--muted);
  font-size:8px;
  line-height:1.8;
}
.section-kicker{
  color:var(--accent);
  font-size:7px;
  letter-spacing:1px;
  font-weight:800;
}
.plain-link{
  border:0;
  background:transparent;
  color:var(--muted);
  font-size:8px;
}
.plain-link:hover{color:var(--accent)}
.top-collections-strip{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(220px,1fr);
  gap:12px;
  overflow-x:auto;
  padding:2px 2px 14px;
  scroll-snap-type:x mandatory;
  scrollbar-width:thin;
}
.top-collection-card{
  min-width:0;
  display:grid;
  grid-template-columns:75px 1fr;
  gap:12px;
  position:relative;
  padding:10px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface);
  cursor:pointer;
  scroll-snap-align:start;
  transition:.22s;
}
.top-collection-card:hover{
  transform:translateY(-3px);
  border-color:var(--accent);
}
.top-collection-rank{
  position:absolute;
  top:8px;
  right:8px;
  z-index:2;
  padding:4px 6px;
  border-radius:5px;
  background:var(--accent);
  color:#fff;
  font:800 8px Arial,sans-serif;
}
.top-collection-cover img{
  width:75px;
  height:95px;
  object-fit:cover;
  border-radius:8px;
}
.top-collection-copy{
  min-width:0;
  align-self:center;
}
.top-collection-score{
  color:var(--accent);
  font:800 10px Arial,sans-serif;
}
.top-collection-copy h3{
  margin:7px 0 6px;
  font-size:9px;
  line-height:1.7;
}
.top-collection-copy p{
  margin:0;
  color:var(--muted);
  font-size:7px;
}
.shelf-auto-label{
  display:flex;
  align-items:center;
  gap:7px;
  color:var(--muted);
  font-size:7px;
}
.shelf-auto-label i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 5px rgba(255,61,99,.12);
}
.rotating-shelves,
.groups-shelves-list{
  display:grid;
  gap:30px;
}
.collection-shelf{
  min-width:0;
  animation:shelfEnter .45s ease both;
  animation-delay:var(--shelf-delay);
}
@keyframes shelfEnter{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:none}
}
.collection-shelf-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:18px;
  margin-bottom:13px;
}
.collection-shelf-head>div{
  display:flex;
  align-items:start;
  gap:12px;
}
.shelf-number{
  color:var(--accent);
  font:900 25px Arial,sans-serif;
  line-height:1;
}
.shelf-rating{
  color:var(--accent);
  font:800 9px Arial,sans-serif;
}
.collection-shelf-head h3{
  margin:4px 0 4px;
  font-size:17px;
}
.collection-shelf-head p{
  max-width:650px;
  margin:0;
  color:var(--muted);
  font-size:7px;
  line-height:1.75;
}
.shelf-open-button{
  border:0;
  background:transparent;
  color:var(--text);
  font-size:8px;
  white-space:nowrap;
}
.shelf-open-button:hover{color:var(--accent)}
.shelf-track,
.media-rail{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(145px,1fr);
  gap:14px;
  overflow-x:auto;
  padding:2px 2px 14px;
  scroll-snap-type:x mandatory;
  scrollbar-width:thin;
}
.media-rail{
  grid-auto-columns:minmax(160px,1fr);
}
.shelf-work-card{
  min-width:0;
  cursor:pointer;
  scroll-snap-align:start;
}
.shelf-work-cover{
  position:relative;
  aspect-ratio:5/7;
  overflow:hidden;
  border-radius:9px;
  border:1px solid var(--line);
  background:var(--surface2);
}
.shelf-work-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:.35s;
}
.shelf-work-card:hover img{transform:scale(1.045)}
.shelf-work-cover span{
  position:absolute;
  right:7px;
  bottom:7px;
  padding:5px 6px;
  border-radius:5px;
  background:rgba(10,10,11,.86);
  color:#fff;
  font:800 8px Arial,sans-serif;
}
.shelf-work-card h3{
  margin:9px 0 4px;
  font-size:8px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.shelf-work-card p{
  margin:0;
  color:var(--muted);
  font-size:6px;
}
.shelf-progress{
  height:2px;
  margin-top:3px;
  overflow:hidden;
  background:var(--line);
}
.shelf-progress span{
  display:block;
  width:100%;
  height:100%;
  background:var(--accent);
  transform-origin:right;
  animation:shelfCountdown 8s linear forwards;
}
@keyframes shelfCountdown{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.empty-shelf{
  min-height:150px;
  display:grid;
  place-items:center;
  border:1px dashed var(--line);
  border-radius:12px;
  color:var(--muted);
  font-size:8px;
}
.groups-shelves-list{
  padding-top:34px;
}
body.light .editor-submit-bar{
  background:rgba(255,255,255,.96);
}
body:not(.light) .editor-submit-bar{
  background:rgba(16,16,18,.96);
}

@media(max-width:900px){
  .discover-feature-content{
    grid-template-columns:1fr 330px;
    gap:20px;
  }
  .feature-mini-work{width:145px}
  .feature-mini-2{right:140px}
  .feature-mini-4{right:165px}
}
@media(max-width:740px){
  .discover-home{padding-inline:14px}
  .discover-shortcuts{
    margin-inline:-14px;
    padding-inline:12px;
    justify-content:flex-start;
  }
  .discover-shortcuts button{
    min-width:76px;
    padding:9px 10px;
  }
  .discover-feature{
    margin-top:12px;
    border-radius:13px;
  }
  .discover-feature-content{
    min-height:600px;
    grid-template-columns:1fr;
    align-content:end;
    padding:28px 19px 32px;
  }
  .discover-feature-overlay{
    background:
      linear-gradient(0deg,rgba(8,8,9,.98) 13%,rgba(8,8,9,.72) 72%,rgba(8,8,9,.3));
  }
  .feature-copy{
    order:2;
    text-align:center;
  }
  .feature-label-row,
  .feature-stats,
  .feature-actions,
  .feature-slider-controls{
    justify-content:center;
  }
  .feature-copy h1{
    font-size:36px;
    letter-spacing:-1px;
  }
  .feature-work-collage{
    order:1;
    min-height:250px;
    width:100%;
  }
  .feature-mini-work{width:112px}
  .feature-mini-1{right:calc(50% - 40px);top:0}
  .feature-mini-2{right:calc(50% + 42px);top:36px}
  .feature-mini-3{right:calc(50% - 120px);top:70px}
  .feature-mini-4{display:none}
  .discover-section{padding-top:48px}
  .discover-section-heading{
    align-items:start;
  }
  .discover-section-heading h2{
    font-size:22px;
  }
  .shelf-auto-label{display:none}
  .collection-shelf-head{
    align-items:start;
  }
  .collection-shelf-head>div{
    gap:8px;
  }
  .collection-shelf-head h3{
    font-size:14px;
  }
  .collection-shelf-head p{
    display:none;
  }
  .shelf-number{
    font-size:19px;
  }
  .shelf-track{
    grid-auto-columns:125px;
  }
  .media-rail{
    grid-auto-columns:140px;
  }
  .top-collections-strip{
    grid-auto-columns:240px;
  }
}
@media(prefers-reduced-motion:reduce){
  .feature-timer span.running,
  .shelf-progress span{
    animation:none!important;
  }
}

/* =========================================================
   V11 — User dock and personalized preferences
   ========================================================= */

body{
  padding-bottom:118px;
}
.mobile-nav{
  display:none!important;
}
.member-dock{
  position:fixed;
  left:50%;
  bottom:max(14px,env(safe-area-inset-bottom));
  z-index:90;
  width:min(680px,calc(100vw - 24px));
  height:84px;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  align-items:center;
  padding:8px 13px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:27px;
  background:rgba(8,8,9,.96);
  box-shadow:0 22px 60px rgba(0,0,0,.42);
  backdrop-filter:blur(20px);
  transform:translateX(-50%);
}
body.light .member-dock{
  border-color:#dedee2;
  background:rgba(255,255,255,.97);
  box-shadow:0 20px 50px rgba(20,20,24,.16);
}
.dock-item{
  min-width:0;
  height:66px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  border:0;
  border-radius:17px;
  background:transparent;
  color:#8c8c92;
  position:relative;
  transition:.2s;
}
.dock-item svg{
  width:25px;
  height:25px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.dock-item>span:last-child{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:7px;
}
.dock-item:hover,
.dock-item.active{
  color:var(--accent);
  background:color-mix(in srgb,var(--accent) 10%,transparent);
}
.dock-settings{grid-column:5}
.dock-notifications{grid-column:4}
.dock-home{grid-column:2}
.dock-library{grid-column:1}
.dock-profile{
  grid-column:3;
  position:relative;
  z-index:3;
  align-self:start;
  width:100%;
  height:94px;
  margin-top:-31px;
  border:0;
  background:transparent;
  color:var(--text);
}
.dock-profile-ring{
  width:79px;
  height:79px;
  margin:auto;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:7px solid #171719;
  background:#0a0a0b;
  box-shadow:0 0 0 2px rgba(255,255,255,.11),0 15px 30px rgba(0,0,0,.35);
}
body.light .dock-profile-ring{
  border-color:#f0f0f2;
  background:#fff;
  box-shadow:0 0 0 2px #dedee2,0 14px 28px rgba(20,20,24,.15);
}
.dock-profile-avatar{
  width:59px;
  height:59px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:
    radial-gradient(circle at 35% 25%,color-mix(in srgb,var(--accent) 78%,white),var(--accent) 44%,#101012 45%);
  color:#fff;
  font-size:20px;
  font-weight:900;
  text-transform:uppercase;
}
.dock-profile small{
  display:block;
  margin-top:7px;
  color:#919197;
  font-size:7px;
}
.dock-profile:hover .dock-profile-ring{
  transform:translateY(-3px);
}
.dock-badge{
  position:absolute;
  top:3px;
  right:calc(50% - 21px);
  min-width:18px;
  height:18px;
  padding:0 5px;
  display:grid;
  place-items:center;
  border:2px solid #0a0a0b;
  border-radius:999px;
  background:var(--accent);
  color:#fff;
  font:800 8px Arial,sans-serif;
}
body.light .dock-badge{border-color:#fff}

.dock-sheet-backdrop{
  position:fixed;
  inset:0;
  z-index:125;
  display:flex;
  justify-content:center;
  align-items:flex-end;
  padding:20px 14px 112px;
  background:rgba(0,0,0,.58);
  backdrop-filter:blur(7px);
}
.dock-sheet{
  width:min(620px,100%);
  max-height:min(760px,calc(100vh - 140px));
  overflow:auto;
  position:relative;
  padding:18px 22px 24px;
  border:1px solid var(--line);
  border-radius:25px;
  background:var(--surface);
  box-shadow:0 30px 75px rgba(0,0,0,.38);
  animation:dockSheetIn .28s ease;
}
@keyframes dockSheetIn{
  from{opacity:0;transform:translateY(28px) scale(.98)}
  to{opacity:1;transform:none}
}
.sheet-handle{
  width:44px;
  height:4px;
  margin:0 auto 14px;
  border-radius:999px;
  background:var(--line);
}
.sheet-header{
  display:flex;
  align-items:start;
  justify-content:space-between;
  gap:16px;
  padding-bottom:16px;
  border-bottom:1px solid var(--line);
}
.sheet-header h2{
  margin:5px 0 0;
  font-size:23px;
}
.sheet-close{
  width:38px;
  height:38px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface2);
  color:var(--text);
  font-size:21px;
}
.sheet-section{
  padding-top:20px;
}
.sheet-section h3,
.preference-intro strong{
  margin:0 0 7px;
  font-size:11px;
}
.sheet-section>p,
.preference-intro p{
  margin:0 0 14px;
  color:var(--muted);
  font-size:8px;
  line-height:1.85;
}
.sheet-primary{
  width:100%;
  margin-top:18px;
}
.theme-choice-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:11px;
}
.theme-choice{
  position:relative;
  display:grid;
  gap:10px;
  cursor:pointer;
}
.theme-choice input{
  position:absolute;
  opacity:0;
}
.theme-choice strong{
  font-size:8px;
}
.theme-preview{
  height:105px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  align-items:end;
  gap:7px;
  padding:16px;
  border:2px solid var(--line);
  border-radius:14px;
}
.theme-preview i{
  display:block;
  border-radius:6px;
}
.theme-preview i:nth-child(1){height:72px}
.theme-preview i:nth-child(2){height:52px}
.theme-preview i:nth-child(3){height:62px}
.light-preview{background:#fff}
.light-preview i{background:#e8e8eb}
.dark-preview{background:#0a0a0b}
.dark-preview i{background:#28282c}
.theme-choice input:checked+.theme-preview{
  border-color:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 12%,transparent);
}
.accent-palette{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.accent-palette>button{
  width:36px;
  height:36px;
  border:3px solid transparent;
  border-radius:50%;
  background:var(--swatch);
  box-shadow:0 0 0 1px var(--line);
}
.accent-palette>button.active{
  border-color:var(--surface);
  box-shadow:0 0 0 3px var(--swatch);
}
.custom-accent{
  height:38px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:5px 10px 5px 5px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--muted);
  font-size:7px;
}
.custom-accent input{
  width:28px;
  height:28px;
  padding:0;
  border:0;
  border-radius:50%;
  overflow:hidden;
  background:transparent;
}
.genre-choice-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}
.genre-choice{
  position:relative;
}
.genre-choice input{
  position:absolute;
  opacity:0;
}
.genre-choice span{
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:11px;
  background:var(--surface2);
  color:var(--muted);
  font-size:8px;
  cursor:pointer;
  transition:.2s;
}
.genre-choice input:checked+span{
  border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 12%,var(--surface2));
  color:var(--text);
  box-shadow:inset 0 -3px var(--accent);
}
.genre-choice.required-choice span:after{
  content:"مطلوب أحدهما";
  display:none;
}
.preference-intro{
  margin:18px 0;
  padding:15px;
  border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));
  border-radius:13px;
  background:color-mix(in srgb,var(--accent) 7%,var(--surface2));
}
.device-notification-row{
  margin-top:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--surface2);
}
.device-notification-row strong,
.device-notification-row small{
  display:block;
}
.device-notification-row strong{font-size:9px}
.device-notification-row small{
  margin-top:4px;
  color:var(--muted);
  font-size:7px;
}
.device-notification-row input{
  width:42px;
  height:22px;
  accent-color:var(--accent);
}
.sheet-subheading{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.sheet-subheading span{
  min-width:27px;
  height:27px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:var(--accent);
  color:#fff;
  font:800 9px Arial,sans-serif;
}
.notification-feed{
  display:grid;
  gap:8px;
  margin-top:12px;
}
.notification-entry{
  display:grid;
  grid-template-columns:54px 1fr;
  gap:11px;
  align-items:center;
  padding:9px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface2);
  cursor:pointer;
}
.notification-entry img{
  width:54px;
  height:68px;
  border-radius:8px;
  object-fit:cover;
}
.notification-entry h4{
  margin:0 0 5px;
  font-size:8px;
}
.notification-entry p{
  margin:0;
  color:var(--muted);
  font-size:7px;
  line-height:1.7;
}
.notification-entry time{
  display:block;
  margin-top:6px;
  color:var(--accent);
  font-size:6px;
}
.notification-empty{
  padding:27px 15px;
  border:1px dashed var(--line);
  border-radius:12px;
  color:var(--muted);
  text-align:center;
  font-size:8px;
}
.profile-guest-state{
  display:grid;
  justify-items:center;
  text-align:center;
  padding:25px 5px 10px;
}
.large-profile-avatar{
  width:82px;
  height:82px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--accent);
  color:#fff;
  font-size:27px;
  font-weight:900;
}
.profile-guest-state h3{
  margin:17px 0 5px;
  font-size:15px;
}
.profile-guest-state p{
  max-width:380px;
  margin:0 0 18px;
  color:var(--muted);
  font-size:8px;
  line-height:1.9;
}
.profile-identity{
  display:flex;
  align-items:center;
  gap:15px;
  padding:20px 0;
}
.profile-identity strong,
.profile-identity small{
  display:block;
}
.profile-identity strong{font-size:13px}
.profile-identity small{
  margin-top:5px;
  color:var(--muted);
  font-size:7px;
}
.profile-name-field{
  display:grid;
  gap:8px;
}
.profile-name-field span{
  color:var(--muted);
  font-size:8px;
}
.profile-name-field input{
  width:100%;
  border:1px solid var(--line);
  border-radius:11px;
  background:var(--surface2);
  color:var(--text);
  padding:13px;
  outline:0;
}
.profile-name-field input:focus{
  border-color:var(--accent);
}
.danger-outline-button{
  width:100%;
  margin-top:13px;
  padding:12px;
  border:1px solid var(--danger);
  border-radius:9px;
  background:transparent;
  color:var(--danger);
}
.library-page-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:20px;
}
.library-page-head>div{
  flex:1;
}
#rotatingShelvesSection .discover-section-heading p:after{
  content:" يتم ترتيب هذه الرفوف أيضًا حسب اهتمامات المستخدم المحفوظة.";
}
.member-dock,
.dock-sheet,
.dock-item,
.theme-preview,
.genre-choice span{
  -webkit-tap-highlight-color:transparent;
}

@media(max-width:740px){
  body{padding-bottom:104px}
  .site-header .header-actions{
    display:none;
  }
  .member-dock{
    bottom:max(7px,env(safe-area-inset-bottom));
    width:calc(100vw - 14px);
    height:75px;
    padding:7px 5px;
    border-radius:24px;
  }
  .dock-item{
    height:60px;
  }
  .dock-item svg{
    width:23px;
    height:23px;
  }
  .dock-item>span:last-child{
    font-size:6px;
  }
  .dock-profile{
    height:86px;
    margin-top:-27px;
  }
  .dock-profile-ring{
    width:70px;
    height:70px;
    border-width:6px;
  }
  .dock-profile-avatar{
    width:53px;
    height:53px;
  }
  .dock-sheet-backdrop{
    padding:8px 7px 91px;
  }
  .dock-sheet{
    max-height:calc(100vh - 105px);
    padding:15px 16px 20px;
    border-radius:23px;
  }
  .genre-choice-grid{
    grid-template-columns:repeat(2,1fr);
  }
  .library-page-head{
    align-items:start;
  }
  .library-page-head .secondary-button{
    padding:9px;
    font-size:7px;
  }
}
@media(max-width:390px){
  .dock-item>span:last-child{
    max-width:54px;
  }
  .member-dock{
    grid-template-columns:1fr 1fr 1.08fr 1fr 1fr;
  }
}


/* =========================================================
   V11.1 — Fixed user dock layout for RTL mobile browsers
   ========================================================= */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
.member-dock{
  display:flex!important;
  flex-direction:row-reverse;
  direction:ltr;
  align-items:center;
  justify-content:stretch;
  grid-template-columns:none!important;
  min-height:74px;
  max-height:84px;
  overflow:visible;
}
.member-dock>.dock-item,
.member-dock>.dock-profile{
  grid-column:auto!important;
  flex:1 1 0;
  min-width:0;
  direction:rtl;
}
.member-dock>.dock-profile{
  width:auto!important;
  max-width:120px;
}
.dock-item{
  padding:4px 2px;
}
.dock-item svg{
  flex:0 0 auto;
}
.dock-item>span:last-child{
  display:block;
  width:100%;
  text-align:center;
}
@media(max-width:740px){
  .member-dock{
    width:calc(100vw - 12px);
    height:72px;
    min-height:72px;
    max-height:72px;
    padding:6px 3px;
  }
  .member-dock>.dock-item{
    height:58px;
  }
  .member-dock>.dock-profile{
    height:82px;
    margin-top:-25px;
    max-width:82px;
  }
  .dock-profile-ring{
    width:66px;
    height:66px;
  }
  .dock-profile-avatar{
    width:49px;
    height:49px;
    font-size:17px;
  }
  .dock-profile small{
    margin-top:4px;
    font-size:6px;
  }
  .dock-item svg{
    width:22px;
    height:22px;
  }
  .dock-item>span:last-child{
    font-size:6px;
  }
}
@media(max-width:360px){
  .member-dock{
    width:calc(100vw - 8px);
    padding-inline:1px;
  }
  .dock-item>span:last-child{
    font-size:5.5px;
  }
  .dock-profile-ring{
    width:61px;
    height:61px;
  }
  .dock-profile-avatar{
    width:45px;
    height:45px;
  }
}


/* =========================================================
   V11.2 — Correct mobile order, header, scale and image errors
   ========================================================= */

/* The center dock profile is the only account entry shown in the interface. */
#authButton,
.site-header .profile-button{
  display:none!important;
}

/* Fixed visual order from LEFT to RIGHT:
   Library — Notifications — Profile — Settings — Home
   Therefore Home is the first slot on the RIGHT. */
.member-dock{
  direction:ltr!important;
  flex-direction:row!important;
}
#dockLibrary{order:1}
#dockNotifications{order:2}
#dockProfile{order:3}
#dockSettings{order:4}
#dockHome{order:5}

/* Prevent the dock from stretching or leaving a giant empty cell. */
.member-dock>.dock-item{
  flex:1 1 0!important;
  width:auto!important;
  max-width:none!important;
}
.member-dock>.dock-profile{
  flex:0 0 94px!important;
  width:94px!important;
}
.member-dock .dock-item,
.member-dock .dock-profile{
  box-sizing:border-box;
}

/* More room above the fixed dock so content is never hidden behind it. */
body{
  padding-bottom:132px!important;
}
main{
  padding-bottom:10px;
}

/* Broken external covers are shown with a neutral surface until JS replaces them. */
img{
  background:var(--surface2);
}
.poster-cover,
.shelf-work-cover,
.top-collection-cover,
.feature-mini-work,
.series-cover-area,
.curation-cover-wrap{
  background:var(--surface2);
}

/* Mobile and tablet correction. Some Android browsers expose a viewport near 980px. */
@media(max-width:1024px){
  .site-header{
    height:66px;
    display:flex!important;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:0 16px!important;
  }
  .site-header .desktop-nav{
    display:none!important;
  }
  .site-header .brand{
    margin-inline-start:auto;
  }
  .site-header .header-actions{
    display:flex!important;
    margin-inline-end:auto;
  }
  .site-header .header-actions #authButton{
    display:none!important;
  }
  .site-header .icon-button{
    width:38px;
    height:38px;
  }
  .brand-mark{
    width:38px;
    height:38px;
  }
  .brand strong{
    font-size:13px;
  }
  .brand small{
    font-size:7px;
  }

  .view{
    padding-inline:18px!important;
  }
  .discover-home{
    padding-inline:18px!important;
  }
  .discover-shortcuts{
    margin-inline:-18px!important;
    padding-inline:14px!important;
    justify-content:flex-start!important;
  }
  .discover-shortcuts button{
    min-width:86px;
    font-size:9px;
  }

  .discover-feature{
    min-height:auto!important;
    margin-top:14px!important;
  }
  .discover-feature-content{
    min-height:620px!important;
    grid-template-columns:1fr!important;
    align-content:end!important;
    gap:12px!important;
    padding:30px 24px 38px!important;
  }
  .discover-feature-overlay{
    background:
      linear-gradient(0deg,rgba(8,8,9,.99) 12%,rgba(8,8,9,.76) 65%,rgba(8,8,9,.3))!important;
  }
  .feature-work-collage{
    width:100%;
    min-height:260px!important;
    order:1;
  }
  .feature-copy{
    max-width:760px!important;
    order:2;
    text-align:center;
    margin-inline:auto;
  }
  .feature-label-row,
  .feature-stats,
  .feature-actions,
  .feature-slider-controls{
    justify-content:center!important;
  }
  .feature-copy h1{
    font-size:clamp(38px,7vw,58px)!important;
    line-height:1.18!important;
    letter-spacing:-1px!important;
  }
  .feature-copy>p{
    max-width:680px!important;
    margin-inline:auto!important;
    font-size:12px!important;
    line-height:1.95!important;
  }
  .feature-mini-work{
    width:135px!important;
  }
  .feature-mini-1{right:calc(50% - 35px)!important;top:0!important}
  .feature-mini-2{right:calc(50% + 78px)!important;top:44px!important}
  .feature-mini-3{right:calc(50% - 145px)!important;top:72px!important}
  .feature-mini-4{display:none!important}

  .discover-section{
    padding-top:52px!important;
  }
  .discover-section-heading h2{
    font-size:30px!important;
  }
  .discover-section-heading p{
    font-size:10px!important;
  }
  .top-collection-copy h3{
    font-size:11px!important;
  }
  .top-collection-copy p,
  .collection-shelf-head p{
    font-size:8px!important;
  }
  .collection-shelf-head h3{
    font-size:18px!important;
  }
  .shelf-work-card h3,
  .poster-copy h3{
    font-size:10px!important;
  }
  .shelf-work-card p,
  .poster-copy p{
    font-size:7px!important;
  }
  .media-rail{
    grid-auto-columns:minmax(150px,1fr)!important;
  }
  .shelf-track{
    grid-auto-columns:minmax(140px,1fr)!important;
  }

  .page-head h1{
    font-size:38px!important;
  }
  .page-head p{
    font-size:11px!important;
  }
}

@media(max-width:740px){
  body{
    padding-bottom:112px!important;
  }
  .view,
  .discover-home{
    padding-inline:13px!important;
  }
  .discover-shortcuts{
    margin-inline:-13px!important;
  }
  .member-dock{
    width:calc(100vw - 12px)!important;
    height:72px!important;
    min-height:72px!important;
    max-height:72px!important;
    padding:5px 3px!important;
  }
  .member-dock>.dock-profile{
    flex-basis:76px!important;
    width:76px!important;
  }
  .dock-profile{
    margin-top:-24px!important;
  }
  .dock-profile-ring{
    width:65px!important;
    height:65px!important;
  }
  .dock-profile-avatar{
    width:48px!important;
    height:48px!important;
  }
  .dock-item{
    height:58px!important;
    padding-inline:1px!important;
  }
  .dock-item svg{
    width:21px!important;
    height:21px!important;
  }
  .dock-item>span:last-child{
    width:auto!important;
    max-width:62px!important;
    font-size:6px!important;
  }

  .discover-feature-content{
    min-height:590px!important;
    padding:25px 17px 32px!important;
  }
  .feature-copy h1{
    font-size:35px!important;
  }
  .feature-copy>p{
    font-size:10px!important;
  }
  .feature-stats{
    flex-wrap:wrap;
  }
  .feature-mini-work{
    width:108px!important;
  }
  .feature-mini-1{right:calc(50% - 30px)!important}
  .feature-mini-2{right:calc(50% + 58px)!important}
  .feature-mini-3{right:calc(50% - 116px)!important}
  .discover-section-heading h2{
    font-size:24px!important;
  }
  .media-rail{
    grid-auto-columns:140px!important;
  }
  .shelf-track{
    grid-auto-columns:125px!important;
  }
}

@media(max-width:370px){
  .member-dock>.dock-profile{
    flex-basis:68px!important;
    width:68px!important;
  }
  .dock-item>span:last-child{
    max-width:48px!important;
    font-size:5.5px!important;
  }
}


/* =========================================================
   V12 — Clean comic discovery platform interface
   Structural inspiration from the user-provided offline page.
   ========================================================= */
:root{
  --accent:#00c99a;
  --accent2:#00c99a;
  --platform-max:1240px;
  --platform-soft:#f6f7f8;
}
body.light{
  --bg:#ffffff;
  --surface:#ffffff;
  --surface2:#f5f6f7;
  --surface3:#ebedef;
  --text:#121315;
  --muted:#73767d;
  --line:#e5e7ea;
}
body:not(.light){
  --bg:#0b0c0e;
  --surface:#111214;
  --surface2:#181a1d;
  --surface3:#222429;
  --text:#f5f6f7;
  --muted:#989ca5;
  --line:#282b30;
}
body{
  background:var(--bg);
}
.site-header.platform-header{
  height:72px;
  padding:0 max(24px,calc((100vw - var(--platform-max))/2));
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:28px;
  border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--bg) 95%,transparent);
}
.platform-brand{
  gap:10px;
}
.platform-brand .brand-mark{
  width:38px;
  height:38px;
  border-radius:10px;
  background:#111;
  color:#fff;
  box-shadow:none;
}
body:not(.light) .platform-brand .brand-mark{
  background:#fff;
  color:#111;
}
.platform-brand strong{
  font-size:14px;
  letter-spacing:-.2px;
}
.platform-brand small{
  margin-top:2px;
  font-size:6px;
}
.platform-nav{
  justify-content:center;
  gap:3px;
}
.platform-nav button{
  padding:10px 15px;
  border-radius:999px;
  font-size:9px;
}
.platform-nav button.active,
.platform-nav button:hover{
  background:var(--surface2);
  color:var(--text);
}
.platform-actions{
  gap:7px;
}
.platform-actions .icon-button{
  width:38px;
  height:38px;
  border-radius:50%;
  border-color:transparent;
  background:var(--surface2);
}
.all-series-button{
  height:38px;
  padding:0 14px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--surface);
  color:var(--text);
  font-size:8px;
}
.all-series-button span{
  margin-right:6px;
}
.header-profile-hidden{
  display:none!important;
}
.view{
  width:min(var(--platform-max),calc(100% - 40px));
  margin-inline:auto;
  padding-inline:0;
}
.tappy-home{
  padding-top:0;
}
.discover-page-title{
  display:flex;
  justify-content:space-between;
  align-items:end;
  padding:42px 0 18px;
}
.page-overline,
.section-kicker{
  color:var(--accent);
  font-size:7px;
  font-weight:800;
  letter-spacing:1.4px;
}
.discover-page-title h1{
  margin:5px 0 4px;
  font-size:40px;
  line-height:1.2;
}
.discover-page-title p{
  margin:0;
  color:var(--muted);
  font-size:9px;
}
.platform-shortcuts{
  position:static;
  justify-content:flex-start;
  gap:12px;
  margin:0;
  padding:12px 0 24px;
  border:0;
  background:transparent!important;
  overflow-x:auto;
  scrollbar-width:none;
}
.platform-shortcuts button{
  min-width:92px;
  display:grid;
  justify-items:center;
  gap:7px;
  padding:0;
  background:transparent!important;
  color:var(--muted);
}
.platform-shortcuts button strong{
  font-size:8px;
}
.shortcut-icon{
  width:68px;
  height:68px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:22px;
  background:var(--surface2);
  color:var(--text);
  font:700 24px Arial,sans-serif;
  transition:.22s;
}
.platform-shortcuts button:hover .shortcut-icon,
.platform-shortcuts button.active .shortcut-icon{
  border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 12%,var(--surface2));
  color:var(--accent);
  transform:translateY(-3px);
}
.platform-shortcuts button.active strong{
  color:var(--text);
}
.platform-feature{
  min-height:430px;
  margin-top:6px;
  border:0;
  border-radius:22px;
  background:#161719;
  box-shadow:none;
}
.platform-feature .discover-feature-overlay{
  background:
    linear-gradient(90deg,rgba(12,13,15,.96) 7%,rgba(12,13,15,.76) 54%,rgba(12,13,15,.22)),
    linear-gradient(0deg,rgba(12,13,15,.44),transparent 65%);
}
.platform-feature .discover-feature-content{
  min-height:430px;
  grid-template-columns:minmax(0,1fr) 430px;
  gap:38px;
  padding:40px 5%;
}
.platform-feature .feature-copy h2{
  max-width:680px;
  margin:16px 0 10px;
  color:#fff;
  font-size:clamp(35px,5vw,62px);
  line-height:1.25;
}
.platform-feature .feature-copy>p{
  max-width:600px;
  color:#d1d3d7;
  font-size:10px;
}
.platform-feature .feature-label{
  background:var(--accent);
}
.platform-feature .feature-rank{
  color:#fff;
}
.platform-feature .feature-stats span{
  border-color:rgba(255,255,255,.18);
  background:rgba(0,0,0,.22);
}
.platform-feature .feature-actions .secondary-button{
  color:#fff;
}
.platform-feature-covers{
  min-height:350px;
}
.platform-feature-covers .feature-mini-work{
  width:170px;
}
.platform-feature-covers .feature-mini-work img{
  border-radius:10px;
  box-shadow:0 18px 42px rgba(0,0,0,.42);
}
.platform-feature-covers .feature-mini-1{right:20px;top:0;transform:rotate(2deg)}
.platform-feature-covers .feature-mini-2{right:175px;top:55px;transform:rotate(-4deg)}
.platform-feature-covers .feature-mini-3{right:70px;top:175px;transform:rotate(4deg)}
.platform-feature-covers .feature-mini-4{display:none}
.platform-section{
  padding-top:54px;
}
.platform-section .discover-section-heading{
  margin-bottom:17px;
}
.platform-section .discover-section-heading h2{
  margin-top:5px;
  font-size:25px;
}
.platform-section .plain-link{
  color:var(--text);
}
.platform-section .plain-link:hover{
  color:var(--accent);
}
.platform-media-rail,
.platform-shelf-track{
  grid-auto-columns:minmax(154px,1fr);
  gap:16px;
  padding-bottom:15px;
}
.platform-poster-card{
  min-width:0;
}
.platform-poster-card .poster-cover{
  aspect-ratio:3/4.25;
  border:0;
  border-radius:10px;
  background:var(--surface2);
}
.platform-poster-card:hover{
  transform:none;
}
.platform-poster-card:hover .poster-cover{
  border:0;
  box-shadow:none;
}
.platform-poster-card:hover .poster-cover img{
  transform:scale(1.035);
}
.platform-poster-card .poster-status-badge{
  position:absolute;
  right:7px;
  top:7px;
  padding:5px 7px;
  border-radius:5px;
  background:rgba(10,10,12,.72);
  color:#fff;
  font-size:6px;
  backdrop-filter:blur(8px);
}
.platform-poster-card .poster-follow{
  position:absolute;
  left:7px;
  top:7px;
  width:31px;
  height:31px;
  border:0;
  border-radius:50%;
  background:rgba(10,10,12,.72);
  color:#fff;
}
.platform-poster-card .poster-follow.following{
  background:var(--accent);
}
.platform-poster-card .poster-copy{
  padding:10px 1px 0;
}
.platform-poster-card .poster-copy h3{
  margin:0 0 5px;
  font-size:9px;
}
.platform-poster-card .poster-copy>p{
  margin:0;
  color:var(--muted);
  font-size:6.5px;
}
.poster-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:7px;
  margin-top:7px;
}
.poster-meta span{
  color:var(--accent);
  font:800 8px Arial,sans-serif;
}
.poster-meta small{
  color:var(--muted);
  font-size:6px;
}
.platform-collection-rail{
  grid-auto-columns:minmax(315px,1fr);
  gap:14px;
}
.platform-collection-card{
  min-height:170px;
  display:grid;
  grid-template-columns:138px 1fr;
  align-items:center;
  gap:16px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface);
}
.platform-collection-card:hover{
  border-color:color-mix(in srgb,var(--accent) 55%,var(--line));
}
.platform-collection-visual{
  height:145px;
  position:relative;
}
.platform-collection-main{
  width:104px;
  height:145px;
  object-fit:cover;
  border-radius:9px;
}
.platform-collection-stack{
  position:absolute;
  left:0;
  bottom:7px;
  display:flex;
}
.platform-collection-stack img{
  width:54px;
  height:75px;
  margin-right:-20px;
  object-fit:cover;
  border:3px solid var(--surface);
  border-radius:7px;
}
.platform-collection-card .top-collection-rank{
  right:auto;
  left:4px;
  top:4px;
  background:var(--accent);
}
.platform-collection-card .top-collection-copy h3{
  margin:8px 0 7px;
  font-size:12px;
}
.platform-collection-card .top-collection-copy p{
  line-height:1.7;
}
.platform-shelves{
  gap:38px;
}
.platform-shelf{
  padding:0;
  border:0;
  background:transparent;
}
.platform-shelf .collection-shelf-head{
  align-items:center;
}
.platform-shelf .collection-shelf-head>div{
  align-items:center;
}
.shelf-avatar{
  width:48px;
  height:48px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border-radius:15px;
  background:var(--surface2);
  font-size:19px;
}
.platform-shelf .collection-shelf-head h3{
  margin:3px 0;
  font-size:15px;
}
.platform-shelf .collection-shelf-head p{
  max-width:700px;
}
.platform-shelf .shelf-progress{
  display:none;
}
.platform-shelf-track .platform-poster-card{
  width:auto;
}
.platform-shelf-track .platform-poster-card .poster-cover{
  aspect-ratio:3/4.25;
}
.platform-page-head{
  padding-top:48px;
}
.platform-page-head h1{
  font-size:36px;
}
.platform-inner-view{
  min-height:70vh;
}

/* Detail pages use the same restrained platform surfaces. */
.series-hero,
.curation-hero{
  border-radius:18px;
}
.series-section,
.series-info-card,
.editor-shell,
.admin-dashboard,
.api-search-card,
.filter-bar{
  border-radius:12px;
  box-shadow:none;
}
.series-tabs{
  background:color-mix(in srgb,var(--bg) 94%,transparent);
}

/* Dock becomes visually consistent with the clean interface. */
.member-dock{
  border-radius:22px;
  border-color:var(--line);
  background:color-mix(in srgb,var(--bg) 96%,transparent);
  box-shadow:0 13px 35px rgba(0,0,0,.18);
}
body.light .member-dock{
  background:rgba(255,255,255,.97);
}
.dock-item{
  border-radius:13px;
}
.dock-profile-ring{
  border-color:var(--bg);
}
body.light .dock-profile-ring{
  border-color:#fff;
}
.dock-profile-avatar{
  background:var(--accent);
}

@media(max-width:1024px){
  .site-header.platform-header{
    padding-inline:18px!important;
  }
  .platform-feature .discover-feature-content{
    grid-template-columns:1fr 320px!important;
    min-height:430px!important;
  }
  .platform-feature-covers .feature-mini-work{
    width:135px!important;
  }
}
@media(max-width:740px){
  .site-header.platform-header{
    height:62px;
    padding-inline:13px!important;
  }
  .platform-brand .brand-mark{
    width:35px;
    height:35px;
  }
  .platform-brand .brand-copy small{
    display:none;
  }
  .platform-actions .all-series-button{
    display:none;
  }
  .platform-actions .icon-button{
    width:35px;
    height:35px;
  }
  .view{
    width:calc(100% - 26px);
  }
  .discover-page-title{
    padding-top:27px;
  }
  .discover-page-title h1{
    font-size:31px;
  }
  .platform-shortcuts{
    gap:8px;
    padding-bottom:18px;
  }
  .platform-shortcuts button{
    min-width:72px;
  }
  .shortcut-icon{
    width:57px;
    height:57px;
    border-radius:18px;
    font-size:20px;
  }
  .platform-feature{
    min-height:510px!important;
    border-radius:15px;
  }
  .platform-feature .discover-feature-content{
    min-height:510px!important;
    grid-template-columns:1fr!important;
    align-content:end!important;
    padding:22px 18px 30px!important;
  }
  .platform-feature-covers{
    min-height:180px!important;
  }
  .platform-feature-covers .feature-mini-work{
    width:100px!important;
  }
  .platform-feature-covers .feature-mini-1{right:calc(50% - 28px)!important;top:0!important}
  .platform-feature-covers .feature-mini-2{right:calc(50% + 54px)!important;top:22px!important}
  .platform-feature-covers .feature-mini-3{right:calc(50% - 110px)!important;top:38px!important}
  .platform-feature .feature-copy h2{
    font-size:32px!important;
  }
  .platform-feature .feature-copy>p{
    font-size:9px!important;
  }
  .platform-section{
    padding-top:43px;
  }
  .platform-section .discover-section-heading h2{
    font-size:21px!important;
  }
  .platform-media-rail,
  .platform-shelf-track{
    grid-auto-columns:122px!important;
    gap:11px!important;
  }
  .platform-collection-rail{
    grid-auto-columns:280px;
  }
  .platform-collection-card{
    grid-template-columns:115px 1fr;
    min-height:145px;
  }
  .platform-collection-visual{
    height:120px;
  }
  .platform-collection-main{
    width:87px;
    height:120px;
  }
  .platform-collection-stack img{
    width:43px;
    height:60px;
  }
  .platform-poster-card .poster-copy h3{
    font-size:8px!important;
  }
  .platform-shelf .collection-shelf-head p{
    display:none;
  }
  .shelf-avatar{
    width:42px;
    height:42px;
  }
}


.overview-hero-head{min-height:200px;align-items:center!important}
.overview-hero-copy{display:grid;gap:10px}
.overview-title-stack{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px}
.overview-accent-title{color:#e6545d;font-size:27px!important;line-height:1.3!important;font-weight:900}
.translation-stat-card strong{color:#1d64db!important}
.translation-stat-card small{color:#8b5cf6!important}
.integrated-hidden-results{display:none!important}
.integrated-vote-boxes .recommendation-vote-box{position:relative;overflow:hidden}
.integrated-vote-boxes .vote-box-percent{position:absolute;top:14px;left:14px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.88);color:#2a2a31;font-size:12px!important;font-weight:900;line-height:1;opacity:0;transform:translateY(-8px) scale(.92);transition:.35s ease;box-shadow:0 8px 18px rgba(20,20,24,.08)}
.integrated-vote-boxes .vote-box-percent.visible{opacity:1;transform:translateY(0) scale(1)}
.integrated-vote-boxes .vote-box-note{position:relative;z-index:2}
.integrated-vote-boxes .vote-box-meter{position:absolute;right:14px;left:14px;bottom:14px;height:10px;border-radius:999px;background:rgba(20,20,28,.08);overflow:hidden;opacity:0;transform:translateY(8px);transition:.35s ease}
.integrated-vote-boxes .vote-box-meter-fill{display:block;width:0%;height:100%;border-radius:inherit;transition:width .8s cubic-bezier(.2,.85,.25,1)}
.integrated-vote-boxes .recommend-box .vote-box-meter-fill{background:linear-gradient(90deg,#20b867,#63df98)}
.integrated-vote-boxes .acceptable-box .vote-box-meter-fill{background:linear-gradient(90deg,#d2a400,#f0cf56)}
.integrated-vote-boxes .reject-box .vote-box-meter-fill{background:linear-gradient(90deg,#ea4f5d,#ff8993)}
.integrated-vote-boxes .recommendation-vote-box.has-inline-results .vote-box-meter{opacity:1;transform:translateY(0)}
.integrated-vote-boxes .recommendation-vote-box.has-inline-results{padding-bottom:30px!important}
.integrated-vote-boxes .recommendation-vote-box.active .vote-box-percent,.integrated-vote-boxes .recommendation-vote-box.preview-active .vote-box-percent{background:rgba(255,255,255,.2);color:#fff}
.integrated-vote-boxes .recommendation-vote-box.active .vote-box-meter,.integrated-vote-boxes .recommendation-vote-box.preview-active .vote-box-meter{background:rgba(255,255,255,.2)}
@media(max-width:740px){
 .overview-title-stack{display:block}
 .overview-title-stack h2{margin-bottom:4px}
 .overview-accent-title{display:block;font-size:23px!important}
 .integrated-vote-boxes .vote-box-percent{top:10px;left:10px;padding:5px 8px;font-size:10px!important}
 .integrated-vote-boxes .vote-box-meter{right:10px;left:10px;bottom:10px;height:8px}
 .integrated-vote-boxes .recommendation-vote-box.has-inline-results{padding-bottom:24px!important}
}
body:not(.light) .translation-stat-card strong{color:#79a7ff!important}
body:not(.light) .integrated-vote-boxes .vote-box-percent{background:rgba(255,255,255,.12);color:#f7f7fa}
body:not(.light) .integrated-vote-boxes .vote-box-meter{background:rgba(255,255,255,.10)}

/* ===== v13-exact-platform ===== */
:root{
  --exact-green:#00d6a3;
  --exact-red:#ff4c67;
  --exact-yellow:#ffc83d;
  --exact-blue:#4e7cff;
  --exact-purple:#9a63ff;
  --exact-page-width:1180px;
}
body{
  background:#fff!important;
}
body:not(.light){
  background:#0c0c0e!important;
}
body.light{
  background:#fff!important;
}
.exact-platform-header{
  height:64px!important;
  position:sticky;
  top:0;
  z-index:70;
  display:grid!important;
  grid-template-columns:1fr auto 1fr!important;
  align-items:center;
  width:100%;
  padding:0 max(22px,calc((100vw - var(--exact-page-width))/2))!important;
  border-bottom:1px solid var(--line)!important;
  background:rgba(255,255,255,.97)!important;
  backdrop-filter:blur(16px);
}
body:not(.light) .exact-platform-header{
  background:rgba(12,12,14,.97)!important;
}
.exact-logo{
  justify-self:start;
  display:flex;
  align-items:center;
  gap:9px;
}
.exact-logo-symbol{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#111;
  color:#fff;
  font:900 14px Arial,sans-serif;
}
body:not(.light) .exact-logo-symbol{
  background:#fff;
  color:#111;
}
.exact-logo strong{
  color:var(--text);
  font-size:14px;
}
.exact-main-tabs{
  height:100%;
  display:flex;
  align-items:center;
  gap:4px;
}
.exact-main-tabs button{
  height:100%;
  border:0;
  border-bottom:2px solid transparent;
  background:transparent;
  color:var(--muted);
  padding:0 18px;
  font-size:9px;
  font-weight:700;
}
.exact-main-tabs button.active,
.exact-main-tabs button:hover{
  border-bottom-color:var(--text);
  color:var(--text);
}
.exact-header-actions{
  justify-self:end;
  display:flex;
  align-items:center;
  gap:7px;
}
.exact-header-icon{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:50%;
  background:transparent;
  color:var(--text);
}
.exact-header-icon:hover{
  background:var(--surface2);
}
.exact-header-icon svg{
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.exact-all-series{
  height:36px;
  padding:0 13px;
  border:1px solid var(--line);
  border-radius:999px;
  background:transparent;
  color:var(--text);
  font-size:8px;
}
.exact-discover-page{
  width:min(var(--exact-page-width),calc(100% - 40px))!important;
  margin:0 auto!important;
  padding:0 0 130px!important;
}
.exact-page-top{
  padding:38px 0 17px;
}
.exact-page-top h1{
  margin:0;
  color:var(--text);
  font-size:34px;
  line-height:1.2;
}

.exact-feature-carousel{
  min-height:365px;
  position:relative;
  overflow:hidden;
  border-radius:14px;
  background:#17171a;
}
.exact-feature-background{
  position:absolute;
  inset:0;
  background:center/cover no-repeat;
  filter:saturate(.74);
  transform:scale(1.025);
}
.exact-feature-shade{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(12,12,15,.96) 5%,rgba(12,12,15,.76) 52%,rgba(12,12,15,.22)),
    linear-gradient(0deg,rgba(12,12,15,.36),transparent);
}
.exact-feature-inner{
  min-height:365px;
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1fr) 410px;
  align-items:center;
  gap:30px;
  padding:36px 5%;
}
.exact-feature-copy{
  max-width:640px;
  color:#fff;
}
.exact-feature-label{
  display:inline-block;
  color:var(--exact-green);
  font:800 8px Arial,sans-serif;
  letter-spacing:1.2px;
}
.exact-feature-copy h2{
  margin:13px 0 8px;
  font-size:clamp(30px,4.3vw,52px);
  line-height:1.28;
}
.exact-feature-copy>p{
  max-width:580px;
  margin:0;
  color:#d2d2d6;
  font-size:9px;
  line-height:1.95;
}
.exact-feature-meta{
  display:flex;
  align-items:center;
  gap:15px;
  margin-top:18px;
  color:#d4d4d8;
  font-size:7px;
}
.exact-feature-meta b{
  color:#fff;
  font:800 13px Arial,sans-serif;
}
.exact-feature-actions{
  display:flex;
  gap:8px;
  margin-top:20px;
}
.exact-solid-button,
.exact-outline-button{
  padding:11px 16px;
  border-radius:7px;
  font-size:8px;
  font-weight:700;
}
.exact-solid-button{
  border:0;
  background:#fff;
  color:#111;
}
.exact-outline-button{
  border:1px solid rgba(255,255,255,.28);
  background:rgba(0,0,0,.2);
  color:#fff;
}
.exact-feature-pagination{
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:23px;
}
.exact-feature-pagination>button{
  width:30px;
  height:30px;
  border:1px solid rgba(255,255,255,.23);
  border-radius:50%;
  background:rgba(0,0,0,.22);
  color:#fff;
}
.exact-feature-posters{
  min-height:290px;
  position:relative;
}
.exact-feature-posters .feature-mini-work{
  width:145px!important;
}
.exact-feature-posters .feature-mini-work img{
  border-radius:8px!important;
  box-shadow:0 16px 35px rgba(0,0,0,.43)!important;
}
.exact-feature-posters .feature-mini-1{right:14px!important;top:0!important;transform:rotate(2deg)!important}
.exact-feature-posters .feature-mini-2{right:145px!important;top:39px!important;transform:rotate(-4deg)!important}
.exact-feature-posters .feature-mini-3{right:54px!important;top:135px!important;transform:rotate(4deg)!important}
.exact-feature-posters .feature-mini-4{display:none!important}
.exact-content-section{
  padding-top:46px;
}
.exact-section-header{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:15px;
  margin-bottom:15px;
}
.exact-section-header h2{
  margin:0;
  color:var(--text);
  font-size:22px;
}
.exact-section-header p{
  margin:6px 0 0;
  color:var(--muted);
  font-size:8px;
}
.exact-section-header button{
  border:0;
  background:transparent;
  color:var(--muted);
  font-size:8px;
}
.exact-section-header button:hover{
  color:var(--text);
}
.exact-auto-update{
  color:var(--muted);
  font-size:7px;
}
.exact-auto-update i{
  display:inline-block;
  width:6px;
  height:6px;
  margin-left:5px;
  border-radius:50%;
  background:var(--exact-green);
}
.exact-poster-rail,
.exact-wide-rail{
  display:grid!important;
  grid-auto-flow:column!important;
  overflow-x:auto!important;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.exact-poster-rail::-webkit-scrollbar,
.exact-wide-rail::-webkit-scrollbar{display:none}
.exact-poster-rail{
  grid-auto-columns:minmax(145px,1fr)!important;
  gap:14px!important;
}
.exact-wide-rail{
  grid-auto-columns:300px!important;
  gap:12px!important;
}
.exact-poster-rail .platform-poster-card .poster-cover,
.exact-shelves .platform-poster-card .poster-cover{
  border-radius:7px!important;
}
.exact-poster-rail .platform-poster-card .poster-copy h3,
.exact-shelves .platform-poster-card .poster-copy h3{
  font-size:9px!important;
}
.exact-poster-rail .platform-poster-card .poster-copy>p,
.exact-shelves .platform-poster-card .poster-copy>p{
  font-size:6.5px!important;
}
.exact-wide-rail .platform-collection-card{
  min-height:145px!important;
  border-radius:9px!important;
}
.exact-shelves{
  gap:34px!important;
}
.exact-shelves .platform-shelf{
  padding-top:0!important;
}
.exact-shelves .collection-shelf-head{
  margin-bottom:12px!important;
}
.exact-shelves .platform-shelf-track{
  grid-auto-columns:145px!important;
}
.member-dock{
  z-index:100!important;
}
@media(max-width:900px){
  .exact-feature-inner{
    grid-template-columns:1fr 300px;
  }
  .exact-feature-posters .feature-mini-work{
    width:120px!important;
  }
  .exact-feature-posters .feature-mini-2{
    right:115px!important;
  }
}
@media(max-width:740px){
  .exact-platform-header{
    height:58px!important;
    display:flex!important;
    justify-content:space-between!important;
    padding:0 13px!important;
  }
  .exact-logo strong{
    font-size:12px;
  }
  .exact-main-tabs,
  .exact-all-series{
    display:none!important;
  }
  .exact-header-actions{
    margin-right:auto;
  }
  .exact-header-icon{
    width:34px;
    height:34px;
  }
  .exact-discover-page{
    width:calc(100% - 24px)!important;
    padding-bottom:110px!important;
  }
  .exact-page-top{
    padding:25px 0 13px;
  }
  .exact-page-top h1{
    font-size:28px;
  }
  .exact-menu-art{
    width:58px;
    height:58px;
    font-size:20px;
  }
  .exact-discover-menu button strong{
    font-size:7px;
  }
  .exact-feature-carousel{
    min-height:510px;
    border-radius:10px;
  }
  .exact-feature-shade{
    background:
      linear-gradient(0deg,rgba(11,11,13,.98) 15%,rgba(11,11,13,.76) 70%,rgba(11,11,13,.28));
  }
  .exact-feature-inner{
    min-height:510px;
    grid-template-columns:1fr;
    align-content:end;
    gap:10px;
    padding:22px 17px 28px;
  }
  .exact-feature-posters{
    min-height:180px;
    order:1;
  }
  .exact-feature-copy{
    order:2;
    text-align:center;
  }
  .exact-feature-copy h2{
    font-size:31px;
  }
  .exact-feature-copy>p{
    font-size:8px;
  }
  .exact-feature-meta,
  .exact-feature-actions,
  .exact-feature-pagination{
    justify-content:center;
  }
  .exact-feature-posters .feature-mini-work{
    width:96px!important;
  }
  .exact-feature-posters .feature-mini-1{right:calc(50% - 26px)!important;top:0!important}
  .exact-feature-posters .feature-mini-2{right:calc(50% + 51px)!important;top:23px!important}
  .exact-feature-posters .feature-mini-3{right:calc(50% - 105px)!important;top:42px!important}
  .exact-content-section{
    padding-top:38px;
  }
  .exact-section-header h2{
    font-size:19px;
  }
  .exact-poster-rail{
    grid-auto-columns:124px!important;
    gap:10px!important;
  }
  .exact-wide-rail{
    grid-auto-columns:270px!important;
  }
  .exact-shelves .platform-shelf-track{
    grid-auto-columns:124px!important;
  }
}

/* ===== v13-plus-recommendations-icons ===== */
.brand-logo-svg{width:34px;height:34px;display:block}
.exact-logo-symbol{display:grid;place-items:center;color:#111;background:transparent!important;width:34px!important;height:34px!important}
body:not(.light) .exact-logo-symbol{color:#fff}
.exact-menu-art{display:grid;place-items:center}
.exact-menu-art svg{width:30px;height:30px;display:block;color:#fff}
.exact-art-popular svg{width:28px;height:28px}
.exact-content-section .exact-section-header p{max-width:620px;line-height:1.8}

.recommendation-shelf-rail{
  display:grid;
  gap:18px;
}
.recommendation-shelf-card{
  display:grid;
  grid-template-columns:200px minmax(0,1fr);
  gap:18px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface);
  overflow:hidden;
  min-width:0;
}
.recommendation-shelf-cover{
  position:relative;
  min-height:210px;
  background:var(--surface2);
}
.recommendation-shelf-cover>img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.recommendation-shelf-cover:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,rgba(0,0,0,.2),transparent 50%);
  pointer-events:none;
}
.recommendation-shelf-body{
  padding:18px 18px 16px 0;
  display:grid;
  gap:12px;
  min-width:0;
}
.recommendation-shelf-top{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-start;
}
.recommendation-shelf-kicker{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:var(--accent);
  font-size:7px;
  font-weight:800;
  letter-spacing:.8px;
}
.recommendation-shelf-kicker i{
  width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb,var(--accent) 14%,var(--surface2));
  font-style:normal;
}
.recommendation-shelf-top h3{
  margin:7px 0 6px;
  font-size:14px;
  line-height:1.6;
}
.recommendation-shelf-top p{
  margin:0;
  color:var(--muted);
  font-size:7px;
  line-height:1.9;
}
.recommendation-shelf-meta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.recommendation-shelf-meta span{
  padding:6px 9px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--surface2);
  color:var(--muted);
  font-size:7px;
}
.recommendation-shelf-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.recommendation-shelf-actions button{
  padding:9px 12px;
  border-radius:8px;
  font-size:7px;
}
.recommendation-work-thumbs{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
}
.recommendation-thumb{
  cursor:pointer;
  min-width:0;
}
.recommendation-thumb img{
  width:100%;
  aspect-ratio:5/7;
  object-fit:cover;
  border-radius:8px;
  border:1px solid var(--line);
  background:var(--surface2);
}
.recommendation-thumb b{
  display:block;
  margin-top:6px;
  font-size:7px;
  font-weight:700;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.recommendation-thumb small{
  display:block;
  color:var(--muted);
  font-size:6px;
  margin-top:2px;
}

@media(max-width:900px){
  .recommendation-shelf-card{grid-template-columns:160px minmax(0,1fr)}
  .recommendation-work-thumbs{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:740px){
  .exact-menu-art svg{width:25px;height:25px}
  .recommendation-shelf-card{
    grid-template-columns:1fr;
    gap:0;
  }
  .recommendation-shelf-cover{
    min-height:180px;
  }
  .recommendation-shelf-body{
    padding:14px;
  }
  .recommendation-shelf-top{
    display:block;
  }
  .recommendation-shelf-top h3{
    font-size:12px;
  }
  .recommendation-shelf-meta{
    gap:7px;
  }
  .recommendation-work-thumbs{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

/* ===== icons-data-uri-fix ===== */
.icon-img-brand{display:block;width:34px;height:34px;object-fit:contain}
.exact-logo-symbol{display:grid!important;place-items:center!important;width:34px!important;height:34px!important;background:transparent!important;color:transparent!important}
.icon-img-menu{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important}
.exact-menu-art{padding:0!important;background:transparent!important;overflow:visible!important;box-shadow:none!important}
.exact-menu-art:before,.exact-menu-art:after{display:none!important}
.dock-icon-img{display:block!important;width:25px!important;height:25px!important;object-fit:contain!important;flex:0 0 auto}
.dock-item.active .dock-icon-img{filter:brightness(0) saturate(100%) invert(46%) sepia(99%) saturate(2774%) hue-rotate(239deg) brightness(103%) contrast(101%)}
body.light .dock-icon-img{filter:brightness(.55)}
body.light .dock-item.active .dock-icon-img{filter:brightness(0) saturate(100%) invert(38%) sepia(87%) saturate(2852%) hue-rotate(242deg) brightness(94%) contrast(98%)}

/* ===== mi-quick-tabs-style ===== */
.mi-quick-tabs{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
  margin:8px 0 24px;
}

.mi-quick-tabs button{
  min-height:72px;
  min-width:168px;
  padding:9px 24px;
  border-radius:999px;
  border:1.5px solid rgba(255,255,255,.13);
  background:rgba(255,255,255,.035);
  color:#f5f3fa;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:13px;
  font-size:15px;
  font-weight:800;
  transition:transform .18s ease, background .18s ease, border-color .18s ease;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}

.mi-quick-tabs button:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.065);
  border-color:rgba(255,255,255,.22);
}

.mi-quick-tabs button.active{
  background:#050506;
  border-color:#050506;
  color:#fff;
  box-shadow:0 12px 28px rgba(0,0,0,.24);
}

.mi-quick-icon{
  width:48px;
  height:48px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  overflow:visible!important;
}

.mi-quick-icon::before,
.mi-quick-icon::after{
  display:none!important;
}

.mi-quick-icon img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  background:transparent!important;
  filter:drop-shadow(0 5px 9px rgba(0,0,0,.22));
  pointer-events:none;
}

body.light .mi-quick-tabs button{
  background:#fff;
  color:#141318;
  border-color:#dfdde4;
  box-shadow:0 5px 15px rgba(20,18,28,.04);
}

body.light .mi-quick-tabs button:hover{
  background:#fafafa;
  border-color:#cfccd4;
}

body.light .mi-quick-tabs button.active{
  background:#050506;
  color:#fff;
  border-color:#050506;
}

@media(max-width:900px){
  .mi-quick-tabs{
    overflow-x:auto;
    flex-wrap:nowrap;
    padding-bottom:6px;
    scrollbar-width:none;
  }

  .mi-quick-tabs::-webkit-scrollbar{
    display:none;
  }

  .mi-quick-tabs button{
    min-width:max-content;
    flex:0 0 auto;
  }
}

@media(max-width:740px){
  .mi-quick-tabs{
    gap:9px;
    margin:8px 0 18px;
  }

  .mi-quick-tabs button{
    min-height:60px;
    padding:7px 17px;
    font-size:13px;
    gap:10px;
  }

  .mi-quick-icon{
    width:42px;
    height:42px;
  }
}

/* ===== mi-stability-fixes ===== */
html{scroll-behavior:auto}
body{font-family:Tahoma,Arial,sans-serif!important}

.feature-timer,
.shelf-progress{
  display:none!important;
}

.reveal{
  opacity:1!important;
  transform:none!important;
  transition:none!important;
}

button,
[data-open-work],
[data-open-collection]{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

@media(max-width:740px){
  .exact-platform-header,
  .member-dock,
  .dock-sheet,
  .dock-sheet-backdrop,
  .search-overlay,
  .series-tabs{
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }

  .poster-card,
  .collection-card,
  .top-collection-card,
  .feature-mini-work{
    transition:none!important;
  }

  .poster-cover,
  .recommendation-shelf-card,
  .platform-collection-card{
    box-shadow:none!important;
  }
}

/* ===== mi-smaller-pills ===== */
.mi-quick-tabs{
  gap:9px!important;
  margin:6px 0 18px!important;
}

.mi-quick-tabs button{
  min-height:52px!important;
  min-width:132px!important;
  padding:6px 17px!important;
  gap:9px!important;
  font-size:13px!important;
  border-radius:999px!important;
}

.mi-quick-icon{
  width:36px!important;
  height:36px!important;
}

.mi-quick-icon img{
  width:100%!important;
  height:100%!important;
}

@media(max-width:900px){
  .mi-quick-tabs button{
    min-width:max-content!important;
    padding:6px 15px!important;
  }
}

@media(max-width:740px){
  .mi-quick-tabs{
    gap:7px!important;
    margin:5px 0 15px!important;
  }

  .mi-quick-tabs button{
    min-height:44px!important;
    padding:5px 13px!important;
    gap:7px!important;
    font-size:11px!important;
  }

  .mi-quick-icon{
    width:30px!important;
    height:30px!important;
  }
}

/* ===== mi-tappy-detail-style ===== */
.tappy-detail-view{
  background:#f2f2f2!important;
  color:#151515!important;
  min-height:100vh;
  padding:0 0 120px;
}

.tappy-detail-header{
  position:sticky;
  top:0;
  z-index:30;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid #e5e5e5;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:18px 20px;
  backdrop-filter:blur(8px);
}

.tappy-detail-brand{
  font-weight:900;
  font-size:17px;
  color:#101010;
  cursor:pointer;
}

.tappy-detail-header-actions{
  display:flex;
  align-items:center;
  gap:12px;
}

.tappy-header-icon,
.tappy-back-button{
  border:0;
  background:transparent;
  color:#121212;
  font-size:28px;
  line-height:1;
  padding:0;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
}

.tappy-signup-button{
  border:0;
  background:transparent;
  color:#25cab4;
  font-weight:800;
  font-size:16px;
  padding:0;
}

.tappy-back-button{
  position:fixed;
  top:18px;
  left:14px;
  z-index:35;
}

.tappy-hero-shell{
  position:relative;
  min-height:420px;
  margin:0;
  padding:34px 22px 22px;
  background:linear-gradient(180deg,#d9d8d6,#f0efee);
  overflow:hidden;
}

.tappy-hero-shell .series-hero-blur{
  position:absolute;
  inset:0;
  background-position:center;
  background-size:cover;
  filter:blur(30px) saturate(.8);
  opacity:.15;
  transform:scale(1.08);
}

.tappy-hero-shell .series-hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.74));
}

.tappy-share-button{
  position:absolute;
  top:20px;
  right:18px;
  z-index:2;
  width:56px;
  height:56px;
  border-radius:18px;
  border:0;
  background:rgba(255,255,255,.72);
  color:#fff;
  font-size:28px;
  display:grid;
  place-items:center;
  box-shadow:0 12px 24px rgba(0,0,0,.08);
}

.tappy-cover-frame{
  position:relative;
  z-index:1;
  width:min(100%, 520px);
  margin:28px auto 0;
  display:flex;
  justify-content:center;
}

.tappy-cover-image{
  width:min(100%, 490px);
  aspect-ratio: 3 / 4;
  object-fit:cover;
  border-radius:24px;
  box-shadow:0 18px 44px rgba(0,0,0,.14);
  background:#e5e5e5;
}

.tappy-summary-panel{
  padding:22px 22px 10px;
  text-align:center;
  background:#f2f2f2;
}

.tappy-summary-panel h1{
  margin:0 0 12px;
  font-size:40px;
  line-height:1.08;
  color:#111;
  font-weight:900;
}

.tappy-meta-line,
.tappy-creator-line,
.tappy-alt-line{
  margin:0;
  color:#5b5b5f;
  font-size:16px;
  line-height:1.6;
}

.tappy-alt-line{
  margin-top:8px;
  font-size:14px;
  color:#7a7a82;
}

.tappy-icon-tabs{
  position:relative;
  top:auto;
  margin:8px auto 20px;
  width:min(100% - 24px, 720px);
  background:transparent!important;
  padding:0 10px;
  border:0!important;
  box-shadow:none!important;
  justify-content:space-evenly;
}

.tappy-icon-tabs button{
  flex:1 1 0;
  max-width:140px;
  min-height:58px;
  border:0;
  background:transparent;
  color:#a7a7ad;
  font-size:28px;
  border-bottom:4px solid transparent;
  border-radius:0;
  padding:0 6px 10px;
}

.tappy-icon-tabs button.active{
  color:#1b1b1d;
  border-bottom-color:#111;
  background:transparent!important;
  box-shadow:none!important;
}

.tappy-icon-tabs .tab-icon{
  display:inline-block;
  transform:translateY(2px);
}

.tappy-detail-content{
  width:min(100%, 780px);
  margin:0 auto;
  padding:0 16px;
}

.tappy-detail-main{
  display:grid;
  gap:16px;
}

.tappy-content-card{
  background:#fff;
  border:1px solid #ececec;
  border-radius:22px;
  padding:20px;
  box-shadow:0 10px 30px rgba(18,18,18,.04);
  color:#171717;
}

.tappy-content-card .series-section-title h2,
.tappy-content-card .community-head h2,
.tappy-content-card .comments-head h2,
.tappy-content-card .series-info-head h2{
  color:#171717;
}

.tappy-content-card .eyebrow{
  color:#8d8d95;
}

.tappy-content-card .series-synopsis,
.tappy-content-card p,
.tappy-content-card dt,
.tappy-content-card dd,
.tappy-content-card small,
.tappy-content-card label,
.tappy-content-card span{
  color:#383840;
}

.tappy-info-list{
  margin-top:8px;
  border-top:1px solid #ededf0;
}

.tappy-info-list > div{
  padding:13px 0;
  border-bottom:1px solid #efeff2;
}

.tappy-sub-block{
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid #ededf0;
}

.tappy-bottom-cta{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:40;
  padding:10px 18px 18px;
  background:linear-gradient(180deg,rgba(242,242,242,0),rgba(242,242,242,.95) 24%,#f2f2f2 56%);
  display:flex;
  align-items:center;
  gap:12px;
  direction:ltr;
}

.tappy-follow-cta{
  flex:1;
  height:74px;
  border:0;
  border-radius:999px;
  background:#111!important;
  color:#fff!important;
  font-size:19px;
  font-weight:900;
  box-shadow:0 18px 36px rgba(0,0,0,.16);
}

.tappy-follow-cta.following{
  background:#111!important;
  color:#fff!important;
}

.tappy-plus-cta{
  width:74px;
  height:74px;
  border-radius:50%;
  border:0;
  background:#1f1f23;
  color:#fff;
  font-size:42px;
  line-height:1;
  display:grid;
  place-items:center;
  box-shadow:0 18px 36px rgba(0,0,0,.15);
}

.tappy-hidden-support{
  display:none!important;
}

.tappy-detail-view .comment-composer,
.tappy-detail-view #commentsSort,
.tappy-detail-view .detail-collection-link,
.tappy-detail-view .site-rating-item,
.tappy-detail-view .review-card,
.tappy-detail-view .editor-note,
.tappy-detail-view .empty-gallery,
.tappy-detail-view .comments-list article{
  background:#fafafa;
  border-color:#ededed;
  color:#1c1c1f;
}

.tappy-detail-view .avatar{
  background:#111;
  color:#fff;
}

.tappy-detail-view .rating-scale button{
  background:#f7f7fa;
  color:#202025;
  border:1px solid #e6e6e8;
}

.tappy-detail-view .rating-scale button.active,
.tappy-detail-view .rating-scale button:hover{
  background:#111;
  color:#fff;
  border-color:#111;
}

.tappy-detail-view .primary-button,
.tappy-detail-view .secondary-button,
.tappy-detail-view .icon-button{
  border-radius:16px;
}

@media(max-width:740px){
  .tappy-detail-header{
    padding:16px 16px 16px 58px;
  }

  .tappy-detail-brand{
    font-size:15px;
  }

  .tappy-signup-button{
    font-size:14px;
  }

  .tappy-hero-shell{
    min-height:360px;
    padding:26px 16px 18px;
  }

  .tappy-share-button{
    width:50px;
    height:50px;
    border-radius:16px;
    font-size:24px;
    top:18px;
    right:14px;
  }

  .tappy-cover-image{
    width:min(100%, 430px);
    border-radius:20px;
  }

  .tappy-summary-panel{
    padding:18px 18px 8px;
  }

  .tappy-summary-panel h1{
    font-size:28px;
  }

  .tappy-meta-line,
  .tappy-creator-line{
    font-size:14px;
  }

  .tappy-icon-tabs{
    width:calc(100% - 20px);
    margin:2px auto 16px;
  }

  .tappy-icon-tabs button{
    min-height:50px;
    font-size:24px;
    padding-bottom:8px;
  }

  .tappy-detail-content{
    padding:0 10px;
  }

  .tappy-content-card{
    padding:16px;
    border-radius:18px;
  }

  .tappy-bottom-cta{
    padding:8px 14px 14px;
    gap:10px;
  }

  .tappy-follow-cta{
    height:64px;
    font-size:18px;
  }

  .tappy-plus-cta{
    width:64px;
    height:64px;
    font-size:36px;
  }
}

/* ===== mi-tappy-detail-refined ===== */
.tappy-detail-view{font-family:"Segoe UI",Arial,Tahoma,sans-serif!important}
.tappy-detail-header{min-height:74px!important;padding:15px 24px!important;background:#fff!important}
.tappy-detail-brand{font-family:"Arial Black","Segoe UI",Arial,sans-serif!important;font-size:18px!important;letter-spacing:-.45px}
.tappy-header-icon svg,.tappy-back-button svg,.tappy-share-button svg,.tappy-plus-cta svg{fill:none;stroke:currentColor;stroke-width:2.15;stroke-linecap:round;stroke-linejoin:round}
.tappy-header-icon{width:38px!important;height:38px!important;color:#0a0a0a!important}
.tappy-header-icon svg{width:27px;height:27px}
.tappy-back-button{width:42px!important;height:42px!important}
.tappy-back-button svg{width:25px;height:25px}
.tappy-signup-button{color:#29cdb6!important;font-family:"Segoe UI",Arial,sans-serif!important;font-size:17px!important;font-weight:500!important}
.tappy-cover-image{border-radius:19px!important}
.tappy-share-button{width:48px!important;height:48px!important;border-radius:14px!important;padding:10px!important;background:rgba(255,255,255,.18)!important;box-shadow:none!important}
.tappy-summary-panel h1{font-family:"Segoe UI",Arial,Tahoma,sans-serif!important;font-size:42px!important;font-weight:500!important;letter-spacing:-1.4px}
.tappy-meta-line{font-size:18px!important;font-weight:400}
.tappy-creator-line{font-size:17px!important}
.tappy-alt-line{display:none}
.tappy-icon-tabs{min-height:94px!important;margin-top:16px!important;padding:0!important}
.tappy-icon-tabs button{min-height:90px!important;max-width:175px!important;padding:12px 20px 14px!important;border-bottom-width:4px!important}
.tappy-icon-tabs .tab-icon{width:54px;height:54px;display:grid;place-items:center;margin:auto;color:#a7a8aa}
.tappy-icon-tabs button.active .tab-icon{color:#111}
.tappy-icon-tabs .tab-icon svg{width:48px;height:48px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.tappy-icon-tabs .info-dot{fill:#28cdb6;stroke:#fff;stroke-width:1.2}
.tappy-follow-cta{height:78px!important;font-size:21px!important;font-weight:500!important}
.tappy-plus-cta{width:78px!important;height:78px!important;padding:20px!important}
.tappy-plus-cta svg{width:38px;height:38px;stroke-width:1.8}
@media(max-width:740px){
  .tappy-detail-header{min-height:66px!important;padding:12px 15px 12px 54px!important}
  .tappy-detail-brand{font-size:15px!important}
  .tappy-header-icon{width:34px!important;height:34px!important}
  .tappy-header-icon svg{width:24px;height:24px}
  .tappy-signup-button{font-size:14px!important}
  .tappy-summary-panel h1{font-size:31px!important;letter-spacing:-.9px}
  .tappy-meta-line,.tappy-creator-line{font-size:15px!important}
  .tappy-icon-tabs{min-height:76px!important}
  .tappy-icon-tabs button{min-height:73px!important;padding:8px 14px 10px!important}
  .tappy-icon-tabs .tab-icon{width:44px;height:44px}
  .tappy-icon-tabs .tab-icon svg{width:40px;height:40px}
  .tappy-follow-cta{height:66px!important;font-size:18px!important}
  .tappy-plus-cta{width:66px!important;height:66px!important;padding:16px!important}
  .tappy-plus-cta svg{width:32px;height:32px}
}

/* ===== mi-fullscreen-typography-dock ===== */
/* ---------- Global type scale ---------- */
html{
  font-size:17px;
}

body{
  font-size:16px!important;
  line-height:1.65;
}

button,
input,
textarea,
select{
  font-family:inherit!important;
}

button{
  font-size:14px;
}

.page-head h1,
.platform-page-head h1,
.exact-page-top h1{
  font-size:clamp(34px,5vw,52px)!important;
}

.page-head p,
.platform-page-head p,
.discover-page-title p{
  font-size:15px!important;
  line-height:1.9!important;
}

.exact-section-header h2,
.discover-section-heading h2,
.series-section-title h2{
  font-size:clamp(25px,3vw,34px)!important;
}

.exact-section-header p,
.discover-section-heading p,
.collection-shelf-head p{
  font-size:14px!important;
}

.platform-poster-card .poster-copy h3,
.poster-copy h3,
.shelf-work-card h3{
  font-size:15px!important;
  line-height:1.55!important;
}

.platform-poster-card .poster-copy>p,
.poster-copy p,
.shelf-work-card p{
  font-size:12px!important;
}

.poster-meta span{
  font-size:13px!important;
}

.poster-meta small{
  font-size:11px!important;
}

.top-collection-copy h3,
.collection-card-copy h3{
  font-size:18px!important;
}

.top-collection-copy p,
.collection-card-copy p{
  font-size:13px!important;
}

.form-grid label>span,
.modern-form-grid label>span,
.profile-name-field span,
.sheet-section p,
.device-notification-row small{
  font-size:13px!important;
}

input,
textarea,
select{
  font-size:16px!important;
}

/* ---------- Fullscreen work detail ---------- */
body.work-detail-open{
  overflow:hidden!important;
}

body.work-detail-open .site-header{
  transform:translateY(-110%);
  opacity:0;
  pointer-events:none;
}

body.work-detail-open .member-dock{
  transform:translate(-50%,145%)!important;
  opacity:0;
  pointer-events:none;
}

#workDetailView.tappy-detail-view{
  display:none;
}

#workDetailView.tappy-detail-view.active{
  display:block!important;
  position:fixed!important;
  inset:0!important;
  z-index:95!important;
  width:100vw!important;
  max-width:none!important;
  height:100dvh!important;
  min-height:100dvh!important;
  margin:0!important;
  padding:0 0 118px!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
  background:#f2f2f2!important;
  animation:workDetailEnter .32s cubic-bezier(.22,.8,.25,1);
}

@keyframes workDetailEnter{
  from{
    opacity:0;
    transform:translateY(18px) scale(.992);
  }
  to{
    opacity:1;
    transform:none;
  }
}

.tappy-detail-header{
  top:0!important;
  z-index:105!important;
}

.tappy-hero-shell{
  min-height:max(520px,68vh)!important;
}

.tappy-cover-frame{
  min-height:460px;
  align-items:center;
}

.tappy-cover-image{
  width:min(74vw,520px)!important;
  max-height:68vh;
}

.tappy-summary-panel h1{
  font-size:clamp(34px,6vw,58px)!important;
}

.tappy-meta-line,
.tappy-creator-line{
  font-size:18px!important;
}

.tappy-content-card{
  font-size:16px!important;
}

.tappy-content-card p,
.tappy-content-card dd,
.tappy-content-card dt{
  font-size:15px!important;
}

.tappy-bottom-cta{
  z-index:110!important;
}

/* ---------- Animated bottom dock ---------- */
.site-header,
.member-dock{
  transition:
    transform .35s cubic-bezier(.22,.8,.25,1),
    opacity .24s ease;
}

.member-dock{
  overflow:visible!important;
  transition:
    transform .35s cubic-bezier(.22,.8,.25,1),
    opacity .25s ease,
    box-shadow .25s ease!important;
}

.dock-item{
  overflow:visible!important;
  isolation:isolate;
}

.dock-icon-shell{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  position:relative;
  border-radius:14px;
  color:#a69db8;
  transition:
    transform .28s cubic-bezier(.2,.9,.25,1.25),
    color .2s ease,
    background .25s ease,
    box-shadow .25s ease;
}

.dock-icon-shell svg{
  width:27px;
  height:27px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.15;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform .28s cubic-bezier(.2,.9,.25,1.25);
}

.dock-item::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:3px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--accent);
  opacity:0;
  transform:translate(-50%,8px) scale(.35);
  transition:
    opacity .2s ease,
    transform .3s cubic-bezier(.2,.9,.25,1.3);
}

.dock-item:hover .dock-icon-shell{
  transform:translateY(-3px);
  color:var(--text);
}

.dock-item.active .dock-icon-shell{
  color:#fff;
  background:linear-gradient(145deg,var(--accent),color-mix(in srgb,var(--accent) 68%,#5c2cff));
  box-shadow:0 11px 25px color-mix(in srgb,var(--accent) 32%,transparent);
  transform:translateY(-9px) scale(1.08);
}

.dock-item.active .dock-icon-shell svg{
  transform:scale(1.05);
}

.dock-item.active::after{
  opacity:1;
  transform:translate(-50%,0) scale(1);
}

.dock-item.active>span:last-child{
  color:var(--accent)!important;
  font-weight:800;
}

.dock-item.dock-tapped .dock-icon-shell{
  animation:dockTap .42s cubic-bezier(.2,.9,.25,1.25);
}

@keyframes dockTap{
  0%{transform:translateY(-4px) scale(1)}
  42%{transform:translateY(-13px) scale(1.18) rotate(-3deg)}
  72%{transform:translateY(-7px) scale(.96) rotate(1deg)}
  100%{transform:translateY(-9px) scale(1.08)}
}

.dock-profile{
  transition:transform .28s cubic-bezier(.2,.9,.25,1.2);
}

.dock-profile:hover{
  transform:translateY(-4px);
}

.dock-profile.dock-tapped{
  animation:profileTap .42s cubic-bezier(.2,.9,.25,1.2);
}

@keyframes profileTap{
  0%{transform:none}
  45%{transform:translateY(-10px) scale(1.08)}
  100%{transform:none}
}

.dock-profile-ring{
  transition:
    transform .28s cubic-bezier(.2,.9,.25,1.2),
    box-shadow .25s ease;
}

.dock-profile:hover .dock-profile-ring{
  box-shadow:
    0 0 0 2px color-mix(in srgb,var(--accent) 34%,transparent),
    0 14px 30px rgba(0,0,0,.28)!important;
}

.dock-badge{
  animation:badgePulse 1.8s ease-in-out infinite;
}

@keyframes badgePulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.12)}
}

@media(max-width:740px){
  html{
    font-size:16px;
  }

  body{
    font-size:15px!important;
  }

  button{
    font-size:13px;
  }

  .exact-section-header h2,
  .discover-section-heading h2{
    font-size:24px!important;
  }

  .platform-poster-card .poster-copy h3,
  .poster-copy h3{
    font-size:13px!important;
  }

  .platform-poster-card .poster-copy>p,
  .poster-copy p{
    font-size:11px!important;
  }

  #workDetailView.tappy-detail-view.active{
    padding-bottom:102px!important;
  }

  .tappy-hero-shell{
    min-height:58vh!important;
  }

  .tappy-cover-frame{
    min-height:360px;
  }

  .tappy-cover-image{
    width:min(84vw,440px)!important;
    max-height:58vh;
  }

  .tappy-summary-panel h1{
    font-size:34px!important;
  }

  .tappy-meta-line,
  .tappy-creator-line{
    font-size:15px!important;
  }

  .dock-icon-shell{
    width:34px;
    height:34px;
    border-radius:12px;
  }

  .dock-icon-shell svg{
    width:24px;
    height:24px;
  }

  .dock-item>span:last-child{
    font-size:9px!important;
  }

  .dock-item.active .dock-icon-shell{
    transform:translateY(-7px) scale(1.06);
  }

  @keyframes dockTap{
    0%{transform:translateY(-3px) scale(1)}
    45%{transform:translateY(-10px) scale(1.15) rotate(-3deg)}
    100%{transform:translateY(-7px) scale(1.06)}
  }
}

@media(prefers-reduced-motion:reduce){
  #workDetailView.tappy-detail-view.active,
  .dock-item.dock-tapped .dock-icon-shell,
  .dock-profile.dock-tapped,
  .dock-badge{
    animation:none!important;
  }
}

/* ===== mi-cairo-vote-panes ===== */
:root{
  --font-arabic:"Cairo","Segoe UI",Tahoma,Arial,sans-serif;
}

html,
body,
button,
input,
textarea,
select{
  font-family:var(--font-arabic)!important;
}

body{
  font-size:18px!important;
}

p,
li,
dd,
dt,
label,
input,
textarea,
select,
button{
  line-height:1.85;
}

.eyebrow{
  font-size:13px!important;
  letter-spacing:.35px!important;
}

.platform-poster-card .poster-copy h3,
.poster-copy h3,
.shelf-work-card h3{
  font-size:17px!important;
  font-weight:800!important;
}

.platform-poster-card .poster-copy>p,
.poster-copy p,
.shelf-work-card p,
.poster-meta small{
  font-size:13px!important;
}

.top-collection-copy h3,
.collection-card-copy h3{
  font-size:20px!important;
}

.top-collection-copy p,
.collection-card-copy p{
  font-size:14px!important;
}

.tappy-summary-panel h1{
  font-family:var(--font-arabic)!important;
  font-weight:800!important;
}

.tappy-detail-content{
  width:min(100%,960px)!important;
}

.tappy-detail-main{
  display:block!important;
}

.tappy-detail-pane{
  display:none;
  animation:detailPaneIn .25s ease;
}

.tappy-detail-pane.active{
  display:grid;
  gap:20px;
}

@keyframes detailPaneIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}

.tappy-icon-tabs{
  position:sticky!important;
  top:73px!important;
  z-index:25!important;
  background:rgba(242,242,242,.96)!important;
  backdrop-filter:blur(12px);
}

.work-vote-card{
  background:#fff;
  border:1px solid #e8e8eb;
  border-radius:24px;
  padding:24px;
  box-shadow:0 12px 32px rgba(15,15,18,.055);
}

.work-vote-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-bottom:20px;
}

.work-vote-heading h2{
  margin:5px 0 4px;
  color:#151518;
  font-size:30px;
  font-weight:800;
}

.work-vote-heading p{
  margin:0;
  color:#777780;
  font-size:15px;
}

.work-vote-current{
  min-width:170px;
  text-align:left;
}

.work-vote-current strong,
.work-vote-current small{
  display:block;
}

.work-vote-current strong{
  color:#17171a;
  font-size:16px;
}

.work-vote-current small{
  margin-top:4px;
  color:#8a8a92;
  font-size:12px;
}

.recommendation-vote-line{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border:1px solid #e6e6e9;
  border-radius:16px;
  overflow:hidden;
  background:#f8f8f9;
}

.recommendation-vote-line button{
  min-height:68px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:12px 15px;
  border:0;
  border-left:1px solid #e6e6e9;
  background:transparent;
  color:#55555d;
  font-size:16px;
  transition:.2s ease;
}

.recommendation-vote-line button:last-child{
  border-left:0;
}

.recommendation-vote-line button:hover{
  background:#fff;
}

.recommendation-vote-line button.active{
  background:#171719;
  color:#fff;
}

.vote-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  box-shadow:0 0 0 4px rgba(0,0,0,.035);
}

.vote-dot.green{background:#39cf83}
.vote-dot.yellow{background:#f2c744}
.vote-dot.red{background:#f45c67}

.vote-emoji{
  font-size:21px;
  line-height:1;
}

.recommendation-reason-form{
  display:grid;
  gap:10px;
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid #ececef;
}

.recommendation-reason-form label{
  color:#242429;
  font-size:15px;
  font-weight:700;
}

.recommendation-reason-form label small{
  color:#8b8b93;
  font-weight:500;
}

.recommendation-reason-form textarea{
  width:100%;
  resize:vertical;
  min-height:110px;
  padding:15px;
  border:1px solid #dedee3;
  border-radius:14px;
  background:#fafafa;
  color:#19191d;
  font-size:15px!important;
  outline:0;
}

.recommendation-reason-form textarea:focus{
  border-color:#111;
  background:#fff;
}

.recommendation-reason-form>div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.recommendation-reason-form>div small{
  color:#8b8b93;
  font-size:12px;
}

.tappy-content-card{
  padding:28px!important;
}

.tappy-content-card .series-section-title h2,
.tappy-content-card .community-head h2,
.tappy-content-card .comments-head h2,
.tappy-content-card .series-info-head h2{
  font-size:30px!important;
  font-weight:800!important;
}

.tappy-content-card .series-synopsis{
  font-size:18px!important;
  line-height:2!important;
}

.review-grid{
  gap:18px!important;
}

.review-card{
  min-height:210px!important;
  padding:24px!important;
  border-radius:20px!important;
}

.review-card-title,
.review-card>span{
  font-size:17px!important;
  font-weight:800!important;
  color:#25252b!important;
}

.review-card>div{
  margin-top:16px;
}

.review-card>div>div{
  position:relative;
  padding-right:22px;
  color:#515159!important;
  font-size:16px!important;
  line-height:1.95!important;
}

.review-card.positive>div>div::before,
.review-card.negative>div>div::before{
  content:"";
  position:absolute;
  right:0;
  top:.8em;
  width:9px;
  height:9px;
  border-radius:50%;
}

.review-card.positive>div>div::before{
  background:#42d28b;
}

.review-card.negative>div>div::before{
  background:#f45c67;
}

.editor-note{
  min-height:190px!important;
  padding:26px!important;
  border-radius:20px!important;
}

.editor-note>span{
  font-size:17px!important;
  font-weight:800!important;
}

.editor-note p{
  margin-top:24px!important;
  font-size:22px!important;
  line-height:1.9!important;
  color:#2e2e34!important;
}

.tappy-info-list dt,
.tappy-info-list dd{
  font-size:16px!important;
}

.site-rating-item,
.detail-collection-link{
  font-size:15px!important;
}

.gallery-only-pane.active{
  display:block;
}

.gallery-only-card{
  min-height:55vh;
}

.gallery-only-card .series-gallery-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}

.gallery-only-card .series-gallery-grid img{
  width:100%;
  border-radius:16px;
  cursor:pointer;
}

.information-only-card{
  min-height:55vh;
}

@media(max-width:740px){
  body{
    font-size:16px!important;
  }

  .tappy-icon-tabs{
    top:65px!important;
  }

  .work-vote-card{
    padding:17px;
    border-radius:19px;
  }

  .work-vote-heading{
    display:block;
  }

  .work-vote-heading h2{
    font-size:24px;
  }

  .work-vote-heading p{
    font-size:13px;
  }

  .work-vote-current{
    min-width:0;
    margin-top:10px;
    text-align:right;
  }

  .recommendation-vote-line{
    grid-template-columns:1fr;
    border-radius:14px;
  }

  .recommendation-vote-line button{
    min-height:56px;
    border-left:0;
    border-bottom:1px solid #e6e6e9;
    font-size:14px;
  }

  .recommendation-vote-line button:last-child{
    border-bottom:0;
  }

  .tappy-content-card{
    padding:19px!important;
  }

  .tappy-content-card .series-section-title h2,
  .tappy-content-card .community-head h2,
  .tappy-content-card .comments-head h2,
  .tappy-content-card .series-info-head h2{
    font-size:24px!important;
  }

  .tappy-content-card .series-synopsis{
    font-size:16px!important;
  }

  .review-grid{
    grid-template-columns:1fr!important;
  }

  .review-card{
    min-height:160px!important;
    padding:19px!important;
  }

  .review-card>div>div{
    font-size:15px!important;
  }

  .editor-note{
    min-height:160px!important;
    padding:20px!important;
  }

  .editor-note p{
    margin-top:18px!important;
    font-size:18px!important;
  }

  .gallery-only-card .series-gallery-grid{
    grid-template-columns:1fr;
  }
}

/* ===== mi-balanced-typography-icons ===== */
:root{
  --mi-text-xs:12px;
  --mi-text-sm:13.5px;
  --mi-text-base:15.5px;
  --mi-text-md:17px;
  --mi-text-lg:20px;
  --mi-text-xl:25px;
  --mi-text-2xl:32px;
}

/* ===============================
   مقياس خطوط موحد للموقع بالكامل
   =============================== */
html{
  font-size:16px!important;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  font-family:"Cairo","Segoe UI",Tahoma,Arial,sans-serif!important;
  font-size:var(--mi-text-base)!important;
  line-height:1.75!important;
}

button,
input,
textarea,
select{
  font-family:inherit!important;
}

button{
  font-size:var(--mi-text-sm)!important;
  line-height:1.4!important;
}

input,
textarea,
select{
  font-size:16px!important;
  line-height:1.6!important;
}

small{
  font-size:var(--mi-text-xs)!important;
}

p,
li,
dd,
dt,
label{
  font-size:var(--mi-text-base)!important;
  line-height:1.85!important;
}

.eyebrow,
.section-kicker,
.page-overline{
  font-size:13px!important;
  line-height:1.4!important;
  letter-spacing:.25px!important;
  font-weight:700!important;
}

.page-head h1,
.platform-page-head h1,
.exact-page-top h1,
.discover-page-title h1{
  font-size:clamp(31px,4vw,44px)!important;
  line-height:1.3!important;
  font-weight:800!important;
}

.page-head p,
.platform-page-head p,
.discover-page-title p{
  font-size:15px!important;
  line-height:1.85!important;
}

.exact-section-header h2,
.discover-section-heading h2,
.series-section-title h2,
.series-info-head h2,
.community-head h2,
.comments-head h2{
  font-size:clamp(22px,2.7vw,29px)!important;
  line-height:1.45!important;
  font-weight:800!important;
}

.exact-section-header p,
.discover-section-heading p,
.collection-shelf-head p{
  font-size:14px!important;
  line-height:1.8!important;
}

/* بطاقات الأعمال */
.platform-poster-card .poster-copy h3,
.poster-copy h3,
.shelf-work-card h3{
  font-size:15px!important;
  line-height:1.55!important;
  font-weight:800!important;
}

.platform-poster-card .poster-copy>p,
.poster-copy p,
.shelf-work-card p{
  font-size:12.5px!important;
  line-height:1.65!important;
}

.poster-meta span{
  font-size:12.5px!important;
}

.poster-meta small{
  font-size:11.5px!important;
}

.top-collection-copy h3,
.collection-card-copy h3{
  font-size:18px!important;
  line-height:1.55!important;
}

.top-collection-copy p,
.collection-card-copy p{
  font-size:13px!important;
  line-height:1.75!important;
}

/* النماذج والنوافذ الجانبية */
.sheet-section h2,
.dock-sheet h2,
.auth-card h2{
  font-size:25px!important;
  line-height:1.4!important;
}

.sheet-section p,
.device-notification-row small,
.profile-name-field span,
.choice-item span,
.work-pick b{
  font-size:14px!important;
}

.form-grid label>span,
.modern-form-grid label>span{
  font-size:13px!important;
  font-weight:700!important;
}

/* ===============================
   صفحة العمل
   =============================== */
.tappy-summary-panel h1{
  font-size:clamp(31px,5vw,46px)!important;
  line-height:1.28!important;
  font-weight:800!important;
}

.tappy-meta-line{
  font-size:16px!important;
  line-height:1.65!important;
}

.tappy-creator-line{
  font-size:15px!important;
  line-height:1.65!important;
}

.tappy-content-card{
  font-size:var(--mi-text-base)!important;
}

.tappy-content-card p,
.tappy-content-card dd,
.tappy-content-card dt,
.tappy-content-card label{
  font-size:15px!important;
  line-height:1.9!important;
}

.tappy-content-card .series-synopsis{
  font-size:16px!important;
  line-height:2!important;
}

.tappy-content-card .eyebrow{
  font-size:14px!important;
  color:#85858d!important;
}

.review-card-title,
.review-card>span,
.editor-note>span{
  font-size:16px!important;
  font-weight:800!important;
}

.review-card>div>div{
  font-size:15px!important;
  line-height:1.9!important;
}

.editor-note p{
  font-size:18px!important;
  line-height:1.9!important;
}

.tappy-info-list dt,
.tappy-info-list dd{
  font-size:15px!important;
}

.site-rating-item,
.detail-collection-link{
  font-size:14px!important;
}

.empty-gallery{
  min-height:170px!important;
  display:grid!important;
  place-items:center!important;
  padding:24px!important;
  font-size:15px!important;
  line-height:1.8!important;
  text-align:center!important;
  color:#66666d!important;
}

/* ===============================
   تصغير أيقونات تبويبات العمل
   =============================== */
.tappy-icon-tabs{
  min-height:72px!important;
  margin:0 auto 16px!important;
  padding:0 10px!important;
  top:65px!important;
}

.tappy-icon-tabs button{
  min-height:70px!important;
  max-width:145px!important;
  padding:8px 14px 10px!important;
  border-bottom-width:3px!important;
}

.tappy-icon-tabs .tab-icon{
  width:38px!important;
  height:38px!important;
}

.tappy-icon-tabs .tab-icon svg{
  width:32px!important;
  height:32px!important;
  stroke-width:2!important;
}

.tappy-icon-tabs .info-dot{
  r:2!important;
}

/* أيقونات الهيدر داخل صفحة العمل */
.tappy-header-icon{
  width:34px!important;
  height:34px!important;
}

.tappy-header-icon svg{
  width:23px!important;
  height:23px!important;
}

.tappy-back-button{
  width:38px!important;
  height:38px!important;
}

.tappy-back-button svg{
  width:22px!important;
  height:22px!important;
}

.tappy-share-button{
  width:42px!important;
  height:42px!important;
  padding:9px!important;
}

.tappy-share-button svg{
  width:23px!important;
  height:23px!important;
}

/* أزرار التصويت */
.work-vote-heading h2{
  font-size:25px!important;
}

.work-vote-heading p{
  font-size:14px!important;
}

.work-vote-current strong{
  font-size:15px!important;
}

.work-vote-current small{
  font-size:12px!important;
}

.recommendation-vote-line button{
  min-height:60px!important;
  font-size:14px!important;
}

.vote-emoji{
  font-size:19px!important;
}

.recommendation-reason-form label{
  font-size:14px!important;
}

.recommendation-reason-form textarea{
  font-size:15px!important;
}

/* زر المتابعة السفلي */
.tappy-follow-cta{
  font-size:18px!important;
}

.tappy-plus-cta{
  width:66px!important;
  height:66px!important;
  padding:17px!important;
}

.tappy-plus-cta svg{
  width:30px!important;
  height:30px!important;
}

/* ===============================
   الهاتف
   =============================== */
@media(max-width:740px){
  :root{
    --mi-text-xs:11px;
    --mi-text-sm:12.5px;
    --mi-text-base:14.5px;
    --mi-text-md:16px;
    --mi-text-lg:19px;
    --mi-text-xl:23px;
    --mi-text-2xl:29px;
  }

  body{
    font-size:14.5px!important;
  }

  p,
  li,
  dd,
  dt,
  label{
    font-size:14px!important;
  }

  .eyebrow,
  .section-kicker,
  .page-overline{
    font-size:12px!important;
  }

  .page-head h1,
  .platform-page-head h1,
  .exact-page-top h1,
  .discover-page-title h1{
    font-size:30px!important;
  }

  .page-head p,
  .platform-page-head p,
  .discover-page-title p{
    font-size:14px!important;
  }

  .exact-section-header h2,
  .discover-section-heading h2,
  .series-section-title h2,
  .series-info-head h2,
  .community-head h2,
  .comments-head h2{
    font-size:22px!important;
  }

  .platform-poster-card .poster-copy h3,
  .poster-copy h3{
    font-size:13.5px!important;
  }

  .platform-poster-card .poster-copy>p,
  .poster-copy p{
    font-size:11.5px!important;
  }

  .tappy-summary-panel h1{
    font-size:31px!important;
  }

  .tappy-meta-line{
    font-size:14.5px!important;
  }

  .tappy-creator-line{
    font-size:14px!important;
  }

  .tappy-content-card{
    padding:17px!important;
  }

  .tappy-content-card p,
  .tappy-content-card dd,
  .tappy-content-card dt,
  .tappy-content-card label{
    font-size:14px!important;
  }

  .tappy-content-card .series-synopsis{
    font-size:15px!important;
  }

  .tappy-content-card .eyebrow{
    font-size:13px!important;
  }

  .review-card-title,
  .review-card>span,
  .editor-note>span{
    font-size:15px!important;
  }

  .review-card>div>div{
    font-size:14px!important;
  }

  .editor-note p{
    font-size:16.5px!important;
  }

  .empty-gallery{
    min-height:150px!important;
    font-size:14px!important;
  }

  .tappy-icon-tabs{
    min-height:62px!important;
    top:64px!important;
  }

  .tappy-icon-tabs button{
    min-height:60px!important;
    max-width:120px!important;
    padding:6px 10px 8px!important;
  }

  .tappy-icon-tabs .tab-icon{
    width:32px!important;
    height:32px!important;
  }

  .tappy-icon-tabs .tab-icon svg{
    width:28px!important;
    height:28px!important;
  }

  .tappy-header-icon{
    width:32px!important;
    height:32px!important;
  }

  .tappy-header-icon svg{
    width:21px!important;
    height:21px!important;
  }

  .tappy-back-button{
    width:34px!important;
    height:34px!important;
  }

  .tappy-back-button svg{
    width:20px!important;
    height:20px!important;
  }

  .tappy-share-button{
    width:38px!important;
    height:38px!important;
    padding:8px!important;
  }

  .tappy-share-button svg{
    width:21px!important;
    height:21px!important;
  }

  .work-vote-heading h2{
    font-size:22px!important;
  }

  .work-vote-heading p{
    font-size:13px!important;
  }

  .recommendation-vote-line button{
    min-height:52px!important;
    font-size:13px!important;
  }

  .vote-emoji{
    font-size:17px!important;
  }

  .tappy-follow-cta{
    font-size:17px!important;
  }

  .tappy-plus-cta{
    width:60px!important;
    height:60px!important;
    padding:15px!important;
  }

  .tappy-plus-cta svg{
    width:28px!important;
    height:28px!important;
  }
}

/* تحسين القراءة لمن يكبّر نص الجهاز */
@media(max-width:390px){
  .tappy-icon-tabs button{
    max-width:104px!important;
  }

  .tappy-icon-tabs .tab-icon{
    width:29px!important;
    height:29px!important;
  }

  .tappy-icon-tabs .tab-icon svg{
    width:25px!important;
    height:25px!important;
  }
}

/* ===== mi-vote-cards-modal ===== */
.recommendation-vote-boxes{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important;border:0!important;background:transparent!important;overflow:visible!important}.recommendation-vote-box{--vc:#777;--vs:rgba(0,0,0,.08);min-height:155px!important;position:relative;isolation:isolate;overflow:hidden;display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:7px!important;padding:18px 12px!important;border:1px solid #e4e4e8!important;border-radius:22px!important;background:#fff!important;color:#2c2c32!important;box-shadow:0 8px 22px rgba(24,24,30,.055);transition:.3s cubic-bezier(.2,.9,.25,1.2)!important}.recommend-box{--vc:#24bf70;--vs:rgba(36,191,112,.2)}.acceptable-box{--vc:#e1b522;--vs:rgba(225,181,34,.22)}.reject-box{--vc:#eb4e5b;--vs:rgba(235,78,91,.2)}.recommendation-vote-box::before{content:"";position:absolute;inset:auto -25% -62%;height:92%;z-index:-1;border-radius:50%;background:var(--vc);opacity:.08;transition:.4s}.recommendation-vote-box:hover{transform:translateY(-5px);border-color:var(--vc)!important;box-shadow:0 16px 34px var(--vs)}.recommendation-vote-box.active,.recommendation-vote-box.preview-active{color:#fff!important;border-color:var(--vc)!important;background:linear-gradient(145deg,color-mix(in srgb,var(--vc) 88%,#fff),var(--vc))!important;box-shadow:0 18px 42px var(--vs),inset 0 1px 0 rgba(255,255,255,.34);transform:translateY(-7px) scale(1.025)}.vote-box-emoji{font-size:36px!important}.recommendation-vote-box strong{font-size:18px!important;color:inherit!important}.recommendation-vote-box small{font-size:11.5px!important;text-align:center;color:#888!important}.recommendation-vote-box.active small,.recommendation-vote-box.preview-active small{color:rgba(255,255,255,.86)!important}.vote-confirmed{animation:voteConfirmed .85s cubic-bezier(.2,.9,.25,1.2)}@keyframes voteConfirmed{0%{transform:translateY(-7px) scale(1.025)}35%{transform:translateY(-13px) scale(1.08)}60%{transform:translateY(-4px) scale(.98)}100%{transform:translateY(-7px) scale(1.025)}}.vote-particle{position:absolute;left:50%;top:50%;z-index:10;width:7px;height:7px;border-radius:50%;background:var(--c);pointer-events:none;animation:vp .72s cubic-bezier(.15,.7,.2,1) var(--delay) forwards}@keyframes vp{from{opacity:1;transform:translate(-50%,-50%) rotate(var(--a)) translateX(0)}to{opacity:0;transform:translate(-50%,-50%) rotate(var(--a)) translateX(var(--d)) scale(.1)}}.recommendation-vote-results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:18px}.vote-result{padding:13px 14px;border:1px solid #ebebee;border-radius:15px;background:#fafafa}.vote-result>div{display:flex;justify-content:space-between;margin-bottom:9px}.vote-result span,.vote-result strong{font-size:13px!important}.recommend-result strong{color:#24bf70}.acceptable-result strong{color:#d4a600}.reject-result strong{color:#eb4e5b}.vote-result-track{width:100%;height:7px;display:block;overflow:hidden;border-radius:999px;background:#e9e9ed}.vote-result-track i{width:0;height:100%;display:block;border-radius:inherit;transition:width .72s cubic-bezier(.2,.85,.25,1)}.recommend-result i{background:linear-gradient(90deg,#22b969,#61df98)}.acceptable-result i{background:linear-gradient(90deg,#d4a600,#f1d45e)}.reject-result i{background:linear-gradient(90deg,#e84250,#ff7b85)}body.recommendation-modal-open{overflow:hidden!important}.recommendation-reason-modal{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:20px}.recommendation-reason-modal.hidden{display:none!important}.recommendation-modal-backdrop{position:absolute;inset:0;border:0;background:rgba(10,10,14,.64);backdrop-filter:blur(9px)}.recommendation-modal-card{position:relative;z-index:1;width:min(100%,560px);padding:30px;border-radius:28px;background:#fff;color:#19191d;box-shadow:0 32px 90px rgba(0,0,0,.28);text-align:center;animation:modalIn .42s cubic-bezier(.16,.86,.24,1.16)}@keyframes modalIn{from{opacity:0;transform:translateY(32px) scale(.88)}60%{transform:translateY(-5px) scale(1.015)}to{opacity:1;transform:none}}.recommendation-modal-close{position:absolute;top:15px;left:15px;width:38px;height:38px;border:0;border-radius:50%;background:#f1f1f3;font-size:25px!important}.recommendation-modal-icon{width:76px;height:76px;display:grid;place-items:center;margin:0 auto 15px;border-radius:25px;background:#f4f4f6;font-size:40px}.recommendation-modal-icon[data-choice="recommend"]{background:rgba(36,191,112,.13)}.recommendation-modal-icon[data-choice="acceptable"]{background:rgba(225,181,34,.16)}.recommendation-modal-icon[data-choice="not-recommend"]{background:rgba(235,78,91,.13)}.recommendation-modal-card h2{font-size:26px!important;margin:7px 0}.recommendation-modal-card>p{font-size:14px!important;color:#73737b;margin:0 auto 21px}.recommendation-modal-field{display:grid;gap:9px;text-align:right}.recommendation-modal-field textarea{min-height:130px;padding:15px;border:1px solid #ddd;border-radius:16px;font-size:15px!important}.recommendation-modal-counter{text-align:left}.recommendation-modal-actions{display:grid;grid-template-columns:1fr 1.2fr;gap:10px;margin-top:19px}.recommendation-modal-actions button{min-height:50px;border-radius:14px;font-size:13px!important;font-weight:800}.recommendation-skip-button{border:1px solid #ddd;background:#f5f5f7}.recommendation-save-button{border:0;background:#151517;color:#fff}@media(max-width:740px){.recommendation-vote-boxes{gap:8px!important}.recommendation-vote-box{min-height:128px!important;padding:14px 7px!important;border-radius:17px!important}.vote-box-emoji{font-size:29px!important}.recommendation-vote-box strong{font-size:14px!important}.recommendation-vote-box small{font-size:9.5px!important}.recommendation-vote-results{gap:8px;margin-top:12px}.vote-result{padding:10px 8px}.vote-result span,.vote-result strong{font-size:10.5px!important}.recommendation-reason-modal{padding:12px;align-items:end}.recommendation-modal-card{width:100%;padding:25px 18px 18px;border-radius:26px 26px 18px 18px}.recommendation-modal-actions{grid-template-columns:1fr}}@media(max-width:390px){.recommendation-vote-box small{display:none}}

/* ===== mi-theme-vote-stability ===== */
/* يمنع ظهور الوضع الداكن قبل تحميل JavaScript */
body.light{
  color-scheme:light;
}

body.dark{
  color-scheme:dark;
}

.recommendation-vote-results.hidden{
  display:none!important;
}

.recommendation-vote-results.vote-results-visible{
  animation:voteResultsReveal .48s cubic-bezier(.2,.86,.25,1.12);
}

@keyframes voteResultsReveal{
  from{
    opacity:0;
    transform:translateY(-8px) scale(.975);
  }
  60%{
    transform:translateY(2px) scale(1.006);
  }
  to{
    opacity:1;
    transform:none;
  }
}

/* يمنع الطبقات المفتوحة من ترك الصفحة دون تمرير بعد الإغلاق */
body:not(.recommendation-modal-open):not(.work-detail-open)
.recommendation-reason-modal.hidden{
  pointer-events:none;
}

/* تثبيت الرسوم المتحركة على الهاتف وتقليل الوميض */
.recommendation-vote-box,
.vote-result-track i,
.member-dock,
.site-header{
  will-change:transform,opacity;
}

@media(max-width:740px){
  .recommendation-vote-results.vote-results-visible{
    animation-duration:.38s;
  }
}

@media(prefers-reduced-motion:reduce){
  .recommendation-vote-results.vote-results-visible{
    animation:none!important;
  }
}

/* ===== mi-auth-comments-fonts-fix ===== */
:root{
  --mi-font-body:"Almarai","Cairo",Tahoma,Arial,sans-serif;
  --mi-font-heading:"Cairo","Almarai",Tahoma,Arial,sans-serif;
}
html,body,input,textarea,select{font-family:var(--mi-font-body)!important}
button,h1,h2,h3,h4,h5,h6,strong,.brand,.exact-logo,.tappy-detail-brand,.dock-item,.page-head,.section-heading,.series-section-title,.work-vote-heading{font-family:var(--mi-font-heading)!important}

.work-vote-login-hint,.comment-auth-notice{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:14px 0;padding:13px 15px;border:1px solid #e4e4e8;
  border-radius:14px;background:#f8f8fa;color:#575760
}
.work-vote-login-hint.hidden,.comment-auth-notice.hidden{display:none!important}
.work-vote-login-hint span,.comment-auth-notice span{font-size:13px!important;line-height:1.75}
.work-vote-login-hint button,.comment-auth-notice button{
  min-height:40px;padding:7px 14px;border:0;border-radius:11px;
  background:#151517;color:#fff;font-size:12px!important;flex:0 0 auto
}
.comment-composer.is-locked{opacity:.68}
.comment-composer.is-locked textarea{cursor:not-allowed;background:#f1f1f3!important}
.comment-composer textarea:disabled,.comment-composer button:disabled{cursor:not-allowed!important}

.recommendation-reason-modal{touch-action:auto}
.recommendation-modal-backdrop{width:100%!important;height:100%!important;cursor:default;touch-action:manipulation}
.recommendation-modal-card{max-height:min(92dvh,760px);overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}
.recommendation-modal-close{z-index:6;touch-action:manipulation}
body:not(.recommendation-modal-open) .recommendation-reason-modal{pointer-events:none!important}
body.recommendation-modal-open .recommendation-reason-modal{pointer-events:auto!important}

@media(max-width:740px){
  .work-vote-login-hint,.comment-auth-notice{align-items:flex-start;flex-direction:column}
  .work-vote-login-hint button,.comment-auth-notice button{width:100%}
  .recommendation-modal-card{max-height:88dvh}
}

/* ===== mi-comments-tab ===== */
.tappy-icon-tabs{
  justify-content:space-around!important;
}

.tappy-icon-tabs button{
  flex:1 1 25%!important;
  max-width:125px!important;
}

.tappy-icon-tabs .comments-tab-icon svg{
  stroke-width:2.15!important;
}

.comments-only-pane.active{
  display:block!important;
}

.comments-tab-card{
  min-height:52vh;
}

.comments-tab-card .comments-head{
  margin-bottom:16px;
}

.comments-tab-card .comment-composer{
  margin-top:14px;
}

.comments-tab-card .comments-list{
  margin-top:18px;
}

@media(max-width:740px){
  .tappy-icon-tabs{
    padding-inline:4px!important;
  }

  .tappy-icon-tabs button{
    min-width:0!important;
    max-width:none!important;
    padding-inline:5px!important;
  }

  .tappy-icon-tabs .tab-icon{
    width:30px!important;
    height:30px!important;
  }

  .tappy-icon-tabs .tab-icon svg{
    width:26px!important;
    height:26px!important;
  }

  .comments-tab-card{
    min-height:48vh;
  }
}

/* ===== mi-work-cta-visibility-fix ===== */
/* الزر السفلي لا يظهر مطلقًا إلا داخل صفحة عمل نشطة */
.tappy-bottom-cta{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}

#workDetailView.active > .tappy-bottom-cta,
body.work-detail-open #workDetailView.active > .tappy-bottom-cta{
  display:flex!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
}

/* حماية إضافية من أي عنصر ثابت يتسرب خارج صفحة العمل */
body:not(.work-detail-open) .tappy-bottom-cta{
  display:none!important;
}

#workDetailView:not(.active){
  display:none!important;
}

#workDetailView:not(.active) *{
  pointer-events:none!important;
}

body:not(.work-detail-open){
  overflow-x:hidden;
}

/* ===== mi-quick-tabs-click-fix ===== */
.mi-quick-tabs{
  position:relative;
  z-index:8;
  pointer-events:auto!important;
}

.mi-quick-tabs button{
  position:relative;
  z-index:1;
  pointer-events:auto!important;
  cursor:pointer;
  touch-action:manipulation;
  user-select:none;
  -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
}

.mi-quick-tabs button>*{
  pointer-events:none!important;
}

body.work-detail-open .mi-quick-tabs{
  pointer-events:none!important;
}

@media(max-width:740px){
  .mi-quick-tabs{
    overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
  }

  .mi-quick-tabs button{
    scroll-snap-align:start;
  }
}

/* ===== mi-work-announcements ===== */
/* خمسة تبويبات متوازنة */
.tappy-icon-tabs button{
  flex:1 1 20%!important;
  max-width:112px!important;
}

.tappy-icon-tabs .announcement-tab-icon svg{
  stroke-width:2.15!important;
}

.announcement-only-pane.active{
  display:block!important;
}

.announcement-tab-card{
  min-height:52vh;
}

.announcement-section-title{
  margin-bottom:20px;
}

.work-announcement-card{
  position:relative;
  overflow:hidden;
  padding:28px;
  border:1px solid rgba(220,50,62,.18);
  border-radius:24px;
  background:
    radial-gradient(circle at 90% 10%,rgba(235,67,79,.13),transparent 34%),
    linear-gradient(145deg,#fff,#fff7f8);
  box-shadow:0 18px 42px rgba(84,22,28,.08);
}

.work-announcement-card::before{
  content:"";
  position:absolute;
  top:0;
  right:0;
  width:7px;
  height:100%;
  background:linear-gradient(#ff6975,#d92f3c);
}

.announcement-card-head{
  display:flex;
  align-items:center;
  gap:15px;
  margin-bottom:18px;
}

.announcement-megaphone{
  width:58px;
  height:58px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border-radius:19px;
  background:linear-gradient(145deg,#ff6673,#d92f3d);
  color:#fff;
  box-shadow:0 13px 30px rgba(217,47,61,.24);
}

.announcement-megaphone svg{
  width:31px;
  height:31px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.announcement-card-head small{
  color:#d63b48!important;
  font-size:12px!important;
  font-weight:800;
}

.announcement-card-head h3{
  margin:4px 0 0;
  color:#17171b;
  font-size:25px!important;
  line-height:1.45;
}

.work-announcement-card>p{
  margin:0;
  color:#424249!important;
  font-size:17px!important;
  line-height:2!important;
  white-space:pre-wrap;
}

.announcement-link{
  width:max-content;
  max-width:100%;
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin-top:22px;
  padding:11px 16px;
  border-radius:13px;
  background:#171719;
  color:#fff;
  font-size:13px;
  font-weight:800;
}

.announcement-link b{
  font-size:17px;
}

.announcement-empty-state{
  min-height:300px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:8px;
  padding:30px;
  border:1px dashed #d9d9de;
  border-radius:22px;
  background:#fafafa;
  text-align:center;
}

.announcement-empty-state>span{
  font-size:48px;
}

.announcement-empty-state h3{
  margin:0;
  color:#25252b;
  font-size:22px!important;
}

.announcement-empty-state p{
  max-width:470px;
  margin:0;
  color:#777780!important;
  font-size:14px!important;
}

.announcement-enable-row{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:18px;
  padding:15px;
  border:1px solid var(--line);
  border-radius:15px;
  background:var(--surface2);
}

.announcement-enable-row input{
  width:20px;
  height:20px;
  accent-color:var(--accent);
}

.announcement-enable-row span{
  display:grid;
  gap:3px;
}

.announcement-enable-row strong{
  font-size:13px;
}

.announcement-enable-row small{
  color:var(--muted);
  font-size:10px!important;
}

@media(max-width:740px){
  .tappy-icon-tabs{
    padding-inline:2px!important;
  }

  .tappy-icon-tabs button{
    min-width:0!important;
    max-width:none!important;
    padding-inline:3px!important;
  }

  .tappy-icon-tabs .tab-icon{
    width:28px!important;
    height:28px!important;
  }

  .tappy-icon-tabs .tab-icon svg{
    width:24px!important;
    height:24px!important;
  }

  .work-announcement-card{
    padding:20px 18px;
    border-radius:19px;
  }

  .announcement-megaphone{
    width:49px;
    height:49px;
    border-radius:16px;
  }

  .announcement-megaphone svg{
    width:27px;
    height:27px;
  }

  .announcement-card-head h3{
    font-size:21px!important;
  }

  .work-announcement-card>p{
    font-size:15px!important;
  }

  .announcement-empty-state{
    min-height:240px;
    padding:22px 16px;
  }
}

/* ===== mi-merge-gallery-into-info ===== */
/* بعد دمج الصور مع المعلومات أصبحت التبويبات 4 */
.tappy-icon-tabs button{
  flex:1 1 25%!important;
  max-width:132px!important;
}

.gallery-merged-card{
  margin-top:18px;
}

.gallery-merged-card .series-section-title{
  margin-bottom:18px;
}

.gallery-merged-card .gallery-grid{
  margin-top:0;
}

@media(max-width:740px){
  .tappy-icon-tabs button{
    flex:1 1 25%!important;
    max-width:none!important;
  }

  .gallery-merged-card{
    margin-top:14px;
  }
}

/* ===== mi-category-quick-tabs ===== */
.mi-category-tabs{
  gap:9px!important;
}

.mi-category-tabs button{
  min-width:166px!important;
  height:auto!important;
  min-height:58px!important;
  padding:8px 16px!important;
  text-align:right;
}

.mi-category-tabs .mi-quick-icon{
  width:38px!important;
  height:38px!important;
}

.quick-tab-copy{
  display:grid;
  gap:1px;
  min-width:0;
  line-height:1.25;
}

.quick-tab-copy strong{
  color:inherit;
  font-size:14px!important;
  white-space:nowrap;
}

.quick-tab-copy small{
  color:#898790!important;
  font-size:9.5px!important;
  white-space:nowrap;
}

.mi-category-tabs button.active .quick-tab-copy small{
  color:rgba(255,255,255,.7)!important;
}

.quick-category-results{
  scroll-margin-top:92px;
}

.quick-category-header .eyebrow{
  display:block;
  margin-bottom:4px;
  color:var(--accent)!important;
}

.quick-category-collections{
  display:grid;
  gap:22px;
}

.quick-category-works{
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:18px 13px;
}

.quick-category-empty{
  min-height:180px;
  display:grid;
  place-items:center;
  padding:24px;
  border:1px dashed var(--line);
  border-radius:20px;
  background:var(--surface2);
  color:var(--muted);
  text-align:center;
}

@media(max-width:1100px){
  .quick-category-works{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}

@media(max-width:740px){
  .mi-category-tabs button{
    min-width:max-content!important;
    min-height:52px!important;
    padding:7px 13px!important;
    gap:8px!important;
  }

  .mi-category-tabs .mi-quick-icon{
    width:32px!important;
    height:32px!important;
  }

  .quick-tab-copy strong{
    font-size:12px!important;
  }

  .quick-tab-copy small{
    font-size:8.5px!important;
  }

  .quick-category-results{
    scroll-margin-top:74px;
  }

  .quick-category-works{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px 10px;
  }

  .quick-category-collections{
    gap:16px;
  }
}

/* ===== mi-category-chibi-icons-refined ===== */
.mi-category-tabs .mi-quick-icon{
  width:42px!important;
  height:42px!important;
  position:relative;
  isolation:isolate;
  display:grid!important;
  place-items:center!important;
  flex:0 0 auto!important;
  overflow:visible!important;
  border-radius:15px!important;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.92),
      rgba(244,241,250,.86)
    )!important;
  border:1px solid rgba(105,91,135,.13)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88),
    0 7px 15px rgba(34,25,50,.08)!important;
  transition:
    transform .25s cubic-bezier(.2,.8,.2,1),
    box-shadow .25s ease,
    background .25s ease!important;
}

.mi-category-tabs .mi-quick-icon::before{
  content:""!important;
  display:block!important;
  position:absolute;
  inset:5px;
  z-index:-1;
  border-radius:11px;
  background:
    radial-gradient(
      circle at 35% 25%,
      rgba(255,255,255,.95),
      rgba(202,184,235,.14) 68%,
      transparent 72%
    );
}

.mi-category-tabs .mi-quick-icon::after{
  content:""!important;
  display:block!important;
  position:absolute;
  right:5px;
  top:5px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:rgba(132,91,218,.54);
  box-shadow:0 0 9px rgba(132,91,218,.34);
}

.mi-category-tabs .mi-quick-icon img{
  width:88%!important;
  height:88%!important;
  object-fit:contain!important;
  filter:drop-shadow(0 4px 7px rgba(27,19,41,.17))!important;
  transform:translateY(1px);
  transition:transform .25s cubic-bezier(.2,.8,.2,1)!important;
}

.mi-category-tabs button:hover .mi-quick-icon,
.mi-category-tabs button:focus-visible .mi-quick-icon{
  transform:translateY(-2px) scale(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 10px 21px rgba(45,30,70,.12)!important;
}

.mi-category-tabs button:hover .mi-quick-icon img,
.mi-category-tabs button:focus-visible .mi-quick-icon img{
  transform:translateY(-1px) scale(1.04);
}

.mi-category-tabs button.active .mi-quick-icon{
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.18),
      rgba(255,255,255,.08)
    )!important;
  border-color:rgba(255,255,255,.22)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    0 8px 19px rgba(0,0,0,.20)!important;
}

.mi-category-tabs button.active .mi-quick-icon::before{
  background:
    radial-gradient(
      circle at 35% 25%,
      rgba(255,255,255,.22),
      rgba(255,255,255,.07) 68%,
      transparent 72%
    );
}

.mi-category-tabs button.active .mi-quick-icon::after{
  background:rgba(255,255,255,.86);
  box-shadow:0 0 9px rgba(255,255,255,.45);
}

body:not(.light) .mi-category-tabs button:not(.active) .mi-quick-icon{
  background:
    linear-gradient(
      145deg,
      rgba(38,35,45,.96),
      rgba(24,22,29,.94)
    )!important;
  border-color:rgba(255,255,255,.10)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 7px 16px rgba(0,0,0,.24)!important;
}

body:not(.light) .mi-category-tabs button:not(.active) .mi-quick-icon::before{
  background:
    radial-gradient(
      circle at 35% 25%,
      rgba(255,255,255,.08),
      rgba(132,91,218,.09) 68%,
      transparent 72%
    );
}

@media(max-width:740px){
  .mi-category-tabs .mi-quick-icon{
    width:39px!important;
    height:39px!important;
    border-radius:14px!important;
  }

  .mi-category-tabs .mi-quick-icon::before{
    inset:4px;
    border-radius:10px;
  }

  .mi-category-tabs .mi-quick-icon img{
    width:90%!important;
    height:90%!important;
  }
}

@media(max-width:390px){
  .mi-category-tabs .mi-quick-icon{
    width:37px!important;
    height:37px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .mi-category-tabs .mi-quick-icon,
  .mi-category-tabs .mi-quick-icon img{
    transition:none!important;
  }
}

/* ===== mi-modern-information-desktop ===== */
/* ==========================================================
   Work detail tabs: better for desktop, still compact on mobile
   ========================================================== */
.detail-tab-label{
  display:block;
  color:inherit;
  font-size:12px!important;
  font-weight:800;
  line-height:1.3;
  white-space:nowrap;
}

.tappy-icon-tabs{
  width:min(calc(100% - 32px),1120px)!important;
  min-height:82px!important;
  gap:10px;
  padding:8px!important;
  border:1px solid rgba(0,0,0,.055)!important;
  border-radius:22px!important;
  background:rgba(247,247,249,.94)!important;
  box-shadow:0 10px 26px rgba(25,25,30,.055)!important;
}

.tappy-icon-tabs button{
  max-width:none!important;
  min-height:64px!important;
  display:flex!important;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:9px 18px!important;
  border:0!important;
  border-radius:15px!important;
}

.tappy-icon-tabs button.active{
  border-bottom:0!important;
  background:#171719!important;
  color:#fff!important;
  box-shadow:0 11px 24px rgba(0,0,0,.14)!important;
}

.tappy-icon-tabs .tab-icon{
  width:32px!important;
  height:32px!important;
  margin:0!important;
}

.tappy-icon-tabs .tab-icon svg{
  width:27px!important;
  height:27px!important;
}

/* ==========================================================
   Modern information dashboard
   ========================================================== */
.tappy-detail-content{
  width:min(calc(100% - 36px),1220px)!important;
}

.work-information-dashboard{
  display:grid;
  gap:22px;
}

.information-dashboard-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  padding:28px 30px;
  border:1px solid #e8e8eb;
  border-radius:24px;
  background:
    radial-gradient(circle at 95% 10%,rgba(139,92,246,.10),transparent 30%),
    #fff;
  box-shadow:0 14px 38px rgba(20,20,25,.055);
}

.information-dashboard-head h2{
  margin:5px 0 5px;
  color:#17171a;
  font-size:32px!important;
  line-height:1.35!important;
}

.information-dashboard-head p{
  margin:0;
  color:#74747d!important;
  font-size:14px!important;
  line-height:1.8!important;
}

.information-source-button{
  min-height:46px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  border-radius:13px;
  background:#171719;
  color:#fff;
  font-size:13px;
  font-weight:800;
  white-space:nowrap;
}

.information-source-button span{
  font-size:18px;
}

.information-stat-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:12px;
}

.information-stat-card{
  min-height:112px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:17px;
  border:1px solid #e7e7ea;
  border-radius:19px;
  background:#fff;
  box-shadow:0 9px 24px rgba(18,18,22,.04);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}

.information-stat-card:hover{
  transform:translateY(-3px);
  border-color:rgba(139,92,246,.28);
  box-shadow:0 14px 30px rgba(45,32,72,.08);
}

.information-stat-icon{
  width:42px;
  height:42px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:#f1edff;
  color:#7851dc;
}

.information-stat-icon svg{
  width:23px;
  height:23px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.information-stat-card div{
  min-width:0;
  display:grid;
  gap:4px;
}

.information-stat-card small{
  color:#92929a!important;
  font-size:10.5px!important;
  line-height:1.4!important;
}

.information-stat-card strong{
  color:#202025;
  font-size:14px!important;
  line-height:1.6!important;
  overflow-wrap:anywhere;
}

.information-desktop-layout{
  display:grid;
  grid-template-columns:minmax(0,1.62fr) minmax(310px,.78fr);
  gap:22px;
  align-items:start;
}

.information-main-column,
.information-side-column{
  display:grid;
  gap:22px;
}

.information-side-column{
  position:sticky;
  top:164px;
}

.information-panel{
  padding:26px;
  border:1px solid #e7e7ea;
  border-radius:23px;
  background:#fff;
  box-shadow:0 13px 34px rgba(18,18,22,.045);
}

.information-panel-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:20px;
}

.information-panel-head span{
  color:#8b5cf6!important;
  font-size:11px!important;
  font-weight:800;
  letter-spacing:.35px;
}

.information-panel-head h3{
  margin:5px 0 0;
  color:#18181c;
  font-size:23px!important;
  line-height:1.4!important;
}

.information-panel-head>small{
  color:#919199!important;
  font-size:11px!important;
}

.production-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.production-grid article{
  min-height:108px;
  display:grid;
  align-content:center;
  gap:8px;
  padding:18px;
  border:1px solid #ececef;
  border-radius:17px;
  background:#fafafa;
}

.production-role{
  color:#888891!important;
  font-size:11px!important;
  font-weight:700;
}

.production-grid strong{
  color:#232328;
  font-size:16px!important;
  line-height:1.75!important;
  overflow-wrap:anywhere;
}

.modern-site-ratings{
  display:grid;
  gap:10px;
}

.modern-site-ratings .site-rating-item,
.modern-site-ratings .site-rating-row{
  min-height:58px;
  padding:13px 14px!important;
  border:1px solid #ececef!important;
  border-radius:14px!important;
  background:#fafafa!important;
}

.modern-collection-links{
  display:grid;
  gap:10px;
}

.modern-collection-links .detail-collection-link{
  min-height:56px;
  padding:13px 14px!important;
  border:1px solid #ececef!important;
  border-radius:14px!important;
  background:#fafafa!important;
}

.information-gallery-panel{
  overflow:hidden;
}

.modern-gallery-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:13px!important;
}

.modern-gallery-grid img{
  width:100%!important;
  aspect-ratio:4/5;
  object-fit:cover!important;
  border-radius:16px!important;
  border:1px solid #ededf0;
  cursor:zoom-in;
  transition:transform .25s ease,box-shadow .25s ease;
}

.modern-gallery-grid img:hover{
  transform:translateY(-4px) scale(1.015);
  box-shadow:0 15px 34px rgba(0,0,0,.12);
}

.modern-gallery-empty{
  min-height:220px!important;
  border:1px dashed #dcdce1!important;
  border-radius:18px!important;
  background:#fafafa!important;
}

/* ==========================================================
   General desktop improvements
   ========================================================== */
@media(min-width:1200px){
  :root{
    --header:82px;
  }

  body{
    font-size:17px!important;
  }

  .site-header{
    padding-inline:max(32px,calc((100vw - 1580px)/2 + 32px))!important;
  }

  .brand strong{
    font-size:18px!important;
  }

  .brand small{
    font-size:10px!important;
  }

  .desktop-nav{
    gap:7px!important;
  }

  .desktop-nav button{
    padding:12px 17px!important;
    font-size:13px!important;
  }

  .profile-button{
    font-size:12px!important;
  }

  .view:not(#workDetailView){
    width:min(100%,1600px);
    margin-inline:auto;
    padding-inline:32px!important;
  }

  .page-editorial-head h1,
  .page-head h1{
    font-size:clamp(48px,5vw,72px)!important;
  }

  .page-editorial-head p,
  .page-head p{
    font-size:15px!important;
  }

  .mi-category-tabs button{
    min-width:196px!important;
    min-height:64px!important;
  }

  .quick-tab-copy strong{
    font-size:15px!important;
  }

  .quick-tab-copy small{
    font-size:10px!important;
  }

  .poster-grid{
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
  }

  .platform-poster-card .poster-copy h3,
  .poster-copy h3{
    font-size:16px!important;
  }

  .platform-poster-card .poster-copy>p,
  .poster-copy p{
    font-size:13px!important;
  }

  .editor-shell{
    max-width:1420px;
    margin-inline:auto;
  }

  .modern-form-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }

  .modern-form-grid .form-span-2{
    grid-column:span 2;
  }

  .editor-block-content{
    padding:30px!important;
  }

  .block-heading h3{
    font-size:23px!important;
  }

  .block-heading p{
    font-size:13px!important;
  }
}

/* Medium desktop/tablet */
@media(min-width:741px) and (max-width:1199px){
  .information-stat-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .information-desktop-layout{
    grid-template-columns:1fr;
  }

  .information-side-column{
    position:static;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .modern-gallery-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}

/* Mobile */
@media(max-width:740px){
  .detail-tab-label{
    display:none;
  }

  .tappy-icon-tabs{
    width:calc(100% - 18px)!important;
    min-height:61px!important;
    gap:3px!important;
    padding:5px!important;
    border-radius:18px!important;
  }

  .tappy-icon-tabs button{
    min-height:50px!important;
    padding:7px!important;
    border-radius:13px!important;
  }

  .tappy-icon-tabs .tab-icon{
    width:29px!important;
    height:29px!important;
  }

  .tappy-icon-tabs .tab-icon svg{
    width:25px!important;
    height:25px!important;
  }

  .tappy-detail-content{
    width:calc(100% - 16px)!important;
  }

  .work-information-dashboard{
    gap:14px;
  }

  .information-dashboard-head{
    display:block;
    padding:20px 18px;
    border-radius:19px;
  }

  .information-dashboard-head h2{
    font-size:25px!important;
  }

  .information-dashboard-head p{
    font-size:13px!important;
  }

  .information-source-button{
    width:100%;
    justify-content:center;
    margin-top:15px;
  }

  .information-stat-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }

  .information-stat-card{
    min-height:95px;
    display:grid;
    justify-items:start;
    align-content:center;
    gap:8px;
    padding:13px;
    border-radius:16px;
  }

  .information-stat-icon{
    width:36px;
    height:36px;
    border-radius:12px;
  }

  .information-stat-icon svg{
    width:20px;
    height:20px;
  }

  .information-stat-card strong{
    font-size:12.5px!important;
  }

  .information-desktop-layout{
    grid-template-columns:1fr;
    gap:14px;
  }

  .information-side-column{
    position:static;
    gap:14px;
  }

  .information-panel{
    padding:18px;
    border-radius:19px;
  }

  .information-panel-head h3{
    font-size:21px!important;
  }

  .production-grid{
    grid-template-columns:1fr;
    gap:9px;
  }

  .production-grid article{
    min-height:84px;
    padding:14px;
  }

  .production-grid strong{
    font-size:14px!important;
  }

  .modern-gallery-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;
  }

  .modern-gallery-empty{
    min-height:160px!important;
  }
}

/* Dark mode */
body:not(.light) .tappy-icon-tabs{
  border-color:rgba(255,255,255,.08)!important;
  background:rgba(18,18,22,.94)!important;
}

body:not(.light) .information-dashboard-head,
body:not(.light) .information-stat-card,
body:not(.light) .information-panel{
  border-color:rgba(255,255,255,.09);
  background:#141419;
}

body:not(.light) .information-dashboard-head h2,
body:not(.light) .information-stat-card strong,
body:not(.light) .information-panel-head h3,
body:not(.light) .production-grid strong{
  color:#f4f4f6;
}

body:not(.light) .information-stat-icon{
  background:rgba(139,92,246,.16);
  color:#b89cff;
}

body:not(.light) .production-grid article,
body:not(.light) .modern-site-ratings .site-rating-item,
body:not(.light) .modern-site-ratings .site-rating-row,
body:not(.light) .modern-collection-links .detail-collection-link,
body:not(.light) .modern-gallery-empty{
  border-color:rgba(255,255,255,.08)!important;
  background:#1a1a20!important;
}

body:not(.light) .information-dashboard-head p,
body:not(.light) .information-stat-card small,
body:not(.light) .production-role{
  color:#a3a3ad!important;
}

/* ===== mi-modern-work-panes ===== */
/* ==========================================================
   Shared pane system
   ========================================================== */
.work-overview-dashboard,
.work-announcement-dashboard,
.work-comments-dashboard{
  display:grid;
  gap:22px;
}

.overview-dashboard-head,
.announcement-dashboard-head,
.comments-dashboard-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  padding:27px 30px;
  border:1px solid #e8e8eb;
  border-radius:24px;
  background:
    radial-gradient(circle at 94% 8%,rgba(139,92,246,.10),transparent 30%),
    #fff;
  box-shadow:0 14px 38px rgba(20,20,25,.05);
}

.overview-dashboard-head h2,
.announcement-dashboard-head h2,
.comments-dashboard-head h2{
  margin:5px 0;
  color:#17171a;
  font-size:32px!important;
  line-height:1.35!important;
}

.overview-dashboard-head p,
.announcement-dashboard-head p,
.comments-dashboard-head p{
  margin:0;
  color:#74747d!important;
  font-size:14px!important;
  line-height:1.8!important;
}

/* ==========================================================
   Overview pane
   ========================================================== */
.overview-stat-strip{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}

.overview-stat-strip article{
  min-height:92px;
  display:grid;
  align-content:center;
  gap:6px;
  padding:17px 19px;
  border:1px solid #e7e7ea;
  border-radius:18px;
  background:#fff;
  box-shadow:0 9px 24px rgba(18,18,22,.035);
}

.overview-stat-strip small{
  color:#93939b!important;
  font-size:10.5px!important;
}

.overview-stat-strip strong{
  color:#202025;
  font-size:16px!important;
  line-height:1.55!important;
}

.overview-desktop-layout{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(330px,.72fr);
  gap:22px;
  align-items:start;
}

.overview-main-column{
  display:grid;
  gap:22px;
}

.overview-side-column{
  position:sticky;
  top:164px;
}

.overview-panel,
.overview-vote-panel{
  padding:27px!important;
  border:1px solid #e7e7ea!important;
  border-radius:23px!important;
  background:#fff!important;
  box-shadow:0 13px 34px rgba(18,18,22,.045)!important;
}

.overview-panel-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:20px;
}

.overview-panel-head span{
  color:#8b5cf6!important;
  font-size:11px!important;
  font-weight:800;
  letter-spacing:.35px;
}

.overview-panel-head h3{
  margin:5px 0 0;
  color:#18181c;
  font-size:24px!important;
  line-height:1.4!important;
}

.modern-series-synopsis{
  margin:0!important;
  color:#3f3f46!important;
  font-size:17px!important;
  line-height:2.05!important;
}

.modern-series-tags{
  margin-top:22px!important;
}

.modern-series-tags span{
  padding:8px 13px!important;
  border:1px solid #e7e4ef!important;
  border-radius:999px!important;
  background:#f7f4ff!important;
  color:#6d49c7!important;
  font-size:11.5px!important;
}

.modern-review-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:14px!important;
}

.modern-review-grid .review-card{
  min-height:220px!important;
  padding:22px!important;
  border:1px solid #ececef!important;
  border-radius:18px!important;
  background:#fafafa!important;
}

.review-card-heading{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:17px;
}

.review-indicator{
  width:10px;
  height:10px;
  border-radius:50%;
}

.positive-indicator{
  background:#39c982;
  box-shadow:0 0 0 5px rgba(57,201,130,.10);
}

.negative-indicator{
  background:#ef5b67;
  box-shadow:0 0 0 5px rgba(239,91,103,.10);
}

.review-card-heading .review-card-title{
  color:#202025!important;
  font-size:16px!important;
}

.modern-review-grid .review-card>div:last-child{
  display:grid;
  gap:10px;
}

.modern-review-grid .review-card>div:last-child>div{
  position:relative;
  padding-right:18px;
  color:#57575f!important;
  font-size:14px!important;
  line-height:1.9!important;
}

.modern-review-grid .review-card>div:last-child>div::before{
  content:"";
  position:absolute;
  right:0;
  top:.8em;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#b5b5bd;
}

.modern-editor-note{
  min-height:150px!important;
  margin-top:14px!important;
  padding:22px!important;
  border:1px solid #e7e2f3!important;
  border-radius:18px!important;
  background:
    linear-gradient(145deg,#faf8ff,#f6f3fd)!important;
}

.modern-editor-note>span{
  color:#7752cf!important;
  font-size:12px!important;
  font-weight:800;
}

.modern-editor-note p{
  margin:18px 0 0!important;
  color:#33333a!important;
  font-size:18px!important;
  line-height:1.9!important;
}

.overview-related-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:18px 12px!important;
}

.overview-vote-panel{
  padding:24px!important;
}

.overview-vote-panel .work-vote-heading{
  display:grid!important;
  gap:14px!important;
  margin-bottom:18px!important;
}

.overview-vote-panel .work-vote-heading h2{
  font-size:25px!important;
}

.overview-vote-panel .work-vote-current{
  min-width:0!important;
  padding:12px 13px;
  border:1px solid #ececef;
  border-radius:14px;
  background:#fafafa;
  text-align:right!important;
}

.overview-vote-panel .recommendation-vote-boxes{
  grid-template-columns:1fr!important;
  gap:9px!important;
}

.overview-vote-panel .recommendation-vote-box{
  min-height:90px!important;
  display:grid!important;
  grid-template-columns:44px 1fr!important;
  grid-template-rows:auto auto!important;
  justify-items:start!important;
  align-items:center!important;
  column-gap:12px!important;
  row-gap:2px!important;
  padding:14px 16px!important;
  text-align:right!important;
}

.overview-vote-panel .vote-box-emoji{
  grid-row:1/3;
  font-size:31px!important;
}

.overview-vote-panel .recommendation-vote-box strong{
  font-size:15px!important;
}

.overview-vote-panel .recommendation-vote-box small{
  font-size:10px!important;
}

.overview-vote-panel .recommendation-vote-results{
  grid-template-columns:1fr!important;
  gap:8px!important;
}

/* ==========================================================
   Announcements pane
   ========================================================== */
.announcement-availability-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border:1px solid #e0e0e4;
  border-radius:999px;
  background:#f6f6f8;
  color:#72727a;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}

.announcement-availability-badge::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:#aaaab2;
}

.announcement-availability-badge.active{
  border-color:rgba(39,190,111,.24);
  background:rgba(39,190,111,.09);
  color:#179655;
}

.announcement-availability-badge.active::before{
  background:#27be6f;
  box-shadow:0 0 0 5px rgba(39,190,111,.10);
}

.announcement-dashboard-layout{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(290px,.65fr);
  gap:22px;
  align-items:start;
}

.announcement-main-column{
  min-width:0;
}

.modern-announcement-card{
  min-height:420px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:38px!important;
  border:1px solid rgba(217,47,61,.16)!important;
  border-radius:25px!important;
  background:
    radial-gradient(circle at 92% 8%,rgba(235,67,79,.14),transparent 32%),
    linear-gradient(145deg,#fff,#fff8f9)!important;
  box-shadow:0 19px 46px rgba(84,22,28,.075)!important;
}

.announcement-card-topline{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:26px;
}

.modern-announcement-card .announcement-megaphone{
  width:64px!important;
  height:64px!important;
  border-radius:20px!important;
}

.modern-announcement-card .announcement-card-topline small{
  color:#cf3c49!important;
  font-size:12px!important;
  font-weight:800;
}

.modern-announcement-card .announcement-card-topline h3{
  margin:4px 0 0;
  color:#17171a;
  font-size:30px!important;
  line-height:1.45!important;
}

.announcement-message{
  padding:24px;
  border:1px solid rgba(217,47,61,.10);
  border-radius:18px;
  background:rgba(255,255,255,.70);
}

.announcement-message p{
  margin:0!important;
  color:#3d3d44!important;
  font-size:18px!important;
  line-height:2.05!important;
  white-space:pre-wrap;
}

.modern-announcement-card .announcement-link{
  margin-top:24px!important;
}

.modern-announcement-empty{
  min-height:420px!important;
  padding:38px!important;
  border-radius:25px!important;
  background:#fff!important;
  box-shadow:0 13px 34px rgba(18,18,22,.04);
}

.announcement-empty-icon{
  width:78px;
  height:78px;
  display:grid;
  place-items:center;
  border-radius:25px;
  background:#f2effb;
  color:#7851dc;
}

.announcement-empty-icon svg{
  width:40px;
  height:40px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.modern-announcement-empty>span{
  font-size:initial!important;
}

.modern-announcement-empty h3{
  font-size:25px!important;
}

.announcement-side-panel{
  position:sticky;
  top:164px;
  padding:26px;
  border:1px solid #e7e7ea;
  border-radius:23px;
  background:#fff;
  box-shadow:0 13px 34px rgba(18,18,22,.04);
}

.announcement-side-kicker{
  color:#8b5cf6;
  font-size:10px;
  font-weight:900;
  letter-spacing:.45px;
}

.announcement-side-panel h3{
  margin:7px 0 20px;
  color:#1d1d22;
  font-size:23px!important;
}

.announcement-type-list{
  display:grid;
  gap:11px;
}

.announcement-type-list article{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px;
  border:1px solid #ececef;
  border-radius:15px;
  background:#fafafa;
}

.announcement-type-list article>span{
  width:9px;
  height:9px;
  flex:0 0 auto;
  margin-top:7px;
  border-radius:50%;
  background:#8b5cf6;
  box-shadow:0 0 0 5px rgba(139,92,246,.08);
}

.announcement-type-list article div{
  display:grid;
  gap:4px;
}

.announcement-type-list strong{
  color:#28282e;
  font-size:13px!important;
}

.announcement-type-list small{
  color:#85858d!important;
  font-size:10.5px!important;
  line-height:1.7!important;
}

/* ==========================================================
   Comments pane
   ========================================================== */
.comments-head-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.comments-count-badge{
  padding:9px 13px;
  border:1px solid #e1e1e5;
  border-radius:999px;
  background:#f7f7f9;
  color:#67676f;
  font-size:11px;
  font-weight:800;
  white-space:nowrap;
}

.comments-head-actions select{
  min-height:42px;
  padding:8px 13px;
  border:1px solid #dedee3;
  border-radius:12px;
  background:#fff;
  color:#29292f;
  font-size:12px!important;
}

.comments-desktop-layout{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(330px,.72fr);
  gap:22px;
  align-items:start;
}

.comments-feed-panel,
.comments-compose-panel{
  padding:26px;
  border:1px solid #e7e7ea;
  border-radius:23px;
  background:#fff;
  box-shadow:0 13px 34px rgba(18,18,22,.04);
}

.comments-feed-panel{
  min-height:520px;
}

.comments-feed-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:20px;
  padding-bottom:16px;
  border-bottom:1px solid #ececef;
}

.comments-feed-head h3{
  margin:0;
  color:#1d1d22;
  font-size:23px!important;
}

.comments-feed-head span{
  color:#8c8c94;
  font-size:11px;
}

.modern-comments-list{
  display:grid;
  gap:12px;
}

.modern-comments-list .comment-card{
  position:relative;
  display:grid!important;
  grid-template-columns:46px minmax(0,1fr) auto!important;
  gap:13px!important;
  padding:17px!important;
  border:1px solid #ececef!important;
  border-radius:17px!important;
  background:#fafafa!important;
}

.modern-comments-list .comment-avatar{
  width:46px!important;
  height:46px!important;
  border-radius:15px!important;
  background:linear-gradient(145deg,#8b5cf6,#6840c8)!important;
  color:#fff!important;
}

.modern-comments-list .comment-card h4{
  margin:0 0 2px!important;
  color:#25252b!important;
  font-size:14px!important;
}

.modern-comments-list .comment-card time{
  color:#9999a1!important;
  font-size:9.5px!important;
}

.modern-comments-list .comment-card p{
  margin:8px 0 0!important;
  color:#4d4d55!important;
  font-size:14px!important;
  line-height:1.9!important;
}

.modern-comments-list .comment-delete{
  align-self:start;
  padding:7px 10px;
  border:1px solid #f1cbd0;
  border-radius:10px;
  background:#fff6f7;
  color:#d64654;
  font-size:10px!important;
}

.modern-comments-list .comment-empty{
  min-height:330px;
  display:grid;
  place-items:center;
  padding:25px;
  border:1px dashed #dcdce1;
  border-radius:18px;
  background:#fafafa;
  color:#85858e;
  text-align:center;
}

.comments-compose-panel{
  position:sticky;
  top:164px;
}

.compose-panel-head{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:17px;
}

.compose-panel-head .avatar{
  width:48px!important;
  height:48px!important;
  border-radius:16px!important;
}

.compose-panel-head div{
  display:grid;
  gap:3px;
}

.compose-panel-head strong{
  color:#232328;
  font-size:15px!important;
}

.compose-panel-head small{
  color:#8e8e96!important;
  font-size:10.5px!important;
}

.modern-comment-composer{
  margin:0!important;
}

.modern-comment-composer>label{
  display:grid!important;
  gap:10px!important;
}

.modern-comment-composer textarea{
  min-height:170px!important;
  padding:15px!important;
  border:1px solid #dedee3!important;
  border-radius:15px!important;
  background:#fafafa!important;
  font-size:14px!important;
  line-height:1.85!important;
}

.modern-comment-composer textarea:focus{
  border-color:#8b5cf6!important;
  background:#fff!important;
  box-shadow:0 0 0 4px rgba(139,92,246,.08)!important;
}

.comment-composer-actions{
  display:flex!important;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.comment-composer-actions small{
  color:#93939b!important;
  font-size:10px!important;
}

.comment-composer-actions button{
  min-height:43px!important;
  padding:9px 15px!important;
  border-radius:12px!important;
}

.community-guidelines{
  margin-top:18px;
  padding:15px;
  border:1px solid #ececef;
  border-radius:15px;
  background:#fafafa;
}

.community-guidelines>span{
  color:#6f4bc9;
  font-size:11px;
  font-weight:800;
}

.community-guidelines ul{
  display:grid;
  gap:7px;
  margin:11px 0 0;
  padding-right:18px;
}

.community-guidelines li{
  color:#777780;
  font-size:10.5px!important;
  line-height:1.7!important;
}

/* ==========================================================
   Medium screens
   ========================================================== */
@media(min-width:741px) and (max-width:1199px){
  .overview-desktop-layout,
  .announcement-dashboard-layout,
  .comments-desktop-layout{
    grid-template-columns:1fr;
  }

  .overview-side-column,
  .announcement-side-panel,
  .comments-compose-panel{
    position:static;
  }

  .overview-vote-panel .recommendation-vote-boxes{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }

  .overview-vote-panel .recommendation-vote-box{
    min-height:135px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
  }

  .comments-compose-panel{
    order:-1;
  }
}

/* ==========================================================
   Mobile
   ========================================================== */
@media(max-width:740px){
  .work-overview-dashboard,
  .work-announcement-dashboard,
  .work-comments-dashboard{
    gap:14px;
  }

  .overview-dashboard-head,
  .announcement-dashboard-head,
  .comments-dashboard-head{
    display:block;
    padding:20px 18px;
    border-radius:19px;
  }

  .overview-dashboard-head h2,
  .announcement-dashboard-head h2,
  .comments-dashboard-head h2{
    font-size:25px!important;
  }

  .overview-dashboard-head p,
  .announcement-dashboard-head p,
  .comments-dashboard-head p{
    font-size:13px!important;
  }

  .overview-stat-strip{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }

  .overview-stat-strip article{
    min-height:82px;
    padding:13px;
    border-radius:15px;
  }

  .overview-stat-strip strong{
    font-size:13px!important;
  }

  .overview-desktop-layout,
  .announcement-dashboard-layout,
  .comments-desktop-layout{
    grid-template-columns:1fr;
    gap:14px;
  }

  .overview-main-column{
    gap:14px;
  }

  .overview-side-column,
  .announcement-side-panel,
  .comments-compose-panel{
    position:static;
  }

  .overview-side-column{
    order:-1;
  }

  .overview-panel,
  .overview-vote-panel,
  .comments-feed-panel,
  .comments-compose-panel,
  .announcement-side-panel{
    padding:18px!important;
    border-radius:19px!important;
  }

  .overview-panel-head h3,
  .comments-feed-head h3{
    font-size:21px!important;
  }

  .modern-series-synopsis{
    font-size:15px!important;
  }

  .modern-review-grid{
    grid-template-columns:1fr!important;
  }

  .modern-review-grid .review-card{
    min-height:160px!important;
    padding:18px!important;
  }

  .modern-editor-note p{
    font-size:16px!important;
  }

  .overview-related-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:15px 9px!important;
  }

  .overview-vote-panel .recommendation-vote-box{
    min-height:82px!important;
  }

  .announcement-dashboard-head .announcement-availability-badge{
    margin-top:15px;
  }

  .modern-announcement-card,
  .modern-announcement-empty{
    min-height:330px!important;
    padding:21px!important;
    border-radius:20px!important;
  }

  .modern-announcement-card .announcement-card-topline h3{
    font-size:23px!important;
  }

  .announcement-message{
    padding:17px;
  }

  .announcement-message p{
    font-size:15px!important;
  }

  .announcement-side-panel{
    display:none;
  }

  .comments-dashboard-head .comments-head-actions{
    margin-top:15px;
    justify-content:space-between;
  }

  .comments-compose-panel{
    order:-1;
  }

  .comments-feed-panel{
    min-height:360px;
  }

  .comments-feed-head{
    display:block;
  }

  .comments-feed-head span{
    display:block;
    margin-top:4px;
  }

  .modern-comments-list .comment-card{
    grid-template-columns:40px minmax(0,1fr)!important;
    gap:10px!important;
    padding:14px!important;
  }

  .modern-comments-list .comment-avatar{
    width:40px!important;
    height:40px!important;
    border-radius:13px!important;
  }

  .modern-comments-list .comment-delete{
    grid-column:2;
    justify-self:start;
  }

  .modern-comment-composer textarea{
    min-height:135px!important;
  }
}

/* ==========================================================
   Large desktop refinements
   ========================================================== */
@media(min-width:1400px){
  .overview-desktop-layout{
    grid-template-columns:minmax(0,1.75fr) minmax(350px,.68fr);
  }

  .announcement-dashboard-layout{
    grid-template-columns:minmax(0,1.7fr) minmax(320px,.60fr);
  }

  .comments-desktop-layout{
    grid-template-columns:minmax(0,1.65fr) minmax(360px,.65fr);
  }

  .overview-related-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
}

/* ==========================================================
   Dark mode
   ========================================================== */
body:not(.light) .overview-dashboard-head,
body:not(.light) .announcement-dashboard-head,
body:not(.light) .comments-dashboard-head,
body:not(.light) .overview-stat-strip article,
body:not(.light) .overview-panel,
body:not(.light) .overview-vote-panel,
body:not(.light) .announcement-side-panel,
body:not(.light) .comments-feed-panel,
body:not(.light) .comments-compose-panel,
body:not(.light) .modern-announcement-empty{
  border-color:rgba(255,255,255,.09)!important;
  background:#141419!important;
}

body:not(.light) .overview-dashboard-head h2,
body:not(.light) .announcement-dashboard-head h2,
body:not(.light) .comments-dashboard-head h2,
body:not(.light) .overview-stat-strip strong,
body:not(.light) .overview-panel-head h3,
body:not(.light) .announcement-side-panel h3,
body:not(.light) .comments-feed-head h3,
body:not(.light) .compose-panel-head strong{
  color:#f4f4f6!important;
}

body:not(.light) .modern-series-synopsis,
body:not(.light) .modern-editor-note p,
body:not(.light) .modern-comments-list .comment-card p{
  color:#c8c8cf!important;
}

body:not(.light) .modern-review-grid .review-card,
body:not(.light) .overview-vote-panel .work-vote-current,
body:not(.light) .announcement-type-list article,
body:not(.light) .modern-comments-list .comment-card,
body:not(.light) .modern-comments-list .comment-empty,
body:not(.light) .community-guidelines,
body:not(.light) .modern-comment-composer textarea{
  border-color:rgba(255,255,255,.08)!important;
  background:#1a1a20!important;
}

body:not(.light) .modern-editor-note{
  border-color:rgba(139,92,246,.18)!important;
  background:rgba(139,92,246,.08)!important;
}

body:not(.light) .modern-announcement-card{
  border-color:rgba(239,91,103,.18)!important;
  background:
    radial-gradient(circle at 92% 8%,rgba(235,67,79,.13),transparent 32%),
    #15151a!important;
}

body:not(.light) .announcement-message{
  border-color:rgba(255,255,255,.08);
  background:rgba(255,255,255,.035);
}

body:not(.light) .announcement-message p,
body:not(.light) .modern-announcement-card .announcement-card-topline h3{
  color:#f1f1f4!important;
}

body:not(.light) .comments-head-actions select{
  border-color:rgba(255,255,255,.10);
  background:#1a1a20;
  color:#eeeef1;
}

/* ===== mi-work-tabs-premium-final ===== */
/* Premium work tabs — final override */
#workDetailView .tappy-icon-tabs{
  width:min(calc(100% - 40px),1080px)!important;
  min-height:76px!important;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:8px!important;
  margin:18px auto 22px!important;
  padding:7px!important;
  border:1px solid rgba(24,24,29,.07)!important;
  border-radius:22px!important;
  background:rgba(248,248,250,.96)!important;
  box-shadow:
    0 14px 36px rgba(20,20,27,.07),
    inset 0 1px 0 rgba(255,255,255,.92)!important;
  backdrop-filter:blur(18px);
  overflow:visible!important;
}

#workDetailView .tappy-icon-tabs button{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  min-height:60px!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  padding:10px 14px!important;
  border:0!important;
  border-bottom:0!important;
  border-radius:16px!important;
  background:transparent!important;
  color:#9999a2!important;
  box-shadow:none!important;
  transform:none!important;
  transition:
    background .25s ease,
    color .25s ease,
    transform .25s cubic-bezier(.2,.8,.2,1),
    box-shadow .25s ease!important;
}

#workDetailView .tappy-icon-tabs button::after{
  content:"";
  position:absolute;
  right:22%;
  left:22%;
  bottom:5px;
  height:3px;
  border-radius:999px;
  background:transparent;
  transform:scaleX(.35);
  transition:.25s ease;
}

#workDetailView .tappy-icon-tabs button:hover,
#workDetailView .tappy-icon-tabs button:focus-visible{
  color:#29292f!important;
  background:#fff!important;
  transform:translateY(-2px)!important;
  box-shadow:0 10px 24px rgba(20,20,27,.07)!important;
}

#workDetailView .tappy-icon-tabs button.active{
  color:#fff!important;
  background:linear-gradient(145deg,#1b1b1f,#0d0d10)!important;
  transform:translateY(-2px)!important;
  box-shadow:
    0 13px 28px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.12)!important;
}

#workDetailView .tappy-icon-tabs button.active::after{
  background:linear-gradient(90deg,#8b5cf6,#b794ff);
  transform:scaleX(1);
}

#workDetailView .tappy-icon-tabs .tab-icon{
  width:31px!important;
  height:31px!important;
  display:grid!important;
  place-items:center!important;
  flex:0 0 auto!important;
  margin:0!important;
  color:inherit!important;
}

#workDetailView .tappy-icon-tabs .tab-icon svg{
  width:27px!important;
  height:27px!important;
  stroke:currentColor!important;
  stroke-width:2.15!important;
  transition:transform .25s ease!important;
}

#workDetailView .tappy-icon-tabs button:hover .tab-icon svg,
#workDetailView .tappy-icon-tabs button.active .tab-icon svg{
  transform:scale(1.06);
}

#workDetailView .tappy-icon-tabs button.active .tab-icon,
#workDetailView .tappy-icon-tabs button.active .detail-tab-label{
  color:#fff!important;
}

#workDetailView .tappy-icon-tabs .detail-tab-label{
  display:block!important;
  color:inherit!important;
  font-family:var(--mi-font-heading,"Cairo",sans-serif)!important;
  font-size:12.5px!important;
  font-weight:800!important;
  line-height:1.3!important;
  white-space:nowrap!important;
}

/* Translation availability must be black in light mode. */
#workDetailView .translation-stat-card strong,
#overviewTranslation{
  color:#111114!important;
}

@media(max-width:740px){
  #workDetailView .tappy-icon-tabs{
    width:calc(100% - 18px)!important;
    min-height:72px!important;
    gap:5px!important;
    margin:12px auto 16px!important;
    padding:5px!important;
    border-radius:18px!important;
  }

  #workDetailView .tappy-icon-tabs button{
    min-height:61px!important;
    flex-direction:column!important;
    gap:3px!important;
    padding:7px 3px!important;
    border-radius:14px!important;
  }

  #workDetailView .tappy-icon-tabs button::after{
    right:28%;
    left:28%;
    bottom:3px;
    height:2.5px;
  }

  #workDetailView .tappy-icon-tabs .tab-icon{
    width:27px!important;
    height:27px!important;
  }

  #workDetailView .tappy-icon-tabs .tab-icon svg{
    width:24px!important;
    height:24px!important;
  }

  #workDetailView .tappy-icon-tabs .detail-tab-label{
    display:block!important;
    font-size:9.5px!important;
    line-height:1.2!important;
  }
}

@media(max-width:360px){
  #workDetailView .tappy-icon-tabs .detail-tab-label{
    font-size:8.8px!important;
  }

  #workDetailView .tappy-icon-tabs .tab-icon svg{
    width:22px!important;
    height:22px!important;
  }
}

body:not(.light) #workDetailView .tappy-icon-tabs{
  border-color:rgba(255,255,255,.08)!important;
  background:rgba(18,18,22,.95)!important;
  box-shadow:
    0 14px 34px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.04)!important;
}

body:not(.light) #workDetailView .tappy-icon-tabs button{
  color:#8f8f99!important;
}

body:not(.light) #workDetailView .tappy-icon-tabs button:hover,
body:not(.light) #workDetailView .tappy-icon-tabs button:focus-visible{
  color:#f3f3f6!important;
  background:#24242a!important;
}

body:not(.light) #workDetailView .tappy-icon-tabs button.active{
  color:#fff!important;
  background:linear-gradient(145deg,#8b5cf6,#5f38bf)!important;
  box-shadow:0 13px 28px rgba(93,53,190,.30)!important;
}

body:not(.light) #workDetailView .translation-stat-card strong,
body:not(.light) #overviewTranslation{
  color:#f5f5f7!important;
}

@media(prefers-reduced-motion:reduce){
  #workDetailView .tappy-icon-tabs button,
  #workDetailView .tappy-icon-tabs button::after,
  #workDetailView .tappy-icon-tabs .tab-icon svg{
    transition:none!important;
  }
}

/* ===== mi-first-login-home-preferences ===== */
/* إخفاء الشرح بصريًا دون حذف عناصر JavaScript */
#seriesOverview .overview-dashboard-head{
  display:none!important;
}

#seriesInformation .information-dashboard-head,
#seriesAnnouncements .announcement-dashboard-head,
#seriesDiscussion .comments-dashboard-head{
  min-height:0!important;
  padding:0!important;
  margin:0 0 12px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  justify-content:flex-end!important;
}

#seriesInformation .information-dashboard-head>div,
#seriesAnnouncements .announcement-dashboard-head>div:first-child,
#seriesDiscussion .comments-dashboard-head>div:first-child{
  display:none!important;
}

/* اختيار أول تسجيل دخول */
.primary-preference-sheet{
  max-width:760px!important;
}

.primary-preference-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin:18px 0;
}

.primary-preference-card{
  min-height:190px;
  position:relative;
  display:grid;
  place-items:center;
  align-content:center;
  gap:9px;
  padding:20px 16px;
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--surface2);
  text-align:center;
  cursor:pointer;
  transition:
   transform .22s ease,
   border-color .22s ease,
   background .22s ease,
   box-shadow .22s ease;
}

.primary-preference-card:hover{
  transform:translateY(-3px);
  border-color:var(--accent);
}

.primary-preference-card input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.primary-preference-card:has(input:checked){
  border-color:var(--accent);
  background:color-mix(
   in srgb,
   var(--accent) 13%,
   var(--surface)
  );
  box-shadow:
   0 0 0 3px color-mix(
    in srgb,
    var(--accent) 12%,
    transparent
   ),
   0 15px 32px rgba(20,20,30,.10);
}

.preference-card-icon{
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  border-radius:20px;
  background:var(--surface);
  color:var(--accent);
  font-size:29px;
  font-weight:900;
  box-shadow:0 10px 22px rgba(20,20,30,.08);
}

.primary-preference-card strong{
  color:var(--text);
  font-size:17px!important;
}

.primary-preference-card small{
  color:var(--muted)!important;
  font-size:10.5px!important;
  line-height:1.8!important;
}

.mandatory-preference-sheet{
  z-index:260!important;
}

.home-preference-empty{
  grid-column:1/-1;
  min-height:170px;
  display:grid;
  place-items:center;
  padding:24px;
  border:1px dashed var(--line);
  border-radius:20px;
  background:var(--surface2);
  color:var(--muted);
  text-align:center;
  font-size:12px;
}

@media(max-width:740px){
  .primary-preference-grid{
    grid-template-columns:1fr;
    gap:9px;
  }

  .primary-preference-card{
    min-height:110px;
    grid-template-columns:52px 1fr;
    grid-template-rows:auto auto;
    justify-items:start;
    align-items:center;
    column-gap:13px;
    padding:14px;
    text-align:right;
  }

  .preference-card-icon{
    width:52px;
    height:52px;
    grid-row:1/3;
    border-radius:16px;
    font-size:24px;
  }

  .primary-preference-card strong{
    font-size:15px!important;
  }

  .primary-preference-card small{
    font-size:9.5px!important;
  }
}

/* ===== mi-follow-notification-system ===== */
.follow-notification-rules{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin:16px 0;
}

.follow-notification-rules article{
  min-height:120px;
  display:flex;
  align-items:center;
  gap:13px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:17px;
  background:var(--surface2);
}

.follow-notification-icon{
  width:48px;
  height:48px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border-radius:15px;
  background:color-mix(
   in srgb,
   var(--accent) 13%,
   var(--surface)
  );
  color:var(--accent);
  font-size:21px;
  font-weight:900;
}

.follow-notification-rules strong{
  color:var(--text);
  font-size:12px!important;
}

.follow-notification-rules p{
  margin:5px 0 0;
  color:var(--muted)!important;
  font-size:9.5px!important;
  line-height:1.8!important;
}

.follow-notification-feed{
  display:grid;
  gap:9px;
}

.follow-notification-entry{
  position:relative;
  display:grid;
  grid-template-columns:58px minmax(0,1fr) 8px;
  align-items:center;
  gap:12px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--surface2);
  cursor:pointer;
  transition:
   transform .2s ease,
   border-color .2s ease,
   background .2s ease;
}

.follow-notification-entry:hover{
  transform:translateY(-2px);
  border-color:color-mix(
   in srgb,
   var(--accent) 42%,
   var(--line)
  );
}

.follow-notification-entry.unread{
  background:color-mix(
   in srgb,
   var(--accent) 8%,
   var(--surface)
  );
  border-color:color-mix(
   in srgb,
   var(--accent) 27%,
   var(--line)
  );
}

.notification-entry-image{
  width:58px;
  height:58px;
  overflow:hidden;
  display:grid;
  place-items:center;
  border-radius:15px;
  background:var(--surface);
  color:var(--accent);
  font-size:22px;
  font-weight:900;
}

.notification-entry-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.notification-entry-copy{
  min-width:0;
}

.notification-entry-copy small{
  display:block;
  margin-bottom:3px;
  color:var(--accent)!important;
  font-size:8px!important;
  font-weight:800;
}

.notification-entry-copy h4{
  margin:0;
  color:var(--text);
  font-size:11px!important;
  line-height:1.65!important;
}

.notification-entry-copy p{
  margin:3px 0;
  color:var(--muted)!important;
  font-size:8.5px!important;
  line-height:1.75!important;
}

.notification-entry-copy time{
  color:var(--muted)!important;
  font-size:7.5px!important;
}

.notification-unread-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:transparent;
}

.follow-notification-entry.unread
.notification-unread-dot{
  background:var(--accent);
  box-shadow:0 0 0 5px color-mix(
   in srgb,
   var(--accent) 12%,
   transparent
  );
}

@media(max-width:740px){
  .follow-notification-rules{
    grid-template-columns:1fr;
  }

  .follow-notification-rules article{
    min-height:94px;
  }

  .follow-notification-entry{
    grid-template-columns:50px minmax(0,1fr) 7px;
    gap:10px;
    padding:10px;
  }

  .notification-entry-image{
    width:50px;
    height:50px;
    border-radius:13px;
  }
}

/* ===== instagram-brand-upgrade ===== */
.instagram-brand-link{
  --brand-rx:0deg;
  --brand-ry:0deg;
  --brand-lift:0px;
  display:inline-flex;
  align-items:center;
  position:relative;
  isolation:isolate;
  transform-style:preserve-3d;
  transform:perspective(720px) translateY(var(--brand-lift)) rotateX(var(--brand-rx)) rotateY(var(--brand-ry));
  transition:transform .22s cubic-bezier(.2,.8,.2,1),filter .22s ease;
  animation:brandFloat 4.8s ease-in-out infinite;
  will-change:transform;
}
.instagram-brand-link::before{
  content:"";
  position:absolute;
  inset:-14px -22px;
  border-radius:999px;
  background:
    radial-gradient(circle at 72% 45%,rgba(139,92,246,.34),transparent 35%),
    radial-gradient(circle at 30% 55%,rgba(168,139,250,.18),transparent 42%);
  filter:blur(13px);
  opacity:.72;
  z-index:-2;
  animation:brandAura 3.2s ease-in-out infinite;
}
.instagram-brand-link::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;
  background:linear-gradient(105deg,transparent 9%,rgba(255,255,255,.08) 24%,rgba(255,255,255,.42) 32%,transparent 46%);
  transform:translateX(-155%) skewX(-18deg);
  z-index:3;
  pointer-events:none;
  animation:brandShine 5.6s ease-in-out infinite;
}
.instagram-brand-shell{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:6px 12px;
  border-radius:999px;
  background:transparent;
  transform:translateZ(22px);
}
.instagram-brand-shell::after{
  content:"";
  position:absolute;
  width:10px;
  height:10px;
  top:4px;
  right:19%;
  border-radius:50%;
  background:#9b7cff;
  box-shadow:0 0 0 0 rgba(139,92,246,.38);
  animation:brandDotPulse 2.2s ease-out infinite;
  opacity:.9;
}
.instagram-brand-image{
  display:block;
  width:auto;
  object-fit:contain;
  filter:drop-shadow(0 8px 17px rgba(0,0,0,.14));
  transition:filter .25s ease,transform .25s ease;
}
.site-brand-image{height:44px;max-width:min(38vw,330px);}
.detail-brand-image{height:34px;max-width:min(30vw,240px);}
.instagram-brand-link:hover{
  --brand-lift:-4px;
  filter:saturate(1.12) contrast(1.03);
}
.instagram-brand-link:hover::before{
  opacity:1;
  filter:blur(16px);
}
.instagram-brand-link:hover .instagram-brand-image{
  transform:scale(1.035);
  filter:drop-shadow(0 13px 25px rgba(92,60,190,.24));
}
.instagram-brand-link:active{
  --brand-lift:0px;
  transform:perspective(720px) scale(.965) rotateX(0) rotateY(0);
}
.exact-logo{overflow:visible!important;}
.exact-logo .site-brand-shell{padding:6px 4px 6px 0;}
.tappy-detail-brand{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px;
  padding:5px 10px!important;
  border:1px solid rgba(139,92,246,.13);
  border-radius:999px;
  background:rgba(139,92,246,.055);
  text-decoration:none!important;
  overflow:visible!important;
}
.tappy-detail-brand .detail-brand-shell{padding:1px 2px;}
.detail-brand-handle{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:#6f56bf;
  font-family:Arial,sans-serif!important;
  font-size:10px!important;
  font-weight:800;
  direction:ltr;
  transform:translateZ(14px);
}
.detail-brand-handle i,
.welcome-brand-follow i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#9b7cff;
  box-shadow:0 0 0 5px rgba(139,92,246,.10);
  animation:brandMiniPulse 2s ease-in-out infinite;
}
.branded-welcome-card{
  overflow:hidden;
  background:
    radial-gradient(circle at 82% 2%,rgba(139,92,246,.14),transparent 32%),
    var(--surface)!important;
}
.welcome-instagram-brand{
  width:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:7px;
  margin:1px 0 23px;
  padding:14px 18px;
  border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line));
  border-radius:22px;
  background:color-mix(in srgb,var(--accent) 6%,var(--surface));
}
.welcome-brand-shell{padding:4px 7px;}
.welcome-brand-image{height:68px;max-width:min(76vw,440px);}
.welcome-brand-follow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  color:var(--muted);
  font-size:9px!important;
  font-weight:700;
  direction:rtl;
  transform:translateZ(15px);
}
@keyframes brandFloat{
  0%,100%{translate:0 0}
  50%{translate:0 -2px}
}
@keyframes brandAura{
  0%,100%{opacity:.62;transform:scale(.93)}
  50%{opacity:1;transform:scale(1.08)}
}
@keyframes brandShine{
  0%,66%,100%{transform:translateX(-155%) skewX(-18deg)}
  80%{transform:translateX(155%) skewX(-18deg)}
}
@keyframes brandDotPulse{
  0%{box-shadow:0 0 0 0 rgba(139,92,246,.40);transform:scale(.85)}
  70%{box-shadow:0 0 0 14px rgba(139,92,246,0);transform:scale(1.15)}
  100%{box-shadow:0 0 0 0 rgba(139,92,246,0);transform:scale(.85)}
}
@keyframes brandMiniPulse{
  0%,100%{opacity:.65;transform:scale(.85)}
  50%{opacity:1;transform:scale(1.15)}
}
@media(max-width:740px){
  .site-brand-image{height:29px;max-width:48vw;}
  .detail-brand-image{height:24px;max-width:35vw;}
  .instagram-brand-link::before{inset:-8px -10px;}
  .instagram-brand-shell{padding:2px 3px;}
  .instagram-brand-shell::after{width:7px;height:7px;top:1px;}
  .tappy-detail-brand{padding:3px 7px!important;gap:4px;}
  .detail-brand-handle{display:none;}
  .welcome-instagram-brand{padding:12px 10px;margin-bottom:18px;}
  .welcome-brand-image{height:44px;max-width:74vw;}
  .welcome-brand-follow{font-size:8px!important;}
}
@media(prefers-reduced-motion:reduce){
  .instagram-brand-link,
  .instagram-brand-link::before,
  .instagram-brand-link::after,
  .instagram-brand-shell::after,
  .detail-brand-handle i,
  .welcome-brand-follow i{
    animation:none!important;
  }
}

/* ===== mi-balanced-responsive-logo ===== */
.site-brand-shell{
  padding:3px 2px!important;
}

.detail-brand-shell{
  padding:1px 2px!important;
}

.welcome-brand-shell{
  padding:2px 4px!important;
}

.instagram-brand-link::before{
  inset:-7px -10px!important;
}

@media(min-width:1200px){
  .site-brand-image{
    height:46px!important;
    max-width:340px!important;
  }

  .detail-brand-image{
    height:35px!important;
    max-width:250px!important;
  }
}

@media(max-width:740px){
  .instagram-brand-link::before{
    inset:-4px -6px!important;
    filter:blur(7px)!important;
  }

  .site-brand-shell,
  .detail-brand-shell{
    padding:0!important;
  }

  .welcome-instagram-brand{
    padding:10px 12px!important;
    margin-bottom:16px!important;
  }
}

@media(max-width:390px){
  .site-brand-image{
    height:27px!important;
    max-width:45vw!important;
  }

  .detail-brand-image{
    height:22px!important;
    max-width:32vw!important;
  }

  .welcome-brand-image{
    height:41px!important;
    max-width:70vw!important;
  }
}

/* ===== bug-fix-patch ===== */
/* --- bug fixes: transparent logo + asset fallbacks --- */
.site-header .instagram-brand-link::before,
.site-header .instagram-brand-link::after{
  display:none !important;
}
.site-header .instagram-brand-link{
  animation:none !important;
  filter:none !important;
}
.site-header .instagram-brand-shell{
  background:transparent !important;
  box-shadow:none !important;
  padding:2px 4px !important;
}
.site-header .instagram-brand-image{
  filter:none !important;
  background:transparent !important;
  mix-blend-mode:normal !important;
}
.site-header .instagram-brand-shell::after{
  right:14% !important;
  top:2px !important;
  width:8px !important;
  height:8px !important;
  box-shadow:0 0 0 0 rgba(139,92,246,.22) !important;
}
.mi-quick-icon img,
.collection-card img,
.work-card img,
.hero-cover img,
.featured-card img,
img.media-thumb{
  background:transparent !important;
}
img[data-fallback-hidden="1"]{
  display:none !important;
}
.hero-shell,.featured-card,.collection-card,.work-card{
  overflow:hidden;
}

/* ===== mi-final-polish ===== */
:root{
  --mi-card-radius:18px;
  --mi-soft-shadow:0 10px 28px rgba(20,20,28,.07);
  --mi-hover-shadow:0 16px 38px rgba(20,20,28,.12);
}

/* Header and logo: transparent, compact and stable */
.site-header{
  min-height:72px!important;
  padding-top:8px!important;
  padding-bottom:8px!important;
  background:color-mix(in srgb,var(--bg) 94%,transparent)!important;
  backdrop-filter:blur(18px);
}

.site-header .instagram-brand-link{
  animation:none!important;
  filter:none!important;
  transform:none!important;
}

.site-header .instagram-brand-link::before,
.site-header .instagram-brand-link::after,
.site-header .instagram-brand-shell::after{
  display:none!important;
}

.site-header .instagram-brand-shell{
  padding:0!important;
  background:transparent!important;
  box-shadow:none!important;
  border:0!important;
}

.site-header .instagram-brand-image{
  height:38px!important;
  max-width:min(43vw,300px)!important;
  background:transparent!important;
  filter:none!important;
}

/* Page spacing and mobile dock protection */
main{
  padding-bottom:118px!important;
}

.view{
  max-width:1540px;
  margin-inline:auto;
}

.exact-page-top{
  padding-top:28px!important;
  padding-bottom:15px!important;
}

.exact-page-top h1{
  font-size:clamp(34px,4.5vw,58px)!important;
  letter-spacing:-1px;
}

/* Quick category tabs */
.mi-category-tabs{
  display:flex!important;
  gap:10px!important;
  overflow-x:auto!important;
  padding:6px 2px 13px!important;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
}

.mi-category-tabs::-webkit-scrollbar{
  display:none;
}

.mi-category-tabs button{
  min-width:190px!important;
  min-height:68px!important;
  flex:0 0 auto!important;
  display:flex!important;
  align-items:center!important;
  gap:11px!important;
  padding:10px 16px!important;
  border:1px solid var(--line)!important;
  border-radius:999px!important;
  background:var(--surface)!important;
  color:var(--text)!important;
  box-shadow:0 6px 18px rgba(18,18,25,.045)!important;
  scroll-snap-align:start;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease!important;
}

.mi-category-tabs button:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--accent) 42%,var(--line))!important;
  box-shadow:var(--mi-soft-shadow)!important;
}

.mi-category-tabs button.active{
  background:#111114!important;
  border-color:#111114!important;
  color:#fff!important;
  box-shadow:0 12px 28px rgba(10,10,14,.18)!important;
}

.mi-category-tabs .mi-quick-icon{
  width:42px!important;
  height:42px!important;
  flex:0 0 42px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:14px!important;
  overflow:hidden!important;
  background:color-mix(in srgb,var(--accent) 8%,var(--surface2))!important;
}

.mi-category-tabs .mi-quick-icon img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  border-radius:12px!important;
  filter:none!important;
}

.quick-tab-copy{
  gap:3px!important;
}

.quick-tab-copy strong{
  font-size:15px!important;
  line-height:1.35!important;
}

.quick-tab-copy small{
  font-size:10px!important;
  line-height:1.4!important;
}

/* Featured hero */
.exact-feature-carousel{
  min-height:430px!important;
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:24px!important;
  box-shadow:0 18px 52px rgba(10,10,14,.18)!important;
}

.exact-feature-inner{
  min-height:430px!important;
}

.exact-feature-copy>p{
  font-size:13px!important;
  line-height:1.95!important;
}

.exact-feature-meta{
  font-size:10px!important;
}

.exact-solid-button,
.exact-outline-button{
  min-height:43px!important;
  padding:10px 17px!important;
  border-radius:11px!important;
  font-size:11px!important;
}

/* Unified poster/work cards */
.poster-grid,
.quick-category-works{
  gap:24px 15px!important;
}

.platform-poster-card,
.poster-card{
  min-width:0;
  cursor:pointer;
  border-radius:var(--mi-card-radius);
  transition:transform .22s ease,filter .22s ease;
}

.platform-poster-card:hover,
.poster-card:hover{
  transform:translateY(-4px)!important;
}

.poster-cover,
.platform-poster-card .poster-cover{
  aspect-ratio:3/4.35!important;
  border:1px solid var(--line)!important;
  border-radius:var(--mi-card-radius)!important;
  background:linear-gradient(145deg,var(--surface2),color-mix(in srgb,var(--accent) 6%,var(--surface2)))!important;
  box-shadow:0 8px 22px rgba(20,20,28,.055);
}

.poster-card:hover .poster-cover,
.platform-poster-card:hover .poster-cover{
  box-shadow:var(--mi-hover-shadow)!important;
}

.poster-cover img,
.platform-poster-card .poster-cover img{
  display:block;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}

.poster-copy,
.platform-poster-card .poster-copy{
  padding:11px 3px 0!important;
}

.poster-copy h3,
.platform-poster-card .poster-copy h3{
  margin:4px 0 5px!important;
  color:var(--text)!important;
  font-size:14px!important;
  line-height:1.55!important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.poster-copy p,
.platform-poster-card .poster-copy>p{
  color:var(--muted)!important;
  font-size:10px!important;
  line-height:1.55!important;
}

.poster-meta{
  margin-top:8px!important;
}

.poster-meta span{
  font-size:11px!important;
}

.poster-meta small{
  font-size:9px!important;
}

.poster-status-badge,
.platform-poster-card .poster-status-badge{
  top:8px!important;
  right:8px!important;
  padding:6px 8px!important;
  border-radius:9px!important;
  font-size:8px!important;
}

.poster-follow,
.platform-poster-card .poster-follow{
  top:8px!important;
  left:8px!important;
  width:34px!important;
  height:34px!important;
}

/* Unified recommendation shelves */
.recommendation-shelf-card,
.platform-collection-card,
.collection-card,
.collection-editorial-card{
  border:1px solid var(--line)!important;
  border-radius:20px!important;
  background:var(--surface)!important;
  box-shadow:var(--mi-soft-shadow);
  overflow:hidden;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease!important;
}

.recommendation-shelf-card:hover,
.platform-collection-card:hover,
.collection-card:hover,
.collection-editorial-card:hover{
  transform:translateY(-3px)!important;
  border-color:color-mix(in srgb,var(--accent) 38%,var(--line))!important;
  box-shadow:var(--mi-hover-shadow)!important;
}

.recommendation-shelf-top h3{
  font-size:18px!important;
  line-height:1.55!important;
}

.recommendation-shelf-top p{
  font-size:11px!important;
  line-height:1.85!important;
}

.recommendation-shelf-kicker,
.recommendation-shelf-meta span,
.recommendation-shelf-actions button{
  font-size:10px!important;
}

/* Work detail tabs */
.tappy-icon-tabs{
  width:min(calc(100% - 20px),900px)!important;
  min-height:74px!important;
  top:72px!important;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:7px!important;
  margin:10px auto 18px!important;
  padding:7px!important;
  border:1px solid var(--line)!important;
  border-radius:20px!important;
  background:color-mix(in srgb,var(--surface) 94%,transparent)!important;
  box-shadow:0 9px 26px rgba(20,20,28,.08)!important;
}

.tappy-icon-tabs button{
  max-width:none!important;
  min-height:58px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  padding:8px 11px!important;
  border:0!important;
  border-radius:14px!important;
  background:transparent!important;
  color:var(--muted)!important;
  font-size:13px!important;
  border-bottom:0!important;
  transition:background .2s ease,color .2s ease,transform .2s ease!important;
}

.tappy-icon-tabs button:hover{
  background:var(--surface2)!important;
}

.tappy-icon-tabs button.active{
  background:#111114!important;
  color:#fff!important;
  box-shadow:0 8px 20px rgba(10,10,14,.16)!important;
}

.tappy-icon-tabs .tab-icon{
  width:25px!important;
  height:25px!important;
  display:grid!important;
  place-items:center!important;
  transform:none!important;
}

.tappy-icon-tabs .tab-icon svg{
  width:24px!important;
  height:24px!important;
}

.tappy-icon-tabs .detail-tab-label{
  display:block!important;
  font-size:11px!important;
  line-height:1.3!important;
}

/* Work detail cards */
.tappy-detail-content{
  width:min(calc(100% - 20px),1100px)!important;
  padding:0!important;
}

.tappy-detail-pane.active{
  gap:16px!important;
}

.overview-panel,
.information-panel,
.work-vote-card,
.comments-feed-panel,
.comments-compose-panel,
.announcement-side-panel,
.work-announcement-card,
.tappy-content-card{
  border:1px solid var(--line)!important;
  border-radius:20px!important;
  background:var(--surface)!important;
  box-shadow:var(--mi-soft-shadow)!important;
}

.overview-panel,
.information-panel,
.comments-feed-panel,
.comments-compose-panel{
  padding:22px!important;
}

.modern-series-synopsis{
  font-size:16px!important;
  line-height:2!important;
}

/* Safe opening state */
[data-open-work].is-opening,
[data-open-collection].is-opening{
  pointer-events:none;
  opacity:.72;
}

[data-open-work].is-opening::after,
[data-open-collection].is-opening::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
  animation:miOpeningSweep .8s linear infinite;
}

@keyframes miOpeningSweep{
  from{transform:translateX(-100%)}
  to{transform:translateX(100%)}
}

/* Bottom navigation */
.bottom-dock,
.mobile-dock,
.dock-navigation,
[class*="bottom-dock"]{
  backdrop-filter:blur(20px);
}

@media(min-width:1200px){
  .poster-grid,
  .quick-category-works{
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
  }

  .recommendation-shelf-card{
    grid-template-columns:230px minmax(0,1fr)!important;
  }

  .site-header .instagram-brand-image{
    height:42px!important;
    max-width:320px!important;
  }
}

@media(max-width:900px){
  .poster-grid,
  .quick-category-works{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }

  .recommendation-shelf-card{
    grid-template-columns:170px minmax(0,1fr)!important;
  }
}

@media(max-width:740px){
  .site-header{
    min-height:64px!important;
    padding-inline:16px!important;
  }

  .site-header .instagram-brand-image{
    height:29px!important;
    max-width:48vw!important;
  }

  .exact-page-top{
    padding-top:23px!important;
  }

  .exact-page-top h1{
    font-size:38px!important;
  }

  .mi-category-tabs{
    margin-inline:-2px!important;
  }

  .mi-category-tabs button{
    min-width:154px!important;
    min-height:58px!important;
    padding:8px 12px!important;
    gap:8px!important;
  }

  .mi-category-tabs .mi-quick-icon{
    width:36px!important;
    height:36px!important;
    flex-basis:36px!important;
  }

  .quick-tab-copy strong{
    font-size:13px!important;
  }

  .quick-tab-copy small{
    font-size:8.5px!important;
  }

  .exact-feature-carousel,
  .exact-feature-inner{
    min-height:390px!important;
  }

  .exact-feature-inner{
    display:flex!important;
    align-items:flex-end!important;
    padding:25px 20px!important;
  }

  .exact-feature-copy h2{
    font-size:36px!important;
  }

  .exact-feature-copy>p{
    font-size:12px!important;
  }

  .poster-grid,
  .quick-category-works{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:20px 10px!important;
  }

  .poster-copy h3,
  .platform-poster-card .poster-copy h3{
    font-size:13px!important;
  }

  .poster-copy p,
  .platform-poster-card .poster-copy>p{
    font-size:9px!important;
  }

  .recommendation-shelf-card{
    grid-template-columns:1fr!important;
  }

  .recommendation-shelf-cover{
    min-height:180px!important;
    max-height:220px;
  }

  .recommendation-shelf-body{
    padding:16px!important;
  }

  .recommendation-shelf-top h3{
    font-size:16px!important;
  }

  .tappy-icon-tabs{
    top:64px!important;
    min-height:66px!important;
    gap:4px!important;
    padding:5px!important;
    border-radius:17px!important;
  }

  .tappy-icon-tabs button{
    min-height:54px!important;
    display:grid!important;
    grid-template-rows:25px auto!important;
    gap:3px!important;
    padding:6px 3px!important;
    border-radius:12px!important;
  }

  .tappy-icon-tabs .detail-tab-label{
    font-size:9px!important;
  }

  .overview-panel,
  .information-panel,
  .comments-feed-panel,
  .comments-compose-panel{
    padding:17px!important;
    border-radius:17px!important;
  }

  main{
    padding-bottom:132px!important;
  }
}

@media(max-width:380px){
  .poster-grid,
  .quick-category-works{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .site-header .instagram-brand-image{
    height:27px!important;
    max-width:45vw!important;
  }

  .mi-category-tabs button{
    min-width:145px!important;
  }
}

/* ===== mi-large-dock-monochrome-cover-glow ===== */
:root{
  --accent:#111111;
  --accent2:#111111;
  --accent-contrast:#ffffff;
  --cover-glow-rgb:120,120,120;
}

body:not(.light){
  --bg:#050505;
  --surface:#0d0d0f;
  --surface2:#151517;
  --surface3:#1d1d20;
  --text:#f7f7f7;
  --muted:#9b9ba2;
  --line:rgba(255,255,255,.11);
  --accent:#f7f7f7;
  --accent2:#f7f7f7;
  --accent-contrast:#070707;
  --shadow:0 28px 72px rgba(0,0,0,.55);
}

body.light{
  --accent:#111111;
  --accent2:#111111;
  --accent-contrast:#ffffff;
}

.primary-button,
.catalog-tabs button.active,
.following-tabs button.active,
.admin-tabs button.active,
.library-state-tabs button.active,
.auth-tabs button.active,
.dock-badge{
  background:var(--accent)!important;
  color:var(--accent-contrast)!important;
  border-color:var(--accent)!important;
  box-shadow:none!important;
}

.theme-choice input:checked+.theme-preview{
  border-color:var(--accent)!important;
  box-shadow:0 0 0 4px color-mix(
    in srgb,
    var(--accent) 10%,
    transparent
  )!important;
}

.monochrome-theme-note{
  margin:12px 0 0;
  color:var(--muted);
  font-size:10px!important;
  line-height:1.8!important;
}

/* Bottom dock size inspired by the supplied reference */
body{
  padding-bottom:142px!important;
}

.member-dock{
  width:min(780px,calc(100vw - 18px))!important;
  height:104px!important;
  bottom:max(9px,env(safe-area-inset-bottom))!important;
  padding:9px 12px!important;
  border-radius:36px!important;
  border:1px solid rgba(255,255,255,.12)!important;
  background:rgba(10,10,11,.97)!important;
  box-shadow:
    0 22px 54px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.055)!important;
}

body.light .member-dock{
  border-color:#dedee2!important;
  background:rgba(255,255,255,.98)!important;
  box-shadow:
    0 20px 48px rgba(20,20,24,.15),
    inset 0 1px 0 #fff!important;
}

.member-dock>.dock-item,
.member-dock>.dock-profile{
  height:84px!important;
  min-width:0!important;
  margin:0!important;
  align-self:center!important;
  border-radius:25px!important;
}

.dock-item{
  gap:7px!important;
  color:#8f8f96!important;
}

.dock-icon-shell{
  width:47px!important;
  height:47px!important;
  border-radius:17px!important;
}

.dock-icon-shell svg{
  width:33px!important;
  height:33px!important;
  stroke-width:2!important;
}

.dock-item>span:last-child{
  font-size:11px!important;
  font-weight:700!important;
  line-height:1.2!important;
}

.dock-item:hover,
.dock-item.active{
  color:var(--text)!important;
  background:var(--surface2)!important;
}

.dock-item.active .dock-icon-shell{
  color:var(--accent-contrast)!important;
  background:var(--accent)!important;
  box-shadow:none!important;
  transform:translateY(-2px) scale(1.03)!important;
}

.dock-item::after{
  display:none!important;
}

.dock-profile{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
}

.dock-profile-ring{
  width:50px!important;
  height:50px!important;
  margin:0 auto!important;
  border:3px solid var(--surface3)!important;
  background:var(--surface)!important;
  box-shadow:
    0 0 0 1px var(--line),
    0 8px 18px rgba(0,0,0,.18)!important;
}

.dock-profile-avatar{
  width:42px!important;
  height:42px!important;
  background:var(--accent)!important;
  color:var(--accent-contrast)!important;
  font-size:15px!important;
}

.dock-profile small{
  margin:0!important;
  color:var(--muted)!important;
  font-size:10px!important;
  font-weight:700!important;
}

.dock-badge{
  top:8px!important;
  right:calc(50% - 25px)!important;
  min-width:21px!important;
  height:21px!important;
  font-size:9px!important;
}

/* Logo follows the selected black/white theme */
.instagram-brand-shell::after{
  display:none!important;
}

.instagram-brand-link::before{
  background:radial-gradient(
    circle,
    color-mix(in srgb,var(--text) 10%,transparent),
    transparent 68%
  )!important;
  opacity:.52!important;
}

.instagram-brand-link::after{
  background:linear-gradient(
    105deg,
    transparent 12%,
    color-mix(in srgb,var(--text) 18%,transparent) 31%,
    transparent 48%
  )!important;
}

body.light .instagram-brand-image{
  filter:brightness(0)!important;
}

body:not(.light) .instagram-brand-image{
  filter:brightness(0) invert(1)!important;
}

.tappy-detail-brand{
  border-color:var(--line)!important;
  background:var(--surface2)!important;
}

.detail-brand-handle,
.welcome-brand-follow{
  color:var(--muted)!important;
}

.detail-brand-handle i,
.welcome-brand-follow i{
  background:var(--text)!important;
  box-shadow:none!important;
}

/* Theme-consistent work detail page */
#workDetailView.tappy-detail-view.active{
  background:
    radial-gradient(
      circle at 50% 13%,
      rgba(var(--cover-glow-rgb),.17),
      transparent 34%
    ),
    var(--bg)!important;
  color:var(--text)!important;
}

body:not(.light) .tappy-detail-header{
  border-color:var(--line)!important;
  background:rgba(5,5,5,.92)!important;
}

body:not(.light) .tappy-hero-shell{
  background:
    radial-gradient(
      circle at 50% 33%,
      rgba(var(--cover-glow-rgb),.31),
      transparent 44%
    ),
    #050505!important;
}

body.light .tappy-hero-shell{
  background:
    radial-gradient(
      circle at 50% 33%,
      rgba(var(--cover-glow-rgb),.22),
      transparent 46%
    ),
    #eeeeef!important;
}

.tappy-hero-shell::before{
  content:"";
  position:absolute;
  inset:-18%;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(
      circle at 50% 38%,
      rgba(var(--cover-glow-rgb),.44),
      transparent 36%
    ),
    radial-gradient(
      circle at 24% 62%,
      rgba(var(--cover-glow-rgb),.18),
      transparent 34%
    );
  filter:blur(30px);
  opacity:.72;
  animation:coverGlowBreathe 5.8s ease-in-out infinite;
}

@keyframes coverGlowBreathe{
  0%,100%{
    opacity:.55;
    transform:scale(.97);
  }
  50%{
    opacity:.82;
    transform:scale(1.035);
  }
}

.tappy-hero-shell .series-hero-blur{
  z-index:0!important;
  opacity:.11!important;
}

.tappy-hero-shell .series-hero-overlay{
  z-index:0!important;
}

body:not(.light) .tappy-hero-shell .series-hero-overlay{
  background:
    linear-gradient(
      180deg,
      rgba(5,5,5,.28),
      rgba(5,5,5,.86)
    )!important;
}

body.light .tappy-hero-shell .series-hero-overlay{
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.2),
      rgba(244,244,245,.78)
    )!important;
}

.tappy-cover-frame,
.tappy-share-button{
  z-index:2!important;
}

body:not(.light) .tappy-share-button{
  border:1px solid var(--line)!important;
  background:rgba(15,15,17,.86)!important;
  color:#fff!important;
}

body:not(.light) .tappy-summary-panel{
  background:#050505!important;
}

body:not(.light) .tappy-summary-panel h1{
  color:#f7f7f7!important;
}

body:not(.light) .tappy-meta-line,
body:not(.light) .tappy-creator-line,
body:not(.light) .tappy-alt-line{
  color:#a8a8ae!important;
}

body:not(.light) #workDetailView .tappy-icon-tabs{
  background:#0d0d0f!important;
  border-color:#222226!important;
}

body:not(.light) #workDetailView .tappy-icon-tabs button{
  color:#85858c!important;
}

body:not(.light) #workDetailView .tappy-icon-tabs button.active{
  color:#070707!important;
  background:#f7f7f7!important;
}

body:not(.light) .tappy-content-card,
body:not(.light) .overview-panel,
body:not(.light) .overview-vote-panel,
body:not(.light) .information-panel,
body:not(.light) .comments-feed-panel,
body:not(.light) .comments-compose-panel,
body:not(.light) .announcement-side-panel,
body:not(.light) .modern-announcement-empty{
  border-color:#242428!important;
  background:#0d0d0f!important;
  color:#f7f7f7!important;
  box-shadow:0 14px 36px rgba(0,0,0,.26)!important;
}

body:not(.light) .tappy-content-card h2,
body:not(.light) .tappy-content-card h3,
body:not(.light) .tappy-content-card strong,
body:not(.light) .overview-panel h2,
body:not(.light) .overview-panel h3,
body:not(.light) .information-panel h2,
body:not(.light) .information-panel h3{
  color:#f7f7f7!important;
}

body:not(.light) .tappy-bottom-cta{
  border-color:#242428!important;
  background:rgba(5,5,5,.94)!important;
}

@media(max-width:740px){
  body{
    padding-bottom:132px!important;
  }

  .member-dock{
    width:calc(100vw - 14px)!important;
    height:98px!important;
    padding:7px 8px!important;
    border-radius:32px!important;
  }

  .member-dock>.dock-item,
  .member-dock>.dock-profile{
    height:80px!important;
    border-radius:22px!important;
  }

  .dock-icon-shell{
    width:43px!important;
    height:43px!important;
  }

  .dock-icon-shell svg{
    width:30px!important;
    height:30px!important;
  }

  .dock-item>span:last-child{
    font-size:10px!important;
  }

  .dock-profile-ring{
    width:47px!important;
    height:47px!important;
  }

  .dock-profile-avatar{
    width:39px!important;
    height:39px!important;
  }

  .dock-profile small{
    font-size:9px!important;
  }

  #workDetailView.tappy-detail-view.active{
    padding-bottom:124px!important;
  }
}

@media(max-width:390px){
  .member-dock{
    height:94px!important;
  }

  .member-dock>.dock-item,
  .member-dock>.dock-profile{
    height:76px!important;
  }

  .dock-icon-shell{
    width:39px!important;
    height:39px!important;
  }

  .dock-icon-shell svg{
    width:27px!important;
    height:27px!important;
  }

  .dock-item>span:last-child{
    font-size:8.5px!important;
  }

  .dock-profile small{
    font-size:8px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .tappy-hero-shell::before{
    animation:none!important;
  }
}

/* ===== mi-dock-size-conflict-fix ===== */
.member-dock{
  height:104px!important;
  min-height:104px!important;
  max-height:104px!important;
}

.member-dock>.dock-item,
.member-dock>.dock-profile{
  flex:1 1 0!important;
  flex-basis:0!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  margin-top:0!important;
}

.dock-profile{
  margin-top:0!important;
  align-self:center!important;
}

@media(max-width:740px){
  .member-dock{
    height:98px!important;
    min-height:98px!important;
    max-height:98px!important;
  }

  .member-dock>.dock-item,
  .member-dock>.dock-profile{
    height:80px!important;
    min-height:80px!important;
    max-height:80px!important;
    flex-basis:0!important;
    width:auto!important;
    max-width:none!important;
    margin-top:0!important;
  }
}

@media(max-width:390px){
  .member-dock{
    height:94px!important;
    min-height:94px!important;
    max-height:94px!important;
  }

  .member-dock>.dock-item,
  .member-dock>.dock-profile{
    height:76px!important;
    min-height:76px!important;
    max-height:76px!important;
  }
}

/* ===== mi-work-theme-follow-share-fix ===== */
/* ==========================================================
   Work page: strict light/dark color system
   ========================================================== */
#workDetailView{
  --work-bg:#f3f3f4;
  --work-surface:#ffffff;
  --work-surface-soft:#f7f7f8;
  --work-text:#111114;
  --work-muted:#707078;
  --work-line:#dedee3;
  --work-button:#111114;
  --work-button-text:#ffffff;
}

body:not(.light) #workDetailView{
  --work-bg:#050506;
  --work-surface:#0d0d0f;
  --work-surface-soft:#17171b;
  --work-text:#f7f7f8;
  --work-muted:#a4a4ac;
  --work-line:#29292e;
  --work-button:#f7f7f8;
  --work-button-text:#080809;
}

#workDetailView.tappy-detail-view.active{
  color:var(--work-text)!important;
}

/* Every major work-view surface */
#workDetailView .tappy-summary-panel,
#workDetailView .tappy-detail-content,
#workDetailView .tappy-detail-pane,
#workDetailView .overview-panel,
#workDetailView .overview-vote-panel,
#workDetailView .information-panel,
#workDetailView .comments-feed-panel,
#workDetailView .comments-compose-panel,
#workDetailView .announcement-side-panel,
#workDetailView .modern-announcement-empty,
#workDetailView .work-vote-card,
#workDetailView .review-card,
#workDetailView .editor-note,
#workDetailView .work-vote-current,
#workDetailView .vote-result,
#workDetailView .community-guidelines,
#workDetailView .comment-card{
  color:var(--work-text)!important;
}

/* Headings and important values */
#workDetailView :is(
 h1,h2,h3,h4,h5,h6,
 .review-card-title,
 .work-vote-current strong,
 .recommendation-vote-box strong,
 .vote-result strong,
 .production-grid strong,
 .information-stat-card strong,
 .comment-card h4
){
  color:var(--work-text)!important;
}

/* Secondary copy */
#workDetailView :is(
 p,small,time,label,li,
 .muted-label,
 .work-vote-heading p,
 .work-vote-current small,
 .recommendation-vote-box small,
 .production-role,
 .information-stat-card small,
 .comment-card p,
 .comment-card time
){
  color:var(--work-muted)!important;
}

/* Reader Recommendation area */
body:not(.light) #workDetailView .overview-vote-panel,
body:not(.light) #workDetailView .work-vote-card{
  border-color:var(--work-line)!important;
  background:#0b0b0d!important;
}

body:not(.light) #workDetailView .work-vote-current{
  border-color:var(--work-line)!important;
  background:#151519!important;
}

body:not(.light) #workDetailView .recommendation-vote-box{
  border-color:#303036!important;
  background:#17171b!important;
  color:#f7f7f8!important;
}

body:not(.light) #workDetailView .recommendation-vote-box:hover{
  border-color:#56565e!important;
  background:#1d1d22!important;
}

body:not(.light) #workDetailView .recommendation-vote-box.recommend-box.active,
body:not(.light) #workDetailView .recommendation-vote-box.recommend-box.preview-active{
  border-color:#39c982!important;
  background:#159458!important;
}

body:not(.light) #workDetailView .recommendation-vote-box.acceptable-box.active,
body:not(.light) #workDetailView .recommendation-vote-box.acceptable-box.preview-active{
  border-color:#efd05d!important;
  background:#a27c00!important;
}

body:not(.light) #workDetailView .recommendation-vote-box.reject-box.active,
body:not(.light) #workDetailView .recommendation-vote-box.reject-box.preview-active{
  border-color:#ff7783!important;
  background:#b42e3b!important;
}

body:not(.light) #workDetailView .recommendation-vote-box.active *,
body:not(.light) #workDetailView .recommendation-vote-box.preview-active *{
  color:#fff!important;
}

body:not(.light) #workDetailView .vote-result{
  border-color:var(--work-line)!important;
  background:#151519!important;
}

/* Tabs: active content must always be visible */
body:not(.light) #workDetailView .tappy-icon-tabs button.active{
  color:#080809!important;
  background:#f7f7f8!important;
}

body:not(.light) #workDetailView .tappy-icon-tabs button.active *{
  color:#080809!important;
  stroke:#080809!important;
}

body:not(.light) #workDetailView .tappy-icon-tabs button:not(.active),
body:not(.light) #workDetailView .tappy-icon-tabs button:not(.active) *{
  color:#9999a2!important;
  stroke:#9999a2!important;
}

/* Forms and modal text in dark mode */
body:not(.light) .recommendation-modal-card{
  border:1px solid #2b2b30!important;
  background:#101012!important;
  color:#f7f7f8!important;
}

body:not(.light) .recommendation-modal-card :is(h2,strong,label){
  color:#f7f7f8!important;
}

body:not(.light) .recommendation-modal-card :is(p,small){
  color:#a4a4ac!important;
}

body:not(.light) .recommendation-modal-field textarea{
  border-color:#303036!important;
  background:#19191d!important;
  color:#f7f7f8!important;
}

body:not(.light) .recommendation-modal-close,
body:not(.light) .recommendation-skip-button{
  border-color:#303036!important;
  background:#202024!important;
  color:#f7f7f8!important;
}

/* ==========================================================
   Bottom Follow + Share bar
   ========================================================== */
.tappy-bottom-cta{
  direction:rtl!important;
  z-index:92!important;
  border-top:1px solid var(--work-line)!important;
  background:
    linear-gradient(
      180deg,
      transparent,
      color-mix(in srgb,var(--work-bg) 92%,transparent) 24%,
      var(--work-bg) 58%
    )!important;
}

.tappy-follow-cta{
  position:relative;
  overflow:hidden;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:11px!important;
  border:1px solid transparent!important;
  background:var(--work-button)!important;
  color:var(--work-button-text)!important;
  box-shadow:
    0 14px 34px rgba(0,0,0,.16)!important;
  transition:
    transform .22s ease,
    background .22s ease,
    color .22s ease,
    box-shadow .22s ease,
    opacity .22s ease!important;
}

.tappy-follow-cta:hover{
  transform:translateY(-2px);
  box-shadow:
    0 19px 38px rgba(0,0,0,.22)!important;
}

.tappy-follow-cta:active{
  transform:scale(.985);
}

.tappy-follow-cta.following{
  border-color:rgba(39,190,111,.38)!important;
  background:#24b96d!important;
  color:#06150c!important;
}

body:not(.light) .tappy-follow-cta.following{
  background:#43d58d!important;
  color:#06150c!important;
}

.tappy-follow-cta:disabled{
  cursor:wait!important;
  opacity:.78!important;
  transform:none!important;
}

.follow-cta-label{
  position:relative;
  z-index:2;
  color:inherit!important;
}

.follow-cta-spinner{
  width:20px;
  height:20px;
  display:none;
  flex:0 0 auto;
  border:2.5px solid currentColor;
  border-left-color:transparent;
  border-radius:50%;
  animation:followSpinner .72s linear infinite;
}

.tappy-follow-cta.is-loading .follow-cta-spinner{
  display:block;
}

.tappy-follow-cta.follow-success{
  animation:followSuccessPulse .62s ease;
}

.tappy-follow-cta.unfollow-success{
  animation:unfollowSuccessPulse .62s ease;
}

@keyframes followSpinner{
  to{transform:rotate(360deg)}
}

@keyframes followSuccessPulse{
  0%{transform:scale(1)}
  38%{transform:scale(1.035)}
  72%{transform:scale(.992)}
  100%{transform:scale(1)}
}

@keyframes unfollowSuccessPulse{
  0%{transform:scale(1)}
  42%{transform:scale(.97)}
  100%{transform:scale(1)}
}

/* Circular share button beside Follow */
.tappy-share-cta{
  width:74px!important;
  height:74px!important;
  flex:0 0 74px!important;
  display:grid!important;
  place-items:center!important;
  padding:19px!important;
  border:1px solid var(--work-line)!important;
  border-radius:50%!important;
  background:var(--work-button)!important;
  color:var(--work-button-text)!important;
  box-shadow:
    0 14px 34px rgba(0,0,0,.16)!important;
  transition:
    transform .24s ease,
    box-shadow .24s ease,
    background .24s ease!important;
}

.tappy-share-cta:hover{
  transform:translateY(-3px) rotate(-5deg);
  box-shadow:
    0 19px 38px rgba(0,0,0,.22)!important;
}

.tappy-share-cta:active{
  transform:scale(.94);
}

.tappy-share-cta svg{
  width:32px!important;
  height:32px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:2!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

/* Ensure old plus styles cannot affect the new share button */
.tappy-plus-cta{
  display:none!important;
}

@media(max-width:740px){
  .tappy-bottom-cta{
    gap:10px!important;
    padding:
      12px
      18px
      calc(14px + env(safe-area-inset-bottom))!important;
  }

  .tappy-follow-cta{
    height:70px!important;
    font-size:17px!important;
  }

  .tappy-share-cta{
    width:70px!important;
    height:70px!important;
    flex-basis:70px!important;
    padding:18px!important;
  }

  .tappy-share-cta svg{
    width:30px!important;
    height:30px!important;
  }
}

@media(max-width:390px){
  .tappy-bottom-cta{
    padding-inline:13px!important;
  }

  .tappy-follow-cta{
    height:66px!important;
  }

  .tappy-share-cta{
    width:66px!important;
    height:66px!important;
    flex-basis:66px!important;
    padding:17px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .tappy-follow-cta,
  .tappy-share-cta,
  .follow-cta-spinner{
    animation:none!important;
    transition:none!important;
  }
}

/* ===== mi-cover-meta-polish ===== */
#workDetailView .tappy-hero-shell{
  padding-bottom:26px!important;
}

#workDetailView .cover-facts-strip{
  position:relative;
  z-index:2;
  width:min(100%,980px);
  margin:22px auto 0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}

#workDetailView .cover-fact-card{
  position:relative;
  overflow:hidden;
  padding:14px 16px 15px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.12));
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 14px 34px rgba(0,0,0,.10);
  text-align:center;
}

#workDetailView .cover-fact-card::after{
  content:"";
  position:absolute;
  inset:auto 12px 0;
  height:3px;
  border-radius:999px 999px 0 0;
  background:linear-gradient(90deg,var(--accent,#8b5cf6),var(--accent2,#22c5b9));
  opacity:.88;
}

#workDetailView .cover-fact-card small{
  display:block;
  margin-bottom:7px;
  color:rgba(255,255,255,.74);
  font-size:12px;
  font-weight:800;
  letter-spacing:.01em;
}

#workDetailView .cover-fact-card strong{
  display:block;
  color:#fff;
  font-size:20px;
  line-height:1.25;
  font-weight:900;
  letter-spacing:-.02em;
}

#workDetailView .cover-summary-panel{
  padding-top:18px!important;
}

#workDetailView .cover-genres-line{
  margin-top:12px!important;
  color:#7a7a84!important;
  font-weight:800!important;
  font-size:18px!important;
  line-height:1.7!important;
}

body:not(.light) #workDetailView .cover-genres-line{
  color:#b7b7c1!important;
}

body.light #workDetailView .cover-fact-card{
  border-color:rgba(255,255,255,.88);
  background:linear-gradient(180deg,rgba(20,24,39,.88),rgba(25,30,50,.80));
  box-shadow:0 16px 34px rgba(0,0,0,.10);
}

body.light #workDetailView .cover-fact-card small{
  color:rgba(255,255,255,.70);
}

body.light #workDetailView .cover-fact-card strong{
  color:#ffffff;
}

body:not(.light) #workDetailView .cover-fact-card{
  border-color:rgba(255,255,255,.10);
  background:linear-gradient(180deg,rgba(13,13,19,.86),rgba(24,24,31,.80));
  box-shadow:0 16px 40px rgba(0,0,0,.28);
}

body:not(.light) #workDetailView .cover-fact-card small{
  color:#a7a7b3;
}

body:not(.light) #workDetailView .cover-fact-card strong{
  color:#f6f6fb;
}

@media (min-width: 1200px){
  #workDetailView .cover-facts-strip{
    max-width:1040px;
    gap:14px;
  }

  #workDetailView .cover-fact-card{
    padding:16px 18px 17px;
    border-radius:20px;
  }

  #workDetailView .cover-fact-card small{
    font-size:12.5px;
  }

  #workDetailView .cover-fact-card strong{
    font-size:21px;
  }
}

@media (max-width: 900px){
  #workDetailView .cover-facts-strip{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    width:min(100%,640px);
  }
}

@media (max-width: 740px){
  #workDetailView .tappy-hero-shell{
    padding:28px 16px 18px!important;
  }

  #workDetailView .cover-facts-strip{
    margin-top:18px;
    gap:9px;
  }

  #workDetailView .cover-fact-card{
    min-height:76px;
    padding:11px 10px 13px;
    border-radius:16px;
  }

  #workDetailView .cover-fact-card small{
    margin-bottom:5px;
    font-size:11px;
  }

  #workDetailView .cover-fact-card strong{
    font-size:17px;
  }

  #workDetailView .cover-summary-panel{
    padding-top:12px!important;
  }

  #workDetailView .cover-genres-line{
    font-size:15px!important;
    margin-top:9px!important;
  }
}

@media (max-width: 420px){
  #workDetailView .cover-facts-strip{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  #workDetailView .cover-fact-card{
    min-height:72px;
    padding:10px 10px 12px;
  }

  #workDetailView .cover-fact-card strong{
    font-size:16px;
  }
}

/* ===== mi-no-duplicate-webtoon-style ===== */
.information-stat-grid.modern-compact-stats{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}

.information-stat-grid.modern-compact-stats .information-stat-card{
  position:relative;
  overflow:hidden;
  min-height:118px;
  border-color:#ececf2;
  background:linear-gradient(180deg,#ffffff 0%, #fbfbff 100%);
}

.information-stat-grid.modern-compact-stats .information-stat-card::after{
  content:"";
  position:absolute;
  inset:auto 14px 0;
  height:3px;
  border-radius:999px 999px 0 0;
  background:linear-gradient(90deg,var(--accent,#8b5cf6),var(--accent2,#22c5b9));
  opacity:.9;
}

.information-stat-grid.modern-compact-stats .information-stat-card strong{
  font-size:16px!important;
  font-weight:900!important;
}

#seriesOverview .overview-dashboard-head{
  margin-bottom:16px;
}

#seriesInformation .information-dashboard-head{
  margin-bottom:18px;
}

@media (max-width: 920px){
  .information-stat-grid.modern-compact-stats{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}

@media (max-width: 720px){
  .information-stat-grid.modern-compact-stats{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media (max-width: 460px){
  .information-stat-grid.modern-compact-stats .information-stat-card{
    min-height:96px;
    padding:14px;
  }

  .information-stat-grid.modern-compact-stats .information-stat-card strong{
    font-size:14px!important;
  }
}

/* ===== mi-editorial-meta-line ===== */
#workDetailView .tappy-hero-shell{
  padding-bottom:14px!important;
}

#workDetailView .cover-summary-panel{
  max-width:min(100%,940px)!important;
  margin:0 auto!important;
  padding:14px 18px 10px!important;
  text-align:center!important;
}

#workDetailView #modalTitle{
  margin-bottom:10px!important;
  letter-spacing:-.03em!important;
}

#workDetailView #modalMetaLine{
  display:block!important;
  margin:0 auto 10px!important;
  color:#4b5563!important;
  font-size:20px!important;
  line-height:1.9!important;
  font-weight:800!important;
  letter-spacing:-.01em!important;
}

#workDetailView #modalCreatorLine{
  margin-top:0!important;
  font-size:17px!important;
  color:#6b7280!important;
}

#workDetailView #modalAltTitles{
  margin-top:10px!important;
  color:#8b8b97!important;
  font-size:14px!important;
  line-height:1.8!important;
}

#workDetailView .tappy-icon-tabs{
  width:min(100%,980px)!important;
  margin:14px auto 0!important;
  padding:10px!important;
  border-radius:28px!important;
}

#workDetailView .tappy-icon-tabs button{
  transition:transform .22s ease, box-shadow .22s ease, background .22s ease, color .22s ease!important;
}

#workDetailView .tappy-icon-tabs button:hover{
  transform:translateY(-2px);
}

#seriesOverview .overview-dashboard-head,
#seriesInformation .information-dashboard-head,
#seriesAnnouncements .announcement-dashboard-head,
#seriesDiscussion .comments-dashboard-head{
  box-shadow:none!important;
  border-color:rgba(139,92,246,.12)!important;
}

#seriesOverview .overview-panel,
#seriesOverview .overview-vote-panel,
#seriesInformation .information-production-panel,
#seriesAnnouncements .announcement-card,
#seriesDiscussion .comment-shell,
#seriesDiscussion .comment-form-shell{
  box-shadow:none!important;
}

body:not(.light) #workDetailView #modalMetaLine{
  color:#d6d6de!important;
}

body:not(.light) #workDetailView #modalCreatorLine{
  color:#b2b2bd!important;
}

body:not(.light) #workDetailView #modalAltTitles{
  color:#9393a0!important;
}

@media (max-width: 740px){
  #workDetailView .cover-summary-panel{
    padding:10px 14px 6px!important;
  }

  #workDetailView #modalMetaLine{
    font-size:15.5px!important;
    line-height:1.9!important;
  }

  #workDetailView #modalCreatorLine{
    font-size:15px!important;
  }

  #workDetailView .tappy-icon-tabs{
    margin-top:12px!important;
    padding:8px!important;
    border-radius:24px!important;
  }
}

/* ===== mi-fonts-and-meta-refresh ===== */
/* لتغيير الخطوط لاحقًا: بدّل فقط القيمتين التاليتين */
:root{
  --mi-font-body:"Aam Harf Handwriting","عام حرف اليدوية","Cairo","Almarai",Tahoma,Arial,sans-serif;
  --mi-font-display:"Bulka","Cairo","Almarai",Tahoma,Arial,sans-serif;
  --mi-meta-icon-bg-light:linear-gradient(180deg,rgba(139,92,246,.12),rgba(34,197,185,.08));
  --mi-meta-icon-border-light:rgba(17,24,39,.10);
  --mi-meta-icon-bg-dark:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.05));
  --mi-meta-icon-border-dark:rgba(255,255,255,.12);
}

body,button,input,select,textarea,
.small-copy,.medium-copy,
#workDetailView #modalMetaLine,
#workDetailView #modalCreatorLine,
#workDetailView #modalAltTitles,
#workDetailView #modalDescription,
#workDetailView .overview-story,
#workDetailView .information-stat-card,
#workDetailView .announcement-card,
#workDetailView .comment-shell,
#workDetailView .comment-form-shell{
  font-family:var(--mi-font-body)!important;
}

h1,h2,h3,h4,h5,h6,
.brand,.section-title,.hero-title,
#workDetailView #modalTitle,
#workDetailView .detail-tab-label,
#workDetailView .overview-dashboard-head h3,
#workDetailView .information-dashboard-head h3,
#workDetailView .announcement-dashboard-head h3,
#workDetailView .comments-dashboard-head h3,
#workDetailView .overview-vote-panel h3{
  font-family:var(--mi-font-display)!important;
}

#workDetailView .tappy-cover-frame{
  position:relative;
  overflow:visible!important;
}

#workDetailView .cover-origin-badge{
  position:absolute;
  top:14px;
  inset-inline-start:14px;
  z-index:4;
  width:42px;
  height:42px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(17,24,39,.08);
  box-shadow:0 14px 28px rgba(0,0,0,.16);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

#workDetailView .cover-origin-badge span{
  font-size:22px;
  line-height:1;
  transform:translateY(1px);
}

body:not(.light) #workDetailView .cover-origin-badge{
  background:rgba(14,16,24,.88);
  border-color:rgba(255,255,255,.10);
  box-shadow:0 16px 30px rgba(0,0,0,.34);
}

#workDetailView #modalMetaLine{
  display:flex!important;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:10px 18px!important;
  margin:0 auto 12px!important;
  font-size:16px!important;
  line-height:1.8!important;
  font-weight:800!important;
}

#workDetailView #modalMetaLine .meta-group{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:inherit;
}

#workDetailView #modalMetaLine .meta-label{
  white-space:nowrap;
}

#workDetailView #modalMetaLine .meta-icon{
  width:24px;
  height:24px;
  border-radius:50%;
  display:grid;
  place-items:center;
  flex:0 0 24px;
  background:var(--mi-meta-icon-bg-light);
  border:1px solid var(--mi-meta-icon-border-light);
  color:#4f46e5;
  box-shadow:0 7px 18px rgba(31,41,55,.08);
}

#workDetailView #modalMetaLine .meta-icon svg{
  width:13px;
  height:13px;
  stroke:currentColor;
  fill:none;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

#workDetailView #modalMetaLine .meta-icon.flag-icon{
  color:inherit;
  background:rgba(255,255,255,.92);
}

#workDetailView #modalMetaLine .meta-icon.flag-icon span{
  font-size:14px;
  line-height:1;
}

body:not(.light) #workDetailView #modalMetaLine .meta-icon{
  background:var(--mi-meta-icon-bg-dark);
  border-color:var(--mi-meta-icon-border-dark);
  color:#cfc8ff;
  box-shadow:0 10px 20px rgba(0,0,0,.22);
}

body:not(.light) #workDetailView #modalMetaLine .meta-icon.flag-icon{
  background:rgba(24,28,39,.95);
}

#workDetailView #modalMetaLine .meta-group.status-ongoing .meta-icon{color:#22c55e;}
#workDetailView #modalMetaLine .meta-group.status-completed .meta-icon{color:#0ea5e9;}
#workDetailView #modalMetaLine .meta-group.status-paused .meta-icon{color:#f59e0b;}
#workDetailView #modalMetaLine .meta-group.status-cancelled .meta-icon{color:#ef4444;}
#workDetailView #modalMetaLine .meta-group.translation-off .meta-icon{color:#ef4444;}
#workDetailView #modalMetaLine .meta-group.translation-on .meta-icon{color:#10b981;}

#workDetailView .cover-summary-panel{
  padding-top:16px!important;
}

#workDetailView #modalTitle{
  font-size:clamp(38px,4.4vw,76px)!important;
  line-height:1.04!important;
}

#workDetailView #modalCreatorLine{
  font-size:16px!important;
}

@media (max-width:740px){
  #workDetailView .cover-origin-badge{
    width:34px;
    height:34px;
    top:10px;
    inset-inline-start:10px;
  }

  #workDetailView .cover-origin-badge span{
    font-size:18px;
  }

  #workDetailView #modalMetaLine{
    gap:8px 12px!important;
    font-size:13.6px!important;
  }

  #workDetailView #modalMetaLine .meta-icon{
    width:21px;
    height:21px;
    flex-basis:21px;
  }

  #workDetailView #modalMetaLine .meta-icon svg{
    width:11px;
    height:11px;
  }

  #workDetailView #modalMetaLine .meta-icon.flag-icon span{
    font-size:12px;
  }
}

/* ===== mi-compact-series-panels-refresh ===== */
/* ----------------------------------------------------------
   Compact Tappy-like detail panes
   ---------------------------------------------------------- */
#workDetailView .tappy-detail-content{
  width:min(calc(100% - 28px),1100px)!important;
}

#workDetailView #modalMetaLine{
  display:flex!important;
  flex-wrap:nowrap!important;
  justify-content:center!important;
  align-items:center!important;
  gap:10px 16px!important;
  margin:0 auto 8px!important;
  max-width:100%;
  white-space:nowrap!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  padding:0 2px 4px!important;
  scrollbar-width:none;
}
#workDetailView #modalMetaLine::-webkit-scrollbar{display:none}
#workDetailView #modalMetaLine .meta-group{flex:0 0 auto}
#workDetailView #modalMetaLine .meta-label{font-size:14px!important}

#workDetailView .overview-dashboard-head,
#workDetailView .information-dashboard-head,
#workDetailView .announcement-dashboard-head,
#workDetailView .comments-dashboard-head{
  padding:0 0 6px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
#workDetailView .overview-dashboard-head p,
#workDetailView .information-dashboard-head p,
#workDetailView .announcement-dashboard-head p,
#workDetailView .comments-dashboard-head p{
  display:none!important;
}
#workDetailView .overview-dashboard-head h2,
#workDetailView .information-dashboard-head h2,
#workDetailView .announcement-dashboard-head h2,
#workDetailView .comments-dashboard-head h2{
  font-size:26px!important;
  line-height:1.25!important;
  margin:2px 0 0!important;
}
#workDetailView .overview-dashboard-head .eyebrow,
#workDetailView .information-dashboard-head .eyebrow,
#workDetailView .announcement-dashboard-head .eyebrow,
#workDetailView .comments-dashboard-head .eyebrow{
  font-size:10px!important;
}

#workDetailView .overview-desktop-layout,
#workDetailView .information-desktop-layout,
#workDetailView .announcement-dashboard-layout{
  gap:18px!important;
}
#workDetailView .overview-main-column,
#workDetailView .information-main-column,
#workDetailView .information-side-column{gap:18px!important}
#workDetailView .overview-side-column,
#workDetailView .information-side-column{top:132px!important}

#workDetailView .overview-panel,
#workDetailView .overview-vote-panel,
#workDetailView .information-panel,
#workDetailView .announcement-card,
#workDetailView .comment-shell,
#workDetailView .comment-form-shell{
  padding:18px 20px!important;
  border:1px solid #ededf2!important;
  border-radius:20px!important;
  background:#fff!important;
  box-shadow:none!important;
}
body:not(.light) #workDetailView .overview-panel,
body:not(.light) #workDetailView .overview-vote-panel,
body:not(.light) #workDetailView .information-panel,
body:not(.light) #workDetailView .announcement-card,
body:not(.light) #workDetailView .comment-shell,
body:not(.light) #workDetailView .comment-form-shell{
  background:#0d1118!important;
  border-color:rgba(255,255,255,.09)!important;
}

#workDetailView .overview-panel-head,
#workDetailView .information-panel-head{
  margin-bottom:14px!important;
  align-items:flex-start!important;
}
#workDetailView .overview-panel-head span,
#workDetailView .information-panel-head span{
  font-size:10px!important;
  opacity:.88;
}
#workDetailView .overview-panel-head h3,
#workDetailView .information-panel-head h3{
  font-size:22px!important;
  margin-top:3px!important;
}
#workDetailView .information-panel-head>small{font-size:10px!important}

#workDetailView .modern-series-synopsis{
  font-size:16px!important;
  line-height:1.95!important;
}
#workDetailView .modern-series-tags{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:12px 12px!important;
  margin-top:18px!important;
}
#workDetailView .modern-series-tags span{
  padding:9px 16px!important;
  border:0!important;
  border-radius:999px!important;
  background:#f3f3f5!important;
  color:#25262b!important;
  font-size:13px!important;
  font-weight:700!important;
  box-shadow:none!important;
}
body:not(.light) #workDetailView .modern-series-tags span{
  background:#151922!important;
  color:#eef0f6!important;
}

#workDetailView .information-stat-grid{
  grid-template-columns:1fr!important;
  gap:0!important;
  border-top:1px solid #ececf2;
}
#workDetailView .information-stat-card{
  min-height:auto!important;
  padding:14px 2px!important;
  border:0!important;
  border-bottom:1px solid #ececf2!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
#workDetailView .information-stat-card:last-child{border-bottom:0!important}
#workDetailView .information-stat-card:hover{transform:none!important;border-color:transparent!important;box-shadow:none!important}
#workDetailView .information-stat-icon{
  width:38px!important;
  height:38px!important;
  border-radius:12px!important;
  background:#f6f6f8!important;
  color:#5f6470!important;
}
body:not(.light) #workDetailView .information-stat-icon{
  background:#141926!important;
  color:#dfe4ef!important;
}
#workDetailView .information-stat-card small,
#workDetailView .production-role{
  font-size:11px!important;
  color:#8a8d96!important;
}
#workDetailView .information-stat-card strong,
#workDetailView .production-grid strong,
#workDetailView .site-rating-item strong,
#workDetailView .detail-collection-link{
  font-size:15px!important;
  line-height:1.6!important;
}

#workDetailView .production-grid{
  grid-template-columns:1fr!important;
  gap:0!important;
}
#workDetailView .production-grid article{
  min-height:auto!important;
  display:grid!important;
  grid-template-columns:minmax(95px,130px) minmax(0,1fr)!important;
  align-items:start!important;
  gap:18px!important;
  padding:14px 0!important;
  border:0!important;
  border-bottom:1px solid #ececf2!important;
  border-radius:0!important;
  background:transparent!important;
}
#workDetailView .production-grid article:last-child{border-bottom:0!important}
#workDetailView .production-grid strong{overflow-wrap:anywhere!important}

#workDetailView .modern-site-ratings,
#workDetailView .modern-collection-links{
  gap:0!important;
}
#workDetailView .modern-site-ratings .site-rating-item,
#workDetailView .modern-site-ratings .site-rating-row,
#workDetailView .modern-collection-links .detail-collection-link{
  min-height:auto!important;
  padding:14px 0!important;
  border:0!important;
  border-bottom:1px solid #ececf2!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
#workDetailView .modern-site-ratings .site-rating-item:last-child,
#workDetailView .modern-site-ratings .site-rating-row:last-child,
#workDetailView .modern-collection-links .detail-collection-link:last-child{border-bottom:0!important}
#workDetailView .modern-collection-links .detail-collection-link:hover{
  color:#7c59db!important;
  transform:none!important;
}

#workDetailView .information-gallery-panel{
  padding:18px 20px!important;
}
#workDetailView .modern-gallery-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:12px!important;
}
#workDetailView .modern-gallery-grid img{
  aspect-ratio:1/1!important;
  border-radius:14px!important;
  box-shadow:none!important;
}

#workDetailView .review-grid.modern-review-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px!important;
}
#workDetailView .modern-review-grid .review-card{
  min-height:auto!important;
  padding:18px!important;
  border-radius:16px!important;
  box-shadow:none!important;
}
#workDetailView .modern-editor-note{
  min-height:auto!important;
  padding:18px!important;
  border-radius:16px!important;
}
#workDetailView .modern-editor-note p{font-size:16px!important;line-height:1.85!important}

#workDetailView .overview-related-grid{
  gap:14px 10px!important;
}
#workDetailView .overview-vote-panel .recommendation-vote-boxes{
  gap:8px!important;
}

@media (max-width:980px){
  #workDetailView .overview-desktop-layout,
  #workDetailView .information-desktop-layout,
  #workDetailView .announcement-dashboard-layout{
    grid-template-columns:1fr!important;
  }
  #workDetailView .information-side-column,
  #workDetailView .overview-side-column{position:static!important}
}

@media (max-width:740px){
  #workDetailView .tappy-detail-content{
    width:min(calc(100% - 18px),100%)!important;
  }
  #workDetailView .overview-panel,
  #workDetailView .overview-vote-panel,
  #workDetailView .information-panel,
  #workDetailView .announcement-card,
  #workDetailView .comment-shell,
  #workDetailView .comment-form-shell{
    padding:16px!important;
    border-radius:18px!important;
  }
  #workDetailView .overview-dashboard-head h2,
  #workDetailView .information-dashboard-head h2,
  #workDetailView .announcement-dashboard-head h2,
  #workDetailView .comments-dashboard-head h2{
    font-size:22px!important;
  }
  #workDetailView .overview-panel-head h3,
  #workDetailView .information-panel-head h3{
    font-size:19px!important;
  }
  #workDetailView .modern-series-synopsis{font-size:14.5px!important;line-height:1.9!important}
  #workDetailView .modern-series-tags span{font-size:12px!important;padding:8px 14px!important}
  #workDetailView .production-grid article{
    grid-template-columns:1fr!important;
    gap:4px!important;
    padding:12px 0!important;
  }
  #workDetailView .modern-gallery-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  #workDetailView .review-grid.modern-review-grid{grid-template-columns:1fr!important}
  #workDetailView #modalMetaLine{
    justify-content:flex-start!important;
    margin-inline:auto!important;
  }
  #workDetailView #modalMetaLine .meta-label{font-size:13px!important}
}

/* ===== mi-tappy-refined-panels ===== */
/* ==========================================================
   Tappy-inspired refined work panes
   ========================================================== */
#workDetailView .tappy-detail-content{
  width:min(calc(100% - 26px), 1060px)!important;
  gap:16px!important;
}

/* top meta line under cover */
#workDetailView #modalMetaLine{
  margin:2px auto 10px!important;
  padding:0 4px 2px!important;
  width:max-content;
  max-width:100%;
  display:flex!important;
  flex-wrap:nowrap!important;
  gap:8px 14px!important;
  align-items:center!important;
  justify-content:center!important;
  white-space:nowrap!important;
  overflow:auto hidden!important;
  scrollbar-width:none;
}
#workDetailView #modalMetaLine::-webkit-scrollbar{display:none}
#workDetailView #modalMetaLine .meta-group{
  flex:0 0 auto;
  display:inline-flex!important;
  align-items:center!important;
  gap:7px!important;
}
#workDetailView #modalMetaLine .meta-label{
  font-size:14px!important;
  line-height:1.55!important;
  letter-spacing:0!important;
}
#workDetailView #modalMetaLine .meta-group:not(:last-child)::after{
  content:"";
  width:5px;
  height:5px;
  border-radius:999px;
  background:rgba(121,121,131,.38);
  margin-inline-start:6px;
  flex:0 0 auto;
}
body:not(.light) #workDetailView #modalMetaLine .meta-group:not(:last-child)::after{
  background:rgba(255,255,255,.22);
}

/* tab rail */
#workDetailView .detail-tabs-shell,
#workDetailView .detail-tabs,
#workDetailView .detail-nav,
#workDetailView .work-detail-tabs,
#workDetailView .tappy-detail-tabs{
  border-radius:22px!important;
}
#workDetailView .detail-tab,
#workDetailView .detail-tab-button,
#workDetailView [data-detail-tab]{
  min-height:84px!important;
  padding:14px 18px!important;
  border-radius:18px!important;
}
#workDetailView .detail-tab-label,
#workDetailView .detail-tab-title{
  font-size:14px!important;
}
#workDetailView .detail-tab-subtitle,
#workDetailView .detail-tab small{
  font-size:11px!important;
  opacity:.82;
}

/* pane headers */
#workDetailView .overview-dashboard-head,
#workDetailView .information-dashboard-head,
#workDetailView .announcement-dashboard-head,
#workDetailView .comments-dashboard-head{
  padding:0 0 4px!important;
  margin-bottom:2px!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}
#workDetailView .overview-dashboard-head p,
#workDetailView .information-dashboard-head p,
#workDetailView .announcement-dashboard-head p,
#workDetailView .comments-dashboard-head p{
  display:none!important;
}
#workDetailView .overview-dashboard-head h2,
#workDetailView .information-dashboard-head h2,
#workDetailView .announcement-dashboard-head h2,
#workDetailView .comments-dashboard-head h2{
  margin:2px 0 0!important;
  font-size:24px!important;
  line-height:1.25!important;
}
#workDetailView .eyebrow{
  font-size:10px!important;
  letter-spacing:.4px!important;
}

/* overall layout */
#workDetailView .overview-desktop-layout,
#workDetailView .information-desktop-layout,
#workDetailView .announcement-dashboard-layout,
#workDetailView .comments-desktop-layout{
  gap:16px!important;
}
#workDetailView .overview-main-column,
#workDetailView .information-main-column,
#workDetailView .information-side-column,
#workDetailView .announcement-main-column,
#workDetailView .comments-feed-panel,
#workDetailView .comments-compose-panel{
  gap:16px!important;
}
#workDetailView .overview-side-column,
#workDetailView .information-side-column{
  top:128px!important;
}

/* panels */
#workDetailView .overview-panel,
#workDetailView .overview-vote-panel,
#workDetailView .information-panel,
#workDetailView .announcement-card,
#workDetailView .work-announcement-card,
#workDetailView .comments-feed-panel,
#workDetailView .comments-compose-panel,
#workDetailView .comment-shell,
#workDetailView .comment-form-shell{
  padding:18px 20px!important;
  border:1px solid #ececf1!important;
  border-radius:22px!important;
  background:#fff!important;
  box-shadow:none!important;
}
body:not(.light) #workDetailView .overview-panel,
body:not(.light) #workDetailView .overview-vote-panel,
body:not(.light) #workDetailView .information-panel,
body:not(.light) #workDetailView .announcement-card,
body:not(.light) #workDetailView .work-announcement-card,
body:not(.light) #workDetailView .comments-feed-panel,
body:not(.light) #workDetailView .comments-compose-panel,
body:not(.light) #workDetailView .comment-shell,
body:not(.light) #workDetailView .comment-form-shell{
  background:#0d1118!important;
  border-color:rgba(255,255,255,.08)!important;
}

#workDetailView .overview-panel-head,
#workDetailView .information-panel-head,
#workDetailView .comments-feed-head,
#workDetailView .compose-panel-head{
  margin-bottom:14px!important;
}
#workDetailView .overview-panel-head h3,
#workDetailView .information-panel-head h3,
#workDetailView .comments-feed-head h3,
#workDetailView .compose-panel-head strong{
  font-size:21px!important;
  line-height:1.35!important;
  margin-top:3px!important;
}
#workDetailView .overview-panel-head span,
#workDetailView .information-panel-head span,
#workDetailView .comments-feed-head span,
#workDetailView .compose-panel-head small,
#workDetailView .information-panel-head>small{
  font-size:10px!important;
}

/* synopsis / tags */
#workDetailView .modern-series-synopsis{
  font-size:15.5px!important;
  line-height:1.95!important;
  color:#47474f!important;
}
body:not(.light) #workDetailView .modern-series-synopsis{color:#d7d9e1!important}
#workDetailView .modern-series-tags{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:10px!important;
  margin-top:18px!important;
}
#workDetailView .modern-series-tags span{
  padding:8px 16px!important;
  border:0!important;
  border-radius:999px!important;
  background:#f3f3f4!important;
  color:#2f3034!important;
  font-size:13px!important;
  font-weight:700!important;
  box-shadow:none!important;
}
body:not(.light) #workDetailView .modern-series-tags span{
  background:#161a23!important;
  color:#f0f2f7!important;
}

/* about-series rows instead of many cards */
#workDetailView .information-stat-grid{
  grid-template-columns:1fr!important;
  gap:0!important;
  border-top:1px solid #ececf1;
}
#workDetailView .information-stat-card{
  min-height:auto!important;
  display:grid!important;
  grid-template-columns:42px minmax(0,1fr)!important;
  align-items:center!important;
  gap:14px!important;
  padding:14px 0!important;
  border:0!important;
  border-bottom:1px solid #ececf1!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
#workDetailView .information-stat-card:last-child{border-bottom:0!important}
#workDetailView .information-stat-card:hover{transform:none!important;box-shadow:none!important;border-color:#ececf1!important}
#workDetailView .information-stat-icon{
  width:36px!important;
  height:36px!important;
  border-radius:12px!important;
  background:#f5f5f7!important;
  color:#737782!important;
}
body:not(.light) #workDetailView .information-stat-icon{
  background:#151925!important;
  color:#e6ebf4!important;
}
#workDetailView .information-stat-card small,
#workDetailView .production-role{
  font-size:11px!important;
  color:#8a8d96!important;
  line-height:1.5!important;
}
#workDetailView .information-stat-card strong,
#workDetailView .production-grid strong,
#workDetailView .site-rating-item strong,
#workDetailView .detail-collection-link{
  font-size:15px!important;
  line-height:1.65!important;
}

#workDetailView .production-grid{
  grid-template-columns:1fr!important;
  gap:0!important;
}
#workDetailView .production-grid article,
#workDetailView .modern-site-ratings .site-rating-item,
#workDetailView .modern-site-ratings .site-rating-row,
#workDetailView .modern-collection-links .detail-collection-link{
  min-height:auto!important;
  display:grid!important;
  grid-template-columns:minmax(105px,140px) minmax(0,1fr)!important;
  align-items:start!important;
  gap:18px!important;
  padding:14px 0!important;
  border:0!important;
  border-bottom:1px solid #ececf1!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
#workDetailView .production-grid article:last-child,
#workDetailView .modern-site-ratings .site-rating-item:last-child,
#workDetailView .modern-site-ratings .site-rating-row:last-child,
#workDetailView .modern-collection-links .detail-collection-link:last-child{
  border-bottom:0!important;
}
#workDetailView .modern-site-ratings,
#workDetailView .modern-collection-links{
  gap:0!important;
}
#workDetailView .modern-site-ratings .site-rating-item span:first-child,
#workDetailView .modern-site-ratings .site-rating-row span:first-child{
  color:#8a8d96!important;
  font-size:11px!important;
  font-weight:700!important;
}

/* gallery + reviews compact */
#workDetailView .information-gallery-panel{
  padding-bottom:18px!important;
}
#workDetailView .modern-gallery-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:10px!important;
}
#workDetailView .modern-gallery-grid img{
  aspect-ratio:1/1!important;
  border-radius:14px!important;
  border:1px solid #ececf0!important;
  box-shadow:none!important;
}
#workDetailView .modern-gallery-grid img:hover{
  transform:translateY(-2px)!important;
  box-shadow:none!important;
}
#workDetailView .modern-gallery-empty{
  min-height:190px!important;
  border-radius:18px!important;
}

#workDetailView .review-grid.modern-review-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px!important;
}
#workDetailView .modern-review-grid .review-card,
#workDetailView .modern-editor-note{
  min-height:auto!important;
  padding:18px!important;
  border-radius:18px!important;
  box-shadow:none!important;
}
#workDetailView .modern-editor-note p{font-size:15px!important;line-height:1.9!important}
#workDetailView .overview-related-grid{gap:12px 10px!important}

/* comments + announcement compact polish */
#workDetailView .community-guidelines{
  padding:16px!important;
  border-radius:16px!important;
}
#workDetailView .announcement-empty-state,
#workDetailView .modern-announcement-empty{
  min-height:210px!important;
  border-radius:18px!important;
}

@media (max-width: 980px){
  #workDetailView .overview-desktop-layout,
  #workDetailView .information-desktop-layout,
  #workDetailView .announcement-dashboard-layout,
  #workDetailView .comments-desktop-layout{
    grid-template-columns:1fr!important;
  }
  #workDetailView .overview-side-column,
  #workDetailView .information-side-column{position:static!important}
}

@media (max-width: 740px){
  #workDetailView .tappy-detail-content{
    width:min(calc(100% - 16px),100%)!important;
  }
  #workDetailView .detail-tab,
  #workDetailView .detail-tab-button,
  #workDetailView [data-detail-tab]{
    min-height:76px!important;
    padding:12px 14px!important;
    border-radius:16px!important;
  }
  #workDetailView .overview-panel,
  #workDetailView .overview-vote-panel,
  #workDetailView .information-panel,
  #workDetailView .announcement-card,
  #workDetailView .work-announcement-card,
  #workDetailView .comments-feed-panel,
  #workDetailView .comments-compose-panel,
  #workDetailView .comment-shell,
  #workDetailView .comment-form-shell{
    padding:16px!important;
    border-radius:18px!important;
  }
  #workDetailView .overview-dashboard-head h2,
  #workDetailView .information-dashboard-head h2,
  #workDetailView .announcement-dashboard-head h2,
  #workDetailView .comments-dashboard-head h2{font-size:22px!important}
  #workDetailView .overview-panel-head h3,
  #workDetailView .information-panel-head h3{font-size:19px!important}
  #workDetailView .modern-series-synopsis{font-size:14.5px!important;line-height:1.9!important}
  #workDetailView .production-grid article,
  #workDetailView .modern-site-ratings .site-rating-item,
  #workDetailView .modern-site-ratings .site-rating-row,
  #workDetailView .modern-collection-links .detail-collection-link{
    grid-template-columns:1fr!important;
    gap:4px!important;
    padding:12px 0!important;
  }
  #workDetailView .modern-gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #workDetailView .review-grid.modern-review-grid{grid-template-columns:1fr!important}
  #workDetailView #modalMetaLine{
    justify-content:flex-start!important;
    width:100%!important;
  }
  #workDetailView #modalMetaLine .meta-label{font-size:13px!important}
}

/* ===== mi-dark-info-logo-final-fix ===== */
/* ==========================================================
   Work detail header: centered transparent logo, no account box
   ========================================================== */
#workDetailView .tappy-detail-header{
  min-height:70px!important;
  display:grid!important;
  grid-template-columns:44px minmax(0,1fr) 44px!important;
  align-items:center!important;
  gap:10px!important;
  padding:11px 14px!important;
  border-bottom:1px solid var(--work-line,var(--line))!important;
  background:rgba(255,255,255,.94)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
}
body:not(.light) #workDetailView .tappy-detail-header{
  background:rgba(5,5,7,.94)!important;
  border-color:rgba(255,255,255,.09)!important;
}

#workDetailView #workBackButton{
  position:static!important;
  grid-column:1!important;
  grid-row:1!important;
  width:42px!important;
  height:42px!important;
  justify-self:start!important;
  border-radius:14px!important;
  color:var(--work-text)!important;
}

#workDetailView .tappy-detail-brand{
  grid-column:2!important;
  grid-row:1!important;
  justify-self:center!important;
  min-width:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}
#workDetailView .tappy-detail-brand::before,
#workDetailView .tappy-detail-brand::after{
  display:none!important;
}
#workDetailView .detail-brand-shell{
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
#workDetailView .detail-brand-image{
  width:auto!important;
  height:34px!important;
  max-width:min(46vw,285px)!important;
  object-fit:contain!important;
  background:transparent!important;
  filter:brightness(0)!important;
  opacity:1!important;
}
body:not(.light) #workDetailView .detail-brand-image{
  filter:brightness(0) invert(1) drop-shadow(0 4px 12px rgba(255,255,255,.08))!important;
}
#workDetailView .detail-brand-handle{
  display:none!important;
}

#workDetailView .tappy-detail-header-actions{
  grid-column:3!important;
  grid-row:1!important;
  justify-self:end!important;
  width:42px!important;
  min-width:42px!important;
  display:grid!important;
  place-items:center!important;
}
#workDetailView #detailAuthBtn{
  display:none!important;
}
#workDetailView #detailSearchBtn{
  width:42px!important;
  height:42px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:14px!important;
  color:var(--work-text)!important;
}
body:not(.light) #workDetailView #workBackButton,
body:not(.light) #workDetailView #detailSearchBtn{
  background:#0e1015!important;
  border:1px solid rgba(255,255,255,.08)!important;
}
body.light #workDetailView #workBackButton,
body.light #workDetailView #detailSearchBtn{
  background:#f5f5f7!important;
  border:1px solid #e5e5e9!important;
}

/* ==========================================================
   Information pane: remove ugly thick lines and nested boxes
   ========================================================== */
#seriesInformation .information-dashboard-head{
  margin:0 0 14px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

#seriesInformation .information-stat-grid.modern-compact-stats{
  width:100%!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:0!important;
  margin:0 0 22px!important;
  padding:0!important;
  border-top:1px solid var(--work-line)!important;
  border-bottom:1px solid var(--work-line)!important;
  background:transparent!important;
}
#seriesInformation .information-stat-grid.modern-compact-stats .information-stat-card{
  min-height:88px!important;
  display:grid!important;
  grid-template-columns:40px minmax(0,1fr)!important;
  align-items:center!important;
  gap:12px!important;
  padding:15px 16px!important;
  border:0!important;
  border-inline-end:1px solid var(--work-line)!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}
#seriesInformation .information-stat-grid.modern-compact-stats .information-stat-card:last-child{
  border-inline-end:0!important;
}
#seriesInformation .information-stat-grid.modern-compact-stats .information-stat-card::after{
  display:none!important;
  content:none!important;
}
#seriesInformation .information-stat-card:hover{
  transform:none!important;
  border-color:var(--work-line)!important;
  box-shadow:none!important;
}
#seriesInformation .information-stat-icon{
  width:38px!important;
  height:38px!important;
  border-radius:13px!important;
  background:#f2f3f6!important;
  color:#626875!important;
}
body:not(.light) #seriesInformation .information-stat-icon{
  background:#151925!important;
  color:#dce1ed!important;
}
#seriesInformation .information-stat-card small{
  color:var(--work-muted)!important;
  font-size:11px!important;
  line-height:1.45!important;
}
#seriesInformation .information-stat-card strong{
  color:var(--work-text)!important;
  font-size:16px!important;
  line-height:1.55!important;
}

#seriesInformation .information-desktop-layout{
  display:grid!important;
  grid-template-columns:minmax(0,1.55fr) minmax(250px,.72fr)!important;
  gap:28px!important;
  align-items:start!important;
}
#seriesInformation .information-main-column,
#seriesInformation .information-side-column{
  gap:26px!important;
}

#seriesInformation .information-panel{
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
#seriesInformation .information-panel-head{
  margin:0 0 10px!important;
  padding:0 0 12px!important;
  border-bottom:1px solid var(--work-line)!important;
}
#seriesInformation .information-panel-head h3{
  color:var(--work-text)!important;
  font-size:23px!important;
  margin:3px 0 0!important;
}
#seriesInformation .information-panel-head span,
#seriesInformation .information-panel-head small{
  color:var(--work-muted)!important;
}

#seriesInformation .production-grid{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:0!important;
}
#seriesInformation .production-grid article{
  min-height:auto!important;
  display:grid!important;
  grid-template-columns:minmax(92px,120px) minmax(0,1fr)!important;
  gap:18px!important;
  align-items:center!important;
  padding:15px 0!important;
  border:0!important;
  border-bottom:1px solid var(--work-line)!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
#seriesInformation .production-grid article:last-child{
  border-bottom:0!important;
}
#seriesInformation .production-role{
  color:var(--work-muted)!important;
  font-size:12px!important;
}
#seriesInformation .production-grid strong{
  color:var(--work-text)!important;
  font-size:16px!important;
  line-height:1.65!important;
}

#seriesInformation .modern-site-ratings,
#seriesInformation .modern-collection-links{
  display:grid!important;
  gap:0!important;
}
#seriesInformation .modern-site-ratings > *,
#seriesInformation .modern-collection-links > *{
  min-height:auto!important;
  padding:14px 0!important;
  border:0!important;
  border-bottom:1px solid var(--work-line)!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--work-text)!important;
}
#seriesInformation .modern-site-ratings > *:last-child,
#seriesInformation .modern-collection-links > *:last-child{
  border-bottom:0!important;
}

#seriesInformation .information-gallery-panel{
  padding-top:2px!important;
}
#seriesInformation .modern-gallery-grid{
  gap:10px!important;
}
#seriesInformation .modern-gallery-grid img{
  border-radius:14px!important;
  border:1px solid var(--work-line)!important;
  box-shadow:none!important;
}

@media(max-width:900px){
  #seriesInformation .information-desktop-layout{
    grid-template-columns:1fr!important;
  }
  #seriesInformation .information-side-column{
    position:static!important;
  }
}

@media(max-width:980px){
  #adminView .admin-dashboard{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media(max-width:740px){
  #adminView .admin-dashboard{
    grid-template-columns:1fr!important;
  }
  #workDetailView .tappy-detail-header{
    min-height:64px!important;
    grid-template-columns:40px minmax(0,1fr) 40px!important;
    padding:10px 11px!important;
  }
  #workDetailView #workBackButton,
  #workDetailView #detailSearchBtn,
  #workDetailView .tappy-detail-header-actions{
    width:40px!important;
    min-width:40px!important;
    height:40px!important;
  }
  #workDetailView .detail-brand-image{
    height:27px!important;
    max-width:50vw!important;
  }

  #seriesInformation .information-stat-grid.modern-compact-stats{
    grid-template-columns:1fr!important;
  }
  #seriesInformation .information-stat-grid.modern-compact-stats .information-stat-card{
    min-height:72px!important;
    padding:12px 2px!important;
    border-inline-end:0!important;
    border-bottom:1px solid var(--work-line)!important;
  }
  #seriesInformation .information-stat-grid.modern-compact-stats .information-stat-card:last-child{
    border-bottom:0!important;
  }
  #seriesInformation .information-panel-head h3{
    font-size:20px!important;
  }
  #seriesInformation .production-grid article{
    grid-template-columns:84px minmax(0,1fr)!important;
    gap:12px!important;
    padding:13px 0!important;
  }
}

/* ===== mi-modern-info-redesign-final ===== */
/* ==========================================================
   Work header tabs — compact, modern, no oversized active tile
   ========================================================== */
#workDetailView .tappy-icon-tabs{
  width:min(calc(100% - 24px),980px)!important;
  min-height:64px!important;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:4px!important;
  margin:14px auto 18px!important;
  padding:5px!important;
  border:1px solid color-mix(in srgb,var(--line) 82%,transparent)!important;
  border-radius:20px!important;
  background:color-mix(in srgb,var(--surface) 94%,transparent)!important;
  box-shadow:0 10px 28px rgba(0,0,0,.08)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
}

#workDetailView .tappy-icon-tabs button{
  min-height:54px!important;
  max-width:none!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  padding:9px 10px!important;
  border:0!important;
  border-radius:15px!important;
  background:transparent!important;
  color:var(--muted)!important;
  box-shadow:none!important;
  transform:none!important;
  transition:background .2s ease,color .2s ease,transform .2s ease!important;
}

#workDetailView .tappy-icon-tabs button::after{
  display:none!important;
}

#workDetailView .tappy-icon-tabs button:hover{
  color:var(--text)!important;
  background:var(--surface2)!important;
  transform:translateY(-1px)!important;
}

#workDetailView .tappy-icon-tabs button.active{
  color:var(--text)!important;
  background:color-mix(in srgb,var(--cover-glow-rgb,rgb(139,92,246)) 12%,var(--surface2))!important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 10%,transparent)!important;
}

#workDetailView .tappy-icon-tabs button.active .tab-icon,
#workDetailView .tappy-icon-tabs button.active .detail-tab-label{
  color:var(--text)!important;
}

#workDetailView .tappy-icon-tabs .tab-icon{
  width:24px!important;
  height:24px!important;
  margin:0!important;
}

#workDetailView .tappy-icon-tabs .tab-icon svg{
  width:22px!important;
  height:22px!important;
  stroke-width:2!important;
}

#workDetailView .tappy-icon-tabs .detail-tab-label{
  font-size:11px!important;
  font-weight:800!important;
  white-space:nowrap!important;
}

/* ==========================================================
   Modern information page — one clean sheet, flat rows
   ========================================================== */
#seriesInformation{
  padding-bottom:26px!important;
}

#seriesInformation .modern-info-page{
  width:min(calc(100% - 6px),1040px);
  margin:0 auto;
  padding:24px 26px 28px;
  border:1px solid var(--line);
  border-radius:28px;
  background:color-mix(in srgb,var(--surface) 97%,transparent);
  box-shadow:0 18px 48px rgba(0,0,0,.08);
}

body:not(.light) #seriesInformation .modern-info-page{
  background:rgba(10,11,14,.94);
  border-color:rgba(255,255,255,.08);
  box-shadow:0 22px 54px rgba(0,0,0,.28);
}

.modern-info-page-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:22px;
}

.modern-info-kicker,
.modern-section-head span{
  display:block;
  margin-bottom:4px;
  color:var(--muted);
  font-size:9px!important;
  font-weight:900;
  letter-spacing:.12em;
}

.modern-info-page-head h2{
  margin:0;
  color:var(--text);
  font-size:28px!important;
  line-height:1.2;
}

.modern-source-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:44px;
  padding:10px 16px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface2);
  color:var(--text);
  font-size:10px!important;
  font-weight:900;
  text-decoration:none;
  box-shadow:0 8px 22px rgba(0,0,0,.08);
  transition:transform .18s ease,border-color .18s ease,background .18s ease;
}
.modern-source-link b{font-size:14px;line-height:1;font-weight:900}
.modern-source-link:hover{
  transform:translateY(-1px);
  border-color:color-mix(in srgb,var(--accent2) 45%,var(--line));
  background:color-mix(in srgb,var(--accent2) 8%,var(--surface2));
}
.modern-source-link.hidden{display:none!important;}

.modern-info-summary{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin-bottom:26px;
}

.modern-info-summary article{
  min-width:0;
  display:flex;
  align-items:center;
  gap:12px;
  padding:17px 18px;
}

.modern-info-summary article+article{
  border-inline-start:1px solid var(--line);
}

.modern-info-summary .summary-icon{
  width:38px;
  height:38px;
  flex:0 0 38px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:var(--surface2);
  color:var(--text);
}

.modern-info-summary svg{
  width:19px;
  height:19px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.modern-info-summary small{
  display:block;
  margin-bottom:3px;
  color:var(--muted)!important;
  font-size:9px!important;
  font-weight:700;
}

.modern-info-summary strong{
  display:block;
  overflow:hidden;
  color:var(--text)!important;
  font-size:15px!important;
  font-weight:900;
  line-height:1.5;
  text-overflow:ellipsis;
}

.modern-info-layout{
  display:grid;
  grid-template-columns:minmax(0,1.7fr) minmax(250px,.72fr);
  gap:32px;
  align-items:start;
}

.modern-info-main,
.modern-info-side{
  min-width:0;
  display:grid;
  gap:28px;
}

.modern-info-section{
  min-width:0;
}

.modern-info-section+.modern-info-section{
  padding-top:26px;
  border-top:1px solid var(--line);
}

.modern-section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}

.modern-section-head h3{
  margin:0;
  color:var(--text);
  font-size:21px!important;
  line-height:1.3;
}

.modern-section-head small{
  color:var(--muted)!important;
  font-size:9px!important;
}

.modern-definition-list{
  margin:0;
}

.modern-definition-list>div{
  display:grid;
  grid-template-columns:minmax(88px,130px) minmax(0,1fr);
  gap:22px;
  align-items:start;
  padding:15px 0;
  border-bottom:1px solid var(--line);
}

.modern-definition-list>div:last-child{
  border-bottom:0;
}

.modern-definition-list dt{
  color:var(--muted);
  font-size:11px!important;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:10px;
}

.def-icon{
  width:30px;
  height:30px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:color-mix(in srgb, var(--card) 80%, transparent);
  border:1px solid var(--line);
  color:var(--text);
  box-shadow:0 10px 24px rgba(0,0,0,.08);
  flex:0 0 30px;
}

.def-icon svg{
  width:15px;
  height:15px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}


.modern-definition-list dd{
  margin:0;
  color:var(--text);
  font-size:15px!important;
  font-weight:850;
  line-height:1.7;
  overflow-wrap:anywhere;
}

/* ratings and recommendation lists are flat rows */
#seriesInformation .modern-site-ratings,
#seriesInformation .modern-collection-links{
  display:grid;
  gap:0!important;
}

#seriesInformation .modern-site-ratings>* ,
#seriesInformation .modern-collection-links>*{
  min-height:auto!important;
  padding:13px 0!important;
  border:0!important;
  border-bottom:1px solid var(--line)!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

#seriesInformation .modern-site-ratings>*:last-child,
#seriesInformation .modern-collection-links>*:last-child{
  border-bottom:0!important;
}

#seriesInformation .modern-collection-links>*:hover{
  color:var(--text)!important;
  transform:none!important;
}

/* gallery */
#seriesInformation .modern-gallery-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:10px!important;
}

#seriesInformation .modern-gallery-grid img{
  aspect-ratio:1/1!important;
  border:1px solid var(--line)!important;
  border-radius:16px!important;
  box-shadow:none!important;
}

#seriesInformation .modern-gallery-empty{
  min-height:160px!important;
  border:1px dashed var(--line)!important;
  border-radius:18px!important;
  background:var(--surface2)!important;
  color:var(--muted)!important;
}

/* ==========================================================
   Follow/share bar — smaller and less intrusive
   ========================================================== */
#workDetailView .tappy-bottom-cta{
  width:min(calc(100% - 22px),760px)!important;
  min-height:auto!important;
  padding:8px!important;
  gap:8px!important;
  border:1px solid color-mix(in srgb,var(--line) 86%,transparent)!important;
  border-radius:24px!important;
  background:color-mix(in srgb,var(--surface) 94%,transparent)!important;
  box-shadow:0 14px 34px rgba(0,0,0,.18)!important;
  backdrop-filter:blur(20px)!important;
  -webkit-backdrop-filter:blur(20px)!important;
}

#workDetailView .tappy-follow-cta{
  height:56px!important;
  border-radius:17px!important;
  font-size:15px!important;
}

#workDetailView .tappy-share-cta,
#workDetailView .tappy-plus-cta{
  width:56px!important;
  height:56px!important;
  flex-basis:56px!important;
  padding:15px!important;
}

@media(max-width:900px){
  .modern-info-layout{
    grid-template-columns:1fr;
  }

  .modern-info-side{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px;
  }
}

@media(max-width:740px){
  #workDetailView .tappy-icon-tabs{
    width:calc(100% - 12px)!important;
    min-height:58px!important;
    margin:10px auto 14px!important;
    padding:4px!important;
    border-radius:17px!important;
  }

  #workDetailView .tappy-icon-tabs button{
    min-height:49px!important;
    flex-direction:column!important;
    gap:2px!important;
    padding:6px 2px!important;
    border-radius:13px!important;
  }

  #workDetailView .tappy-icon-tabs .tab-icon{
    width:21px!important;
    height:21px!important;
  }

  #workDetailView .tappy-icon-tabs .tab-icon svg{
    width:20px!important;
    height:20px!important;
  }

  #workDetailView .tappy-icon-tabs .detail-tab-label{
    font-size:8.8px!important;
  }

  #seriesInformation .modern-info-page{
    width:100%;
    padding:20px 16px 24px;
    border-inline:0;
    border-radius:0;
    box-shadow:none;
  }

  .modern-info-page-head{
    margin-bottom:18px;
  }

  .modern-info-page-head h2{
    font-size:24px!important;
  }

  .modern-info-summary{
    grid-template-columns:1fr;
    margin-bottom:22px;
  }

  .modern-info-summary article{
    padding:14px 0;
  }

  .modern-info-summary article+article{
    border-inline-start:0;
    border-top:1px solid var(--line);
  }

  .modern-info-summary .summary-icon{
    width:36px;
    height:36px;
    flex-basis:36px;
  }

  .modern-info-layout{
    gap:24px;
  }

  .modern-info-main,
  .modern-info-side{
    gap:22px;
  }

  .modern-info-side{
    grid-template-columns:1fr;
  }

  .modern-definition-list>div{
    grid-template-columns:88px minmax(0,1fr);
    gap:14px;
    padding:13px 0;
  }

  #seriesInformation .modern-gallery-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  #workDetailView .tappy-bottom-cta{
    width:calc(100% - 12px)!important;
    padding:6px!important;
    border-radius:21px!important;
  }

  #workDetailView .tappy-follow-cta{
    height:52px!important;
    font-size:14px!important;
  }

  #workDetailView .tappy-share-cta,
  #workDetailView .tappy-plus-cta{
    width:52px!important;
    height:52px!important;
    flex-basis:52px!important;
    padding:14px!important;
  }
}

/* ===== mi-unify-all-work-panes ===== */
/* Unified modern treatment for all work panes */
#workDetailView .tappy-icon-tabs{width:min(100%,980px)!important;margin:14px auto 0!important;padding:10px!important;border:1px solid var(--line)!important;background:var(--surface)!important;backdrop-filter:blur(16px);border-radius:28px!important;box-shadow:0 18px 45px rgba(0,0,0,.08)!important}
body:not(.light) #workDetailView .tappy-icon-tabs{background:rgba(13,17,24,.88)!important;box-shadow:0 18px 48px rgba(0,0,0,.28)!important}
#workDetailView .tappy-icon-tabs button{min-height:82px!important;border-radius:20px!important;padding:14px 16px!important;transition:transform .22s ease,background .22s ease,box-shadow .22s ease,color .22s ease!important}
#workDetailView .tappy-icon-tabs button:hover{transform:translateY(-2px)}
#workDetailView .tappy-icon-tabs button.active{background:var(--surface2)!important;color:var(--text)!important;box-shadow:0 16px 34px rgba(139,92,246,.14)!important}
body:not(.light) #workDetailView .tappy-icon-tabs button.active{background:#f6f7fb!important;color:#111827!important}
#workDetailView .tappy-detail-content{width:min(calc(100% - 28px),1080px)!important;gap:20px!important}
#seriesOverview,#seriesInformation,#seriesAnnouncements,#seriesDiscussion{scroll-margin-top:120px}
#workDetailView .overview-dashboard-head,#workDetailView .information-dashboard-head,#workDetailView .announcement-dashboard-head,#workDetailView .comments-dashboard-head{padding:0 0 6px!important;margin:0 0 2px!important;background:transparent!important;border:0!important;box-shadow:none!important}
#workDetailView .overview-dashboard-head p,#workDetailView .information-dashboard-head p,#workDetailView .announcement-dashboard-head p,#workDetailView .comments-dashboard-head p{display:none!important}
#workDetailView .overview-dashboard-head h2,#workDetailView .information-dashboard-head h2,#workDetailView .announcement-dashboard-head h2,#workDetailView .comments-dashboard-head h2{font-size:24px!important;line-height:1.25!important;margin:2px 0 0!important}
#workDetailView .overview-desktop-layout,#workDetailView .information-desktop-layout,#workDetailView .announcement-dashboard-layout,#workDetailView .comments-desktop-layout{gap:18px!important;align-items:start!important}
#workDetailView .overview-main-column,#workDetailView .information-main-column,#workDetailView .information-side-column,#workDetailView .announcement-main-column,#workDetailView .comments-feed-panel,#workDetailView .comments-compose-panel{gap:18px!important}
#workDetailView .overview-panel,#workDetailView .overview-vote-panel,#workDetailView .information-panel,#workDetailView .announcement-card,#workDetailView .comment-shell,#workDetailView .comment-form-shell,#workDetailView .comments-feed-panel,#workDetailView .comments-compose-panel{padding:20px 22px!important;border:1px solid rgba(17,24,39,.08)!important;border-radius:22px!important;background:#fff!important;box-shadow:0 16px 38px rgba(17,24,39,.06)!important}
body:not(.light) #workDetailView .overview-panel,body:not(.light) #workDetailView .overview-vote-panel,body:not(.light) #workDetailView .information-panel,body:not(.light) #workDetailView .announcement-card,body:not(.light) #workDetailView .comment-shell,body:not(.light) #workDetailView .comment-form-shell,body:not(.light) #workDetailView .comments-feed-panel,body:not(.light) #workDetailView .comments-compose-panel{background:#0e131d!important;border-color:rgba(255,255,255,.08)!important;box-shadow:0 18px 42px rgba(0,0,0,.28)!important}
#workDetailView .overview-panel-head,#workDetailView .information-panel-head,#workDetailView .comments-feed-head{margin-bottom:14px!important;align-items:flex-start!important}
#workDetailView .overview-panel-head span,#workDetailView .information-panel-head span,#workDetailView .comments-feed-head span{font-size:11px!important;color:var(--muted)!important}
#workDetailView .overview-panel-head h3,#workDetailView .information-panel-head h3,#workDetailView .comments-feed-head h3{font-size:21px!important;line-height:1.35!important;margin-top:3px!important}
#workDetailView .modern-series-synopsis,#workDetailView .overview-story{font-size:15.5px!important;line-height:2!important;color:var(--text)!important}
#workDetailView .modern-series-tags{display:flex!important;flex-wrap:wrap!important;gap:10px!important;margin-top:18px!important}
#workDetailView .modern-series-tags span{padding:8px 14px!important;border-radius:999px!important;border:1px solid rgba(17,24,39,.08)!important;background:#f3f4f7!important;color:#252934!important;font-size:12.5px!important;font-weight:700!important;box-shadow:none!important}
body:not(.light) #workDetailView .modern-series-tags span{background:#151b27!important;border-color:rgba(255,255,255,.08)!important;color:#f4f6fb!important}
#workDetailView .information-stat-grid{grid-template-columns:1fr!important;gap:0!important;border-top:1px solid rgba(17,24,39,.08)!important}
body:not(.light) #workDetailView .information-stat-grid{border-top-color:rgba(255,255,255,.08)!important}
#workDetailView .information-stat-card{min-height:auto!important;padding:14px 0!important;border:0!important;border-bottom:1px solid rgba(17,24,39,.08)!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
body:not(.light) #workDetailView .information-stat-card{border-bottom-color:rgba(255,255,255,.08)!important}
#workDetailView .information-stat-card:last-child{border-bottom:0!important}
#workDetailView .information-stat-icon{width:38px!important;height:38px!important;border-radius:12px!important;background:#f5f6fa!important;color:#5b6474!important}
body:not(.light) #workDetailView .information-stat-icon{background:#171d2a!important;color:#e6eaf2!important}
#workDetailView .production-grid{grid-template-columns:1fr!important;gap:0!important}
#workDetailView .production-grid article{display:grid!important;grid-template-columns:minmax(92px,132px) minmax(0,1fr)!important;align-items:start!important;gap:16px!important;padding:14px 0!important;border:0!important;border-bottom:1px solid rgba(17,24,39,.08)!important;border-radius:0!important;background:transparent!important}
body:not(.light) #workDetailView .production-grid article{border-bottom-color:rgba(255,255,255,.08)!important}
#workDetailView .production-grid article:last-child{border-bottom:0!important}
#workDetailView .production-role,#workDetailView .information-stat-card small{font-size:11px!important;color:var(--muted)!important}
#workDetailView .production-grid strong,#workDetailView .information-stat-card strong,#workDetailView .site-rating-item strong,#workDetailView .detail-collection-link{font-size:15px!important;line-height:1.6!important;color:var(--text)!important}
#workDetailView .announcement-card{display:grid!important;gap:10px!important}
#workDetailView .announcement-card h3{font-size:18px!important;line-height:1.5!important;margin:0!important}
#workDetailView .announcement-card p{font-size:14px!important;line-height:1.9!important;color:var(--muted)!important;margin:0!important}
#workDetailView .announcement-card time,#workDetailView .announcement-card small{font-size:11px!important;color:var(--muted)!important}
#workDetailView .comments-feed-panel,#workDetailView .comments-compose-panel{padding:18px 20px!important}
#workDetailView .modern-comments-list{display:grid!important;gap:12px!important}
#workDetailView .modern-comments-list .comment-card{display:grid!important;grid-template-columns:44px 1fr auto!important;gap:12px!important;align-items:start!important;padding:14px!important;border:1px solid rgba(17,24,39,.08)!important;border-radius:18px!important;background:#fbfbfd!important;box-shadow:none!important}
body:not(.light) #workDetailView .modern-comments-list .comment-card{background:#121824!important;border-color:rgba(255,255,255,.08)!important}
#workDetailView .modern-comments-list .comment-avatar{width:44px!important;height:44px!important;border-radius:14px!important}
#workDetailView .modern-comments-list .comment-card h4{font-size:14px!important;margin:0 0 4px!important}
#workDetailView .modern-comments-list .comment-card time{font-size:11px!important;color:var(--muted)!important}
#workDetailView .modern-comments-list .comment-card p{font-size:14px!important;line-height:1.85!important;margin:8px 0 0!important;color:var(--text)!important}
#workDetailView .comment-form-shell textarea,#workDetailView .comments-compose-panel textarea,#workDetailView .comments-compose-panel input,#workDetailView .comments-head-actions select{border:1px solid rgba(17,24,39,.08)!important;border-radius:14px!important;background:#fff!important;color:var(--text)!important;box-shadow:none!important}
body:not(.light) #workDetailView .comment-form-shell textarea,body:not(.light) #workDetailView .comments-compose-panel textarea,body:not(.light) #workDetailView .comments-compose-panel input,body:not(.light) #workDetailView .comments-head-actions select{background:#0b111a!important;border-color:rgba(255,255,255,.08)!important;color:#f5f7fc!important}
#workDetailView .comment-form-shell textarea::placeholder,#workDetailView .comments-compose-panel textarea::placeholder{color:var(--muted)!important}
#workDetailView .comment-submit-row button,#workDetailView .comments-compose-panel .primary-button{border-radius:14px!important;padding:12px 16px!important}
#workDetailView .overview-vote-panel .recommendation-vote-boxes{gap:10px!important}
#workDetailView .overview-vote-panel .vote-box{border-radius:18px!important;overflow:hidden!important}
#workDetailView .modern-gallery-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important}
#workDetailView .modern-gallery-grid img{aspect-ratio:1/1!important;border-radius:14px!important;box-shadow:none!important}
#workDetailView .review-grid.modern-review-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
#workDetailView .modern-review-grid .review-card,#workDetailView .modern-editor-note{padding:18px!important;border-radius:16px!important;box-shadow:none!important}
#workDetailView .modern-editor-note p{font-size:15px!important;line-height:1.9!important}
#workDetailView .comments-empty,#workDetailView .modern-comments-list .comment-empty{border:1px dashed rgba(17,24,39,.12)!important;border-radius:18px!important;background:transparent!important;color:var(--muted)!important;padding:18px!important}
body:not(.light) #workDetailView .comments-empty,body:not(.light) #workDetailView .modern-comments-list .comment-empty{border-color:rgba(255,255,255,.1)!important}
@media (max-width:980px){#workDetailView .overview-desktop-layout,#workDetailView .information-desktop-layout,#workDetailView .announcement-dashboard-layout,#workDetailView .comments-desktop-layout{grid-template-columns:1fr!important}#workDetailView .overview-side-column,#workDetailView .information-side-column{position:static!important;top:auto!important}}
@media (max-width:740px){#workDetailView .tappy-detail-content{width:min(calc(100% - 18px),100%)!important;gap:14px!important}#workDetailView .tappy-icon-tabs{padding:8px!important;border-radius:24px!important}#workDetailView .tappy-icon-tabs button{min-height:72px!important;padding:12px 12px!important;border-radius:16px!important}#workDetailView .overview-panel,#workDetailView .overview-vote-panel,#workDetailView .information-panel,#workDetailView .announcement-card,#workDetailView .comment-shell,#workDetailView .comment-form-shell,#workDetailView .comments-feed-panel,#workDetailView .comments-compose-panel{padding:16px!important;border-radius:18px!important}#workDetailView .overview-dashboard-head h2,#workDetailView .information-dashboard-head h2,#workDetailView .announcement-dashboard-head h2,#workDetailView .comments-dashboard-head h2{font-size:21px!important}#workDetailView .overview-panel-head h3,#workDetailView .information-panel-head h3,#workDetailView .comments-feed-head h3{font-size:18px!important}#workDetailView .modern-series-synopsis,#workDetailView .overview-story{font-size:14px!important}#workDetailView .modern-series-tags span{font-size:12px!important;padding:8px 12px!important}#workDetailView .production-grid article{grid-template-columns:1fr!important;gap:4px!important;padding:12px 0!important}#workDetailView .modern-gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}#workDetailView .review-grid.modern-review-grid{grid-template-columns:1fr!important}#workDetailView .modern-comments-list .comment-card{grid-template-columns:38px 1fr!important;padding:12px!important}#workDetailView .modern-comments-list .comment-avatar{width:38px!important;height:38px!important;border-radius:12px!important}#workDetailView .modern-comments-list .comment-delete{grid-column:2!important;justify-self:start!important;margin-top:6px!important}}

/* ===== mi-work-layout-admin-editor-fix ===== */
/* Stable, non-overlapping work header */
#workDetailView.tappy-detail-view{padding-bottom:130px!important;overflow-x:hidden!important}
#workDetailView .tappy-detail-header{
  position:sticky!important;top:0!important;z-index:105!important;
  min-height:76px!important;height:76px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  padding:0 76px!important;border-bottom:1px solid var(--line)!important;
  background:rgba(255,255,255,.92)!important;backdrop-filter:blur(18px)!important;
}
body:not(.light) #workDetailView .tappy-detail-header{background:rgba(5,7,11,.92)!important}
#workDetailView .tappy-back-button{position:absolute!important;inset-inline-end:16px!important;top:14px!important;width:48px!important;height:48px!important;z-index:2!important}
#workDetailView .tappy-detail-header-actions{position:absolute!important;inset-inline-start:16px!important;top:14px!important;display:flex!important;gap:8px!important}
#workDetailView .tappy-header-icon{width:48px!important;height:48px!important}
#workDetailView .tappy-detail-brand{min-width:0!important;max-width:calc(100vw - 160px)!important;display:block!important;text-align:center!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
#workDetailView .detail-site-wordmark{display:block!important;color:#111827!important;font-family:var(--mi-font-display,"Cairo",sans-serif)!important;font-size:26px!important;font-weight:900!important;line-height:1!important;letter-spacing:-.035em!important;direction:ltr!important}
body:not(.light) #workDetailView .detail-site-wordmark{color:#fff!important}

/* Cover and summary spacing */
#workDetailView .tappy-hero-shell{position:relative!important;margin:0!important;padding:28px 18px 34px!important;min-height:auto!important;overflow:hidden!important}
#workDetailView .tappy-cover-frame{width:min(390px,76vw)!important;margin:0 auto!important;position:relative!important;z-index:2!important}
#workDetailView .tappy-cover-image{display:block!important;width:100%!important;aspect-ratio:5/7!important;object-fit:cover!important;border-radius:20px!important}
#workDetailView .tappy-share-button{top:16px!important;inset-inline-end:16px!important;z-index:5!important}
#workDetailView .work-admin-edit-button{position:absolute!important;top:16px!important;inset-inline-start:16px!important;z-index:5!important;display:inline-flex!important;align-items:center!important;gap:8px!important;padding:11px 14px!important;border:1px solid rgba(255,255,255,.18)!important;border-radius:14px!important;background:rgba(8,10,15,.76)!important;color:#fff!important;backdrop-filter:blur(14px)!important;font-size:12px!important;font-weight:800!important;box-shadow:0 12px 28px rgba(0,0,0,.2)!important}
#workDetailView .work-admin-edit-button.hidden{display:none!important}
#workDetailView .work-admin-edit-button svg{width:18px!important;height:18px!important;fill:none!important;stroke:currentColor!important;stroke-width:2!important;stroke-linecap:round!important;stroke-linejoin:round!important}
#workDetailView .cover-summary-panel{position:relative!important;z-index:3!important;margin:0 auto!important;padding:24px 18px 20px!important;max-width:980px!important;text-align:center!important;background:var(--bg)!important}
#workDetailView #modalTitle{max-width:920px!important;margin:0 auto 12px!important;color:var(--text)!important;font-family:var(--mi-font-display,"Cairo",sans-serif)!important;font-size:clamp(42px,7vw,76px)!important;font-weight:900!important;line-height:1.08!important;letter-spacing:-.045em!important;direction:ltr!important;unicode-bidi:plaintext!important;text-align:center!important;overflow-wrap:anywhere!important}
#workDetailView #modalCreatorLine{margin:8px auto 0!important;color:var(--muted)!important;font-size:15px!important;direction:ltr!important;unicode-bidi:plaintext!important}
#workDetailView #modalAltTitles{max-width:760px!important;margin:9px auto 0!important;color:var(--muted)!important;font-size:13px!important;line-height:1.8!important;overflow-wrap:anywhere!important}
#workDetailView #modalMetaLine{max-width:100%!important;margin:0 auto 6px!important;padding:2px 4px 5px!important;display:flex!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:center!important;gap:9px 13px!important;white-space:nowrap!important;overflow-x:auto!important;scrollbar-width:none!important}
#workDetailView #modalMetaLine::-webkit-scrollbar{display:none!important}
#workDetailView #modalMetaLine .meta-group{flex:0 0 auto!important}

/* Admin quick actions: hidden for everyone except detected admin */
#workDetailView .work-admin-toolbar{width:min(calc(100% - 24px),760px)!important;margin:0 auto 14px!important;padding:8px!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;border:1px solid var(--line)!important;border-radius:20px!important;background:var(--surface)!important;box-shadow:0 14px 34px rgba(0,0,0,.08)!important}
#workDetailView .work-admin-toolbar.hidden{display:none!important}
#workDetailView .work-admin-toolbar button{min-width:0!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;padding:11px 9px!important;border:0!important;border-radius:14px!important;background:var(--surface2)!important;color:var(--text)!important;font-size:11px!important;font-weight:800!important;transition:.2s ease!important}
#workDetailView .work-admin-toolbar button:hover{transform:translateY(-2px)!important;background:var(--text)!important;color:var(--bg)!important}
#workDetailView .work-admin-toolbar svg{width:17px!important;height:17px!important;fill:none!important;stroke:currentColor!important;stroke-width:2!important;stroke-linecap:round!important;stroke-linejoin:round!important}

/* Clear English names in all work cards */
.poster-copy h3,.shelf-work-card h3,.admin-work-row h3,.reading-item h3,.work-pick b,[data-open-work] h3,[data-open-work] span{direction:ltr!important;unicode-bidi:plaintext!important;text-align:left!important;font-family:var(--mi-font-display,"Cairo",sans-serif)!important;overflow-wrap:anywhere!important}
.poster-copy h3,.shelf-work-card h3{font-size:15px!important;line-height:1.45!important;font-weight:900!important}

/* Existing editor made easier to scan */
#workEditorInfoBlock,#workEditorMediaBlock,#workEditorAnnouncementBlock{scroll-margin-top:92px!important}
.editor-focus-pulse{animation:editorFocusPulse .95s ease!important}
@keyframes editorFocusPulse{0%{box-shadow:0 0 0 0 rgba(139,92,246,.38)}45%{box-shadow:0 0 0 7px rgba(139,92,246,.14)}100%{box-shadow:0 0 0 0 rgba(139,92,246,0)}}
.announcement-notification-note{display:flex!important;align-items:flex-start!important;gap:12px!important;margin:14px 0 18px!important;padding:14px 16px!important;border:1px solid rgba(34,197,94,.25)!important;border-radius:16px!important;background:rgba(34,197,94,.08)!important}
.announcement-notification-note>span{font-size:20px!important;line-height:1!important}
.announcement-notification-note strong{display:block!important;font-size:13px!important;margin-bottom:4px!important}
.announcement-notification-note p{margin:0!important;color:var(--muted)!important;font-size:10px!important;line-height:1.8!important}
#workForm input[name="title"]{font-family:Arial,sans-serif!important;font-size:16px!important;font-weight:700!important}

@media(max-width:740px){
 #workDetailView.tappy-detail-view{padding-bottom:118px!important}
 #workDetailView .tappy-detail-header{height:68px!important;min-height:68px!important;padding:0 68px!important}
 #workDetailView .tappy-back-button,#workDetailView .tappy-header-icon{width:44px!important;height:44px!important;top:12px!important}
 #workDetailView .tappy-back-button{inset-inline-end:12px!important}
 #workDetailView .tappy-detail-header-actions{inset-inline-start:12px!important;top:12px!important}
 #workDetailView .detail-site-wordmark{font-size:22px!important}
 #workDetailView .tappy-hero-shell{padding:18px 12px 26px!important}
 #workDetailView .tappy-cover-frame{width:min(360px,88vw)!important}
 #workDetailView .tappy-cover-image{border-radius:16px!important}
 #workDetailView .tappy-share-button{top:12px!important;inset-inline-end:12px!important}
 #workDetailView .work-admin-edit-button{top:12px!important;inset-inline-start:12px!important;width:44px!important;height:44px!important;padding:0!important;justify-content:center!important;border-radius:14px!important}
 #workDetailView .work-admin-edit-button span{display:none!important}
 #workDetailView .cover-summary-panel{padding:20px 12px 16px!important}
 #workDetailView #modalTitle{font-size:clamp(38px,12vw,58px)!important;line-height:1.1!important;margin-bottom:10px!important}
 #workDetailView #modalCreatorLine{font-size:13px!important}
 #workDetailView #modalAltTitles{font-size:12px!important}
 #workDetailView #modalMetaLine{justify-content:flex-start!important;width:100%!important}
 #workDetailView .work-admin-toolbar{grid-template-columns:1fr!important;width:calc(100% - 18px)!important}
 #workDetailView .work-admin-toolbar button{justify-content:flex-start!important;padding:12px 14px!important;font-size:12px!important}
 .poster-copy h3,.shelf-work-card h3{font-size:14px!important}
}

/* ===== mi-compact-polish-fix ===== */
/* ===== Compact polish fix ===== */
:root{
  --mi-compact-gap:14px;
}
#workDetailView .tappy-summary-panel{
  width:min(980px,92vw)!important;
  margin:22px auto 0!important;
  padding:0 4px!important;
  text-align:center!important;
}
#workDetailView #modalTitle{
  margin:0 auto 12px!important;
  max-width:100%!important;
  font-size:clamp(32px,5.4vw,56px)!important;
  line-height:1.18!important;
  letter-spacing:-.8px!important;
  word-break:break-word!important;
  overflow-wrap:anywhere!important;
}
#workDetailView #modalMetaLine{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  justify-content:center!important;
  gap:12px!important;
  margin:0 auto 12px!important;
  font-size:clamp(13px,1.5vw,18px)!important;
  color:var(--text)!important;
  line-height:1.7!important;
}
#workDetailView #modalCreatorLine,
#workDetailView #modalAltTitles{
  margin:0 auto!important;
  max-width:760px!important;
  color:var(--muted)!important;
}
#workDetailView #modalCreatorLine{font-size:clamp(12px,1.2vw,16px)!important;margin-bottom:10px!important}
#workDetailView #modalAltTitles{font-size:clamp(11px,1vw,14px)!important;line-height:1.9!important;margin-top:8px!important}
#workDetailView .cover-summary-panel{padding-bottom:0!important}
#workDetailView .series-tabs{margin-top:18px!important}

/* info panel - make first 3 consistent with lower icons */
#workDetailView .modern-info-page-head{margin-bottom:16px!important}
#workDetailView .modern-info-layout{gap:16px!important;align-items:start!important}
#workDetailView .modern-info-section{
  padding:18px!important;
  border-radius:18px!important;
}
#workDetailView .modern-info-summary{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:12px!important;
  margin-bottom:10px!important;
}
#workDetailView .modern-info-summary article{
  min-height:auto!important;
  padding:14px 16px!important;
  border:1px solid var(--line)!important;
  border-radius:16px!important;
  background:color-mix(in srgb, var(--surface) 82%, transparent)!important;
  display:grid!important;
  grid-template-columns:54px 1fr!important;
  align-items:center!important;
  gap:12px!important;
}
#workDetailView .modern-info-summary .summary-icon,
#workDetailView .modern-definition-list .def-icon{
  width:50px!important;height:50px!important;
  border-radius:16px!important;
  display:grid!important;place-items:center!important;
  border:1px solid var(--line)!important;
  background:color-mix(in srgb, var(--surface2) 92%, transparent)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;
  color:var(--text)!important;
}
#workDetailView .modern-info-summary .summary-icon svg,
#workDetailView .modern-definition-list .def-icon svg{width:24px!important;height:24px!important;stroke:currentColor!important;stroke-width:1.85!important;fill:none!important;stroke-linecap:round!important;stroke-linejoin:round!important}
#workDetailView .modern-info-summary article div,
#workDetailView .modern-definition-list div{min-width:0!important}
#workDetailView .modern-info-summary article small{display:block!important;font-size:12px!important;color:var(--muted)!important;margin-bottom:7px!important}
#workDetailView .modern-info-summary article strong{display:block!important;font-size:22px!important;line-height:1.25!important;color:var(--text)!important;word-break:break-word!important}
#workDetailView .modern-definition-list{gap:0!important;margin-top:8px!important}
#workDetailView .modern-definition-list>div{
  display:grid!important;
  grid-template-columns:54px 130px 1fr!important;
  gap:14px!important;
  align-items:center!important;
  padding:14px 0!important;
  border-top:1px solid var(--line)!important;
}
#workDetailView .modern-definition-list>div:first-child{border-top:0!important}
#workDetailView .modern-definition-list dt{display:contents!important}
#workDetailView .modern-definition-list dt > span{grid-column:1!important}
#workDetailView .modern-definition-list dt{font-size:0!important}
#workDetailView .modern-definition-list dd{margin:0!important;grid-column:3!important;font-size:19px!important;font-weight:700!important;color:var(--text)!important;line-height:1.5!important;text-align:right!important;word-break:break-word!important}
#workDetailView .modern-definition-list dd:before{content:attr(data-label);display:none}
#workDetailView .modern-definition-list>div::before{content:attr(data-label)}
/* labels separately using generated content fallback */
#workDetailView .modern-definition-list>div{position:relative}
#workDetailView .modern-definition-list>div > dt + dd{position:relative}
#workDetailView .modern-definition-list>div > dt{position:relative}
#workDetailView .modern-definition-list>div > dt::after{
  content:attr(data-title);
}
#workDetailView .modern-definition-list>div:nth-child(1)::after,
#workDetailView .modern-definition-list>div:nth-child(2)::after,
#workDetailView .modern-definition-list>div:nth-child(3)::after,
#workDetailView .modern-definition-list>div:nth-child(4)::after{
  position:absolute;right:68px;top:50%;transform:translateY(-50%);font-size:13px;color:var(--muted);font-weight:600;
}
#workDetailView .modern-definition-list>div:nth-child(1)::after{content:"المؤلف"}
#workDetailView .modern-definition-list>div:nth-child(2)::after{content:"الرسام"}
#workDetailView .modern-definition-list>div:nth-child(3)::after{content:"الاستوديو"}
#workDetailView .modern-definition-list>div:nth-child(4)::after{content:"الناشر"}

/* vote redesign */
#workDetailView .overview-desktop-layout{gap:16px!important}
#workDetailView .overview-panel,
#workDetailView .overview-vote-panel,
#workDetailView .announcement-card,
#workDetailView .comment-shell,
#workDetailView .comments-feed-panel,
#workDetailView .comments-compose-panel{padding:18px!important;border-radius:18px!important}
#workDetailView .work-vote-card{
  gap:14px!important;
}
#workDetailView .work-vote-heading{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:10px!important;
  margin-bottom:0!important;
}
#workDetailView .work-vote-heading h2{font-size:22px!important;margin:0!important}
#workDetailView .work-vote-heading p{font-size:13px!important;line-height:1.8!important;margin:4px 0 0!important}
#workDetailView .work-vote-current strong{font-size:15px!important}
#workDetailView .work-vote-current small{font-size:12px!important}
#workDetailView #recommendationVoteLine.recommendation-vote-boxes{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:10px!important;
  margin-top:2px!important;
}
#workDetailView .recommendation-vote-box{
  min-height:auto!important;
  padding:12px 10px!important;
  border-radius:14px!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  box-shadow:none!important;
}
#workDetailView .recommendation-vote-box::before{display:none!important}
#workDetailView .recommendation-vote-box strong{font-size:15px!important;line-height:1.35!important}
#workDetailView .recommendation-vote-box small,
#workDetailView .recommendation-vote-box .vote-box-meter,
#workDetailView .recommendation-vote-box .vote-box-percent{display:none!important}
#workDetailView .recommendation-vote-box .vote-box-emoji{font-size:20px!important}
#workDetailView #recommendationVoteResults{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:10px!important;
  margin-top:2px!important;
}
#workDetailView #recommendationVoteResults.hidden{display:none!important}
#workDetailView #recommendationVoteResults .vote-result{
  padding:0!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
}
#workDetailView #recommendationVoteResults .vote-result>div{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  margin:0!important;
  padding:10px 8px 0!important;
}
#workDetailView #recommendationVoteResults .vote-result span,
#workDetailView #recommendationVoteResults .vote-result strong{
  font-size:13px!important;
  font-weight:800!important;
}
#workDetailView #recommendationVoteResults .vote-result-track{display:none!important}
#workDetailView .work-vote-login-hint{margin-top:10px!important;padding:12px 14px!important;border-radius:14px!important}

/* review redesign */
#workDetailView .overview-panel-head{margin-bottom:14px!important}
#workDetailView .overview-panel-head span,
#workDetailView .overview-dashboard-head p,
#workDetailView .overview-dashboard-head .eyebrow{display:none!important}
#workDetailView .overview-dashboard-head h2,
#workDetailView .overview-panel-head h3,
#workDetailView .announcement-dashboard-head h2,
#workDetailView .comments-dashboard-head h2,
#workDetailView .modern-info-page-head h2{
  font-size:clamp(22px,2.5vw,34px)!important;
  line-height:1.3!important;
  letter-spacing:-.5px!important;
}
#workDetailView .modern-review-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px!important;
}
#workDetailView .modern-review-grid .review-card,
#workDetailView .modern-editor-note{
  padding:16px!important;
  border-radius:16px!important;
  border:1px solid var(--line)!important;
  background:color-mix(in srgb,var(--surface) 95%,transparent)!important;
  box-shadow:none!important;
}
#workDetailView .review-card-heading{margin-bottom:10px!important;gap:10px!important}
#workDetailView .review-indicator{width:10px!important;height:10px!important;border-radius:50%!important}
#workDetailView .review-card-title{font-size:16px!important}
#workDetailView .modern-review-grid .review-card>div:last-child,
#workDetailView .modern-editor-note p{font-size:14px!important;line-height:1.95!important;color:var(--muted)!important}
#workDetailView .modern-review-grid .review-card>div:last-child>div{padding-inline:0!important}
#workDetailView .modern-review-grid .review-card>div:last-child>div::before{top:.95em!important}
#workDetailView .modern-editor-note{margin-top:12px!important}
#workDetailView .modern-editor-note span{display:block!important;font-size:13px!important;color:var(--accent2)!important;margin-bottom:8px!important;font-weight:700!important}

/* tighter layout overall */
#workDetailView .tappy-detail-content{
  width:min(1180px,92vw)!important;
  margin:18px auto 70px!important;
  gap:16px!important;
}
#workDetailView .tappy-icon-tabs{
  padding:8px!important;
  border-radius:24px!important;
  gap:8px!important;
}
#workDetailView .tappy-icon-tabs button{min-height:82px!important;padding:14px 12px!important;border-radius:18px!important}
#workDetailView .modern-gallery-grid{gap:10px!important}
#workDetailView .modern-site-ratings,
#workDetailView .modern-collection-links{gap:10px!important}
#workDetailView .poster-copy h3,
#workDetailView .collection-card-copy h3{
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:unset!important;
  display:block!important;
  line-height:1.55!important;
}
#workDetailView .poster-copy,
#workDetailView .collection-card-copy{padding-top:10px!important}

/* tablets + phones */
@media (max-width: 1024px){
  #workDetailView .tappy-detail-content{width:min(100% - 28px,100%)!important}
  #workDetailView .modern-info-layout{grid-template-columns:1fr!important}
  #workDetailView .modern-info-summary{grid-template-columns:1fr!important}
  #workDetailView .modern-definition-list>div{grid-template-columns:48px 1fr!important;padding:12px 0 12px!important}
  #workDetailView .modern-definition-list>div:nth-child(1)::after,
  #workDetailView .modern-definition-list>div:nth-child(2)::after,
  #workDetailView .modern-definition-list>div:nth-child(3)::after,
  #workDetailView .modern-definition-list>div:nth-child(4)::after{right:60px!important;top:15px!important;transform:none!important}
  #workDetailView .modern-definition-list dd{grid-column:2!important;padding-top:24px!important;font-size:18px!important}
}
@media (max-width: 740px){
  #workDetailView .series-tabs{top:calc(var(--header) - 2px)!important}
  #workDetailView .tappy-summary-panel{width:min(calc(100% - 22px),100%)!important;margin-top:16px!important}
  #workDetailView #modalTitle{font-size:clamp(24px,8vw,34px)!important;max-width:100%!important}
  #workDetailView #modalMetaLine{font-size:13px!important;gap:10px!important;margin-bottom:10px!important}
  #workDetailView #modalCreatorLine{font-size:12px!important;margin-bottom:8px!important}
  #workDetailView .tappy-icon-tabs button{min-height:72px!important;padding:12px 8px!important}
  #workDetailView .detail-tab-label{font-size:12px!important}
  #workDetailView .overview-desktop-layout{display:grid!important;grid-template-columns:1fr!important}
  #workDetailView .overview-side-column{order:2!important}
  #workDetailView .overview-main-column{order:1!important}
  #workDetailView .modern-review-grid{grid-template-columns:1fr!important}
  #workDetailView #recommendationVoteLine.recommendation-vote-boxes{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}
  #workDetailView .recommendation-vote-box{padding:11px 6px!important}
  #workDetailView .recommendation-vote-box strong{font-size:13px!important}
  #workDetailView .recommendation-vote-box .vote-box-emoji{font-size:18px!important}
  #workDetailView #recommendationVoteResults{gap:4px!important}
  #workDetailView #recommendationVoteResults .vote-result>div{padding-top:8px!important;gap:4px!important;flex-wrap:wrap!important}
  #workDetailView #recommendationVoteResults .vote-result span,
  #workDetailView #recommendationVoteResults .vote-result strong{font-size:11px!important}
  #workDetailView .modern-info-section,
  #workDetailView .overview-panel,
  #workDetailView .overview-vote-panel{padding:16px!important;border-radius:16px!important}
  #workDetailView .modern-info-summary article{grid-template-columns:44px 1fr!important;padding:12px 13px!important}
  #workDetailView .modern-info-summary .summary-icon,
  #workDetailView .modern-definition-list .def-icon{width:44px!important;height:44px!important;border-radius:14px!important}
  #workDetailView .modern-info-summary article small{font-size:11px!important}
  #workDetailView .modern-info-summary article strong{font-size:18px!important}
  #workDetailView .modern-definition-list dd{font-size:16px!important;line-height:1.55!important}
}
@media (min-width: 741px){
  #workDetailView .tappy-summary-panel{padding-inline:12px!important}
}

/* ===== mi-compact-polish-fix-2 ===== */
#workDetailView .modern-definition-list>div{display:grid!important;grid-template-columns:minmax(150px,190px) 1fr!important;gap:16px!important;align-items:center!important;padding:14px 0!important;border-top:1px solid var(--line)!important}#workDetailView .modern-definition-list>div:first-child{border-top:0!important}#workDetailView .modern-definition-list dt{display:flex!important;align-items:center!important;gap:12px!important;font-size:14px!important;color:var(--muted)!important;line-height:1.55!important}#workDetailView .modern-definition-list dt>span{flex:0 0 auto!important}#workDetailView .modern-definition-list dt::after,#workDetailView .modern-definition-list>div::after,#workDetailView .modern-definition-list>div::before{content:none!important}#workDetailView .modern-definition-list dd{margin:0!important;grid-column:auto!important;font-size:19px!important;font-weight:700!important;color:var(--text)!important;line-height:1.55!important;text-align:right!important;word-break:break-word!important;padding-top:0!important}body.light #workDetailView .recommendation-vote-box{background:#fff!important}body.light #workDetailView #recommendationVoteResults .vote-result span{color:#6b7280!important}@media(max-width:1024px){#workDetailView .modern-definition-list>div{grid-template-columns:1fr!important;gap:8px!important}#workDetailView .modern-definition-list dt{font-size:13px!important}#workDetailView .modern-definition-list dd{font-size:17px!important}}

/* ===== mi-unified-info-tab-fix ===== */
#seriesInformation .modern-details-section{
  padding:20px!important;
}

#seriesInformation .unified-details-list{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:0 24px!important;
  border-top:1px solid var(--line)!important;
  border-bottom:1px solid var(--line)!important;
}

#seriesInformation .unified-detail-row{
  min-width:0!important;
  display:grid!important;
  grid-template-columns:48px minmax(0,1fr)!important;
  align-items:center!important;
  gap:14px!important;
  padding:16px 0!important;
  border-bottom:1px solid var(--line)!important;
  background:transparent!important;
}

#seriesInformation .unified-detail-row:nth-last-child(-n+2){
  border-bottom:0!important;
}

#seriesInformation .unified-detail-icon{
  width:44px!important;
  height:44px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:14px!important;
  border:1px solid var(--line)!important;
  background:var(--surface2)!important;
  color:var(--text)!important;
  box-shadow:none!important;
}

#seriesInformation .unified-detail-icon svg{
  width:21px!important;
  height:21px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.85!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

#seriesInformation .unified-detail-copy{
  min-width:0!important;
  text-align:right!important;
}

#seriesInformation .unified-detail-copy small{
  display:block!important;
  margin-bottom:5px!important;
  color:var(--muted)!important;
  font-size:11px!important;
  font-weight:700!important;
  line-height:1.4!important;
}

#seriesInformation .unified-detail-copy strong{
  display:block!important;
  color:var(--text)!important;
  font-size:16px!important;
  font-weight:850!important;
  line-height:1.55!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
}

body:not(.light) #seriesInformation .unified-detail-icon{
  background:#151a24!important;
  border-color:rgba(255,255,255,.09)!important;
}

#seriesInformation .modern-info-layout{
  grid-template-columns:minmax(0,1.55fr) minmax(270px,.75fr)!important;
  gap:24px!important;
}

#seriesInformation .modern-info-main,
#seriesInformation .modern-info-side{
  gap:20px!important;
}

#seriesInformation .modern-section-head{
  margin-bottom:12px!important;
}

#seriesInformation .modern-section-head h3{
  font-size:19px!important;
}

@media (max-width:980px){
  #seriesInformation .modern-info-layout{
    grid-template-columns:1fr!important;
  }

  #seriesInformation .unified-details-list{
    grid-template-columns:1fr!important;
    gap:0!important;
  }

  #seriesInformation .unified-detail-row:nth-last-child(-n+2){
    border-bottom:1px solid var(--line)!important;
  }

  #seriesInformation .unified-detail-row:last-child{
    border-bottom:0!important;
  }
}

@media (max-width:740px){
  #seriesInformation .modern-details-section{
    padding:16px!important;
  }

  #seriesInformation .unified-detail-row{
    grid-template-columns:42px minmax(0,1fr)!important;
    gap:12px!important;
    padding:14px 0!important;
  }

  #seriesInformation .unified-detail-icon{
    width:40px!important;
    height:40px!important;
    border-radius:13px!important;
  }

  #seriesInformation .unified-detail-icon svg{
    width:19px!important;
    height:19px!important;
  }

  #seriesInformation .unified-detail-copy small{
    font-size:10.5px!important;
  }

  #seriesInformation .unified-detail-copy strong{
    font-size:15px!important;
  }
}

/* ===== mi-droid-reading-font-fix ===== */
:root{
  /* لتغيير خط نصوص المراجعة والتعليقات لاحقًا، عدّل هذه القيمة فقط */
  --mi-font-reading:"Droid Arabic Kufi","DroidArabicKufiRegular","Droid Arabic Naskh","Cairo","Almarai",Tahoma,Arial,sans-serif;
}

/* الإيجابيات والسلبيات وملاحظة المحرر */
#workDetailView .modern-review-grid,
#workDetailView .modern-review-grid .review-card,
#workDetailView .modern-review-grid .review-card-title,
#workDetailView .modern-review-grid .review-card div,
#workDetailView .modern-editor-note,
#workDetailView .modern-editor-note span,
#workDetailView .modern-editor-note p,
#workDetailView #modalPositives,
#workDetailView #modalPositives > div,
#workDetailView #modalNegatives,
#workDetailView #modalNegatives > div{
  font-family:var(--mi-font-reading)!important;
}

#workDetailView .modern-review-grid .review-card-title{
  font-weight:700!important;
  letter-spacing:0!important;
}

#workDetailView #modalPositives > div,
#workDetailView #modalNegatives > div,
#workDetailView .modern-editor-note p{
  font-size:14px!important;
  line-height:2!important;
  font-weight:400!important;
  letter-spacing:0!important;
}

/* التعليقات وقواعد المشاركة وحقول الكتابة */
#workDetailView .comments-dashboard-head,
#workDetailView .comments-feed-panel,
#workDetailView .comments-compose-panel,
#workDetailView .modern-comments-list,
#workDetailView .modern-comments-list .comment-card,
#workDetailView .modern-comments-list .comment-card h4,
#workDetailView .modern-comments-list .comment-card p,
#workDetailView .modern-comments-list .comment-card time,
#workDetailView .community-guidelines,
#workDetailView .community-guidelines h3,
#workDetailView .community-guidelines li,
#workDetailView .comment-form-shell,
#workDetailView .comment-form-shell textarea,
#workDetailView .comments-compose-panel textarea,
#workDetailView .comments-compose-panel input,
#workDetailView .comments-head-actions select,
#workDetailView .comment-submit-row button{
  font-family:var(--mi-font-reading)!important;
  letter-spacing:0!important;
}

#workDetailView .modern-comments-list .comment-card h4{
  font-weight:700!important;
}

#workDetailView .modern-comments-list .comment-card p,
#workDetailView .community-guidelines li{
  font-size:14px!important;
  line-height:2!important;
  font-weight:400!important;
}

#workDetailView .community-guidelines h3{
  font-size:15px!important;
  font-weight:700!important;
}

#workDetailView .modern-comments-list .comment-card time{
  font-size:11px!important;
  font-weight:400!important;
}

@media(max-width:740px){
  #workDetailView #modalPositives > div,
  #workDetailView #modalNegatives > div,
  #workDetailView .modern-editor-note p,
  #workDetailView .modern-comments-list .comment-card p,
  #workDetailView .community-guidelines li{
    font-size:13px!important;
    line-height:1.95!important;
  }
}

/* ===== mi-review-modern-fix ===== */
/* ===== Review cards glitch fix + modern redesign ===== */
#workDetailView #seriesReview{
  overflow:hidden!important;
}
#workDetailView #seriesReview .overview-panel-head{
  margin-bottom:16px!important;
}
#workDetailView #seriesReview .overview-panel-head h3{
  font-family:var(--mi-font-display,"Cairo",sans-serif)!important;
  font-size:clamp(20px,2.2vw,28px)!important;
  line-height:1.25!important;
  letter-spacing:-.02em!important;
}
#workDetailView .review-grid.modern-review-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:14px!important;
  align-items:stretch!important;
}
#workDetailView .modern-review-grid .review-card{
  min-height:auto!important;
  height:auto!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-start!important;
  gap:14px!important;
  padding:20px!important;
  border-radius:24px!important;
  border:1px solid rgba(255,255,255,.08)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01)),
    rgba(10,14,22,.92)!important;
  box-shadow:0 14px 34px rgba(0,0,0,.14)!important;
  position:relative!important;
  overflow:hidden!important;
}
body.light #workDetailView .modern-review-grid .review-card{
  border-color:rgba(17,24,39,.08)!important;
  background:
    linear-gradient(180deg,#ffffff,#f8fafc)!important;
  box-shadow:0 14px 34px rgba(17,24,39,.06)!important;
}
#workDetailView .modern-review-grid .review-card::after{
  content:"";
  position:absolute;
  inset:auto -18% -38% auto;
  width:180px;
  height:180px;
  border-radius:50%;
  filter:blur(12px);
  opacity:.22;
  pointer-events:none;
}
#workDetailView .modern-review-grid .review-card.positive::after{
  background:radial-gradient(circle,rgba(56,217,169,.50),transparent 65%);
}
#workDetailView .modern-review-grid .review-card.negative::after{
  background:radial-gradient(circle,rgba(255,101,119,.42),transparent 65%);
}
#workDetailView .review-card-heading{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  margin:0!important;
}
#workDetailView .review-indicator{
  width:14px!important;
  height:14px!important;
  border-radius:50%!important;
  flex:0 0 14px!important;
}
#workDetailView .positive-indicator{
  background:#34d399!important;
  box-shadow:0 0 0 8px rgba(52,211,153,.12)!important;
}
#workDetailView .negative-indicator{
  background:#fb7185!important;
  box-shadow:0 0 0 8px rgba(251,113,133,.12)!important;
}
#workDetailView .review-card-title{
  font-family:var(--mi-font-display,"Cairo",sans-serif)!important;
  font-size:clamp(19px,2vw,24px)!important;
  font-weight:900!important;
  line-height:1.2!important;
  color:var(--text)!important;
  margin:0!important;
}
#workDetailView #modalPositives,
#workDetailView #modalNegatives{
  display:grid!important;
  gap:10px!important;
  margin:0!important;
  width:100%!important;
}
#workDetailView #modalPositives>div,
#workDetailView #modalNegatives>div{
  position:relative!important;
  display:block!important;
  margin:0!important;
  padding:12px 16px 12px 18px!important;
  padding-inline-start:18px!important;
  padding-inline-end:42px!important;
  width:100%!important;
  border-radius:16px!important;
  border:1px solid rgba(255,255,255,.07)!important;
  background:rgba(255,255,255,.035)!important;
  color:var(--text)!important;
  font-family:var(--mi-font-reading)!important;
  font-size:14px!important;
  font-weight:500!important;
  line-height:1.9!important;
  letter-spacing:0!important;
  text-wrap:pretty;
}
body.light #workDetailView #modalPositives>div,
body.light #workDetailView #modalNegatives>div{
  border-color:rgba(17,24,39,.07)!important;
  background:#f7f9fc!important;
  color:#2b3341!important;
}
#workDetailView #modalPositives>div::before,
#workDetailView #modalNegatives>div::before{
  content:""!important;
  position:absolute!important;
  inset-inline-end:14px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  width:14px!important;
  height:14px!important;
  border-radius:999px!important;
}
#workDetailView #modalPositives>div::before{
  background:radial-gradient(circle at 30% 30%,#a7f3d0,#10b981)!important;
  box-shadow:0 0 0 6px rgba(16,185,129,.12)!important;
}
#workDetailView #modalNegatives>div::before{
  background:radial-gradient(circle at 30% 30%,#fecdd3,#f43f5e)!important;
  box-shadow:0 0 0 6px rgba(244,63,94,.12)!important;
}
#workDetailView .modern-editor-note{
  margin-top:14px!important;
  min-height:auto!important;
  padding:18px 20px!important;
  border-radius:22px!important;
  border:1px solid rgba(139,92,246,.16)!important;
  background:
    radial-gradient(circle at 94% 10%,rgba(139,92,246,.16),transparent 30%),
    linear-gradient(180deg,rgba(139,92,246,.08),rgba(139,92,246,.04))!important;
  box-shadow:none!important;
}
body.light #workDetailView .modern-editor-note{
  border-color:rgba(139,92,246,.16)!important;
  background:
    radial-gradient(circle at 94% 10%,rgba(139,92,246,.14),transparent 28%),
    linear-gradient(180deg,#faf7ff,#f5f1ff)!important;
}
#workDetailView .modern-editor-note>span{
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
  font-family:var(--mi-font-display,"Cairo",sans-serif)!important;
  font-size:16px!important;
  font-weight:900!important;
  color:#a78bfa!important;
  margin:0 0 10px!important;
}
#workDetailView .modern-editor-note>span::before{
  content:"";
  font-size:14px;
  line-height:1;
}
#workDetailView .modern-editor-note p{
  margin:0!important;
  color:var(--text)!important;
  opacity:.92!important;
  font-family:var(--mi-font-reading)!important;
  font-size:14px!important;
  line-height:2!important;
  font-weight:500!important;
}
@media (max-width: 1024px){
  #workDetailView .review-grid.modern-review-grid{
    grid-template-columns:1fr!important;
  }
}
@media (max-width: 740px){
  #workDetailView .modern-review-grid .review-card{
    padding:16px!important;
    border-radius:20px!important;
  }
  #workDetailView .review-card-title{
    font-size:18px!important;
  }
  #workDetailView #modalPositives>div,
  #workDetailView #modalNegatives>div,
  #workDetailView .modern-editor-note p{
    font-size:13px!important;
    line-height:1.95!important;
  }
}

/* ===== mi-star-comments-reactions ===== */
/* Remove the obsolete recommendation layout entirely. */
#seriesOverview .overview-desktop-layout{
  grid-template-columns:minmax(0,1fr)!important;
}
#seriesOverview .overview-side-column,
#workDetailView .work-vote-card,
#recommendationReasonModal{
  display:none!important;
}

/* Rating summary in comments header. */
#workDetailView .comments-dashboard-head{
  align-items:center!important;
  gap:18px!important;
}
#workDetailView .comments-head-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:10px!important;
  flex-wrap:wrap!important;
}
#workDetailView .comment-rating-summary{
  min-width:196px;
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:"score stars" "score count";
  align-items:center;
  gap:2px 10px;
  padding:10px 14px;
  border:1px solid var(--line);
  border-radius:18px;
  background:color-mix(in srgb,var(--surface) 92%,transparent);
  box-shadow:0 12px 28px rgba(0,0,0,.08);
}
#workDetailView .comment-rating-score{
  grid-area:score;
  display:flex;
  align-items:baseline;
  gap:3px;
  direction:ltr;
}
#workDetailView .comment-rating-score strong{
  font-family:Arial,sans-serif!important;
  font-size:28px!important;
  line-height:1!important;
  color:var(--text)!important;
}
#workDetailView .comment-rating-score span{
  font-size:11px;
  color:var(--muted);
}
#workDetailView .comment-rating-average-stars{grid-area:stars}
#workDetailView .comment-rating-summary>small{
  grid-area:count;
  color:var(--muted)!important;
  font-size:10px!important;
}

/* Five-star composer. */
#workDetailView .star-review-composer{
  display:grid!important;
  gap:14px!important;
}
#workDetailView .comment-rating-picker{
  position:relative;
  overflow:hidden;
  padding:16px;
  border:1px solid var(--line);
  border-radius:20px;
  background:
    radial-gradient(circle at 90% 0%,rgba(250,204,21,.12),transparent 38%),
    color-mix(in srgb,var(--surface2) 72%,transparent);
  transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease;
}
#workDetailView .comment-rating-picker.has-rating{
  border-color:rgba(250,204,21,.34);
  box-shadow:0 16px 34px rgba(250,204,21,.08);
}
#workDetailView .comment-rating-picker.is-locked{opacity:.58}
#workDetailView .comment-rating-picker-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
#workDetailView .comment-rating-picker-head strong{
  display:block;
  color:var(--text)!important;
  font-size:16px!important;
  font-weight:900!important;
}
#workDetailView .comment-rating-picker-head small{
  display:block;
  margin-top:4px;
  color:var(--muted)!important;
  font-size:10px!important;
}
#workDetailView .selected-comment-rating-label{
  padding:7px 10px;
  border-radius:999px;
  background:var(--surface);
  border:1px solid var(--line);
  color:var(--muted);
  font-size:10px;
  white-space:nowrap;
}
#workDetailView .comment-rating-picker.has-rating .selected-comment-rating-label{
  color:#e6a900;
  border-color:rgba(250,204,21,.32);
  background:rgba(250,204,21,.08);
}
#workDetailView .comment-star-picker{
  display:flex;
  direction:ltr;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:4px 0;
}
#workDetailView .comment-star-picker button{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid var(--line);
  border-radius:15px;
  background:var(--surface);
  color:#6f7685;
  box-shadow:none;
  transition:transform .2s cubic-bezier(.2,.8,.2,1),color .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease;
}
#workDetailView .comment-star-picker button svg{
  width:24px;
  height:24px;
  fill:transparent;
  stroke:currentColor;
  stroke-width:1.7;
  transition:fill .2s ease,transform .2s ease;
}
#workDetailView .comment-star-picker button:hover,
#workDetailView .comment-star-picker button.hovered,
#workDetailView .comment-star-picker button.active{
  color:#f4b400;
  border-color:rgba(250,204,21,.34);
  background:rgba(250,204,21,.10);
  transform:translateY(-3px) scale(1.04);
  box-shadow:0 12px 24px rgba(250,204,21,.10);
}
#workDetailView .comment-star-picker button:hover svg,
#workDetailView .comment-star-picker button.hovered svg,
#workDetailView .comment-star-picker button.active svg{
  fill:currentColor;
  transform:rotate(-5deg) scale(1.08);
}
#workDetailView .comment-star-picker.rating-confirmed button.active{
  animation:starConfirm .55s ease both;
}
#workDetailView .comment-star-picker.rating-confirmed button.active:nth-child(2){animation-delay:.04s}
#workDetailView .comment-star-picker.rating-confirmed button.active:nth-child(3){animation-delay:.08s}
#workDetailView .comment-star-picker.rating-confirmed button.active:nth-child(4){animation-delay:.12s}
#workDetailView .comment-star-picker.rating-confirmed button.active:nth-child(5){animation-delay:.16s}
#workDetailView .comment-star-picker.rating-required-shake{animation:ratingShake .5s ease}
@keyframes starConfirm{0%{transform:scale(.75) rotate(-12deg)}55%{transform:scale(1.18) rotate(5deg)}100%{transform:scale(1)}}
@keyframes ratingShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}50%{transform:translateX(7px)}75%{transform:translateX(-4px)}}

#workDetailView .comment-text-shell{
  display:grid!important;
  gap:0!important;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--surface);
  transition:border-color .24s ease,box-shadow .24s ease;
}
#workDetailView .comment-text-shell:focus-within{
  border-color:rgba(139,92,246,.40);
  box-shadow:0 0 0 4px rgba(139,92,246,.08);
}
#workDetailView .comment-text-shell textarea{
  min-height:144px;
  padding:16px!important;
  border:0!important;
  border-radius:0!important;
  resize:vertical;
  background:transparent!important;
}
#workDetailView .comment-text-shell textarea:disabled{
  cursor:not-allowed;
  opacity:.62;
}
#workDetailView .comment-composer-actions{
  padding:10px;
  border-top:1px solid var(--line);
  background:color-mix(in srgb,var(--surface2) 72%,transparent);
}
#workDetailView #submitRatedComment{
  min-width:178px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  transition:transform .2s ease,opacity .2s ease,box-shadow .2s ease;
}
#workDetailView #submitRatedComment:not(:disabled):hover{
  transform:translateY(-2px);
  box-shadow:0 13px 26px rgba(139,92,246,.22);
}
#workDetailView #submitRatedComment:disabled{opacity:.42;cursor:not-allowed}
#workDetailView .rated-comment-spinner{
  display:none;
  width:16px;
  height:16px;
  border:2px solid currentColor;
  border-left-color:transparent;
  border-radius:50%;
  animation:commentSpinner .7s linear infinite;
}
#workDetailView #submitRatedComment.is-loading .rated-comment-spinner{display:block}
@keyframes commentSpinner{to{transform:rotate(360deg)}}
#workDetailView .star-review-composer.comment-published{animation:commentPublished .75s ease}
@keyframes commentPublished{0%{transform:scale(1)}38%{transform:scale(1.015);filter:drop-shadow(0 0 18px rgba(139,92,246,.18))}100%{transform:scale(1)}}

/* Static stars. */
#workDetailView .comment-static-stars{
  display:inline-flex;
  direction:ltr;
  align-items:center;
  gap:2px;
}
#workDetailView .comment-static-stars i{
  display:inline-grid;
  place-items:center;
  width:15px;
  height:15px;
  color:#616877;
}
#workDetailView .comment-static-stars svg{
  width:100%;
  height:100%;
  fill:transparent;
  stroke:currentColor;
  stroke-width:1.8;
}
#workDetailView .comment-static-stars i.active{color:#f4b400}
#workDetailView .comment-static-stars i.active svg{fill:currentColor}
#workDetailView .average-stars i{width:13px;height:13px}

/* Modern rated comments. */
#workDetailView .modern-comments-list{
  display:grid!important;
  gap:12px!important;
}
#workDetailView .rated-comment-card{
  grid-template-columns:46px minmax(0,1fr)!important;
  padding:16px!important;
  border-radius:22px!important;
  animation:commentEnter .52s ease both;
  animation-delay:var(--comment-delay,0ms);
}
@keyframes commentEnter{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
#workDetailView .rated-comment-card .comment-card-content{min-width:0}
#workDetailView .comment-card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
#workDetailView .comment-card-top h4{margin:0 0 3px!important}
#workDetailView .comment-rating-badge{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:7px;
  padding:6px 9px;
  border:1px solid rgba(250,204,21,.20);
  border-radius:999px;
  background:rgba(250,204,21,.07);
}
#workDetailView .comment-rating-badge b{
  font-family:Arial,sans-serif;
  font-size:11px;
  color:#d89c00;
}
#workDetailView .rated-comment-card p{
  margin:12px 0 14px!important;
  color:var(--text)!important;
  font-size:14px!important;
  line-height:1.95!important;
}
#workDetailView .comment-card-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
#workDetailView .comment-reactions{
  display:flex;
  align-items:center;
  direction:ltr;
  gap:7px;
}
#workDetailView .comment-reaction-button{
  min-width:56px;
  height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 11px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--surface);
  color:var(--muted);
  transition:transform .2s ease,color .2s ease,background .2s ease,border-color .2s ease;
}
#workDetailView .comment-reaction-button svg{
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
#workDetailView .comment-reaction-button span{
  font-family:Arial,sans-serif;
  font-size:12px;
  font-weight:700;
}
#workDetailView .comment-reaction-button:hover{transform:translateY(-2px)}
#workDetailView .like-button.active{
  color:#10b981;
  border-color:rgba(16,185,129,.30);
  background:rgba(16,185,129,.10);
}
#workDetailView .dislike-button.active{
  color:#f43f5e;
  border-color:rgba(244,63,94,.28);
  background:rgba(244,63,94,.09);
}
#workDetailView .comment-reaction-button.reaction-pop{animation:reactionPop .48s ease}
@keyframes reactionPop{0%{transform:scale(1)}40%{transform:scale(1.18) rotate(-5deg)}100%{transform:scale(1)}}
#workDetailView .rated-comment-card .comment-delete{
  position:static!important;
  min-width:auto!important;
  height:34px!important;
  padding:0 12px!important;
  border-radius:999px!important;
}

@media(max-width:980px){
 #workDetailView .comments-dashboard-head{
  align-items:flex-start!important;
  flex-direction:column!important;
 }
 #workDetailView .comments-head-actions{width:100%!important;justify-content:flex-start!important}
}
@media(max-width:740px){
 #workDetailView .comment-rating-summary{min-width:0;flex:1}
 #workDetailView .comment-star-picker{gap:5px}
 #workDetailView .comment-star-picker button{width:42px;height:42px;border-radius:14px}
 #workDetailView .comment-star-picker button svg{width:22px;height:22px}
 #workDetailView .comment-rating-picker-head{flex-direction:column}
 #workDetailView .selected-comment-rating-label{align-self:flex-start}
 #workDetailView .rated-comment-card{grid-template-columns:38px minmax(0,1fr)!important;padding:13px!important;border-radius:18px!important}
 #workDetailView .comment-card-top{flex-direction:column;gap:8px}
 #workDetailView .comment-rating-badge{align-self:flex-start}
 #workDetailView .comment-card-footer{align-items:flex-start;flex-wrap:wrap}
 #workDetailView #submitRatedComment{min-width:0;width:100%}
}
@media(prefers-reduced-motion:reduce){
 #workDetailView .comment-star-picker *,
 #workDetailView .rated-comment-card,
 #workDetailView .comment-reaction-button,
 #workDetailView .star-review-composer{animation:none!important;transition:none!important}
}

/* ===== mi-star-comments-polish-fix ===== */
#workDetailView .comments-desktop-layout{
  grid-template-columns:minmax(0,1.18fr) minmax(320px,.82fr)!important;
  gap:18px!important;
  align-items:start!important;
}
#workDetailView .comments-feed-panel,
#workDetailView .comments-compose-panel{
  border:1px solid color-mix(in srgb,var(--line) 90%,rgba(139,92,246,.18))!important;
  border-radius:26px!important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 92%,transparent),color-mix(in srgb,var(--surface2) 48%,transparent))!important;
  box-shadow:0 22px 60px rgba(0,0,0,.14)!important;
}
#workDetailView .comments-feed-panel{padding:22px!important;min-height:420px!important}
#workDetailView .comments-compose-panel{padding:20px!important;top:132px!important}
#workDetailView .compose-panel-head{margin-bottom:14px!important}
#workDetailView .compose-panel-head .avatar{
  width:54px!important;height:54px!important;border-radius:18px!important;
  box-shadow:0 14px 30px rgba(139,92,246,.18)!important;
}
#workDetailView .compose-panel-head strong{font-size:20px!important;line-height:1.3!important}
#workDetailView .compose-panel-head small{font-size:11px!important}
#workDetailView .comment-auth-notice{margin-bottom:12px!important;border-radius:18px!important}
#workDetailView .star-review-composer{gap:12px!important}
#workDetailView .comment-rating-picker{
  padding:18px!important;
  border-radius:24px!important;
  border:1px solid rgba(250,204,21,.18)!important;
  background:
    radial-gradient(circle at 92% 8%,rgba(250,204,21,.14),transparent 34%),
    linear-gradient(180deg,color-mix(in srgb,var(--surface2) 68%,transparent),color-mix(in srgb,var(--surface) 94%,transparent))!important;
}
#workDetailView .comment-rating-picker-head{margin-bottom:12px!important}
#workDetailView .comment-rating-picker-head strong{font-size:18px!important}
#workDetailView .comment-rating-picker-head small{font-size:11px!important}
#workDetailView .selected-comment-rating-label{font-size:11px!important;padding:8px 12px!important}
#workDetailView .comment-star-picker{justify-content:flex-start!important;flex-wrap:wrap!important;gap:10px!important;padding:2px 0!important}
#workDetailView .comment-star-picker button{
  width:52px!important;height:52px!important;border-radius:18px!important;
  background:color-mix(in srgb,var(--surface) 94%,transparent)!important;
}
#workDetailView .comment-star-picker button svg{width:26px!important;height:26px!important}
#workDetailView .comment-text-shell{
  border-radius:24px!important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 96%,transparent),color-mix(in srgb,var(--surface2) 56%,transparent))!important;
}
#workDetailView .comment-text-shell textarea{
  min-height:160px!important;
  padding:18px!important;
  font-size:14px!important;
  line-height:2!important;
}
#workDetailView .comment-text-shell textarea:disabled,
#workDetailView .comment-text-shell textarea[readonly]{
  pointer-events:none!important;
  user-select:none!important;
  opacity:.58!important;
}
#workDetailView .comment-composer-actions{
  padding:12px 14px!important;
  align-items:center!important;
  gap:12px!important;
}
#workDetailView .comment-composer-actions small{font-size:11px!important}
#workDetailView #submitRatedComment{min-width:205px!important;min-height:48px!important;border-radius:15px!important}
#workDetailView .community-guidelines{
  margin-top:14px!important;
  border-radius:18px!important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface2) 74%,transparent),color-mix(in srgb,var(--surface) 92%,transparent))!important;
}
#workDetailView .community-guidelines>span{font-size:12px!important}
#workDetailView .community-guidelines li{font-size:11px!important}
#workDetailView .modern-comments-list{gap:10px!important}
#workDetailView .rated-comment-card{
  padding:15px!important;
  border-radius:20px!important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 95%,transparent),color-mix(in srgb,var(--surface2) 60%,transparent))!important;
}
#workDetailView .comment-card-top{gap:10px!important}
#workDetailView .comment-card-top h4{font-size:14px!important}
#workDetailView .rated-comment-card p{margin:10px 0 12px!important;font-size:14px!important;line-height:1.95!important}
#workDetailView .comment-rating-badge{padding:7px 10px!important}
#workDetailView .comment-card-footer{gap:12px!important;flex-wrap:wrap!important}
#workDetailView .comment-reaction-button{height:38px!important;min-width:60px!important;border-radius:999px!important}
#workDetailView .comment-delete{height:36px!important}
@media(max-width:980px){
  #workDetailView .comments-desktop-layout{grid-template-columns:1fr!important}
  #workDetailView .comments-compose-panel{position:static!important;order:-1!important}
}
@media(max-width:740px){
  #workDetailView .comments-feed-panel,
  #workDetailView .comments-compose-panel{padding:16px!important;border-radius:22px!important}
  #workDetailView .compose-panel-head strong{font-size:18px!important}
  #workDetailView .comment-star-picker{justify-content:center!important;gap:8px!important}
  #workDetailView .comment-star-picker button{width:46px!important;height:46px!important;border-radius:16px!important}
  #workDetailView .comment-text-shell textarea{min-height:132px!important;padding:16px!important}
  #workDetailView .comment-composer-actions{flex-direction:column!important;align-items:stretch!important}
  #workDetailView #submitRatedComment{width:100%!important;min-width:0!important}
}
/* Header logo: show exactly one theme asset. */
.exact-logo .instagram-brand-image{max-width:100%!important}
.exact-logo .brand-logo-dark{display:none!important}
body:not(.light) .exact-logo .brand-logo-light{display:none!important}
body:not(.light) .exact-logo .brand-logo-dark{display:block!important}

/* ===== mi-comments-consistency-v2 ===== */
/* Strong final override for comments composer to remove any white glitches */
#workDetailView .comments-compose-panel,
#workDetailView .comments-feed-panel{
  background:
    radial-gradient(circle at top right, rgba(139,92,246,.08), transparent 34%),
    linear-gradient(180deg, color-mix(in srgb,var(--surface) 94%,transparent), color-mix(in srgb,var(--surface2) 62%,transparent)) !important;
  border:1px solid color-mix(in srgb,var(--line) 94%, rgba(139,92,246,.12)) !important;
  box-shadow:0 18px 50px rgba(0,0,0,.18) !important;
}
#workDetailView .star-review-composer,
#workDetailView .modern-comment-composer,
#workDetailView .modern-comment-composer > label,
#workDetailView .modern-comment-composer > section{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  margin:0 !important;
}
#workDetailView .comment-rating-picker,
#workDetailView .comment-text-shell,
#workDetailView .community-guidelines,
#workDetailView .comment-auth-notice{
  background:
    linear-gradient(180deg, color-mix(in srgb,var(--surface) 96%, transparent), color-mix(in srgb,var(--surface2) 78%, transparent)) !important;
  border:1px solid color-mix(in srgb,var(--line) 88%, rgba(139,92,246,.10)) !important;
  border-radius:24px !important;
  box-shadow:0 10px 28px rgba(0,0,0,.10) !important;
}
#workDetailView .comment-rating-picker{
  padding:18px !important;
  isolation:isolate;
}
#workDetailView .comment-rating-picker::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 88% 10%, rgba(250,204,21,.10), transparent 28%);
  pointer-events:none;
  z-index:-1;
}
#workDetailView .comment-star-picker{
  margin-top:2px !important;
}
#workDetailView .comment-star-picker button{
  background:color-mix(in srgb,var(--surface) 97%, transparent) !important;
  border:1px solid color-mix(in srgb,var(--line) 90%, rgba(250,204,21,.16)) !important;
}
#workDetailView .comment-text-shell{
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
}
#workDetailView .comment-text-shell textarea{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  color:var(--text) !important;
}
#workDetailView .comment-text-shell textarea:focus{
  background:transparent !important;
  box-shadow:none !important;
}
#workDetailView .comment-text-shell textarea:disabled,
#workDetailView .comment-text-shell textarea[readonly]{
  opacity:.5 !important;
  pointer-events:none !important;
}
#workDetailView .comment-composer-actions{
  background:color-mix(in srgb,var(--surface2) 86%, transparent) !important;
  border-top:1px solid color-mix(in srgb,var(--line) 88%, rgba(139,92,246,.08)) !important;
}
#workDetailView .community-guidelines{
  margin-top:12px !important;
}
#workDetailView .community-guidelines ul{
  margin:10px 0 0 !important;
}
#workDetailView .comments-feed-head,
#workDetailView .compose-panel-head{
  margin-bottom:14px !important;
}
#workDetailView .compose-panel-head{
  align-items:center !important;
}
#workDetailView .compose-panel-head strong{
  font-size:22px !important;
  line-height:1.3 !important;
}
#workDetailView .compose-panel-head small{
  font-size:12px !important;
}
body:not(.light) #workDetailView .comments-compose-panel,
body:not(.light) #workDetailView .comments-feed-panel,
body:not(.light) #workDetailView .comment-rating-picker,
body:not(.light) #workDetailView .comment-text-shell,
body:not(.light) #workDetailView .community-guidelines,
body:not(.light) #workDetailView .comment-auth-notice{
  background:
    linear-gradient(180deg, rgba(10,14,24,.96), rgba(11,17,28,.92)) !important;
}
body.light #workDetailView .comments-compose-panel,
body.light #workDetailView .comments-feed-panel,
body.light #workDetailView .comment-rating-picker,
body.light #workDetailView .comment-text-shell,
body.light #workDetailView .community-guidelines,
body.light #workDetailView .comment-auth-notice{
  background:linear-gradient(180deg, #ffffff, #f5f7fb) !important;
}
@media (max-width:980px){
  #workDetailView .comments-desktop-layout{
    gap:14px !important;
  }
  #workDetailView .comments-compose-panel,
  #workDetailView .comments-feed-panel{
    padding:16px !important;
  }
}
@media (max-width:740px){
  #workDetailView .comments-compose-panel,
  #workDetailView .comments-feed-panel,
  #workDetailView .comment-rating-picker,
  #workDetailView .comment-text-shell,
  #workDetailView .community-guidelines{
    border-radius:20px !important;
  }
  #workDetailView .compose-panel-head strong{
    font-size:20px !important;
  }
  #workDetailView .comment-star-picker{
    justify-content:center !important;
  }
}

/* ===== mi-comments-premium-v3 ===== */
/* Premium redesign for comments section */
#seriesDiscussion.work-comments-dashboard,
#seriesDiscussion .work-comments-dashboard{position:relative}
#workDetailView .work-comments-dashboard{
  gap:18px !important;
}
#workDetailView .comments-dashboard-head{
  display:flex !important;
  align-items:flex-end !important;
  justify-content:space-between !important;
  flex-wrap:wrap !important;
  gap:14px !important;
  padding:0 2px 2px !important;
  margin-bottom:16px !important;
}
#workDetailView .comments-dashboard-head h2{
  margin:0 !important;
  font-family:"Bulka","Droid Arabic Kufi",Tahoma,sans-serif !important;
  font-size:clamp(24px,2.2vw,34px) !important;
  line-height:1.15 !important;
  letter-spacing:-.02em !important;
}
#workDetailView .comments-dashboard-head > div:first-child::after{
  content:"التقييمات وآراء القراء";
  display:block;
  color:var(--muted);
  font-size:12px;
  margin-top:8px;
}
#workDetailView .comments-head-actions{
  display:grid !important;
  grid-template-columns:auto auto minmax(160px,220px) !important;
  gap:10px !important;
  align-items:stretch !important;
}
#workDetailView .comment-rating-summary,
#workDetailView .comments-count-badge,
#workDetailView #commentsSort{
  border:1px solid color-mix(in srgb,var(--line) 92%, rgba(139,92,246,.10)) !important;
  background:linear-gradient(180deg, color-mix(in srgb,var(--surface) 97%, transparent), color-mix(in srgb,var(--surface2) 84%, transparent)) !important;
  box-shadow:0 10px 25px rgba(0,0,0,.08) !important;
}
#workDetailView .comment-rating-summary{
  min-width:238px !important;
  display:grid !important;
  gap:6px !important;
  padding:12px 14px !important;
  border-radius:20px !important;
}
#workDetailView .comment-rating-score{
  display:flex !important;
  align-items:flex-end !important;
  gap:5px !important;
}
#workDetailView .comment-rating-score strong{
  font-family:Arial,sans-serif !important;
  font-size:26px !important;
  line-height:1 !important;
}
#workDetailView .comment-rating-score span{
  font-size:16px !important;
  color:var(--muted) !important;
  margin-bottom:2px !important;
}
#workDetailView .comment-rating-average-stars{
  display:flex !important;
  gap:3px !important;
  color:#fbbf24 !important;
}
#workDetailView .comment-rating-average-stars svg{
  width:16px !important;
  height:16px !important;
}
#workDetailView .comment-rating-summary small{
  font-size:12px !important;
  color:var(--muted) !important;
}
#workDetailView .comments-count-badge{
  display:grid !important;
  place-items:center !important;
  min-width:110px !important;
  padding:0 16px !important;
  border-radius:18px !important;
  color:var(--text) !important;
  font-size:14px !important;
  font-weight:800 !important;
}
#workDetailView #commentsSort{
  min-width:170px !important;
  border-radius:18px !important;
  padding:0 44px 0 14px !important;
  color:var(--text) !important;
  outline:0 !important;
}
#workDetailView .comments-desktop-layout{
  display:grid !important;
  grid-template-columns:minmax(0,1.35fr) minmax(320px,.9fr) !important;
  gap:18px !important;
  align-items:start !important;
}
#workDetailView .comments-feed-panel,
#workDetailView .comments-compose-panel{
  position:relative !important;
  overflow:hidden !important;
  border-radius:28px !important;
  padding:22px !important;
  background:
    radial-gradient(circle at top right, rgba(139,92,246,.07), transparent 30%),
    linear-gradient(180deg, color-mix(in srgb,var(--surface) 98%, transparent), color-mix(in srgb,var(--surface2) 82%, transparent)) !important;
  border:1px solid color-mix(in srgb,var(--line) 90%, rgba(139,92,246,.10)) !important;
  box-shadow:0 18px 46px rgba(0,0,0,.11) !important;
}
#workDetailView .comments-feed-panel::before,
#workDetailView .comments-compose-panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.03), transparent 28%);
}
#workDetailView .comments-feed-head,
#workDetailView .compose-panel-head{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  padding-bottom:14px !important;
  margin-bottom:16px !important;
  border-bottom:1px solid color-mix(in srgb,var(--line) 88%, rgba(139,92,246,.08)) !important;
}
#workDetailView .comments-feed-head h3,
#workDetailView .compose-panel-head strong{
  margin:0 !important;
  font-family:"Bulka","Droid Arabic Kufi",Tahoma,sans-serif !important;
  font-size:24px !important;
  line-height:1.2 !important;
}
#workDetailView .comments-feed-head span,
#workDetailView .compose-panel-head small{
  color:var(--muted) !important;
  font-size:12px !important;
  line-height:1.7 !important;
}
#workDetailView .compose-panel-head{
  justify-content:flex-start !important;
}
#workDetailView .compose-panel-head .avatar,
#workDetailView #commentAvatar{
  width:46px !important;
  height:46px !important;
  min-width:46px !important;
  border-radius:16px !important;
  display:grid !important;
  place-items:center !important;
  background:linear-gradient(135deg,var(--accent),#5eead4) !important;
  color:#fff !important;
  font-size:18px !important;
  font-weight:800 !important;
  box-shadow:0 12px 28px rgba(139,92,246,.22) !important;
}
#workDetailView .comment-auth-notice{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  padding:14px 16px !important;
  margin-bottom:14px !important;
}
#workDetailView .comment-auth-notice button{
  border:0 !important;
  border-radius:14px !important;
  padding:10px 14px !important;
  background:linear-gradient(135deg,var(--accent),#7c6cff) !important;
  color:#fff !important;
  font-weight:800 !important;
}
#workDetailView .comment-rating-picker,
#workDetailView .comment-text-shell,
#workDetailView .community-guidelines{
  position:relative !important;
  overflow:hidden !important;
  border-radius:24px !important;
}
#workDetailView .comment-rating-picker-head{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:12px !important;
  margin-bottom:14px !important;
}
#workDetailView .comment-rating-picker-head strong{
  display:block !important;
  font-size:17px !important;
  margin-bottom:4px !important;
}
#workDetailView .comment-rating-picker-head small{
  font-size:12px !important;
  color:var(--muted) !important;
}
#workDetailView .selected-comment-rating-label{
  display:inline-flex !important;
  align-items:center !important;
  min-height:36px !important;
  padding:0 12px !important;
  border-radius:999px !important;
  background:rgba(250,204,21,.12) !important;
  border:1px solid rgba(250,204,21,.18) !important;
  color:#fbbf24 !important;
  font-size:12px !important;
  font-weight:800 !important;
  white-space:nowrap !important;
}
#workDetailView .comment-star-picker{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  flex-wrap:wrap !important;
  gap:10px !important;
}
#workDetailView .comment-star-picker button{
  width:50px !important;
  height:50px !important;
  border-radius:18px !important;
  transition:transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease !important;
}
#workDetailView .comment-star-picker button:hover{
  transform:translateY(-2px) scale(1.03) !important;
}
#workDetailView .comment-star-picker button.active{
  background:linear-gradient(180deg, rgba(250,204,21,.22), rgba(245,158,11,.12)) !important;
  border-color:rgba(250,204,21,.42) !important;
  box-shadow:0 12px 26px rgba(245,158,11,.14) !important;
}
#workDetailView .comment-text-shell{
  margin-top:14px !important;
}
#workDetailView .comment-text-shell textarea{
  min-height:148px !important;
  padding:18px 18px 12px !important;
  font-size:14px !important;
  line-height:1.95 !important;
  resize:vertical !important;
}
#workDetailView .comment-composer-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  padding:12px 16px !important;
}
#workDetailView .comment-composer-actions small{
  color:var(--muted) !important;
  font-size:12px !important;
}
#workDetailView #submitRatedComment{
  min-width:200px !important;
  min-height:46px !important;
  border:0 !important;
  border-radius:16px !important;
  background:linear-gradient(135deg,var(--accent),#6d5dfc) !important;
  color:#fff !important;
  box-shadow:0 14px 30px rgba(109,93,252,.22) !important;
}
#workDetailView #submitRatedComment:not(:disabled):hover{
  transform:translateY(-1px) !important;
}
#workDetailView .community-guidelines{
  margin-top:14px !important;
  padding:16px 18px !important;
}
#workDetailView .community-guidelines > span{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  font-size:14px !important;
  font-weight:800 !important;
}
#workDetailView .community-guidelines > span::before{
  content:"";
  width:10px;
  height:10px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--accent),#5eead4);
  box-shadow:0 0 0 5px rgba(139,92,246,.12);
}
#workDetailView .community-guidelines ul{
  padding:0 !important;
  margin:12px 0 0 !important;
  list-style:none !important;
  display:grid !important;
  gap:10px !important;
}
#workDetailView .community-guidelines li{
  display:flex !important;
  align-items:flex-start !important;
  gap:10px !important;
  color:var(--muted) !important;
  font-size:13px !important;
  line-height:1.8 !important;
}
#workDetailView .community-guidelines li::before{
  content:"";
  width:8px;
  height:8px;
  min-width:8px;
  border-radius:50%;
  margin-top:8px;
  background:rgba(34,197,185,.92);
  box-shadow:0 0 0 5px rgba(34,197,185,.12);
}
#workDetailView .modern-comments-list{
  display:grid !important;
  gap:14px !important;
}
#workDetailView .comment-empty{
  border:1px dashed color-mix(in srgb,var(--line) 94%, rgba(139,92,246,.12)) !important;
  border-radius:20px !important;
  padding:22px !important;
  text-align:center !important;
  color:var(--muted) !important;
  background:linear-gradient(180deg, color-mix(in srgb,var(--surface) 98%, transparent), color-mix(in srgb,var(--surface2) 84%, transparent)) !important;
}
#workDetailView .rated-comment-card{
  grid-template-columns:52px minmax(0,1fr) !important;
  gap:14px !important;
  padding:18px !important;
  border-radius:22px !important;
  background:
    radial-gradient(circle at top left, rgba(139,92,246,.05), transparent 26%),
    linear-gradient(180deg, color-mix(in srgb,var(--surface) 98%, transparent), color-mix(in srgb,var(--surface2) 86%, transparent)) !important;
  border:1px solid color-mix(in srgb,var(--line) 94%, rgba(139,92,246,.08)) !important;
  box-shadow:0 14px 28px rgba(0,0,0,.08) !important;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}
#workDetailView .rated-comment-card:hover{
  transform:translateY(-2px) !important;
  border-color:rgba(139,92,246,.26) !important;
  box-shadow:0 18px 34px rgba(0,0,0,.11) !important;
}
#workDetailView .modern-comments-list .comment-avatar{
  width:52px !important;
  height:52px !important;
  border-radius:18px !important;
  display:grid !important;
  place-items:center !important;
  background:linear-gradient(135deg,var(--accent),#5eead4) !important;
  color:#fff !important;
  font-weight:800 !important;
  font-size:18px !important;
  box-shadow:0 12px 26px rgba(139,92,246,.18) !important;
}
#workDetailView .comment-card-top{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:14px !important;
}
#workDetailView .comment-card-top h4{
  margin:0 0 3px !important;
  font-size:15px !important;
  font-weight:800 !important;
}
#workDetailView .comment-card-top time{
  font-size:11px !important;
  color:var(--muted) !important;
}
#workDetailView .comment-rating-badge{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  padding:7px 10px !important;
  border-radius:999px !important;
  background:rgba(250,204,21,.1) !important;
  border:1px solid rgba(250,204,21,.18) !important;
}
#workDetailView .comment-rating-badge svg{width:13px!important;height:13px!important;color:#fbbf24!important}
#workDetailView .comment-rating-badge b{font-size:12px!important;color:#fbbf24!important}
#workDetailView .rated-comment-card p{
  font-size:14px !important;
  line-height:1.95 !important;
  margin:12px 0 14px !important;
  color:var(--text) !important;
}
#workDetailView .comment-card-footer{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  flex-wrap:wrap !important;
}
#workDetailView .comment-reactions{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
}
#workDetailView .comment-reaction-button{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  min-height:38px !important;
  padding:0 12px !important;
  border-radius:14px !important;
  border:1px solid color-mix(in srgb,var(--line) 92%, rgba(139,92,246,.08)) !important;
  background:color-mix(in srgb,var(--surface) 98%, transparent) !important;
  color:var(--muted) !important;
  transition:all .18s ease !important;
}
#workDetailView .comment-reaction-button svg{width:16px!important;height:16px!important}
#workDetailView .comment-reaction-button:hover{transform:translateY(-1px)!important;color:var(--text)!important}
#workDetailView .comment-reaction-button.like-button.active{
  background:rgba(34,197,94,.1) !important;
  border-color:rgba(34,197,94,.22) !important;
  color:#22c55e !important;
}
#workDetailView .comment-reaction-button.dislike-button.active{
  background:rgba(239,68,68,.1) !important;
  border-color:rgba(239,68,68,.22) !important;
  color:#ef4444 !important;
}
#workDetailView .comment-delete{
  min-height:38px !important;
  padding:0 14px !important;
  border-radius:14px !important;
  border:1px solid rgba(239,68,68,.16) !important;
  background:rgba(239,68,68,.08) !important;
  color:#ef4444 !important;
  font-weight:800 !important;
}
body:not(.light) #workDetailView .comment-rating-summary,
body:not(.light) #workDetailView .comments-count-badge,
body:not(.light) #workDetailView #commentsSort,
body:not(.light) #workDetailView .comments-feed-panel,
body:not(.light) #workDetailView .comments-compose-panel,
body:not(.light) #workDetailView .comment-rating-picker,
body:not(.light) #workDetailView .comment-text-shell,
body:not(.light) #workDetailView .community-guidelines,
body:not(.light) #workDetailView .comment-auth-notice,
body:not(.light) #workDetailView .rated-comment-card,
body:not(.light) #workDetailView .comment-empty{
  background:
    radial-gradient(circle at top right, rgba(139,92,246,.06), transparent 30%),
    linear-gradient(180deg, rgba(10,14,24,.98), rgba(12,18,30,.92)) !important;
}
body.light #workDetailView .comment-rating-summary,
body.light #workDetailView .comments-count-badge,
body.light #workDetailView #commentsSort,
body.light #workDetailView .comments-feed-panel,
body.light #workDetailView .comments-compose-panel,
body.light #workDetailView .comment-rating-picker,
body.light #workDetailView .comment-text-shell,
body.light #workDetailView .community-guidelines,
body.light #workDetailView .comment-auth-notice,
body.light #workDetailView .rated-comment-card,
body.light #workDetailView .comment-empty{
  background:
    radial-gradient(circle at top right, rgba(139,92,246,.04), transparent 30%),
    linear-gradient(180deg, #ffffff, #f6f8fc) !important;
}
@media (max-width:1100px){
  #workDetailView .comments-head-actions{grid-template-columns:1fr 1fr !important}
  #workDetailView #commentsSort{grid-column:1/-1 !important}
  #workDetailView .comments-desktop-layout{grid-template-columns:1fr !important}
  #workDetailView .comments-compose-panel{order:-1 !important;position:static !important}
}
@media (max-width:740px){
  #workDetailView .comments-dashboard-head h2{font-size:24px !important}
  #workDetailView .comments-dashboard-head > div:first-child::after{font-size:11px}
  #workDetailView .comments-head-actions{grid-template-columns:1fr !important}
  #workDetailView .comment-rating-summary,
  #workDetailView .comments-count-badge,
  #workDetailView #commentsSort{min-width:0 !important;width:100% !important}
  #workDetailView .comments-feed-panel,
  #workDetailView .comments-compose-panel{padding:16px !important;border-radius:22px !important}
  #workDetailView .comments-feed-head,
  #workDetailView .compose-panel-head{padding-bottom:12px !important;margin-bottom:14px !important}
  #workDetailView .comments-feed-head h3,
  #workDetailView .compose-panel-head strong{font-size:20px !important}
  #workDetailView .comment-rating-picker-head{flex-direction:column !important}
  #workDetailView .selected-comment-rating-label{align-self:flex-start !important}
  #workDetailView .comment-star-picker{justify-content:center !important;gap:8px !important}
  #workDetailView .comment-star-picker button{width:46px !important;height:46px !important;border-radius:16px !important}
  #workDetailView .comment-composer-actions{flex-direction:column !important;align-items:stretch !important}
  #workDetailView #submitRatedComment{width:100% !important;min-width:0 !important}
  #workDetailView .rated-comment-card{grid-template-columns:44px minmax(0,1fr) !important;padding:14px !important;border-radius:18px !important}
  #workDetailView .modern-comments-list .comment-avatar{width:44px !important;height:44px !important;border-radius:15px !important;font-size:16px !important}
  #workDetailView .comment-card-top{flex-direction:column !important;gap:10px !important}
  #workDetailView .comment-card-footer{align-items:flex-start !important}
}

/* ===== mi-layout-polish-v5 ===== */
/* --- Global layout & typography polish --- */
.view{width:min(100%,1480px)!important;margin-inline:auto!important;padding-inline:clamp(16px,3vw,38px)!important}
.site-header{padding-inline:clamp(14px,3vw,34px)!important}
.brand strong{font-size:16px!important}.brand small{font-size:10px!important}
.desktop-nav button{font-size:13px!important;padding:11px 15px!important}.profile-button{font-size:12px!important}.eyebrow{font-size:11px!important}
.hero-shell{min-height:auto!important;gap:28px!important;padding:48px clamp(22px,4vw,58px)!important}
.hero-content h1{font-size:clamp(34px,5vw,66px)!important;line-height:1.12!important;letter-spacing:-1.6px!important}
.hero-content>p,.featured-copy p,.page-head p,.collection-card-copy p,.poster-copy p,.ranked-copy p{font-size:13px!important;line-height:1.9!important}
.hero-badges span,.count-pill,.muted-label,.results-line span,.results-line strong{font-size:12px!important}
.primary-button,.secondary-button,.follow-button,.back-button,.text-button{font-size:13px!important;padding:12px 18px!important}
.section-heading h2{font-size:32px!important}.featured-copy h2{font-size:29px!important}
.poster-grid{grid-template-columns:repeat(auto-fill,minmax(185px,1fr))!important;gap:18px!important}
.ranked-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))!important;gap:16px!important}
.collections-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))!important;gap:18px!important}
.compact-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))!important}
.poster-copy{padding:12px 4px 4px!important}.poster-copy span{font-size:11px!important}
.poster-copy h3,.platform-poster-card .poster-copy h3,.ranked-copy h3,.collection-card-copy h3{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;overflow:hidden!important}
.poster-copy h3,.platform-poster-card .poster-copy h3{font-size:15px!important;line-height:1.45!important;font-weight:800!important;-webkit-line-clamp:2!important;min-height:2.9em!important}
.poster-copy p{-webkit-line-clamp:2!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;overflow:hidden!important;min-height:3.6em!important}
.ranked-copy h3{font-size:16px!important;line-height:1.4!important;-webkit-line-clamp:2!important}.ranked-copy strong{font-size:18px!important}.ranked-copy p{font-size:12px!important}
.collection-card-copy{padding:18px!important}.collection-card-copy h3{font-size:17px!important;line-height:1.4!important;-webkit-line-clamp:2!important}.collection-card-meta{font-size:12px!important}
.page-head h1{font-size:clamp(32px,4.7vw,58px)!important}.catalog-tabs button,.following-tabs button,.admin-tabs button,.library-state-tabs button{font-size:12px!important;padding:11px 15px!important}
.filter-bar{gap:12px!important;padding:16px!important}.filter-bar label>span{font-size:11px!important}.filter-bar input,.filter-bar select{font-size:13px!important;padding:12px!important}.results-line{font-size:13px!important}
#workDetailView #modalTitle{font-size:clamp(26px,4.2vw,46px)!important;line-height:1.18!important;letter-spacing:-.02em!important;white-space:normal!important;overflow-wrap:anywhere!important;word-break:break-word!important;max-width:100%!important}
#workDetailView .cover-summary-panel{padding:18px 14px 10px!important;max-width:960px!important}
#workDetailView .tappy-meta-line,#workDetailView .tappy-creator-line,#workDetailView .tappy-alt-line{font-size:14px!important;line-height:1.8!important}
#workDetailView .tappy-detail-brand{max-width:min(52vw,340px)!important}
#workDetailView .modern-info-layout{grid-template-columns:minmax(0,1fr) 300px!important;gap:18px!important}
#workDetailView .modern-info-section{padding:18px!important;border-radius:22px!important}
#workDetailView .unified-detail-row{padding-block:14px!important}
#workDetailView .unified-detail-copy small{font-size:11px!important}
#workDetailView .unified-detail-copy strong{font-size:15px!important;line-height:1.7!important}
#workDetailView .modern-info-side{display:grid!important;gap:16px!important;align-content:start!important}
#workDetailView .modern-info-side .compact-side-section:first-child{display:none!important}
#workDetailView .detail-collection-links{display:grid!important;gap:10px!important}
#workDetailView .detail-collection-link{min-height:50px!important;border-radius:16px!important;font-size:14px!important;padding:12px 14px!important}

/* comments compact / premium */
#workDetailView .work-comments-dashboard{gap:14px!important}
#workDetailView .comments-dashboard-head{margin-bottom:10px!important;align-items:center!important}
#workDetailView .comments-dashboard-head h2{font-size:28px!important}.comments-dashboard-head > div:first-child::after{margin-top:4px!important}
#workDetailView .comments-head-actions{grid-template-columns:minmax(210px,1fr) auto minmax(138px,190px)!important;gap:10px!important}
#workDetailView .comment-rating-summary{padding:10px 12px!important;min-width:0!important;border-radius:18px!important}
#workDetailView .comments-count-badge{min-width:92px!important;padding-inline:14px!important;border-radius:16px!important;font-size:13px!important}
#workDetailView #commentsSort{min-width:0!important;font-size:13px!important;height:50px!important}
#workDetailView .comments-desktop-layout{grid-template-columns:minmax(0,1.4fr) minmax(300px,.86fr)!important;gap:14px!important}
#workDetailView .comments-feed-panel,#workDetailView .comments-compose-panel{padding:18px!important;border-radius:24px!important}
#workDetailView .comments-feed-head,#workDetailView .compose-panel-head{margin-bottom:12px!important;padding-bottom:12px!important}
#workDetailView .comments-feed-head h3,#workDetailView .compose-panel-head strong{font-size:21px!important}
#workDetailView .comment-rating-picker,#workDetailView .comment-text-shell,#workDetailView .community-guidelines,#workDetailView .comment-auth-notice{border-radius:20px!important}
#workDetailView .comment-rating-picker-head strong{font-size:16px!important}.selected-comment-rating-label{font-size:11px!important}
#workDetailView .comment-star-picker{gap:8px!important}#workDetailView .comment-star-picker button{width:46px!important;height:46px!important;border-radius:16px!important}
#workDetailView .comment-text-shell textarea{min-height:112px!important;font-size:14px!important;line-height:1.85!important;padding:16px 16px 10px!important}
#workDetailView .comment-composer-actions{padding:10px 14px!important}
#workDetailView #submitRatedComment{min-width:0!important;padding-inline:16px!important;font-size:13px!important;min-height:44px!important}
#workDetailView .community-guidelines{padding:14px 16px!important;margin-top:12px!important}
#workDetailView .community-guidelines li{font-size:12px!important}
#workDetailView .modern-comments-list{gap:12px!important}
#workDetailView .rated-comment-card{padding:14px!important;border-radius:20px!important;grid-template-columns:46px minmax(0,1fr)!important;gap:12px!important}
#workDetailView .modern-comments-list .comment-avatar{width:46px!important;height:46px!important;border-radius:15px!important;font-size:16px!important}
#workDetailView .comment-card-top h4{font-size:14px!important}#workDetailView .comment-card-top time{font-size:11px!important}
#workDetailView .comment-rating-badge{padding:6px 10px!important}#workDetailView .rated-comment-card p{font-size:13px!important;line-height:1.9!important;margin:10px 0 12px!important}
#workDetailView .comment-reaction-button,#workDetailView .comment-delete{min-height:36px!important;font-size:12px!important;padding-inline:10px!important}
/* better home / discover responsiveness */
@media (max-width:1100px){
  .view{padding-inline:20px!important}.poster-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))!important}.collections-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))!important}
  #workDetailView .modern-info-layout{grid-template-columns:1fr!important}
  #workDetailView .comments-head-actions{grid-template-columns:1fr 1fr!important}
  #workDetailView #commentsSort{grid-column:1/-1!important}
  #workDetailView .comments-desktop-layout{grid-template-columns:1fr!important}
}
@media (max-width:740px){
  .view{padding-inline:14px!important}.site-header{padding-inline:12px!important}.brand strong{font-size:14px!important}.hero-shell{padding:28px 16px!important;border-radius:24px!important}.hero-content h1{font-size:clamp(28px,8vw,42px)!important}
  .hero-content>p,.featured-copy p,.page-head p,.poster-copy p,.ranked-copy p,.collection-card-copy p{font-size:12px!important}
  .section-heading h2{font-size:24px!important}.featured-copy h2{font-size:23px!important}.poster-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}.ranked-grid,.collections-grid,.compact-grid{grid-template-columns:1fr 1fr!important;gap:12px!important}
  .collection-card-copy h3,.ranked-copy h3,.poster-copy h3{font-size:14px!important}.collection-card-meta{font-size:11px!important}.filter-bar{grid-template-columns:1fr!important}
  #workDetailView .tappy-detail-brand{max-width:calc(100vw - 140px)!important}#workDetailView #modalTitle{font-size:clamp(22px,7vw,30px)!important}
  #workDetailView .comments-head-actions{grid-template-columns:1fr!important}.comments-dashboard-head > div:first-child::after{content:none!important}
  #workDetailView .comments-feed-panel,#workDetailView .comments-compose-panel{padding:14px!important}
  #workDetailView .comment-star-picker{justify-content:space-between!important}#workDetailView .comment-star-picker button{flex:1 1 calc(20% - 8px)!important;min-width:0!important}
  #workDetailView .rated-comment-card{grid-template-columns:40px minmax(0,1fr)!important;padding:12px!important}
  #workDetailView .modern-comments-list .comment-avatar{width:40px!important;height:40px!important;border-radius:13px!important}
}

/* ===== mi-user-rating-back-v6 ===== */
#workDetailView .tappy-detail-header{
  direction:ltr!important;
  display:grid!important;
  grid-template-columns:52px minmax(0,1fr) 52px!important;
  align-items:center!important;
  gap:12px!important;
  padding:12px clamp(14px,3vw,28px)!important;
}
#workDetailView #workBackButton{
  grid-column:3!important;
  grid-row:1!important;
  justify-self:end!important;
  position:relative!important;
  inset:auto!important;
  z-index:40!important;
  pointer-events:auto!important;
  width:48px!important;
  height:48px!important;
  border-radius:16px!important;
}
#workDetailView #workBackButton svg{
  width:25px!important;
  height:25px!important;
  pointer-events:none!important;
}
#workDetailView .tappy-detail-brand{
  grid-column:2!important;
  grid-row:1!important;
  justify-self:center!important;
  max-width:100%!important;
  min-width:0!important;
  text-align:center!important;
}
#workDetailView .detail-site-wordmark{
  display:block!important;
  font-size:clamp(19px,2.2vw,28px)!important;
  line-height:1!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#workDetailView .tappy-detail-header-actions{
  grid-column:1!important;
  grid-row:1!important;
  justify-self:start!important;
  width:48px!important;
  height:48px!important;
}
#workDetailView #detailSearchBtn{
  width:48px!important;
  height:48px!important;
  border-radius:16px!important;
}
.poster-meta span[data-user-rating-work],
.shelf-work-cover [data-user-rating-work]{
  direction:ltr!important;
  unicode-bidi:isolate!important;
  font-family:Arial,sans-serif!important;
  font-weight:800!important;
  letter-spacing:.01em!important;
}
.poster-meta span[data-user-rating-work]{
  color:var(--text)!important;
  font-size:13px!important;
}
.shelf-work-cover [data-user-rating-work]{
  display:inline-flex!important;
  align-items:center!important;
  min-height:30px!important;
  padding:5px 9px!important;
  border-radius:999px!important;
  background:rgba(9,13,20,.78)!important;
  color:#fff!important;
  font-size:12px!important;
}
@media(max-width:740px){
 #workDetailView .tappy-detail-header{
  grid-template-columns:44px minmax(0,1fr) 44px!important;
  padding:10px 12px!important;
  gap:8px!important;
 }
 #workDetailView #workBackButton,
 #workDetailView #detailSearchBtn,
 #workDetailView .tappy-detail-header-actions{
  width:44px!important;
  height:44px!important;
 }
 #workDetailView .detail-site-wordmark{
  font-size:clamp(17px,5vw,22px)!important;
 }
 .poster-meta span[data-user-rating-work]{font-size:12px!important}
}

/* ===== mi-search-button-fix-v7 ===== */
#workDetailView .tappy-detail-header-actions{
  position:static!important;
  inset:auto!important;
  top:auto!important;
  left:auto!important;
  right:auto!important;
  transform:none!important;
  grid-column:1!important;
  grid-row:1!important;
  justify-self:start!important;
  align-self:center!important;
  width:48px!important;
  height:48px!important;
  display:grid!important;
  place-items:center!important;
  margin:0!important;
  padding:0!important;
}
#workDetailView #detailSearchBtn{
  position:static!important;
  inset:auto!important;
  transform:none!important;
  width:48px!important;
  height:48px!important;
  min-width:48px!important;
  min-height:48px!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  line-height:1!important;
  border-radius:16px!important;
  border:1px solid var(--line)!important;
  background:color-mix(in srgb,var(--surface) 94%,transparent)!important;
  color:var(--text)!important;
  box-shadow:none!important;
  overflow:hidden!important;
}
#workDetailView #detailSearchBtn svg{
  width:24px!important;
  height:24px!important;
  margin:0!important;
  display:block!important;
  stroke-width:2!important;
  pointer-events:none!important;
}
#workDetailView #detailSearchBtn:hover{
  transform:translateY(-1px)!important;
  border-color:color-mix(in srgb,var(--text) 24%,var(--line))!important;
  background:color-mix(in srgb,var(--surface2) 92%,transparent)!important;
}
#workDetailView #detailSearchBtn:active{
  transform:scale(.96)!important;
}
body:not(.light) #workDetailView #detailSearchBtn{
  background:rgba(16,18,25,.92)!important;
  border-color:rgba(255,255,255,.10)!important;
}
@media(max-width:740px){
  #workDetailView .tappy-detail-header-actions,
  #workDetailView #detailSearchBtn{
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    min-height:44px!important;
    border-radius:15px!important;
  }
  #workDetailView #detailSearchBtn svg{
    width:22px!important;
    height:22px!important;
  }
}

/* ===== mi-clean-notification-sheet ===== */
.clean-notification-sheet{
  width:min(620px,calc(100vw - 24px))!important;
  min-height:min(560px,78vh)!important;
  max-height:min(760px,88vh)!important;
  padding:18px!important;
  border-radius:30px 30px 0 0!important;
  overflow:hidden!important;
}
.clean-notification-header{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
  margin:0!important;
  padding:4px 2px 16px!important;
  border-bottom:1px solid var(--line)!important;
}
.clean-notification-header h2{
  margin:0!important;
  font-size:24px!important;
  line-height:1.25!important;
}
.clean-notification-header .sheet-close{
  flex:0 0 auto!important;
}
.clean-notification-feed{
  min-height:430px!important;
  max-height:calc(88vh - 110px)!important;
  padding:16px 2px 8px!important;
  overflow:auto!important;
  display:grid!important;
  align-content:start!important;
  gap:12px!important;
}
.clean-notification-feed:empty{
  display:block!important;
}
.clean-notification-feed .follow-notification-entry{
  margin:0!important;
  border-radius:18px!important;
  padding:13px!important;
  background:color-mix(in srgb,var(--surface) 96%,transparent)!important;
  border:1px solid var(--line)!important;
  box-shadow:none!important;
}
.clean-notification-feed .follow-notification-entry:hover{
  transform:translateY(-1px)!important;
  border-color:color-mix(in srgb,var(--accent) 28%,var(--line))!important;
}
.clean-notification-feed .notification-entry-copy small{
  font-size:10px!important;
}
.clean-notification-feed .notification-entry-copy h4{
  font-size:14px!important;
  margin:4px 0 5px!important;
}
.clean-notification-feed .notification-entry-copy p{
  font-size:12px!important;
  line-height:1.8!important;
  margin:0 0 6px!important;
}
.clean-notification-feed .notification-entry-copy time{
  font-size:10px!important;
}
body:not(.light) .clean-notification-sheet{
  background:#0c111a!important;
}
body.light .clean-notification-sheet{
  background:#fff!important;
}
@media(max-width:740px){
  .clean-notification-sheet{
    width:100%!important;
    min-height:72vh!important;
    padding:15px!important;
    border-radius:26px 26px 0 0!important;
  }
  .clean-notification-header h2{
    font-size:21px!important;
  }
  .clean-notification-feed{
    min-height:calc(72vh - 90px)!important;
    padding-top:12px!important;
  }
}

/* ===== mi-legal-footer-styles ===== */
.mi-site-footer{
  width:min(calc(100% - 40px),1440px);
  margin:72px auto 110px;
  padding:38px clamp(22px,4vw,54px);
  border-top:1px solid var(--line);
  background:transparent;
  color:var(--text);
}
body.work-detail-open .mi-site-footer{display:none}
.mi-footer-inner{display:grid;gap:30px}
.mi-footer-links{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px 30px;
}
.mi-footer-links button{
  border:0;
  padding:5px 0;
  background:transparent;
  color:var(--muted);
  font-family:"Droid Arabic Kufi",Tahoma,sans-serif;
  font-size:clamp(12px,1.15vw,16px);
  font-weight:500;
  transition:color .2s ease,transform .2s ease;
}
.mi-footer-links button:hover{
  color:var(--text);
  transform:translateY(-1px);
}
.mi-footer-bottom{
  display:flex;
  direction:ltr;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.mi-footer-copyright{
  margin:0;
  color:var(--muted);
  font:500 clamp(13px,1.3vw,18px)/1.5 Arial,sans-serif;
}
.mi-footer-series-button{
  min-width:220px;
  min-height:76px;
  display:inline-flex;
  direction:rtl;
  align-items:center;
  justify-content:center;
  gap:18px;
  padding:0 30px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--surface);
  color:var(--text);
  box-shadow:0 18px 48px rgba(0,0,0,.10);
  font-family:"Cairo","Droid Arabic Kufi",Tahoma,sans-serif;
  font-size:clamp(18px,1.8vw,27px);
  font-weight:900;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.mi-footer-series-button svg{
  width:31px;
  height:31px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.mi-footer-series-button:hover{
  transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--text) 24%,var(--line));
  box-shadow:0 24px 58px rgba(0,0,0,.15);
}
.mi-footer-series-button:active{transform:scale(.98)}

.mi-legal-modal{
  position:fixed;
  inset:0;
  z-index:260;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(3,6,11,.74);
  backdrop-filter:blur(16px);
}
.mi-legal-dialog{
  position:relative;
  width:min(720px,96vw);
  max-height:min(760px,88vh);
  overflow:auto;
  padding:34px clamp(22px,4vw,42px);
  border:1px solid var(--line);
  border-radius:28px;
  background:var(--surface);
  color:var(--text);
  box-shadow:0 34px 90px rgba(0,0,0,.32);
}
.mi-legal-close{
  position:absolute;
  top:16px;
  left:16px;
  width:40px;
  height:40px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--surface2);
  color:var(--text);
  font-size:24px;
  line-height:1;
}
.mi-legal-kicker{
  display:block;
  color:var(--accent2);
  font:800 10px/1.5 Arial,sans-serif;
  letter-spacing:1.5px;
}
.mi-legal-dialog h2{
  margin:10px 0 22px;
  font-family:"Cairo","Droid Arabic Kufi",Tahoma,sans-serif;
  font-size:clamp(25px,3vw,38px);
  line-height:1.3;
}
.mi-legal-content{
  display:grid;
  gap:18px;
  color:var(--muted);
  font-family:"Droid Arabic Kufi",Tahoma,sans-serif;
  font-size:13px;
  line-height:2;
}
.mi-legal-content h3{margin:4px 0 0;color:var(--text);font-size:16px}
.mi-legal-content p,.mi-legal-content ul{margin:0}
.mi-legal-content ul{padding-right:20px}
.mi-cookie-intro{
  margin:0 0 18px;
  color:var(--muted);
  font-size:13px;
  line-height:1.9;
}
.mi-cookie-dialog{display:grid;gap:12px}
.mi-cookie-option{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:16px 18px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--surface2);
}
.mi-cookie-option span{display:grid;gap:6px}
.mi-cookie-option strong{font-size:14px}
.mi-cookie-option small{color:var(--muted);font-size:11px;line-height:1.7}
.mi-cookie-option input{
  width:21px;
  height:21px;
  accent-color:var(--accent);
  flex:0 0 auto;
}
.mi-cookie-option.required{opacity:.72}
.mi-cookie-save{
  min-height:50px;
  margin-top:8px;
  border:0;
  border-radius:16px;
  background:var(--text);
  color:var(--bg);
  font-weight:900;
}
@media(max-width:740px){
  .mi-site-footer{
    width:calc(100% - 28px);
    margin:44px auto 112px;
    padding:28px 4px 10px;
  }
  .mi-footer-links{gap:10px 18px}
  .mi-footer-links button{font-size:11px}
  .mi-footer-bottom{
    direction:rtl;
    flex-direction:column-reverse;
    align-items:stretch;
  }
  .mi-footer-copyright{text-align:center;font-size:13px}
  .mi-footer-series-button{
    width:100%;
    min-width:0;
    min-height:62px;
    font-size:20px;
  }
  .mi-legal-dialog{padding:28px 18px 22px;border-radius:24px}
  .mi-cookie-option{padding:14px}
}

/* ===== mi-features-2-5-style ===== */
/* Profile dashboard */
.profile-sheet{width:min(720px,96vw)!important;max-height:min(880px,92vh)!important;overflow:auto!important}
.profile-dashboard{display:grid;gap:16px;margin:18px 0 20px}
.profile-stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.profile-stats-grid article{padding:15px;border:1px solid var(--line);border-radius:17px;background:linear-gradient(180deg,var(--surface2),color-mix(in srgb,var(--surface) 88%,transparent));display:grid;gap:7px}
.profile-stats-grid span{font-size:11px;color:var(--muted);line-height:1.5}.profile-stats-grid strong{font:900 25px/1 Arial;color:var(--text)}
.profile-reading-progress,.profile-preference-summary,.profile-activity-section{border:1px solid var(--line);border-radius:19px;background:color-mix(in srgb,var(--surface2) 66%,transparent);padding:16px}
.profile-reading-progress header,.profile-activity-section header,.profile-preference-summary{display:flex;align-items:center;justify-content:space-between;gap:12px}
.profile-reading-progress header strong,.profile-activity-section header strong,.profile-preference-summary strong{font-size:14px}.profile-reading-progress button,.profile-preference-summary button{border:0;background:transparent;color:var(--accent2);font-size:12px;font-weight:800}
.profile-reading-states{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:13px}.profile-reading-states span{padding:10px 11px;border-radius:13px;background:var(--surface);font-size:11px;color:var(--muted);display:flex;justify-content:space-between}.profile-reading-states b{color:var(--text)}
.profile-preference-summary>div{display:grid;gap:4px}.profile-preference-summary small,.profile-activity-section header small{font-size:10px;color:var(--muted)}
.profile-activity-section header{margin-bottom:12px}.profile-activity-section header>div{display:grid;gap:3px}
.profile-activity-list{display:grid;gap:8px}.profile-activity-row{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:11px;align-items:center;padding:10px;border-radius:14px;background:var(--surface);border:1px solid var(--line);cursor:pointer}.profile-activity-row img{width:42px;height:56px;object-fit:cover;border-radius:10px}.profile-activity-row div{min-width:0}.profile-activity-row strong{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.profile-activity-row p{font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:4px 0 0}.profile-activity-row>span{font:800 12px Arial;color:#f5b700;white-space:nowrap}.profile-activity-empty{padding:18px;text-align:center;color:var(--muted);font-size:11px}
/* Personalized recommendations */
.personalized-recommendations-section{position:relative}.personalized-section-header p{max-width:620px}.personalized-recommendations-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.personalized-work-card{border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--surface);cursor:pointer;transition:.25s;min-width:0}.personalized-work-card:hover{transform:translateY(-4px);border-color:rgba(139,92,246,.34)}.personalized-work-cover{aspect-ratio:5/7;position:relative;overflow:hidden}.personalized-work-cover img{width:100%;height:100%;object-fit:cover}.personalized-work-cover .personalized-rating{position:absolute;top:10px;right:10px;padding:7px 9px;border-radius:10px;background:rgba(7,10,17,.84);color:#fff;font:800 12px Arial}.personalized-work-copy{padding:14px}.personalized-work-copy h3{font-size:15px;line-height:1.45;margin:0 0 7px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.personalized-work-copy p{font-size:11px;color:var(--muted);margin:0 0 12px}.personalized-reason{display:flex;align-items:flex-start;gap:8px;padding:10px;border-radius:13px;background:color-mix(in srgb,var(--accent) 9%,var(--surface2));font-size:10px;line-height:1.65;color:var(--text)}.personalized-reason::before{content:"";color:var(--accent);font-size:12px}.personalized-section-header button{border:1px solid var(--line);background:var(--surface);color:var(--text);padding:10px 14px;border-radius:13px;font-size:11px}
/* Advanced search */
.discover-search-toolbar{display:grid;grid-template-columns:minmax(0,1fr) 190px auto;gap:11px;align-items:stretch;margin-top:24px}.discover-search-field,.discover-sort-field{border:1px solid var(--line);border-radius:17px;background:var(--surface);display:flex;align-items:center}.discover-search-field{padding:0 15px;gap:10px}.discover-search-icon{font-size:22px;color:var(--muted)}.discover-search-field input{width:100%;border:0;background:transparent;color:var(--text);padding:14px 0;outline:0;font-size:13px}.discover-sort-field{display:grid;grid-template-columns:auto 1fr;padding:0 13px;gap:8px}.discover-sort-field span{font-size:10px;color:var(--muted)}.discover-sort-field select{border:0;background:transparent;color:var(--text);outline:0;font-size:12px}.advanced-filters-toggle{border:1px solid var(--line);border-radius:17px;background:var(--surface);color:var(--text);padding:0 15px;display:flex;align-items:center;gap:8px;font-size:12px}.advanced-filters-toggle b{min-width:23px;height:23px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font:800 11px Arial}.advanced-filters-panel{margin-top:11px;padding:16px;border:1px solid var(--line);border-radius:20px;background:var(--surface);display:grid;gap:15px}.advanced-filters-panel.collapsed{display:none}.advanced-filter-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.advanced-filter-grid label{display:grid;gap:7px}.advanced-filter-grid span{font-size:10px;color:var(--muted)}.advanced-filter-grid select,.advanced-filter-grid input{width:100%;border:1px solid var(--line);border-radius:12px;background:var(--surface2);color:var(--text);padding:10px;font-size:11px;outline:0}.multi-genre-filter{display:grid;gap:10px;padding-top:14px;border-top:1px solid var(--line)}.multi-genre-filter>div:first-child{display:grid;gap:3px}.multi-genre-filter strong{font-size:12px}.multi-genre-filter small{font-size:9px;color:var(--muted)}.advanced-genre-chips{display:flex;flex-wrap:wrap;gap:7px}.advanced-genre-chips button{border:1px solid var(--line);border-radius:999px;background:var(--surface2);color:var(--muted);padding:8px 12px;font-size:10px}.advanced-genre-chips button.active{background:var(--accent);color:#fff;border-color:var(--accent)}.reset-discover-filters{justify-self:start;border:0;background:transparent;color:var(--danger);font-size:11px;font-weight:800}
/* Spoilers and reviews */
.comment-spoiler-toggle{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:11px;align-items:center;padding:13px 15px;border:1px solid var(--line);border-radius:17px;background:var(--surface);cursor:pointer;margin-top:12px}.comment-spoiler-toggle input{position:absolute;opacity:0;pointer-events:none}.comment-spoiler-switch{width:42px;height:24px;border-radius:999px;background:var(--surface3);padding:3px;transition:.2s}.comment-spoiler-switch i{display:block;width:18px;height:18px;border-radius:50%;background:var(--muted);transition:.2s}.comment-spoiler-toggle input:checked+.comment-spoiler-switch{background:rgba(255,101,119,.22)}.comment-spoiler-toggle input:checked+.comment-spoiler-switch i{transform:translateX(-18px);background:var(--danger)}.comment-spoiler-toggle>span:last-child{display:grid;gap:3px}.comment-spoiler-toggle strong{font-size:12px}.comment-spoiler-toggle small{font-size:9px;color:var(--muted)}
.comment-author-line{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.best-review-badge,.spoiler-badge{padding:5px 8px;border-radius:999px;font-size:9px;font-weight:800}.best-review-badge{background:rgba(245,183,0,.12);color:#f5b700;border:1px solid rgba(245,183,0,.2)}.spoiler-badge{background:rgba(255,101,119,.12);color:var(--danger);border:1px solid rgba(255,101,119,.2)}.best-review-card{border-color:rgba(245,183,0,.22)!important;box-shadow:0 18px 38px rgba(245,183,0,.06)!important}.spoiler-review-shell{margin:11px 0 13px}.spoiler-review-warning{display:grid;grid-template-columns:auto 1fr auto;gap:11px;align-items:center;padding:14px;border-radius:16px;background:linear-gradient(135deg,rgba(255,101,119,.10),rgba(139,92,246,.07));border:1px solid rgba(255,101,119,.18)}.spoiler-review-warning>span{font-size:20px}.spoiler-review-warning>div{display:grid;gap:3px}.spoiler-review-warning strong{font-size:12px}.spoiler-review-warning small{font-size:9px;color:var(--muted)}.spoiler-review-warning button{border:0;border-radius:11px;background:var(--surface);color:var(--text);padding:9px 11px;font-size:10px;font-weight:800}.spoiler-review-body{margin:0!important;padding:13px;border-radius:14px;background:var(--surface2)}.comment-secondary-actions{display:flex;gap:7px}.comment-report-button{border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:12px;padding:7px 10px;font-size:10px}.comment-report-button.reported{color:var(--success);border-color:rgba(130,230,170,.25)}
@media(max-width:1100px){.personalized-recommendations-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.advanced-filter-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:740px){.profile-stats-grid{grid-template-columns:repeat(2,1fr)}.profile-reading-states{grid-template-columns:1fr}.personalized-recommendations-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.personalized-work-copy{padding:11px}.personalized-work-copy h3{font-size:13px}.discover-search-toolbar{grid-template-columns:1fr auto}.discover-sort-field{grid-column:1/-1;grid-row:2}.advanced-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.advanced-filters-panel{padding:13px}.spoiler-review-warning{grid-template-columns:auto 1fr}.spoiler-review-warning button{grid-column:1/-1;width:100%}.comment-spoiler-toggle{grid-template-columns:auto auto 1fr}}
@media(max-width:430px){.personalized-recommendations-grid{grid-template-columns:1fr 1fr}.advanced-filter-grid{grid-template-columns:1fr}.profile-activity-row{grid-template-columns:38px minmax(0,1fr)}.profile-activity-row>span{grid-column:2}.profile-activity-row img{width:38px;height:50px}}

/* ===== mi-centered-dialog-system ===== */
/* =========================================================
   Unified centered dialog system
   Fixes onboarding, legal, auth, welcome and other popups.
   ========================================================= */

:root{
  --mi-dialog-gutter: clamp(12px, 3vw, 28px);
  --mi-dialog-max-h: calc(100dvh - (var(--mi-dialog-gutter) * 2));
}

/* Every real modal overlay is centered against the viewport,
   not against document height / bottom navigation. */
.dock-sheet-backdrop,
.modal-backdrop,
.welcome-backdrop,
.mi-legal-modal,
.recommendation-reason-modal{
  position:fixed !important;
  inset:0 !important;
  width:100% !important;
  height:100dvh !important;
  min-height:100dvh !important;
  z-index:300 !important;
  display:grid !important;
  place-items:center !important;
  align-items:center !important;
  justify-items:center !important;
  padding:
    max(var(--mi-dialog-gutter), env(safe-area-inset-top))
    max(var(--mi-dialog-gutter), env(safe-area-inset-right))
    max(var(--mi-dialog-gutter), env(safe-area-inset-bottom))
    max(var(--mi-dialog-gutter), env(safe-area-inset-left)) !important;
  overflow:auto !important;
  overscroll-behavior:contain !important;
  background:rgba(3,6,11,.70) !important;
  backdrop-filter:blur(16px) saturate(110%) !important;
  -webkit-backdrop-filter:blur(16px) saturate(110%) !important;
}

/* Keep hidden overlays truly hidden after generic display override. */
.dock-sheet-backdrop.hidden,
.modal-backdrop.hidden,
.welcome-backdrop.hidden,
.mi-legal-modal.hidden,
.recommendation-reason-modal.hidden{
  display:none !important;
}

/* Main dialog surfaces */
.dock-sheet,
.auth-modal,
.welcome-card,
.mi-legal-dialog,
.recommendation-modal-card{
  position:relative !important;
  inset:auto !important;
  margin:auto !important;
  transform:none;
  width:min(680px, calc(100vw - (var(--mi-dialog-gutter) * 2))) !important;
  max-width:100% !important;
  max-height:var(--mi-dialog-max-h) !important;
  overflow:auto !important;
  overscroll-behavior:contain !important;
  border:1px solid color-mix(in srgb, var(--line) 88%, rgba(139,92,246,.14)) !important;
  border-radius:26px !important;
  background:
    radial-gradient(circle at 88% 0%, rgba(139,92,246,.08), transparent 28%),
    var(--surface) !important;
  color:var(--text) !important;
  box-shadow:0 32px 90px rgba(0,0,0,.34) !important;
  scrollbar-width:thin;
  animation:miCenteredDialogIn .26s cubic-bezier(.2,.82,.22,1) both !important;
}

@keyframes miCenteredDialogIn{
  from{opacity:0;transform:translateY(12px) scale(.975)}
  to{opacity:1;transform:none}
}

/* Do not leave bottom-sheet spacing/handle cues on centered dialogs. */
.dock-sheet{
  padding:22px 24px 24px !important;
}
.sheet-handle{
  width:34px !important;
  height:4px !important;
  margin:0 auto 13px !important;
  opacity:.65;
}
.sheet-header{
  align-items:center !important;
  padding-bottom:14px !important;
}
.sheet-header h2{
  font-size:clamp(20px,2.2vw,27px) !important;
  line-height:1.35 !important;
}
.sheet-header p,
.preference-intro p{
  font-size:12px !important;
  line-height:1.85 !important;
}

/* First-login Action / Romance choice */
#preferencesSheet{
  place-items:center !important;
}
#preferencesSheet .primary-preference-sheet{
  width:min(720px, calc(100vw - (var(--mi-dialog-gutter) * 2))) !important;
  max-height:min(760px, var(--mi-dialog-max-h)) !important;
}
#preferencesSheet .primary-preference-intro{
  margin:14px 0 4px !important;
  text-align:center !important;
}
#preferencesSheet .primary-preference-grid{
  margin:16px 0 !important;
}
#preferencesSheet .primary-preference-card{
  min-height:160px !important;
  border-radius:18px !important;
}
#preferencesSheet .preference-card-icon{
  width:58px !important;
  height:58px !important;
  border-radius:17px !important;
}
#preferencesSheet .primary-preference-card strong{
  font-size:16px !important;
}
#preferencesSheet .primary-preference-card small{
  font-size:10.5px !important;
  line-height:1.75 !important;
}
#preferencesSheet .sheet-actions{
  position:sticky;
  bottom:-1px;
  z-index:2;
  padding-top:12px;
  background:linear-gradient(180deg, transparent, var(--surface) 28%);
}

/* Legal/privacy/cookie windows */
.mi-legal-modal{
  place-items:center !important;
}
.mi-legal-dialog{
  width:min(720px, calc(100vw - (var(--mi-dialog-gutter) * 2))) !important;
  max-height:min(780px, var(--mi-dialog-max-h)) !important;
  padding:32px clamp(22px,4vw,40px) 28px !important;
}
.mi-cookie-dialog{
  width:min(620px, calc(100vw - (var(--mi-dialog-gutter) * 2))) !important;
}
.mi-legal-close,
.modal-close,
.sheet-close,
.recommendation-modal-close{
  z-index:5 !important;
}
.mi-legal-dialog h2{
  padding-inline-start:46px;
  font-size:clamp(24px,3vw,36px) !important;
}
.mi-legal-content{
  font-size:13px !important;
  line-height:1.95 !important;
}

/* Auth and welcome were missing a reliable full-screen centering rule
   in some builds. */
.modal-backdrop,
.welcome-backdrop{
  place-items:center !important;
}
.auth-modal,
.welcome-card{
  width:min(500px, calc(100vw - (var(--mi-dialog-gutter) * 2))) !important;
  padding:28px !important;
}

/* Recommendation/reason modal also stays centered on mobile. */
.recommendation-reason-modal{
  align-items:center !important;
}
.recommendation-modal-card{
  width:min(560px, calc(100vw - (var(--mi-dialog-gutter) * 2))) !important;
  max-height:var(--mi-dialog-max-h) !important;
}

/* Prevent background controls from visually sitting above the modal. */
body:has(
  .dock-sheet-backdrop:not(.hidden),
  .modal-backdrop:not(.hidden),
  .welcome-backdrop:not(.hidden),
  .mi-legal-modal:not(.hidden),
  .recommendation-reason-modal:not(.hidden)
) .member-dock{
  filter:blur(2px);
  pointer-events:none;
}

/* Mobile: center the card and let only the card content scroll. */
@media(max-width:740px){
  :root{
    --mi-dialog-gutter:14px;
  }

  .dock-sheet-backdrop,
  .modal-backdrop,
  .welcome-backdrop,
  .mi-legal-modal,
  .recommendation-reason-modal{
    align-items:center !important;
    justify-items:center !important;
    padding:
      max(14px, env(safe-area-inset-top))
      max(12px, env(safe-area-inset-right))
      max(14px, env(safe-area-inset-bottom))
      max(12px, env(safe-area-inset-left)) !important;
  }

  .dock-sheet,
  .auth-modal,
  .welcome-card,
  .mi-legal-dialog,
  .recommendation-modal-card{
    width:100% !important;
    max-height:calc(100dvh - 28px) !important;
    border-radius:22px !important;
  }

  .dock-sheet{
    padding:17px 16px 18px !important;
  }

  #preferencesSheet .primary-preference-grid{
    grid-template-columns:1fr !important;
    gap:9px !important;
    margin:12px 0 !important;
  }

  #preferencesSheet .primary-preference-card{
    min-height:88px !important;
    grid-template-columns:48px minmax(0,1fr) !important;
    grid-template-rows:auto auto !important;
    place-items:center start !important;
    column-gap:12px !important;
    padding:12px 13px !important;
    text-align:right !important;
  }

  #preferencesSheet .preference-card-icon{
    width:48px !important;
    height:48px !important;
    grid-row:1/3 !important;
    border-radius:14px !important;
    font-size:22px !important;
  }

  #preferencesSheet .primary-preference-card strong{
    font-size:14px !important;
  }

  #preferencesSheet .primary-preference-card small{
    font-size:9.5px !important;
  }

  .mi-legal-dialog{
    padding:26px 17px 20px !important;
  }

  .mi-legal-dialog h2{
    padding-inline-start:38px;
    font-size:24px !important;
  }

  .mi-legal-content{
    font-size:12px !important;
  }

  .auth-modal,
  .welcome-card{
    padding:24px 18px !important;
  }

  .recommendation-modal-card{
    padding:24px 18px 20px !important;
    border-radius:22px !important;
  }
}

/* Very short screens: allow the overlay itself to scroll while keeping
   the dialog's first edge visible. */
@media(max-height:560px){
  .dock-sheet-backdrop,
  .modal-backdrop,
  .welcome-backdrop,
  .mi-legal-modal,
  .recommendation-reason-modal{
    place-items:start center !important;
  }
}

/* ===== mi-multi-genre-and-large-sheets ===== */
#preferencesSheet .multi-preference-sheet{
  width:min(940px,calc(100vw - 32px))!important;
  max-height:calc(100dvh - 32px)!important;
  padding:22px 24px 24px!important;
}
.preference-sheet-header{margin-bottom:6px!important}
.multi-preference-intro{
  padding:14px 16px!important;
  border:1px solid var(--line);
  border-radius:18px;
  background:color-mix(in srgb,var(--surface2) 72%,transparent);
  margin:12px 0 14px!important;
}
.multi-preference-intro strong{display:block;font-size:14px;margin-bottom:5px}
.multi-preference-intro p{margin:0!important;font-size:11px!important;line-height:1.8!important}
.preference-selection-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:0 0 12px;padding:0 2px;color:var(--muted);font-size:12px
}
.preference-selection-toolbar b{color:var(--text);font:800 14px Arial,sans-serif}
.preference-selection-toolbar button{
  border:0;background:transparent;color:var(--danger);font-size:11px;font-weight:800;padding:6px 0
}
.preference-multi-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;padding:2px 2px 12px
}
.preference-multi-card{
  position:relative;min-width:0;min-height:72px;
  display:grid;grid-template-columns:40px minmax(0,1fr) 22px;
  align-items:center;gap:10px;padding:12px;
  border:1px solid var(--line);border-radius:17px;
  background:color-mix(in srgb,var(--surface2) 64%,transparent);
  cursor:pointer;transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease
}
.preference-multi-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 38%,var(--line))}
.preference-multi-card input{position:absolute;opacity:0;pointer-events:none}
.preference-multi-icon{
  width:40px;height:40px;border-radius:13px;display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--line);font-size:19px
}
.preference-multi-label{min-width:0;font-size:12px;font-weight:800;line-height:1.5;color:var(--text)}
.preference-multi-check{
  width:21px;height:21px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line);color:transparent;font:900 11px Arial;transition:.18s ease
}
.preference-multi-card:has(input:checked){
  border-color:color-mix(in srgb,var(--accent) 54%,var(--line));
  background:color-mix(in srgb,var(--accent) 9%,var(--surface2));
  box-shadow:0 12px 28px color-mix(in srgb,var(--accent) 10%,transparent)
}
.preference-multi-card:has(input:checked) .preference-multi-check{
  color:#fff;border-color:var(--accent);background:var(--accent);transform:scale(1.05)
}
#preferencesSheet #savePreferencesButton{
  position:sticky;bottom:0;z-index:4;width:100%;min-height:50px;margin-top:4px
}
#preferencesSheet #savePreferencesButton:disabled{opacity:.4;cursor:not-allowed}

.settings-preference-section{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin:18px 0;padding:16px;border:1px solid var(--line);border-radius:18px;
  background:color-mix(in srgb,var(--surface2) 66%,transparent)
}
.settings-preference-copy{min-width:0;display:flex;align-items:center;gap:12px}
.settings-preference-icon{
  width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;
  border-radius:14px;background:var(--surface);border:1px solid var(--line)
}
.settings-preference-copy h3{margin:0 0 5px;font-size:14px}
.settings-preference-copy p{
  margin:0;max-width:480px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--muted);font-size:10px
}

#profileSheet .profile-sheet{
  width:min(840px,calc(100vw - 32px))!important;
  max-height:calc(100dvh - 32px)!important;
  padding:22px 24px 26px!important
}
#notificationsSheet .notification-sheet{
  width:min(760px,calc(100vw - 32px))!important;
  min-height:min(460px,calc(100dvh - 32px))!important;
  max-height:calc(100dvh - 32px)!important;
  padding:22px 24px 26px!important
}
#profileSheet .profile-stats-grid{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important
}
#profileSheet .profile-stats-grid article{min-height:96px!important;padding:14px!important}
#profileSheet .profile-reading-progress,
#profileSheet .profile-preference-summary,
#profileSheet .profile-activity-section{padding:16px!important;border-radius:18px!important}
#notificationsSheet .notification-feed{
  min-height:330px!important;max-height:calc(100dvh - 150px)!important;overflow:auto!important
}
#notificationsSheet .clean-notification-header{padding-bottom:14px!important;border-bottom:1px solid var(--line)}

@media(max-width:980px){
  .preference-multi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  #profileSheet .profile-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:740px){
  #preferencesSheet .multi-preference-sheet,
  #profileSheet .profile-sheet,
  #notificationsSheet .notification-sheet{
    width:100%!important;max-height:calc(100dvh - 24px)!important;
    padding:17px 15px 18px!important;border-radius:22px!important
  }
  #notificationsSheet .notification-sheet{min-height:min(520px,calc(100dvh - 24px))!important}
  .preference-multi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .preference-multi-card{
    min-height:66px;grid-template-columns:34px minmax(0,1fr) 19px;
    gap:8px;padding:10px;border-radius:15px
  }
  .preference-multi-icon{width:34px;height:34px;border-radius:11px;font-size:16px}
  .preference-multi-label{font-size:10.5px}
  .preference-multi-check{width:19px;height:19px}
  .settings-preference-section{align-items:flex-start;flex-direction:column}
  .settings-preference-section .secondary-button{width:100%}
  .settings-preference-copy p{white-space:normal;line-height:1.7}
  #profileSheet .profile-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #profileSheet .profile-stats-grid article{min-height:82px!important}
  #notificationsSheet .notification-feed{min-height:390px!important}
}
@media(max-width:430px){
  .preference-multi-grid{grid-template-columns:1fr}
  .preference-multi-card{min-height:58px}
}

/* ===== mi-profile-notification-window-final-fix ===== */
#profileSheet.dock-sheet-backdrop,
#notificationsSheet.dock-sheet-backdrop{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100dvh!important;
  display:grid!important;
  place-items:center!important;
  padding:max(10px,env(safe-area-inset-top))
          max(10px,env(safe-area-inset-right))
          max(10px,env(safe-area-inset-bottom))
          max(10px,env(safe-area-inset-left))!important;
  overflow:hidden!important;
}
#profileSheet.dock-sheet-backdrop.hidden,
#notificationsSheet.dock-sheet-backdrop.hidden{display:none!important}

#profileSheet .profile-sheet{
  position:relative!important;
  inset:auto!important;
  transform:none!important;
  width:min(1120px,calc(100vw - 24px))!important;
  min-width:0!important;
  max-width:none!important;
  height:min(900px,calc(100dvh - 24px))!important;
  min-height:min(620px,calc(100dvh - 24px))!important;
  max-height:calc(100dvh - 24px)!important;
  margin:auto!important;
  padding:20px 22px 24px!important;
  border-radius:28px!important;
  overflow:auto!important;
}

#notificationsSheet .notification-sheet,
#notificationsSheet .clean-notification-sheet{
  position:relative!important;
  inset:auto!important;
  transform:none!important;
  width:min(980px,calc(100vw - 24px))!important;
  min-width:0!important;
  max-width:none!important;
  height:min(720px,calc(100dvh - 24px))!important;
  min-height:min(560px,calc(100dvh - 24px))!important;
  max-height:calc(100dvh - 24px)!important;
  margin:auto!important;
  padding:20px 22px 24px!important;
  border-radius:28px!important;
  overflow:hidden!important;
}

#notificationsSheet .notification-feed,
#notificationsSheet .clean-notification-feed{
  min-height:0!important;
  height:calc(100% - 82px)!important;
  max-height:none!important;
  overflow:auto!important;
  padding:18px 2px!important;
}
#notificationsSheet .notification-feed:empty,
#notificationsSheet .clean-notification-feed:empty{min-height:100%!important}

#profileSheet .profile-identity-modern{
  display:grid!important;
  grid-template-columns:112px minmax(0,1fr)!important;
  align-items:center!important;
  gap:18px!important;
  padding:16px!important;
  margin:14px 0!important;
  border:1px solid var(--line)!important;
  border-radius:22px!important;
  background:color-mix(in srgb,var(--surface2) 62%,transparent)!important;
}
.profile-avatar-button{
  position:relative;width:112px;height:112px;padding:0;border:0;background:transparent
}
#profileSheet .large-profile-avatar.avatar-surface{
  width:112px!important;height:112px!important;border-radius:50%!important;
  display:grid!important;place-items:center!important;
  background-color:var(--surface)!important;background-position:center!important;
  background-repeat:no-repeat!important;background-size:cover!important;
  border:1px solid var(--line)!important;font-size:36px!important;font-weight:900!important;
  overflow:hidden!important
}
.profile-avatar-edit-badge{
  position:absolute;left:3px;bottom:3px;width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;background:var(--text);color:var(--bg);
  border:3px solid var(--surface);font-size:13px
}
.profile-identity-copy{min-width:0;display:grid;gap:6px;justify-items:start}
.profile-identity-copy>strong{font-size:24px!important;line-height:1.4!important}
.profile-identity-copy>small{
  font-size:12px!important;color:var(--muted)!important;direction:ltr;text-align:left
}
.profile-inline-action{
  margin-top:5px;border:0;padding:0;background:transparent;color:var(--accent2);
  font-size:12px;font-weight:800
}

#profileSheet .profile-dashboard{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(340px,.82fr)!important;
  grid-template-areas:
    "stats stats"
    "activity reading"
    "activity preferences";
  gap:12px!important;margin:12px 0 16px!important
}
#profileSheet .profile-stats-grid{
  grid-area:stats;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important
}
#profileSheet .profile-stats-grid article{min-height:82px!important;padding:13px 14px!important}
#profileSheet .profile-stats-grid span{font-size:11px!important}
#profileSheet .profile-stats-grid strong{font-size:24px!important}
#profileSheet .profile-reading-progress{grid-area:reading;align-self:start}
#profileSheet .profile-preference-summary{grid-area:preferences;align-self:start}
#profileSheet .profile-activity-section{grid-area:activity;min-height:100%}
#profileSheet .profile-activity-list{max-height:280px!important;overflow:auto!important}

#profileSheet .profile-name-field{
  display:grid!important;grid-template-columns:110px minmax(0,1fr)!important;
  align-items:center!important;gap:12px!important;margin-top:12px!important
}
#profileSheet .profile-name-field span{font-size:12px!important}
#profileSheet .profile-name-field input{min-height:46px!important}
#profileSheet #saveProfileNameButton{width:auto!important;min-width:170px!important;margin-top:10px!important}
#profileSheet #dockSignOutButton{margin-top:12px!important}

.profile-avatar-picker{
  margin:12px 0 16px;padding:16px;border:1px solid var(--line);
  border-radius:20px;background:color-mix(in srgb,var(--surface2) 68%,transparent)
}
.profile-avatar-picker>header{
  display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:13px
}
.profile-avatar-picker>header>div{display:grid;gap:4px}
.profile-avatar-picker>header strong{font-size:15px}
.profile-avatar-picker>header small{font-size:10px;color:var(--muted)}
.profile-avatar-picker>header>button{
  width:34px;height:34px;border:1px solid var(--line);border-radius:11px;
  background:var(--surface);color:var(--text)
}
.profile-avatar-options{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:10px
}
.profile-avatar-option{
  position:relative;aspect-ratio:1;max-width:100px;width:100%;
  padding:3px;border:2px solid transparent;border-radius:50%;background:transparent
}
.profile-avatar-option img{
  width:100%;height:100%;display:block;object-fit:cover;border-radius:50%;border:1px solid var(--line)
}
.profile-avatar-option.selected{border-color:var(--accent)}
.avatar-option-check{
  position:absolute;left:2px;bottom:2px;width:24px;height:24px;border-radius:50%;
  display:none;place-items:center;background:var(--accent);color:#fff;
  border:2px solid var(--surface);font:900 11px Arial
}
.profile-avatar-option.selected .avatar-option-check{display:grid}
.profile-avatar-empty{
  padding:22px;border:1px dashed var(--line);border-radius:16px;
  text-align:center;color:var(--muted);font-size:11px
}

.avatar-surface.has-avatar-image,
#dockAvatar.has-avatar-image,
#authAvatar.has-avatar-image,
#commentAvatar.has-avatar-image,
#signedInAvatar.has-avatar-image{
  background-position:center!important;background-repeat:no-repeat!important;
  background-size:cover!important;color:transparent!important
}

.admin-avatar-catalog{
  margin-top:18px!important;padding:16px!important;border:1px solid var(--line)!important;
  border-radius:18px!important;background:color-mix(in srgb,var(--surface2) 66%,transparent)!important
}
.admin-avatar-catalog-head h3{margin:0 0 5px;font-size:14px}
.admin-avatar-catalog-head p{margin:0;color:var(--muted);font-size:10px;line-height:1.8}
.admin-avatar-url-form{
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(140px,.7fr) auto;
  gap:8px;margin:14px 0
}
.admin-avatar-url-form input{
  min-width:0;min-height:44px;border:1px solid var(--line);border-radius:12px;
  background:var(--surface);color:var(--text);padding:10px 12px;font-size:11px
}
.admin-avatar-catalog-grid{display:grid;gap:8px}
.admin-avatar-item{
  display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;
  gap:10px;padding:9px;border:1px solid var(--line);border-radius:14px;background:var(--surface)
}
.admin-avatar-item img{width:48px;height:48px;object-fit:cover;border-radius:50%}
.admin-avatar-item div{min-width:0;display:grid;gap:3px}
.admin-avatar-item strong{font-size:11px}
.admin-avatar-item small{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);
  direction:ltr;text-align:left;font-size:8px
}
.admin-avatar-item>button{
  border:1px solid color-mix(in srgb,var(--danger) 28%,var(--line));
  border-radius:10px;background:transparent;color:var(--danger);padding:8px 10px;font-size:10px
}

@media(max-width:900px){
  #profileSheet .profile-sheet{
    width:calc(100vw - 16px)!important;height:calc(100dvh - 16px)!important;
    max-height:calc(100dvh - 16px)!important
  }
  #notificationsSheet .notification-sheet,
  #notificationsSheet .clean-notification-sheet{
    width:calc(100vw - 16px)!important;height:min(760px,calc(100dvh - 16px))!important;
    max-height:calc(100dvh - 16px)!important
  }
  #profileSheet .profile-dashboard{
    grid-template-columns:1fr 1fr!important;
    grid-template-areas:
      "stats stats"
      "reading preferences"
      "activity activity"!important
  }
  #profileSheet .profile-activity-list{max-height:220px!important}
}

@media(max-width:740px){
  #profileSheet.dock-sheet-backdrop,
  #notificationsSheet.dock-sheet-backdrop{
    padding:max(6px,env(safe-area-inset-top))
            max(6px,env(safe-area-inset-right))
            max(6px,env(safe-area-inset-bottom))
            max(6px,env(safe-area-inset-left))!important
  }
  #profileSheet .profile-sheet,
  #notificationsSheet .notification-sheet,
  #notificationsSheet .clean-notification-sheet{
    width:calc(100vw - 12px)!important;height:calc(100dvh - 12px)!important;
    min-height:0!important;max-height:calc(100dvh - 12px)!important;
    border-radius:22px!important;padding:15px 14px 18px!important
  }
  #profileSheet .profile-identity-modern{
    grid-template-columns:82px minmax(0,1fr)!important;gap:13px!important;padding:12px!important
  }
  .profile-avatar-button{width:82px;height:82px}
  #profileSheet .large-profile-avatar.avatar-surface{
    width:82px!important;height:82px!important;font-size:28px!important
  }
  .profile-avatar-edit-badge{width:27px;height:27px}
  .profile-identity-copy>strong{font-size:19px!important}
  .profile-identity-copy>small{
    max-width:100%;overflow:hidden;text-overflow:ellipsis;font-size:10px!important
  }
  #profileSheet .profile-dashboard{
    display:grid!important;grid-template-columns:1fr!important;
    grid-template-areas:"stats" "reading" "preferences" "activity"!important
  }
  #profileSheet .profile-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #profileSheet .profile-stats-grid article{min-height:72px!important}
  #profileSheet .profile-reading-states{grid-template-columns:1fr 1fr 1fr!important}
  #profileSheet .profile-activity-list{max-height:240px!important}
  #profileSheet .profile-name-field{grid-template-columns:1fr!important;gap:6px!important}
  #profileSheet #saveProfileNameButton{width:100%!important}
  .profile-avatar-options{grid-template-columns:repeat(4,minmax(0,1fr))}
  .admin-avatar-url-form{grid-template-columns:1fr!important}
  #notificationsSheet .notification-feed,
  #notificationsSheet .clean-notification-feed{height:calc(100% - 70px)!important}
}
@media(max-width:430px){
  .profile-avatar-options{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ===== mi-cloudflare-r2-media-ui ===== */
.cloudflare-media-grid{
  grid-template-columns:1fr 1fr!important;
}
.cloudflare-collection-cover{
  grid-template-columns:1fr!important;
}
.cloudflare-collection-cover .small-upload{
  min-height:140px!important;
}
.cloudflare-r2-settings{
  margin:18px 0!important;
  padding:18px!important;
  border:1px solid var(--line)!important;
  border-radius:20px!important;
  background:color-mix(in srgb,var(--surface2) 68%,transparent)!important;
}
.cloudflare-r2-head{
  display:flex;align-items:center;gap:13px;margin-bottom:15px
}
.cloudflare-r2-logo{
  width:50px;height:50px;flex:0 0 50px;border-radius:16px;display:grid;place-items:center;
  background:linear-gradient(145deg,#f48120,#ffb45e);color:#15110e;font:900 15px Arial
}
.cloudflare-r2-head h3{margin:0 0 5px;font-size:15px}
.cloudflare-r2-head p{margin:0;color:var(--muted);font-size:10px;line-height:1.8}
.cloudflare-r2-config-grid{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end
}
.cloudflare-r2-config-grid label{display:grid;gap:7px}
.cloudflare-r2-config-grid label span{font-size:10px;color:var(--muted)}
.cloudflare-r2-config-grid input{
  min-width:0;min-height:46px;border:1px solid var(--line);border-radius:13px;
  background:var(--surface);color:var(--text);padding:10px 12px;font-size:11px;direction:ltr
}
.cloudflare-r2-status-row{
  display:flex;align-items:center;gap:9px;margin-top:12px;padding:11px 12px;
  border:1px solid var(--line);border-radius:14px;background:var(--surface)
}
#cloudflareR2ConnectionDot{
  width:10px;height:10px;border-radius:50%;background:var(--muted);flex:0 0 10px
}
#cloudflareR2ConnectionDot.connected{background:#38d987;box-shadow:0 0 0 5px rgba(56,217,135,.12)}
.cloudflare-r2-status-row strong{font-size:11px;margin-inline-end:auto}
.cloudflare-r2-migration{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:12px;padding:13px;border:1px solid var(--line);border-radius:14px
}
.cloudflare-r2-migration>div{display:grid;gap:4px}
.cloudflare-r2-migration strong{font-size:11px}
.cloudflare-r2-migration small{font-size:9px;line-height:1.7;color:var(--muted)}

.admin-avatar-upload-form{
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(150px,.65fr) auto;
  gap:9px;margin:14px 0;align-items:stretch
}
.admin-avatar-file-picker{
  min-width:0;min-height:58px;display:grid;grid-template-columns:38px minmax(0,1fr);
  align-items:center;gap:10px;padding:9px 11px;border:1px dashed color-mix(in srgb,var(--accent) 42%,var(--line));
  border-radius:14px;background:var(--surface);cursor:pointer;position:relative
}
.admin-avatar-file-picker input{position:absolute;inset:0;opacity:0;cursor:pointer}
.admin-avatar-file-picker>span{
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--accent) 12%,var(--surface2));font-size:18px
}
.admin-avatar-file-picker>div{display:grid;gap:3px;min-width:0}
.admin-avatar-file-picker strong{font-size:10px}
.admin-avatar-file-picker small{font-size:8px;color:var(--muted)}
.admin-avatar-upload-form>input{
  min-width:0;border:1px solid var(--line);border-radius:13px;background:var(--surface);
  color:var(--text);padding:10px 12px;font-size:10px
}

@media(max-width:740px){
  .cloudflare-media-grid{grid-template-columns:1fr!important}
  .cloudflare-r2-config-grid{grid-template-columns:1fr!important}
  .cloudflare-r2-config-grid .primary-button{width:100%}
  .cloudflare-r2-status-row{flex-wrap:wrap}
  .cloudflare-r2-status-row strong{flex:1;min-width:150px}
  .cloudflare-r2-migration{align-items:flex-start;flex-direction:column}
  .cloudflare-r2-migration button{width:100%}
  .admin-avatar-upload-form{grid-template-columns:1fr!important}
}

/* ===== mi-mangaupdates-import-ui ===== */
.mu-import-shell{
  display:grid;
  gap:16px;
}
.mu-admin-search{
  border-color:color-mix(in srgb,#5d8dd7 28%,var(--line))!important;
}
.mu-import-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:15px 16px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--surface);
}
.mu-import-actions>div{
  display:grid;
  gap:5px;
}
.mu-import-actions strong{
  font-size:13px;
}
.mu-import-actions small{
  max-width:700px;
  color:var(--muted);
  font-size:10px;
  line-height:1.8;
}
.mu-import-row{
  grid-template-columns:82px minmax(0,1fr) auto!important;
}
.mu-import-row img{
  width:82px!important;
  height:112px!important;
}
.mu-result-title-line{
  display:flex;
  align-items:center;
  gap:10px;
}
.mu-result-title-line h3{
  margin:0!important;
}
.mu-result-title-line span{
  flex:0 0 auto;
  padding:5px 8px;
  border-radius:999px;
  background:color-mix(in srgb,#f3b742 12%,var(--surface2));
  color:#dca31f;
  font:800 11px Arial;
}
.mu-import-row a{
  display:inline-block;
  margin-top:7px;
  color:var(--accent2);
  font-size:10px;
}
.mu-credit-note{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:6px;
  color:var(--muted);
  font-size:9px;
}
.mu-credit-note a,
.mi-footer-data-credit a{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:3px;
}
.mi-footer-data-credit{
  margin:8px 0 0;
  color:var(--muted);
  font-size:10px;
}
@media(max-width:740px){
  .mu-import-actions{
    align-items:flex-start;
    flex-direction:column;
  }
  .mu-import-actions button{
    width:100%;
  }
  .mu-import-row{
    grid-template-columns:68px minmax(0,1fr)!important;
  }
  .mu-import-row img{
    width:68px!important;
    height:94px!important;
  }
  .mu-import-row>.ink-button{
    grid-column:1/-1;
    width:100%;
  }
}

/* ===== mi-tappytoon-home-v1 ===== */
/* ================================================================
   Tappytoon-inspired homepage polish
   Homepage only: all database/import/admin functionality is retained.
   ================================================================ */

:root{
  --tt-home-max:1320px;
  --tt-home-bg:#ffffff;
  --tt-home-card:#ffffff;
  --tt-home-soft:#f6f6f7;
  --tt-home-text:#111113;
  --tt-home-muted:#808087;
  --tt-home-line:#e9e9ec;
  --tt-home-ink:#111113;
  --tt-home-green:#25d88a;
  --tt-home-shadow:0 18px 46px rgba(20,20,25,.09);
}
body:not(.light){
  --tt-home-bg:#09090b;
  --tt-home-card:#101012;
  --tt-home-soft:#17171a;
  --tt-home-text:#f7f7f8;
  --tt-home-muted:#929299;
  --tt-home-line:#25252a;
  --tt-home-ink:#f7f7f8;
  --tt-home-shadow:0 22px 56px rgba(0,0,0,.30);
}

/* Header — clean platform style */
.exact-platform-header{
  height:68px!important;
  padding:0 max(24px,calc((100vw - var(--tt-home-max))/2))!important;
  grid-template-columns:minmax(180px,1fr) auto minmax(180px,1fr)!important;
  border-bottom:1px solid var(--tt-home-line)!important;
  background:color-mix(in srgb,var(--tt-home-bg) 91%,transparent)!important;
  backdrop-filter:blur(22px) saturate(145%)!important;
  -webkit-backdrop-filter:blur(22px) saturate(145%)!important;
  box-shadow:0 1px 0 rgba(0,0,0,.015)!important;
}
.exact-platform-header .site-brand-image{
  height:31px!important;
  max-width:190px!important;
}
.exact-main-tabs{gap:14px!important}
.exact-main-tabs button{
  position:relative!important;
  height:68px!important;
  padding:0 8px!important;
  border:0!important;
  color:var(--tt-home-muted)!important;
  font-size:13px!important;
  font-weight:800!important;
  transition:color .2s ease!important;
}
.exact-main-tabs button::after{
  content:"";
  position:absolute;
  right:15%;left:15%;bottom:0;
  height:3px;
  border-radius:3px 3px 0 0;
  background:var(--tt-home-ink);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .24s cubic-bezier(.2,.8,.2,1);
}
.exact-main-tabs button.active,.exact-main-tabs button:hover{color:var(--tt-home-text)!important}
.exact-main-tabs button.active::after,.exact-main-tabs button:hover::after{transform:scaleX(1)}
.exact-header-actions{gap:5px!important}
.exact-header-icon{
  width:40px!important;height:40px!important;
  border-radius:50%!important;
  color:var(--tt-home-text)!important;
  transition:background .2s ease,transform .2s ease!important;
}
.exact-header-icon:hover{background:var(--tt-home-soft)!important;transform:translateY(-1px)}
.exact-all-series{
  height:38px!important;
  padding:0 16px!important;
  border-color:var(--tt-home-line)!important;
  background:var(--tt-home-card)!important;
  color:var(--tt-home-text)!important;
  font-size:11px!important;
  font-weight:800!important;
  transition:transform .2s ease,background .2s ease!important;
}
.exact-all-series:hover{transform:translateY(-1px);background:var(--tt-home-soft)!important}

/* Main home shell */
#homeView.exact-discover-page{
  width:min(var(--tt-home-max),calc(100% - 48px))!important;
  margin:0 auto!important;
  padding:0 0 128px!important;
  color:var(--tt-home-text)!important;
}
.tappy-home-heading{
  min-height:118px;
  padding:34px 0 24px!important;
  display:flex!important;
  align-items:flex-end!important;
  justify-content:space-between!important;
  gap:24px!important;
}
.tappy-home-heading>div{display:grid;gap:4px}
.tappy-home-kicker{
  color:var(--tt-home-muted);
  font:800 10px/1 Arial,sans-serif;
  letter-spacing:1.6px;
}
.tappy-home-heading h1{
  margin:0!important;
  color:var(--tt-home-text)!important;
  font-size:clamp(34px,4.2vw,52px)!important;
  font-weight:900!important;
  letter-spacing:-1.5px!important;
  line-height:1.12!important;
}
.tappy-home-library-link{
  display:inline-flex;align-items:center;gap:8px;
  border:0;background:transparent;color:var(--tt-home-text);
  padding:9px 0;font-size:12px;font-weight:850;
}
.tappy-home-library-link span{
  display:grid;place-items:center;width:26px;height:26px;
  border-radius:50%;background:var(--tt-home-soft);
  transition:transform .22s ease;
}
.tappy-home-library-link:hover span{transform:translateX(-4px)}

/* Quick category rail */
#homeView .mi-quick-tabs{
  display:grid!important;
  grid-auto-flow:column!important;
  grid-auto-columns:minmax(190px,1fr)!important;
  gap:9px!important;
  overflow-x:auto!important;
  scrollbar-width:none!important;
  scroll-snap-type:x proximity!important;
  padding:0 0 22px!important;
  margin:0!important;
  border:0!important;
}
#homeView .mi-quick-tabs::-webkit-scrollbar{display:none}
#homeView .mi-quick-tabs button{
  position:relative!important;
  min-height:76px!important;
  display:grid!important;
  grid-template-columns:50px minmax(0,1fr)!important;
  align-items:center!important;
  gap:11px!important;
  padding:10px 13px!important;
  scroll-snap-align:start!important;
  border:1px solid var(--tt-home-line)!important;
  border-radius:13px!important;
  background:var(--tt-home-card)!important;
  color:var(--tt-home-text)!important;
  box-shadow:none!important;
  overflow:hidden!important;
  transform:none!important;
  transition:border-color .22s ease,box-shadow .22s ease,transform .22s ease,background .22s ease!important;
}
#homeView .mi-quick-tabs button::before{
  content:"";position:absolute;inset:auto 0 0 0;height:3px;
  background:var(--tt-home-green);transform:scaleX(0);
  transition:transform .25s ease;
}
#homeView .mi-quick-tabs button:hover{
  transform:translateY(-3px)!important;
  border-color:color-mix(in srgb,var(--tt-home-text) 18%,var(--tt-home-line))!important;
  box-shadow:0 12px 26px rgba(20,20,25,.07)!important;
}
#homeView .mi-quick-tabs button.active{
  background:var(--tt-home-ink)!important;
  border-color:var(--tt-home-ink)!important;
  color:var(--tt-home-bg)!important;
  box-shadow:0 14px 28px rgba(0,0,0,.13)!important;
}
#homeView .mi-quick-tabs button.active::before{transform:scaleX(1)}
#homeView .mi-quick-icon{
  width:50px!important;height:50px!important;
  border-radius:12px!important;overflow:hidden!important;
  background:var(--tt-home-soft)!important;
  transition:transform .25s cubic-bezier(.2,.8,.2,1)!important;
}
#homeView .mi-quick-tabs button:hover .mi-quick-icon{transform:scale(1.06) rotate(-2deg)}
#homeView .mi-quick-tabs button.active .mi-quick-icon{background:#fff!important}
#homeView .mi-quick-icon img{width:100%!important;height:100%!important;object-fit:cover!important}
#homeView .quick-tab-copy{display:grid!important;gap:3px!important;text-align:right!important}
#homeView .quick-tab-copy strong{font-size:12px!important;line-height:1.4!important}
#homeView .quick-tab-copy small{font-size:9px!important;color:var(--tt-home-muted)!important}
#homeView .mi-quick-tabs button.active .quick-tab-copy small{color:rgba(255,255,255,.62)!important}

/* Featured carousel — larger, cinematic but still clean */
#homeView .exact-feature-carousel{
  min-height:474px!important;
  border-radius:18px!important;
  background:#121214!important;
  box-shadow:var(--tt-home-shadow)!important;
  isolation:isolate!important;
  overflow:hidden!important;
}
#homeView .exact-feature-background{
  inset:-2%!important;
  filter:saturate(.88) contrast(1.02)!important;
  transform:scale(1.065)!important;
  will-change:transform!important;
  animation:ttBackdropDrift 16s ease-in-out infinite alternate!important;
}
@keyframes ttBackdropDrift{
  0%{transform:scale(1.055) translate3d(0,0,0)}
  100%{transform:scale(1.105) translate3d(-1.2%,.6%,0)}
}
#homeView .exact-feature-carousel::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.05),transparent 27%,transparent 73%,rgba(255,255,255,.025));
}
#homeView .exact-feature-shade{
  z-index:1!important;
  background:
    linear-gradient(90deg,rgba(8,8,10,.98) 3%,rgba(8,8,10,.88) 34%,rgba(8,8,10,.48) 65%,rgba(8,8,10,.18) 100%),
    linear-gradient(0deg,rgba(8,8,10,.46),transparent 45%)!important;
}
#homeView .exact-feature-inner{
  min-height:474px!important;
  grid-template-columns:minmax(0,1.1fr) 430px!important;
  gap:34px!important;
  padding:52px 6%!important;
}
#homeView .exact-feature-copy{max-width:650px!important}
#homeView .exact-feature-label{
  display:inline-flex!important;align-items:center!important;gap:7px!important;
  color:#fff!important;font:800 10px Arial,sans-serif!important;letter-spacing:1.3px!important;
  opacity:.82!important;
}
#homeView .exact-feature-label i{
  width:7px;height:7px;border-radius:50%;background:var(--tt-home-green);
  box-shadow:0 0 0 5px rgba(37,216,138,.13);
}
#homeView .exact-feature-copy h2{
  max-width:620px!important;
  margin:17px 0 11px!important;
  color:#fff!important;
  font-size:clamp(38px,4.4vw,58px)!important;
  font-weight:900!important;
  line-height:1.18!important;
  letter-spacing:-1.7px!important;
  text-wrap:balance!important;
}
#homeView .exact-feature-copy>p{
  max-width:570px!important;
  color:rgba(255,255,255,.72)!important;
  font-size:12px!important;
  line-height:1.9!important;
  display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:3!important;overflow:hidden!important;
}
#homeView .exact-feature-meta{gap:8px!important;margin-top:20px!important}
#homeView .exact-feature-meta span{
  display:inline-flex;align-items:center;gap:4px;
  min-height:31px;padding:0 11px;border:1px solid rgba(255,255,255,.13);
  border-radius:999px;background:rgba(0,0,0,.18);
  color:rgba(255,255,255,.72)!important;font-size:10px!important;
  backdrop-filter:blur(7px);
}
#homeView .exact-feature-meta b{color:#fff!important;font-size:11px!important}
#homeView .exact-feature-actions{gap:9px!important;margin-top:23px!important}
#homeView .exact-solid-button,#homeView .exact-outline-button{
  min-height:43px!important;padding:0 18px!important;border-radius:8px!important;
  font-size:11px!important;font-weight:850!important;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease!important;
}
#homeView .exact-solid-button{background:#fff!important;color:#111!important;box-shadow:0 10px 25px rgba(0,0,0,.15)!important}
#homeView .exact-solid-button:hover{transform:translateY(-2px)!important;box-shadow:0 15px 32px rgba(0,0,0,.22)!important}
#homeView .exact-outline-button{background:rgba(255,255,255,.06)!important;border-color:rgba(255,255,255,.20)!important;color:#fff!important;backdrop-filter:blur(9px)!important}
#homeView .exact-outline-button:hover{transform:translateY(-2px)!important;background:rgba(255,255,255,.12)!important}
#homeView .exact-feature-pagination{margin-top:24px!important;gap:8px!important}
#homeView .exact-feature-pagination>button{
  width:34px!important;height:34px!important;border-radius:50%!important;
  transition:background .2s ease,transform .2s ease!important;
}
#homeView .exact-feature-pagination>button:hover{background:#fff!important;color:#111!important;transform:scale(1.05)!important}
#homeView .feature-dots{display:flex!important;align-items:center!important;gap:5px!important}
#homeView .feature-dots button{
  width:6px!important;height:6px!important;border-radius:50%!important;
  border:0!important;background:rgba(255,255,255,.36)!important;padding:0!important;
  transition:width .25s ease,background .25s ease,border-radius .25s ease!important;
}
#homeView .feature-dots button.active{width:22px!important;border-radius:999px!important;background:#fff!important}
#homeView .feature-timer{height:3px!important;background:rgba(255,255,255,.09)!important}
#homeView #featureTimerBar{background:var(--tt-home-green)!important}

/* Hero poster fan */
#homeView .exact-feature-posters{min-height:340px!important;perspective:900px!important}
#homeView .feature-mini-work{
  width:166px!important;
  border-radius:10px!important;
  transition:transform .34s cubic-bezier(.2,.8,.2,1),filter .25s ease!important;
  will-change:transform!important;
}
#homeView .feature-mini-work img{
  border-radius:10px!important;
  box-shadow:0 28px 65px rgba(0,0,0,.46)!important;
  border:1px solid rgba(255,255,255,.09)!important;
}
#homeView .feature-mini-work span{display:none!important}
#homeView .feature-mini-1{right:24px!important;top:8px!important;transform:translateZ(45px) rotate(3deg)!important;z-index:4!important}
#homeView .feature-mini-2{right:176px!important;top:52px!important;transform:translateZ(0) rotate(-6deg)!important;z-index:2!important}
#homeView .feature-mini-3{right:83px!important;top:180px!important;transform:translateZ(28px) rotate(5deg)!important;z-index:3!important}
#homeView .feature-mini-4{display:block!important;right:244px!important;top:170px!important;transform:translateZ(-12px) rotate(-3deg)!important;z-index:1!important;filter:saturate(.75) brightness(.78)!important}
#homeView .feature-mini-work:hover{filter:brightness(1.08)!important}
#homeView .feature-mini-1:hover{transform:translateZ(65px) translateY(-8px) rotate(1deg)!important}
#homeView .feature-mini-2:hover{transform:translateZ(20px) translateY(-8px) rotate(-3deg)!important}
#homeView .feature-mini-3:hover{transform:translateZ(45px) translateY(-8px) rotate(2deg)!important}
#homeView .feature-mini-4:hover{transform:translateZ(5px) translateY(-8px) rotate(-1deg)!important}

/* Hero transition triggered from JS */
#homeView .exact-feature-carousel.tt-hero-changing .exact-feature-copy>*{animation:ttHeroCopySwap .42s ease both}
#homeView .exact-feature-carousel.tt-hero-changing .feature-mini-work{animation:ttHeroPosterSwap .5s cubic-bezier(.2,.8,.2,1) both}
#homeView .exact-feature-carousel.tt-hero-changing .feature-mini-2{animation-delay:.04s}
#homeView .exact-feature-carousel.tt-hero-changing .feature-mini-3{animation-delay:.08s}
#homeView .exact-feature-carousel.tt-hero-changing .feature-mini-4{animation-delay:.12s}
@keyframes ttHeroCopySwap{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes ttHeroPosterSwap{from{opacity:0;translate:18px 8px;scale:.94}to{opacity:1;translate:0 0;scale:1}}

/* Sections */
#homeView .exact-content-section{padding-top:58px!important}
#homeView .exact-section-header{
  align-items:flex-end!important;gap:18px!important;margin-bottom:18px!important;
}
#homeView .exact-section-header h2{
  margin:0!important;color:var(--tt-home-text)!important;
  font-size:27px!important;font-weight:900!important;letter-spacing:-.5px!important;line-height:1.25!important;
}
#homeView .exact-section-header p{
  margin:6px 0 0!important;color:var(--tt-home-muted)!important;
  font-size:11px!important;line-height:1.75!important;
}
#homeView .exact-section-header .eyebrow{
  color:var(--tt-home-green)!important;font-size:9px!important;font-weight:900!important;
}
#homeView .exact-section-header button{
  display:inline-flex;align-items:center;gap:6px;
  border:0!important;background:transparent!important;color:var(--tt-home-muted)!important;
  padding:7px 0!important;font-size:11px!important;font-weight:800!important;
  transition:color .18s ease,transform .18s ease!important;
}
#homeView .exact-section-header button::after{content:"←";font-size:13px}
#homeView .exact-section-header button:hover{color:var(--tt-home-text)!important;transform:translateX(-3px)}
#homeView .exact-auto-update{
  display:inline-flex!important;align-items:center!important;
  color:var(--tt-home-muted)!important;font-size:10px!important;
}
#homeView .exact-auto-update i{width:7px!important;height:7px!important;background:var(--tt-home-green)!important;animation:ttLiveDot 1.7s ease infinite!important}
@keyframes ttLiveDot{0%,100%{box-shadow:0 0 0 0 rgba(37,216,138,.26)}50%{box-shadow:0 0 0 6px rgba(37,216,138,0)}}

/* Work cards — Tappytoon-like: image is primary, almost no card chrome */
#homeView .exact-poster-rail{
  grid-auto-columns:164px!important;
  gap:17px!important;
  padding:2px 2px 10px!important;
  scroll-padding-inline:2px!important;
}
#homeView .platform-poster-card{
  scroll-snap-align:start!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  transition:transform .26s cubic-bezier(.2,.8,.2,1)!important;
}
#homeView .platform-poster-card:hover{transform:translateY(-6px)!important}
#homeView .platform-poster-card .poster-cover{
  aspect-ratio:5/7!important;
  border:0!important;
  border-radius:9px!important;
  background:var(--tt-home-soft)!important;
  box-shadow:0 1px 0 rgba(0,0,0,.035)!important;
  overflow:hidden!important;
}
#homeView .platform-poster-card .poster-cover::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.045);border-radius:inherit;
}
body:not(.light) #homeView .platform-poster-card .poster-cover::after{box-shadow:inset 0 0 0 1px rgba(255,255,255,.055)}
#homeView .platform-poster-card .poster-cover img{
  transition:transform .42s cubic-bezier(.2,.8,.2,1),filter .32s ease!important;
}
#homeView .platform-poster-card:hover .poster-cover img{transform:scale(1.045)!important;filter:saturate(1.04)!important}
#homeView .platform-poster-card .poster-status-badge{
  top:8px!important;right:8px!important;
  min-height:25px!important;padding:0 8px!important;
  display:flex!important;align-items:center!important;
  border:0!important;border-radius:999px!important;
  background:rgba(9,9,11,.78)!important;color:#fff!important;
  backdrop-filter:blur(8px)!important;
  font-size:8px!important;font-weight:800!important;
}
#homeView .platform-poster-card .poster-follow{
  top:8px!important;left:8px!important;
  width:30px!important;height:30px!important;border-radius:50%!important;
  border:1px solid rgba(255,255,255,.16)!important;
  background:rgba(9,9,11,.68)!important;color:#fff!important;
  backdrop-filter:blur(8px)!important;
  transition:transform .2s ease,background .2s ease!important;
}
#homeView .platform-poster-card .poster-follow:hover{transform:scale(1.08)!important;background:#fff!important;color:#111!important}
#homeView .platform-poster-card .poster-follow.following{background:var(--tt-home-green)!important;color:#07130d!important}
#homeView .platform-poster-card .poster-copy{padding:10px 1px 0!important}
#homeView .platform-poster-card .poster-copy h3{
  min-height:0!important;margin:0 0 5px!important;
  color:var(--tt-home-text)!important;font-size:12px!important;font-weight:850!important;line-height:1.5!important;
  -webkit-line-clamp:2!important;
}
#homeView .platform-poster-card .poster-copy>p{
  min-height:0!important;margin:0 0 7px!important;color:var(--tt-home-muted)!important;
  font-size:9px!important;line-height:1.5!important;
}
#homeView .poster-meta{
  display:flex!important;align-items:center!important;justify-content:space-between!important;gap:5px!important;
  color:var(--tt-home-muted)!important;font-size:9px!important;
}
#homeView .poster-meta>span{color:var(--tt-home-text)!important;font:800 10px Arial,sans-serif!important}
#homeView .poster-meta>small{font-size:8px!important;color:var(--tt-home-muted)!important}

/* Collection strip */
#homeView .exact-wide-rail{
  grid-auto-columns:330px!important;
  gap:14px!important;
  padding:2px 2px 12px!important;
}
#homeView .platform-collection-card{
  min-height:0!important;
  border:1px solid var(--tt-home-line)!important;
  border-radius:13px!important;
  background:var(--tt-home-card)!important;
  overflow:hidden!important;
  box-shadow:none!important;
  scroll-snap-align:start!important;
  transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease!important;
}
#homeView .platform-collection-card:hover{
  transform:translateY(-5px)!important;
  border-color:color-mix(in srgb,var(--tt-home-text) 16%,var(--tt-home-line))!important;
  box-shadow:0 18px 38px rgba(20,20,25,.08)!important;
}
#homeView .platform-collection-visual{height:168px!important}
#homeView .platform-collection-main{transition:transform .45s ease!important}
#homeView .platform-collection-card:hover .platform-collection-main{transform:scale(1.04)!important}
#homeView .top-collection-rank{
  top:10px!important;right:10px!important;
  width:31px!important;height:31px!important;display:grid!important;place-items:center!important;
  border-radius:50%!important;background:rgba(10,10,12,.78)!important;color:#fff!important;
  font:800 9px Arial!important;backdrop-filter:blur(8px)!important;
}
#homeView .top-collection-copy{padding:13px 14px 15px!important}
#homeView .top-collection-score{font-size:9px!important;color:var(--tt-home-text)!important}
#homeView .top-collection-copy h3{margin:5px 0!important;font-size:14px!important;line-height:1.5!important;color:var(--tt-home-text)!important}
#homeView .top-collection-copy p{margin:0!important;color:var(--tt-home-muted)!important;font-size:9px!important}

/* Recommendation list / shelves */
#homeView .recommendation-shelf-rail{gap:16px!important}
#homeView .recommendation-shelf-card{
  grid-template-columns:220px minmax(0,1fr)!important;
  gap:0!important;
  border:1px solid var(--tt-home-line)!important;
  border-radius:15px!important;
  background:var(--tt-home-card)!important;
  box-shadow:none!important;
  overflow:hidden!important;
  transition:box-shadow .25s ease,transform .25s ease!important;
}
#homeView .recommendation-shelf-card:hover{transform:translateY(-3px)!important;box-shadow:0 18px 40px rgba(20,20,25,.07)!important}
#homeView .recommendation-shelf-cover{min-height:290px!important;border-radius:0!important}
#homeView .recommendation-shelf-cover img{transition:transform .45s ease!important}
#homeView .recommendation-shelf-card:hover .recommendation-shelf-cover img{transform:scale(1.035)!important}
#homeView .recommendation-shelf-body{padding:22px!important}
#homeView .recommendation-shelf-kicker{color:var(--tt-home-muted)!important;font-size:9px!important}
#homeView .recommendation-shelf-top h3{font-size:22px!important;color:var(--tt-home-text)!important;margin:7px 0!important}
#homeView .recommendation-shelf-top p{color:var(--tt-home-muted)!important;font-size:10px!important;line-height:1.8!important}
#homeView .recommendation-shelf-meta span{font-size:9px!important}
#homeView .recommendation-thumb{transition:transform .2s ease!important}
#homeView .recommendation-thumb:hover{transform:translateY(-3px)!important}
#homeView .recommendation-thumb img{border-radius:7px!important}
#homeView .recommendation-shelf-actions .primary-button{background:var(--tt-home-ink)!important;color:var(--tt-home-bg)!important}

/* Rotating collection shelves */
#homeView .exact-shelves{gap:44px!important}
#homeView .platform-shelf{border:0!important;background:transparent!important}
#homeView .collection-shelf-head{margin-bottom:15px!important}
#homeView .collection-shelf-head h3{font-size:19px!important;color:var(--tt-home-text)!important}
#homeView .collection-shelf-head p{font-size:10px!important;color:var(--tt-home-muted)!important}
#homeView .shelf-avatar{border-radius:50%!important;background:var(--tt-home-soft)!important;border:1px solid var(--tt-home-line)!important}
#homeView .shelf-open-button{color:var(--tt-home-muted)!important;font-size:10px!important}
#homeView .exact-shelves .platform-shelf-track{grid-auto-columns:164px!important;gap:17px!important}
#homeView .shelf-progress{height:2px!important;background:var(--tt-home-line)!important}
#homeView .shelf-progress span{background:var(--tt-home-text)!important}

/* Personalized cards harmonization */
#homeView .personalized-recommendations-grid{gap:13px!important}
#homeView .personalized-work-card{
  border-color:var(--tt-home-line)!important;background:var(--tt-home-card)!important;
  border-radius:13px!important;box-shadow:none!important;
  transition:transform .23s ease,box-shadow .23s ease!important;
}
#homeView .personalized-work-card:hover{transform:translateY(-4px)!important;box-shadow:0 15px 34px rgba(20,20,25,.07)!important}

/* Subtle section entrance animations */
@media(prefers-reduced-motion:no-preference){
  #homeView.tt-motion-ready .exact-content-section,
  #homeView.tt-motion-ready .exact-feature-carousel,
  #homeView.tt-motion-ready .mi-quick-tabs{
    opacity:0;
    transform:translateY(20px);
  }
  #homeView.tt-motion-ready .tt-home-visible{
    opacity:1!important;
    transform:none!important;
    transition:opacity .62s ease,transform .62s cubic-bezier(.2,.8,.2,1)!important;
  }
  #homeView .tt-stagger-card{
    opacity:0;
    transform:translateY(14px);
  }
  #homeView .tt-stagger-card.tt-card-visible{
    opacity:1;transform:none;
    transition:opacity .5s ease calc(var(--tt-index,0)*38ms),transform .5s cubic-bezier(.2,.8,.2,1) calc(var(--tt-index,0)*38ms)!important;
  }
}

/* Light / dark background harmonization */
#homeView{background:transparent!important}
body.light{background:#fff!important}
body:not(.light){background:#09090b!important}

/* Tablet */
@media(max-width:1020px){
  #homeView .exact-feature-inner{grid-template-columns:minmax(0,1fr) 330px!important;padding:42px 4.5%!important}
  #homeView .feature-mini-work{width:138px!important}
  #homeView .feature-mini-2{right:137px!important}
  #homeView .feature-mini-4{right:190px!important}
  #homeView .recommendation-shelf-card{grid-template-columns:190px minmax(0,1fr)!important}
  #homeView .recommendation-shelf-cover{min-height:270px!important}
}

/* Mobile — edge-to-edge feature, rails like an app */
@media(max-width:740px){
  .exact-platform-header{
    height:58px!important;
    padding:0 12px!important;
    background:color-mix(in srgb,var(--tt-home-bg) 94%,transparent)!important;
  }
  .exact-platform-header .site-brand-image{height:27px!important;max-width:155px!important}
  #homeView.exact-discover-page{width:calc(100% - 28px)!important;padding-bottom:108px!important}
  .tappy-home-heading{min-height:91px;padding:22px 0 17px!important}
  .tappy-home-kicker{font-size:8px!important}
  .tappy-home-heading h1{font-size:31px!important;letter-spacing:-.8px!important}
  .tappy-home-library-link{font-size:10px!important}
  .tappy-home-library-link span{width:23px;height:23px}

  #homeView .mi-quick-tabs{
    grid-auto-columns:154px!important;
    gap:8px!important;
    padding-bottom:17px!important;
    margin-inline:-14px!important;
    padding-inline:14px!important;
  }
  #homeView .mi-quick-tabs button{min-height:66px!important;grid-template-columns:42px minmax(0,1fr)!important;padding:8px 10px!important;border-radius:11px!important}
  #homeView .mi-quick-icon{width:42px!important;height:42px!important;border-radius:10px!important}
  #homeView .quick-tab-copy strong{font-size:10px!important}
  #homeView .quick-tab-copy small{font-size:8px!important}

  #homeView .exact-feature-carousel{
    width:calc(100% + 28px)!important;
    margin-inline:-14px!important;
    min-height:535px!important;
    border-radius:0!important;
    box-shadow:none!important;
  }
  #homeView .exact-feature-shade{
    background:
      linear-gradient(0deg,rgba(8,8,10,.99) 4%,rgba(8,8,10,.94) 31%,rgba(8,8,10,.55) 68%,rgba(8,8,10,.18) 100%)!important;
  }
  #homeView .exact-feature-inner{
    min-height:535px!important;
    grid-template-columns:1fr!important;
    align-content:end!important;
    gap:8px!important;
    padding:24px 19px 29px!important;
  }
  #homeView .exact-feature-posters{
    min-height:195px!important;
    width:100%!important;
    order:1!important;
    margin-bottom:2px!important;
  }
  #homeView .feature-mini-work{width:104px!important}
  #homeView .feature-mini-1{right:calc(50% - 42px)!important;top:0!important;transform:rotate(2deg)!important}
  #homeView .feature-mini-2{right:calc(50% + 48px)!important;top:28px!important;transform:rotate(-5deg)!important}
  #homeView .feature-mini-3{right:calc(50% - 115px)!important;top:58px!important;transform:rotate(5deg)!important}
  #homeView .feature-mini-4{display:none!important}
  #homeView .exact-feature-copy{order:2!important;text-align:center!important;max-width:none!important}
  #homeView .exact-feature-label{justify-content:center!important;font-size:8px!important}
  #homeView .exact-feature-copy h2{font-size:30px!important;line-height:1.22!important;margin:12px 0 7px!important;letter-spacing:-.7px!important}
  #homeView .exact-feature-copy>p{font-size:10px!important;line-height:1.75!important;-webkit-line-clamp:2!important;margin-inline:auto!important}
  #homeView .exact-feature-meta,#homeView .exact-feature-actions,#homeView .exact-feature-pagination{justify-content:center!important}
  #homeView .exact-feature-meta{margin-top:14px!important;gap:5px!important}
  #homeView .exact-feature-meta span{min-height:27px!important;padding:0 8px!important;font-size:8px!important}
  #homeView .exact-feature-actions{margin-top:17px!important}
  #homeView .exact-solid-button,#homeView .exact-outline-button{min-height:40px!important;font-size:10px!important;padding:0 15px!important}
  #homeView .exact-feature-pagination{margin-top:18px!important}

  #homeView .exact-content-section{padding-top:43px!important}
  #homeView .exact-section-header{margin-bottom:14px!important}
  #homeView .exact-section-header h2{font-size:21px!important}
  #homeView .exact-section-header p{font-size:9px!important;max-width:250px!important}
  #homeView .exact-section-header button{font-size:9px!important}

  #homeView .exact-poster-rail,
  #homeView .exact-wide-rail,
  #homeView .platform-shelf-track{
    margin-inline:-14px!important;
    padding-inline:14px!important;
    scroll-padding-inline:14px!important;
  }
  #homeView .exact-poster-rail{grid-auto-columns:136px!important;gap:11px!important}
  #homeView .exact-shelves .platform-shelf-track{grid-auto-columns:136px!important;gap:11px!important}
  #homeView .platform-poster-card .poster-copy{padding-top:8px!important}
  #homeView .platform-poster-card .poster-copy h3{font-size:10.5px!important;margin-bottom:4px!important}
  #homeView .platform-poster-card .poster-copy>p{font-size:8px!important;margin-bottom:5px!important}
  #homeView .poster-meta>span{font-size:9px!important}
  #homeView .poster-meta>small{font-size:7.5px!important}

  #homeView .exact-wide-rail{grid-auto-columns:270px!important;gap:10px!important}
  #homeView .platform-collection-visual{height:146px!important}
  #homeView .top-collection-copy{padding:11px 12px 13px!important}
  #homeView .top-collection-copy h3{font-size:12px!important}

  #homeView .recommendation-shelf-card{grid-template-columns:1fr!important;border-radius:13px!important}
  #homeView .recommendation-shelf-cover{height:190px!important;min-height:190px!important}
  #homeView .recommendation-shelf-body{padding:15px!important}
  #homeView .recommendation-shelf-top h3{font-size:18px!important}
  #homeView .recommendation-work-thumbs{overflow-x:auto!important;display:grid!important;grid-auto-flow:column!important;grid-auto-columns:92px!important;gap:8px!important;scrollbar-width:none!important}
  #homeView .recommendation-work-thumbs::-webkit-scrollbar{display:none}
  #homeView .recommendation-shelf-actions{display:grid!important;grid-template-columns:1fr 1fr!important}

  #homeView .collection-shelf-head h3{font-size:16px!important}
  #homeView .collection-shelf-head p{display:none!important}
}

@media(max-width:390px){
  .tappy-home-library-link{display:none!important}
  #homeView .exact-feature-copy h2{font-size:27px!important}
  #homeView .feature-mini-work{width:94px!important}
  #homeView .exact-poster-rail{grid-auto-columns:128px!important}
  #homeView .exact-shelves .platform-shelf-track{grid-auto-columns:128px!important}
}

@media(prefers-reduced-motion:reduce){
  #homeView .exact-feature-background,
  #homeView .exact-auto-update i{animation:none!important}
  #homeView .tt-stagger-card,#homeView .exact-content-section,#homeView .exact-feature-carousel,#homeView .mi-quick-tabs{opacity:1!important;transform:none!important}
}

/* ===== mi-completed-dedicated-page ===== */
/* Three compact buttons at the top of Home */
#homeView .mi-category-tabs{
  grid-template-columns:repeat(3,minmax(180px,260px))!important;
  justify-content:start!important;
}
#homeView .mi-category-tabs>button{
  min-width:190px!important;
}
#homeView .completed-quick-link{
  border-color:color-mix(in srgb,var(--accent) 22%,var(--line))!important;
}
#homeView .completed-quick-icon{
  display:grid!important;
  place-items:center!important;
}
#homeView .completed-quick-icon svg{
  width:30px;
  height:30px;
}

/* Dedicated completed page */
#completedView{
  --completed-page-max:1440px;
}
#completedView .completed-page-head{
  max-width:var(--completed-page-max);
  margin-inline:auto;
}
#completedView .completed-page-head>div{
  max-width:760px;
}
#completedView .completed-page-head h1{
  margin-bottom:8px;
}
#completedView .completed-page-head p{
  max-width:700px;
}

#completedView .completed-selected-genres{
  max-width:var(--completed-page-max);
  margin:0 auto clamp(24px,4vw,44px);
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}
#completedView .completed-selected-genres span{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:6px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--surface);
  color:var(--text);
  font-size:9px;
  font-weight:800;
  transition:transform .18s ease,border-color .18s ease;
}
#completedView .completed-selected-genres span:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--accent) 35%,var(--line));
}

#completedView .completed-page-zone{
  max-width:var(--completed-page-max);
  margin-inline:auto;
  padding:0 0 clamp(54px,8vw,100px);
}
#completedView .completed-genre-sections{
  display:grid;
  gap:clamp(40px,6vw,76px);
}
#completedView .completed-genre-shelf{
  position:relative;
  margin:0!important;
}
#completedView .completed-genre-shelf+.completed-genre-shelf{
  padding-top:clamp(30px,4vw,52px);
  border-top:1px solid color-mix(in srgb,var(--line) 78%,transparent);
}
#completedView .completed-genre-header{
  align-items:flex-end!important;
  margin-bottom:16px!important;
}
#completedView .completed-genre-header>div{
  min-width:0;
}
#completedView .completed-genre-header .eyebrow{
  display:block;
  margin-bottom:5px;
}
#completedView .completed-genre-header h2{
  margin:0;
  font-size:clamp(22px,2.6vw,34px);
}
#completedView .completed-genre-header p{
  margin:6px 0 0;
  color:var(--muted);
  font-size:9px;
}
#completedView .completed-genre-rail{
  scroll-padding-inline:18px;
}
#completedView .completed-genre-rail .poster-card{
  animation:miCompletedPageCardIn .42s cubic-bezier(.2,.78,.24,1) both;
}
#completedView .completed-genre-rail .poster-card:nth-child(2){animation-delay:.025s}
#completedView .completed-genre-rail .poster-card:nth-child(3){animation-delay:.05s}
#completedView .completed-genre-rail .poster-card:nth-child(4){animation-delay:.075s}
#completedView .completed-genre-rail .poster-card:nth-child(5){animation-delay:.1s}
#completedView .completed-genre-rail .poster-card:nth-child(6){animation-delay:.125s}

#completedView #completedPreferenceEmpty{
  max-width:760px;
  margin:40px auto;
  min-height:190px;
  display:grid;
  place-content:center;
  gap:7px;
  text-align:center;
  border:1px dashed var(--line);
  border-radius:24px;
  padding:30px;
}
#completedView #completedPreferenceEmpty.hidden{
  display:none!important;
}
#completedView #completedPreferenceEmpty strong{
  font-size:18px;
}
#completedView #completedPreferenceEmpty span{
  color:var(--muted);
  font-size:10px;
  line-height:1.8;
}

@keyframes miCompletedPageCardIn{
  from{
    opacity:0;
    transform:translateY(10px) scale(.985);
  }
  to{
    opacity:1;
    transform:none;
  }
}

@media(max-width:740px){
  #homeView .mi-category-tabs{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:7px!important;
    overflow:visible!important;
  }
  #homeView .mi-category-tabs>button{
    min-width:0!important;
    width:100%!important;
    padding-inline:8px!important;
  }
  #homeView .mi-category-tabs .quick-tab-copy strong{
    font-size:10px!important;
  }
  #homeView .mi-category-tabs .quick-tab-copy small{
    font-size:7px!important;
  }
  #homeView .completed-quick-icon svg{
    width:25px;
    height:25px;
  }

  #completedView .completed-page-head{
    align-items:flex-start!important;
  }
  #completedView .completed-page-head #completedEditPreferencesButton{
    width:100%;
  }
  #completedView .completed-selected-genres{
    gap:6px;
    margin-bottom:26px;
  }
  #completedView .completed-selected-genres span{
    min-height:28px;
    padding:5px 9px;
    font-size:8px;
  }
  #completedView .completed-genre-sections{
    gap:38px;
  }
  #completedView .completed-genre-shelf+.completed-genre-shelf{
    padding-top:30px;
  }
  #completedView .completed-genre-header{
    align-items:center!important;
    gap:10px!important;
  }
  #completedView .completed-genre-header h2{
    font-size:20px;
  }
}

@media(prefers-reduced-motion:reduce){
  #completedView .completed-genre-rail .poster-card{
    animation:none!important;
  }
}

/* ===== mi-svg-icon-system ===== */
.mi-icon,
.mi-ui-icon{
  width:1.2em;
  height:1.2em;
  display:inline-grid;
  place-items:center;
  flex:0 0 auto;
  line-height:0;
  color:currentColor;
  vertical-align:-.16em;
}
.mi-icon svg,
.mi-ui-icon svg{
  width:100%;
  height:100%;
  display:block;
  overflow:visible;
  stroke:currentColor;
  fill:none;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.mi-icon svg path[fill],
.mi-ui-icon svg path[fill]{
  stroke:none;
}
.mi-rating-icon{
  width:14px;
  height:14px;
  color:#f1b93c;
  vertical-align:-2px;
}
.mi-rating-icon svg{
  fill:currentColor;
  stroke:currentColor;
  stroke-width:1.1;
}
.mi-follow-glyph{
  width:16px;
  height:16px;
}
.mi-follow-glyph svg{stroke-width:2}
.mi-genre-svg{
  width:24px;
  height:24px;
}
.mi-collection-svg{
  width:22px;
  height:22px;
}
.mi-small-collection-svg{
  width:15px;
  height:15px;
}
.mi-warning-icon{
  width:22px;
  height:22px;
  color:#ef8a42;
}
.mi-vote-svg{
  width:32px;
  height:32px;
}
.mi-origin-svg{
  width:17px;
  height:17px;
}
.mi-search-svg{
  width:18px;
  height:18px;
}
.mi-edit-svg{
  width:16px;
  height:16px;
}
.mi-bell-svg{
  width:20px;
  height:20px;
}

/* Decorative sparkles that used text glyphs are now pure CSS geometry. */
#workDetailView .modern-editor-note>span::before,
.personalized-reason::before{
  content:""!important;
  width:7px!important;
  height:7px!important;
  display:inline-block!important;
  background:currentColor!important;
  border-radius:2px!important;
  transform:rotate(45deg)!important;
  margin-inline-end:6px!important;
  font-size:0!important;
}

/* Vote icons */
.recommendation-modal-icon{
  font-size:0!important;
}
.recommendation-modal-icon .mi-icon{
  width:38px;
  height:38px;
}
.recommendation-modal-icon[data-choice="recommend"]{color:#189b59}
.recommendation-modal-icon[data-choice="acceptable"]{color:#b48a00}
.recommendation-modal-icon[data-choice="not-recommend"]{color:#d24450}

/* Genre selector */
.preference-multi-icon{
  font-size:0!important;
}
.preference-multi-icon .mi-icon{
  width:23px;
  height:23px;
}
.preference-multi-check{
  font-size:0!important;
}
.preference-multi-check .mi-icon{
  width:12px;
  height:12px;
}

/* Collection symbols are icons, not text glyphs. */
.collection-icon,
.shelf-avatar,
.recommendation-shelf-kicker i,
.collection-card-title-icon,
.choice-item-icon{
  display:grid;
  place-items:center;
  font-style:normal;
}
.shelf-avatar .mi-icon{
  width:24px;
  height:24px;
}
.recommendation-shelf-kicker i .mi-icon{
  width:14px;
  height:14px;
}
.collection-card-title-icon .mi-icon{
  width:18px;
  height:18px;
}

/* Search/admin icon containers */
.discover-search-icon,
.manager-toolbar>label>span:first-child{
  font-size:0!important;
}
.discover-search-icon .mi-icon,
.manager-toolbar>label>span:first-child .mi-icon{
  width:18px;
  height:18px;
}

/* Profile edit badge */
.profile-avatar-edit-badge{
  font-size:0!important;
}
.profile-avatar-edit-badge .mi-icon{
  width:14px;
  height:14px;
}

/* Notification note */
.announcement-notification-note>span{
  font-size:0!important;
}
.announcement-notification-note>span .mi-icon{
  width:21px;
  height:21px;
}

/* Star/rating rows */
[data-user-rating-work],
.top-collection-score,
.shelf-rating,
.personalized-rating,
.profile-activity-row>span,
.mu-result-title-line>span{
  display:inline-flex;
  align-items:center;
  gap:4px;
}

/* Spoiler warning */
.spoiler-review-warning>span{
  font-size:0!important;
  display:grid;
  place-items:center;
}

/* No emoji font fallback anywhere in UI icon slots. */
.mi-icon,
.mi-ui-icon,
.preference-multi-icon,
.shelf-avatar,
.collection-icon{
  font-family:inherit!important;
}

/* ===== mi-home-custom-icons-and-full-page-glow ===== */
/* =========================================================
   Quick icons — New / Popular / Completed
   ========================================================= */
#homeView .mi-quick-icon-svg{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  border:1px solid color-mix(in srgb,var(--line) 76%,transparent)!important;
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb,var(--surface) 94%,transparent),
      color-mix(in srgb,var(--surface2) 84%,transparent)
    )!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 8px 24px rgba(0,0,0,.10);
}

#homeView .mi-quick-icon-svg::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:.95;
  background:
    radial-gradient(
      circle at 24% 18%,
      color-mix(in srgb,var(--quick-icon-accent) 26%,transparent),
      transparent 55%
    );
}

#homeView .mi-home-quick-svg{
  width:25px!important;
  height:25px!important;
  transition:
    transform .28s cubic-bezier(.2,.75,.25,1),
    filter .28s ease;
}

#homeView .mi-home-quick-svg svg{
  stroke-width:1.75!important;
}

#homeView .mi-quick-icon-new{
  --quick-icon-accent:#58d7cd;
  color:#35c4b9!important;
}

#homeView .mi-quick-icon-popular{
  --quick-icon-accent:#a97af8;
  color:#9a68ee!important;
}

#homeView .mi-quick-icon-completed{
  --quick-icon-accent:#66a6ff;
  color:#568fe7!important;
}

#homeView .mi-quick-tabs button:hover .mi-home-quick-svg{
  transform:translateY(-2px) scale(1.08) rotate(-2deg);
}

#homeView .mi-quick-tabs button.active .mi-home-quick-svg{
  transform:scale(1.08);
  filter:
    drop-shadow(
      0 5px 9px
      color-mix(in srgb,var(--quick-icon-accent) 38%,transparent)
    );
}

#homeView .mi-quick-icon-svg::after{
  content:"";
  position:absolute;
  width:22px;
  height:44px;
  top:-12px;
  left:-32px;
  transform:rotate(26deg);
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.30),
      transparent
    );
  transition:left .48s cubic-bezier(.2,.7,.25,1);
}

#homeView .mi-quick-tabs button:hover .mi-quick-icon-svg::after{
  left:56px;
}

/* ===== mi-work-edit-fix-ui ===== */
#adminView #editorPanel.active #editorHeading{
  scroll-margin-top:100px;
}
#adminView #editorPanel.active #editingWorkId:not([value=""]) ~ .editor-topline{
  position:relative;
}
#adminView #editorPanel.active .editor-topline::after{
  content:"";
  position:absolute;
  inset-inline-start:0;
  bottom:-9px;
  width:42px;
  height:2px;
  border-radius:999px;
  background:var(--accent);
  opacity:.7;
}

/* ===== mi-performance-cleanup ===== */
#homeView .exact-content-section,
#groupsView .groups-shelves-list > *,
#discoverView .platform-poster-grid > *,
#completedView .completed-genre-shelf,
#followingView .follow-list > *{
 content-visibility:auto;
 contain-intrinsic-size:auto 420px;
}
.library-page-head,.completed-page-head{grid-template-columns:1fr!important}
@media(max-width:740px){
 .member-dock{backdrop-filter:blur(12px)!important}
 .site-header{backdrop-filter:blur(10px)!important}
}
@media(prefers-reduced-motion:reduce){
 .reveal{transition:none!important;transform:none!important;opacity:1!important}
}

/* ===== mi-performance-glow-interactions ===== */
/* =========================================================
   Lightweight global glow
   No giant blur layers, no continuously moving filters.
   ========================================================= */
html,
body{
  background-color:var(--bg)!important;
}

body{
  position:relative;
  isolation:isolate;
}

/* One fixed pseudo layer is considerably cheaper than multiple
   blurred animated elements. */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-10;
  pointer-events:none;
  background:
    radial-gradient(
      720px 520px at 100% 0%,
      rgba(126,84,246,.10),
      transparent 68%
    ),
    radial-gradient(
      620px 500px at 0% 48%,
      rgba(39,193,181,.065),
      transparent 70%
    ),
    radial-gradient(
      680px 520px at 88% 100%,
      rgba(78,111,246,.055),
      transparent 70%
    );
}

/* Slightly stronger Home glow, still static and cheap. */
#homeView{
  background:
    radial-gradient(
      820px 560px at 106% 4%,
      rgba(135,87,255,.085),
      transparent 70%
    ),
    radial-gradient(
      720px 520px at -8% 44%,
      rgba(36,198,186,.060),
      transparent 72%
    )!important;
}

body.light::before{
  opacity:.58;
}
body.light #homeView{
  background:
    radial-gradient(
      820px 560px at 106% 4%,
      rgba(135,87,255,.040),
      transparent 70%
    ),
    radial-gradient(
      720px 520px at -8% 44%,
      rgba(36,198,186,.030),
      transparent 72%
    )!important;
}

/* =========================================================
   Desktop hover system — CSS only
   ========================================================= */
@media (hover:hover) and (pointer:fine) and (min-width:900px){

  button,
  .dock-item,
  .platform-poster-card,
  .collection-card,
  .recommendation-shelf,
  .top-collection-card,
  .profile-stat,
  .library-status-card,
  .detail-tab,
  .notification-item,
  .admin-row,
  .work-comment-card,
  .preference-multi-option{
    transition:
      transform .18s ease,
      box-shadow .18s ease,
      border-color .18s ease;
  }

  button:not(:disabled):hover{
    transform:translateY(-1px);
  }
  button:not(:disabled):active{
    transform:translateY(0) scale(.99);
  }

  .dock-item:hover{
    transform:translateY(-2px);
  }

  .platform-poster-card{
    overflow:hidden;
  }
  .platform-poster-card:hover{
    transform:translateY(-5px) scale(1.01);
    box-shadow:0 14px 30px rgba(0,0,0,.14);
  }
  .platform-poster-card img{
    transition:transform .24s ease;
  }
  .platform-poster-card:hover img{
    transform:scale(1.025);
  }

  .collection-card:hover,
  .recommendation-shelf:hover,
  .top-collection-card:hover{
    transform:translateY(-4px);
    border-color:color-mix(in srgb,var(--accent) 24%,var(--line))!important;
    box-shadow:0 12px 26px rgba(0,0,0,.11);
  }

  .profile-stat:hover,
  .library-status-card:hover,
  .work-comment-card:hover{
    transform:translateY(-2px);
    border-color:color-mix(in srgb,var(--accent) 20%,var(--line));
  }

  .admin-row:hover,
  .notification-item:hover{
    transform:translateX(-2px);
  }

  .preference-multi-option:hover{
    transform:translateY(-2px);
    border-color:color-mix(in srgb,var(--accent) 24%,var(--line))!important;
  }

  .detail-tab{
    position:relative;
  }
  .detail-tab::after{
    content:"";
    position:absolute;
    inset-inline:28%;
    bottom:2px;
    height:2px;
    border-radius:999px;
    background:currentColor;
    transform:scaleX(0);
    transition:transform .18s ease;
    opacity:.55;
  }
  .detail-tab:hover::after,
  .detail-tab.active::after{
    transform:scaleX(1);
  }

  input,
  textarea,
  select{
    transition:border-color .16s ease,box-shadow .16s ease;
  }
  input:focus,
  textarea:focus,
  select:focus{
    box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent);
  }
}

/* Touch devices: no decorative transitions. */
@media(max-width:899px), (hover:none){
  body::before{
    background:
      radial-gradient(
        420px 340px at 110% 0%,
        rgba(126,84,246,.07),
        transparent 72%
      ),
      radial-gradient(
        400px 340px at -12% 62%,
        rgba(39,193,181,.045),
        transparent 74%
      );
  }
}

/* Accessibility */
@media(prefers-reduced-motion:reduce){
  button,
  .dock-item,
  .platform-poster-card,
  .collection-card,
  .recommendation-shelf,
  .top-collection-card,
  .profile-stat,
  .library-status-card,
  .detail-tab,
  .notification-item,
  .admin-row,
  .work-comment-card,
  .preference-multi-option,
  .platform-poster-card img{
    transition:none!important;
  }

  button:hover,
  .dock-item:hover,
  .platform-poster-card:hover,
  .collection-card:hover,
  .recommendation-shelf:hover,
  .top-collection-card:hover,
  .profile-stat:hover,
  .library-status-card:hover,
  .notification-item:hover,
  .admin-row:hover,
  .work-comment-card:hover,
  .preference-multi-option:hover{
    transform:none!important;
  }
}

/* ===== mi-extra-performance-hints ===== */
/* Avoid painting long off-screen views until needed. */
.view:not(.active){
  content-visibility:hidden;
}

/* Allow browser to skip off-screen heavy sections. */
.exact-content-section,
.recommendation-shelf,
.completed-genre-shelf,
.work-comments-dashboard,
.admin-panel{
  content-visibility:auto;
  contain-intrinsic-size:1px 420px;
}

/* Avoid expensive image interpolation while scrolling. */
img{
  backface-visibility:hidden;
}

/* ===== mi-production-release-polish ===== */
.theme-brand-logo{
  display:grid;
  place-items:center;
}
.theme-brand-logo .brand-logo-dark,
.production-welcome-logo .brand-logo-dark{
  display:none;
}
body:not(.light) .theme-brand-logo .brand-logo-light,
body:not(.light) .production-welcome-logo .brand-logo-light{
  display:none;
}
body:not(.light) .theme-brand-logo .brand-logo-dark,
body:not(.light) .production-welcome-logo .brand-logo-dark{
  display:block;
}

/* Keep the main brand readable without the old pointer-follow animation. */
.instagram-brand-link{
  --brand-rx:0deg!important;
  --brand-ry:0deg!important;
}
.instagram-brand-link::before,
.instagram-brand-link::after,
.instagram-brand-shell::after{
  animation:none!important;
}

.production-welcome-card{
  width:min(680px,calc(100vw - 28px))!important;
  padding:clamp(26px,4vw,46px)!important;
  border-radius:28px!important;
  text-align:center;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% -15%,color-mix(in srgb,var(--accent) 15%,transparent),transparent 46%),
    var(--surface)!important;
}

.production-welcome-logo{
  width:min(430px,78vw);
  min-height:78px;
  margin:0 auto 22px;
  display:grid;
  place-items:center;
  padding:14px 20px;
  border:1px solid color-mix(in srgb,var(--accent) 13%,var(--line));
  border-radius:20px;
  background:color-mix(in srgb,var(--surface2) 92%,var(--accent) 2%);
}

.welcome-production-logo{
  display:block;
  width:100%;
  height:auto;
  max-height:78px;
  object-fit:contain;
}

.production-welcome-kicker{
  display:block;
  margin-bottom:9px;
  color:var(--accent2,var(--accent));
  font-size:10px;
  font-weight:800;
}

.production-welcome-card h2{
  max-width:580px;
  margin:0 auto!important;
  font-size:clamp(28px,4vw,43px)!important;
  line-height:1.28;
  letter-spacing:-.035em;
}

.production-welcome-copy{
  max-width:570px;
  margin:14px auto 0!important;
  color:var(--muted)!important;
  font-size:11px!important;
  line-height:1.95!important;
}

.production-welcome-features{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
  margin:24px 0 18px;
}

.production-welcome-features>div{
  min-width:0;
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  align-items:center;
  gap:9px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:15px;
  background:color-mix(in srgb,var(--surface2) 94%,transparent);
  text-align:right;
}

.production-welcome-feature-icon{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:11px;
  background:color-mix(in srgb,var(--accent) 9%,var(--surface));
  color:var(--accent2,var(--accent));
}

.production-welcome-feature-icon svg{
  width:18px;
  height:18px;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.production-welcome-features strong,
.production-welcome-features small{
  display:block;
}

.production-welcome-features strong{
  font-size:10px;
}

.production-welcome-features small{
  margin-top:3px;
  color:var(--muted);
  font-size:8px;
  line-height:1.5;
}

.production-welcome-start{
  width:100%;
  min-height:48px;
  margin-top:3px;
  border-radius:14px!important;
  font-size:11px!important;
}

.production-welcome-instagram{
  display:inline-block;
  margin-top:14px;
  color:var(--muted);
  font-size:9px;
  text-decoration:none;
}

.production-welcome-instagram:hover{
  color:var(--text);
}

@media(max-width:640px){
  .production-welcome-card{
    padding:24px 17px!important;
    border-radius:23px!important;
  }

  .production-welcome-logo{
    width:min(360px,82vw);
    min-height:64px;
    margin-bottom:18px;
    padding:12px 15px;
  }

  .welcome-production-logo{
    max-height:58px;
  }

  .production-welcome-card h2{
    font-size:29px!important;
  }

  .production-welcome-copy{
    font-size:10px!important;
  }

  .production-welcome-features{
    grid-template-columns:1fr;
    gap:7px;
    margin:18px 0 14px;
  }

  .production-welcome-features>div{
    padding:9px 11px;
  }
}

/* ===== mi-scalable-catalog-ui ===== */
.catalog-pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin:28px 0 6px;
}
.catalog-pagination span{
  min-width:110px;
  text-align:center;
  color:var(--muted);
  font-size:9px;
  font-weight:700;
}
.catalog-pagination button{
  min-width:92px;
}
.catalog-pagination button:disabled{
  opacity:.38;
  cursor:not-allowed;
  transform:none!important;
}
.catalog-loading-grid{
  opacity:.55;
  pointer-events:none;
}
.catalog-loading-card{
  min-height:290px;
  border-radius:20px;
  background:
    linear-gradient(90deg,
      color-mix(in srgb,var(--surface2) 88%,transparent),
      color-mix(in srgb,var(--surface3) 92%,transparent),
      color-mix(in srgb,var(--surface2) 88%,transparent)
    );
  background-size:220% 100%;
  animation:miCatalogPulse 1.25s ease-in-out infinite;
}
@keyframes miCatalogPulse{
  from{background-position:100% 0}
  to{background-position:-100% 0}
}
.collection-work-picker-toolbar{
  display:flex;
  align-items:center;
  gap:10px;
  margin:12px 0;
}
.collection-work-picker-toolbar input{
  flex:1;
  min-width:0;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--surface2);
  color:var(--text);
  padding:11px 13px;
  outline:none;
}
.collection-work-picker-toolbar span{
  white-space:nowrap;
  color:var(--muted);
  font-size:8px;
}
.comments-load-more{
  display:block;
  margin:14px auto 0;
  min-width:190px;
}
.scalable-status-note{
  color:var(--muted);
  font-size:8px;
  text-align:center;
  padding:10px;
}
@media(max-width:640px){
  .catalog-pagination{
    gap:8px;
  }
  .catalog-pagination span{
    min-width:84px;
    font-size:8px;
  }
  .catalog-pagination button{
    min-width:76px;
    padding-inline:11px;
  }
  .collection-work-picker-toolbar{
    align-items:stretch;
    flex-direction:column;
  }
  .collection-work-picker-toolbar span{
    align-self:flex-start;
  }
}
@media(prefers-reduced-motion:reduce){
  .catalog-loading-card{animation:none!important}
}

/* ===== mi-scalable-light-motion ===== */
@media (hover:hover) and (pointer:fine){
  .platform-poster-card,
  .recommendation-shelf-card,
  .collection-card{
    transition:transform .18s ease,box-shadow .18s ease;
  }
  .platform-poster-card:hover,
  .recommendation-shelf-card:hover,
  .collection-card:hover{
    transform:translateY(-3px);
  }
}

/* ===== mi-report-system ===== */
/* Work header report button */
#workDetailView .tappy-detail-header{
  grid-template-columns:52px minmax(0,1fr) 108px!important;
}
#workDetailView .tappy-detail-back-actions{
  grid-column:3!important;
  grid-row:1!important;
  justify-self:end!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  direction:ltr!important;
  position:relative!important;
  z-index:42!important;
}
#workDetailView .tappy-detail-back-actions #workBackButton{
  grid-column:auto!important;
  grid-row:auto!important;
  justify-self:auto!important;
}
#workDetailView .tappy-header-report-button{
  width:48px;
  height:48px;
  min-width:48px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--surface);
  color:var(--muted);
  cursor:pointer;
}
#workDetailView .tappy-header-report-button:hover{
  color:#e2525f;
  border-color:color-mix(in srgb,#e2525f 38%,var(--line));
  background:color-mix(in srgb,#e2525f 7%,var(--surface));
}
#workDetailView .tappy-header-report-button svg{
  width:22px;
  height:22px;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Home report CTA */
.home-report-strip{
  max-width:1180px;
  margin:38px auto 6px;
  display:grid;
  grid-template-columns:48px minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  padding:16px 18px;
  border:1px solid var(--line);
  border-radius:20px;
  background:
    radial-gradient(circle at 0 50%,rgba(226,82,95,.055),transparent 36%),
    color-mix(in srgb,var(--surface2) 94%,transparent);
}
.home-report-strip-icon{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:15px;
  background:color-mix(in srgb,#e2525f 9%,var(--surface));
  color:#d84d59;
}
.home-report-strip-icon svg{
  width:23px;
  height:23px;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.home-report-strip-copy strong,
.home-report-strip-copy span{
  display:block;
}
.home-report-strip-copy strong{
  font-size:13px;
}
.home-report-strip-copy span{
  margin-top:3px;
  color:var(--muted);
  font-size:9px;
}
.home-report-strip-button{
  min-width:112px;
}

/* Report modal */
.report-modal-backdrop{
  position:fixed;
  inset:0;
  z-index:10050;
  display:grid;
  place-items:center;
  padding:18px;
  background:rgba(5,7,11,.62);
  backdrop-filter:blur(10px);
}
.report-modal-card{
  position:relative;
  width:min(560px,100%);
  padding:28px;
  border:1px solid var(--line);
  border-radius:24px;
  background:var(--surface);
  box-shadow:0 30px 90px rgba(0,0,0,.28);
}
.report-modal-close{
  position:absolute;
  top:14px;
  left:14px;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface2);
  color:var(--text);
  cursor:pointer;
}
.report-modal-icon{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  margin-bottom:16px;
  border-radius:15px;
  background:color-mix(in srgb,#e2525f 10%,var(--surface2));
  color:#d84d59;
}
.report-modal-icon svg{
  width:24px;
  height:24px;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.report-modal-card h2{
  margin:6px 0 0;
  font-size:26px;
}
.report-modal-context{
  margin:9px 0 18px;
  color:var(--muted);
  font-size:10px;
  line-height:1.75;
}
.report-reason-field{
  display:grid;
  gap:8px;
}
.report-reason-field>span{
  font-size:10px;
  font-weight:800;
}
.report-reason-field textarea{
  width:100%;
  min-height:150px;
  resize:vertical;
  border:1px solid var(--line);
  border-radius:15px;
  padding:14px;
  background:var(--surface2);
  color:var(--text);
  outline:none;
  line-height:1.8;
}
.report-reason-field textarea:focus{
  border-color:color-mix(in srgb,var(--accent) 52%,var(--line));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent);
}
.report-modal-meta{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:7px;
  color:var(--muted);
}
.report-modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:9px;
  margin-top:18px;
}

/* Comment report button */
#workDetailView .comment-report-button{
  color:var(--muted)!important;
}
#workDetailView .comment-report-button:hover{
  color:#d84d59!important;
}

/* Admin reports */
#adminView .admin-dashboard{
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.admin-tabs [data-admin-tab="reports"]{
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.admin-report-tab-badge{
  display:inline-grid;
  place-items:center;
  min-width:20px;
  height:20px;
  margin-inline-start:5px;
  padding:0 6px;
  border-radius:999px;
  background:#d84d59;
  color:#fff;
  font-size:8px;
  font-weight:800;
}
.reports-admin-shell{
  display:grid;
  gap:18px;
}
.reports-admin-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  padding:20px;
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--surface);
}
.reports-admin-head h2{
  margin:4px 0 0;
}
.reports-admin-head p{
  margin:7px 0 0;
  color:var(--muted);
  font-size:9px;
}
.reports-admin-controls{
  display:flex;
  align-items:center;
  gap:8px;
}
.reports-admin-controls select{
  min-height:42px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface2);
  color:var(--text);
  padding:0 12px;
}
.admin-reports-list{
  display:grid;
  gap:11px;
}
.admin-report-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:14px;
  padding:17px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--surface);
}
.admin-report-card.is-pending{
  border-color:color-mix(in srgb,#d84d59 22%,var(--line));
}
.admin-report-main{
  min-width:0;
}
.admin-report-topline{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
}
.admin-report-type,
.admin-report-status{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:0 8px;
  border-radius:999px;
  font-size:8px;
  font-weight:800;
}
.admin-report-type{
  background:color-mix(in srgb,var(--accent) 9%,var(--surface2));
  color:var(--accent);
}
.admin-report-status.pending{
  background:rgba(226,82,95,.10);
  color:#d84d59;
}
.admin-report-status.resolved{
  background:rgba(37,173,113,.10);
  color:#15935d;
}
.admin-report-status.dismissed{
  background:rgba(120,126,138,.12);
  color:var(--muted);
}
.admin-report-card h3{
  margin:10px 0 0;
  font-size:14px;
  overflow-wrap:anywhere;
}
.admin-report-reason{
  margin:8px 0 0;
  color:var(--text);
  font-size:10px;
  line-height:1.85;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
.admin-report-meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px 12px;
  margin-top:10px;
  color:var(--muted);
  font-size:8px;
}
.admin-report-actions{
  min-width:132px;
  display:flex;
  flex-direction:column;
  gap:7px;
}
.admin-report-actions button{
  width:100%;
}
.admin-report-delete{
  color:#d84d59!important;
}

@media(max-width:740px){
  #workDetailView .tappy-detail-header{
    grid-template-columns:44px minmax(0,1fr) 96px!important;
  }
  #workDetailView .tappy-header-report-button,
  #workDetailView .tappy-detail-back-actions #workBackButton{
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
  }
  .home-report-strip{
    grid-template-columns:42px minmax(0,1fr);
  }
  .home-report-strip-icon{
    width:42px;
    height:42px;
  }
  .home-report-strip-button{
    grid-column:1/-1;
    width:100%;
  }
  .report-modal-card{
    padding:22px 16px 18px;
    border-radius:20px;
  }
  .reports-admin-head{
    align-items:stretch;
    flex-direction:column;
  }
  .reports-admin-controls{
    width:100%;
  }
  .reports-admin-controls select,
  .reports-admin-controls button{
    flex:1;
  }
  .admin-report-card{
    grid-template-columns:1fr;
  }
  .admin-report-actions{
    min-width:0;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* ===== mi-tappytoon-home-press-v1 ===== */
#homeView .tt-pressed{transform:scale(.985)!important;transition-duration:.08s!important}

/* ===== Web Push / PWA ===== */
.push-device-card{
  display:grid;
  grid-template-columns:48px minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  margin:2px 0 18px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:19px;
  background:color-mix(in srgb,var(--surface2) 86%,transparent);
}
.push-device-icon{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:15px;
  background:color-mix(in srgb,var(--accent) 9%,var(--surface));
  color:var(--text);
}
.push-device-icon svg{
  width:23px;
  height:23px;
  stroke:currentColor;
  stroke-width:1.75;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.push-device-copy{
  min-width:0;
  display:grid;
  gap:4px;
}
.push-device-copy strong{
  font-size:13px;
}
.push-device-copy span{
  color:var(--muted);
  font-size:9px;
  line-height:1.65;
}
.push-device-copy small{
  font-size:8px;
  color:var(--muted);
}
.push-device-copy small.is-active{
  color:#15935d;
}
.push-device-copy small.is-error{
  color:#d84d59;
}
.push-device-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  flex-wrap:wrap;
}
.push-device-actions button{
  min-width:76px;
}
.push-disable-button{
  color:#d84d59!important;
}
.push-inline-status{
  grid-column:2/-1;
  margin:0!important;
}
@media(max-width:640px){
  .push-device-card{
    grid-template-columns:42px minmax(0,1fr);
    align-items:start;
  }
  .push-device-icon{
    width:42px;
    height:42px;
  }
  .push-device-actions{
    grid-column:1/-1;
    justify-content:stretch;
  }
  .push-device-actions button{
    flex:1;
  }
  .push-inline-status{
    grid-column:1/-1;
  }
}


/* ===== Recommendations publishing/admin directory ===== */
.recommendations-directory-head{display:flex;align-items:end;justify-content:space-between;gap:24px}
.recommendations-directory-count{min-width:130px;display:grid;gap:2px;text-align:left}
.recommendations-directory-count strong{font:900 clamp(30px,5vw,54px)/1 Arial,sans-serif}
.recommendations-directory-count span{font-size:8px;color:var(--muted)}
.recommendations-directory-toolbar{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:10px;margin:22px 0 10px}
.recommendations-directory-search{display:flex;align-items:center;gap:9px;padding:0 12px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.recommendations-directory-search svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.8}
.recommendations-directory-search input{width:100%;border:0;outline:0;background:transparent;color:var(--text);padding:13px 2px;font-size:9px}
.recommendations-directory-sort{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:8px;padding:0 10px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.recommendations-directory-sort span{font-size:7px;color:var(--muted)}
.recommendations-directory-sort select{min-width:0;border:0;outline:0;background:transparent;color:var(--text);font-size:8px;padding:12px 0}
.recommendations-directory-summary{min-height:24px;color:var(--muted);font-size:8px;padding:4px 2px 12px}
.admin-recommendations-toolbar{display:flex;justify-content:space-between;align-items:center;gap:18px;margin:22px 0;padding:18px;border:1px solid var(--line);border-radius:18px;background:var(--surface)}
.admin-recommendations-toolbar span{font-size:7px;color:var(--muted);letter-spacing:.8px}
.admin-recommendations-toolbar h2{margin:5px 0;font-size:20px}
.admin-recommendations-toolbar p{margin:0;color:var(--muted);font-size:8px;line-height:1.8}
.collection-publish-control{margin:12px 0 4px;padding:13px;border:1px solid var(--line);border-radius:14px;background:var(--surface2)}
.collection-publish-control label{display:flex;align-items:flex-start;gap:11px;cursor:pointer}
.collection-publish-control input{width:19px;height:19px;accent-color:var(--accent);margin-top:2px}
.collection-publish-control span{display:grid;gap:3px}
.collection-publish-control strong{font-size:9px}
.collection-publish-control small{font-size:7px;line-height:1.6;color:var(--muted)}
.admin-recommendations-list-shell{min-width:0}
.admin-recommendations-list-toolbar{display:grid!important;grid-template-columns:minmax(120px,.65fr) minmax(160px,1fr) 130px!important;align-items:center!important;gap:9px!important}
.admin-recommendations-list-toolbar>div{display:grid;gap:3px}
.admin-recommendations-list-toolbar small{font-size:7px;color:var(--muted)}
.admin-recommendations-list-toolbar label{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:11px;background:var(--surface2);padding:0 9px}
.admin-recommendations-list-toolbar label svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.8}
.admin-recommendations-list-toolbar input{border:0;outline:0;background:transparent;color:var(--text);font-size:8px;padding:10px;width:100%}
.admin-recommendations-list-toolbar>select{border:1px solid var(--line);border-radius:11px;background:var(--surface2);padding:10px;color:var(--text);font-size:8px}
.manage-collection-row .recommendation-admin-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:5px}
.recommendation-status-badge{display:inline-flex;align-items:center;padding:4px 7px;border-radius:999px;font-size:6px;font-weight:800;background:var(--surface2);border:1px solid var(--line)}
.recommendation-status-badge.published{color:#15935d;border-color:color-mix(in srgb,#15935d 35%,var(--line));background:color-mix(in srgb,#15935d 8%,var(--surface))}
.recommendation-status-badge.draft{color:#aa7a12;border-color:color-mix(in srgb,#aa7a12 35%,var(--line));background:color-mix(in srgb,#aa7a12 8%,var(--surface))}
.row-actions .open-recommendation{white-space:nowrap}
@media(max-width:760px){
 .recommendations-directory-head{align-items:flex-start;flex-direction:column}
 .recommendations-directory-count{text-align:right}
 .recommendations-directory-toolbar{grid-template-columns:1fr}
 .admin-recommendations-toolbar{align-items:stretch;flex-direction:column}
 .admin-recommendations-list-toolbar{grid-template-columns:1fr!important}
}


/* v8.2 performance + alternate-title details */
.unified-detail-row-wide{grid-column:1/-1}.unified-detail-row-wide .unified-detail-copy strong{line-height:1.9;word-break:break-word}
.poster-card,.platform-poster-card,.recommendation-shelf-card,.modern-info-section{content-visibility:auto;contain-intrinsic-size:320px 420px}
#workDetailView .modern-info-section{contain:layout style paint}
@media(max-width:740px){#workDetailView .series-hero-blur{filter:blur(10px)!important;transform:scale(1.04)!important}.work-detail-glow,.ambient{animation:none!important}.modern-info-section{content-visibility:auto;contain-intrinsic-size:480px}}



/* ===== v8.2.3 performance layer: rendering only, no visual redesign ===== */
.collection-shelf,
.recommendation-shelf-card,
.content-section,
.work-comments-dashboard,
.collection-detail-shell {
  content-visibility:auto;
  contain-intrinsic-size:auto 560px;
}

@media (max-width: 900px) {
  .collection-shelf,
  .recommendation-shelf-card,
  .content-section {
    contain-intrinsic-size:auto 640px;
  }
}