/* Bảng màu "thiền" tông ấm — đổi từ xanh lá sáng sang vàng đất/hổ phách
   quanh #c98a32 (theo yêu cầu chủ dự án, thay cho tông xanh lá quá sáng
   trước đây). Toàn bộ site chỉ cần đổi các biến này + vài chỗ hardcode
   hex/rgba tương ứng (dot 1/2/3, chart.js, badge...) — xem CLAUDE.md. */
:root {
    --color-bg: #f7f1e6;
    --color-card: #fffdf8;
    --color-border: #e6d8bd;
    --color-text: #2e2517;
    --color-text-muted: #8a7a5c;
    --color-accent: #c98a32;
    --color-accent-dark: #a06f26;
    --color-danger: #b3261e;
    --color-danger-bg: #fbeee9;
    --radius: 14px;
    --radius-sm: 8px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--color-bg);
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--color-accent-dark); }

.container {
    max-width: 480px;
    margin: 0 auto;
    padding: 24px 16px;
}

.card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 28px 24px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.card h1, .card h2 {
    margin-top: 0;
    text-align: center;
}

.field {
    margin-bottom: 16px;
}

.field label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--color-text-muted);
}

.field input,
.field textarea {
    width: 100%;
    padding: 12px 14px;
    font-size: 16px;
    font-family: inherit;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-card);
}

.field textarea { resize: vertical; }

.field input:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(201, 138, 50, 0.15);
}

.btn {
    display: block;
    width: 100%;
    padding: 14px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.02em;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--color-accent);
    color: #fff;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
}

.btn:hover { background: var(--color-accent-dark); }

.btn-secondary {
    background: transparent;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
}

.btn-secondary:hover { background: #f0e6d2; }

.alert {
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    margin-bottom: 16px;
}

.alert-error {
    background: var(--color-danger-bg);
    color: var(--color-danger);
    border: 1px solid #e8c2ba;
}

.stack { display: flex; flex-direction: column; gap: 12px; }

.text-center { text-align: center; }
.text-muted { color: var(--color-text-muted); font-size: 14px; }

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: var(--color-card);
    border-bottom: 1px solid var(--color-border);
}

.topbar strong { font-size: 15px; }

.badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: #f3e6c9;
    color: var(--color-accent-dark);
}

.badge-gray { background: #f0e6d2; color: var(--color-text-muted); }
.badge-orange { background: #f6ddc6; color: #9a4a1a; }

.admin-nav {
    display: flex;
    gap: 4px;
    padding: 10px 16px;
    background: var(--color-card);
    border-bottom: 1px solid var(--color-border);
    overflow-x: auto;
}

.admin-nav a {
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-decoration: none;
    white-space: nowrap;
}

.admin-nav a:hover { background: #f0e6d2; }

.wide-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 24px 16px;
}

/* Modifier riêng cho vài trang quản trị cần full chiều rộng màn hình
   (bảng nhiều cột) — không đổi .wide-container gốc vì nhiều trang khác
   (report, /app, lead...) vẫn cần giới hạn 1000px để dễ đọc. */
.wide-container.full-width {
    max-width: 100%;
}

.table-wrap {
    overflow-x: auto;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

table.data {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    min-width: 640px;
}

table.data th, table.data td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}

table.data th {
    color: var(--color-text-muted);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

table.data tr:last-child td { border-bottom: none; }

/* Cột đầu (THÀNH VIÊN) fix cứng khi cuộn ngang — bảng /app có nhiều cột
   ngày nên cần cuộn ngang trên cả desktop lẫn mobile, giữ cột tên lại
   giúp dễ theo dõi đang xem của ai. Cần background tường minh (không kế
   thừa được) để không lộ nội dung cuộn phía dưới khi đè lên. */
.gd-sticky-table th:first-child,
.gd-sticky-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--color-card);
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.06);
}

/* Highlight tên thành viên đang trong khóa thiền dài ngày (retreat_start_date/
   retreat_end_date bao trọn hôm nay) trên /app — màu teal để phân biệt với
   .gd-self-highlight (vàng đất) bên dưới. Khai báo TRƯỚC gd-self-highlight
   trong file để nếu 1 người vừa là chính mình vừa đang trong khóa thiền,
   gd-self-highlight (khai báo sau, cùng độ ưu tiên CSS) thắng — chỉ 1 style
   thắng thay vì cố gộp 2 box-shadow phức tạp. */
.gd-sticky-table td.gd-retreat-highlight {
    background: rgba(47, 111, 98, 0.14);
    box-shadow: inset 3px 0 0 #2f6f62, 2px 0 4px rgba(0, 0, 0, 0.06);
}

/* Highlight dòng tên của thành viên đang xác thực mã (Session::member_id)
   trên /app — bảng gộp nhiều chục thành viên, tìm tên mình mất công. Selector
   cụ thể hơn .gd-sticky-table td:first-child để thắng background/box-shadow
   mặc định của cột sticky ở trên. */
.gd-sticky-table td.gd-self-highlight {
    background: rgba(201, 138, 50, 0.16);
    box-shadow: inset 3px 0 0 var(--color-accent), 2px 0 4px rgba(0, 0, 0, 0.06);
}

.avatar-sm {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--color-border);
    vertical-align: middle;
}

.btn-sm {
    display: inline-block;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-card);
    color: var(--color-text);
    cursor: pointer;
    text-decoration: none;
}

.btn-sm:hover { background: #f0e6d2; }
.btn-sm.danger { color: var(--color-danger); border-color: #e8c2ba; }
.btn-sm.primary { color: var(--color-accent-dark); border-color: #e3c583; }

.section-title {
    font-size: 16px;
    font-weight: 700;
    margin: 28px 0 12px;
}

.inline-form { display: inline-block; margin: 0 4px 0 0; }

.alert-success {
    background: #f7ecd4;
    color: var(--color-accent-dark);
    border: 1px solid #e3c583;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    margin-bottom: 16px;
}

/* --- Member App (/app) --- */

.code-input {
    width: 100%;
    padding: 18px;
    font-size: 32px;
    font-weight: 800;
    letter-spacing: 0.3em;
    text-align: center;
    text-transform: uppercase;
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-card);
}

.code-input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 4px rgba(201, 138, 50, 0.15);
}

.today-count {
    font-size: 56px;
    font-weight: 800;
    color: var(--color-accent-dark);
    text-align: center;
    margin: 8px 0;
    line-height: 1;
}

.btn-huge {
    display: block;
    width: 100%;
    padding: 20px;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.03em;
    border: none;
    border-radius: var(--radius);
    background: var(--color-accent);
    color: #fff;
    cursor: pointer;
    text-align: center;
}

.btn-huge:active { background: var(--color-accent-dark); }
.btn-huge:disabled { opacity: 0.6; cursor: not-allowed; }

.week-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    margin-top: 12px;
}

.week-day {
    text-align: center;
    font-size: 12px;
}

.week-day-label {
    color: var(--color-text-muted);
    font-weight: 600;
    margin-bottom: 6px;
}

.week-day.is-today .week-day-label { color: var(--color-accent-dark); }

.dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    border: 2px solid var(--color-border);
    background: var(--color-card);
    color: var(--color-text-muted);
}

/* Đổi từ bộ xanh lá/cam/tím (ảnh mẫu Phase 12) sang thang màu ấm cùng họ
   với --color-accent (#c98a32) theo yêu cầu chủ dự án (đổi theme "thiền"
   hơn) — dot-2 dùng đúng màu thương hiệu, dot-1 nhạt hơn, dot-3 đậm nhất
   (hổ phách -> đất nung), chấp nhận độ tương phản giữa 3 mức thấp hơn
   trước đây để đổi lấy giao diện đồng bộ tông ấm toàn site. */
.dot-1 { background: #f6ecd4; border-color: #e3c583; color: #b3812c; }
.dot-2 { background: #f0dcb0; border-color: #d9a955; color: #c98a32; }
.dot-3 { background: #e6c79a; border-color: #c2884a; color: #8a4a15; }

/* Dot cho phép bấm sửa (member tự sửa ngày trong tuần) — khác dot chỉ-xem
   ở dashboard nhóm công khai. */
.dot-editable {
    cursor: pointer;
    transition: transform 0.1s;
}
.dot-editable:hover { transform: scale(1.1); box-shadow: 0 0 0 3px rgba(201, 138, 50, 0.15); }
.dot-editable:active { transform: scale(0.95); }

/* Dot mở nhanh popup "Điểm danh cho tôi" trên bảng /app công khai — cho
   Lead đang đăng nhập hoặc member đã xác thực mã (khác dot-admin-editable
   ở trên: không sửa trực tiếp điểm danh của member khác, chỉ mở popup tự
   điểm danh của chính người bấm). */
.dot-checkin-trigger {
    cursor: pointer;
    transition: transform 0.1s;
}
.dot-checkin-trigger:hover { transform: scale(1.1); box-shadow: 0 0 0 3px rgba(201, 138, 50, 0.15); }
.dot-checkin-trigger:active { transform: scale(0.95); }

/* Dot sửa nhanh cho Super Admin trên /app — viền chấm gạch để phân biệt
   rõ với dot chỉ-xem thường, tránh bấm nhầm ngoài ý muốn. */
.dot-admin-editable {
    cursor: pointer;
    border-style: dashed !important;
    transition: transform 0.1s;
}
.dot-admin-editable:hover { transform: scale(1.15); box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.15); }
.dot-admin-editable:active { transform: scale(0.95); }

.week-day.is-today { background: #f7ecd4; border-radius: 10px; padding: 4px 0; }

/* --- Reports --- */

.kpi-card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 18px 20px;
}

.kpi-card .kpi-label {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}

.kpi-card .kpi-value {
    font-size: 32px;
    font-weight: 800;
    margin: 6px 0 0;
}

.kpi-card .kpi-sub {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--color-text-muted);
}

.tabs {
    display: inline-flex;
    gap: 4px;
    background: #f0e6d2;
    padding: 4px;
    border-radius: 999px;
}

.tabs a, .tab-btn {
    padding: 7px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    color: var(--color-text-muted);
    background: none;
    border: none;
    cursor: pointer;
}

.tabs a.active, .tab-btn.active {
    background: var(--color-card);
    color: var(--color-text);
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

.chart-card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 20px;
}

.chart-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

th.sortable a { color: inherit; text-decoration: none; }
th.sortable a:hover { text-decoration: underline; }

/* --- Group dashboard công khai (/app) — Phase 12 --- */

.gd-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 20px;
}

.gd-header h1 {
    margin: 0;
    font-size: 22px;
}

.gd-header .gd-subtitle {
    margin: 4px 0 0;
    color: var(--color-accent-dark);
    font-size: 14px;
}

.gd-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.gd-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
}

.gd-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background: var(--color-card);
    color: var(--color-text);
    text-decoration: none;
}

/* Chuỗi "10/8 – 16/8/2026" — mặc định flexbox cho phép item co lại dưới
   độ rộng nội dung (min-width:auto) khiến chữ bị ngắt dòng/mất số trên
   màn hình hẹp (bug thật đã gặp trên mobile). Ép không xuống dòng +
   không co lại để luôn đủ chỗ hiển thị trọn vẹn. */
.gd-nav span {
    white-space: nowrap;
    flex-shrink: 0;
}

.gd-nav a:hover { background: #f0e6d2; }

/* Màn hình hẹp (mobile): .tabs (Tuần/Tháng) và .gd-nav (← ngày →) vẫn đủ
   chỗ để browser xếp CÙNG 1 hàng thay vì tự xuống dòng (flex-wrap chỉ
   quyết định wrap dựa trên độ rộng TỰ NHIÊN của cả 2 item cộng lại, mà
   sau khi ép .gd-nav không co lại nữa thì độ rộng đó vẫn "vừa đủ lọt"
   trên nhiều máy — chỉ tràn ra ngoài màn hình thật khi test tay). Ép
   .gd-nav luôn chiếm TRỌN 1 hàng riêng (flex-basis:100%) để chắc chắn
   có đủ chiều rộng hiển thị mọi ngày, kể cả ngày 2 chữ số cả 2 đầu. */
@media (max-width: 640px) {
    .gd-controls {
        width: 100%;
    }
    .gd-nav {
        flex-basis: 100%;
        justify-content: space-between;
    }
}

/* 3 tab (Bảng chi tiết / Báo cáo nhóm / Leaderboard) — auto-fit để trên
   mobile tự xuống 1-2 cột thay vì bóp chữ tràn khỏi nút. */
.gd-action-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.gd-action-row a {
    display: block;
    text-align: center;
    padding: 14px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    text-decoration: none;
}

.gd-action-row .is-active {
    background: var(--color-accent);
    color: #fff;
}

.gd-action-row .is-inactive {
    background: var(--color-card);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

.gd-member-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 220px;
}

.gd-member-cell .avatar-sm { flex-shrink: 0; }

.gd-member-name { font-weight: 600; }
.gd-member-name-clickable { cursor: pointer; }
.gd-member-name-clickable:hover { color: var(--color-accent-dark); text-decoration: underline; }

.gd-streak-badge {
    display: inline-block;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-danger);
    white-space: nowrap;
}

.gd-checkin-cta {
    text-align: center;
    margin: 24px 0;
}

/* Nút nổi (FAB) "Điểm danh cho tôi" — luôn hiện góc trái dưới màn hình dù
   cuộn tới đâu, tiện bấm nhanh thay vì phải cuộn lên nút CTA chính. Nằm
   dưới modal-overlay (z-index 1000) nên tự bị che khi có modal đang mở,
   không cần thêm JS ẩn/hiện riêng. */
.fab-checkin {
    position: fixed;
    left: 20px;
    bottom: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: var(--color-accent);
    color: #fff;
    font-size: 24px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    z-index: 900;
    transition: transform 0.1s, background 0.15s;
}
.fab-checkin:hover { background: var(--color-accent-dark); }
.fab-checkin:active { transform: scale(0.93); }

/* --- Modal điểm danh trên /app (Phase 12 follow-up) --- */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(38, 28, 15, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 1000;
}

.modal-box {
    background: var(--color-card);
    border-radius: var(--radius);
    padding: 28px 24px;
    max-width: 420px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #f0e6d2;
    color: var(--color-text-muted);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.modal-close:hover { background: #e6d8bd; }

.avatar-clickable {
    cursor: pointer;
    transition: transform 0.1s;
}
.avatar-clickable:hover { transform: scale(1.1); box-shadow: 0 0 0 3px rgba(201, 138, 50, 0.2); }

.profile-field { margin-bottom: 12px; }
.profile-field .profile-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0 0 2px;
}
.profile-field .profile-value { margin: 0; font-size: 15px; }

.site-footer {
    text-align: center;
    padding: 28px 16px 20px;
    color: var(--color-text-muted);
    font-size: 12px;
}

/* ---------------------------------------------------------------------
   Trang /thien — đồng hồ thiền + heatmap nhịp thiền (thêm sau SPEC gốc).
   Vòng tròn tiến độ vẽ bằng SVG stroke-dashoffset (không cần thư viện),
   xoay -90deg để bắt đầu từ đỉnh đồng hồ.
   --------------------------------------------------------------------- */
.timer-wrap {
    position: relative;
    width: 220px;
    max-width: 100%;
    margin: 8px auto 20px;
    aspect-ratio: 1 / 1;
}

.timer-ring {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.timer-ring-bg,
.timer-ring-fg {
    fill: none;
    stroke-width: 10;
}

.timer-ring-bg { stroke: var(--color-border); }

.timer-ring-fg {
    stroke: var(--color-accent);
    stroke-linecap: round;
    transition: stroke-dashoffset 0.4s linear;
}

.timer-face {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.timer-value {
    font-size: 44px;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--color-accent-dark);
    font-variant-numeric: tabular-nums;
}

.timer-label { font-size: 13px; margin-top: 2px; }

/* Heatmap 60 ngày: 12 ô/hàng (5 hàng tròn), lấp đầy bề rộng card. */
.heatmap {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 5px;
    margin-bottom: 10px;
}

.heat-cell {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 4px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
}

/* Cùng thang màu ấm với .dot-1/2/3 để /thien và /app đọc ra cùng 1 ngôn ngữ màu. */
.heat-0 { background: #efe7d7; border-color: #e3d8c0; }
.heat-1 { background: #f0dcb0; border-color: #e3c583; }
.heat-2 { background: #dcae5c; border-color: #c98a32; }
.heat-3 { background: #a9651f; border-color: #8a4a15; }

.heatmap-legend {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    flex-wrap: wrap;
}

.heatmap-scale {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.heatmap-scale .heat-cell { width: 11px; height: 11px; aspect-ratio: auto; }

.history-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 14px;
    flex-wrap: wrap;
}

.history-row:last-child { border-bottom: none; }

/* Khối "đang thiền cùng" dưới đồng hồ ở /thien (avatar + họ tên những
   người đang ngồi thiền cùng lúc). Không có ai thì để mờ như chú thích
   bình thường, tránh làm người ngồi một mình thấy trống trải; có người
   thì đóng khung tông ấm cho nổi. */
.thien-presence {
    margin: 12px 0 0;
    text-align: center;
    font-size: 13px;
    color: var(--color-text-muted);
}

/* Dùng width:fit-content + margin auto để tự canh giữa. KHÔNG dùng
   display:inline-block — thẻ này là con khối của card căn lề trái,
   inline-block sẽ dạt sang trái thay vì vào giữa. */
.thien-presence.is-some {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 10px 14px;
    width: fit-content;
    max-width: 100%;
    margin: 12px auto 0;
}

.thien-presence-head {
    margin: 0;
    font-size: 13px;
    color: var(--color-accent-dark);
}

.thien-presence-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
}

/* Mỗi người là 1 "viên thuốc" avatar + tên. Padding trái nhỏ hơn phải vì
   avatar đã tự chiếm chỗ bên trái. */
.thien-presence-person {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 3px 10px 3px 3px;
    font-size: 12px;
    color: var(--color-text);
    max-width: 100%;
}

.thien-presence-person .avatar-sm {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

/* Tên dài (vd "Đặng Thị Ngọc Huyền") cắt bằng ... thay vì xuống dòng,
   để các viên thuốc cùng một chiều cao. */
.thien-presence-name {
    font-weight: 600;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.thien-presence-more {
    color: var(--color-text-muted);
    padding: 3px 10px;
    font-weight: 600;
}


/* Hai tông màu phân biệt tuần trong block "Lịch sử thiền" (cửa sổ 7 ngày
   trượt vắt qua 2 tuần lịch): dòng của TUẦN NÀY nổi bật bằng tông ấm của
   theme + thanh dọc bên trái, dòng của TUẦN TRƯỚC làm mờ đi. Dùng thanh dọc
   + độ đậm nhạt chứ không chỉ dựa vào màu, để người khó phân biệt màu vẫn
   đọc được ranh giới. */
.history-row.hist-now {
    border-left: 3px solid var(--color-accent);
    padding-left: 10px;
    color: var(--color-text);
}

.history-row.hist-now strong { color: var(--color-accent-dark); }

.history-row.hist-prev {
    border-left: 3px solid var(--color-border);
    padding-left: 10px;
    color: var(--color-text-muted);
}

.history-row.hist-prev strong { color: var(--color-text-muted); font-weight: 600; }

/* `.hist-time` thay cho `.text-muted` ở phần giờ/phút: để dòng tuần trước mờ
   đều cả dòng, còn dòng tuần này vẫn giữ phần giờ nhạt hơn tên ngày. */
.history-row .hist-time { color: var(--color-text-muted); }

.hist-legend {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin: 0 0 10px;
    font-size: 12px;
}

.hist-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.hist-legend-item.hist-now { color: var(--color-accent-dark); }
.hist-legend-item.hist-prev { color: var(--color-text-muted); }

.hist-dot {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: var(--color-border);
}

.hist-legend-item.hist-now .hist-dot { background: var(--color-accent); }

/* Thanh chuyển tuần của block "Lịch sử thiền" ở /thien. */
.history-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.history-week-label {
    font-weight: 700;
    font-size: 14px;
    text-align: center;
    flex: 1;
    white-space: nowrap;
}


/* Lưới 1 năm kiểu contribution graph: mỗi .heatmap-year-week là 1 CỘT
   gồm 7 ô (T2 -> CN). Ô cố định 11px (không co giãn) để không bị bóp
   méo, cả khối cuộn ngang khi màn hình hẹp. */
.heatmap-year-scroll {
    overflow-x: auto;
    padding-bottom: 4px;
    margin-bottom: 8px;
}

.heatmap-year {
    display: flex;
    gap: 3px;
    width: max-content;
}

.heatmap-year-week {
    display: grid;
    grid-template-rows: repeat(7, 12px);
    gap: 3px;
}

.heatmap-year .heat-cell {
    width: 12px;
    height: 12px;
    aspect-ratio: auto;
    border-radius: 3px;
}

/* Ô ngoài phạm vi 1 năm / ngày tương lai — giữ khung lưới nhưng vô hình,
   để không bị hiểu là "ngày không thiền". */
.heat-blank {
    background: transparent !important;
    border-color: transparent !important;
}

.heatmap-year-months {
    display: flex;
    gap: 3px;
    width: max-content;
    margin-bottom: 4px;
}

.heatmap-year-month {
    width: 12px;
    font-size: 10px;
    line-height: 1;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: visible;
}


/* Huy hiệu "thiền đều" cạnh tên thành viên ở /app + dòng chú thích quy
   luật ngay trên bảng. Emoji hơi nhỏ so với chữ nên nhấn to lên một chút. */
.gd-badge-icon {
    font-size: 15px;
    letter-spacing: -1px;
    white-space: nowrap;
}

.gd-badge-legend {
    margin: 0 0 10px;
    font-size: 12.5px;
    line-height: 1.7;
}

/* ---------------------------------------------------------------------
   /app/leaderboard — 3 cột xếp hạng (7 ngày / 30 ngày / tất cả).
   --------------------------------------------------------------------- */
/* Khung trang /app/leaderboard: rộng hơn .wide-container (1000px) để 3
   cột thở hơn, nhưng KHÔNG full màn hình (chủ dự án đã thử và thấy thừa
   chỗ). Viết 2 class .wide-container.lb-page để thắng max-width của
   .wide-container bằng độ ưu tiên, không phụ thuộc thứ tự khai báo. */
.wide-container.lb-page { max-width: 1140px; }

.lb-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
    align-items: start;
}

.lb-card { padding: 20px; }

.lb-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: var(--radius-sm);
}

/* Dòng của chính người đang xem — nhấn nền để tìm mình nhanh trong bảng. */
.lb-item.is-me {
    background: rgba(201, 138, 50, 0.14);
    box-shadow: inset 3px 0 0 var(--color-accent);
}

.lb-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-muted);
}

/* Top 3 có huy chương; từ hạng 4 chỉ là số trơn (giống ảnh mẫu). */
.lb-rank-gold   { background: #f3d27a; color: #7a5410; }
.lb-rank-silver { background: #dcdcdc; color: #5a5a5a; }
.lb-rank-bronze { background: #ddb08a; color: #6b3c16; }

.lb-avatar {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

.lb-name {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    font-size: 14px;
    overflow-wrap: break-word;
}

.lb-score {
    flex-shrink: 0;
    font-weight: 700;
    font-size: 14px;
    color: var(--color-accent-dark);
    font-variant-numeric: tabular-nums;
}

.lb-you {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
}

/* Khối "Thiền Metta" ở /thien — mỗi bài 1 dòng kèm player gốc của trình duyệt. */
.metta-track + .metta-track {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--color-border);
}

.metta-track-title {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 8px;
}

.metta-audio {
    width: 100%;
    display: block;
}

/* Header card "Thống kê của bạn" ở /thien — tiêu đề + nút lưu ảnh 2 bên. */
.export-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}