/* ════════════════════════════════════════════════════════════
   ARC TERMINAL V7 — STYLES
   Amber monotone · CRT aesthetic · Retro-futuristic terminal
   ════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

/* ─── TOKENS ─────────────────────────────────────────────── */
:root {
  --bg:        #020202;
  --surface:   #050505;
  --surface2:  #080808;
  --border:    #1e1e1e;
  --border-hi: #3a3a3a;
  --amber:     #ffb000;
  --amber-dim: #7a5500;
  --amber-glow:rgba(255,176,0,0.06);
  --amber-sat: rgba(255,176,0,0.12);
  --accent:    #ff9500;
  --error:     #cc4422;
  --success:   #c8c8c8;
  --text:      #ffb000;
  --text-dim:  #555;
  --text-mute: #2a2a2a;
  --font:      'Share Tech Mono', 'Courier New', monospace;
  --radius:    2px;
}

/* ─── RESET ──────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0; padding: 0;
  user-select: none;
  -webkit-user-select: none;
}
textarea, input { user-select: auto; -webkit-user-select: auto; cursor: text; }
button, [role=button], select { cursor: pointer; }

/* ─── BASE ───────────────────────────────────────────────── */
html { height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow-x: hidden;
  overflow-y: auto;
  background-image:
    linear-gradient(45deg, transparent 48%, rgba(255,176,0,0.018) 49%, rgba(255,176,0,0.018) 51%, transparent 52%),
    linear-gradient(-45deg, transparent 48%, rgba(255,176,0,0.012) 49%, rgba(255,176,0,0.012) 51%, transparent 52%);
  background-size: 22px 22px;
}

/* ─── CRT SCANLINES ──────────────────────────────────────── */
.crt-overlay {
  position: fixed; inset: 0;
  background:
    linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,0.12) 50%),
    radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(0,0,0,0.55) 100%);
  background-size: 100% 3px, 100% 100%;
  pointer-events: none;
  z-index: 1000;
  animation: scanShift 10s linear infinite;
}
@keyframes scanShift {
  from { background-position: 0 0, center; }
  to   { background-position: 0 12px, center; }
}

/* ─── SCROLLBAR ──────────────────────────────────────────── */
::-webkit-scrollbar       { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); }
::-webkit-scrollbar-thumb:hover { background: var(--amber-dim); }

/* ─── TOAST ──────────────────────────────────────────────── */
.toast {
  position: fixed; bottom: 28px; left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: var(--surface2); border: 1px solid var(--border-hi);
  color: var(--text); font-family: var(--font); font-size: 9px;
  letter-spacing: 0.22em; padding: 8px 22px;
  pointer-events: none; z-index: 9999;
  opacity: 0; transition: opacity 0.2s, transform 0.2s;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ─── PASSWORD SCREEN ────────────────────────────────────── */
#password-screen {
  position: fixed; inset: 0;
  background: var(--bg); z-index: 9990;
  display: flex; align-items: center; justify-content: center;
}
.pass-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  max-width: 420px; width: 90%; padding: 40px 0;
}
.pass-eyebrow {
  font-size: 9px; color: var(--text-dim); letter-spacing: 0.3em;
}
.pass-title {
  font-size: 18px; letter-spacing: 0.5em;
  color: var(--amber); text-shadow: 0 0 20px rgba(255,176,0,0.2);
}
.pass-hint { font-size: 9px; color: var(--text-dim); letter-spacing: 0.2em; }
#pass-input {
  width: 100%; background: transparent;
  border: none; border-bottom: 1px solid var(--border-hi);
  color: var(--amber); font-family: var(--font);
  font-size: 22px; text-align: center; outline: none;
  letter-spacing: 0.35em; padding: 12px 0;
  caret-color: var(--amber);
}
.pass-bar-wrap {
  width: 100%; height: 2px; background: var(--border);
}
.pass-bar {
  height: 100%; width: 0%;
  background: var(--amber);
  transition: width 0.15s, background 0.3s;
  box-shadow: 0 0 8px rgba(255,176,0,0.4);
}
.pass-feedback {
  font-size: 9px; letter-spacing: 0.18em;
  color: var(--text-dim); min-height: 14px;
}

/* ─── MAIN WRAPPER ───────────────────────────────────────── */
.main-wrapper {
  display: none; width: 100%;
  justify-content: center; align-items: flex-start;
  padding: 24px 12px 60px;
}

/* ─── TERMINAL CONTAINER ─────────────────────────────────── */
.terminal-container {
  width: 100%; max-width: 980px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 0 60px rgba(0,0,0,0.8), inset 0 0 60px rgba(0,0,0,0.6);
  opacity: 0; transform: scale(0.985);
  transition: opacity 0.9s, transform 0.9s;
}
.terminal-container.visible { opacity: 1; transform: scale(1); }

/* ─── HEADER ─────────────────────────────────────────────── */
.t-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 18px 24px 14px;
  border-bottom: 1px solid var(--border);
  gap: 14px; flex-wrap: wrap;
}
.t-header-left { display: flex; flex-direction: column; gap: 5px; }
.t-title { font-size: 13px; letter-spacing: 0.35em; color: var(--amber); margin: 0; }
.t-title .dim { opacity: 0.4; }
.t-meta { display: flex; gap: 12px; font-size: 8px; color: var(--text-dim); flex-wrap: wrap; }
.uptime { color: var(--text-dim); }

.t-header-right {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}

/* Header buttons */
.hbtn {
  background: transparent; border: 1px solid var(--border);
  color: var(--text-dim); font-family: var(--font); font-size: 8px;
  letter-spacing: 0.15em; padding: 5px 10px;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.hbtn:hover { border-color: var(--amber); color: var(--bg); background: var(--amber); }
.hbtn.active { border-color: var(--accent); color: var(--accent); }

.status-led {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--text-dim);
  transition: background 0.3s, box-shadow 0.3s;
  flex-shrink: 0;
}
.status-led.active {
  background: var(--amber);
  box-shadow: 0 0 8px rgba(255,176,0,0.7);
  animation: ledPulse 2s ease-in-out infinite;
}
@keyframes ledPulse { 0%,100%{ opacity:1; } 50%{ opacity:0.5; } }

/* ─── BODY GRID ──────────────────────────────────────────── */
.t-body {
  display: grid;
  grid-template-columns: auto 1fr;
  min-height: 0;
}

/* ─── SIDEBAR ────────────────────────────────────────────── */
.sidebar {
  width: 132px; border-right: 1px solid var(--border);
  font-size: 9px; display: flex; flex-direction: column;
  transition: width 0.28s ease;
  overflow: hidden;
}
.sidebar.collapsed { width: 28px; }
.sidebar.collapsed .sidebar-body,
.sidebar.collapsed .sidebar-title { opacity: 0; pointer-events: none; }

.sidebar-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 10px; border-bottom: 1px solid var(--border);
  cursor: pointer; transition: color 0.15s;
}
.sidebar-head:hover { color: var(--amber); }

.sidebar-title   { font-size: 8px; letter-spacing: 0.2em; color: var(--text-dim); transition: opacity 0.2s; }
.sidebar-chevron { font-size: 10px; color: var(--text-dim); transition: transform 0.28s; flex-shrink: 0; }
.sidebar.collapsed .sidebar-chevron { transform: rotate(180deg); }

.sidebar-body { padding: 6px 0 12px; overflow-y: auto; transition: opacity 0.2s; }

.sf-group-label {
  font-size: 7px; color: var(--text-mute);
  letter-spacing: 0.2em; padding: 8px 10px 4px;
}

.sidebar-file {
  padding: 7px 10px; font-size: 8px; color: var(--text-dim);
  border-left: 2px solid transparent; cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-file:hover { border-left-color: var(--amber-dim); color: var(--text); }
.sidebar-file.active-file { border-left-color: var(--accent); color: var(--accent); }
.sidebar-file.locked { color: var(--text-mute); }
.sidebar-file.locked::after { content: ' ■'; font-size: 6px; opacity: 0.4; }
.sidebar-file.unlocked { color: var(--text-dim); }
.sidebar-file.unlocked::after { content: ' □'; font-size: 6px; }

/* ─── MAIN PANEL ─────────────────────────────────────────── */
.t-main {
  padding: 20px 24px 24px;
  display: flex; flex-direction: column; gap: 14px;
  overflow-y: auto; min-width: 0;
}

/* ─── PANEL (shared card component) ─────────────────────── */
.panel {
  border: 1px solid var(--border);
  background: var(--bg);
}

.panel-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; border-bottom: 1px solid var(--border);
  gap: 10px;
}
.panel-head-left { display: flex; align-items: center; gap: 10px; }
.panel-label { font-size: 9px; color: var(--text-dim); letter-spacing: 0.2em; }
.panel-meta-row { display: flex; align-items: center; gap: 8px; font-size: 8px; color: var(--text-mute); }

.mode-badge {
  font-size: 8px; color: var(--accent);
  border: 1px solid rgba(255,149,0,0.3);
  padding: 2px 7px; letter-spacing: 0.1em;
}

textarea, #output {
  width: 100%; background: transparent;
  border: none; color: var(--text);
  font-family: var(--font); font-size: 11px;
  letter-spacing: 0.04em; line-height: 1.55;
  padding: 12px; resize: none;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
textarea {
  height: 90px; outline: none;
  transition: color 0.3s;
}
textarea::placeholder { color: var(--text-mute); }
#output {
  height: 180px; overflow-y: auto; word-break: break-all;
  white-space: pre-wrap; cursor: text;
  text-shadow: 0 0 8px rgba(255,176,0,0.15);
}
textarea::-webkit-scrollbar, #output::-webkit-scrollbar {
  width: 4px;
}
textarea::-webkit-scrollbar-thumb, #output::-webkit-scrollbar-thumb {
  background: var(--border);
}

/* ─── CIPHER CONFIG ──────────────────────────────────────── */
.cipher-cfg {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0; border: 1px solid var(--border);
}
.cfg-col {
  padding: 14px 16px; display: flex; flex-direction: column; gap: 9px;
}
.cfg-col + .cfg-col { border-left: 1px solid var(--border); }
.cfg-label {
  font-size: 8px; color: var(--text-dim); letter-spacing: 0.22em;
  padding-bottom: 4px; border-bottom: 1px solid var(--border);
}

.cipher-row { display: flex; gap: 4px; flex-wrap: wrap; }

.c-opt {
  background: transparent; border: 1px solid var(--border);
  color: var(--text-dim); font-family: var(--font);
  font-size: 8px; letter-spacing: 0.12em; padding: 4px 9px;
  transition: all 0.12s;
}
.c-opt:hover { border-color: var(--amber-dim); color: var(--text); }
.c-opt.active { border-color: var(--accent); color: var(--accent); background: rgba(255,149,0,0.04); }

.auth-btn { margin-top: 2px; width: 100%; text-align: center; }

.slider-row {
  display: flex; align-items: center; gap: 8px;
}
.slider-label { font-size: 8px; color: var(--text-dim); letter-spacing: 0.1em; width: 30px; flex-shrink: 0; }
.slider-val   { font-size: 8px; color: var(--text-dim); width: 22px; text-align: right; flex-shrink: 0; }

input[type=range] {
  -webkit-appearance: none; appearance: none;
  flex: 1; background: transparent; height: 2px;
}
input[type=range]::-webkit-slider-runnable-track {
  height: 2px; background: var(--border); border-radius: 1px;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 7px; height: 13px;
  background: var(--amber-dim); margin-top: -5.5px;
  border-radius: 1px; transition: background 0.15s;
}
input[type=range]::-webkit-slider-thumb:hover { background: var(--amber); }

.t-input {
  flex: 1; background: transparent;
  border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text); font-family: var(--font); font-size: 9px;
  padding: 6px 8px; outline: none; letter-spacing: 0.1em;
  transition: border-color 0.2s;
  width: 100%;
}
.t-input:focus { border-color: var(--amber-dim); }
.t-input::placeholder { color: var(--text-mute); }

.kp-row { display: flex; gap: 6px; align-items: center; }
.chk-row { display: flex; gap: 6px; align-items: center; font-size: 8px; }
.chk-label { color: var(--text-mute); }
.chk-val   { color: var(--text-dim); font-family: var(--font); }

.auth-status {
  font-size: 8px; letter-spacing: 0.12em; color: var(--text-mute);
  transition: color 0.3s;
}
.auth-status.ok     { color: var(--success); }
.auth-status.denied { color: var(--error); }

/* ─── MICRO BUTTONS ──────────────────────────────────────── */
.micro-btn {
  background: transparent; border: 1px solid var(--border);
  color: var(--text-dim); font-family: var(--font); font-size: 8px;
  letter-spacing: 0.1em; padding: 3px 8px;
  transition: all 0.12s; flex-shrink: 0;
}
.micro-btn:hover { border-color: var(--amber-dim); color: var(--text); }

/* ─── LEXICAL GAPS PANEL ─────────────────────────────────── */
.lex-gaps {
  margin: 0; padding: 8px 12px;
  border-top: 1px solid var(--border);
  background: rgba(255,176,0,0.015);
}
.lex-gaps-title { font-size: 8px; color: var(--accent); letter-spacing: 0.22em; margin-bottom: 6px; }
.lex-gaps-list  { display: flex; flex-wrap: wrap; gap: 5px; }
.lex-gap-tag {
  font-size: 8px; color: var(--text-dim);
  border: 1px solid var(--border); padding: 2px 7px;
  letter-spacing: 0.1em;
}
.lex-gap-tag .gap-syn { color: var(--accent); margin-left: 4px; }
.hidden { display: none !important; }

/* ─── PROC TIME ──────────────────────────────────────────── */
.proc-time { font-size: 8px; color: var(--text-mute); letter-spacing: 0.1em; }

/* ─── MAIN BUTTONS ───────────────────────────────────────── */
.btn-row { display: flex; gap: 6px; flex-wrap: wrap; }

.tbtn {
  background: var(--bg); border: 1px solid var(--border);
  color: var(--text-dim); font-family: var(--font); font-size: 9px;
  padding: 8px 13px; letter-spacing: 0.14em;
  transition: all 0.14s;
}
.tbtn:hover { border-color: var(--amber); color: var(--bg); background: var(--amber); }
.tbtn:active { transform: scale(0.97); }
.tbtn.danger:hover { border-color: var(--error); background: var(--error); color: #fff; }

/* ─── SHORTCUTS BAR ──────────────────────────────────────── */
.shortcuts-bar {
  display: flex; flex-wrap: wrap; gap: 10px;
  font-size: 7px; color: var(--text-mute); letter-spacing: 0.1em;
}
.shortcuts-bar kbd {
  background: var(--surface2); border: 1px solid var(--border);
  color: var(--text-dim); padding: 1px 4px; font-family: var(--font); font-size: 7px;
}

/* ─── TEMPLATES ROW ──────────────────────────────────────── */
.template-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.t-select {
  background: var(--bg); border: 1px solid var(--border);
  color: var(--text-dim); font-family: var(--font); font-size: 9px;
  padding: 6px 8px; outline: none; letter-spacing: 0.08em;
  transition: border-color 0.15s;
}
.t-select:focus { border-color: var(--amber-dim); }
.t-select option { background: #050505; color: var(--amber); }

/* ─── STATUS STRIP ───────────────────────────────────────── */
.status-strip {
  display: flex; gap: 0;
  border: 1px solid var(--border); background: var(--bg);
  flex-wrap: wrap;
}
.ss-item {
  display: flex; flex-direction: column;
  padding: 6px 12px; border-right: 1px solid var(--border);
  gap: 3px; min-width: 60px;
}
.ss-item:last-child { border-right: none; }
.ss-label { font-size: 7px; color: var(--text-mute); letter-spacing: 0.15em; }
.ss-val   { font-size: 9px; color: var(--text-dim); }
.ss-cpu { justify-content: center; min-width: 80px; }

.cpu-bar  { height: 3px; background: var(--border); overflow: hidden; }
.cpu-fill { height: 100%; width: 0%; background: var(--amber-dim); transition: width 0.5s; }

.data-leak { font-size: 8px !important; color: var(--text-mute) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.data-leak.flash { color: var(--success) !important; }

/* ─── CURSOR ─────────────────────────────────────────────── */
.cursor {
  display: inline-block; width: 8px; height: 13px;
  background: var(--amber); vertical-align: text-bottom;
  animation: cursorBlink 1s step-end infinite;
}
@keyframes cursorBlink { 0%,100%{opacity:1;} 50%{opacity:0;} }

/* ─── HISTORY PANEL ──────────────────────────────────────── */
.history-panel {
  position: fixed; right: 0; top: 0; bottom: 0;
  width: 220px; background: var(--surface2);
  border-left: 1px solid var(--border);
  z-index: 800; display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s ease;
}
.history-panel.open { transform: translateX(0); }

.history-head {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 12px; border-bottom: 1px solid var(--border);
  cursor: pointer; flex-shrink: 0;
}
.history-title { font-size: 9px; color: var(--text-dim); letter-spacing: 0.18em; flex: 1; }
.history-close { color: var(--text-mute); font-size: 12px; flex-shrink: 0; }

.history-body {
  overflow-y: auto; flex: 1; padding: 6px 0;
}
.history-entry {
  padding: 8px 12px; font-size: 8px; color: var(--text-dim);
  border-left: 2px solid transparent;
  cursor: pointer; transition: all 0.12s;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.history-entry:hover { border-left-color: var(--amber-dim); color: var(--text); background: var(--amber-glow); }
.history-empty { padding: 16px 12px; font-size: 8px; color: var(--text-mute); }

/* ─── MODAL ──────────────────────────────────────────────── */
.modal {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(0,0,0,0.82);
  display: none; align-items: center; justify-content: center;
  backdrop-filter: blur(2px);
}
.modal.active { display: flex; }

.modal-content {
  background: var(--surface2); border: 1px solid var(--border);
  width: min(520px, 94vw); max-height: 85vh;
  display: flex; flex-direction: column;
}
.modal-wide { width: min(760px, 96vw); }

.modal-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  font-size: 10px; letter-spacing: 0.22em; color: var(--text-dim);
  flex-shrink: 0;
}

.modal-body { padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }

.file-label { display: inline-block; position: relative; }
.file-label input[type=file] {
  position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer;
}

.batch-log {
  height: 130px; background: var(--bg);
  border: 1px solid var(--border);
  padding: 10px; font-size: 9px; color: var(--text-dim);
  overflow-y: auto; white-space: pre-wrap;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}

/* Compare modal */
.compare-table { display: flex; flex-direction: column; gap: 10px; }
.compare-row   { border: 1px solid var(--border); }
.compare-cipher-name {
  padding: 7px 12px; font-size: 8px;
  letter-spacing: 0.2em; color: var(--accent);
  border-bottom: 1px solid var(--border);
  background: rgba(255,149,0,0.03);
}
.compare-text {
  padding: 10px 12px; font-size: 10px; color: var(--text-dim);
  word-break: break-all; white-space: pre-wrap;
  max-height: 80px; overflow-y: auto;
  line-height: 1.5;
}

.dim { opacity: 0.4; }

/* ─── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 760px) {
  .t-body           { grid-template-columns: 1fr; }
  .sidebar          { width: 100% !important; border-right: none; border-bottom: 1px solid var(--border); }
  .sidebar.collapsed { width: 100% !important; }
  .sidebar-body     { display: flex; gap: 0; flex-wrap: wrap; }
  .sidebar-file     { flex: 0 0 auto; width: auto; }
  .cipher-cfg       { grid-template-columns: 1fr; }
  .cfg-col + .cfg-col { border-left: none; border-top: 1px solid var(--border); }
  .t-main           { padding: 14px 14px 20px; }
  .t-header         { padding: 14px 16px 12px; }
  .t-header-right   { gap: 4px; }
  .hbtn             { padding: 4px 7px; font-size: 7px; }
  .history-panel    { width: 100%; }
}

@media (max-width: 460px) {
  .t-title  { font-size: 11px; }
  .btn-row  { gap: 4px; }
  .tbtn     { font-size: 8px; padding: 7px 9px; }
  .status-strip { display: none; }
}