/* Base */ 
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;background:#f3f4f6;color:#111827;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
.container{max-width:1120px;margin:0 auto;padding:0 16px}
.row{display:flex;gap:12px}.between{justify-content:space-between}.center{align-items:center}
.site-header{background:#fff;border-bottom:1px solid #e5e7eb}.logo{font-size:22px;margin:14px 0}
.site-footer{margin-top:40px;padding:20px 0;color:#6b7280}
/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid #d1d5db;border-radius:10px;background:#fff;padding:10px 14px;cursor:pointer}
.btn-primary{border-color:#a5b4fc;background:#eef2ff}.btn-link{border:0;background:transparent;color:#111827;font-weight:600;cursor:pointer}
/* Cards / Grid */
.card{background:#fff;border:1px solid #e5e7eb;border-radius:16px}
.grid{display:grid;gap:16px}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.grid-3{grid-template-columns:1fr}}
.tile{display:flex;flex-direction:column;overflow:hidden;border:1px solid #e5e7eb;border-radius:14px;background:#fff}
.tile .thumb{height:160px;background:linear-gradient(135deg,#eef2ff,#f9fafb);background-size:cover;background-position:center}
.tile .meta{font-size:12px;color:#6b7280;padding:12px 12px 0}
.tile .title{font-size:18px;line-height:1.3;padding:6px 12px;margin:0}
.tile .excerpt{padding:0 12px 12px;color:#374151}
.tile .cta{margin:0 12px 14px 12px;text-decoration:none;font-weight:600}
.badge{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;background:#eef2ff;border:1px solid #c7d2fe;font-size:11px}
/* Controls */
.controls{display:flex;gap:12px;align-items:center;padding:16px 16px 0}
.search{flex:1;padding:12px;border:1px solid #e5e7eb;border-radius:10px;background:#fff}
.select{padding:12px;border:1px solid #e5e7eb;border-radius:10px;background:#fff}
.filters{display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px}
.filter{padding:8px 12px;border:1px solid #e5e7eb;border-radius:999px;background:#f3f4f6;cursor:pointer}
.filter.active{background:#eef2ff;border-color:#c7d2fe}
.results{padding:0 16px 16px}.more-wrap{text-align:center;padding:6px 16px 16px}
/* Single */
.layout{display:grid;grid-template-columns:3fr 1fr;gap:30px}
@media(max-width:900px){.layout{grid-template-columns:1fr}}
.article{padding:20px}.article h1{margin:0 0 8px}.article .meta{color:#6b7280}
.thumb{margin:16px 0;border-radius:12px;overflow:hidden}.thumb img{display:block;width:100%;height:auto}
.sidebar{position:sticky;top:20px;display:flex;flex-direction:column;gap:16px}
.box{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:16px}.box h3{margin-top:0}
.related-cards{padding:16px}.related-cards h3{margin:0 0 8px}
/* Modal */
.modal{position:fixed;inset:0;background:rgba(17,24,39,.5);display:none;align-items:center;justify-content:center;padding:20px;z-index:40}
.modal[aria-hidden="false"]{display:flex}
.modal__dialog{background:#fff;border:1px solid #e5e7eb;border-radius:16px;max-width:560px;width:100%;padding:20px;position:relative}
.modal__close{position:absolute;top:10px;right:12px;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:8px;padding:6px 10px;cursor:pointer}
/* Form */
.form .field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.form input,.form textarea{padding:10px 12px;border:1px solid #e5e7eb;border-radius:10px}
.thanks{padding:12px;background:#ecfeff;border:1px solid #a5f3fc;border-radius:10px}
/* Helpers */
.m-0{margin:0}.p-16{padding:16px}.loading{opacity:.65;pointer-events:none}