/* Font viết tay Patrick Hand (self-host, có subset tiếng Việt) — dùng cho công cụ Văn bản */
  @font-face {
    font-family: 'Patrick Hand';
    font-style: normal; font-weight: 400; font-display: swap;
    src: url('../fonts/patrick-hand-vietnamese.woff2') format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
  }
  @font-face {
    font-family: 'Patrick Hand';
    font-style: normal; font-weight: 400; font-display: swap;
    src: url('../fonts/patrick-hand-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face {
    font-family: 'Patrick Hand';
    font-style: normal; font-weight: 400; font-display: swap;
    src: url('../fonts/patrick-hand-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

  :root {
    --bg: #f5f5f7;
    --panel: rgba(255,255,255,.78);
    --panel-solid: #ffffff;
    --border: rgba(0,0,0,.08);
    --text: #1d1d1f;
    --muted: #86868b;
    --accent: #0071e3;
    --accent-tint: rgba(0,113,227,.12);
    --danger: #ff3b30;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
    --shadow-md: 0 4px 16px rgba(0,0,0,.10);
    --shadow-lg: 0 12px 40px rgba(0,0,0,.18);
    --blur: saturate(180%) blur(20px);
    /* vùng an toàn (notch / home indicator iPad) */
    --safe-b: env(safe-area-inset-bottom, 0px);
    --safe-t: env(safe-area-inset-top, 0px);
    --safe-l: env(safe-area-inset-left, 0px);
    --safe-r: env(safe-area-inset-right, 0px);
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #1c1c1e;
      --panel: rgba(34,34,36,.78);
      --panel-solid: #2c2c2e;
      --border: rgba(255,255,255,.10);
      --text: #f5f5f7;
      --muted: #98989d;
      --accent: #0a84ff;
      --accent-tint: rgba(10,132,255,.18);
      --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
      --shadow-md: 0 4px 16px rgba(0,0,0,.4);
      --shadow-lg: 0 12px 40px rgba(0,0,0,.55);
    }
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { height: 100%; overflow: hidden; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    touch-action: none;
    -webkit-font-smoothing: antialiased;
    font-size: 14px;
  }
  button { font-family: inherit; cursor: pointer; color: inherit; }
  svg { display: block; }
  .icon { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

  /* khối kính mờ dùng chung cho mọi cụm điều khiển nổi */
  .glass {
    background: var(--panel);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
  }

  #app { height: 100vh; height: 100dvh; position: relative; }

  /* ============ Danh sách vở: popup giữa màn hình (kiểu Google Drive) ============ */
  #sidebar-backdrop {
    position: fixed; inset: 0; z-index: 47;
    background: rgba(0,0,0,.28);
    opacity: 0; pointer-events: none; transition: opacity .25s;
  }
  #sidebar-backdrop.show { opacity: 1; pointer-events: auto; }
  #sidebar {
    position: fixed; left: 50%; top: 50%; z-index: 48;
    width: min(720px, 92vw);
    max-height: min(72vh, 640px);
    background: var(--panel-solid);
    border: 1px solid var(--border);
    border-radius: 22px;
    box-shadow: var(--shadow-lg);
    display: flex; flex-direction: column;
    transform: translate(-50%, -50%) scale(.94);
    opacity: 0; pointer-events: none;
    transition: transform .28s cubic-bezier(.32,.72,0,1), opacity .22s;
  }
  #sidebar.open { transform: translate(-50%, -50%); opacity: 1; pointer-events: auto; }
  #sidebar header {
    padding: 20px 20px 8px;
    display: flex; align-items: center; justify-content: space-between;
  }
  #sidebar header h1 { font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
  #btn-sidebar-close {
    background: none; border: none; color: var(--muted);
    width: 32px; height: 32px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s;
  }
  #btn-sidebar-close:hover { background: rgba(125,125,135,.12); color: var(--text); }
  /* tabs Của tôi / Được chia sẻ */
  #nb-tabs { display: flex; gap: 4px; padding: 4px 20px 10px; border-bottom: 1px solid var(--border); }
  .nb-tab {
    background: none; border: none; padding: 8px 14px; border-radius: 980px;
    font-size: 13.5px; font-weight: 590; color: var(--muted);
    transition: background .15s, color .15s;
  }
  .nb-tab:hover { background: rgba(125,125,135,.10); }
  .nb-tab.active { background: var(--accent-tint); color: var(--accent); }
  #btn-new-notebook {
    background: none; border: none; color: var(--accent);
    width: 32px; height: 32px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
  }
  #btn-new-notebook:hover { background: var(--accent-tint); }
  #notebook-list { flex: 1; overflow-y: auto; padding: 10px 14px 18px; }
  .nb-item {
    display: flex; align-items: center; gap: 13px;
    padding: 10px 12px; border-radius: 12px; cursor: pointer;
    margin-bottom: 2px;
    transition: background .15s;
  }
  .nb-item:hover { background: rgba(125,125,135,.10); }
  .nb-item.active { background: var(--accent-tint); }
  /* icon vở hiện đại: bìa bo góc + gáy + dòng kẻ */
  .nb-book { width: 34px; height: 42px; flex-shrink: 0; filter: drop-shadow(0 2px 3px rgba(0,0,0,.18)); }
  /* badge vị trí lưu: 💻 trên máy · ☁️ trên cloud (kèm trạng thái sync) */
  .nb-loc { display: inline-flex; gap: 5px; align-items: center; margin-left: 7px; vertical-align: -2px; }
  .nb-loc svg { width: 13px; height: 13px; fill: none; stroke: var(--muted); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  .nb-loc .cloud.syncing svg { stroke: var(--accent); animation: nb-cloud-pulse 1s ease-in-out infinite; }
  .nb-loc .cloud.ok svg { stroke: #34c759; }
  .nb-loc .cloud.error svg { stroke: var(--danger); }
  @keyframes nb-cloud-pulse { 50% { opacity: .35; } }
  .nb-info { flex: 1; min-width: 0; }
  .nb-name { font-size: 13.5px; font-weight: 590; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.01em; }
  .nb-meta { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
  .nb-actions { display: none; gap: 0; }
  .nb-item:hover .nb-actions { display: flex; }
  .nb-actions button {
    background: none; border: none; padding: 5px; border-radius: 7px; color: var(--muted);
    transition: background .15s, color .15s;
  }
  .nb-actions button:hover { background: rgba(125,125,135,.15); color: var(--text); }
  .nb-actions button.delete:hover { color: var(--danger); }
  .nb-actions .icon { width: 15px; height: 15px; }
  #sidebar-empty { padding: 28px 18px; text-align: center; color: var(--muted); font-size: 13px; line-height: 1.65; }

  /* ============ Canvas ============ */
  #canvas-wrap {
    position: absolute; inset: 0; overflow: hidden;
    background: var(--bg);
  }
  #canvas-wrap canvas { position: absolute; inset: 0; touch-action: none; }
  #bg-canvas { pointer-events: none; }
  #draw-canvas.tool-pen, #draw-canvas.tool-highlighter { cursor: crosshair; }
  #draw-canvas.tool-eraser { cursor: none; }
  #draw-canvas.tool-select { cursor: default; }
  #draw-canvas.tool-text { cursor: text; }
  #eraser-cursor {
    position: absolute; border-radius: 50%; pointer-events: none; display: none;
    border: 1.5px solid rgba(125,125,135,.85);
    background: rgba(125,125,135,.12);
    transform: translate(-50%, -50%);
    z-index: 5;
  }

  #text-editor {
    position: absolute; z-index: 7; display: none;
    min-width: 8px; min-height: 1em;
    outline: 1.5px dashed var(--accent); outline-offset: 3px;
    border-radius: 2px;
    white-space: pre; line-height: 1.3;
    font-family: 'Patrick Hand', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: transparent;
    caret-color: transparent;   /* ẩn caret mặc định, dùng caret tuỳ biến #text-caret */
  }
  #text-caret {
    position: absolute; z-index: 8; display: none;
    width: 2px; border-radius: 1px; background: var(--text);
    pointer-events: none;
    animation: caretBlink 1.06s steps(1) infinite;
  }
  @keyframes caretBlink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

  #sel-actions {
    position: absolute; z-index: 8; display: none;
    border-radius: 10px; padding: 2px; gap: 1px;
  }
  #sel-actions button {
    background: none; border: none; border-radius: 8px;
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    color: var(--text); transition: background .15s;
  }
  #sel-actions button:hover { background: rgba(125,125,135,.12); }
  #sel-actions button.danger { color: var(--danger); }
  #sel-actions .icon { width: 15px; height: 15px; }

  /* ============ Cụm nổi: trên trái / trên phải ============ */
  .fab { position: absolute; z-index: 45; display: flex; align-items: center; gap: 8px; }
  #fab-topleft { top: calc(14px + var(--safe-t)); left: calc(14px + var(--safe-l)); }
  #fab-topright { top: calc(14px + var(--safe-t)); right: calc(14px + var(--safe-r)); }
  .fab-btn {
    width: 38px; height: 38px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    color: var(--text); transition: background .15s, transform .1s;
  }
  .fab-btn:hover { background: rgba(125,125,135,.14); }
  .fab-btn:active { transform: scale(.94); }
  #nb-title {
    height: 38px; padding: 0 14px; border-radius: 12px;
    display: flex; align-items: center;
    font-size: 13.5px; font-weight: 590; letter-spacing: -.01em;
    max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  #nb-title:empty { display: none; }
  #brand-logo {
    width: 22px; height: 22px; object-fit: contain;
  }

  /* Tooltip tuỳ biến: hiện nhanh, gọn, không dùng title mặc định của trình duyệt */
  [data-tip] { position: relative; }
  [data-tip]::after {
    content: attr(data-tip);
    position: absolute; top: calc(100% + 8px); right: 0;
    background: rgba(28,28,30,.92); color: #fff;
    font-size: 12px; font-weight: 510; letter-spacing: -.005em;
    line-height: 1.3; white-space: nowrap;
    padding: 5px 9px; border-radius: 7px;
    box-shadow: var(--shadow-md);
    opacity: 0; transform: translateY(-3px) scale(.97);
    pointer-events: none; z-index: 50;
    transition: opacity .1s ease, transform .1s ease;
    transition-delay: .12s;
  }
  [data-tip]:hover::after, [data-tip]:focus-visible::after {
    opacity: 1; transform: translateY(0) scale(1);
  }

  /* nút đăng nhập / avatar */
  #btn-auth {
    height: 38px; border-radius: 12px; border: none;
    display: flex; align-items: center; gap: 8px;
    padding: 0 13px;
    font-size: 13px; font-weight: 590; color: var(--text);
    transition: background .15s;
  }
  #btn-auth:hover { background: rgba(125,125,135,.14); }
  #btn-auth img { width: 24px; height: 24px; border-radius: 50%; }
  #btn-auth.logged { padding: 0 7px; }
  #btn-auth.logged span { display: none; }
  #sync-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--muted); flex-shrink: 0;
    transition: background .3s;
  }
  #sync-dot.on { background: #34c759; }
  #sync-dot.busy { background: #ff9f0a; }

  /* ============ Dock công cụ (giữa đáy) ============ */
  #dock {
    position: absolute; bottom: calc(16px + var(--safe-b)); left: 50%; transform: translateX(-50%);
    z-index: 11;
    display: flex; align-items: center; gap: 2px;
    border-radius: 14px; padding: 4px;
  }
  #dock .tool-btn {
    background: none; border: none; border-radius: 10px;
    width: 42px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    color: var(--muted);
    transition: background .15s, color .15s, opacity .15s;
    position: relative;
  }
  #dock .tool-btn:hover { background: rgba(125,125,135,.12); color: var(--text); }
  #dock .tool-btn.active { background: var(--accent-tint); color: var(--accent); }
  #dock .tool-btn:disabled { opacity: .3; pointer-events: none; }
  #dock .dock-sep { width: 1px; height: 24px; background: var(--border); margin: 0 4px; }
  /* chấm màu hiện hành trên nút bút */
  .color-dot {
    position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%);
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--text);
  }

  /* popover tuỳ chọn công cụ (mở khi bấm lại công cụ đang chọn) */
  #tool-pop {
    position: absolute; bottom: 72px; left: 50%; transform: translateX(-50%) translateY(6px);
    z-index: 11;
    border-radius: 14px; padding: 12px 14px;
    display: flex; flex-direction: column; gap: 11px; align-items: center;
    opacity: 0; pointer-events: none;
    transition: opacity .18s, transform .18s cubic-bezier(.32,.72,0,1);
  }
  #tool-pop.show { opacity: 1; pointer-events: auto; transform: translateX(-50%); }
  #eraser-modes { display: none; gap: 2px; background: rgba(125,125,135,.12); border-radius: 9px; padding: 2px; }
  #eraser-modes.visible { display: flex; }
  #eraser-modes button {
    border: none; background: none; border-radius: 7px;
    padding: 0 12px; height: 29px; font-size: 12px; font-weight: 590;
    color: var(--muted); transition: background .15s, color .15s;
  }
  #eraser-modes button.active { background: var(--panel-solid); color: var(--accent); box-shadow: var(--shadow-sm); }

  /* B / I in đậm-nghiêng cho công cụ Văn bản */
  #text-style { display: none; gap: 2px; background: rgba(125,125,135,.12); border-radius: 9px; padding: 2px; }
  #text-style button {
    border: none; background: none; border-radius: 7px;
    width: 30px; height: 29px; font-size: 14px;
    color: var(--muted); transition: background .15s, color .15s;
  }
  #text-style button[data-style="bold"] { font-weight: 800; }
  #text-style button[data-style="italic"] { font-style: italic; font-family: Georgia, "Times New Roman", serif; }
  #text-style button.active { background: var(--panel-solid); color: var(--accent); box-shadow: var(--shadow-sm); }

  #colors { display: flex; align-items: center; gap: 9px; }
  .swatch {
    width: 22px; height: 22px; border-radius: 50%; border: none; padding: 0;
    transition: transform .15s cubic-bezier(.32,.72,0,1), box-shadow .15s;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
  }
  .swatch:hover { transform: scale(1.15); }
  .swatch.active { box-shadow: 0 0 0 2px var(--panel-solid), 0 0 0 4px var(--accent); transform: scale(1.05); }
  #custom-color-wrap {
    width: 22px; height: 22px; border-radius: 50%; overflow: hidden; position: relative;
    background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
    transition: transform .15s; flex-shrink: 0;
  }
  #custom-color-wrap:hover { transform: scale(1.15); }
  #custom-color-wrap.active { box-shadow: 0 0 0 2px var(--panel-solid), 0 0 0 4px var(--accent); }
  #custom-color { position: absolute; inset: -6px; opacity: 0; cursor: pointer; }

  #sizes { display: flex; align-items: center; gap: 4px; }
  .size-btn {
    background: none; border: none; border-radius: 8px;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
  }
  .size-btn:hover { background: rgba(125,125,135,.12); }
  .size-btn.active { background: var(--accent-tint); }
  .size-dot { background: var(--muted); border-radius: 50%; transition: background .15s; }
  .size-btn.active .size-dot { background: var(--accent); }

  /* ============ Chip trang (dưới trái) ============ */
  #page-chip {
    position: absolute; bottom: calc(16px + var(--safe-b)); left: calc(16px + var(--safe-l)); z-index: 10;
    display: flex; align-items: center;
    border-radius: 12px; overflow: hidden;
  }
  #page-chip button {
    background: none; border: none; width: 32px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    color: var(--text); transition: background .15s;
  }
  #page-chip button:hover { background: rgba(125,125,135,.12); }
  #page-chip .icon { width: 14px; height: 14px; }
  #page-indicator {
    font-size: 12px; font-weight: 590; color: var(--text);
    background: none; border: none; height: 36px; padding: 0 8px;
    font-variant-numeric: tabular-nums;
  }
  #page-indicator:hover { background: rgba(125,125,135,.12); }

  /* ============ Panel danh sách trang (trượt từ phải) ============ */
  #pages-backdrop {
    position: fixed; inset: 0; z-index: 46;
    background: rgba(0,0,0,.2);
    opacity: 0; pointer-events: none; transition: opacity .25s;
  }
  #pages-backdrop.show { opacity: 1; pointer-events: auto; }
  #pages-panel {
    /* trượt từ TRÁI (cạnh cụm nút mở nó) */
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 46;
    width: 264px;
    padding-top: var(--safe-t);
    background: var(--panel);
    backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
    border-right: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    display: flex; flex-direction: column;
    transform: translateX(-100%);
    transition: transform .32s cubic-bezier(.32,.72,0,1);
  }
  #pages-panel.open { transform: none; }
  #pages-panel header {
    padding: 18px 16px 12px;
    display: flex; align-items: center; justify-content: space-between;
  }
  #pages-panel header h2 { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
  /* "N/tổng" — N là ô nhập, gõ số + Enter để nhảy trang */
  #pages-pos {
    margin-left: auto; margin-right: 10px;
    display: flex; align-items: center; gap: 3px;
    font-size: 13px; color: var(--muted); font-weight: 590;
  }
  #page-jump {
    width: 46px; padding: 3.5px 7px; text-align: right;
    font: inherit; font-weight: 640; color: var(--text);
    background: rgba(125,125,135,.10);
    border: 1px solid var(--border); border-radius: 8px;
    outline: none; -moz-appearance: textfield; appearance: textfield;
    transition: border-color .15s, background .15s;
  }
  #page-jump::-webkit-outer-spin-button, #page-jump::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  #page-jump:focus { border-color: var(--accent); background: var(--panel-solid); }
  #pages-pos b { font-weight: 590; }
  #btn-pages-close {
    background: none; border: none; color: var(--muted);
    width: 30px; height: 30px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s;
  }
  #btn-pages-close:hover { background: rgba(125,125,135,.15); color: var(--text); }
  #pages-grid {
    flex: 1; overflow-y: auto; padding: 6px 14px 18px;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
    align-content: start;
    -webkit-overflow-scrolling: touch; scroll-behavior: smooth;
    scrollbar-width: none;
  }
  #pages-grid::-webkit-scrollbar { display: none; }
  .page-card {
    position: relative; height: 0; padding-bottom: 141.4%;
    background: #fff; border-radius: 8px;
    cursor: pointer; overflow: hidden;
    box-shadow: inset 0 0 0 1px var(--border), var(--shadow-sm);
    transition: transform .15s, box-shadow .15s;
  }
  .page-card:hover { transform: translateY(-2px); }
  .page-card.active { box-shadow: 0 0 0 2px var(--accent), var(--shadow-sm); }
  .page-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .page-card .num {
    position: absolute; bottom: 0; left: 0; right: 0;
    font-size: 10px; color: #86868b;
    background: rgba(255,255,255,.85); text-align: center; padding: 2px 0;
  }
  .page-card .del {
    position: absolute; top: 4px; right: 4px; display: none;
    background: rgba(0,0,0,.45); border: none; border-radius: 50%;
    width: 18px; height: 18px; color: #fff;
    align-items: center; justify-content: center; padding: 0;
  }
  .page-card .del svg { width: 10px; height: 10px; stroke-width: 2.4; }
  .page-card:hover .del { display: flex; }

  /* ============ Zoom (dưới phải) ============ */
  #zoom-ctl {
    position: absolute; right: calc(16px + var(--safe-r)); bottom: calc(16px + var(--safe-b)); z-index: 10;
    display: flex; align-items: center;
    border-radius: 12px; overflow: hidden;
  }
  #zoom-ctl button {
    background: none; border: none; width: 34px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    color: var(--text); transition: background .15s;
  }
  #zoom-ctl button:hover { background: rgba(125,125,135,.12); }
  #zoom-level {
    font-size: 12px; font-weight: 590; width: 52px; text-align: center;
    color: var(--text); background: none; border: none; height: 36px;
    font-variant-numeric: tabular-nums;
  }
  #zoom-level:hover { background: rgba(125,125,135,.12); }
  #zoom-ctl .icon { width: 15px; height: 15px; }

  /* ============ Popover cài đặt & tài khoản ============ */
  .pop {
    /* z-index cao hơn .fab (45) — nếu không popover (vd thẻ tài khoản) sẽ bị
       nút "Chia sẻ" nổi dưới hàng FAB đè lên, nhìn như bị khuất. */
    position: absolute; top: 60px; right: 14px; z-index: 49;
    border-radius: 14px;
    width: 252px; padding: 6px;
    opacity: 0; transform: translateY(-6px) scale(.98); pointer-events: none;
    transition: opacity .18s, transform .18s cubic-bezier(.32,.72,0,1);
  }
  .pop.show { opacity: 1; transform: none; pointer-events: auto; }
  .pop-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 10px; border-radius: 9px; font-size: 13.5px;
    gap: 10px;
  }
  .pop-row:hover { background: rgba(125,125,135,.1); }
  .pop-row.clickable { cursor: pointer; }
  .pop-label { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  .pop-sub { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
  .pop-sep { height: 1px; background: var(--border); margin: 5px 8px; }
  .switch { position: relative; width: 40px; height: 24px; flex-shrink: 0; }
  .switch input { opacity: 0; width: 100%; height: 100%; position: absolute; cursor: pointer; z-index: 1; margin: 0; }
  .switch .knob {
    position: absolute; inset: 0; border-radius: 12px;
    background: rgba(125,125,135,.32); transition: background .2s;
  }
  .switch .knob::after {
    content: ''; position: absolute; top: 2px; left: 2px;
    width: 20px; height: 20px; border-radius: 50%; background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
    transition: transform .2s cubic-bezier(.32,.72,0,1);
  }
  .switch input:checked + .knob { background: #34c759; }
  .switch input:checked + .knob::after { transform: translateX(16px); }
  #paper-options { display: flex; gap: 7px; padding: 4px 10px 9px; }
  .paper-opt {
    flex: 1; aspect-ratio: 3/4; border-radius: 8px; border: 1.5px solid var(--border);
    background: #fff; padding: 0; position: relative; overflow: hidden;
    transition: border-color .15s, transform .15s;
  }
  .paper-opt:hover { transform: translateY(-1px); }
  .paper-opt.active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
  .paper-opt svg { width: 100%; height: 100%; }
  .paper-opt .po-name {
    position: absolute; bottom: 0; left: 0; right: 0;
    font-size: 9px; color: #86868b; background: rgba(255,255,255,.88);
    padding: 1.5px 0; text-align: center;
  }

  /* (Welcome cũ đã thay bằng #landing — xem cuối file) */

  /* ============ Modal ============ */
  #modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.32);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center; z-index: 50;
    opacity: 0; pointer-events: none; transition: opacity .2s;
  }
  #modal-overlay.show { opacity: 1; pointer-events: auto; }
  #modal {
    background: var(--panel-solid); border-radius: 18px; padding: 24px;
    width: 330px; box-shadow: var(--shadow-lg);
    transform: scale(.96) translateY(8px); transition: transform .25s cubic-bezier(.32,.72,0,1);
  }
  #modal-overlay.show #modal { transform: none; }
  #modal h3 { font-size: 17px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 16px; text-align: center; }
  #modal input[type=text] {
    width: 100%; padding: 11px 13px; font-size: 14px;
    border: 1px solid var(--border); border-radius: 10px; margin-bottom: 16px;
    font-family: inherit; background: var(--bg); color: var(--text);
  }
  #modal input[type=text]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
  .cover-colors { display: flex; gap: 9px; margin-bottom: 22px; justify-content: center; }
  .cover-pick {
    width: 30px; height: 39px; border-radius: 3px 6px 6px 3px; border: none;
    box-shadow: inset 2.5px 0 0 rgba(0,0,0,.16);
    transition: transform .15s;
  }
  .cover-pick:hover { transform: translateY(-2px); }
  .cover-pick.active { box-shadow: inset 2.5px 0 0 rgba(0,0,0,.16), 0 0 0 2px var(--panel-solid), 0 0 0 4px var(--accent); }
  .modal-btns { display: flex; gap: 9px; }
  .modal-btns button {
    flex: 1; padding: 10px; border-radius: 980px; font-size: 14px; font-weight: 590; border: none;
    transition: filter .15s, transform .1s;
  }
  .modal-btns button:active { transform: scale(.97); }
  #modal-cancel { background: rgba(125,125,135,.14); color: var(--text); }
  #modal-cancel:hover { background: rgba(125,125,135,.22); }
  #modal-ok { background: var(--accent); color: #fff; }
  #modal-ok:hover { filter: brightness(1.08); }

  #toast {
    position: fixed; top: 64px; left: 50%; transform: translateX(-50%) translateY(-8px);
    background: var(--panel); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
    border: 1px solid var(--border);
    color: var(--text); padding: 9px 18px; border-radius: 980px;
    font-size: 13px; font-weight: 510; box-shadow: var(--shadow-md);
    opacity: 0; pointer-events: none; transition: all .25s cubic-bezier(.32,.72,0,1); z-index: 60;
  }
  #toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

  /* Gợi ý kéo để thêm trang */
  #pull-add {
    position: fixed; left: 50%; bottom: 92px;
    display: flex; align-items: center; gap: 9px;
    padding: 8px 14px 8px 9px; border-radius: 980px;
    box-shadow: var(--shadow-md); z-index: 55;
    opacity: 0; pointer-events: none;
    transform: translateX(-50%) translateY(14px) scale(.92);
    transition: opacity .2s ease, transform .28s cubic-bezier(.32,.72,0,1);
  }
  #pull-add.show { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  #pull-add .pull-ring {
    position: relative; width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center; flex: none;
    background: conic-gradient(var(--accent) calc(var(--p, 0) * 360deg), rgba(0,0,0,.12) 0);
    transition: transform .2s cubic-bezier(.32,.72,0,1);
  }
  #pull-add .pull-ring::before {
    content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--panel-solid);
  }
  #pull-add .pull-ring .icon {
    position: relative; width: 14px; height: 14px; color: var(--accent);
    transition: transform .2s cubic-bezier(.32,.72,0,1);
  }
  #pull-add .pull-text { font-size: 13px; font-weight: 510; color: var(--text); white-space: nowrap; }
  #pull-add.ready .pull-ring { transform: scale(1.12); }
  #pull-add.ready .pull-ring::before { background: var(--accent); }
  #pull-add.ready .pull-ring .icon { color: #fff; }

  @media (max-width: 600px) {
    #nb-title { max-width: 110px; }
    #dock .tool-btn { width: 38px; }
    #pull-add .pull-text { display: none; }
  }

  /* Thiết bị cảm ứng (iPad/tablet): nới rộng vùng chạm cho dễ bấm */
  @media (pointer: coarse) {
    #dock .tool-btn { width: 46px; height: 44px; }
    #dock { padding: 5px; }
    .fab-btn { width: 42px; height: 42px; }
    #page-chip button, #zoom-ctl button { width: 40px; height: 40px; }
  }

  /* ============================================================
     Landing / hướng dẫn — chính nó là một trang vở:
     nền giấy kẻ ngang + lề đỏ, minh hoạ nét viết tay tự vẽ dần.
     ============================================================ */
  :root { --rule: rgba(29,29,31,.06); --margin-red: rgba(255,90,90,.30); }
  @media (prefers-color-scheme: dark) {
    :root { --rule: rgba(255,255,255,.055); --margin-red: rgba(255,105,97,.26); }
  }

  #landing {
    position: fixed; inset: 0; z-index: 40;
    display: none;
    overflow-y: auto; overflow-x: hidden;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    background:
      linear-gradient(to right, transparent calc(24px + var(--safe-l)), var(--margin-red) calc(24px + var(--safe-l)), var(--margin-red) calc(25.5px + var(--safe-l)), transparent calc(25.5px + var(--safe-l))),
      repeating-linear-gradient(to bottom, transparent 0 35px, var(--rule) 35px 36px),
      var(--bg);
    color: var(--text);
  }
  #landing.show { display: block; animation: ld-in .45s cubic-bezier(.32,.72,0,1); }
  @keyframes ld-in { from { opacity: 0; } to { opacity: 1; } }

  /* CTA "Vào viết tiếp nào!!" — hành động chính của người đã có vở */
  .ld-cta2 { display: flex; justify-content: center; margin-top: 2px; }
  #btn-landing-continue {
    display: inline-flex; align-items: center; gap: 11px;
    background: linear-gradient(135deg, var(--accent), #4aa3ff);
    color: #fff; border: none;
    padding: 18px 40px; border-radius: 980px;
    font-size: 19px; font-weight: 700; letter-spacing: -.01em;
    box-shadow: 0 8px 30px rgba(0,113,227,.42);
    transition: transform .18s cubic-bezier(.32,.72,0,1), box-shadow .18s, filter .18s;
    animation: ld-beckon 2.6s ease-in-out infinite;
  }
  #btn-landing-continue .icon { width: 20px; height: 20px; stroke-width: 2.1; }
  #btn-landing-continue:hover { transform: translateY(-2px) scale(1.03); filter: brightness(1.06); box-shadow: 0 12px 38px rgba(0,113,227,.5); animation-play-state: paused; }
  #btn-landing-continue:active { transform: scale(.97); }
  @keyframes ld-beckon {
    0%, 100% { box-shadow: 0 8px 30px rgba(0,113,227,.42); }
    50% { box-shadow: 0 8px 30px rgba(0,113,227,.42), 0 0 0 9px rgba(0,113,227,.10); }
  }

  /* Preview trang đang viết dở — bấm là vào vở */
  #ld-live { cursor: pointer; position: relative; transition: transform .2s cubic-bezier(.32,.72,0,1), filter .2s; }
  #ld-live:hover { transform: translateY(-4px); filter: drop-shadow(0 24px 48px rgba(0,0,0,.18)); }
  #ld-live:active { transform: scale(.99); }
  #ld-live canvas {
    display: block; width: 100%; height: auto;
    border-radius: 18px;
    box-shadow: inset 0 0 0 1px var(--border);
    background: #fff;
  }
  #ld-live-label {
    position: absolute; left: 14px; bottom: 14px;
    padding: 7px 14px; border-radius: 980px;
    font-size: 13px; font-weight: 590; color: var(--text);
    pointer-events: none;
  }

  .ld-wrap { max-width: 1020px; margin: 0 auto; padding: 0 28px calc(56px + var(--safe-b)); }

  /* ---------- Hero ---------- */
  .ld-hero {
    min-height: 86vh; display: flex; flex-direction: column;
    align-items: center; justify-content: center; text-align: center;
    padding-top: calc(64px + var(--safe-t)); gap: 18px;
  }
  .ld-logo { width: 88px; height: 88px; border-radius: 22px; box-shadow: var(--shadow-md); }
  .ld-hero h1 {
    font-family: 'Patrick Hand', cursive;
    font-size: clamp(64px, 13vw, 118px);
    line-height: 1.02; font-weight: 400; letter-spacing: .01em;
  }
  /* vệt dạ quang cam sau chữ */
  .hl { position: relative; display: inline-block; }
  .hl::before {
    content: ''; position: absolute; z-index: -1;
    left: -3%; right: -4%; top: 54%; bottom: 6%;
    background: rgba(255,159,10,.32);
    border-radius: 6px; transform: skewX(-8deg) rotate(-.6deg);
  }
  .ld-tag { font-size: clamp(15px, 2.4vw, 18.5px); color: var(--muted); line-height: 1.6; }
  .ld-cta { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
  .ld-cta button, .ld-foot button {
    display: inline-flex; align-items: center; gap: 9px;
    background: var(--accent); color: #fff; border: none;
    padding: 15px 30px; border-radius: 980px;
    font-size: 17px; font-weight: 640; letter-spacing: -.01em;
    box-shadow: 0 6px 24px rgba(0,113,227,.35);
    transition: transform .18s cubic-bezier(.32,.72,0,1), box-shadow .18s, filter .18s;
  }
  .ld-cta button:hover, .ld-foot button:hover { transform: translateY(-2px) scale(1.02); filter: brightness(1.07); box-shadow: 0 10px 32px rgba(0,113,227,.42); }
  .ld-cta button:active, .ld-foot button:active { transform: scale(.97); }
  .ld-cta button .icon, .ld-foot button .icon { width: 18px; height: 18px; stroke-width: 2.2; }
  .ld-cta .ghost {
    background: transparent; color: var(--accent);
    box-shadow: none; border: 1.5px solid var(--accent-tint);
    font-weight: 590; font-size: 15.5px; padding: 13px 22px;
  }
  .ld-cta .ghost:hover { background: var(--accent-tint); box-shadow: none; }

  .ld-mock { width: min(760px, 100%); margin-top: 30px; filter: drop-shadow(0 18px 40px rgba(0,0,0,.14)); }
  .ld-mock svg { width: 100%; height: auto; }

  /* ---------- SVG chung ---------- */
  #landing svg .paper { fill: var(--panel-solid); stroke: var(--border); stroke-width: 1; }
  #landing svg .rules line { stroke: var(--rule); stroke-width: 1.4; }
  #landing svg .margin { stroke: var(--margin-red); stroke-width: 1.4; }
  #landing svg .hand {
    font-family: 'Patrick Hand', cursive; font-size: 23px; fill: var(--text);
  }
  #landing svg .big-hand { font-size: 30px; fill: var(--accent); }
  #landing svg .bold { font-weight: 700; }
  #landing svg .italic { font-style: italic; }
  #landing svg .wm { font-weight: 700; font-size: 19px; fill: var(--muted); opacity: .55; }
  #landing svg .cap { font-size: 12.5px; fill: var(--muted); font-weight: 590; font-family: inherit; }
  #landing svg .pen { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
  #landing svg .pen.thin { stroke-width: 2.2; }
  #landing svg .pen.w2 { stroke-width: 4.5; }
  #landing svg .pen.dash { stroke-dasharray: .07 .05; opacity: .45; } /* nét bị tẩy dở (pathLength=1) */
  #landing svg .pen.cloud { stroke: var(--muted); }
  #landing svg .hl-swash { fill: none; stroke: rgba(255,159,10,.42); stroke-width: 20; stroke-linecap: round; }
  #landing svg .mock-glass rect:first-child, #landing svg .mock-glass > rect {
    fill: var(--panel); stroke: var(--border);
  }
  #landing svg .mini { fill: var(--panel-solid); stroke: var(--border); }
  #landing svg .mini.act { stroke: var(--accent); stroke-width: 2; }
  #landing svg .mini-t, #landing svg .tool-t { font-size: 13px; fill: var(--muted); font-weight: 590; }
  #landing svg .tool { fill: var(--muted); stroke: none; }
  #landing svg .tool.on { fill: var(--accent); }
  #landing svg .dot { fill: #1d1d1f; }
  #landing svg .dot.o { fill: #ff9f0a; }
  #landing svg .dot.g { fill: #34c759; }
  #landing svg .sizes circle { fill: var(--muted); opacity: .6; }
  #landing svg .sizes circle.on { fill: var(--accent); opacity: 1; }
  #landing svg .swatches circle { fill: #1d1d1f; }
  #landing svg .swatches .c2 { fill: #ff3b30; }
  #landing svg .swatches .c3 { fill: #0071e3; }
  #landing svg .eraser-g rect { fill: #ff9f9a; stroke: var(--border); }
  #landing svg .dev { fill: var(--panel); stroke: var(--border); }
  #landing svg .paper-demo line { stroke: var(--rule); stroke-width: 1.3; }
  #landing svg .dots-demo circle { fill: var(--muted); opacity: .6; }
  #landing svg .caret { fill: var(--accent); animation: ld-blink 1.1s steps(1) infinite; }
  @keyframes ld-blink { 50% { opacity: 0; } }
  #landing svg .badges rect { fill: var(--accent-tint); }
  #landing svg .badges text { font-size: 11.5px; font-weight: 640; fill: var(--accent); font-family: inherit; }
  #landing svg .badge-t { font-size: 20px; font-weight: 700; fill: var(--danger); font-family: inherit; }

  /* nét tự vẽ dần khi lộ diện (pathLength=1 chuẩn hoá) */
  #landing .reveal svg .d { stroke-dasharray: 1; stroke-dashoffset: 1; }
  #landing .reveal.in svg .d {
    animation: ld-draw 1s cubic-bezier(.45,0,.2,1) forwards;
    animation-delay: var(--dd, .15s);
  }
  @keyframes ld-draw { to { stroke-dashoffset: 0; } }

  /* lộ diện khi cuộn tới */
  #landing .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.32,.72,0,1), transform .7s cubic-bezier(.32,.72,0,1); }
  #landing .reveal.in { opacity: 1; transform: none; }
  .ld-hero .reveal:nth-child(1) { transition-delay: 0s; }
  .ld-hero .reveal:nth-child(2) { transition-delay: .08s; }
  .ld-hero .reveal:nth-child(3) { transition-delay: .16s; }
  .ld-hero .reveal:nth-child(4) { transition-delay: .24s; }
  .ld-hero .reveal:nth-child(5) { transition-delay: .34s; }

  /* ---------- Card hướng dẫn ---------- */
  #ld-guide { display: flex; flex-direction: column; gap: 42px; padding: 30px 0 10px; }
  .ld-card {
    display: grid; grid-template-columns: 1.05fr .95fr; gap: 36px; align-items: center;
    background: var(--panel);
    backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
    border: 1px solid var(--border); border-radius: 22px;
    box-shadow: var(--shadow-md);
    padding: 40px 44px;
    transform: translateY(26px) rotate(-.35deg);
  }
  .ld-card.flip { transform: translateY(26px) rotate(.35deg); }
  .ld-card.flip .ld-text { order: 2; }
  .ld-card.flip .ld-illo { order: 1; }
  #landing .ld-card.in { transform: rotate(-.35deg); }
  #landing .ld-card.flip.in { transform: rotate(.35deg); }
  .ld-card:hover { box-shadow: var(--shadow-lg); }

  .ld-chip {
    display: inline-block; font-size: 12.5px; font-weight: 640;
    color: var(--accent); background: var(--accent-tint);
    padding: 5px 12px; border-radius: 980px; margin-bottom: 14px;
    letter-spacing: .01em;
  }
  .ld-text h2 { font-size: clamp(21px, 3vw, 27px); font-weight: 700; letter-spacing: -.02em; margin-bottom: 12px; line-height: 1.25; }
  .ld-text p { font-size: 15px; line-height: 1.75; color: var(--text); }
  .ld-text p + p { margin-top: 10px; }
  .ld-text .ld-sub { color: var(--muted); font-size: 13.5px; }
  .ld-illo svg { width: 100%; height: auto; }

  /* Clip hướng dẫn (video Remotion, ảnh thật của app) */
  .ld-clip {
    position: relative; border-radius: 14px; overflow: hidden;
    aspect-ratio: 1280 / 800; background: var(--panel-solid);
    box-shadow: 0 14px 34px rgba(0,0,0,.16), inset 0 0 0 1px var(--border);
  }
  .ld-clip video, .ld-clip img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .ld-clip .dk { display: none; }        /* mặc định light */
  @media (prefers-color-scheme: dark) {
    .ld-clip .lt { display: none; }
    .ld-clip .dk { display: block; }
  }

  .ld-keys { color: var(--muted); font-size: 13px; margin-top: 13px; line-height: 1.9; }
  .ld-keys .key { margin: 0 3px; }

  .key {
    display: inline-block; font-size: .86em; font-weight: 640;
    padding: 1.5px 7px; border-radius: 6px;
    background: var(--panel-solid); border: 1px solid var(--border);
    box-shadow: 0 1.5px 0 var(--border); vertical-align: 1px;
  }

  /* ---------- CTA cuối ---------- */
  .ld-foot { text-align: center; padding: 66px 0 10px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
  .hand-foot { font-family: 'Patrick Hand', cursive; font-size: clamp(34px, 6vw, 52px); font-weight: 400; }
  .ld-foot p { color: var(--muted); font-size: 13.5px; }

  /* ---------- Responsive ---------- */
  @media (max-width: 760px) {
    .ld-wrap { padding: 0 18px calc(46px + var(--safe-b)); }
    .ld-hero { min-height: 78vh; }
    .ld-card, .ld-card.flip { grid-template-columns: 1fr; gap: 22px; padding: 26px 22px; }
    .ld-card.flip .ld-text { order: 1; }
    .ld-card.flip .ld-illo { order: 2; }
    #ld-guide { gap: 26px; }
  }

  /* ---------- Giảm chuyển động ---------- */
  @media (prefers-reduced-motion: reduce) {
    #landing { scroll-behavior: auto; }
    #landing.show { animation: none; }
    #landing .reveal { opacity: 1; transform: none; transition: none; }
    #landing .ld-card, #landing .ld-card.flip { transform: none; }
    #landing .reveal svg .d { stroke-dasharray: none; stroke-dashoffset: 0; }
    #landing .reveal.in svg .d { animation: none; }
    #landing svg .caret { animation: none; }
    #btn-landing-continue { animation: none; }
    /* video được thay bằng ảnh poster tĩnh trong JS */
  }

  /* ============ Vòng tiến độ nhập tài liệu ============ */
  #import-ring {
    position: fixed; right: calc(16px + var(--safe-r)); bottom: calc(72px + var(--safe-b));
    z-index: 45; width: 56px; height: 56px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transform: scale(.8);
    transition: opacity .25s, transform .25s cubic-bezier(.32,.72,0,1);
  }
  #import-ring.show { opacity: 1; transform: none; }
  #import-ring svg { position: absolute; inset: 4px; width: 48px; height: 48px; transform: rotate(-90deg); }
  #import-ring circle { fill: none; stroke-width: 3.4; }
  #import-ring .bg { stroke: rgba(125,125,135,.22); }
  #import-ring .fg {
    stroke: var(--accent); stroke-linecap: round;
    stroke-dasharray: 100; stroke-dashoffset: 100;
    transition: stroke-dashoffset .3s ease;
  }
  #import-ring.done .fg { stroke: #34c759; }
  #import-ring-pct { font-size: 11.5px; font-weight: 700; color: var(--text); letter-spacing: -.02em; }
  #import-ring.done #import-ring-pct { color: #34c759; font-size: 16px; }

  /* ============ Chia sẻ vở (kiểu Google Drive) ============ */
  .nb-section {
    margin: 14px 6px 4px; font-size: 11.5px; font-weight: 640;
    color: var(--muted); text-transform: uppercase; letter-spacing: .04em;
  }
  #share-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.32);
    display: flex; align-items: center; justify-content: center; z-index: 52;
    opacity: 0; pointer-events: none; transition: opacity .2s;
  }
  #share-overlay.show { opacity: 1; pointer-events: auto; }
  #share-modal {
    width: min(430px, calc(100vw - 36px));
    border-radius: 18px; padding: 20px 20px 16px;
    display: flex; flex-direction: column; gap: 13px;
    background: var(--panel-solid);
  }
  #share-modal h3 { font-size: 16.5px; font-weight: 700; letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .share-addrow { display: flex; gap: 7px; }
  #share-email {
    flex: 1; min-width: 0; padding: 9px 12px; font: inherit; color: var(--text);
    background: rgba(125,125,135,.10); border: 1px solid var(--border); border-radius: 10px; outline: none;
  }
  #share-email:focus { border-color: var(--accent); background: var(--panel-solid); }
  #share-modal select {
    font: inherit; color: var(--text); padding: 8px 8px; border-radius: 10px;
    background: rgba(125,125,135,.10); border: 1px solid var(--border); outline: none;
  }
  #share-add {
    background: var(--accent); color: #fff; border: none; border-radius: 10px;
    padding: 8px 15px; font-weight: 640; font-size: 13.5px;
  }
  #share-list { display: flex; flex-direction: column; gap: 4px; max-height: 180px; overflow-y: auto; }
  .share-row { display: flex; align-items: center; gap: 8px; padding: 5px 2px; }
  .share-mail { flex: 1; min-width: 0; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .share-del { background: none; border: none; color: var(--muted); padding: 5px; border-radius: 7px; }
  .share-del:hover { color: var(--danger); background: rgba(125,125,135,.12); }
  .share-del .icon { width: 14px; height: 14px; }
  .share-empty { color: var(--muted); font-size: 13px; padding: 4px 2px; }
  .share-sep { height: 1px; background: var(--border); }
  .share-general-label { font-size: 13px; font-weight: 640; margin-bottom: 8px; }
  .share-general-controls { display: flex; gap: 7px; }
  .share-general-controls select { flex: 1; min-width: 0; }
  .share-note { font-size: 12px; color: var(--muted); margin-top: 7px; }
  .share-btns { display: flex; justify-content: space-between; align-items: center; margin-top: 2px; }
  #share-copy {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--accent-tint); color: var(--accent); border: none;
    padding: 9px 15px; border-radius: 980px; font-weight: 640; font-size: 13.5px;
  }
  #share-copy .icon { width: 15px; height: 15px; }
  #share-close {
    background: var(--accent); color: #fff; border: none;
    padding: 9px 20px; border-radius: 980px; font-weight: 640; font-size: 13.5px;
  }

  /* ai đang cùng mở vở */
  #presence { display: flex; gap: 5px; }
  .presence-dot {
    width: 30px; height: 30px; border-radius: 50%; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; color: var(--accent);
  }
  .presence-dot img { width: 100%; height: 100%; object-fit: cover; }

  /* nút Chia sẻ có chữ — nằm dưới hàng nút trên phải, thẳng mép phải */
  #btn-share {
    position: absolute; top: calc(100% + 10px); right: 0;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 16px; border-radius: 980px;
    font-size: 13.5px; font-weight: 640; color: var(--accent);
    transition: transform .15s;
  }
  #btn-share:hover { transform: scale(1.04); }
  #btn-share:active { transform: scale(.96); }
  #btn-share .icon { width: 16px; height: 16px; }

  /* thanh dung lượng cloud trong popover tài khoản */
  #usage-bar {
    margin-top: 7px; height: 5px; border-radius: 3px;
    background: rgba(125,125,135,.18); overflow: hidden;
  }
  #usage-fill { height: 100%; width: 0; border-radius: 3px; background: var(--accent); transition: width .4s; }
  #usage-fill.full { background: var(--danger); }

  /* nút Tạo bản sao (vở thuộc tài khoản khác) */
  #btn-copy-nb {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 14px; border-radius: 980px;
    font-size: 13px; font-weight: 640; color: var(--accent);
  }
  #btn-copy-nb .icon { width: 15px; height: 15px; }

  /* hàng chọn kiểu hình khối trong popover công cụ */
  #shape-kinds { display: none; gap: 2px; background: rgba(125,125,135,.12); border-radius: 9px; padding: 2px; }
  #shape-kinds.visible { display: flex; }
  #shape-kinds button {
    background: none; border: none; border-radius: 7px;
    width: 36px; height: 30px; display: flex; align-items: center; justify-content: center;
    color: var(--muted);
  }
  #shape-kinds button.active { background: var(--panel-solid); color: var(--accent); box-shadow: var(--shadow-sm); }
  #shape-kinds .icon { width: 17px; height: 17px; }
  #draw-canvas.tool-shape { cursor: crosshair; }

  /* sort + footer dung lượng trong popup vở */
  #nb-sort {
    margin-left: auto; font: inherit; font-size: 12.5px; font-weight: 590;
    color: var(--muted); background: rgba(125,125,135,.10);
    border: 1px solid var(--border); border-radius: 980px;
    padding: 5px 10px; outline: none;
  }
  #nb-usage {
    padding: 10px 20px 14px; border-top: 1px solid var(--border);
    font-size: 12px; color: var(--muted); font-weight: 590;
  }
  #nb-usage-bar { margin-top: 6px; height: 4.5px; border-radius: 3px; background: rgba(125,125,135,.18); overflow: hidden; }
  #nb-usage-fill { height: 100%; width: 0; border-radius: 3px; background: var(--accent); transition: width .4s; }
  #nb-usage-fill.full { background: var(--danger); }

  /* nút cài đặt PWA ở landing */
  #ld-install-box { display: flex; align-items: center; justify-content: center; }
  #btn-install {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--accent); color: #fff; border: none;
    padding: 16px 32px; border-radius: 980px;
    font-size: 16.5px; font-weight: 640;
    box-shadow: 0 6px 24px rgba(0,113,227,.35);
    transition: transform .18s cubic-bezier(.32,.72,0,1), filter .18s;
  }
  #btn-install:hover:not(:disabled) { transform: translateY(-2px) scale(1.02); filter: brightness(1.07); }
  #btn-install:disabled { background: #34c759; box-shadow: none; cursor: default; }
  #btn-install .icon { width: 19px; height: 19px; stroke-width: 2.1; }

  /* ============ Responsive điện thoại / tablet ============ */
  @media (max-width: 640px) {
    /* popup danh sách vở → sheet gần toàn màn hình */
    #sidebar {
      width: calc(100vw - 20px);
      max-height: calc(100dvh - 90px);
      border-radius: 18px;
    }
    #nb-tabs { flex-wrap: wrap; row-gap: 6px; padding: 4px 14px 10px; }
    #sidebar header { padding: 16px 14px 6px; }
    #notebook-list { padding: 8px 8px 14px; }
    /* hàng nút nổi gọn lại cho vừa màn hình hẹp */
    .fab { gap: 5px; }
    .fab-btn { width: 36px; height: 36px; }
    .fab-btn .icon { width: 17px; height: 17px; }
    #nb-title { max-width: 84px; font-size: 12px; }
    #btn-auth { padding: 8px 12px; font-size: 12.5px; }
    #btn-share { padding: 8px 13px; font-size: 12.5px; }
    #btn-copy-nb { padding: 8px 12px; font-size: 12px; }
    /* dock công cụ thu gọn */
    #dock { padding: 4px; gap: 1px; }
    #dock .tool-btn { width: 38px; height: 38px; }
    #dock .icon { width: 17px; height: 17px; }
    .dock-sep { margin: 0 2px; }
    /* panel trang hẹp hơn */
    #pages-panel { width: min(232px, 78vw); }
    /* modal chia sẻ vừa khít */
    #share-modal { padding: 16px 14px 12px; }
    .share-addrow { flex-wrap: wrap; }
    #share-email { min-width: 100%; }
    /* landing */
    .ld-hero { padding-top: calc(76px + var(--safe-t)); }
    .ld-cta button, .ld-foot button { padding: 13px 22px; font-size: 15.5px; }
    #btn-landing-continue { padding: 15px 28px; font-size: 16.5px; }
    #btn-install { padding: 13px 24px; font-size: 15px; }
  }
  @media (max-width: 400px) {
    .fab-btn { width: 33px; height: 33px; }
    #dock .tool-btn { width: 34px; height: 36px; }
    #page-chip button, #zoom-ctl button { width: 34px; height: 36px; }
    #zoom-ctl #zoom-label { min-width: 40px; font-size: 11px; }
  }

  /* ============ Màn chặn quyền truy cập (gate kiểu Google Drive) ============ */
  #gate {
    position: fixed; inset: 0; z-index: 62;
    display: none; align-items: center; justify-content: center;
    padding: 24px;
    background: var(--bg);
  }
  #gate.show { display: flex; animation: ld-in .3s ease; }
  #gate-card {
    width: min(420px, 100%); border-radius: 22px; padding: 34px 28px 24px;
    text-align: center; background: var(--panel-solid);
    display: flex; flex-direction: column; align-items: center; gap: 12px;
  }
  #gate-lock {
    width: 60px; height: 60px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-tint); margin-bottom: 4px;
  }
  #gate-lock svg { width: 30px; height: 30px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  #gate-card h2 { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
  #gate-card p { font-size: 14px; color: var(--muted); line-height: 1.55; }
  #gate-email {
    font-size: 13px; font-weight: 600; color: var(--text);
    background: rgba(125,125,135,.10); border-radius: 980px; padding: 5px 14px;
  }
  #gate-note {
    width: 100%; margin-top: 2px; padding: 10px 12px; font: inherit; font-size: 13.5px;
    color: var(--text); background: rgba(125,125,135,.10);
    border: 1px solid var(--border); border-radius: 12px; outline: none; resize: none;
  }
  #gate-note:focus { border-color: var(--accent); background: var(--panel-solid); }
  #gate-login, #gate-request {
    width: 100%; margin-top: 4px;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 13px 20px; border-radius: 980px; font-size: 15px; font-weight: 640;
    border: none; transition: transform .15s, filter .15s, box-shadow .15s;
  }
  #gate-login { background: #fff; color: #1f1f1f; box-shadow: inset 0 0 0 1px rgba(0,0,0,.14), var(--shadow-sm); }
  #gate-login:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(0,0,0,.14), var(--shadow-md); }
  #gate-request { background: var(--accent); color: #fff; box-shadow: 0 6px 20px rgba(0,113,227,.32); }
  #gate-request:hover { transform: translateY(-1px); filter: brightness(1.06); }
  #gate-requested { display: none; font-size: 14px; font-weight: 600; color: #34c759; margin-top: 4px; }
  #gate-actions { display: flex; gap: 16px; margin-top: 8px; }
  .gate-link { background: none; border: none; color: var(--muted); font-size: 13px; font-weight: 590; padding: 4px; }
  .gate-link:hover { color: var(--accent); }

  /* hàng yêu cầu quyền trong modal Chia sẻ */
  .req-row { gap: 6px; }
  .req-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  .req-note { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .req-role { font-size: 12px; padding: 5px 6px; border-radius: 8px; background: rgba(125,125,135,.10); border: 1px solid var(--border); color: var(--text); }
  .req-ok, .req-no { background: none; border: none; padding: 5px; border-radius: 7px; }
  .req-ok { color: #34c759; } .req-ok:hover { background: rgba(52,199,89,.14); }
  .req-no { color: var(--muted); } .req-no:hover { background: rgba(125,125,135,.14); color: var(--danger); }
  .req-ok .icon, .req-no .icon { width: 16px; height: 16px; }