.form-section-title {
  margin: 8px 0 2px;
  color: var(--primary, #2563eb);
  font-size: 0.92rem;
  font-weight: 700;
}
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

:root,
html[data-theme="dark"] {
  --bg-page: #0f172a; --bg-surface: #172033; --bg-soft: #1e293b; --bg-muted: var(--bg-soft); --bg-elevated: #243147;
  --bg-card: var(--bg-surface); --bg-control: #1e293b; --bg-hover: #243147; --bg-active: #28364d; --bg-header: rgba(15,17,23,.88); --bg-sidebar: #081322; --bg-overlay: rgba(2,6,23,.72);
  --text-primary: #f8fafc; --text-secondary: #cbd5e1; --text-muted: #94a3b8; --text-disabled: #64748b; --text-inverse: #fff;
  --text-on-accent: #fff; --text-link: #60a5fa; --border-default: #334155; --border-soft: #263449; --border-strong: #475569; --border-interactive: #60a5fa; --border-focus: #60a5fa;
  --primary: #60a5fa; --primary-hover: #3b82f6; --primary-active: #2563eb; --primary-soft: rgba(59,130,246,.16); --primary-text: var(--primary);
  --success: #22c55e; --warning: #f59e0b; --danger: #ef4444; --info: #38bdf8; --neutral: #94a3b8;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 4px 12px rgba(0,0,0,.35); --shadow-lg: 0 12px 30px rgba(0,0,0,.45); --shadow-surface: 0 16px 40px rgba(2,6,23,.28); --shadow-card: 0 16px 40px rgba(2,6,23,.2); --shadow-focus: 0 0 0 3px rgba(96,165,250,.25);
  --footer-bg: #080f1f; --footer-text: #f1f5f9; --footer-muted: #b6c2d1; --footer-link: #93c5fd; --footer-border: #263349;
  --form-control-height: 44px; --form-control-radius: 10px; --form-section-gap: 24px; --space-major: 28px; --space-card: 20px; --space-heading: 14px; --space-form: 16px; --money-suffix-text: var(--text-secondary);
  --brand-visual-ring: var(--border-strong); --brand-visual-glow: var(--primary-soft);
  --info-bg: rgba(59,130,246,.14); --info-border: rgba(96,165,250,.35); --info-text: #dbeafe;
  --success-bg: rgba(34,197,94,.14); --success-border: rgba(34,197,94,.32); --success-text: #86efac;
  --warning-bg: rgba(245,158,11,.14); --warning-border: rgba(245,158,11,.32); --warning-text: #fde68a;
  --danger-bg: rgba(239,68,68,.14); --danger-border: rgba(239,68,68,.32); --danger-text: #fecaca;
  --neutral-bg: rgba(148,163,184,.14); --neutral-border: rgba(148,163,184,.3); --neutral-text: #cbd5e1;
  --table-header-bg: rgba(255,255,255,.05); --table-row-hover: rgba(255,255,255,.03); --table-row-selected: rgba(59,130,246,.12); --table-border: var(--border-default);
  --input-bg: var(--bg-control); --input-border: var(--border-default); --input-border-hover: var(--border-strong); --input-border-focus: var(--border-interactive); --input-placeholder: var(--text-muted); --input-disabled-bg: var(--bg-soft);
  --chart-grid: rgba(255,255,255,.08); --chart-label: #94a3b8; --chart-center: #1a1d2e; --chart-center-text: #fff;
  --nav-active-bg: rgba(37,99,235,.24); --nav-active-border: rgba(96,165,250,.38); --nav-active-indicator: #60a5fa;
  --tone-blue-bg: linear-gradient(135deg,rgba(59,130,246,.2),rgba(59,130,246,.05)); --tone-purple-bg: linear-gradient(135deg,rgba(168,85,247,.2),rgba(168,85,247,.05)); --tone-orange-bg: linear-gradient(135deg,rgba(249,115,22,.2),rgba(249,115,22,.05)); --tone-red-bg: linear-gradient(135deg,rgba(239,68,68,.2),rgba(239,68,68,.05)); --tone-green-bg: linear-gradient(135deg,rgba(34,197,94,.2),rgba(34,197,94,.05)); --tone-teal-bg: linear-gradient(135deg,rgba(20,184,166,.2),rgba(20,184,166,.05));
  --tone-blue-text: #93c5fd; --tone-purple-text: #c4b5fd; --tone-orange-text: #fed7aa; --tone-red-text: #fecaca; --tone-green-text: #86efac; --tone-teal-text: #99f6e4;
}
html[data-theme="light"] {
  --bg-page: #f8fafc; --bg-surface: #fff; --bg-soft: #f1f5f9; --bg-muted: var(--bg-soft); --bg-elevated: #fff;
  --bg-card: var(--bg-surface); --bg-control: #f8fafc; --bg-hover: #eef4fb; --bg-active: #e2eaf5; --bg-header: rgba(255,255,255,.94); --bg-sidebar: #fff; --bg-overlay: rgba(15,23,42,.42);
  --text-primary: #0f172a; --text-secondary: #475569; --text-muted: #64748b; --text-disabled: #94a3b8; --text-inverse: #fff;
  --text-on-accent: #fff; --text-link: #2563eb; --border-default: #e2e8f0; --border-soft: #edf2f7; --border-strong: #cbd5e1; --border-interactive: #2563eb; --border-focus: #2563eb;
  --primary: #2563eb; --primary-hover: #1d4ed8; --primary-active: #1e40af; --primary-soft: #eff6ff; --primary-text: var(--primary);
  --success: #16a34a; --warning: #d97706; --danger: #dc2626; --info: #0284c7; --neutral: #64748b;
  --shadow-surface: 0 12px 35px rgba(15,23,42,.07); --shadow-card: 0 14px 32px rgba(15,23,42,.06); --shadow-sm: 0 1px 2px rgba(15,23,42,.05); --shadow-md: 0 4px 12px rgba(15,23,42,.07); --shadow-lg: 0 12px 30px rgba(15,23,42,.09); --shadow-focus: 0 0 0 3px rgba(37,99,235,.2);
  --footer-bg: #0f2340; --footer-text: #f8fafc; --footer-muted: #cbd5e1; --footer-link: #bfdbfe; --footer-border: #334b68;
  --form-control-height: 44px; --form-control-radius: 10px; --form-section-gap: 24px; --space-major: 28px; --space-card: 20px; --space-heading: 14px; --space-form: 16px; --money-suffix-text: var(--text-secondary);
  --brand-visual-ring: var(--border-strong); --brand-visual-glow: var(--primary-soft);
  --info-bg: #eff6ff; --info-border: #93c5fd; --info-text: #1e3a8a;
  --success-bg: #ecfdf5; --success-border: #86efac; --success-text: #166534;
  --warning-bg: #fff7ed; --warning-border: #fdba74; --warning-text: #92400e;
  --danger-bg: #fef2f2; --danger-border: #fca5a5; --danger-text: #b91c1c;
  --neutral-bg: #f1f5f9; --neutral-border: #cbd5e1; --neutral-text: #475569;
  --table-header-bg: #f1f5f9; --table-row-hover: #f8fafc; --table-row-selected: #eff6ff; --table-border: var(--border-default);
  --input-bg: var(--bg-control); --input-border: var(--border-default); --input-border-hover: var(--border-strong); --input-border-focus: var(--border-interactive); --input-placeholder: var(--text-muted); --input-disabled-bg: var(--bg-soft);
  --chart-grid: rgba(15,23,42,.1); --chart-label: #64748b; --chart-center: #eff6ff; --chart-center-text: #0f172a;
  --nav-active-bg: #2563eb; --nav-active-border: #2563eb; --nav-active-indicator: rgba(255,255,255,.78);
  --tone-blue-bg: linear-gradient(135deg,#dbeafe,#eff6ff); --tone-purple-bg: linear-gradient(135deg,#ede9fe,#f5f3ff); --tone-orange-bg: linear-gradient(135deg,#ffedd5,#fff7ed); --tone-red-bg: linear-gradient(135deg,#fee2e2,#fff1f2); --tone-green-bg: linear-gradient(135deg,#dcfce7,#ecfdf5); --tone-teal-bg: linear-gradient(135deg,#ccfbf1,#ecfeff);
  --tone-blue-text: #1e40af; --tone-purple-text: #6b21a8; --tone-orange-text: #9a3412; --tone-red-text: #991b1b; --tone-green-text: #166534; --tone-teal-text: #115e59;
}

/* Public community portal */
.public-site { --portal-blue:var(--primary); --portal-dark:var(--primary-hover); --portal-navy:var(--text-primary); --portal-soft:var(--primary-soft); --portal-bg:var(--bg-page); --portal-border:var(--border-default); min-height:100vh; display:flex; flex-direction:column; color:var(--text-primary); background:var(--bg-page); }
.portal-header { position:sticky; top:0; z-index:40; border-bottom:1px solid var(--border-default); background:color-mix(in srgb,var(--bg-surface) 96%,transparent); backdrop-filter:blur(12px); }
.portal-nav-wrap { width:min(1200px,calc(100% - 40px)); min-height:64px; margin:auto; display:flex; align-items:center; gap:14px; }
.portal-brand { display:flex; align-items:center; flex:none; }
.public-logo { display:block; width:auto; object-fit:contain; object-position:left center; }
.portal-nav { display:flex; align-items:center; gap:4px; }
.portal-nav a { padding:10px 12px; border-radius:9px; color:var(--text-secondary); font-size:13px; font-weight:700; text-decoration:none; white-space:nowrap; }
.portal-nav a:hover,.portal-nav a.active { color:var(--portal-blue); background:var(--portal-soft); }
.portal-nav .portal-login-link { margin-left:6px; color:#fff; background:var(--portal-blue); }
.portal-nav .portal-login-link:hover,.portal-nav .portal-login-link.active { color:#fff; background:var(--portal-dark); }
.portal-menu-button,.portal-theme-button { width:46px; height:46px; padding:10px; flex:none; color:var(--text-primary); background:var(--bg-surface); border:1px solid var(--border-default); border-radius:10px; cursor:pointer; }.portal-menu-button{display:none}.portal-theme-button{margin-left:auto;font-size:18px}
.portal-menu-button svg { width:100%; fill:none; stroke:currentColor; stroke-width:2; }
.portal-main { flex:1; min-width:0; width:100%; }.public-content-container{width:100%;margin-inline:auto}.public-form-flow{width:min(1040px,calc(100% - 40px));margin-inline:auto;padding-top:54px}.public-form-flow>.page-header,.public-form-flow>.registration-card,.public-form-flow>.public-support{width:100%;max-width:none;margin-inline:0}.public-form-flow>.page-header{margin-bottom:24px}.public-form-flow>.registration-card{margin-top:0}
.portal-home,.portal-page { width:min(1200px,calc(100% - 40px)); margin:auto; }
.portal-hero { display:grid; grid-template-columns:minmax(0,55fr) minmax(320px,45fr); grid-template-areas:"copy visual" "trust visual"; align-items:center; column-gap:64px; row-gap:28px; padding:72px 0 76px; }
.portal-hero-copy{grid-area:copy;align-self:end}
.portal-eyebrow,.portal-section-heading>span,.member-banner>div>span,.portal-page-heading>span { display:block; margin-bottom:14px; color:var(--portal-blue); font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.portal-hero h1 { max-width:680px; margin:0; color:var(--portal-navy); font-size:clamp(48px,4.6vw,62px); line-height:1.1; letter-spacing:-.045em; }
.portal-hero h1 svg { width:.72em; fill:none; stroke:var(--portal-blue); stroke-width:2.4; vertical-align:.05em; }
.portal-hero h1 em { color:var(--portal-blue); font-style:normal; }
.portal-hero-copy>p { max-width:620px; margin:22px 0 28px; color:var(--text-secondary); font-size:18px; line-height:1.65; }
.portal-hero-actions { display:flex; flex-wrap:wrap; gap:12px; }
.portal-hero-trust{grid-area:trust;align-self:start;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px 22px;color:var(--text-secondary);font-size:13px;font-weight:700;list-style:none}
.portal-hero-trust li{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}.portal-hero-trust svg{width:17px;height:17px;fill:none;stroke:var(--success);stroke-width:2.4}
.public-site .btn-primary,.public-site .btn-secondary { min-height:46px; padding:12px 20px; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; font-weight:800; text-decoration:none; }
.public-site .btn-primary { color:#fff; background:var(--portal-blue); border:1px solid var(--portal-blue); }
.public-site .btn-primary:hover { background:var(--portal-dark); }
.public-site .btn-secondary { color:var(--text-primary); background:var(--bg-surface); border:1px solid var(--border-strong); }
.portal-hero-visual { grid-area:visual; position:relative; width:clamp(320px,34vw,460px); aspect-ratio:1; justify-self:end; display:grid; place-items:center; isolation:isolate; }
.community-avatar-halo{position:absolute;inset:3%;z-index:-1;border-radius:26%;background:radial-gradient(circle,color-mix(in srgb,var(--primary) 24%,transparent),color-mix(in srgb,var(--brand-visual-glow) 55%,transparent) 48%,transparent 72%);filter:blur(20px);transform:scale(1.08)}
.community-avatar-card{position:relative;width:100%;aspect-ratio:1;margin:0;padding:7px;border:1px solid var(--brand-visual-ring);border-radius:24px;background:var(--bg-elevated);box-shadow:var(--shadow-surface);overflow:hidden}
.community-avatar-card img{display:block;width:100%;height:100%;object-fit:cover;border-radius:17px}
.community-avatar-card figcaption{position:absolute;right:20px;bottom:20px;min-height:38px;padding:8px 12px;display:flex;align-items:center;gap:7px;color:var(--text-primary);background:color-mix(in srgb,var(--bg-surface) 92%,transparent);border:1px solid var(--border-default);border-radius:999px;box-shadow:var(--shadow-surface);font-size:12px;font-weight:800;letter-spacing:0;text-transform:none;backdrop-filter:blur(10px)}
.community-avatar-card figcaption svg{width:18px;height:18px;fill:none;stroke:var(--success);stroke-width:2.5}
@media(min-width:901px){.community-avatar-card{animation:communityAvatarFloat 5.5s ease-in-out infinite}}
@keyframes communityAvatarFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.portal-section { padding:76px 0; }
.portal-section-heading { max-width:680px; margin-bottom:34px; }
.portal-section-heading h2,.member-banner h2,.portal-page-heading h1 { margin:0; color:var(--portal-navy); font-size:clamp(28px,3.4vw,44px); line-height:1.2; letter-spacing:-.035em; }
.portal-section-heading p,.portal-page-heading p { color:var(--text-muted); line-height:1.7; }
.service-grid,.channel-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.service-card,.channel-grid a { min-width:0; padding:28px; border:1px solid var(--border-default); border-radius:16px; color:inherit; background:var(--bg-surface); box-shadow:var(--shadow-surface); text-decoration:none; }
.service-card>span { color:#93c5fd; font-size:13px; font-weight:900; }
.service-card h3 { margin:26px 0 10px; font-size:21px; }
.service-card p { min-height:76px; color:var(--text-muted); line-height:1.6; }
.service-card a { color:var(--portal-blue); font-weight:800; text-decoration:none; }
.member-banner { margin:30px 0; padding:40px 46px; display:flex; align-items:center; justify-content:space-between; gap:30px; border:1px solid var(--border-default); border-radius:20px; color:var(--text-primary); background:var(--bg-surface); box-shadow:var(--shadow-surface); }
.member-banner h2 { color:var(--text-primary); }.member-banner p { margin-bottom:0; color:var(--text-secondary); }.member-banner>div>span { color:var(--primary); }
.channel-grid a { display:grid; gap:8px; }.channel-grid strong { color:var(--primary); }.channel-grid span { color:var(--text-muted); line-height:1.5; }
.portal-footer { margin-top:72px; color:var(--footer-muted); background:var(--footer-bg); }
.portal-footer-grid { width:min(1180px,calc(100% - 40px)); margin:auto; padding:48px 0 36px; display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:34px; }
.portal-footer-grid>div { display:flex; flex-direction:column; gap:10px; }.portal-footer strong { color:var(--footer-text); }.portal-footer p { margin:0; color:var(--footer-muted); line-height:1.6; }.portal-footer a { color:var(--footer-link); font-size:13px; text-decoration:none; }.portal-footer a:hover { color:var(--footer-text); text-decoration:underline; }
.portal-footer-bottom { padding:18px 20px; border-top:1px solid var(--footer-border); color:var(--footer-muted); font-size:12px; text-align:center; }
.portal-page { padding:54px 0; }.portal-page.narrow { width:min(760px,calc(100% - 32px)); }.portal-page-heading { margin-bottom:26px; }
.lookup-guide,.lookup-support { padding:16px 18px; display:flex; gap:12px; border:1px solid var(--border-strong); border-radius:12px; color:var(--text-secondary); background:var(--primary-soft); }.lookup-guide strong,.lookup-support strong { color:var(--text-primary); white-space:nowrap; }
.lookup-form { margin:22px 0; padding:24px; display:grid; grid-template-columns:1fr auto; align-items:end; gap:12px; border:1px solid var(--border-default); border-radius:16px; background:var(--bg-surface); }.lookup-form .form-group { margin:0; }
.lookup-results { display:grid; gap:14px; margin:22px 0; }.lookup-card,.lookup-empty { padding:24px; border:1px solid var(--border-default); border-radius:16px; background:var(--bg-surface); }.lookup-card>div>span { color:var(--text-muted); font-size:12px; }.lookup-card h2 { margin:4px 0 20px; }.lookup-card dl { margin:0; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }.lookup-card dl div { display:grid; gap:5px; }.lookup-card dt { color:var(--text-muted); font-size:12px; }.lookup-card dd { margin:0; font-weight:700; }.status-pill { padding:5px 9px; border-radius:999px; color:var(--success); background:color-mix(in srgb,var(--success) 14%,transparent); font-size:12px; }.lookup-empty { display:grid; gap:7px; text-align:center; }.lookup-empty span { color:var(--text-muted); }
.public-site .public-content,.public-site .auth-shell { width:min(1180px,calc(100% - 40px)); margin:auto; padding:54px 0; }.public-site .page-header { width:100%; }.public-site .registration-card,.public-site .form-card { color:var(--text-primary); background:var(--bg-surface); border-color:var(--border-default); box-shadow:var(--shadow-surface); }.public-site .muted-text,.public-site .field-helper { color:var(--text-muted); }.public-site .form-control { color:var(--text-primary); background:var(--bg-surface); border-color:var(--border-strong); }.public-site .form-section-title { color:var(--primary); }.public-site .auth-shell { min-height:auto; display:block; background:transparent; }.public-site .auth-landing { width:100%; }.public-site .auth-brand-row { display:none; }.public-site .auth-main-grid { grid-template-columns:minmax(0,.9fr) minmax(420px,1fr); width:100%; margin:auto; gap:24px; }.public-site .auth-panel,.public-site .auth-story-panel { color:var(--text-primary); background:var(--bg-surface); border-color:var(--border-default); box-shadow:var(--shadow-surface); }.public-site .auth-story-media{height:230px;aspect-ratio:auto;background:var(--bg-muted)}.public-site .auth-story-media img{object-fit:cover;padding:0}.public-site .auth-story-content h2,.public-site .auth-panel h2 { color:var(--text-primary); }.public-site .auth-story-content p,.public-site .auth-panel p,.public-site .auth-panel span { color:var(--text-secondary); }.public-site .auth-tab-list { grid-template-columns:repeat(2,minmax(0,1fr));background:var(--bg-muted); border-color:var(--border-default); }.public-site .auth-tab-button { color:var(--text-secondary); }.public-site .auth-tab-button.active { color:var(--text-inverse); background:var(--primary); border-color:var(--primary); }
@media(max-width:900px){.portal-brand{margin-right:auto}.portal-theme-button{order:2;margin-left:0}.portal-menu-button{display:block;order:3}.portal-nav{position:absolute;top:64px;left:20px;right:20px;padding:10px;display:none;flex-direction:column;align-items:stretch;border:1px solid var(--border-default);border-radius:14px;background:var(--bg-surface);box-shadow:var(--shadow-surface)}.portal-nav.open{display:flex}.portal-nav a{min-height:46px;padding:12px;display:flex;align-items:center}.portal-nav .portal-login-link{margin:5px 0 0;border-top:1px solid var(--border-default);border-radius:0 0 9px 9px}.portal-hero{grid-template-columns:1fr;grid-template-areas:"copy" "visual" "trust";gap:34px;padding:56px 0}.portal-hero-copy{align-self:auto}.portal-hero-visual{width:min(82vw,360px);justify-self:center}.portal-hero-trust{justify-content:center}.portal-footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.portal-nav-wrap,.portal-home{width:calc(100% - 28px)}.public-form-flow{width:calc(100% - 28px);padding-top:32px}.portal-hero{padding:44px 0 48px}.portal-hero h1{font-size:clamp(34px,9.3vw,40px)}.portal-hero-copy>p{font-size:16px}.portal-hero-visual{width:min(82vw,360px)}.community-avatar-card figcaption{right:14px;bottom:14px}.portal-hero-trust{gap:10px 16px}.portal-section{padding:48px 0}.service-grid,.channel-grid{grid-template-columns:1fr}.service-card p{min-height:0}.member-banner{padding:28px;align-items:flex-start;flex-direction:column}.portal-footer-grid{width:calc(100% - 32px);grid-template-columns:1fr}.lookup-form{padding:18px;grid-template-columns:1fr}.lookup-card dl{grid-template-columns:repeat(2,1fr)}.lookup-guide,.lookup-support{align-items:flex-start;flex-direction:column}.public-site .public-content,.public-site>.auth-shell{padding:32px 0}.public-site .form-row{grid-template-columns:1fr}}
.lookup-renew-button{margin-top:22px}.public-renew-panel{margin-top:18px;padding:20px;display:grid;gap:14px;border:1px solid var(--border-default);border-radius:12px;background:var(--bg-muted)}.public-renew-panel h3,.public-renew-panel p{margin:0}.public-renew-payment{justify-items:center;text-align:center}.public-renew-payment>strong{color:var(--primary);font-size:24px}.public-renew-payment img{width:min(260px,100%);aspect-ratio:1;object-fit:contain;border-radius:10px;background:var(--bg-surface)}
.public-renew-blocked{color:var(--warning-text);background:var(--warning-bg);border-color:color-mix(in srgb,var(--warning-text) 28%,transparent)}.public-renew-blocked h3,.public-renew-blocked p{color:inherit}.public-renew-blocked .public-contact-links{margin-top:2px}
.public-renew-payment-card{width:100%;gap:22px;padding:clamp(18px,4vw,28px);color:var(--text-primary);background:var(--bg-surface);box-shadow:var(--shadow-surface)}
.public-renew-confirmation{gap:20px;background:var(--bg-surface);box-shadow:var(--shadow-surface)}.public-renew-confirmation header{text-align:center}.public-renew-confirmation h3{margin-top:5px;color:var(--text-primary)}
.public-renew-duration{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0;padding:0;border:0}.public-renew-duration legend{grid-column:1/-1;margin-bottom:2px;color:var(--text-secondary);font-size:13px;font-weight:700}.public-renew-duration label{cursor:pointer}.public-renew-duration input{position:absolute;opacity:0;pointer-events:none}.public-renew-duration span{min-height:44px;display:grid;place-items:center;padding:8px;border:1px solid var(--border-default);border-radius:10px;color:var(--text-secondary);background:var(--bg-soft);font-weight:800}.public-renew-duration input:checked+span{color:var(--primary);border-color:var(--primary);background:var(--primary-soft)}.public-renew-duration input:focus-visible+span{outline:2px solid var(--primary);outline-offset:2px}
.public-renew-preview{display:grid;gap:10px;margin:0;padding:16px;border:1px solid var(--border-soft);border-radius:12px;background:var(--bg-soft)}.public-renew-preview>div{display:flex;justify-content:space-between;gap:18px}.public-renew-preview dt{color:var(--text-secondary)}.public-renew-preview dd{margin:0;color:var(--text-primary);font-weight:700;text-align:right}.public-renew-preview .is-total{padding-top:12px;border-top:1px solid var(--border-default)}.public-renew-preview .is-total dd{color:var(--primary);font-size:20px}
.public-renew-payment-card header{text-align:center}.public-renew-payment-card h3{margin-top:5px;font-size:clamp(20px,4vw,26px);color:var(--text-primary)}
.public-renew-eyebrow,.public-renew-amount span,.public-renew-status-section>div>span{color:var(--text-secondary);font-size:13px;font-weight:700}
.public-renew-amount{display:grid;gap:5px;text-align:center}.public-renew-amount strong{color:var(--primary);font-size:clamp(28px,7vw,38px);line-height:1.15;font-variant-numeric:tabular-nums}
.public-renew-payment-columns{display:grid;min-width:0;gap:24px}.public-renew-qr-column{display:grid;min-width:0;align-content:start;justify-items:center;gap:12px}.public-renew-payment-card .public-renew-qr{width:clamp(240px,28vw,276px);min-height:0;padding:14px;border:1px solid var(--border-soft);border-radius:16px;background:#fff;box-shadow:var(--shadow-surface)}
.public-renew-payment-card .public-renew-qr .payos-qr-code{width:100%;max-width:none;border-radius:4px;background:#fff}
.public-renew-scan-hint{color:var(--text-secondary);font-size:14px}.payos-expiry-countdown{display:grid;gap:2px;color:var(--text-secondary);text-align:center}.payos-expiry-countdown span{font-size:13px}.payos-expiry-countdown strong{color:var(--text-primary);font-size:22px;font-variant-numeric:tabular-nums}.payos-expiry-countdown.is-warning strong{color:var(--warning-text)}
.public-renew-checkout{min-width:min(100%,280px);text-align:center}
.public-renew-period{padding-top:20px;border-top:1px solid var(--border-soft)}.public-renew-period h4{margin:0 0 12px;color:var(--text-primary)}.public-renew-period dl{display:grid;gap:10px;margin:0}.public-renew-period dl>div{display:flex;justify-content:space-between;gap:18px}.public-renew-period dt{color:var(--text-secondary)}.public-renew-period dd{margin:0;color:var(--text-primary);font-weight:700;text-align:right}.public-renew-period p{margin-top:12px;color:var(--text-muted);font-size:13px;line-height:1.5}
.public-renew-status-section{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:20px;border-top:1px solid var(--border-soft)}.public-renew-status{display:flex;align-items:center;gap:8px;margin-top:5px;color:var(--text-primary);font-weight:700}.public-renew-status>span{width:9px;height:9px;border-radius:50%;background:var(--warning-text);box-shadow:0 0 0 4px var(--warning-bg)}.public-renew-status.is-failed{color:var(--danger-text)}
.public-renew-terminal{display:grid;width:100%;justify-items:center;gap:10px;padding:16px;border:1px solid var(--border-default);border-radius:12px;color:var(--warning-text);background:var(--warning-bg);text-align:center}.public-renew-terminal.is-failed{color:var(--danger-text);background:var(--danger-bg)}
.public-manual-transfer{width:100%;min-width:0;padding-top:20px;border-top:1px solid var(--border-soft)}.public-manual-transfer h4{margin:0 0 14px;color:var(--text-primary);text-align:center;text-transform:uppercase}.public-manual-transfer dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0}.public-transfer-field{display:grid;min-width:0;align-content:start;gap:7px;padding:12px;border:1px solid var(--border-soft);border-radius:10px;background:var(--bg-soft)}.public-transfer-field.is-full{grid-column:1/-1}.public-manual-transfer dt{min-width:0;color:var(--text-secondary);font-size:12px}.public-manual-transfer dd{display:grid;grid-template-columns:minmax(0,1fr) auto;min-width:0;align-items:center;gap:10px;margin:0;color:var(--text-primary);text-align:left}.public-manual-transfer dd strong{min-width:0;white-space:normal;word-break:normal;overflow-wrap:break-word;font-variant-numeric:tabular-nums}.public-manual-transfer .compact-button{width:112px;min-width:112px;white-space:nowrap}.public-manual-transfer p{margin-top:14px;padding:12px;color:var(--warning-text);border:1px solid var(--border-default);border-radius:10px;background:var(--warning-bg);font-size:13px;line-height:1.5}
.public-renew-success dl{display:grid;width:100%;gap:10px;margin:4px 0}.public-renew-success dl>div{display:flex;justify-content:space-between;gap:16px}.public-renew-success dt{color:var(--text-secondary)}.public-renew-success dd{margin:0;color:var(--text-primary);font-weight:700;text-align:right}
@media(min-width:1024px){.portal-page.narrow.public-lookup-page{width:min(1180px,calc(100% - 40px))}.public-renew-payment-columns{grid-template-columns:minmax(280px,.9fr) minmax(420px,1.1fr);align-items:start}.public-manual-transfer{padding-top:0;padding-left:24px;border-top:0;border-left:1px solid var(--border-soft)}}
@media(max-width:768px){.public-renew-payment-card{padding:18px 14px}.public-renew-payment-card .public-renew-qr{width:min(100%,240px)}.public-renew-checkout,.public-renew-status-section .btn-secondary,.public-renew-terminal .btn-primary,.public-renew-confirmation>.btn-primary,.public-renew-success>.btn-primary{width:100%}.public-renew-status-section{align-items:stretch;flex-direction:column}.public-renew-period dl>div,.public-renew-preview>div,.public-renew-success dl>div{align-items:flex-start;flex-direction:column;gap:3px}.public-renew-period dd,.public-renew-preview dd,.public-renew-success dd{text-align:left}.public-renew-duration{grid-template-columns:repeat(2,minmax(0,1fr))}.public-manual-transfer dl{grid-template-columns:1fr}.public-transfer-field.is-full{grid-column:auto}.public-manual-transfer dd{grid-template-columns:1fr;align-items:stretch;text-align:left}.public-manual-transfer .compact-button{width:100%;min-width:0}}
.public-support{margin-top:24px;padding:18px 20px;display:flex;align-items:center;justify-content:space-between;gap:18px;border:1px solid var(--border-default);border-radius:14px;color:var(--text-secondary);background:var(--bg-muted)}.public-support>div:first-child{display:grid;gap:4px}.public-support strong{color:var(--text-primary)}.public-contact-links{display:flex;flex-wrap:wrap;gap:8px 14px}.public-support .public-contact-links{justify-content:flex-end}.public-contact-links .public-contact-link{min-height:34px;display:inline-flex;align-items:center;gap:7px;color:var(--primary);font-size:13px;font-weight:700;text-decoration:none}.contact-platform-icon{width:20px;height:20px;flex:none;padding:3px;fill:currentColor;border:1px solid currentColor;border-radius:6px}.contact-zalo{width:auto;min-width:32px;display:grid;place-items:center;padding:0 4px;font-size:9px;font-weight:900}.portal-footer .public-contact-links{display:grid;gap:6px}.portal-footer .public-contact-link{color:var(--footer-link)}
.public-site .page-header h1,.public-site .form-section-title,.public-site .form-group>span,.public-site .kiosk-price-summary strong,.public-site .registration-total-sticky span{color:var(--text-primary)}.public-site .page-header p,.public-site .field-helper,.public-site .muted-text,.public-site .field-optional{color:var(--text-secondary)}.public-site .form-control::placeholder{color:var(--text-muted);opacity:1}.public-site .kiosk-price-summary{color:var(--text-secondary);background:var(--primary-soft);border-color:var(--border-default)}.public-site .registration-total-sticky{color:var(--text-primary);background:var(--bg-elevated);border-color:var(--border-strong);box-shadow:var(--shadow-surface)}.public-site .registration-total-sticky>strong{color:var(--success)}
.public-menu-open{overflow:hidden}
.portal-brand:focus-visible,.portal-nav a:focus-visible,.portal-menu-button:focus-visible,.portal-theme-button:focus-visible,.auth-tab-button:focus-visible{outline:3px solid color-mix(in srgb,var(--primary) 55%,transparent);outline-offset:3px}

@media(prefers-reduced-motion:reduce){.community-avatar-card{animation:none}.portal-nav,.auth-tab-button{transition-duration:.01ms}}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: "Be Vietnam Pro", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

@media (max-width: 900px) {
  .portal-nav { background: var(--bg-surface); border-color: var(--border-default); box-shadow: var(--shadow-surface); }
}

.auth-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at top left, rgba(108, 99, 255, 0.2), transparent 38%),
    linear-gradient(135deg, rgba(2, 6, 23, 0.8), rgba(15, 17, 23, 0.94)),
    #0f1117;
}

.auth-card {
  width: min(100%, 430px);
  padding: 30px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
}

.auth-landing {
  width: min(100%, 1180px);
  display: grid;
  gap: 22px;
  justify-items: center;
}

.auth-intro-panel {
  width: min(100%, 1040px);
  display: grid;
  gap: 18px;
}

.auth-main-grid {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(320px, 0.92fr) minmax(380px, 1fr);
  gap: 16px;
  align-items: stretch;
}

.auth-main-grid.auth-main-single {
  width: 100%;
  grid-template-columns: minmax(0, 1fr);
}

.auth-panel,
.quick-kiosk-card {
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
}

.auth-intro-panel {
  padding: 0;
}

.auth-brand-row {
  display: grid;
  justify-items: center;
  gap: 12px;
  margin-bottom: 0;
  text-align: center;
}

.auth-brand-row h1 {
  margin: 0 0 6px;
  color: #fff;
  font-size: 23px;
  line-height: 1.18;
}

.auth-brand-row p,
.quick-kiosk-card p {
  margin: 0;
  color: #94a3b8;
  line-height: 1.6;
}

.auth-form-panel {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 0;
  border-radius: 12px;
}

.auth-account-panel {
  display: grid;
  grid-template-rows: auto auto 1fr;
  align-content: stretch;
  gap: 20px;
}

.auth-panel-message {
  margin-bottom: 0;
}

.auth-tab-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 4px;
  background: var(--bg-soft);
  border: 1px solid var(--border-default);
  border-radius: 10px;
}

.auth-tab-button {
  min-height: 38px;
  padding: 8px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
}

.auth-tab-button.active,
.auth-tab-button[aria-selected="true"] {
  color: var(--text-inverse);
  background: var(--primary);
  border-color: var(--primary);
}

.auth-panel-heading {
  display: grid;
  gap: 4px;
  margin-bottom: 2px;
}

.auth-panel-kicker {
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
}

.auth-panel-heading h2 {
  margin: 0;
  color: var(--text-primary);
  font-size: 22px;
  line-height: 1.22;
}

.auth-panel-heading p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.45;
}

.auth-form-panel .form-control,
.auth-form-panel .btn-primary {
  min-height: 46px;
  border-radius: 8px;
}

.auth-story-panel {
  min-height: 100%;
  overflow: hidden;
  display: grid;
  align-content: stretch;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.18), rgba(2, 6, 23, 0.6)),
    rgba(255, 255, 255, 0.035);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
}

.auth-story-media {
  aspect-ratio: 1942 / 809;
  height: auto;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 0;
  background: #020617;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.auth-story-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.96;
}

.auth-assurance-panel {
  align-self: end;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
}

.auth-assurance-panel div {
  min-width: 0;
  padding: 12px;
  background: rgba(2, 6, 23, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
}

.auth-assurance-panel strong {
  display: block;
  margin-bottom: 5px;
  color: #f8fafc;
  font-size: 12px;
  line-height: 1.25;
}

.auth-assurance-panel span {
  display: block;
  color: #94a3b8;
  font-size: 11px;
  line-height: 1.45;
}

.auth-story-content {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: 24px;
}

.auth-story-content h2 {
  margin: 0;
  color: #ffffff;
  font-size: 28px;
  line-height: 1.12;
}

.auth-story-content p {
  margin: 0;
  color: #cbd5e1;
  font-size: 14px;
  line-height: 1.65;
}

.auth-feature-list {
  display: grid;
  gap: 9px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}

.auth-feature-list li {
  position: relative;
  padding-left: 18px;
  color: #e2e8f0;
  font-size: 13px;
  line-height: 1.45;
}

.auth-feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.12);
  transform: translateY(-50%);
}

.public-site .auth-story-content .auth-story-tagline {
  margin-top: 4px;
  color: var(--text-on-accent);
  font-weight: 800;
}

.auth-logo {
  width: min(100%, 280px);
  height: 112px;
  overflow: hidden;
  border-radius: 8px;
  font-size: 38px;
  background: transparent;
}

.auth-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.quick-kiosk-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 22px;
  border-radius: 12px;
  border-color: rgba(34, 197, 94, 0.24);
  background: rgba(6, 78, 59, 0.24);
}

.quick-kiosk-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  color: #bbf7d0;
  background: rgba(34, 197, 94, 0.16);
  border: 1px solid rgba(34, 197, 94, 0.26);
  border-radius: 12px;
  font-weight: 900;
}

.quick-kiosk-card h2 {
  margin: 0 0 8px;
  color: #ecfdf5;
  font-size: 20px;
}

.quick-kiosk-benefits {
  display: grid;
  gap: 10px;
  margin: 22px 0;
  color: #d1fae5;
  font-size: 13px;
  font-weight: 750;
}

.compact-benefits {
  margin: 4px 0 8px;
}

.auth-kiosk-panel {
  min-height: 280px;
  justify-content: center;
}

.quick-kiosk-benefits span {
  padding: 10px 12px;
  background: rgba(2, 6, 23, 0.24);
  border-radius: 8px;
}

.quick-kiosk-button {
  width: 100%;
  justify-content: center;
  text-align: center;
  text-decoration: none;
}

.auth-card h1 { margin: 12px 0 6px; color: #fff; font-size: 25px; }
.auth-card > p { margin: 0 0 24px; color: #94a3b8; line-height: 1.6; }
.auth-submit { width: 100%; margin-top: 4px; }
.compact-button { min-height: 34px; padding: 7px 10px; white-space: nowrap; }
.staff-table { min-width: 820px; }
.staff-actions { display: grid; grid-template-columns: repeat(2, minmax(76px, 1fr)); gap: 6px; min-width: 174px; }
.public-register-link { display: block; margin-top: 20px; color: #60a5fa; text-align: center; text-decoration: none; }

.public-shell {
  width: 100%;
  min-width: 0;
  min-height: 100vh;
  overflow-x: clip;
}
.public-topbar {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px max(20px, calc((100vw - 1080px) / 2));
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(15, 17, 23, 0.9);
}
.public-register-brand {
  min-width: 0;
  width: min(260px, 58vw);
  height: 46px;
  display: flex;
  align-items: center;
}
.public-register-brand img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
  display: block;
}
.public-topbar a {
  flex: 0 1 auto;
  color: #60a5fa;
  font-size: 13px;
  overflow-wrap: anywhere;
  text-align: right;
  text-decoration: none;
}
.public-content {
  width: min(100%, 1080px);
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin: 0 auto;
  padding: 24px;
}

.public-content > .page-header,
.public-content > #register-official-community,
.public-content > .registration-card {
  width: min(100%, 980px);
}

.public-content .registration-card { margin: 0 auto; }

.sidebar-user-meta { min-width: 0; flex: 1; }
.logout-button {
  min-height: 34px;
  padding: 7px 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  cursor: pointer;
}
.logout-button:hover { color: #fff; background: rgba(239, 68, 68, 0.16); }
.logout-label { font-size: 12px; font-weight: 700; }

.request-table { min-width: 1180px; }
.request-actions { display: grid; gap: 6px; min-width: 92px; }

@media (max-width: 620px) {
  .auth-shell {
    place-items: start center;
    padding: 14px;
  }

  .auth-landing,
  .auth-intro-panel {
    gap: 14px;
  }

  .auth-card,
  .auth-panel,
  .auth-story-content,
  .quick-kiosk-card { padding: 22px; }
  .auth-main-grid { grid-template-columns: 1fr; }
  .auth-story-panel { order: 1; }
  .auth-account-panel { order: 2; }
  .public-site .auth-main-grid { grid-template-columns: 1fr; }
  .public-site .auth-account-panel { order: 1; }
  .public-site .auth-story-panel { order: 2; }
  .public-site .auth-story-media { height: 120px; }
  .public-support { align-items: flex-start; flex-direction: column; }
  .public-support .public-contact-links { justify-content: flex-start; }
  .auth-brand-row { align-items: flex-start; }
  .auth-logo {
    width: min(100%, 220px);
    height: 88px;
  }
  .auth-brand-row h1 { font-size: 20px; }
  .auth-brand-row p { font-size: 13px; }
  .auth-tab-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .auth-tab-button { min-height: 44px; }
  .auth-story-media { aspect-ratio: 1942 / 809; }
  .auth-assurance-panel { grid-template-columns: 1fr; }
  .public-topbar { align-items: flex-start; }
  .public-content { padding: 18px 14px; }
}

@media (min-width: 621px) and (max-width: 1080px) {
  .auth-main-grid {
    grid-template-columns: 1fr 1fr;
  }

  .quick-kiosk-card {
    grid-column: 1 / -1;
  }
}

button,
input,
select,
textarea {
  font: inherit;
}

.hidden,
[hidden] {
  display: none !important;
}

/* Shared public PayOS checkout and receipt experience */
.payment-experience{width:min(100%,720px);margin-inline:auto;display:grid;gap:22px;color:var(--text-primary)}
.payment-status-hero{display:grid;justify-items:center;gap:8px;padding:8px 18px 2px;text-align:center}.payment-status-hero h2{margin:0;color:var(--text-primary);font-size:clamp(24px,4.5vw,34px);line-height:1.2;letter-spacing:-.025em}.payment-status-hero p{max-width:570px;margin:0;color:var(--text-secondary);font-size:15px;line-height:1.65}.payment-status-hero small{color:var(--text-muted);font-size:13px}.payment-eyebrow{color:var(--primary);font-size:12px;font-weight:800;letter-spacing:.11em;text-transform:uppercase}
.payment-status-icon{width:76px;height:76px;margin-bottom:4px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--primary) 30%,transparent);border-radius:24px;color:var(--primary);background:var(--primary-soft);box-shadow:0 14px 35px color-mix(in srgb,var(--primary) 15%,transparent)}.payment-status-icon .payment-icon{width:38px;height:38px}.payment-status-hero.is-success .payment-status-icon{color:var(--success);border-color:color-mix(in srgb,var(--success) 32%,transparent);background:var(--success-bg);box-shadow:0 14px 35px color-mix(in srgb,var(--success) 16%,transparent)}.payment-status-hero.is-cancelled .payment-status-icon,.payment-status-hero.is-warning .payment-status-icon{color:var(--warning);border-color:color-mix(in srgb,var(--warning) 32%,transparent);background:var(--warning-bg);box-shadow:none}.payment-status-hero.is-pending .payment-status-icon{position:relative;border-radius:50%;animation:payment-pulse 1.7s ease-in-out infinite}.payment-status-hero.is-pending .payment-status-icon::after{content:"";position:absolute;inset:-6px;border:2px solid transparent;border-top-color:var(--primary);border-radius:50%;animation:payment-spin 1.1s linear infinite}
.payment-icon{width:20px;height:20px;display:block;flex:none}
.payment-progress{margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none}.payment-progress li{position:relative;display:grid;justify-items:center;gap:8px;color:var(--text-muted);font-size:12px;text-align:center}.payment-progress li:not(:last-child)::after{content:"";position:absolute;z-index:0;top:17px;left:calc(50% + 22px);width:calc(100% - 44px);height:2px;background:var(--border-default)}.payment-progress li.is-complete:not(:last-child)::after{background:var(--success)}.payment-progress li>span{position:relative;z-index:1;width:34px;height:34px;display:grid;place-items:center;border:2px solid var(--border-default);border-radius:50%;color:var(--text-muted);background:var(--bg-surface);font-weight:800}.payment-progress li>span .payment-icon{width:17px;height:17px}.payment-progress li.is-active{color:var(--primary)}.payment-progress li.is-active>span{color:var(--text-inverse);border-color:var(--primary);background:var(--primary);box-shadow:0 0 0 5px var(--primary-soft)}.payment-progress li.is-complete{color:var(--success)}.payment-progress li.is-complete>span{color:#fff;border-color:var(--success);background:var(--success)}.payment-progress strong{font-weight:700}
.payment-summary-card{margin:0;padding:6px 20px;display:grid;border:1px solid var(--border-default);border-radius:18px;background:var(--bg-surface);box-shadow:var(--shadow-surface)}.payment-summary-card>div{min-height:54px;padding:13px 0;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--border-soft)}.payment-summary-card>div:last-child{border-bottom:0}.payment-summary-card dt{color:var(--text-secondary);font-size:13px}.payment-summary-card dd{margin:0;color:var(--text-primary);font-weight:800;text-align:right;font-variant-numeric:tabular-nums}.payment-summary-card .is-emphasis dd{color:var(--primary);font-size:clamp(19px,4vw,25px)}
.payment-status-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:800}.payment-status-pill.is-success{color:var(--success-text);background:var(--success-bg)}
.payment-kiosk-section{display:grid;gap:12px}.payment-section-heading{display:flex;align-items:center;gap:11px}.payment-section-heading>span{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;color:var(--primary);background:var(--primary-soft)}.payment-section-heading h3{margin:0;color:var(--text-primary);font-size:17px}.payment-section-heading p{margin:2px 0 0;color:var(--text-muted);font-size:12px}.payment-kiosk-list{display:grid;gap:10px}.payment-kiosk-item{min-width:0;padding:15px 16px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:13px;border:1px solid var(--border-default);border-radius:15px;background:var(--bg-surface)}.payment-kiosk-mark{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;color:var(--primary);background:var(--primary-soft)}.payment-kiosk-item.is-success .payment-kiosk-mark{color:var(--success);background:var(--success-bg)}.payment-kiosk-copy{min-width:0}.payment-kiosk-copy>span{color:var(--text-muted);font-size:11px;font-weight:700;text-transform:uppercase}.payment-kiosk-copy h4{margin:2px 0 3px;overflow:hidden;color:var(--text-primary);font-size:15px;text-overflow:ellipsis;white-space:nowrap}.payment-kiosk-copy p{margin:0;color:var(--text-secondary);font-size:12px;line-height:1.45}.payment-kiosk-item>strong{color:var(--text-primary);font-size:14px;white-space:nowrap;font-variant-numeric:tabular-nums}
.payment-secure-note{padding:13px 15px;display:flex;align-items:flex-start;gap:10px;border:1px solid var(--info-border);border-radius:13px;color:var(--info-text);background:var(--info-bg);font-size:12px;line-height:1.55}.payment-secure-note .payment-icon{margin-top:1px}
.payment-actions{display:flex;align-items:stretch;justify-content:center;gap:10px}.payment-actions>a,.payment-actions>button{min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:9px}.payment-actions .btn-primary{min-width:240px}.payment-actions .btn-secondary{min-width:150px}
.payment-processing{padding:28px;border:1px solid var(--border-default);border-radius:22px;background:var(--bg-surface);box-shadow:var(--shadow-surface)}.payment-receipt,.payment-checkout{padding-block:4px}.registration-success:has(.payment-experience){max-width:760px;padding-top:24px}.public-renew-panel.payment-experience{border-radius:20px}.public-renew-confirmation.payment-experience>header{padding-top:0}.renew-success.payment-experience{width:min(100%,680px);margin:18px auto;padding:26px;border:1px solid var(--border-default);border-radius:22px;background:var(--bg-surface);box-shadow:var(--shadow-surface)}
@keyframes payment-spin{to{transform:rotate(360deg)}}@keyframes payment-pulse{50%{transform:scale(1.04)}}
@media(max-width:620px){.registration-success:has(.payment-experience){padding-top:12px}.payment-experience{gap:17px}.payment-status-hero{padding-inline:4px}.payment-status-icon{width:66px;height:66px;border-radius:21px}.payment-status-icon .payment-icon{width:33px;height:33px}.payment-progress strong{font-size:10px}.payment-progress li:not(:last-child)::after{left:calc(50% + 19px);width:calc(100% - 38px)}.payment-summary-card{padding-inline:15px}.payment-summary-card>div{align-items:flex-start;flex-direction:column;gap:4px}.payment-summary-card dd{text-align:left}.payment-kiosk-item{grid-template-columns:auto minmax(0,1fr)}.payment-kiosk-item>strong,.payment-kiosk-item>.payment-status-pill{grid-column:2;justify-self:start}.payment-kiosk-copy h4{white-space:normal}.payment-actions{flex-direction:column}.payment-actions .btn-primary,.payment-actions .btn-secondary{width:100%;min-width:0}.payment-processing,.renew-success.payment-experience{padding:20px 15px}.public-renew-panel.payment-experience{padding:18px 14px}}
@media(prefers-reduced-motion:reduce){.payment-status-hero.is-pending .payment-status-icon,.payment-status-hero.is-pending .payment-status-icon::after{animation:none}}

/* Semantic contrast corrections for shared notices and customer details. */
.notice,.legacy-scope-notice,.legacy-payment-proof,.lookup-guide,.lookup-support {
  color:var(--info-text);
  background:var(--info-bg);
  border-color:var(--info-border);
}
.notice strong,.notice span,.notice code,.legacy-scope-notice strong,.legacy-scope-notice p,.legacy-payment-proof strong,.legacy-payment-proof p,.lookup-guide strong,.lookup-guide span,.lookup-support strong,.lookup-support span { color:inherit; }
.payos-expiry-countdown{margin:0;color:var(--info-text);font-variant-numeric:tabular-nums;font-weight:700}

.app-shell {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 100;
  width: 260px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #081322;
  border-right: 1px solid rgba(148, 163, 184, 0.16);
  box-shadow: inset -1px 0 0 rgba(15, 23, 42, 0.75);
  transition: transform 0.3s ease;
}

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 90;
  padding: 0;
  border: 0;
  background: rgba(2, 6, 23, 0.62);
  cursor: pointer;
}

.sidebar-logo {
  display: grid;
  gap: 9px;
  padding: 18px 18px 17px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.sidebar-brand-image-wrap {
  width: 100%;
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  background: transparent;
}

.sidebar-brand-image {
  display: block;
}

.sidebar-brand-wordmark {
  display: none;
}

.logo-mark {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(125, 211, 252, 0.28);
  border-radius: 8px;
  color: #bfdbfe;
  background: rgba(14, 165, 233, 0.08);
  font-size: 20px;
}

.dhl-logo-mark {
  color: #f5f3ff;
  background: transparent;
  border-color: transparent;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0;
}

.sidebar-title {
  color: #ffffff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0;
}

.sidebar-sub {
  margin-top: 2px;
  color: #64748b;
  font-size: 11px;
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 14px 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.28) transparent;
}

.nav-section + .nav-section {
  margin-top: 14px;
}

.nav-section-label {
  padding: 8px 8px 7px;
  color: #64748b;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.nav-section[data-nav-section="tuong-tac-cheo"] {
  padding: 8px 0 10px;
  border-top: 1px solid rgba(96, 165, 250, 0.16);
  border-bottom: 1px solid rgba(96, 165, 250, 0.12);
}

.nav-section[data-nav-section="tuong-tac-cheo"] .nav-section-label {
  color: #93c5fd;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 8px 10px;
  color: #a8b5c8;
  text-decoration: none;
  border-radius: 7px;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 650;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.nav-item span:last-child,
.nav-group-toggle > span:nth-child(2) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-group {
  margin: 2px 0;
}

.nav-group-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 8px 10px;
  color: #c8d3e1;
  border-radius: 7px;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 13px;
  font-weight: 750;
  list-style: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.nav-group-toggle::-webkit-details-marker {
  display: none;
}

.nav-group-toggle:hover,
.nav-group.has-active-child .nav-group-toggle {
  color: #f8fafc;
  background: rgba(148, 163, 184, 0.08);
  border-color: rgba(148, 163, 184, 0.12);
}

.nav-chevron {
  margin-left: auto;
  color: #64748b;
  transition: transform 0.2s ease;
}

.nav-group[open] .nav-chevron {
  transform: rotate(180deg);
}

.nav-sublist {
  display: grid;
  gap: 2px;
  margin: 4px 0 6px 16px;
  padding-left: 10px;
  border-left: 1px solid rgba(148, 163, 184, 0.15);
}

.nav-sublist .nav-group-toggle {
  min-height: 34px;
  padding: 7px 9px;
  color: #b6c4d6;
  font-size: 12px;
  font-weight: 760;
}

.nav-sublist .nav-sublist {
  margin-left: 10px;
  padding-left: 8px;
}

.nav-subitem {
  min-height: 34px;
  padding: 7px 9px;
  font-size: 12px;
  font-weight: 650;
}

.nav-subitem .nav-icon {
  width: 22px;
  height: 22px;
}

.nav-subitem .nav-icon svg {
  width: 16px;
  height: 16px;
}

.nav-item:hover {
  color: #f8fafc;
  background: rgba(148, 163, 184, 0.08);
  border-color: rgba(148, 163, 184, 0.12);
}

.nav-item.active {
  color: #ffffff;
  background: rgba(37, 99, 235, 0.24);
  border-color: rgba(96, 165, 250, 0.38);
  box-shadow: inset 3px 0 0 #60a5fa;
}

.nav-icon {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  text-align: center;
  color: #9fb0c6;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.nav-icon svg {
  width: 18px;
  height: 18px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter: none;
  opacity: 0.96;
}

.nav-item[data-nav-route="user"] .nav-icon,
.nav-item[data-nav-route="dashboard"] .nav-icon {
  color: #60a5fa;
}

.nav-item[data-nav-route="ttc-earn"] .nav-icon,
.nav-item[data-nav-route="ttc-wallet"] .nav-icon,
.nav-item[data-nav-route="admin-ttc-wallets"] .nav-icon {
  color: #34d399;
}

.nav-item[data-nav-route="ttc-campaign-create"] .nav-icon,
.nav-item[data-nav-route="ttc-campaigns"] .nav-icon,
.nav-item[data-nav-route="admin-ttc-campaigns"] .nav-icon {
  color: #a78bfa;
}

.nav-item[data-nav-route="ttc-wallet-history"] .nav-icon,
.nav-item[data-nav-route="logs"] .nav-icon,
.nav-item[data-nav-route="admin-ttc-logs"] .nav-icon {
  color: #38bdf8;
}

.nav-item[data-nav-route="user-facebook"] .nav-icon,
.nav-item[data-nav-route="user-support"] .nav-icon,
.nav-item[data-nav-route="admin-ttc-announcements"] .nav-icon {
  color: #f472b6;
}

.nav-item[data-nav-route="user-kiosks"] .nav-icon,
.nav-item[data-nav-route="user-register-kiosk"] .nav-icon,
.nav-item[data-nav-route="payments-mine"] .nav-icon,
.nav-item[data-nav-route="customers"] .nav-icon,
.nav-item[data-nav-route="kiosks"] .nav-icon,
.nav-item[data-nav-route="register"] .nav-icon,
.nav-item[data-nav-route="registration-requests"] .nav-icon {
  color: #fbbf24;
}

.nav-item[data-nav-route="settings"] .nav-icon,
.nav-item[data-nav-route="user-profile"] .nav-icon,
.nav-item[data-nav-route="admin-ttc-settings"] .nav-icon,
.nav-item[data-nav-route="admin-ttc-users"] .nav-icon {
  color: #c4b5fd;
}

.nav-item[data-nav-route="categories"] .nav-icon {
  color: #38bdf8;
}

.nav-item[data-nav-route="business-types"] .nav-icon {
  color: #93c5fd;
}

.nav-item[data-nav-route="reports"] .nav-icon {
  color: #22c55e;
}

.nav-item[data-nav-route="admin/ttc"] .nav-icon {
  color: #60a5fa;
}

.nav-item[data-nav-route="admin-ttc-tasks"] .nav-icon {
  color: #f59e0b;
}

.bare-icon {
  width: auto;
  height: auto;
  border: 0;
  background: transparent;
}

.bare-icon svg {
  filter: none;
}

.sidebar-footer {
  display: grid;
  gap: 10px;
  padding: 14px 12px;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(2, 6, 23, 0.22);
}

.sidebar-user-block {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.sidebar-footer .logout-button {
  width: 100%;
  justify-content: flex-start;
}

.logout-icon {
  width: 22px;
  height: 22px;
}

.user-avatar {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: block;
  border-radius: 10px;
  object-fit: cover;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.22);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.user-name {
  color: #e2e8f0;
  font-size: 14px;
  font-weight: 600;
}

.user-username {
  margin-top: 2px;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.user-role {
  margin-top: 2px;
  color: #64748b;
  font-size: 11px;
}

.main-content {
  flex: 1;
  min-width: 0;
  min-height: 100vh;
  margin-left: 260px;
}

.top-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 24px;
  background: rgba(15, 17, 23, 0.82);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
}

.top-bar-left,
.top-bar-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.icon-button {
  display: none;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
}

.top-bar-context {
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
}

.top-brand-mark {
  display: none;
  width: 118px;
  height: 34px;
  object-fit: contain;
  object-position: left center;
}

.current-date {
  color: #64748b;
  font-size: 13px;
}

.connection-badge {
  padding: 5px 10px;
  border-radius: 999px;
  color: #fb923c;
  background: rgba(249, 115, 22, 0.14);
  border: 1px solid rgba(249, 115, 22, 0.25);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.connection-badge.ready {
  color: #4ade80;
  background: rgba(34, 197, 94, 0.14);
  border-color: rgba(34, 197, 94, 0.25);
}

.top-bar-user-actions {
  gap: 10px;
}

.top-wallet-pill,
.top-icon-link,
.top-user-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  border: 1px solid rgba(96, 165, 250, 0.2);
  border-radius: 10px;
  color: #dbeafe;
  background: rgba(15, 23, 42, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.top-wallet-pill {
  gap: 8px;
  min-width: 94px;
  padding: 0 12px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.42), rgba(59, 130, 246, 0.18));
}

.top-wallet-pill:hover,
.top-icon-link:hover,
.top-user-trigger:hover {
  transform: translateY(-1px);
  border-color: rgba(96, 165, 250, 0.42);
  background: rgba(30, 41, 59, 0.92);
}

.top-action-icon,
.top-icon-link svg,
.top-user-chevron svg {
  width: 16px;
  height: 16px;
}

.top-action-icon svg,
.top-icon-link svg,
.top-user-chevron svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.top-icon-link {
  width: 34px;
  color: #93c5fd;
  text-decoration: none;
}

button.top-icon-link {
  padding: 0;
  cursor: pointer;
}

.theme-toggle-button svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.top-user-menu {
  position: relative;
}

.top-user-trigger {
  gap: 6px;
  padding: 0 8px 0 6px;
  cursor: pointer;
  list-style: none;
}

.top-user-trigger::-webkit-details-marker {
  display: none;
}

.top-user-trigger::marker {
  content: '';
}

.top-user-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.24);
}

.top-user-chevron {
  color: var(--text-muted);
  transition: transform 0.18s ease;
}

.top-user-menu[open] .top-user-chevron {
  transform: rotate(180deg);
}

.top-user-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 80;
  min-width: 240px;
  padding: 8px;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  background: var(--bg-elevated);
  box-shadow: var(--shadow-surface);
}

.top-user-dropdown::before {
  content: '';
  position: absolute;
  top: -6px;
  right: 18px;
  width: 12px;
  height: 12px;
  transform: rotate(45deg);
  border-left: 1px solid var(--border-default);
  border-top: 1px solid var(--border-default);
  background: var(--bg-elevated);
}

.top-user-dropdown-head {
  display: grid;
  gap: 4px;
  padding: 10px 10px 12px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border-soft);
}

.top-user-dropdown-head strong {
  color: var(--text-primary);
  font-size: 15px;
}

.top-user-dropdown-head span {
  color: var(--text-muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.top-user-dropdown a,
.top-user-dropdown button {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 8px 10px;
  border: 0;
  border-radius: 9px;
  color: var(--text-secondary);
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.top-user-dropdown a:hover,
.top-user-dropdown button:hover {
  background: var(--bg-hover);
  color: var(--primary);
}

.page-content {
  min-width: 0;
  max-width: 100%;
  padding: 24px;
}

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

.page-header h1 {
  margin: 0;
  color: #ffffff;
  font-size: 24px;
  font-weight: 800;
}

.page-header p {
  max-width: 720px;
  margin: 6px 0 0;
  color: #94a3b8;
  font-size: 14px;
  line-height: 1.6;
}

.page-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.notice {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 13px;
}

.notice strong {
  color: inherit;
}

.notice span {
  color: inherit;
}

.notice code {
  color: inherit;
}

.notice.warning {
  color: var(--warning-text);
  background: var(--warning-bg);
  border: 1px solid color-mix(in srgb, var(--warning-text) 28%, transparent);
}

.notice.success {
  color: var(--success-text);
  background: var(--success-bg);
  border: 1px solid color-mix(in srgb, var(--success-text) 28%, transparent);
}

.stats-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 16px;
  margin-bottom: 24px;
}

.stats-grid .stat-card {
  flex: 1 1 220px;
}

.stats-grid .stat-card-fluid {
  flex: 1.6 1 max-content;
  min-width: min(100%, 280px);
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  min-height: 96px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
}

.stat-card > div:last-child {
  min-width: 0;
}

.tone-blue { background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.05)); }
.tone-purple { background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(168, 85, 247, 0.05)); }
.tone-orange { background: linear-gradient(135deg, rgba(249, 115, 22, 0.2), rgba(249, 115, 22, 0.05)); }
.tone-red { background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(239, 68, 68, 0.05)); }
.tone-green { background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.05)); }
.tone-teal { background: linear-gradient(135deg, rgba(20, 184, 166, 0.2), rgba(20, 184, 166, 0.05)); }

.stat-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
}

.stat-icon svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.stat-number {
  color: #ffffff;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.stat-card-fluid .stat-number {
  white-space: nowrap;
}

.stat-label {
  margin-top: 2px;
  color: #94a3b8;
  font-size: 12px;
}

.dashboard-grid,
.admin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.single-panel-grid {
  grid-template-columns: minmax(0, 1fr);
}

.dash-card,
.admin-card,
.form-card,
.table-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
}

.dash-card,
.admin-card,
.form-card {
  padding: 20px;
}

.dash-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.dash-card-header h3,
.admin-card h3 {
  margin: 0 0 16px;
  color: #e2e8f0;
  font-size: 15px;
  font-weight: 700;
}

.dash-card-header h3 {
  margin: 0;
}

.chart-container {
  position: relative;
  min-height: 220px;
}

.revenue-chart-card {
  display: flex;
  flex-direction: column;
}

.revenue-chart-card .chart-container {
  flex: 1;
  min-height: 320px;
}

.chart-container.small {
  min-height: 216px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.category-chart-card {
  display: flex;
  flex-direction: column;
}

.category-chart-card .chart-container.small {
  flex: 1;
}

.category-chart-stage {
  display: flex;
  width: min(100%, 560px);
  align-items: center;
  justify-content: center;
  margin: auto;
}

.category-chart-stage canvas {
  flex: 0 0 auto;
  width: 100%;
}

.chart-container canvas {
  display: block;
  width: 100%;
}

.expiring-list,
.recent-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.expiring-list {
  max-height: 372px;
  overflow-y: auto;
  padding-right: 4px;
}

.expiring-item,
.recent-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
}

.expiring-item-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.expiring-item-link:hover {
  background: var(--bg-hover);
  border-color: var(--border-interactive);
  transform: translateY(-1px);
}

.expiring-item-link:focus-visible {
  outline: 2px solid var(--border-interactive);
  outline-offset: 2px;
}

.recent-registration-copy {
  min-width: 0;
  flex: 1;
  display: grid;
  justify-items: start;
  gap: 3px;
}

.recent-registration-icon {
  display: inline-grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  color: var(--primary);
  background: var(--primary-soft);
  border-radius: 9px;
}

.recent-registration-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.recent-registration-amount {
  flex: 0 0 auto;
  color: var(--text-primary);
  font-size: 0.9rem;
  white-space: nowrap;
  text-align: right;
}

.form-grid,
.stacked-form {
  display: grid;
  min-width: 0;
  gap: 14px;
}

.form-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
}

.form-actions,
.item-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.form-actions {
  grid-column: 1 / -1;
  justify-content: flex-start;
}

.wallet-topup-form {
  display: grid;
  grid-template-columns: minmax(220px, 360px) minmax(220px, 1fr);
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

.wallet-topup-card {
  grid-template-columns: minmax(0, 1fr) minmax(160px, auto);
  align-items: end;
  padding: 16px;
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.14), rgba(16, 185, 129, 0.08)),
    rgba(8, 19, 34, 0.56);
  border: 1px solid rgba(96, 165, 250, 0.16);
  border-radius: 10px;
}

.wallet-topup-heading {
  grid-column: 1 / -1;
  display: grid;
  gap: 4px;
}

.wallet-topup-heading strong {
  color: #f8fafc;
  font-size: 16px;
  font-weight: 900;
}

.wallet-topup-heading span {
  color: #94a3b8;
  font-size: 13px;
  line-height: 1.45;
}

.wallet-topup-presets {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.wallet-topup-presets button {
  min-height: 34px;
  padding: 7px 12px;
  color: #bfdbfe;
  background: rgba(37, 99, 235, 0.12);
  border: 1px solid rgba(96, 165, 250, 0.22);
  border-radius: 8px;
  font-weight: 850;
  cursor: pointer;
}

.wallet-topup-presets button:hover {
  color: #ffffff;
  background: rgba(37, 99, 235, 0.22);
  border-color: rgba(96, 165, 250, 0.38);
}

.wallet-topup-input {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.wallet-topup-input span {
  color: #8da0b8;
  font-size: 12px;
  font-weight: 750;
}

.wallet-topup-form .form-control,
.wallet-topup-form .btn-primary {
  width: 100%;
  min-height: 46px;
  border-radius: 8px;
}

.wallet-topup-submit {
  align-self: end;
}

.user-social-home {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  gap: 18px;
  align-items: start;
}

.user-social-feed,
.user-social-aside {
  min-width: 0;
}

.user-social-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  padding: 14px 16px;
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(16, 185, 129, 0.08)),
    rgba(8, 19, 34, 0.74);
  border: 1px solid rgba(56, 189, 248, 0.18);
  border-radius: 10px;
  box-shadow: 0 18px 52px rgba(2, 6, 23, 0.24);
}

.user-social-toolbar strong {
  display: block;
  color: #f8fafc;
  font-size: 15px;
}

.user-social-toolbar span {
  display: block;
  margin-top: 3px;
  color: #94a3b8;
  font-size: 12px;
}

.user-live-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  color: #bae6fd;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.user-live-strip span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 7px 9px;
  color: #bae6fd;
  background: rgba(14, 165, 233, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.18);
  border-radius: 999px;
}

.user-live-strip i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.14), 0 0 18px rgba(34, 197, 94, 0.72);
  animation: livePulse 1.8s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}

.user-social-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.user-social-metric {
  position: relative;
  overflow: hidden;
  padding: 13px 14px;
  background: rgba(15, 23, 42, 0.62);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 10px;
}

.user-social-metric::after {
  content: "";
  position: absolute;
  inset: auto 12px 0;
  height: 2px;
  background: linear-gradient(90deg, #38bdf8, #22c55e, #a855f7);
  opacity: 0.72;
}

.user-social-metric span,
.user-social-metric small {
  display: block;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 700;
}

.user-social-metric strong {
  display: block;
  margin: 5px 0 2px;
  color: #f8fafc;
  font-size: 22px;
  line-height: 1;
}

#user-announcement-feed {
  display: grid;
  gap: 14px;
}

.user-announcement-card,
.user-rank-card {
  position: relative;
  background: rgba(8, 19, 34, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 10px;
  overflow: hidden;
}

.user-announcement-card {
  transform: translateY(0);
  animation: feedCardIn 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--feed-index, 0) * 55ms);
  transition: transform 180ms cubic-bezier(0.25, 1, 0.5, 1), border-color 180ms cubic-bezier(0.25, 1, 0.5, 1), box-shadow 180ms cubic-bezier(0.25, 1, 0.5, 1);
}

.user-announcement-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.92), rgba(34, 197, 94, 0.88), transparent);
  opacity: 0;
  transition: opacity 180ms cubic-bezier(0.25, 1, 0.5, 1);
}

.user-announcement-card:hover {
  transform: translateY(-2px);
  border-color: rgba(56, 189, 248, 0.26);
  box-shadow: 0 22px 55px rgba(2, 6, 23, 0.28);
}

.user-announcement-card:hover::before,
.user-announcement-card.is-featured::before {
  opacity: 1;
}

.user-announcement-card.is-featured {
  background:
    radial-gradient(circle at 88% 12%, rgba(168, 85, 247, 0.13), transparent 34%),
    radial-gradient(circle at 10% 8%, rgba(34, 197, 94, 0.1), transparent 30%),
    rgba(8, 19, 34, 0.76);
  border-color: rgba(56, 189, 248, 0.22);
}

.user-announcement-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: rgba(15, 23, 42, 0.42);
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.user-announcement-head img,
.user-announcement-comment img,
.user-rank-row img {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(15, 23, 42, 0.9);
}

.user-announcement-head img {
  border: 2px solid rgba(56, 189, 248, 0.35);
  box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.08);
}

.user-announcement-head strong {
  display: block;
  color: #60a5fa;
  font-size: 14px;
}

.user-announcement-head strong span {
  color: #38bdf8;
}

.user-announcement-head time {
  display: block;
  margin-top: 3px;
  color: #94a3b8;
  font-size: 12px;
}

.user-announcement-body {
  padding: 24px 28px;
  color: #cbd5e1;
}

.user-announcement-body h3 {
  margin: 0 0 22px;
  color: #f8fafc;
  font-size: 26px;
}

.user-announcement-body p {
  margin: 0 0 12px;
  color: #e2e8f0;
  font-weight: 800;
}

.user-announcement-body ul {
  margin: 0;
  padding-left: 20px;
  line-height: 1.7;
}

.user-announcement-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px 18px;
  color: #94a3b8;
  border-top: 1px solid rgba(148, 163, 184, 0.1);
}

.user-announcement-actions button {
  padding: 0;
  color: inherit;
  font: inherit;
  font-weight: 800;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color 140ms cubic-bezier(0.25, 1, 0.5, 1), transform 140ms cubic-bezier(0.25, 1, 0.5, 1);
}

.user-announcement-actions button:hover {
  color: #e0f2fe;
  transform: translateY(-1px);
}

.user-announcement-actions button:active {
  transform: scale(0.97);
}

.user-announcement-pulse {
  margin-left: auto;
  padding: 5px 8px;
  color: #bbf7d0;
  font-size: 11px;
  font-weight: 800;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.18);
  border-radius: 999px;
}

.user-announcement-comment {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px 18px;
}

.user-announcement-comment span {
  flex: 1;
  padding: 10px 14px;
  color: #64748b;
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 999px;
  transition: border-color 160ms cubic-bezier(0.25, 1, 0.5, 1), background 160ms cubic-bezier(0.25, 1, 0.5, 1), color 160ms cubic-bezier(0.25, 1, 0.5, 1);
}

.user-announcement-comment span:hover {
  color: #94a3b8;
  background: rgba(15, 23, 42, 0.92);
  border-color: rgba(56, 189, 248, 0.22);
}

.user-rank-card {
  position: sticky;
  top: 86px;
  padding: 18px;
  background:
    linear-gradient(180deg, rgba(30, 41, 59, 0.62), rgba(8, 19, 34, 0.76)),
    rgba(8, 19, 34, 0.72);
}

.user-rank-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.user-rank-head h3 {
  margin: 0;
  color: #f8fafc;
  font-size: 18px;
}

.user-rank-head span {
  color: #94a3b8;
  font-size: 12px;
}

.user-rank-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid rgba(148, 163, 184, 0.1);
  transition: transform 160ms cubic-bezier(0.25, 1, 0.5, 1), background 160ms cubic-bezier(0.25, 1, 0.5, 1);
}

.user-rank-row:first-of-type {
  border-top: 0;
}

.user-rank-row:hover {
  transform: translateX(3px);
}

.user-rank-row.is-podium {
  margin: 0 -6px;
  padding: 10px 6px;
  border-radius: 10px;
  background: rgba(14, 165, 233, 0.06);
}

.user-rank-row.is-podium img {
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.12);
}

.user-rank-row strong {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #38bdf8;
  font-size: 13px;
}

.user-rank-position {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  height: 20px;
  color: #0f172a;
  font-size: 10px;
  font-weight: 900;
  background: linear-gradient(135deg, #facc15, #38bdf8);
  border-radius: 999px;
}

.user-rank-row span {
  display: block;
  margin-top: 2px;
  color: #e2e8f0;
  font-size: 12px;
}

.admin-announcement-card {
  max-width: 920px;
}

.admin-announcement-preview {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

@keyframes feedCardIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes livePulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0.72);
    opacity: 0.58;
  }
}

@media (prefers-reduced-motion: reduce) {
  .user-live-strip i,
  .user-announcement-card {
    animation: none;
  }

  .user-announcement-card,
  .user-announcement-actions button,
  .user-announcement-comment span,
  .user-rank-row {
    transition-duration: 0.01ms;
  }
}

.user-account-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: 18px;
  align-items: start;
}

.user-account-main {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.account-tabs {
  display: flex;
  gap: 8px;
  padding: 8px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.72), rgba(15, 23, 42, 0.42));
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.account-tab {
  min-height: 38px;
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #9fb0c6;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 800;
  transition: color 0.16s ease, background-color 0.16s ease, border-color 0.16s ease;
}

.account-tab svg,
.account-heading-icon svg,
.account-profile-form .form-group > span svg,
.account-note-icon svg,
.account-metric-icon svg,
.account-row-icon svg,
.account-save-button svg {
  width: 16px;
  height: 16px;
  display: block;
  fill: currentColor;
}

.account-tab.active {
  color: #ffffff;
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.34), rgba(99, 102, 241, 0.2));
  border-color: rgba(129, 140, 248, 0.44);
  box-shadow: 0 8px 20px rgba(79, 70, 229, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.account-tab:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.account-info-card {
  width: 100%;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.025)),
    rgba(15, 23, 42, 0.34);
  border-color: rgba(148, 163, 184, 0.13);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.account-info-card .dash-card-header h3,
.account-profile-form .form-group > span,
.account-summary-metric > span,
.account-summary-row > span,
.account-save-button,
.account-security-note {
  display: flex;
  align-items: center;
}

.account-info-card .dash-card-header h3 {
  gap: 9px;
  font-size: 16px;
  line-height: 1.25;
}

.account-heading-icon,
.account-note-icon,
.account-metric-icon,
.account-row-icon {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  color: #c4b5fd;
}

.account-heading-icon {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(167, 139, 250, 0.2);
  border-radius: 8px;
  background: rgba(124, 58, 237, 0.1);
}

.account-profile-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.account-profile-form .form-group {
  margin-bottom: 0;
}

.account-profile-form .form-group > span {
  gap: 7px;
  color: #a8b5c7;
  font-weight: 750;
}

.account-profile-form .form-control {
  min-height: 44px;
  background: rgba(15, 23, 42, 0.4);
  border-color: rgba(148, 163, 184, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.account-profile-form .form-control:hover {
  border-color: rgba(129, 140, 248, 0.28);
}

.account-profile-form .form-control:focus {
  background: rgba(15, 23, 42, 0.68);
  border-color: rgba(96, 165, 250, 0.68);
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.14), 0 12px 28px rgba(0, 0, 0, 0.18);
}

.account-profile-form .form-actions {
  grid-column: 1 / -1;
  margin-top: 4px;
}

.account-profile-form .form-control[readonly] {
  color: #94a3b8;
  background: rgba(15, 23, 42, 0.5);
  border-color: rgba(148, 163, 184, 0.12);
}

.account-save-button {
  gap: 8px;
  min-height: 44px;
  padding-inline: 18px;
  box-shadow: 0 12px 26px rgba(108, 99, 255, 0.22);
}

.account-info-card .dash-card-header .table-action-button {
  min-height: 34px;
  padding: 7px 11px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 760;
}

.account-security-note {
  margin: 0;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid rgba(148, 163, 184, 0.1);
  background: rgba(15, 23, 42, 0.3);
}

.account-security-list {
  display: grid;
  gap: 10px;
}

.account-security-row {
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-height: 54px;
  padding: 11px 14px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 9px;
  background: rgba(15, 23, 42, 0.28);
}

.account-security-row.primary-security-row {
  grid-template-columns: minmax(150px, 0.75fr) minmax(0, 1fr) auto;
  align-items: center;
  background: rgba(30, 41, 59, 0.34);
}

.account-security-row span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 760;
  line-height: 1.25;
}

.account-security-row strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 760;
  line-height: 1.3;
  text-align: right;
}

.account-security-row small {
  display: block;
  margin-top: 3px;
  color: #7f8da3;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
}

.account-security-row .status-pill {
  justify-self: end;
  font-style: normal;
  white-space: nowrap;
}

.account-security-row svg {
  width: 14px;
  height: 14px;
  color: #8fa3bd;
  fill: currentColor;
  opacity: 0.9;
}

.account-security-row.primary-security-row svg {
  color: #a5b4fc;
}

.account-note-icon {
  width: 30px;
  height: 30px;
  margin-top: -4px;
  border-radius: 8px;
  background: rgba(34, 197, 94, 0.11);
  color: #86efac;
}

.account-summary-card {
  position: sticky;
  top: 76px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.17);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.58);
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.account-summary-hero {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 24px 20px 28px;
  text-align: center;
  background:
    radial-gradient(circle at 30% 10%, rgba(96, 165, 250, 0.38), transparent 32%),
    linear-gradient(135deg, rgba(37, 99, 235, 0.72), rgba(124, 58, 237, 0.74));
}

.account-summary-avatar {
  width: 86px;
  height: 86px;
  display: block;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(15, 23, 42, 0.72);
  border: 4px solid rgba(255, 255, 255, 0.82);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.24);
}

.account-summary-check {
  position: absolute;
  top: 86px;
  left: calc(50% + 22px);
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: #ffffff;
  background: #22c55e;
  border: 3px solid rgba(255, 255, 255, 0.88);
  border-radius: 50%;
  font-size: 14px;
  font-weight: 900;
}

.account-summary-hero h3 {
  margin: 6px 0 0;
  color: #ffffff;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.16;
  overflow-wrap: anywhere;
}

.account-summary-hero p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  font-weight: 750;
}

.account-summary-metrics {
  display: grid;
  gap: 10px;
  padding: 16px;
}

.account-summary-metric {
  display: grid;
  gap: 5px;
  min-height: 70px;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, 0.13);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.54);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.account-summary-metric span {
  gap: 7px;
  color: #8ea0b8;
  font-size: 12px;
  font-weight: 800;
}

.account-summary-metric strong {
  color: #ffffff;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.account-summary-metric.metric-wallet {
  border-color: rgba(96, 165, 250, 0.28);
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.2), rgba(15, 23, 42, 0.5));
}

.account-summary-metric.metric-earned {
  border-color: rgba(52, 211, 153, 0.24);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(15, 23, 42, 0.5));
}

.account-summary-metric.metric-spent {
  border-color: rgba(245, 158, 11, 0.22);
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(15, 23, 42, 0.5));
}

.account-summary-details {
  display: grid;
  gap: 10px;
  padding: 0 16px 18px;
}

.account-summary-row {
  display: grid;
  grid-template-columns: minmax(100px, 0.7fr) minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  color: #94a3b8;
  font-size: 12px;
}

.account-summary-row > span {
  gap: 7px;
  min-width: 0;
}

.account-row-icon,
.account-metric-icon {
  color: #9fb0c6;
}

.account-summary-row strong {
  color: #e2e8f0;
  font-size: 13px;
  text-align: right;
  overflow-wrap: anywhere;
}

.payos-result {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding: 16px;
  border: 1px solid rgba(99, 102, 241, 0.24);
  border-radius: 12px;
  background: rgba(99, 102, 241, 0.08);
}

.payos-result-paid {
  border-color: rgba(34, 197, 94, 0.42);
  background: rgba(34, 197, 94, 0.1);
}

.payos-result-header,
.payos-result-body,
.payos-actions {
  display: flex;
  gap: 12px;
}

.payos-result-header {
  align-items: flex-start;
  justify-content: space-between;
}

.payos-result-title {
  color: #ffffff;
  font-size: 15px;
  font-weight: 800;
}

.payos-result-amount {
  margin-top: 2px;
  color: #86efac;
  font-size: 18px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.payos-result-note {
  margin: 0;
  color: #cbd5e1;
  font-size: 13px;
  line-height: 1.55;
}

.payos-result-body {
  align-items: stretch;
  flex-direction: column;
  flex-wrap: nowrap;
}

.payos-result-details {
  display: grid;
  flex: 1 1 280px;
  align-content: start;
  gap: 10px;
  min-width: 0;
}

.payos-link-row {
  display: grid;
  grid-template-columns: minmax(112px, 132px) minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  color: #cbd5e1;
  font-size: 13px;
}

.payos-link-row > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
}

.payos-row-icon {
  width: 30px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 30px;
  color: #1d4ed8;
  background: rgba(96, 165, 250, 0.14);
  border: 1px solid rgba(96, 165, 250, 0.28);
  border-radius: 6px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0;
}

.payos-copy-value {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.payos-link-row code {
  display: block;
  min-width: 0;
  max-width: 100%;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
  line-height: 1.45;
  overflow-wrap: break-word;
  word-break: break-word;
  text-align: right;
}

.payos-actions {
  align-items: center;
  flex-wrap: wrap;
  margin-top: 2px;
}

.payos-qr-frame,
.payos-qr-placeholder {
  display: grid;
  flex: 0 0 260px;
  place-items: center;
  width: 260px;
  min-height: 260px;
  margin: 0 auto;
  padding: 14px;
  background: #ffffff;
  border-radius: 10px;
}

@media (max-width: 900px) {
  .payos-result-body {
    flex-direction: column;
  }

  .payos-qr-frame,
  .payos-qr-placeholder {
    width: 100%;
    max-width: 320px;
    min-height: 220px;
    margin: 0 auto;
  }

  .payos-result-details {
    width: 100%;
  }

  .payos-link-row,
  .payos-copy-value {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .payos-link-row > span {
    flex-basis: auto;
    padding-top: 0;
  }

  .payos-link-row code {
    text-align: left;
  }
}

.payos-qr-code {
  display: block;
  width: 100%;
  max-width: 232px;
  border-radius: 6px;
  background: #ffffff;
  image-rendering: pixelated;
}

.payos-qr-placeholder {
  color: #0f172a;
  text-align: center;
}

.payos-qr-placeholder span {
  color: #0f172a;
  font-size: 24px;
  font-weight: 900;
}

.payos-qr-placeholder small {
  max-width: 130px;
  color: #475569;
  font-size: 12px;
  line-height: 1.35;
}

.checkbox-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #cbd5e1;
  font-size: 13px;
}

.status-pill {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 6px;
  color: #cbd5e1;
  background: rgba(148, 163, 184, 0.16);
  border: 1px solid rgba(148, 163, 184, 0.22);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.status-pill.success {
  color: #86efac;
  background: rgba(34, 197, 94, 0.14);
  border-color: rgba(34, 197, 94, 0.24);
}

.status-pill.danger {
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(239, 68, 68, 0.24);
}

.ttc-task-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  background: rgba(8, 19, 34, 0.42);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 8px;
}

.ttc-task-card + .ttc-task-card {
  margin-top: 10px;
}

.ttc-evidence-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(148, 163, 184, 0.1);
}

.ttc-evidence-form .form-actions {
  grid-column: auto;
  justify-content: flex-end;
}

.ttc-cost-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 11px 12px;
  color: #8da0b8;
  background: rgba(8, 19, 34, 0.68);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 8px;
  font-size: 13px;
}

.ttc-cost-summary strong {
  color: #e2e8f0;
  font-variant-numeric: tabular-nums;
}

.ttc-shell {
  display: grid;
  gap: 14px;
  width: 100%;
}

.ttc-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  padding: 5px;
  background: #0b1625;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 8px;
}

.ttc-action-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: -2px 0 14px;
}

.ttc-action-tab {
  min-height: 34px;
  padding: 7px 11px;
  color: #aebdd0;
  background: rgba(2, 6, 23, 0.22);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 7px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 750;
}

.ttc-action-tab:hover,
.ttc-action-tab.active {
  color: #fff;
  background: rgba(37, 99, 235, 0.22);
  border-color: rgba(96, 165, 250, 0.34);
}

.ttc-tab-button {
  min-height: 34px;
  padding: 7px 12px;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}

.ttc-tab-button.active,
.ttc-tab-button[aria-selected="true"] {
  color: var(--primary);
  background: var(--primary-soft);
  border-color: color-mix(in srgb, var(--primary) 32%, transparent);
}

.ttc-tab-panel[hidden] {
  display: none;
}

.ttc-subtabs {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-bottom: 12px;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--border-soft);
}

.ttc-subtab-button {
  min-height: 38px;
  padding: 8px 14px;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid transparent;
  border-bottom-color: var(--border-default);
  border-radius: 6px 6px 0 0;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.ttc-subtab-button.active,
.ttc-subtab-button[aria-selected="true"] {
  color: var(--primary);
  background: var(--primary-soft);
  border-color: color-mix(in srgb, var(--primary) 34%, transparent);
  border-bottom-color: var(--primary);
}

.ttc-profile-grid {
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
}

.ttc-profile-grid.single-panel-grid {
  grid-template-columns: minmax(0, 1fr);
}

.ttc-work-grid,
.ttc-history-grid {
  align-items: start;
}

.ttc-earn-grid {
  grid-template-columns: minmax(0, 1fr);
}

.ttc-work-grid.single-panel-grid,
.ttc-history-grid.single-panel-grid {
  max-width: none;
}

.ttc-shell .dash-card {
  width: 100%;
  min-width: 0;
  padding: 16px;
  background: rgba(15, 23, 42, 0.48);
  border-color: rgba(148, 163, 184, 0.13);
  border-radius: 8px;
  box-shadow: none;
}

.ttc-form-note {
  margin: 0;
}

.ttc-shell .dash-card-header {
  min-height: 28px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.ttc-shell .dash-card-header h3 {
  color: #f8fafc;
  font-size: 14px;
  font-weight: 800;
}

.ttc-shell .stacked-form {
  gap: 12px;
}

.ttc-shell .form-row {
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 12px;
}

.ttc-shell .form-group {
  margin-bottom: 0;
}

.ttc-shell .form-group span {
  color: #8da0b8;
  font-size: 12px;
  font-weight: 750;
}

.ttc-shell .form-control,
.ttc-shell .filter-select {
  min-height: 44px;
  padding: 9px 12px;
  color: #e5edf7;
  background: rgba(2, 6, 23, 0.34);
  border-color: rgba(148, 163, 184, 0.18);
  border-radius: 8px;
}

.ttc-shell textarea.form-control {
  min-height: 86px;
  resize: vertical;
}

.ttc-shell .btn-primary,
.ttc-shell .btn-secondary {
  border-radius: 8px;
}

.ttc-shell .recent-item,
.ttc-shell .empty-state {
  background: rgba(8, 19, 34, 0.54);
  border-color: rgba(148, 163, 184, 0.12);
  border-radius: 8px;
}

.ttc-shell .recent-item {
  min-width: 0;
}

.ttc-shell .expiring-date,
.ttc-shell .expiring-name {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.ttc-available-task-card #ttc-task-list,
.ttc-my-task-card #ttc-my-task-list {
  display: grid;
  gap: 10px;
}

.ttc-task-action-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 9px;
  background: rgba(8, 19, 34, 0.54);
}

.ttc-task-action-card:hover {
  border-color: rgba(129, 140, 248, 0.24);
  background: rgba(15, 23, 42, 0.62);
}

.ttc-task-action-icon {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(96, 165, 250, 0.2);
  border-radius: 10px;
  color: #bfdbfe;
  background: rgba(37, 99, 235, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

button.ttc-task-action-icon {
  cursor: pointer;
  transition: border-color 0.16s ease, background-color 0.16s ease, transform 0.16s ease;
}

button.ttc-task-action-icon:hover {
  border-color: rgba(96, 165, 250, 0.42);
  background: rgba(37, 99, 235, 0.22);
  transform: translateY(-1px);
}

.ttc-task-action-icon svg {
  width: 19px;
  height: 19px;
  fill: currentColor;
}

.ttc-task-action-copy {
  min-width: 0;
}

.ttc-task-action-copy .expiring-name {
  font-size: 14px;
  line-height: 1.25;
}

.ttc-task-action-copy .expiring-date {
  display: -webkit-box;
  margin-top: 3px;
  overflow: hidden;
  color: #8fa3bd;
  font-size: 12px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.ttc-task-action-controls {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.ttc-task-action-controls .compact-button {
  min-height: 36px;
  padding-inline: 12px;
  white-space: nowrap;
}

.ttc-task-action-controls .status-pill {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
}

.ttc-task-owned-card {
  grid-template-columns: 38px minmax(0, 1fr) auto;
}

.ttc-task-owned-card .ttc-task-action-icon {
  width: 38px;
  height: 38px;
  color: #a7f3d0;
  background: rgba(16, 185, 129, 0.11);
  border-color: rgba(16, 185, 129, 0.18);
}

.ttc-shell .empty-state {
  min-height: 220px;
}

.ttc-shell .stats-grid {
  margin-bottom: 0;
}

.ttc-shell .stats-grid > div {
  flex: 1 1 160px;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 8px;
  background: rgba(8, 19, 34, 0.5);
}

.ttc-shell .stats-grid strong {
  color: #f8fafc;
  font-size: 19px;
  font-variant-numeric: tabular-nums;
}

.admin-ttc-shell .dashboard-grid.single-panel-grid .dash-card,
.ttc-work-grid.single-panel-grid .dash-card,
.ttc-profile-grid.single-panel-grid .dash-card,
.ttc-history-grid.single-panel-grid .dash-card {
  max-width: none;
}

.ttc-helper-text {
  margin: 12px 0 0;
  line-height: 1.55;
}

.ttc-earn-filter-bar {
  display: grid;
  grid-template-columns: minmax(220px, 420px) minmax(0, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}

.ttc-campaign-filter-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) minmax(150px, 0.8fr) minmax(150px, 0.8fr) minmax(130px, 0.55fr) minmax(130px, 0.55fr) auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
}

.ttc-campaign-table-wrap,
.wallet-ledger-table-wrap {
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(8, 19, 34, 0.28);
}

.ttc-campaign-table {
  min-width: 1180px;
}

.wallet-ledger-table {
  min-width: 1080px;
}

.ttc-campaign-table td,
.wallet-ledger-table td {
  vertical-align: top;
  line-height: 1.45;
}

.ttc-campaign-target-cell {
  display: grid;
  gap: 4px;
  min-width: 260px;
  max-width: 360px;
}

.ttc-campaign-target-cell strong,
.ttc-campaign-target-cell span,
.wallet-ledger-table td:nth-child(3),
.wallet-ledger-table td:nth-child(4),
.wallet-ledger-table td:nth-child(9) {
  overflow-wrap: anywhere;
}

.ttc-campaign-target-cell span {
  color: #8fa3bd;
  font-size: 12px;
}

.table-action-stack {
  display: inline-grid;
  gap: 7px;
  min-width: 92px;
}

.ttc-campaign-detail-list {
  margin-top: 14px;
}

.compact-card-header {
  margin-top: 16px;
}

.settings-row,
.user-support-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  padding: 10px 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.settings-row:last-child,
.user-support-row:last-child {
  border-bottom: 0;
}

.settings-row span,
.user-support-row span {
  color: #8da0b8;
  font-size: 12px;
  font-weight: 800;
}

.settings-row strong,
.user-support-row strong,
.user-support-row a {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #e2e8f0;
  font-size: 13px;
  text-align: right;
}

.admin-ttc-user-table {
  min-width: 1180px;
}

.admin-user-group-table {
  min-width: 780px;
}

.admin-data-tabs {
  display: flex;
  gap: 6px;
  margin: -2px 0 10px;
  padding: 5px 5px 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.admin-data-tab {
  min-height: 34px;
  padding: 7px 12px;
  color: #93a4ba;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.admin-data-tab.active {
  color: #dbeafe;
  border-bottom-color: #8b5cf6;
}

.admin-data-tab:not(.active):not(:disabled):hover {
  color: #dbeafe;
  background: rgba(148, 163, 184, 0.08);
}

.admin-data-tab:disabled {
  opacity: 0.62;
}

.admin-data-table-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 10px;
  color: #cbd5e1;
  font-size: 13px;
}

.admin-data-table-summary span {
  color: #a5b4fc;
  font-weight: 800;
}

.admin-campaign-table-wrap,
.admin-task-table-wrap,
.admin-log-table-wrap {
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 8px;
  background: rgba(8, 19, 34, 0.3);
}

.admin-campaign-table {
  min-width: 1320px;
}

.admin-campaign-table th:nth-child(2),
.admin-campaign-table td:nth-child(2) {
  width: 260px;
  min-width: 260px;
}

.admin-campaign-group-table {
  min-width: 900px;
}

.admin-task-table {
  min-width: 1160px;
}

.admin-log-table {
  min-width: 940px;
}

.admin-campaign-table td,
.admin-task-table td,
.admin-log-table td {
  vertical-align: top;
}

.admin-campaign-account-cell {
  min-width: 220px;
}

.admin-campaign-target-cell,
.admin-evidence-cell {
  min-width: 240px;
  max-width: 360px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.admin-campaign-item {
  align-items: flex-start;
}

.admin-campaign-item-main {
  display: grid;
  gap: 2px;
  min-width: 0;
  max-width: 100%;
}

.admin-campaign-target {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.35;
}

.admin-campaign-item .status-pill {
  margin-top: 2px;
  flex: 0 0 auto;
}

.admin-ttc-route-admin > .dashboard-grid {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.admin-ttc-route-admin > .dashboard-grid > .dash-card:first-child {
  min-height: 360px;
}

.admin-campaign-layout {
  grid-template-columns: minmax(0, 1fr);
}

.admin-campaign-layout .admin-campaign-list-card {
  order: 1;
}

.admin-campaign-layout .admin-ttc-create-card {
  order: 2;
  max-width: none;
}

.admin-ttc-route-admin-ttc-wallets > .dashboard-grid {
  grid-template-columns: minmax(340px, 0.82fr) minmax(0, 1.18fr);
  align-items: start;
}

.admin-create-campaign-form {
  gap: 12px;
}

.admin-create-tab-panel {
  display: grid;
  grid-template-columns: minmax(280px, 0.75fr) minmax(0, 1.25fr);
  gap: 14px 18px;
  min-width: 0;
  padding-top: 2px;
}

.admin-create-tab-panel[hidden] {
  display: none;
}

.admin-create-tab-panel > .form-group,
.admin-create-tab-panel > .form-row,
.admin-create-tab-panel > .facebook-id-resolver,
.admin-create-tab-panel > .ttc-cost-summary {
  min-width: 0;
}

.admin-create-tab-panel > .facebook-id-resolver,
.admin-create-tab-panel > .ttc-cost-summary {
  grid-column: 1 / -1;
}

.admin-create-tab-panel[data-admin-create-panel="target"],
.admin-create-tab-panel[data-admin-create-panel="notes"] {
  grid-template-columns: minmax(0, 1fr);
}

.admin-cancel-campaign-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-cancel-campaign-summary span {
  padding: 7px 10px;
  color: #cbd5e1;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 7px;
  font-size: 13px;
}

.admin-user-toolbar {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto;
  align-items: end;
  gap: 12px;
  margin-bottom: 14px;
}

.list-search-bar {
  margin: -4px 0 14px;
}

.list-search-bar .form-control {
  width: 100%;
}

.admin-user-summary {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  color: #dbeafe;
  background: rgba(37, 99, 235, 0.16);
  border: 1px solid rgba(96, 165, 250, 0.22);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 800;
}

.admin-user-tabs {
  display: flex;
  gap: 6px;
  margin: 0 0 10px;
  padding: 5px 5px 0;
  border-bottom: 1px solid var(--border-default);
}

.admin-user-tab {
  min-height: 34px;
  padding: 7px 12px;
  color: var(--text-secondary);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.admin-user-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.admin-user-tab:not(.active):not(:disabled):hover {
  color: var(--text-primary);
  background: var(--bg-soft);
}

.admin-user-tab:disabled {
  color: var(--text-disabled);
  opacity: 0.62;
}

.admin-user-table-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 10px;
  color: #cbd5e1;
  font-size: 13px;
}

.admin-user-table-summary span {
  color: #f87171;
  font-weight: 800;
}

.admin-user-table-wrap {
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 8px;
  background: rgba(8, 19, 34, 0.3);
}

.admin-ttc-user-table th:first-child,
.admin-ttc-user-table td:first-child {
  width: 260px;
  min-width: 260px;
}

.admin-user-account-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 260px;
}

.admin-user-avatar {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  display: block;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.18);
}

.tabular-cell {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.admin-wallet-card {
  display: grid;
  gap: 16px;
}

.admin-wallet-card .dash-card-header {
  margin-bottom: 0;
}

.compact-card-header {
  padding-top: 12px;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
}

.admin-wallet-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.admin-wallet-stat {
  min-width: 0;
  padding: 12px;
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.18), rgba(14, 165, 233, 0.08)),
    rgba(8, 19, 34, 0.68);
  border: 1px solid rgba(96, 165, 250, 0.18);
  border-radius: 8px;
}

.admin-wallet-stat span {
  display: block;
  margin-bottom: 6px;
  color: #8ea0b8;
  font-size: 12px;
  font-weight: 800;
}

.admin-wallet-stat strong {
  display: block;
  color: #f8fafc;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.admin-wallet-adjust-form {
  padding-top: 0;
}

.admin-wallet-adjust-form .form-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-wallet-ledger-card {
  min-width: 0;
}

.admin-wallet-ledger-wrap {
  max-height: 620px;
  overflow: auto;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 8px;
  background: rgba(8, 19, 34, 0.28);
}

.admin-wallet-ledger-table {
  min-width: 820px;
}

.admin-wallet-ledger-table td {
  vertical-align: top;
}

.wallet-positive {
  color: #86efac;
  font-weight: 900;
}

.wallet-negative {
  color: #fca5a5;
  font-weight: 900;
}

.admin-price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 14px;
  align-items: start;
}

.admin-price-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  background: rgba(8, 19, 34, 0.56);
  border: 1px solid rgba(148, 163, 184, 0.13);
  border-radius: 8px;
}

.admin-price-card-head,
.toggle-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.admin-price-card-head strong {
  display: block;
  max-width: 100%;
  color: #f8fafc;
  font-size: 14px;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.admin-price-card .muted-text {
  line-height: 1.25;
}

.admin-price-card .form-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.admin-price-card .form-group {
  min-width: 0;
}

.admin-price-card .form-control {
  width: 100%;
  min-width: 0;
}

.toggle-row {
  flex: 0 0 auto;
  justify-content: flex-start;
  color: #9fb0c6;
  font-size: 12px;
  font-weight: 750;
}

.toggle-row input {
  width: 16px;
  height: 16px;
  accent-color: #60a5fa;
}

.expiring-name {
  color: #e2e8f0;
  font-size: 13px;
  font-weight: 600;
}

.expiring-date {
  margin-top: 2px;
  color: #94a3b8;
  font-size: 12px;
}

.expiring-days {
  flex: 0 0 auto;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
}

.days-warning {
  color: #fb923c;
  background: rgba(249, 115, 22, 0.2);
}

.days-danger {
  color: #f87171;
  background: rgba(239, 68, 68, 0.2);
}

.toolbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  align-items: end;
  gap: 10px;
  width: 100%;
  margin-bottom: 20px;
  padding: 12px;
  background: rgba(15, 23, 42, 0.44);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 12px;
}

.toolbar > * {
  min-width: 0;
}

.form-control,
.filter-select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: var(--form-control-height, 42px);
  padding: 10px 14px;
  color: #e2e8f0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--form-control-radius, 10px);
  outline: none;
  transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
}

.form-control:hover,
.filter-select:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(148, 163, 184, 0.22);
}

.form-control:focus,
.filter-select:focus {
  background: rgba(15, 23, 42, 0.72);
  border-color: rgba(96, 165, 250, 0.58);
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.12);
}

.filter-select {
  color-scheme: dark;
}

.toolbar input[type="search"].form-control {
  grid-column: span 2;
}

.toolbar .btn-primary,
.toolbar .btn-secondary {
  min-height: 42px;
}

.filter-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 16px;
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.78), rgba(13, 18, 30, 0.58)),
    rgba(255, 255, 255, 0.03);
  border-color: rgba(148, 163, 184, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.filter-panel-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.filter-panel-head > div {
  display: grid;
  gap: 3px;
}

.filter-eyebrow {
  color: #7dd3fc;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.filter-panel-head strong {
  color: #e5edf7;
  font-size: 15px;
  font-weight: 800;
}

.filter-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 10px;
}

.filter-field {
  display: grid;
  grid-column: span 3;
  gap: 6px;
  min-width: 0;
}

.filter-field-wide {
  grid-column: span 4;
}

.filter-field-date {
  grid-column: span 2;
}

.filter-field span {
  color: #8da0b8;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.2;
}

.filter-field .form-control,
.filter-field .filter-select {
  height: 42px;
}

.report-filter-grid .filter-field {
  grid-column: span 3;
}

.report-filter-grid .filter-field-wide {
  grid-column: span 6;
}

.report-filter-grid .filter-field-date {
  grid-column: span 3;
}

.settings-page {
  width: 100%;
}

.settings-page .admin-card {
  width: 100%;
}

.settings-page #settings-form {
  display: grid;
  gap: 18px;
}

.settings-page #settings-form h3 {
  margin: 0;
}

.settings-page .form-grid {
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  align-items: start;
}

.settings-page .form-group {
  margin-bottom: 0;
}

.settings-page textarea.form-control {
  min-height: 112px;
  resize: vertical;
}

.logs-page .toolbar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  gap: 12px;
}

.logs-page #log-search,
.logs-page #log-actor-filter {
  grid-column: span 2;
}

.logs-page .toolbar .form-control,
.logs-page .toolbar .filter-select {
  width: 100%;
  min-width: 0;
  height: 42px;
  min-height: 42px;
  max-height: 42px;
}

.logs-page .toolbar .form-group.compact {
  display: grid;
  grid-template-rows: auto 42px;
  gap: 6px;
  margin-bottom: 0;
  min-width: 0;
  height: auto;
  min-height: 0;
  align-self: end;
}

.logs-page .toolbar .form-group.compact span {
  min-height: 14px;
  color: #94a3b8;
  font-size: 12px;
  line-height: 1.15;
}

.logs-page input[type="date"].form-control {
  display: block;
  height: 42px;
  min-height: 42px;
  max-height: 42px;
  padding: 8px 12px;
  color-scheme: dark;
  color: #dbe4f0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}

.logs-page input[type="date"].form-control::-webkit-datetime-edit {
  display: flex;
  align-items: center;
  min-width: 0;
  color: #cbd5e1;
  font-size: 14px;
  letter-spacing: 0;
}

.logs-page input[type="date"].form-control::-webkit-datetime-edit-fields-wrapper {
  display: flex;
  align-items: center;
}

.logs-page input[type="date"].form-control::-webkit-calendar-picker-indicator {
  width: 16px;
  height: 16px;
  margin-left: 6px;
  opacity: 0.72;
  cursor: pointer;
}

.form-control:disabled,
.filter-select:disabled,
.btn-primary:disabled,
.btn-secondary:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.form-group {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 6px;
  margin-bottom: 16px;
}

.money-input-shell {
  position: relative;
  display: block;
  min-width: 0;
}

.money-input-shell .form-control {
  padding-right: 58px;
  font-variant-numeric: tabular-nums;
}

.money-input-suffix {
  position: absolute;
  top: 50%;
  right: 14px;
  translate: 0 -50%;
  color: var(--money-suffix-text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

.form-group span {
  color: #94a3b8;
  font-size: 13px;
  font-weight: 600;
}

.form-group .field-optional {
  display: inline-block;
  margin-left: 6px;
  color: #64748b;
  font-size: 11px;
  font-weight: 500;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-width: 0;
  gap: 16px;
}

.form-row > * {
  min-width: 0;
}

.registration-card {
  width: 100%;
  min-width: 0;
  max-width: 980px;
}

.legacy-registration-card {
  padding: 24px;
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
}

.public-registration-tabs {
  width: min(980px, calc(100% - 32px));
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 18px auto 0;
  padding: 6px;
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}

.public-registration-tabs a {
  min-width: 0;
  padding: 11px 14px;
  color: #cbd5e1;
  border-radius: 8px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.public-registration-tabs a.active {
  color: #fff;
  background: #2563eb;
}

.official-community-card {
  width: 100%;
  max-width: 980px;
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.1fr);
  align-items: start;
  gap: 12px 20px;
  margin: 0 auto 20px;
  padding: 18px;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
}

.official-community-cover {
  width: 100%;
  height: 100%;
  min-height: 210px;
  object-fit: cover;
  border-radius: 10px;
}

.official-community-content h2 {
  margin: 0 0 8px;
  color: #fff;
  font-size: 19px;
}

.official-community-content > p {
  margin: 0 0 14px;
  color: #cbd5e1;
  line-height: 1.55;
}

.official-community-links {
  display: grid;
  gap: 3px;
}

.official-community-link {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.official-community-link:last-child {
  border-bottom: 0;
}

.official-community-link > span:first-child {
  color: #94a3b8;
  font-size: 13px;
  font-weight: 700;
}

.official-community-link a {
  color: #60a5fa;
  font-weight: 650;
  overflow-wrap: anywhere;
  text-decoration: none;
}

.official-community-link a:hover {
  text-decoration: underline;
}

.official-community-contacts {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  padding: 13px 16px;
  background: rgba(37, 211, 102, 0.07);
  border: 1px solid rgba(37, 211, 102, 0.22);
  border-radius: 10px;
}

.official-community-contacts h3 {
  flex: 0 0 auto;
  margin: 0;
  color: #fff;
  font-size: 15px;
  text-transform: uppercase;
}

.official-community-contact-row {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 12px 28px;
  align-items: center;
  min-width: 0;
}

.official-community-contact-group {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  min-width: 0;
}

.official-community-contact-group strong {
  color: #cbd5e1;
  font-size: 13px;
}

.official-community-contact-group > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  min-width: 0;
}

.official-community-contact-group a {
  color: #86efac;
  font-weight: 750;
  text-decoration: none;
}

.official-community-contact-group a:hover {
  text-decoration: underline;
}

.legacy-scope-notice,
.legacy-official-card,
.legacy-zalo-card,
.legacy-payment-proof,
.legacy-blocked-note,
.legacy-warning {
  margin-bottom: 18px;
  padding: 14px 16px;
  border-radius: 10px;
  line-height: 1.55;
}

.legacy-scope-notice,
.legacy-payment-proof {
  color: var(--info-text);
  background: var(--info-bg);
  border: 1px solid var(--info-border);
}

.legacy-scope-notice p {
  margin: 0 0 10px;
}

.legacy-scope-notice p:last-child {
  margin-bottom: 0;
}

.legacy-scope-notice ul {
  margin: 8px 0 12px;
  padding-left: 22px;
}

.legacy-official-card,
.legacy-zalo-card {
  margin-bottom: 18px;
  padding: 18px;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: 12px;
}

.legacy-official-card h2 {
  margin: 0 0 14px;
  color: var(--text-primary);
  font-size: 17px;
}

.legacy-contact-list {
  display: grid;
  gap: 2px;
}

.legacy-contact-item {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(0, 1.2fr);
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-soft);
}

.legacy-contact-item:last-child {
  border-bottom: 0;
}

.legacy-contact-item > span {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 700;
}

.legacy-contact-item a {
  color: var(--text-link);
  overflow-wrap: anywhere;
}

.legacy-zalo-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-color: var(--success-border);
  background: var(--success-bg);
}

.legacy-zalo-card h2 {
  margin: 0 0 4px;
  color: var(--success-text);
  font-size: 17px;
}

.legacy-zalo-card p {
  color: var(--text-secondary);
  margin: 5px 0 0;
}

.legacy-zalo-card p strong {
  color: var(--text-primary);
}

.legacy-zalo-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
}

.legacy-zalo-button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  color: #062b18;
  background: #4ade80;
  border: 1px solid #86efac;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}

.legacy-zalo-button.disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.legacy-warning {
  color: #fde68a;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.28);
}

.legacy-blocked-note {
  margin-top: 18px;
  color: #fecaca;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.22);
}

.legacy-blocked-note strong {
  display: block;
}

.legacy-mode-picker {
  display: grid;
  gap: 10px;
  margin: 0 0 24px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}

.legacy-mode-picker legend {
  padding: 0 6px;
  color: #fff;
  font-weight: 700;
}

.legacy-mode-picker label {
  display: flex;
  gap: 10px;
  align-items: center;
}

.legacy-kiosk-heading,
.legacy-kiosk-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.legacy-kiosk-card {
  margin-bottom: 16px;
  padding: 18px;
}

.legacy-kiosk-card-header {
  margin-bottom: 16px;
}

.legacy-resolver-status {
  min-height: 42px;
  display: flex;
  align-items: center;
  padding: 9px 12px;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  font-size: 13px;
}

.legacy-resolver-status.loading { color: #bfdbfe; }
.legacy-resolver-status.success { color: #86efac; }
.legacy-resolver-status.error { color: #fca5a5; }

.legacy-confirmations {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}

.legacy-payment-proof {
  margin-bottom: 0;
}

.legacy-payment-proof p {
  margin: 4px 0 0;
}

.form-section-title {
  margin-bottom: 16px;
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 700;
}

.legacy-section-spaced {
  margin-top: 8px;
}

.legacy-copy-toggle {
  width: fit-content;
  padding: 10px 12px;
  background: rgba(108, 99, 255, 0.08);
  border: 1px solid rgba(108, 99, 255, 0.2);
  border-radius: 9px;
}

.legacy-status-note {
  min-height: 42px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  color: #86efac;
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.18);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
}

.facebook-id-resolver {
  min-width: 0;
}

.facebook-id-resolver-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: 10px;
  align-items: start;
  margin-bottom: 8px;
}

.facebook-id-resolver-row .form-group {
  margin-bottom: 0;
}

.facebook-id-resolver-row .form-control {
  min-width: 0;
}

.facebook-id-resolve-button {
  box-sizing: border-box;
  width: max-content;
  max-width: 100%;
  min-width: 0;
  min-height: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  margin-top: 22px;
  margin-bottom: 0;
  border-radius: 9px;
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
}

.field-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.fb-help-trigger-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--primary);
  font-size: 12px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  transition: color 0.15s ease;
}

.fb-help-trigger-btn:hover {
  color: var(--primary-hover);
}

.fb-help-modal-flow {
  display: grid;
  gap: 14px;
  padding: 2px 0 4px;
}

.modal-facebook-help { width:min(620px,100%); }
.modal-facebook-help .modal-body { padding:24px 26px 26px; }
.fb-help-intro { margin:0 0 2px; color:var(--text-secondary); font-size:14px; line-height:1.6; }

.fb-help-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding:15px 16px;
  border:1px solid var(--border-default);
  border-radius:12px;
  background:var(--bg-soft);
}

.fb-step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 13px;
  font-weight: 800;
  flex: none;
}

.fb-step-body strong {
  display: block;
  font-size: 14px;
  color: var(--text-primary);
  margin-bottom: 5px;
}

.fb-step-body p {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.55;
}

.fb-help-example {
  display:grid;
  gap:8px;
  margin: 2px 0 0;
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.5;
}

.fb-help-example code {
  display: block;
  width:100%;
  padding:9px 11px;
  font-size: 12px;
  color: var(--text-primary);
  background:var(--bg-control);
  border:1px solid var(--border-default);
  border-radius:8px;
  overflow-wrap:anywhere;
}

.facebook-id-resolver-status {
  min-height: 20px;
  margin: 0 0 6px;
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.facebook-id-resolver > .field-helper {
  margin: 0 0 14px;
}

.facebook-id-resolver-status.loading {
  color: var(--info-text);
}

.facebook-id-resolver-status.success {
  color: var(--success-text);
}

.facebook-id-resolver-status.error {
  color: var(--danger-text);
}

.facebook-id-resolver-status.warning {
  color: var(--warning-text);
}

.field-error {
  display: block;
  margin-top: 5px;
  color: #fca5a5;
  font-size: 12px;
  line-height: 1.4;
}

.field-helper {
  margin: -10px 0 14px;
  color: #64748b;
  font-size: 11px;
  line-height: 1.45;
}

.form-control[aria-invalid="true"] {
  border-color: rgba(248, 113, 113, 0.8);
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.12);
}

.registration-list-heading,
.kiosk-price-summary,
.registration-total-sticky {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.registration-list-heading {
  margin: 24px 0 14px;
}

.registration-list-heading .form-section-title,
.registration-list-heading p {
  margin: 0;
}

.public-kiosk-card {
  margin-bottom: 16px;
  padding: 18px;
}

.kiosk-price-summary {
  flex-wrap: wrap;
  padding: 12px 14px;
  color: #cbd5e1;
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(96, 165, 250, 0.18);
  border-radius: 9px;
}

.registration-total-sticky {
  position: sticky;
  bottom: 10px;
  z-index: 5;
  margin: 18px 0;
  padding: 15px 18px;
  color: #fff;
  background: rgba(15, 23, 42, 0.96);
  border: 1px solid rgba(96, 165, 250, 0.35);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(10px);
}

.registration-total-sticky > strong {
  color: #86efac;
  font-size: 18px;
}

.registration-add-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 0 18px;
}

.registration-add-row .field-helper {
  margin: 0;
  text-align: left;
}

.register-add-kiosk-bottom {
  min-width: 150px;
}

.legacy-add-row {
  justify-content: flex-start;
  margin: 10px 0 20px;
  padding: 12px;
  background: rgba(8, 19, 34, 0.44);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 8px;
}

.registration-card form,
.registration-panel,
.registration-stepper,
.registration-step {
  min-width: 0;
  max-width: 100%;
}

.registration-stepper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 20px;
}

.registration-months-field {
  max-width: calc(50% - 8px);
}

.registration-step {
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  color: #64748b;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
}

.registration-step span {
  width: 24px;
  height: 24px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 800;
}

.registration-step strong {
  color: inherit;
  font-size: 12px;
  line-height: 1.35;
}

.registration-step.active {
  color: #ffffff;
  border-color: rgba(108, 99, 255, 0.45);
  background: rgba(108, 99, 255, 0.12);
}

.registration-step.active span,
.registration-step.completed span {
  color: #ffffff;
  background: #6c63ff;
}

.registration-step.completed {
  color: #cbd5e1;
}

.registration-panel {
  min-height: 300px;
}

.registration-summary {
  margin-top: 4px;
  margin-bottom: 16px;
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}

.vietqr-payment-card {
  margin-top: 16px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}

.vietqr-payment-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.vietqr-payment-header h3 {
  margin: 0;
  color: #e2e8f0;
  font-size: 15px;
  font-weight: 700;
}

.vietqr-payment-grid {
  display: grid;
  grid-template-columns: minmax(180px, 240px) 1fr;
  gap: 16px;
  align-items: start;
}

.vietqr-image-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 236px;
  padding: 10px;
  background: #ffffff;
  border-radius: 12px;
}

.vietqr-image-frame img {
  display: block;
  width: 100%;
  max-width: 220px;
  border-radius: 8px;
}

.vietqr-payment-card .link-button {
  width: max-content;
  margin-top: 4px;
}

.registration-review-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.registration-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}

.registration-success {
  width: min(100%, 620px);
  max-width: 620px;
  margin: 0 auto;
  padding: 48px 0 16px;
}

.public-payos-list {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.public-payos-list h3 {
  margin: 0;
  color: #e2e8f0;
  font-size: 15px;
}

.public-payos-card .link-button {
  width: 100%;
  justify-content: center;
}

.btn-primary {
  min-height: 40px;
  padding: 10px 18px;
  color: #ffffff;
  background: linear-gradient(135deg, #6c63ff, #a855f7);
  border: 0;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.payments-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.payments-payos-hint {
  margin-bottom: 16px;
}

.table-card {
  overflow-x: auto;
  width: 100%;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

.data-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
}

.data-table thead {
  background: rgba(255, 255, 255, 0.05);
}

.data-table th,
.data-table td {
  padding: 12px 16px;
  text-align: left;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.data-table th {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
}

.data-table td {
  color: #cbd5e1;
  font-size: 13px;
  vertical-align: top;
}

.payments-table {
  width: 100%;
  min-width: 1300px;
  table-layout: fixed;
}

.payments-table-card {
  overflow-x: auto;
}

.payments-table th,
.payments-table td {
  padding: 10px 9px;
  white-space: normal;
  overflow-wrap: anywhere;
}

.payments-table th:nth-child(1),
.payments-table td:nth-child(1) {
  width: 42px;
}

.payments-table th:nth-child(2),
.payments-table td:nth-child(2),
.payments-table th:nth-child(3),
.payments-table td:nth-child(3),
.payments-table th:nth-child(4),
.payments-table td:nth-child(4) {
  width: 136px;
}

.payments-table th:nth-child(5),
.payments-table td:nth-child(5) {
  width: 68px;
}

.payments-table th:nth-child(6),
.payments-table td:nth-child(6),
.payments-table th:nth-child(7),
.payments-table td:nth-child(7),
.payments-table th:nth-child(8),
.payments-table td:nth-child(8) {
  width: 108px;
}

.payments-table th:nth-child(9),
.payments-table td:nth-child(9) {
  width: 112px;
}

.payments-table th:nth-child(10),
.payments-table td:nth-child(10),
.payments-table th:nth-child(11),
.payments-table td:nth-child(11),
.payments-table th:nth-child(12),
.payments-table td:nth-child(12) {
  width: 116px;
}

.payment-approval-actions {
  display: grid;
  gap: 6px;
  min-width: 240px;
}

.payments-table th:last-child,
.payments-table td:last-child {
  width: 260px;
  min-width: 260px;
}

.table-approve-button,
.table-cancel-button,
.table-reject-button {
  width: 100%;
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.table-approve-button {
  color: var(--success-text);
  background: var(--success-bg);
  border: 1px solid var(--success-border);
}

.table-approve-button:hover {
  color: var(--text-inverse);
  background: var(--success);
}

.table-cancel-button {
  color: var(--danger-text);
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
}

.table-cancel-button:hover {
  color: var(--text-inverse);
  background: var(--danger);
}

.table-reject-button {
  color: var(--warning-text);
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
}

.table-reject-button:hover {
  color: var(--text-primary);
  background: var(--warning-bg);
  border-color: var(--warning);
}

.table-approve-button:disabled,
.table-cancel-button:disabled,
.table-reject-button:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.row-action-menu {
  position: relative;
  display: block;
  width: 240px;
  max-width: min(240px, 76vw);
}

.row-action-menu summary {
  min-height: 30px;
  padding: 6px 10px;
  color: var(--primary);
  background: var(--primary-soft);
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border-default));
  border-radius: 7px;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: all 0.15s ease;
}

.row-action-menu summary::-webkit-details-marker {
  display: none;
}

.row-action-menu[open] summary {
  color: var(--primary-hover);
  background: var(--bg-hover);
  border-color: var(--border-interactive);
}

.row-action-menu-panel {
  position: static;
  display: grid;
  gap: 6px;
  margin-top: 6px;
  padding: 8px;
  width: 100%;
  min-width: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  box-shadow: var(--shadow-surface);
}

.row-action-menu-panel .table-action-button {
  width: 100%;
  min-height: 28px;
  padding: 5px 8px;
  border-radius: 6px;
  text-align: left;
  text-decoration: none;
  color: var(--text-secondary);
  transition: all 0.15s ease;
}

.row-action-menu-panel .table-action-button:hover {
  background: var(--bg-hover);
  color: var(--primary);
  text-decoration: none;
}

.row-action-side-panel {
  position: static;
  display: grid;
  gap: 9px;
  width: 100%;
  margin-top: 4px;
  padding: 10px 0 0;
  border-top: 1px solid var(--border-soft);
  background: transparent;
  box-shadow: none;
}

.row-action-quick-panel {
  display: grid;
  gap: 9px;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--border-soft);
}

.quick-action-head {
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 900;
}

.quick-action-summary,
.quick-ledger-list,
.quick-action-form {
  display: grid;
  gap: 7px;
}

.quick-action-summary strong {
  color: #e2e8f0;
}

.quick-action-summary span,
.quick-muted {
  color: #94a3b8;
  font-size: 12px;
  line-height: 1.35;
}

.quick-action-form .form-group.compact {
  gap: 4px;
  margin: 0;
}

.quick-action-form .form-group.compact span {
  color: #94a3b8;
  font-size: 11px;
  font-weight: 800;
}

.quick-action-form .form-control {
  min-height: 34px;
  padding: 7px 9px;
  border-radius: 7px;
  font-size: 12px;
}

.quick-confirm-button {
  width: 100%;
  min-height: 34px;
  justify-content: center;
  margin-top: 2px;
  font-size: 12px;
}

.quick-ledger-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.quick-ledger-row:last-child {
  border-bottom: 0;
}

.quick-ledger-row span {
  color: #94a3b8;
  font-size: 11px;
  text-align: right;
}

.quick-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.quick-stat-grid span {
  display: grid;
  gap: 3px;
  padding: 8px;
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.035);
  font-size: 11px;
}

.quick-stat-grid strong {
  color: #f8fafc;
  font-size: 13px;
}

.admin-user-modal-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.44);
}

.admin-user-modal-profile strong,
.admin-user-permission-note strong {
  display: block;
  color: #f8fafc;
}

.admin-user-modal-profile span,
.admin-user-permission-note p,
.modal-note {
  color: #94a3b8;
  line-height: 1.55;
}

.admin-user-modal-status-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.admin-user-modal-avatar {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(148, 163, 184, 0.2);
}

.admin-user-modal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.admin-user-modal-grid.compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-user-modal-stat {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.admin-user-modal-stat span {
  display: block;
  margin-bottom: 5px;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.admin-user-modal-stat strong {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
  color: #e2e8f0;
  font-size: 13px;
}

.admin-user-permission-note {
  padding: 14px;
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: 10px;
  background: rgba(245, 158, 11, 0.08);
}

.admin-user-permissions-form {
  gap: 18px;
}

.admin-user-permission-account {
  color: #cbd5e1;
  font-size: 15px;
}

.admin-user-permission-account strong {
  color: #f8fafc;
}

.admin-user-permission-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px 34px;
}

.admin-user-permission-check {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  color: #e2e8f0;
  font-size: 14px;
  font-weight: 700;
}

.admin-user-permission-check input {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  accent-color: #6c63ff;
}

.admin-user-password-confirm {
  margin: 8px 0 0;
}

.admin-user-password-confirm small {
  color: #94a3b8;
  font-size: 12px;
  line-height: 1.45;
}

.admin-security-panel {
  display: grid;
  gap: 14px;
}

.admin-security-state {
  padding: 14px;
  border: 1px solid rgba(96, 165, 250, 0.2);
  border-radius: 10px;
  background: rgba(59, 130, 246, 0.08);
}

.admin-security-state.success {
  border-color: rgba(34, 197, 94, 0.24);
  background: rgba(34, 197, 94, 0.1);
}

.admin-security-state.warning {
  border-color: rgba(245, 158, 11, 0.24);
  background: rgba(245, 158, 11, 0.1);
}

.admin-security-state strong,
.admin-security-device strong {
  display: block;
  color: #f8fafc;
}

.admin-security-state span,
.admin-security-device span {
  display: block;
  margin-top: 4px;
  color: #94a3b8;
  font-size: 13px;
  line-height: 1.45;
}

.admin-security-list {
  display: grid;
  gap: 8px;
}

.admin-security-device {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.admin-mfa-setup {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.admin-mfa-qr {
  width: 180px;
  height: 180px;
  padding: 10px;
  border-radius: 10px;
  background: #ffffff;
  object-fit: contain;
}

.modal-loading {
  color: #cbd5e1;
}

.approval-state {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.approval-state.approved {
  color: #4ade80;
}

.approval-state.rejected,
.approval-state.cancelled {
  color: #94a3b8;
}

.approval-message p {
  margin: 0 0 14px;
  color: #cbd5e1;
  font-size: 13px;
  line-height: 1.6;
}

.approval-message strong {
  color: #ffffff;
}

.logs-table {
  min-width: 1040px;
}

.log-detail-cell {
  min-width: 220px;
}

.log-detail {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 360px;
  color: #94a3b8;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.log-detail strong {
  color: #e2e8f0;
  font-weight: 700;
}

.muted-text {
  color: #64748b;
}

.log-meta-grid {
  display: grid;
  gap: 2px;
  margin-bottom: 16px;
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}

.log-json-section + .log-json-section {
  margin-top: 16px;
}

.log-json-section h4 {
  margin: 0 0 10px;
  color: #e2e8f0;
  font-size: 13px;
}

.json-block {
  max-height: 360px;
  margin: 0;
  overflow: auto;
  padding: 14px;
  color: #cbd5e1;
  background: rgba(0, 0, 0, 0.24);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.log-diff-card {
  max-height: 420px;
  overflow: auto;
}

.log-diff-table {
  min-width: 760px;
}

.log-diff-table td {
  max-width: 280px;
  overflow-wrap: anywhere;
  line-height: 1.5;
}

.old-value {
  color: #fecaca;
}

.new-value {
  color: #bbf7d0;
}

.report-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 18px;
}

.report-tab {
  min-height: 38px;
  padding: 8px 14px;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.report-tab:hover {
  color: #e2e8f0;
  background: rgba(255, 255, 255, 0.07);
}

.report-tab.active {
  color: #ffffff;
  background: rgba(108, 99, 255, 0.2);
  border-color: rgba(108, 99, 255, 0.45);
}

.report-stats {
  margin-bottom: 18px;
}

.report-total-block {
  margin-top: 16px;
  margin-bottom: 0;
}

.report-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.report-grid.single {
  grid-template-columns: 1fr;
}

.report-card {
  padding: 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
}

.report-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 10px;
}

.report-table {
  min-width: 760px;
}

.report-table td {
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.compact-date {
  min-width: 0;
  color-scheme: dark;
  font-weight: 750;
}

.strong-cell {
  color: #ffffff;
  font-weight: 700;
}

.table-link {
  color: #60a5fa;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.table-link:hover {
  text-decoration: underline;
}

.inline-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.table-action-button {
  padding: 0;
  color: #cbd5e1;
  background: transparent;
  border: 0;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.table-action-button:hover {
  color: #ffffff;
  text-decoration: underline;
}

.table-action-button.danger-action {
  color: #f87171;
}

.table-action-button.danger-action:hover {
  color: #fecaca;
}

.link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.detail-section {
  margin-top: 16px;
}

.detail-row {
  align-items: flex-start;
}

.detail-value {
  max-width: min(420px, 60%);
  text-align: right;
  overflow-wrap: anywhere;
}

.detail-note {
  min-height: 44px;
  color: #cbd5e1;
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
}

.sort-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

.sort-icon {
  width: 10px;
  color: #94a3b8;
  font-size: 10px;
}

.sort-button.active[data-direction="asc"] .sort-icon::after {
  content: "▲";
}

.sort-button.active[data-direction="desc"] .sort-icon::after {
  content: "▼";
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.badge-active,
.badge-completed,
.badge-insert,
.badge-confirmpayment {
  color: #4ade80;
  background: rgba(34, 197, 94, 0.15);
}

.badge-inactive,
.badge-cancelled {
  color: #94a3b8;
  background: rgba(100, 116, 139, 0.18);
}

.badge-potential {
  color: #facc15;
  background: rgba(234, 179, 8, 0.15);
}

.badge-warning,
.badge-pending,
.badge-update {
  color: #fb923c;
  background: rgba(249, 115, 22, 0.15);
}

.badge-suspended,
.badge-expired,
.badge-rejected,
.badge-delete {
  color: #f87171;
  background: rgba(239, 68, 68, 0.15);
}

.pagination-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-card);
  margin-top: var(--space-card);
  padding: 10px 0;
}

.pagination-summary {
  color: #64748b;
  font-size: 13px;
}

.pagination-controls {
  grid-column: 2;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 6px;
}

.pagination-meta { grid-column:3; justify-self:end; }
.pagination-meta,.pagination-size,.pagination-pages { display:flex; align-items:center; gap:8px; }
.pagination-size span { color:var(--text-muted); font-size:12px; }
.pagination-size .filter-select { width:auto; min-width:108px; min-height:34px; height:34px; padding:5px 28px 5px 10px; }
.pagination-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  min-width:34px;
  height:34px;
  padding:0;
  color:var(--text-secondary);
  background:var(--bg-control);
  border:1px solid var(--border-default);
  border-radius:8px;
  font-size:13px;
  font-weight:750;
  cursor:pointer;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease;
}
.pagination-controls .pagination-button { min-width:34px; }
.pagination-button svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; }
.pagination-button:hover { color:var(--primary); background:var(--bg-hover); border-color:var(--border-interactive); }
.pagination-button.active { color:var(--text-on-accent); background:var(--primary); border-color:var(--primary); }
.pagination-button:disabled { color:var(--text-disabled); background:var(--bg-soft); border-color:var(--border-default); cursor:not-allowed; opacity:.55; }
.pagination-ellipsis { display:inline-grid; place-items:center; width:24px; color:var(--text-muted); }
.pagination-mobile-count { display:none; min-width:64px; color:var(--text-secondary); font-size:13px; font-weight:700; text-align:center; }

.filter-select.compact {
  min-width: 118px;
}

.btn-secondary {
  min-height: 40px;
  padding: 9px 14px;
  color: #cbd5e1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.btn-secondary:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.btn-danger {
  min-height: 40px;
  padding: 9px 14px;
  color: #ffffff;
  background: #dc2626;
  border: 1px solid rgba(248, 113, 113, 0.35);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.btn-danger:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.empty-state {
  width: 100%;
  padding: 42px 24px;
  text-align: center;
}

.empty-state-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  margin: 0 auto 12px;
  border-radius: 50%;
  color: #64748b;
  background: rgba(255, 255, 255, 0.05);
  font-weight: 800;
}

.empty-state-title {
  color: #e2e8f0;
  font-size: 14px;
  font-weight: 700;
}

.empty-state-message {
  max-width: 520px;
  margin: 6px auto 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.6;
}

.kiosk-grid,
.cat-summary {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.kiosk-card {
  display: flex;
  flex-direction: column;
  min-height: 304px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.kiosk-card:hover {
  border-color: rgba(108, 99, 255, 0.3);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
  transform: translateY(-2px);
}

.kiosk-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.kiosk-name {
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.kiosk-category {
  margin-top: 4px;
  color: #94a3b8;
  font-size: 12px;
}

.kiosk-details {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
}

.kiosk-detail {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  color: #94a3b8;
  font-size: 12px;
}

.kiosk-detail-label {
  flex: 0 0 auto;
  color: #64748b;
  font-weight: 700;
}

.kiosk-detail-value {
  color: #cbd5e1;
  text-align: right;
  overflow-wrap: anywhere;
}

.kiosk-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.kiosk-id {
  color: #475569;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kiosk-grid .empty-state,
.cat-summary .empty-state {
  grid-column: 1 / -1;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
}

.settings-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.setting-name {
  color: #e2e8f0;
  font-size: 13px;
  font-weight: 600;
}

.setting-value {
  color: #94a3b8;
  font-size: 13px;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
}

.modal {
  width: min(520px, 100%);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  background: #1a1d2e;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6);
}

.modal-wide {
  width: min(920px, 100%);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.modal-header h3 {
  margin: 0;
  color: #ffffff;
  font-size: 17px;
}

.modal-close {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  color: #64748b;
  background: transparent;
  cursor: pointer;
}

.modal-close svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.modal-close:hover {
  color: #e2e8f0;
  background: rgba(255, 255, 255, 0.08);
}

.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 22px;
}

.modal-form {
  display: flex;
  flex-direction: column;
}

.checkbox-field {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0 18px;
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 600;
}

.checkbox-field input {
  width: 16px;
  height: 16px;
  accent-color: #6c63ff;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}

.delete-message {
  margin-bottom: 16px;
  color: #cbd5e1;
  font-size: 13px;
  line-height: 1.6;
}

.delete-message p {
  margin: 0 0 8px;
}

.delete-message strong {
  color: #ffffff;
}

.renew-summary,
.renew-calculation {
  margin-bottom: 16px;
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}

.renew-calculation {
  margin-top: 4px;
}

.renew-admin-form .renew-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 20px; }
.renew-admin-form .renew-calculation { padding:18px; }
.renew-money-row,.renew-total { min-height:42px; display:flex; align-items:center; justify-content:space-between; gap:18px; border-bottom:1px solid rgba(148,163,184,.16); }
.renew-money-row span { color:#94a3b8; font-size:13px; }.renew-money-row strong { color:#e2e8f0; }
.renew-discount-field { margin-top:14px; }
.renew-total { margin-top:16px; padding:16px; border:1px solid rgba(37,99,235,.35); border-radius:10px; color:#bfdbfe; background:rgba(37,99,235,.12); }.renew-total span { font-size:12px; font-weight:900; letter-spacing:.08em; }.renew-total strong { color:#fff; font-size:20px; }
.renew-payment-paths { margin:0; padding:0; display:grid; gap:10px; border:0; }.renew-payment-paths legend { margin-bottom:8px; font-weight:700; }.renew-payment-paths label { padding:13px; display:flex; align-items:flex-start; gap:10px; border:1px solid rgba(148,163,184,.22); border-radius:9px; cursor:pointer; }.renew-payment-paths label:has(input:checked) { border-color:#2563eb; background:rgba(37,99,235,.1); }.renew-payment-paths span { display:grid; gap:3px; }.renew-payment-paths small { color:#94a3b8; line-height:1.45; }
.renew-period-preview { margin:0; padding:12px; color:#94a3b8; border-radius:8px; background:rgba(148,163,184,.08); }.renew-period-preview strong { color:#e2e8f0; }
.renew-success { display:grid; gap:12px; }.renew-success h3 { margin:0; text-align:center; }.renew-success-icon { width:52px; height:52px; margin:auto; display:grid; place-items:center; border-radius:50%; color:#fff; background:#16a34a; }.renew-success-icon svg { width:28px; height:28px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
@media(max-width:620px){.renew-admin-form .renew-summary{grid-template-columns:1fr}.renew-money-row,.renew-total{align-items:flex-start;flex-direction:column;gap:5px;padding:10px 0}.renew-total{padding:14px}.renew-admin-form .modal-actions{flex-direction:column-reverse}.renew-admin-form .modal-actions button{width:100%}}

.form-error {
  margin-bottom: 16px;
  padding: 10px 12px;
  color: #fecaca;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.24);
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
}

.toast-container {
  position: fixed;
  top: 76px;
  right: 24px;
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 28px;
  align-items: start;
  gap: 10px;
  width: min(380px, calc(100vw - 32px));
  padding: 13px 12px 13px 14px;
  color: var(--text-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-left: 4px solid var(--info-text);
  border-radius: 10px;
  box-shadow: var(--shadow-overlay);
  animation: toast-in 0.25s ease;
  pointer-events: auto;
}
.toast--success{border-left-color:var(--success-text);background:linear-gradient(var(--success-bg),var(--success-bg)),var(--bg-elevated)}
.toast--info{border-left-color:var(--info-text);background:linear-gradient(var(--info-bg),var(--info-bg)),var(--bg-elevated)}
.toast--warning{border-left-color:var(--warning-text);background:linear-gradient(var(--warning-bg),var(--warning-bg)),var(--bg-elevated)}
.toast--error{border-left-color:var(--danger-text);background:linear-gradient(var(--danger-bg),var(--danger-bg)),var(--bg-elevated)}
.toast-icon{display:grid;width:22px;height:22px;place-items:center;color:var(--info-text)}
.toast--success .toast-icon{color:var(--success-text)}.toast--warning .toast-icon{color:var(--warning-text)}.toast--error .toast-icon{color:var(--danger-text)}
.toast-icon svg,.toast-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9}
.toast-copy{display:grid;gap:3px;min-width:0}.toast-copy strong{font-size:13px}.toast-copy>span{color:var(--text-secondary);font-size:12px;line-height:1.45;overflow-wrap:anywhere}
.toast-close{width:28px;height:28px;padding:0;display:grid;place-items:center;color:var(--text-secondary);background:transparent;border:0;border-radius:7px;cursor:pointer}.toast-close:hover{color:var(--text-primary);background:var(--bg-hover)}

.toast.leaving {
  animation: toast-out 0.2s ease forwards;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes toast-out {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(40px); }
}

.button-spinner{width:16px;height:16px;display:inline-block;flex:0 0 16px;border:2px solid color-mix(in srgb,currentColor 30%,transparent);border-top-color:currentColor;border-radius:50%;animation:button-spin .7s linear infinite}
[aria-busy="true"]{cursor:progress}[aria-busy="true"] .button-spinner{vertical-align:-3px}
@keyframes button-spin{to{transform:rotate(360deg)}}

@media(max-width:620px){.toast-container{top:68px;right:12px;left:12px;align-items:center}.toast{width:100%;max-width:440px}}

@media (max-width: 1100px) {
  .dashboard-grid,
  .admin-grid,
  .report-grid {
    grid-template-columns: 1fr;
  }

  .admin-ttc-route-admin > .dashboard-grid,
  .admin-ttc-route-admin-ttc-wallets > .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .admin-ttc-route-admin > .dashboard-grid > .dash-card:first-child {
    grid-row: auto;
  }

  .logs-page .toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .filter-grid,
  .report-filter-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .filter-field,
  .filter-field-date,
  .report-filter-grid .filter-field,
  .report-filter-grid .filter-field-date {
    grid-column: span 2;
  }

  .filter-field-wide,
  .report-filter-grid .filter-field-wide {
    grid-column: span 3;
  }

  .ttc-profile-grid {
    grid-template-columns: 1fr;
  }

  .payments-summary {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 900px) {
  .admin-create-tab-panel,
  .admin-user-toolbar,
  .user-social-home,
  .user-account-page {
    grid-template-columns: 1fr;
  }

  .user-rank-card {
    position: static;
  }

  .user-social-toolbar {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .user-live-strip {
    order: 3;
    width: 100%;
    flex-wrap: wrap;
    margin-left: 0;
  }

  .account-summary-card {
    position: static;
  }

  .sidebar {
    transform: translateX(-100%);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .sidebar-overlay.open {
    display: block;
  }

  .main-content {
    margin-left: 0;
  }

  .icon-button {
    display: grid;
    place-items: center;
  }
}

@media (max-width: 640px) {
  .user-social-metrics {
    grid-template-columns: 1fr;
  }

  .user-announcement-body {
    padding: 20px 18px;
  }

  .user-announcement-body h3 {
    font-size: 22px;
  }

  .user-announcement-actions {
    gap: 12px;
    flex-wrap: wrap;
  }

  .user-announcement-pulse {
    margin-left: 0;
  }
}

@media (max-width: 640px) {
  .toolbar,
  .logs-page .toolbar {
    grid-template-columns: 1fr;
    padding: 10px;
  }

  .toolbar input[type="search"].form-control,
  .filter-field,
  .filter-field-wide,
  .filter-field-date,
  .report-filter-grid .filter-field,
  .report-filter-grid .filter-field-wide,
  .report-filter-grid .filter-field-date {
    grid-column: 1 / -1;
  }

  .filter-panel-head {
    align-items: stretch;
    flex-direction: column;
  }

  .filter-panel-head .btn-secondary {
    width: 100%;
  }

  .facebook-id-resolver-row {
    grid-template-columns: 1fr;
  }

  .facebook-id-resolve-button {
    width: 100%;
    height: 42px;
    margin-top: 0;
    margin-bottom: 12px;
  }

  .public-topbar {
    align-items: center;
    padding-inline: 14px;
  }

  .public-topbar > div {
    flex: 1 1 auto;
  }

  .public-topbar > a {
    max-width: 42%;
  }

  .public-registration-tabs {
    width: calc(100% - 28px);
    margin-top: 14px;
    gap: 5px;
    padding: 5px;
  }

  .public-registration-tabs a {
    display: grid;
    place-items: center;
    padding: 9px 7px;
    font-size: 13px;
    line-height: 1.35;
  }

  .public-content {
    padding: 18px 14px;
  }

  .official-community-card {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .official-community-cover {
    min-height: 160px;
  }

  .official-community-link {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .official-community-contact-group {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .official-community-contact-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .legacy-registration-card {
    padding: 16px;
  }

  .legacy-contact-item {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .legacy-zalo-card,
  .legacy-zalo-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .legacy-zalo-button,
  .legacy-zalo-actions .btn-secondary {
    width: 100%;
  }

  .legacy-kiosk-heading,
  .legacy-kiosk-card-header,
  .registration-list-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .registration-list-heading .btn-secondary,
  .public-kiosk-card [data-remove-kiosk],
  .registration-actions .btn-primary {
    width: 100%;
  }

  .account-tabs {
    overflow-x: auto;
  }

  .account-tab {
    flex: 1 0 max-content;
  }

  .account-profile-form {
    grid-template-columns: 1fr;
  }

  .account-security-row {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .account-security-row strong {
    text-align: left;
  }

  .account-security-row.primary-security-row {
    grid-template-columns: 1fr;
  }

  .account-security-row .status-pill {
    justify-self: start;
  }

  .ttc-task-action-card,
  .ttc-task-owned-card {
    grid-template-columns: 40px minmax(0, 1fr) minmax(0, auto);
    gap: 10px;
  }

  .ttc-task-action-controls {
    grid-column: auto;
    justify-content: flex-end;
    gap: 6px;
  }

  .ttc-task-action-controls .compact-button {
    min-width: 0;
    padding-inline: 10px;
  }

  .ttc-task-action-controls .status-pill {
    padding-inline: 8px;
    white-space: nowrap;
  }

  .registration-total-sticky {
    bottom: 6px;
    align-items: flex-start;
    flex-direction: column;
  }

  .top-bar {
    gap: 10px;
    padding: 0 12px;
  }

  .top-bar-left {
    min-width: 0;
    gap: 10px;
  }

  .top-brand-mark {
    display: block;
    flex: 0 1 118px;
    min-width: 84px;
  }

  .top-bar-context {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .top-bar-right:not(.top-bar-user-actions) {
    display: none;
  }

  .top-bar-user-actions {
    gap: 6px;
  }

  .top-wallet-pill {
    min-width: 78px;
    max-width: 120px;
    padding: 0 9px;
    overflow: hidden;
  }

  .top-wallet-pill span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .top-icon-link {
    display: none;
  }

  .theme-toggle-button {
    display: inline-flex;
  }

  .sidebar-logo {
    padding: 16px;
  }

  .page-content {
    width: 100%;
    max-width: 100vw;
    padding: 16px;
    overflow-x: hidden;
  }

  .page-header,
  .form-row,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .wallet-topup-form {
    grid-template-columns: 1fr;
  }

  .settings-page .form-grid,
  .logs-page .toolbar {
    grid-template-columns: 1fr;
  }

  .admin-price-card .form-row {
    grid-template-columns: 1fr;
  }

  .admin-wallet-stats {
    grid-template-columns: 1fr;
  }

  .admin-wallet-adjust-form .form-row {
    grid-template-columns: 1fr;
  }

  .admin-mfa-setup,
  .admin-user-modal-grid,
  .admin-user-modal-grid.compact,
  .admin-user-permission-grid {
    grid-template-columns: 1fr;
  }

  .row-action-side-panel {
    width: 100%;
  }

  .admin-mfa-qr {
    width: 100%;
    max-width: 220px;
    height: auto;
    aspect-ratio: 1;
  }

  .ttc-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ttc-tab-button {
    width: 100%;
  }

  .ttc-action-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ttc-action-tab {
    width: 100%;
  }

  .ttc-shell .form-row.form-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .ttc-earn-filter-bar {
    grid-template-columns: 1fr;
  }

  .ttc-campaign-filter-grid {
    grid-template-columns: 1fr;
  }

  .ttc-campaign-filter-grid .compact-button {
    width: 100%;
  }

  .ttc-evidence-form {
    grid-template-columns: 1fr;
  }

  .ttc-evidence-form .form-actions,
  .ttc-evidence-form .btn-primary {
    width: 100%;
  }

  .payos-result-body,
  .payos-result-header {
    flex-direction: column;
  }

  .payos-link-row,
  .payos-copy-value {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .payos-link-row > span {
    flex-basis: auto;
    padding-top: 0;
  }

  .payos-link-row code {
    text-align: left;
  }

  .payos-qr-frame,
  .payos-qr-placeholder {
    width: 100%;
    max-width: 280px;
    min-height: 220px;
  }

  .recent-item {
    align-items: flex-start;
  }

  .recent-registration-amount {
    margin-left: auto;
  }

  .item-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .page-header {
    display: block;
  }

  .page-actions {
    justify-content: stretch;
    margin-top: 14px;
  }

  .page-actions .btn-primary,
  .payments-summary {
    width: 100%;
  }

  .pagination-bar,
  .pagination-controls {
    align-items: stretch;
    flex-direction: column;
  }

  .pagination-controls .filter-select,
  .pagination-controls .btn-secondary {
    width: 100%;
  }

  .detail-row {
    display: block;
  }

  .detail-value {
    display: block;
    max-width: 100%;
    margin-top: 6px;
    text-align: left;
  }

  .payments-summary {
    grid-template-columns: 1fr;
  }

  .stats-grid .stat-card {
    flex-basis: 100%;
  }

  .stat-card-fluid .stat-number {
    white-space: normal;
  }

  .registration-stepper,
  .registration-review-grid,
  .vietqr-payment-grid {
    grid-template-columns: 1fr;
  }

  .registration-card {
    padding: 16px;
  }

  .registration-step {
    width: 100%;
  }

  .registration-months-field {
    max-width: none;
  }

  .vietqr-payment-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .vietqr-payment-card .link-button {
    width: 100%;
  }

  .vietqr-image-frame img {
    max-width: 260px;
  }

  .registration-actions {
    flex-direction: column;
  }

  .registration-actions .btn-primary,
  .registration-actions .btn-secondary {
    width: 100%;
  }

  .report-tab {
    width: 100%;
    flex-basis: 100%;
  }
}

/* Theme-neutral component layer. Theme differences belong in the tokens above. */
body { color:var(--text-primary); background:var(--bg-page); }
.sidebar { color:var(--text-secondary); background:var(--bg-sidebar); border-color:var(--border-default); box-shadow:var(--shadow-card); }
.sidebar-logo,.sidebar-footer,.top-bar,.modal-header,.settings-row,.setting-item,.user-support-row { border-color:var(--border-default); }
.sidebar-footer,.top-bar { background:var(--bg-header); }
.sidebar-title,.top-bar-context,.page-header h1,.dash-card-header h3,.admin-card h3,.detail-section h3,.modal-header h3,.setting-name,.strong-cell,.kiosk-name,.kiosk-detail-value,.expiring-name,.user-name,.checkbox-row,.public-payos-list h3,.renew-money-row strong,.renew-total strong,.renew-period-preview strong { color:var(--text-primary); }
.sidebar-sub,.nav-section-label,.current-date,.page-header p,.muted-text,.field-helper,.modal-note,.setting-value,.expiring-date,.kiosk-category,.kiosk-detail,.kiosk-id,.pagination-summary,.user-role,.stat-label,.data-table th { color:var(--text-muted); }
.nav-item,.nav-group-toggle,.table-action-button,.detail-note,.empty-state-message { color:var(--text-secondary); }
.nav-item:hover,.nav-group-toggle:hover,.nav-group.has-active-child .nav-group-toggle { color:var(--text-primary); background:var(--bg-hover); border-color:var(--border-default); }
.nav-item.active { color:var(--text-on-accent); background:var(--nav-active-bg); border-color:var(--nav-active-border); box-shadow:inset 3px 0 0 var(--nav-active-indicator); }
.top-wallet-pill,.top-icon-link,.top-user-trigger,.icon-button { color:var(--primary); background:var(--bg-control); border-color:var(--border-default); box-shadow:none; }
.top-wallet-pill:hover,.top-icon-link:hover,.top-user-trigger:hover,.icon-button:hover { color:var(--primary-hover); background:var(--bg-hover); border-color:var(--border-interactive); }
.admin-card,.dash-card,.form-card,.table-card,.report-card,.toolbar,.filter-panel,.kiosk-card,.registration-card,.legacy-registration-card,.public-kiosk-card,.official-community-card,.account-info-card,.account-summary-card,.user-announcement-card,.user-rank-card,.ttc-task-card,.ttc-task-action-card,.ttc-task-owned-card,.recent-item,.expiring-item { color:var(--text-primary); background:var(--bg-card); border-color:var(--border-default); box-shadow:var(--shadow-card); }
.toolbar,.filter-panel { background:var(--bg-card); }
.form-control,.filter-select,.ttc-shell .form-control,.ttc-shell .filter-select,.modal-overlay .form-control { color:var(--text-primary); color-scheme:inherit; background:var(--bg-control); border-color:var(--border-default); }
.form-control:hover,.filter-select:hover,.ttc-shell .form-control:hover,.ttc-shell .filter-select:hover { background:var(--bg-hover); border-color:var(--border-strong); }
.form-control:focus,.filter-select:focus,.ttc-shell .form-control:focus,.ttc-shell .filter-select:focus { background:var(--bg-control); border-color:var(--border-interactive); box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 18%,transparent); }
.form-control::placeholder { color:var(--text-muted); opacity:1; }
.form-control:disabled,.filter-select:disabled,.form-control[readonly],.btn-primary:disabled,.btn-secondary:disabled { color:var(--text-disabled); -webkit-text-fill-color:var(--text-disabled); background:var(--bg-soft); border-color:var(--border-default); opacity:1; }
.data-table thead { background:var(--table-header-bg); }
.data-table th,.data-table td { border-color:var(--border-default); }
.data-table td { color:var(--text-secondary); }
.data-table tbody tr:hover { background:var(--table-row-hover); }
.data-table tbody tr.is-selected { background:var(--table-row-selected); }
.table-link,.link-button { color:var(--primary); }
.btn-primary { color:var(--text-on-accent); background:var(--primary); border:1px solid var(--primary); }
.btn-primary:hover { background:var(--primary-hover); border-color:var(--primary-hover); }
.btn-primary:active { background:var(--primary-active); border-color:var(--primary-active); }
.btn-secondary,.facebook-id-resolve-button,.logout-button { color:var(--primary); background:var(--primary-soft); border-color:color-mix(in srgb,var(--primary) 28%,var(--border-default)); }
.btn-secondary:hover,.facebook-id-resolve-button:hover { color:var(--primary-hover); background:var(--bg-hover); border-color:var(--border-interactive); }
.btn-secondary:active { background:var(--bg-active); }
.btn-outline { color:var(--text-primary); background:transparent; border:1px solid var(--border-default); }
.btn-outline:hover { color:var(--primary); background:var(--bg-hover); border-color:var(--border-interactive); }
.btn-ghost { color:var(--text-secondary); background:transparent; border:1px solid transparent; }
.btn-ghost:hover { color:var(--text-primary); background:var(--bg-hover); }
.btn-danger { color:var(--text-on-accent); background:var(--danger); border:1px solid var(--danger); }
.btn-danger:hover { background:color-mix(in srgb,var(--danger) 85%,#000); border-color:color-mix(in srgb,var(--danger) 85%,#000); }
.btn-danger:disabled { color:var(--text-disabled); -webkit-text-fill-color:var(--text-disabled); background:var(--bg-soft); border-color:var(--border-default); opacity:1; }
.status-pill,.status-badge,.badge { color:var(--text-secondary); background:var(--bg-soft); border:1px solid var(--border-default); }
.status-pill.success,.status-badge.success,.status-badge--success,.badge-success { color:var(--success-text); background:var(--success-bg); border-color:var(--success-border); }
.status-pill.warning,.status-badge.warning,.status-badge--warning,.badge-warning { color:var(--warning-text); background:var(--warning-bg); border-color:var(--warning-border); }
.status-pill.danger,.status-badge.danger,.status-badge--danger,.badge-danger { color:var(--danger-text); background:var(--danger-bg); border-color:var(--danger-border); }
.status-pill.info,.status-badge.info,.status-badge--info,.badge-info { color:var(--info-text); background:var(--info-bg); border-color:var(--info-border); }
.status-pill.neutral,.status-badge.neutral,.status-badge--neutral,.badge-neutral { color:var(--neutral-text); background:var(--neutral-bg); border-color:var(--neutral-border); }
.status-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:currentColor; }
.status-badge {
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 8px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  line-height:1.2;
  white-space:nowrap;
}
.status-badge--pending,.badge-pending { color:var(--tone-orange-text); background:var(--tone-orange-bg); border-color:color-mix(in srgb,var(--warning) 42%,var(--border-default)); }
.badge-active,.badge-completed,.badge-approved { color:var(--success-text); background:var(--success-bg); border-color:var(--success-border); }
.badge-warning { color:var(--warning-text); background:var(--warning-bg); border-color:var(--warning-border); }
.badge-expired,.badge-rejected,.badge-cancelled { color:var(--danger-text); background:var(--danger-bg); border-color:var(--danger-border); }
.badge-suspended,.badge-inactive,.badge-unknown { color:var(--neutral-text); background:var(--neutral-bg); border-color:var(--neutral-border); }
.compact-action {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-height:30px;
  padding:5px 9px;
  border:1px solid var(--border-default);
  border-radius:8px;
  background:var(--bg-control);
  color:var(--text-secondary);
  font-size:12px;
  font-weight:700;
  line-height:1;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease;
}
.compact-action-icon,.compact-action-icon svg { width:14px; height:14px; }
.compact-action-icon svg { display:block; fill:none; stroke:currentColor; stroke-width:2; }
.compact-action--info { color:var(--info-text); background:var(--info-bg); border-color:var(--info-border); }
.compact-action--secondary { color:var(--text-secondary); background:var(--bg-soft); border-color:var(--border-default); }
.compact-action--positive { color:var(--success-text); background:var(--success-bg); border-color:var(--success-border); }
.compact-action--warning { color:var(--warning-text); background:var(--warning-bg); border-color:var(--warning-border); }
.compact-action--danger { color:var(--danger-text); background:var(--danger-bg); border-color:var(--danger-border); }
.compact-action:hover { color:var(--text-primary); border-color:var(--border-interactive); filter:brightness(1.06); }
.compact-action:disabled { color:var(--text-disabled); background:var(--bg-soft); border-color:var(--border-default); cursor:not-allowed; opacity:.58; }
.notice.warning,.days-warning { color:var(--warning-text); background:var(--warning-bg); border-color:var(--warning-border); }
.notice.success { color:var(--success-text); background:var(--success-bg); border-color:var(--success-border); }
.days-danger,.form-error { color:var(--danger-text); background:var(--danger-bg); border-color:var(--danger-border); }
.field-error { color:var(--danger-text); }
.empty-state { color:var(--text-secondary); background:var(--bg-card); border-color:var(--border-default); }
.modal-overlay { background:var(--bg-overlay); }
.modal,.toast,.row-action-menu-panel,.top-user-dropdown { color:var(--text-primary); background:var(--bg-elevated); border-color:var(--border-default); box-shadow:var(--shadow-surface); }
.modal-close { color:var(--text-secondary); background:var(--bg-control); }
.modal-close:hover { color:var(--danger); background:var(--danger-bg); }
.stat-card { color:var(--text-primary); border-color:var(--border-default); box-shadow:var(--shadow-card); }
.stat-number { color:var(--text-primary); text-shadow:none; }
.tone-blue { background:var(--tone-blue-bg); }
.tone-purple { background:var(--tone-purple-bg); }
.tone-orange { background:var(--tone-orange-bg); }
.tone-red { background:var(--tone-red-bg); }
.tone-green { background:var(--tone-green-bg); }
.tone-teal { background:var(--tone-teal-bg); }
.icon-badge,.semantic-icon-box { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:10px; border:1px solid transparent; flex:none; }
.icon-badge--sm { width:28px; height:28px; border-radius:8px; }
.icon-badge--lg { width:44px; height:44px; border-radius:12px; }
.icon-badge svg,.semantic-icon-box svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; }
.icon-badge--sm svg { width:14px; height:14px; }
.icon-badge--lg svg { width:22px; height:22px; }
.icon-badge--customer,.icon-badge--blue { color:var(--tone-blue-text); background:var(--tone-blue-bg); border-color:color-mix(in srgb,var(--primary) 28%,transparent); }
.icon-badge--kiosk,.icon-badge--purple { color:var(--tone-purple-text); background:var(--tone-purple-bg); border-color:color-mix(in srgb,#a855f7 28%,transparent); }
.icon-badge--revenue,.icon-badge--green { color:var(--tone-green-text); background:var(--tone-green-bg); border-color:var(--success-border); }
.icon-badge--payment,.icon-badge--teal { color:var(--tone-teal-text); background:var(--tone-teal-bg); border-color:color-mix(in srgb,#14b8a6 28%,transparent); }
.icon-badge--warning,.icon-badge--orange { color:var(--tone-orange-text); background:var(--tone-orange-bg); border-color:var(--warning-border); }
.icon-badge--danger,.icon-badge--red { color:var(--tone-red-text); background:var(--tone-red-bg); border-color:var(--danger-border); }
.icon-badge--neutral { color:var(--neutral-text); background:var(--neutral-bg); border-color:var(--neutral-border); }
.tab-list,.admin-user-tabs { background:var(--bg-soft); border-color:var(--border-default); }
.admin-user-tab { color:var(--text-secondary); }
.admin-user-tab.active { color:var(--primary); }
.ttc-tab-button { color:var(--text-secondary); }
.ttc-tab-button.active { color:var(--text-on-accent); background:var(--primary); }
.report-tab { color:var(--text-secondary); }
.report-tab.active { color:var(--text-on-accent); background:var(--primary); }
.renew-total { color:var(--primary); background:var(--primary-soft); }
.compact-date,.filter-select { color-scheme:inherit; }

/* Final shared UI normalization: tokens -> components -> pages. */
:where(button,a,input,select,textarea,summary):focus-visible { outline:2px solid var(--border-focus); outline-offset:2px; }
:where(.btn-primary,.btn-secondary,.btn-outline,.btn-ghost,.btn-danger,.table-action-button,.compact-button,.icon-button) { min-height:40px; touch-action:manipulation; transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease; }
:where(.btn-primary,.btn-secondary,.btn-outline,.btn-ghost,.btn-danger,.table-action-button,.compact-button,.icon-button)>svg { display:block; flex:0 0 18px; width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
:where(.btn-primary,.btn-secondary,.btn-outline,.btn-ghost,.btn-danger,.table-action-button,.compact-button):disabled { color:var(--text-disabled); cursor:not-allowed; opacity:.58; }
.table-action-button {
  min-height:30px;
  padding:5px 9px;
  color:var(--text-secondary);
  background:var(--bg-control);
  border:1px solid var(--border-default);
  border-radius:8px;
  text-decoration:none;
}
.table-action-button:hover {
  color:var(--primary);
  background:var(--bg-hover);
  border-color:var(--border-interactive);
  text-decoration:none;
}
.table-action-button.danger-action { color:var(--danger-text); background:var(--danger-bg); border-color:var(--danger-border); }
.table-action-button.danger-action:hover { color:var(--danger-text); border-color:var(--danger); }
.inline-actions { gap:6px; }
.form-control::placeholder { color:var(--input-placeholder); opacity:1; }
.form-control:hover,.filter-select:hover { border-color:var(--input-border-hover); }
.form-control:focus,.filter-select:focus { border-color:var(--input-border-focus); box-shadow:var(--shadow-focus); }
.field-helper { color:var(--text-muted); line-height:1.5; }
.data-table th { color:var(--text-secondary); background:var(--table-header-bg); }
.data-table tbody tr { transition:background-color .14s ease; }
.pagination-controls button { min-width:34px; }
.customer-detail-data-sections { display:grid; gap:18px; min-width:0; }
.customer-detail-data-sections>.admin-card { min-width:0; }
.report-summary-panel { min-height:0; }
.report-summary-scroll { max-height:520px; overflow:auto; scrollbar-gutter:stable; }
.settings-section { display:grid; gap:16px; padding:18px; border:1px solid var(--border-default); border-radius:12px; background:var(--bg-soft); }
.settings-section-head h3 { margin:0; color:var(--text-primary); }
.settings-section-head p { margin:5px 0 0; color:var(--text-muted); font-size:13px; }
.log-meta-grid { color:var(--text-primary); background:var(--bg-soft); border-color:var(--border-default); }
.log-json-section h4 { color:var(--text-primary); }
.json-block { color:var(--text-secondary); background:var(--bg-soft); border-color:var(--border-default); }
.old-value { color:var(--danger-text); }.new-value { color:var(--success-text); }
.log-technical-details { margin-top:14px; padding:12px; border:1px solid var(--border-default); border-radius:10px; background:var(--bg-soft); }
.log-technical-details summary { color:var(--text-secondary); font-weight:700; cursor:pointer; }
.log-technical-details[open] summary { margin-bottom:10px; color:var(--text-primary); }
.log-detail-summary { display:grid; gap:8px; margin-bottom:16px; padding:16px; border:1px solid var(--border-default); border-radius:12px; background:var(--bg-card); }
.log-detail-summary .status-badge,.log-business-activity .status-badge { width:max-content; }
.log-detail-summary h3 { margin:0; color:var(--text-primary); font-size:18px; line-height:1.4; }
.log-detail-summary p { margin:0; color:var(--text-secondary); font-size:13px; line-height:1.55; }
.log-business-activity { display:grid; gap:6px; min-width:0; }
.log-business-activity strong { color:var(--text-primary); font-size:13px; font-weight:700; line-height:1.5; overflow-wrap:anywhere; }
.log-business-activity>span:not(.status-badge) { color:var(--text-secondary); font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
.log-technical-inline { width:max-content; max-width:100%; padding:2px 6px; color:var(--text-muted); background:var(--bg-soft); border-radius:5px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10px; overflow-wrap:anywhere; }
.log-actor { display:grid; gap:3px; min-width:0; }
.log-actor strong { color:var(--text-primary); font-size:13px; line-height:1.4; overflow-wrap:anywhere; }
.log-actor span { color:var(--text-muted); font-size:12px; }
.log-change-section { margin-top:16px; }
.log-diff-table td { vertical-align:top; }
.log-diff-table .old-value,.log-diff-table .new-value { max-width:320px; white-space:normal; overflow-wrap:anywhere; }
.logs-table { table-layout:fixed; min-width:820px; }
.logs-table th,.logs-table td { vertical-align:top; }
.logs-table th:nth-child(1) { width:56%; }
.logs-table th:nth-child(2) { width:20%; }
.logs-table th:nth-child(3) { width:14%; }
.logs-table th:nth-child(4) { width:10%; }
.log-detail-cell { min-width:0; }
.log-time { display:grid; gap:2px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.log-time span:last-child { color:var(--text-muted); }
.logs-mobile-list { display:none; }

@media(max-width:700px) {
  .logs-table-card { display:none; }
  .logs-mobile-list { display:grid; gap:10px; }
  .log-mobile-card { display:grid; min-width:0; gap:9px; padding:14px; border:1px solid var(--border-default); border-radius:12px; background:var(--bg-card); box-shadow:var(--shadow-card); }
  .log-mobile-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
  .log-mobile-card-head .status-badge { flex-shrink:0; }
  .log-mobile-time { color:var(--text-muted); font-size:12px; white-space:nowrap; font-variant-numeric:tabular-nums; }
  .log-mobile-target { min-width:0; color:var(--text-primary); overflow-wrap:break-word; }
  .log-mobile-change { color:var(--text-secondary); font-size:13px; }
  .log-mobile-footer { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:2px; color:var(--text-muted); font-size:12px; }
  .log-mobile-card .table-action-button { flex-shrink:0; min-height:40px; }
  .log-business-meta { grid-template-columns:1fr; }
}

/* Shared layout rhythm: page sections -> cards -> headings -> form fields. */
.page-content > .page-header { margin-bottom:var(--space-major); }
.page-content > :where(.notice,.stats-grid,.dashboard-grid,.admin-grid,.toolbar,.filter-panel,.table-card,.kiosk-grid,.report-tabs,.report-content) { margin-bottom:var(--space-card); }
:where(.logs-page,.settings-page,.customer-detail-data-sections) { display:grid; gap:var(--space-card); }
:where(.logs-page,.settings-page) > :where(.page-header,.toolbar,.table-card,.pagination-bar) { margin-block:0; }
:where(.dashboard-grid,.admin-grid,.stats-grid,.kiosk-grid):not(.ttc-shell *) { gap:var(--space-card); }
:where(.dash-card-header,.settings-section-head,.payment-section-heading):not(.ttc-shell *) { margin-bottom:var(--space-heading); }
:where(.form-grid,.form-row,.modal-form):not(.ttc-shell *) { gap:var(--space-form); }
.form-group:not(.ttc-shell *) { margin-bottom:var(--space-form); }
.form-grid .form-group:not(.ttc-shell *),.form-row .form-group:not(.ttc-shell *),.toolbar .form-group:not(.ttc-shell *),.modal-form .form-group:not(.ttc-shell *) { margin-bottom:0; }
.public-site :where(.portal-section,.member-banner,.registration-card,.public-support) + :where(.portal-section,.member-banner,.registration-card,.public-support) { margin-top:var(--space-major); }

@media(max-width:640px) {
  .pagination-bar { display:flex; align-items:center; flex-direction:column; gap:10px; }
  .pagination-meta { order:2; width:100%; justify-content:center; flex-wrap:wrap; }
  .pagination-controls { order:1; width:100%; justify-content:center; flex-direction:row; align-items:center; }
  .pagination-pages { display:none; }
  .pagination-mobile-count { display:inline-block; }
  .pagination-controls .pagination-button { width:38px; min-width:38px; height:38px; }
  .pagination-controls .filter-select { width:auto; }
}
.facebook-id-resolver[data-auto-resolve="true"] .resolver-secondary-fields { display:none; }
.facebook-id-resolver[data-auto-resolve="true"][data-resolver-state="invalid-url"] .resolver-secondary-fields,
.facebook-id-resolver[data-auto-resolve="true"][data-resolver-state="not-found"] .resolver-secondary-fields,
.facebook-id-resolver[data-auto-resolve="true"][data-resolver-state="timeout"] .resolver-secondary-fields,
.facebook-id-resolver[data-auto-resolve="true"][data-resolver-state="upstream-error"] .resolver-secondary-fields { display:grid; }
.facebook-id-resolver[data-auto-resolve="true"] .field-helper { margin-top:4px; }

/* Public registration V2 */
.registration-v2 { width:min(1020px,calc(100% - 40px)); }
.registration-wizard { padding:32px; overflow:hidden; border:1px solid var(--border-default); border-radius:20px; box-shadow:var(--shadow-card); }
.registration-wizard .registration-stepper { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; width:min(100%,760px); margin:0 auto 38px; padding:0; list-style:none; }
.registration-wizard .registration-step { position:relative; display:grid; justify-items:center; gap:9px; min-width:0; color:var(--text-muted); text-align:center; }
.registration-wizard .registration-step:not(:last-child)::after { content:""; position:absolute; z-index:0; top:17px; left:calc(50% + 24px); width:calc(100% - 48px); height:2px; background:var(--border-default); }
.registration-wizard .registration-step span { z-index:1; display:grid; flex:0 0 36px; width:36px; height:36px; place-items:center; color:var(--text-secondary); background:var(--bg-muted); border:1px solid var(--border-strong); border-radius:50%; font-weight:800; }
.registration-wizard .registration-step strong { z-index:1; color:inherit; font-size:13px; line-height:1.3; white-space:nowrap; }
.registration-wizard .registration-step.active { color:var(--primary); }
.registration-wizard .registration-step.active span { color:var(--text-inverse); background:var(--primary); border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-soft); }
.registration-wizard .registration-step.completed span { color:var(--success-text); background:var(--success-bg); border-color:var(--success-border); }
.registration-panel { display:grid; gap:18px; padding:0; border:0; }
.registration-panel-header { display:flex; align-items:flex-start; gap:10px; margin-bottom:0; }
.registration-panel-icon,.registration-section-icon { display:grid; flex:0 0 34px; width:34px; height:34px; place-items:center; color:var(--primary); background:var(--primary-soft); border-radius:10px; }
.registration-panel-icon svg,.registration-section-icon svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.registration-section-icon { flex-basis:40px; width:40px; height:40px; border-radius:11px; }
.registration-section-icon svg { width:21px; height:21px; }
.registration-panel-header small { color:var(--primary); font-size:10.5px; font-weight:650; line-height:1.2; letter-spacing:.09em; }
.registration-panel-header h2 { margin:2px 0 3px; color:var(--text-primary); font-size:18px; font-weight:700; line-height:1.25; }
.registration-panel-header p { margin:0; color:var(--text-secondary); font-size:14px; font-weight:400; line-height:1.4; }
.registration-v2 .facebook-id-resolver { padding:18px; background:var(--bg-muted); border:1px solid var(--border-default); border-radius:16px; }
.registration-v2 input[readonly] { background:var(--bg-muted); }
.registration-v2 .facebook-id-resolver[data-auto-resolve="true"][data-resolver-state="success"] .resolver-secondary-fields { display:grid; }
.facebook-identity-summary { display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; margin-top:12px; padding:15px 16px; color:var(--text-primary); background:var(--success-bg); border:1px solid var(--success-border); border-radius:13px; }
.facebook-identity-summary>div { display:grid; gap:4px; min-width:0; }
.facebook-identity-icon { display:grid; width:38px; height:38px; place-items:center; color:var(--success); background:var(--bg-surface); border-radius:50%; }
.facebook-identity-icon svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.9; }
.facebook-identity-summary strong { color:var(--success-text); }
.facebook-identity-summary b { font-size:16px; }
.facebook-identity-summary small { color:var(--text-secondary); overflow-wrap:anywhere; }
.facebook-id-resolver[data-resolver-state="success"] input[readonly] { color:var(--text-primary); background:var(--bg-surface); border-color:var(--success-border); opacity:1; }
.public-kiosk-card { display:grid; gap:22px; margin-bottom:20px; padding:24px; background:var(--bg-surface); border:1px solid var(--border-default); border-radius:16px; box-shadow:var(--shadow-surface); }
.kiosk-card-header { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:16px; }
.kiosk-card-header>div { display:grid; min-width:0; gap:2px; }
.public-kiosk-card .kiosk-card-header span { color:var(--text-primary); font-size:19px; font-weight:800; }
.kiosk-card > .kiosk-card-header > .status-badge { align-self:start; flex:0 0 auto; flex-shrink:0; min-height:19px; padding:3px 7px; border-radius:7px; font-size:11px; font-weight:600; line-height:1.15; }
.kiosk-card > .kiosk-card-header > .status-badge .status-dot { width:5px; height:5px; }
.kiosk-card-header small { color:var(--text-muted); }
.kiosk-facebook-section { display:grid; gap:14px; padding:15px; background:var(--primary-soft); border:1px solid color-mix(in srgb,var(--primary) 22%,var(--border-default)); border-radius:13px; }
.reuse-customer-toggle { display:flex; align-items:flex-start; gap:11px; cursor:pointer; }
.reuse-customer-toggle input { width:19px; height:19px; margin-top:2px; accent-color:var(--primary); }
.reuse-customer-toggle span,.customer-identity-preview { display:grid; gap:3px; }
.reuse-customer-toggle strong { color:var(--text-primary); }
.reuse-customer-toggle small,.customer-identity-preview small { color:var(--text-secondary); }
.customer-identity-preview { margin-left:30px; padding:11px 13px; background:var(--bg-surface); border:1px solid var(--border-default); border-radius:10px; }
.business-discovery { display:grid; gap:12px; }
.business-search-field { margin:0; }
.business-search-field>span:first-child { font-size:17px; }
.business-search-control { position:relative; display:block; margin-top:2px; }
.business-search-control>svg { position:absolute; z-index:1; top:50%; left:14px; width:20px; height:20px; color:var(--text-muted); fill:none; stroke:currentColor; stroke-width:1.8; transform:translateY(-50%); pointer-events:none; }
.business-search-control .form-control { min-height:50px; padding-left:44px; }
.business-search-field .field-helper { display:block; margin-top:8px; line-height:1.5; }
.business-suggestions { display:grid; gap:8px; }
.business-suggestion-heading { margin:0 0 2px; color:var(--text-secondary); font-size:13px; font-weight:700; }
.business-suggestion { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:14px; width:100%; min-height:84px; padding:14px 16px; color:var(--text-primary); text-align:left; background:var(--bg-surface); border:1px solid var(--border-default); border-radius:13px; cursor:pointer; transition:border-color .18s ease,background .18s ease,transform .18s ease; }
.business-suggestion:hover,.business-suggestion:focus-visible { background:var(--primary-soft); border-color:var(--primary); outline:0; }
.business-suggestion:active { transform:scale(.995); }
.business-suggestion-icon { display:grid; width:40px; height:40px; place-items:center; color:var(--primary); background:var(--primary-soft); border-radius:11px; }
.business-suggestion-icon svg,.business-suggestion-action svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.business-suggestion-copy { display:grid; gap:3px; }
.business-suggestion small { color:var(--text-secondary); }
.business-suggestion-action { display:grid; justify-items:end; gap:7px; color:var(--primary); }
.business-suggestion-action b { font-size:13px; white-space:nowrap; }
.business-suggestion-action em { display:flex; align-items:center; gap:2px; font-size:12px; font-style:normal; font-weight:800; }
.business-suggestion-action svg { width:14px; height:14px; }
.business-empty { padding:14px; color:var(--warning-text); background:var(--warning-bg); border:1px solid var(--warning-border); border-radius:12px; }
.business-empty p { margin:5px 0 0; line-height:1.5; }
.business-manual-toggle { width:max-content; padding:4px 0; color:var(--primary); background:none; border:0; font-weight:750; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.business-selection { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:15px; background:var(--success-bg); border:1px solid var(--success-border); border-radius:13px; }
.business-selection>div { display:grid; gap:3px; }
.business-selection span { color:var(--text-secondary); font-size:12px; }
.business-selection strong { color:var(--text-primary); }
.business-selection p { display:flex; grid-column:1/-1; gap:7px; align-items:flex-start; margin:2px 0 0; color:var(--warning-text); font-size:13px; line-height:1.45; }
.business-selection-warning-icon svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; }
.business-selection>button { grid-column:1/-1; width:max-content; padding:0; color:var(--primary); background:none; border:0; font-weight:750; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.registration-month-control { display:grid; gap:10px; margin:0; padding:18px; background:var(--bg-muted); border:1px solid var(--border-default); border-radius:14px; }
.registration-month-control legend { display:flex; align-items:center; gap:8px; padding:0 4px; color:var(--text-primary); font-weight:750; }
.registration-month-control legend svg { width:19px; height:19px; color:var(--primary); fill:none; stroke:currentColor; stroke-width:1.8; }
.month-stepper { display:grid; grid-template-columns:46px minmax(150px,220px) 46px; gap:8px; align-items:center; }
.month-stepper>button { width:46px; height:46px; color:var(--primary); background:var(--bg-surface); border:1px solid var(--border-strong); border-radius:11px; font-size:22px; cursor:pointer; }
.month-stepper>button:hover { background:var(--primary-soft); border-color:var(--primary); }
.month-stepper>button:focus-visible { outline:3px solid color-mix(in srgb,var(--primary) 30%,transparent); outline-offset:2px; }
.month-stepper label { position:relative; display:block; }
.month-stepper input { min-height:46px; padding-right:64px; text-align:center; font-weight:800; font-variant-numeric:tabular-nums; }
.month-stepper label span { position:absolute; top:50%; right:15px; color:var(--text-secondary); transform:translateY(-50%); pointer-events:none; }
.registration-month-control [data-price-equation] { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0; color:var(--text-secondary); }
.registration-month-control [data-price-equation] strong { color:var(--primary); font-size:17px; font-variant-numeric:tabular-nums; }
.registration-order-summary,.review-total { display:grid; gap:12px; padding:20px; background:var(--bg-muted); border:1px solid var(--border-default); border-radius:16px; }
.registration-order-summary>div,.review-total>div { display:flex; justify-content:space-between; gap:20px; color:var(--text-secondary); }
.registration-order-summary .form-group { margin-bottom:8px; }
.discount-row { display:grid; grid-template-columns:1fr auto; gap:8px; }
.registration-grand-total,.review-total>div:last-child { padding-top:13px; color:var(--text-primary); border-top:1px solid var(--border-strong); font-weight:800; }
.registration-grand-total strong,.review-total>div:last-child strong { color:var(--success); font-size:20px; }
.review-section { margin-bottom:18px; padding:18px; border:1px solid var(--border-default); border-radius:15px; }
.review-section h3,.review-total h3 { display:flex; align-items:center; gap:10px; margin:0 0 14px; color:var(--text-primary); font-size:17px; }
.review-section .registration-section-icon,.review-total .registration-section-icon { flex-basis:34px; width:34px; height:34px; border-radius:9px; }
.review-section .registration-section-icon svg,.review-total .registration-section-icon svg { width:18px; height:18px; }
.review-section dl { display:grid; gap:10px; margin:0; }
.review-section dl>div { display:grid; grid-template-columns:130px 1fr; gap:14px; }
.review-section dt { color:var(--text-muted); }
.review-section dd { margin:0; color:var(--text-primary); font-weight:650; overflow-wrap:anywhere; }
.review-kiosk { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:5px 16px; padding:13px 0; border-bottom:1px solid var(--border-default); }
.review-kiosk:last-child { border-bottom:0; }
.review-kiosk strong,.review-kiosk span { grid-column:1; }
.review-kiosk span { color:var(--text-secondary); font-size:13px; }
.review-kiosk b { grid-column:2; grid-row:1/4; align-self:center; color:var(--primary); }
.registration-confirmation { align-items:flex-start; padding:16px; background:var(--warning-bg); border:1px solid var(--warning-border); border-radius:13px; }
.registration-confirmation small { display:block; margin-top:6px; color:var(--text-secondary); line-height:1.45; }
.classification-warning { display:flex; align-items:flex-start; gap:12px; padding:16px; color:var(--warning-text); background:var(--warning-bg); border:1px solid var(--warning-border); border-radius:13px; }
.classification-warning .registration-section-icon { color:var(--warning); background:color-mix(in srgb,var(--warning) 12%,transparent); }
.classification-warning p { margin:6px 0 0; line-height:1.5; }
.registration-wizard :where(.btn-primary,.btn-secondary,.btn-danger-subtle) { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; border-radius:10px; font-weight:750; transition:background .18s ease,border-color .18s ease,transform .18s ease; }
.registration-wizard :where(.btn-primary,.btn-secondary,.btn-danger-subtle) svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.registration-wizard .btn-primary { color:var(--text-inverse); background:var(--primary); box-shadow:0 8px 20px color-mix(in srgb,var(--primary) 18%,transparent); }
.registration-wizard .btn-primary:hover { background:var(--primary-hover); transform:translateY(-1px); }
.registration-wizard .btn-secondary { color:var(--text-primary); background:var(--bg-surface); border-color:var(--border-strong); }
.btn-danger-subtle { padding:8px 11px; color:var(--danger); background:var(--danger-bg); border:1px solid var(--danger-border); cursor:pointer; }
.registration-wizard .register-add-kiosk-bottom { width:100%; min-height:50px; color:var(--primary); background:var(--primary-soft); border:1px dashed var(--primary); }
.registration-secure-note { display:flex; align-items:center; justify-content:flex-end; gap:6px; margin:-10px 2px 0; color:var(--text-muted); font-size:12px; }
.registration-secure-note svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; }
.modal-facebook-help { width:min(640px,calc(100vw - 32px)); }

@media(max-width:620px) {
  .registration-v2 { width:min(100% - 24px,880px); padding-top:28px; }
  .registration-wizard { padding:18px 14px; border-radius:17px; }
  .registration-wizard .registration-stepper { gap:4px; margin-bottom:26px; }
  .registration-wizard .registration-step { gap:7px; }
  .registration-wizard .registration-step:not(:last-child)::after { top:15px; left:calc(50% + 20px); width:calc(100% - 40px); }
  .registration-wizard .registration-step span { flex-basis:32px; width:32px; height:32px; }
  .registration-wizard .registration-step strong { max-width:96px; font-size:11px; white-space:normal; }
  .registration-panel { gap:16px; }
  .registration-panel-header { gap:9px; }
  .registration-panel-icon { flex-basis:32px; width:32px; height:32px; }
  .registration-panel-icon svg { width:18px; height:18px; }
  .registration-panel-header small { font-size:10px; }
  .registration-panel-header h2 { margin-block:2px; font-size:17px; line-height:1.25; }
  .registration-panel-header p { font-size:13px; line-height:1.4; }
  .public-kiosk-card { padding:16px 13px; }
  .business-suggestion { grid-template-columns:auto minmax(0,1fr); align-items:start; }
  .business-suggestion-action { grid-column:2; justify-items:start; }
  .business-selection { grid-template-columns:1fr; }
  .month-stepper { grid-template-columns:44px minmax(130px,1fr) 44px; }
  .business-selection p,.business-selection>button { grid-column:1; }
  .customer-identity-preview { margin-left:0; }
  .discount-row { grid-template-columns:1fr; }
  .discount-row .btn-secondary { width:100%; }
  .review-section dl>div { grid-template-columns:1fr; gap:3px; }
  .review-kiosk { grid-template-columns:1fr; }
  .review-kiosk b { grid-column:1; grid-row:auto; margin-top:4px; }
  .registration-actions .registration-cta { width:100%; }
  .registration-secure-note { justify-content:center; }
  .btn-danger-subtle span { display:none; }
}
@media(max-width:640px){:where(.btn-primary,.btn-secondary,.btn-outline,.btn-ghost,.btn-danger,.table-action-button,.compact-button,.icon-button){min-height:44px}.field-label-row{align-items:flex-start;flex-direction:column}.fb-help-trigger-btn{min-height:32px;text-align:left}.report-summary-scroll{max-height:440px}.settings-section{padding:14px}.modal{width:calc(100% - 24px);max-height:calc(100dvh - 24px)}}

/* Public form controls use explicit semantic states in both themes. */
.public-site .checkbox-field,
.public-site .legacy-mode-picker label {
  color:var(--text-secondary);
}
.public-site .checkbox-field:has(input:checked),
.public-site .legacy-mode-picker label:has(input:checked) {
  color:var(--text-primary);
}
.public-site .checkbox-field:has(input:disabled),
.public-site .legacy-mode-picker label:has(input:disabled) {
  color:var(--text-disabled);
  cursor:not-allowed;
}
.public-site .checkbox-field input,
.public-site .legacy-mode-picker input {
  accent-color:var(--primary);
}
.public-site .checkbox-field input:disabled,
.public-site .legacy-mode-picker input:disabled { opacity:.58; }
.public-site .checkbox-field a,
.public-site .legacy-mode-picker a { color:var(--text-link); }
.public-site .legacy-mode-picker { color:var(--text-secondary); background:var(--bg-soft); border-color:var(--border-default); }
.public-site .legacy-mode-picker legend { color:var(--text-primary); }
.public-site .legacy-copy-toggle { color:var(--text-primary); background:var(--primary-soft); border-color:var(--info-border); }
.public-site .legacy-resolver-status { color:var(--text-secondary); background:var(--bg-soft); border-color:var(--border-default); }
.public-site .legacy-resolver-status.loading { color:var(--info-text); }
.public-site .legacy-resolver-status.success { color:var(--success-text); }
.public-site .legacy-resolver-status.error { color:var(--danger-text); }
.public-site .public-renew-duration label:has(input:disabled) span { color:var(--text-disabled); background:var(--bg-soft); border-color:var(--border-default); cursor:not-allowed; }

@media(max-width:640px) {
  .modal-facebook-help { width:calc(100% - 8px); }
  .modal-facebook-help .modal-header { padding:16px 17px; }
  .modal-facebook-help .modal-body { padding:18px 17px 20px; }
  .fb-help-modal-flow { gap:11px; }
  .fb-help-step { gap:11px; padding:13px; }
  .fb-step-badge { width:28px; height:28px; }
  .fb-help-example { padding:13px; }
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto;animation-duration:.01ms;animation-iteration-count:1;transition-duration:.01ms}}
.kiosk-edit-section{display:grid;gap:12px;margin:0;padding:16px;border:1px solid var(--border-default);border-radius:12px;background:var(--bg-soft)}
.kiosk-edit-section>.form-section-title{margin:0}.kiosk-edit-section>.field-helper{margin:-6px 0 2px}
.promotion-message{display:block;margin-top:.5rem;font-size:.875rem}.promotion-valid,.promotion-bonus{color:var(--success-text)}.promotion-invalid{color:var(--danger-text)}.promotion-bonus{font-weight:700}.btn-link{border:0;background:transparent;color:var(--danger-text);padding:.4rem 0;cursor:pointer;text-decoration:underline}
.promotion-form-modal{width:min(760px,100%);max-height:min(90dvh,860px)}.promotion-form-modal .modal-header{flex:0 0 auto;padding:18px 24px}.promotion-form-modal .modal-header h3{font-size:21px;line-height:1.25}.promotion-form-modal .modal-body{padding:0 24px}.promotion-form{display:grid;gap:0}.promotion-form-intro{margin:0;padding:16px 0;color:var(--text-secondary);font-size:13px}.promotion-form-section{display:grid;gap:14px;padding:20px 0;border-top:1px solid var(--border-default)}.promotion-form-section>header{display:flex;align-items:flex-start;gap:11px}.promotion-form-section>header>span{display:grid;place-items:center;flex:0 0 26px;width:26px;height:26px;border-radius:8px;color:var(--primary);background:var(--primary-soft);font-size:12px;font-weight:800}.promotion-form-section h3{margin:1px 0 3px;color:var(--text-primary);font-size:17px;line-height:1.3}.promotion-form-section header p{margin:0;color:var(--text-secondary);font-size:12px;line-height:1.45}.promotion-form-grid{display:grid;gap:14px 16px}.promotion-form-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}.promotion-grid-full{grid-column:1/-1}.promotion-form .form-group{gap:6px;margin:0}.promotion-form .form-group>span:first-child{font-size:13px}.promotion-form :where(input.form-control,select.form-control){min-height:42px;border-radius:9px}.promotion-form textarea.form-control{min-height:76px;border-radius:9px;resize:vertical}.promotion-form .form-group small{color:var(--text-secondary);font-size:12px;line-height:1.4}.promotion-code-control{position:relative}.promotion-code-control>span{position:absolute;z-index:1;left:12px;top:50%;width:16px;height:16px;color:var(--text-secondary);transform:translateY(-50%)}.promotion-code-control>span svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}.promotion-code-control>span+input{padding-left:38px;background:var(--bg-soft);color:var(--text-secondary)}.scope-picker{display:grid;gap:10px}.scope-selected{display:flex;flex-wrap:wrap;gap:7px;min-height:25px;align-items:center}.scope-selected>small{color:var(--text-secondary);font-size:12px}.scope-chip{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:4px 8px;border:1px solid var(--primary);border-radius:999px;color:var(--primary);background:var(--primary-soft);font-size:12px;cursor:pointer}.scope-chip b{font-size:16px;line-height:1}.scope-options{display:grid;gap:2px;max-height:190px;overflow:auto;padding:4px;border:1px solid var(--border-default);border-radius:9px;background:var(--bg-surface)}.scope-option{display:flex;gap:10px;align-items:flex-start;padding:8px;border-radius:7px;cursor:pointer}.scope-option:hover,.scope-option:has(input:checked){background:var(--primary-soft)}.scope-option input{margin-top:3px;accent-color:var(--primary)}.scope-option span{display:grid;gap:2px;font-size:13px}.scope-option small{color:var(--text-secondary)}.promotion-form-actions{position:sticky;z-index:2;bottom:0;margin:0 -24px;padding:14px 24px;border-top:1px solid var(--border-default);background:var(--bg-surface);box-shadow:0 -8px 20px color-mix(in srgb,var(--bg-surface) 75%,transparent)}.promotion-row-actions{flex-wrap:wrap;min-width:240px}.promotion-delete-dialog{display:flex;gap:14px;align-items:flex-start}.promotion-delete-dialog p{margin:0 0 7px}.promotion-delete-icon{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:10px;color:var(--danger);background:var(--danger-bg)}.promotion-delete-icon svg,.promotion-delete-modal .btn-danger svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8}.promotion-delete-modal .btn-danger{display:inline-flex;align-items:center;gap:8px}.promotion-delete-modal .form-error{white-space:pre-line}.promotion-analytics .stats-grid{margin-top:16px}
.promotion-input-with-suffix{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:stretch}.promotion-input-with-suffix>.form-control{border-radius:8px 0 0 8px}.promotion-input-with-suffix>span{display:flex;align-items:center;padding:0 12px;border:1px solid var(--border-default);border-left:0;border-radius:0 8px 8px 0;background:var(--bg-surface);color:var(--text-secondary);font-size:13px;font-weight:700;white-space:nowrap}.promotion-value-field small{line-height:1.45;color:var(--text-secondary)}
@media(max-width:640px){.promotion-form-modal{width:calc(100% - 24px);max-height:calc(100dvh - 24px)}.promotion-form-modal .modal-header{padding:16px}.promotion-form-modal .modal-body{padding:0 16px}.promotion-form-grid--2{grid-template-columns:1fr}.promotion-grid-full{grid-column:auto}.promotion-form-section{padding:17px 0}.promotion-form-actions{margin:0 -16px;padding:12px 16px}.promotion-row-actions{min-width:0}}

/* Public Website V3 — presentation-only primitives shared by all public routes. */
.public-site{--public-content:min(1120px,calc(100% - 40px));--public-radius:16px;--public-shadow:0 12px 34px color-mix(in srgb,var(--text-primary) 7%,transparent);background:linear-gradient(180deg,var(--primary-soft) 0,transparent 260px),var(--bg-page)}
.portal-nav-wrap{width:var(--public-content);min-height:60px}.portal-header{background:color-mix(in srgb,var(--bg-surface) 94%,transparent)}.portal-theme-button,.portal-menu-button{width:42px;height:42px}.portal-theme-button span,.portal-theme-button svg{display:block;width:19px;height:19px;margin:auto;fill:none;stroke:currentColor;stroke-width:1.8}.portal-nav a{min-height:42px;display:inline-flex;align-items:center;padding:8px 11px}
.portal-home,.portal-page{width:var(--public-content)}.portal-hero{grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);column-gap:56px;padding:60px 0}.portal-hero h1{font-size:clamp(32px,4vw,48px);line-height:1.12}.portal-hero-copy>p{max-width:590px;margin:18px 0 24px;font-size:16px}.portal-hero-visual{width:clamp(280px,30vw,390px)}.portal-section{padding:58px 0}.portal-section-heading h2,.member-banner h2,.portal-page-heading h1{font-size:clamp(26px,3vw,36px)}
.service-card{min-height:0;padding:24px;border-radius:var(--public-radius);box-shadow:var(--shadow-surface)}.service-card-icon{display:grid;width:44px;height:44px;place-items:center;margin-bottom:18px;color:var(--primary);background:var(--primary-soft);border-radius:12px}.service-card-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8}.service-card h3{font-size:17px}.service-card a{display:inline-flex;align-items:center;gap:5px}.service-card a svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.public-form-flow{width:min(900px,calc(100% - 40px));padding-top:42px}.public-form-flow>.page-header h1{font-size:clamp(26px,3vw,32px)}.registration-wizard{padding:28px;border-radius:var(--public-radius);box-shadow:var(--public-shadow)}.public-kiosk-card{padding:22px;border-radius:var(--public-radius);box-shadow:none}.registration-v2 .facebook-id-resolver{padding:16px;border-radius:12px}.business-suggestion{min-height:72px;padding:12px 14px}.business-selection{grid-template-columns:minmax(0,1fr) auto;align-items:center;padding:14px}.business-selection-primary{display:grid;gap:3px}.business-selection-primary small{color:var(--text-secondary)}.business-selection>button{grid-column:2;grid-row:1}.registration-order-summary,.review-total{border-radius:14px}.registration-order-summary>div.hidden{display:none}.classification-warning{padding:14px}.classification-warning p{font-size:13px}.review-section{box-shadow:none}
.public-input-icon{position:relative;display:block}.public-input-icon>svg{position:absolute;z-index:1;left:14px;top:50%;width:19px;height:19px;color:var(--text-muted);fill:none;stroke:currentColor;stroke-width:1.8;transform:translateY(-50%)}.public-input-icon input{padding-left:43px}.lookup-form button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px}.lookup-form button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9}.lookup-card{box-shadow:var(--shadow-surface)}.lookup-card-heading{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;margin-bottom:18px}.lookup-card-heading>span:first-child{display:grid;width:42px;height:42px;place-items:center;color:var(--primary);background:var(--primary-soft);border-radius:11px}.lookup-card-heading>span:first-child svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8}.lookup-card-heading h2{margin:2px 0}.lookup-card-heading small{color:var(--text-muted)}.lookup-card dl{grid-template-columns:repeat(3,minmax(0,1fr))}
.legacy-registration-v3{width:min(900px,calc(100% - 40px))}.legacy-registration-v3 .legacy-registration-card{padding:28px;border-radius:var(--public-radius);box-shadow:var(--public-shadow)}.legacy-stepper{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0 0 24px;padding:0;list-style:none}.legacy-stepper .registration-step{display:grid;justify-items:center;gap:7px;color:var(--text-secondary);font-size:12px;text-align:center}.legacy-stepper .registration-step span{display:grid;width:32px;height:32px;place-items:center;color:var(--text-inverse);background:var(--primary);border-radius:50%;font-weight:800}.legacy-flow-section{margin-top:24px;padding-top:24px;border-top:1px solid var(--border-default)}.legacy-registration-v3 .legacy-kiosk-card{box-shadow:none}.legacy-scope-notice{padding:13px 15px}
.public-site .auth-main-grid{grid-template-columns:minmax(260px,.72fr) minmax(380px,1fr);max-width:900px}.public-site .auth-story-media{height:170px}.public-site .auth-story-content{padding:22px}.public-site .auth-account-panel{padding:26px}.public-site .auth-panel-heading h2{font-size:22px}
.payment-experience{width:min(680px,100%);margin-inline:auto}.payment-status-hero h2{font-size:clamp(22px,3vw,28px)}.payment-summary-card{border-radius:var(--public-radius)}
@media(max-width:900px){.portal-hero{grid-template-columns:1fr;gap:30px;padding:46px 0}.portal-hero-visual{width:min(70vw,320px)}.public-site .auth-main-grid{grid-template-columns:1fr}.public-site .auth-story-panel{display:none}}
@media(max-width:620px){.public-site{--public-content:calc(100% - 24px)}.portal-nav-wrap,.portal-home,.portal-page,.public-form-flow,.registration-v2,.legacy-registration-v3{width:var(--public-content)}.portal-hero{padding:34px 0 40px}.portal-hero h1{font-size:clamp(30px,8.5vw,36px)}.portal-hero-actions{display:grid}.portal-hero-actions a{width:100%;justify-content:center;min-height:46px}.portal-hero-visual{width:min(72vw,280px)}.portal-section{padding:42px 0}.registration-wizard,.legacy-registration-v3 .legacy-registration-card{padding:18px 14px}.public-kiosk-card{padding:16px 13px}.business-suggestion-icon{display:none}.business-suggestion{grid-template-columns:minmax(0,1fr)}.business-suggestion-action{grid-column:1;display:flex;justify-content:space-between;align-items:center}.business-selection{grid-template-columns:1fr}.business-selection>button{grid-column:1;grid-row:auto}.lookup-form{padding:16px}.lookup-form button{width:100%}.lookup-card{padding:18px}.lookup-card-heading{grid-template-columns:auto minmax(0,1fr)}.lookup-card-heading>.status-badge{grid-column:2}.lookup-card dl{grid-template-columns:1fr}.legacy-stepper .registration-step strong{font-size:11px}.public-site .auth-account-panel{padding:18px}.payment-progress strong{font-size:11px}}

/* Final CRM/public semantics and action-center polish. */
.sidebar-logo{padding:14px 18px}.top-bar-context{font-weight:700}.nav-count-badge,.notification-count{display:grid;place-items:center;min-width:19px;height:19px;padding:0 5px;border-radius:999px;color:var(--text-on-accent);background:var(--danger);font-size:10px;font-weight:800;line-height:1}.nav-count-badge{margin-left:auto}.nav-item .nav-count-badge:last-child{min-width:19px;overflow:visible;white-space:nowrap}.admin-notification-center{position:relative}.admin-notification-center>summary{position:relative;cursor:pointer;list-style:none}.admin-notification-center>summary::-webkit-details-marker{display:none}.notification-count{position:absolute;top:-6px;right:-7px;border:2px solid var(--bg-header)}.admin-notification-popover{position:absolute;top:calc(100% + 10px);right:0;width:min(360px,calc(100vw - 28px));max-height:430px;overflow:auto;border:1px solid var(--border-default);border-radius:14px;background:var(--bg-surface);box-shadow:var(--shadow-overlay)}.admin-notification-popover>header{display:grid;gap:3px;padding:15px 16px;border-bottom:1px solid var(--border-default)}.admin-notification-popover>header span{color:var(--text-secondary);font-size:12px}.admin-notification-item{display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;padding:12px 15px;color:var(--text-primary);text-decoration:none;border-bottom:1px solid var(--border-default)}.admin-notification-item:hover{background:var(--bg-hover)}.admin-notification-item>span:first-child{display:grid;width:34px;height:34px;place-items:center;border-radius:9px;color:var(--primary);background:var(--primary-soft)}.admin-notification-item.is-warning>span:first-child{color:var(--warning-text);background:var(--warning-bg)}.admin-notification-item.is-danger>span:first-child{color:var(--danger-text);background:var(--danger-bg)}.admin-notification-item svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}.admin-notification-item>span:last-child{display:grid;gap:3px}.admin-notification-item small{color:var(--text-secondary);line-height:1.4}.admin-notification-empty{margin:0;padding:22px 16px;color:var(--text-secondary);text-align:center}.recent-activity-type{width:max-content;padding:2px 6px;border-radius:999px;color:var(--primary);background:var(--primary-soft);font-size:10px;font-weight:750}.report-definition{margin:0 0 14px;color:var(--text-secondary);font-size:13px}.log-technical-toggle{align-self:end;min-height:40px;margin:0}.kiosk-process-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none}.kiosk-process-grid li{display:grid;gap:13px;padding:20px;border:1px solid var(--border-default);border-radius:var(--public-radius);background:var(--bg-surface)}.kiosk-process-grid li>span{display:grid;width:40px;height:40px;place-items:center;color:var(--primary);background:var(--primary-soft);border-radius:11px}.kiosk-process-grid svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8}.kiosk-process-grid strong{font-size:16px}.kiosk-process-grid p{margin:5px 0 0;color:var(--text-secondary);font-size:13px;line-height:1.5}
@media(max-width:760px){.top-bar-context{max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kiosk-process-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.current-date{display:none}.admin-notification-popover{position:fixed;top:64px;right:12px;left:12px;width:auto}.kiosk-process-grid{grid-template-columns:1fr}.kiosk-process-grid li{grid-template-columns:40px minmax(0,1fr);padding:16px}}

/* Registration operations: request-centric payment state and Admin actions. */
.request-state-note{margin:0 0 16px;padding:13px 15px;border:1px solid var(--border-default);border-radius:10px;color:var(--text-secondary);background:var(--bg-surface);font-size:13px;line-height:1.55}.request-state-note strong{color:var(--text-primary)}
.request-toolbar .form-control{min-width:min(420px,100%)}.request-toolbar .btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--form-control-height);min-height:var(--form-control-height)}.request-table-card{overflow:auto}.request-table{min-width:1180px}.request-payment-primary,.request-payment-secondary{display:block}.request-payment-primary{color:var(--text-primary);font-weight:700}.request-payment-secondary{max-width:190px;margin-top:4px;color:var(--text-secondary);line-height:1.35}.request-actions{display:flex;flex-wrap:wrap;gap:7px}.request-actions button{min-height:40px}.registration-operation-modal{width:min(580px,calc(100% - 28px))}.operation-warning{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;padding:13px;border:1px solid var(--warning-border);border-radius:10px;color:var(--warning-text);background:var(--warning-bg)}.operation-warning svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8}.operation-warning p{margin:0;line-height:1.55}.operation-summary{display:grid;gap:0;margin:16px 0;border:1px solid var(--border-default);border-radius:10px;background:var(--bg-surface)}.operation-summary>div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;padding:11px 13px;border-bottom:1px solid var(--border-default)}.operation-summary>div:last-child{border-bottom:0}.operation-summary dt{color:var(--text-secondary)}.operation-summary dd{margin:0;color:var(--text-primary);font-weight:700}.registration-operation-modal .modal-actions button{min-height:44px}.registration-operation-modal .modal-actions .btn-danger{display:inline-flex;align-items:center;justify-content:center;gap:8px}.registration-operation-modal textarea{resize:vertical}
@media(max-width:720px){.request-toolbar{display:grid;grid-template-columns:1fr}.request-toolbar>*{width:100%}.request-table-card{overflow:visible;border:0;background:transparent;box-shadow:none}.request-table{display:block;min-width:0}.request-table thead{display:none}.request-table tbody{display:grid;gap:12px}.request-table tr{display:grid;padding:14px;border:1px solid var(--border-default);border-radius:12px;background:var(--bg-surface);box-shadow:var(--shadow-surface)}.request-table td{display:grid;grid-template-columns:minmax(108px,.38fr) minmax(0,1fr);gap:10px;padding:8px 0;border:0;border-bottom:1px solid var(--border-default);text-align:left}.request-table td:last-child{border-bottom:0}.request-table td::before{content:attr(data-label);color:var(--text-secondary);font-size:12px;font-weight:700}.request-table td[colspan]{display:block}.request-table td[colspan]::before{content:none}.request-payment-secondary{max-width:none}.request-actions{justify-content:flex-start}.operation-summary>div{grid-template-columns:1fr;gap:3px}}
@media(prefers-reduced-motion:reduce){.request-table button,.registration-operation-modal button{transition:none}}

/* Notification lifecycle states: stable unread/read state without duplicating business events. */
.admin-notification-popover>header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.admin-notification-popover>header>div{display:grid;gap:3px;min-width:0}.notification-mark-all{padding:3px 0;color:var(--primary);background:transparent;border:0;font-size:11px;font-weight:750;white-space:nowrap;cursor:pointer}.notification-mark-all:disabled{color:var(--text-muted);cursor:default}.admin-notification-item{position:relative}.admin-notification-item.is-unread{background:color-mix(in srgb,var(--primary-soft) 55%,transparent)}.admin-notification-item.is-unread::after{content:"";position:absolute;top:17px;right:12px;width:7px;height:7px;border-radius:50%;background:var(--primary)}.admin-notification-item.is-read{opacity:.74}.admin-notification-item>span:last-child{padding-right:8px}.admin-notification-item time{color:var(--text-muted);font-size:11px}

/* Compact collapsible sidebar sections. Dashboard/Home remains standalone. */
.sidebar{width:252px}
.main-content{margin-left:252px}
.sidebar-logo{min-height:64px;padding:10px 13px;display:flex;align-items:center;gap:10px}
.sidebar-brand-image-wrap{width:42px;height:42px;flex:0 0 42px;padding:0;overflow:visible;border:0;border-radius:0;outline:0;background:transparent;box-shadow:none}
.sidebar-nav{padding:9px 10px 8px}.nav-section+.nav-section{margin-top:4px}
.nav-section-standalone{padding:0 0 8px;border-bottom:1px solid var(--border-soft)}
.nav-section-standalone .nav-item{min-height:40px}
.nav-section-collapsible{margin:3px 0 0;padding:0;border:0}
.nav-section[data-nav-section="tuong-tac-cheo"]{padding:0;border:0}
.nav-section-toggle{min-height:32px;padding:6px 8px;display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--text-muted);border:1px solid transparent;border-radius:8px;font-size:10px;font-weight:760;letter-spacing:.075em;list-style:none;text-transform:uppercase;cursor:pointer;transition:color .18s ease,background .18s ease}
.nav-section-toggle::-webkit-details-marker{display:none}.nav-section-toggle:hover{color:var(--text-secondary);background:color-mix(in srgb,var(--bg-hover) 58%,transparent)}.nav-section-toggle:focus-visible{outline:2px solid var(--border-interactive);outline-offset:-2px}.nav-section-collapsible.has-active-child>.nav-section-toggle{color:var(--primary)}
.nav-section-chevron{width:16px;height:16px;display:grid;place-items:center;flex:0 0 16px;transition:transform .18s ease}.nav-section-chevron svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8}.nav-section-collapsible[open] .nav-section-chevron{transform:rotate(180deg)}
.nav-section-items{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .18s ease,opacity .15s ease}.nav-section-collapsible[open] .nav-section-items{grid-template-rows:1fr;opacity:1}.nav-section-items-inner{min-height:0;overflow:hidden;display:grid;gap:2px;padding:0}.nav-section-collapsible[open] .nav-section-items-inner{padding:3px 0 5px}
.nav-section-items .nav-item{position:relative;min-height:37px;padding:7px 9px;font-size:13px;border-radius:9px}.nav-section-items .nav-icon{width:22px;height:22px}.nav-section-items .nav-icon svg{width:17px;height:17px}.nav-item.active{position:relative}.nav-item.active .nav-icon{color:currentColor}.nav-item.active::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--nav-active-indicator)}
.sidebar-footer{grid-template-columns:minmax(0,1fr) 36px;align-items:center;gap:8px;padding:9px 10px}.sidebar-user-block{gap:8px}.user-avatar{width:34px;height:34px}.sidebar-user-meta{overflow:hidden}.user-name,.user-username,.user-role{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-name{font-size:12px;font-weight:750}.user-username{margin-top:1px;font-size:10px}.user-role{margin-top:1px;font-size:10px}.sidebar-footer .logout-button{width:36px;min-width:36px;height:36px;min-height:36px;padding:0;display:grid;place-items:center}.logout-label{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.logout-icon{width:18px;height:18px}.logout-icon svg{width:17px;height:17px}
@media(max-width:900px){.sidebar{width:min(280px,calc(100vw - 28px))}.main-content{margin-left:0}.nav-section-items .nav-item{min-height:42px}.sidebar-footer .logout-button{width:42px;min-width:42px;height:42px;min-height:42px}}

/* Reports use one predictable section rhythm on desktop and mobile. */
.reports-page{display:grid;gap:var(--space-card);min-width:0}.reports-page>:where(.page-header,.report-filter-panel,.report-tabs,.reports-content){margin:0}.reports-content{display:grid;gap:var(--space-card);min-width:0}.reports-content>:where(.report-stats,.report-grid,.report-card,.notice,.pagination-bar){margin:0}.reports-page .report-tabs{margin:0}.reports-page .report-grid{gap:var(--space-card)}
.report-export-button{min-height:40px;padding:8px 12px;font-size:12px}
.report-filter-panel{gap:0;padding:0;overflow:hidden;background:var(--bg-card);border-color:var(--border-default);box-shadow:var(--shadow-card)}
.report-filter-head{align-items:center;padding:14px 16px;border-bottom:1px solid var(--border-soft)}.report-filter-head>div{gap:3px}.report-filter-head h2{margin:0;color:var(--text-primary);font-size:13px;font-weight:780;letter-spacing:.035em;text-transform:uppercase}.report-filter-head p{margin:0;color:var(--text-muted);font-size:12px;line-height:1.4}
.report-filter-primary{display:grid;grid-template-columns:minmax(150px,.72fr) minmax(150px,.72fr) minmax(300px,2fr);gap:14px;padding:16px}.report-filter-panel .filter-field{display:grid;grid-column:auto;gap:6px;min-width:0}.report-filter-panel .filter-field>span{color:var(--text-secondary);font-size:12px;font-weight:650;line-height:1.2}.report-filter-panel :where(.form-control,.filter-select){width:100%;height:42px;min-width:0;border-radius:9px}.report-filter-panel :where(.form-control,.filter-select):focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 18%,transparent)}
.report-advanced-filters{border-top:1px solid var(--border-soft)}.report-advanced-filters>summary{min-height:46px;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--text-secondary);list-style:none;cursor:pointer}.report-advanced-filters>summary::-webkit-details-marker{display:none}.report-advanced-filters>summary:hover{color:var(--text-primary);background:color-mix(in srgb,var(--bg-hover) 62%,transparent)}.report-advanced-filters>summary:focus-visible{outline:2px solid var(--border-interactive);outline-offset:-2px}.report-advanced-filters>summary>span:first-child{display:grid;gap:2px}.report-advanced-filters>summary strong{font-size:12px;font-weight:730}.report-advanced-filters>summary small{color:var(--text-muted);font-size:11px;font-weight:500}.report-advanced-chevron{width:18px;height:18px;display:grid;place-items:center;flex:0 0 18px;transition:transform .18s ease}.report-advanced-chevron svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8}.report-advanced-filters[open] .report-advanced-chevron{transform:rotate(180deg)}
.report-filter-advanced-grid{padding:4px 16px 16px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px}.report-filter-advanced-grid .filter-field{grid-column:span 3}.report-filter-advanced-grid .report-filter-id{grid-column:span 2}
.report-filter-actions{min-height:56px;padding:9px 16px;display:flex;align-items:center;justify-content:space-between;gap:14px;border-top:1px solid var(--border-soft);background:color-mix(in srgb,var(--bg-soft) 52%,transparent)}.report-filter-actions>span{color:var(--text-muted);font-size:11px}.report-filter-actions .btn-secondary{min-height:38px;padding:7px 11px;display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:12px}.report-filter-actions .btn-secondary svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}
@media(max-width:1100px){.report-filter-primary{grid-template-columns:repeat(2,minmax(0,1fr))}.report-filter-search{grid-column:1/-1}.report-filter-advanced-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.report-filter-advanced-grid .filter-field,.report-filter-advanced-grid .report-filter-id{grid-column:auto}}
@media(max-width:640px){.report-filter-head{padding:13px 14px}.report-filter-primary,.report-filter-advanced-grid{grid-template-columns:1fr;gap:12px;padding:14px}.report-filter-search,.report-filter-advanced-grid .filter-field,.report-filter-advanced-grid .report-filter-id{grid-column:1/-1}.report-advanced-filters>summary{padding:10px 14px}.report-filter-actions{padding:10px 14px;align-items:stretch;flex-direction:column}.report-filter-actions .btn-secondary{width:100%;min-height:42px}}

/* Admin notification popover presentation only; state still comes from the existing service. */
.admin-notification-popover{width:min(380px,calc(100vw - 28px));max-height:min(480px,calc(100dvh - 88px));overflow:auto;overscroll-behavior:contain}
.admin-notification-popover>header{position:sticky;top:0;z-index:2;align-items:center;padding:14px 15px;background:var(--bg-surface)}.admin-notification-popover>header>strong{font-size:14px;font-weight:750}.admin-notification-item{grid-template-columns:32px minmax(0,1fr);gap:10px;padding:11px 14px}.admin-notification-item>span:first-child{width:32px;height:32px;border-radius:8px}.admin-notification-item svg{width:16px;height:16px}.admin-notification-item>span:last-child{gap:2px}.admin-notification-item strong{font-size:13px;font-weight:700;line-height:1.4}.admin-notification-item small{font-size:12px}.admin-notification-item.is-read{opacity:.68}.admin-notification-item.is-unread{background:color-mix(in srgb,var(--primary-soft) 38%,transparent)}

/* Promotions-only overflow-safe action menu. */
.promotion-action-menu{display:inline-flex;justify-content:flex-end}.promotion-action-trigger{min-width:112px;min-height:38px;padding:7px 10px;display:inline-flex;align-items:center;justify-content:center;gap:7px;color:var(--text-secondary);background:var(--bg-control);border:1px solid var(--border-default);border-radius:9px;font-size:12px;font-weight:700;cursor:pointer}.promotion-action-trigger:hover,.promotion-action-trigger[aria-expanded="true"]{color:var(--text-primary);background:var(--bg-hover);border-color:var(--border-interactive)}.promotion-action-trigger>span{width:15px;height:15px;display:grid;place-items:center}.promotion-action-trigger svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8}.promotion-action-trigger[aria-expanded="true"]>span{transform:rotate(180deg)}
.promotion-action-dropdown{position:fixed;z-index:260;width:190px;padding:5px;display:grid;gap:2px;color:var(--text-primary);background:var(--bg-elevated);border:1px solid var(--border-default);border-radius:10px;box-shadow:var(--shadow-lg)}.promotion-action-dropdown.hidden{display:none}.promotion-action-dropdown button{width:100%;min-height:38px;padding:8px 10px;display:flex;align-items:center;gap:9px;color:var(--text-secondary);background:transparent;border:0;border-radius:7px;font-size:12px;font-weight:650;text-align:left;cursor:pointer}.promotion-action-dropdown button:hover,.promotion-action-dropdown button:focus-visible{color:var(--text-primary);background:var(--bg-hover);outline:none}.promotion-action-dropdown button:focus-visible{box-shadow:inset 0 0 0 2px var(--border-interactive)}.promotion-action-dropdown button.is-warning{color:var(--warning-text)}.promotion-action-dropdown button.is-danger{color:var(--danger-text)}.promotion-action-dropdown button.is-warning:hover{background:var(--warning-bg)}.promotion-action-dropdown button.is-danger:hover{background:var(--danger-bg)}.promotion-action-dropdown svg{width:16px;height:16px;flex:0 0 16px;fill:none;stroke:currentColor;stroke-width:1.8}

@media(max-width:640px){.reports-page{gap:16px}.reports-page .report-tabs{padding-bottom:4px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin}.reports-page .report-tab{width:auto;flex:0 0 auto}.admin-notification-popover{top:64px;right:10px;left:10px;width:auto;max-height:calc(100dvh - 76px)}.notification-mark-all{white-space:normal;text-align:right}.promotion-action-trigger{min-width:104px}}

/* Unified user management */
.password-input-wrap{position:relative;display:block}.password-input-wrap .form-control{padding-right:64px}.password-visibility-toggle{position:absolute;top:50%;right:8px;transform:translateY(-50%);border:0;background:transparent;color:var(--primary);font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.unified-users-toolbar{display:grid;grid-template-columns:minmax(280px,680px) auto;align-items:center;justify-content:space-between;gap:10px}.unified-user-search{position:relative;display:block;min-width:0}.unified-user-search>svg{position:absolute;z-index:1;top:50%;left:13px;width:18px;height:18px;fill:none;stroke:var(--text-muted);stroke-width:1.8;stroke-linecap:round;transform:translateY(-50%);pointer-events:none}.unified-user-search .form-control{width:100%;padding-left:40px}.unified-users-reload{display:inline-flex;align-items:center;justify-content:center;gap:7px}.unified-users-table-card{overflow:hidden}.unified-users-table td{vertical-align:middle}.unified-user-identity,.unified-user-contact,.unified-user-wallet,.user-web-access{display:grid;min-width:0;gap:3px}.unified-user-identity strong,.unified-user-wallet strong{color:var(--text-primary);font-size:13px}.unified-user-identity span,.unified-user-contact small,.unified-user-wallet small,.user-web-access span,.user-web-access small{color:var(--text-muted);font-size:12px;line-height:1.35}.unified-user-contact span{max-width:220px;overflow:hidden;color:var(--text-primary);text-overflow:ellipsis;white-space:nowrap}.unified-user-wallet strong{color:var(--primary);font-size:15px;font-variant-numeric:tabular-nums;white-space:nowrap}.user-web-access strong,.user-access-status strong{color:var(--text-primary);font-size:13px}.user-web-access .is-enabled,.user-access-status .is-enabled{color:var(--success-text)}.user-web-access .is-disabled,.user-access-status .is-disabled{color:var(--text-secondary)}.unified-user-manage{min-width:86px}
.unified-user-modal{width:min(1040px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:hidden}.unified-user-modal .modal-header{position:relative;z-index:4;flex:0 0 auto;background:var(--bg-elevated)}.unified-user-modal .modal-body{min-height:0;overscroll-behavior:contain}.unified-user-summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 14px;border:1px solid var(--border-default);border-radius:12px;background:var(--bg-soft)}.unified-user-summary>div{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.unified-user-summary>div:first-child{align-items:flex-start;flex-direction:column;gap:2px}.unified-user-summary strong{font-size:16px}.unified-user-summary span:not(.status-pill){color:var(--text-muted);font-size:12px}
.unified-user-tabs{position:sticky;z-index:3;top:0;display:flex;gap:4px;margin:12px 0 14px;padding:4px;border:1px solid var(--border-default);border-radius:11px;background:var(--bg-soft);box-shadow:0 8px 16px color-mix(in srgb,var(--bg-page) 10%,transparent);overflow-x:auto}.unified-user-tab{flex:1 0 auto;min-height:40px;padding:8px 13px;border:0;border-radius:8px;background:transparent;color:var(--text-muted);font:inherit;font-size:13px;font-weight:700;cursor:pointer}.unified-user-tab:hover{color:var(--text-primary);background:var(--bg-hover)}.unified-user-tab.active{background:var(--bg-surface);color:var(--primary);box-shadow:var(--shadow-sm)}
.unified-user-detail-content{min-height:320px}.user-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:14px}.user-detail-card{padding:18px;border:1px solid var(--border-default);border-radius:13px;background:var(--bg-surface)}.user-detail-card.is-readonly{background:var(--bg-soft)}.user-detail-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}.user-detail-card-head>div>span{display:block;margin-bottom:3px;color:var(--primary);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.user-detail-card-head h3{margin:0;font-size:17px}.user-detail-card-head time{color:var(--text-muted);font-size:12px}.user-detail-form{display:grid;gap:12px}.user-detail-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.user-detail-metrics>div{padding:12px;border:1px solid var(--border-default);border-radius:10px;background:var(--bg-soft)}.user-detail-metrics span{display:block;color:var(--text-muted);font-size:11px}.user-detail-metrics strong{display:block;margin-top:4px;font-size:16px}.admin-password-confirm{padding:12px;border:1px solid color-mix(in srgb,var(--warning) 44%,var(--border-default));border-radius:10px;background:color-mix(in srgb,var(--warning) 8%,var(--bg-surface))}
.user-access-card{position:relative;padding-bottom:0}.user-access-card-head{align-items:center}.user-access-status{display:grid;justify-items:end;gap:2px;text-align:right}.user-access-status span{color:var(--text-muted);font-size:12px}.permission-group-grid{columns:2;column-gap:12px}.permission-group{display:grid;break-inside:avoid;gap:3px;margin:0 0 12px;padding:10px;border:1px solid var(--border-default);border-radius:11px;background:var(--bg-surface)}.permission-group legend{padding:0 5px;color:var(--text-primary);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.permission-option{display:flex;align-items:center;gap:10px;min-height:44px;padding:7px 8px;border-radius:8px;color:var(--text-primary);font-size:13px;font-weight:650;line-height:1.35;cursor:pointer;transition:background-color .16s ease,color .16s ease}.permission-option:hover,.permission-option:has(input:checked){background:var(--primary-soft)}.permission-option:has(input:disabled){cursor:default;opacity:.68}.permission-option input{flex:0 0 18px;width:18px;height:18px;margin:0;accent-color:var(--primary)}.permission-action-bar{position:sticky;z-index:2;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:16px;margin:4px -18px -18px;padding:12px 18px;border-top:1px solid var(--border-default);background:var(--bg-elevated);box-shadow:0 -10px 24px color-mix(in srgb,var(--bg-page) 14%,transparent)}.permission-action-bar>div{display:grid;gap:2px}.permission-action-bar strong{color:var(--text-primary);font-size:13px}.permission-action-bar span{color:var(--text-muted);font-size:12px}.permission-confirm-overlay{position:fixed;z-index:280;inset:0;display:grid;place-items:center;padding:20px;background:var(--bg-overlay)}.permission-confirm-overlay.hidden{display:none}.permission-confirm-dialog{width:min(480px,100%);max-height:calc(100dvh - 40px);overflow:auto;border:1px solid var(--border-default);border-radius:14px;background:var(--bg-elevated);box-shadow:var(--shadow-lg)}.permission-confirm-dialog>header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid var(--border-default)}.permission-confirm-dialog>header>div>span{display:block;margin-bottom:2px;color:var(--primary);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.permission-confirm-dialog h3{margin:0;color:var(--text-primary);font-size:17px}.permission-confirm-form{gap:13px;padding:18px}.permission-confirm-form .modal-note{margin:0}.permission-confirm-form .modal-actions{margin-top:2px}.user-ledger-table{min-width:820px}.wallet-positive{color:var(--success);font-weight:750}.wallet-negative{color:var(--danger);font-weight:750}

.historical-payment-modal{width:min(680px,100%)}
.historical-payment-form{gap:18px}
.historical-payment-warning{display:grid;gap:4px;padding:13px 14px;border:1px solid var(--warning-border);border-radius:10px;color:var(--warning-text);background:var(--warning-bg);font-size:13px;line-height:1.5}
.historical-payment-section{display:grid;gap:14px;padding-top:2px}
.historical-payment-section+ .historical-payment-section{padding-top:18px;border-top:1px solid var(--border-default)}
.historical-payment-section h4{margin:0;color:var(--text-primary);font-size:15px}
.historical-payment-current{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0}
.historical-payment-current>div{display:grid;gap:3px;padding:11px 12px;border:1px solid var(--border-default);border-radius:9px;background:var(--bg-soft)}
.historical-payment-current dt{color:var(--text-muted);font-size:12px}
.historical-payment-current dd{margin:0;color:var(--text-primary);font-size:13px;font-weight:700}
.historical-payment-form .form-group small{color:var(--text-muted);font-size:12px;line-height:1.45}
@media(max-width:640px){.historical-payment-current{grid-template-columns:1fr}.historical-payment-form .modal-actions{flex-direction:column-reverse}.historical-payment-form .modal-actions button{width:100%}}
.kiosk-payment-admin-hint{margin:0 0 12px;color:var(--text-secondary);font-size:13px;line-height:1.5}
.kiosk-payment-history-table .kiosk-payment-edit-action{min-width:172px;justify-content:center;white-space:nowrap}
.kiosk-payment-history-table.has-admin-actions th:last-child,.kiosk-payment-history-table.has-admin-actions td:last-child{position:sticky;z-index:1;right:0;background:var(--bg-surface);box-shadow:-8px 0 14px color-mix(in srgb,var(--bg-page) 22%,transparent)}
.kiosk-payment-history-table.has-admin-actions th:last-child{z-index:2;background:var(--bg-soft)}
@media(max-width:760px){.kiosk-payment-history-table,.kiosk-payment-history-table tbody,.kiosk-payment-history-table tr,.kiosk-payment-history-table td{display:block;width:100%}.kiosk-payment-history-table thead{display:none}.kiosk-payment-history-table tbody{padding:10px}.kiosk-payment-history-table tr{margin-bottom:12px;padding:5px 13px;border:1px solid var(--border-default);border-radius:12px;background:var(--bg-surface)}.kiosk-payment-history-table tr:last-child{margin-bottom:0}.kiosk-payment-history-table td{display:grid;grid-template-columns:112px minmax(0,1fr);align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--border-soft)}.kiosk-payment-history-table td::before{content:attr(data-label);color:var(--text-muted);font-size:11px;font-weight:750;text-transform:uppercase;letter-spacing:.04em}.kiosk-payment-history-table td:last-child{border-bottom:0}.kiosk-payment-history-table.has-admin-actions th:last-child,.kiosk-payment-history-table.has-admin-actions td:last-child{position:static;box-shadow:none}.kiosk-payment-history-table .kiosk-payment-edit-action{width:100%;min-width:0}.kiosk-payment-admin-hint{font-size:12px}}
@media(max-width:960px){.unified-users-table thead{display:none}.unified-users-table,.unified-users-table tbody,.unified-users-table tr,.unified-users-table td{display:block;width:100%}.unified-users-table tbody{padding:10px}.unified-users-table tr{margin-bottom:10px;padding:4px 12px;border:1px solid var(--border-default);border-radius:12px;background:var(--bg-surface)}.unified-users-table tr:last-child{margin-bottom:0}.unified-users-table td{display:grid;grid-template-columns:128px minmax(0,1fr);align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--border-soft)}.unified-users-table td:last-child{border-bottom:0}.unified-users-table td::before{content:attr(data-label);color:var(--text-muted);font-size:11px;font-weight:750;text-transform:uppercase;letter-spacing:.04em}.unified-user-manage{justify-self:start}}
@media(max-width:760px){.unified-users-toolbar{grid-template-columns:minmax(0,1fr) auto}.unified-users-reload span{display:none}.unified-users-reload{width:44px;padding-inline:0}.user-detail-grid{grid-template-columns:1fr}.unified-user-modal{width:calc(100vw - 18px);max-height:calc(100dvh - 18px)}.unified-user-modal .modal-body{padding:14px}.unified-user-summary,.user-detail-card-head{align-items:flex-start;flex-direction:column}.user-detail-metrics{grid-template-columns:1fr}.unified-user-tabs{margin-inline:-2px}.unified-user-tab{min-height:44px;padding-inline:10px}.permission-group-grid{columns:1}.permission-action-bar{margin-inline:-14px;margin-bottom:-14px;padding:12px 14px}.user-access-status{justify-items:start;text-align:left}}
@media(max-width:520px){.unified-users-toolbar{grid-template-columns:1fr auto}.unified-users-table td{grid-template-columns:1fr;gap:5px}.unified-users-table td::before{margin-top:2px}.user-detail-card{padding:14px}.permission-action-bar{align-items:stretch;flex-direction:column;gap:10px}.permission-action-bar .btn-primary{width:100%}.permission-confirm-overlay{padding:10px}.permission-confirm-dialog{max-height:calc(100dvh - 20px)}.permission-confirm-form .modal-actions{align-items:stretch;flex-direction:column-reverse}.permission-confirm-form .modal-actions button{width:100%}}
@media(prefers-reduced-motion:reduce){.nav-section-chevron,.promotion-action-trigger>span{transition:none}}

/* Dashboard-only semantic activity badges. */
.recent-activity-type{display:inline-flex;align-items:center;padding:2px 7px;border:1px solid transparent;line-height:1.4}
.recent-activity-type.is-info{color:var(--info-text);background:var(--info-bg);border-color:var(--info-border)}
.recent-activity-type.is-success{color:var(--success-text);background:var(--success-bg);border-color:var(--success-border)}
.recent-activity-type.is-secondary{color:var(--primary);background:var(--primary-soft);border-color:color-mix(in srgb,var(--primary) 28%,transparent)}

@media(max-width:459px){.category-chart-stage{width:min(100%,360px)}}
@media(prefers-reduced-motion:reduce){.expiring-item-link{transition:none}}

/* Context-specific responsive brand sizing; preserve the source aspect ratio. */
.portal-brand{height:46px;min-width:0}
.portal-brand .public-header-logo{display:block;width:auto;height:44px;max-width:none;object-fit:contain;object-position:left center}
.sidebar-brand-image-wrap{width:134px;height:46px;flex:0 0 134px}
.sidebar-brand-image{display:block;width:auto;height:44px;max-width:100%;margin:auto;object-fit:contain;object-position:center}
@media(max-width:900px){
  .portal-brand{height:42px}
  .portal-brand .public-header-logo{height:40px}
  .sidebar-brand-image-wrap{width:122px;height:42px;flex-basis:122px}
  .sidebar-brand-image{height:40px}
}
@media(max-width:640px){
  .portal-brand{height:38px}
  .portal-brand .public-header-logo{height:36px}
  .top-brand-mark{width:auto;height:36px;max-width:none;flex:none;object-fit:contain;object-position:left center}
  .top-bar-user-actions>.connection-badge,.top-bar-user-actions>.current-date{display:none}
  .top-wallet-pill{width:34px;min-width:34px;max-width:34px;padding:0}
  .top-wallet-pill span:last-child,.top-user-chevron{display:none}
  .sidebar-brand-image-wrap{width:110px;height:40px;flex-basis:110px}
  .sidebar-brand-image{width:auto;height:36px;max-width:100%}
}