/* Manhwa Index v8.2.9 — Mobile Compact Mode
   Layout density only. Theme colors and desktop layout are unchanged. */

@media (max-width: 740px){
  html{
    -webkit-text-size-adjust:92%;
    text-size-adjust:92%;
    overflow-x:hidden;
  }
  body{
    width:100%;
    max-width:100vw;
    overflow-x:hidden!important;
  }
  *,*::before,*::after{box-sizing:border-box}
  img,video,canvas,svg{max-width:100%;height:auto}
  input,select,textarea,button{max-width:100%;min-width:0}
  .view,#workDetailView,#adminView{max-width:100vw!important;overflow-x:hidden!important}
  .view{padding-left:10px!important;padding-right:10px!important}

  /* Header / home density — same theme and order. */
  .site-header{padding-left:10px!important;padding-right:10px!important;gap:7px!important}
  .brand{min-width:0!important}
  .brand img{max-height:34px!important;width:auto!important}
  .hero-shell{padding:27px 15px!important;border-radius:20px!important}
  .hero-content h1{font-size:36px!important;line-height:1.08!important;letter-spacing:-.6px!important}
  .hero-content>p{font-size:9px!important;line-height:1.8!important}
  .hero-badges{gap:5px!important}
  .hero-badges>*{font-size:7px!important;padding:6px 8px!important}
  .content-section{padding-top:42px!important}
  .section-heading{gap:8px!important}
  .section-heading h2{font-size:20px!important}
  .section-heading p{font-size:8px!important}
  .page-head{padding:38px 0 20px!important}
  .page-head h1{font-size:32px!important;line-height:1.1!important}
  .page-head p{font-size:8px!important}
  .poster-grid{gap:10px!important}
  .ranked-grid{gap:8px!important}
  .ranked-card img{height:165px!important}
  .featured-cover{height:285px!important}
  .featured-copy{padding:18px!important}
  .filter-bar{gap:7px!important}
  .filter-bar>*{min-width:0!important}

  /* Common interactive controls. */
  .primary-button,.secondary-button,.ghost-button,.danger-button,
  .icon-button,.profile-button,.filter-bar button,.filter-bar select,
  .filter-bar input,.manager-toolbar button,.manager-toolbar select,
  .manager-toolbar input{
    min-height:36px!important;
    padding-top:8px!important;
    padding-bottom:8px!important;
  }

  /* Work detail — compact, never wider than phone. */
  #workDetailView *{min-width:0}
  #workDetailView .tappy-detail-header{height:58px!important;min-height:58px!important;padding-inline:54px!important}
  #workDetailView .tappy-detail-back-actions{right:8px!important;gap:5px!important}
  #workDetailView .tappy-detail-header-actions{left:8px!important;gap:5px!important}
  #workDetailView .tappy-detail-header button{width:38px!important;height:38px!important;border-radius:11px!important}
  #workDetailView .tappy-detail-header .prototype-icon{width:18px!important;height:18px!important}
  #workDetailView .tappy-hero-shell{padding:8px 8px 12px!important}
  #workDetailView .tappy-cover-frame{width:min(280px,76vw)!important;max-width:280px!important}
  #workDetailView .tappy-summary-panel{width:calc(100% - 12px)!important;margin-top:8px!important}
  #workDetailView .tappy-summary-panel h1{font-size:clamp(23px,7vw,31px)!important;line-height:1.12!important;margin-bottom:6px!important;overflow-wrap:anywhere}
  #workDetailView .tappy-summary-panel p,#workDetailView .tappy-summary-panel .tappy-alt-titles{font-size:9px!important;line-height:1.7!important}
  #workDetailView .series-tabs{width:calc(100% - 10px)!important;margin-top:8px!important;padding:5px!important;gap:4px!important;border-radius:17px!important}
  #workDetailView .series-tabs button{min-height:52px!important;padding:6px 2px!important;border-radius:12px!important;font-size:9px!important;gap:3px!important}
  #workDetailView .series-tabs .tab-icon .prototype-icon{width:19px!important;height:19px!important}
  #workDetailView .tappy-detail-content{width:100%!important;padding-inline:0!important}
  #workDetailView .prototype-pane-shell{padding:7px 5px 16px!important;gap:8px!important}
  #workDetailView .prototype-pane-kicker,#workDetailView .prototype-info-head{padding:2px 1px 6px!important;gap:8px!important}
  #workDetailView .prototype-pane-kicker h2,#workDetailView .prototype-info-head h2{font-size:18px!important}
  #workDetailView .prototype-pane-kicker p,#workDetailView .prototype-info-head p{font-size:8px!important}
  #workDetailView .prototype-work-card,#workDetailView .prototype-info-card{padding:11px!important;border-radius:15px!important}
  #workDetailView .prototype-card-head{margin-bottom:7px!important}
  #workDetailView .prototype-card-head h3{font-size:12px!important}
  #workDetailView .prototype-card-head span{font-size:8px!important}
  #workDetailView .prototype-quick-stats{gap:6px!important}
  #workDetailView .prototype-quick-card{padding:9px 4px!important;border-radius:13px!important}
  #workDetailView .prototype-quick-card small{font-size:8px!important}
  #workDetailView .prototype-quick-card .prototype-stat-value{font-size:13px!important}
  #workDetailView .prototype-person-row,#workDetailView .prototype-publish-row{padding:8px!important;min-height:50px!important;border-radius:12px!important}
  #workDetailView .prototype-alt-row strong{padding:9px 10px!important;font-size:10px!important;line-height:1.7!important}
  #workDetailView .modern-gallery-grid,#workDetailView .related-grid{gap:7px!important}
  #workDetailView .comment-rating-summary{padding:9px!important}

  /* Admin — one-column phone layout with smaller controls. */
  #adminView *{min-width:0}
  #adminView .prototype-admin-topbar{height:56px!important;padding-inline:8px!important}
  #adminView .prototype-admin-page-title{font-size:13px!important}
  #adminView .prototype-admin-icon-btn{width:36px!important;height:36px!important;border-radius:11px!important}
  #adminView .prototype-admin-icon-btn .prototype-icon{width:17px!important;height:17px!important}
  #adminView .prototype-admin-mobile-nav{top:56px!important;padding:6px 7px!important;gap:5px!important}
  #adminView .prototype-admin-mobile-nav .prototype-admin-nav-btn{padding:7px 9px!important;font-size:9px!important;border-radius:10px!important}
  #adminView .prototype-admin-shell{padding:7px!important;gap:8px!important}
  #adminView .prototype-admin-hero{margin-bottom:8px!important}
  #adminView .prototype-admin-hero h1{font-size:19px!important}
  #adminView .prototype-admin-hero p{font-size:8px!important}
  #adminView .prototype-admin-import-tabs{gap:5px!important;margin-bottom:8px!important}
  #adminView .prototype-admin-import-tab{padding:7px 9px!important;font-size:9px!important;border-radius:10px!important}
  #adminView .admin-panel .unified-card,#adminView .admin-panel .mu-import-shell,
  #adminView .admin-panel .mangalek-import-card,#adminView .admin-panel .editor-shell,
  #adminView .admin-panel .reports-admin-shell,#adminView .official-sync-shell{
    border-radius:14px!important;
  }
  #adminView .unified-card,#adminView .official-sync-shell{padding:10px!important}
  #adminView .unified-search-row{grid-template-columns:minmax(0,1fr) 84px!important;gap:6px!important}
  #adminView input,#adminView select,#adminView textarea{font-size:10px!important;padding:8px 9px!important;border-radius:10px!important}
  #adminView button{max-width:100%;overflow:hidden;text-overflow:ellipsis}
  #adminView .modern-form-grid,#adminView .pros-cons-grid,#adminView .media-upload-grid,
  #adminView .collection-cover-fields,#adminView .choice-grid{grid-template-columns:1fr!important}
  #adminView .editor-block{grid-template-columns:34px minmax(0,1fr)!important}
  #adminView .editor-block-content{padding:12px 8px!important}
  #adminView .work-picker{grid-template-columns:1fr!important}
  #adminView .official-sync-grid{grid-template-columns:1fr!important}

  /* Modals/sheets never exceed viewport. */
  .modal-backdrop,.welcome-backdrop,.dock-sheet-backdrop,.mi-import-review-backdrop{padding-left:6px!important;padding-right:6px!important}
  .auth-modal,.welcome-card,.dock-sheet,.mi-import-review-sheet{width:calc(100vw - 12px)!important;max-width:calc(100vw - 12px)!important}
  .mi-import-review-layout{grid-template-columns:1fr!important}
  .mi-import-review-side{max-width:150px!important;margin-inline:auto!important;width:100%!important}
  .mi-import-review-form{grid-template-columns:1fr!important}
  .mi-import-review-form label.full,.mi-import-review-actions.full{grid-column:auto!important}

  /* Keep the existing bottom-dock style, only reduce physical size. */
  body{padding-bottom:88px!important}
  .member-dock{
    width:calc(100vw - 10px)!important;
    height:66px!important;
    min-height:64px!important;
    max-height:66px!important;
    bottom:max(5px,env(safe-area-inset-bottom))!important;
    padding:5px 3px!important;
    border-radius:20px!important;
  }
  .member-dock>.dock-profile{max-width:92px!important}
  .dock-item{height:52px!important;gap:2px!important;padding:3px 1px!important;border-radius:13px!important}
  .dock-item svg{width:20px!important;height:20px!important}
  .dock-item>span:last-child{font-size:5.5px!important;line-height:1.15!important}
  .dock-profile{height:70px!important;margin-top:-18px!important}
  .dock-profile-ring{width:58px!important;height:58px!important;border-width:5px!important}
  .dock-profile-avatar{width:44px!important;height:44px!important}
  .dock-sheet-backdrop{padding-bottom:78px!important}
  .dock-sheet{max-height:calc(100vh - 88px)!important;padding:12px 12px 16px!important;border-radius:19px!important}
}

@media (max-width: 390px){
  .view{padding-left:8px!important;padding-right:8px!important}
  .hero-content h1{font-size:33px!important}
  .poster-grid{gap:8px!important}
  #workDetailView .tappy-cover-frame{width:min(258px,74vw)!important}
  #workDetailView .series-tabs button{font-size:8px!important}
  #adminView .prototype-admin-mobile-nav .prototype-admin-nav-btn{padding:7px 8px!important}
  .member-dock{width:calc(100vw - 8px)!important}
  .member-dock>.dock-profile{max-width:84px!important}
  .dock-profile-ring{width:54px!important;height:54px!important}
  .dock-profile-avatar{width:41px!important;height:41px!important}
}