/* =============================================================================
   Stopwatch.now - Main.css
   Design tokens, reset, layout, components, responsive, dark mode
   ============================================================================= */

/* ---------------------------------------------------------------------------
   DESIGN TOKENS
   --------------------------------------------------------------------------- */
:root {
  --primary:        #1e3a8a;
  --primary-light:  #3b82f6;
  --accent:         #f97316;
  --success:        #16a34a;
  --danger:         #dc2626;
  --warning:        #d97706;
  --neutral-50:     #f8fafc;
  --neutral-100:    #f1f5f9;
  --neutral-200:    #e2e8f0;
  --neutral-300:    #cbd5e1;
  --neutral-400:    #94a3b8;
  --neutral-500:    #64748b;
  --neutral-600:    #475569;
  --neutral-700:    #334155;
  --neutral-800:    #1e293b;
  --neutral-900:    #0f172a;

  --surface-page:   #0b1120;
  --surface-nav:    #111827;
  --surface-card:   #172033;
  --surface-card-2: #1f2937;
  --surface-input:  #0f172a;
  --border-soft:    #334155;
  --focus-ring:     rgba(59, 130, 246, .34);

  --font-display: 'JetBrains Mono', monospace;
  --font-body:    'Inter', sans-serif;

  --radius-sm:   3px;
  --radius-md:   4px;
  --radius-lg:   6px;
  --radius-xl:   8px;
  --radius-2xl:  10px;
  --radius-full: 4px;

  --shadow-sm:  0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md:  0 4px 12px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.07);
  --shadow-lg:  0 8px 30px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.08);
  --shadow-xl:  0 20px 60px rgba(0,0,0,.15), 0 8px 24px rgba(0,0,0,.10);

  --transition: all 0.2s ease;
  --nav-height: 64px;
}

/* ---------------------------------------------------------------------------
   RESET & BASE
   --------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  color: #94a3b8;
  background: var(--surface-page);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}

img, video, svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--primary-light);
  text-decoration: none;
  transition: var(--transition);
}

a:hover {
  color: var(--primary);
}

ul, ol {
  list-style: none;
}

button {
  font-family: var(--font-body);
}

input, textarea, select {
  font-family: var(--font-body);
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.25;
  color: var(--neutral-900);
}

/* ---------------------------------------------------------------------------
   UTILITY CONTAINER
   --------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.container--narrow {
  max-width: 800px;
}

.container--wide {
  max-width: 1400px;
}

/* ---------------------------------------------------------------------------
   NAVIGATION
   --------------------------------------------------------------------------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 900;
  height: var(--nav-height);
  background: var(--surface-nav);
  box-shadow: 0 1px 0 rgba(255,255,255,.06);
  display: flex;
  align-items: center;
}

.site-nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.nav-logo {
  font-size: 19px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.03em;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
}

.nav-logo:hover {
  color: #ffffff;
  opacity: 0.9;
}

.nav-logo-text {
  line-height: 1;
}

.nav-logo-icon {
  font-size: 22px;
}

.nav-center {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-more-item {
  position: relative;
  display: inline-block;
  margin-left: auto;
}

.nav-links a {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 0;
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  text-decoration: none;
  transition: color .15s;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}

.nav-links a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.nav-links a.active {
  color: var(--accent);
  font-weight: 600;
  border-bottom-color: var(--accent);
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  background: var(--accent);
  color: #ffffff !important;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: var(--transition);
  white-space: nowrap;
}

.nav-cta:hover {
  background: #ea6c0a;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(249,115,22,.35);
}

/* Nav dropdown / user menu */
.nav-user {
  position: relative;
}

.nav-user-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: none;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: #cbd5e1;
  transition: var(--transition);
}

.nav-user-trigger:hover {
  background: #152038;
  color: var(--primary);
}

.nav-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-transform: uppercase;
}

.nav-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  background: #1e2d45;
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  border: 1px solid #2d4060;
  overflow: hidden;
  z-index: 1000;
}

.nav-user:hover .nav-dropdown,
.nav-user.open .nav-dropdown,
.nav-dropdown.visible {
  display: block;
  animation: fadeIn 0.15s ease;
}

.nav-dropdown a {
  display: block;
  padding: 10px 16px;
  font-size: 14px;
  color: #cbd5e1;
  text-decoration: none;
  transition: var(--transition);
}

.nav-dropdown a:hover {
  background: #152038;
  color: var(--primary);
}

.nav-dropdown-divider {
  height: 1px;
  background: #2d4060;
  margin: 4px 0;
}

.nav-dropdown a.danger {
  color: #f87171;
}

.nav-dropdown a.danger:hover {
  background: #152038;
  color: #ef4444;
}

/* More dropdown */
.nav-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 4px;
  border: none;
  background: none;
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  cursor: pointer;
  transition: color .15s;
  border-bottom: 2px solid transparent;
  font-family: var(--font-body);
}

.nav-more-btn:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.nav-more-btn svg {
  transition: transform .2s;
}

.nav-more-menu {
  min-width: 460px;
  right: 0;
  left: auto;
  padding: 0;
  overflow: visible;
}

.nav-more-menu.visible {
  display: block;
}

.nav-more-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 8px 6px 6px;
}

.nav-more-col {
  padding: 0 4px;
}

.nav-more-col:first-child {
  border-right: 1px solid #2d4060;
}

.nav-more-heading {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
  padding: 2px 10px 6px;
  margin: 0;
}

/* Override .nav-dropdown a { display: block } for the more menu */
.nav-more-menu a,
.nav-more-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 500;
  color: #cbd5e1;
  text-decoration: none;
  transition: background .1s, color .1s;
}

.nav-more-menu a:hover,
.nav-more-link:hover {
  background: #152038;
  color: var(--primary);
}

/* Ensure SVG icons display inline in the dropdown */
.nav-more-link svg,
.nav-more-menu a svg {
  display: inline-block;
  flex-shrink: 0;
  opacity: 0.55;
}

.nav-more-menu a:hover svg,
.nav-more-link:hover svg {
  opacity: 1;
}

.nav-more-footer {
  display: flex;
  gap: 0;
  border-top: 1px solid #2d4060;
  padding: 6px;
  background: #152038;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.nav-more-footer-link {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  justify-content: center;
  padding: 7px 6px;
  font-size: 12px;
  font-weight: 500;
  color: #94a3b8;
  text-decoration: none;
  transition: color .12s, background .12s;
  border-radius: 4px;
}

.nav-more-footer-link:hover {
  color: var(--primary);
  background: #1e2d45;
}

.nav-more-footer-link svg {
  display: inline-block;
  flex-shrink: 0;
  opacity: 0.5;
}

/* Hamburger */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: none;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition);
  flex-shrink: 0;
}

.nav-hamburger:hover {
  background: #152038;
}

.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #cbd5e1;
  border-radius: 2px;
  transition: var(--transition);
  transform-origin: center;
}

.nav-hamburger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-hamburger.open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.nav-hamburger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile nav drawer */
.nav-mobile {
  display: none;
  position: fixed;
  top: var(--nav-height);
  right: 12px;
  left: auto;
  width: min(420px, calc(100vw - 24px));
  background: #152238;
  border: 1px solid #314867;
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
  z-index: 800;
  padding: 14px;
  max-height: calc(100dvh - var(--nav-height) - 16px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Login link in desktop nav */
.nav-login {
  padding: 6px 14px;
  font-size: 14px;
  font-weight: 500;
  color: #cbd5e1;
  text-decoration: none;
  border-radius: 6px;
  transition: background .15s, color .15s;
}

.nav-login:hover {
  background: #152038;
  color: var(--primary);
}

/* Logout button in user dropdown */
.nav-dropdown-logout {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  color: #f87171;
  font-family: var(--font-body);
  transition: background .15s, color .15s;
}

.nav-dropdown-logout:hover {
  background: #152038;
  color: #ef4444;
}

/* Mobile drawer link / logout / cta */
.nav-mobile-link {
  display: block;
  padding: 10px 12px;
  border-radius: 6px;
  text-decoration: none;
  color: #cbd5e1;
  font-weight: 500;
}

.nav-mobile-link:hover {
  background: #152038;
  color: var(--primary);
}

.nav-mobile-logout {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 10px 12px;
  font-size: 15px;
  font-weight: 500;
  color: #f87171;
  cursor: pointer;
  border-radius: 6px;
  font-family: var(--font-body);
}

.nav-mobile-logout:hover {
  background: #152038;
  color: #ef4444;
}

.nav-mobile-cta {
  display: flex;
  text-align: center;
  justify-content: center;
}

.nav-mobile.open {
  display: block;
  animation: navDrawerIn .16s ease;
}

.nav-mobile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 2px 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid #2d4060;
  color: #f8fafc;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.nav-mobile-close {
  position: relative;
  width: 38px;
  height: 38px;
  border: 1px solid #334b6b;
  border-radius: 8px;
  background: #0f1b2e;
  cursor: pointer;
}

.nav-mobile-close span {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 18px;
  height: 2px;
  border-radius: 999px;
  background: #cbd5e1;
}

.nav-mobile-close span:first-child {
  transform: rotate(45deg);
}

.nav-mobile-close span:last-child {
  transform: rotate(-45deg);
}

.nav-mobile-section {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.nav-mobile-heading {
  margin: 0;
  color: #60a5fa;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.nav-mobile-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.nav-mobile-links--primary {
  grid-template-columns: 1fr;
}

.nav-mobile-links a {
  padding: 12px;
  border: 1px solid #2d4060;
  border-radius: 8px;
  background: #0f1b2e;
  font-size: 14px;
  font-weight: 700;
  color: #cbd5e1;
  text-decoration: none;
  transition: var(--transition);
  min-height: 44px;
  display: flex;
  align-items: center;
  min-width: 0;
}

.nav-mobile-links a:hover,
.nav-mobile-links a.active {
  background: #1e2d45;
  border-color: #60a5fa;
  color: #60a5fa;
}

.nav-mobile-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid #2d4060;
}

@keyframes navDrawerIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------------------------------------------------------------------------
   HERO SECTION
   --------------------------------------------------------------------------- */
.hero {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  color: #ffffff;
  padding: 80px 24px 96px;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
}

.hero .container {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.hero-content {
  max-width: 540px;
}

.hero-text-box {
  background: rgba(10, 20, 50, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: var(--radius-lg);
  padding: 36px 40px;
  border: 1px solid rgba(255,255,255,.1);
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,.9);
  margin-bottom: 20px;
  backdrop-filter: blur(8px);
}

.hero-title {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.15;
  color: #ffffff;
  margin-bottom: 20px;
  letter-spacing: -0.02em;
}

.hero-subtitle {
  font-size: 20px;
  color: rgba(255,255,255,.9);
  margin-bottom: 36px;
  line-height: 1.6;
}

.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.hero-side {
  display: flex;
  justify-content: center;
}

.hero-timer-widget {
  background: #ffffff;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  padding: 32px;
  width: 100%;
  max-width: 380px;
  text-align: center;
}

.hero-widget-tabs {
  display: flex;
  gap: 0;
  background: var(--neutral-100);
  border-radius: var(--radius-md);
  padding: 3px;
  margin-bottom: 28px;
}

.hero-widget-tab {
  flex: 1;
  padding: 7px 12px;
  border: none;
  background: none;
  border-radius: calc(var(--radius-md) - 2px);
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-500);
  cursor: pointer;
  transition: var(--transition);
}

.hero-widget-tab.active {
  background: #ffffff;
  color: var(--primary);
  box-shadow: var(--shadow-sm);
}

/* Hero widget panels */
.hero-panel {
  display: none;
}

.hero-panel--active {
  display: block;
}

.hero-timer-display {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -0.02em;
  margin: 16px 0;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.hero-timer-digits {
  display: inline-block;
}

.hero-timer-ms {
  font-size: 0.45em;
  opacity: 0.65;
}

.hero-controls {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 20px;
  flex-wrap: wrap;
}

.hero-countdown-inputs {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  justify-content: center;
  margin: 16px 0;
}

.hero-time-input-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.hero-time-input-group label {
  font-size: 11px;
  font-weight: 600;
  color: var(--neutral-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.hero-time-input {
  width: 58px;
  padding: 8px 4px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--primary);
  border: 2px solid var(--neutral-200);
  border-radius: var(--radius-md);
  background: var(--neutral-50);
  outline: none;
  transition: border-color 0.15s;
}

.hero-time-input:focus {
  border-color: var(--primary-light);
}

.hero-time-sep {
  font-size: 24px;
  font-weight: 700;
  color: var(--neutral-400);
  line-height: 1;
  padding-bottom: 20px;
}

.hero-countdown-presets {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 10px 0 4px;
}

.preset-btn {
  padding: 4px 10px;
  border: 1px solid var(--neutral-300);
  border-radius: var(--radius-sm);
  background: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--neutral-600);
  cursor: pointer;
  transition: var(--transition);
}

.preset-btn:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
}

.btn-xl {
  padding: 12px 20px;
  font-size: 15px;
}

.btn-fullscreen {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 10px 14px;
  background: var(--neutral-100);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-600);
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition);
}

.btn-fullscreen:hover {
  background: var(--neutral-200);
  color: var(--neutral-800);
}

/* ---------------------------------------------------------------------------
   TOOL GRID
   --------------------------------------------------------------------------- */
.tool-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.tool-card {
  background: linear-gradient(180deg, #172033 0%, #121a2b 100%);
  border: 1px solid var(--border-soft);
  border-top: 3px solid #3b82f6;
  box-shadow: 0 14px 30px rgba(0,0,0,.18);
  border-radius: var(--radius-xl);
  padding: 24px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
  cursor: pointer;
}

.tool-card:hover {
  transform: translateY(-3px);
  border-color: #60a5fa;
  border-top-color: #f97316;
  background: linear-gradient(180deg, #1f2a40 0%, #151f33 100%);
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
  color: inherit;
}

.tool-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: rgba(59, 130, 246, 0.14);
  border: 1px solid rgba(96, 165, 250, .22);
  border-radius: var(--radius-xl);
  color: #60a5fa;
  flex-shrink: 0;
}

.tool-card-icon svg {
  width: 36px;
  height: 36px;
}

.tool-card-name {
  font-size: 17px;
  font-weight: 700;
  color: #f1f5f9;
  line-height: 1.3;
}

.tool-card-desc {
  font-size: 14px;
  color: #94a3b8;
  line-height: 1.55;
  flex: 1;
}

.tool-card-link {
  font-size: 13px;
  font-weight: 600;
  color: #60a5fa;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}

.tool-card:hover .tool-card-link {
  color: var(--accent);
  gap: 8px;
}

/* ---------------------------------------------------------------------------
   POPULAR TOOLS SCROLL STRIP
   --------------------------------------------------------------------------- */
.popular-tools-section {
  background: #0f172a;
}

.popular-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #2d4060 transparent;
}

.popular-scroll::-webkit-scrollbar {
  height: 3px;
}

.popular-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.popular-scroll::-webkit-scrollbar-thumb {
  background: #2d4060;
  border-radius: 2px;
}

.popular-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 22px 16px;
  background: #1a2744;
  border: 1px solid #2d4060;
  border-top: 3px solid var(--primary-light);
  border-radius: var(--radius-xl);
  text-decoration: none;
  white-space: nowrap;
  scroll-snap-align: start;
  flex-shrink: 0;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s, background 0.15s;
  min-width: 118px;
}

.popular-card:hover {
  border-top-color: var(--accent);
  border-color: #3d5580;
  background: #1e2d45;
  box-shadow: 0 0 0 1px #f97316;
}

.popular-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: rgba(96, 165, 250, 0.12);
  border-radius: 12px;
  color: #60a5fa;
  transition: background 0.15s, color 0.15s;
}

.popular-card:hover .popular-card-icon {
  background: rgba(249, 115, 22, 0.15);
  color: var(--accent);
}

.popular-card-name {
  font-size: 13px;
  font-weight: 600;
  color: #cbd5e1;
  transition: color 0.15s;
}

.popular-card:hover .popular-card-name {
  color: #ffffff;
}

/* ---------------------------------------------------------------------------
   TIMER DISPLAY
   --------------------------------------------------------------------------- */
.timer-display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--neutral-900);
  line-height: 1;
  display: block;
  font-variant-numeric: tabular-nums;
}

.timer-display--hero {
  font-size: 64px;
}

.timer-display--large {
  font-size: 120px;
}

.timer-display--standard {
  font-size: 80px;
}

.timer-display--small {
  font-size: 48px;
}

.timer-display--widget {
  font-size: 52px;
  color: var(--primary);
}

/* Milliseconds in smaller text */
.timer-ms {
  font-size: 0.4em;
  opacity: 0.6;
}

/* ---------------------------------------------------------------------------
   BUTTONS
   --------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 22px;
  border-radius: var(--radius-xl);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .12s ease;
  border: 1px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  outline: none;
  line-height: 1.2;
}

.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--focus-ring);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

/* Variants */
.btn-primary {
  background: #2563eb;
  color: #ffffff;
}

.btn-primary:hover:not(:disabled) {
  background: #1d4ed8;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(37,99,235,.28);
}

.btn-primary-light {
  background: var(--primary-light);
  color: #ffffff;
}

.btn-primary-light:hover:not(:disabled) {
  background: #2563eb;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59,130,246,.35);
}

.btn-accent,
.btn-start {
  background: #f97316;
  color: #ffffff;
}

.btn-accent:hover:not(:disabled),
.btn-start:hover:not(:disabled) {
  background: #ea580c;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(249,115,22,.28);
}

.btn-orange {
  background: var(--accent);
  color: #ffffff;
}

.btn-orange:hover:not(:disabled) {
  background: #ea6c0a;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(249,115,22,.35);
}

.btn-pause {
  background: var(--warning);
  color: #ffffff;
}

.btn-pause:hover:not(:disabled) {
  background: #b45309;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(217,119,6,.35);
}

.btn-reset {
  background: #2b3648;
  border-color: #3f4b5f;
  color: #e2e8f0;
}

.btn-reset:hover:not(:disabled) {
  background: #374151;
  border-color: #64748b;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(15,23,42,.26);
}

.btn-lap {
  background: var(--primary);
  color: #ffffff;
}

.btn-lap:hover:not(:disabled) {
  background: #162d6e;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(30,58,138,.35);
}

.btn-fullscreen {
  background: var(--neutral-200);
  color: var(--neutral-700);
}

.btn-fullscreen:hover:not(:disabled) {
  background: var(--neutral-300);
  color: var(--neutral-900);
}

.btn-outline {
  background: transparent;
  color: #93c5fd;
  border: 1px solid #3b82f6;
}

.btn-outline:hover:not(:disabled) {
  background: var(--primary);
  color: #ffffff;
}

.btn-outline-white {
  background: transparent;
  color: #ffffff;
  border: 2px solid rgba(255,255,255,.6);
}

.btn-outline-white:hover:not(:disabled) {
  background: rgba(255,255,255,.15);
  border-color: #ffffff;
  color: #ffffff;
}

.btn-ghost {
  background: #111827;
  border-color: #334155;
  color: #cbd5e1;
}

.btn-ghost:hover:not(:disabled) {
  background: #1f2937;
  border-color: #64748b;
  color: #ffffff;
}

/* Sizes */
.btn-sm {
  min-height: 36px;
  padding: 0 14px;
  font-size: 13px;
  border-radius: var(--radius-lg);
}

.btn-xs {
  min-height: 30px;
  padding: 0 10px;
  border-radius: var(--radius-md);
  font-size: 12px;
}

/* Semantic color variants used by tool pages */
.btn-success {
  background: #16a34a;
  color: #ffffff;
}

.btn-success:hover:not(:disabled) {
  background: #15803d;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(22,163,74,.35);
}

.btn-danger {
  background: #374151;
  border-color: #475569;
  color: #e2e8f0;
}

.btn-danger:hover:not(:disabled) {
  background: #4b5563;
  border-color: #64748b;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(15,23,42,.26);
}

.btn-lg {
  min-height: 50px;
  padding: 0 30px;
  font-size: 16px;
  border-radius: var(--radius-lg);
}

.btn-xl {
  min-height: 56px;
  padding: 0 38px;
  font-size: 17px;
  border-radius: var(--radius-xl);
}

.btn-full {
  width: 100%;
}

.btn-icon {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--radius-md);
}

.btn-icon-lg {
  width: 52px;
  height: 52px;
  padding: 0;
  font-size: 20px;
  border-radius: var(--radius-lg);
}

/* ---------------------------------------------------------------------------
   TIMER CONTROLS
   --------------------------------------------------------------------------- */
.timer-controls {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}

/* ---------------------------------------------------------------------------
   LAP TABLE
   --------------------------------------------------------------------------- */
.lap-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 24px;
  font-size: 14px;
}

.lap-table th {
  background: var(--neutral-100);
  text-align: left;
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--neutral-500);
  border-bottom: 2px solid var(--neutral-200);
}

.lap-table th:first-child {
  border-radius: var(--radius-md) 0 0 0;
}

.lap-table th:last-child {
  border-radius: 0 var(--radius-md) 0 0;
  text-align: right;
}

.lap-table td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--neutral-200);
  color: var(--neutral-700);
  font-family: var(--font-display);
  font-size: 13px;
}

.lap-table td:first-child {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--neutral-500);
}

.lap-table td:last-child {
  text-align: right;
}

.lap-table tr:last-child td {
  border-bottom: none;
}

.lap-table tr:hover td {
  background: var(--neutral-50);
}

.lap-best td {
  background: #f0fdf4 !important;
  color: var(--success) !important;
}

.lap-best td:first-child {
  color: var(--success) !important;
}

.lap-worst td {
  background: #fef2f2 !important;
  color: var(--danger) !important;
}

.lap-worst td:first-child {
  color: var(--danger) !important;
}

.lap-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-left: 8px;
  font-family: var(--font-body);
}

.lap-badge--best {
  background: #dcfce7;
  color: var(--success);
}

.lap-badge--worst {
  background: #fee2e2;
  color: var(--danger);
}

/* ---------------------------------------------------------------------------
   SECTIONS
   --------------------------------------------------------------------------- */
.section {
  padding: 64px 24px;
}

.section--sm {
  padding: 40px 24px;
}

.section--lg {
  padding: 96px 24px;
}

.section--gray {
  background: var(--neutral-100);
}

.section--dark {
  background: var(--neutral-900);
  color: #ffffff;
}

.section-header {
  text-align: center;
  margin-bottom: 48px;
}

.section-label {
  display: inline-block;
  padding: 4px 14px;
  background: rgba(59,130,246,.1);
  color: var(--primary-light);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 16px;
}

.section-title {
  font-size: 32px;
  font-weight: 700;
  color: #f1f5f9;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}

.section-subtitle {
  font-size: 18px;
  color: #94a3b8;
  max-width: 600px;
  margin: 0 auto;
}

/* ---------------------------------------------------------------------------
   CARDS
   --------------------------------------------------------------------------- */
.card {
  background: #ffffff;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: 24px;
  border: 1px solid var(--neutral-200);
}

.card-sm {
  background: #ffffff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 16px;
  border: 1px solid var(--neutral-200);
}

.card-lg {
  background: #ffffff;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
  padding: 40px;
  border: 1px solid var(--neutral-200);
}

/* ---------------------------------------------------------------------------
   USE CASE CARDS
   --------------------------------------------------------------------------- */
.use-cases-container {
  max-width: 1280px;
}

.use-cases-header {
  margin-bottom: 36px;
}

.use-cases-header .section-subtitle {
  margin-top: 8px;
  color: #94a3b8;
  font-size: 16px;
}

.use-case-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.use-case-card {
  background: #131f35;
  border: 1px solid #2d4060;
  border-top: 3px solid transparent;
  border-radius: var(--radius-xl);
  box-shadow: none;
  padding: 22px 20px 20px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.use-case-card:hover {
  border-top-color: #f97316;
  border-color: #3d5580;
  background: #1a2744;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}

.use-case-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: rgba(249, 115, 22, 0.12);
  border-radius: 12px;
  color: #f97316;
  flex-shrink: 0;
}

.use-case-icon svg {
  width: 28px;
  height: 28px;
}

.use-case-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.use-case-title {
  font-size: 15px;
  font-weight: 700;
  color: #f1f5f9;
  line-height: 1.3;
}

.use-case-desc {
  font-size: 13px;
  color: #94a3b8;
  line-height: 1.55;
  flex: 1;
}

.use-case-link {
  font-size: 13px;
  font-weight: 600;
  color: #60a5fa;
  margin-top: 4px;
  transition: color 0.15s;
}

.use-case-card:hover .use-case-link {
  color: #f97316;
}

/* ---------------------------------------------------------------------------
   TRUST STRIP
   --------------------------------------------------------------------------- */
.trust-strip {
  background: #1e3a8a;
  color: #ffffff;
  padding: 40px 24px;
}

.trust-items {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  flex-wrap: wrap;
}

.trust-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  flex: 1;
  padding: 0 16px;
}

.trust-stat-number {
  font-size: 36px;
  font-weight: 800;
  color: #f97316;
  line-height: 1;
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

.trust-stat-label {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,.8);
  line-height: 1.3;
}

.trust-divider {
  width: 1px;
  height: 48px;
  background: rgba(255,255,255,.15);
  flex-shrink: 0;
}

/* ---------------------------------------------------------------------------
   BLOG CARDS
   --------------------------------------------------------------------------- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.blog-card {
  background: #1e2d45;
  border: 1px solid #2d4060;
  border-radius: var(--radius-xl);
  box-shadow: none;
  overflow: hidden;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}

.blog-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  border-color: var(--primary-light);
}

.blog-card-image {
  aspect-ratio: 16 / 9;
  background: var(--neutral-200);
  overflow: hidden;
  position: relative;
}

.blog-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.blog-card:hover .blog-card-image img {
  transform: scale(1.04);
}

.blog-card-image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  background: linear-gradient(135deg, var(--neutral-100), var(--neutral-200));
}

.blog-card-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.blog-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.blog-card-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background: var(--primary);
  color: #ffffff;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.blog-card-date {
  font-size: 12px;
  color: #64748b;
}

.blog-card-title {
  font-size: 18px;
  font-weight: 600;
  color: #e2e8f0;
  line-height: 1.35;
  text-decoration: none;
  transition: var(--transition);
}

.blog-card-title:hover {
  color: var(--primary-light);
}

.blog-card-excerpt {
  font-size: 14px;
  color: #94a3b8;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

.section-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}
.section-view-all {
  font-size: 14px;
  font-weight: 600;
  color: #60a5fa;
  text-decoration: none;
}
.section-view-all:hover { color: #f97316; }

.blog-card-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--neutral-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.blog-card-read-time {
  font-size: 12px;
  color: var(--neutral-500);
}

.blog-card-read-more {
  font-size: 13px;
  font-weight: 600;
  color: var(--primary-light);
  text-decoration: none;
}

.blog-card-read-more:hover {
  color: var(--primary);
}

/* ---------------------------------------------------------------------------
   FOOTER
   --------------------------------------------------------------------------- */
.site-footer {
  background: #0f172a;
  color: rgba(255,255,255,.8);
  padding: 48px 24px 28px;
  border-top: 1px solid #1e2d45;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  gap: 32px;
  margin-bottom: 32px;
}

.footer-logo {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  text-decoration: none;
}

.footer-tagline {
  font-size: 14px;
  color: rgba(255,255,255,.55);
  line-height: 1.6;
  margin-bottom: 20px;
}

.footer-social {
  display: flex;
  gap: 12px;
}

.footer-social-link {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.6);
  font-size: 16px;
  text-decoration: none;
  transition: var(--transition);
}

.footer-social-link:hover {
  background: rgba(255,255,255,.15);
  color: #ffffff;
}

.footer-heading {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,.4);
  margin-bottom: 16px;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-links a {
  font-size: 13px;
  color: rgba(255,255,255,.6);
  text-decoration: none;
  transition: var(--transition);
}

.footer-links a:hover {
  color: #ffffff;
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(255,255,255,.35);
  gap: 16px;
  flex-wrap: wrap;
}

.footer-bottom-links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.footer-bottom-links a {
  color: rgba(255,255,255,.5);
  text-decoration: none;
  font-size: 13px;
  transition: var(--transition);
}

.footer-bottom-links a:hover {
  color: rgba(255,255,255,.85);
}

/* ---------------------------------------------------------------------------
   AUTH FORMS
   --------------------------------------------------------------------------- */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--neutral-100) 0%, #dbeafe 100%);
  padding: 24px;
}

.auth-card {
  background: #ffffff;
  max-width: 420px;
  width: 100%;
  padding: 40px;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--neutral-200);
}

.auth-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 28px;
}

.auth-logo a {
  font-size: 22px;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
}

.auth-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--neutral-900);
  margin-bottom: 8px;
  text-align: center;
  letter-spacing: -0.02em;
}

.auth-subtitle {
  font-size: 15px;
  color: var(--neutral-600);
  margin-bottom: 32px;
  text-align: center;
  line-height: 1.5;
}

.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #94a3b8;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.form-input {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  font-size: 16px;
  font-family: var(--font-body);
  color: #f8fafc;
  background: var(--surface-input);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
  outline: none;
  appearance: none;
}

.form-input:focus {
  border-color: #60a5fa;
  background: #111827;
  box-shadow: 0 0 0 4px var(--focus-ring);
}

.form-input::placeholder {
  color: var(--neutral-400);
}

.form-input.error {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(220,38,38,.1);
}

.form-error {
  display: block;
  font-size: 13px;
  color: var(--danger);
  margin-top: 6px;
}

.form-hint {
  display: block;
  font-size: 12px;
  color: var(--neutral-500);
  margin-top: 5px;
}

.form-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0;
  font-size: 13px;
  color: var(--neutral-400);
}

.form-divider::before,
.form-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--neutral-200);
}

.btn-submit {
  width: 100%;
  height: 48px;
  background: var(--primary);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-lg);
  font-size: 16px;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-submit:hover {
  background: #162d6e;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(30,58,138,.35);
}

.btn-submit:active {
  transform: none;
}

.auth-footer {
  text-align: center;
  margin-top: 24px;
  font-size: 14px;
  color: var(--neutral-600);
}

.auth-footer a {
  color: var(--primary-light);
  font-weight: 600;
}

body.page-auth {
  background: #0f1b2f;
}

body.page-auth #main-content {
  padding: clamp(2rem, 5vw, 4rem) 0;
}

.auth-layout {
  width: min(100% - 32px, 1080px);
  margin: 0 auto;
}

.auth-layout--oauth {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: 24px;
  align-items: stretch;
}

.auth-oauth-card,
.auth-support-panel {
  border: 1px solid #2d4060;
  border-radius: 8px;
  background: #17253a;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .24);
}

.auth-oauth-card {
  display: grid;
  align-content: center;
  gap: 28px;
  min-height: 520px;
  padding: clamp(2rem, 5vw, 4rem);
}

.auth-eyebrow {
  margin: 0 0 10px;
  color: #60a5fa;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body.page-auth .auth-title {
  max-width: 680px;
  margin: 0 0 14px;
  color: #f8fafc;
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 1.04;
  text-align: left;
  letter-spacing: 0;
}

body.page-auth .auth-subtitle {
  max-width: 680px;
  margin: 0;
  color: #b8c4d8;
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  line-height: 1.65;
  text-align: left;
}

.auth-oauth-action {
  display: grid;
  gap: 14px;
}

.auth-google-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: min(100%, 380px);
  min-height: 56px;
  padding: 0 22px;
  border: 1px solid #d9e2ef;
  border-radius: 8px;
  background: #ffffff;
  color: #1f2937;
  font-size: 1rem;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 14px 28px rgba(0, 0, 0, .2);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.auth-google-btn:hover {
  border-color: #60a5fa;
  color: #0f172a;
  transform: translateY(-1px);
  box-shadow: 0 18px 36px rgba(0, 0, 0, .28);
}

.auth-privacy-note {
  max-width: 520px;
  margin: 0;
  color: #94a3b8;
  font-size: .92rem;
  line-height: 1.55;
}

.auth-privacy-note a {
  color: #60a5fa;
  font-weight: 700;
}

.auth-oauth-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 18px;
  border-top: 1px solid #2d4060;
  color: #94a3b8;
  font-size: .95rem;
}

.auth-oauth-footer a {
  color: #60a5fa;
  font-weight: 800;
}

.auth-support-panel {
  display: grid;
  align-content: center;
  gap: 18px;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: linear-gradient(180deg, #1e2d45 0%, #17253a 100%);
}

.auth-support-panel h2 {
  margin: 0;
  color: #f8fafc;
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  line-height: 1.15;
}

.auth-benefit-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.auth-benefit-list li {
  position: relative;
  padding: 12px 14px 12px 38px;
  border: 1px solid #2d4060;
  border-radius: 8px;
  background: #0f1b2e;
  color: #d7e1f0;
  font-weight: 700;
  line-height: 1.4;
}

.auth-benefit-list li::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #10b981;
  transform: translateY(-50%);
  box-shadow: 0 0 0 4px rgba(16, 185, 129, .14);
}

.auth-support-panel p {
  margin: 0;
  color: #a8b3c5;
  font-size: .95rem;
  line-height: 1.65;
}

/* ---------------------------------------------------------------------------
   DASHBOARD LAYOUT
   --------------------------------------------------------------------------- */
.dashboard-layout {
  display: flex;
  min-height: calc(100vh - var(--nav-height));
  background: var(--neutral-50);
}

.dashboard-sidebar {
  width: 240px;
  flex-shrink: 0;
  background: #ffffff;
  border-right: 1px solid var(--neutral-200);
  padding: 24px 16px;
  position: sticky;
  top: var(--nav-height);
  height: calc(100vh - var(--nav-height));
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dashboard-sidebar-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--neutral-400);
  padding: 12px 12px 6px;
  margin-top: 8px;
}

.dashboard-sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  color: var(--neutral-600);
  text-decoration: none;
  transition: var(--transition);
}

.dashboard-sidebar-link:hover {
  background: var(--neutral-100);
  color: var(--primary);
}

.dashboard-sidebar-link.active {
  background: rgba(59,130,246,.08);
  color: var(--primary);
  font-weight: 600;
}

.dashboard-sidebar-link .icon {
  font-size: 18px;
  flex-shrink: 0;
}

.dashboard-content {
  flex: 1;
  padding: 32px;
  min-width: 0;
}

.dashboard-header {
  margin-bottom: 32px;
}

.dashboard-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--neutral-900);
  margin-bottom: 4px;
  letter-spacing: -0.02em;
}

.dashboard-subtitle {
  font-size: 15px;
  color: var(--neutral-600);
}

/* Stats */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}

.stat-card {
  background: #ffffff;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: 24px;
  text-align: center;
  border: 1px solid var(--neutral-200);
}

.stat-number {
  font-size: 40px;
  font-weight: 700;
  color: var(--primary);
  line-height: 1;
  margin-bottom: 8px;
  font-family: var(--font-display);
}

.stat-label {
  font-size: 13px;
  color: var(--neutral-500);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Achievements */
.achievement-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.achievement-card {
  background: #ffffff;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: 20px;
  border: 1px solid var(--neutral-200);
  display: flex;
  align-items: center;
  gap: 16px;
  transition: var(--transition);
}

.achievement-card:hover {
  box-shadow: var(--shadow-md);
}

.achievement-card.locked {
  filter: grayscale(1);
  opacity: 0.4;
}

.achievement-icon {
  font-size: 36px;
  flex-shrink: 0;
}

.achievement-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--neutral-900);
  margin-bottom: 4px;
}

.achievement-desc {
  font-size: 13px;
  color: var(--neutral-600);
}

/* Modern dashboard overview */
body.page-dashboard {
  background: #0f1e35;
}

body.page-dashboard #main-content {
  padding: clamp(1.5rem, 4vw, 3rem) 0;
}

.dashboard-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 24px;
  width: min(100% - 32px, 1360px);
  margin: 0 auto;
  color: #e2e8f0;
}

body.page-dashboard .dashboard-sidebar {
  position: sticky;
  top: calc(var(--nav-height) + 24px);
  width: auto;
  height: fit-content;
  max-height: calc(100vh - var(--nav-height) - 48px);
  padding: 18px;
  border: 1px solid #2d4060;
  border-radius: 8px;
  background: #17253a;
  overflow: auto;
}

.dashboard-user-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 0 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid #2d4060;
}

.dashboard-avatar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: #2563eb;
  color: #fff;
  font-weight: 800;
}

.dashboard-user-copy {
  min-width: 0;
}

.dashboard-username,
.dashboard-email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-username {
  color: #f8fafc;
  font-weight: 800;
}

.dashboard-email {
  color: #94a3b8;
  font-size: .86rem;
}

body.page-dashboard .dashboard-nav {
  display: grid;
  gap: 8px;
}

body.page-dashboard .dashboard-nav-link {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #b8c4d8;
  font-weight: 700;
  text-decoration: none;
}

body.page-dashboard .dashboard-nav-link:hover,
body.page-dashboard .dashboard-nav-link--active {
  border-color: #3d587d;
  background: #1e2d45;
  color: #f8fafc;
}

body.page-dashboard .dashboard-main {
  display: grid;
  gap: 24px;
  min-width: 0;
}

.dashboard-hero,
.dashboard-section,
.dashboard-stat-card {
  border: 1px solid #2d4060;
  border-radius: 8px;
  background: #17253a;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .22);
}

.dashboard-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(1.5rem, 3vw, 2rem);
}

.dashboard-kicker,
.dashboard-section-kicker {
  margin: 0 0 8px;
  color: #60a5fa;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body.page-dashboard .dashboard-title {
  margin: 0;
  color: #f8fafc;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: 0;
}

.dashboard-intro {
  max-width: 720px;
  margin: 12px 0 0;
  color: #b8c4d8;
  font-size: 1.06rem;
  line-height: 1.6;
}

.dashboard-hero-action,
.dashboard-section-link,
.dashboard-table-link {
  color: #60a5fa;
  font-weight: 800;
}

.dashboard-hero-action {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid #3d587d;
  border-radius: 8px;
  text-decoration: none;
}

.dashboard-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.dashboard-stat-card {
  padding: 18px;
}

.dashboard-stat-label {
  display: block;
  color: #94a3b8;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.dashboard-stat-value {
  display: block;
  margin-top: 10px;
  color: #f8fafc;
  font-size: clamp(1.7rem, 4vw, 2.45rem);
  line-height: 1;
}

.dashboard-section {
  padding: clamp(1.25rem, 3vw, 1.75rem);
}

.dashboard-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.dashboard-section-title {
  margin: 0;
  color: #f8fafc;
  font-size: clamp(1.35rem, 2.5vw, 2rem);
  line-height: 1.2;
}

.dashboard-action-grid,
.dashboard-two-column {
  display: grid;
  gap: 16px;
}

.dashboard-action-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dashboard-two-column {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-action-card,
.dashboard-list-item {
  border: 1px solid #2d4060;
  border-radius: 8px;
  background: #102038;
  color: #e2e8f0;
  text-decoration: none;
}

.dashboard-action-card {
  display: grid;
  gap: 10px;
  min-height: 190px;
  padding: 18px;
}

.dashboard-action-card:hover,
.dashboard-list-item:hover {
  border-color: #60a5fa;
  background: #1e2d45;
}

.dashboard-card-icon,
.dashboard-list-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid #3d587d;
  border-radius: 8px;
  color: #60a5fa;
  background: #0f1e35;
}

.dashboard-card-title {
  color: #f8fafc;
  font-size: 1.08rem;
  font-weight: 900;
}

.dashboard-card-desc {
  color: #b8c4d8;
  line-height: 1.5;
}

.dashboard-list {
  display: grid;
  gap: 10px;
}

.dashboard-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  padding: 12px;
  font-weight: 800;
}

.dashboard-list-item--static {
  justify-content: space-between;
}

.dashboard-list-item small {
  display: block;
  margin-top: 4px;
  color: #94a3b8;
  font-size: .88rem;
  font-weight: 700;
}

.dashboard-empty-state {
  display: grid;
  gap: 14px;
  align-items: start;
  padding: 20px;
  border: 1px dashed #3d587d;
  border-radius: 8px;
  background: #102038;
  color: #b8c4d8;
}

.dashboard-empty-state p {
  margin: 0;
}

.dashboard-table-wrap {
  overflow-x: auto;
}

body.page-dashboard .dashboard-table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
}

body.page-dashboard .dashboard-table th,
body.page-dashboard .dashboard-table td {
  padding: 14px 12px;
  border-bottom: 1px solid #2d4060;
  text-align: left;
}

body.page-dashboard .dashboard-table th {
  color: #94a3b8;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body.page-dashboard .dashboard-table td,
body.page-dashboard .dashboard-table a {
  color: #e2e8f0;
}

body.page-dashboard .dashboard-table a:hover {
  color: #60a5fa;
}

/* ---------------------------------------------------------------------------
   ADMIN LAYOUT
   --------------------------------------------------------------------------- */
.admin-layout {
  display: flex;
  min-height: calc(100vh - var(--nav-height));
}

.admin-sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--neutral-900);
  color: rgba(255,255,255,.8);
  padding: 24px 0;
  position: sticky;
  top: var(--nav-height);
  height: calc(100vh - var(--nav-height));
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.admin-sidebar-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,.3);
  padding: 12px 20px 6px;
  margin-top: 8px;
}

.admin-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,.7);
  text-decoration: none;
  border-radius: 0;
  transition: var(--transition);
  border-left: 3px solid transparent;
}

.admin-nav-link:hover {
  background: rgba(255,255,255,.08);
  color: #ffffff;
}

.admin-nav-link.active {
  background: rgba(255,255,255,.10);
  color: #ffffff;
  border-left-color: var(--primary-light);
}

.admin-content {
  flex: 1;
  padding: 32px;
  background: var(--neutral-50);
  min-width: 0;
}

.admin-header {
  margin-bottom: 28px;
}

.admin-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--neutral-900);
  margin-bottom: 4px;
}

.admin-stat-row {
  display: flex;
  gap: 20px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.admin-stat-card {
  background: #ffffff;
  border-radius: var(--radius-xl);
  padding: 20px 24px;
  flex: 1;
  min-width: 160px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--neutral-200);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-stat-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--neutral-500);
}

.admin-stat-number {
  font-size: 32px;
  font-weight: 700;
  color: var(--primary);
  line-height: 1;
  font-family: var(--font-display);
}

.admin-stat-change {
  font-size: 13px;
  color: var(--neutral-500);
}

.admin-stat-change.positive {
  color: var(--success);
}

.admin-stat-change.negative {
  color: var(--danger);
}

/* Data tables */
.data-table-wrapper {
  background: #ffffff;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--neutral-200);
  overflow: hidden;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
}

.data-table th {
  background: var(--neutral-100);
  padding: 12px 16px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--neutral-500);
  border-bottom: 1px solid var(--neutral-200);
  white-space: nowrap;
}

.data-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--neutral-100);
  font-size: 14px;
  color: var(--neutral-700);
  vertical-align: middle;
}

.data-table tr:last-child td {
  border-bottom: none;
}

.data-table tr:hover td {
  background: var(--neutral-50);
}

/* ---------------------------------------------------------------------------
   FLASH MESSAGES
   --------------------------------------------------------------------------- */
.flash-container {
  position: fixed;
  top: calc(var(--nav-height) + 16px);
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.flash-message {
  pointer-events: all;
  padding: 14px 16px;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  max-width: 360px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  animation: fadeIn 0.3s ease;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.flash-message.hiding {
  opacity: 0;
  transform: translateX(100%);
}

.flash-content {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.flash-icon {
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}

.flash-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  opacity: 0.7;
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
  transition: opacity 0.15s ease;
  color: inherit;
}

.flash-close:hover {
  opacity: 1;
}

.flash-success {
  background: var(--success);
  color: #ffffff;
}

.flash-error {
  background: var(--danger);
  color: #ffffff;
}

.flash-info {
  background: var(--primary-light);
  color: #ffffff;
}

.flash-warning {
  background: var(--warning);
  color: #ffffff;
}

/* ---------------------------------------------------------------------------
   BADGES & PILLS
   --------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
}

.badge-primary { background: rgba(59,130,246,.12); color: var(--primary-light); }
.badge-success { background: #dcfce7; color: var(--success); }
.badge-danger  { background: #fee2e2; color: var(--danger); }
.badge-warning { background: #fef3c7; color: var(--warning); }
.badge-neutral { background: var(--neutral-200); color: var(--neutral-700); }

/* ---------------------------------------------------------------------------
   BREADCRUMBS
   --------------------------------------------------------------------------- */
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--neutral-500);
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.breadcrumbs a {
  color: var(--neutral-500);
  text-decoration: none;
}

.breadcrumbs a:hover {
  color: var(--primary-light);
}

.breadcrumbs-sep {
  color: var(--neutral-300);
}

.breadcrumbs span:last-child {
  color: var(--neutral-700);
  font-weight: 500;
}

/* ---------------------------------------------------------------------------
   MODALS
   --------------------------------------------------------------------------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.5);
  backdrop-filter: blur(4px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.modal-backdrop.open {
  opacity: 1;
}

.modal {
  background: #ffffff;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  transform: translateY(20px) scale(0.98);
  transition: transform 0.2s ease;
}

.modal-backdrop.open .modal {
  transform: translateY(0) scale(1);
}

.modal-header {
  padding: 24px 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--neutral-900);
}

.modal-close {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  border: none;
  background: var(--neutral-100);
  color: var(--neutral-600);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.modal-close:hover {
  background: var(--neutral-200);
  color: var(--neutral-900);
}

.modal-body {
  padding: 24px;
}

.modal-footer {
  padding: 0 24px 24px;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

/* ---------------------------------------------------------------------------
   FEATURE LIST
   --------------------------------------------------------------------------- */
.feature-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  color: var(--neutral-700);
}

.feature-item-icon {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  background: #dcfce7;
  color: var(--success);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

/* ---------------------------------------------------------------------------
   SKELETON LOADING
   --------------------------------------------------------------------------- */
.skeleton {
  background: linear-gradient(90deg, var(--neutral-200) 25%, var(--neutral-100) 50%, var(--neutral-200) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---------------------------------------------------------------------------
   ANIMATIONS
   --------------------------------------------------------------------------- */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.6; transform: scale(0.9); }
}

@keyframes pulseBg {
  0%, 100% { box-shadow: 0 0 0 0 rgba(22,163,74,.4); }
  50%       { box-shadow: 0 0 0 8px rgba(22,163,74,.0); }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

@keyframes tickFlash {
  0%   { color: var(--neutral-900); }
  50%  { color: var(--primary-light); }
  100% { color: var(--neutral-900); }
}

.animate-fadeIn    { animation: fadeIn 0.3s ease; }
.animate-fadeInUp  { animation: fadeInUp 0.4s ease; }
.animate-slideUp   { animation: slideUp 0.3s ease; }
.animate-spin      { animation: spin 1s linear infinite; }

/* ---------------------------------------------------------------------------
   RESPONSIVE BREAKPOINTS
   --------------------------------------------------------------------------- */

/* Tablet (≤ 1024px) */
@media (max-width: 1024px) {
  .hero .container {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }

  .hero-content {
    max-width: 100%;
  }

  .hero-actions {
    justify-content: center;
  }

  .hero-side {
    order: -1;
  }

  .tool-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .use-case-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .achievement-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile (≤ 768px) */
/* Swap hero background to mobile-optimised image on small screens */
@media (max-width: 768px) {
  .hero[style*="hero.webp"] {
    background-image: url('/static/images/hero_mobile.webp') !important;
  }
}

@media (max-width: 768px) {
  :root {
    --nav-height: 60px;
  }

  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .site-nav .container {
    padding-left: 16px;
    padding-right: 16px;
    gap: 10px;
  }

  .nav-logo {
    gap: 8px;
    min-width: 0;
  }

  .nav-logo svg {
    width: 30px;
    height: 30px;
  }

  .nav-logo-text {
    font-size: clamp(18px, 5vw, 22px);
  }

  .nav-right {
    gap: 8px;
    flex-shrink: 0;
  }

  /* Nav */
  .nav-links,
  .nav-cta {
    display: none;
  }

  .nav-mobile .nav-cta {
    display: inline-flex;
  }

  .nav-hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid #334b6b;
    background: #0f1b2e;
    border-radius: 8px;
  }

  .nav-login {
    padding: 7px 8px;
    font-size: 14px;
  }

  .hero {
    padding: 48px 20px 64px;
  }

  .hero .container,
  .container,
  .footer-container,
  .use-cases-container {
    max-width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }

  .hero-text-box {
    padding: 24px 18px;
  }

  .hero-timer-widget,
  .card,
  .tool-card,
  .blog-card,
  .use-case-card,
  .data-table-wrapper,
  .auth-card,
  .modal-content {
    max-width: 100%;
    min-width: 0;
  }

  .auth-layout--oauth {
    grid-template-columns: 1fr;
    width: min(100% - 28px, 620px);
  }

  .auth-oauth-card {
    order: 1;
  }

  .auth-support-panel {
    order: 2;
  }

  .auth-oauth-card {
    min-height: auto;
    padding: 28px 20px;
  }

  .auth-support-panel {
    padding: 22px 18px;
  }

  body.page-auth .auth-title,
  body.page-auth .auth-subtitle {
    text-align: left;
  }

  .auth-google-btn {
    width: 100%;
  }

  .hero-title {
    font-size: 34px;
    overflow-wrap: anywhere;
  }

  .hero-subtitle {
    font-size: 17px;
    overflow-wrap: anywhere;
  }

  .timer-display--hero {
    font-size: 48px;
  }

  .timer-display--large {
    font-size: 80px;
  }

  .timer-display--standard {
    font-size: 56px;
  }

  .section {
    padding: 40px 16px;
  }

  .section-title {
    font-size: 26px;
  }

  .section-subtitle {
    font-size: 16px;
  }

  .tool-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .tool-card {
    padding: 18px;
  }

  .tool-card-name,
  .tool-card-desc,
  .popular-card-name,
  .blog-card-title,
  .blog-card-excerpt,
  .footer-links a,
  .content-section p,
  .content-section li {
    overflow-wrap: anywhere;
  }

  .content-table,
  .data-table,
  .lap-table {
    width: 100%;
  }

  .table-scroll table,
  .data-table-wrapper table,
  [style*="overflow-x:auto"] table {
    min-width: 560px;
  }

  .use-case-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .blog-grid {
    grid-template-columns: 1fr;
  }

  .site-footer {
    padding: 32px 16px 20px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .footer-brand {
    grid-column: 1 / -1;
    padding-bottom: 4px;
    border-bottom: 1px solid #1e2d45;
  }

  .footer-tagline {
    margin-bottom: 0;
    font-size: 13px;
  }

  .footer-heading {
    margin-bottom: 10px;
  }

  .footer-links {
    gap: 6px;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 10px;
    padding-top: 16px;
  }

  .footer-bottom-links {
    justify-content: center;
    gap: 14px;
  }

  .timer-controls {
    gap: 10px;
  }

  .timer-controls .btn {
    flex: 1;
    min-width: calc(50% - 8px);
  }

  .btn,
  button,
  select,
  input,
  textarea {
    max-width: 100%;
  }

  /* Dashboard */
  .dashboard-sidebar {
    display: none;
  }

  .dashboard-content {
    padding: 20px 16px;
  }

  .dashboard-shell {
    grid-template-columns: 1fr;
    width: min(100% - 28px, 720px);
  }

  body.page-dashboard .dashboard-sidebar {
    display: block;
    position: static;
    max-height: none;
  }

  body.page-dashboard .dashboard-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-hero {
    align-items: stretch;
    flex-direction: column;
  }

  .dashboard-hero-action {
    width: 100%;
  }

  .dashboard-stats-grid,
  .dashboard-action-grid,
  .dashboard-two-column {
    grid-template-columns: 1fr;
  }

  .dashboard-action-card {
    min-height: auto;
  }

  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .achievement-grid {
    grid-template-columns: 1fr;
  }

  /* Admin */
  .admin-sidebar {
    display: none;
  }

  .admin-content {
    padding: 20px 16px;
  }

  .admin-stat-row {
    flex-direction: column;
  }

  /* Auth */
  .auth-card {
    padding: 28px 20px;
  }

  /* Flash */
  .flash-container {
    left: 16px;
    right: 16px;
  }

  .flash-message {
    max-width: 100%;
  }

  /* Trust strip */
  .trust-items {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    max-width: 280px;
    margin: 0 auto;
  }
}

/* Small mobile (≤ 480px) */
@media (max-width: 480px) {
  .site-nav .container {
    padding-left: 12px;
    padding-right: 12px;
  }

  .nav-logo-text {
    font-size: clamp(17px, 5.2vw, 20px);
  }

  .nav-login {
    font-size: 13px;
  }

  .nav-mobile {
    left: 8px;
    right: 8px;
    width: auto;
    padding: 12px;
  }

  .nav-mobile-links {
    grid-template-columns: 1fr;
  }

  .hero-title {
    font-size: 28px;
  }

  .hero-timer-widget {
    padding: 20px 16px;
  }

  .timer-display--large {
    font-size: 64px;
  }

  .timer-display--standard {
    font-size: 48px;
  }

  .timer-display--widget {
    font-size: 40px;
  }

  .tool-grid {
    grid-template-columns: 1fr;
  }

  .stat-grid {
    grid-template-columns: 1fr;
  }

  .btn-xl {
    padding: 14px 24px;
    font-size: 16px;
  }

  .auth-title {
    font-size: 24px;
  }

  .auth-card {
    padding: 24px 16px;
  }
}

/* ---------------------------------------------------------------------------
   DARK MODE - Prefers-color-scheme
   --------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --neutral-50:  #0f172a;
    --neutral-100: #1e293b;
    --neutral-200: #334155;
    --neutral-700: #cbd5e1;
    --neutral-900: #f1f5f9;
  }

  body {
    background: #0f172a;
    color: #cbd5e1;
  }

  .site-nav {
    background: #1e293b;
    box-shadow: 0 1px 0 rgba(255,255,255,.06);
  }

  .card,
  .tool-card,
  .blog-card,
  .stat-card,
  .achievement-card,
  .use-case-card,
  .lap-table,
  .hero-timer-widget,
  .auth-card,
  .data-table,
  .data-table-wrapper,
  .admin-stat-card {
    background: #1e293b;
    border-color: #334155;
  }

  .nav-links a,
  .nav-user-trigger {
    color: #cbd5e1;
  }

  .nav-links a:hover {
    color: #60a5fa;
    border-bottom-color: #60a5fa;
  }

  .nav-links a.active {
    color: #60a5fa;
    border-bottom-color: #60a5fa;
  }

  .form-input {
    background: #1e293b;
    border-color: #334155;
    color: #f1f5f9;
  }

  .lap-table th,
  .data-table th {
    background: #1e2d42;
  }

  .nav-dropdown {
    background: #1e293b;
    border-color: #334155;
  }

  .nav-dropdown a {
    color: #cbd5e1;
  }

  .nav-dropdown a:hover {
    background: #243554;
    color: #60a5fa;
  }

  .nav-dropdown-divider {
    background: #334155;
  }

  .nav-more-col:first-child { border-right-color: #334155; }
  .nav-more-heading { color: #60a5fa; }
  .nav-more-menu a, .nav-more-link { color: #cbd5e1; }
  .nav-more-menu a:hover, .nav-more-link:hover { background: #243554; color: #f97316; }
  .nav-more-footer { background: #152038; border-top-color: #334155; }
  .nav-more-footer-link { color: #94a3b8; }
  .nav-more-footer-link:hover { background: #1e2d45; color: #f97316; }
}

/* ---------------------------------------------------------------------------
   DARK MODE - Class-based toggle
   --------------------------------------------------------------------------- */
.dark body,
body.dark {
  background: #0f172a;
  color: #cbd5e1;
}

.dark .site-nav {
  background: #1e293b;
  box-shadow: 0 1px 0 rgba(255,255,255,.06);
}

.dark .card,
.dark .tool-card,
.dark .blog-card,
.dark .stat-card,
.dark .use-case-card,
.dark .hero-timer-widget {
  background: #1e293b;
  border-color: #334155;
}

.dark .form-input {
  background: #1e293b;
  border-color: #334155;
  color: #f1f5f9;
}

.dark .nav-links a {
  color: #ffffff;
}

.dark .nav-links a:hover,
.dark .nav-links a.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.dark .nav-dropdown {
  background: #1e293b;
  border-color: #334155;
}

.dark .nav-dropdown a {
  color: #cbd5e1;
}

.dark .nav-dropdown a:hover {
  background: #243554;
  color: #60a5fa;
}

.dark .nav-more-col:first-child { border-right-color: #334155; }
.dark .nav-more-heading { color: #60a5fa; }
.dark .nav-more-menu a, .dark .nav-more-link { color: #cbd5e1; }
.dark .nav-more-menu a:hover, .dark .nav-more-link:hover { background: #243554; color: #f97316; }
.dark .nav-more-footer { background: #152038; border-top-color: #334155; }
.dark .nav-more-footer-link { color: #94a3b8; }
.dark .nav-more-footer-link:hover { background: #1e2d45; color: #f97316; }

/* ---------------------------------------------------------------------------
   MISC UTILITIES
   --------------------------------------------------------------------------- */
.text-center   { text-align: center; }
.text-right    { text-align: right; }
.text-left     { text-align: left; }
.font-mono     { font-family: var(--font-display); }
.font-bold     { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium   { font-weight: 500; }

.text-primary   { color: var(--primary); }
.text-accent    { color: var(--accent); }
.text-success   { color: var(--success); }
.text-danger    { color: var(--danger); }
.text-warning   { color: var(--warning); }
.text-muted     { color: var(--neutral-500); }

.mt-0  { margin-top: 0; }
.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mb-0  { margin-bottom: 0; }
.mb-8  { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }

.hidden   { display: none !important; }
.sr-only  {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.divider {
  height: 1px;
  background: var(--neutral-200);
  margin: 24px 0;
}

/* Favorite / heart button */
.btn-favorite {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: none;
  border: 2px solid var(--neutral-200);
  border-radius: var(--radius-full);
  font-size: 14px;
  font-weight: 500;
  color: var(--neutral-600);
  cursor: pointer;
  transition: var(--transition);
}

.btn-favorite:hover {
  border-color: var(--danger);
  color: var(--danger);
  background: #fef2f2;
}

.btn-favorite.active {
  border-color: var(--danger);
  color: var(--danger);
  background: #fef2f2;
}

.btn-favorite .heart {
  font-size: 16px;
  transition: transform 0.2s ease;
}

.btn-favorite.active .heart {
  animation: bounce 0.4s ease;
}

/* Print styles */
@media print {
  .site-nav,
  .site-footer,
  .flash-container,
  .timer-controls,
  .btn-fullscreen {
    display: none !important;
  }

  .timer-display--large {
    font-size: 60px;
  }
}

/* ==========================================================================
   SHARED UI COMPONENTS
   (canonical definitions - Templates should NOT redefine these inline)
   ========================================================================== */

/* Bar charts
   Usage: {% from 'macros/charts.html' import bar_chart %}
   ------------------------------------------------------------------ */
.chart-section { margin: 2rem 0; }
.chart-section h3 { font-size: 1rem; font-weight: 600; color: #e2e8f0; margin-bottom: .75rem; }

.chart-bars    { margin: 28px 0; }
.chart-bar-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.chart-label   { width: 180px; font-size: .875rem; color: #94a3b8; flex-shrink: 0; }
.chart-track   { flex: 1; background: #2d4060; border-radius: 4px; height: 22px; overflow: hidden; min-width: 100px; }
.chart-fill    { height: 100%; background: #60a5fa; border-radius: 4px; transition: width .4s ease; }
.chart-fill--gold   { background: #f59e0b; }
.chart-fill--orange { background: #f97316; }
.chart-fill--green  { background: #16a34a; }
.chart-fill--slate  { background: #64748b; }
.chart-fill--red    { background: #dc2626; }
.chart-fill--sky    { background: #0ea5e9; }
.chart-value   { width: 45px; font-size: .875rem; color: #94a3b8; font-weight: 600; text-align: right; flex-shrink: 0; }

/* Related-tools card grid
   Usage: {% from 'macros/related_tools.html' import related_tools %}
   ------------------------------------------------------------------ */
.related-tools-section { margin: 2.5rem 0 1rem; }
.related-tools-section h2 { font-size: 1.25rem; font-weight: 700; color: #1e3a8a; margin-bottom: 1rem; }

.related-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}

.related-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #1e2d45;
  border: 1px solid #2d4060;
  border-radius: 6px;
  text-decoration: none;
  color: #cbd5e1;
  font-size: .8125rem;
  font-weight: 600;
  transition: background .15s, border-color .15s, color .15s;
}

.related-card:hover {
  background: #243554;
  border-color: #f97316;
  color: #f97316;
}

.related-card-icon { font-size: 1.5rem; line-height: 1; }
.related-card-name { line-height: 1.3; }

@media (max-width: 600px) {
  .chart-label { width: 120px; }
  .related-card-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

/* ==========================================================================
   LEGACY PROGRAMMATIC TOOL PAGES
   Keeps seasonal, sensory, race, and timer-variant pages aligned with the
   primary dark tool-page system while preserving their interactive visuals.
   ========================================================================== */

body.timer-page,
body.clock-page,
body.seasonal-page,
body.page-sensory-timer,
body.page-timer-variant {
  background: var(--surface-page);
  color: #94a3b8;
}

body.timer-page .page-content,
body.clock-page .page-content,
body.seasonal-page .page-content,
body.page-timer-variant .content-wrap,
body.page-sensory-timer .sensory-page {
  max-width: 960px;
  margin: 0 auto;
  padding: 40px 24px 72px;
}

body.page-timer-variant .page-hero,
body.page-sensory-timer .sensory-header {
  text-align: left;
  margin-bottom: 28px;
}

body.page-timer-variant .page-hero h1,
body.page-sensory-timer .sensory-header h1,
body.timer-page h1,
body.clock-page h1,
body.seasonal-page h1 {
  color: #f8fafc;
  letter-spacing: 0;
}

body.page-timer-variant .page-hero p,
body.page-sensory-timer .sensory-tagline,
body.timer-page .prose,
body.clock-page .prose,
body.seasonal-page .prose {
  color: #a8b4c7;
}

body.timer-page .section-title,
body.clock-page .section-title,
body.seasonal-page .section-title,
body.page-timer-variant .section h2,
body.page-sensory-timer .sensory-content h2,
body.page-sensory-timer .section-title {
  color: #f8fafc;
  border-left: 0;
  border-bottom: 1px solid #334155;
  padding: 0 0 10px;
  margin: 40px 0 16px;
}

body.timer-page .prose p,
body.clock-page .prose p,
body.seasonal-page .prose p,
body.page-timer-variant .section p,
body.page-sensory-timer p {
  color: #a8b4c7;
}

body.timer-page .prose a,
body.clock-page .prose a,
body.seasonal-page .prose a,
body.page-timer-variant .section a,
body.page-sensory-timer a {
  color: #60a5fa;
}

body.timer-page .chart-section,
body.clock-page .chart-section,
body.seasonal-page .chart-section,
body.page-timer-variant .chart-section,
body.page-sensory-timer .timer-shell,
body.page-sensory-timer .info-card,
body.timer-page .related-tools,
body.clock-page .related-tools,
body.seasonal-page .related-tools {
  background: #111827;
  border: 1px solid #334155;
  border-radius: 8px;
}

body.timer-page .related-link,
body.clock-page .related-link,
body.seasonal-page .related-link,
body.page-timer-variant .related-card {
  background: #172033;
  border: 1px solid #334155;
  border-radius: 8px;
  color: #cbd5e1;
}

body.timer-page .related-link:hover,
body.clock-page .related-link:hover,
body.seasonal-page .related-link:hover,
body.page-timer-variant .related-card:hover {
  border-color: #60a5fa;
  color: #fff;
}

body.page-timer-variant .timer-panel,
body.page-timer-variant .section {
  background: transparent;
}

body.page-timer-variant .timer-display {
  color: #f97316;
}

body.page-timer-variant .duration-select,
body.page-sensory-timer #timer-duration {
  background: #0f172a;
  border: 1px solid #334155;
  color: #f8fafc;
  border-radius: 8px;
  min-height: 40px;
}

@media (max-width: 700px) {
  body.timer-page .page-content,
  body.clock-page .page-content,
  body.seasonal-page .page-content,
  body.page-timer-variant .content-wrap,
  body.page-sensory-timer .sensory-page {
    padding: 28px 20px 56px;
  }
}

/* ==========================================================================
   AUDIENCE PAGES (for-meetings, for-students, for-coaches, etc.)
   ========================================================================== */

.audience-hero {
  padding: 3rem 0 2rem;
  border-bottom: 1px solid #2d4060;
  margin-bottom: 2rem;
}

.audience-tag {
  display: inline-block;
  background: #1e2d45;
  color: #60a5fa;
  border: 1px solid #2d4060;
  border-radius: 4px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 3px 10px;
  margin-bottom: 1rem;
}

.audience-title {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  color: #e2e8f0;
  margin-bottom: 1.25rem;
  line-height: 1.2;
}

.audience-intro {
  font-size: 16px;
  color: #94a3b8;
  line-height: 1.75;
  margin-bottom: 1rem;
}

.audience-hero-text .btn { margin-top: .75rem; }

.audience-tools { margin: 2rem 0; }
.audience-tools h2 {
  font-size: 1.375rem;
  font-weight: 700;
  color: #e2e8f0;
  margin-bottom: .5rem;
}
.audience-tools > p {
  color: #94a3b8;
  margin-bottom: 1.25rem;
}

/* Prose content sections */
.prose-section {
  margin: 2rem 0;
  padding: 2rem;
  background: #1e2d45;
  border: 1px solid #2d4060;
  border-radius: 8px;
}

.prose-section h2 {
  font-size: 1.375rem;
  font-weight: 700;
  color: #e2e8f0;
  margin-bottom: 1rem;
}

.prose-section h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  color: #e2e8f0;
  margin-top: 1.5rem;
  margin-bottom: .625rem;
}

.prose-section p {
  color: #94a3b8;
  line-height: 1.75;
  margin-bottom: 1rem;
}

.prose-section p:last-child { margin-bottom: 0; }

.prose-section ol {
  list-style: decimal;
  padding-left: 1.5rem;
  color: #94a3b8;
  font-size: 15px;
  line-height: 1.9;
  margin-bottom: 1rem;
}

.prose-section ul {
  list-style: disc;
  padding-left: 1.5rem;
  color: #94a3b8;
  font-size: 15px;
  line-height: 1.9;
  margin-bottom: 1rem;
}

.prose-section li { margin-bottom: .25rem; }

/* Tables inside audience pages */
.table-scroll { overflow-x: auto; margin: 20px 0; }

.prose-section table,
.audience-tools table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.prose-section table th,
.audience-tools table th {
  padding: 10px 12px;
  text-align: left;
  background: #152038;
  color: #e2e8f0;
  font-weight: 600;
  border-bottom: 2px solid #2d4060;
}

.prose-section table td,
.audience-tools table td {
  padding: 10px 12px;
  border-bottom: 1px solid #2d4060;
  color: #94a3b8;
  vertical-align: top;
}

.prose-section table tbody tr:nth-child(even) td,
.audience-tools table tbody tr:nth-child(even) td { background: #17253a; }

.prose-section table td:first-child,
.audience-tools table td:first-child { color: #cbd5e1; font-weight: 600; }

/* Small note text below charts or tables */
.table-note {
  font-size: 13px;
  color: #64748b;
  margin-top: .5rem;
}

/* Signal dots for conference timer signals table */
.signal-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 7px;
  flex-shrink: 0;
}
.signal-dot--green  { background: #16a34a; }
.signal-dot--yellow { background: #f59e0b; }
.signal-dot--red    { background: #dc2626; }

/* Workout example box */
.workout-box {
  background: #152038;
  border-radius: 8px;
  padding: 20px 24px;
  margin: 20px 0;
  border: 1px solid #2d4060;
}

.workout-box p { color: #94a3b8; margin-bottom: 12px; }
.workout-box p:last-child { margin-top: 12px; margin-bottom: 0; }

.workout-box ul,
.workout-box ol {
  list-style: disc;
  padding-left: 1.5rem;
  color: #94a3b8;
  font-size: 14px;
  line-height: 2;
}

.workout-box ol { list-style: decimal; }

@media (max-width: 640px) {
  .prose-section { padding: 1.25rem; }
  .audience-hero { padding: 2rem 0 1.5rem; }

  .tool-grid {
    grid-template-columns: 1fr;
  }

  .use-case-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   PUBLIC SUPPORT AND LEGAL PAGES
   ========================================================================== */

body.page-public {
  background: #0f1b2f;
}

body.page-public #main-content {
  padding: 0 0 4rem;
}

body.page-public .container--narrow {
  width: min(100% - 32px, 1120px);
  max-width: 1120px;
}

body.page-public .page-header {
  margin: 2rem 0 1.5rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: #17253a;
  border: 1px solid #2d4060;
  border-radius: 8px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .24);
}

body.page-public .page-title {
  max-width: 820px;
  margin: 0 0 .75rem;
  color: #f8fafc;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: 0;
}

body.page-public .page-intro {
  max-width: 850px;
  margin: 0;
  color: #b7c4d8;
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  line-height: 1.75;
}

body.page-public .page-intro a,
body.page-public .prose-section a,
body.page-public .related-tools-section a {
  color: #7cc2ff;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

body.page-public .page-intro a:hover,
body.page-public .prose-section a:hover,
body.page-public .related-tools-section a:hover {
  color: #ffffff;
}

body.page-public .prose-section {
  margin: 1.25rem 0;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: #162237;
  border: 1px solid #2b3f5f;
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .14);
}

body.page-public .prose-section h2 {
  margin: 0 0 1rem;
  color: #f8fafc;
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  line-height: 1.2;
}

body.page-public .prose-section h3 {
  margin-top: 1.75rem;
  color: #e5eefb;
  font-size: 1.05rem;
}

body.page-public .prose-section p,
body.page-public .prose-section li {
  color: #b7c4d8;
}

body.page-public .prose-section strong {
  color: #eef5ff;
}

body.page-public .principles-list {
  display: grid;
  gap: .65rem;
  padding-left: 1.2rem;
}

body.page-public .table-scroll,
body.page-public .cookie-table {
  border-radius: 8px;
}

body.page-public .prose-section table {
  overflow: hidden;
  border: 1px solid #2d4060;
  border-radius: 8px;
  background: #101b2e;
}

body.page-public .prose-section table th {
  background: #223653;
  color: #f8fafc;
  border-bottom: 1px solid #395273;
}

body.page-public .prose-section table td {
  color: #c1ccdc;
  border-bottom: 1px solid #2d4060;
}

body.page-public .prose-section table tbody tr:nth-child(even) td {
  background: #132136;
}

body.page-public .info-card {
  min-height: 100%;
  padding: 1rem;
  background: #101b2e;
  border: 1px solid #2d4060;
  border-radius: 8px;
}

body.page-public .info-card-title {
  color: #f8fafc;
  font-weight: 800;
  margin-bottom: .35rem;
}

body.page-public .info-card-body {
  color: #aebbd0;
  line-height: 1.55;
}

body.page-public .faq-list {
  display: grid;
  gap: .75rem;
}

body.page-public .faq-item {
  background: #101b2e;
  border: 1px solid #2d4060;
  border-radius: 8px;
  overflow: hidden;
}

body.page-public .faq-question {
  cursor: pointer;
  padding: 1rem 1.15rem;
  color: #f8fafc;
  font-weight: 800;
  list-style: none;
}

body.page-public .faq-question::-webkit-details-marker {
  display: none;
}

body.page-public .faq-question::after {
  content: '+';
  float: right;
  color: #7cc2ff;
  font-size: 1.25rem;
  line-height: 1;
}

body.page-public .faq-item[open] .faq-question::after {
  content: '-';
}

body.page-public .faq-answer {
  padding: 0 1.15rem 1.1rem;
}

body.page-public .related-tools-section {
  margin: 1.5rem 0 0;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: #162237;
  border: 1px solid #2b3f5f;
  border-radius: 8px;
}

body.page-public .related-tools-section h2 {
  color: #f8fafc;
  font-size: 1.35rem;
  margin-bottom: 1rem;
}

body.page-public .related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .75rem;
}

body.page-public .related-card {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-height: 54px;
  padding: .8rem .9rem;
  background: #101b2e;
  border: 1px solid #2d4060;
  border-radius: 8px;
  color: #dbeafe;
  text-decoration: none;
}

body.page-public .related-card:hover {
  background: #1c2c45;
  border-color: #4a6790;
}

body.page-public .related-svg {
  display: inline-flex;
  color: #7cc2ff;
}

body.page-contact .container--narrow {
  width: min(100% - 32px, 1040px);
  max-width: 1040px;
}

body.page-contact .contact-header {
  margin-bottom: 1.25rem;
}

body.page-contact .contact-layout--compact {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, .8fr);
  gap: 1.25rem;
  align-items: start;
}

body.page-contact .contact-form-col,
body.page-contact .contact-info-card {
  padding: clamp(1.25rem, 3vw, 2rem);
  background: #162237;
  border: 1px solid #2b3f5f;
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .14);
}

body.page-contact .contact-form-col h2,
body.page-contact .contact-info-card h2 {
  margin: 0 0 1rem;
  color: #f8fafc;
  font-size: 1.35rem;
  line-height: 1.2;
}

body.page-contact .contact-info-col {
  display: grid;
  gap: 1rem;
}

body.page-contact .contact-info-card p {
  margin: 0;
  color: #b7c4d8;
  line-height: 1.65;
}

body.page-contact .contact-route-list {
  display: grid;
  gap: .6rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

body.page-contact .contact-route-list a,
body.page-contact .contact-info-card a {
  color: #7cc2ff;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

body.page-contact .contact-route-list a:hover,
body.page-contact .contact-info-card a:hover {
  color: #ffffff;
}

body.page-contact .auth-form {
  display: grid;
  gap: 1rem;
}

body.page-contact .form-group {
  margin: 0;
}

body.page-contact .form-input {
  min-height: 46px;
  background: #101b2e;
  border-color: #395273;
  color: #f8fafc;
}

body.page-contact textarea.form-input {
  min-height: 160px;
}

body.page-contact .contact-form-note {
  margin: .75rem 0 0;
  text-align: center;
}

@media (max-width: 820px) {
  body.page-contact .contact-layout--compact {
    grid-template-columns: 1fr;
  }
}

body.page-public kbd,
body.page-public code {
  color: #f8fafc;
  background: #0c1424;
  border: 1px solid #2d4060;
  border-radius: 6px;
  padding: .12rem .35rem;
}

@media (max-width: 520px) {
  body.page-public .container--narrow {
    width: min(100% - 24px, 1120px);
  }
}

/* ==========================================================================
   HOME PAGE REFINEMENT
   ========================================================================== */

body.page-home .hero-timer-widget {
  max-width: 420px;
  padding: 22px;
  border-radius: 10px;
  background: #111b2f;
  border: 1px solid #334155;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .28);
  text-align: center;
}

body.page-home .hero-widget-tabs {
  gap: 4px;
  padding: 4px;
  margin-bottom: 20px;
  background: #0b1220;
  border: 1px solid #26364f;
  border-radius: 8px;
}

body.page-home .hero-widget-tab {
  min-height: 36px;
  border-radius: 6px;
  color: #94a3b8;
  font-size: 13px;
}

body.page-home .hero-widget-tab.active {
  background: #2563eb;
  color: #ffffff;
  box-shadow: none;
}

body.page-home .hero-timer-display {
  margin: 10px 0 16px;
  color: #f8fafc;
  font-size: clamp(38px, 5vw, 50px);
  letter-spacing: 0;
}

body.page-home .hero-countdown-inputs {
  gap: 8px;
  margin: 12px 0 14px;
  align-items: center;
}

body.page-home .hero-time-input-group {
  gap: 6px;
}

body.page-home .hero-time-input-group label {
  color: #94a3b8;
  letter-spacing: 0;
}

body.page-home .hero-time-input {
  width: 64px;
  height: 54px;
  padding: 0 6px;
  border: 1px solid #3b4d69;
  border-radius: 8px;
  background: #0f172a;
  color: #60a5fa;
  font-size: 26px;
  letter-spacing: 0;
}

body.page-home .hero-time-input::-webkit-outer-spin-button,
body.page-home .hero-time-input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

body.page-home .hero-time-input {
  appearance: textfield;
  -moz-appearance: textfield;
}

body.page-home .hero-time-input:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, .18);
}

body.page-home .hero-time-sep {
  padding-bottom: 22px;
  color: #64748b;
  font-size: 22px;
}

body.page-home .hero-countdown-presets {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0 8px;
}

body.page-home .preset-btn {
  min-height: 34px;
  padding: 0 10px;
  border-color: #334155;
  border-radius: 6px;
  background: #152038;
  color: #cbd5e1;
}

body.page-home .hero-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

body.page-home .hero-controls .btn,
body.page-home .hero-controls .hero-fullscreen-btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  width: 100%;
  justify-content: center;
  gap: 8px;
  border-radius: 7px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

body.page-home .hero-controls .hero-fullscreen-btn {
  background: #1e2d45;
  border-color: #334155;
  color: #e2e8f0;
  text-decoration: none;
}

body.page-home .hero-controls .hero-fullscreen-btn:hover {
  background: #263956;
  border-color: #60a5fa;
  color: #ffffff;
}

body.page-home .hero-controls .hero-fullscreen-btn svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: block;
}

body.page-home .tool-grid-section .container,
body.page-home .popular-tools-section .container,
body.page-home .use-cases-container {
  max-width: 1180px;
}

body.page-home .tool-grid-section .section-title,
body.page-home .popular-tools-section .section-title,
body.page-home .use-cases-header .section-title {
  text-align: left;
}

body.page-home .tool-grid-section .section-subtitle,
body.page-home .use-cases-header .section-subtitle {
  max-width: 620px;
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}

body.page-home .tool-grid--large {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

body.page-home .tool-card--large {
  min-height: 150px;
  padding: 20px;
  border-radius: 8px;
  justify-content: flex-start;
  gap: 16px;
}

body.page-home .tool-card-heading {
  display: flex;
  align-items: center;
  gap: 14px;
}

body.page-home .tool-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 8px;
}

body.page-home .tool-card-icon svg {
  width: 30px;
  height: 30px;
}

body.page-home .tool-card-name {
  font-size: 16px;
  margin: 0;
}

body.page-home .tool-card-desc {
  font-size: 13px;
  margin: 0;
  max-width: 26ch;
  flex: 0;
}

body.page-home .tool-card--large::after {
  content: "Open tool";
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 28px;
  margin-top: auto;
  padding: 0 10px;
  border: 1px solid #334155;
  border-radius: 5px;
  background: #152038;
  color: #93c5fd;
  font-size: 12px;
  font-weight: 700;
}

body.page-home .tool-card--large:hover::after {
  border-color: #60a5fa;
  color: #bfdbfe;
}

body.page-home .popular-scroll {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  overflow: visible;
  padding-bottom: 0;
  scroll-snap-type: none;
}

body.page-home .popular-card {
  min-width: 0;
  min-height: 112px;
  padding: 16px;
  border-top: 3px solid var(--primary-light);
  border-radius: 8px;
  scroll-snap-align: none;
  white-space: normal;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}

body.page-home .popular-card:hover {
  transform: translateY(-2px);
  border-color: #60a5fa;
  background: #1f2d46;
  box-shadow: none;
}

body.page-home .popular-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 8px;
}

body.page-home .popular-card-name {
  color: #e2e8f0;
  font-size: 14px;
  line-height: 1.25;
  text-align: center;
}

body.page-metronome .timer-card {
  display: grid;
  gap: 24px;
  justify-items: center;
}

body.page-metronome .metronome-visual {
  display: grid;
  gap: 16px;
  justify-items: center;
  width: min(100%, 420px);
}

body.page-metronome .metronome-pendulum-container {
  position: relative;
  width: min(100%, 280px);
  height: 170px;
  border-bottom: 2px solid #3b5375;
}

body.page-metronome .metronome-pendulum-container::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #60a5fa;
  transform: translateX(-50%);
}

body.page-metronome .metronome-pendulum {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 8px;
  height: 150px;
  border-radius: 999px;
  background: linear-gradient(180deg, #f97316, #60a5fa);
  transform: translateX(-50%) rotate(0deg);
  transform-origin: center bottom;
  transition: transform 90ms ease-out, filter 90ms ease-out;
}

body.page-metronome .metronome-pendulum::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 20px;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid #496385;
  background: #243754;
  transform: translateX(-50%);
}

body.page-metronome .metronome-pendulum.is-left {
  transform: translateX(-50%) rotate(-24deg);
}

body.page-metronome .metronome-pendulum.is-right {
  transform: translateX(-50%) rotate(24deg);
}

body.page-metronome .metronome-pendulum.is-accent {
  filter: drop-shadow(0 0 14px rgba(249, 115, 22, 0.45));
}

body.page-metronome .metronome-beat-dots {
  display: flex;
  gap: 10px;
  min-height: 14px;
}

body.page-metronome .metronome-beat-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #3b5375;
  transition: background 90ms ease, transform 90ms ease;
}

body.page-metronome .metronome-beat-dot.is-active {
  background: #60a5fa;
  transform: scale(1.25);
}

body.page-metronome .metronome-beat-dot.is-accent.is-active {
  background: #f97316;
}

body.page-metronome .metronome-bpm-display {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  color: #f8fafc;
}

body.page-metronome .metronome-bpm-value {
  color: #f97316;
  font-size: clamp(64px, 11vw, 132px);
  font-weight: 800;
  line-height: 0.9;
}

body.page-metronome .metronome-bpm-label {
  color: #94a3b8;
  font-size: clamp(18px, 3vw, 28px);
  font-weight: 800;
  letter-spacing: 0.08em;
}

body.page-metronome .metronome-bpm-slider-row,
body.page-metronome .metronome-settings,
body.page-metronome .metronome-tempo-names,
body.page-metronome .timer-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
}

body.page-metronome .metronome-bpm-slider-row {
  color: #94a3b8;
  font-weight: 700;
}

body.page-metronome .metronome-slider {
  accent-color: #f97316;
  max-width: 560px;
  min-width: min(100%, 260px);
}

body.page-metronome .tempo-badge {
  border: 1px solid #3b5375;
  border-radius: 7px;
  color: #dbeafe;
  cursor: pointer;
  font-weight: 800;
  padding: 10px 14px;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

body.page-metronome .tempo-badge:hover,
body.page-metronome .tempo-badge:focus-visible,
body.page-metronome .tempo-badge.is-active {
  background: #f97316;
  border-color: #f97316;
  color: #ffffff;
  outline: none;
}

body.page-metronome #metro-tap-btn.is-tapped {
  border-color: #60a5fa;
  color: #60a5fa;
}

body.page-bomb-timer .timer-card,
body.page-visual-timer .timer-card,
body.page-sand-timer .timer-card {
  display: grid;
  gap: 22px;
  justify-items: center;
}

body.page-bomb-timer .bomb-visual {
  display: grid;
  gap: 14px;
  justify-items: center;
  width: min(100%, 420px);
}

body.page-bomb-timer .bomb-icon {
  position: relative;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #475569, #111827 68%);
  border: 1px solid #475569;
  box-shadow: inset -14px -18px 30px rgba(0, 0, 0, .35), 0 18px 40px rgba(0, 0, 0, .28);
}

body.page-bomb-timer .bomb-icon::before {
  content: "";
  position: absolute;
  top: -18px;
  right: 20px;
  width: 52px;
  height: 36px;
  border-top: 5px solid #f97316;
  border-right: 5px solid #f97316;
  border-radius: 0 18px 0 0;
}

body.page-bomb-timer .bomb-fuse-container {
  width: min(100%, 340px);
  height: 12px;
  overflow: hidden;
  border: 1px solid #3b5375;
  border-radius: 999px;
  background: #111827;
}

body.page-bomb-timer .bomb-fuse {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #22c55e, #facc15, #f97316);
  transition: width .18s linear;
}

body.page-bomb-timer .timer-display--bomb.is-danger .timer-digits {
  color: #f87171;
}

body.page-bomb-timer .timer-card.is-complete {
  border-color: rgba(248, 113, 113, .75);
}

body.page-visual-timer .visual-timer-display {
  display: grid;
  gap: 18px;
  justify-items: center;
  width: 100%;
}

body.page-visual-timer .visual-timer-block-wrapper {
  width: min(100%, 720px);
  height: clamp(120px, 18vw, 220px);
  overflow: hidden;
  border: 1px solid #3b5375;
  border-radius: 8px;
  background: #101827;
}

body.page-visual-timer .visual-timer-block {
  height: 100%;
  transition: width .2s linear, background .15s ease;
}

body.page-visual-timer .visual-timer-text {
  color: #f8fafc;
  font-size: clamp(54px, 9vw, 112px);
  font-weight: 800;
  line-height: 1;
}

body.page-visual-timer .visual-timer-color-options {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

body.page-sand-timer .sand-timer-wrapper {
  display: grid;
  justify-items: center;
}

body.page-sand-timer .sand-timer-canvas {
  width: 200px;
  height: 300px;
  max-width: 100%;
}

.tool-directory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.tool-directory-group {
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.32);
  padding: 1rem;
}

.tool-directory-group h3 {
  color: var(--color-text, #f8fafc);
  font-size: 1rem;
  line-height: 1.25;
  margin: 0 0 0.75rem;
}

.tool-directory-group ul {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
}

.tool-directory-group li {
  list-style: none;
}

.tool-directory-group a {
  color: var(--color-primary-light, #60a5fa);
  display: inline-flex;
  font-size: 0.95rem;
  line-height: 1.35;
  text-decoration: none;
}

.tool-directory-group a:hover {
  color: var(--color-text, #f8fafc);
  text-decoration: underline;
}

body.page-home .use-case-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

body.page-home .use-case-card {
  min-height: 214px;
  padding: 18px;
  border-top-width: 1px;
  border-radius: 8px;
  gap: 12px;
}

body.page-home .use-case-card:hover {
  border-color: #60a5fa;
  box-shadow: none;
}

body.page-home .use-case-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
}

body.page-home .use-case-icon svg {
  width: 24px;
  height: 24px;
}

body.page-home .use-case-title {
  font-size: 15px;
}

body.page-home .use-case-desc {
  color: #a8b3c5;
  font-size: 13px;
  line-height: 1.5;
}

body.page-home .use-case-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 30px;
  margin-top: 4px;
  padding: 0 10px;
  border: 1px solid #334155;
  border-radius: 5px;
  background: #152038;
  color: #93c5fd;
  font-size: 12px;
  line-height: 1;
}

body.page-home .use-case-card:hover .use-case-link {
  border-color: #f97316;
  color: #f97316;
}

@media (max-width: 1100px) {
  body.page-home .tool-grid--large,
  body.page-home .use-case-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.page-home .popular-scroll {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  body.page-home .hero-timer-widget {
    padding: 18px;
  }

  body.page-home .hero-countdown-presets,
  body.page-home .hero-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.page-home .hero-controls .hero-fullscreen-btn {
    grid-column: 1 / -1;
  }

  body.page-home .tool-grid--large,
  body.page-home .popular-scroll,
  body.page-home .use-case-grid {
    grid-template-columns: 1fr;
  }

  body.page-home .tool-grid-section .section-title,
  body.page-home .popular-tools-section .section-title,
  body.page-home .use-cases-header .section-title,
  body.page-home .tool-grid-section .section-subtitle,
  body.page-home .use-cases-header .section-subtitle {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ==========================================================================
   GLOBAL BREADCRUMBS AND TOOL CONSISTENCY
   ========================================================================== */

.site-breadcrumb {
  background: #0b1220;
  border-bottom: 1px solid rgba(45, 64, 96, .72);
}

.site-breadcrumb .container {
  max-width: 1180px;
}

.site-breadcrumb-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 42px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
}

.site-breadcrumb-list li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.site-breadcrumb-list li + li::before {
  content: "/";
  color: #475569;
  font-weight: 700;
}

.site-breadcrumb-list a {
  color: #60a5fa;
  text-decoration: none;
}

.site-breadcrumb-list a:hover {
  color: #93c5fd;
}

.site-breadcrumb-list span {
  color: #94a3b8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tool-header .tool-breadcrumb,
.sensory-breadcrumb {
  display: none;
}

body.timer-page,
body.clock-page,
body.seasonal-page,
body.page-timer-variant,
body.page-sensory-timer {
  max-width: none;
  margin: 0;
}

body.page-tool .tool-page-layout,
body.page-hub .tool-page-layout,
body.page-timer-link-generator .tool-page-layout,
body.timer-page .page-content,
body.clock-page .page-content,
body.seasonal-page .page-content,
body.page-timer-variant .content-wrap,
body.page-sensory-timer .sensory-page,
body.page-challenge .magnet-page,
body.page-how-old-am-i .magnet-page,
body.page-reaction-test .magnet-page,
body.page-event-countdown .magnet-page,
body.page-event-countdown-create .magnet-page,
body.page-shareable-timer .magnet-page,
body.page-time-difference .magnet-page,
body.page-time-difference-form .magnet-page {
  width: min(100% - 40px, 1180px);
  margin-inline: auto;
}

body.page-tool .tool-header,
body.page-hub .tool-header,
body.page-timer-link-generator .tool-header,
body.page-time-difference .tool-header,
body.page-time-difference-form .tool-header {
  padding: 34px 0 22px;
  margin: 0;
}

body.page-tool .tool-title,
body.page-hub .tool-title,
body.page-timer-link-generator .tool-title,
body.page-time-difference .tool-title,
body.page-time-difference-form .tool-title {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.08;
  letter-spacing: 0;
  color: #f8fafc;
}

body.page-tool .tool-intro,
body.page-hub .tool-intro,
body.page-timer-link-generator .tool-intro,
body.page-time-difference .tool-intro,
body.page-time-difference-form .tool-intro {
  max-width: 760px;
  color: #a8b3c5;
  font-size: 17px;
  line-height: 1.65;
}

body.page-tool .timer-card,
body.page-tool .tool-card,
body.page-tool .content-section,
body.page-tool .info-section,
body.page-hub .hub-card,
body.page-hub .content-section,
body.page-chance-game .chance-tool,
body.page-chance-game .game-panel,
body.page-time-difference .card,
body.page-time-difference-form .card,
body.page-timer-link-generator .card,
body.page-reaction-test .card,
body.page-how-old-am-i .card,
body.page-shareable-timer .card {
  border-radius: 8px;
  border-color: #2d4060;
  background-color: #1e2d45;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .2);
}

body.page-tool .timer-card,
body.page-tool .content-section,
body.page-tool .info-section {
  padding: clamp(20px, 3vw, 32px);
}

body.page-tool .btn,
body.page-hub .btn,
body.timer-page .btn,
body.clock-page .btn,
body.seasonal-page .btn,
body.page-timer-variant .btn,
body.page-sensory-timer button,
body.page-time-difference .btn,
body.page-time-difference-form .btn,
body.page-timer-link-generator .btn,
body.page-chance-game .btn {
  border-radius: 7px;
  font-weight: 700;
  letter-spacing: 0;
}

body.page-tool input,
body.page-tool select,
body.page-tool textarea,
body.page-hub input,
body.page-hub select,
body.timer-page input,
body.timer-page select,
body.clock-page input,
body.clock-page select,
body.seasonal-page input,
body.seasonal-page select,
body.page-timer-variant input,
body.page-timer-variant select,
body.page-sensory-timer input,
body.page-sensory-timer select,
body.page-time-difference input,
body.page-time-difference select,
body.page-time-difference-form input,
body.page-time-difference-form select,
body.page-timer-link-generator input,
body.page-timer-link-generator select,
body.page-timer-link-generator textarea,
body.page-chance-game input,
body.page-chance-game select {
  border-radius: 7px;
}

body.page-tool .timer-controls,
body.timer-page .timer-controls,
body.page-timer-variant .timer-controls,
body.page-chance-game .chance-actions {
  gap: 10px;
}

@media (max-width: 700px) {
  .site-breadcrumb-list {
    min-height: 38px;
    font-size: 12px;
  }

  body.page-tool .tool-page-layout,
  body.page-hub .tool-page-layout,
  body.page-timer-link-generator .tool-page-layout,
  body.timer-page .page-content,
  body.clock-page .page-content,
  body.seasonal-page .page-content,
  body.page-timer-variant .content-wrap,
  body.page-sensory-timer .sensory-page,
  body.page-challenge .magnet-page,
  body.page-how-old-am-i .magnet-page,
  body.page-reaction-test .magnet-page,
  body.page-event-countdown .magnet-page,
  body.page-event-countdown-create .magnet-page,
  body.page-shareable-timer .magnet-page,
  body.page-time-difference .magnet-page,
  body.page-time-difference-form .magnet-page {
    width: min(100% - 28px, 1180px);
  }
}