/* ================================================================
   我们的婚纱照 — 样式
   配色沿用 mock 的方向：暖象牙底 + 暖金强调
   ================================================================ */

:root{
  --bg:#faf7f4;
  --surface:#ffffff;
  --ink:#2b2320;
  --ink-2:#7d726a;
  --ink-3:#b3a89f;
  --line:rgba(43,35,32,.08);
  --accent:#b08d6a;
  --danger:#c0563f;
  --gap:8px;
  --row:8px;
  --radius:10px;
  --topbar-h:0px;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:var(--bg);color:var(--ink);
  overscroll-behavior-y:none;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
[hidden]{display:none !important}
.dim{color:var(--ink-3)}
.pos{font-variant-numeric:tabular-nums}

/* ============================ 登录 ============================ */
.login{
  position:fixed;inset:0;z-index:100;
  display:grid;place-items:center;padding:24px;
  background:
    radial-gradient(120% 80% at 50% 0%,#fff 0%,var(--bg) 60%);
}
.login-card{
  width:100%;max-width:340px;text-align:center;
  display:flex;flex-direction:column;gap:16px;
}
/* ================================================================
   品牌标记（App 图标）
   ----------------------------------------------------------------
   ⚠️ 原来是 `.ring`：纯 CSS 画的同心圆环占位图。换成真正的图标之后
   才有"这是一个相册应用"的样子。
   尺寸保持 46px，和旧占位一致 —— 换图不该顺带改布局。
   ================================================================ */
.brand-mark{
  width:46px;height:46px;margin:0 auto;display:block;
  border-radius:12px;                      /* 图标本身已是圆角，这里再收一点 */
  box-shadow:0 2px 10px rgba(43,35,32,.10);
}

/* ================================================================
   空状态插图
   ----------------------------------------------------------------
   用图标的浅色版做插图：比纯文字多一层"相册"的暗示，又不抢眼。
   ⚠️ 它是装饰（aria-hidden + 空 alt），所以透明度压低、不参与交互。
   ================================================================ */
.empty-art{
  width:72px;height:72px;margin:0 auto 16px;display:block;
  opacity:.34;border-radius:18px;
}
/* 深色底（修图页）上要反过来提亮一点，否则几乎看不见 */
.edit-view .empty-art,
.read-view .empty-art{opacity:.5}
.login h1{font-size:20px;font-weight:600;letter-spacing:.03em}
.login .sub{font-size:12.5px;color:var(--ink-2);margin-top:-8px}

.field{display:block;text-align:left}
.field > span{
  display:block;font-size:12px;color:var(--ink-2);margin-bottom:7px;letter-spacing:.02em;
}
.field input{
  width:100%;height:48px;padding:0 15px;
  font-size:16px;font-family:inherit;color:var(--ink);
  background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);
  outline:none;transition:border-color .15s;
}
.field input:focus{border-color:var(--accent)}
.field input::placeholder{color:var(--ink-3)}

.seg{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
}
.seg button{
  height:48px;font-size:15px;border-radius:var(--radius);
  background:var(--surface);border:1px solid var(--line);
  color:var(--ink-2);transition:all .15s;
}
.seg button.on{
  background:var(--accent);border-color:var(--accent);
  color:#fff;font-weight:500;
}

.primary{
  height:50px;margin-top:6px;
  background:var(--ink);color:#fff;
  font-size:16px;font-weight:500;letter-spacing:.04em;
  border-radius:var(--radius);
  transition:opacity .15s;
}
.primary:active{opacity:.82}
.primary:disabled{opacity:.5}

.err{
  min-height:18px;font-size:12.5px;color:var(--danger);text-align:center;
}

/* ============================ 顶栏 ============================ */
.app{min-height:100%;padding-bottom:40px}

.topbar{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:flex-start;gap:10px;
  padding:calc(env(safe-area-inset-top) + 13px) 16px 11px;
  background:rgba(250,247,244,.86);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--line);
}
.tb-main{flex:1;min-width:0}
.topbar h1{
  font-size:18px;font-weight:600;letter-spacing:.02em;
  display:flex;align-items:baseline;gap:7px;
}
.topbar h1 .dot{
  width:6px;height:6px;border-radius:50%;background:var(--accent);
  flex:none;transform:translateY(-2px);
}
.topbar .meta{
  margin-top:3px;font-size:12px;color:var(--ink-2);
}

.icon-btn{
  flex:none;width:36px;height:36px;
  display:grid;place-items:center;
  font-size:17px;color:var(--ink-2);border-radius:9px;
  transition:background .15s;
}
.icon-btn:active{background:rgba(43,35,32,.06)}
.icon-btn.light{color:#fff}

/* ============================ 时间线 ============================ */
.timeline{padding:0 12px}

.day{margin-top:18px}
.day-title{
  position:sticky;z-index:20;
  display:flex;align-items:center;gap:8px;
  padding:9px 4px;
  font-size:13px;font-weight:600;
  background:linear-gradient(var(--bg) 74%,rgba(250,247,244,0));
}
.day-title .count{
  margin-left:auto;font-weight:400;font-size:11.5px;color:var(--ink-3);
}

.grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  grid-auto-rows:var(--row);
  gap:var(--gap);
}
@media(min-width:560px){ .grid{grid-template-columns:repeat(3,1fr)} }
@media(min-width:860px){ .grid{grid-template-columns:repeat(4,1fr)} }
@media(min-width:1180px){ .grid{grid-template-columns:repeat(5,1fr)} }

.cell{
  position:relative;overflow:hidden;
  border-radius:var(--radius);
  background:#efe9e3;
  box-shadow:0 1px 2px rgba(43,35,32,.06),0 6px 16px -8px rgba(43,35,32,.16);
  grid-row-end:span 20;
  opacity:0;transition:opacity .35s ease;
  cursor:zoom-in;
}
.cell.ready{opacity:1}
.cell:active{transform:scale(.985);transition:transform .1s}
.cell img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
}
.cell .ph{
  position:absolute;inset:0;
  background:linear-gradient(100deg,#efe9e3 30%,#f6f1ec 50%,#efe9e3 70%);
  background-size:220% 100%;
  animation:shimmer 1.3s linear infinite;
}
.cell.ready .ph{display:none}
@keyframes shimmer{from{background-position:120% 0}to{background-position:-120% 0}}

/* 标记：派生图待补 */
.cell .badge{
  position:absolute;right:6px;top:6px;
  padding:2px 6px;border-radius:5px;
  font-size:10px;color:#fff;background:rgba(0,0,0,.5);
  backdrop-filter:blur(4px);
}

/* ============================ 状态 ============================ */
.loading{
  display:flex;align-items:center;justify-content:center;gap:9px;
  padding:26px 0 34px;
  font-size:12.5px;color:var(--ink-3);
}
.spinner{
  width:15px;height:15px;flex:none;
  border:1.8px solid rgba(176,141,106,.25);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.empty{
  padding:80px 24px;text-align:center;
  font-size:14px;color:var(--ink-2);
}
.empty .dim{font-size:12.5px;margin-top:6px;color:var(--ink-3)}

.sentinel{height:1px}

.fab{
  position:fixed;right:16px;
  bottom:calc(env(safe-area-inset-bottom) + 20px);
  z-index:40;
  width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;
  font-size:17px;color:#fff;background:rgba(43,35,32,.72);
  backdrop-filter:blur(8px);
  box-shadow:0 4px 16px -4px rgba(0,0,0,.35);
}

/* ============================ 弹层菜单 ============================ */
.sheet{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;justify-content:flex-end}
.sheet-mask{position:absolute;inset:0;background:rgba(20,16,14,.42)}
.sheet-body{
  position:relative;
  background:var(--surface);
  border-radius:16px 16px 0 0;
  padding:8px 12px calc(env(safe-area-inset-bottom) + 12px);
  animation:up .22s cubic-bezier(.22,1,.36,1);
}
@keyframes up{from{transform:translateY(100%)}to{transform:none}}
.sheet-title{
  padding:14px 8px 10px;font-size:12px;color:var(--ink-3);letter-spacing:.04em;
}
.sheet-item{
  display:flex;align-items:center;
  width:100%;height:50px;padding:0 10px;
  font-size:15.5px;text-align:left;
  border-radius:10px;color:var(--ink);
}
.sheet-item:active{background:rgba(43,35,32,.05)}
.sheet-item.danger{color:var(--danger)}
.sheet-foot{
  padding:12px 10px 4px;font-size:11px;color:var(--ink-3);line-height:1.6;
}

/* ============================ 大图 ============================ */
.viewer{
  position:fixed;inset:0;z-index:90;
  background:#0d0d0f;
  display:flex;flex-direction:column;
  animation:fade .18s ease;
}
@keyframes fade{from{opacity:0}to{opacity:1}}

.viewer-stage{
  flex:1;min-height:0;position:relative;
  display:grid;place-items:center;
  overflow:hidden;
  touch-action:pan-y;
}
.viewer-stage img{
  max-width:100%;max-height:100%;
  object-fit:contain;
  transition:transform .22s cubic-bezier(.22,1,.36,1),opacity .2s;
  will-change:transform;
}
.viewer-spinner{
  position:absolute;inset:0;
  display:grid;place-items:center;
}
.viewer-spinner .spinner{
  width:22px;height:22px;
  border-width:2px;
  border-color:rgba(255,255,255,.2);
  border-top-color:#fff;
}
.viewer-bar{
  flex:none;
  display:flex;align-items:center;gap:12px;
  padding:12px 14px calc(env(safe-area-inset-bottom) + 12px);
  font-size:12.5px;color:rgba(255,255,255,.75);
}
.viewer-bar .pos{margin-left:auto}
.viewer-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:52px;height:72px;
  display:grid;place-items:center;
  font-size:30px;color:rgba(255,255,255,.62);
  transition:color .15s;
}
.viewer-nav:active{color:#fff}
.viewer-nav.prev{left:0}
.viewer-nav.next{right:0}
@media(hover:hover) and (pointer:fine){
  .viewer-nav:hover{color:#fff}
}

/* ============================ 幻灯片 ============================ */
/* ================================================================
   幻灯片 / 全屏播放
   ----------------------------------------------------------------
   背景用 stage-bg.png（暗底 + 中心一圈微弱辉光），不是纯黑。
   为什么值得换：纯黑衬托照片会显得"硬"，而这张图的辉光正好在中心，
   和 object-fit:contain 的照片区域重合，照片边缘和环境过渡更自然。

   ⚠️ 必须留 background-color 兜底：它在 Service Worker 的 shell 里，
   但首次安装/离线首次打开时可能还没缓存到 —— 没有兜底色就会闪白底。
   ⚠️ cover + center 保证各种屏幕比例都只取中心那块辉光。
   ================================================================ */
.show{
  position:fixed;inset:0;z-index:95;
  background:#15110f url("assets/gen/stage-bg.png") center/cover no-repeat;
  display:grid;place-items:center;
}
.show img{
  max-width:100%;max-height:100%;
  object-fit:contain;
  animation:kb 6s ease-out both;
}
@keyframes kb{from{opacity:0;transform:scale(1.03)}to{opacity:1;transform:none}}
.show-bar{
  position:absolute;left:0;right:0;
  bottom:calc(env(safe-area-inset-bottom) + 14px);
  display:flex;align-items:center;gap:14px;
  padding:0 18px;
  font-size:12.5px;color:rgba(255,255,255,.72);
  transition:opacity .3s;
}
.show-bar .pos{margin-left:auto}
.show-bar.hide{opacity:0;pointer-events:none}

/* ============================ Toast ============================ */
.toast{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(env(safe-area-inset-bottom) + 74px);
  z-index:120;
  max-width:80vw;
  padding:10px 16px;border-radius:20px;
  font-size:13px;color:#fff;background:rgba(43,35,32,.9);
  backdrop-filter:blur(8px);
  animation:toastIn .2s ease;
}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}

/* ============================ 上传面板 ============================ */
.upload-panel{
  position:fixed;left:0;right:0;
  bottom:calc(env(safe-area-inset-bottom) + 10px);
  z-index:70;
  margin:0 10px;
  background:var(--surface);
  border-radius:14px;
  box-shadow:0 10px 34px -10px rgba(43,35,32,.4),0 0 0 1px var(--line);
  overflow:hidden;
  animation:up .22s cubic-bezier(.22,1,.36,1);
}
.up-head{
  display:flex;align-items:center;gap:10px;
  padding:12px 8px 10px 14px;
}
.up-title{font-size:13.5px;font-weight:500}
.up-count{font-size:12px;color:var(--ink-3);margin-left:auto;font-variant-numeric:tabular-nums}
.up-head .icon-btn{width:30px;height:30px;font-size:14px}

.up-bar{height:2.5px;background:rgba(43,35,32,.07)}
.up-bar > i{
  display:block;height:100%;width:0;
  background:var(--accent);
  transition:width .25s ease;
}

.up-list{
  max-height:34vh;overflow-y:auto;
  padding:6px 6px 8px;
  -webkit-overflow-scrolling:touch;
}
.up-item{
  display:flex;align-items:center;gap:9px;
  padding:7px 8px;border-radius:8px;
  font-size:12.5px;
}
.up-item + .up-item{border-top:1px solid var(--line)}
.up-item .nm{
  flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--ink-2);
}
.up-item .st{flex:none;font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.up-item.done .st{color:#4caf7d}
.up-item.fail .st{color:var(--danger)}
.up-item.fail .nm{color:var(--danger)}
.up-item .retry{
  flex:none;font-size:11.5px;color:var(--accent);
  padding:2px 7px;border-radius:6px;background:rgba(176,141,106,.1);
}

/* ============================ 无障碍 ============================ */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .cell{opacity:1}
}