@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root{
  --bg-base:#0A0E14;
  --bg-panel:#121821;
  --bg-panel-2:#1A222E;
  --border:#232C39;
  --text-primary:#E7ECF2;
  --text-dim:#8B96A5;
  --gold:#E8B04B;
  --red:#E5484D;
  --green:#3DD68C;
  --blue:#4FA3E3;
  --mono: 'IBM Plex Mono', monospace;
  --sans: 'IBM Plex Sans', sans-serif;
}

*{box-sizing:border-box; margin:0; padding:0;}

html,body{
  background:var(--bg-base);
  color:var(--text-primary);
  font-family:var(--sans);
  min-height: 100vh;
}

body{
  background-image:
    radial-gradient(circle at 15% 10%, rgba(79,163,227,0.06), transparent 40%),
    radial-gradient(circle at 85% 90%, rgba(232,176,75,0.05), transparent 40%);
  display: flex;
  flex-direction: column;
}

/* ===== HEADER ===== */
header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 28px;
  border-bottom:1px solid var(--border);
  background:rgba(18,24,33,0.6);
  backdrop-filter:blur(6px);
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.12em;
  color:var(--text-dim);
  text-transform:uppercase;
  text-decoration: none;
}
.brand strong{color:var(--text-primary); font-weight:600;}

.badge{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.1em;
  padding:7px 14px;
  border-radius:6px;
  border:1px solid var(--border);
  background:var(--bg-panel-2);
}
.badge .light{
  width:9px;height:9px;border-radius:50%;
  box-shadow:0 0 0 rgba(0,0,0,0);
}
.badge[data-state="granted"]{ border-color:rgba(61,214,140,0.4); background:rgba(61,214,140,0.08); color:var(--green);}
.badge[data-state="granted"] .light{background:var(--green); color:var(--green);}

/* ===== MAIN ===== */
main{
  flex: 1;
  width:100%;
  max-width:980px;
  margin:0 auto;
  padding:34px 32px 60px;
}

/* ===== TYPOGRAPHY & MARKDOWN ===== */
.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:14px;
  display:flex;
  align-items:center;
  gap:10px;
}
.eyebrow::after{
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(90deg, var(--border), transparent);
}

.post-content h1, .post-content h2, .post-content h3, .post-content h4 {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  margin-top: 1.5em;
  margin-bottom: 0.75em;
  line-height: 1.2;
}

.post-content h1 { font-size: clamp(28px, 4vw, 42px); }
.post-content h2 { font-size: clamp(24px, 3vw, 34px); }
.post-content h3 { font-size: clamp(20px, 2.5vw, 26px); }
.post-content h4 { font-size: 18px; }

h1.post-title {
  font-family:var(--mono);
  font-weight:700;
  font-size:clamp(28px,4vw,42px);
  line-height:1.15;
  margin-bottom:14px;
  letter-spacing:-0.01em;
  color: var(--text-primary);
  text-transform: none;
  display: block;
}
h1.post-title::after {
  display: none;
}

.post-content p { font-size:17px; line-height:1.75; color:var(--text-primary); margin-bottom:18px; }
.post-content a { color:var(--blue); text-decoration:none; }
.post-content a:hover { text-decoration:underline; }

/* Lists styled as Box */
.post-content ul, .post-content ol {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px 24px 24px 48px;
  margin: 24px 0;
  font-size: 17px;
  line-height: 1.75;
  color: var(--text-primary);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.post-content ul ul, .post-content ul ol, 
.post-content ol ul, .post-content ol ol {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 12px 0 0 28px;
  margin: 0;
  box-shadow: none;
}
.post-content li {
  margin-bottom: 12px;
}
.post-content li:last-child {
  margin-bottom: 0;
}
.post-content ul li::marker, .post-content ol li::marker {
  color: var(--gold);
  font-family: var(--mono);
  font-weight: 700;
}

/* Highlight semantics */
.post-content mark, mark { background:none; color:inherit; padding:0 3px; border-radius:3px; font-weight:600;}
.post-content mark.mk-bad { color:var(--red); }
.post-content mark.mk-good { color:var(--green); }
.post-content mark.mk-key { color:var(--gold); }
.post-content mark.mk-link { color:var(--blue); }

.strike { color: var(--red); }
.mk-good { color: var(--green); }
.mk-key { color: var(--gold); }
.mk-link { color: var(--blue); }

/* Category Navigation Menu */
.category-nav {
  display: flex;
  gap: 20px;
  align-items: center;
  font-family: var(--mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.category-nav a {
  color: var(--text-dim);
  text-decoration: none;
  transition: color 0.2s ease;
}
.category-nav a:hover {
  color: var(--text-primary);
}
.category-nav a.active {
  color: var(--gold);
  font-weight: 700;
}

/* Blockquote */
.post-content blockquote {
  font-family:var(--mono);
  font-size:17px;
  line-height:1.6;
  color:var(--text-primary);
  border-left:3px solid var(--gold);
  padding:8px 0 8px 20px;
  margin:20px 0;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 0 6px 6px 0;
}
.post-content blockquote p { font-size: inherit; color: inherit; margin-bottom: 0; }
.post-content blockquote strong, .post-content blockquote b { color: var(--gold); font-weight: 600; }

/* Table */
.post-content table { width:100%; border-collapse:collapse; margin:10px 0 16px; font-size:14px; }
.post-content th, .post-content td { text-align:left; padding:9px 12px; border-bottom:1px solid var(--border); }
.post-content th { font-family:var(--mono); font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-dim); font-weight:600; }
.post-content td { color:var(--text-primary); }

/* Code Block */
.post-content code { 
  font-family:var(--mono); 
  font-size:14px; 
  background:var(--bg-panel); 
  border:1px solid var(--border); 
  padding:2px 6px; 
  border-radius:4px; 
}
.post-content pre {
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:8px;
  padding:12px 16px;
  color:var(--text-primary);
  overflow-x:auto;
  line-height:1.6;
  margin:14px 0;
}
.post-content pre code {
  background:none;
  border:none;
  padding:0;
  font-size:13.5px;
}

/* Cards & Grid mapping for HTML injection */
.grid { display:grid; gap:14px; margin:8px 0 6px; }
.grid.cols-2 { grid-template-columns:1fr 1fr; }
.grid.cols-3 { grid-template-columns:1fr 1fr 1fr; }
.grid.cols-4 { grid-template-columns:repeat(4,1fr); }
@media (max-width:760px){
  .grid.cols-2, .grid.cols-3, .grid.cols-4{ grid-template-columns:1fr; }
}

.card{
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:10px;
  padding:16px 18px;
}
.card h3{ font-family:var(--mono); font-size:14px; margin-bottom:8px; margin-top:0; color:var(--text-primary); }
.card p{ font-size:13.5px; color:var(--text-dim); margin-bottom:0; }
.card.accent-red{ border-color:rgba(229,72,77,0.35); }
.card.accent-red h3{ color:var(--red); }
.card.accent-green{ border-color:rgba(61,214,140,0.35); }
.card.accent-green h3{ color:var(--green); }
.card.accent-gold{ border-color:rgba(232,176,75,0.35); }
.card.accent-gold h3{ color:var(--gold); }
.card.accent-blue{ border-color:rgba(79,163,227,0.35); }
.card.accent-blue h3{ color:var(--blue); }

/* Flow Arrows */
.flow{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:14px 0; }
.flow .step{
  font-family:var(--mono);
  font-size:13px;
  background:var(--bg-panel-2);
  border:1px solid var(--border);
  border-radius:8px;
  padding:10px 16px;
}
.flow .arrow{ color:var(--text-dim); font-size:16px; }
.flow.vertical{ flex-direction:column; align-items:flex-start; }
.flow.vertical .arrow{ padding-left:12px; }

/* URL Row */
.urlrow{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:10px 0; }
.urlrow .lbl{ font-family:var(--mono); font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.08em; width:90px; }
.urlrow code{ font-family:var(--mono); font-size:14px; background:var(--bg-panel); border:1px solid var(--border); padding:6px 12px; border-radius:6px; }

@media (max-width:640px){
  header{ padding:10px 16px; }
  .brand span.full{ display:none; }
  main { padding: 22px 18px 40px; }
}

/* Post list in home */
.post-list-item {
  display: block;
  text-decoration: none;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 16px;
  transition: border-color 0.2s ease;
}
.post-list-item:hover { border-color: var(--gold); }
.post-list-item h2 { font-family: var(--mono); font-size: 20px; color: var(--text-primary); margin: 0 0 10px 0; }
.post-list-item .date { font-family: var(--mono); font-size: 12px; color: var(--text-dim); margin-bottom: 12px; }
.post-list-item p { font-size: 14px; color: var(--text-dim); margin: 0; line-height: 1.6; }

/* Category Navigation Menu */
.category-nav {
  display: flex;
  gap: 24px;
  padding: 0 40px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 40px;
  font-family: var(--mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  overflow-x: auto;
}
.category-nav a {
  color: var(--text-dim);
  text-decoration: none;
  padding-bottom: 12px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.category-nav a:hover {
  color: var(--text-primary);
  border-bottom-color: var(--border);
}
.category-nav a.active {
  color: var(--gold);
  border-bottom-color: var(--gold);
  font-weight: 700;
}

/* Category Cards for Homepage */
.cat-card {
  padding: 40px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.cat-card h2 {
  font-family: var(--mono);
  font-size: 24px;
  margin: 0 0 10px 0;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.cat-card p {
  color: var(--text-dim);
  font-size: 14px;
  margin: 0;
  font-family: var(--mono);
}