@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
:root {
  --bg: #fff5f7;
  --surface: #ffffff;
  --border: #f0d4dc;
  --text: #3d2c33;
  --muted: #9e7a86;
  --accent: #e8547c;
  --accent-hover: #d63d66;
  --accent-soft: #fce4ec;
  --success: #4caf7d;
  --success-bg: #e8f5ec;
  --error: #d94452;
  --error-bg: #fdeaec;
  --loading-bg: #fce4ec;
  --warm: #f8bbd0;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: radial-gradient(ellipse at 20% 0%, rgba(232,84,124,0.06) 0%, transparent 60%);
}
.container { max-width: 640px; width: 100%; padding: 3rem 1.5rem 2rem; }
.logo { text-align: center; margin-bottom: 0.5rem; }
.logo .kiss-emoji { font-size: 2.5rem; display: block; margin-bottom: 0.5rem; }
h1 { font-size: 2.2rem; font-weight: 700; text-align: center; color: var(--text); }
h1 span { color: var(--accent); }
.subtitle { color: var(--muted); font-size: 1rem; margin-bottom: 2rem; text-align: center; line-height: 1.5; }
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.75rem;
  margin-bottom: 1rem;
  box-shadow: 0 2px 12px rgba(232,84,124,0.06);
}
.card h2 { font-size: 1.15rem; margin-bottom: 1rem; font-weight: 600; }
button {
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 10px;
  padding: 0.85rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  transition: all 0.2s;
  font-family: inherit;
}
button:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(232,84,124,0.25); }
button:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.status { text-align: center; padding: 0.85rem; border-radius: 10px; margin-bottom: 1rem; font-weight: 500; font-size: 0.95rem; }
.status.success { background: var(--success-bg); color: var(--success); border: 1px solid rgba(76,175,125,0.2); }
.status.error { background: var(--error-bg); color: var(--error); border: 1px solid rgba(217,68,82,0.2); }
.status.loading { background: var(--loading-bg); color: var(--accent); border: 1px solid rgba(232,84,124,0.15); }
.python-box {
  background: #2d2033;
  border: 1px solid #3d2c40;
  border-radius: 10px;
  padding: 1rem;
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: 0.8rem;
  color: #e8c4d0;
  overflow-x: auto;
  white-space: pre;
  line-height: 1.6;
  margin-bottom: 0.75rem;
}
.tab-row { display: flex; justify-content: center; gap: 1rem; margin-bottom: 1.5rem; }
.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: none;
  color: var(--muted);
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  min-width: 60px;
}
.tab .tab-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  transition: all 0.15s;
}
.tab .tab-label { font-size: 0.7rem; font-weight: 500; }
.tab:hover .tab-icon { border-color: var(--accent); }
.tab:hover { color: var(--accent); }
.tab.active .tab-icon { background: var(--accent); border-color: var(--accent); color: white; }
.tab.active .tab-label { color: var(--accent); font-weight: 600; }
.tab-content { display: none; }
.tab-content.active { display: block; }
.disconnect-btn { background: var(--bg); color: var(--muted); border: 1px solid var(--border); margin-top: 1rem; }
.disconnect-btn:hover { background: var(--border); color: var(--text); transform: none; box-shadow: none; }
footer { margin-top: 2.5rem; text-align: center; color: var(--muted); font-size: 0.8rem; padding-bottom: 2rem; font-weight: 400; }
#wc-qr-overlay {
  display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(61,44,51,0.6); z-index: 100; align-items: center; justify-content: center;
}
#wc-qr-overlay.active { display: flex; }
#wc-qr-box {
  background: var(--surface); border-radius: 16px; padding: 2rem; max-width: 360px; width: 90%;
  text-align: center; box-shadow: 0 8px 32px rgba(232,84,124,0.15);
}
#wc-qr-box h3 { font-size: 1.1rem; margin-bottom: 0.5rem; }
#wc-qr-box p { color: var(--muted); font-size: 0.85rem; margin-bottom: 1rem; line-height: 1.4; }
#wc-qr-box canvas, #wc-qr-box img { max-width: 240px; margin: 0 auto; display: block; }
.wc-cancel { background: var(--bg); color: var(--muted); border: 1px solid var(--border); margin-top: 1rem; font-size: 0.9rem; padding: 0.6rem 1rem; }
.wc-cancel:hover { background: var(--border); color: var(--text); transform: none; box-shadow: none; }
.floating-hearts { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: hidden; }
.floating-hearts span {
  position: absolute; bottom: -50px; font-size: 1.4rem; opacity: 0;
  animation: float-up linear infinite;
}
@keyframes float-up {
  0% { transform: translateY(0) rotate(0deg); opacity: 0.12; }
  50% { opacity: 0.08; }
  100% { transform: translateY(-110vh) rotate(360deg); opacity: 0; }
}
@keyframes gentle-pulse {
  0%, 100% { box-shadow: 0 2px 12px rgba(232,84,124,0.15); }
  50% { box-shadow: 0 4px 20px rgba(232,84,124,0.35); }
}
.manual-input { margin-top: 1.25rem; }
.manual-input label { display: block; color: var(--muted); font-size: 0.85rem; margin-bottom: 0.4rem; font-weight: 500; }
.manual-input input, .manual-input textarea {
  width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 0.65rem 0.75rem; color: var(--text); font-family: 'SF Mono', monospace;
  font-size: 0.85rem; margin-bottom: 0.75rem; transition: border-color 0.15s;
}
.manual-input input:focus, .manual-input textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(232,84,124,0.1); }
.manual-input textarea { height: 60px; resize: vertical; }
.copy-btn {
  background: var(--accent-soft); color: var(--accent); font-size: 0.75rem;
  padding: 0.35rem 0.75rem; width: auto; display: inline-block;
  margin-top: 0.5rem; border-radius: 6px; font-weight: 500;
}
.copy-btn:hover { background: #f8d0da; transform: none; box-shadow: none; }
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; color: var(--muted); font-size: 0.85rem; margin-bottom: 0.4rem; font-weight: 500; }
.form-group input, .form-group textarea, .form-group select {
  width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 0.65rem 0.75rem; color: var(--text); font-family: inherit; font-size: 0.9rem; transition: border-color 0.15s;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(232,84,124,0.1); }
.form-group textarea { height: 70px; resize: vertical; }
.form-group .hint { font-size: 0.75rem; color: var(--muted); margin-top: 0.25rem; }
.form-row { display: flex; gap: 1rem; }
.form-row .form-group { flex: 1; }