/* Cheirinho de Dev - Tema tecnológico com alto contraste */
:root{
  --radius: 18px;
  --bg: #0b1020;
  --surface: rgba(255,255,255,.06);
  --surface-2: rgba(255,255,255,.10);
  --text: #e8eefc;
  --muted: rgba(232,238,252,.70);
  --border: rgba(255,255,255,.12);
  --brand: #7c5cff;
  --brand-2:#22d3ee;
  --ok:#22c55e;
  --warn:#f59e0b;
  --danger:#ef4444;
  --shadow: 0 12px 30px rgba(0,0,0,.35);
  --code-bg: rgba(0,0,0,.35);
  --link: #7dd3fc;
}

html:not(.dark){
  --bg:#f6f7fb;
  --surface:#ffffff;
  --surface-2:#f2f4fb;
  --text:#0b1220;
  --muted: rgba(11,18,32,.70);
  --border: rgba(11,18,32,.12);
  --shadow: 0 10px 24px rgba(16,24,40,.10);
  --code-bg:#0b1220;
  --link:#2563eb;
}

body{
  background: radial-gradient(1200px 600px at 20% -10%, rgba(124,92,255,.18), transparent 60%),
              radial-gradient(900px 500px at 80% 0%, rgba(34,211,238,.16), transparent 55%),
              var(--bg);
  color: var(--text);
}

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

.navbar{
  background: rgba(255,255,255,.75) !important;
  backdrop-filter: blur(10px);
}
html.dark .navbar{
  background: rgba(13,18,34,.75) !important;
}

.navbar-brand{
  font-weight: 900;
  letter-spacing: .2px;
}

.card{
  border-radius: var(--radius);
  border-color: var(--border);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.btn, .form-control, .form-select{
  border-radius: 14px;
}

.badge{
  border-radius: 999px;
}

.text-muted, .small.text-muted{ color: var(--muted) !important; }

.hero{
  border: 1px solid var(--border);
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(124,92,255,.22), rgba(34,211,238,.18));
  box-shadow: var(--shadow);
  overflow: hidden;
  position: relative;
}
.hero:before{
  content:'';
  position:absolute; inset:-2px;
  background: radial-gradient(600px 240px at 10% 10%, rgba(255,255,255,.16), transparent 60%),
              radial-gradient(700px 280px at 90% 20%, rgba(255,255,255,.12), transparent 60%);
  pointer-events:none;
}

.card-hover:hover{
  transform: translateY(-2px);
  transition: transform .15s ease;
}

.post-content img, .post-content video{
  max-width:100%;
  height:auto;
  border-radius: 14px;
  border: 1px solid var(--border);
}

.post-content pre{
  background: var(--code-bg);
  color: #e8eefc;
  padding: 1rem;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  overflow:auto;
  position: relative;
}
html:not(.dark) .post-content pre{
  color:#e8eefc;
}

.post-content code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.toc{ position: sticky; top: 90px; }
.toc .card{ box-shadow: none; background: var(--surface); }

.footer{ opacity: .85; }

.progress-bar-top{
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  z-index: 9999;
}

.back-to-top{
  position: fixed; right: 18px; bottom: 18px;
  display:none;
}
.back-to-top.show{ display:block; }