:root{
    --bg: #f7fafc;
    --text: #0f172a;
    --muted: #6b7280;
    --muted-2: #9ca3af;
    --accent: #2563eb;
    --accent-2: #06b6d4;
    --accent-3: #7c3aed;
    --card: #ffffff;
    --glass: rgba(255,255,255,0.6);
    --max-width: 960px;
}

*{box-sizing:border-box}
body{
    margin:0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    :root{
        --bg: #f8fafc;
        --surface: #ffffff;
        --muted: #6b7280;
        --muted-2: #9ca3af;
        --accent: #2563eb;
        --accent-2: #06b6d4;
        --accent-3: #7c3aed;
        --card: #ffffff;
        --glass: rgba(255,255,255,0.6);
        --max-width: 1100px;
        --radius: 12px;
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
        margin:0;
        font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
        background: linear-gradient(180deg,#fbfdff 0%, #f3f7fb 100%);
        color:#0f172a;
        -webkit-font-smoothing:antialiased;
        -moz-osx-font-smoothing:grayscale;
        line-height:1.6;
    }

    .container{max-width:var(--max-width);margin:36px auto;padding:20px}

    /* Typography */
    h1,h2,h3{margin:0 0 10px 0;font-weight:600}
    h1{color:var(--accent);font-size:2rem}
    h2{font-size:1.35rem;color:#0b3a8a}
    h3{font-size:1rem;color:var(--accent-3)}
    p{color:var(--muted);margin:0 0 12px 0}

    /* Links */
    a{color:var(--accent);text-decoration:none}
    a:hover{text-decoration:underline}

    /* Header / nav: support both plain nav lists and .navbar/.nav-item patterns */
    header.site-header, header{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;padding:14px;border-radius:var(--radius);background:linear-gradient(90deg, rgba(37,99,235,0.04), rgba(6,182,212,0.02));box-shadow:0 10px 30px rgba(15,23,42,0.05)}
    .brand{display:flex;align-items:center;gap:12px}
    .site-title{font-weight:700;font-size:1.15rem}
    .site-sub{font-size:0.9rem;color:var(--muted)}

    /* nav: list style fallback */
    nav ul{list-style:none;padding:0;margin:0;display:flex;gap:10px;align-items:center}
    nav ul li a{display:inline-block;padding:8px 12px;border-radius:999px;background:linear-gradient(90deg,var(--accent-2),var(--accent));color:#fff;font-weight:600;text-decoration:none;box-shadow:0 6px 20px rgba(37,99,235,0.08)}

    /* nav: pill bar style (if template uses .navbar/.nav-item) */
    .navbar{display:flex;gap:10px;align-items:center;background:linear-gradient(90deg,var(--accent-2),var(--accent));padding:6px;border-radius:999px}
    .nav-item{padding:8px 12px;border-radius:999px;color:white;text-decoration:none;font-weight:600;box-shadow:0 6px 18px rgba(37,99,235,0.08)}
    .nav-item.secondary{background:transparent;color:white;opacity:0.9;border:1px solid rgba(255,255,255,0.12)}
    .nav-item:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(37,99,235,0.12)}
    .nav-item.active{background:rgba(255,255,255,0.15);backdrop-filter:blur(4px)}

    /* Search in header */
    .nav-search{display:flex;gap:8px;align-items:center}
    .search-input{padding:8px 10px;border-radius:8px;border:1px solid #e6e9ef;background:#fff;min-width:180px}

    /* Posts */
    .posts{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
    .post-card{background:var(--card);padding:18px;border-radius:10px;border:1px solid rgba(15,23,42,0.04);box-shadow:0 8px 24px rgba(16,24,40,0.04)}
    .post-card h3{margin:0 0 8px 0}
    .post-meta{font-size:0.86rem;color:var(--muted);margin-bottom:10px}
    .post-excerpt{color:var(--muted);margin-bottom:12px}
    .card-media{height:140px;border-radius:8px;margin-bottom:12px;background:linear-gradient(180deg,#eef6ff,#ffffff)}

    /* Comments */
    .comments{list-style:none;padding:0;margin:0}
    .comments .comment-item{background:var(--card);padding:12px;border-radius:8px;border:1px solid rgba(15,23,42,0.1)}
    .comments .comment-item + .comment-item{margin-top:12px}
    .comments .comment-author{font-weight:600}
    .comments .comment-date{font-size:0.85rem;color:var(--muted);margin-left:6px}
    .comments .comment-content{margin:8px 0}
    .comments .comment-actions{margin-top:6px}
    .comments .comment-actions a,
    .comments .comment-actions form{display:inline}
    .comment-edit-form{border:1px solid #ccc;padding:8px;border-radius:8px;background:var(--glass);margin-bottom:12px}

    /* Buttons */
    .btn{display:inline-block;padding:9px 14px;border-radius:10px;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:white;text-decoration:none;font-weight:700;transition:transform .12s ease,box-shadow .12s ease}
    .btn.secondary{background:transparent;color:var(--accent);border:1px solid rgba(37,99,235,0.12)}
    .btn:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(37,99,235,0.12)}

    /* Forms */
    form input[type="text"], form textarea{width:100%;padding:12px;border:1px solid #e9eef6;border-radius:10px;background:#fff}

    /* Footer */
    footer{margin-top:36px;padding:28px 0;color:var(--muted);text-align:center}

    /* Utilities */
    .muted{color:var(--muted)}
    .stack{display:flex;flex-direction:column;gap:12px}

}