/* ─── Reset ─── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ─── Tokens ─── */
:root {
  --bg:        #0f0f0f;
  --surface:   #161616;
  --border:    #222222;
  --text:      #e8e8e8;
  --muted:     #888888;
  --accent:    #d4a96a;
  --accent-dim:#8b6d42;
  --max-w:     680px;
  --font-sans: "Georgia", "Times New Roman", serif;
  --font-mono: "SFMono-Regular", "Consolas", "Liberation Mono", monospace;
}

/* ─── Base ─── */
html {
  font-size: 18px;
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  padding: 0 1.25rem;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

/* ─── Layout ─── */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
}

/* ─── Nav ─── */
nav {
  border-bottom: 1px solid var(--border);
  padding: 1.5rem 0;
}

.nav-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.nav-brand {
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 0.02em;
  color: var(--text);
}

.nav-links {
  display: flex;
  gap: 2rem;
  list-style: none;
}

.nav-links a {
  font-size: 0.85rem;
  color: var(--muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: color 0.15s;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--text);
}

/* ─── Page Header ─── */
.page-header {
  padding: 5rem 0 3rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4rem;
}

.page-header h1 {
  font-size: clamp(2rem, 5vw, 2.75rem);
  line-height: 1.2;
  font-weight: normal;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}

.page-header .lead {
  font-size: 1.05rem;
  color: var(--muted);
  max-width: 520px;
  line-height: 1.65;
}

/* ─── Home Page ─── */
.home-intro {
  padding: 6rem 0 4rem;
}

.home-intro .greeting {
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.5rem;
}

.home-intro h1 {
  font-size: clamp(2.25rem, 6vw, 3.25rem);
  line-height: 1.15;
  font-weight: normal;
  letter-spacing: -0.025em;
  margin-bottom: 1.75rem;
  color: var(--text);
}

.home-intro p {
  font-size: 1.05rem;
  color: var(--muted);
  max-width: 500px;
  margin-bottom: 0.9rem;
  line-height: 1.7;
}

.home-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 4rem 0;
}

.home-recent-label {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2.5rem;
}

/* ─── Post List ─── */
.post-list {
  list-style: none;
}

.post-item {
  padding: 2rem 0;
  border-bottom: 1px solid var(--border);
}

.post-item:first-child {
  border-top: 1px solid var(--border);
}

.post-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.6rem;
}

.post-date {
  font-size: 0.8rem;
  color: var(--muted);
  font-family: var(--font-mono);
}

.post-tag {
  font-size: 0.72rem;
  color: var(--accent-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.15em 0.55em;
  border: 1px solid var(--accent-dim);
  border-radius: 2px;
}

.post-item h2 {
  font-size: 1.25rem;
  font-weight: normal;
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin-bottom: 0.5rem;
}

.post-item h2 a {
  color: var(--text);
  transition: color 0.15s;
}

.post-item h2 a:hover {
  color: var(--accent);
}

.post-excerpt {
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.65;
  margin-bottom: 0.75rem;
}

.read-more {
  font-size: 0.8rem;
  color: var(--accent-dim);
  letter-spacing: 0.04em;
  transition: color 0.15s;
}

.read-more:hover {
  color: var(--accent);
}

/* ─── Article / Post Page ─── */
.post-page {
  padding-bottom: 6rem;
}

.post-page-header {
  padding: 5rem 0 3rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 3.5rem;
}

.post-page-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.post-page-header h1 {
  font-size: clamp(1.85rem, 4.5vw, 2.75rem);
  font-weight: normal;
  line-height: 1.2;
  letter-spacing: -0.025em;
  margin-bottom: 1.25rem;
}

.post-page-header .post-lead {
  font-size: 1.1rem;
  color: var(--muted);
  line-height: 1.65;
}

/* ─── Article Body ─── */
.article-body {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text);
}

.article-body h2 {
  font-size: 1.35rem;
  font-weight: normal;
  letter-spacing: -0.015em;
  margin: 2.5rem 0 1rem;
  color: var(--text);
}

.article-body h3 {
  font-size: 1.1rem;
  font-weight: bold;
  margin: 2rem 0 0.75rem;
  color: var(--text);
}

.article-body p {
  margin-bottom: 1.4rem;
}

.article-body p:last-child {
  margin-bottom: 0;
}

.article-body a {
  color: var(--accent);
  border-bottom: 1px solid var(--accent-dim);
  transition: border-color 0.15s, color 0.15s;
}

.article-body a:hover {
  color: var(--text);
  border-color: var(--text);
}

.article-body ul,
.article-body ol {
  margin: 0 0 1.4rem 1.5rem;
}

.article-body li {
  margin-bottom: 0.4rem;
}

.article-body blockquote {
  border-left: 3px solid var(--accent-dim);
  padding: 0.5rem 0 0.5rem 1.5rem;
  margin: 2rem 0;
  color: var(--muted);
  font-style: italic;
}

.article-body code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--surface);
  color: var(--accent);
  padding: 0.15em 0.4em;
  border-radius: 3px;
}

.article-body pre {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1.25rem 1.5rem;
  margin: 1.75rem 0;
  overflow-x: auto;
}

.article-body pre code {
  background: none;
  color: var(--text);
  padding: 0;
  font-size: 0.875em;
  line-height: 1.65;
}

.article-body hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2.5rem 0;
}

/* ─── Post Footer Nav ─── */
.post-nav {
  margin-top: 4rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  gap: 2rem;
}

.post-nav a {
  font-size: 0.85rem;
  color: var(--muted);
  transition: color 0.15s;
  letter-spacing: 0.02em;
}

.post-nav a:hover {
  color: var(--accent);
}

.post-nav .back-arrow {
  margin-right: 0.4em;
}

/* ─── Footer ─── */
footer {
  border-top: 1px solid var(--border);
  padding: 2.5rem 0;
  margin-top: 4rem;
}

.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.footer-inner p {
  font-size: 0.78rem;
  color: var(--muted);
}

.footer-links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
}

.footer-links a {
  font-size: 0.78rem;
  color: var(--muted);
  letter-spacing: 0.05em;
  transition: color 0.15s;
}

.footer-links a:hover {
  color: var(--text);
}

/* ─── About Page ─── */
.about-section {
  padding: 5rem 0;
}

.about-section .about-name {
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

.about-section h1 {
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: normal;
  letter-spacing: -0.02em;
  margin-bottom: 2.5rem;
  line-height: 1.2;
}

.about-body {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text);
}

.about-body p {
  margin-bottom: 1.4rem;
  color: var(--muted);
}

.about-body p:first-child {
  color: var(--text);
  font-size: 1.05rem;
}

.about-links {
  margin-top: 3rem;
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}

.about-links a {
  font-size: 0.85rem;
  color: var(--accent-dim);
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--accent-dim);
  padding-bottom: 0.15em;
  transition: color 0.15s, border-color 0.15s;
}

.about-links a:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* ─── Responsive ─── */
@media (max-width: 600px) {
  html { font-size: 16px; }
  .nav-links { gap: 1.25rem; }
  .post-nav { flex-direction: column; gap: 0.75rem; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
}
#comments div {
  margin-bottom: 1rem;
  padding: 0.8rem;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
/* ─── Add these styles to your existing style.css ─── */

/* Comments Section */
.comments-section {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

.comments-section h3 {
  font-size: 1.1rem;
  font-weight: normal;
  margin-bottom: 2rem;
  color: var(--text);
}

.comments-list {
  margin-bottom: 2.5rem;
}

.comment {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--border);
}

.comment:first-child {
  border-top: 1px solid var(--border);
}

.comment-header {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.comment-name {
  font-weight: 500;
  color: var(--text);
}

.comment-date {
  font-size: 0.75rem;
  color: var(--muted);
  font-family: var(--font-mono);
}

.comment-message {
  color: var(--muted);
  line-height: 1.6;
  font-size: 0.95rem;
}

.no-comments {
  color: var(--muted);
  font-style: italic;
  padding: 1.5rem 0;
}

/* Comment Form */
.comment-form {
  margin-top: 2rem;
}

.form-group {
  margin-bottom: 1.25rem;
}

.comment-form input,
.comment-form textarea {
  width: 100%;
  padding: 0.875rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  border-radius: 4px;
  transition: border-color 0.15s;
}

.comment-form input:focus,
.comment-form textarea:focus {
  outline: none;
  border-color: var(--accent-dim);
}

.comment-form textarea {
  resize: vertical;
  min-height: 100px;
}

.comment-submit {
  background: transparent;
  border: 1px solid var(--accent-dim);
  color: var(--accent);
  padding: 0.75rem 1.75rem;
  font-size: 0.85rem;
  font-family: var(--font-sans);
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.15s;
  letter-spacing: 0.02em;
}

.comment-submit:hover {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

.comment-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* No posts message */
.no-posts {
  color: var(--muted);
  text-align: center;
  padding: 3rem 0;
  font-style: italic;
}

/* Admin panel styles */
.admin-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.admin-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2rem;
  margin-bottom: 2rem;
}

.admin-section h3 {
  margin-bottom: 1.5rem;
  font-weight: normal;
  color: var(--accent);
}

.admin-input,
.admin-textarea,
.admin-select {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  border-radius: 4px;
  margin-bottom: 1rem;
}

.admin-textarea {
  min-height: 300px;
  resize: vertical;
}

.admin-btn {
  background: var(--accent);
  color: var(--bg);
  border: none;
  padding: 0.75rem 1.5rem;
  font-size: 0.9rem;
  cursor: pointer;
  border-radius: 4px;
  margin-right: 0.75rem;
  margin-bottom: 0.75rem;
  transition: opacity 0.15s;
}

.admin-btn:hover {
  opacity: 0.9;
}

.admin-btn.secondary {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}

.admin-post-item {
  padding: 1rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.admin-post-title {
  color: var(--text);
}

.admin-post-actions {
  display: flex;
  gap: 0.5rem;
}

.admin-delete-btn {
  background: transparent;
  border: 1px solid #6b3a3a;
  color: #d47575;
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.8rem;
}

.admin-edit-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.8rem;
}

/* Login page */
.login-container {
  max-width: 400px;
  margin: 100px auto;
  padding: 2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.login-container h2 {
  margin-bottom: 2rem;
  font-weight: normal;
  text-align: center;
}

.login-input {
  width: 100%;
  padding: 0.875rem 1rem;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1rem;
  border-radius: 4px;
  margin-bottom: 1rem;
}

.login-btn {
  width: 100%;
  background: var(--accent);
  color: var(--bg);
  border: none;
  padding: 0.875rem;
  font-size: 1rem;
  cursor: pointer;
  border-radius: 4px;
  margin-top: 1rem;
}

/* Admin Panel Enhanced Styles */
.logout-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 0.3rem 0.8rem;
  font-size: 0.75rem;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.15s;
  font-family: var(--font-sans);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.logout-btn:hover {
  border-color: #6b3a3a;
  color: #d47575;
}

.admin-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
}

.admin-container h1 {
  font-size: 2rem;
  font-weight: normal;
  letter-spacing: -0.02em;
  margin-bottom: 2rem;
  color: var(--text);
}

.admin-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2rem;
  margin-bottom: 2rem;
}

.admin-section h3 {
  margin-bottom: 1.75rem;
  font-weight: normal;
  color: var(--accent);
  font-size: 1.1rem;
  letter-spacing: 0.02em;
}

.admin-input,
.admin-textarea,
.admin-select {
  width: 100%;
  padding: 0.875rem 1rem;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  border-radius: 6px;
  margin-bottom: 1rem;
  transition: border-color 0.15s;
}

.admin-input:focus,
.admin-textarea:focus,
.admin-select:focus {
  outline: none;
  border-color: var(--accent-dim);
}

.admin-textarea {
  min-height: 350px;
  resize: vertical;
  line-height: 1.6;
}

.admin-form-actions {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
}

.admin-btn {
  background: var(--accent);
  color: var(--bg);
  border: none;
  padding: 0.75rem 1.75rem;
  font-size: 0.9rem;
  cursor: pointer;
  border-radius: 6px;
  transition: opacity 0.15s;
  font-family: var(--font-sans);
  font-weight: 500;
}

.admin-btn:hover {
  opacity: 0.9;
}

.admin-btn.secondary {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}

.admin-btn.secondary:hover {
  background: var(--surface);
  border-color: var(--muted);
}

.admin-post-item {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.admin-post-item:first-child {
  border-top: 1px solid var(--border);
}

.admin-post-info {
  flex: 1;
}

.admin-post-title {
  color: var(--text);
  font-size: 1rem;
  display: block;
  margin-bottom: 0.25rem;
}

.admin-post-meta {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.admin-post-date {
  color: var(--muted);
  font-size: 0.75rem;
  font-family: var(--font-mono);
}

.admin-post-type {
  color: var(--accent-dim);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--accent-dim);
  border-radius: 3px;
}

.admin-post-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

.admin-delete-btn {
  background: transparent;
  border: 1px solid #6b3a3a;
  color: #d47575;
  padding: 0.35rem 0.875rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.75rem;
  transition: all 0.15s;
  font-family: var(--font-sans);
}

.admin-delete-btn:hover {
  background: #6b3a3a;
  color: #ffb3b3;
}

.admin-edit-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 0.35rem 0.875rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.75rem;
  transition: all 0.15s;
  font-family: var(--font-sans);
}

.admin-edit-btn:hover {
  border-color: var(--accent-dim);
  color: var(--accent);
}

/* Responsive */
@media (max-width: 600px) {
  .admin-container {
    padding: 1.5rem 1rem;
  }
  
  .admin-section {
    padding: 1.5rem;
  }
  
  .admin-post-item {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .admin-post-actions {
    margin-top: 0.75rem;
  }
  
  .admin-form-actions {
    flex-direction: column;
  }
}

.admin-post-status {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
}

.admin-post-status.published {
  background: rgba(212, 169, 106, 0.15);
  color: var(--accent);
  border: 1px solid var(--accent-dim);
}

.admin-post-status.draft {
  background: rgba(136, 136, 136, 0.1);
  color: var(--muted);
  border: 1px solid var(--border);
}

/* Quill Editor Theme Overrides */
.ql-toolbar.ql-snow {
  border: 1px solid var(--border) !important;
  border-radius: 6px 6px 0 0;
  background: var(--surface);
}

.ql-container.ql-snow {
  border: 1px solid var(--border) !important;
  border-top: none !important;
  border-radius: 0 0 6px 6px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 0.95rem;
}

.ql-editor {
  min-height: 350px;
}

.ql-editor.ql-blank::before {
  color: var(--muted) !important;
  font-style: normal;
}

.ql-snow .ql-stroke {
  stroke: var(--muted) !important;
}

.ql-snow .ql-fill {
  fill: var(--muted) !important;
}

.ql-snow .ql-picker {
  color: var(--muted) !important;
}

.ql-snow .ql-picker-options {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
}

.ql-snow.ql-toolbar button:hover,
.ql-snow .ql-picker-label:hover {
  color: var(--accent) !important;
}

.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow .ql-picker-label:hover .ql-stroke {
  stroke: var(--accent) !important;
}

.ql-snow.ql-toolbar button.ql-active .ql-stroke {
  stroke: var(--accent) !important;
}

/* ─── Search Bar ─── */
.nav-search {
  position: relative;
  flex: 1;
  max-width: 280px;
  margin: 0 1rem;
}

.search-input {
  width: 100%;
  padding: 0.5rem 2rem 0.5rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  border-radius: 20px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.search-input:focus {
  outline: none;
  border-color: var(--accent-dim);
  box-shadow: 0 0 0 2px rgba(212, 169, 106, 0.1);
}

.search-input::placeholder {
  color: var(--muted);
  font-style: italic;
}

.search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.15s;
}

.search-clear:hover {
  background: var(--border);
  color: var(--text);
}

/* Search Results Dropdown */
.search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 8px 8px;
  max-height: 400px;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  margin-top: -1px;
}

.search-result-item {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s;
}

.search-result-item:hover {
  background: var(--bg);
}

.search-result-item:last-child {
  border-bottom: none;
}

.search-result-title {
  color: var(--text);
  font-size: 0.95rem;
  margin-bottom: 0.25rem;
}

.search-result-meta {
  display: flex;
  gap: 1rem;
  font-size: 0.7rem;
  color: var(--muted);
}

.search-result-type {
  color: var(--accent-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.search-no-results {
  padding: 1.5rem;
  text-align: center;
  color: var(--muted);
  font-style: italic;
}

.search-highlight {
  background: rgba(212, 169, 106, 0.2);
  color: var(--accent);
  padding: 0 2px;
  border-radius: 2px;
}

/* Mobile Search */
@media (max-width: 768px) {
  .nav-inner {
    flex-wrap: wrap;
  }
  
  .nav-search {
    order: 3;
    max-width: 100%;
    margin: 0.75rem 0 0;
  }
  
  .search-results {
    position: fixed;
    top: auto;
    left: 1rem;
    right: 1rem;
    margin-top: 0.5rem;
    border-radius: 8px;
    border-top: 1px solid var(--border);
  }
}

/* ─── Dashboard ─── */
.dashboard-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
}

.dashboard-container h1 {
  font-size: 2rem;
  font-weight: normal;
  letter-spacing: -0.02em;
  margin-bottom: 2.5rem;
}

/* Stats Grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.75rem 1.5rem;
  text-align: center;
}

.stat-value {
  font-size: 2.5rem;
  font-weight: 300;
  color: var(--accent);
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

.stat-label {
  font-size: 0.8rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Quick Actions */
.quick-actions {
  display: flex;
  gap: 1rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

.dashboard-btn {
  padding: 0.75rem 1.75rem;
  border-radius: 8px;
  font-size: 0.9rem;
  text-decoration: none;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.dashboard-btn.primary {
  background: var(--accent);
  color: var(--bg);
  border: none;
}

.dashboard-btn.primary:hover {
  opacity: 0.9;
}

.dashboard-btn.secondary {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}

.dashboard-btn.secondary:hover {
  border-color: var(--accent-dim);
  color: var(--accent);
}

/* Dashboard Sections */
.dashboard-section {
  margin-bottom: 3rem;
}

.dashboard-section h2 {
  font-size: 1.2rem;
  font-weight: normal;
  color: var(--text);
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.recent-list {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.recent-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
}

.recent-item:last-child {
  border-bottom: none;
}

.recent-item-main {
  flex: 1;
}

.recent-item-title {
  color: var(--text);
  text-decoration: none;
  font-size: 1rem;
  margin-bottom: 0.35rem;
  display: block;
  transition: color 0.15s;
}

.recent-item-title:hover {
  color: var(--accent);
}

.recent-item-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.75rem;
  color: var(--muted);
}

.status-badge {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
}

.status-badge.published {
  background: rgba(212, 169, 106, 0.15);
  color: var(--accent);
}

.status-badge.draft {
  background: rgba(136, 136, 136, 0.1);
  color: var(--muted);
}

.recent-item-action {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.8rem;
  padding: 0.35rem 1rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  transition: all 0.15s;
}

.recent-item-action:hover {
  border-color: var(--accent-dim);
  color: var(--accent);
}

.comment-preview {
  color: var(--text);
  font-style: italic;
  margin-bottom: 0.35rem;
}

/* Mobile Dashboard */
@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .recent-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  
  .recent-item-action {
    align-self: flex-start;
  }
}

/* Dashboard Analytics */
.stat-card.highlight {
  border-color: var(--accent-dim);
  background: linear-gradient(145deg, var(--surface), var(--bg));
}

.views-badge {
  color: var(--accent);
  font-size: 0.75rem;
}

.rank-badge {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 50%;
  text-align: center;
  line-height: 22px;
  font-size: 0.75rem;
  color: var(--accent);
  margin-right: 0.75rem;
}

.recent-item-title-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 0.35rem;
}

.empty-state {
  padding: 2rem;
  text-align: center;
  color: var(--muted);
  font-style: italic;
}

/* Drafts Section */
.drafts-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.drafts-header h2 {
  margin: 0;
  padding: 0;
  border: none;
  color: var(--accent);
}

.drafts-list {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.draft-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
}

.draft-item:last-child {
  border-bottom: none;
}

.draft-title {
  color: var(--text);
  font-size: 0.95rem;
}

.draft-date {
  color: var(--muted);
  font-size: 0.75rem;
  margin-left: 1rem;
}

.draft-action {
  color: var(--accent-dim);
  text-decoration: none;
  font-size: 0.8rem;
  transition: color 0.15s;
}

.draft-action:hover {
  color: var(--accent);
}

/* Comment Management */
.stat-card:nth-child(5) {
  border-color: var(--accent-dim);
}

.comment-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
  gap: 1rem;
}

.comment-item:last-child {
  border-bottom: none;
}

.comment-item-main {
  flex: 1;
}

.comment-header {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.comment-author {
  font-weight: 500;
  color: var(--accent);
  font-size: 0.9rem;
}

.comment-date {
  font-size: 0.7rem;
  color: var(--muted);
  font-family: var(--font-mono);
}

.comment-text {
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0 0 0.5rem 0;
}

.comment-meta {
  font-size: 0.7rem;
  color: var(--muted);
}

.comment-post-slug {
  font-family: var(--font-mono);
  opacity: 0.7;
}

.comment-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

.comment-delete-btn {
  background: transparent;
  border: 1px solid #6b3a3a;
  color: #d47575;
  padding: 0.35rem 0.75rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.15s;
}

.comment-delete-btn:hover {
  background: #6b3a3a;
  color: #ffb3b3;
}

/* Empty state */
.empty-state {
  padding: 2rem;
  text-align: center;
  color: var(--muted);
  font-style: italic;
}