/* HSS Toolbox shared look: top menu, sub bar and buttons. Served from the web root as /hss-nav.css
   and loaded by the landing page and every tool. Colours follow html[data-theme=light|dark]. */
:root{--hss-bg:#f5f7fa;--hss-card:#fff;--hss-text:#1b2733;--hss-muted:#5f6f7f;--hss-line:#d9e0e8;--hss-accent:#0071ba;--hss-soft:#e6f1fa;--hss-bad:#b3261e}
:root[data-theme=dark]{--hss-bg:#12181f;--hss-card:#1b242d;--hss-text:#e6edf3;--hss-muted:#98a6b3;--hss-line:#2c3945;--hss-accent:#4aa3e0;--hss-soft:#1b2d3d;--hss-bad:#ff8a80}

/* ---- common top menu ---- */
.hss-nav{flex-shrink:0;position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:var(--hss-card);border-bottom:1px solid var(--hss-line);font:15px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--hss-text)}
.hss-nav a{text-decoration:none}
.hss-nav .hss-brand{display:flex;align-items:center;gap:.5rem;font-weight:700;color:var(--hss-text);white-space:nowrap;margin-right:.5rem}
.hss-nav .hss-brand img{height:1.7rem;width:1.7rem;display:block}
.hss-nav .hss-links{display:flex;gap:.25rem;flex:1;min-width:0;overflow-x:auto;scrollbar-width:thin}
.hss-nav .hss-link{color:var(--hss-text);padding:.35rem .8rem;border:1px solid transparent;border-radius:6px;white-space:nowrap}
.hss-nav .hss-link:hover{border-color:var(--hss-line);color:var(--hss-accent)}
.hss-nav .hss-link[aria-current=page]{background:var(--hss-soft);color:var(--hss-accent);border-color:var(--hss-accent);font-weight:600}
.hss-nav .hss-link:focus-visible,.hss-nav button:focus-visible{outline:2px solid var(--hss-accent);outline-offset:1px}
.hss-nav button.hss-theme{font:inherit;color:var(--hss-accent);background:none;border:1px solid var(--hss-line);border-radius:6px;padding:.3rem .8rem;cursor:pointer;white-space:nowrap}
.hss-nav button.hss-theme:hover{border-color:var(--hss-accent)}
@media(max-width:560px){.hss-nav{padding:.5rem}.hss-nav .hss-brand span{display:none}}

/* ---- sub bar: the tool's own pages and Sign out, under the top menu ---- */
.hss-sub{flex-shrink:0;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;padding:.5rem 1rem;background:var(--hss-bg);border-bottom:1px solid var(--hss-line);font:15px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.hss-sub .hss-title{font-weight:600;color:var(--hss-text);text-decoration:none;margin-right:auto;display:flex;align-items:center}
.hss-sub .hss-title img{height:1.4rem;width:1.4rem;margin-right:.5rem}
.hss-sub .hss-sublink{font:inherit;cursor:pointer;color:var(--hss-accent);background:var(--hss-card);border:1px solid var(--hss-line);border-radius:6px;padding:.25rem .7rem;text-decoration:none}
.hss-sub .hss-sublink:hover{border-color:var(--hss-accent)}

/* ---- shared buttons (same look on every tool) ---- */
.btn,button.primary{display:inline-block;background:var(--hss-accent);color:#fff;border:0;border-radius:6px;padding:.5rem 1rem;font:inherit;cursor:pointer;text-decoration:none}
button.primary{padding:.6rem 1.2rem}
.btn:hover,button.primary:hover{filter:brightness(1.08)}
.btn.sec{background:none;color:var(--hss-accent);border:1px solid var(--hss-line)}
.btn.sec:hover{border-color:var(--hss-accent);filter:none}
.btn.danger{color:var(--hss-bad)}
.btn.small{padding:.2rem .7rem;font-size:.85rem}
button:disabled{opacity:.55;cursor:default}
.hss-sub form{margin:0}