/* Manhwa Index v9.5.0 — Unified Motion UI */ :root{ --bg:#f6f7f9;--surface:#fff;--surface-2:#f0f2f5;--surface-3:#e8ebef; --text:#17181c;--muted:#737984;--line:#e1e4e8;--line-strong:#d4d8de; --accent:#6B1D45;--accent-strong:#561638;--accent-text:#ffffff; --danger:#e5484d;--success:#20a464;--info:#4b7bec; --shadow-sm:0 2px 10px rgba(19,24,32,.05);--shadow-md:0 10px 32px rgba(19,24,32,.08);--shadow-lg:0 22px 60px rgba(19,24,32,.12); --radius-sm:10px;--radius:16px;--radius-lg:22px;--radius-xl:28px; --page:1180px;--header-h:64px;--dock-h:72px; --ease:cubic-bezier(.2,.8,.2,1) } html[data-theme="dark"],html.dark{ --bg:#0d0e11;--surface:#15171c;--surface-2:#1c1f25;--surface-3:#242830; --text:#f4f5f7;--muted:#9ca3af;--line:#282c33;--line-strong:#343941; --accent:#6B1D45;--accent-strong:#561638;--accent-text:#ffffff; --shadow-sm:0 2px 10px rgba(0,0,0,.18);--shadow-md:0 12px 34px rgba(0,0,0,.24);--shadow-lg:0 24px 64px rgba(0,0,0,.32) } *{box-sizing:border-box}html{background:var(--bg);color-scheme:light}html[data-theme="dark"]{color-scheme:dark} html,body{margin:0;min-height:100%;overflow-x:hidden}body{background:var(--bg);color:var(--text);font-family:"Cairo","Almarai",system-ui,sans-serif;font-size:14px;line-height:1.65;-webkit-font-smoothing:antialiased} button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}img{display:block;max-width:100%}a{color:inherit;text-decoration:none} svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .hidden{display:none!important}.view{display:none!important;width:min(var(--page),calc(100% - 32px));margin:0 auto;padding:28px 0 110px}.view.active{display:block!important;animation:viewIn .34s var(--ease)} main{min-height:calc(100vh - var(--header-h))}.reveal{opacity:1!important;transform:none!important} @keyframes viewIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} @keyframes sheetIn{from{opacity:0;transform:translateY(24px) scale(.985)}to{opacity:1;transform:none}} @keyframes popIn{0%{transform:scale(.92);opacity:0}100%{transform:scale(1);opacity:1}} @keyframes cardIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} @keyframes dockPop{0%{transform:scale(.9)}55%{transform:scale(1.12)}100%{transform:scale(1)}} /* shared typography */ h1,h2,h3,h4,p{overflow-wrap:anywhere}.eyebrow,.index-kicker,.tappy-home-kicker{font-size:10px;font-weight:800;letter-spacing:.12em;color:var(--muted);text-transform:uppercase}.page-head h1,.page-editorial-head h1,.exact-page-top h1{margin:4px 0 0;font-size:clamp(26px,5vw,40px);line-height:1.2;font-weight:900}.page-head,.page-editorial-head,.exact-page-top{padding:18px 2px 22px}.page-head p,.page-editorial-head p,.exact-page-top p{margin:6px 0 0;color:var(--muted)} /* shared controls */ :where(.primary-button,.ink-button,.exact-solid-button,.sheet-primary){border:0;background:var(--accent);color:var(--accent-text);border-radius:13px;min-height:42px;padding:9px 16px;font-weight:900;box-shadow:none;transition:transform .16s var(--ease),background .16s,box-shadow .16s} :where(.primary-button,.ink-button,.exact-solid-button,.sheet-primary):hover{background:var(--accent-strong);box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 22%,transparent)} :where(.primary-button,.ink-button,.exact-solid-button,.sheet-primary):active{transform:scale(.97)} :where(.secondary-button,.line-button,.exact-outline-button,.danger-outline-button){border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:13px;min-height:40px;padding:8px 14px;font-weight:800;transition:background .16s,border-color .16s,transform .16s var(--ease)} :where(.secondary-button,.line-button,.exact-outline-button):hover{background:var(--surface-2);border-color:var(--line-strong)} :where(.secondary-button,.line-button,.exact-outline-button,.danger-outline-button):active{transform:scale(.97)} .danger-outline-button{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 30%,var(--line))} input,select,textarea{width:100%;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:13px;min-height:44px;padding:10px 12px;outline:0;transition:border-color .16s,box-shadow .16s,background .16s} input:focus,select:focus,textarea:focus{border-color:color-mix(in srgb,var(--accent-strong) 65%,var(--line));box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}textarea{resize:vertical;line-height:1.7} .inline-status{font-size:11px;color:var(--muted);min-height:18px;margin-top:6px} .empty-state{border:1px dashed var(--line-strong);background:var(--surface);border-radius:var(--radius-lg);padding:34px 18px;text-align:center;color:var(--muted)}.empty-state h3{margin:0 0 5px;color:var(--text)} /* header */ .site-header{height:var(--header-h);position:sticky;top:0;z-index:80;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;padding:0 max(18px,calc((100vw - var(--page))/2));background:color-mix(in srgb,var(--surface) 92%,transparent);border-bottom:1px solid var(--line);backdrop-filter:saturate(130%) blur(14px)} .exact-logo{display:flex;align-items:center;gap:8px;font-weight:900}.site-brand-image{height:28px;width:auto}.brand-logo-dark{display:none}html[data-theme="dark"] .brand-logo-light{display:none}html[data-theme="dark"] .brand-logo-dark{display:block}.kp-wordmark{font-size:13px} .exact-main-tabs{display:flex;align-items:center;justify-content:center;gap:4px}.exact-main-tabs button{border:0;background:transparent;color:var(--muted);padding:8px 12px;border-radius:10px;font-weight:800;transition:.16s}.exact-main-tabs button:hover{background:var(--surface-2);color:var(--text)}.exact-main-tabs button.active{color:var(--text);background:var(--surface-2)} .exact-header-actions{display:flex;align-items:center;gap:7px}.exact-header-icon,.profile-button,.close-button,.sheet-close,.modal-close{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:12px;transition:.16s}.exact-header-icon,.close-button,.sheet-close,.modal-close{width:40px;height:40px;display:grid;place-items:center}.exact-header-icon:hover,.sheet-close:hover{background:var(--surface-2);transform:translateY(-1px)}.exact-header-icon svg{width:19px;height:19px}.theme-icon-sun{display:none}html[data-theme="dark"] .theme-icon-moon{display:none}html[data-theme="dark"] .theme-icon-sun{display:block} .profile-button{height:40px;padding:0 10px;display:flex;align-items:center;gap:7px}.avatar,.account-avatar{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--text);color:var(--bg);font-weight:900} .search-overlay{position:fixed;inset:0;z-index:130;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);display:grid;place-items:start center;padding:13vh 18px}.search-overlay>div{width:min(650px,100%)}.search-overlay input{height:58px;border-radius:18px;font-size:18px;box-shadow:var(--shadow-lg)}.search-overlay .close-button{position:absolute;top:20px;left:20px} /* home */ .exact-page-top{display:flex;align-items:end;justify-content:space-between;gap:24px}.kp-home-subtitle{max-width:430px;text-align:left}.mi-quick-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 18px}.mi-quick-tabs button{border:1px solid var(--line);background:var(--surface);border-radius:var(--radius);padding:14px;display:flex;align-items:center;gap:11px;text-align:right;color:var(--text);box-shadow:var(--shadow-sm);transition:transform .18s var(--ease),border-color .18s,box-shadow .18s}.mi-quick-tabs button:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.mi-quick-tabs button.active{border-color:color-mix(in srgb,var(--accent-strong) 55%,var(--line));background:color-mix(in srgb,var(--accent) 16%,var(--surface))}.mi-quick-icon{width:38px;height:38px;border-radius:12px;background:var(--surface-2);display:grid;place-items:center;flex:0 0 38px}.mi-quick-icon svg{width:20px;height:20px}.quick-tab-copy strong,.quick-tab-copy small{display:block}.quick-tab-copy small{font-size:9px;color:var(--muted);margin-top:2px} .exact-feature-carousel{position:relative;overflow:hidden;border-radius:var(--radius-xl);min-height:330px;background:#17181b;color:#fff;margin:0 0 28px;box-shadow:var(--shadow-md)}.exact-feature-background{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.26}.exact-feature-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,15,18,.2),rgba(14,15,18,.88) 58%,rgba(14,15,18,.96))}.exact-feature-inner{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) 46%;align-items:center;min-height:330px;padding:30px}.exact-feature-copy{max-width:570px}.exact-feature-label{font-size:10px;letter-spacing:.12em;color:#d5d6d8}.exact-feature-copy h2{font-size:clamp(28px,5vw,48px);line-height:1.15;margin:10px 0}.exact-feature-copy p{color:#c6c8cc;max-width:520px}.exact-feature-meta{display:flex;gap:14px;color:#d8dade;font-size:12px;margin:18px 0}.exact-feature-actions,.exact-feature-pagination{display:flex;gap:8px;align-items:center}.exact-feature-carousel .exact-outline-button{background:transparent;color:#fff;border-color:#4a4c51}.exact-feature-posters{display:flex;align-items:end;justify-content:flex-end;gap:10px;min-width:0}.exact-feature-posters img{width:120px;aspect-ratio:3/4;object-fit:cover;border-radius:15px;box-shadow:0 12px 30px rgba(0,0,0,.28)}.exact-feature-pagination{margin-top:14px}.exact-feature-pagination button{width:34px;height:34px;border:1px solid #44474c;background:#222428;color:white;border-radius:10px}.feature-timer{height:3px;position:absolute;bottom:0;inset-inline:0;background:#25272c}.feature-timer span{display:block;height:100%;background:var(--accent)}.exact-feature-carousel.is-empty{min-height:190px}.exact-feature-carousel.is-empty .exact-feature-posters{display:none}.exact-feature-carousel.is-empty .exact-feature-inner{grid-template-columns:1fr;min-height:190px} .exact-content-section{margin:30px 0}.exact-section-header{display:flex;align-items:end;justify-content:space-between;gap:14px;margin-bottom:12px}.exact-section-header h2{margin:0;font-size:21px}.exact-section-header p{margin:3px 0 0;color:var(--muted);font-size:11px}.exact-section-header>button{border:0;background:transparent;color:var(--muted);font-weight:800;padding:6px 0}.media-rail,.exact-wide-rail,.recommendation-shelf-rail{display:flex;gap:12px;overflow-x:auto;padding:2px 0 8px;scroll-snap-type:x proximity;scrollbar-width:none}.media-rail::-webkit-scrollbar,.exact-wide-rail::-webkit-scrollbar,.recommendation-shelf-rail::-webkit-scrollbar{display:none} .poster-card,.work-card,.media-card{flex:0 0 150px;min-width:0;animation:cardIn .3s var(--ease)}.poster-card img,.work-card img,.media-card img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:15px;background:var(--surface-2);transition:transform .22s var(--ease),box-shadow .22s}.poster-card:hover img,.work-card:hover img,.media-card:hover img{transform:translateY(-3px);box-shadow:var(--shadow-md)} .poster-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px 12px}.collections-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px} /* directory / groups / collection cards */ .groups-shelves-list,.quick-category-collections,.rotating-shelves,.exact-shelves{display:grid;gap:12px}.collection-card,.group-card,.recommendation-card{border:1px solid var(--line);background:var(--surface);border-radius:var(--radius-lg);padding:15px;box-shadow:var(--shadow-sm);transition:transform .18s var(--ease),box-shadow .18s}.collection-card:hover,.group-card:hover,.recommendation-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)} .recommendations-directory-toolbar,.discover-search-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:9px;align-items:end;margin-bottom:12px}.recommendations-directory-search,.discover-search-field{position:relative}.discover-search-field{display:block}.discover-search-icon{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}.discover-search-field input{padding-right:38px}.discover-sort-field{display:grid;gap:4px}.discover-sort-field>span{font-size:9px;color:var(--muted)} /* library */ #discoverView .library-page-head{display:flex;align-items:end;justify-content:space-between}.catalog-tabs,.following-tabs,.library-state-tabs{display:flex;gap:5px;padding:4px;background:var(--surface-2);border-radius:13px;width:max-content;max-width:100%;overflow-x:auto;margin-bottom:14px}.catalog-tabs button,.following-tabs button,.library-state-tabs button{border:0;background:transparent;color:var(--muted);padding:8px 13px;border-radius:10px;font-weight:800;white-space:nowrap;transition:.16s}.catalog-tabs button.active,.following-tabs button.active,.library-state-tabs button.active{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm)} .discover-search-toolbar{border:1px solid var(--line);background:var(--surface);padding:12px;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}.advanced-filters-toggle{min-height:44px;border:1px solid var(--line);background:var(--surface-2);border-radius:13px;padding:8px 12px;font-weight:800;display:flex;align-items:center;gap:7px}.advanced-filters-toggle b{min-width:22px;height:22px;border-radius:999px;background:var(--text);color:var(--bg);display:grid;place-items:center;font-size:9px}.advanced-filters-panel{border:1px solid var(--line);background:var(--surface);border-radius:var(--radius-lg);padding:14px;margin:10px 0 14px}.advanced-filter-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.advanced-filter-grid label{display:grid;gap:5px}.advanced-filter-grid label>span,.multi-genre-filter small{font-size:9px;color:var(--muted)}.multi-genre-filter{margin-top:12px;border-top:1px solid var(--line);padding-top:12px}.advanced-genre-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.advanced-genre-chips button,.preference-multi-grid button{border:1px solid var(--line);background:var(--surface-2);color:var(--text);border-radius:999px;padding:7px 11px;font-weight:700}.advanced-genre-chips button.active,.preference-multi-grid button.active,.preference-multi-grid button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}.reset-discover-filters{margin-top:10px;border:0;background:transparent;color:var(--muted);font-weight:800}.results-line{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:11px;margin:12px 2px}.results-line strong{color:var(--text);font-size:14px}.catalog-pagination,.pagination{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:24px}.api-search-card{border:1px solid var(--line);background:var(--surface);border-radius:var(--radius-lg);padding:18px;display:grid;gap:14px}.api-search-card label{display:flex;gap:8px} /* work detail */ body.work-detail-open .site-header{display:none}body.work-detail-open main>.view#workDetailView{width:100%;max-width:none;padding:0 0 110px}.kp-work-intro{width:min(980px,100%);margin:0 auto}.tappy-detail-header,.work-detail-compat-header{display:none!important}.tappy-hero-shell{position:relative;min-height:min(66vh,650px);overflow:hidden;background:var(--surface-2)}.series-hero-blur{position:absolute;inset:0;background-position:center;background-size:cover;filter:blur(32px) saturate(.8);transform:scale(1.12);opacity:.25}.series-hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,12,.04) 30%,rgba(10,10,12,.92) 100%)}.tappy-cover-frame{position:absolute;inset:0}.tappy-cover-image{width:100%;height:100%;object-fit:cover;object-position:center 22%}.work-cover-title-overlay{position:absolute;z-index:4;bottom:0;left:0;right:0;padding:44px max(18px,calc((100% - 920px)/2)) 26px;color:#fff;background:linear-gradient(180deg,transparent,rgba(0,0,0,.78))}.work-cover-eyebrow{font-size:9px;letter-spacing:.14em;color:#d7d7da}.work-cover-title-row{display:flex;align-items:end;justify-content:space-between;gap:18px}.work-cover-title-row h1{margin:4px 0 0;font-size:clamp(28px,6vw,50px);line-height:1.08;font-weight:900}.work-cover-actions{display:flex;gap:7px;flex:0 0 auto}.work-cover-follow,.work-cover-share,.work-cover-report-button,.work-admin-edit-button{border:1px solid rgba(255,255,255,.28);background:rgba(16,17,20,.58);color:#fff;backdrop-filter:blur(8px);border-radius:13px;min-height:42px;padding:8px 12px;display:flex;align-items:center;gap:7px;font-weight:800;transition:transform .16s,background .16s}.work-cover-follow:hover,.work-cover-share:hover,.work-cover-report-button:hover,.work-admin-edit-button:hover{background:rgba(32,34,39,.78);transform:translateY(-1px)}.work-cover-follow svg,.work-cover-share svg,.work-cover-report-button svg,.work-admin-edit-button svg{width:18px;height:18px}.work-cover-report-button{position:absolute;z-index:5;top:18px;right:max(18px,calc((100% - 920px)/2));width:42px;height:42px;padding:0;justify-content:center}.work-admin-edit-button{position:absolute;z-index:5;top:18px;left:max(18px,calc((100% - 920px)/2))}.cover-origin-badge{display:none!important} .mi-work-facts{width:min(920px,calc(100% - 28px));margin:14px auto 0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.mi-work-facts article{border:1px solid var(--line);background:var(--surface);border-radius:15px;padding:12px 10px;text-align:center}.mi-work-facts small{display:block;color:var(--muted);font-size:9px;margin-bottom:3px}.mi-work-facts strong{font-size:14px}.work-secondary-summary{display:none!important} .work-admin-toolbar{width:min(920px,calc(100% - 28px));margin:10px auto;display:flex;gap:7px;overflow-x:auto}.work-admin-toolbar button{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:12px;min-height:38px;padding:7px 11px;display:flex;align-items:center;gap:6px;white-space:nowrap}.work-admin-toolbar svg{width:17px;height:17px} .series-tabs{position:sticky;top:0;z-index:50;width:min(920px,calc(100% - 28px));margin:14px auto 0;padding:5px;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;background:color-mix(in srgb,var(--surface) 94%,transparent);border:1px solid var(--line);border-radius:15px;backdrop-filter:blur(12px);box-shadow:var(--shadow-sm)}.series-tabs button{border:0;background:transparent;color:var(--muted);border-radius:11px;padding:8px 5px;display:flex;align-items:center;justify-content:center;gap:6px;font-weight:800;font-size:11px;transition:.16s}.series-tabs button.active{background:var(--surface-2);color:var(--text)}.series-tabs .tab-icon{display:grid;place-items:center}.series-tabs svg{width:19px;height:19px} .tappy-detail-content{width:min(920px,calc(100% - 28px));margin:12px auto 0}.tappy-detail-pane{display:none}.tappy-detail-pane.active{display:block;animation:viewIn .25s var(--ease)} .overview-panel,.modern-info-section,.story-card,.announce-card,.comments-card,.work-story-card,.work-detail-card{border:1px solid var(--line);background:var(--surface);border-radius:var(--radius-lg);padding:16px;margin-bottom:10px;box-shadow:var(--shadow-sm)}.overview-panel-head,.modern-section-head{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:10px}.overview-panel-head h3,.modern-section-head h3{margin:0;font-size:15px}.overview-panel-head p,.modern-section-head p{margin:2px 0 0;color:var(--muted);font-size:10px} .unified-detail-grid,.people-grid,.publish-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.unified-detail-row,.person,.publish-item{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:center;gap:9px;border:1px solid var(--line);background:var(--surface-2);border-radius:14px;padding:10px}.unified-detail-icon,.icon{width:40px;height:40px;border-radius:12px;background:var(--surface);display:grid;place-items:center}.unified-detail-icon svg,.icon svg{width:19px;height:19px}.unified-detail-copy small,.person small,.publish-copy small{display:block;color:var(--muted);font-size:8.5px}.unified-detail-copy strong,.unified-detail-copy>a,.person strong,.publish-copy strong{font-size:11px;color:inherit;font-weight:700;text-decoration:none}.unified-detail-copy>a.is-link{text-decoration:underline;text-underline-offset:3px}.tags,.genre-chips{display:flex;gap:6px;flex-wrap:wrap}.tag,.genre-chip{border:1px solid var(--line);background:var(--surface-2);border-radius:999px;padding:6px 10px;font-size:10px}.gallery-grid,.story-gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.gallery-grid img,.story-gallery-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:13px;background:var(--surface-2)} /* announcements */ .announcement-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:12px}.announcement-list,.announcement-feed{display:grid;gap:8px}.announcement-item,.announcement-card{border:1px solid var(--line);background:var(--surface);border-radius:16px;padding:13px}.announcement-item:hover,.announcement-card:hover{border-color:var(--line-strong)}.announcement-side-panel{border:1px solid var(--line);background:var(--surface);border-radius:18px;padding:14px;align-self:start}.announcement-side-panel h3{margin:0 0 10px}.announcement-type-list{display:grid;gap:8px}.announcement-type-list article{display:grid;grid-template-columns:8px 1fr;gap:9px;align-items:start;padding:9px;background:var(--surface-2);border-radius:12px}.announcement-type-list article>span{width:8px;height:8px;margin-top:7px;border-radius:50%;background:var(--accent-strong)}.announcement-type-list strong,.announcement-type-list small{display:block}.announcement-type-list small{color:var(--muted);font-size:9px} /* comments — redesigned */ .work-comments-dashboard{display:grid;gap:12px}.comments-dashboard-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;border:1px solid var(--line);background:var(--surface);border-radius:var(--radius-lg);padding:14px}.comments-dashboard-head h2{margin:0;font-size:20px}.comments-head-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}.comment-rating-summary{display:flex;align-items:center;gap:7px;padding:7px 10px;background:color-mix(in srgb,var(--accent) 14%,var(--surface-2));border-radius:12px}.comment-rating-score strong{font-size:18px}.comment-rating-score span,.comment-rating-summary small{font-size:9px;color:var(--muted)}.comments-count-badge{padding:7px 9px;background:var(--surface-2);border-radius:11px;color:var(--muted);font-size:9px}.comments-head-actions select{width:auto;min-height:36px;padding:6px 9px;font-size:10px} .comments-desktop-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:12px;align-items:start}.comments-feed-panel,.comments-compose-panel{border:1px solid var(--line);background:var(--surface);border-radius:var(--radius-lg);padding:14px;box-shadow:var(--shadow-sm)}.comments-compose-panel{position:sticky;top:78px}.compose-panel-head{display:flex;align-items:center;gap:9px;padding-bottom:10px;border-bottom:1px solid var(--line)}.compose-panel-head strong,.compose-panel-head small{display:block}.compose-panel-head small{font-size:9px;color:var(--muted)}.comment-auth-notice{margin-top:10px;border:1px solid var(--line);background:var(--surface-2);padding:10px;border-radius:12px;display:flex;align-items:center;justify-content:space-between;gap:8px}.comment-auth-notice button{border:0;background:var(--accent);color:var(--accent-text);border-radius:9px;padding:6px 9px;font-weight:800} .comment-composer{display:grid;gap:8px;margin-top:10px}.comment-rating-picker,.comment-spoiler-toggle,.comment-text-shell{border:1px solid var(--line);background:var(--surface-2);border-radius:14px;padding:10px}.comment-rating-picker-head{display:flex;justify-content:space-between;gap:8px;align-items:center}.comment-rating-picker-head strong,.comment-rating-picker-head small{display:block}.comment-rating-picker-head small,.selected-comment-rating-label{color:var(--muted);font-size:9px}.comment-star-picker{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin-top:8px}.comment-star-picker button{height:42px;border:1px solid var(--line);background:var(--surface);border-radius:11px;color:#a7acb4;display:grid;place-items:center;transition:.16s}.comment-star-picker button:hover{transform:translateY(-1px);color:#6B1D45}.comment-star-picker button[aria-pressed="true"],.comment-star-picker button.active{background:color-mix(in srgb,var(--accent) 10%,var(--surface));border-color:color-mix(in srgb,var(--accent) 40%,var(--line));color:var(--accent)}html[data-theme="dark"] .comment-star-picker button[aria-pressed="true"],html[data-theme="dark"] .comment-star-picker button.active{background:color-mix(in srgb,var(--accent) 18%,var(--surface-2))}.comment-star-picker svg{width:20px;height:20px}.comment-spoiler-toggle{display:flex;align-items:center;gap:9px;cursor:pointer}.comment-spoiler-toggle input{width:18px;height:18px;min-height:0}.comment-spoiler-toggle strong,.comment-spoiler-toggle small{display:block}.comment-spoiler-toggle small{font-size:8px;color:var(--muted)}.comment-spoiler-switch{display:none}.comment-text-shell{display:block}.comment-text-shell textarea{border:0;background:transparent;box-shadow:none;padding:0;min-height:100px}.comment-composer-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:8px;border-top:1px solid var(--line)}.comment-composer-actions small{color:var(--muted);font-size:9px}.comment-composer-actions .primary-button{min-height:36px;padding:7px 10px;font-size:10px}.comments-feed-head{display:flex;align-items:end;justify-content:space-between;padding-bottom:10px;border-bottom:1px solid var(--line)}.comments-feed-head h3{margin:0}.comments-feed-head span{font-size:9px;color:var(--muted)}.modern-comments-list{display:grid}.comment-card,.modern-comments-list>.comment{padding:13px 0;border-bottom:1px solid var(--line);animation:cardIn .25s var(--ease)}.comment-card:last-child,.modern-comments-list>.comment:last-child{border-bottom:0}.comments-load-more{width:100%;margin-top:10px} /* following / personal library */ #followingView{max-width:980px}.following-tabs{margin-bottom:14px}.follow-panel{animation:viewIn .24s var(--ease)}.reading-list{display:grid;gap:8px}.reading-list>article,.reading-list>.reading-item,.library-item{border:1px solid var(--line);background:var(--surface);border-radius:16px;padding:11px;box-shadow:var(--shadow-sm);transition:transform .16s}.reading-list>article:hover,.library-item:hover{transform:translateY(-1px)} /* admin */ #adminView{max-width:1180px}.admin-head{padding-bottom:16px}.admin-dashboard{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}.admin-dashboard article{border:1px solid var(--line);background:var(--surface);border-radius:16px;padding:13px}.admin-dashboard span{display:block;color:var(--muted);font-size:9px}.admin-dashboard strong{font-size:20px}.unified-import-shortcut{border:1px solid var(--line);background:var(--surface);border-radius:18px;padding:14px;margin-bottom:12px}.kp-admin-layout{display:grid;grid-template-columns:210px minmax(0,1fr);gap:12px;align-items:start}.kp-admin-sidebar{position:sticky;top:78px}.admin-tabs{display:grid;gap:4px;border:1px solid var(--line);background:var(--surface);border-radius:18px;padding:7px}.admin-tabs button{border:0;background:transparent;color:var(--muted);border-radius:11px;padding:10px 11px;text-align:right;font-weight:800}.admin-tabs button.active{background:var(--surface-2);color:var(--text)}.kp-admin-content{min-width:0}.admin-panel,.unified-card,.official-sync-shell,.editor-shell,.reports-admin-shell,.mangalek-import-card,.compact-editor,.admin-recommendations-list-shell{border:1px solid var(--line);background:var(--surface);border-radius:var(--radius-lg);padding:15px;box-shadow:var(--shadow-sm);margin-bottom:10px}.manager-toolbar,.unified-head,.official-sync-head,.reports-admin-head,.admin-recommendations-toolbar,.admin-recommendations-list-toolbar{display:flex;align-items:end;justify-content:space-between;gap:10px;margin-bottom:12px}.manager-toolbar h2,.unified-head h2,.official-sync-head h2{margin:0}.modern-form-grid,.advanced-grid,.official-sync-grid,.media-upload-grid,.pros-cons-grid,.collection-cover-fields{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.form-span-2,.wide-field{grid-column:1/-1}.modern-form-grid label,.wide-field{display:grid;gap:5px}.modern-form-grid label>span,.wide-field>span{color:var(--muted);font-size:9px}.editor-block{display:grid;grid-template-columns:36px minmax(0,1fr);gap:10px;padding:13px 0;border-top:1px solid var(--line)}.editor-block:first-child{border-top:0}.editor-number{width:32px;height:32px;border-radius:10px;background:var(--surface-2);display:grid;place-items:center;font-size:10px;font-weight:900}.block-heading h3{margin:0}.block-heading p{margin:2px 0 10px;color:var(--muted);font-size:9px}.upload-zone{border:1px dashed var(--line-strong);background:var(--surface-2);border-radius:15px;padding:18px;text-align:center}.upload-icon{font-size:22px}.admin-works-list,.manage-collections-list,.import-results,.unified-result-list,.official-sync-results,.admin-reports-list,.mangalek-result-list{display:grid;gap:8px}.admin-works-list>*,.manage-collections-list>*,.import-results>*,.unified-result-list>*,.official-sync-results>*,.admin-reports-list>*,.mangalek-result-list>*{border:1px solid var(--line);background:var(--surface-2);border-radius:14px;padding:10px} /* dock */ .member-dock{position:fixed;z-index:100;bottom:12px;left:50%;transform:translateX(-50%);width:min(520px,calc(100% - 24px));height:var(--dock-h);display:grid;grid-template-columns:repeat(5,1fr);align-items:center;padding:6px;background:color-mix(in srgb,var(--surface) 94%,transparent);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-lg);backdrop-filter:blur(14px)}.dock-item,.dock-profile{border:0;background:transparent;color:var(--muted);height:58px;border-radius:16px;display:grid;place-items:center;align-content:center;gap:2px;min-width:0;transition:color .16s,background .16s,transform .16s var(--ease)}.dock-item:hover,.dock-profile:hover{background:var(--surface-2);color:var(--text)}.dock-item:active,.dock-profile:active{transform:scale(.94)}.dock-icon-shell,.dock-profile-ring{width:30px;height:30px;display:grid;place-items:center;transition:transform .18s var(--ease)}.dock-icon-shell svg{width:21px;height:21px}.dock-item span:last-child{font-size:8px;font-weight:800}.dock-profile-avatar{width:30px;height:30px;border-radius:50%;background:var(--text);color:var(--bg);display:grid;place-items:center;font-size:10px;font-weight:900}.dock-tapped .dock-icon-shell,.dock-tapped .dock-profile-ring{animation:dockPop .38s var(--ease)} /* sheets and modals */ .dock-sheet-backdrop,.modal-backdrop,.welcome-backdrop,.mi-legal-modal{position:fixed;inset:0;z-index:140;background:rgba(10,11,14,.48);display:flex;align-items:flex-end;justify-content:center;padding:16px;backdrop-filter:blur(5px)}.dock-sheet,.auth-modal,.welcome-card,.mi-legal-dialog{width:min(620px,100%);max-height:min(86vh,760px);overflow:auto;background:var(--bg);border:1px solid var(--line);border-radius:26px;box-shadow:var(--shadow-lg);padding:18px;animation:sheetIn .28s var(--ease);scrollbar-width:thin}.sheet-handle{width:38px;height:4px;border-radius:999px;background:var(--line-strong);margin:0 auto 12px}.sheet-header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:12px}.sheet-header h2{margin:2px 0 0;font-size:21px}.sheet-close{font-size:22px}.sheet-section{border:1px solid var(--line);background:var(--surface);border-radius:16px;padding:13px;margin-bottom:9px} /* settings */ .settings-v94-stack{display:grid;gap:9px}.settings-v94-card{border:1px solid var(--line);background:var(--surface);border-radius:17px;padding:13px}.settings-v94-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.settings-v94-title{display:flex;align-items:center;gap:10px;min-width:0}.settings-v94-icon{width:38px;height:38px;border-radius:12px;background:var(--surface-2);display:grid;place-items:center;flex:0 0 38px}.settings-v94-icon svg{width:19px;height:19px}.settings-v94-title strong,.settings-v94-title small{display:block}.settings-v94-title small{color:var(--muted);font-size:9px;margin-top:2px}.theme-toggle-v94{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:11px}.theme-toggle-v94 label{cursor:pointer}.theme-toggle-v94 input{position:absolute;opacity:0;pointer-events:none}.theme-toggle-v94 span{height:46px;border:1px solid var(--line);background:var(--surface-2);border-radius:13px;display:flex;align-items:center;justify-content:center;gap:7px;font-weight:800}.theme-toggle-v94 input:checked+span{background:var(--accent);color:var(--accent-text);border-color:var(--accent)}.theme-toggle-v94 svg{width:18px;height:18px}.settings-v94-admin-details{border:1px solid var(--line);background:var(--surface);border-radius:16px;padding:11px}.settings-v94-admin-details summary{cursor:pointer;font-weight:800}.settings-v94-admin{margin-top:10px} /* notifications */ .notification-feed{display:grid;gap:8px}.notification-feed:empty::before{content:"لا توجد تنبيهات جديدة";display:grid;place-items:center;min-height:220px;border:1px dashed var(--line-strong);border-radius:18px;color:var(--muted);font-weight:700}.notification-entry{border:1px solid var(--line);background:var(--surface);border-radius:15px;padding:11px;animation:cardIn .24s var(--ease)}.notification-entry.unread{border-color:color-mix(in srgb,var(--accent-strong) 45%,var(--line));background:color-mix(in srgb,var(--accent) 8%,var(--surface))} /* profile */ .profile-guest-state{text-align:center;border:1px solid var(--line);background:var(--surface);border-radius:20px;padding:24px}.large-profile-avatar{width:76px;height:76px;border-radius:50%;background:var(--text);color:var(--bg);display:grid;place-items:center;font-size:24px;font-weight:900;margin:0 auto 10px}.profile-guest-state h3{margin:5px 0}.profile-guest-state p{color:var(--muted);margin:0 auto 14px;max-width:380px}.profile-identity{display:flex;align-items:center;gap:12px;border:1px solid var(--line);background:var(--surface);border-radius:20px;padding:14px}.profile-avatar-button{position:relative;border:0;background:transparent;padding:0}.profile-avatar-button .large-profile-avatar{margin:0}.profile-avatar-edit-badge{position:absolute;bottom:-2px;left:-2px;width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--accent-text);display:grid;place-items:center;border:3px solid var(--surface)}.profile-identity-copy{min-width:0}.profile-identity-copy strong,.profile-identity-copy small{display:block}.profile-identity-copy strong{font-size:17px}.profile-identity-copy small{color:var(--muted);font-size:10px}.profile-inline-action{border:0;background:transparent;color:var(--muted);padding:4px 0;font-size:10px;font-weight:800}.profile-dashboard{display:grid;gap:10px;margin-top:10px}.profile-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.profile-stats-grid article{border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:11px;text-align:center}.profile-stats-grid span{display:block;color:var(--muted);font-size:8px}.profile-stats-grid strong{font-size:17px}.profile-reading-progress,.profile-preference-summary,.profile-activity-section,.profile-name-field,.profile-avatar-picker{border:1px solid var(--line);background:var(--surface);border-radius:16px;padding:13px}.profile-reading-progress header,.profile-preference-summary{display:flex;align-items:center;justify-content:space-between;gap:10px}.profile-reading-progress header button,.profile-preference-summary button{border:0;background:var(--surface-2);color:var(--text);border-radius:9px;padding:6px 9px;font-weight:800;font-size:9px}.profile-reading-states{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:9px}.profile-reading-states span{background:var(--surface-2);border-radius:11px;padding:9px;text-align:center;font-size:9px}.profile-reading-states b{display:block;font-size:14px}.profile-preference-summary small,.profile-preference-summary strong{display:block}.profile-preference-summary small{font-size:8px;color:var(--muted)}.profile-activity-section header{margin-bottom:8px}.profile-activity-list{display:grid;gap:6px}.profile-activity-list>*{background:var(--surface-2);border-radius:11px;padding:9px}.profile-name-field{display:grid;gap:6px;margin-top:10px}.profile-name-field>span{font-size:9px;color:var(--muted)}#saveProfileNameButton,#dockSignOutButton{width:100%;margin-top:8px}.profile-avatar-picker{margin-top:10px}.profile-avatar-picker>header{display:flex;justify-content:space-between;align-items:center}.profile-avatar-options{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-top:10px}.profile-avatar-options button{border:1px solid var(--line);background:var(--surface-2);aspect-ratio:1;border-radius:50%;overflow:hidden;padding:3px}.profile-avatar-options img{width:100%;height:100%;object-fit:cover;border-radius:50%} /* preferences */ .preference-intro{border:1px solid var(--line);background:var(--surface);border-radius:16px;padding:12px}.preference-intro p{margin:4px 0 0;color:var(--muted);font-size:10px}.preference-selection-toolbar{display:flex;justify-content:space-between;align-items:center;margin:10px 2px;font-size:10px;color:var(--muted)}.preference-selection-toolbar button{border:0;background:transparent;color:var(--muted);font-weight:800}.preference-multi-grid{display:flex;flex-wrap:wrap;gap:6px}.preferences-sheet .sheet-primary{width:100%;margin-top:12px} /* auth/welcome/legal */ .auth-modal,.welcome-card,.mi-legal-dialog{align-self:center}.auth-modal h2,.welcome-card h2{margin:6px 0}.auth-modal p,.welcome-card p{color:var(--muted)}.google-button{width:100%;min-height:44px;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:13px;font-weight:800}.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:5px;background:var(--surface-2);padding:4px;border-radius:12px;margin:10px 0}.auth-tabs button{border:0;background:transparent;border-radius:9px;padding:8px;color:var(--muted);font-weight:800}.auth-tabs button.active{background:var(--surface);color:var(--text)}.auth-form{display:grid;gap:8px}.auth-divider{text-align:center;color:var(--muted);font-size:10px;margin:8px 0}.signed-in-panel{display:flex;align-items:center;gap:8px} /* global icon consistency */ :where(button,.mi-icon,.dock-icon-shell,.settings-v94-icon,.unified-detail-icon,.icon) svg{fill:none!important;stroke:currentColor!important;stroke-width:1.8!important;stroke-linecap:round!important;stroke-linejoin:round!important} :where(button) svg{max-width:22px;max-height:22px} /* mobile */ @media(max-width:780px){ :root{--header-h:58px;--dock-h:66px}.view{width:min(100% - 20px,var(--page));padding:18px 0 96px} .site-header{grid-template-columns:auto 1fr auto;padding:0 10px;gap:7px}.kp-wordmark{display:none}.site-brand-image{height:23px}.exact-main-tabs{justify-content:flex-start;overflow-x:auto;scrollbar-width:none}.exact-main-tabs button{padding:7px 9px;font-size:10px;white-space:nowrap}.exact-main-tabs button:nth-child(4){display:none}.exact-header-icon{width:36px;height:36px}.profile-button{display:none!important} .exact-page-top{display:block}.kp-home-subtitle{margin-top:4px;text-align:right}.exact-page-top h1{font-size:28px}.mi-quick-tabs{grid-template-columns:repeat(3,1fr);gap:6px}.mi-quick-tabs button{display:grid;justify-items:center;text-align:center;padding:9px 5px;gap:5px}.mi-quick-icon{width:32px;height:32px}.quick-tab-copy small{display:none} .exact-feature-carousel{border-radius:20px;min-height:250px}.exact-feature-inner{grid-template-columns:1fr;min-height:250px;padding:20px}.exact-feature-copy h2{font-size:28px}.exact-feature-posters{display:none}.exact-feature-copy p{font-size:11px}.exact-feature-meta{font-size:10px}.exact-content-section{margin:22px 0}.exact-section-header h2{font-size:18px} .poster-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 8px}.poster-card,.work-card,.media-card{flex-basis:116px}.collections-grid{grid-template-columns:1fr} .recommendations-directory-toolbar,.discover-search-toolbar{grid-template-columns:1fr 1fr}.discover-search-field,.recommendations-directory-search{grid-column:1/-1}.advanced-filter-grid{grid-template-columns:1fr 1fr}.api-search-card label{display:grid;grid-template-columns:1fr auto} body.work-detail-open main>.view#workDetailView{padding-bottom:92px}.tappy-hero-shell{min-height:470px}.work-cover-title-overlay{padding:50px 14px 18px}.work-cover-title-row{display:grid;gap:10px}.work-cover-title-row h1{font-size:30px}.work-cover-actions{justify-content:flex-start}.work-cover-follow,.work-cover-share{min-height:38px;padding:7px 10px;font-size:10px}.work-cover-report-button{top:12px;right:12px}.work-admin-edit-button{top:12px;left:12px;font-size:0;width:40px;height:40px;padding:0;justify-content:center}.work-admin-edit-button span{display:none}.mi-work-facts{grid-template-columns:repeat(4,1fr);gap:5px;width:calc(100% - 20px);margin-top:10px}.mi-work-facts article{padding:9px 4px;border-radius:12px}.mi-work-facts small{font-size:8px}.mi-work-facts strong{font-size:11px}.series-tabs{width:calc(100% - 20px);top:6px;margin-top:10px}.series-tabs button{display:grid;gap:2px;padding:7px 2px;font-size:8.5px}.series-tabs svg{width:18px;height:18px}.tappy-detail-content,.work-admin-toolbar{width:calc(100% - 20px)}.unified-detail-grid,.people-grid,.publish-grid{grid-template-columns:1fr 1fr}.gallery-grid,.story-gallery-grid{grid-template-columns:1fr 1fr} .announcement-layout{grid-template-columns:1fr}.announcement-side-panel{display:none} .comments-dashboard-head{grid-template-columns:1fr;align-items:start}.comments-head-actions{justify-content:flex-start}.comments-desktop-layout{grid-template-columns:1fr}.comments-compose-panel{position:static;order:-1}.comment-rating-summary{flex:1}.comments-head-actions select{flex:0 0 auto}.comment-star-picker button{height:40px} .kp-admin-layout{grid-template-columns:1fr}.kp-admin-sidebar{position:static;overflow-x:auto}.admin-tabs{display:flex;overflow-x:auto;border-radius:14px}.admin-tabs button{white-space:nowrap;text-align:center;padding:9px 11px}.admin-dashboard{grid-template-columns:1fr 1fr}.modern-form-grid,.advanced-grid,.official-sync-grid,.media-upload-grid,.pros-cons-grid,.collection-cover-fields{grid-template-columns:1fr}.form-span-2,.wide-field{grid-column:auto}.editor-block{grid-template-columns:28px minmax(0,1fr)}.editor-number{width:28px;height:28px} .member-dock{bottom:8px;height:66px;width:calc(100% - 16px);border-radius:19px;padding:4px}.dock-item,.dock-profile{height:56px;border-radius:14px}.dock-item span:last-child{font-size:7px}.dock-icon-shell,.dock-profile-ring{width:27px;height:27px}.dock-icon-shell svg{width:20px;height:20px}.dock-profile-avatar{width:27px;height:27px} .dock-sheet-backdrop,.modal-backdrop,.welcome-backdrop,.mi-legal-modal{padding:0;align-items:flex-end}.dock-sheet{width:100%;max-height:84dvh;border-radius:24px 24px 0 0;border-bottom:0;padding:14px}.auth-modal,.welcome-card,.mi-legal-dialog{width:calc(100% - 18px);margin-bottom:10px;max-height:88dvh;border-radius:22px;padding:15px}.sheet-header h2{font-size:19px}.profile-stats-grid{grid-template-columns:1fr 1fr}.profile-avatar-options{grid-template-columns:repeat(4,1fr)}.settings-v94-row{align-items:flex-start;flex-direction:column}.settings-v94-action{width:100%}.theme-toggle-v94{grid-template-columns:1fr 1fr} } @media(max-width:420px){.poster-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.advanced-filter-grid{grid-template-columns:1fr}.mi-work-facts{grid-template-columns:repeat(4,1fr)}.mi-work-facts strong{font-size:10px}.comments-head-actions{display:grid;grid-template-columns:1fr auto;width:100%}.comment-rating-summary{grid-column:1/-1}.comments-count-badge{display:none}.profile-reading-states{grid-template-columns:1fr 1fr 1fr}} @media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}} /* generated content cards */ .poster-card{cursor:pointer}.poster-cover{position:relative}.poster-cover img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:15px;background:var(--surface-2)}.poster-status-badge{position:absolute;right:7px;bottom:7px;background:rgba(17,18,22,.78);color:#fff;border-radius:999px;padding:4px 7px;font-size:8px;font-weight:800;backdrop-filter:blur(6px)}.poster-follow,.inline-follow{position:absolute;top:7px;left:7px;width:32px;height:32px;border:0;border-radius:10px;background:rgba(255,255,255,.9);color:#202125;display:grid;place-items:center;box-shadow:0 5px 16px rgba(0,0,0,.1);transition:.16s}.poster-follow:hover,.inline-follow:hover{transform:scale(1.05)}.poster-follow.following,.inline-follow.following{background:var(--accent);color:var(--accent-text)}.poster-follow svg,.inline-follow svg{width:17px;height:17px}.poster-copy{padding:8px 2px 0}.poster-copy h3{margin:0;font-size:12px;line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.poster-copy p{margin:2px 0;color:var(--muted);font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.poster-meta{display:flex;align-items:center;justify-content:space-between;gap:6px;color:var(--muted);font-size:8px}.poster-meta>span{display:flex;align-items:center;gap:3px;color:var(--text);font-weight:800}.poster-meta svg{width:12px;height:12px} .collection-card{display:grid;grid-template-columns:90px minmax(0,1fr);gap:12px;cursor:pointer}.collection-card-cover{position:relative}.collection-card-cover img{width:90px;aspect-ratio:3/4;object-fit:cover;border-radius:13px;background:var(--surface-2)}.collection-card-copy{min-width:0}.collection-card-copy h3{margin:2px 0 5px;font-size:14px}.collection-card-title-icon{display:inline-grid;vertical-align:-2px;margin-left:5px}.collection-card-copy p{margin:0;color:var(--muted);font-size:9px;line-height:1.65;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.collection-card-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--muted);font-size:8px;margin-top:9px} .shelf-work-card{flex:0 0 118px;cursor:pointer}.shelf-work-cover{position:relative}.shelf-work-cover img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:13px;background:var(--surface-2)}.shelf-work-cover>span{position:absolute;right:6px;bottom:6px;background:rgba(17,18,22,.78);color:#fff;border-radius:999px;padding:3px 6px;font-size:8px}.shelf-work-card h3{font-size:10px;margin:6px 0 1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.shelf-work-card p{font-size:8px;color:var(--muted);margin:0} .top-collection-card{flex:0 0 250px;cursor:pointer;border:1px solid var(--line);background:var(--surface);border-radius:18px;padding:10px}.platform-collection-visual{height:148px;position:relative;overflow:hidden;border-radius:13px;background:var(--surface-2)}.platform-collection-main{width:100%;height:100%;object-fit:cover}.platform-collection-stack{position:absolute;left:7px;bottom:7px;display:flex}.platform-collection-stack img{width:44px;height:58px;object-fit:cover;border-radius:7px;border:2px solid var(--surface);margin-right:-11px}.top-collection-rank{position:absolute;right:7px;top:7px;background:rgba(17,18,22,.76);color:#fff;border-radius:9px;padding:4px 7px;font-size:9px;font-weight:900}.top-collection-copy{padding-top:8px}.top-collection-copy h3{margin:2px 0;font-size:12px}.top-collection-copy p{margin:0;color:var(--muted);font-size:8px}.top-collection-score{font-size:8px;font-weight:800} .personalized-recommendations-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:9px}.personalized-work-card{display:grid;grid-template-columns:76px minmax(0,1fr);gap:10px;border:1px solid var(--line);background:var(--surface);border-radius:16px;padding:9px;cursor:pointer;transition:.17s}.personalized-work-card:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}.personalized-work-cover{position:relative}.personalized-work-cover img{width:76px;aspect-ratio:3/4;object-fit:cover;border-radius:11px}.personalized-rating{position:absolute;bottom:4px;right:4px;background:rgba(17,18,22,.8);color:#fff;border-radius:999px;padding:2px 5px;font-size:7px}.personalized-work-copy h3{margin:3px 0;font-size:12px}.personalized-work-copy p{margin:0;color:var(--muted);font-size:8px}.personalized-reason{margin-top:8px;background:var(--surface-2);border-radius:9px;padding:6px 8px;color:var(--muted);font-size:8px} .reading-item{display:grid!important;grid-template-columns:56px minmax(0,1fr) 130px 34px;gap:10px;align-items:center}.reading-item>img{width:56px;height:76px;object-fit:cover;border-radius:10px}.reading-item h3{margin:0;font-size:12px}.reading-item p{margin:2px 0 0;color:var(--muted);font-size:8px}.reading-item select{min-height:36px;font-size:9px}.reading-item>button{width:32px;height:32px;border:1px solid var(--line);background:var(--surface-2);color:var(--muted);border-radius:10px} /* comment cards */ .comment-card{display:grid!important;grid-template-columns:38px minmax(0,1fr);gap:10px}.comment-avatar{width:38px;height:38px;border-radius:12px;background:var(--surface-2);display:grid;place-items:center;font-weight:900}.comment-card-content{min-width:0}.comment-card-top{display:flex;align-items:start;justify-content:space-between;gap:10px}.comment-author-line{display:flex;align-items:center;gap:5px;flex-wrap:wrap}.comment-author-line h4{margin:0;font-size:11px}.comment-card-top time{font-size:8px;color:var(--muted)}.best-review-badge,.spoiler-badge{border-radius:999px;padding:3px 6px;font-size:7px;font-weight:800}.best-review-badge{background:color-mix(in srgb,var(--accent) 20%,var(--surface-2));color:var(--text)}.spoiler-badge{background:color-mix(in srgb,var(--danger) 12%,var(--surface-2));color:var(--danger)}.comment-rating-badge{display:flex;align-items:center;gap:5px;white-space:nowrap;background:var(--surface-2);border-radius:9px;padding:4px 6px}.comment-rating-badge svg{width:12px;height:12px;color:var(--accent)}.comment-rating-badge b{font-size:8px}.comment-card-content>p,.spoiler-review-body{font-size:10px;line-height:1.75;margin:8px 0;color:var(--text)}.comment-card-footer{display:flex;align-items:center;justify-content:space-between;gap:8px}.comment-reactions,.comment-secondary-actions{display:flex;gap:5px}.comment-reaction-button,.comment-report-button,.comment-delete{border:1px solid var(--line);background:var(--surface-2);color:var(--muted);border-radius:9px;min-height:30px;padding:5px 8px;display:flex;align-items:center;gap:4px;font-size:8px}.comment-reaction-button.active{background:color-mix(in srgb,var(--accent) 18%,var(--surface));color:var(--text)}.comment-report-button{color:var(--danger)}.spoiler-review-warning{display:flex;align-items:center;gap:8px;background:var(--surface-2);border-radius:12px;padding:9px}.spoiler-review-warning>span{width:32px;height:32px;border-radius:10px;background:var(--surface);display:grid;place-items:center}.spoiler-review-warning strong,.spoiler-review-warning small{display:block}.spoiler-review-warning small{color:var(--muted);font-size:8px}.spoiler-review-warning button{margin-right:auto;border:0;background:var(--text);color:var(--bg);border-radius:8px;padding:5px 7px;font-size:8px;font-weight:800}.comment-empty{padding:30px 10px;text-align:center;color:var(--muted);font-size:10px} /* notification entries */ .notification-entry{display:grid;grid-template-columns:44px minmax(0,1fr) 8px;gap:10px;align-items:center}.notification-entry-image{width:44px;height:44px;border-radius:12px;background:var(--surface-2);overflow:hidden;display:grid;place-items:center}.notification-entry-image img{width:100%;height:100%;object-fit:cover}.notification-entry-image svg{width:19px;height:19px}.notification-entry-copy{min-width:0}.notification-entry-copy small{font-size:7px;color:var(--muted)}.notification-entry-copy h4{margin:1px 0;font-size:11px}.notification-entry-copy p{margin:0;color:var(--muted);font-size:8.5px;line-height:1.55}.notification-entry-copy time{font-size:7px;color:var(--muted)}.notification-unread-dot{width:7px;height:7px;border-radius:50%;background:var(--accent-strong);opacity:0}.notification-entry.unread .notification-unread-dot{opacity:1}.notification-empty{min-height:220px;display:grid;place-items:center;align-content:center;text-align:center;border:1px dashed var(--line-strong);border-radius:18px;color:var(--muted)}.notification-empty strong,.notification-empty span{display:block}.notification-empty strong{color:var(--text);font-size:12px}.notification-empty span{font-size:9px;margin-top:3px} @media(max-width:780px){.personalized-recommendations-grid{grid-template-columns:1fr}.reading-item{grid-template-columns:48px minmax(0,1fr) 100px 30px}.reading-item>img{width:48px;height:66px}.collection-card{grid-template-columns:76px minmax(0,1fr)}.collection-card-cover img{width:76px}.comment-card-top{display:grid}.comment-rating-badge{width:max-content}.comment-card-footer{align-items:flex-start;flex-direction:column}.notification-entry{grid-template-columns:40px minmax(0,1fr) 7px}.notification-entry-image{width:40px;height:40px}} /* final consistency */ button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:2px} .advanced-filters-panel.collapsed{display:none!important} @media(max-width:780px){.site-header,.member-dock{backdrop-filter:none}.kp-admin-sidebar{direction:rtl}.admin-tabs{direction:rtl}} /* ===== v9.6.0 — home + work-detail polish ===== */ /* Remove Android/iOS transient blue tap flash without removing keyboard focus. */ :where(button,a,[role="button"],label,input,select,textarea){-webkit-tap-highlight-color:transparent} :where(button,a,[role="button"]){touch-action:manipulation} /* Home: compact discovery capsules, no marketing headline block. */ #homeView .exact-page-top{padding:10px 2px 8px;min-height:0;display:block} #homeView .exact-page-top .tappy-home-kicker{font-size:9px;letter-spacing:.14em} #homeView .mi-quick-tabs{display:flex;grid-template-columns:none;align-items:center;gap:7px;margin:0 0 16px;overflow-x:auto;scrollbar-width:none;padding:2px 0} #homeView .mi-quick-tabs::-webkit-scrollbar{display:none} #homeView .mi-quick-tabs button{flex:0 0 auto;width:auto;min-height:34px;padding:6px 13px;border-radius:999px;box-shadow:none;gap:0;background:var(--surface);font-size:10px} #homeView .mi-quick-tabs button:hover{transform:none;box-shadow:none} #homeView .mi-quick-tabs button.active{background:var(--text);border-color:var(--text);color:var(--bg)} #homeView .mi-quick-tabs button strong{font-size:10px;line-height:1.2;white-space:nowrap} /* Work hero: title, follow/share and the 4 core facts are one composition. */ #workDetailView .tappy-hero-shell{min-height:min(72vh,720px)} #workDetailView .work-cover-title-overlay{padding-bottom:20px} #workDetailView .work-cover-title-row{align-items:center} #workDetailView .work-cover-title-row h1{max-width:min(680px,70vw)} #workDetailView .work-cover-title-overlay .mi-work-facts{width:100%;margin:14px 0 0;gap:6px} #workDetailView .work-cover-title-overlay .mi-work-facts article{background:rgba(18,19,23,.58);border:1px solid rgba(255,255,255,.18);color:#fff;box-shadow:none;backdrop-filter:none} #workDetailView .work-cover-title-overlay .mi-work-facts small{color:rgba(255,255,255,.68)} #workDetailView .work-cover-title-overlay .mi-work-facts strong{color:#fff} /* The support nodes only exist for JS compatibility. Never render them visually. */ #workDetailView .tappy-hidden-support{display:none!important} /* Work gallery: one cohesive visual strip instead of detached images. */ #workDetailView .modern-gallery-section{overflow:hidden} #workDetailView .series-gallery-grid.modern-gallery-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px;overflow:hidden;border-radius:16px;background:var(--surface-2)} #workDetailView .series-gallery-grid.modern-gallery-grid:empty{display:none} #workDetailView .series-gallery-grid.modern-gallery-grid img{display:block;width:100%;height:100%;min-height:180px;max-height:420px;object-fit:cover;border-radius:0;background:var(--surface-2);cursor:pointer} #workDetailView .series-gallery-grid.modern-gallery-grid img:only-child{grid-column:1/-1;max-height:560px;object-fit:contain;background:var(--surface)} #workDetailView .modern-gallery-empty{margin-top:0} /* Information pane: clean rows, no gray capsules behind every phrase. */ #workDetailView .unified-details-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 22px} #workDetailView .unified-detail-row{grid-template-columns:28px minmax(0,1fr);gap:9px;padding:11px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none} #workDetailView .unified-detail-row-wide{grid-column:1/-1} #workDetailView .unified-detail-icon{width:28px;height:28px;border-radius:0;background:transparent;color:var(--muted)} #workDetailView .unified-detail-icon svg{width:17px;height:17px} #workDetailView .unified-detail-copy small{font-size:8px;margin-bottom:1px} #workDetailView .unified-detail-copy strong{font-size:11px;line-height:1.65} #workDetailView .modern-source-link{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 11px;display:inline-flex;align-items:center;gap:6px;font-size:9px;font-weight:800} #workDetailView .modern-source-link:hover{background:var(--surface-2)} /* Legal/footer controls: reliable tap targets + consistent modal layer. */ .mi-site-footer{position:relative;z-index:2} .mi-footer-links{display:flex;flex-wrap:wrap;gap:5px 12px} .mi-footer-links button{border:0;background:transparent;color:var(--muted);padding:5px 0;min-height:32px;font-size:9px;text-decoration:none} .mi-footer-links button:hover{color:var(--text);text-decoration:underline;text-underline-offset:3px} .mi-legal-modal{z-index:220} .mi-legal-dialog{max-height:min(82vh,720px);overflow:auto} /* Keep helper/compat text completely out of page flow. */ .tappy-hidden-support,[aria-hidden="true"].work-detail-compat-header{display:none!important} @media(max-width:780px){ #homeView .exact-page-top{padding-top:5px} #homeView .mi-quick-tabs{margin-bottom:12px} #workDetailView .tappy-hero-shell{min-height:520px} #workDetailView .work-cover-title-overlay{padding:44px 12px 12px} #workDetailView .work-cover-title-row{display:grid;grid-template-columns:1fr;gap:8px} #workDetailView .work-cover-title-row h1{max-width:100%;font-size:28px} #workDetailView .work-cover-actions{justify-content:flex-start} #workDetailView .work-cover-title-overlay .mi-work-facts{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin-top:10px} #workDetailView .work-cover-title-overlay .mi-work-facts article{padding:7px 3px;border-radius:10px} #workDetailView .work-cover-title-overlay .mi-work-facts small{font-size:7px} #workDetailView .work-cover-title-overlay .mi-work-facts strong{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #workDetailView .series-gallery-grid.modern-gallery-grid{grid-template-columns:1fr;gap:2px;border-radius:13px} #workDetailView .series-gallery-grid.modern-gallery-grid img{min-height:0;max-height:none;aspect-ratio:auto;object-fit:contain;background:#0c0d10} #workDetailView .unified-details-list{grid-template-columns:1fr;gap:0} #workDetailView .unified-detail-row-wide{grid-column:auto} .mi-footer-links{gap:3px 10px} .mi-footer-links button{font-size:8px} } /* Keep legal controls above the fixed member dock and always tappable. */ .mi-site-footer{padding:18px 16px calc(var(--dock-h) + 42px);background:var(--bg)} .mi-footer-inner{width:min(var(--page),100%);margin:auto} .mi-footer-links button,[data-open-cookie-settings]{pointer-events:auto;position:relative;z-index:1} @media(max-width:780px){.mi-site-footer{padding-inline:12px;padding-bottom:calc(var(--dock-h) + 30px)}} /* v9.6.1 — wine accent, connected work hero, compact announcements, redesigned admin */ :root{--accent:#6B1D45;--accent-strong:#561638;--accent-text:#fff} html[data-theme="dark"]{--accent:#6B1D45;--accent-strong:#8A2B5B;--accent-text:#fff;--bg:#090a0d;--surface:#121318;--surface-2:#191b21;--surface-3:#22252c;--text:#f5f3f5;--muted:#aaa3a8;--line:#2a2d34;--line-strong:#383c45} :where(.primary-button,.ink-button,.exact-solid-button,.sheet-primary){background:var(--accent);color:#fff} :where(.primary-button,.ink-button,.exact-solid-button,.sheet-primary):hover{background:var(--accent-strong)} input:focus,select:focus,textarea:focus{border-color:color-mix(in srgb,var(--accent) 64%,var(--line));box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)} /* Work hero: no visual gap between cover, facts and tabs */ body.work-detail-open main>.view#workDetailView{background:var(--bg)} .kp-work-intro{position:relative;padding-bottom:0} .tappy-hero-shell{border-radius:0 0 28px 28px} .work-hero-facts{position:relative;z-index:12;width:min(900px,calc(100% - 28px));margin:-34px auto 0;padding:8px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;background:color-mix(in srgb,var(--surface) 72%,transparent);border:1px solid color-mix(in srgb,var(--line) 70%,transparent);border-radius:19px;backdrop-filter:blur(18px) saturate(135%);-webkit-backdrop-filter:blur(18px) saturate(135%);box-shadow:0 14px 38px rgba(13,10,14,.12)} .work-hero-facts article{background:color-mix(in srgb,var(--surface) 86%,transparent);border:0;border-radius:13px;padding:9px 7px;text-align:center;min-width:0} .work-hero-facts small{display:block;font-size:8px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.work-hero-facts strong{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .series-tabs{width:min(900px,calc(100% - 28px));margin:7px auto 0;top:7px;padding:5px;background:color-mix(in srgb,var(--surface) 78%,transparent);border-color:color-mix(in srgb,var(--line) 70%,transparent);backdrop-filter:blur(18px) saturate(135%);-webkit-backdrop-filter:blur(18px) saturate(135%);box-shadow:0 12px 30px rgba(13,10,14,.09)} .series-tabs button.active{background:color-mix(in srgb,var(--accent) 13%,var(--surface-2));color:var(--text)} .tappy-detail-content{padding-top:8px} /* Announcement pane: one focused card, no tutorial/sidebar copy */ .work-announcement-v961{border:0;background:transparent;padding:0;box-shadow:none;display:grid;gap:10px} .work-announcement-v961 .announcement-dashboard-head{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line);background:var(--surface);border-radius:18px;padding:13px 14px;box-shadow:var(--shadow-sm)} .work-announcement-v961 .announcement-dashboard-head h2{margin:2px 0 0;font-size:19px} .work-announcement-v961 .announcement-availability-badge{border:1px solid var(--line);background:var(--surface-2);border-radius:999px;padding:6px 9px;font-size:9px;color:var(--muted);white-space:nowrap} .work-announcement-v961 .announcement-availability-badge.active{background:color-mix(in srgb,var(--accent) 14%,var(--surface));border-color:color-mix(in srgb,var(--accent) 28%,var(--line));color:var(--accent)} .work-announcement-v961 .modern-announcement-card{border:1px solid color-mix(in srgb,var(--accent) 25%,var(--line));background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 10%,var(--surface)),var(--surface));border-radius:22px;padding:18px;box-shadow:var(--shadow-sm)} .work-announcement-v961 .announcement-card-topline{display:flex;align-items:center;gap:11px}.work-announcement-v961 .announcement-megaphone,.work-announcement-v961 .announcement-empty-icon{width:44px;height:44px;border-radius:14px;background:color-mix(in srgb,var(--accent) 12%,var(--surface-2));color:var(--accent);display:grid;place-items:center;flex:0 0 auto}.work-announcement-v961 .announcement-megaphone svg,.work-announcement-v961 .announcement-empty-icon svg{width:24px;height:24px}.work-announcement-v961 .announcement-card-topline small{color:var(--muted);font-size:9px}.work-announcement-v961 .announcement-card-topline h3{margin:2px 0 0;font-size:18px}.work-announcement-v961 .announcement-message{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}.work-announcement-v961 .announcement-message p{margin:0;line-height:1.9}.work-announcement-v961 .announcement-link{margin-top:13px;width:max-content;display:inline-flex;align-items:center;gap:6px;border-radius:12px;background:var(--accent);color:#fff;padding:8px 12px;font-weight:800}.work-announcement-v961 .modern-announcement-empty{border:1px dashed var(--line-strong);background:var(--surface);border-radius:22px;padding:34px 18px;text-align:center;color:var(--muted)}.work-announcement-v961 .modern-announcement-empty .announcement-empty-icon{margin:0 auto 9px}.work-announcement-v961 .modern-announcement-empty h3{margin:0;color:var(--text)} /* Admin: cleaner control-room layout */ #adminView{max-width:1240px}.admin-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:6px 0 18px}.admin-head h1{margin:2px 0 0;font-size:clamp(28px,4vw,42px)}.admin-head-badge{display:flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:8px 12px;font-size:10px;font-weight:800;color:var(--muted)}.admin-head-badge span{width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 0 4px color-mix(in srgb,var(--success) 15%,transparent)} .admin-dashboard{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px}.admin-dashboard article{position:relative;overflow:hidden;border-radius:20px;padding:16px;background:linear-gradient(160deg,var(--surface),color-mix(in srgb,var(--surface-2) 72%,var(--surface)));box-shadow:var(--shadow-sm)}.admin-dashboard article::after{content:"";position:absolute;width:70px;height:70px;border-radius:50%;background:color-mix(in srgb,var(--accent) 8%,transparent);inset-inline-end:-25px;bottom:-32px}.admin-dashboard span{font-size:9px}.admin-dashboard strong{font-size:24px} .unified-import-shortcut{display:grid;gap:3px;border-radius:20px;padding:15px 17px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 9%,var(--surface)),var(--surface));border-color:color-mix(in srgb,var(--accent) 22%,var(--line));text-align:right}.unified-import-shortcut>span{font-size:8px;letter-spacing:.08em;color:var(--accent)}.unified-import-shortcut>strong{font-size:14px}.unified-import-shortcut>small{color:var(--muted)} .kp-admin-layout{grid-template-columns:230px minmax(0,1fr);gap:14px}.kp-admin-sidebar{top:78px}.admin-tabs{padding:7px;border-radius:20px;box-shadow:var(--shadow-sm)}.admin-tabs button{min-height:42px;border-radius:12px;transition:.16s}.admin-tabs button.active{background:color-mix(in srgb,var(--accent) 12%,var(--surface-2));color:var(--accent)} .admin-panel,.unified-card,.official-sync-shell,.editor-shell,.reports-admin-shell,.mangalek-import-card,.compact-editor,.admin-recommendations-list-shell{border-radius:22px;box-shadow:var(--shadow-sm)} .editor-topline{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:13px;border-bottom:1px solid var(--line);margin-bottom:4px}.editor-topline h2{margin:2px 0 0}.editor-block{padding:17px 0}.editor-number{background:color-mix(in srgb,var(--accent) 12%,var(--surface-2));color:var(--accent);font-weight:900}.block-heading p{max-width:650px} /* Explicit dark surfaces */ html[data-theme="dark"] .site-header,html[data-theme="dark"] .member-dock{background:color-mix(in srgb,var(--surface) 90%,transparent)} html[data-theme="dark"] .work-hero-facts,html[data-theme="dark"] .series-tabs{background:color-mix(in srgb,#121318 78%,transparent)} html[data-theme="dark"] .tappy-hero-shell{background:#090a0d} html[data-theme="dark"] .exact-feature-carousel{background:#121318} @media(max-width:780px){ .tappy-hero-shell{min-height:500px;border-radius:0 0 22px 22px}.work-hero-facts{width:calc(100% - 18px);margin-top:-26px;padding:6px;gap:4px;border-radius:16px}.work-hero-facts article{padding:7px 3px;border-radius:10px}.work-hero-facts small{font-size:6.8px}.work-hero-facts strong{font-size:10px}.series-tabs{width:calc(100% - 18px);margin-top:6px} .work-announcement-v961 .announcement-dashboard-head{align-items:flex-start}.work-announcement-v961 .announcement-availability-badge{font-size:8px}.work-announcement-v961 .modern-announcement-card{padding:14px} .admin-head{align-items:flex-start}.admin-head-badge{display:none}.admin-dashboard{grid-template-columns:1fr 1fr}.kp-admin-layout{grid-template-columns:1fr}.kp-admin-sidebar{position:static;overflow-x:auto}.admin-tabs{display:flex;overflow-x:auto;scrollbar-width:none}.admin-tabs::-webkit-scrollbar{display:none}.admin-tabs button{white-space:nowrap;flex:0 0 auto;padding-inline:12px} } /* v9.6.2 — cover information inside hero + fade into tabs */ #workDetailView .tappy-hero-shell{ position:relative; overflow:hidden; border-radius:0; } #workDetailView .tappy-hero-shell::after{ content:""; position:absolute; z-index:3; left:0; right:0; bottom:-1px; height:132px; pointer-events:none; background:linear-gradient( 180deg, rgba(0,0,0,0) 0%, color-mix(in srgb,var(--bg) 22%,transparent) 38%, color-mix(in srgb,var(--bg) 70%,transparent) 72%, var(--bg) 100% ); } #workDetailView .work-cover-title-overlay{ z-index:5; padding-bottom:68px; background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.32) 30%,rgba(0,0,0,.84) 100%); } #workDetailView .work-cover-title-overlay .work-hero-facts{ position:static; z-index:auto; width:100%; margin:14px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; background:transparent; border:0; border-radius:0; backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none; } #workDetailView .work-cover-title-overlay .work-hero-facts article{ min-width:0; padding:9px 7px; border-radius:13px; background:rgba(15,16,20,.52); border:1px solid rgba(255,255,255,.15); color:#fff; box-shadow:none; } #workDetailView .work-cover-title-overlay .work-hero-facts small{ color:rgba(255,255,255,.66); } #workDetailView .work-cover-title-overlay .work-hero-facts strong{ color:#fff; } #workDetailView .series-tabs{ position:sticky; z-index:60; top:7px; width:min(900px,calc(100% - 28px)); margin:-34px auto 0; background:color-mix(in srgb,var(--bg) 68%,transparent); border-color:color-mix(in srgb,var(--line) 55%,transparent); backdrop-filter:blur(16px) saturate(125%); -webkit-backdrop-filter:blur(16px) saturate(125%); box-shadow:0 10px 28px rgba(13,10,14,.08); } #workDetailView .tappy-detail-content{ padding-top:12px; } html[data-theme="dark"] #workDetailView .series-tabs{ background:color-mix(in srgb,#0c0d11 72%,transparent); } @media(max-width:780px){ #workDetailView .work-cover-title-overlay{ padding:48px 12px 58px; } #workDetailView .work-cover-title-overlay .work-hero-facts{ gap:4px; margin-top:10px; } #workDetailView .work-cover-title-overlay .work-hero-facts article{ padding:7px 3px; border-radius:10px; } #workDetailView .work-cover-title-overlay .work-hero-facts small{ font-size:6.8px; } #workDetailView .work-cover-title-overlay .work-hero-facts strong{ font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #workDetailView .tappy-hero-shell::after{ height:108px; } #workDetailView .series-tabs{ width:calc(100% - 18px); margin-top:-26px; top:6px; } } /* v9.6.3 clean home + tighter work content */ #topCollectionsSection,#rotatingShelvesSection{display:block!important;visibility:visible!important;opacity:1!important;overflow:visible!important} .mi-category-tabs{gap:5px;margin:6px 0 10px} .mi-category-tabs button{min-height:38px;padding:7px 10px;border-radius:999px} .mi-category-tabs .mi-quick-icon{width:22px;height:22px} .mi-category-tabs .quick-tab-copy strong{font-size:10px} .mi-category-tabs .quick-tab-copy small{display:none!important} /* Story pane begins immediately with the synopsis; no duplicate intro block. */ #seriesOverview .overview-dashboard-head.overview-hero-head{display:none!important} #seriesOverview .overview-desktop-layout{margin-top:0} #seriesOverview .overview-main-column{gap:8px} #seriesOverview .overview-panel{margin-top:0} #workDetailView .tappy-detail-content{padding-top:3px} #workDetailView .tappy-detail-pane{padding-top:0} #workDetailView .series-tabs{margin-bottom:2px} /* Official platform name is the official source link itself. */ .official-platform-value{color:var(--text);font-weight:800;text-decoration:none;display:inline-flex;align-items:center;gap:5px;min-width:0} .official-platform-value.is-link{color:var(--accent)} .official-platform-value.is-link::after{content:"↗";font-size:10px;font-weight:900} .official-platform-value.is-link:hover{text-decoration:underline;text-underline-offset:3px} /* Report control now belongs with the legal/footer area. */ .mi-footer-report{display:flex;justify-content:flex-start;margin-bottom:10px} .mi-footer-report-button{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:12px;min-height:34px;padding:6px 10px;display:inline-flex;align-items:center;gap:6px;font-size:9px;font-weight:800} .mi-footer-report-button svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .mi-footer-report-button:hover{background:var(--surface-2)} .mi-footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap} .mi-footer-data-credit{display:none!important} @media(max-width:780px){ .mi-category-tabs{gap:4px;margin-top:4px} .mi-category-tabs button{min-height:34px;padding:6px 9px} .mi-category-tabs .mi-quick-icon{width:19px;height:19px} .mi-category-tabs .quick-tab-copy strong{font-size:9px} #workDetailView .tappy-detail-content{padding-top:0} #workDetailView .series-tabs{margin-bottom:0} .mi-footer-report-button{width:auto;min-height:32px} } /* ========================================================= v9.6.4 — admin, dark mode, carousel arrows, personalization ========================================================= */ /* Hero carousel: keep previous/next controls on opposite sides. */ .exact-feature-carousel{isolation:isolate} .exact-feature-pagination{ position:absolute!important; z-index:8; inset-inline:20px; bottom:22px; width:auto!important; margin:0!important; display:grid!important; grid-template-columns:42px 1fr 42px; align-items:center; pointer-events:none; } .exact-feature-pagination button{ pointer-events:auto; width:42px!important; height:42px!important; border-radius:14px!important; background:rgba(28,29,34,.72)!important; border:1px solid rgba(255,255,255,.17)!important; backdrop-filter:blur(10px); box-shadow:0 8px 20px rgba(0,0,0,.16); } #featuredPrev{grid-column:1;justify-self:start} #featuredNext{grid-column:3;justify-self:end} .feature-dots{grid-column:2;grid-row:1;justify-self:center;pointer-events:auto;display:flex;align-items:center;gap:6px} .feature-dots button{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.35);transition:width .2s var(--ease),background .2s} .feature-dots button.active{width:18px;border-radius:5px;background:#fff} /* Proper dark theme, including browser controls and floating surfaces. */ html[data-theme="dark"],html[data-theme="dark"] body{background:#090a0c!important;color:#f6f7f8} html[data-theme="dark"] .site-header, html[data-theme="dark"] .member-dock, html[data-theme="dark"] .dock-sheet, html[data-theme="dark"] .auth-modal, html[data-theme="dark"] .welcome-card, html[data-theme="dark"] .mi-legal-dialog{background:#111317!important} html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea{background:#171a20;color:#f5f6f8;border-color:#2a2e36} html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder{color:#747b87} html[data-theme="dark"] .exact-header-icon, html[data-theme="dark"] .secondary-button, html[data-theme="dark"] .line-button{background:#16191e;border-color:#2a2e36;color:#f5f6f8} /* Admin redesign — desktop control room. */ #adminView{width:min(1320px,calc(100% - 40px));max-width:1320px;padding-top:20px} .admin-head{ position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px 26px!important; margin:0 0 14px; border-radius:26px; color:#fff; background: radial-gradient(circle at 12% 15%,rgba(255,255,255,.10),transparent 34%), linear-gradient(135deg,#3f102a,#6B1D45 56%,#8a315f); box-shadow:0 18px 42px rgba(74,15,47,.20); } .admin-head::after{content:"";position:absolute;width:240px;height:240px;border:1px solid rgba(255,255,255,.10);border-radius:50%;inset-inline-end:-80px;top:-110px} .admin-head .eyebrow{color:rgba(255,255,255,.68)} .admin-head h1{margin:2px 0 3px!important;color:#fff;font-size:32px} .admin-head p{margin:0;color:rgba(255,255,255,.72);font-size:12px} .admin-head-copy{position:relative;z-index:1} .admin-head-badge{position:relative;z-index:1;display:flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.15);border-radius:999px;padding:8px 12px;font-size:11px;font-weight:800;white-space:nowrap} .admin-head-badge span{width:8px;height:8px;border-radius:50%;background:#6fe39d;box-shadow:0 0 0 4px rgba(111,227,157,.13)} .admin-dashboard{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px} .admin-dashboard article{ position:relative; min-height:92px; padding:15px 16px; border-radius:20px; overflow:hidden; background:linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--surface-2) 65%,var(--surface))); box-shadow:0 8px 24px rgba(18,23,31,.05) } .admin-dashboard article::after{content:"";position:absolute;width:54px;height:54px;border-radius:18px;background:color-mix(in srgb,var(--accent) 9%,transparent);inset-inline-end:-14px;bottom:-15px;transform:rotate(18deg)} .admin-dashboard span{font-size:10px} .admin-dashboard strong{display:block;margin-top:8px;font-size:25px;line-height:1} .unified-import-shortcut{ display:grid; grid-template-columns:auto 1fr; align-items:center; gap:4px 14px; min-height:80px; padding:16px 18px; border-color:color-mix(in srgb,var(--accent) 18%,var(--line)); background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 7%,var(--surface)),var(--surface)); text-align:right } .unified-import-shortcut>span{grid-row:1/3;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--accent);color:#fff;font-size:0} .unified-import-shortcut>span::before{content:"↳";font-size:24px} .unified-import-shortcut strong{font-size:14px}.unified-import-shortcut small{color:var(--muted)} .kp-admin-layout{grid-template-columns:230px minmax(0,1fr);gap:16px} .kp-admin-sidebar{position:sticky;top:76px} .admin-tabs{gap:5px;padding:8px;border-radius:22px;box-shadow:0 10px 28px rgba(17,20,27,.05)} .admin-tabs button{position:relative;min-height:44px;text-align:right;padding:10px 13px;border-radius:13px;transition:background .16s,color .16s,transform .16s} .admin-tabs button:hover{background:var(--surface-2);color:var(--text);transform:translateX(-2px)} .admin-tabs button.active{background:color-mix(in srgb,var(--accent) 12%,var(--surface-2));color:var(--accent)} .admin-tabs button.active::before{content:"";position:absolute;inset-block:10px;inset-inline-start:0;width:3px;border-radius:99px;background:var(--accent)} .kp-admin-content{min-width:0} .admin-panel,.unified-card,.official-sync-shell,.editor-shell,.reports-admin-shell,.mangalek-import-card,.compact-editor,.admin-recommendations-list-shell{ border-radius:24px; padding:18px; box-shadow:0 10px 32px rgba(18,23,31,.055) } .manager-toolbar,.unified-head,.official-sync-head,.reports-admin-head,.admin-recommendations-toolbar,.admin-recommendations-list-toolbar{align-items:center;padding-bottom:12px;border-bottom:1px solid var(--line)} .manager-toolbar label{flex:1;max-width:560px} .editor-topline{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--line)} .editor-block{grid-template-columns:42px minmax(0,1fr);gap:14px;padding:18px 0} .editor-number{width:38px;height:38px;border-radius:13px;background:color-mix(in srgb,var(--accent) 11%,var(--surface-2));color:var(--accent)} .block-heading h3{font-size:16px}.block-heading p{font-size:10px} .modern-form-grid,.advanced-grid,.official-sync-grid,.media-upload-grid,.pros-cons-grid,.collection-cover-fields{gap:11px} .official-sync-card{border:1px solid var(--line);background:var(--surface-2);border-radius:18px;padding:14px;display:flex;align-items:center;justify-content:space-between;gap:12px} /* Personalized recommendations — image-led cards, not text-heavy rows. */ .personalized-recommendations-section{overflow:hidden} .personalized-recommendations-grid{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; } .personalized-work-card{ display:block; min-width:0; padding:0; overflow:hidden; border-radius:18px; background:transparent; border:0; box-shadow:none; cursor:pointer; transition:transform .2s var(--ease) } .personalized-work-card:hover{transform:translateY(-4px);box-shadow:none} .personalized-work-cover{position:relative;width:100%;overflow:hidden;border-radius:16px;background:var(--surface-2);aspect-ratio:3/4;box-shadow:0 8px 22px rgba(17,20,27,.08)} .personalized-work-cover::after{content:"";position:absolute;inset:55% 0 0;background:linear-gradient(transparent,rgba(7,8,10,.65));pointer-events:none} .personalized-work-cover img{width:100%;height:100%;object-fit:cover;border-radius:0;transition:transform .3s var(--ease)} .personalized-work-card:hover .personalized-work-cover img{transform:scale(1.025)} .personalized-rating,.personalized-status{position:absolute;z-index:2;bottom:8px;background:rgba(10,11,14,.72);color:#fff;border:1px solid rgba(255,255,255,.15);backdrop-filter:blur(8px);border-radius:999px;padding:4px 7px;font-size:8px;font-weight:800} .personalized-rating{right:8px}.personalized-status{left:8px} .personalized-work-copy{padding:9px 2px 0} .personalized-work-copy h3{margin:0;font-size:12px;line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .personalized-work-copy p{margin:3px 0 0;color:var(--muted);font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .personalized-reason{display:flex;align-items:center;gap:5px;margin-top:6px;padding:0;background:transparent;color:var(--muted);font-size:8px;line-height:1.45} .personalized-reason span{flex:0 0 auto;width:5px;height:5px;border-radius:50%;background:var(--accent)} /* Desktop consistency. */ @media(min-width:1100px){ .site-header{padding-inline:max(24px,calc((100vw - 1320px)/2))} #homeView,#groupsView,#discoverView,#completedView,#profileView{width:min(1240px,calc(100% - 48px))} .exact-content-section{margin-block:34px} .poster-grid{grid-template-columns:repeat(6,minmax(0,1fr))} } @media(max-width:1000px){ .personalized-recommendations-grid{grid-template-columns:repeat(4,minmax(0,1fr))} .kp-admin-layout{grid-template-columns:1fr} .kp-admin-sidebar{position:static;overflow-x:auto;scrollbar-width:none} .admin-tabs{display:flex;overflow-x:auto;border-radius:17px;gap:5px} .admin-tabs button{white-space:nowrap;text-align:center;min-width:max-content} .admin-tabs button.active::before{inset:auto 12px 0;height:3px;width:auto} } @media(max-width:780px){ #adminView{width:calc(100% - 18px);padding-top:10px} .admin-head{padding:17px 16px!important;border-radius:22px;align-items:flex-start} .admin-head h1{font-size:24px}.admin-head p{font-size:10px;max-width:260px}.admin-head-badge{font-size:9px;padding:6px 9px} .admin-dashboard{grid-template-columns:1fr 1fr;gap:7px}.admin-dashboard article{min-height:76px;padding:12px}.admin-dashboard strong{font-size:20px} .unified-import-shortcut{grid-template-columns:38px 1fr;padding:12px;min-height:68px}.unified-import-shortcut>span{width:38px;height:38px}.unified-import-shortcut strong{font-size:11px}.unified-import-shortcut small{font-size:8px} .admin-panel,.unified-card,.official-sync-shell,.editor-shell,.reports-admin-shell,.mangalek-import-card,.compact-editor,.admin-recommendations-list-shell{padding:13px;border-radius:18px} .editor-block{grid-template-columns:30px minmax(0,1fr);gap:9px;padding:14px 0}.editor-number{width:30px;height:30px;border-radius:10px} .personalized-recommendations-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px} .personalized-work-cover{border-radius:13px}.personalized-work-copy h3{font-size:10px}.personalized-work-copy p{font-size:8px}.personalized-reason{font-size:7px} .exact-feature-pagination{inset-inline:12px;bottom:12px;grid-template-columns:38px 1fr 38px}.exact-feature-pagination button{width:38px!important;height:38px!important} } @media(max-width:480px){ .personalized-recommendations-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px} .personalized-rating,.personalized-status{font-size:6.5px;padding:3px 5px;bottom:5px}.personalized-rating{right:5px}.personalized-status{left:5px} .personalized-reason{display:none} } @media(min-width:900px){body.admin-view-open .member-dock{display:none!important}body.admin-view-open #adminView{padding-bottom:54px}} /* ========================================================= v9.6.6 — Admin Control Center + Import Review ========================================================= */ #adminView{max-width:1320px;padding-inline:clamp(12px,2.2vw,28px)} .admin-command-head{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:22px;margin:0 0 14px;padding:24px 26px;border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line));border-radius:28px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 18%,var(--surface)) 0%,var(--surface) 52%,var(--surface-2) 100%);box-shadow:0 18px 50px rgba(24,18,22,.07)} .admin-command-head::before{content:"";position:absolute;width:280px;height:280px;border-radius:50%;inset-inline-end:-100px;top:-160px;border:1px solid color-mix(in srgb,var(--accent) 18%,transparent);box-shadow:0 0 0 48px color-mix(in srgb,var(--accent) 4%,transparent)} .admin-command-brand,.admin-command-actions{position:relative;z-index:1} .admin-command-kicker{display:inline-block;color:var(--accent);font-size:9px;font-weight:900;letter-spacing:.1em;margin-bottom:6px} .admin-command-brand h1{margin:0;font-size:clamp(28px,4vw,46px);letter-spacing:-.035em;line-height:1.05} .admin-command-brand p{max-width:620px;margin:8px 0 0;color:var(--muted);font-size:12px;line-height:1.8} .admin-command-actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end} .admin-command-actions button{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:14px;min-height:42px;padding:8px 13px;font-weight:850;font-size:10px;box-shadow:var(--shadow-sm);transition:transform .16s,background .16s,border-color .16s} .admin-command-actions button:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 34%,var(--line))} .admin-command-actions .admin-command-primary{background:var(--accent);border-color:var(--accent);color:#fff} #adminView .admin-dashboard{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px} #adminView .admin-dashboard article{position:relative;overflow:hidden;min-height:104px;padding:15px 16px;border:1px solid var(--line);border-radius:22px;background:var(--surface);box-shadow:var(--shadow-sm)} #adminView .admin-dashboard article::before{content:"";position:absolute;width:76px;height:76px;border-radius:24px;inset-inline-end:-24px;bottom:-30px;background:color-mix(in srgb,var(--accent) 8%,transparent);transform:rotate(20deg)} #adminView .admin-dashboard span,#adminView .admin-dashboard small{position:relative;z-index:1;display:block;color:var(--muted)} #adminView .admin-dashboard span{font-size:9px;font-weight:800} #adminView .admin-dashboard strong{position:relative;z-index:1;display:block;margin:8px 0 5px;font-size:26px;line-height:1} #adminView .admin-dashboard small{font-size:8px} .admin-review-shortcut{width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;text-align:right;margin:0 0 16px;padding:15px 18px;border:1px solid color-mix(in srgb,var(--accent) 25%,var(--line));border-radius:20px;background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 9%,var(--surface)),var(--surface));color:var(--text);box-shadow:var(--shadow-sm)} .admin-review-shortcut div{min-width:0}.admin-review-shortcut span,.admin-review-shortcut strong,.admin-review-shortcut small{display:block}.admin-review-shortcut span{font-size:8px;color:var(--accent);font-weight:900;letter-spacing:.12em}.admin-review-shortcut strong{font-size:14px;margin:3px 0}.admin-review-shortcut small{font-size:9px;color:var(--muted)}.admin-review-shortcut b{white-space:nowrap;color:var(--accent);font-size:10px} #adminView .kp-admin-layout{display:grid;grid-template-columns:255px minmax(0,1fr);gap:16px;align-items:start} #adminView .kp-admin-sidebar{position:sticky;top:76px;display:grid;gap:10px} .admin-nav-brand{padding:13px 14px;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:var(--shadow-sm)} .admin-nav-brand span,.admin-nav-brand small{display:block}.admin-nav-brand span{font-weight:900;font-size:13px}.admin-nav-brand small{margin-top:3px;color:var(--muted);font-size:8px} .admin-nav-group{border:1px solid var(--line);border-radius:19px;background:var(--surface);padding:7px;box-shadow:var(--shadow-sm)} .admin-nav-group-title{display:block;padding:6px 8px 7px;color:var(--muted);font-size:8px;font-weight:900;letter-spacing:.06em} #adminView .admin-tabs{display:grid;gap:4px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none} #adminView .admin-tabs button{position:relative;width:100%;min-height:40px;padding:8px 11px;border:0;border-radius:12px;background:transparent;color:var(--muted);text-align:right;font-weight:800;font-size:10px;transition:background .14s,color .14s,transform .14s} #adminView .admin-tabs button:hover{background:var(--surface-2);color:var(--text);transform:none} #adminView .admin-tabs button.active{background:color-mix(in srgb,var(--accent) 11%,var(--surface-2));color:var(--accent)} #adminView .admin-tabs button.active::before{content:"";position:absolute;inset-block:9px;inset-inline-start:0;width:3px;border-radius:99px;background:var(--accent)} #adminView .kp-admin-content{min-width:0} #adminView .admin-panel{display:none} #adminView .admin-panel.active{display:block;animation:adminPanelIn .2s ease both} @keyframes adminPanelIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}} #adminView .admin-panel,#adminView .unified-card,#adminView .official-sync-shell,#adminView .editor-shell,#adminView .reports-admin-shell,#adminView .mangalek-import-card,#adminView .compact-editor,#adminView .admin-recommendations-list-shell{border:1px solid var(--line);border-radius:24px;background:var(--surface);padding:18px;box-shadow:0 14px 44px rgba(16,18,22,.055);margin-bottom:12px} #adminView .manager-toolbar,#adminView .unified-head,#adminView .official-sync-head,#adminView .reports-admin-head,#adminView .admin-recommendations-toolbar,#adminView .admin-recommendations-list-toolbar{align-items:center;gap:12px;padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--line)} #adminView .manager-toolbar input{min-width:min(420px,54vw)} #adminView .editor-topline{position:sticky;top:68px;z-index:12;margin:-18px -18px 14px;padding:13px 18px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(14px);border-radius:24px 24px 0 0} #adminView .editor-block{grid-template-columns:40px minmax(0,1fr);gap:14px;padding:18px 0} #adminView .editor-number{width:36px;height:36px;border-radius:12px;background:color-mix(in srgb,var(--accent) 10%,var(--surface-2));color:var(--accent)} #adminView .block-heading h3{font-size:15px}.block-heading p{font-size:9px} #adminView .modern-form-grid,#adminView .advanced-grid,#adminView .official-sync-grid,#adminView .media-upload-grid,#adminView .pros-cons-grid,#adminView .collection-cover-fields{gap:10px} #adminView input,#adminView select,#adminView textarea{background:var(--surface-2);border-color:var(--line);border-radius:13px} #adminView input:focus,#adminView select:focus,#adminView textarea:focus{border-color:color-mix(in srgb,var(--accent) 60%,var(--line));box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 9%,transparent)} #adminView .admin-works-list>*,#adminView .manage-collections-list>*,#adminView .import-results>*,#adminView .unified-result-list>*,#adminView .official-sync-results>*,#adminView .admin-reports-list>*,#adminView .mangalek-result-list>*{border-radius:17px;background:var(--surface-2);transition:transform .15s,border-color .15s} #adminView .admin-works-list>*:hover,#adminView .import-results>*:hover,#adminView .unified-result-list>*:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--accent) 28%,var(--line))} #adminView .official-sync-grid{grid-template-columns:repeat(3,minmax(0,1fr))} #adminView .official-sync-card{min-height:150px;border:1px solid var(--line);border-radius:19px;background:linear-gradient(160deg,var(--surface-2),var(--surface));padding:14px;display:flex;flex-direction:column;justify-content:space-between;gap:12px} /* Full import review step — every import is editable before save */ .mi-import-review-backdrop{position:fixed;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(8,9,12,.72);backdrop-filter:blur(10px);animation:reviewFadeIn .18s ease both} @keyframes reviewFadeIn{from{opacity:0}to{opacity:1}} .mi-import-review-sheet{width:min(1120px,100%);max-height:92dvh;overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr);border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));border-radius:28px;background:var(--bg);box-shadow:0 28px 90px rgba(0,0,0,.32);animation:reviewSheetIn .22s cubic-bezier(.2,.8,.2,1) both} @keyframes reviewSheetIn{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}} .mi-import-review-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:18px 20px;border-bottom:1px solid var(--line);background:var(--surface)} .mi-import-review-head span{font-size:8px;font-weight:900;letter-spacing:.12em;color:var(--accent)}.mi-import-review-head h2{margin:4px 0 3px;font-size:23px}.mi-import-review-head p{margin:0;color:var(--muted);font-size:9px} .mi-import-review-close{width:38px;height:38px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);color:var(--text);font-size:22px;line-height:1} .mi-import-review-layout{min-height:0;display:grid;grid-template-columns:235px minmax(0,1fr);overflow:hidden} .mi-import-review-side{padding:16px;border-inline-end:1px solid var(--line);background:var(--surface);overflow:auto}.mi-import-review-cover{aspect-ratio:3/4;overflow:hidden;border-radius:18px;background:var(--surface-2);border:1px solid var(--line)}.mi-import-review-cover img{width:100%;height:100%;object-fit:cover;display:block}.mi-import-review-cover-empty{width:100%;height:100%;display:grid;place-items:center;color:var(--muted)} .mi-import-review-source{padding:13px 3px}.mi-import-review-source small,.mi-import-review-source strong,.mi-import-review-source span{display:block}.mi-import-review-source small{font-size:8px;color:var(--muted)}.mi-import-review-source strong{margin:3px 0;font-size:13px}.mi-import-review-source span{font-size:8px;line-height:1.7;color:var(--muted)} .mi-import-review-form{min-width:0;overflow:auto;padding:18px;display:grid;gap:12px;background:var(--bg)} .mi-import-review-section{border:1px solid var(--line);border-radius:19px;background:var(--surface);padding:14px}.mi-import-review-section>header{display:flex;align-items:center;gap:9px;padding-bottom:11px;margin-bottom:11px;border-bottom:1px solid var(--line)}.mi-import-review-section>header>span{width:31px;height:31px;border-radius:10px;background:color-mix(in srgb,var(--accent) 11%,var(--surface-2));color:var(--accent);display:grid;place-items:center;font-size:9px;font-weight:900}.mi-import-review-section header strong,.mi-import-review-section header small{display:block}.mi-import-review-section header strong{font-size:12px}.mi-import-review-section header small{font-size:8px;color:var(--muted);margin-top:2px} .mi-import-review-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.mi-import-review-form label{display:grid;gap:5px;min-width:0}.mi-import-review-form label>span{font-size:8px;font-weight:800;color:var(--muted)}.mi-import-review-form input,.mi-import-review-form select,.mi-import-review-form textarea{width:100%;min-width:0;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);color:var(--text);padding:10px 11px;font:inherit;font-size:10px;outline:none}.mi-import-review-form input:focus,.mi-import-review-form select:focus,.mi-import-review-form textarea:focus{border-color:color-mix(in srgb,var(--accent) 58%,var(--line));box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 9%,transparent)}.mi-import-review-form textarea{resize:vertical;line-height:1.8}.mi-import-review-form .full{grid-column:1/-1} .mi-import-review-actions{position:sticky;bottom:-18px;z-index:3;display:flex;justify-content:flex-end;gap:8px;padding:13px 0 0;background:linear-gradient(180deg,transparent,var(--bg) 28%)}.mi-import-review-actions button{min-width:150px} @media(max-width:900px){ #adminView{padding-inline:10px}.admin-command-head{grid-template-columns:1fr;padding:18px;border-radius:22px}.admin-command-actions{justify-content:flex-start}.admin-command-actions button{flex:1 1 auto} #adminView .admin-dashboard{grid-template-columns:1fr 1fr;gap:7px}.admin-review-shortcut{align-items:flex-start}.admin-review-shortcut b{display:none} #adminView .kp-admin-layout{grid-template-columns:1fr}.kp-admin-sidebar{position:static!important;display:block!important;overflow:visible!important}.admin-nav-brand{display:none}.admin-nav-group{margin-bottom:7px;padding:5px;border-radius:15px}.admin-nav-group-title{padding:4px 7px;font-size:7px} #adminView .admin-tabs{display:flex!important;gap:4px;overflow-x:auto;scrollbar-width:none;direction:rtl}#adminView .admin-tabs::-webkit-scrollbar{display:none}#adminView .admin-tabs button{width:auto;min-width:max-content;min-height:37px;padding:7px 10px;text-align:center}#adminView .admin-tabs button.active::before{inset:auto 10px 0;height:3px;width:auto} #adminView .editor-topline{top:0}.mi-import-review-layout{grid-template-columns:180px minmax(0,1fr)} } @media(max-width:640px){ .admin-command-head{padding:16px 14px}.admin-command-brand h1{font-size:25px}.admin-command-brand p{font-size:9px}.admin-command-actions{display:grid;grid-template-columns:1fr 1fr}.admin-command-actions .admin-command-primary{grid-column:1/-1} #adminView .admin-dashboard article{min-height:82px;padding:12px}#adminView .admin-dashboard strong{font-size:21px}#adminView .admin-dashboard small{display:none} .admin-review-shortcut{padding:12px 13px}.admin-review-shortcut strong{font-size:12px}.admin-review-shortcut small{font-size:8px} #adminView .admin-panel,#adminView .unified-card,#adminView .official-sync-shell,#adminView .editor-shell,#adminView .reports-admin-shell,#adminView .mangalek-import-card,#adminView .compact-editor,#adminView .admin-recommendations-list-shell{padding:13px;border-radius:18px} #adminView .editor-topline{margin:-13px -13px 12px;padding:11px 13px;border-radius:18px 18px 0 0}#adminView .editor-block{grid-template-columns:28px minmax(0,1fr);gap:9px;padding:14px 0}#adminView .editor-number{width:28px;height:28px;border-radius:9px} #adminView .modern-form-grid,#adminView .advanced-grid,#adminView .official-sync-grid,#adminView .media-upload-grid,#adminView .pros-cons-grid,#adminView .collection-cover-fields{grid-template-columns:1fr}.form-span-2,.wide-field{grid-column:auto} #adminView .official-sync-grid{grid-template-columns:1fr} .mi-import-review-backdrop{align-items:flex-end;padding:0}.mi-import-review-sheet{width:100%;height:min(94dvh,900px);max-height:94dvh;border-radius:24px 24px 0 0;border-bottom:0}.mi-import-review-head{padding:14px 15px}.mi-import-review-head h2{font-size:19px}.mi-import-review-head p{font-size:8px}.mi-import-review-layout{display:block;overflow:auto}.mi-import-review-side{display:grid;grid-template-columns:82px minmax(0,1fr);gap:11px;align-items:center;padding:12px 14px;border-inline-end:0;border-bottom:1px solid var(--line)}.mi-import-review-cover{width:82px;aspect-ratio:3/4;border-radius:13px}.mi-import-review-source{padding:0}.mi-import-review-form{overflow:visible;padding:12px}.mi-import-review-section{padding:11px;border-radius:16px}.mi-import-review-grid{grid-template-columns:1fr}.mi-import-review-form .full{grid-column:auto}.mi-import-review-actions{bottom:-12px;display:grid;grid-template-columns:1fr 1fr;padding-top:11px}.mi-import-review-actions button{min-width:0;width:100%} } /* v9.6.7 — mobile-first admin layout + compact genre picker */ #adminView{box-sizing:border-box;overflow-x:clip} #adminView *{box-sizing:border-box;min-width:0} /* Compact genre picker: the 25 genres no longer occupy the editor permanently. */ #adminView .work-genre-original-field{display:none!important} #adminView .work-genre-preference-editor{grid-column:1/-1;border:1px solid var(--line);border-radius:15px;background:var(--surface-2);overflow:hidden;margin-top:2px} #adminView .work-genre-preference-toggle{width:100%;min-height:50px;border:0;background:transparent;color:var(--text);padding:10px 12px;display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:right} #adminView .work-genre-preference-toggle-copy strong,#adminView .work-genre-preference-toggle-copy small{display:block} #adminView .work-genre-preference-toggle-copy strong{font-size:11px} #adminView .work-genre-preference-toggle-copy small{margin-top:2px;color:var(--muted);font-size:8px} #adminView .work-genre-preference-toggle-action{flex:0 0 auto;display:flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 10px;font-size:9px;font-weight:800;color:var(--text)} #adminView .work-genre-preference-toggle-action b{font-size:13px;transition:transform .18s ease} #adminView .work-genre-preference-editor.is-open .work-genre-preference-toggle-action b{transform:rotate(180deg)} #adminView .work-genre-preference-body{padding:10px 12px 12px;border-top:1px solid var(--line);background:var(--surface)} #adminView .work-genre-preference-body.hidden{display:none!important} #adminView .work-genre-preference-tools{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px;color:var(--muted);font-size:8px} #adminView .work-genre-preference-tools button{border:0;background:var(--accent);color:var(--accent-text);border-radius:999px;padding:6px 11px;font-size:8px;font-weight:900} #adminView .work-genre-preference-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;max-height:230px;overflow:auto;overscroll-behavior:contain;padding:1px;scrollbar-width:thin} #adminView .work-genre-preference-choice{display:block;cursor:pointer} #adminView .work-genre-preference-choice input{position:absolute;opacity:0;pointer-events:none} #adminView .work-genre-preference-choice>span{min-height:38px;border:1px solid var(--line);border-radius:11px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;gap:5px;padding:6px 7px;text-align:center;font-size:8.5px;font-weight:800;line-height:1.35;transition:background .14s,border-color .14s,color .14s,transform .14s} #adminView .work-genre-preference-choice>span svg{width:15px;height:15px;flex:0 0 auto} #adminView .work-genre-preference-choice input:checked+span{background:color-mix(in srgb,var(--accent) 13%,var(--surface));border-color:color-mix(in srgb,var(--accent) 42%,var(--line));color:var(--accent)} /* Cleaner admin desktop baseline. */ #adminView .page-editorial-head.admin-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:12px;padding:14px 2px 16px} #adminView .admin-head-copy h1{font-size:clamp(26px,3vw,38px);margin:3px 0 0} #adminView .admin-head-copy p{max-width:620px;font-size:10px} #adminView .admin-dashboard{gap:9px} #adminView .admin-dashboard article{min-height:84px;padding:12px 14px} #adminView .admin-dashboard strong{font-size:23px} #adminView .unified-import-shortcut{min-height:72px;display:grid;align-content:center;gap:2px;padding:12px 15px} #adminView .unified-import-shortcut span{font-size:7px;color:var(--accent);font-weight:900;letter-spacing:.08em} #adminView .unified-import-shortcut strong{font-size:13px} #adminView .unified-import-shortcut small{font-size:8px;color:var(--muted)} @media(max-width:780px){ body.admin-view-open .site-header{display:none!important} body.admin-view-open main{padding-top:0} #adminView{width:100%!important;max-width:none!important;padding:8px 8px calc(var(--dock-h) + 26px)!important;margin:0!important} #adminView .page-editorial-head.admin-head{position:relative;display:block;margin:0 0 8px;padding:13px 12px;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:var(--shadow-sm)} #adminView .admin-head-copy .eyebrow{font-size:7px} #adminView .admin-head-copy h1{font-size:22px;line-height:1.2;margin:2px 0 0} #adminView .admin-head-copy p{margin-top:4px;font-size:8px;line-height:1.6;max-width:none} #adminView .admin-head-badge{position:absolute;top:12px;left:12px;font-size:8px;padding:5px 8px} #adminView .admin-dashboard{grid-template-columns:repeat(4,minmax(72px,1fr))!important;gap:6px;overflow-x:auto;padding:0 0 3px;margin-bottom:8px;scrollbar-width:none;scroll-snap-type:x proximity} #adminView .admin-dashboard::-webkit-scrollbar{display:none} #adminView .admin-dashboard article{min-width:78px;min-height:68px!important;padding:9px 10px!important;border-radius:15px;scroll-snap-align:start} #adminView .admin-dashboard span{font-size:7px!important;white-space:nowrap} #adminView .admin-dashboard strong{font-size:18px!important;margin:5px 0 0!important} #adminView .admin-dashboard small{display:none!important} #adminView .unified-import-shortcut{min-height:58px;margin-bottom:8px;padding:10px 12px;border-radius:16px} #adminView .unified-import-shortcut span{display:none} #adminView .unified-import-shortcut strong{font-size:11px} #adminView .unified-import-shortcut small{font-size:7.5px;line-height:1.45} #adminView .kp-admin-layout{display:block!important} #adminView .kp-admin-sidebar{position:sticky!important;top:0!important;z-index:65!important;margin:0 -8px 8px;padding:6px 8px;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(12px);overflow:hidden!important;border-block:1px solid var(--line)} #adminView .admin-tabs{display:flex!important;gap:5px!important;overflow-x:auto!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;scrollbar-width:none;scroll-snap-type:x proximity} #adminView .admin-tabs::-webkit-scrollbar{display:none} #adminView .admin-tabs button{flex:0 0 auto!important;width:auto!important;min-width:max-content!important;min-height:34px!important;padding:6px 9px!important;border:1px solid var(--line)!important;border-radius:999px!important;background:var(--surface)!important;color:var(--muted)!important;font-size:8px!important;text-align:center!important;scroll-snap-align:start} #adminView .admin-tabs button.active{background:color-mix(in srgb,var(--accent) 12%,var(--surface))!important;color:var(--accent)!important;border-color:color-mix(in srgb,var(--accent) 36%,var(--line))!important} #adminView .admin-tabs button.active::before{display:none!important} #adminView .kp-admin-content{width:100%} #adminView .admin-panel,#adminView .unified-card,#adminView .official-sync-shell,#adminView .editor-shell,#adminView .reports-admin-shell,#adminView .mangalek-import-card,#adminView .compact-editor,#adminView .admin-recommendations-list-shell{width:100%;padding:11px!important;border-radius:17px!important;margin-bottom:8px!important;box-shadow:none!important} #adminView .manager-toolbar,#adminView .unified-head,#adminView .official-sync-head,#adminView .reports-admin-head,#adminView .admin-recommendations-toolbar,#adminView .admin-recommendations-list-toolbar{display:grid!important;grid-template-columns:1fr;align-items:stretch!important;gap:7px!important;padding-bottom:9px!important;margin-bottom:9px!important} #adminView .manager-toolbar label,#adminView .manager-toolbar input{width:100%!important;min-width:0!important} #adminView .manager-toolbar button{width:100%} #adminView .unified-head p,#adminView .official-sync-head p{font-size:8px;line-height:1.55} #adminView .unified-badge{justify-self:start;font-size:7px} #adminView .editor-topline{position:static!important;margin:-11px -11px 8px!important;padding:10px 11px!important;border-radius:17px 17px 0 0!important;backdrop-filter:none!important} #adminView .editor-topline h2{font-size:17px;margin:2px 0} #adminView .editor-topline>div>span{font-size:7px} #adminView .editor-topline button{padding:7px 9px;font-size:8px} #adminView .editor-block{display:block!important;padding:12px 0!important} #adminView .editor-number{display:none!important} #adminView .block-heading{margin-bottom:8px} #adminView .block-heading h3{font-size:13px!important} #adminView .block-heading p{display:none!important} #adminView .modern-form-grid,#adminView .advanced-grid,#adminView .official-sync-grid,#adminView .media-upload-grid,#adminView .pros-cons-grid,#adminView .collection-cover-fields{grid-template-columns:1fr!important;gap:8px!important} #adminView .form-span-2,#adminView .wide-field{grid-column:auto!important} #adminView input,#adminView select,#adminView textarea{min-height:42px!important;padding:9px 10px!important;border-radius:12px!important;font-size:10px!important} #adminView textarea{min-height:96px!important} #adminView .upload-zone{padding:12px!important;border-radius:14px!important} #adminView .upload-zone .upload-icon{font-size:18px} #adminView .upload-zone strong{font-size:10px} #adminView .upload-zone small{font-size:7px} #adminView .work-genre-preference-editor{border-radius:13px} #adminView .work-genre-preference-toggle{min-height:45px;padding:8px 9px} #adminView .work-genre-preference-toggle-copy strong{font-size:10px} #adminView .work-genre-preference-toggle-copy small{font-size:7.5px} #adminView .work-genre-preference-toggle-action{padding:6px 8px;font-size:8px} #adminView .work-genre-preference-body{padding:8px 9px 9px} #adminView .work-genre-preference-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;max-height:190px} #adminView .work-genre-preference-choice>span{min-height:34px;padding:5px 6px;border-radius:10px;font-size:8px} #adminView .official-sync-grid{grid-template-columns:1fr!important} #adminView .official-sync-card{min-height:auto!important;padding:11px!important;border-radius:15px!important} #adminView .unified-controls{grid-template-columns:1fr!important} #adminView .unified-search-row{display:grid!important;grid-template-columns:1fr auto!important} #adminView .unified-toolbar{align-items:flex-start!important;flex-direction:column!important} #adminView .admin-works-list>*,#adminView .manage-collections-list>*,#adminView .import-results>*,#adminView .unified-result-list>*,#adminView .official-sync-results>*,#adminView .admin-reports-list>*,#adminView .mangalek-result-list>*{padding:9px!important;border-radius:13px!important} } @media(max-width:390px){ #adminView{padding-inline:6px!important} #adminView .kp-admin-sidebar{margin-inline:-6px;padding-inline:6px} #adminView .admin-dashboard article{min-width:74px} #adminView .work-genre-preference-grid{grid-template-columns:1fr 1fr} } /* final mobile header correction */ @media(max-width:780px){ #adminView .page-editorial-head.admin-head{ min-height:0!important; padding:14px 13px!important; border:0!important; border-radius:18px!important; color:#fff!important; background:linear-gradient(135deg,#3f102a,#6B1D45 64%,#7c2853)!important; box-shadow:0 10px 24px rgba(74,15,47,.16)!important; } #adminView .page-editorial-head.admin-head::after{display:none!important} #adminView .admin-head-copy{padding-inline-start:0;padding-inline-end:58px} #adminView .admin-head-copy .eyebrow{color:rgba(255,255,255,.62)!important;font-size:7px} #adminView .admin-head-copy h1{color:#fff!important;font-size:22px!important} #adminView .admin-head-copy p{color:rgba(255,255,255,.72)!important;font-size:8px!important;line-height:1.55} #adminView .admin-head-badge{top:12px;left:12px!important;right:auto!important;background:rgba(0,0,0,.14)!important;border-color:rgba(255,255,255,.17)!important;color:#fff!important} } @media(max-width:780px){#adminView .unified-import-shortcut{width:100%!important;display:block!important;text-align:right!important}#adminView .unified-import-shortcut strong,#adminView .unified-import-shortcut small{display:block}} /* v9.6.8: guaranteed theme surface synchronization */ html,body,.site-header,.member-dock,.dock-sheet,.auth-modal,.welcome-card,.mi-legal-dialog,.view,.admin-panel,.editor-shell,.comment-card{transition:background-color .18s ease,color .18s ease,border-color .18s ease} html.dark,html[data-theme="dark"],body.dark,body[data-theme="dark"]{color-scheme:dark} html.light,html[data-theme="light"],body.light,body[data-theme="light"]{color-scheme:light} @media(prefers-reduced-motion:reduce){html,body,.site-header,.member-dock,.dock-sheet,.auth-modal,.welcome-card,.mi-legal-dialog,.view,.admin-panel,.editor-shell,.comment-card{transition:none}} /* ========================================================= v9.6.12 — onboarding, welcome, work hero controls, gallery polish ========================================================= */ .preferences-sheet.multi-preference-sheet{width:min(860px,100%);max-height:min(90vh,840px);padding:20px} .preference-sheet-header{align-items:flex-start}.preference-sheet-header .eyebrow{color:var(--accent);font-weight:900} .preference-welcome-band{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:12px;align-items:stretch;margin-bottom:12px} .preference-band-copy,.preference-band-badge{border:1px solid var(--line);border-radius:20px;background:linear-gradient(180deg,var(--surface),var(--surface-2));padding:16px} .preference-band-copy strong{display:block;font-size:22px;margin-bottom:6px}.preference-band-copy p,.preference-band-badge small{color:var(--muted);line-height:1.8} .preference-band-badge{display:grid;place-items:center;text-align:center;gap:8px;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 14%,var(--surface)),var(--surface))} .preference-band-badge span{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent);font-size:22px;font-weight:900} .preference-selection-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:10px 2px 8px;color:var(--muted);font-size:13px} .preference-selection-toolbar button{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:999px;padding:8px 12px;font-weight:800} .preference-helper-strip{margin-bottom:12px;color:var(--muted);font-size:12px} .preference-multi-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .preference-multi-card{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr) 28px;align-items:center;gap:12px;padding:14px 16px;border-radius:20px;border:1px solid var(--line);background:var(--surface);cursor:pointer;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,background .16s ease} .preference-multi-card input{position:absolute;inset:0;opacity:0;pointer-events:none}.preference-multi-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)} .preference-multi-icon{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;background:var(--surface-2);color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line))} .preference-multi-icon .mi-icon,.preference-multi-icon svg{width:24px;height:24px;stroke-width:1.8}.preference-multi-label{font-size:19px;font-weight:900;line-height:1.5} .preference-multi-check{width:28px;height:28px;border-radius:999px;display:grid;place-items:center;border:1px solid var(--line);color:transparent;background:var(--surface-2)} .preference-multi-card:has(input:checked){border-color:color-mix(in srgb,var(--accent) 70%,var(--line));background:color-mix(in srgb,var(--accent) 11%,var(--surface));box-shadow:0 12px 30px color-mix(in srgb,var(--accent) 18%,transparent)} .preference-multi-card:has(input:checked) .preference-multi-icon{background:color-mix(in srgb,var(--accent) 17%,var(--surface-2))} .preference-multi-card:has(input:checked) .preference-multi-check{background:var(--accent);border-color:var(--accent);color:var(--accent-text)} .preferences-sheet .sheet-primary{width:100%;min-height:50px;margin-top:14px;font-size:16px} .welcome-card-v9612{width:min(760px,100%);padding:24px;border-radius:30px;overflow:hidden;background:radial-gradient(circle at top right,color-mix(in srgb,var(--accent) 18%,transparent),transparent 38%),linear-gradient(180deg,var(--bg),var(--surface))} .welcome-hero-stack{display:grid;grid-template-columns:140px minmax(0,1fr);gap:18px;align-items:center;margin-bottom:18px} .welcome-hero-logo{min-height:140px;border-radius:26px;border:1px solid var(--line);background:linear-gradient(180deg,var(--surface),var(--surface-2));display:grid;place-items:center;padding:20px} .welcome-hero-logo img{max-width:100%;max-height:96px;object-fit:contain}.production-welcome-kicker{display:inline-flex;padding:8px 12px;border-radius:999px;background:color-mix(in srgb,var(--accent) 10%,var(--surface));color:var(--accent);font-weight:900;margin-bottom:10px} .welcome-card-v9612 h2{font-size:clamp(28px,4vw,42px);line-height:1.2;margin:0 0 10px}.production-welcome-copy{font-size:16px;line-height:1.9} .welcome-feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:18px} .welcome-feature-grid>div{border:1px solid var(--line);border-radius:20px;background:var(--surface);padding:14px;display:grid;gap:10px} .production-welcome-feature-icon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 10%,var(--surface-2));color:var(--accent)} .production-welcome-feature-icon svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.welcome-feature-grid strong{display:block;margin-bottom:4px}.welcome-feature-grid small{color:var(--muted);line-height:1.7} .welcome-card-actions{display:grid;gap:10px}.production-welcome-start{min-height:52px;font-size:16px}.production-welcome-instagram{text-align:center;border:1px solid var(--line);border-radius:16px;padding:13px 16px;color:var(--text);background:var(--surface);text-decoration:none;font-weight:800}.production-welcome-instagram:hover{background:var(--surface-2)} #workDetailView .work-cover-top-controls{position:absolute;z-index:6;top:18px;left:max(18px,calc((100% - 920px)/2));right:max(18px,calc((100% - 920px)/2));display:flex;align-items:center;justify-content:space-between;gap:12px} #workDetailView .work-cover-top-actions{display:flex;align-items:center;gap:8px} #workDetailView .work-cover-back-button,#workDetailView .work-cover-report-button{position:static;width:auto;height:auto;min-height:42px;padding:8px 14px;justify-content:center} #workDetailView .work-cover-back-button,#workDetailView .work-cover-report-button{border:1px solid rgba(255,255,255,.28);background:rgba(16,17,20,.58);color:#fff;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:13px;display:flex;align-items:center;gap:7px;font-weight:800;transition:transform .16s,background .16s} #workDetailView .work-cover-back-button:hover,#workDetailView .work-cover-report-button:hover{background:rgba(32,34,39,.78);transform:translateY(-1px)} #workDetailView .work-cover-back-button span,#workDetailView .work-cover-report-button span{display:inline}#workDetailView .work-cover-back-button svg{width:18px;height:18px}#workDetailView .work-cover-report-button svg{width:18px;height:18px} #workDetailView .series-gallery-grid.modern-gallery-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;overflow:visible;border-radius:0;background:transparent} #workDetailView .series-gallery-card{appearance:none;border:1px solid var(--line);background:var(--surface);border-radius:18px;padding:0;overflow:hidden;cursor:pointer;display:block;box-shadow:var(--shadow-sm)} #workDetailView .series-gallery-card img{display:block;width:100%;height:100%;min-height:240px;max-height:440px;object-fit:cover;background:var(--surface-2)} #workDetailView .series-gallery-card:nth-child(3n+1){grid-column:span 2}#workDetailView .series-gallery-card:nth-child(3n+1) img{max-height:540px}#workDetailView .series-gallery-card:hover{transform:translateY(-2px);transition:transform .16s ease} @media(max-width:960px){.preference-welcome-band{grid-template-columns:1fr}.welcome-feature-grid{grid-template-columns:1fr}} @media(max-width:780px){.preferences-sheet.multi-preference-sheet{padding:16px 14px 18px;border-radius:24px 24px 0 0}.preference-band-copy strong{font-size:18px}.preference-selection-toolbar{font-size:12px;flex-wrap:wrap}.preference-selection-toolbar button{order:2}.preference-multi-grid{grid-template-columns:1fr;gap:10px}.preference-multi-card{grid-template-columns:48px minmax(0,1fr) 24px;padding:12px 14px;border-radius:18px}.preference-multi-icon{width:48px;height:48px;border-radius:16px}.preference-multi-label{font-size:17px}.welcome-card-v9612{padding:18px;border-radius:24px}.welcome-hero-stack{grid-template-columns:1fr;gap:12px}.welcome-hero-logo{min-height:auto;padding:16px}.welcome-hero-logo img{max-height:74px}.production-welcome-copy{font-size:14px;line-height:1.8}#workDetailView .work-cover-top-controls{top:12px;left:12px;right:12px}#workDetailView .work-cover-back-button,#workDetailView .work-cover-report-button{min-height:38px;padding:7px 11px;font-size:11px}#workDetailView .work-cover-back-button span,#workDetailView .work-cover-report-button span{font-size:11px}#workDetailView .series-gallery-grid.modern-gallery-grid{grid-template-columns:1fr;gap:8px}#workDetailView .series-gallery-card:nth-child(3n+1){grid-column:auto}#workDetailView .series-gallery-card img{min-height:0;max-height:none;aspect-ratio:4/5;object-fit:cover}} /* ========================================================= v9.6.13 — visible onboarding redesign + scroll/gallery fixes ========================================================= */ html.mi-overlay-open,body.mi-overlay-open{overflow:hidden!important;overscroll-behavior:none} /* Preference onboarding: deliberately compact and different from the legacy sheet. */ .preferences-sheet.multi-preference-sheet{ width:min(720px,100%); max-height:min(92dvh,820px); overflow-y:auto!important; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:16px 16px 18px!important; } .preference-sheet-header-v9613{ position:sticky; top:-16px; z-index:8; margin:0 -16px 12px!important; padding:16px 16px 12px!important; background:color-mix(in srgb,var(--bg) 94%,transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); } .preference-sheet-header-v9613 h2{font-size:24px!important;margin:2px 0 2px!important} .preference-sheet-header-v9613 p{margin:0;color:var(--muted);font-size:11px} .preference-compact-summary{ display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:10px; align-items:center; padding:11px 12px; margin-bottom:12px; border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line)); border-radius:17px; background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 10%,var(--surface)),var(--surface)); } .preference-summary-icon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--accent);color:#fff;font-size:19px} .preference-compact-summary strong,.preference-compact-summary small{display:block} .preference-compact-summary strong{font-size:14px}.preference-compact-summary small{font-size:9px;color:var(--muted);margin-top:1px} .preference-selected-pill{border-radius:999px;padding:6px 9px;background:var(--surface-2);border:1px solid var(--line);font-size:9px;color:var(--muted);white-space:nowrap} .preference-selected-pill b{color:var(--text);font-size:11px} .preference-toolbar-v9613{margin:4px 2px 8px!important;font-size:10px!important} .preference-toolbar-v9613>span{font-weight:900;color:var(--text)} .preference-toolbar-v9613 button{padding:5px 9px!important;min-height:30px;border-radius:10px!important;font-size:9px!important} .preference-grid-v9613{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important} .preference-grid-v9613 .preference-multi-card{ min-width:0!important; min-height:70px!important; display:grid!important; grid-template-columns:34px minmax(0,1fr) 18px!important; gap:7px!important; align-items:center!important; padding:8px 9px!important; margin:0!important; border-radius:14px!important; border:1px solid var(--line)!important; background:var(--surface)!important; box-shadow:none!important; } .preference-grid-v9613 .preference-multi-card input{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;opacity:0!important;pointer-events:none!important} .preference-grid-v9613 .preference-multi-icon{ width:34px!important;height:34px!important;border-radius:10px!important; background:var(--surface-2)!important;border:0!important;color:var(--accent)!important } .preference-grid-v9613 .preference-multi-icon svg{width:18px!important;height:18px!important} .preference-grid-v9613 .preference-multi-label{font-size:11px!important;font-weight:800!important;line-height:1.35!important;white-space:normal!important} .preference-grid-v9613 .preference-multi-check{width:18px!important;height:18px!important;border-radius:6px!important} .preference-grid-v9613 .preference-multi-card:has(input:checked){ border-color:color-mix(in srgb,var(--accent) 65%,var(--line))!important; background:color-mix(in srgb,var(--accent) 10%,var(--surface))!important; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 16%,transparent)!important; transform:none!important } .preference-save-dock{position:sticky;bottom:-18px;z-index:9;margin:12px -16px -18px;padding:10px 16px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 0%,transparent),var(--bg) 28%)} .preference-save-dock .sheet-primary{margin:0!important;min-height:46px!important;border-radius:14px!important;font-size:13px!important} /* Welcome must scroll internally while the page behind it is locked. */ .welcome-backdrop{overflow-y:auto!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch} .welcome-card-v9613{ overflow-y:auto!important; overflow-x:hidden!important; max-height:min(90dvh,760px)!important; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; } /* Work gallery: small thumbnails next to each other, horizontally scrollable. */ #workDetailView .modern-gallery-section{overflow:visible!important} #workDetailView .series-gallery-grid.modern-gallery-grid{ display:flex!important; grid-template-columns:none!important; gap:8px!important; overflow-x:auto!important; overflow-y:hidden!important; border-radius:0!important; background:transparent!important; padding:2px 2px 7px!important; scroll-snap-type:x proximity; overscroll-behavior-inline:contain; scrollbar-width:thin; } #workDetailView .series-gallery-card{ flex:0 0 104px!important; width:104px!important; height:136px!important; border-radius:12px!important; scroll-snap-align:start; box-shadow:none!important; } #workDetailView .series-gallery-card:nth-child(3n+1){grid-column:auto!important} #workDetailView .series-gallery-card img{ width:100%!important;height:100%!important;min-height:0!important;max-height:none!important; aspect-ratio:auto!important;object-fit:cover!important;border-radius:0!important } /* Mobile performance: avoid expensive glass effects while scrolling the long home page. */ @media(max-width:780px){ .preference-grid-v9613{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important} .preference-sheet-header-v9613 h2{font-size:21px!important} .preference-compact-summary{grid-template-columns:38px minmax(0,1fr);padding:9px 10px} .preference-summary-icon{width:38px;height:38px;border-radius:12px} .preference-selected-pill{grid-column:1/-1;justify-self:start} .preference-grid-v9613 .preference-multi-card{min-height:62px!important;grid-template-columns:30px minmax(0,1fr) 16px!important;padding:7px 8px!important} .preference-grid-v9613 .preference-multi-icon{width:30px!important;height:30px!important} .preference-grid-v9613 .preference-multi-icon svg{width:16px!important;height:16px!important} .preference-grid-v9613 .preference-multi-label{font-size:10px!important} .welcome-backdrop{align-items:flex-start!important;padding:10px 0!important} .welcome-card-v9613{width:calc(100% - 16px)!important;max-height:calc(100dvh - 20px)!important;margin:auto!important} .site-header,.member-dock{backdrop-filter:none!important;-webkit-backdrop-filter:none!important} #workDetailView .series-gallery-card{flex-basis:92px!important;width:92px!important;height:124px!important} } /* ========================================================= v9.6.14 — report modal + recommendations directory layout ========================================================= */ /* Report modal: real modal layer, never mixed with the page/dock behind it. */ .report-modal-backdrop{ position:fixed!important; inset:0!important; z-index:220!important; display:flex!important; align-items:center!important; justify-content:center!important; padding:18px!important; background:rgba(7,8,11,.76)!important; backdrop-filter:blur(10px)!important; -webkit-backdrop-filter:blur(10px)!important; overflow-y:auto!important; overscroll-behavior:contain!important; } .report-modal-backdrop.hidden{display:none!important} .report-modal-card{ position:relative!important; width:min(520px,100%)!important; max-width:100%!important; max-height:min(86dvh,700px)!important; overflow:auto!important; margin:auto!important; padding:22px!important; border:1px solid var(--line)!important; border-radius:24px!important; background:var(--bg)!important; color:var(--text)!important; box-shadow:0 28px 80px rgba(0,0,0,.38)!important; direction:rtl!important; } .report-modal-close{ position:absolute!important; top:14px!important; left:14px!important; width:38px!important; height:38px!important; display:grid!important; place-items:center!important; border:1px solid var(--line)!important; border-radius:12px!important; background:var(--surface-2)!important; color:var(--text)!important; font-size:22px!important; line-height:1!important; } .report-modal-icon{ width:48px!important; height:48px!important; display:grid!important; place-items:center!important; margin-bottom:14px!important; border-radius:15px!important; background:color-mix(in srgb,var(--accent) 14%,var(--surface))!important; color:var(--accent)!important; } .report-modal-icon svg{width:24px!important;height:24px!important} .report-modal-card>.eyebrow{display:block!important;margin-bottom:4px!important;color:var(--accent)!important} .report-modal-card h2{ margin:0 0 8px!important; padding-left:46px!important; font-size:28px!important; line-height:1.25!important; } .report-modal-context{ margin:0 0 16px!important; padding:10px 12px!important; border:1px solid var(--line)!important; border-radius:13px!important; background:var(--surface-2)!important; color:var(--muted)!important; font-size:11px!important; line-height:1.7!important; overflow-wrap:anywhere!important; max-height:86px!important; overflow:auto!important; } .report-reason-field{display:grid!important;gap:7px!important} .report-reason-field>span{font-size:11px!important;font-weight:800!important;color:var(--text)!important} .report-reason-field textarea{ min-height:142px!important; max-height:260px!important; resize:vertical!important; background:var(--surface)!important; } .report-modal-meta{ display:flex!important; justify-content:space-between!important; gap:10px!important; margin-top:7px!important; color:var(--muted)!important; font-size:9px!important; } .report-modal-actions{ display:grid!important; grid-template-columns:1fr 1.4fr!important; gap:8px!important; margin-top:12px!important; } .report-modal-actions button{width:100%!important} body:has(#reportModal:not(.hidden)) .member-dock{opacity:0!important;pointer-events:none!important} /* Recommendations directory: compact, aligned, mobile-first. */ #groupsView.recommendations-directory-view{ width:min(1040px,calc(100% - 28px))!important; padding-top:18px!important; } #groupsView .recommendations-directory-head{ display:grid!important; grid-template-columns:minmax(0,1fr) auto!important; align-items:end!important; gap:16px!important; margin:0 0 14px!important; padding:20px!important; border:1px solid var(--line)!important; border-radius:24px!important; background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 9%,var(--surface)),var(--surface))!important; } #groupsView .recommendations-directory-head .eyebrow{ color:var(--accent)!important; font-size:9px!important; letter-spacing:.06em!important; } #groupsView .recommendations-directory-head h1{ margin:4px 0 0!important; font-size:clamp(28px,4.2vw,42px)!important; line-height:1.15!important; } #groupsView .recommendations-directory-head p{ max-width:610px!important; margin:7px 0 0!important; color:var(--muted)!important; font-size:12px!important; line-height:1.75!important; } #groupsView .recommendations-directory-count{ min-width:122px!important; padding:13px 15px!important; border:1px solid var(--line)!important; border-radius:17px!important; background:var(--bg)!important; text-align:center!important; } #groupsView .recommendations-directory-count strong{ display:block!important; font-size:27px!important; line-height:1.1!important; } #groupsView .recommendations-directory-count span{display:block!important;margin-top:4px!important;color:var(--muted)!important;font-size:9px!important} #groupsView .recommendations-directory-toolbar{ display:grid!important; grid-template-columns:minmax(0,1fr) 190px!important; gap:9px!important; align-items:end!important; margin:0 0 9px!important; padding:10px!important; border:1px solid var(--line)!important; border-radius:18px!important; background:var(--surface)!important; } #groupsView .recommendations-directory-search{ position:relative!important; display:block!important; } #groupsView .recommendations-directory-search>.mi-icon{ position:absolute!important; z-index:2!important; top:50%!important; right:13px!important; transform:translateY(-50%)!important; color:var(--muted)!important; pointer-events:none!important; } #groupsView .recommendations-directory-search input{ min-height:46px!important; padding-right:42px!important; border-radius:13px!important; background:var(--surface-2)!important; } #groupsView .recommendations-directory-sort{display:grid!important;gap:5px!important} #groupsView .recommendations-directory-sort>span{font-size:9px!important;color:var(--muted)!important;font-weight:800!important} #groupsView .recommendations-directory-sort select{min-height:46px!important;background:var(--surface-2)!important} #groupsView .recommendations-directory-summary{ min-height:0!important; margin:0 2px 12px!important; color:var(--muted)!important; font-size:10px!important; font-weight:700!important; } #groupsView .groups-shelves-list{ display:grid!important; gap:12px!important; } #groupsView .collection-shelf.platform-shelf,#quickCategoryResultsSection .collection-shelf.platform-shelf{ margin:0!important; padding:14px!important; border:1px solid var(--line)!important; border-radius:20px!important; background:var(--surface)!important; box-shadow:var(--shadow-sm)!important; } #groupsView .collection-shelf-head,#quickCategoryResultsSection .collection-shelf-head{ display:flex!important; align-items:center!important; justify-content:space-between!important; gap:12px!important; margin-bottom:10px!important; } #groupsView .collection-shelf-head>div,#quickCategoryResultsSection .collection-shelf-head>div{display:flex!important;align-items:center!important;gap:10px!important;min-width:0!important} #groupsView .shelf-avatar,#quickCategoryResultsSection .shelf-avatar{flex:0 0 40px!important;width:40px!important;height:40px!important;border-radius:12px!important;display:grid!important;place-items:center!important;background:var(--surface-2)!important;color:var(--accent)!important} #groupsView .collection-shelf-head h3,#quickCategoryResultsSection .collection-shelf-head h3{margin:1px 0!important;font-size:15px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important} #groupsView .collection-shelf-head p,#quickCategoryResultsSection .collection-shelf-head p{margin:0!important;color:var(--muted)!important;font-size:9px!important;line-height:1.5!important;display:-webkit-box!important;-webkit-line-clamp:1!important;-webkit-box-orient:vertical!important;overflow:hidden!important} #groupsView .shelf-rating,#quickCategoryResultsSection .shelf-rating{font-size:8px!important;color:var(--muted)!important} #groupsView .shelf-open-button,#quickCategoryResultsSection .shelf-open-button{flex:0 0 auto!important;border:1px solid var(--line)!important;background:var(--surface-2)!important;color:var(--text)!important;border-radius:11px!important;min-height:34px!important;padding:6px 9px!important;font-size:9px!important;font-weight:800!important;display:flex!important;align-items:center!important;gap:4px!important} #groupsView .shelf-track,#quickCategoryResultsSection .shelf-track{display:flex!important;overflow-x:auto!important;scroll-snap-type:x proximity!important;scrollbar-width:none!important;gap:8px!important;padding-bottom:4px!important} #groupsView .shelf-track::-webkit-scrollbar,#quickCategoryResultsSection .shelf-track::-webkit-scrollbar{display:none} #groupsView .shelf-progress,#quickCategoryResultsSection .shelf-progress{display:none!important} #groupsView .empty-state{ margin-top:12px!important; min-height:180px!important; padding:26px 18px!important; display:grid!important; place-items:center!important; align-content:center!important; border-radius:20px!important; background:var(--surface)!important; } #groupsView .empty-state.hidden{display:none!important} #groupsView .empty-state h3{font-size:18px!important;margin:0 0 5px!important} #groupsView .empty-state p{font-size:10px!important;max-width:340px!important;margin:0 auto!important} @media(max-width:780px){ .report-modal-backdrop{ align-items:flex-end!important; padding:0!important; background:rgba(7,8,11,.72)!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } .report-modal-card{ width:100%!important; max-height:88dvh!important; margin:0!important; padding:18px 14px calc(16px + env(safe-area-inset-bottom))!important; border-left:0!important; border-right:0!important; border-bottom:0!important; border-radius:24px 24px 0 0!important; box-shadow:0 -18px 52px rgba(0,0,0,.32)!important; } .report-modal-close{top:12px!important;left:12px!important;width:36px!important;height:36px!important} .report-modal-icon{width:42px!important;height:42px!important;border-radius:13px!important;margin-bottom:10px!important} .report-modal-card h2{font-size:23px!important;padding-left:42px!important;margin-bottom:7px!important} .report-modal-context{font-size:10px!important;max-height:68px!important;margin-bottom:12px!important} .report-reason-field textarea{min-height:118px!important} .report-modal-actions{position:sticky!important;bottom:0!important;padding-top:8px!important;background:linear-gradient(180deg,transparent,var(--bg) 28%)!important} #groupsView.recommendations-directory-view{ width:calc(100% - 18px)!important; padding-top:10px!important; } #groupsView .recommendations-directory-head{ grid-template-columns:1fr auto!important; gap:10px!important; padding:14px!important; border-radius:18px!important; margin-bottom:9px!important; } #groupsView .recommendations-directory-head h1{ font-size:25px!important; line-height:1.18!important; } #groupsView .recommendations-directory-head p{ font-size:9px!important; line-height:1.6!important; display:-webkit-box!important; -webkit-line-clamp:2!important; -webkit-box-orient:vertical!important; overflow:hidden!important; } #groupsView .recommendations-directory-count{ min-width:70px!important; padding:9px 8px!important; border-radius:14px!important; } #groupsView .recommendations-directory-count strong{font-size:20px!important} #groupsView .recommendations-directory-count span{font-size:7px!important} #groupsView .recommendations-directory-toolbar{ grid-template-columns:minmax(0,1fr) 118px!important; gap:7px!important; padding:7px!important; border-radius:15px!important; } #groupsView .recommendations-directory-search{grid-column:auto!important} #groupsView .recommendations-directory-search input, #groupsView .recommendations-directory-sort select{min-height:40px!important;font-size:10px!important} #groupsView .recommendations-directory-search input{padding-right:34px!important;padding-left:8px!important} #groupsView .recommendations-directory-search>.mi-icon{right:10px!important} #groupsView .recommendations-directory-sort>span{display:none!important} #groupsView .recommendations-directory-summary{margin:0 2px 8px!important;font-size:9px!important} #groupsView .collection-shelf.platform-shelf,#quickCategoryResultsSection .collection-shelf.platform-shelf{padding:10px!important;border-radius:16px!important} #groupsView .collection-shelf-head,#quickCategoryResultsSection .collection-shelf-head{gap:7px!important;margin-bottom:8px!important} #groupsView .shelf-avatar,#quickCategoryResultsSection .shelf-avatar{width:34px!important;height:34px!important;flex-basis:34px!important;border-radius:10px!important} #groupsView .collection-shelf-head h3,#quickCategoryResultsSection .collection-shelf-head h3{font-size:12px!important} #groupsView .collection-shelf-head p,#quickCategoryResultsSection .collection-shelf-head p{font-size:8px!important} #groupsView .shelf-open-button,#quickCategoryResultsSection .shelf-open-button{min-height:30px!important;padding:5px 7px!important;font-size:8px!important} #groupsView .shelf-work-card{flex-basis:92px!important} #groupsView .empty-state{min-height:150px!important;margin-top:8px!important;padding:20px 12px!important} #groupsView .empty-state h3{font-size:16px!important} } @media(max-width:420px){ #groupsView .recommendations-directory-head{grid-template-columns:minmax(0,1fr) 64px!important} #groupsView .recommendations-directory-head h1{font-size:22px!important} #groupsView .recommendations-directory-toolbar{grid-template-columns:minmax(0,1fr) 108px!important} .report-modal-actions{grid-template-columns:1fr 1.25fr!important} } /* v9.6.16 mascot logo */ .site-brand-image{height:36px;width:36px;object-fit:contain} .welcome-production-logo{max-width:150px!important;max-height:150px!important;object-fit:contain} @media(max-width:780px){.site-brand-image{height:30px;width:30px}} /* v9.6.18 — compact footer report + device push + admin auth diagnostics */ .mi-footer-links{align-items:center} .mi-footer-links .mi-footer-report-button{ min-height:32px; padding:5px 9px; border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line)); border-radius:10px; background:color-mix(in srgb,var(--accent) 7%,var(--surface)); color:var(--text); display:inline-flex; align-items:center; gap:6px; font-size:9px; font-weight:800; text-decoration:none; } .mi-footer-links .mi-footer-report-button svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .mi-footer-links .mi-footer-report-button:hover{background:color-mix(in srgb,var(--accent) 13%,var(--surface));text-decoration:none} .push-settings-card{display:grid;gap:11px} .push-settings-title{align-items:flex-start} .push-settings-state{ display:flex; align-items:center; gap:8px; min-height:38px; padding:8px 10px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); } .push-settings-state .push-state-dot{width:8px;height:8px;border-radius:50%;background:var(--muted);flex:0 0 auto} #pushDeviceStatus{font-size:10px;color:var(--muted);font-weight:800} #pushDeviceStatus.is-active{color:var(--text)} #pushDeviceStatus.is-active+.push-state-dot{background:var(--accent)} #pushDeviceStatus.is-error{color:var(--danger)} .push-device-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap} .push-device-actions button{min-height:36px;padding:7px 11px;border-radius:11px;font-size:9px} .push-disable-button{color:var(--danger)} .push-inline-status:empty{display:none} .admin-auth-diagnostics{ border:1px solid var(--line); border-radius:18px; background:var(--surface); padding:14px; margin:10px 0 14px; display:grid; gap:10px; } .admin-auth-diagnostics-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px} .admin-auth-diagnostics-head>div{min-width:0} .admin-auth-diagnostics-head strong,.admin-auth-diagnostics-head small{display:block} .admin-auth-diagnostics-head strong{font-size:13px;margin-top:3px} .admin-auth-diagnostics-head small{font-size:9px;color:var(--muted);margin-top:3px} .admin-auth-diagnostics-head button{min-height:32px;padding:5px 9px;font-size:8px} .admin-auth-diagnostics-status{font-size:10px;color:var(--muted);padding:9px 10px;border-radius:11px;background:var(--surface-2)} .admin-auth-diagnostics-code{ direction:ltr; text-align:left; white-space:pre-wrap; overflow-wrap:anywhere; max-height:180px; overflow:auto; margin:0; padding:10px; border:1px solid var(--line); border-radius:11px; background:var(--bg); color:var(--text); font:11px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace; } @media(max-width:780px){ .mi-footer-links .mi-footer-report-button{min-height:30px;padding:4px 8px;font-size:8px} .push-device-actions{display:grid;grid-template-columns:1fr 1fr} .push-device-actions .primary-button{grid-column:1/-1} .push-device-actions button{width:100%} .admin-auth-diagnostics-head{align-items:stretch;flex-direction:column} .admin-auth-diagnostics-head button{align-self:flex-start} } .push-settings-state:has(#pushDeviceStatus.is-active) .push-state-dot{background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 14%,transparent)} .push-settings-state:has(#pushDeviceStatus.is-error) .push-state-dot{background:var(--danger)} .admin-push-diagnostics-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:9px;padding:9px 10px;border:1px solid var(--line);border-radius:11px;background:var(--surface-2);font-size:9px} .admin-push-diagnostics-row>span{color:var(--muted);font-weight:800}.admin-push-diagnostics-row>strong{font-size:9px}.admin-push-diagnostics-row>strong.is-ok{color:var(--accent)}.admin-push-diagnostics-row>strong.is-error{color:var(--danger)}.admin-push-diagnostics-row button{min-height:30px;padding:4px 8px;font-size:8px} @media(max-width:780px){.admin-push-diagnostics-row{grid-template-columns:1fr auto}.admin-push-diagnostics-row>span{grid-column:1/-1}.admin-push-diagnostics-row>strong{min-width:0}} /* v9.6.18 production — notification badge fix */ .dock-notifications{position:relative!important;overflow:visible!important} .dock-notifications .dock-badge{ position:absolute!important; z-index:4; top:3px; left:calc(50% + 7px); transform:translateX(-50%); min-width:18px; height:18px; padding:0 5px; border-radius:999px; display:flex; align-items:center; justify-content:center; box-sizing:border-box; background:var(--accent); color:#fff; border:2px solid var(--surface); box-shadow:0 2px 8px rgba(0,0,0,.18); font-size:8px; line-height:1; font-weight:900; direction:ltr; pointer-events:none; } .dock-notifications .dock-badge.hidden{display:none!important} @media(max-width:780px){ .dock-notifications .dock-badge{top:2px;left:calc(50% + 6px);min-width:17px;height:17px;font-size:7.5px;border-width:2px} } /* v9.6.20 — responsive dual-theme boot loading screen */ body.app-booting{overflow:hidden!important;touch-action:none} .app-loading-screen{ --loader-accent:#3D1026; --loader-accent-rgb:61,16,38; --loader-screen:#f6f2f4; --loader-card:rgba(255,255,255,.92); --loader-card-border:rgba(61,16,38,.20); --loader-text:#24151d; --loader-muted:#806e77; --loader-track:rgba(61,16,38,.11); --loader-tick:rgba(61,16,38,.34); position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center; padding:clamp(14px,3vw,34px);overflow:hidden;background:var(--loader-screen);color:var(--loader-text); opacity:1;visibility:visible;transition:opacity .34s ease,visibility .34s ease;isolation:isolate; font-family:"Cairo",sans-serif; } .app-loading-screen::before,.app-loading-screen::after{ content:"";position:absolute;pointer-events:none;border-radius:999px;filter:blur(1px);opacity:.8; } .app-loading-screen::before{ width:min(82vw,980px);height:min(82vw,980px);right:-34vw;top:-54vw; background:radial-gradient(circle,rgba(var(--loader-accent-rgb),.13) 0 20%,rgba(var(--loader-accent-rgb),.055) 38%,transparent 67%); } .app-loading-screen::after{ width:min(70vw,820px);height:min(70vw,820px);left:-28vw;bottom:-50vw; background:radial-gradient(circle,rgba(var(--loader-accent-rgb),.10),transparent 68%); } html[data-theme="dark"] .app-loading-screen{ --loader-screen:#09070a; --loader-card:rgba(18,14,17,.94); --loader-card-border:rgba(116,62,88,.38); --loader-text:#f7f3f5; --loader-muted:#9d8d95; --loader-track:rgba(255,255,255,.09); --loader-tick:rgba(179,111,145,.31); background: radial-gradient(circle at 78% 8%,rgba(var(--loader-accent-rgb),.26),transparent 31%), radial-gradient(circle at 12% 92%,rgba(var(--loader-accent-rgb),.18),transparent 29%), #09070a; } .app-loading-screen.is-leaving{opacity:0;visibility:hidden;pointer-events:none} .app-loading-ambient{position:absolute;inset:0;pointer-events:none;overflow:hidden;opacity:.7} .app-loading-ambient i{position:absolute;display:block;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--loader-accent-rgb),.28),transparent);transform:rotate(-16deg)} .app-loading-ambient i:nth-child(1){width:48vw;top:17%;left:-7%} .app-loading-ambient i:nth-child(2){width:38vw;top:70%;right:-5%;transform:rotate(-22deg)} .app-loading-ambient i:nth-child(3){width:26vw;bottom:9%;left:8%;transform:rotate(12deg);opacity:.55} html[data-theme="dark"] .app-loading-ambient{opacity:.42} .app-loading-card{ position:relative;z-index:2;width:min(82vw,900px);min-height:clamp(330px,48vh,470px); display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center; padding:clamp(34px,6vw,72px);border:1px solid var(--loader-card-border);border-radius:clamp(24px,3vw,38px); background:var(--loader-card);box-shadow:0 24px 70px rgba(34,16,25,.12),inset 0 1px 0 rgba(255,255,255,.56); backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);overflow:hidden; } html[data-theme="dark"] .app-loading-card{box-shadow:0 26px 90px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.025)} .app-loading-card::before{ content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none; background:linear-gradient(100deg,transparent 13%,rgba(var(--loader-accent-rgb),.10) 46%,transparent 78%); transform:translateX(-115%);animation:miLoaderCardSheen 3.2s ease-in-out infinite; } html[data-theme="dark"] .app-loading-card::before{opacity:.52} .app-loading-card::after{ content:"";position:absolute;top:-1px;left:24%;right:24%;height:1px; background:linear-gradient(90deg,transparent,var(--loader-accent),transparent);opacity:.62; box-shadow:0 0 20px rgba(var(--loader-accent-rgb),.38) } .app-loading-copy{position:relative;z-index:2;display:grid;gap:8px;margin-bottom:clamp(34px,5vw,52px)} .app-loading-copy strong{font-size:clamp(24px,3.3vw,42px);font-weight:600;letter-spacing:-.025em;line-height:1.35;color:var(--loader-text)} .app-loading-copy small{font-family:"Almarai",sans-serif;font-size:clamp(12px,1.45vw,17px);font-weight:400;color:var(--loader-muted);line-height:1.8} .app-loading-progress-row{position:relative;z-index:2;width:min(86%,650px);display:grid;grid-template-columns:minmax(0,1fr) 54px;align-items:center;gap:14px;direction:ltr} .app-loading-progress-track{height:14px;border-radius:999px;padding:2px;background:var(--loader-track);box-shadow:inset 0 0 0 1px rgba(var(--loader-accent-rgb),.20);overflow:hidden} html[data-theme="dark"] .app-loading-progress-track{box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)} .app-loading-progress-bar{ --mi-load-progress:12%;position:relative;display:block;width:var(--mi-load-progress);height:100%;min-width:9%;border-radius:inherit; background:var(--loader-accent);transition:width .34s cubic-bezier(.22,.8,.22,1);box-shadow:0 0 16px rgba(var(--loader-accent-rgb),.34); overflow:hidden; } .app-loading-progress-bar::before{ content:"";position:absolute;inset:0;background:repeating-linear-gradient(125deg,rgba(255,255,255,.16) 0 8px,transparent 8px 17px);opacity:.5; animation:miLoaderStripe 1.1s linear infinite; } .app-loading-progress-bar::after{content:"";position:absolute;top:50%;right:0;width:10px;height:10px;border-radius:50%;background:#fff;transform:translate(25%,-50%);box-shadow:0 0 16px rgba(var(--loader-accent-rgb),.95);opacity:.82} html[data-theme="dark"] .app-loading-progress-bar{box-shadow:0 0 20px rgba(var(--loader-accent-rgb),.72)} .app-loading-progress-number{font-family:"Cairo",sans-serif;font-size:clamp(14px,1.6vw,19px);font-weight:700;color:var(--loader-accent);font-variant-numeric:tabular-nums;direction:ltr;text-align:left} html[data-theme="dark"] .app-loading-progress-number{color:#b989a0} .app-loading-ticks{position:relative;z-index:2;width:min(50%,360px);height:13px;margin-top:clamp(26px,3.2vw,36px);opacity:.75;background:repeating-linear-gradient(90deg,var(--loader-tick) 0 2px,transparent 2px 16px);mask:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);-webkit-mask:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent)} .app-loading-ticks::after{content:"";position:absolute;left:50%;top:-3px;width:3px;height:19px;border-radius:5px;background:var(--loader-accent);transform:translateX(-50%);box-shadow:0 0 12px rgba(var(--loader-accent-rgb),.3)} @keyframes miLoaderStripe{to{transform:translateX(25px)}} @keyframes miLoaderCardSheen{0%,58%{transform:translateX(-115%)}82%,100%{transform:translateX(115%)}} @media (max-width:640px){ .app-loading-screen{padding:14px} .app-loading-screen::before{width:120vw;height:120vw;right:-66vw;top:-52vw} .app-loading-screen::after{width:105vw;height:105vw;left:-62vw;bottom:-42vw} .app-loading-ambient i:nth-child(1){width:78vw;top:14%}.app-loading-ambient i:nth-child(2){width:72vw;top:80%} .app-loading-card{width:100%;min-height:min(56vh,420px);padding:38px 22px;border-radius:26px} .app-loading-copy{margin-bottom:34px;gap:7px} .app-loading-copy strong{font-size:clamp(23px,7.2vw,31px)} .app-loading-copy small{font-size:12px} .app-loading-progress-row{width:94%;grid-template-columns:minmax(0,1fr) 45px;gap:10px} .app-loading-progress-track{height:12px} .app-loading-progress-number{font-size:14px} .app-loading-ticks{width:62%;margin-top:25px} } @media (max-width:380px){ .app-loading-card{min-height:330px;padding-inline:17px} .app-loading-progress-row{width:100%} .app-loading-copy strong{font-size:23px} } @media (prefers-reduced-motion:reduce){ .app-loading-screen{transition:none}.app-loading-card::before,.app-loading-progress-bar::before{animation:none}.app-loading-progress-bar{transition:none} } /* MangaLik story + Arabic chapter sync — v9.6.25 */ .mangalik-editor-link{display:grid;gap:10px;padding:14px;border:1px solid color-mix(in srgb,var(--accent,#3D1026) 28%,transparent);border-radius:18px;background:color-mix(in srgb,var(--accent,#3D1026) 7%,transparent)} .mangalik-editor-link-head{display:flex;align-items:center;justify-content:space-between;gap:12px} .mangalik-editor-link-head>div{display:grid;gap:3px}.mangalik-editor-link-head span{font-weight:900}.mangalik-editor-link-head small{opacity:.72;line-height:1.6} .mangalik-editor-link>input{width:100%} .mangalik-sync-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,210px) auto;align-items:end;gap:14px;margin:0 0 12px;padding:16px;border:1px solid color-mix(in srgb,var(--accent,#3D1026) 30%,transparent);border-radius:20px;background:color-mix(in srgb,var(--accent,#3D1026) 7%,transparent)} .mangalik-sync-card-copy{display:grid;gap:4px}.mangalik-sync-card-copy>span{font-size:.72rem;font-weight:900;letter-spacing:.08em;opacity:.62}.mangalik-sync-card-copy>strong{font-size:1.03rem}.mangalik-sync-card-copy>small{opacity:.72;line-height:1.6} .mangalik-sync-card label{display:grid;gap:6px}.mangalik-sync-card label>span{font-size:.78rem;font-weight:800;opacity:.72} .mangalik-sync-results{display:grid;gap:7px;margin:10px 0 16px}.mangalik-sync-result{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:14px;background:color-mix(in srgb,currentColor 4%,transparent);font-size:.82rem}.mangalik-sync-result span{opacity:.7}.mangalik-sync-result.error{border:1px solid rgba(190,48,48,.25)} @media(max-width:760px){.mangalik-editor-link-head{align-items:stretch;flex-direction:column}.mangalik-editor-link-head .secondary-button{width:100%}.mangalik-sync-card{grid-template-columns:1fr}.mangalik-sync-card .ink-button{width:100%}.mangalik-sync-result{align-items:flex-start;flex-direction:column;gap:3px}} /* Translation state accents — v9.6.25 */ .translation-paused{opacity:.78} /* v9.6.27 — Manual related works + mobile back history */ .manual-related-editor-block .editor-block-content{min-width:0} .manual-related-toolbar{display:flex;align-items:center;gap:12px;margin:14px 0 10px} .manual-related-toolbar input{flex:1;min-width:0;border:1px solid var(--line,#2a2a2a);background:var(--panel,#151515);color:inherit;border-radius:14px;padding:12px 14px;font:inherit;outline:none} .manual-related-toolbar input:focus{border-color:#3D1026;box-shadow:0 0 0 3px color-mix(in srgb,#3D1026 22%,transparent)} .manual-related-toolbar span{white-space:nowrap;font-size:12px;font-weight:800;opacity:.72} .manual-related-selected{display:flex;flex-wrap:wrap;gap:8px;min-height:36px;margin-bottom:12px} .related-selected-empty{font-size:12px;opacity:.58;padding:8px 0} .related-selected-chip{display:inline-flex;align-items:center;gap:7px;border:1px solid color-mix(in srgb,#3D1026 35%,var(--line,#333));background:color-mix(in srgb,#3D1026 12%,transparent);color:inherit;border-radius:999px;padding:7px 10px 7px 8px;cursor:pointer;font:inherit} .related-selected-chip span{max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:800} .related-selected-chip b{font-size:17px;line-height:1;opacity:.7} .manual-related-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} .manual-related-pick{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr) 22px;align-items:center;gap:10px;border:1px solid var(--line,#2b2b2b);border-radius:15px;padding:8px;background:var(--panel,#151515);cursor:pointer;min-width:0} .manual-related-pick:has(input:checked){border-color:#3D1026;background:color-mix(in srgb,#3D1026 10%,var(--panel,#151515))} .manual-related-pick img{width:48px;height:64px;object-fit:cover;border-radius:9px;background:#222} .manual-related-pick span{min-width:0;display:grid;gap:4px} .manual-related-pick b,.manual-related-pick small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .manual-related-pick b{font-size:12px}.manual-related-pick small{font-size:10px;opacity:.58} .manual-related-pick input{width:18px;height:18px;accent-color:#3D1026} @media(max-width:900px){.manual-related-picker{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:560px){.manual-related-toolbar{align-items:stretch;flex-direction:column}.manual-related-toolbar span{align-self:flex-start}.manual-related-picker{grid-template-columns:1fr}.manual-related-pick{grid-template-columns:44px minmax(0,1fr) 22px}.manual-related-pick img{width:44px;height:58px}} /* v9.6.30 QA stability pass: navigation/schema guards and current-cache alignment. */ .modern-review-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; align-items:stretch; } .modern-review-grid .review-card{ min-width:0; padding:16px; border:1px solid var(--line); border-radius:16px; background:var(--surface-2); box-shadow:var(--shadow-sm); } .modern-review-grid .review-card.positive{ border-color:color-mix(in srgb,#4caf50 28%,var(--line)); } .modern-review-grid .review-card.negative{ border-color:color-mix(in srgb,#e45a5a 28%,var(--line)); } .review-card-heading{ display:flex; align-items:center; gap:9px; margin-bottom:12px; } .review-card-heading .review-card-title{ font-size:14px; font-weight:800; } .review-indicator{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; } .positive-indicator{background:#4caf50;box-shadow:0 0 12px rgba(76,175,80,.35)} .negative-indicator{background:#e45a5a;box-shadow:0 0 12px rgba(228,90,90,.28)} .review-points{ list-style:none; display:grid; gap:9px; margin:0; padding:0; } .review-points li{ display:grid; grid-template-columns:18px minmax(0,1fr); gap:9px; align-items:start; padding:9px 10px; border-radius:11px; background:color-mix(in srgb,var(--surface) 72%,transparent); color:var(--text); font-size:13px; line-height:1.8; overflow-wrap:anywhere; } .review-points.positive li{border-inline-start:2px solid color-mix(in srgb,#4caf50 55%,transparent)} .review-points.negative li{border-inline-start:2px solid color-mix(in srgb,#e45a5a 55%,transparent)} .review-point-icon{ width:16px; height:16px; margin-top:4px; flex:none; } .review-points.positive .review-point-icon{color:#4caf50} .review-points.negative .review-point-icon{color:#e45a5a} .review-empty{ padding:11px 12px; border:1px dashed var(--line); border-radius:11px; color:var(--muted); font-size:12px; text-align:center; } .modern-editor-note{ position:relative; margin-top:12px; padding:16px 18px; border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line)); border-radius:16px; background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 9%,var(--surface-2)),var(--surface-2)); overflow:hidden; } .modern-editor-note::before{ content:""; position:absolute; inset-inline-start:0; top:0; bottom:0; width:3px; background:var(--accent); } .modern-editor-note>span{ display:block; margin-bottom:7px; color:var(--accent); font-size:12px; font-weight:800; } .modern-editor-note>p{ margin:0; color:var(--text); font-size:13px; line-height:1.9; overflow-wrap:anywhere; } @media (max-width:700px){ } /* v9.6.32 — mobile review cards */ .modern-review-grid .review-card{overflow:hidden;} @media (max-width:700px){ .modern-review-grid{ grid-template-columns:1fr; gap:9px; } .modern-review-grid .review-card{ padding:12px; border-radius:14px; box-shadow:none; } .review-card-heading{ gap:8px; margin-bottom:8px; min-height:24px; } .review-card-heading .review-card-title{ font-size:13px; } .review-indicator{ width:8px; height:8px; } .review-points{ gap:6px; } .review-points li{ grid-template-columns:16px minmax(0,1fr); gap:7px; padding:8px 9px; border-radius:9px; font-size:11.5px; line-height:1.75; } .review-point-icon{ width:14px; height:14px; margin-top:3px; } .review-empty{ padding:9px 10px; border-radius:9px; font-size:11px; } .modern-editor-note{ margin-top:9px; padding:12px 13px 12px 14px; border-radius:14px; } .modern-editor-note>span{ margin-bottom:5px; font-size:11px; } .modern-editor-note>p{ font-size:11.5px; line-height:1.8; } } @media (max-width:380px){ .modern-review-grid .review-card{padding:10px;} .review-points li{font-size:11px;padding:7px 8px;} .modern-editor-note>p{font-size:11px;} } /* v9.6.34 — Recommendations UI refresh */ .recommendation-shelf-card{position:relative;display:grid;grid-template-columns:minmax(170px,220px) minmax(0,1fr);gap:18px;overflow:hidden;border:1px solid var(--line);background:linear-gradient(145deg,var(--surface),var(--surface-2));border-radius:22px;padding:12px;box-shadow:var(--shadow-sm)} .recommendation-shelf-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)} .recommendation-shelf-cover{position:relative;min-height:205px;overflow:hidden;border-radius:16px;cursor:pointer;background:var(--surface-2)} .recommendation-shelf-cover:after{content:"";position:absolute;inset:auto 0 0;height:42%;background:linear-gradient(transparent,rgba(0,0,0,.72));pointer-events:none} .recommendation-shelf-cover img{width:100%;height:100%;min-height:205px;object-fit:cover;display:block} .recommendation-shelf-body{min-width:0;display:flex;flex-direction:column;justify-content:space-between;padding:5px 4px} .recommendation-shelf-top{display:flex;justify-content:space-between;gap:16px;align-items:flex-start} .recommendation-shelf-kicker{display:inline-flex;align-items:center;gap:6px;color:var(--accent);font-size:10px;font-weight:900;margin-bottom:5px} .recommendation-shelf-top h3{margin:0;font-size:20px;line-height:1.35} .recommendation-shelf-top p{margin:7px 0 0;color:var(--muted);font-size:11px;line-height:1.8;max-width:680px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .recommendation-shelf-meta{display:flex;flex-wrap:wrap;gap:7px;justify-content:flex-end} .recommendation-shelf-meta span{padding:6px 9px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:9px;white-space:nowrap;background:var(--surface)} .recommendation-work-thumbs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:15px 0 12px} .recommendation-thumb{min-width:0;cursor:pointer} .recommendation-thumb img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:11px;display:block;background:var(--surface-2);border:1px solid var(--line)} .recommendation-thumb b{display:block;margin-top:5px;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .recommendation-thumb small{display:block;color:var(--muted);font-size:7px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .recommendation-shelf-actions{display:flex;gap:8px;justify-content:flex-end} /* Dedicated recommendation page */ #collectionDetailView .back-button{margin-bottom:12px} #collectionHeroBackdrop{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:26px;min-height:310px;background-size:cover;background-position:center;box-shadow:var(--shadow-md)} #collectionHeroBackdrop .curation-hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,8,11,.96) 0%,rgba(8,8,11,.82) 43%,rgba(8,8,11,.42) 100%)} #collectionHeroBackdrop .curation-inner{position:relative;z-index:1;display:grid;grid-template-columns:150px minmax(0,1fr);gap:22px;align-items:center;padding:24px} #collectionHeroBackdrop .curation-cover{width:150px;aspect-ratio:3/4;object-fit:cover;border-radius:17px;border:1px solid rgba(255,255,255,.14);box-shadow:0 18px 45px rgba(0,0,0,.42)} #collectionHeroBackdrop .curation-copy{min-width:0;max-width:820px} #collectionHeroBackdrop .curation-copy h1{font-size:clamp(25px,4vw,42px);line-height:1.15;margin:0} #collectionHeroBackdrop .curation-copy>p{font-size:13px;line-height:1.9;color:rgba(255,255,255,.76);max-width:760px;margin:10px 0} #collectionHeroBackdrop .curation-meta{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0} #collectionHeroBackdrop .curation-meta span{border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.18);padding:7px 10px;border-radius:999px;font-size:9px;color:rgba(255,255,255,.76)} #collectionDetailView .curation-content{margin-top:20px} #collectionDetailView .curation-content .section-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:12px} #collectionDetailView .curation-content .section-heading h2{font-size:22px;margin:2px 0 0} #collectionDetailView .poster-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:16px 10px} #collectionDetailView .poster-card{min-width:0} #collectionDetailView .catalog-pagination{margin-top:18px;display:flex;align-items:center;justify-content:center;gap:10px} @media(max-width:780px){ .recommendation-shelf-card{grid-template-columns:92px minmax(0,1fr);gap:11px;border-radius:18px;padding:9px} .recommendation-shelf-cover,.recommendation-shelf-cover img{min-height:128px;height:128px} .recommendation-shelf-top{display:block} .recommendation-shelf-top h3{font-size:15px} .recommendation-shelf-top p{font-size:9px;line-height:1.65;-webkit-line-clamp:2} .recommendation-shelf-meta{justify-content:flex-start;margin-top:7px} .recommendation-shelf-meta span{font-size:7px;padding:4px 6px} .recommendation-work-thumbs{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;margin:9px 0} .recommendation-thumb b{font-size:7px} .recommendation-thumb small{display:none} .recommendation-shelf-actions{justify-content:stretch} .recommendation-shelf-actions button{flex:1;min-height:36px;padding:7px 8px;font-size:8px} #collectionHeroBackdrop{min-height:0;border-radius:20px} #collectionHeroBackdrop .curation-hero-shade{background:linear-gradient(180deg,rgba(8,8,11,.48),rgba(8,8,11,.94) 58%)} #collectionHeroBackdrop .curation-inner{grid-template-columns:78px minmax(0,1fr);gap:11px;padding:14px;align-items:end;min-height:255px} #collectionHeroBackdrop .curation-cover{width:78px;border-radius:11px} #collectionHeroBackdrop .curation-copy h1{font-size:22px} #collectionHeroBackdrop .curation-copy>p{font-size:9px;line-height:1.7;margin:7px 0} #collectionHeroBackdrop .curation-meta{gap:5px;margin:7px 0} #collectionHeroBackdrop .curation-meta span{font-size:7px;padding:5px 7px} #collectionDetailView .detail-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px} #collectionDetailView .detail-actions button{width:100%;font-size:8px;padding:9px 7px} #collectionDetailView .curation-content .section-heading h2{font-size:17px} #collectionDetailView .poster-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 7px} } @media(max-width:390px){ .recommendation-shelf-card{grid-template-columns:78px minmax(0,1fr)} .recommendation-shelf-cover,.recommendation-shelf-cover img{height:112px;min-height:112px} .recommendation-work-thumbs{gap:4px} #collectionHeroBackdrop .curation-inner{grid-template-columns:68px minmax(0,1fr);padding:11px;min-height:230px} #collectionHeroBackdrop .curation-cover{width:68px} #collectionHeroBackdrop .curation-copy h1{font-size:19px} } /* v9.6.34 — recommendation layout, mobile-safe hero, collection rating */ .collection-rating-box{margin:12px 0 4px;padding:11px 13px;border:1px solid rgba(255,255,255,.13);border-radius:15px;background:rgba(0,0,0,.18);color:#fff;max-width:680px} .collection-rating-head{display:flex;align-items:center;justify-content:space-between;gap:14px} .collection-rating-head>div:first-child{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap} .collection-rating-head .eyebrow{margin:0;font-size:9px;color:rgba(255,255,255,.65)} .collection-rating-head strong{font-size:18px} .collection-rating-head small{font-size:8px;color:rgba(255,255,255,.58)} .collection-rating-stars{display:flex;gap:2px;direction:ltr} .collection-rate-star{width:30px;height:30px;border:1px solid rgba(255,255,255,.16);border-radius:9px;background:rgba(255,255,255,.05);color:rgba(255,255,255,.35);font-size:16px;line-height:1;cursor:pointer} .collection-rate-star:hover,.collection-rate-star.active{color:#fff;background:color-mix(in srgb,var(--accent) 28%,transparent);border-color:color-mix(in srgb,var(--accent) 60%,rgba(255,255,255,.16))} .collection-rating-note{margin:7px 0 0;font-size:8px;color:rgba(255,255,255,.58)} .collection-rating-box.is-locked .collection-rate-star{opacity:.6} /* compact, structured recommendation hero */ #featuredCollectionHero{min-height:360px;border-radius:26px} #featuredCollectionHero .exact-feature-inner{grid-template-columns:minmax(0,1.1fr) minmax(260px,.9fr);gap:22px;padding:30px 32px} #featuredCollectionHero .exact-feature-copy h2{max-width:760px} #featuredCollectionHero .exact-feature-copy p{max-width:600px;line-height:1.8} #featuredCollectionHero .exact-feature-posters{align-items:center;justify-content:flex-end;padding-right:8px} #featuredCollectionHero .exact-feature-posters img{width:104px} #topCollectionsGrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px} #recommendationShelvesRail{display:grid;gap:14px} #rotatingShelves{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} #rotatingShelves .collection-shelf{min-width:0} /* cleaner recommendation directory */ #groupsView .collection-shelf.platform-shelf,#quickCategoryResultsSection .collection-shelf.platform-shelf{overflow:hidden} #groupsView .collection-shelf-head,#quickCategoryResultsSection .collection-shelf-head{align-items:center} #groupsView .collection-shelf-head>div,#quickCategoryResultsSection .collection-shelf-head>div{flex:1;min-width:0} #groupsView .collection-shelf-head>div>div,#quickCategoryResultsSection .collection-shelf-head>div>div{min-width:0} #groupsView .shelf-rating,#quickCategoryResultsSection .shelf-rating{display:inline-flex;margin-bottom:2px} /* cleaner dedicated recommendation page */ #collectionHeroBackdrop{min-height:300px} #collectionHeroBackdrop .curation-inner{grid-template-columns:170px minmax(0,1fr);gap:26px;padding:28px 30px} #collectionHeroBackdrop .curation-cover{width:170px} #collectionHeroBackdrop .curation-copy{padding:2px 0} #collectionHeroBackdrop .curation-copy h1{max-width:760px} #collectionDetailView .curation-content{max-width:1200px;margin-inline:auto} #collectionDetailView .poster-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:18px 12px} #collectionDetailView .detail-actions{display:flex;flex-wrap:wrap;gap:8px} @media(max-width:980px){ #topCollectionsGrid{grid-template-columns:repeat(2,minmax(0,1fr))} #rotatingShelves{grid-template-columns:1fr} #collectionHeroBackdrop .curation-inner{grid-template-columns:130px minmax(0,1fr);gap:18px} #collectionHeroBackdrop .curation-cover{width:130px} #collectionDetailView .poster-grid{grid-template-columns:repeat(4,minmax(0,1fr))} } @media(max-width:780px){ #featuredCollectionHero{min-height:270px;border-radius:20px} #featuredCollectionHero .exact-feature-inner{grid-template-columns:1fr;min-height:270px;padding:20px 18px;gap:6px} #featuredCollectionHero .exact-feature-posters{display:none} #featuredCollectionHero .exact-feature-copy h2{font-size:25px;line-height:1.18;margin:7px 0} #featuredCollectionHero .exact-feature-copy p{font-size:10px;line-height:1.65;margin:5px 0} #featuredCollectionHero .exact-feature-meta{margin:10px 0;font-size:9px;gap:9px} #topCollectionsGrid{grid-template-columns:1fr;gap:10px} #recommendationShelvesRail{gap:10px} #rotatingShelves{grid-template-columns:1fr;gap:10px} #collectionHeroBackdrop{min-height:0;border-radius:18px} #collectionHeroBackdrop .curation-inner{grid-template-columns:84px minmax(0,1fr);gap:12px;padding:14px;align-items:end;min-height:250px} #collectionHeroBackdrop .curation-cover{width:84px;border-radius:12px} #collectionHeroBackdrop .curation-copy h1{font-size:21px;line-height:1.2} #collectionHeroBackdrop .curation-copy>p{font-size:9px;line-height:1.7;margin:6px 0} #collectionHeroBackdrop .curation-meta{gap:5px;margin:7px 0} #collectionHeroBackdrop .curation-meta span{font-size:7px;padding:5px 7px} #collectionDetailView .poster-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 7px} #collectionDetailView .detail-actions{display:grid;grid-template-columns:1fr 1fr} #collectionDetailView .detail-actions button{min-width:0;font-size:8px;padding:9px 7px} .collection-rating-box{margin-top:8px;padding:9px 10px;border-radius:13px} .collection-rating-head{align-items:flex-start;flex-direction:column;gap:7px} .collection-rating-stars{width:100%;justify-content:space-between} .collection-rate-star{width:calc(20% - 4px);height:34px} } @media(max-width:390px){ #featuredCollectionHero .exact-feature-inner{padding:17px 14px} #featuredCollectionHero .exact-feature-copy h2{font-size:22px} #collectionHeroBackdrop .curation-inner{grid-template-columns:70px minmax(0,1fr);padding:11px;gap:10px;min-height:225px} #collectionHeroBackdrop .curation-cover{width:70px} #collectionHeroBackdrop .curation-copy h1{font-size:18px} #collectionDetailView .poster-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px 5px} } /* ========================================================= Manhwa Index — Editorial Hero redesign Inspired by the supplied reference: immersive cover, right-aligned editorial copy, large rounded container. ========================================================= */ .exact-feature-carousel{ min-height:520px; margin:0 0 34px; border-radius:30px; background:#0b0c0f; box-shadow:0 24px 70px rgba(0,0,0,.28); } .exact-feature-background{ opacity:.82; background-position:center left; transform:scale(1.01); transition:opacity .35s ease,transform .7s ease,background-image .35s ease; } .exact-feature-shade{ background: linear-gradient(90deg, rgba(8,9,12,.05) 0%, rgba(8,9,12,.12) 30%, rgba(8,9,12,.56) 58%, rgba(8,9,12,.94) 82%, rgba(8,9,12,.98) 100%); } .exact-feature-inner{ min-height:520px; display:block; padding:54px 58px; } .exact-feature-copy{ width:min(510px,52%); margin-inline-start:auto; text-align:right; padding-top:18px; } .exact-feature-label{ display:inline-flex; align-items:center; gap:8px; padding:7px 13px; border-radius:999px; background:rgba(187,34,103,.86); color:#fff; font-size:12px; letter-spacing:0; font-weight:800; box-shadow:0 8px 25px rgba(187,34,103,.18); } .exact-feature-label i{ width:7px; height:7px; border-radius:50%; background:#fff; display:block; } .exact-feature-copy h2{ margin:18px 0 8px; font-size:clamp(38px,5vw,64px); line-height:1.08; font-weight:900; letter-spacing:-.03em; } .exact-feature-copy p{ margin:0; max-width:500px; color:rgba(255,255,255,.74); font-size:15px; line-height:1.9; } .exact-feature-meta{ justify-content:flex-start; gap:0; margin:24px 0; color:#fff; font-size:13px; } .exact-feature-meta span{ display:inline-flex; align-items:center; gap:7px; padding:0 18px; border-inline-start:1px solid rgba(255,255,255,.18); } .exact-feature-meta span:first-child{ padding-inline-start:0; border-inline-start:0; } .exact-feature-meta b{ color:#e3488c; font-size:16px; } .exact-feature-actions{ justify-content:flex-start; flex-direction:row; } .exact-feature-actions .exact-solid-button{ min-height:50px; padding:10px 25px; border-radius:15px; background:#c32a70; font-size:14px; box-shadow:0 12px 28px rgba(195,42,112,.22); } .exact-feature-actions .exact-solid-button:hover{ background:#a92160; } .exact-feature-carousel .exact-outline-button{ min-height:50px; min-width:130px; padding:10px 20px; border-radius:15px; background:rgba(10,11,14,.22); color:#fff; border-color:rgba(255,255,255,.35); backdrop-filter:blur(8px); } .exact-feature-posters{ display:none !important; } .exact-feature-pagination{ position:absolute; inset-inline:30px; bottom:28px; margin:0; justify-content:space-between; pointer-events:none; } .exact-feature-pagination button{ width:52px; height:52px; border-radius:17px; border:1px solid rgba(255,255,255,.25); background:rgba(12,13,16,.5); backdrop-filter:blur(8px); font-size:22px; pointer-events:auto; } .exact-feature-pagination button:hover{ background:rgba(195,42,112,.78); border-color:rgba(255,255,255,.5); } .feature-dots{ position:absolute; left:50%; transform:translateX(-50%); bottom:16px; display:flex; gap:8px; align-items:center; } .feature-dots button{ width:9px; height:9px; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.35); transition:all .2s ease; } .feature-dots button.active{ width:26px; border-radius:999px; background:#c32a70; } .feature-timer{ display:none; } @media(max-width:780px){ .exact-feature-carousel{ min-height:430px; border-radius:23px; margin-bottom:24px; } .exact-feature-background{ opacity:.68; background-position:center; } .exact-feature-shade{ background: linear-gradient(180deg, rgba(8,9,12,.08) 0%, rgba(8,9,12,.34) 35%, rgba(8,9,12,.88) 68%, rgba(8,9,12,.98) 100%); } .exact-feature-inner{ min-height:430px; padding:28px 22px 76px; display:flex; align-items:flex-end; } .exact-feature-copy{ width:100%; margin:0; padding:0; text-align:right; } .exact-feature-label{ font-size:10px; padding:6px 10px; } .exact-feature-copy h2{ font-size:32px; margin:12px 0 6px; } .exact-feature-copy p{ font-size:11px; line-height:1.7; max-width:100%; } .exact-feature-meta{ margin:13px 0; font-size:10px; } .exact-feature-meta span{ padding:0 10px; } .exact-feature-meta b{ font-size:12px; } .exact-feature-actions .exact-solid-button, .exact-feature-carousel .exact-outline-button{ min-height:43px; border-radius:13px; padding:8px 13px; font-size:11px; } .exact-feature-pagination{ inset-inline:16px; bottom:15px; } .exact-feature-pagination button{ width:40px; height:40px; border-radius:13px; font-size:18px; } .feature-dots{ bottom:13px; } } /* ========================================================= v9.6.36 — Homepage layout repair Fixes the actual homepage quick tabs, featured hero and recommendation shelves on desktop. This block intentionally comes last so it overrides older homepage experiments. ========================================================= */ /* Quick category tabs: compact editorial cards, not pills. */ #homeView > .mi-category-tabs{ display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:12px !important; width:100% !important; margin:0 0 18px !important; padding:0 !important; overflow:visible !important; } #homeView > .mi-category-tabs button{ position:relative !important; min-width:0 !important; min-height:78px !important; padding:12px 16px !important; display:grid !important; grid-template-columns:48px minmax(0,1fr) !important; align-items:center !important; gap:12px !important; text-align:right !important; border:1px solid var(--line) !important; border-radius:18px !important; background:linear-gradient(145deg,var(--surface),var(--surface-2)) !important; color:var(--text) !important; box-shadow:0 8px 24px rgba(0,0,0,.10) !important; transform:none !important; transition:border-color .18s ease,background .18s ease,box-shadow .18s ease,transform .18s ease !important; } #homeView > .mi-category-tabs button:hover{ transform:translateY(-2px) !important; border-color:color-mix(in srgb,var(--accent) 45%,var(--line)) !important; box-shadow:0 14px 30px rgba(0,0,0,.16) !important; } #homeView > .mi-category-tabs button.active{ border-color:color-mix(in srgb,var(--accent) 72%,var(--line)) !important; background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 18%,var(--surface)),var(--surface)) !important; box-shadow:0 12px 30px color-mix(in srgb,var(--accent) 14%,transparent) !important; } #homeView > .mi-category-tabs button.active::after{ content:""; position:absolute; inset:auto 16px 0; height:3px; border-radius:4px 4px 0 0; background:var(--accent); } #homeView > .mi-category-tabs .mi-quick-icon{ width:48px !important; height:48px !important; border-radius:15px !important; background:color-mix(in srgb,var(--accent) 10%,var(--surface-2)) !important; color:var(--accent) !important; flex:none !important; } #homeView > .mi-category-tabs .mi-quick-icon svg{ width:23px !important; height:23px !important; } #homeView > .mi-category-tabs .quick-tab-copy{ min-width:0 !important; display:block !important; } #homeView > .mi-category-tabs .quick-tab-copy strong{ display:block !important; font-size:15px !important; line-height:1.35 !important; font-weight:900 !important; white-space:nowrap !important; } #homeView > .mi-category-tabs .quick-tab-copy small{ display:block !important; margin-top:3px !important; color:var(--muted) !important; font-size:9px !important; line-height:1.5 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } /* Featured collection: stable two-column composition. */ #homeView #featuredCollectionHero{ position:relative !important; isolation:isolate !important; min-height:390px !important; height:390px !important; margin:0 0 28px !important; border-radius:24px !important; overflow:hidden !important; background:var(--surface-2) !important; color:#fff !important; box-shadow:0 20px 55px rgba(0,0,0,.24) !important; } #homeView #featuredCollectionHero .exact-feature-background{ position:absolute !important; inset:0 !important; z-index:-2 !important; opacity:1 !important; transform:none !important; background-repeat:no-repeat !important; background-size:auto 100% !important; background-position:left center !important; background-color:#121318 !important; } #homeView #featuredCollectionHero .exact-feature-shade{ position:absolute !important; inset:0 !important; z-index:-1 !important; background:linear-gradient(90deg, rgba(10,11,14,.10) 0%, rgba(10,11,14,.18) 27%, rgba(10,11,14,.58) 54%, rgba(10,11,14,.91) 76%, rgba(10,11,14,.98) 100%) !important; } #homeView #featuredCollectionHero .exact-feature-inner{ position:relative !important; z-index:2 !important; width:100% !important; height:100% !important; min-height:390px !important; padding:34px 40px 58px !important; display:grid !important; grid-template-columns:minmax(0,1fr) minmax(360px,46%) !important; align-items:center !important; gap:28px !important; } #homeView #featuredCollectionHero .exact-feature-copy{ width:auto !important; max-width:560px !important; min-width:0 !important; margin:0 !important; padding:0 !important; justify-self:end !important; text-align:right !important; direction:rtl !important; } #homeView #featuredCollectionHero .exact-feature-label{ display:inline-flex !important; width:max-content !important; max-width:100% !important; margin:0 0 10px !important; padding:6px 11px !important; font-size:10px !important; letter-spacing:0 !important; border-radius:999px !important; background:color-mix(in srgb,var(--accent) 86%,#000) !important; } #homeView #featuredCollectionHero .exact-feature-copy h2{ max-width:100% !important; margin:0 0 8px !important; font-size:clamp(30px,3.5vw,48px) !important; line-height:1.15 !important; letter-spacing:-.025em !important; overflow-wrap:anywhere !important; } #homeView #featuredCollectionHero .exact-feature-copy p{ max-width:510px !important; margin:0 !important; font-size:12px !important; line-height:1.9 !important; color:rgba(255,255,255,.76) !important; } #homeView #featuredCollectionHero .exact-feature-meta{ display:flex !important; flex-wrap:wrap !important; justify-content:flex-start !important; gap:0 !important; margin:17px 0 !important; font-size:11px !important; } #homeView #featuredCollectionHero .exact-feature-meta span{ padding:0 13px !important; border-inline-start:1px solid rgba(255,255,255,.18) !important; } #homeView #featuredCollectionHero .exact-feature-meta span:first-child{ padding-inline-start:0 !important; border-inline-start:0 !important; } #homeView #featuredCollectionHero .exact-feature-meta b{font-size:14px !important;color:#f05b9c !important} #homeView #featuredCollectionHero .exact-feature-actions{ display:flex !important; flex-wrap:wrap !important; gap:8px !important; justify-content:flex-start !important; } #homeView #featuredCollectionHero .exact-feature-actions button{ min-height:44px !important; border-radius:13px !important; padding:8px 18px !important; font-size:11px !important; } #homeView #featuredCollectionHero .exact-feature-pagination{ position:absolute !important; inset-inline:24px !important; bottom:18px !important; z-index:5 !important; display:flex !important; justify-content:space-between !important; align-items:center !important; margin:0 !important; pointer-events:none !important; } #homeView #featuredCollectionHero .exact-feature-pagination button{ width:42px !important; height:42px !important; border-radius:13px !important; pointer-events:auto !important; background:rgba(15,16,20,.58) !important; border:1px solid rgba(255,255,255,.22) !important; } #homeView #featuredCollectionHero .feature-dots{ position:absolute !important; left:50% !important; transform:translateX(-50%) !important; bottom:11px !important; } #homeView #featuredCollectionHero .exact-feature-posters{display:none !important} #homeView #featuredCollectionHero .feature-timer{display:none !important} /* Recommendation shelves: real desktop grid, no horizontal rail. */ #homeView #recommendationShelvesSection{overflow:visible !important} #homeView #recommendationShelvesSection .exact-section-header{margin-bottom:14px !important} #homeView #recommendationShelvesSection .exact-section-header h2{font-size:22px !important} #homeView #recommendationShelvesSection .exact-section-header p{font-size:10px !important} #homeView #recommendationShelvesRail{ display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:14px !important; width:100% !important; overflow:visible !important; padding:0 !important; } #homeView #recommendationShelvesRail .recommendation-shelf-card{ min-width:0 !important; width:100% !important; height:220px !important; display:grid !important; grid-template-columns:104px minmax(0,1fr) !important; gap:14px !important; padding:10px !important; border-radius:20px !important; overflow:hidden !important; background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--surface-2) 82%,var(--accent) 4%)) !important; box-shadow:0 10px 30px rgba(0,0,0,.13) !important; } #homeView #recommendationShelvesRail .recommendation-shelf-cover{ width:104px !important; height:198px !important; min-height:0 !important; border-radius:14px !important; } #homeView #recommendationShelvesRail .recommendation-shelf-cover img{ width:100% !important; height:100% !important; min-height:0 !important; object-fit:cover !important; } #homeView #recommendationShelvesRail .recommendation-shelf-body{ min-width:0 !important; height:198px !important; padding:3px 2px !important; overflow:hidden !important; } #homeView #recommendationShelvesRail .recommendation-shelf-top{ display:block !important; min-width:0 !important; } #homeView #recommendationShelvesRail .recommendation-shelf-kicker{ font-size:8px !important; margin-bottom:3px !important; } #homeView #recommendationShelvesRail .recommendation-shelf-top h3{ font-size:16px !important; line-height:1.35 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } #homeView #recommendationShelvesRail .recommendation-shelf-top p{ max-width:none !important; margin:5px 0 0 !important; font-size:9px !important; line-height:1.65 !important; -webkit-line-clamp:2 !important; } #homeView #recommendationShelvesRail .recommendation-shelf-meta{ justify-content:flex-start !important; gap:5px !important; margin-top:7px !important; flex-wrap:nowrap !important; overflow:hidden !important; } #homeView #recommendationShelvesRail .recommendation-shelf-meta span{ min-width:0 !important; padding:4px 6px !important; font-size:7px !important; overflow:hidden !important; text-overflow:ellipsis !important; } #homeView #recommendationShelvesRail .recommendation-work-thumbs{ display:grid !important; grid-template-columns:repeat(5,minmax(0,1fr)) !important; gap:5px !important; margin:8px 0 !important; } #homeView #recommendationShelvesRail .recommendation-thumb b, #homeView #recommendationShelvesRail .recommendation-thumb small{display:none !important} #homeView #recommendationShelvesRail .recommendation-thumb img{ width:100% !important; aspect-ratio:3/4 !important; height:auto !important; object-fit:cover !important; border-radius:8px !important; } #homeView #recommendationShelvesRail .recommendation-shelf-actions{ display:flex !important; gap:6px !important; justify-content:flex-start !important; } #homeView #recommendationShelvesRail .recommendation-shelf-actions button{ min-height:32px !important; padding:5px 9px !important; border-radius:9px !important; font-size:8px !important; } @media(max-width:980px){ #homeView #featuredCollectionHero{height:360px !important;min-height:360px !important} #homeView #featuredCollectionHero .exact-feature-inner{min-height:360px !important;grid-template-columns:minmax(0,1fr) minmax(300px,45%) !important;padding:28px !important} #homeView #recommendationShelvesRail{grid-template-columns:1fr !important} } @media(max-width:780px){ #homeView > .mi-category-tabs{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:7px !important; margin-bottom:12px !important; } #homeView > .mi-category-tabs button{ min-height:72px !important; grid-template-columns:1fr !important; justify-items:center !important; text-align:center !important; gap:5px !important; padding:9px 5px !important; border-radius:15px !important; } #homeView > .mi-category-tabs .mi-quick-icon{width:36px !important;height:36px !important;border-radius:11px !important} #homeView > .mi-category-tabs .mi-quick-icon svg{width:19px !important;height:19px !important} #homeView > .mi-category-tabs .quick-tab-copy strong{font-size:11px !important} #homeView > .mi-category-tabs .quick-tab-copy small{display:none !important} #homeView > .mi-category-tabs button.active::after{inset-inline:10px !important} #homeView #featuredCollectionHero{ height:430px !important; min-height:430px !important; border-radius:21px !important; } #homeView #featuredCollectionHero .exact-feature-background{ background-size:cover !important; background-position:center top !important; } #homeView #featuredCollectionHero .exact-feature-shade{ background:linear-gradient(180deg,rgba(8,9,12,.08) 0%,rgba(8,9,12,.30) 38%,rgba(8,9,12,.90) 72%,rgba(8,9,12,.98) 100%) !important; } #homeView #featuredCollectionHero .exact-feature-inner{ min-height:430px !important; height:430px !important; display:flex !important; align-items:flex-end !important; padding:24px 18px 68px !important; } #homeView #featuredCollectionHero .exact-feature-copy{width:100% !important;max-width:none !important;margin:0 !important} #homeView #featuredCollectionHero .exact-feature-copy h2{font-size:29px !important} #homeView #featuredCollectionHero .exact-feature-copy p{font-size:10px !important;line-height:1.7 !important} #homeView #featuredCollectionHero .exact-feature-meta{margin:11px 0 !important;font-size:9px !important} #homeView #featuredCollectionHero .exact-feature-actions button{min-height:40px !important;font-size:10px !important;padding:7px 12px !important} #homeView #recommendationShelvesRail{grid-template-columns:1fr !important;gap:10px !important} #homeView #recommendationShelvesRail .recommendation-shelf-card{height:176px !important;grid-template-columns:82px minmax(0,1fr) !important;gap:10px !important;padding:8px !important;border-radius:16px !important} #homeView #recommendationShelvesRail .recommendation-shelf-cover{width:82px !important;height:158px !important;border-radius:11px !important} #homeView #recommendationShelvesRail .recommendation-shelf-body{height:158px !important} #homeView #recommendationShelvesRail .recommendation-shelf-top h3{font-size:14px !important} #homeView #recommendationShelvesRail .recommendation-work-thumbs{margin:6px 0 !important;gap:4px !important} #homeView #recommendationShelvesRail .recommendation-shelf-actions button{min-height:29px !important;font-size:7px !important} } /* v9.6.39 — desktop recommendation shelves repair */ /* v9.6.39 — desktop recommendation shelves repair */ /* The homepage shelf uses .recommendation-shelf-card, not the generic .collection-shelf markup. */ #homeView #recommendationShelvesSection{ width:100% !important; overflow:visible !important; } #homeView #recommendationShelvesRail{ display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:18px !important; width:100% !important; min-width:0 !important; padding:0 !important; margin:0 !important; overflow:visible !important; box-sizing:border-box !important; } #homeView #recommendationShelvesRail .recommendation-shelf-card{ display:grid !important; grid-template-columns:minmax(150px,40%) minmax(0,60%) !important; width:100% !important; min-width:0 !important; height:350px !important; min-height:350px !important; max-height:350px !important; box-sizing:border-box !important; gap:0 !important; padding:0 !important; overflow:hidden !important; border-radius:22px !important; border:1px solid var(--line) !important; background:var(--surface) !important; box-shadow:var(--shadow-sm) !important; transform:none !important; } #homeView #recommendationShelvesRail .recommendation-shelf-card:hover{ transform:translateY(-2px) !important; box-shadow:var(--shadow-md) !important; } #homeView #recommendationShelvesRail .recommendation-shelf-cover{ position:relative !important; width:100% !important; height:350px !important; min-height:350px !important; max-height:350px !important; margin:0 !important; padding:0 !important; overflow:hidden !important; border-radius:0 !important; background:var(--surface-2) !important; } #homeView #recommendationShelvesRail .recommendation-shelf-cover img{ display:block !important; width:100% !important; height:100% !important; min-height:0 !important; max-height:none !important; object-fit:cover !important; object-position:center !important; } #homeView #recommendationShelvesRail .recommendation-shelf-body{ width:100% !important; min-width:0 !important; height:350px !important; min-height:0 !important; box-sizing:border-box !important; padding:22px !important; overflow:hidden !important; display:flex !important; flex-direction:column !important; justify-content:space-between !important; } #homeView #recommendationShelvesRail .recommendation-shelf-top{ display:block !important; min-width:0 !important; } #homeView #recommendationShelvesRail .recommendation-shelf-kicker{ display:inline-flex !important; align-items:center !important; gap:6px !important; margin:0 0 8px !important; font-size:10px !important; line-height:1.4 !important; } #homeView #recommendationShelvesRail .recommendation-shelf-top h3{ margin:0 !important; font-size:21px !important; line-height:1.35 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } #homeView #recommendationShelvesRail .recommendation-shelf-top p{ max-width:none !important; margin:8px 0 0 !important; font-size:11px !important; line-height:1.8 !important; display:-webkit-box !important; -webkit-line-clamp:3 !important; -webkit-box-orient:vertical !important; overflow:hidden !important; } #homeView #recommendationShelvesRail .recommendation-shelf-meta{ display:flex !important; flex-wrap:wrap !important; justify-content:flex-start !important; align-items:center !important; gap:6px !important; margin-top:12px !important; overflow:hidden !important; } #homeView #recommendationShelvesRail .recommendation-shelf-meta span{ width:auto !important; height:auto !important; aspect-ratio:auto !important; min-width:0 !important; max-width:100% !important; padding:6px 9px !important; border:1px solid var(--line) !important; border-radius:999px !important; background:var(--surface-2) !important; color:var(--muted) !important; font-size:9px !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; box-sizing:border-box !important; } #homeView #recommendationShelvesRail .recommendation-work-thumbs{ display:grid !important; grid-template-columns:repeat(5,minmax(0,1fr)) !important; gap:7px !important; width:100% !important; min-width:0 !important; margin:14px 0 !important; overflow:hidden !important; } #homeView #recommendationShelvesRail .recommendation-thumb{ min-width:0 !important; overflow:hidden !important; } #homeView #recommendationShelvesRail .recommendation-thumb img{ display:block !important; width:100% !important; height:auto !important; aspect-ratio:3/4 !important; object-fit:cover !important; border-radius:9px !important; } #homeView #recommendationShelvesRail .recommendation-thumb b, #homeView #recommendationShelvesRail .recommendation-thumb small{ display:block !important; max-width:100% !important; overflow:hidden !important; white-space:nowrap !important; text-overflow:ellipsis !important; } #homeView #recommendationShelvesRail .recommendation-thumb b{font-size:8px !important;margin-top:4px !important} #homeView #recommendationShelvesRail .recommendation-thumb small{font-size:7px !important;margin-top:2px !important} #homeView #recommendationShelvesRail .recommendation-shelf-actions{ display:flex !important; flex-wrap:nowrap !important; gap:8px !important; justify-content:flex-start !important; margin-top:auto !important; } #homeView #recommendationShelvesRail .recommendation-shelf-actions button{ min-width:0 !important; min-height:38px !important; padding:8px 12px !important; border-radius:11px !important; font-size:9px !important; } @media (min-width:768px) and (max-width:1199px){ #homeView #recommendationShelvesRail{grid-template-columns:1fr !important} } @media (max-width:767px){ #homeView #recommendationShelvesRail{grid-template-columns:1fr !important;gap:10px !important} #homeView #recommendationShelvesRail .recommendation-shelf-card{ grid-template-columns:92px minmax(0,1fr) !important; height:180px !important; min-height:180px !important; max-height:180px !important; border-radius:16px !important; } #homeView #recommendationShelvesRail .recommendation-shelf-cover{ height:180px !important; min-height:180px !important; max-height:180px !important; } #homeView #recommendationShelvesRail .recommendation-shelf-body{ height:180px !important; padding:11px !important; } #homeView #recommendationShelvesRail .recommendation-shelf-top h3{font-size:14px !important} #homeView #recommendationShelvesRail .recommendation-shelf-top p{font-size:9px !important;-webkit-line-clamp:2 !important} #homeView #recommendationShelvesRail .recommendation-shelf-meta{margin-top:6px !important} #homeView #recommendationShelvesRail .recommendation-shelf-meta span{font-size:7px !important;padding:4px 6px !important} #homeView #recommendationShelvesRail .recommendation-work-thumbs{gap:4px !important;margin:7px 0 !important} #homeView #recommendationShelvesRail .recommendation-thumb b{font-size:6px !important} #homeView #recommendationShelvesRail .recommendation-thumb small{display:none !important} #homeView #recommendationShelvesRail .recommendation-shelf-actions button{min-height:30px !important;font-size:7px !important;padding:5px 7px !important} } /* ========================================================= HERO CONTENT FIX — v9.6.40 Maps the requested .hero-content-overlay / .hero-title / .hero-buttons-row behavior onto the actual project markup. ========================================================= */ #homeView #featuredCollectionHero .exact-feature-inner{ position:relative !important; display:block !important; height:100% !important; min-height:390px !important; padding:0 !important; box-sizing:border-box !important; overflow:hidden !important; } #homeView #featuredCollectionHero .exact-feature-copy{ position:absolute !important; inset-inline:0 !important; bottom:0 !important; width:100% !important; max-width:none !important; min-width:0 !important; box-sizing:border-box !important; padding:34px 40px 62px !important; margin:0 !important; z-index:4 !important; display:flex !important; flex-direction:column !important; align-items:flex-end !important; gap:10px !important; text-align:right !important; direction:rtl !important; background:linear-gradient(to top, rgba(10,11,14,.98) 0%, rgba(10,11,14,.88) 22%, rgba(10,11,14,.48) 54%, rgba(10,11,14,0) 100%) !important; } #homeView #featuredCollectionHero .exact-feature-label, #homeView #featuredCollectionHero .exact-feature-copy h2, #homeView #featuredCollectionHero .exact-feature-copy p, #homeView #featuredCollectionHero .exact-feature-meta, #homeView #featuredCollectionHero .exact-feature-actions{ width:100% !important; max-width:760px !important; box-sizing:border-box !important; } #homeView #featuredCollectionHero .exact-feature-label{ align-self:flex-end !important; width:max-content !important; max-width:100% !important; margin:0 0 2px !important; } #homeView #featuredCollectionHero .exact-feature-copy h2{ margin:0 !important; white-space:normal !important; overflow-wrap:anywhere !important; word-break:normal !important; line-height:1.12 !important; } #homeView #featuredCollectionHero .exact-feature-copy p{ margin:0 !important; white-space:normal !important; overflow-wrap:anywhere !important; line-height:1.75 !important; } #homeView #featuredCollectionHero .exact-feature-meta{ display:flex !important; flex-wrap:wrap !important; align-items:center !important; justify-content:flex-start !important; gap:0 !important; margin:4px 0 2px !important; } #homeView #featuredCollectionHero .exact-feature-actions{ display:flex !important; flex-wrap:wrap !important; align-items:center !important; justify-content:flex-start !important; gap:10px !important; margin:0 !important; } #homeView #featuredCollectionHero .exact-feature-actions button{ flex:0 0 auto !important; min-width:150px !important; min-height:48px !important; box-sizing:border-box !important; } #homeView #featuredCollectionHero .exact-feature-posters{ display:none !important; } #homeView #featuredCollectionHero .exact-feature-pagination{ position:absolute !important; inset-inline:18px !important; bottom:16px !important; z-index:8 !important; pointer-events:none !important; } #homeView #featuredCollectionHero .exact-feature-pagination button{ pointer-events:auto !important; position:relative !important; z-index:9 !important; } @media (max-width: 900px){ #homeView #featuredCollectionHero{ min-height:360px !important; height:360px !important; } #homeView #featuredCollectionHero .exact-feature-inner{ min-height:360px !important; } #homeView #featuredCollectionHero .exact-feature-copy{ padding:26px 24px 58px !important; } #homeView #featuredCollectionHero .exact-feature-copy h2{ font-size:clamp(27px,5vw,40px) !important; } } @media (max-width: 600px){ #homeView #featuredCollectionHero{ min-height:330px !important; height:330px !important; border-radius:18px !important; } #homeView #featuredCollectionHero .exact-feature-inner{ min-height:330px !important; } #homeView #featuredCollectionHero .exact-feature-copy{ padding:22px 16px 52px !important; gap:7px !important; } #homeView #featuredCollectionHero .exact-feature-copy h2{ font-size:25px !important; } #homeView #featuredCollectionHero .exact-feature-copy p{ font-size:11px !important; line-height:1.55 !important; } #homeView #featuredCollectionHero .exact-feature-meta{ font-size:10px !important; } #homeView #featuredCollectionHero .exact-feature-actions button{ min-width:0 !important; min-height:42px !important; padding:7px 14px !important; } #homeView #featuredCollectionHero .exact-feature-pagination{ inset-inline:10px !important; bottom:9px !important; } #homeView #featuredCollectionHero .exact-feature-pagination button{ width:36px !important; height:36px !important; } } /* ========================================================= v9.6.42 — Homepage UI repair Final override for Quick Tabs / Featured Hero / Recommendation Shelves. ========================================================= */ /* 1) Compact quick category tabs */ #homeView > .mi-quick-tabs.mi-category-tabs{ display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:10px !important; width:100% !important; margin:0 0 16px !important; padding:0 !important; overflow:visible !important; } #homeView > .mi-quick-tabs.mi-category-tabs > button{ min-width:0 !important; min-height:60px !important; height:60px !important; padding:8px 12px !important; box-sizing:border-box !important; display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:center !important; gap:8px !important; border-radius:14px !important; } #homeView > .mi-quick-tabs.mi-category-tabs .mi-quick-icon{ width:34px !important; height:34px !important; min-width:34px !important; border-radius:10px !important; } #homeView > .mi-quick-tabs.mi-category-tabs .mi-quick-icon svg{ width:18px !important; height:18px !important; } #homeView > .mi-quick-tabs.mi-category-tabs .quick-tab-copy strong{ font-size:12px !important; line-height:1.25 !important; } #homeView > .mi-quick-tabs.mi-category-tabs .quick-tab-copy small{ margin-top:1px !important; font-size:8px !important; line-height:1.3 !important; } /* 2) Remove the “اختيار المحرر” badge */ #homeView #featuredCollectionHero .exact-feature-label{ display:none !important; } /* 3) Clean Hero layout + centered navigation */ #homeView #featuredCollectionHero{ position:relative !important; overflow:hidden !important; } #homeView #featuredCollectionHero .exact-feature-inner{ position:relative !important; display:block !important; width:100% !important; height:100% !important; min-height:inherit !important; padding:0 !important; box-sizing:border-box !important; } #homeView #featuredCollectionHero .exact-feature-copy{ position:absolute !important; inset-inline:0 !important; bottom:0 !important; width:100% !important; max-width:none !important; padding:28px 38px 72px !important; box-sizing:border-box !important; display:flex !important; flex-direction:column !important; align-items:flex-end !important; gap:8px !important; background:linear-gradient(to top,rgba(10,11,14,.98),rgba(10,11,14,.72) 42%,transparent 100%) !important; z-index:4 !important; } #homeView #featuredCollectionHero .exact-feature-copy h2{ width:100% !important; max-width:760px !important; margin:0 !important; white-space:normal !important; overflow-wrap:anywhere !important; line-height:1.15 !important; } #homeView #featuredCollectionHero .exact-feature-copy p{ width:100% !important; max-width:700px !important; margin:0 !important; line-height:1.75 !important; } #homeView #featuredCollectionHero .exact-feature-meta{ width:100% !important; max-width:700px !important; margin:5px 0 !important; } #homeView #featuredCollectionHero .exact-feature-actions{ width:100% !important; max-width:700px !important; display:flex !important; flex-wrap:wrap !important; gap:8px !important; justify-content:flex-start !important; margin:0 !important; } #homeView #featuredCollectionHero .exact-feature-actions button{ min-width:120px !important; min-height:42px !important; padding:7px 15px !important; box-sizing:border-box !important; } /* Navigation is outside the text stack and cannot create the old empty box. */ #homeView #featuredCollectionHero > .exact-feature-pagination{ position:absolute !important; inset-inline:20px !important; bottom:14px !important; z-index:10 !important; display:flex !important; align-items:center !important; justify-content:space-between !important; gap:12px !important; margin:0 !important; pointer-events:none !important; } #homeView #featuredCollectionHero > .exact-feature-pagination button{ pointer-events:auto !important; width:38px !important; height:38px !important; min-width:38px !important; padding:0 !important; display:grid !important; place-items:center !important; border-radius:11px !important; box-sizing:border-box !important; } #homeView #featuredCollectionHero > .exact-feature-pagination .feature-dots, #homeView #featuredCollectionHero > .exact-feature-pagination #featuredDots{ position:static !important; left:auto !important; bottom:auto !important; transform:none !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:5px !important; flex:1 !important; pointer-events:none !important; } /* 4) Desktop recommendation shelves: horizontal card, controlled cover */ #homeView #recommendationShelvesRail{ display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:16px !important; width:100% !important; overflow:visible !important; padding:0 !important; box-sizing:border-box !important; } @media (min-width:768px){ #homeView #recommendationShelvesRail .recommendation-shelf-card{ display:flex !important; flex-direction:row !important; direction:rtl !important; width:100% !important; height:320px !important; min-height:320px !important; max-height:320px !important; padding:0 !important; overflow:hidden !important; box-sizing:border-box !important; } #homeView #recommendationShelvesRail .recommendation-shelf-cover{ flex:0 0 30% !important; width:30% !important; height:320px !important; min-height:0 !important; max-height:320px !important; overflow:hidden !important; } #homeView #recommendationShelvesRail .recommendation-shelf-cover img{ width:100% !important; height:100% !important; max-height:320px !important; object-fit:cover !important; } #homeView #recommendationShelvesRail .recommendation-shelf-body{ flex:1 1 70% !important; width:70% !important; height:320px !important; min-height:0 !important; max-height:320px !important; padding:20px !important; box-sizing:border-box !important; overflow:hidden !important; } } @media (min-width:768px) and (max-width:1100px){ #homeView #recommendationShelvesRail{ grid-template-columns:1fr !important; } } @media (max-width:767px){ #homeView > .mi-quick-tabs.mi-category-tabs{ gap:8px !important; } #homeView > .mi-quick-tabs.mi-category-tabs > button{ min-height:54px !important; height:54px !important; padding:7px 8px !important; gap:6px !important; border-radius:12px !important; } #homeView > .mi-quick-tabs.mi-category-tabs .mi-quick-icon{ width:28px !important; height:28px !important; min-width:28px !important; border-radius:8px !important; } #homeView > .mi-quick-tabs.mi-category-tabs .mi-quick-icon svg{ width:15px !important; height:15px !important; } #homeView > .mi-quick-tabs.mi-category-tabs .quick-tab-copy strong{font-size:10px !important} #homeView > .mi-quick-tabs.mi-category-tabs .quick-tab-copy small{display:none !important} #homeView #recommendationShelvesRail{grid-template-columns:1fr !important} } /* ========================================================= v9.6.43 — Featured Hero redesign Visual direction: full-bleed artwork, lower gradient copy, compact counter badge, restrained side controls. ========================================================= */ #homeView #featuredCollectionHero{ position:relative !important; height:clamp(440px,44vw,620px) !important; min-height:440px !important; margin:0 0 28px !important; border-radius:24px !important; overflow:hidden !important; isolation:isolate !important; background:#151116 !important; border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line)) !important; box-shadow:0 18px 50px rgba(0,0,0,.28) !important; } #homeView #featuredCollectionHero .exact-feature-background{ position:absolute !important; inset:0 !important; z-index:0 !important; opacity:1 !important; background-size:cover !important; background-position:center center !important; transform:none !important; filter:saturate(.98) contrast(1.02) !important; } #homeView #featuredCollectionHero .exact-feature-shade{ position:absolute !important; inset:0 !important; z-index:1 !important; background: linear-gradient(180deg, rgba(7,8,10,.05) 0%, rgba(7,8,10,.03) 34%, rgba(7,8,10,.18) 52%, rgba(7,8,10,.72) 72%, rgba(7,8,10,.98) 100%), linear-gradient(90deg, rgba(7,8,10,.06) 0%, rgba(7,8,10,0) 52%, rgba(7,8,10,.24) 100%) !important; } #homeView #featuredCollectionHero .exact-feature-inner{ position:relative !important; z-index:2 !important; display:block !important; width:100% !important; height:100% !important; min-height:100% !important; padding:0 !important; box-sizing:border-box !important; overflow:hidden !important; } #homeView #featuredCollectionHero .exact-feature-posters{ display:none !important; } #homeView #featuredCollectionHero .exact-feature-copy{ position:absolute !important; inset-inline:0 !important; bottom:0 !important; width:100% !important; max-width:none !important; min-width:0 !important; margin:0 !important; padding:30px 82px 62px !important; box-sizing:border-box !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:flex-end !important; gap:8px !important; text-align:center !important; direction:rtl !important; background:transparent !important; } #homeView #featuredCollectionHero .exact-feature-label{ display:none !important; } #homeView #featuredCollectionHero .exact-feature-copy h2{ width:min(900px,100%) !important; max-width:900px !important; margin:0 !important; color:#fff !important; font-size:clamp(32px,4.6vw,60px) !important; font-weight:900 !important; line-height:1.04 !important; text-align:center !important; white-space:normal !important; overflow-wrap:anywhere !important; text-shadow:0 3px 24px rgba(0,0,0,.42) !important; } #homeView #featuredCollectionHero .exact-feature-copy p{ width:min(700px,100%) !important; max-width:700px !important; margin:0 !important; color:rgba(255,255,255,.82) !important; font-size:clamp(12px,1.35vw,16px) !important; line-height:1.65 !important; text-align:center !important; white-space:normal !important; overflow-wrap:anywhere !important; text-shadow:0 2px 12px rgba(0,0,0,.38) !important; } #homeView #featuredCollectionHero .exact-feature-meta{ width:auto !important; max-width:100% !important; margin:6px 0 2px !important; display:flex !important; align-items:center !important; justify-content:center !important; flex-wrap:wrap !important; gap:12px !important; color:rgba(255,255,255,.9) !important; font-size:12px !important; text-align:center !important; } #homeView #featuredCollectionHero .exact-feature-meta span{ display:inline-flex !important; align-items:center !important; gap:5px !important; } #homeView #featuredCollectionHero .exact-feature-actions{ width:auto !important; max-width:100% !important; margin:5px 0 0 !important; display:flex !important; align-items:center !important; justify-content:center !important; flex-wrap:wrap !important; gap:10px !important; } #homeView #featuredCollectionHero .exact-feature-actions button{ min-width:148px !important; min-height:46px !important; padding:9px 20px !important; border-radius:14px !important; box-sizing:border-box !important; font-size:13px !important; box-shadow:0 10px 24px rgba(0,0,0,.18) !important; } #homeView #featuredCollectionHero .exact-feature-actions .exact-solid-button{ background:var(--accent) !important; border-color:var(--accent) !important; color:#fff !important; } #homeView #featuredCollectionHero .exact-feature-actions .exact-outline-button{ background:rgba(10,11,14,.46) !important; border-color:rgba(255,255,255,.25) !important; color:#fff !important; backdrop-filter:blur(10px) !important; } /* Counter + arrows: the counter replaces the old row of dot pills. */ #homeView #featuredCollectionHero > .exact-feature-pagination{ position:absolute !important; inset:0 !important; z-index:9 !important; display:block !important; width:100% !important; margin:0 !important; pointer-events:none !important; } #homeView #featuredCollectionHero > .exact-feature-pagination button{ position:absolute !important; top:50% !important; transform:translateY(-50%) !important; width:42px !important; height:42px !important; min-width:42px !important; padding:0 !important; display:grid !important; place-items:center !important; border-radius:50% !important; background:rgba(9,10,12,.44) !important; border:1px solid rgba(255,255,255,.18) !important; color:#fff !important; box-shadow:0 8px 22px rgba(0,0,0,.18) !important; backdrop-filter:blur(9px) !important; pointer-events:auto !important; } #homeView #featuredCollectionHero > .exact-feature-pagination #featuredPrev{left:18px !important;right:auto !important;} #homeView #featuredCollectionHero > .exact-feature-pagination #featuredNext{right:18px !important;left:auto !important;} #homeView #featuredCollectionHero > .exact-feature-pagination .feature-dots, #homeView #featuredCollectionHero > .exact-feature-pagination #featuredDots{ position:absolute !important; top:22px !important; right:22px !important; bottom:auto !important; left:auto !important; transform:none !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:5px !important; min-width:70px !important; height:38px !important; padding:0 13px !important; box-sizing:border-box !important; border-radius:999px !important; background:rgba(20,8,13,.72) !important; border:1px solid rgba(255,255,255,.09) !important; color:#fff !important; direction:ltr !important; pointer-events:none !important; backdrop-filter:blur(10px) !important; box-shadow:0 8px 20px rgba(0,0,0,.16) !important; } #homeView #featuredCollectionHero .feature-counter-current, #homeView #featuredCollectionHero .feature-counter-total{ font-size:15px !important; line-height:1 !important; font-weight:900 !important; color:#fff !important; } #homeView #featuredCollectionHero .feature-counter-sep{ font-size:14px !important; opacity:.55 !important; color:#fff !important; } #homeView #featuredCollectionHero .feature-timer{display:none !important;} @media (max-width: 767px){ #homeView #featuredCollectionHero{ height:430px !important; min-height:430px !important; border-radius:20px !important; } #homeView #featuredCollectionHero .exact-feature-copy{ padding:24px 48px 50px !important; gap:7px !important; } #homeView #featuredCollectionHero .exact-feature-copy h2{ font-size:clamp(25px,8vw,38px) !important; line-height:1.08 !important; } #homeView #featuredCollectionHero .exact-feature-copy p{ font-size:11px !important; line-height:1.55 !important; } #homeView #featuredCollectionHero .exact-feature-meta{font-size:10px !important;gap:8px !important} #homeView #featuredCollectionHero .exact-feature-actions{gap:7px !important} #homeView #featuredCollectionHero .exact-feature-actions button{min-width:120px !important;min-height:40px !important;padding:7px 13px !important;font-size:11px !important} #homeView #featuredCollectionHero > .exact-feature-pagination #featuredPrev{left:9px !important} #homeView #featuredCollectionHero > .exact-feature-pagination #featuredNext{right:9px !important} #homeView #featuredCollectionHero > .exact-feature-pagination button{width:36px !important;height:36px !important;min-width:36px !important} #homeView #featuredCollectionHero > .exact-feature-pagination .feature-dots, #homeView #featuredCollectionHero > .exact-feature-pagination #featuredDots{top:11px !important;right:11px !important;height:34px !important;min-width:62px !important;padding:0 10px !important} #homeView #featuredCollectionHero .feature-counter-current, #homeView #featuredCollectionHero .feature-counter-total{font-size:12px !important} #homeView #featuredCollectionHero .feature-counter-sep{font-size:12px !important} } /* v9.6.44 — Hero structure based on the new-hero design */ #homeView #featuredCollectionHero.new-hero-section{ position:relative !important; width:100% !important; height:600px !important; min-height:560px !important; margin:0 !important; overflow:hidden !important; isolation:isolate !important; border-radius:22px !important; background:#0b0b0e !important; color:#fff !important; display:flex !important; flex-direction:column !important; font-family:inherit !important; } #homeView #featuredCollectionHero .new-hero-backdrop{ position:absolute !important; inset:0 !important; z-index:0 !important; background-position:center !important; background-size:cover !important; background-repeat:no-repeat !important; transform:scale(1.015) !important; transition:transform .7s ease,filter .35s ease !important; } #homeView #featuredCollectionHero .new-hero-shade{ position:absolute !important; inset:0 !important; z-index:1 !important; background: linear-gradient(180deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,.12) 28%,rgba(0,0,0,.52) 58%,rgba(0,0,0,.94) 100%), linear-gradient(90deg,rgba(0,0,0,.02) 0%,rgba(0,0,0,.12) 50%,rgba(0,0,0,.38) 100%) !important; pointer-events:none !important; } #homeView #featuredCollectionHero .hero-logo{ position:relative !important; z-index:4 !important; padding:22px 26px !important; font-size:15px !important; font-weight:900 !important; letter-spacing:1.5px !important; text-transform:none !important; text-shadow:0 2px 12px rgba(0,0,0,.45) !important; } #homeView #featuredCollectionHero .hero-content-overlay{ position:relative !important; z-index:4 !important; width:100% !important; height:100% !important; min-height:0 !important; padding:0 28px 30px !important; box-sizing:border-box !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:flex-end !important; text-align:center !important; } #homeView #featuredCollectionHero .hero-event-container{ margin:0 0 14px !important; text-align:center !important; } #homeView #featuredCollectionHero .hero-event-title{ font-size:clamp(42px,6vw,76px) !important; line-height:.9 !important; font-weight:950 !important; letter-spacing:-3px !important; text-transform:uppercase !important; text-shadow:0 4px 18px rgba(0,0,0,.55) !important; } #homeView #featuredCollectionHero .hero-event-title .red-text{ color:var(--accent,#c84c7b) !important; } #homeView #featuredCollectionHero .hero-event-subtitle{ margin-top:8px !important; font-size:11px !important; letter-spacing:2.5px !important; font-weight:800 !important; opacity:.88 !important; } #homeView #featuredCollectionHero .hero-manhwa-info{ width:min(900px,100%) !important; display:flex !important; flex-direction:column !important; align-items:center !important; box-sizing:border-box !important; } #homeView #featuredCollectionHero .exact-feature-label{ display:none !important; } #homeView #featuredCollectionHero .hero-main-title{ width:100% !important; max-width:900px !important; margin:0 0 10px !important; font-size:clamp(28px,4.1vw,50px) !important; line-height:1.12 !important; font-weight:950 !important; white-space:normal !important; overflow-wrap:anywhere !important; text-shadow:0 3px 15px rgba(0,0,0,.8) !important; } #homeView #featuredCollectionHero .hero-description{ width:min(760px,100%) !important; margin:0 auto 15px !important; font-size:clamp(12px,1.3vw,16px) !important; line-height:1.65 !important; color:rgba(255,255,255,.82) !important; white-space:normal !important; overflow-wrap:anywhere !important; } #homeView #featuredCollectionHero .hero-badges-row{ display:flex !important; align-items:center !important; justify-content:center !important; flex-wrap:wrap !important; gap:8px !important; margin:0 0 16px !important; } #homeView #featuredCollectionHero .hero-badge{ display:inline-flex !important; align-items:center !important; justify-content:center !important; min-width:78px !important; padding:7px 16px !important; border:1px solid rgba(255,255,255,.25) !important; border-radius:999px !important; background:rgba(10,10,14,.55) !important; color:#fff !important; backdrop-filter:blur(8px) !important; font-size:12px !important; font-weight:800 !important; box-sizing:border-box !important; } #homeView #featuredCollectionHero .hero-badge b{ margin-inline:4px !important; color:#fff !important; } #homeView #featuredCollectionHero .hero-actions{ display:flex !important; align-items:center !important; justify-content:center !important; flex-wrap:wrap !important; gap:10px !important; width:100% !important; margin:0 !important; } #homeView #featuredCollectionHero .hero-actions button{ box-sizing:border-box !important; min-width:150px !important; min-height:44px !important; padding:9px 22px !important; border-radius:999px !important; font-size:13px !important; font-weight:850 !important; } #homeView #featuredCollectionHero .hero-bottom-faded-text{ margin:12px 0 10px !important; color:rgba(255,255,255,.38) !important; font-size:10px !important; letter-spacing:1.8px !important; font-weight:800 !important; text-transform:uppercase !important; } #homeView #featuredCollectionHero .hero-pagination-dots{ display:flex !important; align-items:center !important; justify-content:center !important; gap:7px !important; min-height:14px !important; } #homeView #featuredCollectionHero .hero-pagination-dots .feature-counter-current, #homeView #featuredCollectionHero .hero-pagination-dots .feature-counter-total{ color:#fff !important; font-size:12px !important; font-weight:900 !important; } #homeView #featuredCollectionHero .hero-pagination-dots .feature-counter-sep{ color:rgba(255,255,255,.48) !important; font-size:12px !important; } #homeView #featuredCollectionHero .hero-feature-posters{ position:absolute !important; z-index:3 !important; right:28px !important; top:50% !important; transform:translateY(-50%) !important; display:flex !important; gap:8px !important; pointer-events:none !important; opacity:.92 !important; } #homeView #featuredCollectionHero .hero-feature-posters .feature-mini-work{ width:58px !important; height:82px !important; overflow:hidden !important; border:1px solid rgba(255,255,255,.18) !important; border-radius:9px !important; box-shadow:0 8px 25px rgba(0,0,0,.35) !important; } #homeView #featuredCollectionHero .hero-feature-posters .feature-mini-work img{ display:block !important; width:100% !important; height:100% !important; object-fit:cover !important; } #homeView #featuredCollectionHero .hero-feature-posters .feature-mini-work span{display:none !important;} #homeView #featuredCollectionHero .hero-nav{ position:absolute !important; inset:50% 0 auto !important; z-index:5 !important; transform:translateY(-50%) !important; display:flex !important; justify-content:space-between !important; align-items:center !important; padding:0 14px !important; pointer-events:none !important; } #homeView #featuredCollectionHero .hero-nav button{ pointer-events:auto !important; width:42px !important; height:42px !important; min-width:42px !important; padding:0 !important; display:grid !important; place-items:center !important; border:1px solid rgba(255,255,255,.3) !important; border-radius:50% !important; background:rgba(10,10,14,.45) !important; color:#fff !important; backdrop-filter:blur(8px) !important; box-shadow:0 8px 25px rgba(0,0,0,.25) !important; } #homeView #featuredCollectionHero .hero-nav button:hover{background:rgba(200,76,123,.82) !important;border-color:transparent !important;} #homeView #featuredCollectionHero .exact-feature-posters, #homeView #featuredCollectionHero .exact-feature-pagination{display:none !important;} @media (max-width: 767px){ #homeView #featuredCollectionHero.new-hero-section{height:500px !important;min-height:500px !important;border-radius:18px !important;} #homeView #featuredCollectionHero .hero-logo{padding:16px 18px !important;font-size:13px !important;} #homeView #featuredCollectionHero .hero-content-overlay{padding:0 18px 24px !important;} #homeView #featuredCollectionHero .hero-event-container{margin-bottom:10px !important;} #homeView #featuredCollectionHero .hero-event-title{font-size:46px !important;} #homeView #featuredCollectionHero .hero-event-subtitle{font-size:8px !important;letter-spacing:1.7px !important;} #homeView #featuredCollectionHero .hero-main-title{font-size:29px !important;} #homeView #featuredCollectionHero .hero-description{font-size:11px !important;line-height:1.55 !important;} #homeView #featuredCollectionHero .hero-badge{min-width:66px !important;padding:6px 10px !important;font-size:10px !important;} #homeView #featuredCollectionHero .hero-actions button{min-width:128px !important;min-height:40px !important;font-size:11px !important;} #homeView #featuredCollectionHero .hero-feature-posters{display:none !important;} #homeView #featuredCollectionHero .hero-nav{padding:0 8px !important;} #homeView #featuredCollectionHero .hero-nav button{width:36px !important;height:36px !important;min-width:36px !important;font-size:14px !important;} } /* v9.6.46 Hero compact touch carousel + clickable cover */ #featuredCollectionHero { touch-action: pan-y; -webkit-tap-highlight-color: transparent; } #featuredCollectionBackdrop.is-clickable { cursor: pointer; } #featuredCollectionBackdrop.is-clickable:focus-visible { outline: 2px solid var(--accent, #c84c7b); outline-offset: -4px; } @media (hover: hover) { #featuredCollectionBackdrop.is-clickable { transition: transform .35s ease, filter .35s ease; } #featuredCollectionHero:hover #featuredCollectionBackdrop.is-clickable { transform: scale(1.012); filter: saturate(1.03); } } /* v9.6.46 — compact Hero: remove event text, CTA buttons and arrow navigation */ #homeView #featuredCollectionHero .hero-event-container, #homeView #featuredCollectionHero .hero-actions, #homeView #featuredCollectionHero .hero-nav{ display:none !important; } #homeView #featuredCollectionHero.new-hero-section{ height:300px !important; min-height:300px !important; max-height:300px !important; border-radius:20px !important; } #homeView #featuredCollectionHero .hero-content-overlay{ min-height:0 !important; height:100% !important; padding:0 28px 20px !important; justify-content:flex-end !important; box-sizing:border-box !important; } #homeView #featuredCollectionHero .hero-logo{ padding:14px 20px !important; font-size:12px !important; } #homeView #featuredCollectionHero .hero-manhwa-info{ width:min(760px,100%) !important; } #homeView #featuredCollectionHero .hero-main-title{ max-width:760px !important; margin:0 0 7px !important; font-size:clamp(23px,3.2vw,36px) !important; line-height:1.12 !important; } #homeView #featuredCollectionHero .hero-description{ width:min(650px,100%) !important; margin:0 auto 10px !important; font-size:clamp(10px,1.05vw,13px) !important; line-height:1.5 !important; } #homeView #featuredCollectionHero .hero-badges-row{ margin:0 0 8px !important; gap:6px !important; } #homeView #featuredCollectionHero .hero-badge{ min-width:64px !important; padding:5px 11px !important; font-size:10px !important; } #homeView #featuredCollectionHero .hero-bottom-faded-text{ margin:7px 0 5px !important; font-size:8px !important; } #homeView #featuredCollectionHero .hero-pagination-dots{ min-height:16px !important; } @media (max-width:767px){ #homeView #featuredCollectionHero.new-hero-section{ height:320px !important; min-height:320px !important; max-height:320px !important; border-radius:18px !important; } #homeView #featuredCollectionHero .hero-content-overlay{ padding:0 16px 16px !important; } #homeView #featuredCollectionHero .hero-logo{ padding:12px 16px !important; font-size:11px !important; } #homeView #featuredCollectionHero .hero-main-title{ font-size:23px !important; margin-bottom:6px !important; } #homeView #featuredCollectionHero .hero-description{ font-size:10px !important; margin-bottom:8px !important; } #homeView #featuredCollectionHero .hero-badge{ min-width:58px !important; padding:4px 8px !important; font-size:9px !important; } } /* v9.6.47 — final homepage hero + latest collections + shelf visibility */ #homeView #featuredCollectionHero{ cursor:pointer !important; } #homeView #featuredCollectionHero .hero-stat-badge{ min-width:auto !important; padding:6px 12px !important; gap:5px !important; border-color:rgba(255,255,255,.22) !important; background:rgba(10,10,14,.62) !important; box-shadow:0 5px 18px rgba(0,0,0,.18) !important; } #homeView #featuredCollectionHero .hero-stat-badge b{ font-size:13px !important; font-weight:950 !important; margin:0 !important; } #homeView #featuredCollectionHero .hero-stat-icon{ display:inline-grid !important; place-items:center !important; width:18px !important; height:18px !important; border-radius:6px !important; background:rgba(200,76,123,.15) !important; color:var(--accent,#c84c7b) !important; font-size:11px !important; } #homeView #featuredCollectionHero .hero-stat-badge>span:last-child{ color:rgba(255,255,255,.65) !important; font-size:10px !important; font-weight:800 !important; } #homeView #featuredCollectionHero .hero-bottom-faded-text{display:none !important;} /* Make every recommendation shelf visible and contained on desktop. */ #homeView #recommendationShelvesSection, #homeView #rotatingShelvesSection{ display:block !important; visibility:visible !important; opacity:1 !important; overflow:visible !important; } #homeView #recommendationShelvesSection.reveal, #homeView #rotatingShelvesSection.reveal{ opacity:1 !important; transform:none !important; } #homeView #recommendationShelvesRail{ display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:18px !important; width:100% !important; min-width:0 !important; overflow:visible !important; align-items:stretch !important; } @media (min-width:1200px){ #homeView #recommendationShelvesRail .recommendation-shelf-card{ display:flex !important; flex-direction:row !important; direction:rtl !important; height:300px !important; min-height:300px !important; max-height:300px !important; min-width:0 !important; overflow:hidden !important; } #homeView #recommendationShelvesRail .recommendation-shelf-cover{ flex:0 0 30% !important; width:30% !important; height:300px !important; min-height:300px !important; max-height:300px !important; overflow:hidden !important; } #homeView #recommendationShelvesRail .recommendation-shelf-cover img{ width:100% !important; height:100% !important; max-height:300px !important; object-fit:cover !important; } } @media (min-width:768px) and (max-width:1199px){ #homeView #recommendationShelvesRail{grid-template-columns:1fr !important;} #homeView #recommendationShelvesRail .recommendation-shelf-card{ display:flex !important; flex-direction:row !important; direction:rtl !important; height:290px !important; min-height:290px !important; max-height:290px !important; } #homeView #recommendationShelvesRail .recommendation-shelf-cover{ flex:0 0 30% !important; width:30% !important; height:290px !important; min-height:290px !important; } } /* v9.6.48 — homepage shelves visibility + hero stats containment */ #homeView #popularWorksSection, #homeView #latestWorksSection, #homeView #quickCategoryResultsSection, #homeView #personalizedRecommendationsSection, #homeView #topCollectionsSection, #homeView #recommendationShelvesSection, #homeView #rotatingShelvesSection{ display:block !important; visibility:visible !important; opacity:1 !important; } #homeView #featuredCollectionHero .exact-feature-meta{ display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:flex-end !important; flex-wrap:wrap !important; width:auto !important; max-width:100% !important; min-width:0 !important; margin:8px 0 !important; padding:0 !important; box-sizing:border-box !important; overflow:visible !important; gap:8px !important; } #homeView #featuredCollectionHero .hero-stat-badge{ flex:0 0 auto !important; width:auto !important; max-width:100% !important; min-width:72px !important; min-height:32px !important; height:32px !important; padding:5px 10px !important; box-sizing:border-box !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; white-space:nowrap !important; overflow:hidden !important; border-radius:10px !important; } #homeView #featuredCollectionHero .hero-stat-badge b{ display:inline-block !important; max-width:70px !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; font-size:12px !important; line-height:1 !important; } #homeView #featuredCollectionHero .hero-stat-badge>span:last-child{ flex:0 0 auto !important; } #homeView #featuredCollectionHero .hero-manhwa-info, #homeView #featuredCollectionHero .exact-feature-copy{ min-width:0 !important; overflow:visible !important; } /* Desktop recommendation shelves: compact horizontal card, cover kept contained. */ @media (min-width:1200px){ #homeView #recommendationShelvesRail{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:18px !important; } #homeView #recommendationShelvesRail .recommendation-shelf-card{ display:flex !important; flex-direction:row !important; direction:rtl !important; width:100% !important; height:300px !important; min-height:300px !important; max-height:300px !important; overflow:hidden !important; } #homeView #recommendationShelvesRail .recommendation-shelf-cover{ flex:0 0 30% !important; width:30% !important; height:300px !important; min-height:300px !important; max-height:300px !important; overflow:hidden !important; } #homeView #recommendationShelvesRail .recommendation-shelf-cover img{ width:100% !important; height:100% !important; object-fit:cover !important; object-position:center !important; } #homeView #recommendationShelvesRail .recommendation-shelf-body{ flex:1 1 auto !important; min-width:0 !important; width:70% !important; height:300px !important; max-height:300px !important; overflow:hidden !important; box-sizing:border-box !important; } } /* Keep all lower homepage shelves from being clipped by legacy overflow rules. */ #homeView #topCollectionsGrid, #homeView #recommendationShelvesRail, #homeView #rotatingShelves{ width:100% !important; min-width:0 !important; overflow:visible !important; } #homeView #rotatingShelves{ display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:14px !important; } @media (max-width:1199px){ #homeView #rotatingShelves{grid-template-columns:1fr !important;} } /* v9.6.50 — Homepage shelf/card visual cleanup */ #homeView .top-collections-strip, #homeView #topCollectionsGrid{ display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:16px !important; width:100% !important; overflow:visible !important; } #homeView .top-collections-strip > *, #homeView #topCollectionsGrid > *{ min-width:0 !important; } /* Featured recommendation cards: balanced cover + compact information */ #homeView .collection-editorial-card, #homeView .ranked-collection-card{ min-width:0 !important; overflow:hidden !important; border-radius:20px !important; } #homeView .collection-editorial-card .collection-card-cover, #homeView .ranked-collection-card .collection-card-cover{ aspect-ratio:16/9 !important; height:auto !important; max-height:220px !important; overflow:hidden !important; } #homeView .collection-editorial-card .collection-card-cover img, #homeView .ranked-collection-card .collection-card-cover img{ width:100% !important; height:100% !important; object-fit:cover !important; } #homeView .collection-editorial-card .collection-card-copy, #homeView .ranked-collection-card .collection-card-copy{ min-width:0 !important; padding:13px 14px 14px !important; } #homeView .collection-editorial-card h3, #homeView .ranked-collection-card h3{ font-size:15px !important; line-height:1.35 !important; margin:0 0 5px !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; } #homeView .collection-editorial-card p, #homeView .ranked-collection-card p{ display:-webkit-box !important; -webkit-box-orient:vertical !important; -webkit-line-clamp:2 !important; overflow:hidden !important; min-height:2.8em !important; line-height:1.45 !important; } /* All homepage recommendation shelves: clean horizontal work rails */ #homeView .collection-shelf{ min-width:0 !important; overflow:hidden !important; border-radius:20px !important; } #homeView .collection-shelf-head{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:14px !important; min-width:0 !important; padding:14px 16px !important; } #homeView .collection-shelf-head > div:first-child{ display:flex !important; align-items:center !important; gap:10px !important; min-width:0 !important; } #homeView .collection-shelf-head h3{ font-size:16px !important; line-height:1.35 !important; margin:2px 0 3px !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } #homeView .collection-shelf-head p{ max-width:520px !important; margin:0 !important; color:var(--muted) !important; font-size:11px !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } #homeView .shelf-track.platform-shelf-track{ display:grid !important; grid-template-columns:repeat(6,minmax(0,1fr)) !important; gap:12px !important; overflow:hidden !important; padding:0 14px 14px !important; } #homeView .shelf-track.platform-shelf-track .poster-card{ min-width:0 !important; width:100% !important; overflow:hidden !important; border-radius:14px !important; } #homeView .shelf-track.platform-shelf-track .poster-cover{ width:100% !important; aspect-ratio:2/3 !important; height:auto !important; min-height:0 !important; overflow:hidden !important; border-radius:12px !important; } #homeView .shelf-track.platform-shelf-track .poster-cover img{ width:100% !important; height:100% !important; object-fit:cover !important; } #homeView .shelf-track.platform-shelf-track .poster-copy{ padding:7px 2px 1px !important; min-width:0 !important; } #homeView .shelf-track.platform-shelf-track .poster-copy h3{ font-size:12px !important; line-height:1.35 !important; margin:0 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } #homeView .shelf-track.platform-shelf-track .poster-copy p{ display:none !important; } #homeView .shelf-track.platform-shelf-track .poster-meta{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:5px !important; margin-top:4px !important; font-size:10px !important; } #homeView .shelf-track.platform-shelf-track .poster-meta small{ white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } /* The rotating shelf section uses the same visual language. */ #homeView #rotatingShelves .collection-shelf{ width:100% !important; } @media (max-width:1199px){ #homeView .top-collections-strip, #homeView #topCollectionsGrid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } #homeView .shelf-track.platform-shelf-track{ grid-template-columns:repeat(5,minmax(0,1fr)) !important; } } @media (max-width:767px){ #homeView .top-collections-strip, #homeView #topCollectionsGrid{ grid-template-columns:1fr !important; } #homeView .collection-shelf-head{ padding:11px 12px !important; } #homeView .collection-shelf-head h3{font-size:14px !important} #homeView .collection-shelf-head p{display:none !important} #homeView .shelf-track.platform-shelf-track{ display:flex !important; overflow-x:auto !important; scrollbar-width:none !important; grid-template-columns:none !important; gap:9px !important; padding:0 11px 11px !important; } #homeView .shelf-track.platform-shelf-track::-webkit-scrollbar{display:none} #homeView .shelf-track.platform-shelf-track .poster-card{ flex:0 0 112px !important; width:112px !important; } } /* Top featured collection cards use .top-collection-card in the actual homepage markup. */ #homeView .top-collection-card{ min-width:0 !important; overflow:hidden !important; border-radius:20px !important; } #homeView .top-collection-card .platform-collection-visual{ height:190px !important; min-height:190px !important; overflow:hidden !important; border-radius:18px 18px 0 0 !important; } #homeView .top-collection-card .platform-collection-main{ width:100% !important; height:100% !important; object-fit:cover !important; } #homeView .top-collection-card .top-collection-copy{ min-width:0 !important; padding:12px 14px 14px !important; } #homeView .top-collection-card .top-collection-score{ display:inline-flex !important; align-items:center !important; gap:4px !important; font-size:11px !important; margin-bottom:5px !important; } #homeView .top-collection-card .top-collection-copy h3{ font-size:15px !important; line-height:1.35 !important; margin:0 0 5px !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } #homeView .top-collection-card .top-collection-copy p{ font-size:11px !important; line-height:1.45 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } @media (max-width:767px){ #homeView .top-collection-card .platform-collection-visual{ height:175px !important; min-height:175px !important; } } /* Admin mobile usability + recommendation cover editor */ #adminView .admin-work-row{ display:grid; grid-template-columns:72px minmax(0,1fr) auto auto; align-items:center; gap:12px; min-width:0; } #adminView .admin-work-row > img{ width:72px; aspect-ratio:2/3; height:auto; object-fit:cover; border-radius:12px; background:var(--surface-3); display:block; } #adminView .admin-work-row > div:nth-child(2){min-width:0} #adminView .admin-work-row h3{ margin:0 0 4px; font-size:13px; line-height:1.45; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #adminView .admin-work-row p{margin:0;color:var(--muted);font-size:10px;line-height:1.45;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #adminView .admin-work-row > span{font-size:11px;font-weight:900;white-space:nowrap} #adminView .admin-work-row .row-actions{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end} #adminView .admin-work-row .row-actions button{min-height:34px;padding:7px 10px;border-radius:10px;white-space:nowrap} #adminView .collection-cover-fields{grid-template-columns:minmax(0,1fr) minmax(180px,220px);align-items:stretch} #adminView .collection-cover-preview-card{ display:grid; grid-template-columns:92px minmax(0,1fr); gap:12px; align-items:center; padding:10px; border:1px solid var(--line); border-radius:16px; background:var(--surface-2); min-width:0; } #adminView .collection-cover-preview-media{width:92px;aspect-ratio:2/3;border-radius:12px;overflow:hidden;background:var(--surface-3)} #adminView .collection-cover-preview-media img{width:100%;height:100%;object-fit:cover;display:block} #adminView .collection-cover-preview-copy{min-width:0;display:grid;gap:4px} #adminView .collection-cover-preview-copy strong{font-size:12px} #adminView .collection-cover-preview-copy small{font-size:9px;line-height:1.5;color:var(--muted)} #adminView .collection-cover-preview-card.is-empty .collection-cover-preview-media{display:grid;place-items:center} #adminView .collection-cover-preview-card.is-empty .collection-cover-preview-media::before{content:'+';font-size:24px;color:var(--muted)} #adminView .collection-cover-upload{display:grid;place-items:center;align-content:center;min-height:100%;margin:0} #adminView .manage-collection-row{ display:grid; grid-template-columns:58px minmax(0,1fr) auto; gap:10px; align-items:center; min-width:0; } #adminView .manage-collection-row > img{width:58px;aspect-ratio:2/3;height:auto;object-fit:cover;border-radius:10px;background:var(--surface-3)} #adminView .manage-collection-row > div:nth-child(2){min-width:0} #adminView .manage-collection-row h3{margin:0 0 4px;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #adminView .manage-collection-row .recommendation-admin-meta{display:flex;flex-wrap:wrap;gap:7px;align-items:center;color:var(--muted);font-size:9px} #adminView .manage-collection-row .row-actions{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end} #adminView .manage-collection-row .row-actions button{min-height:32px;padding:6px 9px;border-radius:9px;white-space:nowrap} @media (max-width: 767px){ #adminView .admin-head{padding-inline:0} #adminView .admin-dashboard{grid-template-columns:1fr 1fr;gap:6px} #adminView .admin-dashboard article{padding:10px;border-radius:13px} #adminView .kp-admin-layout{display:block!important} #adminView .kp-admin-sidebar{position:sticky!important;top:0!important;z-index:65!important} #adminView .kp-admin-content{width:100%;min-width:0} #adminView .admin-panel,#adminView .editor-shell,#adminView .compact-editor,#adminView .admin-recommendations-list-shell{overflow:hidden} #adminView .admin-works-list{gap:7px} #adminView .admin-work-row{ grid-template-columns:54px minmax(0,1fr); gap:9px; padding:9px!important; align-items:start; } #adminView .admin-work-row > img{width:54px;border-radius:10px} #adminView .admin-work-row > span{grid-column:2;justify-self:start;font-size:10px;margin-top:-2px} #adminView .admin-work-row .row-actions{grid-column:2;justify-content:flex-start;width:100%;padding-top:2px} #adminView .admin-work-row .row-actions button{flex:1 1 0;min-width:0} #adminView .admin-work-row h3{font-size:11px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} #adminView .admin-work-row p{font-size:9px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} #adminView .collection-cover-fields{grid-template-columns:1fr;gap:8px} #adminView .collection-cover-preview-card{grid-template-columns:68px minmax(0,1fr);padding:8px} #adminView .collection-cover-preview-media{width:68px;border-radius:9px} #adminView .collection-cover-upload{min-height:92px} #adminView .manage-collection-row{grid-template-columns:52px minmax(0,1fr);gap:8px;padding:9px!important} #adminView .manage-collection-row > img{width:52px} #adminView .manage-collection-row .row-actions{grid-column:1/-1;justify-content:stretch} #adminView .manage-collection-row .row-actions button{flex:1 1 0;min-width:0} #adminView .admin-recommendations-list-toolbar{align-items:stretch;flex-direction:column} #adminView .admin-recommendations-list-toolbar label{width:100%} #adminView .admin-recommendations-list-toolbar input,#adminView .admin-recommendations-list-toolbar select{width:100%;min-width:0} } /* ========================================================= ADMIN REDESIGN v9.6.53 — compact, responsive, low-noise ========================================================= */ #adminView{--admin-gap:12px} #adminView .admin-head{ display:flex;align-items:center;justify-content:space-between;gap:14px; padding:14px 0 12px;margin-bottom:12px;border-bottom:1px solid var(--line) } #adminView .admin-head-copy{min-width:0} #adminView .admin-head-copy .eyebrow{font-size:8px;letter-spacing:.12em} #adminView .admin-head-copy h1{font-size:clamp(24px,2.7vw,34px);line-height:1.15;margin:3px 0 0} #adminView .admin-head-copy p{margin:5px 0 0;font-size:9px;line-height:1.7;color:var(--muted);max-width:640px} #adminView .admin-head-badge{flex:none;border:1px solid var(--line);background:var(--surface);padding:7px 10px;border-radius:999px;font-size:9px;color:var(--muted)} #adminView .admin-dashboard{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:12px} #adminView .admin-dashboard article{min-height:72px;padding:11px 12px;border-radius:15px;border:1px solid var(--line);background:var(--surface);box-shadow:none} #adminView .admin-dashboard span{font-size:8px;color:var(--muted)} #adminView .admin-dashboard strong{font-size:21px;margin-top:6px} #adminView .unified-import-shortcut{width:100%;border-radius:15px;padding:12px 14px;margin-bottom:12px;text-align:start} #adminView .kp-admin-layout{display:grid;grid-template-columns:205px minmax(0,1fr);gap:12px;align-items:start} #adminView .kp-admin-sidebar{position:sticky;top:70px} #adminView .admin-tabs{display:grid;gap:3px;padding:6px;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:none} #adminView .admin-tabs button{min-height:36px;padding:7px 9px;border-radius:10px;font-size:9px} #adminView .admin-tabs button.active{background:color-mix(in srgb,var(--accent) 10%,var(--surface-2))} #adminView .admin-tabs button.active::before{inset-block:8px;width:2px} #adminView .admin-panel,#adminView .unified-card,#adminView .official-sync-shell,#adminView .editor-shell,#adminView .reports-admin-shell,#adminView .mangalek-import-card,#adminView .compact-editor,#adminView .admin-recommendations-list-shell{ padding:14px;border-radius:17px;box-shadow:none;margin-bottom:10px } #adminView .manager-toolbar,#adminView .unified-head,#adminView .official-sync-head,#adminView .reports-admin-head,#adminView .admin-recommendations-toolbar,#adminView .admin-recommendations-list-toolbar{ gap:10px;padding-bottom:10px;margin-bottom:10px } #adminView .admin-works-list,#adminView .manage-collections-list{display:grid;gap:8px} #adminView .admin-work-row,#adminView .manage-collection-row{ display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:10px;align-items:center; min-width:0;padding:9px 10px;border:1px solid var(--line);background:var(--surface-2);border-radius:13px } #adminView .admin-work-row>img,#adminView .manage-collection-row>img{width:52px;height:76px;aspect-ratio:2/3;object-fit:cover;border-radius:9px;background:var(--surface-3)} #adminView .admin-work-row h3,#adminView .manage-collection-row h3{font-size:11px;margin:0 0 3px;line-height:1.45} #adminView .admin-work-row p{font-size:8.5px;line-height:1.5;color:var(--muted)} #adminView .admin-work-row>span{font-size:10px;font-weight:900;padding:5px 7px;border-radius:8px;background:color-mix(in srgb,var(--accent) 8%,var(--surface));white-space:nowrap} #adminView .row-actions{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end} #adminView .row-actions button{min-height:30px;padding:5px 8px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--text);font-size:8.5px;font-weight:800} #adminView .row-actions button:hover{border-color:color-mix(in srgb,var(--accent) 35%,var(--line));color:var(--accent)} #adminView .row-actions .delete{color:#c34f61} #adminView .manage-collection-row .recommendation-admin-meta{font-size:8px;gap:5px} #adminView .collection-admin-layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr);gap:12px;align-items:start} #adminView .collection-admin-layout>.admin-recommendations-list-shell{min-width:0} #adminView .compact-editor{margin-bottom:0} @media (max-width: 900px){ #adminView .kp-admin-layout{grid-template-columns:1fr} #adminView .kp-admin-sidebar{position:sticky;top:0;z-index:50;padding:6px 0;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(10px)} #adminView .admin-tabs{display:flex;overflow:auto;scrollbar-width:none;direction:rtl} #adminView .admin-tabs::-webkit-scrollbar{display:none} #adminView .admin-tabs button{flex:0 0 auto;min-width:max-content;padding:7px 10px} #adminView .collection-admin-layout{grid-template-columns:1fr} } @media (max-width: 640px){ #adminView{padding-inline:8px} #adminView .admin-head{padding:11px 0;align-items:flex-start} #adminView .admin-head-copy h1{font-size:22px} #adminView .admin-head-copy p{font-size:8px;max-width:none} #adminView .admin-head-badge{font-size:8px;padding:5px 8px} #adminView .admin-dashboard{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px} #adminView .admin-dashboard article{min-height:62px;padding:9px 10px} #adminView .admin-dashboard strong{font-size:18px} #adminView .unified-import-shortcut{padding:10px 11px} #adminView .admin-panel,#adminView .unified-card,#adminView .official-sync-shell,#adminView .editor-shell,#adminView .reports-admin-shell,#adminView .mangalek-import-card,#adminView .compact-editor,#adminView .admin-recommendations-list-shell{padding:10px;border-radius:14px} #adminView .admin-work-row,#adminView .manage-collection-row{grid-template-columns:48px minmax(0,1fr);gap:8px;padding:8px} #adminView .admin-work-row>img,#adminView .manage-collection-row>img{width:48px;height:70px;border-radius:8px} #adminView .admin-work-row>span{grid-column:2;justify-self:start;font-size:9px} #adminView .admin-work-row .row-actions,#adminView .manage-collection-row .row-actions{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:5px} #adminView .row-actions button{width:100%;min-height:34px;padding:6px;font-size:9px} #adminView .manager-toolbar,#adminView .unified-head,#adminView .official-sync-head,#adminView .reports-admin-head,#adminView .admin-recommendations-toolbar,#adminView .admin-recommendations-list-toolbar{display:grid;grid-template-columns:1fr;gap:7px} #adminView .collection-cover-fields{grid-template-columns:1fr!important} #adminView .collection-admin-layout{gap:8px} } /* ========================================================= v9.6.54 — HOME HERO + QUICK TABS FINAL CLEANUP Based directly on v9.6.53-admin-redesign. ========================================================= */ /* Quick category tabs: compact, equal, no overflow */ #homeView .mi-category-tabs{ display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:10px !important; width:100% !important; overflow:visible !important; } #homeView .mi-category-tabs button{ min-width:0 !important; width:100% !important; min-height:68px !important; height:68px !important; padding:10px 14px !important; border-radius:18px !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:10px !important; box-sizing:border-box !important; overflow:hidden !important; } #homeView .mi-category-tabs .mi-quick-icon{ flex:0 0 34px !important; width:34px !important; height:34px !important; max-width:34px !important; max-height:34px !important; } #homeView .mi-category-tabs .mi-quick-icon svg, #homeView .mi-category-tabs .mi-quick-icon img{ width:70% !important; height:70% !important; } #homeView .mi-category-tabs .quick-tab-copy{ min-width:0 !important; display:grid !important; gap:1px !important; overflow:hidden !important; } #homeView .mi-category-tabs .quick-tab-copy strong{ display:block !important; font-size:13px !important; line-height:1.25 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } #homeView .mi-category-tabs .quick-tab-copy small{ display:none !important; } #homeView .mi-category-tabs button.active{ border-color:rgba(200,76,123,.72) !important; box-shadow:0 8px 24px rgba(200,76,123,.12) !important; } /* Hero: compact, centered, contained */ #homeView #featuredCollectionHero.new-hero-section{ position:relative !important; height:330px !important; min-height:330px !important; max-height:330px !important; margin:0 !important; border-radius:22px !important; overflow:hidden !important; background:#0c0d10 !important; isolation:isolate !important; } #homeView #featuredCollectionHero .new-hero-backdrop{ inset:0 !important; background-position:center !important; background-size:cover !important; opacity:.9 !important; transform:scale(1.015) !important; } #homeView #featuredCollectionHero .new-hero-shade{ inset:0 !important; background: linear-gradient(180deg,rgba(8,8,10,.05) 0%,rgba(8,8,10,.18) 36%,rgba(8,8,10,.72) 70%,rgba(8,8,10,.97) 100%) !important; } #homeView #featuredCollectionHero .hero-logo{ position:absolute !important; top:14px !important; inset-inline-end:18px !important; z-index:5 !important; padding:0 !important; margin:0 !important; font-size:11px !important; letter-spacing:1.2px !important; text-shadow:0 2px 10px rgba(0,0,0,.65) !important; } #homeView #featuredCollectionHero .hero-content-overlay{ position:absolute !important; inset:0 !important; z-index:4 !important; width:100% !important; height:100% !important; min-height:0 !important; padding:0 24px 20px !important; display:flex !important; align-items:center !important; justify-content:flex-end !important; box-sizing:border-box !important; text-align:center !important; } #homeView #featuredCollectionHero .hero-manhwa-info{ width:min(760px,100%) !important; min-width:0 !important; margin:0 auto !important; display:flex !important; flex-direction:column !important; align-items:center !important; overflow:visible !important; } #homeView #featuredCollectionHero .exact-feature-label{ display:none !important; } #homeView #featuredCollectionHero .hero-main-title{ width:100% !important; max-width:760px !important; margin:0 0 5px !important; padding:0 !important; font-size:clamp(24px,3.1vw,38px) !important; line-height:1.15 !important; font-weight:900 !important; white-space:normal !important; overflow-wrap:anywhere !important; text-shadow:0 3px 16px rgba(0,0,0,.8) !important; } #homeView #featuredCollectionHero .hero-description{ width:min(640px,100%) !important; max-width:100% !important; margin:0 auto 9px !important; font-size:11px !important; line-height:1.5 !important; color:rgba(255,255,255,.8) !important; overflow:hidden !important; display:-webkit-box !important; -webkit-box-orient:vertical !important; -webkit-line-clamp:2 !important; } #homeView #featuredCollectionHero .hero-badges-row{ display:flex !important; align-items:center !important; justify-content:center !important; gap:8px !important; width:100% !important; margin:0 0 7px !important; padding:0 !important; flex-wrap:nowrap !important; overflow:visible !important; } #homeView #featuredCollectionHero .hero-stat-badge{ flex:0 0 auto !important; width:122px !important; max-width:122px !important; min-width:122px !important; height:34px !important; min-height:34px !important; padding:0 10px !important; border:1px solid rgba(255,255,255,.18) !important; border-radius:12px !important; background:rgba(9,10,13,.72) !important; backdrop-filter:blur(10px) !important; box-sizing:border-box !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:5px !important; white-space:nowrap !important; overflow:hidden !important; } #homeView #featuredCollectionHero .hero-stat-badge .hero-stat-icon{ flex:0 0 20px !important; width:20px !important; height:20px !important; display:grid !important; place-items:center !important; border-radius:7px !important; background:rgba(200,76,123,.16) !important; color:#e34b8c !important; font-size:10px !important; } #homeView #featuredCollectionHero .hero-stat-badge b{ display:inline-block !important; max-width:48px !important; margin:0 !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; font-size:14px !important; line-height:1 !important; color:#fff !important; } #homeView #featuredCollectionHero .hero-stat-badge>span:last-child{ font-size:9px !important; color:rgba(255,255,255,.62) !important; flex:0 0 auto !important; } #homeView #featuredCollectionHero .hero-pagination-dots{ position:static !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:7px !important; min-height:20px !important; margin:0 !important; padding:0 !important; } #homeView #featuredCollectionHero .hero-pagination-dots .feature-counter-current, #homeView #featuredCollectionHero .hero-pagination-dots .feature-counter-total{ font-size:11px !important; line-height:1 !important; color:#fff !important; font-weight:900 !important; } #homeView #featuredCollectionHero .hero-pagination-dots .feature-counter-sep{ font-size:10px !important; color:rgba(255,255,255,.48) !important; } #homeView #featuredCollectionHero .hero-feature-posters{ display:none !important; } @media (max-width:767px){ #homeView .mi-category-tabs{ gap:7px !important; } #homeView .mi-category-tabs button{ min-height:58px !important; height:58px !important; padding:8px 7px !important; gap:6px !important; border-radius:15px !important; } #homeView .mi-category-tabs .mi-quick-icon{ flex-basis:29px !important; width:29px !important; height:29px !important; } #homeView .mi-category-tabs .quick-tab-copy strong{ font-size:11px !important; } #homeView #featuredCollectionHero.new-hero-section{ height:300px !important; min-height:300px !important; max-height:300px !important; border-radius:18px !important; } #homeView #featuredCollectionHero .hero-logo{ top:10px !important; inset-inline-end:12px !important; font-size:9px !important; } #homeView #featuredCollectionHero .hero-content-overlay{ padding:0 14px 14px !important; } #homeView #featuredCollectionHero .hero-main-title{ font-size:22px !important; max-width:100% !important; } #homeView #featuredCollectionHero .hero-description{ font-size:9.5px !important; margin-bottom:7px !important; } #homeView #featuredCollectionHero .hero-badges-row{ gap:6px !important; } #homeView #featuredCollectionHero .hero-stat-badge{ width:108px !important; max-width:108px !important; min-width:108px !important; height:31px !important; min-height:31px !important; padding:0 8px !important; border-radius:10px !important; } #homeView #featuredCollectionHero .hero-stat-badge .hero-stat-icon{ flex-basis:18px !important; width:18px !important; height:18px !important; } #homeView #featuredCollectionHero .hero-stat-badge b{ font-size:12px !important; } } /* ========================================================= v9.6.55 — Admin + Completed Library redesign ========================================================= */ /* ---------- Completed Library ---------- */ #completedView{ width:min(1240px,calc(100% - 48px)); margin-inline:auto; padding-bottom:96px; } #completedView .completed-page-head{ position:relative; overflow:hidden; margin-top:18px; padding:26px 28px 24px!important; border:1px solid var(--line); border-radius:24px; background: radial-gradient(circle at 12% 10%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 32%), linear-gradient(135deg,color-mix(in srgb,var(--surface) 95%,#000),var(--surface)); } #completedView .completed-page-head::after{ content:""; position:absolute; width:180px;height:180px; border-radius:50%; inset-inline-end:-70px;top:-80px; border:1px solid color-mix(in srgb,var(--accent) 18%,transparent); pointer-events:none; } #completedView .completed-page-head>div{position:relative;z-index:1} #completedView .completed-page-head .eyebrow{ color:var(--accent); font-size:9px; font-weight:900; } #completedView .completed-page-head h1{ margin:5px 0 6px!important; font-size:clamp(28px,3.5vw,42px)!important; line-height:1.15; } #completedView .completed-page-head p{ margin:0; max-width:700px; font-size:10px; line-height:1.8; color:var(--muted); } #completedView .completed-selected-genres{ display:flex; flex-wrap:wrap; gap:7px; margin:14px 0 6px; } #completedView .completed-selected-genres:not(.hidden):empty{display:none} #completedView .completed-selected-genres span{ display:inline-flex; align-items:center; min-height:28px; padding:0 11px; border-radius:999px; border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line)); background:color-mix(in srgb,var(--accent) 7%,var(--surface)); color:var(--text); font-size:9px; font-weight:800; } #completedView .completed-page-zone{padding-top:12px!important} #completedView .completed-genre-shelf{ padding-top:26px!important; } #completedView .completed-genre-header{ margin-bottom:12px!important; padding-inline:2px; } #completedView .completed-genre-header .eyebrow{ color:var(--accent); font-size:8px; font-weight:900; } #completedView .completed-genre-header h2{ font-size:21px!important; margin:4px 0 3px!important; letter-spacing:-.35px; } #completedView .completed-genre-header p{ margin:0!important; font-size:9px!important; color:var(--muted)!important; } #completedView .completed-genre-header button{ border:1px solid var(--line)!important; background:var(--surface)!important; color:var(--muted)!important; padding:8px 11px!important; border-radius:10px!important; font-size:8px!important; } #completedView .completed-genre-header button:hover{ color:var(--text)!important; border-color:color-mix(in srgb,var(--accent) 30%,var(--line))!important; } #completedView .completed-genre-rail{ display:grid!important; grid-template-columns:repeat(6,minmax(0,1fr)); gap:16px!important; overflow:visible!important; padding:0 1px 6px!important; } #completedView .completed-genre-rail .platform-poster-card, #completedView .completed-genre-rail .poster-card{ min-width:0!important; } #completedView .completed-genre-rail .poster-cover{ aspect-ratio:5/7!important; border-radius:14px!important; } #completedView .completed-genre-rail .poster-copy{ padding:9px 2px 0!important; } #completedView .completed-genre-rail .poster-copy h3{ font-size:11px!important; line-height:1.5!important; margin:3px 0 4px!important; } #completedView .completed-genre-rail .poster-copy p{ font-size:8px!important; } #completedView .completed-genre-rail .poster-meta{ margin-top:6px!important; } #completedView .completed-page-zone .home-preference-empty{ margin-top:22px; min-height:180px; display:grid; place-content:center; gap:8px; text-align:center; border:1px dashed var(--line); border-radius:18px; background:color-mix(in srgb,var(--surface) 92%,transparent); } #completedView .completed-page-zone .home-preference-empty.hidden{display:none!important} #completedView .completed-page-zone .home-preference-empty strong{font-size:17px} #completedView .completed-page-zone .home-preference-empty span{font-size:9px;color:var(--muted)} /* ---------- Admin ---------- */ #adminView{ width:min(1240px,calc(100% - 48px)); margin-inline:auto; padding-bottom:96px; } #adminView .admin-head{ position:relative; overflow:hidden; padding:24px 26px!important; margin-top:16px; border:1px solid var(--line); border-radius:24px; background: linear-gradient(135deg,color-mix(in srgb,var(--surface) 96%,#000),var(--surface)), radial-gradient(circle at 82% 20%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 34%); } #adminView .admin-head::before{ content:""; position:absolute; width:220px;height:220px; border-radius:50%; inset-inline-end:-100px;top:-110px; border:1px solid color-mix(in srgb,var(--accent) 20%,transparent); pointer-events:none; } #adminView .admin-head-copy{position:relative;z-index:1;min-width:0} #adminView .admin-head-copy .eyebrow{ font-size:8px; font-weight:900; letter-spacing:.12em; color:var(--accent); } #adminView .admin-head-copy h1{ margin:5px 0 6px!important; font-size:clamp(26px,3.4vw,38px)!important; line-height:1.1; } #adminView .admin-head-copy p{ margin:0!important; max-width:650px; font-size:10px!important; line-height:1.75!important; color:var(--muted)!important; } #adminView .admin-head-badge{ position:relative; z-index:1; flex:none; min-height:34px; padding:0 11px!important; border:1px solid var(--line)!important; border-radius:999px!important; background:var(--surface)!important; color:var(--muted)!important; font-size:9px!important; } #adminView .admin-dashboard{ grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:9px!important; margin:12px 0 14px!important; } #adminView .admin-dashboard article{ min-height:78px!important; padding:12px 13px!important; border:1px solid var(--line)!important; border-radius:17px!important; background:var(--surface)!important; box-shadow:none!important; } #adminView .admin-dashboard span{ font-size:8px!important; color:var(--muted)!important; } #adminView .admin-dashboard strong{ margin-top:7px!important; font-size:22px!important; line-height:1!important; color:var(--text)!important; } #adminView .unified-import-shortcut{ display:grid; gap:3px; padding:14px 16px!important; margin-bottom:12px!important; border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line))!important; border-radius:18px!important; background:color-mix(in srgb,var(--accent) 5%,var(--surface))!important; text-align:right; box-shadow:none!important; } #adminView .unified-import-shortcut span{ font-size:7px; color:var(--accent); font-weight:900; letter-spacing:.12em; } #adminView .unified-import-shortcut strong{font-size:12px} #adminView .unified-import-shortcut small{font-size:8px;color:var(--muted)} #adminView .kp-admin-layout{ grid-template-columns:190px minmax(0,1fr)!important; gap:12px!important; } #adminView .kp-admin-sidebar{top:76px!important} #adminView .admin-tabs{ padding:6px!important; gap:3px!important; border:1px solid var(--line)!important; border-radius:17px!important; background:var(--surface)!important; box-shadow:none!important; } #adminView .admin-tabs button{ min-height:38px!important; padding:8px 10px!important; border-radius:10px!important; font-size:8.5px!important; font-weight:800!important; } #adminView .admin-tabs button.active{ background:color-mix(in srgb,var(--accent) 10%,var(--surface-2))!important; color:var(--accent)!important; } #adminView .admin-tabs button.active::before{width:2px!important} #adminView .admin-panel, #adminView .unified-card, #adminView .official-sync-shell, #adminView .editor-shell, #adminView .reports-admin-shell, #adminView .mangalek-import-card, #adminView .compact-editor, #adminView .admin-recommendations-list-shell{ margin-bottom:10px!important; padding:14px!important; border:1px solid var(--line)!important; border-radius:18px!important; background:var(--surface)!important; box-shadow:none!important; } #adminView .manager-toolbar{ padding-bottom:10px!important; margin-bottom:10px!important; border-bottom:1px solid var(--line); } #adminView .manager-toolbar label{ min-height:38px; border:1px solid var(--line); border-radius:11px; background:var(--surface-2); padding-inline:10px; } #adminView .manager-toolbar input{font-size:9px!important} #adminView .manager-toolbar .ink-button{min-height:38px;border-radius:11px;padding-inline:13px} #adminView .admin-works-list, #adminView .manage-collections-list{gap:7px!important} #adminView .admin-work-row, #adminView .manage-collection-row{ grid-template-columns:56px minmax(0,1fr) 86px minmax(150px,auto)!important; gap:10px!important; align-items:center; min-width:0; padding:8px!important; border:1px solid var(--line)!important; border-radius:14px!important; background:var(--surface-2)!important; } #adminView .admin-work-row>img, #adminView .manage-collection-row>img{ width:56px!important; height:76px!important; aspect-ratio:2/3!important; object-fit:cover!important; border-radius:9px!important; } #adminView .admin-work-row h3, #adminView .manage-collection-row h3{ margin:0 0 3px!important; font-size:10px!important; line-height:1.5!important; } #adminView .admin-work-row p{ margin:0!important; font-size:8px!important; color:var(--muted)!important; line-height:1.55!important; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; } #adminView .admin-work-row>span{ justify-self:start; padding:5px 7px!important; border-radius:8px!important; background:color-mix(in srgb,var(--accent) 8%,var(--surface))!important; color:var(--muted)!important; font-size:8px!important; } #adminView .row-actions{ display:flex!important; flex-wrap:wrap!important; justify-content:flex-end!important; gap:5px!important; } #adminView .row-actions button{ min-height:32px!important; padding:6px 9px!important; border:1px solid var(--line)!important; border-radius:9px!important; background:var(--surface)!important; color:var(--text)!important; font-size:7.5px!important; } #adminView .row-actions button:hover{ border-color:color-mix(in srgb,var(--accent) 28%,var(--line))!important; } #adminView .row-actions .delete{color:var(--danger)!important} #adminView .admin-recommendations-list-shell, #adminView .admin-recommendations-toolbar, #adminView .admin-recommendations-list-toolbar{min-width:0} @media (max-width:1100px){ #completedView .completed-genre-rail{grid-template-columns:repeat(5,minmax(0,1fr))} #adminView .kp-admin-layout{grid-template-columns:1fr!important} #adminView .kp-admin-sidebar{position:sticky!important;top:64px!important;z-index:45} #adminView .admin-tabs{display:flex!important;overflow-x:auto!important;scrollbar-width:none!important} #adminView .admin-tabs::-webkit-scrollbar{display:none} #adminView .admin-tabs button{flex:0 0 auto!important;min-width:max-content!important} } @media (max-width:780px){ #completedView,#adminView{width:calc(100% - 28px);padding-bottom:90px} #completedView .completed-page-head{margin-top:12px;padding:19px 17px 18px!important;border-radius:18px} #completedView .completed-page-head h1{font-size:28px!important} #completedView .completed-page-head p{font-size:8.5px} #completedView .completed-selected-genres{margin-top:10px} #completedView .completed-selected-genres span{min-height:25px;font-size:8px;padding-inline:9px} #completedView .completed-genre-shelf{padding-top:20px!important} #completedView .completed-genre-header{align-items:end!important;margin-bottom:10px!important} #completedView .completed-genre-header h2{font-size:18px!important} #completedView .completed-genre-header p{font-size:8px!important} #completedView .completed-genre-header button{padding:7px 9px!important;font-size:7px!important} #completedView .completed-genre-rail{ display:flex!important; overflow-x:auto!important; grid-template-columns:none!important; gap:10px!important; padding-bottom:8px!important; scroll-snap-type:x proximity; scrollbar-width:none; } #completedView .completed-genre-rail::-webkit-scrollbar{display:none} #completedView .completed-genre-rail .platform-poster-card, #completedView .completed-genre-rail .poster-card{ flex:0 0 132px!important; scroll-snap-align:start; } #completedView .completed-genre-rail .poster-cover{border-radius:11px!important} #completedView .completed-genre-rail .poster-copy h3{font-size:10px!important} #adminView .admin-head{padding:18px 17px!important;margin-top:11px;border-radius:18px} #adminView .admin-head-copy h1{font-size:24px!important} #adminView .admin-head-copy p{font-size:8.5px!important} #adminView .admin-head-badge{display:none!important} #adminView .admin-dashboard{grid-template-columns:1fr 1fr!important;gap:6px!important} #adminView .admin-dashboard article{min-height:66px!important;padding:10px!important;border-radius:13px!important} #adminView .admin-dashboard span{font-size:7px!important} #adminView .admin-dashboard strong{font-size:19px!important} #adminView .unified-import-shortcut{padding:11px 12px!important;border-radius:14px!important} #adminView .unified-import-shortcut strong{font-size:10px!important} #adminView .kp-admin-sidebar{top:60px!important;margin-inline:-2px} #adminView .admin-tabs{padding:5px!important;border-radius:13px!important;gap:4px!important} #adminView .admin-tabs button{min-height:34px!important;padding:6px 9px!important;font-size:7.5px!important} #adminView .admin-tabs button.active::before{display:none!important} #adminView .admin-panel, #adminView .unified-card, #adminView .official-sync-shell, #adminView .editor-shell, #adminView .reports-admin-shell, #adminView .mangalek-import-card, #adminView .compact-editor, #adminView .admin-recommendations-list-shell{ padding:10px!important;border-radius:14px!important; } #adminView .manager-toolbar{display:grid!important;grid-template-columns:1fr!important;gap:7px!important} #adminView .manager-toolbar label,#adminView .manager-toolbar .ink-button{width:100%!important} #adminView .admin-work-row, #adminView .manage-collection-row{ grid-template-columns:48px minmax(0,1fr)!important; gap:8px!important; padding:7px!important; } #adminView .admin-work-row>img, #adminView .manage-collection-row>img{ width:48px!important;height:68px!important;border-radius:8px!important; } #adminView .admin-work-row>span{grid-column:2;justify-self:start;font-size:7.5px!important;margin-top:0!important} #adminView .admin-work-row .row-actions, #adminView .manage-collection-row .row-actions{ grid-column:1/-1!important; justify-content:stretch!important; width:100%; } #adminView .row-actions button{flex:1 1 0!important;min-width:0!important;font-size:7px!important} } /* removed old donation styles */\n.library-content-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}\n.library-main-column{min-width:0}\n.library-donation-card{position:sticky;top:18px;overflow:hidden;border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--accent) 7%,var(--surface)));border-radius:22px;padding:20px;box-shadow:var(--shadow-sm)}\n.donation-card-glow{position:absolute;width:140px;height:140px;right:-55px;top:-55px;border-radius:50%;background:color-mix(in srgb,var(--accent) 22%,transparent);filter:blur(10px);pointer-events:none}\n.donation-card-icon{position:relative;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 15%,var(--surface-2));color:var(--accent);font-size:25px;font-weight:900;margin-bottom:14px}\n.library-donation-card .eyebrow{position:relative}\n.library-donation-card h2{position:relative;font-size:20px;line-height:1.35;margin:7px 0 9px}\n.library-donation-card>p{position:relative;color:var(--muted);font-size:12px;line-height:1.8;margin:0 0 16px}\n.donation-network{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:13px;background:var(--surface-2);font-size:11px}\n.donation-network strong{color:var(--accent);font-size:12px}\n.donation-address-wrap{margin-top:10px;display:grid;gap:7px}\n.donation-address-wrap>span{font-size:10px;color:var(--muted);font-weight:800}\n.donation-address-wrap code{display:block;direction:ltr;text-align:left;word-break:break-all;font:700 10px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;padding:10px;border-radius:12px;background:var(--bg);border:1px solid var(--line);color:var(--text)}\n.donation-copy-button{width:100%;min-height:40px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);color:var(--text);font-weight:800;cursor:pointer}\n.donation-copy-button:not(:disabled):hover{border-color:var(--accent);color:var(--accent)}\n.donation-copy-button:disabled{opacity:.5;cursor:not-allowed}\n.donation-warning{display:block;color:var(--muted);font-size:9px;line-height:1.7;margin-top:10px}\n.donation-status{min-height:18px;margin-top:7px;color:var(--accent);font-size:10px;font-weight:800}\n@media(max-width:980px){.library-content-layout{grid-template-columns:minmax(0,1fr) 260px;gap:14px}.library-donation-card{padding:16px}}\n@media(max-width:760px){.library-content-layout{display:flex;flex-direction:column}.library-main-column{width:100%}.library-donation-card{position:relative;top:auto;width:100%;box-sizing:border-box;order:2}.library-donation-card h2{font-size:18px}.donation-address-wrap code{font-size:9px}}\n /* v9.6.59 — premium USDT donation panel */ .library-content-layout{ display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,340px); gap:22px; align-items:start; } .library-main-column{min-width:0} .library-donation-card{ position:sticky; top:92px; isolation:isolate; overflow:hidden; border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line)); border-radius:24px; padding:22px; background: radial-gradient(circle at 100% 0%, color-mix(in srgb,var(--accent) 18%,transparent) 0, transparent 42%), linear-gradient(155deg, color-mix(in srgb,var(--surface) 95%, var(--accent)) 0%, var(--surface) 55%, color-mix(in srgb,var(--surface) 92%, #020617) 100%); box-shadow:0 22px 55px rgba(0,0,0,.18); } .library-donation-card::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.06); } .donation-card-bg{position:absolute;inset:0;pointer-events:none;z-index:-1;overflow:hidden} .donation-card-bg span,.donation-card-bg i{ position:absolute;display:block;border-radius:50%;filter:blur(24px);opacity:.22; } .donation-card-bg span{width:130px;height:130px;right:-60px;top:-60px;background:var(--accent)} .donation-card-bg i{width:90px;height:90px;left:-45px;bottom:30px;background:color-mix(in srgb,var(--accent2) 60%, var(--accent))} .donation-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;position:relative} .donation-card-icon{ width:48px;height:48px;border-radius:16px;display:grid;place-items:center; background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 20%,var(--surface2)),color-mix(in srgb,var(--accent) 6%,var(--surface2))); border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line)); color:var(--accent);font-size:26px;font-weight:900;box-shadow:0 12px 28px rgba(0,0,0,.12) } .donation-kicker{display:flex;align-items:center;gap:8px;min-width:0} .donation-kicker .eyebrow{margin:0} .donation-live-dot{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:999px;border:1px solid color-mix(in srgb,var(--accent2) 25%,var(--line));background:color-mix(in srgb,var(--accent2) 8%,var(--surface2));color:var(--accent2);font-size:8px;font-weight:800;white-space:nowrap} .donation-live-dot::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent2);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent2) 12%,transparent)} .library-donation-card h2{position:relative;font-size:23px;line-height:1.3;margin:18px 0 10px;letter-spacing:-.3px} .library-donation-card .donation-lead{position:relative;color:var(--muted);font-size:11px;line-height:2;margin:0} .donation-cta-note{display:flex;align-items:center;gap:9px;margin:16px 0;padding:12px 13px;border-radius:15px;border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line));background:color-mix(in srgb,var(--accent) 6%,var(--surface2));font-size:9px;line-height:1.7} .donation-cta-icon{width:26px;height:26px;display:grid;place-items:center;border-radius:9px;background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent);font-size:12px;flex:0 0 auto} .donation-network-row{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px} .donation-network-row>div{padding:11px 12px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--surface2) 72%,transparent)} .donation-network-row span,.donation-address-label span{display:block;color:var(--muted);font-size:8px;font-weight:700} .donation-network-row strong{display:block;margin-top:4px;font-size:13px;color:var(--text)} .donation-network-row>div:last-child strong{color:var(--accent)} .donation-address-block{margin-top:12px} .donation-address-label{display:flex;justify-content:space-between;align-items:end;gap:8px;margin-bottom:7px} .donation-address-label small{font-size:8px;color:var(--muted)} .donation-address-block code{ display:block;direction:ltr;text-align:left;word-break:break-all; font:700 10px/1.75 ui-monospace,SFMono-Regular,Menlo,monospace; padding:12px;border-radius:14px;border:1px solid color-mix(in srgb,var(--accent) 17%,var(--line)); background:rgba(0,0,0,.16);color:var(--text) } .donation-copy-button{ width:100%;min-height:44px;margin-top:9px;border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line)); border-radius:13px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 17%,var(--surface2)),color-mix(in srgb,var(--accent) 7%,var(--surface2))); color:var(--text);font-weight:900;cursor:pointer;transition:.2s ease } .donation-copy-button:hover:not(:disabled){transform:translateY(-1px);border-color:var(--accent);color:var(--accent)} .donation-copy-button:active:not(:disabled){transform:translateY(0)} .donation-copy-button:disabled{opacity:.45;cursor:not-allowed} .donation-status{min-height:19px;margin-top:8px;color:var(--accent);font-size:9px;font-weight:900;text-align:center} .donation-warning{display:flex;align-items:flex-start;gap:8px;margin-top:10px;padding-top:11px;border-top:1px solid var(--line);color:var(--muted);font-size:8px;line-height:1.8} .donation-warning>span{width:18px;height:18px;display:grid;place-items:center;border-radius:7px;background:rgba(245,158,11,.12);color:#f59e0b;font-weight:900;flex:0 0 auto} .donation-warning p{margin:0} .donation-warning strong{color:var(--text)} @media(max-width:980px){ .library-content-layout{grid-template-columns:minmax(0,1fr) minmax(280px,310px);gap:16px} .library-donation-card{padding:18px} .library-donation-card h2{font-size:20px} } @media(max-width:760px){ .library-content-layout{display:flex;flex-direction:column;gap:18px} .library-main-column{width:100%} .library-donation-card{position:relative;top:auto;width:100%;order:2;padding:18px;border-radius:20px} .donation-card-head{align-items:flex-start} .donation-kicker{flex-direction:column;align-items:flex-end;gap:5px} .library-donation-card h2{font-size:19px} .library-donation-card .donation-lead{font-size:10px;line-height:1.9} .donation-address-block code{font-size:9px} }