/* 91APP official site */
:root{
  --bg:#F7F4FF;
  --bg-2:#FFFFFF;
  --tint:#EEF2FF;
  --card:#FFFFFF;
  --title:#1B1340;
  --text:#2F2A4A;
  --muted:#5B5678;
  --soft:#8B86A3;
  --brand:#7C3AED;
  --bright:#A78BFA;
  --teal:#14B8A6;
  --coral:#F97316;
  --rose:#E11D48;
  --amber:#F59E0B;
  --indigo:#312E81;
  --line:rgba(124,58,237,.14);
  --shadow:0 16px 40px rgba(49,46,129,.10);
  --radius:22px;
  --max:1200px;
  --bar:1080px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"PingFang SC","Hiragino Sans GB","Noto Sans SC","Microsoft YaHei",sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.75;
  font-size:16px;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{color:var(--indigo)}
button{font-family:inherit}
.skip{
  position:absolute;left:-999px;top:8px;
}
.skip:focus{left:12px;z-index:80;background:#fff;padding:8px 12px;border-radius:999px}

/* brand bar */
.topspace{height:88px}
.brandbar{
  position:fixed;top:12px;left:50%;transform:translateX(-50%);
  width:calc(100% - 32px);max-width:var(--bar);
  height:64px;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:rgba(255,255,255,.92);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  border-radius:999px;
  padding:6px 10px;
  backdrop-filter:blur(16px);
}
.iconbtn{
  width:44px;height:44px;min-width:44px;border:0;border-radius:50%;
  background:var(--tint);color:var(--indigo);
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:18px;
}
.iconbtn:hover,.iconbtn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.brand-mark{
  display:flex;align-items:center;justify-content:center;gap:8px;
  min-width:88px;height:44px;
}
.brand-mark img{height:28px;width:auto}
.brand-word{
  font-weight:800;letter-spacing:.04em;color:var(--indigo);font-size:18px;
}
.cap-group{display:flex;align-items:center;gap:6px;flex:1}
.cap-group.left{justify-content:flex-end}
.cap-group.right{justify-content:flex-start}
.cap{
  display:inline-flex;align-items:center;justify-content:center;
  height:40px;padding:0 14px;border-radius:999px;
  color:var(--text);font-size:14px;font-weight:600;white-space:nowrap;
}
.cap:hover,.cap:focus-visible{background:var(--tint);color:var(--indigo);outline:2px solid var(--bright);outline-offset:1px}
.cap.is-on{border:1.5px solid var(--brand);color:var(--brand);background:#F4EDFF}
.mobile-only{display:none}
.desk-only{display:flex}
.app-chip{
  height:40px;padding:0 16px;border-radius:999px;color:#fff!important;
  background:linear-gradient(135deg,#A78BFA 0%,#7C3AED 50%,#14B8A6 100%);
  font-weight:700;font-size:14px;
}
.app-chip:hover{filter:brightness(1.05);color:#fff!important}

/* layout */
main{display:block}
.wrap{width:min(var(--max),calc(100% - 32px));margin:0 auto}
.page{padding:12px 0 40px}
h1,h2,h3{color:var(--title);line-height:1.28;margin:0 0 .6em}
h1{font-size:clamp(28px,4vw,44px);letter-spacing:-.02em}
h2{font-size:clamp(22px,3vw,30px)}
h3{font-size:20px}
p{margin:0 0 1em}
.lead{font-size:18px;color:var(--muted);max-width:720px}
.kicker{color:var(--brand);font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px}
.section{padding:28px 0 12px}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:22px;
}
.media{
  border-radius:22px;overflow:hidden;background:var(--tint);
  border:1px solid var(--line);
}
.media.slot{min-height:180px}
.media img{width:100%;height:100%;object-fit:cover}
.btnrow{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:10px 22px;border-radius:999px;font-weight:700;
}
.btn-main{
  color:#fff!important;
  background:linear-gradient(135deg,#A78BFA 0%,#7C3AED 50%,#14B8A6 100%);
}
.btn-main:hover{color:#fff!important;filter:brightness(1.06)}
.btn-ghost{
  background:#fff;border:1px solid var(--line);color:var(--indigo)!important;
}
.btn-ghost:hover{border-color:var(--brand)}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:1.1fr .9fr}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g6{grid-template-columns:repeat(3,1fr)}
.tags{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.tag{
  background:#fff;border:1px solid var(--line);border-radius:20px;padding:16px;
}
.tag .dot{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:8px}
.c-p{background:var(--brand)}.c-t{background:var(--teal)}.c-c{background:var(--coral)}.c-r{background:var(--rose)}.c-a{background:var(--amber)}.c-i{background:var(--indigo)}
.num{font-size:42px;font-weight:800;line-height:1;margin-bottom:8px}
.n1{color:var(--brand)}.n2{color:var(--teal)}.n3{color:var(--coral)}.n4{color:var(--rose)}.n5{color:var(--amber)}
.list a.row{
  display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--line);color:inherit
}
.badge{
  display:inline-block;border-radius:999px;padding:2px 10px;font-size:12px;font-weight:700;color:#fff;
  background:var(--brand);margin-right:6px
}
.badge.teal{background:var(--teal)}
.badge.coral{background:var(--coral)}
.badge.rose{background:var(--rose)}
.badge.amber{background:var(--amber)}
.crumb{font-size:13px;color:var(--soft);margin-bottom:10px}
.crumb a{color:var(--muted)}

/* home dock */
.dock{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:center;padding:10px 0 20px}
.mosaic{display:grid;grid-template-columns:1.4fr 1fr;grid-template-rows:auto auto;gap:14px}
.mosaic .big{grid-row:1 / span 2}
.folder li{list-style:none;margin:0;padding:14px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:12px}
.folder{margin:0;padding:0}
.axis{position:relative;padding-left:28px}
.axis:before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:var(--line)}
.node{position:relative;margin:0 0 22px}
.node:before{content:"";position:absolute;left:-24px;top:8px;width:12px;height:12px;border-radius:50%;background:var(--brand)}
.faq details{background:#fff;border:1px solid var(--line);border-radius:18px;padding:12px 16px;margin:0 0 10px}
.faq summary{cursor:pointer;font-weight:700;color:var(--title);min-height:32px}

/* footer */
.sitefoot{
  background:#1B1340;color:#F4F0FF;padding:48px 0 120px;margin-top:48px
}
.sitefoot a{color:#E9E4FF}
.sitefoot a:hover{color:#fff}
.footbrand{display:flex;align-items:center;gap:12px;margin-bottom:28px}
.footbrand img{height:32px}
.footgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.sitefoot h3{color:#fff;font-size:15px}
.sitefoot ul{list-style:none;margin:0;padding:0}
.sitefoot li{margin:8px 0}
.footnote{margin-top:28px;color:#C9C2E6;font-size:14px}
.copy{margin-top:10px;color:#A9A2C6;font-size:13px}

/* overlays */
.mask,.drawer,.searchly{
  visibility:hidden;pointer-events:none;opacity:0;transition:opacity .2s ease,visibility .2s
}
.mask.is-on,.drawer.is-on,.searchly.is-on{visibility:visible;pointer-events:auto;opacity:1}
.mask{
  position:fixed;inset:0;background:rgba(27,19,64,.38);z-index:50
}
.drawer{
  position:fixed;left:50%;bottom:0;transform:translateX(-50%) translateY(18px);
  width:min(720px,100%);max-height:78vh;overflow:auto;
  background:#fff;border-radius:28px 28px 0 0;z-index:60;
  box-shadow:var(--shadow);padding:18px 18px 28px;
}
.drawer.is-on{transform:translateX(-50%) translateY(0)}
.dhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.dgroups{display:grid;gap:16px}
.dgroups h3{font-size:14px;color:var(--brand);margin-bottom:8px}
.ditem{display:block;padding:10px 8px;border-radius:14px;color:inherit}
.ditem:hover{background:var(--tint)}
.ditem b{display:block;color:var(--title)}
.ditem span{display:block;color:var(--muted);font-size:13px;line-height:1.5}
.searchly{
  position:fixed;z-index:70;left:50%;top:88px;transform:translateX(-50%);
  width:min(720px,calc(100% - 24px));
  background:#fff;border-radius:24px;padding:18px;box-shadow:var(--shadow);
  border:1px solid var(--line);
}
.searchbox{
  width:100%;height:48px;border-radius:999px;border:1px solid var(--line);
  padding:0 16px;font-size:16px;background:var(--tint);color:var(--title)
}
.presets{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.presets a{
  height:40px;display:inline-flex;align-items:center;padding:0 14px;border-radius:999px;
  background:var(--tint);color:var(--indigo);font-weight:600;font-size:14px
}
body.lock{overflow:hidden}

/* mobile island */
.island{
  display:none;position:fixed;left:50%;bottom:calc(12px + env(safe-area-inset-bottom));
  transform:translateX(-50%);z-index:35;
  width:min(420px,calc(100% - 28px));height:52px;
  background:rgba(255,255,255,.95);border:1px solid var(--line);
  border-radius:999px;box-shadow:var(--shadow);
  padding:4px;align-items:center;justify-content:space-around;
}
.island a{
  flex:1;height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:var(--muted);font-size:11px;font-weight:700;position:relative
}
.island a.is-on{color:var(--brand)}
.island a.is-on:after{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--brand);position:absolute;bottom:4px
}

.prose p{max-width:760px}
.steps{display:grid;gap:12px}
.step{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:start}
.score-item{display:grid;grid-template-columns:72px 1fr;gap:12px;align-items:start;padding:12px 0;border-bottom:1px solid var(--line)}
.wall{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.wall article:nth-child(1){grid-row:span 2}
.roles{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}

@media (max-width:980px){
  .g2,.g3,.g4,.g6,.tags,.dock,.mosaic,.footgrid,.wall,.roles{grid-template-columns:1fr}
  .mosaic .big{grid-row:auto}
  .cap-group{display:none}
  .desk-only{display:none}
  .mobile-only{display:flex}
  .brandbar{width:calc(100% - 20px);padding:6px 8px}
  .topspace{height:80px}
  .searchly{
    inset:0;left:0;top:0;transform:none;width:100%;max-width:none;border-radius:0;background:#F7F4FF
  }
  .island{display:flex}
  .sitefoot{padding-bottom:132px}
  .page{padding-bottom:24px}
}
@media (max-width:640px){
  h1{font-size:28px}
  .wrap{width:calc(100% - 32px)}
}