:root{--bg:#2B0F54;--a:#E21B3C;--b:#1368CE;--c:#FFA602;--d:#26890C;--on-bg:#fff;--on-bg-soft:rgba(255,255,255,.74);--panel:rgba(255,255,255,.1);--display:'Fredoka',sans-serif}
html{background:var(--bg)}
body{background:var(--bg);color:var(--on-bg);font-family:'Instrument Sans',system-ui,'Microsoft YaHei','PingFang SC',sans-serif;padding-bottom:calc(150px + env(safe-area-inset-bottom))}
header{padding:28px 16px 18px;max-width:1100px;margin:auto}
#logo{max-height:64px;max-width:60%;margin-bottom:14px}
h1{font-family:var(--display);font-size:clamp(30px,8vw,52px);line-height:1.05;margin:0 0 8px;font-weight:700}
header p{margin:0;color:var(--on-bg-soft);font-size:16px;line-height:1.45;max-width:60ch}
#grid{columns:2;column-gap:8px;padding:0 8px;max-width:1100px;margin:auto}
@media(min-width:720px){#grid{columns:3}}@media(min-width:1040px){#grid{columns:4}}
.ph{display:block;width:100%;padding:0;border:0;background:var(--panel);margin:0 0 8px;break-inside:avoid;border-radius:12px;overflow:hidden;position:relative}
.ph img{width:100%;height:auto}
.ph em{position:absolute;left:8px;top:8px;font-style:normal;font-size:12px;font-weight:600;background:var(--c);color:#1b1226;padding:3px 8px;border-radius:99px}
#empty{text-align:center;padding:48px 24px;color:var(--on-bg-soft);font-size:17px;line-height:1.5}
#react{position:fixed;left:0;right:0;bottom:0;background:var(--bg);box-shadow:0 -8px 24px rgba(0,0,0,.28);padding:8px 12px calc(10px + env(safe-area-inset-bottom));text-align:center}
#react .reactHint{display:block;font-size:12.5px;color:var(--on-bg-soft);padding-bottom:6px}
#react div{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;max-width:560px;margin:auto}
#react div button .aniEmoji{width:38px;height:38px;--s:38px;display:block;margin:auto;pointer-events:none;object-fit:contain;font-size:28px;line-height:38px;text-align:center}
.fly{position:fixed;width:48px;height:48px;--s:48px;z-index:50;pointer-events:none;will-change:transform,opacity}
.fly .aniEmoji{display:block;width:100%;height:100%;object-fit:contain;font-size:36px;line-height:48px;text-align:center}
#react div button{border:0;border-radius:12px;padding:0;height:54px;box-shadow:0 4px 0 rgba(0,0,0,.28);transition:transform .08s}
#react div button:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.28)}
#react div button:nth-child(1){background:var(--a)}#react div button:nth-child(2){background:var(--b)}#react div button:nth-child(3){background:var(--c)}#react div button:nth-child(4){background:var(--d)}#react div button:nth-child(5){background:var(--a)}#react div button:nth-child(6){background:var(--b)}
dialog{border:0;padding:0;color:inherit}
#box{width:100vw;height:100dvh;max-width:none;max-height:none;background:#000;color:#fff;margin:0}
#box[open]{display:flex;flex-direction:column}
.boxTop{display:flex;justify-content:flex-end;padding:calc(8px + env(safe-area-inset-top)) 8px 4px}
.boxTop button{width:48px;height:48px;border:0;background:rgba(255,255,255,.14);border-radius:50%;font-size:18px;color:#fff}
.boxImg{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center}
#big{max-width:100%;max-height:100%;object-fit:contain}
#prev,#next{position:absolute;top:50%;translate:0 -50%;width:48px;height:72px;font-size:34px;border:0;color:#fff;background:rgba(0,0,0,.35)}
#prev{left:0;border-radius:0 12px 12px 0}#next{right:0;border-radius:12px 0 0 12px}
.boxBtns{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px 12px calc(14px + env(safe-area-inset-bottom));max-width:620px;width:100%;margin:auto}
.boxBtns button{height:54px;border:0;border-radius:12px;font-weight:700;font-size:16px;color:#fff;background:rgba(255,255,255,.17)}
#ig{background:linear-gradient(100deg,#f58529,#dd2a7b 55%,#8134af)}
#sheet{width:min(92vw,460px);border-radius:18px;background:#fff;color:#1b1226;padding:22px;margin:auto}
#sheet::backdrop,#box::backdrop{background:rgba(0,0,0,.6)}
#sheet h2{font-family:var(--display);margin:0 0 10px;font-size:24px}
#sheet ol{padding-left:20px;margin:0 0 12px;line-height:1.5}
#capText{background:#f1eef6;border-radius:10px;padding:12px;margin:0 0 14px;white-space:pre-wrap;font-size:14px;line-height:1.45;overflow-wrap:anywhere}
.sheetBtns{display:grid;gap:8px}
.sheetBtns>*{display:block;text-align:center;text-decoration:none;font-weight:700;border-radius:10px;padding:14px;border:0;background:#ece8f2;color:#1b1226;font-size:15px}
#openIg{background:linear-gradient(100deg,#f58529,#dd2a7b 55%,#8134af);color:#fff}
#toast{position:fixed;left:50%;bottom:calc(92px + env(safe-area-inset-bottom));translate:-50% 0;background:#fff;color:#1b1226;padding:12px 18px;border-radius:12px;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.35);z-index:99;width:max-content;max-width:90vw;text-align:center}

#meBtn{display:flex;align-items:center;gap:8px;border:0;background:none;padding:0 0 6px;margin:0 auto;max-width:100%;color:inherit;box-shadow:none;height:auto;width:auto}
#react div{clear:both}
#meImg{width:30px;height:30px;border-radius:50%;object-fit:cover;background:#fff;border:2px solid #fff;flex:none}
#meName{font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#meBtn em{font-style:normal;font-size:12px;text-decoration:underline;color:var(--on-bg-soft)}
#prof{width:min(94vw,480px);max-height:92dvh;overflow:auto;border-radius:18px;background:#fff;color:#1b1226;padding:20px;margin:auto}
#prof::backdrop{background:rgba(0,0,0,.65)}
#prof h2{font-family:var(--display);font-size:25px;margin:0 0 4px}
.profNote{margin:0 0 14px;font-size:13.5px;color:#5a4f66;line-height:1.4}
.profTop{display:flex;gap:14px;align-items:center;margin-bottom:12px}
#profImg{width:76px;height:76px;border-radius:50%;object-fit:cover;flex:none;border:3px solid #1b1226;background:#eee}
.profTop label{flex:1;min-width:0;font-weight:600;font-size:14px;display:grid;gap:6px}
#profName{width:100%;font:inherit;font-size:16px;padding:12px;border:1.5px solid #c9c2d2;border-radius:10px;color:inherit;background:#fff}
.profBtns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pBtn{display:grid;place-items:center;min-height:46px;border-radius:10px;background:#ece8f2;font-weight:700;font-size:14px;cursor:pointer;text-align:center;padding:4px}
#profStatus{min-height:18px;margin:6px 0 0;font-size:13px;color:#5a4f66}
.profPick{font-weight:600;font-size:14px;margin:6px 0 8px}
#profGrid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-bottom:14px}
#profGrid button{padding:0;border:3px solid transparent;border-radius:50%;background:none;aspect-ratio:1;overflow:hidden}
#profGrid button.on{border-color:#1b1226}
#profGrid img{width:100%;height:100%;border-radius:50%;object-fit:cover}
#profSave{width:100%;min-height:50px;border:0;border-radius:12px;background:var(--a);color:#fff;font-weight:700;font-size:16px}