/* ════════════════════════════════════════════════
   TaskHub — Dark + Light Theme
   ════════════════════════════════════════════════ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg:       #0a0a0f;
  --surface:  #13131f;
  --surface2: #1c1c2e;
  --border:   #2a2a40;
  --primary:  #818cf8;
  --primary-d:#6366f1;
  --accent:   #34d399;
  --danger:   #f87171;
  --warn:     #fbbf24;
  --text:     #f1f5f9;
  --muted:    #64748b;
  --muted2:   #94a3b8;
  --radius:   14px;
  --radius-sm:8px;
  --shadow:   0 4px 20px rgba(0,0,0,.4);
  --shadow-lg:0 8px 40px rgba(0,0,0,.6);
  --header-h: 60px;
  --nav-h:    50px;
  --status-h: 26px;
  --font:     'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-size-ui:    14px;
  --font-size-notes: 14px;
}

/* ── Светлая тема ──────────────────────────────── */
[data-theme="light"]{
  --bg:       #e4e9f0;
  --surface:  #ffffff;
  --surface2: #f1f5f9;
  --border:   #d8e0ea;
  --primary:  #6366f1;
  --primary-d:#4f46e5;
  --accent:   #059669;
  --danger:   #ef4444;
  --warn:     #d97706;
  --text:     #0f172a;
  --muted:    #94a3b8;
  --muted2:   #64748b;
  --shadow:   0 4px 20px rgba(0,0,0,.08);
  --shadow-lg:0 8px 40px rgba(0,0,0,.12);
}
[data-theme="light"] #authScreen{
  background:radial-gradient(ellipse at 50% 0%,#e0e7ff 0%,#f1f5f9 70%);
}
[data-theme="light"] .list-card{box-shadow:0 2px 12px rgba(0,0,0,.07)}
[data-theme="light"] .note-card{box-shadow:0 2px 12px rgba(0,0,0,.07)}

/* ── Кнопка темы ──────────────────────────────── */
.btn-theme{
  background:none;border:1.5px solid var(--border);
  border-radius:var(--radius-sm);
  padding:6px 10px;font-size:17px;line-height:1;
  cursor:pointer;color:var(--text);
  transition:border-color .2s,background .2s;
}
.btn-theme:hover{background:var(--surface2);border-color:var(--muted)}

/* ── Danger zone ──────────────────────────────── */
.danger-zone{
  border:1.5px solid rgba(248,113,113,.3);
  border-radius:var(--radius);
  padding:20px;
  background:rgba(248,113,113,.05);
}
.danger-zone h3{color:var(--danger);margin-bottom:8px}
.danger-zone p{font-size:13px;color:var(--muted);margin-bottom:16px}

/* ── Export/Import ────────────────────────────── */
.data-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:0}
.data-actions .btn{flex:1;min-width:120px}

html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.55;min-height:100dvh;-webkit-tap-highlight-color:transparent}

/* ── Утилиты ─────────────────────────────────── */
.hidden{display:none!important}

/* ── Scrollbar ───────────────────────────────── */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--surface)}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--muted)}

/* ════ AUTH ═══════════════════════════════════ */
#authScreen{
  min-height:100dvh;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 0%,#1e1b4b 0%,#0a0a0f 70%);
  padding:24px;
}
.auth-box{
  width:100%;max-width:400px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:20px;
  padding:40px 32px;
  box-shadow:var(--shadow-lg);
  animation:fadeUp .4s ease both;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

.auth-logo{text-align:center;margin-bottom:32px}
.auth-logo-icon{
  width:60px;height:60px;
  background:linear-gradient(135deg,var(--primary),var(--primary-d));
  border-radius:16px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:28px;margin-bottom:12px;
  box-shadow:0 0 30px rgba(129,140,248,.3);
}
.auth-logo h1{font-size:26px;font-weight:800;letter-spacing:-0.5px;color:var(--text)}
.auth-logo p{font-size:14px;color:var(--muted2);margin-top:4px}

/* Форма */
.form-group{margin-bottom:16px}
.form-label{display:block;font-size:12px;font-weight:600;color:var(--muted2);text-transform:uppercase;letter-spacing:.6px;margin-bottom:6px}
.form-input{
  width:100%;padding:12px 14px;
  background:var(--surface2);
  border:1.5px solid var(--border);
  border-radius:var(--radius-sm);
  color:var(--text);font-size:var(--font-size-ui);font-family:var(--font);
  transition:border-color .2s,box-shadow .2s;
  outline:none;
}
.form-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(129,140,248,.15)}
.form-input::placeholder{color:var(--muted)}
.form-textarea{min-height:120px;resize:vertical;line-height:1.5}
.form-hint{font-size:12px;color:var(--muted);margin-top:5px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:12px 20px;border:none;border-radius:var(--radius-sm);
  font-size:var(--font-size-ui);font-weight:600;font-family:var(--font);
  cursor:pointer;transition:all .2s;white-space:nowrap;
}
.btn-block{width:100%;display:flex}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 0 20px rgba(129,140,248,.25)}
.btn-primary:hover{background:var(--primary-d);box-shadow:0 0 28px rgba(129,140,248,.4);transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{background:var(--surface2);color:var(--text);border:1.5px solid var(--border)}
.btn-ghost:hover{border-color:var(--muted);background:var(--border)}
.btn-danger{background:rgba(248,113,113,.15);color:var(--danger);border:1.5px solid rgba(248,113,113,.3)}
.btn-danger:hover{background:rgba(248,113,113,.25)}
.btn-sm{padding:7px 12px;font-size:13px}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}

.auth-toggle{text-align:center;margin-top:20px;font-size:14px;color:var(--muted2)}
.auth-toggle a{color:var(--primary);text-decoration:none;font-weight:600;cursor:pointer}
.auth-toggle a:hover{text-decoration:underline}

.error-msg{
  background:rgba(248,113,113,.1);color:var(--danger);
  border:1px solid rgba(248,113,113,.3);
  border-radius:var(--radius-sm);padding:10px 14px;
  font-size:14px;margin-bottom:16px;
}

/* ════ APP LAYOUT ═══════════════════════════════ */
#appScreen{display:none;min-height:100dvh;padding-bottom:80px}
#appScreen.active{display:block}

.app-header{
  position:fixed;top:0;left:0;right:0;
  height:var(--header-h);
  background:var(--surface);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;z-index:100;
}
.header-brand{display:flex;align-items:center;gap:10px}
.header-brand-icon{
  width:32px;height:32px;
  background:linear-gradient(135deg,var(--primary),var(--primary-d));
  border-radius:9px;display:flex;align-items:center;justify-content:center;
  font-size:16px;
}
.header-brand h1{font-size:18px;font-weight:800;letter-spacing:-0.3px}
.header-right{display:flex;align-items:center;gap:8px}
.header-user{font-size:13px;color:var(--muted2);max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.nav-tabs{
  position:fixed;top:var(--header-h);left:0;right:0;
  height:var(--nav-h);
  background:var(--surface);
  border-bottom:1px solid var(--border);
  display:flex;z-index:90;
}
.nav-tab{
  flex:1;border:none;background:none;
  color:var(--muted2);font-size:var(--font-size-ui);font-weight:600;font-family:var(--font);
  cursor:pointer;
  border-bottom:2px solid transparent;
  transition:all .2s;
  display:flex;align-items:center;justify-content:center;gap:6px;
}
@media(max-width:600px){
  .nav-tab{
    flex-direction:column;gap:2px;
    font-size:10px;padding:4px 2px;
    line-height:1.2;
  }
  .nav-tab .tab-icon{ font-size:18px;line-height:1; }
}
.nav-tab.active{color:var(--primary);border-bottom-color:var(--primary)}
.nav-tab:hover:not(.active){color:var(--text);background:rgba(255,255,255,.04)}

#content{
  margin-top:calc(var(--header-h) + var(--nav-h) + var(--status-h));
  max-width:820px;margin-left:auto;margin-right:auto;
  padding:20px 14px;
}

/* FAB */
.fab{
  position:fixed;bottom:22px;right:18px;
  width:56px;height:56px;border-radius:50%;border:none;
  background:var(--primary);color:#fff;font-size:26px;
  box-shadow:0 4px 20px rgba(129,140,248,.45);
  cursor:pointer;z-index:1000;
  display:flex;align-items:center;justify-content:center;
  transition:all .25s cubic-bezier(.34,1.26,.64,1);
}
.fab:hover{background:var(--primary-d);transform:scale(1.1) rotate(45deg)}
.fab:active{transform:scale(.95)}

/* ════ EMPTY STATE ══════════════════════════════ */
.empty{text-align:center;padding:72px 16px}
.empty-icon{font-size:56px;margin-bottom:16px;opacity:.6}
.empty h3{font-size:18px;font-weight:700;color:var(--text);margin-bottom:6px}
.empty p{font-size:14px;color:var(--muted)}

/* ════ LISTS ════════════════════════════════════ */
.list-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  margin-bottom:12px;
  overflow:hidden;
  transition:box-shadow .2s,border-color .2s;
  position:relative;
}
.list-card:hover{border-color:var(--muted);box-shadow:var(--shadow)}
.list-stripe{position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:var(--radius) 0 0 var(--radius)}
.list-head{
  display:flex;align-items:center;
  padding:14px 12px 14px 18px;gap:10px;
}
.list-head-info{flex:1;cursor:pointer;min-width:0;user-select:none}
.list-head-info:hover{opacity:.8}
.list-title{font-size:var(--font-size-ui);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:3px}
.list-meta{font-size:12px;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap}
.list-meta span{display:flex;align-items:center;gap:3px}
.list-actions{display:flex;flex-direction:column;gap:2px;flex-shrink:0}

.icon-btn{
  width:30px;height:30px;border-radius:8px;border:none;
  cursor:pointer;font-size:15px;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;flex-shrink:0;background:transparent;
}
.icon-btn:hover{transform:scale(1.12)}
.icon-btn-edit{color:var(--primary)}
.icon-btn-edit:hover{background:rgba(129,140,248,.15)}
.icon-btn-del{color:var(--danger)}
.icon-btn-del:hover{background:rgba(248,113,113,.15)}
.icon-btn-share{color:var(--accent)}
.icon-btn-share:hover{background:rgba(52,211,153,.15)}

/* Кнопка Админка */
.btn-admin{
  display:flex;align-items:center;gap:5px;
  padding:5px 12px;border-radius:8px;border:none;cursor:pointer;
  font-size:13px;font-weight:600;
  background:rgba(248,113,113,.15);color:#f87171;
  border:1px solid rgba(248,113,113,.3);
  transition:all .18s;white-space:nowrap;
}
.btn-admin:hover{ background:rgba(248,113,113,.28);border-color:#f87171; }
.icon-btn-leave{
  color:#fff;
  background:rgba(248,113,113,.25);
  border:1px solid rgba(248,113,113,.4);
  font-size:13px;
  font-weight:700;
}
.icon-btn-leave:hover{background:rgba(248,113,113,.6);color:#fff;border-color:var(--danger)}

/* ════ Шаринг ═══════════════════════════════ */
.section-sep{
  font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;
  padding:12px 2px 6px;margin-top:8px;border-top:1px solid var(--border);
}
.list-card-shared{ opacity:.95; }
.list-card-shared .list-stripe{ opacity:.7; }
.note-card-shared{ opacity:.95; }
.share-owner-badge{
  display:inline-block;font-size:11px;color:var(--primary);background:rgba(129,140,248,.12);
  padding:1px 6px;border-radius:6px;font-weight:500;
}
.shared-badge{
  display:inline-flex;align-items:center;gap:3px;
  font-size:11px;font-weight:600;
  color:#34d399;background:rgba(52,211,153,.15);
  border:1px solid rgba(52,211,153,.3);
  padding:1px 7px;border-radius:6px;
}
.note-shared-badge{
  display:inline-flex;margin-bottom:5px;
}
.note-owner-b{
  display:block;font-size:11px;margin-bottom:4px;
}
.perm-badge{
  display:inline-block;font-size:11px;padding:1px 6px;border-radius:6px;font-weight:500;
}
.perm-badge.perm-view{ color:var(--muted2);background:rgba(148,163,184,.12); }
.perm-badge.perm-edit{ color:var(--primary);background:rgba(129,140,248,.12); }
.perm-badge.perm-full{ color:var(--accent);background:rgba(52,211,153,.12); }
.share-section{
  background:var(--surface2);border:1px solid var(--border);border-radius:10px;
  padding:14px;margin-bottom:12px;
}

/* ════ Контакты ══════════════════════════════ */
.friend-row{
  display:flex;align-items:center;gap:10px;
  padding:9px 0;border-bottom:1px solid var(--border);
}
.friend-row:last-child{ border-bottom:none; }
.friend-avatar{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;
  background:var(--primary);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:700;
}
.friend-info{ flex:1;min-width:0; }
.friend-name{ font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.friend-email{ font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.friend-del-btn{ color:var(--muted);font-size:14px;padding:4px 8px;flex-shrink:0; }
.friend-del-btn:hover{ color:var(--danger);background:rgba(248,113,113,.12); }

/* Быстрый выбор в модале шаринга */
.friends-quick-list{
  display:flex;flex-wrap:wrap;gap:6px;margin-top:4px;
}
.friend-chip{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:20px;padding:4px 10px 4px 5px;
  font-size:12px;cursor:pointer;transition:all .18s;
}
.friend-chip:hover{ border-color:var(--primary);background:rgba(129,140,248,.1); }
.friend-chip-av{
  width:20px;height:20px;border-radius:50%;
  background:var(--primary);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;flex-shrink:0;
}
.friend-chip-done{
  border-color:var(--accent);background:rgba(52,211,153,.12);
  pointer-events:none;opacity:.7;
}
.friend-chip-done .friend-chip-av{ background:var(--accent); }

/* Активный (выбранный) чип */
.friend-chip-active{
  border-color:var(--primary);background:rgba(129,140,248,.18);
}
.friend-chip-active .friend-chip-av{ background:var(--primary); }

/* Очередь выбранных пользователей */
.share-queue{
  display:flex;flex-direction:column;gap:4px;margin-bottom:8px;
}
.share-queue-item{
  display:flex;align-items:center;gap:8px;
  background:rgba(129,140,248,.1);border:1px solid rgba(129,140,248,.25);
  border-radius:8px;padding:5px 8px;
}

.list-items{overflow:hidden;max-height:0;transition:max-height .3s ease}
.list-items.open{max-height:9999px}
.list-item{
  display:flex;align-items:center;gap:12px;
  padding:13px 14px 13px 18px;
  border-top:1px solid var(--border);
  transition:background .15s;
}
.list-item:hover{background:rgba(255,255,255,.03)}
.item-cb{width:22px;height:22px;accent-color:var(--primary);cursor:pointer;flex-shrink:0}
.item-text{flex:1;font-size:var(--font-size-notes);cursor:pointer;word-break:break-word;transition:color .2s;padding:2px 0;min-height:24px}
.list-item.done .item-text{text-decoration:line-through;color:var(--muted)}
.item-del-btn{
  flex-shrink:0;background:none;border:none;cursor:pointer;
  color:#94a3b8;font-size:13px;font-weight:600;
  padding:4px 6px;border-radius:6px;line-height:1;
  transition:color .15s,background .15s;
}
.item-del-btn:hover{color:#f87171;background:rgba(248,113,113,.12)}
.item-text.editing{
  outline:none;border-radius:4px;
  background:rgba(129,140,248,.1);padding:2px 6px;
}

/* Кнопка добавления пункта */
.list-add-row{
  display:flex;align-items:center;gap:8px;
  padding:4px 12px 10px 14px;
}
.list-add-inp{
  flex:1;background:none;border:none;border-bottom:1px solid var(--border);
  color:var(--text);font-size:var(--font-size-notes);padding:7px 4px;
  outline:none;transition:border-color .2s;
}
.list-add-inp:focus{border-color:var(--primary)}
.list-add-inp::placeholder{color:var(--muted)}
.list-add-btn{
  width:30px;height:30px;border-radius:50%;border:none;
  background:var(--primary);color:#fff;font-size:20px;line-height:1;
  cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  transition:opacity .15s;
}
.list-add-btn:hover{opacity:.85}
/* Progress bar */
.list-progress{
  height:3px;background:var(--border);
}
.list-progress-bar{height:3px;background:var(--accent);transition:width .4s ease;border-radius:0 2px 2px 0}

/* ════ NOTES GRID ═══════════════════════════════ */
.notes-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:12px;
}
.note-card{
  border-radius:var(--radius);overflow:hidden;cursor:pointer;
  box-shadow:var(--shadow);
  transition:transform .2s,box-shadow .2s;
  display:flex;flex-direction:column;min-height:130px;
  animation:fadeUp .3s ease both;
  border:1px solid rgba(255,255,255,.08);
}
.note-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.note-thumb{width:100%;height:110px;object-fit:cover;display:block;flex-shrink:0}
.note-body{flex:1;padding:12px}
.note-preview{flex:1;
  font-size:var(--font-size-notes);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:999;-webkit-box-orient:vertical;overflow:hidden;
  white-space:pre-wrap;word-break:break-word;
}
.note-foot{
  display:flex;justify-content:flex-end;gap:4px;
  padding:6px 10px 10px;
}

/* ════ MODAL ════════════════════════════════════ */
.modal-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.7);backdrop-filter:blur(4px);
  z-index:2000;align-items:center;justify-content:center;padding:16px;
}
.modal-overlay.open{display:flex}
.modal{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:20px;
  width:100%;max-width:520px;
  max-height:92dvh;overflow-y:auto;
  padding:24px;
  animation:fadeUp .3s cubic-bezier(.34,1.26,.64,1) both;
  box-shadow:var(--shadow-lg);
}
.modal-title{font-size:20px;font-weight:800;margin-bottom:20px}
.modal-actions{display:flex;gap:10px;margin-top:20px}
.modal-actions .btn{flex:1}

/* Colour swatches */
.swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:18px}
.swatch{
  aspect-ratio:1;border-radius:9px;cursor:pointer;
  border:2.5px solid transparent;transition:all .15s;
}
.swatch:hover{transform:scale(1.1)}
.swatch.sel{border-color:var(--text);transform:scale(1.1);box-shadow:0 0 0 2px var(--surface) inset}

/* BG swatches */
.bg-swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-bottom:18px}
.bg-swatch{aspect-ratio:1;border-radius:9px;cursor:pointer;border:2.5px solid transparent;transition:all .15s}
.bg-swatch:hover{transform:scale(1.1)}
.bg-swatch.sel{border-color:var(--text);transform:scale(1.1)}

/* ════ NOTE EDITOR OVERLAY ═══════════════════════ */
.editor-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.8);backdrop-filter:blur(6px);
  z-index:9000;
  display:flex;align-items:center;justify-content:center;padding:16px;
  animation:fadeIn .2s ease both;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.editor-box{
  width:100%;max-width:680px;
  height:min(88dvh,680px);
  border-radius:18px;overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:0 32px 80px rgba(0,0,0,.7);
  animation:fadeUp .3s cubic-bezier(.34,1.26,.64,1) both;
}
.editor-img-preview{width:100%;max-height:180px;object-fit:cover;display:block;flex-shrink:0}
.editor-textarea{
  flex:1;border:none;outline:none;resize:none;width:100%;
  padding:18px;font-size:var(--font-size-notes);line-height:1.6;font-family:var(--font);
  background:transparent;
}
.editor-bg-picker{
  display:none;padding:12px 14px;
  background:rgba(0,0,0,.3);flex-shrink:0;
}
.editor-bg-picker.open{display:block}
.editor-bg-picker-label{font-size:12px;font-weight:600;color:rgba(255,255,255,.6);margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px}
.editor-bg-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:5px}
.editor-bg-swatch{aspect-ratio:1;border-radius:6px;cursor:pointer;border:2px solid transparent;transition:all .12s}
.editor-bg-swatch:hover{transform:scale(1.12)}
.editor-bg-swatch.sel{border-color:#fff}
.editor-toolbar{
  display:flex;gap:7px;padding:10px 12px;
  background:rgba(0,0,0,.35);flex-wrap:wrap;flex-shrink:0;
}
.t-btn{
  flex:1;min-width:72px;padding:9px 12px;border:none;border-radius:8px;
  font-size:13px;font-weight:600;font-family:var(--font);cursor:pointer;
  transition:all .2s;white-space:nowrap;
}
.t-btn-bg   {background:rgba(129,140,248,.2);color:#fff}
.t-btn-bg:hover{background:rgba(129,140,248,.4)}
.t-btn-img  {background:rgba(52,211,153,.2);color:#fff}
.t-btn-img:hover{background:rgba(52,211,153,.4)}
.t-btn-rmimg{background:rgba(248,113,113,.2);color:#fff}
.t-btn-rmimg:hover{background:rgba(248,113,113,.4)}
.t-btn-save {background:rgba(255,255,255,.9);color:#0f172a}
.t-btn-save:hover{background:#fff}
.t-btn-close{background:rgba(255,255,255,.1);color:#fff}
.t-btn-close:hover{background:rgba(255,255,255,.2)}

/* ════ SETTINGS ═════════════════════════════════ */
.settings-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:24px;margin-bottom:14px;
}
.settings-card h3{font-size:16px;font-weight:700;margin-bottom:18px;color:var(--muted2)}

/* ════ TOAST ════════════════════════════════════ */
.toast-wrap{
  position:fixed;bottom:22px;left:50%;transform:translateX(-50%);
  z-index:99999;display:flex;flex-direction:column;gap:8px;
  pointer-events:none;width:min(320px,calc(100vw - 28px));
}
.toast{
  padding:11px 16px;border-radius:12px;font-size:14px;font-weight:600;
  text-align:center;
  animation:toastIn .3s cubic-bezier(.34,1.26,.64,1) both,
            toastOut .3s ease 3s both forwards;
}
.toast-ok {background:#052e16;color:#86efac;border:1px solid #166534}
.toast-err{background:#2d0a0a;color:#fca5a5;border:1px solid #7f1d1d}
@keyframes toastIn {from{opacity:0;transform:translateY(12px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes toastOut{from{opacity:1}to{opacity:0;transform:translateY(-8px)}}

/* ════ RESPONSIVE ════════════════════════════════ */
@media(max-width:480px){
  .auth-box{padding:28px 18px}
  #content{padding:14px 10px}
  .swatches{grid-template-columns:repeat(5,1fr)}
  .bg-swatches{grid-template-columns:repeat(5,1fr)}
  .editor-bg-grid{grid-template-columns:repeat(6,1fr)}
  .notes-grid{grid-template-columns:repeat(auto-fill,minmax(155px,1fr))}
  .editor-toolbar{gap:5px}
  .t-btn{font-size:12px;padding:8px 8px}
}

/* ── Оверлей редактирования пункта списка ── */
.item-edit-overlay{
  position:fixed;inset:0;z-index:1100;
  background:rgba(0,0,0,.65);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  animation:fadeIn .15s ease;
}
.item-edit-box{
  background:var(--surface);border:1px solid var(--border);
  border-radius:16px;padding:20px;width:100%;max-width:420px;
  box-shadow:0 16px 48px rgba(0,0,0,.5);
}
.item-edit-label{
  font-size:13px;font-weight:600;color:var(--muted);
  margin-bottom:12px;
}
.item-edit-inp{
  width:100%;background:var(--bg);border:1.5px solid var(--primary);
  border-radius:10px;color:var(--text);font-size:16px;
  padding:12px 14px;outline:none;box-sizing:border-box;
  margin-bottom:14px;
}
.item-edit-actions{
  display:flex;gap:8px;justify-content:flex-end;
}

/* ════ REMINDERS ════════════════════════════ */
.reminder-card{
  display:flex;align-items:flex-start;gap:14px;
  background:var(--surface);border-radius:14px;
  border:1px solid var(--border);
  padding:16px 14px;margin-bottom:10px;
  transition:border-color .2s,box-shadow .2s;
}
.reminder-card:hover{border-color:var(--primary);box-shadow:0 2px 16px rgba(129,140,248,.1);}
.reminder-card.reminder-past{opacity:.75;}
.reminder-card.reminder-sent{opacity:.6;}
.reminder-card-left{flex-shrink:0;}
.reminder-icon{font-size:24px;line-height:1;padding-top:2px;}
.reminder-card-body{flex:1;min-width:0;}
.reminder-title{font-size:var(--font-size-ui);font-weight:600;color:var(--text);margin-bottom:6px;word-break:break-word;}
.reminder-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.reminder-dt{font-size:13px;color:var(--muted);}
.reminder-phone{font-size:13px;color:var(--muted);}
.reminder-badge{font-size:11px;font-weight:600;padding:2px 8px;border-radius:20px;}
.reminder-badge.pending{background:rgba(250,204,21,.15);color:#fbbf24;}
.reminder-badge.sent{background:rgba(74,222,128,.15);color:#4ade80;}
.reminder-badge.past{background:rgba(248,113,113,.15);color:#f87171;}
.reminder-card-actions{display:flex;flex-direction:column;gap:6px;flex-shrink:0;}

/* ════ DRAG & DROP ══════════════════════════════════════════════ */
.dnd-dragging{
  opacity:.45;
  transform:scale(.97);
  transition:opacity .15s,transform .15s;
}
.dnd-over{
  outline:2px dashed var(--primary);
  outline-offset:2px;
  border-radius:var(--radius);
  background:rgba(129,140,248,.06);
}
.dnd-handle{
  cursor:grab;
  color:var(--muted);
  font-size:18px;
  padding:0 6px;
  flex-shrink:0;
  touch-action:none;
  user-select:none;
  opacity:.55;
  transition:opacity .15s;
}
.dnd-handle:hover,.dnd-handle:active{opacity:1;color:var(--primary);cursor:grabbing}
.dnd-placeholder{
  height:56px;
  border:2px dashed var(--primary);
  border-radius:var(--radius);
  background:rgba(129,140,248,.05);
  margin-bottom:10px;
  pointer-events:none;
}

/* ════ FILES SECTION ════════════════════════════════════════════ */
/* ── Toolbar ─────────────────────────────────── */
.files-toolbar{
  display:flex;align-items:center;gap:8px;
  margin-bottom:14px;flex-wrap:wrap;
}
.files-breadcrumb{
  flex:1;min-width:0;
  display:flex;align-items:center;flex-wrap:wrap;gap:4px;
  font-size:13px;color:var(--muted2);
}
.files-breadcrumb .bc-item{
  cursor:pointer;color:var(--primary);
  padding:2px 4px;border-radius:4px;white-space:nowrap;
}
.files-breadcrumb .bc-item:hover{background:rgba(129,140,248,.12)}
.files-breadcrumb .bc-sep{color:var(--border)}
.files-breadcrumb .bc-current{color:var(--text);font-weight:600;cursor:default}
.files-view-btns{
  display:flex;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;
}
.files-view-btn{
  background:none;border:none;padding:7px 10px;cursor:pointer;
  color:var(--muted);font-size:15px;transition:background .15s,color .15s;
}
.files-view-btn.active,.files-view-btn:hover{background:var(--surface2);color:var(--primary)}

/* ── Sections (spoiler) ──────────────────────── */
.files-section-hdr{
  display:flex;align-items:center;gap:8px;
  padding:10px 4px;cursor:pointer;
  font-size:13px;font-weight:700;color:var(--muted2);
  letter-spacing:.04em;text-transform:uppercase;
  user-select:none;
}
.files-section-hdr:hover{color:var(--text)}
.files-section-hdr .sec-arrow{
  font-size:10px;transition:transform .2s;display:inline-block;
}
.files-section-hdr.collapsed .sec-arrow{transform:rotate(-90deg)}
.files-section-body{overflow:hidden;transition:max-height .25s ease}
.files-section-body.collapsed{max-height:0!important}

/* ── Storage shares list ─────────────────────── */
.storage-share-item{
  display:flex;align-items:center;gap:12px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:12px;padding:12px 14px;margin-bottom:8px;cursor:pointer;
  transition:border-color .2s,box-shadow .2s;
}
.storage-share-item:hover{border-color:var(--primary);box-shadow:0 2px 16px rgba(129,140,248,.1)}
.storage-share-avatar{
  width:38px;height:38px;border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--primary-d));
  display:flex;align-items:center;justify-content:center;
  font-size:17px;font-weight:700;color:#fff;flex-shrink:0;
}
.storage-share-info{flex:1;min-width:0}
.storage-share-name{font-weight:600;font-size:14px;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.storage-share-email{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── File grid (icons view) ──────────────────── */
.files-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(90px,1fr));
  gap:10px;margin-bottom:12px;
}
.file-icon-card{
  display:flex;flex-direction:column;align-items:center;
  background:var(--surface);border:1px solid var(--border);
  border-radius:12px;padding:14px 8px 10px;
  cursor:pointer;transition:border-color .2s,box-shadow .2s,background .15s;
  user-select:none;-webkit-user-select:none;
  text-align:center;word-break:break-word;
}
.file-icon-card:hover,.file-icon-card.ctx-open{
  border-color:var(--primary);box-shadow:0 2px 16px rgba(129,140,248,.15);
  background:var(--surface2);
}
.file-icon-emoji{font-size:32px;margin-bottom:8px;line-height:1}
.file-icon-name{font-size:11px;color:var(--text);max-height:32px;overflow:hidden;line-height:1.35;word-break:break-all}

/* ── File list (list view) ───────────────────── */
.files-list{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.file-row{
  display:flex;align-items:center;gap:12px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:12px;padding:11px 14px;
  cursor:pointer;transition:border-color .2s,box-shadow .2s;
  user-select:none;-webkit-user-select:none;
}
.file-row:hover,.file-row.ctx-open{border-color:var(--primary);box-shadow:0 2px 12px rgba(129,140,248,.1)}
.file-row-icon{font-size:22px;flex-shrink:0;width:28px;text-align:center}
.file-row-info{flex:1;min-width:0}
.file-row-name{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-row-meta{font-size:12px;color:var(--muted);margin-top:2px}
.file-row-dnd{order:-1}

/* ── File details (table view) ───────────────── */
.files-table{width:100%;border-collapse:collapse;margin-bottom:12px}
.files-table th{
  text-align:left;font-size:11px;font-weight:700;letter-spacing:.05em;
  color:var(--muted);padding:6px 10px;border-bottom:1px solid var(--border);
  text-transform:uppercase;
}
.files-table td{padding:9px 10px;border-bottom:1px solid rgba(255,255,255,.04);font-size:13px;vertical-align:middle}
.files-table tr:last-child td{border-bottom:none}
.files-table tr{cursor:pointer;user-select:none;-webkit-user-select:none;transition:background .15s}
.files-table tr:hover,.files-table tr.ctx-open{background:var(--surface2)}
.files-table .ft-icon{width:32px}
.files-table .ft-size{color:var(--muted);white-space:nowrap}
.files-table .ft-date{color:var(--muted);white-space:nowrap;font-size:12px}

/* ── Context menu modal ──────────────────────── */
.ctx-menu-overlay{
  position:fixed;inset:0;z-index:1200;
  background:rgba(0,0,0,.55);backdrop-filter:blur(4px);
  display:none;align-items:flex-end;justify-content:center;padding:0;
}
.ctx-menu-overlay.open{display:flex}
.ctx-menu{
  background:var(--surface);border:1px solid var(--border);
  border-radius:20px 20px 0 0;padding:16px;width:100%;max-width:520px;
  animation:slideUp .22s ease both;
}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.ctx-menu-header{
  display:flex;align-items:center;gap:10px;padding:8px 4px 16px;
  border-bottom:1px solid var(--border);margin-bottom:10px;
}
.ctx-menu-file-icon{font-size:28px}
.ctx-menu-file-name{font-size:15px;font-weight:700;flex:1;min-width:0;word-break:break-all}
.ctx-menu-file-size{font-size:12px;color:var(--muted);margin-top:2px}
.ctx-menu-item{
  display:flex;align-items:center;gap:14px;
  padding:14px 8px;border-radius:10px;cursor:pointer;
  font-size:15px;transition:background .15s;color:var(--text);
}
.ctx-menu-item:hover{background:var(--surface2)}
.ctx-menu-item.danger{color:var(--danger)}
.ctx-menu-item.ctx-menu-item-primary{font-weight:700}
.ctx-menu-item-icon{font-size:20px;width:28px;text-align:center;flex-shrink:0}

/* ── Upload progress overlay ─────────────────── */
.upload-overlay{
  position:fixed;bottom:80px;left:50%;transform:translateX(-50%);
  background:var(--surface);border:1px solid var(--border);
  border-radius:16px;padding:16px 20px;min-width:280px;max-width:90vw;
  box-shadow:var(--shadow-lg);z-index:1300;
  display:none;
}
.upload-overlay.active{display:block;animation:fadeUp .2s ease}
.upload-title{font-size:13px;font-weight:700;margin-bottom:10px;color:var(--text)}
.upload-item{margin-bottom:8px}
.upload-item-name{font-size:12px;color:var(--muted2);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.upload-bar-wrap{background:var(--border);border-radius:4px;height:6px;overflow:hidden}
.upload-bar{height:100%;background:var(--primary);border-radius:4px;transition:width .15s linear;width:0}
.upload-item.done .upload-bar{background:var(--accent)}
.upload-item.error .upload-bar{background:var(--danger)}

/* ── FAB dropdown for Files ──────────────────── */
.fab-files-menu{
  position:fixed;bottom:80px;right:20px;
  display:flex;flex-direction:column-reverse;gap:8px;
  z-index:900;
}
.fab-files-btn{
  width:48px;height:48px;border-radius:50%;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;box-shadow:var(--shadow);transition:transform .2s,opacity .2s;
  background:var(--surface2);color:var(--text);border:1px solid var(--border);
  opacity:0;pointer-events:none;transform:scale(.7);
}
.fab-files-menu.open .fab-files-btn{opacity:1;pointer-events:auto;transform:scale(1)}
.fab-files-label{
  position:absolute;right:58px;white-space:nowrap;
  background:var(--surface);border:1px solid var(--border);
  border-radius:8px;padding:4px 10px;font-size:12px;font-weight:600;
  pointer-events:none;opacity:0;transition:opacity .2s;
}
.fab-files-menu.open .fab-files-label{opacity:1}

/* ── Details view (div-based, поддерживает DnD) ─ */
.files-details{ display:flex;flex-direction:column;gap:0;margin-bottom:12px }
.files-details-hdr{
  display:flex;align-items:center;gap:0;
  padding:5px 10px;
  font-size:11px;font-weight:700;letter-spacing:.05em;
  color:var(--muted);text-transform:uppercase;
  border-bottom:1px solid var(--border);
}
.fd-row{
  display:flex;align-items:center;gap:0;
  border-radius:0;border-left:none;border-right:none;border-top:none;
  border-bottom:1px solid rgba(255,255,255,.04);
  padding:10px 10px;
}
.fd-row:first-of-type{ border-top:none }
.fd-row:last-of-type{ border-bottom:none; border-radius:0 0 10px 10px }
.files-details .fd-row:first-of-type{ border-radius:10px 10px 0 0 }
.fd-icon{ width:32px;flex-shrink:0;font-size:16px;cursor:grab;color:var(--muted);opacity:.55 }
.fd-name{ flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px }
.fd-size{ width:80px;flex-shrink:0;color:var(--muted);font-size:12px;text-align:right }
.fd-date{ width:90px;flex-shrink:0;color:var(--muted);font-size:12px;text-align:right }
@media(max-width:480px){ .fd-size{display:none}.fd-date{width:70px} }

/* ══════════════════════════════════════════════════════════════
   ОФЛАЙН-РЕЖИМ + БРАУЗЕРНЫЕ НАПОМИНАНИЯ
   ══════════════════════════════════════════════════════════════ */

/* ── Индикатор состояния сети (фикс. полоса сверху) ───────────── */
/* Статичный индикатор соединения — встроен под навигацией, не перекрывает шапку */
.net-status{
  position:fixed;
  top:calc(var(--header-h) + var(--nav-h));
  left:0; right:0;
  height:var(--status-h);
  z-index:999;
  padding:4px 14px;
  font-size:12px; font-weight:600; text-align:center;
  letter-spacing:.01em;
  transition:background .3s, color .3s;
  background:var(--surface2); color:var(--muted2);
  border-bottom:1px solid var(--border);
  display:block !important;
  box-sizing:border-box;
}
.net-status.net-none{ background:rgba(239,68,68,.16);  color:#f87171; }
.net-status.net-poor{ background:rgba(245,158,11,.18); color:#f59e0b; }
.net-status.net-good{ background:rgba(34,197,94,.14);  color:#22c55e; }
.net-status.net-sync{ background:rgba(99,102,241,.16); color:#818cf8; }

/* ── Модалка срабатывания напоминания ────────────────────────── */
.reminder-fire-overlay{
  position:fixed; inset:0; z-index:5000;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  background:rgba(10,10,20,.72);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  animation:rfFadeIn .25s ease both;
}
.reminder-fire-overlay.closing{ animation:rfFadeOut .2s ease both; }

.reminder-fire-card{
  position:relative;
  width:100%; max-width:380px;
  border-radius:24px;
  padding:34px 26px 26px;
  text-align:center;
  color:#fff;
  background:linear-gradient(150deg,#6d5efc 0%,#8b5cf6 45%,#ec4899 100%);
  box-shadow:0 24px 70px rgba(124,94,247,.55), 0 0 0 1px rgba(255,255,255,.08) inset;
  animation:rfPop .42s cubic-bezier(.34,1.56,.64,1) both;
  overflow:hidden;
}
.reminder-fire-card::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 0%,rgba(255,255,255,.25),transparent 60%);
  pointer-events:none;
}
.reminder-fire-bell{
  font-size:54px; line-height:1;
  margin-bottom:10px;
  animation:rfBell 1s ease-in-out infinite;
  transform-origin:50% 0%;
}
.reminder-fire-label{
  font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  opacity:.85; margin-bottom:10px;
}
.reminder-fire-title{
  font-size:22px; font-weight:800; line-height:1.25;
  margin-bottom:8px; word-break:break-word;
}
.reminder-fire-time{
  font-size:14px; opacity:.9; margin-bottom:22px;
}
.reminder-fire-snooze{
  display:flex; gap:8px; justify-content:center; margin-bottom:14px; flex-wrap:wrap;
}
.rf-snooze-btn{
  flex:1; min-width:84px;
  padding:11px 8px;
  border:none; border-radius:13px;
  background:rgba(255,255,255,.18);
  color:#fff; font-size:14px; font-weight:600; cursor:pointer;
  transition:background .15s, transform .1s;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.rf-snooze-btn:hover{ background:rgba(255,255,255,.3); }
.rf-snooze-btn:active{ transform:scale(.95); }
.reminder-fire-actions{ display:flex; }
.rf-btn{
  flex:1; padding:14px;
  border:none; border-radius:14px;
  font-size:15px; font-weight:700; cursor:pointer;
  transition:transform .1s, box-shadow .15s;
}
.rf-btn:active{ transform:scale(.97); }
.rf-dismiss{
  background:#fff; color:#7c3aed;
  box-shadow:0 6px 18px rgba(0,0,0,.2);
}
.rf-dismiss:hover{ box-shadow:0 8px 24px rgba(0,0,0,.28); }

@keyframes rfFadeIn{ from{opacity:0} to{opacity:1} }
@keyframes rfFadeOut{ from{opacity:1} to{opacity:0} }
@keyframes rfPop{ 0%{transform:scale(.8) translateY(20px);opacity:0} 100%{transform:scale(1) translateY(0);opacity:1} }
@keyframes rfBell{
  0%,100%{ transform:rotate(0) }
  15%{ transform:rotate(14deg) }
  30%{ transform:rotate(-12deg) }
  45%{ transform:rotate(9deg) }
  60%{ transform:rotate(-6deg) }
  75%{ transform:rotate(3deg) }
}

/* Бейдж «не синхронизировано» уже использует .reminder-badge.pending */
[data-theme="light"] .reminder-fire-card{
  box-shadow:0 24px 70px rgba(124,94,247,.4), 0 0 0 1px rgba(255,255,255,.2) inset;
}

/* ── Выбор получателя в модалке напоминания ──────────────────── */
.rem-recipient-tabs{ display:flex; gap:8px; }
.rem-rcp-tab{
  flex:1; padding:10px;
  border:1px solid var(--border); border-radius:11px;
  background:var(--surface2); color:var(--muted2);
  font-size:14px; font-weight:600; cursor:pointer;
  transition:all .15s;
}
.rem-rcp-tab.active{
  background:var(--primary); color:#fff; border-color:var(--primary);
}
.rem-rcp-tab:active{ transform:scale(.97); }

/* ── Бейджи «от / для» на карточке напоминания ───────────────── */
.reminder-badge.rel-in{  background:rgba(52,211,153,.16); color:#34d399; }
.reminder-badge.rel-out{ background:rgba(129,140,248,.16); color:#818cf8; }

/* ══════════════════════════════════════════════════════════════
   ОБУЧЕНИЕ (онбординг-тур)
   ══════════════════════════════════════════════════════════════ */
.onb-overlay{
  position:fixed; inset:0; z-index:6000;
  animation:onbFade .25s ease both;
}
.onb-overlay.onb-closing{ animation:onbFadeOut .2s ease both; }

/* Затемнение через большую тень вокруг «дырки»-подсветки */
.onb-spot{
  position:fixed; display:none;
  border-radius:14px;
  box-shadow:0 0 0 9999px rgba(8,8,16,.74);
  border:2px solid var(--primary);
  transition:all .25s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
  z-index:6001;
}
/* Когда цели нет — затемняем весь экран отдельным слоем */
.onb-overlay::before{
  content:''; position:fixed; inset:0;
  background:rgba(8,8,16,.74);
  opacity:0; transition:opacity .2s;
  pointer-events:none;
}
.onb-overlay.onb-dim::before{ opacity:1; }

.onb-pop{
  position:fixed; z-index:6002;
  width:min(340px, calc(100vw - 32px));
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:18px;
  padding:20px;
  box-shadow:0 18px 50px rgba(0,0,0,.5);
  animation:onbPop .3s cubic-bezier(.34,1.56,.64,1) both;
}
.onb-pop-centered{
  top:50% !important; left:50% !important;
  transform:translate(-50%,-50%);
}
.onb-step-count{
  font-size:12px; font-weight:700; letter-spacing:.06em;
  color:var(--primary); text-transform:uppercase; margin-bottom:8px;
}
.onb-title{ font-size:19px; font-weight:800; margin-bottom:8px; color:var(--text); }
.onb-text{ font-size:14px; line-height:1.5; color:var(--muted2); margin-bottom:18px; }
.onb-actions{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.onb-nav{ display:flex; gap:8px; }
.onb-skip{
  background:none; border:none; color:var(--muted);
  font-size:13px; cursor:pointer; padding:8px 4px;
}
.onb-skip:hover{ color:var(--text); text-decoration:underline; }
.onb-btn{
  padding:10px 18px; border-radius:11px; font-size:14px; font-weight:600; cursor:pointer;
  border:1px solid var(--border); transition:transform .1s, background .15s;
}
.onb-btn:active{ transform:scale(.96); }
.onb-prev{ background:var(--surface2); color:var(--text); }
.onb-next{ background:var(--primary); color:#fff; border-color:var(--primary); }

@keyframes onbFade{ from{opacity:0} to{opacity:1} }
@keyframes onbFadeOut{ from{opacity:1} to{opacity:0} }
@keyframes onbPop{ 0%{transform:translateY(12px) scale(.96);opacity:0} 100%{transform:translateY(0) scale(1);opacity:1} }
.onb-pop-centered{ animation:onbPopC .3s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes onbPopC{ 0%{transform:translate(-50%,-46%) scale(.95);opacity:0} 100%{transform:translate(-50%,-50%) scale(1);opacity:1} }

/* ══════════════════════════════════════════════════════════════
   ПРЕДПРОСМОТР ФАЙЛОВ (изображения, текст)
   ══════════════════════════════════════════════════════════════ */
.preview-overlay{
  position:fixed; inset:0; z-index:5500;
  display:flex; flex-direction:column;
  background:rgba(8,8,14,.94);
  animation:pvFade .2s ease both;
}
.preview-overlay.closing{ animation:pvFadeOut .18s ease both; }
@keyframes pvFade{ from{opacity:0} to{opacity:1} }
@keyframes pvFadeOut{ from{opacity:1} to{opacity:0} }

.preview-topbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 16px;
  background:rgba(0,0,0,.4);
  flex-shrink:0;
}
.preview-name{
  color:#fff; font-size:14px; font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.preview-actions{ display:flex; gap:8px; flex-shrink:0; }
.preview-btn{
  width:38px; height:38px; border:none; border-radius:10px;
  background:rgba(255,255,255,.14); color:#fff; font-size:17px; cursor:pointer;
  transition:background .15s, transform .1s;
}
.preview-btn:hover{ background:rgba(255,255,255,.24); }
.preview-btn:active{ transform:scale(.92); }

.preview-body{
  flex:1; display:flex; align-items:center; justify-content:center;
  overflow:auto; padding:16px;
}
.preview-loading{ color:rgba(255,255,255,.7); font-size:14px; }
.preview-img{
  max-width:100%; max-height:100%;
  object-fit:contain; border-radius:6px;
  cursor:zoom-in; transition:transform .2s;
}
.preview-img.zoomed{
  max-width:none; max-height:none;
  width:auto; cursor:zoom-out;
  transform:scale(1);
}

/* Текстовый просмотр */
.preview-text-wrap{
  flex:1; overflow:auto; padding:16px;
}
.preview-text{
  margin:0; color:#e8e8ef;
  font-family:'SF Mono',Menlo,Consolas,monospace;
  font-size:13px; line-height:1.55;
  white-space:pre-wrap; word-break:break-word;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px; padding:14px;
}
.preview-trunc{
  margin-top:12px; color:#facc15; font-size:12.5px; text-align:center;
}

/* ══════════════════════════════════════════════════════════════
   МАССОВЫЙ ВЫБОР ФАЙЛОВ
   ══════════════════════════════════════════════════════════════ */
.file-check{
  flex-shrink:0;
  width:22px; height:22px; border-radius:6px;
  border:2px solid var(--border); background:var(--surface2);
  cursor:pointer; position:relative;
  transition:background .15s, border-color .15s;
}
.file-check.checked{
  background:var(--primary); border-color:var(--primary);
}
.file-check.checked::after{
  content:'✓'; position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:14px; font-weight:700;
}
/* в виде иконок чекбокс в углу карточки */
.file-icon-card{ position:relative; }
.file-icon-card .file-check{ position:absolute; top:8px; left:8px; z-index:2; }
.file-row.row-selected, .file-icon-card.row-selected{
  outline:2px solid var(--primary); outline-offset:-2px;
  background:rgba(99,102,241,.08);
}
.file-row.drop-hover, .file-icon-card.drop-hover{
  outline:2px dashed var(--primary); outline-offset:-2px;
  background:rgba(99,102,241,.14);
}

/* Нижняя панель массовых действий */
.file-sel-bar{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%) translateY(140%);
  z-index:3500;
  display:flex; align-items:center; gap:14px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:16px; padding:10px 14px;
  box-shadow:0 12px 40px rgba(0,0,0,.4);
  transition:transform .28s cubic-bezier(.16,1,.3,1);
  max-width:calc(100vw - 32px);
}
.file-sel-bar.show{ transform:translateX(-50%) translateY(0); }
.file-sel-bar span{ font-size:14px; font-weight:600; color:var(--text); white-space:nowrap; }
.fsb-clear{
  width:32px; height:32px; flex-shrink:0; border:none; border-radius:9px;
  background:var(--surface2); color:var(--text); font-size:15px; cursor:pointer;
}
.fsb-actions{
  border:none; border-radius:11px; padding:9px 16px;
  background:var(--primary); color:#fff; font-size:14px; font-weight:700; cursor:pointer;
  white-space:nowrap;
}
.fsb-actions:active, .fsb-clear:active{ transform:scale(.95); }
.ctx-menu-title{ font-size:13px; color:var(--muted); padding:6px 10px 10px; font-weight:600; }

/* ══════════════════════════════════════════════════════════════
   СКЕЛЕТОН-ЗАГРУЗКА (мгновенный плейсхолдер до данных)
   ══════════════════════════════════════════════════════════════ */
@keyframes skelPulse{
  0%,100%{ opacity:.45 }
  50%{     opacity:.9  }
}
.skel-wrap{ padding:14px; }
.skel-card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius,14px); padding:16px 18px;
  margin-bottom:14px;
  animation:skelPulse 1.4s ease-in-out infinite;
}
.skel-card:nth-child(2){ animation-delay:.15s }
.skel-card:nth-child(3){ animation-delay:.3s  }
.skel-line{
  background:var(--border);
  border-radius:6px; margin-bottom:10px;
}
.skel-title{ height:18px; width:65%; }
.skel-sub  { height:12px; width:80%; }

.skel-notes-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px; padding:14px;
}
.skel-note{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius,14px); padding:16px;
  min-height:110px;
  animation:skelPulse 1.4s ease-in-out infinite;
}

/* ── Плашка квоты в разделе Файлы ───────────────────────────── */
.files-quota-bar{
  margin:0 0 14px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:12px; padding:12px 16px;
}
.files-quota-unlimited{ opacity:.7 }
.files-quota-label{
  display:flex; justify-content:space-between; align-items:center;
  font-size:13px; font-weight:600; color:var(--muted2); margin-bottom:8px;
}
.files-quota-track{
  height:6px; background:var(--surface2);
  border-radius:3px; overflow:hidden;
}
.files-quota-fill{
  height:100%; border-radius:3px;
  transition:width .4s ease;
}
.files-quota-warn{
  margin-top:8px; font-size:12px; color:#f87171; font-weight:600;
}