/* ==========================================================
   MIAO~Music · 音乐广播放送
   暖大地色 / 手作温度 / 柔和音乐调性
   自适应：手机 → 平板 → 桌面（流式栅格 + 安全区适配）
   ========================================================== */

:root{
  --brand:#92400E;      /* 主色 深咖棕 */
  --caramel:#B45309;    /* 辅色 焦糖 */
  --yellow:#FFC107;     /* 明黄 图鉴「已全部点亮」描边（比浅琥珀 #F0C97E 饱和、比金色 #D4A017 亮） */
  --gold:#D4A017;       /* 金色 图鉴「已点亮 N/M」描边 */
  --bg:#FEF3C7;         /* 背景 暖奶白 */
  --fg:#78350F;         /* 前景 */
  --card:#FFFFFF;       /* 卡片白 */
  --card-warm:#FFFCF3;  /* 暖白 */
  --line:#FDE68A;       /* 边框 */
  --muted:#A87C5C;      /* 次文字 */
  --ink:#3B2415;        /* 播放器深色底 */

  --maxw:1200px;        /* 内容最大宽度 */
  --gutter:18px;        /* 栅格间距 */
  --r-l:26px;
  --r-m:20px;
  --r-s:14px;
  --sh:0 10px 26px rgba(120,53,15,.08);
  --sh-lg:0 18px 40px rgba(120,53,15,.12);

  --safe-b:env(safe-area-inset-bottom, 0px);
  --safe-l:env(safe-area-inset-left, 0px);
  --safe-r:env(safe-area-inset-right, 0px);

  --font-t:'Varela Round','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  --font-b:'Nunito Sans','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-b);
  color:var(--fg);
  background:
    radial-gradient(1200px 620px at 8% -12%, #FFF6DF 0%, transparent 62%),
    radial-gradient(1000px 560px at 102% -6%, #FBE7C2 0%, transparent 58%),
    var(--bg);
  background-attachment:fixed;
  min-height:100%;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
button{font-family:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}
input{font-family:inherit;font-size:16px}   /* ≥16px 防 iOS 聚焦缩放 */
h1,h2,h3,h4,p{margin:0}
.vr{font-family:var(--font-t);font-weight:400;letter-spacing:.2px}
img,svg{display:block}

/* hidden 一律真正隐藏
   作者样式里的 display（.mini-list 的 flex、.tags 的 flex、.modal 的 flex）
   优先级高于浏览器内置的 [hidden]{display:none}，会让 hidden 属性失效，
   导致弹窗关闭后列表/筛选面板仍留在页面上。这里统一兜住。 */
[hidden]{display:none !important}

.hlist{scrollbar-width:none;-ms-overflow-style:none}
.hlist::-webkit-scrollbar{display:none}

/* ================= 顶部栏 ================= */
.topbar{
  position:sticky;top:0;z-index:70;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:calc(12px + var(--safe-l)*0) 18px 12px;
  padding-left:calc(18px + var(--safe-l));
  padding-right:calc(18px + var(--safe-r));
  background:rgba(254,243,199,.86);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;min-width:0;-webkit-tap-highlight-color:transparent}
/* mini 接管时整块 logo 区是播放开关，给个手型提示；未接管时保持默认光标 */
.brand.has-mini{cursor:pointer}
.brand-mark{
  width:38px;height:38px;border-radius:13px;flex:0 0 auto;display:grid;place-items:center;
  background:linear-gradient(150deg,#B45309,#92400E);
  box-shadow:0 6px 14px rgba(146,64,14,.26);
}
.brand-mark svg{width:28px;height:28px}
.brand-t{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.brand-t b{font-size:17px;color:var(--brand)}
.brand-t i{font-style:normal;font-size:11px;color:var(--muted);letter-spacing:.06em}
/* ---- 顶栏 mini 播放器：主播放器看不见时接管 logo 位（显示由 .brand.has-mini 控制）---- */
.brand-mini{
  width:44px;height:44px;border-radius:50%;flex:0 0 auto;display:none;
  align-items:center;justify-content:center;position:relative;cursor:pointer;
  background:#FFF7E6;border:1.5px solid var(--line);
  box-shadow:0 6px 14px rgba(146,64,14,.22);transition:transform .18s;
}
.brand-mini:hover{transform:scale(1.06)}
.brand.has-mini .brand-mark{display:none}
.brand.has-mini .brand-mini{display:flex}
/* mini 激活即与主播放器同步：动态「电台名 / 歌曲信息」替换静态「MIAO~Music」；主播放器恒有内容，不会空白 */
.brand.has-mini .brand-t{display:none}
.brand.has-mini .bm-txt{display:flex}
.bm-txt{
  display:none;flex-direction:column;line-height:1.25;min-width:0;
  max-width:42vw;overflow:hidden;pointer-events:none;
}
.bm-txt b{font-size:14px;font-weight:800;color:var(--brand);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bm-txt i{font-style:normal;font-size:11px;color:var(--muted);letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 无封面时的兜底唱片：同心圆渐变，和主播放器同一套视觉 */
.bm-disc{
  width:100%;height:100%;border-radius:50%;overflow:hidden;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 50%,#FFF7E6 0 26%,#F0D6A8 27% 62%,#FFF7E6 63% 78%,#E7C794 79% 100%);
}
/* 默认贴满圆：方形的专辑封面用 cover 撑满，不留白 */
.bm-disc img{
  width:100%;height:100%;object-fit:cover;object-position:50% 50%;border-radius:50%;display:block;
}
/* 明显长方的台标（由 app.js 的 fitMiniArt 按真实比例打上 .is-wide）：
   改用 contain 完整居中，padding 留内圈呼吸位，米白底衬避免唱片纹理从留白处透出 */
.bm-disc img.is-wide{
  object-fit:contain;background:#FFF7E6;
}
/* 上面 .bm-disc img 是作者样式，会盖掉 UA 的 [hidden]{display:none}，这里显式补回 */
.bm-disc img[hidden]{display:none}
.brand-mini.is-playing .bm-disc{animation:bm-spin 12s linear infinite}
@keyframes bm-spin{to{transform:rotate(360deg)}}
/* 播放中：封面边缘一圈向外扩散的光环（呼吸感提示，不遮挡封面）*/
.brand-mini.is-playing::after{
  content:"";position:absolute;inset:-3px;border-radius:50%;pointer-events:none;
  border:2px solid #E8A33D;opacity:0;
  animation:bm-pulse 2.4s ease-out infinite;
}
@keyframes bm-pulse{
  0%{transform:scale(.94);opacity:.55}
  70%{transform:scale(1.26);opacity:0}
  100%{transform:scale(1.26);opacity:0}
}
/* 右下角暂停小徽标已按需求移除：点击整个 logo 区（含文字）即停止播放 */
.top-right{display:flex;align-items:center;gap:12px}
.clock{
  display:none;align-items:center;gap:6px;color:var(--muted);
  font-size:12.5px;font-weight:800;background:rgba(255,255,255,.6);
  border:1px solid var(--line);border-radius:999px;padding:6px 12px;
}
.clock svg{width:15px;height:15px}
/* 顶栏右部「在听」人数：胶囊框已移除，只留圆点 + 数字 + 「在线」文字的裸排 */
.online{
  display:inline-flex;align-items:center;gap:6px;color:var(--muted);
  /* 800 → 400：去掉胶囊框后原粗字重显得太重，降到常规字重最轻一档。
     字体包只加载了 400/600/700/800（index.html 第 14 行），400 是已加载的最细字重，
     别写 300/500 —— 浏览器会向上匹配，等于白写。 */
  font-size:12.5px;font-weight:400;
}
.online-dot{
  width:5px;height:5px;border-radius:50%;flex:0 0 auto;
  background:#E0913A;box-shadow:0 0 0 0 rgba(224,145,58,.5);
  animation:on-pulse 2.4s ease-out infinite;
}
.online-num{color:var(--muted);font-variant-numeric:tabular-nums;min-width:1.4em;text-align:right}
.online-label{color:var(--muted)}
@keyframes on-pulse{
  0%{box-shadow:0 0 0 0 rgba(224,145,58,.4)}
  70%{box-shadow:0 0 0 7px rgba(224,145,58,0)}
  100%{box-shadow:0 0 0 0 rgba(224,145,58,0)}
}
.switch{
  display:none;gap:4px;padding:4px;background:#FFFDF7;border:1px solid var(--line);
  border-radius:999px;box-shadow:0 4px 14px rgba(120,53,15,.06);
}
.sw{font-size:13px;font-weight:700;color:var(--muted);padding:7px 16px;border-radius:999px;transition:.22s;white-space:nowrap}
.sw.is-on{background:var(--brand);color:#FFF7E6;box-shadow:0 4px 12px rgba(146,64,14,.28)}

/* ================= 主体 / 页面 ================= */
.shell{display:block}
.page-host{display:block}
.page{display:none}
.page.is-active{display:block;animation:fadeUp .34s cubic-bezier(.22,.9,.3,1)}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.page-body{
  max-width:var(--maxw);
  margin:0 auto;
  padding:18px 18px calc(96px + var(--safe-b));
  padding-left:calc(18px + var(--safe-l));
  padding-right:calc(18px + var(--safe-r));
}

/* 栅格：默认单列，≥1024 两列 */
.home-grid,.garden-grid,.mine-grid{
  display:grid;grid-template-columns:1fr;gap:var(--gutter);
}
.col-main,.col-side{min-width:0}
/* 搜索页：单列，限宽避免热门搜索卡被拉太宽 */
.search-col{max-width:720px}
/* 搜索分面 / 结果 */
.search-facet{margin:8px 2px 2px}
.search-result{margin:6px 0 0}
#searchResults .rdel{display:none!important}

/* ================= 通用 ================= */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh)}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:22px 2px 12px}
.sec-head h2,.sec-head .sec-title-btn{font-size:17px;color:var(--brand)}
.sec-title-btn{
  position:relative;                 /* 供当前项下划线 ::after 定位 */
  background:none;border:0;padding:0;margin:0;
  font-family:var(--font-t);font-weight:400;letter-spacing:.2px;
  line-height:inherit;text-align:left;cursor:pointer;
  display:inline-flex;align-items:center;
  transition:color .18s ease,opacity .18s ease,font-weight .18s ease;
}
.sec-title-btn:hover{color:var(--caramel)}
.sec-title-btn:active{opacity:.65}
.sec-title-btn[aria-expanded="true"]{color:var(--caramel)}
/* 当前所在项：文字加重 + 下方一条焦糖横线（绝对定位，不占位、不影响行高） */
.sec-title-btn.is-on{font-weight:600}
.sec-title-btn::after{
  content:'';position:absolute;left:0;right:0;top:100%;margin-top:5px;height:2px;
  border-radius:2px;background:var(--caramel);pointer-events:none;
  opacity:0;transform:scaleX(.55);
  transition:opacity .18s ease,transform .24s cubic-bezier(.22,.61,.36,1);
}
.sec-title-btn.is-on::after{opacity:1;transform:scaleX(1)}
.sec-titles{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
/* 标题栏里的关键词搜索框 */
.sec-search{
  align-self:center;position:relative;display:flex;align-items:center;gap:6px;
  flex:1 1 132px;min-width:118px;max-width:220px;height:31px;padding:0 8px;
  background:#FFFDF7;border:1.5px solid var(--line);border-radius:999px;
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.sec-search:focus-within{border-color:var(--caramel);background:#fff;box-shadow:0 0 0 3px rgba(180,83,9,.1)}
.sec-search>svg{width:14px;height:14px;flex:0 0 auto;color:#C08B57}
.sec-search input{
  flex:1;min-width:0;border:0;outline:none;background:none;padding:0;
  font-family:var(--font-b);font-size:12.5px;font-weight:700;color:var(--fg);
}
.sec-search input::placeholder{color:#C9A883;font-weight:600}
.sec-search-clear{
  flex:0 0 auto;width:17px;height:17px;padding:0;border:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:rgba(146,64,14,.13);color:var(--brand);transition:background .18s ease;
}
.sec-search-clear>svg{width:9px;height:9px}
.sec-search-clear:hover{background:rgba(146,64,14,.26)}
#homeRegionBar,#homeGenreBar{margin:0 2px 12px}
.more{font-size:12.5px;color:var(--muted);font-weight:700;cursor:pointer;white-space:nowrap}
.more:hover{color:var(--caramel)}

.phead{margin:4px 2px 16px;max-width:760px}
.phead h1{font-size:clamp(24px,4.6vw,30px);color:var(--brand)}
.phead p{font-size:13px;color:var(--muted);margin-top:6px}
.phead p b{color:var(--brand);font-weight:800}

.btn-primary{
  width:100%;display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--brand);color:#FFF7E6;font-size:15px;font-weight:800;
  padding:14px 18px;border-radius:18px;box-shadow:0 8px 20px rgba(146,64,14,.26);transition:.2s;
}
.btn-primary svg{width:18px;height:18px}
.btn-primary:hover{background:#7C360B}
.btn-primary:active{transform:scale(.99)}
.btn-primary.sm{width:auto;padding:11px 18px;font-size:14px;border-radius:16px}
.btn-ghost.sm{
  width:auto;padding:11px 18px;font-size:14px;font-weight:800;border-radius:16px;
  border:1.5px solid var(--line);background:#FFFDF7;color:var(--caramel);transition:.2s;
}
.btn-ghost.sm:hover{background:#FFF6DF}
/* 生词本按钮：与电台收藏同款枫叶图标（未收 outline / 已收 filled），正圆图标钮 */
.btn-ghost.sm.dict-save{
  width:34px;height:34px;flex:0 0 34px;padding:0;gap:0;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:#FFF7E6 url('icon-fav-outline.webp') center/22px no-repeat;
}
.btn-ghost.sm.dict-save:hover{background-color:#FFF6DF}
.btn-ghost.sm.dict-save.is-on{
  background-image:url('icon-fav-filled.webp');
  background-color:#FDE68A;border-color:#FDE68A;
}

/* ================= 首页 ================= */
/* margin-top:-6px —— 标题行（🍁MIAO~为你放送）上移。
   原本 margin-top 仅 2px，用负值把整行往上提；下边距 16px 保持不变，
   不影响标题与下方播放器的间距。 */
.greet{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin:-8px 2px 16px}
.greet-sub{font-size:12.5px;color:var(--muted);font-weight:700;letter-spacing:.3px}
.greet-title{font-size:clamp(23px,4.4vw,28px);color:var(--brand);margin-top:4px;display:flex;align-items:center;flex-wrap:nowrap;white-space:nowrap}
/* 首页标题后的「收音机」图标：跟随标题字号，与文字基线对齐，固定在首行末尾 */
.greet-ico{width:.92em;height:.92em;margin-left:9px;flex:0 0 auto}

/* 以音频流为主：播放器改成「方形封面 + 右侧信息」的横向紧凑布局 */
/* margin-top:-8px —— 整块（播放器 + 五个按钮 + 放送台行）整体上移。
   .player-card 自身无 margin，紧贴上方 .greet(margin-bottom:16px)，
   故用负上边距把这一整块往上拉，不改 .greet 以免影响标题行自身节奏。 */
.player-card{overflow:hidden;padding:0;display:flex;align-items:stretch;border-radius:0;margin-top:-4px}
.vwrap{
  position:relative;width:clamp(102px,26vw,146px);aspect-ratio:1;flex:0 0 auto;
  background:linear-gradient(150deg,#92400E,#5C3A20);overflow:hidden;border-radius:0;
}
.vwrap video{width:100%;height:100%;object-fit:cover;display:block;background:#2B1A0E}
.poster{
  position:absolute;inset:0;display:grid;place-items:center;
  background:linear-gradient(150deg,#92400E,#5C3A20);
  transition:opacity .35s;
}
.poster.hide{opacity:0;pointer-events:none}
.poster .disc{width:clamp(46px,9vw,66px);height:auto;aspect-ratio:1;opacity:.92;transition:opacity .25s}
/* 加载态：花瓣旋转加载动画（中央唱片转动、上方花瓣轻点） */
.poster .spin-icon{position:absolute;width:clamp(38px,7.5vw,54px);height:auto;aspect-ratio:1;display:none}
.poster.is-loading .spin-icon{display:block}
.poster.is-loading .disc,.poster.is-loading .bigplay{opacity:0;pointer-events:none}
/* 纯音频电台：没有画面，封面留着当唱片封面并转起来 */
.poster.is-audio .disc{
  width:clamp(52px,10.5vw,76px);transform-box:fill-box;transform-origin:center;
  animation:spin 3.4s linear infinite;
}
.poster.is-audio .bigplay{opacity:0;pointer-events:none}
.poster.is-audio.is-loading .disc{opacity:0;animation:none}
.poster.is-audio .disc{opacity:.95}
.poster.is-audio::after{
  content:'正在放送';position:absolute;bottom:7px;left:50%;transform:translateX(-50%);
  font-size:9.5px;font-weight:800;letter-spacing:.08em;color:#E8C79A;white-space:nowrap;
  background:rgba(43,26,14,.55);padding:3px 8px;border-radius:999px;z-index:6;
}
/* 播放时展示对应电台 logo：与电台卡一致——乳白底 + 整图 contain，不裁切、不留黑边 */
.poster.is-logo{background:#FFF7E6}
.poster .station-logo{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;padding:11% 10%;
  opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;z-index:2;transform:scale(.88);
}
.poster.is-logo .station-logo{opacity:1;transform:scale(1)}
.poster.is-logo .disc{display:none}
.poster.is-logo.is-audio::after{bottom:6px;z-index:3}
/* 按歌曲元数据加载的专辑封面：优先于台标显示为主封面，不铺底色 */
.poster .album-cover{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;padding:0;
  opacity:0;pointer-events:none;transition:opacity .35s,transform .35s;z-index:3;transform:scale(.9);
}
.poster.is-cover .album-cover{opacity:1;transform:scale(1)}
.poster.is-cover .disc,.poster.is-cover .station-logo{display:none}
.spin-icon svg{width:100%;height:100%;display:block}
.spin-bloom{transform-box:fill-box;transform-origin:center;animation:spin 2.6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* 启动加载层：PWA 冷启动时整屏显示花瓣球，就绪后由 app.js 加 .is-gone 淡出移除 */
.boot-splash{
  position:fixed;inset:0;z-index:9999;display:grid;place-items:center;
  background:#FEF3C7;
  transition:opacity .3s ease;
}
.boot-splash.is-gone{opacity:0;pointer-events:none}
.boot-inner{display:flex;flex-direction:column;align-items:center;gap:16px}
.boot-spin{display:block;width:clamp(56px,16vw,84px);height:auto;aspect-ratio:1}
.boot-spin svg{width:100%;height:100%;display:block}
.boot-name{
  font-family:'Varela Round',system-ui,-apple-system,'PingFang SC',sans-serif;
  font-size:18px;color:var(--brand);letter-spacing:.05em;line-height:1;
}
.bloom{transform-box:fill-box;transform-origin:center;animation:bloomTap 1.3s ease-in-out infinite}
@keyframes bloomTap{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4.5px) rotate(-7deg)}}
.bigplay{
  position:absolute;width:clamp(36px,7vw,46px);height:clamp(36px,7vw,46px);border-radius:50%;
  background:rgba(255,247,230,.94);color:var(--brand);display:grid;place-items:center;
  box-shadow:0 8px 18px rgba(0,0,0,.28);transition:.2s;
}
.bigplay:hover{transform:scale(1.06)}
.bigplay svg{width:20px;height:20px;margin-left:2px}
/* LIVE 角标：悬浮在封面左上角，去掉胶囊底框，只保留「亮红点 + LIVE 文字」。
   不做描边光晕、不投影——纯色直接压在封面上。
   字用品牌深棕，亮点是广播红（保留呼吸动画）。
   ⚠️ 风险：纯深棕字在深色封面上几乎不可见，仅靠浅色封面成立；如有需要再加描边。 */
.live-tag{
  position:absolute;left:8px;top:7px;z-index:7;
  display:inline-flex;align-items:center;justify-content:center;gap:4px;flex:0 0 auto;line-height:1;
  background:none;color:var(--caramel);font-size:9px;font-weight:800;letter-spacing:.08em;
  padding:0;border-radius:0;
}
.live-tag>span{line-height:1}
.live-tag i{width:5px;height:5px;border-radius:50%;background:#E24B2A;animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.vcount{
  display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;
  background:#FFF3D6;color:var(--caramel);
  font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;
}
.vcount .vc-ico{width:13px;height:13px;flex:0 0 auto}
.pinfo{
  position:relative;flex:1;min-width:0;padding:12px 14px;
  display:flex;flex-direction:column;justify-content:center;gap:10px;
  background-image:url('player-bg.jpg');background-size:auto 100%;background-position:center right;background-repeat:no-repeat;
}
.pinfo::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(to right,rgba(255,247,230,.45) 0%,rgba(255,247,230,.45) 62%,rgba(255,247,230,0) 100%);
}
.pinfo > *{position:relative;z-index:1}
.pinfo-top{margin-bottom:0}
.pinfo-head{flex:1;min-width:0}
.ptitle-row{display:flex;justify-content:flex-start;align-items:center;gap:8px}
#homeTitle{display:inline-flex;align-items:center;gap:6px;min-width:0;overflow:hidden}
#homeTitleText{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.title-ico{width:22px;height:22px;flex:0 0 auto}
.pinfo h3{font-size:clamp(15px,2.4vw,17px);color:var(--brand)}
.pinfo-sub{font-size:18px;color:var(--muted);margin-top:14px}

.prow{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:2px}
/* 四个控制按钮统一为正圆：等宽等高 + 50% 圆角 */
#homePlay,#homeMute,#homePrev,#homeNext,#homeFav{
  box-sizing:border-box;margin-top:12px;flex:0 0 auto;width:46px;height:46px;padding:0;
  border-radius:50%;overflow:hidden;
}
#homePrev,#homeNext{background:#FBEBCB;color:var(--brand);border:1.5px solid var(--line)}
#homePrev:hover,#homeNext:hover{background:#F6DFAE}
.pbtn{
  box-sizing:border-box;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  background:var(--brand);color:#FFF7E6;font-size:13px;font-weight:800;
  width:46px;height:46px;padding:0;border-radius:50%;transition:.2s;
}
.pbtn:hover{background:#7C360B}
.pbtn.ghost{background:#FFFDF5;border:1.5px solid var(--line);color:var(--caramel)}
.pbtn.ghost:hover{background:#FFF3D6}
.pbtn.ghost.is-on{background:var(--caramel);color:#FFF7E6;border-color:var(--caramel)}
.pbtn svg{width:17px;height:17px;flex:0 0 auto}
.ico-pause,.ico-mute{display:none}
.is-playing .ico-play{display:none}
.is-playing .ico-pause{display:block}
.is-muted .ico-vol{display:none}
.is-muted .ico-mute{display:block}

.quick{
  display:grid;grid-template-columns:repeat(5,1fr);gap:8px;
  margin:18px 0 0;max-width:520px;
}
/* 五个按钮与下方「放送台 / 按地区 / 按风格 + 搜索框」那行的间距：
   .sec-head 自带 margin-top:22px，.quick 是唯一定位锚点，用负下边距单独收紧这一处，
   不改动 .sec-head 本身（它在搜索页等 5 处复用，改全局会波及所有页面间距）。 */
.quick{margin-bottom:-10px}
.qitem{display:flex;flex-direction:column;align-items:center;gap:8px;padding:4px 0}
.qico{
  width:56px;height:56px;border-radius:19px;display:grid;place-items:center;
  box-shadow:0 8px 18px rgba(120,53,15,.14);transition:.22s;
}
.qitem:hover .qico{transform:translateY(-3px)}
.qico svg{width:26px;height:26px}
.qico img{width:26px;height:26px;display:block;object-fit:contain}
.qico.c1{background:linear-gradient(150deg,#B45309,#92400E);color:#FFF7E6}
.qico.c2{background:linear-gradient(150deg,#FDE68A,#F8D477);color:#7C360B}
.qico.c3{background:linear-gradient(150deg,#FFF7E6,#FDEFD3);color:var(--caramel);border:1.5px solid var(--line)}
.qico.c4{background:linear-gradient(150deg,#E9CFA3,#D9B47A);color:#4A2C18}
.qico.c5{background:linear-gradient(150deg,#F8D477,#E2A93B);color:#5A3308}
.qitem b{font-size:12.5px;font-weight:700;color:var(--fg);text-align:center}

/* 横向列表（窄屏横滑 / 宽屏铺开） */
.hlist{display:flex;gap:12px;overflow-x:auto;padding:2px 18px 6px;margin:0 -18px;scroll-snap-type:x proximity}
.mcard{flex:0 0 158px;scroll-snap-align:start}
.thumb{
  position:relative;height:98px;border-radius:18px;display:grid;place-items:center;margin-bottom:8px;
  box-shadow:0 8px 18px rgba(120,53,15,.16);overflow:hidden;
}
.thumb svg{width:38px;height:38px}
.thumb.t1{background:linear-gradient(150deg,#B45309,#7C360B)}
.thumb.t2{background:linear-gradient(150deg,#92400E,#5C3A20)}
.thumb.t3{background:linear-gradient(150deg,#C98B3F,#A16207)}
.thumb.t4{background:linear-gradient(150deg,#D9B47A,#B45309)}
/* 磁贴卡复用同一套配色（rthumb 会铺满整卡，缺配色就是空白块） */
.rthumb.t1{background:linear-gradient(150deg,#B45309,#7C360B)}
.rthumb.t2{background:linear-gradient(150deg,#92400E,#5C3A20)}
.rthumb.t3{background:linear-gradient(150deg,#C98B3F,#A16207)}
.rthumb.t4{background:linear-gradient(150deg,#D9B47A,#B45309)}
/* 电台台标图：奶白底 + contain 居中，不裁切比例 */
.thumb.is-logo{background:#FFF7E6;padding:14px 12px}
.thumb.is-logo img{width:100%;height:100%;object-fit:contain;display:block}
.t-live,.t-time{
  position:absolute;top:8px;left:8px;background:rgba(255,247,230,.92);color:var(--brand);
  font-size:9.5px;font-weight:800;letter-spacing:.06em;padding:3px 7px;border-radius:7px;
}
.mcard h4{font-size:13.5px;color:var(--fg);line-height:1.35}
.mcard p{font-size:11px;color:var(--muted);margin-top:3px}

/* ================= 搜索 ================= */
.searchbar{
  display:flex;align-items:center;gap:10px;background:var(--card);
  border:1.5px solid var(--line);border-radius:20px;padding:8px 8px 8px 14px;
  box-shadow:var(--sh);margin-bottom:20px;max-width:760px;transition:.2s;
}
.searchbar:focus-within{border-color:var(--caramel);box-shadow:0 0 0 4px rgba(180,83,9,.1)}
.sbi{width:19px;height:19px;color:var(--muted);flex:0 0 auto}
#searchInput{flex:1;min-width:0;border:0;outline:none;font-size:15px;color:var(--fg);background:none;padding:8px 0}
#searchInput::placeholder{color:#C9A883}
.sbtn{background:var(--brand);color:#FFF7E6;font-size:13.5px;font-weight:800;padding:11px 20px;border-radius:14px;box-shadow:0 6px 16px rgba(146,64,14,.24);transition:.2s;white-space:nowrap}
.sbtn:hover{background:#7C360B}

/* ================= 词典（原搜索页位置） ================= */
.dict-page{max-width:760px}
.dict-bar{
  display:flex;align-items:center;gap:8px;background:#FFFDF7;
  border:1.5px solid var(--line);border-radius:999px;height:42px;padding:0 5px 0 18px;
  margin-bottom:18px;transition:border-color .18s ease,background .18s ease,box-shadow .18s ease;
  box-shadow:0 4px 18px rgba(146,64,14,.08);
}
.dict-bar:focus-within{border-color:var(--caramel);background:#fff;box-shadow:0 0 0 3px rgba(180,83,9,.1)}
/* 查询按钮：放大镜移到右端，点击即查词（原左端装饰图标 + 右端 X 已移除） */
.dict-go{
  flex:0 0 auto;width:32px;height:32px;padding:0;border:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:var(--brand);color:#fff;transition:background .18s ease,transform .12s ease;
}
.dict-go svg{width:16px;height:16px}
.dict-go:hover{background:#A34A08}
.dict-go:active{transform:scale(.93)}
#dictInput{flex:1;min-width:0;border:0;outline:none;font-size:15px;color:var(--fg);background:none;padding:0;text-align:left}
#dictInput::placeholder{color:#B9A08A;font-size:15px}

.dict-result{margin-top:4px}
.dict-empty{color:var(--muted);font-size:13.5px;padding:14px 6px;text-align:center;background:#FFFDF5;border:1.5px dashed var(--line);border-radius:18px}
.dict-empty.sm{padding:10px 6px;font-size:12.5px}

/* 释义弹窗：弹窗本身已是卡片，内层去掉边框/阴影避免双层 */
.dict-modal-card{max-height:78vh;display:flex;flex-direction:column;overflow:hidden}
.dict-modal-card .dict-card{background:none;border:0;box-shadow:none;border-radius:0;min-height:0;padding:0;animation:none;overflow:visible}
/* 标题行 + 收藏枫叶钮：对齐设计稿（标题更大、徽标更醒目） */
.dict-modal-card .modal-head{margin-bottom:14px}
.dict-modal-card .modal-head h3{font-size:20px}
.dict-modal-card .btn-ghost.sm.dict-save{width:38px;height:38px;flex-basis:38px;background-size:24px}
.dict-modal-card .dict-word{gap:12px;margin-bottom:14px}
.dict-modal-card .dict-word h2{font-size:clamp(24px,6.5vw,30px)}
.dict-modal-card .dict-phon{font-size:15px}
/* 释义显示范围：滚动容器取直角边界（不再吃弹窗圆角），横向不裁切、长行强制折行，保证内容完整 */
.dict-modal-card .dict-body{max-height:min(46vh,calc(100vh - 260px));overflow-y:auto;overflow-x:hidden;overflow-wrap:anywhere}

.dict-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);
  padding:18px 18px 16px;box-shadow:var(--sh);animation:fadeUp .3s cubic-bezier(.22,.9,.3,1);
}
.dict-word{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.dict-word h2{font-family:var(--font-t);font-size:clamp(22px,4.5vw,28px);color:var(--brand);font-weight:400}
.dict-phon{font-size:14px;color:var(--caramel);font-weight:700;letter-spacing:.3px}
/* 释义弹窗发音钮：与生词本列表 .dv-spk 同款（淡暖底圆 + 品牌色描边喇叭） */
.dict-spk{
  width:36px;height:36px;border-radius:50%;border:0;
  background:rgba(180,83,9,.1);color:var(--brand);display:grid;place-items:center;cursor:pointer;transition:.18s;flex:0 0 auto;
}
.dict-spk svg{width:16px;height:16px}
.dict-spk:hover{background:rgba(180,83,9,.2)}
.dict-body{font-size:15.5px;line-height:1.6;color:var(--fg)}
/* 纯文本释义兜底（离线/无 HTML 词条）：与富格式同一套徽标语言 */
.dict-line{padding:4px 0;font-size:16px;line-height:1.55}
.dict-pos{
  display:inline-block;font-weight:800;color:#92400E;background:#FBEFC6;
  border-radius:9px;padding:3px 11px;margin-right:10px;font-size:13px;vertical-align:2px;
}
.dict-freq{margin-top:12px;font-size:13px;color:var(--muted)}
.dict-conj{margin-top:6px;font-size:12.5px;color:var(--caramel);background:#FFF6DF;display:inline-block;border-radius:8px;padding:4px 10px}
/* 生词本按钮容器：位于弹窗标题行 .modal-head 右端（标题左侧） */
.dict-acts{margin-left:auto;flex:0 0 auto;display:flex}

.dict-sugg{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px}
.dict-sugbitem{font-size:13px;font-weight:700;color:var(--fg);background:var(--card);border:1px solid var(--line);border-radius:13px;padding:8px 14px;transition:.2s}
.dict-sugbitem:hover{background:#FFF6DF;color:var(--caramel)}

.dict-vocab-entry{
  margin-top:24px;width:100%;display:flex;align-items:center;gap:14px;
  background:var(--card);border:0;border-radius:22px;padding:14px 18px 14px 14px;
  box-shadow:var(--sh);cursor:pointer;font-family:inherit;text-align:left;transition:.2s;
}
.dict-vocab-entry:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(146,64,14,.13)}
.dve-ico{width:50px;height:50px;flex:0 0 auto;border-radius:15px;background:linear-gradient(160deg,var(--brand),var(--caramel));color:#FFF7E6;display:grid;place-items:center;box-shadow:0 5px 12px rgba(146,64,14,.26)}
.dve-ico svg{width:24px;height:24px}
.dve-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.dve-main b{font-size:17px;font-weight:800;color:var(--fg)}
.dve-main i{font-style:normal;font-size:13px;color:var(--muted)}
.dve-arrow{flex:0 0 auto;font-size:24px;line-height:1;color:#C9A883;margin-top:-2px;transition:transform .25s}
.dict-vocab-entry[aria-expanded="true"] .dve-arrow{transform:rotate(90deg)}
.dict-vocab{display:flex;flex-direction:column;margin-top:10px;background:var(--card);border-radius:20px;padding:2px 16px;box-shadow:var(--sh)}
.dict-vrow{display:flex;align-items:center;gap:10px;padding:13px 0;border-bottom:1px solid var(--line)}
.dict-vrow:last-child{border-bottom:0}
.dict-vrow:hover{background:rgba(253,230,138,.14)}
.dict-vmain{flex:1;min-width:0;display:block;text-align:left;background:none;border:0;padding:0;cursor:pointer;font-family:inherit}
.dv-top{display:flex;align-items:baseline;gap:9px;min-width:0}
.dv-top b{font-size:16.5px;font-weight:800;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dv-phon{font-style:italic;font-size:13px;color:var(--caramel);white-space:nowrap}
.dv-sub{display:flex;align-items:center;gap:8px;margin-top:5px;min-width:0}
.dv-pos{flex:0 0 auto;font-size:11.5px;font-weight:800;color:var(--brand);background:#FBEAD1;border-radius:6px;padding:2px 7px}
.dv-gloss{flex:1;min-width:0;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dv-spk{width:36px;height:36px;flex:0 0 auto;border-radius:50%;border:0;background:rgba(180,83,9,.1);color:var(--brand);display:grid;place-items:center;cursor:pointer;transition:.18s}
.dv-spk svg{width:16px;height:16px}
.dv-spk:hover{background:rgba(180,83,9,.2)}

/* 热门搜索（原地址播放卡已移除，标签独立成卡） */
.hot-card{padding:14px 16px 16px}
.hot-card .sec-head{margin:2px 0 12px}

.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{font-size:12.5px;font-weight:700;color:var(--fg);background:var(--card);border:1px solid var(--line);border-radius:13px;padding:8px 14px;transition:.2s}
.tag:hover{background:#FFF6DF;color:var(--caramel)}
.tag.on{background:var(--brand);color:#FFF7E6;border-color:var(--brand)}
.tag.on:hover{background:var(--caramel);color:#FFF7E6}
.tag.flat{background:#FFFDF5;border-style:dashed;color:var(--muted);cursor:default}

/* 首页「按地区 / 按风格」胶囊：一横行排布，可左右滑动（滚动条隐藏，仅作用于首页两个分面栏） */
#homeRegionBar,
#homeGenreBar{
  flex-wrap:nowrap;               /* 不换行：永远保持单行 */
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch; /* iOS 惯性滑动 */
  scroll-snap-type:x proximity;
  scrollbar-width:none;            /* Firefox 隐藏滚动条 */
  -ms-overflow-style:none;          /* 旧 Edge/IE */
  padding:2px 0 4px;
}
#homeRegionBar::-webkit-scrollbar,
#homeGenreBar::-webkit-scrollbar{display:none}
#homeRegionBar .tag,
#homeGenreBar .tag{
  flex:0 0 auto;                   /* 不压缩，超出宽度即形成横向滚动 */
  white-space:nowrap;              /* 胶囊文字不折行 */
  scroll-snap-align:start;
}

/* 右侧渐隐遮罩：提示「还能往右滑」（隐藏滚动条后的可发现性提示）
   mask 作用于元素可视框而非滚动内容，所以渐隐始终固定在边缘，不会跟着滚走。
   由 JS 依据滚动位置打 can-left / can-right：哪边还有内容才渐隐哪边。 */
#homeRegionBar.can-right,
#homeGenreBar.can-right{
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent 100%);
          mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent 100%);
}
/* 左侧还有内容（已往右滑过）：左边也渐隐 */
#homeRegionBar.can-left,
#homeGenreBar.can-left{
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 28px);
          mask-image:linear-gradient(to right,transparent 0,#000 28px);
}
/* 两侧都还有内容：两边同时渐隐（放最后，同权重下后来者胜） */
#homeRegionBar.can-left.can-right,
#homeGenreBar.can-left.can-right{
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%);
          mask-image:linear-gradient(to right,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%);
}

/* ================= 电台卡：正方形磁贴（每行 5 个） ================= */
.rlist{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
/* 卡片本体：1:1 正方形，台标铺满整卡，底部渐变信息条 */
.rlist .rcard{
  position:relative;aspect-ratio:1/1;min-width:0;padding:0;overflow:hidden;cursor:pointer;
  background:var(--card);border:1px solid var(--line);border-radius:20px;
  box-shadow:0 6px 16px rgba(120,53,15,.08);
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.rlist .rcard:hover{
  transform:translateY(-3px);border-color:#F8D477;box-shadow:0 14px 26px rgba(120,53,15,.2);
}
/* 正在播放的电台卡片：勾边线与 mini 播放转盘的扩散光晕同色（#E8A33D） */
.rlist .rcard.is-cur{
  border-color:#E8A33D;
  box-shadow:0 0 0 2px rgba(232,163,61,.9), 0 10px 22px rgba(146,64,14,.22);
}
/* 台标 / 图形：铺满整张卡 */
.rlist .rcard .rthumb{
  position:absolute;inset:0;width:auto;height:auto;margin:0;border-radius:0;
  display:grid;place-items:center;overflow:hidden;
}
.rlist .rcard .rthumb svg{width:36%;max-width:58px;height:auto;aspect-ratio:1}
/* 真实台标：奶白底 + contain，整体上移避开底部信息条 */
.rlist .rcard .rthumb.is-logo{background:#FFF7E6;padding:12% 11% 30%}
.rlist .rcard .rthumb.is-logo img{width:100%;height:100%;object-fit:contain;display:block}
.rlist .rcard .rthumb.is-logo svg{width:100%;max-width:none;height:100%;aspect-ratio:auto;display:block}
/* 底部信息条 */
.rlist .rcard .rmeta{
  position:absolute;left:0;right:0;bottom:0;z-index:2;flex:none;min-width:0;
  display:flex;flex-direction:column;gap:3px;padding:12px 9px 8px;pointer-events:none;
  background:linear-gradient(to top,rgba(43,26,14,.92),rgba(43,26,14,.62) 42%,rgba(43,26,14,0));
}
.rlist .rcard h4{
  font-size:13px;color:#FFF7E6;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.rlist .rcard p{
  margin-top:0;font-size:10px;color:rgba(255,247,230,.72);line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* 国家 / 风格标签（深色信息条上适配） */
.rtags{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-top:1px}
.rtag{
  display:inline-flex;align-items:center;gap:3px;font-size:9.5px;font-weight:800;line-height:1;
  color:#F7E7C8;background:rgba(255,247,230,.18);border:1px solid rgba(255,247,230,.3);
  border-radius:7px;padding:3px 5px;white-space:nowrap;
}
/* 角标与收藏按钮浮在磁贴上层 */
.t-live,.t-time{z-index:3}
/* 移除按钮：桌面 hover 出现，触屏长按出现（.is-edit） */
.rlist .rcard{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.rlist .rcard .rdel{
  position:absolute;top:8px;left:8px;z-index:4;width:26px;height:26px;border-radius:50%;
  background:rgba(43,26,14,.66);color:#FFF7E6;display:grid;place-items:center;
  opacity:0;transform:scale(.85);pointer-events:none;transition:opacity .18s,transform .18s,background .18s;
}
.rlist .rcard .rdel svg{width:12px;height:12px}
.rlist .rcard .rdel:hover{background:#B91C1C}
@media (hover:hover){.rlist .rcard:hover .rdel{opacity:1;transform:none;pointer-events:auto}}
.rlist .rcard.is-edit .rdel,
.rlist .rcard .rdel:focus-visible{opacity:1;transform:none;pointer-events:auto}
/* 预设台标图标走乳白底，尺寸收一档 */
.rlist .rcard .rthumb.is-logo.is-icon svg{width:46%;height:auto;aspect-ratio:1;max-width:none}
/* 添加电台占位磁贴 */
.rlist .rcard.add-card{
  display:grid;place-items:center;align-content:center;gap:6px;text-align:center;
  background:#FFFDF5;border:1.5px dashed #EFC98A;box-shadow:none;
}
.rlist .rcard.add-card:hover{border-color:var(--caramel);background:#FFF7E6;border-style:dashed}
.add-ico{width:32px;height:32px;border-radius:50%;background:#FFF3D6;color:var(--caramel);display:grid;place-items:center}
.add-ico svg{width:16px;height:16px}
.add-card b{font-size:12px;font-weight:800;color:var(--brand);line-height:1.3}
.add-card span:not(.add-ico){font-size:9.5px;color:var(--muted);line-height:1.3}

/* ================= 花园 ================= */
.garden-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;max-width:none}
.drop-chip{
  display:flex;align-items:center;gap:6px;flex:0 0 auto;margin-top:6px;
  background:#FFF3D6;border:1px solid var(--line);color:var(--caramel);
  font-size:12.5px;font-weight:800;padding:8px 13px;border-radius:999px;white-space:nowrap;
}

.tree-card{padding:0;overflow:hidden;margin-bottom:4px}
.tree-stage{
  position:relative;min-height:clamp(180px,26vw,230px);display:grid;place-items:center;padding:14px;
  background:linear-gradient(180deg,#FFF7E0 0%,#FDEBC4 60%,#F7DFAE 100%);
  border-bottom:1px dashed var(--line);
}
.tree{width:min(240px,80%);height:auto;aspect-ratio:220/200}
/* 树下的猫：呼吸起伏 */
.tree-cat{transform-box:fill-box;transform-origin:center bottom;animation:catBreath 3.6s ease-in-out infinite}
@keyframes catBreath{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.035)}}
.tree-tag{position:absolute;top:14px;left:14px;background:rgba(255,255,255,.86);color:var(--brand);font-size:11.5px;padding:6px 12px;border-radius:999px;border:1px solid var(--line)}
.grow{padding:14px 16px 4px}
.grow-top{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted);font-weight:700}
.grow-top b{color:var(--brand)}
.bar{height:10px;border-radius:999px;background:#FFF3D6;overflow:hidden;margin:8px 0}
.bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#B45309,#92400E);transition:width .6s cubic-bezier(.22,.9,.3,1)}
.grow-hint{font-size:11.5px;color:var(--muted)}
.grow-hint b{color:var(--caramel)}
.tree-acts{display:flex;gap:10px;padding:12px 16px 16px;flex-wrap:wrap}

.task-card{padding:4px 6px}
.task{width:100%;display:flex;align-items:center;gap:12px;padding:11px 10px;border-radius:16px;text-align:left;transition:.2s}
.task:hover{background:#FFFBF0}
.tick{width:24px;height:24px;border-radius:8px;border:1.8px solid var(--line);display:grid;place-items:center;color:#fff;flex:0 0 auto;transition:.2s}
.tick svg{width:14px;height:14px}
.task.done .tick{background:#65A30D;border-color:#65A30D}
.task.done .tk b{color:var(--muted)}
.tk{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.tk b{font-size:13.5px;color:var(--fg)}
.tk i{font-style:normal;font-size:11.5px;color:var(--muted)}
.rw{font-size:12.5px;font-weight:800;color:var(--caramel)}

.cam-card{display:flex;gap:12px;padding:12px;align-items:center}
.cam-thumb{position:relative;width:clamp(96px,16vw,124px);aspect-ratio:112/78;border-radius:16px;display:grid;place-items:center;flex:0 0 auto}
.cam-thumb svg{width:30px;height:30px}
.cam-play{
  position:absolute;inset:0;margin:auto;width:38px;height:38px;border-radius:50%;
  background:rgba(255,247,230,.92);color:var(--brand);display:grid;place-items:center;
  box-shadow:0 6px 16px rgba(0,0,0,.2);transition:.2s;
}
.cam-card:hover .cam-play{transform:scale(1.08)}
.cam-play svg{width:16px;height:16px;margin-left:2px}
.cam-meta h4{font-size:14.5px;color:var(--fg)}
.cam-meta p{font-size:11.5px;color:var(--muted);margin-top:4px}
.cam-sub{display:inline-block;margin-top:7px;font-size:10.5px;color:var(--caramel);background:#FFF3D6;border-radius:8px;padding:4px 8px}

/* 图鉴：覆盖 .hlist 的横向滚动，改成自动换行网格。
   19 种风格全部铺开显示，不再需要横向滑动。
   负margin/左右 padding 是 .hlist 为贴边滚动准备的，网格下会导致溢出，一并归零。 */
.hlist.dex,.col-side .hlist.dex{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(76px,1fr));
  gap:9px;
  overflow-x:visible;
  scroll-snap-type:none;
  padding:2px 0 6px;
  margin:0;
}
/* 正方形格子：宽由 grid 的 1fr 决定，高用 aspect-ratio:1/1 跟上。
   **缩小格子必须先降 minmax，而不是只缩内部元素** —— 因为 1fr 会把格子撑满
   剩余宽度，只缩内部元素的话格子尺寸不变、内容却会挤成一团。
   minmax 88→76 让列数增加，格子才真正变小：
     375px 视口 3列107.67px → 4列 78.25px
     PC 右栏  2列 135px    → 3列 86.67px（1024px 视口 4列 83.35px）
   内部尺寸按最小格子 78.25px 反推：5+5(padding) +2(border) +32(图标) +3(gap)
   +13.125(b行) +11.25(i行) ≈ 71.4，留 6.9px 余量。
   文案一律 nowrap + 省略号（完整名与提示走 title），
   这样「电视伴音」「Meditation」也不会换行把方形撑破。 */
.dex .dex-c{width:auto;min-width:0;aspect-ratio:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;background:var(--card);border:1px solid var(--line);border-radius:17px;padding:5px;text-align:center;overflow:hidden}
.dex .dex-c b{font-size:10.5px;color:var(--fg);line-height:1.25;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dex .dex-c i{font-style:normal;font-size:9px;color:var(--muted);line-height:1.25;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 只给汉字加字距，数字/斜杠不加（app.js 里用 .cjk 只包住汉字部分）。
   letter-spacing 会在最后一个字**后面**也加一段，导致汉字和紧跟的数字之间多出空隙、
   且居中时整体偏左，所以用 margin-right 负值抵消掉那最后一段——
   这样字距只出现在「已 点 亮」之间，「3/4」与数字之间保持原样紧凑。 */
.dex .dex-c .cjk{letter-spacing:1.5px;margin-right:-1.5px}
/* 「已全部点亮」：整张格子高亮 + 明黄描边，与「已点亮 N/M」的金色边区分开（色不同 + 2px vs 1px）。
   用 .is-on.full 提高优先级，盖过下方 .is-on 的底色/边框。 */
.dex .dex-c.is-on.full{background:linear-gradient(135deg,#FFF4DC,#FFE6BC);border:2px solid var(--yellow);box-shadow:0 4px 14px rgba(255,193,7,.30)}
.dex-i{width:32px;height:32px;border-radius:11px;background:#FFF3D6;color:var(--caramel);display:grid;place-items:center;flex:0 0 auto}
.dex-i svg{width:18px;height:18px}
/* Classical 是竖长条造型的高音谱号（宽高比约 0.41），18px 方框里显得比其他风格瘦小一截，
   单独放大到 21px 让它和其它图标的视觉重量一致。用 data-genre 精准命中，不影响其余 23 个。 */
.dex .dex-c[data-genre="Classical"] .dex-i svg{width:21px;height:21px}
/* 未听过：镇暗但不隐藏，保留全部 21 种风格可被浏览 */
.dex .dex-c:not(.is-on):not(.lock){opacity:.72}
/* 听过但没听满的风格（已点亮 N/M）：金色描边 */
.dex .dex-c.is-on{background:#FFF8EC;border-color:var(--gold);box-shadow:0 4px 12px rgba(146,64,14,.13)}
.dex .dex-c.is-on .dex-i{background:#FBE3B4;color:#92400E}
.dex .dex-c.is-on b{color:#92400E}
.dex .dex-c.is-on i{color:#B45309;font-weight:600}
/* 暂无电台的占位风格：最淡，压到最后一列 */
.dex .dex-c.lock{opacity:.45}
.dex .dex-c.lock .dex-i{background:#F7EFDF;color:#C09269}
.dex .dex-c.lock b{color:var(--muted)}
/* 点图鉴格子的手感反馈 */
.dex .dex-c{cursor:pointer;transition:transform .18s,border-color .18s,box-shadow .18s}
/* hover 边框也用金色：原来写死 #F0C97E 浅琥珀，与 .is-on 同特异度且写在后面，
   会把「已点亮」格子的金边在悬停时冲掉（闪一下变浅）。.is-on.full 特异度更高，不受影响。 */
.dex .dex-c:hover{transform:translateY(-2px);border-color:var(--gold)}
@media (hover:hover){.dex .dex-c:hover{box-shadow:0 8px 18px rgba(146,64,14,.16)}}
.dex .dex-c:active{transform:translateY(0)}

/* ================= 我的 ================= */
.mine-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.set-btn{width:40px;height:40px;border-radius:14px;background:var(--card);border:1px solid var(--line);display:grid;place-items:center;color:var(--brand);box-shadow:var(--sh);flex:0 0 auto}
.set-btn svg{width:20px;height:20px}

.profile{display:flex;align-items:center;gap:13px;padding:16px;margin-bottom:12px}
.avatar{width:62px;height:62px;border-radius:22px;overflow:hidden;flex:0 0 auto}
.avatar svg{width:100%;height:100%}
.pf-main{flex:1;min-width:0}
.pf-main h2{font-size:18px;color:var(--brand);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pf-main p{font-size:11.5px;color:var(--muted);margin-top:5px}
.badge{font-family:var(--font-b);font-size:10.5px;font-weight:800;color:var(--caramel);background:#FFF3D6;border-radius:8px;padding:3px 8px;letter-spacing:0}
.edit-btn{font-size:12.5px;font-weight:800;color:var(--brand);background:#FFFDF5;border:1.5px solid var(--line);border-radius:13px;padding:8px 14px;transition:.2s;flex:0 0 auto}
.edit-btn:hover{background:#FFF3D6}

.stat-row{display:flex;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:14px 6px;margin-bottom:16px;box-shadow:var(--sh)}
.stat{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px}
.stat b{font-family:var(--font-t);font-size:17px;color:var(--brand)}
.stat span{font-size:11px;color:var(--muted)}
.sline{width:1px;height:26px;background:var(--line);flex:0 0 auto}

.vip{
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;
  border:1px solid #F1DFB4;background:linear-gradient(135deg,#FDF6E6 0%,#F7EAD0 100%);
  box-shadow:0 6px 14px rgba(146,64,14,.08);
}
.vip-eyebrow{font-size:10px;letter-spacing:.18em;font-weight:700;color:#B0824C}
.vip h3{font-size:13px;color:#B58A5C;margin-top:4px}
.vip-sub{font-size:11.5px;color:#F8E3C0;margin-top:6px}
.vip-art{width:56px;height:56px;flex:0 0 auto}
.vip-art svg{width:100%;height:100%}
/* 「月影小花园」卡已从「我的」页移到「花园」页侧栏（风格图鉴格子下方），
   上方已加 .sec-head 标题（自带 22/12 间距），卡不再需要额外上间距。 */

.menu{padding:4px 6px;margin-bottom:4px}
.mi{width:100%;display:flex;align-items:center;gap:12px;padding:11px 10px;border-radius:16px;text-align:left;transition:.2s}
.mi:hover{background:#FFFBF0}
.mi-ico{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;flex:0 0 auto}
.mi-ico svg{width:20px;height:20px}
.mi-ico.c1{background:#FFF3D6;color:var(--caramel)}
.mi-ico.c2{background:#FDEFD3;color:var(--brand)}
.mi-ico.c3{background:#FFF7E6;color:var(--caramel);border:1px solid var(--line)}
.mi-ico.c4{background:#FBEBCB;color:#7C360B}
.mi b{flex:1;font-size:14px;font-weight:700;color:var(--fg)}
.mi i{font-style:normal;font-size:11.5px;color:var(--muted)}
.mi em{font-style:normal;font-size:17px;color:#D9BFA0;margin-left:6px}

.foot-note{font-size:11.5px;color:#C09269;margin:20px 0 4px;text-align:center}

/* ================= 底部 TabBar ================= */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  display:flex;align-items:stretch;gap:2px;
  padding:4px 6px calc(4px + var(--safe-b));
  padding-left:calc(4px + var(--safe-l));
  padding-right:calc(4px + var(--safe-r));
  /* 移动端：降低不透明度 + 毛玻璃，让底部栏更轻、透出内容但不扰眼 */
  background:rgba(255,252,243,.60);
  -webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);
  border-top:1px solid var(--line);
}
.tab{
  flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:0 2px;color:var(--muted);transition:.22s;border-radius:16px;
}
.tab-ico{width:48px;height:24px;border-radius:13px;display:grid;place-items:center;transition:.26s}
.tab-ico svg{width:22px;height:22px}
.tab-t{font-size:12px;font-weight:800;letter-spacing:.3px;white-space:nowrap}
/* 激活态小圆点：所有 tab 都渲染同尺寸的占位圆点（默认透明），
   仅 .is-on 时上色 —— 高度恒定，切换 tab 时底栏不会跳动。 */
.tab-t::after{content:'';display:block;width:3px;height:3px;border-radius:50%;margin:2px auto 0;background:transparent}
.tab.is-on .tab-t::after{background:rgba(180,83,9,.42)}
.tab:hover{color:var(--caramel)}
.tab.is-on{color:var(--brand)}
.tab.is-on .tab-t{position:relative}

/* ─── 暂时停用：底部「词典」「我的」两个 tab（2026-10-10）─────────────────
   只是 CSS 隐藏，DOM 节点与两个页面 section 都原样保留，随时可恢复。
   恢复方法：把下面这条规则删掉或注释掉即可（无需改 index.html / app.js）。
   ------------------------------------------------------------------ */
.tab[data-tab="search"],.tab[data-tab="mine"]{display:none}

/* ================= 四屏总览 ================= */
.panels{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px;
  max-width:1600px;margin:0 auto;
  padding:18px 18px calc(40px + var(--safe-b));
}
.panel{
  display:flex;flex-direction:column;min-width:0;
  background:var(--card-warm);border:1px solid var(--line);border-radius:var(--r-l);
  overflow:hidden;height:min(78vh,860px);min-height:600px;box-shadow:var(--sh);
}
.panel-head{
  flex:0 0 auto;display:flex;align-items:center;gap:9px;padding:12px 16px;
  background:#FFF7E0;border-bottom:1px solid var(--line);
}
.panel-head .pdot{width:8px;height:8px;border-radius:50%;background:var(--caramel)}
.panel-head b{font-size:13.5px;color:var(--brand);flex:1;font-weight:800}
.panel-open{font-size:12px;font-weight:800;color:var(--caramel);background:#FFF3D6;border-radius:10px;padding:5px 11px;transition:.2s}
.panel-open:hover{background:var(--caramel);color:#FFF7E6}
.panel .page-host{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.panel .page{display:flex;flex-direction:column;flex:1;min-height:0}
.panel .page-body{flex:1;min-height:0;overflow-y:auto;max-width:none;padding:16px 16px 26px}
body.grid-on .tabbar{display:none}
body.grid-on .home-grid,
body.grid-on .garden-grid,
body.grid-on .mine-grid{grid-template-columns:1fr}

/* ================= Toast ================= */
.toast{
  position:fixed;left:50%;bottom:calc(104px + var(--safe-b));transform:translate(-50%,20px);z-index:300;
  background:rgba(59,36,21,.94);color:#FFF7E6;font-size:13.5px;font-weight:700;
  padding:12px 20px;border-radius:16px;box-shadow:0 12px 30px rgba(0,0,0,.3);
  opacity:0;pointer-events:none;transition:.28s;max-width:88vw;text-align:center;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ================= 添加电台弹窗 ================= */
.modal{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;padding:18px}
.modal[hidden]{display:none}
.modal-mask{position:absolute;inset:0;background:rgba(59,36,21,.44);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.modal-card{
  position:relative;width:min(420px,100%);max-height:calc(100vh - 36px);overflow-y:auto;
  background:var(--card);border:1px solid var(--line);border-radius:26px;
  padding:20px 20px 18px;box-shadow:0 26px 60px rgba(120,53,15,.3);
  animation:modalIn .22s ease-out;
}
@keyframes modalIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}
.modal-head h3{font-size:18px;color:var(--brand)}
/* 单词释义弹窗：弹窗圆角保留（26px，同 .modal-card）。
   裁切的根因不在弹窗本身，而在内层 .dict-card 继承了 26px 圆角又 overflow:auto，
   内容贴着它的圆角边缘被切掉；故只把内层改直角、让滚动发生在直角边界上。
   必须写在 .modal-card 之后，否则同权重会被上面的 overflow 覆盖。 */
.modal-card.dict-modal-card{
  border-radius:26px;max-height:calc(100vh - 36px);overflow:hidden;
  display:flex;flex-direction:column;
}
.modal-x{
  width:32px;height:32px;border-radius:50%;background:#FFF9EA;color:var(--muted);
  font-size:20px;line-height:1;display:grid;place-items:center;transition:.2s;flex:0 0 auto;
}
.modal-x:hover{background:#FFF1D2;color:var(--brand)}
/* ================= 首次访问欢迎层 ================= */
.welcome{position:fixed;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;padding:24px}
.welcome[hidden]{display:none}
.welcome-mask{position:absolute;inset:0;background:rgba(59,36,21,.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.welcome-card{
  position:relative;width:min(360px,100%);text-align:center;
  background:linear-gradient(160deg,#FFF7E6,#FDEFD2);
  border:1px solid var(--line);border-radius:28px;
  padding:36px 26px 26px;box-shadow:0 26px 60px rgba(120,53,15,.32);
  animation:welcomeIn .26s ease-out;
}
@keyframes welcomeIn{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
.welcome-t{font-family:var(--font-t);font-size:30px;color:var(--brand);margin:0 0 12px;letter-spacing:.04em}
.welcome-s{font-size:17px;color:var(--muted);margin:0 0 24px;line-height:1.6}
.welcome-ok{
  font:inherit;font-size:15px;font-weight:800;color:#fff;cursor:pointer;
  background:linear-gradient(135deg,#B45309,#92400E);
  border:0;border-radius:14px;padding:10px 30px;
  box-shadow:0 10px 22px rgba(146,64,14,.28);
}
.welcome-ok:active{transform:translateY(1px)}
.fld{display:block;margin-bottom:12px}
.fld>span{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:800;color:var(--fg);margin-bottom:6px}
.fld>span i{font-style:normal;color:var(--caramel)}
.fld>span em{font-style:normal;font-size:11px;font-weight:700;color:var(--muted)}
.fld input{
  display:block;width:100%;box-sizing:border-box;background:#FFFBF0;border:1.5px solid var(--line);
  border-radius:16px;padding:11px 14px;font-size:16px;color:var(--fg);outline:none;transition:.2s;
}
.fld input:focus{border-color:var(--caramel);background:#fff;box-shadow:0 0 0 4px rgba(180,83,9,.1)}
.fld input::placeholder{color:#C9A883}
/* 下拉菜单用到隐藏输入框承载选中值，必须强制隐藏（作者样式 .fld input 会盖掉 UA 的 display:none） */
.fld input[type=hidden]{display:none}
.modal-foot{display:flex;gap:10px;margin-top:6px}
.btn-plain{
  flex:0 0 96px;font-size:14.5px;font-weight:800;color:var(--muted);background:#FFFDF5;
  border:1.5px solid var(--line);border-radius:16px;transition:.2s;
}
.btn-plain:hover{background:#FFF3D6;color:var(--caramel)}
.modal-foot .btn-primary{flex:1}
/* 快捷入口弹窗：把收藏 / 历史 / 地区 / 类型的区块搬进来展示 */
/* 快捷弹窗（收藏/历史/节目/新增/日志/名单）：外层不滚，只有列表区独立滚动。
   根因是 .modal-card 自带 overflow-y:auto，与 .quick-body 的滚动叠加成嵌套滚动，
   内层滚到尽头会把滚动接力给外层，表现为两层同步滚动。
   做法同 .dict-modal-card：外层 overflow:hidden + flex 纵向，滚动只发生在 .quick-body。 */
.modal-card.quick-modal-card{
  overflow:hidden;display:flex;flex-direction:column;
}
.modal-card.quick-modal-card .modal-head{flex:0 0 auto}
.quick-body{flex:1 1 auto;min-height:0;max-height:min(58vh,440px);overflow-y:auto;padding:2px}
.quick-body .mini-list{margin-top:0}
/* 台标：预览 + 预设选择 + 上传 */
.logo-row{display:flex;align-items:center;gap:10px}
.logo-prev{
  width:56px;height:56px;flex:0 0 auto;border-radius:16px;background:#FFF7E6;
  border:1.5px solid var(--line);display:grid;place-items:center;overflow:hidden;
}
.logo-prev svg{width:58%;height:58%;color:var(--brand)}
.logo-prev img{width:100%;height:100%;object-fit:contain;display:block}
.logo-prev.is-auto{background:linear-gradient(150deg,#D9B47A,#B45309);border-color:#EFC98A}
.logo-prev.is-auto svg{width:52%;height:52%;color:#FFF7E6}
.logo-up{
  flex:0 0 auto;font-size:11.5px;font-weight:800;color:var(--caramel);background:#FFF3D6;
  border-radius:11px;padding:9px 10px;white-space:nowrap;transition:.2s;
}
.logo-up:hover{background:var(--caramel);color:#FFF7E6}
/* 台标图片网址 */
.logo-url{display:flex;gap:8px;margin-top:9px}
.logo-url input{
  flex:1;min-width:0;box-sizing:border-box;background:#FFFBF0;border:1.5px solid var(--line);
  border-radius:12px;padding:9px 12px;font-size:16px;color:var(--fg);outline:none;transition:.2s;
}
.logo-url input:focus{border-color:var(--caramel);background:#fff;box-shadow:0 0 0 4px rgba(180,83,9,.1)}
.logo-url input::placeholder{color:#C9A883;font-size:13px}
.logo-url .logo-up{padding:9px 12px}
/* 地区 / 风格：下拉菜单选择（地区单选，风格多选带勾选） */
.dd{position:relative;margin-top:8px}
.dd-trigger{
  display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;
  box-sizing:border-box;background:#FFFBF0;border:1.5px solid var(--line);
  border-radius:16px;padding:11px 14px;font-size:16px;color:var(--fg);cursor:pointer;
  font-family:inherit;transition:.2s;text-align:left;
}
.dd-trigger:hover{border-color:#EFC98A}
.dd.is-open .dd-trigger{border-color:var(--caramel);background:#fff;box-shadow:0 0 0 4px rgba(180,83,9,.1)}
.dd-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-label.is-ph{color:#C9A883}
.dd-caret{
  flex:0 0 auto;width:9px;height:9px;margin-left:4px;border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);transform:rotate(45deg) translate(-2px,-2px);transition:.2s;
}
.dd.is-open .dd-caret{transform:rotate(-135deg) translate(-2px,-2px)}
.dd-panel{
  position:absolute;z-index:5;top:calc(100% + 6px);left:0;right:0;
  background:#FFFDF5;border:1.5px solid var(--line);border-radius:16px;
  box-shadow:0 12px 30px rgba(120,53,15,.16);padding:6px;max-height:240px;overflow-y:auto;
}
.dd-panel[hidden]{display:none}
/* 距视口底部不足时向上展开，避免被弹窗 overflow 裁切 */
.dd.is-open.dd-up .dd-panel{top:auto;bottom:calc(100% + 6px)}
.dd-item{
  display:flex;align-items:center;gap:8px;width:100%;box-sizing:border-box;
  font-family:inherit;font-size:15px;font-weight:700;color:var(--fg);text-align:left;
  background:none;border:0;border-radius:11px;padding:9px 10px;cursor:pointer;transition:.15s;
}
.dd-item:hover{background:#FFF3D6}
.dd-item.is-on{background:var(--caramel);color:#FFF7E6}
.dd-multi .dd-item .dd-check{
  flex:0 0 auto;width:16px;height:16px;border:1.5px solid var(--line);border-radius:5px;
  display:grid;place-items:center;transition:.15s;
}
.dd-multi .dd-item.is-on .dd-check{background:#FFF7E6;border-color:#FFF7E6}
.dd-multi .dd-item.is-on .dd-check::after{
  content:"";width:8px;height:4px;border-left:2px solid var(--caramel);border-bottom:2px solid var(--caramel);
  transform:rotate(-45deg) translate(0,-1px);
}
/* 地区 / 风格：可手输的组合框（输入框 + 下拉按钮同一行；既能手输也能点选预设） */
.combo-line{display:flex;gap:6px;align-items:stretch}
.fld .combo-input{flex:1 1 auto;min-width:0;width:auto}
.dd .combo-caret{
  flex:0 0 auto;width:46px;justify-content:center;padding:0;
  background:#FFFBF0;border:1.5px solid var(--line);border-radius:16px;cursor:pointer;transition:.2s;
}
.dd .combo-caret:hover{border-color:#EFC98A}
.dd.is-open .combo-caret{border-color:var(--caramel);background:#fff;box-shadow:0 0 0 4px rgba(180,83,9,.1)}

/* ==========================================================
   自适应断点
   手机 <640 / 大屏手机·小平板 640-1023 / 平板·笔电 1024+ / 大屏 1440+
   ========================================================== */

/* ≥560：四宫格入口放宽、列表卡片改双列 */
@media (min-width:560px){
  :root{--gutter:20px}
  .page-body{padding-left:22px;padding-right:22px}
  .topbar{padding-left:22px;padding-right:22px}
  .rlist{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* 图鉴已改为网格布局，此处不再需要覆盖 flex 基准 */
}

/* ≥768：顶部工具齐全、右侧竖排 tabbar、侧栏列表竖排 */
@media (min-width:768px){
  .clock{display:inline-flex}
  /* PC 端：tabbar 移到页面右侧、竖向排列。
     覆盖基础样式的 fixed 底部横排：left/bottom 归零，改用 right + top 居中。 */
  .tabbar{
    left:auto;right:18px;bottom:auto;top:57%;          /* 略微下移，视觉重心更稳 */
    transform:translateY(-50%);
    width:auto;flex-direction:column;align-items:stretch;
    gap:10px;                                 /* 加大间距，配合增长度拉长整体 */
    border:1px solid var(--line);border-radius:999px;   /* 两端圆头胶囊 */
    padding:16px 6px;
    box-shadow:0 14px 34px rgba(120,53,15,.18);
    background:rgba(255,252,243,.72);         /* 降透明度，与移动端一致 */
    -webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);
  }
  /* 竖排时 tab 不再等分宽度，改为按内容高度堆叠；收窄至 56px 让胶囊更纤细，上下加高拉长整体 */
  .tab{border-radius:999px;flex:0 0 auto;min-width:56px;padding:11px 2px;gap:3px}
  .tab.is-on{background:#FDEBC4}
  /* PC 竖栏用黄底胶囊标示激活态，圆点（含其占位）整体收掉，避免未激活项空出高度 */
  .tab-t::after{display:none}
  /* 右侧竖栏会压住内容，改为给右侧留出空间（原先是给底部留白） */
  .page-body{padding-bottom:26px;padding-right:calc(88px + var(--safe-r))}
  .garden-grid,.mine-grid{grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);align-items:start}
  /* 侧栏窄，电台卡按可用宽度自动换行（宽屏约 4 个/行） */
  .rlist{grid-template-columns:repeat(4,minmax(0,1fr))}
  .col-side .hlist{display:grid;grid-template-columns:1fr;overflow:visible;margin:0;padding:0;gap:12px}
}

/* ≥1024：搜索页左右分栏、桌面栅格收紧 */
@media (min-width:1024px){
  .switch{display:flex}
  /* 右侧竖排 tabbar 仍需留出空间，padding-right 用 calc 叠加 gutter */
  .page-body{padding-left:28px;padding-right:calc(88px + 28px)}
  .topbar{padding-left:28px;padding-right:28px}
  .rlist{grid-template-columns:repeat(5,minmax(0,1fr))}   /* 整宽：每行 5 个 */
  .garden-grid{grid-template-columns:minmax(0,1.35fr) minmax(320px,1fr)}
  .mine-grid{grid-template-columns:minmax(0,1.15fr) minmax(340px,1fr)}
  .quick{max-width:none;grid-template-columns:repeat(5,minmax(0,1fr))}
}

/* ≥1440：更宽的内容区与更松的留白 */
@media (min-width:1440px){
  :root{--maxw:1280px;--gutter:26px}
  .rlist{grid-template-columns:repeat(5,minmax(0,1fr))}
}

/* 横屏矮屏：控制播放器高度，避免首屏被撑爆 */
@media (max-height:560px) and (orientation:landscape){
  .tree-stage{min-height:150px}
}

/* 触屏设备去掉 hover 位移，避免点击残留态 */
@media (hover:none){
  .rcard:hover,.mi:hover,.task:hover,.qitem:hover .qico,.cam-card:hover .cam-play{transform:none}
}

/* 6.7–6.9 寸大屏手机（视口 428–440px）：控制行原本会被挤成两行。
   原因：封面 .vwrap 用 clamp(102px,26vw,146px) 随视口变宽，挤掉了右侧 .pinfo 的宽度，
   而 5 个 46px 按钮 + 4×10px 间距 = 270px，超出可用宽度 → flex-wrap 换行。
   这里把按钮收到 40px、间距收到 8px（合计 232px），并禁止换行，保证恒定单行。
   按钮尺寸一律用 id 选择器写：.heart-btn 的 46px 基础规则在文件更靠后，
   同为类选择器会按源顺序反超 media 里的覆盖，导致缩小失效。 */
@media (max-width:480px){
  .prow{gap:8px;flex-wrap:nowrap;justify-content:flex-start}
  #homePrev,#homePlay,#homeNext,#homeMoon{width:40px;height:40px}
  #homeFav{width:40px;height:40px;background-size:18px}
  .prow .pbtn svg{width:16px;height:16px}
}
/* 极窄屏：方形封面再收一点，保证右侧信息栏可用宽度 */
@media (max-width:420px){
  .vwrap{width:86px}
  .pinfo{padding:10px 12px;gap:8px}
  .prow{gap:7px;flex-wrap:nowrap;justify-content:flex-start}
  .prow .pbtn svg{width:15px;height:15px}
  #homePlay,#homeMute,#homePrev,#homeNext,#homeFav,#homeMoon{width:35px;height:35px}
  /* 同上一断点：用 id 选择器，避免被靠后的 .heart-btn{width:46px} 反超 */
  #homeFav{width:35px;height:35px;background-size:15px}
}
/* 打印与降级：不支持 backdrop-filter 时改用实色 */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .topbar,.tabbar{background:#FFFCF3}
}

/* 降低动态效果偏好：关闭循环动画 */
@media (prefers-reduced-motion:reduce){
  .spin-bloom,.tree-cat,.poster.is-audio .disc{animation:none}
  .brand-mini .bm-disc{animation:none}
  .brand-mini.is-playing::after{animation:none;opacity:0}
  .modal-card{animation:none}
  .rlist .rcard:hover{transform:none}
}

@media print{.tabbar,.topbar{display:none}}

/* ============ 养成系统：收藏 / 我的列表 ============ */
.rcard{position:relative}
/* 电台卡右上角收藏心形（用 data-furl，避免触发全局播放） */
.rfav{position:absolute;top:8px;right:8px;width:34px;height:34px;border-radius:50%;border:none;background:rgba(255,247,230,.92) url('icon-fav-outline.webp') center/22px no-repeat;cursor:pointer;box-shadow:0 2px 8px rgba(120,53,15,.18);transition:.18s;z-index:4}
.rfav:hover{transform:scale(1.08)}
.rfav.is-on{background-image:url('icon-fav-filled.webp');background-color:#FDE68A}
/* 播放器收藏按钮：已挪到控制行，静音键旁边，与其余圆钮同尺寸 */
.heart-btn{box-sizing:border-box;margin-top:12px;width:46px;height:46px;border-radius:50%;border:1.5px solid var(--line);background:#FFF7E6 url('icon-fav-outline.webp') center/20px no-repeat;cursor:pointer;transition:.18s;flex:0 0 auto}
.heart-btn:hover{transform:scale(1.06)}
.heart-btn.is-on{background-image:url('icon-fav-filled.webp');background-color:#FDE68A;border-color:#FDE68A}
/* 我的页：收藏夹 / 收听历史 列表 */
.mini-list{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.mini-list .empty{color:var(--muted);font-size:13px;padding:8px 4px}
.mini-row{display:flex;align-items:center;gap:12px;padding:8px;border-radius:16px;background:#FFFBF0;cursor:pointer;transition:.18s}
.mini-row:hover{background:#FFF3DA}
/* 正在播放：暖橙描边 + 浅底，弹窗点选后不关闭，靠它区分当前台 */
.mini-row.is-cur{background:#FFF3DA;box-shadow:inset 0 0 0 2px #E8A33D}
.mini-row.is-cur .mini-txt b{color:#92400E}
.mini-row.is-cur::after{content:"▶";font-size:11px;color:#B45309;flex:0 0 auto;align-self:center}
.mini-thumb{width:42px;height:42px;border-radius:12px;overflow:hidden;flex:0 0 auto;background:#fff;display:grid;place-items:center}
.mini-thumb img{width:100%;height:100%;object-fit:contain}
.mini-thumb .mini-ico{color:#FFF7E6;font-size:18px}
.mini-txt{flex:1;min-width:0}
.mini-txt b{display:block;font-size:14px;color:var(--brand);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-txt i{font-style:normal;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.mini-time{font-size:11.5px;color:var(--muted);flex:0 0 auto}
.mini-del{position:static;top:auto;right:auto;box-shadow:none;background:transparent;width:32px;height:32px;border-radius:50%;border:none;color:#B45309;display:grid;place-items:center;cursor:pointer;flex:0 0 auto}
.mini-del:hover{background:#FDE68A}
.mini-del svg{width:17px;height:17px}
.mini-del.is-on{background:transparent;color:#92400E}
.mini-del.is-on svg{fill:#92400E}
/* 节目表弹窗（「节目」入口）
   参考：顶部 tab 分段切换 + 圆角卡片列表 + 底部进度条 */
.prog-list{gap:0;display:flex;flex-direction:column}
.prog-list .empty{margin-top:10px}

/* 分段 tab：类似积分明细的「有效期内 / 已过期」切换条 */
.prog-tabs{
  display:flex;gap:6px;padding:5px 4px;width:-webkit-fit-content;width:fit-content;margin:0 auto 8px;
  background:#F7F0E3;border-radius:999px
}
.prog-tab{
  flex:1;border:none;background:transparent;
  font-size:13px;font-weight:700;color:var(--muted);
  /* min-width = 4 个汉字(4em) + 左右内距(14px×2)。节目弹窗标签是 3 字、日志弹窗是 4 字，
     轨道又是 fit-content，两个 tabbar 本来一长一短；给它一个 4 字的下限，两处即等长。
     （box-sizing 是 border-box，min-width 已含 padding，不要再另加内距） */
  min-width:calc(4em + 28px);
  padding:2px 14px;border-radius:999px;cursor:pointer;transition:.18s;display:flex;align-items:center;justify-content:center
}
.prog-tab:hover{color:var(--caramel)}
.prog-tab.is-on{
  background:#FFFDF6;color:var(--brand);
  box-shadow:0 2px 6px rgba(120,53,15,.12)
}

/* 节目弹窗与日志弹窗共用 .prog-tabs/.prog-tab，两处尺寸保持一致。
   （曾给 #programList 单独放大过两轮，用户最终选择回退——如需再调，请改 .prog-tab 本体，
     不要单独给某一个弹窗加作用域覆盖，否则两处会不一致。） */

/* 面板切换 */
.prog-panels{position:relative}
.prog-panel{display:none;flex-direction:column;gap:8px;animation:fadeUp .22s ease-out}
.prog-panel.is-on{display:flex}

/* 听友投稿（仅「听友来信」tab 显示，由 #logWrap[data-active="letter"] 控制） */
.letter-compose{display:none;margin:0 0 12px}
#logWrap[data-active="letter"] .letter-compose{display:block}
.lc-toggle{
  width:100%;padding:11px 16px;border-radius:14px;
  background:var(--card-warm);color:var(--brand);font-weight:800;font-size:14px;
  border:1.5px dashed var(--caramel);transition:.18s
}
.lc-toggle:hover{background:#FFEFC7}
.lc-form{
  display:flex;flex-direction:column;gap:10px;
  padding:14px;border-radius:16px;background:var(--card-warm);border:1px solid var(--line)
}
.lc-field{display:flex;flex-direction:column;gap:5px;font-size:12.5px;font-weight:700;color:var(--caramel)}
.lc-field input,.lc-field textarea{
  font-family:inherit;font-size:14px;color:var(--fg);
  padding:9px 11px;border-radius:11px;border:1px solid var(--line);background:var(--card);
  outline:none;transition:.16s;resize:vertical
}
.lc-field input:focus,.lc-field textarea:focus{border-color:var(--caramel);box-shadow:0 0 0 3px #FDE9C8}
.lc-actions{display:flex;gap:8px;margin-top:2px}
.lc-send{
  flex:1;padding:10px 16px;border-radius:13px;background:var(--brand);color:#fff;
  font-weight:800;font-size:14px;transition:.16s
}
.lc-send:hover{background:#7C360B}
.lc-send:disabled{opacity:.6;cursor:default}
.lc-cancel{
  padding:10px 16px;border-radius:13px;background:var(--card);color:var(--muted);
  font-weight:700;font-size:14px;border:1px solid var(--line);transition:.16s
}
.lc-cancel:hover{background:#FFF6DF}
/* 投稿按钮：图标 + 文字横排（取消=向左转图标在左，寄出=向右转图标在右） */
.lc-send,.lc-cancel{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.lc-send svg,.lc-cancel svg{width:15px;height:15px;flex:0 0 auto}
.lc-note{margin:2px 0 0;font-size:11.5px;line-height:1.6;color:var(--muted)}
.lc-done{
  margin:0;padding:13px 14px;border-radius:14px;background:#EAF6E6;
  border:1px solid #BFE3B0;color:#3E7D32;font-size:13.5px;line-height:1.6;font-weight:700
}

/* 空状态 */
.prog-empty{
  color:var(--muted);font-size:13px;text-align:center;
  padding:24px 10px;line-height:1.6
}

/* 分段标题：「放送中 / 接下来 / 今日已播出」 */
.prog-sep{
  display:flex;align-items:center;gap:10px;
  font-size:11px;font-weight:800;color:var(--caramel);letter-spacing:.08em;
  margin:6px 0 2px;
  text-align:center;
}
.prog-sep:first-child{margin-top:0}
.prog-sep::before,.prog-sep::after{content:'';flex:1;height:1px;background:var(--line)}

/* 节目列表项沿用通用 .mini-row 基础样式（圆角卡片 + 台标 + 节目名 + 电台名 + 时间区间），
   不再使用独立 .prog-card / 进度条；状态仅通过 .prog-row.is-now / .is-past / .is-off 标记 */
.prog-row.is-now .mini-time{color:var(--caramel);font-weight:800}
.prog-row.is-past{opacity:.5}
.prog-row.is-off{background:#FFFDF5;cursor:default;opacity:.72}
.prog-row.is-off:hover{background:#FFFDF5}
/* 公告弹窗（「公告」入口） */
.an-row{display:block;padding:12px 14px;border-radius:16px;background:#FFFBF0;border:1px solid var(--line);transition:.18s}
.an-row + .an-row{margin-top:8px}
.an-row:hover{background:#FFF3DA}
.an-row h5{margin:0 0 5px;font-size:14px;font-weight:800;color:var(--brand);line-height:1.4}
.an-row p{margin:0;font-size:13px;color:var(--muted);line-height:1.65;white-space:pre-line}
.an-row time{display:block;margin-top:8px;font-size:11.5px;color:#B45309;font-weight:700}
/* 日志抽屉：收起显示「标题 + 正文前两行 + 日期」，点标题展开全文。
   日志弹窗三个 tab（听友来信 / 更新日志 / 感谢名单）共用这一套样式与交互。 */
.an-row.is-drawer{padding:0}
.an-row.is-drawer .an-head{
  width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  padding:12px 14px;background:none;border:0;font:inherit;color:inherit;
  text-align:left;cursor:pointer;
}
.an-row.is-drawer .an-head-main{flex:1;min-width:0}
.an-row.is-drawer .an-head h5{margin:0}
/* 前两行预览：两行截断（保留换行），展开后隐藏 */
.an-row.is-drawer .an-preview{
  margin:4px 0 0;font-size:13px;color:var(--muted);line-height:1.65;white-space:pre-line;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.an-row.is-drawer .an-chev{
  flex:0 0 auto;width:18px;height:18px;display:grid;place-items:center;
  color:var(--caramel);transition:transform .2s;
}
.an-row.is-drawer .an-chev svg{width:18px;height:18px}
.an-row.is-drawer .an-body{display:none;padding:0 14px 12px}
.an-row.is-drawer.is-open .an-body{display:block}
.an-row.is-drawer.is-open .an-preview{display:none}
.an-row.is-drawer.is-open .an-chev{transform:rotate(180deg)}
/* 日期在收起/展开时都显示，置于抽屉内容之外 */
.an-row.is-drawer>time{margin-top:0;padding:0 14px 12px}
/* 浇水 / 施肥 今日已完成态 */
.btn-primary.sm.is-done,.btn-ghost.sm.is-done{opacity:.55;cursor:default}

/* ============ MIAO~灵签 tab（作用域隔离，避免与首页 .btn/.result/.history/.chip 等冲突） ============ */
.lingqian{
  --cream:#FFF6EC; --cream-2:#FFEEDA; --card:#FFFFFF; --brown:#7A5C48; --brown-soft:#AC9078; --slot-1:#FFF3E6; --slot-2:#FFE6D2; --shadow:0 8px 0 rgba(0,0,0,.04),0 14px 30px rgba(165,125,95,.16);
  position:relative;
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:24px 16px 96px;
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  color:var(--brown);
  background:
    radial-gradient(circle at 12% 18%, #FFE3EC 0 20%, transparent 20.5%),
    radial-gradient(circle at 88% 12%, #E4F5EC 0 15%, transparent 15.5%),
    radial-gradient(circle at 82% 88%, #FFF0D2 0 18%, transparent 18.5%),
    radial-gradient(circle at 16% 86%, #E9ECFF 0 13%, transparent 13.5%),
    linear-gradient(160deg, var(--cream) 0%, var(--cream-2) 100%);
  background-attachment:fixed;
  overflow-y:auto;
}
.lingqian *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
.lingqian .wrap{width:100%; max-width:420px; text-align:center;}
.lingqian .title{font-size:25px; font-weight:800; letter-spacing:2px; margin:0 0 6px; display:flex; align-items:center; justify-content:center; gap:8px;}
.lingqian .title .dot{font-size:19px; animation:lq-bob 2.4s ease-in-out infinite;}
.lingqian .title .dot:last-child{animation-delay:.4s;}
.lingqian .subtitle{font-size:13px; color:var(--brown-soft); margin:0 0 22px; letter-spacing:1px;}
@keyframes lq-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.lingqian .stage{position:relative; background:var(--card); border-radius:34px; padding:28px 22px 30px; box-shadow:var(--shadow); border:3px solid #fff; outline:2px dashed #F2DDC8; outline-offset:5px;}
.lingqian .mascot{font-size:38px; line-height:1; margin-bottom:12px; display:inline-block; animation:lq-bob 3s ease-in-out infinite;}
.lingqian .slot{position:relative; height:150px; border-radius:26px; background:linear-gradient(180deg,var(--slot-1),var(--slot-2)); overflow:hidden; box-shadow:inset 0 4px 14px rgba(180,140,110,.18);}
.lingqian .slot::before,.lingqian .slot::after{content:""; position:absolute; left:0; right:0; height:30px; z-index:3; pointer-events:none;}
.lingqian .slot::before{top:0; background:linear-gradient(180deg,var(--slot-1),transparent);}
.lingqian .slot::after{bottom:0; background:linear-gradient(0deg,var(--slot-2),transparent);}
.lingqian .slot .marker{position:absolute; left:14px; right:14px; top:50%; height:76px; transform:translateY(-50%); border:2.5px dashed rgba(255,255,255,.85); border-radius:20px; z-index:2; pointer-events:none;}
.lingqian .reel{position:absolute; top:0; left:0; right:0; display:flex; flex-direction:column; align-items:center; gap:16px; opacity:0; transition:opacity .35s; will-change:transform;}
.lingqian .slot.rolling .reel{opacity:1;}
.lingqian .reel-item{height:70px; flex:0 0 70px; display:flex; align-items:center; justify-content:center; font-size:44px; font-weight:900; line-height:1; color:#C9A98C; transition:color .25s,transform .25s,text-shadow .25s;}
.lingqian .reel-item.active{color:var(--brown); transform:scale(1.18); text-shadow:0 3px 0 rgba(255,255,255,.9);}
.lingqian .idle-text{position:absolute; inset:0; z-index:4; display:flex; align-items:center; justify-content:center; font-size:44px; font-weight:900; color:#E3C9AF; letter-spacing:8px; transition:opacity .3s;}
.lingqian .slot.rolling .idle-text{opacity:0;}
.lingqian .hint{font-size:12px; color:var(--brown-soft); margin:12px 0 18px; letter-spacing:1px; min-height:17px;}
.lingqian .btn{appearance:none; border:none; cursor:pointer; font-family:inherit; font-size:18px; font-weight:800; letter-spacing:3px; color:#fff; padding:15px 44px; border-radius:999px; background:linear-gradient(180deg,#FF9BAB 0%,#FF7E96 100%); box-shadow:0 6px 0 #E9647F,0 12px 22px rgba(233,100,127,.34); transition:transform .08s,box-shadow .08s,filter .2s;}
.lingqian .btn:hover{filter:brightness(1.05);}
.lingqian .btn:active{transform:translateY(5px); box-shadow:0 1px 0 #E9647F,0 6px 12px rgba(233,100,127,.3);}
.lingqian .btn:disabled{cursor:not-allowed; filter:grayscale(.3) brightness(1.06); transform:translateY(3px); box-shadow:0 3px 0 #DCA9A9,0 6px 12px rgba(200,150,150,.25);}
.lingqian .result{margin-top:18px; background:#FFF9F3; border-radius:22px; padding:13px 16px; box-shadow:0 6px 16px rgba(160,120,90,.12); opacity:0; transform:translateY(10px) scale(.96); transition:opacity .35s,transform .4s cubic-bezier(.34,1.56,.64,1);}
.lingqian .result.show{opacity:1; transform:translateY(0) scale(1);}
.lingqian .result .word{font-size:20px; font-weight:900; letter-spacing:2px;}
.lingqian .result .desc{font-size:12.5px; color:var(--brown-soft); margin-top:6px; line-height:1.6; white-space:pre-line;}
.lingqian .history{margin-top:22px; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:7px; min-height:30px;}
.lingqian .history .label{font-size:12px; color:var(--brown-soft);}
.lingqian .chip{background:#fff; border-radius:999px; padding:5px 13px; font-size:13px; font-weight:700; box-shadow:0 3px 8px rgba(160,120,90,.13);}
.lingqian .chip.good{color:#4CAF7D;} .lingqian .chip.good::before{content:"🌸"; margin-right:3px;}
.lingqian .chip.bad{color:#F2789F;} .lingqian .chip.bad::before{content:"☁️"; margin-right:3px;}
.lingqian .chip.same{color:#C99A4E;} .lingqian .chip.same::before{content:"🍮"; margin-right:3px;}
.lingqian .chip.fresh{animation:lq-pop .45s cubic-bezier(.34,1.56,.64,1);}
@keyframes lq-pop{0%{transform:scale(.35); opacity:0}100%{transform:scale(1); opacity:1}}
.lingqian .confetti{position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:60;}
.lingqian .p{position:absolute; top:-30px; animation:lq-fall linear forwards;}
@keyframes lq-fall{0%{transform:translateY(-30px) rotate(0); opacity:0}10%{opacity:1}100%{transform:translateY(106vh) rotate(700deg); opacity:0}}
.lingqian footer{margin-top:18px; font-size:11px; color:#C9B098; letter-spacing:1px;}
.lingqian footer .dev{display:block; margin-top:7px; font-size:11px; color:#D3BCA6; letter-spacing:1px;}

/* ==========================================================
   电台管理（页内编辑模式）：点「管理」后直接在电台湾格上拖动卡片排序
   编辑态由 #resultList 上的 .is-editing 驱动，卡片复用现有 .rcard
   ========================================================== */
/* 管理入口：与「放送台/按地区/按风格」筛选钮区分；激活时高亮 */
.sec-title-btn.sort-open-btn{color:var(--caramel);font-weight:800}
.sec-title-btn.sort-open-btn.is-on{background:#FFF3D6;border-color:var(--caramel)}
/* 编辑操作栏：管理模式下显示在电台网格上方 */
.edit-bar{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin:0 0 12px;padding:10px 12px;
  background:var(--card-warm);border:1px solid var(--line);border-radius:var(--r-s);
}
.edit-tip{flex:1 1 auto;min-width:0;font-size:12.5px;color:var(--muted);line-height:1.5}
.ebtn{
  flex:0 0 auto;padding:8px 14px;font-size:13px;font-family:inherit;cursor:pointer;
  border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--fg);
}
.ebtn.ghost{background:var(--card);color:var(--brand)}
.ebtn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.ebtn.primary:hover{background:#7C360B}
/* 长按电台卡 → 进入管理模式：按住时的按压反馈（轻微缩小 + 描边），松手即入管理态 */
.rlist .rcard.is-pressing{
  transform:scale(.94);outline:2px solid var(--caramel);outline-offset:2px;opacity:.9;
  -webkit-user-select:none;user-select:none;
}
/* 编辑态卡片：可抓取光标 + 悬停虚线描边 + 拖拽/落点反馈 */
.rlist.is-editing .rcard[data-url]{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}
.rlist.is-editing .rcard[data-url]:hover{outline:2px dashed var(--caramel);outline-offset:2px}
.rlist.is-editing .rcard.is-dragging{opacity:.45;cursor:grabbing}
.rlist.is-editing .rcard.is-over{outline:2px solid var(--caramel);outline-offset:2px}
.rlist.is-editing .rcard.is-over::after{
  content:"";position:absolute;inset:0;background:rgba(180,83,9,.14);pointer-events:none;
}
/* 多选：卡片右上角复选钮 + 选中态。
   .is-sel 必须写在上面的 :hover 规则之后（同权重，靠后覆盖，否则选中会被虚线描边盖掉）。 */
.edit-count{flex:0 0 auto;font-size:12.5px;font-weight:800;color:var(--brand);white-space:nowrap}
.edit-count b{font-size:14.5px;color:var(--caramel);margin:0 1px}
.rlist.is-editing .rcard[data-url] .rsel{
  position:absolute;top:8px;right:8px;z-index:4;width:24px;height:24px;border-radius:50%;padding:0;
  display:grid;place-items:center;cursor:pointer;
  background:rgba(43,26,14,.5);border:1.5px solid rgba(255,247,230,.66);transition:background .16s,border-color .16s;
}
.rlist.is-editing .rcard[data-url] .rsel svg{width:12px;height:12px;color:#FFF7E6;opacity:0;transition:opacity .16s}
.rlist.is-editing .rcard[data-url] .rsel.is-on{background:var(--caramel);border-color:var(--caramel)}
.rlist.is-editing .rcard[data-url] .rsel.is-on svg{opacity:1}
.rlist.is-editing .rcard[data-url].is-sel{outline:2px solid var(--caramel);outline-offset:2px;background:#FFF7E6}
@media (max-width:420px){
  .edit-tip{flex:1 1 100%;order:2}
  .ebtn{padding:7px 12px;font-size:12.5px}
}