:root {
      --bg: #eef2f6;
      --panel: #ffffff;
      --border: #d8e0ea;
      --text: #152033;
      --muted: #5a6b82;
      --accent: #1a4d7c;
      --accent-2: #2a6fad;
      --soft: #eaf2fa;
      --soft-2: #f5f8fb;
      --selected: #d9ebf8;
      --ok: #0f6b4c;
      --ok-bg: #e6f6ef;
      --warn-bg: #fff6e5;
      --warn: #8a5a00;
      --shadow: 0 1px 2px rgba(16,24,40,.06), 0 8px 24px rgba(16,24,40,.04);
      --radius: 14px;
      --tree-w: 360px;
      --top-h: auto;
    }
    * { box-sizing: border-box; }
    html, body {
      margin: 0; padding: 0; height: 100%;
      font-family: "Heebo", "Rubik", "Segoe UI", Arial, sans-serif;
      background: var(--bg); color: var(--text);
      direction: rtl; text-align: right;
      -webkit-font-smoothing: antialiased;
    }
    body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }

    /* Privacy banner */
    .privacy-banner {
      background: var(--ok-bg); color: var(--ok);
      border-bottom: 1px solid #bfe5d4;
      padding: 10px 18px;
      font-size: 0.92rem; font-weight: 600;
      display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
      justify-content: center; text-align: center;
    }
    .privacy-banner .dot {
      width: 8px; height: 8px; border-radius: 50%;
      background: var(--ok); flex: 0 0 auto;
    }

    /* Top */
    .topbar {
      background: var(--panel);
      border-bottom: 1px solid var(--border);
      padding: 14px 18px 12px;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 12px 16px;
      align-items: center;
      box-shadow: var(--shadow);
      position: sticky; top: 0; z-index: 30;
    }
    .brand { min-width: 0; }
    .brand h1 {
      margin: 0 0 4px; font-size: 1.35rem; font-weight: 700;
      letter-spacing: -0.01em; line-height: 1.25;
    }
    .brand .sub {
      margin: 0; color: var(--muted); font-size: 0.88rem; line-height: 1.4;
    }
    .top-actions {
      display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end;
    }
    .conn {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 8px 12px; border-radius: 999px;
      border: 1px solid var(--border); background: var(--soft-2);
      font-size: 0.85rem; color: var(--muted);
    }
    .conn.on {
      background: var(--ok-bg); border-color: #bfe5d4; color: var(--ok); font-weight: 600;
    }
    .conn .lamp {
      width: 9px; height: 9px; border-radius: 50%; background: #b0bac8;
    }
    .conn.on .lamp { background: var(--ok); box-shadow: 0 0 0 3px rgba(15,107,76,.18); }

    .btn {
      border: 1px solid transparent; border-radius: 10px;
      padding: 9px 14px; font-size: 0.9rem; cursor: pointer;
      font-family: inherit; line-height: 1.2;
      transition: background .15s, border-color .15s, transform .05s;
    }
    .btn:active { transform: translateY(1px); }
    .btn-primary {
      background: var(--accent); color: #fff; border-color: var(--accent);
    }
    .btn-primary:hover { background: var(--accent-2); }
    .btn-primary:disabled { opacity: .65; cursor: wait; }
    .btn-ghost {
      background: #fff; color: var(--text); border-color: var(--border);
    }
    .btn-ghost:hover { background: var(--soft); }
    .btn-google {
      background: #fff; color: #1f1f1f; border-color: #dadce0;
      font-weight: 600; display: inline-flex; align-items: center; gap: 8px;
    }
    .btn-google:hover { background: #f8f9fa; border-color: #c6c9ce; }
    .btn-google .g {
      width: 18px; height: 18px; border-radius: 4px;
      background: linear-gradient(135deg,#ea4335 0 25%,#fbbc05 25% 50%,#34a853 50% 75%,#4285f4 75%);
      display: inline-block;
    }

    .search-row {
      grid-column: 1 / -1;
      display: flex; gap: 8px; align-items: center;
    }
    .search-row input {
      flex: 1; min-width: 0;
      border: 1px solid var(--border); border-radius: 12px;
      padding: 12px 14px; font-size: 1rem; outline: none;
      background: var(--soft-2); font-family: inherit;
    }
    .search-row input:focus {
      border-color: #8bb6d9; background: #fff;
      box-shadow: 0 0 0 3px rgba(42,111,173,.15);
    }

    /* Main two panels */
    .shell {
      flex: 1; display: grid;
      grid-template-columns: var(--tree-w) 1fr;
      gap: 12px; padding: 12px; min-height: 0; overflow: hidden;
    }
    .panel {
      background: var(--panel); border: 1px solid var(--border);
      border-radius: var(--radius); box-shadow: var(--shadow);
      display: flex; flex-direction: column; min-height: 0; overflow: hidden;
    }
    .panel-head {
      padding: 14px 16px 10px; border-bottom: 1px solid var(--border);
      background: var(--soft-2); flex: 0 0 auto;
    }
    .panel-head h2 {
      margin: 0 0 2px; font-size: 1.05rem; font-weight: 700;
    }
    .panel-head p {
      margin: 0; color: var(--muted); font-size: 0.82rem; line-height: 1.45;
    }
    .panel-body { flex: 1; overflow: auto; padding: 8px 8px 20px; }

    /* Tree */
    .tree ul { list-style: none; margin: 0; padding: 0; }
    .tree ul ul { padding-right: 14px; border-right: 1px dashed #e3eaf2; margin-right: 9px; }
    .tree-row {
      display: flex; align-items: center; gap: 6px;
      padding: 8px 10px; border-radius: 10px; cursor: pointer;
      font-size: 0.95rem; line-height: 1.35; margin: 1px 0;
    }
    .tree-row:hover { background: var(--soft); }
    .tree-row.selected {
      background: var(--selected); font-weight: 700;
      outline: 1px solid #b7d4ec;
    }
    .twisty {
      width: 22px; height: 22px; flex: 0 0 22px;
      display: inline-flex; align-items: center; justify-content: center;
      color: var(--muted); font-size: 0.75rem;
      border-radius: 6px;
    }
    .twisty:hover { background: rgba(26,77,124,.08); color: var(--accent); }
    .twisty.empty { visibility: hidden; }
    .folder-icon { font-size: 1rem; }
    .folder-name {
      flex: 1; min-width: 0; overflow: hidden;
      text-overflow: ellipsis; white-space: nowrap;
    }
    .file-count {
      color: var(--muted); font-size: 0.78rem; flex: 0 0 auto;
      background: #eef3f8; padding: 2px 8px; border-radius: 999px;
      font-variant-numeric: tabular-nums;
    }
    .tree-row.selected .file-count { background: #fff; }

    /* Content */
    .crumb {
      font-size: 0.84rem; color: var(--muted); margin: 4px 8px 8px;
      word-break: break-word; line-height: 1.5;
    }
    .crumb span { cursor: pointer; color: var(--accent-2); font-weight: 500; }
    .crumb span:hover { text-decoration: underline; }
    .content-title {
      margin: 0 8px 6px; font-size: 1.45rem; font-weight: 750;
      letter-spacing: -0.015em; line-height: 1.25;
    }
    .content-meta {
      color: var(--muted); font-size: 0.9rem;
      margin: 0 8px 14px; line-height: 1.45;
    }
    .section-label {
      font-size: 0.8rem; font-weight: 700; color: var(--muted);
      text-transform: none; letter-spacing: 0.02em;
      margin: 8px 8px 8px; padding-top: 4px;
    }
    .toc-link {
      display: inline-flex; align-items: center; gap: 6px;
      margin: 0 8px 14px; padding: 9px 14px;
      background: var(--soft); color: var(--accent);
      border: 1px solid #c5daf0; border-radius: 10px;
      text-decoration: none; font-size: 0.9rem; font-weight: 600;
    }
    .toc-link:hover { background: #dceaf7; }

    .file-list { list-style: none; margin: 0; padding: 0 4px; }
    .file-item {
      display: flex; align-items: center; gap: 12px;
      padding: 12px 14px; border: 1px solid var(--border);
      border-radius: 12px; margin-bottom: 8px;
      background: #fff; cursor: pointer;
      transition: background .12s, border-color .12s, box-shadow .12s;
    }
    .file-item:hover {
      background: var(--soft); border-color: #b8d0e8;
      box-shadow: 0 2px 8px rgba(26,77,124,.06);
    }
    .file-icon {
      width: 40px; height: 40px; border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      font-size: 0.68rem; font-weight: 800; color: #fff; flex: 0 0 40px;
      text-transform: uppercase; letter-spacing: 0.02em;
    }
    .ext-pdf { background: #c0392b; }
    .ext-doc, .ext-docx { background: #2b579a; }
    .ext-xls, .ext-xlsx { background: #217346; }
    .ext-ppt, .ext-pptx { background: #d24726; }
    .ext-jpg, .ext-jpeg, .ext-png, .ext-heic, .ext-gif, .ext-webp { background: #7d3c98; }
    .ext-key { background: #555; }
    .ext-dwf { background: #16a085; }
    .ext-folder { background: var(--accent); font-size: 1.1rem; }
    .ext-default { background: #64748b; }
    .file-body { flex: 1; min-width: 0; }
    .file-name { font-size: 0.98rem; word-break: break-word; font-weight: 550; line-height: 1.35; }
    .file-path { font-size: 0.78rem; color: var(--muted); margin-top: 3px; }
    .file-open {
      font-size: 0.82rem; color: var(--accent); white-space: nowrap;
      font-weight: 600; padding: 4px 2px;
    }
    .badge-shortcut {
      display: inline-block; margin-inline-start: 6px;
      padding: 2px 8px; border-radius: 999px;
      background: var(--warn-bg); color: var(--warn);
      font-size: 0.72rem; font-weight: 700; vertical-align: middle;
    }
    .badge-demo {
      display: inline-block; margin-inline-start: 6px;
      padding: 2px 8px; border-radius: 999px;
      background: #eee; color: #666; font-size: 0.72rem; font-weight: 600;
    }

    .empty {
      margin: 12px 8px; padding: 36px 18px; text-align: center;
      color: var(--muted); border: 1px dashed var(--border);
      border-radius: var(--radius); background: var(--soft-2);
      line-height: 1.55; font-size: 0.95rem;
    }
    .search-banner {
      margin: 4px 8px 12px; background: var(--soft);
      border: 1px solid #c5d9eb; border-radius: 12px;
      padding: 12px 14px; font-size: 0.95rem; font-weight: 600;
    }

    .gate {
      margin-bottom: 14px;
      margin: 8px; padding: 18px 16px; border-radius: 12px;
      background: #fff8eb; border: 1px solid #f0d9a8;
      color: #6b4e10; font-size: 0.92rem; line-height: 1.55;
    }
    .gate strong { display: block; margin-bottom: 4px; font-size: 1rem; }

    .footer-note {
      font-size: 0.78rem; color: var(--muted);
      padding: 10px 18px 14px; text-align: center; line-height: 1.45;
    }

    .toast {
      position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
      background: #152033; color: #fff; padding: 14px 18px;
      border-radius: 12px; font-size: 0.92rem;
      box-shadow: 0 12px 32px rgba(0,0,0,.28);
      z-index: 80; max-width: min(520px, 92vw); text-align: center;
      display: none; line-height: 1.45;
    }
    .toast.show { display: block; animation: fadein .2s; }
    @keyframes fadein {
      from { opacity: 0; transform: translateX(-50%) translateY(10px); }
    }

    .mobile-bar { display: none; padding: 0 12px 0; }
    .backdrop {
      display: none; position: fixed; inset: 0;
      background: rgba(15,23,42,.35); z-index: 40;
    }
    .backdrop.show { display: block; }

    @media (max-width: 860px) {
      .shell {
        grid-template-columns: 1fr;
        padding: 10px; gap: 10px;
      }
      .tree-panel {
        position: fixed; top: 0; right: 0; bottom: 0;
        width: min(88vw, 360px); z-index: 50;
        border-radius: 14px 0 0 14px;
        transform: translateX(105%);
        transition: transform .22s ease;
        box-shadow: -8px 0 32px rgba(0,0,0,.18);
      }
      .tree-panel.open { transform: translateX(0); }
      .mobile-bar { display: block; }
      .brand h1 { font-size: 1.15rem; }
      .topbar { padding: 12px 14px 10px; }
      .content-title { font-size: 1.25rem; }
    }

    /* Connect overlay gate */
    .connect-overlay {
      position: fixed; inset: 0; z-index: 80;
      background: rgba(15, 23, 42, 0.45);
      display: flex; align-items: center; justify-content: center;
      padding: 20px;
      backdrop-filter: blur(2px);
    }
    .connect-overlay.hidden { display: none; }
    .connect-card {
      background: #fff; border-radius: 18px; max-width: 440px; width: 100%;
      padding: 28px 24px 22px; box-shadow: 0 16px 48px rgba(15,23,42,.2);
      text-align: center; direction: rtl;
    }
    .connect-card .big-icon {
      width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 14px;
      background: var(--ok-bg); display: flex; align-items: center; justify-content: center;
      font-size: 1.6rem;
    }
    .connect-card h2 { margin: 0 0 8px; font-size: 1.35rem; font-weight: 700; }
    .connect-card .lead { margin: 0 0 16px; color: var(--muted); font-size: 0.95rem; line-height: 1.45; }
    .connect-card ul {
      list-style: none; margin: 0 0 18px; padding: 0; text-align: right; font-size: 0.9rem;
    }
    .connect-card li {
      padding: 9px 0; border-bottom: 1px solid var(--border);
      display: flex; gap: 10px; align-items: flex-start;
    }
    .connect-card li:last-child { border-bottom: none; }
    .connect-card .num {
      flex: 0 0 22px; height: 22px; border-radius: 50%;
      background: var(--accent); color: #fff; font-size: 0.75rem; font-weight: 700;
      display: inline-flex; align-items: center; justify-content: center;
    }
    .connect-card .mock-note {
      margin-top: 12px; font-size: 0.78rem; color: var(--muted);
      background: var(--soft-2); border-radius: 10px; padding: 10px 12px; text-align: right;
    }
    .howto {
      background: var(--soft); border-bottom: 1px solid var(--border);
      padding: 9px 18px; font-size: 0.86rem; color: var(--accent);
      display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center;
    }
    .howto .n {
      display: inline-flex; width: 18px; height: 18px; border-radius: 50%;
      background: var(--accent); color: #fff; font-size: 0.7rem; font-weight: 700;
      align-items: center; justify-content: center; margin-inline-end: 4px;
    }

/* Preview panel */
.preview-wrap {
  margin: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}
.preview-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}
.preview-toolbar .file-name-big {
  font-weight: 700;
  font-size: 1.05rem;
  flex: 1;
  min-width: 0;
  word-break: break-word;
}
.preview-frame-wrap {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #f0f3f7;
  overflow: hidden;
  min-height: 420px;
  height: min(70vh, 720px);
  position: relative;
}
.preview-frame-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}
.preview-blocked {
  padding: 28px 18px;
  text-align: center;
  color: var(--muted);
  line-height: 1.55;
}
.file-item.selected-file {
  background: var(--selected);
  border-color: #b7d4ec;
}
.twisty.loading {
  animation: spin 0.8s linear infinite;
  visibility: visible !important;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.err-banner {
  margin: 8px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #fdecea;
  border: 1px solid #f5c2c0;
  color: #8a1f11;
  font-size: 0.92rem;
  line-height: 1.5;
}
.mode-pill {
  display: inline-block;
  margin-inline-start: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
}