* { box-sizing: border-box; }
body {
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  background: #0f172a;
  color: #e2e8f0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  margin: 0;
  padding: 40px 16px;
}
.card {
  background: #1e293b;
  border-radius: 12px;
  padding: 32px;
  width: 100%;
  max-width: 380px;
}
.card.wide { max-width: 520px; }
h1 { margin-top: 0; font-size: 22px; }
h2 { font-size: 16px; color: #94a3b8; }
.topbar { display: flex; justify-content: space-between; align-items: center; }
.tabs { display: flex; margin-bottom: 20px; border-bottom: 1px solid #334155; }
.tab {
  flex: 1; background: none; border: none; color: #94a3b8;
  padding: 10px; cursor: pointer; border-bottom: 2px solid transparent;
}
.tab.active { color: #e2e8f0; border-bottom-color: #6366f1; }
.form { display: flex; flex-direction: column; gap: 12px; }
.form.hidden { display: none; }
input, textarea {
  background: #0f172a; border: 1px solid #334155; color: #e2e8f0;
  padding: 10px 12px; border-radius: 8px; font-size: 14px; width: 100%;
}
button {
  background: #6366f1; color: white; border: none; border-radius: 8px;
  padding: 10px 16px; font-size: 14px; cursor: pointer;
}
button:hover { opacity: 0.9; }
.link-btn { background: none; color: #94a3b8; padding: 4px 8px; }
.danger-btn { background: #dc2626; margin-top: 12px; }
.error { color: #f87171; font-size: 13px; min-height: 16px; }
.plan-box.hidden, .hidden { display: none; }
.plan-box { margin-top: 16px; padding: 16px; background: #0f172a; border-radius: 10px; }
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
}
.modal {
  background: #1e293b; padding: 24px; border-radius: 12px; width: 90%; max-width: 400px;
}
.modal-sub { color: #94a3b8; font-size: 13px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }