/* Extracted from inline <style> block(s) for CSP style-src compliance. */
.tool-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 32px; }
    .mode-tabs { display:flex; gap:10px; margin-bottom:24px; flex-wrap:wrap; }
    .tool-output { display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,.25); border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px; margin-bottom: 18px; }
    .tool-output input { flex: 1; min-width:0; background: none; border: none; outline: none; color: #fff; font-family: 'Space Grotesk', monospace; font-size: clamp(16px, 2.5vw, 21px); letter-spacing: .4px; }
    .icon-btn { padding:10px 13px !important; white-space:nowrap; }
    .tool-controls { display: grid; gap: 18px; }
    .tool-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
    .tool-row label { font-size: 14px; color: #c8d8ec; }
    .tool-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .tool-check { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #c8d8ec; }
    .tool-check input { width: 17px; height: 17px; accent-color: var(--blue2); }
    .tool-field { display:flex; flex-direction:column; align-items:flex-start; gap:7px; font-size:14px; color:#c8d8ec; }
    .tool-field select, .tool-field input[type=text] { background: rgba(0,0,0,.25); border: 1px solid var(--border); border-radius: 10px; color: #fff; padding: 9px 12px; width: 100%; }
    input[type=range] { width: 100%; accent-color: var(--blue2); }
    .preset-grid { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:10px; margin: 0 0 22px; }
    .preset-grid button { font-size:13px; padding:10px 12px; }
    .strength-card { border:1px solid var(--border); border-radius:var(--r-md); padding:18px; background:rgba(255,255,255,.035); margin-bottom:24px; }
    .strength-bar { height: 12px; border-radius: 999px; background: var(--border); overflow: hidden; margin-top: 12px; }
    .strength-fill { height: 100%; border-radius: 999px; transition: width .25s, background .25s; }
    .strength-label { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size: 13px; color: var(--muted); margin-top: 10px; }
    .strength-main { color:#fff; font-weight:600; }
    .tool-actions { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
    .history-list { display:grid; gap:8px; margin-top:12px; }
    .history-item { display:flex; gap:10px; align-items:center; justify-content:space-between; background:rgba(0,0,0,.18); border:1px solid var(--border); border-radius:10px; padding:9px 11px; color:#c8d8ec; font-family:'Space Grotesk', monospace; font-size:13px; overflow:hidden; }
    .history-item span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    details.faq { border-top:1px solid var(--border); padding:18px 0; }
    details.faq summary { cursor:pointer; font-weight:600; color:#fff; }
    details.faq p { margin-top:10px; }
    @media (max-width:900px) { .preset-grid { grid-template-columns:1fr 1fr; } }
    @media (max-width:600px) { .tool-panel { padding:22px; } .tool-panel > .term-titlebar { margin: -22px -22px 20px -22px; } .tool-checks, .preset-grid { grid-template-columns: 1fr; } .tool-output { flex-wrap:wrap; } .tool-output input { flex-basis:100%; } }