/* 记忆库（/library）的样子和手感（2026.10.8 起）。public.html 太大，新样式都放这里，后加载，同名规则以这里为准
   一、顶部合成一整块玻璃（下面）  二、手机上编辑整屏、长记忆折叠按钮跟着走（再下面）
   以下是第二部分的原注释：手机上的两处手感（Kiko：苹果上内容一拉长就不好操作）
   ① 编辑 / 添加记忆：手机上整屏铺开，内容框自己撑满剩下的地方，不用再拖那个小把手拉长；保存按钮钉在底下，不用滑到最后找
   ② 长记忆展开以后，「折叠」按钮跟着屏幕底部走，看到一半想收随时能收 */

/* ═══ 一、顶部：合成一整块玻璃（2026.10.8 Kiko：原来四五条横条各自一层毛玻璃、透明度不一样，
   切 daily/diary/plot 还会多冒一条，一层套一层不好看）。现在只有外面一层玻璃，里面每排都透明、不画分隔线；
   搜索收成分类那排末尾的放大镜，排序和剧场目录挪到下面「共 N 条」那行，切哪个分类顶部都一样高 ═══ */
#stickyTop{
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(18px) saturate(1.15);-webkit-backdrop-filter:blur(18px) saturate(1.15);
  border-bottom:1px solid rgba(255,255,255,.75);
  box-shadow:0 6px 20px rgba(120,105,210,.08);
}
#stickyTop .hd,#stickyTop .tbs,#stickyTop .sb{background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:0;box-shadow:none}
#stickyTop .hd{padding-bottom:8px}
#stickyTop .tbs{padding:2px 16px 12px;gap:6px;overflow:visible}
#stickyTop .sb-toggle{display:none}
#stickyTop .sb.open .sb-body{padding-top:2px;padding-bottom:12px;animation:fadeIn .15s ease}

/* 按钮和分类小胶囊：同一个高度、同一种描边、同一个选中色 */
.hdb .btn,.brf,.tb{
  height:30px;display:inline-flex;align-items:center;justify-content:center;gap:5px;
  padding:0 12px;border-radius:15px;font-size:12.5px;font-weight:500;
  border:1px solid rgba(var(--accent-rgb),.18);background:rgba(255,255,255,.62);color:var(--ink-2);
  backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;transition:background .15s,color .15s,border-color .15s;
}
.brf{width:30px;padding:0;font-size:14px}
.hdb .btn.bp,.tb.ta,.tb-search.on{background:var(--accent-grad)!important;color:#fff!important;border-color:transparent!important}
.hdb .btn.ba{color:var(--accent);border-color:rgba(var(--accent-rgb),.32)}
.tb.ta .cdot{background:rgba(255,255,255,.85)!important}
.tbs .tb{flex:1 0 auto;padding:0 8px;white-space:nowrap}
.tb-search{flex:0 0 34px!important;padding:0!important}
.tb-search svg{width:15px;height:15px}

/* 「共 N 条」那行：左边数，中间排序 / 剧场目录，右边全选 */
.sts{gap:8px}
.sts-mid{flex:1;display:flex;justify-content:flex-end}
.seg{display:inline-flex;padding:2px;border-radius:13px;background:rgba(255,255,255,.55);border:1px solid rgba(var(--accent-rgb),.15)}
.seg span{font-size:11.5px;padding:3px 11px;border-radius:11px;cursor:pointer;color:var(--ink-3);user-select:none}
.seg span.on{background:var(--accent);color:#fff}
.sts-link{font-size:12px;color:var(--accent);text-decoration:none;font-weight:500}

@media (max-width:600px){
  #stickyTop .tbs{padding:2px 12px 10px;gap:4px}
  .hdb .btn{padding:0 11px}
  .tbs .tb{padding:0 7px;font-size:12px;gap:4px}
  .tbs .cdot{width:6px;height:6px}
  .tb-search{flex:0 0 30px!important}
}

/* ═══ 二 ═══ */
@media (max-width:600px){
  #modalAdd{padding:0;align-items:stretch}
  #modalAdd .mdl{max-width:none;width:100%;height:100%;max-height:none;margin:0;border-radius:0;display:flex;flex-direction:column;
    padding:max(18px,calc(env(safe-area-inset-top) + 8px)) 16px 0}
  #modalAdd .mdl > *{flex-shrink:0}
  #modalAdd #addContent{flex:1 1 auto;min-height:38vh;height:auto;resize:none;line-height:1.65;-webkit-overflow-scrolling:touch}
  #modalAdd .ta-resize-handle{display:none}
  #modalAdd .tsel{flex:0 0 auto}   /* 它自带 flex:1，竖着排时会把空白全吃掉 */
  #modalAdd .mr{position:sticky;bottom:0;margin-top:12px;padding:10px 0 calc(10px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid #efeaf8}
  #modalAdd .mr .btn{flex:1;padding:10px 0;font-size:15px}
}
.card .cnt:not(.folded) + .cnt-toggle{position:sticky;bottom:calc(14px + env(safe-area-inset-bottom));z-index:5;
  padding:5px 13px;border-radius:14px;background:rgba(255,255,255,.94);border:1px solid rgba(var(--accent-rgb),.25);
  box-shadow:0 3px 12px rgba(120,105,210,.18)}

/* 卡片底下的标签：多的收起来，「+N」点开（public.html 里 renderList 那段） */
.tags .tag-x{display:none}
.tags.tags-open .tag-x{display:inline-block}
.tags .tag-more{background:none!important;border:1px dashed rgba(var(--accent-rgb),.3);color:var(--accent)!important;padding:1px 9px}