/* ═══════════════════════════════════════════
NODARAMA AUX — SIDEPANEL CSS
═══════════════════════════════════════════ */

@font-face {
font-family: "NV Bitcount Single";
src:
url("assets/BitcountSingle_Roman-Regular.ttf") format("truetype"),
url("assets/Bitcount_Single/static/BitcountSingle_Roman-Regular.ttf") format("truetype");
font-display: swap;
}

/* 01 — TOKENS / RESET */
:root {
--bg0: #03050a;
--bg1: #0b0e15;
--bg2: #10141f;
--text: #eef1fb;
--muted: #b3b9d4;
--purple: #9c54d6;
--purple-dim: rgba(156,84,214,0.18);
--green: #8eb658;
--green-dim: rgba(142,182,88,0.15);
--amber: #d6a030;
--amber-dim: rgba(214,160,48,0.14);
--red: #d65454;
--red-dim: rgba(214,84,84,0.14);
--edge: rgba(255,255,255,0.07);
--soft-edge: rgba(120,128,150,0.18);
--panel: linear-gradient(180deg, rgba(12,15,24,0.92), rgba(5,7,12,0.96));
--font-device: "NV Bitcount Single", "Courier New", Courier, monospace;
--font-code: Consolas, "Cascadia Code", monospace;
--lcd-h: 58px;
--door-h: clamp(102px, 13vh, 138px);
--transport-h: 72px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }

/* 02 — SHELL */
.App-Ax {
height: 100vh;
overflow: hidden;
color: var(--text);
font-family: var(--font-device);
background: linear-gradient(180deg, #020307, #070913, #04060a);
}

.Column-Bx {
position: relative;
width: 100%;
height: 100vh;
padding: 2px 6px 56px;
display: flex;
flex-direction: column;
gap: 0;
overflow: hidden;
}

.TopStack-Bx {
flex: 0 0 auto;
width: 100%;
max-width: 100%;
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
background: var(--aux-top-bg, url("assets/cruisebgpanel.png")) center top / 100% 100% no-repeat;
}

.TopStack-Bx .Header-Cx,
.TopStack-Bx .Screen-Cx,
.TopStack-Bx .Monitor-Cx,
.TopStack-Bx .Levels-Cx,
.TopStack-Bx .Controls-Cx {
background: transparent;
}

/* 03 — HEADER / LOGO */
.Header-Cx {
position: relative;
flex: 0 0 auto;
width: 100%;
display: grid;
place-items: center;
padding: 0 0 8px;
overflow: hidden;
}

.Logo-Do {
display: block;
height: 44px;
max-width: 150px;
width: auto;
margin: 0 8px 0 auto;
justify-self: end;
object-fit: contain;
filter: brightness(1.18) contrast(1.08) drop-shadow(0 0 5px rgba(156,84,214,0.22));
}

/* 04 — SCREEN / LCD */
.Screen-Cx {
position: relative;
width: 96%;
height: var(--lcd-h);
min-height: var(--lcd-h);
flex: 0 0 var(--lcd-h);
margin: 0 auto;
display: grid;
grid-template-rows: 24px minmax(0, 1fr);
gap: 4px;
padding: 7px 10px 8px;
border: 0;
border-radius: 0;
background: var(--aux-lcd-panel, url("assets/cruisepanel.png")) center / 100% 100% no-repeat;
box-shadow: none;
overflow: hidden;
z-index: 1;
}

.Screen-Cx > * {
position: relative;
z-index: 1;
}

.Screen-Cx,
.Screen-Cx * {
color: #fff;
font-family: var(--font-device);
}

.LcdPort-Dx {
display: grid;
grid-template-columns: auto 72px 24px;
justify-content: end;
align-items: center;
gap: 8px;
transform: translateX(-8px);
color: #fff;
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
text-shadow: 0 0 8px rgba(255,255,255,0.56), 0 0 16px rgba(156,84,214,0.34);
}

.PortLabel-Eo {
color: #fff;
font-size: 11px;
letter-spacing: 2px;
text-shadow: inherit;
}

.PortInput-Eo {
height: 22px;
width: 72px;
padding: 3px 6px;
border: 0;
border-radius: 0;
background: transparent;
color: #ecebf1;
font-size: 11px;
letter-spacing: 1px;
text-align: center;
text-shadow: inherit;
font-family: var(--font-device);
position: relative;
z-index: 9;
pointer-events: auto;
cursor: text;
}

.PortSave-Eo {
width: 24px;
height: 22px;
padding: 0;
border: 1px solid rgba(255,255,255,0.16);
border-radius: 3px;
background: rgba(255,255,255,0.06);
color: #f4f5f8;
font-size: 12px;
text-shadow: inherit;
position: relative;
z-index: 9;
pointer-events: auto;
}

.PortSave-Eo:hover {
background: rgba(156,84,214,0.32);
}

.App-Ax[data-verbatim="connected"] .PortSave-Eo {
border-color: rgba(142,182,88,0.45);
box-shadow: 0 0 8px rgba(142,182,88,0.18);
}

.App-Ax[data-verbatim="offline"] .PortSave-Eo {
border-color: rgba(214,160,48,0.45);
box-shadow: 0 0 8px rgba(214,160,48,0.16);
}

.LcdTicker-Dx {
display: grid;
align-items: center;
overflow: hidden;
mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
}

.TickerTrack-Eo {
display: inline-block;
min-width: 100%;
white-space: nowrap;
font-family: var(--font-device);
font-size: 13px;
letter-spacing: 1.7px;
color: #fff;
text-shadow: 0 0 8px rgba(255,255,255,0.66), 0 0 16px rgba(156,84,214,0.36);
padding-right: 42px;
will-change: transform, opacity, filter;
animation: ticker-slide 36s linear infinite;
}

.TickerTrack-Eo.bad {
color: #fff;
text-shadow: 0 0 8px rgba(255,255,255,0.72), 0 0 18px rgba(156,84,214,0.42);
}

.TickerTrack-Eo.scanning-paused {
color: #fff;
text-shadow: 0 0 8px rgba(255,255,255,.95), 0 0 18px rgba(255,31,36,.72);
letter-spacing: .22em;
}

/* 05 — MONITOR STRIP */
.Monitor-Cx {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 10px;
width: 100%;
margin: 0;
padding: 10px 0 6px;
cursor: pointer;
z-index: 10;
font-family: "Courier New", Courier, monospace;
font-size: 12px;
letter-spacing: 0.16em;
line-height: 1.2;
color: #fff;
text-shadow: 0 0 7px rgba(255,255,255,0.45);
}

.MonitorLabel-Do {
font-weight: bold;
opacity: 0.72;
white-space: nowrap;
}

.IndicatorGroup-Dx {
display: inline-grid;
grid-template-columns: 6px auto;
align-items: center;
justify-self: end;
justify-content: end;
gap: 6px;
min-width: 0;
max-width: 100%;
white-space: nowrap;
text-align: right;
}

.ModelName-Eo {
min-width: 0;
overflow: visible;
text-overflow: clip;
white-space: nowrap;
opacity: 0.82;
text-align: right;
}

.StatusLight-Eo {
width: 6px;
height: 6px;
flex: 0 0 6px;
border-radius: 999px;
background: rgba(142,182,88,0.92);
box-shadow: 0 0 6px rgba(142,182,88,0.62), 0 0 12px rgba(142,182,88,0.24);
}

.Monitor-Cx.is-contract-missing .StatusLight-Eo {
animation: none;
}

.Monitor-Cx.is-idle .StatusLight-Eo {
opacity: 0;
background: transparent;
box-shadow: none;
animation: none;
}

/* Monitor alignment and menu placement */
.Monitor-Cx {
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.Monitor-Cx .IndicatorGroup-Dx:first-of-type {
  justify-self: start;
  justify-content: start;
  text-align: left;
}

.Monitor-Cx .IndicatorGroup-Dx:last-of-type {
  justify-self: end;
  justify-content: end;
  text-align: right;
}

#monitor-ctx-menu {
  left: 12px;
  right: 12px;
  top: 148px;
}

/* 06 — LEVELS / EQUALIZER */
.Levels-Cx {
position: relative;
width: 100%;
max-width: 100%;
height: auto;
background: #000;
overflow: hidden;
isolation: isolate;
flex: 0 0 auto;
}

.Frame-Eo {
position: relative;
z-index: 1;
display: block;
width: 100%;
max-width: 100%;
height: auto;
pointer-events: none;
user-select: none;
}

.StudioLevels-Eo,
.StudioCap-Eo {
display: none;
}

.Equalizer-Eo {
position: absolute;
left: 50%;
top: 50%;
z-index: 5;
width: 94%;
height: 72%;
min-height: 34px;
transform: translate(-50%, -50%);
display: flex;
align-items: flex-end;
gap: 2px;
padding: 28px 7px 8px;
background: #020306;
border: 0;
border-radius: 0;
box-shadow: inset 0 1px 0 rgba(78,30,108,0.82), inset 0 0 18px rgba(0,0,0,0.92), 0 0 10px rgba(156,84,214,0.18);
filter: brightness(1.35) contrast(1.18);
pointer-events: none;
}

.eq-bar {
flex: 1;
height: 100%;
display: flex;
flex-direction: column-reverse;
gap: 2px;
min-width: 0;
}

.eq-seg {
width: 100%;
height: 4px;
background: #07030b;
opacity: 0.18;
transition: opacity 0.15s, background 0.15s;
}

.eq-seg.on { opacity: 1; }
.eq-bar .eq-seg:nth-child(1).on  { background: linear-gradient(180deg, #7730a8, #672899 55%, #4f1d82); }
.eq-bar .eq-seg:nth-child(2).on  { background: linear-gradient(180deg, #873fb8, #7430a8 55%, #5a238e); }
.eq-bar .eq-seg:nth-child(3).on,
.eq-bar .eq-seg:nth-child(4).on,
.eq-bar .eq-seg:nth-child(5).on,
.eq-bar .eq-seg:nth-child(6).on  { background: linear-gradient(180deg, #c5a2d6, #a979c9 58%, #8e59ba); }
.eq-bar .eq-seg:nth-child(7).on,
.eq-bar .eq-seg:nth-child(8).on  { background: linear-gradient(180deg, #f6ecf8, #eee2f1 55%, #d9c7e4); }
.eq-bar .eq-seg:nth-child(9).on,
.eq-bar .eq-seg:nth-child(10).on { background: linear-gradient(180deg, #ffffff, #f7edf8 55%, #ead4ef); }
.eq-bar .eq-seg:nth-child(n+11).on { background: linear-gradient(180deg, #f05bd2, #e658c7 55%, #d948b8); }

/* 07 — CONTROLS / TRANSPORT */
.Controls-Cx {
position: relative;
width: 100%;
height: auto;
flex: 0 0 auto;
background: #000;
overflow: hidden;
isolation: isolate;
}

.ButtonLogo-Do {
position: relative;
z-index: 1;
display: block;
width: 100%;
height: auto;
object-fit: contain;
pointer-events: none;
user-select: none;
}

.ButtonFrame-Do {
position: absolute;
inset: 0;
z-index: 0;
display: block;
width: 100%;
height: 100%;
object-fit: fill;
pointer-events: none;
user-select: none;
}

.Buttons-Dx {
position: absolute;
inset: 0;
z-index: 4;
display: grid;
grid-template-columns: repeat(6, 1fr);
width: 100%;
height: 100%;
margin: 0;
}

.Btn-Eo {
appearance: none;
width: 100%;
height: 100%;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
color: transparent;
font-size: 0;
box-shadow: none;
outline: none;
cursor: pointer;
position: relative;
transition: background 0.15s ease;
}

.Btn-Eo2 {
grid-column: span 2;
}

.Btn-Eo:hover {
background: rgba(156, 84, 214, 0.15);
}

.Btn-Eo:active {
background: rgba(156, 84, 214, 0.3);
}

.Btn-Eo:focus {
outline: none;
}

#btn-prev.paste-ready::after {
content: "";
position: absolute;
bottom: 11px;
left: calc(50% + 3px);
transform: translateX(-50%);
width: 30px;
height: 3px;
border-radius: 999px;
background: linear-gradient(90deg, #ffffff, #f8f8fb 54%, #dfe2ea);
box-shadow: 0 0 7px rgba(255, 255, 255, 0.78), 0 0 14px rgba(156, 84, 214, 0.36);
animation: none;
}

#btn-pause {
position: relative;
}

#btn-pause::after {
content: "";
display: none;
position: absolute;
left: 50%;
top: 9%;
width: 8px;
height: 8px;
transform: translateX(-50%);
border-radius: 999px;
background: #ff1f24;
box-shadow: 0 0 6px rgba(255, 20, 28, .95), 0 0 14px rgba(255, 20, 28, .56);
pointer-events: none;
z-index: 5;
}

.App-Ax[data-scan-paused="true"] #btn-pause::after {
display: block;
animation: none;
}

/* 08 — TASKLIST / CARDS */
.Lowerframe-Cx {
position: relative;
flex: 1 1 auto;
width: 100%;
max-width: 100%;
min-width: 0;
min-height: 0;
display: flex;
flex-direction: column;
gap: 4px;
padding: 6px;
overflow: hidden;
transition: transform 1.1s ease, filter 1.1s ease;
}


/* 09 — CONTEXT MENU OVERLAY */
.Menu-Cx {
position: absolute;
z-index: 200;
background: var(--panel);
border: 1px solid var(--edge);
box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

.Menu-Cx.hidden {
display: none !important;
}

.MenuList-Dx {
list-style: none;
display: flex;
flex-direction: column;
}

.MenuOption-Eo {
cursor: pointer;
padding: 6px 12px;
font-size: 11px;
}


/* 11 — ANIMATIONS */
@keyframes auxPauseBlink {
0%, 45% { opacity: 1; }
46%, 100% { opacity: .18; }
}

@keyframes pauseLcdFlash {
0%, 45% { opacity: 1; filter: brightness(1.35); }
46%, 100% { opacity: .18; filter: brightness(.62); }
}

@keyframes contract-missing-pulse {
from {
background: rgba(142,182,88,0.94);
box-shadow: 0 0 6px rgba(142,182,88,0.62), 0 0 12px rgba(142,182,88,0.24);
}
to {
background: rgba(214,160,48,0.94);
box-shadow: 0 0 7px rgba(214,160,48,0.70), 0 0 14px rgba(214,160,48,0.28);
}
}

@keyframes lcd-breathe {
0%, 100% { filter: brightness(0.96) saturate(0.96); }
31%      { filter: brightness(1.08) saturate(1.06); }
57%      { filter: brightness(1.01) saturate(1.0); }
82%      { filter: brightness(1.14) saturate(1.12); }
}

@keyframes lcd-scan {
0%, 100% { opacity: 0; transform: translateX(-110%); }
42%      { opacity: .10; transform: translateX(-18%); }
73%      { opacity: .16; transform: translateX(56%); }
88%      { opacity: .06; transform: translateX(110%); }
}

@keyframes ticker-slide {
0%   { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}

@keyframes ticker-glow-breathe {
0%, 100% { opacity: .88; filter: brightness(.94); }
18%      { opacity: .94; filter: brightness(1.06); }
43%      { opacity: .90; filter: brightness(.98); }
67%      { opacity: .97; filter: brightness(1.12); }
86%      { opacity: .91; filter: brightness(1.01); }
}

@keyframes pause-flash {
from { opacity: 0.32; filter: brightness(0.78); }
to   { opacity: 1;    filter: brightness(1.28); }
}

@keyframes send-sweep {
0%   { transform: translateX(-100%); opacity: .1; }
45%  { opacity: 1; }
100% { transform: translateX(100%);  opacity: .1; }
}

/* RESTORED FROM SAFE CSS: cards/context menu core */

.Cards-Do {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: grid;
  gap: 3px;
  align-content: start;
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 0;
}


/* ── Context menu ── */
.ctx-menu {
  position: fixed;
  z-index: 99999;
  min-width: 158px;
  background: linear-gradient(180deg, #0e1120, #090c18);
  border: 1px solid rgba(156, 84, 214, 0.36);
  border-radius: 4px;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.72),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  padding: 4px 0;
  overflow: hidden;
}

.ctx-title {
  font-size: 9px;
  letter-spacing: .14em;
  color: rgba(179, 185, 212, 0.45);
  padding: 5px 12px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: 1px solid rgba(120, 128, 150, 0.12);
  margin-bottom: 3px;
  max-width: 200px;
}

.ctx-btn {
  display: block;
  width: 100%;
  padding: 6px 12px;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 0;
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--text);
  font-family: var(--font-device);
  cursor: pointer;
  transition: background 0.1s;
}
.ctx-btn:hover { background: rgba(156, 84, 214, 0.16); }

.ctx-discard {
  color: var(--red);
  margin-top: 2px;
  border-top: 1px solid rgba(120, 128, 150, 0.10);
  padding-top: 7px;
}
.ctx-discard:hover { background: rgba(214, 84, 84, 0.12); }

/* Brighter right-click context menu text */
.ctx-menu .ctx-title {
  color: rgba(56, 136, 227, 0.82);
  text-shadow: 0 0 7px rgba(255,255,255,0.18);
}

.ctx-menu .ctx-btn {
  color: #ffffff;
  text-shadow: 0 0 7px rgba(255,255,255,0.22);
}

.ctx-menu .ctx-discard {
  color: #ff8a8f;
  text-shadow: 0 0 7px rgba(255,106,112,0.28);
}

.ctx-menu .ctx-btn:hover {
  color: #ffffff;
  background: rgba(156, 84, 214, 0.24);
}

.ctx-menu .ctx-discard:hover {
  background: rgba(214, 84, 84, 0.18);
}

