/* Shared interaction states. Page layouts live in their own stylesheets. */
html { scroll-behavior: smooth; }
body { background: var(--ui-bg); color: var(--ui-text); font-family: var(--ui-font); }
button, input, select, textarea { font-family: inherit; }
a, button, input, select, textarea { -webkit-tap-highlight-color: transparent; }
:where(a,button,input,select,textarea,[tabindex]):focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 3px; }
:where(button,.btn,.lp-button,.ng-btn-primary,.ng-btn-outline,.ng-pkg-card,.ng-game-card,.ng-feature-card) {
  transition: color var(--ui-motion) var(--ui-ease), background-color var(--ui-motion) var(--ui-ease), border-color var(--ui-motion) var(--ui-ease), transform var(--ui-motion) var(--ui-ease);
}
:where(button,.btn,.lp-button):active:not(:disabled) { transform: translateY(1px); }
:where(button,input,select,textarea):disabled, :where(.btn,.lp-button)[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
[aria-busy="true"] { cursor: progress; }
[aria-invalid="true"] { border-color: var(--ui-danger) !important; }
[hidden] { display: none !important; }
img { max-width: 100%; }
/* App shell */
.app-page { font: 400 var(--ui-text-body)/1.65 var(--ui-font); overflow-x: visible; }
.app-page h1,.app-page h2,.app-page h3,.app-page h4 { font-family: var(--ui-font); color: var(--ui-text); font-weight: 600; letter-spacing: -.035em; }
.app-page h1 { font-size: var(--ui-text-h1); line-height: 1.25; }
.app-page h2 { font-size: var(--ui-text-h2); line-height: 1.35; }
.app-page h3 { font-size: 1.125rem; line-height: 1.45; }
.app-page .app-container { max-width: 1280px; padding-inline: 32px; }
.app-page header { background: rgba(11,16,24,.95); border-color: var(--ui-border); box-shadow: none; }
.app-page .header-wrap { height: 80px; padding-block: 16px !important; gap: 24px; }
.app-page .logo-section { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; min-height: 44px; }
.app-page .logo-section img { width: 32px !important; height: 32px !important; border-radius: 8px !important; }
.app-page .logo-text,.app-page .logo { background: none; color: var(--ui-text); -webkit-text-fill-color: currentColor; filter: none !important; font: 700 16px var(--ui-font); letter-spacing: .02em !important; }
.app-page .navigation { gap: 8px; min-width: 0; }
.app-page .nav-link { min-height: 44px; padding: 8px 16px; font-size: 12px; font-weight: 500 !important; white-space: nowrap; color: var(--ui-muted) !important; }
.app-page .nav-link:hover,.app-page .nav-link.active { color: var(--ui-text) !important; background: var(--ui-surface); border-color: var(--ui-border); }
.app-page .nav-link.active { box-shadow: inset 0 -2px var(--ui-accent); }
.app-page .nav-link.scam { color: var(--ui-muted); }
.app-page #navUserProfile { gap: 8px !important; margin-left: 0 !important; }
.app-page #navUserProfile>div:first-child { border-radius: 8px !important; background: var(--ui-surface) !important; padding: 8px !important; gap: 8px !important; }
.app-page .nav-avatar { color: var(--ui-accent); background: var(--ui-surface-raised) !important; border-radius: 6px !important; }
.app-page #navUsername { font-size: 12px !important; }
.app-page #navRole { font-size: 10px !important; font-weight: 500 !important; }
.app-page #notificationBtn,.app-page #navLogoutBtn,.app-page .menu-toggle { width: 44px !important; height: 44px !important; margin: 0 !important; background: var(--ui-surface) !important; border: 1px solid var(--ui-border); border-radius: 8px; }
.app-page #notificationBtn:hover,.app-page #navLogoutBtn:hover { border-color: var(--ui-border-hover) !important; color: var(--ui-text) !important; }
.app-page #notificationDropdown { width: min(320px,calc(100vw - 32px)) !important; background: var(--ui-surface) !important; border-color: var(--ui-border) !important; box-shadow: var(--ui-shadow) !important; }
.app-page #markAllReadBtn { min-height: 44px; }
/* Controls */
.app-page :is(.btn,.btn-cancel,.btn-submit-premium,.btn-save) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 8px 16px; border: 1px solid var(--ui-border); border-radius: 8px; background: var(--ui-surface-raised); color: var(--ui-text); font: 500 13px/1.4 var(--ui-font); box-shadow: none; letter-spacing: 0; text-transform: none; }
.app-page :is(.btn,.btn-cancel):hover { background: #202c3e; border-color: var(--ui-border-hover); transform: none; }
.app-page :is(.btn-primary,.btn-accent,.btn-submit-premium,.btn-save) { background: var(--ui-accent); color: var(--ui-bg); border-color: transparent; box-shadow: none; }
.app-page :is(.btn-primary,.btn-accent,.btn-submit-premium,.btn-save):hover { background: #b1c8fa; box-shadow: none; }
.app-page .btn-outline { background: transparent; color: var(--ui-muted); }
.app-page .btn-danger { background: transparent; color: var(--ui-danger); border-color: rgba(238,146,152,.24); }
.app-page .btn-danger:hover { background: rgba(238,146,152,.1); }
.app-page .btn-sm { min-height: 44px; min-width: 44px; }
.app-page :is(.form-control,.filter-select) { width: 100%; min-height: 48px; padding: 8px 16px; background: var(--ui-bg); color: var(--ui-text); border: 1px solid var(--ui-border); border-radius: 8px; font: 400 16px/1.5 var(--ui-font); }
.app-page :is(.form-control,.filter-select):hover { border-color: var(--ui-border-hover); }
.app-page :is(.form-control,.filter-select):focus { border-color: var(--ui-accent); box-shadow: none; }
.app-page .form-control:read-only:not(select) { color: var(--ui-muted); background: var(--ui-surface); }
.app-page .form-label { display: block; margin-bottom: 8px; font: 500 12px/1.5 var(--ui-font); color: var(--ui-muted); }
.app-page .form-group { margin-bottom: 24px; }
.app-page .card { background: var(--ui-surface); border: 1px solid var(--ui-border); box-shadow: none; border-radius: var(--ui-radius); }
.app-page .card:hover { transform: none; box-shadow: none; border-color: var(--ui-border-hover); }
.app-page .animate-on-load { animation: none; opacity: 1; transform: none; }

/* Storefront account order overview */
.dashboard-page .account-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin: 0 0 32px; }
.dashboard-page .account-summary article { min-height: 132px; display: flex; flex-direction: column; align-items: start; justify-content: center; padding: 22px 24px; border: 1px solid var(--ui-border); border-radius: 12px; background: var(--ui-surface); }
.dashboard-page .account-summary article span { color: var(--ui-muted); font-size: 10px; font-weight: 600; letter-spacing: .09em; }
.dashboard-page .account-summary article strong { margin: 4px 0 0; color: var(--ui-text); font: 600 32px/1.2 var(--ui-font); font-variant-numeric: tabular-nums; }
.dashboard-page .account-summary article small { color: var(--ui-muted); font-size: 11px; }


/* Dashboard: compact order rows with an adjacent summary. */
.dashboard-page main.app-container { padding-block: 48px 64px !important; min-width: 0; }
.dashboard-header-row { gap: 24px; margin-bottom: 32px; }
.dashboard-title-group { gap: 16px; flex-wrap: wrap; }
.app-page .dashboard-title { background: none; -webkit-text-fill-color: currentColor; font-weight: 600; font-size: var(--ui-text-h1); text-transform: none; }
.dashboard-intro { margin-top: 8px; color: var(--ui-muted); font-size: 13px; }
.dashboard-toolbar { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.app-page .order-count-badge { padding: 0 8px; color: var(--ui-muted); background: var(--ui-surface-raised); border-radius: 4px; font-size: 12px; font-weight: 500; }
.app-page .tabs-container { gap: 8px; padding: 0; margin-bottom: 24px; scrollbar-width: thin; border-color: var(--ui-border); }
.app-page .tab-btn { min-height: 48px; padding: 8px 16px; white-space: nowrap; color: var(--ui-muted); font: 500 12px var(--ui-font); border-bottom: 2px solid transparent; }
.app-page .tab-btn:hover { color: var(--ui-text); background: var(--ui-surface); }
.app-page .tab-btn.active { color: var(--ui-accent); border-color: var(--ui-accent); }
.app-page .tab-count { margin-left: 8px; background: var(--ui-surface-raised); color: var(--ui-muted); padding: 0 8px; font-size: 11px; }
.app-page #mobileFilters.filters-row { display: grid; grid-template-columns: minmax(0,1fr) 208px 176px; gap: 16px; margin-bottom: 24px; }
.app-page .search-bar { width: auto; min-width: 0; height: 48px; padding: 0 16px; background: var(--ui-bg); border-color: var(--ui-border); border-radius: 8px; gap: 8px; }
.app-page .search-bar:hover { border-color: var(--ui-border-hover); }
.app-page .search-bar:focus-within { border-color: var(--ui-accent); }
.app-page .search-bar input { width: 100%; min-width: 0; height: 44px; padding: 8px 0; color: var(--ui-text); background: transparent; border: none; font: 400 16px var(--ui-font); outline-offset: 0; }
.app-page .search-bar input:-webkit-autofill { -webkit-text-fill-color: var(--ui-text); box-shadow: 0 0 0 1000px var(--ui-bg) inset; }
.app-page .filter-select { font-size: 13px; }
.app-page .dashboard-layout { display: grid; grid-template-columns: minmax(0,1fr) 272px !important; gap: 24px !important; }
.app-page .orders-grid,.app-page .my-orders-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 16px; min-width: 0; }
.app-page .order-card-modern { padding: 24px; gap: 16px; }
.app-page .oc-header { align-items: start; gap: 16px; }
.app-page .oc-header>div:first-child { min-width: 0; }
.app-page .oc-id { color: var(--ui-muted); font-size: 11px; margin-bottom: 8px; letter-spacing: .04em; }
.app-page .oc-title { font-size: 18px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.app-page .oc-status { flex-shrink: 0; padding: 4px 8px; border-radius: 6px; font-size: 11px; line-height: 1.5; }
.app-page .oc-body { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px 24px; }
.app-page .oc-row { display: grid; align-content: start; gap: 0; min-width: 0; }
.app-page .oc-label { color: var(--ui-muted); font-size: 11px; }
.app-page .oc-value { font-size: 13px; font-weight: 500; text-align: left; overflow-wrap: anywhere; }
.app-page .oc-price { font-size: 18px; color: var(--ui-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.app-page .oc-progress-wrap { grid-column: 1/-1; margin-top: 0; }
.app-page .oc-progress-bar { height: 4px; background: var(--ui-surface-raised); }
.app-page .oc-progress-fill { background: var(--ui-success); box-shadow: none; }
.app-page .oc-progress-text { font-size: 11px; margin-top: 8px; }
.app-page .oc-footer { border-top: 1px solid var(--ui-border); padding-top: 16px; margin-top: 0 !important; }
.app-page .oc-settlement { display: flex; flex-wrap: wrap; gap: 8px 24px; color: var(--ui-muted); font-size: 12px; margin-bottom: 16px; }
.app-page .oc-result { color: var(--ui-muted); font-size: 13px; margin-bottom: 16px; overflow-wrap: anywhere; }
.app-page .oc-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.app-page .oc-actions>.btn { font-size: 12px; }
.app-page .oc-action-group { width: 100%; }
.app-page .oc-review { padding-top: 16px; border-top: 1px solid var(--ui-border); font-size: 12px; }
.app-page .oc-review p { margin-top: 8px; color: var(--ui-muted); overflow-wrap: anywhere; }
.app-page .stats-card { background: transparent; border: 1px solid var(--ui-border); border-radius: 12px; padding: 24px; }
.app-page .stats-title { font-size: 13px; font-weight: 600; text-transform: none; margin-bottom: 16px; }
.app-page .stats-card .stat-item { padding-block: 16px; gap: 8px; margin: 0; border-color: var(--ui-border); }
.app-page .stats-card .stat-label { font-size: 12px; }
.app-page .stats-card .stat-value { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-empty { border: 1px solid var(--ui-border); border-radius: 12px; padding: 48px 32px; display: grid; justify-items: start; gap: 16px; background: var(--ui-surface); }
.ui-empty>i { color: var(--ui-muted); font-size: 24px; }
.ui-empty p { color: var(--ui-muted); font-size: 13px; max-width: 480px; }
.ui-empty-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.ui-inline-error { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; padding: 24px; background: var(--ui-surface); border: 1px solid rgba(238,146,152,.24); border-radius: 12px; color: var(--ui-danger); font-size: 13px; }
.app-page footer { background: var(--ui-bg); padding: 32px 0 !important; margin-top: auto !important; font-size: 12px !important; border-color: var(--ui-border) !important; }
/* Existing modal forms */
.app-page .modal-overlay { inset: 0; padding: 16px; background: rgba(5,9,15,.78); backdrop-filter: blur(8px); transition: opacity var(--ui-motion) var(--ui-ease); }
.app-page :is(.modal-content,.premium-modal) { padding: 32px; max-width: 560px; max-height: calc(100dvh - 32px); overflow-y: auto; background: var(--ui-surface) !important; border: 1px solid var(--ui-border) !important; border-radius: 12px !important; box-shadow: var(--ui-shadow) !important; transform: none; }
.app-page .modal-title { font: 600 22px/1.4 var(--ui-font); color: var(--ui-text); letter-spacing: -.03em; text-transform: none; margin: 0 48px 24px 0; }
.app-page .modal-close:not(.btn-cancel) { position: absolute; right: 16px; top: 16px !important; min-height: 44px; min-width: 44px; background: var(--ui-surface-raised); color: var(--ui-muted); border: 1px solid var(--ui-border); border-radius: 8px; }
.app-page .btn-cancel.modal-close { position: static; font-size: 13px; }
.app-page .modal-actions { display: flex; justify-content: end; gap: 8px; margin-top: 24px; }
.app-page .modal-notice { margin-block: 24px; padding: 16px; border: 1px solid var(--ui-border); border-radius: 8px; background: var(--ui-bg); color: var(--ui-muted); font-size: 12px; display: flex; align-items: start; gap: 8px; }
.app-page .modal-notice i { color: var(--ui-accent); }
.price-input-wrapper { position: relative; }
.price-input-wrapper .currency { position: absolute; right: 16px; top: 12px; }
.rating-stars { display: flex; justify-content: center; gap: 8px; font-size: 24px; }
.rating-stars i { display: grid; width: 44px; height: 44px; place-items: center; }
.rating-stars i.active { color: var(--ui-warning); }
/* Native dialog retains keyboard focus handling from app.js. */
.order-action-dialog { margin: auto; border-radius: 12px; border-color: var(--ui-border); font-family: var(--ui-font); box-shadow: var(--ui-shadow); }
.order-dialog__panel { padding: 32px; background: var(--ui-surface); border: none; animation-duration: var(--ui-motion); }
.order-dialog__close { width: 44px; height: 44px; border-radius: 8px; background: var(--ui-surface-raised); }
.order-dialog__close:hover { transform: none; background: #202c3e; }
.order-dialog__icon { width: 48px; height: 48px; border-radius: 8px; margin-bottom: 24px; background: var(--ui-surface-raised); border-color: var(--ui-border); color: var(--ui-accent); }
.order-dialog__panel h2 { margin-block: 8px; font: 600 24px/1.35 var(--ui-font); }
.order-dialog__message { margin-bottom: 24px; color: var(--ui-muted); }
.order-dialog__fields { gap: 16px; margin-top: 24px; }
.order-dialog__field { gap: 8px; font-weight: 500; }
.order-dialog__input { border-radius: 8px; padding: 8px 16px; font: 400 16px/1.5 var(--ui-font); background: var(--ui-bg); border-color: var(--ui-border); }
.order-dialog__input:hover { border-color: var(--ui-border-hover); }
.order-dialog__input:focus { box-shadow: none; border-color: var(--ui-accent); background: var(--ui-bg); }
.order-dialog__actions { gap: 8px; }
.order-dialog__button { border-radius: 8px; min-height: 48px; padding: 8px 16px; font: 500 13px var(--ui-font); }
.order-dialog__button:hover { filter: none; transform: none; }
.order-dialog__button--confirm { background: var(--ui-accent); box-shadow: none; color: var(--ui-bg); }
.order-dialog__button--confirm:hover { background: #b1c8fa; }
.order-dialog__button--confirm.order-dialog__button--danger { background: var(--ui-danger); color: var(--ui-bg); box-shadow: none; }
.order-dialog__button--confirm.order-dialog__button--danger:hover { background: #f5adb2; }
.order-action-toast { gap: 8px; padding: 16px 24px; border-radius: 8px; background: var(--ui-surface-raised); box-shadow: var(--ui-shadow); transition-duration: var(--ui-motion); }

/* Customer profile storefront shell */
.app-page.profile-page { --profile-nav-width: 260px; min-height: 100vh; background: var(--ui-bg); }
.profile-page .profile-layout { display: grid; grid-template-columns: var(--profile-nav-width) minmax(0,1fr); min-height: 100vh; }
.profile-page .sidebar { position: sticky; top: 0; width: auto; height: 100vh; min-height: 100vh; border-right: 1px solid var(--ui-border); border-bottom: 0; }
.profile-page .sidebar-logo { margin-bottom: 24px; }
.profile-page .sidebar-logo img { width: 32px; height: 32px; border-radius: 8px; }
.profile-page .profile-content-shell { max-width: 1180px; margin-inline: auto; }
.profile-page .profile-overview { color: var(--ui-text); display: flex; align-items: end; justify-content: space-between; gap: 24px; margin: 0 auto 36px; padding: 28px 32px; border: 1px solid var(--ui-border); border-radius: 12px; background: linear-gradient(125deg,var(--ui-surface),rgba(24,33,48,.58)); }
.profile-page .profile-overview h1 { color: var(--ui-text); margin: 6px 0 8px; font-size: clamp(28px,4vw,40px); letter-spacing: -.04em; }
.profile-page .profile-overview h1 span { color: var(--ui-accent); }
.profile-page .profile-overview p:last-child { margin: 0; color: var(--ui-muted); font-size: 13px; }
.profile-page .profile-overview .lp-kicker { margin: 0; color: var(--ui-accent); font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.profile-page .profile-overview .btn { color: var(--ui-text); text-decoration: none; flex-shrink: 0; }
.profile-page .sidebar-link { border-left: 2px solid transparent; }
.profile-page .sidebar-link:hover,.profile-page .sidebar-link.active { border-left-color: var(--ui-accent); }
.profile-page .sidebar-footer { padding: 20px 24px; }
.profile-page .sidebar-footer .btn { width: 100%; }
.profile-page .profile-main { margin-left: 0; min-height: 100vh; padding: clamp(32px,5vw,64px); }
.profile-page .profile-main > .tab-content { max-width: 1180px; margin-inline: auto; }
.profile-page .section-title { margin: 0 0 8px; color: var(--ui-text); font-size: var(--ui-text-h1); line-height: 1.2; letter-spacing: -.04em; text-transform: none; }
.profile-page .section-title + p { max-width: 680px; margin-bottom: 32px !important; color: var(--ui-muted) !important; font-size: 13px; }
.profile-page .my-orders-grid { grid-template-columns: repeat(auto-fill,minmax(min(100%,360px),1fr)); gap: 16px; }
.profile-page .my-orders-grid > :only-child:not(.order-card) { min-height: 200px; display: grid; place-content: center; justify-items: center; padding: 32px; border: 1px dashed var(--ui-border); border-radius: 12px; background: var(--ui-surface); text-align: center; }
.profile-page .claim-box { max-width: 640px; border-color: var(--ui-border); border-radius: 12px; background: var(--ui-surface); }
.profile-page .claim-box .form-label { color: var(--ui-muted) !important; }
.profile-page #profileForm { max-width: 640px; padding: 32px; border: 1px solid var(--ui-border); border-radius: 12px; background: var(--ui-surface); }
.profile-page .btn-save { width: auto; min-width: 168px; margin-top: 4px; }

/* Admin & account views */
.app-page :is(.admin-layout,.profile-layout) { min-width: 0; }
.app-page .sidebar { width: 240px; padding: 24px 0; background: var(--ui-surface); }
.app-page .sidebar-logo { margin-bottom: 32px; padding-inline: 24px; text-align: left; }
.app-page .sidebar-logo a { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 16px !important; }
.app-page .sidebar-link { min-height: 48px; padding: 8px 24px; gap: 8px; font-size: 13px; border-left-width: 2px; }
.app-page .sidebar-link:hover,.app-page .sidebar-link.active { background: var(--ui-surface-raised); color: var(--ui-accent); }
.app-page :is(.admin-main,.profile-main) { min-width: 0; margin-left: 240px; padding: 48px; background: var(--ui-bg); }
.app-page .admin-topbar { gap: 24px; margin-bottom: 32px; }
.app-page .admin-avatar { background: var(--ui-surface-raised); border-radius: 8px; }
.app-page .table-container { min-width: 0; background: var(--ui-surface); border-color: var(--ui-border); margin-bottom: 32px; }
.app-page th,.app-page td { padding: 16px 24px; font-size: 12px; border-color: var(--ui-border); }
.app-page th { font-weight: 500; text-transform: none; }
.app-page .stats-row { gap: 16px; margin-bottom: 32px !important; }
.app-page .stat-card { padding: 24px; box-shadow: none; background: var(--ui-surface); border-color: var(--ui-border); border-radius: 8px; }
.app-page .section-title { color: var(--ui-text); text-transform: none; }
.app-page .claim-box { background: var(--ui-surface); border-color: var(--ui-border); padding: 24px; margin-bottom: 32px; }
.booster-page .profile-header { padding: 48px 24px; background: var(--ui-surface); border: 1px solid var(--ui-border); }
.booster-page .profile-header::before { display: none; }
.booster-page .profile-avatar { background: var(--ui-surface-raised); border-color: var(--ui-border); box-shadow: none; }
.booster-page .review-card { background: var(--ui-surface); border-color: var(--ui-border); box-shadow: none; }
/* Auth retains its validation logic and becomes a quiet split layout. */
.auth-page { --auth-bg: var(--ui-bg); --auth-card: var(--ui-surface); --auth-form-card: var(--ui-surface); --auth-border: var(--ui-border); --auth-gold: var(--ui-accent); --auth-teal: var(--ui-accent); --auth-purple: var(--ui-accent); --auth-text: var(--ui-text); --auth-text-muted: var(--ui-muted); --auth-error: var(--ui-danger); --auth-success: var(--ui-success); --auth-warning: var(--ui-warning); --font-head: var(--ui-font); --font-body: var(--ui-font); --font-data: var(--ui-font); }
.auth-page .auth-particles { display: none; }
.auth-page .auth-header-bar { position: relative; max-width: 1280px; margin-inline: auto; padding: 16px 32px; min-height: 80px; }
.auth-page .auth-logo { animation: none; background: none; -webkit-text-fill-color: currentColor; color: var(--ui-text); font: 700 16px var(--ui-font); min-height: 44px; }
.auth-page .auth-back-btn { min-height: 44px; font-size: 12px; }
.auth-page .auth-wrapper { padding: 32px 32px 64px; }
.auth-page .auth-container { border-color: var(--ui-border); border-radius: 12px; box-shadow: none; max-width: 1056px; }
.auth-page .auth-media-col { background: var(--ui-bg); width: 40%; }
.auth-page .auth-media-placeholder { animation: none; opacity: .5; }
.auth-page .auth-media-overlay { background: rgba(11,16,24,.64); }
.auth-page .auth-media-content { padding: 32px; }
.auth-page .instruction-card { background: transparent; backdrop-filter: none; padding: 0; border: none; animation: none; }
.auth-page .instruction-list li { margin-bottom: 16px; gap: 8px; font-size: 13px; }
.auth-page .instruction-title { color: var(--ui-text); }
.auth-page .example-box { background: var(--ui-surface); padding: 16px; }
.auth-page .auth-form-col { width: 60%; padding: 48px; }
.auth-page .auth-title { font: 600 32px/1.3 var(--ui-font); animation: none; opacity: 1; transform: none; letter-spacing: -.04em; }
.auth-page .auth-subtitle { font-size: 13px; animation: none; opacity: 1; transform: none; }
.auth-page .auth-form-card { border: none; border-radius: 0; padding: 0; }
.auth-page .auth-form-title { font-size: 20px; margin-bottom: 24px; font-weight: 600; }
.auth-page .auth-tabs-l1 { padding-bottom: 8px; }
.auth-page .auth-tab-l1 { min-height: 44px; font-size: 13px; font-weight: 500; }
.auth-page .auth-view { transition-duration: var(--ui-motion); }
.auth-page .input-group { margin-bottom: 24px; }
.auth-page .auth-input { min-height: 48px; border-radius: 8px; background: var(--ui-bg); font: 400 16px var(--ui-font); border-color: var(--ui-border); }
.auth-page .auth-input:hover { border-color: var(--ui-border-hover); }
.auth-page .auth-input:focus { border-color: var(--ui-accent); box-shadow: none; }
.auth-page .toggle-password { width: 44px; height: 44px; min-width: 44px; top: 50%; transform: translateY(-50%); right: 4px; display: grid; place-items: center; }
.auth-page .input-group:not(.success) .status-icon.success { display: none; }
.auth-page .input-wrapper:has(.toggle-password) .auth-input { padding-right: 76px; }
.auth-page .input-wrapper:has(.toggle-password) .status-icon { right: 52px; }
.auth-page .auth-checkbox { min-height: 44px; font-size: 12px; }
.auth-page .auth-btn,.auth-page .support-btn-submit { min-height: 48px; height: auto; padding: 8px 16px; gap: 8px; border-radius: 8px; background: var(--ui-accent); color: var(--ui-bg); box-shadow: none; font: 500 14px var(--ui-font); transition: background var(--ui-motion) var(--ui-ease), transform var(--ui-motion) var(--ui-ease); }
.auth-page .auth-btn:hover,.auth-page .support-btn-submit:hover { background: #b1c8fa; transform: none; box-shadow: none; }
.auth-page .btn-google { background: var(--ui-surface-raised); color: var(--ui-text); border-color: var(--ui-border); }
.auth-page .support-float-btn { width: 48px; height: 48px; background: var(--ui-surface-raised); border: 1px solid var(--ui-border); color: var(--ui-accent); box-shadow: none; animation: none; }
.auth-page .support-modal { background: var(--ui-surface); border-color: var(--ui-border); border-radius: 12px; width: min(560px,calc(100vw - 32px)); }
.auth-page .support-modal-close { min-width: 44px; min-height: 44px; }
.auth-page .support-modal-body { padding: 24px; }
.auth-page .form-control { background: var(--ui-bg); border-color: var(--ui-border); font: 400 16px var(--ui-font); min-height: 48px; }
.auth-page .auth-toast { color: var(--ui-text); max-width: calc(100vw - 32px); background: var(--ui-surface-raised); border-color: var(--ui-border); box-shadow: var(--ui-shadow); border-radius: 8px; }
/* Responsive */
@media (max-width: 1200px) {
  .app-page .header-wrap { gap: 16px; }
  .app-page .nav-link { padding-inline: 8px; }
  .app-page .navigation { gap: 0; }
}
@media (max-width: 1024px) {
  .app-page .header-wrap { height: 72px; }
  .app-page .menu-toggle { display: inline-grid; place-items: center; }
  .app-page .navigation { display: none; position: absolute; top: 72px; left: 0; right: 0; padding: 16px 32px; background: var(--ui-surface); border-bottom: 1px solid var(--ui-border); }
  .app-page .navigation.active { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .app-page #navUserProfile { grid-column: 1/-1; }
  .app-page .dashboard-layout { grid-template-columns: minmax(0,1fr) !important; }
  .app-page .sidebar-panel { order: -1; }
  .app-page .stats-card { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; padding: 24px; }
  .app-page .stats-title { grid-column: 1/-1; margin: 0; }
  .app-page .stats-card .stat-item { padding: 0; display: grid; border: none; }
  .app-page :is(.admin-main,.profile-main) { padding: 32px; }
  .auth-page .auth-form-col { padding: 32px; }
}
@media (max-width: 768px) {
  .profile-page .profile-layout { display: block; }
  .profile-page .sidebar { position: static; width: 100%; height: auto; min-height: 0; padding: 16px; border-right: 0; border-bottom: 1px solid var(--ui-border); }
  .profile-page .sidebar-logo { margin-bottom: 12px; }
  .profile-page .sidebar-nav { display: flex; overflow-x: auto; gap: 8px; }
  .profile-page .sidebar-link { padding: 8px 14px; }
  .profile-page .sidebar-footer { padding: 12px 0 0; margin-top: 12px; }
  .profile-page .profile-main { min-height: auto; padding: 32px 16px 48px; }
  .profile-page #profileForm { padding: 20px; }
  .profile-page .profile-overview { align-items: start; flex-direction: column; padding: 24px; margin-bottom: 28px; }
}
@media (max-width: 768px) {
  .app-page .app-container { padding-inline: 16px; }
  .app-page .header-wrap { height: 64px; }
  .app-page .navigation { top: 64px; padding: 16px; }
  .dashboard-page main.app-container { padding-block: 32px 48px !important; }
  .dashboard-header-row { align-items: start; flex-direction: column; }
  .dashboard-toolbar { width: 100%; flex-wrap: wrap; }
  .app-page #mobileFilters.filters-row { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .app-page .search-bar { grid-column: 1/-1; }
  .app-page .filter-select { width: 100%; }
  .app-page .stats-card { grid-template-columns: repeat(2,minmax(0,1fr)); padding: 16px; }
  .app-page .order-card-modern { padding: 16px; }
  .app-page .oc-body { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
  .app-page .oc-header { flex-wrap: wrap; gap: 8px; }
  .app-page .oc-title { font-size: 16px; }
  .ui-empty { padding: 32px 24px; }
  .app-page :is(.modal-content,.premium-modal) { padding: 24px; }
  .app-page .modal-content [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; gap: 0 !important; }
  .order-dialog__panel { padding: 24px; }
  .app-page :is(.admin-layout,.profile-layout) { display: block; }
  .app-page .sidebar { position: static; width: 100%; height: auto; padding: 16px; border-right: 0; border-bottom: 1px solid var(--ui-border); }
  .app-page .sidebar-logo { padding: 0; margin-bottom: 16px; }
  .app-page .sidebar-nav { display: flex; overflow-x: auto; gap: 8px; }
  .app-page .sidebar-link { white-space: nowrap; border-left: 0; padding: 8px 16px; border-radius: 8px; }
  .app-page .sidebar-footer { padding: 16px 0 0; margin-top: 16px; }
  .app-page :is(.admin-main,.profile-main) { margin-left: 0; padding: 32px 16px; }
  .app-page .admin-topbar { flex-direction: column; align-items: start; }
  .app-page .stats-row { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
  .app-page .stat-card { padding: 16px 8px; }
  .app-page .stat-lbl { font-size: 11px; }
  .app-page .stat-val { font-size: 24px; }
  .auth-page .auth-header-bar { padding: 16px; min-height: 64px; }
  .auth-page .auth-wrapper { padding: 16px 16px 48px; }
  .auth-page .auth-media-col { display: none; }
  .auth-page .auth-form-col { width: 100%; padding: 24px; }
  .auth-page .auth-title { font-size: 28px; }
  .auth-page .auth-options { gap: 8px; flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

.auth-page .auth-switch .auth-link { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 8px; }
.auth-page .auth-link[role="button"] { display: inline-flex; align-items: center; min-height: 44px; }
.auth-page .auth-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

.auth-text-button { background: none; border: none; padding: 8px; min-height: 44px; font: inherit; }

.app-page .stats-card .stat-label,.app-page .stats-card .stat-value { max-width: none; word-break: normal; overflow-wrap: anywhere; }
@media(max-width:1024px) { .app-page .stats-card .stat-value { text-align: left; } }

/* Store-style authentication panel */
body.auth-page{--auth-accent:#67e8f9;background-image:linear-gradient(120deg,rgba(4,7,15,.91),rgba(8,11,23,.76)),url('/assets/images/games/genshin_banner.jpg');background-position:center;background-size:cover;background-attachment:fixed}
.auth-page .auth-wrapper{align-items:center;padding:16px 24px 56px}
.auth-page .auth-container{width:min(100%,600px);max-width:600px;flex-direction:column;border:1px solid rgba(112,220,229,.7);border-radius:22px;background:rgba(10,13,25,.94);box-shadow:0 28px 90px rgba(0,0,0,.68),0 0 26px color-mix(in srgb,var(--auth-accent) 8%,transparent);backdrop-filter:blur(18px)}
.auth-page .auth-media-col{display:none}
.auth-page .auth-form-col{width:100%;padding:24px 32px;background:transparent}
.auth-page .auth-title{font-size:25px;line-height:1.25;margin-bottom:6px}
.auth-page .auth-subtitle{font-size:14px;margin-bottom:14px}
.auth-page .auth-form-card{padding:0;border:0;border-radius:0;background:transparent}
.auth-page .auth-form-title{font-size:21px;margin-bottom:13px}
.auth-page .auth-tabs-l1{gap:5px;padding:5px;margin-bottom:14px;border:1px solid rgba(255,255,255,.08);border-radius:13px;background:rgba(4,6,14,.72)}
.auth-page .auth-tab-l1{flex:1;text-align:center;padding:11px 14px}
.auth-page .auth-tab-l1[aria-selected="true"]{background:linear-gradient(110deg,rgba(103,232,249,.18),rgba(168,85,247,.2));color:#fff;box-shadow:inset 0 0 0 1px rgba(103,232,249,.28)}
.auth-page .auth-input{height:48px;color:#f4f6fb;background:rgba(4,6,14,.72);border-color:rgba(255,255,255,.14);border-radius:12px}
.auth-page .auth-input::placeholder{color:#8f98aa}
.auth-page .auth-input:focus{color:#fff;background:rgba(4,6,14,.9);border-color:var(--auth-accent);box-shadow:0 0 0 3px rgba(103,232,249,.14)}
.auth-page .input-group{margin-bottom:12px}
.auth-page #registerForm .helper-text{font-size:11px;line-height:1.3;margin-top:3px}
.auth-page #registerForm .auth-checkbox{min-height:36px;margin:2px 0 10px}
.auth-page .input-icon{color:#67dce9}
.auth-page .input-wrapper .toggle-password{color:#8791a5}
.auth-page .btn-login,.auth-page .btn-register{background:linear-gradient(105deg,#ec2f91,#8b4cf6);color:#fff;box-shadow:0 10px 26px rgba(190,46,200,.24)}
.auth-page .btn-login:hover,.auth-page .btn-register:hover{box-shadow:0 12px 30px rgba(190,46,200,.34)}
.auth-page .auth-switch{font-size:13px}
@media(max-width:768px){.auth-page .auth-wrapper{align-items:flex-start;padding:12px 16px 40px}.auth-page .auth-container{max-width:520px}.auth-page .auth-form-col{padding:20px 20px}.auth-page .auth-title{font-size:24px}.auth-page .auth-subtitle{margin-bottom:12px}.auth-page #registerForm .input-group{margin-bottom:10px}}

@media (max-width: 768px) {
  .dashboard-page .account-summary { gap: 8px; margin-bottom: 24px; }
  .dashboard-page .account-summary article { min-height: 108px; padding: 16px 12px; }
  .dashboard-page .account-summary article strong { font-size: 25px; }
  .dashboard-page .account-summary article span { font-size: 9px; letter-spacing: .03em; }
}
@media(max-width:768px){
  .app-page .tabs-container{scrollbar-width:none;overscroll-behavior-x:contain}
  .app-page .tabs-container::-webkit-scrollbar{display:none}
}
/* Dashboard guest entry and authenticated order workspace. */
.dashboard-guest-card{max-width:900px;margin:32px auto;padding:clamp(28px,5vw,52px);text-align:center;border:1px solid var(--ui-border);border-radius:18px;background:radial-gradient(ellipse at 50% 0,color-mix(in srgb,var(--ui-accent) 11%,transparent),transparent 62%),linear-gradient(145deg,var(--ui-surface),var(--ui-bg));box-shadow:var(--ui-shadow)}
.dashboard-guest-icon{display:grid;width:58px;height:58px;margin:0 auto 18px;place-items:center;border:1px solid color-mix(in srgb,var(--ui-accent) 42%,transparent);border-radius:16px;background:color-mix(in srgb,var(--ui-accent) 12%,var(--ui-surface));color:var(--ui-accent);font-size:22px}
.dashboard-guest-eyebrow{margin:0 0 8px;color:var(--ui-accent);font-size:11px;font-weight:700;letter-spacing:.12em}
.dashboard-guest-card h2{margin:0 0 10px;color:var(--ui-text);font-size:clamp(22px,3vw,30px);font-weight:700;letter-spacing:-.03em}
.dashboard-guest-card>p:not(.dashboard-guest-eyebrow){max-width:620px;margin:0 auto 22px;color:var(--ui-muted);font-size:14px;line-height:1.75}
.dashboard-guest-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.dashboard-guest-actions .btn{min-height:46px;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:10px 18px}
.dashboard-guest-card>small{display:block;margin-top:18px;color:var(--ui-muted);font-size:11px}
.dashboard-page:not(.dashboard-authenticated) .tabs-container,.dashboard-page:not(.dashboard-authenticated) #mobileFilters,.dashboard-page:not(.dashboard-authenticated) .dashboard-layout,.dashboard-page:not(.dashboard-authenticated) .order-count-badge{display:none!important}
.dashboard-page.dashboard-authenticated #dashboardGuestCard{display:none!important}
@media(max-width:768px){.dashboard-guest-card{margin:24px auto;padding:28px 20px}.dashboard-guest-actions{display:grid;grid-template-columns:1fr}.dashboard-guest-actions .btn{width:100%}}
/* Auth panel dimensions mirror the centered reference modal. */
.auth-page .auth-container{max-height:calc(100vh - 112px);overflow:hidden}
.auth-page .auth-form-col{min-height:0;justify-content:flex-start;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--ui-border-hover) transparent}
.auth-page .auth-form-col::-webkit-scrollbar{width:6px}
.auth-page .auth-form-col::-webkit-scrollbar-thumb{border-radius:999px;background:var(--ui-border-hover)}
.auth-panel-kicker{display:flex;align-items:center;gap:8px;margin:0 0 12px;color:var(--ui-accent);font-size:10px;font-weight:700;letter-spacing:.14em}
.auth-panel-kicker>span{width:7px;height:7px;border-radius:50%;background:var(--ui-accent);box-shadow:0 0 10px color-mix(in srgb,var(--ui-accent) 60%,transparent)}
@media(max-width:768px){.auth-page .auth-container{max-height:calc(100vh - 88px)}.auth-page .auth-form-col{max-height:calc(100vh - 88px)}}
/* Profile storefront shell parity continuation. */
.profile-page{--profile-accent:#67e8f9}
.profile-page .profile-main{width:100%;min-height:calc(100vh - 80px);margin:0;padding:56px 0 72px;background:transparent}
.profile-page .profile-content-shell{width:min(calc(100% - 48px),1200px);max-width:1200px;margin:0 auto}
.profile-page .profile-overview{align-items:center;margin:0 0 28px;padding:30px 32px;border-color:color-mix(in srgb,var(--profile-accent) 18%,transparent);border-radius:16px;background:radial-gradient(ellipse at 85% 0,color-mix(in srgb,var(--profile-accent) 9%,transparent),transparent 52%),linear-gradient(125deg,rgba(18,24,39,.98),rgba(12,16,28,.94));box-shadow:0 18px 48px rgba(0,0,0,.2)}
.profile-page .profile-overview h1{margin:6px 0 8px;font-size:clamp(28px,4vw,40px)}
.profile-page .profile-overview h1 span{color:var(--profile-accent)}
.profile-page .profile-overview .btn{border-color:color-mix(in srgb,var(--profile-accent) 24%,transparent);border-radius:8px;background:rgba(14,18,31,.72);color:var(--ui-text)}
.profile-page .profile-tabs{display:flex;align-items:center;gap:8px;margin:0 0 32px;padding:0 0 12px;border-bottom:1px solid var(--ui-border);overflow-x:auto;scrollbar-width:none}
.profile-page .profile-tabs::-webkit-scrollbar{display:none}
.profile-page .profile-tabs .sidebar-link{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 16px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--ui-muted);font:500 13px/1.4 var(--ui-font);white-space:nowrap;cursor:pointer}
.profile-page .profile-tabs .sidebar-link:hover{border-color:var(--ui-border);background:var(--ui-surface);color:var(--ui-text)}
.profile-page .profile-tabs .sidebar-link.active{border-color:color-mix(in srgb,var(--profile-accent) 18%,transparent);background:color-mix(in srgb,var(--profile-accent) 8%,transparent);color:color-mix(in srgb,var(--profile-accent) 74%,white)}
.profile-page .section-title{margin-bottom:8px;font-size:clamp(24px,3vw,32px)}
.profile-page .section-title + p{margin-bottom:24px!important}
.profile-page .my-orders-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr))}
.profile-page .claim-box{max-width:640px;border-color:var(--ui-border);background:var(--ui-surface)}
.profile-page #profileForm{max-width:720px;border-radius:12px;background:var(--ui-surface)}
.profile-page .btn-save{min-height:48px;border-radius:8px;background:var(--lp-text);color:var(--lp-bg);box-shadow:none;font:600 13px var(--ui-font);letter-spacing:0;text-transform:none}
.profile-page .btn-save:hover{background:var(--lp-accent);box-shadow:none;transform:translateY(-1px)}
.profile-page .profile-header-actions{display:flex;align-items:center;gap:8px}
.profile-page .profile-header-actions .lp-button{min-height:44px;padding:8px 14px;gap:8px;font-size:12px;cursor:pointer}
.profile-page .profile-header-actions .lp-button-outline{border-color:var(--lp-line);background:transparent;color:var(--lp-muted)!important}
.profile-page .profile-header-actions .lp-button-outline:hover{border-color:rgba(238,146,152,.4);color:#f5adb2!important}
.profile-page #lpMobileNav button{display:flex;align-items:center;gap:8px;min-height:48px;padding:8px 16px;border:0;border-bottom:1px solid var(--lp-line);background:transparent;color:var(--lp-muted);font-size:13px;text-align:left;cursor:pointer}
.profile-page #lpMobileNav button:hover{color:var(--lp-text);background:var(--lp-surface)}
@media(max-width:768px){
 .profile-page .profile-main{min-height:calc(100vh - 64px);padding:32px 0 48px}
 .profile-page .profile-content-shell{width:min(calc(100% - 32px),1200px)}
 .profile-page .profile-overview{align-items:flex-start;padding:24px;gap:18px;margin-bottom:20px}
 .profile-page .profile-tabs{margin-bottom:26px}
 .profile-page .profile-tabs .sidebar-link{padding-inline:12px;font-size:12px}
 .profile-page .profile-header-actions .lp-button-quiet{display:none}
}
@media(max-width:520px){.profile-page .profile-overview{padding:20px}.profile-page .profile-overview .btn{width:100%}.profile-page .profile-header-actions .lp-button-outline{width:42px;min-width:42px;padding:0;font-size:0}.profile-page .profile-header-actions .lp-button-outline i{font-size:14px}.profile-page #profileForm{padding:20px}}

/* Embedded auth panel used by the home-page account dialog. */
html.auth-embedded,html.auth-embedded body.auth-page{width:100%;height:100%;min-width:0;min-height:0;margin:0;overflow:hidden;background:transparent!important}
html.auth-embedded body.auth-page{display:block}
html.auth-embedded .auth-header-bar,html.auth-embedded .auth-particles,html.auth-embedded #particles,html.auth-embedded .support-float-btn{display:none!important}
html.auth-embedded .auth-wrapper{display:block;width:100%;height:100%;min-height:0;padding:0}
html.auth-embedded .auth-container{width:100%;max-width:none;max-height:none;height:100%;min-height:0;overflow:hidden;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none}
html.auth-embedded .auth-form-col{width:100%;max-height:100%;min-height:0;overflow-y:auto;padding:24px clamp(20px,6vw,36px);overscroll-behavior:contain}
html.auth-embedded .auth-title,html.auth-embedded .auth-subtitle{display:none}html.auth-embedded .auth-panel-kicker{margin-bottom:18px}
html.auth-embedded .auth-subtitle{margin-bottom:16px}
@media(max-width:520px){html.auth-embedded .auth-form-col{padding:20px 18px}}

/* Compact embedded form rhythm so account creation stays within the dialog on common displays. */
html.auth-embedded .auth-form-title{margin-bottom:12px}
html.auth-embedded .auth-tabs-l1{margin-bottom:12px}
html.auth-embedded .input-group{margin-bottom:12px}
html.auth-embedded .input-label{margin-bottom:4px;font-size:12px}
html.auth-embedded .auth-input{height:46px}
html.auth-embedded .helper-text{margin-top:3px;font-size:11px;line-height:1.4}
html.auth-embedded .auth-options{margin-bottom:12px!important}
html.auth-embedded .auth-btn{min-height:46px}
html.auth-embedded .auth-title{margin-bottom:4px}
html.auth-embedded .auth-subtitle{margin-bottom:10px}

html.auth-embedded .auth-form-col{padding:16px clamp(20px,6vw,36px) 10px}
html.auth-embedded .auth-form-title{margin-bottom:10px}
html.auth-embedded .auth-tabs-l1{margin-bottom:10px}
html.auth-embedded .input-group{margin-bottom:8px}
html.auth-embedded .input-label{margin-bottom:3px;font-size:11px}
html.auth-embedded .auth-input{height:44px}
html.auth-embedded .helper-text{margin-top:2px;font-size:10px;line-height:1.2}
html.auth-embedded .auth-options{margin-bottom:8px!important}
html.auth-embedded .auth-btn{min-height:44px}
html.auth-embedded .auth-switch{margin-top:8px}
@media(max-width:520px){html.auth-embedded .auth-form-col{padding:16px 18px 10px}}

/* Keep the embedded registration CTA visible in the homepage account dialog. */
html.auth-embedded #formRegisterWrap .auth-form-title{margin-bottom:7px}
html.auth-embedded #formRegisterWrap .input-group{margin-bottom:5px}
html.auth-embedded #formRegisterWrap .input-label{margin-bottom:2px;font-size:10px}
html.auth-embedded #formRegisterWrap .auth-input{height:38px}
html.auth-embedded #formRegisterWrap .helper-text{margin-top:1px;font-size:9px;line-height:1.15}
html.auth-embedded #formRegisterWrap .auth-options[style]{margin-bottom:4px!important}
html.auth-embedded #formRegisterWrap .auth-checkbox{min-height:26px;font-size:10px;line-height:1.25}
html.auth-embedded #formRegisterWrap .auth-btn{min-height:40px}
html.auth-embedded #formRegisterWrap .auth-switch{margin-top:2px;font-size:11px}
/* Compact full-page registration form while preserving the account fields and validation. */
.auth-page #formRegisterWrap .auth-form-title{margin-bottom:9px}
.auth-page #formRegisterWrap .input-group{margin-bottom:8px}
.auth-page #formRegisterWrap .input-label{font-size:12px;margin-bottom:3px}
.auth-page #formRegisterWrap .auth-input{height:42px}
.auth-page #formRegisterWrap .helper-text{font-size:10px;line-height:1.25;margin-top:2px}
.auth-page #formRegisterWrap .auth-options[style]{margin-bottom:8px!important}
.auth-page #formRegisterWrap .auth-checkbox{min-height:28px;font-size:11px;line-height:1.35}
.auth-page #formRegisterWrap .auth-btn{min-height:42px}
.auth-page #formRegisterWrap .auth-switch{margin-top:4px}
@media(max-height:800px) and (min-width:769px){.auth-page .auth-wrapper{padding-top:64px;padding-bottom:20px}.auth-page .auth-form-col{padding-top:16px;padding-bottom:16px}.auth-page .auth-subtitle{margin-bottom:10px}.auth-page .auth-tabs-l1{margin-bottom:10px}.auth-page #formRegisterWrap .input-group{margin-bottom:6px}}

/* Highlight the newly created top-up inside the shared order dashboard. */
.ui-order-highlight{outline:2px solid var(--ui-accent);outline-offset:4px;scroll-margin-top:100px}

/* Shared account orders include farming and top-up routes. */
.profile-page .profile-order-state{grid-column:1/-1;min-height:260px!important;width:100%;gap:16px;padding:36px!important;box-sizing:border-box}
.profile-page .profile-order-state h3{margin:0;color:var(--ui-text);font-size:20px}.profile-page .profile-order-state p{margin:0;max-width:520px;color:var(--ui-muted);font-size:13px;line-height:1.9}.profile-page .profile-empty-icon{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:color-mix(in srgb,var(--ui-accent) 10%,transparent);color:var(--ui-accent);font-size:24px}.profile-page .profile-empty-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:12px}.profile-page .profile-order-code{color:var(--ui-accent);font-size:12px;font-weight:700;margin-bottom:8px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}.profile-page .profile-order-kind{padding:3px 8px;border:1px solid var(--ui-border);border-radius:6px;color:var(--ui-muted);font-size:11px}.profile-page .profile-order-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.profile-page .profile-order-actions .btn{min-height:40px;font-size:12px}.profile-page [role=tab]:focus-visible{outline:2px solid var(--ui-accent);outline-offset:2px}.profile-page .profile-settings-shell{max-width:720px}.profile-page #profileForm{box-sizing:border-box;width:100%}
@media(max-width:520px){.profile-page .profile-order-state{padding:24px 18px!important}.profile-page .profile-empty-actions{width:100%}.profile-page .profile-empty-actions .btn{flex:1;white-space:nowrap}}

/* Single-order conversation view opened from the member profile */
.dashboard-order-focus #accountSummary,.dashboard-order-focus .tabs-container,.dashboard-order-focus #mobileFilters,.dashboard-order-focus .dashboard-toolbar,.dashboard-order-focus .sidebar-panel{display:none!important}
.dashboard-order-focus .dashboard-layout{grid-template-columns:minmax(0,1fr)!important;max-width:920px;margin-inline:auto}
.dashboard-order-focus .dashboard-header-row{max-width:920px;margin-inline:auto}
.dashboard-order-focus .dashboard-title-group .order-count-badge{display:none}