:root{
  --bg: #f9f9f9;
  --card: #ffffff;
  --text: #222;
  --accent: linear-gradient(135deg,#007cf0,#00dfd8);
  --muted: #666;
  --link: #007cf0;
}

*{box-sizing:border-box}
body{margin:0;font-family:Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;display:flex;}

/* layout */
.layout{display:flex;min-height:100vh;width:100%}
.sidebar{width:250px;background:#081226;color:white;padding:20px;display:flex;flex-direction:column;gap:20px;position:sticky;top:0;height:100vh;transition:transform 0.32s ease}
.sidebar.hidden{transform:translateX(-110%)}
.brand h2{margin:0;font-size:1.4rem;letter-spacing:0.5px}
.mini{opacity:0.85;font-size:0.85rem;margin-top:5px}
.nav{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.nav-link{color:rgba(255,255,255,0.9);text-decoration:none;padding:8px;border-radius:6px;display:block}
.nav-link.active,.nav-link:hover{background:rgba(255,255,255,0.06);transform:translateX(4px);transition:all 0.18s}

/* main */
.main{flex:1;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:12px;padding:12px 20px;background:rgba(255,255,255,0.95);backdrop-filter:blur(6px);border-bottom:1px solid rgba(0,0,0,0.05)}
.hamburger{width:44px;height:36px;border-radius:8px;border:none;background:transparent;display:none;align-items:center;justify-content:center;cursor:pointer}
.hamburger .bar{display:block;width:22px;height:2px;background:#333;margin:4px 0;transition:all .25s}
.hamburger.active .bar:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hamburger.active .bar:nth-child(2){opacity:0}
.hamburger.active .bar:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.search-wrap{flex:1}
.search-wrap input{width:100%;padding:10px 14px;border-radius:8px;border:1px solid #ddd;outline:none;transition:box-shadow 0.15s}
.search-wrap input:focus{box-shadow:0 8px 20px rgba(0,123,255,0.08);border-color:rgba(0,124,240,0.6)}

/* hero */
.hero{padding:40px 20px;background:var(--accent);color:white;background-clip:padding-box}
.hero h1{margin:0;font-size:1.6rem}
.lead{opacity:0.95;margin-top:8px}

/* posts grid */
.posts{padding:24px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.card{background:var(--card);padding:18px;border-radius:12px;box-shadow:0 8px 20px rgba(20,20,20,0.04);transition:transform 0.22s,box-shadow 0.22s;cursor:pointer;position:relative;overflow:hidden}
.card:hover{transform:translateY(-8px);box-shadow:0 18px 40px rgba(20,20,20,0.08)}
.card h3{margin:0 0 8px 0;color:var(--link)}
.small-cta{position:absolute;right:14px;bottom:14px;background:var(--link);color:white;padding:8px 10px;border-radius:8px;text-decoration:none}

/* footer */
.site-footer{padding:18px;text-align:center;color:var(--muted);border-top:1px solid rgba(0,0,0,0.03);margin-top:auto}

/* back button & post */
.post-wrap{max-width:900px;margin:24px auto;padding:0 20px}
.back-btn{display:inline-block;margin:14px 0;padding:8px 12px;background:var(--card);border-radius:8px;text-decoration:none;color:var(--link);box-shadow:0 8px 20px rgba(20,20,20,0.03)}
.blog-post{background:var(--card);padding:20px;border-radius:10px;box-shadow:0 12px 30px rgba(20,20,20,0.04)}

/* buttons */
.btn{background:transparent;border:1px solid rgba(255,255,255,0.08);padding:8px;border-radius:8px;color:white;cursor:pointer}

/* small helpers */
a{color:var(--link)}
.meta{color:var(--muted);font-size:0.95rem}

/* dark mode */
:root.dark{
  --bg:#0b0f14;
  --card:#071223;
  --text:#dbe9ff;
  --muted:#9fb6d7;
  --link:#66c2ff;
}

/* pointer animation */
html[data-pointer="wave"] .card::after{
  content:'';position:absolute;inset:0;border-radius:12px;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,0.02),rgba(255,255,255,0.06),rgba(255,255,255,0.02));opacity:0;transition:opacity 0.4s}
.card:hover::after{opacity:1}

/* responsive */
@media (max-width:900px){
  .sidebar{position:fixed;z-index:60;left:0;top:0;height:100vh;transform:translateX(-110%);display:flex}
  .sidebar.visible{transform:translateX(0)}
  .hamburger{display:flex}
  .topbar{padding:10px}
  .search-wrap input{width:calc(100vw - 140px)}
  .layout{overflow-x:hidden}
  .post-wrap{margin:10px}
  .hero{padding:24px}
}