:root{
  --bg: #0d1c16;
  --bg-dim: #0b1612;
  --card: #0f241b;
  --text: #d7ffe3;
  --muted: #8bd7a8;
  --accent: #22c55e;
  --accent-2:#16a34a;
  --shadow: rgba(0,0,0,0.4);
}

html,body{
  height:100%;
}
body{
  margin:0;
  background: radial-gradient(1200px 800px at 20% 10%, #123425 0%, var(--bg) 40%, var(--bg-dim) 100%);
  color: var(--text);
  font-family: 'Fira Code', ui-monospace, SFMono-Regular, Menlo, monospace;
}

.page{ max-width: 980px; margin: 0 auto; padding: 24px; }

.header{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; }
.brand{ display:flex; align-items:center; gap:16px; }
.brand h1{ margin:0; font-size:24px; }
.brand p{ margin:0; color:var(--muted); opacity:.9; }
.actions{ display:flex; align-items:center; gap:10px; }
.x-link{ display:inline-flex; align-items:center; gap:8px; color:var(--text); text-decoration:none; padding:8px 10px; border:1px solid #163a2a; border-radius:10px; background:#0d1f18; transition: all .15s ease; }
.x-link:hover{ color:#b6ffe0; border-color:#1f5a41; box-shadow: 0 4px 16px var(--shadow); transform: translateY(-1px); }
.x-icon{ display:block; }
.x-text{ font-weight:600; letter-spacing:.2px; }

/* Logo inspired by the provided hooded green mascot */
.logo{
  width:64px; height:64px; border-radius:16px; position:relative; background:linear-gradient(160deg,#0a2a1e,#0f1f18);
  box-shadow: 0 8px 24px var(--shadow), inset 0 0 0 2px #153b2a, inset 0 0 0 6px #0b1e16; 
}
.logo::before{ /* head */
  content:""; position:absolute; inset:10px; background:#2ee36a; border-radius:18px 18px 26px 26px / 22px 22px 30px 30px; filter:saturate(1.2);
}
.logo::after{ /* hood silhouette */
  content:""; position:absolute; inset:-4px; border-radius:20px; box-shadow: inset 0 0 0 3px #0a1712; }

.status{ color: var(--muted); font-size:14px; }

.terminal-card{
  background: linear-gradient(180deg, rgba(19,41,31,0.9), rgba(11,22,18,0.95));
  border: 1px solid #163a2a; border-radius: 14px; overflow: hidden;
  box-shadow: 0 12px 40px var(--shadow);
}

.terminal-output{
  min-height: 50vh; max-height: 60vh; overflow:auto; padding: 18px; line-height:1.5; white-space: pre-wrap;
}

.terminal-input{ display:flex; align-items:center; gap:10px; padding:12px 16px; border-top:1px solid #163a2a; background:#0b1712; }
.terminal-input .prompt{ color: var(--accent); font-weight:600; }
.terminal-input input{
  flex:1; background: transparent; border: none; outline: none; color: var(--text); font-size:16px;
}

.footer{ display:flex; justify-content:space-between; align-items:center; gap:12px; color:var(--muted); font-size:14px; padding:14px 4px; }
.footer select,.footer input{ background:#0d1f18; color:var(--text); border:1px solid #163a2a; border-radius:8px; padding:6px 8px; }

.msg{ margin: 6px 0; }
.msg .role{ color: var(--accent); }
.msg .content{ color: var(--text); }
.msg.system .role{ color:#93c5fd; }
.msg.error{ color:#fecaca; }

.blink{ animation: blink 1s step-start infinite; }
@keyframes blink{ 50%{ opacity:0; } }