:root { color-scheme: dark; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background:#0d0f0e; color:#d8ddd9; --sapi-blue:#1245a8; --sapi-cyan:#78c1db; --sapi-red:#d34c51; --sapi-paper:#e6e0c8; --sapi-ink:#0b2c7a; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; min-height:100vh; background:radial-gradient(circle at 50% 4%,rgba(72,96,128,.10),transparent 28rem), linear-gradient(180deg,#121416 0,#14181b 22%,#101214 100%); }
button,.rom-loader,input { font:inherit; }
button,.rom-loader { min-height:36px; padding:7px 11px; border:1px solid #6e685b; border-radius:5px; background:linear-gradient(180deg,#7c7669,#595447); color:#101215; cursor:pointer; box-shadow:inset 0 1px rgba(255,255,255,.28), 0 2px 3px rgba(0,0,0,.28); }
button:hover,.rom-loader:hover { background:linear-gradient(180deg,#938c7d,#686151); border-color:#9d9686; }
button:active { transform:translateY(1px); }
button.primary { border-color:#70695c; background:linear-gradient(180deg,#8b8577,#635d50); }
button:disabled,input:disabled { opacity:.42; cursor:not-allowed; transform:none; }
.emulator { width:min(1360px,100%); margin:0 auto; padding:18px; }
.top-grid { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(340px,.8fr); align-items:start; gap:18px; margin-bottom:18px; }
.lower-grid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1.15fr); align-items:start; gap:18px; margin-bottom:18px; }
.right-column { display:grid; min-width:0; align-content:start; gap:12px; }
.toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px; border:1px solid #444c57; border-radius:8px; background:linear-gradient(180deg,#24282d,#1a1e22); box-shadow:inset 0 1px rgba(255,255,255,.07); }
.transport-controls { display:flex; align-items:center; flex-wrap:wrap; gap:7px; }
.transport-controls button { min-width:64px; touch-action:manipulation; }

.ank1-aux-panel {
  display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:10px;
  padding:7px 9px; border:1px solid #5f625b; border-radius:8px;
  background:linear-gradient(180deg,#b4ad9d 0,#8e887b 48%,#6e695f 100%);
  color:#171817; box-shadow:inset 0 1px rgba(255,255,255,.30), inset 0 -1px rgba(0,0,0,.20), 0 4px 10px rgba(0,0,0,.18);
}
.ank1-aux-panel[hidden] { display:none; }
.ank1-aux-title { min-width:0; font-size:13px; letter-spacing:.12em; }
.ank1-aux-buttons { display:flex; align-items:center; justify-content:flex-end; gap:6px; }
button.ank1-aux-button {
  min-width:46px; min-height:32px; padding:4px 8px; border:2px solid #45443f; border-radius:4px;
  background:linear-gradient(180deg,#3e403e,#222522 70%,#171917); color:#eee9d9;
  font-size:12px; font-weight:800; letter-spacing:.08em; text-shadow:0 1px #000; touch-action:none; user-select:none;
  box-shadow:inset 0 1px rgba(255,255,255,.15), inset 0 -3px rgba(0,0,0,.32), 0 2px 3px rgba(0,0,0,.35);
}
button.ank1-combo-button { min-width:62px; }
button.ank1-aux-button:hover { background:linear-gradient(180deg,#50534f,#2b2e2b 70%,#1a1d1a); border-color:#555650; }
button.ank1-aux-button.pressed,
button.ank1-aux-button[aria-pressed="true"] {
  transform:translateY(2px); background:linear-gradient(180deg,#1a1c1a,#2b2d29);
  box-shadow:inset 0 3px 5px rgba(0,0,0,.72), 0 0 0 1px rgba(255,255,255,.08);
}
button.ank1-res-button { color:#f2d6d1; border-color:#694b48; }
.status { min-width:76px; padding:7px 11px; border:1px solid #626b64; border-radius:999px; text-align:center; font-weight:700; letter-spacing:.06em; }
.status.running { border-color:#3d8052; background:#173823; color:#b7f1c6; }
.status.stopped { border-color:#7c4343; background:#351b1b; color:#f0b8b8; }
.status.halted { border-color:#857440; background:#39321b; color:#eadb9d; }
.screen-stage { width:min(100%,720px); min-width:0; justify-self:center; padding:9px; border-radius:8px; background:linear-gradient(180deg,#20242a,#111418); box-shadow:0 12px 32px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.05); }
.display-bezel { width:100%; }
#and1Canvas { display:block; width:100%; height:auto; aspect-ratio:4/3; border:1px solid #26372a; background:#071008; image-rendering:pixelated; }
.panel { min-width:0; padding:14px; border:1px solid #474d54; border-radius:8px; background:linear-gradient(180deg,#24282d,#1a1e22 42%,#171a1d); box-shadow:inset 0 1px rgba(255,255,255,.06); }
.panel h2 { margin:0 0 12px; font-size:16px; letter-spacing:.04em; color:#ece9df; }
.cpu-panel {
  position:relative;
  overflow:hidden;
  border-color:#7a756a;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 2px, rgba(0,0,0,.02) 2px 4px),
    linear-gradient(180deg,#b7b0a1 0,#9a9385 18%,#7e786d 48%,#6b665c 100%);
  box-shadow:inset 0 1px rgba(255,255,255,.30), inset 0 -1px rgba(0,0,0,.18), 0 6px 16px rgba(0,0,0,.18);
}
.cpu-panel::before,
.cpu-panel::after {
  content:"";
  position:absolute;
  top:10px;
  width:11px;
  height:11px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #f4f2ec 0 14%, #8e887e 15% 42%, #5b564e 43% 100%);
  box-shadow:inset 0 1px rgba(255,255,255,.28), 0 1px 1px rgba(0,0,0,.28);
}
.cpu-panel::before { left:10px; }
.cpu-panel::after { right:10px; }
.cpu-panel h2, .cpu-panel .clock-control { color:#141617; }
.cpu-panel h2::after { background:linear-gradient(90deg,#b64b4b 0 20%, #3a4554 20% 100%); }
.cpu-panel .clock-control span { color:#212428; }
.cpu-panel .cpu-state { gap:10px; }
.cpu-panel .cpu-metric b { color:#a9b08e; }
.cpu-panel .cpu-metric span { color:#d9f0bb; }
.cpu-panel .panel-title-row { margin-bottom:16px; padding:0 8px; }
.cpu-panel .cpu-state { padding:0 6px 4px; }

.slots { overflow:hidden; border:1px solid #5a615b; border-radius:6px; background:linear-gradient(180deg,#0d1110,#0b0e0d); box-shadow:inset 0 0 0 1px rgba(255,255,255,.03); }
.slot { display:grid; grid-template-columns:64px minmax(0,1fr); align-items:center; gap:10px; padding:10px 10px; border-bottom:1px solid #222825; background:linear-gradient(180deg,#0f1412,#0c100e); }
.slot:last-child { border-bottom:0; }
.slot-number { color:#bdc8bb; font-size:12px; letter-spacing:.03em; }
.slot-card { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px; min-height:50px; padding:9px 12px; border:1px solid #71936d; border-radius:3px; background:linear-gradient(180deg,#58a662 0%,#43824c 58%,#366a3f 100%); box-shadow:inset 0 1px rgba(255,255,255,.10), inset 0 -1px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.18); overflow:hidden; }
.slot-card::before { content:""; position:absolute; left:20%; right:14px; top:0; bottom:0; background:
  radial-gradient(circle, rgba(247,214,129,.98) 0 2.1px, rgba(120,78,20,.84) 2.2px 4.1px, transparent 4.2px) 0 10px / 14px 18px repeat-x,
  radial-gradient(circle, rgba(247,214,129,.98) 0 2.1px, rgba(120,78,20,.84) 2.2px 4.1px, transparent 4.2px) 0 calc(100% - 10px) / 14px 18px repeat-x;
  opacity:.90; pointer-events:none; }
.slot-card::after { content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 1px rgba(255,255,255,.06), inset 0 -1px rgba(0,0,0,.15); }
.slot-board, .slot-actions { position:relative; z-index:1; }
.slot-board { min-width:0; display:flex; align-items:baseline; gap:9px; padding-right:10px; }
.slot-board strong { color:#f3f4ec; white-space:nowrap; text-shadow:0 1px 0 rgba(0,0,0,.25); }
.slot-board small { color:#edf2d6; white-space:nowrap; }
.slot-removed { opacity:.88; background:linear-gradient(180deg,#0d1110,#090c0a); }
.slot-removed .slot-card { background:linear-gradient(180deg,#5e665e 0%,#4a514a 58%,#3e443e 100%); border-color:#7a837a; }
.slot-removed .slot-board small { color:#f0d1d1; }
.slot-actions { display:grid; grid-template-columns:auto auto; gap:6px; }
.slot-actions button { min-height:30px; padding:4px 8px; font-size:10px; font-weight:700; letter-spacing:.02em; }
.board-power.inserted { border-color:#7a7062; }
.board-power.removed { border-color:#6f7768; background:linear-gradient(180deg,#7e786a,#5e584a); }
.empty-slot { min-height:42px; color:#626a64; }
.slot-card-empty { min-height:50px; background:linear-gradient(180deg,#4c564c 0%,#3f473f 58%,#323832 100%); border-color:#5d715f; }
.empty-slot .slot-board small { color:#d6ddcb; }
.panel-title-row { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:14px; }
.panel-title-row h2 { margin:0; }
.clock-control { display:flex; align-items:center; gap:7px; color:#aeb7b0; white-space:nowrap; }
#clockMHz { width:82px; padding:7px 8px; border:1px solid #6f746b; border-radius:4px; background:#10110f; color:#f1f5f2; }
.cpu-state { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px; align-items:start; }
.cpu-metric { min-width:0; min-height:82px; padding:12px; border:1px solid #5f625b; border-radius:5px; background:linear-gradient(180deg,#171715,#0f1110); box-shadow:inset 0 1px rgba(255,255,255,.04), inset 0 0 0 1px rgba(168,176,142,.06); }
.cpu-metric b { display:block; margin-bottom:5px; color:#818b83; font-size:11px; letter-spacing:.05em; text-transform:uppercase; }
.cpu-metric span { display:block; overflow:visible; color:#e5eae6; text-overflow:clip; white-space:normal; overflow-wrap:anywhere; line-height:1.28; }
.run-value { color:#9ee0ad!important; }
.halt-value { color:#e8d58e!important; }
.stop-value { color:#dfaaaa!important; }
.board-config { width:min(620px,calc(100% - 24px)); padding:0; border:1px solid #4a6589; border-radius:9px; background:linear-gradient(180deg,#152131,#101822); color:#dce6f2; box-shadow:0 24px 80px rgba(0,0,0,.65); }
.board-config::backdrop { background:rgba(0,0,0,.72); }
.config-shell { margin:0; }
.config-header { display:flex; justify-content:space-between; gap:20px; padding:18px 20px; border-bottom:1px solid #30435d; background:linear-gradient(180deg,#18263a,#121b29); }
.config-header h2 { margin:3px 0 0; font-size:18px; }
.config-board-id { color:#8fb8ef; font-size:12px; letter-spacing:.08em; }
.icon-button { min-width:40px; padding:0; font-size:24px; }
.config-content { padding:20px; }
.config-content > p:first-child { margin-top:0; }
.config-values { margin:18px 0; border:1px solid #30435d; border-radius:5px; background:rgba(9,15,24,.28); }
.config-values div { display:grid; grid-template-columns:150px 1fr; gap:14px; padding:10px 12px; border-bottom:1px solid #30435d; }
.config-values div:last-child { border-bottom:0; }
.config-values dt { color:#9fb9db; }
.config-values dd { margin:0; overflow-wrap:anywhere; }
.rom-loader { display:block; text-align:center; border-color:#45699c; background:linear-gradient(180deg,#27456f,#1a3150); color:#eef5ff; }
.rom-loader input { display:none; }
.config-note { color:#aab8c7; font-size:12px; line-height:1.5; }
.config-footer { display:flex; justify-content:flex-end; padding:14px 20px; border-top:1px solid #30435d; background:linear-gradient(180deg,#121b29,#101721); }
.config-footer button { min-width:110px; border-color:#45699c; background:linear-gradient(180deg,#27456f,#1a3150); color:#eef5ff; }
.keyboard-sink { position:fixed; left:-10000px; top:0; width:1px; height:1px; opacity:0; pointer-events:none; resize:none; }
.keyboard-mode { display:grid; gap:.45rem; margin:1rem 0 0; padding:.85rem 1rem; border:1px solid rgba(150,180,170,.35); border-radius:.5rem; }
.keyboard-mode label { display:flex; align-items:center; gap:.55rem; font-weight:700; }
.keyboard-mode small { display:block; margin:-.15rem 0 .45rem 1.7rem; opacity:.75; line-height:1.35; }
.memory-config { display:grid; gap:10px; margin:16px 0 0; padding:14px; border:1px solid #30435d; border-radius:5px; background:rgba(9,15,24,.22); }
.memory-config legend { padding:0 6px; color:#d7e6fb; font-weight:700; }
.memory-config > small,.check-row + small { color:#aab8c7; line-height:1.4; }
.check-row { display:flex; align-items:center; gap:9px; font-weight:700; }
.rom-bank-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid #30435d; }
.rom-bank-row strong,.rom-bank-row small { display:block; }
.rom-bank-row small { margin-top:5px; color:#9fb9db; overflow-wrap:anywhere; }
.rom-bank-actions { display:flex; gap:7px; }
.rom-loader.compact { min-height:36px; padding:7px 11px; }
.rom-combined-row { padding-top:4px; }
.eprom-mode-section { display:grid; gap:8px; }
.eprom-combined-toggle { margin-top:10px; padding-top:10px; border-top:1px solid #30435d; }
.disabled-section { opacity:.48; }
.disabled-section .rom-loader, .disabled-section button { cursor:not-allowed; }
.eprom-mode-section[hidden] { display:none; }
.rom-bank-row.single { border-bottom:0; padding-bottom:4px; }
.select-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:.65rem 0; }
.select-row select { min-width:14rem; }
.compact-select { margin:.45rem 0 0; font-size:.82rem; }
.compact-select select { min-width:11rem; }
.rem-group-row { align-items:flex-start; }
.rem-row { margin-top:12px; }
.rem-socket { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; padding:9px 0; border-top:1px solid #30435d; }
.rem-socket-head { min-width:0; }
.rem-socket-id { display:block; color:#9fb9db; font-size:12px; }
.rem-socket small { display:block; margin-top:3px; color:#9fb9db; overflow-wrap:anywhere; }

/* --- Terminál DSM-1 --- */
.terminal-panel[hidden] { display:none; }
.terminal-panel { margin-top:0; }
.terminal-tools { display:flex; align-items:center; gap:10px; }
.terminal-hint { font-size:11px; letter-spacing:.03em; color:#7d867f; }
.terminal-mode { display:flex; align-items:center; gap:6px; font-size:11px; letter-spacing:.03em; color:#7d867f; }
.terminal-mode select { font:inherit; padding:3px 6px; border:1px solid #4d6f9e; border-radius:4px; background:#0f1722; color:#d8ddd9; }
.terminal-screen {
  overflow-x:auto; padding:12px 14px; border:1px solid #424847; border-radius:6px;
  background:#050a06; color:#8ff0a6; font-size:13px; line-height:1.32;
  white-space:pre; tab-size:8; cursor:text;
  text-shadow:0 0 6px rgba(120,240,160,.28); box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
}
.terminal-screen:focus { outline:1px solid #6c96ce; outline-offset:2px; }
.terminal-screen.disconnected {
  display:grid; place-items:center; min-height:34em; white-space:normal;
  background:linear-gradient(180deg,#080b0d,#050708); color:#c8d8ea;
  text-shadow:none; cursor:default;
}
.terminal-disconnected { display:grid; gap:9px; text-align:center; letter-spacing:.06em; }
.terminal-disconnected strong { color:#e7edf5; font-size:15px; }
.terminal-disconnected span { color:#8fa8c6; font-size:11px; }
.terminal-screen:focus .terminal-cursor { animation:terminal-blink 1s steps(1,end) infinite; }
.terminal-cursor { background:#8ff0a6; color:#050a06; }
@keyframes terminal-blink { 50% { background:transparent; color:#8ff0a6; } }

/* --- Magnetofon DSM-1 --- */
.cassette-panel[hidden] { display:none; }
.cassette-panel { padding:12px; }
.cassette-state { font-size:11px; letter-spacing:.03em; color:#7d867f; }
.cassette-state.running { color:#8ff0a6; }
.cassette-tools { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.cassette-load { display:inline-flex; align-items:center; padding:6px 12px; border:1px solid #6e685b; border-radius:4px; background:linear-gradient(180deg,#7c7669,#595447); color:#101215; font-size:12px; letter-spacing:.05em; cursor:pointer; box-shadow:inset 0 1px rgba(255,255,255,.28), 0 2px 3px rgba(0,0,0,.28); }
.cassette-load:hover { border-color:#9d9686; }
.app-version { font-size:.65em; font-weight:500; opacity:.72; white-space:nowrap; }
.chassis h2, .cpu-panel h2, .terminal-panel h2 { position:relative; }
.chassis h2::after, .cpu-panel h2::after, .terminal-panel h2::after {
  content:""; display:block; width:64px; height:3px; margin-top:7px;
  background:linear-gradient(90deg,#b34a4a 0 24%, #8ba1c1 24% 100%);
  border-radius:999px;
}
.cassette-heading > div { min-width:0; }
.cassette-heading h2 { margin-bottom:4px; }
.cassette-profile { display:flex; align-items:center; gap:8px; color:#a6b6ca; font-size:11px; white-space:nowrap; }
.cassette-profile select { min-width:190px; padding:6px 8px; border:1px solid #4d6f9e; border-radius:4px; background:#0f1722; color:#e2e7e3; font:inherit; }
.cassette-deck { display:grid; grid-template-columns:1fr auto; align-items:center; gap:16px; margin:2px 0 12px; padding:12px; border:1px solid #3b5f93; border-radius:7px; background:linear-gradient(180deg,#203553,#161d27); box-shadow:inset 0 1px rgba(255,255,255,.05), inset 0 -12px 24px rgba(0,0,0,.25), 0 0 0 1px rgba(97,152,230,.06); }
.cassette-shell { position:relative; width:100%; max-width:390px; aspect-ratio:1.78/1; padding:8% 9% 6%; border:2px solid #7c807f; border-radius:13px 13px 9px 9px; background:linear-gradient(145deg,#d0cec1,#8c8b80 56%,#b6b2a4); color:#20211e; box-shadow:inset 0 0 0 4px rgba(255,255,255,.20),0 8px 18px rgba(0,0,0,.42); overflow:hidden; justify-self:center; }
.cassette-shell::before,.cassette-shell::after { content:""; position:absolute; top:11px; width:9px; height:9px; border-radius:50%; background:radial-gradient(circle at 35% 35%,#7d7f7b 0 16%,#525651 17% 48%,#262925 49% 100%); box-shadow:0 0 0 2px rgba(255,255,255,.18); }
.cassette-shell::before { left:15px; }
.cassette-shell::after { right:15px; }
.cassette-shell .cassette-window::after {
  content:""; position:absolute; left:7%; right:7%; bottom:-92%; height:92%;
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(0,0,0,.14));
  clip-path:polygon(8% 0,92% 0,100% 100%,0 100%); opacity:.9;
}
.cassette-label-card { display:block; height:27%; padding:0; border-radius:6px 6px 3px 3px; background:linear-gradient(180deg,#ecf4ff,#dbe8f7); border:1px solid rgba(38,67,115,.35); overflow:hidden; }
.cassette-label-simple {
  display:grid; grid-template-rows:1fr 1fr; gap:0; height:100%;
  padding:0; background:linear-gradient(180deg,#eef5ff,#dde8f7);
}
.cassette-label-simple strong,
.cassette-label-simple span {
  display:flex; align-items:center; overflow:hidden; min-width:0;
  padding:0 12px; white-space:nowrap; text-overflow:ellipsis;
}
.cassette-label-simple strong {
  border-bottom:1px solid rgba(42,76,128,.28); color:#12366f;
  font:800 clamp(11px,1.45vw,15px)/1 ui-monospace,monospace; letter-spacing:.04em; text-transform:uppercase;
}
.cassette-label-simple span {
  color:#3b5b87; font:700 clamp(10px,1.08vw,12px)/1 ui-monospace,monospace; letter-spacing:.03em;
}
.cassette-window { display:grid; grid-template-columns:1fr minmax(72px,1.1fr) 1fr; align-items:center; gap:8%; height:48%; margin:3% 6% 0; padding:3% 7%; border:3px solid #585c55; border-radius:34px; background:linear-gradient(180deg,#292c29,#1e201e 55%,#131514); box-shadow:inset 0 0 12px rgba(0,0,0,.78); }
.cassette-reel { --tape-pack:.5; position:relative; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,#e7e3d4 0 16%,#4e5149 17% 23%,#d1cdbf 24% 54%,#5b5e55 55% 61%,#1c1e1b 62%); box-shadow:0 0 0 3px #20221f; overflow:hidden; }
.cassette-tape-pack { display:none; }
.cassette-reel::before { content:""; position:absolute; inset:22%; z-index:1; border-radius:50%; background:repeating-conic-gradient(#4b4e47 0 10deg,#d5d1c2 10deg 28deg); }
.cassette-reel i { position:absolute; inset:38%; z-index:2; border-radius:50%; background:#252722; box-shadow:0 0 0 2px #aaa89e; }
.cassette-tape-window { position:relative; height:42%; border:2px solid #121310; border-radius:999px; background:#090a09; overflow:hidden; box-shadow:inset 0 0 7px #000; }
.cassette-tape-window span { position:absolute; left:7%; right:7%; top:50%; height:18%; transform:translateY(-50%); border-radius:999px; background:linear-gradient(180deg,#8a5a39,#5b341f 58%,#936243); box-shadow:0 0 8px rgba(99,59,34,.45); overflow:hidden; }
.cassette-tape-window span::after { content:""; position:absolute; left:52%; right:0; top:-20%; bottom:-20%; background:linear-gradient(180deg,#070808,#000 60%,#080808); box-shadow:inset 1px 0 0 rgba(255,255,255,.05), -1px 0 0 rgba(0,0,0,.85); }
.cassette-head-window { position:absolute; left:28%; right:28%; bottom:5%; height:14%; display:flex; align-items:center; justify-content:space-around; border:2px solid #5b5d55; border-bottom:0; border-radius:5px 5px 0 0; background:#77786f; }
.cassette-head-window span { width:12%; aspect-ratio:1; border-radius:50%; background:#252622; }
.cassette-deck-status { display:grid; gap:12px; justify-items:center; }
.cassette-counter { min-width:76px; padding:8px 10px; border:2px inset #4f6481; border-radius:3px; background:#070b0d; color:#c8e6cc; font:700 22px/1 ui-monospace,monospace; letter-spacing:.12em; text-align:center; text-shadow:0 0 7px rgba(170,240,185,.35); }
.cassette-mode-lamps { display:grid; gap:7px; }
.lamp { min-width:56px; padding:4px 6px; border:1px solid #373d38; border-radius:3px; background:#141714; color:#545b55; font-size:10px; letter-spacing:.12em; text-align:center; }
.cassette-panel.running .lamp-play { border-color:#3e714b; background:#173320; color:#a8e5b7; box-shadow:0 0 8px rgba(95,215,125,.24); }
.cassette-panel.recording .lamp-rec { border-color:#844747; background:#431d1d; color:#f0a6a6; box-shadow:0 0 9px rgba(230,70,70,.25); }
.cassette-panel.running .cassette-reel-left,
.cassette-panel.running .cassette-reel-right { animation:cassette-spin-reverse 1.25s linear infinite; }
.cassette-panel.recording .cassette-reel-left,
.cassette-panel.recording .cassette-reel-right { animation-duration:.9s; }
@keyframes cassette-spin-reverse { to { transform:rotate(-360deg); } }
.cassette-import-info { margin:10px 0 0; color:#858f87; font-size:11px; line-height:1.45; }
.cassette-import-info.success { color:#8fc39b; }
.cassette-import-info.error { color:#d79a9a; }

@media(max-width:980px){
  .top-grid,.lower-grid{grid-template-columns:1fr}
  .right-column{grid-row:1}
  .screen-stage{grid-row:2}
  .cpu-state{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:720px){
  .cassette-deck{grid-template-columns:1fr}
  .cassette-deck-status{grid-template-columns:auto auto;align-items:center}
  .cassette-mode-lamps{grid-template-columns:1fr 1fr}
  .cassette-profile{align-items:flex-start;flex-direction:column}
  .cassette-profile select{min-width:0;width:100%}
}
@media(max-width:620px){
  .emulator{padding:10px}
  .toolbar{align-items:stretch;flex-direction:column}
  .ank1-aux-panel{grid-template-columns:1fr}
  .ank1-aux-buttons{display:grid;grid-template-columns:repeat(4,1fr)}
  button.ank1-aux-button{width:100%}
  .status{align-self:stretch}
  .transport-controls>*{flex:1 1 auto}
  .slot{grid-template-columns:46px 1fr}
  .slot-actions{grid-column:1/-1}
  .slot-actions button{width:100%}
  .cpu-state{grid-template-columns:1fr 1fr}
  .panel-title-row{align-items:flex-start;flex-direction:column}
  .config-values div{grid-template-columns:1fr;gap:4px}
  .rom-bank-row{grid-template-columns:1fr}
  .rom-bank-actions>*{flex:1}
  .rom-bank-actions .rom-loader{text-align:center}
  .rem-socket{grid-template-columns:1fr}
  .rem-socket .rom-bank-actions>*{flex:1}
  .terminal-screen{font-size:11px}
  .terminal-hint{display:none}
  .terminal-tools{flex-wrap:wrap}
}

#clockMHz, .cassette-profile select, .terminal-mode select {
  box-shadow:inset 0 0 0 1px rgba(93,140,206,.06);
}
.panel-title-row h2, .panel h2 { text-transform:uppercase; }
.toolbar .status { box-shadow:inset 0 1px rgba(255,255,255,.05); }

/* --- Vydání 1.0 RC1: trvalý vstup do dokumentace a uvítací okno --- */
.toolbar-meta { display:flex; align-items:center; gap:7px; }
.help-button { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; min-height:32px; padding:5px 9px; border-color:#4d6f9e; background:linear-gradient(180deg,#27456f,#1a3150); color:#eef5ff; font-size:10px; font-weight:800; letter-spacing:.06em; }
.help-button:hover { border-color:#7197c8; background:linear-gradient(180deg,#315783,#203e63); }

.welcome-dialog { width:min(760px,calc(100% - 24px)); padding:0; border:1px solid #4f719e; border-radius:10px; background:#111923; color:#e5ebf2; box-shadow:0 28px 90px rgba(0,0,0,.72); }
.welcome-dialog::backdrop { background:rgba(4,7,10,.78); backdrop-filter:blur(2px); }
.welcome-shell { margin:0; }
.welcome-header { display:flex; align-items:flex-start; justify-content:space-between; gap:22px; padding:24px 26px 20px; border-bottom:1px solid #324760; background:linear-gradient(135deg,#203957,#162335 62%,#111923); }
.welcome-header h1 { margin:5px 0 3px; color:#f4f6f4; font-size:29px; line-height:1.05; letter-spacing:.01em; }
.welcome-header p { margin:0; color:#9eb3cc; font-size:12px; }
.welcome-release { display:inline-block; padding:4px 9px; border:1px solid #7699c7; border-radius:999px; background:#142945; color:#dbeafe; font-size:11px; font-weight:800; letter-spacing:.08em; }
.welcome-close { border-color:#45658d; background:linear-gradient(180deg,#2b4669,#182c47); color:#eef4fb; }
.welcome-body { padding:22px 26px 20px; }
.welcome-body > p:first-child { margin-top:0; font-size:14px; line-height:1.55; }
.welcome-facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:18px 0; }
.welcome-facts div { min-width:0; padding:13px; border:1px solid #31445b; border-radius:6px; background:linear-gradient(180deg,#172232,#121a25); }
.welcome-facts strong { display:block; margin-bottom:6px; color:#dbe9fb; font-size:12px; }
.welcome-facts span { display:block; color:#aab8c8; font-size:11px; line-height:1.45; }
.welcome-note { margin:16px 0; padding:11px 13px; border-left:4px solid #b38a56; background:#251e16; color:#dbc6a9; font-size:11px; line-height:1.5; }
.welcome-links { display:flex; flex-wrap:wrap; gap:8px; }
.welcome-links a { display:inline-flex; align-items:center; min-height:36px; padding:7px 11px; border:1px solid #4d6f9e; border-radius:5px; background:linear-gradient(180deg,#27456f,#1a3150); color:#eef5ff; font-size:11px; font-weight:800; letter-spacing:.04em; text-decoration:none; }
.welcome-links a:hover { border-color:#7197c8; background:linear-gradient(180deg,#315783,#203e63); }
.welcome-footer { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:15px 26px; border-top:1px solid #324760; background:#0f1721; }
.welcome-footer label { display:flex; align-items:center; gap:8px; color:#a9b5c2; font-size:11px; }
.welcome-footer input { accent-color:#527cb4; }
.welcome-footer .primary { min-width:160px; border-color:#5b7fae; background:linear-gradient(180deg,#315783,#203e63); color:#eef5ff; font-weight:800; }

@media(max-width:620px){
  .toolbar-meta{justify-content:space-between}
  .welcome-header,.welcome-body,.welcome-footer{padding-left:17px;padding-right:17px}
  .welcome-facts{grid-template-columns:1fr}
  .welcome-footer{align-items:stretch;flex-direction:column}
  .welcome-footer .primary{width:100%}
}