:root {
  --paper:#f6f4ef; --surface:#fffefb; --ink:#2c302c; --muted:#74796e;
  --line:#e5e4dc; --accent:#91543e; --tint:#eee5da;
  color:var(--ink); background:var(--paper);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  font-synthesis:none;
}
* { box-sizing:border-box; }
body { margin:0; font-size:14px; line-height:1.65; }
button,input,a,summary { -webkit-tap-highlight-color:transparent; }
button,input { font:inherit; }
button,a,summary { touch-action:manipulation; }
button { cursor:pointer; color:inherit; border:0; background:none; }
a { color:inherit; text-decoration:none; }
button:disabled { opacity:.35; cursor:default; }
[hidden] { display:none!important; }
svg { width:20px; height:20px; flex-shrink:0; vertical-align:middle; }
button:focus-visible,a:focus-visible,summary:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
input:focus-visible { outline:0; }
#phone-workspace { display:none; }
#desktop-handoff { min-height:100dvh; max-width:620px; margin:auto; padding:65px 30px; display:flex; flex-direction:column; align-items:center; text-align:center; justify-content:center; }
.brand-mark { display:flex; align-items:center; justify-content:center; width:50px; height:56px; border:1px solid var(--accent); color:var(--accent); font-family:"Songti SC","STSong",serif; font-size:31px; border-radius:11px 2px 11px 2px; }
.eyebrow { color:var(--accent); font-size:10px; letter-spacing:2px; font-weight:500; margin:14px 0 9px; }
h1 { font-size:29px; font-weight:500; letter-spacing:1px; line-height:1.4; margin:0; font-family:"Songti SC","STSong",serif; }
h1 span { color:var(--accent); }
#desktop-handoff h1 { font-size:32px; margin:9px 0; }
.handoff-description { color:var(--muted); font-size:13px; line-height:1.9; margin:12px 0 25px; }
#phone-qr { background:white; width:200px; height:200px; border:1px solid var(--line); border-radius:8px; display:grid; place-items:center; }
#phone-qr svg { width:196px; height:196px; }
#handoff-status { font-size:12px; margin:20px 0 8px; color:var(--muted); }
#phone-address { font:12px monospace; margin-bottom:17px; }
.handoff-footnote { color:var(--muted); font-size:11px; margin-top:25px; }
.primary-button,.secondary-button { min-height:46px; padding:11px 16px; display:inline-flex; align-items:center; justify-content:center; gap:9px; font-size:13px; border-radius:7px; transition:background .18s,transform .18s; }
.primary-button { background:var(--accent); color:#fffaf3; }
.primary-button:active:not(:disabled) { background:#76432f; transform:scale(.98); }
.secondary-button { background:var(--surface); border:1px solid var(--line); }
.secondary-button:active { background:var(--tint); }
.primary-button svg,.secondary-button svg { width:17px; height:17px; }
#main { padding:0 16px calc(85px + env(safe-area-inset-bottom)); max-width:620px; margin:auto; }
.topbar { height:calc(58px + env(safe-area-inset-top)); padding-top:env(safe-area-inset-top); display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:10; background:var(--paper); border-bottom:1px solid var(--line); }
.mobile-brand { color:var(--accent); font-size:20px; font-family:"Songti SC","STSong",serif; letter-spacing:2px; }
.top-note { font-size:10px; color:var(--muted); }
.page-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:23px 0 18px; }
#page-description { color:var(--muted); font-size:11px; margin:7px 0 0; max-width:235px; line-height:1.7; }
#follow-button { white-space:nowrap; padding-inline:12px; font-size:12px; }
#follow-button svg:last-child { display:none; }
#library-controls { position:sticky; top:calc(58px + env(safe-area-inset-top)); background:var(--paper); z-index:9; padding-top:3px; }
.filter-row { display:flex; gap:12px; flex-wrap:wrap; padding-bottom:7px; align-items:center; }
.mode-tabs { display:flex; gap:20px; }
.mode-tabs button { min-height:44px; display:flex; align-items:center; padding:7px 0; gap:7px; font-size:15px; color:var(--muted); position:relative; }
.mode-tabs button.active { color:var(--ink); font-weight:600; }
.mode-tabs button.active:after { content:""; height:2px; position:absolute; bottom:0; left:0; width:25px; background:var(--accent); }
.mode-tabs span { font-size:10px; font-weight:400; }
.search-box { margin-left:auto; flex:1; min-width:135px; max-width:230px; min-height:44px; display:flex; align-items:center; gap:7px; border:1px solid var(--line); background:#fbfaf6; padding:9px 10px; border-radius:6px; }
.search-box:focus-within { border-color:var(--accent); }
.search-box svg { width:16px; height:16px; color:var(--muted); }
.search-box input { font-size:16px; border:0; min-width:0; width:100%; background:none; color:var(--ink); }
.search-box input::placeholder { font-size:11px; color:var(--muted); }
kbd { display:none; }
.category-tabs { display:flex; overflow:auto; gap:5px; scrollbar-width:none; padding:5px 16px 9px 0; border-bottom:1px solid var(--line); margin-right:-16px; overscroll-behavior-x:contain; }
.category-tabs::-webkit-scrollbar { display:none; }
.category-tabs button { min-height:44px; padding:9px 12px; color:var(--muted); font-size:12px; border:1px solid transparent; border-radius:6px; white-space:nowrap; }
.category-tabs button.active { border-color:#b49a81; color:var(--accent); background:#eee7dd; }
.results-bar { display:flex; align-items:center; justify-content:space-between; padding:17px 0 14px; font-size:10px; color:var(--muted); gap:8px; }
.results-bar>div { display:flex; align-items:center; gap:9px; }
.results-bar h2 { margin:0; font-size:13px; font-weight:600; color:var(--ink); }
.results-note { font-size:10px; }
.gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 12px; }
.photo-card { min-width:0; animation:arrive .2s ease both; }
.photo-media { position:relative; aspect-ratio:2/3; border-radius:6px; background:#e7e3d9; overflow:hidden; }
.photo-open { display:block; width:100%; height:100%; padding:0; position:relative; }
.photo-media img { width:100%; height:100%; object-fit:cover; display:block; }
.photo-hint { display:none; }
.favorite-button { position:absolute; top:4px; right:4px; width:44px; height:44px; border-radius:50%; color:#484f43; display:flex; align-items:center; justify-content:center; }
.favorite-button:before { content:""; position:absolute; inset:6px; border-radius:50%; background:#fffdf5ef; }
.favorite-button svg { width:17px; height:17px; position:relative; }
.favorite-button.selected { color:var(--accent); }
.favorite-button.selected svg { fill:var(--accent); }
.photo-caption { display:flex; align-items:center; justify-content:space-between; gap:3px; min-height:46px; }
.photo-caption>div { display:flex; min-width:0; align-items:center; gap:5px; }
.photo-number { color:var(--muted); font-size:9px; font-variant-numeric:tabular-nums; }
.photo-caption h3 { font-weight:500; font-size:11px; line-height:1.5; margin:0; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
.plan-button { display:flex; align-items:center; justify-content:center; width:44px; height:44px; flex-shrink:0; border-radius:50%; color:var(--muted); margin-right:-7px; }
.plan-button svg { width:18px; height:18px; }
.plan-button.selected { color:var(--accent); }
.plan-button:active { background:var(--tint); }
.page-footer { display:flex; justify-content:space-between; border-top:1px solid var(--line); color:var(--muted); font-size:10px; padding:20px 0; margin-top:25px; }
.page-footer>span:first-child { color:var(--accent); letter-spacing:1px; }
#mobile-navigation { display:flex; position:fixed; bottom:0; left:0; right:0; justify-content:space-around; padding:5px 8px calc(5px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:#f7f5f0f5; backdrop-filter:blur(15px); z-index:20; }
.nav-item { display:flex; flex:1; flex-direction:column; align-items:center; gap:3px; padding:7px 0; position:relative; font-size:11px; color:var(--muted); min-height:54px; }
.nav-item.active { color:var(--accent); font-weight:600; }
.nav-item small { position:absolute; top:1px; left:calc(50% + 9px); font-size:9px; background:var(--tint); padding:0 5px; border-radius:7px; line-height:1.5; }
.nav-item svg { width:21px; height:21px; }
.empty-state { text-align:center; padding:60px 15px 75px; }
.empty-state>svg { width:36px; height:36px; color:#b5a18c; margin-bottom:14px; }
.empty-state h2 { font-size:19px; font-weight:500; }
.empty-state p { color:var(--muted); font-size:12px; margin-bottom:24px; }
.preparation { padding:19px; background:#eeece4; border-radius:7px; }
.preparation h2 { font-size:21px; font-family:"Songti SC",serif; font-weight:500; margin:6px 0 15px; }
.preparation-list { display:grid; gap:2px; }
.preparation label { font-size:13px; display:flex; align-items:center; gap:11px; cursor:pointer; min-height:44px; }
.preparation input { width:20px; height:20px; accent-color:var(--accent); cursor:pointer; }
.preparation input:checked+span { text-decoration:line-through; color:var(--muted); }
.progress-label { color:var(--accent); }
.progress-track { height:3px; background:#e8e3d8; margin-bottom:20px; border-radius:3px; overflow:hidden; }
.progress-track span { display:block; height:100%; background:var(--accent); transition:width .3s; }
.complete-badge { position:absolute; bottom:10px; left:10px; display:flex; align-items:center; gap:4px; padding:5px 8px; background:#eef2e9ef; border-radius:4px; font-size:10px; color:#4f6543; }
.complete-badge svg { width:12px; height:12px; }
.guide-intro { padding:20px 0; }
.guide-intro .large { margin-bottom:20px; }
.guide-intro h2 { font-family:"Songti SC",serif; font-size:24px; font-weight:500; line-height:1.6; }
.guide-intro p,.guide-note p,.guide-steps p { color:var(--muted); font-size:13px; line-height:1.9; }
.guide-steps { display:grid; gap:20px; padding:25px 0; border-block:1px solid var(--line); }
.guide-steps>div>span { color:var(--accent); font-size:11px; }
.guide h3 { font-weight:500; font-size:16px; margin:5px 0; }
.guide-note { padding:25px 0 0; }
.toast { position:fixed; bottom:calc(85px + env(safe-area-inset-bottom)); left:50%; transform:translate(-50%,10px); color:#fffaf0; background:#30382fef; font-size:12px; padding:11px 18px; border-radius:6px; opacity:0; pointer-events:none; transition:opacity .2s,transform .2s; z-index:200; max-width:90vw; width:max-content; text-align:center; }
.toast.visible { opacity:1; transform:translate(-50%,0); }
.viewer-open { overflow:hidden; }
#viewer { padding:0; border:0; width:100vw; height:100dvh; max-height:none; max-width:none; margin:0; overflow:hidden; background:var(--paper); color:var(--ink); }
#viewer::backdrop { background:#171e19e6; }
.viewer-layout { display:grid; grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) auto; height:100%; }
.viewer-image-wrap { background:#20251f; display:flex; align-items:center; justify-content:center; position:relative; min-height:0; }
#viewer-image { width:100%; height:100%; object-fit:contain; color:white; touch-action:pan-y pinch-zoom; user-select:none; }
.icon-button { display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background:#fffdf1e6; color:#373c33; position:absolute; z-index:1; }
.viewer-close { top:calc(10px + env(safe-area-inset-top)); left:12px; }
.viewer-counter { position:absolute; top:calc(21px + env(safe-area-inset-top)); right:20px; font-size:12px; color:#fff; text-shadow:0 1px 3px #000; z-index:1; }
.viewer-prev { top:50%; left:9px; background:#fffdf1b8; }
.viewer-next { top:50%; right:9px; background:#fffdf1b8; }
.viewer-details { padding:13px 16px calc(14px + env(safe-area-inset-bottom)); max-height:43dvh; overflow:auto; }
.viewer-details h2 { font-family:"Songti SC",serif; font-size:20px; font-weight:500; margin:0 0 7px; }
#viewer-category,#viewer-tags { display:none; }
.viewer-tips { margin:0 0 10px; }
.viewer-tips summary { font-size:12px; color:var(--muted); padding:6px 0; cursor:pointer; min-height:44px; }
#viewer-note { margin:6px 0 12px; color:var(--muted); font-size:13px; line-height:1.8; }
.viewer-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
#viewer-complete { margin-top:9px; width:100%; }
.swipe-tip { font-size:10px; color:var(--muted); text-align:center; margin:8px 0 0; }
.follow-mode .viewer-tips,.follow-mode .swipe-tip { display:none; }
.image-unavailable { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:13px; }
@keyframes arrive { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
@media(pointer:coarse) and (hover:none) {
  #desktop-handoff { display:none; }
  #phone-workspace { display:block; }
}
@media(pointer:coarse) and (hover:none) and (orientation:landscape) {
  .viewer-layout { grid-template-columns:minmax(0,1fr) 230px; grid-template-rows:1fr; }
  .viewer-details { max-height:100dvh; padding-top:20px; }
  .viewer-actions { grid-template-columns:1fr; }
}
@media(max-width:360px) {
  .top-note,.results-note { display:none; }
  .search-box { max-width:160px; min-width:115px; }
  .mode-tabs { gap:14px; }
  .gallery { gap:14px 9px; }
  .photo-number { display:none; }
  #page-description { max-width:190px; }
}
@media(prefers-reduced-motion:reduce) { *,*:before,*:after { animation:none!important; transition:none!important; } }
.setup-page { max-width:520px; margin:60px auto; padding:25px; }
.setup-page h1 { margin:25px 0; }
.setup-page p { color:var(--muted); font-size:13px; line-height:1.9; }
.setup-page form { display:grid; gap:15px; margin:25px 0; }
.setup-page input { padding:13px; min-width:0; border:1px solid var(--line); border-radius:6px; background:var(--surface); }
.online-search { display:grid; gap:8px; }
.online-search label { font-size:12px; color:var(--muted); }
.online-search select,.online-search input { width:100%; min-height:46px; border:1px solid var(--line); background:var(--surface); border-radius:6px; padding:10px; font-size:16px; color:var(--ink); }
.online-search>div { display:flex; gap:8px; }
.online-search input { min-width:0; }
.online-search button { flex-shrink:0; }
#online-status { min-height:24px; font-size:12px; color:var(--muted); margin:20px 0; }
.online-author { font-size:10px; color:var(--muted); line-height:1.7; }
.online-author a,#online-credit a { text-decoration:underline; }
.online-pagination { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-top:25px; font-size:12px; }
#online-viewer { padding:0; border:0; max-width:100vw; max-height:100dvh; width:100vw; height:100dvh; margin:0; background:#20251f; color:#fff; }
#online-viewer::backdrop { background:#20251f; }
#online-image { width:100%; height:calc(100% - 75px); object-fit:contain; }
#online-credit { padding:0 18px; font-size:12px; }