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

body {
  font-family: 'Segoe UI', Arial, sans-serif;
  background: linear-gradient(145deg, #0f172a 0%, #1e3a5f 100%);
  color: #e2e8f0;
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 16px;
}

.card {
  width: min(100%, 520px);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 36px 32px;
  backdrop-filter: blur(12px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}

.logo {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  font-size: 22px;
}

h1 { margin: 0 0 8px; font-size: clamp(1.3rem, 3vw, 1.7rem); font-weight: 700; letter-spacing: -0.02em; color: #f8fafc; }
.subtitle { color: #94a3b8; font-size: 0.93rem; line-height: 1.6; margin: 0 0 28px; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }

button { border: 0; border-radius: 12px; padding: 11px 20px; font-size: 0.92rem; font-weight: 600; cursor: pointer; flex: 1 1 180px; transition: opacity 0.15s, transform 0.1s; }
button:active { transform: scale(0.97); }
button:disabled { opacity: 0.5; cursor: not-allowed; }

#enableBtn { background: linear-gradient(135deg, #3b82f6, #6366f1); color: white; }
#enableBtn:hover:not(:disabled) { opacity: 0.88; }
#sendBtn { background: rgba(255, 255, 255, 0.08); color: #e2e8f0; border: 1px solid rgba(255, 255, 255, 0.15); }
#sendBtn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.14); }

.status { display: flex; align-items: flex-start; gap: 10px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); padding: 13px 15px; border-radius: 12px; margin-bottom: 14px; font-size: 0.9rem; line-height: 1.5; word-break: break-word; color: #cbd5e1; transition: border-color 0.3s; }
.status.success { border-color: #22c55e66; color: #86efac; }
.status.error   { border-color: #ef444466; color: #fca5a5; }
.status.info    { border-color: #3b82f666; color: #93c5fd; }
.status-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }

.token-section { margin-top: 4px; }
.token-label { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #64748b; margin-bottom: 6px; }

pre { background: rgba(0, 0, 0, 0.35); color: #7dd3fc; padding: 13px 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.07); overflow: auto; font-size: 0.78rem; line-height: 1.6; word-break: break-all; white-space: pre-wrap; margin: 0; max-height: 100px; }

@media (max-width: 480px) {
  .card { padding: 24px 18px; }
  .actions { flex-direction: column; }
  button { width: 100%; flex-basis: auto; }
}