/* Laboratory workbench */
:root {
  --bg-page:#0b1119; --bg-surface:#151e29; --bg-surface-elevated:#1b2734; --bg-well:#101822;
  --border-subtle:#2a3949; --border-strong:#40546a; --border-focus:#86d5ef;
  --text-primary:#f3f6f7; --text-secondary:#c3d0d8; --text-muted:#9cb0be;
  --accent-action:#176cac; --accent-action-hover:#12598f;
  --accent-stream:#e7a74a; --accent-stream-light:#f4be6c;
  --accent-pass:#087e66; --accent-pass-text:#63d2ad;
  --accent-fail:#b4474b; --accent-fail-text:#ff8f92;
}
body.theme-light {
  --bg-page:#f2f5f5; --bg-surface:#ffffff; --bg-surface-elevated:#eef3f5; --bg-well:#f5f8f9;
  --border-subtle:#ced9df; --border-strong:#a5b8c4; --border-focus:#135d8f;
  --text-primary:#172936; --text-secondary:#354c5a; --text-muted:#506574;
  --accent-action:#176cac; --accent-action-hover:#12598f;
  --accent-stream:#9a5706; --accent-stream-light:#834908;
  --accent-pass-text:#08634f; --accent-fail-text:#9c292e;
}
html {scroll-behavior:auto}
body {font-size:15px}
button,input,textarea {font:inherit}
.app-container {
  display:grid; grid-template-columns:212px minmax(0,1fr); grid-template-rows:auto 1fr auto;
  align-items:start; column-gap:32px; max-width:1504px; min-height:100vh;
  padding:0 32px 28px;
}
.app-header {
  grid-column:1/-1; margin:0 0 28px; padding:22px 0; min-height:100px;
  border-bottom:1px solid var(--border-subtle); gap:18px 28px;
}
.app-header > div:first-child, .app-header > div:first-child > div:last-child {min-width:0}
.app-header > div:last-child {margin-left:auto}
.app-header > div:last-child > div:first-child {
  gap:5px; padding:5px; margin-right:4px; border:1px solid var(--border-subtle);
  border-radius:7px; background:var(--bg-well);
}
.app-header > div:first-child > div:first-child {
  width:46px; height:46px; flex:none; padding:0; background:var(--accent-action); border-radius:7px;
}
.app-title {font-size:clamp(1.25rem,1.5vw,1.55rem); font-weight:750; letter-spacing:-.04em}
.app-subtitle {max-width:540px; font-size:.83rem; line-height:1.45}
.brand-badge {
  flex:none; font-size:.61rem; letter-spacing:.1em; padding:4px 6px;
  color:var(--text-muted); background:transparent;
}
.preset-label {margin:0 5px 0 6px; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase}
.preset-chip {
  min-width:46px; min-height:34px; padding:5px 9px; border-color:transparent;
  background:transparent; color:var(--text-secondary); font:700 .78rem var(--font-mono);
}
.preset-chip:hover,.preset-chip:focus-visible {
  background:var(--bg-surface-elevated); border-color:var(--border-strong);
}
.theme-toggle-btn {min-height:44px; padding:8px 12px; font-size:.78rem; white-space:nowrap}
.nav-tabs {
  grid-column:1; grid-row:2; position:sticky; top:24px; display:flex; flex-direction:column;
  gap:4px; align-self:start; margin:0; padding:14px 0 18px; background:transparent;
  border:0; border-top:1px solid var(--border-subtle); border-bottom:1px solid var(--border-subtle);
  border-radius:0;
}
.nav-tabs::before {
  content:"RUANG PRAKTIKUM"; display:block; margin:1px 12px 14px; color:var(--text-muted);
  font:700 .66rem var(--font-mono); letter-spacing:.14em;
}
.nav-tabs::after {
  content:"Lima tahap untuk memahami satu stream cipher."; display:block;
  margin:14px 13px 0; color:var(--text-muted); font-size:.74rem; line-height:1.45;
}
.nav-tab-btn,.nav-tab-btn.active {
  width:100%; min-height:50px; justify-content:flex-start; gap:12px; padding:9px 12px;
  border:1px solid transparent; border-left:2px solid transparent;
  border-radius:0 5px 5px 0; box-shadow:none; background:transparent;
  color:var(--text-secondary); font-size:.82rem; line-height:1.2; text-align:left;
}
.nav-tab-btn svg {flex:none; width:17px; height:17px; opacity:.7}
.nav-tab-btn:hover {background:var(--bg-surface-elevated)}
.nav-tab-btn.active {
  border-left-color:var(--border-focus); background:var(--bg-surface); color:var(--text-primary);
}
.nav-tab-btn.active svg {opacity:1; color:var(--border-focus)}
.tab-panel {grid-column:2; grid-row:2; min-width:0}
.section-intro {
  display:grid; gap:7px; margin-bottom:24px; padding:0 0 23px;
  border-bottom:1px solid var(--border-subtle);
}
.section-kicker {
  display:flex; justify-content:space-between; gap:12px; color:var(--text-muted);
  font:700 .68rem var(--font-mono); letter-spacing:.12em;
}
.section-kicker span:first-child {color:var(--accent-stream-light)}
.section-intro h2 {
  font-size:clamp(1.7rem,2.3vw,2.35rem); font-weight:750;
  line-height:1.1; letter-spacing:-.045em;
}
.section-intro p {max-width:660px; color:var(--text-secondary); font-size:.91rem; line-height:1.5}
.tab-panel > .grid,.tab-panel > .mb-6 {margin-bottom:18px}
.tab-panel .grid {gap:16px}
.workbench-panel {
  min-width:0; padding:clamp(17px,2vw,24px); background:var(--bg-surface);
  border-color:var(--border-subtle); border-radius:7px; box-shadow:none;
}
.panel-header {min-height:35px; margin-bottom:18px; padding-bottom:13px}
.panel-title {font-size:.95rem; line-height:1.3; letter-spacing:-.015em}
.panel-title svg {flex:none; color:var(--text-muted)}
.form-group {margin-bottom:18px}
.form-label {margin-bottom:7px; color:var(--text-primary); font-size:.79rem; font-weight:700}
.form-input,.form-textarea,.form-select {
  min-height:43px; padding:10px 12px; border-color:var(--border-strong);
  background:var(--bg-well); border-radius:5px; color:var(--text-primary);
}
.form-input::placeholder,.form-textarea::placeholder {color:var(--text-muted); opacity:1}
.field-hint {line-height:1.45}
.btn {min-height:43px; border-radius:5px}
.btn-sm {min-height:36px}
.spec-cell,.keystream-box,.circuit-frame,.xor-formula {border-radius:5px}
.spec-cell {padding:13px 15px}
.data-table th {padding:11px 12px; background:var(--bg-well); white-space:nowrap}
.data-table td {padding:11px 12px; line-height:1.4}
.xor-stepper {border-top:3px solid var(--accent-action)}
.xor-bits {gap:6px}
.xor-bit {min-height:42px; border-radius:4px}
.xor-row-output .xor-bit {border-color:var(--accent-pass)}
#toast-container {top:16px; bottom:auto; right:16px; max-width:min(380px,calc(100vw - 32px))}
.toast {box-shadow:0 8px 30px rgba(0,0,0,.25)}
.app-container > footer {
  grid-column:2; grid-row:3; margin-top:28px; text-align:left; font-size:.73rem;
}
body.theme-light .text-sky-400,body.theme-light .text-blue-400 {color:#075d88 !important}
body.theme-light .text-emerald-400 {color:#087053 !important}
body.theme-light .text-amber-300,body.theme-light .text-amber-400 {color:#875009 !important}
body.theme-light .text-rose-400 {color:#a82d47 !important}
body.theme-light .btn-primary,body.theme-light .btn-success,body.theme-light .btn-danger {color:#fff !important}
body.theme-light .status-tag-blue {color:#075d88}
@media (max-width:1100px) {
  .app-container {grid-template-columns:185px minmax(0,1fr); gap:0 22px; padding-inline:24px}
  .app-header {align-items:flex-start}
  .app-header > div:last-child {width:100%; margin-left:0}
}
@media (max-width:760px) {
  .app-container {display:block; min-height:100vh; padding:0 18px calc(96px + env(safe-area-inset-bottom))}
  .app-header {min-height:0; margin-bottom:21px; padding:17px 0 16px; gap:14px}
  .app-header > div:first-child {width:100%; align-items:flex-start}
  .app-header > div:first-child > div:first-child {width:40px; height:40px}
  .app-header > div:first-child svg {width:22px; height:22px}
  .app-title {font-size:1.25rem}
  .app-subtitle {font-size:.76rem; max-width:32rem}
  .app-header > div:last-child {width:100%; justify-content:space-between; gap:8px}
  .app-header > div:last-child > div:first-child {margin-right:0}
  .preset-label {display:none}
  .preset-chip {min-width:40px}
  .theme-toggle-btn {min-height:42px}
  .nav-tabs {
    position:fixed; inset:auto 0 0; z-index:70; display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr)); gap:0;
    padding:7px 8px calc(7px + env(safe-area-inset-bottom));
    background:var(--bg-surface); border:0; border-top:1px solid var(--border-strong);
    box-shadow:0 -8px 24px rgba(0,0,0,.16);
  }
  .nav-tabs::before,.nav-tabs::after {display:none}
  .nav-tab-btn,.nav-tab-btn.active {
    min-height:55px; display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:5px; padding:4px 1px; border:0;
    border-top:2px solid transparent; border-radius:4px;
    font-size:.65rem; line-height:1.1; text-align:center;
  }
  .nav-tab-btn.active {border-top-color:var(--border-focus); background:var(--bg-surface-elevated)}
  .nav-tab-btn svg {width:18px; height:18px}
  .section-intro {margin-bottom:18px; padding-bottom:18px}
  .section-intro h2 {font-size:1.75rem}
  .section-kicker {font-size:.61rem}
  .tab-panel .grid {gap:12px}
  .workbench-panel {padding:16px}
  .tab-panel > .grid,.tab-panel > .mb-6 {margin-bottom:12px}
  .app-container > footer {margin-top:24px}
  #toast-container {top:10px; right:10px}
}
@media (max-width:430px) {
  .app-container {padding-inline:14px}
  .app-header > div:last-child {align-items:stretch}
  .theme-toggle-btn {font-size:0; padding:7px 11px}
  .theme-toggle-btn #theme-toggle-icon {font-size:1rem}
  .brand-badge {display:none}
  .nav-tab-btn,.nav-tab-btn.active {font-size:.61rem}
  .tab-panel .grid.grid-cols-3 {grid-template-columns:repeat(2,minmax(0,1fr))}
  .tab-panel .grid.grid-cols-3 > :last-child {grid-column:1/-1}
  .xor-controls {gap:5px}
  .xor-controls .btn {font-size:.74rem}
  .xor-bits {gap:4px}
  .xor-bit {min-height:35px}
}
@media (prefers-reduced-motion:reduce) {
  html {scroll-behavior:auto}
  *,*::before,*::after {transition-duration:.01ms !important; animation-duration:.01ms !important}
}

@media (max-width:760px) {
  html {scroll-padding-bottom:110px}
  .tab-panel button,.tab-panel input,.tab-panel textarea {scroll-margin-bottom:110px}
}

.attack-guide {display:flex; flex-direction:column; justify-content:center; gap:18px; padding:clamp(24px,3vw,40px)}
.attack-guide-top {display:flex; justify-content:space-between; gap:12px; color:var(--text-muted); font:700 .68rem var(--font-mono); letter-spacing:.11em}
.attack-guide h3 {max-width:640px; font-size:clamp(1.5rem,2.4vw,2.15rem); line-height:1.16; letter-spacing:-.035em; font-weight:750}
.attack-guide > p {max-width:690px; color:var(--text-secondary); line-height:1.6}
.attack-steps {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:4px}
.attack-steps > div {display:flex; flex-direction:column; gap:10px; min-width:0; min-height:160px; padding:18px; border:1px solid var(--border-subtle); background:var(--bg-well); border-radius:5px}
.attack-steps b {color:var(--accent-stream-light); font:700 .74rem var(--font-mono)}
.attack-steps strong {font-size:.9rem; color:var(--text-primary)}
.attack-steps span {color:var(--text-secondary); font-size:.78rem; line-height:1.5}
.attack-guide .attack-guide-note {padding-top:16px; border-top:1px solid var(--border-subtle); color:var(--text-muted); font-size:.8rem}
#tab-attack > .grid:has(#attack-result-card:not(.hidden)) .attack-guide {display:none}
@media (max-width:760px) {
  .attack-guide {padding:20px; gap:14px}
  .attack-steps {grid-template-columns:1fr}
  .attack-steps > div {min-height:0; gap:5px; padding:13px}
  .attack-guide-top {font-size:.61rem}
}

#toast-container {top:110px}
@media (max-width:760px) {
  #toast-container {top:auto; bottom:calc(82px + env(safe-area-inset-bottom)); left:10px; right:10px; max-width:none}
}