@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  color-scheme: light;
  --cb-bg: #f3f4ef;
  --cb-bg-2: #e8eadf;
  --cb-surface: rgba(255,255,255,.88);
  --cb-surface-solid: #ffffff;
  --cb-ink: #15171c;
  --cb-muted: #666d79;
  --cb-line: rgba(21,23,28,.14);
  --cb-line-strong: rgba(21,23,28,.25);
  --cb-primary: #6d28d9;
  --cb-primary-2: #8b5cf6;
  --cb-accent: #65a30d;
  --cb-accent-bright: #a3e635;
  --cb-dark: #111318;
  --cb-shadow: 0 22px 60px rgba(23,25,31,.10);
  --cb-radius: 22px;
  --cb-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
  --cb-sans: 'Manrope', Inter, ui-sans-serif, system-ui, sans-serif;
}

html[data-theme='dark'] {
  color-scheme: dark;
  --cb-bg: #090b0f;
  --cb-bg-2: #10141a;
  --cb-surface: rgba(17,21,28,.88);
  --cb-surface-solid: #121720;
  --cb-ink: #f3f5f8;
  --cb-muted: #a0a8b6;
  --cb-line: rgba(255,255,255,.11);
  --cb-line-strong: rgba(255,255,255,.20);
  --cb-primary: #a78bfa;
  --cb-primary-2: #c4b5fd;
  --cb-accent: #bef264;
  --cb-accent-bright: #d9f99d;
  --cb-dark: #07090c;
  --cb-shadow: 0 26px 76px rgba(0,0,0,.38);
}

html { scroll-behavior: smooth; }
body {
  min-height: 100vh;
  color: var(--cb-ink) !important;
  font-family: var(--cb-sans) !important;
  background-color: var(--cb-bg) !important;
  background-image:
    linear-gradient(rgba(109,40,217,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(109,40,217,.045) 1px, transparent 1px),
    radial-gradient(circle at 12% 5%, rgba(163,230,53,.16), transparent 24rem),
    radial-gradient(circle at 88% 8%, rgba(109,40,217,.15), transparent 28rem) !important;
  background-size: 34px 34px, 34px 34px, auto, auto !important;
  background-attachment: fixed !important;
}
body::before { opacity: .35; }
button, input, select, textarea { font-family: inherit; }
code, pre, .mono, [class*='font-mono'] { font-family: var(--cb-mono) !important; }

.cb-topbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid var(--cb-line);
  background: color-mix(in srgb, var(--cb-bg) 78%, transparent);
  backdrop-filter: blur(18px) saturate(145%);
}
.cb-topbar__inner {
  width: min(1280px, calc(100% - 28px));
  min-height: 72px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}
.cb-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--cb-ink) !important;
  text-decoration: none !important;
  white-space: nowrap;
}
.cb-brand__mark {
  width: 42px;
  height: 42px;
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #fff;
  background: var(--cb-dark);
  box-shadow: 7px 7px 0 var(--cb-accent);
  font: 800 .84rem/1 var(--cb-mono);
  letter-spacing: -.05em;
}
html[data-theme='dark'] .cb-brand__mark { color: #080a0d; background: var(--cb-accent); box-shadow: 7px 7px 0 var(--cb-primary); }
.cb-brand__text { display: grid; line-height: 1.05; }
.cb-brand__text strong { font-size: .98rem; letter-spacing: -.02em; }
.cb-brand__text small { margin-top: 4px; color: var(--cb-muted); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; }
.cb-nav { display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap; }
.cb-nav a {
  padding: 9px 11px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--cb-muted) !important;
  text-decoration: none !important;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .02em;
}
.cb-nav a:hover, .cb-nav a[aria-current='page'] {
  color: var(--cb-ink) !important;
  border-color: var(--cb-line);
  background: var(--cb-surface);
}
.cb-nav a[aria-current='page'] { box-shadow: inset 0 -3px 0 var(--cb-accent); }
.cb-theme {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--cb-line) !important;
  border-radius: 13px !important;
  color: var(--cb-ink) !important;
  background: var(--cb-surface) !important;
  cursor: pointer;
  font: 700 1rem/1 var(--cb-mono) !important;
}
.cb-theme:hover { border-color: var(--cb-primary) !important; transform: translateY(-1px); }

.cb-algorithm-tag {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid var(--cb-line);
  border-radius: 999px;
  color: var(--cb-muted);
  background: var(--cb-surface);
  box-shadow: var(--cb-shadow);
  font: 700 .7rem/1 var(--cb-mono);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.cb-algorithm-tag::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--cb-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cb-accent) 18%, transparent); }

/* Unified component treatment without changing algorithm DOM or logic. */
.glass, .card, .box-card, .input-card, .result-card, .reference-card, .step-card,
.hero-panel, .hero-inner, .side-hero, .workspace, .workspace-card, .panel, .control-panel,
[class*='rounded-'][class*='border'] {
  border-color: var(--cb-line) !important;
}
.card, .glass, .box-card, .workspace-card, .result-card, .input-card, .reference-card,
.hero-panel, .hero-inner, .control-panel, details.step-card {
  box-shadow: var(--cb-shadow) !important;
}
input, textarea, select, .input-base {
  color: var(--cb-ink) !important;
  border-color: var(--cb-line) !important;
  background: var(--cb-surface-solid) !important;
}
input:focus, textarea:focus, select:focus, .input-base:focus {
  border-color: var(--cb-primary) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cb-primary) 16%, transparent) !important;
}
.btn-primary, .primary-btn, .button--primary, .btn.primary, button.primary, .primary-link {
  color: #fff !important;
  border-color: transparent !important;
  background: linear-gradient(135deg, #4c1d95, #7c3aed) !important;
  box-shadow: 0 12px 28px rgba(109,40,217,.22) !important;
}
html[data-theme='dark'] .btn-primary, html[data-theme='dark'] .primary-btn,
html[data-theme='dark'] .button--primary, html[data-theme='dark'] .btn.primary,
html[data-theme='dark'] button.primary, html[data-theme='dark'] .primary-link { color: #0b0d10 !important; background: linear-gradient(135deg, #bef264, #84cc16) !important; }
.btn-secondary, .secondary-btn, .button--secondary, .btn.secondary, .ghost-btn, .btn.ghost {
  color: var(--cb-ink) !important;
  border-color: var(--cb-line) !important;
  background: var(--cb-surface) !important;
}
.eyebrow, .badge, .section-kicker, .details-tag, .operation-chip, .section-number,
.text-amber-200, .text-violet-300, .text-amber-100, .text-cyan-300 {
  color: var(--cb-primary) !important;
}
.section-number { background: var(--cb-accent) !important; color: #111 !important; }
.status-line.ok, .verify-box.ok, .final-note { color: var(--cb-accent) !important; border-color: color-mix(in srgb, var(--cb-accent) 48%, transparent) !important; }
.table-wrap, .matrix-wrap, .const-wrap { border-color: var(--cb-line) !important; }
th { color: var(--cb-primary) !important; }
footer, .footer { color: var(--cb-muted) !important; }

/* Existing S-AES local theme control is hidden; global theme is used. */
#themeButton { display: none !important; }

@media (max-width: 930px) {
  .cb-topbar__inner { padding: 12px 0; align-items: flex-start; }
  .cb-nav { display: none; }
  .cb-brand__text small { display: none; }
}
@media (max-width: 560px) {
  .cb-topbar__inner { min-height: 62px; }
  .cb-brand__mark { width: 37px; height: 37px; box-shadow: 5px 5px 0 var(--cb-accent); }
  .cb-algorithm-tag { display: none; }
}

/* Map every original interface to the same CipherBox design tokens. */
.algorithm-des {
  --bg: var(--cb-bg); --paper: var(--cb-surface-solid); --paper-2: var(--cb-bg-2);
  --ink: var(--cb-ink); --muted: var(--cb-muted); --forest: var(--cb-primary);
  --forest-dark: #4c1d95; --mint: var(--cb-accent); --gold: var(--cb-primary-2);
  --gold-soft: color-mix(in srgb, var(--cb-primary) 16%, var(--cb-surface-solid));
  --line: var(--cb-line); --line-strong: var(--cb-line-strong); --shadow: var(--cb-shadow);
  --sans: var(--cb-sans); --mono: var(--cb-mono);
}
.algorithm-sdes {
  --page: var(--cb-bg); --paper: var(--cb-surface-solid); --panel: var(--cb-surface-solid);
  --ink: var(--cb-ink); --muted: var(--cb-muted); --forest: #4c1d95; --forest-2: #6d28d9;
  --mint: var(--cb-accent); --amber: var(--cb-primary-2); --amber-2: var(--cb-primary);
  --cream-line: var(--cb-line); --green-soft: color-mix(in srgb, var(--cb-accent) 10%, var(--cb-surface-solid));
  --orange-soft: color-mix(in srgb, var(--cb-primary) 10%, var(--cb-surface-solid)); --shadow: var(--cb-shadow);
}
.algorithm-aes {
  --bg: var(--cb-bg); --panel: var(--cb-surface); --panel-soft: color-mix(in srgb, var(--cb-primary) 5%, transparent);
  --border: var(--cb-line); --border-strong: var(--cb-line-strong); --text: var(--cb-ink); --muted: var(--cb-muted);
  --cyan: var(--cb-primary); --cyan-soft: color-mix(in srgb, var(--cb-primary) 14%, transparent);
  --pink: var(--cb-accent); --pink-soft: color-mix(in srgb, var(--cb-accent) 13%, transparent);
  --green: var(--cb-accent); --blue: var(--cb-primary-2); --yellow: var(--cb-accent-bright); --violet: var(--cb-primary-2);
}
.algorithm-saes {
  --bg: var(--cb-bg); --surface: var(--cb-surface-solid); --surface-2: var(--cb-bg-2);
  --surface-3: color-mix(in srgb, var(--cb-primary) 8%, var(--cb-bg-2)); --text: var(--cb-ink);
  --muted: var(--cb-muted); --line: var(--cb-line-strong); --primary: var(--cb-primary);
  --primary-dark: #4c1d95; --primary-soft: color-mix(in srgb, var(--cb-primary) 13%, var(--cb-surface-solid));
  --accent: var(--cb-accent); --accent-soft: color-mix(in srgb, var(--cb-accent) 13%, var(--cb-surface-solid));
  --navy: var(--cb-dark); --yellow: var(--cb-accent-bright); --shadow: 6px 6px 0 color-mix(in srgb, var(--cb-ink) 82%, transparent);
  --shadow-small: 3px 3px 0 color-mix(in srgb, var(--cb-ink) 82%, transparent); --mono: var(--cb-mono);
}
html[data-theme='dark'] .algorithm-des,
html[data-theme='dark'] .algorithm-sdes,
html[data-theme='dark'] .algorithm-aes,
html[data-theme='dark'] .algorithm-saes {
  --forest-dark: #17102a; --primary-dark: var(--cb-primary-2); --navy: #07090d;
}
.algorithm-des .side-hero,
.algorithm-des .content-card,
.algorithm-sdes .main-card,
.algorithm-sdes .card,
.algorithm-aes .glass,
.algorithm-aes .info-card,
.algorithm-aes .hero-stat,
.algorithm-aes .word-card,
.algorithm-saes .box-card,
.algorithm-saes .card {
  color: var(--cb-ink) !important;
  border-color: var(--cb-line) !important;
  background: var(--cb-surface) !important;
}
.algorithm-sdes .sidebar {
  color: #fff !important;
  background: linear-gradient(155deg, #35136e, #6d28d9) !important;
}
html[data-theme='dark'] .algorithm-sdes .sidebar { color:#0a0c0f !important; background:linear-gradient(155deg,#d9f99d,#84cc16) !important; }
.algorithm-aes .text-white,
.algorithm-aes .text-slate-100,
.algorithm-aes .text-slate-200 { color: var(--cb-ink) !important; }
.algorithm-aes .text-slate-300,
.algorithm-aes .text-slate-400 { color: var(--cb-muted) !important; }
.algorithm-aes .bg-white\/5,
.algorithm-aes [class*='bg-white/'] { background-color: color-mix(in srgb, var(--cb-surface-solid) 78%, transparent) !important; }
.algorithm-saes .box-card--navy { color:#fff !important; background:linear-gradient(145deg,#17102a,#4c1d95) !important; }
html[data-theme='dark'] .algorithm-saes .box-card--navy { color:#0b0d10 !important; background:linear-gradient(145deg,#d9f99d,#84cc16) !important; }