/* Shared public mobile layouts. Desktop rules remain in their page stylesheets. */
@media (max-width: 760px) {
    html { scroll-padding-top: 120px; }
    body { -webkit-text-size-adjust: 100%; }
    main, section, article, aside, form, .invoice-side { min-width: 0; }
    input, select, textarea { max-width: 100%; font-size: 16px; }
    button, .btn, .ep, .tabs button { touch-action: manipulation; }
    .topbar.site-navbar {
        padding: 10px 16px;
        padding-top: max(10px, env(safe-area-inset-top));
        gap: 10px;
        flex-wrap: wrap;
        min-height: 108px;
    }
    .site-navbar .logo { max-width: 44%; min-width: 0; }
    .site-navbar .logo img { max-width: 100%; max-height: 38px; object-fit: contain; }
    .site-navbar .nav { display: none; }
    .site-navbar .tools { display: contents; }
    .site-navbar .auth-btns, .site-navbar .profile-dropdown { margin-left: auto; }
    .site-navbar .auth-btns { gap: 6px; }
    .site-navbar .auth-btns .btn { padding: 10px 12px; min-height: 42px; font-size: 12px; }
    .site-navbar .search { order: 3; flex: 0 0 100%; width: 100%; min-width: 0; }
    .site-navbar .search input { min-height: 44px; font-size: 16px; }
    .profile-panel { max-width: calc(100vw - 32px); right: 0; }
    .catalog-content, .account-content, .watch-content { padding-inline: 16px; }
    .catalog-section-head { gap: 12px; align-items: flex-start; }
    .catalog-section-head h2 { font-size: 21px; line-height: 1.3; }
    .catalog-section-head p { font-size: 12px; line-height: 1.6; }
    .catalog-reset { flex-shrink: 0; font-size: 11px; }
    .catalog-card { min-width: 0; }
    .catalog-art-title { overflow-wrap: anywhere; }
    .drama-feed-grid, .genre-grid, .catalog-search-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
    body[data-page="home"] .catalog-hero { padding: 24px 16px 30px; min-height: 0; flex-direction: column-reverse; gap: 22px; }
    body[data-page="home"] .catalog-hero-copy { width: 100%; margin: 0; }
    .home-featured-poster { flex: none; width: min(52vw, 210px); }
    body[data-page="home"] .catalog-hero h1 { font-size: clamp(28px, 7vw, 40px); }
    body[data-page="home"] .catalog-hero-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    body[data-page="home"] .catalog-hero-actions .btn { min-width: 0; min-height: 46px; padding: 12px 8px; font-size: 12px; }
    .genre-toolbar { flex-wrap: wrap; gap: 12px; }
    .genre-filter > div { max-width: none; }
    .genre-picker { max-width: calc(100vw - 24px); }
    .detail-page .detail-hero { padding: 24px 16px 30px; }
    .detail-intro, .detail-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .detail-title { font-size: clamp(28px, 8vw, 40px); overflow-wrap: anywhere; }
    .detail-actions { flex-wrap: wrap; gap: 10px; }
    .detail-actions .btn { min-height: 46px; }
    .detail-episode-grid { grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); }
    .watch-page .watch-layout, .watch-summary { grid-template-columns: minmax(0, 1fr); }
    .watch-page .player { min-height: 0; width: 100%; }
    .watch-page .episode-panel { border-left: 0; padding: 20px 16px; }
    .watch-page .pbar { padding: 16px 12px; }
    .watch-page .pbar .btns { display: flex; flex-wrap: wrap; gap: 8px; }
    .watch-page .pbar .btn { min-height: 44px; font-size: 12px; padding: 10px; }
    .watch-page .eps { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); }
    .cinema-toolbar { gap: 8px; padding-inline: 10px; }
    .cinema-toolbar button { min-height: 44px; }
    .cinema-volume { width: 54px; }
    .account-content h1 { font-size: clamp(28px, 8vw, 38px); overflow-wrap: anywhere; }
    .account-notice, .account-facts, .password-settings { padding: 22px 18px; width: 100%; }
    .account-description, .account-notice p { overflow-wrap: anywhere; }
    .password-form button { width: 100%; min-height: 46px; }
    .transaction-filter { align-items: stretch; }
    .transaction-filter select { font-size: 16px; min-height: 44px; }
    .transaction-table-scroll { max-width: 100%; overscroll-behavior-x: contain; }
    .transaction-pagination { flex-wrap: wrap; }
    .invoice-layout { grid-template-columns: minmax(0, 1fr); }
    .invoice-page { padding-inline: 16px; }
    .invoice-panel { padding: 22px 16px; }
    .invoice-facts dd { overflow-wrap: anywhere; min-width: 0; }
    .invoice-deadline { flex-wrap: wrap; }
    .invoice-qr { max-width: 100%; }
    .modal { padding: 12px; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
    .sheet, .sheet.narrow { width: 100%; max-width: 460px; max-height: calc(100dvh - 24px); overflow-y: auto; padding: 26px 20px; border-radius: 20px; }
    .sheet .form input, .sheet select { font-size: 16px; min-height: 48px; }
    .sheet .form .btn, .google-auth-button { min-height: 48px; }
    .auth-brand { flex-wrap: wrap; gap: 10px; }
    .auth-site-logo { max-width: 145px; max-height: 44px; }
    .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .plan { min-width: 0; padding: 14px 12px; }
    .plan b { font-size: 22px; overflow-wrap: anywhere; }
    .vip-selection { flex-wrap: wrap; gap: 12px; }
    .vip-selection .btn { width: 100%; min-height: 46px; }
    .site-footer { padding-inline: 16px; padding-bottom: max(24px, env(safe-area-inset-bottom)); }
}
@media (max-width: 360px) {
    .site-navbar .auth-btns .btn { padding-inline: 9px; }
    .catalog-section-head { flex-wrap: wrap; }
    .sheet, .sheet.narrow { padding-inline: 16px; }
    .cinema-volume { display: none; }
    .watch-summary dl { grid-template-columns: 1fr; }
}
@media (max-height: 500px) and (orientation: landscape) {
    .modal { align-items: flex-start; overflow-y: auto; }
    .sheet, .sheet.narrow { max-height: calc(100dvh - 24px); }
}