.ck-canvas-shell {
      display: flex;
      gap: 0;
      height: calc(100vh - 70px);  /* top nav height */
      min-height: 540px;
      background: var(--bg);
      border: none;
      border-radius: 0;
      overflow: hidden;
    }

    /* Canvas shell relocated into a Projects record's "Canvas" tab. The
       workspace rail is hidden (you're already inside one project); the tool
       palette + board remain so it's a fully native board in the record. */
    .crm-project-canvas-host { width: 100%; }
    .ck-canvas-shell.ck-embedded {
      height: 74vh;
      min-height: 460px;
      /* Frame the board in the record's active theme (Projects = blue) so it
         reads as part of the page instead of a raw takeover. Falls back to the
         neutral border when no CRM theme is applied. */
      border: 1px solid var(--th-line2, var(--border));
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 0 20px -6px var(--th-glow1, transparent), inset 0 0 0 1px var(--th-line-soft, transparent);
    }
    .ck-canvas-shell.ck-embedded .ck-canvas-rail { display: none; }
    /* "CRM" badge on the auto-synced Projects section of the canvas rail */
    .ck-rail-section-badge {
      margin-left: auto;
      font-size: 0.52rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      color: var(--gold);
      background: rgba(201,168,76,0.12);
      border: 1px solid rgba(201,168,76,0.28);
      border-radius: 999px;
      padding: 0.08rem 0.4rem;
      line-height: 1.4;
    }

    /* ─── LEFT SIDEBAR (Claude-style) ──────────────────────────── */
    .ck-canvas-rail {
      flex: 0 0 260px;
      display: flex;
      flex-direction: column;
      background: var(--bg);
      border-right: 1px solid var(--border);
      min-width: 0;
    }
    .ck-rail-head {
      padding: 0.9rem 0.85rem 0.5rem;
    }
    /* Gradient "Canvas" header - matches the list-view eyebrow+title elsewhere */
    .ck-rail-eyebrow { display: flex; align-items: center; gap: 0.4rem; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.2rem; }
    .ck-rail-eyebrow .ck-ic { color: #A78BFA; font-size: 0.82rem; }
    .ck-rail-title { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.015em; line-height: 1.05; margin-bottom: 0.8rem; background: linear-gradient(135deg, var(--text) 0%, var(--gold) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
    .ck-rail-newbtn {
      display: flex; align-items: center; justify-content: center;
      gap: 0.5rem;
      width: 100%;
      padding: 0.7rem 0.85rem;
      background: rgba(201,168,76,0.12);
      color: var(--gold);
      border: 1px solid rgba(201,168,76,0.35);
      border-radius: 8px;
      font-size: 0.88rem; font-weight: 600;
      cursor: pointer;
      font-family: inherit;
      transition: all 0.15s;
    }
    .ck-rail-newbtn:hover { background: rgba(201,168,76,0.25); }
    .ck-rail-newbtn .ck-rail-newbtn-plus { font-size: 1.05rem; line-height: 1; }
    .ck-rail-search {
      margin: 0.5rem 0.85rem 0.4rem;
      position: relative;
    }
    .ck-rail-search input {
      width: 100%;
      box-sizing: border-box;
      padding: 0.5rem 0.65rem 0.5rem 1.95rem;
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--text);
      font-size: 0.82rem;
      font-family: inherit;
      transition: border-color 0.15s;
    }
    .ck-rail-search input:focus { outline: none; border-color: rgba(201,168,76,0.5); }
    .ck-rail-search input::placeholder { color: var(--muted); }
    .ck-rail-search-icon {
      position: absolute; left: 0.6rem; top: 50%;
      transform: translateY(-50%);
      font-size: 0.85rem; color: var(--muted);
      pointer-events: none;
    }

    /* Scrollable section list */
    .ck-rail-body {
      flex: 1;
      overflow-y: auto;
      padding: 0.25rem 0.45rem 0.5rem;
    }
    .ck-rail-section {
      margin-bottom: 0.5rem;
    }
    .ck-rail-section-head {
      display: flex; align-items: center; gap: 0.35rem;
      padding: 0.5rem 0.45rem 0.35rem;
      font-size: 0.66rem; font-weight: 700;
      letter-spacing: 0.16em; text-transform: uppercase;
      color: var(--muted);
      cursor: pointer;
      user-select: none;
    }
    .ck-rail-section-head:hover { color: var(--text); }
    .ck-rail-caret {
      font-size: 0.65rem; transition: transform 0.15s;
    }
    .ck-rail-section.is-collapsed .ck-rail-caret { transform: rotate(-90deg); }
    .ck-rail-section.is-collapsed .ck-rail-section-body { display: none; }
    .ck-rail-section-add {
      margin-left: auto;
      width: 18px; height: 18px;
      border: 1px solid transparent;
      background: transparent;
      color: var(--muted);
      font-size: 0.85rem; line-height: 1;
      border-radius: 4px;
      cursor: pointer;
      opacity: 0; transition: opacity 0.15s;
      font-family: inherit;
    }
    .ck-rail-section-head:hover .ck-rail-section-add { opacity: 1; }
    .ck-rail-section-add:hover { background: rgba(201,168,76,0.15); color: var(--gold); }

    .ck-rail-empty {
      padding: 0.5rem 0.65rem; color: var(--muted);
      font-size: 0.74rem; font-style: italic;
    }

    /* Canvas list item */
    .ck-rail-item {
      display: flex; align-items: center; gap: 0.4rem;
      padding: 0.4rem 0.5rem;
      border-radius: 5px;
      color: var(--text); font-size: 0.83rem;
      cursor: pointer; transition: background 0.12s, color 0.12s;
      position: relative;
      margin-bottom: 1px;
    }
    .ck-rail-item:hover { background: rgba(255,255,255,0.04); }
    .ck-rail-item.is-active {
      background: rgba(201,168,76,0.12);
      color: var(--gold);
    }
    .ck-rail-item-icon {
      font-size: 0.78rem; opacity: 0.8;
      display: inline-flex; align-items: center; justify-content: center;
    }
    /* Live board mini-preview in place of the generic palette icon */
    .ck-rail-item-icon.has-thumb {
      width: 30px; height: 22px; flex: 0 0 auto; opacity: 1;
      border: 1px solid var(--border);
      border-radius: 4px;
      background: rgba(255,255,255,0.03);
      overflow: hidden;
    }
    .ck-rail-item.is-active .ck-rail-item-icon.has-thumb {
      border-color: rgba(201,168,76,0.4);
    }
    .ck-rail-thumb { width: 100%; height: 100%; display: block; }
    .ck-rail-item-name {
      flex: 1; min-width: 0; white-space: nowrap;
      overflow: hidden; text-overflow: ellipsis;
    }
    .ck-rail-item-more {
      width: 22px; height: 22px;
      background: transparent; border: none; cursor: pointer;
      color: var(--muted); font-size: 1rem; line-height: 1;
      border-radius: 4px;
      opacity: 0; transition: opacity 0.15s;
      font-family: inherit;
    }
    .ck-rail-item:hover .ck-rail-item-more { opacity: 1; }
    .ck-rail-item-more:hover { background: rgba(255,255,255,0.08); color: var(--text); }

    /* Project group */
    .ck-rail-project {
      margin-bottom: 0.15rem;
    }
    .ck-rail-project-head {
      display: flex; align-items: center; gap: 0.4rem;
      padding: 0.4rem 0.5rem;
      border-radius: 5px;
      color: var(--text); font-size: 0.85rem; font-weight: 600;
      cursor: pointer;
      transition: background 0.12s;
    }
    .ck-rail-project-head:hover { background: rgba(255,255,255,0.04); }
    .ck-rail-project-icon { font-size: 0.85rem; }
    .ck-rail-project-name {
      flex: 1; min-width: 0; white-space: nowrap;
      overflow: hidden; text-overflow: ellipsis;
    }
    .ck-rail-project-children {
      padding-left: 0.85rem;
      border-left: 1px solid rgba(255,255,255,0.07);
      margin-left: 0.85rem;
      margin-bottom: 0.25rem;
    }
    .ck-rail-project.is-collapsed .ck-rail-project-children { display: none; }
    .ck-rail-project.is-collapsed .ck-rail-project-caret { transform: rotate(-90deg); }
    .ck-rail-project-caret { font-size: 0.6rem; transition: transform 0.15s; color: var(--muted); }

    /* Footer with settings cog */
    .ck-rail-foot {
      padding: 0.5rem 0.55rem;
      border-top: 1px solid var(--border);
      display: flex; align-items: center; justify-content: flex-end;
    }
    .ck-rail-cog {
      width: 28px; height: 28px;
      background: transparent; border: 1px solid transparent;
      color: var(--muted); font-size: 0.95rem; line-height: 1;
      border-radius: 6px; cursor: pointer;
      transition: all 0.15s;
      font-family: inherit;
    }
    .ck-rail-cog:hover { color: var(--gold); border-color: rgba(201,168,76,0.3); }

    /* Rail-item context menu */
    .ck-rail-menu {
      position: absolute;
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: 6px;
      box-shadow: 0 12px 32px rgba(0,0,0,0.5);
      padding: 0.3rem;
      z-index: 100;
      min-width: 180px;
    }
    .ck-rail-menu button {
      display: block; width: 100%;
      padding: 0.5rem 0.65rem;
      background: transparent; border: none;
      color: var(--text); font-size: 0.83rem;
      text-align: left; cursor: pointer;
      border-radius: 4px;
      font-family: inherit;
    }
    .ck-rail-menu button:hover { background: rgba(201,168,76,0.12); color: var(--gold); }
    .ck-rail-menu .ck-rail-menu-sep {
      height: 1px; background: var(--border); margin: 0.25rem 0;
    }
    .ck-rail-menu button.is-danger:hover { background: rgba(220,80,80,0.15); color: #ff7b7b; }

    /* ─── SETTINGS POPOVER ────────────────────────────────────── */
    .ck-settings-pop {
      position: absolute;
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: 10px;
      box-shadow: 0 16px 48px rgba(0,0,0,0.6);
      padding: 0.85rem 1rem;
      z-index: 200;
      min-width: 280px;
    }
    .ck-settings-title {
      font-size: 0.7rem; font-weight: 700;
      letter-spacing: 0.18em; text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 0.65rem;
    }
    .ck-settings-row {
      display: flex; align-items: center; justify-content: space-between;
      padding: 0.4rem 0;
      font-size: 0.85rem; color: var(--text);
    }
    .ck-settings-row + .ck-settings-divider {
      margin: 0.45rem 0;
      height: 1px; background: var(--border);
    }
    .ck-settings-toggle {
      width: 32px; height: 18px; border-radius: 999px;
      background: rgba(255,255,255,0.1);
      position: relative; cursor: pointer;
      transition: background 0.15s;
      border: 1px solid var(--border);
    }
    .ck-settings-toggle.is-on { background: rgba(201,168,76,0.4); border-color: rgba(201,168,76,0.6); }
    .ck-settings-toggle::after {
      content: ''; position: absolute;
      top: 1px; left: 1px;
      width: 14px; height: 14px; border-radius: 50%;
      background: #fff;
      transition: transform 0.15s;
    }
    .ck-settings-toggle.is-on::after { transform: translateX(14px); }

    /* ─── TOOL PALETTE (vertical, left edge of stage) ──────────── */
    .ck-tool-palette {
      flex: 0 0 52px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.35rem;
      padding: 0.65rem 0;
      background: var(--bg);
      border-right: 1px solid var(--border);
    }
    .ck-tool {
      width: 38px; height: 38px;
      display: flex; align-items: center; justify-content: center;
      background: transparent;
      border: 1px solid transparent;
      color: var(--muted);
      font-size: 1.05rem;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.15s;
      font-family: inherit;
      position: relative;
    }
    .ck-tool:hover {
      background: rgba(201,168,76,0.1);
      color: var(--text);
    }
    .ck-tool.is-active {
      background: rgba(201,168,76,0.18);
      color: var(--gold);
      border-color: rgba(201,168,76,0.4);
    }
    .ck-tool-tip {
      position: absolute;
      left: calc(100% + 8px);
      top: 50%; transform: translateY(-50%);
      padding: 4px 8px;
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: 4px;
      color: var(--text);
      font-size: 0.72rem;
      white-space: nowrap;
      opacity: 0; pointer-events: none;
      transition: opacity 0.12s;
      z-index: 50;
    }
    .ck-tool:hover .ck-tool-tip { opacity: 1; }
    .ck-tool-sep {
      width: 26px; height: 1px;
      background: var(--border);
      margin: 0.25rem 0;
    }

    /* ─── MARQUEE (drag-select rectangle) ───────────────────────── */
    .ck-marquee {
      position: absolute;
      border: 1px dashed var(--gold);
      background: rgba(201,168,76,0.08);
      pointer-events: none;
      z-index: 12;
    }

    /* ─── SELECTION OVERLAY (resize handles, screen-space) ────── */
    /* Above the format bar (z-index:30) so resize handles are always
       grab-able and never covered by the floating text toolbar. The overlay
       itself is pointer-events:none, so only the handle squares intercept. */
    .ck-overlay {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 35;
    }
    .ck-handle {
      position: absolute;
      width: 12px; height: 12px;
      background: #fff;
      border: 1.5px solid var(--gold);
      border-radius: 2px;
      pointer-events: auto;
      box-shadow: 0 1px 3px rgba(0,0,0,0.45);
      transition: transform 0.06s;
    }
    /* Generous invisible grab zone so an imprecise click still resizes instead
       of moving the box or grabbing the connector handle next to it. */
    .ck-handle::before {
      content: '';
      position: absolute;
      inset: -9px;
      border-radius: 5px;
    }
    .ck-handle:hover { transform: scale(1.25); }
    .ck-handle--nw, .ck-handle--se { cursor: nwse-resize; }
    .ck-handle--ne, .ck-handle--sw { cursor: nesw-resize; }
    .ck-handle--n,  .ck-handle--s  { cursor: ns-resize; }
    .ck-handle--e,  .ck-handle--w  { cursor: ew-resize; }
    /* Edge handles: thinner */
    .ck-handle--n, .ck-handle--s { width: 18px; }
    .ck-handle--e, .ck-handle--w { height: 18px; }

    /* ── Alignment guide lines (drawn while dragging) ── */
    .ck-guide-layer {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 11;
      overflow: hidden;
    }
    .ck-guide { position: absolute; background: var(--gold-light); box-shadow: 0 0 5px rgba(226,192,112,0.7); }
    .ck-guide--v { width: 1px; }
    .ck-guide--h { height: 1px; }

    /* ── Floating text format toolbar (Canva-style) ── */
    .ck-fmt-bar {
      position: absolute;
      z-index: 30;
      display: flex;
      align-items: center;
      gap: 2px;
      padding: 5px 7px;
      background: rgba(20,20,20,0.97);
      border: 1px solid var(--border);
      border-radius: 10px;
      box-shadow: 0 8px 26px rgba(0,0,0,0.55);
      pointer-events: auto;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }
    .ck-fmt-bar .ck-fmt-font {
      background: var(--bg3);
      color: var(--text);
      border: 1px solid var(--border);
      border-radius: 6px;
      font-size: 12px;
      padding: 4px 6px;
      cursor: pointer;
      outline: none;
    }
    .ck-fmt-btn {
      min-width: 28px; height: 28px;
      display: inline-flex; align-items: center; justify-content: center;
      background: transparent;
      color: var(--text);
      border: 1px solid transparent;
      border-radius: 6px;
      font-size: 13px; line-height: 1;
      cursor: pointer;
      padding: 0 6px;
      transition: background 0.12s, border-color 0.12s;
    }
    .ck-fmt-btn:hover { background: rgba(201,168,76,0.15); }
    .ck-fmt-btn.is-on { background: rgba(201,168,76,0.22); border-color: var(--gold); color: var(--gold-light); }
    .ck-fmt-btn svg { display: block; }
    .ck-fmt-size { min-width: 22px; text-align: center; font-size: 12px; color: var(--muted); }
    .ck-fmt-divider { width: 1px; height: 20px; background: var(--border); margin: 0 4px; }
    .ck-fmt-swatch {
      width: 18px; height: 18px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.25);
      cursor: pointer;
      padding: 0;
      transition: transform 0.1s;
    }
    .ck-fmt-swatch:hover { transform: scale(1.15); }
    .ck-fmt-swatch.is-on { outline: 2px solid var(--gold); outline-offset: 1px; }
    /* Right-click color swatch row (shared; portal.html also styles these
       inline). max-width + wrap keeps the expanded 9-color palette tidy. */
    .ck-ctx-swatches {
      display: flex; flex-wrap: wrap; align-items: center;
      gap: 6px; padding: 8px 12px; max-width: 168px;
    }
    .ck-ctx-swatch {
      width: 18px; height: 18px; border-radius: 50%;
      cursor: pointer; border: 2px solid transparent;
      transition: border-color 0.1s; flex-shrink: 0;
    }
    .ck-ctx-swatch:hover, .ck-ctx-swatch.ck-active { border-color: #F0F0F0; }
    /* "no fill" swatch: transparent with a diagonal slash */
    .ck-fmt-swatch--none {
      background:
        linear-gradient(to top left, transparent calc(50% - 1px), #E25555 calc(50% - 1px), #E25555 calc(50% + 1px), transparent calc(50% + 1px)),
        var(--bg3);
    }
    .ck-fmt-mini { font-size: 11px; color: var(--muted); margin: 0 3px 0 1px; text-transform: uppercase; letter-spacing: 0.04em; }

    /* ── Shape items (rect / ellipse / line / arrow) ── */
    .ck-item--shape { box-shadow: none; background: transparent; }
    .ck-item--shape.is-selected { outline: 2px solid var(--gold); outline-offset: 2px; }
    .ck-item--shape svg { width: 100%; height: 100%; pointer-events: none; }
    /* Freehand pen strokes */
    .ck-item--draw { box-shadow: none; background: transparent; }
    .ck-item--draw.is-selected { outline: 2px solid var(--gold); outline-offset: 2px; }
    .ck-item--draw svg { width: 100%; height: 100%; pointer-events: none; }

    /* ── Shape picker popover (anchored to the Shape tool) ── */
    .ck-tool-wrap { position: relative; display: flex; }
    .ck-shape-menu {
      display: none;
      position: absolute;
      left: calc(100% + 8px);
      top: 0;
      z-index: 60;
      gap: 4px;
      padding: 6px;
      background: rgba(20,20,20,0.98);
      border: 1px solid var(--border);
      border-radius: 10px;
      box-shadow: 0 8px 26px rgba(0,0,0,0.55);
    }
    .ck-shape-menu button {
      width: 34px; height: 34px;
      display: inline-flex; align-items: center; justify-content: center;
      background: var(--bg3);
      color: var(--text);
      border: 1px solid var(--border);
      border-radius: 8px;
      cursor: pointer;
      transition: background 0.12s, border-color 0.12s;
    }
    .ck-shape-menu button:hover { background: rgba(201,168,76,0.18); border-color: var(--gold); color: var(--gold-light); }

    /* ── Help / keyboard-shortcuts button + cheat-sheet ── */
    .ck-help-btn {
      width: 30px; min-width: 30px; padding: 0;
      font-weight: 800; font-size: 14px;
      border-radius: 50%;
    }
    .ck-shortcuts-overlay {
      position: fixed; inset: 0; z-index: 4000;
      display: flex; align-items: center; justify-content: center;
      background: rgba(0,0,0,0.55);
      backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    }
    .ck-shortcuts-panel {
      width: min(560px, 92vw); max-height: 86vh; overflow: auto;
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: 14px;
      box-shadow: 0 24px 60px rgba(0,0,0,0.6);
      padding: 0;
    }
    .ck-shortcuts-head {
      display: flex; align-items: center; justify-content: space-between;
      padding: 16px 20px;
      border-bottom: 1px solid var(--border);
      font-family: 'Bebas Neue', sans-serif;
      letter-spacing: 0.04em;
      font-size: 1.35rem;
      color: var(--gold-light);
      position: sticky; top: 0; background: var(--bg2);
    }
    .ck-shortcuts-close {
      background: transparent; border: none; color: var(--muted);
      font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px;
    }
    .ck-shortcuts-close:hover { color: var(--text); }
    .ck-shortcuts-grid {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 2px 18px;
      padding: 14px 20px;
    }
    .ck-sc-key {
      font-family: ui-monospace, 'SF Mono', Menlo, monospace;
      font-size: 12.5px;
      color: var(--gold);
      white-space: nowrap;
      padding: 6px 0;
      border-bottom: 1px solid rgba(255,255,255,0.04);
    }
    .ck-sc-desc {
      font-size: 13px; color: var(--text);
      padding: 6px 0;
      border-bottom: 1px solid rgba(255,255,255,0.04);
    }
    .ck-shortcuts-foot {
      padding: 12px 20px 18px; text-align: center;
      font-size: 12px; color: var(--muted);
    }
    .ck-shortcuts-foot b { color: var(--gold-light); }

    /* ── Custom in-app dialog (replaces browser confirm()/prompt()) ── */
    .ck-dialog-overlay {
      position: fixed; inset: 0; z-index: 5000;
      display: flex; align-items: center; justify-content: center;
      background: rgba(0,0,0,0.6);
      backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
      padding: 20px;
    }
    .ck-dialog {
      width: min(400px, 94vw);
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: 16px;
      box-shadow: 0 30px 70px rgba(0,0,0,0.65);
      /* Transform-only entrance pop. We deliberately do NOT animate opacity to
         0 here: an animation that is active-but-frozen (e.g. a backgrounded
         tab) pins its property at the start keyframe, which would leave the
         dialog invisible. A frozen transform is still fully visible. */
      animation: ckDlgPop 0.2s cubic-bezier(0.16,1,0.3,1);
      overflow: hidden;
    }
    @keyframes ckDlgPop {
      from { transform: translateY(8px) scale(0.97); }
      to   { transform: translateY(0) scale(1); }
    }
    .ck-dialog-icon {
      width: 44px; height: 44px; border-radius: 12px;
      display: flex; align-items: center; justify-content: center;
      margin: 22px auto 0;
      background: rgba(201,168,76,0.14); color: var(--gold-light);
    }
    .ck-dialog-icon.is-danger { background: rgba(220,80,80,0.15); color: #ff7b7b; }
    .ck-dialog-icon svg { width: 22px; height: 22px; }
    .ck-dialog-title {
      font-family: 'Bebas Neue', sans-serif;
      letter-spacing: 0.03em;
      font-size: 1.5rem; text-align: center;
      color: var(--text); margin: 14px 24px 0;
    }
    .ck-dialog-msg {
      font-size: 13.5px; line-height: 1.5; text-align: center;
      color: var(--muted); margin: 8px 26px 0;
    }
    .ck-dialog-input {
      display: block; width: calc(100% - 48px); margin: 16px 24px 0;
      background: var(--bg3, #1a1a1a); border: 1px solid var(--border);
      border-radius: 10px; padding: 11px 13px;
      color: var(--text); font-size: 14px; font-family: inherit;
      box-sizing: border-box;
    }
    .ck-dialog-input:focus { outline: none; border-color: var(--gold); }
    .ck-dialog-actions {
      display: flex; gap: 10px; padding: 22px 24px 24px;
    }
    .ck-dialog-btn {
      flex: 1; padding: 11px 16px; border-radius: 10px;
      font-size: 13.5px; font-weight: 600; cursor: pointer;
      border: 1px solid var(--border); font-family: inherit;
      transition: background 0.12s ease, border-color 0.12s ease, transform 0.08s ease;
    }
    .ck-dialog-btn:active { transform: translateY(1px); }
    .ck-dialog-btn--cancel { background: transparent; color: var(--text); }
    .ck-dialog-btn--cancel:hover { background: rgba(255,255,255,0.06); }
    .ck-dialog-btn--confirm {
      background: var(--gold); border-color: var(--gold); color: #0a0a0a;
    }
    .ck-dialog-btn--confirm:hover { background: var(--gold-light); border-color: var(--gold-light); }
    .ck-dialog-btn--danger {
      background: #dc5050; border-color: #dc5050; color: #fff;
    }
    .ck-dialog-btn--danger:hover { background: #e56464; border-color: #e56464; }

    /* ── Align row inside the right-click menu (multi-select) ── */
    .ck-ctx-aligns { display: flex; gap: 3px; padding: 6px 8px; justify-content: space-between; }
    .ck-ctx-align-btn {
      flex: 1;
      height: 28px;
      display: inline-flex; align-items: center; justify-content: center;
      background: var(--bg3);
      color: var(--text);
      border: 1px solid var(--border);
      border-radius: 6px;
      cursor: pointer;
      transition: background 0.12s, border-color 0.12s;
    }
    .ck-ctx-align-btn:hover { background: rgba(201,168,76,0.18); border-color: var(--gold); color: var(--gold-light); }

    /* Sticky-color popover (anchored to the sticky tool) */
    .ck-color-pop {
      position: absolute;
      left: calc(100% + 8px);
      top: 0;
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: 10px;
      box-shadow: 0 12px 32px rgba(0,0,0,0.5);
      padding: 0.55rem;
      display: grid;
      grid-template-columns: repeat(3, 26px);
      gap: 6px;
      z-index: 60;
    }
    .ck-color-swatch {
      width: 26px; height: 26px;
      border-radius: 6px;
      cursor: pointer;
      border: 2px solid transparent;
      transition: transform 0.1s;
    }
    .ck-color-swatch:hover { transform: scale(1.08); }
    .ck-color-swatch.is-active { border-color: var(--gold); }

    /* Main area */
    .ck-canvas-main {
      flex: 1; display: flex; flex-direction: column;
      min-width: 0; min-height: 0;
      position: relative;
    }
    .ck-canvas-toolbar {
      display: flex; align-items: center; justify-content: space-between;
      padding: 0.55rem 0.9rem;
      background: var(--bg2);
      border-bottom: 1px solid var(--border);
      gap: 0.75rem;
    }
    .ck-canvas-title-wrap { flex: 1; min-width: 0; }
    .ck-canvas-title-input {
      width: 100%; max-width: 360px;
      background: transparent; border: 1px solid transparent;
      color: var(--text);
      font-size: 1.02rem; font-weight: 600;
      padding: 0.35rem 0.55rem; border-radius: 6px;
      transition: border-color 0.15s, background 0.15s;
      font-family: inherit;
    }
    .ck-canvas-title-input:hover { border-color: var(--border); }
    .ck-canvas-title-input:focus {
      border-color: rgba(201,168,76,0.5); outline: none;
      background: rgba(0,0,0,0.2);
    }
    .ck-canvas-tools {
      display: flex; align-items: center; gap: 0.45rem;
    }
    /* Build Pipeline button */
    .ck-pl-btn {
      display:inline-flex; align-items:center; gap:4px; padding:4px 10px;
      background:rgba(201,168,76,0.1); border:1px solid rgba(201,168,76,0.38);
      border-radius:5px; color:#C9A84C; font-size:10px; font-weight:700;
      letter-spacing:0.5px; text-transform:uppercase; cursor:pointer; font-family:inherit;
      transition:background 0.15s;
    }
    .ck-pl-btn:hover { background:rgba(201,168,76,0.22); }
    .ck-pl-btn:disabled { opacity:0.5; cursor:default; }
    .ck-pl-btn .ck-ic { color:var(--gold); }
    /* Risk/Blocker base button (inline style adds the red override) */
    .ck-pipeline-btn {
      display:inline-flex; align-items:center; gap:5px; padding:4px 10px;
      background:rgba(201,168,76,0.08); border:1px solid rgba(201,168,76,0.25);
      border-radius:5px; color:#C9A84C; font-size:10px; font-weight:700;
      letter-spacing:0.5px; text-transform:uppercase; cursor:pointer; font-family:inherit;
    }
    .ck-pipeline-btn:hover { background:rgba(201,168,76,0.16); }
    /* Export PNG button */
    .ck-export-btn {
      display:inline-flex; align-items:center; gap:4px; padding:4px 9px;
      background:rgba(255,255,255,0.04); border:1px solid #2A2A2A;
      border-radius:5px; color:#888; font-size:10px; font-weight:600;
      letter-spacing:0.4px; cursor:pointer; font-family:inherit;
      transition:color 0.15s, border-color 0.15s;
    }
    .ck-export-btn:hover { color:#C9A84C; border-color:rgba(201,168,76,0.4); }
    .ck-tool-btn {
      display: inline-flex; align-items: center; gap: 0.4rem;
      padding: 0.45rem 0.75rem; border-radius: 6px;
      background: rgba(201,168,76,0.12);
      color: var(--gold);
      border: 1px solid rgba(201,168,76,0.32);
      font-size: 0.82rem; font-weight: 600;
      cursor: pointer; transition: all 0.15s;
      font-family: inherit;
    }
    .ck-tool-btn:hover { background: rgba(201,168,76,0.25); }
    .ck-tool-btn--ghost {
      background: transparent; color: var(--muted);
      border-color: var(--border);
    }
    .ck-tool-btn--ghost:hover { color: var(--text); border-color: var(--gold); }
    .ck-tool-ic { font-size: 0.95rem; line-height: 1; }
    .ck-tool-sep {
      width: 1px; height: 20px; background: var(--border); margin: 0 0.25rem;
    }
    .ck-tool-zoom {
      font-size: 0.75rem; color: var(--muted);
      padding: 0.35rem 0.55rem; min-width: 52px; text-align: right;
      font-variant-numeric: tabular-nums;
    }

    /* ── Canvas background color picker ── */
    .ck-bg-picker-wrap {
      position: relative;
    }
    .ck-bg-btn {
      display: flex; align-items: center; justify-content: center;
      width: 32px; height: 32px;
      border-radius: 50%;
      background: rgba(255,255,255,0.07);
      border: 1.5px solid var(--border);
      cursor: pointer;
      padding: 0;
      transition: border-color 0.15s, background 0.15s;
      flex-shrink: 0;
    }
    .ck-bg-btn:hover { border-color: var(--gold); background: rgba(255,255,255,0.12); }
    .ck-bg-circle {
      display: block;
      width: 18px; height: 18px;
      border-radius: 50%;
      background: #14110b;
      border: 2px solid rgba(255,255,255,0.18);
      box-shadow: 0 0 0 1.5px rgba(0,0,0,0.45) inset;
      transition: background 0.2s;
    }
    .ck-bg-popover {
      display: none;
      position: absolute;
      right: 0; top: calc(100% + 8px);
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 14px 16px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04) inset;
      z-index: 2000;
      min-width: 220px;
      animation: ckBgFadeIn 0.13s ease;
    }
    .ck-bg-popover.is-open { display: block; }
    @keyframes ckBgFadeIn {
      from { opacity: 0; transform: translateY(-4px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .ck-bg-pop-title {
      font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em;
      text-transform: uppercase; color: var(--muted);
      margin-bottom: 10px;
    }
    .ck-bg-swatches {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
    }
    .ck-bg-swatch {
      display: flex; flex-direction: column; align-items: center; gap: 5px;
      cursor: pointer;
    }
    .ck-bg-swatch-dot {
      width: 36px; height: 36px;
      border-radius: 50%;
      border: 2px solid rgba(255,255,255,0.14);
      transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
      box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    }
    .ck-bg-swatch:hover .ck-bg-swatch-dot {
      transform: scale(1.12);
      border-color: var(--gold);
      box-shadow: 0 0 0 3px rgba(201,168,76,0.28), 0 2px 8px rgba(0,0,0,0.4);
    }
    .ck-bg-swatch.is-active .ck-bg-swatch-dot {
      border-color: var(--gold);
      box-shadow: 0 0 0 3px rgba(201,168,76,0.45), 0 2px 8px rgba(0,0,0,0.4);
    }
    .ck-bg-swatch-label {
      font-size: 0.62rem; color: var(--muted); white-space: nowrap;
      font-weight: 500; letter-spacing: 0.03em;
    }
    .ck-bg-swatch.is-active .ck-bg-swatch-label { color: var(--gold); }

    /* Stage - the viewport that clips the world */
    /* Kill the page scrollbar while a canvas is the active full-screen view
       (admin portal toggles this class on <html>/<body>) — same flicker-free
       behavior as the realtor portal's body.view-canvas rule. */
    html.ck-canvas-noscroll, body.ck-canvas-noscroll { overflow: hidden !important; }

    .ck-canvas-stage {
      flex: 1; position: relative;
      overflow: hidden;
      background-color: #14110b;
      background-image:
        radial-gradient(circle at center, rgba(201,168,76,0.08) 1px, transparent 1px);
      background-size: 28px 28px;
      cursor: grab;
      user-select: none;
      /* We drive pan / drag / pinch from JS touch handlers — stop the browser
         from also scrolling/zooming the page on touch devices (iPad). */
      touch-action: none;
    }
    .ck-canvas-stage.is-panning { cursor: grabbing; }
    .ck-canvas-stage.is-empty .ck-canvas-empty { display: flex; }

    .ck-canvas-empty {
      position: absolute; inset: 0; z-index: 1;
      display: none; flex-direction: column;
      align-items: center; justify-content: center;
      pointer-events: none; color: var(--muted);
      text-align: center; padding: 2rem;
    }
    .ck-canvas-empty-emoji { font-size: 3.5rem; margin-bottom: 0.6rem; opacity: 0.7; }
    .ck-canvas-empty-title { font-size: 1.1rem; color: var(--text); font-weight: 600; margin-bottom: 0.35rem; }
    .ck-canvas-empty-sub { font-size: 0.85rem; line-height: 1.5; max-width: 380px; }

    /* World - pan/zoom container, holds all items */
    .ck-canvas-world {
      position: absolute;
      top: 0; left: 0;
      width: 0; height: 0;       /* zero box; transforms only */
      transform-origin: 0 0;
      will-change: transform;
    }

    /* Sticky note */
    .ck-item {
      position: absolute;
      box-sizing: border-box;
      border-radius: 6px;
      box-shadow: 0 4px 14px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.08) inset;
      cursor: grab;
      transition: box-shadow 0.15s, transform 0.05s;
      animation: ckItemEaseIn 0.28s cubic-bezier(0.22,1,0.36,1);
      /* Prevent stray text highlighting while dragging a box around. Text
         items opt back in only while they're in edit mode (see .is-editing). */
      -webkit-user-select: none;
      user-select: none;
    }
    @keyframes ckItemEaseIn {
      from { opacity: 0; transform: translateY(10px) scale(0.97); }
      to   { opacity: 1; transform: translateY(0) scale(1); }
    }
    .ck-item.is-dragging { cursor: grabbing; box-shadow: 0 10px 28px rgba(0,0,0,0.5); }
    .ck-item.is-selected {
      outline: 2px solid var(--gold);
      outline-offset: 2px;
    }
    .ck-item--note {
      padding: 12px 14px;
      font-family: 'Georgia', serif;
      font-size: 14px; line-height: 1.45;
      color: #2a230f;
    }
    .ck-item--note .ck-note-text {
      width: 100%; height: 100%;
      background: transparent; border: none; outline: none; resize: none;
      font: inherit; color: inherit;
      padding: 0;
      /* Not editable until you double-click in: lets a single click /
         drag move the box instead of placing a caret + selecting text. */
      pointer-events: none;
      cursor: inherit;
      -webkit-user-select: none;
      user-select: none;
    }
    .ck-item--note.is-editing .ck-note-text {
      pointer-events: auto;
      cursor: text;
      -webkit-user-select: text;
      user-select: text;
    }
    .ck-item--note .ck-note-text::placeholder { color: rgba(42,35,15,0.4); }

    /* Text item - like a sticky but no background */
    .ck-item--text {
      padding: 8px 10px;
      box-shadow: none;
      background: transparent;
      color: var(--text);
      font-family: 'Georgia', serif;
      font-size: 16px; line-height: 1.4;
    }
    /* Selected/editing: faint fill so the (otherwise transparent) box bounds
       are visible — makes resizing obviously work, like a Canva text frame. */
    .ck-item--text.is-selected { box-shadow: 0 0 0 2px var(--gold); background: rgba(201,168,76,0.07); }
    .ck-item--text.is-editing { cursor: text; box-shadow: 0 0 0 2px var(--gold); background: rgba(201,168,76,0.07); }
    .ck-item--text .ck-text-text {
      width: 100%; height: 100%;
      background: transparent; border: none; outline: none; resize: none;
      font: inherit; color: inherit;
      padding: 0;
      /* Not editable until you double-click in: lets a single click /
         drag move the box instead of placing a caret + selecting text. */
      pointer-events: none;
      cursor: inherit;
      -webkit-user-select: none;
      user-select: none;
    }
    .ck-item--text.is-editing .ck-text-text {
      pointer-events: auto;
      cursor: text;
      -webkit-user-select: text;
      user-select: text;
    }
    .ck-item--text .ck-text-text::placeholder { color: var(--muted); }

    /* Image item */
    .ck-item--image {
      background: transparent;
      box-shadow: 0 4px 14px rgba(0,0,0,0.4);
      overflow: hidden;
      padding: 0;
    }
    .ck-item--image img {
      width: 100%; height: 100%;
      object-fit: cover; display: block;
      pointer-events: none;
      /* Hint to use higher-quality interpolation when scaled up by the
         canvas zoom transform. Browsers vary on which they honor, so we
         set both - newer Chrome/Edge/Safari use high-quality; older
         engines fall through to optimize-contrast. */
      image-rendering: high-quality;
      image-rendering: -webkit-optimize-contrast;
    }
    .ck-item--image .ck-image-loading {
      width: 100%; height: 100%;
      display: flex; align-items: center; justify-content: center;
      background: rgba(255,255,255,0.04);
      color: var(--muted); font-size: 0.85rem;
    }

    /* Voice note item - recorded audio card with native player */
    .ck-item--voice {
      background: var(--bg3);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 0.6rem 0.7rem;
      display: flex; flex-direction: column; gap: 0.45rem;
      box-shadow: 0 6px 20px rgba(0,0,0,0.4);
      cursor: grab;
      overflow: hidden;
    }
    .ck-item--voice.is-selected { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(201,168,76,0.25); }
    .ck-item--voice .ck-voice-head {
      display: flex; align-items: center; gap: 0.35rem;
      font-size: 0.72rem; font-weight: 700; color: var(--gold); letter-spacing: 0.02em;
    }
    .ck-item--voice .ck-voice-audio { width: 100%; height: 36px; }
    .ck-item--voice .ck-image-loading { font-size: 0.72rem; color: var(--muted); padding: 0.3rem 0; }

    /* Floating recording bar (shown while a canvas voice note records) */
    .ck-voice-bar {
      position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
      z-index: 50; display: flex; align-items: center; gap: 0.6rem;
      background: rgba(20,20,22,0.96); border: 1px solid var(--border); border-radius: 999px;
      padding: 0.45rem 0.65rem 0.45rem 0.9rem; box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    }
    .ck-voice-bar .ck-voice-dot {
      width: 10px; height: 10px; border-radius: 50%;
      background: #ef4444; box-shadow: 0 0 8px rgba(239,68,68,0.7); flex-shrink: 0;
    }
    .ck-voice-bar .ck-voice-time { font-variant-numeric: tabular-nums; font-size: 0.82rem; color: var(--text); min-width: 34px; }
    .ck-voice-btn { font-family: inherit; font-size: 0.74rem; font-weight: 600; border-radius: 999px; padding: 0.32rem 0.75rem; cursor: pointer; border: 1px solid transparent; }
    .ck-voice-btn.ck-voice-stop { background: var(--gold); color: #1a1a1a; }
    .ck-voice-btn.ck-voice-cancel { background: transparent; border-color: var(--border); color: var(--muted); }
    .ck-voice-btn.ck-voice-cancel:hover { color: var(--text); }

    /* Drag-to-trash drop zone (mirrors the Opportunities archive chip). Hidden
       until you start dragging an item; drop over it to delete. pointer-events
       are off so it never intercepts the canvas's own mouse drag loop. */
    .ck-trash-zone {
      position: absolute; top: 14px; right: 14px; z-index: 40;
      display: none; align-items: center; gap: 0.45rem;
      padding: 0.85rem 1.25rem; border-radius: 14px;
      border: 2px dashed rgba(248,113,113,0.55);
      background: rgba(40,12,12,0.82);
      -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
      color: #f87171; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
      pointer-events: none;
      transition: transform 0.18s cubic-bezier(0.22,1,0.36,1), background 0.18s, border-color 0.18s;
    }
    .ck-trash-zone.is-visible { display: inline-flex; }
    .ck-trash-zone.over { background: rgba(248,113,113,0.32); border-color: #f87171; color: #fff; transform: scale(1.08); }
    .ck-trash-zone .ck-ic { font-size: 1rem; }

    /* Link item - card with title + URL */
    .ck-item--link {
      padding: 14px 16px;
      background: var(--bg2);
      border: 1px solid var(--border);
      border-left: 3px solid var(--gold);
      color: var(--text);
      box-shadow: 0 4px 14px rgba(0,0,0,0.35);
      display: flex; flex-direction: column; gap: 6px;
      overflow: hidden;
    }
    .ck-item--link .ck-link-domain {
      font-size: 0.7rem; color: var(--muted);
      letter-spacing: 0.06em; text-transform: uppercase;
    }
    .ck-item--link .ck-link-title {
      font-size: 0.95rem; font-weight: 600; color: var(--text);
      line-height: 1.3;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }
    .ck-item--link .ck-link-url {
      font-size: 0.72rem; color: var(--gold);
      word-break: break-all;
      text-decoration: none;
      cursor: pointer;
    }
    .ck-item--link .ck-link-url:hover { text-decoration: underline; }

    /* Frame - large named region that visually groups content */
    .ck-item--frame {
      background: rgba(201,168,76,0.04);
      border: 1.5px dashed rgba(201,168,76,0.4);
      border-radius: 10px;
      padding: 0;
      box-shadow: none;
      cursor: grab;
    }
    .ck-item--frame.is-dragging { cursor: grabbing; }
    .ck-item--frame .ck-frame-label {
      position: absolute;
      left: 8px; top: -22px;
      padding: 2px 10px;
      background: rgba(201,168,76,0.15);
      border: 1px solid rgba(201,168,76,0.4);
      border-radius: 4px;
      font-size: 0.72rem; font-weight: 600;
      letter-spacing: 0.04em;
      color: var(--gold);
      max-width: 90%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .ck-item--frame .ck-frame-label-input {
      background: transparent; border: none; outline: none;
      color: inherit; font: inherit;
      width: 100%;
      font-family: inherit;
    }
    .ck-item--frame.is-selected { border-color: var(--gold); }
    .ck-item--frame.is-selected .ck-frame-label {
      background: rgba(201,168,76,0.3);
    }

    /* Status bar */
    .ck-canvas-status {
      display: flex; align-items: center; justify-content: space-between;
      padding: 0.4rem 0.9rem;
      background: var(--bg);
      border-top: 1px solid var(--border);
      font-size: 0.72rem; color: var(--muted);
      font-variant-numeric: tabular-nums;
    }
    .ck-canvas-save { font-style: italic; }
    .ck-canvas-save.is-saving { color: var(--gold); font-style: normal; }

    /* Connectors layer (SVG sibling of items inside .ck-canvas-world) */
    .ck-connectors-layer {
      position: absolute;
      left: 0; top: 0;
      width: 1px; height: 1px;
      overflow: visible;
      pointer-events: none;
      z-index: 1;
    }
    .ck-connectors-layer .ck-connector-hit {
      fill: none;
      stroke: transparent;
      stroke-width: 14;
      cursor: pointer;
      pointer-events: stroke;
    }
    .ck-connectors-layer .ck-connector-line {
      fill: none;
      pointer-events: none;
    }
    .ck-connectors-layer g.ck-connector.is-selected .ck-connector-line {
      filter: drop-shadow(0 0 4px rgba(201,168,76,0.85));
    }
    .ck-connectors-layer .ck-connector-arrow { pointer-events: none; }
    .ck-connectors-layer .ck-connector-label {
      fill: var(--text);
      font-size: 12px;
      font-family: inherit;
      text-anchor: middle;
      dominant-baseline: central;
      pointer-events: none;
    }
    .ck-connectors-layer .ck-connector-label-bg { pointer-events: none; }
    .ck-connectors-layer .ck-connector-preview .ck-connector-line {
      stroke-dasharray: 6 4;
      opacity: 0.85;
    }

    /* Edge "+" handles on selected items (drag-to-connect) */
    .ck-edge-handle {
      position: absolute;
      width: 16px; height: 16px;
      border-radius: 50%;
      background: var(--gold);
      color: #000;
      font-weight: 800;
      font-size: 12px;
      line-height: 16px;
      text-align: center;
      cursor: crosshair;
      box-shadow: 0 1px 3px rgba(0,0,0,0.45);
      user-select: none;
      pointer-events: auto;
      z-index: 60;
      transition: transform 0.1s;
    }
    .ck-edge-handle::before { content: '+'; display: block; }
    .ck-edge-handle:hover { transform: scale(1.25); }

    /* Connector endpoint handles (when a connector is selected) */
    .ck-conn-endpoint {
      position: absolute;
      width: 11px; height: 11px;
      border-radius: 50%;
      background: var(--gold);
      border: 2px solid #000;
      cursor: move;
      pointer-events: auto;
      z-index: 60;
    }

    /* Floating connector style menu */
    .ck-connector-style-menu {
      position: absolute;
      display: flex;
      gap: 2px;
      padding: 5px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 6px;
      box-shadow: 0 6px 18px rgba(0,0,0,0.55);
      z-index: 70;
      pointer-events: auto;
      align-items: center;
      font-family: inherit;
    }
    .ck-connector-style-menu button {
      background: transparent;
      border: 1px solid transparent;
      color: var(--text);
      width: 28px; height: 28px;
      border-radius: 4px;
      font-size: 0.95rem;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      font-family: inherit;
    }
    .ck-connector-style-menu button:hover { background: rgba(201,168,76,0.18); }
    .ck-connector-style-menu button.is-active {
      background: rgba(201,168,76,0.25);
      border-color: var(--gold);
      color: var(--gold);
    }
    .ck-connector-style-menu .ck-csm-sep {
      width: 1px; height: 18px; background: var(--border); margin: 0 3px;
    }

    /* Inline label edit input (overlaid in screen space) */
    .ck-connector-label-input {
      position: absolute;
      background: var(--bg);
      border: 1px solid var(--gold);
      color: var(--text);
      font-family: inherit;
      font-size: 12px;
      padding: 2px 6px;
      border-radius: 3px;
      outline: none;
      z-index: 80;
      pointer-events: auto;
      text-align: center;
      min-width: 80px;
    }

    /* ── MINI-MAP ── */
    #ckMiniMap {
      position:absolute; bottom:40px; right:12px; width:160px; height:100px;
      background:rgba(10,10,10,0.82); border:1px solid #2A2A2A; border-radius:6px;
      cursor:pointer; z-index:120; display:none;
    }
    #ckMiniMap.visible { display:block; }
    #ckMiniMapToggle {
      position:absolute; bottom:10px; right:12px; z-index:121;
      background:rgba(10,10,10,0.7); border:1px solid #2A2A2A; border-radius:4px;
      color:#555; font-size:10px; padding:3px 7px; cursor:pointer; font-family:inherit;
      line-height:1.3; transition:color 0.15s, border-color 0.15s;
    }
    #ckMiniMapToggle:hover, #ckMiniMapToggle.active { color:#C9A84C; border-color:#C9A84C; }

    /* ── COMPACT VOICE PLAYER ── */
    .ck-voice-player {
      display:flex; align-items:center; gap:0.35rem;
      background:rgba(255,255,255,0.04); border-radius:6px;
      padding:0.28rem 0.4rem;
    }
    .ck-vp-btn {
      width:22px; height:22px; flex-shrink:0;
      background:var(--gold); border:none; border-radius:50%;
      cursor:pointer; display:flex; align-items:center; justify-content:center;
      padding:0; font-size:8px; color:#1a1a1a; line-height:1; font-family:inherit;
    }
    .ck-vp-btn::before { content:'▶'; margin-left:1px; }
    .ck-vp-btn.playing::before { content:'⏸'; margin-left:0; }
    .ck-vp-track {
      flex:1; height:3px; background:rgba(255,255,255,0.12); border-radius:2px;
      cursor:pointer; position:relative; overflow:hidden;
    }
    .ck-vp-fill { height:100%; background:var(--gold); border-radius:2px; width:0%; }
    .ck-vp-time {
      font-size:0.63rem; color:var(--muted); font-variant-numeric:tabular-nums;
      min-width:26px; text-align:right; flex-shrink:0;
    }

    /* Mobile: stack rail above canvas */
    @media (max-width: 720px) {
      .ck-canvas-shell { flex-direction: column; height: calc(100vh - 80px); }
      .ck-canvas-rail { flex: 0 0 auto; max-height: 32%; border-right: none; border-bottom: 1px solid var(--border); }
    }