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

html, body {
  width: 100%; height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #0a0a0a;
  color: #e0e0e0;
  overflow: hidden;
  touch-action: manipulation;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

.screen { display: none; position: fixed; inset: 0; }
.screen.active { display: flex; }

/* --- Shared Form Elements --- */
input[type="text"], input[type="email"], input[type="password"] {
  width: 100%; padding: 14px 16px; font-size: 16px;
  background: #1a1a1a; color: #e0e0e0;
  border: 1px solid #2a2a2a; border-radius: 12px;
  outline: none; margin-bottom: 12px;
  transition: border-color 0.2s;
}
input:focus { border-color: #4fc3f7; }

.btn-primary {
  width: 100%; padding: 14px 24px; font-size: 16px; font-weight: 600;
  background: linear-gradient(135deg, #4fc3f7, #0288d1);
  color: #fff; border: none; border-radius: 12px; cursor: pointer;
  transition: transform 0.15s, opacity 0.15s;
}
.btn-primary:active { transform: scale(0.97); opacity: 0.9; }
.btn-primary:disabled { opacity: 0.5; transform: none; }

.btn-secondary {
  width: 100%; padding: 12px 20px; font-size: 14px;
  background: #2a2a2a; color: #e0e0e0;
  border: 1px solid #3a3a3a; border-radius: 12px; cursor: pointer;
  transition: background 0.15s;
}
.btn-secondary:active { background: #3a3a3a; }

.status-msg { font-size: 13px; margin-top: 12px; text-align: center; color: #888; min-height: 20px; }
.form-switch { font-size: 13px; margin-top: 16px; text-align: center; color: #888; }
.form-switch a { color: #4fc3f7; text-decoration: none; }

/* --- Login Screen --- */
#login-screen { align-items: center; justify-content: center; flex-direction: column; }
.login-container { text-align: center; padding: 32px 24px; max-width: 360px; width: 100%; }
.private-session-emoji { font-size: 72px; line-height: 1; margin-bottom: 14px; }
.login-container h1 { font-size: 28px; font-weight: 700; margin-bottom: 8px; color: #4fc3f7; }
.subtitle { font-size: 14px; color: #888; margin-bottom: 24px; }
.update-banner {
  text-align: left; margin: 0 0 20px; padding: 12px 14px;
  border: 1px solid rgba(255, 167, 38, 0.45); border-radius: 10px;
  background: rgba(255, 167, 38, 0.08); color: #ddd; font-size: 12px; line-height: 1.5;
}
.update-banner-title { font-weight: 700; color: #ffa726; margin-bottom: 3px; }
.update-banner-item { color: #bbb; }

/* --- Dashboard --- */
#dashboard-screen { align-items: center; justify-content: flex-start; flex-direction: column; overflow-y: auto; padding: 20px 0; }
.dashboard-container { text-align: center; padding: 32px 24px; max-width: 420px; width: 100%; }
.dashboard-header { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 4px; }
.dashboard-header h1 { font-size: 24px; font-weight: 700; color: #4fc3f7; }
.user-tag { font-size: 12px; background: rgba(79,195,247,0.15); color: #4fc3f7; padding: 3px 10px; border-radius: 10px; }

/* --- Subscription Card --- */
.subscription-card {
  background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 14px;
  padding: 16px; margin-bottom: 16px; text-align: left;
}
.subscription-card.trial { border-color: #ffa726; }
.subscription-card.active { border-color: #4caf50; }
.subscription-card.expired { border-color: #ef5350; }
.sub-card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.sub-badge {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  padding: 3px 10px; border-radius: 8px;
  letter-spacing: 0.5px;
}
.sub-badge.trial { background: rgba(255,167,38,0.2); color: #ffa726; }
.sub-badge.active { background: rgba(76,175,80,0.2); color: #4caf50; }
.sub-badge.expired { background: rgba(239,83,80,0.2); color: #ef5350; }
#sub-status-text { font-size: 13px; color: #aaa; }
#sub-detail { font-size: 13px; color: #888; margin-bottom: 12px; line-height: 1.4; }
.sub-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-subscribe {
  flex: 1; padding: 12px 20px; font-size: 14px; font-weight: 600;
  background: linear-gradient(135deg, #ffa726, #f57c00);
  color: #000; border: none; border-radius: 12px; cursor: pointer;
  transition: transform 0.15s;
}
.btn-subscribe:active { transform: scale(0.97); }
.btn-subscribe:disabled { opacity: 0.5; transform: none; }
.plan-select-wrap {
  flex: 1 1 100%; display: flex; flex-direction: column; gap: 6px;
  font-size: 12px; color: #888;
}
.plan-select {
  width: 100%; padding: 12px 14px; font-size: 14px; color: #e0e0e0;
  background: #111; border: 1px solid #3a3a3a; border-radius: 10px;
  outline: none;
}
.plan-select:focus { border-color: #4fc3f7; }
.sub-prompt-card .plan-select { margin-bottom: 10px; }

/* --- Status Card --- */
.status-card {
  background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 14px;
  padding: 18px; margin-bottom: 20px; text-align: left;
}
.status-card-header {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 15px; font-weight: 600; margin-bottom: 6px;
}
.status-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #4caf50; box-shadow: 0 0 8px rgba(76,175,80,0.5);
}
#status-detail { font-size: 13px; color: #888; margin-bottom: 12px; line-height: 1.4; }

/* --- Device Picker --- */
.device-picker { display: flex; gap: 10px; margin-bottom: 16px; }
.device-option { flex: 1; cursor: pointer; }
.device-option input { display: none; }
.device-label {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 14px 8px; border-radius: 14px;
  background: #1a1a1a; border: 2px solid #2a2a2a;
  font-size: 13px; font-weight: 500; color: #888;
  transition: all 0.2s;
}
.device-option input:checked + .device-label {
  border-color: #4fc3f7; color: #e0e0e0;
  background: rgba(79,195,247,0.1);
  box-shadow: 0 0 12px rgba(79,195,247,0.2);
}
.device-icon { font-size: 28px; }

/* --- Loading --- */
#loading-screen { align-items: center; justify-content: center; flex-direction: column; }
.loading-container { text-align: center; padding: 32px; max-width: 320px; }
.spinner {
  width: 48px; height: 48px;
  border: 4px solid #333; border-top-color: #4fc3f7;
  border-radius: 50%; margin: 0 auto 24px;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
#loading-message { font-size: 16px; margin-bottom: 16px; }
.progress-bar { width: 100%; height: 4px; background: #222; border-radius: 2px; overflow: hidden; margin-bottom: 12px; }
.progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #4fc3f7, #0288d1); transition: width 0.5s ease; border-radius: 2px; }
#loading-detail { font-size: 12px; color: #666; }

/* --- Stream --- */
#stream-screen { flex-direction: column; }
#stream-container {
  flex: 1; position: relative; background: #000;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
#emulator-canvas { width: 100%; height: 100%; object-fit: contain; image-rendering: auto; pointer-events: none; }
.emulator-pause-overlay {
  position: absolute; inset: 0; z-index: 7;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px; text-align: center; pointer-events: none;
  background: rgba(0,0,0,0.62); color: #fff;
}
.emulator-pause-emoji { font-size: 72px; line-height: 1; margin-bottom: 18px; }
.emulator-pause-message { max-width: 520px; font-size: 20px; font-weight: 700; line-height: 1.35; }
#input-overlay { position: absolute; inset: 0; z-index: 5; background: rgba(0,0,0,0.01); pointer-events: auto; touch-action: none; cursor: pointer; }

/* --- Toolbar --- */
#toolbar {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 6px; padding: 8px 10px;
  background: #1a1a1a; border-top: 1px solid #2a2a2a;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
}
#toolbar button {
  min-width: 52px; height: auto; border-radius: 10px;
  background: #2a2a2a; color: #e0e0e0; border: none;
  padding: 6px 8px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; transition: background 0.15s;
}
#toolbar button .tb-icon { font-size: 16px; line-height: 1.1; }
#toolbar button .tb-label { font-size: 10px; font-weight: 600; letter-spacing: 0.02em; opacity: 0.9; }
#toolbar button:active { background: #4fc3f7; color: #000; }
#toolbar button.tb-exit { background: #3a2222; color: #ff8a80; }
#toolbar button.tb-exit:active { background: #ef5350; color: #fff; }

.device-badge {
  font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 10px;
  background: rgba(79,195,247,0.2); color: #4fc3f7; margin-left: 4px;
}
.proxy-indicator {
  width: 12px; height: 12px; border-radius: 50%;
  background: #4caf50; margin-left: 8px;
  box-shadow: 0 0 8px rgba(76,175,80,0.6);
}

/* --- Virtual Keyboard --- */
#virtual-keyboard {
  display: flex; gap: 8px; padding: 10px 16px;
  background: #1a1a1a; border-top: 1px solid #2a2a2a;
}
#kb-input {
  flex: 1; padding: 10px 14px; font-size: 16px;
  background: #2a2a2a; color: #e0e0e0;
  border: 1px solid #444; border-radius: 10px; outline: none;
}
#btn-kb-send {
  padding: 10px 20px; font-size: 14px; font-weight: 600;
  background: #4fc3f7; color: #000; border: none; border-radius: 10px; cursor: pointer;
}

/* --- Error --- */
#error-screen { align-items: center; justify-content: center; flex-direction: column; }
.error-container { text-align: center; padding: 32px; max-width: 320px; }
.error-container h2 { font-size: 22px; color: #ef5350; margin-bottom: 12px; }
#error-message { font-size: 14px; color: #aaa; margin-bottom: 24px; line-height: 1.5; }

/* --- Subscription Prompt in stream --- */
.sub-prompt-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.85);
  display: flex; align-items: center; justify-content: center; z-index: 100;
}
.sub-prompt-card {
  background: #1a1a1a; border: 1px solid #ffa726; border-radius: 16px;
  padding: 32px 24px; text-align: center; max-width: 360px; width: 90%;
}
.sub-prompt-card h3 { font-size: 20px; color: #ffa726; margin-bottom: 12px; }
.sub-prompt-card p { font-size: 14px; color: #aaa; margin-bottom: 20px; line-height: 1.5; }
.sub-prompt-card .btn-subscribe { margin-bottom: 8px; }
.sub-prompt-card .btn-secondary { font-size: 13px; padding: 10px; }

/* V55: WebCodecs paints decoded H.264 frames into this canvas.
   Do NOT hide it with !important: the renderer enables it after decoder setup. */
#emulator-canvas { display:block; visibility:visible; opacity:1; }
/* Legacy video element remains disabled for the AVCC/WebCodecs path. */
#emulator-video { transform:translateZ(0); backface-visibility:hidden; will-change:transform; contain:strict; display:none; }


.form-hint { margin: -6px 0 12px; font-size: 12px; line-height: 1.4; opacity: .72; }
#reg-device-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }


/* High-visibility login warning for host load / stalled emulator recovery. */
.emulator-warning {
  margin: 14px 0 18px;
  padding: 13px 14px;
  border: 2px solid #ffb020;
  border-radius: 10px;
  background: rgba(255, 176, 32, 0.12);
  color: #ffe0a3;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 700;
  text-align: left;
}
.emulator-warning-title {
  margin-bottom: 5px;
  color: #ffb020;
  font-size: 14px;
  letter-spacing: 0.06em;
}

/* Host memory admission status */
.host-memory-card { background: rgba(18,24,36,.88); border:1px solid #2a3548; border-radius:14px; padding:14px; margin:14px 0; text-align:left; }
.host-memory-title { font-weight:700; margin-bottom:10px; }
.host-memory-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.host-memory-grid div { background:rgba(255,255,255,.035); border-radius:9px; padding:8px; }
.host-memory-grid span { display:block; color:#93a0b4; font-size:11px; margin-bottom:3px; }
.host-memory-grid strong { font-size:14px; }
.host-memory-detail { color:#93a0b4; font-size:11px; margin-top:9px; line-height:1.45; }
.host-memory-pressure-normal { color:#69d38f; }
.host-memory-pressure-elevated { color:#f2c96d; }
.host-memory-pressure-warning,.host-memory-pressure-critical { color:#ff8383; }

.donation-box{margin-top:24px;padding:16px;border:1px solid rgba(255,255,255,.22);border-radius:16px;display:grid;gap:10px;text-align:left}.donation-title{font-weight:800;letter-spacing:.06em}.donation-box a{color:#7db7ff;font-weight:700}.donation-box code{display:block;overflow-wrap:anywhere;margin-top:5px;font-size:11px}.language-box{display:flex;align-items:center;gap:10px;margin:10px 0 18px}.language-box select{font-size:26px;min-width:76px;padding:6px 10px;border-radius:10px}

.chirp-box{margin-top:24px;padding:16px;border:1px solid rgba(125,183,255,.45);border-radius:16px;display:block;text-align:left;text-decoration:none;background:rgba(125,183,255,.08);transition:transform .15s ease,background .15s ease,border-color .15s ease}.chirp-box:hover,.chirp-box:focus-visible{transform:translateY(-1px);background:rgba(125,183,255,.14);border-color:rgba(125,183,255,.75)}.chirp-box-title{color:#fff;font-size:20px;font-weight:800;letter-spacing:.02em}.chirp-box-subtitle{margin-top:5px;color:#9fb4d0;font-size:12px}.chirp-box+.donation-box{margin-top:12px}