/* ==========================================================================
   theme.css — Styling for the CPU emulator UI
   Sections:
     1) Navigation bars & dropdown menus
     2) Theme tokens (light/dark)
     3) Page shell & layout primitives
     4) Landing/marketing blocks (hero, features, how-to, resources)
     5) Feedback helpers (toasts, legend, dropdown separators, mode toggles)
     6) Editors & CodeMirror skin
     7) Tables, memory/trace views, small UI bits
     8) Editor layout + responsive tweaks + register highlighting
   Notes:
     - Comments aim to explain intent, not restyle.
     - Keep light/dark variable pairs in sync when changing colors.
   ========================================================================== */

/* === Navigation: primary top bar, secondary function bar, dropdown menus === */
.primary-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 14px;
  margin-bottom:14px;
  background: rgba(0,0,0,0.38);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:12px;
  position:sticky;
  top:0;
  z-index:60;
  box-shadow:0 10px 24px rgba(0,0,0,0.24);
}
.theme-light .primary-nav{
  background: rgba(255,255,255,0.92);
  border:1px solid rgba(0,0,0,0.08);
  box-shadow:0 8px 18px rgba(0,0,0,0.12);
}
.secondary-nav{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap:10px;
  padding:10px 12px;
  margin:16px 0 14px;
  background: rgba(0,0,0,0.22);
  border:1px solid rgba(255,255,255,0.05);
  border-radius:12px;
  position:sticky;
  top:76px;
  z-index:55;
  box-shadow:0 8px 18px rgba(0,0,0,0.20);
}
.theme-light .secondary-nav{
  background: rgba(255,255,255,0.94);
  border:1px solid rgba(0,0,0,0.08);
  box-shadow:0 6px 14px rgba(0,0,0,0.1);
}
.subnav{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  margin-bottom:16px;
  background: linear-gradient(90deg, rgba(61,223,230,0.08), rgba(24,180,162,0.05));
  border:1px solid rgba(61,223,230,0.15);
  border-radius:10px;
  box-shadow: 0 10px 22px rgba(0,0,0,0.18);
  position:sticky;
  top:60px;
  z-index:45;
}
.theme-light .subnav{
  background: linear-gradient(90deg, rgba(21,185,198,0.12), rgba(10,143,128,0.08));
  border:1px solid rgba(10,143,128,0.18);
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.subnav .pill-btn{
  border:none;
  padding:8px 12px;
  border-radius:999px;
  background: rgba(255,255,255,0.12);
  color: var(--ink);
  font-weight:700;
  cursor:pointer;
  transition: background .12s, transform .12s;
}
.subnav .pill-btn:hover{
  background: rgba(255,255,255,0.22);
  transform: translateY(-1px);
}
.subnav .pill-btn.secondary{
  background: transparent;
  border:1px solid rgba(255,255,255,0.18);
  color: var(--cyan);
}
.theme-light .subnav .pill-btn.secondary{
  border:1px solid rgba(0,0,0,0.08);
  color: var(--ink);
}
  
.nav-left { display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.nav-right { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
  
  .topnav-link {
    color: var(--cyan);
    font-weight:700;
    text-decoration:none;
    padding:8px 12px;
    border-radius:8px;
    transition: background .12s, color .12s, transform .12s;
  }
  .topnav-link:hover { background: rgba(61,223,230,0.08); color: var(--ink); transform: translateY(-1px); }
  
  .topnav-link.active {
    background: linear-gradient(90deg, rgba(24,180,162,0.18), rgba(61,223,230,0.10));
    color: #002826;
    box-shadow: 0 8px 18px rgba(8,90,86,0.12);
  }
.nav-group{
  position:relative;
  padding-bottom:8px;
}
.nav-button{
  background: rgba(255,255,255,0.06);
  color: var(--ink);
  border:1px solid rgba(255,255,255,0.08);
  padding:10px 12px;
  border-radius:10px;
  font-weight:700;
  cursor:pointer;
  transition: background .12s, transform .12s;
}
.nav-button:hover{ background: rgba(61,223,230,0.12); transform: translateY(-1px); }
.nav-button.ghost{
  background: transparent;
  border:1px solid rgba(255,255,255,0.12);
  color: var(--cyan);
}
.theme-light .nav-button{
  background: rgba(0,0,0,0.04);
  border:1px solid rgba(0,0,0,0.08);
  color: var(--ink);
}
.theme-light .nav-button.ghost{
  border:1px solid rgba(0,0,0,0.10);
  color: var(--ink);
}
.nav-dropdown{
  position:absolute;
  top:100%;
  left:0;
  min-width:200px;
  background: rgba(0,0,0,0.88);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:10px;
  box-shadow:0 12px 28px rgba(0,0,0,0.35);
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:6px;
  opacity:0;
  pointer-events:none;
  transform: translateY(-4px);
  transition: opacity .12s ease, transform .12s ease;
  z-index:60;
}
.nav-group:hover .nav-dropdown,
.nav-group:focus-within .nav-dropdown{
  opacity:1;
  pointer-events:auto;
  transform: translateY(0);
}
.dropdown-item{
  display:block;
  padding:8px 10px;
  color: var(--ink);
  text-decoration:none;
  border-radius:6px;
  font-weight:600;
  transition: background .12s;
}
.dropdown-item:hover{
  background: rgba(61,223,230,0.10);
  color: var(--cyan);
}
.theme-light .nav-dropdown{
  background: rgba(255,255,255,0.98);
  border:1px solid rgba(0,0,0,0.08);
  box-shadow:0 12px 28px rgba(0,0,0,0.18);
}
.theme-light .dropdown-item{
  color: var(--ink);
}
.theme-light .dropdown-item:hover{
  background: rgba(21,185,198,0.12);
  color: var(--ink);
}

.subnav{
  display:flex;
  gap:10px;
  align-items:center;
  padding:10px 16px;
  margin:0 auto 12px;
  max-width:1180px;
  background: rgba(0,0,0,0.24);
  border:1px solid rgba(255,255,255,0.05);
  border-radius:10px;
  box-shadow:0 8px 20px rgba(0,0,0,0.22);
}
.subnav .pill{
  padding:8px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color:var(--ink);
  cursor:pointer;
  font-weight:700;
  transition: background .12s, border .12s, transform .12s;
}
.subnav .pill:hover{
  background: rgba(61,223,230,0.12);
  border-color: rgba(61,223,230,0.26);
  transform: translateY(-1px);
}
.theme-light .subnav{
  background: rgba(255,255,255,0.92);
  border:1px solid rgba(0,0,0,0.06);
  box-shadow:0 10px 20px rgba(0,0,0,0.1);
}
.theme-light .subnav .pill{
  border:1px solid rgba(0,0,0,0.08);
  background: rgba(0,0,0,0.03);
}
  
  /* hide forward/back on small screens if needed */
  @media (max-width:520px){
    .topnav-right { display:none; }
  }
  
:root{
    --bg:#0f2b2b;
    --panel:#0b3233;
    --muted:#0b6b6b;
    --teal:#18b4a2;
    --cyan:#3ddfe6;
    --accent:#66fff0;
    --ink:#e9fbfb;
    --muted-text:#bfeeee;
    --glass: rgba(255,255,255,0.04);
    --radius:10px;
    --shadow: 0 6px 18px rgba(0,0,0,0.45);
    --focus: 0 0 0 4px rgba(24,180,162,0.18);
    --glass-border: 1px solid rgba(255,255,255,0.06);
    --code-bg: rgba(0,0,0,0.35);
    --editor-bg:#0b1f1f;
    --mono: "SFMono-Regular", "Menlo", "Monaco", "Segoe UI Mono", monospace;
  }

  /* Light theme token overrides */
  .theme-light{
    --bg:#f5f8fb;
    --panel:#ffffff;
    --muted:#e8f0f3;
    --teal:#0a8f80;
    --cyan:#0fb3c0;
    --accent:#0a7f72;
    --ink:#0b1f1f;
    --muted-text:#556b73;
    --glass: rgba(0,0,0,0.04);
    --shadow: 0 8px 20px rgba(0,0,0,0.12);
    --focus: 0 0 0 3px rgba(21,185,198,0.24);
    --glass-border: 1px solid rgba(0,0,0,0.06);
    --code-bg: rgba(0,0,0,0.05);
    --editor-bg:#fdfefe;
}
  
  /* === Page shell (background + base typography) === */
  html,body{
    height:100%;
    margin:0;
    font-family: "Segoe UI", Roboto, system-ui, Arial, sans-serif;
    background:
      radial-gradient(ellipse at 10% 10%, rgba(61,223,230,0.06), transparent 10%),
      linear-gradient(180deg, var(--bg) 0%, #052627 100%);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
  }
.theme-light html,
.theme-light body{
  background: linear-gradient(180deg, rgba(245,248,251,1) 0%, rgba(236,244,246,1) 100%);
}
  
  .app {
    max-width:1180px;
  margin:12px auto 24px;
    padding:14px;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.04));
  border-radius:14px;
  box-shadow:0 6px 18px rgba(0,0,0,0.25);
    border:var(--glass-border);
  }
  .theme-light .app{
    background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(236,248,248,0.88));
    box-shadow:0 10px 28px rgba(0,0,0,0.12);
    border:1px solid rgba(0,0,0,0.05);
  }
  
  /* === Header branding === */
  .header {
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:18px;
  }
  .brand {
    width:56px;
    height:56px;
    border-radius:12px;
    background: linear-gradient(135deg, var(--teal), var(--cyan));
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
    color:#002826;
    font-family:var(--mono);
  }
  .title { font-size:18px; font-weight:700; }
  .subtitle { font-size:13px; color:var(--muted-text); }
  
  /* === Layout primitives === */
  .row { display:flex; gap:16px; align-items:flex-start; }
  .col { display:flex; flex-direction:column; gap:12px; }
.card { background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.005)); border-radius:12px; padding:14px; border:var(--glass-border); box-shadow:0 8px 24px rgba(2,8,8,0.25); }
  .card-heading { display:flex; justify-content:space-between; align-items:center; gap:8px; }
  
  /* === Buttons === */
  .btn {
    background: linear-gradient(90deg, var(--teal), var(--cyan));
    color:#002826;
    border:none;
    padding:10px 12px;
    border-radius:8px;
    font-weight:700;
    cursor:pointer;
    box-shadow: 0 6px 14px rgba(11,95,89,0.18);
    transition: transform .12s, box-shadow .12s;
  }
  .btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(6,120,115,0.18); }
.btn.secondary { background:transparent; color:var(--cyan); border:1px solid rgba(61,223,230,0.12); box-shadow:none; font-weight:600; }
.btn.ghost{
  background: rgba(255,255,255,0.06);
  color: var(--muted-text);
  border:1px solid rgba(255,255,255,0.03);
  box-shadow:none;
  font-weight:600;
}
.btn.ghost:hover{
  background: rgba(255,255,255,0.12);
  color: var(--ink);
}
/* === Landing blocks: hero, feature strip, how-it-works, resources === */
.hero{
  display:grid;
  grid-template-columns: minmax(260px, 1fr) 220px;
  gap:16px;
  align-items:center;
  padding:18px;
  margin:10px 0 16px;
  border-radius:14px;
  background: linear-gradient(135deg, rgba(24,180,162,0.16), rgba(61,223,230,0.10));
  border:1px solid rgba(61,223,230,0.18);
  box-shadow:0 14px 30px rgba(0,0,0,0.24);
  position:relative;
  overflow:hidden;
}
.theme-light .hero{
  background: linear-gradient(120deg, rgba(21,185,198,0.14), rgba(10,143,128,0.08));
  border:1px solid rgba(0,0,0,0.06);
  box-shadow:0 10px 22px rgba(0,0,0,0.12);
}
.hero::after{
  content:"";
  position:absolute;
  right:-80px;
  bottom:-120px;
  width:320px;
  height:320px;
  background: radial-gradient(circle at center, rgba(61,223,230,0.22), transparent 55%);
  filter: blur(30px);
  opacity:0.8;
  pointer-events:none;
}
.hero::before{
  content:"";
  position:absolute;
  left:-60px;
  top:-100px;
  width:280px;
  height:280px;
  background: radial-gradient(circle at center, rgba(24,180,162,0.20), transparent 60%);
  filter: blur(28px);
  opacity:0.7;
  pointer-events:none;
}
.hero h1{ margin:0 0 8px; font-size:28px; }
.hero p{ margin:0; color:var(--muted-text); line-height:1.5; }
.hero-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.hero-highlight{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-start;
  background: rgba(0,0,0,0.18);
  padding:12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.08);
}
.theme-light .hero-highlight{
  background: rgba(255,255,255,0.88);
  border:1px solid rgba(0,0,0,0.08);
}
.hero-badge{
  padding:8px 12px;
  border-radius:10px;
  background: linear-gradient(135deg, var(--teal), var(--cyan));
  color:#002826;
  font-weight:800;
}
.hero-note{ color:var(--muted-text); font-weight:600; }

.feature-strip{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap:12px;
  margin:16px 0;
}
.feature-card{
  padding:14px;
  border-radius:12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.05));
  border:1px solid rgba(255,255,255,0.06);
  box-shadow:0 8px 18px rgba(0,0,0,0.18);
  transition: transform .15s, box-shadow .15s, border .15s;
}
.feature-card:hover{
  transform: translateY(-3px);
  box-shadow:0 12px 24px rgba(0,0,0,0.20);
  border:1px solid rgba(61,223,230,0.18);
}
.feature-icon{ font-size:20px; margin-bottom:8px; }

.how{ margin:18px 0; }
.how h2{ margin-bottom:10px; }
.how-steps{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
  gap:10px;
}
.step{
  background: rgba(0,0,0,0.18);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;
  padding:12px;
  display:flex;
  gap:10px;
  align-items:center;
}
.theme-light .step{
  background: rgba(255,255,255,0.9);
  border:1px solid rgba(0,0,0,0.06);
}
.step-icon{
  width:32px; height:32px;
  border-radius:8px;
  background: linear-gradient(135deg, var(--teal), var(--cyan));
  color:#002826;
  font-weight:800;
  display:flex; align-items:center; justify-content:center;
}
.step-text{ color:var(--muted-text); }

.resources{ margin:20px 0; }
.resources h2{ margin-bottom:10px; }
.resource-cards{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
  gap:12px;
}
.resource-cards .card{
  min-height:150px;
  transition: transform .15s, box-shadow .15s, border .15s;
}
.resource-cards .card:hover{
  transform: translateY(-3px);
  box-shadow:0 12px 24px rgba(0,0,0,0.20);
  border:1px solid rgba(61,223,230,0.18);
}

/* === Footer and state chips === */
.footer{
  margin-top:16px;
  padding:12px;
  border-top:1px solid rgba(255,255,255,0.06);
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  color:var(--muted-text);
}
.state-pill{
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  background:rgba(255,255,255,0.08);
  color:var(--muted-text);
}
.state-pill--idle{ background:rgba(255,255,255,0.08); color:var(--muted-text); }
.state-pill--running{ background:rgba(61,223,230,0.25); color:#002826; }
.state-pill--halted{ background:rgba(255,99,132,0.25); color:#ffd7d7; }
.mem-flash{
  animation: memFlash 0.35s ease;
}
@keyframes memFlash{
  from { background: rgba(61,223,230,0.26); }
  to   { background: transparent; }
}

/* === Toasts, legend collapse, dropdown separators, drag highlight === */
#toast-stack{
  position:fixed;
  top:16px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  gap:8px;
  z-index:999;
}
.toast{
  padding:10px 14px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(24,180,162,0.12);
  color:var(--ink);
  box-shadow:0 10px 24px rgba(0,0,0,0.28);
  backdrop-filter: blur(6px);
  transition: opacity .3s, transform .3s;
}
.toast-info{
  border-color: rgba(61,223,230,0.35);
  background: rgba(61,223,230,0.16);
}
.theme-light .toast{
  border-color: rgba(0,0,0,0.08);
  background: rgba(0,0,0,0.06);
}
.toast.fade{
  opacity:0;
  transform: translateY(-6px);
}
.legend-list.collapsed{ display:none; }
.legend-list{ display:block; }
.dropdown-separator{
  height:1px;
  margin:6px 0;
  background: rgba(255,255,255,0.08);
}

.drop-highlight{
  outline:2px solid rgba(61,223,230,0.65);
  box-shadow:0 0 0 4px rgba(61,223,230,0.18);
}
.mode-toggle{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  align-items:center;
}
.mode-toggle button{
  border:none;
  background: rgba(255,255,255,0.08);
  color: var(--muted-text);
  padding:6px 10px;
  border-radius:10px;
  font-size:12px;
  cursor:pointer;
  transition: background .12s, color .12s;
}
.mode-toggle button.active{
  background: var(--cyan);
  color:#002826;
  font-weight:700;
}
.mode-toggle .btn.secondary{
  padding:6px 10px;
  height:32px;
  line-height:18px;
}
/* === CodeMirror skin to match app themes === */
.CodeMirror{
  background: #0b1f1f;
  color: var(--ink);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:8px;
  height:auto;
}
.theme-light .CodeMirror{
  background: var(--editor-bg);
  color: var(--ink);
  border:1px solid rgba(0,0,0,0.06);
}
.CodeMirror-gutters{
  background: #0b1f1f;
  border-right:1px solid rgba(255,255,255,0.08);
}
.theme-light .CodeMirror-gutters{
  background: var(--editor-bg);
  border-right:1px solid rgba(0,0,0,0.06);
}
.CodeMirror-cursor{ border-left:1px solid var(--cyan); }
.cm-s-material-darker .CodeMirror-linenumber{ color: var(--muted-text); }
.cm-s-material-darker.CodeMirror{ background:#0b1f1f; }
  .hidden{ display:none; }

/* === Trace list styling === */
.trace-entry{
  padding:4px 0;
  border-bottom:1px solid rgba(255,255,255,0.04);
  font-family:var(--mono);
  font-size:13px;
  color:var(--muted-text);
}
.project-card .note{ display:block; margin-top:4px; }
.trace-entry:last-child{
  border-bottom:none;
}
.trace-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
}
  
  /* === Inputs and button rows === */
.input, textarea { background: var(--code-bg); color:var(--ink); border:1px solid rgba(255,255,255,0.04); padding:10px; border-radius:8px; outline:none; resize:vertical; width:100%; box-sizing:border-box; }
.input:focus, textarea:focus { box-shadow:var(--focus); border-color:var(--teal); }
.button-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:8px;
}
  
  /* === Tables (memory/program/trace) === */
  .table { width:100%; border-collapse:collapse; font-size:13px; overflow:auto; }
  .table th { text-align:left; padding:8px 10px; color:var(--muted-text); font-weight:700; font-size:12px; }
  .table td { padding:8px 10px; border-top:1px solid rgba(255,255,255,0.02); color:var(--ink); vertical-align:middle; position:relative; }
  .table tr.highlight td { background: linear-gradient(90deg, rgba(24,180,162,0.06), rgba(61,223,230,0.02)); box-shadow: inset 6px 0 0 0 var(--teal); padding-left:16px; }
  .table tr.highlight td::before { content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--teal); opacity:0.12; z-index:-1; border-top-left-radius:6px; border-bottom-left-radius:6px; }
.table tr.pm-operand-byte td{
  background: transparent;
}
.table tr.pm-target td{
  background: rgba(180, 61, 223, 0.12);
}
.dm-operand{
  background: rgba(255, 196, 0, 0.15);
}
.table-wrapper{
  background: rgba(0,0,0,0.25);
  border:1px solid rgba(255,255,255,0.03);
  border-radius:10px;
  padding:6px;
  max-height:420px;
  overflow:auto;
}
.trace-body{
  margin-top:8px;
  max-height:220px;
  overflow:auto;
}
.memory-grid{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}
.memory-section{
  flex:1 1 320px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.memory-section__header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
}
.memory-section__sub{
  font-size:12px;
  color:var(--muted-text);
  margin-top:4px;
}
  
  /* Small UI bits */
  .kv { display:flex; gap:8px; align-items:center; font-size:13px; color:var(--muted-text); }
  .regs { font-family:var(--mono); background:transparent; padding:6px 8px; border-radius:6px; color:var(--accent); }
  .status-grid{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:12px;
  }
  .status-chip{
    flex: 1 1 90px;
    min-width:90px;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.04);
    border-radius:8px;
    padding:8px 10px;
  }
  .status-label{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:0.04em;
    color:var(--muted-text);
  }
  .status-value{
    display:block;
    margin-top:4px;
    font-family:var(--mono);
    font-size:18px;
    color:var(--accent);
  }
  .reg-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(70px,1fr));
    gap:8px;
  }
  .badge { padding:6px 8px; border-radius:999px; font-weight:700; font-size:12px; background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(0,0,0,0.04)); color:var(--cyan); }
  .note { font-size:12px; color:var(--muted-text); }
  .sep { height:1px; background:rgba(255,255,255,0.02); margin:8px 0; }
  
  /* Editor layout fixes */
  .editor { display:flex; gap:14px; align-items:flex-start; flex-wrap:wrap; }
  .pane { flex: 1 1 420px; min-width: 280px; box-sizing:border-box; }
  .emulator-pane { flex: 0 1 360px; min-width:320px; }
  .top-controls { display:flex; gap:12px; align-items:flex-start; flex-wrap:wrap; }
  .top-controls > * { flex: 1 1 220px; min-width:180px; }
.panel-block{
  width:100%;
  background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.005));
  border:var(--glass-border);
  border-radius:12px;
  padding:14px;
  box-shadow:0 8px 24px rgba(2,8,8,0.18);
}
.panel-block__header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:10px;
}
.panel-block__sub{
  font-size:12px;
  color:var(--muted-text);
  margin-top:4px;
}
.drop-card{
  padding:12px;
  margin-top:10px;
  text-align:center;
  color:var(--muted-text);
  border:1px dashed rgba(61,223,230,0.25);
  background: rgba(0,0,0,0.25);
  border-radius:10px;
}
  textarea.input, .code { max-height:260px; min-height:96px; overflow:auto; font-family:var(--mono); font-size:13px; color:var(--accent); background:linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.3)); padding:12px; border-radius:8px; border:1px solid rgba(255,255,255,0.03); }
  .code[contenteditable]{ min-height:120px; color:var(--accent); }
  .sample-card .note code{ font-family:var(--mono); }
  .sample-row{
    display:flex;
    gap:12px;
    justify-content:space-between;
    padding:12px 0;
    border-top:1px solid rgba(255,255,255,0.05);
  }
  .sample-row:first-of-type{ border-top:none; }
  .sample-name{ font-weight:600; }
  .sample-desc{ font-size:12px; color:var(--muted-text); margin-top:4px; max-width:320px; }
  .sample-actions{ display:flex; gap:6px; align-items:center; flex-shrink:0; }
  .sample-actions .btn{ min-width:60px; }
  .sidebar-pane{ max-width:320px; width:100%; }
  .control-card .button-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
  }
  .control-card .button-grid .btn{ width:100%; }
  .delay-row{
    margin-top:14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    font-size:13px;
    color:var(--muted-text);
  }
  .delay-row .input{ max-width:110px; }
  .legend-card .legend-list{ margin-top:6px; line-height:1.6; }
  
  /* highlight editor and notes */
  .editor .card{ border-left:4px solid transparent; transition:box-shadow .15s, border-left-color .15s; }
  .editor .card:focus-within, .editor .card:hover{ box-shadow:0 12px 30px rgba(6,120,115,0.12); border-left-color:var(--teal); }
  /* Responsive */
  @media (max-width:920px){
    .row { flex-direction:column; }
    .header { gap:12px; }
    .emulator-pane { min-width:0; }
    .memory-grid { flex-direction:column; }
    .top-controls > * { min-width:0; }
  }
  
  /* === Register badges & PC highlighting === */
  .reg-box {
    border: 1px solid rgba(255,255,255,0.08);
    padding: 8px;
    border-radius: 8px;
    text-align: center;
    background: rgba(11,107,107,0.55);
  }
  .reg-box.reg-dest{
    border-color: rgba(61,223,230,0.8);
    background: rgba(61,223,230,0.25);
  }
  .reg-box.reg-source{
    border-color: rgba(255,196,0,0.8);
    background: rgba(255,196,0,0.18);
  }
  .reg-val {
    font-family: monospace;
    font-size: 14px;
    margin-top: 4px;
  }

  .table tr.pm-current td { 
    background: rgba(0,0,255,0.22);
    box-shadow: inset 6px 0 0 0 rgba(0,0,255,0.35);
  }
  .table tr.pm-prev td { 
    background: rgba(255,0,0,0.18);
    box-shadow: inset 6px 0 0 0 rgba(255,0,0,0.35);
  }
  .table tr.pm-next td { 
    background: rgba(0,255,0,0.18);
    box-shadow: inset 6px 0 0 0 rgba(0,255,0,0.35);
  }