:root{
  --bg:#ffffff; --fg:#121212; --muted:#5a5a5a; --line:#eaeaea; --brand:#0b61ff; --ok:#0a7f3f;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--fg); background:var(--bg);}
header.hero{background:linear-gradient(135deg,#f7faff,#f4f9ff 60%,#eef6ff); border-bottom:1px solid var(--line);}
.container{max-width:1100px; margin:0 auto; padding:24px;}
.hero .head{display:flex; align-items:center; gap:16px;}
.logo{height:44px; width:auto}
h1{font-size:28px; margin:8px 0 6px;}
.sub{color:var(--muted); margin:0 0 10px;}
.search{display:flex; gap:10px; align-items:center; margin:12px 0 4px;}
.search input{flex:1; padding:12px 14px; border:1px solid var(--line); border-radius:12px; font-size:16px;}
.grid{display:grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap:14px; margin:18px 0 8px;}
.card{border:1px solid var(--line); border-radius:14px; padding:14px; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.03); display:flex; flex-direction:column; gap:8px;}
.card .cat{color:#666; font-size:12px;}
.card a.btn{display:inline-block; padding:8px 10px; background:var(--fg); color:#fff; border-radius:10px; text-decoration:none; font-size:14px;}
section{padding:16px 0;}
h2{font-size:20px; margin:0 0 8px;}
.notice{background:#f6fbf6; border:1px solid #e2f2e2; color:#0b5; padding:12px 14px; border-radius:10px;}
footer{border-top:1px solid var(--line); padding:16px; text-align:center; color:#666; margin-top:16px;}
.brand-layout{display:grid; grid-template-columns: 1.1fr .9fr; gap:24px;}
@media (max-width:900px){ .brand-layout{grid-template-columns:1fr;} }
form{display:grid; gap:12px; border:1px solid var(--line); padding:16px; border-radius:12px; background:#fff;}
label>span{font-size:13px; color:#444}
input,select,textarea{padding:10px 12px; border:1px solid var(--line); border-radius:10px; font-size:16px;}
button{padding:12px 14px; border-radius:10px; background:var(--fg); color:#fff; border:none; cursor:pointer; font-size:16px;}
.aside{border:1px solid var(--line); border-radius:12px; padding:14px; background:#fff;}
.aside h3{margin:6px 0 10px;}
.ads{border:1px dashed #c9c9c9; color:#aaa; min-height:90px; display:flex; align-items:center; justify-content:center; border-radius:10px; margin:8px 0;}
.small{font-size:12px; color:#777}