* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  color-scheme: light;
  /* Chiều cao thật của .header, gồm cả vùng đồng hồ/wifi của iPhone.
     Mọi back bar dính bên dưới header đều lấy top từ đây — sửa một chỗ
     là toàn app khớp theo, không phải đi sửa từng thanh. */
  --gv-header-h: calc(58px + env(safe-area-inset-top, 0px));
  --gv-route-h: 58px;
  /* Nhịp chuyển cảnh dùng CHUNG cho route transition, popup fade-zoom và các
     màn phủ. Sửa hai dòng này là toàn app đổi theo, không còn .2s/.22s/.25s
     lệch nhau mỗi nơi một kiểu. */
  --gv-motion: .24s;
  --gv-ease: cubic-bezier(.2, .8, .2, 1);
  --gv-slide: 22px;
  --gv-review-head-h: calc(var(--gv-route-h) + 4px + env(safe-area-inset-top, 0px));
  --gv-bg: #F6F7FB;
  --gv-surface: #FFFFFF;
  --gv-raised: #F0F2F8;
  --gv-text: #182033;
  --gv-muted: #667085;
  --gv-faint: #98A2B3;
  --gv-border: #E2E6EE;
  --gv-primary: #4F5FD7;
  --gv-primary-strong: #3F4DBB;
  --gv-primary-soft: #E9EDFF;
  --gv-primary-ink: #3544AF;
  --gv-gold: #F2BF4F;
  --gv-gold-strong: #C78B16;
  --gv-gold-soft: #FFF5D6;
  --gv-success: #279765;
  --gv-success-soft: #E8F6EF;
  --gv-danger: #D95850;
  --gv-danger-soft: #FDECEA;
  --gv-shadow: 0 4px 18px rgba(40, 52, 98, .08);  --gv-bar-glass: rgba(246,247,251,.78);
  --gv-bar-border: rgba(210,217,229,.72);
}
html[data-theme="dark"] {
  color-scheme: dark;
  --gv-bg: #0E1420;
  --gv-surface: #182231;
  --gv-raised: #202B3B;
  --gv-text: #F2F5FA;
  --gv-muted: #AAB5C5;
  --gv-faint: #77859A;
  --gv-border: #303B4C;
  --gv-primary: #7388F3;
  --gv-primary-strong: #91A2FF;
  --gv-primary-soft: #28345C;
  --gv-primary-ink: #B9C4FF;
  --gv-gold: #F0C45C;
  --gv-gold-strong: #FFD878;
  --gv-gold-soft: #3A321D;
  --gv-success: #55C88D;
  --gv-success-soft: #17382B;
  --gv-danger: #FF8278;
  --gv-danger-soft: #432421;
  --gv-shadow: 0 5px 20px rgba(0, 0, 0, .22);
  --gv-bar-glass: rgba(14,20,32,.78);
  --gv-bar-border: rgba(58,70,90,.74);
}
/* Trang tiếp tục cuộn tự nhiên ở document để Safari iPhone tự thu thanh địa
   chỉ. Header/back bar dùng fixed theo viewport và phần nội dung được bù đúng
   chiều cao; .main không trở thành một vùng cuộn riêng. */
/* Chặn kéo-để-tải-lại trang (pull-to-refresh) nhưng VẪN giữ hiệu ứng nảy
   (rubber-band) của nội dung khi vuốt quá đà. */
html { overscroll-behavior-y: contain; }
body {
  font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--gv-bg);
  color: var(--gv-text);
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overscroll-behavior-y: contain;
  /* Cảm giác app thật: không cho double-tap phóng to */
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
}
button,
input,
textarea,
select { font-family: inherit; }
/* Thanh trên cùng cố định ở mọi tab. padding-top = safe-area nên nội dung chữ
   luôn nằm dưới đồng hồ/wifi của iPhone, không bao giờ bị che. */
.header {
  background: #2c3e7a;
  color: white;
  padding: env(safe-area-inset-top, 0px) 16px 0;
  height: var(--gv-header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  z-index: 60;
}
.header-logo { font-size: 17px; font-weight: 700; color: #fff; display:flex;gap:8px;align-items:center; }
.header-logo span{color:#FFD700;font-size:23px;font-weight:400;line-height:1}
/* .main không tạo vùng cuộn riêng; document phải tiếp tục là scroll root để
   Safari có thể thu/mở thanh địa chỉ tự nhiên. */
/* +safe-area: trên iPhone có thanh home indicator, 70px không đủ để phần tử
   cuối trang (ví dụ nút "Bật nhắc ôn đúng lúc") thoát khỏi bottom-nav. */
.main {
  flex: 1;
  padding-top: var(--gv-header-h);
  padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
}
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  background: white;
  border-top: 1px solid #e0e0e0;
  display: flex;
  justify-content: space-around;
  padding: 8px 0;
  z-index: 100;
}
.nav-btn {
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  color: #999;
  cursor: pointer;
  padding: 4px 16px;
}
.nav-btn.active { color: #2c3e7a; }
.nav-btn .nav-icon { font-size: 22px; transition: transform 0.2s; }
.nav-btn.active .nav-icon { transform: scale(1.15); }

/* REVIEW */
.review-home,.review-session,.review-done{padding:28px 18px;text-align:center}
.review-done h1{font-size:23px;color:#1f2d55;margin-bottom:9px}
.review-done p{font-size:14px;line-height:1.55;color:#697386;margin:0 auto 22px;max-width:330px}
.review-start,.review-check,.review-next,.review-done button{border:0;border-radius:12px;background:#2c3e7a;color:#fff;font:600 15px inherit;padding:13px;cursor:pointer}
.review-auth-msg{color:#c0392b;font-size:13px;margin:0 0 12px;white-space:pre-line}
.review-hero{background:linear-gradient(135deg,#2c3e7a,#4763ae);padding:24px 20px;border-radius:18px;color:#fff;text-align:left}.review-hero span{font-size:11px;font-weight:800;letter-spacing:.12em;color:#ffd700}.review-hero h1{font-size:29px;margin:8px 0 4px}.review-hero p{font-size:13px;opacity:.85}
.review-start{display:block;width:100%;margin:16px 0;background:#27ae60;border-radius:999px}.review-empty{background:#fff;border-radius:15px;padding:28px 15px;margin:16px 0;color:#556070;line-height:1.6}.review-empty small{color:#929baa}.review-push{width:100%;border:0;background:#fff;border-radius:20px;padding:14px 15px;display:grid;grid-template-columns:43px 1fr 20px;gap:12px;align-items:center;text-align:left;box-shadow:0 4px 18px rgba(31,45,85,.07);color:#1f2d55;font:inherit;cursor:pointer}.review-push-icon{width:43px;height:43px;border-radius:14px;display:grid;place-items:center;background:#eaf0ff;color:#2c3e7a}.review-push-icon svg{width:21px;height:21px}.review-push span:nth-child(2){display:grid;gap:3px}.review-push b{font-size:15px}.review-push small{font-size:12px;color:#7d8898}.review-push i{font-style:normal;color:#9ca9bc;font-size:25px}
.review-session{padding-top:22px}.review-count{font-size:12px;font-weight:700;color:#7b8798;margin-bottom:34px}.review-prompt{font-size:14px;color:#788496;margin-bottom:18px}.review-sentence{background:#fff;border-radius:16px;padding:22px 18px;font-size:19px;line-height:1.65;text-align:left;color:#273142;margin-bottom:20px}.review-blank{color:#2c3e7a;letter-spacing:.08em}.review-options{display:grid;gap:11px}.review-option{border:0;background:#fff;border-radius:18px;padding:16px 17px;color:#273142;font:600 15px/1.35 inherit;cursor:pointer;text-align:left;box-shadow:0 3px 14px rgba(31,45,85,.075);transition:transform .16s ease,box-shadow .16s ease,background .16s ease}.review-option:active{transform:scale(.98)}.review-option.selected{background:#eef2ff;color:#24376e;box-shadow:0 0 0 2px rgba(44,62,122,.18),0 5px 16px rgba(31,45,85,.1)}.review-option:disabled,.review-check:disabled,.review-chunk:disabled{opacity:.55}.review-word{font-size:32px;font-weight:800;color:#2c3e7a;margin:8px 0 25px}.review-meaning{background:#fff;border-radius:16px;padding:18px;margin:8px 0 20px;color:#273142;font-size:19px;line-height:1.5;font-weight:700}.review-audio{border:0;border-radius:12px;background:#eaf0ff;color:#2c3e7a;padding:10px 13px;margin:-3px 0 21px;display:inline-flex;align-items:center;gap:7px;font:700 14px inherit;cursor:pointer}.review-audio .icon-speak{width:18px;height:18px}.review-audio .icon-stop{display:none!important}.review-letters{display:flex;justify-content:center;gap:7px;flex-wrap:wrap;margin:8px 0 26px}.review-letter{width:30px;height:40px;border-bottom:2px solid #b7c3d7;display:flex;align-items:center;justify-content:center;font-size:23px;font-weight:800;color:#2c3e7a}.review-letter-input{border:0;border-bottom:2px solid #b7c3d7;background:transparent;text-align:center;outline:0;color:#1f2d55;font:800 23px inherit}.review-letter-input:focus{border-bottom-color:#2c3e7a;border-bottom-width:3px}.review-letter.gap{border:0;width:10px}.review-full-input{display:block;width:100%;max-width:310px;box-sizing:border-box;margin:5px auto 16px;border:0;border-bottom:2.5px solid #2c3e7a;background:transparent;padding:10px 4px;text-align:center;color:#1f2d55;font:800 23px inherit;outline:0}.review-full-input::placeholder{font-size:14px;font-weight:400;color:#a9b2c1}.review-check{width:100%;max-width:300px;margin-top:14px}.review-scramble-answer{min-height:70px;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:7px;padding:12px;margin:0 0 14px;border:1px dashed #b8c5dc;border-radius:14px;background:#fff;color:#929baa;font-size:13px}.review-scramble-answer span{background:#eaf0ff;color:#2c3e7a;padding:7px 9px;border-radius:9px;font-weight:700}.review-chosen-chunk{border:0;background:#eaf0ff;color:#2c3e7a;padding:7px 9px;border-radius:9px;font:700 13px inherit;cursor:pointer}.review-scramble-bank{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 0 6px}.review-chunk{border:1px solid #d5dfef;background:#fff;color:#273142;border-radius:10px;padding:9px 11px;font:600 14px inherit;cursor:pointer}.review-result{margin-top:22px;padding:13px;border-radius:12px;font-size:15px}.review-result.right{background:#eafaf1;color:#1e7e45}.review-result.wrong{background:#fff0ed;color:#bf4a32}.review-answer-value{display:block;margin-top:5px;font-size:16px;font-weight:800;line-height:1.5}.review-answer-example{margin-top:9px;padding-top:9px;border-top:1px solid rgba(31,45,85,.12);text-align:left;line-height:1.55;color:#344057}.review-answer-target{color:#2c3e7a;text-decoration:underline;text-underline-offset:3px}.review-next{margin-top:12px;width:100%}.review-done{padding-top:82px}.review-done>div{font-size:58px;margin-bottom:12px}

/* REVIEW — dashboard, notebook and iOS-like session */
.review-option.right-answer{background:#eafaf1!important;border-color:#27ae60!important;color:#1e7e45!important;opacity:1!important}.review-option.wrong-answer{background:#fff0ed!important;border-color:#d64541!important;color:#bf3d2e!important;opacity:1!important}.review-example-feedback{margin-top:20px;padding:14px;border-radius:14px;background:#fff;color:#344057;line-height:1.55;text-align:left;animation:reviewResultIn var(--gv-motion) var(--gv-ease) both}.review-example-feedback small{display:block;margin-top:7px;color:#7b8798;font-size:13px}
.review-type-status{margin-top:20px;font-size:15px;font-weight:800;text-align:center;animation:reviewResultIn var(--gv-motion) var(--gv-ease) both}.review-type-status.right{color:#1e7e45}.review-type-status.wrong{color:#bf3d2e}
.review-feedback-word{margin:0 0 9px;padding-bottom:9px;border-bottom:1px solid #edf0f4;display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;color:#1f2d55;font-size:15px}.review-feedback-label{min-width:0}.review-feedback-word b{font-size:17px}.review-feedback-label>span{margin-left:7px;color:#7b8798;font-size:13px}.review-feedback-audio{flex:0 0 30px;color:var(--gv-primary-ink)}
.review-home,.review-notebook-page,.review-session{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.review-home{padding:18px 16px;text-align:left}.review-notebook-card{width:100%;border:0;background:#fff;border-radius:20px;padding:17px;display:flex;align-items:center;gap:13px;text-align:left;box-shadow:0 4px 18px rgba(31,45,85,.07);cursor:pointer;color:#1f2d55}.review-notebook-icon{width:43px;height:43px;border-radius:14px;background:#eaf0ff;color:#2c3e7a;display:grid;place-items:center;font-size:24px}.review-notebook-card span:nth-child(2){display:grid;gap:3px;flex:1}.review-notebook-card b{font-size:17px}.review-notebook-card small{font-size:13px;color:#7d8898}.review-notebook-card i{font-style:normal;font-size:28px;color:#9ca9bc}.review-chart-card{margin:15px 0 18px;background:#fff;border-radius:20px;padding:17px;box-shadow:0 4px 18px rgba(31,45,85,.07)}.review-chart-title{display:flex;justify-content:space-between;align-items:baseline;color:#1f2d55;font-weight:800}.review-chart-title small{font-size:11px;color:#8591a1;font-weight:600}.review-chart{height:156px;margin-top:16px;display:flex;align-items:end;justify-content:space-around;gap:7px}.review-chart-col{height:100%;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:end;gap:6px;min-width:0}.review-chart-col>b{font-size:13px;color:#2c3e7a}.review-chart-track{height:105px;width:100%;max-width:31px;border-radius:9px;background:#eef1f6;display:flex;align-items:end;overflow:hidden}.review-chart-track i{width:100%;border-radius:9px;background:linear-gradient(#5974c5,#2c3e7a);transition:height .35s ease}.review-chart-col span{font-size:10px;white-space:nowrap;color:#7c8797}.review-start{margin:0 0 10px;box-shadow:0 4px 12px rgba(39,174,96,.22)}
.review-notebook-page{padding-bottom:25px}.review-topbar,.review-session-head{z-index:20}.review-session-head{top:0}.review-topbar{height:58px;padding:7px 13px;display:grid;grid-template-columns:42px 1fr 42px;align-items:center;text-align:center;border-bottom:1px solid rgba(211,219,230,.75);color:#1f2d55}.review-back{width:38px;height:38px;border:0;background:#fff;border-radius:12px;font:400 34px/30px inherit;color:#2c3e7a;cursor:pointer}.review-topbar b{font-size:17px}.review-level-list{padding:14px 13px;display:grid;gap:10px}.review-level-card{border:0;background:#fff;border-radius:17px;padding:17px;display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;text-align:left;box-shadow:0 3px 14px rgba(31,45,85,.06);color:#1f2d55;cursor:pointer}.review-level-card span{font-size:17px;font-weight:800}.review-level-card b{font-size:19px}.review-level-card i{font-style:normal;color:#8591a1;font-size:13px}.review-word-list{background:#fff;margin:14px 13px;border-radius:18px;overflow:hidden;box-shadow:0 3px 14px rgba(31,45,85,.06)}.review-word-row{min-height:70px;padding:10px 12px;display:grid;grid-template-columns:38px 1fr 34px;align-items:center;gap:8px;border-bottom:1px solid #edf0f4}.review-word-row:last-child{border-bottom:0}.review-word-row b{display:inline-block;color:#1f2d55;font-size:16px}.review-word-row small{margin-left:8px;color:#8c97a7;font-size:12px}.review-word-row p{margin-top:3px;color:#657184;font-size:13px}.review-row-delete{border:0;background:#fff0ed;color:#c34c39;width:30px;height:30px;border-radius:10px;font-size:23px;line-height:1;cursor:pointer}
/* .review-word-list đã là thẻ nền/bo góc/bóng. Trạng thái rỗng chỉ là nội
   dung của thẻ đó, không dựng thêm một thẻ .review-empty lồng bên trong. */
.review-word-list>.review-empty {
  margin: 0;
  padding: 28px 15px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.review-session{position:fixed;inset:0;z-index:9998;width:100%;max-width:480px;height:100vh;height:100dvh;margin:0 auto;padding:0;text-align:center;background:#f5f5f5;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:none}.review-session-head{border-bottom:1px solid #dfe5ed}.review-session-bar{height:56px;padding:max(env(safe-area-inset-top,0px),7px) 13px 7px;display:grid;grid-template-columns:42px 1fr 42px;align-items:center;color:#1f2d55}.review-session-bar button{width:38px;height:38px;border:0;background:#fff;border-radius:12px;color:#2c3e7a;font:400 30px/32px inherit;cursor:pointer}.review-session-bar b{font-size:17px}.review-session-bar span{font-size:11px;color:#7d8898}.review-progress{height:4px;background:#e4e9f1;overflow:hidden}.review-progress i{display:block;height:100%;background:#27ae60;border-radius:0 3px 3px 0;transition:width .3s ease}.review-question-stage{padding:23px 18px max(env(safe-area-inset-bottom,35px),35px);animation:reviewQuestionIn var(--gv-motion) var(--gv-ease) both}.review-question-stage.review-question-leave{animation:reviewQuestionOut var(--gv-motion) var(--gv-ease) both}.review-count{margin-bottom:25px}.review-result{animation:reviewResultIn var(--gv-motion) var(--gv-ease) both}.review-next{display:block;margin:12px auto 0;width:100%;max-width:300px;border-radius:999px;background:#27ae60;box-shadow:0 4px 12px rgba(39,174,96,.22)}
@keyframes reviewQuestionIn{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}@keyframes reviewQuestionOut{to{opacity:0;transform:translateX(-28px)}}@keyframes reviewResultIn{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:none}}

.review-start,.review-check,.review-next,.review-push,.review-audio,.review-done button{border-radius:999px}.review-done{padding-top:96px}.review-done h1{font-size:25px}.review-chart-col:nth-child(1) .review-chart-track i{background:linear-gradient(#72d4c1,#20a486)}.review-chart-col:nth-child(2) .review-chart-track i{background:linear-gradient(#78a9f7,#3973d2)}.review-chart-col:nth-child(3) .review-chart-track i{background:linear-gradient(#b69df6,#7558c9)}.review-chart-col:nth-child(4) .review-chart-track i{background:linear-gradient(#f4b66c,#df8129)}.review-chart-col:nth-child(5) .review-chart-track i{background:linear-gradient(#ef8aa1,#c95370)}

/* REVIEW — cấp độ Sổ tay, streak và phản hồi chạm thống nhất */
.review-check{background:#e3e7ed!important;color:#4a5565!important;box-shadow:0 2px 8px rgba(65,78,95,.08);transition:transform .16s ease,background .16s ease,box-shadow .16s ease}.review-check:disabled{background:#eef1f5!important;color:#a4adba!important;opacity:1}.review-check:active:not(:disabled),.review-start:active,.review-next:active{transform:scale(.975);box-shadow:0 1px 5px rgba(31,45,85,.15)}.review-start,.review-next{transition:transform .16s ease,box-shadow .16s ease,filter .16s ease}.review-start:active,.review-next:active{filter:brightness(.94)}
.review-notebook-card{position:relative;isolation:isolate;overflow:hidden;min-height:92px}.review-notebook-card>*{position:relative;z-index:2}.review-notebook-card span.review-notebook-copy{display:grid;gap:3px;flex:1;min-width:0}.review-notebook-copy em{font-style:normal;font-size:11px;line-height:1.35;letter-spacing:-.01em;white-space:nowrap;color:#7d8898}.review-notebook-card span.review-notebook-icon{display:grid;place-items:center;flex:0 0 43px}.review-notebook-icon svg{width:23px;height:23px}
.notebook-tier-rookie{background:#eef1f5;color:#536073}.notebook-tier-rookie .review-notebook-icon{background:#e1e6ec;color:#8a96a6}.notebook-tier-rookie small,.notebook-tier-rookie .review-notebook-copy em,.notebook-tier-rookie i{color:#8792a1}
.notebook-tier-diligent{background:#fff;border:1px solid #e4e8ef}.notebook-tier-diligent .review-notebook-icon{background:#f0f3f7;color:#58677c}
.notebook-tier-bookworm{background:linear-gradient(145deg,#fff6d9,#feeba2);color:#332b1a;border:1px solid rgba(232,184,45,.3);box-shadow:0 7px 22px rgba(210,161,28,.16)}.notebook-tier-bookworm .review-notebook-icon{background:rgba(255,255,255,.52);color:#6a4a05;border:1px solid rgba(221,172,32,.22)}.notebook-tier-bookworm small,.notebook-tier-bookworm .review-notebook-copy em,.notebook-tier-bookworm i{color:#715a27}.notebook-tier-bookworm::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(112deg,transparent 30%,rgba(255,255,255,.72) 48%,transparent 66%);transform:translateX(-120%) skewX(-10deg);animation:notebookShine 13s cubic-bezier(.4,0,.2,1) infinite}
.notebook-tier-master{background:linear-gradient(145deg,#d94242,#a61c28);color:#fff;box-shadow:0 8px 25px rgba(183,39,47,.27)}.notebook-tier-master small,.notebook-tier-master .review-notebook-copy em,.notebook-tier-master i{color:#ffe0df}.notebook-tier-master .review-notebook-icon{position:relative;overflow:hidden;background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.24)}.notebook-tier-master .review-notebook-icon::after{content:'';position:absolute;inset:-50% auto -50% -42%;width:20px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.82),transparent);transform:rotate(12deg);animation:notebookIconShine 5.6s cubic-bezier(.4,0,.2,1) infinite}
.notebook-tier-scholar{background:linear-gradient(145deg,#278ce6,#174eab);color:#fff;box-shadow:0 8px 25px rgba(31,112,211,.3)}.notebook-tier-scholar small,.notebook-tier-scholar .review-notebook-copy em,.notebook-tier-scholar i{color:#d7ecff}.notebook-tier-scholar .review-notebook-icon{position:relative;background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.23)}
.notebook-tier-legendary,.notebook-tier-legendary-lit{background:linear-gradient(145deg,#9a6cff,#5b27b8);color:#fff;box-shadow:0 8px 27px rgba(112,70,213,.34)}.notebook-tier-legendary small,.notebook-tier-legendary-lit small,.notebook-tier-legendary .review-notebook-copy em,.notebook-tier-legendary-lit .review-notebook-copy em,.notebook-tier-legendary i,.notebook-tier-legendary-lit i{color:#eadfff}.notebook-tier-legendary .review-notebook-icon,.notebook-tier-legendary-lit .review-notebook-icon{background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.24)}.notebook-tier-legendary-lit .review-notebook-icon{background:rgba(255,255,255,.3);box-shadow:0 0 8px rgba(255,255,255,.72),0 0 19px rgba(223,201,255,.75)}
.notebook-tier-legendary-lit{outline:1px solid rgba(238,225,255,.76);outline-offset:2px}
@keyframes notebookShine{0%,68%{transform:translateX(-120%) skewX(-10deg)}84%,100%{transform:translateX(150%) skewX(-10deg)}}@keyframes notebookIconShine{0%,8%{transform:translateX(0) rotate(12deg)}55%,100%{transform:translateX(118px) rotate(12deg)}}

/* Tinh chỉnh vòng sáng: đốm bám viền và để lại dải ánh sáng mảnh, mờ dần. */

/* Các nút hành động của phiên ôn tập */
.review-check{background:#2c3e7a!important;color:#fff!important;box-shadow:0 4px 12px rgba(44,62,122,.22)}.review-check:disabled{background:#96a3c6!important;color:#f7f8ff!important;opacity:.56}.review-check:active:not(:disabled),.review-start:active,.review-next:active{transform:scale(.972);box-shadow:0 1px 5px rgba(31,45,85,.2)}.review-next{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#27ae60!important;color:#fff!important;box-shadow:0 4px 12px rgba(39,174,96,.22)}.review-next svg{width:18px;height:18px}

/* Streak ở thanh tiêu đề xanh toàn app, không nằm trong màn câu hỏi. */
.header-right{display:flex;align-items:center;justify-content:flex-end;min-width:44px}.header .review-header-streak{display:inline-flex;align-items:center;justify-content:center;gap:3px;min-width:39px;height:34px;padding:0 7px;border:0;border-radius:11px;background:rgba(255,255,255,.12);color:rgba(255,255,255,.6);font:700 13px inherit;cursor:pointer;transition:transform .16s ease,background .16s ease}.header .review-header-streak svg{width:18px;height:18px}.header .review-header-streak b{font-size:13px;line-height:1}.header .review-header-streak.warm{background:rgba(255,205,74,.2);color:#ffd469}.header .review-header-streak.hot{background:rgba(255,127,89,.22);color:#ffb26c}.header .review-header-streak:active{transform:scale(.94)}

/* Trang chi tiết streak */
.review-streak-hero.legend{background:linear-gradient(145deg,#ff7868,#dd342d);color:#fff;box-shadow:0 0 0 7px rgba(246,84,62,.1),0 9px 29px rgba(223,65,49,.42)}.review-streak-hero.legend span{filter:drop-shadow(0 0 5px rgba(255,246,193,.96)) drop-shadow(0 0 12px rgba(255,193,90,.7))}.review-streak-message.keep-fire{font-weight:800;color:#d94635;letter-spacing:.01em}.review-streak-goal-track{display:grid;grid-template-columns:31px 1fr 36px;align-items:center;gap:9px;margin-top:12px}.review-streak-goal-track>i{display:block;height:7px;margin:0;overflow:hidden;border-radius:99px;background:#edf0f4}.review-goal-calendar{width:29px;height:29px;display:grid;place-items:center;border-radius:9px;background:#f1f4f7;color:#778497}.review-goal-calendar svg{width:17px;height:17px}.review-goal-fire{position:relative;width:34px;height:34px;display:grid;place-items:center;color:#aeb7c3}.review-goal-fire svg{position:absolute;width:31px;height:31px}.review-goal-fire b{position:relative;z-index:1;font-size:11px;color:#687586}.review-goal-fire.complete{color:#ed6039;filter:drop-shadow(0 0 5px rgba(239,125,49,.45))}.review-goal-fire.complete b{color:#fff}.review-goal-fire.complete svg{filter:drop-shadow(0 0 3px rgba(255,211,83,.9))}.review-calendar-card h2{margin-bottom:14px}.review-calendar-enter-left{animation:reviewCalendarInLeft var(--gv-motion) var(--gv-ease) both}.review-calendar-enter-right{animation:reviewCalendarInRight var(--gv-motion) var(--gv-ease) both}@keyframes reviewCalendarInLeft{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}@keyframes reviewCalendarInRight{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.review-level-card.level-1{background:linear-gradient(135deg,#72d4c1,#20a486);color:#fff}.review-level-card.level-2{background:linear-gradient(135deg,#78a9f7,#3973d2);color:#fff}.review-level-card.level-3{background:linear-gradient(135deg,#b69df6,#7558c9);color:#fff}.review-level-card.level-4{background:linear-gradient(135deg,#f4b66c,#df8129);color:#fff}.review-level-card.level-5{background:linear-gradient(135deg,#ef8aa1,#c95370);color:#fff}.review-level-card[class*="level-"] i{color:rgba(255,255,255,.82)}
.review-session-bar .review-streak-button{display:inline-flex;align-items:center;justify-content:center;gap:3px;width:auto;min-width:38px;padding:0 7px;height:38px;border-radius:12px;background:#fff;color:#bbc3ce;font:inherit;justify-self:end}.review-streak-button svg{width:19px;height:19px}.review-session-bar .review-streak-button b{font-size:13px;line-height:1;color:currentColor}.review-session-bar .review-streak-button.warm{color:#e6a51e;background:#fff9e7}.review-session-bar .review-streak-button.hot{color:#dc4d35;background:#fff0ed}.review-streak-button:active{transform:scale(.94)}
.review-streak-page{min-height:calc(100vh - 70px);padding-bottom:28px;background:#f5f5f5;user-select:none;-webkit-user-select:none}.review-streak-head{z-index:5;height:58px;padding:7px 13px;display:grid;grid-template-columns:42px 1fr 42px;align-items:center;text-align:center;border-bottom:1px solid rgba(211,219,230,.75);color:#1f2d55}.review-streak-head button{width:38px;height:38px;border:0;border-radius:12px;background:#fff;color:#2c3e7a;font:400 30px/32px inherit;cursor:pointer}.review-streak-head b{font-size:17px}.review-streak-hero{margin:25px auto 10px;width:154px;height:154px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#eef1f5;color:#aeb7c3;box-shadow:inset 0 0 0 1px rgba(161,174,190,.12)}.review-streak-hero span{height:34px}.review-streak-hero svg{width:32px;height:32px}.review-streak-hero strong{font-size:48px;font-weight:300;letter-spacing:-2px;line-height:1}.review-streak-hero small{font-size:12px;font-weight:700;margin-top:4px}.review-streak-hero.warm{background:linear-gradient(145deg,#fff8d9,#fff0af);color:#d99b18;box-shadow:0 8px 24px rgba(218,165,38,.19)}.review-streak-hero.hot{background:linear-gradient(145deg,#fff0e7,#ffd2bc);color:#df5639;box-shadow:0 8px 24px rgba(218,85,53,.2)}.review-streak-message{margin:0 auto 22px;max-width:290px;text-align:center;font-size:14px;line-height:1.5;color:#657184}.review-streak-goal,.review-calendar-card{margin:0 16px 14px;padding:16px;background:#fff;border-radius:19px;box-shadow:0 3px 14px rgba(31,45,85,.055)}.review-streak-goal>div{display:flex;justify-content:space-between;gap:12px;color:#1f2d55;font-size:14px}.review-streak-goal span{color:#d38a18;font-weight:800}.review-streak-goal i{display:block;height:7px;margin-top:12px;overflow:hidden;border-radius:99px;background:#edf0f4}.review-streak-goal em{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#f2bc48,#e48727)}.review-calendar-card h2{font-size:15px;color:#1f2d55;margin-bottom:13px}.review-calendar-head{display:grid;grid-template-columns:35px 1fr 35px;align-items:center;text-align:center;margin-bottom:13px}.review-calendar-head b{font-size:14px;text-transform:capitalize;color:#3b485c}.review-calendar-head button{width:31px;height:31px;border:0;border-radius:10px;background:#f0f3f7;color:#2c3e7a;font:400 27px/22px inherit;cursor:pointer}.review-calendar-head button:disabled{opacity:.35}.review-calendar-weekdays,.review-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);text-align:center}.review-calendar-weekdays{margin-bottom:6px;color:#9aa4b2;font-size:10px;font-weight:800}.review-calendar-grid{gap:5px}.review-calendar-day{height:29px;border-radius:9px;display:grid;place-items:center;font-size:12px;color:#566376}.review-calendar-day.outside{color:transparent}.review-calendar-day.learned{background:#f29a36;color:#fff;font-weight:800;box-shadow:0 2px 6px rgba(230,132,32,.23)}.review-calendar-day.today:not(.learned){box-shadow:inset 0 0 0 1px #d5dde8}.review-calendar-day.today{font-weight:800}

/* Hai nút thay nhau giữ nguyên đúng kích thước và vị trí. */
.review-check,.review-next{box-sizing:border-box;min-height:48px;margin-top:14px!important}.review-check{display:inline-flex;align-items:center;justify-content:center}.review-next{display:inline-flex;align-items:center;justify-content:center}

/* Học bá — giữ nguyên cơ chế blue.html: ba vệt đồng tâm và đúng một đốm. */
.review-notebook-icon>svg.review-scholar-edge{position:absolute!important;inset:0!important;z-index:1!important;width:43px!important;height:43px!important;overflow:visible;pointer-events:none}.review-scholar-glow,.review-scholar-dot{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round;animation-duration:8s;animation-timing-function:linear;animation-iteration-count:infinite}.review-scholar-glow.soft{stroke:rgba(151,215,255,.28);stroke-width:1.2;stroke-dasharray:16 84;filter:drop-shadow(0 0 3px rgba(112,196,255,.55));animation-name:reviewScholarSoft}.review-scholar-glow.mid{stroke:rgba(203,239,255,.58);stroke-width:1.15;stroke-dasharray:10 90;filter:drop-shadow(0 0 2px rgba(183,230,255,.65));animation-name:reviewScholarMid}.review-scholar-glow.core{stroke:rgba(247,253,255,.95);stroke-width:1;stroke-dasharray:4 96;filter:drop-shadow(0 0 1.5px rgba(235,250,255,.8));animation-name:reviewScholarCore}.review-scholar-dot{stroke:#f4fcff;stroke-width:2.6;stroke-dasharray:.2 99.8;filter:drop-shadow(0 0 2px rgba(255,255,255,.98)) drop-shadow(0 0 6px rgba(173,224,255,.9)) drop-shadow(0 0 11px rgba(100,181,246,.48));animation-name:reviewScholarDot}.notebook-tier-scholar .review-notebook-icon::before,.notebook-tier-scholar .review-notebook-icon::after{content:none!important}@keyframes reviewScholarSoft{from{stroke-dashoffset:8}to{stroke-dashoffset:-92}}@keyframes reviewScholarMid{from{stroke-dashoffset:5}to{stroke-dashoffset:-95}}@keyframes reviewScholarCore{from{stroke-dashoffset:2}to{stroke-dashoffset:-98}}@keyframes reviewScholarDot{from{stroke-dashoffset:.1}to{stroke-dashoffset:-99.9}}

/* Huyền thoại — dùng đúng quỹ đạo theo kích thước thật của thẻ như violet.html. */
.review-notebook-card.notebook-tier-legendary,.review-notebook-card.notebook-tier-legendary-lit{overflow:visible}.review-notebook-card>svg.review-legend-edge{position:absolute!important;inset:0!important;z-index:1!important;width:100%!important;height:100%!important;overflow:visible;pointer-events:none}.review-legend-edge rect{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round;x:.5px;y:.5px;width:calc(100% - 1px);height:calc(100% - 1px);rx:19.5px}.review-legend-glow{stroke:rgba(250,245,255,var(--opacity));stroke-width:var(--edge-width);stroke-dasharray:var(--dash) var(--gap);animation:reviewLegendFlow 12s linear infinite}.review-legend-dot{stroke:#fff;stroke-width:2.5;stroke-dasharray:.2 99.8;filter:drop-shadow(0 0 2px rgba(255,255,255,.95)) drop-shadow(0 0 5px rgba(222,194,255,.62));animation:reviewLegendDot 12s linear infinite}@keyframes reviewLegendFlow{from{stroke-dashoffset:var(--start)}to{stroke-dashoffset:var(--end)}}@keyframes reviewLegendDot{from{stroke-dashoffset:.1}to{stroke-dashoffset:-99.9}}

/* Streak tối giản: chỉ còn thanh tiến trình nhỏ, nền xám và bo tròn. */
.review-streak-goal-title{display:block!important;text-align:left}.review-streak-goal-track{display:block!important;margin:12px auto 0!important;max-width:230px}.review-goal-progress{position:relative;display:grid!important;place-items:center;width:100%;height:18px;overflow:hidden;border-radius:999px!important;background:#e4e6ea!important;color:#485365!important}.review-goal-progress em{position:absolute;inset:0 auto 0 0;display:block;height:100%;margin:0!important;border-radius:999px!important;background:linear-gradient(90deg,#f4aaa3,#ed7770)!important}.review-goal-progress b{position:relative;z-index:1;color:#4c5563!important;font-size:11px!important;font-weight:800!important;line-height:1}.review-streak-hero.hot svg path:first-child,.review-streak-hero.legend svg path:first-child{fill:#e34a36;stroke:#cf3b2c}.review-streak-hero.hot svg path:last-child,.review-streak-hero.legend svg path:last-child{fill:#ffd34f;stroke:#edae22}.review-calendar-card{padding-bottom:22px}.review-calendar-grid{column-gap:5px;row-gap:11px}.review-calendar-day{width:32px;height:32px;justify-self:center;border-radius:9px}.review-calendar-day.learned{background:#f2a39d;color:#fff;box-shadow:0 2px 6px rgba(221,101,92,.2)}.review-calendar-day.outside{color:transparent!important;background:transparent!important;box-shadow:none!important}

/* Hai chỉ số streak nằm cùng hàng. */
.review-streak-stat-row{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(98px,.75fr);gap:10px;margin:0 16px 14px}.review-streak-stat-block{min-width:0;padding:14px;background:#fff;border-radius:19px;box-shadow:0 3px 14px rgba(31,45,85,.055);color:#1f2d55}.review-streak-stat-block>b,.review-calendar-card h2{display:block;font-size:16px;line-height:1.35}.review-streak-goal-block .review-streak-goal-track{width:100%;max-width:none;margin:12px 0 0!important}.review-streak-goal-block .review-goal-progress{height:17px;background:#e5e7eb!important}.review-streak-goal-block .review-goal-progress em{position:absolute;background:#f2bd3f!important}.review-streak-goal-block .review-goal-progress.has-progress em::after{content:'';position:absolute;top:0;right:0;width:3px;height:100%;background:#b98012}.review-streak-record-block{display:flex;flex-direction:column;justify-content:space-between;gap:8px}.review-streak-record-block>span{display:flex;align-items:baseline;gap:4px;color:#6b7585;font-size:11px;font-weight:700}.review-streak-record-block strong{color:#d58b16;font-size:31px;line-height:.95;letter-spacing:-1px}.review-calendar-day.learned{background:#e46f68!important;box-shadow:none!important}

.review-streak-record-block strong{color:#df5148;font-weight:500}

/* SEARCH BOX */
.search-box {
  background: #2c3e7a;
  padding: 12px 16px 0;
}
.search-input-wrap {
  display: flex;
  background: white;
  border-radius: 25px;
  overflow: hidden;
  align-items: center;
}
.search-input {
  flex: 1;
  border: none;
  outline: none;
  padding: 12px 16px;
  font-size: 16px;
  background: transparent;
}
.search-btn {
  background: none;
  border: none;
  width: 44px;
  height: 44px;
  padding: 11px;
  color: #2c3e7a;
  cursor: pointer;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
}
.search-btn svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.search-clear-btn {
  background: #fff;
  color: #2c3e7a;
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  font-size: 21px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  margin-right: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 1px 5px rgba(31,45,85,.12);
}
.search-clear-btn:active { background: #eaf0ff; transform: scale(.94); }
.lookup-empty-note {
  color: #8a93a3;
  font-size: 13px;
  text-align: center;
  padding: 36px 24px;
  line-height: 1.5;
}

/* MODE TOGGLE */
.mode-toggle {
  display: flex;
  justify-content: center;
  padding: 12px 0 14px;
}
.toggle-track {
  position: relative;
  display: flex;
  background: rgba(255,255,255,0.2);
  border-radius: 25px;
  padding: 3px;
  width: 220px;
  cursor: pointer;
}
.toggle-option {
  flex: 1;
  text-align: center;
  padding: 7px 0;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  position: relative;
  z-index: 2;
  transition: color 0.25s;
  user-select: none;
}
.toggle-option.active { color: #2c3e7a; }
.toggle-indicator {
  position: absolute;
  top: 3px;
  left: 3px;
  width: calc(50% - 3px);
  bottom: 3px;
  background: white;
  border-radius: 22px;
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
  z-index: 1;
}
.toggle-indicator.right { transform: translateX(100%); }

/* LESSONS */
.loading {
  text-align: center;
  padding: 40px 20px;
  color: #999;
  font-size: 15px;
  line-height: 1.8;
}
.section-title {
  padding: 14px 16px 8px;
  font-size: 13px;
  color: #888;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.back-inline-btn {
  background: none;
  border: none;
  color: #2c3e7a;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.collection-card {
  background: #27ae60;
  margin: 8px 12px;
  border-radius: 12px;
  padding: 16px;
  color: white;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 6px rgba(39,174,96,0.3);
}
.collection-name { font-size: 17px; font-weight: 700; }
.collection-meta { font-size: 12px; opacity: 0.85; margin-top: 4px; }
.collection-arrow { font-size: 24px; }
.topic-card {
  background: white;
  margin: 6px 12px;
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.topic-name { font-size: 15px; font-weight: 600; }
.topic-vi { font-size: 13px; color: #666; margin-top: 2px; }
.topic-count {
  background: #e8f0fe;
  color: #2c3e7a;
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 12px;
  white-space: nowrap;
}
.word-row {
  background: white;
  margin: 5px 12px;
  border-radius: 8px;
  padding: 12px 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.word-row-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 2px;
}
.word-en { font-size: 16px; font-weight: 700; color: #1a1a1a; }
.word-pos-tag {
  font-size: 11px;
  background: #e8f0fe;
  color: #2c3e7a;
  padding: 2px 7px;
  border-radius: 6px;
}
.word-vi { font-size: 13px; color: #555; margin-top: 3px; }
.word-ipa { font-size: 12px; color: #aaa; }

/* SUGGEST DROPDOWN */
.lookup-area { position: relative; }
.suggest-dropdown {
  display: none;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,0.2);
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 4px;
  z-index: 200;
}
.suggest-item {
  padding: 11px 16px;
  font-size: 15px;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
}
.suggest-item:last-child { border-bottom: none; }
.suggest-item:hover, .suggest-item:active { background: #f0f4ff; }

/* MISMATCH NOTICE */
.mismatch-notice {
  margin-top: 10px;
  text-align: center;
}
.mismatch-notice a {
  color: #2c3e7a;
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

/* TOP ZONE - fix chiều cao để nút toggle không nhảy */
.top-zone {
  min-height: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.translate-note {
  color: rgba(255,255,255,0.8);
  font-size: 13px;
  text-align: center;
  padding: 0 20px;
  line-height: 1.5;
  min-height: 48px;
  align-items: center;
  justify-content: center;
}

/* GOOGLE-TRANSLATE STYLE CARD */
.translate-panel { padding: 12px; }
.gt-card {
  background: white;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  overflow: hidden;
}
.gt-section {
  padding: 14px 16px 10px;
}
.gt-lang-label {
  font-size: 12px;
  font-weight: 600;
  color: #666;
  margin-bottom: 6px;
}
.gt-lang-to { color: #2c3e7a; }
.gt-textarea {
  width: 100%;
  border: none;
  outline: none;
  font-size: 17px;
  font-family: inherit;
  resize: none;
  min-height: 70px;
  overflow: hidden;
  line-height: 1.5;
  color: #1a1a1a;
  padding: 5px 40px 18px 0;
}
.gt-result {
  font-size: 17px;
  line-height: 1.5;
  color: #2c3e7a;
  min-height: 40px;
  padding: 4px 0;
}
.gt-actions {
  display: flex;
  gap: 22px;
  padding: 6px 0 2px;
}
.gt-icon-btn {
  background: none;
  border: none;
  color: #555;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.15s;
}
.gt-icon-btn:active { background: #f0f0f0; }
.gt-icon-btn.gt-blue { color: #2c3e7a; }
.gt-icon-btn.copied { color: #27ae60; }

/* NÚT GÓC Ô DỊCH: chỉ còn chức năng XÓA (X), chỉ hiện khi có chữ */
.gt-input-wrap { position: relative; }
.gt-corner-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 29px;
  height: 29px;
  background: #fff;
  border: none;
  color: #2c3e7a;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
  box-shadow: 0 1px 5px rgba(31,45,85,.12);
  transition: background .15s, color .15s, transform .12s;
}
.gt-corner-btn:active { background: #eaf0ff; color: #2c3e7a; transform:scale(.94); }

/* LỊCH SỬ 5 CÂU DỊCH GẦN NHẤT — mỗi mục nằm cố định dưới nút switch.
   Vuốt sang trái để lộ nút Xóa màu đỏ phía sau (kiểu Mail/Messages iPhone),
   nút Xóa phóng to mượt mà khi lộ ra dần theo thao tác vuốt. */
.gt-history-section { margin-top: 14px; }
.gt-history-title { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.75); padding: 0 4px 6px; }
.gt-history-list { background: white; border-radius: 14px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.08); }
.gt-history-row { position: relative; overflow: hidden; touch-action: pan-y; border-bottom: 1px solid #f0f0f0; }
.gt-history-row:last-child { border-bottom: none; }
.gt-history-actions { position: absolute; top: 0; right: 0; bottom: 0; width: 68px; display: flex; align-items: center; justify-content: center; background: #ff3b30; z-index: 1; }
.gt-history-delete { height: 100%; width: 100%; border: none; background: none; color: #fff; display: flex; align-items: center; justify-content: center; transform: scale(0.7); opacity: 0.7; cursor: pointer; }
.gt-history-content { position: relative; z-index: 2; background: white; padding: 10px 14px; cursor: pointer; }
.gt-history-tag { font-size: 10px; font-weight: 700; color: #2c3e7a; background: #e8f0fe; display: inline-block; padding: 1px 6px; border-radius: 4px; margin-bottom: 4px; }
.gt-history-src { font-size: 14px; color: #1a1a1a; line-height: 1.4; }
.gt-history-res { font-size: 12.5px; color: #888; line-height: 1.4; margin-top: 2px; }
/* DIVIDER + DỊCH NGAY */
.gt-divider {
  position: relative;
  border-top: 1.5px solid #cfe0f5;
  display: flex;
  justify-content: flex-end;
  padding: 0 16px;
}
.gt-translate-btn {
  position: relative;
  top: -18px;
  background: #a8c7fa;
  color: #1a3c7a;
  border: none;
  border-radius: 22px;
  padding: 9px 20px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.gt-translate-btn:active { background: #8eb5f7; }
.gt-arrow { font-size: 16px; }
.gt-result-section { padding-top: 0; margin-top: -8px; }

/* LANG SWITCH BOTTOM */
.gt-lang-switch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
}
.gt-lang-pill {
  background: white;
  border-radius: 20px;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  min-width: 110px;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);

}
.gt-swap-btn {
  background: none;
  border: none;
  color: #444;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
}
.gt-swap-btn:active { color: #2c3e7a; }

/* RESULT CARD (tra từ) */
.result-card {
  background: white;
  margin: 12px;
  border-radius: 14px;
  padding: 18px 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
.result-word-title {
  font-size: 28px;
  font-weight: 800;
  color: #1a1a1a;
  margin-bottom: 10px;
}
.ipa-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}
.speak-btn {
  background: #f0f4ff;
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.speak-btn:active { background: #d0d9ff; }
.ipa-text { font-size: 15px; color: #444; }
.meanings-container { margin-top: 14px; }
.meaning-divider {
  border: none;
  border-top: 1.5px solid #cfe0f5;
  margin: 14px -16px;
}
.meaning-block { padding: 2px 0; }
.meaning-text {
  font-size: 17px;
  font-weight: 600;
  color: #2c3e7a;
  margin-bottom: 8px;
  line-height: 1.5;
}
.pos-tag { color: #2c3e7a; font-size: 14px; }
.example-en {
  font-size: 14px;
  font-style: italic;
  color: #444;
  line-height: 1.6;
  margin-bottom: 3px;
}
.example-vi {
  font-size: 13px;
  color: #888;
  line-height: 1.5;
  margin-bottom: 8px;
}
.more-ex-btn {
  background: none;
  border: none;
  color: #2c3e7a;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  margin-bottom: 6px;
  display: block;
}
.extra-example {
  padding: 0;
  border-top: none;
}
.save-word-btn {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 10px;
  border: none;
  border-radius: 20px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

/* ===== PHIÊN ÂM US / UK ===== */
.ipa-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  margin-bottom: 10px;
}
.ipa-item {
  display: flex;
  align-items: center;
  gap: 7px;
}
.ipa-accent-label {
  font-size: 10px;
  font-weight: 700;
  color: #2c3e7a;
  background: #e8f0fe;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.4px;
  white-space: nowrap;
}
.ipa-text {
  font-size: 15px;
  color: #444;
}

/* Màn hẹp: 2 dòng US / UK xếp dọc cho dễ đọc */
@media (max-width: 380px) {
  .ipa-row-dual { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* Danh sách từ trong Bài học */
.word-ipa b {
  font-size: 10px;
  color: #2c3e7a;
  background: #e8f0fe;
  padding: 1px 5px;
  border-radius: 3px;
  margin-right: 3px;
}

.lemma-note {
  font-size: 13px;
  color: #7a8699;
  background: #f0f4ff;
  border-left: 3px solid #2c3e7a;
  padding: 6px 10px;
  border-radius: 0 6px 6px 0;
  margin: -2px 0 14px;
}

/* Phiên ôn tập toàn màn hình: cộng safe-area vào chiều cao thanh trên,
   không ép nội dung 38px vào một hàng chỉ cao 56px trên iPhone tai thỏ. */
.review-session-bar {
  height: auto;
  min-height: 56px;
}
.review-home>.review-start,
.review-action-row>.review-start {
  width: auto;
  min-width: 0;
  padding-left: 24px;
  padding-right: 24px;
  margin: 0 auto 10px;
}

/* PROFILE — minimalist iOS */
.bottom-nav .nav-btn {
  flex: 1;
  padding: 4px 7px;
}
.nav-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}
.header-logo svg {
  width: 23px;
  height: 23px;
}
.profile-bell {
  position: relative;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 12px;
  background: rgba(255,255,255,.14);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.profile-bell svg { width: 21px; height: 21px; }
.profile-bell b {
  position: absolute;
  right: -3px;
  top: -3px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 99px;
  background: #ef5750;
  color: #fff;
  font-size: 10px;
  line-height: 17px;
}
.profile-page,.profile-auth,.profile-settings-page,.profile-password-page {
  /* 100vh trên Safari iOS = chiều cao khi đã ẩn thanh công cụ. Khi người dùng
     kéo lên, toolbar ẩn đi, nội dung vừa khít và trang tự bật ngược lại che
     mất dòng credit. 100dvh bám đúng vùng nhìn thấy thật nên không bị bật. */
  min-height: calc(100vh - 128px);
  min-height: calc(100dvh - 128px);
  padding: 24px 16px 20px;
  display: flex;
  flex-direction: column;
}
.profile-identity {
  padding: 8px 0 25px;
  text-align: center;
}
.profile-avatar-control {
  position: relative;
  width: 104px;
  height: 104px;
  margin: 0 auto 15px;
  display: block;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #d7dee9,0 8px 24px rgba(31,45,85,.13);
  cursor: pointer;
}
/* Đang nén Canvas + tải lên (thường dưới 1 giây nhưng vẫn cần phản hồi để
   người dùng không bấm lại nhiều lần trong lúc chờ). */
.profile-avatar-control.is-busy { opacity: .55; pointer-events: none; }
.profile-avatar-img,.profile-avatar-fallback {
  /* img và span dự phòng giờ LUÔN cùng có mặt trong DOM (onerror mới ẩn/hiện
     qua display), không còn chỉ-một-trong-hai như trước. inset:0 khiến cả hai
     đè khít lên nhau thay vì xếp chồng theo flow bình thường (2 phần tử block
     nối tiếp nhau sẽ đẩy nhau xuống dưới, không che nhau).
     width/height:100% BẮT BUỘC phải có, không thể chỉ dựa vào inset:0: với
     <img> là replaced element, inset:0 một mình lẽ ra đã đủ để trình duyệt tự
     giãn theo spec, nhưng WebKit không tính đúng trường hợp này — nó lấy kích
     thước GỐC của ảnh (ở đây luôn là 256×256 vì pipeline nén luôn xuất đúng cỡ
     đó) thay vì giãn theo khung cha, khiến avatar tràn ra ngoài vòng tròn nhỏ
     hơn (104px ở hồ sơ, 39-45px ở hàng bảng xếp hạng). Từng bỏ dòng này đi vì
     tưởng trùng lặp với inset:0 — sai, đây là dòng THỰC SỰ quyết định kích
     thước, inset:0+margin:auto chỉ lo phần đè-khít/căn-giữa. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: auto;
  border-radius: 50%;
  object-fit: cover;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg,#5b74c6,#2c3e7a);
  color: #fff;
  font-size: 40px;
  font-weight: 800;
}
/* Fallback luôn hiện sẵn phía dưới. Ảnh thật trong lúc tải phải trong suốt;
   khi tải xong nó phủ lên chữ, còn 404 thì onerror ẩn img và chữ đã có sẵn
   không phải đổi từ nền trống sang fallback ở một khung hình muộn hơn. */
.profile-avatar-fallback { z-index: 0; }
.profile-avatar-img { z-index: 1; background: transparent; color: transparent; }
.profile-avatar-img[data-loaded="1"] + .profile-avatar-fallback { visibility:hidden; }
.profile-avatar-control>span:last-of-type {
  position: absolute;
  z-index: 2;
  right: -2px;
  bottom: 2px;
  width: 29px;
  height: 29px;
  border: 2px solid #f5f5f5;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  color: #2c3e7a;
  box-shadow: 0 2px 8px rgba(31,45,85,.18);
  font-size: 13px;
}
.profile-identity h1 {
  color: #1d2939;
  font-size: 23px;
  line-height: 1.25;
}
.profile-identity p {
  margin-top: 5px;
  color: #7a8594;
  font-size: 13px;
}
.profile-ios-group {
  margin: 8px 0;
  overflow: hidden;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 2px 14px rgba(31,45,85,.055);
}
.profile-setting-row {
  width: 100%;
  min-height: 58px;
  margin: 0;
  padding: 12px 15px;
  border: 0;
  border-bottom: 1px solid #edf0f4;
  border-radius: 0;
  background: transparent;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  color: #303c50;
  font: 500 14px inherit;
  text-align: left;
  cursor: pointer;
}
.profile-setting-row:last-child { border-bottom: 0; }
.profile-setting-row>span:first-child {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.profile-setting-row b { font-size: 15px; }
.profile-setting-row small { color: #8993a1; font-size: 11px; font-weight: 500; }
.profile-setting-row i { font-style: normal; font-size: 24px; color: #a0a9b6; }
.profile-setting-row.disabled { color: #aeb5bf; cursor: default; }
.profile-setting-row.disabled small,.profile-setting-row.disabled i { color: #bcc2ca; }
.profile-credit {
  margin: auto auto 0;
  padding-top: 30px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  color: #99a2af;
  font-size: 11px;
  text-align: center;
}
.profile-credit a { color: #66758a; }
.profile-auth {
  justify-content: flex-start;
  text-align: center;
}
.profile-auth .profile-credit {
  margin: 16px auto 0;
  padding-top: 0;
  padding-bottom: 0;
}
.profile-auth-mark {
  width: 68px;
  height: 68px;
  margin: 28px auto 15px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg,#4d65b5,#2c3e7a);
  color: #ffd700;
  font-size: 34px;
  font-weight: 900;
  box-shadow: 0 7px 20px rgba(44,62,122,.22);
}
.profile-auth h1 { color: #1f2d55; font-size: 24px; }
.profile-auth>p {
  max-width: 320px;
  margin: 8px auto 22px;
  color: #718095;
  font-size: 13px;
  line-height: 1.55;
}
.profile-auth>p b { color: #435168; }
.profile-auth-form {
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  display: grid;
  gap: 11px;
}
/* Google Identity Services tự vẽ nút/iframe; phần app chỉ căn khung. */
.profile-oauth-slot {
  width: 100%;
  max-width: 360px;
  min-height: 44px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}
.profile-auth-divider {
  width: 100%;
  max-width: 360px;
  margin: 16px auto;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #9aa4b2;
  font-size: 12px;
}
.profile-auth-divider::before,
.profile-auth-divider::after { content: ''; flex: 1; height: 1px; background: #e2e6ee; }
.profile-auth-form input {
  width: 100%;
  border: 1px solid #dbe1ea;
  /* Bo tròn dạng viên thuốc và cỡ chữ 16px giống hệt .search-input bên tab
     Từ điển, để ô nhập toàn app nhìn như một họ. */
  border-radius: 25px;
  background: #fff;
  padding: 15px 20px;
  color: #263247;
  /* Không dùng shorthand với `inherit`: WebKit bỏ cả khai báo đó và trả chữ
     nhập về cỡ native rất nhỏ. 17px cũng tránh cơ chế phóng to form của iOS. */
  font-family: inherit;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.35;
  -webkit-text-fill-color: currentColor;
  -webkit-text-size-adjust: 100%;
  outline: none;
  box-shadow: 0 1px 3px rgba(31,45,85,.035);
}
/* Placeholder dùng chung token màu với ô Tra từ. -webkit-text-fill-color là
   bắt buộc: Safari iOS ở dark mode sẽ ghi đè màu chữ nếu thiếu dòng này. */
.profile-auth-form input::placeholder,
.profile-auth-form input::-webkit-input-placeholder {
  color: var(--gv-faint);
  -webkit-text-fill-color: var(--gv-faint);
  font-size: 17px;
  opacity: 1;
}
.profile-auth-form input:focus {
  border-color: #687fc7;
  box-shadow: 0 0 0 3px rgba(74,99,180,.1);
}
.profile-auth-form .profile-code-input {
  text-align: center;
  letter-spacing: .28em;
  font-size: 21px;
  font-weight: 700;
}
.profile-settings-page>.profile-verification,
.profile-password-page>.profile-verification {
  min-height: 0;
  padding: 12px 0 20px;
}
.profile-auth-form > button {
  border: 0;
  border-radius: 999px;
  padding: 14px;
  background: #2c3e7a;
  color: #fff;
  font: 700 15px inherit;
  cursor: pointer;
}
.profile-auth-form > button:disabled { opacity: .55; }
.profile-password-field { position: relative; display: block; }
.profile-password-field input { padding-right: 52px; }
.profile-password-visibility {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 9px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  transform: translateY(-50%);
  background: var(--gv-raised);
  color: var(--gv-muted);
  line-height: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.profile-password-visibility svg { display: block; width: 20px; height: 20px; }
.profile-password-visibility.visible { background: var(--gv-primary-soft); color: var(--gv-primary-ink); }
.profile-auth-switch {
  margin: 16px auto 0;
  border: 0;
  background: transparent;
  color: #2c3e7a;
  font: 600 13px inherit;
  cursor: pointer;
}
.profile-auth-forgot {
  margin: 13px auto -2px;
  border: 0;
  background: transparent;
  color: #657492;
  font: 600 12px inherit;
  cursor: pointer;
}
.profile-route-head {
  z-index: 4;
  height: 58px;
  margin: 0 -16px 15px;
  padding: 0 13px;
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  text-align: center;
  color: #263247;
}
.profile-route-head button {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 12px;
  background: #fff;
  color: #2c3e7a;
  font: 400 32px/32px inherit;
  cursor: pointer;
}
.profile-route-head b { font-size: 17px; }
.profile-settings-page,.profile-password-page { padding-top: calc(var(--gv-route-h) + 15px); }
.profile-phone-line {
  margin: 5px auto 0;
  border: 0;
  background: transparent;
  color: #7a8594;
  font: 500 13px inherit;
  cursor: pointer;
}
.profile-phone-line i { margin-left: 4px; font-style: normal; font-size: 17px; }
.profile-edit-form { padding: 5px 15px 14px; }
.profile-edit-form label { padding: 11px 0; border-bottom: 1px solid #edf0f4; display: grid; gap: 6px; }
.profile-edit-form label>span { color: #8c96a4; font-size: 11px; font-weight: 650; }
.profile-edit-form input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  color: #253247;
  font: 550 15px inherit;
  outline: 0;
}
.profile-edit-form input:not([readonly]) { border-bottom-color: #9aa9c2; }
.profile-edit-form input::placeholder { color: #b0b7c1; }
.profile-edit-form>button {
  width: 100%;
  margin-top: 13px;
  padding: 11px;
  border: 0;
  border-radius: 999px;
  background: #eef2ff;
  color: #2c3e7a;
  font: 700 13px inherit;
  cursor: pointer;
}
.profile-edit-form>button:disabled { opacity: .58; }
.profile-switch {
  width: 47px;
  height: 28px;
  flex: 0 0 47px;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 999px;
  background: #d3d7de;
  position: relative;
  transition: background .2s ease;
}
.profile-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
  transition: transform .2s ease;
}
.profile-switch:checked { background: #34c759; }
.profile-switch:checked::after { transform: translateX(19px); }
.profile-theme-control {
  padding: 3px;
  border-radius: 10px;
  background: #eef0f4;
  display: flex!important;
  gap: 2px!important;
}
.profile-theme-control button {
  min-width: 52px;
  border: 0;
  border-radius: 8px;
  padding: 6px 8px;
  background: transparent;
  color: #788392;
  font: 650 12px inherit;
}
.profile-theme-control button.active {
  background: #fff;
  color: #263247;
  box-shadow: 0 1px 4px rgba(31,45,85,.12);
}
.profile-language-picker {
  min-height: 58px;
  padding: 12px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #303c50;
}
.profile-language-picker>span:first-child { min-width: 0; display: grid; gap: 3px; }
.profile-language-picker b { color: var(--gv-text); font-size: 15px; font-weight: 500; }
.profile-language-picker small { color: #8993a1; font-size: 11px; font-weight: 500; }
.profile-language-control { padding: 3px; border-radius: 10px; background: #eef0f4; display: flex; gap: 2px; }
.profile-language-control button {
  min-width: 62px; border: 0; border-radius: 8px; padding: 6px 8px; background: transparent;
  color: #788392; font: 650 12px inherit;
}
.profile-language-control button.active { background: #fff; color: #263247; box-shadow: 0 1px 4px rgba(31,45,85,.12); }
.profile-language-picker.compact { margin: 20px auto 0; max-width: 320px; border-radius: 14px; background: #f4f6fa; text-align: left; }
.profile-settings-logout {
  width: 100%;
  margin-top: 18px;
  padding: 14px;
  border: 0;
  border-radius: 17px;
  background: #fff;
  color: #e0453a;
  font: 650 15px inherit;
  cursor: pointer;
}
.profile-password-copy {
  margin: 28px 0 20px;
  text-align: center;
}
.profile-password-copy h1 { color: #1f2d55; font-size: 23px; }
.profile-password-copy p { margin-top: 7px; color: #7d8898; font-size: 13px; }
.profile-notifications {
  position: fixed;
  inset: 0;
  z-index: 10020;
  width: 100%;
  max-width: 480px;
  height: 100vh;
  height: 100dvh;
  margin: auto;
  background: #f5f5f5;
  padding-top: var(--gv-header-h);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.profile-notification-head {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  width: 100%;
  max-width: 480px;
  height: var(--gv-header-h);
  margin: 0 auto;
  padding: env(safe-area-inset-top,0px) 13px 0;
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  text-align: center;
  border-bottom: 1px solid #dfe5ed;
}
.profile-notification-head button {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 12px;
  background: #fff;
  color: #2c3e7a;
  font: 400 30px/32px inherit;
}
.profile-notification-list {
  display: grid;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: none;
  gap: 10px;
  padding: 14px 13px max(env(safe-area-inset-bottom,24px),24px);
}
.profile-notification-item {
  border: 0;
  border-radius: 17px;
  background: #fff;
  padding: 15px;
  display: grid;
  gap: 5px;
  text-align: left;
  color: #263247;
  box-shadow: 0 3px 13px rgba(31,45,85,.06);
}
.profile-notification-item b { font-size: 14px; }
.profile-notification-item span { color: #647186; font-size: 13px; line-height: 1.45; }
.profile-notification-item small { color: #9ba4b0; font-size: 10px; }
.profile-notification-empty { padding: 70px 25px; text-align: center; color: #8b96a5; font-size: 14px; }

/* ÔN TẬP KHI CHƯA ĐĂNG NHẬP */
.review-guest-home { display: flex; flex-direction: column; gap: 13px; }
.review-guest-note {
  padding: 17px;
  border-radius: 19px;
  background: #fff;
  display: grid;
  gap: 6px;
  text-align: left;
  box-shadow: 0 3px 14px rgba(31,45,85,.055);
}
.review-guest-note b { color: #253247; font-size: 15px; }
.review-guest-note span { color: #7f8997; font-size: 12px; line-height: 1.45; }
.review-guest-note button {
  justify-self: start;
  margin-top: 5px;
  border: 0;
  border-radius: 999px;
  padding: 9px 13px;
  background: #2c3e7a;
  color: #fff;
  font: 700 12px inherit;
}
.review-locked-card {
  min-height: 96px;
  padding: 16px;
  border-radius: 19px;
  background: #e7e9ed;
  color: #a7adb6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}
.review-locked-card>div { display: grid; gap: 4px; }
.review-locked-card b { color: #9ca3ad; font-size: 15px; }
.review-locked-card small { font-size: 11px; }
.review-locked-bars {
  height: 54px;
  display: flex;
  align-items: end;
  gap: 5px;
}
.review-locked-bars i { width: 8px; border-radius: 5px; background: #c8ccd2; }
.review-locked-bars i:nth-child(1) { height: 22%; }
.review-locked-bars i:nth-child(2) { height: 45%; }
.review-locked-bars i:nth-child(3) { height: 72%; }
.review-locked-bars i:nth-child(4) { height: 54%; }
.review-locked-bars i:nth-child(5) { height: 88%; }
.review-locked-action {
  width: 100%;
  border: 0;
  border-radius: 999px;
  padding: 13px;
  background: #dfe2e7;
  color: #a8afb8;
  font: 700 14px inherit;
}
.review-locked-row {
  min-height: 70px;
  justify-content: flex-start;
}
.review-locked-row>span { font-size: 25px; }
.review-locked-row>div { flex: 1; }
.review-locked-row>i { font-style: normal; font-size: 24px; }

/* SHARE SỔ TAY */
.review-notebook-share {
  width: 38px;
  height: 38px!important;
  border: 1px solid var(--gv-border)!important;
  border-radius: 12px!important;
  /* Cùng token với .review-back để hai nút trên back bar đồng bộ. */
  background: var(--gv-surface)!important;
  color: var(--gv-text)!important;
  box-shadow: var(--gv-shadow);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.review-notebook-share svg { width: 20px; height: 20px; }
.review-notebook-add {
  width: 100%;
  min-height: 58px;
  border: 1px solid var(--gv-border);
  border-radius: 17px;
  background: var(--gv-surface);
  color: var(--gv-text);
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 11px;
  align-items: center;
  padding: 11px 15px;
  text-align: left;
  font: inherit;
  cursor: pointer;
  box-shadow: var(--gv-shadow);
}
.review-notebook-add>span {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--gv-primary-soft);
  color: var(--gv-primary-ink);
  font-size: 22px;
  line-height: 1;
}
.review-notebook-add>b { font-size: clamp(14.5px,4.15vw,16.5px); font-weight: 500; }
.review-notebook-add>i { color: var(--gv-faint); font-style: normal; font-size: 24px; font-weight: 400; line-height: 1; }
.review-notebook-add:active { transform: scale(.985); }
.review-start-loading { box-shadow: none!important; opacity: .72; cursor: wait; }
.notebook-share-overlay {
  position: fixed;
  inset: 0;
  z-index: 10030;
  padding-top: 20px;
  background: rgba(16,23,37,.48);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transition: background .22s ease;
}
.notebook-share-sheet {
  width: 100%;
  max-width: 480px;
  padding: 12px 16px max(env(safe-area-inset-bottom,18px),18px);
  border-radius: 25px 25px 0 0;
  background: #f5f5f5;
}
.notebook-share-head {
  height: 42px;
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  text-align: center;
  color: #263247;
}
.notebook-share-head button {
  grid-column: 1;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 11px;
  background: #fff;
  color: #2c3e7a;
  font: 400 28px/30px inherit;
}
.notebook-share-head b { grid-column: 2; font-size: 16px; }
.notebook-share-head span { grid-column: 3; }
.notebook-share-card {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 390px;
  aspect-ratio: 16/9;
  margin: 9px auto 14px;
  padding: 19px 20px;
  overflow: hidden;
  border-radius: 22px;
  background: linear-gradient(135deg,var(--share-from),var(--share-to));
  color: #fff;
  box-shadow: 0 10px 25px rgba(31,45,85,.17);
  display: grid;
  grid-template-columns: minmax(0,1fr) 38%;
  gap: 12px;
}
.notebook-share-card::before,.notebook-share-card::after {
  content: '';
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
}
.notebook-share-card::before { width: 230px; height: 230px; right: -76px; top: -100px; }
.notebook-share-card::after { width: 180px; height: 180px; right: -45px; bottom: -100px; }
.notebook-share-copy { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.notebook-share-brand {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #ffd75e;
  font-size: 11px;
  letter-spacing: .035em;
}
.notebook-share-brand>span {
  width: 23px;
  height: 23px;
  border-radius: 8px;
  background: rgba(255,255,255,.16);
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 900;
}
.notebook-share-copy>small {
  margin-top: 16px;
  font-size: 14px;
  font-weight: 720;
}
.notebook-share-count {
  margin-top: 2px;
  display: flex;
  align-items: baseline;
  gap: 5px;
  line-height: 1;
}
.notebook-share-count strong { font-size: clamp(36px,11vw,52px); letter-spacing: -2px; }
.notebook-share-count span { font-size: 20px; font-weight: 800; }
.notebook-share-copy>p {
  margin-top: 5px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 700;
}
.notebook-share-copy>em {
  margin-top: auto;
  color: rgba(255,255,255,.72);
  font-size: 9px;
  font-style: normal;
}
.notebook-share-portrait {
  position: relative;
  display: grid;
  place-items: center;
}
.notebook-share-portrait::before {
  content: '';
  position: absolute;
  width: 104px;
  height: 104px;
  border: 12px solid rgba(255,212,70,.9);
  border-radius: 50%;
  background: rgba(255,255,255,.18);
}
.notebook-share-portrait .share-avatar {
  /* KHÔNG đặt lại position:relative: rule dùng chung
     ".profile-avatar-img,.profile-avatar-fallback" cần position:absolute để
     ảnh và chữ dự phòng đè khít lên nhau (xem giải thích ở rule đó). Ở đây chỉ
     ghi đè z-index/kích thước/viền — giữ absolute, kết hợp inset:0 + margin:auto
     sẵn có sẽ tự căn giữa khối 83×83px trong khung .notebook-share-portrait
     lớn hơn. */
  z-index: 2;
  width: 83px;
  height: 83px;
  border: 3px solid rgba(255,255,255,.85);
  box-shadow: none;
  font-size: 31px;
}
.notebook-share-portrait>i,.notebook-share-portrait>b {
  position: absolute;
  z-index: 3;
  color: #fff6a5;
  font-style: normal;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.12));
}
.notebook-share-portrait>i { right: 4px; top: 24px; font-size: 19px; }
.notebook-share-portrait>b { left: 5px; bottom: 26px; font-size: 17px; }
.notebook-share-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.notebook-share-actions button {
  min-height: 45px;
  border: 0;
  border-radius: 999px;
  padding: 11px;
  background: #fff;
  color: #35435a;
  font: 700 14px inherit;
  box-shadow: 0 3px 12px rgba(31,45,85,.07);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.notebook-share-actions button.primary { background: #2c3e7a; color: #fff; }
.notebook-share-actions svg { width: 20px; height: 20px; }
.notebook-share-overlay.closing {
  pointer-events: none;
  background: rgba(16,23,37,0);
}

/* DARK MODE — toàn bộ ứng dụng */
html[data-theme="dark"] {
  --dark-bg: var(--gv-bg);
  --dark-surface: var(--gv-surface);
  --dark-raised: var(--gv-raised);
  --dark-border: var(--gv-border);
  --dark-text: var(--gv-text);
  --dark-muted: var(--gv-muted);
  --dark-accent: var(--gv-primary-ink);
}
html[data-theme="dark"] body,
html[data-theme="dark"] .main,
html[data-theme="dark"] .review-session,
html[data-theme="dark"] .review-streak-page,
html[data-theme="dark"] .profile-notifications {
  background: var(--dark-bg);
  color: var(--dark-text);
}
html[data-theme="dark"] .header,
html[data-theme="dark"] .search-box { background: #17213b; }
html[data-theme="dark"] .bottom-nav {
  background: #141d2c;
  border-top-color: var(--dark-border);
}
html[data-theme="dark"] .nav-btn { color: #77859a; }
html[data-theme="dark"] .nav-btn.active { color: #b6c5ff; }

/* Từ điển và dịch câu */
html[data-theme="dark"] .search-input-wrap,
html[data-theme="dark"] .search-input,
html[data-theme="dark"] .search-clear-btn,
html[data-theme="dark"] .topic-card,
html[data-theme="dark"] .word-row,
html[data-theme="dark"] .suggest-dropdown,
html[data-theme="dark"] .gt-card,
html[data-theme="dark"] .gt-history-list,
html[data-theme="dark"] .gt-history-content,
html[data-theme="dark"] .gt-lang-pill,
html[data-theme="dark"] .result-card {
  background: var(--dark-surface);
  color: var(--dark-text);
}
html[data-theme="dark"] .search-input-wrap {
  background: #202938;
  border: 1px solid #354154;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035),0 5px 18px rgba(0,0,0,.12);
}
html[data-theme="dark"] .search-input {
  background: transparent;
  color: #f3f6fb;
  caret-color: #aebeff;
  -webkit-text-fill-color: #f3f6fb;
}
html[data-theme="dark"] .search-btn { color: #bdcaff; }
html[data-theme="dark"] .search-clear-btn,
html[data-theme="dark"] .back-inline-btn,
html[data-theme="dark"] .mismatch-notice a,
html[data-theme="dark"] .gt-lang-to,
html[data-theme="dark"] .gt-result,
html[data-theme="dark"] .gt-icon-btn.gt-blue,
html[data-theme="dark"] .more-ex-btn,
html[data-theme="dark"] .meaning-text,
html[data-theme="dark"] .pos-tag { color: var(--dark-accent); }
html[data-theme="dark"] .toggle-track { background: rgba(255,255,255,.11); }
html[data-theme="dark"] .toggle-indicator { background: #dbe3f7; }
html[data-theme="dark"] .toggle-option.active { color: #1b294b; }
html[data-theme="dark"] .section-title,
html[data-theme="dark"] .loading,
html[data-theme="dark"] .lookup-empty-note { color: var(--dark-muted); }
html[data-theme="dark"] .topic-name,
html[data-theme="dark"] .word-en,
html[data-theme="dark"] .gt-textarea,
html[data-theme="dark"] .gt-history-src,
html[data-theme="dark"] .result-word-title { color: var(--dark-text); }
html[data-theme="dark"] .topic-vi,
html[data-theme="dark"] .word-vi,
html[data-theme="dark"] .word-ipa,
html[data-theme="dark"] .gt-lang-label,
html[data-theme="dark"] .gt-history-res,
html[data-theme="dark"] .ipa-text,
html[data-theme="dark"] .example-en,
html[data-theme="dark"] .example-vi { color: var(--dark-muted); }
html[data-theme="dark"] .topic-count,
html[data-theme="dark"] .word-pos-tag,
html[data-theme="dark"] .gt-history-tag,
html[data-theme="dark"] .ipa-accent-label,
html[data-theme="dark"] .word-ipa b {
  background: #283754;
  color: #bdcaff;
}
html[data-theme="dark"] .suggest-item { border-bottom-color: var(--dark-border); }
html[data-theme="dark"] .suggest-item:hover,
html[data-theme="dark"] .suggest-item:active { background: var(--dark-raised); }
html[data-theme="dark"] .gt-textarea { background: transparent; }
html[data-theme="dark"] .gt-icon-btn { color: #a8b3c3; }
html[data-theme="dark"] .gt-icon-btn:active { background: var(--dark-raised); }
html[data-theme="dark"] .gt-corner-btn,
html[data-theme="dark"] .speak-btn {
  background: #26334a;
  color: #bac8ff;
}
html[data-theme="dark"] .gt-history-row,
html[data-theme="dark"] .meaning-divider { border-color: var(--dark-border); }
html[data-theme="dark"] .gt-divider { border-top-color: #40516c; }
html[data-theme="dark"] .gt-translate-btn { background: #7799d2; color: #102040; }
html[data-theme="dark"] .gt-swap-btn { color: #a7b2c2; }
html[data-theme="dark"] .lemma-note {
  background: #1e2a40;
  border-left-color: #8fa9ff;
  color: #aeb9c9;
}

/* Ôn tập, câu hỏi và streak */
html[data-theme="dark"] .review-chart-card,
html[data-theme="dark"] .review-empty,
html[data-theme="dark"] .review-push,
html[data-theme="dark"] .review-sentence,
html[data-theme="dark"] .review-option,
html[data-theme="dark"] .review-meaning,
html[data-theme="dark"] .review-scramble-answer,
html[data-theme="dark"] .review-chunk,
html[data-theme="dark"] .review-example-feedback,
html[data-theme="dark"] .review-word-list,
html[data-theme="dark"] .review-session-bar button,
html[data-theme="dark"] .review-streak-stat-block,
html[data-theme="dark"] .review-calendar-card,
html[data-theme="dark"] .review-streak-head button,
html[data-theme="dark"] .review-back,
html[data-theme="dark"] .review-guest-note,
html[data-theme="dark"] .profile-notification-item {
  background: var(--dark-surface);
  color: var(--dark-text);
  box-shadow: 0 3px 14px rgba(0,0,0,.18);
}
html[data-theme="dark"] .review-topbar,
html[data-theme="dark"] .review-session-head,
html[data-theme="dark"] .review-streak-head {
  background: rgba(15,21,33,.94);
  border-color: var(--dark-border);
  color: var(--dark-text);
}
html[data-theme="dark"] .review-chart-title,
html[data-theme="dark"] .review-push,
html[data-theme="dark"] .review-word-row b,
html[data-theme="dark"] .review-feedback-word,
html[data-theme="dark"] .review-calendar-card h2,
html[data-theme="dark"] .review-calendar-head b,
html[data-theme="dark"] .review-streak-stat-block,
html[data-theme="dark"] .review-session-bar,
html[data-theme="dark"] .review-guest-note b { color: var(--dark-text); }
html[data-theme="dark"] .review-done h1 { color: var(--dark-text); }
html[data-theme="dark"] .review-chart-title small,
html[data-theme="dark"] .review-push small,
html[data-theme="dark"] .review-word-row p,
html[data-theme="dark"] .review-word-row small,
html[data-theme="dark"] .review-prompt,
html[data-theme="dark"] .review-count,
html[data-theme="dark"] .review-streak-message { color: var(--dark-muted); }
html[data-theme="dark"] .review-chart-track,
html[data-theme="dark"] .review-progress { background: #2b3546; }
html[data-theme="dark"] .review-word-row { border-bottom-color: var(--dark-border); }
html[data-theme="dark"] .review-audio,
html[data-theme="dark"] .review-chosen-chunk,
html[data-theme="dark"] .review-scramble-answer span {
  background: #263754;
  color: #becbff;
}
html[data-theme="dark"] .review-option.selected { background: #293754; color: #e8edff; border-color: #8299e8; }
html[data-theme="dark"] .review-option.right-answer,
html[data-theme="dark"] .review-result.right {
  background: #17382b!important;
  color: #8ee4b3!important;
}
html[data-theme="dark"] .review-option.wrong-answer,
html[data-theme="dark"] .review-result.wrong {
  background: #432421!important;
  color: #ffaaa1!important;
}
html[data-theme="dark"] .review-answer-example { color: #c4cedb; border-top-color: var(--dark-border); }
html[data-theme="dark"] .review-word,
html[data-theme="dark"] .review-letter,
html[data-theme="dark"] .review-full-input,
html[data-theme="dark"] .review-letter-input { color: #c2ceff; }
html[data-theme="dark"] .review-full-input,
html[data-theme="dark"] .review-letter-input { border-color: #8299e8; }
html[data-theme="dark"] .notebook-tier-rookie { background: #202938; color: #bdc7d5; }
html[data-theme="dark"] .notebook-tier-rookie .review-notebook-icon { background: #2c3748; color: #9aa8bb; }
html[data-theme="dark"] .notebook-tier-diligent { background: var(--dark-surface); border-color: var(--dark-border); color: var(--dark-text); }
html[data-theme="dark"] .notebook-tier-diligent .review-notebook-icon { background: #263248; color: #b7c5f4; }
html[data-theme="dark"] .notebook-tier-bookworm {
  background: linear-gradient(145deg,#4a3c16,#302b1a);
  border-color: #665623;
  color: #fff0b8;
}
html[data-theme="dark"] .notebook-tier-bookworm .review-notebook-icon { background: rgba(255,220,112,.13); color: #ffe09a; }
html[data-theme="dark"] .notebook-tier-bookworm small,
html[data-theme="dark"] .notebook-tier-bookworm .review-notebook-copy em,
html[data-theme="dark"] .notebook-tier-bookworm i { color: #d4c185; }
html[data-theme="dark"] .review-streak-hero.idle { background: #202a39; color: #8996a8; }
html[data-theme="dark"] .review-streak-hero.warm { background: linear-gradient(145deg,#3a321d,#2c271b); color: #f2bd4f; }
html[data-theme="dark"] .review-streak-hero.hot { background: linear-gradient(145deg,#47261f,#35221d); color: #ff826d; }
html[data-theme="dark"] .review-calendar-head button,
html[data-theme="dark"] .review-goal-calendar { background: var(--dark-raised); color: #b9c7f6; }
html[data-theme="dark"] .review-calendar-day { color: #f4f7fb; }
html[data-theme="dark"] .review-calendar-day.today:not(.learned) { box-shadow: inset 0 0 0 1px #63718a; }
html[data-theme="dark"] .review-goal-progress,
html[data-theme="dark"] .review-streak-goal-block .review-goal-progress { background: #303a49!important; }
html[data-theme="dark"] .review-locked-card,
html[data-theme="dark"] .review-locked-action { background: #1b2432; color: #657184; }
html[data-theme="dark"] .review-locked-card b { color: #778396; }
html[data-theme="dark"] .review-row-delete { background: #432421; color: #ff9b91; }
html[data-theme="dark"] .review-session-bar .review-streak-button { background: var(--dark-raised); }
html[data-theme="dark"] .review-session-bar .review-streak-button.warm { background: #3a321d; }
html[data-theme="dark"] .review-session-bar .review-streak-button.hot { background: #47261f; }

/* Hồ sơ, form và modal */
html[data-theme="dark"] .profile-ios-group,
html[data-theme="dark"] .profile-auth-form input,
html[data-theme="dark"] .profile-settings-logout,
html[data-theme="dark"] .profile-route-head button {
  background: var(--dark-surface);
}
html[data-theme="dark"] .profile-identity h1,
html[data-theme="dark"] .profile-auth h1,
html[data-theme="dark"] .profile-password-copy h1,
html[data-theme="dark"] .profile-setting-row,
html[data-theme="dark"] .profile-route-head,
html[data-theme="dark"] .profile-edit-form input {
  color: var(--dark-text);
}
html[data-theme="dark"] .profile-phone-line,
html[data-theme="dark"] .profile-identity p,
html[data-theme="dark"] .profile-setting-row small,
html[data-theme="dark"] .profile-edit-form label>span { color: var(--dark-muted); }
html[data-theme="dark"] .profile-setting-row,
html[data-theme="dark"] .profile-edit-form label { border-color: var(--dark-border); }
html[data-theme="dark"] .profile-route-head button,
html[data-theme="dark"] .profile-auth-switch { color: var(--dark-accent); }
html[data-theme="dark"] .profile-theme-control { background: #0f1725; }
html[data-theme="dark"] .profile-language-control,
html[data-theme="dark"] .profile-language-picker.compact { background: #0f1725; }
html[data-theme="dark"] .profile-theme-control button.active {
  background: #344158;
  color: #fff;
}
html[data-theme="dark"] .profile-edit-form>button { background: #293754; color: #becbff; }
html[data-theme="dark"] .profile-avatar-control { border-color: var(--dark-surface); box-shadow: 0 0 0 1px #3e4a60; }
html[data-theme="dark"] .profile-avatar-control>span:last-of-type { border-color: var(--dark-bg); background: #2b3650; color: #c8d3ff; }
html[data-theme="dark"] .profile-auth-form input { border-color: #344055; color: #f2f5fa; }
html[data-theme="dark"] .profile-password-visibility { color: #9caaca; }
html[data-theme="dark"] .profile-password-visibility.visible { color: #bdc9ff; }
html[data-theme="dark"] .profile-auth-divider { color: #6b7891; }
html[data-theme="dark"] .profile-auth-divider::before,
html[data-theme="dark"] .profile-auth-divider::after { background: #344055; }
html[data-theme="dark"] .profile-auth-form input::placeholder,
html[data-theme="dark"] .profile-edit-form input::placeholder { color: #6f7b8e; }
html[data-theme="dark"] .profile-notification-head {
  background: rgba(15,21,33,.95);
  border-bottom-color: var(--dark-border);
  color: var(--dark-text);
}
html[data-theme="dark"] .notebook-share-sheet { background: #141e2e; }
html[data-theme="dark"] .notebook-share-head { color: var(--dark-text); }
html[data-theme="dark"] .notebook-share-head button,
html[data-theme="dark"] .notebook-share-actions button:not(.primary) {
  background: var(--dark-raised);
  color: var(--dark-text);
}

/* COBALT VIỆT — lớp giao diện chính thức cho cả light mode và dark mode. */
body,
.main,
.review-session,
.review-streak-page,
.profile-notifications,
.profile-page,
.profile-auth,
.profile-settings-page,
.profile-password-page {
  background: var(--gv-bg);
  color: var(--gv-text);
}

.header {
  background: var(--gv-surface);
  color: var(--gv-text);
  border-bottom: 1px solid var(--gv-border);
}
.header-logo { color: var(--gv-text); font-weight: 600; }
.header-logo span { color: var(--gv-gold); }
.search-box { background: var(--gv-bg); }
.bottom-nav {
  background: var(--gv-surface);
  border-top-color: var(--gv-border);
  box-shadow: 0 -5px 20px rgba(40,52,98,.045);
}
.nav-btn { color: var(--gv-faint); }
.nav-btn.active { color: var(--gv-primary); }
.header .review-header-streak { background: var(--gv-primary-soft); color: var(--gv-faint); }
.header .review-header-streak.warm { background: var(--gv-gold-soft); color: var(--gv-gold-strong); }
.header .review-header-streak.hot { background: var(--gv-danger-soft); color: var(--gv-danger); }

/* Từ điển và dịch câu */
.search-input-wrap {
  background: var(--gv-surface);
  border: 1px solid var(--gv-border);
  box-shadow: var(--gv-shadow);
}
.search-input { color: var(--gv-text); caret-color: var(--gv-primary); }
.search-input::placeholder,
.gt-textarea::placeholder {
  color: var(--gv-faint);
  -webkit-text-fill-color: var(--gv-faint);
  opacity: 1;
}
.search-input::-webkit-input-placeholder,
.gt-textarea::-webkit-input-placeholder {
  color: var(--gv-faint);
  -webkit-text-fill-color: var(--gv-faint);
  opacity: 1;
}
.search-btn,
.search-clear-btn,
.back-inline-btn,
.mismatch-notice a,
.gt-lang-to,
.gt-result,
.gt-icon-btn.gt-blue,
.more-ex-btn,
.meaning-text,
.pos-tag { color: var(--gv-primary); }
.search-clear-btn,
.gt-corner-btn,
.speak-btn { background: var(--gv-primary-soft); color: var(--gv-primary-ink); }
.toggle-track { background: var(--gv-raised); border: 1px solid var(--gv-border); }
.toggle-indicator { background: var(--gv-surface); box-shadow: 0 2px 8px rgba(40,52,98,.1); }
.toggle-option { color: var(--gv-muted); }
.toggle-option.active { color: var(--gv-primary-ink); }
.translate-note,
.gt-history-title { color: var(--gv-muted); }
.topic-card,
.word-row,
.suggest-dropdown,
.gt-card,
.gt-history-list,
.gt-history-content,
.gt-lang-pill,
.result-card {
  background: var(--gv-surface);
  color: var(--gv-text);
  border-color: var(--gv-border);
  box-shadow: var(--gv-shadow);
}
.collection-card { background: linear-gradient(135deg,var(--gv-primary),var(--gv-primary-strong)); box-shadow: 0 4px 14px rgba(79,95,215,.22); }
.topic-name,
.word-en,
.gt-textarea,
.gt-history-src,
.result-word-title { color: var(--gv-text); }
.topic-vi,
.word-vi,
.word-ipa,
.gt-lang-label,
.gt-history-res,
.ipa-text,
.example-en,
.example-vi,
.section-title,
.loading,
.lookup-empty-note { color: var(--gv-muted); }
.topic-count,
.word-pos-tag,
.gt-history-tag,
.ipa-accent-label,
.word-ipa b {
  background: var(--gv-primary-soft);
  color: var(--gv-primary-ink);
}
.suggest-item,
.gt-history-row,
.meaning-divider { border-color: var(--gv-border); }
.suggest-item:hover,
.suggest-item:active,
.gt-icon-btn:active { background: var(--gv-raised); }
.gt-divider { border-top-color: var(--gv-border); }
.gt-translate-btn,
.save-word-btn {
  background: var(--gv-primary);
  color: #fff;
  box-shadow: 0 4px 13px rgba(79,95,215,.24);
}
.gt-translate-btn:active,
.save-word-btn:active { background: var(--gv-primary-strong); }
.save-word-btn.saved,
html[data-theme="dark"] .save-word-btn.saved {
  appearance:none;
  -webkit-appearance:none;
  background:var(--gv-success)!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff;
  opacity:1;
  box-shadow:none
}
.lemma-note { background: var(--gv-primary-soft); border-left-color: var(--gv-primary); color: var(--gv-muted); }

/* Ôn tập */
.review-hero { background: linear-gradient(135deg,var(--gv-primary),var(--gv-primary-strong)); }
.review-hero span { color: var(--gv-gold); }
.review-chart-card,
.review-empty,
.review-push,
.review-sentence,
.review-option,
.review-meaning,
.review-scramble-answer,
.review-chunk,
.review-example-feedback,
.review-word-list,
.review-session-bar button,
.review-streak-stat-block,
.review-calendar-card,
.review-streak-head button,
.review-back,
.review-guest-note {
  background: var(--gv-surface);
  color: var(--gv-text);
  border-color: var(--gv-border);
  box-shadow: var(--gv-shadow);
}
.review-start,
.review-check:not(:disabled),
.review-next,
.review-done button {
  background: var(--gv-primary)!important;
  color: #fff!important;
  box-shadow: 0 4px 13px rgba(79,95,215,.24);
}
.review-check:disabled { background: var(--gv-raised)!important; color: var(--gv-faint)!important; opacity: 1; }
.review-push-icon,
.review-audio,
.review-chosen-chunk,
.review-scramble-answer span {
  background: var(--gv-primary-soft);
  color: var(--gv-primary-ink);
}
/* Nút bật nhắc ôn: dịch xuống một chút cho cân đối với "Ôn tập ngay" và biểu
   đồ tiến độ ở trên, và nổi bật hơn khi chưa bật (chuông rung nhẹ, nền đỏ).
   Khi đã bật, chuông ngừng rung và đổi sang màu xanh để báo hoàn tất. */
.review-push { margin-top: 14px; }
.review-push:not(.is-enabled) .review-push-icon {
  background: #fde3e3;
  color: #d8394f;
  animation: reviewPushBellShake 2.6s ease-in-out .8s infinite;
  transform-origin: 50% 15%;
}
.review-push.is-enabled .review-push-icon { background: #dcf3e7; color: #1f9d63; }
@keyframes reviewPushBellShake {
  0%, 55%, 100% { transform: rotate(0); }
  60% { transform: rotate(-11deg); }
  65% { transform: rotate(9deg); }
  70% { transform: rotate(-7deg); }
  75% { transform: rotate(5deg); }
  80% { transform: rotate(-3deg); }
  85% { transform: rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
  .review-push:not(.is-enabled) .review-push-icon { animation: none; }
}
/* Nút đếm ngược tới thời điểm vàng. Dùng chung class .review-start với "Ôn tập
   ngay" và "Thêm từ vựng" nên vị trí, bề rộng và bo góc luôn khớp nhau; ở đây
   chỉ đổi màu sang tông vàng và xếp lại nội dung bên trong. */
.review-countdown-label {
  margin: 0 0 9px;
  text-align: center;
  font-size: clamp(13px,3.9vw,15px);
  font-weight: 600;
  color: var(--gv-text);
}
/* Bóng đèn gợi ý đứng cạnh nút hành động (thêm từ / đếm ngược / ôn tập ngay).
   Cả cụm căn giữa; nút co vừa nội dung nhưng giữ nguyên padding và chiều cao
   dùng chung với .review-start. */
.review-action-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
}
.review-action-row>.review-start {
  grid-column: 2;
  width: auto;
  min-width: 0;
  margin: 0;
}
.review-action-bulb { grid-column: 3; justify-self: start; }
.review-action-row>.review-start.review-countdown {
  /* Cố định bề rộng: nội dung đổi giữa "HH:MM:SS" và "X ngày Y giờ" (dài ngắn
     rất khác nhau, kể cả cùng định dạng khi số ngày/giờ đổi từ 1 sang 2 chữ
     số), nếu để width theo nội dung thì nút co giãn liên tục mỗi giây.
     Padding riêng 10px (thay vì 24px dùng chung với "Ôn tập ngay") vì đây là
     pill đếm giờ, không cần đệm rộng như nút CTA chính. Width là kích thước
     ngoài cùng của button (toàn site dùng border-box), nên giảm padding mà vẫn
     giữ 176px không làm hai mép gọn hơn. 152px vẫn chứa chuỗi ngày/giờ thông
     dụng và giữ đồng hồ không co giãn từng giây. */
  width: 152px;
  padding-left: 10px;
  padding-right: 10px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  background: var(--gv-gold-soft)!important;
  border: 1px solid var(--gv-gold)!important;
  color: var(--gv-gold-strong)!important;
  box-shadow: none!important;
  font-variant-numeric: tabular-nums;
}
.review-action-bulb {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--gv-gold-strong);
  line-height: 0;
  cursor: pointer;
}
.review-action-bulb svg { width: 30px; height: 30px; }
.review-action-bulb:active { transform: scale(.94); }
/* Popup Thời điểm vàng: full màn hình, đầu trang dùng đúng công thức nút đóng
   của popup hồ sơ ở Bảng xếp hạng (.leaderboard-person-popup-head button). */
.optimal-review-overlay {
  position: fixed;
  inset: 0;
  z-index: 6200;
  display: flex;
  background: var(--gv-bg);
}
.optimal-review-sheet {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: max(env(safe-area-inset-top),10px) 14px max(env(safe-area-inset-bottom),14px);
}
.optimal-review-head {
  flex: 0 0 auto;
  height: 56px;
  display: flex;
  align-items: center;
}
.optimal-review-head button {
  border: 1px solid var(--gv-border);
  border-radius: 12px;
  background: var(--gv-surface);
  color: var(--gv-primary-ink);
  font-family: var(--gv-font);
  cursor: pointer;
}
/* Tiêu đề nằm trong phần thân, dưới hẳn dấu × chứ không cùng hàng với nó. */
.optimal-review-body h2 {
  margin: 4px 0 14px;
  font-size: clamp(19px,5.2vw,22px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--gv-gold-strong);
}
.optimal-review-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* padding-top rộng để khối chữ bắt đầu hẳn bên dưới dấu ×, không dính sát. */
  padding: 22px 2px 4px;
}
.optimal-review-body p {
  margin: 0 0 12px;
  font-size: clamp(13px,3.7vw,14.5px);
  line-height: 1.6;
  color: var(--gv-text);
}
.optimal-review-levels { margin: 16px 0 4px; display: grid; gap: 8px; }
.optimal-review-row {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 2px 10px;
  padding: 11px 13px;
  border: 1px solid var(--gv-border);
  border-radius: 14px;
}
.optimal-review-row b { grid-row: span 2; align-self: center; font-size: 13px; color: var(--gv-gold-strong); }
.optimal-review-row span { font-size: clamp(13px,3.7vw,14.5px); font-weight: 600; }
.optimal-review-row small { font-size: clamp(11px,3.2vw,12.5px); color: var(--gv-muted); }
/* Đẩy nút nhắc ôn xuống đáy màn hình. .review-home cao tối thiểu bằng vùng nhìn
   thấy (trừ header và bottom-nav) rồi dùng margin-top:auto để nút rơi xuống
   cuối; margin-top tối thiểu 18px giữ đúng khoảng cách bằng khoảng từ thẻ biểu
   đồ xuống nút hành động khi nội dung dài hơn màn hình. */
.review-home {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - var(--gv-header-h) - 70px - env(safe-area-inset-bottom, 0px));
}
/* Khoảng cách tối thiểu 18px đặt ở phần tử phía trên (bằng đúng khoảng từ thẻ
   biểu đồ xuống nút hành động), còn margin-top:auto đẩy nốt phần trống còn lại
   xuống dưới. Không dùng max(18px, auto) — auto không hợp lệ trong max(). */
.review-home>.review-action-row,
.review-home>.review-start,
.review-home>.review-empty { margin-bottom: 18px; }
.review-home>.review-push { margin-top: auto; }
@media (prefers-reduced-motion: reduce) {
  .optimal-review-overlay { animation: none; }
}
.review-chart-title,
.review-word-row b,
.review-feedback-word,
.review-calendar-card h2,
.review-calendar-head b,
.review-streak-stat-block,
.review-done h1,
.review-session-bar { color: var(--gv-text); }
.review-chart-title small,
.review-push small,
.review-word-row p,
.review-word-row small,
.review-prompt,
.review-count,
.review-streak-message { color: var(--gv-muted); }
.review-word,
.review-letter,
.review-full-input,
.review-letter-input,
.review-blank,
.review-answer-target,
.review-chart-col>b { color: var(--gv-primary-ink); }
.review-blank {
  display:inline-block;
  width:clamp(64px,20vw,88px);
  height:.9em;
  border-bottom:2px solid currentColor;
  vertical-align:.08em;
  letter-spacing:0
}
.review-full-input,
.review-letter-input { border-color: var(--gv-primary); }
.review-full-input.review-meaning-write-input {
  font-size: clamp(28px, 8vw, 34px);
  line-height: 1.25;
  padding-block: 12px;
}
.review-option.selected,
.review-chart-track,
.review-progress { background: var(--gv-raised); }
.review-progress i { background: var(--gv-primary); }
.review-topbar,
.review-session-head,
.review-streak-head {
  background: var(--gv-bg);
  border-color: var(--gv-border);
  color: var(--gv-text);
}
.review-calendar-head button,
.review-goal-calendar { background: var(--gv-raised); color: var(--gv-primary-ink); }
.review-calendar-day { color: var(--gv-text); }
.review-calendar-day.today:not(.learned) { box-shadow: inset 0 0 0 1px var(--gv-primary); }
.review-streak-goal-block .review-goal-progress { background: var(--gv-raised)!important; }
.review-streak-goal-block .review-goal-progress em { background: var(--gv-gold)!important; }
.review-streak-goal-block .review-goal-progress.has-progress em::after { background: var(--gv-gold-strong); }
.review-streak-record-block strong { color: var(--gv-primary); }
.notebook-tier-rookie { background: var(--gv-raised); color: var(--gv-muted); }
.notebook-tier-rookie .review-notebook-icon { background: var(--gv-primary-soft); color: var(--gv-primary-ink); }
/* Sổ tay Học sinh mới ở light mode dễ lẫn vào nền trang (--gv-bg #F6F7FB) vì
   --gv-raised chỉ tối hơn một chút. Dùng tông xám đậm hơn để thẻ tách hẳn ra. */
.notebook-tier-rookie { background: #DFE3EC; color: #4A5567; }
.notebook-tier-rookie .review-notebook-icon { background: #C9D0DE; color: #46536B; }
.notebook-tier-rookie small,
.notebook-tier-rookie .review-notebook-copy em,
.notebook-tier-rookie i { color: #5C6879; }
.notebook-tier-diligent { background: var(--gv-surface); border-color: var(--gv-border); color: var(--gv-text); }
.notebook-tier-diligent .review-notebook-icon { background: var(--gv-primary-soft); color: var(--gv-primary-ink); }

/* Hồ sơ */
.profile-ios-group,
.profile-auth-form input,
.profile-settings-logout,
.profile-route-head button,
.profile-notification-item,
.notebook-share-sheet {
  background: var(--gv-surface);
  color: var(--gv-text);
  border-color: var(--gv-border);
  box-shadow: var(--gv-shadow);
}
.profile-auth-mark { background: linear-gradient(145deg,var(--gv-primary),var(--gv-primary-strong)); color: var(--gv-gold); }
.profile-identity h1,
.profile-auth h1,
.profile-password-copy h1,
.profile-setting-row,
.profile-route-head,
.profile-edit-form input,
.notebook-share-head { color: var(--gv-text); }
.profile-phone-line,
.profile-identity p,
.profile-setting-row small,
.profile-edit-form label>span,
.profile-credit { color: var(--gv-muted); }
.profile-setting-row,
.profile-edit-form label { border-color: var(--gv-border); }
.profile-route-head button,
.profile-auth-switch,
.profile-credit a { color: var(--gv-primary-ink); }
.profile-theme-control { background: var(--gv-raised); }
.profile-theme-control button.active { background: var(--gv-surface); color: var(--gv-primary-ink); }

/* Chọn giọng đọc trong trang Hồ sơ. Nhãn bên trái, dropdown bên phải; dropdown
   co giãn bằng clamp() để không tràn trên iPhone nhỏ. */
.profile-voice-row { cursor: default; }
.profile-voice-select {
  flex: 0 0 auto;
  width: clamp(140px, 46vw, 210px);
  max-width: 60%;
  border: 1px solid var(--gv-border);
  border-radius: 10px;
  padding: 8px 30px 8px 11px;
  background: var(--gv-raised);
  color: var(--gv-primary-ink);
  font: 600 clamp(12px, 3.3vw, 13px) inherit;
  cursor: pointer;
  /* Bỏ giao diện mặc định của Safari iOS rồi tự vẽ mũi tên bằng SVG inline,
     nếu không dropdown sẽ hiện nền trắng chói trong dark mode. */
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a90a6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 15px;
}
.profile-voice-select:focus { outline: none; border-color: var(--gv-primary); }
.profile-voice-preview { cursor: pointer; }
.profile-voice-preview-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--gv-primary-soft);
  color: var(--gv-primary-ink);
  font-style: normal;
}
.profile-voice-preview-icon svg { width: 18px; height: 18px; }
html:not([data-theme="dark"]) .profile-voice-preview-icon {
  background: #dce3ff;
  color: #2639c4;
  box-shadow: inset 0 0 0 1px rgba(53,68,175,.18);
}
.profile-mail-hint { display:block; margin:-4px 0 12px; color:var(--gv-muted); font-size:12px; line-height:1.4; }

/* Ô đầu trang Xếp hạng khi chưa đăng nhập. */
.leaderboard-guest-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin-bottom: 14px;
  padding: 16px 18px;
  border: 1px dashed var(--gv-border);
  border-radius: 18px;
  background: var(--gv-surface);
  color: var(--gv-primary-ink);
  text-align: left;
  cursor: pointer;
}
.leaderboard-guest-cta span { display: grid; gap: 3px; min-width: 0; }
.leaderboard-guest-cta small { color: var(--gv-muted); font-size: 12px; }
.leaderboard-guest-cta strong { font: 650 clamp(14px, 3.8vw, 15px) inherit; }
.leaderboard-guest-cta i { color: var(--gv-faint); font-style: normal; font-size: 20px; }
.profile-auth-form input:focus { border-color: var(--gv-primary); box-shadow: 0 0 0 3px rgba(79,95,215,.15); }
.profile-auth-form > button,
.profile-edit-form>button,
.notebook-share-actions button.primary { background: var(--gv-primary); color: #fff; }
.notebook-share-head button,
.notebook-share-actions button:not(.primary) { background: var(--gv-raised); color: var(--gv-text); }

html[data-theme="dark"] .header,
html[data-theme="dark"] .search-box,
html[data-theme="dark"] .bottom-nav,
html[data-theme="dark"] .profile-notification-head { background: #151D2A; }
html[data-theme="dark"] .search-box { background: var(--gv-bg); }
html[data-theme="dark"] .search-input-wrap { background: var(--gv-surface); border-color: var(--gv-border); }
html[data-theme="dark"] .search-input { color: var(--gv-text); -webkit-text-fill-color: var(--gv-text); caret-color: var(--gv-primary-strong); }
html[data-theme="dark"] .search-btn { color: var(--gv-primary-ink); }
html[data-theme="dark"] .toggle-track { background: var(--gv-raised); border-color: var(--gv-border); }
html[data-theme="dark"] .toggle-indicator { background: #E9EDFF; }
html[data-theme="dark"] .toggle-option.active { color: #3544AF; }
html[data-theme="dark"] .topic-count,
html[data-theme="dark"] .word-pos-tag,
html[data-theme="dark"] .gt-history-tag,
html[data-theme="dark"] .ipa-accent-label,
html[data-theme="dark"] .word-ipa b,
html[data-theme="dark"] .gt-corner-btn,
html[data-theme="dark"] .speak-btn,
html[data-theme="dark"] .review-audio,
html[data-theme="dark"] .review-chosen-chunk,
html[data-theme="dark"] .review-scramble-answer span {
  background: var(--gv-primary-soft);
  color: var(--gv-primary-ink);
}
html[data-theme="dark"] .gt-translate-btn,
html[data-theme="dark"] .save-word-btn,
html[data-theme="dark"] .profile-auth-form > button,
html[data-theme="dark"] .profile-edit-form>button,
html[data-theme="dark"] .notebook-share-actions button.primary {
  background: var(--gv-primary);
  color: #fff;
}
html[data-theme="dark"] .review-option.selected {
  background: var(--gv-primary-soft);
  color: var(--gv-primary-ink);
  border-color: var(--gv-primary);
}
html[data-theme="dark"] .profile-theme-control { background: var(--gv-raised); }
html[data-theme="dark"] .profile-theme-control button.active {
  background: var(--gv-surface);
  color: var(--gv-primary-ink);
}
html[data-theme="dark"] .profile-language-control button.active { background: var(--gv-surface); color: var(--gv-primary-ink); }
html[data-theme="dark"] .notebook-tier-rookie { background: var(--gv-raised); color: var(--gv-muted); }
html[data-theme="dark"] .notebook-tier-rookie .review-notebook-icon { background: var(--gv-primary-soft); color: var(--gv-primary-ink); }

/* MINIMALIST COBALT — typography và chi tiết theo mẫu giao diện đã duyệt. */
body { font-weight: 400; }

/* Tiêu đề tab: màu mực đậm vừa phải, nét mảnh và icon cobalt. */
.header-logo {
  color: var(--gv-text)!important;
  font-size: 18px;
  font-weight: 500!important;
  letter-spacing: -.015em;
}
.header-logo span { color: var(--gv-primary)!important; }
.header-logo svg { width: 22px; height: 22px; stroke-width: 1.75; }

/* Chuông luôn hiện rõ trên header sáng lẫn tối. */
.profile-bell,
html[data-theme="dark"] .profile-bell {
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent!important;
  color: var(--gv-text)!important;
  box-shadow: none!important;
}
.profile-bell svg { width: 25px; height: 25px; }

/* Bottom navigation dùng các hàng cố định để icon và tên luôn bằng nhau. */
.bottom-nav {
  align-items: stretch;
  padding: 5px 0 max(env(safe-area-inset-bottom, 5px), 5px);
}
.bottom-nav .nav-btn {
  display: grid;
  grid-template-rows: 29px 16px;
  place-items: center;
  align-content: center;
  gap: 3px;
  min-width: 0;
  min-height: 56px;
  padding: 3px 2px;
  font-size: 11px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.bottom-nav .nav-icon {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  line-height: 1;
}
.bottom-nav .nav-icon svg { width: 25px; height: 25px; stroke-width: 1.75; }
.bottom-nav .nav-btn>span:last-child {
  display: block;
  height: 16px;
  line-height: 16px;
  white-space: nowrap;
}
.bottom-nav .nav-btn.active { font-weight: 500; }
.bottom-nav .nav-btn.active .nav-icon { transform: none; }
.bottom-nav .nav-btn:focus-visible {
  background: var(--gv-primary-soft);
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(79,95,215,.18);
}

/* Tiêu đề con và văn bản: giảm độ đậm, phân cấp bằng màu thay vì bold. */
.section-title,
.review-chart-title,
.review-streak-stat-block>b,
.review-calendar-card h2,
.review-push b,
.review-notebook-card b,
.review-level-card span,
.review-word-row b,
.review-topbar b,
.review-session-bar b,
.review-streak-head b,
.profile-route-head b,
.profile-setting-row b,
.profile-identity h1,
.profile-auth h1,
.profile-password-copy h1,
.gt-history-title,
.gt-lang-label,
.topic-name,
.word-en,
.meaning-text {
  font-weight: 500!important;
  letter-spacing: -.01em;
}
.review-chart-title,
.review-streak-stat-block>b,
.review-calendar-card h2,
.review-push b,
.gt-history-title,
.gt-lang-label {
  color: var(--gv-muted)!important;
}
.review-notebook-card small,
.review-chart-title small,
.review-push small,
.review-word-row p,
.review-word-row small,
.review-streak-message,
.review-streak-record-block>span,
.profile-setting-row small,
.profile-identity p,
.profile-phone-line,
.topic-vi,
.word-vi {
  font-weight: 400!important;
}
.review-start,
.review-check,
.review-next,
.review-done button,
.profile-auth-form > button,
.profile-edit-form>button,
.gt-translate-btn {
  font-weight: 500!important;
}

/* Mục tiêu tuần: giá trị đứng riêng, thanh cobalt mảnh và không có vạch cuối. */
.review-streak-goal-value {
  display: block;
  margin-top: 18px;
  color: var(--gv-text);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.02em;
}
.review-streak-goal-block .review-streak-goal-track { margin-top: 14px!important; }
.review-streak-goal-block .review-goal-progress {
  display: block!important;
  height: 7px!important;
  background: var(--gv-raised)!important;
  overflow: hidden;
}
.review-streak-goal-block .review-goal-progress em {
  background: var(--gv-primary)!important;
  border-radius: 999px!important;
}
.review-streak-goal-block .review-goal-progress b { display: none!important; }
.review-streak-goal-block .review-goal-progress em::after,
.review-streak-goal-block .review-goal-progress.has-progress em::after {
  content: none!important;
  display: none!important;
}
.review-streak-record-block>span {
  color: var(--gv-text);
  font-size: 16px;
  line-height: 1.2;
}
.review-streak-record-block strong {
  color: var(--gv-text)!important;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.02em;
}

/* Huyền thoại 1000 từ: stroke tím sáng nhìn rõ trên cả hai nền. */
.notebook-tier-legendary-lit {
  outline: 2px solid #D7BEFF!important;
  outline-offset: 3px!important;
  box-shadow: 0 0 0 1px rgba(239,229,255,.94), 0 8px 27px rgba(112,70,213,.36)!important;
}
html[data-theme="dark"] .notebook-tier-legendary-lit {
  outline-color: #E1CDFF!important;
  box-shadow: 0 0 0 1px rgba(199,167,255,.72), 0 9px 30px rgba(133,87,232,.42)!important;
}

/* Tinh chỉnh vòng hai: lịch thoáng theo chiều dọc và dùng cobalt cho ngày học. */
.review-calendar-grid {
  row-gap: 17px!important;
  column-gap: 5px!important;
}
.review-calendar-card { padding-bottom: 27px; }
.review-calendar-day { width: 32px; height: 32px; }
.review-calendar-day.learned,
html[data-theme="dark"] .review-calendar-day.learned {
  background: var(--gv-primary)!important;
  color: #fff!important;
  box-shadow: 0 2px 7px rgba(79,95,215,.24)!important;
}

/* Kính mờ đặt trực tiếp trên fixed layer. Không còn dùng sticky/pseudo layer,
   nên hiệu ứng này không đi qua compositor path đã gây mất bar khi bounce. */
.header,
.review-topbar,
.review-session-head,
.review-streak-head,
.profile-route-head,
.profile-notification-head,
.lm-header {
  background:var(--gv-bar-glass)!important;
  border-color:var(--gv-bar-border)!important;
  -webkit-backdrop-filter:saturate(155%) blur(18px);
  backdrop-filter:saturate(155%) blur(18px);
}

/* Back bar cố định ngay dưới header. Hai head của overlay phủ toàn màn hình
   dùng top:0 và scroller nội dung riêng. */
.review-topbar,
.review-streak-head,
.profile-route-head {
  /* -1px: env(safe-area-inset-top) có thể lẻ phần thập phân, để đúng bằng
     --gv-header-h sẽ hở một sợi tóc giữa hai thanh. */
  top: calc(var(--gv-header-h) - 1px);
}

/* Nút đóng thông báo dùng đúng surface như các nút đóng còn lại. */
.profile-notification-head button,
html[data-theme="dark"] .profile-notification-head button {
  background: var(--gv-surface)!important;
  color: var(--gv-primary-ink)!important;
  border: 1px solid var(--gv-border)!important;
  box-shadow: var(--gv-shadow)!important;
}

/* Stroke Huyền thoại sáng bám sát thẻ, mảnh và tím nhạt hơn. */
.notebook-tier-legendary-lit {
  outline: 1px solid rgba(222,201,255,.76)!important;
  outline-offset: 0!important;
  box-shadow: 0 8px 27px rgba(112,70,213,.32)!important;
}
html[data-theme="dark"] .notebook-tier-legendary-lit {
  outline-color: rgba(226,207,255,.70)!important;
  box-shadow: 0 9px 30px rgba(133,87,232,.36)!important;
}

/* Cỡ chữ thao tác: ưu tiên mức đọc rõ trên màn hình điện thoại. */
.review-home>.review-start,
.review-action-row>.review-start {
  padding: 13px 25px;
  font-size: 17px!important;
  line-height: 1.25;
}
.review-check,
.review-next,
.review-done button {
  min-height: 48px;
  font-size: 16px!important;
  line-height: 1.3;
}
.review-option {
  padding: 17px 18px;
  font-size: 16px!important;
  line-height: 1.45!important;
  font-weight: 500!important;
}
.review-chunk,
.review-chosen-chunk,
.review-audio { font-size: 15px!important; }
.review-prompt { font-size: 15px; }
.review-count { font-size: 13px; }
.review-locked-action,
.review-guest-note button { font-size: 16px!important; }
.review-push b { font-size: 16px; }
.review-push small { font-size: 13px; }

.profile-edit-form { padding: 8px 16px 15px; }
.profile-edit-form label { padding: 13px 0; gap: 7px; }
.profile-edit-form label>span {
  font-size: 13px!important;
  font-weight: 500!important;
}
.profile-edit-form input {
  min-height: 25px;
  font-size: 16px!important;
  font-weight: 500!important;
}
.profile-edit-form>button {
  min-height: 46px;
  padding: 12px 15px;
  font-size: 15px!important;
}
.profile-setting-row { font-size: 15px; }
.profile-setting-row b { font-size: 16px; }
.profile-setting-row small { font-size: 13px; line-height: 1.35; }
.profile-theme-control button { font-size: 13px; }
.profile-auth>p { font-size: 14px; }
.profile-auth-form > button { font-size: 16px!important; }
.profile-auth-switch { font-size: 14px; }
.profile-settings-logout {
  min-height: 50px;
  color: var(--gv-danger)!important;
  font-size: 16px!important;
  font-weight: 500!important;
}

.notebook-share-head b { font-size: 17px; font-weight: 500; }
.notebook-share-brand { font-size: 12px; }
.notebook-share-copy>small { font-size: 15px; }
.notebook-share-copy>p { font-size: 12px; }
.notebook-share-copy>em { font-size: 10px; }
.notebook-share-actions button {
  min-height: 48px;
  font-size: 16px!important;
  font-weight: 500!important;
}

.gt-history-title { font-size: 14px; }
.gt-history-tag { font-size: 11px; }
.gt-history-src { font-size: 15px; }
.gt-history-res { font-size: 14px; }
.gt-translate-btn { font-size: 16px; }

/* Swipe lịch sử dịch: transform GPU, quán tính ngắn và easing kiểu iOS. */
.gt-history-actions { width: 72px; }
.gt-history-content {
  transform: translate3d(0,0,0);
  width: calc(100% + 2px);
  margin-left: -1px;
  will-change: transform;
  backface-visibility: hidden;
}
.gt-history-delete {
  will-change: transform,opacity;
  -webkit-tap-highlight-color: transparent;
}

/* Quỹ đạo Học bá: 8 lớp đồng pha, tâm stroke trùng đúng tâm viền icon. */
.review-scholar-glow {
  fill: none;
  stroke: rgba(224,247,255,var(--opacity));
  stroke-width: var(--edge-width);
  stroke-dasharray: var(--dash) var(--gap);
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 2px rgba(163,222,255,.58));
  animation: reviewScholarFlow 8s linear infinite;
}
.review-scholar-dot {
  fill: none;
  stroke: #F8FDFF;
  stroke-width: 2.2;
  stroke-dasharray: .18 99.82;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 2px rgba(255,255,255,.98)) drop-shadow(0 0 6px rgba(160,220,255,.82));
  animation: reviewScholarDot 8s linear infinite;
}
@keyframes reviewScholarFlow {
  from { stroke-dashoffset: var(--start); }
  to { stroke-dashoffset: var(--end); }
}

/* Quỹ đạo Huyền thoại nằm ngay trên mép thẻ; stroke rực sáng dùng cùng mép đó. */
.review-legend-edge rect {
  x: 0!important;
  y: 0!important;
  width: 100%!important;
  height: 100%!important;
  rx: 20px!important;
}
.notebook-tier-legendary-lit,
html[data-theme="dark"] .notebook-tier-legendary-lit {
  outline: 0!important;
}
.notebook-tier-legendary-lit {
  box-shadow: 0 0 0 1px rgba(222,201,255,.72), 0 8px 27px rgba(112,70,213,.32)!important;
}
html[data-theme="dark"] .notebook-tier-legendary-lit {
  box-shadow: 0 0 0 1px rgba(226,207,255,.66), 0 9px 30px rgba(133,87,232,.36)!important;
}

/* Chuyển tháng đủ dài để nhận biết rõ hướng trượt. */
#reviewCalendarViewport { overflow: hidden; }
.review-calendar-enter-left {
  animation: reviewCalendarInLeftLong .46s cubic-bezier(.22,1,.36,1) both!important;
  pointer-events: none;
}
.review-calendar-enter-right {
  animation: reviewCalendarInRightLong .46s cubic-bezier(.22,1,.36,1) both!important;
  pointer-events: none;
}
@keyframes reviewCalendarInLeftLong {
  from { opacity: .18; transform: translate3d(-76px,0,0); }
  to { opacity: 1; transform: translate3d(0,0,0); }
}
@keyframes reviewCalendarInRightLong {
  from { opacity: .18; transform: translate3d(76px,0,0); }
  to { opacity: 1; transform: translate3d(0,0,0); }
}

/* Typography và control co giãn theo viewport nhưng vẫn giữ ngưỡng dễ đọc. */
.header-logo,
.review-topbar b,
.review-streak-head b,
.profile-route-head b {
  font-size: clamp(16px,4.4vw,18px)!important;
}
.review-notebook-card {
  padding: clamp(13px,4.2vw,17px);
  gap: clamp(10px,3.2vw,13px);
}
.review-notebook-card b,
.review-level-card span,
.profile-setting-row b,
.profile-language-picker b {
  font-size: clamp(14.5px,4.15vw,17px)!important;
}
.review-notebook-card small,
.review-notebook-copy em,
.profile-setting-row small {
  font-size: clamp(11px,3.25vw,13px)!important;
  overflow-wrap: anywhere;
}
.review-notebook-copy em { font-size:clamp(10px,3vw,11px)!important; white-space:nowrap; overflow-wrap:normal!important; }
.review-home>.review-start,
.review-action-row>.review-start,
.review-check,
.review-next,
.review-done button,
.notebook-share-actions button,
.profile-auth-form > button {
  font-size: clamp(15px,4.2vw,17px)!important;
  padding-inline: clamp(14px,5vw,25px);
}
.review-option,
.profile-edit-form input,
.profile-settings-logout,
.gt-translate-btn {
  font-size: clamp(14.5px,4.1vw,16px)!important;
}
.review-option {
  padding: clamp(14px,4.3vw,17px) clamp(14px,4.6vw,18px);
  overflow-wrap: anywhere;
}
.profile-edit-form label>span,
.profile-theme-control button,
.gt-history-title,
.gt-history-res {
  font-size: clamp(12px,3.45vw,14px)!important;
}
.notebook-share-card {
  padding: clamp(14px,4.8vw,19px) clamp(14px,5vw,20px);
  gap: clamp(7px,3vw,12px);
}
.notebook-share-head b { font-size: clamp(15px,4.3vw,17px); }
.notebook-share-copy>small { font-size: clamp(12px,3.8vw,15px); }
.notebook-share-copy>p { font-size: clamp(10.5px,3vw,12px); }
.notebook-share-brand { font-size: clamp(10px,3vw,12px); }
.bottom-nav .nav-btn { font-size: clamp(10px,2.9vw,11px); }

@media (max-width: 350px) {
  .review-streak-stat-row { grid-template-columns: minmax(0,1.2fr) minmax(92px,.8fr); margin-inline: 10px; }
  .review-calendar-card { margin-inline: 10px; padding-inline: 12px; }
  .profile-page,.profile-auth,.profile-settings-page,.profile-password-page { padding-inline: 12px; }
  .notebook-share-sheet { padding-inline: 12px; }
}

@media (max-height: 760px) {
  .profile-auth { padding-top: 8px; padding-bottom: 10px; }
  .profile-auth-mark { width: 56px; height: 56px; margin: 6px auto 8px; border-radius: 17px; font-size: 29px; }
  .profile-auth>p { margin: 5px auto 12px; line-height: 1.4; }
  .profile-auth-divider { margin: 9px auto; }
  .profile-auth-form { gap: 8px; }
  .profile-auth-form input { padding-block: 12px; }
  .profile-auth-form>button { padding: 12px; }
  .profile-auth-forgot { margin-top: 8px; }
  .profile-auth-switch { margin-top: 10px; }
  .profile-auth .profile-credit { margin-top: 10px; }
}

/* Năm tab chia đều và giữ nhãn vừa cả màn hình 320px. */
.bottom-nav { justify-content:stretch; padding-inline:clamp(2px,1.5vw,7px) }
.bottom-nav .nav-btn {
  min-width:0;
  padding-inline:clamp(1px,1.5vw,7px);
  white-space:nowrap;
}
.bottom-nav .nav-btn>span:last-child { font-size:clamp(9px,2.7vw,11px) }

/* Quỹ đạo SVG bắt đầu từ padding box của icon; kéo ngược đúng 1px để tâm
   stroke trùng tâm border-box ở cả cạnh phải và cạnh dưới. */
.review-notebook-icon>svg.review-scholar-edge {
  transform:translate3d(-1px,-1px,0)!important;
}

/* LEADERBOARD — tier trước, streak sau; bề mặt iOS tối giản. */
.leaderboard-page {
  min-height:calc(100dvh - 122px);
  padding:clamp(14px,4vw,19px) clamp(12px,4vw,18px) 28px;
  color:var(--gv-text);
}
.leaderboard-me {
  margin-top:14px;
  padding:clamp(14px,4vw,17px);
  display:grid;
  grid-template-columns:.72fr 1.25fr 1fr;
  gap:10px;
  border-radius:20px;
  color:#fff;
  background:linear-gradient(135deg,var(--gv-primary),#3148b8);
}
.leaderboard-me>span { min-width:0;display:grid;align-content:center;gap:4px }
.leaderboard-me small { color:rgba(255,255,255,.72);font-size:clamp(9px,2.65vw,11px);font-weight:500 }
.leaderboard-me strong { font-size:clamp(23px,7vw,30px);font-weight:500;letter-spacing:-.04em }
.leaderboard-me b { overflow:hidden;text-overflow:ellipsis;font-size:clamp(11px,3.25vw,14px);font-weight:550;line-height:1.35 }
.leaderboard-title { margin:22px 2px 10px;display:flex;align-items:baseline;justify-content:space-between;gap:12px }
.leaderboard-title-main { min-width:0;display:flex;align-items:center;gap:7px }
.leaderboard-title h2 { margin:0;font-size:clamp(17px,4.8vw,20px);font-weight:500;letter-spacing:-.02em }
.leaderboard-title small { color:var(--gv-muted);font-size:clamp(10px,3vw,12px) }
.leaderboard-info-wrap { position:relative;display:inline-grid;place-items:center }
.leaderboard-info-wrap>button {
  width:21px;
  height:21px;
  padding:0;
  border:1px solid var(--gv-border);
  border-radius:50%;
  background:var(--gv-surface);
  color:var(--gv-muted);
  font:600 12px/1 var(--gv-font);
  cursor:pointer;
}
.leaderboard-info-tooltip {
  position:absolute;
  z-index:12;
  top:29px;
  left:-82px;
  width:min(270px,calc(100vw - 44px));
  padding:11px 13px;
  border:1px solid var(--gv-border);
  border-radius:14px;
  background:var(--gv-surface);
  color:var(--gv-text);
  box-shadow:0 10px 28px rgba(30,40,72,.16);
  font-size:clamp(11px,3.2vw,13px);
  font-weight:400;
  line-height:1.5;
  animation:leaderboardTooltipIn var(--gv-motion) var(--gv-ease) both;
}
.leaderboard-info-tooltip[hidden] { display:none!important }
@keyframes leaderboardTooltipIn { from { opacity:0;transform:translateY(-5px) scale(.97) } to { opacity:1;transform:none } }
.leaderboard-list {
  overflow:hidden;
  border:1px solid var(--gv-border);
  border-radius:20px;
  background:var(--gv-surface);
}
.leaderboard-row {
  min-height:clamp(67px,19vw,76px);
  padding:10px clamp(10px,3.4vw,15px);
  display:grid;
  grid-template-columns:clamp(25px,7vw,31px) clamp(39px,11vw,45px) minmax(0,1fr) auto;
  align-items:center;
  gap:clamp(7px,2.5vw,11px);
  border-bottom:1px solid var(--gv-border);
}
.leaderboard-row:last-child { border-bottom:0 }
.leaderboard-row.is-current { background:var(--gv-primary-soft) }
.leaderboard-rank { text-align:center;color:var(--gv-muted);font-size:clamp(13px,3.8vw,16px);font-weight:550 }
.leaderboard-row.gold .leaderboard-rank { color:#d39912 }
.leaderboard-row.silver .leaderboard-rank { color:#8490a3 }
.leaderboard-row.bronze .leaderboard-rank { color:#b47445 }
.leaderboard-avatar {
  position:relative;
  width:clamp(39px,11vw,45px);
  height:clamp(39px,11vw,45px);
  border-radius:50%;
  background:var(--gv-primary-soft);
  color:var(--gv-primary);
  font-size:clamp(14px,4vw,17px);
  font-weight:600;
}
/* Vị trí/kích thước giờ đã xử lý ở rule dùng chung
   ".profile-avatar-img,.profile-avatar-fallback" (xem gần đầu file — inset:0
   khiến ảnh và chữ dự phòng đè khít lên nhau, không phụ thuộc cách trình
   duyệt tính chiều cao "auto" của grid track). Ở đây chỉ còn phần khác biệt
   riêng cho leaderboard: chữ cái dự phòng trong suốt để giữ màu nền theo
   tier ở rule bên dưới, thay vì màu gradient mặc định. */
span.leaderboard-row-avatar { background:transparent; color:inherit; font-size:inherit; font-weight:inherit; }
.leaderboard-row.tier-scholar .leaderboard-avatar { background:#e5f2ff;color:#1970cb }.leaderboard-row.tier-legendary .leaderboard-avatar,
.leaderboard-row.tier-legendary-lit .leaderboard-avatar { background:#efe8ff;color:#7449d0 }
.leaderboard-person { min-width:0;display:grid;gap:4px }
.leaderboard-person b { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:clamp(13px,3.8vw,15px);font-weight:550 }
.leaderboard-person small { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--gv-muted);font-size:clamp(9.5px,2.8vw,11px) }
.leaderboard-streak { min-width:42px;display:grid;grid-template-columns:15px auto;align-items:center;justify-content:end;column-gap:3px;text-align:right;color:var(--gv-faint) }
.leaderboard-streak svg { width:15px;height:15px }
.leaderboard-streak b { font-size:clamp(13px,3.7vw,15px);font-weight:600 }
.leaderboard-streak small { grid-column:1/-1;color:var(--gv-muted);font-size:9px }
.leaderboard-locked,.leaderboard-error { min-height:calc(100dvh - 150px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center }
.leaderboard-lock-icon,.leaderboard-error>div { width:62px;height:62px;display:grid;place-items:center;border-radius:20px;background:var(--gv-primary-soft);color:var(--gv-primary) }
.leaderboard-lock-icon svg,.leaderboard-error svg { width:29px;height:29px }
.leaderboard-locked h1 { margin:18px 0 7px;font-size:clamp(19px,5.5vw,23px);font-weight:550 }
.leaderboard-locked p,.leaderboard-error p { max-width:330px;margin:0;color:var(--gv-muted);font-size:clamp(12px,3.5vw,14px);line-height:1.55 }
.leaderboard-locked button,.leaderboard-error button { margin-top:18px;border:0;border-radius:999px;padding:12px 21px;background:var(--gv-primary);color:#fff;font:inherit;font-size:clamp(14px,4vw,16px);font-weight:550 }
.leaderboard-locked-actions { display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:9px }
.leaderboard-locked-actions button.secondary { background:var(--gv-primary-soft);color:var(--gv-primary-ink) }
.leaderboard-error>b { margin-top:16px;font-size:17px;font-weight:550 }
.leaderboard-empty { padding:45px 20px;text-align:center;color:var(--gv-muted);font-size:14px }
.leaderboard-pagination { margin:14px auto 0;display:flex;align-items:center;justify-content:center;gap:14px }
.leaderboard-pagination button {
  width:42px;
  height:42px;
  padding:0;
  border:1px solid var(--gv-border);
  border-radius:50%;
  background:var(--gv-surface);
  color:var(--gv-primary-ink);
  font:400 29px/36px var(--gv-font);
  cursor:pointer;
  box-shadow:var(--gv-shadow);
}
.leaderboard-pagination button:disabled { opacity:.28;cursor:default;box-shadow:none }
.leaderboard-pagination span { min-width:38px;text-align:center;color:var(--gv-muted);font-size:clamp(12px,3.4vw,14px);font-weight:500 }
.leaderboard-page-next { animation:leaderboardPageNext var(--gv-motion) var(--gv-ease) both }
.leaderboard-page-prev { animation:leaderboardPagePrev var(--gv-motion) var(--gv-ease) both }
@keyframes leaderboardPageNext { from { opacity:0;transform:translateX(24px) } to { opacity:1;transform:none } }
@keyframes leaderboardPagePrev { from { opacity:0;transform:translateX(-24px) } to { opacity:1;transform:none } }

html[data-theme="dark"] .leaderboard-row.tier-scholar .leaderboard-avatar { background:rgba(43,134,224,.2);color:#9bcbff }
html[data-theme="dark"] .leaderboard-row.tier-legendary .leaderboard-avatar,
html[data-theme="dark"] .leaderboard-row.tier-legendary-lit .leaderboard-avatar { background:rgba(137,88,231,.2);color:#d7c1ff }

@media (max-width:350px) {
  .leaderboard-page { padding-inline:10px }
  .leaderboard-me { grid-template-columns:.65fr 1.2fr 1fr;padding-inline:12px;gap:7px }
  .leaderboard-row { padding-inline:8px }
}

/* Hồ sơ xếp hạng và popup người học dùng chung một hệ màu theo cấp Sổ tay. */
.tier-rookie { --leader-accent:#77869a;--leader-soft:rgba(119,134,154,.12) }
.tier-diligent { --leader-accent:#4f5fd7;--leader-soft:rgba(79,95,215,.12) }
.tier-bookworm { --leader-accent:#d49a16;--leader-soft:rgba(212,154,22,.14) }
.tier-master { --leader-accent:#c6404a;--leader-soft:rgba(198,64,74,.13) }
.tier-scholar { --leader-accent:#2486dc;--leader-soft:rgba(36,134,220,.13) }
.tier-legendary,.tier-legendary-lit { --leader-accent:#8a5be1;--leader-soft:rgba(138,91,225,.14) }

#profileRankSummary .leaderboard-me { margin:0 0 10px }
.profile-rank-loading { min-height:52px; display:grid; place-items:center; color:var(--gv-muted); font-size:13px }
.profile-rank-skeleton { min-height:78px; pointer-events:none }
.profile-rank-skeleton span { gap:8px }
.profile-rank-skeleton i {
  display:block;
  height:9px;
  width:72%;
  border-radius:99px;
  background:rgba(255,255,255,.2);
  animation:profileRankPulse 1.25s ease-in-out infinite alternate;
}
.profile-rank-skeleton i:last-child { width:92%;height:15px }
@keyframes profileRankPulse { to { opacity:.45 } }
@media (prefers-reduced-motion:reduce) { .profile-rank-skeleton i { animation:none } }
.leaderboard-featured { margin-top:14px }
.leaderboard-row {
  width:100%;
  border-top:0;
  border-left:0;
  border-right:0;
  background:transparent;
  color:var(--gv-text);
  font:inherit;
  text-align:left;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .18s ease,transform .16s ease;
}
.leaderboard-row:active { transform:scale(.985);background:var(--leader-soft) }
.leaderboard-row.is-current { background:var(--leader-soft) }

.leaderboard-row.gold,.leaderboard-person-card.gold { --rank-glow:211,153,18 }
.leaderboard-row.silver,.leaderboard-person-card.silver { --rank-glow:132,144,163 }
.leaderboard-row.bronze,.leaderboard-person-card.bronze { --rank-glow:180,116,69 }
.leaderboard-row:is(.gold,.silver,.bronze) .leaderboard-person b,
:is(.leaderboard-person-popup,.leaderboard-featured) .leaderboard-person-card:is(.gold,.silver,.bronze) .leaderboard-person-identity h2 {
  color:#fff!important;
  text-shadow:0 1px 1px rgba(0,0,0,.28),0 0 8px rgba(var(--rank-glow),.95),0 0 16px rgba(var(--rank-glow),.58)
}
.leaderboard-row.has-hot-streak .leaderboard-streak svg {
  color:#ff6b2f!important;
  stroke:#ff6b2f!important;
  filter:none;
  animation:none;
}
.leaderboard-row.has-hot-streak .leaderboard-streak svg path:first-child { fill:#ff6b2f;stroke:#ff6b2f }
.leaderboard-row.has-hot-streak .leaderboard-streak svg path:last-child { fill:#ffd064;stroke:#ffd064 }
.leaderboard-row.is-streak-champion .leaderboard-streak {
  color:#ff6b2f;
  text-shadow:0 0 9px rgba(255,102,42,.55);
}
.leaderboard-row.is-streak-champion .leaderboard-streak svg {
  color:#ff6b2f!important;
  stroke:#ff6b2f!important;
  filter:drop-shadow(0 0 3px rgba(255,113,48,.95)) drop-shadow(0 0 7px rgba(255,80,25,.6));
  animation:leaderboardFireGlow 2.8s ease-in-out infinite;
}
.leaderboard-row.is-streak-champion .leaderboard-streak svg path:first-child { fill:#ff6b2f;stroke:#ff6b2f }
.leaderboard-row.is-streak-champion .leaderboard-streak svg path:last-child { fill:#ffd064;stroke:#ffd064 }
@keyframes leaderboardFireGlow {
  0%,100% { transform:scale(1);filter:drop-shadow(0 0 3px rgba(255,113,48,.8)) drop-shadow(0 0 6px rgba(255,80,25,.45)) }
  50% { transform:scale(1.1);filter:drop-shadow(0 0 4px rgba(255,149,65,1)) drop-shadow(0 0 10px rgba(255,69,20,.75)) }
}

.leaderboard-person-card {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:clamp(15px,4.5vw,19px);
  border:1px solid var(--gv-border);
  border-color:color-mix(in srgb,var(--leader-accent) 24%,var(--gv-border));
  border-radius:24px;
  background:var(--gv-surface);
  color:var(--gv-text);
  box-shadow:0 12px 32px rgba(32,43,79,.10);
}
.leaderboard-person-card::before {
  content:'';
  position:absolute;
  z-index:-1;
  inset:0 0 auto;
  height:112px;
  background:linear-gradient(145deg,var(--leader-soft),transparent 78%);
  pointer-events:none;
}
.leaderboard-person-identity {
  display:grid;
  grid-template-columns:clamp(58px,17vw,72px) minmax(0,1fr);
  align-items:center;
  gap:clamp(12px,4vw,17px);
}
.leaderboard-person-avatar {
  /* BẮT BUỘC position:relative: ảnh/chữ dự phòng bên trong dùng
     position:absolute (rule dùng chung .profile-avatar-img,.profile-avatar-fallback)
     để đè khít lên nhau. Thiếu dòng này, chúng sẽ định vị theo ancestor có
     position gần nhất phía TRÊN — có thể là cả popup — bay lạc khỏi vòng
     tròn 58-72px này hoàn toàn chứ không phải chỉ lệch nhẹ. */
  position:relative;
  width:clamp(58px,17vw,72px);
  height:clamp(58px,17vw,72px);
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:50%;
  background:var(--leader-soft);
  color:var(--leader-accent);
  font-size:clamp(20px,6vw,26px);
  font-weight:550;
}
.leaderboard-person-avatar>span.leaderboard-detail-avatar {
  background:transparent;
  color:inherit;
  font-size:inherit;
  font-weight:inherit;
}
.leaderboard-person-avatar {
  box-shadow:0 0 0 2px var(--gv-surface),0 0 0 4px var(--leader-soft);
  box-shadow:0 0 0 2px var(--gv-surface),0 0 0 4px color-mix(in srgb,var(--leader-accent) 42%,transparent)
}
.leaderboard-person-avatar>* { width:100%;height:100%;object-fit:cover }
.leaderboard-person-identity small { color:var(--leader-accent);font-size:clamp(10px,3vw,12px);font-weight:550 }
.leaderboard-person-identity h2 { margin:4px 0 0;font-size:clamp(19px,5.6vw,23px);font-weight:550;letter-spacing:-.025em }
.leaderboard-person-identity .leaderboard-person-joined { display:block;margin-top:5px;color:var(--gv-muted)!important;font-size:clamp(11px,3.2vw,13px);font-weight:400 }
.leaderboard-person-stats {
  margin:17px 0 13px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}
.leaderboard-person-stats>span {
  min-width:0;
  padding:12px 13px;
  display:grid;
  gap:5px;
  border:1px solid var(--gv-border);
  border-radius:16px;
  background:var(--gv-surface);
  background:color-mix(in srgb,var(--gv-surface) 88%,var(--leader-soft));
}
.leaderboard-person-stats small { color:var(--gv-muted);font-size:clamp(10px,3vw,12px) }
.leaderboard-person-stats b { font-size:clamp(14px,4vw,16px);font-weight:550 }
.leaderboard-person-notebook .review-notebook-card { min-height:82px }
.leaderboard-level-breakdown {
  margin-top:10px;
  padding:5px 13px 11px;
  overflow:hidden;
  border:1px solid var(--gv-border);
  border-radius:17px;
  background:var(--gv-bg);
  animation:leaderboardLevelsIn var(--gv-motion) var(--gv-ease) both;
}
.leaderboard-level-breakdown[hidden] { display:none!important }
.leaderboard-level-breakdown>span { padding:10px 1px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--gv-border) }
.leaderboard-level-breakdown i { color:var(--gv-muted);font-style:normal;font-size:clamp(12px,3.5vw,14px) }
.leaderboard-level-breakdown b { font-size:clamp(12px,3.5vw,14px);font-weight:550 }
.leaderboard-level-breakdown>small { display:block;padding-top:10px;color:var(--gv-faint);font-size:clamp(9.5px,2.8vw,11px);line-height:1.45 }
@keyframes leaderboardLevelsIn { from { opacity:0;transform:translateY(-8px) } to { opacity:1;transform:none } }

.leaderboard-person-overlay {
  position:fixed;
  z-index:6200;
  inset:0;
  padding:max(env(safe-area-inset-top),14px) 14px max(env(safe-area-inset-bottom),14px);
  display:flex;
  align-items:center;
  justify-content:center;
  /* Cùng công thức kính mờ với các thanh dính, chỉ khác tông tối để làm nổi
     popup. Phần nền chứa thông tin bên trong (.leaderboard-person-popup) cố
     tình KHÔNG mờ để chữ luôn sắc nét. */
  background:rgba(13,20,38,.38);
  backdrop-filter:saturate(145%) blur(18px);
  -webkit-backdrop-filter:saturate(145%) blur(18px);
}
.leaderboard-person-popup {
  width:min(100%,430px);
  max-height:calc(100dvh - 28px);
  overflow:auto;
  padding:10px;
  border:1px solid var(--gv-border);
  border-color:color-mix(in srgb,var(--leader-accent) 26%,var(--gv-border));
  border-radius:28px;
  background:var(--gv-bg);
  box-shadow:0 24px 70px rgba(8,14,31,.26);
}
.leaderboard-person-popup-head {
  height:48px;
  display:grid;
  grid-template-columns:42px 1fr 42px;
  align-items:center;
  text-align:center;
}
.leaderboard-person-popup-head button {
  width:38px;
  height:38px;
  border:1px solid var(--gv-border);
  border-radius:12px;
  background:var(--gv-surface);
  color:var(--gv-primary-ink);
  font:400 29px/1 var(--gv-font);
  cursor:pointer;
}
.leaderboard-person-popup-head b { font-size:clamp(15px,4.3vw,17px);font-weight:550 }

html[data-theme="dark"] .leaderboard-person-card,
html[data-theme="dark"] .leaderboard-person-popup { box-shadow:0 18px 45px rgba(0,0,0,.28) }
@media (prefers-reduced-motion:reduce) {
  .leaderboard-row.is-streak-champion .leaderboard-streak svg { animation:none!important }
}

/* Safari iOS: toàn bộ thanh điều hướng dùng fixed viewport, không còn đi qua
  pipeline sticky khi document rubber-band. Document vẫn là vùng cuộn chính. */
.review-topbar,
.review-streak-head,
.profile-route-head,
.lm-header {
  position:fixed!important;
  top:calc(var(--gv-header-h) - 1px);
  left:0;
  right:0;
  width:100%;
  max-width:480px;
  height:var(--gv-route-h);
  margin:0 auto!important;
  z-index:50;
}
.review-notebook-page,
.review-streak-page {
  padding-top:var(--gv-route-h);
}

/* Hai màn phủ toàn màn hình giữ head cố định và chỉ cuộn phần nội dung. */
.review-session {
  padding-top:var(--gv-review-head-h)!important;
  display:flex;
  flex-direction:column;
  overflow:hidden!important;
}
.review-session-head {
  position:fixed!important;
  top:0;
  left:0;
  right:0;
  width:100%;
  max-width:480px;
  height:var(--gv-review-head-h);
  margin:0 auto;
  padding-top:env(safe-area-inset-top,0px);
  border-bottom:0!important;
  box-shadow:inset 0 -1px rgba(210,217,229,.70);
  z-index:10000;
}
.review-session-bar {
  height:var(--gv-route-h);
  padding:7px 13px;
}
.review-question-stage {
  flex:1;
  min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:none;
}

/* ── Chuyển cảnh fade-slide ───────────────────────────────────────────────
   Ràng buộc gốc: trên WebKit, `position: fixed` nằm dưới một ancestor CÓ
   transform sẽ tụt xuống hành xử như `absolute`. Các back bar (.review-topbar,
   .profile-route-head, .lm-header, .review-streak-head) đều fixed VÀ nằm bên
   trong khối nội dung, nên animate transform lên #main / .lm-topics từng làm
   thanh trên biến mất, lệch hoặc rung khi overscroll. Bản vá trước xử lý bằng
   cách bỏ hẳn transform, đổi lại mất luôn hiệu ứng slide.
   Cách làm ở đây: KHÔNG transform khối cha. Chỉ transform các con của nó, và
   loại trừ đúng những thanh fixed. Các con cùng chạy một animation giống hệt
   nhau nên nhìn vẫn như cả trang trượt, còn thanh fixed thì không có ancestor
   transform nào phía trên. */
/* Keyframe kết thúc bằng `transform: none`, KHÔNG phải translate3d(0,0,0).
   Hai giá trị này nhìn giống nhau nhưng khác hẳn về hệ quả: animation dùng
   fill-mode `both` giữ nguyên khung hình cuối sau khi chạy xong, và một
   transform dù bằng 0 vẫn biến phần tử thành containing block, khiến mọi
   `position: fixed` bên trong tụt xuống hành xử như `absolute` — thanh cố định
   trôi theo nội dung khi cuộn. `none` thì không tạo containing block. */
@keyframes gvRouteInForward {
  from { opacity: 0; transform: translate3d(var(--gv-slide), 0, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes gvRouteInBack {
  from { opacity: 0; transform: translate3d(calc(var(--gv-slide) * -1), 0, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes gvRouteOutForward { to { opacity: 0; transform: translate3d(calc(var(--gv-slide) * -1), 0, 0); } }
@keyframes gvRouteOutBack { to { opacity: 0; transform: translate3d(var(--gv-slide), 0, 0); } }
@keyframes gvFadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes gvFadeOut { to { opacity: 0 } }
@keyframes gvZoomIn { from { opacity: 0; transform: scale(.94) } to { opacity: 1; transform: none } }
@keyframes gvZoomOut { to { opacity: 0; transform: scale(.97) } }

/* Danh sách loại trừ: đúng bốn thanh fixed của app. */
#main.profile-route-in-forward > * > *:not(.profile-route-head),
#main.review-route-in-forward > * > *:not(.review-topbar):not(.review-streak-head) {
  animation: gvRouteInForward var(--gv-motion) var(--gv-ease) both;
}
#main.profile-route-in-back > * > *:not(.profile-route-head),
#main.review-route-in-back > * > *:not(.review-topbar):not(.review-streak-head) {
  animation: gvRouteInBack var(--gv-motion) var(--gv-ease) both;
}
#main.review-route-out-forward > * > *:not(.review-topbar):not(.review-streak-head) {
  animation: gvRouteOutForward var(--gv-motion) var(--gv-ease) both;
}
#main.review-route-out-back > * > *:not(.review-topbar):not(.review-streak-head) {
  animation: gvRouteOutBack var(--gv-motion) var(--gv-ease) both;
}
/* Thanh fixed chỉ fade, tuyệt đối không transform. */
#main.profile-route-in-forward .profile-route-head,
#main.profile-route-in-back .profile-route-head,
#main.review-route-in-forward .review-topbar,
#main.review-route-in-back .review-topbar,
#main.review-route-in-forward .review-streak-head,
#main.review-route-in-back .review-streak-head {
  animation: gvFadeIn var(--gv-motion) var(--gv-ease) both;
}
#main.review-route-out-forward,
#main.review-route-out-back { pointer-events: none; }

/* Trang streak chỉ fade, không trượt/zoom. Trước đây nó tự chạy animation ngay
   lúc render, rồi reviewNavigate mới gắn class route vào #main -> animation thứ
   hai khởi động lại từ opacity 0, tạo ra cú "nháy". Giờ chỉ còn MỘT nguồn duy
   nhất là route transition, và với riêng trang này thì đổi sang fade.
   Cùng specificity (1 id + 3 class) với rule route chung nên phải đứng SAU. */
#main.review-route-in-forward > .review-streak-page > *:not(.review-streak-head),
#main.review-route-in-back > .review-streak-page > *:not(.review-streak-head) {
  animation: gvFadeIn var(--gv-motion) var(--gv-ease) both;
}
#main.review-zoom-out > * > *:not(.review-streak-head) {
  animation: gvFadeOut var(--gv-motion) var(--gv-ease) both;
}
#main.review-zoom-out { pointer-events: none; }

/* Bài học: lessons.js gắn class thẳng lên .lm-topics nên chỉ cần loại trừ
   .lm-header ở một cấp. Riêng .fc (flashcard) tự nó đã là position:fixed và
   không chứa thanh fixed nào lúc mount, nên animate nguyên khối — animate từng
   con sẽ khiến thanh tiến độ trượt tách rời khỏi nội dung thẻ. */
.lm-screen-enter:not(.fc) > *:not(.lm-header),
.lm-screen-enter.fc {
  animation: gvRouteInForward var(--gv-motion) var(--gv-ease) both;
}
.lm-screen-back:not(.fc) > *:not(.lm-header),
.lm-screen-back.fc {
  animation: gvRouteInBack var(--gv-motion) var(--gv-ease) both;
}
.lm-screen-enter > .lm-header,
.lm-screen-back > .lm-header { animation: gvFadeIn var(--gv-motion) var(--gv-ease) both; }

/* Popup: backdrop fade, khối nội dung fade-zoom, cùng một nhịp với route. */
.optimal-review-overlay,
.notebook-share-overlay,
.profile-notifications,
.leaderboard-person-overlay { animation: gvFadeIn var(--gv-motion) var(--gv-ease) both; }
.optimal-review-overlay.closing,
.notebook-share-overlay.closing,
.profile-notifications.closing,
.leaderboard-person-overlay.closing { animation: gvFadeOut var(--gv-motion) var(--gv-ease) both; }
.optimal-review-sheet,
.notebook-share-sheet,
.leaderboard-person-popup,
.profile-notifications > *:not(.profile-notification-head) {
  animation: gvZoomIn var(--gv-motion) var(--gv-ease) both;
}
.optimal-review-overlay.closing .optimal-review-sheet,
.notebook-share-overlay.closing .notebook-share-sheet,
.leaderboard-person-overlay.closing .leaderboard-person-popup,
.profile-notifications.closing > *:not(.profile-notification-head) {
  animation: gvZoomOut var(--gv-motion) var(--gv-ease) both;
}

/* Slide 22px có thể đẩy nội dung tràn ngang trong lúc chạy. `clip` chặn được
   mà KHÔNG tạo scroll container như `hidden` — quan trọng vì document phải
   giữ vai trò vùng cuộn chính để Safari tự thu/mở address bar. */
#main { overflow-x: clip; }

@media (prefers-reduced-motion: reduce) {
  #main.profile-route-in-forward > * > *,
  #main.profile-route-in-back > * > *,
  #main.review-route-in-forward > * > *,
  #main.review-route-in-back > * > *,
  #main.review-route-out-forward > * > *,
  #main.review-route-out-back > * > *,
  #main.review-zoom-out > * > *,
  .review-streak-page > *,
  .lm-screen-enter > *,
  .lm-screen-back > * { animation: gvFadeIn var(--gv-motion) linear both; }
  .optimal-review-sheet,
  .notebook-share-sheet,
  .leaderboard-person-popup,
  .profile-notifications > * { animation: gvFadeIn var(--gv-motion) linear both; }
}

/* ── Nút Back / Đóng: cùng cỡ với nút share ở trang Sổ tay ────────────────
   Gom hết vào một chỗ ở cuối file để thắng mọi rule kích thước rải rác phía
   trên mà không cần !important. 38px/bo 12px khớp đúng .review-notebook-share
   — từng "to lên 44px" theo yêu cầu trước, giờ chỉnh mảnh lại theo yêu cầu
   mới, dùng luôn nút share làm chuẩn tham chiếu duy nhất thay vì tự chọn số. */
.review-back,
.review-session-bar button,
.review-streak-head button,
.profile-route-head button,
.profile-notification-head button,
.leaderboard-person-popup-head button,
.optimal-review-head button,
.notebook-share-head button {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  font-size: 29px;
  font-weight: 400;
  line-height: 1;
}
/* Cột hai bên khớp lại 42px như thiết kế gốc — 48px chỉ cần khi nút 44px. */
.review-topbar,
.review-session-bar,
.review-streak-head,
.profile-route-head,
.profile-notification-head,
.leaderboard-person-popup-head,
.notebook-share-head { grid-template-columns: 42px 1fr 42px; }
/* Nút chuỗi ngày trong thanh phiên ôn không phải nút Back — giữ nguyên cỡ cũ. */
.review-session-bar .review-streak-button { width: auto; height: 38px; font-size: inherit; }

/* ── NOTIFICATION CENTER ────────────────────────────────────────────────
   Danh sách phải dồn từ trên xuống. `display:grid` cũ kéo giãn implicit rows
   để lấp đầy chiều cao màn hình, khiến vài thông báo nằm cách nhau rất xa. */
.profile-notification-list {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  padding: 12px 13px max(env(safe-area-inset-bottom,24px),24px);
}
.profile-notification-group {
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid var(--gv-border);
  border-radius: 16px;
  background: var(--gv-surface);
  box-shadow: 0 3px 12px rgba(31,45,85,.055);
}
.profile-notification-row {
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
  touch-action: pan-y;
  border-bottom: 1px solid var(--gv-border);
  background: var(--gv-surface);
}
.profile-notification-row:last-child { border-bottom: 0; }
.profile-notification-actions {
  position: absolute;
  inset: 0 0 0 auto;
  z-index: 1;
  width: 72px;
  display: grid;
  place-items: center;
  background: #ef4b43;
}
.profile-notification-delete {
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transform: translate3d(8px,0,0) scale(.88);
  opacity: .45;
}
.profile-notification-delete svg { width: 21px; height: 21px; }
.profile-notification-item,
html[data-theme="dark"] .profile-notification-item {
  position: relative;
  z-index: 2;
  width: calc(100% + 2px);
  margin-left: -1px;
  min-height: 0;
  border: 0;
  border-radius: 0;
  padding: 12px 42px 12px 14px;
  display: grid;
  gap: 3px;
  text-align: left;
  font: inherit;
  cursor: pointer;
  background: var(--gv-surface);
  color: var(--gv-text);
  box-shadow: none;
}
.profile-notification-item b { font-size: 14px; line-height: 1.35; }
.profile-notification-item span { font-size: 13px; line-height: 1.4; }
.profile-notification-item small { margin-top: 2px; font-size: 10.5px; }
.profile-notification-row.is-unread .profile-notification-item {
  background: color-mix(in srgb, var(--gv-primary-soft) 58%, var(--gv-surface));
}
.profile-notification-row.is-unread .profile-notification-item::after {
  content: '';
  position: absolute;
  top: 17px;
  right: 15px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gv-primary);
}
.profile-notification-row.is-unread .profile-notification-item b {
  color: var(--gv-primary-ink);
  font-weight: 750;
}
.profile-notification-row.is-unread .profile-notification-item span { color: var(--gv-text); }
.profile-notification-row.is-read .profile-notification-item {
  background: color-mix(in srgb, var(--gv-surface) 88%, var(--gv-bg));
  border-color: color-mix(in srgb, var(--gv-border) 70%, transparent);
  box-shadow: none;
}
.profile-notification-row.is-read .profile-notification-item b { color: var(--gv-muted); font-weight: 550; }
.profile-notification-row.is-read .profile-notification-item span,
.profile-notification-row.is-read .profile-notification-item small { color: var(--gv-muted); }

.profile-notification-empty {
  flex: 1;
  min-height: 320px;
  padding: 24px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 15px;
  color: var(--gv-muted);
  text-align: center;
}
.profile-notification-empty b { font-size: 15px; font-weight: 550; }
.profile-notification-empty-icon {
  width: 86px;
  height: 86px;
  border-radius: 28px;
  display: grid;
  place-items: center;
  background: var(--gv-primary-soft);
  color: var(--gv-primary);
}
.profile-notification-empty-icon svg { width: 44px; height: 44px; }

/* Có lịch sử thì chuông đặc; badge chỉ đếm những mục chưa đọc. */
.profile-bell.has-notifications,
html[data-theme="dark"] .profile-bell.has-notifications { color: var(--gv-primary)!important; }
.profile-bell.has-notifications .profile-bell-body { fill: currentColor; stroke-width: 1.35; }
.profile-bell.has-unread { filter: drop-shadow(0 2px 5px rgba(79,95,215,.22)); }
.profile-bell #profileBellBadge {
  display: flex;
  align-items: center;
  justify-content: center;
  right: -4px;
  top: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: #ef4b43;
  color: #fff;
  border: 2px solid var(--gv-bg);
  font-size: 9.5px;
  font-weight: 750;
  line-height: 1;
}
.profile-bell #profileBellBadge[hidden] { display: none; }

.profile-notification-head .profile-notification-clear {
  color: var(--gv-danger);
  font-size: 0;
}
.profile-notification-clear svg { width: 18px; height: 18px; }
.profile-notification-clear[hidden] { visibility: hidden; }

/* Banner riêng khi push đến lúc app đang ở foreground. */
.in-app-notification {
  position: fixed;
  z-index: 12000;
  top: max(calc(env(safe-area-inset-top,0px) + 10px),10px);
  left: 50%;
  width: min(calc(100% - 24px),456px);
  margin: 0;
  border: 1px solid color-mix(in srgb,var(--gv-primary) 24%,var(--gv-border));
  border-radius: 17px;
  padding: 11px 13px;
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  gap: 10px;
  background: color-mix(in srgb,var(--gv-surface) 94%,var(--gv-primary-soft));
  color: var(--gv-text);
  box-shadow: 0 12px 34px rgba(30,42,75,.20);
  text-align: left;
  font: inherit;
  cursor: pointer;
  animation: inAppNotificationIn .3s var(--gv-ease) both;
}
.in-app-notification.closing { animation: inAppNotificationOut .22s ease both; }
.in-app-notification > span:first-child {
  width: 36px;height:36px;border-radius:12px;display:grid;place-items:center;
  background:var(--gv-primary-soft);color:var(--gv-primary);
}
.in-app-notification svg { width: 20px; height: 20px; }
.in-app-notification > span:last-child { min-width:0;display:grid;gap:3px; }
.in-app-notification b { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:700; }
.in-app-notification small { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--gv-muted);font-size:12px; }
@keyframes inAppNotificationIn {
  from { opacity:0;transform:translate(-50%,-18px); }
  to { opacity:1;transform:translate(-50%,0); }
}
@keyframes inAppNotificationOut { to { opacity:0;transform:translate(-50%,-14px); } }

/* Mở chuông: fade + trượt nhẹ từ trên xuống, không dùng zoom của popup. */
@keyframes gvNotificationSlideDown {
  from { opacity: 0; transform: translate3d(0,-18px,0); }
  to { opacity: 1; transform: translate3d(0,0,0); }
}
@keyframes gvNotificationSlideUp {
  from { opacity: 1; transform: translate3d(0,0,0); }
  to { opacity: 0; transform: translate3d(0,-14px,0); }
}
.profile-notifications { animation: gvNotificationSlideDown var(--gv-motion) var(--gv-ease) both; }
.profile-notifications.closing { animation: gvNotificationSlideUp var(--gv-motion) var(--gv-ease) both; }
.profile-notifications:not(.closing) > .profile-notification-list,
.profile-notifications.closing > .profile-notification-list { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .profile-notifications,
  .profile-notifications.closing { animation: gvFadeIn var(--gv-motion) linear both; }
}