*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --accent:  #1B8A2A;
  --accent2: #156B21;
  --dark:    #1a1a2e;
  --mid:     #16213e;
  --light:   #e8e8e8;
  --muted:   #8888aa;
  --green:   #2dc653;
  --radius:  16px;
  --nav-h:   64px;
}

html, body { height: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--dark); color: var(--light); overflow: hidden; }
#app { display: flex; flex-direction: column; height: 100dvh; }

.screen { display: none; flex-direction: column; flex: 1; overflow: hidden; }
.screen.active { display: flex; }

header { display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 12px; background: var(--mid); border-bottom: 1px solid rgba(255,255,255,0.07); }
header h1 { font-size: 1.1rem; font-weight: 700; letter-spacing: 0.02em; }

.status-badge { font-size: 0.75rem; padding: 4px 10px; border-radius: 20px; background: rgba(255,255,255,0.08); color: var(--muted); transition: background 0.3s, color 0.3s; }
.status-badge.recording { background: var(--accent); color: #fff; animation: pulse-badge 1.2s infinite; }
.status-badge.sending { background: #f4a261; color: #fff; }
.status-badge.ok { background: var(--green); color: #fff; }
@keyframes pulse-badge { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }

.record-main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding-bottom: var(--nav-h); }

.btn-record { width: 140px; height: 140px; border-radius: 50%; border: 4px solid var(--accent); background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.15s, background 0.2s; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.btn-record:active { transform: scale(0.93); }
.btn-record.active { background: var(--accent); animation: pulse-ring 1.4s infinite; }

.rec-icon { width: 48px; height: 48px; border-radius: 50%; background: var(--accent); transition: border-radius 0.25s, width 0.25s, height 0.25s; }
.btn-record.active .rec-icon { border-radius: 8px; width: 36px; height: 36px; background: #fff; }

@keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(27,138,42,0.5); } 70% { box-shadow: 0 0 0 20px rgba(27,138,42,0); } 100% { box-shadow: 0 0 0 0 rgba(27,138,42,0); } }

#record-label { color: var(--muted); font-size: 0.95rem; }
.timer { font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent); }

.upload-feedback { display: flex; align-items: center; gap: 10px; color: #f4a261; font-size: 0.95rem; }
.spinner { width: 20px; height: 20px; border: 3px solid rgba(244,162,97,0.3); border-top-color: #f4a261; border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.upload-success { color: var(--green); font-size: 1.1rem; font-weight: 600; }

.ticker-main { flex: 1; overflow-y: auto; padding: 12px 0 var(--nav-h); -webkit-overflow-scrolling: touch; }
.ticker-list { list-style: none; display: flex; flex-direction: column; gap: 1px; }
.ticker-placeholder { text-align: center; color: var(--muted); padding: 40px 20px; font-size: 0.9rem; }
.ticker-entry { background: var(--mid); padding: 14px 18px; border-left: 3px solid var(--accent); animation: slide-in 0.3s ease; }
.ticker-entry.new { border-left-color: var(--green); }
@keyframes slide-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

.entry-meta { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--muted); margin-bottom: 6px; }
.entry-summary { font-size: 0.95rem; font-weight: 600; line-height: 1.4; margin-bottom: 4px; }
.entry-transcript { font-size: 0.8rem; color: var(--muted); line-height: 1.5; overflow: hidden; max-height: 0; transition: max-height 0.3s ease; }
.ticker-entry.expanded .entry-transcript { max-height: 300px; }
.entry-toggle { background: none; border: none; color: var(--muted); font-size: 0.72rem; cursor: pointer; padding: 4px 0 0; -webkit-tap-highlight-color: transparent; }

.bottom-nav { display: flex; height: var(--nav-h); background: var(--mid); border-top: 1px solid rgba(255,255,255,0.07); position: relative; z-index: 10; }
.nav-btn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: none; border: none; color: var(--muted); font-size: 0.7rem; cursor: pointer; transition: color 0.2s; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.nav-btn.active { color: var(--accent); }
.nav-icon { font-size: 1.4rem; line-height: 1; }

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .bottom-nav { padding-bottom: env(safe-area-inset-bottom); height: calc(var(--nav-h) + env(safe-area-inset-bottom)); }
  header { padding-top: max(20px, env(safe-area-inset-top)); }
}

[hidden] { display: none !important; }
.screen#screen-login { display: none; align-items: center; justify-content: center; height: 100dvh; background: var(--dark); }
.screen#screen-login.active { display: flex; }
.login-card { width: 100%; max-width: 360px; padding: 40px 28px; display: flex; flex-direction: column; gap: 16px; }
.login-card h1 { font-size: 1.4rem; font-weight: 700; text-align: center; color: var(--light); margin-bottom: 8px; }
.login-card input { background: var(--mid); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius); color: var(--light); font-size: 1rem; padding: 14px 18px; outline: none; -webkit-appearance: none; }
.login-card input:focus { border-color: var(--accent); }
.login-card input#login-pin { letter-spacing: 0.3em; font-size: 1.2rem; }
.login-card button#btn-login { background: var(--accent); border: none; border-radius: var(--radius); color: #fff; font-size: 1rem; font-weight: 700; padding: 16px; cursor: pointer; margin-top: 4px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.login-card button#btn-login:active { opacity: 0.85; }
.login-error { color: #e63946; font-size: 0.85rem; text-align: center; }

.header-right { display: flex; align-items: center; gap: 10px; }
.user-display { font-size: 0.78rem; color: var(--muted); max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-logout { background: none; border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; color: var(--muted); font-size: 0.85rem; padding: 4px 8px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.btn-logout:active { background: rgba(255,255,255,0.08); }
.entry-user { font-size: 0.68rem; color: var(--accent); opacity: 0.8; }

/* ===== LABEL INPUT ===== */
.label-input {
  width: 80%;
  max-width: 300px;
  background: var(--mid);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius);
  color: var(--light);
  font-size: 0.9rem;
  padding: 10px 16px;
  outline: none;
  text-align: center;
  -webkit-appearance: none;
}
.label-input:focus { border-color: var(--accent); }
.label-input::placeholder { color: var(--muted); font-size: 0.8rem; }

.btn-export { background: none; border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; color: var(--muted); font-size: 0.75rem; padding: 4px 10px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.btn-export:active { background: rgba(255,255,255,0.08); }