/* ═══════════════════════════════════════════════════
   sotay.css – Sổ Tay (Nhật ký & ghi chép)
   Dùng chung cho cả tiếng Anh & tiếng Trung (nền english/chinese.css)
   ═══════════════════════════════════════════════════ */

.st-topbar{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:16px;
  flex-wrap:wrap;
}
.st-topbar .fc-title{ font-size:20px; font-weight:800; color:#eaf3fc; }
.st-topbar-note{ font-size:13px; color:#7f9bbb; margin-left:auto; }

/* ── Layout 2 cột ── */
.st-layout{
  display:grid;
  grid-template-columns:320px 1fr;
  gap:16px;
  align-items:start;
}
@media (max-width:820px){
  .st-layout{ grid-template-columns:1fr; }
}

/* ═══ CỘT TRÁI: DANH SÁCH ═══ */
.st-list-pane{
  background:rgba(13,28,48,.6);
  border:1px solid rgba(90,150,210,.22);
  border-radius:14px;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:12px;
  max-height:calc(100vh - 200px);
}
.st-new-btn{
  border:none;
  border-radius:10px;
  padding:12px;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  color:#04121f;
  background:linear-gradient(135deg,#4facfe,#00f2fe);
  transition:filter .15s, transform .1s;
}
.st-new-btn:hover{ filter:brightness(1.08); }
.st-new-btn:active{ transform:scale(.98); }

.st-search-wrap{ position:relative; }
.st-search{
  width:100%;
  box-sizing:border-box;
  padding:9px 12px;
  border-radius:9px;
  border:1px solid rgba(120,150,190,.3);
  background:rgba(8,20,36,.6);
  color:#dcecfb;
  font-size:13px;
  outline:none;
}
.st-search:focus{ border-color:#6fb1ff; }

.st-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  overflow-y:auto;
  padding-right:2px;
}
.st-list-empty{
  text-align:center;
  color:#5a789a;
  font-size:13px;
  padding:26px 8px;
  font-style:italic;
}

/* Thẻ 1 trang trong danh sách */
.st-item{
  text-align:left;
  border:1px solid rgba(90,150,210,.2);
  background:linear-gradient(180deg,rgba(22,48,78,.5),rgba(16,37,64,.5));
  border-radius:11px;
  padding:11px 13px;
  cursor:pointer;
  transition:border-color .15s, background .15s, transform .1s;
}
.st-item:hover{ border-color:#6fb1ff; transform:translateY(-1px); }
.st-item.active{ border-color:#4facfe; background:linear-gradient(180deg,rgba(30,60,95,.7),rgba(20,45,78,.7)); }
.st-item-title{
  font-size:14.5px;
  font-weight:700;
  color:#eaf3fc;
  margin-bottom:3px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.st-item-preview{
  font-size:12px;
  color:#8fb0d0;
  line-height:1.4;
  max-height:34px;
  overflow:hidden;
}
.st-item-meta{
  margin-top:6px;
  font-size:11px;
  color:#5f7d9d;
  display:flex;
  justify-content:space-between;
  gap:8px;
}

/* ═══ CỘT PHẢI: TRÌNH SOẠN ═══ */
.st-editor-pane{
  background:rgba(13,28,48,.6);
  border:1px solid rgba(90,150,210,.22);
  border-radius:14px;
  padding:18px;
  min-height:calc(100vh - 200px);
}

.st-editor-empty{
  height:100%;
  min-height:52vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#6a88a8;
  gap:10px;
}
.st-empty-icon{ font-size:48px; opacity:.7; }

.st-title{
  width:100%;
  box-sizing:border-box;
  border:none;
  border-bottom:2px solid rgba(90,150,210,.25);
  background:transparent;
  color:#fff;
  font-size:22px;
  font-weight:800;
  padding:6px 2px 10px;
  outline:none;
}
.st-title:focus{ border-bottom-color:#4facfe; }
.st-title::placeholder{ color:#4a6a8a; font-weight:600; }

.st-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:10px 2px;
  font-size:12.5px;
  color:#7f9bbb;
}
.st-status{ font-size:12px; }
.st-status.saving{ color:#f0c060; }
.st-status.saved{ color:#5fd08a; }
.st-status.error{ color:#f87171; }

.st-body{
  width:100%;
  box-sizing:border-box;
  min-height:56vh;
  resize:vertical;
  border:1px solid rgba(90,150,210,.2);
  border-radius:12px;
  background:rgba(8,20,36,.55);
  color:#e8f1fb;
  font-size:16px;
  line-height:1.7;
  padding:16px;
  outline:none;
  font-family:inherit;
}
.st-body:focus{ border-color:rgba(111,177,255,.5); }
.st-body::placeholder{ color:#4a6a8a; }

.st-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:12px;
  flex-wrap:wrap;
}
.st-count{ font-size:12.5px; color:#7f9bbb; }
.st-actions{ display:flex; gap:8px; flex-wrap:wrap; }

.st-tool{
  border:1px solid rgba(120,150,190,.35);
  background:rgba(20,45,78,.4);
  color:#cfe0f2;
  border-radius:9px;
  padding:9px 13px;
  font-size:13px;
  cursor:pointer;
  transition:background .15s, border-color .15s;
}
.st-tool:hover{ background:rgba(40,80,130,.5); border-color:#6fb1ff; }
.st-del{ border-color:rgba(240,120,120,.4); color:#f4b0b0; }
.st-del:hover{ background:rgba(120,40,40,.35); border-color:#f87171; }

.st-save{
  border:none;
  border-radius:9px;
  padding:9px 20px;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  color:#04121f;
  background:linear-gradient(135deg,#4facfe,#00f2fe);
  transition:filter .15s, transform .1s;
}
.st-save:hover{ filter:brightness(1.08); }
.st-save:active{ transform:scale(.98); }

@media (prefers-reduced-motion:reduce){
  .st-item, .st-new-btn, .st-save{ transition:none; }
}