/* Font Google được nạp qua thẻ <link> trong <head> của từng trang HTML
   (không dùng @import ở đây nữa) — @import buộc trình duyệt phải tải xong
   file CSS này, phân tích nó, RỒI mới biết cần tải font, làm mất thêm một
   vòng round-trip trước khi có thể render chữ. Dùng <link rel="preconnect">
   + <link rel="stylesheet"> ở HTML cho phép trình duyệt tải font song song
   với CSS ngay từ khi vừa nhận được HTML, không phải chờ tuần tự. */

:root{
  --bg:#15131a;
  --bg-grad:radial-gradient(1100px 600px at 85% -10%, #2a2035 0%, transparent 60%), radial-gradient(900px 500px at -10% 110%, #1c2a2c 0%, transparent 55%), #15131a;
  --surface:#1e1c26;
  --surface2:#262332;
  --surface3:#2c2938;
  --line:#37333f;
  --line-soft:#2a2732;
  --text:#f3efe7;
  --muted:#a89fb3;
  --muted2:#7c7488;
  --accent:#f0a63f;
  --accent-soft:#f0a63f22;
  --accent-ink:#241304;
  --accent2:#5fd0c0;
  --accent2-soft:#5fd0c022;
  --danger:#ef6a6a;
  --danger-soft:#ef6a6a1e;
  --shadow:0 24px 60px rgba(5,4,10,.5);
  --shadow-sm:0 10px 26px rgba(5,4,10,.35);
  --radius:18px;
  --radius-sm:12px;
  /* FIX: --primary và --border được dùng ở khối V16/V17 (.eyebrow, .photo-pin,
     .photo.is-pinned) nhưng chưa từng được khai báo ở đâu => var() không hợp lệ,
     khiến toàn bộ khai báo dùng nó bị bỏ qua (viền/khung ảnh ghim vô hình, màu
     nhãn "eyebrow" mất tác dụng) ở cả giao diện sáng lẫn tối. Alias sang biến đã
     có theme sẵn để tự động đổi màu đúng theo sáng/tối, không cần định nghĩa lại
     trong từng khối [data-theme]. */
  --primary:var(--accent2);
  --border:var(--line);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg-grad);
  background-attachment:fixed;
  color:var(--text);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{font-family:'Fraunces',Georgia,serif;letter-spacing:-.01em}
a{color:var(--accent2)}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
::selection{background:var(--accent-soft);color:var(--text)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--surface3);border-radius:99px}
:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}

.btn{border:0;border-radius:var(--radius-sm);padding:11px 17px;font-weight:700;font-size:14.5px;transition:transform .12s,filter .15s;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.btn:active{transform:scale(.97)}
/* .btn.primary / .navitem.active: định nghĩa màu thật nằm ở dòng ~290/301
   (bảng màu xanh dương "premium v7" — đang thực sự hiển thị trên site).
   Đã bỏ 2 bản định nghĩa "chết" từng nằm ở đây (một theo var(--accent) cam,
   một theo tông hồng-tím "cute") vì thứ tự CSS khiến chúng luôn bị ghi đè,
   không bao giờ lên hình — giữ lại sẽ chỉ gây nhầm lẫn khi sửa sau này. */
.btn.soft,.btn.secondary{background:var(--surface3);color:var(--text)}
.btn.soft:hover{background:#332f40}
.btn.ghost{background:transparent;color:var(--muted);border:1px solid var(--line)}
.btn.ghost:hover{color:var(--text);border-color:var(--muted2)}
.btn.danger{background:var(--danger-soft);color:var(--danger)}
.btn.danger:hover{background:#ef6a6a30}
.btn.block{width:100%;justify-content:center}
.btn[disabled]{opacity:.55;pointer-events:none}
.btn.sm{padding:8px 12px;font-size:13px;border-radius:10px}

.card{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--radius);box-shadow:var(--shadow-sm)}

.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:13px;font-weight:600;color:var(--muted)}
.field input,.field textarea,.field select{
  background:var(--surface2);border:1px solid var(--line);border-radius:11px;
  padding:11px 13px;color:var(--text);outline:none;transition:border-color .15s;
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent2)}
.field textarea{min-height:80px;resize:vertical}

.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:99px;font-size:12px;font-weight:700}
.badge.admin{background:var(--accent-soft);color:var(--accent)}
.badge.user{background:var(--accent2-soft);color:var(--accent2)}

.toast{position:fixed;right:20px;bottom:20px;background:var(--surface3);color:var(--text);padding:13px 18px;border-radius:12px;z-index:200;display:none;max-width:360px;box-shadow:var(--shadow);border:1px solid var(--line)}
.toast.show{display:block;animation:toastin .18s ease-out}
.toast.err{background:#3a1f22;border-color:#5a2a2f;color:#ffb3b3}
@keyframes toastin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.overlay{display:none;position:fixed;inset:0;height:100vh;height:var(--app-vh,100vh);background:#0a0812c7;z-index:150;align-items:center;justify-content:center;padding:20px;overflow-y:auto;-webkit-overflow-scrolling:touch;backdrop-filter:blur(3px)}
.overlay.show{display:flex}
.modal{width:min(620px,100%);max-height:90vh;max-height:calc(var(--app-vh,100vh) - 40px);overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:26px;box-shadow:var(--shadow);animation:modalin .16s ease-out;margin:auto}
@keyframes modalin{from{opacity:0;transform:scale(.97) translateY(6px)}to{opacity:1;transform:none}}
.modal h2{margin:0 0 6px;font-size:22px}
.modal .sub{color:var(--muted);font-size:13.5px;margin-bottom:18px}
.mclose{position:absolute;top:18px;right:18px;border:0;background:var(--surface3);border-radius:10px;width:34px;height:34px;font-size:17px;color:var(--muted)}
.modal{position:relative}
.foot{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
.form2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form2 .full{grid-column:1/-1}
@media(max-width:560px){.form2{grid-template-columns:1fr}.form2 .full{grid-column:auto}}

.spinner{width:16px;height:16px;border-radius:50%;border:2px solid #fff5;border-top-color:#fff;animation:spin .7s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

.filmedge{height:9px;background:
  repeating-linear-gradient(90deg,var(--bg) 0 6px, transparent 6px 9px),
  linear-gradient(var(--surface3),var(--surface3));
  background-size:14px 100%, 100% 100%;
  border-radius:999px 999px 0 0;
}

/* Empty state */
.empty{grid-column:1/-1;text-align:center;padding:70px 20px;color:var(--muted)}
.empty .glyph{font-size:42px;margin-bottom:10px;opacity:.7}
.empty h3{margin:0 0 6px;color:var(--text)}


/* Upload progress */
.upload-row{
  margin-top:10px;
  padding:10px 11px;
  background:var(--surface2);
  border:1px solid var(--line-soft);
  border-radius:10px;
}
.upload-row-head{display:flex;align-items:center;gap:10px;justify-content:space-between;min-width:0}
.upload-filename{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;min-width:0}
.upload-status{font-size:12px;font-weight:700;color:var(--accent2);flex:none}
.upload-meta{margin-top:5px;color:var(--muted2);font-size:11px}
.upload-track{height:7px;background:var(--surface3);border-radius:99px;overflow:hidden;margin-top:7px}
.upload-fill{height:100%;width:0;background:var(--accent2);border-radius:99px;transition:width .15s ease}
.upload-done .upload-fill{background:var(--accent2)}
.upload-done .upload-status{color:var(--accent2)}
.upload-error .upload-fill{background:var(--danger)}
.upload-error .upload-status{color:var(--danger)}

.upload-summary{margin:12px 0 4px;padding:10px 11px;background:var(--surface);border:1px solid var(--line-soft);border-radius:10px}.upload-summary-head{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--muted)}.upload-summary-head b{color:var(--text)}.upload-summary .upload-track{margin-top:8px;height:9px}.upload-summary .upload-fill{transition:width .2s ease}

/* Fast image gallery rendering */
.photo { content-visibility: auto; contain-intrinsic-size: 250px 240px; }
.photo-pic { position:relative; }
.photo-pic img { opacity:0; transition:opacity .18s ease, transform .25s; }
.photo-pic img.loaded { opacity:1; }
.photo-pic img.img-error { opacity:.35; }
.img-placeholder { position:absolute; inset:0; display:grid; place-items:center; color:var(--muted2); background:linear-gradient(110deg,var(--surface2) 30%,var(--surface3) 45%,var(--surface2) 60%); background-size:200% 100%; animation:imgshine 1.2s linear infinite; }
.img-placeholder.hidden { display:none; }
.img-placeholder span { opacity:.35; font-size:22px; }
@keyframes imgshine { to { background-position:-200% 0; } }
.photo-loading { grid-column:1/-1; min-height:160px; display:flex; align-items:center; justify-content:center; gap:10px; color:var(--muted); }
.load-more-wrap { display:flex; justify-content:center; margin:18px 0 8px; }
.load-more-btn { min-width:180px; }
.load-more-btn span { opacity:.65; margin-left:5px; }

/* Infinite scroll gallery */
.photo-scroll-sentinel,
.infinite-sentinel {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: var(--muted);
  font-size: 13px;
  padding: 14px;
  grid-column: 1 / -1;
}
.photo-scroll-sentinel.done,
.infinite-sentinel.done { opacity: .75; }

/* ===== Professional upload/share center ===== */
.upload-hero,.share-hero{padding:28px;display:flex;align-items:center;gap:22px;margin-bottom:18px;overflow:hidden;position:relative}
.upload-hero:after,.share-hero:after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;right:-100px;top:-120px;background:var(--accent-soft);pointer-events:none}
.upload-hero-icon,.share-hero-icon{width:70px;height:70px;border-radius:22px;background:var(--accent-soft);display:grid;place-items:center;font-size:32px;color:var(--accent);flex:none}
.upload-hero h2,.share-hero h2{margin:0 0 7px;font-size:25px}
.upload-hero p,.share-hero p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.6;max-width:680px}
.feature-pills{display:flex;gap:7px;flex-wrap:wrap;margin-top:13px}.feature-pills span{padding:6px 10px;border-radius:99px;background:var(--surface2);color:var(--muted);font-size:11.5px;font-weight:700}
.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px}.quick-action{padding:20px;display:flex;flex-direction:column;gap:5px;cursor:pointer;transition:.15s}.quick-action:hover{transform:translateY(-2px);border-color:var(--muted2)}.qa-icon{font-size:26px;color:var(--accent2)}.quick-action span{font-size:12px;color:var(--muted)}
.upload-tips{padding:20px}.upload-tips h3{margin:0 0 14px;font-size:17px}.tip-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;color:var(--muted);font-size:12.5px}.tip-grid div{padding:11px 12px;background:var(--surface2);border-radius:10px}
.eyebrow{font-size:10px;letter-spacing:.12em;color:var(--accent2);font-weight:800;margin-bottom:7px}.share-hero-icon{color:var(--accent2);background:var(--accent2-soft);font-size:34px}.share-toolbar{padding:12px 14px;display:flex;align-items:center;gap:12px;margin-bottom:16px}.share-toolbar .search{flex:1;width:auto}.share-count{font-size:12px;color:var(--muted);white-space:nowrap}
.share-card-actions{display:flex;gap:6px;margin-top:10px}.share-card-actions .btn{flex:1;justify-content:center}
@media(max-width:700px){.upload-hero,.share-hero{padding:20px;gap:14px}.upload-hero-icon,.share-hero-icon{width:52px;height:52px;border-radius:16px;font-size:25px}.upload-hero h2,.share-hero h2{font-size:20px}.quick-grid{grid-template-columns:1fr}.tip-grid{grid-template-columns:1fr}.share-toolbar{align-items:stretch;flex-direction:column}.share-toolbar .search{width:100%}.share-count{white-space:normal}}
@media(max-width:560px){.upload-hero,.share-hero{display:block}.upload-hero-icon,.share-hero-icon{margin-bottom:12px}.feature-pills span{font-size:10.5px}.quick-action{padding:16px}.share-card-actions .btn{font-size:11px;padding:7px 8px}}

/* ===== Cute Modern Theme Pack 2026 ===== */
:root{
  --cute-pink:#ff78ad;
  --cute-purple:#9b8cff;
  --cute-blue:#65b9ff;
  --cute-mint:#5ed8c2;
  --cute-yellow:#ffd66b;
  --glass:rgba(255,255,255,.055);
  --glass-border:rgba(255,255,255,.09);
}

/* Smooth, youthful surfaces */
body{transition:background-color .25s ease,color .25s ease}
.app,.rail,.main,.topbar,.card,.modal,.drop,.search,.field input,.field textarea,.field select,.upload-row,.upload-summary,.quick-action,.upload-tips,.share-toolbar{transition:background .25s ease,border-color .25s ease,box-shadow .25s ease,color .2s ease}
/* Đã bỏ hiệu ứng backdrop-blur trên khung ảnh để ảnh hiển thị nét, tự nhiên */
.brand{letter-spacing:-.02em}
.brand .mark,.ghead .mark,.top .mark{background:linear-gradient(135deg,var(--cute-pink),var(--cute-purple) 55%,var(--cute-blue));box-shadow:0 10px 24px rgba(155,140,255,.28);animation:cuteFloat 4s ease-in-out infinite}
@keyframes cuteFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-2px) rotate(-2deg)}}
.btn.soft,.btn.secondary{background:var(--surface3)}
.stat,.albumcard,.photo,.quick-action{overflow:hidden;position:relative}
.stat:after,.albumcard:after,.photo:after,.quick-action:after{content:"";position:absolute;inset:-80% auto auto -20%;width:120px;height:120px;border-radius:50%;background:rgba(255,120,173,.035);pointer-events:none}
.photo,.albumcard,.quick-action{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.photo:hover,.albumcard:hover,.quick-action:hover{box-shadow:0 14px 34px rgba(0,0,0,.18)}

/* Theme switch */
.theme-toggle{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--surface2);color:var(--text);border-radius:999px;padding:7px 10px 7px 8px;font-size:12px;font-weight:800;cursor:pointer;white-space:nowrap;box-shadow:0 5px 16px rgba(0,0,0,.08)}
.theme-toggle .theme-icon{width:27px;height:27px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--cute-yellow),var(--cute-pink));color:#fff;font-size:14px}
.theme-toggle:hover{border-color:var(--cute-purple);transform:translateY(-1px)}
.theme-toggle .theme-label{font-size:11px;opacity:.82}

/* Light theme */
html[data-theme="light"]{
  --bg:#f7f8fc;
  --bg-grad:radial-gradient(900px 500px at 90% -10%,#ffe6f1 0%,transparent 62%),radial-gradient(800px 500px at -10% 105%,#dff5ff 0%,transparent 58%),linear-gradient(135deg,#fbfcff,#f3f5fb);
  --surface:rgba(255,255,255,.88);
  --surface2:#f3f5fa;
  --surface3:#e9edf5;
  --line:#dfe3ec;
  --line-soft:#e9ebf2;
  --text:#252536;
  --muted:#6d7082;
  --muted2:#9598a8;
  --accent:#ff6fa7;
  --accent-soft:#ff6fa71c;
  --accent-ink:#fff;
  --accent2:#36bfa9;
  --accent2-soft:#36bfa91c;
  --danger:#e55d72;
  --danger-soft:#e55d7215;
  --shadow:0 24px 60px rgba(60,68,100,.14);
  --shadow-sm:0 10px 28px rgba(60,68,100,.10);
}
html[data-theme="light"] .rail{background:rgba(255,255,255,.78)}
html[data-theme="light"] .topbar .search,html[data-theme="light"] .search{box-shadow:0 5px 18px rgba(80,90,120,.05)}
html[data-theme="light"] .overlay{background:rgba(35,38,52,.48)}
html[data-theme="light"] .drop{background:rgba(255,255,255,.72)}
html[data-theme="light"] .img-placeholder{background:linear-gradient(110deg,#eef1f7 30%,#f8eaf2 45%,#eef1f7 60%)}
html[data-theme="light"] .btn.ghost{background:rgba(255,255,255,.55)}
html[data-theme="light"] .filmedge{background:repeating-linear-gradient(90deg,var(--bg) 0 6px,transparent 6px 9px),linear-gradient(var(--surface3),var(--surface3))}

/* Cute theme accents */
.eyebrow{color:var(--cute-purple)}
.upload-hero,.share-hero{background:linear-gradient(135deg,rgba(255,120,173,.06),rgba(101,185,255,.06));}
.upload-hero-icon{background:linear-gradient(135deg,rgba(255,120,173,.18),rgba(155,140,255,.16));color:var(--cute-pink)}
.share-hero-icon{background:linear-gradient(135deg,rgba(101,185,255,.18),rgba(94,216,194,.16));color:var(--cute-blue)}
.feature-pills span{border:1px solid var(--line-soft)}

@media(max-width:900px){
  .rail{box-shadow:0 8px 24px rgba(0,0,0,.08)}
  html[data-theme="light"] .rail{background:rgba(255,255,255,.92)}
  .theme-toggle{padding:5px 7px}
  .theme-toggle .theme-label{display:none}
  .theme-toggle .theme-icon{width:30px;height:30px}
}
@media(max-width:560px){
  .theme-toggle{min-width:40px;justify-content:center;padding:5px}
  .theme-toggle .theme-icon{width:30px;height:30px}
}

.bulkbar{display:flex;align-items:center;gap:8px;padding:10px 12px;margin-bottom:12px;position:sticky;top:70px;z-index:20;flex-wrap:wrap}.bulkbar b{margin-right:auto;font-size:13px}.bulkbar select{min-width:170px}.select-photo{position:absolute;left:8px;top:8px;z-index:3;width:20px;height:20px;accent-color:var(--accent)}.photo{position:relative}.admin-panel{padding:18px}.admin-panel-head{display:flex;justify-content:space-between;gap:12px;align-items:center}.trash-section{margin-top:15px}.trash-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line-soft)}.trash-row .grow{flex:1;min-width:0}.trash-row .name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.trash-row .meta{font-size:11px;color:var(--muted)}
@media(max-width:560px){.bulkbar{top:58px}.bulkbar select{flex:1;min-width:140px}.trash-row{align-items:flex-start}.trash-row .btn{padding:7px 9px;font-size:11px}}
/* V12 advanced filters + audit */
#photoSort{width:150px!important}.audit-table{width:100%;border-collapse:collapse}.audit-table th,.audit-table td{padding:10px 12px;border-top:1px solid var(--line-soft);font-size:12.5px;text-align:left}.audit-table th{color:var(--muted);font-size:11.5px}.audit-action{font-weight:700}.audit-ip{color:var(--muted);font-family:monospace;font-size:11px}@media(max-width:700px){#photoSort{width:100%!important}.audit-wrap{overflow:auto}.audit-table{min-width:650px}.admin-panel-head{gap:8px;flex-wrap:wrap}.admin-panel-head .search{width:100%!important}}

/* Google Drive backup log (Nhật ký gần đây) */
.gdrive-log-line{padding:7px 0;border-top:1px solid var(--line-soft);
  max-height:54px;overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  word-break:break-all;line-height:1.4;font-size:11px}
.gdrive-log-line:first-child{border-top:0}
.gdrive-log-more{margin-top:2px}

/* =========================================================
   KHO ẢNH — PREMIUM VISUAL SYSTEM v7
   Light / airy / blue-violet / glass / soft motion
   NOTE (fix): khối :root thứ 2 từng đè các biến --bg/--text/...
   của :root mặc định (dòng 3) một cách VÔ ĐIỀU KIỆN (không có
   [data-theme]), khiến trạng thái "chưa gắn theme" (login.html,
   share.html trước khi có theme.js, hoặc thời điểm flash trước
   khi JS chạy) luôn hiển thị một bảng màu sáng thứ 3 khác hẳn
   cả light lẫn dark chính thức => đây chính là nguồn gây "2 giao
   diện ngày đêm chưa đồng bộ". Đã gộp về dùng chung 1 :root mặc
   định (dòng 3), light/dark chỉ còn set qua [data-theme].
   ========================================================= */

html{scroll-behavior:smooth}
body{background-color:var(--bg);background-image:var(--bg-grad);color:var(--text)}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:linear-gradient(120deg,rgba(255,255,255,.42),transparent 42%,rgba(255,255,255,.25));}
html[data-theme="dark"] body:before{background:linear-gradient(120deg,rgba(255,255,255,.06),transparent 42%,rgba(255,255,255,.03));}
.card{background:var(--surface);border:1px solid rgba(218,226,247,.9);box-shadow:var(--shadow-sm);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.btn{border-radius:14px;transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s,filter .18s}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:linear-gradient(135deg,#4c9bf7,#665be7);color:#fff;box-shadow:0 10px 22px rgba(76,133,241,.24)}
.btn.primary:hover{filter:none;box-shadow:0 14px 28px rgba(76,133,241,.30)}
.btn.soft,.btn.secondary{background:#eef3ff;color:#46618f;border:1px solid #e1e8fb}
.btn.ghost{background:rgba(255,255,255,.55);border-color:#dfe6f6;color:#72809b}

.app{grid-template-columns:248px minmax(0,1fr)}
.rail{background:rgba(255,255,255,.68);border-right:1px solid rgba(220,228,247,.9);box-shadow:8px 0 35px rgba(70,91,145,.06);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);padding:22px 15px}
.brand{font-size:18px;color:#1d2b48;padding:4px 9px 28px}
.brand .mark{width:40px;height:40px;border-radius:13px;background:linear-gradient(145deg,#4d9df7,#665be7);box-shadow:0 12px 24px rgba(72,127,239,.25);color:#fff}
.navitem{padding:12px 14px;border-radius:14px;color:#7b88a2;transition:all .18s}
.navitem:hover{background:#f1f5ff;color:#365c9e;transform:translateX(2px)}
.navitem.active{background:linear-gradient(100deg,rgba(75,145,247,.13),rgba(104,87,232,.08));color:#3e7fe4;box-shadow:inset 0 0 0 1px rgba(91,135,232,.08)}
.avatar{background:linear-gradient(145deg,#e7f1ff,#eeeaff);color:#5579d4;border:1px solid #dae4fb}

.main{padding:30px 34px 70px;max-width:1600px;width:100%;margin:auto}
.topbar{margin-bottom:24px}
.topbar h1{font-size:28px;color:var(--text)}
.display{font-weight:700}
.search{background:rgba(255,255,255,.72);border:1px solid #dfe7f7;border-radius:14px;color:#273856;box-shadow:0 6px 18px rgba(79,100,154,.05)}
.search:focus{border-color:#78a7f4;box-shadow:0 0 0 4px rgba(77,145,246,.10)}
.switch{background:rgba(255,255,255,.72);border-color:#e0e7f7}

/* Dashboard */
.stat{padding:21px 23px;position:relative;overflow:hidden}
.stat:after{content:"";position:absolute;width:110px;height:110px;right:-35px;top:-35px;border-radius:50%;background:linear-gradient(135deg,rgba(82,154,248,.15),rgba(109,91,232,.04));}
.stat .lbl{color:#8190aa}
.stat b{font-family:'Inter',sans-serif;font-size:30px;color:var(--text)}
.stat.accent b{color:#4389f5}.stat.accent2 b{color:#6757e8}
.donutwrap,.barlist{background:rgba(255,255,255,.84)}
.bartrack{background:#eaf0fc}.barfill{background:linear-gradient(90deg,#4c9bf7,#685ce7)!important}

/* Albums */
.albumgrid{gap:20px}
.albumcard{background:rgba(255,255,255,.88);border:1px solid #e2e8f7;border-radius:22px;box-shadow:var(--shadow-sm);transition:transform .24s,box-shadow .24s,border-color .24s}
.albumcard:hover{transform:translateY(-6px);box-shadow:0 24px 45px rgba(72,96,154,.15);border-color:#d1ddf5}
.albumcard .cover{height:172px}
.albumcard .cbody{padding:16px 17px 18px}.albumcard .aname{color:#203152}.albumcard .ameta{color:#8793aa}
.newalbum{min-height:238px;background:rgba(255,255,255,.48);border-color:#cddaf5;border-radius:22px}
.newalbum:hover{background:#fff;border-color:#8db4f5;color:#4389f5}

/* Album detail */
.albumhead{padding:4px 0 8px}.backbtn{background:#eef3ff;color:#55709e;border:1px solid #e0e8f8;border-radius:13px}
.photo{border:1px solid #e3e9f7;border-radius:18px;box-shadow:0 10px 24px rgba(66,91,145,.08)}
.pic{height:170px}.pic img{width:100%;height:100%;object-fit:cover;display:block}.photo:hover .pic img{transform:scale(1.055)}
.pbody{background:rgba(255,255,255,.9);padding:14px 15px 15px}
.ptitle{font-size:13.5px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pmeta{font-size:11.5px;color:var(--muted);margin-top:3px}
.pstats{display:flex;align-items:center;gap:10px}
.pactions{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.mini{border:1px solid var(--line);background:var(--surface3);color:var(--text);border-radius:10px;padding:6px 10px;font-size:11.5px;font-weight:700;white-space:nowrap}
.mini:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.movepanel{background:rgba(255,255,255,.82)}

/* Upload center */
.upload-hero{position:relative;overflow:hidden;min-height:270px;padding:42px 48px;display:flex;align-items:center;gap:34px;margin-bottom:20px;border:1px solid rgba(207,222,249,.95);background:
  radial-gradient(500px 220px at 88% 15%,rgba(255,255,255,.58),transparent 65%),
  linear-gradient(120deg,#dff1ff 0%,#d9e9ff 38%,#eee8ff 72%,#f9e8f6 100%)}
.upload-hero:before,.upload-hero:after{content:"";position:absolute;border-radius:50%;filter:blur(2px);pointer-events:none}
.upload-hero:before{width:220px;height:220px;right:-30px;bottom:-100px;background:rgba(104,116,244,.16);box-shadow:0 0 80px rgba(104,116,244,.25)}
.upload-hero:after{width:150px;height:150px;left:42%;top:-95px;background:rgba(93,171,255,.18);box-shadow:0 0 70px rgba(93,171,255,.25)}
.upload-hero-icon{width:86px;height:86px;border-radius:28px;display:grid;place-items:center;font-size:39px;color:#fff;background:linear-gradient(145deg,#57a7fa,#6b5de7);box-shadow:0 20px 35px rgba(76,132,240,.27);position:relative;z-index:1;animation:khFloat 4s ease-in-out infinite}
.upload-hero h2{font-family:'Fraunces',Georgia,serif;font-size:36px;line-height:1.05;color:#20345a;margin:0 0 10px;position:relative;z-index:1}
.upload-hero p{color:#627596;max-width:690px;line-height:1.7;margin:0 0 18px;position:relative;z-index:1}
.feature-pills{display:flex;gap:8px;flex-wrap:wrap;position:relative;z-index:1}.feature-pills span{background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.72);padding:8px 12px;border-radius:99px;font-size:12px;font-weight:700;color:#58709a;box-shadow:0 6px 15px rgba(87,112,166,.06)}
.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:20px}
.quick-action{padding:22px;display:grid;grid-template-columns:48px 1fr;grid-template-rows:auto auto;column-gap:14px;cursor:pointer;transition:transform .22s,box-shadow .22s}
.quick-action:hover{transform:translateY(-4px);box-shadow:0 22px 40px rgba(67,95,153,.13)}
.qa-icon{grid-row:1/3;width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(145deg,#e3f2ff,#ede9ff);color:#587ee0;font-size:25px}.quick-action b{align-self:end;font-size:15px;color:#273a5c}.quick-action span{font-size:12px;color:#8895ac;margin-top:5px}
.upload-tips{padding:22px 24px}.upload-tips h3{margin:0 0 14px;color:#263957}.tip-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.tip-grid div{background:#f5f8ff;border:1px solid #e6ebf8;border-radius:14px;padding:13px;font-size:12px;color:#74829b;line-height:1.5}

/* Upload modal / studio */
.upload-overlay{background:rgba(36,55,98,.25);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:16px}
.upload-modal{width:min(1120px,100%);max-height:94vh;max-height:94dvh;max-height:calc(var(--app-vh,100vh) - 40px);padding:0;overflow:hidden;display:flex;flex-direction:column;border:1px solid rgba(255,255,255,.78);background:rgba(255,255,255,.92);box-shadow:0 40px 100px rgba(48,71,125,.28);border-radius:30px;animation:studioIn .32s cubic-bezier(.18,.8,.2,1)}
@keyframes studioIn{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.upload-modal .mclose{top:18px;right:18px;z-index:5;background:rgba(255,255,255,.72);border:1px solid #e1e8f7;color:#71809b;width:38px;height:38px;border-radius:12px;transition:.18s}.upload-modal .mclose:hover{transform:rotate(90deg);background:#eef3ff;color:#3e7fe4}
.upload-modal-head{flex:none;padding:30px 66px 22px 34px;display:flex;align-items:flex-start;justify-content:space-between;gap:18px;background:linear-gradient(120deg,#edf7ff,#f1edff 70%,#fff2fb);border-bottom:1px solid #e6ecf8}
.upload-modal-head>div:first-child{min-width:0;flex:1}
.upload-eyebrow{font-size:10px;font-weight:800;letter-spacing:.14em;color:#5b7dd4;margin-bottom:7px}.upload-modal-head h2{font-family:'Fraunces',Georgia,serif;font-size:28px;color:#223454;margin:0 0 5px}.upload-modal-head .sub{color:#7888a4;margin:0;font-size:13px;line-height:1.55}.upload-count-badge{background:linear-gradient(135deg,#4e9cf7,#675be7);color:#fff;border-radius:99px;padding:9px 14px;font-size:12px;font-weight:800;box-shadow:0 10px 22px rgba(75,132,239,.2);flex:none;white-space:nowrap}
.upload-modal-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;padding:22px 28px;overflow:auto;flex:1 1 auto;min-height:0}
.drop-premium{position:relative;min-height:315px;padding:42px 28px 24px;background:linear-gradient(180deg,#fafdff,#f7f7ff);border:2px dashed #bcd3fb;border-radius:25px;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;transition:.25s}
.drop-premium:before{content:"";position:absolute;width:260px;height:260px;border-radius:50%;top:-150px;left:50%;transform:translateX(-50%);background:rgba(91,159,250,.14);filter:blur(5px);transition:.35s}.drop-premium.dragover{border-color:#6b8df2;background:linear-gradient(180deg,#f0f8ff,#f4f1ff);transform:scale(1.01);box-shadow:0 0 0 5px rgba(92,135,239,.08),0 20px 45px rgba(78,124,229,.10)}.drop-premium.dragover:before{width:420px;height:420px;background:rgba(111,100,235,.16)}
.drop-glow{position:absolute;inset:18px;border-radius:19px;pointer-events:none;box-shadow:inset 0 0 40px rgba(91,151,245,.04)}
.drop-icon-wrap{position:relative;width:76px;height:76px;border-radius:25px;display:grid;place-items:center;background:linear-gradient(145deg,#56a7fb,#675be6);box-shadow:0 18px 34px rgba(78,133,239,.28);margin-bottom:14px;animation:khFloat 4s ease-in-out infinite}.drop-icon{font-size:33px;color:#fff}.drop-icon-wrap i,.drop-icon-wrap em{position:absolute;font-style:normal;color:#6a67e8;font-size:15px}.drop-icon-wrap i{right:-18px;top:-5px;animation:twinkle 1.8s ease-in-out infinite}.drop-icon-wrap em{left:-17px;bottom:0;animation:twinkle 2.2s .5s ease-in-out infinite}
.drop-title{font-size:18px;color:#263b61;margin-bottom:7px;position:relative}.drop-or{font-size:12px;color:#99a5b9;margin-bottom:10px}.drop-select{border:0;background:linear-gradient(135deg,#4d9af7,#6b5be8);color:#fff;padding:11px 24px;border-radius:99px;font-weight:800;box-shadow:0 10px 24px rgba(74,131,240,.22);transition:.18s}.drop-select:hover{transform:translateY(-2px);box-shadow:0 15px 28px rgba(74,131,240,.28)}.drop-hint{font-size:11px;color:#9aa6ba;margin-top:11px}
.upload-settings{display:flex;flex-direction:column;gap:12px}.upload-setting-card{padding:16px;border:1px solid #e3e9f7;border-radius:18px;background:#fbfcff}.upload-setting-card label{display:block;font-size:12px;font-weight:800;color:#506482;margin-bottom:8px}.upload-setting-card select,.upload-setting-card input{width:100%;background:#fff;border:1px solid #dfe6f5;border-radius:12px;padding:10px 11px;color:#2d4162;outline:none}.upload-setting-card select:focus,.upload-setting-card input:focus{border-color:#8aabef;box-shadow:0 0 0 4px rgba(80,143,242,.08)}.upload-setting-card small{display:block;color:#98a4b8;font-size:10.5px;line-height:1.5;margin-top:7px}.upload-setting-card .field+.field{margin-top:10px}
.upload-summary{background:#fff;border-color:#e3e9f7;border-radius:15px;padding:12px}.upload-summary-head{color:#8390a7}.upload-summary-head b{color:#2e4262}.upload-track{background:#e9effb}.upload-fill{background:linear-gradient(90deg,#51a1f8,#685be7)}
.filelist{width:100%;margin-top:18px;max-height:190px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;overflow:auto}.upload-row{margin:0;padding:9px;background:rgba(255,255,255,.9);border:1px solid #e1e8f6;border-radius:15px;display:grid;grid-template-columns:48px minmax(0,1fr) 24px;gap:9px;align-items:center;box-shadow:0 7px 18px rgba(72,94,148,.06);animation:fileIn .28s ease both}.upload-thumb{width:48px;height:48px;border-radius:11px;object-fit:cover}.upload-row-main{min-width:0}.upload-row-head{gap:7px}.upload-filename{font-size:11px;color:#344866}.upload-status{font-size:10px;color:#4d8df0}.upload-meta{font-size:9.5px;color:#9aa6b9}.upload-track{height:5px;margin-top:5px}.upload-remove{width:24px;height:24px;border-radius:8px;border:0;background:#f1f4fa;color:#8996ac;font-size:16px}.upload-remove:hover{background:#ffecee;color:#e45d74}.upload-done{border-color:#cde8df;background:#fbfffd}.upload-done .upload-status{color:#35a882}.upload-error{border-color:#f4ced4;background:#fffafa}
.upload-modal-foot{flex:none;padding:16px 28px;border-top:1px solid #e5ebf7;background:rgba(250,252,255,.92);display:flex;align-items:center;justify-content:space-between;gap:12px}.upload-security{font-size:11px;color:#8795aa}.upload-submit{min-width:190px;justify-content:center}.upload-submit b{font-weight:800}.upload-submit .spinner{border-color:rgba(255,255,255,.35);border-top-color:#fff}
@keyframes fileIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@keyframes khFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes twinkle{0%,100%{opacity:.35;transform:scale(.8) rotate(0)}50%{opacity:1;transform:scale(1.18) rotate(12deg)}}

/* Share center */
.share-hero{background:linear-gradient(120deg,#e5f4ff,#edeaff 70%,#fff0fa);border-color:#dce6f8}.share-hero h2{color:#253b61}.share-hero-icon{background:linear-gradient(145deg,#51a4f7,#695ce7)!important;box-shadow:0 15px 30px rgba(76,132,240,.2)}
.share-toolbar{border-radius:17px}

/* Mobile */
@media(max-width:900px){
  .rail{background:rgba(255,255,255,.9);box-shadow:none;border-bottom:1px solid #e4eaf7}
  .main{padding:20px 16px 108px}
  .topbar{gap:10px}.topbar h1{font-size:24px}
  .upload-hero{padding:28px 24px;min-height:240px;gap:20px}.upload-hero h2{font-size:29px}.upload-hero-icon{width:68px;height:68px;border-radius:21px;font-size:30px}
  .quick-grid{grid-template-columns:1fr}.tip-grid{grid-template-columns:1fr 1fr}
  .upload-modal-layout{grid-template-columns:1fr;padding:16px}
  .upload-settings{display:grid;grid-template-columns:1fr 1fr}.upload-setting-card:last-child{grid-column:1/-1}
  .drop-premium{min-height:300px}.filelist{grid-template-columns:1fr;max-height:44vh}
  .upload-modal-foot{padding:14px 16px;flex-direction:column;align-items:stretch}.upload-security{text-align:center}.upload-modal-foot>div{display:grid;grid-template-columns:1fr 1.5fr;gap:8px}.upload-modal-foot .btn{justify-content:center}
  /* Khi đã chọn ảnh, thu gọn khung "Kéo ảnh vào đây" để nhường chỗ cho danh sách xem trước ảnh, dễ xem hơn trên di động */
  .drop-premium.has-files{min-height:0;padding:14px 16px}
  .drop-premium.has-files .drop-icon-wrap{width:38px;height:38px;margin-bottom:8px;border-radius:14px}
  .drop-premium.has-files .drop-icon{font-size:17px}
  .drop-premium.has-files .drop-icon-wrap i,.drop-premium.has-files .drop-icon-wrap em{display:none}
  .drop-premium.has-files .drop-title{font-size:13px;margin-bottom:4px}
  .drop-premium.has-files .drop-or{display:none}
  .drop-premium.has-files .drop-select{padding:8px 16px;font-size:12.5px}
  .drop-premium.has-files .drop-hint{display:none}
  .drop-premium.has-files .filelist{max-height:54vh;margin-top:12px}
}
@media(max-width:560px){
  .rail{padding:10px 10px}.brand{padding-right:8px}.brand .mark{width:36px;height:36px}.brand{font-size:16px}.navitem{padding:9px 10px;font-size:12px}
  .main{padding:16px 11px 105px}.topbar{margin-bottom:18px}.topbar h1{font-size:22px}
  .upload-hero{display:block;padding:25px 20px}.upload-hero-icon{margin-bottom:17px}.upload-hero h2{font-size:27px}.feature-pills span{font-size:10.5px;padding:7px 9px}
  .quick-grid{gap:11px}.quick-action{padding:17px}.tip-grid{grid-template-columns:1fr}.albumgrid{gap:11px}.albumcard .cover{height:125px}.albumcard .cbody{padding:12px}
  .upload-modal{border-radius:24px}.upload-modal-head{padding:22px 60px 17px 18px}.upload-modal-head h2{font-size:24px}.upload-count-badge{font-size:10px;padding:7px 10px}.upload-modal-layout{padding:12px}.upload-settings{display:block}.upload-setting-card{margin-bottom:10px}.drop-premium{min-height:270px;padding:30px 15px}.drop-icon-wrap{width:68px;height:68px}.drop-title{font-size:16px}.filelist{max-height:220px}.upload-modal-foot>div{grid-template-columns:1fr 1.8fr}.upload-submit{min-width:0}
  .drop-premium.has-files .filelist{max-height:56vh}
}
.upload-modal.upload-success{animation:successPulse .55s ease both;box-shadow:0 0 0 5px rgba(67,188,151,.08),0 35px 100px rgba(58,150,119,.20)}
.upload-modal.upload-success .upload-modal-head{background:linear-gradient(120deg,#e9fff7,#edfaff 58%,#f4efff)}
@keyframes successPulse{0%{transform:scale(1)}45%{transform:scale(1.012)}100%{transform:scale(1)}}

/* =========================================================
   KHO ẢNH — FINAL POLISH v4
   ========================================================= */
html[data-theme="dark"]{
  --bg:#0f1422;
  --bg-grad:
    radial-gradient(900px 520px at 8% -10%, rgba(69,141,244,.20), transparent 62%),
    radial-gradient(800px 520px at 98% 5%, rgba(121,92,231,.20), transparent 60%),
    radial-gradient(700px 460px at 75% 100%, rgba(255,103,175,.10), transparent 62%),
    #111625;
  --surface:rgba(25,31,49,.88);
  --surface2:#1a2133;
  --surface3:#222b41;
  --line:#303b55;
  --line-soft:#273149;
  --text:#eef3ff;
  --muted:#a3aec3;
  --muted2:#78849c;
  --accent:#70a9ff;
  --accent-soft:rgba(112,169,255,.14);
  --accent-ink:#fff;
  --accent2:#8f84ff;
  --accent2-soft:rgba(143,132,255,.14);
  --danger:#ff7187;
  --danger-soft:rgba(255,113,135,.13);
  --shadow:0 28px 80px rgba(0,0,0,.38);
  --shadow-sm:0 14px 36px rgba(0,0,0,.24);
}
html[data-theme="dark"] body{background-color:#111625;background-image:var(--bg-grad)}
html[data-theme="dark"] .rail{background:rgba(18,24,39,.76);border-color:#29344d}
html[data-theme="dark"] .brand,.dark .brand{color:#eef3ff}
html[data-theme="dark"] .navitem:hover{background:#202a40;color:#dbe7ff}
html[data-theme="dark"] .search,
html[data-theme="dark"] .switch,
html[data-theme="dark"] .btn.ghost{background:rgba(29,37,57,.82);border-color:#34405a;color:#b9c4d9}
html[data-theme="dark"] .card{background:rgba(25,31,49,.88);border-color:#2c3852}
html[data-theme="dark"] .upload-hero{background:radial-gradient(500px 220px at 88% 15%,rgba(255,255,255,.07),transparent 65%),linear-gradient(120deg,#18314b,#222a51 55%,#3a2741)}
html[data-theme="dark"] .upload-hero h2,
html[data-theme="dark"] .upload-modal-head h2,
html[data-theme="dark"] .upload-tips h3,
html[data-theme="dark"] .quick-action b{color:#eef3ff}
html[data-theme="dark"] .upload-hero p,
html[data-theme="dark"] .upload-tips .sub{color:#aeb9ce}
html[data-theme="dark"] .feature-pills span{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12);color:#c1cce0}
html[data-theme="dark"] .tip-grid div,
html[data-theme="dark"] .upload-setting-card,
html[data-theme="dark"] .upload-row{background:#1a2133;border-color:#303b55}
html[data-theme="dark"] .upload-setting-card select,
html[data-theme="dark"] .upload-setting-card input{background:#141b2c;color:#eaf0ff;border-color:#35415b}
html[data-theme="dark"] .drop-premium{background:linear-gradient(180deg,#182238,#1b2034);border-color:#405b88}
/* FIX: .drop-title dùng màu chữ xanh navy rất đậm (#263b61) để đọc trên nền
   sáng, nhưng ở giao diện tối .drop-premium lại có nền cũng rất tối => chữ
   gần như vô hình (tỷ lệ tương phản ~1.4:1, dưới ngưỡng đọc được tối thiểu
   4.5:1). Tương tự với nhãn trong khung cài đặt tải ảnh. */
html[data-theme="dark"] .drop-title{color:#eef3ff}
html[data-theme="dark"] .upload-setting-card label{color:#aab7d4}
html[data-theme="dark"] .drop-premium.dragover{background:linear-gradient(180deg,#1b3046,#252548)}
html[data-theme="dark"] .upload-modal{background:rgba(20,26,42,.96);border-color:#3a4660}
html[data-theme="dark"] .upload-modal-head{background:linear-gradient(120deg,#1a3048,#292447 70%,#3b253b);border-color:#34405a}
html[data-theme="dark"] .upload-modal-foot{background:rgba(18,24,38,.96);border-color:#34405a}
html[data-theme="dark"] .upload-count-badge{box-shadow:0 12px 28px rgba(74,112,230,.32)}
html[data-theme="dark"] .upload-summary{background:#151c2d;border-color:#303b55}
html[data-theme="dark"] .upload-summary-head b,
html[data-theme="dark"] .upload-filename{color:#e7eeff}
html[data-theme="dark"] .upload-track{background:#273149}
html[data-theme="dark"] .upload-remove{background:#252e44;color:#9aa8c0}
html[data-theme="dark"] .kh-bottomnav{background:rgba(19,25,41,.90);border-color:#34405a}

/* FIX v2: các khối nền trắng dưới đây trước đó KHÔNG có bản dark
   => vẫn hiện trắng/sáng dù đã bật giao diện tối (đặc biệt lộ rõ ở
   lưới album, ảnh, nút "soft", và share-hero khi share.html giờ
   đã bật được dark mode). */
html[data-theme="dark"] .btn.soft,
html[data-theme="dark"] .btn.secondary{background:#232c44;color:#c2cfe6;border-color:#34405a}
html[data-theme="dark"] .avatar{background:linear-gradient(145deg,#20304f,#241f3f);color:#9db8f2;border-color:#34405a}
html[data-theme="dark"] .donutwrap,
html[data-theme="dark"] .barlist{background:rgba(25,31,49,.88)}
html[data-theme="dark"] .bartrack{background:#232c44}
html[data-theme="dark"] .albumcard{background:rgba(25,31,49,.88);border-color:#2c3852}
html[data-theme="dark"] .albumcard .aname{color:#eef3ff}
html[data-theme="dark"] .albumcard .ameta{color:#8fa0bf}
html[data-theme="dark"] .newalbum{background:rgba(255,255,255,.04);border-color:#34405a}
html[data-theme="dark"] .newalbum:hover{background:rgba(112,169,255,.08);border-color:#70a9ff;color:#70a9ff}
html[data-theme="dark"] .backbtn{background:#232c44;color:#b9c8e6;border-color:#34405a}
html[data-theme="dark"] .photo{border-color:#2c3852}
html[data-theme="dark"] .pbody{background:rgba(25,31,49,.92)}
html[data-theme="dark"] .movepanel{background:rgba(25,31,49,.9)}
html[data-theme="dark"] .share-hero{background:linear-gradient(120deg,#18314b,#222a51 55%,#3a2741);border-color:#34405a}
html[data-theme="dark"] .share-hero h2{color:#eef3ff}

/* FIX v3: các mảng dưới đây vẫn giữ nguyên bảng màu sáng dù đã bật giao diện
   tối, vì trước đó chưa có bản [data-theme="dark"] tương ứng — tạo cảm giác
   "lẫn lộn sáng/tối" ngay trong cùng một khối giao diện (khung tải ảnh, nút
   đóng modal, tiêu đề phụ). */
html[data-theme="dark"] .qa-icon{background:linear-gradient(145deg,#1c3352,#2a2650);color:#8fb4ff}
html[data-theme="dark"] .upload-modal .mclose{background:rgba(255,255,255,.08);border-color:#3a4660;color:#b9c4d9}
html[data-theme="dark"] .upload-modal .mclose:hover{background:#232c44;color:#7fb2ff}
html[data-theme="dark"] .upload-modal-head .sub{color:#aeb9ce}
html[data-theme="dark"] .upload-hero{border-color:#34405a}
html[data-theme="dark"] .tip-grid div{color:#aeb9ce}
html[data-theme="dark"] .albumcard:hover{border-color:#3a4a68}
html[data-theme="dark"] .stat .lbl{color:#98a5c2}
html[data-theme="dark"] .insight:nth-child(3) .ins-icon{background:#3a1f36;color:#ff8fc9}
html[data-theme="dark"] .upload-thumb{background:#222b41}

/* Subtle ambient motion on the main app; no layout shift. */
body:after{content:"";position:fixed;left:-150px;bottom:-190px;width:420px;height:420px;border-radius:50%;pointer-events:none;z-index:-1;background:radial-gradient(circle,rgba(255,126,186,.11),transparent 68%);filter:blur(10px);animation:ambientDrift 12s ease-in-out infinite}
@keyframes ambientDrift{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(42px,-28px,0) scale(1.06)}}

/* Upload file cards: thumbnail + metadata + progress + remove action. */
.filelist{grid-template-columns:repeat(2,minmax(0,1fr));align-content:start}
.upload-row{grid-template-columns:48px minmax(0,1fr) 28px;min-width:0}
.upload-thumb-wrap{position:relative;width:48px;height:48px}
.upload-thumb{width:48px;height:48px;display:block;border-radius:12px;object-fit:cover;background:#eaf0fb;box-shadow:0 5px 12px rgba(60,90,145,.10)}
.upload-thumb-badge{position:absolute;right:-4px;bottom:-4px;min-width:17px;height:17px;padding:0 4px;display:grid;place-items:center;border-radius:99px;background:linear-gradient(135deg,#4d9bf7,#695ce8);color:#fff;font-size:9px;font-weight:800;border:2px solid #fff;box-shadow:0 3px 8px rgba(50,85,150,.18)}
.upload-row-main{min-width:0}
.upload-row-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.upload-filename{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upload-remove{display:grid;place-items:center;padding:0;cursor:pointer;transition:transform .16s,background .16s,color .16s}
.upload-remove:hover{transform:scale(1.06)}
.upload-remove:active{transform:scale(.94)}
.upload-remove:disabled{cursor:not-allowed;opacity:.45}
.upload-row.upload-done .upload-thumb{box-shadow:0 0 0 2px rgba(53,168,130,.20),0 6px 14px rgba(53,168,130,.12)}
.upload-row.upload-error .upload-thumb{box-shadow:0 0 0 2px rgba(228,93,116,.18)}
.upload-row.upload-error .upload-fill{background:linear-gradient(90deg,#ef6177,#ff9a8a)!important}

/* More tactile dropzone state. */
.drop-premium:after{content:"";position:absolute;inset:10px;border-radius:21px;border:1px solid transparent;pointer-events:none;transition:border-color .25s,box-shadow .25s}
.drop-premium.dragover:after{border-color:rgba(106,130,239,.28);box-shadow:inset 0 0 35px rgba(91,145,245,.08)}
.drop-icon-wrap{transition:transform .25s,box-shadow .25s}
.drop-premium.dragover .drop-icon-wrap{transform:translateY(-5px) scale(1.05);box-shadow:0 22px 42px rgba(78,133,239,.34)}
.upload-submit{position:relative;overflow:hidden}
.upload-submit:after{content:"";position:absolute;inset:0;transform:translateX(-110%);background:linear-gradient(100deg,transparent,rgba(255,255,255,.20),transparent);transition:transform .5s}
.upload-submit:hover:after{transform:translateX(110%)}

@media(max-width:900px){
  /* Mobile uses the bottom navigation; the desktop rail becomes a compact account header. */
  .rail{position:relative;height:auto;display:flex;flex-direction:row;align-items:center;padding:10px 14px;border-right:0;border-bottom:1px solid rgba(220,228,247,.9);overflow:visible}
  .rail>.navitem{display:none}
  .rail .brand{padding:0}
  .rail .railfoot{margin:0 0 0 auto;padding:0;border:0;display:flex;align-items:center}
  .rail .mecard{padding:0 8px 0 0}
  .rail .mecard>div:nth-child(2){display:none}
  .rail .avatar{width:34px;height:34px}
  .rail .account-actions{margin:0;display:flex;flex-direction:row;gap:6px}
  .rail .account-actions .btn{width:36px;height:36px;padding:0;justify-content:center;font-size:0;border-radius:11px}
  .rail .account-actions .btn:first-child:before{content:"⚙";font-size:15px}
  .rail .account-actions .btn:last-child:before{content:"↪";font-size:16px}
  .app-bottomnav{display:flex}
}
@media(max-width:700px){
  .filelist{grid-template-columns:1fr}
}
@media(max-width:560px){
  .upload-row{grid-template-columns:44px minmax(0,1fr) 26px;padding:8px}
  .upload-thumb-wrap,.upload-thumb{width:44px;height:44px}
  .upload-thumb-badge{min-width:16px;height:16px;font-size:8px}
}
@media(prefers-reduced-motion:reduce){body:after{animation:none}.upload-submit:after{display:none}}

/* ===== V6 interaction polish ===== */
.btn,.navitem,.mini,.quick-action,.albumcard,.photo,.lbnav,.lbclose{will-change:transform}
.btn,.navitem,.mini,.lbnav,.lbclose{transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .2s,border-color .2s,background .2s,color .2s}
.btn:hover,.navitem:hover,.mini:hover{transform:translateY(-1px)}
.card{transition:box-shadow .22s,border-color .22s,transform .22s}
.card:hover{box-shadow:0 18px 42px rgba(48,72,125,.12)}
.photo{animation:contentReveal .48s cubic-bezier(.2,.75,.2,1) both}
@keyframes contentReveal{from{opacity:0;transform:translateY(12px);filter:blur(2px)}to{opacity:1;transform:none;filter:none}}
.photo:nth-child(2n){animation-delay:.035s}.photo:nth-child(3n){animation-delay:.07s}.photo:nth-child(4n){animation-delay:.105s}
.img-placeholder{background:linear-gradient(110deg,var(--surface2) 30%,var(--surface3) 45%,var(--surface2) 60%);background-size:200% 100%;}
.lightbox{background:rgba(7,12,24,.76);backdrop-filter:blur(18px) saturate(1.08)}
.lightbox #lightboxImg{max-width:min(92vw,1500px);max-height:82vh;object-fit:contain;cursor:zoom-in;transform-origin:center;transition:opacity .2s,transform .22s cubic-bezier(.2,.8,.2,1);user-select:none;-webkit-user-drag:none;touch-action:none;image-rendering:-webkit-optimize-contrast;filter:saturate(1.1) contrast(1.06) brightness(1.01)}
.lightbox #lightboxImg.lb-zoomed{cursor:grab;transform:scale(1.8)}
.lightbox #lightboxImg.lb-dragging{cursor:grabbing;transition:none}
.lightbox .lbcaption{backdrop-filter:blur(14px);background:rgba(12,18,34,.5);border:1px solid rgba(255,255,255,.12);box-shadow:0 12px 30px rgba(0,0,0,.2)}
.lightbox .lbtools{backdrop-filter:blur(14px);background:rgba(12,18,34,.48);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:6px;box-shadow:0 12px 30px rgba(0,0,0,.2)}
.lightbox .lbnav{width:48px;height:48px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.1);backdrop-filter:blur(12px);border-radius:50%}
.lightbox .lbnav:hover{transform:scale(1.06);background:rgba(255,255,255,.17)}
.lightbox .lbclose{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(12px)}
.upload-row{transition:transform .18s,box-shadow .18s,border-color .18s}
.upload-row:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(50,80,130,.07)}
.upload-row.upload-done{animation:uploadDone .42s ease both}
@keyframes uploadDone{0%{transform:scale(.985)}55%{transform:scale(1.012)}100%{transform:scale(1)}}
.drop-premium.dragover .drop-glow{opacity:1;transform:scale(1.1)}
.drop-glow{opacity:.55;transition:opacity .3s,transform .45s}
@media(max-width:700px){
  .lightbox #lightboxImg{max-width:96vw;max-height:76vh}
  .lightbox #lightboxImg.lb-zoomed{transform:scale(1.45)}
  .lightbox .lbnav{width:42px;height:42px}
}
@media(prefers-reduced-motion:reduce){
  .photo{animation:none!important}
  .btn,.navitem,.mini,.lbnav,.lbclose{transition:none!important}
}

/* ===== V7 interaction polish ===== */
.photo.reveal-pending{opacity:0;transform:translateY(14px);filter:blur(2px)}
.photo.reveal-ready{opacity:1;transform:none;filter:none;transition:opacity .45s ease,transform .45s cubic-bezier(.2,.75,.2,1),filter .45s ease}
.img-placeholder{position:relative;overflow:hidden}
.img-placeholder:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.28) 45%,transparent 70%);transform:translateX(-120%);animation:v7Shimmer 1.25s linear infinite}
@keyframes v7Shimmer{to{transform:translateX(120%)}}
.toast{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
@media(prefers-reduced-motion:reduce){.photo.reveal-pending{opacity:1;transform:none;filter:none}.img-placeholder:after{display:none}}


/* ===== V8 polish ===== */
.upload-row.upload-error{border-color:rgba(239,92,110,.28);background:rgba(239,92,110,.045)}
.upload-row.upload-done .upload-status{font-weight:800}
.photo-scroll-sentinel{display:flex;justify-content:center;align-items:center;min-height:44px;margin:12px 0 20px}
.photo-scroll-sentinel.done{min-height:28px}
.kh-reveal{opacity:0;transform:translateY(14px);filter:blur(2px);transition:opacity .45s ease,transform .45s cubic-bezier(.2,.75,.2,1),filter .45s ease}
.kh-reveal.is-visible{opacity:1;transform:none;filter:none}
@media(prefers-reduced-motion:reduce){.kh-reveal{opacity:1;transform:none;filter:none;transition:none}}

/* ===== V9 Pro Gallery ===== */
.lightbox .lbcounter{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:5;padding:7px 12px;border-radius:999px;background:rgba(12,18,34,.5);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(14px);color:#fff;font-size:12px;font-weight:800;letter-spacing:.03em}
.lightbox .lbnav:disabled{opacity:.28;cursor:not-allowed;transform:none!important}
.lbthumbs{position:fixed;left:50%;bottom:82px;transform:translateX(-50%);z-index:4;display:flex;gap:7px;max-width:min(82vw,760px);overflow-x:auto;padding:6px 8px;border-radius:16px;background:rgba(12,18,34,.48);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(14px);scrollbar-width:none}
.lbthumbs::-webkit-scrollbar{display:none}
.lbthumb{position:relative;flex:0 0 52px;width:52px;height:42px;padding:0;border:1px solid rgba(255,255,255,.1);border-radius:9px;overflow:hidden;background:rgba(255,255,255,.08);cursor:pointer;opacity:.65;transition:.18s}
.lbthumb img{width:100%;height:100%;object-fit:cover;border-radius:0;box-shadow:none}
.lbthumb:hover{opacity:1;transform:translateY(-2px)}
.lbthumb.active{opacity:1;border-color:rgba(255,255,255,.9);box-shadow:0 0 0 2px rgba(255,255,255,.16)}
.lbthumb span{position:absolute;right:3px;bottom:2px;font-size:8px;line-height:12px;padding:0 4px;border-radius:6px;background:rgba(0,0,0,.55);color:#fff}
@media(max-width:700px){.lightbox .lbcounter{top:12px}.lbthumbs{bottom:70px;max-width:88vw}.lbthumb{flex-basis:46px;width:46px;height:38px}.lightbox .lbtools{bottom:14px}}
@media(prefers-reduced-motion:reduce){.lbthumb{transition:none}}
/* V10 Gallery Selection Pro */
#photoGrid .photo{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
#photoGrid .photo.selected{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 28%,transparent),0 16px 34px rgba(70,60,120,.12);transform:translateY(-2px)}
#photoGrid .photo.selected .pic:after{content:'✓';position:absolute;right:10px;top:10px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff;font-weight:800;box-shadow:0 6px 16px rgba(70,60,120,.22);z-index:4}
#photoGrid .photo .pic{position:relative}
.select-photo{cursor:pointer}
.bulkbar{backdrop-filter:blur(18px);box-shadow:0 10px 28px rgba(40,35,90,.10)}
@media(max-width:700px){.bulkbar{gap:6px;padding:9px}.bulkbar b{width:100%;margin:0}.bulkbar .btn{flex:1}.bulkbar select{width:100%;order:5}}
@media(prefers-reduced-motion:reduce){#photoGrid .photo{transition:none}}

/* V11 Smart Gallery */
.photo{position:relative;transition:transform .22s ease,box-shadow .22s ease,opacity .22s ease}
.photo.selected{box-shadow:0 0 0 2px rgba(120,120,255,.7),0 14px 34px rgba(90,80,180,.16)}
.photo-favorite{position:absolute;right:10px;top:10px;z-index:5;width:34px;height:34px;border:1px solid rgba(255,255,255,.45);border-radius:50%;background:rgba(255,255,255,.72);backdrop-filter:blur(12px);font-size:21px;line-height:1;cursor:pointer;transition:transform .18s ease,background .18s ease}
.photo-favorite:hover{transform:scale(1.08)}
.photo-favorite.active{background:rgba(255,230,245,.92);font-weight:800}
.photo.drop-before{transform:translateX(-8px) scale(.985);box-shadow:-4px 0 0 0 rgba(120,100,255,.9)}
.photo.drop-after{transform:translateX(8px) scale(.985);box-shadow:4px 0 0 0 rgba(120,100,255,.9)}
.photo[hidden]{display:none!important}
#favoriteFilterBtn.active{box-shadow:0 0 0 2px rgba(120,100,255,.28);font-weight:800}
@media (max-width:700px){.photo-favorite{width:32px;height:32px;right:8px;top:8px}.photo.drop-before{transform:translateY(-5px)}.photo.drop-after{transform:translateY(5px)}}
/* V11 Smart Gallery */
.photo{position:relative;transition:transform .22s ease,box-shadow .22s ease,opacity .22s ease}
.photo-favorite{position:absolute;right:10px;top:10px;z-index:5;width:34px;height:34px;border:1px solid rgba(255,255,255,.45);border-radius:50%;background:rgba(255,255,255,.72);backdrop-filter:blur(12px);font-size:21px;line-height:1;cursor:pointer;transition:transform .18s ease,background .18s ease}.photo-favorite:hover{transform:scale(1.08)}.photo-favorite.active{background:rgba(255,230,245,.92);font-weight:800}.photo.drop-before{transform:translateX(-8px) scale(.985);box-shadow:-4px 0 0 0 rgba(120,100,255,.9)}.photo.drop-after{transform:translateX(8px) scale(.985);box-shadow:4px 0 0 0 rgba(120,100,255,.9)}.photo[hidden]{display:none!important}#favoriteFilterBtn.active{box-shadow:0 0 0 2px rgba(120,100,255,.28);font-weight:800}@media(max-width:700px){.photo-favorite{width:32px;height:32px;right:8px;top:8px}.photo.drop-before{transform:translateY(-5px)}.photo.drop-after{transform:translateY(5px)}}

/* ===== V12 Dashboard Pro ===== */
.dash-insights{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 18px}
.insight{padding:15px 16px;display:flex;align-items:center;gap:12px;min-width:0}
.ins-icon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font-size:18px;flex:none}
.insight:nth-child(2) .ins-icon{background:var(--accent2-soft);color:var(--accent2)}
.insight:nth-child(3) .ins-icon{background:#fce7f3;color:#db2777}
.insight:nth-child(4) .ins-icon{background:var(--surface2);color:var(--muted)}
.insight b{display:block;font-size:18px;line-height:1.15}
.insight span:not(.ins-icon){display:block;color:var(--muted);font-size:11.5px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash-bottom-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:18px;margin-top:18px}
.activity-card,.health-card{padding:20px}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.panel-head h3{margin:0;font-size:15px}
.live-dot{font-size:10.5px;color:var(--accent2);white-space:nowrap}
.activity-row{display:flex;align-items:center;gap:11px;padding:10px 0;border-top:1px solid var(--line-soft)}
.activity-row:first-child{border-top:0}
.activity-ic{width:30px;height:30px;border-radius:10px;background:var(--surface2);display:grid;place-items:center;flex:none;font-size:15px;color:var(--accent)}
.integrity-head{display:flex;align-items:center;gap:14px}
.integrity-icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;flex:none;font-size:24px;background:var(--accent2-soft);color:var(--accent2)}
.integrity-icon.warn{background:var(--danger-soft);color:var(--danger)}
.activity-main{min-width:0;flex:1}.activity-main b{display:block;font-size:12.5px}.activity-main span{display:block;color:var(--muted);font-size:11px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.activity-time{font-size:10.5px;color:var(--muted2);white-space:nowrap}
.health-meter{height:10px;background:var(--surface2);border-radius:99px;overflow:hidden;margin:10px 0 7px}.health-meter>div{height:100%;width:100%;background:linear-gradient(90deg,var(--accent2),var(--accent));border-radius:inherit}
.health-score{display:flex;align-items:end;gap:8px}.health-score b{font-size:26px}.health-score span{font-size:11px;color:var(--muted);padding-bottom:4px}.health-list{margin-top:14px;display:grid;gap:8px}.health-item{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}.health-item b{color:var(--text)}
@media(max-width:900px){.dash-insights{grid-template-columns:repeat(2,1fr)}.dash-bottom-grid{grid-template-columns:1fr}}
@media(max-width:560px){.dash-insights{gap:8px}.insight{padding:12px}.ins-icon{width:34px;height:34px}.activity-card,.health-card{padding:15px}.activity-time{display:none}}

/* ===== V14 Smart Albums ===== */
.smart-album-section{padding:18px;margin:0 0 18px;background:linear-gradient(135deg,var(--surface),var(--surface2));overflow:hidden}
.smart-album-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}.smart-album-head h3{margin:3px 0}.smart-album-badge{font-size:10px;font-weight:900;letter-spacing:.12em;padding:6px 9px;border-radius:999px;background:var(--accent2-soft);color:var(--accent2);border:1px solid var(--line)}
.smart-album-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.smart-album-card{position:relative;display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--surface2);cursor:pointer;transition:.18s;overflow:hidden}.smart-album-card:hover{transform:translateY(-2px);border-color:var(--accent2);box-shadow:0 10px 28px rgba(70,70,140,.10)}.smart-album-card .sa-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-size:20px;background:var(--accent2-soft);flex:none}.smart-album-card .sa-name{font-weight:850}.smart-album-card .sa-meta{font-size:11px;color:var(--muted);margin-top:3px}.smart-album-card .sa-arrow{margin-left:auto;color:var(--muted2)}.smart-view-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:14px}.smart-view-toolbar .smart-result{margin-right:auto}@media(max-width:800px){.smart-album-grid{grid-template-columns:1fr 1fr}}@media(max-width:520px){.smart-album-grid{grid-template-columns:1fr}.smart-album-section{padding:14px}.smart-album-head{align-items:flex-start}.smart-view-toolbar{flex-wrap:wrap}}


/* ===== V15 Timeline Gallery ===== */
.timeline-jump{width:165px;min-width:145px}
#timelineToggleBtn.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft);color:var(--accent);font-weight:800}
#photoGrid.timeline-mode{grid-template-columns:repeat(4,minmax(0,1fr));align-items:start}
.timeline-marker{grid-column:1/-1;display:flex;align-items:center;gap:14px;padding:18px 2px 8px;position:sticky;top:0;z-index:3;pointer-events:none}
.timeline-marker:first-child{padding-top:4px}.timeline-line{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 6px var(--accent-soft);flex:none}
.timeline-label{padding:8px 13px;border:1px solid var(--line);background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(12px);border-radius:999px;box-shadow:0 6px 18px rgba(50,45,100,.07);font-weight:900;font-size:14px}.timeline-marker:after{content:'';height:1px;flex:1;background:linear-gradient(90deg,var(--line),transparent)}
@media(max-width:1000px){#photoGrid.timeline-mode{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.timeline-jump{flex:1;width:auto;min-width:130px}.timeline-marker{position:sticky;top:0;padding:13px 0 7px}.timeline-label{padding:7px 10px;font-size:12.5px}.timeline-marker:after{display:none}#photoGrid.timeline-mode{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.timeline-marker{scroll-behavior:auto}}


/* V16 Photo Details Pro */
.photo-details-modal{max-width:920px;width:min(920px,calc(100vw - 28px));}
.details-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:20px}.details-head h2{margin:4px 0 4px}.eyebrow{font-size:10px;letter-spacing:.14em;font-weight:800;color:var(--primary)}
.details-layout{display:grid;grid-template-columns:minmax(260px,.9fr) minmax(320px,1.1fr);gap:20px}.details-preview{position:relative;min-height:360px;border-radius:22px;overflow:hidden;background:linear-gradient(135deg,rgba(130,100,255,.12),rgba(255,120,190,.1));border:1px solid var(--line);display:flex;align-items:center;justify-content:center}.details-preview img{max-width:100%;max-height:520px;width:auto;height:auto;object-fit:contain;image-rendering:-webkit-optimize-contrast;filter:saturate(1.1) contrast(1.06) brightness(1.01)}.details-preview-badge{position:absolute;left:12px;top:12px;padding:7px 10px;border-radius:999px;background:rgba(20,20,35,.62);color:#fff;font-size:10px;font-weight:800;letter-spacing:.08em;backdrop-filter:blur(12px)}
.detail-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.detail-stat,.details-list>div{padding:13px 14px;border:1px solid var(--line);border-radius:15px;background:var(--surface2)}.detail-stat span,.details-list span{display:block;color:var(--muted2);font-size:11px;margin-bottom:4px}.detail-stat b{font-size:16px}.details-list{display:grid;gap:8px;margin-top:10px}.details-list>div{display:flex;justify-content:space-between;gap:14px}.details-list b{font-size:12px;text-align:right;overflow-wrap:anywhere}.details-description{margin-top:10px;padding:14px;border-radius:15px;background:var(--surface2);color:var(--muted);font-size:13px;min-height:48px}.details-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
@media(max-width:720px){.details-layout{grid-template-columns:1fr}.details-preview{min-height:240px;max-height:330px}.details-head{align-items:stretch;flex-direction:column}.details-head .btn{width:100%}.photo-details-modal{width:calc(100vw - 18px)}}


/* V17 — Favorites & Smart Actions */
.photo{position:relative}.photo-pin{position:absolute;top:10px;right:48px;z-index:4;border:1px solid var(--border);background:color-mix(in srgb,var(--surface) 78%,transparent);backdrop-filter:blur(12px);border-radius:12px;width:32px;height:32px;cursor:pointer;opacity:.78;transition:.2s;font-size:17px;display:grid;place-items:center;color:#e0455a}.photo-pin:hover,.photo-pin.active{opacity:1;transform:translateY(-1px);box-shadow:0 8px 22px rgba(90,70,150,.16)}.photo-pin.active{background:var(--surface2)}.photo.is-pinned{outline:2px solid color-mix(in srgb,var(--primary) 35%,transparent);outline-offset:2px}.photo.is-pinned .photo-pin{box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 12%,transparent)}
@media(max-width:640px){.photo-pin{top:8px;right:44px;width:30px;height:30px}.photo .pactions .mini{padding:7px 8px}}


/* V20 — scale-friendly gallery */
#photoGrid .photo { content-visibility: auto; contain-intrinsic-size: 320px 390px; }
#photoGrid { contain: layout paint; }
.photo-scroll-sentinel { min-height: 52px; display:flex; align-items:center; justify-content:center; }
@media (max-width: 700px) { #photoGrid .photo { contain-intrinsic-size: 46vw 340px; } }