/* HTTA Features — inherits the theme's light/dark variables (data-theme on <html>) */
.htta-compat{border-left:4px solid;padding:.6em .9em;background:var(--color-muted);color:var(--color-foreground);border-radius:0 var(--radius,6px) var(--radius,6px) 0;margin:1.2em 0}
.htta-compat-ok{border-left-color:var(--color-accent)}
.htta-compat-warn{border-left-color:#d97706}
.htta-devices{background:var(--color-muted);color:var(--color-foreground);border-radius:var(--radius,8px);padding:1em 1.2em;margin:1.5em 0}
.htta-devices h2,.htta-devices h3{color:var(--color-foreground)}
.htta-save-btn{background:var(--color-accent);color:var(--color-on-accent);border:0;border-radius:var(--radius,6px);padding:.6em 1.2em;font-size:1em;font-weight:600;cursor:pointer}
.htta-fancy label{display:block;font-weight:600;margin-bottom:.4em;color:var(--color-foreground)}
.htta-fancy textarea{width:100%;font-size:1.1em;padding:.6em;border:1px solid var(--color-border);border-radius:var(--radius,6px);box-sizing:border-box;background:var(--color-card);color:var(--color-card-foreground);font-family:var(--font-sans)}
.htta-fancy-styles{margin-top:.8em}
.htta-fancy-row{display:flex;gap:1em;align-items:center;width:100%;text-align:left;background:var(--color-card);color:var(--color-card-foreground);border:1px solid var(--color-border);border-radius:var(--radius,8px);padding:.7em 1em;margin:.5em 0;cursor:pointer;font-size:1.15em;font-family:var(--font-sans)}
.htta-fancy-row:hover{border-color:var(--color-accent)}
.htta-fancy-label{flex:0 0 130px;font-size:.8em;color:var(--color-muted-foreground)}
.htta-fancy-val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.htta-fancy-hint{color:var(--color-muted-foreground);font-size:.9em}
.htta-tray-fab{position:fixed;right:18px;bottom:18px;z-index:9999;background:var(--color-accent);color:var(--color-on-accent);border:0;border-radius:999px;padding:.7em 1.1em;font-size:1em;font-weight:600;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.htta-tray{position:fixed;right:18px;bottom:76px;z-index:9999;width:300px;max-height:60vh;overflow:auto;background:var(--color-card);color:var(--color-card-foreground);border:1px solid var(--color-border);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.2);padding:.8em 1em}
.htta-tray-head{display:flex;justify-content:space-between;align-items:center;color:var(--color-card-foreground)}
.htta-tray-head button{background:none;border:0;font-size:1.3em;cursor:pointer;line-height:1;color:var(--color-card-foreground)}
.htta-tray-sec .htta-tray-title{margin:.7em 0 .3em;font-size:.85em;font-weight:700;color:var(--color-muted-foreground);text-transform:uppercase;letter-spacing:.04em}
.htta-tray-list{display:flex;flex-wrap:wrap;gap:.4em}
.htta-chip{display:inline-flex;align-items:center;gap:.35em;background:var(--color-muted);color:var(--color-foreground);border-radius:6px;padding:.35em .6em;font-size:1.2em;cursor:pointer}
.htta-chip b{font-weight:400}
.htta-chip i{font-style:normal;color:var(--color-muted-foreground);font-size:.8em;cursor:pointer}
.htta-empty{font-size:.85em;color:var(--color-muted-foreground)}

/* Top-40 guide long-form content */
.htta-about{background:var(--color-card);color:var(--color-card-foreground);border:1px solid var(--color-border);border-radius:var(--radius,8px);padding:1em 1.4em;margin:1.5em 0}
.htta-about h2{margin-top:0}
.htta-ref{margin:1.5em 0}
.htta-ref-table{width:100%;border-collapse:collapse;font-size:.95em}
.htta-ref-table th,.htta-ref-table td{border:1px solid var(--color-border);padding:.45em .7em;text-align:left;vertical-align:top}
.htta-ref-table th{background:var(--color-muted);color:var(--color-foreground);width:32%}
.htta-ref-table td code{font-family:var(--font-mono,monospace);background:var(--color-muted);padding:.1em .35em;border-radius:4px;word-break:break-all}