/* Reference redesign: existing services, detail sheets and staff tools.
   Motion / drag transforms, hidden states and payment behavior stay in app.js/v22.
   This layer deliberately contains no content and no interaction replacements. */

/* Common sheet surfaces. Leave transform and visibility to their state selectors. */
.design-action-icon { display:grid; place-items:center; flex:0 0 34px; width:34px; height:34px; border:1px solid #6c4782; border-radius:10px; background:#31144755; color:var(--ui-purple); font-style:normal; }
#modalBody .choice .design-action-icon { margin-right:10px; }
#modalBody .choice:has(.design-action-icon)>span:first-of-type { flex:1; min-width:0; }
#modalBody .choice:has(.design-action-icon)>b { flex:1; min-width:0; }
#modalBody .choice:has(.design-action-icon) { justify-content:flex-start; }
#modalBody .choice:has(.design-action-icon) { display:grid!important; grid-template-columns:34px minmax(0,1fr) auto!important; gap:10px!important; }
#modalBody .choice .design-action-icon { margin:0!important; }
#modalBody .choice .design-action-icon .ui-icon { width:20px; height:20px; }
#modalBody .modal-hero :is(.v11-stats-row, .v11-value) { position:relative!important; z-index:5!important; }
#modalBody .modal-hero .hero-image { max-height:100%!important; }
#modal .sheet {
  color: var(--ui-text);
  border-color: var(--ui-border) !important;
  border-radius: 24px 24px 0 0 !important;
  background: radial-gradient(ellipse at 95% 0, #5631741f, transparent 42%),
    linear-gradient(165deg, #10131d, var(--ui-bg) 78%) !important;
  box-shadow: 0 -22px 80px #000d, inset 0 1px 0 #b6b2df16 !important;
  padding-inline: clamp(14px, 4vw, 26px) !important;
  scrollbar-color: #615273 #0a0d14;
  scrollbar-width: thin;
}
#modal .sheet:before { background: linear-gradient(90deg, transparent, #db76ff68, #ffdc5960, transparent); }
#modal .sheet-grabber { background: #757b92 !important; height: 4px !important; box-shadow: none !important; }
#modal .sheet-close {
  background: #0c0f19ed !important;
  border-color: #4a5168 !important;
  color: #c7c9dc !important;
  border-radius: 12px !important;
}
#modalBody { color: var(--ui-text); line-height: 1.45; }
#modalBody h2 { font-size: clamp(21px, 5vw, 29px); line-height: 1.16; letter-spacing: -.025em; margin-bottom: 16px; }
#modalBody :is(h3, b, strong) { overflow-wrap: anywhere; }
#modalBody :is(small, .muted) { color: var(--ui-muted); }
#modalBody :is(.group-title, .list-title) { color: #b9bdd1; font-size: 11px; letter-spacing: .12em; margin: 22px 0 10px; }
#modalBody .formstack { gap: 12px; }
#modalBody .field { gap: 7px; min-width: 0; }
#modalBody .field label { color: #b2b7ca; font-size: 12px; line-height: 1.4; }
#modalBody .field label span { color: var(--ui-muted); }
#modalBody :is(input:not([type="checkbox"]):not([type="file"]), select, textarea) {
  min-width: 0 !important;
  width: 100%;
  min-height: 46px;
  padding: 12px 13px;
  border: 1px solid var(--ui-border);
  border-radius: 13px;
  background: #090d16;
  color: var(--ui-text);
  font: inherit;
  font-size: 14px;
  line-height: 1.4;
  box-sizing: border-box;
}
#modalBody input::placeholder, #modalBody textarea::placeholder { color: #9099af; opacity: 1; }
#modalBody textarea { resize: vertical; min-height: 104px; }
#modalBody :is(input:not([type="checkbox"]), select, textarea):focus {
  border-color: #c479ed !important;
  background: #0d101a !important;
  box-shadow: 0 0 0 3px #d275fa20 !important;
}
#modalBody :is(button, input, select, textarea):focus-visible { outline-color: var(--ui-purple) !important; }
#modalBody .choice {
  min-height: 58px;
  padding: 13px 14px;
  border-color: var(--ui-border);
  background: linear-gradient(155deg, #10141f, #080b12);
  border-radius: 15px;
  color: var(--ui-text);
}
#modalBody .choice b { font-size: 14px; line-height: 1.35; }
#modalBody .choice small { font-size: 12px; margin-top: 5px; line-height: 1.45; }
#modalBody .choice.active {
  border-color: #cc6ce9;
  background: linear-gradient(135deg, #2f1548, #0c0c16);
  box-shadow: inset 0 0 14px #c254ef18, 0 0 14px #be50f51c;
}
#modalBody .choice .check { color: var(--ui-purple); }
#modalBody .choice input[type="checkbox"]:checked {
  border-color: #d787fc !important;
  background: linear-gradient(135deg, #db76ff, #913aca) !important;
  box-shadow: 0 0 12px #bc54f12b !important;
}
#modalBody .choice input[type="checkbox"]:checked:before { background: #f4e9ff !important; }
#modalBody .smallbtn {
  min-height: 43px;
  padding: 10px 12px;
  border: 1px solid var(--ui-border);
  border-radius: 12px;
  background: linear-gradient(160deg, #111521, #080c14);
  color: #d3d5e3;
  font-size: 12px;
  line-height: 1.25;
  white-space: normal;
}
#modalBody .smallbtn.gold { border-color: #b08c2e; color: var(--ui-gold); background: linear-gradient(150deg, #251e0d, #090c13); }
#modalBody :is(.smallbtn.red, .smallbtn.danger) { border-color: #a83e4e; color: #ff7e8c; background: linear-gradient(150deg, #2b101a, #0c0d16); }
#modalBody .smallbtn.green { border-color: #4a8c73; color: #97eac0; }
#modalBody .primary-gold {
  min-height: 48px;
  border: 1px solid #ffe589 !important;
  border-radius: 13px;
  padding: 12px 16px;
  background: linear-gradient(115deg, #ffe983, #f9c623 50%, #c38c12) !important;
  color: #181200 !important;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
  box-shadow: inset 0 1px 0 #fff7be8c, 0 0 18px #ffce3826;
}
#modalBody :is(button:disabled, input:disabled, select:disabled, textarea:disabled) { opacity: .5 !important; cursor: default; }
#modalBody button:disabled { box-shadow: none !important; }
#modalBody .notice {
  padding: 13px 14px;
  border-color: var(--ui-border);
  background: #0d111b;
  color: #b1b8cb;
  font-size: 12px;
  line-height: 1.55;
}
#modalBody .notice b { color: var(--ui-text); }
#modalBody .notice.danger { border-color: #85434f; background: #23101a; color: #ffabba; }
#modalBody .notice.success { border-color: #436d62; background: #0e1d1c; color: #a5e6ca; }
#modalBody :is(.panel, .listitem) { border-color: var(--ui-border); background: linear-gradient(155deg, #10141f, #090c13); }
#modalBody .listitem { padding: 13px; gap: 12px; border-radius: 15px; }
#modalBody .listitem .grow { min-width: 0; }
#modalBody .listitem b { font-size: 14px; line-height: 1.35; }
#modalBody .listitem .muted { font-size: 11px; line-height: 1.5; margin-top: 4px; }
#modalBody .empty-list { font-size: 13px; line-height: 1.5; color: var(--ui-muted); }

/* Real currency/mode switches reuse the reference's segmented treatment. */
#modalBody :is(.rank-tabs, .currency-choice), #duels .duel-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 5px;
  margin-bottom: 14px;
  border: 1px solid var(--ui-border);
  border-radius: 15px;
  background: #080c14;
}
#modalBody :is(.rank-tabs, .currency-choice) button, #duels .duel-tabs button {
  min-width: 0;
  min-height: 44px;
  padding: 9px 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 11px;
  color: #b5bbce;
  font-size: 13px;
  line-height: 1.3;
}
#modalBody :is(.rank-tabs, .currency-choice) button.active, #duels .duel-tabs button.active {
  border-color: #d373f6;
  color: #edb3ff;
  background: linear-gradient(135deg, #321748, #110d1d);
  box-shadow: inset 0 0 12px #d776ff16, 0 0 11px #ba5afa26;
}

/* Car details use actual rarity, serial numbers and provenance from the API. */
#modalBody .garage-full-detail { padding-bottom: 10px; }
#modalBody .garage-detail-head { gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
#modalBody .garage-detail-head > b { padding: 7px 10px; border-color: #6f5483; background: #231530; color: #eaa2ff; font-size: 11px; }
#modalBody .garage-detail-quick { gap: 9px; margin-bottom: 12px; }
#modalBody .garage-detail-quick button {
  min-height: 44px;
  border-color: var(--ui-border);
  border-radius: 12px;
  background: #0b101a;
  color: #aeb7ca;
  font-size: 12px !important;
  white-space: normal !important;
  line-height: 1.3;
}
#modalBody #gdFav.active { border-color: #bc9436; color: var(--ui-gold); background: #211b0f; }
#modalBody #gdLock.active { border-color: #c267e5; color: #e7a5ff; background: #251333; }
#modalBody .modal-hero .car-hero.v11-result {
  --detail-accent: #59667e;
  min-height: 0 !important;
  border: 1px solid var(--detail-accent);
  border-radius: 18px !important;
  padding: 16px 13px !important;
  background: radial-gradient(ellipse at 55% 34%, #5e487524, transparent 52%), #090d16 !important;
}
#modalBody .modal-hero .car-hero[data-rarity="rare"] { --detail-accent: #6cafff; }
#modalBody .modal-hero .car-hero[data-rarity="epic"], #modalBody .modal-hero .car-hero[data-rarity="secret"] { --detail-accent: var(--ui-purple); }
#modalBody .modal-hero .car-hero[data-rarity="legendary"] { --detail-accent: var(--ui-gold); }
#modalBody .modal-hero .car-hero[data-rarity="relic"] { --detail-accent: #aceaff; }
#modalBody .secret-detail .modal-hero .car-hero { box-shadow: 0 0 0 1px #d67aff35, 0 0 24px #aa40d627; }
#modalBody .modal-hero .v11-hero-top { gap: 12px !important; }
#modalBody .modal-hero .hero-title { min-width: 0; }
#modalBody .modal-hero .hero-title h2 { font-size: clamp(21px, 4.8vw, 29px) !important; white-space: normal; line-height: 1.2 !important; }
#modalBody .modal-hero .hero-title p { font-size: 12px !important; line-height: 1.4; }
#modalBody .modal-hero .v11-brand-stack { flex: 0 0 65px; min-width: 0; max-width: 80px; }
#modalBody .modal-hero .hero-brand-logo { max-width: 70px !important; max-height: 52px !important; height: 52px !important; }
#modalBody .modal-hero .v11-car-stage { height: clamp(190px, 53vw, 300px) !important; grid-template-rows: minmax(0, 1fr) !important; min-height: 0 !important; margin: 8px -4px !important; }
#modalBody .modal-hero .hero-image { min-height: 0 !important; min-width: 0 !important; max-width: 100% !important; width: 100% !important; height: 100% !important; object-fit: contain; transform: none !important; }
#modalBody .modal-hero .v11-x-strip { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; }
#modalBody .modal-hero .v11-x-card { background: #0d101a; border-color: var(--ui-border); min-height: 58px; overflow: visible; padding: 9px; }
#modalBody .modal-hero .v11-x-card small { font-size: 11px; line-height: 1.35; white-space: normal !important; display: block !important; -webkit-line-clamp: unset; }
#modalBody .modal-hero .v11-x-card b { font-size: 14px; color: var(--ui-gold); }
#modalBody .modal-hero .v11-x-card.gold { grid-column: 1 / -1; }
#modalBody .modal-hero .v11-stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#modalBody .modal-hero .v11-stats-row > div { border-color: var(--ui-border); background: #0b101a; padding: 10px; }
#modalBody .modal-hero .v11-stats-row small { font-size: 11px; color: var(--ui-muted); }
#modalBody .modal-hero .v11-stats-row b { font-size: 12px; line-height: 1.4; white-space: normal; overflow: visible; }
#modalBody .modal-hero .v11-mileage { grid-column: 1 / -1; }
#modalBody .modal-hero .v11-value { width: 100% !important; border: 0 !important; background: none !important; margin: 10px 0 0 !important; text-align: left; padding: 6px 0 !important; }
#modalBody .modal-hero .v11-value small { color: var(--ui-muted) !important; font-size: 11px !important; }
#modalBody .modal-hero .v11-value strong { font-size: clamp(26px, 7vw, 38px) !important; color: var(--ui-gold) !important; overflow-wrap: anywhere; }
#modalBody :is(.garage-detail-grid, .global-car-stats, .market-analytics, .car-history-origin) { gap: 9px; }
#modalBody :is(.garage-detail-grid, .global-car-stats, .market-analytics, .car-history-origin) > div {
  min-width: 0;
  padding: 12px;
  border-color: var(--ui-border);
  background: linear-gradient(150deg, #111420, #0a0e17);
  border-radius: 13px;
}
#modalBody :is(.garage-detail-grid, .global-car-stats, .market-analytics, .car-history-origin) small { color: var(--ui-muted); font-size: 11px; letter-spacing: 0; line-height: 1.4; }
#modalBody :is(.garage-detail-grid, .global-car-stats, .market-analytics, .car-history-origin) b { font-size: 13px; white-space: normal; line-height: 1.45; margin-top: 5px; overflow: visible; }
#modalBody .garage-detail-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
#modalBody #gdHistory { grid-column: 1 / -1; }
#modalBody #gdSell:not(:disabled) { color: #191200; border-color: #ffe38b; background: linear-gradient(115deg, #ffe982, #f4c32b, #b9891f); box-shadow: 0 0 15px #fbc63122; }
#modalBody .car-history-head { flex-wrap: wrap; }
#modalBody .car-history-head p { font-size: 12px; color: var(--ui-muted); }
#modalBody .car-history-timeline { gap: 10px; }
#modalBody .car-history-timeline:before { background: linear-gradient(#d17dfd77, #46506d77); }
#modalBody .car-history-event { border-color: var(--ui-border); background: #0b0f19; padding: 12px; }
#modalBody .car-history-dot { border-color: #b675da; background: #271438; color: #e99aff; box-shadow: 0 0 15px #cf6cf523; }
#modalBody .car-history-event-top { flex-wrap: wrap; gap: 5px; }
#modalBody .car-history-event-top b { font-size: 13px; }
#modalBody .car-history-event-top time, #modalBody .car-history-event small { font-size: 11px; color: var(--ui-muted); white-space: normal; }
#modalBody .car-history-event p { font-size: 12px; line-height: 1.45; }
#modalBody .car-history-event strong { font-size: 14px; color: var(--ui-gold); }

/* Wallet, store, daily services and collection tools. */
#modalBody :is(.star-wallet-head, .shop-wallet-card) { border-color: #b29035; background: radial-gradient(ellipse at 100% 0, #ae862526, transparent 55%), #0c1018; border-radius: 18px; padding: 17px; }
#modalBody :is(.star-wallet-head, .shop-wallet-card) small { color: #bfa966; font-size: 10px; letter-spacing: .14em; }
#modalBody .star-wallet-head h2 { color: var(--ui-gold); font-size: clamp(30px, 8vw, 42px); margin-bottom: 9px; }
#modalBody .star-wallet-head p { font-size: 12px; line-height: 1.5; color: var(--ui-muted); max-width: 370px; }
#modalBody .star-wallet-head > span { font-size: 40px; }
#modalBody .star-topup-grid { gap: 9px; }
#modalBody .star-topup-grid button { min-height: 78px; border-color: #857132; background: linear-gradient(155deg, #201b10, #090d16); color: var(--ui-gold); border-radius: 14px; }
#modalBody .star-topup-grid b { font-size: 18px; }
#modalBody .star-topup-grid small { font-size: 11px; color: #bcb292; }
#modalBody .wallet-history > div { min-width: 0; border-color: var(--ui-border); background: #0a0f18; padding: 12px; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; }
#modalBody .wallet-history span { color: var(--ui-gold); font-size: 13px; }
#modalBody .wallet-history small { min-width: 0; font-size: 11px; overflow-wrap: anywhere; }
#modalBody .wallet-history b { font-size: 12px; overflow-wrap: anywhere; }
#modalBody .shop-wallet-card b { font-size: 30px; color: var(--ui-gold); }
#modalBody .shop-wallet-card span { font-size: 11px; color: var(--ui-muted); }
#modalBody .shop-wallet-card button { padding: 10px 12px; min-height: 44px; font-size: 12px; }
#modalBody .market-history { border-color: var(--ui-border); background: #0b1019; padding: 12px; }
#modalBody .market-history summary { font-size: 13px; color: #d9d4e7; }
#modalBody .market-history :is(span, b) { font-size: 12px; }
#modalBody .daily-head h2 { font-size: 28px; }
#modalBody .daily-head p { color: var(--ui-muted); font-size: 12px; line-height: 1.5; }
#modalBody .daily-task { border-color: var(--ui-border); background: linear-gradient(145deg, #141326, #090d16); border-radius: 17px; padding: 14px 12px; gap: 11px; }
#modalBody .daily-task.done { border-color: #a27437; box-shadow: inset 0 0 20px #ffd85b0b; }
#modalBody .daily-task-icon { color: #e19eff; border-color: #775092; background: #24142f; border-radius: 13px; }
#modalBody .daily-task-main { min-width: 0; }
#modalBody .daily-task-main b { font-size: 15px; line-height: 1.3; white-space: normal; }
#modalBody .daily-task-main small { font-size: 11px; color: var(--ui-muted); line-height: 1.45; white-space: normal; }
#modalBody .daily-difficulty { font-size: 10px; }
#modalBody .daily-task > strong { color: var(--ui-gold); font-size: 18px; }
#modalBody .daily-progress { background: #293047; height: 5px; }
#modalBody .daily-progress i { background: linear-gradient(90deg, #a951df, #e18eff); box-shadow: 0 0 9px #d472f655; }
#modalBody .daily-share { min-height: 42px; padding: 9px; border-color: #b06bd2; color: #e2a4fc; background: #251331; font-size: 11px; }
#modalBody .daily-all { border-color: #b39539; background: linear-gradient(145deg, #231d11, #0b0e16); padding: 15px; border-radius: 17px; }
#modalBody .daily-all b { font-size: 15px; }
#modalBody .daily-all small { font-size: 11px; line-height: 1.45; color: var(--ui-muted); }
#modalBody .daily-all strong { color: var(--ui-gold); }
#modalBody :is(.achievement-card, .showcase-pick, .codex-card, .feature-card, .select-car-card, .cooldown-card) { border-color: var(--ui-border); background: linear-gradient(150deg, #101521, #080c14); border-radius: 15px; }
#modalBody :is(.showcase-pick.active, .feature-card.active, .select-car-card.active) { border-color: #d17afa; box-shadow: 0 0 0 1px #d479fa44, 0 0 20px #cb6dff20; }
#modalBody .achievement-card { padding: 12px; gap: 10px; }
#modalBody .achievement-card.complete { border-color: #9e813a; }
#modalBody .achievement-card :is(small, span) { font-size: 11px; line-height: 1.45; }
#modalBody .achievement-icon { background: #271833; border: 1px solid #73518b; }
#modalBody .achievement-progress i { background: linear-gradient(90deg, #a751dc, #e39aff); }
#modalBody .showcase-pick b, #modalBody .select-car-card b, #modalBody .feature-card b { font-size: 13px; line-height: 1.3; white-space: normal; }
#modalBody .showcase-pick small, #modalBody .select-car-card small, #modalBody .feature-card small { font-size: 11px; line-height: 1.4; white-space: normal; }
#modalBody .showcase-pick img { height: 112px; }
#modalBody .codex-tools { margin: 15px 0; }
#modalBody .codex-copy { padding: 10px; }
#modalBody .codex-copy strong { font-size: 13px; white-space: normal; line-height: 1.35; }
#modalBody .codex-copy :is(small, span) { font-size: 11px; line-height: 1.4; }
#modalBody .codex-rarity-stats button { min-height: 55px; background: #0d111b; border-color: var(--ui-border); }
#modalBody .codex-rarity-stats :is(span, b) { font-size: 11px; }
#modalBody .coef-table div { padding: 11px; border-color: var(--ui-border); background: #0c101a; font-size: 12px; line-height: 1.4; }
#modalBody .referral-link input { font-size: 12px; }
#modalBody .referral-head p { font-size: 12px; line-height: 1.5; color: var(--ui-muted); }
#modalBody .ranking-row .price { font-size: 12px !important; max-width: 115px; }
#modalBody .suggest-list { border-color: #655378; background: #0d111d; }
#modalBody .suggest-list button { min-height: 62px; padding: 10px; gap: 10px; }
#modalBody .suggest-list b { font-size: 13px; line-height: 1.35; }
#modalBody .suggest-list small { font-size: 11px; }
#modalBody .browse-row { min-height: 48px; border-color: var(--ui-border); background: #0a0f19; }
#modalBody .browse-row button { min-width: 44px; min-height: 44px; color: var(--ui-purple); background: #171124; }
#modalBody .browse-row span { min-width: 0; font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }

/* Staff UI: permission explanations stay visible, selected controls use purple. */
#modalBody :is(.admin-main-head, .admin-player-head, .moderator-head, .admin-catalog-head, .admin-editor-head, .audit-head, .admin-history-head) {
  padding: 14px;
  margin-bottom: 14px;
  border: 1px solid var(--ui-border);
  border-radius: 17px;
  background: linear-gradient(135deg, #151322, #080c14);
}
#modalBody :is(.admin-main-head, .admin-player-head, .moderator-head, .admin-catalog-head, .admin-editor-head, .audit-head, .admin-history-head) small { color: #c9a8df; font-size: 10px; letter-spacing: .12em; }
#modalBody .admin-player-head p { color: var(--ui-muted); font-size: 12px; line-height: 1.5; }
#modalBody :is(.admin-role-chip, .moderator-head > span) { border-color: #ae8d37; color: var(--ui-gold); background: #211b0c; font-size: 11px; }
#modalBody :is(#admAudit, #admAppeals, #admApprovals) { border-color: #815295 !important; background: linear-gradient(140deg, #271435, #0b0e19) !important; }
#modalBody #admCatalog { border-color: #ab8c33; color: var(--ui-gold); }
#modalBody .admin-grid { gap: 9px; }
#modalBody .admin-grid .panel { display: grid; gap: 7px; padding: 14px; }
#modalBody .admin-grid .panel b { font-size: 25px; color: var(--ui-gold); }
#modalBody .admin-grid .panel .muted { font-size: 12px; }
#modalBody .admin-ban-settings { border-color: #8b434e; background: linear-gradient(145deg, #241019, #0c1019); gap: 12px; padding: 15px; }
#modalBody .admin-ban-settings h3 { color: #ff9aa7; font-size: 18px; }
#modalBody .admin-player-extra { border-color: #7d6936; background: #13110e; padding: 13px; }
#modalBody .admin-player-extra summary { color: var(--ui-gold); font-size: 13px; line-height: 1.4; cursor: pointer; }
#modalBody [data-admin-target] { border-color: #a68738; color: var(--ui-gold); }
#modalBody .admin-catalog-head-actions { gap: 8px; }
#modalBody .admin-catalog-head-actions button { font-size: 12px !important; min-height: 44px !important; }
#modalBody .admin-catalog-tools { background: #0a0e19f5; gap: 9px; padding: 8px 0 12px; top: 0 !important; }
#modalBody .admin-catalog-tools :is(input, select) { font-size: 13px; min-height: 45px; }
#modalBody .admin-catalog-bulk {
  position: static;
  top: auto !important;
  border-color: #bc6de4;
  background: #1e112bf5;
  border-radius: 14px;
  flex-wrap: wrap;
  overflow-x: visible !important;
  padding: 10px;
}
#modalBody .admin-catalog-bulk b { width: 100%; font-size: 13px; color: #e9a7ff; }
#modalBody .admin-catalog-bulk :is(button, select, input) { font-size: 11px; min-height: 38px; height: auto; }
#modalBody .admin-catalog-bulk input { width: 80px; }
#modalBody .admin-catalog-grid { gap: 11px; }
#modalBody .admin-car-card { border-color: var(--ui-border); background: linear-gradient(145deg, #101420, #080c14); border-radius: 17px; }
#modalBody .admin-car-card.selected { outline: 1px solid var(--ui-purple); border-color: var(--ui-purple); box-shadow: 0 0 16px #c366f933; }
#modalBody .admin-select { width: 31px; height: 31px; border-radius: 9px; background: #0b0f19; border-color: #82899e; }
#modalBody .admin-select.on { background: linear-gradient(145deg, #e395ff, #a443d5); color: #13091d; border-color: #e6a3ff; }
#modalBody .admin-car-image { height: 148px; background: radial-gradient(ellipse at 50% 80%, #57226e44, transparent 72%), #0a0e16; }
#modalBody .admin-car-body { padding: 11px; }
#modalBody .admin-car-card h3 { font-size: 15px; line-height: 1.3; margin: 8px 0 4px; }
#modalBody .admin-car-card small { font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
#modalBody .admin-car-meta { flex-wrap: wrap; gap: 5px; }
#modalBody .admin-car-meta .badge, #modalBody .admin-special { font-size: 9px; }
#modalBody .admin-car-stats { font-size: 11px; gap: 8px; flex-wrap: wrap; }
#modalBody .admin-car-stats span:last-child { flex-basis: 100%; color: var(--ui-muted); }
#modalBody .admin-car-actions { gap: 6px; }
#modalBody .admin-car-actions button { min-height: 43px !important; font-size: 11px; }
#modalBody .admin-status { font-size: 9px; }
#modalBody .admin-editor-grid { gap: 12px; }
#modalBody .admin-editor-flags { gap: 10px; margin: 14px 0; }
#modalBody .admin-editor-garage-preview { border-color: #706180; background: radial-gradient(ellipse at 50% 40%, #56346935, transparent 65%), #080c14; }
#modalBody .admin-editor-preview-head { border-color: var(--ui-border); background: #0b101a; padding: 13px; gap: 10px; }
#modalBody .admin-editor-preview-head b { font-size: 12px; }
#modalBody .admin-editor-preview-head small { font-size: 10px; }
#modalBody .admin-image-row { gap: 8px; }
#modalBody .admin-file-btn { font-size: 12px; }
#modalBody .admin-editor-actions { gap: 10px; }
#modalBody .admin-editor-actions button { min-height: 48px; white-space: normal; }
#modalBody :is(.audit-kpis, .mod-usage) { gap: 9px; margin: 14px 0; }
#modalBody :is(.audit-kpis, .mod-usage) > div { background: #0c101a; border-color: var(--ui-border); padding: 11px; }
#modalBody :is(.audit-kpis, .mod-usage) small { font-size: 11px; line-height: 1.4; }
#modalBody :is(.audit-kpis, .mod-usage) b { font-size: 20px; color: var(--ui-gold); }
#modalBody .audit-filters { gap: 10px; margin: 15px 0; }
#modalBody .audit-check { border-color: var(--ui-border); color: #bac0d0; font-size: 12px; background: #0c101b; min-height: 44px; }
#modalBody .audit-check input[type="checkbox"] { width: 18px !important; height: 18px; accent-color: var(--ui-purple); }
#modalBody .audit-row { border-color: var(--ui-border); background: linear-gradient(155deg, #121422, #090d16); padding: 14px; }
#modalBody .audit-row.sev-warning { border-color: #a4525f; }
#modalBody .audit-row-top { flex-wrap: wrap; gap: 7px; }
#modalBody .audit-row-top :is(time, small) { font-size: 11px; color: var(--ui-muted); }
#modalBody .audit-category { font-size: 10px; padding: 5px 8px; border-color: #75538c; color: #e2a2fa; background: #22152d; }
#modalBody .audit-row h3 { font-size: 15px !important; line-height: 1.35; }
#modalBody .audit-ru-summary { font-size: 12px; line-height: 1.5; color: #b2b9ca; }
#modalBody .audit-flow b { font-size: 12px; white-space: normal; overflow: visible; line-height: 1.4; }
#modalBody .audit-flow small { font-size: 11px; white-space: normal; overflow: visible; }
#modalBody .audit-http { font-size: 10px; padding: 9px; white-space: normal; overflow-wrap: anywhere; background: #060a12; color: #a3aec2; }
#modalBody .audit-row summary { font-size: 12px; color: #d6b2e7; }
#modalBody .audit-row :is(pre, .audit-ru-details) { font-size: 11px; line-height: 1.6; background: #080c15; color: #bdc5d7; }
#modalBody .audit-pager { gap: 10px; margin-top: 14px; }
#modalBody .moderator-action { gap: 11px; }
#modalBody .moderator-buttons { gap: 9px; }
#modalBody .mod-player { min-height: 70px; padding: 13px; border-color: var(--ui-border); border-radius: 15px; background: linear-gradient(150deg, #111420, #080c14); }
#modalBody .mod-player.banned { border-color: #a54c5c; background: linear-gradient(150deg, #26111b, #0b0e18); }
#modalBody .mod-player b { font-size: 14px; }
#modalBody .mod-player small { font-size: 11px; white-space: normal; line-height: 1.45; }
#modalBody .mod-player em { color: var(--ui-gold); font-size: 11px; }
#modalBody :is(.mod-recent, .mod-approval-list, .risk-list, .admin-payment-issues, .admin-history-list, .backup-list) { display: grid; gap: 10px; }
#modalBody :is(.mod-recent, .mod-approval-list, .risk-list, .admin-payment-issues, .admin-history-list, .backup-list) article { min-width: 0; padding: 14px; border: 1px solid var(--ui-border); border-radius: 15px; background: #0b101a; gap: 10px; }
#modalBody :is(.mod-recent, .mod-approval-list, .risk-list, .admin-payment-issues, .admin-history-list, .backup-list) article b { font-size: 13px; }
#modalBody :is(.mod-recent, .mod-approval-list, .risk-list, .admin-payment-issues, .admin-history-list, .backup-list) article small { font-size: 11px; white-space: normal; overflow-wrap: anywhere; overflow: visible; }
#modalBody :is(.mod-recent, .mod-approval-list, .risk-list) article p { font-size: 12px; line-height: 1.5; }
#modalBody .risk-list pre { font-size: 11px; line-height: 1.5; padding: 10px; background: #060a12; border-radius: 10px; color: #b5bfd2; }
#modalBody .admin-payment-issues article { display: grid; border-color: #9b5a65; }
#modalBody .admin-payment-issues article > span { font-size: 12px; color: #c5c5d4; }
#modalBody .emergency-switch { padding: 14px; border-color: var(--ui-border); background: #0c111a; }
#modalBody .emergency-switch.off { border-color: #a75564; background: #25111b; }
#modalBody .emergency-switch b { font-size: 14px; }
#modalBody .emergency-switch small { font-size: 11px; }
#modalBody :is(.econ-dashboard-grid, .econ-strip, .econ-market, .sim-rarity-grid) { gap: 10px; }
#modalBody :is(.econ-dashboard-grid, .econ-strip, .econ-market, .sim-rarity-grid) > div { min-width: 0; background: #0c101b; border-color: var(--ui-border); padding: 13px; }
#modalBody .econ-dashboard-grid b { color: var(--ui-gold); font-size: 21px; }
#modalBody :is(.econ-dashboard-grid, .econ-strip, .econ-market, .sim-rarity-grid) small { font-size: 11px; line-height: 1.4; }
#modalBody :is(.econ-dashboard-grid, .econ-strip, .econ-market) span { font-size: 11px; line-height: 1.45; }
#modalBody .econ-kind-list article { border-color: var(--ui-border); background: #0b101a; padding: 12px; }
#modalBody .econ-kind-list article > b { white-space: normal; font-size: 12px; line-height: 1.4; }
#modalBody .econ-kind-list article > span { font-size: 13px; color: var(--ui-gold); }
#modalBody .system-health { border-color: var(--ui-border); background: #0c111a; padding: 15px; }
#modalBody .system-health :is(span, b) { font-size: 12px; }

/* Duel controls and results retain server-defined outcomes and wheel transforms. */
#duels .duel-create { border-color: #5f4f75; background: linear-gradient(145deg, #171220, #0a0e17); border-radius: 19px; padding: 18px; }
#duels .duel-create .field { margin-bottom: 13px; }
#duels .duel-create label { font-size: 12px; color: #b9bbcf; }
#duels .duel-create input { min-height: 47px; border-color: var(--ui-border); background: #090d16; font-size: 14px; }
#duels .duel-history-row { border-color: var(--ui-border); background: #0b1019; padding: 13px; }
#duels .duel-history-row b { font-size: 14px; }
#duels .duel-history-row small { font-size: 12px; }
#modalBody .duel-animation { border-color: #645173; background: radial-gradient(ellipse, #49245845, transparent 70%), #090d16; }
#modalBody .duel-cube { border-color: #af72d6; color: #ecc8ff; background: linear-gradient(135deg, #361c49, #10111b); }
#modalBody .duel-coin { border-color: #ebca62; background: radial-gradient(circle at 35% 25%, #f5d976, #9e701c); }
#modalBody .wheel-wrap { max-width: 100%; }
#modalBody .wheel { border-color: #392b19; box-shadow: 0 0 0 2px #c09b40, 0 0 34px #e0ad2324; }
#modalBody .wheel-hub { border-color: #d4af4d; background: #11101a; color: var(--ui-gold); }
#modalBody .cooldown-card { padding: 14px; }
#modalBody .cooldown-card span { color: var(--ui-muted); font-size: 12px; }

/* Confirmations keep their higher dialog layer and original open/close transform. */
#dialog .dialog-card { border-color: #716081 !important; background: linear-gradient(145deg, #1c1628, #0a0e18) !important; color: var(--ui-text); border-radius: 20px; padding: 22px; }
#dialog .dialog-card h3 { font-size: 20px; line-height: 1.3; }
#dialog .dialog-card p { color: #b9bdd0; font-size: 13px; line-height: 1.5; }
#dialog .dialog-text-input { border-color: #75608c; background: #080d17; min-height: 48px; }
#dialog .dialog-actions button { min-height: 47px; font-size: 13px; border-color: var(--ui-border); background: #0b101a; }
#dialog .dialog-actions .confirm { color: #181200; background: linear-gradient(115deg, #ffe77e, #e9b72a); border-color: #efce65; }
#dialog .dialog-actions .confirm.danger { border-color: #ef6273 !important; background: linear-gradient(135deg, #ff8898, #da3d53) !important; color: #210812 !important; }

/* Ban data is supplied by session-status; no decorative dates, rules or owners. */
body.is-banned { background: radial-gradient(ellipse at 50% 0, #6e0d221c, transparent 55%), var(--ui-bg) !important; }
body.is-banned .ban-gate-v32 { padding: clamp(18px, 4vw, 42px) 14px 40px !important; min-height: 100dvh !important; }
body.is-banned .ban-card-v32 {
  width: min(100%, 650px) !important;
  max-width: 650px !important;
  padding: clamp(16px, 4vw, 28px) !important;
  gap: 15px !important;
  text-align: left !important;
  border: 1px solid #ec5368 !important;
  border-radius: 22px !important;
  background: radial-gradient(ellipse at 95% 3%, #6d122842, transparent 37%), linear-gradient(155deg, #1d0d17, #090d16 46%, #070a11) !important;
  box-shadow: 0 0 0 1px #fc536728, 0 0 28px #f0445822, 0 28px 80px #000b !important;
}
body.is-banned .ban-v32-head { display: grid !important; grid-template-columns: 58px minmax(0, 1fr) !important; gap: 5px 13px !important; text-align: left !important; justify-items: start !important; align-items: center !important; }
body.is-banned .ban-v32-head .ban-lock { grid-column: 1; grid-row: 1 / 3; margin: 0 !important; width: 58px !important; height: 58px !important; border-radius: 15px !important; border-color: #eb586c !important; background: linear-gradient(145deg, #6a1325, #220b13) !important; font-size: 28px !important; box-shadow: 0 0 22px #ff52672b !important; }
body.is-banned .ban-gate-glow { pointer-events: none; }
body.is-banned .ban-v32-eyebrow { grid-column: 2; color: #ff8090 !important; font-size: 10px !important; letter-spacing: .12em !important; }
body.is-banned .ban-v32-head h1 { grid-column: 2; font-size: clamp(23px, 5.5vw, 34px) !important; color: #fff2f4 !important; line-height: 1.17 !important; letter-spacing: -.025em; }
body.is-banned .ban-v32-head p { grid-column: 1 / -1; margin-top: 10px !important; font-size: 14px !important; color: #c0b5c0 !important; line-height: 1.5 !important; }
body.is-banned .ban-reason-block { padding: 15px !important; background: #100c16d9 !important; border-color: #75404f !important; border-radius: 14px !important; gap: 7px !important; }
body.is-banned .ban-reason-block strong { font-size: 16px; line-height: 1.45 !important; }
body.is-banned .ban-v32-meta { gap: 10px !important; }
body.is-banned .ban-v32-meta > div { background: #0b0e17d9 !important; border-color: #4c3d50 !important; padding: 14px !important; }
body.is-banned .ban-v32-meta b, body.is-banned .ban-v32-meta a { font-size: 14px !important; }
body.is-banned .ban-v32-meta a { color: var(--ui-purple) !important; text-decoration-thickness: 1px; text-underline-offset: 3px; }
body.is-banned .ban-v32-appeal { margin-top: 4px !important; padding: clamp(14px, 3.5vw, 20px) !important; gap: 12px !important; border: 1px solid #cb6ef1 !important; border-radius: 17px !important; background: radial-gradient(ellipse at 0 0, #69388d2e, transparent 65%), #0b0e19 !important; box-shadow: 0 0 18px #ac58e01c; }
body.is-banned .ban-v32-appeal h2 { font-size: clamp(20px, 4.6vw, 26px) !important; line-height: 1.2; }
body.is-banned .ban-v32-appeal p { font-size: 13px !important; color: #a9adc3 !important; }
body.is-banned .ban-v32-appeal label { color: #d4c7df !important; font-size: 12px !important; }
body.is-banned .ban-v32-appeal .ban-appeal-status { border-color: #5e436e !important; background: #170f23 !important; color: #d8b5e9 !important; font-size: 12px !important; line-height: 1.5 !important; }
body.is-banned .ban-v32-appeal .ban-appeal-text { min-height: 130px !important; background: #080d16 !important; border-color: #61556f !important; border-radius: 13px !important; font-size: 16px !important; color: #f1ecf8 !important; }
body.is-banned .ban-v32-appeal .ban-appeal-text::placeholder { color: #9295ad; opacity: 1; }
body.is-banned .ban-v32-appeal .ban-appeal-btn { min-height: 49px !important; border-color: #dc83ff !important; border-radius: 13px !important; color: #f2d7ff !important; background: linear-gradient(115deg, #743396, #49205f, #24112f) !important; box-shadow: inset 0 1px 0 #e6a4ff24, 0 0 18px #c653ed20; font-size: 15px; }
body.is-banned .ban-or { color: #8c879e !important; }
body.is-banned .ban-or:before, body.is-banned .ban-or:after { background: #433246 !important; }
body.is-banned .ban-card-v32 .ban-unban-btn { min-height: 55px !important; padding: 13px !important; border: 1px solid #ffe883 !important; background: linear-gradient(115deg, #ffe87d, #edba22, #b48624) !important; color: #1d1602 !important; border-radius: 14px !important; font-size: clamp(14px, 3.6vw, 18px) !important; box-shadow: 0 0 21px #ffce2c29, inset 0 1px 0 #fff9c777; }
body.is-banned .ban-card-v32 .ban-pay-note { padding: 11px 13px !important; border: 1px solid #756330; border-radius: 12px; font-size: 12px !important; line-height: 1.55 !important; color: #bcb8ab !important; background: #151309; }
body.is-banned :is(button:disabled, textarea:disabled) { opacity: .48 !important; cursor: default; box-shadow: none !important; }
body.is-banned :is(button, textarea, a):focus-visible { outline: 2px solid var(--ui-purple); outline-offset: 3px; }

/* Layout remains readable at phone widths and with long localized strings. */
@media (min-width: 541px) {
  #modalBody .admin-catalog-tools { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  #modalBody .admin-catalog-tools input { grid-column: 1 / -1 !important; }
  #modalBody .admin-car-image { height: 160px !important; }
}
@media (max-width: 540px) {
  #modalBody .admin-catalog-bulk { position: static !important; }
  #modalBody .admin-car-image { height: 125px !important; }
  #modalBody .admin-catalog-head-actions { width: 100% !important; }
  #modalBody .admin-catalog-head-actions button { flex: 1 1 88px !important; }
  #modalBody .admin-car-actions { grid-template-columns: 1fr; }
  #modalBody .car-history-origin { grid-template-columns: 1fr; }
  #modalBody .car-history-event-top { flex-direction: column; align-items: flex-start; }
  #modalBody .econ-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 430px) {
  #modalBody .audit-filters, #modalBody .moderator-action { grid-template-columns: 1fr; }
  #modalBody .mod-approval-request { display: grid; grid-template-columns: 1fr; gap: 9px; }
  #modalBody .daily-task { grid-template-columns: 36px minmax(0, 1fr) auto; padding: 12px 10px; }
  #modalBody .daily-task-main b { font-size: 14px; }
  #modalBody .daily-task-icon { width: 36px; height: 40px; font-size: 20px; }
  #modalBody .daily-share { max-width: 80px; }
  #modalBody .shop-wallet-card { flex-wrap: wrap; }
  #modalBody .wallet-history > div { grid-template-columns: 1fr auto; }
  #modalBody .wallet-history small { grid-row: 2; grid-column: 1 / -1; }
  #modalBody .wallet-history b { grid-column: 2; grid-row: 1; }
  #modalBody .achievement-card { grid-template-columns: 34px minmax(0, 1fr); }
  #modalBody .achievement-card button { grid-column: 2; justify-self: start; }
  #modalBody :is(.audit-kpis, .mod-usage) { gap: 6px; }
  #modalBody :is(.audit-kpis, .mod-usage) > div { padding: 9px 7px; }
  #modalBody :is(.audit-kpis, .mod-usage) small { font-size: 10px; }
  #modalBody .ranking-row { grid-template-columns: 30px minmax(0, 1fr) !important; }
  #modalBody .ranking-row .price { grid-column: 2; max-width: 100%; text-align: left; }
  #modalBody .econ-kind-list article { grid-template-columns: 1fr; }
  #modalBody .admin-history-list article, #modalBody .backup-list article { flex-wrap: wrap; }
  #modalBody .codex-rarity-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.is-banned .ban-v32-meta { grid-template-columns: 1fr !important; }
}
@media (max-width: 360px) {
  #modalBody .admin-editor-grid, #modalBody .admin-editor-flags { grid-template-columns: 1fr !important; }
  #modalBody .daily-task { grid-template-columns: 32px minmax(0, 1fr); }
  #modalBody .daily-task > strong, #modalBody .daily-share { grid-column: 2; justify-self: start; }
  #modalBody .modal-hero .v11-brand-stack { flex-basis: 50px; }
  #modalBody .modal-hero .hero-brand-logo { max-width: 50px !important; }
  #modalBody .admin-catalog-tools { grid-template-columns: 1fr !important; }
  #modalBody .admin-catalog-grid { grid-template-columns: 1fr !important; }
  body.is-banned .ban-v32-head { grid-template-columns: 48px minmax(0, 1fr) !important; gap: 5px 10px !important; }
  body.is-banned .ban-v32-head .ban-lock { width: 48px !important; height: 52px !important; }
}


/* Real reward, wheel, statistics and ranking panels */
#modalBody :is(.login-calendar,.game-prize-grid,.game-stats-grid){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;min-width:0}
#modalBody .login-day,#modalBody .game-prize,#modalBody .game-stats-grid article{min-width:0;padding:11px;border:1px solid #343b4b;border-radius:14px;background:linear-gradient(145deg,#131722,#090c12);}
#modalBody .login-day{display:grid;justify-items:center;text-align:center;gap:5px;min-height:148px}
#modalBody .login-day-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:#171521;border:1px solid #755c2f}
#modalBody .login-day-icon svg{width:31px;height:31px}
#modalBody .login-day strong{font-size:12px;line-height:1.35;color:#f1d477;overflow-wrap:anywhere}
#modalBody .login-day small{font-size:11px;color:#aeb5c5;line-height:1.3}
#modalBody .login-day.today{border-color:#d5b450;box-shadow:0 0 18px #e4bb3620}
#modalBody .login-day.claimed,#modalBody .login-day.received{border-color:#62502c;background:linear-gradient(145deg,#211c13,#0b0e13)}
#modalBody .login-day.locked{opacity:.72}
#modalBody .game-panel{margin:14px 0;padding:14px;border:1px solid #343b4b;border-radius:16px;background:linear-gradient(145deg,#11151e,#090b10);}
#modalBody .game-panel h3{margin:0 0 11px;font-size:15px;color:#f1d477}
#modalBody .login-streak{display:flex;justify-content:space-between;gap:10px;align-items:center;color:#f1d477}
#modalBody .login-streak span{font-size:12px;color:#aeb5c5;text-align:right}
#modalBody .game-prize-grid{grid-template-columns:1fr}
#modalBody .game-prize{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:9px;padding:9px 11px}
#modalBody .game-prize-icon svg{width:38px;height:38px}
#modalBody .game-prize b,#modalBody .game-prize small{display:block;line-height:1.35}
#modalBody .game-prize b{font-size:13px;color:#f2d778}
#modalBody .game-prize small{font-size:11px;color:#aeb5c5}
#modalBody .game-prize strong{color:#d7b850;font-size:12px}
#modalBody .game-rank-tabs{display:flex;gap:7px;overflow-x:auto;padding:2px 1px 9px;scrollbar-width:thin}
#modalBody .game-rank-tabs button{flex:0 0 auto;min-height:38px}
#modalBody .game-rank-me{margin:3px 0 10px;padding:10px 12px;border:1px solid #755d30;border-radius:12px;color:#c5cbd7;font-size:12px}
#modalBody .game-rank-me b{color:#f1d477}
#modalBody .game-rank-row .rank-no{color:#f1d477}
#modalBody .game-rank-row:nth-child(-n+3) .rank-no{ text-shadow:0 0 12px #e6bc52 }
#modalBody #rankMore{margin-top:10px}
#modalBody .game-stats-section h3{margin-bottom:10px}
#modalBody .game-stats-grid article{padding:10px}
#modalBody .game-stats-grid small,#modalBody .game-stats-grid b{display:block;line-height:1.4}
#modalBody .game-stats-grid small{font-size:11px;color:#aeb5c5}
#modalBody .game-stats-grid b{margin-top:4px;font-size:14px;color:#f1d477;overflow-wrap:anywhere}
#modalBody .coupon-channel{display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;align-items:start}
#modalBody .coupon-channel>span svg{width:42px;height:42px}
#modalBody .coupon-channel p{margin:0 0 12px;color:#bac1ce;font-size:13px;line-height:1.5}
@media(max-width:360px){#modalBody .login-calendar{gap:6px}#modalBody .login-day{padding:8px 5px;min-height:144px}#modalBody .login-day strong{font-size:11px}#modalBody .game-stats-grid{gap:7px}#modalBody .game-prize{grid-template-columns:36px minmax(0,1fr) auto;gap:6px;padding:8px}#modalBody .game-prize-icon svg{width:32px;height:32px}}

#modalBody .achievement-group{margin:14px 0 18px}
#modalBody .achievement-group>h3{display:flex;align-items:center;justify-content:space-between;margin:0 0 8px;color:#d7d9e1;font-size:13px;letter-spacing:.04em}
#modalBody .achievement-group>h3 small{color:#979cab;font-size:11px}
#modalBody .achievement-group.available>h3{color:#f2d37c}
#modalBody .achievement-group.available .achievement-card{border-color:#89703a;box-shadow:inset 0 0 20px #d9b54b0c,0 0 14px #d9b54b0c}
#modalBody .achievement-group.available .achievement-state{color:#f1d178;font-weight:700}
#modalBody .achievement-group.claimed .achievement-card{opacity:.66}
#modalBody .achievement-group.claimed .achievement-state,#modalBody .achievement-check{color:#c9d3ca}
#modalBody .achievement-percent{color:#c3c5cf}