@font-face {
  font-family: 'LCARS';
  src: url('https://cdn.jsdelivr.net/gh/ajstarks/lcars-font/LCARS.ttf') format('truetype');
}

:root {
  --orange:    #FF9900;
  --peach:     #FFCC99;
  --blue:      #9999FF;
  --lightblue: #99CCFF;
  --purple:    #CC99CC;
  --red:       #FF3300;
  --tan:       #FFCC66;
  --white:     #FFFFFF;
  --black:     #000000;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: #000;
  font-family: 'LCARS', 'Arial Narrow', Arial, sans-serif;
  color: var(--peach);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* ── TOP CHROME ─────────────────────────────── */
.top-chrome {
  display: flex;
  align-items: stretch;
  height: 100px;
  flex-shrink: 0;
}

.elbow-tl {
  width: 140px; height: 100px;
  flex-shrink: 0; position: relative;
}
.elbow-tl::before {
  content: ''; position: absolute;
  top: 0; left: 0;
  width: 140px; height: 60px;
  background: var(--orange);
}
.elbow-tl::after {
  content: ''; position: absolute;
  bottom: 0; left: 0;
  width: 60px; height: 42px;
  background: var(--orange);
}
.elbow-tl .inner-cut {
  position: absolute; bottom: 0; right: 0;
  width: 82px; height: 42px;
  background: #000; border-radius: 38px 0 0 0;
}
.elbow-tl .cap {
  position: absolute; top: 0; left: 0;
  width: 60px; height: 60px;
  background: var(--orange); border-radius: 0 0 0 50px;
}

.top-title-bar {
  flex: 1; background: var(--orange);
  display: flex; align-items: center;
  padding: 0 30px; height: 60px; align-self: flex-start;
}
.top-title-bar a { text-decoration: none; }
.top-title-bar span {
  font-size: 2.8rem; color: #000;
  letter-spacing: 0.12em; line-height: 1; font-weight: 400;
}

.top-segments {
  display: flex; align-items: flex-start;
  gap: 6px; padding: 0 8px; height: 60px; align-self: flex-start;
}
.seg {
  height: 60px; border-radius: 30px 30px 0 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; color: #000;
  writing-mode: vertical-rl; text-orientation: mixed;
  transform: rotate(180deg); letter-spacing: 0.08em;
  cursor: default; user-select: none; padding: 6px 0;
}
.seg-a { background: var(--blue);      width: 36px; }
.seg-b { background: var(--purple);    width: 36px; }
.seg-c { background: var(--lightblue); width: 36px; }
.seg-d { background: var(--tan);       width: 55px; font-size: 0.65rem; }

.elbow-tr {
  width: 120px; height: 100px;
  flex-shrink: 0; position: relative;
}
.elbow-tr::before {
  content: ''; position: absolute;
  top: 0; right: 0; width: 120px; height: 60px;
  background: var(--purple);
}
.elbow-tr::after {
  content: ''; position: absolute;
  bottom: 0; right: 0; width: 60px; height: 42px;
  background: var(--purple);
}
.elbow-tr .inner-cut {
  position: absolute; bottom: 0; left: 0;
  width: 62px; height: 42px;
  background: #000; border-radius: 0 38px 0 0;
}
.elbow-tr-text {
  position: absolute; top: 10px; right: 14px;
  font-size: 0.9rem; color: #000;
  text-align: right; line-height: 1.4; letter-spacing: 0.06em;
}

/* ── BODY LAYOUT ────────────────────────────── */
.body-layout { display: flex; flex: 1; gap: 0; min-height: 0; }

/* ── LEFT SIDEBAR ───────────────────────────── */
.left-sidebar {
  width: 140px; flex-shrink: 0;
  display: flex; flex-direction: column;
  gap: 6px; padding: 6px 0;
}

.sidebar-btn {
  height: 44px; background: var(--blue); color: #000;
  font-family: 'LCARS', Arial, sans-serif;
  font-size: 0.78rem; letter-spacing: 0.08em;
  text-transform: uppercase; text-decoration: none;
  display: flex; align-items: center;
  justify-content: flex-end; padding-right: 16px;
  cursor: pointer; border-radius: 0 22px 22px 0;
  transition: background 0.15s, box-shadow 0.15s;
  user-select: none; margin-right: 8px;
  white-space: normal;
  word-break: break-word;
  line-height: 1.2;
  width: 140px;   /* wider to fit "PERSONAL LOG" */
  min-height: 44px;
  height: auto;
}

.sidebar-btn:hover { background: var(--lightblue); box-shadow: 0 0 12px var(--lightblue); }
.sidebar-btn.orange { background: var(--orange); }
.sidebar-btn.orange:hover { background: var(--tan); }
.sidebar-btn.purple { background: var(--purple); }
.sidebar-btn.purple:hover { background: #DDAADD; }
.sidebar-btn.tan    { background: var(--tan); }
.sidebar-btn.tan:hover { background: #FFDD88; }
.sidebar-btn.red    { background: var(--red); color: #fff; }
.sidebar-btn.red:hover { box-shadow: 0 0 16px var(--red); }
.sidebar-btn.active-nav { background: var(--orange); color: #000; }

.sidebar-spacer { flex: 1; }

.blinker {
  width: 60px; height: 18px;
  background: var(--orange); border-radius: 9px;
  margin: 3px auto 3px 10px;
  animation: blink 1.4s step-start infinite;
}
.blinker.blue   { background: var(--blue);   animation-delay: 0.5s; }
.blinker.purple { background: var(--purple); animation-delay: 1s; }
@keyframes blink { 0%,49%{opacity:1} 50%,100%{opacity:0.15} }

/* ── MAIN CONTENT ───────────────────────────── */
.main-content {
  flex: 1; display: flex; flex-direction: column;
  padding: 10px 20px 10px 8px; gap: 14px; overflow-y: auto;
}

.label-pill { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.label-pill .pill-bar { height: 4px; width: 30px; background: var(--blue); border-radius: 2px; }
.label-pill span { font-size: 1.1rem; color: var(--blue); letter-spacing: 0.12em; text-transform: uppercase; }

/* Profile */
.profile-row {
  display: flex; align-items: center; gap: 20px;
  padding: 16px 20px; background: #0a0a0a;
  border-left: 6px solid var(--orange); border-radius: 0 16px 16px 0;
}
.avatar-ring {
  width: 80px; height: 80px; border-radius: 50%;
  border: 4px solid var(--orange); overflow: hidden;
  flex-shrink: 0; background: #111; position: relative;
}
.avatar-ring img { width: 100%; height: 100%; object-fit: cover; }
.avatar-ring::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: inset 0 0 14px rgba(255,153,0,0.3);
}
.profile-info { flex: 1; }
.profile-info h1 {
  font-size: 2.2rem; color: var(--orange);
  letter-spacing: 0.14em; text-transform: uppercase; line-height: 1;
}
.profile-info .sub {
  font-size: 0.85rem; color: var(--blue);
  letter-spacing: 0.1em; margin-top: 6px; text-transform: uppercase;
}
.status-indicator { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.status-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #00FF66; box-shadow: 0 0 8px #00FF66;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }
.status-text { font-size: 0.8rem; color: #00FF66; letter-spacing: 0.1em; text-transform: uppercase; }

/* Data cells */
.data-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
.data-cell {
  background: #0d0d0d; border-top: 3px solid var(--blue);
  padding: 10px 14px; border-radius: 0 0 8px 8px;
}
.data-cell .val  { font-size: 1.4rem; color: var(--lightblue); letter-spacing: 0.05em; }
.data-cell .lbl  { font-size: 0.65rem; color: var(--blue); letter-spacing: 0.12em; text-transform: uppercase; margin-top: 2px; }
.data-cell.orange-top { border-top-color: var(--orange); }
.data-cell.orange-top .val { color: var(--peach); }
.data-cell.purple-top { border-top-color: var(--purple); }
.data-cell.purple-top .val { color: var(--purple); }

.lcars-divider {
  height: 4px;
  background: linear-gradient(to right, var(--orange) 60px, transparent 60px, transparent 68px, var(--blue) 68px);
  border-radius: 2px;
}

/* Query panel */
.query-panel {
  background: #050505; border: 2px solid var(--blue);
  border-radius: 4px 20px 20px 4px; padding: 20px;
  border-left: 6px solid var(--blue);
}
.input-label {
  font-size: 0.85rem; color: var(--blue);
  letter-spacing: 0.15em; text-transform: uppercase;
  margin-bottom: 10px; display: flex; align-items: center; gap: 10px;
}
.input-label::before {
  content: ''; display: inline-block;
  width: 24px; height: 4px; background: var(--blue); border-radius: 2px;
}
textarea#question {
  width: 100%; background: #000; color: var(--peach);
  border: 2px solid #333; border-radius: 6px;
  padding: 14px 16px; font-size: 1.1rem;
  font-family: 'LCARS','Arial Narrow',Arial,sans-serif;
  letter-spacing: 0.05em; outline: none; resize: none;
  overflow: hidden; min-height: 56px;
  transition: border-color 0.2s, box-shadow 0.2s;
  caret-color: var(--orange);
}
textarea#question::placeholder { color: #444; }
textarea#question:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 1px var(--orange), 0 0 20px rgba(255,153,0,0.2);
}
.btn-row { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 14px; }
.btn-clear {
  background: transparent; border: 2px solid #444; color: #666;
  padding: 10px 24px; border-radius: 20px;
  font-family: 'LCARS',Arial,sans-serif; font-size: 0.9rem;
  letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: all 0.2s;
}
.btn-clear:hover { border-color: var(--red); color: var(--red); }
.btn-submit {
  background: var(--orange); color: #000; border: none;
  padding: 12px 40px; border-radius: 22px;
  font-family: 'LCARS',Arial,sans-serif; font-size: 1.1rem;
  font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase;
  cursor: pointer; box-shadow: 0 0 20px rgba(255,153,0,0.35); transition: all 0.2s;
}
.btn-submit:hover { background: var(--tan); box-shadow: 0 0 30px rgba(255,204,102,0.55); transform: translateY(-1px); }
.btn-submit:active { transform: translateY(0); }
.btn-submit:disabled { background: #555; box-shadow: none; cursor: not-allowed; color: #888; }

/* Spinner */
#spinner { display: none; align-items: center; gap: 16px; padding: 20px; background: #080808; border: 2px solid var(--blue); border-radius: 10px; }
#spinner.active { display: flex; }
.spinner-track { position: relative; width: 44px; height: 44px; flex-shrink: 0; }
.spinner-track svg { animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.spinner-info { flex: 1; }
.spinner-title { font-size: 1rem; color: var(--orange); letter-spacing: 0.12em; text-transform: uppercase; }
.spinner-sub   { font-size: 0.75rem; color: var(--blue); letter-spacing: 0.1em; margin-top: 4px; text-transform: uppercase; }
.spinner-bar   { height: 4px; background: #111; border-radius: 2px; margin-top: 8px; overflow: hidden; }
.spinner-bar-fill { height: 100%; width: 40%; background: var(--orange); border-radius: 2px; animation: progress 1.6s ease-in-out infinite; }
@keyframes progress { 0%{transform:translateX(-100%)} 100%{transform:translateX(260%)} }

/* Result */
#result {
  display: none; flex-direction: column;
  background: #050505; border: 2px solid var(--purple);
  border-left: 6px solid var(--purple); border-radius: 4px 16px 16px 4px;
  padding: 20px; opacity: 0; transform: translateY(12px);
  transition: opacity 0.4s, transform 0.4s;
}
#result.show { display: flex; opacity: 1; transform: translateY(0); }
.result-header {
  font-size: 0.8rem; color: var(--purple);
  letter-spacing: 0.15em; text-transform: uppercase;
  margin-bottom: 14px; display: flex; align-items: center; gap: 12px;
}
.result-header::before { content: ''; width: 24px; height: 4px; background: var(--purple); border-radius: 2px; flex-shrink: 0; }
.result-body { font-size: 1.1rem; line-height: 1.7; color: var(--peach); letter-spacing: 0.03em; }

/* Logs panel */
#logs-panel {
  display: none; flex-direction: column;
  background: #050505; border: 2px solid var(--tan);
  border-left: 6px solid var(--tan); border-radius: 4px 16px 16px 4px; padding: 20px;
}
#logs-panel.show { display: flex; }
.logs-empty { font-size: 0.85rem; color: #555; letter-spacing: 0.1em; text-transform: uppercase; }
.log-entry { display: flex; gap: 12px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid #1a1a1a; font-size: 0.9rem; }
.log-entry:last-child { border-bottom: none; }
.log-num  { color: var(--tan); font-size: 0.75rem; letter-spacing: 0.1em; min-width: 28px; flex-shrink: 0; }
.log-text { color: var(--peach); letter-spacing: 0.03em; line-height: 1.4; display: flex; flex-direction: column; gap: 2px; }
.log-q { color: var(--peach); }
.log-a { color: var(--purple); font-size: 0.85em; letter-spacing: 0.04em; }

/* Page body (Grav markdown content) */
.page-body {
  color: var(--peach); font-size: 1rem; line-height: 1.8; letter-spacing: 0.03em;
}
.page-body h1, .page-body h2, .page-body h3 {
  color: var(--orange); letter-spacing: 0.12em; text-transform: uppercase; margin: 1em 0 0.5em;
}
.page-body h2 { color: var(--blue); }
.page-body h3 { color: var(--purple); }
.page-body a  { color: var(--lightblue); }
.page-body p  { margin-bottom: 1em; }
.page-body ul, .page-body ol { margin: 0.5em 0 1em 1.5em; }
.page-body li { margin-bottom: 0.25em; }
.page-body code {
  background: #111; border: 1px solid #333; color: var(--tan);
  padding: 2px 6px; border-radius: 4px; font-size: 0.9em;
}
.page-body pre {
  background: #080808; border: 1px solid #333; border-left: 4px solid var(--blue);
  padding: 14px; border-radius: 0 8px 8px 0; overflow-x: auto; margin-bottom: 1em;
}
.page-body blockquote {
  border-left: 4px solid var(--purple); padding-left: 1em;
  color: #aaa; margin: 1em 0;
}

/* ── RIGHT SIDEBAR ──────────────────────────── */
.right-sidebar { width: 70px; flex-shrink: 0; display: flex; flex-direction: column; gap: 6px; padding: 6px 0; }
.r-seg { background: var(--purple); border-radius: 20px 0 0 20px; height: 40px; margin-left: 8px; }
.r-seg.blue2   { background: var(--lightblue); height: 60px; }
.r-seg.tan2    { background: var(--tan);        height: 30px; }
.r-seg.orange2 { background: var(--orange);     height: 50px; }
.r-seg.red2    { background: var(--red);         height: 24px; animation: blink 2s step-start infinite; }
.r-spacer { flex: 1; }

/* ── BOTTOM CHROME ──────────────────────────── */
.bottom-chrome {
  display: flex; align-items: flex-end;
  height: 70px; flex-shrink: 0; gap: 6px;
}
.elbow-bl { width: 120px; height: 70px; flex-shrink: 0; position: relative; }
.elbow-bl::before { content: ''; position: absolute; bottom: 0; left: 0; width: 120px; height: 44px; background: var(--orange); }
.elbow-bl::after  { content: ''; position: absolute; top: 0; left: 0; width: 60px; height: 28px; background: var(--orange); }
.elbow-bl .inner-cut { position: absolute; top: 0; right: 0; width: 62px; height: 28px; background: #000; border-radius: 0 0 0 28px; }

.bottom-bar-group { flex: 1; display: flex; gap: 6px; align-items: flex-end; height: 44px; }
.bot-bar { border-radius: 12px 12px 0 0; height: 44px; }
.bot-bar.b1 { background: var(--blue);      flex: 1;   }
.bot-bar.b2 { background: var(--tan);       flex: 1.4; }
.bot-bar.b3 { background: var(--purple);    flex: 2;   }
.bot-bar.b4 { background: var(--lightblue); flex: 0.8; }
.bot-bar.b5 { background: var(--orange);    flex: 1.2; }
.bot-bar.b6 { background: var(--peach);     flex: 0.6; }

.elbow-br { width: 100px; height: 70px; flex-shrink: 0; position: relative; }
.elbow-br::before { content: ''; position: absolute; bottom: 0; right: 0; width: 100px; height: 44px; background: var(--purple); }
.elbow-br::after  { content: ''; position: absolute; top: 0; right: 0; width: 50px; height: 28px; background: var(--purple); }
.elbow-br .inner-cut { position: absolute; top: 0; left: 0; width: 52px; height: 28px; background: #000; border-radius: 0 0 28px 0; }

/* Scanlines */
body::after {
  content: ''; position: fixed; inset: 0;
  background: repeating-linear-gradient(to bottom,transparent,transparent 2px,rgba(0,0,0,0.07) 2px,rgba(0,0,0,0.07) 4px);
  pointer-events: none; z-index: 9999;
}

/* ── SYSTEM PAGE ─────────────────────────────── */
.sys-title { font-size: 1.6rem; color: var(--orange); letter-spacing: 0.18em; text-transform: uppercase; border-bottom: 3px solid var(--orange); padding-bottom: 8px; margin-bottom: 4px; }
.sys-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sys-block { background: #0a0a0a; border-top: 3px solid var(--blue); border-radius: 0 0 10px 10px; padding: 14px 16px; }
.sys-block.orange { border-top-color: var(--orange); }
.sys-block.purple { border-top-color: var(--purple); }
.sys-block.tan    { border-top-color: var(--tan);    }
.sys-block-title  { font-size: 0.7rem; color: var(--blue); letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 10px; }
.sys-block.orange .sys-block-title { color: var(--orange); }
.sys-block.purple .sys-block-title { color: var(--purple); }
.sys-block.tan    .sys-block-title { color: var(--tan);    }
.sys-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; border-bottom: 1px solid #151515; font-size: 0.8rem; }
.sys-row:last-child { border-bottom: none; }
.sys-row-label { color: #666; letter-spacing: 0.08em; text-transform: uppercase; }
.sys-row-val   { color: var(--peach); letter-spacing: 0.05em; }
.sys-row-val.green  { color: #00FF66; }
.sys-row-val.orange { color: var(--orange); }
.sys-row-val.red    { color: var(--red); }
.sys-bar-row { padding: 6px 0; }
.sys-bar-label-row { display: flex; justify-content: space-between; margin-bottom: 4px; font-size: 0.72rem; }
.sys-bar-label-row span:first-child { color: #666; text-transform: uppercase; letter-spacing: 0.08em; }
.sys-bar-label-row span:last-child  { color: var(--peach); }
.sys-bar-track { height: 6px; background: #1a1a1a; border-radius: 3px; overflow: hidden; }
.sys-bar-fill  { height: 100%; border-radius: 3px; }
.stardate-row { display: flex; align-items: center; gap: 16px; background: #0a0a0a; border-left: 6px solid var(--purple); border-radius: 0 10px 10px 0; padding: 12px 18px; }
.stardate-label { font-size: 0.75rem; color: var(--purple); letter-spacing: 0.15em; text-transform: uppercase; }
.stardate-val   { font-size: 2rem; color: var(--peach); letter-spacing: 0.1em; }

/* ── RED ALERT ──────────────────────────────── */
@keyframes redFlash { 0%,49%{background:rgba(180,0,0,0.18)} 50%,100%{background:rgba(180,0,0,0)} }
@keyframes redAlertText { 0%,49%{opacity:1} 50%,100%{opacity:0} }
@keyframes redBorderPulse {
  0%,49%{box-shadow:0 0 0 4px #FF0000, 0 0 40px #FF0000, inset 0 0 40px rgba(255,0,0,0.15)}
  50%,100%{box-shadow:none}
}
body.red-alert { animation: redFlash 0.9s step-start infinite; }
body.red-alert::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:99998; border:6px solid #FF0000; animation:redBorderPulse 0.9s step-start infinite; }
body.red-alert .elbow-tl::before, body.red-alert .elbow-tl::after, body.red-alert .elbow-tl .cap,
body.red-alert .top-title-bar, body.red-alert .elbow-bl::before, body.red-alert .elbow-bl::after
  { background:var(--red)!important; animation:redFlash 0.9s step-start infinite; }
body.red-alert .elbow-tr::before, body.red-alert .elbow-tr::after, body.red-alert .elbow-br::before, body.red-alert .elbow-br::after
  { background:#CC0000!important; animation:redFlash 0.9s step-start infinite; }
body.red-alert .sidebar-btn { background:#550000!important; color:#FF6666!important; }
body.red-alert .sidebar-btn.red { background:var(--red)!important; color:#fff!important; animation:redAlertText 0.9s step-start infinite; }
body.red-alert .seg-a, body.red-alert .seg-b, body.red-alert .seg-c, body.red-alert .seg-d
  { background:#880000!important; color:#ffaaaa!important; }
body.red-alert .bot-bar { background:#550000!important; }
body.red-alert .bot-bar.b1, body.red-alert .bot-bar.b5 { background:var(--red)!important; animation:redFlash 0.9s step-start infinite; }
body.red-alert .r-seg { background:#660000!important; }
body.red-alert .r-seg.blue2, body.red-alert .r-seg.tan2, body.red-alert .r-seg.orange2 { background:#880000!important; }
body.red-alert .r-seg.red2 { background:var(--red)!important; }
body.red-alert .blinker, body.red-alert .blinker.blue, body.red-alert .blinker.purple
  { background:var(--red)!important; animation:redAlertText 0.45s step-start infinite; }
body.red-alert .profile-row  { border-left-color:var(--red)!important; }
body.red-alert .profile-info h1 { color:var(--red)!important; }
body.red-alert .avatar-ring  { border-color:var(--red)!important; }
body.red-alert .query-panel  { border-color:#880000!important; border-left-color:var(--red)!important; }
body.red-alert .data-cell    { border-top-color:var(--red)!important; }
body.red-alert .status-dot   { background:var(--red)!important; box-shadow:0 0 8px var(--red)!important; }
body.red-alert .status-text  { color:var(--red)!important; }
body.red-alert .lcars-divider { background:linear-gradient(to right,var(--red) 60px,transparent 60px,transparent 68px,#880000 68px)!important; }

#red-alert-banner {
  display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:99999; background:#000; border:4px solid var(--red);
  border-radius:8px 40px 8px 40px; padding:20px 60px; text-align:center;
  pointer-events:none; box-shadow:0 0 60px rgba(255,0,0,0.7);
}
body.red-alert #red-alert-banner { display:block; }
#red-alert-banner .banner-title { font-family:'LCARS',Arial,sans-serif; font-size:3rem; color:var(--red); letter-spacing:0.25em; text-transform:uppercase; animation:redAlertText 0.9s step-start infinite; }
#red-alert-banner .banner-sub   { font-family:'LCARS',Arial,sans-serif; font-size:0.9rem; color:#FF6666; letter-spacing:0.2em; text-transform:uppercase; margin-top:6px; }
#red-alert-banner .banner-dismiss { display:block; margin-top:14px; font-family:'LCARS',Arial,sans-serif; font-size:0.75rem; color:#884444; letter-spacing:0.15em; text-transform:uppercase; pointer-events:all; cursor:pointer; background:#220000; border:2px solid #662222; border-radius:20px; padding:6px 24px; transition:all 0.2s; }
#red-alert-banner .banner-dismiss:hover { border-color:var(--red); color:var(--red); }

/* ── YELLOW ALERT ───────────────────────────── */
@keyframes yellowFlash { 0%,49%{background:rgba(160,120,0,0.15)} 50%,100%{background:rgba(160,120,0,0)} }
@keyframes yellowAlertText { 0%,49%{opacity:1} 50%,100%{opacity:0.2} }
@keyframes yellowBorderPulse { 0%,49%{box-shadow:0 0 0 4px #FFCC00, 0 0 30px #FFCC00} 50%,100%{box-shadow:none} }
body.yellow-alert { animation:yellowFlash 1.2s step-start infinite; }
body.yellow-alert::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:99998; border:6px solid #FFCC00; animation:yellowBorderPulse 1.2s step-start infinite; }
body.yellow-alert .elbow-tl::before, body.yellow-alert .elbow-tl::after, body.yellow-alert .elbow-tl .cap, body.yellow-alert .top-title-bar, body.yellow-alert .elbow-bl::before, body.yellow-alert .elbow-bl::after { background:#CC9900!important; }
body.yellow-alert .elbow-tr::before, body.yellow-alert .elbow-tr::after, body.yellow-alert .elbow-br::before, body.yellow-alert .elbow-br::after { background:#AA7700!important; }
body.yellow-alert .sidebar-btn { background:#332200!important; color:#FFCC44!important; }
body.yellow-alert .sidebar-btn.red { background:#553300!important; }
body.yellow-alert .seg-a, body.yellow-alert .seg-b, body.yellow-alert .seg-c, body.yellow-alert .seg-d { background:#664400!important; color:#FFCC88!important; }
body.yellow-alert .bot-bar { background:#332200!important; }
body.yellow-alert .bot-bar.b2, body.yellow-alert .bot-bar.b5 { background:#CC9900!important; animation:yellowFlash 1.2s step-start infinite; }
body.yellow-alert .r-seg { background:#443300!important; }
body.yellow-alert .blinker, body.yellow-alert .blinker.blue, body.yellow-alert .blinker.purple { background:#FFCC00!important; animation:yellowAlertText 0.6s step-start infinite; }
body.yellow-alert .profile-row  { border-left-color:#FFCC00!important; }
body.yellow-alert .profile-info h1 { color:#FFCC00!important; }
body.yellow-alert .avatar-ring  { border-color:#FFCC00!important; }
body.yellow-alert .status-dot   { background:#FFCC00!important; box-shadow:0 0 8px #FFCC00!important; }
body.yellow-alert .status-text  { color:#FFCC00!important; }
body.yellow-alert .lcars-divider { background:linear-gradient(to right,#FFCC00 60px,transparent 60px,transparent 68px,#AA7700 68px)!important; }

#yellow-alert-banner {
  display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:99999; background:#000; border:4px solid #FFCC00;
  border-radius:8px 40px 8px 40px; padding:20px 40px; text-align:center;
  pointer-events:none; box-shadow:0 0 50px rgba(255,204,0,0.6); min-width:420px;
}
body.yellow-alert #yellow-alert-banner { display:block; }
#yellow-alert-banner .banner-title { font-family:'LCARS',Arial,sans-serif; font-size:2.4rem; color:#FFCC00; letter-spacing:0.2em; text-transform:uppercase; animation:yellowAlertText 1.2s step-start infinite; }
#yellow-alert-banner .banner-sub   { font-family:'LCARS',Arial,sans-serif; font-size:0.85rem; color:#FFDD88; letter-spacing:0.15em; text-transform:uppercase; margin-top:8px; line-height:1.6; }
#yellow-alert-banner .banner-dismiss { display:block; margin:14px auto 0; font-family:'LCARS',Arial,sans-serif; font-size:0.75rem; color:#886622; letter-spacing:0.15em; text-transform:uppercase; pointer-events:all; cursor:pointer; background:#221100; border:2px solid #664400; border-radius:20px; padding:6px 24px; transition:all 0.2s; }
#yellow-alert-banner .banner-dismiss:hover { border-color:#FFCC00; color:#FFCC00; }


@media (max-width: 680px) {
  .top-chrome, .bottom-chrome { display: none; }
  .left-sidebar { width: 110px; }
  .sidebar-btn  { font-size: 0.6rem; padding-right: 10px; width: 110px; }
  .right-sidebar { display: none; }
  .data-row { grid-template-columns: repeat(2,1fr); }
  .sys-grid { grid-template-columns: 1fr; }

  .btn-row {
    flex-wrap: nowrap;
    gap: 6px;
  }
  .btn-clear, .btn-submit {
    padding: 10px 16px;   /* reduce horizontal padding */
    font-size: 0.8rem;
  }

}