/* ===== Terminal Theme ===== */
:root {
  --bg:#0c0f12;
  --panel:#131a20;
  --fg:#cdd9c7;
  --muted:#8a8a8a;
  --accent:#33cc33;
  --link:#66ff66;
  --shadow: 0 12px 40px rgba(0,0,0,.45);
  --radius: 12px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* Local system monospace font stack */
}

/* === Solarized Dark === */
body[data-theme="solarized"] {
  --bg:#002b36;
  --panel:#073642;
  --fg:#839496;
  --muted:#586e75;
  --accent:#268bd2;
  --link:#2aa198;
}

/* === Solarized Light === */
body[data-theme="solarized-light"] {
  --bg:#fdf6e3;
  --panel:#eee8d5;
  --fg:#657b83;
  --muted:#93a1a1;
  --accent:#268bd2;
  --link:#2aa198;
}

/* === Dracula === */
body[data-theme="dracula"] {
  --bg:#282a36;
  --panel:#1e1f29;
  --fg:#f8f8f2;
  --muted:#6272a4;
  --accent:#bd93f9;
  --link:#50fa7b;
}

/* === Retro === */
body[data-theme="retro"] {
  --bg:#000000;
  --panel:#000000;
  --fg:#00ff00;
  --muted:#009900;
  --accent:#00ff00;
  --link:#33ff33;
}

/* ===== Global Styles ===== */
* { box-sizing:border-box; }

html,body {
  height:100%;
  margin:0;
}

body {
  font-family:var(--mono);
  color:var(--fg);
  background: var(--bg);
  line-height:1.55;
  letter-spacing:.2px;
}

.wrap {
  max-width: none;
  margin: 0;
  padding: 0;
  height: 100%;
}

.window {
  background: var(--panel);
  border-radius: 0;
  box-shadow: var(--shadow);
  overflow: hidden;
  border: 1px solid #1a222a;
  height: 100%;
}

.titlebar {
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  background: linear-gradient(180deg, #131a20, #0e141a);
  border-bottom:1px solid #1a222a;
  color:var(--muted);
  user-select:none;
}

.dots {
  display:flex;
  gap:8px;
  margin-right:6px;
}

.dot {
  width:12px;
  height:12px;
  border-radius:50%;
}

.dot.red {
  background:#ff5f56;
}

.dot.yellow {
  background:#ffbd2e;
}

.dot.green {
  background:#27c93f;
}

.title {
  font-size:14px;
  color:var(--accent);
}

.essentials {
  font-size:14px;
  color:aqua;
}

.status {
  margin-left:auto;
  font-size:12px;
  font-weight:bold;
  color:yellow;
}

.terminal {
  padding:16px clamp(16px, 4vw, 28px) 80px;
  height: calc(100% - 40px);
  background-color: var(--bg);
  background-image: radial-gradient(rgba(121,255,151,.06) 1px, transparent 1px);
  background-size: 12px 12px;
  background-position: -2px -2px;
  position:relative;
  overflow-y: auto;
  box-sizing: border-box;
}

.line {
  display:flex;
  gap:5px;
  align-items:flex-start;
  flex-wrap:wrap;
}

.prompt {
  color:var(--accent);
}

/* ===== Terminal input with real cursor ===== */
.input {
  font-size:12px;
  flex:0 1 auto;
  background:transparent;
  border:none;
  outline:none;
  color:var(--fg);
  font: inherit;
  min-width: 10px;
  caret-color: var(--accent); /* real blinking cursor */
  position: relative;
}

/* Disable fake block cursor */
.input:focus::after {
  content: none;
}

/* Fallback blink effect, usually not needed because the browser handles it */
@keyframes blinkCaret {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

/* ===== Output ===== */
.output {
  color: var(--fg);
}

.output a {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px dotted rgba(134,225,255,.6);
}

.output a:hover {
  text-decoration: underline;
}

.muted {
  color: var(--muted);
}

.error {
  color:#ff7b7b;
}

.success {
  color:#79ff97;
}

/* ===== Footer ===== */
.footer {
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  padding:20px 16px;
  background-color: black;
  font-size:12px;
  color:yellow;
}

.kbd {
  border:1px solid #2a3640;
  border-radius:6px;
  padding:2px 6px;
  font-size:12px;
}

@media (max-width:560px) {
  .titlebar {
    padding:8px;
  }

  .terminal {
    padding-bottom:96px;
  }

  .status {
    display:none;
  }
}

.boot-help {
  font-weight: bold;
  color: #33ff33;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height:10px;
}

::-webkit-scrollbar-thumb {
  background:#1b242c;
  border-radius:10px;
}