:root {
  color-scheme: dark;
  /* VSCode-like gray-black (matte) theme */
  --bg: #08090c;
  --surface: #121419;
  --surface-raised: #1b1e24;
  --surface-soft: #15181d;
  --sidebar: #0a0b0e;
  --sidebar-soft: #16181d;
  --sidebar-line: rgba(255, 255, 255, 0.07);
  --line: rgba(255,255,255,0.07);
  --line-strong: rgba(255,255,255,0.14);
  --text: #eceef2;
  --muted: #9499a2;
  --muted-strong: #c8c8c8;
  --blue: #22d3ee;
  --blue-dark: #5fe3f5;
  --green: #4ec973;
  --amber: #cca700;
  --red: #f14c4c;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.3);
  --radius: 8px;
  font-family: "Inter Variable", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.lock-screen {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 20px;
  background: var(--bg);
}

.lock-screen[hidden],
.page[hidden] {
  display: none;
}

.lock-panel {
  display: grid;
  gap: 16px;
  width: min(440px, 100%);
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

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

.sidebar,
.agent-panel {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 22px;
}

.sidebar {
  border-right: 1px solid var(--sidebar-line);
  background: var(--sidebar);
  color: #f7f9fb;
}

.agent-panel {
  border-left: 1px solid var(--line);
  background: #f8fafc;
  overflow-y: auto;
}

.workspace {
  width: 100%;
  padding: 30px max(30px, calc((100% - 1440px) / 2));
}

/* Desktop app-shell: lock the viewport, only the workspace scrolls */
@media (min-width: 1181px) {
  html,
  body {
    height: 100%;
    overflow: hidden;
  }
  .shell {
    height: 100dvh;
    overflow: hidden;
  }
  .workspace {
    height: 100%;
    min-height: 0;
    overflow-y: auto;
  }
  /* the pinned header sticks at the workspace content-box top (below its 30px
     top padding); a sticky box can't paint above itself, so a pseudo fills that
     gap with the page bg — otherwise scrolling cards peek through above it */
  .workspace .lc-sticky::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -40px;
    height: 40px;
    background: var(--bg);
  }
}

/* Slim matte scrollbars (VSCode-like) */
.workspace {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}
.workspace::-webkit-scrollbar,
.agent-panel::-webkit-scrollbar {
  width: 12px;
}
.workspace::-webkit-scrollbar-track,
.agent-panel::-webkit-scrollbar-track {
  background: transparent;
}
.workspace::-webkit-scrollbar-thumb,
.agent-panel::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}
.workspace::-webkit-scrollbar-thumb:hover,
.agent-panel::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.26);
  background-clip: content-box;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-mark {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  font-weight: 800;
  color: var(--text);
  box-shadow: var(--shadow-soft);
}

.brand strong,
.brand span {
  display: block;
}

.brand span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.sidebar .brand-mark {
  border-color: transparent;
  background: var(--blue);
  color: #fff;
}

.sidebar .brand span {
  color: rgba(247, 249, 251, 0.62);
}

.nav-list {
  display: grid;
  gap: 5px;
}

.nav-link {
  position: relative;
  min-height: 38px;
  padding: 10px 12px 10px 14px;
  border-radius: var(--radius);
  color: rgba(247, 249, 251, 0.68);
  text-decoration: none;
  font-weight: 650;
}

.nav-link:hover,
.nav-link.active {
  background: var(--sidebar-soft);
  color: #ffffff;
}

.nav-link.active::before {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 6px;
  width: 3px;
  border-radius: 999px;
  background: var(--blue);
  content: "";
}

.security-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: auto;
  padding: 12px;
  border: 1px solid var(--sidebar-line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(247, 249, 251, 0.68);
  font-size: 12px;
  line-height: 1.45;
}

.dot {
  width: 8px;
  height: 8px;
  margin-top: 4px;
  border-radius: 999px;
  background: var(--green);
  flex: 0 0 auto;
}

.page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 18px;
  padding: 4px 0 14px;
  border-bottom: 1px solid var(--line);
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 8px;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.022em;
}

h2 {
  margin-bottom: 12px;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: 0;
}

.subtle {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.panel-wide {
  grid-column: span 2;
}

.panel,
.stats-grid > article,
.response-box,
.decision-box {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.panel {
  min-width: 0;
  padding: 17px;
}

.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.panel-heading h2 {
  margin-bottom: 0;
}

.panel-subtitle {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.filter-row select {
  width: auto;
  min-width: 130px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.stats-grid article {
  position: relative;
  padding: 15px 16px;
  background: var(--surface);
  transition: border-color 0.15s;
}
.stats-grid article:hover { border-color: var(--line-strong); }

.stats-grid article::before {
  content: none;
}

.stats-grid strong {
  display: block;
  font-size: 27px;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.stats-grid span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.composer,
.settings-form {
  display: grid;
  gap: 12px;
}

label {
  display: grid;
  gap: 7px;
  color: var(--muted-strong);
  font-size: 13px;
  font-weight: 700;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface-raised);
  color: var(--text);
  outline: none;
  box-shadow: var(--shadow-soft);
}

input,
select {
  min-height: 40px;
  padding: 0 12px;
}

textarea {
  min-height: 104px;
  padding: 12px;
  resize: vertical;
  line-height: 1.55;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(10, 102, 194, 0.14);
}

.actions-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.checkbox-line {
  display: flex;
  align-items: center;
  gap: 8px;
}

.checkbox-line input {
  width: auto;
  min-height: auto;
}

.primary-button,
.secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-weight: 700;
  text-decoration: none;
}

.primary-button {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 6px 16px rgba(211, 173, 88, 0.25);
}

.secondary-button {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--text);
}

.primary-button:hover {
  background: var(--blue-dark);
}

.secondary-button:hover {
  border-color: var(--muted);
  background: var(--surface-soft);
}

.primary-button:disabled,
.secondary-button:disabled {
  cursor: default;
  opacity: 0.58;
}

.item-list {
  display: grid;
  gap: 10px;
}

.item-list.empty {
  display: grid;
  place-items: center;
  min-height: 88px;
  padding: 22px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 13.5px;
  text-align: center;
}

.item-card {
  display: grid;
  gap: 7px;
  padding: 14px 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  transition: border-color 0.15s;
}
.item-card:hover { border-color: var(--line-strong); }
.item-card > p:first-child strong { font-size: 14px; font-weight: 600; color: var(--text); }

.item-card.risk-medium {
  border-color: rgba(154, 91, 9, 0.55);
}

.item-card.risk-high {
  border-color: rgba(255, 107, 97, 0.5);
  background: rgba(255, 107, 97, 0.1);
}

.item-card p {
  margin: 0;
  line-height: 1.5;
  color: var(--muted-strong);
  font-size: 13px;
}
.item-card > p:not(:first-child) {
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.item-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
  font-size: 11px;
}

.item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.item-actions .secondary-button { min-height: 30px; padding: 0 12px; font-size: 13px; }

.message {
  min-height: 20px;
  margin: 0;
  color: var(--red);
  font-size: 13px;
}

.brief-box {
  min-height: 130px;
  margin: 0;
  padding: 13px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
  color: var(--text);
  white-space: pre-wrap;
  font-family: inherit;
  line-height: 1.5;
}

.response-box,
.decision-box {
  padding: 12px;
  color: var(--text);
  white-space: pre-wrap;
  line-height: 1.5;
}

.decision-box {
  background: #eef4ff;
  color: var(--muted);
  font-size: 13px;
}

.agent-panel .response-box {
  min-height: 140px;
}

.agent-panel .secondary-button {
  margin-top: auto;
}

@media (max-width: 1180px) {
  .shell {
    grid-template-columns: 210px minmax(0, 1fr);
  }

  .agent-panel {
    position: static;
    grid-column: 1 / -1;
    height: auto;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 780px) {
  .shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .nav-list {
    display: flex;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .nav-link {
    flex: 0 0 auto;
  }

  .nav-link.active::before {
    top: auto;
    right: 12px;
    bottom: 6px;
    left: 12px;
    width: auto;
    height: 3px;
  }

  .workspace {
    padding: 18px 14px;
  }

  .page-header,
  .actions-row,
  .panel-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .filter-row {
    justify-content: stretch;
  }

  .filter-row select {
    width: 100%;
  }

  .dashboard-grid,
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .panel-wide {
    grid-column: auto;
  }
}

/* ===== Hermes chat (Agent Gateway) ===== */
.agent-panel {
  padding: 0;
  gap: 0;
  background: var(--surface);
}
.hermes-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-shrink: 0;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.hermes-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hermes-avatar {
  display: grid; place-items: center;
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), #ecd089);
  color: #fff; font-size: 15px;
}
.hermes-id-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.hermes-id-text strong { font-size: 15px; }
.hermes-sub { font-size: 11px; color: var(--muted); }
.hermes-lock {
  border: 1px solid var(--line); background: var(--surface-soft);
  border-radius: 8px; padding: 6px 9px; font-size: 13px; line-height: 1;
}
.hermes-lock:hover { background: var(--line); }

.hermes-thread {
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 14px;
  padding: 16px;
  background: var(--bg);
}

.hermes-empty {
  margin: auto; text-align: center; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 20px 8px;
}
.hermes-empty-mark {
  display: grid; place-items: center; width: 46px; height: 46px;
  border-radius: 50%; background: linear-gradient(135deg, var(--blue), #ecd089);
  color: #fff; font-size: 22px; margin-bottom: 6px;
}
.hermes-empty h3 { font-size: 16px; color: var(--text); margin: 0; }
.hermes-empty p { font-size: 13px; margin: 0; max-width: 240px; }
.hermes-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }
.hermes-chip {
  border: 1px solid var(--line-strong); background: var(--surface);
  border-radius: 16px; padding: 6px 12px; font-size: 12px; color: var(--muted-strong);
  box-shadow: var(--shadow-soft);
}
.hermes-chip:hover { border-color: var(--blue); color: var(--blue); }

.hermes-msg { display: flex; gap: 8px; max-width: 100%; align-items: flex-start; }
.hermes-msg.user { justify-content: flex-end; }
.bot-avatar {
  flex-shrink: 0; display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), #ecd089); color: #20180a; font-size: 12px;
  margin-top: 2px;
}
.bot-avatar.err { background: var(--red); }
.hermes-bubble {
  max-width: 84%; padding: 9px 13px; border-radius: 16px;
  font-size: 14px; line-height: 1.55; word-wrap: break-word; overflow-wrap: anywhere;
}
.hermes-msg.user .hermes-bubble {
  background: var(--blue); color: #20180a; border-radius: 16px 16px 4px 16px;
}
.hermes-msg.bot .hermes-bubble {
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line); border-radius: 16px 16px 16px 4px;
  box-shadow: var(--shadow-soft);
}
.hermes-bubble.err { border-color: var(--red); color: var(--red); background: rgba(255, 107, 97, 0.12); }
.hermes-bubble .md > :first-child { margin-top: 0; }
.hermes-bubble .md > :last-child { margin-bottom: 0; }
.hermes-bubble .md p { margin: 6px 0; }
.hermes-bubble .md ul { margin: 6px 0; padding-left: 18px; }
.hermes-bubble .md li { margin: 2px 0; }
.hermes-bubble .md code {
  background: var(--surface-soft); border: 1px solid var(--line);
  border-radius: 5px; padding: 1px 5px; font-size: 12.5px;
}
.hermes-bubble .md a { color: var(--blue); }
.hermes-msg.user .hermes-bubble .md a { color: #fff; text-decoration: underline; }

.hermes-meta { margin-top: 7px; font-size: 11px; color: var(--muted); }
.hermes-meta summary { cursor: pointer; color: var(--muted); list-style: none; opacity: .7; }
.hermes-meta summary:hover { opacity: 1; }
.hermes-meta[open] { white-space: pre-wrap; }

.typing { display: inline-flex; gap: 4px; padding: 3px 2px; }
.typing i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--muted);
  animation: hermesblink 1.2s infinite ease-in-out both;
}
.typing i:nth-child(2) { animation-delay: .2s; }
.typing i:nth-child(3) { animation-delay: .4s; }
@keyframes hermesblink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

.hermes-compose {
  flex-shrink: 0; display: flex; align-items: flex-end; gap: 8px;
  margin: 12px; padding: 6px 6px 6px 14px;
  border: 1px solid var(--line-strong); border-radius: 22px;
  background: var(--surface); box-shadow: var(--shadow-soft);
}
.hermes-compose:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(211, 173, 88, .25); }
.hermes-compose textarea {
  flex: 1; border: 0; outline: none; box-shadow: none; background: transparent;
  resize: none; min-height: 24px; max-height: 140px; padding: 6px 0; line-height: 1.5;
  font-size: 14px; color: var(--text);
}
.hermes-send {
  flex-shrink: 0; display: grid; place-items: center;
  width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: var(--blue); color: #20180a;
}
.hermes-send:hover { background: var(--blue-dark); }
.hermes-send svg { display: block; }

@media (max-width: 1180px) {
  .agent-panel { height: auto; }
  .hermes-thread { max-height: 56vh; }
}

/* ===== Learning Center ===== */
.lc-shelf { margin-bottom: 30px; }
.lc-shelf-head { font-size: 14px; font-weight: 700; color: var(--text); margin: 0 0 13px; }
.lc-shelf { min-width: 0; }
.lc-row { display: flex; gap: 14px; overflow-x: auto; min-width: 0; padding-bottom: 10px; scroll-snap-type: x proximity; }
.lc-row::-webkit-scrollbar { height: 8px; }
.lc-row::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }
.lc-row::-webkit-scrollbar-track { background: transparent; }
.lc-card {
  flex: 0 0 196px; width: 196px; display: flex; flex-direction: column; gap: 9px;
  text-align: left; padding: 0; border: 0; background: none; cursor: pointer; color: var(--text);
  scroll-snap-align: start;
}
.lc-cover {
  position: relative;
  display: grid; place-items: center; aspect-ratio: 16 / 10; border-radius: 10px;
  border: 1px solid var(--line); box-shadow: var(--shadow-soft); overflow: hidden;
  background: linear-gradient(150deg, var(--surface-raised), var(--bg));
  transition: transform .15s, box-shadow .15s;
}
.lc-coll-cover { background: linear-gradient(150deg, #2b3442, #1d2128); }
.lc-cover-badge { position: absolute; right: 7px; bottom: 7px; background: rgba(0, 0, 0, 0.62); color: #fff; font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 5px; }
.lc-cover-vid { position: absolute; left: 7px; bottom: 7px; background: rgba(0, 0, 0, 0.5); border-radius: 5px; padding: 1px 5px; font-size: 11px; }
.lc-card:hover .lc-cover { transform: translateY(-3px); box-shadow: var(--shadow); }
.lc-cover-no { font-size: 38px; font-weight: 800; color: rgba(255, 255, 255, .92); text-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
.lc-cardbody { display: flex; flex-direction: column; gap: 6px; padding: 0 2px; }
.lc-card .lc-title { font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lc-no { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--blue); }
.lc-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.lc-pill { font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; background: var(--surface-soft); }
.lc-pill.p { color: var(--blue); border-color: rgba(211, 173, 88, .45); }
.lc-empty { color: var(--muted); }

.lc-back { background: none; border: 0; color: var(--muted); font-size: 13px; padding: 0; margin-bottom: 14px; cursor: pointer; }
.lc-back:hover { color: var(--text); }

/* Agent switch (Hermes / Claude) + Claude tool cards */
.agent-switch { display: flex; gap: 4px; margin: 12px 0 2px; padding: 3px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 10px; flex: none; }
.agent-tab { flex: 1; border: 0; background: transparent; color: var(--muted); font-size: 13px; font-weight: 600; padding: 6px 10px; border-radius: 7px; cursor: pointer; transition: background 0.15s, color 0.15s; }
.agent-tab:hover { color: var(--text); }
.agent-tab.on { background: var(--surface-raised); color: var(--text); box-shadow: var(--shadow-soft); }
.hermes-thread.mode-hermes .for-claude { display: none; }
.hermes-thread.mode-claude .for-hermes { display: none; }
.bot-avatar.claude { background: linear-gradient(135deg, #c96442, #a8432a); color: #fff; }
.hermes-empty-mark.claude-mark { background: linear-gradient(135deg, #c96442, #a8432a); }
.hermes-msg.tool, .hermes-msg.toolresult { align-items: flex-start; }
.claude-tool { display: flex; gap: 8px; align-items: baseline; width: 100%; padding: 7px 11px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 8px; font-size: 12.5px; min-width: 0; }
.claude-tool-name { font-weight: 600; color: var(--muted-strong); white-space: nowrap; flex: none; }
.claude-tool-arg { color: var(--muted); font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.claude-result { width: 100%; margin: 2px 0 2px 6px; font-size: 12px; }
.claude-result summary { color: var(--muted); cursor: pointer; padding: 2px 0; }
.claude-result summary:hover { color: var(--text); }
.claude-result pre { margin: 6px 0 0; padding: 8px 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; overflow-x: auto; font-size: 11.5px; line-height: 1.5; max-height: 260px; white-space: pre-wrap; word-break: break-word; }
.claude-result.err pre { border-color: var(--red); }

/* claude-only controls show only in Claude mode */
.agent-panel:not(.panel-claude) .claude-only { display: none !important; }

/* Claude session bar (history / title / perm / new) */
.claude-sessionbar { position: relative; display: flex; align-items: center; gap: 8px; margin: 6px 0 0; padding: 5px 8px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 8px; flex: none; }
.cs-btn { border: 0; background: transparent; color: var(--muted); font-size: 16px; line-height: 1; padding: 3px 7px; border-radius: 6px; cursor: pointer; flex: none; }
.cs-btn:hover { color: var(--text); background: var(--surface-raised); }
.cs-title { flex: 1; min-width: 0; font-size: 12.5px; color: var(--muted-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-perm { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--muted); flex: none; }
.cs-perm select { background: var(--surface-raised); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 2px 5px; font-size: 12px; cursor: pointer; }
.cs-history { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 9; max-height: 300px; overflow-y: auto; background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: 8px; box-shadow: var(--shadow); padding: 4px; }
.cs-hist-item { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.cs-hist-item:hover, .cs-hist-item.on { background: var(--surface-soft); }
.cs-hist-title { flex: 1; min-width: 0; font-size: 12.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-hist-del { border: 0; background: transparent; color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer; padding: 0 4px; flex: none; }
.cs-hist-del:hover { color: var(--red); }
.cs-hist-empty { padding: 12px; text-align: center; color: var(--muted); font-size: 12px; }

/* stop button (mirrors send button size) */
.hermes-stop { display: inline-flex; align-items: center; justify-content: center; border: 0; background: var(--red); color: #fff; border-radius: 10px; width: 40px; height: 40px; cursor: pointer; flex: none; align-self: flex-end; }
.hermes-stop:hover { filter: brightness(1.12); }

/* ===== Work · AI-coding workspace ===== */
.page-work { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.work-switch { display: flex; gap: 6px; flex: none; margin: 0 0 12px; }
.work-tab { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 9px; cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s; }
.work-tab:hover { color: var(--text); border-color: var(--line-strong); }
.work-tab.on { color: var(--text); background: var(--surface-raised); border-color: var(--line-strong); }
.wt-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.wt-claude { background: #c96442; }
.wt-codex { background: #10a37f; }
.wt-gemini { background: #4486f4; }
.wt-term { background: #8a8a92; }

.work-body { flex: 1; min-height: 0; position: relative; }
.work-pane { height: 100%; }

.wc { height: 100%; display: flex; flex-direction: column; min-height: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.wc-head { position: relative; flex: none; display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--line); background: var(--surface-soft); }
.wc-head-title { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--muted-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wc-head-actions { display: flex; gap: 4px; flex: none; }
.wc-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 0; background: transparent; color: var(--muted); border-radius: 7px; cursor: pointer; }
.wc-icon:hover { color: var(--text); background: var(--surface-raised); }
.wc-history { position: absolute; top: calc(100% + 4px); right: 12px; width: 280px; z-index: 9; max-height: 340px; overflow-y: auto; background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: 8px; box-shadow: var(--shadow); padding: 4px; }
.wc-hist-item { display: flex; align-items: center; gap: 6px; padding: 7px 9px; border-radius: 6px; cursor: pointer; }
.wc-hist-item:hover, .wc-hist-item.on { background: var(--surface-soft); }
.wc-hist-t { flex: 1; min-width: 0; font-size: 12.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wc-hist-del { border: 0; background: transparent; color: var(--muted); font-size: 15px; cursor: pointer; padding: 0 4px; flex: none; }
.wc-hist-del:hover { color: var(--red); }
.wc-hist-empty { padding: 12px; text-align: center; color: var(--muted); font-size: 12px; }

.wc-thread { flex: 1; min-height: 200px; overflow-y: auto; padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.wc-empty { margin: auto; text-align: center; color: var(--muted); max-width: 360px; }
.wc-empty-mark { width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 14px; display: grid; place-items: center; font-size: 26px; color: #fff; background: linear-gradient(135deg, #c96442, #a8432a); }
.wc-empty h2 { margin: 0 0 6px; color: var(--text); font-size: 18px; }
.wc-empty p { margin: 0; font-size: 13px; line-height: 1.6; }
.wc-msg { display: flex; flex-direction: column; }
.wc-msg.user { align-items: flex-end; }
.wc-msg.user .wc-bubble { background: var(--blue); color: #20180a; }
.wc-bubble { max-width: 82%; padding: 9px 13px; border-radius: 12px; background: var(--surface-raised); font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.wc-bubble.err { background: transparent; border: 1px solid var(--red); color: var(--red); }
.wc-md { font-size: 13.5px; line-height: 1.65; color: var(--text); }
.wc-md p { margin: 0 0 8px; }
.wc-md p:last-child { margin-bottom: 0; }
.wc-md code { background: var(--surface-raised); padding: 1px 5px; border-radius: 4px; font-size: 12.5px; }
.wc-md ul { margin: 6px 0; padding-left: 20px; }
.wc-msg.tool .wc-tool { display: flex; align-items: baseline; gap: 8px; padding: 8px 12px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 9px; font-size: 12.5px; }
.wc-tool-ic { flex: none; }
.wc-tool-name { font-weight: 600; color: var(--muted-strong); flex: none; }
.wc-tool-arg { color: var(--muted); font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.wc-result { font-size: 12px; }
.wc-result summary { color: var(--muted); cursor: pointer; padding: 2px 0; }
.wc-result summary:hover { color: var(--text); }
.wc-result pre { margin: 6px 0 0; padding: 9px 11px; background: var(--bg); border: 1px solid var(--line); border-radius: 7px; overflow-x: auto; font-size: 11.5px; line-height: 1.5; max-height: 320px; white-space: pre-wrap; word-break: break-word; }
.wc-result.err pre { border-color: var(--red); }

.wc-compose { flex: none; border-top: 1px solid var(--line); padding: 12px 14px; background: var(--surface-soft); display: flex; flex-direction: column; gap: 8px; }
.wc-input-row { position: relative; display: flex; align-items: flex-end; background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: 12px; padding: 3px 4px 3px 14px; }
.wc-input-row textarea { flex: 1; resize: none; border: 0; background: transparent; color: var(--text); font-size: 14px; line-height: 1.5; padding: 9px 0; max-height: 200px; outline: none; box-shadow: none; }
.wc-input-row textarea:focus { outline: none; box-shadow: none; border-color: transparent; }
.wc-input-row:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(211, 173, 88, 0.12); }
.wc-mic { flex: none; border: 0; background: transparent; color: var(--muted); width: 34px; height: 34px; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; align-self: flex-end; }
.wc-mic:hover { color: var(--text); background: var(--surface-soft); }
.wc-toolbar { display: flex; align-items: center; gap: 8px; }
.wc-tbtn { width: 30px; height: 30px; border: 1px solid var(--line); background: var(--surface-raised); color: var(--muted); border-radius: 8px; cursor: pointer; font-size: 16px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.wc-tbtn:hover { color: var(--text); border-color: var(--line-strong); }
.wc-spacer { flex: 1; }
.wc-mode { display: inline-flex; align-items: center; gap: 4px; color: var(--amber); border: 1px solid var(--line); background: var(--surface-raised); border-radius: 8px; padding: 4px 6px 4px 9px; }
.wc-mode select { border: 0; background: transparent; color: var(--text); font-size: 12.5px; cursor: pointer; outline: none; }
.wc-send, .wc-stop { flex: none; border: 0; background: transparent; padding: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.wc-send { color: var(--blue); }
.wc-send:hover { color: var(--blue-dark); }
.wc-stop { color: var(--red); }

.work-soon-pane { height: 100%; }
.work-soon { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--muted); text-align: center; border: 1px dashed var(--line-strong); border-radius: 12px; }
.work-soon-mark { font-size: 34px; opacity: 0.55; }
.work-soon h2 { margin: 6px 0 0; color: var(--muted-strong); font-size: 18px; }
.work-soon p { margin: 0; font-size: 13px; }

/* Work·Claude — "alive" details: pulse logo / fade-in / avatar / thinking */
@keyframes wc-pulse { 0%, 100% { transform: scale(0.84); opacity: 0.5; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes wc-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.wc-msg { animation: wc-fade 0.22s ease; }
.wc-msg.bot { flex-direction: row; gap: 10px; align-items: flex-start; }
.wc-av { flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 14px; color: #fff; background: linear-gradient(135deg, #c96442, #a8432a); margin-top: 1px; }
.wc-av-pulse { animation: wc-pulse 1.15s ease-in-out infinite; }
.wc-working { align-items: center; }
.wc-working-text { font-size: 13px; color: var(--muted); }
.wc-msg.think { width: 100%; }
.wc-think { width: 100%; font-size: 12.5px; }
.wc-think summary { color: var(--muted); cursor: pointer; padding: 3px 0; font-style: italic; list-style: none; }
.wc-think summary::-webkit-details-marker { display: none; }
.wc-think summary::before { content: "▸ "; }
.wc-think[open] summary::before { content: "▾ "; }
.wc-think summary:hover { color: var(--muted-strong); }
.wc-think-body { margin: 6px 0 0; padding: 8px 12px; border-left: 2px solid var(--line-strong); color: var(--muted); font-size: 12.5px; line-height: 1.65; white-space: pre-wrap; word-break: break-word; opacity: 0.9; }

/* Work·Claude — Modes popover (permission modes) */
.wc-mode-wrap { position: relative; }
.wc-mode-btn { display: inline-flex; align-items: center; gap: 5px; color: var(--amber); border: 1px solid var(--line); background: var(--surface-raised); border-radius: 8px; padding: 5px 10px; font-size: 12.5px; cursor: pointer; }
.wc-mode-btn span { color: var(--text); }
.wc-mode-btn:hover { border-color: var(--line-strong); }
.wc-modes { position: absolute; bottom: calc(100% + 8px); right: 0; width: 322px; z-index: 12; background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: var(--shadow); padding: 6px; }
.wc-modes-h { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); padding: 6px 10px 4px; }
.wc-mode-opt { display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; border: 0; background: transparent; color: var(--text); padding: 9px 10px; border-radius: 8px; cursor: pointer; }
.wc-mode-opt:hover:not([disabled]) { background: var(--surface-soft); }
.wc-mode-opt.on { background: var(--surface-soft); }
.wc-mode-ic { flex: none; width: 20px; display: grid; place-items: center; color: var(--muted-strong); margin-top: 1px; }
.wc-mode-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wc-mode-tx b { font-size: 13px; font-weight: 600; }
.wc-mode-tx i { font-style: normal; font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.wc-mode-ck { flex: none; color: var(--blue); opacity: 0; align-self: center; }
.wc-mode-opt.on .wc-mode-ck { opacity: 1; }
.wc-mode-opt.is-soon { opacity: 0.5; cursor: default; }

/* Work·Claude — compose menus (+ / ) */
.wc-menu-wrap { position: relative; display: inline-flex; }
.wc-cmd-menu { position: absolute; bottom: calc(100% + 8px); left: 0; width: 244px; z-index: 12; background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: var(--shadow); padding: 6px; }
.wc-cmd-h { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); padding: 7px 10px 4px; }
.wc-cmd-h:not(:first-child) { margin-top: 4px; border-top: 1px solid var(--line); padding-top: 9px; }
.wc-cmd-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: transparent; color: var(--text); padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 13px; }
.wc-cmd-item:hover { background: var(--surface-soft); }
.wc-cmd-ic { flex: none; width: 18px; display: grid; place-items: center; font-size: 14px; }
.wc-cmd-tx { flex: 1; min-width: 0; }
.wc-cmd-hint { flex: none; font-size: 11px; color: var(--muted); }
.wc-cmd-soon { flex: none; font-size: 10.5px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; }

/* Work·Claude — Write/Edit/MultiEdit diff preview */
.wc-diff { margin: 7px 0 0 4px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.55; background: #161618; }
.wc-dl { display: flex; gap: 8px; padding: 0 10px; white-space: pre-wrap; word-break: break-word; }
.wc-dg { flex: none; width: 10px; color: var(--muted); user-select: none; text-align: center; }
.wc-dc { flex: 1; min-width: 0; }
.wc-dl.add { background: rgba(46, 160, 67, 0.15); }
.wc-dl.add .wc-dg, .wc-dl.add .wc-dc { color: #7ee787; }
.wc-dl.del { background: rgba(248, 81, 73, 0.15); }
.wc-dl.del .wc-dg, .wc-dl.del .wc-dc { color: #ffa198; }
.wc-dl.more { color: var(--muted); font-style: italic; padding: 3px 10px; }

/* System · 服务器资源概览 */
.srv-box { display: flex; flex-direction: column; gap: 14px; }
.srv-gauges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.srv-gauge { display: flex; flex-direction: column; gap: 7px; }
.srv-gauge-top { display: flex; align-items: baseline; justify-content: space-between; font-size: 13px; color: var(--muted); }
.srv-gauge-top b { font-size: 17px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.srv-bar { height: 8px; border-radius: 999px; background: var(--surface-soft); overflow: hidden; }
.srv-bar-fill { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--green); transition: width 0.5s ease; }
.srv-bar-fill.warn { background: var(--amber); }
.srv-bar-fill.crit { background: var(--red); }
.srv-gauge-sub { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.srv-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 12px; color: var(--muted); padding-top: 10px; border-top: 1px solid var(--line); }
.srv-meta span { white-space: nowrap; }
.srv-empty { color: var(--muted); font-size: 13px; }
@media (max-width: 720px) { .srv-gauges { grid-template-columns: 1fr; } }

/* Files · VPS file manager */
.fm { display: flex; flex-direction: column; gap: 12px; }
.fm-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: space-between; }
.fm-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 1px; min-width: 0; }
.fm-crumb { border: 0; background: transparent; color: var(--blue); cursor: pointer; padding: 2px 6px; border-radius: 6px; font-size: 13px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-crumb:hover { background: var(--surface-soft); }
.fm-crumb-sep { color: var(--muted); font-size: 12px; }
.fm-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fm-status { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px; align-self: center; }
.fm-status.is-err { color: var(--red); }
.fm-body { display: flex; gap: 14px; align-items: stretch; }
.fm-list { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface-raised); }
.fm-item { display: grid; grid-template-columns: 24px 1fr auto auto auto; align-items: center; gap: 12px; padding: 9px 14px; border-bottom: 1px solid var(--line); cursor: pointer; }
.fm-item:last-child { border-bottom: 0; }
.fm-item:hover { background: var(--surface-soft); }
.fm-ic { font-size: 15px; text-align: center; }
.fm-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-size: 13.5px; }
.fm-item.is-dir .fm-name { font-weight: 600; }
.fm-link { color: var(--muted); font-size: 11px; }
.fm-size, .fm-mtime { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fm-size { min-width: 64px; text-align: right; }
.fm-mtime { min-width: 122px; text-align: right; }
.fm-row-actions { display: flex; gap: 2px; opacity: 0; }
.fm-item:hover .fm-row-actions { opacity: 1; }
.fm-rua { border: 0; background: transparent; cursor: pointer; font-size: 13px; padding: 3px 7px; border-radius: 6px; color: var(--muted); }
.fm-rua:hover { background: var(--line); color: var(--text); }
.fm-empty, .fm-error { padding: 22px; color: var(--muted); font-size: 13px; }
.fm-error { color: var(--red); }
.fm-editor { flex: 1; min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface-raised); }
.fm-editor-head { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.fm-editor-name { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40%; }
.fm-editor-meta { font-size: 11.5px; color: var(--muted); }
.fm-spacer { flex: 1; }
.fm-editor textarea { flex: 1; min-height: 440px; border: 0; background: #161618; color: var(--text); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.6; padding: 12px 14px; resize: none; outline: none; white-space: pre; overflow: auto; }
@media (max-width: 900px) { .fm-body { flex-direction: column; } .fm-mtime { display: none; } }
.fm-trunc { padding: 8px 14px; font-size: 12px; color: var(--amber); border-bottom: 1px solid var(--line); background: rgba(204, 167, 0, 0.08); }

/* System · sub-tab switcher */
.sys-switch { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.sys-tab { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 13px; font-weight: 600; padding: 7px 16px; border-radius: 9px; cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s; }
.sys-tab:hover { color: var(--text); border-color: var(--line-strong); }
.sys-tab.on { color: var(--text); background: var(--surface-raised); border-color: var(--line-strong); }

/* System · 设置子标签 */
.set-form { display: flex; flex-direction: column; gap: 16px; }
.set-field { display: flex; flex-direction: column; gap: 6px; }
.set-label { font-size: 13px; font-weight: 600; color: var(--text); }
.set-select { background: var(--surface-raised); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 13px; cursor: pointer; }
.set-select:hover { border-color: var(--line-strong); }
.set-select:focus { outline: none; border-color: var(--blue); }
.set-hint { font-size: 12px; color: var(--muted); line-height: 1.4; }
.set-kv { display: flex; flex-direction: column; gap: 1px; }
.set-kv-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.set-kv-row:last-child { border-bottom: none; }
.set-kv-key { font-size: 13px; color: var(--muted); flex: 0 0 auto; }
.set-kv-val { font-size: 13px; color: var(--text); text-align: right; word-break: break-all; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }

/* Files · 文件夹收藏栏 */
.fm-fav { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 12px; }
.fm-fav-chip { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-raised); overflow: hidden; max-width: 240px; }
.fm-fav-chip.is-active { border-color: var(--blue); }
.fm-fav-go { border: 0; background: transparent; color: var(--blue); cursor: pointer; font-size: 12.5px; padding: 4px 4px 4px 12px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-fav-go:hover { background: var(--surface-soft); }
.fm-fav-x { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 14px; line-height: 1; padding: 4px 10px 4px 6px; }
.fm-fav-x:hover { color: var(--text); }
.fm-fav-star.is-on { color: var(--amber); opacity: 1; }
#fmFavAdd.is-on { color: var(--amber); border-color: var(--amber); }

/* Library · 影片播放器 */
.lc-video { margin: 14px 0 18px; }
.lc-video video { width: 100%; max-height: 70vh; border-radius: 10px; background: #000; display: block; }

/* Files · media viewer + upload affordances */
a.secondary-button { text-decoration: none; display: inline-flex; align-items: center; }
.fm-list.fm-drag { outline: 2px dashed var(--blue); outline-offset: -2px; background: rgba(211, 173, 88, 0.06); }
.fm-media { flex: 1; min-height: 440px; display: flex; align-items: center; justify-content: center; padding: 16px; background: #0e0e0f; overflow: auto; }
.fm-media img, .fm-media video { max-width: 100%; max-height: 70vh; border-radius: 6px; }
.fm-media audio { width: 100%; max-width: 520px; }
.fm-media-note { color: var(--muted); font-size: 13px; text-align: center; }

/* Work·Claude — tool running→done state + rich markdown + code blocks */
.wc-tool-st { flex: none; width: 16px; height: 16px; display: inline-grid; place-items: center; font-size: 12px; }
.wc-spin { border: 2px solid var(--line-strong); border-top-color: var(--blue); border-radius: 50%; animation: wc-spin 0.7s linear infinite; }
@keyframes wc-spin { to { transform: rotate(360deg); } }
.wc-st-ok { color: var(--green); font-weight: 700; }
.wc-st-err { color: var(--red); font-weight: 700; }
.wc-msg.tool .wc-result { margin: 7px 0 0 4px; }
.wc-md h1, .wc-md h2, .wc-md h3 { margin: 10px 0 6px; line-height: 1.3; font-weight: 700; }
.wc-md h1 { font-size: 18px; }
.wc-md h2 { font-size: 16px; }
.wc-md h3 { font-size: 14px; }
.wc-md ol { margin: 6px 0; padding-left: 22px; }
.wc-md li { margin: 2px 0; }
.wc-md a { color: var(--blue); }
.wc-md blockquote { margin: 6px 0; padding: 4px 12px; border-left: 3px solid var(--line-strong); color: var(--muted); }
.wc-md hr { border: 0; border-top: 1px solid var(--line); margin: 10px 0; }
.wc-md table { border-collapse: collapse; margin: 8px 0; font-size: 12.5px; width: 100%; }
.wc-md th, .wc-md td { border: 1px solid var(--line); padding: 5px 9px; text-align: left; }
.wc-md th { background: var(--surface-raised); }
.wc-md code { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; }
.md-code { position: relative; margin: 8px 0; }
.md-code pre { margin: 0; padding: 12px 14px; background: #161618; border: 1px solid var(--line); border-radius: 8px; overflow-x: auto; }
.md-code pre code { background: transparent; padding: 0; font-size: 12.5px; line-height: 1.55; color: #d6d6d6; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; }
.md-copy { position: absolute; top: 7px; right: 7px; border: 1px solid var(--line-strong); background: var(--surface-raised); color: var(--muted); font-size: 11px; padding: 3px 8px; border-radius: 6px; cursor: pointer; opacity: 0; transition: opacity 0.15s; }
.md-code:hover .md-copy { opacity: 1; }
.md-copy:hover { color: var(--text); }
.lc-head h1 { font-size: 22px; margin: 4px 0; }
.lc-sub2 { color: var(--muted); }
.lc-links { display: flex; flex-wrap: wrap; gap: 14px; margin: 10px 0 18px; font-size: 13px; }
.lc-links a { color: var(--blue); }
.lc-note { padding: 10px 13px; border: 1px dashed var(--line-strong); border-radius: var(--radius); color: var(--muted); font-size: 13px; margin: 12px 0; }
.lc-section { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); border-top: 1px solid var(--line); padding-top: 18px; margin: 26px 0 12px; }
.lc-md { font-size: 14px; line-height: 1.65; color: var(--text); }
.lc-md > :first-child { margin-top: 0; }
.lc-md p { margin: 9px 0; }
.lc-md ul, .lc-md ol { margin: 9px 0; padding-left: 22px; }
.lc-md li { margin: 4px 0; }
.lc-md hr { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }
.lc-md strong { color: var(--text); }
.lc-md h1, .lc-md h2 { font-size: 18px; margin: 22px 0 10px; padding-bottom: 7px; border-bottom: 1px solid var(--line); }
.lc-md h3 { font-size: 15px; margin: 16px 0 7px; }
.lc-md table { border-collapse: collapse; width: 100%; font-size: 13px; margin: 10px 0; display: block; overflow-x: auto; }
.lc-md th, .lc-md td { border: 1px solid var(--line); padding: 6px 9px; text-align: left; }
.lc-md th { background: var(--surface-soft); }
.lc-md code { background: var(--surface-soft); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; font-size: 12.5px; }
.lc-md blockquote { border-left: 3px solid var(--line-strong); margin: 10px 0; padding: 4px 14px; color: var(--muted); }

.lc-tool { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 16px; margin: 14px 0; box-shadow: var(--shadow-soft); }
.lc-tool-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.lc-tno { font-size: 11px; font-weight: 700; color: var(--blue); letter-spacing: .06em; }
.lc-tool-h h3 { font-size: 16px; margin: 0; }
.lc-field { font-size: 14px; line-height: 1.55; margin: 10px 0; }
.lc-field b { color: var(--muted-strong); }
.lc-det { margin: 8px 0; }
.lc-det summary { cursor: pointer; color: var(--blue); font-size: 13px; font-weight: 600; padding: 4px 0; }
.lc-det ul { margin: 6px 0; padding-left: 20px; font-size: 13.5px; color: var(--muted-strong); }
.lc-det li { margin: 5px 0; }
.lc-promptbox { margin-top: 12px; }
.lc-copy { width: 100%; background: var(--blue); color: #20180a; border: 0; border-radius: 10px; padding: 11px; font-weight: 700; font-size: 14px; cursor: pointer; }
.lc-copy:hover { background: var(--blue-dark); }
.lc-pre { margin-top: 10px; padding: 14px; background: #0c0c0f; border: 1px solid var(--line); border-radius: 10px; overflow: auto; max-height: 420px; white-space: pre-wrap; word-break: break-word; font: 12.5px/1.6 "SFMono-Regular", Consolas, monospace; color: #cdd2dc; }
.lc-tr { max-height: 360px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-soft); padding: 8px 14px; margin-top: 8px; }
.lc-cue { display: flex; gap: 12px; padding: 4px 0; font-size: 13px; border-bottom: 1px solid var(--line); }
.lc-ts { color: var(--blue); flex-shrink: 0; font-variant-numeric: tabular-nums; }

.today-summary { margin: 8px 0 0; color: var(--muted-strong); font-size: 14px; line-height: 1.5; }

/* Learning toolbar + compose */
.lc-sticky { position: sticky; top: 0; z-index: 6; background: var(--bg); margin: 0 0 12px; padding: 10px 0 12px; border-bottom: 1px solid var(--line); }
.lc-ph { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 12px; }
.lc-ph-title { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.lc-ph-title h1 { margin: 0; font-size: 23px; }
.lc-ph-title .eyebrow { margin: 0; flex-shrink: 0; }
.lc-head-actions { display: flex; gap: 10px; align-items: center; margin-left: auto; }
.lc-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0; }
.lc-search { width: min(360px, 100%); }
.lc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lc-chip2 { border: 1px solid var(--line); background: var(--surface-soft); color: var(--muted); border-radius: 999px; padding: 5px 13px; font-size: 12.5px; cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s; }
.lc-chip2:hover { color: var(--text); border-color: var(--line-strong); }
.lc-chip2.on { background: var(--blue); color: #20180a; border-color: transparent; }
.lc-compose { max-width: 760px; display: grid; gap: 14px; }
.lc-compose-h { margin: 6px 0 0; }
.lc-l { display: grid; gap: 7px; color: var(--muted-strong); font-size: 13px; font-weight: 600; }
.lc-form-actions { display: flex; gap: 10px; margin-top: 4px; }

/* Collections (合集) view */
.lc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); gap: 16px; }
.lc-grid .lc-card { flex: none; width: auto; }
.lc-coll-cover { position: relative; }
.lc-coll-icon { font-size: 30px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45)); }
.lc-coll-count-badge { position: absolute; right: 8px; bottom: 8px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 6px; }
.lc-coll-head { display: flex; align-items: baseline; gap: 12px; margin: 14px 0; }
.lc-coll-head h2 { margin: 0; }
.lc-coll-count { color: var(--muted); font-size: 13px; }
.lc-section-h { font-size: 14px; font-weight: 700; color: var(--text); margin: 0 0 14px; }


/* ===== 日式幻想登录:黎明神社·朝樱(作用域限定 .lock-screen / .lock-panel)===== */
.lock-screen {
  background: linear-gradient(180deg,#b9c8ea 0%,#d7c4df 28%,#f0d0c8 55%,#fbe2cd 78%,#fdeedd 100%);
  overflow: hidden;
}
.lock-scene { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.ls-sun {
  position:absolute; top:15%; left:50%; width:340px; height:340px; transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(255,238,200,.95) 0%,rgba(255,216,170,.5) 36%,rgba(255,200,170,0) 70%);
  border-radius:50%;
}
.ls-sun::after {
  content:""; position:absolute; top:50%; left:50%; width:104px; height:104px; transform:translate(-50%,-50%);
  border-radius:50%; background:radial-gradient(circle,#fff7e8 0%,#ffdcab 68%,#ffce98 100%);
  box-shadow:0 0 70px 24px rgba(255,222,180,.5);
}
.ls-art { position:absolute; left:0; bottom:0; width:100%; height:80%; }
.ls-fuji { fill:#97a3c6; opacity:.55; }
.ls-snow { fill:#eef2fb; opacity:.85; }
.ls-torii { fill:#c8412c; opacity:.92; }
.ls-mist {
  position:absolute; left:0; right:0; bottom:24%; height:150px;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,250,245,.7) 55%,rgba(255,248,240,.95) 100%);
  filter:blur(8px);
}
.petal {
  position:absolute; top:-26px; width:12px; height:12px; background:#f6c2d2;
  border-radius:12px 1px 12px 1px; opacity:.85; animation:petal-fall linear infinite;
}
.petal::before { content:""; position:absolute; inset:0; background:#f3b3c8; border-radius:12px 1px 12px 1px; transform:rotate(20deg); opacity:.6; }
@keyframes petal-fall {
  0% { transform:translateY(-30px) translateX(0) rotate(0); opacity:0; }
  12% { opacity:.9; }
  100% { transform:translateY(106vh) translateX(70px) rotate(440deg); opacity:.15; }
}
.petal.p1 { left:8%;  animation-duration:11s; }
.petal.p2 { left:20%; animation-duration:14s; animation-delay:3s; width:9px; height:9px; }
.petal.p3 { left:33%; animation-duration:9s;  animation-delay:1.5s; }
.petal.p4 { left:46%; animation-duration:13s; animation-delay:5s; width:14px; height:14px; }
.petal.p5 { left:59%; animation-duration:10s; animation-delay:2s; }
.petal.p6 { left:71%; animation-duration:15s; animation-delay:6s; width:8px; height:8px; }
.petal.p7 { left:84%; animation-duration:12s; animation-delay:1s; }
.petal.p8 { left:93%; animation-duration:13.5s; animation-delay:4s; width:11px; height:11px; }
@media (prefers-reduced-motion:reduce) { .petal { display:none; } }

.lock-panel {
  position:relative; z-index:2;
  background:rgba(255,252,248,.72);
  -webkit-backdrop-filter:blur(16px) saturate(125%);
  backdrop-filter:blur(16px) saturate(125%);
  border:1px solid rgba(200,65,44,.18);
  border-radius:16px;
  box-shadow:0 22px 60px rgba(120,80,70,.22), inset 0 1px 0 rgba(255,255,255,.6);
  color:#3a2e2b;
}
.lock-panel .brand-mark { background:linear-gradient(135deg,#d6452e,#b5331f); color:#fff; box-shadow:0 4px 14px rgba(200,65,44,.35); }
.lock-panel .brand strong { color:#2a211f; }
.lock-panel .brand span, .lock-panel .subtle { color:#8a6f66; }
.lock-screen .eyebrow { color:#b5331f; letter-spacing:.18em; }
.lock-panel #authTitle { color:#2a211f; font-weight:600; }
.lock-panel label { color:#6b554e; }
.lock-panel input { background:rgba(255,255,255,.72); border:1px solid rgba(150,110,100,.3); color:#2a211f; }
.lock-panel input::placeholder { color:#b09a92; }
.lock-panel input:focus { border-color:#d6452e; box-shadow:0 0 0 3px rgba(214,69,46,.15); outline:none; }
.lock-panel .primary-button { background:linear-gradient(135deg,#d6452e,#bb3620); border:none; color:#fff; box-shadow:0 6px 18px rgba(200,65,44,.32); }
.lock-panel .primary-button:hover { filter:brightness(1.06); }
.lock-panel .primary-button:disabled { opacity:.6; }
.lock-panel .message { color:#8a3a2a; }

/* 安全:验证通过前不渲染 app 外壳,杜绝刷新瞬间闪现登录后页面 */
.lock-screen:not([hidden]) ~ .shell { display: none !important; }


/* ===== 登录:实景背景 + 角色立绘(覆盖前面的矢量场景)===== */
.lock-screen { background: #181320; }
.lock-screen::before {
  content: ""; position: absolute; inset: -4%; z-index: 0;
  background: url("/login-bg.jpg?v=20260620-3") center/cover no-repeat;
  animation: ls-kenburns 34s ease-in-out infinite alternate;
}
.lock-screen::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(125% 85% at 58% 42%, rgba(18,13,26,0) 32%, rgba(18,13,26,.34) 100%);
}
@keyframes ls-kenburns {
  from { transform: scale(1.06) translate(0, 0); }
  to   { transform: scale(1.16) translate(1.5%, -2%); }
}
/* 实景已替代手绘场景:隐藏旧的矢量富士/鸟居/太阳/雾,保留飘樱 */
.ls-sun, .ls-art, .ls-mist { display: none !important; }
.lock-scene { z-index: 1; }
/* 角色立绘:左下,轻浮动 + 光影 */
.ls-character {
  position: absolute; bottom: 0; left: 2.5vw; z-index: 2;
  height: min(88vh, 780px); width: auto; pointer-events: none;
  filter: drop-shadow(0 14px 44px rgba(120,40,30,.45));
  animation: ls-float 7s ease-in-out infinite;
}
@keyframes ls-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
/* 表单浮最上 + 提高不透明度保证可读 */
.lock-panel { z-index: 3; background: rgba(255,251,247,.85); }
@media (prefers-reduced-motion: reduce) { .lock-screen::before { animation: none; } .ls-character { animation: none; } }
@media (max-width: 1024px) { .ls-character { display: none; } }


/* ===== 改用成图 anime-login-main(自带角色),表单移到左侧留白 ===== */
.lock-screen::before {
  background: url("/login-bg.png?v=20260620-4") center/cover no-repeat;
  transform-origin: 78% 50%;
  animation: ls-kenburns2 38s ease-in-out infinite alternate;
}
@keyframes ls-kenburns2 { from { transform: scale(1.04); } to { transform: scale(1.10); } }
.lock-screen::after {
  background: linear-gradient(90deg, rgba(10,8,20,.60) 0%, rgba(10,8,20,.32) 38%, rgba(10,8,20,0) 66%);
}
.ls-character { display: none !important; }
.lock-screen { justify-items: start; padding-left: clamp(48px, 8vw, 170px); }
@media (max-width: 720px) { .lock-screen { justify-items: center; padding-left: 20px; } }
@media (prefers-reduced-motion: reduce) { .lock-screen::before { animation: none; } }


/* ===== 分层合成:新场景 + 透明角色(右) + 表单(左) + 鼠标视差/浮动 ===== */
.lock-screen::before { background: url("/login-bg.png?v=20260624-5") center/cover no-repeat; }
/* 角色容器:右侧 + 鼠标视差(前景动得多) */
.ls-char-wrap {
  position: absolute; bottom: 0; right: 1vw; z-index: 2; pointer-events: none;
  transform: translate(calc(var(--mx, 0) * -16px), calc(var(--my, 0) * -10px));
  transition: transform .25s ease-out;
}
.ls-character {
  display: block !important; height: min(94vh, 880px); width: auto;
  filter: drop-shadow(0 18px 50px rgba(0,0,0,.55));
  animation: ls-float 7s ease-in-out infinite;
}
/* 飘樱层轻视差(背景动得少 → 纵深) */
.lock-scene {
  transform: translate(calc(var(--mx, 0) * 7px), calc(var(--my, 0) * 5px));
  transition: transform .3s ease-out;
}
@media (max-width: 1100px) { .ls-char-wrap { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .ls-character { animation: none; }
  .ls-char-wrap, .lock-scene { transition: none; transform: none; }
}


/* 修正:角色在容器(.ls-char-wrap)内正常排布,清除残留 absolute/left(否则被推出屏幕右侧)*/
.ls-character { position: static !important; left: auto !important; right: auto !important; bottom: auto !important; }
/* 放宽显示断点:只在手机窄屏隐藏角色 */
@media (max-width: 1100px) { .ls-char-wrap { display: block; } }
@media (max-width: 820px) { .ls-char-wrap { display: none; } }


/* ===== 登录 v2:移植 dynamic-3d-login 的深色磨砂质感 + 渐变标题/按钮 + 暗角 + 指针拖尾 ===== */
.ls-trail { position: fixed; inset: 0; z-index: 4; pointer-events: none; }
/* 暗角 + 左侧压暗(保表单可读),覆盖之前的 ::after */
.lock-screen::after {
  background:
    radial-gradient(130% 100% at 52% 45%, transparent 56%, rgba(0,0,0,.5) 100%),
    linear-gradient(90deg, rgba(8,6,16,.62) 0%, rgba(8,6,16,.30) 40%, transparent 70%);
}
/* 深色磨砂金边登录卡 */
.lock-panel {
  z-index: 5;
  color: rgba(255,250,246,.96);
  border: 1px solid rgba(255,230,207,.22);
  border-top-color: rgba(255,250,242,.38);
  border-radius: 22px;
  background:
    radial-gradient(circle at 24% 0%, rgba(255,255,255,.14), transparent 34%),
    linear-gradient(135deg, rgba(35,18,26,.62), rgba(9,10,25,.54));
  box-shadow: 0 30px 90px rgba(0,0,0,.42), 0 0 46px rgba(255,111,38,.13), inset 0 1px 0 rgba(255,255,255,.2), inset 0 -22px 45px rgba(0,0,0,.17);
  -webkit-backdrop-filter: blur(18px) saturate(132%);
  backdrop-filter: blur(18px) saturate(132%);
}
.lock-panel::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; opacity: .44;
  background: linear-gradient(110deg, transparent 0%, rgba(255,138,42,.16) 28%, rgba(255,208,138,.24) 50%, rgba(255,122,47,.12) 66%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  animation: ls-sheen 9s ease-in-out infinite alternate;
}
.lock-panel > * { position: relative; z-index: 1; }
@keyframes ls-sheen { from { opacity: .26; } to { opacity: .5; } }
/* 深卡上文案翻浅色 */
.lock-panel .brand strong { color: #fff5ea; }
.lock-panel .brand span, .lock-panel .subtle { color: rgba(247,233,225,.74); }
.lock-screen .eyebrow { color: rgba(255,218,165,.92); letter-spacing: .2em; }
.lock-panel label { color: rgba(255,245,238,.8); }
/* 渐变英雄标题 */
.lock-panel #authTitle {
  font-size: clamp(1.9rem, 2.4vw, 2.6rem); font-weight: 850; line-height: 1.06;
  background: linear-gradient(95deg, #fff5e4 0%, #ffd383 22%, #ff7a2c 56%, #b784ff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* 深色输入 + 双层聚焦光环 */
.lock-panel input {
  height: 50px; border: 1px solid rgba(255,238,226,.16); border-radius: 14px;
  background: rgba(5,7,18,.56); color: rgba(255,247,242,.95);
}
.lock-panel input::placeholder { color: rgba(255,247,242,.4); }
.lock-panel input:focus {
  border-color: rgba(255,186,104,.72);
  box-shadow: 0 0 0 3px rgba(255,122,44,.18), 0 0 0 6px rgba(118,244,255,.08); outline: none;
}
/* 渐变鎏金按钮 + 呼吸光 */
.lock-panel .primary-button {
  background: linear-gradient(100deg, #ffd383, #ff7a2c 50%, #d05cff 100%);
  color: #1b0e15; font-weight: 850; border: 0; border-radius: 14px;
  box-shadow: 0 18px 44px rgba(255,111,38,.27), inset 0 1px 0 rgba(255,255,255,.46);
  animation: ls-btnglow 4.4s ease-in-out infinite alternate;
}
.lock-panel .primary-button:hover { transform: translateY(-2px); filter: brightness(1.03); }
@keyframes ls-btnglow {
  from { box-shadow: 0 18px 44px rgba(255,111,38,.24), inset 0 1px 0 rgba(255,255,255,.42); }
  to   { box-shadow: 0 20px 52px rgba(255,138,42,.34), 0 0 18px rgba(255,208,138,.12), inset 0 1px 0 rgba(255,255,255,.5); }
}
@media (prefers-reduced-motion: reduce) {
  .lock-panel::before, .lock-panel .primary-button { animation: none; }
  .ls-trail { display: none; }
}

/* 换封面=anime-login-main(自带角色),去掉单独立绘,取消樱花拖尾 */
.lock-screen::before { background: url("/login-bg.png?v=20260625-8") center/cover no-repeat; }
.ls-char-wrap { display: none !important; }


/* ===== 视频背景 + 流星(替代静态封面图)===== */
.lock-screen::before { display: none !important; }
.ls-bgvideo { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; }
.lock-screen::after { z-index: 1; }
.lock-scene { z-index: 2; }
.ls-stars { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .ls-bgvideo { display: none; }
  .lock-screen::before { display: block !important; }
}

/* 视频交叉淡入循环 + 图层顺序(压暗层恒在视频之上,避免切换发暗)*/
.ls-bgvideo { transition: opacity 0.7s linear; }
.ls-bgvideo-b { opacity: 0; }
.lock-screen::after { z-index: 3; }
.lock-scene { z-index: 4; }
.ls-stars { z-index: 4; }

/* ===== Links · 快速链接 (Google-Drive-style cards) ===== */
.links-message {
  margin: 8px 2px 0;
  color: var(--red);
  font-size: 12.5px;
}
.links-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}
.links-grid.empty {
  display: block;
  color: var(--muted);
  font-size: 13px;
  padding: 10px 2px;
}
.link-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  cursor: pointer;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: border-color 0.15s ease, box-shadow 0.18s ease, transform 0.14s ease;
}
.link-card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}
.link-card.is-pinned {
  border-color: rgba(211, 173, 88, 0.45);
}
.link-pin-flag {
  position: absolute;
  top: 8px;
  left: 10px;
  font-size: 12px;
  color: var(--blue);
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}
.link-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 92px;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(211, 173, 88, 0.12), transparent 70%),
    var(--surface-soft);
  border-bottom: 1px solid var(--line);
}
.link-fav {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--surface-raised);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
.link-foot {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 8px 10px 12px;
}
.link-title {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.link-more {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  opacity: 0;
  transition: opacity 0.15s ease, color 0.12s ease, background 0.12s ease;
}
.link-card:hover .link-more,
.link-card:focus-within .link-more {
  opacity: 1;
}
.link-more:hover {
  color: var(--text);
  background: var(--surface-soft);
}
.link-menu {
  position: absolute;
  right: 8px;
  bottom: 40px;
  z-index: 12;
  min-width: 128px;
  padding: 5px;
  border-radius: 10px;
  background: var(--surface-raised);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.link-mi {
  text-align: left;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 6px;
  transition: background 0.12s ease, color 0.12s ease;
}
.link-mi:hover {
  background: var(--surface-soft);
}
.link-mi.danger {
  color: var(--red);
}
.link-mi.danger:hover {
  background: rgba(241, 76, 76, 0.12);
}

/* ----- Add modal ----- */
.links-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.links-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
}
.links-modal-card {
  position: relative;
  width: min(420px, 100%);
  padding: 22px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.links-modal-title {
  margin: 0;
  font-size: 16px;
  color: var(--text);
}
.links-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.links-field span {
  font-size: 12.5px;
  color: var(--muted);
}
.links-field input {
  border-radius: var(--radius);
  background: var(--surface-soft);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 14px;
  padding: 10px 12px;
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.links-field input:focus {
  border-color: var(--blue);
  background: var(--surface-raised);
}
.links-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}

/* ----- Undo toast ----- */
.links-toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 95;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--surface-raised);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow);
  color: var(--text);
  font-size: 13px;
  max-width: min(90vw, 420px);
}
.links-toast span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.links-undo {
  border: 0;
  background: transparent;
  color: var(--blue);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  padding: 0;
}
.links-undo:hover {
  color: var(--blue-dark);
}

/* ============================================================
   UI POLISH PASS (2026-06-28) — density + comfort, calm/premium
   ============================================================ */

/* ----- Sidebar nav icons ----- */
.nav-link { display: flex; align-items: center; gap: 10px; }
.nav-ico {
  flex: 0 0 18px;
  width: 18px;
  text-align: center;
  font-size: 14px;
  line-height: 1;
  opacity: 0.85;
  filter: saturate(0.85);
}
.nav-link.active .nav-ico,
.nav-link:hover .nav-ico { opacity: 1; }
.nav-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ----- Link favicon glyph fallback (never a broken image) ----- */
.link-fav.is-glyph { padding: 6px; background: var(--surface-soft); object-fit: contain; }

/* ============================================================
   Item #2 — compact log tables (events + audit) + sticky controls
   ============================================================ */
.log-wrap { width: 100%; }
.log-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: auto;
}
.log-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  text-align: left;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface);
  padding: 8px 12px;
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}
.log-table tbody td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  color: var(--muted-strong);
}
.log-table tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.015); }
.log-table tbody tr:hover td { background: var(--surface-soft); }
.log-table tbody tr:last-child td { border-bottom: 0; }
.log-title-cell { max-width: 460px; }
.log-title { display: block; color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.log-sub { display: block; color: var(--muted); font-size: 12px; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.log-num { text-align: center; width: 56px; }
.log-time { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; width: 120px; }
.log-actcell { text-align: right; width: 64px; }
.log-act {
  border: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--muted-strong);
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.log-act:hover:not([disabled]) { color: var(--text); border-color: var(--line-strong); background: var(--surface-raised); }
.log-act[disabled] { opacity: 0.45; cursor: not-allowed; }
.log-empty { color: var(--muted); font-size: 13px; padding: 16px 4px; }

/* tags / pills / risk dots (shared) */
.tag {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted-strong);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.tag-security { color: #ff9f9f; border-color: rgba(241, 76, 76, 0.4); background: rgba(241, 76, 76, 0.1); }
.tag-system { color: #8fc7ff; border-color: rgba(211, 173, 88, 0.35); background: rgba(211, 173, 88, 0.1); }
.tag-agent { color: #c8a6ff; border-color: rgba(160, 120, 255, 0.35); background: rgba(160, 120, 255, 0.1); }
.tag-automation { color: #6fe0a0; border-color: rgba(78, 201, 115, 0.35); background: rgba(78, 201, 115, 0.1); }
.pill {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.pill-ok { color: #7fe0a6; background: rgba(78, 201, 115, 0.14); }
.pill-warn { color: #f0c674; background: rgba(204, 167, 0, 0.16); }
.pill-mut { color: var(--muted); background: var(--surface-soft); }
.risk-dot {
  display: inline-block;
  min-width: 20px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 12px;
}
.risk-0 { color: var(--muted); font-weight: 500; }
.risk-1 { color: var(--muted-strong); }
.risk-2 { color: #f0c674; }
.risk-3 { color: #ff8a8a; }

/* ============================================================
   Item #3 — compact rows (overview / security)
   ============================================================ */
.sys-pane .item-list { gap: 0; }
.sys-pane .item-list:not(.empty) {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}

/* generic status / list row */
.sys-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
}
.sys-row:last-child { border-bottom: 0; }
.sys-row:hover { background: var(--surface-soft); }
.sys-dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.sys-dot.ok { background: var(--green); box-shadow: 0 0 0 3px rgba(78, 201, 115, 0.16); }
.sys-dot.warn { background: var(--amber); box-shadow: 0 0 0 3px rgba(204, 167, 0, 0.16); }
.sys-dot.crit { background: var(--red); box-shadow: 0 0 0 3px rgba(241, 76, 76, 0.16); }
.sys-dot.mut { background: var(--line-strong); }
.sys-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sys-row-title { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sys-row-sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sys-row-status { font-size: 12px; color: var(--muted-strong); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sys-lock { font-size: 11px; opacity: 0.7; }
.sys-row-actions { display: flex; gap: 6px; flex: 0 0 auto; }

/* settings definition rows (label | value | status) */
.def-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
}
.def-row:last-child { border-bottom: 0; }
.def-row:hover { background: var(--surface-soft); }
.def-label { flex: 0 0 120px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.def-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.def-value { font-size: 13px; color: var(--text); word-break: break-word; }
.def-meta { font-size: 12px; color: var(--muted); word-break: break-word; }
.def-status { flex: 0 0 auto; font-size: 11.5px; color: var(--muted-strong); background: var(--surface-soft); border: 1px solid var(--line); padding: 2px 9px; border-radius: 999px; white-space: nowrap; }

/* tighten the system dashboard grid + panels for density */
.sys-pane .dashboard-grid { gap: 14px; }
.sys-pane .panel { padding: 16px 16px 14px; }
.sys-pane .panel h2 { font-size: 14px; }
.sys-pane .panel-heading { margin-bottom: 12px; }

/* sticky controls for the logs pane (header + filters stay while table scrolls) */
.sys-pane[data-sys-pane="logs"] .panel { position: relative; }
.sys-pane[data-sys-pane="logs"] .panel-heading {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--surface);
  padding-bottom: 12px;
  margin: -16px -16px 4px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--line);
}

/* 修复:logs 吸顶标题上方穿透(填补 workspace 顶部 padding 缝隙)*/
.sys-pane[data-sys-pane="logs"] .panel-heading { z-index: 5; }
.sys-pane[data-sys-pane="logs"] .panel-heading::before { content: ""; position: absolute; left: -16px; right: -16px; top: -40px; height: 40px; background: var(--surface); }

/* Bug1: 系统标签栏吸顶(滚动时固定在顶,消除标题切顶) */
.sys-switch { position: sticky; top: 0; z-index: 6; background: var(--bg); margin-top: 18px; padding: 12px 0; }
.sys-switch::before { content: ""; position: absolute; left: 0; right: 0; top: -34px; height: 34px; background: var(--bg); }

/* GOLD-THEME */
.sidebar .brand-mark { color: #20180a; }
.primary-button { color: #20180a; }

/* ---- 快速链接:分类分组 + 吸顶导航 ---- */
.links-sticky { position: sticky; top: 0; z-index: 6; background: var(--bg); border-bottom: 1px solid var(--line); }
.links-sticky::before { content: ""; position: absolute; left: 0; right: 0; top: -34px; height: 34px; background: var(--bg); }
.links-sticky .page-header { border-bottom: none; padding-bottom: 10px; }
.links-head-actions { display: flex; gap: 10px; align-items: center; }
.links-nav { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 0 12px; }
.links-navchip { border: 1px solid var(--line); background: var(--surface-soft); color: var(--muted); border-radius: 999px; padding: 6px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.links-navchip:hover { color: var(--text); border-color: var(--line-strong); }
.links-navchip.active { color: #20180a; background: var(--blue); border-color: transparent; }
.links-sections { display: flex; flex-direction: column; gap: 26px; margin-top: 18px; }
.link-group { scroll-margin-top: 150px; }
.link-group-head { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.link-group-title { margin: 0; font-size: 15px; font-weight: 700; color: var(--blue); letter-spacing: .02em; }
.link-group-count { font-size: 11px; color: var(--muted); background: var(--surface-soft); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; }
.link-group-tools { display: flex; gap: 4px; opacity: 0; transition: opacity .15s; }
.link-group-head:hover .link-group-tools { opacity: 1; }
.lg-tool { border: 1px solid var(--line); background: var(--surface); color: var(--muted); width: 24px; height: 24px; border-radius: 7px; cursor: pointer; font-size: 12px; display: grid; place-items: center; line-height: 1; padding: 0; }
.lg-tool:hover { color: var(--text); border-color: var(--line-strong); }
.lg-tool.danger:hover { color: var(--red); border-color: rgba(241, 76, 76, .5); }
.link-group .links-grid { margin-top: 0; }
.link-group-empty { color: var(--muted); font-size: 12.5px; padding: 4px 2px; }
.links-select { width: 100%; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 8px; color: var(--text); padding: 9px 11px; font-size: 13.5px; cursor: pointer; }
.links-select:focus { outline: none; border-color: var(--blue); }

/* ---- 移动到分类 弹窗 ---- */
.links-move-list { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 2px; max-height: 320px; overflow: auto; }
.links-move-item { text-align: left; border: 1px solid var(--line); background: var(--surface-soft); color: var(--text); border-radius: 9px; padding: 11px 13px; font-size: 14px; cursor: pointer; transition: border-color .15s, background .15s; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.links-move-item:hover { border-color: var(--blue); background: var(--surface-raised); }
.lm-cur { font-size: 11px; color: var(--blue); font-weight: 700; flex: none; }

/* ===================== APPLE REBUILD v1 ===================== */
:root{ --ease:cubic-bezier(.32,.72,0,1); --spring:cubic-bezier(.34,1.42,.5,1); --mono:'JetBrains Mono',ui-monospace,monospace; --accent-soft:rgba(34,211,238,.14); --accent-faint:rgba(34,211,238,.08); }
body{ -webkit-font-smoothing:antialiased; }

/* shell -> top nav + workspace */
.shell{ grid-template-columns:1fr !important; grid-template-rows:auto 1fr !important; height:100dvh !important; }

/* topbar (was left sidebar) */
.sidebar{ position:relative !important; height:60px !important; flex-direction:row !important; align-items:center !important; gap:0 !important; padding:0 24px !important; border-right:none !important; border-bottom:1px solid var(--line) !important; background:rgba(10,11,14,.62) !important; backdrop-filter:blur(20px) saturate(1.4); z-index:30; }
.sidebar .brand{ flex-shrink:0; margin-right:22px; gap:11px; align-items:center; }
.sidebar .brand-mark{ width:24px !important; height:24px !important; border:none !important; color:transparent !important; font-size:0 !important; border-radius:8px !important; background:radial-gradient(circle at 32% 28%,#d8fbff,var(--blue) 48%,#0b6c7c 100%) !important; box-shadow:0 0 14px var(--accent-soft) !important; }
.sidebar .brand strong{ font-size:14px; letter-spacing:.14em; color:#fff; }
.sidebar .brand span{ font-size:11px; color:var(--muted); }
.sidebar .nav-list{ display:flex !important; flex-direction:row !important; gap:2px !important; }
.sidebar .nav-ico{ display:none !important; }
.nav-link{ min-height:auto !important; padding:8px 14px !important; font-weight:500 !important; font-size:13px !important; color:var(--muted) !important; border-radius:10px !important; transition:color .3s var(--ease), background .3s var(--ease) !important; }
.nav-link:hover{ background:rgba(255,255,255,.05) !important; color:var(--text) !important; }
.nav-link.active{ background:var(--blue) !important; color:#06222a !important; box-shadow:0 4px 18px -4px var(--blue) !important; }
.nav-link.active::before{ display:none !important; }
.sidebar .security-note{ display:none !important; }
.topbar-tools{ margin-left:auto; display:flex; align-items:center; gap:11px; flex-shrink:0; }
.kbar-btn{ display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:11px; background:var(--surface-soft); border:1px solid var(--line); color:var(--muted); font-size:12.5px; transition:border-color .3s var(--ease),color .3s var(--ease),transform .12s var(--ease); }
.kbar-btn:hover{ border-color:var(--accent-soft); color:var(--text); }
.kbar-btn:active{ transform:scale(.97); }
.kbar-btn kbd{ font-family:var(--mono); border:1px solid var(--line-strong); border-radius:5px; padding:1px 6px; font-size:11px; }
.topbar-avatar{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:600; color:#aeb3bb; background:linear-gradient(135deg,#2a2e36,#15181d); border:1px solid var(--line-strong); }

/* Hermes -> right slide-over */
.agent-panel{ position:fixed !important; top:0; right:0; height:100vh !important; width:380px !important; max-width:92vw; transform:translateX(102%); transition:transform .45s var(--spring) !important; z-index:60; border-left:1px solid var(--line) !important; box-shadow:-50px 0 120px -40px rgba(0,0,0,.85); background:var(--surface) !important; }
.agent-panel.open{ transform:none; }
.kbar-scrim{ position:fixed; inset:0; background:rgba(6,7,10,.5); backdrop-filter:blur(0px); opacity:0; pointer-events:none; transition:opacity .3s var(--ease),backdrop-filter .3s var(--ease); z-index:55; }
.kbar-scrim.open{ opacity:1; pointer-events:auto; backdrop-filter:blur(6px); }

/* deep-space workspace bg */
.workspace{ background: var(--bg) !important; }

/* gold leftovers -> cyan */
.hermes-avatar{ background:radial-gradient(circle at 35% 30%,#e6fdff,var(--blue) 45%,#0a5f6e 100%) !important; color:#06222a !important; }

/* gentle motion on common cards/buttons */
.panel,.link-card,.lc-card,.lc-chip2,.secondary-button,.sys-tab,.fm-fav-chip{ transition:transform .26s var(--ease),border-color .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease) !important; }
.primary-button{ transition:transform .14s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease) !important; }
.primary-button:active,.secondary-button:active{ transform:scale(.97); }

/* 今日报告 markdown 渲染 */
#todayReport{font-size:14px;line-height:1.72;color:var(--muted-strong);}
#todayReport h1{font-size:18px;color:var(--text);font-weight:600;margin:0 0 8px;letter-spacing:-.01em;}
#todayReport h2{font-size:15.5px;color:var(--text);font-weight:600;margin:20px 0 9px;}
#todayReport h3{font-size:13.5px;color:var(--muted-strong);font-weight:600;margin:12px 0 6px;}
#todayReport strong{color:var(--text);font-weight:600;}
#todayReport p{margin:7px 0;}
#todayReport ul{margin:7px 0;padding-left:20px;}
#todayReport li{margin:5px 0;}
#todayReport a{color:var(--blue);text-decoration:none;}
#todayReport a:hover{text-decoration:underline;}
#todayReport hr{border:none;border-top:1px solid var(--line);margin:16px 0;}
#todayReport blockquote{margin:10px 0;padding:9px 14px;border-left:2px solid var(--blue);background:var(--accent-faint);border-radius:0 8px 8px 0;color:var(--muted-strong);}

/* 顶部置顶区 */
.stick-top { position: sticky; top: 0; z-index: 9; background: var(--bg); display: flex; align-items: center; gap: 24px; padding-top: 4px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.stick-top::before { content: ""; position: absolute; left: 0; right: 0; top: -32px; height: 32px; background: var(--bg); }
.stick-top .page-header { flex: 0 0 auto; border-bottom: none; padding: 0; display: block; }
.stick-top #todayStats { flex: 1; margin: 0; }
.stick-top #refreshButton { flex: 0 0 auto; align-self: center; }
/* 收件箱/知识库/文件:标题吸顶 */
.page[data-page="inbox"] > .page-header, .page[data-page="knowledge"] > .page-header, .page[data-page="files"] > .page-header { position: sticky; top: 0; z-index: 9; background: var(--bg); padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.page[data-page="inbox"] > .page-header::before, .page[data-page="knowledge"] > .page-header::before, .page[data-page="files"] > .page-header::before { content: ""; position: absolute; left: 0; right: 0; top: -32px; height: 32px; background: var(--bg); }

/* 通用顶部紧凑吸顶条(标题左 + 控件右) */
.stick-bar { position: sticky; top: 0; z-index: 9; background: var(--bg); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 4px 0 12px; border-bottom: 1px solid var(--line); }
.stick-bar::before { content: ""; position: absolute; left: 0; right: 0; top: -32px; height: 32px; background: var(--bg); }
.stick-bar .page-header { flex: 0 0 auto; border-bottom: none; padding: 0; margin: 0; }
.stick-bar .sys-switch { position: static !important; margin: 0 !important; padding: 0 !important; flex: 0 0 auto; }
.stick-bar .sys-switch::before { display: none !important; }

/* 今日指标卡:行动导向状态 + 可点跳转 */
.stats-grid .stat-card{ transition: transform .2s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease), color .3s var(--ease); }
.stats-grid .stat-card.is-link{ cursor: pointer; }
.stats-grid .stat-card.is-link:hover{ transform: translateY(-2px); border-color: var(--line-strong); box-shadow: var(--shadow-soft); }
.stats-grid .stat-card.is-active{ border-color: var(--accent-soft); }
.stats-grid .stat-card.is-active strong{ color: var(--blue); }
.stats-grid .stat-card.is-alert{ border-color: rgba(240,178,74,.45); }
.stats-grid .stat-card.is-alert strong{ color: #f0b24a; }
.report-fresh{ font-family: var(--mono); font-size: 11px; font-weight: 400; color: var(--muted); margin-left: 8px; }

.item-actions{ flex-wrap: wrap; }

/* 片库:标题并入工具行(紧凑吸顶) */
.lc-toolbar .lc-ph-title{ flex: 0 0 auto; margin-right: 4px; }
.lc-toolbar .lc-ph-title h1{ font-size: 20px; }
.lc-sticky > .lc-chips{ margin-top: 10px; }

/* ===== 知识库 · 知识/笔记/报告 改造 ===== */
.kb-bar .page-header h1{ font-size: 20px; }
.kb-bar .kb-switch{ flex: 0 0 auto; margin-left: auto; }
.kb-bar-actions{ flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }
.kb-bar-actions .primary-button, .kb-bar-actions .secondary-button{ padding: 8px 18px; font-size: 13px; }

.kb-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-top: 20px; align-items: start; }
.kb-grid.empty{ display: block; color: var(--muted); font-size: 14px; padding: 64px 20px; text-align: center; border: 1px dashed var(--line-strong); border-radius: 16px; }

.kb-card{ display: flex; flex-direction: column; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; transition: border-color .22s var(--ease), transform .22s var(--ease), box-shadow .3s var(--ease); }
.kb-card:hover{ border-color: var(--line-strong); transform: translateY(-2px); box-shadow: var(--shadow); }
.kb-card-top{ display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kb-badge{ font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; letter-spacing: .02em; white-space: nowrap; }
.kb-badge.know{ color: var(--blue); background: rgba(34,211,238,0.10); border: 1px solid rgba(34,211,238,0.28); }
.kb-badge.note{ color: var(--amber); background: rgba(204,167,0,0.12); border: 1px solid rgba(204,167,0,0.32); }
.kb-time{ font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.kb-card-title{ margin: 0; font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.4; letter-spacing: -.01em; }
.kb-card-body{ margin: 0; font-size: 13px; line-height: 1.62; color: var(--muted-strong); white-space: pre-wrap; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.kb-nobody{ color: var(--muted); font-style: italic; }

.kb-pager{ display: flex; align-items: center; justify-content: center; gap: 18px; margin: 26px 0 8px; }
.kb-pager .secondary-button{ padding: 7px 16px; font-size: 13px; }
.kb-pager .secondary-button:disabled{ opacity: .4; cursor: not-allowed; }
.kb-page-info{ font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* 加宽记录模态 */
.kb-modal-card{ width: min(760px, 100%); }
.kb-kind-pick{ display: flex; gap: 8px; }
.kb-kind-btn{ flex: 1; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 13px; font-weight: 600; padding: 9px 14px; border-radius: 9px; cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.kb-kind-btn:hover{ color: var(--text); border-color: var(--line-strong); }
.kb-kind-btn.on{ color: var(--text); background: var(--surface-raised); border-color: var(--blue); }
.kb-textarea{ width: 100%; resize: vertical; min-height: 260px; background: var(--surface-raised); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; font-size: 14px; line-height: 1.62; font-family: inherit; box-sizing: border-box; }
.kb-textarea:focus{ outline: none; border-color: var(--blue); }

/* 知识库卡片:删除/编辑操作(悬停显现) */
.kb-card{ position: relative; }
.kb-card-actions{ display: flex; justify-content: flex-end; gap: 6px; margin-top: 2px; opacity: 0; transition: opacity .16s var(--ease); }
.kb-card:hover .kb-card-actions{ opacity: 1; }
.kb-act{ border: 1px solid var(--line); background: var(--surface-raised); color: var(--muted); width: 28px; height: 26px; border-radius: 7px; cursor: pointer; font-size: 12px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: color .15s, border-color .15s, background .15s; }
.kb-act:hover{ color: var(--text); border-color: var(--line-strong); }
.kb-act-del:hover{ color: var(--red); border-color: var(--red); }

/* 今日报告:表格 + 排版增强(可读性) */
#todayReport table{ width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 13px; }
#todayReport thead th{ text-align: left; font-weight: 600; color: var(--muted); padding: 9px 12px; border-bottom: 1.5px solid var(--line-strong); font-size: 12px; letter-spacing: .02em; white-space: nowrap; }
#todayReport tbody td{ padding: 9px 12px; border-bottom: 1px solid var(--line); color: var(--muted-strong); vertical-align: top; }
#todayReport tbody tr:last-child td{ border-bottom: none; }
#todayReport tbody tr:hover td{ background: var(--surface-soft); }
#todayReport table strong{ color: var(--text); }
#todayReport h2{ padding-top: 4px; }

/* 知识库:列表式 + 详情弹窗 */
.kb-list{ display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
.kb-list.empty{ display: block; color: var(--muted); font-size: 14px; padding: 64px 20px; text-align: center; border: 1px dashed var(--line-strong); border-radius: 16px; }
.kb-row{ display: flex; align-items: center; gap: 14px; padding: 13px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 11px; cursor: pointer; transition: border-color .16s var(--ease), background .16s var(--ease); }
.kb-row:hover{ border-color: var(--line-strong); background: var(--surface-soft); }
.kb-row-title{ flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb-row .kb-time, .kb-row .kb-badge{ flex: 0 0 auto; }
.kb-badge.report{ color: var(--green); background: rgba(78,201,115,0.10); border: 1px solid rgba(78,201,115,0.28); }
.kb-row-actions{ flex: 0 0 auto; display: flex; gap: 6px; opacity: 0; transition: opacity .15s; }
.kb-row:hover .kb-row-actions{ opacity: 1; }

.kb-detail-card{ width: min(820px, 100%); max-height: 86vh; display: flex; flex-direction: column; padding: 20px 22px; }
.kb-detail-head{ display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.kb-detail-meta{ display: flex; align-items: center; gap: 10px; }
.kb-detail-x{ border: none; background: transparent; color: var(--muted); font-size: 15px; cursor: pointer; padding: 4px 8px; border-radius: 7px; line-height: 1; }
.kb-detail-x:hover{ color: var(--text); background: var(--surface-raised); }
.kb-detail-title{ margin: 2px 0 10px; font-size: 19px; font-weight: 600; color: var(--text); letter-spacing: -.01em; line-height: 1.35; }
.kb-detail-body{ flex: 1 1 auto; overflow-y: auto; padding-right: 8px; }
.kb-detail-foot{ display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.kb-detail-delbtn:hover{ color: var(--red); border-color: var(--red); }

/* 通用 Markdown 渲染类(详情弹窗 + 可复用) */
.md-view{ font-size: 14px; line-height: 1.72; color: var(--muted-strong); }
.md-view h1{ font-size: 18px; color: var(--text); font-weight: 600; margin: 0 0 8px; letter-spacing: -.01em; }
.md-view h2{ font-size: 15.5px; color: var(--text); font-weight: 600; margin: 20px 0 9px; padding-top: 4px; }
.md-view h3{ font-size: 13.5px; color: var(--muted-strong); font-weight: 600; margin: 12px 0 6px; }
.md-view strong{ color: var(--text); font-weight: 600; }
.md-view p{ margin: 7px 0; }
.md-view ul{ margin: 7px 0; padding-left: 20px; }
.md-view li{ margin: 5px 0; }
.md-view a{ color: var(--blue); text-decoration: none; }
.md-view a:hover{ text-decoration: underline; }
.md-view hr{ border: none; border-top: 1px solid var(--line); margin: 16px 0; }
.md-view blockquote{ margin: 10px 0; padding: 9px 14px; border-left: 2px solid var(--blue); background: var(--surface-soft); border-radius: 0 8px 8px 0; color: var(--muted-strong); }
.md-view table{ width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 13px; }
.md-view thead th{ text-align: left; font-weight: 600; color: var(--muted); padding: 9px 12px; border-bottom: 1.5px solid var(--line-strong); font-size: 12px; letter-spacing: .02em; white-space: nowrap; }
.md-view tbody td{ padding: 9px 12px; border-bottom: 1px solid var(--line); color: var(--muted-strong); vertical-align: top; }
.md-view tbody tr:last-child td{ border-bottom: none; }
.md-view table strong{ color: var(--text); }

/* 收件箱媒体附件(图片/视频/音频/文档) */
.inbox-media{ display: block; margin: 8px 0; }
.inbox-media img, video.inbox-media{ display: block; max-width: 340px; max-height: 260px; width: auto; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-soft); }
.inbox-media img{ cursor: zoom-in; object-fit: cover; }
.inbox-media-btn{ padding: 0; border: 0; background: none; cursor: zoom-in; }
.inbox-audio{ display: block; margin: 8px 0; width: 340px; max-width: 100%; }
.inbox-doc{ display: inline-flex; align-items: center; gap: 6px; margin: 8px 0; padding: 8px 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); color: var(--blue); font: inherit; font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; }
.inbox-doc:hover{ border-color: var(--blue); }

/* 收件箱 · 点击预览 lightbox */
.preview-overlay{ position: fixed; inset: 0; z-index: 95; display: flex; align-items: center; justify-content: center; padding: 32px; }
.preview-backdrop{ position: absolute; inset: 0; background: rgba(0,0,0,.72); backdrop-filter: blur(3px); }
.preview-box{ position: relative; width: min(1000px, 100%); max-height: 100%; display: flex; flex-direction: column; gap: 12px; }
.preview-head{ display: flex; align-items: center; gap: 12px; }
.preview-title{ flex: 1; min-width: 0; color: #fff; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.preview-actions{ display: flex; align-items: center; gap: 8px; }
.preview-x{ width: 34px; height: 34px; border-radius: 9px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff; font-size: 15px; cursor: pointer; }
.preview-x:hover{ background: rgba(255,255,255,.18); }
.preview-body{ position: relative; display: flex; align-items: center; justify-content: center; min-height: 200px; overflow: auto; }
.preview-img{ max-width: 100%; max-height: 82vh; border-radius: 10px; object-fit: contain; }
.preview-vid{ max-width: 100%; max-height: 82vh; border-radius: 10px; background: #000; }
.preview-audio-wrap{ width: min(560px, 100%); padding: 24px; }
.preview-aud{ width: 100%; }
.preview-frame{ width: 100%; height: 82vh; border: 1px solid var(--line-strong); border-radius: 10px; background: #fff; }
.preview-text{ width: 100%; max-height: 82vh; overflow: auto; margin: 0; padding: 20px 24px; background: #fff; color: #1a1a1a; border-radius: 10px; font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-word; }
.preview-note{ padding: 40px 24px; color: #cbd5e1; font-size: 14px; text-align: center; }

/* 两步验证 2FA */
.twofa-state{ font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.twofa-state.on{ color: #34d399; background: rgba(52,211,153,.12); }
.twofa-state.off{ color: #94a3b8; background: rgba(148,163,184,.12); }
.twofa-body{ display: flex; flex-direction: column; gap: 12px; }
.twofa-note{ margin: 0; color: var(--text-soft); font-size: 13px; line-height: 1.6; }
.twofa-note.twofa-ok{ color: #34d399; }
.twofa-key{ font: 18px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 2px; padding: 12px 14px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 10px; word-break: break-all; user-select: all; }
.twofa-otpauth{ align-self: flex-start; color: var(--blue); font-size: 13px; font-weight: 600; text-decoration: none; }
.twofa-otpauth:hover{ text-decoration: underline; }
.twofa-row{ display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.twofa-input{ flex: 1; min-width: 140px; padding: 9px 12px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface); color: var(--text); font: 15px/1 ui-monospace, monospace; letter-spacing: 3px; }
.twofa-codes{ display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.twofa-codes code{ padding: 8px 10px; background: var(--surface-soft); border: 1px dashed var(--line-strong); border-radius: 8px; font: 14px/1 ui-monospace, monospace; text-align: center; user-select: all; }
.twofa-msg{ margin: 0; color: #f87171; font-size: 13px; }