*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,Arial,Helvetica,sans-serif}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:0 20px}

.topbar{position:sticky;top:0;background:#fff;border-bottom:1px solid #eee}
.topbar .container{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:flex;gap:10px;align-items:center;font-weight:700;color:var(--text);text-decoration:none}
.logo img{height:28px}
.nav{display:flex;gap:14px;align-items:center}
.nav a{color:var(--text)}
.footer{border-top:1px solid #eee;padding:18px 0;margin-top:40px}
.footer .container{display:flex;justify-content:space-between;color:var(--muted);font-size:14px}

.content{padding:28px 0}

.card{background:#fff;border:1px solid #eee;border-radius:var(--radius);box-shadow:var(--shadow)}
.card .card-body{padding:20px}

.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:1fr 1fr}
.grid-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.grid-2,.grid-3{grid-template-columns:1fr}}

h1,h2,h3{margin:0 0 10px}
.muted{color:var(--muted)}
code{background:var(--soft);border-radius:8px;padding:2px 6px}

input,textarea,select{width:100%;padding:12px;border:1px solid #e5e7eb;border-radius:10px;background:#fff}
input:focus,textarea:focus,select:focus{outline:2px solid color-mix(in oklab, var(--brand) 30%, white)}
label{display:block;margin:8px 0 4px;color:#374151;font-size:14px}
form .row{display:grid;gap:12px}
form .row-2{grid-template-columns:1fr 1fr}
@media(max-width:800px){form .row-2{grid-template-columns:1fr}}

.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:10px;border:0;cursor:pointer;font-weight:600}
.btn.primary{background:var(--brand);color:#fff}
.btn.ghost{background:transparent;border:1px solid #e5e7eb;color:var(--text)}
.btn.dark{background:#374151;color:#fff}
.btn.success{background:var(--ok);color:#fff}
.btn.warn{background:var(--warn);color:#fff}
.btn.error{background:var(--err);color:#fff}

.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border:1px solid #eee;text-align:left;vertical-align:top}
.table th{background:var(--soft-2)}
.pill{display:inline-block;background:var(--soft);padding:4px 10px;border-radius:999px;font-size:12px}
.notice{padding:10px;border-radius:10px}
.notice.ok{background:#ECFDF5;color:#065F46;border:1px solid #A7F3D0}
.notice.err{background:#FEF2F2;color:#991B1B;border:1px solid #FECACA}

.hero{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.hero .left{flex:1 1 380px}
.hero .right{flex:1 1 320px}
.hero .panel{padding:18px;border-radius:var(--radius);background:linear-gradient(180deg,#fff, #fff 60%, color-mix(in oklab,var(--brand) 6%, white))}