/*
 Manhwa Index v8.2.7 — Unified Design System
 Visual-only layer. No DOM relocation, no feature removal, no API/data changes.
 Design language derived from the approved work-detail and admin previews.
*/
:root{
  --bg:#070a10;
  --surface:#0d1119;
  --surface2:#111620;
  --surface3:#151b27;
  --text:#f4f6fb;
  --muted:#8f98aa;
  --line:rgba(255,255,255,.07);
  --accent:#8b5cf6;
  --accent2:#a78bfa;
  --danger:#fb7185;
  --success:#32d296;
  --warning:#fbbf24;
  --shadow:0 12px 30px rgba(0,0,0,.18);
  --radius:20px;
  --mi-card-radius:20px;
  --mi-inner-radius:15px;
  --mi-button-radius:13px;
  --mi-header:#090d14;
  --mi-input:#111620;
}
body.light{
  --bg:#f6f7fa;
  --surface:#ffffff;
  --surface2:#f1f3f7;
  --surface3:#e8ebf1;
  --text:#151923;
  --muted:#6f7888;
  --line:rgba(19,25,35,.09);
  --accent:#7c3aed;
  --accent2:#8b5cf6;
  --danger:#e44c64;
  --success:#159b6b;
  --warning:#b77906;
  --shadow:0 12px 30px rgba(23,30,43,.08);
  --mi-header:#ffffff;
  --mi-input:#f3f5f8;
}
html,body{background:var(--bg)!important;color:var(--text)!important}
body{font-family:"Cairo","Almarai",Tahoma,Arial,sans-serif!important}
*{scrollbar-color:var(--surface3) transparent}
::selection{background:rgba(139,92,246,.28);color:var(--text)}

/* ---------- Shared primitives ---------- */
.site-header,
.exact-platform-header,
.tappy-detail-header,
#adminView .admin-tabs,
.mobile-nav{
  border-color:var(--line)!important;
}
.site-header,
.exact-platform-header{
  background:color-mix(in srgb,var(--mi-header) 94%,transparent)!important;
  box-shadow:0 8px 28px rgba(0,0,0,.10)!important;
  backdrop-filter:blur(14px)!important;
  -webkit-backdrop-filter:blur(14px)!important;
}
body.light .site-header,
body.light .exact-platform-header{background:rgba(255,255,255,.94)!important}

.primary-button,.exact-solid-button,.ink-button,.primary,.primary-action,
#adminView .primary-button,#adminView .ink-button{
  background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 72%,#6366f1))!important;
  color:#fff!important;border:1px solid rgba(167,139,250,.18)!important;
  border-radius:var(--mi-button-radius)!important;box-shadow:none!important;
}
.secondary-button,.exact-outline-button,.follow-button,.back-button,.line-button,.secondary,
#adminView .secondary-button,#adminView .line-button{
  background:var(--surface2)!important;color:var(--text)!important;
  border:1px solid var(--line)!important;border-radius:var(--mi-button-radius)!important;box-shadow:none!important;
}
.primary-button:hover,.exact-solid-button:hover,.ink-button:hover,
.secondary-button:hover,.exact-outline-button:hover,.follow-button:hover,.back-button:hover{
  transform:translateY(-1px);filter:brightness(1.06)
}
.icon-button,.exact-header-icon,.tappy-header-icon,.tappy-back-button,.tappy-header-report-button,
.profile-button,.close-button,.icon-btn{
  background:var(--surface)!important;color:var(--text)!important;border:1px solid var(--line)!important;
  border-radius:13px!important;box-shadow:none!important;
}
input,textarea,select,
.filter-bar input,.filter-bar select,.api-search-card input,
.discover-search-field input,.discover-sort-field select,
.advanced-filter-grid input,.advanced-filter-grid select,
#adminView input,#adminView textarea,#adminView select{
  background:var(--mi-input)!important;color:var(--text)!important;
  border:1px solid var(--line)!important;border-radius:13px!important;box-shadow:none!important;
}
input:focus,textarea:focus,select:focus{
  outline:2px solid color-mix(in srgb,var(--accent) 20%,transparent)!important;
  border-color:color-mix(in srgb,var(--accent) 72%,var(--line))!important;
}

/* Shared cards/surfaces across all views without changing dimensions/placement */
.filter-bar,.api-search-card,.advanced-filters-panel,.empty-state,.inline-status,
.recommendations-directory-toolbar,.recommendations-directory-summary,
.home-report-strip,.collection-card,.collection-editorial-card,.ranked-card,
.recommendation-shelf-card,.top-collection-card,.personalized-recommendation-card,
.profile-sheet,.sheet-card,.auth-modal,.welcome-card,
.notification-sheet,.report-modal-card,.modal-card,.dialog-card,
.manager-toolbar,.editor-shell,.editor-block,.unified-card,.mangalek-import-card,
.mu-import-shell,.reports-admin-shell,.collection-admin-shell,.collection-editor-shell,
.admin-recommendations-list-shell{
  background:var(--surface)!important;border:1px solid var(--line)!important;
  border-radius:var(--mi-card-radius)!important;box-shadow:var(--shadow)!important;color:var(--text)!important;
}

/* ---------- Header / global nav ---------- */
.exact-main-tabs button,.desktop-nav button{
  color:var(--muted)!important;border-radius:12px!important;background:transparent!important;
}
.exact-main-tabs button.active,.exact-main-tabs button:hover,
.desktop-nav button.active,.desktop-nav button:hover{
  color:var(--text)!important;background:var(--surface3)!important;
}
.brand-mark,.avatar,.dock-profile-avatar{background:var(--accent)!important;box-shadow:none!important}
.search-overlay{background:rgba(5,7,11,.96)!important;backdrop-filter:blur(14px)!important}
.search-overlay input{border-color:var(--accent)!important}

/* ---------- HOME / DISCOVERY ---------- */
#homeView,.exact-discover-page{background:transparent!important}
.exact-page-top h1,.tappy-home-heading h1{color:var(--text)!important}
.tappy-home-kicker,.eyebrow,.section-kicker,.exact-feature-label{color:var(--accent2)!important}

.mi-quick-tabs button,.mi-category-tabs button{
  background:var(--surface)!important;border:1px solid var(--line)!important;
  border-radius:17px!important;color:var(--muted)!important;box-shadow:none!important;
}
.mi-quick-tabs button:hover,.mi-category-tabs button:hover,
.mi-quick-tabs button.active,.mi-category-tabs button.active{
  background:var(--surface3)!important;border-color:rgba(139,92,246,.24)!important;color:var(--text)!important;
}
.mi-quick-icon{background:var(--surface2)!important;color:var(--accent2)!important;border:1px solid var(--line)!important}
.mi-quick-tabs button.active .mi-quick-icon{background:rgba(139,92,246,.13)!important;border-color:rgba(139,92,246,.22)!important;color:#c4b5fd!important}

.exact-feature-carousel,.discover-feature,.platform-feature{
  background:#0a0e16!important;border:1px solid var(--line)!important;
  border-radius:22px!important;box-shadow:var(--shadow)!important;
}
body.light .exact-feature-carousel,body.light .discover-feature,body.light .platform-feature{background:#222734!important}
.exact-feature-shade,.discover-feature-overlay,.platform-feature .discover-feature-overlay{
  background:linear-gradient(90deg,rgba(7,10,16,.97) 8%,rgba(7,10,16,.76) 52%,rgba(7,10,16,.22)),linear-gradient(0deg,rgba(7,10,16,.50),transparent 66%)!important;
}
.exact-feature-copy h2,.feature-copy h2{color:#fff!important}
.exact-feature-copy p,.feature-copy>p{color:#c9ced8!important}
.exact-feature-meta span,.feature-stats span{background:rgba(13,17,25,.66)!important;border:1px solid rgba(255,255,255,.09)!important;color:#e8ebf2!important}
.feature-timer{background:rgba(255,255,255,.07)!important}
.feature-timer span{background:var(--accent)!important}

.exact-section-header,.discover-section-heading{border-color:var(--line)!important}
.exact-section-header h2,.discover-section-heading h2{color:var(--text)!important}
.exact-section-header p,.discover-section-heading p{color:var(--muted)!important}
.exact-section-header>button,.plain-link{color:var(--muted)!important}
.exact-section-header>button:hover,.plain-link:hover{color:var(--accent2)!important}

.poster-cover,.platform-poster-card .poster-cover,.shelf-work-cover,.recommendation-thumb,
.top-collection-cover,.collection-card-cover{
  background:var(--surface2)!important;border:1px solid var(--line)!important;border-radius:14px!important;
}
.poster-card:hover .poster-cover,.platform-poster-card:hover .poster-cover,.shelf-work-card:hover .shelf-work-cover{
  border-color:rgba(139,92,246,.30)!important;box-shadow:0 10px 28px rgba(0,0,0,.16)!important;
}
.poster-status-badge,.poster-score,.rank-number,.top-collection-rank{
  background:rgba(9,13,20,.86)!important;color:#fff!important;border:1px solid rgba(255,255,255,.08)!important;
}
.poster-follow,.poster-actions button,.inline-follow{
  background:rgba(9,13,20,.82)!important;color:#fff!important;border:1px solid rgba(255,255,255,.10)!important;
}
.poster-follow.following,.poster-actions button.following,.inline-follow.following{background:var(--accent)!important;color:#fff!important}
.poster-copy h3,.shelf-work-card h3,.top-collection-copy h3,.collection-card-copy h3,.recommendation-shelf-top h3{color:var(--text)!important}
.poster-copy p,.shelf-work-card p,.top-collection-copy p,.collection-card-copy p,.recommendation-shelf-top p{color:var(--muted)!important}
.poster-copy span,.collection-card-meta,.recommendation-shelf-kicker{color:var(--accent2)!important}

.top-collection-card,.collection-card,.recommendation-shelf-card,.platform-collection-card{
  background:var(--surface)!important;border-color:var(--line)!important;border-radius:18px!important;
}
.collection-shelf,.platform-shelf{
  background:transparent!important;border-color:var(--line)!important;
}
.collection-shelf-head,.platform-shelf .collection-shelf-head{color:var(--text)!important}
.shelf-avatar,.collection-icon{background:var(--surface2)!important;color:var(--accent2)!important;border:1px solid var(--line)!important}
.shelf-open-button{color:var(--muted)!important}.shelf-open-button:hover{color:var(--accent2)!important}
.shelf-progress{background:var(--surface2)!important}.shelf-progress span{background:var(--accent)!important}

.personalized-recommendations-grid>*{background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:18px!important}
.home-preference-empty,.quick-category-empty{background:var(--surface)!important;border:1px dashed var(--line)!important;color:var(--muted)!important;border-radius:18px!important}
.home-report-strip{background:var(--surface)!important}
.home-report-strip-icon{background:rgba(139,92,246,.10)!important;color:#c4b5fd!important;border:1px solid rgba(139,92,246,.16)!important}

/* ---------- LIBRARY / GROUPS / COLLECTION DETAIL ---------- */
.page-head,.platform-page-head,.completed-page-head{border-color:var(--line)!important}
.page-head h1,.platform-page-head h1,.completed-page-head h1{color:var(--text)!important}
.catalog-tabs button,.following-tabs button,.library-state-tabs button{
  background:var(--surface)!important;border:1px solid var(--line)!important;color:var(--muted)!important;border-radius:12px!important;
}
.catalog-tabs button.active,.following-tabs button.active,.library-state-tabs button.active{
  background:var(--surface3)!important;color:var(--text)!important;border-color:rgba(139,92,246,.24)!important;
}
.discover-search-toolbar,.advanced-filters-panel,.recommendations-directory-toolbar{
  background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:18px!important;
}
.advanced-genre-chips button,.completed-selected-genres span,.tag-row span{
  background:var(--surface2)!important;color:var(--muted)!important;border:1px solid var(--line)!important;border-radius:999px!important;
}
.advanced-genre-chips button.active{background:rgba(139,92,246,.14)!important;color:#c4b5fd!important;border-color:rgba(139,92,246,.24)!important}
.curation-hero,.series-hero{border:1px solid var(--line)!important;border-radius:20px!important;background:var(--surface)!important}
.curation-hero-shade{background:linear-gradient(90deg,rgba(7,10,16,.96),rgba(7,10,16,.68),rgba(7,10,16,.18))!important}

/* ---------- WORK DETAIL: same visual language as approved preview ---------- */
#workDetailView{
  --work-bg:#070a10;--work-panel:#0d1119;--work-panel2:#111620;--work-panel3:#151b27;
  --work-text:#f4f6fb;--work-muted:#8f98aa;--work-line:rgba(255,255,255,.07);
  background:var(--work-bg)!important;color:var(--work-text)!important;
}
body.light #workDetailView{
  --work-bg:#f6f7fa;--work-panel:#ffffff;--work-panel2:#f1f3f7;--work-panel3:#e8ebf1;
  --work-text:#151923;--work-muted:#6f7888;--work-line:rgba(19,25,35,.09);
}
#workDetailView.tappy-detail-view.active{background:var(--work-bg)!important}
#workDetailView .tappy-detail-header{
  background:color-mix(in srgb,var(--work-bg) 94%,transparent)!important;
  border-bottom:1px solid var(--work-line)!important;box-shadow:0 8px 28px rgba(0,0,0,.10)!important;
}
#workDetailView .tappy-detail-brand,#workDetailView .detail-site-wordmark{color:var(--work-text)!important}
#workDetailView .tappy-hero-shell{
  background:linear-gradient(180deg,#0a0e16 0%,var(--work-bg) 74%,var(--work-bg) 100%)!important;
  border:0!important;box-shadow:none!important;
}
body.light #workDetailView .tappy-hero-shell{background:linear-gradient(180deg,#eceef4 0%,var(--work-bg) 76%)!important}
#workDetailView .series-hero-blur{opacity:.16!important;filter:blur(45px)!important}
#workDetailView .series-hero-overlay{background:linear-gradient(180deg,transparent 46%,var(--work-bg) 100%)!important}
#workDetailView .tappy-cover-image{border:1px solid var(--work-line)!important;border-radius:16px!important;box-shadow:0 24px 70px rgba(0,0,0,.34)!important}
#workDetailView .tappy-share-button,#workDetailView .work-admin-edit-button{
  background:rgba(9,13,20,.78)!important;color:#fff!important;border:1px solid rgba(255,255,255,.10)!important;border-radius:14px!important;
}
#workDetailView .tappy-summary-panel h1{color:var(--work-text)!important}
#workDetailView .tappy-meta-line,#workDetailView .tappy-creator-line,#workDetailView .tappy-alternative-titles{color:var(--work-muted)!important}
#workDetailView .series-tabs{
  background:color-mix(in srgb,var(--work-panel) 94%,transparent)!important;
  border:1px solid var(--work-line)!important;border-radius:22px!important;box-shadow:0 12px 30px rgba(0,0,0,.14)!important;
}
#workDetailView .series-tabs button{background:transparent!important;color:var(--work-muted)!important;border-radius:16px!important}
#workDetailView .series-tabs button.active{background:var(--work-panel3)!important;color:var(--work-text)!important}
#workDetailView .overview-panel,#workDetailView .series-info-section,#workDetailView .series-discussion-card,
#workDetailView .modern-announcement-card,#workDetailView .announcement-empty-state,#workDetailView .overview-review-panel,
#workDetailView .overview-related-panel,#workDetailView .detail-gallery-card,#workDetailView .compact-side-section,
#workDetailView .tappy-content-card,#workDetailView .series-info-card{
  background:var(--work-panel)!important;border:1px solid var(--work-line)!important;
  border-radius:20px!important;box-shadow:0 10px 28px rgba(0,0,0,.12)!important;color:var(--work-text)!important;
}
#workDetailView .review-card,#workDetailView .modern-editor-note,#workDetailView .recommendation-vote-box,
#workDetailView .site-rating-item,#workDetailView .comment-compose,#workDetailView .comment-item{
  background:var(--work-panel2)!important;border:1px solid var(--work-line)!important;border-radius:15px!important;color:var(--work-text)!important;
}
#workDetailView h1,#workDetailView h2,#workDetailView h3,#workDetailView strong,#workDetailView dt{color:var(--work-text)!important}
#workDetailView p,#workDetailView small,#workDetailView dd,#workDetailView .series-synopsis{color:var(--work-muted)!important}
#workDetailView .modern-series-tags span,#workDetailView .tag-row span{background:var(--work-panel2)!important;border:1px solid var(--work-line)!important;color:var(--work-text)!important}
#workDetailView input,#workDetailView textarea,#workDetailView select{background:var(--work-panel2)!important;color:var(--work-text)!important;border:1px solid var(--work-line)!important}
#workDetailView .tappy-bottom-cta{background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--work-bg) 96%,transparent) 28%,var(--work-bg) 62%)!important}
#workDetailView .tappy-follow-button,#workDetailView #modalFollowBtn{background:linear-gradient(135deg,var(--accent),#6366f1)!important;color:#fff!important;border:0!important;border-radius:15px!important}

/* ---------- ADMIN: same visual system, all existing sections preserved ---------- */
#adminView{
  --admin-bg:#070a10;--admin-panel:#0d1119;--admin-panel2:#111620;--admin-panel3:#151b27;
  --admin-text:#f4f6fb;--admin-muted:#8f98aa;--admin-line:rgba(255,255,255,.07);
  background:var(--admin-bg)!important;color:var(--admin-text)!important;
}
body.light #adminView{
  --admin-bg:#f6f7fa;--admin-panel:#fff;--admin-panel2:#f1f3f7;--admin-panel3:#e8ebf1;
  --admin-text:#151923;--admin-muted:#6f7888;--admin-line:rgba(19,25,35,.09);
}
#adminView .admin-head{background:transparent!important;border:0!important}
#adminView .admin-head h1,#adminView h2,#adminView h3,#adminView strong{color:var(--admin-text)!important}
#adminView .admin-head p,#adminView p,#adminView small,#adminView .block-heading p{color:var(--admin-muted)!important}
#adminView .admin-dashboard article,#adminView .unified-import-shortcut,#adminView .manager-toolbar,
#adminView .editor-shell,#adminView .unified-card,#adminView .mu-import-shell,#adminView .mangalek-import-card,
#adminView .mangadex-admin-search,#adminView .reports-admin-shell,#adminView .collection-admin-shell,
#adminView .collection-editor-shell,#adminView .admin-recommendations-list-shell{
  background:var(--admin-panel)!important;border:1px solid var(--admin-line)!important;border-radius:20px!important;box-shadow:0 12px 30px rgba(0,0,0,.10)!important;color:var(--admin-text)!important;
}
#adminView .admin-tabs{background:color-mix(in srgb,var(--admin-panel) 94%,transparent)!important;border:1px solid var(--admin-line)!important;border-radius:18px!important}
#adminView .admin-tabs button{background:transparent!important;color:var(--admin-muted)!important;border-radius:12px!important}
#adminView .admin-tabs button.active{background:var(--admin-panel3)!important;color:var(--admin-text)!important}
#adminView .admin-work-row,#adminView .editor-block,#adminView .unified-result-list>*,#adminView .mangalek-result-list>*,
#adminView .import-results>*,#adminView .choice-grid>*,#adminView .upload-zone,#adminView .inline-status,
#adminView .announcement-notification-note,#adminView .announcement-enable-row{
  background:var(--admin-panel2)!important;border:1px solid var(--admin-line)!important;border-radius:15px!important;color:var(--admin-text)!important;
}
#adminView .editor-number{background:var(--admin-panel3)!important;color:var(--admin-muted)!important;border:1px solid var(--admin-line)!important}
#adminView input,#adminView textarea,#adminView select{background:var(--admin-panel2)!important;color:var(--admin-text)!important;border:1px solid var(--admin-line)!important}
#adminView .primary-button,#adminView .ink-button{background:linear-gradient(135deg,var(--accent),#6366f1)!important;color:#fff!important}
#adminView .secondary-button,#adminView .line-button{background:var(--admin-panel2)!important;color:var(--admin-text)!important;border-color:var(--admin-line)!important}
#adminView .delete,#adminView .danger-button{background:rgba(251,113,133,.08)!important;color:#fda4af!important;border-color:rgba(251,113,133,.18)!important}

/* ---------- Bottom dock ---------- */
.member-dock{
  background:color-mix(in srgb,var(--surface) 95%,transparent)!important;border:1px solid var(--line)!important;
  border-radius:20px!important;box-shadow:0 12px 34px rgba(0,0,0,.20)!important;backdrop-filter:blur(14px)!important;
}
body.light .member-dock{background:rgba(255,255,255,.96)!important}
.dock-item{color:var(--muted)!important;border-radius:13px!important}
.dock-item.active{color:var(--accent2)!important}
.dock-item.active .dock-icon-shell{background:rgba(139,92,246,.14)!important;color:#c4b5fd!important;box-shadow:none!important}
.dock-item.active::after{background:var(--accent)!important}

/* ---------- Modal/sheet consistency ---------- */
.sheet-backdrop,.modal-backdrop,.auth-overlay,.report-modal-overlay{background:rgba(0,0,0,.70)!important}
.profile-sheet,.notification-sheet,.auth-modal,.welcome-card,.modal-sheet,.report-modal-card{
  background:var(--surface)!important;border:1px solid var(--line)!important;color:var(--text)!important;
}
.sheet-section,.device-notification-row,.profile-menu-item,.notification-item{
  background:var(--surface2)!important;border-color:var(--line)!important;border-radius:14px!important;
}

/* ---------- Responsive: visual only, preserve existing layout breakpoints ---------- */
@media(max-width:740px){
  .site-header,.exact-platform-header{background:var(--mi-header)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .member-dock{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  #workDetailView .tappy-detail-header{background:var(--work-bg)!important;backdrop-filter:none!important}
  #workDetailView .series-tabs{background:var(--work-panel)!important;backdrop-filter:none!important}
  #adminView .admin-tabs{background:var(--admin-panel)!important;backdrop-filter:none!important}
}

@media(prefers-reduced-motion:reduce){
  .primary-button:hover,.secondary-button:hover,.exact-solid-button:hover,.exact-outline-button:hover{transform:none!important}
}