:root{
  --bg:#0b0d12; --bg2:#0f1218; --text:#e9edf1; --muted:#aab3be; --primary:#7c5cff;
  --card:#121723; --border:#222737; --accent:#22d3ee; --ok:#22c55e; --warn:#f59e0b; --err:#ef4444;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,ui-sans-serif,system-ui,Segoe UI,Roboto,Helvetica,Arial;line-height:1.7;background:var(--bg);color:var(--text)}
a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:24px}
.grid{display:grid;gap:18px}
.nav{position:sticky;top:0;z-index:50;background:rgba(10,12,18,.75);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 24px}
.brand{display:flex;gap:10px;align-items:center}
.logo{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--primary),var(--accent));box-shadow:var(--shadow)}
.menu{display:flex;gap:12px;flex-wrap:wrap}
.menu a{padding:8px 12px;border-radius:10px;border:1px solid transparent}
.menu a:hover{background:var(--bg2);border-color:var(--border)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;border:1px solid var(--border);background:var(--card);box-shadow:var(--shadow);cursor:pointer}
.hero{padding:56px 24px;background:
  radial-gradient(1200px 600px at 0% -10%,rgba(124,92,255,.15),transparent 60%),
  radial-gradient(900px 500px at 100% 10%,rgba(34,211,238,.12),transparent 60%);
  border-bottom:1px solid var(--border)
}
.hero h1{font-size:48px;margin:0 0 10px}
.hero p{color:var(--muted);margin:0 0 18px}
.card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:18px;box-shadow:var(--shadow)}
.badge{display:inline-block;padding:4px 10px;border-radius:999px;background:rgba(124,92,255,.18);border:1px solid var(--border);font-size:12px}
.footer{border-top:1px solid var(--border);padding:32px;color:var(--muted)}
.small{font-size:13px;color:var(--muted)}
.section-title{font-size:22px;margin:8px 0 18px}
.img{width:100%;height:220px;border-radius:16px;background:linear-gradient(135deg,rgba(124,92,255,.18),rgba(34,211,238,.18));border:1px solid var(--border)}
.post-title{font-size:32px;margin:8px 0}
.responsive{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:800px){.responsive{grid-template-columns:2fr 1fr} .hero h1{font-size:54px}}
pre.code{background:#0c111b;border:1px solid var(--border);border-radius:14px;padding:14px;overflow:auto}
table{width:100%;border-collapse:collapse} th,td{border-bottom:1px solid var(--border);padding:8px;text-align:left}
.tag{font-size:12px;color:var(--muted);border:1px solid var(--border);padding:2px 8px;border-radius:999px}
.cookie{position:fixed;bottom:16px;left:16px;right:16px;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:var(--shadow);display:none}
.cookie.show{display:block}

/* Light default */
.light{--bg:#ffffff;--bg2:#f7f8fb;--text:#0d1117;--muted:#475569;--card:#ffffff;--border:#e5e7eb;--shadow:0 10px 30px rgba(0,0,0,.08)}
.light a{color:#2563eb}
.light .nav{background:rgba(255,255,255,.88)}
.light pre.code{background:#f6f8fa;border-color:#e5e7eb}
.light .img{background:linear-gradient(135deg,rgba(99,102,241,.14),rgba(56,189,248,.14))}
.light .card{background:#fff}

/* --- Aesthetic upgrades --- */
.header-shadow{box-shadow:0 6px 30px rgba(0,0,0,.08)}
.card{transition:transform .15s ease, box-shadow .15s ease}
.card:hover{transform:translateY(-2px); box-shadow:0 12px 30px rgba(0,0,0,.12)}
/* --- Mobile nav drawer --- */
.hamburger{display:none;cursor:pointer;border:1px solid var(--border);padding:8px 10px;border-radius:10px;background:var(--card)}
.drawer{position:fixed;inset:0 0 0 auto;width:84%;max-width:340px;background:var(--card);border-left:1px solid var(--border);transform:translateX(100%);transition:transform .2s ease;z-index:80;box-shadow:var(--shadow);padding:18px}
.drawer.open{transform:translateX(0)}
.drawer a{display:block;padding:12px;border-radius:10px;border:1px solid var(--border);margin-bottom:10px}
.drawer-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.4);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .2s;z-index:70}
.drawer-backdrop.show{opacity:1;pointer-events:auto}
@media(max-width:860px){
  .menu{display:none}
  .hamburger{display:inline-flex}
}
/* Topic chips */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);padding:6px 10px;border-radius:999px;background:var(--card)}
/* Tool forms */
.tool-card input,.tool-card select,.tool-card textarea{background:var(--bg2)}

/* Ad slots (placeholders until AdSense code is added) */
.ad-slot{display:block;border:1px dashed var(--border);border-radius:12px;min-height:90px;margin:16px 0;padding:10px;text-align:center;color:var(--muted);background:var(--card)}
.ad-top{min-height:120px}
.ad-in-article{min-height:250px}
.ad-sidebar{min-height:280px}
/* Author box */
.author-box{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--border);border-radius:14px;padding:14px;background:var(--card);margin-top:18px}
.author-avatar{width:48px;height:48px;border-radius:999px;background:linear-gradient(135deg,#7c5cff,#22d3ee)}
.author-meta{font-size:14px}

/* === Mobile Drawer v2 === */
.hamburger{display:none;cursor:pointer;border:1px solid var(--border);padding:10px 12px;border-radius:12px;background:var(--card)}
.hamburger:focus{outline:2px solid var(--accent)}
@media(max-width:860px){ .menu{display:none} .hamburger{display:inline-flex} }
.drawer{position:fixed;top:0;right:0;bottom:0;width:92vw;max-width:420px;
  background:var(--card);border-left:1px solid var(--border);transform:translateX(100%);
  transition:transform .22s ease;z-index:100;box-shadow:0 20px 60px rgba(0,0,0,.35);
  padding:calc(env(safe-area-inset-top,0) + 18px) 18px 28px 18px; display:flex; flex-direction:column; gap:16px}
.drawer.open{transform:translateX(0)}
.drawer header{display:flex;align-items:center;justify-content:space-between;gap:8px}
.drawer .close-btn{border:1px solid var(--border);background:var(--bg2);padding:8px 10px;border-radius:10px;cursor:pointer}
.drawer .group{border-top:1px solid var(--border);padding-top:10px;margin-top:6px}
.drawer a{display:block;padding:12px 14px;border-radius:12px;border:1px solid var(--border);margin-bottom:10px;background:var(--bg2);font-size:16px}
.drawer a:hover{background:var(--bg)}
.drawer .subtle{border:none;background:transparent;padding:6px 2px;margin:0;color:var(--muted)}
.drawer .section-title{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;margin:8px 2px}
.drawer-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .2s;z-index:90}
.drawer-backdrop.show{opacity:1;pointer-events:auto}
/* Prevent body scroll while drawer open */
.body-lock{overflow:hidden;touch-action:none}

/* Desktop 'More' dropdown */
.more{position:relative}
.more-toggle{border:1px solid var(--border);background:var(--card);padding:8px 12px;border-radius:10px;cursor:pointer}
.more-menu{position:absolute;right:0;top:42px;background:var(--card);border:1px solid var(--border);border-radius:12px;min-width:200px;box-shadow:var(--shadow);display:none;padding:6px}
.more-menu.open{display:block}
.more-menu a{display:block;padding:10px 12px;border-radius:10px}
.more-menu a:hover{background:var(--bg2)}
/* Header compact spacing */
.nav-inner{gap:12px}

/* Brand using SVG logo */
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:30px;width:auto;display:block}
.brand .wordmark{font-weight:800;letter-spacing:.2px}
/* 'More' link styled like others */
.more{position:relative}
.more > .more-link{display:inline-block;padding:8px 10px;border-radius:10px}
.more > .more-link:hover{background:var(--bg2)}
.more-menu{position:absolute;right:0;top:40px;background:var(--card);border:1px solid var(--border);border-radius:12px;min-width:220px;box-shadow:var(--shadow);display:none;padding:6px}
.more-menu.open{display:block}
.more-menu a{display:block;padding:10px 12px;border-radius:10px}
.more-menu a:hover{background:var(--bg2)}
/* Remove old pill button style if present */
.more-toggle,.more button.more-toggle{all:unset}

/* === Mobile polish === */
@media (max-width: 860px){
  .nav{background:rgba(255,255,255,.92)}
  body:not(.light) .nav{background:rgba(13,17,23,.92)}
  .nav-inner{padding:10px 16px}
  .brand img{height:28px}
  .brand .wordmark{display:none} /* icon-only on mobile */
  .hamburger{padding:12px 14px;border-radius:12px;font-size:18px}
  .drawer{width:94vw;max-width:420px;padding:24px 18px 28px 18px}
  .drawer a{font-size:18px;padding:14px 14px}
  .drawer .section-title{font-size:12px;margin:8px 2px}
  .drawer .close-btn{padding:10px 12px}
}
/* Slightly softer header shadow */
.header-shadow{box-shadow:0 10px 30px rgba(0,0,0,.06)}
/* Hover color match for all top links including 'More' */
.menu a:hover, .more > .more-link:hover{background:var(--bg2)}

/* === Mobile article readability pass === */
@media (max-width: 860px){
  html,body{line-height:1.75}
  .container{padding:18px}
  .responsive{grid-template-columns:1fr;gap:16px}
  .post-title{font-size:26px;line-height:1.25;margin-top:6px;margin-bottom:8px}
  h1{font-size:28px}
  h2{font-size:22px;margin:16px 0 8px}
  h3{font-size:18px;margin:14px 0 6px}
  p,li{font-size:16.5px;margin-bottom:12px}
  .small{font-size:14px}
  .img{height:160px}
  pre.code{font-size:13px;padding:12px;white-space:pre-wrap;word-break:break-word}
  table{display:block;overflow-x:auto;width:100%}
  th,td{white-space:nowrap}
  .ad-slot{min-height:80px}
  .ad-top{min-height:100px}
  .ad-in-article{min-height:160px}
  .ad-sidebar{min-height:140px}
  input,textarea,select{font-size:16px}
}
/* Slightly larger base copy for better legibility overall */
@media (max-width: 420px){
  p,li{font-size:17px}
}