/* SEKAI ATLAS v2 — Bilibili-shaped home, Apple-shaped transitions */
:root{
  --bg:#f6f7f9;--surface:#fff;--ink:#18191c;--muted:#61666d;--muted-2:#9499a0;
  --line:#e3e5e7;--blue:#00a1d6;--blue-soft:#e5f7fd;--pink:#fb7299;--pink-soft:#fff0f5;
  --shadow:0 6px 24px rgba(24,25,28,.07);--shadow-lg:0 20px 50px rgba(24,25,28,.12);
  --r:10px;--ease:cubic-bezier(.32,.72,0,1);
  --font:"HarmonyOS Sans SC","Microsoft YaHei","PingFang SC","Noto Sans SC",sans-serif;
  --font-en:"Bahnschrift","Arial Narrow","Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:auto;min-height:100%}
body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:auto}
body.modal-open{overflow:hidden;touch-action:none}
a{color:inherit;text-decoration:none}button{font-family:inherit;color:inherit;border:0;background:none;cursor:pointer}
img{display:block;max-width:100%}::selection{background:var(--blue);color:#fff}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:#cfd3d8;border-radius:20px;border:3px solid var(--bg)}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.app{min-height:100vh;position:relative;isolation:isolate}
.ambient{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.25}
.o1{width:46vw;height:46vw;right:-16vw;top:-20vw;background:var(--unit-color,#9ee7ff);opacity:.2}
.o2{width:32vw;height:32vw;left:-10vw;top:38%;background:#ffd9e6;opacity:.2}
.o3{width:26vw;height:26vw;right:14%;bottom:-12%;background:#fff0b8;opacity:.28}

/* header */
.site-head{position:fixed;inset:0 0 auto;z-index:80;background:rgba(255,255,255,.94);backdrop-filter:blur(18px) saturate(1.3);border-bottom:1px solid var(--line)}
.head-inner{max-width:1480px;margin:0 auto;height:66px;padding:0 22px;display:flex;align-items:center;gap:22px}
.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand-mark{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(145deg,#00c2f0,#0087b8);color:#fff;font-family:var(--font-en);font-size:21px;font-weight:700;box-shadow:0 5px 14px rgba(0,161,214,.25);transform:rotate(-2deg)}
.brand-mark.small{width:30px;height:30px;font-size:16px;border-radius:9px}
.brand-text b{display:block;font-family:var(--font-en);font-size:17px;letter-spacing:.1em;line-height:1.05}
.brand-text small{display:block;font-size:9.5px;color:var(--muted-2);margin-top:3px;letter-spacing:.06em}
.main-nav{position:relative;display:flex;align-items:center;gap:2px;height:100%;overflow-x:auto;scrollbar-width:none}
.main-nav::-webkit-scrollbar{display:none}
.nav-link{position:relative;height:38px;padding:0 12px;display:inline-flex;align-items:center;border-radius:8px;font-size:14px;color:var(--muted);white-space:nowrap;transition:.2s}
.nav-link:hover{color:var(--ink);background:#f1f2f3}.nav-link.active{color:var(--blue);font-weight:600}
.nav-ink{position:absolute;left:0;bottom:4px;height:3px;width:0;border-radius:3px;background:var(--blue);transition:transform .42s var(--ease),width .42s var(--ease);pointer-events:none}
.head-tools{margin-left:auto;display:flex;align-items:center;gap:9px}
.search{display:flex;align-items:center;gap:7px;height:38px;width:252px;padding:0 10px;border:1px solid var(--line);border-radius:10px;background:#f6f7f8;transition:.2s}
.search:focus-within{background:#fff;border-color:#bfeaf7;box-shadow:0 0 0 3px rgba(0,161,214,.1)}
.search span{color:var(--muted-2);font-size:15px}.search input{width:100%;border:0;background:none;outline:none;font-size:12px;color:var(--ink)}
.search input::placeholder{color:var(--muted-2)}.search kbd{font-family:var(--font-en);font-size:8px;color:var(--muted-2);border:1px solid var(--line);border-radius:4px;padding:2px 4px;background:#fff;white-space:nowrap}
.head-btn{height:36px;padding:0 12px;border:1px solid var(--line);border-radius:9px;display:inline-flex;align-items:center;font-size:11px;color:var(--muted);background:#fff;transition:.2s;white-space:nowrap}
.head-btn:hover{color:var(--blue);border-color:#bfeaf7;background:var(--blue-soft)}
.head-avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#ffd9e6,#ffe9ad);color:#a24b62;font-family:var(--font-en);font-size:10px;font-weight:700;border:1px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.search-pop{position:absolute;right:max(22px,calc((100vw - 1480px)/2 + 22px));top:58px;width:360px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);padding:8px;display:none;max-height:420px;overflow:auto;z-index:90}
.search-pop.show{display:block;animation:pop .22s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(-5px) scale(.98)}to{opacity:1;transform:none}}
.search-hit{display:flex;align-items:center;gap:10px;padding:8px;border-radius:8px;width:100%;text-align:left}
.search-hit:hover{background:#f5f6f8}.search-hit .sh-img{width:42px;height:42px;border-radius:8px;object-fit:cover;background:#eef0f2}
.search-hit b{display:block;font-size:12px;line-height:1.4}.search-hit small{display:block;font-size:9px;color:var(--muted-2);margin-top:2px}
.search-empty{padding:18px;text-align:center;font-size:11px;color:var(--muted-2)}

/* shared */
.stage{width:100%;max-width:1480px;margin:0 auto;padding:94px 22px 40px}
.view{display:none}.view.active{display:block}
.view.view-enter{animation:viewIn .42s var(--ease) both}
.view.view-leave{display:block!important;animation:viewOut .2s ease both;pointer-events:none}
@keyframes viewIn{from{opacity:0;transform:translateY(12px) scale(.997)}to{opacity:1;transform:none}}
@keyframes viewOut{to{opacity:0;transform:translateY(-8px) scale(.998)}}
.view-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:14px 2px 18px}
.eyebrow{display:flex;align-items:center;gap:8px;font-family:var(--font-en);font-size:10px;letter-spacing:.16em;color:var(--blue);margin-bottom:8px}
.eyebrow::before{content:"";width:16px;height:2px;background:var(--blue);border-radius:2px}
.eyebrow span{color:var(--muted-2);letter-spacing:.08em}
h1.page-title{margin:0;font-size:34px;line-height:1.2;letter-spacing:-.025em;font-weight:800}
h1.page-title em{font-style:normal;color:var(--blue)}
.lede{margin:9px 0 0;max-width:760px;color:var(--muted);font-size:12.5px;line-height:1.8}
.head-side{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:none}
.chips{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.chip{display:inline-flex;align-items:center;gap:5px;height:25px;padding:0 9px;border:1px solid var(--line);border-radius:6px;background:#fff;font-size:9.5px;color:var(--muted)}
.chip b{color:var(--ink);font-weight:600}.chip.blue{border-color:#bfeaf7;background:var(--blue-soft);color:#0085b0}
.head-mark{font-family:var(--font-en);font-size:9px;letter-spacing:.12em;color:var(--muted-2);border:1px dashed #cfd3d8;border-radius:5px;padding:5px 8px;background:#fff}
.section-head{display:flex;align-items:center;gap:10px;margin:18px 0 12px}
.section-head h2{margin:0;font-size:18px;letter-spacing:-.01em}.section-head .sub{font-size:10px;color:var(--muted-2)}
.section-head .more{margin-left:auto;font-size:10.5px;color:var(--muted);display:inline-flex;gap:4px;align-items:center}
.section-head .more:hover{color:var(--blue)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 14px;border-radius:8px;border:1px solid var(--line);background:#fff;font-size:11.5px;color:var(--ink);transition:.18s;white-space:nowrap}
.btn:hover{border-color:#bfeaf7;background:var(--blue-soft);color:var(--blue);transform:translateY(-1px)}
.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 5px 14px rgba(0,161,214,.2)}
.btn.primary:hover{background:#00b5ef;border-color:#00b5ef;color:#fff}
.btn.pink{background:var(--pink);border-color:var(--pink);color:#fff}
.btn.small{height:29px;padding:0 10px;font-size:10px;border-radius:6px}
.note{font-size:10px;color:var(--muted-2);line-height:1.7}

/* home */
.home-hero{display:grid;grid-template-columns:minmax(0,1fr) 338px;gap:16px;margin-top:6px}
.carousel{position:relative;aspect-ratio:2.28/1;border-radius:12px;overflow:hidden;background:#dfe3e8;box-shadow:var(--shadow)}
.slide{position:absolute;inset:0;opacity:0;transform:scale(1.02);transition:opacity .65s var(--ease),transform 1.2s var(--ease);pointer-events:none}
.slide.active{opacity:1;transform:scale(1);pointer-events:auto}
.slide-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;transform:scale(1.02)}
.slide-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,12,20,.78),rgba(8,12,20,.33) 52%,rgba(8,12,20,.05) 78%),linear-gradient(0deg,rgba(8,12,20,.55),transparent 55%)}
.slide-body{position:absolute;left:34px;bottom:30px;right:34%;z-index:2;color:#fff}
.slide-kicker{display:inline-flex;align-items:center;gap:6px;font-size:9px;letter-spacing:.12em;font-family:var(--font-en);background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);border-radius:5px;padding:4px 7px;backdrop-filter:blur(8px)}
.slide-title{margin:10px 0 7px;font-size:clamp(22px,3vw,40px);line-height:1.12;letter-spacing:-.04em;font-weight:800;text-shadow:0 2px 18px rgba(0,0,0,.3)}
.slide-sub{font-size:11.5px;line-height:1.7;color:rgba(255,255,255,.84);max-width:500px}
.slide-actions{display:flex;gap:7px;margin-top:14px}
.slide-actions .btn{background:rgba(255,255,255,.94);border:0;color:#1b1d22;font-weight:600}
.slide-actions .btn:hover{background:#fff;color:var(--blue)}
.slide-tags{position:absolute;left:34px;top:24px;display:flex;gap:6px;z-index:2}
.slide-tags span{font-size:8.5px;color:#fff;background:rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.24);border-radius:4px;padding:3px 6px;backdrop-filter:blur(6px)}
.slide-stamp{position:absolute;right:4%;bottom:-2%;width:28%;max-width:210px;filter:drop-shadow(0 10px 24px rgba(0,0,0,.25));z-index:1}
.dots{position:absolute;right:16px;bottom:14px;display:flex;gap:6px;z-index:4}
.dot{width:7px;height:7px;border-radius:7px;background:rgba(255,255,255,.5);border:0;transition:.3s;padding:0}.dot.active{width:22px;background:#fff}
.car-arrow{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:44px;border-radius:8px;background:rgba(0,0,0,.24);color:#fff;display:grid;place-items:center;z-index:4;opacity:0;transition:.2s;backdrop-filter:blur(4px)}
.carousel:hover .car-arrow{opacity:1}.car-arrow.prev{left:10px}.car-arrow.next{right:10px}
.hero-side{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.side-head{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700}
.side-head .live{width:6px;height:6px;border-radius:50%;background:#ff5c5c;box-shadow:0 0 0 3px #ffe3e3;animation:pulse 1.8s infinite}
@keyframes pulse{50%{opacity:.45}}
.side-date{margin:4px 0 12px;font-family:var(--font-en);font-size:8.5px;letter-spacing:.1em;color:var(--muted-2)}
.now-row{display:flex;gap:8px;padding:9px 0;border-top:1px dashed var(--line)}
.now-row .n{font-family:var(--font-en);font-size:9px;color:var(--blue);width:14px;flex:none;padding-top:1px}
.now-row b{display:block;font-size:10.5px;line-height:1.4}.now-row small{display:block;font-size:8.5px;color:var(--muted-2);margin-top:2px;line-height:1.5}
.now-row .tag{margin-left:auto;font-size:8px;color:#ff6b81;flex:none}
.side-actions{margin-top:auto;display:flex;flex-direction:column;gap:6px;padding-top:12px}.side-actions .btn{width:100%}
.side-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-top:10px;border-top:1px solid var(--line);padding-top:12px}
.side-stats div{text-align:center}.side-stats b{display:block;font-family:var(--font-en);font-size:18px;color:var(--ink);line-height:1}.side-stats span{display:block;font-size:7.5px;color:var(--muted-2);margin-top:3px}
.home-cols{display:grid;grid-template-columns:minmax(0,1fr) 338px;gap:16px;margin-top:18px;align-items:start}.home-aside{min-width:0}
.feed-section{padding:2px 0 0}
.feed-tabs{display:flex;gap:16px;align-items:center;border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:12px}
.feed-tab{position:relative;font-size:14px;color:var(--muted);padding:0 0 8px;font-weight:500}.feed-tab.active{color:var(--ink);font-weight:700}
.feed-tab.active::after{content:"";position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);width:24px;height:3px;border-radius:3px;background:var(--blue)}
.feed-tab .hot{font-size:8px;color:#fff;background:var(--pink);border-radius:3px;padding:1px 3px;vertical-align:2px;margin-left:3px}
.feed-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.video-card{background:#fff;border:1px solid var(--line);border-radius:9px;overflow:hidden;transition:.28s var(--ease);cursor:pointer}
.video-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:#d5d9dd}
.vc-cover{position:relative;aspect-ratio:16/9;overflow:hidden;background:#e9ecef}
.vc-cover .vc-bg{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}.video-card:hover .vc-bg{transform:scale(1.045)}
.vc-badge{position:absolute;left:7px;top:7px;font-family:var(--font-en);font-size:8px;font-weight:700;color:#fff;background:rgba(0,0,0,.55);border-radius:4px;padding:2px 5px;backdrop-filter:blur(4px)}
.vc-dur{position:absolute;right:6px;bottom:6px;font-family:var(--font-en);font-size:8px;color:#fff;background:rgba(0,0,0,.55);border-radius:3px;padding:1px 4px}
.vc-stamp{position:absolute;right:7px;top:7px;width:54px;height:54px;object-fit:contain;filter:drop-shadow(0 3px 8px rgba(0,0,0,.25))}
.vc-body{padding:9px 10px 11px}
.vc-title{font-size:12px;line-height:1.55;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:37px}
.vc-meta{display:flex;align-items:center;gap:5px;margin-top:7px;font-size:9px;color:var(--muted-2)}
.vc-meta .dot{width:2px;height:2px;background:#c4c8cc;border-radius:50%;padding:0}
.vc-author{margin-top:5px;display:flex;align-items:center;gap:4px;font-size:9px;color:var(--muted)}
.vc-author .a-dot{width:12px;height:12px;border-radius:50%;background:linear-gradient(145deg,#b8ecff,#ffe5ef)}
.rank-panel{background:#fff;border:1px solid var(--line);border-radius:12px;padding:15px;position:sticky;top:82px}
.rank-panel h3{margin:0 0 4px;font-size:14px}.rank-panel .rp-sub{font-size:9px;color:var(--muted-2);margin-bottom:10px}
.rank-list{display:flex;flex-direction:column}
.rank-item{display:flex;align-items:center;gap:9px;padding:8px 0;border-top:1px dashed var(--line);text-align:left;width:100%}
.rank-item:hover .r-title{color:var(--blue)}.rank-num{width:18px;font-family:var(--font-en);font-size:13px;font-weight:700;color:#c9cdd2;flex:none;text-align:center}
.rank-item:nth-child(1) .rank-num{color:#ff7a45}.rank-item:nth-child(2) .rank-num{color:#ff9f43}.rank-item:nth-child(3) .rank-num{color:#ffc53d}
.r-img{width:45px;height:45px;border-radius:7px;object-fit:cover;flex:none;background:#eef0f2}
.r-copy{min-width:0}.r-title{display:block;font-size:10px;line-height:1.4;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:.2s}
.r-sub{display:block;font-size:8px;color:var(--muted-2);margin-top:2px}
.latest-mini{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:8px}
.latest-mini button{text-align:left;border-radius:7px;overflow:hidden;background:#f6f7f9;border:1px solid var(--line)}
.latest-mini img{width:100%;aspect-ratio:16/10;object-fit:cover}.latest-mini span{display:block;padding:5px 6px;font-size:8px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.unit-strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-top:18px}
.unit-tile{position:relative;border-radius:10px;overflow:hidden;min-height:84px;padding:12px;background:var(--u-bg,#eef5ff);border:1px solid var(--line);text-align:left;transition:.25s var(--ease)}
.unit-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.unit-tile b{display:block;font-family:var(--font-en);font-size:10px;letter-spacing:.03em;line-height:1.25;color:var(--u-ink,#1c2330)}
.unit-tile small{display:block;font-size:8px;color:var(--muted);margin-top:4px}
.unit-tile .u-stamp{position:absolute;right:-8px;bottom:-10px;width:64px;opacity:.95;filter:drop-shadow(0 3px 8px rgba(0,0,0,.12))}
.full-banner{position:relative;overflow:hidden;border-radius:12px;margin-top:16px;padding:22px 26px;background:linear-gradient(110deg,#10233f,#1d4d72 50%,#1c8ca2);color:#fff;display:flex;align-items:center;gap:18px;box-shadow:var(--shadow)}
.full-banner .fb-copy{position:relative;z-index:1}.full-banner h3{margin:0 0 5px;font-size:22px;letter-spacing:-.02em}
.full-banner p{margin:0;font-size:10.5px;line-height:1.7;color:rgba(255,255,255,.75);max-width:620px}
.full-banner .btn{margin-left:auto;position:relative;z-index:1;background:#fff;color:#123}
.full-banner::after{content:"";position:absolute;right:-50px;top:-80px;width:260px;height:260px;border:1px solid rgba(255,255,255,.25);border-radius:50%;box-shadow:0 0 0 30px rgba(255,255,255,.04),0 0 0 60px rgba(255,255,255,.03)}

/* characters */
.unit-tabs{display:flex;gap:7px;flex-wrap:wrap;margin:4px 0 14px}
.unit-tab{height:32px;padding:0 11px;border-radius:7px;border:1px solid var(--line);background:#fff;font-size:10.5px;color:var(--muted);display:inline-flex;align-items:center;gap:6px;transition:.2s}
.unit-tab i{width:6px;height:6px;border-radius:2px;background:var(--u,#999)}
.unit-tab:hover{border-color:#cfd3d8;color:var(--ink)}.unit-tab.active{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:600}
.char-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.char-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;cursor:pointer;transition:.3s var(--ease)}
.char-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:#d1d5da}
.cc-cover{position:relative;aspect-ratio:16/8.6;overflow:hidden;background:#e9edf1}
.cc-cover img.cc-bg{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}.char-card:hover .cc-bg{transform:scale(1.04)}
.cc-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(8,12,18,.62))}
.cc-stamp{position:absolute;left:12px;bottom:-6px;width:88px;height:78px;object-fit:contain;z-index:2;filter:drop-shadow(0 5px 12px rgba(0,0,0,.28))}
.cc-unit{position:absolute;right:9px;top:9px;z-index:2;font-family:var(--font-en);font-size:7.5px;letter-spacing:.06em;color:#fff;background:rgba(0,0,0,.42);border-radius:4px;padding:3px 5px;backdrop-filter:blur(4px)}
.cc-body{padding:12px 13px 13px;position:relative}
.cc-name{font-size:16px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.cc-sub{font-family:var(--font-en);font-size:8px;letter-spacing:.1em;color:var(--muted-2);margin-top:4px}
.cc-meta{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:10px;padding-top:9px;border-top:1px dashed var(--line);font-size:8.5px;color:var(--muted)}
.cc-meta .go{color:var(--blue);font-family:var(--font-en);font-size:11px;opacity:.7}.char-card:hover .go{opacity:1}

/* cards */
.card-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;background:linear-gradient(110deg,#e9f9ff,#fff5f8 55%,#fff9e8);border:1px solid var(--line);border-radius:12px;padding:18px 22px;margin-bottom:14px}
.card-hero h2{margin:0;font-size:22px;letter-spacing:-.03em}.card-hero p{margin:5px 0 0;font-size:10.5px;color:var(--muted);line-height:1.7}
.card-stats{display:flex;gap:20px;flex:none}.card-stats div{text-align:right}
.card-stats b{display:block;font-family:var(--font-en);font-size:24px;line-height:1;color:var(--ink)}.card-stats span{display:block;font-size:8px;color:var(--muted-2);margin-top:3px}
.filter-panel{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:14px;position:sticky;top:72px;z-index:20;box-shadow:0 3px 12px rgba(24,25,28,.04)}
.filter-line{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:5px 0}.filter-line + .filter-line{border-top:1px dashed var(--line);margin-top:4px;padding-top:9px}
.filter-label{font-size:9px;color:var(--muted-2);width:52px;flex:none}
.chip-btn{height:26px;padding:0 8px;border-radius:5px;border:1px solid var(--line);background:#fff;font-size:9px;color:var(--muted);transition:.16s;display:inline-flex;align-items:center;gap:4px}
.chip-btn:hover{color:var(--ink);border-color:#cfd3d8}.chip-btn.active{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600}
.chip-btn.active.rarity-4{background:#ffb400;border-color:#ffb400;color:#5a3b00}.chip-btn.active.rarity-3{background:#f0b35a;border-color:#f0b35a;color:#4a2e00}
.chip-btn.active.rarity-2{background:#c9a4e8;border-color:#c9a4e8;color:#3c1e58}.chip-btn.active.rarity-BD{background:#ff8fb2;border-color:#ff8fb2;color:#5a1730}
.mini-search{display:flex;align-items:center;gap:5px;height:28px;width:210px;border:1px solid var(--line);border-radius:6px;background:#f7f8f9;padding:0 8px;margin-left:auto}
.mini-search input{border:0;background:none;outline:none;width:100%;font-size:9.5px}
.toggle-pill{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden}.toggle-pill button{padding:0 9px;height:27px;font-size:9px;color:var(--muted);background:#fff}.toggle-pill button.active{background:var(--ink);color:#fff}
.card-count{font-size:9px;color:var(--muted-2);margin-left:4px}
.card-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.card-tile{content-visibility:auto;contain-intrinsic-size:280px 360px;background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;cursor:pointer;transition:.22s var(--ease)}
.card-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:#d1d5da}
.ct-cover{position:relative;aspect-ratio:16/9.4;background:#e9edf1;overflow:hidden}
.ct-cover img{width:100%;height:100%;object-fit:cover;transition:transform .45s var(--ease)}.card-tile:hover .ct-cover img{transform:scale(1.04)}
.ct-rarity{position:absolute;left:6px;top:6px;font-family:var(--font-en);font-size:8px;font-weight:700;color:#fff;border-radius:4px;padding:2px 5px;background:rgba(0,0,0,.54);backdrop-filter:blur(4px)}
.ct-rarity.r4{background:#ffb400;color:#523300}.ct-rarity.r3{background:#e4a447;color:#4a2d00}.ct-rarity.r2{background:#b88ad8;color:#fff}.ct-rarity.r1{background:#9aa3ad;color:#fff}.ct-rarity.rBD{background:#ff7fa5;color:#fff}
.ct-attr{position:absolute;right:6px;top:6px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:9px;color:#fff;background:rgba(0,0,0,.4);backdrop-filter:blur(4px)}
.ct-body{padding:8px 9px 9px}
.ct-title{font-size:10px;line-height:1.45;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:29px}
.ct-char{display:flex;align-items:center;gap:4px;margin-top:5px;font-size:8px;color:var(--muted)}
.ct-char img{width:16px;height:16px;border-radius:50%;object-fit:cover;object-position:50% 78%;background:#f0f2f4}
.ct-skill{margin-top:5px;padding-top:5px;border-top:1px dashed var(--line);display:flex;align-items:center;gap:4px;font-size:7.5px;color:var(--muted-2)}
.ct-skill b{font-weight:500;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ct-skill span{margin-left:auto;color:var(--blue);background:var(--blue-soft);border-radius:3px;padding:1px 3px;white-space:nowrap}
.card-page-info{font-family:var(--font-en);font-size:8px;color:var(--muted-2);min-width:42px;text-align:center}.load-more button:disabled{opacity:.4;cursor:default}.load-more{display:flex;justify-content:center;margin:20px 0 4px}
.card-empty{padding:50px;text-align:center;color:var(--muted-2);border:1px dashed var(--line);border-radius:10px;background:#fff}

/* relations */
.rel-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.rel-toggle{height:30px;padding:0 10px;border:1px solid var(--line);border-radius:6px;background:#fff;font-size:9.5px;color:var(--muted);display:inline-flex;align-items:center;gap:5px}
.rel-toggle:hover{border-color:#cfd3d8;color:var(--ink)}.rel-toggle.on{background:var(--blue);border-color:var(--blue);color:#fff}
.legend{display:flex;gap:9px;flex-wrap:wrap;margin-left:auto;font-size:8px;color:var(--muted-2)}
.legend i{display:inline-block;width:12px;height:2px;background:var(--lg);vertical-align:2px;margin-right:3px}
.rel-types{display:flex;gap:5px;overflow-x:auto;margin:-2px 0 10px;padding-bottom:2px;scrollbar-width:none}.rel-types::-webkit-scrollbar{display:none}
.rel-type{height:25px;padding:0 9px;border:1px solid var(--line);border-radius:5px;background:#fff;font-size:8.5px;color:var(--muted);white-space:nowrap;flex:none}
.rel-type:hover{border-color:#cfd3d8;color:var(--ink)}.rel-type.active{background:var(--ink);border-color:var(--ink);color:#fff}
.rel-edge.cross{stroke-dasharray:5 4;stroke-opacity:.9}.rel-edge.friend{stroke-dasharray:2 3}.rel-edge.type-hidden{opacity:0;pointer-events:none}
@media (max-width:760px){.rel-toolbar{flex-wrap:wrap}.legend{width:100%;margin-left:0}}
.rel-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:14px;align-items:start}
.rel-canvas{position:relative;aspect-ratio:1200/780;min-height:520px;border:1px solid var(--line);border-radius:12px;background:radial-gradient(500px 400px at 50% 50%,#f0f9fd,transparent 70%),radial-gradient(#d8dde2 1px,transparent 1px) 0 0/26px 26px,#fff;overflow:hidden}
.rel-canvas::before{content:"CONSTELLATION / 26 NODES";position:absolute;left:14px;top:11px;font-family:var(--font-en);font-size:7.5px;letter-spacing:.16em;color:var(--muted-2)}
.rel-canvas::after{content:"点击小人展开关系";position:absolute;right:14px;bottom:10px;font-size:8px;color:var(--muted-2)}
.rel-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.rel-edge{stroke:var(--edge,#d9dde2);stroke-width:1.3;fill:none;stroke-opacity:.7;transition:.25s}
.rel-edge.family{stroke-dasharray:3 3}.rel-edge.sekai{stroke-dasharray:2 4}
.rel-edge.hot{stroke:#00a1d6!important;stroke-opacity:1;stroke-width:2.5;stroke-dasharray:6 4;animation:dash 1s linear infinite}
@keyframes dash{to{stroke-dashoffset:-20}}
.rel-node{position:absolute;width:60px;transform:translate(-50%,-50%);z-index:3;text-align:center;transition:.3s var(--ease)}
.rn-img{width:54px;height:54px;border-radius:50%;overflow:hidden;background:#fff;border:2px solid #fff;box-shadow:0 3px 12px rgba(24,25,28,.16);margin:0 auto;position:relative}
.rn-img img{width:100%;height:100%;object-fit:cover;object-position:50% 74%;transform:scale(1.5);transform-origin:50% 70%}
.rn-name{display:block;margin-top:3px;font-size:8px;line-height:1.2;color:var(--muted);white-space:nowrap;background:rgba(255,255,255,.78);border-radius:3px;padding:1px 2px}
.rel-node:hover{z-index:9}.rel-node:hover .rn-img{transform:scale(1.08);border-color:var(--blue)}
.rel-node.is-active .rn-img{border-color:var(--blue);box-shadow:0 0 0 4px rgba(0,161,214,.15),0 7px 18px rgba(0,161,214,.22)}
.rel-node.is-active .rn-name{color:var(--blue);font-weight:700}
.rel-canvas.has-focus .rel-node:not(.is-active):not(.is-related){opacity:.25}
.rel-canvas.direct-only .rel-node:not(.is-active):not(.is-related){opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.8)}
.rel-cluster{position:absolute;z-index:1;pointer-events:none;transform:translate(-50%,-50%);text-align:center;opacity:.7}
.rel-cluster b{display:block;font-family:var(--font-en);font-size:7.5px;letter-spacing:.12em;color:var(--cg);white-space:nowrap}
.rel-cluster span{display:block;width:28px;height:1px;background:var(--cg);opacity:.35;margin:4px auto 0}
.rel-panel{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;min-height:380px;position:sticky;top:82px}
.rp-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:340px;text-align:center;color:var(--muted)}
.rp-empty .big{font-family:var(--font-en);font-size:36px;color:#bfeaf7}.rp-empty b{font-size:12px;color:var(--ink);margin:8px 0 4px}
.rp-empty p{font-size:9.5px;line-height:1.7;max-width:210px;margin:0}
.rp-head{display:flex;align-items:center;gap:10px;padding-bottom:10px;border-bottom:1px dashed var(--line)}
.rp-head .rn-img{width:50px;height:50px;flex:none;margin:0}.rp-head h3{margin:0;font-size:16px}.rp-head p{margin:2px 0 0;font-size:8px;color:var(--muted-2)}
.rp-close{margin-left:auto;width:24px;height:24px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--muted);font-size:12px}
.rp-quote{font-size:10.5px;line-height:1.7;color:var(--muted);border-left:2px solid var(--blue);padding-left:8px;margin:11px 0}
.rp-list{display:flex;flex-direction:column;gap:3px;max-height:380px;overflow:auto}
.rp-item{display:flex;align-items:center;gap:7px;padding:6px;border-radius:6px;text-align:left;width:100%;border:1px solid transparent}
.rp-item:hover{background:#f6f7f9;border-color:var(--line)}.rp-item .rn-img{width:28px;height:28px;flex:none;margin:0}
.rp-item b{display:block;font-size:9.5px}.rp-item small{display:block;font-size:8px;color:var(--muted-2);margin-top:1px;line-height:1.35}
.rp-item .rt{margin-left:auto;font-size:7px;color:var(--muted-2);background:#f4f5f7;border-radius:3px;padding:2px 4px;white-space:nowrap}
.rp-add{font-size:8px;color:var(--muted-2);line-height:1.6;margin-top:9px;border-top:1px dashed var(--line);padding-top:8px}

/* profiles */
.profile-shell{display:grid;grid-template-columns:236px minmax(0,1fr);gap:14px;align-items:start}
.profile-index{background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px;position:sticky;top:82px;max-height:calc(100vh - 104px);overflow:auto}
.p-group{margin-bottom:5px}.p-head{display:flex;align-items:center;gap:5px;padding:5px 7px 3px;font-family:var(--font-en);font-size:7.5px;letter-spacing:.08em;color:var(--muted-2)}
.p-head i{width:5px;height:5px;border-radius:50%;background:var(--u)}
.p-btn{display:flex;align-items:center;gap:7px;width:100%;padding:4px 6px;border-radius:6px;text-align:left;transition:.15s}
.p-btn img{width:34px;height:34px;border-radius:50%;object-fit:cover;object-position:50% 74%;transform:scale(1.1);background:#f1f3f5}
.p-btn b{display:block;font-size:9.5px;line-height:1.2}.p-btn small{display:block;font-size:7.5px;color:var(--muted-2);margin-top:2px}
.p-btn:hover{background:#f6f7f9}.p-btn.active{background:var(--blue-soft);box-shadow:inset 2px 0 0 var(--blue)}
.profile-sheet{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 28px;min-height:620px;position:relative;overflow:hidden}
.profile-sheet::before{content:attr(data-no);position:absolute;right:18px;top:-22px;font-family:var(--font-en);font-size:130px;font-weight:700;color:#f1f3f5;line-height:1;pointer-events:none}
.ps-top{display:flex;gap:24px;align-items:flex-start;position:relative;z-index:1}
.ps-stamp{width:190px;flex:none;position:relative}.ps-stamp img{width:100%;object-fit:contain;filter:drop-shadow(0 12px 18px rgba(24,25,28,.12))}
.ps-stamp .ps-bday{position:absolute;left:50%;bottom:-1px;transform:translateX(-50%);font-size:8px;white-space:nowrap;background:var(--p1);color:#fff;padding:4px 8px;border-radius:5px;font-weight:600;box-shadow:0 3px 8px rgba(0,0,0,.12)}
.ps-main{flex:1;min-width:0;padding-top:7px}
.ps-kicker{display:flex;align-items:center;gap:6px;font-family:var(--font-en);font-size:8.5px;letter-spacing:.13em;color:var(--muted-2);margin-bottom:7px}
.ps-kicker i{width:6px;height:6px;border-radius:50%;background:var(--p1)}
.ps-main h2{margin:0;font-size:36px;line-height:1.1;letter-spacing:-.04em}.ps-en{margin:6px 0 0;font-family:var(--font-en);font-size:9px;letter-spacing:.15em;color:var(--muted-2)}
.ps-quote{margin:15px 0 0;font-size:14px;line-height:1.65;font-weight:600;color:#2a2c31;max-width:520px}
.ps-quote::before{content:"“";color:var(--p1);font-family:Georgia,serif;font-size:24px;line-height:0;vertical-align:-6px;margin-right:2px}
.ps-role{display:flex;gap:5px;flex-wrap:wrap;margin-top:12px}
.ps-role span{font-size:8px;border:1px solid var(--line);border-radius:4px;padding:3px 6px;color:var(--muted)}
.ps-role span:first-child{background:var(--p1);border-color:var(--p1);color:#fff;font-weight:600}
.ps-line{height:1px;background:var(--line);margin:20px 0 14px;position:relative}
.ps-line::before{content:"✦";position:absolute;left:0;top:-7px;background:#fff;padding-right:6px;color:var(--p2);font-size:9px}
.ps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.ps-cell{border:1px solid var(--line);border-radius:6px;padding:8px 9px;background:#fbfcfd}
.ps-cell span{display:block;font-size:7px;color:var(--muted-2);letter-spacing:.05em;margin-bottom:3px}.ps-cell b{display:block;font-size:9.5px;line-height:1.4;font-weight:600}
.ps-body{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;margin-top:17px}
.ps-copy h3,.ps-aside h3{margin:0 0 6px;font-family:var(--font-en);font-size:8.5px;letter-spacing:.12em;color:var(--muted-2)}
.ps-copy p{margin:0 0 12px;font-size:11px;line-height:1.9;color:var(--muted)}.ps-copy p b{color:var(--ink)}
.ps-arc{border-left:2px solid var(--p1);padding:1px 0 1px 10px;margin:4px 0 14px}
.ps-arc b{display:block;font-size:8px;color:var(--p2);margin-bottom:3px}.ps-arc p{margin:0;font-size:10.5px}
.ps-food{display:grid;gap:6px}
.food-card{display:flex;align-items:flex-start;gap:7px;border:1px solid var(--line);border-radius:6px;padding:7px 9px;background:#fbfcfd}
.food-card .fi{font-size:13px;line-height:1.2;width:16px;text-align:center;color:var(--p1)}
.food-card span{display:block;font-size:7px;color:var(--muted-2);margin-bottom:2px}.food-card b{display:block;font-size:9px;line-height:1.4;font-weight:600}
.ps-links{display:flex;flex-direction:column;gap:5px;margin-top:8px}.ps-links .btn{justify-content:flex-start}
.ps-rel{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.rel-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 6px;border:1px solid var(--line);border-radius:5px;background:#fff;font-size:8.5px;color:var(--muted)}
.rel-chip img{width:18px;height:18px;border-radius:50%;object-fit:cover;object-position:50% 74%}.rel-chip:hover{border-color:#bfeaf7;color:var(--blue)}

/* fanworks */
.fan-intro{display:flex;align-items:center;gap:12px;justify-content:space-between;margin-bottom:12px}
.fan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.fan-card{position:relative;aspect-ratio:4/4.7;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#e9edf1;cursor:pointer;transition:.3s var(--ease)}
.fan-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.fan-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}.fan-card:hover .fan-bg{transform:scale(1.04)}
.fan-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,12,18,.18),rgba(8,12,18,.04) 35%,rgba(8,12,18,.78))}
.fan-stamp{position:absolute;right:8px;bottom:62px;width:46%;object-fit:contain;filter:drop-shadow(0 8px 18px rgba(0,0,0,.32));transition:transform .4s var(--ease)}
.fan-card:hover .fan-stamp{transform:translateY(-4px) rotate(-1deg)}
.fan-copy{position:absolute;left:15px;right:15px;bottom:14px;color:#fff;z-index:2}
.fan-copy .f-kicker{font-family:var(--font-en);font-size:7.5px;letter-spacing:.14em;color:rgba(255,255,255,.65)}
.fan-copy h3{margin:4px 0 3px;font-size:17px;letter-spacing:-.02em}.fan-copy p{margin:0;font-size:9.5px;line-height:1.55;color:rgba(255,255,255,.8)}
.fan-no{position:absolute;left:14px;top:12px;font-family:var(--font-en);font-size:8px;letter-spacing:.12em;color:rgba(255,255,255,.8);background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.2);padding:3px 6px;border-radius:4px;backdrop-filter:blur(4px)}
.fan-actions{position:absolute;right:10px;top:10px;display:flex;gap:5px;opacity:0;transition:.2s;z-index:3}
.fan-card:hover .fan-actions{opacity:1}.fan-actions button{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.9);display:grid;place-items:center;font-size:12px;box-shadow:0 3px 8px rgba(0,0,0,.2)}
.sticker-panel{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;margin-top:18px}
.sticker-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:9px}
.sticker-item{border:1px solid var(--line);border-radius:8px;background:#fbfcfd;padding:6px;text-align:center;transition:.2s}
.sticker-item:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.sticker-item img{width:100%;border-radius:6px;background:#f3f5f7}
.sticker-item b{display:block;font-size:9px;margin:5px 0 1px}.sticker-item small{display:block;font-size:7px;color:var(--muted-2)}.sticker-item a{display:inline-block;margin-top:3px;font-size:7px;color:var(--blue)}
.fan-bottom{display:grid;grid-template-columns:1.2fr .8fr;gap:14px;margin-top:18px}
.bili-box{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px}
.bili-box h3{margin:0 0 3px;font-size:14px}.bili-box .sub{font-size:9px;color:var(--muted-2);margin-bottom:10px}
.bili-list{display:flex;flex-direction:column;gap:5px}
.bili-item{display:flex;gap:8px;align-items:flex-start;padding:7px;border-radius:6px;border:1px solid transparent}
.bili-item:hover{background:#f7f8f9;border-color:var(--line)}
.b-ico{width:22px;height:22px;border-radius:5px;background:#fb7299;color:#fff;display:grid;place-items:center;font-family:var(--font-en);font-size:8px;flex:none}
.bili-item b{display:block;font-size:9.5px;line-height:1.4}.bili-item small{display:block;font-size:7.5px;color:var(--muted-2);margin-top:2px}
.notice{font-size:9px;line-height:1.75;color:var(--muted-2);border-top:1px dashed var(--line);padding-top:10px;margin-top:10px}

/* wallpapers */
.wall-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.wall-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;gap:14px;align-items:center;transition:.25s var(--ease)}
.wall-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.phone{position:relative;width:118px;flex:none;aspect-ratio:9/19.5;border-radius:19px;border:4px solid #22262c;background:#0d0f12;overflow:hidden;box-shadow:0 12px 22px rgba(24,25,28,.18),inset 0 0 0 1px rgba(255,255,255,.14)}
.phone::before{content:"";position:absolute;left:50%;top:5px;transform:translateX(-50%);width:32px;height:6px;border-radius:5px;background:#0d0f12;z-index:5;border:1px solid rgba(255,255,255,.08)}
.phone-screen{position:absolute;inset:0;overflow:hidden;background:#18202a}
.phone-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phone-screen::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,10,16,.2),rgba(6,10,16,.05) 35%,rgba(6,10,16,.78))}
.phone-stamp{position:absolute;left:50%;bottom:18%;transform:translateX(-50%);width:70%;z-index:2;filter:drop-shadow(0 5px 12px rgba(0,0,0,.4))}
.phone-text{position:absolute;left:10px;right:10px;bottom:12px;z-index:3;color:#fff}
.phone-text b{display:block;font-family:var(--font-en);font-size:9px;letter-spacing:.08em;line-height:1.2}.phone-text span{display:block;font-size:6.5px;color:rgba(255,255,255,.72);margin-top:3px}
.wall-info{min-width:0;flex:1}.wall-info .w-no{font-family:var(--font-en);font-size:8px;color:var(--muted-2);letter-spacing:.1em}
.wall-info h3{margin:3px 0 2px;font-size:15px;line-height:1.2}.wall-info p{margin:0 0 8px;font-size:9px;line-height:1.6;color:var(--muted)}
.wall-info .w-tags{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:8px}.wall-info .w-tag{font-size:7px;border:1px solid var(--line);border-radius:3px;padding:2px 4px;color:var(--muted-2)}
.wall-info .btn{width:max-content}
.wall-note{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:14px}
.wall-note div{border:1px solid var(--line);border-radius:8px;padding:10px;background:#fff}
.wall-note b{display:block;font-size:9px;margin-bottom:3px}.wall-note span{font-size:8px;line-height:1.6;color:var(--muted)}
.studio{display:grid;grid-template-columns:.85fr 1.15fr;gap:16px;margin-top:20px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;align-items:center}
.studio-form h3{margin:0 0 3px;font-size:16px}.studio-form .sub{font-size:9px;color:var(--muted-2);margin-bottom:12px}
.field{margin-bottom:9px}.field label{display:block;font-size:7.5px;color:var(--muted-2);letter-spacing:.06em;margin-bottom:4px}
.field select,.field input{width:100%;height:36px;border:1px solid var(--line);border-radius:6px;background:#fbfcfd;color:var(--ink);padding:0 9px;font-family:var(--font);font-size:10px;outline:none}
.field select:focus,.field input:focus{border-color:#bfeaf7;box-shadow:0 0 0 3px rgba(0,161,214,.08)}
.studio-actions{display:flex;gap:6px;margin-top:10px}.studio-preview{display:flex;justify-content:center}
.studio-preview .phone{width:auto;height:410px;border-width:5px}.studio-preview canvas{width:100%;height:100%;object-fit:cover}

/* modal */
.modal-root{position:fixed;inset:0;z-index:120;display:none;padding:14px}
.modal-root.open{display:flex;align-items:center;justify-content:center}
.modal-bg{position:absolute;inset:0;background:rgba(18,20,24,.5);backdrop-filter:blur(8px);animation:fade .25s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal-card{position:relative;width:min(1040px,100%);max-height:calc(100svh - 28px);overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;background:linear-gradient(150deg,#fff,color-mix(in srgb,var(--u2,#e5f7fd) 18%,#fff));border-top:4px solid var(--u,#00a1d6);border-radius:14px;box-shadow:0 30px 90px rgba(0,0,0,.3);animation:modalIn .34s var(--ease) both}
@keyframes modalIn{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
.modal-root.closing{pointer-events:none}
.modal-root.closing .modal-bg{animation:fadeOut .22s ease forwards}
.modal-root.closing .modal-card{animation:modalOut .23s var(--ease) forwards}
@keyframes fadeOut{to{opacity:0}}
@keyframes modalOut{to{opacity:0;transform:translateY(8px) scale(.985)}}
.modal-close{position:absolute;right:12px;top:12px;z-index:5;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.9);border:1px solid var(--line);display:grid;place-items:center;font-size:15px}
.modal-close:hover{background:#fff;color:var(--blue)}
.modal-grid{display:grid;grid-template-columns:1.05fr .95fr;min-height:0}
.modal-art{position:relative;background:#10141b;min-height:340px;overflow:hidden;display:grid;place-items:center}
.modal-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;min-height:0;display:block}
.modal-art .ma-stamp{position:absolute;right:10px;bottom:10px;width:150px;height:auto;object-fit:contain;filter:drop-shadow(0 6px 16px rgba(0,0,0,.45));min-height:0}
.modal-art .ma-badge{position:absolute;left:12px;top:12px;font-family:var(--font-en);font-size:9px;font-weight:700;background:rgba(0,0,0,.5);color:#fff;border-radius:4px;padding:3px 6px;backdrop-filter:blur(4px)}
.modal-info{padding:28px 28px 24px}
.modal-kicker{font-family:var(--font-en);font-size:8px;letter-spacing:.14em;color:var(--muted-2);margin-bottom:5px}
.modal-info h2{margin:0;font-size:26px;line-height:1.2;letter-spacing:-.03em}.modal-info .m-en{font-family:var(--font-en);font-size:8px;letter-spacing:.12em;color:var(--muted-2);margin-top:4px}
.modal-quote{margin:12px 0;font-size:12px;line-height:1.7;color:var(--muted);border-left:2px solid var(--blue);padding-left:9px}
.modal-tags{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:12px}.modal-tags span{font-size:7.5px;border:1px solid var(--line);border-radius:3px;padding:2px 5px;color:var(--muted)}
.modal-skill{background:#f7f9fa;border:1px solid var(--line);border-radius:8px;padding:10px}
.modal-skill span{display:block;font-size:7px;color:var(--muted-2);letter-spacing:.08em;margin-bottom:3px}.modal-skill b{display:block;font-size:11px;line-height:1.45}.modal-skill small{display:block;font-size:8.5px;color:var(--muted);margin-top:3px}
.modal-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.card-toggle{display:flex;gap:4px;position:absolute;left:12px;bottom:12px;z-index:4;background:rgba(8,10,14,.4);padding:3px;border-radius:6px;backdrop-filter:blur(5px)}
.card-toggle button{height:24px;padding:0 8px;border-radius:4px;font-size:8px;color:#fff;opacity:.7}.card-toggle button.active{background:#fff;color:#111;opacity:1;font-weight:600}
.modal-bio{font-size:10.5px;line-height:1.85;color:var(--muted);margin:0 0 12px}
.modal-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:12px}
.m-cell{border:1px solid var(--line);border-radius:5px;padding:7px 8px;background:#fbfcfd}.m-cell span{display:block;font-size:7px;color:var(--muted-2);margin-bottom:2px}.m-cell b{font-size:9px;line-height:1.4;font-weight:600}

/* footer */
.site-foot{border-top:1px solid var(--line);background:#fff;margin-top:36px}
.foot-inner{max-width:1480px;margin:0 auto;padding:24px 22px 30px}
.foot-brand{display:flex;align-items:center;gap:7px;font-size:9px;color:var(--muted-2)}.foot-brand b{font-family:var(--font-en);font-size:12px;letter-spacing:.1em;color:var(--ink)}
.foot-links{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px}.foot-links a{font-size:8.5px;color:var(--muted);border-bottom:1px solid transparent}.foot-links a:hover{color:var(--blue);border-color:#bfeaf7}
.foot-note{font-size:8px;line-height:1.7;color:var(--muted-2);margin:12px 0 0;max-width:1100px}
.to-top{position:fixed;right:18px;bottom:22px;z-index:70;width:38px;height:38px;border-radius:50%;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);display:grid;place-items:center;font-size:15px;color:var(--muted);opacity:0;pointer-events:none;transition:.25s}
.to-top.show{opacity:1;pointer-events:auto}.to-top:hover{color:var(--blue);transform:translateY(-2px)}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(12px);z-index:200;background:#18191c;color:#fff;font-size:10px;padding:8px 12px;border-radius:6px;opacity:0;pointer-events:none;transition:.25s;box-shadow:0 8px 22px rgba(0,0,0,.22)}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}}

/* sticker library + editor */
#view-fanworks.active{display:flex;flex-direction:column}
#view-fanworks .view-head{order:1}
#view-fanworks .sticker-panel{order:2;margin-top:4px}
#view-fanworks .fan-intro{order:3;margin-top:18px}
#view-fanworks .fan-grid{order:4}
#view-fanworks .fan-bottom{order:5}
#stickerPanel{display:flex;flex-direction:column}
#stickerPanel .section-head{order:1}
#stickerPanel .stamp-editor{order:2}
#stickerPanel .stamp-toolbar{order:3}
#stickerPanel .stamp-gallery{order:4}
#stickerPanel .stamp-more{order:5}
.stamp-char-tabs .chip-btn{flex:none;white-space:nowrap}
.stamp-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0 12px}
.stamp-char-tabs{display:flex;gap:4px;overflow-x:auto;max-width:100%;padding-bottom:3px;scrollbar-width:thin;flex:1}
.stamp-char-tabs::-webkit-scrollbar{height:4px}
.stamp-search{display:flex;align-items:center;gap:5px;height:30px;width:220px;border:1px solid var(--line);border-radius:6px;background:#f7f8f9;padding:0 8px;flex:none}
.stamp-search input{border:0;background:none;outline:none;width:100%;font-size:9.5px}
.stamp-gallery{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px}
.stamp-card{content-visibility:auto;contain-intrinsic-size:160px 210px;border:1px solid var(--line);border-radius:8px;background:#fbfcfd;overflow:hidden;transition:.2s var(--ease)}
.stamp-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#cfd3d8}
.stamp-pick{display:block;width:100%;aspect-ratio:1/1;background:#fff;padding:5px;border-bottom:1px solid var(--line)}
.stamp-pick img{width:100%;height:100%;object-fit:contain;transition:transform .3s var(--ease)}
.stamp-card:hover .stamp-pick img{transform:scale(1.04)}
.stamp-meta{padding:6px 7px 4px;min-width:0}
.stamp-meta b{display:block;font-size:8.5px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stamp-meta small{display:block;font-size:7.5px;line-height:1.35;color:var(--muted-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.stamp-actions{display:flex;gap:3px;padding:0 6px 6px}
.stamp-actions button{flex:1;height:23px;border:1px solid var(--line);border-radius:4px;background:#fff;font-size:7.5px;color:var(--muted)}
.stamp-actions button:hover{color:var(--blue);border-color:#bfeaf7;background:var(--blue-soft)}
.stamp-actions button:last-child{color:var(--blue);border-color:#bfeaf7}
.stamp-more{display:flex;align-items:center;gap:10px;justify-content:center;margin:12px 0 4px}
.stamp-more span{font-size:8.5px;color:var(--muted-2)}
.stamp-editor{display:grid;grid-template-columns:300px minmax(0,1fr);gap:20px;margin-top:16px;padding:18px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(145deg,#f4fbff,#fff8fb 65%,#fffdf2)}
.editor-preview{display:flex;flex-direction:column;align-items:center;justify-content:center}
.preview-stage{position:relative;width:280px;height:280px;border-radius:12px;border:1px solid var(--line);background:repeating-conic-gradient(#f1f3f5 0 25%,#fff 0 50%) 0 0/18px 18px;box-shadow:0 8px 24px rgba(24,25,28,.1);overflow:hidden}.editor-preview canvas{position:absolute;inset:0;width:100%;height:100%;border-radius:11px}.editor-preview #stickerEraseCanvas{pointer-events:none;z-index:2;cursor:crosshair}.editor-preview #stickerEraseCanvas.on{background:rgba(0,161,214,.03)}.erase-tools{display:flex;align-items:center;gap:6px;margin-top:7px;flex-wrap:wrap;justify-content:center}.erase-tools label{display:flex;align-items:center;gap:4px;font-size:7.5px;color:var(--muted-2)}.erase-tools input[type=range]{width:62px;accent-color:var(--blue)}
.editor-hint{font-size:7.5px;color:var(--muted-2);margin-top:7px;text-align:center}
.editor-controls{min-width:0}
.editor-title{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.editor-title h3{margin:0;font-size:16px}
.editor-title span{font-size:8.5px;color:var(--muted-2);border:1px solid var(--line);border-radius:4px;padding:3px 6px;background:#fff;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.editor-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ed-field{display:flex;flex-direction:column;gap:4px;font-size:7.5px;color:var(--muted-2)}
.ed-field.ed-wide{grid-column:span 2}
.ed-field input[type=text],.ed-field input:not([type]),.ed-field select{width:100%;height:32px;border:1px solid var(--line);border-radius:5px;background:#fff;color:var(--ink);padding:0 8px;font-family:var(--font);font-size:10px;outline:none}
.ed-field select:focus,.ed-field input:focus{border-color:#bfeaf7}
.ed-field input[type=range]{width:100%;accent-color:var(--blue);height:18px}
.ed-check{display:flex;align-items:center;gap:5px;font-size:8.5px;color:var(--muted);height:32px;padding-top:14px}
.ed-check input{accent-color:var(--blue)}
.editor-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.editor-status{font-size:8.5px;line-height:1.6;color:var(--muted);margin-top:9px;padding:7px 9px;border:1px dashed var(--line);border-radius:5px;background:rgba(255,255,255,.6);min-height:30px}
@media (max-width:1120px){.stamp-gallery{grid-template-columns:repeat(5,1fr)}.stamp-editor{grid-template-columns:260px minmax(0,1fr)}.editor-preview canvas{width:240px;height:240px}}
@media (max-width:980px){.stamp-gallery{grid-template-columns:repeat(4,1fr)}.stamp-editor{grid-template-columns:1fr}.editor-preview canvas{width:min(300px,80vw);height:min(300px,80vw)}}
@media (max-width:760px){.stamp-gallery{grid-template-columns:repeat(3,1fr)}.stamp-search{width:100%}.editor-grid{grid-template-columns:1fr 1fr}.ed-field.ed-wide{grid-column:span 2}.stamp-editor{padding:12px}.editor-preview canvas{width:min(250px,75vw);height:min(250px,75vw)}}
@media (max-width:430px){.stamp-gallery{grid-template-columns:repeat(2,1fr)}}
/* CN / JP server board */
.server-board{background:#fff;border:1px solid var(--line);border-radius:12px;padding:15px 16px;margin-bottom:14px}
.server-board-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:10px}
.server-board-head h2{margin:0;font-size:19px;letter-spacing:-.02em}
.server-board-head .note{font-size:8px;color:var(--muted-2)}
.server-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.server-panel{border:1px solid var(--line);border-radius:9px;padding:11px;background:linear-gradient(160deg,#fbfdff,#fff)}
.server-panel.cn{border-top:3px solid #e23d3d}
.server-panel.jp{border-top:3px solid var(--blue)}
.server-panel-head{display:flex;align-items:center;gap:7px;padding-bottom:8px;border-bottom:1px dashed var(--line)}
.s-flag{width:32px;height:22px;border-radius:4px;display:grid;place-items:center;font-family:var(--font-en);font-size:9px;font-weight:700;color:#fff;background:#e23d3d;flex:none}
.server-panel.jp .s-flag{background:var(--blue)}
.server-panel-head b{display:block;font-size:11px;line-height:1.2}
.server-panel-head small{display:block;font-size:7.5px;color:var(--muted-2);margin-top:2px}
.s-live{margin-left:auto;font-family:var(--font-en);font-size:7px;color:#e23d3d;background:#fff0f0;border-radius:3px;padding:2px 4px}
.server-panel.jp .s-live{color:var(--blue);background:var(--blue-soft)}
.s-block{margin-top:8px}
.s-block-title{display:flex;align-items:center;gap:6px;font-size:8px;color:var(--muted-2);letter-spacing:.08em;margin-bottom:4px}
.s-block-title span{font-family:var(--font-en);color:var(--ink);font-weight:600;letter-spacing:.04em}
.s-block-title i{height:1px;flex:1;background:var(--line)}
.s-item{border:1px solid var(--line);border-radius:6px;padding:7px 8px;background:#fff;margin-bottom:5px}
.s-item-top{display:flex;align-items:flex-start;gap:6px}
.s-item-top b{font-size:9.5px;line-height:1.4;flex:1}
.s-status{font-size:7px;white-space:nowrap;color:#0a8f65;background:#e9fbf3;border-radius:3px;padding:2px 4px}
.s-status.off{color:#999;background:#f1f2f4}
.s-period{font-family:var(--font-en);font-size:7.5px;color:var(--muted-2);margin-top:3px}
.s-item p{font-size:8px;line-height:1.6;color:var(--muted);margin:5px 0 0}
.s-cards{display:flex;flex-wrap:wrap;gap:3px;margin-top:5px}
.s-cards span{font-size:7px;border:1px solid var(--line);border-radius:3px;padding:2px 4px;color:var(--muted);background:#fbfcfd}
.s-source{display:inline-block;margin-top:3px;font-size:7.5px;color:var(--blue)}
.s-source:hover{text-decoration:underline}
@media (max-width:760px){.server-grid{grid-template-columns:1fr}.server-board-head{display:block}.server-board-head .note{display:block;margin-top:4px}}@media (max-width:1280px){.feed-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.card-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.char-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.sticker-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:1120px){.home-hero{grid-template-columns:1fr}.hero-side{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}.hero-side .side-actions{grid-column:1/-1;flex-direction:row}.home-cols{grid-template-columns:1fr}.rank-panel{position:static}.rank-list{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}.card-stats{gap:12px}.filter-panel{position:static}}
@media (max-width:980px){.head-inner{gap:12px;padding:0 14px}.head-btn{display:none}.search{width:190px}.stage{padding:88px 14px 34px}.feed-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.char-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.unit-strip{grid-template-columns:repeat(3,1fr)}.rel-layout{grid-template-columns:1fr}.rel-panel{position:static}.profile-shell{grid-template-columns:1fr}.profile-index{position:static;max-height:none;display:flex;gap:3px;overflow-x:auto;padding:5px}.p-group{display:flex;gap:2px;margin:0}.p-head{display:none}.p-btn{width:auto;flex:none}.p-btn b,.p-btn small{display:none}.profile-sheet{padding:20px}.fan-grid{grid-template-columns:repeat(2,1fr)}.wall-grid{grid-template-columns:repeat(2,1fr)}.studio{grid-template-columns:1fr}.card-stats{display:none}.card-hero{padding:14px 16px}}
@media (max-width:760px){
  .head-inner{height:58px;flex-wrap:nowrap}.brand-text small{display:none}.brand-text b{font-size:14px}
  .main-nav{position:fixed;top:58px;left:0;right:0;height:40px;background:#fff;border-bottom:1px solid var(--line);padding:0 10px;gap:0;z-index:79}.nav-link{height:40px;padding:0 10px;font-size:12px}.nav-ink{bottom:0;height:2px}
  .head-tools{margin-left:auto}.search{display:none}.head-avatar{width:32px;height:32px}
  .stage{padding:110px 12px 30px}.view-head{display:block;padding:6px 2px 12px}h1.page-title{font-size:26px}.head-side{align-items:flex-start;margin-top:8px}.chips{justify-content:flex-start}
  .home-hero{gap:10px}.carousel{aspect-ratio:1.5/1;border-radius:9px}.slide-body{left:16px;right:30%;bottom:18px}.slide-title{font-size:21px}.slide-sub{font-size:9px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.slide-stamp{width:30%;right:2%;bottom:0}.slide-tags{left:16px;top:14px}.slide-actions .btn{height:30px;font-size:10px;padding:0 9px}
  .hero-side{display:block}.hero-side .side-actions{flex-direction:row}.side-actions .btn{flex:1}
  .feed-grid{grid-template-columns:1fr 1fr;gap:9px}.vc-body{padding:7px 8px}.vc-title{font-size:10.5px;min-height:30px}.vc-stamp{width:40px;height:40px}
  .unit-strip{grid-template-columns:repeat(2,1fr)}.full-banner{padding:16px;display:block}.full-banner h3{font-size:18px}.full-banner .btn{margin:12px 0 0}.rank-list{grid-template-columns:1fr}
  .card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.filter-label{width:auto}.mini-search{width:100%;margin-left:0;order:9}.char-grid{gap:9px}
  .cc-stamp{width:66px;height:58px}.cc-name{font-size:14px}.cc-meta{font-size:7.5px}
  .rel-canvas{min-height:430px;aspect-ratio:auto}.rel-node{width:44px}.rn-img{width:42px;height:42px}.rn-name{font-size:6.5px}
  .ps-top{display:block;text-align:center}.ps-stamp{width:150px;margin:0 auto}.ps-main{padding-top:8px}.ps-main h2{font-size:28px}.ps-quote{font-size:12px}.ps-grid{grid-template-columns:1fr 1fr}.ps-body{grid-template-columns:1fr}.ps-role{justify-content:center}
  .fan-grid{gap:8px}.fan-card{aspect-ratio:4/5.2}.fan-stamp{width:54%;right:2%}.fan-copy h3{font-size:14px}.fan-copy p{font-size:8px}.sticker-grid{grid-template-columns:repeat(2,1fr)}.fan-bottom{grid-template-columns:1fr}
  .wall-grid{grid-template-columns:1fr}.wall-card{flex-direction:row}.phone{width:104px}.wall-note{grid-template-columns:1fr}
  .modal-grid{grid-template-columns:1fr}.modal-art{min-height:220px}.modal-art img{min-height:220px}.modal-info{padding:20px}.card-toggle{left:8px;bottom:8px}
}
@media (max-width:430px){.feed-grid{grid-template-columns:1fr}.card-grid{grid-template-columns:1fr 1fr}.char-grid{grid-template-columns:1fr 1fr}.cc-name{font-size:13px}.cc-stamp{width:58px;height:52px;left:8px}.vc-stamp{width:34px;height:34px}.slide-title{font-size:18px}.slide-sub{display:none}.brand-text b{font-size:12px}.stage{padding-left:10px;padding-right:10px}.wall-card{flex-direction:column}.wall-card .phone{width:100%;max-width:190px}.wall-info{text-align:center;align-items:center}.wall-info .w-tags{justify-content:center}.wall-info .btn{margin:0 auto}.studio-preview .phone{height:360px}}













/* modal: mobile portrait / landscape stability */
@media (max-width:900px){
  .modal-root{padding:8px}
  .modal-card{width:100%;max-height:calc(100svh - 16px)}
  .modal-grid{grid-template-columns:1fr}
  .modal-art{height:min(50svh,380px);min-height:0}
  .modal-info{padding:16px}
}
@media (orientation:landscape) and (max-height:620px) and (max-width:1100px){
  .modal-root{padding:5px}
  .modal-card{width:min(1000px,100%);max-height:calc(100svh - 10px);overflow:hidden;border-radius:10px}
  .modal-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);height:calc(100svh - 18px);max-height:calc(100svh - 18px)}
  .modal-art{height:100%;min-height:0}
  .modal-info{padding:13px 16px;overflow:auto;max-height:100%;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  .modal-info h2{font-size:20px}
  .modal-quote{margin:8px 0;font-size:11px}
  .modal-close{width:26px;height:26px;right:8px;top:8px}
  .modal-art .ma-stamp{width:112px}
}