/* ===================== the Jarvis screen ===================== */
/* Dark glass panels over a live canvas (hud-core.js). --ha is the accent of the moment: it follows what Jarvis is doing. */
.hud-doc, .hud-doc body { overflow: hidden; }
.shell.hud-mode { grid-template-columns: 1fr; }
.shell.hud-mode .rail, .shell.hud-mode .top, .shell.hud-mode .scrim { display: none; }
.shell.hud-mode .main { padding: 0; grid-column: 1; }

.hud {
  --hc: 98, 201, 214; --hg: 217, 180, 74; --ha: 98, 201, 214;
  position: fixed; inset: 0; z-index: 30; color: #d6e4de; overflow: hidden; font-family: var(--font);
  display: grid; grid-template-columns: minmax(280px, 23vw) minmax(0, 1fr) minmax(330px, 26vw); grid-template-rows: 76px minmax(0, 1fr) 96px;
  gap: 14px 22px; padding: 12px 22px 14px;
  background: radial-gradient(ellipse 60% 55% at 50% 44%, rgba(var(--ha), .13), transparent 62%), radial-gradient(ellipse 100% 60% at 50% 125%, rgba(var(--hg), .10), transparent 62%), linear-gradient(#020807, #051210 55%, #020605);
}
.hud[data-mode="command"] { --ha: 90, 255, 214; }
.hud[data-mode="thinking"] { --ha: 255, 196, 84; }
.hud[data-mode="speaking"] { --ha: 255, 228, 160; }
.hud[data-mode="waiting"] { --ha: 255, 150, 84; }
.hud > * { position: relative; z-index: 2; min-width: 0; min-height: 0; }
.hud > #hFx { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.hud > .hud-fx { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.hud-vig { background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 4, 3, .78) 100%); }
.hud-scan { background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 3px); overflow: hidden; }
.hud-scan::after { content: ''; position: absolute; left: 0; right: 0; height: 140px; top: -140px; background: linear-gradient(180deg, transparent, rgba(var(--ha), .06), transparent); animation: hscan 9s linear infinite; }
@keyframes hscan { to { transform: translateY(calc(100vh + 280px)); } }
.hud-corner { position: absolute; z-index: 3; width: 26px; height: 26px; border: 2px solid rgba(var(--ha), .75); pointer-events: none; transition: border-color .5s; }
.hud-corner.tl { top: 6px; left: 6px; border-right: 0; border-bottom: 0; } .hud-corner.tr { top: 6px; right: 6px; border-left: 0; border-bottom: 0; }
.hud-corner.bl { bottom: 6px; left: 6px; border-right: 0; border-top: 0; } .hud-corner.br { bottom: 6px; right: 6px; border-left: 0; border-top: 0; }
.hud.alert-flash::after { content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none; box-shadow: inset 0 0 120px rgba(229, 97, 90, .55); animation: hflash 1.1s ease-out forwards; }
@keyframes hflash { from { opacity: 1; } to { opacity: 0; } }

/* ---------- top bar ---------- */
.hud-top { grid-column: 1 / -1; display: flex; align-items: center; gap: 24px; border-bottom: 1px solid rgba(var(--hc), .14); position: relative; }
.hud-top::after { content: ''; position: absolute; left: 0; bottom: -1px; height: 2px; width: 22%; background: linear-gradient(90deg, transparent, rgb(var(--ha)), transparent); animation: hsweep 5.5s ease-in-out infinite; }
@keyframes hsweep { 0% { left: -22%; } 100% { left: 100%; } }
.hud-brand { display: flex; align-items: center; gap: 14px; }
.hud-brand .orb { width: 42px; height: 42px; color: rgb(var(--hg)); filter: drop-shadow(0 0 10px rgba(var(--hg), .7)); }
.hud-brand b { display: block; font-size: 23px; letter-spacing: .46em; font-stretch: 125%; font-weight: 700; color: rgb(var(--hg)); text-shadow: 0 0 16px rgba(var(--hg), .55); }
.hud-brand span { display: block; font-size: 11.5px; color: rgba(214, 228, 222, .55); letter-spacing: .16em; margin-top: 2px; text-transform: uppercase; }
.hud-sys { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.hud-sys .chip { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid rgba(var(--hc), .2); border-radius: 3px; background: rgba(4, 18, 17, .65); font-size: 12.5px; backdrop-filter: blur(6px); }
.hud-sys .chip i { width: 7px; height: 7px; border-radius: 50%; background: #5d7770; }
.hud-sys .chip.ok i { background: rgb(var(--hc)); box-shadow: 0 0 8px rgb(var(--hc)); }
.hud-sys .chip.warn i { background: rgb(var(--hg)); box-shadow: 0 0 8px rgb(var(--hg)); }
.hud-sys .chip.bad i { background: #e5615a; box-shadow: 0 0 8px #e5615a; }
.hud-sys .chip b { font-weight: 600; }
.hud-sys .chip span { color: rgba(214, 228, 222, .55); }
.hud-clock { text-align: right; display: flex; flex-direction: column; line-height: 1.05; }
.hud-clock span { font-size: 12px; color: rgba(214, 228, 222, .55); }
.hud-clock b { font-size: 32px; font-stretch: 72%; font-weight: 600; letter-spacing: .04em; color: #eef4ef; font-variant-numeric: tabular-nums; text-shadow: 0 0 18px rgba(var(--ha), .35); }

/* ---------- glass panels ---------- */
.hud-side { display: flex; flex-direction: column; gap: 14px; }
.hp { position: relative; padding: 13px 15px; background: linear-gradient(165deg, rgba(8, 30, 28, .72), rgba(3, 14, 14, .62)); border: 1px solid rgba(var(--hc), .17); backdrop-filter: blur(12px) saturate(1.25); display: flex; flex-direction: column; min-height: 0; box-shadow: inset 0 0 36px rgba(var(--hc), .035), 0 10px 40px rgba(0, 0, 0, .35); }
.hp::before, .hp::after { content: ''; position: absolute; width: 12px; height: 12px; border: 2px solid rgba(var(--hg), .85); pointer-events: none; }
.hp::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.hp::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.hp-grow { flex: 1; }
.hp h3 { font-size: 12px; font-weight: 650; letter-spacing: .18em; text-transform: uppercase; color: rgba(var(--hc), .95); margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.hp h3 .pip { width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--hc)); box-shadow: 0 0 8px rgb(var(--hc)); animation: pulse 2.4s ease-out infinite; }
.hp h3 em { margin-left: auto; font-style: normal; font-size: 11px; letter-spacing: .06em; color: rgb(var(--hg)); text-transform: none; }
.hfeed, .hconvo, .hact, .hjobs, .hok { overflow-y: auto; scrollbar-width: none; min-height: 0; }
.hfeed::-webkit-scrollbar, .hconvo::-webkit-scrollbar, .hact::-webkit-scrollbar, .hjobs::-webkit-scrollbar, .hok::-webkit-scrollbar { display: none; }
.hfeed { flex: 1; }
.hpost { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(var(--hc), .08); color: inherit; text-decoration: none; }
.hpost:hover { text-decoration: none; background: rgba(var(--hc), .06); }
.hpost .tag { font-size: 11px; padding: 1px 7px; }
.hp-main { min-width: 0; }
.hp-main b { display: block; font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-main small { display: block; font-size: 11.5px; color: rgba(214, 228, 222, .5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-price { font-stretch: 75%; font-weight: 650; font-size: 15px; color: #eef4ef; }
.hpost.fresh { animation: hfresh 2.6s ease-out; }
@keyframes hfresh { from { background: rgba(var(--hg), .2); box-shadow: inset 2px 0 0 rgb(var(--hg)); } to { background: transparent; box-shadow: none; } }
.hstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 10px; }
.hstats b { display: block; font-size: 30px; font-stretch: 70%; font-weight: 650; line-height: 1; color: #eef4ef; font-variant-numeric: tabular-nums; }
.hstats span { font-size: 11.5px; color: rgba(214, 228, 222, .55); }
.hstats .hot b { color: rgb(var(--hg)); text-shadow: 0 0 12px rgba(var(--hg), .55); }

/* ---------- mission control: what Jarvis is doing right now ---------- */
.hjobs { display: flex; flex-direction: column; gap: 9px; max-height: 31vh; }
.hjobs .none { margin: 0; font-size: 13px; color: rgba(214, 228, 222, .45); }
.job { position: relative; padding: 10px 12px 10px 14px; border: 1px solid rgba(var(--hg), .3); background: linear-gradient(120deg, rgba(var(--hg), .09), rgba(var(--hg), .02)); animation: jobIn .35s ease-out; overflow: hidden; }
.job::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: rgb(var(--hg)); box-shadow: 0 0 12px rgb(var(--hg)); }
@keyframes jobIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
.job-t { display: flex; gap: 8px; align-items: baseline; }
.job-t b { flex: 1; font-size: 13.5px; font-weight: 600; color: #f3eed6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.job-t time { font-size: 12px; font-variant-numeric: tabular-nums; color: rgb(var(--hg)); }
.job-bar { height: 3px; margin: 8px 0 6px; background: rgba(var(--hg), .16); overflow: hidden; }
.job-bar::after { content: ''; display: block; height: 100%; width: 34%; background: linear-gradient(90deg, transparent, rgb(var(--hg)), #fff6cf, rgb(var(--hg)), transparent); animation: jobBar 1.15s ease-in-out infinite; }
@keyframes jobBar { from { transform: translateX(-110%); } to { transform: translateX(320%); } }
.job-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 12.5px; }
.job-steps li { display: flex; gap: 7px; align-items: baseline; color: rgba(214, 228, 222, .6); }
.job-steps li::before { content: '✓'; color: rgb(var(--hc)); font-size: 11px; }
.job-steps li.now { color: #f3eed6; }
.job-steps li.now::before { content: ''; width: 9px; height: 9px; flex: none; align-self: center; border-radius: 50%; border: 2px solid rgba(var(--hg), .3); border-top-color: rgb(var(--hg)); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.job.done { border-color: rgba(var(--hc), .4); background: linear-gradient(120deg, rgba(var(--hc), .1), rgba(var(--hc), .02)); }
.job.done::before { background: rgb(var(--hc)); box-shadow: 0 0 12px rgb(var(--hc)); }
.job.done .job-bar, .job.err .job-bar, .job.cancel .job-bar { display: none; }
.job.done .job-t time { color: rgb(var(--hc)); }
.job.err { border-color: rgba(229, 97, 90, .5); background: rgba(229, 97, 90, .08); }
.job.err::before { background: #e5615a; box-shadow: 0 0 12px #e5615a; }
.job.cancel { opacity: .55; }
.job.leave { animation: jobOut .5s ease-in forwards; }
@keyframes jobOut { to { opacity: 0; transform: translateX(24px); max-height: 0; padding: 0; margin: 0; border-width: 0; } }

/* ---------- waiting for your OK ---------- */
.hp-ok { border-color: rgba(255, 150, 84, .5); box-shadow: inset 0 0 36px rgba(255, 150, 84, .07), 0 0 28px rgba(255, 150, 84, .12); animation: okGlow 2.4s ease-in-out infinite; }
.hp-ok h3 { color: #ffb685; }
@keyframes okGlow { 50% { box-shadow: inset 0 0 36px rgba(255, 150, 84, .12), 0 0 40px rgba(255, 150, 84, .26); } }
.hok { display: flex; flex-direction: column; gap: 10px; max-height: 30vh; }
.ok { padding: 10px 12px; border: 1px solid rgba(255, 150, 84, .35); background: rgba(255, 150, 84, .06); animation: jobIn .35s ease-out; }
.ok.asked { border-color: #ffb685; background: rgba(255, 150, 84, .13); }
.ok-to { display: flex; gap: 8px; align-items: center; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #ffb685; font-weight: 650; }
.ok-to svg { width: 15px; height: 15px; }
.ok-to small { margin-left: auto; text-transform: none; letter-spacing: 0; color: rgba(214, 228, 222, .55); font-weight: 400; }
.ok-text { margin: 6px 0 9px; font-size: 14px; line-height: 1.4; color: #f6efe4; white-space: pre-wrap; max-height: 9.5em; overflow: auto; }
.ok-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.ok-btns button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font: 650 13px var(--font); border-radius: 3px; border: 1px solid rgba(var(--hc), .4); background: rgba(var(--hc), .08); color: rgb(var(--hc)); cursor: pointer; transition: transform .1s, box-shadow .2s; }
.ok-btns button svg { width: 15px; height: 15px; }
.ok-btns button:hover { box-shadow: 0 0 14px rgba(var(--hc), .35); }
.ok-btns button:active { transform: scale(.97); }
.ok-btns .send { background: #ffb685; border-color: #ffb685; color: #2b1304; box-shadow: 0 0 18px rgba(255, 150, 84, .45); }
.ok-btns .send:hover { box-shadow: 0 0 26px rgba(255, 150, 84, .7); }
.ok-btns .no { color: #f08a83; border-color: rgba(229, 97, 90, .4); background: rgba(229, 97, 90, .07); }
.ok.busy { opacity: .6; pointer-events: none; }
.ok.sent { border-color: rgba(var(--hc), .5); background: rgba(var(--hc), .09); }
.ok.sent .ok-to { color: rgb(var(--hc)); }

/* ---------- conversation and log ---------- */
.hconvo { flex: 1; display: flex; flex-direction: column; gap: 11px; }
.hconvo .hint { color: rgba(214, 228, 222, .5); font-size: 13px; margin: 0; }
.hmsg span { display: block; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(214, 228, 222, .45); margin-bottom: 2px; }
.hmsg p { margin: 0; font-size: 14px; line-height: 1.45; white-space: pre-wrap; }
.hmsg.you p { color: rgb(var(--hc)); }
.hmsg.reply span { color: #ffb685; } .hmsg.reply p { color: #f6efe4; }
.hact { max-height: 130px; display: flex; flex-direction: column; }
.hline { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; padding: 4px 0; font-size: 12.5px; border-bottom: 1px solid rgba(var(--hc), .06); }
.hline time { color: rgba(214, 228, 222, .4); font-variant-numeric: tabular-nums; }
.hline.nav span, .hline.gold span { color: rgb(var(--hg)); }
.hline.warn span { color: #f08a83; }
.hline.ok span, .hline.mail span { color: rgb(var(--hc)); }

/* ---------- the middle: state, what it is doing, subtitles ---------- */
.hud-center { position: relative; }
.hud-state { position: absolute; top: 2px; left: 0; right: 0; text-align: center; font-size: 13px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: rgb(var(--ha)); text-shadow: 0 0 14px rgba(var(--ha), .6); transition: color .4s; }
.hud-state::before, .hud-state::after { content: ''; display: inline-block; width: 46px; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--ha), .8)); vertical-align: middle; margin: 0 14px; }
.hud-state::after { background: linear-gradient(270deg, transparent, rgba(var(--ha), .8)); }
.hud-sub { position: absolute; top: 26px; left: 0; right: 0; text-align: center; font-size: 12.5px; color: rgba(214, 228, 222, .5); letter-spacing: .04em; }
.hud-readouts { position: absolute; inset: 0; pointer-events: none; }
.hud-readouts div { position: absolute; display: flex; flex-direction: column; gap: 2px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(214, 228, 222, .5); }
.hud-readouts b { font-size: 24px; font-stretch: 70%; font-weight: 600; letter-spacing: .02em; color: rgba(var(--hc), .95); text-shadow: 0 0 12px rgba(var(--hc), .5); font-variant-numeric: tabular-nums; }
.hud-readouts div::before { content: ''; position: absolute; width: 56px; height: 1px; background: rgba(var(--hc), .35); top: 50%; }
.hud-readouts .r1 { top: 12%; left: 1%; } .hud-readouts .r1::before { left: calc(100% + 10px); }
.hud-readouts .r2 { top: 12%; right: 1%; text-align: right; } .hud-readouts .r2::before { right: calc(100% + 10px); }
.hud-readouts .r3 { top: 56%; left: 1%; } .hud-readouts .r3::before { left: calc(100% + 10px); }
.hud-readouts .r4 { top: 56%; right: 1%; text-align: right; } .hud-readouts .r4::before { right: calc(100% + 10px); }
@media (max-width: 1500px) { .hud-readouts { display: none; } }

.hud-work { position: absolute; left: 50%; bottom: 17%; transform: translate(-50%, 8px); max-width: 92%; display: inline-flex; align-items: center; gap: 12px; padding: 9px 20px; border: 1px solid rgba(var(--ha), .55); background: rgba(3, 14, 13, .72); backdrop-filter: blur(8px); color: #fff3d0; font-size: 14.5px; letter-spacing: .03em; opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; box-shadow: 0 0 28px rgba(var(--ha), .28); clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.hud-work.on { opacity: 1; transform: translate(-50%, 0); }
.hud-work i { width: 14px; height: 14px; flex: none; border-radius: 50%; border: 2px solid rgba(var(--ha), .3); border-top-color: rgb(var(--ha)); animation: spin .8s linear infinite; }
.hud-work b { font-variant-numeric: tabular-nums; color: rgb(var(--ha)); font-weight: 650; }
.hud-work span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.hud-cap { position: absolute; left: 4%; right: 4%; bottom: 1%; text-align: center; font-size: clamp(17px, 1.55vw, 28px); line-height: 1.38; font-weight: 500; min-height: 2.7em; max-height: 4.2em; overflow: hidden; color: #fbf1c9; text-shadow: 0 0 20px rgba(var(--hg), .4), 0 2px 12px rgba(0, 0, 0, .8); }
.hud-cap.you { color: rgb(var(--hc)); text-shadow: 0 0 20px rgba(var(--hc), .4), 0 2px 12px rgba(0, 0, 0, .8); font-style: italic; }
.hud-chips { position: absolute; left: 0; right: 0; bottom: 8.5%; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; padding: 0 3%; transition: opacity .3s; }
.hud-chips.hide { opacity: 0; pointer-events: none; }
.hud-chips button { padding: 6px 14px; font: 500 13px var(--font); color: rgba(214, 228, 222, .8); background: rgba(4, 18, 17, .6); border: 1px solid rgba(var(--hc), .28); border-radius: 99px; cursor: pointer; backdrop-filter: blur(6px); transition: all .2s; }
.hud-chips button:hover { color: #fff3d0; border-color: rgb(var(--hg)); box-shadow: 0 0 16px rgba(var(--hg), .35); transform: translateY(-1px); }

.hud-start { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); z-index: 3; display: inline-flex; align-items: center; gap: 12px; padding: 16px 32px; font: 700 17px var(--font); letter-spacing: .16em; text-transform: uppercase; color: #1b1606; background: linear-gradient(135deg, #f6d878, rgb(var(--hg))); border: 0; border-radius: 99px; cursor: pointer; box-shadow: 0 0 0 0 rgba(var(--hg), .6), 0 0 50px rgba(var(--hg), .45); animation: wake 2.2s ease-out infinite; }
.hud-start svg { width: 22px; height: 22px; }
.hud-start.hide { display: none; }
@keyframes wake { 0% { box-shadow: 0 0 0 0 rgba(var(--hg), .55), 0 0 50px rgba(var(--hg), .4); } 70% { box-shadow: 0 0 0 30px rgba(var(--hg), 0), 0 0 50px rgba(var(--hg), .4); } 100% { box-shadow: 0 0 0 0 rgba(var(--hg), 0), 0 0 50px rgba(var(--hg), .4); } }

/* ---------- bottom bar ---------- */
.hud-bottom { grid-column: 1 / -1; display: flex; align-items: center; gap: 20px; border-top: 1px solid rgba(var(--hc), .14); padding-top: 12px; }
.hud-mic { position: relative; width: 66px; height: 66px; flex: none; border-radius: 50%; border: 2px solid rgba(var(--ha), .85); background: radial-gradient(circle, rgba(var(--ha), .18), rgba(var(--ha), .04)); color: rgb(var(--ha)); display: grid; place-items: center; cursor: pointer; touch-action: none; transition: all .25s; }
.hud-mic svg { width: 28px; height: 28px; position: relative; z-index: 1; }
.hud-mic::before, .hud-mic::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid rgba(var(--ha), .5); opacity: 0; }
.hud-mic:hover { box-shadow: 0 0 26px rgba(var(--ha), .5); }
.hud[data-mode="command"] .hud-mic { background: rgb(var(--ha)); color: #031a14; box-shadow: 0 0 40px rgba(var(--ha), .8); }
.hud[data-mode="command"] .hud-mic::before { animation: micRing 1.3s ease-out infinite; }
.hud[data-mode="command"] .hud-mic::after { animation: micRing 1.3s ease-out .65s infinite; }
@keyframes micRing { from { transform: scale(1); opacity: .8; } to { transform: scale(1.8); opacity: 0; } }
.hud[data-mode="wake"] .hud-mic.live::after { animation: micRing 2.6s ease-out infinite; opacity: .5; }
.hud-type { flex: 1; max-width: 700px; display: flex; gap: 8px; }
.hud-type input { background: rgba(4, 18, 17, .65); border: 1px solid rgba(var(--hc), .22); color: #e8ede4; border-radius: 3px; backdrop-filter: blur(6px); }
.hud-type input:focus { border-color: rgb(var(--hg)); box-shadow: 0 0 0 3px rgba(var(--hg), .15); }
.hud-type button { width: 46px; flex: none; display: grid; place-items: center; background: rgba(var(--hg), .15); color: rgb(var(--hg)); border: 1px solid rgba(var(--hg), .5); border-radius: 3px; cursor: pointer; }
.hud-type button svg { width: 18px; height: 18px; }
.hud-ctl { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.hud-ctl button, .hud-ctl a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 11px; font: 500 13px var(--font); color: rgba(214, 228, 222, .7); background: transparent; border: 1px solid transparent; border-radius: 3px; cursor: pointer; text-decoration: none; }
.hud-ctl button:hover, .hud-ctl a:hover { color: rgb(var(--hg)); border-color: rgba(var(--hg), .35); text-decoration: none; }
.hud-ctl button[aria-pressed="false"] { color: rgba(214, 228, 222, .4); }
.hud-ctl button.stop { color: #f08a83; border-color: rgba(229, 97, 90, .45); background: rgba(229, 97, 90, .08); }
.hud-ctl button.stop.hide { display: none; }
.hud-ctl svg { width: 16px; height: 16px; }
.hud-warn { position: absolute; left: 50%; bottom: 104px; transform: translateX(-50%); z-index: 3; padding: 8px 14px; background: rgba(var(--hg), .14); border: 1px solid rgba(var(--hg), .4); font-size: 13px; }

/* language and look switches in the bottom bar */
.hud-seg { display: inline-flex; align-items: stretch; border: 1px solid rgba(var(--hc), .28); border-radius: 99px; overflow: hidden; background: rgba(4, 18, 17, .55); backdrop-filter: blur(6px); margin-right: 4px; }
.hud-ctl .hud-seg button { border-radius: 0; border: 0; padding: 7px 12px; gap: 5px; font-size: 13.5px; line-height: 1.4; }
.hud-ctl .hud-seg button + button { border-left: 1px solid rgba(var(--hc), .16); }
.hud-ctl .hud-seg button[aria-pressed="true"] { color: rgb(var(--hg)); background: rgba(var(--hg), .16); box-shadow: inset 0 0 14px rgba(var(--hg), .22); }
.hud-ctl .hud-seg button b { font-weight: 400; color: rgb(var(--hg)); }
.hud-seg button[data-lang="pa-Arab"] { font-size: 15px; line-height: 1.7; }

@media (max-width: 1100px) {
  .hud { grid-template-columns: minmax(0, 1fr); grid-template-rows: max-content min(74vh, 600px) max-content max-content max-content; align-content: start; overflow-y: auto; }
  .hud > #hFx { position: fixed; }
  .hud > * { min-height: auto; }
  .hud-center { min-height: 400px; }
  .hfeed { max-height: 360px; }
  .hud-start { font-size: 15px; padding: 13px 22px; white-space: nowrap; }
  .hud-side { min-height: 240px; }
  .hud-left { order: 4; } .hud-right { order: 3; } .hud-bottom { order: 2; flex-wrap: wrap; } .hud-center { order: 1; }
  .hud-top { flex-wrap: wrap; gap: 10px; padding-bottom: 10px; }
  .hud-sys { margin-left: 0; order: 3; width: 100%; }
  .hjobs, .hok { max-height: none; }
}
@media (max-width: 600px) { .hud { padding: 10px 12px; } .hud-ctl span { display: none; } .hud-clock b { font-size: 24px; } .hud-brand span { display: none; } .hud-chips { bottom: 11%; } }
@media (prefers-reduced-motion: reduce) {
  .hud *, .hud *::before, .hud *::after { animation-duration: .01s !important; animation-iteration-count: 1 !important; }
  .hud-scan::after { display: none; }
}