/* ============================================================
   LYRIVA GALLERY — LIQUID GLASS DESIGN SYSTEM v2
   ============================================================ */

/* ── Variables ────────────────────────────────────────────── */
:root {
  --c-bg:          #07080f;
  --c-surface:     #0f101c;
  --c-elevated:    #181928;
  --glass-bg:      rgba(12, 13, 26, 0.60);
  --glass-blur:    blur(28px) saturate(180%);
  --glass-border:  1px solid rgba(255,255,255,0.08);
  --glass-shadow:  0 8px 40px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.07) inset, 0 -1px 0 rgba(0,0,0,0.25) inset;
  --sidebar-glass: rgba(9,10,22,0.78);
  --accent:        #4e8cf8;
  --accent-dim:    rgba(78,140,248,0.18);
  --t-primary:     rgba(255,255,255,0.92);
  --t-secondary:   rgba(255,255,255,0.52);
  --t-tertiary:    rgba(255,255,255,0.28);
  --t-accent:      #7aabff;
  --bd-subtle:     rgba(255,255,255,0.06);
  --bd-faint:      rgba(255,255,255,0.10);
  --font:          -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable", system-ui, sans-serif;
  --ease-spring:   cubic-bezier(0.34,1.56,0.64,1);
  --ease-out:      cubic-bezier(0.16,1,0.3,1);
  --dur-xs:        90ms;  --dur-sm: 160ms; --dur-md: 260ms; --dur-lg: 400ms;
  --sidebar-w:     252px; --topbar-h: 54px;
  --pad:           22px;  --gap: 9px;
  --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 26px;
}

/* ── Reset ───────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:15px; -webkit-text-size-adjust:100%; }
body { font-family:var(--font); background:var(--c-bg); color:var(--t-primary); line-height:1.5; min-height:100dvh; -webkit-font-smoothing:antialiased; }
img,video { display:block; max-width:100%; }
button { font-family:inherit; cursor:pointer; border:none; background:none; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.12); border-radius:99px; }
::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,0.22); }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* ── App background ──────────────────────────────────────── */
body:not(.login-body) {
  background-image:
    radial-gradient(ellipse 70% 50% at 0% 0%, rgba(30,45,130,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 100% 100%, rgba(90,30,140,0.12) 0%, transparent 60%);
  background-attachment: fixed;
}

/* ═══════════════════════════════════════════════════════════
   LOGIN PAGE
   ═══════════════════════════════════════════════════════════ */
.login-body { min-height:100dvh; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.login-bg { position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.orb { position:absolute; border-radius:50%; filter:blur(100px); opacity:0; animation: orb-in var(--dur-lg) var(--ease-out) forwards, orb-float 22s ease-in-out infinite; }
.orb-1 { width:700px;height:700px;background:radial-gradient(circle,#1e2d82 0%,transparent 65%);top:-280px;left:-200px;animation-delay:0.1s,0.6s; }
.orb-2 { width:550px;height:550px;background:radial-gradient(circle,#5b21b6 0%,transparent 65%);bottom:-200px;right:-150px;animation-delay:0.2s,0.7s;animation-direction:normal,reverse; }
.orb-3 { width:420px;height:420px;background:radial-gradient(circle,#0e4d80 0%,transparent 65%);top:45%;left:60%;animation-delay:0.15s,1s;animation-duration:var(--dur-lg),28s; }
.login-wrap { position:relative; z-index:1; padding:24px; width:100%; display:flex; justify-content:center; }
.login-card {
  background:rgba(9,10,22,0.58); backdrop-filter:blur(48px) saturate(1.8); -webkit-backdrop-filter:blur(48px) saturate(1.8);
  border:1px solid rgba(255,255,255,0.07); border-top-color:rgba(255,255,255,0.16); border-bottom-color:rgba(0,0,0,0.30);
  box-shadow:0 40px 100px rgba(0,0,0,0.7),0 12px 40px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,0.11),inset 0 -1px 0 rgba(0,0,0,0.30);
  border-radius:var(--r-xl); padding:48px 44px 44px; width:min(420px,100%);
  animation:card-in var(--dur-lg) var(--ease-out) 0.25s both;
}
.login-logo { width:52px;height:52px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.10);border-radius:var(--r-md);margin-bottom:24px;color:var(--t-accent); }
.login-title { font-size:26px;font-weight:700;letter-spacing:-0.6px;color:var(--t-primary);margin-bottom:6px; }
.login-subtitle { font-size:13px;color:var(--t-secondary);margin-bottom:28px; }
.login-error,.login-notice { display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:var(--r-sm);font-size:13px;margin-bottom:20px;animation:shake .35s var(--ease-spring); }
.login-error  { background:rgba(239,68,68,0.14); border:1px solid rgba(239,68,68,0.28); color:#fca5a5; }
.login-notice { background:rgba(234,179,8,0.12);  border:1px solid rgba(234,179,8,0.24);  color:#fde68a; }
.login-field { margin-bottom:16px; }
.login-label { display:block;font-size:11.5px;font-weight:600;color:var(--t-secondary);text-transform:uppercase;letter-spacing:0.07em;margin-bottom:8px; }
.login-input-wrap { position:relative; }
.login-input { width:100%;padding:12px 44px 12px 14px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.10);border-radius:var(--r-sm);color:var(--t-primary);font-family:var(--font);font-size:15px;outline:none;transition:border-color var(--dur-sm) ease,box-shadow var(--dur-sm) ease,background var(--dur-sm) ease; }
.login-input::placeholder { color:var(--t-tertiary); }
.login-input:focus { background:rgba(255,255,255,0.07);border-color:rgba(78,140,248,0.55);box-shadow:0 0 0 3px rgba(78,140,248,0.15); }
.login-input--error { border-color:rgba(239,68,68,0.45); }
.pw-toggle { position:absolute;right:0;top:0;width:44px;height:100%;display:flex;align-items:center;justify-content:center;color:var(--t-tertiary);transition:color var(--dur-xs) ease; }
.pw-toggle:hover { color:var(--t-secondary); }
.login-submit { margin-top:8px;width:100%;display:flex;align-items:center;justify-content:center;gap:8px;padding:13px 20px;background:linear-gradient(135deg,#3b6fd4 0%,#5a4adb 100%);border:1px solid rgba(255,255,255,0.12);border-top-color:rgba(255,255,255,0.22);border-radius:var(--r-sm);color:#fff;font-size:14.5px;font-weight:600;letter-spacing:-0.01em;transition:transform var(--dur-sm) var(--ease-spring),opacity var(--dur-sm) ease,box-shadow var(--dur-sm) ease;box-shadow:0 4px 20px rgba(59,111,212,0.35),inset 0 1px 0 rgba(255,255,255,0.20); }
.login-submit:hover { transform:translateY(-1px);box-shadow:0 8px 28px rgba(59,111,212,0.50),inset 0 1px 0 rgba(255,255,255,0.22); }
.login-submit:active { transform:scale(0.98);opacity:0.85; }
.login-submit:disabled { opacity:0.55;cursor:not-allowed;transform:none;box-shadow:none; }
.login-submit .submit-spinner { display:none;animation:spin .7s linear infinite; }

/* ═══════════════════════════════════════════════════════════
   APP LAYOUT
   ═══════════════════════════════════════════════════════════ */
#app { display:flex; min-height:100dvh; }

/* ── Sidebar ─────────────────────────────────────────────── */
#sidebar {
  position:fixed; top:0; left:0; width:var(--sidebar-w); height:100dvh;
  display:flex; flex-direction:column;
  background:var(--sidebar-glass); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border-right:var(--glass-border); z-index:200;
  transition:transform var(--dur-md) var(--ease-out),box-shadow var(--dur-md) ease;
}
.sidebar-header { display:flex;align-items:center;gap:10px;padding:0 14px 0 16px;height:var(--topbar-h);border-bottom:var(--glass-border);flex-shrink:0; }
.sidebar-brand  { display:flex;align-items:center;gap:10px;flex:1;min-width:0; }
.sidebar-icon   { width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--accent-dim);border:1px solid rgba(78,140,248,0.20);border-radius:var(--r-sm);color:var(--t-accent);flex-shrink:0; }
.sidebar-app-name { font-size:15px;font-weight:700;letter-spacing:-0.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.sidebar-close { width:28px;height:28px;display:none;align-items:center;justify-content:center;color:var(--t-secondary);border-radius:6px;flex-shrink:0;transition:background var(--dur-xs) ease,color var(--dur-xs) ease; }
.sidebar-close:hover { background:rgba(255,255,255,0.07);color:var(--t-primary); }
.sidebar-body { flex:1;overflow-y:auto;overflow-x:hidden;padding:12px 8px 24px; }
.sidebar-section-label { font-size:10.5px;font-weight:600;letter-spacing:0.09em;text-transform:uppercase;color:var(--t-tertiary);padding:0 8px;margin-bottom:6px;margin-top:4px; }

/* Tree */
.tree-ul { list-style:none; }
.tree-ul .tree-ul { padding-left:14px;border-left:1px solid var(--bd-subtle);margin-left:10px;overflow:hidden;max-height:0;opacity:0;pointer-events:none;transition:max-height var(--dur-md) var(--ease-out),opacity var(--dur-md) ease; }
.tree-ul .tree-ul.expanded { max-height:2000px;opacity:1;pointer-events:auto; }
.tree-item { display:flex;align-items:center;gap:6px;padding:7px 8px;border-radius:var(--r-sm);cursor:pointer;color:var(--t-secondary);font-size:13px;font-weight:450;user-select:none;position:relative;transition:background var(--dur-xs) ease,color var(--dur-xs) ease; }
.tree-item:hover { background:rgba(255,255,255,0.05);color:var(--t-primary); }
.tree-item.active { background:var(--accent-dim);color:var(--t-accent); }
.tree-item.active::before { content:'';position:absolute;left:-8px;top:6px;bottom:6px;width:2px;background:var(--accent);border-radius:1px; }
.tree-icon  { flex-shrink:0;opacity:0.7; }
.tree-item.active .tree-icon { opacity:1; }
.tree-label { flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.tree-chevron { flex-shrink:0;color:var(--t-tertiary);transition:transform var(--dur-sm) var(--ease-spring); }
.tree-item.expanded .tree-chevron { transform:rotate(90deg); }

/* ── Topbar ──────────────────────────────────────────────── */
#gallery-shell { flex:1;margin-left:var(--sidebar-w);display:flex;flex-direction:column;min-height:100dvh; }
#topbar {
  position:sticky; top:0; z-index:100; height:var(--topbar-h);
  display:flex; align-items:center; gap:8px; padding:0 16px;
  background:var(--glass-bg); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border-bottom:var(--glass-border); box-shadow:0 1px 0 rgba(255,255,255,0.04);
}
.hamburger { width:36px;height:36px;display:none;align-items:center;justify-content:center;color:var(--t-secondary);border-radius:var(--r-sm);flex-shrink:0;transition:background var(--dur-xs) ease,color var(--dur-xs) ease; }
.hamburger:hover { background:rgba(255,255,255,0.07);color:var(--t-primary); }

/* Mobile back button */
.back-btn { width:36px;height:36px;display:flex;align-items:center;justify-content:center;color:var(--t-accent);border-radius:var(--r-sm);flex-shrink:0;transition:background var(--dur-xs) ease,transform var(--dur-sm) var(--ease-spring); }
.back-btn:hover { background:rgba(78,140,248,0.12);transform:translateX(-2px); }
.back-btn:active { transform:scale(0.92); }

/* Mobile title */
.mobile-title { display:none;font-size:16px;font-weight:700;letter-spacing:-0.3px;color:var(--t-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;text-align:center; }

/* Breadcrumb (desktop) */
#breadcrumb { display:flex;align-items:center;gap:2px;flex:1;min-width:0;overflow:hidden; }
.bc-item { display:flex;align-items:center;gap:5px;padding:5px 8px;border-radius:6px;font-size:13px;font-weight:500;color:var(--t-secondary);cursor:pointer;white-space:nowrap;max-width:180px;overflow:hidden;text-overflow:ellipsis;transition:background var(--dur-xs) ease,color var(--dur-xs) ease; }
.bc-item:hover { background:rgba(255,255,255,0.06);color:var(--t-primary); }
.bc-item.bc-current { color:var(--t-primary);font-weight:600;pointer-events:none; }
.bc-sep { color:var(--t-tertiary);font-size:11px;padding:0 1px;flex-shrink:0;pointer-events:none;user-select:none; }
.topbar-spacer { flex:1; }

/* Sort button */
.sort-btn { display:flex;align-items:center;gap:6px;padding:7px 11px;background:rgba(255,255,255,0.04);border:1px solid var(--bd-faint);border-radius:var(--r-sm);color:var(--t-secondary);font-size:12.5px;font-weight:500;flex-shrink:0;transition:background var(--dur-xs) ease,color var(--dur-xs) ease,border-color var(--dur-xs) ease; }
.sort-btn:hover { background:rgba(255,255,255,0.08);color:var(--t-primary);border-color:rgba(255,255,255,0.15); }
.sort-btn[aria-expanded="true"] { background:var(--accent-dim);color:var(--t-accent);border-color:rgba(78,140,248,0.25); }

/* Sort dropdown */
.sort-dropdown {
  position:sticky; top:var(--topbar-h); z-index:99;
  display:none; flex-direction:column;
  background:rgba(10,11,24,0.92); backdrop-filter:blur(24px) saturate(180%); -webkit-backdrop-filter:blur(24px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,0.08);
  box-shadow:0 8px 32px rgba(0,0,0,0.4);
  animation:fade-up var(--dur-sm) var(--ease-out);
}
.sort-dropdown.open { display:flex; }
.sort-opt { display:flex;align-items:center;gap:10px;padding:12px 20px;font-size:13.5px;font-weight:500;color:var(--t-secondary);text-align:left;border-bottom:1px solid rgba(255,255,255,0.04);transition:background var(--dur-xs) ease,color var(--dur-xs) ease; }
.sort-opt:last-child { border-bottom:none; }
.sort-opt:hover { background:rgba(255,255,255,0.05);color:var(--t-primary); }
.sort-opt.active { color:var(--t-accent);background:var(--accent-dim); }
.sort-opt.active::after { content:'✓';margin-left:auto;font-size:14px; }

/* Logout */
.btn-logout { display:flex;align-items:center;gap:7px;padding:7px 11px;background:rgba(255,255,255,0.04);border:1px solid var(--bd-faint);border-radius:var(--r-sm);color:var(--t-secondary);font-size:12.5px;font-weight:500;flex-shrink:0;transition:background var(--dur-xs) ease,color var(--dur-xs) ease; }
.btn-logout:hover { background:rgba(255,255,255,0.08);color:var(--t-primary); }
.logout-label { display:inline; }

/* ── Gallery content ─────────────────────────────────────── */
#gallery-content { flex:1;padding:var(--pad);display:flex;flex-direction:column;gap:32px; }
.section-title { display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;letter-spacing:0.09em;text-transform:uppercase;color:var(--t-tertiary);margin-bottom:14px; }
.section-count { font-weight:500;opacity:0.7; }

/* ── Folder cards ────────────────────────────────────────── */
#folder-cards { display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:9px; }
.folder-card { display:flex;align-items:center;gap:10px;padding:11px 13px;background:rgba(255,255,255,0.03);border:1px solid var(--bd-subtle);border-radius:var(--r-md);cursor:pointer;transition:background var(--dur-sm) ease,border-color var(--dur-sm) ease,transform var(--dur-sm) var(--ease-spring),box-shadow var(--dur-sm) ease;animation:fade-up var(--dur-md) var(--ease-out) both; }
.folder-card:hover { background:rgba(255,255,255,0.07);border-color:rgba(255,255,255,0.12);transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,0.28); }
.folder-card:active { transform:scale(0.97); }
.folder-card-icon { flex-shrink:0;color:rgba(78,140,248,0.70); }
.folder-card-name { font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }

/* ── Unified media grid ──────────────────────────────────── */
#media-grid {
  columns: auto;
  column-width: 240px;
  column-gap: var(--gap);
}
.media-card {
  break-inside: avoid;
  margin-bottom: var(--gap);
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: zoom-in;
  position: relative;
  background: var(--c-elevated);
  animation: fade-up var(--dur-md) var(--ease-out) both;
  transition: transform var(--dur-md) var(--ease-spring), box-shadow var(--dur-md) ease;
}
.media-card:hover {
  transform: scale(1.022) translateY(-2px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.09);
  z-index: 2;
}
.media-card:active { transform: scale(0.98); cursor: pointer; }
.media-card--video { cursor: pointer; }

/* Photo card */
.media-card img { width:100%;display:block;object-fit:cover;min-height:60px;transition:filter .5s ease,opacity .4s ease; }
.media-card img.lazy        { filter:blur(10px) saturate(0.3);opacity:.6; }
.media-card img.lazy.loaded { filter:none;opacity:1; }
.media-card img.broken      { opacity:.15;filter:none;min-height:100px; }
.media-overlay { position:absolute;bottom:0;left:0;right:0;padding:32px 10px 8px;background:linear-gradient(to top,rgba(0,0,0,.68) 0%,transparent 100%);opacity:0;transition:opacity var(--dur-sm) ease; }
.media-card:hover .media-overlay { opacity:1; }
.media-overlay-name { font-size:11px;font-weight:500;color:rgba(255,255,255,.84);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block; }

/* Video card */
.video-thumb { position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--c-surface); }
.video-thumb-bg { width:100%;height:100%;background:linear-gradient(145deg,#0e0f1e 0%,#161728 50%,#1a1b32 100%);display:flex;align-items:center;justify-content:center;background-size:cover;background-position:center;position:relative;transition:filter .5s ease; }
.video-thumb-bg::before { content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 30% 40%,rgba(78,140,248,0.08) 0%,transparent 65%);pointer-events:none; }
.video-thumb-bg.has-thumb::before { background:rgba(0,0,0,0.25); }
.video-play-btn { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.12);transition:background var(--dur-sm) ease; }
.media-card:hover .video-play-btn { background:rgba(0,0,0,0.28); }
.play-circle { width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.52);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);border:1px solid rgba(255,255,255,0.22);border-radius:50%;color:#fff;transition:transform var(--dur-sm) var(--ease-spring),background var(--dur-sm) ease; }
.media-card:hover .play-circle { transform:scale(1.12);background:rgba(0,0,0,0.70); }
.video-ext-badge { position:absolute;bottom:7px;right:7px;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.85);background:rgba(0,0,0,.68);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:4px;padding:2px 6px; }

/* ── Lightbox ────────────────────────────────────────────── */
#lightbox { position:fixed;inset:0;z-index:1000;visibility:hidden;opacity:0;transition:opacity var(--dur-md) var(--ease-out),visibility 0s var(--dur-md); }
#lightbox.open { visibility:visible;opacity:1;transition:opacity var(--dur-md) var(--ease-out),visibility 0s 0s; }
.lb-backdrop { position:absolute;inset:0;background:rgba(0,0,0,0.90);backdrop-filter:blur(6px) saturate(0.7);-webkit-backdrop-filter:blur(6px) saturate(0.7); }
.lb-topbar { position:absolute;top:0;left:0;right:0;height:56px;display:flex;align-items:center;gap:12px;padding:0 16px 0 20px;z-index:10;background:linear-gradient(to bottom,rgba(0,0,0,0.60) 0%,transparent 100%); }
.lb-counter  { font-size:12px;font-weight:600;color:rgba(255,255,255,.40);font-variant-numeric:tabular-nums;flex-shrink:0; }
.lb-filename { flex:1;min-width:0;font-size:13px;font-weight:500;color:rgba(255,255,255,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.lb-rotate { width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:50%;color:rgba(255,255,255,.80);flex-shrink:0;transition:background var(--dur-xs) ease,transform var(--dur-sm) var(--ease-spring); }
.lb-rotate:hover { background:rgba(255,255,255,.16);color:#fff;transform:scale(1.08); }
.lb-rotate:active { transform:scale(0.92) rotate(45deg); }
.lb-close { width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:50%;color:rgba(255,255,255,.80);flex-shrink:0;transition:background var(--dur-xs) ease,transform var(--dur-sm) var(--ease-spring); }
.lb-close:hover { background:rgba(255,255,255,.16);color:#fff;transform:scale(1.08); }
.lb-stage { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:64px 80px;z-index:5; }
.lb-stage img,.lb-stage video { max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:6px;box-shadow:0 24px 80px rgba(0,0,0,.75);animation:lb-in var(--dur-md) var(--ease-out);transition:transform var(--dur-md) var(--ease-spring); }
.lb-stage video { background:#000; }
.lb-spinner { display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.35);animation:spin .8s linear infinite; }
.lb-nav { position:absolute;top:50%;transform:translateY(-50%);z-index:10;width:46px;height:46px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.45);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.12);border-radius:50%;color:rgba(255,255,255,.80);transition:background var(--dur-xs) ease,transform var(--dur-sm) var(--ease-spring),opacity var(--dur-sm) ease; }
.lb-nav:hover { background:rgba(0,0,0,.72);color:#fff;transform:translateY(-50%) scale(1.08); }
.lb-nav:active { transform:translateY(-50%) scale(0.93); }
.lb-prev { left:16px; } .lb-next { right:16px; }
.lb-nav.hidden { opacity:0;pointer-events:none; }

/* ── Empty state ─────────────────────────────────────────── */
#empty-state { flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:80px 20px;color:var(--t-tertiary);text-align:center; }
.empty-icon { opacity:.22;margin-bottom:8px; }
.empty-title { font-size:16px;font-weight:600;color:var(--t-secondary); }
.empty-sub { font-size:13.5px; }

/* ── Skeleton ────────────────────────────────────────────── */
.sk-grid { columns:auto;column-width:240px;column-gap:var(--gap); }
.sk-card { break-inside:avoid;margin-bottom:var(--gap);border-radius:var(--r-md);background:var(--c-elevated);animation:shimmer 1.8s ease-in-out infinite; }
.sk-tree { display:flex;flex-direction:column;gap:10px;padding:4px 0; }
.sk-line { height:12px;border-radius:6px;background:rgba(255,255,255,.06);animation:shimmer 1.8s ease-in-out infinite; }

/* ── Sidebar overlay ─────────────────────────────────────── */
.sidebar-overlay { display:none;position:fixed;inset:0;background:rgba(0,0,0,.60);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);z-index:190;opacity:0;pointer-events:none;transition:opacity var(--dur-md) ease; }
.sidebar-overlay.visible { opacity:1;pointer-events:auto; }

/* ═══════════════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════════════ */
@keyframes fade-up  { from{opacity:0;transform:translateY(12px)}  to{opacity:1;transform:translateY(0)} }
@keyframes lb-in    { from{opacity:0;transform:scale(0.93)}       to{opacity:1;transform:scale(1)} }
@keyframes card-in  { from{opacity:0;transform:translateY(22px) scale(0.97)} to{opacity:1;transform:none} }
@keyframes orb-in   { from{opacity:0} to{opacity:1} }
@keyframes orb-float { 0%,100%{transform:translate(0,0) rotate(0deg)} 33%{transform:translate(28px,-18px) rotate(3deg)} 66%{transform:translate(-18px,14px) rotate(-2deg)} }
@keyframes shake    { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-5px)} 40%{transform:translateX(4px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(2px)} }
@keyframes shimmer  { 0%,100%{opacity:.45} 50%{opacity:.9} }
@keyframes spin     { to{transform:rotate(360deg)} }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE FIRST
   ═══════════════════════════════════════════════════════════ */

/* ── Tablet / collapsed sidebar ──────────────────────────── */
@media (max-width: 900px) {
  #sidebar { transform:translateX(-100%); }
  #sidebar.open { transform:translateX(0); box-shadow:6px 0 40px rgba(0,0,0,.55); }
  .sidebar-overlay { display:block; pointer-events:none; }
  .sidebar-overlay.visible { pointer-events:auto; }
  .sidebar-close   { display:flex; }
  .hamburger       { display:flex; order:10; }  /* always visible, pushed to far right */
  #gallery-shell   { margin-left:0; }
  #breadcrumb      { display:none; }
  .topbar-spacer   { display:none; }
  .mobile-title    { display:block;position:absolute;left:0;right:0;text-align:center;pointer-events:none;padding:0 120px; }
  .logout-label    { display:none; }
  #media-grid      { column-width:200px; }
}

/* ── Mobile: iOS Photos style grid ───────────────────────── */
@media (max-width: 640px) {
  :root { --topbar-h: 50px; --pad: 0px; --gap: 2px; }

  #topbar { padding:0 10px; gap:6px; }
  .sort-btn { padding:6px 9px; font-size:12px; }
  .sort-btn span { display:none; }   /* show only icon on small screens */
  .btn-logout { padding:7px 8px; }

  .sort-dropdown { position:fixed; top:var(--topbar-h); left:0; right:0; z-index:200; }
  .sort-opt { padding:14px 20px; font-size:14px; }

  /* Full-bleed square grid like iOS Photos */
  #gallery-content { padding:0; gap:0; }

  #folders-section { padding:16px 14px 0; }
  #folder-cards    { grid-template-columns:repeat(2,1fr); gap:10px; }
  .folder-card     { padding:14px; }
  .folder-card-name { font-size:13.5px; }

  #media-section { padding-top:0; }
  .section-title { display:none; } /* hide section heading on mobile */

  /* 3-column square grid */
  #media-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap);
    columns: unset;
  }
  .media-card {
    break-inside: unset;
    margin-bottom: 0;
    border-radius: 0;
    aspect-ratio: 1;
    animation: none;
  }
  .media-card:hover { transform:none; box-shadow:none; }
  .media-card img { width:100%; height:100%; object-fit:cover; min-height:unset; }
  .media-overlay  { display:none; }

  /* Videos in square grid */
  .video-thumb { aspect-ratio:1; }

  /* Play indicator on video (compact) */
  .play-circle { width:32px; height:32px; }
  .play-circle svg { width:12px; height:12px; }
  .video-ext-badge { font-size:9px; padding:1px 5px; bottom:4px; right:4px; }

  /* Lightbox adjustments */
  .lb-stage { padding:56px 10px 10px; }
  .lb-prev  { left:6px; }
  .lb-next  { right:6px; }
  .lb-nav   { width:38px; height:38px; }
  .lb-topbar { padding:0 10px 0 14px; }
  .lb-filename { font-size:12px; }

  /* Empty state */
  #empty-state { padding:60px 20px; }
}

@media (max-width: 380px) {
  #media-grid { grid-template-columns:repeat(3,1fr); gap:1px; }
  #folder-cards { grid-template-columns:1fr; }
}

/* Safe area (iPhone notch / home bar) */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  #gallery-content { padding-bottom:env(safe-area-inset-bottom); }
  .sort-dropdown   { padding-bottom:env(safe-area-inset-bottom); }
}

/* Focus */
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
button:focus:not(:focus-visible),a:focus:not(:focus-visible) { outline:none; }