/* 时装电商的视觉语言(COS / Zara 那一路):近白背景、纯黑文字、没有第三种颜色,
   直角、无阴影、发丝线分隔,导航全大写宽字距。
   高级感来自"拿掉",不是"加上" —— 每一个边框和圆角都在和照片抢注意力。 */

:root {
  --paper: #fdfdfd;
  --paper-2: #f4f4f4;
  --ink: #000;
  --ink-2: #6b6b6b;
  --ink-3: #a0a0a0;
  --rule: #e4e4e4;
  --sans: "Helvetica Neue", Helvetica, Arial, system-ui, -apple-system, sans-serif;
  --pad: 2.6rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0c0c0c; --paper-2: #171717; --ink: #f2f2f2;
    --ink-2: #9a9a9a; --ink-3: #6a6a6a; --rule: #262626;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); -webkit-font-smoothing: antialiased; }

header {
  display: flex; align-items: baseline; gap: 2.4rem;
  padding: 1.6rem var(--pad) 1.2rem; border-bottom: 1px solid var(--rule);
}
h1 { margin: 0; font: 400 0.86rem/1 var(--sans); letter-spacing: 0.32em; text-transform: uppercase; }
.standing { margin-left: auto; font: 400 0.64rem/1 var(--sans); letter-spacing: 0.1em; color: var(--ink-3); }

main { padding: 1.6rem var(--pad) 4rem; }

/* 导航:纯文字,只有当前项有下划线 */
.row { display: flex; flex-wrap: wrap; gap: 0 26px; margin-bottom: 1rem; }
.row button, header nav button {
  background: none; border: none; cursor: pointer; padding: 6px 0;
  font: 400 0.68rem/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3);
}
.row button.on, header nav button.on { color: var(--ink); border-bottom: 1px solid var(--ink); }
.row.groups button { letter-spacing: 0.1em; }
header nav { display: flex; gap: 22px; }

.bar { display: flex; align-items: center; gap: 16px; margin: 1.4rem 0 1.6rem; }
.bar button {
  background: none; cursor: pointer; color: var(--ink-2);
  border: 1px solid var(--rule); padding: 7px 11px;
  font: 400 0.62rem/1 var(--sans); letter-spacing: 0.1em; text-transform: uppercase;
}
.bar button.on { border-color: var(--ink); color: var(--ink); }
.bar input {
  border: none; border-bottom: 1px solid var(--rule); background: none; color: inherit;
  padding: 8px 0; width: 220px; font: 400 0.72rem var(--sans); letter-spacing: 0.06em;
}
.bar input:focus { outline: none; border-bottom-color: var(--ink); }
.count { margin-left: auto; font: 400 0.62rem/1 var(--sans); letter-spacing: 0.1em; color: var(--ink-3); }

/* 商品网格:统一 3:4、窄间距、无卡片 */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.card { position: relative; cursor: pointer; }
.card img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block;
  background: var(--paper-2); transition: opacity .25s ease; }
.card:hover img { opacity: .82; }
.card b { display: block; margin-top: 9px; font: 400 0.66rem/1.5 var(--sans);
  letter-spacing: 0.12em; text-transform: uppercase; }
.card span { display: block; font: 400 0.62rem/1.5 var(--sans); letter-spacing: 0.06em; color: var(--ink-3); }
.card .empty { aspect-ratio: 3/4; border: 1px solid var(--rule); background: var(--paper-2); }

/* 「试过·不适合」:标记而不是删除 —— 你可能改主意,但它不该再占你的注意力 */
.no-btn { position: absolute; top: 6px; right: 6px; z-index: 2; cursor: pointer;
  border: 1px solid var(--rule); background: var(--paper); color: var(--ink-3);
  font: 400 0.56rem/1 var(--sans); letter-spacing: 0.1em; padding: 4px 6px;
  opacity: 0; transition: opacity .2s ease; }
.card:hover .no-btn { opacity: 1; }
.card.no .no-btn { opacity: 1; border-color: var(--ink); color: var(--ink); }
.card.no img { opacity: .26; filter: grayscale(1); }
.card.no b, .card.no span { opacity: .4; }

/* 详情:视频瓦片墙 */
#detail { padding: 1.6rem var(--pad) 4rem; }
.back { background: none; border: none; cursor: pointer; color: var(--ink-2);
  font: 400 0.66rem/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; padding: 0 0 1rem; }
#dtitle { margin: 0 0 .3rem; font: 400 0.95rem/1.4 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; }
.note { margin: 0 0 1.6rem; font: 400 0.72rem/1.7 var(--sans); color: var(--ink-3); max-width: 46em; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.tiles a { text-decoration: none; color: inherit; }
.tiles img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; background: var(--paper-2); }
.tiles .t { display: block; margin-top: 8px; font: 400 0.62rem/1.5 var(--sans); color: var(--ink-2);
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tiles .k { font: 400 0.58rem/1.6 var(--sans); letter-spacing: 0.08em; color: var(--ink-3); }

@media (max-width: 640px) {
  :root { --pad: 1.1rem; }
  header { flex-wrap: wrap; gap: 1rem; }
  .grid, .tiles { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* ============ Prada / Apple 那一路的排版覆盖 ============================================
   和 COS 的区别是明确的两套语言:
     COS   —— 全大写、宽字距、细字重、左对齐;冷、克制、编辑感
     PRADA —— 保持原大小写、字距收紧、中等字重、居中;稳、正式、精品店感
   这里换成后者:导航不转大写、选中只在文字正下方一条短线、图片贴边排在浅灰底上、
   图说居中加粗。Apple 的部分体现在:字距紧、字重中、留白大、不用任何装饰线。 */

header nav button, .row button {
  text-transform: none;
  letter-spacing: 0.005em;
  font-weight: 500;
  font-size: 0.82rem;
  color: var(--ink-2);
  padding: 4px 0 7px;
  border-bottom: 2px solid transparent;
}
header nav button.on, .row button.on {
  color: var(--ink);
  font-weight: 600;
  border-bottom: 2px solid var(--ink);   /* 只在文字正下方,不通栏 */
}
.row { gap: 0 30px; }
header { justify-content: center; gap: 2rem; }
h1 { letter-spacing: 0.22em; font-weight: 600; }

/* 商品网格:零间距、浅灰底、图说居中 —— 精品店的陈列方式 */
.grid { gap: 0; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.card { padding: 0 0 2.6rem; }
.card img, .card .empty { background: #f0f0f0; aspect-ratio: 4/5; }
@media (prefers-color-scheme: dark) { .card img, .card .empty { background: #1a1a1a; } }
.card b {
  text-align: center; text-transform: none; letter-spacing: 0.005em;
  font-weight: 600; font-size: 0.78rem; margin-top: 14px;
}
.card span { text-align: center; font-size: 0.68rem; letter-spacing: 0; }
.card:hover img { opacity: 1; transform: scale(1.012); }
.card img { transition: transform .5s cubic-bezier(.2,.6,.2,1); }

/* 按钮:去掉方框,只留文字 + 悬停下划线。Apple 和 Prada 都不给次要操作画框 */
.bar button {
  border: none; padding: 6px 0; margin-right: 4px;
  text-transform: none; letter-spacing: 0.005em; font-size: 0.78rem; font-weight: 500;
  border-bottom: 2px solid transparent;
}
.bar button:hover { color: var(--ink); border-bottom-color: var(--rule); }
.bar button.on { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }
.bar input { font-size: 0.82rem; letter-spacing: 0; }
.count { letter-spacing: 0; font-size: 0.72rem; }

/* 「已排除」按钮:同样去框,做成极小的圆点式标记 */
.no-btn {
  border: none; background: rgba(255,255,255,.92); color: var(--ink-2);
  font-size: 0.62rem; font-weight: 500; letter-spacing: 0; padding: 5px 9px;
}
.card.no .no-btn { background: var(--ink); color: var(--paper); }

.tiles { gap: 0; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.tiles a { padding: 0 0 2rem; display: block; }
.tiles img { background: #f0f0f0; aspect-ratio: 4/5; }
.tiles .t { text-align: center; font-size: 0.72rem; padding: 0 10px; }
.tiles .k { text-align: center; display: block; letter-spacing: 0; }
#dtitle { text-align: center; text-transform: none; letter-spacing: 0.02em; font-weight: 600; font-size: 1.1rem; }
.note { text-align: center; margin-left: auto; margin-right: auto; }
.back { text-transform: none; letter-spacing: 0; font-size: 0.78rem; font-weight: 500; }

/* ============ 字号整体放大 ==================================================
   之前按时装网站的习惯把字压得很小 —— 但那是给"看图买衣服"设计的,
   你这个库是要**读内容**的:标题要一眼认出、备注要能扫。看不清就没有高级可言。 */
h1 { font-size: 1.05rem; }
.standing { font-size: 0.8rem; }
header nav button, .row button { font-size: 1rem; padding: 6px 0 9px; }
.row.groups button { font-size: 0.92rem; }
.bar button { font-size: 0.92rem; }
.bar input { font-size: 0.95rem; width: 260px; }
.count { font-size: 0.85rem; }
.card b { font-size: 0.98rem; margin-top: 16px; line-height: 1.45; }
.card span { font-size: 0.82rem; line-height: 1.6; }
.no-btn { font-size: 0.74rem; padding: 6px 10px; }
#dtitle { font-size: 1.5rem; }
.note { font-size: 0.95rem; }
.tiles .t { font-size: 0.86rem; line-height: 1.55; }
.tiles .k { font-size: 0.8rem; }
.back { font-size: 0.92rem; }

/* Tag 行:横着切。分组是"往下钻",tag 是"横着找" */
.row.tags { gap: 0 18px; margin: .4rem 0 1rem; }
.row.tags button { font-size: 0.86rem; font-weight: 400; color: var(--ink-3); }
.row.tags button.on { color: var(--ink); font-weight: 600; border-bottom: 2px solid var(--ink); }
.row.tags i { font-style: normal; font-size: 0.72rem; color: var(--ink-3); margin-left: 4px; }
.card .tags { color: var(--ink-3); letter-spacing: 0.04em; }

/* ============ 高级感的来源:让每张图看起来像同一个系列 ==========================
   抖音/小红书封面天生是花的 —— 大字、拼贴、高饱和,互相打架。排版再克制也救不了。
   LV / COS 的画面之所以"贵",是因为所有图片经过同一套处理:同比例、同色调、同留白。
   我们改不了原图,但可以统一"呈现方式":
     · 统一降饱和 + 轻微提亮 —— 花哨的封面立刻退到同一个调子上
     · 悬停才恢复原色 —— 克制的动效比花哨的动效贵
     · 缩略图小一点、间距大一点 —— 一屏看到更多,单张的花哨就被稀释了
   ========================================================================== */
.card img, .tiles img {
  filter: saturate(0.72) contrast(0.96) brightness(1.02);
  transition: filter .45s ease, transform .6s cubic-bezier(.2,.6,.2,1);
}
.card:hover img, .tiles a:hover img { filter: none; transform: scale(1.02); }

/* 列宽收窄:一屏放更多张,视觉噪音被平均掉;也避免只有一张卡时孤零零占满屏 */
.grid, .tiles { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px; }
.card, .tiles a { padding-bottom: 2.2rem; }

/* 图片之间留一条极细的白缝,像画册的装帧,而不是贴死 */
.card img, .card .empty, .tiles img { outline: 6px solid var(--paper); outline-offset: -6px; }

/* 文字压到最低限度:一行标题 + 一行灰色元信息,不要三行 */
.card b { font-size: 0.86rem; margin-top: 12px; }
.card span { font-size: 0.74rem; line-height: 1.5; }
.card span + span { display: none; }        /* 只留第一条元信息 */

/* 内容区留白:两侧收进来,不要顶到浏览器边缘 —— 留白是"贵"最便宜的来源 */
main, #detail { max-width: 1600px; margin: 0 auto; padding-left: 3.4rem; padding-right: 3.4rem; }
@media (max-width: 700px) { main, #detail { padding-left: 1.1rem; padding-right: 1.1rem; } }

/* 摊开模式下的瓦片:和卡片同一套视觉,只是直接指向视频 */
.card.tile { text-decoration: none; color: inherit; display: block; }
.card.tile b { font-weight: 500; letter-spacing: 0; text-transform: none;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* 署名:内容是别人的,名字必须出现在它旁边 —— 小、灰、不抢戏,但一眼能看到 */
.card .by, .tiles .k { color: var(--ink-3); font-size: 0.72rem; letter-spacing: 0.02em; }
.card span + span { display: block; }        /* 上面为省空间隐藏过第二行,署名要放出来 */

footer { border-top: 1px solid var(--rule); margin-top: 4rem;
  padding: 1.6rem 3.4rem 3rem; max-width: 1600px; margin-left: auto; margin-right: auto; }
footer p { margin: 0; font: 400 0.74rem/1.8 var(--sans); color: var(--ink-3); max-width: 52em; }

/* 摊开模式:按格子分段,段首小标题 —— 填满屏幕的同时保住"这一堆是什么" */
.grid.flat { display: block; }
.seg { margin-bottom: 3.4rem; }
.seg-h { display: flex; align-items: baseline; gap: 12px; margin: 0 0 1rem;
  font: 600 1.05rem/1.4 var(--sans); letter-spacing: 0.02em; text-transform: none; }
.seg-h em { font-style: normal; font-weight: 400; font-size: 0.78rem; color: var(--ink-3); }
.seg-h span { font-weight: 400; font-size: 0.8rem; color: var(--ink-3); }
.seg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px; }

/* 「看全部」按钮:次要操作,只有文字和下划线 */
.seg-h .more { margin-left: auto; background: none; border: none; cursor: pointer;
  color: var(--ink-2); font: 400 0.78rem/1 var(--sans); border-bottom: 1px solid var(--rule);
  padding: 3px 0; }
.seg-h .more:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* 垃圾桶:常驻右下角,拖进去即删。不做确认弹窗 —— 审核是高频动作,
   每次弹窗确认会让人不想审;误删的兜底是 trash.json 可以捞回来。 */
#trash {
  position: fixed; right: 26px; bottom: 26px; z-index: 50;
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; background: var(--paper); border: 1px solid var(--rule);
  font: 400 0.78rem/1 var(--sans); color: var(--ink-2);
  transition: all .18s ease; user-select: none;
}
#trash .ico { font-size: 1.05rem; }
#trash .n { font-weight: 600; color: var(--ink); min-width: 14px; text-align: center; }
#trash em { font-style: normal; font-size: 0.72rem; color: var(--ink-3); }
#trash.over { border-color: var(--ink); background: var(--ink); color: var(--paper); transform: scale(1.06); }
#trash.over .n, #trash.over em { color: var(--paper); }
#trash.hit { border-color: var(--ink); }
.card.tile[draggable="true"] { cursor: grab; }
.card.tile:active { cursor: grabbing; }

/* 移动 / 垃圾桶面板 —— 审核用的两个浮层 */
.card.tile{position:relative}
#tiles a{position:relative}
.mv{position:absolute;top:6px;right:6px;z-index:3;width:26px;height:26px;border:0;border-radius:8px;
  background:rgba(20,20,22,.72);color:#fff;font-size:14px;line-height:1;cursor:pointer;opacity:0;transition:.15s}
.card.tile:hover .mv,#tiles a:hover .mv{opacity:1}
.mv:hover{background:#2f6fed}

#mvpanel,#trashpanel{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.45);
  display:flex;align-items:flex-start;justify-content:center;padding:8vh 16px}
#mvpanel[hidden],#trashpanel[hidden]{display:none}
#mvpanel .pin,#trashpanel .pin{background:#fff;border-radius:14px;width:min(560px,100%);
  max-height:76vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.pin header{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;
  font-weight:600;border-bottom:1px solid #eee}
.pin header button{border:0;background:none;font-size:16px;cursor:pointer;color:#888}
#mvq{margin:12px 16px;padding:10px 12px;border:1px solid #ddd;border-radius:10px;font-size:15px;outline:none}
#mvq:focus{border-color:#2f6fed}
#mvlist{overflow:auto;padding:0 8px 12px}
#mvlist button{display:block;width:100%;text-align:left;border:0;background:none;padding:9px 12px;
  border-radius:9px;cursor:pointer}
#mvlist button:hover{background:#f2f5fb}
#mvlist b{display:block;font-size:14px}
#mvlist span{font-size:12px;color:#888}
.pin .none{padding:20px;color:#999;text-align:center}
.pin .ops{padding:12px 16px;border-bottom:1px solid #eee}
.pin .ops button{background:#d63b3b;color:#fff;border:0;padding:9px 14px;border-radius:9px;cursor:pointer;font-size:14px}
.pin .ops em{display:block;margin-top:6px;font-size:12px;color:#999;font-style:normal}
#trashlist{overflow:auto;padding:6px 16px 14px}
#trashlist .row{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:9px 0;border-bottom:1px solid #f2f2f2}
#trashlist .row b{font-size:14px;font-weight:500}
#trashlist .row span{font-size:12px;color:#999}
#trashlist .row button{grid-row:1/3;align-self:center;border:1px solid #ddd;background:#fff;
  padding:5px 12px;border-radius:8px;cursor:pointer;font-size:13px}
#toast{position:fixed;left:50%;bottom:80px;transform:translateX(-50%) translateY(10px);z-index:300;
  background:#111;color:#fff;padding:10px 18px;border-radius:24px;font-size:14px;opacity:0;
  pointer-events:none;transition:.2s}
#toast.on{opacity:1;transform:translateX(-50%)}
#trash{cursor:pointer}
#dnote .more{margin-left:8px;background:none;border:1px solid #ccc;border-radius:14px;
  padding:3px 12px;font-size:13px;cursor:pointer;color:#333}
#dnote .more:hover{border-color:#111;color:#111}
.pin-btn{position:absolute;top:6px;right:36px;z-index:3;width:26px;height:26px;border:0;border-radius:8px;
  background:rgba(20,20,22,.72);color:#fff;font-size:13px;line-height:1;cursor:pointer;opacity:0;transition:.15s}
.card.tile:hover .pin-btn,#tiles a:hover .pin-btn{opacity:1}
.pin-btn:hover{background:#e0a32e}

/* 横轨:格子不换行,右边溢出的用箭头翻 */
#grid.grid.rail{display:flex;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;
  gap:14px;padding-bottom:6px;scrollbar-width:none}
#grid.grid.rail::-webkit-scrollbar{display:none}
#grid.grid.rail > .card{flex:0 0 200px;scroll-snap-align:start}
main{position:relative}
.rail-btn{position:absolute;top:calc(50% - 40px);z-index:20;width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(0,0,0,.08);background:rgba(255,255,255,.95);font-size:20px;line-height:1;
  cursor:pointer;box-shadow:0 3px 14px rgba(0,0,0,.14);color:#333}
.rail-btn:hover{background:#fff;color:#000}
.rail-btn.left{left:-6px}
.rail-btn.right{right:-6px}

/* 降噪:让一墙封面看起来像一套,而不是十四张海报打架。
 *
 * 花的根源不是背景色 —— 是封面本身就是大字报:「保姆级」「视觉诈骗」各自
 * 一种荧光配色,拼在一起必然吵。所以不改背景,改两件事:
 *   1. 尺寸统一(3:4),高度参差本身就是乱的一半
 *   2. 图片降饱和 + 极淡冷调,把各家的荧光拉回同一个色温
 * 鼠标移上去恢复原色 —— 需要看清的时候看得清,平时安静。
 *
 * 不给卡片画框。加了白底和描边之后每张图都被关进一个小盒子里,盒子的边
 * 比图还抢眼,反而显得局促;图本身就是内容,让它直接铺在纸上,靠留白分隔。 */
#grid.grid{gap:16px}
#grid.grid > .card{background:none;border:0;box-shadow:none;padding:0;border-radius:0;
  transition:transform .18s}
#grid.grid > .card:hover{transform:translateY(-3px);box-shadow:none}
#grid.grid > .card > img,#grid.grid > .card > .empty{
  width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:12px;display:block;
  filter:saturate(.74) contrast(.95) brightness(1.04) hue-rotate(-6deg);transition:filter .25s}
#grid.grid > .card:hover > img{filter:none}
#grid.grid > .card > b{display:block;margin-top:12px;font-size:15px;font-weight:600}
#grid.grid > .card > span{display:block;font-size:12px;color:var(--ink-3);margin-top:3px}

/* 横轨里的卡片放大一档:200 太小,人和衣服都看不清;
   240 一屏还能放六七个,但每张够看。 */
#grid.grid.rail > .card{flex:0 0 240px}

/* 登录门 / 加链接 / 当前用户 */
#gate{position:fixed;inset:0;z-index:400;background:var(--paper);display:flex;
  align-items:center;justify-content:center}
#gate .pin{width:min(340px,86vw);display:flex;flex-direction:column;gap:12px;text-align:center}
#gate h2{margin:0;font-size:22px;letter-spacing:.14em}
#gate p{margin:0;color:var(--ink-3);font-size:14px}
#gate input{padding:12px 14px;border:1px solid var(--rule);border-radius:10px;font-size:16px;
  text-align:center;outline:none;background:var(--paper)}
#gate input:focus{border-color:var(--accent)}
#gate button{padding:11px;border:0;border-radius:10px;background:var(--accent);color:#fff;
  font-size:15px;cursor:pointer}
#gate em{color:#d63b3b;font-size:13px;font-style:normal;min-height:18px}
#me{position:fixed;left:16px;bottom:16px;z-index:150;background:var(--paper-2);
  border:1px solid var(--rule);border-radius:16px;padding:5px 13px;font-size:13px;
  color:var(--ink-2);cursor:pointer}
#addpanel{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.45);
  display:flex;align-items:flex-start;justify-content:center;padding:10vh 16px}
#addpanel[hidden]{display:none}
#addpanel .pin{background:#fff;border-radius:14px;width:min(520px,100%);padding:0 0 16px;
  display:flex;flex-direction:column;gap:10px;box-shadow:0 20px 60px rgba(0,0,0,.3)}
#addpanel textarea{margin:0 16px;min-height:110px;padding:11px;border:1px solid #ddd;
  border-radius:10px;font-size:14px;resize:vertical;outline:none;font-family:inherit}
#addpanel input{margin:0 16px;padding:10px 12px;border:1px solid #ddd;border-radius:10px;
  font-size:14px;outline:none}
#addpanel textarea:focus,#addpanel input:focus{border-color:#2f6fed}
#addpanel #asave{margin:4px 16px 0;padding:11px;border:0;border-radius:10px;
  background:#1f4e79;color:#fff;font-size:15px;cursor:pointer}

/* 批量选择条 */
#pickbar{position:fixed;left:50%;transform:translateX(-50%);bottom:22px;z-index:180;
  display:flex;align-items:center;gap:8px;background:#111;color:#fff;border-radius:26px;
  padding:9px 16px;box-shadow:0 8px 30px rgba(0,0,0,.28);font-size:14px}
#pickbar span{margin-right:4px;opacity:.85}
#pickbar button{border:0;background:rgba(255,255,255,.14);color:#fff;border-radius:16px;
  padding:6px 13px;font-size:13px;cursor:pointer}
#pickbar button:hover{background:rgba(255,255,255,.26)}
#pickbar button[disabled]{opacity:.35;cursor:default}
#pickbar [data-bdel]{background:#c33}
#tiles a.pickmode{cursor:pointer}
#tiles a.pickmode img{opacity:.62;transition:.15s}
#tiles a.picked img{opacity:1;outline:3px solid var(--accent);outline-offset:-3px;border-radius:8px}
#tiles a.picked::after{content:'✓';position:absolute;top:8px;left:8px;z-index:4;width:24px;height:24px;
  border-radius:50%;background:var(--accent);color:#fff;font-size:14px;line-height:24px;text-align:center}

/* 想法板 */
#notebtn{position:fixed;right:16px;bottom:76px;z-index:150;display:flex;align-items:center;gap:7px;
  background:var(--paper);border:1px solid var(--rule);border-radius:22px;padding:8px 15px;
  cursor:pointer;box-shadow:0 3px 14px rgba(31,78,121,.1);font-size:13px;color:var(--ink-2)}
#notebtn:hover{border-color:var(--accent);color:var(--accent)}
#notebtn .n{font-weight:600;color:var(--ink)}
#notebtn em{font-style:normal}
#notepanel{position:fixed;inset:0;z-index:210;background:rgba(0,0,0,.45);
  display:flex;align-items:flex-start;justify-content:center;padding:7vh 16px}
#notepanel[hidden]{display:none}
#notepanel .pin{background:#fff;border-radius:14px;width:min(560px,100%);max-height:80vh;
  display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.3)}
#ntext{width:100%;min-height:76px;padding:11px;border:1px solid #ddd;border-radius:10px;
  font-size:14px;font-family:inherit;resize:vertical;outline:none}
#ntext:focus{border-color:#1f4e79}
#notepanel .ops button{width:100%;margin-top:8px;background:#1f4e79;color:#fff;border:0;
  padding:10px;border-radius:10px;font-size:14px;cursor:pointer}
#notelist{overflow:auto;padding:6px 16px 16px}
.memo{padding:11px 0;border-bottom:1px solid #f2f2f2;position:relative}
.memo b{font-size:13px}
.memo i{font-size:12px;color:#aaa;font-style:normal;margin-left:8px}
.memo p{margin:5px 0 0;font-size:14px;line-height:1.55;white-space:pre-wrap}
.memo button{position:absolute;right:0;top:9px;border:1px solid #eee;background:#fff;
  border-radius:7px;padding:3px 9px;font-size:12px;cursor:pointer;color:#999}

/* 详情页标题下的按钮排成一行,别叠在一起 */
#dnote{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;line-height:1.9}
#dnote .more{margin-left:0}
/* 按钮不许被压扁:flex 默认允许收缩,几个按钮挤在一行时会被压到零宽,
   文字就叠在一起了。固定住宽度,一行放不下就换行。 */
#dnote .more{flex:0 0 auto;white-space:nowrap}