:root {
  --primary: #8b30e7;
  --primary-dark: #6d28d9;
  --ink: #101828;
  --muted: #4a5565;
  --faint: #99a1af;
  --line: #ede9fe;
  --tint: #faf9ff;
  --tint-2: #f5f3ff;
  --green: #009966;
  --orange: #e17100;
  font-family: "Lexend", system-ui, sans-serif;
  color: var(--ink);
  background: #fff;
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.container { max-width: 72rem; margin: 0 auto; padding: 0 1.5rem; }
.center { text-align: center; }
.muted { color: var(--muted); line-height: 1.6; }
.accent { color: var(--primary); }
.icon { width: 1em; height: 1em; flex: none; }

/* Buttons & chips */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .8rem 1.25rem; border-radius: .5rem;
  background: var(--primary-dark); color: #fff; font-weight: 600; font-size: .95rem;
  transition: background .15s;
}
.btn:hover { background: var(--primary); }
.btn-sm { padding: .55rem 1.25rem; background: var(--primary); font-size: .9rem; }
.btn-sm:hover { background: var(--primary-dark); }
.btn-light { background: #fff; color: var(--primary-dark); padding: .95rem 1.75rem; }
.btn-light:hover { background: var(--tint-2); }
.pill {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem 1rem; border-radius: 999px;
  background: var(--tint-2); color: var(--primary); font-size: .8rem; font-weight: 600;
}
.pill-sm { padding: .35rem .75rem; font-size: .75rem; }
.wordmark { display: inline-block; vertical-align: middle; }

/* Nav */
.nav { border-bottom: 1px solid #f0ebff; background: #fff; }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.nav-actions { display: flex; align-items: center; gap: 1rem; }
.lang { color: var(--muted); font-size: .85rem; font-weight: 500; }

/* Hero */
.hero {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center;
  padding-top: 5rem; padding-bottom: 4rem;
}
.hero h1 { margin: 1rem 0 1.5rem; font-size: clamp(2.25rem, 4.5vw, 3rem); line-height: 1.15; font-weight: 700; letter-spacing: -.02em; }
.hero .pill { background: #ede9fe; color: var(--primary-dark); font-size: 12px; align-items: center; }
.hero-badge { display: block; max-width: 100%; height: auto; }
.hero h1 .accent { color: #7c3aed; }
.lead { color: #6a7282; font-size: 1.125rem; line-height: 1.65; }
.rate-box {
  display: flex; align-items: center; gap: 1rem; margin: 1.75rem 0 1.75rem .5rem;
  padding: 1rem 1.25rem; border: 1px solid var(--line); border-radius: 16px; background: var(--tint);
}
.rate-box strong { display: block; color: var(--primary-dark); font-size: 1.5rem; font-weight: 700; }
.rate-box div span { color: var(--muted); font-size: .9rem; }
.rate-icon {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  background: #7c3aed; color: #fff; font-size: 1.3rem;
}
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.75rem; }
.link-muted { display: inline-flex; align-items: center; gap: .4rem; color: var(--muted); font-weight: 500; }
.hero-actions .btn { border-radius: 10px; font-size: 14px; }
.hero-actions .link-muted { color: #6b7280; font-size: 14px; }
.trust { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 2rem; color: var(--muted); font-size: .85rem; }
.trust li { display: flex; align-items: center; gap: .4rem; }
.trust .icon { color: var(--primary); }
.trust .ok .icon { color: #00a63e; }

/* Dashboard preview */
.dash { position: relative; }
.blob { position: absolute; border-radius: 50%; background: var(--tint-2); }
.blob-a { width: 160px; height: 160px; top: -16px; right: -16px; }
.blob-b { width: 112px; height: 112px; bottom: -28px; left: -16px; }
.dash-card {
  position: relative; padding: 1.5rem; border: 1px solid #f0eefa; border-radius: 14px;
  background: #fff; box-shadow: 0 25px 50px -12px rgb(139 48 231 / .15);
}
.dash-card h3 { margin-bottom: 1.25rem; color: #364153; font-size: .9rem; font-weight: 600; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.stat, .chart { padding: .9rem; border: 1px solid #f0eefa; border-radius: .6rem; background: var(--tint); }
.stat span, .chart span { display: block; color: var(--faint); font-size: .75rem; }
.stat { border-radius: 12px; }
.stat strong { display: block; margin: .35rem 0; color: #7c3aed; font-size: 1.1rem; font-weight: 700; }
.stat strong.green { color: var(--green); }
.stat strong.orange { color: #d97706; }
.stat small { color: var(--faint); font-size: .7rem; }
.chart { margin-top: .75rem; }
.chart svg { display: block; width: 100%; height: 90px; margin-top: .75rem; }

/* How it works */
.band { padding: 5rem 0; background: var(--tint); }
.band h2, .policy h2, .cta h2 { font-size: clamp(1.6rem, 3vw, 1.9rem); font-weight: 600; }
.band h2 { font-weight: 700; line-height: 36px; }
.band h2 + p { margin-top: .75rem; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3rem; }
.step { position: relative; padding: 28px 2rem 2rem; border: 1px solid #f0eefa; border-radius: .9rem; background: #fff; }
.step-no { color: var(--line); font-size: 48px; font-weight: 700; line-height: 1; }
.step h3 { margin: 1rem 0 .75rem; font-size: 1.25rem; font-weight: 700; }
.step p { color: #6a7282; font-size: .9rem; line-height: 1.6; }
.step-arrow {
  position: absolute; top: 2.5rem; right: -1.3rem; z-index: 1;
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--primary); color: #fff; font-size: .75rem;
}

/* Commission policy */
.policy { display: grid; grid-template-columns: 1.15fr 1fr; gap: 3rem; align-items: start; padding-top: 4rem; padding-bottom: 4rem; }
.policy h2 { margin: 1rem 0; }
.calc { margin-top: 1.5rem; padding: 1.25rem; border: 1px solid #f0eefa; border-radius: .9rem; }
.calc h3 { display: flex; align-items: center; gap: .75rem; font-size: 1rem; font-weight: 600; }
.calc-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: .5rem; background: var(--tint-2); color: var(--primary); }
.flow { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 1rem 0; color: var(--faint); font-size: .8rem; }
.flow span { padding: .35rem .65rem; border-radius: .4rem; background: #f3f4f6; color: var(--ink); font-weight: 600; }
.flow span.hl { background: var(--tint-2); color: var(--primary); }
.calc-rate { padding: .9rem; border: 1px solid #f0eefa; border-radius: .6rem; background: var(--tint); }
.calc-rate small { color: var(--muted); font-size: .75rem; }
.calc-rate strong { color: var(--primary); font-size: 1.5rem; font-weight: 600; }
.calc-rate p { color: var(--muted); font-size: .75rem; }
.note { margin-top: 1.5rem; color: var(--faint); font-size: .75rem; line-height: 1.6; }
.benefits { padding: 1.75rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--tint-2); }
.benefits-head { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem; }
.benefits-head h3 { font-size: 1rem; font-weight: 600; }
.benefits-head small { color: var(--muted); font-size: .75rem; }
.badge-70 { display: grid; place-items: center; width: 40px; height: 40px; border-radius: .6rem; background: var(--primary); color: #fff; font-size: .75rem; font-weight: 700; }
.benefits ul { padding: .5rem 1.25rem; border-radius: .75rem; background: #fff; }
.benefits li { display: flex; align-items: center; gap: .75rem; padding: .75rem 0; font-size: .9rem; }
.benefits li .icon { color: var(--primary); }

/* CTA */
.cta { padding: 4.5rem 0; background: linear-gradient(135deg, #7c2ee0, #5b21b6); color: #fff; }
.cta p { max-width: 36rem; margin: 1rem auto 2rem; color: #ddd6fe; line-height: 1.6; }

/* Footer */
.footer-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 2rem 1.5rem; color: var(--muted); font-size: .9rem;
}
.footer-brand { display: inline-flex; align-items: center; gap: .5rem; }
.footer-brand img { display: block; max-width: 100%; height: auto; }
.footer nav { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.footer nav a, .footer small { color: var(--faint); font-size: .85rem; }
.footer nav a:hover { color: var(--primary); }

/* Registration */
.nav-wide { padding: 0 2rem; }
.reg-bg { min-height: calc(100vh - 65px); background: #f8f7ff; }
.reg { max-width: 40rem; margin: 0 auto; padding: 3rem 1rem 5rem; }
.reg h1 { font-size: 24px; font-weight: 700; line-height: 32px; }
.stepper { display: flex; align-items: flex-start; margin: 2rem 0; }
.stepper-step { display: flex; flex-direction: column; align-items: center; gap: .6rem; color: var(--faint); font-size: 12px; white-space: nowrap; }
.stepper-no { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #e5e7eb; font-size: .75rem; font-weight: 600; }
.stepper-step.on { color: var(--primary-dark); font-weight: 500; }
.stepper-step.on .stepper-no { background: #7c3aed; color: #fff; font-weight: 700; }
.stepper-line { flex: 1; height: 2px; margin: 15px .75rem 0; background: #e5e7eb; }
.stepper-line.on { background: #7c3aed; }
.reg-card { padding: 1.75rem; border: 1px solid #f0eefa; border-radius: 14px; background: #fff; }
.reg-card fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.reg-card h2 { color: #1e2939; font-size: 1.15rem; font-weight: 600; line-height: 28px; }
.reg-sub { margin-top: .5rem; color: #6b7280; font-size: 14px; line-height: 20px; }
[data-step="3"] .reg-sub { line-height: 22px; }
.reg-sub strong { color: #364153; font-weight: 500; white-space: nowrap; }
.field { display: grid; gap: .5rem; margin-top: 1.5rem; color: #364153; font-size: .9rem; font-weight: 500; }
.req::after { content: " *"; color: #f5222d; }
.field select, .field input {
  width: 100%; height: 44px; padding: 0 .9rem; border: 1px solid #e5e7eb; border-radius: 10px;
  background: #fff; color: #000; font: inherit; font-weight: 400;
}
.field input[readonly] { background: #0000000a; color: var(--faint); }
.field select:focus, .field input:focus, .otp input:focus { outline: 2px solid var(--primary); outline-offset: -1px; }
.otp input:focus { outline-color: var(--primary-dark); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.reg-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid #f5f3ff; }
.back { display: inline-flex; align-items: center; gap: .6rem; padding: 0; border: 0; background: none; color: #6b7280; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.reg-card .btn { height: 41px; padding-block: 0; border: 0; border-radius: 10px; font-family: inherit; font-size: 14px; cursor: pointer; }
.contract { display: flex; flex-direction: column; height: 272px; margin-top: 1.25rem; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; }
.contract-head { display: flex; align-items: center; gap: .6rem; padding: .8rem 1rem; border-bottom: 1px solid #e5e7eb; background: #fafafa; color: #364153; font-size: 12px; font-weight: 500; }
.contract-head .icon { color: var(--muted); }
.contract-body { flex: 1; min-height: 0; overflow-y: auto; padding: 1rem 1.25rem; color: #6b7280; font-size: .8rem; line-height: 1.6; }
.contract-body h3 { margin-bottom: .5rem; color: var(--ink); font-size: .95rem; font-weight: 600; }
.contract-body h4 { margin: .75rem 0 .25rem; color: #364153; font-size: .8rem; font-weight: 600; }
.reg-terms { max-width: 52rem; }
.terms-card { margin-top: 1.5rem; color: #364153; font-size: .92rem; line-height: 1.7; }
.terms-card h2 { margin: 2rem 0 .75rem; font-size: 1.05rem; text-align: center; }
.terms-card h2:first-of-type { margin-top: 1.5rem; }
.terms-card p { margin-top: .6rem; }
.terms-card ul { margin: .4rem 0 0 1.25rem; padding: 0; list-style: none; }
.terms-card li { margin-top: .3rem; }
.terms-card b { color: var(--ink); }
.agree { display: flex; align-items: flex-start; gap: .75rem; margin-top: 1.25rem; color: #364153; font-size: 14px; line-height: 1.5; }
.agree .accent { color: var(--primary-dark); }
.agree input { width: 18px; height: 18px; margin: .15rem 0 0; accent-color: var(--primary); flex: none; cursor: pointer; }
.otp { display: flex; gap: .75rem; }
.otp input { width: 56px; height: 56px; padding: 0; border: 1px solid #e5e7eb; border-radius: .6rem; text-align: center; font-size: 24px; font-weight: 500; }
.otp-meta { display: flex; justify-content: space-between; color: var(--muted); font-size: .75rem; font-weight: 400; }
.otp-meta strong { color: var(--primary-dark); font-weight: 500; }
#otp-resend-wait { color: var(--faint); }
.link { padding: 0; border: 0; background: none; color: var(--primary); font: inherit; cursor: pointer; }
.otp-warn { display: flex; align-items: center; gap: .6rem; margin-top: 1.5rem; padding: 12px 1rem; border-radius: .5rem; background: #f9fafb; color: #6b7280; font-size: 12px; line-height: 18px; }
.otp-warn .icon { color: var(--primary); }

/* Share (after registration) */
.share { max-width: 30rem; margin: 0 auto; padding: 5rem 1rem; text-align: center; }
.share h1 { font-size: 1.9rem; font-weight: 700; line-height: 36px; }
.share-brand { margin-top: .75rem; }
.share-text { margin: 1rem 0 2rem; color: #6a7282; line-height: 24px; }
.share-card { display: grid; gap: 1rem; padding: 1.5rem; text-align: left; }
.copy-box { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 12px 1rem .8rem; border: 1px solid #ede9fe; border-radius: 12px; background: var(--tint); }
.copy-box div { display: grid; gap: .3rem; min-width: 0; }
.copy-box small, .qr-box small { color: var(--faint); font-size: .75rem; }
.copy-box strong { font-weight: 500; }
.copy-box a { overflow-wrap: anywhere; color: var(--primary-dark); font-weight: 500; }
.copy-btn { display: grid; place-items: center; padding: .4rem; border: 0; border-radius: .4rem; background: none; color: var(--primary); cursor: pointer; }
.copy-btn:hover { background: var(--tint-2); }
.copy-btn.copied { color: var(--green); }
.btn.copied { background: var(--green); }
.btn-outline.copied { border-color: var(--green); background: #fff; color: var(--green); }
.qr-box { display: grid; justify-items: center; gap: .75rem; padding: 1rem; border: 1px solid #ede9fe; border-radius: .6rem; background: var(--tint); }
.qr-box img { padding: .5rem; border: 1px solid #f0eefa; border-radius: .5rem; background: #fff; }
.qr-box a { color: var(--primary-dark); font-size: 12px; font-weight: 500; }
.share-btn { justify-content: center; width: 100%; margin-top: 1rem; border: 0; font-family: inherit; cursor: pointer; }
.btn-outline { margin-top: .75rem; border: 1px solid #c4b4fd; background: #fff; color: var(--primary-dark); }
.btn-outline:hover { background: var(--tint-2); }
.share-toast { min-height: 1.5rem; margin-top: 1rem; color: var(--green); font-size: .85rem; }
#toast-container.toast-top-right { top: 24px; right: 24px; }
#toast-container > .toast-success { background-color: var(--green); }
@media (max-width: 480px) {
  #toast-container.toast-top-right { top: 16px; right: 16px; left: 16px; }
  #toast-container > div { width: 100%; }
}

/* Shared bits */
.plain { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.hello { font-size: .9rem; font-weight: 500; }
.nav-actions form { margin: 0; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.field-error, .form-error { color: #e7000b; font-size: .8rem; font-weight: 400; }
.form-error { margin-bottom: .5rem; padding: .7rem 1rem; border-radius: .5rem; background: #fef2f2; }
.field select.invalid { border-color: #e7000b; }

/* Login */
.login { max-width: 28rem; }
.login .reg-sub { margin-bottom: 1.5rem; }
.login .field:first-of-type { margin-top: 0; }

/* Dashboard */
.dash-layout { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; background: #f8f7ff; }
.sidebar { position: sticky; top: 0; display: flex; flex-direction: column; height: 100vh; padding: 1.25rem .75rem; border-right: 1px solid #f0eefa; background: #fff; }
.sidebar-brand { padding: 0 .5rem 1.25rem; font-size: 1.15rem; border-bottom: 1px solid #f0eefa; }
.sidebar-brand .wordmark { display: block; }
.sidebar-menu { margin: 1.5rem .5rem .5rem; color: var(--faint); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.sidebar nav { display: grid; gap: .25rem; }
.sidebar nav a { height: 41px; padding: 0 .75rem; border-radius: 10px; color: #6b7280; font-size: .9rem; font-weight: 500; }
.sidebar nav a:hover { background: var(--tint); }
.sidebar nav a.active { background: #ede9fe; color: var(--primary-dark); font-weight: 600; }
.user-menu { position: relative; margin-top: auto; padding-top: 1rem; border-top: 1px solid #f0eefa; }
.user-menu summary { display: flex; align-items: center; gap: .6rem; padding: .25rem; list-style: none; cursor: pointer; }
.user-menu summary::-webkit-details-marker, .notif summary::-webkit-details-marker { display: none; }
.avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 12px; font-weight: 700; flex: none; }
.user-meta { display: grid; min-width: 0; flex: 1; }
.user-meta strong { overflow: hidden; color: #1e2939; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.user-meta small { color: var(--faint); font-size: .75rem; }
.user-pop { position: absolute; bottom: 100%; left: 0; right: 0; display: grid; padding: .4rem; border: 1px solid #f0eefa; border-radius: .6rem; background: #fff; box-shadow: 0 10px 30px rgb(16 24 40 / .1); }
.user-pop a, .user-pop button { padding: .55rem .75rem; border-radius: .4rem; color: var(--ink); font-size: .85rem; text-align: left; width: 100%; }
.user-pop a:hover, .user-pop button:hover { background: var(--tint); }
.dash-main { display: grid; gap: 1.5rem; align-content: start; padding: 0 1.5rem 2rem; min-width: 0; }
.dash-top { display: flex; align-items: center; justify-content: flex-end; gap: 1.25rem; height: 56px; margin: 0 -1.5rem; padding: 0 1.5rem; border-bottom: 1px solid #f0eefa; background: #fff; }
.dash-top .btn-sm { background: var(--primary-dark); border-radius: 10px; }
.dash-top .btn-sm:hover { background: var(--primary); }
.notif { position: relative; }
.notif summary { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--muted); font-size: 1.15rem; list-style: none; cursor: pointer; }
.notif summary:hover { background: var(--tint); }
.notif-dot { position: absolute; top: 7px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
.notif-pop { position: absolute; top: calc(100% + .5rem); right: 0; z-index: 5; width: 20rem; border: 1px solid #f0eefa; border-radius: 1rem; background: #fff; box-shadow: 0 20px 40px rgb(16 24 40 / .12); }
.notif-pop h3 { padding: 1rem 1.25rem; border-bottom: 1px solid #f0eefa; font-size: 1rem; font-weight: 600; }
.notif-pop ul { display: grid; gap: .5rem; padding: .75rem; }
.notif-pop li { display: flex; gap: .75rem; padding: .8rem; border-radius: .75rem; background: var(--tint); }
.notif-pop strong { font-size: .9rem; font-weight: 600; }
.notif-pop p { margin-top: .2rem; color: var(--muted); font-size: .8rem; line-height: 1.5; }
.notif-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--tint-2); color: var(--primary); flex: none; }
.notif-icon.commission { color: var(--green); background: #ecfdf5; }
.panel { padding: 1.5rem; border: 1px solid #f0eefa; border-radius: 1rem; background: #fff; }
.dash-top + .panel { margin-top: .5rem; }
.panel h2 { margin-bottom: 1.25rem; color: #1e2939; font-size: 1.15rem; font-weight: 700; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.panel-head h2 { margin: 0; }
.panel-action { display: inline-flex; align-items: center; gap: .5rem; color: #7c3aed; font-size: .9rem; cursor: pointer; }
.range { position: relative; }
.range summary { list-style: none; padding: .55rem .75rem; border: 1px solid #e9e3f5; border-radius: .65rem; white-space: nowrap; font-size: .8rem; }
.range summary:hover, .range[open] summary { background: var(--tint); border-color: #c4b5fd; }
.range summary::-webkit-details-marker { display: none; }
.range summary > .icon:last-child { width: 14px; height: 14px; transition: transform .15s; }
.range[open] summary > .icon:last-child { transform: rotate(180deg); }
.range-form { position: absolute; right: 0; top: calc(100% + .65rem); z-index: 10; display: grid; width: 480px; overflow: hidden; border: 1px solid #e9e3f5; border-radius: 1rem; background: #fff; box-shadow: 0 16px 48px rgb(34 18 70 / .14); }
.range-presets { display: flex; gap: .4rem; overflow-x: auto; padding: 1rem 1.25rem 0; scrollbar-width: none; }
.range-preset { flex: none; padding: .45rem .7rem; border: 1px solid #e9e3f5; border-radius: 999px; background: #fff; color: #475467; font: inherit; font-size: .75rem; white-space: nowrap; cursor: pointer; }
.range-preset:hover { border-color: #c4b5fd; background: var(--tint); color: #6d28d9; }
.range-preset[aria-pressed="true"] { border-color: #c4b5fd; background: #ede5ff; color: #6d28d9; font-weight: 600; }
.range-main { min-width: 0; padding: 1rem 1.25rem .75rem; }
.range-nav { display: flex; align-items: center; gap: .5rem; margin-bottom: .85rem; }
.range-hint { flex: 1; color: var(--muted); font-size: .75rem; text-align: center; }
.range-step { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid #e9e3f5; border-radius: .5rem; background: #fff; color: #475467; cursor: pointer; }
.range-step:hover:not(:disabled) { border-color: #c4b5fd; background: var(--tint); color: #7c3aed; }
.range-step:disabled { opacity: .35; cursor: default; }
.range-years { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.range-year-title { display: block; margin-bottom: .5rem; color: #1e2939; font-size: .85rem; font-weight: 600; text-align: center; }
/* No column gap so the selected months read as one band; each row's band ends are rounded. */
.month-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .25rem 0; }
.month-grid button { position: relative; min-height: 40px; padding: 0; border: 0; border-radius: .5rem; background: none; color: #344054; font: inherit; font-size: .8rem; cursor: pointer; }
.month-grid button:hover:not(:disabled) { background: #f4efff; color: #6d28d9; }
.month-grid button:disabled { color: #d0d5dd; cursor: default; }
.month-grid .in-range { border-radius: 0; background: #f4efff; color: #6941c6; }
.month-grid .in-range:nth-child(3n + 1) { border-radius: .5rem 0 0 .5rem; }
.month-grid .in-range:nth-child(3n) { border-radius: 0 .5rem .5rem 0; }
.month-grid :is(.is-start, .is-end), .month-grid :is(.is-start, .is-end):hover:not(:disabled) { background: #7c3aed; color: #fff; font-weight: 600; }
.month-grid .is-start:not(.is-end):not(:nth-child(3n)) { border-radius: .5rem 0 0 .5rem; }
.month-grid .is-end:not(.is-start):not(:nth-child(3n + 1)) { border-radius: 0 .5rem .5rem 0; }
.is-picking .month-grid .in-range { background: #f8f5ff; }
.is-picking .month-grid :is(.is-start, .is-end):not(.is-anchor) { background: #c4b5fd; color: #4c1d95; }
.month-grid .is-current::after { content: ""; position: absolute; bottom: 5px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: #7c3aed; }
.month-grid .is-current:is(.is-start, .is-end)::after { background: currentColor; }
.range .month-grid button:focus-visible { z-index: 1; outline-offset: -2px; }
.range-footer { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .85rem 1.25rem; border-top: 1px solid #f0eefa; }
.range-ends { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; min-width: 0; }
.range-end { display: grid; gap: .1rem; min-width: 5.5rem; padding: .35rem .65rem; border: 1px solid #ede9fe; border-radius: .5rem; transition: border-color .15s, box-shadow .15s; }
.range-end small { color: var(--faint); font-size: .65rem; }
.range-end strong { color: #344054; font-size: .8rem; font-weight: 600; }
.range-end.is-active { border-color: #a78bfa; box-shadow: 0 0 0 3px #f1ebff; }
.range-count { color: var(--muted); font-size: .72rem; }
.range-actions { display: flex; align-items: center; gap: .5rem; }
.range-actions button { min-height: 40px; padding: .5rem .85rem; border: 1px solid transparent; border-radius: .55rem; font: inherit; font-size: .8rem; cursor: pointer; }
.range-cancel { background: #fff; color: #667085; }
.range-cancel:hover { background: #f5f5f8; }
.range :is(summary, select, button):focus-visible { outline: 2px solid #7c3aed; outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 640px) {
  .panel-head { flex-wrap: wrap; }
  /* Bottom sheet; the backdrop belongs to <summary>, so tapping it closes the picker natively. */
  .range[open] summary::before { content: ""; position: fixed; inset: 0; z-index: 9; background: rgb(16 24 40 / .35); }
  .range-form { position: fixed; top: auto; bottom: 1rem; left: 1rem; right: 1rem; width: auto; max-height: calc(100dvh - 2rem); overflow-y: auto; }
  .range-presets { padding: .85rem 1rem 0; }
  .range-main { padding: .85rem 1rem .5rem; }
  .range-years { grid-template-columns: minmax(0, 1fr); }
  .range-year[data-offset="1"] { display: none; }
  .month-grid button { min-height: 44px; }
  .range-footer { flex-wrap: wrap; padding: .75rem 1rem; }
  .range-actions { margin-left: auto; }
}
.panel-action .icon { width: 20px; height: 20px; }
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.25rem; }
.kpi, .chart-card { padding: 1rem 1.1rem; border: 1px solid #f0eefa; border-radius: .75rem; background: var(--tint); }
.kpi small { display: flex; align-items: center; gap: .4rem; color: var(--faint); font-size: .75rem; font-weight: 500; }
.kpi-info { position: relative; display: inline-flex; flex: none; padding: 0; border: 0; background: none; color: inherit; cursor: help; }
.kpi-info .icon { width: 1rem; height: 1rem; }
.kpi-tooltip { position: absolute; z-index: 10; right: 0; top: calc(100% + .5rem); width: max-content; max-width: min(16rem, 75vw); padding: .5rem .7rem; border-radius: .4rem; background: #374151; color: #fff; font-size: .75rem; font-weight: 400; line-height: 1.4; text-align: left; white-space: normal; visibility: hidden; opacity: 0; }
.kpi-info[aria-expanded="true"] .kpi-tooltip { visibility: visible; opacity: 1; }
.kpi strong { display: block; margin: .5rem 0; font-size: 1.5rem; font-weight: 700; line-height: 1.25; }
.kpi p { color: #6b7280; font-size: .75rem; }
.up, .kpi small.up { color: #10b981; font-weight: 600; }
.down, .kpi small.down { color: #ef4444; font-weight: 600; }
.down .icon { transform: scaleY(-1); }
.chart-card h3 { margin-bottom: 1rem; color: #1e2939; font-size: .85rem; font-weight: 600; }
.chart-card + .chart-card, .split { margin-top: 1.25rem; }
.split { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; }
.split .chart-card { margin-top: 0; }
/* --h = bar height in % of the tallest bar (180px main, 32px small, per Figma). */
.bars { display: flex; align-items: flex-end; gap: 1rem; height: 220px; }
.bars[hidden], .line-chart[hidden] { display: none; }
.empty-state { padding: 2rem 1rem; border: 1px dashed var(--line); border-radius: .75rem; color: var(--faint); font-size: .9rem; text-align: center; }
.bars-sm { height: 80px; }
.bar-col { display: flex; flex: 1; flex-direction: column; align-items: center; gap: .5rem; }
.bar-value { color: #6b7280; font-size: .75rem; font-weight: 600; }
.bar { width: 32px; height: calc(var(--h) * 1.8px); border-radius: 6px 6px 0 0; background: var(--primary); }
.bars-sm .bar { height: calc(var(--h) * .32px); }
.bar-label { color: var(--faint); font-size: .75rem; }
.tone-new { color: var(--primary); }
.bar.tone-new { background: var(--primary); }
.tone-active { color: var(--green); }
.bar.tone-active { background: var(--green); }
.tone-dormant { color: var(--orange); }
.bar.tone-dormant { background: var(--orange); }
.status-group + .status-group { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #f0eefa; }
.status-group h4 { margin-bottom: .75rem; font-size: .85rem; font-weight: 600; }
.line-chart svg { display: block; width: 100%; height: auto; overflow: visible; border: 1px solid #f0eefa; border-radius: .6rem; background: var(--tint); }
.line-chart .grid { stroke: var(--line); }
.line-chart polyline { fill: none; stroke: var(--primary); stroke-width: 2.5; stroke-linejoin: round; }
.line-chart circle { fill: var(--primary); }
.line-chart text { fill: var(--primary); font-size: 9px; font-weight: 600; }
.line-muted text { fill: #6b7280; }
.line-labels { display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; padding-top: 1rem; color: var(--faint); font-size: .75rem; text-align: center; }
.conversion { display: flex; flex-direction: column; }
.donut { position: relative; width: min(300px, 100%); margin: auto; padding: 1rem 0; }
.donut svg { display: block; width: 100%; }
.donut circle { fill: none; stroke-width: 6; }
.donut-rest { stroke: var(--green); }
.donut-value { stroke: var(--primary); }
.donut-label { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.donut-label strong { font-size: 1.6rem; font-weight: 700; }
.donut-label span { color: var(--muted); font-size: .8rem; }
.legend { display: grid; gap: .4rem; font-size: .75rem; color: var(--muted); }
.legend li { display: flex; align-items: center; gap: .5rem; }
.legend li::before { content: ""; width: 10px; height: 10px; border-radius: 2px; }
.legend .tone-traded::before { background: var(--primary); }
.legend .tone-rest::before { background: var(--green); }
.invite { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 1.5rem; padding: 1.5rem; border-radius: 1rem; background: linear-gradient(135deg, #7c2ee0, #5b21b6); color: #fff; }
.invite h2 { font-size: 1.15rem; font-weight: 600; }
.invite p { margin: .4rem 0 .9rem; color: #ddd6fe; font-size: .85rem; }
.invite-link { width: 100%; max-width: 24rem; padding: .55rem .8rem; border: 0; border-radius: .4rem; background: rgb(255 255 255 / .15); color: #fff; font: inherit; font-size: .85rem; }
.invite img { padding: .35rem; border-radius: .5rem; background: #fff; }
.btn-ghost { background: rgb(255 255 255 / .18); }
.btn-ghost:hover { background: rgb(255 255 255 / .28); }

@media (max-width: 900px) {
  .dash-layout { grid-template-columns: minmax(0, 1fr); }
  .sidebar { min-width: 0; position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .75rem 1rem; border-right: 0; border-bottom: 1px solid #f0eefa; }
  .sidebar-brand { padding: 0; border: 0; }
  .sidebar-menu { display: none; }
  .sidebar nav { order: 3; display: flex; width: 100%; overflow-x: auto; }
  .sidebar nav a { white-space: nowrap; }
  .user-menu { margin: 0 0 0 auto; padding: 0; border: 0; }
  .user-meta, .user-menu summary > .icon { display: none; }
  .user-pop { top: 100%; bottom: auto; left: auto; width: 12rem; z-index: 5; }
  .dash-main { padding: 0 1rem 1.5rem; }
  .dash-top { margin: 0 -1rem; padding: 0 1rem; }
  .kpis, .split { grid-template-columns: 1fr; }
  .invite { grid-template-columns: 1fr; }
  .notif-pop { width: min(20rem, calc(100vw - 2rem)); }
}

@media (max-width: 900px) {
  .hero, .policy { grid-template-columns: 1fr; }
  .hero { padding-top: 3rem; }
  .steps { grid-template-columns: 1fr; }
  .step-arrow { display: none; }
  .footer-inner { justify-content: center; text-align: center; }
}
@media (max-width: 560px) {
  .nav-wide { padding: 0 1rem; }
  .stepper-step span:last-child { display: none; }
  .stepper-line { margin: 15px .5rem 0; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .otp { gap: .4rem; }
  .otp input { width: 100%; height: 48px; }
}

/* Share & Invite */
.sidebar nav a { display: flex; align-items: center; gap: .65rem; }
.sidebar nav a .icon { font-size: 1.05rem; }
.invite-head h1 { font-size: 24px; font-weight: 700; line-height: 32px; }
.invite-head p { margin-top: .4rem; color: #6a7282; font-size: 14px; }
.profile-card, .info-card, .share-panel { border: 1px solid #f0eefa; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgb(16 24 40 / .04); }
.profile-card { padding: 1.25rem 1.5rem; }
.profile-row { display: flex; align-items: center; gap: 1rem; }
.profile-row > div { flex: 1; min-width: 0; }
.profile-card strong { font-size: 16px; font-weight: 600; }
.profile-card p { color: var(--faint); font-size: .85rem; }
.profile-card p b { color: var(--ink); font-weight: 500; }
.avatar-lg { width: 48px; height: 48px; font-size: 1rem; font-weight: 600; background: linear-gradient(135deg, #8b30e7, #5b21b6); }
.status-pill { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .8rem; border-radius: 999px; background: #d1fae5; color: #15803d; font-size: .75rem; font-weight: 600; }
.status-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #00c950; }
.info-grid, .share-grid { display: grid; gap: 1.25rem; }
.info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.share-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.info-card { padding: 1.5rem; }
.info-card h2, .share-panel h2 { display: flex; align-items: center; gap: .6rem; font-size: 1rem; font-weight: 600; }
.info-card h2 { color: #1e2939; }
.info-card p { margin-top: 1rem; color: #6a7282; font-size: 12px; line-height: 20px; }
.icon-chip { display: grid; place-items: center; width: 32px; height: 32px; border-radius: .5rem; background: var(--line); color: var(--primary); font-size: 1rem; flex: none; }
.share-panel { display: grid; align-content: start; gap: .9rem; padding: 1.5rem; min-width: 0; }
.share-panel.center { text-align: center; }
.share-panel h2 { justify-content: center; }
.share-panel small { color: var(--faint); font-size: .75rem; }
.qr-frame { display: grid; place-items: center; justify-self: center; max-width: 100%; padding: .5rem; border-radius: .75rem; background: var(--tint-2); }
.qr-frame img { display: block; max-width: 100%; height: auto; }
.btn-block { justify-content: center; width: 100%; border: 1px solid transparent; font-family: inherit; cursor: pointer; }
.btn-outline { border-color: #c4b5fd; background: #fff; color: var(--primary-dark); }
.btn-outline:hover { background: var(--tint-2); }
.share-panel .btn { height: 40px; padding-block: 0; border-radius: 10px; font-size: 14px; }
.copy-field { padding: 12px 1rem .8rem; border: 1px solid #f0eefa; border-radius: 12px; background: var(--tint); color: var(--muted); font-size: .85rem; text-align: left; overflow-wrap: anywhere; }
.big-code { margin: .5rem 0; color: var(--primary); font-size: 2.4rem; font-weight: 700; letter-spacing: .12em; text-align: center; }
.message { display: grid; gap: .6rem; padding-top: .9rem; border-top: 1px solid #f0eefa; text-align: left; }
.message-head { display: flex; justify-content: space-between; align-items: center; font-size: .8rem; }
.link-edit { padding: 0; border: 0; background: none; color: var(--primary); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; }
.message p { padding: .8rem 1rem; border: 1px solid #f0eefa; border-radius: .6rem; background: var(--tint); color: var(--muted); font-size: .8rem; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }
@media (max-width: 1100px) { .share-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .info-grid, .share-grid { grid-template-columns: 1fr; } .profile-row { flex-wrap: wrap; } }

/* Share page actions and popup */
.share-actions { display: grid; gap: .75rem; margin-top: 1rem; }
.share-actions .share-btn { height: 41px; margin-top: 0; padding-block: 0; border-radius: 10px; font-size: 14px; }
.share-actions .btn-outline { height: 43px; }
.btn:focus-visible, .link-edit:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.share-dialog { width: min(24rem, calc(100vw - 2rem)); padding: 1.5rem; border: 0; border-radius: 1rem; box-shadow: 0 20px 50px rgb(16 24 40 / .25); }
.share-dialog::backdrop { background: rgb(16 24 40 / .5); }
.dialog-actions { display: flex; justify-content: flex-end; gap: .75rem; margin-top: 1.25rem; }
.dialog-actions .btn { margin: 0; padding: .55rem 1.25rem; border: 1px solid transparent; font: inherit; font-size: .9rem; cursor: pointer; }
.dialog-actions .btn-outline { border-color: #c4b5fd; }
.dialog-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.dialog-head h2 { font-size: 1.1rem; font-weight: 600; }
.dialog-close { color: var(--muted); font-size: 1.6rem; line-height: 1; }
.notice-dialog { width: min(520px, calc(100vw - 2rem)); border-radius: 8px; }
.notice-dialog .dialog-head { margin-bottom: .75rem; }
.notice-dialog .dialog-head h2 { font-size: 16px; line-height: 24px; }
.notice-dialog .reg-sub { color: var(--muted); line-height: 22px; }
.notice-dialog .dialog-actions .btn { height: 32px; padding-block: 0; background: var(--primary); }
.notice-dialog .dialog-actions .btn:hover { background: var(--primary-dark); }
.notice-dialog .dialog-actions .btn-outline { border-color: #d9d9d9; border-radius: 6px; background: #fff; }
.notice-dialog .dialog-actions .btn-outline:hover { background: var(--tint-2); }
.platforms { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.platforms a { display: grid; justify-items: center; gap: .5rem; padding: .8rem .4rem; border-radius: .75rem; font-size: .8rem; }
.platforms a:hover, .platforms a:focus-visible { background: var(--tint-2); }
.platform-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #fff; font-size: 1.1rem; font-weight: 700; }
.bank-section { margin-top: 1rem; padding-top: 1.25rem; border-top: 1px solid #f0eefa; }
.bank-section h2 { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem; font-size: 1.05rem; font-weight: 600; }
.bank-box { display: grid; gap: .75rem; max-width: 25rem; margin: 0; padding: 1.25rem 1.5rem; border: 1px solid #ede9fe; border-radius: .75rem; font-size: .9rem; }
.bank-box div { display: flex; flex-wrap: wrap; gap: .3rem; min-width: 0; }
.bank-box dt { font-weight: 600; }
.bank-box dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.bank-change { margin-left: auto; padding-left: 1rem; font-size: .9rem; font-weight: 500; }
.share-dialog .field { margin-top: 0; }
.profile-card .bank-missing { display: flex; align-items: center; gap: .6rem; color: var(--muted); font-size: .8rem; }
.bank-missing .icon { flex: none; width: 16px; height: 16px; color: #f0b100; }

/* Customer care */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.contact-card, .chat { border: 1px solid #f0eefa; border-radius: 1rem; background: #fff; box-shadow: 0 1px 2px rgb(16 24 40 / .04); }
.contact-card { display: grid; align-content: start; justify-items: start; gap: 1rem; padding: 25px 1.5rem 1.5rem; border-color: #f1f5f9; }
.contact-head { display: flex; gap: 1rem; }
.contact-head h2 { font-size: 16px; font-weight: 700; }
.contact-head p { margin-top: .3rem; color: #64748b; font-size: 12px; line-height: 1.5; }
.icon-chip-lg { width: 44px; height: 44px; border-radius: .75rem; font-size: 1.2rem; }
.hotline { color: #722ed1; font-size: 2.25rem; font-weight: 500; }
.contact-card .status-pill { border: 1px solid #d1fae5; background: #ecfdf5; color: #047857; }
.contact-card .btn { border-radius: 12px; font-size: 14px; font-weight: 500; }
.contact-card > .btn { background: #722ed1; }
.contact-card > .btn:hover { background: #531dab; }
.contact-icon { width: 44px; height: 44px; border-radius: .75rem; flex: none; }
.zalo-body { display: flex; align-items: center; gap: 1.5rem; width: 100%; }
.zalo-body > div { display: grid; gap: .9rem; flex: 1; text-align: center; }
.zalo-body > .qr-frame { flex: none; }
.zalo-body small { color: #94a3b8; font-size: .75rem; }
.btn-zalo { background: #0068ff; }
.btn-zalo:hover { background: #0054cf; }
.chat { display: grid; grid-template-columns: 18rem 1fr; height: 38rem; overflow: hidden; }
.chat-list { display: flex; flex-direction: column; border-right: 1px solid #f0eefa; min-height: 0; }
.chat-title, .chat-head { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.25rem; border-bottom: 1px solid #f0eefa; }
.chat-title strong, .chat-head strong { font-size: .95rem; font-weight: 600; }
.bot-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--tint-2); color: var(--primary); font-size: 1.1rem; flex: none; }
.chat-tools { display: grid; gap: .75rem; margin: 1rem; }
.chat-new { display: flex; align-items: center; justify-content: center; gap: .6rem; padding: .7rem 1rem; border: 1px solid #ddd6fe; border-radius: .6rem; background: var(--tint-2); color: var(--primary-dark); font-size: .85rem; font-weight: 500; }
.chat-new:hover { background: var(--line); }
.chat-new span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--primary); color: #fff; font-size: .8rem; }
.chat-new:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.chat-search { display: flex; min-width: 0; align-items: center; gap: .5rem; padding: .55rem .8rem; border: 1px solid #e5e7eb; border-radius: .6rem; color: var(--faint); }
.chat-search input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: .8rem; }
.chat-group { margin: 0 1.25rem .5rem; color: var(--faint); font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.chat-list ul { padding: 0 .75rem; overflow-y: auto; }
.chat-item { padding: .75rem; border-radius: .6rem; font-size: .8rem; cursor: pointer; }
.chat-item:hover { background: var(--tint); }
.chat-item.active { background: var(--tint); }
.chat-item-head { display: flex; justify-content: space-between; gap: .5rem; }
.chat-item strong { font-weight: 600; }
.chat-item time { color: var(--faint); font-size: .7rem; }
.chat-item p { margin-top: .2rem; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.chat-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.chat-clear { margin-left: auto; color: var(--faint); font-size: 1.1rem; }
.chat-clear:hover { color: var(--muted); }
.chat-log { display: grid; align-content: start; gap: 1.25rem; flex: 1; padding: 1.5rem; overflow-y: auto; }
.msg { display: flex; gap: .75rem; max-width: 85%; }
.msg > div { display: grid; gap: .35rem; justify-items: start; min-width: 0; }
.bubble { padding: .8rem 1rem; border: 1px solid #f0eefa; border-radius: 1rem; background: var(--tint); font-size: .85rem; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }
.msg time { color: var(--faint); font-size: .7rem; }
.msg.me { justify-self: end; }
.msg.me > div { justify-items: end; }
.msg.me .bubble { border-color: transparent; background: var(--primary-dark); color: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .4rem; }
.chip { padding: .4rem .8rem; border: 1px solid #c4b5fd; border-radius: .5rem; background: #fff; color: var(--primary-dark); font: inherit; font-size: .75rem; cursor: pointer; }
.chip:hover { background: var(--tint-2); }
.chat-form { display: flex; gap: .75rem; padding: 1rem 1.25rem; border-top: 1px solid #f0eefa; }
.chat-input { display: flex; align-items: center; gap: .6rem; flex: 1; padding: .7rem 1rem; border: 1px solid #e5e7eb; border-radius: .6rem; color: var(--faint); font-size: 1.1rem; }
.chat-input:focus-within { outline: 2px solid var(--primary); outline-offset: -1px; }
.chat-input input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: .85rem; }
.chat-send { padding: 0 .9rem; border: 0; border-radius: .6rem; font-size: 1.1rem; cursor: pointer; }
@media (max-width: 900px) {
  .contact-grid, .chat { grid-template-columns: 1fr; }
  .chat-list { display: none; }
  .msg { max-width: 100%; }
}
@media (max-width: 560px) { .zalo-body { flex-direction: column; } .hotline { font-size: 1.8rem; } }
/* Program rules: landing page sections on a white panel inside .dash-main */
.rules-page { margin: -1.5rem -1.5rem -2rem; padding: 0 3rem 2.5rem; background: #fff; }
.rules-page .band { margin: 0 -1.75rem; padding: 4rem 1.75rem; }
.rules-page .policy { padding-bottom: 2rem; }
.rules-links { display: flex; flex-wrap: wrap; gap: .75rem; }
@media (max-width: 900px) { .rules-page { margin: -1.5rem -1rem -1.5rem; padding: 0 1rem 2rem; } .rules-page .band { margin: 0 -1rem; padding: 3rem 1rem; } }
.rules-links .btn { margin: 0; padding: .45rem 1rem; font-size: .85rem; }

/* Error page (404/500) */
.error-page { display: grid; place-items: center; padding: 3rem 1rem; }
.error-box { max-width: 30rem; text-align: center; }
.error-code {
  font-size: clamp(5rem, 18vw, 8rem); font-weight: 700; line-height: 1; letter-spacing: -.04em;
  background: linear-gradient(135deg, var(--primary-dark), var(--primary) 55%, #c4b5fd);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.error-box h1 { margin: 1.25rem 0 .75rem; font-size: 1.5rem; font-weight: 600; }
.error-home { margin-top: 2rem; }
.error-contact { margin-top: 1.5rem; color: var(--faint); font-size: .85rem; }

/* Toast: shows once, fades out by itself */
p.toast {
  position: fixed; left: 50%; bottom: 1.5rem; z-index: 50;
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .85rem 1.25rem; border-radius: 10px;
  background: var(--ink); color: #fff; font-size: .9rem; font-weight: 500;
  box-shadow: 0 10px 30px rgb(16 24 40 / .2); pointer-events: none;
  animation: toast 4s ease forwards;
}
p.toast .icon { color: #34d399; font-size: 1.15rem; }
@keyframes toast {
  0% { opacity: 0; transform: translate(-50%, 1rem); }
  8%, 85% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, 0); visibility: hidden; }
}

.contract-title { flex: 1; }
.contract-expand { display: grid; place-items: center; flex: none; width: 32px; height: 32px; padding: 5px; border: 0; border-radius: 6px; background: transparent; color: #475467; cursor: pointer; }
.contract-expand:hover { background: #ede9fe; color: var(--primary); }
.contract-expand:disabled { opacity: .45; cursor: default; }
.contract-view { padding: 0; overflow: auto; }
.contract-view > p, .contract-view > button { margin: 1rem; }
#contract-document { color: #000; font-size: initial; line-height: normal; zoom: var(--contract-scale, 1); }
#contract-document .docx-wrapper { padding: 12px; align-items: flex-start; background: #f3f4f6; }
#contract-document .docx-wrapper > section.docx { margin: 0 auto 12px; flex-shrink: 0; }
.contract-dialog { width: min(1000px, calc(100vw - 24px)); height: min(92vh, 1100px); max-width: none; max-height: none; padding: 0; border: 0; border-radius: 10px; overflow: hidden; }
.contract-dialog::backdrop { background: rgb(16 24 40 / .6); }
.contract-dialog[open] { display: flex; flex-direction: column; }
.contract-dialog-head { display: flex; align-items: center; gap: 1rem; padding: .75rem 1rem; border-bottom: 1px solid #e5e7eb; }
.contract-dialog-head h2 { flex: 1; margin: 0; font-size: 1rem; }
.contract-dialog-head button { font-size: 1.6rem; }
.contract-dialog-body { flex: 1; min-height: 0; overflow: auto; background: #f3f4f6; }

.success-page { padding: 48px 20px 80px; }
.success-content { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 496px; margin: 0 auto; text-align: center; }
.success-icon { display: grid; place-items: center; width: 112px; height: 112px; margin: 10px 0 12px; border: 9px solid #cde9d7; border-radius: 50%; background: #4ca46c; color: white; font-size: 58px; font-weight: 600; }
.success-content h1 { margin: 0; font-size: 30px; line-height: 1.3; }
.success-thanks { margin: 0; color: #6a7282; font-size: 16px; line-height: 1.5; }
.success-next { box-sizing: border-box; width: 100%; padding: 20px 24px; border: 1px solid #e8e3f7; border-radius: 12px; background: #fff; }
.success-next h2 { margin: 0 0 8px; font-size: 16px; }
.success-next p { margin: 0; color: #6a7282; font-size: 14px; line-height: 1.5; }
.success-home { box-sizing: border-box; justify-content: center; width: 100%; min-height: 48px; border-radius: 10px; font-size: 14px; }