:root{--bg0:#050510;--bg1:#0a0a1f;--p1:#7c3aed;--p2:#22d3ee;--p3:#a78bfa;--txt:rgba(255,255,255,.92);--muted:rgba(255,255,255,.68);--glass:rgba(255,255,255,.08);--stroke:rgba(255,255,255,.16);--shadow:0 18px 60px rgba(0,0,0,.45);--radius:20px;--radius2:26px;--blur:18px}
*{box-sizing:border-box}html,body{height:100%}body{margin:0;color:var(--txt);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;background:radial-gradient(1200px 800px at 15% 10%, rgba(124,58,237,.35), transparent 55%),radial-gradient(900px 700px at 85% 20%, rgba(34,211,238,.28), transparent 60%),radial-gradient(900px 700px at 40% 90%, rgba(167,139,250,.18), transparent 60%),linear-gradient(180deg,var(--bg0),var(--bg1));overflow-x:hidden}
.aura{position:fixed;inset:-30vmax;z-index:-1;background:radial-gradient(closest-side, rgba(124,58,237,.25), transparent 55%),radial-gradient(closest-side, rgba(34,211,238,.18), transparent 55%),radial-gradient(closest-side, rgba(167,139,250,.16), transparent 60%);filter:blur(40px);animation:drift 16s ease-in-out infinite alternate;pointer-events:none;opacity:.8}
@keyframes drift{0%{transform:translate(-2%,-1%) scale(1)}50%{transform:translate(2%,1%) scale(1.03)}100%{transform:translate(1%,-2%) scale(1.06)}}
.wrap{max-width:1100px;margin:0 auto;padding:28px 18px 64px}
header{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;border-radius:var(--radius2);background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));border:1px solid var(--stroke);backdrop-filter:blur(var(--blur));box-shadow:var(--shadow);position:sticky;top:12px;z-index:50}
.brand{display:flex;align-items:center;gap:12px;min-width:0}.logo{width:40px;height:40px;border-radius:14px;background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.25), transparent 45%),linear-gradient(135deg, rgba(124,58,237,.95), rgba(34,211,238,.75));
  background-image: url("/assets/logo.jpg");
  background-position: 50% 12%;
  background-size: cover;
  background-repeat: no-repeat;border:1px solid rgba(255,255,255,.22);box-shadow:0 10px 26px rgba(124,58,237,.22);position:relative;overflow:hidden}.logo:after{content:"";position:absolute;inset:-40%;background:conic-gradient(from 180deg, transparent, rgba(255,255,255,.22), transparent);animation:spin 2.6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.title{display:flex;flex-direction:column;gap:2px;min-width:0}.title b{font-size:15px;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.title span{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
nav{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}.pill{padding:10px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);backdrop-filter:blur(var(--blur));color:rgba(255,255,255,.86);font-size:13px;cursor:pointer;transition:transform .18s ease,background .18s ease,border-color .18s ease;text-decoration:none;display:inline-flex;align-items:center;user-select:none}
.pill:hover{transform:translateY(-1px);background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.26)}
.card{border-radius:var(--radius2);background:linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(var(--blur));box-shadow:var(--shadow);overflow:hidden}
.pop{animation:pop .55s cubic-bezier(.2,.9,.25,1) both}@keyframes pop{from{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}
.btn{box-shadow:0 10px 30px rgba(0,0,0,.35);border:0;padding:12px 14px;border-radius:16px;color:#071018;font-weight:700;cursor:pointer;background:linear-gradient(135deg, rgba(34,211,238,1), rgba(124,58,237,1));box-shadow:0 16px 38px rgba(124,58,237,.26);transition:transform .16s ease,filter .16s ease;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}.btn:hover{transform:translateY(-1px);filter:brightness(1.03)}.btn:active{transform:translateY(1px) scale(.99)}
.btnGhost{padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.86);cursor:pointer;font-weight:650;transition:transform .16s ease,background .16s ease;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}.btnGhost:hover{transform:translateY(-1px);background:rgba(255,255,255,.09)}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}@media (max-width:800px){.grid{grid-template-columns:1fr}}
.item{padding:14px;border-radius:22px;background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(var(--blur));box-shadow:0 14px 46px rgba(0,0,0,.38);cursor:pointer;transition:transform .18s ease,border-color .18s ease;display:grid;grid-template-columns:96px 1fr;gap:12px}.item:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.22)}.item:active{transform:translateY(-1px) scale(.99)}.item img{width:96px;height:96px;border-radius:18px;border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.2)}
.h1{font-size:26px;margin:0}.muted{color:var(--muted)}
.kv{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}.kv .tag{padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font-size:12px}
.footer{margin-top:18px;padding:18px;border-radius:var(--radius2);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:var(--muted);font-size:12px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);padding:10px 12px;border-radius:999px;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.9);font-size:12px;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;z-index:200}.toast.show{opacity:1;transform:translateX(-50%) translateY(-6px)}
@media (prefers-reduced-motion: reduce){.aura,.logo:after{animation:none}}

/* Home hero / modal */
.hero{
  margin-top:18px;
  padding:22px;
  position:relative;
  overflow:hidden;
}
.hero:before{
  content:"";
  position:absolute; inset:-30px;
  background:
    radial-gradient(900px 520px at 20% 20%, rgba(34,211,238,.22), transparent 60%),
    radial-gradient(900px 520px at 80% 20%, rgba(124,58,237,.22), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  filter: blur(0px);
}
.hero > *{position:relative}

.featureGrid{display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; margin-top:14px}
@media (max-width: 900px){ .featureGrid{grid-template-columns:1fr} }
.feature{
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.16);
  padding:14px;
  display:flex; gap:12px; align-items:flex-start;
}
.dot{
  width:12px; height:12px; border-radius:999px;
  background: linear-gradient(135deg, rgba(34,211,238,1), rgba(124,58,237,1));
  margin-top:6px;
}

.heroCats{margin-top:16px; display:grid; grid-template-columns: repeat(3, 1fr); gap:14px}
@media (max-width: 900px){ .heroCats{grid-template-columns:1fr} }
.catCard{
  border-radius: 26px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  overflow:hidden;
  cursor:pointer;
  transition: transform .18s ease, border-color .18s ease;
}
.catCard:hover{transform: translateY(-3px); border-color: rgba(255,255,255,.22)}
.catCard:active{transform: translateY(-1px) scale(.99)}
.catImg{height:140px; background:#000; position:relative; overflow:hidden}
.catImg img{width:100%; height:100%; object-fit:cover; filter: contrast(1.05) saturate(1.05); opacity:.92}
.catBody{padding:14px}

.modalMask{position:fixed; inset:0; background: rgba(0,0,0,.55); display:none; align-items:center; justify-content:center; z-index:500}
.modal{width:min(720px, calc(100vw - 24px)); border-radius: 26px; border:1px solid rgba(255,255,255,.16);
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  backdrop-filter: blur(18px);
  box-shadow: 0 22px 80px rgba(0,0,0,.60);
  overflow:hidden;
}
.modalHd{display:flex; justify-content:space-between; align-items:center; padding:16px 16px; border-bottom:1px solid rgba(255,255,255,.12)}
.modalHd b{font-size:16px}
.modalClose{border:1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.18); color: rgba(255,255,255,.9); border-radius: 14px; padding:8px 10px; cursor:pointer}
.modalBd{padding:16px 16px 18px}
.modalCols{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width: 760px){ .modalCols{grid-template-columns:1fr} }
.modalBox{border:1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.14); border-radius: 22px; padding:14px}
.modalBox h3{margin:0 0 10px; font-size:14px}
.modalBox ul{margin:0; padding-left:18px; color: rgba(255,255,255,.78); line-height:1.75}
.modalFt{margin-top:12px; display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap}

/* More visible motion */
.card{transform: translateZ(0)}
.hero:before{animation: heroShift 8s ease-in-out infinite alternate}
@keyframes heroShift{from{transform: translate3d(-1.2%, -0.6%, 0) scale(1.02)}to{transform: translate3d(1.2%, 0.8%, 0) scale(1.05)}}

.catCard .catImg img{transition: transform .7s ease, filter .35s ease;}
.catCard:hover .catImg img{transform: scale(1.06); filter: contrast(1.1) saturate(1.12)}

.item{will-change: transform}
.item img{object-fit:cover}

/* Top success notification */
.notifyBar{
  position:fixed; left:50%; top:12px; transform: translateX(-50%) translateY(-16px);
  width:min(720px, calc(100vw - 18px));
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(6, 95, 70, .88);
  color: rgba(255,255,255,.94);
  box-shadow: 0 18px 70px rgba(0,0,0,.55);
  backdrop-filter: blur(16px);
  z-index: 800;
  opacity:0;
  pointer-events:none;
  transition: opacity .2s ease, transform .24s ease;
  overflow:hidden;
}
.notifyBar.show{opacity:1; transform: translateX(-50%) translateY(0)}
.notifyRow{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px 14px}
.notifyRow b{font-size:14px}
.notifyRow span{font-size:12px; opacity:.9}
.notifyProg{height:4px; background: rgba(255,255,255,.18)}
.notifyProg > i{display:block; height:100%; width:0%; background: linear-gradient(90deg, rgba(34,211,238,1), rgba(16,185,129,1));}

/* Stronger modal entrance */
@keyframes maskFade{from{opacity:0}to{opacity:1}}
@keyframes modalIn{
  0%{opacity:0; transform: translateY(26px) scale(.92) rotateX(10deg); filter: blur(6px)}
  65%{opacity:1; transform: translateY(-4px) scale(1.01) rotateX(0deg); filter: blur(0px)}
  100%{opacity:1; transform: translateY(0) scale(1) rotateX(0deg)}
}
.modalMask.show{display:flex; animation: maskFade .18s ease-out both}
.modalMask.show .modal{transform-origin: 50% 20%; animation: modalIn .55s cubic-bezier(.16, .9, .25, 1) both}

/* Page transitions */
body{opacity:0; transform: translateY(8px); transition: opacity .22s ease, transform .28s cubic-bezier(.2,.9,.25,1)}
body.pageIn{opacity:1; transform: translateY(0)}
body.pageOut{opacity:0; transform: translateY(-10px)}


/* --- Home shader background --- */
body:before{content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; background:rgba(0,0,0,.18);}


/* --- Home paper shaders background (iframe) --- */
#jb_paper_bg{position:fixed; inset:0; z-index:-2; pointer-events:none;}
#jb_paper_bg iframe{position:absolute; inset:0; width:100%; height:100%; border:0; display:block; pointer-events:none;}
/* light overlay for readability (avoid pure black) */
body:before{content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; background:rgba(0,0,0,.12);}