:root {
  --bg: #081121;
  --bg2: #0c1730;
  --panel: rgba(9, 18, 38, 0.94);
  --card: #182849;
  --card2: #21345d;
  --line: #6ea0ff;
  --text: #eef4ff;
  --muted: #aab8d6;
  --accent: #8ee8ff;
  --accent2: #bfc8ff;
  --danger: #ff6f92;
  --ok: #7ef5b6;
  --border: rgba(255,255,255,.09);
  --shadow: 0 18px 44px rgba(0,0,0,.35);
}
* { box-sizing: border-box; }
html, body {
  margin: 0; width: 100%; height: 100%; overflow: hidden;
  font-family: Inter, system-ui, Arial, sans-serif; color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(142,232,255,.10), transparent 32%),
    radial-gradient(circle at top right, rgba(191,200,255,.14), transparent 34%),
    linear-gradient(180deg, var(--bg2), var(--bg));
}
body { display: grid; grid-template-rows: auto 1fr; }
.hidden { display:none !important; }
body.no-select,
body.no-select * {
  user-select:none !important;
  -webkit-user-select:none !important;
}
.topbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 14px;
  border-bottom:1px solid var(--border);
  background:
    linear-gradient(180deg, rgba(7,14,28,.96), rgba(6,12,24,.9));
  box-shadow:0 14px 34px rgba(0,0,0,.18);
}
.brand {
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  flex:1 1 auto;
}
.menu-toggle {
  width:38px;
  height:38px;
  padding:0;
  border-radius:12px;
  font-size:19px;
  line-height:1;
  flex:0 0 auto;
}
.brand h1 {
  margin:0;
  font-size:16px;
  flex:0 0 auto;
}
.top-actions {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
  flex:0 0 auto;
  min-width:0;
}
.workspace-trigger {
  min-width:0;
  max-width:min(340px, 30vw);
  flex:0 1 auto;
}
.brand-online {
  flex:1 1 auto;
  justify-content:flex-start;
  min-width:0;
  padding:0;
  position:relative;
  z-index:3;
}
.user-badge {
  display:flex;
  align-items:center;
  min-height:46px;
  padding:6px 8px 6px 10px;
  border-radius:15px;
  border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  color:var(--muted);
}
.profile-trigger {
  cursor:pointer;
  text-align:left;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.profile-trigger:hover {
  transform:translateY(-1px);
  border-color:rgba(142,232,255,.24);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
}
.profile-chip {
  gap:10px;
  min-width:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.profile-chip-copy {
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:max-content;
}
.profile-chip-label {
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(170,184,214,.78);
}
.user-badge b {
  color:var(--text);
  font-size:13px;
  line-height:1.1;
  white-space:nowrap;
}
.profile-avatar {
  position:relative;
  width:30px;
  height:30px;
  flex:0 0 30px;
  margin-left:2px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.1);
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
  overflow:hidden;
}
.profile-avatar img,
.online-pill img {
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  border-radius:999px;
}
.mobile-editor-backdrop,
.mobile-editor-btn,
.mobile-editor-close {
  display:none;
}
.profile-avatar.empty::before {
  content:"";
  position:absolute;
  top:6px;
  left:50%;
  width:10px;
  height:10px;
  transform:translateX(-50%);
  border-radius:999px;
  background:rgba(238,244,255,.82);
}
.profile-avatar.empty::after {
  content:"";
  position:absolute;
  left:50%;
  bottom:5px;
  width:18px;
  height:11px;
  transform:translateX(-50%);
  border-radius:12px 12px 8px 8px;
  background:rgba(238,244,255,.82);
}
.logout-form { margin:0; }
.top-link-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 13px;
  border-radius:14px;
  background:rgba(255,255,255,.08);
  color:var(--text);
  text-decoration:none;
  font-weight:800;
}
.topbar-action {
  min-height:42px;
  padding:0 12px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
  color:var(--text);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  transition:.18s ease;
}
.topbar-action:hover {
  transform:translateY(-1px);
  border-color:rgba(142,232,255,.24);
  background:linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.06));
}
button.topbar-action.secondary {
  background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.05));
  color:var(--text);
  border-color:rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
button.topbar-action.ghost,
.top-link-button.topbar-action {
  color:var(--text);
}
.topbar-action .action-text {
  display:block;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.impersonation-chip {
  max-width:360px;
}
.impersonation-chip .action-text {
  overflow:hidden;
  text-overflow:ellipsis;
}
body[data-impersonating="true"] .top-actions {
  gap:6px;
  margin-left:auto;
}
body[data-impersonating="true"] .profile-chip {
  max-width:220px;
}
body[data-impersonating="true"] .profile-chip-copy {
  min-width:0;
  max-width:170px;
}
body[data-impersonating="true"] .profile-chip-copy b {
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
}
body[data-impersonating="true"] .impersonation-chip {
  max-width:230px;
  padding:0 10px;
}
body[data-impersonating="true"] .workspace-trigger {
  max-width:min(220px, 18vw);
}
body[data-impersonating="true"] .brand-online {
  flex:0 1 auto;
  max-width:140px;
  overflow:hidden;
}
body[data-impersonating="true"] .online-users {
  gap:3px;
}
body[data-impersonating="true"] .online-count {
  display:none;
}
.action-icon {
  width:22px;
  height:22px;
  border-radius:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 22px;
  font-size:0;
  font-weight:900;
  letter-spacing:.06em;
  color:#eef4ff;
  background:rgba(255,255,255,.08);
  position:relative;
}
.action-icon::before {
  font-size:11px;
  line-height:1;
}
.action-icon svg {
  width:16px;
  height:16px;
  display:block;
}
.icon-projects svg {
  width:18px;
  height:18px;
}
.icon-svg::before {
  content:none;
}
.icon-projects { background:rgba(142,232,255,.14); color:#9fefff; }
.icon-projects::before { content:"\25a6"; }
.icon-export { background:rgba(126,245,182,.14); color:#baffd7; }
.icon-export::before { content:"\2197"; }
.icon-import { background:rgba(255,212,120,.14); color:#ffe2a0; }
.icon-import::before { content:"\2199"; }
.icon-backup { background:rgba(191,200,255,.14); color:#dfe4ff; }
.icon-backup::before { content:"\25f3"; }
.icon-restore { background:rgba(255,255,255,.1); color:#eef4ff; }
.icon-restore::before { content:"\27f3"; }
.icon-admin { background:rgba(255,111,146,.16); color:#ffd2de; }
.icon-admin::before { content:"\2699"; }
.icon-logout { background:rgba(255,255,255,.08); color:#eef4ff; }
.icon-logout::before { content:"\21aa"; }
.online-users { display:flex; align-items:center; gap:4px; min-height:30px; padding:0 2px; min-width:0; }
.online-count { color:var(--muted); font-size:11px; font-weight:700; padding-right:2px; white-space:nowrap; }
.online-pill {
  width:26px;
  height:26px;
  min-width:26px;
  min-height:26px;
  padding:0;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.08);
  color:#eef4ff;
  border:1px solid rgba(255,255,255,.12);
  font-weight:800;
  font-size:12px;
  box-shadow:0 4px 14px rgba(0,0,0,.2);
  overflow:visible;
  position:relative;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  flex:0 0 26px;
}
.online-tooltip {
  position:absolute;
  left:50%;
  top:calc(100% + 10px);
  transform:translateX(-50%) translateY(-4px);
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(10,14,26,.96);
  color:#eef4ff;
  font-size:12px;
  font-weight:700;
  line-height:1.35;
  white-space:nowrap;
  box-shadow:0 12px 28px rgba(0,0,0,.26);
  opacity:0;
  pointer-events:none;
  transition:.14s ease;
  z-index:30;
}
.online-tooltip::before {
  content:"";
  position:absolute;
  left:50%;
  top:-5px;
  width:8px;
  height:8px;
  transform:translateX(-50%) rotate(45deg);
  background:rgba(10,14,26,.96);
  border-left:1px solid rgba(255,255,255,.08);
  border-top:1px solid rgba(255,255,255,.08);
}
.online-pill:hover .online-tooltip,
.online-pill:focus-visible .online-tooltip {
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
.online-fallback {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  flex:0 0 16px;
  color:rgba(238,244,255,.9);
}
.online-fallback svg {
  width:16px;
  height:16px;
  display:block;
}
.online-pill-more {
  min-width:28px;
  width:auto;
  padding:0 8px;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.18), transparent 34%),
    linear-gradient(180deg, rgba(142,232,255,.18), rgba(142,232,255,.08));
  color:#dff9ff;
  border-color:rgba(142,232,255,.42);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 6px 18px rgba(18,42,62,.24);
  font-size:10px;
  font-weight:900;
  letter-spacing:.02em;
}
.online-all-btn {
  min-height:26px;
  padding:0 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:var(--text);
  font-size:11px;
  font-weight:800;
  box-shadow:none;
  position:relative;
  z-index:4;
  flex:0 0 auto;
  pointer-events:auto;
}
.online-all-btn:hover {
  border-color:rgba(142,232,255,.32);
  background:rgba(142,232,255,.1);
  color:var(--accent);
}
.online-empty { color:var(--muted); font-size:12px; padding:0 8px; }

.backup-modal.hidden { display:none; }
.backup-modal { position:fixed; inset:0; z-index:2100; }
.backup-modal-backdrop { position:absolute; inset:0; background:rgba(2,6,14,.72); backdrop-filter:blur(5px); }
.backup-modal-panel {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:min(720px, calc(100vw - 32px));
  max-height:min(78vh, 760px);
  display:flex;
  flex-direction:column;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(9,18,38,.97);
  box-shadow:0 24px 70px rgba(0,0,0,.45);
  overflow:hidden;
}
.backup-modal-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:18px 20px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.backup-modal-head h3 { margin:0; font-size:18px; }
.backup-modal-sub { margin-top:4px; color:var(--muted); font-size:13px; }
.backup-modal-controls {
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 20px 0;
}
.backup-modal-controls label {
  margin:0;
  min-width:42px;
}
.backup-modal-controls input {
  width:min(220px, 100%);
}
.backup-day-summary {
  margin:0 12px;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.035);
}
.backup-day-summary.hidden {
  display:none;
}
.backup-day-summary-title {
  color:var(--text);
  font-size:13px;
  font-weight:800;
}
.backup-day-summary-grid {
  margin-top:10px;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(100px, 1fr));
  gap:10px;
}
.backup-day-stat {
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  display:flex;
  flex-direction:column;
  gap:4px;
}
.backup-day-stat b {
  font-size:18px;
  color:var(--text);
}
.backup-day-stat span {
  color:var(--muted);
  font-size:11px;
  line-height:1.35;
}
.backup-list {
  padding:12px;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.backup-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.035);
}
.backup-row-main { min-width:0; }
.backup-row-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.backup-row-title { font-weight:700; color:var(--text); }
.backup-row-meta { margin-top:4px; color:var(--muted); font-size:12px; word-break:break-all; }
.backup-row-badges {
  display:flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.backup-badge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:22px;
  padding:0 9px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.09);
  color:var(--text);
  font-size:11px;
  font-weight:800;
}
.backup-badge.accent {
  background:rgba(142,232,255,.14);
  border-color:rgba(142,232,255,.24);
  color:#dff7ff;
}
.backup-badge.muted {
  background:rgba(255,194,92,.12);
  border-color:rgba(255,194,92,.2);
  color:#ffe2ac;
}
.backup-row button { flex:0 0 auto; }
.backup-empty { padding:24px 12px; color:var(--muted); text-align:center; }
.workspace-empty-state {
  position:absolute;
  left:50%;
  top:48%;
  transform:translate(-50%, -50%);
  width:min(420px, calc(100vw - 80px));
  padding:20px 22px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(12,18,34,.82);
  color:var(--muted);
  text-align:center;
  box-shadow:0 20px 42px rgba(0,0,0,.22);
}

.login-page {
  display:block;
  min-height:100vh;
  overflow:auto;
}
.login-shell {
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
}
.login-card {
  width:min(440px, 100%);
  border-radius:26px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(9,18,38,.95);
  box-shadow:0 24px 70px rgba(0,0,0,.45);
  padding:28px;
}
.login-brand h1 {
  margin:0;
  font-size:28px;
}
.login-brand p {
  margin:10px 0 0;
  color:var(--muted);
  line-height:1.6;
}
.login-form {
  margin-top:22px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.login-error {
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,111,146,.3);
  background:rgba(255,111,146,.12);
  color:#ffd3de;
  font-size:14px;
}
.login-success {
  margin-top:14px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(126,245,182,.28);
  background:rgba(126,245,182,.12);
  color:#d8ffe9;
  font-size:14px;
}
.admin-switch-banner {
  margin-top:16px;
}
.login-links,
.admin-links {
  margin-top:16px;
  display:flex;
  justify-content:center;
}
.button-link {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 16px;
  border-radius:16px;
  background:rgba(255,255,255,.08);
  color:var(--text);
  text-decoration:none;
  font-weight:800;
}
.admin-shell {
  align-items:start;
}
.admin-card {
  width:min(760px, 100%);
}
.admin-users {
  margin-top:22px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.admin-user-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
}
.admin-user-main { min-width:0; }
.admin-user-title { font-weight:800; }
.admin-user-meta {
  margin-top:4px;
  color:var(--muted);
  font-size:13px;
  word-break:break-all;
}
.admin-activity-panel {
  margin-top:14px;
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.03);
}
.admin-activity-head {
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(170,184,214,.78);
}
.admin-activity-list {
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
  max-height:220px;
  overflow:hidden;
}
.admin-activity-item {
  display:grid;
  grid-template-columns:132px 1fr;
  gap:12px;
  align-items:start;
}
.admin-activity-time {
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
}
.admin-activity-copy {
  min-width:0;
}
.admin-activity-action {
  color:var(--text);
  font-weight:700;
  line-height:1.35;
}
.admin-activity-detail {
  margin-top:3px;
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
  word-break:break-word;
}
.admin-activity-empty {
  margin-top:10px;
  color:var(--muted);
  font-size:13px;
}
.admin-activity-empty.big {
  padding:24px 10px;
  text-align:center;
}
.admin-activity-open {
  margin-top:12px;
  min-height:40px;
  padding:0 14px;
  border-radius:14px;
  align-self:flex-start;
}
.admin-activity-modal {
  width:min(920px, calc(100vw - 32px));
}
.admin-activity-toolbar {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:16px 20px 0;
}
.admin-activity-filter {
  min-height:38px;
  padding:0 14px;
  border-radius:999px;
}
.admin-activity-filter.active {
  background:linear-gradient(135deg, rgba(142,232,255,.18), rgba(191,200,255,.16));
  border-color:rgba(142,232,255,.32);
}
.admin-activity-modal-list {
  padding:18px 20px 20px;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.admin-activity-modal-item {
  display:grid;
  grid-template-columns:160px 1fr;
  gap:16px;
  padding:16px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.035);
}
.admin-activity-modal-time {
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
}
.admin-activity-modal-copy {
  min-width:0;
}
.admin-activity-modal-tag {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:0 10px;
  border-radius:999px;
  background:rgba(142,232,255,.12);
  color:var(--accent);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.admin-activity-modal-action {
  margin-top:8px;
  color:var(--text);
  font-weight:800;
  line-height:1.4;
}
.admin-activity-modal-detail {
  margin-top:4px;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
  word-break:break-word;
}
.admin-user-tools {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
}
.admin-user-actions { margin:0; }

.image-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.images-help { color: var(--muted); font-size:12px; }
.image-gallery { display:grid; grid-template-columns: repeat(2, 1fr); gap:10px; }
.audio-list {
  display:flex;
  flex-direction:column;
  gap:10px;
}
.audio-item {
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.audio-item-head {
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:start;
  gap:10px;
}
.audio-item-title {
  min-width:0;
  color:var(--text);
  font-size:13px;
  font-weight:800;
  line-height:1.45;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.audio-item-meta {
  color:var(--muted);
  font-size:12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.audio-item-remove {
  width:28px;
  height:28px;
  min-height:28px;
  min-width:28px;
  padding:0;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(12,18,34,.78);
  color:#fff;
  font-size:17px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 28px;
  align-self:start;
  box-shadow:0 6px 14px rgba(0,0,0,.22);
  position:relative;
  z-index:1;
}
.audio-item-remove:hover,
.audio-item-remove:focus-visible {
  background:rgba(255,102,142,.22);
}
.image-thumb {
  position:relative; border:1px solid var(--border); border-radius:16px; overflow:hidden;
  background:rgba(255,255,255,.04); min-height:110px;
}
.image-thumb img { width:100%; height:110px; object-fit:cover; display:block; }
.image-thumb .remove-image {
  position:absolute; top:8px; right:8px; width:28px; height:28px; border-radius:999px;
  border:0; cursor:pointer; background:rgba(10,18,34,.88); color:#fff; box-shadow:none; padding:0;
  z-index:2;
}
.image-thumb .img-meta { padding:8px 10px; color:var(--muted); font-size:11px; }
.node.has-image { overflow: hidden; }
.node.no-image { overflow: hidden; }
.node .image-preview {
  position: relative;
  margin: -20px -20px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)),
    radial-gradient(circle at center, rgba(142,232,255,.08), transparent 65%);
}
.node .image-preview-inner {
  width: 100%;
  height: 100%;
  padding: 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(8, 17, 33, 0.28);
}
.node .image-preview img { width:100%; height:100%; object-fit:contain; display:block; image-rendering:auto; }
.node .image-preview.empty {
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--muted);
}
.node .image-empty-mark {
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .8;
}
.node .image-count-badge {
  position:absolute;
  right:10px;
  top:10px;
  min-width:28px;
  height:28px;
  padding:0 8px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(8,17,33,.82);
  color:#eef4ff;
  border:1px solid rgba(255,255,255,.14);
  font-size:12px;
  font-weight:800;
}
.node .image-count-badge.compact {
  right:6px;
  top:6px;
  min-width:20px;
  height:20px;
  padding:0 6px;
  font-size:10px;
}
.node .title-wrap { padding-top: 4px; }
.layout { display:grid; grid-template-columns: 360px 1fr; gap:14px; padding:12px; min-height:0; }
.panel { background: var(--panel); border:1px solid var(--border); border-radius:22px; box-shadow:var(--shadow); overflow:hidden; }
.left-panel { display:flex; flex-direction:column; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
.section { padding:18px; border-bottom:1px solid rgba(255,255,255,.06); }
.section h2 { margin:0 0 10px; font-size:13px; letter-spacing:.04em; text-transform:uppercase; }
.help { color:var(--muted); font-size:14px; line-height:1.55; }
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.mt10 { margin-top: 10px; }
label { display:block; color:var(--muted); font-size:13px; margin-bottom:6px; }
input, textarea, select {
  width:100%; border-radius:16px; border:1px solid var(--border); background:rgba(255,255,255,.05);
  color:var(--text); padding:12px 14px; outline:none; font-size:14px;
}
textarea { min-height:150px; resize:vertical; max-width:100%; }
select { appearance:none; background-image: linear-gradient(45deg, transparent 50%, #dce8ff 50%), linear-gradient(135deg, #dce8ff 50%, transparent 50%); background-position: calc(100% - 20px) calc(50% - 3px), calc(100% - 14px) calc(50% - 3px); background-size: 6px 6px, 6px 6px; background-repeat:no-repeat; }
select, select option { background:#172540; color:#eef4ff; }
.toggle-line { display:flex; align-items:center; gap:10px; min-height:52px; padding:0 14px; border-radius:16px; border:1px solid var(--border); background:rgba(255,255,255,.05); color:var(--text); cursor:pointer; }
.toggle-line input { width:auto; margin:0; accent-color:#8ee8ff; }
.actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
.actions .full { grid-column:1 / -1; }
button { border:0; border-radius:16px; padding:12px 14px; cursor:pointer; font-weight:800; font-size:14px; color:#09111f; background:linear-gradient(135deg, var(--accent), #d4f6ff); box-shadow:0 8px 22px rgba(142,232,255,.22); }
button.secondary { background:linear-gradient(135deg, var(--accent2), #dfe3ff); }
button.ghost { background:rgba(255,255,255,.08); color:var(--text); box-shadow:none; }
button.danger { background:linear-gradient(135deg, #ff7b9c, #ff7097); color:white; }
.meta-box { margin-top:14px; padding:14px; border-radius:16px; border:1px solid var(--border); background:rgba(255,255,255,.04); color:var(--muted); line-height:1.65; font-size:14px; }
.tree-panel { position:relative; min-height:0; overflow:hidden; }
.toolbar { position:absolute; z-index:8; top:12px; left:12px; right:12px; display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px 14px; background:rgba(4,11,20,.72); border:1px solid var(--border); border-radius:18px; backdrop-filter:blur(8px); }
.toolbar .status { display:flex; flex-wrap:wrap; gap:16px; color:var(--muted); font-size:14px; }
.toolbar .buttons { display:flex; gap:8px; }
.toolbar .buttons button { padding:10px 13px; min-width:46px; }
.tree-search {
  display:flex;
  align-items:center;
  gap:8px;
  min-width:320px;
  max-width:520px;
  margin-left:auto;
}
.tree-search input {
  flex:1 1 auto;
  min-width:0;
  min-height:42px;
}
.tree-search-controls {
  display:flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
}
.tree-search-count {
  min-width:44px;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  text-align:center;
}
.tree-search-controls button {
  min-width:38px;
  min-height:38px;
  padding:0 10px;
}
.project-search {
  display:grid;
  gap:8px;
  margin:10px 0 12px;
}
.project-search-row {
  display:flex;
  align-items:center;
  gap:8px;
}
.project-search-row input {
  flex:1 1 auto;
  min-width:0;
  min-height:40px;
}
.project-search-controls {
  display:flex;
  align-items:center;
  gap:6px;
}
.project-search-results {
  display:grid;
  gap:6px;
  max-height:260px;
  overflow:auto;
  padding-right:2px;
}
.project-search-result,
.project-search-empty {
  width:100%;
  text-align:left;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.035);
  padding:10px 12px;
}
.project-search-result {
  display:grid;
  gap:3px;
}
.project-search-result.active {
  border-color:rgba(125,200,255,.3);
  background:rgba(125,200,255,.1);
}
.project-search-result-type {
  color:#9fc8ff;
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.project-search-result-title {
  color:var(--text);
  font-weight:800;
}
.project-search-result-sub,
.project-search-empty {
  color:var(--muted);
  font-size:12px;
  line-height:1.4;
}
.node-group-panel {
  margin:12px 0 14px;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.025));
}
.node-link-panel {
  margin:12px 0 14px;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,214,122,.07), rgba(255,255,255,.025));
}
.node-group-panel-head,
.node-link-panel-head,
.node-group-actions,
.node-group-grid {
  display:grid;
  gap:10px;
}
.node-group-panel-head {
  grid-template-columns:1fr auto;
  align-items:center;
  margin-bottom:10px;
}
.node-link-panel-head {
  grid-template-columns:1fr auto;
  align-items:center;
  margin-bottom:10px;
}
.node-group-panel-title {
  font-size:13px;
  font-weight:900;
  color:var(--text);
  letter-spacing:.04em;
  text-transform:uppercase;
}
.node-link-panel-title {
  font-size:13px;
  font-weight:900;
  color:var(--text);
  letter-spacing:.04em;
  text-transform:uppercase;
}
.node-group-grid {
  grid-template-columns:1fr 1fr;
  margin-bottom:10px;
}
.node-group-actions {
  grid-template-columns:1fr 1fr;
  margin-bottom:10px;
}
.danger-ghost {
  color:#ffbfd2;
  border-color:rgba(255, 120, 175, .18);
  background:rgba(255, 120, 175, .08);
}
.danger-ghost:hover {
  border-color:rgba(255, 120, 175, .45);
  background:rgba(255, 120, 175, .14);
}
.node-group-hint {
  min-height:44px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  color:var(--muted);
  font-size:12px;
  display:flex;
  align-items:center;
}
.group-color-row {
  display:flex;
  align-items:center;
  gap:8px;
}
.group-color-row .ghost {
  min-height:40px;
  white-space:nowrap;
}
.important-color-row {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}
.important-color-row.disabled {
  opacity:.52;
}
.important-color-swatch {
  min-width:72px;
  min-height:32px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:var(--text);
  font-size:11px;
  font-weight:800;
  cursor:pointer;
  transition:border-color .12s ease, box-shadow .12s ease, transform .12s ease, opacity .12s ease;
}
.important-color-swatch:hover:not(:disabled) {
  transform:translateY(-1px);
}
.important-color-swatch:disabled {
  cursor:not-allowed;
}
.important-color-swatch[data-important-color="default"] {
  background:linear-gradient(180deg, #4d2844, #33203f);
  border-color:rgba(255,132,184,.55);
}
.important-color-swatch[data-important-color="amber"] {
  background:linear-gradient(180deg, #57411f, #3a2c18);
  border-color:rgba(255,202,92,.55);
}
.important-color-swatch[data-important-color="cyan"] {
  background:linear-gradient(180deg, #193f55, #162a3d);
  border-color:rgba(118,228,255,.55);
}
.important-color-swatch[data-important-color="violet"] {
  background:linear-gradient(180deg, #40275d, #2e1e49);
  border-color:rgba(202,154,255,.55);
}
.important-color-swatch.active {
  box-shadow:0 0 0 2px rgba(255,255,255,.16), 0 0 18px rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.45);
}
.node-link-hint {
  min-height:44px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  color:var(--muted);
  font-size:12px;
  display:flex;
  align-items:center;
  margin-bottom:10px;
}
.node-link-list {
  display:grid;
  gap:10px;
}
.node-link-item {
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}
.node-link-copy {
  min-width:0;
}
.node-link-direction {
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#ffd88a;
}
.node-link-target {
  font-size:13px;
  font-weight:800;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.node-link-empty {
  padding:10px 12px;
  border-radius:14px;
  border:1px dashed rgba(255,255,255,.12);
  color:var(--muted);
  font-size:12px;
}
.tree-group-overlay {
  position:absolute;
  border-radius:28px;
  border:1px solid color-mix(in srgb, var(--group-color) 78%, white 12%);
  background:color-mix(in srgb, var(--group-color) 10%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--group-color) 16%, transparent);
  pointer-events:none;
  z-index:0;
}
.tree-group-title {
  position:absolute;
  top:-14px;
  left:18px;
  max-width:calc(100% - 36px);
  padding:6px 12px;
  border-radius:999px;
  background:color-mix(in srgb, var(--group-color) 22%, rgba(7,14,27,.96));
  border:1px solid color-mix(in srgb, var(--group-color) 72%, white 10%);
  color:#eef7ff;
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.tree-switcher {
  position:absolute;
  z-index:8;
  top:86px;
  left:12px;
  right:280px;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:14px 16px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(8,18,34,.88), rgba(8,18,34,.68));
  backdrop-filter:blur(10px);
  transition:.18s ease;
}
.tree-switcher-mode {
  display:flex;
  gap:8px;
}
.tree-mode-btn {
  min-height:36px;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  color:var(--muted);
  font-weight:800;
}
.tree-mode-btn.active {
  color:var(--text);
  border-color:rgba(142,232,255,.4);
  background:rgba(142,232,255,.12);
}
.tree-switcher.collapsed {
  opacity:0;
  pointer-events:none;
  transform:translateY(-10px);
}
.project-pages-view {
  position:absolute;
  inset:170px 12px 12px 12px;
  overflow:auto;
  padding:6px;
  z-index:3;
}
.page-board {
  min-height:100%;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(8,18,34,.88), rgba(8,18,34,.74));
  box-shadow:var(--shadow);
  padding:18px;
}
.page-board-head {
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-start;
  margin-bottom:14px;
}
.page-board-title {
  font-size:24px;
  font-weight:900;
}
.page-board-sub {
  color:var(--muted);
  font-size:13px;
  margin-top:6px;
}
.page-board-actions {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.page-board-toolbar {
  display:grid;
  grid-template-columns:minmax(0,1fr) 220px;
  gap:10px;
  margin-bottom:12px;
}
.page-board-search,
.page-board-toolbar select {
  min-height:42px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);
  color:var(--text);
  padding:10px 14px;
  font-size:14px;
}
.page-board-search::placeholder {
  color:rgba(213,223,255,.52);
}
.page-board-empty {
  padding:28px;
  border-radius:20px;
  border:1px dashed rgba(255,255,255,.12);
  color:var(--muted);
  text-align:center;
}
.page-table-wrap {
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  overflow:hidden;
  background:rgba(255,255,255,.02);
}
.page-table {
  width:100%;
  border-collapse:collapse;
}
.page-table th,
.page-table td {
  padding:12px 10px;
  border-bottom:1px solid rgba(255,255,255,.06);
  vertical-align:top;
}
.page-table th {
  text-align:left;
  font-size:12px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--muted);
  background:rgba(255,255,255,.03);
}
.page-table td input[type="text"],
.page-table td input[type="date"],
.page-table td textarea,
.page-table td select {
  width:100%;
}
.page-table td textarea {
  min-height:74px;
  resize:vertical;
}
.page-row-check {
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:40px;
}
.page-row-meta {
  font-size:11px;
  color:var(--muted);
  margin-top:6px;
  line-height:1.5;
}
.page-row-actions {
  display:flex;
  justify-content:flex-end;
}
.page-row-important td {
  background:linear-gradient(180deg, rgba(255,188,92,.08), rgba(255,188,92,.03));
}
.page-row-focused td {
  box-shadow:inset 0 0 0 1px rgba(125,200,255,.28);
  background:linear-gradient(180deg, rgba(125,200,255,.12), rgba(125,200,255,.04));
}
.page-status-chips {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:14px 0 12px;
}
.page-status-chip {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:var(--muted);
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}
.page-status-chip.primary {
  color:#ffd88a;
  border-color:rgba(255,216,138,.28);
  background:rgba(255,216,138,.08);
}
.page-status-chip.active {
  color:#dff4ff;
  border-color:rgba(125,200,255,.38);
  background:rgba(125,200,255,.14);
  box-shadow:0 0 0 1px rgba(125,200,255,.12) inset;
}
.page-status-chip-remove {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  border-radius:999px;
  background:rgba(255,255,255,.09);
  color:inherit;
  font-size:12px;
  line-height:1;
}
.page-tabs-empty {
  padding:10px 14px;
  border-radius:16px;
  border:1px dashed rgba(255,255,255,.12);
  color:var(--muted);
}
body.workspace-pages-mode .left-panel,
body.workspace-pages-mode #viewport,
body.workspace-pages-mode #minimap,
body.workspace-pages-mode .mobile-editor-btn {
  display:none;
}
body.workspace-pages-mode .tree-panel {
  grid-column:1 / -1;
}
.tree-panel.compact #viewport {
  top:92px;
}
.tree-panel.compact #minimap {
  top:92px;
}
.tree-switcher-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.tree-switcher-label {
  color:var(--muted);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.tree-switcher-project {
  margin-top:4px;
  font-size:17px;
  font-weight:800;
  color:var(--text);
}
.tree-tabs {
  position:relative;
  display:flex;
  gap:10px;
  overflow:auto;
  padding-bottom:2px;
}
.tree-tab {
  min-width:0;
  flex:0 0 auto;
  max-width:240px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:var(--muted);
  cursor:pointer;
  white-space:nowrap;
  transition:.15s ease;
  box-shadow:none;
}
.tree-tab-title {
  max-width:180px;
  overflow:hidden;
  text-overflow:ellipsis;
}
.tree-tab-delete {
  width:24px;
  height:24px;
  padding:0;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:var(--muted);
  font-size:14px;
  box-shadow:none;
  opacity:0;
  transition:.15s ease;
}
.tree-tab:hover .tree-tab-delete,
.tree-tab.active .tree-tab-delete {
  opacity:1;
}
.tree-tab-delete:hover {
  color:#fff;
  background:rgba(255,111,146,.22);
}
.tree-tab-input {
  width:180px;
  min-width:120px;
  padding:8px 10px;
  border-radius:12px;
}
.tree-tab-more {
  min-width:72px;
  justify-content:center;
}
.tree-tab:hover {
  border-color:rgba(142,232,255,.28);
  color:var(--text);
}
.tree-tab.dragging {
  opacity:.5;
}
.tree-tab.drag-over {
  border-color:rgba(142,232,255,.56);
  box-shadow:0 0 0 2px rgba(142,232,255,.18);
}
.tree-tab.active {
  background:linear-gradient(135deg, rgba(142,232,255,.18), rgba(191,200,255,.16));
  border-color:rgba(142,232,255,.4);
  color:var(--text);
  box-shadow:0 8px 24px rgba(0,0,0,.18);
}
.tree-tab-index {
  width:24px;
  height:24px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:800;
  background:rgba(255,255,255,.08);
}
.tree-overflow-menu {
  position:absolute;
  top:100%;
  right:0;
  margin-top:8px;
  min-width:240px;
  max-width:320px;
  max-height:320px;
  overflow:auto;
  padding:8px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(8,18,34,.96);
  box-shadow:0 18px 40px rgba(0,0,0,.32);
}
.tree-overflow-menu.hidden {
  display:none;
}
.tree-overflow-item {
  width:100%;
  display:block;
  text-align:left;
  padding:12px 14px;
  border-radius:14px;
  background:transparent;
  color:var(--muted);
  box-shadow:none;
}
.tree-overflow-item:hover,
.tree-overflow-item.active {
  background:rgba(255,255,255,.06);
  color:var(--text);
}
#viewport {
  position:absolute; left:0; right:0; bottom:0; top:176px; overflow:hidden; cursor:grab;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 44px 44px; background-position: center center;
}
#viewport.dragging { cursor:grabbing; }
#links, #nodes { position:absolute; inset:0; width:100%; height:100%; }
#links { pointer-events:none; }
.node {
  position:absolute; border-radius:22px; border:1px solid rgba(255,255,255,.11);
  background:linear-gradient(180deg, var(--card2), var(--card)); color:var(--text);
  box-shadow:var(--shadow); cursor:pointer; user-select:none; overflow:hidden;
  transition:border-color .12s ease, box-shadow .12s ease, background .12s ease;
  backface-visibility:hidden; transform:translateZ(0);
}
.node:hover { border-color:rgba(142,232,255,.55); }
.node.selected { border-color:var(--accent); box-shadow:0 0 0 2px rgba(142,232,255,.18), var(--shadow); }
.node.local-highlight { box-shadow:0 0 0 2px rgba(255,210,120,.55), 0 0 30px rgba(255,210,120,.18), var(--shadow); border-color:rgba(255,210,120,.9); }
.node.important {
  background:linear-gradient(180deg, var(--node-important-top, #4d2844), var(--node-important-bottom, #33203f));
  border-color:var(--node-important-accent, rgba(255,132,184,.95));
  box-shadow:0 0 0 2px var(--node-important-ring, rgba(255,120,175,.18)), 0 0 28px var(--node-important-glow, rgba(255,120,175,.18)), var(--shadow);
}
.node.search-hit:not(.selected) { box-shadow:0 0 0 2px rgba(112, 255, 196, .18), 0 0 24px rgba(112, 255, 196, .12), var(--shadow); border-color:rgba(112, 255, 196, .9); }
.node.group-colored:not(.important) {
  border-color:color-mix(in srgb, var(--node-group-accent) 68%, white 14%);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--node-group-accent) 18%, transparent), var(--shadow);
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--node-group-accent) 18%, transparent), transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--node-group-accent) 12%, var(--card2)), color-mix(in srgb, var(--node-group-accent) 8%, var(--card)));
}
.node.link-source-armed {
  border-color:#ffd88a;
  box-shadow:0 0 0 3px rgba(255, 216, 138, .18), 0 0 30px rgba(255, 216, 138, .18), var(--shadow);
}
.node[draggable="true"] { cursor:grab; }
.node.dragging-node {
  opacity:.58;
  cursor:grabbing;
  transform:scale(.985);
}
.node.drop-target {
  border-color:rgba(142,232,255,.98);
  box-shadow:0 0 0 3px rgba(142,232,255,.22), 0 0 34px rgba(142,232,255,.16), var(--shadow);
}
.node.drop-target::after {
  content:attr(data-drop-label);
  position:absolute;
  right:14px;
  top:12px;
  padding:5px 10px;
  border-radius:999px;
  background:rgba(7, 17, 34, .88);
  border:1px solid rgba(142,232,255,.38);
  color:#dff8ff;
  font-size:11px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  pointer-events:none;
  z-index:4;
}
.node.drop-into {
  box-shadow:
    inset 0 0 0 3px rgba(142,232,255,.88),
    inset 0 0 26px rgba(142,232,255,.08),
    0 0 0 3px rgba(142,232,255,.18),
    0 0 34px rgba(142,232,255,.16),
    var(--shadow);
}
.node.drop-before {
  box-shadow:inset 6px 0 0 rgba(142,232,255,.95), 0 0 0 3px rgba(142,232,255,.18), 0 0 34px rgba(142,232,255,.16), var(--shadow);
}
.node.drop-after {
  box-shadow:inset -6px 0 0 rgba(142,232,255,.95), 0 0 0 3px rgba(142,232,255,.18), 0 0 34px rgba(142,232,255,.16), var(--shadow);
}
.node .title, .node .tags, .node .desc, .node .foot { backface-visibility:hidden; transform:translateZ(0); }
.node .desc {
  white-space: pre-wrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.node-notes-indicator {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid rgba(142, 232, 255, .22);
  background:rgba(142, 232, 255, .10);
  color:#bfefff;
  font-weight:700;
  letter-spacing:.01em;
}
.node-notes-indicator.compact {
  gap:4px;
  padding:4px 8px;
}
.node-notes-indicator::before {
  content:'';
  width:7px;
  height:7px;
  border-radius:999px;
  background:currentColor;
  box-shadow:0 0 10px rgba(142, 232, 255, .35);
}
.node-notes-indicator.compact::before {
  width:6px;
  height:6px;
}
.node-notes-corner {
  position:absolute;
  top:0;
  right:0;
  width:0;
  height:0;
  border-top:14px solid rgba(142, 232, 255, .95);
  border-left:14px solid transparent;
  filter: drop-shadow(0 0 6px rgba(142, 232, 255, .28));
  pointer-events:none;
}
.node-audio-corner {
  position:absolute;
  top:0;
  left:0;
  width:0;
  height:0;
  border-top:14px solid rgba(255, 194, 92, .98);
  border-right:14px solid transparent;
  filter: drop-shadow(0 0 6px rgba(255, 194, 92, .28));
  pointer-events:none;
}
.hint { color:var(--muted); font-size:12px; margin-top:8px; }
.bottom-spacer { height:18px; }
#minimap { position:absolute; right:16px; top:92px; z-index:7; width:240px; height:150px; border-radius:16px; border:1px solid rgba(255,255,255,.12); background:rgba(6,14,26,.84); box-shadow:0 10px 28px rgba(0,0,0,.35); overflow:hidden; backdrop-filter: blur(8px); }
#minimapTitle { position:absolute; right:10px; top:8px; z-index:2; font-size:11px; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; pointer-events:none; text-align:right; }
#minimapSvg { width:100%; height:100%; display:block; background: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size: 20px 20px; cursor:pointer; }
@media (max-width: 1200px) {
  .layout { grid-template-columns:1fr; }
  .left-panel { max-height:50vh; }
  #minimap { width:190px; height:120px; }
  .brand {
    width:100%;
    flex-wrap:wrap;
    align-items:flex-start;
  }
  .brand-online {
    width:100%;
  }
  .top-actions {
    width:100%;
    justify-content:flex-start;
  }
  .tree-switcher {
    right:16px;
  }
  #viewport {
    top:200px;
  }
  .tree-panel.compact #viewport {
    top:92px;
  }
}
@media (max-width: 900px) {
  .topbar {
    align-items:flex-start;
    padding:12px;
  }
  .user-badge {
    width:100%;
    justify-content:space-between;
  }
  .topbar-action,
  .top-link-button.topbar-action {
    min-height:44px;
    padding:0 14px;
  }
  .action-icon {
    width:26px;
    height:26px;
  }
  .profile-showcase {
    grid-template-columns:1fr;
  }
  .profile-showcase-avatar {
    max-width:140px;
  }
  .team-profile-top {
    grid-template-columns:56px 1fr;
  }
  .team-profile-presence {
    grid-column:1 / -1;
    justify-self:start;
  }
  .tree-switcher {
    top:132px;
    right:12px;
  }
  #minimap {
    top:auto;
    bottom:16px;
  }
  #viewport {
    top:250px;
  }
  .tree-panel.compact #viewport {
    top:132px;
  }
}


@media (max-width: 700px) {
  html, body {
    overflow:auto;
    height:auto;
    min-height:100%;
  }
  body {
    display:block;
  }
  .topbar {
    position:sticky;
    top:0;
    z-index:40;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    padding:10px;
  }
  .brand {
    width:100%;
    flex-wrap:nowrap;
    align-items:center;
    gap:10px;
  }
  .brand h1 {
    font-size:15px;
  }
  .brand-online {
    min-width:0;
    overflow-x:auto;
    justify-content:flex-start;
  }
  .top-actions {
    width:100%;
    flex-wrap:nowrap;
    overflow-x:auto;
    justify-content:flex-start;
    padding-bottom:2px;
    scrollbar-width:thin;
  }
  .top-actions::-webkit-scrollbar,
  .brand-online::-webkit-scrollbar,
  .tree-tabs::-webkit-scrollbar {
    height:6px;
  }
  .top-actions::-webkit-scrollbar-thumb,
  .brand-online::-webkit-scrollbar-thumb,
  .tree-tabs::-webkit-scrollbar-thumb {
    background:rgba(255,255,255,.14);
    border-radius:999px;
  }
  .topbar-action,
  .top-link-button.topbar-action,
  .workspace-trigger,
  .profile-trigger,
  .impersonation-chip {
    flex:0 0 auto;
    max-width:none;
  }
  .profile-trigger {
    min-width:220px;
  }
  .topbar-action .action-text {
    font-size:13px;
  }
  .layout {
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:10px;
  }
  .tree-panel {
    order:1;
    min-height:68dvh;
    display:flex;
    flex-direction:column;
  }
  .left-panel {
    order:2;
    max-height:none;
    overflow:visible;
  }
  .section {
    padding:14px;
  }
  .row2,
  .actions {
    grid-template-columns:1fr;
  }
  .toolbar {
    position:relative;
    top:auto;
    left:auto;
    right:auto;
    margin:10px 10px 0;
    flex-direction:column;
    align-items:stretch;
    padding:12px;
  }
  .toolbar .status {
    gap:8px 12px;
    font-size:12px;
  }
  .toolbar .buttons {
    width:100%;
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:8px;
  }
  .toolbar .buttons button {
    min-width:0;
    width:100%;
    padding:10px 8px;
  }
  .tree-switcher {
    position:relative;
    top:auto;
    left:auto;
    right:auto;
    margin:10px;
    border-radius:18px;
    padding:12px;
  }
  .tree-switcher-head {
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }
  .tree-switcher-head > button {
    width:100%;
  }
  .tree-switcher-project {
    font-size:15px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .tree-tabs {
    gap:8px;
  }
  .tree-tab {
    max-width:180px;
    padding:10px 12px;
  }
  .tree-tab-title {
    max-width:110px;
  }
  #viewport {
    position:relative;
    top:auto;
    left:auto;
    right:auto;
    bottom:auto;
    flex:1 1 auto;
    min-height:54dvh;
  }
  .tree-panel.compact #viewport,
  .tree-panel.compact #minimap {
    top:auto;
  }
  #minimap {
    width:132px;
    height:92px;
    right:10px;
    top:10px;
    bottom:auto;
  }
  #minimapTitle {
    font-size:9px;
    top:6px;
    right:8px;
  }
  .backup-modal-panel,
  .projects-modal-panel,
  .project-members-panel,
  .team-profiles-panel {
    width:min(100vw - 16px, 100%);
    max-height:min(90dvh, 100%);
    border-radius:18px;
  }
  .backup-modal-head,
  .project-members-headline {
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }
  .projects-modal-actions {
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .project-cards {
    grid-template-columns:1fr;
    padding:14px;
  }
  .project-card {
    padding:16px;
  }
  .project-card-head {
    gap:12px;
  }
  .project-card-avatar {
    width:54px;
    height:54px;
    flex-basis:54px;
  }
  .project-card-title {
    font-size:17px;
  }
  .project-card .tree-manager-actions {
    width:calc(100% - 54px);
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .project-members-layout,
  .profile-editor-grid,
  .team-profiles-grid {
    grid-template-columns:1fr;
  }
  .project-summary-avatar {
    width:84px;
    height:84px;
    flex-basis:84px;
  }
  .chat-panel {
    width:100%;
    height:min(82dvh, calc(100dvh - 84px));
  }
  .chat-panel-head {
    padding:14px 16px;
  }
  .chat-panel-body {
    grid-template-columns:1fr;
  }
  .chat-sidebar {
    max-height:180px;
  }
  .chat-composer {
    padding:14px 16px 16px;
  }
  .chat-message-images {
    grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
  }
  .lightbox-panel {
    width:min(100vw - 16px, 100%);
    max-height:min(92dvh, 100%);
  }
  .lightbox-content {
    padding:14px;
  }
}


/* Enhanced image layouts */
.image-gallery {
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
}
.image-thumb {
  position:relative;
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  background:rgba(255,255,255,.04);
  min-height:150px;
}
.image-thumb.dragging {
  opacity:.45;
  transform:scale(.98);
}
.image-thumb.drag-over {
  outline:2px dashed rgba(142,232,255,.75);
  outline-offset:2px;
}
.image-thumb img {
  width:100%;
  height:140px;
  object-fit:contain;
  display:block;
  background:rgba(255,255,255,.03);
}
.image-thumb .img-meta {
  padding:8px 10px;
  color:var(--muted);
  font-size:11px;
}
.image-order-hint {
  position:absolute;
  left:8px;
  top:8px;
  min-width:24px;
  height:24px;
  padding:0 8px;
  border-radius:999px;
  background:rgba(8,17,33,.86);
  border:1px solid rgba(255,255,255,.12);
  color:#eef4ff;
  font-size:11px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.node {
  min-height:330px;
}
.node .image-preview {
  position:relative;
  overflow:hidden;
}
.node .image-preview.many .image-preview-grid {
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:8px;
  width:100%;
  align-items:center;
  justify-items:center;
}
.node .image-preview.two .image-preview-grid {
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:10px;
  width:82%;
  align-items:center;
  justify-items:center;
}
.node .image-preview.one .image-preview-grid {
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
}
.node .image-preview-cell {
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.node .image-preview-cell img {
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  display:block;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.18));
}
.node .image-preview.one .image-preview-cell {
  width:40%;
}
.node .image-preview.two .image-preview-cell {
  width:100%;
}
.node .image-preview.many .image-preview-cell {
  width:100%;
}
.node .image-preview.clickable {
  cursor:zoom-in;
}
.node .image-preview.empty .image-empty-mark {
  font-size:13px;
}
.lightbox.hidden {
  display:none;
}
.lightbox {
  position:fixed;
  inset:0;
  z-index:2000;
}
.lightbox-backdrop {
  position:absolute;
  inset:0;
  background:rgba(2,6,14,.76);
  backdrop-filter:blur(4px);
}
.lightbox-panel {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 80px;
}
.lightbox-content {
  position:relative;
  z-index:2;
  max-width:min(92vw, 1400px);
  max-height:88vh;
  padding:18px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(9,18,38,.96);
  box-shadow:0 24px 70px rgba(0,0,0,.45);
}
.lightbox-content img {
  display:block;
  max-width:min(88vw, 1300px);
  max-height:76vh;
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:16px;
  background:rgba(255,255,255,.03);
}
.lightbox-caption {
    margin-top:12px;
    color:var(--muted);
    font-size:13px;
    text-align:center;
  }
.lightbox-actions {
    margin-top:12px;
    display:flex;
    justify-content:center;
  }
.lightbox-download {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:40px;
    padding:0 16px;
    border-radius:14px;
    border:1px solid rgba(133,220,255,.22);
    background:rgba(133,220,255,.08);
    color:var(--accent);
    font-size:13px;
    font-weight:800;
    text-decoration:none;
  }
.lightbox-download:hover,
.lightbox-download:focus-visible {
    background:rgba(133,220,255,.14);
  }
.lightbox-close,
.lightbox-nav {
  position:absolute;
  z-index:3;
  border:0;
  border-radius:999px;
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(8,17,33,.9);
  color:#eef4ff;
  font-size:28px;
  line-height:1;
  padding:0 0 2px;
  cursor:pointer;
  box-shadow:none;
}
.lightbox-close {
  top:28px;
  right:28px;
}
.lightbox-nav.prev {
  left:22px;
  top:50%;
  transform:translateY(-50%);
}
.lightbox-nav.next {
  right:22px;
  top:50%;
  transform:translateY(-50%);
}
@media (max-width: 900px) {
  .lightbox-panel { padding:26px 18px; }
  .lightbox-nav { width:42px; height:42px; }
}

@media (max-width: 700px) {
  .lightbox-nav.prev,
  .lightbox-nav.next {
    top:42dvh;
    transform:translateY(-50%);
  }
}


.lightbox-panel {
  pointer-events: auto;
}
.lightbox-content,
.lightbox-close,
.lightbox-nav {
  pointer-events: auto;
}
.lightbox-close,
.lightbox-nav {
  z-index: 5;
}


.image-preview-cell {
  position: relative;
}
.image-missing-text {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,.55);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.04em;
  pointer-events:none;
}
.projects-modal-panel {
  width:min(920px, calc(100vw - 32px));
}
.profiles-modal-panel {
  width:min(1120px, calc(100vw - 32px));
}
.online-modal-panel {
  width:min(820px, calc(100vw - 32px));
}
.online-modal-list {
  padding:18px;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:14px;
  overflow:auto;
}
.online-modal-card {
  display:grid;
  grid-template-columns:56px 1fr auto;
  gap:14px;
  align-items:center;
  width:100%;
  padding:16px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at top right, rgba(142,232,255,.12), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  color:var(--text);
  text-align:left;
  box-shadow:none;
}
.online-modal-card:hover {
  border-color:rgba(142,232,255,.34);
  transform:translateY(-1px);
}
.online-modal-avatar {
  width:56px;
  height:56px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  display:flex;
  align-items:center;
  justify-content:center;
  color:#eef4ff;
  font-weight:900;
}
.online-modal-avatar img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.online-modal-avatar.empty span {
  font-size:22px;
}
.online-modal-main {
  min-width:0;
}
.online-modal-name {
  font-size:16px;
  font-weight:900;
  color:var(--text);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.online-modal-meta {
  margin-top:4px;
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
}
.online-modal-state {
  align-self:start;
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(126,245,182,.28);
  background:rgba(126,245,182,.14);
  color:#bbffd8;
  font-size:12px;
  font-weight:800;
}
.profiles-featured {
  padding:18px 18px 0;
}
.profile-showcase {
  display:grid;
  grid-template-columns:1.4fr 180px;
  gap:20px;
  padding:22px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--profile-accent) 24%, transparent), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
}
.profile-showcase-kicker {
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(170,184,214,.78);
}
.profile-showcase-name {
  margin-top:8px;
  font-size:34px;
  font-weight:900;
  line-height:1.05;
  color:var(--text);
}
.profile-showcase-role {
  margin-top:8px;
  font-size:16px;
  color:color-mix(in srgb, var(--profile-accent) 82%, white);
  font-weight:700;
}
.profile-showcase-badges,
.team-profile-tags {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
}
.profile-tag {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:0 12px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  color:var(--text);
  border:1px solid rgba(255,255,255,.08);
  font-size:12px;
  font-weight:700;
}
.profile-tag.online {
  color:#caffdf;
  border-color:rgba(126,245,182,.32);
  background:rgba(126,245,182,.12);
}
.profile-showcase-copy {
  margin-top:16px;
  color:var(--text);
  font-size:15px;
  line-height:1.65;
  max-width:72ch;
}
.profile-showcase-focus {
  margin-top:12px;
  color:var(--muted);
  line-height:1.6;
}
.profile-contact-line {
  margin-top:12px;
  color:#d9e4ff;
  line-height:1.6;
  overflow-wrap:anywhere;
}
.profile-showcase-footer,
.team-profile-footer {
  margin-top:auto;
  padding-top:16px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
}
.profile-last-online {
  margin-left:auto;
  text-align:right;
  color:rgba(170,184,214,.82);
  font-size:12px;
  line-height:1.45;
}
.profile-showcase-avatar,
.team-profile-avatar {
  width:100%;
  aspect-ratio:1;
  border-radius:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  overflow:hidden;
}
.profile-showcase-avatar img,
.team-profile-avatar img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.profile-showcase-avatar.empty span,
.team-profile-avatar.empty span {
  font-size:42px;
  font-weight:900;
  color:color-mix(in srgb, var(--profile-accent, #bfc8ff) 78%, white);
}
.profiles-grid {
  padding:18px;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(270px, 1fr));
  gap:14px;
  overflow:auto;
  align-items:start;
}
.team-profile-card {
  padding:18px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--profile-accent) 18%, transparent), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  min-height:290px;
  display:flex;
  flex-direction:column;
}
.team-profile-card.current {
  border-color:color-mix(in srgb, var(--profile-accent) 45%, rgba(255,255,255,.08));
  box-shadow:0 14px 30px rgba(0,0,0,.18);
}
.team-profile-top {
  display:grid;
  grid-template-columns:64px 1fr auto;
  gap:14px;
  align-items:center;
}
.team-profile-avatar {
  width:64px;
  border-radius:18px;
}
.team-profile-avatar.empty span {
  font-size:24px;
}
.team-profile-main {
  min-width:0;
}
.team-profile-name {
  font-size:20px;
  font-weight:900;
  color:var(--text);
  overflow-wrap:anywhere;
}
.team-profile-role {
  margin-top:4px;
  color:color-mix(in srgb, var(--profile-accent) 82%, white);
  font-weight:700;
  overflow-wrap:anywhere;
}
.team-profile-presence {
  min-height:30px;
  padding:0 12px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.06);
  color:var(--muted);
  font-size:12px;
  font-weight:700;
}
.team-profile-presence.online {
  background:rgba(126,245,182,.12);
  color:#caffdf;
}
.team-profile-status {
  margin-top:14px;
  color:var(--text);
  line-height:1.55;
}
.team-profile-bio,
.team-profile-focus {
  margin-top:12px;
  color:var(--muted);
  line-height:1.55;
  overflow-wrap:anywhere;
}
.projects-modal-actions {
  display:flex;
  align-items:center;
  gap:10px;
}
.project-cards {
  padding:18px;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:14px;
  overflow:auto;
}
.workspace-list-empty {
  grid-column:1 / -1;
  padding:18px;
  border-radius:18px;
  border:1px dashed rgba(255,255,255,.12);
  color:var(--muted);
  text-align:center;
  background:rgba(255,255,255,.03);
}
.tree-tabs-empty {
  padding:12px 16px;
  color:var(--muted);
}
.tree-manager-list {
  grid-template-columns:1fr;
  max-height:60vh;
}
.project-card {
  position:relative;
  padding:18px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  cursor:pointer;
  transition:.16s ease;
  box-shadow:none;
  color:var(--text);
  text-align:left;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.project-card-head {
  display:flex;
  align-items:flex-start;
  gap:14px;
}
.project-card-head-main {
  min-width:0;
  flex:1 1 auto;
}
.project-card-avatar,
.project-summary-avatar {
  width:60px;
  height:60px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  display:flex;
  align-items:center;
  justify-content:center;
  color:#eef6ff;
  font-weight:800;
  flex:0 0 60px;
}
.project-summary-avatar {
  width:96px;
  height:96px;
  border-radius:26px;
  flex:0 0 96px;
}
.project-card-avatar.empty,
.project-summary-avatar.empty {
  color:rgba(238,246,255,.96);
  background:
    radial-gradient(circle at 30% 22%, rgba(142,232,255,.22), transparent 38%),
    radial-gradient(circle at 75% 80%, rgba(160,190,255,.18), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border-color:rgba(142,232,255,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.project-card-avatar img,
.project-summary-avatar img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.project-card-avatar span,
.project-summary-avatar span {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  font-size:22px;
  letter-spacing:.04em;
  text-shadow:0 4px 16px rgba(0,0,0,.24);
}
.project-summary-avatar span {
  font-size:30px;
}
.project-card-info {
  position:absolute;
  right:14px;
  bottom:14px;
  top:auto;
  width:42px;
  height:42px;
  border-radius:999px;
  border:1px solid rgba(142,232,255,.2);
  background:linear-gradient(180deg, rgba(142,232,255,.14), rgba(255,255,255,.04));
  color:#eef6ff;
  box-shadow:0 8px 18px rgba(0,0,0,.16);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.16s ease;
}
.project-card-info:hover {
  border-color:rgba(142,232,255,.4);
  background:linear-gradient(180deg, rgba(142,232,255,.22), rgba(142,232,255,.1));
  color:var(--accent);
  transform:translateY(-1px) scale(1.02);
}
.project-card-info-icon {
  display:block;
  width:auto;
  height:auto;
  border:none;
  font-size:21px;
  font-weight:800;
  line-height:1;
  font-family:ui-sans-serif, system-ui, sans-serif;
  text-transform:none;
  transform:translateY(-1px);
}
.project-card:hover {
  transform:translateY(-2px);
  border-color:rgba(142,232,255,.34);
}
.project-card.dragging {
  opacity:.52;
  transform:scale(.985);
}
.project-card.drag-over {
  border-color:rgba(142,232,255,.56);
  box-shadow:0 0 0 2px rgba(142,232,255,.18);
}
.project-card.active {
  border-color:rgba(142,232,255,.44);
  box-shadow:0 12px 28px rgba(0,0,0,.22);
}
.project-card-title {
  font-size:18px;
  font-weight:800;
  color:var(--text);
  padding-right:0;
  display:block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.project-card-meta {
  margin-top:10px;
  color:var(--muted);
  font-size:13px;
  line-height:1.6;
}
.project-card-delete {
  background:rgba(255,111,146,.14);
  color:#ffd7e1;
  box-shadow:none;
}
.project-card-delete:hover {
  background:rgba(255,111,146,.22);
}
.tree-manager-card {
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.tree-manager-card .project-card-meta {
  margin-top:10px;
}
.tree-manager-head {
  display:flex;
  align-items:center;
  gap:12px;
}
.tree-manager-title {
  font-size:17px;
  font-weight:800;
  color:var(--text);
}
.tree-manager-main {
  min-width:0;
  flex:1 1 auto;
}
.tree-manager-name {
  font-size:18px;
  font-weight:800;
  color:var(--text);
  cursor:text;
  user-select:none;
}
.tree-manager-input {
  width:100%;
}
.tree-manager-actions {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-start;
  margin-top:16px;
}
.tree-manager-open {
  padding:9px 13px;
  border-radius:14px;
  background:rgba(142,232,255,.12);
  color:var(--text);
  box-shadow:none;
  font-size:13px;
}
.project-card .tree-manager-actions {
  align-self:flex-start;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, max-content));
  grid-auto-rows:minmax(38px, auto);
  gap:10px;
  width:calc(100% - 58px);
  margin-top:18px;
}
.project-card .tree-manager-actions > button {
  width:auto;
}
.project-create-body {
  display:flex;
  flex-direction:column;
  gap:16px;
}
.project-members-panel {
  width:min(860px, calc(100vw - 32px));
  max-height:min(88vh, 900px);
}
.project-members-summary {
  padding:0 20px 18px;
  flex:0 0 auto;
}
.project-summary-avatar-card {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  padding:16px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
}
#projectOpenChatBtn {
  width:100%;
  justify-content:center;
}
.project-card-chat {
  min-height:38px;
  padding:0 14px;
}
.project-members-layout {
  display:grid;
  grid-template-columns:1.15fr .95fr;
  gap:18px;
  padding:0 20px 20px;
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
}
.project-members-headline {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:0 20px 12px;
}
.project-members-title {
  font-size:15px;
  font-weight:800;
  color:var(--text);
}
.project-members-list {
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:0 20px 20px;
  max-height:46vh;
  overflow:auto;
}
.project-members-list-secondary {
  max-height:40vh;
}
.project-member-row,
.project-member-picker {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.035);
}
.project-member-row.addable {
  background:rgba(142,232,255,.04);
}
.project-member-main {
  min-width:0;
  flex:1 1 auto;
}
.project-member-name {
  font-size:15px;
  font-weight:800;
  color:var(--text);
}
.project-member-meta {
  margin-top:4px;
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
}
.project-member-tools {
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.project-member-tools select {
  min-width:154px;
}
.project-member-badge {
  display:inline-flex;
  align-items:center;
  min-height:38px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.05);
  color:var(--text);
  font-size:12px;
  font-weight:700;
}
.project-member-picker-main {
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
  flex:1 1 auto;
}
.project-member-picker input[type="checkbox"] {
  width:18px;
  height:18px;
}
.tree-manager-open:hover {
  background:rgba(142,232,255,.2);
}
.tree-manager-card.drag-over {
  border-color:rgba(142,232,255,.56);
  box-shadow:0 0 0 2px rgba(142,232,255,.18);
}
@media (max-width: 900px) {
  .impersonation-chip {
    max-width:100%;
  }
  .admin-user-row {
    flex-direction:column;
    align-items:stretch;
  }
  .admin-user-tools {
    justify-content:flex-start;
  }
  .tree-manager-card {
    align-items:flex-start;
    flex-direction:column;
  }
  .project-members-layout {
    grid-template-columns:1fr;
  }
  .project-member-row,
  .project-member-picker {
    flex-direction:column;
    align-items:flex-start;
  }
  .tree-manager-actions {
    width:100%;
    justify-content:flex-start;
  }
  .admin-activity-item {
    grid-template-columns:1fr;
    gap:4px;
  }
  .admin-activity-modal-item {
    grid-template-columns:1fr;
    gap:8px;
  }
}
.ui-modal-panel {
  width:min(520px, calc(100vw - 32px));
}
.ui-modal-body {
  padding:18px 20px 0;
}
.ui-modal-body p {
  margin:0;
  color:var(--text);
  line-height:1.6;
  white-space:pre-line;
}
.ui-modal-actions {
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding:18px 20px 20px;
}
.project-members-panel .ui-modal-actions {
  flex:0 0 auto;
  position:sticky;
  bottom:0;
  z-index:2;
  background:linear-gradient(180deg, rgba(9,18,38,.18), rgba(9,18,38,.98) 26%);
  border-top:1px solid rgba(255,255,255,.08);
}
.profile-showcase-actions,
.team-profile-actions {
  margin-top:0;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.team-profile-actions {
  margin-top:0;
  padding-top:0;
}
.profile-showcase-actions button,
.team-profile-actions button {
  min-height:42px;
  padding:0 16px;
  border-radius:14px;
}
.profile-editor-panel {
  width:min(980px, calc(100vw - 32px));
}
.profile-editor-layout {
  display:grid;
  grid-template-columns:280px minmax(0, 1fr);
  gap:18px;
  padding:18px 20px 0;
  overflow:auto;
}
.profile-editor-avatar-card {
  position:sticky;
  top:0;
  align-self:start;
  padding:18px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at top right, rgba(142,232,255,.14), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  display:flex;
  flex-direction:column;
  gap:14px;
}
.profile-editor-avatar {
  width:100%;
  aspect-ratio:1;
  border-radius:26px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  display:flex;
  align-items:center;
  justify-content:center;
}
.profile-editor-avatar img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.profile-editor-avatar.empty span {
  font-size:56px;
  font-weight:900;
  color:rgba(238,244,255,.86);
}
.profile-editor-avatar-hint {
  color:var(--muted);
  font-size:12px;
  line-height:1.6;
}
.profile-editor-form {
  min-width:0;
  padding:2px 0 8px;
}
.profile-editor-form label {
  display:block;
  margin-bottom:8px;
}
.profile-editor-form input,
.profile-editor-form textarea {
  width:100%;
}
.profile-editor-form textarea {
  min-height:124px;
  resize:vertical;
}
@media (max-width: 900px) {
  .profile-editor-layout {
    grid-template-columns:1fr;
  }
  .profile-editor-avatar-card {
    position:relative;
  }
}

/* Strong final override for team profile cards to prevent overlap */
.profiles-grid {
  display:flex;
  flex-wrap:wrap;
  align-content:flex-start;
  gap:14px;
}
.team-profile-card {
  position:relative;
  overflow:hidden;
  flex:1 1 320px;
  min-width:280px;
  max-width:calc(33.333% - 10px);
}
.team-profile-top {
  display:flex;
  align-items:flex-start;
  gap:14px;
}
.team-profile-main {
  flex:1 1 auto;
  min-width:0;
}
.team-profile-presence {
  margin-left:auto;
  flex:0 0 auto;
}
.team-profile-actions {
  width:100%;
  display:flex;
  justify-content:flex-start;
}
@media (max-width: 1100px) {
  .team-profile-card {
    max-width:calc(50% - 7px);
  }
}
@media (max-width: 760px) {
  .team-profile-card {
    max-width:100%;
    min-width:100%;
  }
  .profile-showcase-footer,
  .team-profile-footer {
    flex-direction:column;
    align-items:flex-start;
  }
  .profile-last-online {
    margin-left:0;
    text-align:left;
  }
}

.chat-dock {
    position:fixed;
    right:18px;
    bottom:18px;
  z-index:1700;
  display:flex;
  flex-direction:column-reverse;
  align-items:flex-end;
    gap:12px;
  }
.chat-dock.collapsed {
    pointer-events:none;
  }
.chat-dock.collapsed .chat-toggle-btn {
    pointer-events:auto;
  }
.toast-stack {
  position:fixed;
  right:22px;
  bottom:116px;
  z-index:1750;
  width:min(360px, calc(100vw - 28px));
  display:flex;
  flex-direction:column;
  gap:10px;
  pointer-events:none;
}
.app-toast {
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  padding:12px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(circle at top left, rgba(142,232,255,.14), transparent 34%),
    linear-gradient(180deg, rgba(11,21,42,.97), rgba(7,14,28,.97));
  box-shadow:0 22px 54px rgba(0,0,0,.34);
  pointer-events:auto;
}
.app-toast.info {
  border-color:rgba(142,232,255,.24);
}
.app-toast.ping {
  border-color:rgba(255,194,92,.34);
}
.app-toast.important {
  border-color:rgba(255,111,146,.32);
}
.app-toast.closing {
  opacity:0;
  transform:translateY(8px);
  transition:.18s ease;
}
.app-toast-body,
.app-toast-close {
  min-height:0;
}
.app-toast-body {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  padding:0;
  background:none;
  border:none;
  box-shadow:none;
  color:var(--text);
  text-align:left;
}
.app-toast-body:hover {
  transform:none;
}
.app-toast-kicker {
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.app-toast-title {
  font-size:15px;
  font-weight:900;
  line-height:1.35;
}
.app-toast-message {
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}
.app-toast-close {
  width:34px;
  height:34px;
  padding:0;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);
  color:var(--text);
  box-shadow:none;
}
.app-toast-close:hover {
  transform:none;
  border-color:rgba(255,255,255,.2);
}
.chat-toggle-btn {
  min-height:48px;
  padding:0 16px;
  border-radius:18px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(142,232,255,.24);
  background:
    radial-gradient(circle at top left, rgba(142,232,255,.18), transparent 32%),
    linear-gradient(180deg, rgba(18,31,60,.96), rgba(10,19,39,.96));
  color:var(--text);
  box-shadow:0 18px 46px rgba(0,0,0,.28);
}
.chat-toggle-badge {
  min-width:24px;
  height:24px;
  padding:0 7px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(142,232,255,.16);
  border:1px solid rgba(142,232,255,.26);
  color:#dff7ff;
  font-size:11px;
  font-weight:900;
}
.chat-toggle-badge.hidden {
  display:none;
}
.chat-toggle-badge.ping {
  background:rgba(255,194,92,.18);
  border-color:rgba(255,194,92,.28);
  color:#ffe3b0;
}
.chat-toggle-icon {
  width:28px;
  height:28px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(142,232,255,.14);
  font-size:14px;
}
.chat-toggle-text {
  font-weight:800;
  letter-spacing:.02em;
}
.chat-panel {
  width:min(760px, calc(100vw - 24px));
  height:min(820px, calc(100vh - 56px));
  display:flex;
  flex-direction:column;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.1);
  background:
    radial-gradient(circle at top right, rgba(142,232,255,.09), transparent 26%),
    linear-gradient(180deg, rgba(8,16,33,.98), rgba(7,13,27,.98));
  box-shadow:0 26px 70px rgba(0,0,0,.42);
  overflow:hidden;
  transition:.22s ease;
}
.chat-dock.collapsed .chat-panel {
  opacity:0;
  transform:translateY(14px) scale(.98);
  pointer-events:none;
}
.chat-panel-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.chat-panel-head-actions {
  display:flex;
  align-items:center;
  gap:8px;
}
.chat-sidebar-toggle-btn {
  display:none;
}
.chat-panel-head h3 {
  margin:2px 0 0;
  font-size:20px;
}
.chat-panel-kicker {
  color:var(--muted);
  font-size:10px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.chat-panel-body {
  flex:1 1 auto;
  min-height:0;
  display:grid;
  grid-template-columns:208px minmax(0, 1fr);
}
.chat-sidebar {
  min-width:0;
  border-right:1px solid rgba(255,255,255,.08);
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:16px;
  overflow:auto;
}
.chat-sidebar-section {
  display:flex;
  flex-direction:column;
  gap:10px;
}
.chat-sidebar-title {
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.chat-channel-list,
.chat-direct-list {
  display:flex;
  flex-direction:column;
  gap:8px;
}
.chat-nav-wrap {
  position:relative;
}
.chat-nav-wrap.drag-over .chat-nav-item {
  border-color:rgba(142,232,255,.42);
  box-shadow:0 0 0 1px rgba(142,232,255,.14), 0 10px 22px rgba(0,0,0,.16);
}
.chat-nav-item {
  width:100%;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  color:var(--text);
  text-align:left;
  box-shadow:none;
}
.chat-nav-item.global {
  background:
    radial-gradient(circle at top left, rgba(142,232,255,.18), transparent 34%),
    linear-gradient(180deg, rgba(20,38,69,.92), rgba(12,24,45,.94));
  border-color:rgba(142,232,255,.28);
}
.chat-nav-item:hover {
  border-color:rgba(142,232,255,.28);
  transform:translateY(-1px);
}
.chat-nav-item.active {
  border-color:rgba(142,232,255,.36);
  background:
    radial-gradient(circle at top left, rgba(142,232,255,.12), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  box-shadow:0 10px 22px rgba(0,0,0,.16);
}
.chat-nav-item.has-unread {
  border-color:rgba(142,232,255,.2);
}
.chat-nav-item.has-ping {
  border-color:rgba(255,194,92,.34);
  box-shadow:0 0 0 1px rgba(255,194,92,.08), 0 10px 22px rgba(0,0,0,.16);
}
.chat-nav-item.has-important:not(.active) {
  background:
    radial-gradient(circle at top left, rgba(255,194,92,.12), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
}
.chat-nav-item.has-ultra:not(.active) {
  border-color:rgba(142,232,255,.34);
  box-shadow:0 0 0 1px rgba(142,232,255,.08), 0 10px 22px rgba(0,0,0,.16);
}
.chat-nav-close {
  position:absolute;
  top:10px;
  right:10px;
  width:28px;
  height:28px;
  padding:0;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(9,16,31,.78);
  color:var(--muted);
  box-shadow:none;
  z-index:2;
}
.chat-nav-close:hover {
  color:var(--text);
  border-color:rgba(255,255,255,.22);
  transform:none;
}
.chat-nav-title {
  font-weight:800;
  font-size:14px;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.chat-nav-title-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.chat-nav-badges {
  display:flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
}
.chat-badge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:22px;
  padding:0 8px;
  border-radius:999px;
  background:rgba(142,232,255,.14);
  color:#dff7ff;
  font-size:11px;
  font-weight:900;
  border:1px solid rgba(142,232,255,.24);
}
.chat-badge.ping {
  background:rgba(255,194,92,.16);
  color:#ffe0a6;
  border-color:rgba(255,194,92,.28);
}
.chat-badge.important {
  background:rgba(255,111,146,.14);
  color:#ffdbe5;
  border-color:rgba(255,111,146,.24);
}
.chat-badge.ultra {
  background:rgba(142,232,255,.16);
  color:#ddf8ff;
  border-color:rgba(142,232,255,.28);
}
.chat-nav-meta {
  margin-top:4px;
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.chat-nav-project-meta {
  margin-top:6px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.chat-project-chip {
  display:inline-flex;
  align-items:center;
  align-self:flex-start;
  min-height:24px;
  padding:0 10px;
  border-radius:999px;
  background:rgba(142,232,255,.12);
  border:1px solid rgba(142,232,255,.2);
  color:#dff7ff;
  font-size:11px;
  font-weight:800;
  max-width:100%;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.chat-nav-meta-line {
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.chat-main {
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
}
.chat-thread-head {
  padding:10px 14px 8px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.chat-thread-title {
  font-size:17px;
  font-weight:900;
  color:var(--text);
}
.chat-thread-meta {
  display:none;
  margin-top:3px;
  color:var(--muted);
  font-size:12px;
}
.chat-thread-tools {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.chat-thread-search {
  min-width:0;
  flex:1 1 auto;
}
.chat-thread-search input {
  width:100%;
  min-height:34px;
  border-radius:12px;
}
.chat-thread-filters {
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.chat-thread-filter {
  min-height:30px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);
  color:var(--muted);
  font-size:10px;
  font-weight:800;
  box-shadow:none;
}
.chat-thread-filter.active {
  color:var(--text);
  border-color:rgba(142,232,255,.28);
  background:rgba(142,232,255,.1);
}
.chat-highlights-panel {
  display:flex;
  gap:8px;
  padding:8px 14px 0;
  overflow-x:auto;
  scrollbar-width:thin;
}
.chat-highlight-card {
  flex:0 0 180px;
  min-width:180px;
  max-width:220px;
  padding:8px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
}
.chat-highlight-card.pinned {
  border-color:rgba(255,255,255,.14);
}
.chat-highlight-card.important {
  border-color:rgba(255,194,92,.22);
  background:
    radial-gradient(circle at top left, rgba(255,194,92,.1), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
}
.chat-highlight-card.ultra {
  border-color:rgba(142,232,255,.22);
  background:
    radial-gradient(circle at top left, rgba(142,232,255,.12), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
}
.chat-highlight-head {
  width:100%;
  min-height:24px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  border:none;
  background:none;
  color:var(--text);
  box-shadow:none;
}
.chat-highlight-title {
  font-size:11px;
  font-weight:900;
}
.chat-highlight-count {
  min-width:22px;
  height:22px;
  padding:0 6px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.08);
  color:var(--muted);
  font-size:11px;
  font-weight:900;
}
.chat-highlight-list {
  margin-top:6px;
  display:flex;
  flex-direction:column;
  gap:5px;
}
.chat-highlight-toggle {
  width:100%;
  min-height:26px;
  margin-top:6px;
  padding:0 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  box-shadow:none;
}
.chat-highlight-toggle:hover {
  color:var(--text);
  border-color:rgba(142,232,255,.22);
}
.chat-highlight-item {
  width:100%;
  padding:7px 8px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.04);
  color:var(--text);
  text-align:left;
  box-shadow:none;
}
.chat-highlight-item-author {
  display:block;
  font-size:10px;
  font-weight:800;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.chat-highlight-item-text {
  display:block;
  margin-top:2px;
  font-size:11px;
  line-height:1.3;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.chat-messages {
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  padding:10px 14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.chat-message {
  max-width:min(720px, 92%);
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.03));
  box-shadow:0 10px 22px rgba(0,0,0,.12);
}
.chat-message.mine {
  align-self:flex-end;
  background:
    radial-gradient(circle at top left, rgba(142,232,255,.12), transparent 30%),
    linear-gradient(180deg, rgba(21,54,92,.8), rgba(13,35,65,.88));
  border-color:rgba(142,232,255,.22);
}
.chat-message.important {
  border-color:rgba(255,194,92,.42);
  background:
    radial-gradient(circle at top left, rgba(255,194,92,.14), transparent 36%),
    linear-gradient(180deg, rgba(39,31,16,.88), rgba(18,20,31,.92));
  box-shadow:0 0 0 1px rgba(255,194,92,.14), 0 16px 34px rgba(0,0,0,.18);
}
.chat-message.ultra {
  position:relative;
  border-color:rgba(255,112,154,.72);
  background:
    radial-gradient(circle at top left, rgba(255,112,154,.24), transparent 34%),
    radial-gradient(circle at top right, rgba(255,74,122,.14), transparent 28%),
    linear-gradient(180deg, rgba(66,20,42,.96), rgba(24,12,27,.98));
  box-shadow:
    0 0 0 1px rgba(255,112,154,.24),
    0 0 0 2px rgba(255,112,154,.08),
    0 18px 40px rgba(0,0,0,.24),
    0 0 34px rgba(255,74,122,.16);
}
.chat-message.ultra::before {
  content:"";
  position:absolute;
  left:0;
  top:14px;
  bottom:14px;
  width:5px;
  border-radius:999px;
  background:linear-gradient(180deg, #ff9fbe, #ff5b93);
  box-shadow:0 0 18px rgba(255,112,154,.42);
}
.chat-message-flag {
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:28px;
  margin-bottom:10px;
  padding:0 12px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,194,92,.24), rgba(255,194,92,.14));
  border:1px solid rgba(255,194,92,.34);
  color:#ffe4ac;
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.chat-message-flag.ultra {
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.18), transparent 38%),
    linear-gradient(180deg, rgba(255,128,176,.34), rgba(255,79,134,.2));
  border-color:rgba(255,112,154,.58);
  color:#fff0f6;
  box-shadow:0 0 0 1px rgba(255,112,154,.14), 0 0 18px rgba(255,112,154,.18);
}
.chat-message.ultra .chat-message-meta {
  color:#ffd7e5;
  font-family:"Bahnschrift", "Arial Narrow", "Trebuchet MS", "Segoe UI", sans-serif;
  letter-spacing:.05em;
  text-transform:uppercase;
  font-size:11px;
}
.chat-message.ultra .chat-message-text {
  color:#fff7fa;
  font-weight:800;
  font-family:"Bahnschrift", "Arial Narrow", "Trebuchet MS", "Segoe UI", sans-serif;
  font-size:15px;
  line-height:1.7;
  letter-spacing:.03em;
  text-shadow:0 0 18px rgba(255,112,154,.12);
  padding:12px 14px;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
  border:1px solid rgba(255,112,154,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.chat-message.ultra .chat-message-flag {
  font-family:"Bahnschrift", "Arial Narrow", "Trebuchet MS", "Segoe UI", sans-serif;
  letter-spacing:.16em;
  font-size:10px;
  margin-right:0;
}
.chat-message.ultra .chat-message-actions {
  padding:10px 12px;
  border-radius:16px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,112,154,.14);
}
.chat-message.ultra .chat-message-seen,
.chat-message.ultra .chat-message-pin {
  background:rgba(255,255,255,.05);
  border-color:rgba(255,112,154,.2);
  color:#fff1f6;
}
.chat-message-meta {
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
}
.chat-message-pin {
  display:inline-flex;
  align-items:center;
  min-height:24px;
  margin-top:8px;
  padding:0 10px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  color:#e4eeff;
  font-size:11px;
  font-weight:800;
}
.chat-message-text {
  margin-top:8px;
  color:var(--text);
  font-size:14px;
  line-height:1.6;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
.chat-message-seen {
  margin-top:10px;
  padding:0;
  border:none;
  background:none;
  color:var(--muted);
  font-size:11px;
  text-align:right;
  align-self:flex-end;
  cursor:pointer;
  box-shadow:none;
}
.chat-message-seen:hover {
  color:#dff7ff;
  transform:none;
}
.chat-message-actions {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}
.chat-message-action {
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  box-shadow:none;
}
.chat-message-action.active {
  background:rgba(255,255,255,.1);
  color:#fff;
  border-color:rgba(255,255,255,.16);
}
.chat-message-action.active.important {
  background:rgba(255,194,92,.14);
  color:#ffe4ac;
  border-color:rgba(255,194,92,.28);
}
.chat-message-action.active.ultra {
  background:rgba(142,232,255,.14);
  color:#ddf8ff;
  border-color:rgba(142,232,255,.28);
}
.chat-message-flash {
  box-shadow:0 0 0 2px rgba(142,232,255,.22), 0 0 34px rgba(142,232,255,.18);
}
.chat-message-images {
  margin-top:12px;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px, 180px));
  gap:10px;
}
.chat-image-card {
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:10px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:var(--text);
}
.chat-message-audios {
  margin-top:12px;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 220px));
  gap:10px;
}
.chat-audio-card {
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:var(--text);
}
.chat-audio-card-head {
  display:flex;
  align-items:center;
  gap:10px;
}
.chat-audio-card-icon,
.chat-attachment-audio-icon {
  width:36px;
  height:36px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,194,92,.12);
  color:#ffd482;
  border:1px solid rgba(255,194,92,.22);
  flex:0 0 36px;
}
.chat-audio-card-icon svg,
.chat-attachment-audio-icon svg {
  width:18px;
  height:18px;
  display:block;
}
.chat-audio-card-meta {
  min-width:0;
}
.chat-audio-card-title {
  color:var(--text);
  font-size:12px;
  font-weight:800;
  line-height:1.35;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.chat-audio-card-size {
  margin-top:3px;
  color:var(--muted);
  font-size:11px;
}
.chat-audio-card audio,
.chat-attachment-chip.audio audio,
.audio-item audio {
  width:100%;
  display:block;
}
.chat-image-preview {
  padding:0;
  border:none;
  background:transparent;
  border-radius:12px;
  overflow:hidden;
  cursor:pointer;
  display:block;
}
.chat-image-card img {
  width:100%;
  aspect-ratio:1 / 1;
  object-fit:cover;
  border-radius:12px;
  display:block;
}
.chat-image-download {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:0 12px;
  border-radius:12px;
  border:1px solid rgba(133,220,255,.22);
  background:rgba(133,220,255,.08);
  color:var(--accent);
  font-size:12px;
  font-weight:800;
  text-decoration:none;
}
.chat-image-preview:hover img,
.chat-image-preview:focus-visible img {
  transform:scale(1.02);
}
.chat-image-card img {
  transition:transform .16s ease;
}
.chat-image-download:hover,
.chat-image-download:focus-visible {
  background:rgba(133,220,255,.14);
}
.chat-composer {
  padding:10px 14px 12px;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;
  flex-direction:column;
  gap:8px;
}
.chat-input,
#chatInput {
  min-height:62px;
  max-height:108px;
  resize:vertical;
}
.chat-composer-actions {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  flex-wrap:wrap;
}
.chat-composer-left,
.chat-composer-right {
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.chat-important-toggle {
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:34px;
  padding:0 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:var(--text);
  cursor:pointer;
  font-size:12px;
  font-weight:700;
}
.chat-important-toggle input {
  accent-color:#ffc25c;
}
.chat-attachments-info {
  color:var(--muted);
  font-size:11px;
}
.chat-attachment-preview {
  display:none;
  gap:10px;
  overflow-x:auto;
  padding-bottom:2px;
}
.chat-attachment-preview.has-items {
  display:flex;
}
.chat-attachment-chip {
  position:relative;
  min-width:116px;
  width:116px;
  padding:8px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:0 0 auto;
}
.chat-attachment-chip.audio {
  width:180px;
  min-width:180px;
}
.chat-attachment-chip img {
  width:100%;
  aspect-ratio:1 / 1;
  object-fit:cover;
  border-radius:12px;
  display:block;
}
.chat-attachment-chip.audio audio {
  border-radius:12px;
}
.chat-attachment-chip-meta {
  min-width:0;
}
.chat-attachment-chip-name {
  color:var(--text);
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.chat-attachment-chip-size {
  color:var(--muted);
  font-size:11px;
  margin-top:2px;
}
.chat-attachment-chip-remove {
  position:absolute;
  top:6px;
  right:6px;
  width:24px;
  height:24px;
  min-height:24px;
  padding:0;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(12,18,34,.78);
  color:#fff;
  font-size:16px;
  line-height:1;
}
.chat-attachment-chip-remove:hover,
.chat-attachment-chip-remove:focus-visible {
  background:rgba(255,102,142,.22);
}
@media (max-width: 980px) {
  .chat-panel {
    width:min(100vw - 20px, 620px);
    height:min(74vh, calc(100vh - 94px));
  }
  .chat-panel-body {
    grid-template-columns:1fr;
  }
  .chat-sidebar {
    border-right:none;
    border-bottom:1px solid rgba(255,255,255,.08);
    max-height:220px;
  }
}
@media (max-width: 700px) {
  .chat-dock {
    left:10px;
    right:10px;
    bottom:10px;
    align-items:stretch;
  }
  .toast-stack {
    left:10px;
    right:10px;
    bottom:84px;
    width:auto;
  }
  .chat-toggle-btn {
    width:100%;
    justify-content:center;
  }
  .chat-panel {
    width:100%;
    height:min(76vh, calc(100vh - 86px));
  }
  .chat-message {
    max-width:100%;
  }
}

/* Final mobile app-style override */
@media (max-width: 700px) {
  html, body {
    height:100%;
    overflow:hidden;
  }
  body {
    display:grid;
    grid-template-rows:auto 1fr;
  }
  .topbar {
    position:sticky;
    top:0;
    z-index:80;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    padding:8px 10px 10px;
  }
  .brand {
    width:100%;
    gap:8px;
    align-items:center;
    flex-wrap:nowrap;
  }
  .brand h1 {
    font-size:17px;
    font-weight:800;
    min-width:max-content;
  }
  .brand-online {
    flex:1 1 auto;
    min-width:0;
    justify-content:flex-end;
    overflow-x:auto;
    padding:0 0 1px;
  }
  .brand-online .online-count {
    font-size:11px;
    flex:0 0 auto;
  }
  .top-actions {
    width:100%;
    flex-wrap:nowrap;
    overflow-x:auto;
    justify-content:flex-start;
    gap:6px;
    padding:0 1px 4px;
    overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
  }
  .top-actions > * {
    scroll-snap-align:start;
  }
  .top-actions::-webkit-scrollbar,
  .brand-online::-webkit-scrollbar,
  .tree-tabs::-webkit-scrollbar {
    height:5px;
  }
  .top-actions::-webkit-scrollbar-thumb,
  .brand-online::-webkit-scrollbar-thumb,
  .tree-tabs::-webkit-scrollbar-thumb {
    background:rgba(255,255,255,.16);
    border-radius:999px;
  }
  .profile-trigger,
  .workspace-trigger,
  .topbar-action,
  .top-link-button.topbar-action,
  .impersonation-chip {
    flex:0 0 auto;
    max-width:min(72vw, 240px);
    min-height:38px;
    padding:6px 10px;
    border-radius:14px;
  }
  .profile-trigger {
    min-width:186px;
    max-width:min(76vw, 250px);
  }
  .workspace-trigger {
    min-width:170px;
    max-width:min(78vw, 260px);
  }
  .profile-chip-copy {
    min-width:0;
  }
  .user-badge b,
  .topbar-action .action-text,
  .impersonation-chip .action-text {
    font-size:12px;
    display:block;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .action-icon {
    width:20px;
    height:20px;
    flex:0 0 20px;
  }
  .profile-avatar {
    width:28px;
    height:28px;
    flex:0 0 28px;
  }
  .layout {
    position:relative;
    min-height:0;
    height:100%;
    padding:8px 8px 76px;
    overflow:hidden;
  }
  .tree-panel {
    height:100%;
    border-radius:22px;
  }
  .left-panel {
    position:fixed;
    left:8px;
    right:8px;
    bottom:72px;
    z-index:65;
    max-height:min(74dvh, 620px);
    border-radius:24px 24px 18px 18px;
    border:1px solid rgba(255,255,255,.1);
    box-shadow:0 24px 60px rgba(0,0,0,.42);
    overflow:auto;
    overscroll-behavior:contain;
    background:linear-gradient(180deg, rgba(10,18,36,.99), rgba(8,14,28,.99));
    transform:translateY(calc(100% + 24px));
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:transform .22s ease, opacity .18s ease;
  }
  body.mobile-editor-open .left-panel {
    transform:translateY(0);
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
  .mobile-editor-backdrop {
    display:block;
    position:fixed;
    inset:0;
    z-index:55;
    background:rgba(3,8,18,.44);
    opacity:0;
    pointer-events:none;
    transition:opacity .18s ease;
  }
  body.mobile-editor-open .mobile-editor-backdrop {
    opacity:1;
    pointer-events:auto;
  }
  .left-panel::before {
    content:"";
    position:sticky;
    top:10px;
    display:block;
    width:48px;
    height:5px;
    margin:10px auto 0;
    border-radius:999px;
    background:rgba(255,255,255,.18);
    z-index:3;
  }
  .mobile-editor-head {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
  }
  .mobile-editor-close {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:36px;
    padding:0 12px;
    border-radius:12px;
    flex:0 0 auto;
  }
  .mobile-editor-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    position:absolute;
    left:12px;
    bottom:14px;
    z-index:20;
    min-height:42px;
    padding:0 16px;
    border-radius:16px;
    background:linear-gradient(180deg, rgba(18,31,60,.94), rgba(10,19,39,.94));
    border:1px solid rgba(142,232,255,.22);
    color:var(--text);
    box-shadow:0 18px 46px rgba(0,0,0,.28);
  }
  .left-panel .section:first-child {
    position:sticky;
    top:0;
    z-index:2;
    padding-top:12px;
    padding-bottom:12px;
    background:linear-gradient(180deg, rgba(10,18,36,.98), rgba(10,18,36,.9));
    backdrop-filter:blur(10px);
  }
  .left-panel .section:last-child {
    padding-bottom:26px;
  }
  .section {
    padding:14px;
  }
  .section h2 {
    font-size:12px;
    margin-bottom:8px;
  }
  .help,
  .meta-box,
  .hint,
  label,
  input,
  textarea,
  select {
    font-size:13px;
  }
  textarea {
    min-height:120px;
  }
  .row2,
  .actions {
    grid-template-columns:1fr;
  }
  .toolbar {
    left:10px;
    right:10px;
    top:10px;
    padding:10px 12px;
    border-radius:16px;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }
  .toolbar .status {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:4px 10px;
    font-size:11px;
    line-height:1.35;
  }
  #workspaceState {
    flex:1 1 100%;
    min-width:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  #lastUpdate,
  #backupCount {
    display:none;
  }
  .toolbar .buttons {
    width:100%;
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:6px;
  }
  .toolbar .buttons button {
    width:100%;
    min-width:0;
    padding:9px 8px;
  }
  .tree-switcher {
    top:110px;
    left:10px;
    right:10px;
    padding:11px 12px;
    border-radius:18px;
    gap:10px;
  }
  .tree-switcher-head {
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }
  .tree-switcher-head > button {
    width:100%;
  }
  .tree-switcher-label {
    font-size:10px;
  }
  .tree-switcher-project {
    font-size:15px;
    line-height:1.3;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .tree-tab {
    max-width:170px;
    padding:9px 12px;
    border-radius:14px;
  }
  .tree-tab-title {
    max-width:100px;
  }
  #viewport {
    top:206px;
    bottom:0;
  }
  .tree-panel.compact #viewport {
    top:82px;
  }
  #minimap {
    display:none;
  }
  #minimapTitle {
    top:6px;
    right:8px;
    font-size:9px;
  }
  .node {
    border-radius:18px;
  }
  .projects-modal-panel,
  .backup-modal-panel,
  .project-members-panel,
  .profile-editor-panel {
    width:calc(100vw - 16px);
    max-height:calc(100dvh - 16px);
    border-radius:20px;
  }
  .backup-modal-head,
  .backup-modal-controls,
  .projects-modal-actions,
  .project-members-headline,
  .profile-showcase-footer,
  .team-profile-footer {
    flex-direction:column;
    align-items:stretch;
  }
  .projects-modal-actions {
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .project-cards,
  .profiles-grid {
    grid-template-columns:1fr;
    padding:14px;
  }
  .project-card {
    padding:16px;
    border-radius:18px;
  }
  .project-card-head {
    gap:12px;
  }
  .project-card-avatar {
    width:52px;
    height:52px;
    flex:0 0 52px;
    border-radius:16px;
  }
  .project-card-title {
    font-size:17px;
  }
  .project-card-meta {
    font-size:12px;
    line-height:1.55;
  }
  .project-card-info {
    width:38px;
    height:38px;
    right:12px;
    bottom:12px;
  }
  .project-card .tree-manager-actions {
    width:calc(100% - 50px);
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .project-card .tree-manager-actions > button {
    width:100%;
    justify-content:center;
    min-height:38px;
    padding:0 12px;
  }
  .project-members-layout,
  .profile-editor-layout {
    grid-template-columns:1fr;
    padding:14px 14px 0;
  }
  .project-summary-avatar {
    width:78px;
    height:78px;
    flex:0 0 78px;
    border-radius:20px;
  }
  .chat-dock {
    left:10px;
    right:10px;
    bottom:10px;
    align-items:stretch;
    z-index:50;
  }
  .chat-toggle-btn {
    width:100%;
    justify-content:center;
    border-radius:18px;
  }
  .chat-panel {
    width:100%;
    height:min(78dvh, calc(100dvh - 92px));
    border-radius:22px;
  }
  .chat-panel-head {
    padding:14px 16px;
  }
  .chat-panel-head h3 {
    font-size:20px;
  }
  .chat-panel-body {
    grid-template-columns:1fr;
  }
  .chat-sidebar {
    padding:12px;
    gap:12px;
    border-right:none;
    border-bottom:1px solid rgba(255,255,255,.08);
    max-height:180px;
  }
  .chat-nav-item {
    padding:11px 12px;
  }
  .chat-composer {
    padding:14px 14px 16px;
  }
  .chat-input,
  #chatInput {
    min-height:82px;
  }
  .chat-message {
    max-width:100%;
  }
  .chat-message-images {
    grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
  }
  .toast-stack {
    left:10px;
    right:10px;
    bottom:72px;
    width:auto;
  }
  .lightbox-panel {
    width:calc(100vw - 16px);
    max-height:calc(100dvh - 16px);
    border-radius:18px;
  }
  .lightbox-content {
    padding:14px;
  }
}
.mobile-tree-switcher-toggle {
  display: none;
}