:root {
      color-scheme: dark;
      --bg: #242424;
      --panel: #2c2c2c;
      --surface: #383838;
      --surface-2: #424242;
      --border: #4a4a4a;
      --border-strong: #5a5a5a;
      --text: #f5f5f5;
      --muted: #c2c2c2;
      --subtle: #8f8f8f;
      --blue: #2441ff;
      --blue-rgb: 36 65 255;
      --blue-hover: #1d35e6;
      --blue-soft: rgba(36, 65, 255, .12);
      --shadow: 0 1px 2px rgba(0,0,0,.36), 0 12px 34px rgba(0,0,0,.22);
      --radius: 8px;
      --ease: cubic-bezier(.2, .8, .2, 1);
      font-family: "Inter", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    }

    body.light {
      color-scheme: light;
      --bg: #f7f7f5;
      --panel: #ffffff;
      --surface: #f4f4f2;
      --surface-2: #ececea;
      --border: #deded8;
      --border-strong: #c9c9c1;
      --text: #111;
      --muted: #4d4d49;
      --subtle: #77766f;
      --blue-soft: rgba(36, 65, 255, .1);
      --shadow: 0 1px 2px rgba(0,0,0,.08), 0 16px 34px rgba(0,0,0,.08);
    }

    * { box-sizing: border-box; }
    html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--bg); color: var(--text); }
    body { font-size: 14px; letter-spacing: 0; }
    button, input, textarea, select { font: inherit; color: inherit; }
    button { border: 0; cursor: pointer; }

    .app {
      width: 100vw;
      height: 100vh;
      display: grid;
      grid-template-columns: 240px minmax(0, 1fr);
      background: var(--bg);
      transition: background .22s var(--ease), grid-template-columns .22s var(--ease);
    }
    .app.filters-collapsed { grid-template-columns: 240px minmax(0, 1fr); }
    .filters,
    .app.filters-collapsed .filters { display: none; }

    .sidebar, .filters {
      background: var(--panel);
      border-right: 1px solid var(--border);
      min-width: 0;
      display: flex;
      flex-direction: column;
      transition: background .22s var(--ease), border-color .22s var(--ease);
    }

    .brand, .filter-head, .topbar {
      height: 48px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      padding: 0 16px;
      flex: 0 0 auto;
    }

    .brand { gap: 8px; cursor: pointer; }
    .mark {
      width: 22px;
      height: 34px;
      border-radius: 0;
      background: transparent;
      display: grid;
      place-items: center;
    }
    .catmark-logo {
      display: block;
      overflow: visible;
      color: var(--text);
    }
    .mark .catmark-logo { width: 21px; height: 34px; }
    .catmark-logo-body,
    .catmark-logo-eye {
      transform-box: fill-box;
      transform-origin: center;
      will-change: transform;
    }
    .auth-empty-logo .catmark-logo-body {
      animation: catmarkLogoBody 2s linear infinite;
    }
    .auth-empty-logo .catmark-logo-eye-left {
      animation: catmarkLogoLeftEye 2s linear infinite;
    }
    .auth-empty-logo .catmark-logo-eye-right {
      animation: catmarkLogoRightEye 2s linear infinite;
    }
    .brand:hover .catmark-logo-body {
      animation: catmarkLogoBody 2s linear 1;
    }
    .brand:hover .catmark-logo-eye-left {
      animation: catmarkLogoLeftEye 2s linear 1;
    }
    .brand:hover .catmark-logo-eye-right {
      animation: catmarkLogoRightEye 2s linear 1;
    }
    @keyframes catmarkLogoBody {
      0%, 66.67%, 100% { transform: translateY(0) rotate(0deg); }
      12.5% { transform: translateY(-6px) rotate(-2.8deg); }
      16.67% { transform: translateY(.15px) rotate(-2.8deg); }
      30% { transform: translateY(-1.2px) rotate(3deg); }
      42.5% { transform: translateY(-3.2px) rotate(0deg); }
      50% { transform: translateY(-4px) rotate(-1.7deg); }
      56.67% { transform: translateY(.1px) rotate(-.2deg); }
    }
    @keyframes catmarkLogoLeftEye {
      0%, 35%, 47.5%, 75%, 86%, 100% { transform: translateY(0) scaleY(1); }
      12.5% { transform: translateY(-6px) scaleY(1); }
      40%, 80% { transform: translateY(-3px) scaleY(.08); }
      50% { transform: translateY(-4px) scaleY(1); }
    }
    @keyframes catmarkLogoRightEye {
      0%, 36%, 48%, 76%, 87%, 100% { transform: translateY(0) scaleY(1); }
      12.5% { transform: translateY(-6px) scaleY(1); }
      41%, 81% { transform: translateY(-3px) scaleY(.08); }
      50% { transform: translateY(-4px) scaleY(1); }
    }
    @media (prefers-reduced-motion: reduce) {
      .auth-empty-logo .catmark-logo-body,
      .auth-empty-logo .catmark-logo-eye-left,
      .auth-empty-logo .catmark-logo-eye-right,
      .brand:hover .catmark-logo-body,
      .brand:hover .catmark-logo-eye-left,
      .brand:hover .catmark-logo-eye-right {
        animation: none;
      }
    }
    .brand-name { font-size: 14px; white-space: nowrap; }

    .nav-scroll { flex: 1; overflow: auto; padding: 16px 8px; }
    .section-title {
      height: 21px;
      padding: 0 8px 4px;
      color: var(--subtle);
      font-size: 11px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 4px;
    }
    .icon-button {
      width: 24px;
      height: 24px;
      border-radius: 6px;
      color: var(--subtle);
      background: transparent;
      display: grid;
      place-items: center;
    }
    .icon-button:hover { color: var(--text); background: var(--surface); }
    .icon-button:disabled { opacity: .35; cursor: default; pointer-events: none; }
    .icon-button svg { width: 15px; height: 15px; stroke: currentColor; }
    .material-icon,
    .icon-button .material-icon,
    .tool-button .material-icon,
    .view-toggle .material-icon,
    .primary .material-icon,
    .secondary .material-icon,
    .submit .material-icon,
    .nav-item .material-icon,
    .context-menu .material-icon,
    .card-link-row .material-icon {
      fill: currentColor;
      stroke: none;
    }
    #themeToggle svg {
      transition: transform .28s var(--ease), opacity .22s var(--ease);
      transform-origin: center;
    }
    #themeToggle.theme-spin svg {
      animation: themeSpin .34s var(--ease);
    }
    @keyframes themeSpin {
      0% { transform: rotate(-90deg) scale(.72); opacity: .2; }
      100% { transform: rotate(0) scale(1); opacity: 1; }
    }

    .nav-list { display: grid; gap: 4px; margin-bottom: 28px; }
    .tag-section { display: block; }
    .nav-item {
      height: 33px;
      padding: 0 8px;
      border-radius: var(--radius);
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--muted);
      background: transparent;
      width: 100%;
      text-align: left;
      font-size: 14px;
      transition: background .16s var(--ease), color .16s var(--ease), transform .16s var(--ease);
      cursor: default;
    }
    .nav-item[draggable="true"] { cursor: grab; }
    .nav-item.fixed { cursor: default; }
    .nav-item.dragging {
      opacity: .45;
      cursor: grabbing;
    }
    .nav-item.drop-before,
    .nav-item.drop-after {
      position: relative;
    }
    .nav-item.drop-before::before,
    .nav-item.drop-after::after {
      content: "";
      position: absolute;
      left: 8px;
      right: 8px;
      height: 2px;
      border-radius: 999px;
      background: var(--blue);
      box-shadow: 0 0 0 3px rgb(var(--blue-rgb) / .12);
    }
    .nav-item.drop-before::before { top: -3px; }
    .nav-item.drop-after::after { bottom: -3px; }
    .nav-item.child { padding-left: 32px; }
    .nav-item svg { width: 16px; height: 16px; stroke: currentColor; flex: 0 0 auto; }
    .line-icon {
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex: 0 0 auto;
    }
    .line-icon .line-fill {
      fill: currentColor;
      stroke: none;
    }
    .nav-label {
      flex: 1 1 auto;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .nav-more {
      width: 24px;
      height: 24px;
      margin-left: auto;
      border-radius: 6px;
      background: transparent;
      color: var(--subtle);
      display: grid;
      place-items: center;
      opacity: 0;
      transform: translateX(4px);
      transition: opacity .14s var(--ease), transform .14s var(--ease), background .14s var(--ease), color .14s var(--ease);
    }
    .nav-more svg { width: 15px; height: 15px; }
    .nav-item:hover .nav-more,
    .nav-item:focus-within .nav-more,
    .nav-item.active .nav-more {
      opacity: 1;
      transform: translateX(0);
    }
    .nav-more:hover { background: var(--surface); color: var(--text); }
    .nav-item.active .nav-more { color: color-mix(in srgb, var(--blue) 60%, var(--subtle)); }
    .nav-item.active .nav-more:hover { background: var(--blue-soft); color: var(--blue); }
    .nav-item.active { color: var(--blue); background: var(--blue-soft); }
    .nav-item:hover { background: #343434; color: var(--text); }
    .nav-item:active { transform: scale(.985); }
    body.light .nav-item:hover { background: #f1f1ed; }
    .inline-rename {
      width: 100%;
      min-width: 0;
      height: 24px;
      border: 1px solid var(--border-strong);
      border-radius: 4px;
      background: var(--surface);
      color: var(--text);
      padding: 0 6px;
      outline: none;
      font-size: 14px;
    }
    .inline-rename:focus {
      border-color: rgb(var(--blue-rgb) / .58);
      box-shadow: 0 0 0 3px rgb(var(--blue-rgb) / .12);
    }

    .new-bookmark {
      border-top: 1px solid var(--border);
      display: grid;
      gap: 10px;
      padding: 12px;
      flex: 0 0 auto;
      background: var(--panel);
    }
    .new-bookmark .account-button {
      width: 100%;
      max-width: none;
      height: 38px;
      justify-content: flex-start;
      background: transparent;
      border-color: transparent;
      padding-inline: 4px;
    }
    .new-bookmark .account-button:hover {
      background: color-mix(in srgb, var(--surface) 70%, transparent);
      border-color: transparent;
    }
    .new-bookmark .account-avatar {
      width: 22px;
      height: 22px;
    }
    .primary {
      width: 100%;
      height: 37px;
      border-radius: var(--radius);
      background: var(--blue);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 14px;
      transition: background .16s var(--ease), color .16s var(--ease), transform .16s var(--ease), box-shadow .16s var(--ease);
    }
    .primary:hover { background: var(--blue-hover); }
    .primary:active { transform: scale(.985); }
    body.light .primary {
      background: var(--blue);
      color: #fff;
      box-shadow: 0 12px 28px rgb(var(--blue-rgb) / .24);
    }
    body.light .primary:hover { background: var(--blue-hover); }
    .primary svg { width: 16px; height: 16px; stroke: currentColor; }
    .primary .material-icon { stroke: none; }
    .secondary svg,
    .submit svg {
      width: 15px;
      height: 15px;
      stroke: currentColor;
      flex: 0 0 auto;
    }

    .filter-head { justify-content: space-between; color: var(--muted); }
    .filter-actions { display: flex; gap: 4px; }
    .filter-body { padding: 16px; overflow: auto; }
    .filter-block { margin-bottom: 24px; }
    .label { color: var(--subtle); font-size: 11px; margin: 0 0 14px; }
    .chips { display: flex; flex-wrap: wrap; gap: 8px; }
    .chip {
      min-height: 26px;
      border: 1px solid var(--border);
      border-radius: 999px;
      padding: 5px 10px;
      color: var(--muted);
      background: var(--surface);
      font-size: 11px;
      line-height: 14px;
    }
    .chip.active { color: var(--blue); border-color: rgb(var(--blue-rgb) / .48); background: var(--blue-soft); }

    .segmented {
      height: 36px;
      border: 0;
      border-radius: 0;
      background: transparent;
      padding: 0;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4px;
    }
    .segmented button {
      border-radius: 6px;
      background: transparent;
      color: var(--subtle);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-size: 11px;
      transition: background .16s var(--ease), color .16s var(--ease), transform .16s var(--ease);
    }
    .segmented button:hover { color: var(--text); background: var(--surface); }
    .segmented button.active {
      color: var(--blue);
      background: var(--blue-soft);
      border: 0;
      box-shadow: none;
    }
    .segmented button:active { transform: scale(.96); }
    .segmented svg { width: 14px; height: 14px; stroke: currentColor; }

    .main { min-width: 0; min-height: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; background: var(--bg); }
    .topbar {
      position: relative;
      justify-content: flex-start;
      gap: 16px;
      background: rgba(44,44,44,.86);
      backdrop-filter: blur(6px);
      z-index: 5;
    }
    body.light .topbar { background: rgba(255,255,255,.86); }
    .crumbs { min-width: 100px; max-width: 180px; flex: 0 1 180px; display: flex; align-items: center; gap: 8px; }
    .crumbs span { color: var(--muted); white-space: nowrap; }
    .crumbs strong { color: var(--text); font-weight: 400; }
    .crumbs svg { width: 14px; height: 14px; stroke: var(--subtle); }

    .search {
      position: relative;
      width: min(448px, 100%);
      max-width: 448px;
      height: 32px;
      flex: 1 1 280px;
      margin-left: auto;
      display: flex;
      align-items: center;
    }
    .search svg {
      position: absolute;
      left: 12px;
      width: 14px;
      height: 14px;
      stroke: var(--subtle);
      pointer-events: none;
      z-index: 1;
    }
    .search input {
      width: 100%;
      height: 100%;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--surface);
      outline: none;
      padding: 0 48px 0 34px;
      color: var(--text);
      font-size: 13px;
    }
    .search input:focus {
      border-color: rgb(var(--blue-rgb) / .58);
      box-shadow: 0 0 0 3px rgb(var(--blue-rgb) / .12);
    }
    .kbd {
      position: absolute;
      right: 8px;
      top: 6px;
      height: 20px;
      border: 1px solid var(--border);
      border-radius: 4px;
      background: var(--panel);
      color: var(--subtle);
      display: flex;
      align-items: center;
      gap: 2px;
      padding: 0 6px;
      font: 10px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    }
    .tools { min-width: 0; flex: 0 0 auto; margin-left: auto; display: flex; align-items: center; gap: 16px; }
    .account-button {
      min-width: 34px;
      max-width: 150px;
      height: 34px;
      padding: 0 10px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--surface);
      color: var(--text);
      display: flex;
      align-items: center;
      gap: 8px;
      transition: border-color .18s var(--ease), box-shadow .18s var(--ease), color .18s var(--ease);
    }
    .account-button:hover {
      border-color: rgb(var(--blue-rgb) / .5);
      color: var(--primary);
      box-shadow: 0 0 0 3px rgb(var(--blue-rgb) / .1);
    }
    .account-avatar {
      width: 20px;
      height: 20px;
      border-radius: 999px;
      display: grid;
      place-items: center;
      overflow: hidden;
      background: rgb(var(--blue-rgb) / .12);
      color: var(--primary);
      flex: 0 0 auto;
    }
    .account-avatar svg { width: 15px; height: 15px; stroke: currentColor; fill: none; }
    .account-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .account-label {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 13px;
    }
    .sync-indicator {
      height: 28px;
      max-width: 150px;
      padding: 0 10px;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: color-mix(in srgb, var(--surface) 78%, transparent);
      color: var(--muted);
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-size: 12px;
      white-space: nowrap;
      transition: border-color .18s var(--ease), color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease);
    }
    .sync-indicator:hover {
      color: var(--text);
      border-color: var(--border-strong);
      transform: translateY(-1px);
    }
    .sync-indicator span:last-child {
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .sync-dot {
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: var(--subtle);
      flex: 0 0 auto;
      box-shadow: 0 0 0 3px rgb(143 143 143 / .12);
    }
    .sync-indicator[data-sync-status="local"] .sync-dot { background: #8f8f8f; }
    .sync-indicator[data-sync-status="pending"] .sync-dot {
      background: #f5a524;
      box-shadow: 0 0 0 3px rgb(245 165 36 / .15);
    }
    .sync-indicator[data-sync-status="syncing"] .sync-dot {
      background: var(--blue);
      box-shadow: 0 0 0 3px rgb(var(--blue-rgb) / .15);
      animation: syncPulse 1s ease-in-out infinite;
    }
    .sync-indicator[data-sync-status="synced"] .sync-dot {
      background: #22a06b;
      box-shadow: 0 0 0 3px rgb(34 160 107 / .14);
    }
    .sync-indicator[data-sync-status="failed"] .sync-dot,
    .sync-indicator[data-sync-status="offline"] .sync-dot {
      background: #e5484d;
      box-shadow: 0 0 0 3px rgb(229 72 77 / .14);
    }
    @keyframes syncPulse {
      0%, 100% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.5); opacity: .55; }
    }
    .collab-stack {
      display: none;
      align-items: center;
      margin-left: -8px;
      min-width: 0;
    }
    .collab-stack.show { display: flex; }
    .collab-avatar {
      width: 28px;
      height: 28px;
      border-radius: 999px;
      overflow: hidden;
      display: grid;
      place-items: center;
      background: var(--surface);
      border: 2px solid var(--panel);
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
      box-shadow: 0 4px 12px rgba(0,0,0,.12);
      margin-left: -7px;
    }
    .collab-avatar:first-child { margin-left: 0; }
    .collab-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .modal.settings-modal {
      width: min(1120px, calc(100vw - 48px));
      height: min(820px, calc(100vh - 48px));
      max-height: calc(100vh - 48px);
      display: grid;
      grid-template-columns: 280px minmax(0, 1fr);
      padding: 0;
      overflow: hidden;
    }
    .settings-side {
      border-right: 1px solid var(--border);
      padding: 18px 12px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      background: color-mix(in srgb, var(--panel) 92%, var(--surface));
      min-width: 0;
    }
    .settings-close {
      width: 36px;
      height: 36px;
      margin: 0 0 14px;
      align-self: flex-start;
    }
    .settings-nav {
      display: grid;
      gap: 4px;
    }
    .settings-nav button {
      height: 48px;
      border-radius: var(--radius);
      padding: 0 14px;
      display: grid;
      grid-template-columns: 24px minmax(0, 1fr);
      align-items: center;
      column-gap: 14px;
      background: transparent;
      color: var(--muted);
      text-align: left;
      transition: background .18s var(--ease), color .18s var(--ease);
    }
    .settings-nav button span:last-child {
      min-width: 0;
      line-height: 24px;
    }
    .settings-nav-icon {
      width: 24px;
      height: 24px;
      display: grid;
      place-items: center;
    }
    .settings-nav button svg { width: 22px; height: 22px; display: block; stroke: currentColor; fill: none; }
    .settings-nav button.active {
      background: var(--surface);
      color: var(--text);
    }
    .settings-main {
      min-width: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      background: var(--panel);
    }
    .settings-body {
      flex: 1;
      overflow: auto;
      padding: 26px 32px 32px;
    }
    .settings-section { display: none; max-width: 760px; }
    .settings-section.active { display: grid; gap: 22px; }
    .settings-section h3 {
      margin: 0;
      font-size: 22px;
      font-weight: 650;
      letter-spacing: 0;
    }
    .settings-section .section-rule {
      height: 1px;
      background: var(--border);
      margin-top: -4px;
    }
    .settings-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 16px;
      align-items: center;
      min-height: 52px;
    }
    .settings-row-title {
      font-size: 15px;
      font-weight: 600;
      color: var(--text);
    }
    .settings-row-detail {
      margin-top: 4px;
      font-size: 12px;
      line-height: 1.45;
      color: var(--muted);
    }
    .settings-control {
      min-width: 220px;
    }
    .settings-control select,
    .settings-control input {
      width: 100%;
    }
    .sync-card,
    .storage-card {
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--surface);
      padding: 16px;
      display: grid;
      gap: 14px;
    }
    .sync-card-head {
      display: grid;
      grid-template-columns: 40px minmax(0, 1fr);
      gap: 12px;
      align-items: center;
    }
    .sync-avatar {
      width: 40px;
      height: 40px;
      border-radius: 999px;
      display: grid;
      place-items: center;
      overflow: hidden;
      background: rgb(var(--blue-rgb) / .14);
      color: var(--blue);
    }
    .sync-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .sync-avatar svg { width: 20px; height: 20px; stroke: currentColor; fill: none; }
    .sync-card strong { font-size: 15px; font-weight: 650; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .sync-card p { margin: 3px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
    .sync-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .sync-actions button { min-width: 0; }
    .storage-meter {
      display: grid;
      gap: 10px;
    }
    .storage-meter-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 16px;
    }
    .storage-usage {
      font-size: 22px;
      font-weight: 700;
      color: var(--text);
    }
    .storage-quota {
      font-size: 12px;
      color: var(--muted);
      white-space: nowrap;
    }
    .storage-track {
      height: 8px;
      border-radius: 999px;
      background: var(--surface-2);
      overflow: hidden;
      box-shadow: inset 0 0 0 1px rgb(255 255 255 / .04);
    }
    .storage-fill {
      height: 100%;
      width: 0%;
      border-radius: inherit;
      background: var(--blue);
      transition: width .22s var(--ease);
    }
    .storage-breakdown {
      display: grid;
      gap: 0;
      border-top: 1px solid var(--border);
      margin-top: 6px;
    }
    .storage-line {
      min-height: 58px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 16px;
      align-items: center;
      border-bottom: 1px solid var(--border);
    }
    .storage-line-title { font-size: 15px; color: var(--text); }
    .storage-line-detail { margin-top: 4px; font-size: 12px; color: var(--muted); }
    .storage-line-value { font-size: 13px; color: var(--muted); }
    .reopen-filters { display: none !important; }
    .app.filters-collapsed .reopen-filters { display: grid; }
    .view-toggle {
      height: 32px;
      width: auto;
      padding: 0;
      display: flex;
      gap: 2px;
      background: transparent;
      border: 0;
      border-radius: 0;
    }
    .view-toggle button { width: 32px; height: 32px; border-radius: 6px; background: transparent; color: var(--subtle); display: grid; place-items: center; }
    .view-toggle svg { width: 16px; height: 16px; stroke: currentColor; fill: none; }
    .view-toggle .material-icon { fill: currentColor; stroke: none; }
    .view-toggle button { transition: background .16s var(--ease), color .16s var(--ease), transform .16s var(--ease); }
    .view-toggle button:hover { background: var(--surface); color: var(--text); }
    .view-toggle button.active { background: var(--blue-soft); color: var(--blue); box-shadow: none; }
    .view-toggle button:active { transform: scale(.92); }
    .view-toggle button:focus-visible,
    .tool-button:focus-visible,
    .segmented button:focus-visible {
      outline: 2px solid rgb(var(--blue-rgb) / .48);
      outline-offset: 2px;
    }
    body.light .view-toggle {
      background: transparent;
      border-color: transparent;
      box-shadow: none;
    }
    body.light .view-toggle button.active {
      background: var(--blue-soft);
      box-shadow: none;
    }
    .divider { width: 1px; height: 16px; background: var(--border); }
    .mobile-add {
      display: none;
      width: 32px;
      height: 32px;
      border-radius: var(--radius);
      background: var(--blue);
      color: #fff;
      place-items: center;
      flex: 0 0 auto;
    }
    .mobile-add svg { width: 16px; height: 16px; stroke: currentColor; }
    .mobile-nav-toggle {
      display: none;
      width: 32px;
      height: 32px;
      border-radius: 6px;
      background: transparent;
      color: var(--text);
      place-items: center;
      flex: 0 0 auto;
    }
    .mobile-nav-toggle svg { width: 20px; height: 20px; stroke: currentColor; }
    .mobile-nav-toggle:active { background: var(--surface); }
    .mobile-nav-scrim { display: none; }

    .canvas-shell { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background: var(--bg); user-select: none; touch-action: none; }
    .canvas-shell.tool-hand { cursor: grab; }
    .canvas-shell.tool-hand.panning { cursor: grabbing; }
    .canvas-shell.tool-select { cursor: default; }
    .canvas-shell.tool-comment { cursor: crosshair; }
    .grid {
      position: absolute;
      inset: 0;
      background-image: radial-gradient(circle, rgba(64,64,64,.52) 1px, transparent 1px);
      background-size: 49px 49px;
      background-position: var(--gx, 0px) var(--gy, 0px);
      opacity: .28;
    }
    body.light .grid { opacity: .18; }
    .app.grid-hidden .grid { display: none; }
    .drop-hint {
      position: absolute;
      inset: 16px;
      border: 1px dashed rgb(var(--blue-rgb) / .7);
      border-radius: 8px;
      background: rgb(var(--blue-rgb) / .08);
      color: var(--blue);
      display: none;
      place-items: center;
      z-index: 7;
      pointer-events: none;
      font-size: 14px;
      user-select: none;
    }
    .canvas-shell.drag-over .drop-hint { display: grid; }
    .canvas {
      position: absolute;
      left: 0;
      top: 0;
      width: 200000px;
      height: 200000px;
      transform-origin: 0 0;
      will-change: transform;
    }
    .group-label-layer,
    .comment-layer {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }
    .group-label-layer {
      z-index: 67;
    }
    .comment-layer {
      z-index: 68;
    }
    .comment-pin {
      position: absolute;
      width: 28px;
      height: 28px;
      border-radius: 999px 999px 999px 5px;
      border: 2px solid #fff;
      background: var(--blue);
      color: #fff;
      display: grid;
      place-items: center;
      box-shadow: 0 8px 22px rgb(var(--blue-rgb) / .26), 0 2px 6px rgba(0,0,0,.22);
      transform: translate(-50%, -100%) rotate(-45deg);
      transform-origin: 50% 100%;
      z-index: 70;
      user-select: none;
      pointer-events: auto;
      transition: transform .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease);
      animation: commentFadeIn .14s var(--ease);
    }
    .comment-pin span {
      transform: rotate(45deg);
      font-size: 11px;
      font-weight: 700;
      line-height: 1;
    }
    .comment-pin:hover,
    .comment-pin.active {
      transform: translate(-50%, -100%) rotate(-45deg) scale(1.08);
      box-shadow: 0 12px 30px rgb(var(--blue-rgb) / .34), 0 3px 9px rgba(0,0,0,.28);
    }
    .comment-popover {
      position: absolute;
      width: 320px;
      min-height: 132px;
      padding: 12px;
      border: 1px solid var(--border-strong);
      border-radius: 12px;
      background: color-mix(in srgb, var(--panel) 92%, transparent);
      backdrop-filter: blur(22px);
      box-shadow: var(--shadow);
      z-index: 71;
      pointer-events: auto;
      animation: commentFadeIn .14s var(--ease);
    }
    .comment-popover.dragging {
      cursor: grabbing;
      user-select: none;
    }
    .comment-popover-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 8px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 600;
      cursor: grab;
    }
    .comment-popover-actions {
      display: flex;
      gap: 4px;
    }
    .comment-popover textarea {
      width: 100%;
      min-height: 72px;
      resize: vertical;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--surface);
      color: var(--text);
      outline: none;
      padding: 8px;
      line-height: 1.45;
      font-size: 13px;
    }
    .comment-popover textarea:focus {
      border-color: rgb(var(--blue-rgb) / .6);
      box-shadow: 0 0 0 3px rgb(var(--blue-rgb) / .12);
    }
    .comment-author,
    .comment-reply {
      display: grid;
      grid-template-columns: 28px minmax(0, 1fr);
      gap: 8px;
      align-items: start;
    }
    .comment-author {
      margin-bottom: 8px;
      color: var(--text);
      font-size: 13px;
      font-weight: 700;
    }
    .comment-avatar {
      width: 28px;
      height: 28px;
      border-radius: 999px;
      display: grid;
      place-items: center;
      overflow: hidden;
      background: color-mix(in srgb, var(--surface) 76%, var(--blue) 8%);
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
      border: 1px solid var(--border);
    }
    .comment-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .comment-thread {
      display: grid;
      gap: 8px;
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid var(--border);
    }
    .comment-reply-body {
      min-width: 0;
      padding: 8px 10px;
      border-radius: 10px;
      background: color-mix(in srgb, var(--surface) 86%, transparent);
      border: 1px solid var(--border);
    }
    .comment-reply-name {
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
      margin-bottom: 3px;
    }
    .comment-reply-text {
      color: var(--text);
      font-size: 12px;
      line-height: 1.42;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }
    .comment-reply-form {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 6px;
      margin-top: 10px;
    }
    .comment-reply-form input {
      min-width: 0;
      height: 32px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--surface);
      color: var(--text);
      outline: none;
      padding: 0 9px;
      font-size: 12px;
    }
    .comment-reply-form input:focus {
      border-color: rgb(var(--blue-rgb) / .6);
      box-shadow: 0 0 0 3px rgb(var(--blue-rgb) / .12);
    }
    .comment-reply-form button {
      height: 32px;
      border: 0;
      border-radius: 8px;
      padding: 0 11px;
      background: var(--blue);
      color: #fff;
      font-size: 12px;
      font-weight: 700;
    }
    .comment-meta {
      margin-top: 8px;
      color: var(--subtle);
      font-size: 11px;
    }
    .comments-panel {
      position: absolute;
      right: 16px;
      top: 16px;
      bottom: 88px;
      width: min(360px, calc(100vw - 96px));
      border: 1px solid var(--border);
      border-radius: 14px;
      background: color-mix(in srgb, var(--panel) 94%, transparent);
      backdrop-filter: blur(22px);
      box-shadow: var(--shadow);
      z-index: 69;
      display: none;
      grid-template-rows: auto minmax(0, 1fr);
      overflow: hidden;
      animation: floatIn .18s var(--ease);
    }
    .comments-panel.show { display: grid; }
    .comments-panel-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 14px 14px 12px;
      border-bottom: 1px solid var(--border);
    }
    .comments-panel-title {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
      color: var(--text);
      font-size: 14px;
      font-weight: 800;
    }
    .comments-panel-title svg {
      width: 17px;
      height: 17px;
      fill: currentColor;
    }
    .comments-panel-count {
      color: var(--subtle);
      font-size: 12px;
      font-weight: 600;
    }
    .comments-panel-list {
      overflow: auto;
      padding: 10px;
      display: grid;
      align-content: start;
      gap: 8px;
    }
    .comments-panel-empty {
      margin: 20px 8px;
      color: var(--subtle);
      font-size: 13px;
      line-height: 1.45;
      text-align: center;
    }
    .comment-summary {
      border: 1px solid var(--border);
      border-radius: 12px;
      background: color-mix(in srgb, var(--surface) 86%, transparent);
      padding: 10px;
      display: grid;
      grid-template-columns: 28px minmax(0, 1fr);
      gap: 9px;
      text-align: left;
      color: var(--text);
      transition: border-color .16s var(--ease), background .16s var(--ease), transform .16s var(--ease);
    }
    .comment-summary:hover,
    .comment-summary.active {
      border-color: rgb(var(--blue-rgb) / .55);
      background: rgb(var(--blue-rgb) / .08);
      transform: translateY(-1px);
    }
    .comment-summary-body { min-width: 0; }
    .comment-summary-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 4px;
    }
    .comment-summary-author {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 12px;
      font-weight: 800;
    }
    .comment-summary-index {
      color: var(--primary);
      font-size: 11px;
      font-weight: 800;
    }
    .comment-summary-text {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      overflow-wrap: anywhere;
    }
    .comment-summary-meta {
      margin-top: 6px;
      color: var(--subtle);
      font-size: 11px;
    }
    .app.table-mode .canvas,
    .app.table-mode .group-label-layer,
    .app.table-mode .comment-layer,
    .app.table-mode .grid,
    .app.table-mode .empty { display: none; }
    .app.table-mode .status,
    .app.table-mode .canvas-tools,
    .app.table-mode .selection-toolbar,
    .app.table-mode .selection-rect,
    .app.table-mode .transform-box,
    .app.table-mode .multi-select-box,
    .app.table-mode .comment-popover,
    .app.table-mode .comment-pin,
    .app.table-mode .comments-panel,
    .app.table-mode .snap-guide {
      display: none !important;
    }

    .table-view {
      display: none;
      position: absolute;
      inset: 0;
      overflow: auto;
      padding: 16px;
      background: var(--bg);
      z-index: 2;
      overscroll-behavior: contain;
      touch-action: pan-x pan-y;
    }
    .app.table-mode .table-view { display: block; }
    .bookmark-table {
      min-width: 100%;
      table-layout: fixed;
      border-collapse: separate;
      border-spacing: 0;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      overflow: hidden;
      box-shadow: var(--shadow);
    }
    .bookmark-table th,
    .bookmark-table td {
      height: 36px;
      padding: 0 10px;
      border-bottom: 1px solid var(--border);
      border-right: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
      text-align: left;
      font-size: 12px;
      color: var(--muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .bookmark-table th:last-child,
    .bookmark-table td:last-child { border-right: 0; }
    .bookmark-table th {
      position: relative;
      height: 34px;
      color: var(--subtle);
      font-size: 11px;
      font-weight: 500;
      background: color-mix(in srgb, var(--surface) 82%, var(--panel));
    }
    .bookmark-table tr:last-child td { border-bottom: 0; }
    .bookmark-table tbody tr {
      transition: background .16s var(--ease), transform .16s var(--ease);
    }
    .bookmark-table tbody tr[draggable="true"] {
      cursor: grab;
    }
    .bookmark-table tbody tr.dragging {
      opacity: .45;
      cursor: grabbing;
    }
    .bookmark-table tbody tr.drop-before,
    .bookmark-table tbody tr.drop-after {
      position: relative;
    }
    .bookmark-table tbody tr.drop-before::before,
    .bookmark-table tbody tr.drop-after::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      height: 2px;
      border-radius: 999px;
      background: var(--blue);
      box-shadow: 0 0 0 3px rgb(var(--blue-rgb) / .12);
      z-index: 3;
    }
    .bookmark-table tbody tr.drop-before::before { top: -1px; }
    .bookmark-table tbody tr.drop-after::after { bottom: -1px; }
    .bookmark-table tbody tr:hover {
      background: color-mix(in srgb, var(--surface) 72%, var(--blue-soft));
    }
    .bookmark-table tbody tr.selected {
      background: rgb(var(--blue-rgb) / .12);
    }
    .bookmark-table .title-cell {
      color: var(--text);
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }
    .bookmark-table .table-tags {
      display: flex;
      gap: 4px;
      flex-wrap: wrap;
    }
    .bookmark-table .editable-cell {
      cursor: text;
      color: var(--text);
    }
    .bookmark-table .url-cell {
      color: var(--muted);
      cursor: pointer;
    }
    .table-url-content {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 24px;
      align-items: center;
      gap: 6px;
      min-width: 0;
    }
    .table-url-text,
    .table-cell-text {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .table-url-edit {
      width: 22px;
      height: 22px;
      border-radius: 5px;
      display: grid;
      place-items: center;
      background: transparent;
      color: var(--subtle);
      opacity: 0;
      transform: translateX(4px);
      transition: opacity .14s var(--ease), transform .14s var(--ease), background .14s var(--ease), color .14s var(--ease);
    }
    .url-cell:hover .table-url-edit,
    .table-url-edit:focus-visible {
      opacity: 1;
      transform: translateX(0);
    }
    .table-url-edit:hover {
      background: var(--surface-2);
      color: var(--text);
    }
    .table-url-edit svg {
      width: 14px;
      height: 14px;
      fill: currentColor;
      stroke: none;
    }
    .bookmark-table .note-text {
      min-height: 18px;
      display: flex;
      align-items: center;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .table-cell-editor,
    .table-note-editor {
      width: 100%;
      border: 1px solid rgb(var(--blue-rgb) / .5);
      border-radius: 6px;
      background: var(--panel);
      color: var(--text);
      padding: 6px 8px;
      outline: none;
      line-height: 1.45;
    }
    .table-cell-editor {
      height: 28px;
    }
    .table-note-editor {
      min-height: 76px;
      resize: vertical;
      padding: 8px;
    }
    .column-resizer {
      position: absolute;
      top: 0;
      right: -4px;
      width: 8px;
      height: 100%;
      cursor: col-resize;
      z-index: 2;
      touch-action: none;
    }
    .column-resizer::after {
      content: "";
      position: absolute;
      top: 6px;
      bottom: 6px;
      left: 3px;
      width: 2px;
      border-radius: 999px;
      background: transparent;
      transition: background .14s var(--ease);
    }
    .column-resizer:hover::after,
    .column-resizer.dragging::after {
      background: rgb(var(--blue-rgb) / .7);
    }
    .empty {
      position: absolute;
      left: 50%;
      top: 44%;
      transform: translate(-50%, -50%);
      color: var(--subtle);
      display: none;
      text-align: center;
      font-size: 13px;
      width: min(400px, calc(100% - 48px));
      z-index: 6;
      pointer-events: none;
    }
    .empty-card {
      display: grid;
      justify-items: center;
      gap: 14px;
      pointer-events: auto;
    }
    .empty-card strong {
      color: color-mix(in srgb, var(--muted) 58%, var(--subtle));
      font-size: 14px;
      font-weight: 550;
      letter-spacing: -.01em;
    }
    .empty-card p {
      margin: 0;
      color: var(--subtle);
      line-height: 18px;
    }
    .empty-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: center;
    }
    .onboarding-card {
      width: 100%;
      padding: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
    }
    .empty-capture {
      width: 100%;
      height: 46px;
      padding: 4px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 38px;
      gap: 4px;
      border: 1px solid color-mix(in srgb, var(--border) 58%, transparent);
      border-radius: 12px;
      background: color-mix(in srgb, var(--panel) 72%, transparent);
      box-shadow: 0 8px 26px rgba(0,0,0,.08);
      transition: border-color .16s var(--ease), background .16s var(--ease), box-shadow .16s var(--ease);
    }
    .empty-capture:focus-within {
      border-color: rgb(var(--blue-rgb) / .36);
      background: color-mix(in srgb, var(--panel) 88%, transparent);
      box-shadow: 0 0 0 3px rgb(var(--blue-rgb) / .08), 0 10px 30px rgba(0,0,0,.1);
    }
    .empty-capture input {
      min-width: 0;
      border: 0;
      outline: 0;
      padding: 0 10px;
      color: var(--text);
      background: transparent;
      font-size: 13px;
    }
    .empty-capture input::placeholder { color: color-mix(in srgb, var(--subtle) 82%, transparent); }
    .empty-capture-submit {
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      border-radius: 9px;
      color: var(--muted);
      background: color-mix(in srgb, var(--surface-2) 82%, var(--blue) 18%);
      transition: background .16s var(--ease), transform .16s var(--ease);
    }
    .empty-capture-submit:hover {
      color: var(--text);
      background: color-mix(in srgb, var(--surface-2) 68%, var(--blue) 32%);
    }
    .empty-capture-submit:active { transform: scale(.96); }
    .empty-capture-submit svg { width: 17px; height: 17px; }
    .empty-secondary-action {
      min-height: 30px;
      padding: 0 10px;
      border-radius: 7px;
      color: var(--subtle);
      background: transparent;
      font-size: 12px;
      transition: color .16s var(--ease), background .16s var(--ease);
    }
    .empty-secondary-action:hover {
      color: var(--text);
      background: color-mix(in srgb, var(--surface) 62%, transparent);
    }

    .card {
      position: absolute;
      z-index: 1;
      width: 200px;
      height: auto;
      min-height: 0;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: calc(17px * var(--card-scale, 1));
      display: flex;
      flex-direction: column;
      gap: calc(12px * var(--card-scale, 1));
      user-select: none;
      touch-action: none;
      transition: border-color .16s var(--ease), box-shadow .16s var(--ease), transform .16s var(--ease), background .2s var(--ease);
      overflow: hidden;
    }
    .card.large,
    .card.banner {
      width: 340px;
      min-height: 0;
      padding: 0;
      gap: 0;
    }
    .card.large::before,
    .card.banner::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      height: 60%;
      border-bottom: 1px solid var(--border);
      background:
        var(--cover-image, linear-gradient(135deg, transparent, transparent)),
        linear-gradient(135deg, rgba(36,65,255,.55), transparent 55%),
        radial-gradient(circle at 80% 20%, rgba(255,255,255,.24), transparent 26%),
        var(--surface-2);
      background-size: cover;
      background-position: center;
      display: none;
    }
    .cover-media {
      display: none;
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      height: 148px;
      border-bottom: 1px solid var(--border);
      overflow: hidden;
      background:
        linear-gradient(135deg, rgba(36,65,255,.55), transparent 55%),
        radial-gradient(circle at 80% 20%, rgba(255,255,255,.24), transparent 26%),
        var(--surface-2);
      z-index: 0;
    }
    .card.large .cover-media,
    .card.banner .cover-media {
      display: block;
      position: relative;
      left: auto;
      top: auto;
      right: auto;
      width: 100%;
      height: 60%;
      flex: 0 0 60%;
    }
    .cover-media img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      object-position: center;
    }
    .card-head,
    .note,
    .tag-row {
      position: relative;
      z-index: 1;
    }
    .card.large .card-head,
    .card.banner .card-head {
      align-items: center;
      justify-content: flex-start;
      min-height: calc(64px * var(--card-scale, 1));
      gap: calc(8px * var(--card-scale, 1));
      padding: calc(18px * var(--card-scale, 1));
      flex: 1 1 auto;
    }
    .card.large .card-copy,
    .card.banner .card-copy {
      display: flex;
      min-width: 0;
      flex-direction: column-reverse;
      gap: calc(2px * var(--card-scale, 1));
    }
    .card.large .card-title,
    .card.banner .card-title {
      font-size: calc(17px * var(--card-scale, 1));
      line-height: calc(22px * var(--card-scale, 1));
      font-weight: 600;
    }
    .card.large .card-url,
    .card.banner .card-url {
      font-size: calc(12px * var(--card-scale, 1));
      line-height: calc(16px * var(--card-scale, 1));
      color: var(--subtle);
    }
    .card.large .favicon,
    .card.banner .favicon {
      width: calc(16px * var(--card-scale, 1));
      height: calc(16px * var(--card-scale, 1));
      border-radius: calc(4px * var(--card-scale, 1));
    }
    .card.large .favicon img,
    .card.banner .favicon img {
      width: calc(14px * var(--card-scale, 1));
      height: calc(14px * var(--card-scale, 1));
    }
    .card.large .note,
    .card.large .tag-row,
    .card.banner .note,
    .card.banner .tag-row {
      display: none;
    }
    .card.small {
      width: 590px;
      min-height: 0;
      border-radius: var(--radius);
      padding: calc(29px * var(--card-scale, 1)) calc(35px * var(--card-scale, 1)) calc(24px * var(--card-scale, 1)) calc(210px * var(--card-scale, 1));
      gap: calc(11px * var(--card-scale, 1));
      justify-content: center;
      background: #fff;
      box-shadow: 0 2px 4px rgba(0,0,0,.08), 0 16px 34px rgba(0,0,0,.14);
    }
    .card.small .cover-media {
      display: block;
      left: 0;
      top: 0;
      bottom: 0;
      right: auto;
      width: calc(175px * var(--card-scale, 1));
      height: 100%;
      border-right: 1px solid var(--border);
      border-bottom: 0;
      border-radius: var(--radius) 0 0 var(--radius);
    }
    .card.small .card-head {
      min-height: 0;
      gap: 0;
    }
    .card.small .favicon,
    .card.small .card-url,
    .card.small .tag-row {
      display: none;
    }
    .card.small .card-copy {
      min-width: 0;
    }
    .card.small .card-title {
      max-width: 100%;
      color: #2b2b2b;
      font-size: calc(22px * var(--card-scale, 1));
      line-height: calc(27px * var(--card-scale, 1));
      font-weight: 500;
    }
    .card.small .note {
      display: block;
      max-width: 100%;
      color: #858585;
      font-size: calc(17px * var(--card-scale, 1));
      line-height: calc(21px * var(--card-scale, 1));
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .card-link-row {
      display: none;
      align-items: center;
      gap: calc(10px * var(--card-scale, 1));
      color: #858585;
      font-size: calc(17px * var(--card-scale, 1));
      line-height: calc(21px * var(--card-scale, 1));
      min-width: 0;
    }
    .card-link-row svg {
      width: calc(19px * var(--card-scale, 1));
      height: calc(19px * var(--card-scale, 1));
      flex: 0 0 auto;
      stroke: currentColor;
    }
    .card-link-row span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-decoration: underline;
      text-underline-offset: calc(3px * var(--card-scale, 1));
    }
    .card.small .card-link-row {
      display: flex;
    }
    .card.small:hover .card-link-row {
      color: var(--blue);
    }
    .card.image {
      width: 220px;
      min-height: 0;
      justify-content: flex-end;
      padding: calc(14px * var(--card-scale, 1));
      background:
        linear-gradient(180deg, transparent 0%, rgba(0,0,0,.72) 100%),
        var(--cover-image, linear-gradient(135deg, transparent, transparent)),
        radial-gradient(circle at 20% 20%, rgba(36,65,255,.55), transparent 32%),
        radial-gradient(circle at 82% 24%, rgba(255,255,255,.2), transparent 24%),
        #1d1d1d;
      background-size: cover;
      background-position: center;
    }
    .card.image::before {
      content: "";
      position: absolute;
      inset: 0;
      border: 0;
      border-radius: inherit;
      background: rgba(12,12,12,.5);
      backdrop-filter: blur(16px) saturate(1.25);
      -webkit-backdrop-filter: blur(16px) saturate(1.25);
      opacity: 0;
      transform: none;
      transition: opacity .18s var(--ease), transform .18s var(--ease);
      pointer-events: none;
      z-index: 1;
    }
    .card.image:hover::before {
      opacity: 1;
      transform: none;
    }
    .card.image .cover-media {
      display: block;
      inset: 0;
      width: auto;
      height: auto;
      border: 0;
    }
    .card.image .card-head,
    .card.image .note,
    .card.image .tag-row {
      opacity: 0;
      transform: translateY(calc(8px * var(--card-scale, 1)));
      transition: opacity .18s var(--ease), transform .18s var(--ease);
      z-index: 2;
    }
    .card.image:hover .card-head,
    .card.image:hover .note,
    .card.image:hover .tag-row {
      opacity: 1;
      transform: translateY(0);
    }
    .card.image:hover .card-title { color: #fff; }
    .card.image:hover .card-url,
    .card.image:hover .note { color: rgba(255,255,255,.78); }
    .card.image:hover .tag {
      color: rgba(255,255,255,.86);
      border-color: rgba(255,255,255,.22);
      background: rgba(255,255,255,.12);
    }
    .card.text {
      width: 300px;
      min-height: 0;
      padding: calc(10px * var(--card-scale, 1)) calc(14px * var(--card-scale, 1));
      border: 1px solid color-mix(in srgb, var(--text) 18%, transparent);
      border-radius: var(--radius);
      background: color-mix(in srgb, var(--panel) 82%, var(--surface));
      box-shadow: 0 1px 2px rgba(0,0,0,.08);
      justify-content: center;
    }
    .card.text .favicon,
    .card.text .card-url,
    .card.text .note,
    .card.text .tag-row { display: none; }
    .card.text .card-head { min-height: 0; }
    .card.text .card-copy { min-width: 0; }
    .card.text .card-title {
      color: var(--text);
      font-size: calc(20px * var(--card-scale, 1));
      line-height: calc(25px * var(--card-scale, 1));
      font-weight: 450;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .card.text.text-block {
      align-items: stretch;
      justify-content: center;
      min-width: 118px;
      min-height: 0;
    }
    .card.text-block .text-block-content {
      width: 100%;
      color: var(--text);
      font-size: calc(20px * var(--card-scale, 1));
      line-height: calc(25px * var(--card-scale, 1));
      font-weight: 450;
      white-space: pre-wrap;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-word;
    }
    .card.text-block .inline-rename {
      width: 100%;
      min-width: 0;
      border: 0;
      outline: 0;
      background: transparent;
      color: var(--text);
      font: inherit;
    }
    .card.text-block .text-block-editor {
      display: block;
      width: 100%;
      height: 100%;
      min-width: 0;
      min-height: calc(25px * var(--card-scale, 1));
      margin: 0;
      padding: 0;
      border: 0;
      border-radius: 0;
      outline: 0;
      background: transparent;
      color: var(--text);
      caret-color: var(--blue);
      font-family: inherit;
      font-size: calc(20px * var(--card-scale, 1));
      line-height: calc(25px * var(--card-scale, 1));
      font-weight: 450;
      letter-spacing: inherit;
      resize: none;
      overflow: auto;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
      user-select: text;
      touch-action: auto;
      box-shadow: none;
    }
    .card.text-block .text-block-editor:focus { box-shadow: none; }
    .card.text-block .text-block-editor::placeholder {
      color: color-mix(in srgb, var(--muted) 72%, transparent);
    }
    .card.text-block .text-block-editor::selection {
      color: inherit;
      background: rgb(var(--blue-rgb) / .18);
    }
    .tool-text .canvas-stage {
      cursor: text;
    }
    .card.icon {
      width: 118px;
      min-height: 0;
      padding: calc(12px * var(--card-scale, 1)) calc(10px * var(--card-scale, 1)) calc(10px * var(--card-scale, 1));
      align-items: center;
      justify-content: center;
      gap: calc(6px * var(--card-scale, 1));
      border-radius: var(--radius);
      border-color: rgba(0,0,0,.18);
      background:
        linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.3)),
        var(--surface-2);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 10px 24px rgba(0,0,0,.12);
    }
    .card.icon .favicon {
      width: calc(42px * var(--card-scale, 1));
      height: calc(42px * var(--card-scale, 1));
      border: 0;
      border-radius: 0;
      background: transparent;
    }
    .card.icon .favicon img { width: calc(32px * var(--card-scale, 1)); height: calc(32px * var(--card-scale, 1)); }
    .card.icon .card-head {
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: calc(7px * var(--card-scale, 1));
      min-height: 0;
    }
    .card.icon .card-title {
      max-width: calc(96px * var(--card-scale, 1));
      color: #202020;
      font-size: calc(11px * var(--card-scale, 1));
      line-height: calc(14px * var(--card-scale, 1));
      font-weight: 500;
    }
    .card.icon .card-url,
    .card.icon .note,
    .card.icon .tag-row { display: none; }
    .card.notes { width: 260px; min-height: 164px; }
    .card.notes .note {
      white-space: normal;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }
    .card.minimal {
      min-height: 88px;
      gap: 8px;
    }
    .card.minimal .note,
    .card.minimal .tag-row,
    .card.no-tags .tag-row { display: none; }
    .card.stack {
      width: 224px;
      min-height: 152px;
      transform: rotate(-1deg);
    }
    .card.stack::after {
      content: "";
      position: absolute;
      inset: 8px -8px -8px 8px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: color-mix(in srgb, var(--surface) 72%, transparent);
      z-index: -1;
    }
    .card:hover {
      border-color: var(--border-strong);
      transform: translateY(-1px);
      box-shadow: 0 2px 4px rgba(0,0,0,.28), 0 16px 38px rgba(0,0,0,.24);
    }
    .card:active { transform: scale(.992); }
    .card.loading::after {
      content: "";
      position: absolute;
      right: calc(10px * var(--card-scale, 1));
      top: calc(10px * var(--card-scale, 1));
      width: calc(8px * var(--card-scale, 1));
      height: calc(8px * var(--card-scale, 1));
      border-radius: 999px;
      background: var(--blue);
      box-shadow: 0 0 0 calc(4px * var(--card-scale, 1)) rgb(var(--blue-rgb) / .14);
      animation: pulse .9s var(--ease) infinite alternate;
    }
    @keyframes pulse { from { opacity: .45; transform: scale(.86); } to { opacity: 1; transform: scale(1); } }
    .card.selected {
      border-color: rgb(var(--blue-rgb) / .54);
      box-shadow: 0 0 0 1px rgb(var(--blue-rgb) / .12), 0 8px 24px rgba(0,0,0,.2);
    }
    .card.selected:hover,
    .card.selected:active { transform: none; }
    .card.text-block.editing,
    .card.text-block.editing:hover,
    .card.text-block.editing:active {
      z-index: 12;
      cursor: text;
      user-select: text;
      touch-action: auto;
      transform: none;
      border-color: rgb(var(--blue-rgb) / .42);
      background: color-mix(in srgb, var(--panel) 88%, var(--surface));
      box-shadow: 0 0 0 3px rgb(var(--blue-rgb) / .08), 0 10px 28px rgba(0,0,0,.16);
    }
    .card.dragging { z-index: 4; border: 1px solid rgb(var(--blue-rgb) / .72); transform: scale(1.006); box-shadow: 0 0 0 1px rgb(var(--blue-rgb) / .26), 0 1px 2px rgba(0,0,0,.5), 0 18px 42px rgba(0,0,0,.3); }
    .group-frame {
      position: absolute;
      z-index: 0;
      border: 1px solid rgb(var(--blue-rgb) / .24);
      border-radius: calc(var(--radius) + 4px);
      background: rgb(var(--blue-rgb) / .045);
      cursor: grab;
      pointer-events: auto;
    }
    .group-frame.selected {
      border-color: rgb(var(--blue-rgb) / .72);
      background: rgb(var(--blue-rgb) / .1);
      box-shadow: 0 0 0 1px rgb(var(--blue-rgb) / .18), 0 18px 50px rgb(var(--blue-rgb) / .14);
    }
    .group-frame:hover {
      border-color: rgb(var(--blue-rgb) / .42);
      background: rgb(var(--blue-rgb) / .07);
    }
    .group-frame.dragging {
      cursor: grabbing;
      border-color: rgb(var(--blue-rgb) / .7);
      background: rgb(var(--blue-rgb) / .1);
    }
    .group-label {
      position: absolute;
      transform: translate(0, -100%);
      height: 20px;
      padding: 0 8px;
      border: 1px solid rgb(var(--blue-rgb) / .2);
      border-radius: 5px;
      background: color-mix(in srgb, var(--panel) 88%, transparent);
      color: var(--blue);
      font-size: 11px;
      line-height: 19px;
      box-shadow: 0 8px 22px rgba(0,0,0,.12);
      backdrop-filter: blur(8px);
      pointer-events: auto;
      cursor: grab;
      white-space: nowrap;
      font: inherit;
      appearance: none;
    }
    .group-label.selected {
      border-color: rgb(var(--blue-rgb) / .5);
      background: color-mix(in srgb, var(--panel) 94%, rgb(var(--blue-rgb) / .14));
    }
    .group-resize-handle {
      position: absolute;
      width: 13px;
      height: 13px;
      border: 2px solid var(--blue);
      border-radius: 4px;
      background: var(--panel);
      box-shadow: 0 2px 8px rgb(var(--blue-rgb) / .22);
      opacity: 0;
      pointer-events: auto;
      transition: opacity .14s var(--ease), transform .14s var(--ease);
    }
    .group-frame:hover .group-resize-handle,
    .group-frame.selected .group-resize-handle {
      opacity: 1;
    }
    .group-resize-handle:hover {
      transform: scale(1.08);
    }
    .group-resize-handle.nw { left: -7px; top: -7px; cursor: nwse-resize; }
    .group-resize-handle.ne { right: -7px; top: -7px; cursor: nesw-resize; }
    .group-resize-handle.sw { left: -7px; bottom: -7px; cursor: nesw-resize; }
    .group-resize-handle.se { right: -7px; bottom: -7px; cursor: nwse-resize; }
    .group-rename {
      position: absolute;
      width: 170px;
      height: 28px;
      z-index: 68;
      pointer-events: auto;
    }
    body.light .card {
      background: #fff;
      border-color: #d7d7d0;
    }
    body.light .card.selected {
      border-color: rgb(var(--blue-rgb) / .5);
      box-shadow: 0 0 0 1px rgb(var(--blue-rgb) / .1), 0 8px 24px rgba(0,0,0,.07);
    }
    body.light .card.text-block.editing {
      border-color: rgb(var(--blue-rgb) / .38);
      box-shadow: 0 0 0 3px rgb(var(--blue-rgb) / .07), 0 10px 26px rgba(0,0,0,.07);
    }
    body.light .card.dragging {
      border: 1px solid rgb(var(--blue-rgb) / .72);
      box-shadow: 0 0 0 1px rgb(var(--blue-rgb) / .24), 0 1px 2px rgba(0,0,0,.08), 0 16px 34px rgba(0,0,0,.08);
    }
    .card-head { display: flex; gap: calc(8px * var(--card-scale, 1)); min-height: calc(36px * var(--card-scale, 1)); }
    .card-copy { min-width: 0; }
    .favicon {
      width: calc(16px * var(--card-scale, 1));
      height: calc(16px * var(--card-scale, 1));
      border-radius: calc(4px * var(--card-scale, 1));
      border: 1px solid var(--border);
      background: var(--panel);
      flex: 0 0 auto;
      display: grid;
      place-items: center;
      overflow: hidden;
    }
    .favicon img { width: calc(14px * var(--card-scale, 1)); height: calc(14px * var(--card-scale, 1)); display: block; }
    .favicon .fallback { width: calc(7px * var(--card-scale, 1)); height: calc(7px * var(--card-scale, 1)); border-radius: calc(2px * var(--card-scale, 1)); background: #202020; }
    .card-title { color: var(--text); font-size: calc(14px * var(--card-scale, 1)); line-height: calc(18px * var(--card-scale, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .card-url { color: var(--subtle); font-size: calc(11px * var(--card-scale, 1)); line-height: calc(16px * var(--card-scale, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: calc(1px * var(--card-scale, 1)); }
    .note { color: var(--muted); font-size: calc(11px * var(--card-scale, 1)); line-height: calc(16px * var(--card-scale, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .tag-row { display: flex; flex-wrap: wrap; gap: calc(6px * var(--card-scale, 1)); margin-top: auto; }
    .tag {
      height: calc(21px * var(--card-scale, 1));
      padding: calc(3px * var(--card-scale, 1)) calc(7px * var(--card-scale, 1));
      border-radius: calc(4px * var(--card-scale, 1));
      border: 1px solid var(--border);
      background: var(--panel);
      color: var(--muted);
      font-size: calc(10px * var(--card-scale, 1));
      line-height: calc(13px * var(--card-scale, 1));
    }

    .context-menu {
      position: fixed;
      min-width: 206px;
      padding: 6px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--panel);
      box-shadow: 0 18px 50px rgba(0,0,0,.38);
      display: none;
      z-index: 30;
    }
    .context-menu.open { display: grid; animation: popIn .14s var(--ease); }
    .context-menu button,
    .context-menu .menu-item {
      height: 36px;
      border-radius: 6px;
      background: transparent;
      color: var(--muted);
      text-align: left;
      padding: 0 10px;
      display: flex;
      align-items: center;
      gap: 10px;
      position: relative;
      font-size: 14px;
      line-height: 1;
    }
    .context-menu .menu-label { flex: 1 1 auto; min-width: 0; }
    .context-menu .menu-shortcut { color: var(--subtle); font-size: 12px; }
    .context-menu svg { width: 16px; height: 16px; stroke: currentColor; flex: 0 0 auto; }
    .context-menu button:hover,
    .context-menu .menu-item:hover,
    .context-menu .menu-item.submenu-open {
      background: var(--surface);
      color: var(--text);
    }
    .menu-separator { height: 1px; background: var(--border); margin: 5px 4px; }
    .submenu {
      position: absolute;
      left: calc(100% + 8px);
      top: -6px;
      min-width: 210px;
      padding: 6px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--panel);
      box-shadow: 0 18px 50px rgba(0,0,0,.38);
      display: none;
      max-height: calc(100vh - 16px);
      overflow: auto;
    }
    .menu-item.submenu-open .submenu { display: grid; }

    .cover-preview {
      height: 92px;
      border: 1px solid var(--border);
      border-radius: 6px;
      position: relative;
      overflow: hidden;
      background:
        linear-gradient(135deg, rgba(36,65,255,.25), transparent),
        var(--surface);
      background-size: cover;
      background-position: center;
    }
    .cover-preview.cover-uploading::after {
      content: "Uploading image...";
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      background: color-mix(in srgb, var(--panel) 78%, transparent);
      color: var(--muted);
      font-size: 12px;
      backdrop-filter: blur(4px);
    }
    .modal.share-modal {
      width: min(420px, calc(100vw - 32px));
      max-height: calc(100dvh - 32px);
      border: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
      border-radius: 12px;
      overflow: hidden;
      padding: 0;
      display: flex;
      flex-direction: column;
      color: var(--text);
      background: var(--panel);
      box-shadow: 0 22px 64px rgba(0,0,0,.38);
    }
    .share-modal .modal-head {
      width: 100%;
      min-height: 50px;
      height: 50px;
      flex: 0 0 auto;
      padding: 0 12px 0 16px;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      border-bottom: 0;
      box-sizing: border-box;
    }
    .share-modal .modal-title {
      min-width: 0;
      overflow: hidden;
      color: var(--text);
      font-size: 14px;
      font-weight: 600;
      line-height: 20px;
      letter-spacing: 0;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .share-modal .icon-button {
      width: 28px;
      height: 28px;
      min-width: 28px;
      border: 0;
      border-radius: 6px;
      padding: 6px;
      color: var(--subtle);
      background: transparent;
      box-shadow: none;
    }
    .share-modal .icon-button:hover {
      color: var(--text);
      background: var(--surface);
    }
    .share-modal .icon-button svg {
      width: 16px;
      height: 16px;
      fill: currentColor;
    }
    .share-modal-body {
      min-height: 0;
      padding: 8px 12px 12px;
      overflow-y: auto;
      display: grid;
      gap: 0;
      box-sizing: border-box;
    }
    .share-link-row {
      min-width: 0;
      min-height: 52px;
      padding: 6px 4px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
    }
    .share-link-row > .share-leading-icon {
      display: none;
    }
    .share-leading-icon {
      width: 28px;
      height: 28px;
      flex: 0 0 28px;
      border-radius: 6px;
      display: grid;
      place-items: center;
      color: var(--subtle);
      background: transparent;
      transition: color .16s var(--ease), background .16s var(--ease);
    }
    .share-leading-icon svg,
    .share-action-icon svg,
    .share-icon-action svg,
    .share-access-pill svg,
    .share-invite-icon svg,
    .share-permission-option svg {
      width: 15px;
      height: 15px;
      fill: currentColor;
    }
    .share-link-copy {
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 7px;
      flex-wrap: wrap;
    }
    .share-link-copy strong {
      color: var(--text);
      font-size: 13px;
      font-weight: 580;
      line-height: 20px;
    }
    .share-access-pill {
      height: 24px;
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 0 7px 0 6px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      color: var(--subtle);
      background: color-mix(in srgb, var(--surface) 68%, transparent);
      font-size: 11px;
      font-weight: 520;
      line-height: 1;
      white-space: nowrap;
    }
    .share-access-pill svg { width: 13px; height: 13px; }
    .share-link-actions {
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .share-primary,
    .share-invite-submit {
      min-height: 32px;
      border: 0;
      border-radius: var(--radius);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 0 11px;
      color: #fff;
      background: var(--blue);
      box-shadow: none;
      font: inherit;
      font-size: 12px;
      font-weight: 580;
      cursor: pointer;
      transition: color .16s var(--ease), background .16s var(--ease), transform .16s var(--ease);
    }
    .share-primary { min-width: 88px; }
    .share-primary:hover,
    .share-invite-submit:hover { background: var(--blue-hover); }
    .share-primary:active,
    .share-invite-submit:active { transform: scale(.96); }
    .share-primary:disabled,
    .share-invite-submit:disabled {
      opacity: .68;
      cursor: wait;
      transform: none;
    }
    .share-primary.is-success,
    .share-primary.is-success:hover {
      color: #58c588;
      background: color-mix(in srgb, #2d9d61 18%, var(--surface));
    }
    .share-primary.is-loading .share-action-icon,
    .share-invite-submit.is-loading .share-invite-icon { display: none; }
    .share-primary.is-loading::before,
    .share-invite-submit.is-loading::before {
      content: "";
      width: 13px;
      height: 13px;
      border: 2px solid rgba(255,255,255,.38);
      border-top-color: #fff;
      border-radius: 50%;
      animation: share-spin .7s linear infinite;
    }
    @keyframes share-spin { to { transform: rotate(360deg); } }
    .share-icon-action {
      width: 32px;
      height: 32px;
      flex: 0 0 32px;
      border: 0;
      border-radius: var(--radius);
      padding: 0;
      display: grid;
      place-items: center;
      color: var(--subtle);
      background: transparent;
      cursor: pointer;
      transition: color .16s var(--ease), background .16s var(--ease), transform .16s var(--ease);
    }
    .share-icon-action:hover {
      color: var(--text);
      background: var(--surface);
    }
    .share-icon-action:active { transform: scale(.92); }
    .share-icon-action[hidden] { display: none; }
    .share-advanced {
      border: 0;
      border-top: 1px solid var(--border);
      border-radius: 0;
      overflow: visible;
      background: transparent;
    }
    .share-advanced summary {
      min-height: 48px;
      padding: 6px 4px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      list-style: none;
      cursor: pointer;
      box-sizing: border-box;
    }
    .share-advanced summary::-webkit-details-marker { display: none; }
    .share-advanced summary:hover .share-leading-icon {
      color: var(--text);
      background: var(--surface);
    }
    .share-advanced-copy {
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .share-advanced-copy strong {
      color: var(--muted);
      font-size: 13px;
      font-weight: 540;
      line-height: 20px;
    }
    .share-advanced-chevron {
      flex: 0 0 auto;
      color: var(--subtle);
      transition: transform .18s var(--ease);
    }
    .share-advanced[open] .share-advanced-chevron { transform: rotate(90deg); }
    .share-invite-form {
      padding: 2px 4px 10px 38px;
      display: grid;
      gap: 7px;
      background: transparent;
    }
    .share-invite-line {
      min-width: 0;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 34px;
      gap: 6px;
    }
    .share-modal #shareEmailField {
      width: 100%;
      height: 34px;
      min-height: 34px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 0 10px;
      color: var(--text);
      background: var(--surface);
      box-shadow: none;
      font-size: 12px;
      box-sizing: border-box;
    }
    .share-modal #shareEmailField::placeholder { color: var(--subtle); }
    .share-modal #shareEmailField:focus {
      border-color: rgb(var(--blue-rgb) / .7);
      outline: 2px solid rgb(var(--blue-rgb) / .2);
      outline-offset: 0;
    }
    .share-invite-submit {
      width: 34px;
      height: 34px;
      min-height: 34px;
      padding: 0;
    }
    .share-invite-submit.is-success,
    .share-invite-submit.is-success:hover {
      color: #58c588;
      background: color-mix(in srgb, #2d9d61 18%, var(--surface));
    }
    .share-permission-picker {
      min-width: 0;
      margin: 0;
      border: 0;
      padding: 0;
      display: flex;
      align-items: center;
      gap: 2px;
    }
    .share-permission-option {
      height: 30px;
      min-height: 30px;
      border: 0;
      border-radius: 6px;
      padding: 0 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      color: var(--subtle);
      background: transparent;
      font: inherit;
      font-size: 11px;
      font-weight: 520;
      line-height: 1;
      white-space: nowrap;
      cursor: pointer;
      transition: color .16s var(--ease), background .16s var(--ease), transform .16s var(--ease);
    }
    .share-permission-option > [data-icon] {
      width: 14px;
      height: 14px;
      flex: 0 0 14px;
      display: grid;
      place-items: center;
      line-height: 0;
    }
    .share-permission-option svg {
      width: 14px;
      height: 14px;
      display: block;
      fill: currentColor;
    }
    .share-permission-label {
      display: block;
      line-height: 14px;
    }
    .share-permission-option:hover {
      color: var(--text);
      background: var(--surface);
    }
    .share-permission-option.active {
      color: var(--blue);
      background: var(--blue-soft);
    }
    .share-permission-option:active { transform: scale(.94); }
    .share-permission-option:disabled {
      opacity: .55;
      cursor: wait;
      transform: none;
    }
    .share-member-list {
      margin: 2px 4px 10px 38px;
      display: grid;
      gap: 2px;
    }
    .share-member-list[hidden] { display: none; }
    .share-member-row {
      min-width: 0;
      min-height: 36px;
      padding: 3px 2px;
      display: grid;
      grid-template-columns: 26px minmax(0, 1fr) auto 28px;
      align-items: center;
      gap: 7px;
      border-radius: 6px;
    }
    .share-member-row:hover { background: color-mix(in srgb, var(--surface) 68%, transparent); }
    .share-member-avatar {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      overflow: hidden;
      color: var(--muted);
      background: var(--surface-2);
      font-size: 9px;
      font-weight: 620;
    }
    .share-member-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .share-member-email {
      min-width: 0;
      overflow: hidden;
      color: var(--text);
      font-size: 11px;
      line-height: 16px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .share-member-permission {
      height: 24px;
      padding: 0 6px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      color: var(--subtle);
      font-size: 10px;
      line-height: 1;
      white-space: nowrap;
    }
    .share-member-permission svg,
    .share-member-copy svg { width: 13px; height: 13px; display: block; fill: currentColor; }
    .share-member-copy {
      width: 28px;
      height: 28px;
      padding: 0;
      border-radius: 6px;
      display: grid;
      place-items: center;
      color: var(--subtle);
      background: transparent;
    }
    .share-member-copy:hover { color: var(--text); background: var(--surface); }
    .share-member-copy.is-success { color: #58c588; }
    .share-member-loading {
      min-height: 32px;
      display: flex;
      align-items: center;
      color: var(--subtle);
      font-size: 11px;
    }
    .share-modal .share-help {
      margin: 0;
      color: #ff8a8a;
      font-size: 11px;
      line-height: 16px;
    }
    .share-modal .share-help:not(.is-visible) {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      padding: 0 !important;
      margin: -1px !important;
      overflow: hidden !important;
      clip: rect(0, 0, 0, 0) !important;
      white-space: nowrap !important;
      border: 0 !important;
    }
    .share-modal .share-help.is-visible {
      margin: 6px 4px 0;
      border: 1px solid color-mix(in srgb, #d95c5c 42%, var(--border));
      border-radius: 6px;
      padding: 7px 9px;
      background: color-mix(in srgb, #d95c5c 12%, var(--surface));
    }
    .share-modal button:focus-visible,
    .share-modal summary:focus-visible {
      outline: 2px solid rgb(var(--blue-rgb) / .48);
      outline-offset: 2px;
    }
    @media (prefers-reduced-motion: reduce) {
      .share-modal *,
      .share-modal *::before,
      .share-modal *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
      }
    }
    @media (max-width: 520px) {
      .modal.share-modal {
        width: calc(100vw - 16px);
        max-height: calc(100dvh - 16px);
        border-radius: 12px;
      }
      .share-modal .modal-head { padding-inline: 12px; }
      .share-modal-body { padding: 8px 10px 10px; }
      .share-primary { min-width: 84px; padding-inline: 9px; }
      .share-invite-form { padding-left: 4px; padding-right: 4px; }
    }

    .snap-guide {
      position: absolute;
      background: var(--blue);
      opacity: 0;
      pointer-events: none;
      z-index: 3;
    }
    .snap-guide.x { width: 1px; height: 100%; top: 0; }
    .snap-guide.y { height: 1px; width: 100%; left: 0; }
    .snap-guide.show { opacity: .75; }

    .status {
      position: absolute;
      left: 16px;
      bottom: 14px;
      color: var(--subtle);
      font-size: 11px;
      display: flex;
      align-items: center;
      gap: 10px;
      pointer-events: none;
    }
    .status span { padding: 4px 7px; background: rgba(44,44,44,.82); border: 1px solid var(--border); border-radius: 4px; }
    body.light .status span {
      background: #3f3f3f;
      border-color: #5a5a5a;
      color: #a8a8a8;
      box-shadow: 0 2px 8px rgba(0,0,0,.14);
    }

    .selection-rect {
      position: absolute;
      border: 1px solid var(--blue);
      background: rgb(var(--blue-rgb) / .12);
      display: none;
      pointer-events: none;
      z-index: 8;
    }
    .selection-rect.show { display: block; }

    .transform-box {
      position: absolute;
      display: none;
      border: 1.5px solid rgb(var(--blue-rgb) / .78);
      border-radius: calc(var(--radius) + 1px);
      pointer-events: none;
      z-index: 11;
      box-shadow: 0 0 0 1px rgb(var(--blue-rgb) / .08);
      transition: border-color .14s var(--ease), box-shadow .14s var(--ease);
    }
    .transform-box.show { display: block; }
    .transform-box.is-editing {
      border-color: rgb(var(--blue-rgb) / .36);
      box-shadow: none;
    }
    .multi-select-box {
      position: absolute;
      display: none;
      border: 2px solid var(--blue);
      border-radius: 10px;
      background: rgb(var(--blue-rgb) / .08);
      pointer-events: none;
      z-index: 10;
      box-shadow: 0 0 0 1px rgba(255,255,255,.16);
    }
    .multi-select-box.show { display: block; }
    .multi-select-badge {
      position: absolute;
      left: 50%;
      top: -42px;
      transform: translateX(-50%);
      min-width: 72px;
      height: 28px;
      padding: 0 10px;
      border-radius: 7px;
      background: var(--blue);
      color: #fff;
      font-size: 13px;
      line-height: 28px;
      text-align: center;
      white-space: nowrap;
      box-shadow: 0 8px 24px rgba(0,0,0,.22);
    }
    .resize-handle {
      position: absolute;
      width: 10px;
      height: 10px;
      border: 1.5px solid rgb(var(--blue-rgb) / .88);
      background: color-mix(in srgb, var(--panel) 94%, #fff);
      border-radius: 3px;
      pointer-events: auto;
      touch-action: none;
      box-shadow: 0 1px 4px rgba(0,0,0,.2);
      transition: transform .12s var(--ease), background .12s var(--ease), box-shadow .12s var(--ease);
    }
    .resize-handle::after {
      content: "";
      position: absolute;
      inset: -7px;
    }
    .resize-handle:hover {
      transform: scale(1.16);
      background: #fff;
      box-shadow: 0 2px 7px rgb(var(--blue-rgb) / .24);
    }
    .resize-handle:active {
      transform: scale(1.04);
      background: color-mix(in srgb, #fff 78%, var(--blue));
    }
    .resize-handle.nw { left: -6px; top: -6px; cursor: nwse-resize; }
    .resize-handle.ne { right: -6px; top: -6px; cursor: nesw-resize; }
    .resize-handle.sw { left: -6px; bottom: -6px; cursor: nesw-resize; }
    .resize-handle.se { right: -6px; bottom: -6px; cursor: nwse-resize; }
    .transform-box.is-editing .resize-handle {
      opacity: 0;
      pointer-events: none;
    }
    .resize-size {
      position: absolute;
      left: 50%;
      bottom: -34px;
      transform: translate(-50%, 4px);
      padding: 3px 7px;
      border: 1px solid rgb(var(--blue-rgb) / .2);
      border-radius: 5px;
      background: color-mix(in srgb, var(--panel) 88%, var(--blue) 12%);
      color: color-mix(in srgb, var(--text) 82%, var(--blue));
      font-size: 11px;
      line-height: 16px;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
      box-shadow: 0 5px 14px rgba(0,0,0,.12);
      opacity: 0;
      pointer-events: none;
      transition: opacity .12s var(--ease), transform .12s var(--ease);
    }
    .transform-box.is-resizing .resize-size {
      opacity: 1;
      transform: translate(-50%, 0);
    }
    body.text-editing .selection-toolbar { display: none !important; }

    .canvas-tools {
      position: absolute;
      left: 50%;
      right: auto;
      bottom: 14px;
      transform: translateX(-50%);
      display: flex;
      gap: 3px;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      z-index: 9;
      backdrop-filter: none;
      transition: transform .2s var(--ease);
    }
body.inspector-open .canvas-tools,
body.comment-panel-open .canvas-tools {
      left: 50%;
      right: auto;
      transform: translateX(-50%);
    }
    body.light .canvas-tools {
      background: transparent;
      box-shadow: none;
    }
    .tool-button {
      width: 34px;
      height: 34px;
      border-radius: 7px;
      background: transparent;
      color: var(--subtle);
      display: grid;
      place-items: center;
      transition: background .16s var(--ease), color .16s var(--ease), transform .16s var(--ease);
    }
    .tool-button svg { width: 16px; height: 16px; stroke: currentColor; fill: none; }
    .tool-button .material-icon { fill: currentColor; stroke: none; }
    .tool-button:hover:not(:disabled) {
      background: color-mix(in srgb, var(--surface) 84%, transparent);
      color: var(--text);
    }
    .tool-button.active {
      background: var(--blue-soft);
      color: var(--blue);
      box-shadow: none;
    }
    .tool-button:disabled { opacity: .35; cursor: default; }
    .tool-button:active { transform: scale(.92); }

    .selection-toolbar {
      position: absolute;
      left: 50%;
      top: 16px;
      transform: translate(-50%, -8px);
      display: none;
      align-items: center;
      gap: 4px;
      padding: 4px;
      border: 0;
      border-radius: 8px;
      background: color-mix(in srgb, var(--panel) 78%, transparent);
      box-shadow: 0 6px 22px rgba(0,0,0,.16);
      z-index: 12;
      opacity: 0;
      pointer-events: none;
      transition: opacity .16s var(--ease), transform .16s var(--ease);
      backdrop-filter: blur(10px);
      max-width: calc(100vw - 32px);
      min-width: 0;
    }
    .selection-toolbar.show {
      display: flex;
      opacity: 1;
      pointer-events: auto;
      transform: translate(-50%, 0);
    }
    body.light .selection-toolbar {
      background: rgba(255,255,255,.78);
      box-shadow: 0 5px 18px rgba(0,0,0,.08);
    }
    .selection-count {
      color: var(--subtle);
      font-size: 11px;
      padding: 0 8px;
      white-space: nowrap;
    }
    .selection-toolbar .divider { margin: 0 3px; }
    .selection-link {
      width: clamp(150px, 24vw, 280px);
      max-width: min(280px, 28vw);
      min-width: 120px;
      height: 30px;
      border: 0;
      border-radius: 6px;
      background: color-mix(in srgb, var(--surface) 78%, transparent);
      color: var(--text);
      padding: 0 10px;
      outline: none;
      font-size: 12px;
      line-height: 30px;
      display: none;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      transition: box-shadow .16s var(--ease), background .16s var(--ease);
    }
    .selection-link.show { display: block; }
    .selection-link[readonly] {
      cursor: text;
      color: var(--muted);
    }
    .selection-link:not([readonly]),
    .selection-link:focus {
      box-shadow: inset 0 0 0 1px rgb(var(--blue-rgb) / .56), 0 0 0 3px rgb(var(--blue-rgb) / .12);
      width: clamp(220px, 36vw, 420px);
      max-width: min(420px, 46vw);
      color: var(--text);
    }

    .inspector {
      position: fixed;
      left: 14px;
      top: 62px;
      width: 318px;
      max-height: min(680px, calc(100vh - 28px));
      border: 1px solid var(--border);
      border-radius: 8px;
      background: color-mix(in srgb, var(--panel) 92%, transparent);
      box-shadow: 0 22px 70px rgba(0,0,0,.46);
      z-index: 18;
      display: flex;
      flex-direction: column;
      transform: translateY(8px) scale(.98);
      opacity: 0;
      pointer-events: none;
      transition: transform .2s var(--ease), opacity .2s var(--ease);
      backdrop-filter: blur(14px);
    }
    .inspector.open {
      transform: translateY(0) scale(1);
      opacity: 1;
      pointer-events: auto;
    }
    body.light .inspector {
      background: rgba(255,255,255,.92);
      box-shadow: 0 18px 52px rgba(0,0,0,.18);
    }
    .inspector-head {
      min-height: 52px;
      border-bottom: 1px solid var(--border);
      padding: 0 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }
    .inspector-title {
      min-width: 0;
      color: var(--text);
      font-size: 13px;
      font-weight: 600;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .inspector-body {
      padding: 14px;
      display: grid;
      gap: 12px;
      overflow: auto;
    }
    .inspector-actions {
      margin-top: auto;
      border-top: 1px solid var(--border);
      padding: 12px 14px;
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      flex-wrap: wrap;
    }
    .inspector-actions button { flex: 1 1 92px; min-width: 0; }

    .modal-layer {
      position: fixed;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      background: rgba(0,0,0,.55);
      z-index: 20;
    }
    .modal-layer.open { display: flex; animation: fadeIn .14s var(--ease); }
    .modal {
      width: min(460px, calc(100vw - 32px));
      max-height: calc(100vh - 28px);
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 8px;
      box-shadow: 0 24px 80px rgba(0,0,0,.55);
      animation: popIn .18s var(--ease);
      display: flex;
      flex-direction: column;
    }
    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    @keyframes popIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
    @keyframes floatIn { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
    @keyframes commentPinIn {
      from { opacity: 0; transform: translate(-50%, -92%) rotate(-45deg) scale(.82); }
      to { opacity: 1; transform: translate(-50%, -100%) rotate(-45deg) scale(1); }
    }
    @keyframes commentFadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .001ms !important;
      }
    }
    .modal-head {
      height: 52px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 16px;
    }
    .modal-title { font-size: 14px; color: var(--text); }
    .visually-hidden {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      padding: 0 !important;
      margin: -1px !important;
      overflow: hidden !important;
      clip: rect(0, 0, 0, 0) !important;
      white-space: nowrap !important;
      border: 0 !important;
    }
    .add-bookmark-modal {
      width: min(420px, calc(100vw - 32px));
      border-color: color-mix(in srgb, var(--border) 74%, transparent);
      border-radius: 12px;
      box-shadow: 0 22px 64px rgba(0,0,0,.38);
    }
    .add-bookmark-modal .modal-head {
      height: 50px;
      border-bottom: 0;
    }
    .add-bookmark-modal .form {
      padding-top: 6px;
      gap: 10px;
    }
    .add-bookmark-modal .quick-url-field input {
      height: 44px;
      padding: 0 12px;
      border-color: color-mix(in srgb, var(--border) 72%, transparent);
      border-radius: 10px;
      background: color-mix(in srgb, var(--surface) 74%, var(--panel));
      font-size: 14px;
    }
    .bookmark-details-toggle {
      justify-self: start;
      min-height: 28px;
      margin-left: -8px;
      padding: 0 8px;
      border-radius: 7px;
      color: var(--subtle);
      background: transparent;
      font-size: 12px;
      transition: color .16s var(--ease), background .16s var(--ease);
    }
    .bookmark-details-toggle:hover {
      color: var(--muted);
      background: color-mix(in srgb, var(--surface) 58%, transparent);
    }
    .bookmark-details {
      display: grid;
      gap: 12px;
      padding-top: 2px;
    }
    .bookmark-details[hidden] { display: none; }
    .form { padding: 16px; display: grid; gap: 12px; overflow: auto; }
    .field { display: grid; gap: 7px; }
    .field label { color: var(--subtle); font-size: 11px; }
    .field input, .field textarea, .field select {
      width: 100%;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text);
      border-radius: var(--radius);
      outline: none;
      padding: 9px 10px;
      font-size: 13px;
    }
    .field textarea { resize: vertical; min-height: 72px; max-height: 160px; }
    .toggle-row {
      min-height: 38px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--surface);
      padding: 0 10px 0 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }
    .toggle-row span {
      color: var(--muted);
      font-size: 12px;
      line-height: 16px;
    }
    .switch-control {
      position: relative;
      width: 38px;
      height: 22px;
      flex: 0 0 auto;
      cursor: pointer;
    }
    .switch-control input {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      border: 0;
      background: transparent;
      opacity: 0;
      cursor: pointer;
    }
    .switch-track {
      position: absolute;
      inset: 0;
      border-radius: 999px;
      background: var(--surface-2);
      border: 1px solid var(--border-strong);
      transition: background .18s var(--ease), border-color .18s var(--ease);
    }
    .switch-thumb {
      position: absolute;
      left: 3px;
      top: 3px;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: var(--muted);
      transition: transform .18s var(--ease), background .18s var(--ease);
    }
    .switch-control input:checked + .switch-track {
      background: var(--blue);
      border-color: var(--blue);
    }
    .switch-control input:checked + .switch-track .switch-thumb {
      transform: translateX(16px);
      background: #fff;
    }
    .switch-control input:focus-visible + .switch-track {
      box-shadow: 0 0 0 3px rgb(var(--blue-rgb) / .14);
    }
    .field input:focus,
    .field textarea:focus,
    .field select:focus {
      border-color: rgb(var(--blue-rgb) / .58);
      box-shadow: 0 0 0 3px rgb(var(--blue-rgb) / .12);
    }
    .inline-actions { display: flex; gap: 8px; flex-wrap: wrap; }
    .modal-actions {
      padding: 0 16px 16px;
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      flex-wrap: wrap;
      flex: 0 0 auto;
    }
    .secondary {
      height: 34px;
      border-radius: var(--radius);
      background: var(--surface);
      border: 1px solid var(--border);
      color: var(--muted);
      padding: 0 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }
    .secondary:hover {
      color: var(--blue);
      border-color: rgb(var(--blue-rgb) / .42);
      background: var(--blue-soft);
    }
    .secondary:disabled {
      cursor: wait;
      opacity: .72;
    }
    .metadata-refresh { min-width: 122px; }
    .metadata-refresh.is-loading .material-icon,
    .metadata-refresh.is-loading svg {
      animation: metadataRefreshSpin .72s linear infinite;
    }
    @keyframes metadataRefreshSpin { to { transform: rotate(360deg); } }

    .app-toast {
      position: fixed;
      left: 50%;
      bottom: 72px;
      z-index: 60;
      max-width: min(360px, calc(100vw - 32px));
      padding: 9px 12px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: color-mix(in srgb, var(--panel) 94%, transparent);
      color: var(--muted);
      box-shadow: 0 10px 32px rgba(0,0,0,.2);
      opacity: 0;
      pointer-events: none;
      transform: translate(-50%, 8px);
      transition: opacity .16s var(--ease), transform .16s var(--ease);
      backdrop-filter: blur(12px);
    }
    .app-toast.show { opacity: 1; transform: translate(-50%, 0); }
    .app-toast[data-tone="success"] { border-color: rgb(var(--blue-rgb) / .22); }
    .app-toast[data-tone="error"] { color: var(--text); }
    .submit {
      height: 34px;
      min-width: 88px;
      border-radius: var(--radius);
      background: var(--blue);
      color: #fff;
      padding: 0 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: background .16s var(--ease), transform .16s var(--ease), box-shadow .16s var(--ease);
    }
    .submit:hover { background: var(--blue-hover); box-shadow: 0 8px 22px rgb(var(--blue-rgb) / .2); }
    .submit:active { transform: scale(.985); }

    body.auth-pending .app,
    body.auth-signed-out .app {
      display: none;
    }
    .auth-empty {
      min-height: 100vh;
      display: none;
      position: relative;
      background: #080c14;
      color: #f6f7fb;
    }
    .auth-empty::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background: url("landing/canvas-texture.png") repeat;
      background-size: 512px 512px;
      opacity: .34;
    }
    body.auth-pending .auth-empty,
    body.auth-signed-out .auth-empty {
      display: block;
    }
    body.auth-pending,
    body.auth-signed-out {
      overflow-x: hidden;
      overflow-y: auto;
      background: #080c14;
    }

    .landing-page {
      width: 100%;
      height: 100vh;
      height: 100dvh;
      overflow: hidden;
      position: relative;
      z-index: 1;
      font-family: "Inter", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
      background: rgb(6 10 17 / .16);
    }

    .guest-canvas-topbar {
      height: 64px;
      border-bottom: 1px solid #27303e;
      padding: 0 24px;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      position: relative;
      z-index: 30;
      background: rgb(8 12 20 / .9);
      backdrop-filter: blur(18px);
    }
    .guest-canvas-brand {
      width: max-content;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: #f7f8fb;
      text-decoration: none;
      font-size: 17px;
      font-weight: 680;
      letter-spacing: -.025em;
    }
    .guest-canvas-brand .catmark-logo { width: 24px; height: 39px; }
    .guest-canvas-brand:hover .catmark-logo-body { animation: catmarkLogoBody 2s linear 1; }
    .guest-canvas-brand:hover .catmark-logo-eye-left { animation: catmarkLogoLeftEye 2s linear 1; }
    .guest-canvas-brand:hover .catmark-logo-eye-right { animation: catmarkLogoRightEye 2s linear 1; }
    .guest-canvas-name {
      min-width: 118px;
      height: 34px;
      border: 1px solid #303949;
      border-radius: 8px;
      padding: 0 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #cdd2dc;
      background: #101722;
      font-size: 13px;
    }
    .guest-canvas-actions {
      justify-self: end;
      display: flex;
      align-items: center;
      gap: 14px;
    }
    .guest-canvas-hint {
      color: #6f7889;
      font-size: 12px;
    }
    .guest-canvas-actions button {
      height: 32px;
      border: 1px solid #303949;
      border-radius: 7px;
      padding: 0 12px;
      color: #aeb5c2;
      background: #101722;
      font-size: 11px;
      transition: color .16s var(--ease), border-color .16s var(--ease), background .16s var(--ease);
    }
    .guest-canvas-actions button:hover {
      border-color: #526078;
      color: #fff;
      background: #17202d;
    }

    .guest-canvas-viewport {
      position: absolute;
      inset: 64px 0 0;
      overflow: hidden;
      cursor: grab;
      touch-action: none;
      user-select: none;
    }
    .guest-canvas-viewport.is-panning { cursor: grabbing; }
    .guest-canvas-world {
      width: 1440px;
      height: 920px;
      position: absolute;
      top: 0;
      left: 50%;
      margin-left: -720px;
      transform: translate3d(var(--guest-canvas-x, 0px), var(--guest-canvas-y, 0px), 0);
      will-change: transform;
    }
    .guest-canvas-item {
      position: absolute;
      cursor: grab;
      touch-action: none;
    }
    .guest-canvas-item.is-dragging {
      z-index: 60 !important;
      cursor: grabbing;
      transition: none !important;
    }
    .guest-canvas-item.is-selected {
      outline: 1px solid #3150ff;
      outline-offset: 6px;
    }
    .guest-canvas-item:focus-visible {
      outline: 2px solid #7f90ff;
      outline-offset: 6px;
    }
    .guest-card.is-filtered-out {
      opacity: .18;
      filter: grayscale(1);
    }

    .guest-intro {
      left: 84px;
      top: 86px;
      width: 500px;
      user-select: text;
    }
    .guest-intro h1 {
      margin: 0;
      color: #f7f8fb;
      font-size: 56px;
      font-weight: 720;
      line-height: 1.16;
      letter-spacing: -.052em;
    }
    .guest-intro h1 span { color: #3150ff; }
    .guest-intro > p {
      max-width: 410px;
      margin: 24px 0 0;
      color: #aab1bf;
      font-size: 15px;
      line-height: 1.85;
    }

    .guest-card,
    .guest-folder {
      border: 1px solid #343d4c;
      border-radius: 9px;
      background: #101722;
      box-shadow: 0 20px 48px rgb(0 0 0 / .3);
      overflow: hidden;
      transition: transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
    }
    .guest-card {
      width: 218px;
      cursor: default;
    }
    .guest-card:hover,
    .guest-folder:hover {
      z-index: 12;
      border-color: #58647a;
      box-shadow: 0 28px 68px rgb(0 0 0 / .45);
      transform: translateY(-5px) rotate(0deg);
    }
    .guest-card > img {
      width: 100%;
      aspect-ratio: 1.52;
      display: block;
      object-fit: cover;
      background: #151c27;
      pointer-events: none;
    }
    .guest-card-copy { padding: 13px 14px 14px; }
    .guest-card h2 {
      margin: 0;
      color: #f1f3f7;
      font-size: 14px;
      font-weight: 600;
      line-height: 1.45;
    }
    .guest-card-copy > p {
      min-height: 34px;
      margin: 6px 0 12px;
      color: #8a93a4;
      font-size: 11px;
      line-height: 1.55;
    }
    .guest-card-copy > div {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }
    .guest-card-copy > div span {
      min-width: 0;
      overflow: hidden;
      color: #6f788a;
      font-size: 10px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .guest-card-copy > div strong {
      flex: 0 0 auto;
      border-radius: 4px;
      padding: 4px 6px;
      color: #6f83ff;
      background: #17234e;
      font-size: 9px;
      font-weight: 560;
    }

    .guest-card-architecture { left: 668px; top: 54px; transform: rotate(-1.2deg); }
    .guest-card-lamp { left: 1004px; top: 24px; transform: rotate(.8deg); }
    .guest-card-interior { left: 770px; top: 390px; transform: rotate(.5deg); }
    .guest-card-record { left: 1094px; top: 348px; transform: rotate(-.7deg); }

    .guest-folder {
      left: 506px;
      top: 354px;
      width: 172px;
      padding: 26px 20px 22px;
      display: grid;
      gap: 7px;
    }
    .guest-folder img {
      width: 52px;
      height: 52px;
      margin-bottom: 12px;
      filter: invert(42%) sepia(17%) saturate(500%) hue-rotate(181deg) brightness(88%);
      pointer-events: none;
    }
    .guest-folder strong {
      color: #e8ebf2;
      font-size: 14px;
      font-weight: 580;
    }
    .guest-folder span {
      color: #727b8c;
      font-size: 12px;
    }
    .guest-folder.is-open {
      border-color: #3150ff;
      background: #13204a;
    }

    .guest-tag {
      height: 38px;
      border: 1px solid #343d4c;
      border-radius: 8px;
      padding: 0 13px;
      display: inline-flex;
      align-items: center;
      background: #0d141f;
      color: #aeb5c3;
      font-size: 11px;
    }
    .guest-tag > span { display: none; }
    .guest-tag.is-active {
      border-color: #3150ff;
      color: #fff;
      background: #17234e;
    }
    .guest-tag-material { left: 526px; top: 180px; }
    .guest-tag-space { left: 686px; top: 692px; }

    .guest-benefit {
      width: 270px;
      padding-top: 14px;
      border-top: 1px solid #3a4352;
      user-select: text;
    }
    .guest-benefit > p {
      margin: 0 0 15px;
      color: #5268ff;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .12em;
    }
    .guest-benefit h2 {
      margin: 0 0 10px;
      color: #e7eaf0;
      font-size: 15px;
      font-weight: 620;
    }
    .guest-benefit > span {
      display: block;
      color: #7f8899;
      font-size: 12px;
      line-height: 1.65;
    }
    .guest-benefit-visual { left: 108px; top: 610px; }
    .guest-benefit-organize { left: 414px; top: 696px; }
    .guest-benefit-control { left: 740px; top: 738px; }

    .guest-auth-dock {
      position: fixed;
      left: 28px;
      bottom: 26px;
      z-index: 40;
      display: grid;
      gap: 8px;
    }
    .guest-auth-actions { display: flex; align-items: center; gap: 8px; }
    .guest-auth-button {
      min-width: 238px;
      height: 52px;
      border: 1px solid #3150ff;
      border-radius: 9px;
      padding: 0 20px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 11px;
      color: #fff;
      background: #2441ff;
      font-size: 14px;
      font-weight: 620;
      box-shadow: 0 14px 38px rgb(36 65 255 / .24);
      transition: transform .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
    }
    .guest-auth-button img {
      width: 24px;
      height: 24px;
      padding: 4px;
      border-radius: 50%;
      background: #fff;
    }
    .guest-auth-button:hover {
      background: #3150ff;
      transform: translateY(-2px);
      box-shadow: 0 18px 46px rgb(36 65 255 / .34);
    }
    .guest-auth-button:active { transform: translateY(0); }
    .guest-auth-button:disabled { opacity: .58; cursor: wait; }
    .guest-auth-retry {
      height: 52px;
      padding: 0 16px;
      border: 1px solid #384357;
      border-radius: 9px;
      color: #d7dce7;
      background: rgb(18 25 38 / .9);
    }
    .guest-auth-retry:hover { border-color: #61708a; background: #161f30; }
    .landing-auth-status {
      width: 270px;
      min-height: 16px;
      margin: 0;
      color: #758093;
      font-size: 11px;
      line-height: 1.45;
    }
    .guest-canvas-status {
      position: fixed;
      right: 22px;
      bottom: 22px;
      z-index: 32;
      height: 32px;
      border: 1px solid #303949;
      border-radius: 8px;
      padding: 0 12px;
      display: inline-flex;
      align-items: center;
      color: #758092;
      background: rgb(12 18 28 / .84);
      font-size: 11px;
      pointer-events: none;
    }

    @media (max-width: 900px) {
      .guest-canvas-hint { display: none; }
      .guest-canvas-topbar { grid-template-columns: 1fr auto; }
      .guest-canvas-name { display: none; }
      .guest-canvas-actions { justify-self: end; }
      .guest-canvas-world {
        left: 0;
        margin-left: 0;
      }
    }

    @media (max-width: 620px) {
      .guest-canvas-topbar {
        height: 60px;
        padding: 0 16px;
      }
      .guest-canvas-brand { font-size: 16px; }
      .guest-canvas-brand .catmark-logo { width: 22px; height: 36px; }
      .guest-canvas-name {
        min-width: 86px;
        height: 32px;
        padding-inline: 10px;
        font-size: 11px;
      }
      .guest-canvas-viewport { inset: 60px 0 0; }
      .guest-canvas-world {
        width: 900px;
        height: 1180px;
      }
      .guest-intro {
        left: 20px;
        top: 54px;
        width: 350px;
      }
      .guest-intro h1 { font-size: 42px; line-height: 1.17; }
      .guest-intro > p {
        max-width: 340px;
        margin-top: 20px;
        font-size: 13px;
      }
      .guest-card { width: 204px; }
      .guest-card-architecture { left: 26px; top: 356px; }
      .guest-card-lamp { left: 260px; top: 330px; }
      .guest-folder { left: 28px; top: 680px; width: 168px; }
      .guest-card-interior { left: 230px; top: 674px; }
      .guest-card-record { left: 480px; top: 610px; }
      .guest-tag-material { left: 20px; top: 314px; }
      .guest-tag-space { left: 448px; top: 932px; }
      .guest-benefit-visual { left: 24px; top: 965px; }
      .guest-benefit-organize { left: 322px; top: 980px; }
      .guest-benefit-control { left: 620px; top: 952px; }
      .guest-auth-dock {
        left: 16px;
        bottom: 16px;
      }
      .guest-auth-button {
        min-width: 224px;
        height: 48px;
      }
      .guest-canvas-status {
        display: none;
      }
    }

    svg.material-icon,
    .material-icon path {
      fill: currentColor !important;
      stroke: none !important;
    }

    @media (max-width: 980px) {
      .app { grid-template-columns: 216px minmax(0, 1fr); }
      .filters { display: none; }
      .search { width: min(360px, 100%); max-width: 360px; }
    }

    @media (max-width: 700px) {
      .app,
      .app.filters-collapsed { grid-template-columns: 1fr; }
      .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        width: min(320px, 84vw);
        height: 100dvh;
        display: flex;
        z-index: 40;
        transform: translateX(-102%);
        box-shadow: 18px 0 38px rgba(0,0,0,.36);
        transition: transform .22s var(--ease);
      }
      .app.mobile-nav-open .sidebar { transform: translateX(0); }
      .mobile-nav-scrim {
        position: fixed;
        inset: 0;
        display: block;
        z-index: 35;
        opacity: 0;
        pointer-events: none;
        background: rgba(0,0,0,.48);
        transition: opacity .2s var(--ease);
      }
      .app.mobile-nav-open .mobile-nav-scrim { opacity: 1; pointer-events: auto; }
      .topbar { height: 52px; padding: 0 12px; gap: 10px; }
      .mobile-nav-toggle { display: grid; }
      .crumbs { min-width: 0; max-width: 64px; overflow: hidden; }
      .crumbs strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .search { position: static; transform: none; flex: 1 1 0; min-width: 0; width: auto; margin: 0; }
      .search input { padding-right: 34px; font-size: 16px; }
      .search .kbd { display: none; }
      .tools { gap: 8px; flex: 0 0 auto; }
      .tools .account-button { width: 34px; padding: 0; justify-content: center; }
      .tools .account-label { display: none; }
      .sync-indicator { display: none; }
      .view-toggle, .divider, .tools > .icon-button:not(#sharePage) { display: none; }
      .tools > #sharePage { display: grid; width: 32px; height: 32px; min-width: 32px; }
      .mobile-add { display: grid !important; position: static; flex: 0 0 32px; width: 32px; height: 32px; z-index: 30; }
      .canvas-tools,
      body.inspector-open .canvas-tools {
        position: fixed;
        left: 50%;
        right: auto;
        bottom: calc(12px + env(safe-area-inset-bottom));
        transform: translateX(-50%);
      }
      .status { left: 12px; bottom: calc(70px + env(safe-area-inset-bottom)); }
      .app-toast { bottom: calc(82px + env(safe-area-inset-bottom)); }
      .inspector { left: 10px !important; right: 10px; width: auto; top: 62px !important; bottom: 10px; max-height: none; }
      .selection-toolbar { left: 10px; right: 10px; max-width: none; overflow-x: auto; }
      .selection-toolbar .selection-link { display: none !important; }
      .onboarding-card { padding: 0; }
      .empty { width: min(360px, calc(100% - 32px)); }
      body.empty-workspace #openAddTop { display: none !important; }
      .empty-actions { width: 100%; }
      .empty-actions button { flex: 1 1 100%; }
    }