/* Standard header (Rolly 2026-10-12): ONE design for every web UI, taken value for value from the Koyta app's top bar (which uses the Triple G clock widget):
   Koyta bar x1.32 in two steps (Rolly 2026-10-12, "get the logos bigger"): 137 px bar, logo 106 px, assistant image 101 px with caption, 84 px image slot; search 560 px wide, clock widget at zoom .75 with its blue-to-gold frame, gold primary button, bell, sparkles button, avatar, sign-out.
   Logos and brand images are dashed PLACEHOLDER slots until client art is passed in. The bar is its own stacking context (position + z-index) so the clock frame's gradient shows, as in Triple G.
   Colours are the Koyta dark values, except the faint text grey (Koyta #484f58 was too dull to read on the dark bar; Rolly 2026-10-12): #8b949e; in a light page theme the text and borders fall back to the host page's variables. All classes are prefixed sh-; the root also carries "top" for older page scripts. */
.top.sh{--sh-card:#1a212c;--sh-sec:#252e3b;--sh-border:#37455a;--sh-bmid:#4b5b73;--sh-text:#e6edf3;--sh-mid:#c9d1d9;--sh-light:#8b949e;--sh-faint:#8b949e;--sh-gold:#ef9f27;--sh-bg:#0d1117;--sh-red:#f85149;
  position:relative;z-index:10;display:flex;align-items:center;gap:12px;height:137px;padding:0 16px;box-sizing:border-box;flex-shrink:0;background:var(--sh-card);border-bottom:1px solid var(--sh-border);color:var(--sh-text)}
:root[data-theme="light"] .top.sh{--sh-card:var(--panel);--sh-sec:var(--panel2);--sh-border:var(--line);--sh-bmid:var(--line);--sh-text:var(--text);--sh-mid:var(--mid);--sh-light:var(--light);--sh-faint:var(--light);--sh-bg:#fff}
/* image slots: dashed placeholders until art is supplied */
.sh-slot{display:flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;border:1.5px dashed var(--sh-bmid);color:var(--sh-faint)}
.sh-slot svg{width:22px;height:22px}
.sh-logo{width:106px;height:106px;border-radius:50%}
.sh-far{width:84px;height:84px;border-radius:10px}
.sh-slot.sh-img{border:0;border-radius:0;width:auto;height:auto;display:block}
.sh-slot.sh-img img{display:block;width:auto;max-width:none}
.sh-logo.sh-img img{height:106px}
.sh-far.sh-img img{height:106px}      /* the module (product) logo: same height as the left logo */
.sh-div{width:1px;height:36px;flex-shrink:0;background:var(--sh-bmid)}
/* date and live clock: the Triple G / Koyta widget, same values */
.sh-clock{zoom:.75;background:#0f1923;background-clip:padding-box;border:1.5px solid transparent;border-radius:14px;flex-shrink:0;align-items:stretch;display:inline-flex;position:relative;overflow:visible;box-shadow:inset 0 0 0 .5px #2a4a7f22}
.sh-clock:before{content:"";z-index:-1;background:linear-gradient(135deg,#4a9eff 0%,#1e3a5f 40% 60%,#ef9f27 100%);border-radius:15px;position:absolute;inset:-1.5px}
.sh-clock i{font-style:normal;display:inline-flex}
.sh-clock svg{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:1.8}
.dt-left{align-items:center;gap:14px;padding:10px 20px 10px 14px;display:flex}
.dt-icon-wrap{background:#0a1628;border:1.5px solid #1e3a5f;border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;width:52px;height:52px;display:flex;position:relative}
.dt-icon-wrap i{color:#4a9eff;font-size:28px}
.dt-left-text{flex-direction:column;gap:2px;display:flex}
.dt-dayname{color:#4a9eff;letter-spacing:.1em;text-transform:uppercase;align-items:center;gap:6px;font-size:11px;font-weight:600;display:flex}
.dt-dot{background:#4a9eff;border-radius:50%;width:5px;height:5px}
.dt-date{color:#e6edf3;letter-spacing:-.02em;white-space:nowrap;font-size:22px;font-weight:600;line-height:1.1}
.dt-sub{color:#4a6a8a;white-space:nowrap;align-items:center;gap:8px;margin-top:2px;font-size:11px;display:flex}
.dt-sub i{color:#2a5a8a;font-size:11px}
.dt-sub-sep{color:#1e3a5f}
.dt-divider{background:linear-gradient(#0000,#1e3a5f 20% 80%,#0000);width:1px;margin:8px 0}
.dt-right{flex-direction:column;justify-content:center;min-width:160px;padding:10px 20px;display:flex}
.dt-time-row{align-items:flex-start;gap:4px;line-height:1;display:flex}
.dt-hours,.dt-mins{color:#e6edf3;letter-spacing:-.03em;font-variant-numeric:tabular-nums;font-size:42px;font-weight:700;line-height:1}
.dt-colon{color:#4a6a8a;font-size:42px;font-weight:300;line-height:1;transition:opacity .15s}
.dt-ampm-sec{flex-direction:column;justify-content:flex-start;gap:2px;margin-left:4px;padding-top:4px;display:flex}
.dt-ampm{color:#ef9f27;letter-spacing:.05em;font-size:13px;font-weight:600;line-height:1}
.dt-sec{color:#4a9eff;font-variant-numeric:tabular-nums;font-size:15px;font-weight:600;line-height:1}
.dt-tz{color:#4a6a8a;white-space:nowrap;align-items:center;gap:5px;margin-top:4px;font-size:11px;display:flex}
.dt-tz i{font-size:11px}
/* search */
.sh-search{flex:0 1 560px;min-width:120px;margin:0 auto;position:relative;display:flex;align-items:center}
.sh-search>i{position:absolute;left:12px;color:var(--sh-faint);font-style:normal;font-size:14px;z-index:1;pointer-events:none}
.sh-search input{background:var(--sh-sec);border:1px solid var(--sh-border);width:100%;height:36px;color:var(--sh-text);border-radius:6px;outline:none;padding:0 54px 0 38px;font-size:14px;box-sizing:border-box}
.sh-search input::placeholder{color:var(--sh-light)}
.sh-search kbd{position:absolute;right:10px;background:var(--sh-border);color:var(--sh-faint);border-radius:3px;padding:1px 5px;font:10px/1.4 inherit}
/* right group */
.sh-right{flex-shrink:0;align-items:center;gap:8px;display:flex}
.sh-asst{cursor:pointer;background:0 0;border:none;border-radius:8px;flex-direction:column;flex-shrink:0;justify-content:center;align-items:center;gap:4px;padding:8px 14px;display:flex;font:inherit}
.sh-asst:hover{background:#ffffff0d}
.sh-asst img{object-fit:contain;width:auto;max-width:127px;height:101px;display:block}
.sh-asst .sh-slot{width:84px;height:84px;border-radius:10px}
.sh-asst span{color:var(--sh-light);white-space:nowrap;font-size:11px;line-height:1}
.sh-primary{background:var(--sh-gold);color:var(--sh-bg);cursor:pointer;white-space:nowrap;border:none;border-radius:6px;align-items:center;gap:5px;padding:8px 16px;font-size:13px;font-weight:600;display:flex;font-family:inherit}
.sh-primary svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2}
.sh-ib{position:relative;border:1px solid var(--sh-bmid);color:var(--sh-mid);cursor:pointer;background:0 0;border-radius:6px;padding:8px 11px;display:flex}
.sh-ib:hover{background:var(--sh-sec);color:var(--sh-text)}
.sh-ib svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8}
.sh-ib.sh-spark svg{width:16px;height:16px}
.sh-bell.on{color:var(--sh-red)}
.sh-badge{position:absolute;top:-5px;right:-5px;background:var(--sh-red);color:var(--sh-text);border-radius:999px;font-size:9px;font-weight:700;padding:0 4px;min-width:14px;text-align:center}
.sh-badge[hidden]{display:none}
.sh-av{background:var(--sh-gold);width:28px;height:28px;color:var(--sh-bg);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:11px;font-weight:700;display:flex}
.sh-out{background:none;border:none;cursor:pointer;color:var(--sh-faint);padding:2px 4px;display:flex}
.sh-out svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8}
.sh-out:hover{color:var(--sh-text)}
.sh-user{display:flex;align-items:center;gap:6px}
.sh-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sh-toast{position:fixed;top:145px;right:18px;z-index:80;background:var(--panel2,#252e3b);color:var(--text,#e6edf3);border:1px solid var(--line,#37455a);border-radius:9px;padding:9px 14px;font-size:12px;box-shadow:0 6px 24px rgba(0,0,0,.35);max-width:320px}
/* narrower screens (Koyta itself does not adapt; these only keep the bar from overflowing) */
@media (max-width:1360px){.sh-far{display:none}}
@media (max-width:1180px){.sh-asst{display:none}}
@media (max-width:1000px){.dt-sub,.dt-tz,.sh-search kbd{display:none}.sh-logo{width:67px;height:67px}.sh-logo.sh-img img{height:67px}.sh-search{min-width:80px}.top.sh{gap:8px}}
@media (max-width:860px){.sh-spark,.sh-div{display:none}.dt-right{min-width:0;padding:10px 12px}.dt-left{padding:10px 12px 10px 10px}}
@media (max-width:760px){.top.sh{flex-wrap:wrap;height:auto;padding:8px 12px}.sh-clock,.sh-search,.sh-div{display:none}}