:root{
  --navy: #001F3F;
  --red: #FF0000;
  --red-dark: #B50000;
  --bg:#0c0d12;
  --panel:#11131a;
  --card:#10131a;
  --text:#e9edf3;
  --muted:#8e97ab;
  --border:#1c2230;
  --accent: var(--red);
  --accent-2: var(--red-dark);
  --danger:#ff5a52;
  --warning-color:#ff9800;
  --warning-text: #1f2937;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --ring: 0 0 0 3px rgba(255, 0, 0, .35);
  --grid: rgba(255,255,255,.08);
  --to-top-bg: #1a1b20;
  --to-top-fg: #f5f5f5;
  --to-top-border: #333;
}

@media (prefers-color-scheme: light){
  :root{
    /* Light theme */
    --bg:#ffffff;
    --panel:#f8fafd;
    --card:#ffffff;
    --text: var(--navy);
    --muted:#5b6678;
    --border:#e7ebf3;
    --accent: var(--red);
    --accent-2: var(--red-dark);
    --danger:#b42318;
    --shadow: 0 10px 24px rgba(10,31,68,.08);
    --ring: 0 0 0 3px rgba(255, 0, 0, .25);
    --grid: rgba(0,31,63,.10); /* navy-tinted grid on light */

    /* To-Top (light) */
    --to-top-bg: #fff;
    --to-top-fg: #111;
    --to-top-border: #ccc;
  }
}

/* Manual theme override classes */
.theme-light{
  /* Light theme (manual override) */
  --bg:#ffffff;
  --panel:#f8fafd;
  --card:#ffffff;
  --text: var(--navy);
  --muted:#5b6678;
  --border:#e7ebf3;
  --accent: var(--red);
  --accent-2: var(--red-dark);
  --danger:#b42318;
  --shadow: 0 10px 24px rgba(10,31,68,.08);
  --ring: 0 0 0 3px rgba(255, 0, 0, .25);
  --grid: rgba(0,31,63,.10); /* navy-tinted grid on light */

  /* To-Top (light) */
  --to-top-bg: #fff;
  --to-top-fg: #111;
  --to-top-border: #ccc;
}

.theme-dark{
  /* Dark theme (manual override) */
  --bg:#0c0d12;
  --panel:#11131a;
  --card:#10131a;
  --text:#e9edf3;
  --muted:#8e97ab;
  --border:#1c2230;
  --accent: var(--red);
  --accent-2: var(--red-dark);
  --danger:#ff5a52;
  --warning-color:#ff9800;
  --warning-text: #1f2937;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --ring: 0 0 0 3px rgba(255, 0, 0, .35);
  --grid: rgba(255,255,255,.08); /* bias chart grid on dark */

  /* To-Top defaults (dark) */
  --to-top-bg: #1a1b20;
  --to-top-fg: #f5f5f5;
  --to-top-border: #333;
}

/* Ensure gradient background is always applied */
.theme-light{
  background:
    radial-gradient(1100px 760px at 8% -18%, color-mix(in oklab, var(--navy) 8%, transparent), transparent 60%),
    radial-gradient(900px 640px at 112% 6%, color-mix(in oklab, var(--navy) 6%, transparent), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0) 30%),
    var(--bg);
}

/* Additional accessibility improvements for better contrast */
.score-value {
  font-weight: 700; /* Bolder text for better readability */
}

/* Ensure all score values have sufficient contrast */
.recent-item .score-value {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* Subtle shadow for better contrast */
}

/* Improve contrast for muted text in both modes */
.muted {
  color: var(--muted);
}

@media (prefers-color-scheme: light) {
  .muted {
    color: #4b5563 !important; /* Darker gray for better contrast */
  }
}

@media (prefers-color-scheme: dark) {
  .muted {
    color: #a0a9c0 !important; /* Lighter gray for better contrast on dark */
  }
}
  
  .recent-item-meta {
    color: #4b5563 !important; /* Darker gray for better contrast */
  }

.theme-dark{
  background:
    radial-gradient(1100px 760px at 8% -18%, color-mix(in oklab, var(--navy) 14%, transparent), transparent 60%),
    radial-gradient(900px 640px at 112% 6%, color-mix(in oklab, var(--navy) 10%, transparent), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0) 30%),
    var(--bg);
}

*{ box-sizing:border-box }
html:focus-within{ scroll-behavior:smooth }

body{
  margin:0;
  font:16px/1.6 "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans";
  color:var(--text);
  /* Softer NAVY-tinted background glow to match logo */
  background:
    radial-gradient(1100px 760px at 8% -18%, color-mix(in oklab, var(--navy) 14%, transparent), transparent 60%),
    radial-gradient(900px 640px at 112% 6%, color-mix(in oklab, var(--navy) 10%, transparent), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0) 30%),
    var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.wrap{ max-width:920px; margin:0 auto; padding:28px 20px 96px }

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

.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden
}
.skip-link:focus{
  left:16px; top:16px; width:auto; height:auto; padding:8px 12px;
  background:var(--panel); border:1px solid var(--border); border-radius:8px; z-index:1000
}

/* =================== Header & Navigation =================== */
header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:22px;
}

/* Desktop header layout - ensure it's not affected by mobile grid */
@media (min-width: 769px) {
  header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
  }
}
.site-nav{
  display:flex;
  gap:16px;
  align-items:center;
}

/* Hide nav-actions container on desktop */
.nav-actions{
  display:none;
}

/* Hide mobile nav header on desktop */
.mobile-nav-header{
  display:none;
}

/* Desktop: show theme toggle and support button inline */
.site-nav .theme-toggle,
.site-nav .btn-support{
  display:inline-flex;
}

/* Ensure buttons are visible on desktop */
@media (min-width: 769px) {
  .site-nav .theme-toggle,
  .site-nav .btn-support{
    display:inline-flex !important;
  }
  
  /* Ensure desktop nav works properly (not radial menu) */
  .site-nav.radial-menu{
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    transition: none !important;
    z-index: auto !important;
    gap: 16px !important;
  }
  
  /* Hide radial menu specific elements on desktop */
  .radial-center-logo{
    display: none !important;
  }
  
  /* Show radial items as icon-only nav links on desktop */
  .radial-item.nav-link{
    position: static !important;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    border: none !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    text-decoration: none !important;
    color: var(--text) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
    opacity: 1 !important;
    transform: none !important;
    padding: 8px !important;
    white-space: nowrap !important;
    min-width: 44px !important;
    position: relative !important;
  }
  
  .radial-item.nav-link:hover{
    background: var(--hover) !important;
    color: var(--accent) !important;
    border-color: transparent !important;
    transform: none !important;
    box-shadow: none !important;
  }
  
  .radial-item.nav-link .icon{
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
  }
  
  .radial-item.nav-link .label{
    display: none !important;
  }
  
  /* Active state for current page */
  .radial-item.nav-link.active{
    background: var(--accent) !important;
    color: white !important;
  }
  
  .radial-item.nav-link.active .icon{
    color: white !important;
  }
  
  /* Special styling for support button on desktop */
  .radial-item.support-item{
    background: linear-gradient(135deg, #ffdd00, #ffc107) !important;
    color: #1a1a1a !important;
    box-shadow: 0 2px 8px rgba(255,193,7,.3) !important;
    font-weight: 600 !important;
    flex-direction: row !important;
    gap: 6px !important;
    padding: 8px 12px !important;
    min-width: auto !important;
    white-space: nowrap !important;
    text-decoration: none !important;
  }
  
  .radial-item.support-item:hover{
    background: linear-gradient(135deg, #ffc107, #ffb300) !important;
    box-shadow: 0 3px 12px rgba(255,193,7,.4) !important;
    transform: translateY(-1px) !important;
  }
  
  .radial-item.support-item .label{
    display: inline !important;
    font-size: 13px !important;
    font-weight: 600 !important;
  }
  
  .radial-item.support-item .icon{
    width: 16px !important;
    height: 16px !important;
  }
  
  /* Tooltips for desktop navigation */
  .radial-item.nav-link[data-tooltip]::after {
    content: attr(data-tooltip) !important;
    position: absolute !important;
    bottom: calc(100% + 8px) !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(4px) !important;
    background: rgba(0,0,0,.8) !important;
    color: white !important;
    padding: 6px 10px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: all 0.2s ease !important;
    z-index: 1000 !important;
  }
  
  .radial-item.nav-link[data-tooltip]:hover::after {
    opacity: 1 !important;
    transform: translateX(-50%) translateY(0) !important;
  }
  
  @media (prefers-color-scheme: light) {
    .radial-item.nav-link[data-tooltip]::after {
      background: rgba(20,20,25,.9) !important;
    }
  }
}

/* Navigation links with icons */
.nav-link{
  font-weight:500;
  text-decoration:none;
  color:var(--text);
  font-size:14px;
  transition:all .2s ease;
  padding:8px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--panel);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  width:36px;
  height:36px;
  position:relative;
}
.nav-link:hover{ 
  color:var(--accent);
  background: color-mix(in oklab, var(--panel) 88%, var(--accent) 12%);
  border-color:var(--accent);
  transform:translateY(-1px);
}
.nav-link.active{
  color:var(--accent);
  background: color-mix(in oklab, var(--panel) 92%, var(--accent) 8%);
  border-color:var(--accent);
  transform:translateY(-1px);
}
.nav-link .icon{
  width:18px;
  height:18px;
  flex-shrink:0;
}
.nav-link .sr-only{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* Theme toggle button */
.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border:1px solid var(--border); background:var(--panel);
  border-radius:8px; cursor:pointer; transition:all .2s ease;
  position:relative; overflow:hidden; flex-shrink:0;
}
.theme-toggle:hover,
.theme-toggle:focus-visible{
  background: color-mix(in oklab, var(--panel) 88%, var(--accent) 12%);
  border-color:var(--accent);
  transform:translateY(-1px);
}
.theme-toggle:focus-visible{ outline:none; box-shadow:var(--ring); }
.theme-toggle .icon{ width:18px; height:18px; transition:all .3s ease; }
.theme-toggle:hover .icon{ transform:rotate(180deg); }
.theme-toggle .theme-icon-sun{ color:#fbbf24; }
.theme-toggle .theme-icon-moon{ color:#6366f1; }

/* Header Support button (Buy Me a Coffee) */
.site-nav a.btn-support{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:6px 10px; border-radius:8px; font-weight:600; text-decoration:none;
  background: linear-gradient(135deg, #ffdd00, #ffc107);
  color:#1a1a1a; box-shadow:0 2px 8px rgba(255,193,7,.3);
  font-size:13px; flex-shrink:0; white-space:nowrap;
}
.site-nav a.btn-support:hover,
.site-nav a.btn-support:focus-visible{
  box-shadow:0 3px 12px rgba(255,193,7,.4);
  transform:translateY(-1px);
}
.site-nav a.btn-support .icon{ width:16px; height:16px }

.logo-img{
  width: clamp(48px, 5vw, 64px);
  height: clamp(48px, 5vw, 64px);
  border-radius:12px;
  box-shadow:var(--shadow);
  display:block;
}
@media (prefers-color-scheme: light){
  .logo-img { color: #001F3F; }
}

/* ====== Intro ====== */
.intro{
  margin: 24px 0 32px;
  text-align: center;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.intro h2{ font-size: 22px; margin-bottom: 12px; }
.intro p{ font-size: 16px; margin: 6px 0; line-height: 1.6; }
.intro .muted{ display:block; margin-top:10px; }

/* Statistics display */
.stats-container{
  margin: 20px 0;
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex;
  gap: 24px;
  justify-content: center;
  flex-wrap: wrap;
}
.stats-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 120px;
}
.stats-number{
  font-size: 28px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}
.stats-label{
  font-size: 14px;
  color: var(--muted);
  font-weight: 500;
  text-align: center;
}

h1{ font-size:26px; margin:0; letter-spacing:.2px }
.sub{ color:var(--muted); margin-top:-4px }

/* ====== Cards, Forms ====== */
.card{ background:var(--card); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow) }
.card > .bd{ padding:20px }

.row{ 
  display:grid; 
  gap:12px; 
  grid-template-columns:1fr 1fr;
  margin-bottom: 16px;
}
@media (max-width:768px){ 
  .row{ 
    grid-template-columns:1fr 1fr;
    gap: 10px;
    margin-bottom: 20px;
  } 
}
@media (max-width:520px){ 
  .row{ 
    grid-template-columns:1fr;
    gap: 8px;
    margin-bottom: 16px;
  } 
  
  .form-row {
    flex-direction: column;
    gap: 8px;
  }
  
  .form-row .btn {
    min-width: auto;
    width: 100%;
  }
}

/* Site Averages Styles */
.site-averages-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.site-avg-stat {
  background: var(--card-bg, rgba(255,255,255,0.02));
  border: 1px solid var(--border, #222);
  border-radius: 12px;
  padding: 16px;
  min-width: 0;
  flex: 1;
  text-align: center;
}

.site-avg-reliability {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(5, 150, 105, 0.05));
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.site-avg-bias {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(185, 28, 28, 0.05));
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.site-avg-label {
  margin-bottom: 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  color: var(--muted, #8e97ab);
}

.site-avg-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--text, #e9edf3);
}

/* Mobile responsive styles for site averages */
@media (max-width: 768px) {
  .site-averages-row {
    gap: 10px;
  }
  
  .site-avg-stat {
    padding: 14px;
  }
  
  .site-avg-value {
    font-size: 20px;
  }
}

@media (max-width: 520px) {
  .site-averages-row {
    flex-direction: column;
    gap: 8px;
  }
  
  .site-avg-stat {
    padding: 12px;
    min-width: 100%;
  }
  
  .site-avg-value {
    font-size: 18px;
  }
  
  .site-avg-label {
    font-size: 10px;
  }
  
  /* Ensure site averages section is visible on very small screens */
  #site-averages-card {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* Form layout */
.form-group {
  margin-bottom: 16px;
}

.form-row {
  display: flex;
  gap: 12px;
  align-items: end;
}

.form-row .form-group {
  flex: 1;
  margin-bottom: 0;
}

.form-row .btn {
  flex-shrink: 0;
  min-width: 120px;
}

/* Only hide the label in the URL input row */
.row > .label { position: absolute; left: -9999px; }

/* Ensure diagnostics labels render normally */
.diag-item .label { position: static; left: auto; }

.input{
  width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--border);
  background:var(--panel); color:var(--text); font-size:16px; outline:none; transition:all .2s ease;
}
.btn{
  width:auto; padding:12px 14px; border-radius:10px; border:1px solid var(--border);
  background:var(--panel); color:var(--text); font-size:16px; outline:none; transition:all .2s ease;
}
.input:focus{ border-color:var(--accent); box-shadow:var(--ring) }

/* Select dropdown styling */
select.input {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 16px;
  padding-right: 40px;
  appearance: none;
}

/* Button aesthetics aligned with footer-link-btn */
.btn{
  cursor:pointer; font-family:Poppins; font-weight:600;
}
.btn:not(.btn-icon){
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
}
.btn:not(.btn-icon):hover{
  transform: translateY(-1px);
  background: var(--accent);
  color:#fff;
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.btn-icon:hover{ background: color-mix(in oklab, var(--panel) 92%, #fff 8%); }

/* Primary variant (explicit) retains gradient look */
.btn-primary{
  background: linear-gradient(135deg,
               color-mix(in oklab, var(--accent) 90%, white 10%),
               color-mix(in oklab, var(--accent-2) 78%, black 22%));
  color:#fff; border:0; font-weight:650;
}
.btn-primary:hover{ background: linear-gradient(135deg, var(--accent), var(--accent-2)); transform: translateY(-1px); }
.btn:active{ transform: translateY(0) }
.btn:disabled{ background:var(--border); cursor:not-allowed; transform:none; color:var(--muted) }

/* Button variants & utilities */
.btn-secondary{ background:var(--panel); color:var(--text); border:1px solid var(--border) }
.btn-secondary:hover{ transform: translateY(-1px); background: color-mix(in oklab, var(--panel) 92%, #fff 8%) }
.btn-danger{ background:#dc2626; color:#fff; border:0 }
.btn-danger:hover{ background:#b91c1c }
.btn-block{ width:100% }
.btn-icon{ padding:.5rem .6rem }

/* JSON section summary with copy button */
.json-summary {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  cursor: pointer !important;
}

/* Copy JSON button */
.copy-json-btn {
  background: var(--accent) !important;
  color: white !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 6px 10px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
  margin-left: auto !important;
}

.copy-json-btn:hover {
  background: var(--accent-2) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px rgba(255, 0, 0, 0.3) !important;
}

.copy-json-btn:active {
  transform: translateY(0) !important;
}

.result{ display:none; margin-top:20px }
.result.show{ display:block }

.loading{
  display:flex; align-items:center; justify-content:center; gap:10px;
  color:var(--muted); padding:40px 0
}
.spinner{
  width:18px; height:18px; border:2px solid rgba(255,255,255,.25);
  border-top-color:var(--accent); border-radius:50%; animation:spin 1s linear infinite
}
@keyframes spin{ to{ transform:rotate(360deg) } }

.error{
  padding:20px; text-align:center; border-radius:10px; border:1px solid var(--danger);
  background:rgba(239,100,97,.12); color:var(--danger); font-weight:500
}

/* Generic messages and helpers */
.error-message{
  background:#fef2f2; color:#dc2626; padding:.75rem; border-radius:8px; margin-bottom:1rem; font-size:.875rem; border:1px solid #fecaca
}
.success-message{
  background:#f0fdf4; color:#16a34a; padding:.75rem; border-radius:8px; margin-bottom:1rem; font-size:.875rem; border:1px solid #bbf7d0
}
.loading{ text-align:center; color:var(--muted); font-size:.875rem }
.hidden{ display:none !important }

@media (prefers-color-scheme: dark){
  .error-message{ background:#2d1b1b !important; color:#fca5a5 !important; border-color:#7f1d1d !important }
  .success-message{ background:#1b2d1b !important; color:#86efac !important; border-color:#166534 !important }
}
.theme-dark .error-message{ background:#2d1b1b !important; color:#fca5a5 !important; border-color:#7f1d1d !important }
.theme-dark .success-message{ background:#1b2d1b !important; color:#86efac !important; border-color:#166534 !important }

/* Containers */
.container{ max-width:1200px; margin:0 auto; padding:0 1rem }

/* Auth pages */
.auth-container{
  max-width:400px; margin:2rem auto; padding:2rem; background:var(--card); border-radius:12px; border:1px solid var(--border); box-shadow:var(--shadow)
}
.auth-header{ text-align:center; margin-bottom:2rem }
.auth-header h1{ color:var(--text); font-size:1.5rem; font-weight:700; margin-bottom:.5rem }
.auth-header p{ color:var(--muted); font-size:.875rem }
.auth-links{ text-align:center; margin-top:1.5rem; padding-top:1.5rem; border-top:1px solid var(--border) }
/* Only tint simple text links inside auth-links; do not override button text */
.auth-links a:not(.btn){ color:var(--accent); text-decoration:none; font-size:.875rem }
.auth-links a:hover{ text-decoration:underline }

/* Mobile responsive auth pages */
@media (max-width: 768px) {
  .auth-container {
    max-width: 100%;
    margin: 1rem;
    padding: 1.5rem;
    border-radius: 8px;
  }
  
  .auth-header h1 {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
  }
  
  .auth-header p {
    font-size: 0.8rem;
    line-height: 1.4;
  }
  
  .auth-links {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
  }
  
  .auth-links p {
    margin-bottom: 0.75rem;
    font-size: 0.8rem;
  }
  
  .auth-links a:not(.btn) {
    font-size: 0.8rem;
  }
  
  /* Form improvements for mobile */
  .form-group {
    margin-bottom: 1.25rem;
  }
  
  .form-group label {
    font-size: 0.8rem;
    margin-bottom: 0.4rem;
  }
  
  .form-group input {
    font-size: 16px; /* Prevents zoom on iOS */
    padding: 12px 16px;
    border-radius: 8px;
  }
  
  .form-group small {
    font-size: 0.75rem;
    margin-top: 0.25rem;
    display: block;
  }
  
  /* Button improvements */
  .btn-block {
    padding: 14px 20px;
    font-size: 0.9rem;
    border-radius: 8px;
  }
  
  /* 2FA form specific mobile styles */
  #2fa-form .form-group {
    margin-bottom: 1rem;
  }
  
  #2fa-form input[type="text"] {
    text-align: center;
    font-size: 18px;
    letter-spacing: 2px;
    font-family: monospace;
  }
  
  /* Error and success messages */
  .error-message, .success-message {
    font-size: 0.8rem;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 1rem;
  }
}

/* Form details */
.form-group{ margin-bottom:1rem }
.form-group label{ display:block; margin-bottom:.5rem; color:var(--text); font-weight:500; font-size:.875rem }
.form-group input{
  width:100%; padding:.75rem; border:1px solid var(--border); border-radius:8px; font-size:.875rem; transition:border-color .2s; background:var(--bg); color:var(--text)
}
.form-group input:focus{ outline:none; border-color:var(--accent); box-shadow:var(--ring) }
/* Helper text under inputs */
.form-group small{ display:block; margin-top:6px; color:var(--muted) }

/* Tame browser autofill yellow and keep theme colors */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill{
  -webkit-text-fill-color: var(--text) !important;
  transition: background-color 9999s ease-in-out 0s !important;
  box-shadow: 0 0 0px 1000px var(--bg) inset !important;
}
@media (prefers-color-scheme: light){
  input:-webkit-autofill,
  textarea:-webkit-autofill,
  select:-webkit-autofill{
    box-shadow: 0 0 0px 1000px #fff inset !important;
  }
}

/* Methodology page code styles */
code.inline{ background:var(--panel); border:1px solid var(--border); border-radius:6px; padding:2px 6px; font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace }
pre.schema{ background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:16px; overflow:auto }

/* About page helpers */
.grid-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.5rem; margin:1.5rem 0 }
.cta-banner{ background:linear-gradient(135deg,#667eea 0%,#764ba2 100%); color:#fff; padding:2rem; border-radius:12px; text-align:center; margin:2rem 0 }
.btn-group-center{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap }
.btn-light{ background:#fff; color:#667eea; font-weight:600; border:0 }
.btn-outline-light{ background:rgba(255,255,255,.2); color:#fff; border:1px solid rgba(255,255,255,.3) }
.btn-outline-light:hover{ background:rgba(255,255,255,.3) }

/* Dashboard shared blocks */
.dashboard-container{ max-width:1200px; margin:2rem auto; padding:0 1rem }
.dashboard-header{ background:var(--card); border-radius:12px; padding:2rem; margin-bottom:2rem; box-shadow:var(--shadow); border:1px solid var(--border) }
.dashboard-header h1{ color:var(--text); font-size:1.8rem; font-weight:700; margin-bottom:.5rem }
.dashboard-header p{ color:var(--muted); font-size:1rem }
.user-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1rem; margin-bottom:2rem }
.stat-card{ background:var(--card); border-radius:12px; padding:1.5rem; box-shadow:var(--shadow); border:1px solid var(--border); text-align:center }
.stat-card h3{ color:var(--muted); font-size:.875rem; font-weight:500; margin-bottom:.5rem; text-transform:uppercase; letter-spacing:.05em }
.stat-card p{ color:var(--text); font-size:2rem; font-weight:700; margin:0 }
.analyses-section{ background:var(--card); border-radius:12px; padding:2rem; box-shadow:var(--shadow); border:1px solid var(--border) }
.analyses-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1.5rem }
.analyses-header h2{ color:var(--text); font-size:1.25rem; font-weight:600; margin:0 }
.analyses-list{ display:grid; gap:1rem }
.analysis-item{ background:var(--panel); border-radius:8px; padding:1rem; border:1px solid var(--border); transition:all .2s }
.analysis-item:hover{ background:var(--bg) }
.analysis-item h3{ color:var(--text); font-size:1rem; font-weight:600; margin-bottom:.5rem }
.analysis-item p{ color:var(--muted); font-size:.875rem; margin:.25rem 0 }
.analysis-meta{ display:flex; gap:1rem; margin-top:.5rem; flex-wrap:wrap }
.meta-item{ display:flex; align-items:center; gap:.25rem; color:var(--muted); font-size:.75rem }
.reliability-score{ font-weight:600 }
.reliability-high{ color:#16a34a }
.reliability-medium{ color:#d97706 }
.reliability-low{ color:#dc2626 }
.bias-score{ font-weight:600 }
.bias-positive{ color:#dc2626 }
.bias-neutral{ color:#6b7280 }
.bias-negative{ color:#2563eb }
.empty-state{ text-align:center; padding:3rem 1rem; color:var(--muted) }
.empty-state h3{ color:var(--text); margin-bottom:.5rem }
.auth-required{ text-align:center; padding:3rem 1rem }
.auth-required h2{ color:var(--text); margin-bottom:1rem }
.auth-required p{ color:var(--muted); margin-bottom:1.5rem }
.auth-links-inline{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap }

/* Small utilities */
.mt-22{ margin-top:22px }
.mt-12{ margin-top:12px }
.mb-0{ margin-bottom:0 }
.mb-24{ margin-bottom:24px }
.text-left{ text-align:left }
.actions-right{ margin:0 0 1rem 0; display:flex; justify-content:flex-end; gap:.5rem }
.grid-settings{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1rem }

/* ====== Analysis Layout ====== */
.analysis-grid{ display:grid; grid-template-columns:1fr; gap:20px; margin-top:20px }
@media (min-width:768px){ .analysis-grid{ grid-template-columns:300px 1fr } }

.bias-chart{
  width:100%; height:280px; background-color:var(--panel);
  border:1px solid var(--border); border-radius:12px; position:relative;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:100% 50%, 50% 100%;
}
.chart-point{
  position:absolute; width:18px; height:18px;
  background: radial-gradient(circle, #fff 25%, var(--accent) 80%);
  border-radius:50%; transform:translate(-50%,-50%); border:2px solid #fff;
  box-shadow: 0 0 0 2px rgba(255,255,255,.3),
              0 0 18px color-mix(in oklab, var(--accent) 60%, transparent);
  transition: top .5s ease-out, left .5s ease-out;
}
.axis-label{
  position:absolute; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.08em
}
.y-axis-top{ top:6px; left:50%; transform:translateX(-50%) }
.y-axis-bottom{ bottom:6px; left:50%; transform:translateX(-50%) }
.x-axis-left{ left:6px; top:50%; transform:translateY(-50%) rotate(180deg); writing-mode:vertical-rl }
.x-axis-right{ right:6px; top:50%; transform:translateY(-50%); writing-mode:vertical-rl }

.summary-card h4{ margin:6px 0 8px 0 }
.summary-card p{ margin:0; color:var(--muted); font-size:15.5px }

/* generic definition list used for score rationales */
.score-details dt,
.explain dt{ font-weight:600; color:var(--text); margin-top:1.2em }
.score-details dd,
.explain dd{
  margin:.2em 0 0 1em; color:var(--muted); font-size:14px;
  border-left:2px solid var(--border); padding-left:1em
}
.score-details .value{
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  color:var(--accent); font-weight:700
}

.sec-title{ margin:22px 0 8px; font-weight:700; font-size:18px; border-bottom:1px solid var(--border); padding-bottom:6px; letter-spacing:.2px }
.article-type-tag{ display:inline-block; background-color:var(--accent); color:white; padding:4px 12px; border-radius:999px; font-size:14px; font-weight:700; margin-bottom:10px }

.sources-table{ 
  width:100%; 
  border-collapse:collapse; 
  font-size:14px; 
  margin-top:10px;
  table-layout: fixed;
}
.sources-table th, .sources-table td{ 
  text-align:left; 
  padding:12px 10px; 
  border-bottom:1px solid var(--border);
  border-right:1px solid var(--border);
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.sources-table th:last-child, .sources-table td:last-child{ 
  border-right: none;
}
.sources-table th{ 
  color:var(--muted);
  font-weight: 600;
  background: var(--panel);
}
.sources-table td:first-child{ 
  width: 40%;
  max-width: 0;
}
.sources-table td:nth-child(2){ 
  width: 30%;
  max-width: 0;
}
.sources-table td:nth-child(3){ 
  width: 30%;
  max-width: 0;
}

/* Mobile responsive improvements for sources table */
@media (max-width: 768px) {
  .sources-table {
    font-size: 13px;
  }
  .sources-table th, .sources-table td {
    padding: 8px 6px;
  }
  .sources-table td:first-child{ 
    width: 45%;
  }
  .sources-table td:nth-child(2){ 
    width: 25%;
  }
  .sources-table td:nth-child(3){ 
    width: 30%;
  }
}

/* Stance color coding - light mode only */
@media (prefers-color-scheme: light) {
  /* Müsbət (positive) - green background for entire row */
  .sources-table .stance-positive {
    background-color: #dcfce7 !important;
  }
  .sources-table .stance-positive td {
    background-color: #dcfce7 !important;
    color: #166534 !important;
  }
  
  /* Mənfi (negative) - red background for entire row */
  .sources-table .stance-negative {
    background-color: #fef2f2 !important;
  }
  .sources-table .stance-negative td {
    background-color: #fef2f2 !important;
    color: #991b1b !important;
  }
  
  /* Neytral (neutral) - keep default styling */
  .sources-table .stance-neutral {
    background-color: var(--card) !important;
  }
  .sources-table .stance-neutral td {
    background-color: var(--card) !important;
    color: var(--text) !important;
  }
}

/* Manual theme override for stance colors */
.theme-light .sources-table .stance-positive {
  background-color: #dcfce7 !important;
}
.theme-light .sources-table .stance-positive td {
  background-color: #dcfce7 !important;
  color: #166534 !important;
}

.theme-light .sources-table .stance-negative {
  background-color: #fef2f2 !important;
}
.theme-light .sources-table .stance-negative td {
  background-color: #fef2f2 !important;
  color: #991b1b !important;
}

.theme-light .sources-table .stance-neutral {
  background-color: var(--card) !important;
}
.theme-light .sources-table .stance-neutral td {
  background-color: var(--card) !important;
  color: var(--text) !important;
}

/* Diagnostics (new schema) */
.diagnostics-grid{ display:grid; grid-template-columns:1fr; gap:16px }
.diag-item{ background-color:var(--panel); padding:15px; border-radius:10px; border:1px solid var(--border) }
.diag-item .label{ font-size:14px; color:var(--muted) }
/* optional: numeric cells deprecated; keep style lightweight */
.diag-item .value{ font-size:16px; font-weight:600; color:var(--text) }

/* Socio-cultural descriptions list */
.socio-list{ list-style:none; padding:0; margin:0 }
.socio-list li{ padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:var(--panel); margin-bottom:8px }
.socio-list li:last-child{ margin-bottom:0 }
.socio-list .muted{ display:block; margin-top:4px }

/* Socio-cultural stance color coding - light mode only */
@media (prefers-color-scheme: light) {
  /* Müsbət (positive) - green background */
  .socio-list .stance-positive {
    background-color: #dcfce7 !important;
    border-color: #bbf7d0 !important;
  }
  .socio-list .stance-positive div {
    color: #166534 !important;
  }
  .socio-list .stance-positive .muted {
    color: #15803d !important;
  }
  
  /* Mənfi (negative) - red background */
  .socio-list .stance-negative {
    background-color: #fef2f2 !important;
    border-color: #fecaca !important;
  }
  .socio-list .stance-negative div {
    color: #991b1b !important;
  }
  .socio-list .stance-negative .muted {
    color: #dc2626 !important;
  }
  
  /* Neytral (neutral) - keep default styling */
  .socio-list .stance-neutral {
    background-color: var(--panel) !important;
    border-color: var(--border) !important;
  }
  .socio-list .stance-neutral div {
    color: var(--text) !important;
  }
  .socio-list .stance-neutral .muted {
    color: var(--muted) !important;
  }
}

/* Manual theme override for socio-cultural stance colors */
.theme-light .socio-list .stance-positive {
  background-color: #dcfce7 !important;
  border-color: #bbf7d0 !important;
}
.theme-light .socio-list .stance-positive div {
  color: #166534 !important;
}
.theme-light .socio-list .stance-positive .muted {
  color: #15803d !important;
}

.theme-light .socio-list .stance-negative {
  background-color: #fef2f2 !important;
  border-color: #fecaca !important;
}
.theme-light .socio-list .stance-negative div {
  color: #991b1b !important;
}
.theme-light .socio-list .stance-negative .muted {
  color: #dc2626 !important;
}

.theme-light .socio-list .stance-neutral {
  background-color: var(--panel) !important;
  border-color: var(--border) !important;
}
.theme-light .socio-list .stance-neutral div {
  color: var(--text) !important;
}
.theme-light .socio-list .stance-neutral .muted {
  color: var(--muted) !important;
}

/* Language flags list */
.flags{ list-style:none; padding:0; margin:0 }
.flags li{ padding:8px 10px; border-bottom:1px dashed var(--border) }
.flags li:last-child{ border-bottom:0 }

.language-flags{ font-size:14px; color:var(--muted) }
details{ margin-top:20px }
summary{ cursor:pointer; color:var(--muted); font-size:14px }
pre{
  background-color:var(--panel); border:1px solid var(--border); border-radius:8px;
  padding:15px; font-size:12px; white-space:pre-wrap; word-wrap:break-word; max-height:400px; overflow:auto
}

/* tiny helpers used by app.js */
.coord-values{ margin-top:8px; color:var(--muted) }
.micro{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted) }

/* ====== Share bar ====== */
.share-section {
  margin-top: 20px;
  padding: 14px;
  background-color: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  text-align: center;
}
.share-section h4 {
  margin: 0 0 10px 0;
  color: var(--muted);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.share-section .share-row {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
}
.share-section .share-input {
  flex: 1;
  min-width: 240px;
  text-align: center;
  padding: 10px 12px;
  background-color: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
}
.share-section .btn {
  width: auto;
  padding: 10px 14px;
  font-size: 14px;
  white-space: nowrap;
}
.share-section .status { margin-top: 6px; min-height: 1em; }
@media (max-width: 520px) {
  .share-section .share-row { flex-direction: column; align-items: stretch; }
  .share-section .btn { width: 100%; }
}

/* Base share button look */
.share-buttons{ display:flex; gap:10px; flex-wrap:wrap; margin-top:8px }
.share-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  background:var(--panel); border:1px solid var(--border);
  color:var(--text); transition:background .2s, color .2s, border-color .2s;
}
.share-btn svg{ width:20px; height:20px; fill:currentColor; display:block }

/* Light mode: brand colours */
@media (prefers-color-scheme: light){
  .share-btn.x  { color:#000 }          /* X (Twitter) */
  .share-btn.fb { color:#1877f2 }       /* Facebook */
  .share-btn.li { color:#0a66c2 }       /* LinkedIn */
  .share-btn.tg { color:#229ED9 }       /* Telegram */
  .share-btn.wa { color:#25D366 }       /* WhatsApp */

  .share-btn.x:hover  { background:#000;    color:#fff; border-color:transparent }
  .share-btn.fb:hover { background:#1877f2; color:#fff; border-color:transparent }
  .share-btn.li:hover { background:#0a66c2; color:#fff; border-color:transparent }
  .share-btn.tg:hover { background:#229ED9; color:#fff; border-color:transparent }
  .share-btn.wa:hover { background:#25D366; color:#fff; border-color:transparent }
}

/* Dark mode: all white */
@media (prefers-color-scheme: dark){
  .share-btn.x,
  .share-btn.fb,
  .share-btn.li,
  .share-btn.tg,
  .share-btn.wa { color:#fff }

  .share-btn:hover{
    background:rgba(255,255,255,.12);
    color:#fff;
    border-color:transparent;
  }
}

/* Manual theme overrides for share buttons */
.theme-light .share-btn.x  { color:#000 }          /* X (Twitter) */
.theme-light .share-btn.fb { color:#1877f2 }       /* Facebook */
.theme-light .share-btn.li { color:#0a66c2 }       /* LinkedIn */
.theme-light .share-btn.tg { color:#229ED9 }       /* Telegram */
.theme-light .share-btn.wa { color:#25D366 }       /* WhatsApp */

.theme-light .share-btn.x:hover  { background:#000;    color:#fff; border-color:transparent }
.theme-light .share-btn.fb:hover { background:#1877f2; color:#fff; border-color:transparent }
.theme-light .share-btn.li:hover { background:#0a66c2; color:#fff; border-color:transparent }
.theme-light .share-btn.tg:hover { background:#229ED9; color:#fff; border-color:transparent }
.theme-light .share-btn.wa:hover { background:#25D366; color:#fff; border-color:transparent }

.theme-dark .share-btn.x,
.theme-dark .share-btn.fb,
.theme-dark .share-btn.li,
.theme-dark .share-btn.tg,
.theme-dark .share-btn.wa { color:#fff }

.theme-dark .share-btn:hover{
  background:rgba(255,255,255,.12);
  color:#fff;
  border-color:transparent;
}

/* =================== Footer =================== */
footer.site-footer{
  margin-top:36px; padding:22px; border-top:1px solid var(--border);
  display:flex; flex-direction:column; gap:14px; align-items:center; justify-content:center; color:var(--muted)
}
.footer-row{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; justify-content:center }
.footer-brand{ display:flex; gap:8px; align-items:center }
.footer-brand a{ color:var(--text); text-decoration:none; font-weight:650 }

/* Icon size used across UI */
.icon{ width:20px; height:20px; display:inline-block }
.muted{ color:var(--muted) }
.small{ font-size:12px }

/* Dark mode improvements for better contrast */
@media (prefers-color-scheme: dark) {
  .toc {
    background: var(--panel) !important;
    border-color: var(--border) !important;
  }
  
  .toc a {
    color: var(--text) !important;
  }
  
  .toc a:hover {
    color: var(--accent) !important;
  }
  
  .note {
    color: #a0a9c0 !important;
  }
  
  .kpi {
    background: var(--panel) !important;
    border-color: var(--border) !important;
  }
  
  .kpi strong {
    color: var(--text) !important;
  }
  
  .chip {
    color: var(--text) !important;
    border-color: var(--border) !important;
  }
  
  .chip.active {
    background: var(--accent) !important;
    color: white !important;
  }
  
  .warning,
  .warning * {
    color: #1f2937 !important;
  }
}

/* Manual dark theme override */
.theme-dark .toc {
  background: var(--panel) !important;
  border-color: var(--border) !important;
}

.theme-dark .toc a {
  color: var(--text) !important;
}

.theme-dark .toc a:hover {
  color: var(--accent) !important;
}

.theme-dark .note {
  color: #a0a9c0 !important;
}

.theme-dark .kpi {
  background: var(--panel) !important;
  border-color: var(--border) !important;
}

.theme-dark .kpi strong {
  color: var(--text) !important;
}

.theme-dark .chip {
  color: var(--text) !important;
  border-color: var(--border) !important;
}

.theme-dark .chip.active {
  background: var(--accent) !important;
  color: white !important;
}

.theme-dark .muted {
  color: #a0a9c0 !important;
}

/* Additional specificity for warning elements */
@media (prefers-color-scheme: dark) {
  .warning,
  .warning *,
  .warning strong {
    color: #ffffff !important;
  }
  
}

.theme-dark .warning,
.theme-dark .warning *,
.theme-dark .warning strong {
  color: #ffffff !important;
}


/* Footer link buttons */
.footer-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

.footer-link-btn:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.footer-link-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Footer icons: ICON-ONLY + tooltips */
.footer-icons{ display:flex; gap:10px; flex-wrap:wrap; align-items:center }
.footer-icons a{
  position:relative;
  width:38px; height:38px;
  display:inline-grid; place-items:center;
  border-radius:10px;
  text-decoration:none; color:inherit;
  background:var(--panel);
  border:1px solid var(--border);
  opacity:.9;
  transition:transform .15s ease, opacity .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.footer-icons a:hover,
.footer-icons a:focus-visible{
  opacity:1; transform:translateY(-1px);
  border-color:var(--accent);
  background: color-mix(in oklab, var(--panel) 92%, var(--accent) 8%);
}

/* Tooltips (footer + header nav when used) */
.footer-icons a[data-tooltip]::after,
.site-nav a[data-tooltip]::after,
.nav-link[data-tooltip]::after{
  content:attr(data-tooltip);
  position:absolute; left:50%; bottom:calc(100% + 8px);
  transform:translateX(-50%) translateY(4px);
  background:rgba(0,0,0,.8);
  color:#fff; font-size:12px; line-height:1; padding:6px 8px; border-radius:6px;
  white-space:nowrap; pointer-events:none; opacity:0;
  transition:opacity .15s ease, transform .15s ease;
  z-index:1000;
}
@media (prefers-color-scheme: light){
  .footer-icons a[data-tooltip]::after,
  .site-nav a[data-tooltip]::after,
  .nav-link[data-tooltip]::after{ background:rgba(20,20,25,.9) }
}
.footer-icons a:focus-visible[data-tooltip]::after,
.footer-icons a:hover[data-tooltip]::after,
.site-nav a:focus-visible[data-tooltip]::after,
.site-nav a:hover[data-tooltip]::after,
.nav-link:focus-visible[data-tooltip]::after,
.nav-link:hover[data-tooltip]::after{
  opacity:1; transform:translateX(-50%) translateY(0);
}

/* Buy Me a Coffee highlight (footer) */
.footer-icons a.support{
  background: linear-gradient(135deg, #ffdd00, #ffc107);
  color:#1a1a1a;
  box-shadow:0 2px 10px rgba(255,193,7,.35);
  border-color: transparent;
}
.footer-icons a.support:hover,
.footer-icons a.support:focus-visible{
  box-shadow:0 4px 16px rgba(255,193,7,.45);
  transform:translateY(-1px);
}

/* =================== Mobile Navigation (drawer) =================== */

/* Mobile theme toggle - hidden by default */
.mobile-theme-toggle {
  display: none;
}

/* Mobile header layout */
@media (max-width: 768px) {
  header {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    justify-content: unset;
  }
  
  /* Theme toggle on the left */
  .mobile-theme-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border);
    background: var(--panel);
    border-radius: 10px;
    cursor: pointer;
    color: var(--text);
    transition: all .2s ease;
    grid-column: 1;
    justify-self: start;
  }
  
  .mobile-theme-toggle:hover {
    background: color-mix(in oklab, var(--panel) 88%, var(--accent) 12%);
    border-color: var(--accent);
    transform: translateY(-1px);
  }
  
  .mobile-theme-toggle:focus-visible {
    outline: none;
    box-shadow: var(--ring);
  }
  
  .mobile-theme-toggle svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
  }
  
  /* Logo in the center */
  .brand {
    grid-column: 2;
    justify-self: center;
  }
  
  /* Hamburger menu on the right */
  .nav-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border);
    background: var(--panel);
    border-radius: 10px;
    cursor: pointer;
    color: var(--text);
    transition: all .2s ease;
    grid-column: 3;
    justify-self: end;
  }
  
  .nav-toggle:hover {
    background: color-mix(in oklab, var(--panel) 88%, var(--accent) 12%);
    border-color: var(--accent);
    transform: translateY(-1px);
  }
  
  .nav-toggle:focus-visible {
    outline: none;
    box-shadow: var(--ring);
  }
  
  .nav-toggle svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
  }
}

/* Toggle button (hidden on desktop by default) */
.nav-toggle{
  display:none;
  align-items:center; justify-content:center;
  width:40px; height:40px;
  border:1px solid var(--border);
  background:var(--panel);
  border-radius:10px;
  cursor:pointer;
  color:var(--text);
  transition:all .2s ease;
}
.nav-toggle:hover{
  background: color-mix(in oklab, var(--panel) 88%, var(--accent) 12%);
  border-color:var(--accent);
  transform:translateY(-1px);
}
.nav-toggle:focus-visible{ outline:none; box-shadow: var(--ring) }
.nav-toggle svg{ 
  width:22px; height:22px;
  stroke:currentColor;
}

/* Backdrop for drawer */
.nav-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.35);
  opacity:0; pointer-events:none; transition:opacity .2s ease;
  z-index: 60;
}

/* Drawer container defaults (desktop) already covered by .site-nav */

/* Radial Menu (mobile) */
@media (max-width: 768px){
  header{ position: relative }
  .nav-toggle{ display:inline-flex } /* show burger */

  /* Override desktop nav styles for mobile radial menu */
  .site-nav.radial-menu{
    position: fixed !important; 
    top: 50% !important; 
    left: 50% !important; 
    transform: translate(-50%, -50%) scale(0) !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
    z-index: 70 !important;
    gap: 0 !important;
  }
  
  .site-nav.radial-menu.open{
    transform: translate(-50%, -50%) scale(1) !important;
    width: 420px !important;
    height: 420px !important;
  }
  
  /* Radial menu items - Mobile only */
  .radial-item{
    position: absolute !important;
    width: 100px !important;
    height: 100px !important;
    background: var(--panel) !important;
    border: 2px solid var(--border) !important;
    border-radius: 50% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    color: var(--text) !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    box-shadow: var(--shadow) !important;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
    opacity: 0 !important;
    transform: scale(0) !important;
    padding: 4px !important;
    box-sizing: border-box !important;
  }
  
  .radial-menu.open .radial-item{
    opacity: 1 !important;
  }
  
  .radial-item:hover{
    background: var(--accent) !important;
    color: white !important;
    border-color: var(--accent) !important;
    box-shadow: 0 8px 25px rgba(239, 68, 68, 0.3) !important;
  }
  
  /* Hover effects for each positioned item */
  .site-nav.radial-menu .radial-item[data-angle="0"]:hover{
    transform: translate(0, -160px) scale(1.1) !important;
  }
  .site-nav.radial-menu .radial-item[data-angle="72"]:hover{
    transform: translate(138px, -111px) scale(1.1) !important;
  }
  .site-nav.radial-menu .radial-item[data-angle="144"]:hover{
    transform: translate(138px, 111px) scale(1.1) !important;
  }
  .site-nav.radial-menu .radial-item[data-angle="216"]:hover{
    transform: translate(0, 160px) scale(1.1) !important;
  }
  .site-nav.radial-menu .radial-item[data-angle="252"]:hover{
    transform: translate(-138px, 111px) scale(1.1) !important;
  }
  .site-nav.radial-menu .radial-item[data-angle="324"]:hover{
    transform: translate(-138px, -111px) scale(1.1) !important;
  }
  
  .radial-item .icon{
    width: 32px !important;
    height: 32px !important;
    flex-shrink: 0 !important;
  }
  
  .radial-item .label{
    font-size: 9px !important;
    text-align: center !important;
    line-height: 1.1 !important;
    max-width: 90px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: block !important;
  }
  
  /* Position radial items in circle - Mobile only (6 items) */
  .site-nav.radial-menu .radial-item[data-angle="0"]{ 
    position: absolute !important;
    transform: translate(0, -160px) scale(0) !important; 
  }
  .site-nav.radial-menu .radial-item[data-angle="72"]{ 
    position: absolute !important;
    transform: translate(138px, -111px) scale(0) !important; 
  }
  .site-nav.radial-menu .radial-item[data-angle="144"]{ 
    position: absolute !important;
    transform: translate(138px, 111px) scale(0) !important; 
  }
  .site-nav.radial-menu .radial-item[data-angle="216"]{ 
    position: absolute !important;
    transform: translate(0, 160px) scale(0) !important; 
  }
  .site-nav.radial-menu .radial-item[data-angle="252"]{ 
    position: absolute !important;
    transform: translate(-138px, 111px) scale(0) !important; 
  }
  .site-nav.radial-menu .radial-item[data-angle="324"]{ 
    position: absolute !important;
    transform: translate(-138px, -111px) scale(0) !important; 
  }
  
  .site-nav.radial-menu.open .radial-item[data-angle="0"]{ 
    position: absolute !important;
    transform: translate(0, -160px) scale(1) !important; 
  }
  .site-nav.radial-menu.open .radial-item[data-angle="72"]{ 
    position: absolute !important;
    transform: translate(138px, -111px) scale(1) !important; 
  }
  .site-nav.radial-menu.open .radial-item[data-angle="144"]{ 
    position: absolute !important;
    transform: translate(138px, 111px) scale(1) !important; 
  }
  .site-nav.radial-menu.open .radial-item[data-angle="216"]{ 
    position: absolute !important;
    transform: translate(0, 160px) scale(1) !important; 
  }
  .site-nav.radial-menu.open .radial-item[data-angle="252"]{ 
    position: absolute !important;
    transform: translate(-138px, 111px) scale(1) !important; 
  }
  .site-nav.radial-menu.open .radial-item[data-angle="324"]{ 
    position: absolute !important;
    transform: translate(-138px, -111px) scale(1) !important; 
  }
  
  /* Center logo */
  .radial-center-logo{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
  }
  
  .radial-menu.open .radial-center-logo{
    opacity: 1;
  }
  
  .radial-center-logo img{
    width: 144px;
    height: 144px;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }
  
  /* Blur background when menu is open */
  .nav-backdrop{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 60;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  
  .nav-backdrop:not([hidden]){
    opacity: 1;
  }
  
  /* Mobile nav header */
  .mobile-nav-header{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:8px 4px 12px 4px;
    border-bottom:1px solid var(--border);
    margin-bottom:12px;
  }
  .mobile-nav-title{
    font-size:14px;
    font-weight:600;
    color:var(--text);
  }
  
  /* Navigation links on mobile - compact with icons and text */
  .nav-link{
    padding:8px 6px; border-radius:6px;
    font-size:13px; text-align:left;
    justify-content:flex-start;
    gap:6px;
    width:auto;
    height:auto;
    min-height:36px;
  }
  .nav-link:hover{ 
    background: color-mix(in oklab, var(--panel) 88%, var(--accent) 12%);
  }
  .nav-link .icon{
    width:14px;
    height:14px;
    flex-shrink:0;
  }
  .nav-link .sr-only{
    position:static;
    width:auto;
    height:auto;
    overflow:visible;
    clip:auto;
    font-weight:500;
  }
  
  /* Action buttons container */
  .site-nav .nav-actions{
    display:flex; gap:8px; margin-top:12px; padding-top:12px;
    border-top:1px solid var(--border);
  }
  
  /* Hide desktop buttons on mobile */
  .site-nav > .theme-toggle,
  .site-nav > .btn-support{
    display:none;
  }
  
  /* Show mobile buttons in nav-actions container */
  .nav-actions{
    display:flex;
  }
  
  .nav-actions .theme-toggle{
    display:inline-flex;
  }
  
  /* Theme toggle in mobile nav-actions */
  .nav-actions .theme-toggle{
    width:36px; height:36px; padding:0;
    flex-shrink:0;
  }
  
  body.nav-open .site-nav{ transform: translateX(0) }
  .nav-backdrop{ z-index:60 }
  body.nav-open .nav-backdrop{ opacity:1; pointer-events:auto }
}

/* Keep existing active link style consistent */
.site-nav a.active{
  color:var(--accent);
  border-bottom:2px solid var(--accent);
  padding-bottom:2px;
}

/* =================== Article header info in result =================== */
.article-header { display: grid; gap: 6px; margin-bottom: 14px; }
.article-link {
  display: grid; gap: 2px; text-decoration: none; background: var(--panel);
  border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px;
}
.article-link:hover { border-color: var(--accent); }
.article-source {
  font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em;
}
.article-title { font-weight: 600; color: var(--text); line-height: 1.4; }
.article-date { color: var(--muted); }

/* =================== To-Top button =================== */
#to-top {
  position: fixed;
  bottom: 22px;
  right: 22px;
  background: var(--to-top-bg);
  color: var(--to-top-fg);
  border: 1.5px solid var(--to-top-border);
  border-radius: 999px;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, background .3s ease;
  z-index: 1000;
}
#to-top.visible { opacity: 0.85; pointer-events: auto; }
#to-top:hover { opacity: 1; }
#to-top .icon { width: 20px; height: 20px; }

/* =================== Motion =================== */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important }
}

/* =================== Small screens =================== */
@media (max-width:600px){
  .site-nav{ gap:14px; font-size:14px; }
  .site-nav a{ font-size:14px }
}

/* --- Analysis header (mobile-first) --- */
.hdr{ margin-bottom:12px }
.hdr .kv{
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
  align-items:start;
}
.hdr .item{
  display:flex; flex-direction:row; gap:12px; padding:8px 0; border-top:1px dashed var(--border);
  align-items: flex-start;
}
.hdr .item:first-child{ border-top:0 }
.hdr .k{
  color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.06em;
  min-width: 80px;
  flex-shrink: 0;
  font-weight: 600;
}
.hdr .v{
  flex: 1;
  font-size: 15px;
  line-height: 1.4;
  color: var(--text);
}
.hdr .v a{ color:var(--link,#4f7cff); text-decoration:underline }
.hdr .v.anywrap{ overflow-wrap:anywhere; word-break:break-word }

/* Mobile: Simplify layout and remove card layers */
@media (max-width: 768px) {
  .wrap {
    padding: 16px 12px 96px;
  }
  
  /* Auth pages container improvements */
  .container {
    padding: 0 0.5rem;
  }
  
  .hdr {
    padding: 16px;
    margin-bottom: 20px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow);
    width: 100%;
    max-width: none;
    padding-right: 0;
    border-right: none;
    margin-right: 0;
    box-sizing: border-box;
    display: block !important;
    grid-template-columns: none !important;
  }
  .hdr .kv{
    gap: 0;
    display: block;
    width: 100%;
    padding-right: 0;
    border-right: none;
    margin-right: 0;
    box-sizing: border-box;
  }
  .hdr .item{
    padding: 16px 0;
    gap: 12px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid var(--border, #eee);
    width: 100%;
    padding-right: 0;
    margin-right: 0;
    box-sizing: border-box;
  }
  .hdr .item:last-child {
    border-bottom: none;
  }
  .hdr .k{
    font-size: 12px;
    font-weight: 600;
    color: var(--muted, #666);
    min-width: 80px;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .hdr .v{
    font-size: 15px;
    text-align: left;
    line-height: 1.4;
    flex: 1;
    color: var(--text, #333);
    word-wrap: break-word;
    padding-right: 0;
    margin-right: 0;
    box-sizing: border-box;
    min-width: 0;
  }
  .hdr .item.link {
    justify-content: center;
    padding: 20px 0;
    border-bottom: none;
  }
  .hdr .item.link .k {
    display: none;
  }
  .hdr .item.link .v {
    text-align: center;
    flex: none;
  }
  
  /* Reduce card padding on mobile */
  .card {
    padding: 16px;
    margin-bottom: 16px;
  }
  .card > .bd {
    padding: 0;
  }
  
  /* Ensure site averages section has proper padding on mobile */
  #site-averages-card > .bd {
    padding: 16px;
  }
  
  /* Ensure site averages section is visible and properly styled on mobile */
  #site-averages-card {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

@media (min-width: 720px){
  .hdr {
    width: 100%;
    max-width: none;
    padding-right: 0;
    border-right: none;
    margin-right: 0;
    box-sizing: border-box;
  }
  .hdr .kv{ 
    grid-template-columns: 1fr;
    gap: 16px;
    width: 100%;
    padding-right: 0;
    border-right: none;
    margin-right: 0;
    box-sizing: border-box;
  }
  .hdr .item.buttons{ 
    grid-column: 1 / -1;
    justify-content: stretch;
    width: 100%;
    padding-right: 0;
    margin-right: 0;
    box-sizing: border-box;
  }
  .hdr .k {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .hdr .k svg {
    flex-shrink: 0;
  }
}

/* Alternative Versions Section */
.version-link {
  display: block;
  padding: 12px;
  margin: 8px 0;
  background: var(--card-bg, rgba(255,255,255,0.02));
  border: 1px solid var(--border, #222);
  border-radius: 8px;
  text-decoration: none;
  color: var(--text, #e9edf3);
  transition: all 0.2s ease;
}

.version-link:hover {
  background: var(--hover-bg, rgba(255,255,255,0.05));
  border-color: var(--accent, #3b82f6);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.version-link:active {
  transform: translateY(0);
}

.version-link strong {
  color: var(--accent, #3b82f6);
}

.version-link .small {
  color: var(--muted, #8e97ab);
  font-size: 12px;
}

/* Recent analyses section */
.recent-section {
  margin-top: 2rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--border, #e5e7eb);
}

.recent-section h3 {
  margin: 0 0 1rem 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text, #1f2937);
}

.recent-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.recent-item {
  display: block;
  padding: 1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  text-decoration: none;
  color: var(--text);
  transition: all 0.2s ease;
}

.recent-item:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(255, 0, 0, 0.1);
  transform: translateY(-1px);
  background: var(--panel);
}

.recent-item-title {
  font-weight: 500;
  margin: 0 0 0.5rem 0;
  color: var(--text);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.recent-item-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: var(--muted);
  margin-bottom: 0.5rem;
}

.recent-item-scores {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.875rem;
}

.score-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.score-value {
  font-weight: 600;
}

/* Dynamic reliability colors based on score ranges - improved contrast */
.score-value.reliability-excellent {
  color: #047857; /* Darker green for 80-100 - better contrast */
}

.score-value.reliability-good {
  color: #059669; /* Darker green for 60-79 - better contrast */
}

.score-value.reliability-fair {
  color: #d97706; /* Darker orange for 40-59 - better contrast */
}

.score-value.reliability-poor {
  color: #ea580c; /* Darker orange for 20-39 - better contrast */
}

.score-value.reliability-very-poor {
  color: #b91c1c; /* Darker red for 0-19 - better contrast */
}

/* Dynamic bias colors based on score ranges - improved contrast */
.score-value.bias-strong-pro {
  color: #1e40af; /* Darker blue for +3 to +5 - better contrast */
}

.score-value.bias-pro {
  color: #2563eb; /* Darker blue for +1 to +2 - better contrast */
}

.score-value.bias-neutral {
  color: #4b5563; /* Darker gray for 0 - better contrast */
}

.score-value.bias-critical {
  color: #d97706; /* Darker orange for -1 to -2 - better contrast */
}

.score-value.bias-strong-opposition {
  color: #b91c1c; /* Darker red for -3 to -5 - better contrast */
}

.recent-item-url {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 0.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}



/* =================== Keyboard Shortcuts =================== */
.shortcuts-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.shortcuts-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
}

.shortcuts-content {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  max-width: 600px;
  width: 100%;
  max-height: 80vh;
  overflow: hidden;
  box-shadow: var(--shadow);
  animation: shortcutsSlideIn 0.3s ease-out;
}

@keyframes shortcutsSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.shortcuts-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}

.shortcuts-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
}

.shortcuts-close {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shortcuts-close:hover {
  background: var(--panel);
  color: var(--text);
}

.shortcuts-list {
  padding: 20px 24px;
  max-height: 400px;
  overflow-y: auto;
}

.shortcut-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.shortcut-item:last-child {
  border-bottom: none;
}

.shortcut-keys {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.shortcut-description {
  color: var(--text);
  font-size: 14px;
  margin-left: 16px;
  flex: 1;
}

.shortcuts-footer {
  padding: 20px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.shortcuts-tip {
  color: var(--muted);
  font-size: 12px;
}

/* Keyboard key styling */
kbd {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 8px;
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  display: inline-block;
  min-width: 20px;
  text-align: center;
}

/* Clickable shortcuts bubble */
.shortcuts-bubble {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 100;
  pointer-events: none;
  display: none; /* Hidden by default, shown only on desktop */
}

@media (min-width: 769px) {
  .shortcuts-bubble {
    display: block; /* Show only on desktop */
  }
}

.shortcuts-bubble-btn {
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 50px;
  padding: 12px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  pointer-events: auto;
  font-family: inherit;
}

.shortcuts-bubble-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
  background: var(--accent-2);
}

.shortcuts-bubble-btn:active {
  transform: translateY(0);
}

.shortcuts-bubble-text {
  white-space: nowrap;
  color: white; /* Ensure white text for better contrast against red background */
  font-weight: 500; /* Slightly bolder for better readability */
}

/* Mobile styles removed - bubble not shown on mobile */

/* Responsive shortcuts */
@media (max-width: 768px) {
  .shortcuts-content {
    margin: 20px;
    max-height: 90vh;
  }
  
  .shortcuts-header,
  .shortcuts-list,
  .shortcuts-footer {
    padding: 16px 20px;
  }
  
  .shortcut-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .shortcut-description {
    margin-left: 0;
  }
  
  .shortcuts-footer {
    flex-direction: column;
    align-items: stretch;
  }
}

/* =================== Metric Cards =================== */
.stat {
  transition: all 0.2s ease;
}

.stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

@media (max-width: 768px) {
  .stat {
    padding: 12px;
    border-radius: 10px;
  }
  
  .stat .small {
    font-size: 10px !important;
    margin-bottom: 6px !important;
  }
  
  .stat > div:last-child {
    font-size: 24px !important;
  }
}

/* =================== Action Buttons =================== */
.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--accent);
  color: white;
  text-decoration: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
  flex: 1;
  justify-content: center;
  box-sizing: border-box;
  height: 40px;
  line-height: 1;
}

.action-btn:hover {
  background: var(--accent-2);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 0, 0, 0.3);
}

.action-btn svg {
  flex-shrink: 0;
}

/* Ensure both a and button elements have identical styling */
a.action-btn,
button.action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 40px;
  line-height: 1;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.summary-btn {
  background: var(--muted, #666);
}

.summary-btn:hover {
  background: var(--text, #333);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Desktop: Buttons in grid */
@media (min-width: 720px) {
  .hdr .item.buttons {
    grid-column: 1 / -1;
    display: flex;
    gap: 12px;
    justify-content: stretch;
  }
  
  .action-btn {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
  }
}

/* Mobile: Buttons share space evenly */
@media (max-width: 768px) {
  .hdr .item.buttons {
    display: flex;
    gap: 8px;
    padding: 16px 0;
  }
  
  .action-btn {
    flex: 1;
    font-size: 13px;
    padding: 10px 12px;
  }
}


@media (max-width: 480px) {
  .recent-item-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
  
  .recent-item-scores {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}

/* Warning styles */
.warnings-section {
  border-left: 4px solid var(--warning-color, #ff9800);
  background: rgba(255, 152, 0, 0.05);
}

.warning-item {
  color: var(--warning-text, var(--text));
}

.warning-item strong {
  color: var(--warning-color, #ff9800);
}

/* =================== Promotional Content Badge =================== */
.promo-badge {
  margin-top: 8px;
  padding: 6px 10px;
  background: linear-gradient(135deg, #ff6b6b, #ee5a52);
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: white;
  font-weight: 500;
  font-size: 12px;
  box-shadow: 0 1px 3px rgba(255, 107, 107, 0.3);
  transition: all 0.2s ease;
  max-width: fit-content;
}

.promo-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(255, 107, 107, 0.4);
}

.promo-badge svg {
  flex-shrink: 0;
  opacity: 0.9;
}

.promo-badge .complaint-btn {
  margin-left: 4px;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  padding: 4px;
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  min-width: 20px;
  min-height: 20px;
}

.promo-badge .complaint-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.promo-badge .complaint-btn svg {
  width: 10px;
  height: 10px;
}

/* Dark theme support for promo badge */
.theme-dark .promo-badge {
  background: linear-gradient(135deg, #ff6b6b, #ee5a52);
  box-shadow: 0 1px 3px rgba(255, 107, 107, 0.2);
}

.theme-dark .promo-badge:hover {
  box-shadow: 0 2px 6px rgba(255, 107, 107, 0.3);
}

/* Mobile responsiveness for promo badge */
@media (max-width: 768px) {
  .promo-badge {
    font-size: 11px;
    padding: 5px 8px;
  }
}