v9: 观影对齐 MovieLog —— 瀑布流/影院管理/评价评论/起止时间

- events 起止时间精确到秒（starts_at DATE→DATETIME + ends_at），_datetime.php 复用 - 影院独立成表（cinemas，地方/名称/地址/主题色 + 50 色板），movie_details 归一为 cinema_id - 评价模型 MovieLog 同款：movie_reviews 每账号每片一条（1-10 分+正文+感受 key）， movie_review_comments 两级平铺评论（回复的回复规范化到顶层、跨评价回复拦截） - 感受目录迁到 MovieReview::CATALOG（12 种，Emoji 11.0 老码位） - 观影列表改瀑布流（CSS grid 海报墙），详情页五大块 + 灯箱 + 评价区 - 升级路径：v8 老数据自动归一（影院三段按 (family,place,name) 去重建行、评价回填、中文感受反查英文 key），回填全部幂等；老库补 cinema_id 列+索引+外键 - 修三 bug：建表顺序（cinemas 必须在 movie_details 前，否则全新安装 1215）、 layout 导航用键名当路由（影院链接指向 r=cinemas）、 _datetime.php 分钟循环变量 $m 覆盖宿主模板的观影记录（编辑页简介/备注回填被清空）
2026-10-01 00:12:04 +08:00
parent ff353b1eee
commit 746f02581e
13 changed files with 2001 additions and 356 deletions
@@ -759,73 +759,333 @@ textarea.input { min-height: 76px; resize: vertical; }
  .ct-row .ct-label { flex: none; }
 }

-/* ===== 观影（v8，MovieLog 迁入） ===== */
-.movie-list { display: flex; flex-direction: column; gap: 10px; }
+/* ===== 观影 v9：瀑布流海报墙 + MovieLog 式详情/评价/影院 ===== */
+
+/* ---- 搜索栏 ---- */
+.search-bar {
+  display: flex; gap: 10px; align-items: center;
+  background: var(--surface); padding: 8px 16px;
+  border-radius: 12px; box-shadow: var(--shadow);
+  border: 1px solid var(--line); max-width: 500px; margin-bottom: 20px;
+}
+.search-bar input[type="text"] {
+  flex: 1; border: none; outline: none; padding: 8px 10px;
+  font-size: 15px; background: transparent; color: var(--ink);
+}
+.search-bar button {
+  background: var(--brand); color: #fff; border: none;
+  padding: 8px 20px; border-radius: 8px; font-weight: 600;
+  cursor: pointer; white-space: nowrap;
+}
+.search-bar button:hover { background: var(--brand-2); }
+.search-clear { color: var(--muted); font-size: 14px; padding: 8px 4px; white-space: nowrap; }
+
+/* ---- 瀑布流海报墙 ---- */
+.waterfall {
+  display: grid; gap: 20px; padding: 4px 0;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+}
 .movie-card {
-  display: flex; gap: 14px; align-items: center;
-  padding: 10px; background: var(--card-bg, #fff);
-  border: 1px solid var(--line); border-radius: 12px;
+  background: var(--surface); border-radius: var(--radius);
+  overflow: hidden; box-shadow: var(--shadow); cursor: pointer;
+  border: 1px solid var(--line); display: flex; flex-direction: column;
  text-decoration: none; color: var(--ink);
 }
-.movie-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-l); text-decoration: none; }
-.m-poster {
-  flex: 0 0 64px; width: 64px; height: 96px; object-fit: cover;
-  border-radius: 8px; background: var(--line-2); display: block;
+.movie-card:hover {
+  transform: translateY(-6px); box-shadow: var(--shadow-l);
+  border-color: var(--brand-2); text-decoration: none;
 }
-.m-poster-empty {
-  display: flex; align-items: center; justify-content: center;
-  color: var(--faint, #B9AE9F); font-size: 20px; font-weight: 600;
+.card-image {
+  width: 100%; aspect-ratio: 2 / 3; background: var(--line-2);
+  overflow: hidden; display: flex; align-items: center; justify-content: center;
+  position: relative; flex-shrink: 0;
 }
-.m-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
-.m-title { font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
-.rating {
-  background: var(--brand); color: #fff; border-radius: 999px;
-  padding: 1px 8px; font-size: 12px; font-weight: 600;
-  font-variant-numeric: tabular-nums;
+.card-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
+.movie-card:hover .card-image img { transform: scale(1.03); }
+.placeholder-poster {
+  width: 100%; height: 100%; display: flex; flex-direction: column;
+  align-items: center; justify-content: center; gap: 6px;
+  background: linear-gradient(135deg, #4a3a30, #2C231D);
+  color: rgba(255, 255, 255, .55); font-size: 42px; font-weight: 600;
 }
-.rating-lg { font-size: 14px; padding: 2px 10px; }
-.m-meta { color: var(--muted); font-size: 13px; }
-.m-who { color: var(--muted); font-size: 12px; }
+.placeholder-poster .placeholder-title {
+  font-size: 14px; text-align: center; padding: 0 12px;
+  color: rgba(255, 255, 255, .75); font-weight: 500;
+}
+.card-body { padding: 14px 16px 16px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
+.card-title {
+  font-size: 16px; font-weight: 600; color: var(--ink);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.card-meta {
+  display: flex; flex-wrap: wrap; gap: 6px 12px;
+  font-size: 13px; color: var(--muted);
+}
+.card-meta span { display: inline-flex; align-items: center; gap: 3px; }
+.meta-rating { color: var(--brand); font-weight: 600; }
+.meta-rating-max { color: var(--muted); font-weight: 400; }
+.card-viewers { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: auto; }
+.viewer-tag {
+  display: inline-flex; align-items: center; gap: 4px; font-size: 12px;
+  padding: 2px 8px; border-radius: 12px; background: var(--line-2);
+  color: var(--ink); text-decoration: none;
+}
+.viewer-tag:hover { text-decoration: none; background: var(--line); }
+.viewer-tag img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }

-.movie-detail { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: start; }
-.m-poster-col { display: flex; flex-direction: column; gap: 12px; }
-.m-poster-lg {
-  width: 100%; aspect-ratio: 2 / 3; object-fit: cover;
-  border-radius: 12px; background: var(--line-2); display: flex;
+/* ---- 详情页 ---- */
+.detail-hero {
+  display: grid; grid-template-columns: 300px 1fr; gap: 32px;
+  background: var(--surface); border-radius: var(--radius);
+  padding: 28px; box-shadow: var(--shadow); margin-bottom: 20px;
+  border: 1px solid var(--line);
+}
+.detail-poster {
+  border-radius: 12px; overflow: hidden; background: var(--line-2);
+  aspect-ratio: 2 / 3; display: flex; align-items: center; justify-content: center;
+}
+.detail-poster img { width: 100%; height: 100%; object-fit: cover; }
+.detail-poster .placeholder-poster { font-size: 48px; }
+.detail-poster .placeholder-poster .placeholder-title { font-size: 16px; }
+.detail-info { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
+.detail-info h1 { font-size: 26px; font-weight: 700; margin: 0 0 4px; color: var(--ink); }
+.detail-info .meta-row { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 14px; color: var(--muted); }
+.detail-info .meta-row span { display: inline-flex; align-items: center; gap: 4px; }
+.info-text { color: var(--ink); line-height: 1.7; font-size: 15px; }
+.remark-text {
+  background: var(--line-2); padding: 12px 16px; border-radius: 8px;
+  color: var(--ink); border-left: 4px solid var(--brand); font-size: 14px;
+}
+.detail-section {
+  background: var(--surface); border-radius: var(--radius);
+  padding: 24px 28px; box-shadow: var(--shadow); margin-bottom: 20px;
+  border: 1px solid var(--line);
+}
+.detail-section h3 {
+  font-size: 17px; font-weight: 600; margin: 0 0 16px; color: var(--ink);
+  display: flex; align-items: center; gap: 10px;
+}
+.detail-section h3 .badge {
+  font-size: 13px; font-weight: 400; background: var(--line-2);
+  padding: 2px 12px; border-radius: 20px; color: var(--muted);
+}
+.empty-hint { color: var(--muted); font-size: 14px; margin: 0; }
+.viewers-list { display: flex; flex-wrap: wrap; gap: 12px; }
+.viewers-list .viewer-tag { padding: 4px 12px 4px 6px; font-size: 14px; }
+.viewers-list .viewer-tag img,
+.viewers-list .rv-avatar-text { width: 28px; height: 28px; }
+.cinema-info {
+  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; font-size: 15px;
+}
+.cinema-info .label { color: var(--muted); }
+.cinema-info .value { color: var(--ink); font-weight: 500; }
+
+/* ---- 影像记录 ---- */
+.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
+.gallery-item {
+  border-radius: 10px; overflow: hidden; background: var(--line-2);
+  aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
+  cursor: pointer; transition: transform .2s; position: relative;
+  border: 1px solid var(--line);
+}
+.gallery-item:hover { transform: scale(1.02); }
+.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.gallery-item .label-badge {
+  position: absolute; bottom: 8px; left: 8px;
+  background: rgba(0, 0, 0, .7); color: #fff; font-size: 11px;
+  padding: 2px 12px; border-radius: 12px;
+}
+
+/* ---- 图片灯箱 ---- */
+.lb-openable { cursor: zoom-in; }
+.lb-openable:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
+.lightbox {
+  position: fixed; inset: 0; z-index: 300; display: none;
  align-items: center; justify-content: center;
-  color: var(--faint, #B9AE9F); font-size: 40px; font-weight: 600;
+  background: rgba(0, 0, 0, .88); overscroll-behavior: contain;
 }
-a .m-poster-lg { display: block; }
-.m-ticket { width: 100%; border-radius: 10px; border: 1px solid var(--line); display: block; }
-.m-info .m-score { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
-.badge-feel { background: #F6E3D7; color: var(--brand-ink); }
-.m-block { margin-top: 16px; }
-.m-block h3 { font-size: 14px; margin: 0 0 6px; color: var(--muted); font-weight: 500; }
-.m-block p { margin: 0; font-size: 14px; line-height: 1.7; white-space: normal; }
-
-.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
-.photo-cell { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
-.photo-cell img { width: 100%; height: 160px; object-fit: cover; display: block; }
-.photo-del {
-  position: absolute; top: 6px; right: 6px;
-  width: 24px; height: 24px; border-radius: 50%; border: 0;
-  background: rgba(0,0,0,.55); color: #fff; font-size: 16px; line-height: 1;
-  cursor: pointer; padding: 0;
+.lightbox.open { display: flex; }
+.lb-stage { display: flex; align-items: center; justify-content: center; max-width: 92vw; max-height: 82vh; }
+.lb-img {
+  max-width: 92vw; max-height: 78vh; width: auto; height: auto;
+  object-fit: contain; border-radius: 8px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
+  user-select: none; -webkit-user-drag: none;
 }
-.photo-del:hover { background: var(--red, #C0533F); }
-.photo-add label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
-.photo-add-row { display: flex; gap: 10px; align-items: center; }
-.photo-add-row .input { flex: 1; }
+.lb-btn {
+  position: absolute; border: none; cursor: pointer; color: #fff;
+  background: rgba(255, 255, 255, .12); display: flex;
+  align-items: center; justify-content: center;
+  transition: background-color .2s ease; font-family: inherit;
+}
+.lb-btn:hover { background: rgba(255, 255, 255, .26); }
+.lb-btn[hidden] { display: none; }
+.lb-close { top: 14px; right: 16px; width: 40px; height: 40px; border-radius: 50%; font-size: 18px; }
+.lb-nav { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; font-size: 28px; padding-bottom: 4px; }
+.lb-prev { left: 14px; }
+.lb-next { right: 14px; }
+.lb-bar {
+  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 20px;
+  display: flex; align-items: center; justify-content: space-between; gap: 12px;
+  color: #fff; font-size: 14px;
+  background: linear-gradient(to top, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
+}
+.lb-caption { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.lb-counter { flex: 0 0 auto; opacity: .75; font-variant-numeric: tabular-nums; }

-.feel-grid { display: flex; flex-wrap: wrap; gap: 8px 16px; }
-.feel-item { display: flex; align-items: center; gap: 5px; font-size: 14px; cursor: pointer; }
-.feel-item input { accent-color: var(--brand); }
+/* ---- 评价与评论 ---- */
+.rv-composer > summary { list-style: none; cursor: pointer; }
+.rv-composer > summary::-webkit-details-marker { display: none; }
+.rv-open-btn {
+  display: inline-block; padding: 8px 18px; border-radius: 10px;
+  background: linear-gradient(135deg, var(--brand), var(--brand-2));
+  color: #fff; font-size: 14px; font-weight: 600; user-select: none;
+}
+.rv-open-btn:hover { text-decoration: none; box-shadow: var(--shadow-l); }
+.rv-composer[open] > .rv-open-btn { background: var(--line-2); color: var(--muted); }
+.rv-act-btn {
+  display: inline-block; padding: 4px 12px; border: 1px solid var(--line);
+  border-radius: 20px; background: var(--surface); color: var(--muted);
+  font-size: 12.5px; user-select: none; cursor: pointer;
+}
+.rv-act-btn:hover { border-color: var(--brand); color: var(--brand); text-decoration: none; }
+.rv-composer[open] > .rv-act-btn { border-color: var(--brand); background: rgba(168, 74, 40, .08); color: var(--brand); font-weight: 600; }
+.rv-form { background: var(--line-2); border-radius: 12px; padding: 16px 18px; margin-top: 10px; }
+.rv-composer > .rv-form { margin-bottom: 0; }
+.rv-form-inline { padding: 12px 14px; }
+.rv-rating-row { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; margin-bottom: 12px; }
+.rv-rating-label { font-size: 14px; font-weight: 600; color: var(--ink); }
+.rv-scale { display: flex; gap: 6px; flex-wrap: wrap; }
+.rv-num { position: relative; }
+.rv-num input { position: absolute; width: 1px; height: 1px; opacity: 0; }
+.rv-num span {
+  display: inline-flex; align-items: center; justify-content: center;
+  min-width: 34px; height: 34px; padding: 0 6px;
+  border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
+  color: var(--muted); font-size: 14px; font-weight: 600;
+  cursor: pointer; user-select: none;
+}
+.rv-num:hover span { border-color: var(--brand); color: var(--brand); }
+.rv-num input:checked + span { background: var(--brand); border-color: transparent; color: #fff; }
+.rv-num:focus-within span { outline: 2px solid var(--brand); outline-offset: 1px; }
+.rv-word { font-size: 13px; color: var(--muted); }
+.rv-word.is-set { color: var(--brand); font-weight: 600; }
+.rv-textarea {
+  width: 100%; min-height: 92px; resize: vertical; padding: 12px 14px;
+  border: 1px solid var(--line); border-radius: 10px; font-size: 15px;
+  font-family: inherit; line-height: 1.7; background: var(--surface);
+  color: var(--ink); box-sizing: border-box;
+}
+.rv-textarea:focus { outline: none; border-color: var(--brand); }
+.rv-textarea-sm { min-height: 56px; font-size: 14px; }
+.rv-form-foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
+.rv-form-foot .rv-hint { margin-right: auto; }
+.rv-hint { font-size: 12px; color: var(--muted); }
+.rv-pick-label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
+.rv-empty { color: var(--muted); font-size: 14px; }
+.rv-list { display: flex; flex-direction: column; gap: 18px; }
+.rv-item { border-top: 1px solid var(--line-2); padding-top: 16px; }
+.rv-item:first-child { border-top: none; padding-top: 0; }
+.rv-head { display: flex; align-items: center; gap: 10px; }
+.rv-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
+.rv-avatar-sm { width: 26px; height: 26px; }
+.rv-avatar-text {
+  display: inline-flex; align-items: center; justify-content: center;
+  background: var(--line-2); color: var(--muted); font-weight: 600; font-size: 15px;
+}
+.rv-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.rv-name { font-size: 14px; font-weight: 600; color: var(--ink); }
+.rv-mine {
+  display: inline-block; vertical-align: middle; margin-left: 6px;
+  font-size: 11px; line-height: 16px; background: var(--brand);
+  color: #fff; border-radius: 6px; padding: 0 6px;
+}
+.rv-time { display: block; font-size: 12px; color: var(--muted); }
+.rv-score { flex: 0 0 auto; font-size: 20px; font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; }
+.rv-score-max { font-size: 12px; font-weight: 500; color: var(--muted); }
+.rv-del { margin-left: auto; }
+.rv-del-btn {
+  background: none; border: none; cursor: pointer; color: var(--muted);
+  font-size: 14px; line-height: 1; padding: 4px 6px; border-radius: 6px;
+}
+.rv-del-btn:hover { background: rgba(192, 83, 63, .12); color: var(--red); }
+.rv-content {
+  margin: 8px 0 2px 44px; font-size: 15px; line-height: 1.75;
+  color: var(--ink); word-break: break-word;
+}
+.rv-updated { margin-left: 44px; font-size: 12px; color: var(--muted); }
+.rv-comments { margin: 10px 0 10px 44px; display: flex; flex-direction: column; gap: 8px; }
+.rv-comment { display: flex; gap: 8px; background: var(--line-2); border-radius: 10px; padding: 8px 12px; }
+.rv-c-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.rv-c-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.rv-c-head .rv-name { font-size: 13px; }
+.rv-c-text { font-size: 14px; line-height: 1.7; color: var(--ink); word-break: break-word; }
+.rv-c-acts { margin-top: 6px; }
+.rv-thread { display: flex; flex-direction: column; gap: 6px; }
+.rv-comment-reply { margin-left: 22px; }
+.rv-at { font-size: 12.5px; color: var(--muted); margin-bottom: 2px; }
+.rv-at span { color: var(--brand); font-weight: 600; }
+.rv-actions { display: flex; align-items: flex-start; gap: 8px 10px; flex-wrap: wrap; margin: 12px 0 0 44px; }
+.rv-feelings { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 2px; }
+.rv-item > .rv-feelings { margin-left: 44px; }
+.rv-feeling-pick { margin-top: 8px; }
+.feel-chips { display: flex; flex-wrap: wrap; gap: 6px; }
+.feel-chip { display: inline-flex; }
+.feel-pick { position: relative; }
+.feel-pick input { position: absolute; width: 1px; height: 1px; opacity: 0; }
+.feel-inner {
+  display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px;
+  border: 1px solid var(--line); border-radius: 20px; background: var(--surface);
+  font-size: 13px; color: var(--muted); cursor: pointer; user-select: none;
+}
+.feel-pick:hover .feel-inner { border-color: var(--brand); }
+.feel-pick input:checked + .feel-inner { border-color: var(--brand); background: rgba(168, 74, 40, .10); color: var(--brand); font-weight: 600; }
+.feel-pick:focus-within .feel-inner { outline: 2px solid var(--brand); outline-offset: 1px; }
+.feel-emoji { font-size: 14px; }
+.feel-chip.is-static {
+  align-items: center; gap: 4px; padding: 2px 10px; border-radius: 20px;
+  background: rgba(168, 74, 40, .10); color: var(--brand); font-size: 12px;
+}

+/* ---- 影院管理页 ---- */
+.cinema-h2 { font-size: 17px; font-weight: 600; margin: 0 0 14px; }
+.cinema-select-row { display: flex; gap: 10px; align-items: center; }
+.cinema-select-row .select { flex: 1; }
+.color-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
+.color-picker { width: 60px; height: 40px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); cursor: pointer; }
+.color-hex { font-size: 14px; color: var(--muted); font-family: monospace; }
+.preset-palette { display: flex; flex-wrap: wrap; gap: 6px; }
+.preset-color {
+  display: inline-block; width: 28px; height: 28px; border-radius: 50%;
+  cursor: pointer; border: 2px solid transparent; transition: transform .2s, border-color .2s;
+}
+.preset-color:hover { transform: scale(1.1); }
+.preset-color.active { border-color: var(--ink); }
+.color-preview {
+  display: inline-block; width: 14px; height: 14px; border-radius: 3px;
+  margin-right: 6px; vertical-align: middle; border: 1px solid var(--line);
+}
+.table-wrap { overflow-x: auto; }
+.table { width: 100%; border-collapse: collapse; font-size: 14px; }
+.table th { text-align: left; padding: 10px 8px; border-bottom: 2px solid var(--line); color: var(--muted); font-weight: 600; }
+.table td { padding: 10px 8px; border-bottom: 1px solid var(--line-2); }
+.table tr:hover td { background: var(--line-2); }
+
+/* ---- 观影响应式 ---- */
@media (max-width: 720px) {
-  .movie-detail { grid-template-columns: 1fr; }
-  .m-poster-col { flex-direction: row; }
-  .m-poster-col .m-poster-lg, .m-poster-col a:first-child { flex: 0 0 140px; width: 140px; }
-  .m-ticket { width: auto; max-width: 55%; }
-  .photo-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
-  .photo-cell img { height: 120px; }
+  .waterfall { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
+  .card-body { padding: 10px 12px 12px; }
+  .card-title { font-size: 14px; }
+  .card-meta { font-size: 11px; gap: 4px 10px; }
+  .detail-hero { grid-template-columns: 1fr; padding: 20px; }
+  .detail-poster { max-width: 240px; margin: 0 auto; }
+  .cinema-info { grid-template-columns: 1fr; }
+  .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
+  .detail-section { padding: 16px 18px; }
+  .detail-info h1 { font-size: 22px; }
+  .rv-content, .rv-updated, .rv-comments, .rv-actions, .rv-item > .rv-feelings { margin-left: 0; }
+  .rv-comment-reply { margin-left: 10px; }
+  .lb-nav { width: 40px; height: 40px; font-size: 24px; }
+  .lb-prev { left: 6px; }
+  .lb-next { right: 6px; }
+  .lb-img { max-width: 88vw; max-height: 70vh; }
 }