/* ═══════════════════════════════════════════════════
   CryptoSim — Main Stylesheet
   Aesthetic: Terminal-meets-academic, dark-first
   ═══════════════════════════════════════════════════ */

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

/* ── Variables ─────────────────────────────────────── */
:root {
  --bg0:      #070b14;
  --bg1:      #0d1322;
  --bg2:      #131c30;
  --bg3:      #1a2540;
  --bg4:      #202e4e;
  --border:   #253352;
  --border2:  #324570;
  --text0:    #edf2ff;
  --text1:    #a8bce0;
  --text2:    #6a84b0;
  --text3:    #3d5180;

  --blue:     #4f8ef7;
  --blue-dim: rgba(79,142,247,.12);
  --violet:   #9c71f5;
  --violet-dim:rgba(156,113,245,.12);
  --cyan:     #22d3ee;
  --cyan-dim: rgba(34,211,238,.12);
  --green:    #34d399;
  --green-dim:rgba(52,211,153,.12);
  --amber:    #fbbf24;
  --amber-dim:rgba(251,191,36,.12);
  --red:      #f87171;
  --red-dim:  rgba(248,113,113,.12);

  --mono: 'IBM Plex Mono', monospace;
  --sans: 'Outfit', system-ui, sans-serif;
  --r:   10px;
  --r-sm: 6px;
}

[data-theme="light"] {
  --bg0:    #f0f4ff;
  --bg1:    #e6ecfb;
  --bg2:    #ffffff;
  --bg3:    #f5f8ff;
  --bg4:    #edf1fc;
  --border: #c9d5ee;
  --border2:#a3b4d8;
  --text0:  #0b1229;
  --text1:  #2d4070;
  --text2:  #556090;
  --text3:  #8899bb;
  --blue:   #2563eb;
  --blue-dim:rgba(37,99,235,.08);
  --violet: #7c3aed;
  --violet-dim:rgba(124,58,237,.08);
  --cyan:   #0891b2;
  --cyan-dim:rgba(8,145,178,.08);
  --green:  #059669;
  --green-dim:rgba(5,150,105,.08);
  --amber:  #d97706;
  --amber-dim:rgba(217,119,6,.08);
  --red:    #dc2626;
  --red-dim:rgba(220,38,38,.08);
}

/* ── Reset ─────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:var(--sans);
  background:var(--bg0);
  color:var(--text0);
  line-height:1.6;
  min-height:100vh;
  transition:background .3s,color .3s;
}
body::before {
  content:'';
  position:fixed; inset:0;
  background:
    radial-gradient(ellipse at 15% 15%, rgba(79,142,247,.07) 0%,transparent 55%),
    radial-gradient(ellipse at 85% 85%, rgba(156,113,245,.07) 0%,transparent 55%);
  pointer-events:none; z-index:0;
}
.container { max-width:1300px; margin:0 auto; padding:0 1.5rem; position:relative; z-index:1; }

/* ── Navbar ─────────────────────────────────────────── */
.navbar {
  position:sticky; top:0; z-index:100;
  background:rgba(7,11,20,.8);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--border);
  padding:.9rem 1.5rem;
  display:flex; align-items:center; justify-content:space-between;
  transition:background .3s;
}
[data-theme="light"] .navbar { background:rgba(240,244,255,.88); }

.nav-brand { display:flex; align-items:center; gap:10px; }
.nav-logo {
  width:38px; height:38px;
  background:linear-gradient(135deg,var(--blue),var(--violet));
  border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 14px rgba(79,142,247,.35);
}
.nav-title { font-family:var(--sans); font-weight:800; font-size:1.05rem; letter-spacing:-.3px; }
.nav-subtitle { font-family:var(--mono); font-size:.62rem; color:var(--text2); letter-spacing:1.2px; }
.nav-right { display:flex; align-items:center; gap:8px; }

/* ── Buttons (ghost) ────────────────────────────────── */
.btn-ghost {
  background:var(--bg2); border:1px solid var(--border);
  color:var(--text1); padding:7px 14px; border-radius:var(--r-sm);
  cursor:pointer; font-family:var(--sans); font-size:.83rem;
  display:flex; align-items:center; gap:6px;
  transition:all .2s;
}
.btn-ghost:hover { border-color:var(--blue); color:var(--text0); }
.btn-ghost.sm { padding:5px 12px; font-size:.78rem; }
.btn-ghost.danger:hover { border-color:var(--red); color:var(--red); }

/* ── Hero ───────────────────────────────────────────── */
.hero { padding:3.5rem 0 2rem; text-align:center; }
.hero-badge {
  display:inline-block;
  background:var(--blue-dim); border:1px solid rgba(79,142,247,.25);
  color:var(--blue); padding:4px 16px; border-radius:20px;
  font-family:var(--mono); font-size:.7rem; letter-spacing:1.5px;
  margin-bottom:1.2rem;
}
.hero h1 { font-size:clamp(2rem,4.5vw,3.2rem); font-weight:800; letter-spacing:-1.5px; line-height:1.1; margin-bottom:.8rem; }
.gradient-text {
  background:linear-gradient(120deg,var(--blue),var(--violet),var(--cyan));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.hero-sub { color:var(--text1); max-width:580px; margin:0 auto 2rem; font-size:1rem; }
.stat-bar {
  display:flex; justify-content:center; flex-wrap:wrap; gap:10px;
  border:1px solid var(--border); border-radius:var(--r);
  padding:.8rem 1.2rem; background:var(--bg2);
  max-width:680px; margin:0 auto;
}
.stat-item { display:flex; align-items:center; gap:6px; font-size:.82rem; color:var(--text1); }
.stat-icon { font-size:1rem; }
.stat-name { font-weight:600; font-size:.8rem; }

/* ── Tab bar ─────────────────────────────────────────── */
.tab-bar { display:flex; gap:6px; justify-content:center; flex-wrap:wrap; padding:1.5rem 0 2rem; }
.tab-btn {
  background:var(--bg2); border:1px solid var(--border);
  color:var(--text2); padding:9px 22px; border-radius:var(--r-sm);
  cursor:pointer; font-family:var(--mono); font-size:.8rem;
  display:flex; align-items:center; gap:7px; transition:all .2s;
}
.tab-btn:hover { border-color:var(--border2); color:var(--text0); }
.tab-btn.active { background:var(--blue); border-color:var(--blue); color:#fff; box-shadow:0 4px 16px rgba(79,142,247,.3); }
.tab-icon { font-size:.95rem; }

/* ── Cipher Panel ────────────────────────────────────── */
.cipher-panel { display:none; animation:fadeUp .3s ease; }
.cipher-panel.active { display:block; }
@keyframes fadeUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

.panel-header { display:flex; align-items:center; gap:12px; margin-bottom:.6rem; }
.panel-icon { font-size:2rem; }
.panel-title { font-size:1.5rem; font-weight:800; letter-spacing:-.5px; }
.panel-subtitle { font-family:var(--mono); font-size:.72rem; color:var(--text2); letter-spacing:.8px; }
.cipher-desc { color:var(--text1); font-size:.92rem; margin-bottom:1.5rem; line-height:1.65; }

/* ── Formula Box ─────────────────────────────────────── */
.formula-box {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--r); padding:1.4rem 1.6rem;
  margin-bottom:1.8rem;
}
.formula-header { margin-bottom:1rem; }
.formula-badge {
  font-family:var(--mono); font-size:.68rem; letter-spacing:1.5px;
  color:var(--cyan); background:var(--cyan-dim);
  border:1px solid rgba(34,211,238,.25); padding:3px 12px; border-radius:20px;
}
.formula-equations { display:flex; gap:1.5rem; flex-wrap:wrap; margin-bottom:1.4rem; }
.formula-eq { display:flex; align-items:center; gap:10px; }
.formula-tag {
  font-family:var(--mono); font-size:.7rem; font-weight:700;
  padding:3px 10px; border-radius:5px; letter-spacing:.5px;
}
.enc-tag { background:var(--green-dim); color:var(--green); border:1px solid rgba(52,211,153,.3); }
.dec-tag { background:var(--amber-dim); color:var(--amber); border:1px solid rgba(251,191,36,.3); }
.formula-code {
  font-family:var(--mono); font-size:1.05rem; font-weight:700;
  color:var(--text0); background:var(--bg3);
  padding:5px 14px; border-radius:var(--r-sm);
  border:1px solid var(--border); letter-spacing:.5px;
}

/* Legend table */
.legend-title { font-size:.8rem; font-weight:700; color:var(--text1); margin-bottom:.6rem; letter-spacing:.3px; }
.legend-table { width:100%; border-collapse:collapse; font-size:.82rem; }
.legend-table th {
  background:var(--bg3); text-align:left; padding:7px 12px;
  font-family:var(--mono); font-size:.7rem; color:var(--text2);
  letter-spacing:.5px; text-transform:uppercase;
  border-bottom:1px solid var(--border);
}
.legend-table td { padding:7px 12px; border-bottom:1px solid var(--border); color:var(--text1); vertical-align:top; }
.legend-table tr:last-child td { border-bottom:none; }
.legend-table tr:hover td { background:var(--bg3); }
.sym-cell code {
  font-family:var(--mono); font-size:.88rem; font-weight:700;
  color:var(--violet); background:var(--violet-dim);
  padding:2px 8px; border-radius:5px;
}
.desc-cell { color:var(--text0); }

/* ── IO Grid ─────────────────────────────────────────── */
.io-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin-bottom:1.2rem; }

/* ── Cards ───────────────────────────────────────────── */
.card {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--r); padding:1.4rem;
  transition:border-color .2s;
}
.card:hover { border-color:var(--border2); }
.card-hd { display:flex; align-items:center; gap:8px; margin-bottom:1.2rem; }
.card-hd-icon { font-size:1.1rem; }
.card-hd-title { font-weight:700; font-size:.95rem; }

/* ── Mode Toggle ─────────────────────────────────────── */
.mode-toggle { display:flex; gap:6px; margin-bottom:1.1rem; }
.mode-btn {
  flex:1; padding:8px; border:1px solid var(--border);
  background:var(--bg3); color:var(--text2);
  border-radius:var(--r-sm); cursor:pointer;
  font-family:var(--mono); font-size:.78rem;
  transition:all .2s; text-align:center;
}
.mode-btn.active.enc { background:var(--green-dim); border-color:var(--green); color:var(--green); }
.mode-btn.active.dec { background:var(--amber-dim); border-color:var(--amber); color:var(--amber); }

/* ── Form elements ───────────────────────────────────── */
.fg { margin-bottom:1rem; }
label {
  display:block; font-size:.75rem; font-weight:700;
  color:var(--text2); margin-bottom:5px;
  letter-spacing:.4px; text-transform:uppercase; font-family:var(--mono);
}
label .req { font-weight:400; text-transform:none; letter-spacing:0; color:var(--text3); }
input[type=text],input[type=number],textarea,select {
  width:100%; background:var(--bg1); border:1px solid var(--border);
  color:var(--text0); padding:9px 12px; border-radius:var(--r-sm);
  font-family:var(--mono); font-size:.88rem; transition:all .2s; outline:none;
}
input:focus,textarea:focus,select:focus {
  border-color:var(--blue); box-shadow:0 0 0 3px rgba(79,142,247,.1);
}
textarea { resize:vertical; }
.mono-input { font-family:var(--mono); }
.fg-hint { font-size:.75rem; color:var(--text2); margin-top:5px; line-height:1.5; }
.fg-hint code { font-family:var(--mono); color:var(--cyan); background:var(--cyan-dim); padding:1px 5px; border-radius:4px; }
.row-2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }

/* Chips */
.chip-row { display:flex; flex-wrap:wrap; gap:4px; margin-top:5px; }
.chip {
  background:var(--bg1); border:1px solid var(--border);
  color:var(--text2); padding:2px 8px; border-radius:5px;
  font-family:var(--mono); font-size:.72rem; cursor:pointer;
  transition:all .15s;
}
.chip:hover { border-color:var(--blue); color:var(--blue); }

/* ── Run Button ──────────────────────────────────────── */
.btn-run {
  width:100%; padding:11px; margin-top:.3rem;
  background:linear-gradient(135deg,var(--blue),var(--violet));
  border:none; border-radius:var(--r-sm);
  color:#fff; font-family:var(--mono); font-size:.88rem; font-weight:700;
  cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px;
  letter-spacing:.3px; transition:all .2s;
  box-shadow:0 3px 14px rgba(79,142,247,.25);
}
.btn-run:hover { transform:translateY(-1px); box-shadow:0 5px 20px rgba(79,142,247,.35); }
.btn-run:disabled { opacity:.6; cursor:not-allowed; transform:none; }

/* Spinner */
.spinner {
  width:16px; height:16px; border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff; border-radius:50%; display:none;
  animation:spin .6s linear infinite;
}
.spinner.active { display:block; }
@keyframes spin { to{transform:rotate(360deg)} }

/* Error */
.error-box {
  margin-top:.7rem; padding:8px 12px;
  background:var(--red-dim); border:1px solid rgba(248,113,113,.35);
  border-radius:var(--r-sm); color:var(--red);
  font-family:var(--mono); font-size:.8rem; display:none;
}
.error-box.visible { display:block; }

/* ── Result area ─────────────────────────────────────── */
.result-area {
  min-height:90px; background:var(--bg1);
  border:1px solid var(--border); border-radius:var(--r-sm);
  padding:12px 14px; position:relative; margin-bottom:.8rem;
}
.result-placeholder { text-align:center; padding:1rem 0; }
.placeholder-icon { font-size:1.8rem; margin-bottom:.3rem; }
.result-placeholder p { color:var(--text2); font-size:.82rem; font-family:var(--mono); }
.result-label { font-family:var(--mono); font-size:.68rem; color:var(--text2); text-transform:uppercase; letter-spacing:1px; margin-bottom:5px; }
.result-text { font-family:var(--mono); font-size:1.05rem; font-weight:700; color:var(--cyan); word-break:break-all; letter-spacing:.5px; }
.copy-btn {
  position:absolute; top:10px; right:10px;
  background:var(--bg2); border:1px solid var(--border);
  color:var(--text2); padding:3px 10px; border-radius:5px;
  cursor:pointer; font-family:var(--mono); font-size:.72rem;
  transition:all .2s;
}
.copy-btn:hover { border-color:var(--blue); color:var(--blue); }

/* ── Steps panel ─────────────────────────────────────── */
.steps-panel {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--r); padding:1.4rem;
  margin-bottom:2rem; display:none;
  animation:fadeUp .3s ease;
}
.steps-panel.visible { display:block; }
.steps-panel-hd {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:1.2rem;
}
.steps-panel-title {
  font-weight:700; font-size:.98rem;
  display:flex; align-items:center; gap:8px;
}
.steps-badge {
  background:var(--blue-dim); border:1px solid rgba(79,142,247,.25);
  color:var(--blue); padding:2px 10px; border-radius:20px;
  font-family:var(--mono); font-size:.7rem;
}

/* ── Shared banners ──────────────────────────────────── */
.info-banner {
  background:var(--blue-dim); border:1px solid rgba(79,142,247,.2);
  border-radius:var(--r-sm); padding:9px 14px;
  font-size:.82rem; color:var(--text1); margin-bottom:1rem;
  font-family:var(--mono); line-height:1.6;
}
.info-banner strong { color:var(--text0); }
.info-banner code { color:var(--cyan); }
.key-expand-banner {
  background:var(--violet-dim); border:1px solid rgba(156,113,245,.2);
  border-radius:var(--r-sm); padding:9px 14px;
  font-size:.82rem; color:var(--text1); margin-bottom:1rem;
  font-family:var(--mono);
}
.key-expand-banner code { color:var(--violet); }

/* ── Calc table ──────────────────────────────────────── */
.table-wrap { overflow-x:auto; border-radius:var(--r-sm); }
.calc-table { width:100%; border-collapse:collapse; font-family:var(--mono); font-size:.78rem; }
.calc-table th {
  background:var(--bg3); color:var(--text2); text-transform:uppercase;
  letter-spacing:.5px; font-size:.68rem; padding:9px 12px;
  text-align:left; border-bottom:2px solid var(--border); white-space:nowrap;
  position:sticky; top:0;
}
.calc-table td { padding:8px 12px; border-bottom:1px solid var(--border); color:var(--text1); vertical-align:top; }
.calc-table tr:hover td { background:var(--bg3); }
.ch { font-size:.95rem; font-weight:700; color:var(--text0); text-align:center; }
.num { text-align:center; font-weight:600; }
.out-num { color:var(--cyan); }
.out-ch  { color:var(--cyan); font-size:1.1rem; font-weight:700; text-align:center; }
.key-ch  { color:var(--violet); }
.skip-row td { opacity:.5; }
.skip-note { color:var(--text3); font-style:italic; }

/* Sub-steps inside table */
.sub-steps { display:flex; flex-direction:column; gap:2px; }
.sub-step { font-size:.75rem; color:var(--text1); line-height:1.5; white-space:pre; }
.calc-cell { min-width:280px; }

/* ══ HILL CIPHER SPECIAL STYLES ════════════════════════ */

/* Matrix display (in output card) */
.matrix-vis-area { margin-top:.8rem; }
.matrix-row { display:flex; flex-wrap:wrap; gap:1.2rem; align-items:flex-start; margin-top:.5rem; }
.matrix-block { text-align:center; }
.matrix-label {
  font-family:var(--mono); font-size:.7rem; color:var(--text2);
  text-transform:uppercase; letter-spacing:.8px; margin-bottom:6px;
}
.matrix-eq-sign {
  font-family:var(--mono); font-size:.9rem; color:var(--text2);
  padding-top:30px; align-self:flex-start;
}
.matrix-grid {
  display:inline-grid; gap:4px;
  padding:12px;
  background:var(--bg1); border:1px solid var(--border);
  border-radius:var(--r-sm); position:relative;
}
.matrix-grid::before,.matrix-grid::after {
  content:''; position:absolute; top:8px; bottom:8px; width:3px;
  border:2px solid var(--border2);
}
.matrix-grid::before { left:3px; border-right:none; border-radius:2px 0 0 2px; }
.matrix-grid::after  { right:3px; border-left:none;  border-radius:0 2px 2px 0; }
.mcell {
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-weight:700;
  background:var(--bg2); border:1px solid var(--border);
  border-radius:5px; color:var(--text0); transition:all .15s;
}

/* Hill block computation layout */
.hill-block {
  background:var(--bg1); border:1px solid var(--border);
  border-radius:var(--r-sm); padding:1.2rem 1.4rem;
  margin-bottom:1rem;
}
.hill-block-title {
  font-family:var(--mono); font-size:.85rem; font-weight:700;
  color:var(--blue); margin-bottom:1rem;
}
.blk-in { color:var(--text0); }
.blk-arrow { color:var(--text2); }

/* The multiplication layout: K × P⃗ = [calc] = C⃗ */
.hill-mult-layout {
  display:flex; align-items:flex-start; gap:1rem; flex-wrap:wrap; margin-bottom:1rem;
}
.hill-matrix-wrap,.hill-vec-wrap,.hill-calc-wrap { text-align:center; }
.hm-label {
  font-family:var(--mono); font-size:.68rem; color:var(--text2);
  text-transform:uppercase; letter-spacing:.7px; margin-bottom:5px;
}
.mult-sym {
  font-family:var(--mono); font-size:1.4rem; color:var(--text2);
  padding-top:28px; align-self:flex-start;
}
.hill-vec {
  display:inline-flex; flex-direction:column; gap:4px;
  background:var(--bg1); border:1px solid var(--border);
  border-radius:var(--r-sm); padding:10px; position:relative;
}
.hill-vec::before,.hill-vec::after {
  content:''; position:absolute; top:5px; bottom:5px; width:3px;
  border:2px solid var(--border2);
}
.hill-vec::before { left:3px; border-right:none; border-radius:2px 0 0 2px; }
.hill-vec::after  { right:3px; border-left:none;  border-radius:0 2px 2px 0; }
.vec-cell {
  display:flex; align-items:center; gap:4px;
  font-family:var(--mono); font-size:.8rem;
  padding:4px 6px; border-radius:4px; background:var(--bg2);
  border:1px solid var(--border);
}
.vec-cell.out { background:rgba(34,211,238,.07); border-color:rgba(34,211,238,.25); }
.vec-letter { color:var(--violet); font-weight:700; }
.vec-eq { color:var(--text3); font-size:.75rem; }
.vec-num { color:var(--text0); font-weight:700; }
.out-letter { color:var(--cyan); }

/* Calc rows (result of each matrix row × vector) */
.hill-calcs { display:flex; flex-direction:column; gap:5px; text-align:left; }
.calc-row {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:5px; padding:6px 10px;
  font-family:var(--mono); font-size:.75rem;
}
.calc-terms { display:flex; flex-wrap:wrap; gap:4px; align-items:center; margin-bottom:3px; }
.term { display:inline-flex; align-items:center; gap:2px; color:var(--text1); }
.times { color:var(--text3); font-size:.7rem; }
.term-note { color:var(--text3); font-size:.68rem; }
.prod { color:var(--blue); font-weight:700; }
.plus { color:var(--text3); }
.calc-eq { color:var(--text1); }
.calc-final { color:var(--cyan); font-size:.88rem; }
.calc-char { color:var(--green); font-weight:700; font-size:.9rem; }
.table-section-title { font-weight:700; font-size:.88rem; color:var(--text1); margin-bottom:.6rem; }

.hill-block-result {
  font-family:var(--mono); font-size:.88rem; font-weight:700;
  color:var(--text1); border-top:1px solid var(--border);
  padding-top:.7rem;
}
.out-block { color:var(--cyan); font-size:1rem; }

/* ══ PLAYFAIR CIPHER SPECIAL STYLES ════════════════════ */

/* Output card matrix display */
.pf-matrix-area {
  background:var(--bg1); border:1px solid var(--border);
  border-radius:var(--r-sm); padding:1rem;
  margin-top:.8rem;
}
.pf-placeholder { text-align:center; color:var(--text3); font-family:var(--mono); font-size:.78rem; padding:.5rem; }
.pf-matrix-title {
  font-family:var(--mono); font-size:.75rem; color:var(--text2);
  text-transform:uppercase; letter-spacing:.8px;
  margin-bottom:.6rem; display:flex; gap:10px; align-items:center;
}

/* Column/row labels */
.pf-col-labels {
  display:grid; grid-template-columns:32px repeat(5,52px);
  margin-bottom:3px;
}
.pf-col-labels span { font-family:var(--mono); font-size:.65rem; color:var(--text3); text-align:center; }

/* 5×5 grid with row labels */
.pf-grid {
  display:grid;
  grid-template-columns:32px repeat(5,52px);
  gap:4px;
}
.pf-row-label {
  font-family:var(--mono); font-size:.65rem; color:var(--text3);
  display:flex; align-items:center; justify-content:flex-end;
  padding-right:6px;
}
.pf-cell {
  width:52px; height:52px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:1.05rem; font-weight:700;
  background:var(--bg2); border:1px solid var(--border);
  border-radius:7px; color:var(--text0);
  transition:all .3s; cursor:default;
}
.pf-cell.hl-a {
  background:var(--cyan-dim); border-color:var(--cyan);
  color:var(--cyan); box-shadow:0 0 12px rgba(34,211,238,.25);
  transform:scale(1.08);
}
.pf-cell.hl-b {
  background:var(--violet-dim); border-color:var(--violet);
  color:var(--violet); box-shadow:0 0 12px rgba(156,113,245,.25);
  transform:scale(1.08);
}

/* Rules summary */
.pf-rules { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:1.2rem; }
.pf-rule {
  flex:1; min-width:180px; padding:10px 14px;
  border-radius:var(--r-sm); font-size:.78rem; line-height:1.5;
}
.pf-rule strong { display:block; margin-bottom:3px; font-size:.82rem; }
.pf-rule.r1 { background:var(--green-dim); border:1px solid rgba(52,211,153,.25); color:var(--text0); }
.pf-rule.r2 { background:var(--amber-dim); border:1px solid rgba(251,191,36,.25); color:var(--text0); }
.pf-rule.r3 { background:var(--blue-dim); border:1px solid rgba(79,142,247,.25); color:var(--text0); }
.pf-rule.r1 strong { color:var(--green); }
.pf-rule.r2 strong { color:var(--amber); }
.pf-rule.r3 strong { color:var(--blue); }

/* Bigram cards */
.pf-cards { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:1rem; }
.pf-card {
  flex:0 0 auto; width:calc(50% - 4px);
  padding:10px 14px; border-radius:var(--r-sm);
  border:1px solid var(--border); cursor:pointer;
  transition:all .2s; font-size:.78rem;
}
.pf-card:hover { transform:translateY(-2px); }
.pf-card.r1 { background:rgba(52,211,153,.04); border-color:rgba(52,211,153,.2); }
.pf-card.r2 { background:rgba(251,191,36,.04); border-color:rgba(251,191,36,.2); }
.pf-card.r3 { background:rgba(79,142,247,.04); border-color:rgba(79,142,247,.2); }
.pf-card:hover.r1 { border-color:var(--green); }
.pf-card:hover.r2 { border-color:var(--amber); }
.pf-card:hover.r3 { border-color:var(--blue); }

.pf-card-hd { display:flex; align-items:center; gap:6px; margin-bottom:5px; font-family:var(--mono); }
.pf-pair { font-size:.9rem; font-weight:700; color:var(--text0); }
.pf-arrow { color:var(--text2); font-size:.8rem; }
.pf-out  { font-size:.9rem; font-weight:700; color:var(--cyan); }
.pf-rule-badge {
  margin-left:auto; font-size:.65rem; padding:2px 7px; border-radius:4px;
  font-family:var(--mono);
}
.r1 .pf-rule-badge { background:var(--green-dim); color:var(--green); }
.r2 .pf-rule-badge { background:var(--amber-dim); color:var(--amber); }
.r3 .pf-rule-badge { background:var(--blue-dim);  color:var(--blue);  }

.pf-pair-note { color:var(--text2); font-family:var(--mono); margin-bottom:5px; }
.pf-detail-steps { display:flex; flex-direction:column; gap:2px; }
.pf-ds { font-family:var(--mono); font-size:.74rem; color:var(--text1); line-height:1.5; }
.pf-card-footer { margin-top:6px; font-family:var(--mono); font-size:.7rem; color:var(--text3); border-top:1px solid var(--border); padding-top:5px; }
.rule-name { color:var(--text2); }

.pf-bigram { font-size:1rem; font-weight:700; letter-spacing:2px; }
.rule-cell { font-family:var(--mono); font-size:.75rem; }
.rule-cell.r1 { color:var(--green); }
.rule-cell.r2 { color:var(--amber); }
.rule-cell.r3 { color:var(--blue); }

/* ── History modal ───────────────────────────────────── */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.72);
  backdrop-filter:blur(8px); z-index:200;
  display:flex; align-items:center; justify-content:center; padding:1rem;
  opacity:0; pointer-events:none; transition:opacity .3s;
}
.modal-overlay.open { opacity:1; pointer-events:all; }
.modal {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--r); width:100%; max-width:680px;
  max-height:80vh; overflow:hidden;
  display:flex; flex-direction:column;
  transform:scale(.96); transition:transform .3s;
}
.modal-overlay.open .modal { transform:scale(1); }
.modal-hd {
  display:flex; align-items:center; justify-content:space-between;
  padding:1.2rem 1.5rem; border-bottom:1px solid var(--border);
}
.modal-hd h3 { font-size:1rem; font-weight:700; }
.modal-close {
  background:none; border:none; color:var(--text2);
  font-size:1.3rem; cursor:pointer; padding:4px;
  border-radius:5px; transition:all .2s; line-height:1;
}
.modal-close:hover { background:var(--bg3); color:var(--text0); }
.modal-body { overflow-y:auto; padding:1.2rem; flex:1; }

.empty-state { text-align:center; color:var(--text2); font-family:var(--mono); padding:2rem; font-size:.85rem; }
.hist-item {
  background:var(--bg1); border:1px solid var(--border);
  border-radius:var(--r-sm); padding:10px 14px; margin-bottom:8px;
  transition:border-color .2s;
}
.hist-item:hover { border-color:var(--border2); }
.hist-top { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.hist-cipher { font-family:var(--mono); font-weight:700; font-size:.85rem; color:var(--blue); }
.hist-mode { font-family:var(--mono); font-size:.68rem; font-weight:700; padding:2px 8px; border-radius:4px; }
.hist-mode.encrypt { background:var(--green-dim); color:var(--green); }
.hist-mode.decrypt { background:var(--amber-dim); color:var(--amber); }
.hist-time { margin-left:auto; font-family:var(--mono); font-size:.7rem; color:var(--text3); }
.hist-io { font-family:var(--mono); font-size:.78rem; color:var(--text1); margin-bottom:3px; }
.hist-lbl { color:var(--text3); display:inline-block; width:28px; }
.hist-io code { color:var(--text0); }
.out-code { color:var(--cyan) !important; }
.hist-key { font-family:var(--mono); font-size:.72rem; color:var(--text3); }

/* ── Toast ───────────────────────────────────────────── */
.toast {
  position:fixed; bottom:20px; right:20px;
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--r-sm); padding:10px 18px;
  font-family:var(--mono); font-size:.8rem; color:var(--text0);
  box-shadow:0 8px 30px rgba(0,0,0,.35); z-index:300;
  transform:translateY(80px); opacity:0; transition:all .3s;
  pointer-events:none;
}
.toast.show { transform:translateY(0); opacity:1; }
.toast.ok   { border-color:var(--green); }
.toast.err  { border-color:var(--red); }

/* ── Footer ──────────────────────────────────────────── */
footer {
  border-top:1px solid var(--border); margin-top:4rem;
  padding:1.5rem 0; color:var(--text2); font-size:.78rem; font-family:var(--mono);
}
.footer-inner { display:flex; flex-direction:column; gap:5px; align-items:center; }
.footer-ciphers { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; color:var(--text3); }
.footer-note { color:var(--text3); }

/* ── Scrollbar ───────────────────────────────────────── */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:var(--bg0); }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--border2); }

/* ── Responsive ──────────────────────────────────────── */
@media(max-width:900px) {
  .io-grid { grid-template-columns:1fr; }
  .hill-mult-layout { flex-direction:column; align-items:center; }
  .mult-sym { padding-top:0; }
  .pf-cards .pf-card { width:100%; }
}
@media(max-width:640px) {
  .navbar { padding:.8rem 1rem; }
  .container { padding:0 1rem; }
  .hero { padding:2rem 0 1.2rem; }
  .tab-btn { padding:7px 14px; font-size:.75rem; }
  .formula-equations { flex-direction:column; gap:.8rem; }
  .row-2 { grid-template-columns:1fr; }
  .pf-grid { grid-template-columns:28px repeat(5,42px); }
  .pf-col-labels { grid-template-columns:28px repeat(5,42px); }
  .pf-cell { width:42px; height:42px; font-size:.9rem; }
  .pf-rules { flex-direction:column; }
}