:root{
    --bg:#f6f7fb;
    --card:#ffffff;
    --text:#1e2330;
    --muted:#5b6477;
    --brand:#2b5b38;
    --link:#273262;
    --border:#e7e9f2;
    --shadow:0 10px 28px rgba(15, 23, 42, 0.08);
    --radius:14px;
}

*{ box-sizing:border-box; }
body{
    margin:0;
    font-family:"Segoe UI", Arial, sans-serif;
    background:var(--bg);
    color:var(--text);
    line-height:1.55;
}

a{ color:var(--link); }
a:hover{ text-decoration:underline; }

.wrap{
    max-width:1100px;
    margin:0 auto;
    padding:24px 18px 60px;
}

.header{
    background:linear-gradient(135deg,#fff 0%,#f2f5ff 100%);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:22px 22px 16px;
}

.site-title{ margin:0; font-size:1.55rem; }
.subtitle{ margin:6px 0 0; color:var(--muted); max-width:62ch; }

.pill{
    display:inline-block;
    margin-top:10px;
    padding:6px 10px;
    border-radius:999px;
    background:#eaf3ed;
    color:var(--brand);
    font-weight:700;
    font-size:0.95rem;
}

.nav{
    margin-top:14px;
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}
.nav a{
    padding:8px 10px;
    border-radius:10px;
    background:#fff;
    border:1px solid var(--border);
    text-decoration:none;
    font-weight:600;
}
.nav a:hover{ background:#f6f8ff; text-decoration:none; }

.main{
    margin-top:18px;
    display:grid;
    grid-template-columns: 1.6fr 1fr;
    gap:18px;
    align-items:start;
}
@media (max-width: 900px){
    .main{ grid-template-columns:1fr; }
}

.card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:18px;
}
.card h2{ margin:0 0 10px; font-size:1.15rem; }
.card p{ margin:0 0 10px; color:var(--muted); }

.tiles{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    margin-top:10px;
}
@media (max-width: 900px){ .tiles{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 520px){ .tiles{ grid-template-columns:1fr; } }

.tile{
    display:block;
    border:1px solid var(--border);
    border-radius:12px;
    padding:12px;
    background:#fbfcff;
    transition:transform .12s ease, background .12s ease, border-color .12s ease;
    min-height:86px;
    text-decoration:none;
}
.tile:hover{
    transform:translateY(-2px);
    background:#f3f6ff;
    border-color:#d9def4;
}
.tile .t{ display:block; font-weight:800; margin-bottom:4px; color:var(--text); }
.tile .d{ display:block; color:var(--muted); font-size:.95rem; }

.list{ margin:10px 0 0; padding-left:18px; color:var(--muted); }
.list li{ margin:6px 0; }

.mt{ margin-top:18px; }

.ads-slot{
    border:1px dashed #cfd5ea;
    background:#fcfdff;
    border-radius:12px;
    padding:12px;
    color:#6b7280;
    font-size:.95rem;
}

.footer{
    margin-top:18px;
    color:var(--muted);
    font-size:.95rem;
    text-align:center;
}
.footer-note{ margin-top:6px; }