:root { --brand: #21C17A; --bg: #0b0e12; --fg: #e7e7ea; --muted: #9aa0a6; --card: #12161c; }
* { box-sizing: border-box; }
body { margin:0; font: 16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif; background: var(--bg); color: var(--fg); }
a { color: inherit; text-decoration: none; }
.kapi-container { max-width: 1100px; margin: 0 auto; padding: 24px; }
.header { border-bottom: 1px solid #202632; background: #0c1117; position: sticky; top:0; z-index: 10; }
.header .inner { display:flex; align-items:center; justify-content:space-between; padding: 12px 24px; max-width: 1100px; margin:0 auto; }
.logo { display:flex; align-items:center; gap:10px; font-weight:600; }
.logo .mark { display:inline-flex; width:32px; height:32px; align-items:center; justify-content:center; border-radius:12px; background: var(--brand); color: #fff; }
.nav a { margin-left: 16px; opacity: .9; }
.nav a:hover { opacity: 1; text-decoration: underline; }
.kapi-hero { background: linear-gradient(135deg, rgba(33,193,122,.18), rgba(33,193,122,.03)); border: 1px solid #233142; border-radius: 18px; padding: 24px; }
.badge { display:inline-block; font-size:12px; background:#18202a; border:1px solid #233142; padding: 2px 8px; border-radius: 999px; color:#a7b0ba; }
.grid3 { display:grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
.grid2 { display:grid; grid-template-columns: repeat(auto-fill,minmax(320px,1fr)); gap:16px; }
.card { border: 1px solid #233142; background: var(--card); border-radius: 18px; padding: 18px; }
.btn { display:inline-flex; align-items:center; gap:8px; border:1px solid #233142; background:#12161c; padding: 10px 14px; border-radius: 12px; cursor:pointer; color:#e7e7ea; }
.btn.primary { background: var(--brand); color:#0a0f14; border-color: var(--brand); font-weight:600; }
.btn:hover { filter: brightness(1.08); }
.input, select { width:100%; background:#0d1218; border:1px solid #233142; color:#e7e7ea; border-radius: 12px; padding:10px 12px; }
label { display:block; font-size: 12px; letter-spacing:.02em; color:#a7b0ba; margin-bottom:6px; }
footer { border-top: 1px solid #202632; color:#a7b0ba; }
footer .inner { display:flex; justify-content:space-between; padding: 18px 24px; max-width: 1100px; margin:0 auto; }
.small { font-size: 13px; color:#98a2b3; }
.notice { font-size: 14px; color:#98a2b3; margin-top:10px; }