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

/* Respect the HTML `hidden` attribute even when a class sets an explicit `display`. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.top-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 24px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(27, 58, 31, 0.18);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.top-nav[hidden] { display: none; }

.nav-brand {
  font-weight: 800;
  color: #14301a;
  text-decoration: none;
  letter-spacing: 0.5px;
  font-size: 1.05rem;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
}

.nav-link {
  text-decoration: none;
  color: #2e4a33;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 8px 14px;
  border-radius: 8px;
  transition: background 0.15s ease, color 0.15s ease;
}

.nav-link:hover {
  background: rgba(46, 107, 53, 0.14);
  color: #14301a;
}

.nav-link.active {
  background: #2e6b35;
  color: #eaf6d4;
}

.account-btn {
  border: 1.5px solid rgba(46, 107, 53, 0.4);
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  font: inherit;
}

.account-btn:hover {
  background: rgba(46, 107, 53, 0.14);
  border-color: #2e6b35;
}

@media (max-width: 500px) {
  .top-nav { padding: 10px 14px; gap: 10px; }
  .nav-link { padding: 7px 10px; font-size: 0.85rem; }
  .nav-brand { font-size: 0.95rem; }
}

body {
  /* Dark green -> light green gradient, evoking kiwi flesh */
  background: linear-gradient(135deg, #1b3a1f 0%, #2e6b35 35%, #7bb661 75%, #c8e6a0 100%);
  position: relative;
  color: #0f1a10;
}

.seeds {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

/* Each seed: teardrop/almond shape like a kiwifruit seed */
.seed {
  position: absolute;
  width: 10px;
  height: 16px;
  background: #0a0a0a;
  /* Teardrop: rounded at one end, pointed at the other */
  border-radius: 60% 60% 55% 55% / 75% 75% 35% 35%;
  box-shadow: inset -1px -1px 2px rgba(255, 255, 255, 0.12);
}

.content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
}

h1 {
  font-size: clamp(3rem, 10vw, 7rem);
  color: #0f2a13;
  letter-spacing: 2px;
  text-shadow: 0 2px 8px rgba(255, 255, 255, 0.25);
  font-weight: 900;
}

.tagline {
  margin-top: 12px;
  font-size: clamp(1rem, 2.2vw, 1.35rem);
  color: #14301a;
  font-weight: 500;
  opacity: 0.85;
}

.cta {
  display: inline-block;
  margin-top: 28px;
  padding: 12px 26px;
  background: linear-gradient(135deg, #2e6b35, #1b3a1f);
  color: #eaf6d4;
  text-decoration: none;
  font-weight: 700;
  border-radius: 999px;
  letter-spacing: 0.5px;
  box-shadow: 0 8px 20px rgba(27, 58, 31, 0.35);
  transition: transform 0.08s ease, filter 0.15s ease, box-shadow 0.15s ease;
}

.cta:hover { filter: brightness(1.1); box-shadow: 0 10px 26px rgba(27, 58, 31, 0.45); }
.cta:active { transform: translateY(1px); }

.auth-area {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.welcome {
  color: #14301a;
  font-size: 1.1rem;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.4);
  padding: 8px 18px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.role-badge {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #1b3a1f;
  color: #eaf6d4;
}

.role-badge.role-developer {
  background: linear-gradient(135deg, #ffcf4a, #e07b00);
  color: #3a2000;
}

.role-badge.role-co-devs {
  background: linear-gradient(135deg, #7db9ff, #2e5ca0);
  color: #0a1a33;
}

.role-badge.role-captain {
  background: linear-gradient(135deg, #c47cff, #5e2a9e);
  color: #f4eaff;
}

.role-badge.role-kiwi {
  background: linear-gradient(135deg, #c8e6a0, #7bb661);
  color: #14301a;
}

.logout-btn {
  margin-top: 0;
  border: none;
  font: inherit;
  cursor: pointer;
  background: linear-gradient(135deg, #4a1f1f, #2a1010);
}

/* Bubble skins — applied to .message-bubble in Messages and to previews in Settings.
   Using !important to override the mine/theirs defaults in messages.css (which loads after).
   "Default" intentionally has no rule so the mine/theirs base styling keeps working. */
.skin-preview-row .message-bubble.bubble-skin-default {
  background: #2e6b35;
  color: #eaf6d4;
}
.message-bubble.bubble-skin-blue {
  background: #3b7edb !important;
  color: #ffffff !important;
}
.message-bubble.bubble-skin-red {
  background: #d23b3b !important;
  color: #ffffff !important;
}
.message-bubble.bubble-skin-purple {
  background: #8a3bd2 !important;
  color: #ffffff !important;
}

.message-bubble.bubble-skin-codevs-gradient {
  background: linear-gradient(135deg, #1e3a8a 0%, #3e7be0 55%, #7dc1ff 100%) !important;
  color: #ffffff !important;
}

.message-bubble.bubble-skin-developer-golden {
  background: linear-gradient(180deg, #ffe07a 0%, #f4cf4a 45%, #d99a15 100%) !important;
  color: #3a2300 !important;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(217, 154, 21, 0.35);
}
/* Dark-gold stripe — diagonal from bottom-left to top-right, 30% opaque */
.message-bubble.bubble-skin-developer-golden::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 3px;
  transform: translate(-50%, -50%) rotate(-45deg);
  background: #7a4f00;
  opacity: 0.3;
  pointer-events: none;
}

/* Sparkle decorations (only rendered when author skin is developer-golden) */
.message-bubble .sparkle {
  position: absolute;
  pointer-events: none;
  color: #fffbe0;
  text-shadow: 0 0 4px #fff6c9, 0 0 10px #ffe07a;
  font-size: 0.85rem;
  animation: sparkle-twinkle 1.6s ease-in-out infinite;
}
.message-bubble .sparkle-1 { top: -2px; right: 8px; animation-delay: 0s; }
.message-bubble .sparkle-2 { bottom: 2px; right: 24px; font-size: 0.65rem; animation-delay: 0.4s; }
.message-bubble .sparkle-3 { top: 4px; left: 10px; font-size: 0.7rem; animation-delay: 0.8s; }
.message-bubble .sparkle-4 { bottom: 4px; left: 24px; font-size: 0.55rem; animation-delay: 1.2s; }

@keyframes sparkle-twinkle {
  0%, 100% { opacity: 0.35; transform: scale(0.85) rotate(0deg); }
  50%      { opacity: 1;    transform: scale(1.15) rotate(20deg); }
}
@media (prefers-reduced-motion: reduce) {
  .message-bubble .sparkle { animation: none; opacity: 0.85; }
}

/* ===== Dark mode ===== */
html.theme-dark {
  color-scheme: dark;
}

/* Pages that originally have a white body */
html.theme-dark .settings-body,
html.theme-dark .messages-body,
html.theme-dark .account-body {
  background: #0e1411;
  color: #eaeaea;
}

/* Pages with the green gradient: keep gradient but darken it slightly. */
html.theme-dark body {
  color: #eaeaea;
}
html.theme-dark .seeds .seed {
  background: #1a1a1a;
}

/* Top nav */
html.theme-dark .top-nav,
html.theme-dark .messages-body .top-nav,
html.theme-dark .settings-body .top-nav {
  background: rgba(18, 22, 20, 0.92) !important;
  border-bottom-color: #2a2f2c !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
html.theme-dark .nav-brand { color: #eaeaea; }
html.theme-dark .nav-link { color: #d6d6d6; }
html.theme-dark .nav-link:hover { background: rgba(212, 160, 23, 0.18); color: #ffe07a; }
html.theme-dark .account-btn {
  background: rgba(40, 40, 40, 0.6);
  border-color: rgba(212, 160, 23, 0.55);
  color: #f5f5f5;
}

/* Cards / panels across pages */
html.theme-dark .account-card,
html.theme-dark .dev-panel,
html.theme-dark .signup-clan-card,
html.theme-dark .settings-card,
html.theme-dark .report-card,
html.theme-dark .about-content,
html.theme-dark .conv-pane,
html.theme-dark .conv-view,
html.theme-dark .badge-dialog,
html.theme-dark .msg-dialog,
html.theme-dark .queue-dialog,
html.theme-dark .safety-tip,
html.theme-dark .safety-intro,
html.theme-dark .auth-card,
html.theme-dark .queue-day {
  background: #181d1a;
  color: #e7eae7;
  border-color: #2a2f2c;
}

html.theme-dark h1, html.theme-dark h2, html.theme-dark h3, html.theme-dark h4 {
  color: #f0f3f0;
}

html.theme-dark .muted,
html.theme-dark .conv-empty,
html.theme-dark .conv-empty-note,
html.theme-dark .ticket-meta,
html.theme-dark .report-meta,
html.theme-dark .ticket-fields dt,
html.theme-dark .report-fields dt,
html.theme-dark .skin-lock,
html.theme-dark .conv-pane-header h2,
html.theme-dark .signup-clan-card h2,
html.theme-dark .settings-card h2,
html.theme-dark .report-card h2 {
  color: #b8bdb8;
}

/* Inputs / selects / textareas */
html.theme-dark input,
html.theme-dark textarea,
html.theme-dark select {
  background: #0f1411;
  color: #eaeaea;
  border-color: #2f3531;
}
html.theme-dark input::placeholder,
html.theme-dark textarea::placeholder { color: #6a706c; }
html.theme-dark input:focus,
html.theme-dark textarea:focus,
html.theme-dark select:focus {
  border-color: #d4a017;
  box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.18);
}

/* Conversation list / messages */
html.theme-dark .conv-pane { border-right-color: #2a2f2c !important; }
html.theme-dark .conv-pane-header,
html.theme-dark .conv-active-header { border-bottom-color: #2a2f2c; }
html.theme-dark .conv-item:hover { background: #1f2522; }
html.theme-dark .conv-item.active { background: #233028; }
html.theme-dark .conv-item-name { color: #eaeaea; }
html.theme-dark .conv-item-preview { color: #b8bdb8; }
html.theme-dark .conv-item-time { color: #8a908d; }
html.theme-dark .message-row.theirs .message-bubble {
  background: #25292a;
  color: #eaeaea;
}
html.theme-dark .message-name { color: #b8bdb8; }
html.theme-dark .message-time { color: #6a706c; }
html.theme-dark .conv-footer {
  background: #11171a;
  border-top-color: #2a2f2c;
}
html.theme-dark .conv-footer-note { color: #b8bdb8; }
html.theme-dark .group-warning {
  background: #2e2814;
  color: #f0d57a;
  border-bottom-color: #4a3e10;
}
html.theme-dark .mute-banner {
  background: #2e1414;
  color: #f4baba;
  border-bottom-color: #4a1a1a;
}
html.theme-dark .participant-pill {
  background: #1f2522;
  color: #eaeaea;
  border-color: #2f3531;
}

/* Settings skin grid */
html.theme-dark .skin-card {
  background: #11171a;
  border-color: #2f3531;
}
html.theme-dark .skin-card:hover:not(.locked) {
  background: #182320;
  border-color: #d4a017;
}
html.theme-dark .skin-card.selected {
  background: #1c2a1f;
  border-color: #2e6b35;
}
html.theme-dark .skin-label { color: #eaeaea; }
html.theme-dark .skin-current { color: #94d975; }

/* Tickets / reports / review tabs */
html.theme-dark .ticket-item,
html.theme-dark .report-item {
  background: rgba(255, 255, 255, 0.04);
  color: #e7eae7;
}
html.theme-dark .review-tab,
html.theme-dark .report-review-tab,
html.theme-dark .new-conv-btn,
html.theme-dark .conv-mod-btn {
  background: #11171a;
  color: #eaeaea;
  border-color: rgba(212, 160, 23, 0.4);
}
html.theme-dark .review-tab.active,
html.theme-dark .report-review-tab.active {
  background: #2e6b35;
  color: #eaf6d4;
  border-color: #2e6b35;
}
html.theme-dark .review-clear-btn,
html.theme-dark .conv-delete-btn {
  background: rgba(160, 32, 32, 0.18);
  color: #ff8a8a;
  border-color: rgba(160, 32, 32, 0.55);
}

/* Account page bits */
html.theme-dark .password-display {
  background: #14191a;
  color: #eaf6d4;
  border-color: rgba(46, 107, 53, 0.45);
}
html.theme-dark .roblox-info {
  background: rgba(255, 255, 255, 0.05);
  color: #e7eae7;
}
html.theme-dark .account-label,
html.theme-dark .apply-form label span,
html.theme-dark .report-form label span,
html.theme-dark .compose label,
html.theme-dark .msg-dialog-label,
html.theme-dark .badge-dialog-label,
html.theme-dark .dev-subhead {
  color: #b8bdb8;
}

/* User-table on account page */
html.theme-dark .user-table th { color: #b8bdb8; }
html.theme-dark .user-table td { color: #e7eae7; }
html.theme-dark .user-table th,
html.theme-dark .user-table td { border-bottom-color: #2a2f2c; }

html.theme-dark .form-msg.success { color: #94d975; }
html.theme-dark .form-msg.error   { color: #ff8a8a; }

html.theme-dark .cta.secondary {
  background: rgba(255, 255, 255, 0.06);
  color: #e7eae7;
  border-color: rgba(212, 160, 23, 0.45);
}
html.theme-dark .cta.secondary:hover { background: rgba(255, 255, 255, 0.1); }

/* Theme switcher button */
.theme-toggle-btn {
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1.5px solid rgba(46, 107, 53, 0.3);
  background: #ffffff;
  color: #14301a;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  transition: filter 0.15s ease, transform 0.08s ease;
}
.theme-toggle-btn:hover { filter: brightness(0.97); }
.theme-toggle-btn:active { transform: translateY(1px); }
html.theme-dark .theme-toggle-btn {
  background: #181d1a;
  color: #ffe07a;
  border-color: #d4a017;
}