:root{
    --story-bg: #1e1b4b; /* deep indigo */
    --story-text: #f8f7ff;
    --story-accent: #ff2d95; /* magenta-ish */
    --story-accent-2: #ff7abf;
    --story-muted: #c4bfde;

    /* keep generic names for compatibility with existing selectors */
    --bg: var(--story-bg);
    --text: var(--story-text);
    --muted: var(--story-muted);
    --accent: var(--story-accent);
    --accent-2: var(--story-accent-2);
    --card: rgba(255,255,255,0.02);
    --max-width: 900px;
    --radius: 12px;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;padding:0}
body{
    margin:0;
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    background: linear-gradient(180deg,var(--story-bg) 0%, #2b264f 100%);
    color:var(--story-text);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    line-height:1.68;
    padding:36px 20px;
}

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

    /* 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)}

    /* 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}