/* Ngọc Trắng — the approved light theme, shared by public and private pages. */
:root {
  color-scheme: light;
  --ground: #f5f8f6;
  --surface: #ffffff;
  --surface-raised: #eef4f1;
  --surface-selected: #e5f5ee;
  --text: #102a24;
  --muted: #4b625a;
  --faint: #5a7067;
  --accent: #007a59;
  --accent-strong: #00694c;
  --accent-ink: #ffffff;
  --border: #d6e2dc;
  --quiet-border: #e1e9e5;
  --error: #a42e27;
  --content-width: 1320px;
  --warning: #76531c;
  --warning-ground: #fff4db;
  --error-ground: #fff0ee;
  --error-border: #e5bbb6;
}
body { background: var(--ground); color: var(--text); }
.site-header, .app-header { background: var(--surface); }
.site-header { border-bottom: 1px solid var(--quiet-border); }
.brand-wordmark { color: var(--text); }
.main-nav > .nav-active, .app-nav a[aria-current=page] { color: var(--accent); }
.login-button { color: var(--accent); border-color: var(--border); background: var(--surface); }
.icon-button:hover, [data-menu-toggle]:hover { background: var(--surface-raised); opacity: 1; }
.button-primary, .customer-button-primary { background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); }
.button-primary:hover, .customer-button-primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); opacity: 1; }
.button-quiet, .customer-button-secondary { border-color: #c0d2c8; background: var(--surface); color: var(--text); }
.button:disabled, .services-page .button:disabled, .customer-button:disabled { background: #e1eae5; color: #53665c; border-color: var(--border); opacity: 1; transform: none; }
.demo-notice, .connection-banner { background: #eaf3ed; color: #355b4b; border-bottom: 1px solid var(--quiet-border); }
.demo-notice > span { padding-block: 7px; min-height: 32px; }
.notice-divider, .notice-dot, .connection-dot { color: var(--faint); }
.connection-dot { background: var(--faint); }
.service-banner { background-color: var(--surface-raised); background-image: url('/assets/images/lq-nakroth-thu-nguyen.webp'); }
.service-banner::before { background: rgba(245,250,247,.9); }
.service-banner p, .service-sidebar nav a, .confirmation-note, .consent-row { color: var(--muted); }
.service-sidebar nav a[aria-current=page] { color: var(--accent); }
.consent-row span { color: var(--muted) !important; }
.page-message, .sensitive-note { background: var(--surface-selected); border-color: #bad9c9; color: #285442; }
.page-message.is-error { background: var(--error-ground); border-color: var(--error-border); color: var(--error); }
.service-product, .package-caption { background: var(--surface); border-color: var(--border); }
.service-product:has(input:checked), .package-option:has(input:checked) .package-caption { background: var(--surface-selected); border-color: var(--accent); }
.service-product input, .package-option input { background: var(--surface); border-color: #80978b; }
.service-product input:checked { border-color: var(--accent); }
.package-option input:checked { background: var(--surface); }
input:not([type=checkbox]):not([type=radio]), textarea, select,
.service-field input:not([type=checkbox]), .service-field textarea,
.auth-field input, #credit-form input:not([type=checkbox]), #credit-form select {
  background: var(--surface);
  color: var(--text);
  border-color: #bdcfc4;
  caret-color: var(--text);
}
input::placeholder, textarea::placeholder, .auth-field input::placeholder,
.service-field textarea::placeholder, .service-field input::placeholder { color: #657a70; opacity: 1; }
input:not([type=checkbox]):not([type=radio]):focus, textarea:focus, select:focus { border-color: var(--accent); }
input[aria-invalid=true], textarea[aria-invalid=true] { border-color: var(--error); }
.auth-field input:autofill { box-shadow: 0 0 0 100px var(--surface) inset; -webkit-text-fill-color: var(--text); }
.auth-error { color: var(--error); border-color: var(--error-border); background: var(--error-ground); }
.status-label { background: var(--surface-raised); color: var(--muted); }
.status-label.is-good, .order-badge.is-good { color: var(--accent); background: var(--surface-selected); border-color: #bddbc9; }
.status-label.is-error, .order-badge.is-error { color: var(--error); background: var(--error-ground); border-color: var(--error-border); }
.status-label.is-review, .order-badge.is-review { color: var(--warning); background: var(--warning-ground); border-color: #e8d4a8; }
.order-notice.is-review { color: var(--warning); border-color: #c3963b; background: var(--warning-ground); }
.order-progress { background: var(--quiet-border); }
.credential-output, .preview-codes { background: var(--ground); color: var(--text); border-color: var(--border); }
.reward-track-base { stroke: #c5ddcf; }
.empty-state > .icon, .empty-clipboard, .empty-wallet-symbol { color: var(--faint); }
.site-footer { background: var(--surface); }
.site-dialog { background: var(--surface); color: var(--text); border-color: #c2d5c9; box-shadow: 0 20px 70px #102a2426; }
.site-dialog::backdrop { background: #102a2466; }
.step-marker { color: var(--accent); border-color: #c0d7ca; }
.switch-track { background: #c4dece; }
.switch-track > span { background: var(--accent); }
.noscript-note { background: var(--surface-raised); color: var(--text); border-color: var(--border); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
@media (max-width: 900px) {
  .main-nav { background: var(--surface); border-bottom-color: var(--border); }
  .main-nav > a, .main-nav > button, .app-nav a { min-height: 44px; }
}
@media (max-width: 650px) {
  .header-inner { gap: 8px; }
  .header-actions { gap: 4px; }
  .login-button, .menu-toggle { width: 44px; min-width: 44px; height: 44px; }
  .brand-wordmark { font-size: 25px; }
  .brand img { width: 30px; height: 30px; }
  .brand { gap: 7px; }
  .motion-toggle { min-width: 44px; justify-content: flex-end; }
  .auth-field input, .service-field input:not([type=checkbox]), .service-field textarea { font-size: 16px; }
}
@media (max-width: 360px) {
  .header-inner { gap: 6px; }
  .brand-wordmark { font-size: 22px; }
  .brand img { width: 27px; height: 27px; }
  .brand { gap: 6px; }
  .header-actions { gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}