:root { --ink:#3b2a52; --muted:#776d89; --line:rgba(80,57,112,.12); --blue:#5b8cff; --orange:#ff9f43; --pink:#ff7eb6; --green:#45c78b; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:linear-gradient(180deg,#8ed7ff 0%,#d8f3ff 42%,#fff6d5 100%); font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif; }
.portal { position:relative; width:min(1180px,calc(100% - 36px)); margin:0 auto; padding:28px 0 64px; }
.portal::before { position:fixed; top:130px; left:-35px; width:150px; height:60px; border-radius:999px; background:rgba(255,255,255,.72); box-shadow:65px -20px 0 -8px rgba(255,255,255,.72),130px 8px 0 -15px rgba(255,255,255,.72); content:""; pointer-events:none; }
.portal-header { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { display:flex; align-items:center; gap:12px; }
.brand > span { display:grid; width:52px; height:52px; place-items:center; border:3px solid #fff; border-radius:18px; color:#fff; background:linear-gradient(145deg,#ff9f43,#ff7b5f); box-shadow:0 12px 25px rgba(255,144,67,.3); font-weight:900; transform:rotate(-4deg); }
.brand strong,.brand small { display:block; }.brand strong { font-size:17px; }.brand small { margin-top:3px; color:var(--muted); font-size:11px; }
.service-state { display:flex; align-items:center; gap:8px; padding:9px 13px; border-radius:999px; color:#5f6b79; background:rgba(255,255,255,.76); font-size:12px; font-weight:800; }
.service-state i { width:9px; height:9px; border-radius:50%; background:#a8b0b8; }.service-state.online i { background:#22a06b; }.service-state.offline i { background:#d95757; }
.hero { padding:66px 0 40px; text-align:center; }
.hero p { margin:0 0 12px; color:#e17a18; font-size:12px; font-weight:900; letter-spacing:2px; text-transform:uppercase; }
.hero h1 { max-width:900px; margin:0 auto; font-size:clamp(38px,6vw,66px); line-height:1.12; letter-spacing:-2px; }
.hero > span { display:block; margin-top:18px; color:var(--muted); font-size:16px; }
.role-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.role-card { position:relative; display:flex; min-height:270px; flex-direction:column; padding:24px; overflow:hidden; border:3px solid rgba(255,255,255,.8); border-radius:28px; color:inherit; background:rgba(255,255,255,.92); box-shadow:0 20px 45px rgba(65,93,125,.13); text-decoration:none; transition:190ms ease; }
.role-card::after { position:absolute; right:-28px; bottom:-32px; width:120px; height:120px; border-radius:50%; background:#eef3ff; content:""; }
.role-card:hover { transform:translateY(-6px) rotate(-.4deg); box-shadow:0 28px 55px rgba(65,93,125,.18); }
.role-card b { position:relative; z-index:1; align-self:flex-start; padding:7px 11px; border-radius:999px; color:#566574; background:#f0f3f6; font-size:11px; }
.role-card strong { position:relative; z-index:1; margin-top:30px; font-size:23px; }
.role-card span { position:relative; z-index:1; margin-top:12px; color:var(--muted); font-size:13px; line-height:1.7; }
.role-card em { position:relative; z-index:1; margin-top:auto; color:var(--blue); font-size:12px; font-style:normal; font-weight:850; }
.role-card.teacher::before,.role-card.observer::before,.role-card.student::before { position:absolute; top:18px; right:20px; font-size:30px; content:""; }
.role-card.teacher::before { content:"🍎"; }.role-card.observer::before { content:"🔎"; }.role-card.student::before { content:"🦊"; }
.role-card.observer em { color:var(--orange); }.role-card.student em { color:#d94f9a; }.role-card.student { background:linear-gradient(160deg,#fff,#fff0f8); }
.role-card.display { color:#fff; background:linear-gradient(145deg,#203a63,#5b8cff); }.role-card.display::before { position:absolute; top:18px; right:20px; content:"🚀"; font-size:30px; }.role-card.display span { color:#dbe8ff; }.role-card.display b { color:#d8e6ff; background:rgba(255,255,255,.12); }.role-card.display em { color:#fff1a8; }.role-card.display::after { background:rgba(255,255,255,.12); }
.notes { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:20px; }
.notes > div { padding:20px; border:2px solid rgba(255,255,255,.75); border-radius:22px; background:rgba(255,255,255,.72); }
.notes strong { font-size:13px; }.notes p { margin:9px 0 0; color:var(--muted); font-size:12px; line-height:1.7; }
@media (max-width:980px) { .role-grid { grid-template-columns:1fr 1fr; }.notes { grid-template-columns:1fr; } }
@media (max-width:620px) { .portal { width:calc(100% - 24px); }.portal-header { align-items:flex-start; }.hero { padding:42px 0 30px; text-align:left; }.hero h1 { margin:0; font-size:40px; }.role-grid { grid-template-columns:1fr; }.role-card { min-height:220px; } }