/* 照星野 App 的观感：深色底、暖金强调色、卡片双列瀑布流 */
:root{
  --bg:#0d0d10; --panel:#17171c; --panel-2:#1f1f26;
  --line:#2a2a33; --fg:#eceaf2; --dim:#9a97a8; --dim2:#6f6c7d;
  --gold:#f5cf7a; --gold-dim:#8a7645;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);
  font:15px/1.65 system-ui,-apple-system,"PingFang SC","Microsoft Yahei",sans-serif}
a{color:inherit;text-decoration:none}

.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:28px;
  padding:14px 22px;background:rgba(13,13,16,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line)}
.brand{font-size:19px;font-weight:700;letter-spacing:.5px}
.brand span{color:var(--gold);font-weight:500;font-size:14px;margin-left:4px}
.tabs{display:flex;gap:20px}
.tabs a{color:var(--dim);padding:4px 2px;border-bottom:2px solid transparent}
.tabs a.on{color:var(--fg);border-color:var(--gold)}

main{max-width:1280px;margin:0 auto;padding:22px}
.loading,.empty{color:var(--dim);padding:60px 0;text-align:center}

/* ---- 筛选条 ---- */
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:20px}
.filters input,.filters select{background:var(--panel);color:var(--fg);
  border:1px solid var(--line);border-radius:9px;padding:9px 12px;font-size:14px}
.filters input{min-width:220px}
.chip{background:var(--panel);border:1px solid var(--line);border-radius:999px;
  padding:7px 15px;cursor:pointer;font-size:13px;color:var(--dim)}
.chip.on{background:var(--gold);border-color:var(--gold);color:#1a1508;font-weight:600}
.count{color:var(--dim2);font-size:13px;margin-left:auto}

/* ---- 智能体网格 ---- */
.grid{columns:4 260px;column-gap:16px}
.card{break-inside:avoid;margin-bottom:16px;background:var(--panel);
  border:1px solid var(--line);border-radius:14px;overflow:hidden;cursor:pointer;
  transition:transform .16s,border-color .16s}
.card:hover{transform:translateY(-3px);border-color:var(--gold-dim)}
.card .cover{width:100%;display:block;background:var(--panel-2)}
.card .body{padding:11px 13px 13px}
.card .name{display:flex;align-items:center;gap:7px;font-weight:600;margin-bottom:5px}
.card .name img{width:22px;height:22px;border-radius:50%;object-fit:cover;flex:none}
.card .desc{color:var(--dim);font-size:13px;line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card .meta{display:flex;justify-content:space-between;align-items:center;
  margin-top:9px;font-size:12px;color:var(--dim2)}
.card .meta .author{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60%}
.badge{position:absolute;top:8px;left:8px;background:rgba(0,0,0,.6);
  border-radius:6px;padding:2px 7px;font-size:11px;color:var(--gold)}
/* FM 的类型角标摆右上角，和左上角的时长分开 */
.badge.right{left:auto;right:8px;color:var(--dim)}
.badge.right.hot{color:var(--gold);background:rgba(245,207,122,.18)}
.card .wrap{position:relative}

/* ---- 详情 ---- */
.hero{position:relative;border-radius:16px;overflow:hidden;margin-bottom:22px;
  min-height:520px;display:flex;align-items:flex-end;border:1px solid var(--line)}
/* 立绘几乎都是竖构图（1024 宽、更高），object-fit:cover 默认从中间裁，
   结果 hero 里只剩脖子和肩膀。锚到顶部偏下一点，脸才在画面里。 */
.hero img.bg{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 15%}
.hero .shade{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,10,13,.96) 8%,rgba(10,10,13,.25) 60%,transparent)}
.hero .inner{position:relative;padding:26px 28px;width:100%}
.hero h1{margin:0 0 8px;font-size:30px}
.hero .sub{color:var(--dim);font-size:14px}
.stats{display:flex;flex-wrap:wrap;gap:22px;margin-top:16px}
.stat b{display:block;font-size:20px;color:var(--gold)}
.stat span{font-size:12px;color:var(--dim)}

.sec{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:18px 20px;margin-bottom:16px}
.sec h2{margin:0 0 12px;font-size:15px;color:var(--gold);font-weight:600}
.sec p{margin:0;white-space:pre-wrap;line-height:1.85}
.prologue{color:#d8d4e4;font-style:italic}
.kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px 22px}
.kv div{font-size:13px;color:var(--dim);border-bottom:1px dashed var(--line);padding:5px 0}
.kv b{color:var(--fg);font-weight:500;float:right}
.back{display:inline-block;margin-bottom:16px;color:var(--dim);font-size:14px}
.back:hover{color:var(--gold)}
pre.raw{max-height:340px;overflow:auto;background:#101014;border-radius:10px;
  padding:14px;font-size:12px;color:#9fd0a8;line-height:1.5}
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.posts figure{margin:0;background:var(--panel-2);border-radius:10px;overflow:hidden}
.posts img{width:100%;display:block}
.posts figcaption{padding:8px 10px;font-size:12px;color:var(--dim)}

/* ---- 总览 ---- */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px;margin-bottom:22px}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px}
.tile b{display:block;font-size:27px;color:var(--gold)}
.tile span{font-size:13px;color:var(--dim)}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line)}
th{color:var(--dim);font-weight:500;font-size:13px}

/* ================= 聊天页：照星野的沉浸流 ================= */
/* 全屏立绘打底，气泡浮在上面，输入框钉在底部 */
.chat{position:fixed;inset:0;top:0;display:flex;flex-direction:column;background:#000}
.chat .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 12%}
.chat .veil{position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(8,8,11,.85) 0,rgba(8,8,11,.15) 22%,
             rgba(8,8,11,.25) 45%,rgba(8,8,11,.9) 82%,rgba(8,8,11,.97) 100%)}

.chat .bar{position:relative;display:flex;align-items:center;gap:12px;
  padding:12px 16px;z-index:3}
.chat .bar a{color:var(--fg);font-size:20px;padding:2px 8px}
.chat .who{display:flex;align-items:center;gap:9px;background:rgba(0,0,0,.4);
  border-radius:999px;padding:5px 14px 5px 5px}
.chat .who img{width:32px;height:32px;border-radius:50%;object-fit:cover}
.chat .who b{font-size:15px}
.chat .who span{font-size:11px;color:var(--dim)}
.chat .bar .spacer{flex:1}
.chat .bar button{background:rgba(0,0,0,.4);border:1px solid var(--line);color:var(--fg);
  border-radius:999px;padding:7px 14px;font-size:13px;cursor:pointer}
.chat .bar button:hover{border-color:var(--gold);color:var(--gold)}

.chat .stream{position:relative;flex:1;overflow-y:auto;padding:8px 16px 4px;z-index:2;
  display:flex;flex-direction:column;gap:12px}
.chat .stream::-webkit-scrollbar{width:0}
.msg{max-width:82%;padding:13px 16px;border-radius:16px;line-height:1.75;
  font-size:15px;white-space:pre-wrap;word-break:break-word;
  backdrop-filter:blur(6px);animation:rise .28s ease}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.msg.npc{align-self:flex-start;background:rgba(20,20,26,.82);border:1px solid rgba(255,255,255,.07)}
.msg.user{align-self:flex-end;background:rgba(245,207,122,.16);
  border:1px solid rgba(245,207,122,.3)}
/* 星野最标志性的排版：括号内是动作/神态，调暗一档、斜体 */
.msg .act{color:var(--dim);font-style:italic}
.msg.typing::after{content:'▍';color:var(--gold);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

.chat .foot{position:relative;z-index:3;padding:8px 14px 16px}
.suggest{display:flex;flex-direction:column;gap:7px;margin-bottom:10px}
.suggest .lbl{font-size:12px;color:var(--dim2);padding-left:4px}
.suggest button{text-align:left;background:rgba(22,22,28,.78);color:var(--fg);
  border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:11px 14px;
  font-size:14px;cursor:pointer;backdrop-filter:blur(6px)}
.suggest button:hover{border-color:var(--gold);color:var(--gold)}
.composer{display:flex;gap:10px;align-items:center}
.composer input{flex:1;background:rgba(24,24,30,.9);border:1px solid var(--line);
  color:var(--fg);border-radius:999px;padding:13px 18px;font-size:15px}
.composer input:focus{outline:none;border-color:var(--gold-dim)}
.composer button{background:var(--gold);color:#1a1508;border:0;border-radius:999px;
  padding:13px 22px;font-weight:600;cursor:pointer;font-size:15px}
.composer button:disabled{opacity:.4;cursor:default}

/* ---- 关系面板（右侧抽屉）---- */
.panel{position:fixed;top:0;right:0;bottom:0;width:min(420px,92vw);z-index:12;
  background:#111116;border-left:1px solid var(--line);overflow-y:auto;padding:20px;
  transform:translateX(100%);transition:transform .24s ease}
.panel.on{transform:none}
.panel h3{margin:0 0 4px;font-size:17px}
.panel .sig{color:var(--dim);font-size:13px;font-style:italic;margin-bottom:14px}
.panel .tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.panel .tags span{background:var(--panel-2);border:1px solid var(--line);
  border-radius:999px;padding:3px 11px;font-size:12px;color:var(--dim)}
.meter{margin-bottom:16px}
.meter .row{display:flex;justify-content:space-between;font-size:12px;color:var(--dim);
  margin-bottom:5px}
.meter .track{height:7px;background:var(--panel-2);border-radius:99px;overflow:hidden}
.meter .fill{height:100%;background:linear-gradient(90deg,var(--gold-dim),var(--gold))}
.panel section{margin-bottom:18px}
.panel section h4{margin:0 0 8px;font-size:13px;color:var(--gold);font-weight:600}
.card2{background:var(--panel);border:1px solid var(--line);border-radius:11px;
  padding:11px 13px;margin-bottom:8px;font-size:13px;line-height:1.7}
.card2 .tag{font-weight:600;color:var(--fg)}
.card2 .ev{color:var(--dim);font-size:12px;margin-top:5px;padding-left:9px;
  border-left:2px solid var(--gold-dim)}
.card2 .conf{float:right;color:var(--dim2);font-size:11px}
.card2.diary{font-style:italic;color:#cfcbdc}
.ach{display:flex;flex-wrap:wrap;gap:8px}
.ach div{background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:7px 11px;font-size:12px;color:var(--dim2);opacity:.45}
.ach div.got{opacity:1;color:var(--fg);border-color:var(--gold-dim)}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:11}

/* ---- 标签 / 隐藏设定 / prompt 正文（2026-07-30 加的几块新数据） ---- */
.sec h2 small{color:var(--dim2);font-weight:400;font-size:12px;margin-left:8px}
.taglist{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
.tag{background:rgba(245,207,122,.10);border:1px solid var(--gold-dim);
  border-radius:999px;padding:3px 10px;font-size:12px;color:var(--gold);cursor:pointer}
.tag:hover{background:rgba(245,207,122,.22)}

/* 隐藏设定是"作者写给模型看的暗面"，视觉上和公开人设区分开 */
.hidden-desc{border-color:var(--gold-dim);background:linear-gradient(
  180deg,rgba(245,207,122,.06),transparent 60%),var(--panel)}

/* prompt 模板和 FM 文稿都是长正文，要能读 */
.raw.prompt{max-height:none;font-size:13px;line-height:1.75;white-space:pre-wrap}
.script{line-height:1.95;color:#d8d4e4}

/* 灵感/FM 的封面不是竖构图立绘，用 hero 的 520px 会空出一大片 */
.hero.short{min-height:300px}
.hero video.bg{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 30%}
.card video.cover{width:100%;display:block;object-fit:cover}
/* 视频技能：hero 不铺图，压矮一点，别空一大片 */
.hero.short.noimg{min-height:140px;background:
  linear-gradient(135deg,rgba(245,207,122,.07),transparent 70%),var(--panel)}
/* 图还在加载时 .wrap 会塌成 0 高，右上角的角标就压到标题上了。
   给个占位高度，加载完图片自己撑开。 */
.card .wrap{min-height:200px;background:#1f1f26}

/* ---- 门口那道昵称 ---- */
/* 没填昵称之前整个站都不给看，顶栏也一起藏（露着 tab 会让人以为能点） */
body.gated .topbar,body.gated main{display:none}
#gate{position:fixed;inset:0;z-index:50;display:flex;align-items:center;
  justify-content:center;padding:24px;
  background:radial-gradient(1200px 600px at 50% -10%,rgba(245,207,122,.10),transparent 60%),var(--bg)}
.gatecard{width:min(460px,100%);background:var(--panel);border:1px solid var(--line);
  border-radius:18px;padding:28px}
.gatecard h1{margin:0 0 10px;font-size:24px;letter-spacing:.5px}
.gatecard h1 span{color:var(--gold);font-size:15px;font-weight:500;margin-left:5px}
.gatecard p{margin:0 0 18px;color:var(--dim);font-size:13px;line-height:1.75}
.gatecard .err{margin-top:12px;color:#e5847a;font-size:13px}

/* 顶栏右侧的「我是谁」 */
.whoami{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:13px}
.whoami .nick{color:var(--gold)}
.whoami button{background:transparent;border:1px solid var(--line);color:var(--dim);
  border-radius:999px;padding:5px 12px;font-size:12px;cursor:pointer}
.whoami button:hover{border-color:var(--gold-dim);color:var(--gold)}

/* ---- 搜索框：显式提交（中文输入法下不能边打边搜）---- */
.search{display:flex;gap:8px;align-items:center}
.search button{background:var(--gold);color:#1a1508;border:0;border-radius:9px;
  padding:9px 16px;font-size:13px;font-weight:600;cursor:pointer}
.search button.ghost{background:transparent;border:1px solid var(--line);color:var(--dim);
  font-weight:400}
.search button.ghost:hover{border-color:var(--gold-dim);color:var(--gold)}

/* 作者名到处都能点 */
.author[data-creator]{cursor:pointer}
.author[data-creator]:hover{color:var(--gold);text-decoration:underline}
.count{margin-left:auto}

/* ---- 智能体详情里的「TA 的 FM」---- */
.fmrow{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.fmitem{display:flex;gap:10px;align-items:center;background:var(--panel-2);
  border:1px solid var(--line);border-radius:11px;padding:8px;cursor:pointer}
.fmitem:hover{border-color:var(--gold-dim)}
.fmitem img,.fmitem .ph{width:52px;height:52px;border-radius:8px;object-fit:cover;
  flex:none;background:#101014}
.fmitem b{display:block;font-size:13px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fmitem span{font-size:11px;color:var(--dim2)}
.empty.small{padding:16px 0;font-size:13px;text-align:left}