/* ==========================================================
   SA STUDIO — Main Stylesheet
   Mobile-first, lightweight, no framework dependency.
   Theme values are injected as CSS custom properties inline
   in <head> (see includes/functions.php: render_theme_css_vars)
   ========================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* Fallback palette. render_theme_css_vars() emits the real tokens inline in
   <head> for both themes; these values only apply if that block is missing,
   and they intentionally mirror the light palette. */
:root {
  --color-primary: #293681;
  --color-secondary: #4274D9;
  --color-accent: #95CCDD;
  --color-bg: #D0E7E6;
  --color-text: var(--color-text);
  --font-family: 'Poppins', sans-serif;
  --radius: 16px;
  --shadow-sm: 0 2px 8px var(--color-shadow);
  --shadow-md: 0 8px 24px var(--color-shadow);
  --transition: 200ms ease;
}

body {
  margin: 0;
  font-family: var(--font-family);
  color: var(--color-text);
  background: var(--color-page);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#main-content {
  flex: 1 0 auto;
}

.site-footer {
  flex-shrink: 0;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .5em; font-weight: 700; }
p { margin: 0 0 1em; }

.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--color-primary);
  color: var(--color-on-primary); padding: 10px 16px; z-index: 1000; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

.container { max-width: 1160px; margin: 0 auto; padding: 0 20px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 26px; border-radius: var(--radius); font-weight: 600; font-size: 15px;
  border: 2px solid transparent; cursor: pointer; transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
  text-align: center;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--color-secondary); color: var(--color-on-primary); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--color-primary); box-shadow: var(--shadow-md); }
.btn-outline { background: transparent; border-color: var(--color-secondary); color: var(--color-heading); }
.btn-outline:hover { background: var(--color-accent-surface); }
.btn-block { width: 100%; }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100; background: var(--color-surface);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--color-border);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; color: var(--color-heading); }
.brand img { width: auto; height: 44px; border-radius: 10px; }

.nav-toggle {
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; background: none; border: none; cursor: pointer;
}
.nav-toggle span { width: 100%; height: 2px; background: var(--color-primary); border-radius: 2px; transition: transform var(--transition), opacity var(--transition); }

.primary-nav {
  display: none; flex-direction: column; gap: 4px; position: absolute; top: 100%; left: 0; right: 0;
  background: var(--color-surface); padding: 12px 20px 20px; box-shadow: var(--shadow-md);
}
.primary-nav.open { display: flex; }
.primary-nav a { padding: 12px 4px; font-weight: 600; border-bottom: 1px solid var(--color-border-soft); }
.primary-nav a.active { color: var(--color-secondary); }
.primary-nav .nav-cta { border-bottom: none; margin-top: 8px; text-align: center; padding-left: 38px; padding-right: 38px; }

@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .primary-nav {
    display: flex;
    position: static; flex-direction: row; align-items: center; max-height: none;
    box-shadow: none; padding: 0; background: transparent; gap: 28px;
  }
  .primary-nav a { border-bottom: none; padding: 6px 0; position: relative; }
  .primary-nav a.active::after, .primary-nav a:hover::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--color-secondary);
  }
  .primary-nav .nav-cta { margin-top: 0; }
}

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(160deg, var(--color-accent-surface) 0%, var(--color-bg) 100%);
  padding: 60px 0 70px; overflow: hidden;
}
.hero-inner { display: flex; flex-direction: column; align-items: center; gap: 48px; }
.hero-content { text-align: center; }
.hero h1 { font-size: clamp(28px, 5vw, 48px); color: var(--color-heading); max-width: 820px; margin: 0 auto 18px; }
.hero p.lead { font-size: 18px; max-width: 640px; margin: 0 auto 32px; color: var(--color-text-body); }
.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.hero-visual { position: relative; width: 100%; max-width: 360px; height: 340px; }

.hero-card {
  position: absolute; display: flex; align-items: flex-start; gap: 12px;
  width: min(240px, 78%); background: var(--color-surface); border-radius: 16px; padding: 14px 16px;
  box-shadow: var(--shadow-md);
}
.hero-card-icon {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800;
}
.hero-card-text strong { display: block; font-size: 14.5px; color: var(--color-heading); margin-bottom: 3px; }
.hero-card-text p { margin: 0; font-size: 12px; line-height: 1.45; color: var(--color-text-dim); }
.hero-card-dot { position: absolute; top: 14px; right: 14px; width: 8px; height: 8px; border-radius: 50%; }
/* Hero card icon tiles. These were inline pastel fills, which would glare as
   bright blocks on the dark page. Moved to classes so each theme can supply
   its own value; the light values are the exact originals. */
.hero-card-icon-bots  { background: #dcfce7; color: #16a34a; }
.hero-card-icon-tools { background: #fef3c7; }
:root[data-theme="dark"] .hero-card-icon-bots  { background: rgba(79,207,121,.14); color: var(--color-success); }
:root[data-theme="dark"] .hero-card-icon-tools { background: rgba(240,184,73,.14); }

.hero-card-servers { top: 0; right: 2%; transform: rotate(4deg); z-index: 3; }
.hero-card-bots { top: 34%; left: 0; transform: rotate(-4deg); z-index: 2; }
.hero-card-tools { bottom: 0; right: 6%; transform: rotate(3deg); z-index: 1; }

.hero-deco { position: absolute; pointer-events: none; }
.hero-star { width: 20px; height: 20px; }
.hero-star-1 { top: 30%; left: 8%; }
.hero-star-2 { bottom: 22%; right: 28%; }
.hero-arrow-1 { top: 1%; left: 1%; width: 60px; height: 80px; }
.hero-arrow-2 { bottom: 1%; right: 1%; width: 60px; height: 80px; }

@media (min-width: 1024px) {
  .hero { padding: 90px 0 100px; }
  .hero-inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 40px; text-align: left; }
  .hero-content { text-align: left; flex: 0 1 520px; }
  .hero h1, .hero p.lead { margin-left: 0; margin-right: 0; }
  .hero-actions { justify-content: flex-start; }
  .hero-visual { flex: 0 0 440px; max-width: 440px; height: 420px; }
  .hero-card { width: 250px; }
  .hero-card-servers { top: 2%; right: 0; }
  .hero-card-bots { top: 38%; left: -2%; }
  .hero-card-tools { bottom: 2%; right: 8%; }
  .hero-arrow-1 { top: -6%; left: -8%; width: 90px; height: 120px; }
  .hero-arrow-2 { bottom: -4%; right: -6%; width: 90px; height: 120px; }
  .hero-star-1 { top: 26%; left: 4%; }
  .hero-star-2 { bottom: 18%; right: 22%; }
}

/* ---------- Sections ---------- */
.section { padding: 70px 0; }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 42px; }
.section-head h2 { font-size: clamp(24px, 4vw, 34px); color: var(--color-heading); }
.section-head p { color: var(--color-text-soft); }
.section-alt { background: var(--color-surface); }

/* ---------- Cards Grid ---------- */
.grid { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 640px)  { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: var(--color-surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
  display: flex; flex-direction: column; border: 1px solid var(--color-border);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.card-thumb { aspect-ratio: 16/9; background: var(--color-accent-surface); overflow: hidden; }
.card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.card-body { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card-body h3 { font-size: 18px; margin-bottom: 2px; }
.card-body p { color: var(--color-text-muted); font-size: 14.5px; margin-bottom: 10px; }
.card-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.tag {
  font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 20px;
  background: var(--color-accent-surface); color: var(--color-accent-on);
}
.status-dot { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.status-dot::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: #999; }
.status-online::before, .status-active::before { background: #2ecc71; }
.status-offline::before, .status-deprecated::before { background: #e74c3c; }
.status-maintenance::before, .status-beta::before { background: #f1c40f; }
.status-development::before { background: #9b59b6; }
.card-footer { margin-top: auto; padding-top: 8px; }

/* ---------- Project Showcase (homepage "Discord Server Design") ---------- */
.project-showcase-viewport {
  background: var(--color-surface); border: 1px solid var(--color-shadow); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.project-showcase-track { display: flex; transition: transform .45s ease; }
.project-slide { flex: 0 0 100%; width: 100%; display: flex; flex-direction: column; }

.project-slide-media { position: relative; aspect-ratio: 16/10; background: var(--color-accent-surface); overflow: hidden; }
.project-slide-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

.project-slide-body { padding: 26px 24px 30px; display: flex; flex-direction: column; gap: 10px; }
.project-slide-body h3 { font-size: 22px; color: var(--color-heading); margin: 0; }
.project-slide-body p { color: var(--color-text-muted); font-size: 15px; line-height: 1.6; margin: 0 0 4px; }
.project-slide-body .btn { align-self: flex-start; margin-top: 4px; }

.project-showcase-controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 22px; }
.project-showcase-arrow {
  display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex-shrink: 0;
  border-radius: 50%; border: 2px solid var(--color-border); background: var(--color-surface); color: var(--color-heading);
  font-size: 18px; cursor: pointer; transition: border-color var(--transition), background var(--transition);
}
.project-showcase-arrow:hover { border-color: var(--color-secondary); background: var(--color-accent-surface); }
.project-showcase-dots { display: flex; align-items: center; gap: 9px; }
.project-showcase-dot {
  width: 9px; height: 9px; border-radius: 50%; border: none; background: var(--color-input-border); cursor: pointer;
  padding: 0; transition: background var(--transition), transform var(--transition);
}
.project-showcase-dot.is-active { background: var(--color-secondary); transform: scale(1.3); }
.project-showcase-arrow:focus-visible, .project-showcase-dot:focus-visible {
  outline: 2px solid var(--color-secondary); outline-offset: 2px;
}

@media (min-width: 900px) {
  .project-slide { flex-direction: row; min-height: 440px; }
  .project-slide-media { aspect-ratio: auto; flex: 0 0 52%; height: 440px; }
  .project-slide-body { flex: 1; justify-content: center; padding: 44px 48px; gap: 14px; }
  .project-slide-body h3 { font-size: 26px; }
  .project-slide-body p { font-size: 15.5px; }
}

/* ---------- Bot Showcase (homepage "Custom Discord Bots") ---------- */
.bot-slide { flex: 0 0 100%; width: 100%; display: flex; flex-direction: column; }

.bot-slide-info { padding: 26px 24px 4px; display: flex; flex-direction: column; gap: 16px; }
.bot-slide-head { display: flex; align-items: center; gap: 14px; }
.bot-slide-icon { width: 56px; height: 56px; border-radius: 14px; object-fit: cover; flex-shrink: 0; background: var(--color-bg); image-rendering: -webkit-optimize-contrast; }
.bot-slide-head h3 { font-size: 21px; color: var(--color-heading); margin: 0 0 4px; }
.bot-status-badge { text-transform: uppercase; letter-spacing: .02em; font-size: 11.5px; }

.bot-slide-desc { color: var(--color-text-muted); font-size: 15px; line-height: 1.6; margin: 0; }

.bot-feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bot-feature-chip {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--color-border); font-size: 13px; font-weight: 600; color: var(--color-heading);
}
.bot-feature-chip svg { flex-shrink: 0; }

.bot-commands { display: flex; flex-direction: column; gap: 8px; }
.bot-commands-label { font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--color-text-faint); }
.bot-command-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.bot-command-pill {
  font-family: 'SFMono-Regular', Consolas, 'Courier New', monospace; font-size: 12.5px; font-weight: 700;
  background: var(--color-bg); color: var(--color-heading); border-radius: 8px; padding: 6px 10px;
}
.bot-command-pill-more { background: transparent; border: 1px dashed var(--color-input-border); color: var(--color-text-faint); }

.bot-slide-media { position: relative; aspect-ratio: 16/10; background: var(--color-accent-surface); overflow: hidden; margin-top: 22px; }
.bot-slide-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.bot-slide-media-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.bot-slide-media-fallback img { position: static; width: 88px; height: 88px; border-radius: 20px; object-fit: cover; }

.bot-slide-actions { display: flex; flex-wrap: wrap; gap: 12px; padding: 22px 24px 26px; }

@media (min-width: 900px) {
  .bot-slide {
    display: grid; grid-template-columns: 46% 1fr; grid-template-rows: 1fr auto; min-height: 460px;
    grid-template-areas: "info media" "actions media";
  }
  .bot-slide-info { grid-area: info; justify-content: center; padding: 44px 40px 20px; }
  .bot-slide-actions { grid-area: actions; padding: 0 40px 44px; }
  .bot-slide-media { grid-area: media; aspect-ratio: auto; height: 100%; margin-top: 0; }
}

/* ---------- Forms ---------- */
.form-group { margin-bottom: 20px; }
label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 14.5px; }
input, textarea, select {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--color-input-border); border-radius: 12px;
  font-family: var(--font-family); font-size: 15px; background: var(--color-input-bg); transition: border-color var(--transition);
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--color-secondary); }
/* Date/time inputs: WebKit gives these an intrinsic content width (from the
   native field text + calendar indicator) that width:100% alone won't shrink,
   because their default min-width resolves to that intrinsic size. On iOS
   Safari that pushes the control past its container. Resetting the native
   appearance and forcing min-width:0 makes them size like every other input. */
input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  /* Removing the native appearance collapses iOS's default control height,
     so restore it explicitly to match the other inputs. */
  min-height: 48px;
  line-height: 1.4;
  background-color: var(--color-input-bg);
}
/* iOS centres the value vertically via its own pseudo-elements; keep the text
   left-aligned and stop the container from stretching. */
input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
  margin: 0;
  min-width: 0;
}
input[type="date"]::-webkit-calendar-picker-indicator { margin-left: auto; flex-shrink: 0; }
input[type="date"]::-webkit-inner-spin-button { display: none; }
textarea { resize: vertical; min-height: 120px; }
.required-mark { color: var(--color-danger-mark); }
.form-hint { font-size: 13px; color: var(--color-text-hint); margin-top: 4px; overflow-wrap: anywhere; word-break: break-word; }
.form-error { color: var(--color-danger-mark); font-size: 13.5px; margin-top: 4px; }
.type-switch { display: flex; gap: 12px; margin-bottom: 30px; }
.type-switch label {
  flex: 1; text-align: center; padding: 18px; border: 2px solid var(--color-border); border-radius: var(--radius);
  cursor: pointer; font-weight: 700; transition: border-color var(--transition), background var(--transition);
}
.type-switch input { display: none; }
.type-switch input:checked + span { color: var(--color-heading); }
.type-switch label:has(input:checked) { border-color: var(--color-secondary); background: var(--color-accent-surface); }

.alert { padding: 14px 18px; border-radius: 12px; margin-bottom: 20px; font-weight: 500; }
.alert-success { background: var(--color-success-bg); color: var(--color-success); border: 1px solid var(--color-success-border); }
.alert-error { background: var(--color-danger-bg); color: var(--color-danger); border: 1px solid var(--color-danger-border); }

/* ---------- CTA band ---------- */
.cta-band { background: var(--color-primary); color: var(--color-on-primary); text-align: center; padding: 60px 0; }
.cta-band h2 { color: var(--color-on-primary); }
.cta-band p { color: rgba(255,255,255,.85); }

/* ---------- Footer ---------- */
.site-footer { background: var(--color-footer-bg); color: var(--color-footer-text); padding: 46px 0 26px; }
.footer-inner { display: flex; flex-direction: column; gap: 22px; align-items: center; text-align: center; }
.footer-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; color: #fff; }
.footer-brand img { width: auto; height: 36px; border-radius: 8px; }
.footer-brand p { margin: 0; }
.footer-nav { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.footer-nav a:hover { color: #fff; }
.footer-legal { font-size: 13px; margin-top: -8px; }
.footer-legal a { color: var(--color-footer-link); }
.footer-copy { font-size: 13px; color: var(--color-footer-copy); text-align: center; }
@media (min-width: 800px) { .footer-inner { flex-direction: row; justify-content: space-between; text-align: left; } }

/* ---------- Utility / animation ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Gallery lightbox (tools/servers detail) ---------- */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); gap: 12px; margin: 18px 0; }
.gallery img { border-radius: 10px; aspect-ratio: 1/1; object-fit: cover; cursor: zoom-in; }

.lightbox {
  position: fixed; inset: 0; z-index: 999; display: none;
  align-items: center; justify-content: center;
  background: rgba(10, 12, 25, .92); padding: 20px;
  overscroll-behavior: contain;
}
.lightbox.is-open { display: flex; }
.lightbox-figure { margin: 0; display: flex; align-items: center; justify-content: center; max-width: 100%; }
.lightbox-img { max-width: 100%; max-height: 82vh; border-radius: 12px; object-fit: contain; }
.lightbox-close, .lightbox-nav {
  position: absolute; background: rgba(255,255,255,.12); color: #fff; border: none; cursor: pointer;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  transition: background var(--transition);
  -webkit-tap-highlight-color: transparent;
}
.lightbox-close:hover, .lightbox-nav:hover { background: rgba(255,255,255,.25); }
.lightbox-close:focus-visible, .lightbox-nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lightbox-close { top: 16px; right: 16px; width: 44px; height: 44px; font-size: 28px; line-height: 1; }
.lightbox-nav { top: 50%; transform: translateY(-50%); width: 46px; height: 46px; font-size: 30px; line-height: 1; padding-bottom: 4px; }
.lightbox-nav[hidden] { display: none; }
.lightbox-prev { left: 10px; }
.lightbox-next { right: 10px; }
.lightbox-counter {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,.85); font-size: 13.5px; font-weight: 600; letter-spacing: .04em;
}
@media (min-width: 700px) {
  .lightbox { padding: 40px 76px; }
  .lightbox-prev { left: 20px; }
  .lightbox-next { right: 20px; }
  .lightbox-img { max-height: 86vh; }
}

/* ---------- Portfolio pages (servers.php / bots.php) ---------- */
.featured-project, .featured-bot {
  background: var(--color-surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border-soft); margin-bottom: 48px;
}
.featured-visual { aspect-ratio: 21/9; background: var(--color-accent-surface); position: relative; }
.featured-visual img { width: 100%; height: 100%; object-fit: cover; }
.featured-badge {
  position: absolute; top: 16px; left: 16px; background: var(--color-primary); color: var(--color-on-primary);
  font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 20px; box-shadow: var(--shadow-sm);
}
.featured-body { padding: 26px 24px; }
@media (min-width: 640px) { .featured-body { padding: 36px; } }
.featured-body .card-meta { margin-bottom: 14px; }
.featured-body h2 { font-size: clamp(22px, 3.4vw, 32px); color: var(--color-heading); margin-bottom: 12px; }
.featured-body p.desc { color: var(--color-text-soft); font-size: 16px; max-width: 680px; }
.featured-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 24px; }
.featured-tags .tag { background: var(--color-surface-alt); color: var(--color-text-body); border: 1px solid var(--color-border-soft); }

/* Server grid */
.portfolio-grid { display: grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 820px) { .portfolio-grid { grid-template-columns: repeat(2, 1fr); } }
.portfolio-card .card-body h3 { font-size: 19px; }
/* Card descriptions: clamp to ~4 lines visually (never mid-word, never a
   PHP-side character cut). The full text is always in the DOM, so it's
   readable by search engines and screen readers, and it un-clamps when the
   "View Project" panel below is opened. */
.portfolio-card .card-desc {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
  transition: none;
}
.portfolio-card:has(.portfolio-details[open]) .card-desc {
  -webkit-line-clamp: unset;
  line-clamp: unset;
  display: block;
  overflow: visible;
}
/* Long unbroken strings (URLs, IDs) must never widen the card on mobile */
.portfolio-card .card-body h3,
.featured-body h2,
.featured-body p.desc { overflow-wrap: anywhere; word-break: break-word; }
.tech-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.tech-tags .tag { background: var(--color-surface-alt); color: var(--color-text-body); border: 1px solid var(--color-border-soft); font-size: 11.5px; padding: 3px 9px; }

/* Progressive-disclosure "View Project" / "View Bot" panels —
   native <details>/<summary>, no JS required, so it degrades gracefully. */
.portfolio-details { margin-top: 12px; }
.portfolio-details summary { list-style: none; cursor: pointer; user-select: none; width: fit-content; }
.portfolio-details summary::-webkit-details-marker { display: none; }
.portfolio-details summary::marker { content: ''; }
.portfolio-details[open] summary { margin-bottom: 4px; }
/* Collapsed shows "View Project", expanded shows "Show Less" — same control,
   handled purely in CSS so it works without JS. */
.portfolio-details summary .label-less { display: none; }
.portfolio-details[open] summary .label-more { display: none; }
.portfolio-details[open] summary .label-less { display: inline; }

/* Expanded project body — gallery reads as part of the project, not
   detached thumbnails. */
.portfolio-expanded { margin-top: 18px; }
.portfolio-client { margin-bottom: 12px; color: var(--color-text-body); font-size: 14.5px; }
.portfolio-banner { width: 100%; border-radius: 12px; margin-bottom: 14px; }
.portfolio-gallery {
  display: grid; gap: 12px; margin-top: 18px; width: 100%;
  grid-template-columns: 1fr;
}
@media (min-width: 560px) { .portfolio-gallery { grid-template-columns: repeat(2, 1fr); } }
/* Cards sit two-up on desktop, so their galleries stay at 2 columns.
   The featured project spans the full container and can take 3. */
.featured-body .portfolio-gallery { margin-top: 22px; }
@media (min-width: 1000px) { .featured-body .portfolio-gallery { grid-template-columns: repeat(3, 1fr); } }
.portfolio-gallery-item {
  display: block; border-radius: 12px; overflow: hidden; background: var(--color-accent-surface);
  aspect-ratio: 16/9; box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.portfolio-gallery-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.portfolio-gallery-item img { width: 100%; height: 100%; object-fit: cover; }

/* Featured bot header */
.featured-head { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.featured-bot-icon { width: 56px; height: 56px; border-radius: 16px; object-fit: cover; flex-shrink: 0; }
.featured-bot-icon-fallback {
  display: flex; align-items: center; justify-content: center; color: var(--color-on-primary); font-weight: 800; font-size: 22px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
}
.featured-head h2 { font-size: clamp(22px, 3.2vw, 28px); color: var(--color-heading); margin: 0 0 4px; }

.featured-panels { display: grid; gap: 24px; grid-template-columns: 1fr; margin: 6px 0 22px; }
@media (min-width: 720px) { .featured-panels { grid-template-columns: 1fr 1fr; } }
.featured-panel h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-faint); margin-bottom: 12px; }
.feature-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.feature-list li { display: flex; gap: 8px; align-items: flex-start; font-size: 14.5px; color: var(--color-text-body); }
.feature-list li::before { content: '✓'; color: var(--color-secondary); font-weight: 700; flex-shrink: 0; }
.command-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.command-list li { font-size: 14px; color: var(--color-text-muted); }
.command-list code {
  background: var(--color-accent-surface); color: var(--color-accent-on); padding: 3px 9px; border-radius: 8px;
  font-weight: 700; font-family: var(--font-family); font-size: 13px;
}
.featured-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.featured-extra { margin-top: 18px; }

/* Bot list */
.bot-list { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .bot-list { grid-template-columns: repeat(2, 1fr); } }
.bot-card-head { display: flex; align-items: center; gap: 12px; }
.bot-card-icon { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; flex-shrink: 0; }
.bot-card-icon-fallback {
  display: flex; align-items: center; justify-content: center; color: var(--color-on-primary); font-weight: 800; font-size: 16px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
}
.bot-card-head-text h3 { margin-bottom: 2px; font-size: 18px; }
.mini-feature-list { margin: 2px 0 0; }
.mini-feature-list li { font-size: 13.5px; }
.mini-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 2px; }
.mini-tags .tag { background: var(--color-surface-alt); color: var(--color-text-body); border: 1px solid var(--color-border-soft); font-size: 11.5px; padding: 3px 9px; font-family: var(--mono, var(--font-family)); }
.card-thumb-sm { aspect-ratio: 16/8; border-radius: 12px; overflow: hidden; margin-top: 6px; background: var(--color-accent-surface); }
.card-thumb-sm img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Order page ---------- */
.order-layout { display: grid; gap: 24px; grid-template-columns: 1fr; align-items: start; }
/* Mobile order: project type -> form -> what happens next */
.order-type-card  { order: 1; }
.order-main       { order: 2; min-width: 0; }
.order-steps-card { order: 3; }
@media (min-width: 940px) {
  .order-layout {
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    /* The tall form spans both left-hand rows. With only two rows, the grid
       shares the form's extra height between them, which pushed the steps
       card far down the page. The third '.' row soaks up all the slack
       instead, so both left cards stay stacked at the top. */
    grid-template-areas: "type main" "steps main" ". main";
    grid-template-rows: auto auto 1fr;
    gap: 24px 30px;
  }
  .order-type-card  { grid-area: type; }
  .order-steps-card { grid-area: steps; }
  .order-main       { grid-area: main; }
}
.order-card {
  background: var(--color-surface); border-radius: var(--radius); padding: 24px;
  box-shadow: var(--shadow-sm); border: 1px solid var(--color-border-soft);
}
@media (min-width: 640px) { .order-card { padding: 28px; } }
.order-card-title { font-size: 17px; color: var(--color-heading); margin-bottom: 16px; }

/* Project type selector */
.type-cards { display: grid; gap: 12px; grid-template-columns: 1fr; }
.type-card {
  display: block; cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.type-card input { position: absolute; opacity: 0; width: 0; height: 0; }
.type-card-inner {
  display: block; padding: 18px; border: 2px solid var(--color-border); border-radius: var(--radius);
  transition: border-color 90ms linear, background-color 90ms linear, box-shadow 90ms linear;
}
@media (hover: hover) {
  .type-card:hover .type-card-inner { border-color: var(--color-accent); }
}
.type-card:active .type-card-inner { border-color: var(--color-secondary); background: var(--color-primary-tint); }
.type-card input:checked + .type-card-inner {
  border-color: var(--color-secondary); background: var(--color-primary-tint-soft); box-shadow: var(--shadow-sm);
}
.type-card input:focus-visible + .type-card-inner { outline: 2px solid var(--color-secondary); outline-offset: 2px; }
.type-card-icon { font-size: 24px; display: block; margin-bottom: 6px; line-height: 1; }
.type-card-name { display: block; font-weight: 700; color: var(--color-heading); margin-bottom: 4px; }
.type-card-desc { display: block; font-size: 13.5px; color: var(--color-text-muted); line-height: 1.5; }

/* What happens next */
.order-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.order-steps li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; color: var(--color-text-muted); }
.order-steps strong { color: var(--color-text); }
.order-step-num {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  background: var(--color-accent-surface); color: var(--color-accent-on);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px;
}
.order-steps-note { font-size: 13px; color: var(--color-text-faint); margin: 18px 0 0; }
.order-steps-note a { color: var(--color-secondary); font-weight: 600; }

/* Field sections */
.order-fieldset { border: none; margin: 0 0 8px; padding: 0; }
.order-legend {
  font-size: 12.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--color-text-faint); padding: 0; margin-bottom: 16px; width: 100%;
  border-bottom: 1px solid var(--color-shadow); padding-bottom: 10px;
}

/* Option chips (short select lists) */
.chip-group { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  cursor: pointer;
  /* Opts out of double-tap-to-zoom, so the browser fires the tap immediately
     instead of waiting to see if a second tap is coming. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip span {
  display: inline-block; padding: 9px 16px; border-radius: 30px; font-size: 14px; font-weight: 600;
  border: 1.5px solid var(--color-input-border); color: var(--color-text-muted); background: var(--color-surface);
  /* Deliberately short: the 200ms site transition made the fill fade in
     slowly enough to read as input lag on touch. */
  transition: border-color 90ms linear, background-color 90ms linear, color 90ms linear;
}
/* Hover only where hovering is real — on touch it sticks after the tap. */
@media (hover: hover) {
  .chip:hover span { border-color: var(--color-accent); }
}
/* Immediate feedback on finger-down, before the change event resolves. */
.chip:active span { border-color: var(--color-secondary); background: var(--color-primary-tint); }
.chip input:checked + span { border-color: var(--color-secondary); background: var(--color-secondary); color: var(--color-on-primary); }
.chip input:focus-visible + span { outline: 2px solid var(--color-secondary); outline-offset: 2px; }

/* File upload area */
.upload-zone {
  position: relative; border: 2px dashed var(--color-input-border); border-radius: var(--radius);
  padding: 26px 18px; text-align: center; background: var(--color-surface-subtle);
  transition: border-color var(--transition), background var(--transition);
}
.upload-zone:hover, .upload-zone.is-dragover { border-color: var(--color-secondary); background: var(--color-primary-tint-soft); }
.upload-zone.has-file { border-style: solid; border-color: var(--color-secondary); background: var(--color-primary-tint-soft); }
.upload-input {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; padding: 0; border: none;
}
.upload-zone.has-file .upload-input { pointer-events: none; }
.upload-icon {
  display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0 auto 10px;
  border-radius: 50%; background: var(--color-accent-surface); color: var(--color-accent-on); font-size: 18px; font-weight: 700;
}
.upload-text { display: block; font-weight: 600; color: var(--color-heading); font-size: 14.5px; }
.upload-hint { display: block; font-size: 12.5px; color: var(--color-text-faint); margin-top: 4px; }
.upload-selected { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.upload-file-name { font-size: 14px; font-weight: 600; color: var(--color-heading); overflow-wrap: anywhere; }
.upload-remove {
  position: relative; z-index: 2; background: none; border: none; cursor: pointer; padding: 6px 10px;
  color: var(--color-danger-mark); font-weight: 600; font-size: 13px; font-family: var(--font-family); border-radius: 8px;
}
.upload-remove:hover { background: var(--color-danger-bg); }

/* Success state */
.order-success {
  max-width: 620px; margin: 0 auto; text-align: center; background: var(--color-surface);
  border-radius: var(--radius); padding: 40px 24px; box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border-soft);
}
@media (min-width: 640px) { .order-success { padding: 52px 44px; } }
.order-success-icon {
  width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 50%;
  background: var(--color-success-bg); color: var(--color-success); font-size: 32px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.order-success h1 { font-size: clamp(24px, 4vw, 32px); color: var(--color-heading); }
.order-success-lead { color: var(--color-text-soft); font-size: 16.5px; }
.order-success p { color: var(--color-text-muted); font-size: 15px; }
.order-ref-box {
  background: var(--color-page); border: 1px dashed var(--color-accent-surface); border-radius: var(--radius);
  padding: 18px; margin: 26px 0;
}
.order-ref-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--color-text-faint); margin-bottom: 6px; }
.order-ref-value { font-size: clamp(18px, 3.6vw, 23px); color: var(--color-heading); letter-spacing: .04em; overflow-wrap: anywhere; }
.order-success-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }

/* ---------- Empty state ---------- */
.empty-state { text-align: center; padding: 60px 20px; color: var(--color-text-hint); }

/* ---------- Tool Showcase (homepage "Free Tools") ---------- */
.tool-showcase { margin-top: 4px; }

/* Compact tab strip — touch devices & narrow screens */
.tool-showcase-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.tool-showcase-tab {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  flex: 1 1 calc(50% - 4px); padding: 11px 10px; border-radius: 12px; border: 2px solid var(--color-border);
  background: var(--color-surface); font-family: inherit; font-weight: 600; font-size: 13.5px; color: var(--color-heading);
  cursor: pointer; transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.tool-showcase-tab img { width: 16px; height: 16px; flex-shrink: 0; }
.tool-showcase-tab:hover { border-color: var(--color-secondary); }
.tool-showcase-tab.is-active { border-color: var(--color-secondary); background: var(--color-secondary); color: var(--color-on-primary); }
.tool-showcase-tab.is-active img { filter: brightness(0) invert(1); }

.tool-showcase-body { display: flex; flex-direction: column; }

/* Full descriptive selector list — desktop only */
.tool-showcase-list { display: none; }
.tool-showcase-item {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left;
  padding: 16px 18px; border: none; border-bottom: 1px solid var(--color-border-soft);
  background: transparent; font-family: inherit; cursor: pointer; transition: background var(--transition);
}
.tool-showcase-list .tool-showcase-item:last-child { border-bottom: none; }
.tool-showcase-item:hover { background: var(--color-hover-surface); }
.tool-showcase-item.is-active { background: var(--color-accent-surface); }
.tool-showcase-item-icon {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; background: var(--color-bg);
  display: flex; align-items: center; justify-content: center;
}
.tool-showcase-item.is-active .tool-showcase-item-icon { background: var(--color-surface); }
.tool-showcase-item-icon img { width: 20px; height: 20px; }

/* Selector icons in dark mode.
   The icon files have SA navy (#293681) baked into their paths, so CSS colour
   cannot reach inside an <img>. In dark the image is hidden and the same file
   is re-drawn as a mask on a pseudo-element, which lets the shape take a token
   colour. Light mode still renders the original <img> untouched.
   The tile background is deliberately left alone — only the glyph changes, so
   the selector stays neutral rather than becoming a blue card. */
:root[data-theme="dark"] .tool-showcase-item-icon img { display: none; }
:root[data-theme="dark"] .tool-showcase-item-icon::after {
  content: ""; display: block; width: 20px; height: 20px;
  background-color: var(--color-secondary);
  -webkit-mask: var(--tool-icon) center / 20px 20px no-repeat;
          mask: var(--tool-icon) center / 20px 20px no-repeat;
  transition: background-color var(--transition);
}
:root[data-theme="dark"] .tool-showcase-item:hover .tool-showcase-item-icon::after,
:root[data-theme="dark"] .tool-showcase-item.is-active .tool-showcase-item-icon::after {
  background-color: var(--color-accent);
}
.tool-showcase-item-text { display: flex; flex-direction: column; gap: 3px; }
.tool-showcase-item-text strong { font-size: 15px; color: var(--color-heading); }
.tool-showcase-item-text small { font-size: 12.5px; color: var(--color-text-muted); line-height: 1.4; }

.tool-showcase-tab:focus-visible, .tool-showcase-item:focus-visible {
  outline: 2px solid var(--color-secondary); outline-offset: 2px;
}

/* Visual panel — standalone card on mobile, right column on desktop */
.tool-showcase-visual {
  background: var(--color-surface); border: 1px solid var(--color-shadow); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 22px; display: flex; flex-direction: column; gap: 16px;
}
.tool-showcase-visual-head { display: flex; align-items: flex-start; gap: 12px; }
.tool-showcase-visual-head img { width: 24px; height: 24px; flex-shrink: 0; margin-top: 2px; }
.tool-showcase-visual-icon { display: inline-flex; flex-shrink: 0; margin-top: 2px; }
/* Detail-panel icon. Same reasoning as the selector icons: the SVG files carry
   SA navy internally, so in dark the <img> is hidden and the file is re-drawn
   as a mask that can take a token colour. Light renders the <img> untouched. */
:root[data-theme="dark"] .tool-showcase-visual-icon img { display: none; }
:root[data-theme="dark"] .tool-showcase-visual-icon::after {
  content: ""; display: block; width: 24px; height: 24px;
  background-color: var(--color-accent);
  -webkit-mask: var(--tool-icon) center / 24px 24px no-repeat;
          mask: var(--tool-icon) center / 24px 24px no-repeat;
}
.tool-showcase-visual-head strong { display: block; font-size: 17px; color: var(--color-heading); margin-bottom: 3px; }
.tool-showcase-visual-head p { margin: 0; font-size: 13.5px; color: var(--color-text-muted); line-height: 1.5; }

.tool-showcase-art { position: relative; width: 100%; max-width: 320px; aspect-ratio: 340 / 280; margin: 0 auto; }
.tool-showcase-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  opacity: 0; transform: translateY(6px); transition: opacity .22s ease, transform .22s ease; pointer-events: none;
}
.tool-showcase-img.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; }

.tool-showcase-open { align-self: flex-start; }

@media (min-width: 900px) {
  .tool-showcase-tabs { display: none; }
  .tool-showcase-body {
    display: grid; grid-template-columns: 300px 1fr; background: var(--color-surface);
    border: 1px solid var(--color-shadow); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden;
  }
  .tool-showcase-list { display: flex; flex-direction: column; border-right: 1px solid var(--color-shadow); }
  .tool-showcase-visual { border: none; border-radius: 0; box-shadow: none; padding: 30px 34px; justify-content: center; }
  .tool-showcase-art { max-width: 360px; }
}

/* ---------- Tool Usage (homepage) ---------- */
.tool-usage-card { max-width: 640px; margin: 0 auto; padding: 8px 22px 6px; }
.tool-usage-card-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  padding: 18px 0 16px; border-bottom: 1px solid var(--color-border-soft);
}
.tool-usage-total { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tool-usage-total-num {
  font-size: 30px; font-weight: 800; color: var(--color-heading);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.tool-usage-total-label { font-size: 12.5px; font-weight: 600; color: var(--color-text-dim); }
.tool-usage-live {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  color: var(--color-success); flex-shrink: 0; padding-bottom: 3px;
}
.tool-usage-live::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%; background: #2ecc71; flex-shrink: 0;
  animation: tool-usage-pulse 1.8s ease-in-out infinite;
}
@keyframes tool-usage-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(46,204,113,.5); }
  50% { box-shadow: 0 0 0 6px rgba(46,204,113,0); }
}
.tool-usage-list { display: flex; flex-direction: column; }
.tool-usage-row { padding: 16px 0; border-top: 1px solid var(--color-border-soft); }
.tool-usage-row:first-child { border-top: none; }
.tool-usage-row-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.tool-usage-name { font-weight: 600; font-size: 15px; }
.tool-usage-count {
  font-size: 18px; font-weight: 800; color: var(--color-heading);
  font-variant-numeric: tabular-nums; line-height: 1.1; flex-shrink: 0;
}
.tool-usage-track { height: 4px; border-radius: 4px; background: var(--color-border-soft); overflow: hidden; }
.tool-usage-bar {
  height: 100%; border-radius: 4px; background: var(--color-secondary);
  transition: width .6s ease;
}

/* ---------- Legal content (privacy, terms, refunds, cookies) ---------- */
.legal-content { max-width: 780px; margin: 0 auto; }
.legal-content .legal-updated { color: var(--color-text-hint); font-size: 14px; margin-bottom: 34px; }
.legal-content h2 { color: var(--color-heading); font-size: 22px; margin: 38px 0 14px; }
.legal-content h2:first-of-type { margin-top: 0; }
.legal-content h3 { color: var(--color-heading); font-size: 17px; margin: 22px 0 10px; }
.legal-content p { color: var(--color-text-body); line-height: 1.7; margin-bottom: 14px; }
.legal-content ul, .legal-content ol { color: var(--color-text-body); line-height: 1.7; margin: 0 0 14px 22px; }
.legal-content li { margin-bottom: 6px; }
.legal-content a { color: var(--color-secondary); text-decoration: underline; }
.legal-content strong { color: var(--color-text); }
.legal-content .legal-note {
  background: var(--color-accent-surface); border-radius: var(--radius); padding: 16px 20px;
  margin: 24px 0; font-size: 14.5px; color: var(--color-text);
}

/* ---------- Theme toggle (Light / Dark) ---------- */
/* A small utility icon, roughly the weight of one nav item. It sits INSIDE
   .primary-nav rather than as its own header child, so .header-inner keeps the
   two flex children (brand + nav) it had before dark mode existed and
   space-between pins the nav hard right exactly as it always did. The Order
   CTA stays the last element, so the right edge of the bar is unchanged. */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; flex-shrink: 0;
  border: 1px solid var(--color-border); border-radius: 10px;
  background: transparent; color: var(--color-text-muted);
  cursor: pointer; line-height: 0;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.theme-toggle:hover { background: var(--color-surface-alt); color: var(--color-text); border-color: var(--color-border-strong); }
.theme-toggle:focus-visible { outline: 2px solid var(--color-secondary); outline-offset: 2px; }
.theme-toggle-icon { display: inline-flex; }

/* Mobile menu row: "Appearance" on the left, the same button on the right. */
.theme-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 4px 4px; margin-top: 4px; border-top: 1px solid var(--color-border);
}
.theme-row-label { font-weight: 600; color: var(--color-text-muted); font-size: 15px; }

/* Exactly one control is visible at any width: the icon belongs to the desktop
   bar, the row belongs to the open mobile menu. */
.primary-nav > .theme-toggle { display: none; }
.nav-toggle { flex-shrink: 0; }
@media (min-width: 900px) {
  .primary-nav > .theme-toggle { display: inline-flex; }
  .primary-nav .theme-row { display: none; }
}