/* ============================================================
   ClaudeTemplates.NET — Every pixel placed by AI
   Synthwave noir · glass morphism · ambient glow
   ============================================================ */

/* Default: Warm Amber */
:root {
  --ct-bg: #0a0908;
  --ct-surface: #13120f;
  --ct-surface-hover: #1c1a16;
  --ct-border: rgba(255,149,0,.05);
  --ct-text: #e8e4de;
  --ct-text-soft: #7a7060;
  --ct-accent: #ff9500;
  --ct-accent-glow: rgba(255,149,0,.08);
  --ct-cyan: #ffb347;
  --ct-pink: #ff9500;
  --ct-green: #10b981;
  --ct-gold: #c8a96e;
  --ct-btn-text: #0a0908;
  --ct-btn-hover: #ffaa33;
  --ct-light-accent: #e07800;
  --ct-light-accent-dark: #cc6a00;
}

/* ─── Color Schemes ────────────────────────────────────── */
body.ct-scheme-pink {
  --ct-bg: #08090d; --ct-surface: #0f1015; --ct-surface-hover: #17181f;
  --ct-border: rgba(255,51,102,.06); --ct-text: #e2e8f0; --ct-text-soft: #64748b;
  --ct-accent: #ff3366; --ct-accent-glow: rgba(255,51,102,.1);
  --ct-cyan: #ff6b99; --ct-pink: #ff3366;
  --ct-btn-text: #fff; --ct-btn-hover: #e62e5c;
  --ct-light-accent: #e62e5c; --ct-light-accent-dark: #cc2255;
}
body.ct-scheme-teal {
  --ct-bg: #06080a; --ct-surface: #0c0f13; --ct-surface-hover: #141820;
  --ct-border: rgba(0,229,160,.05); --ct-text: #e0e7ee; --ct-text-soft: #5a6a7a;
  --ct-accent: #00e5a0; --ct-accent-glow: rgba(0,229,160,.08);
  --ct-cyan: #00c48c; --ct-pink: #00e5a0;
  --ct-btn-text: #06080a; --ct-btn-hover: #00ffb3;
  --ct-light-accent: #00b37d; --ct-light-accent-dark: #009966;
}
body.ct-scheme-amber {
  --ct-bg: #0a0908; --ct-surface: #13120f; --ct-surface-hover: #1c1a16;
  --ct-border: rgba(255,149,0,.05); --ct-text: #e8e4de; --ct-text-soft: #7a7060;
  --ct-accent: #ff9500; --ct-accent-glow: rgba(255,149,0,.08);
  --ct-cyan: #ffb347; --ct-pink: #ff9500;
  --ct-btn-text: #0a0908; --ct-btn-hover: #ffaa33;
  --ct-light-accent: #e07800; --ct-light-accent-dark: #cc6a00;
}
body.ct-scheme-cream {
  --ct-bg: #08090d; --ct-surface: #111318; --ct-surface-hover: #191b22;
  --ct-border: rgba(240,230,211,.06); --ct-text: #e8e4de; --ct-text-soft: #6b6e76;
  --ct-accent: #f0e6d3; --ct-accent-glow: rgba(240,230,211,.08);
  --ct-cyan: #a89880; --ct-pink: #f0e6d3;
  --ct-btn-text: #08090d; --ct-btn-hover: #fff;
  --ct-light-accent: #2a2520; --ct-light-accent-dark: #1a1510;
}
body.ct-scheme-ice {
  --ct-bg: #070a0d; --ct-surface: #0d1117; --ct-surface-hover: #151b24;
  --ct-border: rgba(255,255,255,.05); --ct-text: #e0e8f0; --ct-text-soft: #5a6e82;
  --ct-accent: #00d4ff; --ct-accent-glow: rgba(255,255,255,.08);
  --ct-cyan: #4de0ff; --ct-pink: #00d4ff;
  --ct-btn-text: #070a0d; --ct-btn-hover: #33e0ff;
  --ct-light-accent: #0099bb; --ct-light-accent-dark: #007799;
}

/* ─── Body ─────────────────────────────────────────────── */
body.bf {
  background: var(--ct-bg) !important;
  color: var(--ct-text) !important;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -20%, var(--ct-accent-glow), transparent),
    radial-gradient(ellipse 60% 40% at 80% 60%, rgba(255,255,255,.02), transparent) !important;
  background-attachment: fixed !important;
}

/* ─── Topbar ───────────────────────────────────────────── */
.bf-topbar {
  background: linear-gradient(90deg, rgba(255,255,255,.03), var(--ct-accent-glow), rgba(255,255,255,.03)) !important;
  border-bottom: 1px solid rgba(255,255,255,.1) !important;
  padding: .4rem 0 !important;
}
.bf-topbar-link {
  opacity: .55;
  transition: opacity .2s, color .2s, text-shadow .2s !important;
  font-size: .7rem !important;
  letter-spacing: .02em !important;
  color: var(--ct-text-soft) !important;
}
.bf-topbar-link:hover {
  opacity: 1 !important;
  text-shadow: 0 0 12px rgba(255,255,255,.4) !important;
}
.bf-topbar-active {
  opacity: .9 !important;
  color: var(--ct-accent) !important;
}

/* ─── Header — frosted glass ───────────────────────────── */
.bf-header {
  background: rgba(6,7,11,.85) !important;
  backdrop-filter: blur(24px) saturate(1.2) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 1px 30px rgba(255,255,255,.03), inset 0 -1px 0 rgba(255,255,255,.02) !important;
}

/* ─── Logo ─────────────────────────────────────────────── */
.bf-logo-label {
  background: linear-gradient(135deg, var(--ct-accent), var(--ct-cyan)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
}
.bf-logo:hover .bf-logo-label {
  filter: brightness(1.3);
}
.bf-logo:hover { text-decoration: none !important; border-bottom: none !important; }

/* ─── Theme toggle button ──────────────────────────────── */
.ct-theme-toggle {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: .5rem;
  padding: .45rem;
  cursor: pointer;
  color: var(--ct-text-soft);
  transition: all .2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ct-theme-toggle:hover {
  color: var(--ct-accent);
  border-color: rgba(255,255,255,.25);
  background: rgba(255,255,255,.08);
}
/* ─── Color scheme picker ──────────────────────────────── */
.ct-scheme-wrap {
  position: relative;
  margin-right: .4rem;
  margin-left: auto;
}
.ct-scheme-btn {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: .5rem;
  padding: .45rem;
  cursor: pointer;
  color: var(--ct-text-soft);
  transition: all .2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ct-scheme-btn:hover {
  color: var(--ct-accent);
  border-color: var(--ct-accent);
  background: rgba(255,255,255,.08);
}
.ct-scheme-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + .5rem);
  right: 0;
  background: var(--ct-surface);
  border: 1px solid var(--ct-border);
  border-radius: .5rem;
  padding: .5rem;
  gap: .4rem;
  flex-wrap: wrap;
  width: 110px;
  justify-content: center;
  box-shadow: 0 8px 30px rgba(0,0,0,.4);
  z-index: 100;
}
.ct-scheme-dropdown.is-open {
  display: flex;
}
.ct-scheme-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .2s, border-color .2s;
  padding: 0;
  background: none;
}
.ct-scheme-dot:hover {
  transform: scale(1.2);
}
.ct-scheme-dot.active {
  border-color: rgba(255,255,255,.6);
}
.ct-scheme-dot[data-scheme="pink"] { background: #ff3366; }
.ct-scheme-dot[data-scheme="teal"] { background: #00e5a0; }
.ct-scheme-dot[data-scheme="amber"] { background: #ff9500; }
.ct-scheme-dot[data-scheme="ice"] { background: #00d4ff; }
.ct-scheme-dot[data-scheme="cream"] { background: #f0e6d3; }
body.ct-light .ct-scheme-btn {
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.08);
  color: #64748b;
}
body.ct-light .ct-scheme-btn:hover {
  color: var(--ct-accent);
  border-color: var(--ct-accent);
}
body.ct-light .ct-scheme-dropdown {
  background: #fff;
  border-color: rgba(0,0,0,.08);
  box-shadow: 0 8px 30px rgba(0,0,0,.12);
}
body.ct-light .ct-scheme-dot.active {
  border-color: rgba(0,0,0,.4);
}

/* Show sun in dark mode, moon in light mode */
.ct-icon-moon { display: none; }
.ct-icon-sun { display: block; }
body.ct-light .ct-icon-moon { display: block; }
body.ct-light .ct-icon-sun { display: none; }
.bf-logo-site {
  color: var(--ct-text-soft) !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  font-size: .55em !important;
  text-transform: uppercase !important;
  opacity: .5;
  border: 1px solid rgba(255,255,255,.15);
  padding: .1em .45em;
  border-radius: .2rem;
  transition: opacity .3s, border-color .3s;
}
.bf-logo:hover .bf-logo-site {
  opacity: .8;
  border-color: rgba(255,255,255,.35);
}

/* ─── Nav links ────────────────────────────────────────── */
.bf-nav .nav-item > a,
.bf-nav .mod-menu__toggle-sub {
  color: var(--ct-text-soft) !important;
  transition: color .2s, text-shadow .2s !important;
}
.bf-nav .nav-item > a:hover,
.bf-nav .mod-menu__toggle-sub:hover {
  color: var(--ct-text) !important;
  text-shadow: 0 0 16px rgba(255,255,255,.2) !important;
}
.bf-nav .nav-item.active > a,
.bf-nav .nav-item.current > a {
  color: var(--ct-accent) !important;
  background: none !important;
  font-weight: 600;
  text-shadow: 0 0 20px rgba(255,255,255,.3) !important;
}

/* ─── Hamburger ────────────────────────────────────────── */
.bf-hamburger span {
  background: var(--ct-text-soft) !important;
  transition: background .2s !important;
}
.bf-hamburger:hover span {
  background: var(--ct-accent) !important;
}

/* ─── Hero ─────────────────────────────────────────────── */
.ct-hero {
  text-align: center;
  padding: 6rem 0 3rem;
  position: relative;
  overflow: visible;
}
.ct-hero::before {
  content: '';
  position: absolute;
  top: -40%; left: 50%;
  transform: translateX(-50%);
  width: 900px; height: 600px;
  background:
    radial-gradient(ellipse at 30% 50%, var(--ct-accent-glow) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 50%, rgba(255,255,255,.04) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
  filter: blur(40px);
}
.ct-hero::after {
  content: '';
  position: absolute;
  top: 20%; left: 50%;
  transform: translateX(-50%);
  width: 400px; height: 300px;
  background: radial-gradient(ellipse, var(--ct-accent-glow) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  filter: blur(60px);
}
.ct-hero h1 {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.05;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
  letter-spacing: -.02em;
}
.ct-hero .ct-gradient-text {
  background: linear-gradient(135deg, var(--ct-accent), var(--ct-cyan), var(--ct-accent));
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-shift 6s ease infinite;
}
@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.ct-hero p {
  font-size: 1.15rem;
  color: var(--ct-text-soft);
  max-width: 520px;
  margin: 0 auto 2.5rem;
  line-height: 1.8;
  position: relative;
  z-index: 1;
}

/* ─── CTA Buttons ──────────────────────────────────────── */
.ct-hero-cta {
  display: flex;
  gap: .75rem;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.ct-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1.75rem;
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none !important;
  border-radius: .5rem;
  transition: all .25s cubic-bezier(.4,0,.2,1);
  cursor: pointer;
  position: relative;
}
.ct-btn-primary {
  background: var(--ct-accent);
  color: var(--ct-btn-text, #fff) !important;
  font-weight: 700 !important;
  border: 1px solid var(--ct-accent);
  box-shadow: 0 0 24px var(--ct-accent-glow);
}
.ct-btn-primary:hover {
  background: var(--ct-btn-hover, var(--ct-accent));
  box-shadow: 0 0 36px var(--ct-accent-glow);
  transform: translateY(-1px);
}
.ct-btn-secondary {
  background: transparent;
  color: var(--ct-text-soft) !important;
  border: 1px solid rgba(255,255,255,.1);
}
.ct-btn-secondary:hover {
  border-color: rgba(255,255,255,.25);
  color: var(--ct-accent) !important;
  transform: translateY(-1px);
}

/* ─── Section headings ─────────────────────────────────── */
.ct-section-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
  margin-bottom: .5rem;
  position: relative;
}
.ct-section-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, var(--ct-accent), var(--ct-cyan));
  background-size: 200% 100%;
  animation: gradient-shift 4s ease infinite;
  margin: .75rem auto 0;
  border-radius: 1px;
}
.ct-section-sub {
  font-size: .95rem;
  color: var(--ct-text-soft);
  text-align: center;
  margin-bottom: 2.5rem;
}

/* ─── Template cards ───────────────────────────────────── */
.ct-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
  padding: 2rem 0 3rem;
}
.ct-card {
  background: var(--ct-surface);
  border: 1px solid var(--ct-border);
  border-radius: .75rem;
  overflow: hidden;
  transition: all .35s cubic-bezier(.4,0,.2,1);
  position: relative;
}
.ct-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: .75rem;
  padding: 1px;
  background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,.15) 50%, transparent 60%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .35s;
  pointer-events: none;
}
.ct-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 20px 60px rgba(255,255,255,.08),
    0 8px 24px rgba(0,0,0,.3);
}
.ct-card:hover::before {
  opacity: 1;
}
.ct-card-img {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  display: block;
  background: var(--ct-surface-hover);
  transition: transform .4s cubic-bezier(.4,0,.2,1), filter .4s;
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}
.ct-card:hover .ct-card-img {
  filter: brightness(1.15);
}
.ct-card-body {
  padding: 1.25rem 1.5rem 1.5rem;
  position: relative;
}
.ct-card-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: .4rem;
  transition: color .2s;
}
.ct-card:hover .ct-card-title {
  color: var(--ct-accent);
}
.ct-card-desc {
  font-size: .84rem;
  color: var(--ct-text-soft);
  line-height: 1.65;
  margin-bottom: 1.25rem;
}
.ct-card-meta {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-top: .75rem;
  border-top: 1px solid rgba(255,255,255,.06);
}

/* ─── Badges ───────────────────────────────────────────── */
.ct-badges { display: flex; gap: .35rem; margin-bottom: .75rem; flex-wrap: wrap; }
.ct-badge {
  display: inline-block;
  padding: .2rem .55rem;
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-radius: 9999px;
  border: 1px solid transparent;
  transition: all .2s;
}
.ct-badge-joomla {
  background: rgba(6,146,255,.1);
  color: #3b9eff;
  border-color: rgba(6,146,255,.15);
}
.ct-badge-wordpress {
  background: rgba(33,117,155,.1);
  color: #21759b;
  border-color: rgba(33,117,155,.15);
}
.ct-badge-free {
  background: rgba(16,185,129,.08);
  color: #10b981;
  border-color: rgba(16,185,129,.12);
}
.ct-badge-showcase {
  background: rgba(200,169,110,.08);
  color: var(--ct-gold);
  border-color: rgba(200,169,110,.12);
}
.ct-badge-html {
  background: rgba(227,76,38,.1);
  color: #e34f26;
  border-color: rgba(227,76,38,.15);
}
.ct-badge-designer {
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.5);
  border-color: rgba(255,255,255,.1);
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  font-style: italic;
}
.ct-badge:hover {
  filter: brightness(1.3);
  transform: translateY(-1px);
}

/* ─── Card entrance animation ──────────────────────────── */
@keyframes card-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.ct-card {
  animation: card-fade-up .5s ease both;
}
.ct-card:nth-child(1) { animation-delay: .05s; }
.ct-card:nth-child(2) { animation-delay: .1s; }
.ct-card:nth-child(3) { animation-delay: .15s; }
.ct-card:nth-child(4) { animation-delay: .2s; }
.ct-card:nth-child(5) { animation-delay: .25s; }
.ct-card:nth-child(6) { animation-delay: .3s; }

/* ─── Card tags & price ────────────────────────────────── */
.ct-card-tag {
  display: inline-block;
  padding: .2rem .6rem;
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-radius: 9999px;
  background: var(--ct-accent-glow);
  color: var(--ct-accent);
}
.ct-card-tag.free { background: rgba(16,185,129,.12); color: var(--ct-green); }
.ct-card-price {
  font-size: .85rem;
  font-weight: 600;
  color: var(--ct-green);
}

/* ─── Footer ───────────────────────────────────────────── */
.bf-footer {
  background: var(--ct-bg) !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
  color: var(--ct-text-soft) !important;
  position: relative;
}
.bf-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 200px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--ct-accent), var(--ct-cyan), transparent);
}
.bf-footer a { color: var(--ct-text-soft) !important; transition: color .2s; }
.bf-footer a:hover { color: var(--ct-accent) !important; }

/* ─── "Built with Claude Code" footer tag ──────────────── */
.bf-footer-bottom::after {
  content: 'Every line of CSS written by AI';
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 1rem;
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.2);
}

/* ─── Sidebar modules ──────────────────────────────────── */
.bf-module {
  background: var(--ct-surface) !important;
  border: 1px solid var(--ct-border) !important;
  border-radius: .75rem !important;
}
.bf-module-title {
  color: var(--ct-text-soft) !important;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .75rem !important;
}

/* ─── Content ──────────────────────────────────────────── */
.bf-content { color: var(--ct-text) !important; }
.bf-content h1, .bf-content h2, .bf-content h3 { color: #fff; }
.bf-content a:not(.ct-btn) { color: var(--ct-accent); transition: color .2s; }
.bf-content a:not(.ct-btn):hover { color: var(--ct-cyan); }

/* ─── Cards — override Halfmoon defaults ───────────────── */
.bf-card {
  background: var(--ct-surface) !important;
  border: 1px solid var(--ct-border) !important;
  border-radius: .75rem !important;
}
.bf-card:hover {
  border-color: rgba(255,255,255,.2) !important;
  box-shadow: 0 8px 30px rgba(255,255,255,.06) !important;
}

/* ─── Breadcrumbs ──────────────────────────────────────── */
.mod-breadcrumbs a { color: var(--ct-text-soft) !important; }
.mod-breadcrumbs a:hover { color: var(--ct-accent) !important; }
.mod-breadcrumbs .active { color: var(--ct-text) !important; }

/* ─── Homepage layout ──────────────────────────────────── */
.bf-home .bf-sidebar { display: none; }
.bf-home .bf-layout { grid-template-columns: 1fr !important; }

/* ─── Mobile ───────────────────────────────────────────── */
@media (max-width: 640px) {
  .ct-hero { padding: 3.5rem 0 2rem; }
  .ct-hero h1 { font-size: 2rem; }
  .ct-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .ct-card-meta { justify-content: center; }
}

/* ─── Selection color ──────────────────────────────────── */
::selection {
  background: rgba(255,255,255,.3);
  color: #fff;
}

/* ─── Scrollbar ────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--ct-bg); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #1a1b25, #2a2b35);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--ct-accent), var(--ct-cyan));
}

/* ─── Theme transition ─────────────────────────────────── */
body.bf, .bf-header, .bf-topbar, .ct-card-body,
.bf-footer, .ct-theme-toggle, .ct-badge {
  transition: background .4s ease, color .4s ease, border-color .4s ease, box-shadow .4s ease;
}

/* ─── Light mode ───────────────────────────────────────── */
body.ct-light.bf {
  --ct-bg: #fafafa;
  --ct-surface: #fff;
  --ct-surface-hover: #f5f5f7;
  --ct-border: rgba(0,0,0,.06);
  --ct-text: #1a1a2e;
  --ct-text-soft: #64748b;
  --ct-accent: var(--ct-light-accent, #e07800);
  --ct-accent-glow: rgba(0,0,0,.04);
  background: var(--ct-bg) !important;
  color: var(--ct-text) !important;
  background-image: none !important;
}
body.ct-light .bf-topbar {
  background: rgba(0,0,0,.02) !important;
  border-bottom: 1px solid rgba(0,0,0,.06) !important;
}
body.ct-light .bf-header {
  background: rgba(248,249,252,.9) !important;
  border-bottom: 1px solid rgba(0,0,0,.06) !important;
  box-shadow: 0 1px 20px rgba(0,0,0,.04) !important;
}
body.ct-light .bf-logo-label {
  background: linear-gradient(135deg, var(--ct-light-accent, #e07800), var(--ct-light-accent-dark, #cc6a00)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
body.ct-light .bf-logo-site {
  color: #64748b !important;
  border-color: rgba(0,0,0,.15);
}
body.ct-light .ct-hero h1 { color: #1a1a2e; }
body.ct-light .ct-hero::before {
  background:
    radial-gradient(ellipse at 30% 50%, var(--ct-accent-glow) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 50%, rgba(0,0,0,.02) 0%, transparent 50%);
}
body.ct-light .ct-card {
  background: #fff;
  border-color: rgba(0,0,0,.06);
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
body.ct-light .ct-card:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.04);
}
body.ct-light .ct-card-title { color: #1a1a2e; }
body.ct-light .ct-card:hover .ct-card-title { color: var(--ct-accent); }
body.ct-light .ct-card-meta { border-top-color: rgba(0,0,0,.06); }
body.ct-light .ct-btn-secondary {
  background: rgba(0,0,0,.02);
  border-color: rgba(0,0,0,.1);
  color: #1a1a2e !important;
}
body.ct-light .ct-btn-secondary:hover {
  border-color: var(--ct-accent);
  color: var(--ct-accent) !important;
  background: rgba(255,255,255,.04);
}
body.ct-light .ct-btn-primary {
  background: var(--ct-light-accent, #e07800);
  color: #fff !important;
  border-color: var(--ct-light-accent, #e07800);
}
body.ct-light .ct-btn-primary:hover {
  background: var(--ct-light-accent-dark, #cc6a00);
  box-shadow: 0 4px 16px var(--ct-accent-glow);
}
body.ct-light .ct-section-title { color: #1a1a2e; }
body.ct-light .bf-footer {
  background: #f1f3f8 !important;
  border-top: 1px solid rgba(0,0,0,.06) !important;
}
body.ct-light .ct-theme-toggle {
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.08);
  color: #64748b;
}
body.ct-light .ct-theme-toggle:hover {
  color: var(--ct-accent);
  border-color: rgba(0,0,0,.15);
}
body.ct-light .bf-hamburger span { background: #1a1a2e !important; }

/* CT-specific footer brand */
.bf-footer-brand {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}
.bf-footer-taid, .bf-footer-weblio {
  font-size: .7rem !important;
  line-height: 1 !important;
}
.bf-footer-taid span { color: var(--ct-accent) !important; opacity: 1 !important; }
.bf-footer-weblio {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  text-decoration: none !important;
  color: var(--ct-text-soft) !important;
  opacity: .5;
  transition: opacity .2s;
}
.bf-footer-weblio span {
  opacity: .6;
}
.bf-footer-weblio:hover { opacity: .8; }
body.ct-light ::selection { background: rgba(0,0,0,.1); }

/* ─── Back to top ──────────────────────────────────────── */
.bf-back-to-top {
  background: var(--ct-accent) !important;
  color: var(--ct-btn-text, #fff) !important;
  box-shadow: 0 2px 12px var(--ct-accent-glow) !important;
}
.bf-back-to-top:hover {
  box-shadow: 0 4px 20px var(--ct-accent-glow) !important;
}
body.ct-light .bf-back-to-top {
  background: var(--ct-accent) !important;
  color: #fff !important;
}

/* ─── Ambient noise texture ────────────────────────────── */
body.bf::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.015'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9999;
  opacity: .25;
}