.diary-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:14px;
  margin-top: 16px;
}
.diary-card{
  position:relative;
  border:1px solid var(--stroke);
  border-radius: 18px;
  background: color-mix(in oklab, var(--panel) 82%, transparent);
  box-shadow: var(--shadow);
  padding:16px;
  overflow:hidden;
  cursor:pointer;
  transition: transform .18s var(--ease), border-color .18s var(--ease);
}
.diary-card:hover{ transform: translateY(-2px); border-color: color-mix(in oklab, var(--gold) 45%, var(--stroke));}
.diary-card .title{font-weight:950; letter-spacing:-.01em; font-size:16px;}
.diary-card .meta{margin-top:6px; color: var(--muted); font-size:12px;}
.diary-card .status{
  position:absolute; top:12px; right:12px;
  font-size:12px; padding:6px 10px; border-radius:999px;
  border:1px solid color-mix(in oklab, var(--stroke) 70%, transparent);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(12px);
}
.diary-card.empty{opacity:.7; cursor:default}
.diary-card.empty:hover{transform:none; border-color: var(--stroke);}

@media (max-width: 980px){
  .diary-grid{grid-template-columns: repeat(3, minmax(0,1fr));}
}
@media (max-width: 720px){
  .diary-grid{grid-template-columns: repeat(2, minmax(0,1fr));}
}
@media (max-width: 420px){
  .diary-grid{grid-template-columns: 1fr;}
}

/* Modal */
.diary-modal{position:fixed; inset:0; z-index: 9999; display:none;}
.diary-modal.open{display:block;}
.diary-modal-scrim{position:absolute; inset:0; background: rgba(0,0,0,.55); backdrop-filter: blur(10px);}
.diary-modal-card{
  position:relative;
  width:min(980px, calc(100% - 28px));
  margin: calc(var(--navH) + 18px) auto 18px auto;
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(16,18,24,.78);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 30px 120px rgba(0,0,0,.65);
  overflow:hidden;
  transform: translateY(14px) scale(.98);
  opacity: 0;
  transition: transform .26s var(--ease), opacity .26s var(--ease);
}
.diary-modal.open .diary-modal-card{transform: translateY(0) scale(1); opacity:1;}
.diary-modal-top{display:flex; justify-content:space-between; align-items:center; padding:14px 14px; border-bottom:1px solid rgba(255,255,255,.10);}
.diary-modal-title{font-weight:950}
.diary-modal-body{padding: 12px;}
.diary-modal-body img{
  width:100%;
  height: auto;
  max-height: 78vh;
  object-fit: contain;
  display:block;
  margin: 0 auto;
  border-radius: 16px;
}

/* Mobile premium pass: make modal comfortable and fully usable */
@media (max-width: 720px){
  .diary-modal-card{
    width: calc(100% - 20px);
    margin: calc(var(--navH) + 10px) auto 10px auto;
    border-radius: 18px;
  }
  .diary-modal-top{ padding: 12px 12px; }
  .diary-modal-body{ padding: 12px; }
  .diary-modal-body img{ max-height: 72vh; border-radius: 14px; }
}

@media (max-width: 420px){
  .diary-modal-card{
    width: calc(100% - 16px);
    margin: calc(var(--navH) + 8px) auto 8px auto;
  }
}


/* States */
.diary-card.scheduled{opacity:.8; cursor:default}
.diary-card.scheduled:hover{transform:none; border-color: var(--stroke);}
.diary-card.expired{opacity:.85}