.b18-security-tool {
  --b18-ink: var(--text, #132238);
  --b18-muted: var(--muted, #5b6b82);
  --b18-border: var(--border, #d9e1ec);
  --b18-panel: var(--surface-2, #f7f9fc);
  --b18-accent: #3156d3;
  color: var(--b18-ink);
  display: grid;
  gap: 1rem;
  margin: 0 auto;
  max-width: 1120px;
  padding: 1rem;
}
[data-theme="dark"] .b18-security-tool { --b18-accent: #90b4ff; }
.b18-security-heading { align-items: end; display: flex; gap: 1rem; justify-content: space-between; }
.b18-security-heading > div > span { color: var(--b18-accent); font-size: .72rem; font-weight: 800; letter-spacing: .14em; }
.b18-security-heading h2, .b18-security-heading p { margin: 0; }
.b18-security-heading h2 { font-size: clamp(1.35rem, 3vw, 2rem); }
.b18-security-heading p, .b18-codec-note { color: var(--b18-muted); line-height: 1.55; }
.b18-codec-note { background: color-mix(in srgb, var(--b18-accent) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--b18-accent) 30%, var(--b18-border)); border-radius: .75rem; padding: .75rem .9rem; }
.b18-codec-options { align-items: end; display: flex; flex-wrap: wrap; gap: 1rem; }
.b18-codec-options label { display: grid; font-weight: 700; gap: .4rem; }
.b18-codec-options select { border: 1px solid var(--b18-border); border-radius: .55rem; font: inherit; padding: .65rem .75rem; }
.b18-check { align-items: center; display: flex !important; min-height: 2.6rem; }
.b18-codec-editors, .b18-codec-results { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.b18-codec-pane { background: var(--b18-panel); border: 1px solid var(--b18-border); border-radius: .75rem; display: grid; gap: .55rem; padding: .75rem; }
.b18-codec-pane-head { align-items: center; display: flex; gap: .75rem; justify-content: space-between; }
.b18-codec-pane-head label { font-weight: 800; }
.b18-codec-pane-head span { color: var(--b18-muted); font-size: .78rem; }
.b18-codec-pane textarea { background: var(--surface, #fff); color: var(--b18-ink); border: 1px solid var(--b18-border); border-radius: .55rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; line-height: 1.5; min-height: 8rem; padding: .7rem; resize: vertical; width: 100%; }
.b18-codec-alphabet { background: #172235; border-radius: .55rem; color: #f1f5ff; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; padding: .75rem; }
.b18-codec-actions { display: flex; flex-wrap: wrap; gap: .55rem; }
.b18-security-status { border-left: 3px solid var(--b18-accent); color: var(--b18-muted); min-height: 1.5rem; padding: .35rem .65rem; }
.b18-security-status[data-tone="error"] { border-color: var(--danger, #bb2f3c); color: var(--danger, #982431); }
.b18-security-status[data-tone="success"] { border-color: var(--success, #15875c); color: var(--success, #126a4a); }
.b18-security-tool button:focus-visible, .b18-security-tool input:focus-visible, .b18-security-tool select:focus-visible, .b18-security-tool textarea:focus-visible { outline: 3px solid var(--focus, #3156d3); outline-offset: 2px; }
@media (max-width: 700px) { .b18-security-heading, .b18-codec-editors, .b18-codec-results { grid-template-columns: 1fr; } .b18-security-heading { align-items: start; display: grid; } }
@media (prefers-reduced-motion: reduce) { .b18-security-tool * { scroll-behavior: auto !important; transition-duration: .001ms !important; } }