/* =========================================================
   PAINEL PROPLAY — MOBILE UNIFICADO
   Somente celular/tablet. PC fica intocado.
   Objetivo: manter o mesmo visual premium do PC, sem borrão,
   sem cards estourando, sem tabelas quebrando e sem botões fora.
   ========================================================= */

@media (max-width: 767px) {
  html{
    width:100%;
    overflow-x:hidden;
    background:#0b0b10;
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
  }
  body,body.site-ui{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
    background:#0b0b10!important;
    color:#fafafa;
    padding-top:64px;
    filter:none!important;
    -webkit-filter:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    -webkit-font-smoothing:antialiased!important;
    text-rendering:geometricPrecision!important;
  }
  *,*:before,*:after{box-sizing:border-box}
  img,svg,video,canvas{max-width:100%;height:auto}
  input,select,textarea,button{font-size:16px!important}

  /* CABEÇALHO — mesmo acabamento do PC, sem blur que borra no Android */
  .ai-site-header,.site-header{
    position:fixed!important;
    top:0!important;left:0!important;right:0!important;
    height:64px!important;
    z-index:1000!important;
    background:#0b0b10!important;
    border-bottom:1px solid #292932!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    filter:none!important;
    transform:none!important;
  }
  .ai-site-nav,.site-header__inner{
    width:100%!important;
    max-width:none!important;
    height:64px!important;
    padding:0 14px!important;
    margin:0!important;
    gap:8px!important;
  }
  .ai-brand,.brand-link{min-width:0!important;gap:8px!important}
  .ai-brand-icon,.brand-icon{flex:0 0 auto!important}
  .ai-brand-name,.brand-name{font-size:16px!important;white-space:nowrap!important}
  .ai-main-nav,.main-nav{display:none!important}
  .ai-account-nav,.header-actions{
    margin-left:auto!important;
    gap:5px!important;
    min-width:0!important;
    flex-wrap:nowrap!important;
  }
  .ai-account-nav a,.header-actions a{
    min-height:38px!important;
    height:38px!important;
    padding:0 9px!important;
    border-radius:8px!important;
    white-space:nowrap!important;
    font-size:13px!important;
  }
  .ai-create,.header-create{padding:0 11px!important}
  .ai-credit-link{display:none!important}

  /* BASE DAS PÁGINAS */
  .wrap,.container,.ai-dashboard-wrap,.ai-checkout-wrap,.renewal-wrap{
    width:100%!important;
    max-width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:14px!important;
    padding-right:14px!important;
  }
  .page{
    width:100%!important;
    max-width:100%!important;
    padding-top:22px!important;
    padding-bottom:42px!important;
  }
  .pagehead{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:12px!important;
    margin-bottom:18px!important;
  }
  .pagehead h1{font-size:28px!important;line-height:1.12!important;margin-bottom:5px!important}
  .pagehead h2{font-size:22px!important}
  .pagehead .row{width:100%!important;display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
  .pagehead .row .btn{width:100%!important}

  /* LOGIN / CADASTRO — card igual ao PC, só encaixado */
  .formbox{
    width:calc(100% - 28px)!important;
    max-width:520px!important;
    margin:28px auto 36px!important;
    padding:22px 18px!important;
    border-radius:18px!important;
    background:#121219!important;
    border:1px solid #292932!important;
    box-shadow:0 18px 48px rgba(0,0,0,.22)!important;
    filter:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    transform:none!important;
  }
  .formbox h1{font-size:27px!important;line-height:1.15!important}
  .formbox .brand{font-size:18px!important;gap:8px!important}
  .field{margin-bottom:15px!important}
  .field label{font-size:13px!important}
  .input,.field input,.field select,.field textarea{
    width:100%!important;
    min-width:0!important;
    height:46px!important;
    border-radius:10px!important;
  }
  textarea.input,.field textarea{height:auto!important;min-height:110px!important}
  .btn{
    min-height:44px!important;
    height:auto!important;
    padding:10px 14px!important;
    border-radius:10px!important;
  }

  /* CARDS / GRIDS GERAIS */
  .card{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding:18px!important;
    border-radius:16px!important;
  }
  .grid,.split,.account-action-list,.account-kpis,.billing-panels,
  .admin-statgrid,.statgrid,.admin-quick-grid{
    grid-template-columns:1fr!important;
    gap:12px!important;
  }
  .split{display:grid!important}
  .row{max-width:100%!important;flex-wrap:wrap!important}
  .alert{width:100%!important;max-width:100%!important}

  /* DASHBOARD CLIENTE */
  .ai-dashboard{width:100%!important;overflow:hidden!important}
  .db-head{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:12px!important;
    margin-bottom:20px!important;
  }
  .db-head h1{font-size:28px!important}
  .db-new{width:100%!important;justify-content:center!important}
  .db-panel-grid{grid-template-columns:1fr!important;gap:14px!important}
  .db-panel-card{
    width:100%!important;
    min-width:0!important;
    padding:17px!important;
    border-radius:16px!important;
  }
  .panel-top{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:12px!important;
  }
  .panel-top-actions{
    width:100%!important;
    display:flex!important;
    justify-content:space-between!important;
    flex-wrap:wrap!important;
    gap:8px!important;
  }
  .access-grid{grid-template-columns:1fr!important;gap:0!important}
  .access-grid>div{min-width:0!important;padding:12px 0!important}
  .credential,.row-actions{max-width:100%!important;min-width:0!important}
  .credential code,.mono,.code{
    overflow-wrap:anywhere!important;
    word-break:break-word!important;
  }
  .due-card{padding:14px!important;align-items:flex-start!important}
  .custom-domain-box{padding:14px!important}
  .domain-link-form{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
  .domain-link-form input,.domain-link-form button{width:100%!important}
  .linked-domain{display:grid!important;grid-template-columns:1fr auto!important;align-items:center!important;gap:8px!important}
  .linked-domain .domain-delete-btn{grid-column:1/-1!important;width:100%!important}
  .orders-list{width:100%!important}
  .order-row{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:12px!important;
    padding:15px!important;
  }
  .order-info,.order-actions{width:100%!important;min-width:0!important}
  .order-actions{justify-content:flex-start!important;flex-wrap:wrap!important}
  .pay-btn{flex:1 1 auto!important;text-align:center!important}

  /* CONTA */
  .account-kpis{grid-template-columns:1fr!important}
  .account-kpi{min-height:0!important;padding:16px!important}
  .account-card-head,.billing-head{
    flex-direction:column!important;
    align-items:stretch!important;
  }
  .billing-panel{
    grid-template-columns:1fr!important;
    gap:10px!important;
  }
  .history-clean-card{
    grid-template-columns:42px 1fr!important;
    gap:12px!important;
  }
  .history-clean-btn{grid-column:1/-1!important;width:100%!important}

  /* CHECKOUT / RENOVAÇÃO */
  .ai-checkout-grid,.checkout-grid,.renewal-grid{
    grid-template-columns:1fr!important;
    gap:16px!important;
  }
  .ai-checkout-main,.ai-checkout-summary,.checkout-main,.checkout-summary,
  .renewal-main,.renewal-summary{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    position:static!important;
    top:auto!important;
  }
  .ai-pay-grid,.renew-pay-grid,.term-grid,.renew-term-grid{
    grid-template-columns:1fr!important;
    gap:9px!important;
  }
  .ai-domain-row,.renew-coupon-row{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
  }
  .ai-domain-row input,.ai-domain-row .ai-suffix,.renew-coupon-row input,.renew-coupon-row button{
    width:100%!important;
    max-width:100%!important;
  }
  .ai-suffix{min-height:46px!important}
  .ai-summary-card,.renewal-summary{position:static!important}
  .renewal-main{padding:18px!important}
  .renewal-submit{width:100%!important}

  /* TABELAS: preserva visual PC e permite rolar sem esmagar */
  .tablewrap{
    width:100%!important;
    max-width:100%!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch!important;
    border-radius:12px!important;
  }
  .table{
    width:max-content!important;
    min-width:720px!important;
    max-width:none!important;
  }
  .table th,.table td{
    white-space:nowrap!important;
    font-size:13px!important;
    padding:11px 12px!important;
  }

  /* ADMIN — menu horizontal compacto e conteúdo em 1 coluna */
  body.admin-ui{overflow-x:hidden!important}
  .admin-shell{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
  }
  .admin-sidebar{
    position:static!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;
    margin:0 0 16px!important;
    padding:10px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    border-radius:14px!important;
  }
  .admin-sidebar-brand,.admin-nav-title,.admin-sidebar-foot{display:none!important}
  .admin-nav-group{
    display:flex!important;
    flex:0 0 auto!important;
    gap:6px!important;
    margin:0!important;
    padding:0!important;
  }
  .admin-nav-link{
    flex:0 0 auto!important;
    min-height:40px!important;
    padding:0 11px!important;
    white-space:nowrap!important;
    border-radius:9px!important;
  }
  .admin-panel-edit-grid,.credit-admin-form{grid-template-columns:1fr!important}
  .admin-panel-actions{min-width:220px!important}
  .statgrid{grid-template-columns:1fr 1fr!important}
  .admin-quick-grid{grid-template-columns:1fr!important}
  body.admin-ui .pagehead{padding-top:0!important}

  /* MODAIS */
  .ai-delete-modal,.history-modal{
    padding:14px!important;
    align-items:center!important;
  }
  .ai-delete-box,.history-modal-box{
    width:100%!important;
    max-width:448px!important;
    max-height:calc(100dvh - 28px)!important;
    overflow-y:auto!important;
    padding:20px!important;
    border-radius:16px!important;
  }
  .ai-delete-actions,.history-modal-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:9px!important;
  }
  .ai-delete-backdrop,.history-modal-backdrop{
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    background:rgba(4,4,8,.92)!important;
  }

  /* RODAPÉ */
  .ai-site-footer,.site-footer{
    width:100%!important;
    background:#0b0b10!important;
    filter:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  .ai-footer-wrap,.footer-inner{padding-top:36px!important;padding-bottom:24px!important}
  .ai-footer-top,.footer-top{display:flex!important;flex-direction:column!important;gap:28px!important}
  .ai-footer-brand,.footer-brand{max-width:100%!important}
  .ai-footer-links,.footer-links{
    width:100%!important;
    grid-template-columns:1fr 1fr!important;
    gap:24px 18px!important;
  }
  .ai-footer-links>div:last-child,.footer-links>div:last-child{grid-column:1/-1!important}
  .ai-footer-copy,.footer-bottom{margin-top:28px!important}

  /* HOME — mesma identidade do PC, organizada para celular */
  .hero-section{min-height:auto!important}
  .hero-glow{display:none!important}
  .hero-grid{opacity:.42!important}
  .hero-inner{
    min-height:auto!important;
    padding:82px 16px 64px!important;
    transform:none!important;
    filter:none!important;
  }
  .hero-pill{font-size:12px!important;padding:6px 11px!important;text-align:center!important}
  .hero-inner h1{font-size:36px!important;line-height:1.05!important;letter-spacing:-.035em!important}
  .hero-inner>p{font-size:16px!important;line-height:1.65!important}
  .hero-actions{width:100%!important;display:grid!important;grid-template-columns:1fr!important;gap:9px!important}
  .hero-actions a{width:100%!important;min-height:48px!important}
  .stats-row{
    width:100%!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;
    margin-top:44px!important;
  }
  .stats-row strong{font-size:25px!important}
  .stats-row small{font-size:10px!important;line-height:1.25!important}
  .section{padding:64px 0!important}
  .section-heading h2,.cta-inner h2{font-size:30px!important;line-height:1.12!important}
  .plans-grid,.steps-grid,.auto-grid{grid-template-columns:1fr!important;gap:14px!important}
  .plan-card{padding:22px!important}
  .steps-grid{gap:28px!important}
  .auto-card{padding:22px!important}
  .marquee-band{overflow:hidden!important}
}

@media (max-width: 420px) {
  .ai-brand-name,.brand-name{font-size:15px!important}
  .ai-account-nav a,.header-actions a{padding:0 8px!important;font-size:12px!important}
  .ai-login{display:none!important}
  .formbox{width:calc(100% - 20px)!important;padding:20px 15px!important}
  .wrap,.container,.ai-dashboard-wrap,.ai-checkout-wrap,.renewal-wrap{padding-left:10px!important;padding-right:10px!important}
  .db-panel-card,.card{padding:15px!important}
  .statgrid{grid-template-columns:1fr!important}
  .stats-row strong{font-size:22px!important}
}


/* =========================================================
   CORREÇÃO MOBILE FINAL — NÃO ESCONDER MENU / CONTA / CRÉDITOS
   Mantém TODOS os itens visíveis no celular.
   ========================================================= */
@media (max-width:767px){

  /* Cabeçalho compartilhado das páginas internas */
  body.site-ui{
    padding-top:156px!important;
  }
  .ai-site-header{
    height:156px!important;
    min-height:156px!important;
    overflow:visible!important;
  }
  .ai-site-nav{
    height:156px!important;
    min-height:156px!important;
    padding:8px 12px!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:44px 42px 42px!important;
    align-content:start!important;
    gap:4px!important;
    overflow:visible!important;
  }
  .ai-brand{
    grid-row:1!important;
    align-self:center!important;
    width:max-content!important;
  }

  /* Menu principal volta a aparecer */
  .ai-main-nav{
    grid-row:2!important;
    display:flex!important;
    width:100%!important;
    min-width:0!important;
    gap:6px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
    padding:0 0 2px!important;
    align-items:center!important;
  }
  .ai-main-nav::-webkit-scrollbar{display:none!important}
  .ai-main-nav a{
    display:inline-flex!important;
    flex:0 0 auto!important;
    height:36px!important;
    align-items:center!important;
    padding:0 11px!important;
    border:1px solid #292932!important;
    border-radius:8px!important;
    background:#121219!important;
    color:#f4f4f5!important;
    font-size:12px!important;
    white-space:nowrap!important;
  }

  /* Minha Conta, Créditos Tonk, Dashboard e Sair SEMPRE visíveis */
  .ai-account-nav{
    grid-row:3!important;
    display:flex!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    gap:6px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
    padding:0 0 2px!important;
    align-items:center!important;
    justify-content:flex-start!important;
  }
  .ai-account-nav::-webkit-scrollbar{display:none!important}
  .ai-account-nav a,
  .ai-login,
  .ai-credit-link,
  .ai-dashboard-link,
  .ai-logout,
  .ai-admin-link,
  .ai-create{
    display:inline-flex!important;
    flex:0 0 auto!important;
    height:36px!important;
    min-height:36px!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0 10px!important;
    border-radius:8px!important;
    font-size:12px!important;
    white-space:nowrap!important;
  }
  .ai-credit-link{
    display:inline-flex!important;
  }
  .ai-dashboard-link span:last-child,
  .ai-logout span:last-child{
    display:inline!important;
  }
  .ai-login{
    display:inline-flex!important;
  }

  /* Home: não esconder Painéis / Como funciona / Automação */
  body:not(.site-ui) .site-header{
    height:150px!important;
    min-height:150px!important;
    overflow:visible!important;
  }
  body:not(.site-ui) .site-header__inner{
    height:150px!important;
    min-height:150px!important;
    padding:8px 12px!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:44px 42px 42px!important;
    gap:4px!important;
    align-content:start!important;
  }
  body:not(.site-ui) .brand-link{
    grid-row:1!important;
    align-self:center!important;
    width:max-content!important;
  }
  body:not(.site-ui) .main-nav{
    grid-row:2!important;
    display:flex!important;
    width:100%!important;
    gap:6px!important;
    overflow-x:auto!important;
    scrollbar-width:none!important;
    padding-bottom:2px!important;
  }
  body:not(.site-ui) .main-nav::-webkit-scrollbar{display:none!important}
  body:not(.site-ui) .main-nav a{
    display:inline-flex!important;
    flex:0 0 auto!important;
    height:36px!important;
    align-items:center!important;
    padding:0 11px!important;
    border:1px solid #292932!important;
    border-radius:8px!important;
    background:#121219!important;
    color:#f4f4f5!important;
    font-size:12px!important;
    white-space:nowrap!important;
  }
  body:not(.site-ui) .header-actions{
    grid-row:3!important;
    display:flex!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    gap:6px!important;
    overflow-x:auto!important;
    scrollbar-width:none!important;
    justify-content:flex-start!important;
  }
  body:not(.site-ui) .header-actions::-webkit-scrollbar{display:none!important}
  body:not(.site-ui) .header-actions a,
  body:not(.site-ui) .header-link,
  body:not(.site-ui) .header-create{
    display:inline-flex!important;
    flex:0 0 auto!important;
    height:36px!important;
    min-height:36px!important;
    padding:0 10px!important;
    font-size:12px!important;
    white-space:nowrap!important;
  }
  body:not(.site-ui) .header-link span{
    display:inline!important;
  }

  /* Como a Home usa cabeçalho próprio, compensa a altura nova */
  body:not(.site-ui) main{
    padding-top:86px!important;
  }
}

@media (max-width:420px){
  /* Mesmo em celular pequeno, nada some: apenas rola horizontalmente */
  .ai-credit-link,
  .ai-login,
  .ai-dashboard-link,
  .ai-logout,
  .ai-main-nav,
  .main-nav{
    display:flex!important;
  }
  .ai-dashboard-link span:last-child,
  .ai-logout span:last-child,
  .header-link span{
    display:inline!important;
  }
}


/* =========================================================
   MOBILE — CABEÇALHO PROPORCIONAL AO PC (REFERÊNCIA FOTO)
   No celular: logo compacto + menus completos, sem cabeçalho gigante.
   PC não é alterado.
   ========================================================= */
@media (max-width:767px){
  body.site-ui{
    padding-top:112px!important;
  }
  .ai-site-header{
    height:112px!important;
    min-height:112px!important;
    background:#09090e!important;
    border-bottom:1px solid #24242d!important;
  }
  .ai-site-nav{
    height:112px!important;
    min-height:112px!important;
    padding:8px 12px!important;
    display:grid!important;
    grid-template-columns:auto 1fr!important;
    grid-template-rows:44px 44px!important;
    column-gap:10px!important;
    row-gap:6px!important;
    align-items:center!important;
  }

  /* Logo: volta à proporção elegante do PC */
  .ai-brand{
    grid-column:1!important;
    grid-row:1!important;
    display:inline-flex!important;
    align-items:center!important;
    gap:8px!important;
    width:auto!important;
    min-width:0!important;
    margin:0!important;
  }
  .ai-brand-icon{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    border-radius:10px!important;
  }
  .ai-brand-icon svg{width:20px!important;height:20px!important}
  .ai-brand-name{
    font-size:16px!important;
    line-height:1!important;
    letter-spacing:-.02em!important;
  }

  /* Minha Conta / Créditos / Dashboard / Sair ficam na primeira linha.
     Se a tela for estreita, desliza — não some nada. */
  .ai-account-nav{
    grid-column:2!important;
    grid-row:1!important;
    width:100%!important;
    min-width:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:4px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scrollbar-width:none!important;
    margin:0!important;
    padding:0!important;
  }
  .ai-account-nav::-webkit-scrollbar{display:none!important}
  .ai-account-nav a,
  .ai-login,.ai-credit-link,.ai-dashboard-link,.ai-logout,.ai-admin-link,.ai-create{
    display:inline-flex!important;
    flex:0 0 auto!important;
    align-items:center!important;
    justify-content:center!important;
    height:34px!important;
    min-height:34px!important;
    padding:0 8px!important;
    border-radius:8px!important;
    font-size:11px!important;
    line-height:1!important;
    white-space:nowrap!important;
  }

  /* Painéis / Como funciona / Automação em uma linha compacta */
  .ai-main-nav{
    grid-column:1/-1!important;
    grid-row:2!important;
    display:flex!important;
    width:100%!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:6px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scrollbar-width:none!important;
    margin:0!important;
    padding:0!important;
  }
  .ai-main-nav::-webkit-scrollbar{display:none!important}
  .ai-main-nav a{
    display:inline-flex!important;
    flex:0 0 auto!important;
    align-items:center!important;
    justify-content:center!important;
    height:36px!important;
    padding:0 12px!important;
    border:1px solid #292932!important;
    border-radius:8px!important;
    background:#111117!important;
    color:#f4f4f5!important;
    font-size:12px!important;
    white-space:nowrap!important;
  }

  /* Conteúdo começa logo abaixo do cabeçalho, sem buraco grande */
  .page{padding-top:18px!important}
}

/* Em celulares estreitos a primeira linha vira:
   logo em cima + atalhos roláveis logo abaixo, mantendo altura controlada. */
@media (max-width:560px){
  body.site-ui{padding-top:146px!important}
  .ai-site-header{height:146px!important;min-height:146px!important}
  .ai-site-nav{
    height:146px!important;
    min-height:146px!important;
    grid-template-columns:1fr!important;
    grid-template-rows:42px 40px 40px!important;
    gap:4px!important;
    padding:7px 12px!important;
  }
  .ai-brand{grid-column:1!important;grid-row:1!important}
  .ai-account-nav{
    grid-column:1!important;
    grid-row:2!important;
    justify-content:flex-start!important;
  }
  .ai-main-nav{
    grid-column:1!important;
    grid-row:3!important;
  }
  .ai-brand-icon{width:36px!important;height:36px!important;min-width:36px!important}
  .ai-brand-name{font-size:16px!important}
  .ai-account-nav a,
  .ai-login,.ai-credit-link,.ai-dashboard-link,.ai-logout,.ai-admin-link,.ai-create{
    height:34px!important;
    min-height:34px!important;
    padding:0 9px!important;
    font-size:11px!important;
  }
  .ai-main-nav a{height:34px!important;padding:0 11px!important;font-size:11px!important}
}


/* =========================================================
   DASHBOARD MOBILE — MESMO DESENHO DO PC, APENAS REDUZIDO
   Referência: painel/credenciais/vencimento/domínio próprio.
   ========================================================= */
@media (max-width:767px){

  /* Card principal mais compacto como no PC */
  .ai-dashboard-wrap{padding-left:12px!important;padding-right:12px!important}
  .db-panel-card{
    padding:14px!important;
    border-radius:12px!important;
  }

  /* Cabeçalho do painel: nome/status/deletar sem virar bloco gigante */
  .panel-top{
    flex-direction:row!important;
    align-items:flex-start!important;
    justify-content:space-between!important;
    gap:10px!important;
  }
  .panel-top>div:first-child{min-width:0!important;flex:1!important}
  .panel-top h3{font-size:15px!important;line-height:1.25!important}
  .panel-top .mono{font-size:11px!important;line-height:1.35!important;overflow-wrap:anywhere!important}
  .panel-top-actions{
    width:auto!important;
    flex:0 0 auto!important;
    justify-content:flex-end!important;
    gap:6px!important;
    flex-wrap:wrap!important;
  }
  .panel-top-actions .delete-btn{
    min-height:34px!important;
    height:34px!important;
    padding:0 10px!important;
    font-size:12px!important;
  }

  /* Painel / Site / Usuário / Senha: mesma linha do PC, não blocos altos */
  .access-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
    margin-top:12px!important;
  }
  .access-grid>div{
    min-height:48px!important;
    padding:0 12px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:10px!important;
    border-radius:8px!important;
  }
  .access-grid>div>span:first-child{
    font-size:12px!important;
    line-height:1!important;
    flex:0 0 auto!important;
  }
  .row-actions,.credential{
    margin-left:auto!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:6px!important;
    min-width:0!important;
  }
  .row-actions a,.credential code{
    font-size:12px!important;
    line-height:1.2!important;
  }
  .copy.icon-only,.eye.icon-only{
    width:28px!important;
    min-width:28px!important;
    height:28px!important;
  }

  /* Vencimento: replica proporção do PC */
  .due-card{
    display:flex!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
    gap:10px!important;
    margin-top:14px!important;
    padding:13px!important;
    border-radius:9px!important;
  }
  .due-card>div{min-width:0!important}
  .due-card strong{font-size:13px!important;line-height:1.25!important}
  .due-card p{font-size:11px!important;line-height:1.35!important}
  .due-card a,.reactivate-btn{
    height:34px!important;
    min-height:34px!important;
    margin-top:9px!important;
    padding:0 11px!important;
    font-size:12px!important;
    border-radius:7px!important;
  }
  .renew-history{
    margin-top:8px!important;
  }
  .renew-history b{
    display:block!important;
    font-size:12px!important;
    line-height:1.25!important;
  }
  .renew-history small{
    margin-top:3px!important;
    font-size:11px!important;
    line-height:1.35!important;
    overflow-wrap:anywhere!important;
  }

  /* DOMÍNIO PRÓPRIO — no celular igual à organização do PC */
  .domain-own{
    margin-top:14px!important;
    padding:13px!important;
    border-radius:9px!important;
  }
  .domain-own-head{
    display:flex!important;
    align-items:flex-start!important;
    justify-content:space-between!important;
    gap:8px!important;
  }
  .domain-own-head strong{font-size:13px!important}
  .domain-own-head p{font-size:11px!important;margin-top:2px!important}

  /* Caixa de ajuda fica horizontal, com botão verde à direita como PC */
  .domain-guide-launch{
    margin-top:10px!important;
    padding:10px!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    align-items:center!important;
    gap:10px!important;
    border-radius:8px!important;
  }
  .domain-guide-launch>div{min-width:0!important}
  .domain-guide-launch strong{
    font-size:11px!important;
    line-height:1.25!important;
  }
  .domain-guide-launch p{
    margin:2px 0 0!important;
    font-size:10px!important;
    line-height:1.3!important;
  }
  .domain-guide-launch>a{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:34px!important;
    padding:0 10px!important;
    border:1px solid #22c55e!important;
    border-radius:7px!important;
    background:rgba(34,197,94,.12)!important;
    color:#4ade80!important;
    font-size:10px!important;
    font-weight:700!important;
    line-height:1.15!important;
    text-align:center!important;
    white-space:nowrap!important;
  }

  /* domínio + Ativo + Excluir na MESMA linha, igual PC */
  .linked-domain{
    margin-top:10px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto auto!important;
    align-items:center!important;
    gap:7px!important;
    width:100%!important;
  }
  .linked-domain>span:first-child{
    min-width:0!important;
    font-size:11px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .linked-domain .db-badge{
    min-height:28px!important;
    height:28px!important;
    padding:0 9px!important;
    font-size:10px!important;
  }
  .linked-domain .domain-delete-btn{
    grid-column:auto!important;
    width:auto!important;
    min-width:0!important;
    min-height:32px!important;
    height:32px!important;
    padding:0 10px!important;
    font-size:11px!important;
    border-radius:7px!important;
  }

  /* Campo + Vincular lado a lado como PC */
  .domain-link-form{
    margin-top:10px!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:7px!important;
    align-items:center!important;
  }
  .domain-link-form input{
    width:100%!important;
    min-width:0!important;
    height:50px!important;
    min-height:50px!important;
    padding:0 14px!important;
    font-size:15px!important;
    line-height:normal!important;
    border-radius:9px!important;
    border-width:1px!important;
  }
  .domain-link-form button{
    width:100%!important;
    min-width:0!important;
    height:46px!important;
    padding:0 12px!important;
    font-size:13px!important;
    border-radius:9px!important;
  }
}

/* Em aparelhos muito estreitos ainda preserva o desenho do PC,
   apenas reduz um pouco os textos — sem transformar Excluir em faixa gigante. */
@media (max-width:390px){
  .domain-guide-launch{
    grid-template-columns:minmax(0,1fr) 108px!important;
    gap:6px!important;
    padding:8px!important;
  }
  .domain-guide-launch>a{padding:0 6px!important;font-size:9px!important}
  .linked-domain{grid-template-columns:minmax(0,1fr) auto auto!important;gap:5px!important}
  .linked-domain .domain-delete-btn{padding:0 7px!important;font-size:10px!important}
  .domain-link-form{grid-template-columns:1fr!important;gap:8px!important}
  .domain-link-form button{width:100%!important;min-width:0!important;padding:0 12px!important}
}

/* MOBILE — raio limpo e proporcional, sem emoji */
@media(max-width:767px){
  .ai-brand-icon{
    color:#17130a!important;
  }
  .ai-brand-icon .ai-zap-svg{
    width:20px!important;
    height:20px!important;
    stroke-width:2!important;
  }
  .ai-brand-icon.small .ai-zap-svg{
    width:17px!important;
    height:17px!important;
  }
}


/* MENU TOP MOBILE — compacto e fácil de usar */
.ai-mobile-menu-toggle,.ai-mobile-menu{display:none}
@media(max-width:767px){
  body.site-ui{padding-top:72px!important}
  .ai-site-header{height:72px!important;min-height:72px!important;overflow:visible!important;background:#09090e!important}
  .ai-site-nav{
    height:72px!important;min-height:72px!important;padding:9px 14px!important;
    display:flex!important;align-items:center!important;justify-content:space-between!important;
    gap:12px!important;position:relative!important;overflow:visible!important
  }
  .ai-brand{display:flex!important;align-items:center!important;gap:9px!important;width:auto!important;min-width:0!important;margin:0!important}
  .ai-brand-icon{width:42px!important;height:42px!important;min-width:42px!important;border-radius:11px!important}
  .ai-brand-icon .ai-zap-svg{width:22px!important;height:22px!important}
  .ai-brand-name{font-size:18px!important}

  .ai-main-nav,.ai-account-nav{display:none!important}

  .ai-mobile-menu-toggle{
    display:flex!important;flex:0 0 46px!important;width:46px!important;height:46px!important;min-height:46px!important;
    border:1px solid #2d2d36!important;border-radius:12px!important;background:#111117!important;
    align-items:center!important;justify-content:center!important;flex-direction:column!important;gap:5px!important;padding:0!important
  }
  .ai-mobile-menu-toggle span{display:block!important;width:20px!important;height:2px!important;border-radius:2px!important;background:#f4f4f5!important}
  .ai-mobile-menu-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)!important}
  .ai-mobile-menu-toggle.open span:nth-child(2){opacity:0!important}
  .ai-mobile-menu-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)!important}

  .ai-mobile-menu{
    display:block!important;position:absolute!important;top:64px!important;right:12px!important;left:12px!important;z-index:1200!important;
    max-height:calc(100dvh - 82px)!important;overflow-y:auto!important;padding:10px!important;
    border:1px solid #2d2d36!important;border-radius:16px!important;background:#111117!important;box-shadow:0 24px 60px rgba(0,0,0,.5)!important
  }
  .ai-mobile-menu[hidden]{display:none!important}
  .ai-mobile-menu-section{display:grid!important;grid-template-columns:1fr!important;gap:5px!important;padding:6px!important}
  .ai-mobile-menu-section+.ai-mobile-menu-section{margin-top:6px!important;padding-top:12px!important;border-top:1px solid #292932!important}
  .ai-mobile-menu-title{padding:4px 8px 7px!important;color:#8f8f99!important;font-size:10px!important;font-weight:800!important;letter-spacing:.08em!important;text-transform:uppercase!important}
  .ai-mobile-menu a{
    display:flex!important;align-items:center!important;justify-content:space-between!important;width:100%!important;min-height:46px!important;
    padding:0 13px!important;border:1px solid transparent!important;border-radius:10px!important;background:#0b0b10!important;
    color:#f4f4f5!important;font-size:14px!important;font-weight:600!important;text-decoration:none!important
  }
  .ai-mobile-menu a:active{border-color:#3a3420!important;background:#17150d!important;color:#f4c430!important}
  .ai-mobile-menu a b{
    min-width:28px!important;height:28px!important;padding:0 8px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;
    border:1px solid rgba(244,196,48,.32)!important;border-radius:999px!important;background:rgba(244,196,48,.08)!important;color:#f4c430!important;font-size:12px!important
  }
  .ai-mobile-menu a.ai-mobile-menu-danger{color:#fecaca!important;background:#1d0d0f!important}
  body.ai-mobile-menu-open{overflow:hidden!important}
  .page{padding-top:18px!important}
}
@media(max-width:390px){
  .ai-site-nav{padding-left:10px!important;padding-right:10px!important}
  .ai-brand-icon{width:40px!important;height:40px!important;min-width:40px!important}
  .ai-brand-name{font-size:17px!important}
  .ai-mobile-menu{left:8px!important;right:8px!important}
}