/* ============================================================
   Gốc Cây 55 — mobile-first
   Bảng màu: mực đêm + ánh nến ấm + giấy kraft
   ============================================================ */

:root{
  --ink:#0b0f16;
  --ink-2:#141a24;
  --paper:#f2ece1;
  --paper-2:#e4dbcb;
  --kraft:#d8c9ae;
  --amber:#f0b96b;
  --amber-soft:#f7d6a4;
  --sage:#8fa88c;
  --text:#f4f1ea;
  --text-dim:rgba(244,241,234,.62);
  --text-faint:rgba(244,241,234,.38);
  --line:rgba(244,241,234,.14);
  --glass:rgba(16,21,30,.72);
  --glass-hi:rgba(28,35,46,.86);
  --danger:#e08b7a;

  --r-lg:22px; --r-md:16px; --r-sm:11px;
  --dock-h:64px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
  --ease:cubic-bezier(.22,.68,.24,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --font:"Be Vietnam Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --serif:"Playfair Display",Georgia,serif;
  --hand:"Caveat","Segoe Script",cursive;
}

/* Chế độ ngày: nền sáng nên chữ, viền và màu nhấn đều phải tối lại,
   nếu không thì đọc rất mệt. Đây là bảng riêng, không phải chỉnh nhẹ. */
body.is-day{
  --text:#14181e;
  --text-dim:rgba(20,24,30,.82);
  --text-faint:rgba(20,24,30,.58);
  --line:rgba(20,24,30,.22);
  --glass:rgba(253,251,247,.93);
  --glass-hi:rgba(255,254,251,.98);
  --amber:#9a5c0c;
  --amber-soft:#7d4a09;
  --kraft:#6b5430;
}
body.is-day .chip,
body.is-day .dock-side{box-shadow:0 2px 12px -4px rgba(20,24,30,.28)}
body.is-day .counters{box-shadow:0 3px 16px -6px rgba(20,24,30,.3)}
body.is-day .segbar{background:rgba(20,24,30,.08)}
body.is-day .segbar button.on{background:rgba(154,92,12,.16);color:#6d4008;font-weight:500}
body.is-day .btn-ghost{border-color:rgba(20,24,30,.28);color:#2a3038}
body.is-day .sheet-panel,
body.is-day .tray{box-shadow:0 -8px 40px -12px rgba(20,24,30,.32)}
body.is-day .toast{background:rgba(255,254,251,.97);color:#14181e;border-color:rgba(20,24,30,.18)}
body.is-day .growth-bar{background:rgba(20,24,30,.16)}
body.is-day .hint{box-shadow:0 3px 14px -6px rgba(20,24,30,.3)}
body.is-day .item span{color:rgba(20,24,30,.72)}
body.is-day .item.on span{color:#6d4008;font-weight:500}
body.is-day .dock-side.is-on{background:rgba(154,92,12,.14);border-color:rgba(154,92,12,.4);color:#7d4a09}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;background:var(--ink);color:var(--text);
  font-family:var(--font);font-size:15px;line-height:1.5;
  overflow:hidden;overscroll-behavior:none;
  -webkit-font-smoothing:antialiased;
  transition:background .8s var(--ease),color .8s var(--ease);
}
body.is-day{background:#cfd3cd}
button,input,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
.ic{width:20px;height:20px;display:block;fill:none}

/* ══════════ MÀN CHÀO ══════════
   Nguyên tắc: ấm chứ không sáng. Nguồn sáng duy nhất là ánh nến hắt lên từ
   phía dưới, nền ngả nâu-than thay vì xanh lạnh. Mọi màu ở đây viết thẳng số
   chứ không dùng biến chủ đề — màn chào luôn tối, kể cả khi trang đang ở chế
   độ ngày, và đã có lần chữ biến mất vì lỡ dùng biến bị lật màu.            */
.gate{
  position:fixed;inset:0;z-index:100;display:grid;place-items:center;
  background:
    radial-gradient(140% 100% at 50% 118%, rgba(120,72,26,.42) 0%, rgba(60,36,14,.16) 38%, transparent 66%),
    radial-gradient(100% 80% at 50% 30%, #1a1712 0%, #100e0c 55%, #08070a 100%);
  padding:32px 26px calc(32px + var(--safe-b));
  overflow:hidden;
  transition:opacity .9s var(--ease),visibility .9s;
}
.gate.gone{opacity:0;visibility:hidden;pointer-events:none}

/* quầng nến: thở rất chậm, biên độ nhỏ — gợi lửa chứ không nhấp nháy */
.gate-glow{
  position:absolute;left:50%;bottom:-28vh;width:min(150vw,900px);height:min(150vw,900px);
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(circle,rgba(240,185,107,.16) 0%,rgba(214,140,60,.07) 34%,transparent 68%);
  animation:gateBreath 7.5s ease-in-out infinite;
}
@keyframes gateBreath{0%,100%{opacity:.72;transform:translateX(-50%) scale(1)}
                      50%{opacity:1;transform:translateX(-50%) scale(1.045)}}

/* tàn lửa bay lên: 8 hạt, chỉ dùng transform/opacity nên chạy trên luồng ghép
   hình, không bắt trình duyệt tính lại bố cục */
.gate-embers{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.gate-embers i{
  position:absolute;left:var(--x);bottom:-12px;width:3px;height:3px;border-radius:50%;
  background:#f5c884;box-shadow:0 0 7px rgba(240,185,107,.85);opacity:0;
  animation:emberRise var(--t,20s) linear var(--d,0s) infinite;
}
@keyframes emberRise{
  0%{opacity:0;transform:translate3d(0,0,0) scale(.6)}
  12%{opacity:.75}
  70%{opacity:.5}
  100%{opacity:0;transform:translate3d(18px,-88vh,0) scale(1.15)}
}

.gate-inner{
  position:relative;z-index:1;max-width:400px;text-align:center;
  animation:riseIn 1.25s var(--ease-out) both;
}

.gate-mark{
  width:54px;height:72px;margin:0 auto 26px;color:#f0b96b;
  filter:drop-shadow(0 0 16px rgba(240,185,107,.4));
  animation:markGlow 7.5s ease-in-out infinite;
}
.gate-mark svg{width:100%;height:100%}
@keyframes markGlow{0%,100%{opacity:.82}50%{opacity:1}}

.gate-eyebrow{
  margin:0 0 14px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(226,196,150,.5);
}
.gate-title{
  margin:0;font-family:var(--serif);font-size:clamp(34px,9vw,46px);font-weight:600;
  letter-spacing:.005em;line-height:1.14;color:#f8f1e4;
  text-shadow:0 2px 30px rgba(240,185,107,.14);
}
/* gạch ngang mảnh, mờ dần hai đầu — thay cho việc kẻ một đường cứng */
.gate-rule{
  width:72px;height:1px;margin:20px auto 18px;
  background:linear-gradient(90deg,transparent,rgba(240,185,107,.55),transparent);
}
.gate-sub{
  margin:0 0 30px;font-size:15px;line-height:1.78;font-weight:300;
  color:rgba(240,232,220,.66);
}

/* ── số hoa và nến đã đặt ── */
.gate-tally{
  margin:0 0 32px;padding:20px 18px 18px;border-radius:16px;
  background:linear-gradient(180deg,rgba(240,185,107,.055),rgba(240,185,107,.018));
  border:1px solid rgba(240,185,107,.15);
}
.gt-lead,.gt-foot{
  margin:0;font-size:12.5px;letter-spacing:.02em;color:rgba(240,232,220,.5);font-weight:300;
}
.gt-foot{margin-top:10px}
.gt-row{
  display:flex;align-items:flex-end;justify-content:center;gap:8px;
  margin:12px 0 0;
}
.gt-cell{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;flex:1}
.gt-ico{width:23px;height:23px;color:rgba(243,193,121,.8);margin-bottom:2px;
  filter:drop-shadow(0 0 7px rgba(240,185,107,.35))}
.gt-ico svg{width:100%;height:100%;display:block}
.gt-ico-flame{color:#f3c179;filter:drop-shadow(0 0 8px rgba(243,193,121,.5))}
.gt-num{
  font-family:var(--serif);font-size:clamp(22px,5.8vw,28px);font-weight:600;
  line-height:1.05;color:#f7d6a4;letter-spacing:.01em;
  /* chữ số cùng bề rộng: lúc đếm, con số không co giãn giật cục */
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
}
.gt-num.settling{animation:tallySettle .55s var(--ease-out)}
@keyframes tallySettle{0%{transform:scale(1)}38%{transform:scale(1.07)}100%{transform:scale(1)}}
.gt-lbl{font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(226,196,150,.52);white-space:nowrap}
/* vạch ngăn thay cho chữ "và": căn giữa dễ hơn, và nhìn ra là một cặp số */
.gt-sep{width:1px;align-self:stretch;margin:6px 2px 22px;
  background:linear-gradient(180deg,transparent,rgba(240,185,107,.28),transparent)}

/* ── nút vào ── */
.gate-btn{
  position:relative;padding:15px 46px;border-radius:100px;
  border:1px solid rgba(240,185,107,.45);
  background:linear-gradient(180deg,rgba(240,185,107,.16),rgba(240,185,107,.07));
  color:#f9dfb4;font-size:15.5px;font-weight:500;letter-spacing:.03em;
  box-shadow:0 6px 28px -10px rgba(240,185,107,.45),inset 0 1px 0 rgba(255,226,181,.16);
  transition:transform .3s var(--ease),box-shadow .35s,border-color .35s,background .35s;
}
.gate-btn:hover{
  border-color:rgba(240,185,107,.72);
  background:linear-gradient(180deg,rgba(240,185,107,.24),rgba(240,185,107,.11));
  box-shadow:0 10px 34px -10px rgba(240,185,107,.6),inset 0 1px 0 rgba(255,226,181,.24);
}
.gate-btn:active{transform:scale(.965)}
.gate-btn:focus-visible{outline:2px solid rgba(240,185,107,.75);outline-offset:3px}

.gate-note{margin:20px 0 0;font-size:11.5px;line-height:1.7;color:rgba(226,196,150,.46)}
.gate-note em{display:block;font-style:normal;color:rgba(226,196,150,.32)}
.gate-legal{
  margin:16px auto 0;max-width:34em;font-size:11px;line-height:1.62;
  color:rgba(240,232,220,.34);font-weight:300;
}
.gl-links{display:block;margin-top:7px}
.gate-legal a{
  color:rgba(240,185,107,.78);text-decoration:none;
  border-bottom:1px solid rgba(240,185,107,.28);padding-bottom:1px;
}
.gate-legal a + a{margin-left:14px}
.gate-legal a:hover{color:#f7d6a4;border-bottom-color:rgba(240,185,107,.6)}

/* Màn hình rộng: nới cột và nhấc cỡ chữ lên một bậc, để trang không giống
   một trang điện thoại bị kéo giãn giữa khoảng trống. */
@media (min-width:900px) and (min-height:700px){
  /* .gate dùng place-items:center nên khối con co lại vừa nội dung — chỉ đặt
     max-width thì bề rộng vẫn bị đoạn pháp lý (34em) quyết định. Đặt thẳng. */
  .gate-inner{width:470px;max-width:470px}
  .gate-mark{width:62px;height:82px;margin-bottom:30px}
  .gate-title{font-size:54px}
  .gate-sub{font-size:16.5px;margin-bottom:36px}
  .gate-tally{padding:24px 22px 20px;margin-bottom:38px}
  .gt-num{font-size:33px}
  .gt-lead,.gt-foot{font-size:13px}
  .gt-lbl{font-size:11px}
  .gate-btn{padding:16px 54px;font-size:16px}
}

@media (max-height:640px){
  .gate-mark{width:42px;height:56px;margin-bottom:16px}
  .gate-rule{margin:14px auto 12px}
  .gate-sub{margin-bottom:20px}
  .gate-tally{margin-bottom:22px;padding:14px 14px 12px}
  .gate-legal{display:none}
}

@media (prefers-reduced-motion:reduce){
  .gate-embers,.gate-glow{animation:none}
  .gate-embers i{display:none}
  .gate-inner{animation:none}
  .gt-num.settling{animation:none}
}

@keyframes riseIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ══════════ SÂN KHẤU ══════════ */
.stage{position:fixed;inset:0;touch-action:manipulation;user-select:none}
/* Safari iOS: position:fixed bám theo khung nhìn LỚN, nên phần đáy nằm khuất
   dưới thanh công cụ và thanh nút (kể cả nút vào game) bị mất. dvh bám theo
   khung nhìn thật đang thấy; vh giữ lại cho trình duyệt cũ. */
.stage{height:100vh;height:100dvh}
.tray,.tray-rail,.chips,.item,.chips button{touch-action:pan-x}
#scene{position:absolute;inset:0;width:100%;height:100%;display:block}
.note-float{
  position:absolute;inset:12% 8% 38%;z-index:6;pointer-events:none;overflow:hidden;
}
.nbub{
  position:absolute;max-width:158px;padding:7px 10px 6px;
  border-radius:14px 14px 14px 5px;
  background:rgba(14,12,10,.78);border:1px solid rgba(240,185,107,.28);
  color:#f4f1ea;font-size:11.5px;line-height:1.35;letter-spacing:.01em;
  box-shadow:0 8px 22px -12px rgba(0,0,0,.55);
  animation:nbub 4.1s ease-out forwards;word-break:break-word;
}
.nbub em{display:block;margin-top:3px;font-style:normal;font-size:9.5px;opacity:.55}
@keyframes nbub{
  0%{opacity:0;transform:translateY(10px) scale(.94)}
  14%{opacity:1;transform:translateY(0) scale(1)}
  72%{opacity:.88}
  100%{opacity:0;transform:translateY(-36px) scale(.97)}
}
body.is-day .nbub{background:rgba(255,252,246,.9);color:#1c1812;border-color:rgba(120,90,40,.22)}

/* ── thanh trên ── */
.topbar{
  position:absolute;left:0;right:0;top:0;z-index:20;
  padding:calc(var(--safe-t) + 10px) 12px 0;
  display:flex;align-items:center;gap:10px;
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.chip{
  width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(14px);
  color:var(--text-dim);transition:transform .25s,color .25s;
}
.chip:active{transform:scale(.9);color:var(--text)}
.chip-spacer{width:38px;flex:none}
.counters{
  flex:1;min-width:0;display:flex;justify-content:center;gap:0;
  background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(14px);
  border-radius:100px;padding:6px 2px;
}
.counter{
  flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;
  line-height:1.12;padding:1px 1px;position:relative;
}
.counter+.counter::before{
  content:"";position:absolute;left:0;top:14%;height:72%;width:1px;background:var(--line);
}
.counter b{font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.03em;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.counter span{font-size:7.5px;color:var(--text-faint);letter-spacing:.01em;white-space:nowrap}
#c-candles b{color:var(--amber)}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}
.counter.bump b{animation:bump .5s var(--ease-out)}
@keyframes bump{0%{transform:translateY(0)}35%{transform:translateY(-4px);color:var(--amber)}100%{transform:translateY(0)}}

/* ── tiến trình tới mốc kế tiếp ── */
.growth{
  position:absolute;left:50%;transform:translateX(-50%);
  top:calc(var(--safe-t) + 66px);z-index:19;width:min(280px,66vw);
  text-align:center;opacity:0;transition:opacity .6s var(--ease);pointer-events:none;
}
.growth.show{opacity:1}
.growth-bar{height:2px;border-radius:2px;background:var(--line);overflow:hidden}
.growth-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,rgba(240,185,107,.35),var(--amber));transition:width 1.4s var(--ease-out)}
/* Chữ này nằm đè lên cảnh nên nền lúc sáng lúc tối. Cho nó một viên nền mờ
   riêng thay vì phó mặc cho màu nền phía sau — trước đây ở giao diện sáng
   nó là chữ đen mảnh trên trời sáng, gần như không đọc được. */
.growth p{
  display:inline-block;margin:6px 0 0;padding:3px 10px;border-radius:100px;
  font-size:10.5px;font-weight:500;letter-spacing:.02em;
  color:var(--text-dim);
  background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(10px);
  max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
body.is-day .growth p{color:#2a3038;box-shadow:0 2px 10px -5px rgba(20,24,30,.34)}
body.is-day .growth-bar{background:rgba(20,24,30,.2)}

/* ── lời dẫn ── */
.hint{
  position:absolute;left:50%;top:calc(var(--safe-t) + 64px);transform:translateX(-50%);
  z-index:19;padding:7px 16px;border-radius:100px;white-space:nowrap;
  background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(12px);
  font-size:12.5px;color:var(--text-dim);
  opacity:0;transition:opacity .5s var(--ease);pointer-events:none;
}
.hint.show{opacity:1}

/* ── nhật ký ── */
.diary{
  position:absolute;left:16px;right:16px;bottom:calc(var(--dock-h) + var(--safe-b) + 22px);
  z-index:18;text-align:center;pointer-events:none;
  opacity:0;transition:opacity .28s var(--ease);
}
.diary.show{opacity:1}
.diary-paper{
  display:inline-block;max-width:min(92vw,380px);padding:16px 20px 18px;
  background:
    repeating-linear-gradient(transparent, transparent 22px, rgba(40,28,12,.1) 23px),
    linear-gradient(180deg,#e8d4a4,#d4b878);
  color:#1f180f;border-radius:2px 9px 5px 3px;
  box-shadow:0 10px 28px -8px rgba(0,0,0,.78),0 0 0 1px rgba(50,36,12,.35),inset 0 0 0 1px rgba(255,236,190,.35);
  transform:rotate(-0.6deg);
}
.diary-day{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(28,20,10,.72);text-shadow:none;
}
.diary p{
  margin:6px 0 0;font-family:var(--hand);font-size:23px;line-height:1.45;
  color:#1a140c;text-shadow:none;font-weight:600;
}
body.is-day .diary-day{color:rgba(42,35,24,.62);text-shadow:none}
body.is-day .diary p{color:#2a2318;text-shadow:none}

/* ── thư gửi mai sau ── */
.letter-when{display:flex;flex-direction:column;gap:9px;margin:12px 0 4px}
.letter-when > span{font-size:11.5px;color:var(--text-dim);letter-spacing:.04em}
.letter-when input[type=date]{
  padding:11px 13px;border-radius:12px;background:var(--glass);
  border:1px solid var(--line);color:var(--text);font-family:inherit;font-size:14px;
}
.letter-paper{
  margin:10px 0 4px;padding:18px 18px 20px;border-radius:14px;
  background:linear-gradient(180deg,rgba(247,242,230,.97),rgba(238,231,214,.97));
  color:#2e2820;font-family:var(--hand,var(--serif));font-size:16px;line-height:1.78;
  white-space:pre-wrap;word-break:break-word;max-height:44vh;overflow:auto;
  box-shadow:inset 0 0 0 1px rgba(120,100,60,.16), 0 10px 28px -16px rgba(0,0,0,.55);
}
.ritual.is-letter b{color:var(--amber-soft)}

/* ── ngồi lại ──
   Không phải một tính năng để "dùng". Là chỗ để không làm gì: tắt hết giao
   diện, lời nhắn của người khác hiện lên từng câu một, chậm, rồi tan. Giống
   như ngồi cạnh ai đó đang kể. */
/* Nút "ngồi lại" nay nằm ở thanh dưới, đúng chỗ nút âm thanh cũ.
   Âm thanh đã có mục riêng trong Tuỳ chỉnh nên không cần nút ngoài nữa. */
.dock-sit{color:var(--amber-soft)}
body.is-day .dock-sit{color:#8a5109}

/* Hàng trong Tuỳ chỉnh: dùng chung kiểu với hàng tài khoản để cân đối.
   Trước đây mục Thư dùng class .sit-open mà class đó không còn CSS nào,
   nên cái phong bì phình to gần bằng cả bảng. */
.acct-row{width:100%;cursor:pointer;text-align:left}
.acct-row .acct-av{pointer-events:none}
.acct-go{flex:none;color:var(--text-faint);font-size:18px;line-height:1}

.sitting{
  /* Flex column, KHÔNG dùng grid place-items: grid tạo một hàng cho mỗi con
     rồi căn giữa từng hàng, nên câu và tên người gửi bị đẩy xa nhau ra hai
     đầu màn hình. */
  position:fixed;inset:0;z-index:60;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:12vh 9vw calc(13vh + var(--safe-b));text-align:center;
  /* Dìm cả cảnh thì cây, hoa và nến chìm hết — mà chúng mới là thứ người ta
     ngồi lại để nhìn. Chỉ phủ một dải mờ NGANG ngay sau chỗ đặt chữ, còn
     phần trên và phần dưới gần như để nguyên. */
  background:linear-gradient(180deg,
    rgba(6,8,12,.12) 0%,
    rgba(6,8,12,.16) 24%,
    rgba(5,7,11,.62) 40%,
    rgba(5,7,11,.62) 60%,
    rgba(6,8,12,.16) 76%,
    rgba(6,8,12,.12) 100%);
  animation:sitIn 1.4s var(--ease-out) both;
}
.sitting[hidden]{display:none}
.sit-line{
  margin:0;flex:none;max-width:22em;font-family:var(--serif);
  font-size:clamp(21px,5.6vw,31px);line-height:1.62;font-weight:400;
  color:#fbf6ec;
  /* Nền sáng hơn nên chữ phải tự lo lấy độ tương phản: hai lớp bóng, một lớp
     sát để tách nét, một lớp toả rộng để nhấc chữ khỏi tán lá phía sau. */
  text-shadow:0 1px 2px rgba(0,0,0,.9), 0 2px 26px rgba(0,0,0,.85), 0 0 60px rgba(0,0,0,.7);
  opacity:0;transition:opacity 2.2s var(--ease);
}
.sit-line.on{opacity:1}
.sit-by{
  margin:18px 0 0;flex:none;font-size:12px;letter-spacing:.11em;text-transform:uppercase;
  color:rgba(247,214,164,.9);text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 22px rgba(0,0,0,.8);
  opacity:0;transition:opacity 2.2s var(--ease);
}
.sit-by.on{opacity:1}
/* Gợi ý cách ra: một dòng rất mờ, tự tắt sau vài giây. Không cần nút —
   chạm vào đâu cũng ra được. */
.sit-tip{
  position:absolute;left:50%;bottom:calc(var(--safe-b) + 30px);transform:translateX(-50%);
  margin:0;font-size:11.5px;letter-spacing:.06em;color:rgba(244,241,234,.42);
  text-shadow:0 1px 6px rgba(0,0,0,.85);
  animation:sitTip 7s var(--ease) forwards;pointer-events:none;
}
@keyframes sitTip{0%{opacity:0}18%{opacity:1}70%{opacity:1}100%{opacity:0}}
@keyframes sitIn{from{opacity:0}to{opacity:1}}

/* đang ngồi thì mọi thứ khác lui hết */
body.sitting-on .topbar,body.sitting-on .dock,body.sitting-on .growth,
body.sitting-on .ritual,body.sitting-on .note-float,
body.sitting-on .hint,body.sitting-on .live-pings{
  opacity:0;pointer-events:none;transition:opacity 1s var(--ease);
}

@media (prefers-reduced-motion:reduce){
  .sitting,.sit-line,.sit-by{animation:none;transition:none}
}

/* ── cùng ở đây ──
   Một dòng rất nhẹ, không viền, không nền đậm: nó là lời thì thầm chứ không
   phải thông báo. Chỉ hiện khi có từ hai người trở lên. */
.together{
  position:absolute;left:50%;bottom:calc(var(--dock-h) + var(--safe-b) + 14px);
  transform:translateX(-50%);z-index:21;
  display:flex;align-items:center;gap:7px;padding:5px 12px;border-radius:100px;
  background:rgba(10,14,20,.34);backdrop-filter:blur(8px);
  font-size:11.5px;color:rgba(244,241,234,.6);white-space:nowrap;
  animation:tgIn 1.1s var(--ease-out) both;pointer-events:none;
}
.together[hidden]{display:none}
.tg-dot{
  width:6px;height:6px;border-radius:50%;flex:none;
  background:#f0b96b;box-shadow:0 0 8px rgba(240,185,107,.9);
  animation:tgPulse 2.8s ease-in-out infinite;
}
@keyframes tgPulse{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes tgIn{from{opacity:0;transform:translate(-50%,6px)}to{opacity:1;transform:translate(-50%,0)}}
body.is-day .together{background:rgba(255,255,255,.5);color:rgba(20,24,30,.7)}
body.zen .together,body.sitting-on .together{opacity:0}

/* ── dải nghi thức ──
   Một dòng mảnh dưới thanh đếm. Chỉ hiện khi có việc đáng nói: hôm nay là
   ngày đáng nhớ, hoặc ngọn nến của chính người xem đã lụi. Ngày thường thì
   biến mất hẳn — không có gì để nhắc thì đừng nhắc. */
.ritual{
  position:absolute;left:50%;top:calc(var(--safe-t) + 96px);transform:translateX(-50%);
  z-index:23;display:flex;align-items:center;gap:10px;
  max-width:min(94vw,560px);padding:9px 10px 9px 15px;border-radius:100px;
  background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(14px);
  animation:ritualIn .7s var(--ease-out) both;
}
.ritual[hidden]{display:none}
.ritual b{font-size:12.5px;font-weight:600;color:var(--amber-soft);white-space:nowrap}
.ritual span{
  font-size:12px;color:var(--text-dim);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ritual button{
  flex:none;padding:7px 15px;border-radius:100px;font-size:12.5px;font-weight:600;
  background:linear-gradient(180deg,rgba(247,214,164,.95),rgba(233,178,104,.95));
  color:#221704;transition:transform .25s var(--ease);
}
.ritual button:active{transform:scale(.94)}
@keyframes ritualIn{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}

/* ngày đáng nhớ thì đậm hơn một chút; giỗ thì đậm nhất */
.ritual.is-day{border-color:rgba(240,185,107,.4)}
.ritual.is-trace b{color:var(--text)}
body.is-day .ritual.is-trace b{color:#2b2620}
.ritual.is-mine b{color:#f7d6a4}
body.is-day .ritual.is-mine b{color:#7d4a09}
.ritual.rw-gio{
  border-color:rgba(240,185,107,.62);
  box-shadow:0 0 26px -8px rgba(240,185,107,.55);
}
body.is-day .ritual b{color:#8a5109}
body.is-day .ritual span{color:#4a4238}

@media (max-width:420px){
  .ritual{gap:8px;padding:8px 8px 8px 13px}
  .ritual span{display:none}
}

/* ── thanh dưới ── */
.dock{
  position:absolute;left:0;right:0;bottom:0;z-index:22;
  height:calc(var(--dock-h) + var(--safe-b));padding:0 14px var(--safe-b);
  display:flex;align-items:center;gap:10px;
  transition:transform .5s var(--ease),opacity .35s;
}
.dock.hide{transform:translateY(130%);opacity:0;pointer-events:none}
.dock-side{
  position:relative;width:46px;height:46px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(14px);color:var(--text-dim);
  transition:transform .25s,color .25s;
}
.dock-side:active{transform:scale(.9)}
/* trạng thái nút âm thanh phải nhìn thấy được ngay */
.dock-side .slash{display:none;pointer-events:none}
.dock-side .wave{opacity:1;transition:opacity .25s}
.dock-side.is-off .wave{opacity:0}
.dock-side.is-off .slash{display:block}
.dock-side.is-off .ic{opacity:.9}
.dock-side.is-on{color:var(--amber-soft);border-color:rgba(240,185,107,.4);background:rgba(240,185,107,.12)}
.dock-side.is-on .wave{animation:sound 2.4s ease-in-out infinite}
@keyframes sound{0%,100%{opacity:.45}50%{opacity:1}}
.dock-side em{
  position:absolute;top:-2px;right:-2px;min-width:19px;height:19px;padding:0 5px;
  border-radius:100px;background:var(--amber);color:#211603;
  font-size:10px;font-weight:600;font-style:normal;line-height:19px;text-align:center;
}
.dock-main{
  flex:1;height:50px;border-radius:100px;
  background:linear-gradient(180deg,rgba(247,214,164,.96),rgba(233,178,104,.96));
  color:#221704;font-size:15.5px;font-weight:600;letter-spacing:.01em;
  box-shadow:0 10px 30px -12px rgba(240,185,107,.6);
  transition:transform .25s var(--ease);
}
.dock-main:active{transform:scale(.97)}

/* ── khay hoa ── */
.tray{
  position:absolute;left:0;right:0;bottom:0;z-index:24;
  padding:10px 0 calc(16px + var(--safe-b));
  background:var(--glass-hi);backdrop-filter:blur(22px);
  border-top:1px solid var(--line);border-radius:var(--r-lg) var(--r-lg) 0 0;
  transform:translateY(110%);transition:transform .5s var(--ease-out);
  overflow:hidden;
}
.tray.up{transform:none}
.tray-grip{width:38px;height:4px;border-radius:4px;background:var(--line);margin:0 auto 12px}
.tray-title{margin:0 0 12px;text-align:center;font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint)}
.tray-rail{
  display:flex;flex-wrap:nowrap;gap:10px;overflow-x:auto;overflow-y:hidden;
  width:100%;min-width:0;padding:2px 16px 10px;scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  justify-content:flex-start;
}
.tray-rail::-webkit-scrollbar{display:none}
.item{
  flex:none;width:74px;scroll-snap-align:center;text-align:center;
  border-radius:var(--r-md);padding:9px 4px 8px;
  background:rgba(255,255,255,.035);border:1px solid transparent;
  transition:border-color .25s,background .25s,transform .25s var(--ease);
}
body.is-day .item{background:rgba(0,0,0,.035)}
.item canvas,.item img{
  width:46px;height:46px;display:block;margin:0 auto 5px;
  object-fit:contain;   /* ảnh hoa không cùng tỉ lệ, đừng để bị bóp méo */
}
.item span{display:block;font-size:10.5px;color:var(--text-dim);line-height:1.25}
.item.on{border-color:rgba(240,185,107,.55);background:rgba(240,185,107,.11);transform:translateY(-3px)}
.item.on span{color:var(--amber-soft)}
.tray-info{margin:9px 20px 0;text-align:center;min-height:38px}
.tray-meaning{margin:0;font-family:var(--hand);font-size:18px;color:var(--text-dim)}
.tray-effect{margin:2px 0 0;font-size:11px;color:var(--text-faint)}

/* ── chế độ đặt ── */
.placing{
  position:absolute;left:0;right:0;bottom:calc(var(--safe-b) + 20px);z-index:23;
  text-align:center;animation:fadeUp .5s var(--ease-out) both;
}
.placing p{
  margin:0 auto 12px;display:inline-block;padding:8px 18px;border-radius:100px;
  background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(12px);
  font-size:13px;color:var(--text-dim);
}
.placing button{font-size:13px;color:var(--text-faint);text-decoration:underline;text-underline-offset:3px;display:block;margin:0 auto}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ══════════ SCRIM ══════════ */
.scrim{
  position:fixed;inset:0;z-index:50;background:rgba(4,7,11,.62);
  backdrop-filter:blur(3px);opacity:0;visibility:hidden;
  transition:opacity .4s var(--ease),visibility .4s;
}
.scrim.on{opacity:1;visibility:visible}

/* ══════════ SHEET ══════════ */
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:55;
  transform:translateY(101%);visibility:hidden;
  transition:transform .48s var(--ease-out),visibility .48s;
}
.sheet.on{transform:none;visibility:visible}
.sheet-panel{
  background:var(--glass-hi);backdrop-filter:blur(26px);
  border-top:1px solid var(--line);border-radius:var(--r-lg) var(--r-lg) 0 0;
  padding:10px 20px calc(20px + var(--safe-b));
  max-height:88dvh;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
}
.sheet-tall .sheet-panel{height:82dvh;display:flex;flex-direction:column}
.sheet-grip{width:38px;height:4px;border-radius:4px;background:var(--line);margin:0 auto 16px;flex:none}
.sheet h2{margin:0 0 5px;font-family:var(--serif);font-size:21px;font-weight:600}
.sheet-sub{margin:0 0 16px;font-size:13px;color:var(--text-faint);line-height:1.55}
.sheet-x{width:32px;height:32px;border-radius:50%;font-size:22px;color:var(--text-faint);line-height:1}
.sheet-actions{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.btn-solid,.btn-ghost{flex:1;height:40px;border-radius:100px;font-size:13.5px;font-weight:500;transition:transform .22s;padding:0 12px}
.btn-solid.sm,.btn-ghost.sm{height:34px;font-size:12.5px;padding:0 10px}
.sign-actions{gap:6px;margin-top:12px}
.sign-actions .btn-solid,.sign-actions .btn-ghost{flex:1 1 0;min-width:0}
.btn-solid{background:linear-gradient(180deg,rgba(247,214,164,.96),rgba(233,178,104,.96));color:#221704;font-weight:600}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--text-dim)}
.btn-solid:active,.btn-ghost:active{transform:scale(.97)}
.sheet-warn{margin:14px 0 0;font-size:11.5px;color:var(--text-faint);text-align:center;line-height:1.5}

/* soạn lời nhắn */
#note-text{
  width:100%;padding:14px;border-radius:var(--r-md);resize:none;
  background:rgba(216,201,174,.09);border:1px solid var(--line);
  font-size:15.5px;line-height:1.6;font-family:var(--hand);
}
body.is-day #note-text{background:rgba(0,0,0,.04)}
#note-text:focus{outline:none;border-color:rgba(240,185,107,.45)}
.note-meta{display:flex;align-items:center;gap:10px;margin-top:10px}
#note-name{
  flex:1;min-width:0;height:42px;padding:0 14px;border-radius:100px;
  background:rgba(216,201,174,.09);border:1px solid var(--line);font-size:13.5px;
}
body.is-day #note-name{background:rgba(0,0,0,.04)}
#note-name:focus{outline:none;border-color:rgba(240,185,107,.45)}
#note-name:disabled{opacity:.4}
.note-meta .count{font-size:11.5px;color:var(--text-faint);font-variant-numeric:tabular-nums}
.anon{display:flex;align-items:center;gap:9px;margin-top:13px;font-size:13.5px;color:var(--text-dim)}
.anon input{width:17px;height:17px;accent-color:var(--amber)}

/* ══════════ KHOẢNH KHẮC ══════════ */
.moment{
  position:fixed;inset:0;z-index:44;display:grid;place-items:end center;
  padding:0 24px calc(46px + var(--safe-b));
  background:linear-gradient(to top,rgba(5,8,13,.9) 12%,rgba(5,8,13,.45) 45%,transparent 78%);
  opacity:0;visibility:hidden;transition:opacity .7s var(--ease),visibility .7s;
}
.moment.on{opacity:1;visibility:visible}
.moment-inner{width:100%;max-width:400px;text-align:center}
.moment-quote{
  margin:0 0 26px;font-family:var(--serif);font-style:italic;
  font-size:19px;line-height:1.66;color:#f6f2e9;
  animation:fadeUp 1.1s var(--ease-out) .25s both;
}
.moment-actions{display:flex;gap:10px;animation:fadeUp .9s var(--ease-out) .7s both}
.moment .btn-ghost,
#sheet-share .btn-ghost,
body.is-day .moment .btn-ghost,
body.is-day #sheet-share .btn-ghost{
  background:#f4efe4;border:0;color:#1c1812;font-weight:600;
}
.moment .btn-solid{background:linear-gradient(180deg,#f7d6a4,#e9b268);color:#221704;font-weight:600}

/* ══════════ SỔ TANG ══════════ */
.book-head{display:flex;align-items:center;justify-content:space-between;flex:none}
.segbar{display:flex;gap:5px;background:rgba(255,255,255,.05);padding:4px;border-radius:100px}
body.is-day .segbar{background:rgba(0,0,0,.05)}
.segbar button{flex:1;height:32px;padding:0 12px;border-radius:100px;font-size:12.5px;color:var(--text-faint);white-space:nowrap;transition:background .25s,color .25s}
.segbar button.on{background:rgba(240,185,107,.16);color:var(--amber-soft)}
#book-filter{margin:14px 0 4px;flex:none}
.book-list{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:12px 0 4px;display:flex;flex-direction:column;gap:10px}
.nc{
  flex:none;position:relative;padding:18px 16px 16px;border-radius:2px 10px 8px 3px;
  color:#2c261c;border:1px solid rgba(80,60,30,.22);
  box-shadow:0 8px 18px -10px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,240,.28);
  overflow:hidden;
}
.nc::before{
  content:"";position:absolute;top:-6px;left:18px;width:38px;height:14px;
  background:rgba(220,190,120,.55);transform:rotate(-8deg);
  box-shadow:0 1px 2px rgba(0,0,0,.12);
}
.nc-top{display:flex;align-items:flex-start;gap:10px}
.nc-flower{flex:none;width:44px;height:44px;object-fit:contain;display:block}
.nc-msg{margin:0;font-family:var(--hand);font-size:19px;line-height:1.5;color:#2a2318;flex:1;min-width:0}
.nc-brand{margin:8px 0 0;font-size:10.5px;letter-spacing:.02em;color:rgba(42,35,24,.48)}
.nc-foot{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:11.5px;color:rgba(42,35,24,.55)}
.nc-foot .who{color:rgba(42,35,24,.72);font-weight:500}
/* ── Sáu loại giấy ────────────────────────────────────────────────────────
   Không phải sáu màu nền khác nhau, mà sáu thứ giấy khác nhau: trang vở kẻ
   ngang, giấy nhớ gấp góc, giấy kraft cũ, giấy caro, giấy thư có khung, và
   giấy hoa. Vẽ hoàn toàn bằng gradient, không dùng ảnh.
   `::before` là miếng băng dính, `::after` dành cho chi tiết riêng từng loại. */

/* 0 — trang vở kẻ ngang, có lề đỏ và lỗ đục bên trái */
.paper-0{
  background:
    repeating-linear-gradient(180deg,transparent 0 23px,rgba(70,110,150,.22) 23px 24px),
    linear-gradient(180deg,#fdfaf0,#f5eddc);
  transform:rotate(-.4deg);
  padding-left:38px;
}
/* băng dính né sang phải cho khỏi đè lên dải lỗ đục */
.paper-0::before{left:auto;right:20px;background:rgba(150,175,200,.5);transform:rotate(5deg)}
.paper-0::after{
  content:"";position:absolute;inset:0 auto 0 0;width:30px;
  background:
    radial-gradient(circle at 15px 22%,rgba(60,45,25,.24) 3.4px,transparent 3.6px),
    radial-gradient(circle at 15px 50%,rgba(60,45,25,.24) 3.4px,transparent 3.6px),
    radial-gradient(circle at 15px 78%,rgba(60,45,25,.24) 3.4px,transparent 3.6px),
    linear-gradient(90deg,transparent 0 25px,rgba(200,70,60,.5) 25px 26px,transparent 26px);
  pointer-events:none;
}

/* 1 — giấy nhớ vàng, gấp góc dưới phải */
.paper-1{
  background:linear-gradient(160deg,#fff2b8 0%,#fbe38c 62%,#f3d365 100%);
  transform:rotate(.45deg);border-radius:2px 2px 2px 0;
}
.paper-1::after{
  content:"";position:absolute;right:0;bottom:0;width:26px;height:26px;
  background:linear-gradient(135deg,rgba(190,150,40,.45) 0 50%,transparent 50%);
  border-radius:0 0 0 4px;pointer-events:none;
}
.paper-1::before{background:rgba(214,176,70,.5);left:auto;right:16px;transform:rotate(7deg)}

/* 2 — giấy kraft cũ, mép trên rách */
.paper-2{
  background:
    radial-gradient(circle at 22% 30%,rgba(120,85,45,.10) 0 18%,transparent 20%),
    radial-gradient(circle at 76% 68%,rgba(120,85,45,.09) 0 16%,transparent 18%),
    linear-gradient(175deg,#e8d5b4,#d6bd94);
  transform:rotate(-.25deg);border-radius:3px;
}
.paper-2::after{
  content:"";position:absolute;left:0;right:0;top:0;height:7px;
  background:repeating-linear-gradient(90deg,rgba(90,62,30,.9) 0 3px,transparent 3px 9px);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent);
  mask-image:linear-gradient(180deg,#000,transparent);
  opacity:.18;pointer-events:none;
}
.paper-2::before{background:rgba(168,132,80,.5);width:46px}

/* 3 — giấy caro ô vuông */
.paper-3{
  background:
    repeating-linear-gradient(90deg,transparent 0 13px,rgba(70,110,160,.18) 13px 14px),
    repeating-linear-gradient(180deg,transparent 0 13px,rgba(70,110,160,.18) 13px 14px),
    linear-gradient(180deg,#f4f8fd,#e4edf8);
  transform:rotate(.35deg);border-radius:2px;
}
.paper-3::before{background:rgba(140,170,210,.55);left:12px}

/* 4 — giấy thư, khung viền kép */
.paper-4{
  background:linear-gradient(180deg,#fdf6e6,#f6e9cf);
  transform:rotate(-.5deg);border-radius:2px;
}
.paper-4::after{
  content:"";position:absolute;inset:7px;
  border:1px solid rgba(150,110,55,.3);
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.5),inset 0 0 0 4px rgba(150,110,55,.16);
  pointer-events:none;
}
.paper-4::before{background:rgba(198,160,90,.5);transform:rotate(4deg)}

/* 5 — giấy hoa, hoạ tiết chấm mềm */
.paper-5{
  background:
    radial-gradient(circle at 18% 24%,rgba(196,120,150,.16) 0 5px,transparent 6px),
    radial-gradient(circle at 62% 12%,rgba(196,120,150,.12) 0 4px,transparent 5px),
    radial-gradient(circle at 84% 62%,rgba(196,120,150,.14) 0 6px,transparent 7px),
    radial-gradient(circle at 38% 82%,rgba(196,120,150,.11) 0 5px,transparent 6px),
    linear-gradient(170deg,#fdeef3,#f3d9e3);
  transform:rotate(.3deg);border-radius:2px 10px 2px 10px;
}
.paper-5::before{background:rgba(212,150,178,.5);left:auto;right:20px}
body.is-day .nc{box-shadow:0 4px 12px -8px rgba(0,0,0,.25)}
.nc-foot .dot{opacity:.45}
.nc-react{margin-left:auto;display:flex;gap:6px}
.nc-react button{
  display:flex;align-items:center;gap:4px;padding:4px 9px;border-radius:100px;
  background:rgba(40,30,16,.08);font-size:11.5px;color:rgba(42,35,24,.65);transition:transform .2s,background .2s;
}
.nc-react button.on{background:rgba(180,80,40,.16);color:#8a3518}
body.is-day .nc-react button{background:rgba(0,0,0,.05)}
.nc-react button.on{background:rgba(240,185,107,.18);color:var(--amber-soft)}
.nc-react button:active{transform:scale(.9)}
.book-empty{text-align:center;padding:50px 20px;color:var(--text-faint);font-size:13.5px}

/* đọc một lời nhắn */
.read-card{
  position:relative;padding:26px 22px 22px;border-radius:3px 12px 8px 5px;text-align:center;
  color:#2c261c;border:1px solid rgba(80,60,30,.22);
  box-shadow:0 10px 24px -10px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,240,.3);
  overflow:hidden;
}
.read-card::before{
  content:"";position:absolute;top:-7px;left:50%;width:52px;height:16px;margin-left:-26px;
  background:rgba(210,180,110,.58);transform:rotate(-3deg);
}
body.is-day .read-card{box-shadow:0 4px 12px -8px rgba(0,0,0,.2)}
.read-card .rc-flower{width:52px;height:52px;margin:0 auto 12px;display:block;object-fit:contain}
.read-card .rc-msg{margin:0;font-family:var(--hand);font-size:24px;line-height:1.5;color:#2a2318}
.read-card .rc-meta{margin:14px 0 0;font-size:12px;color:rgba(42,35,24,.58)}
.read-card .rc-brand{margin:8px 0 0;font-size:11px;letter-spacing:.02em;color:rgba(42,35,24,.5)}
.react-row{display:flex;justify-content:center;gap:8px;margin-top:16px}
.react-row button{
  padding:9px 15px;border-radius:100px;background:rgba(255,255,255,.05);
  font-size:13px;color:var(--text-dim);display:flex;align-items:center;gap:6px;transition:transform .2s,background .25s;
}
body.is-day .react-row button{background:rgba(0,0,0,.05)}
.react-row button.on{background:rgba(240,185,107,.18);color:var(--amber-soft)}
.react-row button:active{transform:scale(.92)}

/* ══════════ THIỆP CHIA SẺ ══════════ */
.seg-wide{margin:0 0 14px}
.seg-wide button{flex:1}
.share-frame{
  border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);
  background:var(--ink);max-width:min(340px,86vw);margin:0 auto;
}
.share-frame img{display:block;width:100%;height:auto}
.share-net{
  display:flex;gap:8px;margin-top:10px;justify-content:center;
}
.share-net button{
  width:34px;height:34px;border-radius:50%;padding:0;
  display:grid;place-items:center;border:0;color:#fff;
  transition:transform .2s,opacity .2s;
}
.share-net button:active{transform:scale(.92)}
.share-net svg{width:15px;height:15px}
.share-net .sn-share{background:#c48a3a}
.share-net .sn-threads{background:#000}
.share-net .sn-fb{background:#1877F2}
.share-net .sn-x{background:#0f1419}
.share-net .sn-copy{background:#4a5560}
#sheet-share h2{font-size:18px;margin:0 0 4px}
#sheet-share .sheet-sub{margin:0 0 8px;font-size:12px}
#sheet-share .sheet-actions{margin-top:10px}
#sheet-share .btn-solid,#sheet-share .btn-ghost{height:44px;font-size:14.5px;font-weight:600}
#sheet-share .btn-ghost{
  background:#f4efe4;border:0;color:#1c1812;
}

.live-pings{
  position:absolute;left:50%;top:calc(var(--safe-t) + 78px);transform:translateX(-50%);
  z-index:21;display:flex;flex-direction:column;align-items:center;gap:6px;
  pointer-events:none;width:min(92vw,360px);
}
.live-ping{
  padding:7px 14px;border-radius:100px;font-size:12px;letter-spacing:.01em;
  background:rgba(12,16,23,.88);border:1px solid var(--line);color:#f4f1ea;
  backdrop-filter:blur(12px);animation:toastIn .4s var(--ease-out);
}
.live-ping.out{animation:toastOut .35s var(--ease) forwards}
body.is-day .live-ping{background:rgba(255,254,251,.94);color:#14181e}

.act.live{border-color:rgba(143,185,148,.28)}
.act.live .act-ic{background:rgba(127,185,138,.18);color:#9dcaa4}
.act.live .act-go{background:rgba(127,185,138,.16);color:#9dcaa4}
.act.soon{border-color:rgba(240,185,107,.28);opacity:1}
.act.soon .act-ic{background:rgba(240,185,107,.14);color:#f0b96b}
.act.soon .act-go{background:rgba(240,185,107,.16);color:#f0b96b}
.act.locked{border-color:rgba(224,139,122,.32);opacity:1}
.act.locked .act-ic{background:rgba(224,139,122,.16);color:#e08b7a}
.act.locked .act-go{background:rgba(224,139,122,.16);color:#e08b7a}
.act.closed{border-color:rgba(244,241,234,.08);opacity:.55}

#sign-form{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
#sign-form[hidden],#sign-support[hidden],#sign-go[hidden]{display:none !important}
#sign-name,#sign-province{
  width:100%;height:40px;padding:0 14px;border-radius:100px;
  background:rgba(216,201,174,.09);border:1px solid var(--line);font-size:13.5px;
}
body.is-day #sign-name,body.is-day #sign-province{background:rgba(0,0,0,.04)}
#sign-name:focus,#sign-province:focus{outline:none;border-color:rgba(240,185,107,.45)}

/* cổng liên kết tài khoản trước khi ký tên */
#sign-gate{
  padding:14px;border-radius:var(--r-md);margin-bottom:12px;text-align:center;
  background:rgba(240,185,107,.09);border:1px solid rgba(240,185,107,.28);
}
body.is-day #sign-gate{background:rgba(154,92,12,.09);border-color:rgba(154,92,12,.3)}
.sign-gate-txt{margin:0 0 11px;font-size:12.5px;line-height:1.6;color:var(--text-dim)}
#sign-link{width:100%}

.spaces-brand{flex:1;text-align:center;min-width:0}
.spaces-brand p{margin:0;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:rgba(244,241,234,.5)}
.spaces-brand span{display:block;margin-top:2px;font-size:10.5px;letter-spacing:.02em;text-transform:none;color:rgba(244,241,234,.38)}

/* ══════════ GỢI Ý LỜI NHẮN ══════════ */
.chips{
  display:flex;flex-wrap:nowrap;gap:6px;margin-top:9px;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;padding:4px 2px 8px;
  width:100%;min-width:0;max-width:100%;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
}
.chips::-webkit-scrollbar{display:none}
.chips button{
  flex:none;padding:6px 12px;border-radius:100px;font-size:12px;white-space:nowrap;
  background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--text-faint);
  transition:transform .2s,color .25s;
}
body.is-day .chips button{background:rgba(20,24,30,.05)}
.chips button:active{transform:scale(.94);color:var(--text)}

/* ══════════ LỜI NHẮN TRONG KHOẢNH KHẮC ══════════ */
.moment-note{
  margin:0 auto 22px;max-width:340px;padding:18px 20px;border-radius:var(--r-md);
  background:linear-gradient(155deg,rgba(216,201,174,.16),rgba(216,201,174,.06));
  border:1px solid rgba(244,241,234,.16);
  animation:fadeUp 1s var(--ease-out) .15s both;
}
.mn-msg{margin:0;font-family:var(--hand);font-size:22px;line-height:1.5;color:#f8f4ec}
.mn-by{margin:10px 0 0;font-size:11.5px;color:rgba(244,241,234,.5)}

.opt-note{
  margin:10px 0 4px;padding:10px 12px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.04);border:1px solid var(--line);
  font-size:11.5px;line-height:1.55;color:var(--text-faint);
}
body.is-day .opt-note{background:rgba(20,24,30,.05)}

/* ══════════ LỚP 2 ══════════ */
/* thứ tự lớp: sân khấu 20-24 · dự án 30 · khoảnh khắc 44 · scrim 50
   · sheet 55 · toast 70 · mốc 75 */
.spaces{
  position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#050a12 0%,#081420 46%,#04080e 100%);
  opacity:0;visibility:hidden;transform:scale(1.06);
  transition:opacity .6s var(--ease),visibility .6s,transform .6s var(--ease-out);
}
.spaces.on{opacity:1;visibility:visible;transform:none}
/* mặt biển vẽ sau danh sách — cái tên Seasay sống ở lớp này */
#sea{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.spaces-top,.spaces-scroll{position:relative;z-index:1}
.spaces-top{
  flex:none;display:flex;align-items:center;gap:10px;
  padding:calc(var(--safe-t) + 12px) 14px 12px;
}
.spaces-top p{margin:0;text-align:center;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:rgba(244,241,234,.5)}
.spaces-scroll{
  flex:1;overflow-y:auto;overscroll-behavior:contain;
  padding:6px 16px calc(28px + var(--safe-b));
}

/* ── thẻ dự án ── */
.proj{
  border-radius:var(--r-lg);border:1px solid rgba(244,241,234,.14);overflow:hidden;
  background:rgba(10,12,16,.88);
  margin-bottom:15px;color:#f4f1ea;
}
.proj.open{border-color:rgba(240,185,107,.28)}
.proj-head{padding:14px 14px 10px}
.proj-tag{
  display:inline-block;margin-bottom:9px;padding:3px 10px;border-radius:100px;
  font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  background:rgba(244,241,234,.08);color:rgba(244,241,234,.55);
}
.proj.open .proj-tag{background:rgba(240,185,107,.18);color:var(--amber-soft)}
.proj-head h3{margin:0 0 6px;font-family:var(--serif);font-size:21px;font-weight:600}
.proj-head p{margin:0;font-size:12.5px;line-height:1.6;color:rgba(244,241,234,.55)}
.proj-sum{
  display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:13px;
  font-size:11.5px;color:rgba(244,241,234,.45);
}
.proj-sum b{font-size:16px;font-weight:600;color:var(--amber-soft);font-variant-numeric:tabular-nums;margin-right:3px}
.proj-body{padding:0 10px 10px;display:flex;flex-direction:column;gap:6px}
.proj-extra{margin:8px 0 0;font-size:12px;line-height:1.55;color:rgba(244,241,234,.52)}
.proj-links{margin:8px 0 0;display:flex;flex-direction:column;gap:4px}
.proj-links a,.proj-docs span{
  font-size:11.5px;color:var(--amber-soft);text-decoration:none;
}
.proj-docs{margin-top:6px;display:flex;flex-direction:column;gap:3px;color:rgba(244,241,234,.5);font-size:11.5px}
.vote-card{
  padding:10px 12px;border-radius:var(--r-md);
  background:rgba(8,10,14,.9);border:1px solid rgba(240,185,107,.22);
}
.vote-card b{display:block;font-size:13.5px;font-weight:500;margin-bottom:4px}
.vote-card p{margin:0 0 8px;font-size:12px;line-height:1.5;color:rgba(244,241,234,.55)}
.vote-row{display:flex;gap:6px;align-items:center}
.vote-row button{flex:1;height:30px;border-radius:100px;font-size:12px;border:1px solid var(--line);color:var(--text-dim)}
.vote-row button.on-yes{background:rgba(127,185,138,.2);color:#9dcaa4;border-color:transparent}
.vote-row button.on-no{background:rgba(224,139,122,.2);color:#e08b7a;border-color:transparent}
.vote-row em{flex:none;font-style:normal;font-size:11px;color:rgba(244,241,234,.4)}
.propose-form{display:flex;flex-direction:column;gap:6px;margin:4px 0 8px}
.propose-form label{font-size:11.5px;color:var(--text-faint);margin-top:6px}
.propose-form input,.propose-form textarea{
  width:100%;padding:10px 12px;border-radius:12px;
  background:rgba(216,201,174,.09);border:1px solid var(--line);
  font-size:14px;color:var(--text);font-family:inherit;
}
.propose-form textarea{resize:vertical;min-height:64px;line-height:1.5}

/* ── thẻ hành động trong dự án ── */
.act{
  flex:none;display:flex;align-items:center;gap:9px;text-align:left;
  padding:8px 10px;border-radius:12px;
  background:rgba(8,10,14,.92);border:1px solid rgba(244,241,234,.14);
  color:#f4f1ea;transition:transform .25s var(--ease),background .25s;
}
.act:active{transform:scale(.98)}
.act-ic{
  flex:none;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;
  background:rgba(240,185,107,.13);color:var(--amber-soft);
}
.act-ic svg{width:16px;height:16px;fill:none}
.act-txt{flex:1;min-width:0}
.act-txt b{display:block;font-size:13px;font-weight:500;margin-bottom:1px}
.act-txt span{display:block;font-size:11px;line-height:1.4;color:rgba(244,241,234,.5)}
.act-go{
  flex:none;font-size:10px;padding:3px 8px;border-radius:100px;
  color:rgba(244,241,234,.45);letter-spacing:.02em;
}
.act-bar{height:3px;border-radius:3px;background:rgba(244,241,234,.1);margin-top:6px;overflow:hidden}
.act-bar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,rgba(240,185,107,.5),var(--amber));transition:width 1.2s var(--ease-out)}
.act.done .act-ic{background:rgba(143,168,140,.16);color:#b6c9b3}
body.is-day .proj{background:rgba(248,244,236,.94);color:#1c1812;border-color:rgba(20,24,30,.12)}
body.is-day .proj-head p,body.is-day .act-txt span{color:rgba(28,24,18,.58)}
body.is-day .act{background:rgba(255,255,255,.94);color:#1c1812;border-color:rgba(20,24,30,.12)}
/* Thẻ sắp có / tạm khoá: chữ phải đọc được trên cả nền tối lẫn thẻ trắng ban ngày.
   Đặt sau .act-txt span để không bị màu kem đè lên nền trắng. */
.act.soon .act-txt b,.act.locked .act-txt b{color:#f4f1ea}
.act.soon .act-txt span,.act.locked .act-txt span{color:rgba(244,241,234,.78)}
body.is-day .act.soon .act-txt b,
body.is-day .act.locked .act-txt b{color:#1c1812}
body.is-day .act.soon .act-txt span,
body.is-day .act.locked .act-txt span{color:#3d372e}
body.is-day .act.soon .act-go{background:rgba(154,92,12,.14);color:#7a4a0c}

.spaces-note{
  margin:2px 4px 18px;font-size:11.5px;line-height:1.6;
  color:rgba(244,241,234,.34);text-align:center;
}

/* ══════════ TÀI KHOẢN KHÁCH ══════════ */
.acct{
  display:flex;align-items:center;gap:12px;margin:2px 0 8px;
  padding:12px;border-radius:var(--r-md);
  background:rgba(216,201,174,.07);border:1px solid var(--line);
}
body.is-day .acct{background:rgba(0,0,0,.04)}
.acct-av{
  flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  font-size:15px;font-weight:600;color:#221704;padding:0;border:0;cursor:pointer;overflow:hidden;
  background:linear-gradient(150deg,var(--amber-soft),var(--amber));
}
.acct-av img{width:100%;height:100%;object-fit:cover;display:block}
.acct-actions{display:flex;gap:8px;margin:0 0 12px}
.acct-btn-ghost{
  flex:1;background:rgba(244,241,234,.06);border:1px solid var(--line);color:var(--text-dim);
}
.acct-txt{flex:1;min-width:0;text-align:left}
.acct-txt b{display:block;font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-txt span{display:block;font-size:11px;color:var(--text-faint);margin-top:1px}

/* thẻ tài khoản trong Tuỳ chỉnh giờ là một nút mở trang hồ sơ */
.acct-open{width:100%;cursor:pointer;transition:transform .2s var(--ease),background .2s}
.acct-open:active{transform:scale(.985)}
.acct-go{flex:none;font-size:18px;color:var(--text-faint);line-height:1}

/* ── trang hồ sơ ── */
.pf-head{display:flex;flex-direction:column;align-items:center;gap:10px;margin:4px 0 18px}
.pf-av{
  width:84px;height:84px;border-radius:50%;display:grid;place-items:center;
  font-size:32px;font-weight:600;color:#221704;padding:0;border:0;overflow:hidden;cursor:pointer;
  background:linear-gradient(150deg,var(--amber-soft),var(--amber));
  box-shadow:0 6px 20px -8px rgba(0,0,0,.5);
}
.pf-av img{width:100%;height:100%;object-fit:cover;display:block}
.pf-avbtn{
  padding:6px 14px;border-radius:100px;font-size:12px;
  background:rgba(240,185,107,.14);border:1px solid rgba(240,185,107,.3);color:var(--amber-soft);
}
body.is-day .pf-avbtn{background:rgba(154,92,12,.12);border-color:rgba(154,92,12,.32)}
#sheet-profile .f{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
#sheet-profile .f label{font-size:11.5px;color:var(--text-faint)}
#pf-name{
  width:100%;height:46px;padding:0 15px;border-radius:100px;
  background:rgba(216,201,174,.09);border:1px solid var(--line);font-size:14.5px;
}
body.is-day #pf-name{background:rgba(0,0,0,.04)}
#pf-name:focus{outline:none;border-color:rgba(240,185,107,.45)}
.pf-hint{margin:0 2px;font-size:11.5px;line-height:1.5;color:var(--text-faint)}
.pf-rows{
  border-radius:var(--r-md);overflow:hidden;margin-bottom:14px;
  background:rgba(216,201,174,.06);border:1px solid var(--line);
}
body.is-day .pf-rows{background:rgba(0,0,0,.035)}
.pf-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 14px;font-size:13px;color:var(--text-faint);
  border-bottom:1px solid var(--line);
}
.pf-row:last-child{border-bottom:0}
.pf-row b{font-weight:500;color:var(--text-dim);font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60%}

/* ── lịch sử hoạt động trong hồ sơ ── */
.pf-sec{
  margin:22px 0 10px;font-size:12px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-faint);
}
.pf-activity{display:flex;flex-direction:column;gap:7px}
.pf-empty{margin:0;padding:26px 16px;text-align:center;font-size:13px;color:var(--text-faint)}
.pf-group{display:flex;flex-direction:column;gap:7px}
.pf-proj{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:11px 13px;border-radius:var(--r-sm);
  background:rgba(240,185,107,.1);border:1px solid rgba(240,185,107,.24);
  color:var(--text);cursor:pointer;transition:transform .2s var(--ease);
}
.pf-proj:active{transform:scale(.99)}
body.is-day .pf-proj{background:rgba(154,92,12,.1);border-color:rgba(154,92,12,.26)}
.pf-chev{
  flex:none;font-size:17px;line-height:1;color:var(--amber-soft);
  transform:rotate(90deg);transition:transform .25s var(--ease);
}
.pf-group.collapsed .pf-chev{transform:rotate(0deg)}
.pf-ptitle{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pf-ptitle b{font-family:var(--serif);font-size:15px;font-weight:600}
.pf-ptitle span{font-size:11px;color:var(--text-faint)}

/* thu gọn: giấu danh sách, giữ lại thanh dự án */
.pf-list{display:flex;flex-direction:column;gap:7px}
.pf-group.collapsed .pf-list{display:none}

.pf-item{
  display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;
  padding:10px 12px;cursor:pointer;
  border-radius:var(--r-sm);background:rgba(216,201,174,.06);border:1px solid var(--line);
  color:var(--text);transition:transform .18s var(--ease),background .2s;
}
.pf-item:active{transform:scale(.985)}
.pf-go{flex:none;align-self:center;font-size:15px;color:var(--text-faint)}
body.is-day .pf-item{background:rgba(0,0,0,.035)}
.pf-item.hid{opacity:.5}
.pf-ic{
  flex:none;padding:2px 8px;border-radius:100px;font-size:10px;white-space:nowrap;
  background:rgba(240,185,107,.14);color:var(--amber-soft);
}
.pf-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.pf-body b{font-family:var(--hand);font-size:16px;font-weight:600;line-height:1.4;color:var(--text)}
.pf-body b.none{font-family:var(--font);font-size:12.5px;font-weight:400;color:var(--text-faint)}
.pf-body span{font-size:11px;color:var(--text-faint)}

/* ── đổi tài khoản ── */
.sw-card{
  display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--r-md);
  background:rgba(240,185,107,.1);border:1px solid rgba(240,185,107,.26);margin-bottom:12px;
}
body.is-day .sw-card{background:rgba(154,92,12,.1);border-color:rgba(154,92,12,.28)}
.sw-av{
  flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  font-size:17px;font-weight:600;color:#221704;
  background:linear-gradient(150deg,var(--amber-soft),var(--amber));
}
.sw-txt{flex:1;min-width:0}
.sw-txt b{display:block;font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sw-txt span{display:block;font-size:11.5px;color:var(--text-faint);margin-top:1px}
.sw-note{margin:0 2px 4px;font-size:12.5px;line-height:1.6;color:var(--text-dim)}
.acct-btn{
  flex:none;padding:8px 13px;border-radius:100px;font-size:12px;
  background:rgba(240,185,107,.14);border:1px solid rgba(240,185,107,.3);color:var(--amber-soft);
}
.acct-legal{
  display:flex;align-items:flex-start;gap:8px;margin:0 0 12px;padding:0 2px;
  font-size:12px;line-height:1.5;color:var(--text-faint);
}
.acct-legal label{cursor:pointer;flex:1}
.acct-legal input{margin-top:3px;accent-color:var(--amber);flex:none}
.acct-legal a{color:var(--amber-soft);text-decoration:underline;text-underline-offset:2px}
.acct-legal a:hover{color:var(--amber)}

/* ══════════ DÒNG SỰ KIỆN ══════════ */
.tl{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:4px 0 4px 4px}
.tl-it{position:relative;padding:0 0 20px 24px;border-left:1px solid var(--line)}
.tl-it:last-child{border-left-color:transparent;padding-bottom:6px}
.tl-it::before{
  content:"";position:absolute;left:-4.5px;top:5px;width:8px;height:8px;border-radius:50%;
  background:var(--amber);box-shadow:0 0 0 3px var(--glass-hi);
}
.tl-it.soft::before{background:var(--text-faint)}
.tl-d{display:block;font-size:11px;letter-spacing:.08em;color:var(--amber-soft);margin-bottom:3px}
.tl-it.soft .tl-d{color:var(--text-faint)}
.tl-b{margin:0;font-size:13.5px;line-height:1.62;color:var(--text-dim)}
.tl-src{display:inline-flex;align-items:center;gap:4px;margin-top:7px;font-size:11.5px;color:var(--amber-soft);text-decoration:none}
.tl-src::after{content:"↗";font-size:10px;opacity:.7}
.tl-flag{
  display:inline-block;margin-top:7px;padding:2px 8px;border-radius:100px;
  font-size:10px;background:rgba(244,241,234,.07);color:var(--text-faint);
}

/* ══════════ ĐIỀU LUẬT ══════════ */
.sheet-note-warn{
  margin:0 0 14px;padding:10px 12px;border-radius:var(--r-sm);
  background:rgba(224,139,122,.1);border:1px solid rgba(224,139,122,.22);
  font-size:11.5px;line-height:1.55;color:var(--text-dim);
}
.law{flex:1;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:10px;padding-bottom:4px}
.law-it{
  flex:none;padding:14px;border-radius:var(--r-md);
  background:rgba(216,201,174,.06);border:1px solid var(--line);
}
body.is-day .law-it{background:rgba(0,0,0,.035)}
.law-it h4{margin:0 0 3px;font-size:14px;font-weight:600}
.law-it .law-src{display:block;font-size:11px;color:var(--text-faint);margin-bottom:8px}
.law-it p{margin:0;font-size:13px;line-height:1.66;color:var(--text-dim)}
.law-it a{display:inline-block;margin-top:8px;font-size:11.5px;color:var(--amber-soft);text-decoration:none}
.law-it a::after{content:" ↗";font-size:10px;opacity:.7}

/* ══════════ KÝ TÊN ══════════ */
.sign-quote{
  padding:14px;border-radius:var(--r-md);margin-bottom:14px;
  background:rgba(216,201,174,.07);border-left:2px solid rgba(240,185,107,.5);
  font-size:13.5px;line-height:1.66;color:var(--text-dim);
}
body.is-day .sign-quote{background:rgba(0,0,0,.035)}
#sign-name{
  width:100%;height:46px;padding:0 15px;border-radius:100px;
  background:rgba(216,201,174,.09);border:1px solid var(--line);font-size:14px;
}
body.is-day #sign-name{background:rgba(0,0,0,.04)}
#sign-name:focus{outline:none;border-color:rgba(240,185,107,.45)}
#sign-name:disabled{opacity:.4}

/* ══════════ THÔNG BÁO MỐC ══════════ */
.herald{
  position:fixed;left:50%;top:32%;transform:translate(-50%,-50%) scale(.9);
  z-index:75;text-align:center;pointer-events:none;
  width:min(380px,90vw);
  padding:28px 32px 24px;
  background:linear-gradient(135deg,rgba(20,15,10,.96),rgba(30,22,14,.94));
  border:1px solid rgba(240,185,107,.4);
  border-radius:20px;
  box-shadow:0 0 60px rgba(240,185,107,.25),0 20px 60px rgba(0,0,0,.5);
  opacity:0;
  transition:opacity .6s var(--ease),transform .6s var(--ease-out);
}
.herald.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.herald::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:20px;
  padding:1px;
  background:linear-gradient(135deg,rgba(240,185,107,.5),transparent 50%,rgba(240,185,107,.3));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}
.herald b{
  display:block;
  font-family:var(--serif);
  font-size:clamp(24px,6vw,32px);
  font-weight:600;line-height:1.24;
  color:#f8f3e8;
  text-shadow:0 0 40px rgba(240,185,107,.7),0 2px 20px rgba(0,0,0,.8);
  animation:textGlow 2s ease-in-out infinite;
}
@keyframes textGlow{
  0%,100%{text-shadow:0 0 40px rgba(240,185,107,.7),0 2px 20px rgba(0,0,0,.8)}
  50%{text-shadow:0 0 60px rgba(255,210,120,.9),0 0 30px rgba(240,185,107,.5),0 2px 20px rgba(0,0,0,.8)}
}
.herald span{
  display:block;
  margin-top:12px;
  font-size:13px;
  color:rgba(244,241,234,.7);
  letter-spacing:.02em;
}

/* ══════════ TUỲ CHỈNH ══════════ */
.opt-row span em{
  display:block;margin-top:3px;font-size:10.5px;font-style:normal;line-height:1.4;
  color:var(--text-faint);max-width:16em;
}
.opt-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--line)}
.opt-row>span{font-size:14px;color:var(--text-dim);flex:none}
.opt-row .segbar{flex:1;max-width:230px}

/* ══════════ TOAST ══════════ */
.toasts{
  position:fixed;left:0;right:0;bottom:calc(var(--dock-h) + var(--safe-b) + 14px);
  z-index:70;display:flex;flex-direction:column;align-items:center;gap:7px;pointer-events:none;
}
.toast{
  padding:9px 17px;border-radius:100px;font-size:13px;
  background:rgba(12,16,23,.92);border:1px solid var(--line);color:#f4f1ea;
  backdrop-filter:blur(12px);animation:toastIn .4s var(--ease-out);max-width:88vw;text-align:center;
}
.toast.out{animation:toastOut .35s var(--ease) forwards}
@keyframes toastIn{from{opacity:0;transform:translateY(12px) scale(.95)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(-6px)}}

/* ══════════ ẨN UI KHI CẦN ══════════ */
body.zen .topbar{opacity:0;transform:translateY(-14px);pointer-events:none}
body.zen .dock{transform:translateY(130%);opacity:0;pointer-events:none}

/* ══════════ MÀN LỚN ══════════ */
@media (min-width:760px){
  .topbar{padding-left:20px;padding-right:20px}
  .counters{max-width:400px;margin:0 auto}
  .dock{max-width:520px;margin:0 auto;left:0;right:0}
  .sheet-panel{max-width:520px;margin:0 auto;border-radius:var(--r-lg) var(--r-lg) 0 0}
  .spaces-scroll{max-width:560px;margin:0 auto;width:100%}
  .tray-rail{justify-content:flex-start;flex-wrap:nowrap}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.12s !important}
}