:root {
  --hhb-ink: #15211c;
  --hhb-muted: #66726c;
  --hhb-line: #dce3dc;
  --hhb-paper: #ffffff;
  --hhb-canvas: #f4f6f2;
  --hhb-green: #0e8a65;
  --hhb-green-deep: #056447;
  --hhb-mint: #dff8ed;
  --hhb-shadow: 0 18px 45px rgba(20, 47, 35, .1);
}

html[data-theme="dark"] {
  --hhb-ink: #ebf4ee;
  --hhb-muted: #a7b6ad;
  --hhb-line: #334139;
  --hhb-paper: #16201b;
  --hhb-canvas: #0d1410;
  --hhb-green: #42bf91;
  --hhb-green-deep: #2fa77b;
  --hhb-mint: #173c2e;
  --hhb-shadow: 0 18px 45px rgba(0, 0, 0, .28);
}

.hhb-shell, .hhb-shell * { box-sizing: border-box; }
.hhb-shell { color: var(--hhb-ink); font-family: Poppins, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; max-width: 1240px; margin: 0 auto; padding: 44px 20px 44px; }
.hhb-hero { text-align: center; max-width: 700px; margin: 0 auto 30px; }
.hhb-eyebrow { margin: 0 0 9px; color: var(--hhb-green); font: 700 11px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .16em; }
.hhb-hero h1 { margin: 0; color: var(--hhb-ink); font-size: clamp(31px, 4vw, 48px); letter-spacing: -.055em; line-height: 1.05; }
.hhb-hero > p { color: var(--hhb-muted); margin: 13px 0 0; font-size: 16px; }
.hhb-workspace { width: 100%; background: var(--hhb-paper); border: 1px solid var(--hhb-line); box-shadow: var(--hhb-shadow); border-radius: 22px; overflow: hidden; }
.hhb-tool-tabs { display: flex; gap: 8px; padding: 12px 18px 11px; border-bottom: 1px solid var(--hhb-line); overflow-x: auto; scrollbar-width: thin; }
.hhb-tool-tab { position: relative; display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; color: var(--hhb-ink); text-decoration: none; border: 1px solid var(--hhb-line); border-radius: 999px; padding: 10px 15px; font-size: 13px; font-weight: 700; white-space: nowrap; transition: .2s ease; }
.hhb-tool-tab:hover, .hhb-tool-tab.is-active { background: var(--hhb-ink); border-color: var(--hhb-ink); color: var(--hhb-paper); }
.hhb-new { color: #089a6c; font-size: 9px; font-weight: 800; letter-spacing: .06em; }
.hhb-tool-tab.is-active .hhb-new { color: #8ae5bd; }
.hhb-goalbar { min-height: 56px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 10px 20px; background: color-mix(in srgb, var(--hhb-paper) 89%, var(--hhb-canvas)); border-bottom: 1px solid var(--hhb-line); }
.hhb-goalbar > span { color: var(--hhb-muted); margin-right: 9px; font: 700 10px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .13em; }
.hhb-goalbar small { color: var(--hhb-muted); margin-left: auto; font: 12px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.hhb-chip { cursor: pointer; border: 1px solid var(--hhb-line); color: var(--hhb-ink); background: transparent; border-radius: 99px; padding: 8px 13px; font-size: 12px; font-weight: 700; transition: .2s ease; }
.hhb-chip:hover, .hhb-chip.is-active { color: #fff; border-color: var(--hhb-green); background: var(--hhb-green); }
.hhb-panels { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); height: 470px; min-height: 470px; }
.hhb-input-panel, .hhb-result-panel { height: 470px; padding: 22px; display: flex; flex-direction: column; min-width: 0; }
.hhb-input-panel { border-right: 1px solid var(--hhb-line); }
.hhb-input-panel > label, .hhb-result-title { font-size: 14px; font-weight: 800; color: var(--hhb-ink); }
.hhb-hint, .hhb-result-subtitle { margin: 9px 0 10px; color: var(--hhb-muted); font-size: 14px; line-height: 1.65; }
.hhb-source { resize: none; flex: 1; min-height: 160px; width: 100%; padding: 5px 0; border: 0; outline: 0; background: transparent; color: var(--hhb-ink); font: 15px/1.7 Poppins, ui-sans-serif, system-ui, sans-serif; }
.hhb-source::placeholder { color: color-mix(in srgb, var(--hhb-muted) 72%, transparent); }
.hhb-input-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 16px auto; width: min(100%, 390px); }
.hhb-secondary { cursor: pointer; display: flex; gap: 7px; justify-content: center; align-items: center; min-height: 45px; padding: 8px 10px; background: transparent; color: var(--hhb-ink); border: 1px solid var(--hhb-line); border-radius: 12px; font-size: 12px; font-weight: 750; white-space: nowrap; }
.hhb-secondary:hover { border-color: var(--hhb-green); color: var(--hhb-green); }
.hhb-input-footer, .hhb-result-footer { border-top: 1px dashed var(--hhb-line); padding-top: 13px; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--hhb-muted); font-size: 12px; line-height: 1.45; }
.hhb-input-footer strong { color: var(--hhb-ink); }
.hhb-input-footer a { color: var(--hhb-muted); text-underline-offset: 3px; }
.hhb-run { cursor: pointer; flex: 0 0 auto; border: 0; border-radius: 99px; color: #fff; background: var(--hhb-green); padding: 13px 20px; min-width: 150px; font-size: 14px; font-weight: 800; transition: transform .15s ease, background .15s ease; }
.hhb-run:hover { background: var(--hhb-green-deep); transform: translateY(-1px); }
.hhb-run:disabled { cursor: wait; opacity: .7; transform: none; }
.hhb-result-panel { background: color-mix(in srgb, var(--hhb-paper) 95%, var(--hhb-canvas)); }
.hhb-result-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.hhb-status { flex: 0 0 auto; color: var(--hhb-green-deep); background: var(--hhb-mint); border-radius: 99px; padding: 6px 9px; font-size: 11px; font-weight: 800; }
.hhb-result { flex: 1; min-height: 210px; overflow: auto; color: var(--hhb-ink); font-size: 15px; line-height: 1.72; padding: 12px 0 20px; white-space: pre-wrap; }
.hhb-result.empty { display: grid; place-content: center; text-align: center; color: var(--hhb-muted); }
.hhb-empty-icon { display: grid; place-items: center; margin: 0 auto 10px; width: 39px; height: 39px; border-radius: 50%; background: var(--hhb-mint); color: var(--hhb-green); font-size: 18px; }
.hhb-result.empty p { margin: 0; }
.hhb-copy { cursor: pointer; flex: 0 0 auto; border: 1px solid var(--hhb-line); border-radius: 999px; color: var(--hhb-ink); background: transparent; padding: 11px 16px; font-size: 12px; font-weight: 800; }
.hhb-copy:not(:disabled):hover { border-color: var(--hhb-green); color: var(--hhb-green); }
.hhb-copy:disabled { cursor: not-allowed; opacity: .45; }
.hhb-disclaimer { border-top: 1px solid var(--hhb-line); padding: 14px 20px; display: flex; justify-content: center; gap: 9px; text-align: center; color: var(--hhb-muted); font-size: 11px; font-style: italic; }
.hhb-guide { max-width: 1120px; margin: 32px auto 0; padding: 34px; border: 1px solid var(--hhb-line); border-radius: 22px; background: var(--hhb-paper); color: var(--hhb-ink); }
.hhb-guide-intro > span { display: block; color: var(--hhb-green); font: 800 10px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .15em; }.hhb-guide h2 { margin: 9px 0; font-size: 27px; letter-spacing: -.045em; }.hhb-guide p { max-width: 680px; margin: 0; color: var(--hhb-muted); font-size: 14px; line-height: 1.7; }.hhb-guide-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 28px; }.hhb-guide-grid > div { padding: 20px; border-radius: 14px; background: color-mix(in srgb, var(--hhb-paper) 90%, var(--hhb-canvas)); }.hhb-guide-grid h3 { margin: 0 0 13px; font-size: 14px; }.hhb-guide-grid ol, .hhb-guide-grid ul { margin: 0; padding-left: 20px; color: var(--hhb-muted); font-size: 13px; line-height: 1.75; }.hhb-guide-grid li + li { margin-top: 7px; }
.hhb-detector-score { display: grid; grid-template-columns: 118px 1fr; align-items: center; gap: 22px; margin: 16px 0; padding: 18px; border-radius: 16px; background: var(--hhb-mint); }
.hhb-score-ring { --score: 40; display: grid; place-items: center; width: 104px; height: 104px; border-radius: 50%; background: conic-gradient(var(--hhb-green) calc(var(--score) * 1%), color-mix(in srgb, var(--hhb-line) 80%, transparent) 0); }
.hhb-score-ring::before { content: ""; grid-area: 1 / 1; width: 82px; height: 82px; border-radius: 50%; background: var(--hhb-paper); }
.hhb-score-ring strong { grid-area: 1 / 1; position: relative; color: var(--hhb-ink); font-size: 23px; letter-spacing: -.06em; }
.hhb-score-ring strong span { font-size: 11px; }
.hhb-detector-score h3 { margin: 0 0 5px; font-size: 16px; }
.hhb-detector-score p { margin: 0; color: var(--hhb-muted); font-size: 13px; line-height: 1.5; }
.hhb-signals { margin: 15px 0 0; padding: 0; list-style: none; }
.hhb-signals li { padding: 8px 0; border-bottom: 1px solid var(--hhb-line); font-size: 13px; }
.hhb-signals li::before { content: "✓"; color: var(--hhb-green); font-weight: 900; margin-right: 8px; }
.hhb-issues { margin: 16px 0 0; padding: 0; list-style: none; }
.hhb-issues li { padding: 10px 12px; margin-bottom: 8px; border-left: 3px solid var(--hhb-green); border-radius: 0 8px 8px 0; background: var(--hhb-mint); font-size: 13px; line-height: 1.4; }
.hhb-issues b { color: var(--hhb-green-deep); }
.hhb-error { display: flex; gap: 8px; align-items: flex-start; color: #9e2929; background: #fff1f1; border: 1px solid #f4cece; padding: 13px; border-radius: 10px; font-size: 13px; line-height: 1.4; }
html[data-theme="dark"] .hhb-error { background: #3a1c1d; border-color: #704146; color: #ffc4c4; }
@media (max-width: 780px) { .hhb-shell { padding: 28px 12px 30px; } .hhb-hero { margin-bottom: 22px; } .hhb-panels { grid-template-columns: 1fr; height: auto; } .hhb-input-panel { height: 430px; border-right: 0; border-bottom: 1px solid var(--hhb-line); } .hhb-result-panel { height: 360px; } .hhb-goalbar small { display: none; } .hhb-input-actions { width: 100%; } .hhb-guide { margin: 25px 12px 0; padding: 24px 18px; }.hhb-guide-grid { grid-template-columns: 1fr; gap: 14px; } }
@media (max-width: 440px) { .hhb-tool-tabs { padding-left: 12px; } .hhb-goalbar { padding: 12px; } .hhb-goalbar > span { width: 100%; } .hhb-input-panel, .hhb-result-panel { padding: 16px; } .hhb-input-actions { grid-template-columns: 1fr; } .hhb-input-footer { align-items: flex-end; } .hhb-run { min-width: auto; padding: 13px 15px; } .hhb-disclaimer { display: block; } .hhb-disclaimer span:nth-child(2) { display: none; } .hhb-detector-score { grid-template-columns: 1fr; } }