:root { --max: 760px; --fg: #1f2937; --muted:#6b7280; --link:#4f46e5; }
* { box-sizing: border-box; }
body { margin:0; font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color:var(--fg); }
a { color:var(--link); text-decoration:none; }
a:hover { text-decoration:underline; }
.container { max-width: var(--max); margin: 2rem auto; padding: 0 1rem; }
h1,h2 { line-height:1.25; }
.meta,.breadcrumbs,.excerpt { color:var(--muted); }
.post-list { list-style:none; padding:0; display:grid; gap:1rem; }
.post { display:block; padding:1rem; border:1px solid #eee; border-radius:12px; }
.post:hover { background:#fafafa; }
article img { max-width:100%; height:auto; }
  .site-header {
      position: sticky;
      top: 0;
      z-index: 50;
      width: 100%;
      border-bottom: 1px solid #e5e7eb;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(8px);
    }
    .site-header .container {
      margin: 0 auto;
      padding: 0 1rem;
      max-width: 1200px;
    }
    .header-content {
      display: flex;
      height: 4rem;
      align-items: center;
      justify-content: space-between;
    }
    .logo-section {
      display: flex;
      align-items: center;
    }
    .logo {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      text-decoration: none;
      color: var(--link);
    }
    .logo img {
      height: 2rem;
      width: 2rem;
    }
    .logo h1 {
      font-size: 1.25rem;
      font-weight: bold;
      margin: 0;
      color: var(--link);
    }
    .nav-links {
      display: flex;
      margin-left: 2.5rem;
      gap: 1rem;
    }
    .nav-links a {
      padding: 0.5rem 0.75rem;
      border-radius: 0.375rem;
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--muted);
      text-decoration: none;
      transition: color 0.2s;
    }
    .nav-links a:hover {
      color: var(--link);
      text-decoration: none;
    }
    .auth-buttons {
      display: flex;
      align-items: center;
      gap: 1rem;
    }
    .btn {
      padding: 0.5rem 1rem;
      border-radius: 0.375rem;
      font-size: 0.875rem;
      font-weight: 500;
      text-decoration: none;
      border: 1px solid transparent;
      cursor: pointer;
      transition: all 0.2s;
    }
    .btn-ghost {
      color: var(--fg);
      background: transparent;
    }
    .btn-ghost:hover {
      background: #f3f4f6;
      text-decoration: none;
    }
    .btn-primary {
      color: white;
      background: var(--link);
    }
    .btn-primary:hover {
      background: #4338ca;
      text-decoration: none;
    }
    @media (max-width: 768px) {
      .nav-links {
        display: none;
      }
    }