:root { --c:#0d0f1a; --a:#4866ff; --m:#f5f7ff; }
*{box-sizing:border-box} body{margin:0;font:16px/1.6 system-ui,Segoe UI,Roboto,Apple SD Gothic Neo,Malgun Gothic,sans-serif;color:var(--c);background:#fff}
.container{max-width:1120px;margin:0 auto;padding:0 16px}
.topbar{position:sticky;top:0;background:#fff;border-bottom:1px solid #eee}
.topbar .brand{font-weight:700}
.topbar nav{display:flex;gap:16px;align-items:center;justify-content:flex-end}
.topbar nav a{color:#333;text-decoration:none;padding:12px 8px}
.topbar nav a.btn{background:var(--a);color:#fff;border-radius:10px;padding:10px 14px}
.lang{margin-left:8px;color:#666}
.hero{padding:72px 0;text-align:center;background:linear-gradient(180deg,#fff,var(--m))}
.hero h1{font-size:40px;margin:0 0 8px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;padding:32px 0}
.cards{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.cards li{border:1px solid #eee;border-radius:14px;padding:16px}
.post{border-bottom:1px solid #eee;padding:12px 0}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border:1px solid #eee;padding:8px}
label{display:block;margin:8px 0}
input,textarea,select{width:100%;padding:10px;border:1px solid #ddd;border-radius:10px}
.btn{cursor:pointer}
.alert{padding:10px;border-radius:8px}
.alert.success{background:#ecfff1;border:1px solid #b7f0c4}
.alert.error{background:#fff2f2;border:1px solid #ffcccc}
.footer{margin-top:48px;border-top:1px solid #eee;padding:24px 0;color:#666}