/* ============================================================
   书架 · 纸本
   字体与留白做主角，纹理只到「摸得出、看不见」的程度。
   ============================================================ */

:root{
  /* 纸 */
  --paper:      #f6f2ea;
  --paper-2:    #fffdf8;
  --paper-3:    #efe9dd;
  /* 墨 */
  --ink:        #1f1c18;
  --ink-2:      #5d564c;
  --ink-3:      #9a9184;
  /* 线 */
  --line:       #e3dbcc;
  --line-2:     #efe8dc;
  --line-3:     #d8cebc;
  /* 色 */
  --accent:     #2f5a47;
  --accent-2:   #427a62;
  --accent-soft:#e9efe9;
  --warn:       #96541f;
  --warn-soft:  #f8ede1;
  --gold:       #a8813c;

  --serif: "Songti SC","STSong","Source Han Serif SC","Noto Serif CJK SC","Noto Serif SC","SimSun","Songti TC",Georgia,serif;
  --sans: -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;

  --r: 12px;
  --tabbar-h: 58px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);

  --shadow-1: 0 1px 2px rgba(76,60,38,.05), 0 2px 8px rgba(76,60,38,.045);
  --shadow-2: 0 2px 4px rgba(76,60,38,.06), 0 10px 28px rgba(76,60,38,.07);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overscroll-behavior-y:none;
  min-height:100vh;
}

/* ---- 纸纹：一层极淡的纤维噪点 ---- */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0;
  pointer-events:none;
  opacity:.055;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* ---- 顶部一层很轻的受光 ---- */
body::after{
  content:"";
  position:fixed; inset:0 0 auto 0; height:340px; z-index:0;
  pointer-events:none;
  background:radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,.75), rgba(255,255,255,0) 70%);
}

button{font-family:inherit;font-size:inherit;color:inherit;border:none;background:none;cursor:pointer;padding:0;}
input,textarea{font-family:inherit;font-size:16px;}
::selection{background:#dfe9e1;color:#1f1c18;}

:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px;border-radius:4px;}

/* ============ 顶栏 ============ */
.topbar{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:flex-end; justify-content:space-between;
  height:calc(56px + var(--safe-t));
  padding:0 20px calc(6px);
  margin-bottom:2px;
  background:linear-gradient(180deg, rgba(246,242,234,.97) 55%, rgba(246,242,234,.86));
  backdrop-filter:saturate(160%) blur(10px);
  -webkit-backdrop-filter:saturate(160%) blur(10px);
  transition:box-shadow .25s var(--ease);
}
.topbar.is-scrolled{box-shadow:0 1px 0 var(--line);}
.topbar-title{
  font-family:var(--serif);
  font-size:22px; font-weight:600;
  letter-spacing:.06em;
  line-height:1.3;
  padding-bottom:2px;
}
.topbar-btn{font-size:14px;color:var(--accent);padding:8px 0;}

/* ============ 主区 ============ */
main{
  position:relative; z-index:1;
  max-width:660px; margin:0 auto;
  padding-bottom:calc(var(--tabbar-h) + var(--safe-b) + 40px);
}
.view{padding:0 20px;}
.view[hidden]{display:none;}
/* 挑书卡片撑不满一屏时竖向居中，撑满时自动退回顶部（auto margin 在溢出时解析为 0）。
   必须用 :not([hidden])，否则 ID 选择器的 display:flex 会盖掉 .view[hidden]{display:none}，
   隐藏的 pick 视图会一直占着版面把后面的视图顶下去。 */
#view-pick:not([hidden]){
  display:flex; flex-direction:column;
  min-height:calc(100vh - 56px - var(--safe-t) - var(--tabbar-h) - var(--safe-b));
}
@supports (height:100dvh){
  #view-pick:not([hidden]){min-height:calc(100dvh - 56px - var(--safe-t) - var(--tabbar-h) - var(--safe-b));}
}
#pickBody{margin:auto 0;}
.view:not([hidden]){animation:viewIn .32s var(--ease);}
@keyframes viewIn{from{opacity:0;transform:translateY(7px);}to{opacity:1;transform:none;}}

/* ============ 输入 ============ */
.search-wrap{padding:6px 0 2px;}
.search-input,.field-input{
  width:100%;
  padding:12px 15px;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:10px;
  color:var(--ink);
  outline:none;
  appearance:none;-webkit-appearance:none;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
  box-shadow:inset 0 1px 2px rgba(76,60,38,.03);
}
.search-input::placeholder,.field-input::placeholder{color:var(--ink-3);}
.search-input:focus,.field-input:focus{
  border-color:var(--accent-2);
  box-shadow:0 0 0 3px rgba(66,122,98,.12);
}

/* ============ chips ============ */
.chips{
  display:flex; gap:7px; padding:14px 0 6px;
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.chips::-webkit-scrollbar{display:none;}
.chip{
  flex:0 0 auto;
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 14px;
  border:1px solid var(--line-3);
  border-radius:3px;
  background:transparent;
  color:var(--ink-2);
  font-size:13px; letter-spacing:.03em; white-space:nowrap;
  transition:all .2s var(--ease);
}
.chip-n{font-size:11px;opacity:.55;font-variant-numeric:tabular-nums;}
.chip.is-on{
  background:var(--accent); border-color:var(--accent); color:#fbf9f4;
  box-shadow:0 2px 6px rgba(47,90,71,.2);
}
.chip.is-on .chip-n{opacity:.7;}
.chips-scene{padding:16px 0 4px;}

/* ============ 书架 ============ */
.shelf-list{padding-top:8px;}

.book-row{
  position:relative;
  display:flex; gap:14px; align-items:center;
  padding:16px 2px 16px 2px;
  cursor:pointer;
  border-bottom:1px solid var(--line-2);
  transition:background .16s var(--ease);
}
.book-row::after{
  content:"";position:absolute;left:2px;right:2px;bottom:-1px;height:1px;
  background:linear-gradient(90deg, var(--line-2), rgba(239,232,220,0));
}
.book-row:active{background:rgba(216,206,188,.14);}

.book-cover{
  position:relative;
  flex:0 0 56px; width:56px; height:82px;
  border-radius:2px 4px 4px 2px;
  overflow:hidden;
  background:var(--paper-3);
  box-shadow:
    0 1px 1px rgba(76,60,38,.13),
    0 5px 12px rgba(76,60,38,.11),
    0 12px 24px -10px rgba(76,60,38,.16);
  transform:translateZ(0);
}
.book-cover img{width:100%;height:100%;object-fit:cover;display:block;}
/* 书脊折痕 */
.book-cover::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:7px;z-index:2;
  background:linear-gradient(90deg, rgba(38,28,14,.20), rgba(38,28,14,.05) 60%, rgba(255,255,255,.14));
  pointer-events:none;
}
/* 切口 */
.book-cover::after{
  content:"";position:absolute;right:0;top:2px;bottom:2px;width:3px;z-index:2;
  background:linear-gradient(90deg, rgba(255,253,248,.9), rgba(216,206,188,.55));
  border-radius:0 3px 3px 0; pointer-events:none;
}
.cover-ph{
  position:absolute; inset:0; z-index:1;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:19px; color:#b6aa96;
  background:
    linear-gradient(150deg,#f3ecdf,#e9e0d0 60%,#e2d7c3);
}

.book-main{flex:1;min-width:0;padding-top:2px;}
.book-t{
  font-family:var(--serif);
  font-size:16.5px; font-weight:600; line-height:1.45;
  letter-spacing:.01em;
  color:var(--ink);
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.book-a{
  font-size:12.5px; color:var(--ink-3); margin-top:4px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.book-meta{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-top:8px; font-size:11.5px; color:var(--ink-3);
  letter-spacing:.03em;
}
.book-unread-days{font-variant-numeric:tabular-nums;}

.stars{display:inline-flex;gap:1.5px;font-size:11px;color:var(--line-3);letter-spacing:.6px;}
.stars .on{color:var(--gold);}

.badge{
  display:inline-block;padding:1px 8px;
  font-size:10.5px; line-height:1.7; letter-spacing:.08em;
  border-radius:2px;
}
.badge-read{background:var(--accent-soft);color:var(--accent);}
.badge-reading{background:var(--warn-soft);color:var(--warn);}
.badge-thin{background:var(--line-2);color:var(--ink-2);}

/* ============ 空状态 ============ */
.empty{text-align:center;padding:76px 26px 60px;}
.empty-ico{
  font-family:var(--serif);
  font-size:34px; color:var(--line-3);
  margin-bottom:20px; letter-spacing:.1em;
}
.empty-t{
  font-family:var(--serif);
  font-size:16px; color:var(--ink-2);
  margin:0 0 8px; letter-spacing:.02em;
}
.empty-s{font-size:13px;color:var(--ink-3);margin:0;line-height:1.9;}

/* ============ 推荐卡 ============ */
.pick-card{
  position:relative;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:26px 22px 22px;
  margin-top:16px;
  box-shadow:var(--shadow-2);
}
/* 双线画框 */
.pick-card::after{
  content:"";position:absolute;inset:6px;
  border:1px solid var(--line-2);
  border-radius:8px;
  pointer-events:none;
}
.pick-card > *{position:relative;z-index:1;}
.pick-card,.verdict{animation:cardIn .45s var(--ease) both;}
@keyframes cardIn{from{opacity:0;transform:translateY(10px) scale(.995);}to{opacity:1;transform:none;}}

.pick-kicker{
  display:flex; align-items:center; gap:12px;
  font-size:10.5px; letter-spacing:.3em; color:var(--accent);
  margin-bottom:22px; padding-left:.3em;
}
.pick-kicker::before,.pick-kicker::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg, rgba(227,219,204,0), var(--line), rgba(227,219,204,0));
}

.pick-hero{display:flex; gap:16px; align-items:flex-start;}
.pick-cover{
  position:relative;
  flex:0 0 78px; width:78px; height:112px;
  border-radius:2px 5px 5px 2px;
  overflow:hidden; background:var(--paper-3);
  box-shadow:
    0 1px 1px rgba(76,60,38,.14),
    0 8px 18px rgba(76,60,38,.14),
    0 20px 34px -14px rgba(76,60,38,.22);
}
.pick-cover img{width:100%;height:100%;object-fit:cover;display:block;}
.pick-cover::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:8px;z-index:2;
  background:linear-gradient(90deg, rgba(38,28,14,.22), rgba(38,28,14,.04) 60%, rgba(255,255,255,.16));
}
.pick-cover::after{
  content:"";position:absolute;right:0;top:3px;bottom:3px;width:3px;z-index:2;
  background:linear-gradient(90deg, rgba(255,253,248,.92), rgba(216,206,188,.5));
  border-radius:0 4px 4px 0;
}
.pick-cover .cover-ph{font-size:26px;}

.pick-info{flex:1;min-width:0;padding-top:1px;}
.pick-t{
  font-family:var(--serif);
  font-size:20px; font-weight:600; line-height:1.42;
  letter-spacing:.01em;
  margin:0 0 7px;
}
.pick-a{font-size:13px;color:var(--ink-2);margin:0 0 11px;letter-spacing:.02em;}
.pick-facts{
  display:flex; flex-wrap:wrap; gap:4px 14px;
  font-size:11.5px; color:var(--ink-3);
  letter-spacing:.04em; font-variant-numeric:tabular-nums;
}
.pick-facts span{position:relative;}
.pick-facts span + span::before{
  content:"·"; position:absolute; left:-9px; color:var(--line-3);
}

.pick-why{
  margin-top:24px;
  padding:2px 0 2px 16px;
  border-left:2px solid var(--accent);
  font-family:var(--serif);
  font-size:14.5px; line-height:1.95;
  color:var(--ink-2);
  letter-spacing:.01em;
}
.pick-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;}
.tag-pill{
  padding:2px 9px;
  border:1px solid var(--line-2);
  border-radius:2px;
  background:transparent;
  color:var(--ink-3);
  font-size:11px; letter-spacing:.06em;
}
.tag-pill b{font-weight:500;color:var(--accent);margin-left:5px;}

.pick-actions{display:flex;gap:10px;margin-top:26px;}

.pick-foot{
  text-align:center;margin-top:26px;
  font-size:11.5px;color:var(--ink-3);
  line-height:1.9;letter-spacing:.05em;
}

/* ============ 按钮 ============ */
.btn{
  flex:1;
  padding:13px 18px;
  border-radius:6px;
  font-size:14px; letter-spacing:.08em;
  text-align:center;
  transition:transform .12s var(--ease), opacity .2s, box-shadow .2s;
}
.btn:active{transform:scale(.98);}
.btn-primary{
  background:var(--accent); color:#fbf9f4;
  box-shadow:0 1px 0 rgba(255,255,255,.16) inset, 0 4px 12px rgba(47,90,71,.22);
}
.btn-primary:active{box-shadow:0 1px 0 rgba(255,255,255,.1) inset, 0 2px 6px rgba(47,90,71,.2);}
.btn-ghost{
  background:transparent;
  border:1px solid var(--line-3);
  color:var(--ink-2);
}
.btn-text{background:none;color:var(--ink-3);font-size:12.5px;flex:0 0 auto;padding:13px 6px;letter-spacing:.06em;}
.btn-row{display:flex;gap:10px;margin-top:12px;}

/* ============ 买书顾问 ============ */
.intro-card{margin-top:20px;padding:22px 20px;}
.intro-t{
  font-family:var(--serif);
  font-size:17px;font-weight:600;margin:0 0 8px;letter-spacing:.02em;
}
.intro-s{font-size:12.5px;color:var(--ink-2);margin:0;line-height:1.95;}

.verdict{
  margin-top:16px;padding:22px 20px;
  border-radius:var(--r);
  border:1px solid var(--line);
  background:var(--paper-2);
  box-shadow:var(--shadow-1);
  position:relative;
}
.verdict-no{border-left:3px solid var(--warn);}
.verdict-yes{border-left:3px solid var(--accent);}
.verdict-head{display:flex;align-items:center;gap:11px;margin-bottom:12px;}
.verdict-ico{
  width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;flex:0 0 auto;
  font-family:var(--serif);
}
.verdict-no .verdict-ico{background:var(--warn-soft);color:var(--warn);}
.verdict-yes .verdict-ico{background:var(--accent-soft);color:var(--accent);}
.verdict-t{
  font-family:var(--serif);font-size:15.5px;font-weight:600;letter-spacing:.02em;
}
.verdict-body{font-size:13px;line-height:1.95;color:var(--ink-2);}
.verdict-body strong{color:var(--ink);font-weight:500;}
.verdict-list{margin:14px 0 0;padding:0;list-style:none;}
.verdict-list li{
  padding:11px 0;
  border-top:1px solid var(--line-2);
  font-size:13px;color:var(--ink-2);
  display:flex;align-items:center;gap:11px;
}
.verdict-list li:first-child{border-top:none;padding-top:8px;}
.vl-cover{
  position:relative;
  flex:0 0 30px;width:30px;height:44px;
  border-radius:1px 3px 3px 1px;overflow:hidden;
  background:var(--paper-3);
  box-shadow:0 2px 6px rgba(76,60,38,.16);
}
.vl-cover img{width:100%;height:100%;object-fit:cover;display:block;}

/* 搜索结果 */
.sr-item{
  display:flex;gap:13px;align-items:center;
  padding:14px 2px;
  border-bottom:1px solid var(--line-2);
  cursor:pointer;
  transition:background .16s var(--ease);
}
.sr-item:active{background:rgba(216,206,188,.14);}
.sr-cover{
  position:relative;flex:0 0 42px;width:42px;height:60px;
  border-radius:1px 3px 3px 1px;overflow:hidden;
  background:var(--paper-3);
  box-shadow:0 2px 7px rgba(76,60,38,.16);
}
.sr-cover img{width:100%;height:100%;object-fit:cover;display:block;}
.sr-cover::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:5px;z-index:2;
  background:linear-gradient(90deg, rgba(38,28,14,.18), rgba(38,28,14,.02) 70%, rgba(255,255,255,.12));
}
.sr-cover .cover-ph{font-size:15px;}
.sr-t{
  font-family:var(--serif);font-size:14.5px;line-height:1.45;
  color:var(--ink);
}
.sr-m{font-size:11.5px;color:var(--ink-3);margin-top:3px;letter-spacing:.03em;}

/* ============ 更多 ============ */
.stat-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  margin-top:20px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
}
.stat{background:var(--paper-2);padding:18px 16px 16px;}
.stat-n{
  font-family:var(--serif);
  font-size:26px;font-weight:600;line-height:1.2;
  letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}
.stat-l{font-size:11px;color:var(--ink-3);margin-top:5px;letter-spacing:.1em;}

.card{
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:20px 18px;
  margin-top:14px;
  box-shadow:var(--shadow-1);
}
.card-title{
  font-family:var(--serif);
  font-size:14.5px;font-weight:600;
  margin-bottom:10px;letter-spacing:.04em;
}
.card-note{font-size:12px;color:var(--ink-3);line-height:1.9;margin:8px 0 0;}
.tag-cloud{display:flex;flex-wrap:wrap;gap:6px;}
.version{
  text-align:center;font-size:10.5px;color:var(--line-3);
  margin:32px 0 0;letter-spacing:.2em;
}

/* ============ 底部导航 ============ */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:flex;
  height:calc(var(--tabbar-h) + var(--safe-b));
  padding-bottom:var(--safe-b);
  background:rgba(246,242,234,.94);
  backdrop-filter:saturate(170%) blur(14px);
  -webkit-backdrop-filter:saturate(170%) blur(14px);
  border-top:1px solid var(--line);
}
.tab{
  position:relative;flex:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--ink-3);font-size:10px;letter-spacing:.12em;
  transition:color .22s var(--ease);
}
.tab-ico{font-size:16px;line-height:1;transition:transform .22s var(--ease);}
.tab.is-on{color:var(--accent);}
.tab.is-on .tab-ico{transform:translateY(-1px);}
.tab.is-on::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:20px;height:2px;border-radius:0 0 2px 2px;background:var(--accent);
}

/* ============ 悬浮按钮 ============ */
.fab{
  position:fixed;z-index:41;
  right:20px;bottom:calc(var(--tabbar-h) + var(--safe-b) + 18px);
  width:50px;height:50px;border-radius:50%;
  background:var(--accent);color:#fbf9f4;
  font-family:var(--serif);font-size:26px;font-weight:300;line-height:1;
  display:flex;align-items:center;justify-content:center;
  padding-bottom:3px;
  box-shadow:0 2px 0 rgba(255,255,255,.14) inset, 0 6px 18px rgba(47,90,71,.3);
  transition:transform .14s var(--ease);
}
.fab:active{transform:scale(.93);}
.fab[hidden]{display:none;}

/* ============ 弹层 ============ */
.sheet-mask{
  position:fixed;inset:0;z-index:50;
  background:rgba(31,28,24,.34);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  animation:fadeIn .2s var(--ease);
}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:51;
  max-height:92vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:var(--paper);
  border-radius:16px 16px 0 0;
  padding:0 20px calc(28px + var(--safe-b));
  animation:slideUp .28s var(--ease);
  box-shadow:0 -2px 40px rgba(31,28,24,.18);
}
@keyframes slideUp{from{transform:translateY(100%);}to{transform:translateY(0);}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}

.sheet-head{
  position:sticky;top:0;z-index:2;
  display:flex;align-items:center;justify-content:space-between;
  padding:26px 0 14px;
  margin-bottom:18px;
  background:linear-gradient(180deg, var(--paper) 78%, rgba(246,242,234,0));
}
.sheet-head::before{
  content:"";position:absolute;top:10px;left:50%;transform:translateX(-50%);
  width:34px;height:4px;border-radius:2px;background:var(--line-3);
}
.sheet-head::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg, var(--line), rgba(227,219,204,0));
}
.sheet-title{
  font-family:var(--serif);
  font-size:17px;font-weight:600;letter-spacing:.03em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:12px;
}
.sheet-x{font-size:13px;color:var(--ink-3);padding:6px 0 6px 12px;letter-spacing:.06em;}

/* ============ 表单 ============ */
.field{margin-bottom:16px;}
.field-label{
  display:block;
  font-size:11px;color:var(--ink-3);
  margin-bottom:7px;letter-spacing:.1em;
}
textarea.field-input{resize:vertical;min-height:68px;line-height:1.75;}
.field-row{display:flex;gap:10px;}
.field-row .field{flex:1;min-width:0;}

.rate-pick{display:flex;gap:6px;padding:2px 0;}
.rate-star{
  font-size:27px;line-height:1;color:var(--line-3);
  transition:color .14s var(--ease), transform .14s var(--ease);
  padding:2px 3px;
}
.rate-star.on{color:var(--gold);}
.rate-star:active{transform:scale(.88);}

.seg{
  display:flex;background:var(--paper-3);border-radius:8px;padding:3px;gap:3px;
}
.seg button{
  flex:1;padding:9px 6px;border-radius:6px;
  font-size:13px;color:var(--ink-3);letter-spacing:.05em;
  transition:all .2s var(--ease);
}
.seg button.is-on{
  background:var(--paper-2);color:var(--ink);
  box-shadow:0 1px 3px rgba(76,60,38,.12);
}

/* 录入时的搜索结果 */
.pick-src{margin:2px 0 18px;}
.pick-src-item{
  display:flex;gap:12px;align-items:center;
  padding:11px 8px;border-radius:6px;cursor:pointer;
  transition:background .16s var(--ease);
}
.pick-src-item:active{background:rgba(216,206,188,.2);}
.pick-src-item .sr-cover{flex:0 0 36px;width:36px;height:52px;}

/* ============ Toast ============ */
.toast{
  position:fixed;left:50%;bottom:calc(var(--tabbar-h) + var(--safe-b) + 28px);
  transform:translateX(-50%);
  z-index:80;
  max-width:86vw;
  padding:11px 20px;border-radius:4px;
  background:rgba(31,28,24,.94);color:#f6f2ea;
  font-size:12.5px;line-height:1.6;text-align:center;letter-spacing:.04em;
  animation:fadeIn .2s var(--ease);
  pointer-events:none;
  box-shadow:0 8px 24px rgba(31,28,24,.22);
}

/* ============ 加载 ============ */
.spinner{
  width:15px;height:15px;border-radius:50%;
  border:1.5px solid var(--line-3);border-top-color:var(--accent);
  animation:spin .75s linear infinite;
  display:inline-block;vertical-align:middle;
}
@keyframes spin{to{transform:rotate(360deg);}}
.loading-row{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:34px 0;color:var(--ink-3);font-size:12.5px;letter-spacing:.08em;
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;}
}

/* 宽屏时把内容收窄，读起来更像一本书 */
@media (min-width:720px){
  .view{padding:0 24px;}
  main{max-width:600px;}
}