:root{--bg:#f4f5f7;--card:#fff;--ink:#16181d;--mute:#6a707c;--acc:#e6322e;--line:#e3e5ea;--top:#fff;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0f1115;--card:#181b22;--ink:#eef0f4;--mute:#98a0ae;--line:#2a2e38;--top:#14171d}}
:root[data-theme="dark"]{--bg:#0f1115;--card:#181b22;--ink:#eef0f4;--mute:#98a0ae;--line:#2a2e38;--top:#14171d}
*{box-sizing:border-box}html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Helvetica,Arial,system-ui,sans-serif;line-height:1.45}
a{color:inherit;text-decoration:none}
.top{background:var(--top);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.bar{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:16px;padding:12px 16px}
.logo{font-weight:900;font-size:24px;letter-spacing:-1px;cursor:pointer;white-space:nowrap}
.logo b{background:var(--acc);color:#fff;padding:1px 8px;border-radius:6px;margin-left:2px}
.search{flex:1;max-width:420px;margin-left:auto}
.search input{width:100%;padding:9px 14px;border-radius:99px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:inherit}
.menu{max-width:1200px;margin:0 auto;display:flex;gap:4px;overflow-x:auto;padding:0 12px}
.menu button{border:0;background:none;color:var(--mute);font:inherit;font-weight:700;padding:10px 14px;cursor:pointer;border-bottom:3px solid transparent;white-space:nowrap}
.menu button.on{color:var(--ink);border-color:var(--acc)}
main{max-width:1200px;margin:0 auto;padding:20px 16px 40px}
.sec{font-size:20px;font-weight:800;margin:28px 0 14px;display:flex;align-items:center;gap:10px}
.sec:before{content:"";width:5px;height:22px;background:var(--acc);border-radius:3px}
.hero{display:grid;grid-template-columns:2fr 1fr;gap:16px}
@media(max-width:760px){.hero{grid-template-columns:1fr}}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.grid.stk{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
.grid.short{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.media{background:#0a0a0a;display:flex;justify-content:center}
.media img,.media video{display:block;width:100%;max-height:440px;object-fit:contain}
.big .media img,.big .media video{max-height:520px}
.short .media video{aspect-ratio:9/16;max-height:none;object-fit:cover}
.stk .card{padding:10px;text-align:center}.stk .media{background:none}.stk .media img{max-height:120px}
.info{padding:12px 14px}
.tag{display:inline-block;background:var(--acc);color:#fff;font-size:11px;font-weight:800;text-transform:uppercase;padding:2px 8px;border-radius:4px;letter-spacing:.5px}
.ttl{font-weight:800;margin:6px 0 2px}.dt{color:var(--mute);font-size:12px}
.side .card{margin-bottom:12px}
.empty{text-align:center;color:var(--mute);padding:60px 10px}
footer{background:var(--top);border-top:1px solid var(--line);margin-top:20px}
.fcols{max-width:1200px;margin:0 auto;padding:28px 16px;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:20px;font-size:14px;color:var(--mute)}
@media(max-width:700px){.fcols{grid-template-columns:1fr 1fr}}
.fcols h4{color:var(--ink);margin:0 0 8px}.fcols div span,.fcols a{display:block;margin:5px 0}
.fcols a{cursor:pointer}.fcols a:hover{color:var(--acc)}
.copy{text-align:center;padding:12px;border-top:1px solid var(--line);font-size:13px;color:var(--mute)}
.page{max-width:760px;margin:0 auto;padding:24px 16px 40px;background:var(--card);border:1px solid var(--line);border-radius:12px;margin-top:20px}
.page h2{margin-top:0}.page h3{margin-top:22px}
.back{border:0;background:none;color:var(--acc);font:inherit;font-weight:700;cursor:pointer;padding:0 0 10px}
.pbadge{display:none;float:right;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);background:var(--bg);color:var(--mute);font-weight:800;cursor:pointer;font-size:13px}
.pbadge.show{display:block}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:20;padding:16px}
.modal[hidden]{display:none}
.box{background:var(--card);border-radius:14px;padding:24px;width:100%;max-width:360px}
.box h3{margin:0 0 4px}
input.f,select.f{width:100%;padding:10px;margin:6px 0 12px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:inherit}
.btn{background:var(--acc);color:#fff;border:0;padding:10px 18px;border-radius:10px;font:inherit;font-weight:700;cursor:pointer}
.btn.g{background:#666}.btn.s{padding:4px 10px;font-size:12px}
.msg{font-size:14px;color:var(--mute);min-height:20px}
.admin{border-top:3px solid var(--acc);margin-top:24px;padding-top:16px}
.row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
textarea.f{width:100%;padding:10px;margin:6px 0 12px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:inherit;resize:vertical}
.act{display:flex;gap:8px;padding:0 14px 12px}
.ab{border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:99px;padding:5px 12px;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.ab.on{color:var(--acc);border-color:var(--acc)}
.stk .act{justify-content:center;padding:0 0 4px}
.cm{border-bottom:1px solid var(--line);padding:8px 0;font-size:14px}.cm .btn{margin-top:4px}
.pv{display:flex;align-items:center;gap:10px;flex:1;min-width:0;font-size:14px}
.pvm{width:110px;height:80px;object-fit:cover;border-radius:8px;background:#000;flex:none;cursor:zoom-in}
.pvm.big{position:fixed;inset:5%;width:90%;height:90%;object-fit:contain;z-index:30;cursor:zoom-out;box-shadow:0 0 0 100vmax rgba(0,0,0,.75)}
.row.tr .pv{opacity:.55}
.chk{display:block;margin:4px 0 12px;font-size:14px}
:root{--glass:rgba(255,255,255,.42);--gb:rgba(255,255,255,.7);--sh:0 8px 32px rgba(31,38,135,.16);--g1:#ffb3c1;--g2:#b8a4ff;--g3:#8fdcff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--glass:rgba(34,36,56,.45);--gb:rgba(255,255,255,.16);--sh:0 8px 32px rgba(0,0,0,.45);--g1:#6a2c91;--g2:#1f3d99;--g3:#0c7385}}
:root[data-theme="dark"]{--glass:rgba(34,36,56,.45);--gb:rgba(255,255,255,.16);--sh:0 8px 32px rgba(0,0,0,.45);--g1:#6a2c91;--g2:#1f3d99;--g3:#0c7385}
body{background:radial-gradient(circle at 12% 8%,var(--g1),transparent 45%),radial-gradient(circle at 88% 18%,var(--g3),transparent 45%),radial-gradient(circle at 50% 95%,var(--g2),transparent 55%),var(--bg);background-attachment:fixed}
.top,footer,.card,.page,.box,.panel,.ab{background:var(--glass);-webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);border:1px solid var(--gb);box-shadow:var(--sh)}
.top{border-top:0;border-left:0;border-right:0;border-radius:0 0 20px 20px}
footer{border-bottom:0;border-radius:24px 24px 0 0}
.card,.page,.box{border-radius:20px}
.card{transition:transform .2s,box-shadow .2s}.card:hover{transform:translateY(-4px)}
.card .media{border-radius:20px 20px 0 0}.stk .card .media{border-radius:0}
.modal{background:rgba(10,10,30,.35);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.box{-webkit-backdrop-filter:blur(28px) saturate(180%);backdrop-filter:blur(28px) saturate(180%);background:var(--glass)}
.menu button.on{background:var(--glass);border-radius:12px 12px 0 0}
input.f,select.f,textarea.f,.search input{background:var(--glass);border:1px solid var(--gb);color:var(--ink);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.search input{border-radius:99px}
.btn{background:linear-gradient(135deg,var(--acc),#ff7a59);box-shadow:0 4px 14px rgba(230,50,46,.3)}
.btn.g{background:rgba(110,115,140,.6)}
.pbadge{background:var(--glass);border:1px solid var(--gb)}
.row,.cm,.copy,.fcols{border-color:var(--gb)}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#222;color:#fff;padding:10px 18px;border-radius:99px;z-index:60;font-size:14px;max-width:90%}.toast[hidden]{display:none}

/* ---- bento grid ---- */
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:190px;gap:14px;grid-auto-flow:dense}
.bento .w2{grid-column:span 2}.bento .h2{grid-row:span 2}
@media(max-width:900px){.bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:170px}}
.t{display:flex;flex-direction:column;padding:0;min-height:0}
.t .media{flex:1;min-height:0;display:block;border-radius:20px 20px 0 0}
.t .media img,.t .media video{width:100%;height:100%;max-height:none;object-fit:cover;display:block}
.t.stk .media{background:none}.t.stk .media img{object-fit:contain;padding:8px}
.t .foot{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:6px 10px;flex:none}
.t .ft{display:flex;align-items:center;gap:6px;min-width:0}
.t .ft .ttl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;margin:0}
.t .act{padding:0;flex:none}.t .ab{padding:3px 9px;font-size:12px}
.tile{border-radius:20px;padding:18px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;min-height:0}
.tile.intro{background:var(--glass);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid var(--gb);box-shadow:var(--sh);justify-content:center}
.tile h2{margin:0;font-size:clamp(24px,4vw,40px);letter-spacing:-1.5px}
.tile h3{margin:0;font-size:20px}
.tile .tsub{margin:6px 0 0;opacity:.85}
.tile.intro .tsub{color:var(--mute)}
.tile.cat{cursor:pointer;color:#fff;box-shadow:var(--sh);transition:transform .2s}.tile.cat:hover{transform:translateY(-4px)}
.c-photo{background:linear-gradient(135deg,#ff6a88,#ff99ac)}
.c-video{background:linear-gradient(135deg,#6a5cff,#8fa1ff)}
.c-short{background:linear-gradient(135deg,#00b3a4,#5be0c9)}
.c-sticker{background:linear-gradient(135deg,#ff9a3c,#ffcf5c)}
.c-idea{background:linear-gradient(135deg,#222,#555)}

[hidden]{display:none!important}
.page label{display:block;margin-top:6px;font-size:14px}
.qr{width:240px;max-width:100%;display:block;margin:12px auto;border-radius:12px;background:#fff;padding:8px}
.upirow{display:flex;gap:10px;align-items:center;justify-content:center;margin-top:8px}

/* ---- bento panels and pages ---- */
.pgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}
.ptile{background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--gb);border-radius:20px;padding:16px;box-shadow:var(--sh);min-width:0}
.ptile.full,.ptile.w2{grid-column:1/-1}
.ptile h2{margin:0 0 4px}.ptile h4{margin:0 0 10px;font-size:16px}
.tinfo{color:#fff;border:0;display:flex;flex-direction:column;justify-content:flex-end;min-height:160px}
.tinfo h3{margin:0 0 6px;font-size:22px}.tinfo p{margin:0;opacity:.9}
.c-hire{background:linear-gradient(135deg,#11998e,#38ef7d)}
.c-donate{background:linear-gradient(135deg,#f857a6,#ff5858)}
#policy .page,#terms .page{max-width:1000px}
.page.wide{max-width:960px}
.fcols>div{background:var(--glass);border:1px solid var(--gb);border-radius:20px;padding:16px}
@media(max-width:800px){.pgrid{grid-template-columns:1fr}}

.menu button.don{color:var(--acc)}

.profile{display:flex;align-items:center;gap:14px}
.avatar{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--acc),#ff9a62);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px;flex:none}
.ptx b{font-size:18px}

.hist{margin:-4px 0 8px;padding:8px 12px;border-radius:12px;background:var(--glass);border:1px solid var(--gb)}