/* ============================================================
   TELAS MAIORES — daqui para baixo e so refinamento
   ============================================================ */
@media (min-width: 640px){
  .app{ padding: 28px 18px 90px; }

  .sys-window{ padding: 22px 24px; border-radius: 10px; }
  .sys-eyebrow{ font-size: 11px; letter-spacing: 3px; }
  .sys-sub{ font-size: 13px; margin-bottom: 20px; }
  .hunter-row{ gap: 20px; }
  .rank-badge{ width: 74px; height: 74px; font-size: 30px; }
  .hunter-info{ flex: 1 1 220px; }
  .hunter-name{ font-size: 15px; letter-spacing:.5px; }
  .hunter-title{ font-size: 12px; }
  .xp-label{ font-size: 10.5px; }
  .stat-cluster{ flex: 0 1 auto; gap: 14px; }
  .stat-chip{ flex: 0 0 auto; min-width: 84px; padding: 8px 12px; }
  .stat-chip .n{ font-size: 18px; }
  .stat-chip .l{ font-size: 9.5px; letter-spacing:1px; }

  .section-title{ font-size: 13px; letter-spacing: 2px; margin: 34px 0 12px; }

  .gate{ border-radius: 9px; margin-bottom: 10px; }
  .gate-top{ flex-wrap: nowrap; }
  .gate-head{ padding: 14px 8px 14px 16px; gap: 14px; }
  .gate-idx{ width: 22px; font-size: 12px; }
  .gate-name{ font-size: 14.5px; white-space: nowrap; overflow:hidden; text-overflow:ellipsis; }
  .gate-meta{ font-size: 10.5px; gap: 10px; }
  .gate-progress{ display:block; }
  .gate-bar{ display:none; }
  .pct-inline{ display:none; }
  .tool-more{ display:none; }
  .gate-toolbar{
    display:flex;
    flex: 0 0 auto;
    padding: 0 6px 0 0;
    gap: 4px;
    order: 0;
  }
  .tool-btn{ width: 26px; height: 26px; font-size: 11px; border-radius:5px; background:transparent; }
  .tool-btn:hover{ color: var(--accent-glow); border-color: var(--accent); }
  .tool-btn.danger:hover{ color: var(--red); border-color: var(--red); }
  .modulo-head .tool-btn{ width: 22px; height: 22px; font-size: 10px; }
  .aula .tool-btn{ width: 22px; height: 22px; font-size: 10px; }

  .gate-body{ padding: 4px 16px 16px 52px; }
  .gate-locked-msg{ padding: 0 16px 14px 52px; }
  .disc-actions{ flex-direction:row; flex-wrap:wrap; }
  .disc-actions .btn-ghost{ width:auto; }

  .aula{ padding: 7px 0; border-bottom:none; }
  .aula-check{ width:17px; height:17px; margin-top:2px; }
  .aula-name{ font-size: 13px; }
  .aula-note textarea{ font-size: 12.5px; min-height: 54px; padding: 8px 10px; border-radius:6px; }
  .aula-note-actions{ flex-direction:row; justify-content:space-between; align-items:center; }
  .aula-note-actions > span{ flex-direction:row; align-items:center; }
  .btn-mini{ width:auto; min-height:0; padding: 5px 11px; font-size: 10.5px; border-radius:5px; }
  .btn-mini:hover{ filter: brightness(1.1); }

  .add-row{ flex-direction:row; gap:8px; margin-top:8px; }
  .add-row input{ flex:1; width:auto; min-height:0; padding: 7px 10px; font-size:12.5px; border-radius:6px; }
  .btn-ghost{ width:auto; min-height:0; padding: 7px 12px; font-size: 11px; border-radius:6px; }
  .btn-ghost:hover{ color: var(--accent-glow); border-color: var(--accent); }

  .new-disc{ padding: 14px 16px; }
  .new-disc-grid{ flex-direction:row; flex-wrap:wrap; }
  .new-disc-grid input{ min-height:0; padding: 8px 10px; font-size:12.5px; border-radius:6px; }
  .new-disc-grid input[type="text"]{ flex: 1 1 220px; width:auto; }
  .new-disc-grid input[type="date"]{ width:auto; font-size:11.5px; }
  .new-disc .check-row span{ font-size: 11.5px; }

  .link-btn{
    flex: 0 0 auto; font-size: 11px; padding: 4px 6px; min-height:0;
    text-decoration: underline; text-underline-offset:3px;
  }
  .link-btn:hover{ color: var(--accent-glow); background:none; }
  .save-pill{ font-size: 10.5px; padding: 5px 11px; border-radius:20px; }

  #toast-stack{ left:auto; right: 18px; bottom: 18px; max-width: 300px; }
  .toast{ font-size: 12.5px; padding: 10px 14px; border-radius:8px; }

  #journal-overlay, .modal-overlay{ padding: 40px 16px; }
  .journal-panel{ padding: 22px; border-radius:10px; }
  .journal-head h2{ font-size:16px; }

  .setup-wrap{ align-items:center; padding: 32px 18px; }
  .setup-card{ padding: 28px 26px 24px; }
  .setup-title{ margin: 8px 0 6px; }
  .field input[type="text"], .field input[type="date"]{ font-size: 13.5px; padding: 10px 12px; min-height:0; border-radius:7px; }
  .grid-2{ grid-template-columns: 1fr 1fr; gap: 12px; }
  .check-row input[type="checkbox"]{ width:16px; height:16px; margin-top:2px; }
  .check-row span{ font-size: 12.5px; }
  .btn-primary{ padding: 12px; min-height:0; border-radius:8px; letter-spacing:1.5px; font-size:12.5px; }
  .btn-primary:hover{ filter: brightness(1.08); }
  .setup-foot{ flex-direction:row; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:14px; }
}

/* telas bem estreitas (iPhone SE e parecidos) */
@media (max-width: 340px){
  .stat-chip .l{ font-size: 7.5px; }
  .gate-head{ gap: 8px; padding-left: 10px; }
  .tool-btn{ width: 36px; height: 36px; }
}

/* respeita quem pediu menos animacao no sistema */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation: none !important; transition: none !important; }
}

/* ============================================================
   Refinamentos para telas maiores
   ============================================================ */
@media (min-width: 640px){
  .ritmo{ padding: 16px 18px; margin-top: 14px; }
  .ritmo-linhas{ font-size: 11.5px; }
  .revisao-call{ padding: 16px 18px; margin-top:14px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
  .revisao-call > div:first-child{ flex:1; min-width: 220px; }
  .revisao-call .rc-text{ margin-bottom: 0; }
  .revisao-call .btn-ghost{ width:auto; }
  .rev-acoes{ flex-direction:row; }
  .btn-rev{ flex:1; }
  .conq-grid{ grid-template-columns: 1fr 1fr; }
}


@media (min-width: 640px){
  .sys-menu{ padding: 16px 18px; margin-top: 14px; }
  .sys-menu-head{ font-size: 11px; letter-spacing: 3px; }
  .sys-menu-grid{ grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .menu-item{ min-height: 78px; transition: border-color .18s, background .18s, transform .18s; }
  .menu-item:hover{
    border-color: var(--accent);
    background: rgba(91,141,255,0.1);
    transform: translateY(-1px);
  }
  .menu-item.perigo:hover{ border-color: var(--red); background: rgba(255,107,107,0.08); }
  .mi-nome{ font-size: 11px; }
  .sys-menu-foot{ flex-direction:row; justify-content:space-between; align-items:center; }
  .menu-link{ min-height:0; padding: 7px 12px; font-size: 10.5px; }
  .menu-link:hover{ color: var(--accent-glow); border-color: var(--accent); }
}

@media (min-width: 640px){
  /* na tela grande as tres opcoes voltam a ficar lado a lado */
  .segmented{ flex-direction: row; }
  .segmented label{
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 12px 8px;
    min-height: 0;
    text-align: center;
  }
  .segmented label small{ text-align: center; margin-left: 0; }
}

@media (min-width: 640px){
  .btn-secundario{ transition: border-color .18s, background .18s; }
  .btn-secundario:hover{ border-color: var(--accent); background: rgba(91,141,255,0.1); }
}