*{box-sizing:border-box;margin:0;padding:0}
:root{--p:#5fb9a8;--pd:#2f6f64;--purple:#7457d9;--text:#3e4050;--muted:#747686;--bg:#f7fbfa;--line:#dfeeea}
body{font-family:Poppins,sans-serif;background:var(--bg);color:var(--text)}
a{text-decoration:none;color:inherit}
.page{max-width:1250px;margin:auto;padding:26px}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:8px 4px 22px}
.brand{font-size:1rem}.brand strong{color:var(--purple)}.back{font-size:.7rem;color:var(--muted)}
.hero{padding:34px;border-radius:30px;background:linear-gradient(130deg,#dcf4ee,#f4fbf8 55%,#eee8ff)}
.hero span,.preview>span{color:var(--pd);font-size:.68rem;font-weight:700;letter-spacing:.09em}
.hero h1{margin-top:8px;font-size:2.35rem;color:var(--pd)}
.hero p{max-width:850px;margin-top:9px;color:var(--muted);line-height:1.65}
.layout{margin-top:22px;display:grid;grid-template-columns:.8fr 1.2fr;gap:22px}
.panel{padding:25px;border:1px solid var(--line);border-radius:24px;background:#fff}
.panel h2{margin-bottom:18px}
.panel label{display:block;margin:14px 0 7px;font-size:.72rem;font-weight:600}
.panel select{width:100%;padding:11px;border:1px solid var(--line);border-radius:11px;background:#fbfefd}
.group-info,.notice,.info-card,.status-card{margin-top:15px;padding:15px;border-radius:14px}
.group-info{background:#eef9f6;color:var(--pd);font-size:.7rem;line-height:1.5}
.notice{background:#fff6dc}.notice p,.info-card p,.status-card p{margin-top:6px;color:var(--muted);font-size:.69rem;line-height:1.55}
.info-card{background:#eef9f6}.info-card small,.status-card small{color:var(--pd);font-size:.6rem;font-weight:700}.info-card strong,.status-card strong{display:block;margin-top:5px}
.preview h3{margin-top:20px;font-size:.9rem}.preview ul{margin-top:8px;padding-left:20px}.preview li{margin-top:7px;font-size:.72rem}
.status-card{background:#f3effd}
.principle-grid{margin-top:12px;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.principle-grid article{padding:14px;border-radius:13px;background:#fafdfc}
.principle-grid strong,.principle-grid span{display:block}.principle-grid strong{margin-top:6px;font-size:.74rem}.principle-grid span{margin-top:3px;color:var(--muted);font-size:.62rem}
@media(max-width:760px){.layout{grid-template-columns:1fr}.page{padding:16px}.principle-grid{grid-template-columns:1fr}}