/* ===== RESET & BASE ===== */
:root {
  --ink: #182234;
  --muted: #687386;
  --line: #6B8ECA;
  --accent: #6B8ECA;
  --accent-dark: #5576b4;
  --accent2: #8D7BC5;
  --surface: #fff;
  --bg: #f7f8fa;
  --ring: rgba(107,142,202,.18);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06);
  --shadow: 0 4px 16px rgba(0,0,0,.08);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.12);
  --radius: 12px;
  --radius-lg: 18px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  overflow: hidden;
  color: var(--ink);
  background: var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
}
button, input, textarea { font: inherit; }
button { border: 0; cursor: pointer; }
.hidden { display: none !important; }

/* ===== ACCOUNT & AUTHENTICATION ===== */
.account-chip { display:flex; align-items:center; gap:5px; min-height:38px; padding:4px 5px; border:1px solid #e3e7ee; border-radius:11px; background:#fff; }
.account-avatar { width:27px; height:27px; display:grid; place-items:center; border-radius:8px; background:#182234; color:#fff; font-size:11px; font-weight:800; }
.account-name { max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; font-weight:700; }
.account-profile { width:auto!important; height:auto!important; display:flex; align-items:center; gap:8px; padding:0 5px 0 0; border-radius:8px; background:transparent!important; color:var(--ink)!important; }
.account-profile:hover { background:#f3f5f8!important; }
.account-chip form { display:flex; }
.account-chip .logout-btn { width:28px; height:28px; border-radius:7px; background:#f1f3f7; color:#687386; }
.auth-body { overflow:auto; min-height:100%; background:#eef2f8; }
.auth-layout { min-height:100vh; display:grid; grid-template-columns:minmax(0,1.08fr) minmax(420px,.92fr); }
.auth-intro { position:relative; padding:42px clamp(36px,7vw,104px); display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; color:#fff; background:radial-gradient(circle at 78% 16%,rgba(141,123,197,.55),transparent 28%),linear-gradient(145deg,#111a31,#243a65 58%,#5576b4); }
.auth-intro::after { content:""; position:absolute; width:430px; height:430px; right:-170px; bottom:-200px; border:1px solid rgba(255,255,255,.18); border-radius:50%; box-shadow:0 0 0 68px rgba(255,255,255,.04),0 0 0 138px rgba(255,255,255,.03); }
.auth-brand { position:relative; z-index:1; display:flex; align-items:center; gap:12px; width:max-content; color:#fff; text-decoration:none; font-weight:800; font-size:17px; }
.auth-brand .brand-mark { width:38px; height:38px; }
.auth-intro>div { position:relative; z-index:1; }
.eyebrow { margin-bottom:18px; font-size:11px!important; font-weight:800; letter-spacing:.16em; color:#aebfe2!important; }
.auth-intro h1 { max-width:650px; margin-bottom:22px; font-size:clamp(44px,5.6vw,78px); line-height:.98; letter-spacing:-.055em; }
.auth-intro p { max-width:550px; color:#cad5e9; font-size:17px; line-height:1.65; }
.auth-points { display:flex; gap:10px; flex-wrap:wrap; }
.auth-points span { padding:8px 12px; border:1px solid rgba(255,255,255,.15); border-radius:999px; background:rgba(255,255,255,.07); color:#dce5f5; font-size:11px; font-weight:650; }
.auth-card { display:grid; place-items:center; padding:40px; background:#fff; }
.auth-card-inner { width:min(410px,100%); }
.auth-card h2 { margin-bottom:8px; font-size:32px; letter-spacing:-.035em; }
.auth-card-inner>p { color:var(--muted); line-height:1.5; }
.auth-form { display:grid; gap:16px; margin-top:30px; }
.auth-form label,.setup-form label { display:grid; gap:7px; color:#344054; font-size:12px; font-weight:700; }
.auth-form input,.setup-form input { width:100%; min-height:46px; padding:0 13px; border:1px solid #d7dde7; border-radius:10px; outline:none; background:#fff; color:var(--ink); }
.auth-form input:focus,.setup-form input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--ring); }
.auth-submit { min-height:48px; margin-top:4px; border-radius:11px; background:var(--ink); color:#fff; font-weight:750; transition:transform .12s,background .12s; }
.auth-submit:hover { background:#26354d; }.auth-submit:active { transform:scale(.99); }
.auth-switch { margin-top:22px; text-align:center; font-size:13px; }.auth-switch a { color:#486fae; font-weight:750; }
.form-alert { margin:18px 0; padding:11px 13px; border:1px solid #ffd1d8; border-radius:10px; background:#fff2f4; color:#b4233d; font-size:13px; }
.setup-body { overflow:auto; min-height:100%; background:#f3f5f9; }
.setup-shell { width:min(820px,calc(100% - 32px)); margin:42px auto; }
.setup-head { display:flex; gap:18px; align-items:flex-start; margin-bottom:28px; }.setup-head h1 { font-size:34px; letter-spacing:-.04em; }.setup-head p:last-child { max-width:620px; margin-top:7px; color:var(--muted); line-height:1.5; }
.setup-form { display:grid; gap:15px; }.setup-form section { padding:24px; border:1px solid #e0e5ec; border-radius:16px; background:#fff; box-shadow:var(--shadow-sm); }.setup-form h2 { margin-bottom:18px; font-size:17px; }.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:15px; }.optional-title { display:flex; align-items:center; justify-content:space-between; }.optional-title span { padding:4px 8px; border-radius:999px; background:#eef1f6; color:var(--muted); font-size:10px; font-weight:800; }.field-help { margin:-8px 0 17px; color:var(--muted); font-size:12px; line-height:1.55; }.field-help code { color:#46566e; word-break:break-all; }

/* ===== PAGE ROUTING ===== */
.page-view { display: none; }
.page-view.active { display: block; }
body.on-canvas .app-shell.active,
body.on-canvas .wb-shell.active { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

/* ===== SHARED BUTTONS ===== */
.solid-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 38px; padding: 0 18px; border-radius: 10px;
  background: var(--accent); color: #fff; font-weight: 650; font-size: 13px;
  transition: background .12s, transform .1s;
}
.solid-btn:hover { background: var(--accent-dark); }
.solid-btn:active { transform: scale(.97); }
.solid-btn.accent2 { background: var(--accent2); }
.solid-btn.accent2:hover { background: #7a69b5; }
.pill-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 34px; padding: 0 14px; border-radius: 9px;
  background: #eef1f6; color: var(--ink); font-weight: 600; font-size: 13px;
  transition: background .12s;
}
.pill-btn:hover { background: #e2e7ef; }
.pill-btn.danger { color: #d92d4b; }
.pill-btn.danger:hover { background: #fef0f0; }
.circle-btn {
  width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center;
  background: #eef1f6; flex-shrink: 0;
}
.circle-btn:hover { background: #e2e7ef; }

/* ===== SEARCH ===== */
.search-input {
  width: 100%; margin-bottom: 16px;
  border: 1px solid #dde3eb; border-radius: 10px;
  padding: 10px 14px; background: #fff;
  font-size: 14px; outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }

/* ===== DASHBOARD ===== */
.dash-wrap {
  width: min(1200px, 100%); margin: 0 auto;
  padding: 32px 28px 60px; min-height: 100vh;
}
.dash-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 24px;
}
.dash-brand { display: flex; align-items: center; gap: 14px; }
.brand-mark {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
  background: linear-gradient(135deg, #6B8ECA, #8D7BC5); flex-shrink: 0;
}
.brand-mark::before {
  content: ""; width: 20px; height: 20px; border: 2.5px solid #fff; border-radius: 50%;
  box-shadow: 10px 5px 0 -4px #fff, -7px 8px 0 -4px #fff;
}
.dash-brand h1 { font-size: 26px; font-weight: 800; letter-spacing: -.03em; }
.dash-sub { color: var(--muted); font-size: 13px; margin-top: 2px; }
.dash-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.create-menu-wrap { position:relative; }
.create-btn { width:40px; height:40px; display:grid; place-items:center; border-radius:12px; background:var(--ink); color:#fff; font-size:16px; box-shadow:0 7px 18px rgba(24,34,52,.18); transition:transform .12s,background .12s; }
.create-btn:hover { background:#2a3a54; transform:translateY(-1px); }.create-btn[aria-expanded="true"] { transform:rotate(45deg); }
.create-menu { position:absolute; z-index:90; top:calc(100% + 9px); right:0; width:290px; padding:7px; border:1px solid #e1e5ec; border-radius:15px; background:#fff; box-shadow:var(--shadow-lg); }
.create-menu>button { width:100%; display:flex; align-items:center; gap:12px; padding:11px; border-radius:11px; background:transparent; text-align:left; color:var(--ink); }
.create-menu>button:hover { background:#f5f7fa; }.create-menu strong,.create-menu small { display:block; }.create-menu strong { font-size:13px; }.create-menu small { margin-top:2px; color:var(--muted); font-size:11px; }
.create-option-icon { width:38px; height:38px; display:grid; place-items:center; flex:none; border-radius:10px; }.create-option-icon.map { background:#edf3ff; color:#5576b4; }.create-option-icon.draw { background:#f2effc; color:#7a69b5; }
.sync-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 9px; font-size: 12px; font-weight: 600;
  background: #f0faf4; color: #1a8a4a;
}
.sync-pill.error { background: #fef0f0; color: #d92d4b; }
.sync-pill.syncing { background: #f0f4fa; color: #3268d8; animation: pulse 1.2s ease infinite; }
@keyframes pulse { 0%,100%{opacity:1}50%{opacity:.4} }

.dash-tabs {
  display: flex; gap: 4px; margin-bottom: 20px;
  background: #eef1f6; border-radius: 10px; padding: 4px; width: fit-content;
}
.dash-tab {
  padding: 8px 18px; border-radius: 8px; font-size: 13px; font-weight: 650;
  color: var(--muted); background: transparent; transition: all .12s;
}
.dash-tab:hover { color: var(--ink); }
.dash-tab.active { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }

.dash-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.dash-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 18px; border-radius: var(--radius-lg);
  background: #fff; border: 1px solid rgba(0,0,0,.05);
  cursor: pointer; transition: transform .14s, box-shadow .14s, border-color .14s;
}
.dash-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: rgba(107,142,202,.2); }
.dash-card-type {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--accent);
}
.dash-card-type.wb { color: var(--accent2); }
.dash-sync-badge {
  display: inline-block; padding: 1px 6px; border-radius: 4px;
  font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  background: #f0faf4; color: #1a8a4a; margin-left: 6px;
}
.dash-sync-badge.unsynced { background: #fff7ed; color: #c16600; }
.dash-card-title { font-size: 16px; font-weight: 700; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-card-meta { font-size: 12px; color: var(--muted); }
.dash-card-footer { display: flex; gap: 6px; margin-top: auto; padding-top: 8px; }
.dash-card-footer button {
  min-height: 30px; padding: 0 12px; border-radius: 8px;
  font-size: 12px; font-weight: 650;
}
.dash-card-footer .open-btn { background: var(--accent); color: #fff; }
.dash-card-footer .open-btn:hover { background: var(--accent-dark); }
.dash-card-footer .share-btn { background:#edf3ff; color:#5576b4; }
.dash-card-footer .share-btn:hover { background:#dfeaff; }
.dash-card-footer .del-btn { background: transparent; color: #d92d4b; }
.dash-card-footer .del-btn:hover { background: #fef0f0; }
.dash-empty {
  grid-column: 1/-1; padding: 56px 24px; text-align: center;
  background: #fff; border-radius: var(--radius-lg); border: 2px dashed #dde3eb;
}
.dash-empty h3 { font-size: 18px; margin-bottom: 6px; }
.dash-empty p { color: var(--muted); margin-bottom: 18px; }

/* ===== TOOLBAR (shared) ===== */
.topbar {
  position: fixed; z-index: 40; top: 12px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 24px);
  padding: 6px; border-radius: 16px;
  background: rgba(255,255,255,.92); border: 1px solid rgba(0,0,0,.06);
  box-shadow: var(--shadow); backdrop-filter: blur(12px);
}
.brand {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 4px; border-radius: 12px; background: #fff;
}
.brand-title { font-weight: 800; font-size: 14px; }
.toolbar { display: flex; align-items: center; gap: 3px; overflow-x: auto; scrollbar-width: none; }
.toolbar::-webkit-scrollbar { display: none; }
.divider { width: 1px; height: 24px; margin: 0 2px; background: rgba(0,0,0,.1); }
.tool-btn {
  display: inline-grid; place-items: center; width: 34px; height: 34px;
  border-radius: 10px; background: transparent; color: #2a3445; transition: background .1s;
}
.tool-btn:hover { background: #f0f3f7; }
.tool-btn.active { background: var(--accent); color: #fff; }
.tool-btn.danger { color: #d92d4b; }
.tool-btn.primary { background: var(--accent); color: #fff; }
.tool-btn:disabled { opacity: .3; cursor: not-allowed; }
.tool-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tool-btn i { font-size: 16px; }
.zoom-label { min-width: 40px; text-align: center; font-size: 12px; font-weight: 700; color: #526170; }
.more-wrap { position: relative; }
.more-menu {
  position: fixed; right: 18px; top: 64px; z-index: 120;
  width: 210px; padding: 6px; border-radius: 14px;
  background: rgba(255,255,255,.96); border: 1px solid rgba(0,0,0,.06);
  box-shadow: var(--shadow-lg);
}
.more-menu button {
  width: 100%; display: flex; align-items: center; gap: 8px;
  min-height: 34px; padding: 0 10px; border-radius: 9px;
  color: var(--ink); font-weight: 600; font-size: 13px; text-align: left;
}
.more-menu button:hover { background: #f0f3f7; }
.submenu-wrap { position: relative; }
.submenu-trigger::after { content: "\203A"; margin-left: auto; color: #999; font-size: 18px; }
.submenu {
  position: absolute; top: 0; right: calc(100% + 6px);
  width: 180px; padding: 6px; border-radius: 14px;
  background: #fff; border: 1px solid rgba(0,0,0,.06); box-shadow: var(--shadow-lg);
}
.submenu.hidden { display: none; }
.submenu button.active {
  background: #f0f3f7; font-weight: 700; color: var(--blue);
}
.submenu button.active::after {
  content: "\2713"; margin-left: auto; font-weight: 700; font-size: 13px; color: var(--blue);
}

/* ===== VIEWPORT (mind map) ===== */
.viewport {
  position: relative; width: 100%; flex: 1; overflow: hidden;
  background: #fff; background-image: radial-gradient(circle, rgba(127,137,154,.2) 1px, transparent 1px);
  background-size: 22px 22px;
}
.world { position: absolute; left: 0; top: 0; width: 1px; height: 1px; transform-origin: 0 0; }
.link-layer { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; }
.link-path { fill: none; stroke: var(--line); stroke-width: 2; stroke-linecap: round; opacity: .9; }
.node-layer { position: absolute; left: 0; top: 0; }

/* ===== MAP NODES ===== */
.map-node {
  position: absolute; display: inline-flex; align-items: center;
  min-width: 118px; max-width: 236px; min-height: 36px;
  padding: 8px 14px; border-radius: 8px;
  background: var(--node-bg, #EBEAF4); color: var(--node-fg, #182234);
  border: 1px solid transparent; cursor: pointer;
  transition: border-color .12s, background .12s, transform .12s;
  user-select: none;
}
.map-node:hover { border-color: color-mix(in srgb, var(--branch-color, #6B8ECA) 40%, transparent); }
.map-node.selected { border-color: var(--branch-color, #6B8ECA); box-shadow: 0 0 0 3px var(--ring); }
.map-node.root {
  min-width: 260px; max-width: 420px; min-height: 50px;
  padding: 12px 22px; border-radius: 6px;
  background: #0A0F24 !important; color: #fff;
}
.map-node.level-1 {
  min-width: 140px; padding: 9px 16px; border-radius: 6px;
  background: var(--branch-color, #6B8ECA) !important; color: #fff;
}
.map-node.level-2 { background: #EBEAF4 !important; color: #182234; border-color: rgba(107,142,202,.15); }
.node-main { display: inline-flex; align-items: center; gap: 6px; width: 100%; }
.node-title {
  min-width: 16px; flex: 1; font-size: 14px; font-weight: 700; line-height: 1.25;
  overflow-wrap: anywhere; white-space: pre-wrap; outline: none;
}
.map-node.root .node-title { font-size: 20px; font-weight: 800; }
.node-title[contenteditable="true"] { background: rgba(107,142,202,.12); border-radius: 4px; padding: 1px 3px; }
.inline-actions { flex: 0 0 auto; display: inline-flex; gap: 3px; }
.inline-icon {
  width: 18px; height: 18px; display: inline-grid; place-items: center;
  border-radius: 5px; background: rgba(255,255,255,.22); cursor: pointer; opacity: .8;
}
.map-node.level-2 .inline-icon { background: rgba(107,142,202,.1); }
.inline-icon:hover { opacity: 1; }
.inline-icon svg { width: 12px; height: 12px; stroke: currentColor; fill: none; }
.inline-icon i { font-size: 12px; }
.collapse-chip {
  position: absolute; right: -12px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-grid; place-items: center;
  border: 1.5px solid var(--branch-color, #6B8ECA);
  background: #fff; color: var(--branch-color, #6B8ECA);
  font-size: 11px; font-weight: 800; cursor: pointer; z-index: 3;
}
.map-node[data-side="left"] .collapse-chip { left: -12px; right: auto; }
.map-node.root .side-collapse.left { left: -13px; right: auto; }
.map-node.root .side-collapse.right { right: -13px; left: auto; }
.map-node.root .side-collapse { top: 50%; transform: translateY(-50%); }
.drag-source { opacity: .35; }
.map-node.dragging { cursor: grabbing; transform: scale(1.015); }
.drag-ghost {
  position: fixed !important; z-index: 120; pointer-events: none;
  opacity: .9; transform: scale(1.02);
}
.map-node.drop-target { border-color: #24a267 !important; box-shadow: 0 0 0 3px rgba(36,162,103,.14); }

/* ===== MODE / PREVIEW ===== */
.mode-pill {
  position: fixed; left: 14px; bottom: 14px; z-index: 20;
  padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 700;
  background: rgba(255,255,255,.9); border: 1px solid rgba(0,0,0,.06);
}
.preview-controls {
  position: fixed; right: 16px; bottom: 16px; z-index: 35;
  display: flex; gap: 6px; padding: 6px; border-radius: 14px;
  background: rgba(255,255,255,.92); border: 1px solid rgba(0,0,0,.06);
  box-shadow: var(--shadow);
}
.preview-control-btn {
  min-height: 32px; padding: 0 12px; border-radius: 9px;
  background: #fff; font-size: 13px; font-weight: 700;
}
.preview-control-btn:hover { box-shadow: var(--shadow-sm); }
.save-status {
  position: fixed; left: 14px; bottom: 50px; z-index: 20;
  padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 700;
  background: rgba(255,255,255,.9); border: 1px solid rgba(0,0,0,.06);
  opacity: 0; transition: opacity .15s; pointer-events: none;
}
.save-status.show { opacity: 1; }

/* ===== MODAL ===== */
.modal {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: center;
  padding: 20px; background: rgba(0,0,0,.2); backdrop-filter: blur(3px);
}
.modal-card {
  width: min(520px, 100%); padding: 18px; border-radius: var(--radius-lg);
  background: #fff; box-shadow: var(--shadow-lg);
}
.modal-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.modal-header h2 { font-size: 18px; }
.modal-header p { color: var(--muted); font-size: 13px; margin-top: 3px; }
.field-label { display: block; margin-top: 12px; font-size: 13px; font-weight: 700; color: #435264; margin-bottom: 10px; }
.text-input {
  width: 100%; border: 1px solid #dde3eb; border-radius: 10px;
  padding: 10px 12px; background: #fafbfc; outline: none; transition: border-color .12s;
}
.text-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.note-area { min-height: 120px; resize: vertical; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.note-display-text { white-space: pre-wrap; line-height: 1.5; font-size: 14px; color: var(--ink); padding: 10px; border: 1px solid #e8ecf0; border-radius: 10px; background: #fafbfc; max-height: 300px; overflow-y: auto; }

/* ===== SETTINGS ===== */
.settings-page { position: fixed; inset: 0; z-index: 75; overflow-y: auto; background: var(--bg); }
.settings-panel { width: min(980px, 100%); margin: 0 auto; padding: 28px 20px 60px; }
.settings-top { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.settings-top h1 { font-size: 22px; font-weight: 800; }
.settings-tabs { position:sticky; top:0; z-index:20; display:flex; gap:5px; margin:0 0 18px; padding:7px; overflow-x:auto; border:1px solid #dfe4eb; border-radius:14px; background:rgba(247,248,250,.94); box-shadow:0 6px 20px rgba(31,43,65,.06); backdrop-filter:blur(12px); scrollbar-width:none; }.settings-tabs::-webkit-scrollbar { display:none; }.settings-tab { min-height:38px; display:flex; align-items:center; gap:7px; flex:none; padding:0 13px; border-radius:10px; background:transparent; color:var(--muted); font-size:12px; font-weight:750; }.settings-tab:hover { color:var(--ink); background:#eef1f6; }.settings-tab.active { color:#fff; background:var(--ink); box-shadow:0 4px 12px rgba(24,34,52,.16); }
.settings-tab-panel { display:none; }.settings-tab-panel.active { display:block; }
.settings-card {
  padding: 20px; border-radius: var(--radius-lg);
  background: #fff; border: 1px solid rgba(0,0,0,.05);
  margin-bottom: 16px;
}
.settings-card h2 { font-size: 16px; font-weight: 750; margin-bottom: 4px; }
.settings-card-header { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.settings-icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: linear-gradient(135deg, #6B8ECA, #8D7BC5);
  color: #fff; display: grid; place-items: center; flex-shrink: 0;
}
.settings-desc { color: var(--muted); font-size: 13px; line-height: 1.5; }
.gh-status {
  margin: 12px 0 0; padding: 10px 14px; border-radius: 10px;
  background: #f5f7fa; font-size: 13px; font-weight: 600;
}
.gh-progress { margin: 10px 0; }
.progress-track { height: 4px; background: #e8ecf0; border-radius: 2px; overflow: hidden; }
.progress-fill { height: 100%; width: 0%; background: var(--accent); border-radius: 2px; transition: width .3s; }
.progress-text { font-size: 12px; color: var(--muted); margin-top: 4px; }
.settings-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.settings-card + .settings-card { margin-top:16px; }
.copy-field { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; }
.profile-card { display:flex; align-items:center; gap:15px; }.profile-avatar { width:54px; height:54px; display:grid; place-items:center; flex:none; border-radius:16px; background:linear-gradient(135deg,#182234,#5576b4); color:#fff; font-size:20px; font-weight:800; }.profile-details h2 { margin-bottom:3px; }.role-badge { display:inline-flex; margin-top:8px; padding:4px 8px; border-radius:999px; background:#edf3ff; color:#486fae; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.password-grid { display:grid; }
.admin-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:15px 0; }.admin-stats>div { padding:13px; border-radius:11px; background:#f4f6f9; }.admin-stats strong,.admin-stats span { display:block; }.admin-stats strong { font-size:20px; }.admin-stats span { margin-top:3px; color:var(--muted); font-size:10px; font-weight:700; text-transform:uppercase; }
.admin-user-tools { display:flex; align-items:center; gap:8px; margin:14px 0 10px; }.admin-search-wrap { position:relative; flex:1; }.admin-search-wrap i { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:#8993a3; font-size:12px; }.admin-search-wrap input { width:100%; min-height:39px; padding:0 13px 0 34px; border:1px solid #dbe1e9; border-radius:10px; outline:none; background:#fff; }.admin-search-wrap input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--ring); }
.admin-users-list { display:grid; gap:9px; }.admin-user-row { display:grid; grid-template-columns:minmax(170px,1.3fr) minmax(120px,.7fr) minmax(220px,1fr); gap:12px; align-items:center; padding:13px; border:1px solid #e4e8ef; border-radius:12px; }.admin-user-identity strong,.admin-user-identity span,.admin-user-identity small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.admin-user-identity strong { font-size:13px; }.admin-user-identity span { margin-top:2px; color:var(--muted); font-size:11px; }.admin-user-identity small { margin-top:5px; color:#5576b4; font-size:9px; font-weight:800; text-transform:uppercase; }.admin-user-usage { display:flex; gap:10px; color:var(--muted); font-size:10px; }.admin-user-usage b { color:var(--ink); }.admin-user-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; }.admin-user-actions small { width:100%; text-align:right; color:var(--muted); font-size:9px; }.user-status { padding:4px 7px; border-radius:999px; font-size:9px; font-weight:800; text-transform:uppercase; }.user-status.active { background:#eaf8ef; color:#19804a; }.user-status.suspended { background:#fff0f2; color:#c12c48; }.active-toggle { display:flex!important; align-items:center; align-self:center; gap:5px!important; white-space:nowrap; }.active-toggle input { accent-color:var(--accent); }
.admin-user-modal-card { width:min(560px,calc(100vw - 28px)); }.edit-user-usage { display:flex; gap:8px; margin:15px 0; }.edit-user-usage span { padding:7px 10px; border-radius:8px; background:#f1f4f8; color:var(--muted); font-size:11px; }.edit-user-usage b { color:var(--ink); }.edit-user-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.edit-user-grid label { display:grid; gap:6px; color:var(--muted); font-size:11px; font-weight:700; }.edit-user-active { margin:16px 0; }
.share-modal-card{width:min(560px,calc(100vw - 28px))}.share-consent{display:flex;align-items:center;gap:14px;margin:18px 0;padding:16px;border:1px solid #e2e7ef;border-radius:13px;background:#f7f9fc}.share-consent>i{width:40px;height:40px;display:grid;place-items:center;border-radius:11px;background:#edf3ff;color:#5576b4}.share-consent strong,.share-consent p{display:block}.share-consent p{margin-top:3px;color:var(--muted);font-size:12px}.share-enabled-label{margin:18px 0 12px;padding:10px 12px;border-radius:10px;background:#eaf8ef;color:#19804a;font-size:12px;font-weight:750}.share-enabled-label i{margin-right:5px}
.share-options{display:grid;gap:10px;margin-top:16px}.share-option{display:flex;align-items:flex-start;gap:12px;padding:14px;border:1px solid #e2e7ef;border-radius:13px;background:#f8fafc;cursor:pointer}.share-option input{width:18px;height:18px;margin-top:2px;accent-color:var(--accent)}.share-option span,.share-option strong,.share-option small{display:block}.share-option strong{font-size:13px}.share-option small{margin-top:4px;color:var(--muted);font-size:11px;line-height:1.45}.share-link-block{padding:4px 2px 10px 30px}.share-link-block>span{display:block;margin-bottom:6px;color:var(--muted);font-size:10px;font-weight:800;text-transform:uppercase}.share-link-block .copy-field{grid-template-columns:minmax(0,1fr) auto auto}.share-link-block .pill-btn{white-space:nowrap}
.duplicate-card{width:min(520px,calc(100vw - 28px));margin:auto;padding:34px;border:1px solid #e0e5ed;border-radius:22px;background:#fff;box-shadow:0 20px 60px rgba(24,34,52,.14)}.duplicate-card h1{margin:8px 0 12px;font-size:25px}.duplicate-card>p:not(.eyebrow){margin-bottom:22px;color:var(--muted);line-height:1.6}.duplicate-card form{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.collaboration-banner{position:fixed;z-index:80;left:50%;bottom:18px;transform:translateX(-50%);display:flex;align-items:center;gap:9px;max-width:calc(100vw - 28px);padding:9px 14px;border:1px solid #d8e1ef;border-radius:999px;background:rgba(255,255,255,.94);box-shadow:0 10px 35px rgba(24,34,52,.16);backdrop-filter:blur(12px);font-size:11px;font-weight:750}.collaboration-banner i{color:#19804a}.collaboration-banner a{padding-left:9px;border-left:1px solid #d8e1ef;color:#5576b4;text-decoration:none}.collaboration-mode #mapShareBtn,.collaboration-mode #wbShareBtn,.collaboration-mode #mmNewBtn{display:none!important}


/* ===== CURSOR HELPERS ===== */
.wb-canvas-wrap.cursor-grab { cursor: grab; }
.wb-canvas-wrap.cursor-grabbing { cursor: grabbing; }

/* ===== WHITEBOARD ===== */
.wb-shell { display: none; }
.wb-shell.active { display: flex; flex-direction: column; height: 100vh; }
.wb-topbar { position: relative; top: 0; left: 0; transform: none; border-radius: 0; border-bottom: 1px solid rgba(0,0,0,.06); z-index: 50; }
.wb-canvas-wrap { position: relative; flex: 1; overflow: hidden; cursor: crosshair; background: #fff; background-image: radial-gradient(circle, rgba(127,137,154,.15) 1px, transparent 1px); background-size: 20px 20px; }

.wb-text-input {
  position: absolute; z-index: 10; resize: none; overflow: hidden;
  min-width: 60px; min-height: 28px; padding: 4px 6px; border: 1px solid #4a90d9; outline: 0;
  font: 600 16px Inter, Arial, sans-serif; color: #182234;
  background: #fff; caret-color: #182234; border-radius: 4px;
}
.wb-text-input.hidden { display: none; }

.wb-fill-toggle.active { background: var(--accent); color: #fff; }
.wb-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.wb-color { width: 32px; height: 32px; border: 2px solid #dde3eb; border-radius: 8px; cursor: pointer; padding: 0; }
.wb-width { width: 80px; accent-color: var(--accent); }
.wb-width-label { font-size: 12px; font-weight: 700; color: #526170; min-width: 20px; text-align: center; }

/* ===== TOAST ===== */
.toast-container {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: 200; display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.toast {
  padding: 10px 20px; border-radius: 10px;
  background: #182234; color: #fff;
  font-size: 13px; font-weight: 600;
  box-shadow: var(--shadow-lg);
  animation: toastIn .25s ease, toastOut .25s ease 2.5s forwards;
  pointer-events: auto;
}
@keyframes toastIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toastOut { from { opacity: 1; } to { opacity: 0; } }

/* ===== PREVIEW MODE ===== */
body.preview-mode .topbar { display: none; }
body.preview-mode .mode-pill { display: none; }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .auth-layout { grid-template-columns:1fr; }.auth-intro { min-height:360px; padding:28px 24px; }.auth-intro h1 { font-size:43px; }.auth-points { display:none; }.auth-card { padding:42px 22px; }.account-name { display:none; }.form-grid { grid-template-columns:1fr; }.setup-shell { margin:22px auto; }
  .dash-wrap { padding: 18px 14px 60px; }
  .dash-header { flex-direction: column; align-items: flex-start; }
  .dash-brand h1 { font-size: 22px; }
  .dash-grid { grid-template-columns: 1fr; }
  .topbar { left: 8px; right: 8px; transform: none; }
  .brand-title { display: none; }
  .admin-stats { grid-template-columns:1fr 1fr; }.admin-user-row { grid-template-columns:1fr; }.admin-user-actions { justify-content:flex-start; }.admin-user-actions small { text-align:left; }.settings-tab span { display:none; }.settings-tab { min-width:40px; justify-content:center; }.edit-user-grid { grid-template-columns:1fr; }
}


div#mmMoreMenu svg {
    width: 25px;
    height: 25px;
}
div#mmMoreMenu button {
    margin-bottom: 5px;
}
.hide {
  display: none;
}
.documentation {}
.documentation ol li{
  margin-bottom: 10px;
}