*{margin:0;padding:0;box-sizing:border-box;}
    body{font-family:'Inter',sans-serif;min-height:100vh;background:linear-gradient(135deg,#4f8ef7 0%,#6b5fe2 100%);display:flex;flex-direction:column;align-items:center;padding:24px 16px 40px;}

    /* LOGIN */
    .login-screen{width:100%;max-width:380px;display:flex;flex-direction:column;align-items:center;gap:32px;margin-top:60px;}
    .login-logo{font-size:28px;font-weight:700;color:#fff;letter-spacing:-0.03em;text-align:center;}
    .login-sub{font-size:14px;color:rgba(255,255,255,0.75);text-align:center;line-height:1.6;}
    .login-card{width:100%;background:#fff;border-radius:24px;padding:36px 28px;box-shadow:0 20px 60px rgba(0,0,0,0.15);display:flex;flex-direction:column;align-items:center;gap:20px;}
    .login-icon{width:64px;height:64px;border-radius:16px;background:linear-gradient(135deg,#4f8ef7,#6b5fe2);display:flex;align-items:center;justify-content:center;}
    .login-icon svg{width:32px;height:32px;fill:#fff;}
    .login-title{font-size:18px;font-weight:700;color:#1e293b;}
    .login-desc{font-size:13px;color:#64748b;text-align:center;line-height:1.6;}
    .btn-ms{width:100%;padding:13px 20px;border-radius:12px;border:none;background:#2563eb;color:#fff;font-family:'Inter',sans-serif;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:all 0.2s;box-shadow:0 4px 14px rgba(37,99,235,0.35);}
    .btn-ms:hover:not(:disabled){background:#1d4ed8;transform:translateY(-1px);}
    .btn-ms:disabled{opacity:0.5;cursor:not-allowed;}
    .btn-ms svg{width:20px;height:20px;flex-shrink:0;}

    /* APP */
    .top-bar{width:100%;max-width:480px;display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;}
    .app-title{font-size:18px;font-weight:700;color:#fff;letter-spacing:-0.02em;}
    .user-info{display:flex;align-items:center;gap:8px;}
    .user-avatar{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,0.3);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;}
    .user-name{font-size:13px;font-weight:500;color:rgba(255,255,255,0.9);}
    .btn-sair{padding:4px 12px;border-radius:20px;border:1.5px solid rgba(255,255,255,0.4);background:transparent;color:rgba(255,255,255,0.8);font-family:'Inter',sans-serif;font-size:12px;cursor:pointer;transition:all 0.2s;}
    .btn-sair:hover{background:rgba(255,255,255,0.15);}
    .nav-tabs{display:flex;gap:4px;background:rgba(255,255,255,0.2);border-radius:20px;padding:4px;}
    .nav-tab{padding:6px 20px;border-radius:16px;font-size:13px;font-weight:500;color:rgba(255,255,255,0.8);cursor:pointer;border:none;background:transparent;transition:all 0.2s;}
    .nav-tab.active{background:#fff;color:#4f8ef7;}

    /* CARD */
    .card{width:100%;max-width:480px;background:#fff;border-radius:24px;padding:28px 24px;box-shadow:0 20px 60px rgba(0,0,0,0.15);}
    .card.hidden{display:none;}

    /* FIELDS */
    .field{margin-bottom:14px;}
    .field label{display:block;font-size:13px;font-weight:700;color:#1e293b;margin-bottom:6px;}
    .field input{width:100%;padding:11px 14px;border:1.5px solid #e2e8f0;border-radius:12px;font-family:'Inter',sans-serif;font-size:14px;color:#1e293b;outline:none;transition:border-color 0.2s;background:#f8fafc;}
    .field input:focus{border-color:#4f8ef7;background:#fff;}
    .field input::placeholder{color:#cbd5e1;}
    .field-hint{font-size:12px;color:#4f8ef7;margin-top:5px;display:none;}
    .divider{height:1px;background:#f1f5f9;margin:20px 0;}

    /* MIC */
    .mic-area{display:flex;flex-direction:column;align-items:center;gap:14px;padding:4px 0;}
    .timer{font-size:26px;font-weight:700;color:#1e293b;letter-spacing:0.06em;font-variant-numeric:tabular-nums;}
    .waveform{width:100%;height:36px;display:flex;align-items:center;justify-content:center;gap:3px;}
    .wbar{width:3px;border-radius:2px;background:#e2e8f0;min-height:3px;transition:height 0.06s;}
    .wbar.on{background:linear-gradient(180deg,#4f8ef7,#6b5fe2);}
    .mic-btn{width:78px;height:78px;border-radius:50%;border:none;background:linear-gradient(135deg,#ef4444,#dc2626);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(239,68,68,0.35);transition:all 0.2s;}
    .mic-btn:hover{transform:scale(1.05);}
    .mic-btn.rec{animation:pulse 1.5s infinite;}
    @keyframes pulse{0%,100%{box-shadow:0 8px 24px rgba(239,68,68,0.35);}50%{box-shadow:0 8px 32px rgba(239,68,68,0.65),0 0 0 10px rgba(239,68,68,0.08);}}
    .mic-btn svg{width:30px;height:30px;fill:#fff;}
    .mic-hint{font-size:13px;font-weight:500;color:#94a3b8;}
    .mic-hint.rec{color:#ef4444;}

    /* TRANSCRIPT */
    .transcript-section{display:none;flex-direction:column;gap:10px;margin-top:4px;}
    .transcript-section.show{display:flex;}
    .section-lbl{font-size:11px;font-weight:600;color:#94a3b8;text-transform:uppercase;letter-spacing:0.07em;}
    .t-box{max-height:220px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding-right:4px;}
    .t-box::-webkit-scrollbar{width:3px;}
    .t-box::-webkit-scrollbar-thumb{background:#e2e8f0;border-radius:3px;}
    .phrase{padding:10px 14px;background:#f8fafc;border-radius:12px;border-left:3px solid #4f8ef7;}
    .phrase.s2{border-left-color:#6b5fe2;}.phrase.s3{border-left-color:#f59e0b;}.phrase.s4{border-left-color:#10b981;}
    .p-speaker{font-size:11px;font-weight:600;color:#94a3b8;margin-bottom:3px;}
    .p-text{font-size:13px;color:#1e293b;line-height:1.55;}
    .interim{padding:10px 14px;min-height:40px;border:1.5px dashed #e2e8f0;border-radius:12px;font-size:13px;color:#94a3b8;font-style:italic;transition:all 0.2s;}
    .interim.on{border-color:#4f8ef7;color:#475569;font-style:normal;}

    /* STATS */
    .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
    .stat{background:#f8fafc;border-radius:12px;padding:10px;text-align:center;}
    .stat-v{font-size:18px;font-weight:700;color:#4f8ef7;}
    .stat-l{font-size:10px;font-weight:600;color:#94a3b8;text-transform:uppercase;letter-spacing:0.06em;margin-top:2px;}

    /* BUTTONS */
    .btn-save{width:100%;padding:14px;border-radius:14px;border:none;background:linear-gradient(135deg,#4f8ef7,#6b5fe2);color:#fff;font-family:'Inter',sans-serif;font-size:15px;font-weight:600;cursor:pointer;box-shadow:0 4px 16px rgba(79,142,247,0.3);transition:all 0.2s;margin-top:16px;}
    .btn-save:hover:not(:disabled){transform:translateY(-1px);}
    .btn-save:disabled{opacity:0.4;cursor:not-allowed;transform:none;}
    .btn-clear{width:100%;padding:10px;border-radius:12px;border:1.5px solid #e2e8f0;background:transparent;color:#94a3b8;font-family:'Inter',sans-serif;font-size:13px;cursor:pointer;margin-top:8px;transition:all 0.2s;}
    .btn-clear:hover{border-color:#cbd5e1;color:#64748b;}

    /* HISTORY */
    .hist-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
    .hist-title{font-size:16px;font-weight:700;color:#1e293b;}
    .hist-badge{font-size:12px;font-weight:600;color:#4f8ef7;background:#eff6ff;padding:3px 10px;border-radius:20px;}
    .hist-list{display:flex;flex-direction:column;gap:10px;max-height:420px;overflow-y:auto;}
    .hist-list::-webkit-scrollbar{width:3px;}
    .hist-list::-webkit-scrollbar-thumb{background:#e2e8f0;border-radius:3px;}
    .hist-item{padding:14px 16px;background:#f8fafc;border-radius:14px;border:1.5px solid #f1f5f9;transition:all 0.2s;}
    .hist-item:hover{border-color:#bfdbfe;background:#eff6ff;}
    .hist-item-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
    .hist-name{font-size:14px;font-weight:600;color:#1e293b;}
    .hist-date{font-size:11px;color:#94a3b8;}
    .hist-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px;}
    .chip{font-size:11px;font-weight:500;background:#e0f2fe;color:#0369a1;padding:2px 8px;border-radius:8px;}
    .hist-user{font-size:12px;color:#64748b;margin-top:6px;font-style:italic;}
    .hist-empty{text-align:center;padding:48px 20px;color:#94a3b8;font-size:14px;}

    /* TOAST */
    .toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(16px);background:#1e293b;color:#fff;padding:11px 20px;border-radius:12px;font-size:13px;font-weight:500;opacity:0;transition:all 0.3s;pointer-events:none;z-index:999;white-space:nowrap;}
    .toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
    .toast.ok{background:#15803d;}
    .toast.err{background:#dc2626;}



/* TOGGLE SIM / NÃO — DISCRETO */
.toggle-group {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  background: #f8fafc;
  border-radius: 12px;
  border: 1.5px solid #e2e8f0;
  width: fit-content;
}

.toggle-btn {
  padding: 6px 14px;
  border-radius: 10px;
  border: none;
  background: transparent;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  line-height: 1;
  transition: all 0.2s ease;
}

.toggle-btn:hover {
  background: #f1f5f9;
}

.toggle-btn.active {
  background: linear-gradient(135deg, #4f8ef7, #6b5fe2);
  color: #fff;
  box-shadow: 0 4px 12px rgba(79, 142, 247, 0.35);
}




.login-logo {
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-logo-img {
  max-width: 250px;   /* ✅ tamanho menor */
  width: 100%;
  height: auto;
}




#micDevice {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
    
  width: 40%;
  padding: 10px 40px 10px 12px;
  border-radius: 12px;
  border: 1.5px solid #e2e8f0;
  background-color: #f8fafc;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: #1e293b;
  cursor: pointer;
}