:root{
  --bg:#0d0d11; --panel:#17171e; --line:#26262f; --text:#ececf2; --dim:#9595a4;
  --accent:#8fd6b0; --warn:#e0a35a;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--text);
  font-family:"Microsoft YaHei UI","PingFang SC",system-ui,sans-serif;
  display:flex; flex-direction:column; min-height:100%;
}
a{color:inherit;text-decoration:none}
header{
  display:flex; align-items:center; gap:14px; padding:12px 20px;
  background:var(--panel); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:5;
}
.brand{font-weight:700; letter-spacing:.5px}
.brand span{color:var(--dim); font-weight:400; font-size:13px}
#search{
  margin-left:auto; width:220px; max-width:40vw; padding:8px 12px;
  border-radius:9px; border:1px solid var(--line); background:#101016;
  color:var(--text); outline:none;
}
#search:focus{border-color:var(--accent)}
.adminLink{font-size:13px; color:var(--dim)}
.adminLink:hover{color:var(--accent)}
main{flex:1; display:flex; flex-direction:column; min-height:0}
#home{flex:1; overflow:auto}
#heroView{flex:1; display:flex; flex-direction:column; min-height:0}

/* home */
.grid{
  display:grid; gap:14px; padding:20px;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
}
.card{
  position:relative; background:var(--panel); border:1px solid var(--line); border-radius:12px;
  overflow:hidden; display:flex; flex-direction:column; transition:.15s;
}
.card:hover{transform:translateY(-2px); border-color:#3a3a48}
.card .cover{
  aspect-ratio:3/4; background:#101016; display:flex; align-items:center; justify-content:center;
  color:#4a4a58; font-size:32px; overflow:hidden;
}
.card .cover img{width:100%; height:100%; object-fit:cover; display:block}
.card .cover svg.person{width:42%; height:42%; fill:#2f2f3a}
.card .name{
  position:absolute; left:0; right:0; bottom:0; padding:26px 10px 8px;
  background:linear-gradient(transparent, rgba(0,0,0,.88));
  font-size:13px; display:flex; justify-content:space-between; gap:6px; align-items:flex-end;
}
.card .name b{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.card .name span{color:#c9c9d4; font-size:11px; flex:0 0 auto}

/* hero */
.heroHead{display:flex; align-items:center; gap:12px; padding:14px 20px 4px}
.heroHead h2{margin:0; font-size:20px}
.back{font-size:20px; color:var(--dim); padding:2px 8px}
.back:hover{color:var(--accent)}
.dim{color:var(--dim); font-size:12px}
.skinBar{
  display:flex; align-items:center; gap:12px; padding:10px 20px 14px;
  background:#121218; border-top:1px solid var(--line); min-height:0;
}
.skinBarTitle{font-size:12px; color:var(--dim); flex:0 0 auto}
.skins{display:flex; gap:10px; overflow-x:auto; padding:2px; flex:1; scrollbar-width:thin}
.skin{
  flex:0 0 auto; width:92px; border-radius:10px; overflow:hidden; padding:0;
  border:2px solid transparent; background:#0c0c10; cursor:pointer; position:relative;
  font:inherit; color:inherit; text-align:left;
}
.skin img{width:92px; height:115px; object-fit:cover; display:block}
.skin .ph{width:92px; height:115px; display:flex; align-items:center; justify-content:center; color:#3a3a48; font-size:24px}
.skin .sn{
  position:absolute; left:0; right:0; bottom:0; padding:16px 6px 5px; font-size:11px;
  background:linear-gradient(transparent, rgba(0,0,0,.85));
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.skin.on{border-color:var(--accent)}
.skin:hover{border-color:#4a4a58}
.skin.on:hover{border-color:var(--accent)}

.viewerWrap{
  flex:1; position:relative; min-height:0; margin:0 20px 20px;
  background:#0a0a0e; border:1px solid var(--line); border-radius:14px; overflow:hidden;
}
#cv{width:100%; height:100%; display:block; cursor:grab; touch-action:none}
#cv.drag{cursor:grabbing}
.tools{
  position:absolute; left:50%; bottom:12px; transform:translateX(-50%);
  display:flex; align-items:center; gap:10px; padding:7px 12px;
  background:rgba(16,16,22,.82); border:1px solid var(--line); border-radius:99px;
  font-size:12px; color:var(--dim); backdrop-filter:blur(6px); white-space:nowrap;
}
.tools input[type=range]{width:100px; accent-color:var(--accent); vertical-align:middle}
.toolBtn{
  background:#1e1e27; color:var(--text); border:1px solid var(--line);
  border-radius:99px; padding:6px 12px; font-size:12px; cursor:pointer;
}
.toolBtn:hover{border-color:#3a3a48}
.toolBtn.on{border-color:var(--accent); color:var(--accent)}

.empty{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--dim); font-size:14px; pointer-events:none;
}
.empty[hidden]{display:none !important}
.empty a{color:var(--accent); pointer-events:auto}

@media (max-width:640px){
  header{padding:10px 12px; gap:8px}
  #search{width:130px}
  .grid{padding:12px; gap:10px; grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
  .heroHead{padding:10px 12px 0}
  .skinBar{padding:8px 12px 10px; gap:8px}
  .skin, .skin img, .skin .ph{width:74px}
  .skin img, .skin .ph{height:94px}
  .viewerWrap{margin:0 8px 8px}
  .tools{gap:6px; padding:6px 8px}
  .tools input[type=range]{width:60px}
}