:root {
    --ink: #14241a;
    --muted: #6d786f;
    --paper: #f4f5f0;
    --card: #ffffff;
    --line: #dfe4dc;
    --green: #173f2b;
    --green-2: #28593d;
    --lime: #d7f27a;
    --lime-soft: #eef8c7;
    --cream: #f8f4e9;
    --warm: #f5b768;
    --blue: #9cbadb;
    --plum: #b7a3c8;
    --danger: #a8443d;
    --shadow: 0 20px 55px rgba(31, 49, 36, .08);
    --radius: 24px;
    --font-vi-sans: "Segoe UI", Arial, "Noto Sans", "DejaVu Sans", sans-serif;
    --font-vi-serif: "Times New Roman", "Noto Serif", "DejaVu Serif", serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    color: var(--ink);
    background: var(--paper);
    font-family: var(--font-vi-sans);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }

.brand { display: inline-flex; align-items: center; gap: 11px; font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; color: var(--green); background: var(--lime); border-radius: 11px 4px 11px 4px; font-family: Georgia, serif; font-size: 21px; font-style: italic; }
.eyebrow { display: inline-block; margin-bottom: 8px; color: var(--green-2); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow.light { color: var(--lime); }

.public-shell { min-height: 100vh; display: flex; flex-direction: column; }
.public-header { height: 74px; display: flex; align-items: center; justify-content: space-between; width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.header-note { color: var(--muted); font-size: 12px; }
.public-main { width: min(1180px, calc(100% - 48px)); margin: auto; padding: 40px 0 70px; }
.public-footer { color: var(--muted); font-size: 12px; text-align: center; padding: 18px; }

.auth-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(390px, .85fr); overflow: hidden; min-height: 680px; background: var(--card); border: 1px solid rgba(255,255,255,.8); border-radius: 32px; box-shadow: var(--shadow); }
.auth-intro { position: relative; padding: 78px 74px; background: var(--cream); overflow: hidden; }
.auth-intro::after { content: ""; position: absolute; width: 350px; height: 350px; right: -120px; bottom: -120px; border: 1px solid rgba(23,63,43,.16); border-radius: 50%; box-shadow: 0 0 0 40px rgba(23,63,43,.03), 0 0 0 90px rgba(23,63,43,.025); }
.auth-intro h1 { margin: 8px 0 24px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(45px, 5vw, 70px); font-weight: 500; line-height: 1.03; letter-spacing: -.045em; }
.auth-intro > p { max-width: 520px; color: var(--muted); font-size: 17px; }
.feature-list { position: relative; z-index: 1; display: grid; gap: 19px; margin-top: 55px; }
.feature-list > div { display: flex; align-items: flex-start; gap: 16px; }
.feature-list > div > span { display: grid; place-items: center; flex: 0 0 36px; height: 36px; border: 1px solid #c9d0c7; border-radius: 50%; font-size: 10px; font-weight: 800; }
.feature-list p { margin: 0; color: var(--muted); }
.feature-list strong { display: block; color: var(--ink); font-size: 14px; }
.auth-card { display: flex; flex-direction: column; justify-content: center; padding: 70px 64px; }
.auth-card-head { margin-bottom: 30px; }
.auth-card-head h2 { margin: 4px 0 7px; font-family: Georgia, serif; font-size: 37px; font-weight: 500; letter-spacing: -.025em; }
.auth-card-head p, .auth-help { margin: 0; color: var(--muted); font-size: 13px; }
.step-badge { display: inline-flex; padding: 5px 10px; color: var(--green); background: var(--lime-soft); border-radius: 99px; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.login-visual { color: white; background: var(--green); }
.login-visual::after { border-color: rgba(215,242,122,.25); box-shadow: 0 0 0 55px rgba(215,242,122,.035), 0 0 0 120px rgba(215,242,122,.025); }
.login-visual > p { color: rgba(255,255,255,.65); }
.visual-orbit { position: relative; display: grid; place-items: center; width: 190px; height: 190px; margin: 55px 0 0 45px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; }
.visual-orbit::before, .visual-orbit::after { content: ""; position: absolute; inset: 22px; border: 1px solid rgba(255,255,255,.11); border-radius: 50%; }
.visual-orbit::after { inset: 47px; }
.visual-orbit b { z-index: 2; display: grid; place-items: center; width: 74px; height: 74px; color: var(--green); background: var(--lime); border-radius: 50%; font-size: 28px; box-shadow: 0 0 0 10px rgba(215,242,122,.09); }
.visual-orbit span { position: absolute; width: 8px; height: 8px; background: var(--lime); border-radius: 50%; }
.visual-orbit span:nth-child(1) { top: 5px; left: 54px; }
.visual-orbit span:nth-child(2) { right: 15px; bottom: 40px; }
.visual-orbit span:nth-child(3) { left: 4px; bottom: 67px; opacity: .45; }
.auth-help { margin-top: 24px; text-align: center; }

.form-stack { display: grid; gap: 18px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-grid .full { grid-column: 1 / -1; }
.field { position: relative; display: grid; gap: 7px; }
.field > span { color: #334239; font-size: 12px; font-weight: 750; }
.field > span small { color: var(--muted); font-weight: 500; }
.field input, .field textarea, .field select, .select-wrap select {
    width: 100%; min-height: 49px; padding: 12px 14px; color: var(--ink); background: #fafbf8; border: 1px solid #d9dfd7; border-radius: 12px; outline: 0; transition: border .2s, box-shadow .2s, background .2s;
}
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field textarea:focus, .field select:focus, .select-wrap select:focus { background: white; border-color: #699076; box-shadow: 0 0 0 3px rgba(45,94,63,.1); }
.field input::placeholder, .field textarea::placeholder { color: #a3aaa4; }
.password-wrap { position: relative; }
.password-wrap input { padding-right: 58px; }
.password-toggle { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); padding: 6px 7px; color: var(--green-2); background: transparent; border: 0; font-size: 11px; font-weight: 800; cursor: pointer; }
.char-count { position: absolute; right: 12px; bottom: 8px; color: var(--muted); font-size: 10px; }
.form-errors { margin-bottom: 20px; padding: 12px 15px; color: #823d38; background: #fbebe9; border: 1px solid #f0d2cf; border-radius: 12px; font-size: 12px; }
.form-errors p { margin: 2px 0; }
.form-actions { display: flex; justify-content: flex-end; padding-top: 4px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 43px; padding: 10px 18px; border: 1px solid transparent; border-radius: 11px; font-weight: 750; font-size: 13px; cursor: pointer; transition: transform .18s, background .18s, box-shadow .18s; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { color: white; background: var(--green); box-shadow: 0 8px 22px rgba(23,63,43,.16); }
.btn-primary:hover { background: #205238; }
.btn-secondary { color: var(--green); background: white; border-color: #ccd6ce; }
.btn-wide { width: 100%; }
.btn-large { min-height: 58px; font-size: 14px; }
.btn-small { min-height: 34px; padding: 7px 13px; background: white; border-color: var(--line); font-size: 11px; }
.button-check { display: grid; place-items: center; width: 24px; height: 24px; color: var(--green); background: var(--lime); border-radius: 50%; }

.toast { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; padding: 13px 16px; color: #23422f; background: #edf7ee; border: 1px solid #cfe3d2; border-radius: 13px; font-size: 13px; box-shadow: 0 8px 25px rgba(26,53,34,.07); animation: slideDown .35s ease; }
.toast > span { width: 8px; height: 8px; background: #58a06c; border-radius: 50%; }
.toast-warning { color: #6f5325; background: #fff7df; border-color: #efe1b9; }
.toast-warning > span { background: #d8a640; }
.toast-error { color: #803c38; background: #fff0ef; border-color: #efd2cf; }
.toast-error > span { background: #c45c54; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } }

.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 20; display: flex; flex-direction: column; width: 238px; padding: 28px 20px 20px; color: #d9e2dc; background: #102c20; }
.brand-sidebar { padding: 0 12px 34px; color: white; }
.main-nav { display: grid; gap: 5px; }
.nav-link { display: flex; align-items: center; gap: 13px; min-height: 45px; padding: 9px 12px; color: #aebdb4; border-radius: 11px; font-size: 13px; font-weight: 650; transition: color .18s, background .18s; }
.nav-link:hover { color: white; background: rgba(255,255,255,.055); }
.nav-link.is-active { color: var(--green); background: var(--lime); }
.nav-icon { display: grid; place-items: center; width: 24px; font-size: 17px; line-height: 1; }
.nav-label { margin: 25px 12px 8px; color: #71887a; font-size: 9px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.sidebar-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding: 17px 4px 0; border-top: 1px solid rgba(255,255,255,.1); }
.mini-user { display: flex; align-items: center; gap: 9px; min-width: 0; }
.mini-user > div { min-width: 0; }
.mini-user strong, .mini-user small { display: block; max-width: 125px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-user strong { color: white; font-size: 11px; }
.mini-user small { color: #819589; font-size: 9px; }
.logout-link { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; padding: 0; color: #9eb0a5; background: transparent; border: 0; border-radius: 9px; cursor: pointer; }
.logout-link:hover { color: white; background: rgba(255,255,255,.08); }
.app-main { min-height: 100vh; margin-left: 238px; }
.content { width: min(1180px, calc(100% - 70px)); margin: 0 auto; padding: 46px 0 70px; }
.mobile-header { display: none; }

.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 25px; margin-bottom: 32px; }
.page-heading h1 { margin: 0 0 5px; font-family: Georgia, serif; font-size: clamp(36px, 4vw, 52px); font-weight: 500; line-height: 1.05; letter-spacing: -.035em; }
.page-heading p { margin: 0; color: var(--muted); }
.dashboard-heading { align-items: center; }
.profile-avatar { width: 47px !important; height: 47px !important; }
.avatar { display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; color: white; background: var(--avatar, #536c59); border-radius: 50%; font-size: 12px; font-weight: 800; letter-spacing: .02em; }
.avatar-sm { width: 36px; height: 36px; font-size: 10px; }

.dashboard-grid { display: grid; grid-template-columns: 1.1fr 1.1fr .8fr; gap: 17px; }
.checkin-hero { position: relative; grid-column: span 2; display: grid; grid-template-columns: 1fr 220px; min-height: 315px; padding: 40px 42px; color: white; background: var(--green); border-radius: var(--radius); overflow: hidden; }
.checkin-hero::before { content: ""; position: absolute; width: 310px; height: 310px; right: -38px; top: 50%; transform: translateY(-50%); border: 1px solid rgba(255,255,255,.12); border-radius: 50%; box-shadow: 0 0 0 45px rgba(255,255,255,.025), 0 0 0 90px rgba(255,255,255,.02); }
.checkin-hero.is-checked { background: #294f38; }
.hero-copy { position: relative; z-index: 1; }
.status-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 11px; color: #dfecd9; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.11); border-radius: 99px; font-size: 10px; font-weight: 750; }
.status-pill i { width: 7px; height: 7px; background: var(--warm); border-radius: 50%; box-shadow: 0 0 0 4px rgba(245,183,104,.12); }
.is-checked .status-pill i { background: var(--lime); }
.hero-copy h2 { margin: 28px 0 15px; font-family: Georgia, serif; font-size: 40px; font-weight: 500; line-height: 1.08; letter-spacing: -.035em; }
.hero-copy p { max-width: 380px; margin: 0; color: rgba(255,255,255,.62); font-size: 13px; }
.checkin-action { position: relative; z-index: 1; display: grid; place-items: center; }
.check-orb { display: grid; place-items: center; width: 144px; height: 144px; padding: 0; color: var(--green); background: var(--lime); border: 0; border-radius: 50%; box-shadow: 0 0 0 13px rgba(215,242,122,.08), 0 0 45px rgba(215,242,122,.08); cursor: pointer; transition: transform .25s, box-shadow .25s; }
.check-orb:hover { transform: scale(1.04); box-shadow: 0 0 0 18px rgba(215,242,122,.08), 0 0 50px rgba(215,242,122,.15); }
.check-orb span { align-self: end; font-size: 39px; line-height: 1; font-weight: 300; }
.check-orb small { align-self: start; margin-top: 6px; font-size: 11px; font-weight: 800; }
.check-orb.complete { cursor: default; }
.check-orb.complete:hover { transform: none; }

.streak-card { grid-row: span 2; display: flex; flex-direction: column; min-height: 315px; padding: 28px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.card-top { display: flex; align-items: center; justify-content: space-between; }
.card-icon { display: grid; place-items: center; width: 39px; height: 39px; color: var(--green); background: #dae8db; border-radius: 12px; font-size: 16px; }
.card-icon.warm { background: #fae1bd; }
.card-icon.blue { background: #d8e5f2; }
.card-icon.plum { background: #e5daeb; }
.trend { color: var(--green-2); background: #e9f3ea; border-radius: 99px; padding: 5px 9px; font-size: 9px; font-weight: 800; }
.big-number { margin-top: 28px; font-family: Georgia, serif; font-size: 62px; font-weight: 500; line-height: .9; }
.big-label { margin-top: 6px; font-weight: 750; }
.streak-card > p { margin: 10px 0 28px; color: var(--muted); font-size: 12px; }
.week-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-top: auto; }
.week-day { display: grid; justify-items: center; gap: 6px; }
.week-day span { color: #8a938d; font-size: 8px; font-weight: 800; }
.week-day b { display: grid; place-items: center; width: 25px; height: 25px; color: #8a938d; background: #f1f3ef; border-radius: 50%; font-size: 8px; }
.week-day.done b { color: var(--green); background: var(--lime); }
.stat-card { display: flex; align-items: center; gap: 17px; min-height: 125px; padding: 23px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; }
.stat-card > div { min-width: 0; }
.stat-card strong, .stat-card span { display: block; }
.stat-card strong { font-family: Georgia, serif; font-size: 28px; font-weight: 500; line-height: 1; }
.stat-card > div span { margin-top: 7px; color: var(--muted); font-size: 10px; line-height: 1.3; }

.section-block { margin-top: 48px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.section-heading h2 { margin: 0; font-family: Georgia, serif; font-size: 27px; font-weight: 500; letter-spacing: -.02em; }
.text-link { color: var(--green-2); font-size: 11px; font-weight: 800; }
.leader-preview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.leader-mini { position: relative; display: flex; align-items: center; gap: 12px; padding: 19px; background: white; border: 1px solid var(--line); border-radius: 16px; }
.leader-mini > div { min-width: 0; }
.leader-mini > div strong, .leader-mini > div small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leader-mini > div strong { font-size: 12px; }
.leader-mini > div small { color: var(--muted); font-size: 9px; }
.leader-mini > b { margin-left: auto; font-family: Georgia, serif; font-size: 22px; font-weight: 500; white-space: nowrap; }
.leader-mini > b small { font-family: inherit; font-size: 10px; }
.rank-badge { position: absolute; top: -8px; left: 14px; display: grid; place-items: center; width: 21px; height: 21px; color: var(--green); background: #dfe8e0; border: 3px solid var(--paper); border-radius: 50%; font-size: 8px; font-weight: 900; }
.rank-1 { background: var(--lime); }
.rank-2 { background: #dbe1e5; }
.rank-3 { background: #edd8c6; }

.attendance-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, .75fr); gap: 18px; }
.attendance-card { display: grid; grid-template-columns: 250px 1fr; min-height: 390px; overflow: hidden; background: white; border: 1px solid var(--line); border-radius: var(--radius); }
.date-block { display: flex; flex-direction: column; justify-content: center; padding: 38px; color: white; background: var(--green); }
.date-block > span { color: var(--lime); font-size: 12px; font-weight: 750; }
.date-block strong { margin: 12px 0 0; font-family: Georgia, serif; font-size: 61px; font-weight: 500; line-height: 1; letter-spacing: -.05em; }
.date-block small { margin-top: 7px; color: rgba(255,255,255,.55); font-size: 10px; }
.checkin-form, .attendance-success { display: flex; flex-direction: column; justify-content: center; padding: 40px 48px; }
.checkin-form h2, .attendance-success h2 { margin: 0 0 6px; font-family: Georgia, serif; font-size: 32px; font-weight: 500; }
.checkin-form > div > p, .attendance-success p { margin: 0 0 25px; color: var(--muted); }
.checkin-form .btn { margin-top: 20px; }
.attendance-success { align-items: flex-start; }
.success-mark { display: grid; place-items: center; width: 68px; height: 68px; margin-bottom: 23px; color: var(--green); background: var(--lime); border-radius: 50%; font-size: 27px; box-shadow: 0 0 0 9px var(--lime-soft); }
.attendance-success blockquote { margin: 0; padding: 13px 16px; color: #526158; background: #f5f7f3; border-radius: 10px; font-size: 12px; }
.quote-card { display: flex; flex-direction: column; justify-content: flex-end; min-height: 390px; padding: 32px; color: white; background: #617264; border-radius: var(--radius); overflow: hidden; }
.quote-card > span { margin-bottom: auto; color: var(--lime); font-family: Georgia, serif; font-size: 70px; line-height: .7; }
.quote-card blockquote { margin: 0 0 22px; font-family: Georgia, serif; font-size: 25px; line-height: 1.25; }
.quote-card small { color: rgba(255,255,255,.6); }
.history-list { overflow: hidden; background: white; border: 1px solid var(--line); border-radius: 18px; }
.history-item { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 15px; min-height: 72px; padding: 12px 20px; border-bottom: 1px solid #edf0ec; }
.history-item:last-child { border: 0; }
.history-dot { display: grid; place-items: center; width: 31px; height: 31px; color: var(--green); background: var(--lime-soft); border-radius: 50%; font-size: 11px; }
.history-item strong, .history-item small { display: block; }
.history-item strong { font-size: 12px; }
.history-item small { color: var(--muted); font-size: 10px; }
.history-item time { color: var(--green-2); font-family: Georgia, serif; font-size: 20px; }
.empty-state { padding: 50px; text-align: center; background: white; border: 1px dashed #ccd4cc; border-radius: 18px; }
.empty-state > span { display: grid; place-items: center; width: 48px; height: 48px; margin: auto; background: #edf2ec; border-radius: 50%; font-size: 20px; }
.empty-state h3 { margin: 14px 0 3px; }
.empty-state p { margin: 0; color: var(--muted); }

.month-chip { padding: 9px 13px; color: var(--green-2); background: white; border: 1px solid var(--line); border-radius: 99px; font-size: 11px; font-weight: 750; white-space: nowrap; }
.podium { display: flex; align-items: flex-end; justify-content: center; gap: 13px; min-height: 305px; padding: 35px 30px 0; color: white; background: var(--green); border-radius: var(--radius); overflow: hidden; }
.podium-item { position: relative; display: flex; flex-direction: column; align-items: center; width: 29%; padding: 29px 16px 23px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); border-bottom: 0; border-radius: 20px 20px 0 0; text-align: center; }
.podium-item.place-1 { min-height: 255px; background: rgba(215,242,122,.12); }
.podium-item.place-2 { min-height: 215px; }
.podium-item.place-3 { min-height: 190px; }
.podium-rank { position: absolute; top: 13px; left: 15px; color: rgba(255,255,255,.6); font-size: 11px; font-weight: 800; }
.podium-avatar { width: 63px; height: 63px; margin-bottom: 11px; border: 4px solid rgba(255,255,255,.22); }
.place-1 .podium-avatar { width: 76px; height: 76px; border-color: var(--lime); }
.crown { position: absolute; top: 8px; left: 50%; transform: translate(-50%, -100%); color: var(--lime); font-size: 21px; }
.podium-item h3 { margin: 0; font-size: 12px; }
.podium-item p { margin: 2px 0 8px; color: rgba(255,255,255,.5); font-size: 9px; }
.podium-item > strong { margin-top: auto; color: var(--lime); font-family: Georgia, serif; font-size: 24px; font-weight: 500; }
.podium-item > strong small { font-size: 10px; }
.ranking-card { margin-top: 22px; overflow: hidden; background: white; border: 1px solid var(--line); border-radius: 19px; }
.ranking-head, .ranking-row { display: grid; grid-template-columns: 70px minmax(240px, 1.4fr) minmax(130px, 1fr) 90px 75px; align-items: center; gap: 16px; }
.ranking-head { min-height: 45px; padding: 0 24px; color: #8b948e; background: #f8f9f6; border-bottom: 1px solid var(--line); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ranking-row { min-height: 73px; padding: 10px 24px; border-bottom: 1px solid #edf0ec; }
.ranking-row:last-child { border: 0; }
.ranking-row.is-me { background: #f6f9e9; }
.ranking-number { color: #7b877f; font-family: Georgia, serif; font-size: 20px; font-weight: 500; }
.ranking-person { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ranking-person > div { min-width: 0; }
.ranking-person strong, .ranking-person small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking-person strong { font-size: 12px; }
.ranking-person strong em, .user-identity strong em { padding: 3px 6px; color: var(--green); background: var(--lime-soft); border-radius: 99px; font-size: 8px; font-style: normal; }
.ranking-person small { color: var(--muted); font-size: 9px; }
.department-label { color: var(--muted); font-size: 11px; }
.days-count { font-family: Georgia, serif; font-size: 20px; font-weight: 500; }
.days-count small { color: var(--muted); font-size: 9px; }
.average-time { color: var(--green-2); font-size: 12px; font-weight: 750; }
.ranking-note { margin: 13px 4px; color: var(--muted); font-size: 9px; text-align: center; }

.profile-hero { display: flex; align-items: center; gap: 20px; margin-bottom: 19px; padding: 28px 31px; color: white; background: var(--green); border-radius: var(--radius); }
.profile-big-avatar { width: 75px; height: 75px; border: 4px solid rgba(255,255,255,.25); font-size: 19px; }
.profile-hero h2 { margin: 0; font-family: Georgia, serif; font-size: 28px; font-weight: 500; }
.profile-hero p { margin: 1px 0 4px; color: rgba(255,255,255,.64); font-size: 11px; }
.profile-hero > div > span { color: var(--lime); font-size: 9px; }
.profile-total { margin-left: auto; padding-left: 28px; border-left: 1px solid rgba(255,255,255,.18); text-align: right; }
.profile-total strong, .profile-total small { display: block; }
.profile-total strong { font-family: Georgia, serif; font-size: 38px; font-weight: 500; }
.profile-total small { color: rgba(255,255,255,.57); font-size: 9px; }
.profile-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, .75fr); gap: 18px; }
.panel { padding: 28px; background: white; border: 1px solid var(--line); border-radius: var(--radius); }
.panel-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 25px; }
.panel-head h2 { margin: 0; font-family: Georgia, serif; font-size: 24px; font-weight: 500; }
.saved-hint { color: var(--green-2); background: #edf5ed; padding: 5px 9px; border-radius: 99px; font-size: 8px; font-weight: 800; }
.password-panel .form-stack { gap: 15px; }
.security-note { display: flex; gap: 11px; margin-top: 22px; padding: 13px; color: var(--muted); background: #f5f7f3; border-radius: 10px; font-size: 9px; }
.security-note span { color: var(--green-2); font-size: 18px; }
.security-note p { margin: 0; }

.admin-heading { align-items: center; }
.admin-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; }
.admin-stats article { display: flex; align-items: center; gap: 16px; padding: 20px; background: white; border: 1px solid var(--line); border-radius: 16px; }
.admin-stats strong, .admin-stats small { display: block; }
.admin-stats strong { font-family: Georgia, serif; font-size: 27px; font-weight: 500; line-height: 1; }
.admin-stats small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.user-table-card { overflow: hidden; background: white; border: 1px solid var(--line); border-radius: var(--radius); }
.table-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 23px 25px; border-bottom: 1px solid var(--line); }
.table-toolbar h2 { margin: 0; font-family: Georgia, serif; font-size: 23px; font-weight: 500; }
.table-toolbar p { margin: 2px 0 0; color: var(--muted); font-size: 9px; }
.search-box { display: flex; align-items: center; gap: 8px; min-width: 260px; padding: 0 12px; background: #f7f8f5; border: 1px solid var(--line); border-radius: 10px; }
.search-box input { width: 100%; height: 38px; background: transparent; border: 0; outline: 0; font-size: 11px; }
.user-table-head, .user-row { display: grid; grid-template-columns: minmax(220px, 1.4fr) minmax(140px, .8fr) minmax(135px, .8fr) 90px 105px; align-items: center; gap: 15px; }
.user-table-head { min-height: 42px; padding: 0 24px; color: #8d9690; background: #f8f9f6; border-bottom: 1px solid var(--line); font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.user-row { min-height: 72px; padding: 10px 24px; border-bottom: 1px solid #edf0ec; }
.user-row:last-of-type { border: 0; }
.user-row.is-hidden { display: none; }
.user-identity { display: flex; align-items: center; gap: 11px; min-width: 0; }
.user-identity > div { min-width: 0; }
.user-identity strong, .user-identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-identity strong { font-size: 11px; }
.user-identity small { color: var(--muted); font-size: 9px; }
.user-settings { display: contents; }
.select-wrap select { min-height: 36px; padding: 7px 9px; background: #f8f9f6; border-radius: 9px; font-size: 10px; }
.switch-label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.switch-label input { position: absolute; opacity: 0; pointer-events: none; }
.switch-label > span { position: relative; width: 30px; height: 17px; background: #cbd2cc; border-radius: 99px; transition: background .2s; }
.switch-label > span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 11px; height: 11px; background: white; border-radius: 50%; transition: transform .2s; }
.switch-label input:checked + span { background: var(--green-2); }
.switch-label input:checked + span::after { transform: translateX(13px); }
.switch-label b { font-size: 9px; font-weight: 650; }
.attendance-count { font-family: Georgia, serif; font-size: 17px; font-weight: 500; }
.attendance-count small { color: var(--muted); font-size: 8px; }
.row-actions { display: flex; justify-content: flex-end; gap: 5px; }
.icon-button { display: grid; place-items: center; width: 34px; height: 34px; background: transparent; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; font-size: 11px; }

.modal { width: min(470px, calc(100% - 28px)); max-height: calc(100vh - 30px); padding: 0; background: transparent; border: 0; overflow: visible; }
.modal::backdrop { background: rgba(8,25,16,.72); backdrop-filter: blur(4px); }
.modal-card { position: relative; display: grid; gap: 16px; padding: 33px; background: white; border-radius: 22px; box-shadow: 0 28px 90px rgba(0,0,0,.3); }
.modal-card h2 { margin: -7px 0 -12px; font-family: Georgia, serif; font-size: 30px; font-weight: 500; }
.modal-card > p { margin: 0 0 5px; color: var(--muted); font-size: 11px; }
.modal-close { position: absolute; top: 15px; right: 15px; width: 34px; height: 34px; color: var(--muted); background: #f0f2ee; border: 0; border-radius: 50%; cursor: pointer; font-size: 21px; }

.center-page { display: grid; place-items: center; min-height: 100vh; padding: 25px; }
.error-card { max-width: 560px; padding: 45px; background: white; border: 1px solid var(--line); border-radius: var(--radius); text-align: center; box-shadow: var(--shadow); }
.error-card h1 { margin: 3px 0 12px; font-family: Georgia, serif; font-size: 40px; font-weight: 500; }
.error-card p { margin: 0 0 23px; color: var(--muted); }

@media (max-width: 1080px) {
    .content { width: calc(100% - 44px); }
    .dashboard-grid { grid-template-columns: 1fr 1fr; }
    .checkin-hero { grid-column: 1 / -1; }
    .streak-card { grid-row: auto; }
    .stat-card:last-child { grid-column: 1 / -1; }
    .profile-grid { grid-template-columns: 1fr; }
    .user-table { overflow-x: auto; }
    .user-table-head, .user-row { min-width: 850px; }
}

@media (max-width: 800px) {
    .sidebar { transform: translateX(-100%); transition: transform .25s ease; box-shadow: 15px 0 60px rgba(0,0,0,.2); }
    body.menu-open .sidebar { transform: translateX(0); }
    .app-main { margin-left: 0; }
    .mobile-header { position: sticky; top: 0; z-index: 15; display: flex; align-items: center; justify-content: space-between; height: 65px; padding: 0 22px; background: rgba(244,245,240,.92); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); }
    .menu-toggle { width: 39px; height: 39px; background: white; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
    .content { width: calc(100% - 36px); padding: 30px 0 50px; }
    .auth-layout { grid-template-columns: 1fr; }
    .auth-intro { padding: 50px 38px; }
    .auth-card { padding: 50px 38px; }
    .login-visual { min-height: 500px; }
    .leader-preview { grid-template-columns: 1fr; }
    .attendance-layout { grid-template-columns: 1fr; }
    .quote-card { min-height: 260px; }
    .attendance-card { grid-template-columns: 210px 1fr; }
    .admin-stats { grid-template-columns: 1fr 1fr 1fr; }
    .podium { min-height: 285px; padding-inline: 14px; }
    .podium-item { width: 32%; padding-inline: 8px; }
    .ranking-head, .ranking-row { grid-template-columns: 50px minmax(190px, 1fr) 75px 65px; }
    .ranking-head span:nth-child(3), .ranking-row .department-label { display: none; }
}

@media (max-width: 600px) {
    .public-header, .public-main { width: calc(100% - 26px); }
    .header-note { display: none; }
    .public-main { padding-top: 10px; }
    .auth-layout { border-radius: 22px; }
    .auth-intro { padding: 40px 27px; }
    .auth-intro h1 { font-size: 42px; }
    .auth-card { padding: 38px 27px; }
    .login-visual { min-height: 450px; }
    .visual-orbit { width: 150px; height: 150px; margin-left: 20px; }
    .page-heading { align-items: flex-start; }
    .page-heading h1 { font-size: 38px; }
    .dashboard-heading .profile-avatar { display: none; }
    .dashboard-grid { grid-template-columns: 1fr 1fr; gap: 11px; }
    .checkin-hero { grid-template-columns: 1fr; min-height: auto; padding: 29px; }
    .hero-copy h2 { font-size: 33px; }
    .checkin-action { padding: 28px 0 5px; }
    .check-orb { width: 126px; height: 126px; }
    .streak-card { grid-column: 1 / -1; min-height: 290px; }
    .stat-card { min-height: 115px; padding: 17px; gap: 10px; }
    .stat-card .card-icon { width: 34px; height: 34px; }
    .stat-card strong { font-size: 23px; }
    .stat-card:last-child { grid-column: 1 / -1; }
    .section-block { margin-top: 38px; }
    .attendance-card { grid-template-columns: 1fr; }
    .date-block { padding: 28px; }
    .date-block strong { font-size: 49px; }
    .checkin-form, .attendance-success { padding: 33px 26px; }
    .form-grid { grid-template-columns: 1fr; }
    .form-grid .full { grid-column: auto; }
    .profile-hero { flex-wrap: wrap; padding: 23px; }
    .profile-total { width: 100%; margin: 4px 0 0; padding: 15px 0 0; border-top: 1px solid rgba(255,255,255,.15); border-left: 0; text-align: left; }
    .panel { padding: 23px; }
    .admin-heading { display: block; }
    .admin-heading .btn { margin-top: 18px; }
    .admin-stats { grid-template-columns: 1fr; }
    .table-toolbar { align-items: stretch; flex-direction: column; }
    .search-box { min-width: 0; }
    .podium { gap: 5px; min-height: 260px; }
    .podium-item.place-1 { min-height: 225px; }
    .podium-item.place-2 { min-height: 190px; }
    .podium-item.place-3 { min-height: 175px; }
    .podium-avatar, .place-1 .podium-avatar { width: 52px; height: 52px; }
    .podium-item h3 { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ranking-head, .ranking-row { grid-template-columns: 37px 1fr 54px 55px; gap: 8px; padding-inline: 12px; }
    .ranking-person { gap: 8px; }
    .month-chip { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* ================================================================
   NEXUS CYBERPUNK THEME // DARK PROTOCOL
   ================================================================ */
:root {
    --ink: #e8f8ff;
    --muted: #71899a;
    --paper: #05070d;
    --card: #0a101a;
    --line: #192b3b;
    --green: #07141d;
    --green-2: #00d9e8;
    --lime: #00f0ff;
    --lime-soft: rgba(0, 240, 255, .1);
    --cream: #0a0d16;
    --warm: #ffb000;
    --blue: #00f0ff;
    --plum: #ff2bd6;
    --danger: #ff496c;
    --neon: #00f0ff;
    --neon-soft: rgba(0, 240, 255, .12);
    --magenta: #ff2bd6;
    --acid: #b9ff39;
    --void: #03050a;
    --shadow: 0 22px 70px rgba(0, 0, 0, .55), 0 0 30px rgba(0, 240, 255, .03);
    --radius: 4px;
}

body {
    color: var(--ink);
    background:
        radial-gradient(circle at 80% -10%, rgba(255, 43, 214, .09), transparent 28%),
        radial-gradient(circle at 15% 8%, rgba(0, 240, 255, .08), transparent 25%),
        #05070d;
    font-family: "Segoe UI", Inter, ui-sans-serif, sans-serif;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1000;
    pointer-events: none;
    opacity: .12;
    background: repeating-linear-gradient(0deg, transparent 0, transparent 3px, rgba(140, 222, 255, .08) 4px);
    mix-blend-mode: screen;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: linear-gradient(rgba(0,240,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(0,240,255,.025) 1px, transparent 1px);
    background-size: 38px 38px;
    mask-image: linear-gradient(to bottom, black, transparent 88%);
}

::selection { color: #020508; background: var(--neon); }
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: #05070d; }
::-webkit-scrollbar-thumb { background: #244155; border: 1px solid #05070d; }

.brand { color: #eaffff; font-family: Consolas, "Courier New", monospace; font-size: 14px; letter-spacing: .08em; text-shadow: 0 0 14px rgba(0,240,255,.3); }
.brand-mark { width: 36px; height: 36px; color: #02070a; background: var(--neon); border-radius: 0; font-family: Consolas, monospace; font-size: 20px; font-style: normal; clip-path: polygon(0 0, 78% 0, 100% 22%, 100% 100%, 22% 100%, 0 78%); box-shadow: 0 0 20px rgba(0,240,255,.35); }
.eyebrow { color: var(--neon); font-family: Consolas, "Courier New", monospace; font-size: 10px; letter-spacing: .18em; text-shadow: 0 0 10px rgba(0,240,255,.3); }
.eyebrow.light { color: var(--acid); }

.public-shell { background: transparent; }
.public-header { border-bottom: 1px solid rgba(0,240,255,.16); }
.header-note { color: #567082; font-family: Consolas, monospace; letter-spacing: .06em; text-transform: uppercase; }
.public-footer { color: #4c6473; font-family: Consolas, monospace; }

.auth-layout { background: #070b13; border: 1px solid #173345; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,240,255,.03), 0 28px 90px rgba(0,0,0,.65), -20px 0 70px rgba(0,240,255,.03); clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 22px 100%, 0 calc(100% - 22px)); }
.auth-intro { background: linear-gradient(145deg, #071721, #080b14 65%, #13091b); border-right: 1px solid rgba(0,240,255,.18); }
.auth-intro::before { content: "NEXUS_ACCESS // 07"; position: absolute; top: 25px; right: 31px; color: rgba(0,240,255,.32); font: 9px Consolas, monospace; letter-spacing: .17em; }
.auth-intro::after { border-color: rgba(0,240,255,.16); box-shadow: 0 0 0 40px rgba(0,240,255,.018), 0 0 0 90px rgba(255,43,214,.016); }
.auth-intro h1 { color: #eefcff; font-family: "Arial Narrow", "Segoe UI", sans-serif; font-weight: 800; letter-spacing: -.055em; text-transform: uppercase; text-shadow: 4px 0 rgba(255,43,214,.17), -2px 0 rgba(0,240,255,.17); }
.auth-intro > p, .feature-list p, .auth-card-head p, .auth-help { color: #71899a; }
.feature-list > div > span { color: var(--neon); border-color: #24516a; border-radius: 2px; font-family: Consolas, monospace; }
.feature-list strong { color: #d8edf5; font-family: Consolas, monospace; text-transform: uppercase; letter-spacing: .06em; }
.auth-card { position: relative; background: #080c14; }
.auth-card::after { content: "SECURE_SESSION"; position: absolute; right: 23px; bottom: 18px; color: #263b49; font: 8px Consolas, monospace; letter-spacing: .14em; }
.auth-card-head h2 { color: #eefcff; font-family: "Arial Narrow", "Segoe UI", sans-serif; font-weight: 800; text-transform: uppercase; }
.step-badge { color: var(--neon); background: rgba(0,240,255,.07); border: 1px solid rgba(0,240,255,.25); border-radius: 1px; font-family: Consolas, monospace; }
.login-visual { background: linear-gradient(145deg, #071821, #070910 60%, #140818); }
.visual-orbit { border-color: rgba(0,240,255,.25); box-shadow: 0 0 45px rgba(0,240,255,.05); }
.visual-orbit::before, .visual-orbit::after { border-color: rgba(0,240,255,.12); }
.visual-orbit b { color: #02070a; background: var(--neon); box-shadow: 0 0 0 8px rgba(0,240,255,.07), 0 0 32px rgba(0,240,255,.35); }
.visual-orbit span { background: var(--magenta); box-shadow: 0 0 10px var(--magenta); }

.field > span { color: #96b2c1; font-family: Consolas, monospace; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.field input, .field textarea, .field select, .select-wrap select { color: #e7f8ff; background: #070c13; border: 1px solid #1e3b4e; border-radius: 2px; caret-color: var(--neon); }
.field input:hover, .field textarea:hover, .field select:hover { border-color: #2c5870; }
.field input:focus, .field textarea:focus, .field select:focus, .select-wrap select:focus { color: white; background: #08111a; border-color: var(--neon); box-shadow: 0 0 0 1px rgba(0,240,255,.18), inset 3px 0 0 var(--neon), 0 0 20px rgba(0,240,255,.07); }
.field input::placeholder, .field textarea::placeholder { color: #3d5666; }
.field select option, .select-wrap select option { color: #deeff7; background: #08111a; }
.field-hint { color: #6a8393; font-family: Consolas, monospace; font-size: 9px; }
.password-toggle { color: var(--neon); font-family: Consolas, monospace; }
.char-count { color: #4f6b7a; font-family: Consolas, monospace; }
.form-errors { color: #ff8aa0; background: rgba(255,73,108,.08); border-color: rgba(255,73,108,.3); border-radius: 2px; }

.btn { border-radius: 1px; font-family: Consolas, "Courier New", monospace; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px)); }
.btn-primary { color: #011015; background: var(--neon); box-shadow: 0 0 20px rgba(0,240,255,.12); }
.btn-primary:hover { color: #000; background: #6df8ff; box-shadow: 0 0 26px rgba(0,240,255,.35); }
.btn-secondary, .btn-small { color: #b9eefa; background: #0a1520; border-color: #275066; box-shadow: none; }
.btn-secondary:hover, .btn-small:hover { color: var(--neon); background: #0d1d2a; border-color: var(--neon); }
.button-check { color: #061018; background: #ecffff; border-radius: 1px; }

.toast { color: #a7f9ff; background: #091821; border-color: rgba(0,240,255,.35); border-radius: 2px; box-shadow: 0 0 24px rgba(0,240,255,.08); font-family: Consolas, monospace; }
.toast > span { background: var(--neon); border-radius: 0; box-shadow: 0 0 10px var(--neon); }
.toast-warning { color: #ffd47b; background: #1b1409; border-color: rgba(255,176,0,.35); }
.toast-warning > span { background: var(--warm); box-shadow: 0 0 10px var(--warm); }
.toast-error { color: #ff9aac; background: #1a0a10; border-color: rgba(255,73,108,.35); }
.toast-error > span { background: var(--danger); box-shadow: 0 0 10px var(--danger); }

.sidebar { color: #7f9aaa; background: linear-gradient(180deg, #050811, #03050a); border-right: 1px solid #152e3e; box-shadow: 10px 0 40px rgba(0,0,0,.25); }
.brand-sidebar { border-bottom: 1px solid rgba(0,240,255,.12); }
.nav-link { color: #627d8d; border: 1px solid transparent; border-radius: 1px; font-family: Consolas, monospace; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.nav-link:hover { color: #c2f8ff; background: rgba(0,240,255,.035); border-color: rgba(0,240,255,.1); }
.nav-link.is-active { color: var(--neon); background: linear-gradient(90deg, rgba(0,240,255,.12), rgba(0,240,255,.025)); border-color: rgba(0,240,255,.24); box-shadow: inset 3px 0 0 var(--neon), 0 0 18px rgba(0,240,255,.04); text-shadow: 0 0 10px rgba(0,240,255,.4); }
.nav-icon { color: inherit; }
.nav-label { color: #354f5e; font-family: Consolas, monospace; }
.sidebar-foot { border-color: rgba(0,240,255,.12); }
.mini-user strong { color: #cdf9ff; }
.mini-user small, .logout-link { color: #567281; }
.logout-link:hover { color: var(--magenta); background: rgba(255,43,214,.08); }

.app-main { background: transparent; }
.mobile-header { background: rgba(5,7,13,.94); border-color: #163246; }
.menu-toggle { color: var(--neon); background: #07111a; border-color: #205066; border-radius: 1px; }
.page-heading h1 { color: #edfbff; font-family: "Arial Narrow", "Segoe UI", sans-serif; font-weight: 850; letter-spacing: -.045em; text-transform: uppercase; text-shadow: 3px 0 rgba(255,43,214,.15), -2px 0 rgba(0,240,255,.14); }
.page-heading p { color: #71899a; }
.avatar { color: white; border: 1px solid rgba(0,240,255,.42); box-shadow: 0 0 14px rgba(0,240,255,.09); border-radius: 2px; clip-path: polygon(0 0, 78% 0, 100% 22%, 100% 100%, 22% 100%, 0 78%); }

.checkin-hero { color: #eaffff; background: linear-gradient(125deg, #071721, #09101a 52%, #15091a); border: 1px solid #1c5368; border-radius: 3px; box-shadow: inset 0 0 50px rgba(0,240,255,.025), 0 18px 60px rgba(0,0,0,.35); clip-path: polygon(0 0, calc(100% - 23px) 0, 100% 23px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); }
.checkin-hero::before { border-color: rgba(0,240,255,.18); box-shadow: 0 0 0 45px rgba(0,240,255,.018), 0 0 0 90px rgba(255,43,214,.016); }
.checkin-hero::after { content: "AUTH_NODE_07"; position: absolute; right: 18px; top: 14px; color: rgba(0,240,255,.35); font: 8px Consolas, monospace; letter-spacing: .14em; }
.checkin-hero.is-checked { background: linear-gradient(125deg, #071c1d, #08151a 55%, #0d1420); border-color: rgba(185,255,57,.35); }
.checkin-hero.is-locked { border-color: #263342; }
.status-pill { color: #a3eaf1; background: rgba(0,240,255,.05); border-color: rgba(0,240,255,.18); border-radius: 1px; font-family: Consolas, monospace; letter-spacing: .08em; }
.status-pill i { background: var(--danger); border-radius: 0; box-shadow: 0 0 10px var(--danger); }
.is-open .status-pill i { background: var(--neon); box-shadow: 0 0 10px var(--neon); animation: neonPulse 1.8s infinite; }
.is-checked .status-pill i { background: var(--acid); box-shadow: 0 0 10px var(--acid); }
.hero-copy h2 { font-family: "Arial Narrow", "Segoe UI", sans-serif; font-weight: 800; text-transform: uppercase; }
.hero-copy p { color: #6e8998; font-family: Consolas, monospace; }
.check-orb { color: #001015; background: var(--neon); border: 1px solid #8afaff; border-radius: 2px; box-shadow: 0 0 0 7px rgba(0,240,255,.05), 0 0 38px rgba(0,240,255,.18); clip-path: polygon(15% 0, 85% 0, 100% 15%, 100% 85%, 85% 100%, 15% 100%, 0 85%, 0 15%); }
.check-orb:hover { box-shadow: 0 0 0 11px rgba(0,240,255,.06), 0 0 48px rgba(0,240,255,.38); }
.check-orb.complete { color: #07120a; background: var(--acid); border-color: #dfff9f; box-shadow: 0 0 0 7px rgba(185,255,57,.05), 0 0 35px rgba(185,255,57,.18); }
.check-orb.locked { color: #607686; background: #0b121c; border-color: #263a49; box-shadow: 0 0 0 7px rgba(90,110,125,.03); }

.streak-card, .stat-card, .leader-mini, .panel, .user-table-card, .ranking-card, .history-list { background: linear-gradient(145deg, #0a101a, #080c14); border-color: #172d3e; border-radius: 3px; box-shadow: 0 16px 45px rgba(0,0,0,.23); }
.streak-card, .panel, .leader-mini, .stat-card { position: relative; }
.streak-card::before, .panel::before, .leader-mini::before, .stat-card::before { content: ""; position: absolute; left: -1px; top: -1px; width: 34px; height: 1px; background: var(--neon); box-shadow: 0 0 7px rgba(0,240,255,.5); }
.card-icon { color: var(--neon); background: rgba(0,240,255,.08); border: 1px solid rgba(0,240,255,.18); border-radius: 1px; }
.card-icon.warm { color: var(--warm); background: rgba(255,176,0,.08); border-color: rgba(255,176,0,.2); }
.card-icon.blue { color: var(--neon); background: rgba(0,240,255,.08); }
.card-icon.plum { color: var(--magenta); background: rgba(255,43,214,.08); border-color: rgba(255,43,214,.2); }
.trend { color: var(--acid); background: rgba(185,255,57,.07); border: 1px solid rgba(185,255,57,.17); border-radius: 1px; font-family: Consolas, monospace; }
.big-number, .stat-card strong, .leader-mini > b { color: #e9fbff; font-family: Consolas, monospace; text-shadow: 0 0 18px rgba(0,240,255,.12); }
.streak-card > p, .stat-card > div span, .leader-mini > div small { color: #657e8d; }
.week-day span { color: #496272; font-family: Consolas, monospace; }
.week-day b { color: #516877; background: #0c1520; border: 1px solid #172c3a; border-radius: 1px; }
.week-day.done b { color: #02090c; background: var(--neon); border-color: var(--neon); box-shadow: 0 0 10px rgba(0,240,255,.2); }
.section-heading h2, .panel-head h2, .table-toolbar h2 { color: #e5f8ff; font-family: "Arial Narrow", "Segoe UI", sans-serif; font-weight: 800; text-transform: uppercase; }
.text-link { color: var(--neon); font-family: Consolas, monospace; }
.rank-badge { color: #001015; background: var(--neon); border-color: #05070d; border-radius: 1px; box-shadow: 0 0 10px rgba(0,240,255,.25); }
.rank-2 { background: #a9c4d1; }
.rank-3 { color: #19091b; background: #ff72e5; }

.attendance-card { background: #080d15; border-color: #19384a; border-radius: 3px; clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%); }
.date-block { color: #eaffff; background: linear-gradient(160deg, #071b25, #071019 70%, #120817); border-right: 1px solid rgba(0,240,255,.2); }
.date-block > span { color: var(--neon); font-family: Consolas, monospace; text-transform: uppercase; }
.date-block strong { color: #f1fdff; font-family: Consolas, monospace; text-shadow: 3px 0 rgba(255,43,214,.24), -2px 0 rgba(0,240,255,.24); }
.date-block small { color: #547080; font-family: Consolas, monospace; }
.checkin-form h2, .attendance-success h2, .attendance-closed h2 { color: #e8f9ff; font-family: "Arial Narrow", "Segoe UI", sans-serif; font-weight: 800; text-transform: uppercase; }
.checkin-form > div > p, .attendance-success p, .attendance-closed p { color: #6c8493; }
.success-mark, .lock-mark { display: grid; place-items: center; width: 68px; height: 68px; margin-bottom: 23px; color: #001015; background: var(--acid); border: 1px solid #dfff9e; border-radius: 2px; font-size: 27px; box-shadow: 0 0 0 8px rgba(185,255,57,.04), 0 0 30px rgba(185,255,57,.16); clip-path: polygon(15% 0, 85% 0, 100% 15%, 100% 85%, 85% 100%, 15% 100%, 0 85%, 0 15%); }
.attendance-closed { display: flex; flex-direction: column; justify-content: center; padding: 40px 48px; }
.lock-mark { color: #7890a0; background: #0d1721; border-color: #294354; box-shadow: 0 0 0 8px rgba(80,110,130,.03); }
.next-window { display: grid; gap: 4px; margin-top: 8px; padding: 14px 16px; background: rgba(0,240,255,.045); border: 1px solid rgba(0,240,255,.16); border-left: 3px solid var(--neon); }
.next-window small { color: #5e7e8e; font: 9px Consolas, monospace; letter-spacing: .1em; text-transform: uppercase; }
.next-window strong { color: var(--neon); font-family: Consolas, monospace; }
.attendance-success blockquote { color: #89a4b2; background: #0b141d; border: 1px solid #172d3c; border-radius: 1px; }
.quote-card { color: #e8faff; background: linear-gradient(145deg, #140a1a, #090e18 70%, #071823); border: 1px solid rgba(255,43,214,.22); border-radius: 3px; }
.quote-card > span { color: var(--magenta); text-shadow: 0 0 18px rgba(255,43,214,.35); }
.quote-card blockquote { font-family: "Arial Narrow", "Segoe UI", sans-serif; font-weight: 700; }
.history-item { border-color: #132836; }
.history-dot { color: var(--neon); background: rgba(0,240,255,.07); border: 1px solid rgba(0,240,255,.18); border-radius: 1px; }
.history-item small { color: #597382; }
.history-item time { color: var(--neon); font-family: Consolas, monospace; }
.empty-state { background: #080d15; border-color: #244054; border-radius: 2px; }

.system-status { display: inline-flex; align-items: center; gap: 8px; padding: 8px 11px; color: #ff839a; background: rgba(255,73,108,.06); border: 1px solid rgba(255,73,108,.25); font: 9px Consolas, monospace; letter-spacing: .12em; white-space: nowrap; }
.system-status i { width: 7px; height: 7px; background: var(--danger); box-shadow: 0 0 9px var(--danger); }
.system-status.online { color: var(--acid); background: rgba(185,255,57,.05); border-color: rgba(185,255,57,.22); }
.system-status.online i { background: var(--acid); box-shadow: 0 0 9px var(--acid); animation: neonPulse 1.8s infinite; }
.month-chip { color: var(--neon); background: #07111a; border-color: #1d465a; border-radius: 1px; font-family: Consolas, monospace; }
.podium { color: #eaffff; background: linear-gradient(155deg, #071923, #070b13 55%, #160918); border: 1px solid #1c4a5e; border-radius: 3px; clip-path: polygon(0 0, calc(100% - 25px) 0, 100% 25px, 100% 100%, 0 100%); }
.podium-item { background: rgba(0,240,255,.035); border-color: rgba(0,240,255,.12); border-radius: 2px 2px 0 0; }
.podium-item.place-1 { background: linear-gradient(180deg, rgba(0,240,255,.11), rgba(0,240,255,.025)); border-color: rgba(0,240,255,.28); box-shadow: 0 -18px 50px rgba(0,240,255,.06); }
.podium-avatar { border-color: #2c5568; }
.place-1 .podium-avatar { border-color: var(--neon); box-shadow: 0 0 20px rgba(0,240,255,.22); }
.crown { color: var(--magenta); text-shadow: 0 0 13px var(--magenta); }
.podium-item h3 { color: #e4f9ff; font-family: Consolas, monospace; }
.podium-item p { color: #617b8a; }
.podium-item > strong { color: var(--neon); font-family: Consolas, monospace; }
.ranking-head, .user-table-head { color: #526d7d; background: #070c13; border-color: #172d3b; font-family: Consolas, monospace; }
.ranking-row { border-color: #122633; }
.ranking-row.is-me { background: linear-gradient(90deg, rgba(0,240,255,.08), rgba(0,240,255,.015)); box-shadow: inset 3px 0 0 var(--neon); }
.ranking-number, .days-count { color: #c6f6ff; font-family: Consolas, monospace; }
.average-time { color: var(--magenta); font-family: Consolas, monospace; text-shadow: 0 0 10px rgba(255,43,214,.2); }
.ranking-person strong { color: #d9f4fc; }
.ranking-person strong em, .user-identity strong em { color: #02080b; background: var(--neon); border-radius: 1px; font-family: Consolas, monospace; }
.ranking-person small, .department-label, .ranking-note { color: #5a7483; }

.profile-hero { color: #ebfbff; background: linear-gradient(125deg, #071923, #080e17 55%, #17091b); border: 1px solid #1a4d61; border-radius: 3px; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); }
.profile-hero h2 { color: white; font-family: "Arial Narrow", "Segoe UI", sans-serif; font-weight: 800; text-transform: uppercase; }
.profile-hero p { color: var(--neon); font-family: Consolas, monospace; }
.profile-hero > div > span { color: #6d8796; font-family: Consolas, monospace; }
.profile-total { border-color: rgba(0,240,255,.18); }
.profile-total strong { color: var(--neon); font-family: Consolas, monospace; }
.saved-hint, .module-code { color: var(--neon); background: rgba(0,240,255,.055); border: 1px solid rgba(0,240,255,.18); border-radius: 1px; padding: 5px 8px; font: 8px Consolas, monospace; letter-spacing: .09em; }
.security-note { color: #657e8c; background: #080f17; border: 1px solid #162b38; border-radius: 1px; }

.admin-stats article { background: #090f18; border-color: #183042; border-radius: 2px; }
.admin-stats strong { color: #def8ff; font-family: Consolas, monospace; }
.table-toolbar { border-color: #172d3b; }
.table-toolbar p { color: #5c7482; }
.search-box { background: #070d14; border-color: #1c394b; border-radius: 1px; }
.search-box input { color: #d9f4fc; }
.user-row { border-color: #122633; }
.user-identity strong { color: #d9f4fc; }
.user-identity small { color: #597382; }
.select-wrap select { color: #bfe7f2; background: #08111a; border-color: #1c394b; }
.switch-label > span { background: #1b2b38; border-radius: 1px; border: 1px solid #2c4352; }
.switch-label > span::after { background: #718997; border-radius: 0; }
.switch-label input:checked + span { background: rgba(0,240,255,.18); border-color: var(--neon); box-shadow: 0 0 10px rgba(0,240,255,.1); }
.switch-label input:checked + span::after { background: var(--neon); }
.attendance-count { color: #c6f6ff; font-family: Consolas, monospace; }
.icon-button { color: #86a6b6; background: #08111a; border-color: #1e3a4b; border-radius: 1px; }
.icon-button:hover { color: var(--magenta); border-color: var(--magenta); }
.modal::backdrop { background: rgba(1,3,7,.86); backdrop-filter: blur(6px); }
.modal-card { color: #e8f9ff; background: #080e17; border: 1px solid #1b4b60; border-radius: 3px; box-shadow: 0 0 70px rgba(0,240,255,.08), 0 35px 100px rgba(0,0,0,.75); clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); }
.modal-card h2 { font-family: "Arial Narrow", "Segoe UI", sans-serif; font-weight: 800; text-transform: uppercase; }
.modal-card > p { color: #6b8493; }
.modal-close { color: var(--neon); background: #0b1822; border: 1px solid #21485a; border-radius: 1px; }

.settings-status-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; }
.system-console { position: relative; min-height: 145px; padding: 22px; background: linear-gradient(145deg, #09131d, #070c13); border: 1px solid #183a4d; box-shadow: inset 0 0 30px rgba(0,240,255,.018); clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); }
.system-console::before { content: ""; position: absolute; left: 0; top: 0; width: 42px; height: 2px; background: var(--neon); box-shadow: 0 0 8px var(--neon); }
.console-head { display: flex; align-items: center; justify-content: space-between; color: #597786; font: 9px Consolas, monospace; letter-spacing: .1em; }
.console-head i { width: 7px; height: 7px; background: var(--danger); box-shadow: 0 0 8px var(--danger); }
.console-head i.online { background: var(--acid); box-shadow: 0 0 8px var(--acid); }
.system-console > strong { display: block; margin: 20px 0 5px; color: #edfdff; font: 700 27px Consolas, monospace; letter-spacing: -.04em; text-shadow: 2px 0 rgba(255,43,214,.25), -1px 0 rgba(0,240,255,.3); }
.system-console > p { margin: 0; color: #5a7483; font: 9px Consolas, monospace; }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.settings-panel { min-height: 500px; }
.panel-description { max-width: 540px; margin: 5px 0 0; color: #617b8a; font-size: 11px; }
.cyber-toggle { display: flex; align-items: center; gap: 13px; padding: 15px; background: rgba(0,240,255,.035); border: 1px solid rgba(0,240,255,.14); cursor: pointer; }
.cyber-toggle input { position: absolute; opacity: 0; }
.cyber-toggle > span { position: relative; flex: 0 0 42px; width: 42px; height: 22px; background: #111e29; border: 1px solid #294353; }
.cyber-toggle > span::after { content: ""; position: absolute; top: 4px; left: 4px; width: 12px; height: 12px; background: #526b79; transition: transform .2s, background .2s; }
.cyber-toggle input:checked + span { background: rgba(0,240,255,.16); border-color: var(--neon); box-shadow: 0 0 16px rgba(0,240,255,.12); }
.cyber-toggle input:checked + span::after { transform: translateX(20px); background: var(--neon); box-shadow: 0 0 8px var(--neon); }
.cyber-toggle strong, .cyber-toggle small { display: block; }
.cyber-toggle strong { color: #d8f4fc; font: 11px Consolas, monospace; text-transform: uppercase; }
.cyber-toggle small { color: #597383; font-size: 9px; }
.timezone-lock { display: flex; align-items: center; gap: 12px; padding: 13px 14px; color: #8ccbd8; background: #07131c; border: 1px solid #193b4c; border-left: 3px solid var(--neon); }
.timezone-lock > span { color: var(--neon); font-size: 19px; }
.timezone-lock strong, .timezone-lock small { display: block; }
.timezone-lock strong { font: 10px Consolas, monospace; text-transform: uppercase; }
.timezone-lock small { color: #55707f; font-size: 8px; }
.ranking-rule { display: grid; grid-template-columns: 30px 1fr; align-items: start; gap: 11px; padding: 15px; background: #080f17; border: 1px solid #172d3a; }
.ranking-rule > span { display: grid; place-items: center; width: 26px; height: 26px; color: #031015; background: var(--neon); font: 8px Consolas, monospace; }
.ranking-rule p { margin: 0; color: #5f7887; font-size: 9px; }
.ranking-rule p strong { display: block; color: #bedfe8; font: 10px Consolas, monospace; text-transform: uppercase; }
.faction-panel { margin-top: 18px; }
.faction-add-form { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 13px; margin-bottom: 20px; padding: 17px; background: #070d14; border: 1px solid #172e3c; }
.faction-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.faction-item { display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: 13px; min-height: 76px; padding: 13px 15px; background: #070c13; border: 1px solid #172b39; opacity: .58; }
.faction-item.is-active { opacity: 1; border-color: #21495b; box-shadow: inset 2px 0 0 var(--neon); }
.faction-code { color: var(--neon); font: 9px Consolas, monospace; }
.faction-item strong, .faction-item small { display: block; }
.faction-item strong { color: #d7f3fb; font: 11px Consolas, monospace; text-transform: uppercase; }
.faction-item small { color: #526c7a; font-size: 9px; }
.cyber-empty { margin-top: 8px; }

.error-card { color: #e8f9ff; background: #080d15; border-color: #1a4053; border-radius: 3px; }
.error-card h1 { color: #effcff; font-family: "Arial Narrow", "Segoe UI", sans-serif; font-weight: 800; text-transform: uppercase; }
.error-card p { color: #688190; }

@keyframes neonPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .42; }
}

@media (max-width: 1080px) {
    .settings-grid { grid-template-columns: 1fr; }
    .settings-panel { min-height: 0; }
}

@media (max-width: 800px) {
    .settings-status-grid { grid-template-columns: 1fr 1fr; }
    .system-console:last-child { grid-column: 1 / -1; }
    .faction-list { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .settings-status-grid { grid-template-columns: 1fr; }
    .system-console:last-child { grid-column: auto; }
    .settings-panel, .faction-panel { padding: 21px; }
    .faction-add-form { grid-template-columns: 1fr; }
    .faction-item { grid-template-columns: 48px 1fr; }
    .faction-item form { grid-column: 1 / -1; }
    .faction-item .btn { width: 100%; }
    .attendance-closed { padding: 32px 25px; }
}

/* ================================================================
   VÕ LÂM THEME // MỰC TÀU TRÊN GIẤY TUYÊN
   ================================================================ */
:root {
    --ink: #171614;
    --muted: #746f67;
    --paper: #ebe9e2;
    --card: #f8f7f2;
    --line: #cbc7bd;
    --green: #191816;
    --green-2: #272521;
    --lime: #181715;
    --lime-soft: #e5e2d9;
    --cream: #dfdcd3;
    --warm: #908a80;
    --blue: #64615b;
    --plum: #3b3935;
    --danger: #3b3935;
    --neon: #181715;
    --neon-soft: rgba(24, 23, 21, .07);
    --magenta: #4c4943;
    --acid: #181715;
    --void: #11100f;
    --shadow: 0 18px 55px rgba(36, 32, 26, .09);
    --radius: 2px;
}

body {
    color: var(--ink);
    background:
        radial-gradient(ellipse at 10% 4%, rgba(255,255,255,.8), transparent 28%),
        radial-gradient(ellipse at 92% 14%, rgba(74,67,56,.06), transparent 23%),
        #ebe9e2;
    font-family: "Segoe UI", Arial, sans-serif;
}

body::before {
    opacity: .25;
    background-image:
        repeating-linear-gradient(93deg, transparent 0, transparent 7px, rgba(55,49,40,.025) 8px),
        repeating-linear-gradient(2deg, transparent 0, transparent 11px, rgba(255,255,255,.22) 12px);
    mix-blend-mode: multiply;
}

body::after {
    opacity: 1;
    background:
        radial-gradient(circle at 92% 10%, transparent 0 78px, rgba(25,23,20,.06) 79px 80px, transparent 81px),
        radial-gradient(circle at 92% 10%, transparent 0 108px, rgba(25,23,20,.035) 109px 110px, transparent 111px);
    background-size: auto;
    mask-image: none;
}

::selection { color: #f8f7f2; background: #171614; }
::-webkit-scrollbar-track { background: #dfdcd3; }
::-webkit-scrollbar-thumb { background: #777269; border-color: #dfdcd3; }

.brand { color: #171614; font-family: Georgia, "Times New Roman", serif; font-size: 16px; letter-spacing: .14em; text-shadow: none; }
.brand-mark { width: 38px; height: 38px; color: white; background: #171614; border: 1px solid #171614; border-radius: 50%; clip-path: none; box-shadow: none; font-family: "Times New Roman", serif; font-size: 20px; }
.eyebrow { color: #46423c; font-family: "Segoe UI", sans-serif; font-size: 9px; letter-spacing: .2em; text-shadow: none; }
.eyebrow.light { color: #d8d4ca; }

.public-header { border-color: #cbc7bd; }
.header-note, .public-footer { color: #777269; font-family: "Segoe UI", sans-serif; letter-spacing: .05em; }
.auth-layout { background: #f8f7f2; border: 1px solid #bdb8ad; border-radius: 2px; box-shadow: var(--shadow); clip-path: none; }
.auth-intro { color: #171614; background: #e2dfd6; border-color: #c7c2b7; }
.auth-intro::before { content: "VÕ LÂM · ĐIỂM DANH"; color: rgba(23,22,20,.36); font-family: Georgia, serif; }
.auth-intro::after { border-color: rgba(23,22,20,.12); box-shadow: 0 0 0 40px rgba(23,22,20,.015), 0 0 0 90px rgba(23,22,20,.012); }
.auth-intro h1 { color: #171614; font-family: Georgia, "Times New Roman", serif; font-weight: 500; letter-spacing: -.045em; text-shadow: none; text-transform: none; }
.auth-intro > p, .feature-list p, .auth-card-head p, .auth-help { color: #746f67; }
.feature-list > div > span { color: #171614; border-color: #aaa59a; border-radius: 50%; font-family: Georgia, serif; }
.feature-list strong { color: #272521; font-family: Georgia, serif; text-transform: none; letter-spacing: 0; }
.auth-card { background: #f8f7f2; }
.auth-card::after { content: "BẢO MẬT PHIÊN ĐĂNG NHẬP"; color: #c5c0b5; font-family: "Segoe UI", sans-serif; }
.auth-card-head h2 { color: #171614; font-family: Georgia, serif; font-weight: 500; text-transform: none; }
.step-badge { color: #171614; background: #eeece6; border-color: #b9b4aa; border-radius: 99px; font-family: "Segoe UI", sans-serif; }
.login-visual { color: white; background: #181715; }
.login-visual::before { color: rgba(255,255,255,.35); }
.login-visual::after { border-color: rgba(255,255,255,.13); box-shadow: 0 0 0 55px rgba(255,255,255,.02), 0 0 0 120px rgba(255,255,255,.015); }
.login-visual h1 { color: #f5f3ed; }
.login-visual > p { color: #a8a39a; }
.visual-orbit { border-color: rgba(255,255,255,.2); box-shadow: none; }
.visual-orbit::before, .visual-orbit::after { border-color: rgba(255,255,255,.1); }
.visual-orbit b { color: #171614; background: #f5f3ed; border-radius: 50%; box-shadow: 0 0 0 8px rgba(255,255,255,.04); }
.visual-orbit span { background: #f5f3ed; box-shadow: none; }

.field > span { color: #4f4b44; font-family: "Segoe UI", sans-serif; letter-spacing: .08em; }
.field input, .field textarea, .field select, .select-wrap select { color: #171614; background: #f4f2ec; border-color: #c8c3b8; border-radius: 1px; caret-color: #171614; }
.field input:hover, .field textarea:hover, .field select:hover { border-color: #8e887e; }
.field input:focus, .field textarea:focus, .field select:focus, .select-wrap select:focus { color: #171614; background: white; border-color: #171614; box-shadow: inset 3px 0 0 #171614; }
.field input::placeholder, .field textarea::placeholder { color: #aaa59b; }
.field select option, .select-wrap select option { color: #171614; background: white; }
.field-hint, .char-count { color: #8a857c; font-family: "Segoe UI", sans-serif; }
.password-toggle { color: #171614; font-family: "Segoe UI", sans-serif; }
.form-errors { color: #24211d; background: #e4e0d7; border-color: #979187; }

.btn { border-radius: 1px; clip-path: none; font-family: "Segoe UI", sans-serif; letter-spacing: .06em; }
.btn-primary { color: white; background: #181715; border-color: #181715; box-shadow: none; }
.btn-primary:hover { color: white; background: #34312d; box-shadow: none; }
.btn-secondary, .btn-small { color: #282622; background: #f8f7f2; border-color: #aaa59b; }
.btn-secondary:hover, .btn-small:hover { color: #11100f; background: #ebe8e0; border-color: #171614; }
.btn:disabled { color: #99948b; background: #e3e0d8; border-color: #cac5ba; box-shadow: none; cursor: not-allowed; transform: none; }
.button-check { color: white; background: #35322e; border-radius: 50%; }

.toast { color: #292621; background: #f7f5ef; border-color: #aaa49a; border-radius: 1px; box-shadow: 0 10px 35px rgba(30,27,22,.08); font-family: "Segoe UI", sans-serif; }
.toast > span { background: #171614; border-radius: 50%; box-shadow: none; }
.toast-warning, .toast-error { color: #292621; background: #e9e6de; border-color: #aaa49a; }
.toast-warning > span, .toast-error > span { background: #5c5750; box-shadow: none; }

.sidebar { color: #c8c4ba; background: #181715; border-color: #2d2b27; box-shadow: none; }
.brand-sidebar { color: #f6f4ee; border-color: rgba(255,255,255,.12); }
.brand-sidebar .brand-mark { color: #171614; background: #f5f3ed; border-color: #f5f3ed; }
.nav-link { color: #969188; border-radius: 1px; font-family: "Segoe UI", sans-serif; letter-spacing: .04em; text-transform: none; }
.nav-link:hover { color: white; background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.08); }
.nav-link.is-active { color: #171614; background: #f3f1eb; border-color: #f3f1eb; box-shadow: inset 3px 0 0 #777168; text-shadow: none; }
.nav-label { color: #68635c; font-family: "Segoe UI", sans-serif; }
.sidebar-foot { border-color: rgba(255,255,255,.12); }
.mini-user strong { color: white; }
.mini-user small, .logout-link { color: #8e8980; }
.logout-link:hover { color: white; background: rgba(255,255,255,.06); }

.mobile-header { background: rgba(235,233,226,.95); border-color: #c9c4b9; }
.menu-toggle { color: #171614; background: #f8f7f2; border-color: #aaa59a; }
.page-heading h1 { color: #171614; font-family: Georgia, "Times New Roman", serif; font-weight: 500; letter-spacing: -.04em; text-shadow: none; text-transform: none; }
.page-heading p { color: #746f67; }
.avatar { color: white; border-color: #35322d; border-radius: 50%; clip-path: none; box-shadow: none; filter: grayscale(1); }

.checkin-hero { color: white; background: #191816; border-color: #191816; border-radius: 2px; box-shadow: 0 18px 45px rgba(24,22,18,.12); clip-path: none; }
.checkin-hero::before { border-color: rgba(255,255,255,.11); box-shadow: 0 0 0 45px rgba(255,255,255,.012), 0 0 0 90px rgba(255,255,255,.009); }
.checkin-hero::after { content: "VÕ LÂM · CHUYÊN CẦN"; color: rgba(255,255,255,.3); font-family: Georgia, serif; }
.checkin-hero.is-checked, .checkin-hero.is-locked { background: #25231f; border-color: #25231f; }
.status-pill { color: #d6d2c8; background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.18); border-radius: 99px; font-family: "Segoe UI", sans-serif; letter-spacing: .08em; }
.status-pill i, .is-open .status-pill i, .is-checked .status-pill i { background: #f2f0ea; border-radius: 50%; box-shadow: none; animation: none; }
.hero-copy h2 { font-family: Georgia, serif; font-weight: 500; text-transform: none; }
.hero-copy p { color: #aaa59c; font-family: "Segoe UI", sans-serif; }
.check-orb, .check-orb.complete { color: #171614; background: #f5f3ed; border-color: #f5f3ed; border-radius: 50%; clip-path: none; box-shadow: 0 0 0 8px rgba(255,255,255,.035); }
.check-orb:hover { box-shadow: 0 0 0 13px rgba(255,255,255,.04); }
.check-orb.locked { color: #928d84; background: #34312d; border-color: #5e5a53; box-shadow: none; }

.streak-card, .stat-card, .leader-mini, .panel, .user-table-card, .ranking-card, .history-list { color: #171614; background: #f8f7f2; border-color: #c9c4b9; border-radius: 2px; box-shadow: 0 14px 42px rgba(35,31,25,.06); }
.streak-card::before, .panel::before, .leader-mini::before, .stat-card::before { width: 46px; height: 2px; background: #171614; box-shadow: none; }
.card-icon, .card-icon.warm, .card-icon.blue, .card-icon.plum { color: #171614; background: #ebe8e0; border-color: #c7c2b7; border-radius: 50%; }
.trend { color: #312e29; background: #ebe8e0; border-color: #cbc6bc; border-radius: 99px; font-family: "Segoe UI", sans-serif; }
.big-number, .stat-card strong, .leader-mini > b { color: #171614; font-family: Georgia, serif; text-shadow: none; }
.streak-card > p, .stat-card > div span, .leader-mini > div small { color: #777168; }
.week-day span { color: #8c867d; font-family: "Segoe UI", sans-serif; }
.week-day b { color: #6e6961; background: #ebe8e0; border-color: #d1ccc1; border-radius: 50%; }
.week-day.done b { color: white; background: #171614; border-color: #171614; box-shadow: none; }
.section-heading h2, .panel-head h2, .table-toolbar h2 { color: #171614; font-family: Georgia, serif; font-weight: 500; text-transform: none; }
.text-link { color: #292621; font-family: "Segoe UI", sans-serif; }
.rank-badge { color: white; background: #171614; border-color: #ebe9e2; border-radius: 50%; box-shadow: none; }
.rank-2 { background: #5f5b54; }
.rank-3 { color: white; background: #918b81; }
.points-stat { grid-column: 1 / -1; }
.points-stat > a { margin-left: auto; color: #282520; border-bottom: 1px solid #282520; font-size: 10px; font-weight: 700; }

.attendance-card { background: #f8f7f2; border-color: #c5c0b5; border-radius: 2px; clip-path: none; }
.date-block { color: white; background: #191816; border-color: #191816; }
.date-block > span { color: #d0cbc1; font-family: "Segoe UI", sans-serif; }
.date-block strong { color: white; font-family: Georgia, serif; text-shadow: none; }
.date-block small { color: #99948b; font-family: "Segoe UI", sans-serif; }
.checkin-form h2, .attendance-success h2, .attendance-closed h2 { color: #171614; font-family: Georgia, serif; font-weight: 500; text-transform: none; }
.checkin-form > div > p, .attendance-success p, .attendance-closed p { color: #746f67; }
.success-mark, .lock-mark { color: white; background: #171614; border-color: #171614; border-radius: 50%; clip-path: none; box-shadow: 0 0 0 8px rgba(23,22,20,.04); }
.lock-mark { color: #777168; background: #e2dfd7; border-color: #b9b4aa; }
.next-window { background: #eeece5; border-color: #ccc7bc; border-left-color: #171614; }
.next-window small { color: #777168; font-family: "Segoe UI", sans-serif; }
.next-window strong { color: #171614; font-family: Georgia, serif; }
.attendance-success blockquote { color: #6e6961; background: #eeece6; border-color: #d2cdc2; }
.quote-card { color: white; background: #292722; border-color: #292722; border-radius: 2px; }
.quote-card > span { color: white; text-shadow: none; }
.quote-card blockquote { font-family: Georgia, serif; font-weight: 500; }
.history-item { border-color: #ddd9cf; }
.history-dot { color: white; background: #171614; border-color: #171614; border-radius: 50%; }
.history-item small { color: #7b766d; }
.history-item time { color: #171614; font-family: Georgia, serif; }
.empty-state { color: #171614; background: #f8f7f2; border-color: #bcb7ac; border-radius: 2px; }

.system-status, .system-status.online { color: #292621; background: #f7f5ef; border-color: #aaa49a; font-family: "Segoe UI", sans-serif; }
.system-status i, .system-status.online i { background: #171614; border-radius: 50%; box-shadow: none; animation: none; }
.month-chip { color: #292621; background: #f8f7f2; border-color: #bdb8ad; border-radius: 99px; font-family: "Segoe UI", sans-serif; }
.podium { color: white; background: #191816; border-color: #191816; border-radius: 2px; clip-path: none; }
.podium-item, .podium-item.place-1 { background: rgba(255,255,255,.035); border-color: rgba(255,255,255,.13); border-radius: 2px 2px 0 0; box-shadow: none; }
.podium-avatar, .place-1 .podium-avatar { border-color: #d5d1c7; box-shadow: none; }
.crown { color: white; text-shadow: none; }
.podium-item h3 { color: white; font-family: Georgia, serif; }
.podium-item p { color: #a8a39b; }
.podium-item > strong { color: white; font-family: Georgia, serif; }
.ranking-head, .user-table-head { color: #777168; background: #efede7; border-color: #d3cec4; font-family: "Segoe UI", sans-serif; }
.ranking-row { border-color: #dedad0; }
.ranking-row.is-me { background: #edeae2; box-shadow: inset 3px 0 0 #171614; }
.ranking-number, .days-count, .average-time { color: #171614; font-family: Georgia, serif; text-shadow: none; }
.ranking-person strong { color: #24211d; }
.ranking-person strong em, .user-identity strong em { color: white; background: #171614; border-radius: 99px; font-family: "Segoe UI", sans-serif; }
.ranking-person small, .department-label, .ranking-note { color: #777168; }

.profile-hero { color: white; background: #191816; border-color: #191816; border-radius: 2px; clip-path: none; }
.profile-hero h2 { color: white; font-family: Georgia, serif; font-weight: 500; text-transform: none; }
.profile-hero p { color: #d5d1c7; font-family: "Segoe UI", sans-serif; }
.profile-hero > div > span { color: #99948b; font-family: "Segoe UI", sans-serif; }
.profile-total { border-color: rgba(255,255,255,.2); }
.profile-total strong { color: white; font-family: Georgia, serif; }
.saved-hint, .module-code { color: #34312c; background: #ebe8e0; border-color: #c6c1b6; border-radius: 99px; font-family: "Segoe UI", sans-serif; }
.security-note { color: #6e6961; background: #efede7; border-color: #d1ccc1; }

.admin-stats article { color: #171614; background: #f8f7f2; border-color: #c9c4b9; border-radius: 2px; }
.admin-stats strong { color: #171614; font-family: Georgia, serif; }
.table-toolbar { border-color: #d2cdc2; }
.table-toolbar p { color: #777168; }
.search-box { background: #f1efe9; border-color: #c9c4b9; }
.search-box input { color: #171614; }
.user-row { border-color: #dedad0; }
.user-identity strong { color: #24211d; }
.user-identity small { color: #7b766d; }
.select-wrap select { color: #292621; background: #f5f3ed; border-color: #c7c2b7; }
.switch-label > span { background: #d6d2c8; border-color: #bcb7ac; border-radius: 99px; }
.switch-label > span::after { background: white; border-radius: 50%; }
.switch-label input:checked + span { background: #171614; border-color: #171614; box-shadow: none; }
.switch-label input:checked + span::after { background: white; }
.attendance-count { color: #171614; font-family: Georgia, serif; }
.icon-button { color: #5d5851; background: #f6f4ee; border-color: #c7c2b7; }
.icon-button:hover { color: #171614; border-color: #171614; }
.modal::backdrop { background: rgba(18,16,13,.72); backdrop-filter: blur(4px); }
.modal-card { color: #171614; background: #f8f7f2; border-color: #a9a399; border-radius: 2px; box-shadow: 0 30px 90px rgba(25,22,18,.28); clip-path: none; }
.modal-card h2 { font-family: Georgia, serif; font-weight: 500; text-transform: none; }
.modal-card > p { color: #746f67; }
.modal-close { color: #171614; background: #ebe8e0; border-color: #c5c0b5; border-radius: 50%; }

.settings-status-grid .system-console { color: #171614; background: #f8f7f2; border-color: #c9c4b9; box-shadow: none; clip-path: none; }
.system-console::before { background: #171614; box-shadow: none; }
.console-head { color: #777168; font-family: "Segoe UI", sans-serif; }
.console-head i, .console-head i.online { background: #171614; border-radius: 50%; box-shadow: none; }
.system-console > strong { color: #171614; font-family: Georgia, serif; text-shadow: none; }
.system-console > p { color: #777168; font-family: "Segoe UI", sans-serif; }
.panel-description { color: #746f67; }
.cyber-toggle { background: #eeece6; border-color: #cbc6bb; }
.cyber-toggle > span { background: #d4d0c6; border-color: #aaa59a; border-radius: 99px; }
.cyber-toggle > span::after { background: white; border-radius: 50%; }
.cyber-toggle input:checked + span { background: #171614; border-color: #171614; box-shadow: none; }
.cyber-toggle input:checked + span::after { background: white; box-shadow: none; }
.cyber-toggle strong { color: #24211d; font-family: "Segoe UI", sans-serif; text-transform: none; }
.cyber-toggle small { color: #777168; }
.timezone-lock { color: #3c3934; background: #eeece6; border-color: #cbc6bb; border-left-color: #171614; }
.timezone-lock > span { color: #171614; }
.timezone-lock strong { font-family: "Segoe UI", sans-serif; text-transform: none; }
.timezone-lock small { color: #777168; }
.ranking-rule { background: #efede7; border-color: #d0cbc0; }
.ranking-rule > span { color: white; background: #171614; font-family: Georgia, serif; border-radius: 50%; }
.ranking-rule p { color: #777168; }
.ranking-rule p strong { color: #292621; font-family: "Segoe UI", sans-serif; text-transform: none; }
.faction-add-form { background: #efede7; border-color: #d0cbc0; }
.faction-item { background: #f3f1eb; border-color: #d2cdc2; }
.faction-item.is-active { border-color: #8e887f; box-shadow: inset 2px 0 0 #171614; }
.faction-code { color: #3d3934; font-family: Georgia, serif; }
.faction-item strong { color: #292621; font-family: Georgia, serif; text-transform: none; }
.faction-item small { color: #777168; }

/* Kho quà và yêu cầu đổi quà */
.points-balance { min-width: 220px; padding: 18px 22px; color: white; background: #191816; border: 1px solid #191816; text-align: right; }
.points-balance small, .points-balance strong, .points-balance span { display: block; }
.points-balance small { color: #aaa59c; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.points-balance strong { margin: 3px 0; font: 500 42px Georgia, serif; }
.points-balance span { color: #99948b; font-size: 9px; }
.gift-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gift-card { position: relative; display: flex; flex-direction: column; min-height: 360px; padding: 27px; overflow: hidden; color: #171614; background: #f8f7f2; border: 1px solid #c7c2b7; box-shadow: 0 15px 45px rgba(35,31,25,.06); }
.gift-card::after { content: ""; position: absolute; width: 170px; height: 170px; right: -85px; top: -85px; border: 1px solid rgba(23,22,20,.1); border-radius: 50%; box-shadow: 0 0 0 24px rgba(23,22,20,.018), 0 0 0 50px rgba(23,22,20,.012); }
.gift-card.can-redeem { border-color: #5b564e; box-shadow: inset 0 3px 0 #171614, 0 15px 45px rgba(35,31,25,.07); }
.gift-ordinal { color: #9a958c; font: 10px Georgia, serif; }
.gift-seal { display: grid; place-items: center; width: 62px; height: 62px; margin: 20px 0 25px; color: white; background: #171614; border-radius: 50%; font: 26px "Times New Roman", serif; }
.gift-copy { position: relative; z-index: 1; }
.gift-copy h2 { margin: 0 0 8px; font: 500 24px Georgia, serif; }
.gift-copy p { min-height: 45px; margin: 0; color: #746f67; font-size: 11px; }
.gift-cost { display: flex; align-items: baseline; gap: 8px; margin: 22px 0 16px; padding-top: 17px; border-top: 1px solid #d7d3c9; }
.gift-cost strong { font: 500 31px Georgia, serif; }
.gift-cost span { color: #777168; font-size: 9px; }
.gift-action { margin-top: auto; }
.request-list { overflow: hidden; background: #f8f7f2; border: 1px solid #c9c4b9; }
.request-item { display: grid; grid-template-columns: 70px minmax(220px, 1fr) 110px 120px; align-items: center; gap: 16px; min-height: 76px; padding: 12px 20px; border-bottom: 1px solid #dedad0; }
.request-item:last-child { border-bottom: 0; }
.request-id { color: #89847b; font: 11px Georgia, serif; }
.request-main strong, .request-main small { display: block; }
.request-main strong { font: 500 14px Georgia, serif; }
.request-main small { color: #7b766d; font-size: 9px; }
.request-cost { font: 500 13px Georgia, serif; }
.request-status { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 7px 9px; color: #4f4b44; background: #ebe8e0; border: 1px solid #c7c2b7; border-radius: 99px; font-size: 9px; font-weight: 700; white-space: nowrap; }
.request-status i { width: 6px; height: 6px; background: #777168; border-radius: 50%; }
.request-status.status-done { color: white; background: #171614; border-color: #171614; }
.request-status.status-done i { background: white; }
.compact-empty { padding: 35px; }

.admin-gift-list { display: grid; gap: 11px; }
.admin-gift-item { display: grid; grid-template-columns: 65px minmax(170px,.9fr) minmax(220px,1.3fr) 115px 110px 125px; align-items: end; gap: 13px; padding: 18px; background: #f8f7f2; border: 1px solid #c9c4b9; box-shadow: 0 10px 35px rgba(35,31,25,.04); }
.gift-item-mark { align-self: center; text-align: center; }
.gift-item-mark span { display: grid; place-items: center; width: 42px; height: 42px; margin: auto; color: white; background: #171614; border-radius: 50%; font: 18px "Times New Roman", serif; }
.gift-item-mark small { display: block; margin-top: 4px; color: #89847b; font: 8px Georgia, serif; }
.gift-active-switch { align-self: center; }
.gift-item-meta { align-self: center; display: grid; justify-items: end; gap: 7px; }
.gift-item-meta > span { color: #7b766d; font-size: 9px; }
.admin-gift-empty .btn { margin-top: 16px; }

.request-counter { padding: 9px 13px; color: white; background: #171614; font-size: 10px; }
.request-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; }
.request-summary article { display: flex; align-items: center; gap: 16px; padding: 20px; background: #f8f7f2; border: 1px solid #c9c4b9; }
.request-summary article > span { display: grid; place-items: center; width: 42px; height: 42px; color: white; background: #171614; border-radius: 50%; font: 17px "Times New Roman", serif; }
.request-summary strong, .request-summary small { display: block; }
.request-summary strong { font: 500 28px Georgia, serif; }
.request-summary small { color: #777168; font-size: 9px; }
.admin-request-list { display: grid; gap: 10px; }
.admin-request-item { display: grid; grid-template-columns: 60px minmax(240px,1.3fr) minmax(150px,.8fr) 125px 115px 150px; align-items: center; gap: 14px; min-height: 92px; padding: 16px 18px; background: #f8f7f2; border: 1px solid #c9c4b9; }
.admin-request-item.status-processing { box-shadow: inset 3px 0 0 #171614; }
.admin-request-item.status-done { opacity: .72; }
.request-number { color: #89847b; font: 11px Georgia, serif; }
.request-user { display: flex; align-items: center; gap: 11px; min-width: 0; }
.request-user > div { min-width: 0; }
.request-user strong, .request-user small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.request-user strong { font: 500 14px Georgia, serif; }
.request-user small { color: #777168; font-size: 8px; }
.request-gift small, .request-gift strong, .request-gift span, .request-time small, .request-time strong, .request-time span { display: block; }
.request-gift small, .request-time small { color: #8b867d; font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }
.request-gift strong { font: 500 13px Georgia, serif; }
.request-gift span, .request-time span { color: #777168; font-size: 8px; }
.request-time strong { font: 500 17px Georgia, serif; }
.request-action { text-align: right; }
.request-action > span { color: #777168; font-size: 8px; }
.request-action > span strong { color: #292621; }

.error-card { color: #171614; background: #f8f7f2; border-color: #aaa49a; }
.error-card h1 { color: #171614; font-family: Georgia, serif; font-weight: 500; text-transform: none; }
.error-card p { color: #746f67; }

@media (max-width: 1180px) {
    .gift-grid { grid-template-columns: repeat(2, 1fr); }
    .admin-gift-item { grid-template-columns: 55px 1fr 1fr 100px; }
    .gift-active-switch, .gift-item-meta { grid-column: span 2; justify-self: end; }
    .admin-request-item { grid-template-columns: 55px minmax(230px,1fr) 135px 105px; }
    .admin-request-item > .request-status, .admin-request-item > .request-action { grid-column: span 2; justify-self: end; }
}

@media (max-width: 800px) {
    .gift-grid { grid-template-columns: 1fr 1fr; }
    .request-item { grid-template-columns: 55px 1fr 100px; }
    .request-item > .request-status { grid-column: 2 / -1; justify-self: start; }
    .admin-gift-item { grid-template-columns: 48px 1fr 1fr; }
    .gift-description-field { grid-column: 2 / -1; }
    .gift-price-field { grid-column: 2; }
    .gift-active-switch { grid-column: 3; }
    .gift-item-meta { grid-column: 2 / -1; display: flex; align-items: center; justify-content: flex-end; }
    .admin-request-item { grid-template-columns: 50px 1fr 115px; }
    .request-gift { grid-column: 2; }
    .request-time { grid-column: 3; }
    .admin-request-item > .request-status { grid-column: 2; justify-self: start; }
    .admin-request-item > .request-action { grid-column: 3; }
}

@media (max-width: 600px) {
    .rewards-heading { display: block; }
    .points-balance { margin-top: 18px; text-align: left; }
    .gift-grid { grid-template-columns: 1fr; }
    .gift-card { min-height: 330px; }
    .request-item { grid-template-columns: 1fr auto; gap: 7px 12px; padding: 15px; }
    .request-id { grid-column: 1; }
    .request-main { grid-column: 1 / -1; }
    .request-cost { grid-column: 1; }
    .request-item > .request-status { grid-column: 2; grid-row: 3; }
    .admin-gift-item { grid-template-columns: 1fr; align-items: stretch; }
    .gift-item-mark, .gift-description-field, .gift-price-field, .gift-active-switch, .gift-item-meta { grid-column: auto; justify-self: stretch; }
    .gift-item-mark { display: flex; align-items: center; gap: 9px; }
    .gift-item-mark span { margin: 0; }
    .gift-item-meta { justify-content: space-between; }
    .request-summary { grid-template-columns: 1fr; }
    .admin-request-item { grid-template-columns: 1fr; }
    .request-number, .request-user, .request-gift, .request-time, .admin-request-item > .request-status, .admin-request-item > .request-action { grid-column: auto; justify-self: stretch; text-align: left; }
    .request-action .btn { width: 100%; }
}

/* Data, tồn kho, ảnh xác nhận và nhật ký */
.gift-stock { display: flex; align-items: center; gap: 8px; min-height: 32px; margin: -4px 0 14px; color: #68635b; font-size: 9px; }
.gift-stock > span { display: grid; place-items: center; min-width: 27px; height: 27px; padding: 0 6px; color: white; background: #171614; border-radius: 50%; font: 500 12px Georgia, serif; }
.gift-stock.is-empty { color: #8d877e; }
.gift-stock.is-empty > span { background: #a9a39a; }
.request-view-button { width: 100%; color: inherit; background: transparent; border: 0; text-align: left; cursor: pointer; font: inherit; }
.request-view-button:hover { background: #efede6; }
.request-view-button:focus-visible { outline: 2px solid #171614; outline-offset: -2px; }
.reward-detail-modal { width: min(620px, calc(100% - 28px)); }
.reward-detail-meta { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 12px 0; border-top: 1px solid #d3cec4; border-bottom: 1px solid #d3cec4; }
.reward-detail-meta > span:first-child { font: 500 18px Georgia, serif; }
.completion-photo { margin: 0; }
.completion-photo img { display: block; width: 100%; max-height: 430px; object-fit: contain; background: #e5e2da; border: 1px solid #c8c3b8; }
.completion-photo figcaption { margin-top: 7px; color: #7b766d; font-size: 9px; text-align: center; }
.no-completion-photo { display: grid; place-items: center; min-height: 150px; padding: 25px; color: #777168; background: #eeece6; border: 1px dashed #bdb8ad; text-align: center; }

.admin-gift-item { grid-template-columns: 65px minmax(150px,.8fr) minmax(190px,1.15fr) 100px 100px 100px 140px; }
.gift-stock-field .field-hint { margin-top: -3px; white-space: nowrap; }
.proof-upload { display: grid; gap: 2px; margin-bottom: 8px; padding: 8px 10px; background: #efede7; border: 1px dashed #aaa49a; text-align: left; cursor: pointer; }
.proof-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.proof-upload span { color: #292621; font-size: 9px; font-weight: 750; }
.proof-upload small { color: #827d74; font-size: 7px; }
.proof-upload:focus-within, .proof-upload:hover { border-color: #171614; }
.proof-upload.has-file { background: #dedad1; border-style: solid; border-color: #171614; }
.complete-request-form { min-width: 185px; }
.complete-request-form .btn { width: 100%; }
.completed-proof { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.completed-proof a { flex: 0 0 auto; }
.completed-proof img { display: block; width: 52px; height: 52px; object-fit: cover; background: #e5e2da; border: 1px solid #aaa49a; }
.completed-proof > span { color: #777168; font-size: 8px; }
.completed-proof > span strong { color: #292621; }
.admin-request-item { grid-template-columns: 60px minmax(220px,1.2fr) minmax(130px,.7fr) 115px 110px minmax(190px,.9fr); }

.data-health { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; color: #4e4a43; background: #e8e5dd; border: 1px solid #bdb8ad; font-size: 9px; font-weight: 700; }
.data-health i { width: 7px; height: 7px; background: #7a756c; border-radius: 50%; }
.data-health.is-healthy { color: white; background: #171614; border-color: #171614; }
.data-health.is-healthy i { background: white; }
.data-overview { display: grid; grid-template-columns: 1.25fr .75fr; gap: 18px; margin-bottom: 18px; }
.database-card { position: relative; display: flex; align-items: center; gap: 22px; min-height: 190px; padding: 32px; overflow: hidden; color: white; background: #191816; }
.database-card::after { content: ""; position: absolute; width: 210px; height: 210px; right: -70px; top: -70px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; box-shadow: 0 0 0 35px rgba(255,255,255,.018), 0 0 0 72px rgba(255,255,255,.012); }
.database-mark { display: grid; place-items: center; flex: 0 0 72px; height: 72px; color: #171614; background: #f5f3ed; border-radius: 50%; font: 28px "Times New Roman", serif; }
.database-card > div { position: relative; z-index: 1; min-width: 0; }
.database-card .eyebrow { color: #aaa59c; }
.database-card h2 { margin: 0; font: 500 25px Georgia, serif; }
.database-card p { max-width: 380px; margin: 4px 0 0; overflow: hidden; color: #8f8a81; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.database-card > strong { position: relative; z-index: 1; margin-left: auto; font: 500 27px Georgia, serif; white-space: nowrap; }
.backup-card { padding: 27px; background: #f8f7f2; border: 1px solid #c9c4b9; }
.backup-card h2 { margin: 0 0 7px; font: 500 23px Georgia, serif; }
.backup-card p { margin: 0 0 18px; color: #746f67; font-size: 10px; }
.backup-card > small { display: block; margin-top: 10px; color: #89847b; font-size: 8px; text-align: center; }
.data-table-panel { margin-top: 0; }
.data-table-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.data-table-list article { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 15px; background: #efede7; border: 1px solid #d2cdc2; }
.data-table-list span { color: #302d28; font: 500 12px Georgia, serif; }
.data-table-list code { grid-column: 1; color: #8a857c; font-size: 8px; }
.data-table-list strong { grid-column: 2; grid-row: 1 / 3; align-self: center; font: 500 22px Georgia, serif; }
.backup-warning { display: flex; align-items: center; gap: 13px; margin-top: 16px; padding: 15px 18px; color: #5f5a52; background: #dfdcd3; border-left: 3px solid #171614; font-size: 9px; }
.backup-warning > span { display: grid; place-items: center; flex: 0 0 27px; height: 27px; color: white; background: #171614; border-radius: 50%; font-weight: 800; }
.backup-warning p { margin: 0; }

.log-totals { display: flex; gap: 8px; }
.log-totals span { padding: 9px 12px; color: #67625a; background: #f8f7f2; border: 1px solid #c9c4b9; font-size: 9px; }
.log-totals strong { color: #171614; font: 500 16px Georgia, serif; }
.log-panel { overflow: hidden; background: #f8f7f2; border: 1px solid #c9c4b9; }
.log-toolbar { display: flex; align-items: center; gap: 8px; padding: 18px; border-bottom: 1px solid #d3cec4; }
.log-toolbar .search-box { flex: 1; max-width: 480px; }
.log-toolbar > span { margin-left: auto; color: #89847b; font-size: 8px; }
.audit-list { overflow-x: auto; }
.audit-head, .audit-row { display: grid; grid-template-columns: 110px 155px minmax(180px,.8fr) minmax(260px,1.4fr) 115px; align-items: center; gap: 15px; min-width: 900px; }
.audit-head { min-height: 42px; padding: 0 18px; color: #7e7970; background: #efede7; border-bottom: 1px solid #d3cec4; font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.audit-row { min-height: 72px; padding: 10px 18px; border-bottom: 1px solid #dedad0; }
.audit-row:last-child { border-bottom: 0; }
.audit-row time { font: 500 15px Georgia, serif; }
.audit-row time small, .audit-user small { display: block; color: #89847b; font: 8px "Segoe UI", sans-serif; }
.audit-user strong { display: block; font-size: 10px; }
.audit-action { color: #2b2824; font-size: 10px; font-weight: 700; }
.audit-action code { display: block; margin-top: 2px; color: #918c83; font-size: 7px; font-weight: 400; }
.audit-row p { margin: 0; color: #69645c; font-size: 9px; }
.audit-ip { color: #777168; font-size: 8px; }

@media (max-width: 1180px) {
    .admin-gift-item { grid-template-columns: 55px 1fr 1fr 95px 95px; }
    .gift-active-switch, .gift-item-meta { grid-column: span 2; }
    .admin-request-item { grid-template-columns: 55px minmax(220px,1fr) 125px 105px; }
}

@media (max-width: 800px) {
    .data-overview { grid-template-columns: 1fr; }
    .data-table-list { grid-template-columns: repeat(2, 1fr); }
    .admin-gift-item { grid-template-columns: 48px 1fr 1fr; }
    .gift-stock-field { grid-column: 3; }
    .admin-request-item { grid-template-columns: 50px 1fr 120px; }
    .complete-request-form { min-width: 0; }
}

@media (max-width: 600px) {
    .request-view-button { display: grid; }
    .data-health, .log-totals { margin-top: 15px; }
    .database-card { display: grid; grid-template-columns: 64px 1fr; padding: 24px; }
    .database-mark { width: 58px; height: 58px; }
    .database-card > strong { grid-column: 2; margin: 0; }
    .data-table-list { grid-template-columns: 1fr; }
    .log-toolbar { align-items: stretch; flex-wrap: wrap; }
    .log-toolbar .search-box { flex: 1 0 100%; max-width: none; }
    .log-toolbar > span { width: 100%; margin: 4px 0 0; }
    .gift-stock-field { grid-column: auto; }
    .completed-proof { justify-content: flex-start; }
}

/* Ảnh quà, trạng thái huỷ và bộ font hỗ trợ đầy đủ tiếng Việt */
body, button, input, textarea, select { font-family: var(--font-vi-sans); }
.brand, .brand-mark, .auth-intro h1, .auth-card-head h2, .page-heading h1,
.hero-copy h2, .big-number, .stat-card strong, .section-heading h2,
.leader-mini > b, .date-block strong, .checkin-form h2, .attendance-success h2,
.attendance-closed h2, .quote-card blockquote, .history-item time, .podium-item h3,
.podium-item > strong, .ranking-number, .days-count, .average-time, .profile-hero h2,
.profile-total strong, .panel-head h2, .table-toolbar h2, .admin-stats strong,
.attendance-count, .modal-card h2, .error-card h1, .points-balance strong,
.gift-ordinal, .gift-copy h2, .gift-cost strong, .request-id, .request-main strong,
.request-cost, .gift-item-mark small, .request-summary strong, .request-number,
.request-user strong, .request-gift strong, .request-time strong, .gift-stock > span,
.reward-detail-meta > span:first-child, .database-card h2, .database-card > strong,
.backup-card h2, .data-table-list span, .data-table-list strong, .log-totals strong,
.audit-row time { font-family: var(--font-vi-serif); }

.gift-image { position: relative; z-index: 1; display: block; width: calc(100% + 54px); height: 155px; margin: -27px -27px 21px; object-fit: cover; background: #e5e2da; border-bottom: 1px solid #c7c2b7; }
.gift-item-mark img { display: block; width: 56px; height: 56px; margin: 0 auto; object-fit: cover; background: #e5e2da; border: 1px solid #aaa49a; }
.gift-image-upload { position: relative; display: block; margin-top: 6px; color: #5f5a52; font-size: 8px; cursor: pointer; }
.gift-image-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.gift-image-upload b { font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.gift-image-upload:hover b, .gift-image-upload:focus-within b { color: #171614; }
.gift-create-upload { margin-bottom: 2px; }

.request-status.status-cancelled { color: #6c332f; background: #f5e3e0; border-color: #d9aaa5; }
.request-status.status-cancelled i { background: #a8443d; }
.admin-request-item.status-cancelled { opacity: .68; border-style: dashed; }
.request-summary { grid-template-columns: repeat(4, 1fr); }
.pending-request-actions { display: grid; gap: 7px; min-width: 185px; }
.btn-danger { color: #7c302b; background: #f8e9e7; border-color: #d8aaa6; }
.btn-danger:hover { color: white; background: #983f38; border-color: #983f38; }
.cancel-request-form .btn { width: 100%; min-height: 34px; padding: 7px 12px; }

@media (max-width: 900px) {
    .request-summary { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .request-summary { grid-template-columns: 1fr; }
    .gift-image { height: 170px; }
    .gift-item-mark img { margin: 0; }
}

/* Nhận diện Nghịch Thủy Hàn */
.brand-game-icon { display: block; flex: 0 0 auto; width: 40px; height: 40px; object-fit: cover; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; box-shadow: 0 5px 16px rgba(0,0,0,.2); }
.public-header .brand-game-icon, .mobile-header .brand-game-icon { border-color: #aaa49a; }
.brand-sidebar { padding-bottom: 24px; }
.main-nav { min-height: 0; overflow-y: auto; padding-right: 3px; scrollbar-width: thin; scrollbar-color: #625d55 transparent; }
.main-nav::-webkit-scrollbar { width: 4px; }
.main-nav::-webkit-scrollbar-thumb { background: #625d55; }

/* Chi tiết từng yêu cầu đổi quà */
.admin-request-item[data-request-card] { cursor: pointer; transition: background .18s, border-color .18s, transform .18s; }
.admin-request-item[data-request-card]:hover { background: #efede6; border-color: #918b81; transform: translateY(-1px); }
.admin-request-item[data-request-card]:focus-visible { outline: 2px solid #171614; outline-offset: 2px; }
.request-number small { display: block; margin-top: 5px; color: #777168; font: 7px var(--font-vi-sans); text-decoration: underline; text-underline-offset: 2px; }
.admin-request-detail-modal { width: min(760px, calc(100% - 28px)); }
.admin-request-detail-modal .modal-card { gap: 18px; }
.request-detail-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.request-detail-title h2 { margin: 0; }
.request-detail-title p { margin: 3px 0 0; color: #777168; font-size: 10px; }
.request-detail-person { display: flex; align-items: center; gap: 13px; padding: 16px; color: white; background: #191816; }
.request-detail-person strong, .request-detail-person span { display: block; }
.request-detail-person strong { font-family: var(--font-vi-serif); font-size: 18px; }
.request-detail-person span { color: #aaa59c; font-size: 9px; }
.request-detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.request-detail-grid article { min-height: 92px; padding: 15px; background: #efede7; border: 1px solid #d2cdc2; }
.request-detail-grid small, .request-detail-grid strong, .request-detail-grid span { display: block; }
.request-detail-grid small { color: #89847b; font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.request-detail-grid strong { margin-top: 6px; font-family: var(--font-vi-serif); font-size: 16px; }
.request-detail-grid span { margin-top: 3px; color: #7b766d; font-size: 8px; }
.request-detail-photo img { max-height: 350px; }

/* Vòng quay thưởng */
.lucky-heading { align-items: center; }
.lucky-date { min-width: 180px; padding: 15px 18px; color: white; background: #191816; text-align: right; }
.lucky-date small, .lucky-date strong, .lucky-date span { display: block; }
.lucky-date small { color: #aaa59c; font-size: 8px; letter-spacing: .1em; }
.lucky-date strong { margin: 2px 0; font-family: var(--font-vi-serif); font-size: 29px; font-weight: 500; }
.lucky-date span { color: #c9c4b9; font-size: 9px; }
.lucky-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.lucky-stats article { display: flex; align-items: center; gap: 14px; min-height: 82px; padding: 16px; background: #f8f7f2; border: 1px solid #c9c4b9; }
.lucky-stats article > span { display: grid; place-items: center; flex: 0 0 39px; height: 39px; color: white; background: #171614; border-radius: 50%; font-size: 10px; font-weight: 800; }
.lucky-stats strong, .lucky-stats small { display: block; }
.lucky-stats strong { font-family: var(--font-vi-serif); font-size: 24px; line-height: 1; }
.lucky-stats small { margin-top: 4px; color: #777168; font-size: 8px; }
.prize-track { display: flex; gap: 9px; margin: -4px 0 18px; padding: 3px 0 7px; overflow-x: auto; }
.prize-track article { display: flex; align-items: center; gap: 10px; flex: 0 0 145px; min-height: 62px; padding: 11px; background: #efede7; border: 1px solid #d2cdc2; opacity: .6; }
.prize-track article > span { display: grid; place-items: center; flex: 0 0 31px; height: 31px; color: white; background: #706b63; border-radius: 50%; font-size: 8px; font-weight: 800; }
.prize-track small, .prize-track strong { display: block; }
.prize-track small { color: #817b72; font-size: 7px; letter-spacing: .09em; }
.prize-track strong { margin-top: 2px; font-family: var(--font-vi-serif); font-size: 14px; }
.prize-track .is-current { background: #f8f7f2; border-color: #171614; box-shadow: inset 3px 0 0 #171614; opacity: 1; }
.prize-track .is-current > span { color: #171614; background: #d8b469; }
.prize-track .is-complete { opacity: .75; }
.prize-track .is-complete > span { background: #315c43; }
.lucky-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(310px, .65fr); gap: 18px; }
.wheel-panel { min-width: 0; padding: 28px; color: white; background: #191816; border: 1px solid #191816; }
.wheel-stage { position: relative; width: min(100%, 650px); aspect-ratio: 1; margin: 0 auto; }
.wheel-stage canvas { display: block; width: 100%; height: 100%; filter: drop-shadow(0 22px 28px rgba(0,0,0,.27)); }
.wheel-pointer { position: absolute; z-index: 4; top: -5px; left: 50%; width: 0; height: 0; transform: translateX(-50%); border-left: 21px solid transparent; border-right: 21px solid transparent; border-top: 43px solid #d8b469; filter: drop-shadow(0 4px 2px rgba(0,0,0,.32)); }
.wheel-hub { position: absolute; z-index: 3; inset: 50% auto auto 50%; display: grid; place-items: center; width: 102px; height: 102px; transform: translate(-50%, -50%); color: #171614; background: #f7f4ec; border: 7px solid #171614; border-radius: 50%; box-shadow: 0 0 0 3px #f7f4ec; pointer-events: none; }
.wheel-hub span, .wheel-hub small { display: block; line-height: 1; }
.wheel-hub span { font-family: var(--font-vi-serif); font-size: 25px; font-weight: 700; }
.wheel-hub small { margin-top: -15px; font-size: 7px; letter-spacing: .13em; }
.spin-form { display: grid; justify-items: center; gap: 8px; width: min(100%, 520px); margin: 24px auto 0; }
.spin-form .btn { width: 100%; color: #171614; background: #d8b469; box-shadow: none; }
.spin-form .btn:hover { background: #e5c47c; }
.spin-form .btn:disabled { color: #777168; background: #d8d3c9; cursor: not-allowed; transform: none; }
.spin-form small { color: #8f8a81; font-size: 8px; text-align: center; }
.lucky-side { display: grid; align-content: start; gap: 18px; }
.lucky-settings, .eligible-panel { padding: 23px; }
.prize-input-list { display: grid; gap: 7px; max-height: 330px; overflow-y: auto; }
.prize-input-row { display: grid; grid-template-columns: 62px minmax(0, 1fr) 32px; align-items: center; gap: 8px; padding: 8px; background: #efede7; border: 1px solid #d2cdc2; }
.prize-input-row > span { color: #6f6961; font-size: 8px; font-weight: 800; letter-spacing: .06em; }
.prize-input-row .field { position: relative; }
.prize-input-row .field input { padding-right: 46px; background: #f9f8f4; }
.prize-input-row .field small { position: absolute; right: 10px; bottom: 13px; color: #777168; font-size: 7px; pointer-events: none; }
.prize-input-row > button { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; color: #5f5a52; background: transparent; border: 1px solid #bdb7ac; cursor: pointer; }
.prize-input-row > button:hover:not(:disabled) { color: white; background: #171614; }
.prize-input-row > button:disabled { opacity: .3; cursor: not-allowed; }
.add-prize-button { width: 100%; border-style: dashed; }
.eligible-list { display: grid; max-height: 420px; overflow-y: auto; border-top: 1px solid #dedad0; }
.eligible-list article { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 11px 0; border-bottom: 1px solid #dedad0; }
.eligible-list article > div { min-width: 0; }
.eligible-list strong, .eligible-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eligible-list strong { font-family: var(--font-vi-serif); font-size: 12px; }
.eligible-list small { color: #777168; font-size: 8px; }
.eligible-list b { margin-left: auto; color: white; background: #171614; padding: 4px 6px; font-size: 6px; letter-spacing: .08em; }
.eligible-list .is-ineligible { opacity: .45; }
.eligible-list .has-won { opacity: .68; }
.mini-empty { padding: 22px 0; color: #777168; font-size: 10px; text-align: center; }
.draw-history-list { overflow-x: auto; background: #f8f7f2; border: 1px solid #c9c4b9; }
.draw-history-head, .draw-history-list article { display: grid; grid-template-columns: 150px minmax(160px,1fr) minmax(130px,.8fr) 110px minmax(140px,.8fr); align-items: center; gap: 14px; min-width: 780px; padding: 0 18px; }
.draw-history-head { min-height: 42px; color: #777168; background: #efede7; border-bottom: 1px solid #d3cec4; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.draw-history-list article { min-height: 64px; border-bottom: 1px solid #dedad0; }
.draw-history-list article:last-child { border-bottom: 0; }
.draw-history-list time, .draw-history-list strong { font-family: var(--font-vi-serif); font-size: 12px; }
.draw-history-list code { color: #5f5a52; font-size: 9px; }
.draw-history-list b { color: #28593d; font-size: 10px; }
.draw-history-list article > span { color: #777168; font-size: 9px; }
.winner-modal { width: min(520px, calc(100% - 28px)); text-align: center; }
.winner-modal .modal-card { justify-items: center; padding: 42px; }
.winner-crown { display: grid; place-items: center; width: 72px; height: 72px; color: #171614; background: #d8b469; border-radius: 50%; font-size: 28px; box-shadow: 0 0 0 10px #eee3ca; }
.winner-modal h2 { margin: 0; font-size: 35px; }
.winner-uid { margin: -10px 0 0; color: #777168; font-size: 10px; }
.winner-points { color: #28593d; font-family: var(--font-vi-serif); font-size: 30px; }
.winner-modal .modal-card > p:last-of-type { margin: -6px 0 4px; color: #777168; font-size: 10px; }

@media (max-width: 1100px) {
    .lucky-layout { grid-template-columns: 1fr; }
    .lucky-side { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 800px) {
    .lucky-stats { grid-template-columns: repeat(2, 1fr); }
    .lucky-side { grid-template-columns: 1fr; }
    .wheel-panel { padding: 18px; }
}

@media (max-width: 600px) {
    .lucky-heading { display: block; }
    .lucky-date { margin-top: 16px; text-align: left; }
    .lucky-stats { grid-template-columns: 1fr 1fr; }
    .wheel-hub { width: 74px; height: 74px; border-width: 5px; }
    .wheel-hub span { font-size: 20px; }
    .wheel-hub small { margin-top: -10px; }
    .request-detail-grid { grid-template-columns: 1fr; }
    .request-detail-title { display: grid; }
}

/* Dashboard không hiển thị chuỗi ngày liên tiếp */
.dashboard-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dashboard-grid .checkin-hero { grid-column: 1 / -1; }

/* Vai trò và phân quyền danh mục */
.heading-actions { display: flex; align-items: center; gap: 9px; }
.role-display { display: flex; align-items: center; min-height: 37px; padding: 7px 10px; color: #3e3a34; background: #efede7; border: 1px solid #d2cdc2; font-size: 9px; font-weight: 700; }
.role-create-note { padding: 13px 15px; color: #625d55; background: #efede7; border-left: 3px solid #171614; font-size: 9px; }
.system-role-grid { display: grid; grid-template-columns: minmax(280px, .7fr) minmax(520px, 1.3fr); align-items: stretch; gap: 14px; margin-bottom: 34px; }
.system-role { display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: 17px; min-height: 135px; padding: 24px; background: #f8f7f2; border: 1px solid #c9c4b9; }
.admin-system-role { color: white; background: #191816; border-color: #191816; }
.role-system-mark { display: grid; place-items: center; width: 54px; height: 54px; color: white; background: #171614; border-radius: 50%; font-family: var(--font-vi-serif); font-size: 23px; }
.admin-system-role .role-system-mark { color: #171614; background: #d8b469; }
.system-role small, .system-role h2, .system-role p { display: block; margin: 0; }
.system-role small { color: #89847b; font-size: 7px; font-weight: 800; letter-spacing: .12em; }
.system-role h2 { margin-top: 4px; font-family: var(--font-vi-serif); font-size: 22px; font-weight: 500; }
.system-role p { margin-top: 5px; color: #777168; font-size: 9px; }
.admin-system-role p, .admin-system-role small { color: #aaa59c; }
.system-role > strong { color: #4d4942; font-size: 8px; letter-spacing: .1em; white-space: nowrap; }
.admin-system-role > strong { color: #d8b469; }
.member-system-role { display: block; }
.member-system-role form { display: grid; gap: 14px; }
.member-role-head { display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: 17px; }
.member-role-head small, .member-role-head h2, .member-role-head p { display: block; margin: 0; }
.member-role-head small { color: #89847b; font-size: 7px; font-weight: 800; letter-spacing: .12em; }
.member-role-head h2 { margin-top: 4px; font-family: var(--font-vi-serif); font-size: 22px; font-weight: 500; }
.member-role-head p { margin-top: 5px; color: #777168; font-size: 9px; }
.member-role-head > strong { color: #4d4942; font-size: 8px; letter-spacing: .08em; white-space: nowrap; }
.member-permission-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.role-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.role-section-heading h2 { margin: 0; font-family: var(--font-vi-serif); font-size: 28px; font-weight: 500; }
.role-section-heading p { max-width: 530px; margin: 0; color: #777168; font-size: 9px; text-align: right; }
.role-list { display: grid; gap: 14px; }
.role-card { position: relative; padding: 24px; background: #f8f7f2; border: 1px solid #c9c4b9; box-shadow: 0 12px 35px rgba(35,31,25,.05); }
.role-edit-form { display: grid; gap: 17px; }
.role-card-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.role-card-head > div { display: grid; grid-template-columns: 85px minmax(250px, 1fr); align-items: end; gap: 14px; flex: 1; }
.role-id { display: grid; place-items: center; min-height: 49px; color: #777168; background: #efede7; border: 1px solid #d2cdc2; font-size: 8px; font-weight: 800; }
.role-assigned { min-width: 92px; color: #777168; font-size: 8px; text-align: right; }
.role-assigned strong { display: block; color: #171614; font-family: var(--font-vi-serif); font-size: 24px; font-weight: 500; }
.permission-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.permission-option { position: relative; display: flex; align-items: flex-start; min-height: 76px; padding: 14px 14px 14px 47px; background: #efede7; border: 1px solid #d2cdc2; cursor: pointer; transition: border-color .18s, background .18s; }
.permission-option:hover { border-color: #8e887e; }
.permission-option input { position: absolute; left: 15px; top: 17px; width: 18px; height: 18px; accent-color: #171614; }
.permission-option strong, .permission-option small { display: block; }
.permission-option em { display: block; margin-bottom: 3px; color: #938d83; font-size: 6px; font-style: normal; font-weight: 800; letter-spacing: .08em; }
.permission-option strong { color: #292621; font-size: 10px; }
.permission-option small { margin-top: 3px; color: #777168; font-size: 8px; line-height: 1.4; }
.permission-option:has(input:checked) { background: #e2ded5; border-color: #171614; box-shadow: inset 3px 0 0 #171614; }
.role-actions { display: flex; justify-content: flex-end; padding-right: 125px; }
.role-delete-form { position: absolute; right: 24px; bottom: 24px; }
.role-delete-form .btn { min-height: 43px; }
.role-delete-form .btn:disabled { color: #9a958d; background: #eeeae3; border-color: #d4cfc5; cursor: not-allowed; transform: none; }
.role-empty .btn { margin-top: 14px; }
.role-create-modal { width: min(760px, calc(100% - 28px)); }
.modal-permissions { max-height: 330px; overflow-y: auto; }

@media (max-width: 1050px) {
    .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .system-role-grid { grid-template-columns: 1fr; }
    .member-permission-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
    .dashboard-grid { grid-template-columns: 1fr; }
    .heading-actions { align-items: stretch; flex-direction: column; width: 100%; }
    .heading-actions .btn { width: 100%; }
    .system-role { grid-template-columns: 48px 1fr; }
    .system-role > strong { grid-column: 2; }
    .member-role-head { grid-template-columns: 48px 1fr; }
    .member-role-head > strong { grid-column: 2; }
    .member-permission-grid { grid-template-columns: 1fr; }
    .role-section-heading { display: block; }
    .role-section-heading p { margin-top: 8px; text-align: left; }
    .role-card-head { display: grid; }
    .role-card-head > div { grid-template-columns: 1fr; }
    .role-assigned { text-align: left; }
    .permission-grid { grid-template-columns: 1fr; }
    .role-actions { padding: 0; }
    .role-actions .btn { width: 100%; }
    .role-delete-form { position: static; margin-top: 8px; }
    .role-delete-form .btn { width: 100%; }
}

/* Danh sách vai trò mở trình sửa khi được chọn */
.role-directory { display: grid; gap: 10px; margin-bottom: 26px; }
.role-summary-card { appearance: none; display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 17px; width: 100%; min-height: 112px; padding: 20px 22px; color: #171614; background: #f8f7f2; border: 1px solid #c9c4b9; font: inherit; text-align: left; cursor: pointer; transition: transform .18s, border-color .18s, box-shadow .18s; }
button.role-summary-card:hover { transform: translateY(-2px); border-color: #171614; box-shadow: 0 14px 32px rgba(35,31,25,.08); }
.role-summary-card small, .role-summary-card h2, .role-summary-card p { display: block; margin: 0; }
.role-summary-card small { color: #89847b; font-size: 7px; font-weight: 800; letter-spacing: .12em; }
.role-summary-card h2 { margin-top: 4px; font-family: var(--font-vi-serif); font-size: 22px; font-weight: 500; }
.role-summary-card p { max-width: 620px; margin-top: 5px; color: #777168; font-size: 9px; }
.role-summary-meta { min-width: 120px; color: #777168; font-size: 8px; text-align: right; }
.role-summary-meta strong, .role-summary-meta b { display: block; }
.role-summary-meta strong { color: #171614; font-family: var(--font-vi-serif); font-size: 24px; font-weight: 500; }
.role-summary-meta b { margin-top: 6px; color: #4b4740; font-size: 7px; letter-spacing: .09em; }
.admin-role-summary { color: white; background: #191816; border-color: #191816; cursor: default; }
.admin-role-summary .role-summary-meta strong { color: white; }
.admin-role-summary .role-summary-meta b { color: #d8b469; }
.admin-role-summary p, .admin-role-summary small, .admin-role-summary .role-summary-meta { color: #aaa59c; }
.role-directory-empty { display: flex; align-items: center; justify-content: center; gap: 12px; margin: -10px 0 26px; padding: 18px; color: #777168; background: #efede7; border: 1px dashed #c9c4b9; font-size: 9px; }
.role-directory-empty > span { font-size: 18px; }
.role-editor-modal { width: min(860px, calc(100% - 28px)); }
.role-editor-card { gap: 17px; max-height: min(88vh, 900px); overflow-y: auto; }
.role-editor-card .modal-permissions { max-height: none; overflow: visible; }
.role-dialog-delete { padding-top: 12px; border-top: 1px solid #d2cdc2; }
.role-dialog-delete .btn:disabled { color: #9a958d; background: #eeeae3; border-color: #d4cfc5; cursor: not-allowed; }

/* Mini game đua vịt */
.duck-heading { align-items: center; }
.duck-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.duck-stats article { display: flex; align-items: center; gap: 13px; min-height: 76px; padding: 15px; background: #f8f7f2; border: 1px solid #c9c4b9; }
.duck-stats article > span { display: grid; place-items: center; flex: 0 0 39px; height: 39px; color: white; background: #171614; border-radius: 50%; font-size: 9px; font-weight: 800; }
.duck-stats strong, .duck-stats small { display: block; }
.duck-stats strong { font-family: var(--font-vi-serif); font-size: 22px; line-height: 1; }
.duck-stats small { margin-top: 4px; color: #777168; font-size: 8px; }
.duck-race-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(330px, .5fr); gap: 18px; }
.duck-arena-panel { min-width: 0; color: white; background: #191816; border: 1px solid #191816; }
.duck-arena-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; border-bottom: 1px solid #3b3935; }
.duck-arena-head h2 { margin: 2px 0 0; color: white; font-family: var(--font-vi-serif); font-size: 22px; font-weight: 500; }
.race-status { min-width: 90px; padding: 8px 10px; color: #171614; background: #d8b469; font-size: 8px; font-weight: 900; letter-spacing: .08em; text-align: center; }
.duck-race-arena { position: relative; max-height: 680px; padding: 10px 42px 10px 0; overflow: auto; background: repeating-linear-gradient(180deg, #e9f0ed 0, #e9f0ed 43px, #d9e6e2 44px, #d9e6e2 86px); }
.duck-finish { position: absolute; z-index: 1; top: 0; right: 12px; bottom: 0; width: 25px; background: repeating-conic-gradient(#171614 0 25%, #f8f7f2 0 50%) 0 0 / 14px 14px; border-left: 2px solid #171614; border-right: 2px solid #171614; }
.duck-finish span { position: sticky; top: 10px; display: block; width: 44px; margin-left: -10px; padding: 4px; color: white; background: #171614; font-size: 6px; font-weight: 900; letter-spacing: .1em; text-align: center; }
.duck-lane { position: relative; z-index: 2; display: grid; grid-template-columns: 134px minmax(280px, 1fr); align-items: center; min-height: 64px; border-bottom: 1px solid rgba(23,22,20,.14); }
.duck-lane:last-child { border-bottom: 0; }
.duck-lane-name { align-self: stretch; display: grid; align-content: center; padding: 8px 10px; color: white; background: #262421; border-right: 1px solid #4c4943; }
.duck-lane-name strong, .duck-lane-name small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.duck-lane-name strong { font-family: var(--font-vi-serif); font-size: 11px; }
.duck-lane-name small { margin-top: 2px; color: #aaa59c; font-size: 7px; }
.duck-water-track { position: relative; height: 100%; overflow: hidden; }
.duck-water-track::after { content: ''; position: absolute; right: 0; bottom: 7px; left: 0; height: 2px; background: repeating-linear-gradient(90deg, rgba(44,94,101,.42) 0 16px, transparent 16px 28px); }
.duck-swimmer { position: absolute; z-index: 2; left: 4px; top: 50%; width: 52px; transform: translate(0, -50%); transition: filter .2s; will-change: transform; }
.duck-sprite { display: block; font-size: 32px; line-height: 1; transform: scaleX(-1); filter: drop-shadow(0 3px 2px rgba(0,0,0,.2)); }
.duck-swimmer i { display: block; width: 42px; height: 5px; margin: -2px 0 0 3px; border-radius: 50%; background: rgba(38,96,111,.32); }
.duck-race-arena.is-racing .duck-sprite { animation: duck-bob .38s ease-in-out infinite alternate; }
.duck-lane.is-winner { background: rgba(216,180,105,.34); }
.duck-lane.is-winner .duck-sprite { filter: drop-shadow(0 0 8px #d8b469); }
@keyframes duck-bob { from { transform: scaleX(-1) translateY(-3px) rotate(-3deg); } to { transform: scaleX(-1) translateY(3px) rotate(3deg); } }
.duck-control-panel { align-self: start; padding: 22px; }
.duck-form-tools { display: grid; grid-template-columns: 1fr 112px 120px; align-items: end; gap: 10px; }
.check-all { display: flex; align-items: center; gap: 8px; min-height: 43px; padding: 9px 11px; background: #efede7; border: 1px solid #d2cdc2; cursor: pointer; font-size: 9px; font-weight: 700; }
.check-all input { width: 17px; height: 17px; accent-color: #171614; }
.duration-field select { min-height: 43px; }
.duck-race-form { display: grid; gap: 12px; }
.duck-candidate-list { display: grid; max-height: 410px; overflow-y: auto; border-top: 1px solid #d2cdc2; }
.duck-candidate-list > label { display: grid; grid-template-columns: 18px 28px 34px minmax(0, 1fr); align-items: center; gap: 8px; min-width: 0; padding: 9px 2px; border-bottom: 1px solid #dedad0; cursor: pointer; }
.duck-candidate-list input { width: 16px; height: 16px; accent-color: #171614; }
.duck-candidate-list label > span:last-child { min-width: 0; }
.duck-candidate-list strong, .duck-candidate-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.duck-candidate-list strong { font-family: var(--font-vi-serif); font-size: 11px; }
.duck-candidate-list small { color: #777168; font-size: 7px; }
.duck-number { color: #89847b; font-size: 7px; font-weight: 800; }
.duck-empty { min-height: 420px; color: #d7d2c8; background: transparent; }
.duck-empty > span { filter: none; }
.duck-history { margin-top: 28px; }
.duck-history-list { overflow-x: auto; background: #f8f7f2; border: 1px solid #c9c4b9; }
.duck-history-head, .duck-history-list article { display: grid; grid-template-columns: 150px minmax(180px,1fr) minmax(130px,.8fr) 130px minmax(140px,.8fr); align-items: center; gap: 14px; min-width: 800px; padding: 0 18px; }
.duck-history-head { min-height: 42px; color: #777168; background: #efede7; border-bottom: 1px solid #d3cec4; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.duck-history-list article { min-height: 64px; border-bottom: 1px solid #dedad0; }
.duck-history-list article:last-child { border-bottom: 0; }
.duck-history-list time, .duck-history-list strong { font-family: var(--font-vi-serif); font-size: 12px; }
.duck-history-list code, .duck-history-list span { color: #6f6961; font-size: 9px; }
.duck-history-list b { color: #28593d; font-size: 9px; }
.duck-winner-modal { width: min(500px, calc(100% - 28px)); text-align: center; }
.duck-winner-modal .modal-card { justify-items: center; padding: 40px; }
.duck-winner-icon { display: grid; place-items: center; width: 88px; height: 88px; background: #d8b469; border-radius: 50%; font-size: 48px; box-shadow: 0 0 0 10px #eee3ca; }
.duck-winner-modal h2 { margin: 0; font-size: 34px; }
.duck-winner-modal p, .duck-winner-modal small { margin: -8px 0 0; color: #777168; font-size: 9px; }
.duck-winner-modal > .modal-card > strong { color: #28593d; font-family: var(--font-vi-serif); font-size: 20px; }

@media (max-width: 1100px) {
    .duck-race-layout { grid-template-columns: 1fr; }
    .duck-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
    .role-summary-card { grid-template-columns: 48px 1fr; padding: 17px; }
    .role-summary-meta { grid-column: 2; text-align: left; }
    .duck-heading { display: block; }
    .duck-heading .lucky-date { margin-top: 14px; }
    .duck-stats { grid-template-columns: 1fr; }
    .duck-arena-head { align-items: flex-start; flex-direction: column; }
    .duck-lane { grid-template-columns: 105px minmax(240px, 1fr); }
    .duck-form-tools { grid-template-columns: 1fr; }
    .duck-winner-modal .modal-card { padding: 34px 22px; }
}

/* Sổ lịch sử cộng điểm trên Tổng quan */
.point-history-section { margin-top: 28px; }
.point-history-list { background: #f8f7f2; border: 1px solid #c9c4b9; }
.point-history-item { display: grid; grid-template-columns: 44px minmax(0, 1fr) 105px 70px; align-items: center; gap: 13px; min-height: 70px; padding: 10px 16px; border-bottom: 1px solid #dedad0; }
.point-history-item:last-child { border-bottom: 0; }
.point-event-icon { display: grid; place-items: center; width: 38px; height: 38px; color: white; background: #171614; border-radius: 50%; font-size: 15px; }
.point-history-item.type-attendance .point-event-icon { background: #315c43; }
.point-history-item.type-duck .point-event-icon { color: #171614; background: #d8b469; }
.point-history-item strong, .point-history-item small, .point-history-item time { display: block; }
.point-history-item strong { font-family: var(--font-vi-serif); font-size: 13px; }
.point-history-item div small { margin-top: 3px; color: #777168; font-size: 8px; }
.point-history-item time { color: #4f4a43; font-family: var(--font-vi-serif); font-size: 11px; text-align: right; }
.point-history-item time small { margin-top: 2px; color: #89847b; font-family: var(--font-vi-sans); font-size: 7px; }
.point-history-item > b { color: #28593d; font-family: var(--font-vi-serif); font-size: 20px; text-align: right; }
.required-proof { border-color: #8a5f45; box-shadow: inset 3px 0 0 #8a5f45; }
.required-proof small { color: #7c4937; }
.faction-overview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.faction-overview article { display: flex; align-items: center; gap: 13px; min-height: 78px; padding: 15px; background: #f8f7f2; border: 1px solid #c9c4b9; }
.faction-overview article > span { display: grid; place-items: center; width: 39px; height: 39px; color: white; background: #171614; border-radius: 50%; font-size: 12px; }
.faction-overview strong, .faction-overview small { display: block; }
.faction-overview strong { font-family: var(--font-vi-serif); font-size: 23px; line-height: 1; }
.faction-overview small { margin-top: 4px; color: #777168; font-size: 8px; }
.standalone-faction-panel { margin-top: 0; }

@media (max-width: 600px) {
    .point-history-item { grid-template-columns: 38px minmax(0, 1fr) 50px; padding: 10px; }
    .point-history-item time { display: none; }
    .point-history-item > b { font-size: 17px; }
    .faction-overview { grid-template-columns: 1fr; }
}

/* Donate và khôi phục dữ liệu V11 */
.donate-heading { align-items: center; }
.donate-balance { min-width: 320px; padding: 20px 24px; color: white; background: #171614; border: 1px solid #171614; }
.donate-balance small, .donate-balance strong, .donate-balance span { display: block; }
.donate-balance small { color: #aaa59c; font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.donate-balance strong { margin: 6px 0; color: #d8b469; font-family: var(--font-vi-serif); font-size: 30px; font-weight: 500; }
.donate-balance span { color: #c8c3b9; font-size: 8px; }
.donate-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 22px; }
.donate-stats article { display: flex; align-items: center; gap: 13px; min-height: 78px; padding: 15px; background: #f8f7f2; border: 1px solid #c9c4b9; }
.donate-stats article > span { display: grid; place-items: center; flex: 0 0 40px; height: 40px; color: white; background: #171614; border-radius: 50%; font-size: 14px; }
.donate-stats strong, .donate-stats small { display: block; }
.donate-stats strong { font-family: var(--font-vi-serif); font-size: 21px; line-height: 1; }
.donate-stats small { margin-top: 5px; color: #777168; font-size: 8px; }
.donate-channel-section { margin-bottom: 24px; }
.donate-channel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.donate-channel-card { display: grid; grid-template-columns: minmax(180px, .75fr) minmax(0, 1fr); min-height: 260px; overflow: hidden; background: #f8f7f2; border: 1px solid #c9c4b9; }
.donate-channel-card img { width: 100%; height: 100%; min-height: 260px; object-fit: contain; padding: 14px; background: white; border-right: 1px solid #d2cdc2; }
.donate-channel-card > div { align-self: center; padding: 24px; }
.donate-channel-card h3 { margin: 0 0 10px; font-family: var(--font-vi-serif); font-size: 22px; font-weight: 500; }
.donate-channel-card p { margin: 0; color: #6f6961; font-size: 10px; white-space: normal; }
.donate-member-grid, .donate-admin-grid, .donate-ledger-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 26px; }
.donate-submit-panel, .donate-my-history, .donate-admin-grid > .panel { padding: 22px; }
.donate-history-list, .fund-ledger { border-top: 1px solid #d2cdc2; }
.donate-history-list article, .fund-ledger article { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; padding: 13px 0; border-bottom: 1px solid #dedad0; }
.donate-history-list strong, .donate-history-list small, .donate-history-list p, .fund-ledger strong, .fund-ledger small { display: block; }
.donate-history-list strong, .fund-ledger strong { font-family: var(--font-vi-serif); font-size: 13px; }
.donate-history-list small, .fund-ledger small { margin-top: 3px; color: #827c73; font-size: 8px; }
.donate-history-list p { margin: 5px 0 0; color: #625d55; font-size: 9px; }
.donate-status { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 6px 9px; background: #ece9e1; border: 1px solid #c9c4b9; font-size: 8px; font-weight: 800; }
.donate-status i { width: 6px; height: 6px; background: #9a6c35; border-radius: 50%; }
.donate-status.status-confirmed { color: #234d35; background: #e5efdf; border-color: #a8bda9; }
.donate-status.status-confirmed i { background: #315c43; }
.donate-status.status-rejected { color: #873c35; background: #f4e4e0; border-color: #d3aaa5; }
.donate-status.status-rejected i { background: #a8443d; }
.donate-admin-zone { margin-bottom: 20px; padding-top: 22px; border-top: 3px solid #171614; }
.donate-pending-list { display: grid; gap: 10px; }
.donate-pending-list > article { display: grid; grid-template-columns: minmax(230px, 1fr) minmax(200px, .8fr) auto; align-items: center; gap: 18px; padding: 16px; background: #f8f7f2; border: 1px solid #c9c4b9; }
.donate-pending-list > article > div:nth-child(2) strong, .donate-pending-list > article > div:nth-child(2) small { display: block; }
.donate-pending-list > article > div:nth-child(2) strong { font-family: var(--font-vi-serif); font-size: 18px; }
.donate-pending-list > article > div:nth-child(2) small { color: #777168; font-size: 8px; }
.donate-pending-list p { margin: 4px 0 0; color: #625d55; font-size: 9px; }
.donate-review-actions { display: flex; gap: 7px; }
.donate-channel-admin-list { display: grid; gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid #d2cdc2; }
.donate-channel-admin-list article { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px; background: #efede7; border: 1px solid #d2cdc2; }
.donate-channel-admin-list img { width: 54px; height: 54px; object-fit: cover; background: white; }
.donate-channel-admin-list strong, .donate-channel-admin-list small { display: block; }
.donate-channel-admin-list strong { font-family: var(--font-vi-serif); font-size: 11px; }
.donate-channel-admin-list small { color: #777168; font-size: 7px; }
.fund-ledger b { flex: 0 0 auto; font-family: var(--font-vi-serif); font-size: 14px; }
.fund-ledger .money-in { color: #28593d; }
.fund-ledger .money-out { color: #a8443d; }
.restore-panel { margin-bottom: 18px; padding: 22px; border: 1px solid #9b665f; box-shadow: inset 4px 0 0 #a8443d; }
.restore-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .62fr); gap: 30px; align-items: start; }
.restore-layout p { margin-top: 0; color: #5f5a52; }
.restore-layout ul { margin: 14px 0; padding-left: 20px; color: #6b655d; font-size: 10px; }
.restore-layout > div > small { color: #777168; font-size: 8px; }
.restore-form { padding: 17px; background: #f4ebe8; border: 1px solid #d6b5ae; }

@media (max-width: 1000px) {
    .donate-channel-grid, .donate-member-grid, .donate-admin-grid, .donate-ledger-grid { grid-template-columns: 1fr; }
    .donate-pending-list > article { grid-template-columns: 1fr 1fr; }
    .donate-review-actions { grid-column: 1 / -1; }
    .restore-layout { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
    .donate-heading { display: block; }
    .donate-balance { min-width: 0; margin-top: 16px; }
    .donate-stats { grid-template-columns: 1fr; }
    .donate-channel-card { grid-template-columns: 1fr; }
    .donate-channel-card img { min-height: 220px; max-height: 360px; border-right: 0; border-bottom: 1px solid #d2cdc2; }
    .donate-pending-list > article { grid-template-columns: 1fr; }
    .donate-review-actions { grid-column: auto; flex-wrap: wrap; }
}