/* 云深处 v13（2026-10-19）：配色和按钮跟人物平台（hub）同一套。
   - 配色取自应用图标：只有明、暗两套，默认跟随系统；卡片、按钮一律实色，不用实时模糊；
   - 启航 v13 要求：没有侧栏和底栏，图库 / 收藏 / 回收站和设置都放进顶部「⋯」二级菜单；主页不分组；
     顶栏吸顶、避开 iOS 状态栏下面那段模糊；详情页白底，四个功能按钮放顶部。 */
:root{
  --base:#050506;--card:#111114;--card-2:#19191d;--line:#26262c;--line-strong:#37373f;
  --ink:#fff;--soft:#d8d9de;--muted:#9a9ba5;--faint:#65666f;
  --primary:#fff;--primary-ink:#0b0c0f;--primary-hover:#e6e7eb;
  --accent:#a4c2ec;--accent-soft:#1a2130;
  --heart:#f6ac91;--bad:#f6ac91;--bad-bg:#33201a;--bad-fill:#f08a6c;--bad-ink:#1d0a05;
  --glow-1:rgba(159,190,232,.13);--glow-2:rgba(159,218,172,.07);
  --shadow:0 14px 40px rgba(0,0,0,.45);
  --radius:20px;--tile-radius:10px;--gap:6px;--cols:6;
  /* iOS 26 Safari 会给状态栏下面一小段内容加模糊渐变，顶栏额外下移这么多，文字和按钮不再被糊住 */
  --top-clear:6px;
  --sans:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Consolas,"Cascadia Mono",monospace;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --base:#f4f4f6;--card:#fff;--card-2:#f0f1f4;--line:#e3e4e9;--line-strong:#cfd1d8;
  --ink:#0b0c0f;--soft:#2b2d34;--muted:#5f626c;--faint:#9a9ca6;
  --primary:#0b0c0f;--primary-ink:#fff;--primary-hover:#26272d;
  --accent:#2f63c8;--accent-soft:#e7eefb;
  --heart:#e0603f;--bad:#b3261e;--bad-bg:#fbe4e1;--bad-fill:#c8372b;--bad-ink:#fff;
  --glow-1:rgba(120,165,230,.16);--glow-2:rgba(120,200,150,.10);
  --shadow:0 14px 40px rgba(20,22,34,.14);
  color-scheme:light;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent;scrollbar-color:var(--line-strong) var(--base)}
body{margin:0;min-height:100vh;background:var(--base);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased;overscroll-behavior-x:none}
button,input,select{font:inherit;color:inherit}
button{border:0;background:none;padding:0;cursor:pointer;touch-action:manipulation}
button:disabled{cursor:default;opacity:.4}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
img{display:block;max-width:100%}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
button:focus:not(:focus-visible){outline:none}
::selection{background:var(--accent-soft);color:var(--ink)}
.symbols{position:absolute;width:0;height:0;overflow:hidden}
svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.icon{width:22px;height:22px}
.muted{color:var(--muted)}

/* 静态底色光晕（单独合成层，滚动不重绘） */
.app-shell::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;transform:translateZ(0);
  background:radial-gradient(55% 40% at 14% 30%,var(--glow-1),transparent 72%),radial-gradient(50% 40% at 92% 70%,var(--glow-2),transparent 70%),var(--base)}

/* ---------- 按钮 ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius)}
.primary{min-height:44px;padding:0 22px;border-radius:22px;background:var(--primary);color:var(--primary-ink);font-weight:650;font-size:14px;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.primary:hover:not(:disabled){background:var(--primary-hover)}
.quiet{min-height:42px;padding:0 18px;border-radius:21px;background:var(--card-2);border:1px solid var(--line);font-size:13px;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.quiet:hover:not(:disabled){border-color:var(--line-strong)}
.chip-btn{min-height:34px;padding:0 13px;border-radius:17px;border:1px solid var(--line);background:var(--card);font-size:12.5px;color:var(--soft);display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.chip-btn:hover:not(:disabled){border-color:var(--line-strong)}
.chip-btn .icon{width:16px;height:16px}
.chip-btn.accent{background:var(--accent-soft);border-color:var(--accent);color:var(--ink)}
.segmented{display:inline-flex;gap:3px;padding:3px;border-radius:20px;background:var(--card-2);border:1px solid var(--line)}
.segmented button{min-height:32px;padding:0 13px;border-radius:16px;font-size:12.5px;color:var(--soft);white-space:nowrap}
.segmented button[aria-pressed="true"]{background:var(--primary);color:var(--primary-ink);font-weight:600}
.segmented button:hover:not([aria-pressed="true"]){background:var(--card)}

/* ---------- 登录 ---------- */
.login-shell{min-height:100svh;display:grid;place-items:center;padding:max(24px,env(safe-area-inset-top)) 20px max(24px,env(safe-area-inset-bottom))}
.login-panel{width:min(380px,100%);padding:30px;display:grid;gap:12px}
.login-logo{width:56px;height:56px;border-radius:14px}
.login-panel h1{font-size:26px;font-weight:650;letter-spacing:-.5px;margin-top:8px}
.login-panel label{font-size:12.5px;color:var(--soft);margin-top:8px}
.login-panel input{width:100%;border-radius:14px;border:1px solid var(--line-strong);background:var(--base);padding:12px 14px;color:var(--ink);font-size:16px}
.login-panel input::placeholder{color:var(--faint)}
.login-panel input:focus{outline:none;border-color:var(--accent)}
.login-panel .primary{margin-top:6px}
.form-error{color:var(--bad);font-size:12.5px;min-height:18px}

/* ---------- 顶栏：吸顶，实色底；状态栏那段也由它的底色铺满 ---------- */
.masthead{position:sticky;top:0;z-index:20;background:var(--base);padding:calc(env(safe-area-inset-top) + var(--top-clear)) max(36px,env(safe-area-inset-right)) 0 max(36px,env(safe-area-inset-left))}
.masthead.stuck{box-shadow:0 1px 0 var(--line)}
.topbar{display:flex;align-items:center;gap:12px;min-height:76px;max-width:1960px;margin:0 auto}
.logo img{width:36px;height:36px;border-radius:9px}
.back-button{display:grid;place-items:center;width:36px;height:44px;margin-right:-6px;color:var(--soft);border-radius:12px}
.back-button svg{width:22px;height:22px}
.back-button:hover{color:var(--ink)}
.masthead:not([data-view="library"]) .logo{display:none}
.hello{min-width:0;margin-right:auto}
.hello span{display:block;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hello strong{display:block;font-size:24px;font-weight:650;letter-spacing:-.4px;line-height:1.2;margin-top:1px;white-space:nowrap}
.tools{display:flex;align-items:center;gap:10px}
.tool{position:relative;height:44px;min-width:44px;padding:0 13px;border-radius:22px;display:inline-flex;align-items:center;justify-content:center;gap:7px;background:var(--card);border:1px solid var(--line);font-size:13px;white-space:nowrap}
.tool svg{width:20px;height:20px}
.tool:hover:not(:disabled){background:var(--card-2)}
.tool[aria-pressed="true"],.tool[aria-expanded="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.only-narrow{display:none}
.search-field{flex:0 1 340px;min-width:200px;height:44px;display:flex;align-items:center;gap:9px;padding:0 8px 0 15px;border-radius:22px;border:1px solid var(--line);background:var(--card);color:var(--muted)}
.search-field:focus-within{border-color:var(--accent)}
.search-field svg{width:18px;height:18px}
.search-field input{flex:1;min-width:0;border:0;background:none;outline:none;color:var(--ink);font-size:14px}
.search-field input::placeholder{color:var(--faint)}
.search-field input::-webkit-search-cancel-button{opacity:.6}
.search-key{font:500 11px/20px var(--mono);min-width:22px;height:22px;text-align:center;border-radius:6px;border:1px solid var(--line-strong);color:var(--faint)}
.search-field:focus-within .search-key{display:none}

/* 多选：顶栏下面多出一行（不再用底部操作条） */
.select-bar{display:flex;align-items:center;gap:4px;max-width:1960px;margin:0 auto 10px;padding:5px;border-radius:26px;background:var(--card);border:1px solid var(--line-strong)}
.select-bar>span{flex:1;min-width:0;padding:0 8px;text-align:center;font-size:13px;color:var(--soft);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-btn{height:40px;min-width:40px;padding:0 14px;border-radius:20px;display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:13px;color:var(--soft)}
.bar-btn svg{width:19px;height:19px}
.bar-btn:hover:not(:disabled){background:var(--card-2)}
.bar-btn[aria-pressed="true"]{color:var(--accent)}
.bar-btn.danger{color:var(--bad)}
.bar-btn.done{background:var(--primary);color:var(--primary-ink);font-weight:650;padding:0 18px}
.bar-btn.done:hover{background:var(--primary-hover)}
.select-bar.busy{opacity:.6;pointer-events:none}

/* 「⋯」二级菜单：相册入口 + 排序 / 缩略图 / 外观 + 刷新、锁定 */
.menu-panel{position:fixed;inset:calc(env(safe-area-inset-top) + var(--top-clear) + 70px) max(24px,env(safe-area-inset-right)) auto auto;margin:0;width:min(330px,calc(100% - 24px));max-height:calc(100dvh - 100px);overflow-y:auto;padding:8px;box-shadow:var(--shadow);color:var(--ink)}
.menu-panel::backdrop{background:rgba(0,0,0,.35)}
.menu-group{display:grid;gap:2px}
.menu-group+.menu-setting,.menu-setting+.menu-group{margin-top:6px;padding-top:6px;border-top:1px solid var(--line)}
.menu-row{display:flex;align-items:center;gap:12px;width:100%;min-height:46px;padding:0 12px;border-radius:14px;text-align:left;font-size:14.5px}
.menu-row>svg{width:20px;height:20px;color:var(--muted)}
.menu-row>span{flex:1}
.menu-row small{font:500 12px var(--mono);color:var(--faint)}
.menu-row .menu-check{width:18px;height:18px;color:var(--accent);visibility:hidden}
.menu-row[aria-current="page"]{background:var(--accent-soft)}
.menu-row[aria-current="page"]>svg:first-child{color:var(--accent)}
.menu-row[aria-current="page"] .menu-check{visibility:visible}
.menu-row:hover:not([aria-current="page"]){background:var(--card-2)}
.menu-row.danger,.menu-row.danger>svg{color:var(--bad)}
.menu-setting{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 6px 6px 12px;font-size:13.5px;color:var(--soft)}

/* ---------- 图库 ---------- */
.workspace{min-height:100vh;padding:0 max(36px,env(safe-area-inset-right)) calc(48px + env(safe-area-inset-bottom)) max(36px,env(safe-area-inset-left))}
.library{max-width:1960px;margin:0 auto}
.notice{color:var(--muted);font-size:13px;line-height:1.7;max-width:65ch;margin:4px 0 14px;padding:12px 16px;border-radius:14px;background:var(--card);border:1px solid var(--line)}
.library-caption{display:flex;align-items:center;justify-content:center;min-height:34px;margin:2px 0 10px}
.library-caption:has(#new-photos[hidden]){display:none}
.date-group{margin-bottom:26px}
.date-group:first-child{margin-top:4px}
.date-heading{display:flex;justify-content:space-between;gap:10px;align-items:baseline;margin:0 2px 10px}
.date-heading h2{font-size:17px;font-weight:600;letter-spacing:-.2px}
.date-heading>span{font:500 11.5px var(--mono);color:var(--faint)}
.photo-grid,.skeleton-grid{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:var(--gap)}
.tile{position:relative;min-width:0}
.photo{display:block;position:relative;width:100%;aspect-ratio:1;padding:0;background:var(--card-2);border-radius:var(--tile-radius);min-width:0;overflow:hidden;contain:layout paint;isolation:isolate;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
.photo img{width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;pointer-events:none}
.photo:focus-visible{outline-offset:-3px;border-radius:var(--tile-radius)}
.photo-heart{position:absolute;left:7px;bottom:7px;width:16px;height:16px;color:#fff;fill:currentColor;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.selection-indicator{position:absolute;right:7px;bottom:7px;display:none;place-items:center;width:24px;height:24px;border:2px solid #fff;background:rgba(0,0,0,.28);color:#fff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.35)}
.selection-indicator svg{width:15px;height:15px;stroke-width:2.6;visibility:hidden}
.selecting .selection-indicator{display:grid}
.photo.selected::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 3px var(--accent);pointer-events:none}
.photo.selected img{opacity:.72}
.photo.selected .selection-indicator{background:var(--accent);border-color:#fff;color:var(--primary-ink)}
:root[data-theme="light"] .photo.selected .selection-indicator{color:#fff}
.photo.selected .selection-indicator svg{visibility:visible}
/* 隐私蒙版（同人物平台）：深色斜纹 + 闭眼图标，被遮的缩略图不加载 */
.mask{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--muted);font-size:11.5px;
  background:repeating-linear-gradient(135deg,var(--card-2) 0 10px,var(--card) 10px 20px)}
.mask .eye{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--base);border:1px solid var(--line-strong);color:var(--soft)}
.mask .eye svg{width:50%;height:50%;stroke-width:2}
.photo.is-hidden:hover .mask .eye{border-color:var(--accent);color:var(--accent)}
.library[data-density="s"] .mask small{display:none}
.library[data-density="s"] .mask .eye{width:28px;height:28px}
/* 电脑上鼠标停在缩略图上时，右上角出现快捷收藏；已收藏的爱心是实心的 */
.tile-fav{position:absolute;top:6px;right:6px;width:32px;height:32px;border-radius:50%;display:none;place-items:center;color:#fff;background:rgba(0,0,0,.42);opacity:0}
.tile-fav svg{width:17px;height:17px;stroke-width:2}
.tile-fav.active{color:var(--heart)}
.tile-fav.active svg{fill:currentColor}
@media(hover:hover){.tile-fav{display:grid}.tile:hover .tile-fav{opacity:1}.tile-fav:hover{background:rgba(0,0,0,.6)}}
.tile-fav[hidden],.selecting .tile-fav,.library[data-density="s"] .tile-fav{display:none}
.skeleton-grid i{aspect-ratio:1;background:var(--card-2);border-radius:var(--tile-radius)}
.empty-state{min-height:46svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 0 64px;max-width:560px;margin:auto}
.empty-state h2{font-size:clamp(22px,2.6vw,28px);font-weight:600;line-height:1.4;margin:0 0 12px;text-wrap:balance}
.empty-state p{font-size:14.5px;line-height:1.75;color:var(--muted);max-width:36ch}
.empty-state button{margin-top:20px}
.load-area{padding:12px 0 8px;text-align:center}
.load-area p{font-size:12px;color:var(--faint);margin:16px 0}

/* 缩略图大小：大 / 中 / 小（中 = 默认列数） */
.library[data-density="l"]{--cols:4;--gap:8px;--tile-radius:14px}
.library[data-density="s"]{--cols:9;--gap:3px;--tile-radius:6px}
.library[data-density="s"] .photo-heart{width:12px;height:12px;left:4px;bottom:4px}

/* ---------- 确认框 / 提示 ---------- */
dialog{color:var(--ink)}
dialog::backdrop{background:rgba(0,0,0,.55)}
.confirm-dialog{width:min(360px,calc(100% - 40px));padding:26px 24px 20px;margin:auto;box-shadow:var(--shadow)}
.confirm-dialog h2{font-size:18px;font-weight:650;line-height:1.45;outline:none}
.confirm-dialog p{font-size:13.5px;line-height:1.7;color:var(--muted);margin:10px 0 22px}
.confirm-actions{display:grid;grid-template-columns:1fr 1.4fr;gap:10px}
.danger-fill{background:var(--bad-fill);color:var(--bad-ink)}
.danger-fill:hover:not(:disabled){background:var(--bad-fill);filter:brightness(1.06)}
.toast{position:fixed;z-index:99;left:50%;bottom:calc(28px + env(safe-area-inset-bottom));transform:translateX(-50%);max-width:min(560px,calc(100vw - 32px));width:max-content;padding:12px 20px;border-radius:20px;background:var(--card-2);border:1px solid var(--line-strong);color:var(--ink);font-size:13px;text-align:center;box-shadow:var(--shadow);pointer-events:none}
.viewer>.toast{position:absolute}

/* ---------- 详情页（看图器）：固定白底，明暗模式都一样；收藏 / 信息 / 下载 / 删除在顶栏右侧 ---------- */
html.viewer-open{overflow:hidden;overscroll-behavior:none}
body.scroll-locked{position:fixed;left:0;right:0;width:100%;overflow:hidden;overscroll-behavior:none}
.viewer{--dismiss-opacity:1;--card:#fff;--card-2:#f0f1f4;--line:#e3e4e9;--line-strong:#cfd1d8;--ink:#0b0c0f;--soft:#2b2d34;--muted:#5f626c;--faint:#9a9ca6;--accent:#2f63c8;--accent-soft:#e7eefb;--heart:#e0603f;--bad:#b3261e;--shadow:0 14px 40px rgba(20,22,34,.14);
  position:fixed;inset:0 auto auto 0;width:100%;height:var(--viewer-height,100dvh);max-width:100%;max-height:none;min-height:0;margin:0;padding:0;background:rgb(255 255 255 / var(--dismiss-opacity));color:var(--ink);border:0;overflow:hidden;overscroll-behavior:none;color-scheme:light}
.viewer::backdrop{background:transparent}
.viewer[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.viewer-top{display:flex;align-items:center;gap:8px;z-index:3;min-width:0;padding:calc(env(safe-area-inset-top) + var(--top-clear) + 4px) max(14px,env(safe-area-inset-right)) 8px max(14px,env(safe-area-inset-left))}
.viewer-date{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0;outline:none}
.viewer-date b{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.viewer-date span{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.viewer-actions{display:flex;align-items:center;gap:2px;flex:none}
.viewer-button{display:inline-grid;place-items:center;width:44px;height:44px;flex:none;border-radius:50%;color:var(--ink)}
.viewer-button:disabled{opacity:.3}
.viewer-button.active{color:var(--heart)}
.viewer-button.active .icon{fill:currentColor}
.viewer-button[aria-expanded="true"]{background:var(--accent-soft);color:var(--accent)}
.viewer-body{position:relative;min-height:0;min-width:0;overflow:hidden;overscroll-behavior:none;transform-origin:50% 50%}
.photo-stage{position:absolute;inset:0;overflow:hidden;contain:layout paint;touch-action:none;user-select:none;-webkit-user-select:none}
.photo-track{display:flex;width:100%;height:100%;transform:translate3d(-100%,0,0);will-change:transform}
.photo-slide{flex:0 0 100%;width:100%;min-width:0;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}
.photo-slide img{display:block;width:100%;height:100%;object-fit:contain;transform-origin:50% 50%;-webkit-user-drag:none;user-select:none;-webkit-user-select:none;touch-action:none}
.photo-slide img#full-photo{will-change:transform}
.photo-loading{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);padding:0 16px;min-height:36px;font-size:12.5px;white-space:nowrap;background:var(--card);border:1px solid var(--line-strong);color:var(--soft);border-radius:18px;box-shadow:var(--shadow)}
.photo-loading:disabled{opacity:1;cursor:default}
.viewer-bottom{display:flex;align-items:center;justify-content:center;gap:16px;position:relative;padding:4px max(16px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));font-size:12.5px;color:var(--muted);min-height:48px}
#photo-position{font-family:var(--mono);font-variant-numeric:tabular-nums}
.photo-quality{position:absolute;left:max(20px,env(safe-area-inset-left));font-size:12px;color:var(--faint)}
.zoom-reset{position:absolute;right:max(20px,env(safe-area-inset-right));min-height:34px;min-width:44px;padding:0 12px;background:var(--card-2);border:1px solid var(--line-strong);color:var(--accent);font:500 12px var(--mono);border-radius:17px}
/* 宽屏打开信息面板时，照片区让出右侧，不被面板盖住 */
@media(min-width:1000px){.viewer.info-open .photo-stage{right:392px}}
.photo-info{position:absolute;right:16px;top:0;bottom:12px;width:360px;max-width:calc(100% - 32px);z-index:2;display:flex;flex-direction:column;min-height:0;overflow:hidden;touch-action:pan-y;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none;min-height:52px}
.info-heading{padding:4px 6px 0 20px;touch-action:none}
.info-heading h2{font-size:16px;font-weight:600}
.info-heading .viewer-button{color:var(--muted)}
.info-scroll{min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;padding:8px 20px 22px;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.info-scroll:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
.photo-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.fact{padding:10px 12px;border-radius:12px;background:var(--card-2);min-width:0}
.fact span{display:block;font-size:11.5px;color:var(--muted);margin-bottom:3px}
.fact b{font-size:13.5px;font-weight:500;overflow-wrap:anywhere;line-height:1.5}
.prompt-heading{display:flex;align-items:center;justify-content:space-between;margin-top:20px}
.prompt-heading h3{font-size:13.5px;font-weight:600}
.prompt-heading .chip-btn{background:var(--card-2);color:var(--soft)}
#photo-prompt{font-size:13px;color:var(--soft);line-height:1.8;overflow-wrap:anywhere;user-select:text;-webkit-user-select:text;margin:10px 0 18px;padding:12px 14px;border-radius:12px;background:var(--card-2)}
.download-note{font-size:12px;color:var(--faint);line-height:1.7}
.sheet-grabber{display:none;touch-action:none}
.sheet-grabber span{display:block;width:36px;height:4px;margin:auto;background:var(--line-strong);border-radius:4px}

@media(hover:hover){
  .viewer-button:hover:not(:disabled){background:rgba(0,0,0,.06)}
  .photo:hover img{opacity:.9}
}

/* ---------- 响应式：列数 = 中；大 / 小在此基础上增减 ---------- */
@media(max-width:1100px){:root{--cols:5}.library[data-density="l"]{--cols:3}.library[data-density="s"]{--cols:7}}
@media(max-width:900px){:root{--cols:4}.library[data-density="l"]{--cols:3}.library[data-density="s"]{--cols:6}}
@media(max-width:860px){
  :root{--radius:18px;--top-clear:14px}
  .masthead{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
  .workspace{padding:0 max(12px,env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
  .topbar{min-height:60px;flex-wrap:wrap;gap:8px;align-content:center}
  .logo{display:none}
  .hello span{font-size:12px}
  .hello strong{font-size:22px}
  .tools{gap:8px}
  .tool{height:40px;min-width:40px;padding:0 10px}
  .tool-text{display:none}
  .only-narrow{display:inline-flex}
  /* 手机：搜索框点放大镜后才出现，占一整行 */
  .search-field{display:none;order:3;flex:1 0 100%;min-width:0;height:42px;margin-bottom:8px}
  .masthead.search-open .search-field{display:flex}
  .search-field input{font-size:16px} /* 小于 16px 时 iOS 聚焦会自动放大页面 */
  .search-key{display:none}
  .menu-panel{inset:calc(env(safe-area-inset-top) + var(--top-clear) + 56px) max(10px,env(safe-area-inset-right)) auto auto}
  .bar-btn{padding:0 11px}
  .bar-btn:not(.done) span{display:none}
  .date-heading h2{font-size:16px}
}
@media(max-width:650px){
  :root{--cols:3;--gap:3px;--tile-radius:6px}
  .library[data-density="l"]{--cols:2;--gap:6px;--tile-radius:12px}
  .library[data-density="s"]{--cols:5;--gap:2px;--tile-radius:4px}
  .masthead{padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}
  .workspace{padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right))}
  .library-caption,.date-heading,.notice{margin-left:4px;margin-right:4px}
  .date-group{margin-bottom:20px}
  .empty-state{min-height:40svh;padding-top:24px}
  .viewer-top{gap:4px;padding-left:max(6px,env(safe-area-inset-left));padding-right:max(6px,env(safe-area-inset-right))}
  .viewer-button{width:40px;height:40px}
  .viewer-date b{font-size:14px}
  .viewer-date span{font-size:12px}
  .photo-info{inset:auto 0 0;width:100%;max-width:100%;max-height:82%;border-radius:22px 22px 0 0;border-bottom:0}
  .sheet-grabber{display:block;flex:none;padding:10px 0 0;height:20px}
  .photo-quality{position:static;font-size:11.5px}
  .viewer-bottom{display:grid;grid-template-columns:44px auto minmax(0,1fr) auto 44px;gap:4px;padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}
  .viewer-bottom>#previous{grid-column:1;grid-row:1}
  .viewer-bottom>#photo-position{grid-column:2;grid-row:1}
  .photo-quality{grid-column:3;grid-row:1;justify-self:end;margin:0}
  .viewer-bottom>#reset-zoom{position:static;grid-column:4;grid-row:1}
  .viewer-bottom>#next{grid-column:5;grid-row:1}
}
@media(max-width:359px){
  .tools{gap:6px}
  .tool{min-width:38px;height:38px;padding:0 8px}
  .hello strong{font-size:19px}
  .viewer-button{width:36px;height:36px}
}
@media(max-height:500px) and (orientation:landscape){
  .viewer[open]{grid-template-rows:auto minmax(0,1fr) 40px}
  .viewer-top{padding-top:max(4px,env(safe-area-inset-top));padding-bottom:4px}
  .viewer-date span{display:none}
  .photo-info{inset:0 12px 0 auto;width:360px;max-height:100%;border-radius:var(--radius);border-bottom:1px solid var(--line)}
  .sheet-grabber{display:none}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}