.blog-admin {
  .field { margin-bottom: 0 !important;}
  .admin-actions{
    display: grid;
    grid-template-columns: minmax(260px, 34vw) auto;
    align-items: center;
    gap: .75rem;
  }
  .search-input :deep(input){ height: 40px; line-height: 40px; }
  .controls{
    display: flex; align-items: center; gap: .75rem; margin-top: 1rem;
  }
  .cards-grid{
    display: grid; gap: 1rem; margin-top: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }
  .card{
    border-radius: 16px;
    border: 1px solid var(--surface-border,#e5e7eb);
    background: var(--surface-card,#fff);
    box-shadow: 0 6px 22px rgba(2,6,23,.05);
    padding: 1rem;
    display: flex; flex-direction: column; gap: .6rem;
  }
  .card-head{ display:flex; justify-content:space-between; gap:.75rem; }
  .meta{ font-size:.8rem; color:#6b7280; }
  .title{ margin:0; font-size:1rem; font-weight:600; line-height:1.25; }
  .subtitle{ font-size:.82rem; color:#6b7280; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .badge{
    display:inline-flex; align-items:center; gap:.35rem;
    padding:.35rem .65rem; border-radius:999px; font-size:.75rem;
    border:1px solid transparent;
  }
  .badge--ok{ background:#ecfdf5; color:#065f46; border-color:#a7f3d0; }
  .badge--muted{ background:#eef2f7; color:#334155; border-color:#d9e1ea; }
  .owner{ display:flex; align-items:center; gap:.4rem; color:#4b5563; font-size:.85rem; }
  .actions.icons{
    display:flex; justify-content:flex-end; gap:.45rem; margin-top:.35rem;
  }
  .footer{ display:flex; justify-content:flex-end; align-items:center; gap:.5rem; margin-top:1.5rem; padding:1rem;}
  .admin-actions { display:flex; gap:.5rem; align-items:center; }
  .search-input { width:16rem; }
  .controls { display:flex; gap:1rem; align-items:center; padding:1rem; }

  .cards-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap:1rem; padding:1rem; }
  .card { border:1px solid #e5e7eb; border-radius:.75rem; background:#fff; padding:1rem;
    display:flex; flex-direction:column; gap:.5rem; transition: opacity .2s ease, filter .2s ease; }
  /* visually mute hidden projects */
  .card--hidden { opacity:.6; filter:grayscale(1); }

  .card-head { display:flex; justify-content:space-between; gap:1rem; }
  .meta { font-size:.75rem; color:#6b7280; }

  /* clickable title */
  .title { margin:.25rem 0; font-weight:600; }
  .title-link { color:inherit; text-decoration:none; }
  .title-link:hover .title { text-decoration:underline; }

  .subtitle { color:#6b7280; font-size:.9rem; }
  .owner { display:flex; align-items:center; gap:.5rem; color:#374151; font-size:.9rem; }

  .actions.icons { display:flex; gap:.25rem; justify-content:flex-end; }
  .icon-btn { --tw-ring-color: transparent; }
  @media (max-width: 720px){
    .admin-actions{ grid-template-columns: 1fr; }
  }
}

.blog-posts {
  .field { margin-bottom: 0 !important; }
  .segmented{
    display:inline-flex; background:#f3f4f6; border-radius:999px; padding:.125rem; border:1px solid #e5e7eb;
  }
  .seg-btn{
    appearance:none; border:0; background:transparent; padding:.25rem .75rem;
    border-radius:999px; font-size:.875rem; color:#374151; cursor:pointer;
  }
  .seg-btn.active{ background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.06); color:#111827; }
  .segmented {
    display: inline-flex;
    border: 1px solid #e5e7eb;
    border-radius: .5rem;
    overflow: hidden;
  }
  .seg-btn {
    padding: .35rem .6rem;
    font-size: .875rem;
    background: #fff;
  }
  .seg-btn + .seg-btn { border-left: 1px solid #e5e7eb; }
  .seg-btn.active {
    background: #eef2ff;
    color: #4338ca;
    font-weight: 600;
  }
  .bg-gray-10 { background: #f4f5f7; }
  .bg-gray-20 { background: #f9fafb; }
  .blog-posts :is(h2, h3) { line-height: 1.2; }
}

.blog-layout {
  .nav-link {
    padding: 0.25rem 0.75rem;
    border-radius: 0.5rem;
    color: var(--text-color, #334155);
    text-decoration: none;
    font-weight: 500;
  }
  .nav-link:hover {
    background: color-mix(in srgb, var(--primary-color, #2563eb) 10%, transparent);
    color: var(--primary-color, #2563eb);
  }
  a.router-link-active.nav-link {
    background: color-mix(in srgb, var(--primary-color, #2563eb) 15%, transparent);
    color: var(--primary-color, #2563eb);
  }
  .nav-link {
    @apply px-3 py-1 rounded text-sm text-gray-90 hover:bg-gray-20 no-underline;
  }
  .nav-link.active {
    @apply font-medium;
  }
  .calendar{ user-select:none }
  .cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.25rem }
  .month{ font-weight:600; font-size:.85rem }
  .nav{ background:#f3f4f6; border:1px solid #e5e7eb; border-radius:8px; width:28px; height:28px; display:grid; place-items:center }
  .nav:hover{ background:#e5e7eb }
  .day{
    background:#fff; border:1px solid #e5e7eb; border-radius:8px; height:32px;
    font-size:.85rem; display:grid; place-items:center; cursor:pointer;
  }
  .day:hover{ background:#f9fafb }
  .day.selected{ background:#2563eb; color:#fff; border-color:#2563eb }
}
