:root {
  --bg: #070b08; --panel: #0d140f; --line: #1c2a20; --fg: #b8d8c0; --dim: #5f7a66;
  --g: #39ff8a; --y: #ffd25e; --r: #ff6b6b; --c: #5ec8ff; --m: #d79bff; --b: #f2fff5;
  --font: "JetBrains Mono", "Sarasa Mono SC", "Noto Sans Mono CJK SC", "Microsoft YaHei Mono", ui-monospace, monospace;
}
:root[data-theme="light"] { --bg: #f4f1e8; --panel: #ebe6d8; --line: #d6cfbb; --fg: #2b3a2f; --dim: #7c8579;
  --g: #0f7a3d; --y: #9a6a00; --r: #b3261e; --c: #0b66a8; --m: #7b3fb0; --b: #111; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); font: 15px/1.65 var(--font); }
#app { display: flex; flex-direction: column; height: 100dvh; max-width: 980px; margin: 0 auto; }
header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 16px;
  border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.brand { color: var(--g); font-weight: 700; letter-spacing: 2px; display: flex; align-items: center; gap: 8px; }
.brand small { color: var(--dim); font-weight: 400; letter-spacing: 1px; font-size: 11px; }
.logo { display: inline-grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--g); border-radius: 6px;
  font-family: serif; text-shadow: 0 0 8px var(--g); }
.bar { font-size: 12px; color: var(--dim); display: flex; gap: 10px; flex-wrap: wrap; }
.bar b { color: var(--fg); font-weight: 600; }
.hpbar { display: inline-block; width: 60px; height: 6px; background: var(--line); vertical-align: middle; border-radius: 3px; overflow: hidden; }
.hpbar i { display: block; height: 100%; background: var(--g); }
.ticker { overflow: hidden; white-space: nowrap; border-bottom: 1px solid var(--line); background: var(--panel);
  font-size: 13px; color: var(--y); padding: 4px 0; }
.ticker span { display: inline-block; padding-left: 100%; animation: tick 60s linear infinite; }
@keyframes tick { to { transform: translateX(-100%); } }
main { flex: 1; overflow-y: auto; padding: 12px 16px; white-space: pre-wrap; word-break: break-word; }
main .line { min-height: 1.2em; }
main .echo { color: var(--dim); margin-top: 8px; }
main .sys { color: var(--dim); }
.g { color: var(--g); } .y { color: var(--y); } .r { color: var(--r); } .c { color: var(--c); } .m { color: var(--m); }
.w { color: var(--dim); } .b { color: var(--b); font-weight: 700; font-size: 1.05em; }
.cmd { color: var(--c); cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.cmd:hover { color: var(--b); }
a { color: var(--c); }
.banner { color: var(--g); text-shadow: 0 0 6px rgba(57, 255, 138, .35); line-height: 1.25; font-size: 13px; }
.pad { border-top: 1px solid var(--line); padding: 8px 16px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.pad.hidden { display: none; }
.quick { display: flex; gap: 6px; flex-wrap: wrap; }
.dirs { display: grid; grid-template-columns: repeat(3, 38px); gap: 4px; }
button { font: inherit; background: var(--panel); color: var(--fg); border: 1px solid var(--line); border-radius: 6px; padding: 4px 10px; cursor: pointer; }
button:hover { border-color: var(--g); color: var(--g); }
button:disabled { opacity: .3; cursor: default; }
.dirs button { padding: 4px 0; }
form { display: flex; align-items: center; gap: 8px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--panel); }
.prompt { color: var(--g); }
#in { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--b); font: inherit; font-size: 16px; }
.login { display: grid; gap: 8px; max-width: 340px; margin: 12px 0; }
.login input { font: inherit; font-size: 16px; padding: 8px 10px; background: var(--panel); color: var(--b); border: 1px solid var(--line); border-radius: 6px; }
.login .err { color: var(--r); min-height: 1.3em; }
@media (max-width: 600px) {
  html, body { font-size: 14px; }
  .dirs { grid-template-columns: repeat(3, 34px); }
  .banner { font-size: 9px; }
}
.mail { color: var(--y); text-decoration: none; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; } }
@media (max-width: 600px) {
  .pad { flex-wrap: nowrap; gap: 8px; padding: 6px 12px; align-items: flex-start; }
  .quick { flex: 1; gap: 4px; }
  .quick button { padding: 3px 7px; font-size: 13px; }
  .dirs { flex: none; gap: 3px; }
  .dirs button { padding: 2px 0; }
}