/* memos-edge POC UI v2 —— 视觉规格 1:1 搬运 memos-src 0.15.12 */
:root{
  --zinc-100:#f4f4f5;--zinc-200:#e4e4e7;--ink:#27272a;--muted:#71717a;
  --line:#e4e4e7;--card:#ffffff;--g1:#6b9479;--g2:#4e7d63;--g3:#3a5a49;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{background:var(--zinc-100)}
body{
  color:var(--ink);
  font:15px/1.65 "Noto Sans SC","Source Han Sans SC","Source Han Sans CN",-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue",sans-serif;
  padding-bottom:40px;overflow-x:hidden;
}

/* ── 莫兰迪气泡背景(规格同 tailwind.css) ── */
.bg-blob,.bg-blob2,body::before,body::after{
  content:"";position:fixed;border-radius:50%;pointer-events:none;z-index:0;
}
body::before{width:500px;height:500px;top:-120px;right:-140px;background:rgba(110,136,176,.08)}
body::after{width:400px;height:400px;bottom:40px;left:-160px;background:rgba(94,158,94,.06)}
.bg-blob{width:360px;height:360px;top:45%;left:55%;background:rgba(196,162,76,.06);transform:translate(-30%,20%)}
.bg-blob2{width:300px;height:300px;top:20%;left:-80px;background:rgba(158,126,176,.05)}


a{color:inherit;text-decoration:none}
img,video{display:block}

/* ── 布局 ── */
.wrap{max-width:48rem;margin:0 auto;padding:0 12px;position:relative;z-index:10}

/* ── 站点头部 ── */
.top-nav{display:flex;justify-content:center;padding:16px 0 8px;position:relative;z-index:10}
.site-nav{display:flex;gap:12px}
.site-nav a{
  font-size:14.5px;color:#4b5563;padding:9px 18px;border-radius:9px;cursor:pointer;
  display:flex;align-items:center;gap:7px;
  transition:all .22s cubic-bezier(.4,0,.2,1);
}
.site-nav a .bi{font-size:15px;transition:transform .22s cubic-bezier(.4,0,.2,1)}
.site-nav a:hover{color:var(--g2);background:#eef4f2;transform:translateY(-2px);box-shadow:0 4px 10px rgba(78,125,99,.15)}
.site-nav a:hover .bi{transform:scale(1.12)}
.site-nav a:active{transform:translateY(0) scale(.95);box-shadow:none}
.site-nav a.on{color:#fff;background:linear-gradient(135deg,var(--g1),var(--g2));box-shadow:0 2px 6px rgba(78,125,99,.25)}
.site-nav a.on:hover{color:#fff;background:linear-gradient(135deg,var(--g1),var(--g3));transform:translateY(-2px)}

/* ── 时间线卡片(Explore:白卡 rounded-lg border) ── */
.card{
  background:var(--card);border:1px solid var(--line);border-radius:8px;
  padding:14px 16px;margin-bottom:12px;cursor:pointer;
  transition:border-color .15s;
}
.card:hover{border-color:#d4d4d8}
.card-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.card-head .time{font-size:12.5px;color:var(--muted);font-family:var(--mono);white-space:nowrap}
.head-right{margin-left:auto;display:flex;align-items:center;gap:6px}
.head-right .mid{font-size:11.5px;color:#9ca3af;font-family:var(--mono)}
.copy-btn{border:none;background:none;color:#9ca3af;cursor:pointer;font-size:14px;padding:1px 3px;border-radius:4px}
.copy-btn:hover{color:#0d6e6e;background:#eef4f2}
.txt{white-space:pre-wrap;word-break:break-word;font-size:15px}
.txt p{margin-bottom:2px}

/* tag / location(规格同 memo-content.less:tag 绿字默认,location 灰药丸 + pin 图标) */
.tag-span{display:inline-flex;align-items:center;gap:2px;color:rgb(22,163,74);cursor:pointer}
.tag-icon{flex-shrink:0}
.tag-span:hover{background:#fee;opacity:.8;transition:1s}
.location{
  display:inline-flex;align-items:center;gap:2px;
  background-color:#f0f0f0;color:#999;
  padding:2px 8px;border-radius:8px;font-size:0.85em;
  cursor:pointer;text-decoration:none;
}
.location:hover{background-color:#f4f4f4}
.location svg{flex-shrink:0}
.loc-row{display:flex;justify-content:flex-start;align-items:center;margin-top:10px}

/* 地图模块(规格同 global.css .post-map) */
.post-map{
  margin-top:12px;border-radius:8px;overflow:hidden;
  height:200px;width:100%;position:relative;background:#f0f0f0;
}
#postMapLoading{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#999;font-size:13px;
}

/* ── 图片网格(规格同 memo-resources.less + calcImgCorners) ── */
.img-grid{display:flex;flex-wrap:wrap;gap:4px;width:100%;margin-top:10px}
.img-grid .img-cell{position:relative;overflow:hidden;border-radius:0;background:rgba(0,0,0,.03)}
.img-grid.cols-2 .img-cell{width:calc((100% - 4px)/2)}
.img-grid.cols-3 .img-cell{width:calc((100% - 8px)/3)}
.img-cell.corner-tl{border-top-left-radius:8px}
.img-cell.corner-tr{border-top-right-radius:8px}
.img-cell.corner-bl{border-bottom-left-radius:8px}
.img-cell.corner-br{border-bottom-right-radius:8px}
.img-cell img{width:100%;height:100%;object-fit:cover;object-position:top;transform:scale(1.2);transform-origin:top center;cursor:pointer}
.img-cell .more-overlay{
  position:absolute;inset:0;background:rgba(0,0,0,.5);z-index:10;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:24px;font-weight:700;user-select:none;
}
/* 单图:等比显示,限高 256px,超出裁底(与 scale(1.2) 裁水印同思路) */
.single-img{
  margin-top:10px;width:90%;max-height:256px;border-radius:8px;overflow:hidden;
  border:1px solid var(--zinc-200);
}
.single-img img{width:100%;height:auto;display:block;object-fit:cover;object-position:top;transform:scale(1.2);transform-origin:top center}
.vid{width:100%;margin-top:10px;border-radius:8px;background:#000}

/* ── 详情页 ── */
.back-btn{
  position:fixed;top:14px;left:14px;z-index:60;
  display:flex;align-items:center;gap:4px;
  background:#42b883;color:#fff;border:none;border-radius:8px;
  font-size:13px;padding:6px 12px;cursor:pointer;font-family:inherit;
}
.back-btn:hover{opacity:.9}
.back-btn:active{transform:scale(.95)}
.detail-head{text-align:center;padding:22px 0 18px}
.detail-head img{width:64px;height:64px;border-radius:50%;object-fit:cover;margin:0 auto 10px;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.detail-head .name{font-size:15px;font-weight:600}
.detail-card{
  background:var(--card);border:1px solid var(--line);border-radius:8px;
  padding:16px 18px;
}
.detail-card .date{font-size:12px;color:var(--muted);font-family:var(--mono);margin-bottom:8px}

/* 上一条/下一条(规格同 MemoDetail.tsx):flex 卡片,有图=图模糊+黑渐变,无图=莫兰迪绿渐变 */
.pn{display:flex;gap:12px;margin:24px 0 8px}
.pn-card{
  flex:1;min-height:100px;border-radius:8px;overflow:hidden;position:relative;
  cursor:pointer;background:#f4f4f5;
}
.pn-card.off{opacity:.5;pointer-events:none}
.pn-card .pn-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(1px);transform:scale(1.08)}
.pn-card .pn-shade-img{position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(0,0,0,.85),rgba(0,0,0,.4) 50%,rgba(0,0,0,.1))}
.pn-card .pn-shade-g{position:absolute;inset:0;z-index:1;background:linear-gradient(135deg,var(--g1),var(--g2) 50%,var(--g3))}
.pn-body{position:relative;z-index:10;display:flex;flex-direction:column;justify-content:flex-end;width:100%;height:100%;min-height:100px;padding:12px}
.pn-card.r .pn-body{text-align:right}
.pn-lbl{font-size:11px;color:rgba(255,255,255,.8);margin-bottom:4px;display:flex;align-items:center;gap:4px}
.pn-card.r .pn-lbl{justify-content:flex-end}
.pn-txt{font-size:13.5px;color:#fff;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pn-card.off .pn-txt{color:rgba(255,255,255,.6)}

/* ── 相册页 ── */
.res-group{display:flex;align-items:flex-start;margin-bottom:32px}
.res-month{width:72px;flex-shrink:0;padding-top:4px;position:sticky;top:12px}
.res-month .y{font-size:12px;color:var(--muted);font-family:var(--mono)}
.res-month .m{font-size:20px;font-weight:600;letter-spacing:-.01em}
.res-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%}
@media(min-width:640px){.res-grid{grid-template-columns:repeat(4,1fr)}}
.res-cell{position:relative;overflow:hidden;border-radius:6px;background:rgba(0,0,0,.03);cursor:pointer}
.res-cell img{width:100%;height:100%;object-fit:cover;object-position:top;transform:scale(1.2);transform-origin:top center}
.res-cell:hover img{filter:brightness(.92)}

/* ── 骨架屏(规格同 Skeleton.tsx:animate-pulse bg-zinc-200 rounded) ── */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.sk{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite;background:#e4e4e7;border-radius:4px}
.sk-list .card{cursor:default}
.sk-row{display:flex;align-items:center;margin-bottom:10px}
.sk-dot{width:24px;height:24px;border-radius:50%;margin-right:8px}
.sk-line{height:16px;margin-bottom:8px}
.sk-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:12px}
.sk-grid3 .sk{width:100%;aspect-ratio:1/1;border-radius:0}

/* ── 返回顶部(Explore:右下角 FAB) ── */
.to-top{
  position:fixed;right:32px;bottom:96px;z-index:999;width:48px;height:48px;
  border-radius:50%;border:1px solid #e5e7eb;background:#ffffff;
  color:#9ca3af;cursor:pointer;display:none;align-items:center;justify-content:center;
  box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);
  transition:all .2s;
}
.to-top:hover{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1)}
.to-top.show{display:flex}

/* ── 写路径:登录/发贴 ── */
.input{
  width:100%;border:1px solid var(--line);border-radius:8px;padding:10px 12px;
  font:inherit;color:var(--ink);background:#fff;outline:none;resize:vertical;
}
.input:focus{border-color:#a7c4b5}
.btn{
  background:linear-gradient(135deg,var(--g1),var(--g2));color:#fff;
  border:none;border-radius:8px;padding:8px 18px;font:inherit;font-size:13.5px;cursor:pointer;
}
.btn:disabled{opacity:.5}
.btn-ghost{
  background:#f0f0f0;color:#52525b;border:none;border-radius:8px;
  padding:7px 12px;font:inherit;font-size:12.5px;cursor:pointer;display:inline-block;
}
.btn-ghost:hover{background:#e4e4e7}
.composer-bar{display:flex;justify-content:space-between;align-items:center;margin-top:10px}
#composer{min-height:88px}

/* ── 卡片/格子跳转后置样式占位 ── */
.loading{ text-align:center;color:var(--muted);padding:28px 0;font-size:13px }
.empty{ text-align:center;color:var(--muted);padding:60px 0;font-size:13px }

/* ── 发布器增强:工具栏/缩略图 ── */
.toolbar{display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap}
.tb{background:#f0f0f0;border:none;border-radius:6px;padding:4px 10px;font:inherit;font-size:12.5px;cursor:pointer;color:#52525b}
.tb:hover{background:#e4e4e7}
.thumb-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.thumb{position:relative;width:64px;height:64px;border-radius:6px;overflow:hidden;border:1px solid var(--line)}
.thumb img,.thumb video{width:100%;height:100%;object-fit:cover}
.thumb-x{position:absolute;top:0;right:0;background:rgba(0,0,0,.55);color:#fff;width:18px;height:18px;line-height:16px;text-align:center;font-size:13px;cursor:pointer;border-radius:0 0 0 6px}