:root {
  --bg:#0b0f0d;
  --panel:#0f1513;
  --panel-2:#0c1310;
  --border:#1e2a25;
  --text:#e9ffef;
  --muted:#a0cbb7;
  --accent:#33f6a9;
  --link:#33f6a9;
}

* { box-sizing:border-box }
html,body { margin:0; padding:0 }
body {
  background:var(--bg);
  color:var(--text);
  font:16px/1.7 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,Arial,"Apple Color Emoji","Segoe UI Emoji";
}

a {
  color:var(--link);
  text-decoration:none;
  position:relative;
  transition:color .25s ease-in-out;
}
a::after {
  content:"";
  position:absolute;
  left:0; bottom:-2px;
  height:2px; width:0;
  background:var(--accent);
  transition:width .25s ease-in-out;
}
a:hover { color:var(--accent) }
a:hover::after { width:100% }

.wrapper {
  display:grid;
  grid-template-columns:280px 1fr;
  min-height:100dvh;
}
@media (max-width:960px){
  .wrapper{ grid-template-columns:1fr }
  .sidebar{ position:sticky; top:0; z-index:30 }
}

.sidebar {
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border-right:1px solid var(--border);
  padding:1rem 1.25rem;
}
.brand { font-weight:800; font-size:1.25rem }
.brand .sub {
  display:block;
  color:var(--muted);
  font-weight:500;
  font-size:.95rem;
  margin-top:.1rem;
}
.nav { margin-top:1rem }
.nav a {
  display:block;
  padding:.4rem 0;
  border-left:2px solid transparent;
}
.nav a:hover{ border-left-color:var(--accent) }

.content { padding:1.5rem }
.container { max-width:1040px; margin:0 auto }

.header {
  display:flex;
  justify-content:flex-end;
  align-items:center;
  margin-bottom:.75rem;
}
.header .search{ display:flex; gap:.5rem }
.header input[type="search"] {
  background:var(--panel-2);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:8px;
  padding:.4rem .6rem;
}

.card {
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:0 0 0 1px rgba(0,0,0,.05);
}

h1,h2,h3,h4{ line-height:1.3 }
h1{ font-size:2rem; margin:.5rem 0 .25rem }
h2{ font-size:1.6rem; margin-top:1.5rem }
h3{ font-size:1.25rem; margin-top:1rem }
p{ margin:0 0 1rem }

.post{ padding:1.25rem }
.post-meta{
  color:var(--muted);
  margin-bottom:.75rem;
  font-size:.95rem;
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
}
.post-content img{ max-width:100%; height:auto; border-radius:8px }
.post-content blockquote{
  border-left:4px solid var(--accent);
  padding:.2rem 1rem;
  margin:1rem 0;
  color:var(--muted);
  background:#0d1412;
  border-radius:6px;
}
.post-content pre{
  background:#0a1311;
  color:#c6f7e2;
  border:1px solid var(--border);
  border-radius:10px;
  padding:.85rem 1rem;
  white-space:pre-wrap;
  word-break:break-word;
  overflow-wrap:anywhere;
  overflow:auto;
  line-height:1.65;
}
.post-content code{
  background:#07110e;
  color:var(--accent);
  border:1px solid var(--border);
  border-radius:6px;
  padding:.1em .35em;
  line-height:inherit;
  white-space:break-spaces;
}
.post-content pre>code{
  background:transparent;
  border:0;
  padding:0;
  display:block;
  white-space:inherit;
}
.post-content table{ width:100%; border-collapse:collapse }
.post-content th,.post-content td{
  padding:.35rem .5rem;
  border-bottom:1px dashed var(--border);
  text-align:left;
  vertical-align:top;
}

.post-list{ list-style:none; margin:0; padding:0 }
.post-item{ padding:.75rem 0; border-bottom:1px dashed var(--border) }
.post-item a{ font-weight:700 }

.site-footer{
  color:var(--muted);
  padding:1rem 1.25rem;
  border-top:1px solid var(--border);
}

/* Home cards & layout */
.home-grid{
  display:grid;
  grid-template-columns:1fr 300px;
  gap:1rem;
}
@media (max-width:1100px){ .home-grid{ grid-template-columns:1fr } }
.card-list{ display:flex; flex-direction:column; gap:1rem }
.post-card{
  display:grid;
  grid-template-columns:1fr 280px;
  gap:1rem;
  padding:1rem;
}
.post-card .thumb{
  display:flex;
  align-items:center;
  justify-content:center;
  background:#121a17;
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
}
.post-card .thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
@media (max-width:900px){
  .post-card{ grid-template-columns:1fr }
  .post-card .thumb{ height:180px }
}
.post-card .title{ font-size:1.25rem; margin:0 0 .35rem }
.post-card .excerpt{ color:var(--muted); margin-bottom:.5rem }
.meta{
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:.95rem;
}
.aside-section{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  padding:.75rem .9rem;
  margin-bottom:.9rem;
}
.aside-section h3{ font-size:1rem; margin:0 0 .5rem; color:var(--muted) }
.tag-chip{
  display:inline-block;
  padding:.2rem .5rem;
  border:1px solid var(--border);
  border-radius:999px;
  margin:.2rem .3rem 0 0;
  color:var(--muted);
}

/* Article layout with right sidebar */
.article-grid{
  display:grid;
  grid-template-columns:1fr 300px;
  gap:1rem;
}
@media (max-width:1100px){ .article-grid{ grid-template-columns:1fr } }
.article-aside{ position:sticky; top:1rem; align-self:start }
.aside-card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  padding:.75rem .9rem;
  margin-bottom:.9rem;
}
.aside-card h3{ font-size:1rem; margin:0 0 .5rem; color:var(--muted) }
.toc{ max-height:60vh; overflow:auto }
.toc a{ display:block; padding:.15rem 0; text-decoration:none }
.toc a.active{ color:var(--accent); font-weight:700 }
.toc .toc-h2{ font-weight:600 }
.toc .toc-h3{ padding-left:.75rem; opacity:.9 }

/* Breadcrumbs & meta badges */
.breadcrumbs{ color:var(--muted); font-size:.95rem; margin-bottom:.35rem }
.breadcrumbs a{ color:var(--muted); text-decoration:none }
.breadcrumbs .sep{ opacity:.6; padding:0 .25rem }
.badge{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  background:var(--panel-2);
  border:1px solid var(--border);
  border-radius:999px;
  padding:.15rem .5rem;
}
.badge .dot{
  width:6px; height:6px;
  border-radius:999px;
  background:var(--accent);
  display:inline-block;
}
.meta-line{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  align-items:center;
  color:var(--muted);
}

/* Subtle fade-in */
.post h1,.post .post-content{ animation:fadeUp .35s ease both }
@keyframes fadeUp{ from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }

/* Anti-glow & safety wrapping for code */
.post-content pre,
.post-content code,
.post-content pre *,
.post-content code *,
pre[class*="language-"],
code[class*="language-"],
pre[class*="language-"] *,
code[class*="language-"] * {
  text-shadow:none!important;
  filter:none!important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-variant-ligatures:none;
}

/* --- Mobile: auto-hide sidebar on scroll --- */
@media (max-width: 960px) {
  .sidebar{
    position: sticky;
    top: 0;
    z-index: 30;
    transition: transform .2s ease;
    will-change: transform;
  }
  body.hide-nav .sidebar{
    transform: translateY(-110%);
  }
}

/* Sidebar profile avatar */
.sidebar-profile {
  text-align: center;
  padding: 1.2rem 1rem;
}

.sidebar-profile .profile-img {
  width: 100px;
  height: 100px;
  border-radius: 50%;   /* <-- questo la rende rotonda */
  object-fit: cover;    /* mantiene il crop corretto */
  margin-bottom: .8rem;
  border: 2px solid var(--border);
  background: var(--panel-2);
  display: inline-block;
}

.about-image {
  text-align: center;
  margin-bottom: 1.5rem;
}

.about-image img {
  max-width: 220px;  /* limita la larghezza così non diventa enorme */
  height: auto;
  border-radius: 50%; /* se vuoi tonda, togli se la vuoi quadrata */
  border: 2px solid var(--border);
  background: var(--panel-2);
}

.about-image .caption {
  margin-top: .5rem;
  font-size: .95rem;
  color: var(--muted);
}