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

html, body { height: 100%; overflow: hidden; }

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

#app {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }
a { color: var(--blue-bright); text-decoration: none; }
a:hover { text-decoration: underline; }
textarea { font: inherit; resize: none; }
input { font: inherit; }

.hidden { display: none !important; }

/* Scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg-active); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-bright); }

/* Focus visible */
:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 2px; }

/* Buttons */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 18px; border-radius: var(--radius-full);
  background: var(--yellow); color: #111; font-weight: 600; font-size: 14px;
  transition: opacity var(--transition), transform var(--transition);
}
.btn-primary:hover { opacity: 0.88; transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 16px; border-radius: var(--radius-full);
  border: 1px solid var(--border-bright);
  color: var(--text-dim); font-size: 14px;
  transition: background var(--transition), color var(--transition);
}
.btn-ghost:hover { background: var(--bg-hover); color: var(--text); }

.btn-danger {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 16px; border-radius: var(--radius-full);
  background: rgba(220, 60, 60, 0.12); border: 1px solid rgba(220,60,60,0.3);
  color: #f07070; font-size: 14px;
  transition: background var(--transition);
}
.btn-danger:hover { background: rgba(220,60,60,0.22); }

/* Toggle switch */
.toggle-switch {
  position: relative; display: inline-flex; align-items: center;
  width: 36px; height: 20px; flex-shrink: 0;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-track {
  position: absolute; inset: 0;
  background: var(--bg-active); border-radius: var(--radius-full);
  transition: background var(--transition);
  cursor: pointer;
}
.toggle-thumb {
  position: absolute; left: 3px; top: 3px;
  width: 14px; height: 14px; border-radius: 50%;
  background: white; transition: transform var(--transition);
  pointer-events: none;
}
.toggle-switch input:checked + .toggle-track { background: var(--yellow); }
.toggle-switch input:checked ~ .toggle-thumb { transform: translateX(16px); }

/* Notification */
.notifications {
  position: fixed; bottom: 20px; right: 20px;
  display: flex; flex-direction: column; gap: 8px;
  z-index: var(--z-notify); pointer-events: none;
}
.notification {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 16px; border-radius: var(--radius-md);
  background: var(--bg-raised); border: 1px solid var(--border-bright);
  box-shadow: var(--shadow-md);
  max-width: 360px; font-size: 13px; color: var(--text);
  pointer-events: auto;
  animation: slideInRight 0.22s ease;
}
.notification.warning { border-color: rgba(229,200,70,0.4); }
.notification.error { border-color: rgba(220,60,60,0.4); }
.notification.success { border-color: rgba(45,212,166,0.4); }
.notification .notif-close {
  margin-left: auto; color: var(--text-muted); font-size: 16px;
  background: none; border: none; cursor: pointer; padding: 0 2px;
}

/* Share banner */
.share-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  background: linear-gradient(90deg, #1a1b20, #22242b);
  border-bottom: 1px solid var(--border-bright);
  padding: 10px 20px;
}
.share-banner-inner {
  display: flex; align-items: center; gap: 12px; max-width: 800px; margin: 0 auto;
  font-size: 14px;
}
.share-icon { font-size: 18px; }

/* Animations */
@keyframes slideInRight {
  from { transform: translateX(20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideUp {
  from { transform: translateY(12px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}