/* ═══════════════════════════════════════════════════
   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; }
}

/* ═══════════════════════════════════════════════════
   Bổ sung cho Sổ Riêng: màn khóa
   ═══════════════════════════════════════════════════ */
.sr-lock{
  max-width:420px;
  margin:8vh auto 0;
  background:rgba(13,28,48,.7);
  border:1px solid rgba(90,150,210,.25);
  border-radius:16px;
  padding:32px 28px;
  text-align:center;
}
.sr-lock-icon{ font-size:52px; margin-bottom:10px; }
.sr-lock-title{ font-size:21px; font-weight:800; color:#eaf3fc; margin-bottom:6px; }
.sr-lock-sub{ font-size:13.5px; color:#8fb0d0; line-height:1.55; margin-bottom:20px; }
.sr-lock-input{
  width:100%;
  box-sizing:border-box;
  padding:13px 15px;
  border-radius:11px;
  border:1px solid rgba(120,150,190,.35);
  background:rgba(8,20,36,.6);
  color:#eaf3fc;
  font-size:16px;
  text-align:center;
  letter-spacing:2px;
  outline:none;
  margin-bottom:12px;
}
.sr-lock-input:focus{ border-color:#6fb1ff; }
.sr-lock-btn{
  width:100%;
  border:none;
  border-radius:11px;
  padding:13px;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  color:#04121f;
  background:linear-gradient(135deg,#4facfe,#00f2fe);
  transition:filter .15s, transform .1s;
}
.sr-lock-btn:hover{ filter:brightness(1.08); }
.sr-lock-btn:active{ transform:scale(.98); }
.sr-lock-msg{ margin-top:12px; font-size:13px; min-height:18px; }
.sr-lock-msg.err{ color:#f87171; }
.sr-lock-msg.ok{ color:#5fd08a; }
.sr-lock-hint{ margin-top:16px; font-size:11.5px; color:#5a789a; line-height:1.5; }

/* Nút khóa lại trên thanh tiêu đề sổ riêng */
.sr-relock{
  margin-left:auto;
  border:1px solid rgba(120,150,190,.35);
  background:rgba(20,45,78,.4);
  color:#cfe0f2;
  border-radius:9px;
  padding:8px 14px;
  font-size:13px;
  cursor:pointer;
  transition:background .15s;
}
.sr-relock:hover{ background:rgba(40,80,130,.5); border-color:#6fb1ff; }

/* ═══════════════════════════════════════════════════
   BẢN XỊN: thống kê, mood, công cụ soạn thảo, modal
   ═══════════════════════════════════════════════════ */

/* Thanh thống kê */
.sr-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-bottom:16px;
}
.sr-stat{
  background:rgba(13,28,48,.6);
  border:1px solid rgba(90,150,210,.2);
  border-radius:12px;
  padding:12px 8px;
  text-align:center;
}
.sr-stat-val{ font-size:22px; font-weight:800; color:#6fb1ff; }
.sr-stat-lb{ font-size:11.5px; color:#8296b0; margin-top:2px; }
@media (max-width:560px){ .sr-stats{ grid-template-columns:repeat(2,1fr); } }

/* Tâm trạng */
.sr-mood-row{ display:flex; align-items:center; gap:10px; margin:10px 2px 4px; flex-wrap:wrap; }
.sr-mood-label{ font-size:13px; color:#8fb0d0; }
.sr-moods{ display:flex; gap:5px; flex-wrap:wrap; }
.sr-mood{
  border:1px solid transparent;
  background:rgba(20,45,78,.35);
  border-radius:9px;
  padding:3px 7px;
  font-size:18px;
  cursor:pointer;
  line-height:1.2;
  transition:transform .1s, border-color .15s, background .15s;
}
.sr-mood:hover{ transform:scale(1.15); }
.sr-mood.active{ border-color:#4facfe; background:rgba(40,90,150,.5); }

/* Công cụ soạn thảo */
.sr-edit-tools{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  margin:8px 2px 10px;
}
.sr-etool{
  border:1px solid rgba(120,150,190,.3);
  background:rgba(20,45,78,.4);
  color:#cfe0f2;
  border-radius:8px;
  padding:6px 11px;
  font-size:13px;
  cursor:pointer;
  transition:background .15s, border-color .15s;
}
.sr-etool:hover{ background:rgba(40,80,130,.5); border-color:#6fb1ff; }
.sr-etool.active{ background:rgba(201,162,39,.25); border-color:#c9a227; color:#ffe9a0; }
.sr-etool-sep{ width:1px; height:20px; background:rgba(120,150,190,.25); margin:0 2px; }
.sr-read{ border-color:rgba(90,200,140,.4); color:#a8f0c8; }
.sr-read:hover{ background:rgba(30,90,60,.4); }
.sr-read.dang-doc{ background:rgba(120,40,40,.4); border-color:#f87171; color:#ffd6d6; }
.sr-lang{
  border:1px solid rgba(120,150,190,.3);
  background:rgba(8,20,36,.7);
  color:#cfe0f2;
  border-radius:8px;
  padding:6px 8px;
  font-size:13px;
  cursor:pointer;
  outline:none;
}

/* Mood + ghim trong danh sách */
.st-item-title .st-mood{ margin-right:4px; }
.st-item.ghim{ border-color:rgba(201,162,39,.5); }
.st-pin-badge{ color:#f0c85a; }

/* Modal cài đặt */
.sr-modal{
  position:fixed; inset:0; z-index:50;
  background:rgba(4,10,20,.72);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.sr-modal-box{
  width:100%; max-width:420px;
  background:#0e1f36;
  border:1px solid rgba(90,150,210,.3);
  border-radius:16px;
  padding:20px 22px 24px;
  max-height:90vh; overflow-y:auto;
}
.sr-modal-head{
  display:flex; align-items:center; justify-content:space-between;
  font-size:18px; font-weight:800; color:#eaf3fc; margin-bottom:16px;
}
.sr-modal-x{
  border:none; background:transparent; color:#8fb0d0;
  font-size:18px; cursor:pointer; padding:4px 8px; border-radius:8px;
}
.sr-modal-x:hover{ background:rgba(120,150,190,.15); color:#fff; }
.sr-modal-sec{
  border-top:1px solid rgba(90,150,210,.18);
  padding-top:16px; margin-top:16px;
}
.sr-modal-sec:first-of-type{ border-top:none; padding-top:0; margin-top:0; }
.sr-modal-title{ font-size:14.5px; font-weight:700; color:#cfe0f2; margin-bottom:10px; }
.sr-modal-box .sr-lock-input{ text-align:left; letter-spacing:normal; font-size:14px; }