/* Hời interface refresh — UI/UX Pro Max design system, 2026-09-29. */
:root {
  --ink: #142e29;
  --muted: #51665e;
  --line: #d8e7df;
  --green: #f7bc55;
  --green-dark: #075c49;
  --paper: #f5faf7;
  --navy: #073f35;
  --shadow: 0 12px 36px rgba(11, 77, 58, .055);
  --radius: 18px;
  --sidebar: 268px;
}
html { scroll-behavior: smooth; }
body { background: var(--paper); color: var(--ink); font: 16px/1.6 "Nunito Sans", "Segoe UI", sans-serif; }
h1, h2, h3, .brand, .stat-number, .wallet-feature > strong { font-family: Rubik, "Segoe UI", sans-serif; }
h1 { font-size: clamp(1.9rem, 2.3vw, 2.65rem); line-height: 1.18; letter-spacing: -.035em; }
h2 { font-size: clamp(1.2rem, 1.45vw, 1.6rem); letter-spacing: -.025em; }
h3 { font-size: 1.05rem; }
small, .muted, .breadcrumb, .page-heading p { color: var(--muted); }
.eyebrow, .workspace-label, .brand-caption { color: #486a5d; font-size: .72rem; letter-spacing: .12em; }
.brand { color: #075c49; letter-spacing: -.085em; }
.brand-dot { color: #e6a332; }
.brand-caption { letter-spacing: .17em; }
a, button, summary { cursor: pointer; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid #b07114;
  outline-offset: 3px;
}
input, select, textarea { border-color: #b9d0c3; border-radius: 11px; min-height: 48px; font-size: 1rem; }
input::placeholder, textarea::placeholder { color: #62766c; }
input:focus, textarea:focus, select:focus { border-color: #08745a !important; box-shadow: 0 0 0 4px rgba(5, 150, 105, .14); }
.button { min-height: 46px; padding: 10px 18px; border-radius: 11px; font-size: .95rem; transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.button:hover { transform: translateY(-2px); box-shadow: 0 7px 16px rgba(7, 75, 55, .12); }
.button:active { transform: translateY(0); box-shadow: none; }
.button.primary, .primary { background: #075c49; color: #fff; }
.button.primary:hover, .primary:hover { background: #064839; }
.button.secondary, .secondary { border-color: #b9d0c3; color: #164a3b; }
.button.secondary:hover, .secondary:hover { background: #edf8f1; }
.button.lime-button, .lime-button { background: #f7bc55; color: #372300; }
.button.lime-button:hover, .lime-button:hover { background: #ffd078; }
.button.tiny { min-height: 42px; padding: 7px 13px; font-size: .84rem; }
.text-link { color: #075c49; font-size: .9rem; }
.text-link:hover { color: #064839; text-decoration: underline; text-underline-offset: 3px; }
.icon-button { min-width: 44px; min-height: 44px; }
.icon-button:hover { background: #e6f3ec; color: #075c49; }
.sidebar { padding: 30px 18px 18px; border-right-color: var(--line); }
.sidebar .brand { margin-bottom: 35px; }
.nav-item { border-radius: 11px; min-height: 48px; font-size: .91rem; font-weight: 650; color: #425e52; }
.nav-item:hover { color: #075c49; background: #edf8f1; }
.nav-item.active { color: #075c49; background: #dff3e8; }
.nav-item.active:before { background: #087a5b; }
.nav-new { background: #fff0d3; color: #744407; font-size: .65rem; }
.sidebar-note { background: #eaf7ee; border-color: #d2eadb; }
.sidebar-note strong { font-size: .87rem; }
.sidebar-note a { color: #075c49; font-size: .83rem; }
.sidebar-profile strong { font-size: .87rem; }
.sidebar-profile small { color: #4e685a; font-size: .75rem; }
.avatar { background: #dff3e8; color: #075c49; }
.topbar { background: rgba(255, 255, 255, .95); border-bottom-color: var(--line); }
.topbar-left { font-size: .86rem; }
.topbar-left strong { color: #164a3b; font-weight: 700; }
.breadcrumb-slash { color: #8ca99a; }
.main-content { padding-top: 35px; }
.page-heading { align-items: flex-end; }
.page-heading p { font-size: .96rem; }
.page-heading .eyebrow { font-size: .72rem; }
.page-heading > .button { min-height: 44px; font-size: .87rem; }
.greeting-dot { color: #e5a43b; }
.link-panel { background: linear-gradient(112deg, #e1f4e8 0%, #edf9ee 62%, #fff4db 100%); border-color: #c7e6d2; border-radius: 22px; padding: clamp(25px, 3vw, 45px); gap: clamp(20px, 3vw, 48px); box-shadow: 0 16px 36px rgba(7, 92, 73, .06); }
.link-panel h2 { font-size: clamp(1.55rem, 2.2vw, 2.3rem); line-height: 1.18; color: #073f35; }
.link-panel-copy p { color: #405f51; font-size: .98rem; line-height: 1.6; max-width: 35ch; }
.platform-tag { background: #fff2dc; border-color: #f3d9ae; color: #744407; font-size: .76rem; }
.link-create-form label { color: #164a3b; font-size: .9rem; }
.link-input-row { border-color: #b9d7c4; border-radius: 13px; padding: 7px; box-shadow: 0 8px 20px rgba(9, 79, 57, .06); }
.link-input-row input { font-size: .95rem; min-height: 42px; }
.link-input-row .button { min-height: 43px; font-size: .87rem; }
.link-decoration { color: #bce2c6; opacity: .35; }
.form-hint { color: #486455; font-size: .84rem; }
.section-caption h2 { font-size: 1.35rem; }
.section-caption > span { color: #526c5d; font-size: .85rem; }
.section-caption .eyebrow { font-size: .72rem; }
.stat-grid { gap: 19px; }
.stat-card, .card, .deal-card { border-color: var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.stat-card { padding: 24px; }
.admin-money-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 19px; margin-bottom: 10px; }
.admin-money-card .stat-number { display: block; overflow-wrap: anywhere; margin: 14px 0 8px; }
.admin-money-card p, .admin-money-note { color: #526b5d; font-size: .84rem; line-height: 1.5; }
.admin-money-card p { margin: 0; }
.admin-money-note { margin: 0 0 22px; }
@media (max-width: 700px) { .admin-money-grid { grid-template-columns: 1fr; gap: 12px; } }
.stat-top { color: #486455; font-size: .9rem; }
.stat-icon { width: 42px; height: 42px; border-radius: 12px; }
.stat-number { font-size: clamp(1.55rem, 2vw, 2.05rem); color: #073f35; }
.stat-bottom { color: #526b5d; font-size: .82rem; border-top-color: #e6f0e9; }
.card-heading h2 { font-size: 1.17rem; }
.card-heading p { color: #526b5d; font-size: .85rem; }
.wallet-feature { background: #073f35; border-radius: var(--radius); }
.wallet-feature p { font-size: 1.35rem; }
.wallet-feature > strong { font-size: 2rem; }
.wallet-label, .wallet-sub, .wallet-foot { color: #d1e6d6; font-size: .8rem; }
.wallet-feature > .button { min-height: 45px; font-size: .9rem; }
.deal-card { transition: transform .2s ease, box-shadow .2s ease; }
.deal-card:hover { transform: translateY(-3px); box-shadow: 0 15px 30px rgba(9, 74, 55, .11); }
.deal-body h3 { font-size: 1rem; }
.deal-body p { color: #4f6759; font-size: .88rem; }
.deal-rate strong { color: #164a3b; }
.deal-rate small, .deal-body > small, .deal-bottom .text-link, .deal-category { font-size: .8rem; color: #486455; }
.deal-bottom .icon-button { min-width: 40px; min-height: 40px; }
.category-tabs a { border-color: #c5d9cb; color: #355745; font-size: .89rem; padding: 9px 15px; }
.category-tabs a:hover, .category-tabs a.selected { background: #dff3e8; border-color: #a9d9bd; color: #075c49; }
.flash, .notice { font-size: .91rem; }
.form-disclosure > summary { font-size: .97rem; min-height: 55px; }
.table-wrap table th { color: #3e5d4e; font-size: .82rem; }
.table-wrap table td { font-size: .9rem; }
.table-wrap table small { color: #526b5d; }
.auth-page { background: radial-gradient(circle at 15% 15%, #dbf3e3 0, transparent 40%), #f5faf7; }
.auth-visual h1 { font-size: clamp(2.25rem, 3.8vw, 3.5rem); }
.auth-visual h1 > span { color: #08745a; }
.auth-visual > p { color: #486455; font-size: 1rem; }
.auth-wallet { background: #073f35; }
.auth-card { border: 1px solid var(--line); box-shadow: 0 20px 50px rgba(7, 92, 73, .1); }
.auth-card-top p { color: #526b5d; font-size: .9rem; }
.auth-card .stack-form > label, .auth-card .form-grid > label { color: #315044; font-size: .9rem; }
.auth-card input { font-size: 1rem; min-height: 48px; }
.auth-card .button { font-size: .96rem; min-height: 47px; }
.auth-card .checkbox, .checkbox { color: #355546; font-size: .88rem !important; }
.mfa-login summary, .mfa-login label, .auth-forgot .text-link { color: #315044; font-size: .88rem; }
.mfa-login summary { min-height: 36px; display: inline-flex; align-items: center; }
.auth-card .auth-bottom, .auth-card .auth-safe { color: #486455; font-size: .84rem; }
.auth-header .text-link { color: #075c49; font-size: .88rem; }
.auth-visual > .eyebrow { color: #486a5d; font-size: .73rem; }
.demo-box > div strong, .demo-box > div span, .demo-box > small, .demo-box details, .demo-box details p { color: #486455; font-size: .82rem; }
.demo-box .button { min-height: 42px; font-size: .86rem; }
.footer, .footer p { color: #526b5d; font-size: .8rem; }
.footer a:hover { color: #075c49; text-decoration: underline; }
@media (max-width: 800px) {
  .sidebar { box-shadow: 14px 0 35px rgba(5, 55, 42, .13); }
  .main-content { padding-top: 26px; }
  .link-panel { padding: 25px; }
}
@media (max-width: 600px) {
  body { font-size: 15px; }
  .main-content { padding: 22px 16px 34px; }
  .topbar { padding: 0 16px; }
  .topbar-left { min-width: 0; font-size: .82rem; }
  .topbar-left strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .page-heading { align-items: flex-start; }
  .page-heading h1 { font-size: 1.85rem; }
  .page-heading p { font-size: .88rem; }
  .link-panel { padding: 24px 20px; }
  .link-panel h2 { font-size: 1.7rem; }
  .link-panel-copy p, .link-create-form label { font-size: .9rem; }
  .link-input-row input { font-size: 16px; }
  .link-input-row .button { width: 100%; min-height: 47px; font-size: .93rem; }
  .form-hint { font-size: .8rem; }
  .stat-card { padding: 18px; }
  .stat-top { font-size: .85rem; }
  .stat-number { font-size: 1.5rem; }
  .stat-bottom { font-size: .76rem; }
  .section-caption h2 { font-size: 1.15rem; }
  .section-caption .text-link { font-size: .82rem; }
  .deal-card { grid-template-columns: 120px minmax(0, 1fr); }
  .deal-body h3 { font-size: .9rem; }
  .deal-body p { font-size: .82rem; }
  .deal-bottom .text-link { font-size: .8rem; }
  .auth-card { padding: 28px 22px; }
  .footer, .footer p { font-size: .76rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button, .deal-card { transition: none; }
  .button:hover, .deal-card:hover { transform: none; }
}

.ledger-history-note { max-width: 72ch; margin-bottom: 18px; }
.ledger-history-table td { vertical-align: top; }
.ledger-history-table td:nth-child(2) { min-width: 220px; max-width: 420px; overflow-wrap: anywhere; }
.ledger-history-table td small { display: block; color: var(--muted); overflow-wrap: anywhere; }
.ledger-history-table td:nth-child(4), .ledger-history-table td:nth-child(5) { white-space: nowrap; }
.avatar { overflow: hidden; }
.notification-trigger { position: relative; overflow: visible; }
.notification-trigger.has-unread { color: #bd2436; background: #fff0f1; }
.notification-trigger.has-unread:hover, .notification-trigger.has-unread:focus-visible { color: #a5192c; background: #ffe5e8; }
.notification-badge { position: absolute; top: -5px; right: -7px; min-width: 19px; height: 19px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: #bd2436; color: #fff; border: 2px solid #fff; font-size: 10px; font-weight: 800; line-height: 1; }
.avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.profile-avatar-row, .profile-admin-details { display: flex; align-items: flex-start; gap: 18px; }
.profile-avatar-row { padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #f7faf6; }
.profile-avatar-frame { flex: 0 0 76px; width: 76px; height: 76px; }
.avatar.profile-avatar, .profile-avatar-preview { display: block; width: 76px; height: 76px; border-radius: 50%; object-fit: cover; }
.avatar.profile-avatar { display: flex; font-size: 30px; }
.profile-avatar-preview[hidden] { display: none; }
.profile-avatar-control { flex: 1; min-width: 0; }
.profile-avatar-control label { display: block; font-weight: 650; margin-bottom: 6px; }
.profile-avatar-control input { margin-bottom: 5px; }
.profile-avatar-control small { display: block; color: var(--muted); }
.profile-admin-details p { margin: 5px 0; overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .profile-avatar-row, .profile-admin-details { flex-wrap: wrap; }
  .ledger-history .table-wrap { overflow: visible; }
  .ledger-history-table, .ledger-history-table tbody, .ledger-history-table tr, .ledger-history-table td { display: block; width: 100%; }
  .ledger-history-table thead { display: none; }
  .ledger-history-table tr { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .ledger-history-table tr:last-child { border-bottom: 0; }
  .ledger-history-table td { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; border: 0; text-align: right; }
  .ledger-history-table td::before { content: attr(data-label); color: var(--muted); flex: 0 0 92px; text-align: left; }
  .ledger-history-table td:nth-child(2) { min-width: 0; max-width: none; }
  .ledger-history-table td:nth-child(2) strong, .ledger-history-table td:nth-child(2) small { display: block; }
  .ledger-history-table td:nth-child(2) { display: block; text-align: left; }
  .ledger-history-table td:nth-child(2)::before { display: block; margin-bottom: 3px; }
  .ledger-history-table td:nth-child(4), .ledger-history-table td:nth-child(5) { white-space: normal; }
}

/* Authenticator provisioning */
.mfa-setup{margin-block:20px}.mfa-steps{padding-left:24px;line-height:1.7}.mfa-steps li{margin-bottom:8px}.mfa-qr{display:block;width:280px;max-width:100%;height:auto;margin:20px auto;background:#fff}.mfa-secret{display:block;overflow-wrap:anywhere;user-select:all;letter-spacing:.08em;padding:12px;background:#f3f6f4;border-radius:8px;margin-block:12px}

/* Keyboard access and reduced motion */
.skip-link{position:fixed;z-index:9999;left:16px;top:-100px;background:#075c49;color:#fff;padding:12px 20px;border-radius:8px}.skip-link:focus{top:16px}
:where(a,button,input,select,textarea,summary):focus-visible{outline:3px solid #087e65;outline-offset:3px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

.mfa-recovery-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:8px;margin-block:16px}.mfa-recovery-list code{padding:10px;background:#f3f6f4;user-select:all;overflow-wrap:anywhere}

.auth-card .stack-form > .checkbox-label{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer}.auth-card .stack-form > .checkbox-label input[type=checkbox]{width:18px;height:18px;min-height:18px;margin:0;flex-shrink:0}

.auth-card .stack-form > label.checkbox-label {display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:10px;text-align:left;white-space:nowrap;}
.auth-card .stack-form > label.checkbox-label input[type="checkbox"] {margin:0;flex:0 0 18px;width:18px;height:18px;min-height:18px;}