1|:root {
     2|  --hq-bg: #050812;
     3|  --hq-bg-2: #08111f;
     4|  --hq-surface: #0d1728;
     5|  --hq-surface-2: #111d31;
     6|  --hq-surface-3: #17243a;
     7|  --hq-border: #203149;
     8|  --hq-border-soft: rgba(255,255,255,0.07);
     9|  --hq-text: #eef5ff;
    10|  --hq-muted: #8493aa;
    11|  --hq-orange: #ff7a18;
    12|  --hq-orange-2: #ff9a3d;
    13|  --hq-blue: #60a5fa;
    14|  --hq-green: #31d0aa;
    15|  --hq-red: #ff5f69;
    16|  --hq-shadow: 0 24px 60px rgba(0,0,0,0.45);
    17|}
    18|
    19|* { box-sizing: border-box; }
    20|html, body { min-height: 100%; }
    21|body {
    22|  margin: 0;
    23|  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    24|  color: var(--hq-text);
    25|  background: radial-gradient(circle at 20% 0%, rgba(255,122,24,0.08), transparent 28%), var(--hq-bg);
    26|}
    27|a { color: inherit; text-decoration: none; }
    28|pre { margin: 0; }
    29|.mono, code, pre { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }
    30|.muted { color: var(--hq-muted); }
    31|
    32|.hq-grid-bg::before {
    33|  content: "";
    34|  position: fixed;
    35|  inset: 0;
    36|  pointer-events: none;
    37|  background-image:
    38|    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    39|    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    40|  background-size: 18px 18px;
    41|  mask-image: linear-gradient(to bottom, black, rgba(0,0,0,0.55));
    42|  z-index: -2;
    43|}
    44|
    45|.app-shell { display: flex; min-height: 100vh; }
    46|.hq-sidebar {
    47|  width: 248px;
    48|  background: linear-gradient(180deg, #111d31, #0b1424 60%, #07101e);
    49|  border-right: 1px solid var(--hq-border);
    50|  padding: 18px 14px;
    51|  position: fixed;
    52|  inset: 0 auto 0 0;
    53|  display: flex;
    54|  flex-direction: column;
    55|  box-shadow: var(--hq-shadow);
    56|}
    57|.brand-block { display: flex; align-items: center; gap: 12px; }
    58|.brand-mark {
    59|  width: 38px;
    60|  height: 38px;
    61|  border-radius: 12px;
    62|  display: grid;
    63|  place-items: center;
    64|  background: linear-gradient(135deg, var(--hq-orange), #ffb86b);
    65|  color: #160900;
    66|  font-weight: 900;
    67|  letter-spacing: -0.08em;
    68|  box-shadow: 0 0 28px rgba(255,122,24,0.3);
    69|}
    70|.brand-title { font-weight: 800; letter-spacing: -0.03em; }
    71|.brand-subtitle { color: var(--hq-muted); font-size: 12px; }
    72|.new-session-btn {
    73|  margin: 18px 0 14px;
    74|  border-radius: 10px;
    75|  background: var(--hq-orange);
    76|  color: #1a0c00;
    77|  font-weight: 800;
    78|  padding: 10px 12px;
    79|  display: flex;
    80|  gap: 8px;
    81|  align-items: center;
    82|  justify-content: center;
    83|}
    84|.sidebar-nav { display: grid; gap: 4px; }
    85|.sidebar-nav .nav-link {
    86|  border-radius: 10px;
    87|  color: var(--hq-muted);
    88|  padding: 10px 12px;
    89|  display: flex;
    90|  align-items: center;
    91|  gap: 10px;
    92|  font-size: 14px;
    93|  border: 1px solid transparent;
    94|}
    95|.sidebar-nav .nav-link:hover,
    96|.sidebar-nav .nav-link.active {
    97|  background: rgba(255,122,24,0.12);
    98|  border-color: rgba(255,122,24,0.24);
    99|  color: var(--hq-text);
   100|}
   101|.sidebar-footer { margin-top: auto; }
   102|.hq-main { margin-left: 248px; width: calc(100% - 248px); padding: 20px 24px 32px; }
   103|.topbar {
   104|  display: flex;
   105|  align-items: flex-start;
   106|  justify-content: space-between;
   107|  gap: 18px;
   108|  margin-bottom: 18px;
   109|  border-bottom: 1px solid var(--hq-border-soft);
   110|  padding-bottom: 18px;
   111|}
   112|.crumb { color: var(--hq-muted); font-size: 12px; margin-bottom: 6px; }
   113|.topbar h1 { margin: 0; font-size: 34px; letter-spacing: -0.05em; font-weight: 850; }
   114|.topbar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
   115|.status-pill {
   116|  display: inline-flex;
   117|  align-items: center;
   118|  gap: 8px;
   119|  color: var(--hq-muted);
   120|  border: 1px solid var(--hq-border);
   121|  background: rgba(13,23,40,0.75);
   122|  border-radius: 999px;
   123|  padding: 7px 10px;
   124|  font-size: 12px;
   125|}
   126|.pulse-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--hq-green); box-shadow: 0 0 16px var(--hq-green); }
   127|.flash-stack { display: grid; gap: 8px; margin-bottom: 16px; }
   128|
   129|.hq-card,
   130|.metric-card,
   131|.task-card,
   132|.login-card {
   133|  background: linear-gradient(180deg, rgba(17,29,49,0.94), rgba(8,17,31,0.96));
   134|  border: 1px solid var(--hq-border);
   135|  border-radius: 16px;
   136|  box-shadow: 0 14px 36px rgba(0,0,0,0.24);
   137|}
   138|.hq-card { padding: 18px; }
   139|.card-kicker, .section-heading, .column-title {
   140|  color: var(--hq-muted);
   141|  font-size: 12px;
   142|  font-weight: 800;
   143|  text-transform: uppercase;
   144|  letter-spacing: 0.08em;
   145|  display: flex;
   146|  justify-content: space-between;
   147|  gap: 10px;
   148|  margin-bottom: 14px;
   149|}
   150|.dashboard-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
   151|.span-2 { grid-column: span 2; }
   152|.span-3 { grid-column: 1 / -1; }
   153|.core-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
   154|.core-card h2 { font-size: 18px; margin: 0 0 3px; }
   155|.core-card p { color: var(--hq-muted); margin: 0; }
   156|.health-score { font-size: 26px; font-weight: 900; color: var(--hq-orange); font-family: "JetBrains Mono", monospace; }
   157|.meter { height: 6px; border-radius: 999px; background: #07101d; overflow: hidden; margin: 22px 0; border: 1px solid var(--hq-border); }
   158|.meter-fill { display: block; width: 68%; height: 100%; background: linear-gradient(90deg, var(--hq-orange), var(--hq-orange-2)); }
   159|.metric-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
   160|.metric-strip div { border: 1px solid var(--hq-border-soft); border-radius: 12px; padding: 12px; background: rgba(255,255,255,0.02); }
   161|.metric-strip strong { display: block; font-size: 18px; }
   162|.metric-strip span { color: var(--hq-muted); font-size: 12px; }
   163|.system-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
   164|.system-list li { display: grid; gap: 5px; padding-bottom: 10px; border-bottom: 1px solid var(--hq-border-soft); }
   165|.system-list code { color: var(--hq-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
   166|.metric-card { padding: 16px; display: grid; gap: 4px; transition: transform 140ms ease, border-color 140ms ease; }
   167|.metric-card:hover { transform: translateY(-2px); border-color: rgba(255,122,24,0.55); }
   168|.metric-card span { color: var(--hq-muted); font-size: 12px; text-transform: uppercase; font-weight: 800; letter-spacing: .08em; }
   169|.metric-card strong { font-size: 30px; letter-spacing: -0.05em; }
   170|.metric-card small { color: var(--hq-muted); }
   171|.terminal-card pre, .cli-output {
   172|  background: #050a13;
   173|  border: 1px solid var(--hq-border);
   174|  border-radius: 12px;
   175|  padding: 14px;
   176|  color: #9ec7ff;
   177|  max-height: 410px;
   178|  overflow: auto;
   179|  font-size: 12px;
   180|}
   181|
   182|.chat-layout { max-width: 980px; }
   183|.chat-panel { min-height: calc(100vh - 170px); display: flex; flex-direction: column; padding: 0; overflow: hidden; }
   184|.chat-log { flex: 1; overflow: auto; padding: 22px; display: flex; flex-direction: column; gap: 14px; }
   185|.chat-message { display: flex; gap: 10px; align-items: flex-start; }
   186|.chat-message.user { flex-direction: row-reverse; }
   187|.avatar { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--hq-surface-3); color: var(--hq-orange); font-weight: 900; font-size: 12px; }
   188|.bubble { max-width: min(760px, 78%); border: 1px solid var(--hq-border); background: #0a1322; border-radius: 14px; padding: 13px 15px; color: #d8e6f7; white-space: pre-wrap; }
   189|.chat-message.user .bubble { background: rgba(255,122,24,0.13); border-color: rgba(255,122,24,0.35); }
   190|.chat-composer { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 14px; border-top: 1px solid var(--hq-border); background: rgba(6,12,22,0.8); }
   191|
   192|.memory-toolbar { margin-bottom: 16px; }
   193|.memory-add-form { display: grid; grid-template-columns: 180px 1fr auto; gap: 10px; align-items: stretch; }
   194|.memory-columns { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; align-items: start; }
   195|.memory-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
   196|.memory-card { padding: 14px; }
   197|.memory-card-head, .task-head, .task-meta, .task-actions, .card-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
   198|.memory-card-head { color: var(--hq-muted); font-size: 12px; margin-bottom: 10px; }
   199|.memory-textarea { min-height: 160px; font-size: 12px; }
   200|.card-actions { margin-top: 10px; }
   201|.empty-state, .empty-column { border: 1px dashed var(--hq-border); border-radius: 14px; color: var(--hq-muted); padding: 18px; text-align: center; }
   202|
   203|.kanban-create { margin-bottom: 16px; }
   204|.kanban-create-form { display: grid; grid-template-columns: minmax(180px,1.2fr) 170px 80px minmax(240px,2fr) auto; gap: 10px; align-items: start; }
   205|.short-input { max-width: 90px; }
   206|.kanban-board { display: grid; grid-template-columns: repeat(4, minmax(250px, 1fr)); gap: 14px; overflow-x: auto; padding-bottom: 10px; }
   207|.kanban-column { min-width: 250px; background: rgba(5,10,19,0.58); border: 1px solid var(--hq-border-soft); border-radius: 16px; padding: 12px; }
   208|.task-card { padding: 14px; margin-bottom: 12px; border-radius: 14px; }
   209|.task-card h3 { font-size: 15px; line-height: 1.35; margin: 8px 0; }
   210|.task-card p { color: var(--hq-muted); font-size: 13px; margin-bottom: 10px; }
   211|.task-id, .priority { color: var(--hq-muted); font-family: "JetBrains Mono", monospace; font-size: 11px; }
   212|.task-meta { color: var(--hq-muted); font-size: 12px; padding-top: 8px; border-top: 1px solid var(--hq-border-soft); margin-top: 8px; }
   213|.task-actions { justify-content: flex-start; margin-top: 10px; }
   214|.task-actions form { margin: 0; }
   215|.search-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-bottom: 16px; }
   216|.settings-card { display: grid; gap: 10px; }
   217|.setting-row { display: grid; grid-template-columns: 240px 1fr; gap: 12px; padding: 12px; border: 1px solid var(--hq-border-soft); border-radius: 12px; }
   218|.setting-row span { color: var(--hq-muted); font-weight: 800; }
   219|.setting-row code { color: #b9c7db; overflow-wrap: anywhere; }
   220|
   221|.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
   222|.login-card { width: min(430px, 100%); padding: 28px; }
   223|.login-brand { margin-bottom: 22px; }
   224|
   225|@media (max-width: 1100px) {
   226|  .dashboard-grid { grid-template-columns: 1fr 1fr; }
   227|  .span-3 { grid-column: 1 / -1; }
   228|  .memory-columns { grid-template-columns: 1fr; }
   229|  .kanban-board { grid-template-columns: repeat(2, minmax(250px, 1fr)); }
   230|  .kanban-create-form, .memory-add-form { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .hq-sidebar { position: static; width: 100%; min-height: auto; }
  .app-shell { display: block; }
  .hq-main { margin-left: 0; width: 100%; padding: 16px; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .metric-strip { grid-template-columns: 1fr; }
  .kanban-board { grid-template-columns: 1fr; }
  .topbar { flex-direction: column; }
}

/* Context badge */
.context-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  border: 1.5px solid var(--hq-orange);
  font-size: .75rem;
  font-weight: 600;
  color: var(--hq-text);
  background: rgba(255,122,24,.08);
  cursor: default;
  white-space: nowrap;
  overflow: hidden;
  max-width: 200px;
  text-overflow: ellipsis;
}