/* =========================================================
   MKR RESPONSIVE.CSS - V1.0.1 FINAL LIMPO
   Responsivo apenas para telas pequenas.
   Não altera layout do PC.
========================================================= */

@media (max-width: 768px) {

  /* ---------- BASE MOBILE ---------- */
  html,
  body {
    width: 100%;
    min-height: 100%;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body {
    padding-bottom: 116px !important;
    -webkit-tap-highlight-color: transparent;
  }

  /* ---------- HEADER COMPACTO ---------- */
  .header {
    position: relative !important;
    height: auto !important;
    padding: 8px 10px !important;
    z-index: 100 !important;
  }

  .header-content {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 0 !important;
  }

  .logo {
    transform: scale(.78) !important;
    transform-origin: center !important;
    margin: -4px 0 !important;
  }

  .logo h1 { font-size: 24px !important; }
  .logo p { font-size: 12px !important; }

  .controls {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 7px !important;
  }

  #googleLoginBtn { transform: scale(.82) !important; }

  .theme-selector {
    width: 90% !important;
    max-width: 360px !important;
    min-height: 38px !important;
    height: 38px !important;
    justify-content: center !important;
  }

  /* No celular não precisa de Grid/Lista/Cards */
  .layout-selector { display: none !important; }

  /* ---------- NAV COM ROLAGEM LATERAL ---------- */
  .nav-categories {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 7px 0 !important;
  }

  .nav-categories::-webkit-scrollbar { display: none !important; }

  .categories-content {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    min-width: max-content !important;
    gap: 8px !important;
    padding: 0 12px !important;
    overflow: visible !important;
  }

  .category-link {
    flex: 0 0 auto !important;
    height: 34px !important;
    padding: 0 13px !important;
    font-size: 12px !important;
    border-radius: 17px !important;
    white-space: nowrap !important;
  }

  /* ---------- BUSCAS ---------- */
  .global-search-bar {
    padding: 8px 12px !important;
  }

  .search-wrap input,
  #globalSearchInput,
  #youtubeSearch {
    height: 40px !important;
    font-size: 13px !important;
    border-radius: 20px !important;
  }

  /* X da busca pequeno, sem bolha azul grande */
  .search-clear-btn {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    right: 12px !important;
    top: 50% !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.10) !important;
    box-shadow: none !important;
    color: #fff !important;
    font-size: 0 !important;
    transform: translateY(-50%) !important;
  }

  .search-clear-btn::before {
    content: "×" !important;
    font-size: 13px !important;
    line-height: 1 !important;
    transform: none !important;
  }

  /* ---------- CONTEÚDO ---------- */
  .container {
    padding: 10px 10px 150px !important;
    overflow: visible !important;
  }

  .section-header {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
    overflow: visible !important;
  }

  .section-title {
    font-size: 20px !important;
    line-height: 1.2 !important;
  }

  /* ---------- +ADICIONAR | DOWNLOAD | +BIBLIOTECA ---------- */
  .section-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .section-actions .add-btn,
  .section-actions label,
  #clearHistoryBtn {
    width: 100% !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 8px !important;
    font-size: 10px !important;
    line-height: 1 !important;
    border-radius: 17px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Download agora fica no meio da linha via JS */
  .download-header-circle-btn,
  .download-middle-btn {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    border-radius: 50% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 20 !important;
  }

  /* Esvaziar histórico fica do tamanho do adicionar e sem download junto */
  #playlistActionsWrap.history-actions {
    grid-template-columns: 1fr !important;
    max-width: 230px !important;
  }

  #playlistActionsWrap.history-actions .download-header-circle-btn,
  #playlistActionsWrap.history-actions .download-middle-btn,
  #playlistActionsWrap.history-actions #libraryMusicBtn,
  #playlistActionsWrap.history-actions #dynamicAddBtn {
    display: none !important;
  }

  /* ---------- CARDS MOBILE ---------- */
  .sites-grid,
  .sites-list,
  .sites-cards {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .site-card,
  .playlist-card,
  .history-card {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) 70px !important;
    gap: 8px !important;
    align-items: center !important;
    min-height: 76px !important;
    padding: 8px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }

  .site-thumb,
  .playlist-thumb,
  .site-card img,
  .playlist-card img,
  .history-card img,
  .site-card .card-image,
  .site-card .thumbnail,
  .site-card .site-image {
    grid-column: 1 !important;
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    object-fit: cover !important;
    border-radius: 10px !important;
    margin: 0 !important;
  }

  /* Remove emojis de pasta, estrela e histórico sobre a capa */
  .site-icon,
  .playlist-type-icon,
  .learning-folder-icon,
  .learning-type-badge {
    display: none !important;
  }

  .site-card-body,
  .playlist-card-body,
  .history-card-body,
  .site-card-top,
  .playlist-info {
    grid-column: 2 !important;
    min-width: 0 !important;
    display: block !important;
    overflow: hidden !important;
  }

  .site-name,
  .playlist-title,
  .card-title,
  .site-card h3 {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
  }

  .site-desc,
  .site-url,
  .card-desc,
  .playlist-desc {
    display: block !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
    opacity: .72 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin: 0 !important;
  }

  /* Playlist: somente Favoritar e Remover */
  .playlist-card .site-actions,
  .playlist-actions {
    grid-column: 3 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
    width: 70px !important;
    margin: 0 !important;
  }

  .playlist-card .site-actions button,
  .playlist-actions button,
  .favorite-btn,
  .remove-btn {
    width: 70px !important;
    height: 23px !important;
    min-height: 23px !important;
    max-height: 23px !important;
    padding: 0 4px !important;
    font-size: 8px !important;
    line-height: 1 !important;
    border-radius: 12px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Histórico não tem botões na direita */
  .history-card {
    grid-template-columns: 58px minmax(0, 1fr) !important;
  }

  .history-card .site-actions { display: none !important; }

  .empty-history-card {
    display: block !important;
    text-align: center !important;
    min-height: 90px !important;
  }

  /* ---------- YOUTUBE MUSIC ---------- */
  .music-panel {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    bottom: 84px !important;
    width: auto !important;
    max-height: 54px !important;
    overflow: hidden !important;
    border-radius: 18px !important;
    z-index: 9998 !important;
  }

  .music-panel:not(.collapsed) {
    top: 10px !important;
    bottom: 84px !important;
    max-height: none !important;
    height: auto !important;
    border-radius: 20px !important;
  }

  .music-panel-header {
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    border-radius: 18px !important;
  }

  #musicPanelToggleBtn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    border-radius: 50% !important;
    padding: 0 !important;
  }

  .youtube-video-box { display: none !important; }

  .music-panel:not(.collapsed) .music-panel-body {
    display: flex !important;
    flex-direction: column !important;
    height: calc(100vh - 160px) !important;
    max-height: none !important;
    overflow: hidden !important;
    padding: 10px !important;
  }

  .youtube-search-box {
    display: grid !important;
    grid-template-columns: 1fr 72px !important;
    gap: 8px !important;
    padding: 0 !important;
    margin-bottom: 10px !important;
  }

  .youtube-search-box button {
    height: 40px !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    padding: 0 10px !important;
  }

  .search-results {
    flex: 1 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding-right: 0 !important;
    scrollbar-width: none !important;
  }

  .search-results::-webkit-scrollbar { display: none !important; }

  /* Resultado YouTube com título no lugar do botão Opções */
  .search-result-item,
  .youtube-card-actions {
    display: grid !important;
    grid-template-columns: 56px minmax(0,1fr) !important;
    gap: 8px !important;
    align-items: center !important;
    padding: 8px !important;
    border-radius: 14px !important;
  }

  .youtube-result-main {
    display: contents !important;
  }

  .search-result-item img,
  .youtube-result-main img {
    width: 56px !important;
    height: 42px !important;
    object-fit: cover !important;
    border-radius: 10px !important;
  }

  .result-text { min-width: 0 !important; }

  .search-result-item strong {
    display: block !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .search-result-item small {
    display: block !important;
    font-size: 10px !important;
    opacity: .72 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .youtube-options-pill,
  .search-result-item button:not(.search-clear-btn) {
    display: none !important;
  }

  /* ---------- FAVORITOS CENTRALIZADOS ---------- */
  .favorites-quick-panel {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    bottom: 88px !important;
    width: 92vw !important;
    max-width: 360px !important;
    max-height: 240px !important;
    padding: 8px !important;
    border-radius: 18px !important;
    z-index: 10000 !important;
  }

  .favorites-quick-list { gap: 6px !important; }

  .favorites-quick-list li {
    grid-template-columns: 42px minmax(0,1fr) !important;
    padding: 7px !important;
    gap: 8px !important;
    border-radius: 10px !important;
  }

  .favorites-quick-thumb {
    width: 42px !important;
    height: 42px !important;
    border-radius: 8px !important;
  }

  .favorites-quick-title {
    font-size: 11px !important;
  }

  /* ---------- FOOTER PLAYER ---------- */
  .progress-bar,
  #progressBar,
  .footer-right {
    display: none !important;
  }

  .footer-player {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    bottom: 6px !important;
    width: auto !important;
    height: 76px !important;
    min-height: 76px !important;
    padding: 7px 10px !important;
    z-index: 9999 !important;
    display: grid !important;
    grid-template-rows: 22px 42px !important;
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    border-radius: 22px !important;
    overflow: visible !important;
  }

  .footer-left {
    width: 100% !important;
    text-align: center !important;
    min-width: 0 !important;
  }

  .track-title {
    font-size: 12px !important;
    line-height: 1.1 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .track-artist {
    font-size: 10px !important;
    line-height: 1.1 !important;
    text-align: center !important;
  }

  .footer-center {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 32px 44px 32px 32px 32px !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .footer-center button {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
    font-size: 11px !important;
    border-radius: 50% !important;
  }

  .footer-center .play-pause,
  #playPauseBtn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    font-size: 16px !important;
  }

  /* ---------- MODAIS ---------- */
  .modal-content {
    width: 94vw !important;
    max-width: 94vw !important;
    padding: 20px !important;
  }
}

@media (max-width: 480px) {
  .logo h1 { font-size: 22px !important; }

  .theme-selector { width: 94% !important; }

  .section-actions {
    grid-template-columns: minmax(0,1fr) 38px minmax(0,1fr) !important;
    gap: 7px !important;
  }

  .download-header-circle-btn,
  .download-middle-btn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
  }

  .section-actions .add-btn,
  .section-actions label,
  #clearHistoryBtn {
    font-size: 9px !important;
  }

  .site-card,
  .playlist-card,
  .history-card {
    grid-template-columns: 56px minmax(0, 1fr) 66px !important;
  }

  .playlist-card .site-actions,
  .playlist-actions {
    width: 66px !important;
  }

  .playlist-card .site-actions button,
  .playlist-actions button,
  .favorite-btn,
  .remove-btn {
    width: 66px !important;
    font-size: 7px !important;
  }
}


/* =========================================================
   MKR V5.6.2 - SOMENTE CSS
   Feito em cima da versão enviada.
   NÃO altera JS.
   Ajustes:
   - Header menor no celular
   - Tema menor e alinhado
   - Botões +Adicionar / Download / +Biblioteca alinhados
   - Download com mesma fonte dos outros botões
   - X da busca menor, centralizado, visível e com hover
   - Footer com botões mais centralizados e mais altos
   - Favoritar e Remover maiores, sem remover favorito
   - Remove emojis/ícones sobre capas
   - Playlists de vídeos mais organizadas
   - Notificações menores no topo
========================================================= */

@media (max-width: 768px) {

  /* BASE */
  html,
  body {
    width: 100%;
    min-height: 100%;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body {
    padding-bottom: 112px !important;
    -webkit-tap-highlight-color: transparent;
  }

  /* HEADER MENOR */
  .header {
    position: relative !important;
    height: auto !important;
    min-height: auto !important;
    padding: 6px 10px !important;
    z-index: 100 !important;
  }

  .header-content {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 0 !important;
  }

  .logo {
    transform: scale(.86) !important;
    transform-origin: center !important;
    margin: 0 !important;
    gap: 8px !important;
  }

  .logo-icon {
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
  }

  .logo-icon svg {
    width: 32px !important;
    height: 32px !important;
  }

  .logo h1 {
    font-size: 19px !important;
    line-height: 1.05 !important;
  }

  .logo p,
  #userGreeting {
    font-size: 10px !important;
    line-height: 1.1 !important;
  }

  #googleLoginBtn {
    transform: scale(.82) !important;
    transform-origin: center !important;
    min-height: 32px !important;
    margin-top: -4px !important;
  }

  .controls {
    width: 100% !important;
    gap: 5px !important;
    align-items: center !important;
  }

  .layout-selector {
    display: none !important;
  }

  /* TEMA MENOR */
  .theme-selector,
  .theme-dropdown-wrap {
    width: min(90vw, 310px) !important;
    max-width: 310px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 3px 8px !important;
    margin: 2px auto 0 !important;
    border-radius: 999px !important;
    display: grid !important;
    grid-template-columns: auto minmax(105px, 1fr) !important;
    align-items: center !important;
    gap: 7px !important;
  }

  .theme-select-label {
    font-size: 11px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
  }

  .theme-select {
    width: 100% !important;
    height: 28px !important;
    min-height: 28px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    padding-left: 10px !important;
    padding-right: 34px !important;
  }

  /* NAV LATERAL MOBILE */
  .nav-categories {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 7px 0 !important;
  }

  .nav-categories::-webkit-scrollbar {
    display: none !important;
  }

  .categories-content {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    min-width: max-content !important;
    gap: 8px !important;
    padding: 0 12px !important;
    overflow: visible !important;
  }

  .category-link {
    flex: 0 0 auto !important;
    height: 34px !important;
    padding: 0 13px !important;
    font-size: 12px !important;
    border-radius: 17px !important;
    white-space: nowrap !important;
  }

  /* BUSCAS E X */
  .global-search-bar {
    padding: 8px 12px !important;
  }

  .search-wrap,
  .youtube-search-wrap {
    position: relative !important;
  }

  .search-wrap input,
  #globalSearchInput,
  #youtubeSearch {
    height: 40px !important;
    font-size: 13px !important;
    border-radius: 20px !important;
    padding-right: 42px !important;
  }

  .search-clear-btn,
  #clearGlobalSearchBtn,
  #clearYoutubeSearchBtn {
    display: flex;
    align-items: center !important;
    justify-content: center !important;

    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;

    padding: 0 !important;
    border-radius: 50% !important;

    background: rgba(255, 255, 255, .12) !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    box-shadow: none !important;

    color: #ffffff !important;
    font-size: 0 !important;
    opacity: 1 !important;
    z-index: 8 !important;

    transition: background .18s ease, transform .18s ease, border-color .18s ease !important;
  }

  .search-clear-btn.hidden,
  #clearGlobalSearchBtn.hidden,
  #clearYoutubeSearchBtn.hidden {
    display: none !important;
  }

  .search-clear-btn::before,
  #clearGlobalSearchBtn::before,
  #clearYoutubeSearchBtn::before {
    content: "×" !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    transform: translateY(-1px) !important;
  }

  .search-clear-btn:hover,
  #clearGlobalSearchBtn:hover,
  #clearYoutubeSearchBtn:hover {
    background: #ef4444 !important;
    border-color: #ef4444 !important;
    transform: translateY(-50%) scale(1.08) !important;
  }

  body.theme-light .search-clear-btn,
  body.theme-light #clearGlobalSearchBtn,
  body.theme-light #clearYoutubeSearchBtn {
    background: rgba(15, 23, 42, .10) !important;
    border-color: rgba(15, 23, 42, .16) !important;
  }

  body.theme-light .search-clear-btn::before,
  body.theme-light #clearGlobalSearchBtn::before,
  body.theme-light #clearYoutubeSearchBtn::before {
    color: #0f172a !important;
  }

  body.theme-light .search-clear-btn:hover,
  body.theme-light #clearGlobalSearchBtn:hover,
  body.theme-light #clearYoutubeSearchBtn:hover {
    background: #ef4444 !important;
    border-color: #ef4444 !important;
  }

  body.theme-light .search-clear-btn:hover::before,
  body.theme-light #clearGlobalSearchBtn:hover::before,
  body.theme-light #clearYoutubeSearchBtn:hover::before {
    color: #ffffff !important;
  }

  /* CONTEÚDO */
  .container {
    padding: 10px 10px 145px !important;
    overflow: visible !important;
  }

  .section-header {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
    overflow: visible !important;
  }

  .section-title {
    font-size: 20px !important;
    line-height: 1.2 !important;
  }

  /* BOTÕES: +ADICIONAR | DOWNLOAD | +BIBLIOTECA */
  #playlistActionsWrap,
  .section-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 8px !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #dynamicAddBtn,
  .section-actions .add-btn,
  #libraryMusicBtn,
  .section-actions label,
  #clearHistoryBtn,
  .download-header-circle-btn,
  .download-middle-btn {
    width: 100% !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 10px !important;
    border-radius: 18px !important;

    font-family: inherit !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .download-header-circle-btn,
  .download-middle-btn {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    color: transparent !important;
  }

  .download-header-circle-btn::before,
  .download-middle-btn::before {
    content: "Download" !important;
    color: #ffffff !important;
    font-family: inherit !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
  }

  #libraryMusicBtn {
    font-size: 0 !important;
  }

  #libraryMusicBtn::before {
    content: "+ Biblioteca" !important;
    font-size: 10px !important;
    font-weight: 800 !important;
  }

  #playlistActionsWrap.history-actions {
    grid-template-columns: 1fr !important;
    max-width: 230px !important;
  }

  #playlistActionsWrap.history-actions #dynamicAddBtn,
  #playlistActionsWrap.history-actions .download-header-circle-btn,
  #playlistActionsWrap.history-actions .download-middle-btn,
  #playlistActionsWrap.history-actions #libraryMusicBtn {
    display: none !important;
  }

  /* CARDS MOBILE */
  .sites-grid,
  .sites-list,
  .sites-cards {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .site-card,
  .playlist-card,
  .history-card {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) 86px !important;
    gap: 8px !important;
    align-items: center !important;
    min-height: 86px !important;
    padding: 8px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }

  .site-thumb,
  .playlist-thumb,
  .site-card img,
  .playlist-card img,
  .history-card img,
  .site-card .card-image,
  .site-card .thumbnail,
  .site-card .site-image {
    grid-column: 1 !important;
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    object-fit: cover !important;
    border-radius: 10px !important;
    margin: 0 !important;
  }

  /* REMOVE EMOJIS/ÍCONES SOBRE CAPAS */
  .site-icon,
  .playlist-type-icon,
  .learning-folder-icon,
  .learning-type-badge {
    display: none !important;
  }

  .site-card-body,
  .playlist-card-body,
  .history-card-body,
  .site-card-top,
  .playlist-info {
    grid-column: 2 !important;
    min-width: 0 !important;
    display: block !important;
    overflow: hidden !important;
  }

  .site-name,
  .playlist-title,
  .card-title,
  .site-card h3 {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
  }

  .site-desc,
  .site-url,
  .card-desc,
  .playlist-desc {
    display: block !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
    opacity: .72 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin: 0 !important;
  }

  /* FAVORITO E REMOVER MAIORES */
  .site-actions button,
  .playlist-actions button,
  .card-actions button {
    display: flex !important;
  }

  .site-actions button:first-child:not(.favorite-btn):not(.remove-btn):not(.delete-btn),
  .playlist-actions button:first-child:not(.favorite-btn):not(.remove-btn):not(.delete-btn),
  .card-actions button:first-child:not(.favorite-btn):not(.remove-btn):not(.delete-btn) {
    display: none !important;
  }

  .playlist-card .site-actions,
  .playlist-actions,
  .site-actions,
  .card-actions {
    grid-column: 3 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 7px !important;
    width: 86px !important;
    margin: 0 !important;
  }

  .favorite-btn,
  .remove-btn,
  .delete-btn,
  .playlist-actions .favorite-btn,
  .playlist-actions .remove-btn,
  .site-actions .favorite-btn,
  .site-actions .remove-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 86px !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;

    padding: 0 8px !important;
    border-radius: 15px !important;

    font-size: 9px !important;
    font-weight: 800 !important;
    line-height: 1 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .history-card {
    grid-template-columns: 58px minmax(0, 1fr) !important;
  }

  .history-card .site-actions {
    display: none !important;
  }

  /* PLAYLISTS DE VÍDEOS */
  .learning-category-card,
  .mkr-video-playlist-card,
  .video-playlist-card,
  .learning-clean-card {
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto !important;
    gap: 8px 10px !important;
    padding: 12px !important;
    min-height: 112px !important;
    border-radius: 18px !important;
    align-items: center !important;
  }

  .learning-category-card .site-name,
  .learning-category-card h3,
  .mkr-video-playlist-card .site-name,
  .video-playlist-card .site-name {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: block !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .learning-category-card .site-desc,
  .learning-category-card p,
  .mkr-video-playlist-card .site-desc,
  .video-playlist-card .site-desc {
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: block !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    opacity: .72 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin: 0 !important;
  }

  .learning-category-meta,
  .playlist-meta,
  .video-counter {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    display: flex !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    margin: 2px 0 0 0 !important;
  }

  .learning-category-meta span,
  .playlist-meta span,
  .video-counter span {
    height: 24px !important;
    min-height: 24px !important;
    padding: 0 8px !important;
    border-radius: 12px !important;
    font-size: 9px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .learning-category-card .site-actions,
  .mkr-video-playlist-card .site-actions,
  .video-playlist-card .site-actions {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    margin-top: 4px !important;
  }

  .learning-category-card .site-actions button,
  .mkr-video-playlist-card .site-actions button,
  .video-playlist-card .site-actions button {
    width: 100% !important;
    height: 34px !important;
    min-height: 34px !important;
    border-radius: 17px !important;
    font-size: 10px !important;
  }

  /* YOUTUBE MUSIC */
  .music-panel-header span {
    font-size: 0 !important;
  }

  .music-panel-header span::before {
    content: "🎵" !important;
    font-size: 14px !important;
  }

  .youtube-options-pill,
  .search-result-item button:not(.search-clear-btn) {
    display: none !important;
  }

  /* FAVORITOS CENTRALIZADOS */
  .favorites-quick-panel {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    bottom: 88px !important;
    width: 92vw !important;
    max-width: 360px !important;
    max-height: 240px !important;
    padding: 8px !important;
    border-radius: 18px !important;
    z-index: 10000 !important;
  }

  /* FOOTER */
  .progress-bar,
  #progressBar,
  .footer-right {
    display: none !important;
  }

  .footer-player {
    position: fixed !important;
    left: 14px !important;
    right: 14px !important;
    bottom: 8px !important;
    width: auto !important;
    height: 72px !important;
    min-height: 72px !important;
    padding: 5px 14px 8px !important;
    z-index: 9999 !important;
    display: grid !important;
    grid-template-rows: 18px 42px !important;
    grid-template-columns: 1fr !important;
    gap: 2px !important;
    border-radius: 22px !important;
    overflow: visible !important;
  }

  .footer-left {
    width: 100% !important;
    text-align: center !important;
    min-width: 0 !important;
  }

  .track-title {
    font-size: 12px !important;
    line-height: 1.05 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-top: 0 !important;
  }

  .track-artist {
    display: none !important;
  }

  .footer-center {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 34px 44px 34px 34px 34px !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: -2px !important;
  }

  .footer-center button {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    padding: 0 !important;
    font-size: 11px !important;
    border-radius: 50% !important;
  }

  .footer-center .play-pause,
  #playPauseBtn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    font-size: 16px !important;
  }

  /* NOTIFICAÇÕES */
  .notification-container {
    position: fixed !important;
    top: 8px !important;
    left: 10px !important;
    right: 10px !important;
    max-width: none !important;
    z-index: 10050 !important;
    gap: 6px !important;
  }

  .notification {
    min-height: 34px !important;
    padding: 7px 10px !important;
    border-radius: 12px !important;
    font-size: 11px !important;
    gap: 6px !important;
  }

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

@media (max-width: 480px) {
  .logo h1 {
    font-size: 18px !important;
  }

  .theme-selector,
  .theme-dropdown-wrap {
    width: 92vw !important;
  }

  .favorite-btn,
  .remove-btn,
  .delete-btn,
  .playlist-actions .favorite-btn,
  .playlist-actions .remove-btn,
  .site-actions .favorite-btn,
  .site-actions .remove-btn {
    width: 80px !important;
    height: 29px !important;
    min-height: 29px !important;
    font-size: 8px !important;
  }

  .playlist-card .site-actions,
  .playlist-actions,
  .site-actions,
  .card-actions {
    width: 80px !important;
  }

  .site-card,
  .playlist-card,
  .history-card {
    grid-template-columns: 56px minmax(0, 1fr) 80px !important;
  }

  .footer-player {
    left: 12px !important;
    right: 12px !important;
  }

  .footer-center {
    grid-template-columns: 32px 42px 32px 32px 32px !important;
    gap: 10px !important;
  }
}


/* =========================================================
   MKR V5.6.3 - SOMENTE CSS
   Correções desta etapa:
   - Esvaziar Histórico aparece apenas no Histórico
   - Remove botão Playlist dos cards do Histórico
   - Histórico mostra somente música tocada
   - Layout dos cards de música ajustado
   - Imagem, textos e botões mais alinhados
========================================================= */

@media (max-width: 768px) {

  /* --------- BOTÃO ESVAZIAR HISTÓRICO APENAS NO HISTÓRICO --------- */

  /* por padrão, esconder esvaziar histórico fora da seção histórico */
  body:not(.mkr-cat-history) #clearHistoryBtn,
  .section-actions:not(.history-actions) #clearHistoryBtn,
  #playlistActionsWrap:not(.history-actions) #clearHistoryBtn {
    display: none !important;
  }

  /* quando estiver no histórico, deixa somente ele */
  body.mkr-cat-history #playlistActionsWrap,
  #playlistActionsWrap.history-actions {
    display: grid !important;
    grid-template-columns: minmax(160px, 230px) !important;
    justify-content: start !important;
    max-width: 230px !important;
    gap: 0 !important;
  }

  body.mkr-cat-history #clearHistoryBtn,
  #playlistActionsWrap.history-actions #clearHistoryBtn {
    display: flex !important;
    width: 100% !important;
    height: 36px !important;
    min-height: 36px !important;
    border-radius: 18px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    padding: 0 12px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body.mkr-cat-history #dynamicAddBtn,
  body.mkr-cat-history #libraryMusicBtn,
  body.mkr-cat-history .download-header-circle-btn,
  body.mkr-cat-history .download-middle-btn,
  #playlistActionsWrap.history-actions #dynamicAddBtn,
  #playlistActionsWrap.history-actions #libraryMusicBtn,
  #playlistActionsWrap.history-actions .download-header-circle-btn,
  #playlistActionsWrap.history-actions .download-middle-btn {
    display: none !important;
  }


  /* --------- CARDS DE MÚSICA / PLAYLIST --------- */

  .site-card,
  .playlist-card {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) 86px !important;
    grid-template-rows: auto auto !important;
    gap: 6px 10px !important;
    align-items: center !important;

    min-height: 84px !important;
    padding: 8px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }

  .site-thumb,
  .playlist-thumb,
  .site-card img,
  .playlist-card img,
  .site-card .card-image,
  .playlist-card .card-image,
  .site-card .thumbnail,
  .playlist-card .thumbnail,
  .site-card .site-image,
  .playlist-card .site-image {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;

    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;

    object-fit: cover !important;
    border-radius: 10px !important;
    margin: 0 !important;
  }

  .site-card-body,
  .playlist-card-body,
  .site-card-top,
  .playlist-info {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .site-name,
  .playlist-title,
  .card-title,
  .site-card h3,
  .playlist-card h3 {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;

    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;

    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;

    margin: 0 0 4px 0 !important;
    padding: 0 !important;
  }

  .site-desc,
  .site-url,
  .card-desc,
  .playlist-desc,
  .playlist-card p,
  .site-card p {
    display: block !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
    opacity: .72 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  /* remove ícones/emoji sobre capas */
  .site-icon,
  .playlist-type-icon,
  .learning-folder-icon,
  .learning-type-badge {
    display: none !important;
  }

  /* botões do card: manter Favorito e Remover */
  .site-actions,
  .playlist-actions,
  .card-actions,
  .playlist-card .site-actions {
    grid-column: 3 !important;
    grid-row: 1 / span 2 !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;

    width: 86px !important;
    gap: 7px !important;
    margin: 0 !important;
  }

  .favorite-btn,
  .remove-btn,
  .delete-btn,
  .site-actions .favorite-btn,
  .site-actions .remove-btn,
  .playlist-actions .favorite-btn,
  .playlist-actions .remove-btn,
  .playlist-card .site-actions button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 86px !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;

    padding: 0 8px !important;
    border-radius: 15px !important;

    font-size: 9px !important;
    font-weight: 800 !important;
    line-height: 1 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* esconde apenas abrir/tocar, sem esconder favorito */
  .site-actions button:first-child:not(.favorite-btn):not(.remove-btn):not(.delete-btn),
  .playlist-actions button:first-child:not(.favorite-btn):not(.remove-btn):not(.delete-btn),
  .card-actions button:first-child:not(.favorite-btn):not(.remove-btn):not(.delete-btn) {
    display: none !important;
  }


  /* --------- HISTÓRICO: SÓ MÚSICA TOCADA --------- */

  .history-card {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    gap: 6px 10px !important;
    align-items: center !important;

    min-height: 78px !important;
    padding: 8px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }

  .history-card img,
  .history-card .site-thumb,
  .history-card .playlist-thumb,
  .history-card .card-image,
  .history-card .thumbnail {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;

    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;

    object-fit: cover !important;
    border-radius: 10px !important;
    margin: 0 !important;
  }

  .history-card .site-card-body,
  .history-card .playlist-card-body,
  .history-card .history-card-body,
  .history-card .site-card-top,
  .history-card .playlist-info {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-width: 0 !important;
  }

  .history-card .site-name,
  .history-card .playlist-title,
  .history-card .card-title,
  .history-card h3 {
    display: block !important;

    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;

    margin: 0 0 4px 0 !important;
  }

  .history-card .site-desc,
  .history-card .site-url,
  .history-card .card-desc,
  .history-card .playlist-desc,
  .history-card p {
    display: block !important;
    font-size: 10px !important;
    opacity: .72 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;

    margin: 0 !important;
  }

  /* remove qualquer botão do histórico, inclusive Playlist */
  .history-card .site-actions,
  .history-card .playlist-actions,
  .history-card .card-actions,
  .history-card button,
  .history-card .btn,
  .history-card .playlist-btn,
  .history-card .favorite-btn,
  .history-card .remove-btn,
  .history-card .delete-btn {
    display: none !important;
  }

  /* remove textos laterais tipo "Tocada recentemente..." se virarem badge/extra */
  .history-card .status,
  .history-card .badge,
  .history-card .playing-now,
  .history-card .card-extra,
  .history-card .site-extra {
    display: none !important;
  }
}

@media (max-width: 480px) {

  .site-card,
  .playlist-card {
    grid-template-columns: 56px minmax(0, 1fr) 80px !important;
  }

  .site-actions,
  .playlist-actions,
  .card-actions,
  .playlist-card .site-actions {
    width: 80px !important;
  }

  .favorite-btn,
  .remove-btn,
  .delete-btn,
  .site-actions .favorite-btn,
  .site-actions .remove-btn,
  .playlist-actions .favorite-btn,
  .playlist-actions .remove-btn,
  .playlist-card .site-actions button {
    width: 80px !important;
    height: 29px !important;
    min-height: 29px !important;
    font-size: 8px !important;
  }
}


/* =========================================================
   MKR V5.6.4 - SOMENTE CSS
   Ajuste pedido:
   - No PC/site, botões de Vídeos e Playlist ficam iguais ao mobile
   - Ordem visual: +Adicionar | Download | +Biblioteca
   - Download deixa de ser bolinha no desktop
   - Não altera JS
========================================================= */

/* DESKTOP / SITE */
@media (min-width: 769px) {

  /* linha dos botões da seção no PC */
  #playlistActionsWrap,
  .section-actions {
    width: 100% !important;
    max-width: 620px !important;

    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 12px !important;

    align-items: center !important;
    justify-content: center !important;

    margin: 0 auto 18px auto !important;
    padding: 0 !important;
  }

  /* botão adicionar */
  #dynamicAddBtn,
  .section-actions .add-btn {
    width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 18px !important;
    border-radius: 22px !important;

    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1 !important;

    white-space: nowrap !important;
  }

  /* botão download no desktop igual aos outros */
  .download-header-circle-btn,
  .download-middle-btn {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 42px !important;
    min-height: 42px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    position: relative !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;

    margin: 0 !important;
    padding: 0 18px !important;

    border-radius: 22px !important;

    font-family: inherit !important;
    font-size: 0 !important;
    font-weight: 800 !important;
    line-height: 1 !important;

    white-space: nowrap !important;
  }

  .download-header-circle-btn::before,
  .download-middle-btn::before {
    content: "Download" !important;
    display: inline-flex !important;

    color: #fff !important;

    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }

  /* badge do download menor no desktop */
  .download-header-circle-btn .download-badge,
  .download-middle-btn .download-badge {
    top: -8px !important;
    right: -8px !important;
  }

  /* biblioteca igual aos outros */
  #libraryMusicBtn,
  .section-actions label {
    width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 18px !important;
    border-radius: 22px !important;

    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1 !important;

    white-space: nowrap !important;
  }

  /* mantém histórico sem download/biblioteca se a classe existir */
  body.mkr-cat-history #playlistActionsWrap,
  #playlistActionsWrap.history-actions {
    max-width: 260px !important;
    grid-template-columns: 1fr !important;
    justify-content: start !important;
    margin-left: 0 !important;
  }

  body.mkr-cat-history #dynamicAddBtn,
  body.mkr-cat-history .download-header-circle-btn,
  body.mkr-cat-history .download-middle-btn,
  body.mkr-cat-history #libraryMusicBtn,
  #playlistActionsWrap.history-actions #dynamicAddBtn,
  #playlistActionsWrap.history-actions .download-header-circle-btn,
  #playlistActionsWrap.history-actions .download-middle-btn,
  #playlistActionsWrap.history-actions #libraryMusicBtn {
    display: none !important;
  }
}

/* AJUSTE ESPECIAL PARA TELAS DESKTOP MENORES */
@media (min-width: 769px) and (max-width: 1024px) {

  #playlistActionsWrap,
  .section-actions {
    max-width: 560px !important;
    gap: 10px !important;
  }

  #dynamicAddBtn,
  .section-actions .add-btn,
  #libraryMusicBtn,
  .section-actions label,
  .download-header-circle-btn,
  .download-middle-btn {
    height: 40px !important;
    min-height: 40px !important;
    font-size: 13px !important;
  }

  .download-header-circle-btn::before,
  .download-middle-btn::before {
    font-size: 13px !important;
  }
}


/* =========================================================
   MKR V5.6.5 - SOMENTE CSS
   Ajuste pedido:
   - No PC/site, botões ficam à direita
   - Botão do Histórico também fica à direita
   - Mobile não é alterado
========================================================= */

@media (min-width: 769px) {

  /* área dos botões no desktop fica alinhada à direita */
  #playlistActionsWrap,
  .section-actions {
    width: auto !important;
    max-width: none !important;

    display: grid !important;
    grid-template-columns: 170px 170px 170px !important;
    gap: 12px !important;

    align-items: center !important;
    justify-content: end !important;
    justify-items: stretch !important;

    margin: 0 0 18px auto !important;
    padding: 0 !important;
  }

  #dynamicAddBtn,
  .section-actions .add-btn,
  #libraryMusicBtn,
  .section-actions label,
  .download-header-circle-btn,
  .download-middle-btn {
    width: 170px !important;
    max-width: 170px !important;
    height: 42px !important;
    min-height: 42px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 16px !important;
    border-radius: 22px !important;

    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .download-header-circle-btn,
  .download-middle-btn {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    margin: 0 !important;
    font-size: 0 !important;
  }

  .download-header-circle-btn::before,
  .download-middle-btn::before {
    content: "Download" !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    font-family: inherit !important;
  }

  /* histórico: apenas 1 botão, alinhado à direita */
  body.mkr-cat-history #playlistActionsWrap,
  #playlistActionsWrap.history-actions {
    width: auto !important;
    max-width: none !important;

    display: grid !important;
    grid-template-columns: 220px !important;
    justify-content: end !important;

    margin: 0 0 18px auto !important;
  }

  body.mkr-cat-history #clearHistoryBtn,
  #playlistActionsWrap.history-actions #clearHistoryBtn {
    display: flex !important;
    width: 220px !important;
    max-width: 220px !important;
    height: 42px !important;
    min-height: 42px !important;
    border-radius: 22px !important;
    justify-content: center !important;
    align-items: center !important;
    font-size: 14px !important;
    font-weight: 800 !important;
  }

  body.mkr-cat-history #dynamicAddBtn,
  body.mkr-cat-history .download-header-circle-btn,
  body.mkr-cat-history .download-middle-btn,
  body.mkr-cat-history #libraryMusicBtn,
  #playlistActionsWrap.history-actions #dynamicAddBtn,
  #playlistActionsWrap.history-actions .download-header-circle-btn,
  #playlistActionsWrap.history-actions .download-middle-btn,
  #playlistActionsWrap.history-actions #libraryMusicBtn {
    display: none !important;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {

  #playlistActionsWrap,
  .section-actions {
    grid-template-columns: 145px 145px 145px !important;
    gap: 10px !important;
  }

  #dynamicAddBtn,
  .section-actions .add-btn,
  #libraryMusicBtn,
  .section-actions label,
  .download-header-circle-btn,
  .download-middle-btn {
    width: 145px !important;
    max-width: 145px !important;
    height: 40px !important;
    min-height: 40px !important;
    font-size: 13px !important;
  }

  .download-header-circle-btn::before,
  .download-middle-btn::before {
    font-size: 13px !important;
  }

  body.mkr-cat-history #clearHistoryBtn,
  #playlistActionsWrap.history-actions #clearHistoryBtn {
    width: 200px !important;
    max-width: 200px !important;
    height: 40px !important;
    min-height: 40px !important;
    font-size: 13px !important;
  }
}


/* =========================================================
   MKR V5.6.6 - SOMENTE CSS
   Ajuste pedido:
   - No celular, Esvaziar Histórico ocupa a largura toda
   - Texto centralizado
   - Footer mais alto
   - Botões internos mais altos/menos na ponta
   - Notificações menores
========================================================= */

@media (max-width: 768px) {

  /* histórico full width */
  body.mkr-cat-history #playlistActionsWrap,
  #playlistActionsWrap.history-actions {
    width: 100% !important;
    max-width: none !important;

    display: grid !important;
    grid-template-columns: 1fr !important;

    justify-content: stretch !important;
    justify-items: stretch !important;

    margin: 0 0 12px 0 !important;
  }

  body.mkr-cat-history #clearHistoryBtn,
  #playlistActionsWrap.history-actions #clearHistoryBtn {
    width: 100% !important;
    max-width: none !important;

    height: 38px !important;
    min-height: 38px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    text-align: center !important;

    padding: 0 12px !important;
    border-radius: 19px !important;

    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }

  /* footer mais alto */
  .footer-player {
    left: 12px !important;
    right: 12px !important;
    bottom: 8px !important;

    height: 84px !important;
    min-height: 84px !important;

    padding: 7px 14px 10px !important;

    grid-template-rows: 22px 50px !important;
    gap: 3px !important;

    border-radius: 22px !important;
  }

  .footer-left {
    margin-top: 1px !important;
  }

  .track-title {
    font-size: 12px !important;
    line-height: 1.05 !important;
    margin: 0 !important;
  }

  /* controles sobem e ficam mais centralizados */
  .footer-center {
    width: 100% !important;

    display: grid !important;
    grid-template-columns: 34px 48px 34px 34px 34px !important;

    justify-content: center !important;
    align-items: center !important;

    gap: 13px !important;

    margin-top: -4px !important;
  }

  .footer-center button {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    padding: 0 !important;
  }

  #playPauseBtn,
  .footer-center .play-pause {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
  }

  /* notificações menores */
  .notification-container {
    top: 6px !important;
    left: 10px !important;
    right: 10px !important;
    gap: 5px !important;
  }

  .notification {
    min-height: 30px !important;
    padding: 6px 9px !important;

    border-radius: 11px !important;

    font-size: 10px !important;
    line-height: 1.2 !important;

    gap: 5px !important;
  }

  .notification button {
    font-size: 11px !important;
  }
}


/* =========================================================
   MKR V5.6.7 - SOMENTE CSS
   - Mesma fonte/tamanho nos botões
   - Footer com botões centralizados
   - Playlist de vídeo reorganizada
========================================================= */

button,
.btn,
.add-btn,
.remove-btn,
.favorite-btn,
.delete-btn,
.play-btn,
#dynamicAddBtn,
#libraryMusicBtn,
#clearHistoryBtn,
.download-header-circle-btn,
.download-middle-btn,
.section-actions label {
  font-family: inherit !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

#playlistActionsWrap button,
.section-actions button,
.section-actions label,
#dynamicAddBtn,
#libraryMusicBtn,
.download-header-circle-btn,
.download-middle-btn,
#clearHistoryBtn {
  font-size: 13px !important;
  line-height: 1 !important;
  height: 40px !important;
  min-height: 40px !important;
  border-radius: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.download-header-circle-btn,
.download-middle-btn {
  color: transparent !important;
  font-size: 0 !important;
}

.download-header-circle-btn::before,
.download-middle-btn::before {
  content: "Download" !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  font-family: inherit !important;
  line-height: 1 !important;
}

#libraryMusicBtn {
  font-size: 0 !important;
}

#libraryMusicBtn::before {
  content: "+ Biblioteca" !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  font-family: inherit !important;
  line-height: 1 !important;
}

@media (max-width: 768px) {

  #playlistActionsWrap,
  .section-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    align-items: center !important;
  }

  #playlistActionsWrap button,
  .section-actions button,
  .section-actions label,
  #dynamicAddBtn,
  #libraryMusicBtn,
  .download-header-circle-btn,
  .download-middle-btn,
  #clearHistoryBtn {
    width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 0 10px !important;
    border-radius: 19px !important;
    font-size: 11px !important;
  }

  .download-header-circle-btn::before,
  .download-middle-btn::before,
  #libraryMusicBtn::before {
    font-size: 11px !important;
  }

  body.mkr-cat-history #playlistActionsWrap,
  #playlistActionsWrap.history-actions {
    grid-template-columns: 1fr !important;
    max-width: none !important;
    width: 100% !important;
  }

  .footer-player {
    height: 88px !important;
    min-height: 88px !important;
    padding: 8px 14px 10px !important;
    grid-template-rows: 24px 50px !important;
    gap: 2px !important;
  }

  .footer-left {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 22px !important;
  }

  .track-title {
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    max-width: 92% !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  .track-artist {
    display: none !important;
  }

  .footer-center {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 36px 50px 36px 36px 36px !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 13px !important;
    margin-top: -3px !important;
  }

  .footer-center button {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    font-size: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #playPauseBtn,
  .footer-center .play-pause {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    font-size: 17px !important;
  }

  .learning-category-card,
  .mkr-video-playlist-card,
  .video-playlist-card,
  .learning-clean-card {
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto !important;
    gap: 8px 10px !important;
    align-items: center !important;
    padding: 12px !important;
    min-height: 104px !important;
    border-radius: 18px !important;
  }

  .learning-category-card img,
  .mkr-video-playlist-card img,
  .video-playlist-card img,
  .learning-clean-card img,
  .learning-category-card .site-thumb,
  .mkr-video-playlist-card .site-thumb,
  .video-playlist-card .site-thumb,
  .learning-clean-card .site-thumb,
  .learning-category-card .playlist-thumb,
  .mkr-video-playlist-card .playlist-thumb,
  .video-playlist-card .playlist-thumb,
  .learning-clean-card .playlist-thumb {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    object-fit: cover !important;
    border-radius: 12px !important;
    margin: 0 !important;
  }

  .learning-category-card .site-name,
  .learning-category-card h3,
  .mkr-video-playlist-card .site-name,
  .video-playlist-card .site-name,
  .learning-clean-card .site-name,
  .learning-clean-card h3 {
    grid-column: 2 !important;
    grid-row: 1 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: left !important;
  }

  .learning-category-card .site-desc,
  .learning-category-card p,
  .mkr-video-playlist-card .site-desc,
  .video-playlist-card .site-desc,
  .learning-clean-card .site-desc,
  .learning-clean-card p {
    grid-column: 2 !important;
    grid-row: 2 !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    opacity: .72 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: left !important;
  }

  .learning-category-meta,
  .playlist-meta,
  .video-counter {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    display: flex !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    margin-top: 4px !important;
  }

  .learning-category-meta span,
  .playlist-meta span,
  .video-counter span {
    height: 24px !important;
    min-height: 24px !important;
    padding: 0 8px !important;
    border-radius: 12px !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .learning-category-card .site-actions,
  .mkr-video-playlist-card .site-actions,
  .video-playlist-card .site-actions,
  .learning-clean-card .site-actions {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
    width: 100% !important;
    margin-top: 6px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .learning-category-card .site-actions button,
  .mkr-video-playlist-card .site-actions button,
  .video-playlist-card .site-actions button,
  .learning-clean-card .site-actions button {
    width: 100% !important;
    height: 36px !important;
    min-height: 36px !important;
    border-radius: 18px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
  }
}

@media (max-width: 480px) {
  #playlistActionsWrap button,
  .section-actions button,
  .section-actions label,
  #dynamicAddBtn,
  #libraryMusicBtn,
  .download-header-circle-btn,
  .download-middle-btn,
  #clearHistoryBtn {
    font-size: 10px !important;
    padding: 0 7px !important;
  }

  .download-header-circle-btn::before,
  .download-middle-btn::before,
  #libraryMusicBtn::before {
    font-size: 10px !important;
  }

  .footer-center {
    grid-template-columns: 34px 48px 34px 34px 34px !important;
    gap: 10px !important;
  }
}


/* =========================================================
   MKR V5.6.8 - SOMENTE CSS
   - Corrige Biblioteca duplicada
   - Centraliza textos dos botões
   - Reforça layout da playlist de vídeo no celular
   - Sobe YouTube Music para não ficar embaixo do footer
========================================================= */

@media (max-width: 768px) {

  #playlistActionsWrap button,
  .section-actions button,
  .section-actions label,
  #dynamicAddBtn,
  #libraryMusicBtn,
  #clearHistoryBtn,
  .download-header-circle-btn,
  .download-middle-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    font-family: inherit !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    padding: 0 8px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  #libraryMusicBtn {
    font-size: 0 !important;
    color: transparent !important;
  }

  #libraryMusicBtn::before {
    content: "+ Biblioteca" !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-align: center !important;
  }

  .download-header-circle-btn,
  .download-middle-btn {
    font-size: 0 !important;
    color: transparent !important;
  }

  .download-header-circle-btn::before,
  .download-middle-btn::before {
    content: "Download" !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }

  .mkr-learning-content .site-card,
  .mkr-learning-content .playlist-card,
  .mkr-learning-content .learning-card,
  .mkr-learning-content .learning-category-card,
  .mkr-learning-content .video-playlist-card,
  .mkr-learning-content .mkr-video-playlist-card,
  .mkr-learning-content .learning-clean-card,
  #sitesContainer .learning-card,
  #sitesContainer .learning-category-card,
  #sitesContainer .video-playlist-card,
  #sitesContainer .mkr-video-playlist-card,
  #sitesContainer .learning-clean-card {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 62px minmax(0, 1fr) 82px !important;
    grid-template-rows: auto auto !important;
    gap: 8px 10px !important;
    align-items: center !important;
    min-height: 86px !important;
    padding: 9px !important;
    border-radius: 16px !important;
    text-align: left !important;
    overflow: hidden !important;
  }

  .mkr-learning-content .site-card img,
  .mkr-learning-content .playlist-card img,
  .mkr-learning-content .learning-card img,
  .mkr-learning-content .learning-category-card img,
  .mkr-learning-content .video-playlist-card img,
  .mkr-learning-content .mkr-video-playlist-card img,
  .mkr-learning-content .learning-clean-card img,
  #sitesContainer .learning-card img,
  #sitesContainer .learning-category-card img,
  #sitesContainer .video-playlist-card img,
  #sitesContainer .mkr-video-playlist-card img,
  #sitesContainer .learning-clean-card img,
  .mkr-learning-content .site-thumb,
  .mkr-learning-content .playlist-thumb,
  .mkr-learning-content .learning-thumb,
  .mkr-learning-content .learning-thumb-wrap {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    object-fit: cover !important;
    border-radius: 11px !important;
    margin: 0 !important;
  }

  .mkr-learning-content .site-card-body,
  .mkr-learning-content .playlist-info,
  .mkr-learning-content .playlist-card-body,
  .mkr-learning-content .learning-info,
  .mkr-learning-content .card-info,
  #sitesContainer .learning-card .site-card-body,
  #sitesContainer .learning-category-card .site-card-body,
  #sitesContainer .video-playlist-card .site-card-body,
  #sitesContainer .mkr-video-playlist-card .site-card-body,
  #sitesContainer .learning-clean-card .site-card-body {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-align: left !important;
  }

  .mkr-learning-content .site-name,
  .mkr-learning-content .playlist-title,
  .mkr-learning-content .card-title,
  .mkr-learning-content .learning-title,
  .mkr-learning-content h3,
  #sitesContainer .learning-card h3,
  #sitesContainer .learning-category-card h3,
  #sitesContainer .video-playlist-card h3,
  #sitesContainer .mkr-video-playlist-card h3,
  #sitesContainer .learning-clean-card h3 {
    display: block !important;
    width: 100% !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    margin: 0 0 4px 0 !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .mkr-learning-content .site-desc,
  .mkr-learning-content .playlist-desc,
  .mkr-learning-content .card-desc,
  .mkr-learning-content .learning-desc,
  .mkr-learning-content p,
  #sitesContainer .learning-card p,
  #sitesContainer .learning-category-card p,
  #sitesContainer .video-playlist-card p,
  #sitesContainer .mkr-video-playlist-card p,
  #sitesContainer .learning-clean-card p {
    display: block !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
    opacity: .72 !important;
    margin: 0 !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .mkr-learning-content .site-actions,
  .mkr-learning-content .playlist-actions,
  .mkr-learning-content .card-actions,
  .mkr-learning-content .learning-actions,
  #sitesContainer .learning-card .site-actions,
  #sitesContainer .learning-category-card .site-actions,
  #sitesContainer .video-playlist-card .site-actions,
  #sitesContainer .mkr-video-playlist-card .site-actions,
  #sitesContainer .learning-clean-card .site-actions {
    grid-column: 3 !important;
    grid-row: 1 / span 2 !important;
    width: 82px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    margin: 0 !important;
  }

  .mkr-learning-content .site-actions button,
  .mkr-learning-content .playlist-actions button,
  .mkr-learning-content .card-actions button,
  .mkr-learning-content .learning-actions button,
  #sitesContainer .learning-card .site-actions button,
  #sitesContainer .learning-category-card .site-actions button,
  #sitesContainer .video-playlist-card .site-actions button,
  #sitesContainer .mkr-video-playlist-card .site-actions button,
  #sitesContainer .learning-clean-card .site-actions button {
    width: 82px !important;
    height: 28px !important;
    min-height: 28px !important;
    border-radius: 14px !important;
    font-size: 8px !important;
    font-weight: 800 !important;
    padding: 0 6px !important;
  }

  .mkr-learning-content .site-icon,
  .mkr-learning-content .learning-folder-icon,
  .mkr-learning-content .learning-type-badge {
    display: none !important;
  }

  .music-panel {
    bottom: 106px !important;
    z-index: 9998 !important;
  }

  .music-panel:not(.collapsed) {
    bottom: 106px !important;
  }

  .footer-player {
    z-index: 9999 !important;
  }
}

@media (max-width: 480px) {
  .mkr-learning-content .site-card,
  .mkr-learning-content .playlist-card,
  .mkr-learning-content .learning-card,
  .mkr-learning-content .learning-category-card,
  .mkr-learning-content .video-playlist-card,
  .mkr-learning-content .mkr-video-playlist-card,
  .mkr-learning-content .learning-clean-card,
  #sitesContainer .learning-card,
  #sitesContainer .learning-category-card,
  #sitesContainer .video-playlist-card,
  #sitesContainer .mkr-video-playlist-card,
  #sitesContainer .learning-clean-card {
    grid-template-columns: 60px minmax(0, 1fr) 76px !important;
  }

  .mkr-learning-content .site-actions,
  .mkr-learning-content .playlist-actions,
  .mkr-learning-content .card-actions,
  .mkr-learning-content .learning-actions,
  #sitesContainer .learning-card .site-actions,
  #sitesContainer .learning-category-card .site-actions,
  #sitesContainer .video-playlist-card .site-actions,
  #sitesContainer .mkr-video-playlist-card .site-actions,
  #sitesContainer .learning-clean-card .site-actions {
    width: 76px !important;
  }

  .mkr-learning-content .site-actions button,
  .mkr-learning-content .playlist-actions button,
  .mkr-learning-content .card-actions button,
  .mkr-learning-content .learning-actions button,
  #sitesContainer .learning-card .site-actions button,
  #sitesContainer .learning-category-card .site-actions button,
  #sitesContainer .video-playlist-card .site-actions button,
  #sitesContainer .mkr-video-playlist-card .site-actions button,
  #sitesContainer .learning-clean-card .site-actions button {
    width: 76px !important;
    font-size: 7px !important;
  }
}


/* =========================================================
   MKR V5.6.9 - SOMENTE CSS
   - Modal vídeo/anotações no celular
   - Vídeo maior no topo
   - Anotações embaixo
   - YouTube Music escondido com modal aberto
========================================================= */

@media (max-width:768px){

.learning-video-viewer,
.study-modal,
.study-video-modal,
.video-study-modal,
.pro-video-modal,
.learning-video-modal{
position:fixed !important;
inset:8px !important;
width:auto !important;
height:auto !important;
max-width:none !important;
max-height:none !important;
transform:none !important;
z-index:10080 !important;
border-radius:18px !important;
overflow:hidden !important;
}

.learning-video-shell,
.learning-video-content,
.study-modal-content,
.study-video-content,
.pro-video-content,
.video-study-content,
.learning-video-viewer .modal-content{
width:100% !important;
height:100% !important;
max-width:none !important;
max-height:none !important;
display:flex !important;
flex-direction:column !important;
overflow:hidden !important;
border-radius:18px !important;
}

.learning-video-header,
.study-modal-header,
.video-study-header,
.pro-video-header{
height:48px !important;
min-height:48px !important;
padding:0 12px !important;
display:flex !important;
align-items:center !important;
gap:8px !important;
}

.learning-video-header h2,
.learning-video-header h3,
.study-modal-header h2,
.study-modal-header h3,
.video-study-header h2,
.video-study-header h3,
.pro-video-header h2,
.pro-video-header h3{
font-size:13px !important;
line-height:1.2 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}

.learning-video-layout,
.study-modal-body,
.study-video-body,
.video-study-body,
.pro-video-body,
.learning-video-body{
display:grid !important;
grid-template-columns:1fr !important;
grid-template-rows:42vh minmax(0,1fr) auto !important;
gap:10px !important;
height:calc(100vh - 72px) !important;
max-height:calc(100vh - 72px) !important;
overflow-y:auto !important;
padding:10px !important;
}

.learning-video-player,
.study-video-player,
.video-player-area,
.pro-video-player,
.learning-video-frame,
.study-video-frame,
.learning-video-layout > video,
.learning-video-layout > iframe,
.study-modal-body > video,
.study-modal-body > iframe,
.video-study-body > video,
.video-study-body > iframe{
grid-column:1 !important;
grid-row:1 !important;
width:100% !important;
height:42vh !important;
min-height:220px !important;
max-height:320px !important;
border-radius:16px !important;
overflow:hidden !important;
background:#000 !important;
}

.learning-video-player video,
.learning-video-player iframe,
.study-video-player video,
.study-video-player iframe,
.video-player-area video,
.video-player-area iframe,
.pro-video-player video,
.pro-video-player iframe,
.learning-video-frame video,
.learning-video-frame iframe,
.study-video-frame video,
.study-video-frame iframe,
#studyVideoFrame,
#learningVideoFrame{
width:100% !important;
height:100% !important;
min-height:220px !important;
object-fit:contain !important;
border-radius:16px !important;
background:#000 !important;
}

.learning-video-notes,
.study-notes,
.study-notes-panel,
.video-notes,
.pro-video-notes,
.notes-panel{
grid-column:1 !important;
grid-row:2 !important;
width:100% !important;
height:auto !important;
padding:0 !important;
border-left:none !important;
display:flex !important;
flex-direction:column !important;
gap:8px !important;
}

.learning-video-notes h3,
.study-notes h3,
.study-notes-panel h3,
.video-notes h3,
.pro-video-notes h3,
.notes-panel h3{
font-size:14px !important;
margin:0 !important;
}

.learning-video-notes textarea,
.study-notes textarea,
.study-notes-panel textarea,
.video-notes textarea,
.pro-video-notes textarea,
.notes-panel textarea,
#studyNotes,
#learningNotes{
width:100% !important;
min-height:170px !important;
height:22vh !important;
max-height:260px !important;
border-radius:16px !important;
padding:12px !important;
resize:vertical !important;
}

.notes-actions,
.learning-video-actions,
.study-footer-actions,
.study-actions,
.video-notes-actions,
.pro-video-actions,
.modal-actions{
grid-column:1 !important;
grid-row:3 !important;
width:100% !important;
display:grid !important;
grid-template-columns:1fr 1fr !important;
gap:8px !important;
padding:0 0 8px 0 !important;
}

.notes-actions button,
.learning-video-actions button,
.study-footer-actions button,
.study-actions button,
.video-notes-actions button,
.pro-video-actions button,
.modal-actions button{
height:38px !important;
min-height:38px !important;
border-radius:19px !important;
font-size:11px !important;
font-weight:800 !important;
}

body:has(.learning-video-viewer:not(.hidden)) .music-panel,
body:has(.study-modal:not(.hidden)) .music-panel,
body:has(.study-video-modal:not(.hidden)) .music-panel,
body:has(.video-study-modal:not(.hidden)) .music-panel,
body:has(.pro-video-modal:not(.hidden)) .music-panel,
body:has(.learning-video-modal:not(.hidden)) .music-panel,
{
display:none !important;
}
}

@media (max-width:480px){
.learning-video-layout,
.study-modal-body,
.study-video-body,
.video-study-body,
.pro-video-body,
.learning-video-body{
grid-template-rows:38vh minmax(0,1fr) auto !important;
}

.learning-video-player,
.study-video-player,
.video-player-area,
.pro-video-player,
.learning-video-frame,
.study-video-frame,
.learning-video-layout > video,
.learning-video-layout > iframe,
.study-modal-body > video,
.study-modal-body > iframe,
.video-study-body > video,
.video-study-body > iframe{
height:38vh !important;
min-height:200px !important;
}

.learning-video-notes textarea,
.study-notes textarea,
.study-notes-panel textarea,
.video-notes textarea,
.pro-video-notes textarea,
.notes-panel textarea,
#studyNotes,
#learningNotes{
min-height:150px !important;
height:20vh !important;
}
}


/* =========================================================
   MKR V5.6.10 - SOMENTE CSS
   Correção:
   - YouTube Music NÃO é removido
   - Quando o modal de vídeo/anotações abre, o painel fica atrás
   - Evita sobrepor o vídeo, mas continua existindo
========================================================= */

@media (max-width: 768px) {

  /* Painel normal do YouTube Music continua ativo */
  .music-panel {
    display: block !important;
    bottom: 106px !important;
    z-index: 9998 !important;
  }

  .music-panel:not(.collapsed) {
    bottom: 106px !important;
  }

  /* Com modal de vídeo aberto: não remove, só joga para trás e tira clique */
  body:has(.learning-video-viewer:not(.hidden)) .music-panel,
  body:has(.study-modal:not(.hidden)) .music-panel,
  body:has(.study-video-modal:not(.hidden)) .music-panel,
  body:has(.video-study-modal:not(.hidden)) .music-panel,
  body:has(.pro-video-modal:not(.hidden)) .music-panel,
  body:has(.learning-video-modal:not(.hidden)) .music-panel,
  body:has(.learning-video-viewer.active) .music-panel,
  body:has(.learning-video-viewer.open) .music-panel,
  body:has(.learning-video-viewer.show) .music-panel,
  body:has(.study-modal.active) .music-panel,
  body:has(.study-modal.open) .music-panel,
  body:has(.study-modal.show) .music-panel,
  body:has(.video-study-modal.active) .music-panel,
  body:has(.video-study-modal.open) .music-panel,
  body:has(.video-study-modal.show) .music-panel {
    display: block !important;
    opacity: .18 !important;
    pointer-events: none !important;
    z-index: 900 !important;
    bottom: 8px !important;
  }

  /* Modal sempre acima do YouTube Music */
  .learning-video-viewer,
  .study-modal,
  .study-video-modal,
  .video-study-modal,
  .pro-video-modal,
  .learning-video-modal {
    z-index: 10080 !important;
  }
}


/* =========================================================
   MKR V5.6.11 - SOMENTE CSS
   Ajuste pedido:
   - Modal de vídeo centralizado no celular
   - Modal sem encostar nas laterais
   - Footer com botões mais altos, sem ficar no limite inferior
========================================================= */

@media (max-width: 768px) {

  /* MODAL DE VÍDEO CENTRALIZADO */
  .learning-video-viewer,
  .study-modal,
  .study-video-modal,
  .video-study-modal,
  .pro-video-modal,
  .learning-video-modal {
    position: fixed !important;

    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;

    transform: translate(-50%, -50%) !important;

    width: min(94vw, 430px) !important;
    height: min(88vh, 720px) !important;

    max-width: 430px !important;
    max-height: 720px !important;

    border-radius: 18px !important;
    overflow: hidden !important;
    z-index: 10080 !important;
  }

  .learning-video-shell,
  .learning-video-content,
  .study-modal-content,
  .study-video-content,
  .pro-video-content,
  .video-study-content,
  .learning-video-viewer .modal-content {
    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    display: flex !important;
    flex-direction: column !important;

    border-radius: 18px !important;
    overflow: hidden !important;
  }

  .learning-video-header,
  .study-modal-header,
  .video-study-header,
  .pro-video-header {
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 12px !important;
  }

  .learning-video-layout,
  .study-modal-body,
  .study-video-body,
  .video-study-body,
  .pro-video-body,
  .learning-video-body {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(210px, 34vh) minmax(160px, 1fr) auto !important;

    height: calc(100% - 46px) !important;
    max-height: calc(100% - 46px) !important;

    gap: 10px !important;
    padding: 10px !important;

    overflow-y: auto !important;
  }

  .learning-video-player,
  .study-video-player,
  .video-player-area,
  .pro-video-player,
  .learning-video-frame,
  .study-video-frame,
  .learning-video-layout > video,
  .learning-video-layout > iframe,
  .study-modal-body > video,
  .study-modal-body > iframe,
  .video-study-body > video,
  .video-study-body > iframe {
    width: 100% !important;
    height: 34vh !important;
    min-height: 210px !important;
    max-height: 300px !important;

    border-radius: 16px !important;
    background: #000 !important;
    overflow: hidden !important;
  }

  .learning-video-player video,
  .learning-video-player iframe,
  .study-video-player video,
  .study-video-player iframe,
  .video-player-area video,
  .video-player-area iframe,
  .pro-video-player video,
  .pro-video-player iframe,
  .learning-video-frame video,
  .learning-video-frame iframe,
  .study-video-frame video,
  .study-video-frame iframe,
  #studyVideoFrame,
  #learningVideoFrame {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    border-radius: 16px !important;
  }

  .learning-video-notes textarea,
  .study-notes textarea,
  .study-notes-panel textarea,
  .video-notes textarea,
  .pro-video-notes textarea,
  .notes-panel textarea,
  #studyNotes,
  #learningNotes {
    min-height: 135px !important;
    height: 20vh !important;
    max-height: 230px !important;
  }

  /* FOOTER: sobe botões e tira do limite inferior */
  .footer-player {
    bottom: 14px !important;

    height: 90px !important;
    min-height: 90px !important;

    padding: 8px 14px 16px !important;

    grid-template-rows: 22px 50px !important;
    gap: 2px !important;

    border-radius: 24px !important;
  }

  .footer-center {
    margin-top: -6px !important;
    align-items: center !important;
  }

  .footer-center button {
    transform: translateY(-2px) !important;
  }

  #playPauseBtn,
  .footer-center .play-pause {
    transform: translateY(-2px) !important;
  }

  /* painel YouTube Music acompanha o footer mais alto */
  .music-panel {
    bottom: 118px !important;
  }

  .music-panel:not(.collapsed) {
    bottom: 118px !important;
  }
}

@media (max-width: 480px) {

  .learning-video-viewer,
  .study-modal,
  .study-video-modal,
  .video-study-modal,
  .pro-video-modal,
  .learning-video-modal {
    width: 94vw !important;
    height: 88vh !important;
  }

  .learning-video-player,
  .study-video-player,
  .video-player-area,
  .pro-video-player,
  .learning-video-frame,
  .study-video-frame,
  .learning-video-layout > video,
  .learning-video-layout > iframe,
  .study-modal-body > video,
  .study-modal-body > iframe,
  .video-study-body > video,
  .video-study-body > iframe {
    height: 30vh !important;
    min-height: 190px !important;
  }

  .footer-player {
    bottom: 12px !important;
    height: 88px !important;
    min-height: 88px !important;
    padding-bottom: 15px !important;
  }

  .music-panel {
    bottom: 114px !important;
  }

  .music-panel:not(.collapsed) {
    bottom: 114px !important;
  }
}


/* =========================================================
   MKR V5.6.13 - SOMENTE CSS
   Ajuste pedido:
   - Maximizado = tela inteira
   - Normal = modal menor e footer utilizável
   - Não altera JS
========================================================= */

@media (max-width: 768px) {

  /* NORMAL: deixa espaço para usar o footer */
  .learning-video-viewer:not(.maximized):not(.fullscreen):not(.is-fullscreen),
  .study-modal:not(.maximized):not(.fullscreen):not(.is-fullscreen),
  .study-video-modal:not(.maximized):not(.fullscreen):not(.is-fullscreen),
  .video-study-modal:not(.maximized):not(.fullscreen):not(.is-fullscreen),
  .pro-video-modal:not(.maximized):not(.fullscreen):not(.is-fullscreen),
  .learning-video-modal:not(.maximized):not(.fullscreen):not(.is-fullscreen) {
    position: fixed !important;

    top: 46% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;

    transform: translate(-50%, -50%) !important;

    width: min(94vw, 430px) !important;
    height: calc(100vh - 145px) !important;

    max-width: 430px !important;
    max-height: 680px !important;

    margin: 0 !important;

    border-radius: 18px !important;
    overflow: hidden !important;
    z-index: 10080 !important;
  }

  /* MAXIMIZADO: tela inteira de verdade */
  .learning-video-viewer.maximized,
  .learning-video-viewer.fullscreen,
  .learning-video-viewer.is-fullscreen,
  .study-modal.maximized,
  .study-modal.fullscreen,
  .study-modal.is-fullscreen,
  .study-video-modal.maximized,
  .study-video-modal.fullscreen,
  .study-video-modal.is-fullscreen,
  .video-study-modal.maximized,
  .video-study-modal.fullscreen,
  .video-study-modal.is-fullscreen,
  .pro-video-modal.maximized,
  .pro-video-modal.fullscreen,
  .pro-video-modal.is-fullscreen,
  .learning-video-modal.maximized,
  .learning-video-modal.fullscreen,
  .learning-video-modal.is-fullscreen {
    position: fixed !important;

    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    transform: none !important;

    width: 100vw !important;
    height: 100vh !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;

    border-radius: 0 !important;
    overflow: hidden !important;
    z-index: 20000 !important;
  }

  /* conteúdo interno em ambos os modos */
  .learning-video-shell,
  .learning-video-content,
  .study-modal-content,
  .study-video-content,
  .pro-video-content,
  .video-study-content,
  .learning-video-viewer .modal-content {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;

    display: flex !important;
    flex-direction: column !important;

    overflow: hidden !important;
  }

  /* no maximizado remove arredondamento interno */
  .learning-video-viewer.maximized .learning-video-shell,
  .learning-video-viewer.fullscreen .learning-video-shell,
  .learning-video-viewer.is-fullscreen .learning-video-shell,
  .study-modal.maximized .study-modal-content,
  .study-modal.fullscreen .study-modal-content,
  .study-modal.is-fullscreen .study-modal-content,
  .study-video-modal.maximized .study-video-content,
  .video-study-modal.maximized .video-study-content,
  .pro-video-modal.maximized .pro-video-content,
  .learning-video-modal.maximized .learning-video-content {
    border-radius: 0 !important;
  }

  /* header do modal */
  .learning-video-header,
  .study-modal-header,
  .video-study-header,
  .pro-video-header {
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 12px !important;
  }

  /* layout normal: vídeo em cima e anotações abaixo */
  .learning-video-layout,
  .study-modal-body,
  .study-video-body,
  .video-study-body,
  .pro-video-body,
  .learning-video-body {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(190px, 32vh) minmax(140px, 1fr) auto !important;

    height: calc(100% - 46px) !important;
    max-height: calc(100% - 46px) !important;

    gap: 10px !important;
    padding: 10px !important;

    overflow-y: auto !important;
  }

  /* layout maximizado: vídeo maior */
  .learning-video-viewer.maximized .learning-video-layout,
  .learning-video-viewer.fullscreen .learning-video-layout,
  .learning-video-viewer.is-fullscreen .learning-video-layout,
  .study-modal.maximized .study-modal-body,
  .study-modal.fullscreen .study-modal-body,
  .study-modal.is-fullscreen .study-modal-body,
  .study-video-modal.maximized .study-video-body,
  .video-study-modal.maximized .video-study-body,
  .pro-video-modal.maximized .pro-video-body,
  .learning-video-modal.maximized .learning-video-body {
    grid-template-rows: minmax(260px, 48vh) minmax(140px, 1fr) auto !important;
    padding: 10px !important;
  }

  /* vídeo normal */
  .learning-video-player,
  .study-video-player,
  .video-player-area,
  .pro-video-player,
  .learning-video-frame,
  .study-video-frame,
  .learning-video-layout > video,
  .learning-video-layout > iframe,
  .study-modal-body > video,
  .study-modal-body > iframe,
  .video-study-body > video,
  .video-study-body > iframe {
    width: 100% !important;
    height: 32vh !important;
    min-height: 190px !important;
    max-height: 280px !important;

    border-radius: 16px !important;
    background: #000 !important;
    overflow: hidden !important;
  }

  /* vídeo maximizado */
  .learning-video-viewer.maximized .learning-video-player,
  .learning-video-viewer.fullscreen .learning-video-player,
  .learning-video-viewer.is-fullscreen .learning-video-player,
  .study-modal.maximized .study-video-player,
  .study-modal.fullscreen .study-video-player,
  .study-video-modal.maximized .study-video-player,
  .video-study-modal.maximized .video-player-area,
  .pro-video-modal.maximized .pro-video-player,
  .learning-video-modal.maximized .learning-video-frame {
    height: 48vh !important;
    min-height: 260px !important;
    max-height: none !important;
    border-radius: 12px !important;
  }

  .learning-video-player video,
  .learning-video-player iframe,
  .study-video-player video,
  .study-video-player iframe,
  .video-player-area video,
  .video-player-area iframe,
  .pro-video-player video,
  .pro-video-player iframe,
  .learning-video-frame video,
  .learning-video-frame iframe,
  .study-video-frame video,
  .study-video-frame iframe,
  #studyVideoFrame,
  #learningVideoFrame {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    background: #000 !important;
  }

  /* footer continua acima quando NÃO maximizado */
  .footer-player {
    z-index: 9999 !important;
  }

  /* quando maximizado, modal fica acima do footer */
  body:has(.learning-video-viewer.maximized) .footer-player,
  body:has(.learning-video-viewer.fullscreen) .footer-player,
  body:has(.learning-video-viewer.is-fullscreen) .footer-player,
  body:has(.study-modal.maximized) .footer-player,
  body:has(.study-modal.fullscreen) .footer-player,
  body:has(.study-video-modal.maximized) .footer-player,
  body:has(.video-study-modal.maximized) .footer-player {
    z-index: 1000 !important;
    pointer-events: none !important;
    opacity: .15 !important;
  }

  /* com modal normal, music panel fica atrás e footer ainda pode ser usado */
  body:has(.learning-video-viewer:not(.hidden)) .music-panel,
  body:has(.study-modal:not(.hidden)) .music-panel,
  body:has(.study-video-modal:not(.hidden)) .music-panel,
  body:has(.video-study-modal:not(.hidden)) .music-panel {
    z-index: 900 !important;
    pointer-events: none !important;
    opacity: .18 !important;
  }
}

@media (max-width: 480px) {

  .learning-video-viewer:not(.maximized):not(.fullscreen):not(.is-fullscreen),
  .study-modal:not(.maximized):not(.fullscreen):not(.is-fullscreen),
  .study-video-modal:not(.maximized):not(.fullscreen):not(.is-fullscreen),
  .video-study-modal:not(.maximized):not(.fullscreen):not(.is-fullscreen),
  .pro-video-modal:not(.maximized):not(.fullscreen):not(.is-fullscreen),
  .learning-video-modal:not(.maximized):not(.fullscreen):not(.is-fullscreen) {
    width: 94vw !important;
    height: calc(100vh - 145px) !important;
  }

  .learning-video-player,
  .study-video-player,
  .video-player-area,
  .pro-video-player,
  .learning-video-frame,
  .study-video-frame,
  .learning-video-layout > video,
  .learning-video-layout > iframe,
  .study-modal-body > video,
  .study-modal-body > iframe,
  .video-study-body > video,
  .video-study-body > iframe {
    height: 30vh !important;
    min-height: 180px !important;
  }
}


/* =========================================================
   MKR V5.6.14 - SOMENTE CSS
   Ajustes:
   - Modal minimizado no celular vira barra compacta
   - PC: Esvaziar Histórico só no Histórico
   - Histórico sem Tocar/Playlist
   - Header menor
   - Tema ajustado
   - Notificações menores no celular
========================================================= */

/* PC/SITE: esvaziar histórico só no histórico */
@media (min-width: 769px) {

  body:not(.mkr-cat-history) #clearHistoryBtn,
  .section-actions:not(.history-actions) #clearHistoryBtn,
  #playlistActionsWrap:not(.history-actions) #clearHistoryBtn {
    display: none !important;
  }

  body.mkr-cat-history #clearHistoryBtn,
  #playlistActionsWrap.history-actions #clearHistoryBtn {
    display: flex !important;
  }

  /* Histórico no PC: não mostra Tocar nem Playlist */
  body.mkr-cat-history .history-card .site-actions,
  body.mkr-cat-history .history-card .playlist-actions,
  body.mkr-cat-history .history-card .card-actions,
  body.mkr-cat-history .history-card button,
  body.mkr-cat-history .history-card .btn,
  body.mkr-cat-history .history-card .play-btn,
  body.mkr-cat-history .history-card .playlist-btn,
  body.mkr-cat-history .history-card .favorite-btn,
  body.mkr-cat-history .history-card .remove-btn,
  body.mkr-cat-history .history-card .delete-btn {
    display: none !important;
  }

  body.mkr-cat-history .history-card {
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: center !important;
  }

  body.mkr-cat-history .history-card img,
  body.mkr-cat-history .history-card .site-thumb,
  body.mkr-cat-history .history-card .playlist-thumb,
  body.mkr-cat-history .history-card .card-image {
    width: 64px !important;
    height: 64px !important;
    object-fit: cover !important;
    border-radius: 14px !important;
  }
}

@media (max-width: 768px) {

  /* HEADER MENOR */
  .header {
    padding: 4px 10px !important;
    min-height: auto !important;
  }

  .header-content {
    gap: 3px !important;
    padding: 0 !important;
  }

  .logo {
    transform: scale(.78) !important;
    transform-origin: center !important;
    margin: -4px 0 !important;
  }

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

  .logo h1 {
    font-size: 18px !important;
    line-height: 1.05 !important;
  }

  .logo p,
  #userGreeting {
    font-size: 10px !important;
    line-height: 1 !important;
  }

  #googleLoginBtn {
    transform: scale(.78) !important;
    margin-top: -6px !important;
    min-height: 30px !important;
  }

  /* Tema: menor que antes, mas legível */
  .theme-selector,
  .theme-dropdown-wrap {
    width: min(88vw, 340px) !important;
    max-width: 340px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 4px 10px !important;
    margin: 4px auto 0 !important;
    border-radius: 999px !important;
    display: grid !important;
    grid-template-columns: auto minmax(130px, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .theme-select-label {
    font-size: 12px !important;
    font-weight: 800 !important;
  }

  .theme-select {
    height: 30px !important;
    min-height: 30px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    border-radius: 999px !important;
  }

  /* Notificações menores */
  .notification-container {
    top: 6px !important;
    left: 8px !important;
    right: 8px !important;
    gap: 4px !important;
    z-index: 30000 !important;
  }

  .notification {
    min-height: 28px !important;
    padding: 5px 8px !important;
    border-radius: 10px !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
    gap: 5px !important;
  }

  .notification-icon {
    width: 16px !important;
    height: 16px !important;
    font-size: 12px !important;
  }

  .notification button,
  .notification-close {
    width: 18px !important;
    height: 18px !important;
    font-size: 10px !important;
    padding: 0 !important;
  }

  /* Histórico no celular: só item visto/tocado */
  body.mkr-cat-history .history-card .site-actions,
  body.mkr-cat-history .history-card .playlist-actions,
  body.mkr-cat-history .history-card .card-actions,
  body.mkr-cat-history .history-card button,
  body.mkr-cat-history .history-card .btn,
  body.mkr-cat-history .history-card .play-btn,
  body.mkr-cat-history .history-card .playlist-btn,
  body.mkr-cat-history .history-card .favorite-btn,
  body.mkr-cat-history .history-card .remove-btn,
  body.mkr-cat-history .history-card .delete-btn,
  .history-card .site-actions,
  .history-card .playlist-actions,
  .history-card .card-actions,
  .history-card button,
  .history-card .btn,
  .history-card .play-btn,
  .history-card .playlist-btn {
    display: none !important;
  }

  .history-card {
    grid-template-columns: 58px minmax(0, 1fr) !important;
    min-height: 78px !important;
  }

  /* Modal minimizado: barra compacta no topo */
  .learning-video-viewer.minimized,
  .learning-video-viewer.is-minimized,
  .learning-video-viewer.collapsed,
  .study-modal.minimized,
  .study-modal.is-minimized,
  .study-modal.collapsed,
  .study-video-modal.minimized,
  .study-video-modal.is-minimized,
  .study-video-modal.collapsed,
  .video-study-modal.minimized,
  .video-study-modal.is-minimized,
  .video-study-modal.collapsed,
  .pro-video-modal.minimized,
  .pro-video-modal.is-minimized,
  .pro-video-modal.collapsed,
  .learning-video-modal.minimized,
  .learning-video-modal.is-minimized,
  .learning-video-modal.collapsed {
    position: fixed !important;
    top: 10px !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;

    width: min(92vw, 430px) !important;
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;

    border-radius: 24px !important;
    overflow: hidden !important;
    z-index: 20000 !important;
  }

  .learning-video-viewer.minimized .learning-video-layout,
  .learning-video-viewer.is-minimized .learning-video-layout,
  .learning-video-viewer.collapsed .learning-video-layout,
  .study-modal.minimized .study-modal-body,
  .study-modal.is-minimized .study-modal-body,
  .study-modal.collapsed .study-modal-body,
  .video-study-modal.minimized .video-study-body,
  .video-study-modal.is-minimized .video-study-body,
  .video-study-modal.collapsed .video-study-body {
    display: none !important;
  }

  .learning-video-viewer.minimized .learning-video-header,
  .learning-video-viewer.is-minimized .learning-video-header,
  .learning-video-viewer.collapsed .learning-video-header,
  .study-modal.minimized .study-modal-header,
  .study-modal.is-minimized .study-modal-header,
  .study-modal.collapsed .study-modal-header,
  .video-study-modal.minimized .video-study-header,
  .video-study-modal.is-minimized .video-study-header,
  .video-study-modal.collapsed .video-study-header {
    display: flex !important;
    height: 58px !important;
    min-height: 58px !important;
    padding: 0 12px !important;
    align-items: center !important;
  }

  .learning-video-viewer.minimized .learning-video-header h2,
  .learning-video-viewer.minimized .learning-video-header h3,
  .learning-video-viewer.is-minimized .learning-video-header h2,
  .learning-video-viewer.is-minimized .learning-video-header h3,
  .study-modal.minimized .study-modal-header h2,
  .study-modal.minimized .study-modal-header h3,
  .video-study-modal.minimized .video-study-header h2,
  .video-study-modal.minimized .video-study-header h3 {
    font-size: 12px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* se o JS usar estilo inline ao minimizar, tenta forçar o mesmo visual */
  .learning-video-viewer[style*="height: 58"],
  .learning-video-viewer[style*="height:58"],
  .study-modal[style*="height: 58"],
  .study-modal[style*="height:58"] {
    top: 10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(92vw, 430px) !important;
    height: 58px !important;
    border-radius: 24px !important;
  }
}


/* =========================================================
   MKR V5.6.15 - SOMENTE CSS
   Ajustes:
   - Tema no celular no estilo compacto do print
   - Header menor e sem espaço vazio grande
   - Logo/login maiores
   - Modal minimizado perto do footer e sem tela escura
   - Mais espaço para título do vídeo minimizado
========================================================= */

@media (max-width: 768px) {

  /* HEADER SEM ESPAÇO VAZIO */
  .header {
    padding: 8px 10px 10px !important;
    min-height: auto !important;
    height: auto !important;
  }

  .header-content {
    gap: 8px !important;
    padding: 0 !important;
  }

  .logo {
    transform: none !important;
    margin: 0 !important;
    gap: 8px !important;
  }

  .logo-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 11px !important;
  }

  .logo-icon svg {
    width: 36px !important;
    height: 36px !important;
  }

  .logo h1 {
    font-size: 21px !important;
    line-height: 1.05 !important;
  }

  .logo p,
  #userGreeting {
    font-size: 11px !important;
    line-height: 1.05 !important;
  }

  #googleLoginBtn {
    transform: none !important;
    min-height: 34px !important;
    height: 34px !important;
    margin: 0 !important;
    font-size: 13px !important;
    padding: 0 14px !important;
    border-radius: 4px !important;
  }

  /* TEMA IGUAL AO MODELO DO PRINT */
  .theme-selector,
  .theme-dropdown-wrap {
    width: min(86vw, 340px) !important;
    max-width: 340px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 4px 10px !important;
    margin: 2px auto 0 !important;
    border-radius: 999px !important;

    display: grid !important;
    grid-template-columns: auto minmax(120px, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;

    background: rgba(15, 23, 42, .78) !important;
    border: 1px solid rgba(34, 211, 238, .45) !important;
    box-shadow: 0 0 0 1px rgba(34, 211, 238, .10) inset !important;
  }

  .theme-select-label {
    display: flex !important;
    align-items: center !important;
    height: 34px !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    white-space: nowrap !important;
  }

  .theme-select {
    height: 34px !important;
    min-height: 34px !important;
    width: 100% !important;

    border-radius: 999px !important;
    padding: 0 38px 0 14px !important;

    font-size: 13px !important;
    font-weight: 900 !important;
    color: #22d3ee !important;

    background: rgba(2, 6, 23, .78) !important;
    border: 0 !important;
  }

  body.theme-light .theme-selector,
  body.theme-light .theme-dropdown-wrap {
    background: rgba(255,255,255,.88) !important;
    border-color: rgba(37, 99, 235, .22) !important;
  }

  body.theme-light .theme-select-label {
    color: #0f172a !important;
  }

  body.theme-light .theme-select {
    background: rgba(255,255,255,.95) !important;
    color: #111827 !important;
  }

  /* REMOVE ESCURECIMENTO FORTE QUANDO MODAL MINIMIZA */
  body:has(.learning-video-viewer.minimized)::before,
  body:has(.learning-video-viewer.is-minimized)::before,
  body:has(.learning-video-viewer.collapsed)::before,
  body:has(.study-modal.minimized)::before,
  body:has(.study-modal.is-minimized)::before,
  body:has(.study-modal.collapsed)::before,
  body:has(.video-study-modal.minimized)::before,
  body:has(.video-study-modal.collapsed)::before {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .modal-backdrop:has(+ .learning-video-viewer.minimized),
  .modal-backdrop:has(+ .study-modal.minimized),
  .overlay:has(+ .learning-video-viewer.minimized),
  .overlay:has(+ .study-modal.minimized) {
    display: none !important;
  }

  /* MINIMIZADO PERTO DO FOOTER */
  .learning-video-viewer.minimized,
  .learning-video-viewer.is-minimized,
  .learning-video-viewer.collapsed,
  .study-modal.minimized,
  .study-modal.is-minimized,
  .study-modal.collapsed,
  .study-video-modal.minimized,
  .study-video-modal.is-minimized,
  .study-video-modal.collapsed,
  .video-study-modal.minimized,
  .video-study-modal.is-minimized,
  .video-study-modal.collapsed,
  .pro-video-modal.minimized,
  .pro-video-modal.is-minimized,
  .pro-video-modal.collapsed,
  .learning-video-modal.minimized,
  .learning-video-modal.is-minimized,
  .learning-video-modal.collapsed {
    top: auto !important;
    left: 50% !important;
    right: auto !important;
    bottom: 112px !important;
    transform: translateX(-50%) !important;

    width: min(94vw, 430px) !important;
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;

    border-radius: 24px !important;
    overflow: hidden !important;
    z-index: 10040 !important;
  }

  /* TÍTULO DO VÍDEO COM MAIS ESPAÇO */
  .learning-video-viewer.minimized .learning-video-header,
  .learning-video-viewer.is-minimized .learning-video-header,
  .learning-video-viewer.collapsed .learning-video-header,
  .study-modal.minimized .study-modal-header,
  .study-modal.is-minimized .study-modal-header,
  .study-modal.collapsed .study-modal-header,
  .video-study-modal.minimized .video-study-header,
  .video-study-modal.is-minimized .video-study-header,
  .video-study-modal.collapsed .video-study-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 38px 38px 38px !important;
    gap: 6px !important;
    height: 58px !important;
    min-height: 58px !important;
    padding: 0 8px 0 12px !important;
    align-items: center !important;
  }

  .learning-video-viewer.minimized .learning-video-header h2,
  .learning-video-viewer.minimized .learning-video-header h3,
  .learning-video-viewer.is-minimized .learning-video-header h2,
  .learning-video-viewer.is-minimized .learning-video-header h3,
  .learning-video-viewer.collapsed .learning-video-header h2,
  .learning-video-viewer.collapsed .learning-video-header h3,
  .study-modal.minimized .study-modal-header h2,
  .study-modal.minimized .study-modal-header h3,
  .video-study-modal.minimized .video-study-header h2,
  .video-study-modal.minimized .video-study-header h3 {
    grid-column: 1 !important;
    max-width: 100% !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .learning-video-viewer.minimized .learning-video-header button,
  .learning-video-viewer.is-minimized .learning-video-header button,
  .learning-video-viewer.collapsed .learning-video-header button,
  .study-modal.minimized .study-modal-header button,
  .study-modal.is-minimized .study-modal-header button,
  .study-modal.collapsed .study-modal-header button,
  .video-study-modal.minimized .video-study-header button,
  .video-study-modal.collapsed .video-study-header button {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 50% !important;
    padding: 0 !important;
  }
}

@media (max-width: 480px) {
  .logo h1 {
    font-size: 20px !important;
  }

  .theme-selector,
  .theme-dropdown-wrap {
    width: 88vw !important;
  }

  .learning-video-viewer.minimized,
  .learning-video-viewer.is-minimized,
  .learning-video-viewer.collapsed,
  .study-modal.minimized,
  .study-modal.is-minimized,
  .study-modal.collapsed,
  .video-study-modal.minimized,
  .video-study-modal.collapsed {
    bottom: 108px !important;
  }
}


/* =========================================================
   MKR V5.6.16 - SOMENTE CSS
   Ajuste pedido:
   - Header mobile centralizado
   - Remove altura fixa grande do header-content
   - Login/Logo/Tema alinhados
   - Cores do seletor de tema corrigidas por tema
========================================================= */

@media (max-width: 768px) {

  /* HEADER CENTRALIZADO E SEM ALTURA FIXA */
  .header {
    height: auto !important;
    min-height: auto !important;
    padding: 10px 12px 12px !important;
    display: block !important;
  }

  .header-content {
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 8px !important;
    padding: 0 !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  .header-left,
  .header-right,
  .controls,
  .user-area,
  .auth-area {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .logo {
    width: auto !important;
    max-width: 100% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 auto !important;
    transform: none !important;
    text-align: left !important;
  }

  .logo-icon {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 11px !important;
  }

  .logo h1 {
    font-size: 21px !important;
    line-height: 1.05 !important;
    margin: 0 !important;
  }

  .logo p,
  #userGreeting {
    font-size: 11px !important;
    line-height: 1.1 !important;
    margin: 0 !important;
  }

  #googleLoginBtn,
  .google-login-btn {
    width: auto !important;
    max-width: 94vw !important;
    height: 34px !important;
    min-height: 34px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 auto !important;
    padding: 0 14px !important;

    font-size: 13px !important;
    border-radius: 6px !important;
    transform: none !important;
  }

  /* SELETOR DE TEMA CENTRALIZADO */
  .theme-selector,
  .theme-dropdown-wrap {
    width: min(88vw, 360px) !important;
    max-width: 360px !important;
    height: 44px !important;
    min-height: 44px !important;

    display: grid !important;
    grid-template-columns: auto minmax(130px, 1fr) !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 8px !important;
    padding: 4px 10px !important;
    margin: 4px auto 0 !important;

    border-radius: 999px !important;
    text-align: center !important;
  }

  .theme-select-label {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    height: 34px !important;
    padding: 0 2px !important;

    font-size: 13px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
  }

  .theme-select {
    width: 100% !important;
    height: 34px !important;
    min-height: 34px !important;

    border-radius: 999px !important;
    padding: 0 38px 0 14px !important;

    font-size: 13px !important;
    font-weight: 900 !important;
    text-align: left !important;
  }

  /* CORES - DARK */
  body.theme-dark .theme-selector,
  body.theme-dark .theme-dropdown-wrap,
  body.dark .theme-selector,
  body.dark .theme-dropdown-wrap {
    background: rgba(15, 23, 42, .82) !important;
    border: 1px solid rgba(59, 130, 246, .45) !important;
    box-shadow: 0 0 18px rgba(59, 130, 246, .18) !important;
  }

  body.theme-dark .theme-select-label,
  body.dark .theme-select-label {
    color: #ffffff !important;
  }

  body.theme-dark .theme-select,
  body.dark .theme-select {
    background: rgba(15, 23, 42, .95) !important;
    color: #dbeafe !important;
    border: 0 !important;
  }

  /* CORES - LIGHT */
  body.theme-light .theme-selector,
  body.theme-light .theme-dropdown-wrap,
  body.light .theme-selector,
  body.light .theme-dropdown-wrap {
    background: rgba(255, 255, 255, .94) !important;
    border: 1px solid rgba(37, 99, 235, .22) !important;
    box-shadow: 0 8px 18px rgba(37, 99, 235, .10) !important;
  }

  body.theme-light .theme-select-label,
  body.light .theme-select-label {
    color: #0f172a !important;
  }

  body.theme-light .theme-select,
  body.light .theme-select {
    background: #ffffff !important;
    color: #111827 !important;
    border: 0 !important;
  }

  /* CORES - GAMER */
  body.theme-gamer .theme-selector,
  body.theme-gamer .theme-dropdown-wrap,
  body.gamer .theme-selector,
  body.gamer .theme-dropdown-wrap {
    background: rgba(8, 16, 36, .86) !important;
    border: 1px solid rgba(34, 211, 238, .55) !important;
    box-shadow: 0 0 18px rgba(34, 211, 238, .20) !important;
  }

  body.theme-gamer .theme-select-label,
  body.gamer .theme-select-label {
    color: #ffffff !important;
  }

  body.theme-gamer .theme-select,
  body.gamer .theme-select {
    background: rgba(2, 6, 23, .92) !important;
    color: #22d3ee !important;
    border: 0 !important;
  }

  /* CORES - ANIME */
  body.theme-anime .theme-selector,
  body.theme-anime .theme-dropdown-wrap,
  body.anime .theme-selector,
  body.anime .theme-dropdown-wrap {
    background: rgba(45, 18, 60, .86) !important;
    border: 1px solid rgba(236, 72, 153, .55) !important;
    box-shadow: 0 0 18px rgba(236, 72, 153, .22) !important;
  }

  body.theme-anime .theme-select-label,
  body.anime .theme-select-label {
    color: #ffffff !important;
  }

  body.theme-anime .theme-select,
  body.anime .theme-select {
    background: rgba(24, 10, 38, .92) !important;
    color: #f9a8d4 !important;
    border: 0 !important;
  }

  /* FALLBACK: quando body não recebe classe de tema */
  .theme-selector,
  .theme-dropdown-wrap {
    background: rgba(15, 23, 42, .82) !important;
    border: 1px solid rgba(34, 211, 238, .45) !important;
  }

  .theme-select-label {
    color: #ffffff !important;
  }

  .theme-select {
    background: rgba(2, 6, 23, .90) !important;
    color: #22d3ee !important;
    border: 0 !important;
  }
}

@media (max-width: 480px) {
  .header {
    padding: 8px 10px 10px !important;
  }

  .logo h1 {
    font-size: 20px !important;
  }

  .theme-selector,
  .theme-dropdown-wrap {
    width: 90vw !important;
    height: 42px !important;
    min-height: 42px !important;
  }

  .theme-select-label,
  .theme-select {
    font-size: 12px !important;
  }
}


/* =========================================================
   MKR V5.6.17 - SOMENTE CSS
   Ajuste:
   - Header mobile menor
========================================================= */

@media (max-width:768px){

.header{
padding:4px 10px 6px !important;
min-height:auto !important;
height:auto !important;
}

.header-content{
gap:4px !important;
padding:0 !important;
margin:0 auto !important;
height:auto !important;
min-height:auto !important;
}

.header-left,
.header-right,
.controls,
.user-area,
.auth-area{
margin:0 !important;
padding:0 !important;
}

.logo{
gap:6px !important;
margin:0 auto !important;
}

.logo-icon{
width:34px !important;
height:34px !important;
min-width:34px !important;
}

.logo h1{
font-size:18px !important;
line-height:1 !important;
margin:0 !important;
}

.logo p,
#userGreeting{
font-size:10px !important;
line-height:1 !important;
margin:0 !important;
}

#googleLoginBtn,
.google-login-btn{
height:30px !important;
min-height:30px !important;
font-size:12px !important;
padding:0 12px !important;
margin:0 auto !important;
}

.theme-selector,
.theme-dropdown-wrap{
margin:2px auto 0 !important;
height:38px !important;
min-height:38px !important;
padding:3px 8px !important;
}

.theme-select-label{
height:28px !important;
font-size:11px !important;
}

.theme-select{
height:28px !important;
min-height:28px !important;
font-size:11px !important;
}

}

@media (max-width:480px){

.header{
padding:3px 8px 5px !important;
}

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

.logo h1{
font-size:17px !important;
}

#googleLoginBtn{
height:28px !important;
min-height:28px !important;
font-size:11px !important;
}

.theme-selector,
.theme-dropdown-wrap{
height:36px !important;
min-height:36px !important;
margin-top:1px !important;
}

}


/* =========================================================
   MKR V5.6.18 - SOMENTE CSS
   Ajustes:
   - Título grande do vídeo com ...
   - Botão minimizar oculto no celular
   - Tema menor, mais alto e sem espaço sobrando
========================================================= */

@media (max-width:768px){

  /* título do modal curto com reticências */
  .learning-video-header h2,
  .learning-video-header h3,
  .study-modal-header h2,
  .study-modal-header h3,
  .video-study-header h2,
  .video-study-header h3,
  .pro-video-header h2,
  .pro-video-header h3,
  .learning-video-viewer .modal-title,
  .study-modal .modal-title,
  .video-study-modal .modal-title{
    display:block !important;
    max-width:calc(100vw - 125px) !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    font-size:12px !important;
    line-height:1.15 !important;
  }

  /* header do modal deixa mais espaço pro título */
  .learning-video-header,
  .study-modal-header,
  .video-study-header,
  .pro-video-header{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 36px 36px !important;
    gap:6px !important;
    align-items:center !important;
    padding:0 8px 0 12px !important;
  }

  /* oculta botão minimizar no celular */
  .learning-video-header button:first-of-type,
  .study-modal-header button:first-of-type,
  .video-study-header button:first-of-type,
  .pro-video-header button:first-of-type,
  .minimize-btn,
  .modal-minimize-btn,
  .study-minimize-btn,
  [data-action="minimize"],
  [aria-label="Minimizar"],
  [title="Minimizar"]{
    display:none !important;
  }

  /* garante que maximizar e fechar continuem visíveis */
  .learning-video-header button:not(:first-of-type),
  .study-modal-header button:not(:first-of-type),
  .video-study-header button:not(:first-of-type),
  .pro-video-header button:not(:first-of-type),
  .maximize-btn,
  .modal-maximize-btn,
  .close-btn,
  .modal-close-btn,
  [data-action="maximize"],
  [data-action="close"],
  [aria-label="Maximizar"],
  [aria-label="Fechar"],
  [title="Maximizar"],
  [title="Fechar"]{
    display:flex !important;
  }

  /* tema menor e sem sobra lateral */
  .theme-selector,
  .theme-dropdown-wrap{
    width:auto !important;
    max-width:260px !important;
    min-width:220px !important;

    height:34px !important;
    min-height:34px !important;

    padding:3px 6px !important;
    margin:0 auto 4px !important;

    display:grid !important;
    grid-template-columns:auto 1fr !important;
    gap:6px !important;

    border-radius:999px !important;
  }

  .theme-select-label{
    height:28px !important;
    font-size:11px !important;
    padding:0 2px !important;
  }

  .theme-select{
    height:28px !important;
    min-height:28px !important;
    font-size:11px !important;
    padding:0 28px 0 10px !important;
    min-width:120px !important;
  }

  /* aproxima do login/nav e tira espaço vago */
  .controls{
    gap:3px !important;
  }

  .header-content{
    gap:3px !important;
  }
}

@media (max-width:480px){

  .theme-selector,
  .theme-dropdown-wrap{
    max-width:245px !important;
    min-width:210px !important;
    height:32px !important;
    min-height:32px !important;
    margin-top:0 !important;
  }

  .theme-select-label,
  .theme-select{
    height:26px !important;
    min-height:26px !important;
    font-size:10px !important;
  }

  .learning-video-header h2,
  .learning-video-header h3,
  .study-modal-header h2,
  .study-modal-header h3,
  .video-study-header h2,
  .video-study-header h3,
  .pro-video-header h2,
  .pro-video-header h3{
    max-width:calc(100vw - 105px) !important;
    font-size:11px !important;
  }
}


/* =========================================================
   MKR V5.6.19 - CSS
   Ajuste mínimo:
   - Esconde definitivamente o botão minimizar (-) no celular
========================================================= */

@media (max-width: 768px) {

  /* botão minimizar por classe/id/atributo */
  .minimize-btn,
  .modal-minimize-btn,
  .study-minimize-btn,
  .window-minimize-btn,
  #minimizeBtn,
  #modalMinimizeBtn,
  #studyMinimizeBtn,
  [data-action="minimize"],
  [data-modal-action="minimize"],
  [aria-label="Minimizar"],
  [title="Minimizar"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  /* caso o botão não tenha classe e seja o primeiro botão do header do modal */
  .learning-video-header button:first-of-type,
  .study-modal-header button:first-of-type,
  .video-study-header button:first-of-type,
  .pro-video-header button:first-of-type,
  .learning-video-viewer .modal-header button:first-of-type,
  .study-modal .modal-header button:first-of-type,
  .video-study-modal .modal-header button:first-of-type {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  /* reorganiza header do modal sem o botão - */
  .learning-video-header,
  .study-modal-header,
  .video-study-header,
  .pro-video-header,
  .learning-video-viewer .modal-header,
  .study-modal .modal-header,
  .video-study-modal .modal-header {
    grid-template-columns: minmax(0, 1fr) 36px 36px !important;
  }
}


/* =========================================================
   MKR V5.6.20 - CSS
   Ajuste mínimo:
   - Conta logada ocupa o lugar do botão Google
   - Espaço maior entre conta e tema no celular
========================================================= */

@media (max-width: 768px) {

  /* área de login/usuário fica centralizada */
  .auth-area,
  .user-area,
  .header-right {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 auto !important;
  }

  /* botão Google e conta usam o mesmo espaço visual */
  #googleLoginBtn,
  .google-login-btn,
  #userProfileBox,
  #userInfo,
  .user-profile,
  .user-card {
    margin: 2px auto 8px !important;
  }

  /* conta logada mais parecida com o botão do site */
  #userProfileBox,
  #userInfo,
  .user-profile,
  .user-card {
    min-height: 38px !important;
    height: 38px !important;
    max-height: 38px !important;

    display: flex;
    align-items: center !important;
    justify-content: center !important;

    gap: 8px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
  }

  #userProfileBox img,
  #userInfo img,
  .user-profile img,
  .user-card img,
  .user-avatar {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    border-radius: 50% !important;
  }

  #userGreeting,
  .user-name,
  .user-profile span,
  .user-card span {
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #logoutBtn,
  .logout-btn {
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
  }

  /* tema desce um pouco para não colar na conta */
  .theme-selector,
  .theme-dropdown-wrap {
    margin-top: 6px !important;
  }
}


/* =========================================================
   MKR V5.6.24 - LOGIN MOBILE FIX
   - Logado no celular: botão Google some
   - Conta fica no lugar do login
========================================================= */

@media (max-width: 768px) {

  body.mkr-user-logged #googleLoginBtn,
  body.mkr-user-logged .google-login-btn,
  body.mkr-user-logged [data-google-login] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  body.mkr-user-logged #userProfileBox,
  body.mkr-user-logged #userInfo,
  body.mkr-user-logged .user-profile,
  body.mkr-user-logged .user-card,
  body.mkr-user-logged .user-area {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  body:not(.mkr-user-logged) #userProfileBox,
  body:not(.mkr-user-logged) #userInfo,
  body:not(.mkr-user-logged) .user-profile,
  body:not(.mkr-user-logged) .user-card {
    display: none !important;
  }

  #userProfileBox,
  #userInfo,
  .user-profile,
  .user-card {
    margin: 2px auto 10px !important;
  }
}