/* ═══════════════════════════════════════
   Blue Menhera Corporation — Terminal UI
   ═══════════════════════════════════════ */

/* --- Design Tokens --- */
:root {
  --bg: #0c0c14;
  --fg: #b8c8c8;
  --teal: #5bbcbc;
  --teal2: #7fe0e0;
  --dim: #4a5568;
  --prompt: #5bbcbc;
  --cmd: #e8e8f0;
  --accent: #ffd700;
  --red: #ff5555;
  --green: #50fa7b;

  --surface: #1a1a28;
  --border: #2a2a3a;
  --input-bg: #111118;
  --quick-bg: #0e0e18;
  --quick-border: #1a1a2a;
  --quick-btn: #1a1a2e;

  --font-mono: 'Courier New', 'SF Mono', 'Monaco', monospace;
  --font-display: 'Zen Kaku Gothic New', sans-serif;
  --font-size-base: 13px;
}

/* --- Reset --- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

::selection {
  background: var(--teal);
  color: var(--bg);
}

html,
body {
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
  line-height: 1.7;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* --- Title Bar --- */
.titlebar {
  height: 32px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 12px;
  flex-shrink: 0;
  gap: 8px;
}

.titlebar__dots {
  display: flex;
  gap: 6px;
}

.titlebar__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.titlebar__dot--close  { background: #ff5f57; }
.titlebar__dot--min    { background: #ffbd2e; }
.titlebar__dot--max    { background: #28c840; }

.titlebar__title {
  flex: 1;
  text-align: center;
  font-size: 11px;
  color: #666;
  letter-spacing: 1px;
}

/* --- Output Area --- */
.output-wrap {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 16px;
  scroll-behavior: smooth;
}

.output {
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

/* --- Input Bar --- */
.input-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 8px 16px;
  border-top: 1px solid var(--border);
  background: var(--input-bg);
  gap: 8px;
}

.input-bar__prompt {
  color: var(--prompt);
  font-weight: bold;
  white-space: nowrap;
  font-size: var(--font-size-base);
}

.input-bar__field {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--cmd);
  font-family: inherit;
  font-size: var(--font-size-base);
  caret-color: var(--teal);
  caret-shape: block;
}

.input-bar__field::placeholder {
  color: #3a3a4a;
}

/* --- Quick Commands --- */
.quick-cmds {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 12px 8px;
  background: var(--quick-bg);
  border-top: 1px solid var(--quick-border);
}

.quick-cmds__btn {
  padding: 5px 10px;
  background: var(--quick-btn);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--teal);
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.quick-cmds__btn:active,
.quick-cmds__btn:hover {
  background: #2a2a4a;
  border-color: var(--teal);
}

/* --- Terminal Text Styles --- */
.t-teal   { color: var(--teal); }
.t-teal2  { color: var(--teal2); }
.t-dim    { color: var(--dim); }
.t-cmd    { color: var(--cmd); }
.t-accent { color: var(--accent); }
.t-red    { color: var(--red); }
.t-green  { color: var(--green); }
.t-bold   { font-weight: bold; }
.t-strike { text-decoration: line-through; color: var(--dim); }

.t-link {
  color: var(--teal);
  cursor: pointer;
  text-decoration: underline;
}
.t-link:hover { color: var(--teal2); }

.t-head {
  color: var(--teal2);
  font-weight: bold;
  font-size: 14px;
}

.t-main {
  color: var(--teal2);
  font-weight: bold;
  font-size: 15px;
  line-height: 2;
}

.t-sub {
  color: var(--teal);
  font-style: italic;
  line-height: 2;
}

.t-body {
  color: var(--fg);
  line-height: 2;
}

.t-catch {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 900;
  color: var(--teal2);
  letter-spacing: 4px;
  line-height: 2.5;
}

.t-poetry {
  font-family: var(--font-display);
  color: #8899aa;
  line-height: 2.2;
  font-size: 12px;
}

.ascii-logo {
  font-size: min(2.5vw, 14px);
  line-height: 1.1;
  letter-spacing: 0;
  white-space: pre;
}
.ascii-cyan  { color: #00e5ff; }
.ascii-white { color: #fff; }
.ascii-pink  { color: #ff40ff; }

/* --- Lock Screen --- */
body.is-locked .quick-cmds { display: none; }
body.is-locked .input-bar__field { -webkit-text-security: disc; }

/* --- Responsive --- */
@media (max-width: 600px) {
  body { font-size: 12px; }
  .output-wrap { padding: 10px 12px; }
  .input-bar { padding: 6px 12px; }
  .t-catch { font-size: 16px; letter-spacing: 2px; }
}