.htl-wrap{--htl-primary:#0f172a;--htl-accent:#0ea5e9;--htl-bg:#fff;--htl-text:#0f172a;--htl-grad-from:#0ea5e9;--htl-grad-to:#22d3ee;--htl-btn-bg:#0f172a;--htl-btn-text:#fff;--htl-radius:12px;--htl-font:Inter, system-ui, sans-serif;--htl-max:900px;--htl-scope-h:160px;--htl-gap:12px}
.htl-wrap{max-width:var(--htl-max);margin:24px auto;padding:0 16px;font-family:var(--htl-font);color:var(--htl-text)}
.htl-card{border:1px solid #e5e7eb;border-radius:var(--htl-radius);padding:18px;background:var(--htl-bg)}
.shadow-sm .htl-card{box-shadow:0 6px 16px rgba(15,23,42,.06)} .shadow-md .htl-card{box-shadow:0 10px 28px rgba(15,23,42,.1)}
.align-center .htl-card{margin-left:auto;margin-right:auto} .align-left .htl-card{margin-left:0}
.htl-head h2{margin:0 0 6px 0;font-weight:800;letter-spacing:-.2px;color:var(--htl-primary)}
.htl-sub{margin:0;color:#64748b}
.htl-body{display:flex;gap:var(--htl-gap);align-items:stretch;margin-top:12px}
.htl-visual{flex:1} .htl-controls{flex:1;min-width:300px}
.layout-centered .htl-body{flex-direction:column}
.layout-split .htl-body{flex-direction:row}
.layout-compact .htl-body{flex-direction:column} .layout-compact .htl-controls .htl-row{margin:6px 0}
@media(max-width:900px){ .htl-body{flex-direction:column} .htl-controls{min-width:initial} }
.htl-scope{width:100%;height:var(--htl-scope-h);display:block;border:1px solid #e5e7eb;border-radius:calc(var(--htl-radius) - 2px);background:linear-gradient(180deg,#f8fafc,#fff)}
.htl-row{display:flex;align-items:center;gap:var(--htl-gap);margin:10px 0;flex-wrap:wrap}
.htl-btn{border-radius:calc(var(--htl-radius) - 2px);padding:10px 14px;font-weight:700;cursor:pointer}
.btn-solid .htl-btn{background:var(--htl-btn-bg);border:1px solid transparent;color:var(--htl-btn-text)}
.btn-outline .htl-btn{background:transparent;border:1px solid var(--htl-btn-bg);color:var(--htl-btn-bg)}
.btn-soft .htl-btn{background:linear-gradient(90deg, var(--htl-grad-from), var(--htl-grad-to));border:1px solid transparent;color:#fff}
.htl-btn[disabled]{opacity:.5;cursor:not-allowed}
.htl-freq,.htl-vol{width:360px;max-width:100%}
.htl-result{display:flex;gap:16px}
.htl-ads{margin-top:16px;text-align:center}
.htl-theme-neo .htl-card{background:#f8fafc; box-shadow:inset 0 1px 0 #fff, 0 10px 30px rgba(2,6,23,.06)}
.htl-theme-minimal .htl-card{background:var(--htl-bg); border-color:#f1f5f9}
.htl-theme-glass .htl-card{background:rgba(255,255,255,.6);backdrop-filter:blur(10px); border-color:rgba(255,255,255,.7)}