/*
 * app.css — extracted from public_html/index.php inline <style> blocks (Phase 1, 2026-08-29).
 * See docs/superpowers/plans/2026-08-29-index-split.md
 *
 * CASCADE WARNING: this file is <link>ed AFTER style.css, in the exact position of the
 * FIRST original inline block. Order matters — rules here intentionally override style.css
 * at equal specificity. Do NOT reorder this link before style.css, and do NOT split this
 * file without preserving block1-then-block2 order (block2 rules may override block1).
 */

/* ============================================================
   BLOCK 1 — originally index.php inline <style> (~L75-436)
   ============================================================ */

    /* ── Self-assessment runner ──────────────────────────────────────────── */
    .assess-content { padding: 18px; }
    .assess-landing { max-width: 1040px; margin: 0 auto; }
    .assess-header { text-align: center; margin-bottom: 24px; }
    .assess-icon { font-size: 36px; }
    .assess-header h2 { margin: 8px 0 4px; color: #e6edf3; font-size: 22px; }
    .assess-sub { color: var(--text-muted, #8b949e); font-size: 13px; margin: 0; }
    .assess-roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 24px 0; }
    @media (min-width: 900px) { .assess-roles { grid-template-columns: repeat(4, 1fr); } }
    .assess-role-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 14px; cursor: pointer; transition: border-color .15s, transform .15s; }
    .assess-role-card:hover { border-color: #3fb950; transform: translateY(-2px); }
    .assess-role-name { font-weight: 600; color: #e6edf3; }
    .assess-role-meta { font-size: 11px; color: var(--text-muted, #8b949e); margin-top: 4px; }
    .assess-history h4 { margin-top: 24px; }
    .assess-history-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: 10px; align-items: center; padding: 8px 12px; background: rgba(255,255,255,0.02); border-radius: 6px; margin-bottom: 4px; font-size: 12px; }
    .assess-history-empty { color: var(--text-muted, #8b949e); font-style: italic; padding: 12px; text-align: center; }

    .assess-runner { display: flex; flex-direction: column; gap: 12px; max-width: 760px; margin: 0 auto; }
    .assess-runner-top { display: flex; justify-content: space-between; align-items: center; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text-muted, #8b949e); }
    .assess-progress { font-weight: 600; color: #e6edf3; }
    .assess-phase { padding: 2px 10px; background: rgba(63,185,80,0.15); border: 1px solid rgba(63,185,80,0.4); border-radius: 4px; color: #3fb950; font-weight: 600; letter-spacing: .08em; }
    .assess-timer { color: #f5a623; font-weight: 700; min-width: 40px; text-align: right; }
    .assess-timer-bar { height: 4px; background: rgba(255,255,255,0.08); border-radius: 2px; overflow: hidden; }
    .assess-timer-fill { height: 100%; background: linear-gradient(90deg, #3fb950 0%, #f5a623 70%, #f85149 100%); width: 100%; transition: width 0.2s linear; }
    .assess-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 24px; }
    .assess-meta { font-size: 11px; color: var(--text-muted, #8b949e); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; }
    .assess-prompt { font-size: 16px; color: #e6edf3; line-height: 1.5; margin-bottom: 18px; }
    .assess-options { display: flex; flex-direction: column; gap: 8px; }
    .assess-opt-btn { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 12px 14px; color: #e6edf3; font-family: inherit; font-size: 14px; text-align: left; cursor: pointer; transition: background .12s, border-color .12s; }
    .assess-opt-btn:hover { background: rgba(63,185,80,0.1); border-color: #3fb950; }
    .assess-opt-btn:active { transform: scale(0.99); }
    .assess-fc { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
    .assess-fc-col h5 { margin: 0 0 6px; font-size: 11px; color: var(--text-muted, #8b949e); text-transform: uppercase; letter-spacing: .08em; }
    .assess-fc-btn { width: 100%; padding: 10px 12px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; color: #e6edf3; font-family: inherit; font-size: 12px; text-align: left; cursor: pointer; margin-bottom: 6px; }
    .assess-fc-btn.selected-most { background: rgba(63,185,80,0.2); border-color: #3fb950; }
    .assess-fc-btn.selected-least { background: rgba(248,81,73,0.15); border-color: #f85149; }
    .assess-likert { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 12px; }
    .assess-likert-btn { padding: 12px 6px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; color: #e6edf3; font-family: inherit; font-size: 11px; cursor: pointer; text-align: center; }
    .assess-likert-btn:hover { background: rgba(63,185,80,0.1); border-color: #3fb950; }
    .assess-runner-foot { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--text-muted, #8b949e); }

    .assess-report { max-width: 880px; margin: 0 auto; padding: 18px; }
    .assess-report h2 { color: #e6edf3; margin: 0 0 6px; }
    .assess-report .ar-archetype { display: inline-block; padding: 4px 12px; background: rgba(63,185,80,0.15); border: 1px solid rgba(63,185,80,0.4); border-radius: 4px; color: #3fb950; font-weight: 600; margin-bottom: 18px; }
    .ar-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
    .ar-section { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; padding: 14px; }
    .ar-section h4 { margin: 0 0 10px; font-size: 12px; color: var(--text-muted, #8b949e); text-transform: uppercase; letter-spacing: .08em; }
    .ar-bar { display: grid; grid-template-columns: 110px 1fr 50px; gap: 8px; align-items: center; margin-bottom: 6px; font-size: 12px; }
    .ar-bar-label { color: var(--text-muted, #8b949e); }
    .ar-bar-track { height: 8px; background: rgba(255,255,255,0.06); border-radius: 4px; overflow: hidden; }
    .ar-bar-fill { height: 100%; background: #3fb950; }
    .ar-bar-pct { text-align: right; color: #e6edf3; font-family: 'JetBrains Mono', monospace; font-weight: 600; }
    .ar-mini { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin: 10px 0; }
    .ar-mini-card { background: rgba(255,255,255,0.04); border-radius: 8px; padding: 10px; text-align: center; }
    .ar-mini-key { font-size: 10px; color: var(--text-muted, #8b949e); text-transform: uppercase; letter-spacing: .08em; }
    .ar-mini-val { font-size: 20px; font-weight: 700; color: #e6edf3; margin: 4px 0; font-family: 'JetBrains Mono', monospace; }
    .ar-mini-sub { font-size: 10px; color: var(--text-muted, #8b949e); }
    .ar-cat-row { display: grid; grid-template-columns: 1fr 50px 50px; gap: 8px; align-items: center; padding: 4px 0; font-size: 11px; }
    .ar-actions { display: flex; gap: 8px; margin-top: 16px; }
    /* Wave 4 item 13 (2026-08-29): this inline copy of .ar-grid/.ar-bar
       (no media query) beats style.css's ≤932px `.ar-grid{grid-template-
       columns:1fr}` outright — the linked stylesheet is fully parsed before
       this <style> block, so at equal specificity this later, unconditional
       rule always wins regardless of viewport. The mobile fix has to live
       here to actually take effect. */
    @media (max-width: 900px) {
      .ar-grid { grid-template-columns: 1fr; }
      .ar-bar { grid-template-columns: 90px 1fr 50px; }
    }

    /* ── Profile landscape layout (3-col grid) ───────────────────────────── */
    .profile-landscape {
      display: grid;
      grid-template-columns: 210px 1fr 1fr;
      gap: 14px;
      padding: 14px;
      align-items: start;
    }
    .pl-col {
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 8px;
      padding: 14px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-width: 0;
    }
    .pl-h { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted, #8b949e); margin: 0 0 4px; }
    .pl-subh { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted, #8b949e); margin: 10px 0 5px; }
    .pl-empty { color: var(--text-muted, #8b949e); font-size: 12px; padding: 8px 0; text-align: center; }

    /* identity column */
    .pl-identity { align-items: center; text-align: center; }
    .pl-avatar-wrap { position: relative; width: 80px; height: 80px; cursor: pointer; }
    .pl-avatar { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(63,185,80,0.4); display: block; background: #161b22; }
    .pl-avatar-placeholder { display: flex; align-items: center; justify-content: center; font-size: 36px; }
    .pl-avatar-overlay { position: absolute; bottom: 0; right: 0; background: #3fb950; color: #0d1117; border-radius: 50%; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 11px; }
    .pl-nickname, .pl-motto { width: 100%; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; padding: 7px 9px; color: #e6edf3; font-family: inherit; }
    .pl-nickname { font-weight: 600; font-size: 13px; text-align: center; }
    .pl-motto    { font-size: 11px; text-align: center; color: var(--text-muted, #8b949e); }
    .pl-meta { display: flex; flex-direction: column; gap: 4px; width: 100%; font-size: 11px; }
    .pl-meta > div { display: flex; justify-content: space-between; gap: 8px; }
    .pl-meta-key { color: var(--text-muted, #8b949e); text-transform: uppercase; letter-spacing: .06em; }
    .pl-meta-val { color: #e6edf3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
    .pl-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 6px; width: 100%; }
    .pl-actions .pl-btn-primary { grid-column: 1 / -1; }
    .pl-actions .pl-btn-wide    { grid-column: 1 / -1; }
    .pl-btn { background: rgba(255,255,255,0.05); color: #e6edf3; border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; padding: 6px 10px; font-size: 11px; cursor: pointer; font-family: inherit; text-align: center; }
    .pl-btn:hover { background: rgba(255,255,255,0.09); }
    .pl-btn-primary { background: #3fb950; color: #0d1117; border-color: #3fb950; }
    .pl-btn-primary:hover { background: #4ec96a; }
    .pl-btn-danger { background: rgba(248,81,73,0.08); border-color: rgba(248,81,73,0.3); color: #f85149; }
    .pl-btn-danger:hover { background: rgba(248,81,73,0.18); }

    /* stats column */
    .pl-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .pl-stat-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; padding: 10px; text-align: center; }
    .pl-stat-card.nightmare { border-color: rgba(248,81,73,0.3); }
    .pl-stat-card.survival  { border-color: rgba(255,159,67,0.3); }
    .pl-stat-card.overall   { border-color: rgba(63,185,80,0.3); }
    .pl-stat-key { font-size: 10px; color: var(--text-muted, #8b949e); text-transform: uppercase; letter-spacing: .08em; }
    .pl-stat-val { font-size: 18px; font-weight: 700; color: #e6edf3; margin: 4px 0; font-family: 'JetBrains Mono', monospace; }
    .pl-stat-sub { font-size: 10px; color: var(--text-muted, #8b949e); }
    .pl-knowledge { display: flex; flex-direction: column; gap: 5px; }
    .pl-knowledge-row { display: grid; grid-template-columns: 90px 1fr 38px; gap: 8px; align-items: center; font-size: 11px; }
    .pl-knowledge-cat { color: var(--text-muted, #8b949e); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .pl-knowledge-bar { height: 6px; background: rgba(255,255,255,0.05); border-radius: 3px; overflow: hidden; }
    .pl-knowledge-fill { height: 100%; background: #3fb950; transition: width 0.3s; }
    .pl-knowledge-fill.expert      { background: #3fb950; }
    .pl-knowledge-fill.proficient  { background: #58a6ff; }
    .pl-knowledge-fill.intermediate{ background: #f5a623; }
    .pl-knowledge-fill.beginner    { background: #f85149; }
    .pl-knowledge-pct { text-align: right; color: #e6edf3; font-family: 'JetBrains Mono', monospace; }
    .pl-certs { display: flex; flex-direction: column; gap: 5px; }
    .pl-cert-row { display: grid; grid-template-columns: 90px 1fr auto; gap: 8px; align-items: center; font-size: 11px; }
    .pl-cert-era { color: #e6edf3; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .pl-cert-date { color: var(--text-muted, #8b949e); font-family: 'JetBrains Mono', monospace; }
    .pl-cert-verify { color: #58a6ff; text-decoration: none; white-space: nowrap; }
    .pl-cert-verify:hover { text-decoration: underline; }
    .pl-quick { display: flex; gap: 6px; margin-top: auto; padding-top: 8px; }
    .pl-quick .pl-btn { flex: 1; }

    /* activity column */
    .pl-mini { display: flex; flex-direction: column; gap: 4px; font-size: 12px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.06); }
    .pl-mini-row { display: flex; justify-content: space-between; }
    .pl-mini-row span:first-child { color: var(--text-muted, #8b949e); }
    .pl-good { color: #3fb950; }
    .pl-bad  { color: #f85149; }
    .pl-activity-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
    .pl-activity-row { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 6px; background: rgba(255,255,255,0.02); font-size: 11px; }
    .pl-activity-score { font-family: 'JetBrains Mono', monospace; color: #e6edf3; font-weight: 600; }
    .pl-activity-date { color: var(--text-muted, #8b949e); font-size: 10px; }
    .pl-insights { display: flex; flex-direction: column; gap: 4px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.06); }
    .pl-insight { font-size: 11px; padding: 6px 8px; border-radius: 6px; background: rgba(255,255,255,0.02); }

    @media (max-width: 900px) {
      .profile-landscape { grid-template-columns: 1fr; }
      .pl-col { min-height: auto; }
    }

    /* ── Employer rails: company section inside profile modal ──────────── */
    .pl-company-section {
      margin: 0 18px 18px;
      padding: 16px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .pl-company-individual {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
    }
    .pl-company-cta-text { flex: 1; min-width: 220px; }
    .pl-company-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }
    .pl-company-info { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: #e6edf3; }
    .pl-company-info-mail { color: var(--text-muted, #8b949e); font-size: 11px; }

    .pl-invite-form { display: flex; flex-direction: column; gap: 8px; }
    .pl-invite-fields {
      display: grid;
      grid-template-columns: 2fr 1.5fr 1.5fr auto;
      gap: 8px;
      align-items: center;
    }
    .pl-invite-input, .pl-invite-select {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 6px;
      padding: 8px 10px;
      color: #e6edf3;
      font-family: inherit;
      font-size: 12px;
      min-width: 0;
    }
    .pl-invite-input:focus, .pl-invite-select:focus {
      outline: none;
      border-color: rgba(63,185,80,0.5);
      background: rgba(255,255,255,0.06);
    }
    .pl-invite-msg { font-size: 11px; min-height: 14px; padding: 4px 0; }
    .pl-invite-msg.pl-good { color: #3fb950; }
    .pl-invite-msg.pl-bad  { color: #f85149; }

    .pl-invite-list-wrap { margin-top: 4px; }
    .pl-invite-table { display: flex; flex-direction: column; gap: 4px; }
    .pl-invite-row {
      display: grid;
      grid-template-columns: 2.2fr 1.4fr 1.2fr 1fr 0.9fr 1.4fr;
      gap: 8px;
      align-items: center;
      padding: 8px 10px;
      border-radius: 6px;
      background: rgba(255,255,255,0.02);
      font-size: 12px;
      color: #e6edf3;
    }
    .pl-invite-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .pl-invite-row.pl-invite-head {
      background: rgba(255,255,255,0.04);
      color: var(--text-muted, #8b949e);
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: .08em;
    }

    .status-badge {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 10px;
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .04em;
      border: 1px solid transparent;
      white-space: nowrap;
    }
    .status-badge-pending   { background: rgba(63,185,80,0.12);   color: #3fb950; border-color: rgba(63,185,80,0.4); }
    .status-badge-claimed   { background: rgba(245,166,35,0.12);  color: #f5a623; border-color: rgba(245,166,35,0.4); }
    .status-badge-submitted { background: rgba(63,185,80,0.18);   color: #3fb950; border-color: rgba(63,185,80,0.6); }
    .status-badge-expired   { background: rgba(139,148,158,0.12); color: #8b949e; border-color: rgba(139,148,158,0.3); }
    .status-badge-revoked   { background: rgba(248,81,73,0.10);   color: #f85149; border-color: rgba(248,81,73,0.4); }
    .status-badge-declined  { background: rgba(248,81,73,0.10);   color: #f85149; border-color: rgba(248,81,73,0.4); }
    .status-badge-unknown   { background: rgba(255,255,255,0.04); color: #8b949e; border-color: rgba(255,255,255,0.06); }

    /* Candidate report modal (shown when company clicks View Report) */
    .company-report-modal {
      position: fixed; inset: 0; z-index: 9998; display: none;
    }
    .company-report-backdrop {
      position: absolute; inset: 0; background: rgba(0,0,0,0.65); backdrop-filter: blur(2px);
    }
    .company-report-card {
      position: relative;
      max-width: 800px;
      width: calc(100% - 32px);
      max-height: calc(100vh - 64px);
      margin: 32px auto;
      background: #161b22;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 10px;
      padding: 20px 22px;
      overflow: auto;
      box-shadow: 0 12px 40px rgba(0,0,0,0.5);
    }
    .company-report-close {
      position: absolute; top: 8px; right: 12px;
      background: transparent; border: 0; color: #8b949e; font-size: 22px; cursor: pointer;
      line-height: 1; padding: 4px 8px;
    }
    .company-report-close:hover { color: #e6edf3; }

    /* Candidate-rail post-submission note (inside assess-report) */
    .candidate-shared-note {
      margin: 14px 0 6px;
      padding: 10px 12px;
      border-radius: 8px;
      background: rgba(63,185,80,0.10);
      border: 1px solid rgba(63,185,80,0.4);
      color: #e6edf3;
      font-size: 12px;
      line-height: 1.5;
    }

    @media (max-width: 900px) {
      /* Wave 4 item 11 (2026-08-29): the .pl-invite-* rules here were a
         byte-identical duplicate of style.css's ≤932px authority block
         (~L7568) — removed; style.css is the single source of truth. Only
         the two rules unique to this block stay. */
      .pl-company-section { margin: 0 12px 12px; }
      .pl-company-individual { flex-direction: column; align-items: stretch; }
    }

    /* ── Quiz stats footer (single-row geeky strip under the quiz panel) ───── */
    .quiz-stats-footer {
      display: flex;
      flex-wrap: wrap;
      gap: 0;
      align-items: center;
      justify-content: center;
      margin: 18px 0 0;
      padding: 10px 12px;
      border-top: 1px solid rgba(255,255,255,0.06);
      background: rgba(255,255,255,0.02);
      border-radius: 6px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      color: var(--text-muted, #8b949e);
    }
    .qsf-cell {
      display: inline-flex;
      align-items: baseline;
      gap: 5px;
      padding: 0 10px;
      border-right: 1px solid rgba(255,255,255,0.05);
      white-space: nowrap;
    }
    .qsf-cell:last-child { border-right: none; }
    .qsf-icon { display: inline-flex; align-items: center; opacity: .8; color: var(--text-muted, #8b949e); }
    .qsf-icon svg { display: block; }
    .qsf-icon.qsf-good { color: #3fb950; opacity: 1; }
    .qsf-icon.qsf-bad  { color: #f85149; opacity: 1; }
    .qsf-label { letter-spacing: .04em; text-transform: uppercase; opacity: .75; }
    .qsf-val { color: #e6edf3; font-weight: 600; }
    .qsf-val.qsf-good { color: #3fb950; }
    .qsf-val.qsf-bad  { color: #f85149; }
    @media (max-width: 720px) {
      /* Even 3×3 grid — the flex-wrap+centre layout split 9 cells 6/3 and looked
         scattered. Grid keeps equal columns and even spacing. */
      .quiz-stats-footer { font-size: 11px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 4px; padding: 12px 10px; }
      .qsf-cell { padding: 4px 4px; border-right: none; justify-content: center; gap: 5px; }
      .qsf-label { display: none; }
    }

    #xtermContainer {
      display: none;
      flex: 1;
      min-height: 0;
      background: #0a0a0a;
      padding: 4px 6px;
      box-sizing: border-box;
    }
    #xtermContainer .xterm {
      height: 100%;
    }
    #xtermContainer .xterm-viewport {
      background: #0a0a0a !important;
    }

/* ============================================================
   BLOCK 2 — originally index.php inline <style> (~L437-668)
   ============================================================ */

    /* ── DOS/Linux Terminal ─────────────────────────────────────── */
    #dosTerminal {
      display: flex;
      flex-direction: column;
      background: #0a0a0a;
      font-family: 'JetBrains Mono', 'Courier New', monospace;
      overflow: hidden;
      position: relative;
    }
    #biosOverlay {
      position: absolute;
      inset: 0;
      z-index: 100;
      background: #000;
      color: #aaaaaa;
      font-family: 'JetBrains Mono', 'Courier New', monospace;
      font-size: 12px;
      line-height: 1.5;
      padding: 18px 20px;
      white-space: pre;
      overflow: hidden;
      cursor: default;
    }
    #biosOverlay .bios-title  { color: #ffffff; }
    #biosOverlay .bios-border { color: #aaaaaa; }
    #biosOverlay .bios-key    { color: #ffffff; }
    #biosOverlay .bios-val    { color: #aaaaaa; }
    .term-tabs-outer {
      background: #111;
      border-bottom: 1px solid #222;
      flex-shrink: 0;
    }
    .term-groups {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 6px 8px 4px;
    }
    .term-group {
      padding: 3px 11px;
      background: transparent;
      border: 1px solid transparent;
      border-radius: 4px;
      color: #555;
      font-family: inherit;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .08em;
      cursor: pointer;
      transition: color .15s, background .15s, border-color .15s;
    }
    .term-group:hover { color: #999; }
    .term-group.active { color: #e8a000; background: #1a1a1a; border-color: #2a2a2a; }
    .term-tabs {
      display: flex;
      align-items: center;
      gap: 2px;
      padding: 0 8px 6px;
    }
    .term-tab-placeholder {
      display: flex;
      align-items: center;
      padding: 4px 12px;
      color: #3a3a3a;
      font-size: 10px;
      font-style: italic;
      letter-spacing: .04em;
      white-space: nowrap;
      cursor: default;
    }
    .term-tab {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 4px 14px;
      background: #1a1a1a;
      border: 1px solid #2a2a2a;
      border-bottom: none;
      color: #555;
      font-family: inherit;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .06em;
      cursor: pointer;
      border-radius: 4px 4px 0 0;
      transition: color .15s, background .15s;
    }
    .term-tab:hover { color: #999; background: #1f1f1f; }
    .term-tab.active { color: #e8a000; background: #0a0a0a; border-color: #333; }
    #dosTerminal[data-mode="linux"] .term-tab.active[data-mode="linux"] { color: #4af; }
    #dosTerminal[data-mode="bbs"] .term-tab.active[data-mode="bbs"] { color: #55ff55; }
    #dosTerminal[data-mode="powershell"] .term-tab.active[data-mode="powershell"] { color: #5c9dff; }
    .term-tab-locked { opacity: .38; }
    .term-tab-locked:hover { opacity: .6; }
    #dosTerminal[data-mode="powershell"] .dos-line { color: #cdd9ee; }
    #dosTerminal[data-mode="powershell"] .dos-prompt-el { color: #5c9dff; }
    #dosTerminal[data-mode="git"] .term-tab.active[data-mode="git"] { color: #f0563f; }
    #dosTerminal[data-mode="git"] .dos-line { color: #ecdcd0; }
    #dosTerminal[data-mode="git"] .dos-prompt-el { color: #f0563f; }
    #dosTerminal[data-mode="sql"] .term-tab.active[data-mode="sql"] { color: #33c9b7; }
    #dosTerminal[data-mode="sql"] .dos-line { color: #d0e6e2; }
    #dosTerminal[data-mode="sql"] .dos-prompt-el { color: #33c9b7; }
    #dosTerminal[data-mode="python"] .term-tab.active[data-mode="python"] { color: #ffd43b; }
    #dosTerminal[data-mode="python"] .dos-line { color: #cfe0f0; }
    #dosTerminal[data-mode="python"] .dos-prompt-el { color: #ffd43b; }
    .bbs-line { white-space: pre; font-family: 'JetBrains Mono','Courier New',monospace; }
    .term-tab-spacer { flex: 1; }
    .academy-progress { font-size: 10px; color: #2d7a3d; font-family: 'JetBrains Mono', monospace;
      letter-spacing: .03em; white-space: nowrap; padding: 0 10px; opacity: .85; }
    .term-tab-action {
      padding: 3px 10px;
      background: transparent;
      border: 1px solid #2a2a2a;
      border-radius: 3px;
      color: #444;
      font-family: inherit;
      font-size: 10px;
      cursor: pointer;
    }
    .term-tab-action:hover { color: #888; border-color: #444; }

    .dos-screen {
      flex: 1;
      overflow-y: auto;
      position: relative;
      padding: 10px 14px 24px;
      display: flex;
      flex-direction: column;
      scroll-behavior: smooth;
    }
    .dos-screen::-webkit-scrollbar { width: 4px; }
    .dos-screen::-webkit-scrollbar-track { background: #0a0a0a; }
    .dos-screen::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 2px; }

    .dos-line {
      color: #aaaaaa;
      font-size: 12px;
      line-height: 1.55;
      white-space: pre-wrap;
      word-break: break-all;
      min-height: 1.55em;
    }
    #dosTerminal[data-mode="linux"] .dos-line { color: #aaaaaa; }
    .dos-line.cmd   { color: #fff; }
    .dos-line.oracle{ color: #e07a5f; }
    .dos-line.err   { color: #e05555; }
    .dos-line.dim   { color: #484848; }
    .dos-line.lore  { color: #3d9b3d; font-style: italic; letter-spacing: 0.01em; margin-top: 3px; }
    .dos-line.learn { color: #2d7a8a; font-size: 11px; margin-bottom: 3px; }

    .dos-input-line {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      padding: 6px 0 8px;
      gap: 2px;
      flex-shrink: 0;
      margin-top: auto;
    }
    .dos-input-row { display: flex; align-items: center; }
    .dos-input::placeholder { color: #2d6a2d; font-style: italic; }
    /* In-flow hint that collapses when hidden, so it never overlaps the
       scrollback (lore/prompt) the way the old position:absolute panel did. */
    #dosHintPanel {
      font-size: 10px;
      color: #2d7a3d;
      padding: 0 4px;
      pointer-events: none;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-style: italic;
      letter-spacing: 0.02em;
      max-height: 0;
      opacity: 0;
      transition: max-height 0.25s ease, opacity 0.4s ease;
    }
    #dosHintPanel.visible { max-height: 1.6em; opacity: 1; }
    .dos-prompt-el {
      color: #aaaaaa;
      font-size: 12px;
      white-space: nowrap;
      user-select: none;
      padding-right: 1px;
    }
    #dosTerminal[data-mode="linux"] .dos-prompt-el { color: #aaaaaa; }
    .dos-input {
      flex: 1;
      background: transparent;
      border: none;
      outline: none;
      color: #ffffff;
      font-family: inherit;
      font-size: 12px;
      caret-color: #aaaaaa;
      caret-shape: block;
      padding: 0;
    }
    #dosTerminal[data-mode="linux"] .dos-input { caret-color: #aaaaaa; }
    @keyframes dos-cursor-blink {
      0%, 49% { caret-color: #aaaaaa; }
      50%, 100% { caret-color: transparent; }
    }
    #dosTerminal[data-mode="dos"] .dos-input:focus {
      animation: dos-cursor-blink 0.53s step-end infinite;
    }

    /* ── Mobile terminal (≤932px) ──────────────────────────────────────────
       The narrative "TRANSMISSION" panels are 58-char box-drawing art. With
       pre-wrap + break-all they wrapped mid-box on phones and the wrapped
       fragments collided (overlapping text). Switch to no-wrap + a smaller
       font so the boxes stay intact; the screen scrolls horizontally for the
       few lines wider than the viewport. Defined here (after style.css) so it
       wins the cascade over the base .dos-line rule above. 932px covers landscape
       phones too — below the layout breakpoint the terminal is full-width and the
       58-char box art must not wrap. */
    @media (max-width: 932px) {
      .dos-line { font-size: 10px; line-height: 1.5; white-space: pre; word-break: normal; }
      #biosOverlay { font-size: 10px; padding: 12px 14px; }
      .dos-screen { max-height: 46vh; overflow-x: auto; -webkit-overflow-scrolling: touch; }
      /* Wave 2 item 1 (2026-08-29): era group tabs (44-72x21) and era tabs
         (63-86x23) under the 44px tap floor. They sit in a horizontal-scroll
         row (see .term-tabs overflow-x in style.css's 932 block), so a
         40px-min-height + modest padding compromise keeps visual density
         reasonable instead of chasing full 44px width-and-height per tab. */
      .term-group { min-height: 40px; padding: 8px 12px; }
      .term-tab { min-height: 40px; padding: 8px 14px; }
      /* Wave 2 item 5: maximize (30x21) + CLS (40x21) buttons -> >=40x40. */
      .term-tab-action { min-width: 40px; min-height: 40px; padding: 8px 10px; display: inline-flex; align-items: center; justify-content: center; }
    }