:root {
  --bg: #0d1117;
  --panel: #161b22;
  --panel-soft: #11161d;
  --border: #30363d;
  --text: #c9d1d9;
  --muted: #8b949e;
  --green: #3fb950;
  --blue: #58a6ff;
  --cyan: #39c5cf;
  --pink: #bc8cff;
  --danger: #ff7b72;
  --font-mono: "DM Mono", "Courier New", monospace;
  --font-sans: "Space Grotesk", sans-serif;
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background:
    radial-gradient(circle at 8% 10%, rgb(57 197 207 / 7%), transparent 27rem),
    radial-gradient(circle at 92% 90%, rgb(63 185 80 / 6%), transparent 30rem),
    var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
::selection { background: rgb(63 185 80 / 30%); }

.terminal-app { min-height: 100vh; padding: 16px; }

.terminal-shell {
  width: min(1440px, 100%);
  min-height: calc(100vh - 32px);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgb(22 27 34 / 82%);
  box-shadow: 0 24px 80px rgb(0 0 0 / 34%);
}

.window-bar {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 18px;
  border-bottom: 1px solid var(--border);
  background: rgb(1 4 9 / 88%);
}

.window-dots { display: flex; gap: 7px; }
.window-dot { width: 11px; height: 11px; border-radius: 50%; }
.window-dot.red { background: #ff5f56; }
.window-dot.yellow { background: #ffbd2e; }
.window-dot.green { background: #27c93f; }

.window-title {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font: 500 .75rem var(--font-mono);
}
.window-title strong { color: var(--text); font-weight: 500; }
.window-title span:first-child { color: var(--cyan); }

.clock-stack { display: grid; gap: 3px; justify-items: end; text-align: right; }
#localDateTime { color: var(--green); font: 500 .7rem var(--font-mono); }
#localTimezone { color: var(--muted); font: .6rem var(--font-mono); }

.workspace { display: grid; grid-template-columns: 228px minmax(0, 1fr); min-height: calc(100vh - 88px); }

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 25px 13px 16px;
  border-right: 1px solid var(--border);
  background: rgb(13 17 23 / 54%);
}

.sidebar-header { padding: 0 10px; }
.eyebrow { color: var(--muted); font: 500 .67rem/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.sidebar-header strong { display: block; margin-top: 8px; color: var(--text); font: 600 .95rem var(--font-mono); }
.sidebar-header strong span { color: var(--green); }

.command-nav { display: grid; gap: 4px; }
.command-button, .sidebar-action {
  display: flex;
  align-items: center;
  border: 1px solid transparent;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: color .2s, background-color .2s, border-color .2s, transform .2s;
}
.command-button { width: 100%; gap: 10px; padding: 10px 11px; border-radius: 6px; }
.command-button:hover, .command-button.active { border-color: rgb(57 197 207 / 25%); color: var(--cyan); background: rgb(57 197 207 / 8%); }
.command-button:active { transform: translateX(2px); }
.command-icon { width: 28px; color: var(--muted); font: .62rem var(--font-mono); }
.command-button.active .command-icon { color: var(--cyan); }

.profile-card {
  display: grid;
  justify-items: start;
  gap: 6px;
  margin-top: 3px;
  padding: 14px 10px 0;
  border-top: 1px solid var(--border);
}
.profile-image { width: 72px; height: 72px; margin: 6px 0 3px; border: 2px solid rgb(63 185 80 / 65%); border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 5px rgb(63 185 80 / 8%); }
.profile-card strong { color: var(--text); font: 500 .78rem var(--font-mono); }
.profile-card > span { color: var(--cyan); font: .64rem var(--font-mono); }
.profile-card small { color: var(--green); font: .6rem var(--font-mono); }

.sidebar-footer { display: grid; gap: 8px; margin-top: auto; padding: 13px 10px 0; border-top: 1px solid var(--border); }
.sidebar-action { gap: 9px; padding: 7px 0; color: var(--muted); font: .7rem var(--font-mono); text-decoration: none; }
.sidebar-action:hover { color: var(--green); }

.terminal-pane { display: flex; min-width: 0; flex-direction: column; padding: 27px clamp(18px, 3vw, 42px) 21px; }
.pane-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.status { display: flex; align-items: center; gap: 7px; color: var(--green); font: .69rem var(--font-mono); }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgb(63 185 80 / 10%); }
.location { color: var(--muted); font: .66rem var(--font-mono); }

.terminal-output { flex: 1; min-height: 360px; max-height: calc(100vh - 210px); overflow-y: auto; padding: 24px 2px 18px; scrollbar-color: var(--border) transparent; }
.term-line { margin: 0 0 15px; animation: line-in .3s ease both; }
.prompt-line { color: var(--text); font: .82rem/1.65 var(--font-mono); }
.prompt-user { color: var(--green); }
.prompt-path { color: var(--cyan); }
.response { color: var(--text); font: .84rem/1.65 var(--font-mono); }
.response p { margin: 8px 0; }
.response-muted { color: var(--muted); font: .78rem/1.6 var(--font-mono); }
.response-error { color: var(--danger); font: .78rem/1.6 var(--font-mono); }

.welcome { margin-bottom: 26px; padding: 21px 22px; border: 1px solid rgb(63 185 80 / 26%); border-left: 3px solid var(--green); background: linear-gradient(105deg, rgb(63 185 80 / 8%), transparent 65%); }
.welcome h1 { margin: 0 0 10px; color: var(--text); font: 600 clamp(1.2rem, 2.2vw, 1.65rem)/1.2 var(--font-sans); letter-spacing: -.04em; }
.welcome p { margin: 5px 0; color: var(--muted); font: .78rem/1.6 var(--font-mono); }
.welcome p strong { color: var(--green); font-weight: 500; }

.term-card { max-width: 850px; padding: 18px 20px 20px; border: 1px solid var(--border); border-left: 2px solid rgb(57 197 207 / 75%); background: rgb(22 27 34 / 90%); }
.term-card.green { border-left-color: var(--green); }
.term-card.blue { border-left-color: var(--blue); }
.term-card.pink { border-left-color: var(--pink); }
.term-card h2 { margin: 0 0 17px; color: var(--cyan); font: 500 .78rem var(--font-mono); letter-spacing: .08em; }
.term-card h3 { margin: 20px 0 7px; color: var(--text); font: 500 .74rem var(--font-mono); }
.term-card p { margin: 8px 0; color: var(--muted); font: .78rem/1.65 var(--font-mono); }
.term-card strong { color: var(--text); font-weight: 500; }
.term-card ul, .term-card ol { display: grid; gap: 7px; margin: 8px 0 15px; padding-left: 20px; color: var(--muted); font: .78rem/1.6 var(--font-mono); }
.term-card li::marker { color: var(--green); }
.term-link { color: var(--cyan); text-decoration: none; border-bottom: 1px dashed rgb(57 197 207 / 40%); }
.term-link:hover { color: var(--green); border-bottom-style: solid; }
.skill-grid, .stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; margin-top: 12px; }
.skill-item, .stat { padding: 11px 12px; border: 1px solid var(--border); background: rgb(13 17 23 / 48%); }
.skill-item b { display: block; margin-bottom: 6px; color: var(--green); font: 500 .74rem var(--font-mono); }
.skill-item span { color: var(--muted); font: .72rem/1.6 var(--font-mono); }
.project-list { list-style: none; padding-left: 0 !important; }
.project-list li { display: flex; gap: 9px; }
.project-number { min-width: 20px; color: var(--muted); }
.cert-row { display: flex; align-items: baseline; gap: 9px; padding: 7px 0; border-bottom: 1px solid rgb(48 54 61 / 65%); }
.cert-mark { color: var(--green); font-family: var(--font-mono); }
.stat b { display: block; color: var(--green); font: 500 1.3rem var(--font-mono); }
.stat span { color: var(--muted); font: .63rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }

.terminal-form { display: flex; align-items: center; gap: 10px; padding-top: 15px; border-top: 1px solid var(--border); }
.form-prompt { color: var(--green); font: .78rem var(--font-mono); white-space: nowrap; }
.terminal-input { width: 100%; min-width: 0; padding: 5px 0; border: 0; outline: 0; color: var(--cyan); background: transparent; font: .85rem var(--font-mono); }
.terminal-input::placeholder { color: rgb(139 148 158 / 68%); }
.hint-row { display: flex; justify-content: space-between; gap: 12px; padding-top: 12px; color: var(--muted); font: .64rem var(--font-mono); }
kbd { padding: 2px 5px; border: 1px solid var(--border); border-radius: 3px; color: var(--text); }
.loading-bar { height: 2px; overflow: hidden; background: var(--border); }
.loading-bar::after { content: ""; display: block; width: 35%; height: 100%; background: var(--cyan); animation: loading 1s ease-in-out infinite; }
.toast { position: fixed; right: 22px; bottom: 22px; z-index: 10; max-width: min(390px, calc(100vw - 44px)); padding: 12px 15px; border: 1px solid rgb(63 185 80 / 35%); background: var(--panel); color: var(--text); box-shadow: 0 12px 35px rgb(0 0 0 / 40%); font: .74rem var(--font-mono); }
.toast[hidden] { display: none; }

@keyframes line-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes loading { 0% { transform: translateX(-120%); } 100% { transform: translateX(340%); } }

@media (max-width: 760px) {
  .terminal-app { padding: 0; }
  .terminal-shell { min-height: 100vh; border: 0; border-radius: 0; }
  .window-bar { min-height: 58px; padding: 0 13px; }
  .window-title { font-size: .66rem; }
  .clock-stack { max-width: 122px; }
  #localDateTime { overflow: hidden; font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; }
  #localTimezone { font-size: .52rem; }
  .workspace { display: flex; flex-direction: column; min-height: calc(100vh - 58px); }
  .sidebar { order: 2; gap: 12px; padding: 14px 12px 18px; border-top: 1px solid var(--border); border-right: 0; }
  .sidebar-header { display: none; }
  .command-nav { grid-template-columns: repeat(3, 1fr); }
  .command-button { justify-content: center; padding: 9px 5px; font-size: .72rem; }
  .command-icon { display: none; }
  .profile-card { display: flex; align-items: center; gap: 8px; padding: 10px 3px 0; }
  .profile-card .eyebrow, .profile-card small { display: none; }
  .profile-image { width: 42px; height: 42px; margin: 0 3px 0 0; }
  .profile-card strong, .profile-card > span { font-size: .64rem; }
  .sidebar-footer { display: flex; justify-content: space-between; gap: 10px; padding: 10px 3px 0; }
  .sidebar-action { font-size: .62rem; }
  .terminal-pane { order: 1; min-height: calc(100vh - 226px); padding: 17px 14px 15px; }
  .terminal-output { min-height: 330px; max-height: none; padding-top: 18px; }
  .pane-meta { padding-bottom: 13px; }
  .location { display: none; }
  .welcome { padding: 17px 15px; }
  .welcome h1 { font-size: 1.14rem; }
  .term-card { padding: 15px 14px; }
  .skill-grid, .stats-grid { grid-template-columns: 1fr; }
  .hint-row { display: none; }
}