:root {
  --bg: #060b10;
  --panel: #0b141c;
  --panel2: #0e1a24;
  --line: #16303d;
  --line2: #1f4252;
  --text: #dbe9ef;
  --muted: #6f8b97;
  --soft: #9fc3cf;
  --cyan: #3fd0e6;
  --cyan-soft: rgba(63, 208, 230, 0.14);
  --private: #4fa3ff;
  --work: #f0a94b;
  --idea: #a48cff;
  --active: #3fd69a;
  --paused: #e2c45a;
  --done: #6d7b82;
  --warn: #ff7b6b;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html,
body { margin: 0; min-height: 100%; }

body {
  background: radial-gradient(1200px 700px at 50% 30%, #0b1822 0%, var(--bg) 70%) fixed;
  color: var(--text);
  font: 13px/1.45 "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  overflow-x: hidden;
}

button { font: inherit; color: inherit; }

.muted { color: var(--muted); }
.ok { color: var(--active); }
.warn { color: var(--warn); }
.amber { color: var(--work); }
.k { font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }

.app { display: grid; grid-template-columns: 200px minmax(0, 1fr); min-height: 100vh; }

.panel {
  position: relative;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--panel2), var(--panel));
}

.panel::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 12px;
  right: 12px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity: 0.35;
}

.panel h3 { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0 0 10px; font-weight: 400; }
.panel h3 .k { color: var(--soft); }

.link { border: none; background: none; padding: 0; color: var(--cyan); font-size: 11px; cursor: pointer; }
.link:hover { text-decoration: underline; }
.more { margin-top: 6px; text-align: right; }

.chip { padding: 1px 7px; border: 1px solid var(--line2); border-radius: 999px; font-size: 10px; color: var(--soft); white-space: nowrap; }
.chip.live { color: var(--active); border-color: rgba(63, 214, 154, 0.4); }

/* sidebar */
.side { display: flex; flex-direction: column; gap: 14px; padding: 16px 12px; border-right: 1px solid var(--line); background: rgba(6, 11, 16, 0.6); }
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 6px 12px; border-bottom: 1px solid var(--line); }
.brand b { display: block; font-size: 14px; letter-spacing: 0.12em; }
.brand small { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.mark { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--cyan); border-radius: 50%; box-shadow: 0 0 12px var(--cyan-soft) inset; }
.mark i { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: none;
  color: #a9c0c9;
  text-align: left;
  cursor: pointer;
}
.nav button:hover { background: rgba(63, 208, 230, 0.07); }
.nav button[aria-current="page"] { background: var(--cyan-soft); color: var(--text); box-shadow: inset 2px 0 0 var(--cyan); }
.nav .n { padding: 0 7px; border-radius: 999px; background: #0f2029; font-size: 11px; color: var(--muted); }

.voice { margin-top: auto; padding: 14px 10px; text-align: center; }
.mic {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 10px auto 6px;
  border: 1px solid var(--cyan);
  border-radius: 50%;
  color: var(--cyan);
  font-size: 20px;
  box-shadow: 0 0 0 6px rgba(63, 208, 230, 0.06), 0 0 24px rgba(63, 208, 230, 0.18);
}

/* main */
.main { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 14px 16px 0; }
.view { display: flex; flex-direction: column; gap: 12px; }
.view[hidden] { display: none; }

.top { display: flex; align-items: center; gap: 14px; }
.pill { display: flex; align-items: center; gap: 8px; padding: 5px 12px; border: 1px solid var(--line2); border-radius: 999px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--soft); }
.led { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.led.on { background: var(--active); box-shadow: 0 0 8px var(--active); }
.led.bad { background: var(--warn); box-shadow: 0 0 8px var(--warn); }
.clock { margin: 0 auto; text-align: center; }
.clock .d { font-size: 11px; color: var(--muted); }
.clock .t { font-size: 24px; font-weight: 300; letter-spacing: 0.06em; color: #bff3fb; font-variant-numeric: tabular-nums; }
.search { width: 260px; padding: 7px 10px; border: 1px solid var(--line2); border-radius: 8px; background: #08121a; color: var(--text); font: inherit; }
.search:focus { outline: none; border-color: var(--cyan); }
.me { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border: 1px solid var(--line2); border-radius: 999px; }
.me i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #12303c; font-size: 11px; font-style: normal; color: var(--cyan); }

.stop { padding: 6px 12px; border: 1px solid var(--line2); border-radius: 999px; background: none; color: var(--muted); font-size: 12px; cursor: pointer; }
.stop:hover { border-color: var(--warn); color: var(--warn); }

.stopped { display: grid; place-items: center; min-height: 100vh; padding: 24px; text-align: center; }
.stopped .mark { margin: 0 auto; width: 54px; height: 54px; }
.stopped h1 { margin: 16px 0 6px; font-size: 22px; font-weight: 400; letter-spacing: 0.12em; color: #bff3fb; }
.stopped p { margin: 4px 0; color: var(--muted); }

.tag-button { padding: 0 6px; border: 1px solid var(--line2); border-radius: 6px; background: none; color: var(--soft); font-size: 10.5px; cursor: pointer; }
.tag-button:hover { border-color: var(--cyan); color: var(--text); }
.tags svg .tag-node { cursor: pointer; }
.tags svg .tag-node:hover text { fill: #ffffff; }
.tags svg .tag-node:focus { outline: none; }
.tags svg .tag-node:focus text { fill: #ffffff; text-decoration: underline; }
.clickable { cursor: pointer; }

.drawer .body.md { white-space: normal; }
.md h3, .md h4, .md h5, .md h6, .md h7, .md h8 { margin: 18px 0 6px; font-weight: 600; color: #bff3fb; letter-spacing: 0.01em; }
.md h3 { font-size: 17px; }
.md h4 { font-size: 15px; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.md h5, .md h6 { font-size: 13.5px; color: var(--soft); }
.md > :first-child { margin-top: 0; }
.md p { margin: 8px 0; }
.md ul, .md ol { margin: 6px 0 10px; padding-left: 20px; }
.md li { margin: 3px 0; }
.md li::marker { color: var(--cyan); }
.md li.depth-1 { margin-left: 18px; }
.md li.depth-2 { margin-left: 36px; }
.md li.depth-3 { margin-left: 54px; }
.md strong { color: #ffffff; font-weight: 600; }
.md code { padding: 1px 5px; border: 1px solid var(--line2); border-radius: 5px; background: #08121a; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12.5px; color: #bff3fb; overflow-wrap: anywhere; }
.md pre { overflow-x: auto; padding: 10px 12px; border: 1px solid var(--line2); border-radius: 8px; background: #08121a; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12.5px; white-space: pre; }
.md blockquote { margin: 10px 0; padding: 6px 12px; border-left: 3px solid var(--cyan); color: var(--soft); }
.md hr { margin: 16px 0; border: none; border-top: 1px solid var(--line); }
.md a { color: var(--cyan); }

.repo-line { margin-top: 5px; overflow: hidden; font-size: 11px; color: var(--soft); white-space: nowrap; text-overflow: ellipsis; }
.code-box { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; padding: 10px 12px; border: 1px solid var(--line2); border-radius: 9px; background: rgba(8, 18, 26, 0.6); }
.repo-link { color: var(--cyan); text-decoration: none; }
.repo-link:hover { text-decoration: underline; }
.local-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.local-row .path { overflow-wrap: anywhere; }

.grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1.1fr); gap: 12px; }
.grid2 { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.1fr) minmax(0, 1fr); gap: 12px; }
.grid3 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.6fr); gap: 12px; }

.stat { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: rgba(8, 18, 26, 0.6); }
.stat .ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: #0f2632; color: var(--cyan); font-size: 12px; }
.stat b { display: block; font-size: 12.5px; font-weight: 600; }
.stat small { font-size: 11px; }

.core { display: grid; place-items: center; min-height: 330px; padding: 0; overflow: hidden; }
.core canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.core .label { position: relative; text-align: center; pointer-events: none; }
.core .label b { display: block; font-size: 28px; font-weight: 300; letter-spacing: 0.32em; color: #d8fbff; text-shadow: 0 0 18px rgba(63, 208, 230, 0.55); }
.core .label span { font-size: 11px; letter-spacing: 0.3em; color: #7fd8e6; }
.corner { position: absolute; font-size: 11px; color: var(--muted); }
.corner b { color: var(--text); font-weight: 500; }
.corner.tl { top: 12px; left: 14px; }
.corner.tr { top: 12px; right: 14px; }
.corner.bl { bottom: 12px; left: 14px; }
.corner.br { bottom: 12px; right: 14px; }
.dot-private { color: var(--private); }
.dot-work { color: var(--work); }

.item { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 7px 0; border-bottom: 1px solid rgba(31, 66, 82, 0.5); }
.item:last-child { border-bottom: none; }
.who { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; font-size: 10px; font-weight: 600; }
.who.claude { background: rgba(63, 208, 230, 0.15); color: var(--cyan); }
.who.marcel { background: rgba(240, 169, 75, 0.15); color: var(--work); }
.tt { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.item small,
.row small { display: block; font-size: 11px; color: var(--muted); }
.empty { padding: 14px 0; color: var(--muted); text-align: center; }

.projects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.proj {
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--area, var(--line));
  border-radius: 9px;
  background: rgba(8, 18, 26, 0.6);
  text-align: left;
  cursor: pointer;
}
.proj:hover { border-color: var(--cyan); border-left-color: var(--area); }
.proj b { display: block; overflow: hidden; font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; }
.st { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 11px; color: var(--muted); }
.st i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 6px var(--c); }

.row { display: grid; grid-template-columns: 44px 12px minmax(0, 1fr); gap: 8px; align-items: center; padding: 6px 0; }
.row .when { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.row .ring-dot { width: 9px; height: 9px; border: 2px solid var(--c); border-radius: 50%; }

.qc button,
.qa-info {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-bottom: 7px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(8, 18, 26, 0.6);
  text-align: left;
}
.qc button { cursor: pointer; }
.qc button:hover { border-color: var(--cyan); }
.qc span:first-child { width: 16px; color: var(--cyan); text-align: center; }
.qc em { margin-left: auto; font-size: 10px; font-style: normal; color: var(--muted); }

.rings { display: flex; justify-content: space-around; gap: 8px; padding-top: 4px; }
.ring { text-align: center; }
.ring svg { width: 78px; height: 78px; }
.ring div { margin-top: 2px; font-size: 11px; color: var(--muted); }

.tags { position: relative; height: 150px; }
.tags svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.access { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.acc { padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: rgba(8, 18, 26, 0.6); }
.acc b { display: block; font-size: 12px; }
.acc small { font-size: 11px; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.cards .proj { min-height: 64px; }
.tag { padding: 0 6px; border: 1px solid var(--line2); border-radius: 6px; font-size: 10.5px; color: var(--soft); }
.st .tag { box-shadow: none; }

.problems h3 .k { color: var(--warn); }
.problems ul { margin: 0; padding-left: 18px; }

.bottom { display: flex; align-items: center; gap: 12px; margin-top: auto; padding: 10px 0 12px; border-top: 1px solid var(--line); }
.talk { display: flex; align-items: center; gap: 14px; margin: 0 auto; padding: 7px 22px; border: 1px solid var(--cyan); border-radius: 999px; box-shadow: 0 0 22px rgba(63, 208, 230, 0.18), inset 0 0 18px rgba(63, 208, 230, 0.08); }
.talk b { font-size: 12px; letter-spacing: 0.2em; color: #bff3fb; }
.talk small { font-size: 11px; color: var(--muted); }
.wave { display: flex; align-items: center; gap: 2px; height: 18px; }
.wave i { width: 2px; border-radius: 1px; background: var(--cyan); opacity: 0.7; animation: wave 1.4s ease-in-out infinite; }
@keyframes wave { 50% { transform: scaleY(0.3); } }
.foot { display: flex; gap: 16px; font-size: 11px; color: var(--muted); }

/* note drawer */
.drawer-backdrop { position: fixed; inset: 0; background: rgba(2, 6, 10, 0.55); }
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(520px, 100vw);
  overflow: auto;
  padding: 22px 24px;
  border-left: 1px solid var(--line2);
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  box-shadow: -20px 0 40px rgba(0, 0, 0, 0.45);
}
.drawer[hidden],
.drawer-backdrop[hidden] { display: none; }
.drawer h2 { margin: 6px 36px 6px 0; font-size: 21px; font-weight: 500; }
.drawer .path { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12px; color: var(--muted); }
.drawer .meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; font-size: 12px; color: var(--muted); }
.drawer .body { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.6; }
.close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border: 1px solid var(--line2); border-radius: 8px; background: none; color: var(--muted); font-size: 20px; cursor: pointer; }
.close:hover { border-color: var(--cyan); color: var(--text); }

@media (max-width: 1100px) {
  .app { grid-template-columns: 1fr; }
  .side { flex-direction: row; flex-wrap: wrap; align-items: center; border-right: none; border-bottom: 1px solid var(--line); }
  .brand { border-bottom: none; padding-bottom: 4px; }
  .nav { flex-direction: row; flex-wrap: wrap; }
  .voice { display: none; }
  .grid,
  .grid2,
  .grid3 { grid-template-columns: 1fr; }
  .top { flex-wrap: wrap; }
  .search { flex: 1 1 200px; width: auto; }
  .projects { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  .bottom { flex-direction: column; }
}

/* Login page of the cockpit on the server (overview/login.html). */
.login-page { min-height: 100vh; }
.login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  background:
    linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 48px 48px;
  background-blend-mode: normal;
}
.login::before {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(600px 420px at 50% 42%, transparent 0%, var(--bg) 78%);
  pointer-events: none;
}
.login-panel { position: relative; width: min(400px, 100%); padding: 28px 26px 18px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); }
.login-head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.login-head h1 { margin: 2px 0 0; font-size: 22px; font-weight: 300; letter-spacing: 0.02em; }
.login-mark { position: relative; display: grid; place-items: center; width: 52px; height: 52px; }
.login-mark .mark { width: 38px; height: 38px; }
.login-mark::before,
.login-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--cyan);
  border-radius: 50%;
  opacity: 0;
  animation: login-pulse 3.2s ease-out infinite;
}
.login-mark::after { animation-delay: 1.6s; }
@keyframes login-pulse {
  0% { transform: scale(0.75); opacity: 0.5; }
  100% { transform: scale(1.35); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .login-mark::before, .login-mark::after { animation: none; }
}
.login-form { display: grid; gap: 16px; }
.login-field { display: grid; gap: 6px; }
.login-field small { font-size: 11px; line-height: 1.4; }
.login-field input {
  font: inherit;
  font-size: 15px;
  color: var(--text);
  background: rgba(6, 11, 16, 0.8);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 12px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.login-field input::placeholder { color: var(--muted); opacity: 0.5; letter-spacing: 0.2em; }
.login-field input:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px var(--cyan-soft); }
.has-error .login-field input { border-color: var(--warn); }
.login-button {
  margin-top: 4px;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bg);
  background: linear-gradient(180deg, #5fe0f2, var(--cyan));
  border: 0;
  border-radius: 8px;
  padding: 12px;
  cursor: pointer;
  box-shadow: 0 0 18px var(--cyan-soft);
  transition: filter 0.15s, transform 0.05s;
}
.login-button:hover { filter: brightness(1.08); }
.login-button:active { transform: translateY(1px); }
.login-button:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.login-button:disabled { cursor: progress; filter: saturate(0.4) brightness(0.8); }
.login-message { min-height: 1.3em; margin: 0; font-size: 12.5px; color: var(--warn); }
.login-foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 11px; }
.login-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--active); box-shadow: 0 0 8px var(--active); }