/* Barnet Mini App — mobile interaction language matched to the supplied reference screens. */
:root {
    --mini-black: #080808;
    --mini-ink: #151515;
    --mini-muted: #747779;
    --mini-line: #e2e5e6;
    --mini-soft: #f0f2f2;
    --mini-page: #f5f6f6;
    --mini-blue: #286ee8;
}
html, body { width: 100%; max-width: 100vw; overflow-x: hidden !important; background: #fff !important; color: var(--mini-ink); }
body { padding: 0; }
.miniapp-container { width: 100%; max-width: 600px; min-height: 100dvh; margin: 0 auto; padding: max(74px, calc(var(--tg-safe-top, 0px) + 56px)) 20px calc(108px + var(--tg-safe-bottom, 0px)); background: #fff; }
.app-header { display: flex; min-height: 76px; align-items: center; justify-content: space-between; margin: 0 0 36px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none !important; }
.user-badge { gap: 13px; }.user-badge .avatar { width: 66px; height: 66px; flex-basis: 66px; border: 0; background: #ededed; box-shadow: none !important; }.miniapp-logo-img { width: 38px; height: 38px; filter: grayscale(1); opacity: .2; }
.user-name { color: var(--mini-black); font-size: 18px; font-weight: 900; }.user-role { margin-top: 3px; color: var(--mini-muted); font-size: 12px; }.user-role i { display: none; }
.status-indicator { display: none; }.fullscreen-btn { width: 54px; height: 54px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: #000; box-shadow: 0 3px 14px rgba(0,0,0,.12) !important; }.fullscreen-btn span { display: none; }.fullscreen-btn svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 2.3; }
.tab-content { display: none; }.tab-content.active { display: block; animation: mini-enter .18s ease both; }@keyframes mini-enter { from { opacity: .2; transform: translateY(4px); } }
.mini-page-heading { margin-bottom: 26px; }.mini-page-heading h1, .card-header h2, .ai-card > h2 { margin: 0; color: #000; font-size: clamp(25px, 7vw, 32px); font-weight: 900; line-height: 1.35; }.mini-page-heading p, .card-header p, .ai-card > p { margin: 6px 0 0; color: var(--mini-muted); font-size: 13px; line-height: 1.7; }
.search-bar { display: flex; min-height: 58px; margin-bottom: 22px; padding: 0 17px; border: 0; border-radius: 18px; background: var(--mini-soft); box-shadow: none !important; }.search-bar svg { width: 27px; height: 27px; flex: 0 0 auto; fill: none; stroke: #343738; stroke-width: 2; }.search-bar input { padding: 0 12px; border: 0; background: transparent; color: #111; font-size: 15px; }.search-bar input::placeholder { color: #565b5d; }
.filter-chips { display: flex; gap: 12px; margin: 0 -20px 20px; padding: 0 20px 2px; overflow-x: auto; scrollbar-width: none; }.filter-chips::-webkit-scrollbar { display: none; }.chip { min-width: 92px; min-height: 46px; flex: 0 0 auto; padding: 0 22px; border: 1.5px solid #d8dbdc; border-radius: 24px; background: #fff; color: #252728; font-size: 14px; font-weight: 700; }.chip.active { border-color: #202223; background: #f2f3f3; color: #000; box-shadow: inset 0 0 0 1px #202223 !important; }
.loads-list { display: block; }.load-card { margin: 0; padding: 22px 0; border: 0; border-bottom: 1px solid #eceeef; border-radius: 0; background: #fff; box-shadow: none !important; }.load-card:hover { transform: none; }.card-top { margin-bottom: 11px; }.load-id { direction: ltr; color: var(--mini-muted); font-size: 11px; font-weight: 700; }.badge-status { padding: 5px 10px; border-radius: 10px; font-size: 11px; font-weight: 800; }.badge-status i { display: none; }.badge-status.pending { color: #a85823; background: #fff0e7; }.badge-status.matched { color: #237550; background: #eaf7f0; }
.route-info { display: flex; justify-content: flex-start; gap: 9px; margin-bottom: 11px; color: #080808; font-size: 18px; font-weight: 900; }.route-arrow { width: 18px; height: 18px; fill: none; stroke: #747779; stroke-width: 2; }.meta-grid { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; }.meta-item { color: var(--mini-muted); font-size: 12px; }.meta-item i { display: none; }.card-footer { margin-top: 15px; padding-top: 14px; border-top: 1px solid #f0f1f1; }.load-price { color: #111; font-size: 14px; font-weight: 900; }.action-btn-sm { min-height: 40px; padding: 0 17px; border: 0; border-radius: 22px; background: #080808; color: #fff; font-size: 12px; font-weight: 800; }.action-btn-sm i { display: none; }
.loading-state { padding: 56px 16px; color: var(--mini-muted); border: 0; background: transparent; }.loading-state i { color: #111; }
.action-btn-sm:disabled { background: #e5e7e7; color: #85898a; cursor: default; }
.section-card { padding: 0; border: 0; border-radius: 0; background: #fff; box-shadow: none !important; }.card-header { margin-bottom: 28px; padding: 0; border: 0; }.card-header h2 i { display: none; }
.form-grid { gap: 19px; }.form-group { margin: 0; }.form-group label { margin-bottom: 8px; color: #27292a; font-size: 13px; font-weight: 800; }.form-group label i { display: none; }.form-group input, .form-group select, .form-group textarea, .ai-input-wrapper textarea { width: 100%; min-height: 56px; padding: 14px 16px; border: 0; border-radius: 17px; background: var(--mini-soft); color: #111; font-size: 14px; box-shadow: none !important; }.form-group input:focus, .form-group select:focus, .form-group textarea:focus, .ai-input-wrapper textarea:focus { background: #e9eded; outline: 2px solid #111; outline-offset: 1px; }.form-row { gap: 12px; }.primary-btn, .ai-action-btn { width: 100%; min-height: 60px; margin-top: 10px; border: 0; border-radius: 32px; background: #050505 !important; color: #fff !important; font-size: 15px; font-weight: 900; box-shadow: none !important; }.primary-btn i, .ai-action-btn i { display: none; }
.ai-card { border: 0; }.ai-badge { margin-bottom: 16px; padding: 6px 11px; border-radius: 10px; background: #eaf1ff; color: var(--mini-blue); }.ai-badge i { display: none; }.ai-input-wrapper { margin-top: 24px; gap: 15px; }.ai-input-wrapper textarea { min-height: 150px; }.ai-result-box { padding: 18px; border: 0; border-radius: 18px; background: var(--mini-soft); }.ai-result-box h3 { color: #111; }.result-details p { color: var(--mini-muted); }
.bottom-nav { position: fixed; z-index: 30; right: 0; bottom: 0; left: 0; width: 100%; max-width: none; min-height: calc(82px + var(--tg-safe-bottom, 0px)); gap: 0; padding: 9px 8px var(--tg-safe-bottom, 0px); transform: none; border: 0; border-top: 1px solid #e3e5e5; border-radius: 0; background: rgba(250,251,251,.97); box-shadow: none !important; backdrop-filter: none; }.tab-btn { display: flex; min-height: 64px; flex: 1; flex-direction: column; gap: 4px; border-radius: 0; background: transparent !important; color: #777a7b; font-size: 10px; font-weight: 700; }.tab-btn svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; }.tab-btn.active { color: #050505; font-weight: 900; }.tab-btn.active svg { fill: #050505; stroke: #050505; }
.profile-onboarding { width: 100vw; min-height: 100dvh; padding: max(70px, calc(var(--tg-safe-top, 0px) + 52px)) 24px 36px; background: #fff; }.profile-onboarding-card { width: 100%; max-width: 480px; margin: 0 auto; padding: 0; border: 0; border-radius: 0; background: #fff; box-shadow: none !important; }.profile-onboarding-icon { display: none; }.profile-progress { display: block; width: 100%; height: 4px; margin-bottom: 38px; overflow: hidden; border-radius: 3px; background: #eceeee; }.profile-progress span { display: block; width: 33.333%; height: 100%; border-radius: inherit; background: #080808; transition: width .25s ease; }.profile-welcome { display: block; margin-bottom: 8px; }.profile-step { display: block; margin-bottom: 10px; color: var(--mini-muted); font-size: 13px; font-weight: 700; }.profile-onboarding h1 { margin: 0; color: #000; font-size: clamp(27px, 8vw, 34px); font-weight: 900; line-height: 1.4; }.profile-lead { min-height: 48px; margin-top: 8px !important; color: var(--mini-muted) !important; font-size: 14px !important; line-height: 1.8; }.profile-form { gap: 16px; margin-top: 28px; }.profile-slides { min-height: 260px; }.profile-slide { display: grid; gap: 20px; animation: profile-slide-in .22s ease both; }.profile-slide[hidden] { display: none !important; }.profile-slide > label { display: grid; gap: 9px; color: #252728; font-size: 13px; font-weight: 800; }.profile-form input, .profile-form textarea, .profile-form select { min-height: 56px; padding: 14px 16px; border: 0; border-radius: 17px; background: var(--mini-soft); font-size: 14px; }.profile-form input:focus, .profile-form textarea:focus, .profile-form select:focus { outline: 2px solid #111; outline-offset: 1px; box-shadow: none !important; }.profile-role-picker { gap: 12px; }.profile-role-picker span { min-height: 106px; border: 1.5px solid #dde0e1; border-radius: 18px; background: #fff; color: #222; }.profile-role-picker input:checked + span { border-color: #101010; background: #f1f2f2; color: #000; box-shadow: inset 0 0 0 1px #101010 !important; }.profile-role-picker svg { fill: none; stroke: currentColor; stroke-width: 1.7; }.profile-secondary-btn { min-height: 54px; border: 0; border-radius: 17px; background: var(--mini-soft); color: #111; }.profile-review { display: flex; align-items: center; gap: 14px; padding: 18px; border: 1px solid #e1e4e5; border-radius: 20px; }.profile-review > svg { width: 48px; height: 48px; flex: 0 0 auto; padding: 10px; border-radius: 50%; background: #080808; fill: none; stroke: #fff; stroke-width: 2.3; }.profile-review div { display: grid; gap: 4px; }.profile-review b, .profile-upload-title b { color: #111; font-size: 15px; }.profile-review small, .profile-upload-title small { color: var(--mini-muted); font-size: 12px; line-height: 1.7; }.profile-upload { display: grid; gap: 14px; padding: 18px; border: 0; border-radius: 17px; background: var(--mini-soft); }.profile-upload-title span { display: grid; gap: 4px; }.profile-upload-body { display: grid; gap: 12px; }.profile-upload input[type="file"] { width: 100%; padding: 10px; background: #fff; }.profile-step-actions { display: flex; align-items: center; gap: 12px; margin-top: 8px; }.profile-submit { min-height: 62px; flex: 1; margin-top: 0; border-radius: 32px; background: #050505 !important; box-shadow: none !important; }.profile-back-btn { min-height: 58px; padding: 0 20px; border: 0; border-radius: 30px; background: var(--mini-soft); color: #111; font-size: 14px; font-weight: 800; }.profile-step-actions [hidden] { display: none !important; }@keyframes profile-slide-in { from { opacity: 0; transform: translateX(-12px); } }
.mini-select-source { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; overflow: hidden !important; opacity: 0; pointer-events: none; }
.mini-select-trigger { display: flex; width: 100%; min-height: 56px; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; border: 0; border-radius: 17px; background: var(--mini-soft); color: #111; text-align: right; font-size: 14px; }.mini-select-trigger svg { width: 20px; height: 20px; fill: none; stroke: #545859; stroke-width: 2; }
.telegram-only-barrier { background: #fff; }.barrier-card { border: 0; box-shadow: none !important; }.barrier-btn { background: #050505; border-color: #050505; }
@media (max-width: 390px) { .miniapp-container { padding-inline: 16px; }.filter-chips { margin-inline: -16px; padding-inline: 16px; }.form-row { flex-direction: column; }.profile-onboarding { padding-inline: 18px; }.profile-role-picker { grid-template-columns: repeat(2, minmax(0,1fr)); }.profile-role-picker small { display: block; } }
@media (min-width: 700px) { .bottom-nav { right: 50%; left: auto; width: 600px; transform: translateX(50%); border-right: 1px solid #e3e5e5; border-left: 1px solid #e3e5e5; }.loads-list { display: block; } }

/* Compact full-screen Mini App revision. */
.miniapp-container, .miniapp-container *, .profile-onboarding, .profile-onboarding *, .mini-select-page, .mini-select-page * { font-family: 'Vazirmatn FD', Tahoma, sans-serif !important; font-feature-settings: "ss01" 1; }
.miniapp-container { max-width: 520px; padding: max(54px, calc(var(--tg-safe-top, 0px) + 38px)) 16px calc(86px + var(--tg-safe-bottom, 0px)); }
.app-header { min-height: 38px; margin-bottom: 8px; justify-content:center; }
.miniapp-brand-logo { display:block; width:38px; height:38px; object-fit:contain; }
.user-badge { gap: 10px; }.user-badge .avatar { width: 48px; height: 48px; flex-basis: 48px; }.miniapp-logo-img { width: 28px; height: 28px; }.user-name { font-size: 15px; font-weight: 700; }.user-role { font-size: 11px; }
.mini-page-heading { margin-bottom: 18px; }.mini-page-heading h1, .card-header h2 { font-size: 22px; font-weight: 700; }.mini-page-heading p, .card-header p { margin-top: 4px; font-size: 12px; }
.search-bar { min-height: 48px; margin-bottom: 15px; border-radius: 14px; }.search-bar svg { width: 21px; height: 21px; }.search-bar input { font-size: 13px; }
.filter-chips { gap: 8px; margin: 0 -16px 10px; padding-inline: 16px; }.chip { min-width: 72px; min-height: 38px; padding: 0 16px; font-size: 12px; }
.load-card { padding: 16px 0; }.route-info { margin-bottom: 8px; font-size: 15px; }.meta-item { font-size: 11px; }.card-footer { margin-top: 11px; padding-top: 10px; }.action-btn-sm { min-height: 35px; padding-inline: 14px; }
.card-header { margin-bottom: 20px; }.form-grid { gap: 14px; }.form-group input, .form-group select, .form-group textarea, .mini-select-trigger { min-height: 48px; padding: 11px 13px; border-radius: 13px; font-size: 13px; }.form-group label { margin-bottom: 6px; font-size: 12px; }.primary-btn { min-height: 50px; border-radius: 25px; font-size: 13px; }
.bottom-nav { min-height: calc(70px + var(--tg-safe-bottom, 0px)); padding: 5px 7px var(--tg-safe-bottom, 0px); }.tab-btn { min-height: 54px; gap: 2px; font-size: 9px; }.tab-btn svg { width: 22px; height: 22px; }

.profile-onboarding { box-sizing: border-box; width: 100%; max-width: 100vw; min-height: 100dvh; overflow-x: hidden; padding: max(48px, calc(var(--tg-safe-top, 0px) + 34px)) 20px 24px; }.profile-onboarding-card { box-sizing: border-box; width: 100%; max-width: 430px; }.profile-top-back { display: grid; width: 42px; height: 42px; margin: 0 0 18px auto; place-items: center; border: 0; border-radius: 50%; background: #fff; color: #080808; box-shadow: 0 2px 10px rgba(0,0,0,.12); }.profile-top-back[hidden] { visibility: hidden; display: grid !important; }.profile-top-back svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 2.2; }.profile-progress { height: 3px; margin-bottom: 24px; }.profile-step { margin-bottom: 6px; font-size: 11px; }.profile-onboarding h1 { font-size: 24px; font-weight: 700; }.profile-lead { min-height: 38px; font-size: 12px !important; }.profile-form { margin-top: 20px; }.profile-slides { min-height: 225px; }.profile-slide { gap: 15px; }.profile-slide > label { gap: 6px; font-size: 12px; }.profile-form input { min-height: 48px; padding: 11px 13px; border-radius: 13px; font-size: 13px; }.profile-role-picker { gap: 9px; }.profile-role-picker legend { margin-bottom: 4px; font-size: 12px; }.profile-role-picker span { min-height: 180px; padding: 8px; border-radius: 16px; }.profile-role-picker img { width: 100%; max-width: 130px; height: 115px; object-fit: contain; }.profile-role-picker b { font-size: 12px; }.profile-role-picker small { font-size: 9px; }.profile-submit { min-height: 50px; border-radius: 26px; font-size: 13px; }

.mini-select-page { position: fixed; z-index: 1000; inset: 0; width: 100%; max-width: 520px; min-height: 100dvh; margin: 0 auto; overflow-y: auto; padding: max(42px, calc(var(--tg-safe-top, 0px) + 28px)) 18px 28px; background: #fff; animation: mini-page-enter .2s ease both; }.mini-select-page-header { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }.mini-select-page-header h2 { margin: 0; font-size: 20px; font-weight: 700; }.mini-select-page-back { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border: 0; border-radius: 50%; background: #fff; color: #080808; box-shadow: 0 2px 10px rgba(0,0,0,.12); }.mini-select-page-back svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 2.2; }.mini-select-page-options { display: grid; }.mini-select-page-option { display: flex; min-height: 52px; align-items: center; justify-content: space-between; padding: 0 3px; border: 0; border-bottom: 1px solid #eceeee; background: #fff; color: #222; text-align: right; font-size: 13px; font-weight: 500; }.mini-page-radio { width: 21px; height: 21px; border: 2px solid #aeb3b5; border-radius: 50%; }.mini-select-page-option.selected { color: #000; font-weight: 700; }.mini-select-page-option.selected .mini-page-radio { border: 6px solid #080808; }.mini-subpage-open { overflow: hidden !important; }@keyframes mini-page-enter { from { opacity: 0; transform: translateX(-18px); } }

.profile-edit-form { display: grid; gap: 14px; }.profile-avatar-editor { display: grid; justify-items: center; gap: 8px; margin-bottom: 6px; cursor: pointer; }.profile-avatar-editor input { position: absolute; width: 1px; height: 1px; opacity: 0; }.profile-avatar-preview { display: grid; width: 82px; height: 82px; overflow: hidden; place-items: center; border-radius: 50%; background: #eceeee; color: #555; font-size: 27px; font-weight: 700; }.profile-avatar-preview img, .user-badge .avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }.profile-avatar-action { display: flex; align-items: center; gap: 5px; color: #333; font-size: 11px; font-weight: 600; }.profile-avatar-action svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }.profile-edit-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0; border: 0; }.profile-edit-roles legend { grid-column: 1/-1; margin-bottom: 2px; font-size: 12px; font-weight: 600; }.profile-edit-roles input { position: absolute; opacity: 0; }.profile-edit-roles span { display: grid; min-height: 46px; place-items: center; border: 1px solid #d9dddd; border-radius: 13px; color: #555; font-size: 11px; font-weight: 600; }.profile-edit-roles input:checked + span { border-color: #111; background: #f0f2f2; color: #000; box-shadow: inset 0 0 0 1px #111; }.profile-edit-message { min-height: 18px; margin: 0; color: #287452; text-align: center; font-size: 11px; }
@media (min-width: 700px) { .bottom-nav { width: 520px; } }

/* Compact phone entry: keeps the LTR number away from Telegram's screen edges. */
.profile-phone-field { width: min(100%, 340px); justify-self: center; }
.profile-phone-field > span { text-align: right; }
.profile-phone-field input { direction: ltr; text-align: left; letter-spacing: .04em; }

/* Vehicle selector cards use one optimized 2 × 5 transparent illustration sprite. */
.mini-vehicle-select-page .mini-select-page-options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-bottom: 12px; }
.mini-vehicle-select-page .mini-select-page-option { position: relative; min-width: 0; min-height: 158px; padding: 8px 7px 11px; flex-direction: column; justify-content: flex-start; gap: 7px; overflow: hidden; border: 1.5px solid #e2e5e6; border-radius: 17px; text-align: center; }
.mini-vehicle-select-page .mini-select-page-option.selected { border-color: #111; background: #f4f5f5; box-shadow: inset 0 0 0 1px #111; }
.mini-vehicle-art { display: block; width: 100%; aspect-ratio: 5 / 3; flex: 0 0 auto; background-image: url('../img/vehicle-picker-sprite.webp'); background-repeat: no-repeat; background-size: 200% 500%; background-position: calc(var(--vehicle-col) * 100%) calc(var(--vehicle-row) * 25%); }
.mini-vehicle-art.mini-vehicle-flatbed { background-image: url('../img/vehicle-flatbed-transparent.webp'); background-size: contain; background-position: center; background-repeat: no-repeat; }
.mini-vehicle-label { display: block; min-width: 0; color: #1b1d1e; font-size: 10.5px; font-weight: 700; line-height: 1.55; }
.mini-vehicle-select-page .mini-page-radio { position: absolute; top: 9px; right: 9px; width: 19px; height: 19px; background: rgba(255,255,255,.9); }
.mini-vehicle-select-page .mini-select-page-option.selected .mini-page-radio { border-width: 5px; }

.profile-wallet-field { padding: 13px; border: 1px solid #e0e3e4; border-radius: 15px; background: #fafbfb; }
.profile-wallet-input { position: relative; }
.profile-wallet-input svg { position: absolute; z-index: 1; top: 50%; right: 13px; width: 21px; height: 21px; transform: translateY(-50%); fill: none; stroke: #303334; stroke-width: 1.8; }
.profile-wallet-input input { padding-right: 44px !important; background: #ecefef !important; color: #1b1d1e !important; font-weight: 700; cursor: default; }
.profile-wallet-field small { display: block; margin-top: 7px; color: var(--mini-muted); font-size: 10px; }

@media (max-width: 350px) {
    .mini-vehicle-select-page .mini-select-page-options { gap: 7px; }
    .mini-vehicle-select-page .mini-select-page-option { min-height: 145px; }
    .mini-vehicle-label { font-size: 9.5px; }
}

/* Calm bottom navigation: no blue glow or browser tap flash on hover/press. */
.bottom-nav .tab-btn,
.bottom-nav .tab-btn:hover,
.bottom-nav .tab-btn:focus,
.bottom-nav .tab-btn:active,
.bottom-nav .tab-btn.active {
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}
.bottom-nav .tab-btn:active { transform: none !important; }

.loads-skeleton { display: grid; gap: 2px; }
.load-skeleton { display: grid; gap: 12px; padding: 17px 0; border-bottom: 1px solid #eef0f0; }
.skeleton-line { display: block; height: 11px; overflow: hidden; border-radius: 8px; background: #e8ebeb; }
.skeleton-line::after { display: block; width: 55%; height: 100%; content: ""; background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent); animation: mini-skeleton 1.15s ease-in-out infinite; }
.skeleton-line.short { width: 25%; height: 8px; }.skeleton-line.route { width: 72%; height: 17px; }.skeleton-line.meta { width: 90%; }.skeleton-line.action { width: 34%; height: 34px; margin-right: auto; border-radius: 18px; }
@keyframes mini-skeleton { from { transform: translateX(180%); } to { transform: translateX(-220%); } }

.field-counter { align-self: flex-end; color: var(--mini-muted); font-size: 10px; }
.load-description { margin: 10px 0 0; padding: 10px 12px; border-radius: 11px; background: #f5f6f6; color: #55595a; font-size: 11px; line-height: 1.8; white-space: pre-line; }
.button-spinner { width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.38); border-top-color: #fff; border-radius: 50%; animation: button-spin .7s linear infinite; }
.primary-btn.is-saved { background: #16794c !important; }
@keyframes button-spin { to { transform: rotate(360deg); } }

.bid-sheet[hidden] { display: none; }
.bid-sheet { position: fixed; z-index: 1200; inset: 0; display: flex; align-items: flex-end; justify-content: center; }
.bid-sheet-backdrop { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(10,12,13,.48); opacity: 0; transition: opacity .22s ease; }
.bid-sheet-panel { position: relative; width: min(100%, 520px); max-height: min(88dvh, 760px); overflow-y: auto; padding: 12px 20px calc(24px + var(--tg-safe-bottom, 0px)); border-radius: 26px 26px 0 0; background: #fff; box-shadow: 0 -10px 40px rgba(0,0,0,.16); transform: translateY(102%); transition: transform .24s ease; }
.bid-sheet.is-open .bid-sheet-backdrop { opacity: 1; }.bid-sheet.is-open .bid-sheet-panel { transform: translateY(0); }
.bid-sheet-handle { width: 42px; height: 4px; margin: 0 auto 12px; border-radius: 4px; background: #d9dddd; }
.bid-sheet-close { position: absolute; top: 18px; left: 18px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #f0f2f2; color: #222; font-size: 24px; line-height: 1; }
.bid-sheet-icon { display: grid; width: 48px; height: 48px; margin-bottom: 12px; place-items: center; border-radius: 15px; background: #111; color: #fff; }
.bid-sheet-icon svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.bid-sheet-panel h2 { margin: 0; color: #111; font-size: 21px; }.bid-sheet-route { margin: 5px 0 16px; color: #626667; font-size: 13px; font-weight: 700; }
.bid-rules { padding: 14px 16px; border-radius: 16px; background: #f5f6f6; }.bid-rules h3 { margin: 0 0 8px; font-size: 13px; }.bid-rules ul { margin: 0; padding-right: 18px; color: #55595a; font-size: 11px; line-height: 2; }
.bid-faq { margin: 10px 0; padding: 12px 2px; border-bottom: 1px solid #eceeee; }.bid-faq summary { color: #222; font-size: 12px; font-weight: 800; cursor: pointer; }.bid-faq p { margin: 9px 0 0; color: #666; font-size: 11px; line-height: 1.8; }
.bid-price-field { display: grid; gap: 7px; color: #27292a; font-size: 12px; font-weight: 800; }.bid-price-field small { color: var(--mini-muted); font-size: 10px; font-weight: 500; }.bid-price-field input { min-height: 50px; padding: 12px 14px; border: 0; border-radius: 14px; background: var(--mini-soft); font: inherit; }
.bid-confirm-check { display: flex; align-items: flex-start; gap: 9px; margin-top: 15px; color: #333; font-size: 11px; line-height: 1.7; }.bid-confirm-check input { width: 19px; height: 19px; flex: 0 0 auto; accent-color: #111; }
.bid-sheet-message { min-height: 17px; margin: 8px 0 0; color: #b42318; font-size: 11px; }.bid-submit { margin-top: 8px; }.bid-submit:disabled { cursor: default; opacity: .48; }
.bid-sheet-open { overflow: hidden !important; }
.mini-select-trigger:disabled { color: #989c9d; cursor: default; opacity: .72; }
.ai-entry-icon { display: grid; width: 46px; height: 46px; margin: 0 auto 18px 0; padding:0; place-items: center; border:0; background: transparent; color: #000; cursor:pointer; }
.ai-entry-icon svg { width: 27px; height: 27px; fill: currentColor; }
#new-cargo .section-card,#driver-status .section-card { position:relative; }
#new-cargo .ai-entry-icon,#driver-status .ai-entry-icon { position:absolute; top:-46px; left:0; margin:0; }

.loads-toolbar { direction:rtl; display:flex; min-height:58px; align-items:center; gap:4px; margin-bottom:18px; padding:5px; border-radius:30px; background:#eceeee; }
.loads-toolbar .search-bar { min-width:0; min-height:48px; flex:1; margin:0; padding:0 12px; border-radius:24px; background:transparent; }
.loads-toolbar .search-bar svg { width:26px; height:26px; stroke:#535758; }
.loads-toolbar .search-bar input { min-width:0; padding-inline:10px 2px; font-size:13px; }
.filter-open-btn { direction:rtl; display:inline-flex; min-width:86px; min-height:48px; align-items:center; justify-content:center; gap:8px; padding:0 14px; border:0; border-radius:24px; background:#fff; color:#111; box-shadow:0 5px 15px rgba(20,24,25,.06); font:inherit; font-size:12px; font-weight:800; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.filter-open-btn svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:2.4; }.filter-open-btn b { display:grid; width:18px; height:18px; place-items:center; border-radius:50%; background:#111; color:#fff; font-size:9px; }.filter-open-btn b[hidden] { display:none; }
.filter-sheet { position: fixed; z-index: 1200; inset: 0; display: flex; align-items: flex-end; justify-content: center; }
.filter-sheet[hidden] { display: none; }.filter-sheet-backdrop { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(19,21,22,.58); opacity: 0; transition: opacity .22s ease; }.filter-sheet-panel { position: relative; width: min(100%, 520px); max-height: 87dvh; overflow-y: auto; padding: 13px 18px calc(22px + var(--tg-safe-bottom, 0px)); border-radius: 30px 30px 0 0; background: #fff; transform: translateY(105%); transition: transform .24s ease; }.filter-sheet.is-open .filter-sheet-backdrop { opacity: 1; }.filter-sheet.is-open .filter-sheet-panel { transform: translateY(0); }.filter-sheet-panel h2 { margin: 0; color: #111; text-align: center; font-size: 21px; }.filter-sheet-panel > p { margin: 5px 0 16px; color: #747879; text-align: center; font-size: 11px; }.filter-search { display: flex; min-height: 48px; align-items: center; gap: 9px; margin-bottom: 12px; padding: 0 13px; border-radius: 15px; background: #f1f3f3; }.filter-search svg { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: #55595a; stroke-width: 1.8; }.filter-search input { width: 100%; border: 0; outline: 0; background: transparent; color: #111; font: inherit; font-size: 13px; }.filter-location-options { display: grid; margin: 0 -18px 17px; }.filter-location-option { display: flex; min-height: 53px; align-items: center; justify-content: space-between; padding: 0 22px; border: 0; border-bottom: 1px solid #eceeee; background: #fff; color: #222; text-align: right; font: inherit; font-size: 14px; cursor: pointer; }.filter-location-option b { color: #111; opacity: 0; font-size: 20px; }.filter-location-option.active { font-weight: 800; }.filter-location-option.active b { opacity: 1; }.filter-group { margin-top: 15px; }.filter-group h3 { margin: 0 0 8px; color: #333; font-size: 12px; }.filter-group .filter-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; overflow: visible; }.filter-group .chip { min-height: 39px; min-width: auto; padding: 0 14px; font-size: 11px; }.filter-group .chip.active { border-color: #111; background: #111; color: #fff; box-shadow: none !important; }.filter-clear-btn { width: 100%; min-height: 48px; margin-top: 19px; border: 0; border-radius: 15px; background: #f1f3f3; color: #222; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }

/* Dedicated bid sheet: a scrollable page-like surface with Telegram-native back support. */
.bid-sheet { align-items: flex-end; padding: 0; background: #fff; }
.bid-sheet-backdrop { display: none; }
.bid-sheet-panel { width: min(100%, 600px); height: 100dvh; max-height: none; padding: max(18px, var(--tg-safe-top, 0px)) 20px calc(28px + var(--tg-safe-bottom, 0px)); border-radius: 0; box-shadow: none; transform: translateX(-100%); opacity: 1; }
.bid-sheet.is-open .bid-sheet-panel { transform: translateX(0); }
.sheet-page-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.sheet-page-header h2, .filter-sheet-panel .sheet-page-header h2 { margin: 0; text-align: right; font-size: 20px; }
.sheet-page-header p { margin: 3px 0 0; color: var(--mini-muted); font-size: 11px; }
.sheet-back-btn { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border: 0; border-radius: 50%; background: var(--mini-soft); color: #111; }
.sheet-back-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }
.bid-hero { position: relative; min-height: 185px; margin: 0 0 14px; overflow: hidden; border-radius: 22px; background: #0d1420; }
.bid-hero img { width: 100%; height: 210px; display: block; object-fit: cover; object-position: center 58%; opacity: .9; }
.bid-hero::after { position: absolute; inset: 35% 0 0; content: ""; background: linear-gradient(transparent, rgba(5,9,14,.9)); }
.bid-hero > div { position: absolute; z-index: 1; right: 16px; bottom: 14px; left: 16px; color: #fff; }
.bid-hero strong, .bid-hero span { display: block; }.bid-hero strong { font-size: 14px; }.bid-hero span { margin-top: 3px; color: rgba(255,255,255,.72); font-size: 10px; }
.bid-load-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.bid-load-summary > div { padding: 12px; border-radius: 14px; background: #f3f5f5; }.bid-load-summary small, .bid-load-summary strong { display: block; }.bid-load-summary small { color: var(--mini-muted); font-size: 9px; }.bid-load-summary strong { margin-top: 4px; color: #111; font-size: 11px; }
.bid-owner-card { display: flex; width: 100%; align-items: center; gap: 10px; margin: 0 0 10px; padding: 12px; border: 1px solid #e6e8e8; border-radius: 15px; background: #fff; text-align: right; font: inherit; }
.bid-owner-card .owner-avatar { display: grid; width: 40px; height: 40px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #111; color: #fff; font-weight: 900; }.bid-owner-card > span:nth-child(2) { flex: 1; }.bid-owner-card small, .bid-owner-card strong, .bid-owner-card em { display: block; }.bid-owner-card small { color: var(--mini-muted); font-size: 9px; }.bid-owner-card strong { font-size: 12px; }.bid-owner-card em { margin-top: 2px; color: #987100; font-size: 9px; font-style: normal; }.bid-owner-card svg { width: 18px; fill: none; stroke: #888; stroke-width: 2; }
.bid-recommendations { margin: 12px 0; }.bid-recommendations > span { display: block; margin-bottom: 7px; font-size: 11px; font-weight: 800; }.bid-recommendations > div { display: flex; gap: 6px; }.bid-recommendations button { flex: 1; min-height: 38px; border: 1px solid #dde0e0; border-radius: 11px; background: #fff; color: #222; font: inherit; font-size: 9px; font-weight: 700; }
.filter-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-bottom: 13px; padding: 4px; border-radius: 14px; background: #f0f2f2; }.filter-tabs button { min-height: 39px; border: 0; border-radius: 11px; background: transparent; font: inherit; font-size: 10px; font-weight: 700; }.filter-tabs button.active { background: #fff; color: #000; }.filter-tab-panel { display: none; min-height: 330px; }.filter-tab-panel.active { display: block; }.filter-choice-list { display: grid; margin: 0 -18px; }.filter-choice-list button { display: flex; min-height: 54px; align-items: center; justify-content: space-between; padding: 0 22px; border: 0; border-bottom: 1px solid #eceeee; background: #fff; font: inherit; }.filter-choice-list button b { opacity: 0; }.filter-choice-list button.active { font-weight: 800; }.filter-choice-list button.active b { opacity: 1; }.filter-sheet-actions { position: sticky; bottom: 0; display: grid; grid-template-columns: .75fr 1.25fr; gap: 8px; padding-top: 10px; background: #fff; }.filter-sheet-actions .primary-btn, .filter-sheet-actions .filter-clear-btn { min-height: 49px; margin: 0; }
/* Floating glass navigation and account hub. */
.bottom-nav { right: 14px !important; bottom: max(10px, var(--tg-safe-bottom, 0px)) !important; left: 14px !important; width: auto !important; min-height: 58px; padding: 5px 7px !important; transform: none !important; border: 1px solid #e7e9e9 !important; border-radius: 34px !important; background: #fff !important; box-shadow: 0 8px 24px rgba(20,24,25,.1) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.bottom-nav .tab-btn { min-height: 46px; border-radius: 26px !important; }.bottom-nav .tab-btn.active { background: #f4f5f5 !important; }
@media (min-width:700px) { .bottom-nav { right: 50% !important; left: auto !important; width: 520px !important; transform: translateX(50%) !important; } }
.profile-hub-head { display: flex; align-items: center; gap: 13px; margin: 4px 0 24px; }.profile-hub-avatar { display: grid; width: 66px; height: 66px; flex: 0 0 auto; overflow: hidden; place-items: center; border-radius: 50%; background: #eceeee; color: #555; font-size: 22px; font-weight: 900; }.profile-hub-avatar img { width: 100%; height: 100%; object-fit: cover; }.profile-hub-head h1 { margin: 0; font-size: 21px; font-weight: 900; }.profile-hub-head p { direction: ltr; margin: 4px 0 0; color: var(--mini-muted); text-align: right; font-size: 12px; }
.wallet-hero-card { display: flex; width: 100%; min-height: 145px; align-items: center; justify-content: space-between; padding: 23px; border: 0; border-radius: 25px; background: linear-gradient(135deg,#101214,#303437); color: #fff; text-align: right; font: inherit; }.wallet-hero-card small,.wallet-hero-card strong,.wallet-hero-card em { display:block; }.wallet-hero-card small { color: rgba(255,255,255,.65); font-size: 11px; }.wallet-hero-card strong { margin-top: 8px; font-size: 25px; }.wallet-hero-card em { margin-top: 7px; color: rgba(255,255,255,.56); font-size: 9px; font-style: normal; }.wallet-hero-card svg { width: 52px; height: 52px; fill:none; stroke:#fff; stroke-width:1.35; opacity:.78; }
.profile-wallet-summary { direction: ltr; display: flex; align-items: stretch; gap: 10px; margin-bottom: 20px; }
.profile-wallet-main,.profile-wallet-topup { border: 1px solid #e1e4e5; background: #fff; color: #111; font: inherit; }
.profile-wallet-main { display: flex; min-width: 0; flex: 1; align-items: center; gap: 12px; padding: 13px 15px; border-radius: 18px; text-align: left; }
.profile-wallet-main > svg { width: 31px; height: 31px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; }
.profile-wallet-main span { direction: rtl; display: grid; gap: 2px; text-align: left; }
.profile-wallet-main small { color: var(--mini-muted); font-size: 10px; }
.profile-wallet-main strong { font-size: 16px; font-weight: 900; }
.profile-wallet-topup { display: grid; width: 58px; flex: 0 0 58px; place-items: center; border-radius: 18px; }
.profile-wallet-topup svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 2; }
body.profile-tab-active .app-header { display: none; }
.profile-quick-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin:14px 0; }.profile-quick-grid button { display:grid; min-height:108px; place-items:center; align-content:center; gap:11px; padding:10px 5px; border:1px solid #e1e4e4; border-radius:20px; background:#fff; color:#111; font:inherit; font-size:10px; font-weight:800; }.profile-quick-grid svg { width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:1.8; }
.profile-menu-list { overflow:hidden; border:1px solid #e1e4e4; border-radius:22px; }.profile-menu-list button { display:flex; width:100%; min-height:64px; align-items:center; gap:12px; padding:0 16px; border:0; border-bottom:1px solid #eceeee; background:#fff; color:#111; text-align:right; font:inherit; font-size:12px; font-weight:800; }.profile-menu-list button:last-child { border-bottom:0; }.profile-menu-list svg { width:25px; height:25px; fill:none; stroke:currentColor; stroke-width:1.8; }.profile-menu-list span { flex:1; }.profile-menu-list b { color:#999; font-size:24px; }
.account-subpage { position:fixed; z-index:1100; inset:0; width:min(100%,600px); margin:auto; overflow-y:auto; padding:max(96px,calc(var(--tg-safe-top,0px) + 72px)) 20px calc(34px + var(--tg-safe-bottom,0px)); background:#fff; animation:mini-page-enter .2s ease both; }.account-subpage[hidden] { display:none; }.account-page-open { overflow:hidden!important; }
.account-subpage-nav { display:flex; min-height:46px; align-items:center; justify-content:space-between; margin-bottom:12px; }
.account-subpage-nav .sheet-back-btn { position:relative; z-index:1; }
.account-subpage-nav .ai-entry-icon { margin:0; }
.wallet-balance-box { margin:18px 0 12px; padding:18px; border-radius:18px; background:#f1f3f3; }.wallet-balance-box small,.wallet-balance-box strong { display:block; }.wallet-balance-box small { color:var(--mini-muted); font-size:10px; }.wallet-balance-box strong { margin-top:6px; font-size:23px; }
.bank-card-caption { margin:0 0 10px; color:var(--mini-muted); font-size:11px; line-height:1.7; }
.bank-card { position:relative; display:flex; flex-direction:column; justify-content:space-between; gap:18px; min-height:180px; padding:20px; overflow:hidden; border-radius:22px; background:linear-gradient(135deg,#1e2224,#05070a 70%); color:#fff; box-shadow:0 14px 30px rgba(0,0,0,.28); }
.bank-card-texture { position:absolute; inset:0; z-index:0; opacity:.10; background-image:radial-gradient(circle at 1px 1px, #fff 1px, transparent 0); background-size:16px 16px; }
.bank-card-top,.bank-card-number,.bank-card-bottom { position:relative; z-index:1; }
.bank-card-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.bank-card-brand { display:flex; align-items:center; gap:8px; }
.bank-card-badge { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg,var(--brand-accent),#0077a3); color:#fff; font-size:13px; font-weight:800; }
.bank-card-brand-name { font-size:12px; font-weight:800; letter-spacing:.4px; color:#f2f2f2; }
.bank-card-chip { display:flex; flex-direction:column; justify-content:space-evenly; gap:2px; width:34px; height:25px; padding:4px; border-radius:5px; background:linear-gradient(135deg,#f4dd8a,#c9a227); box-shadow:inset 0 0 0 1px rgba(0,0,0,.15); }
.bank-card-chip span { display:block; height:1px; background:rgba(0,0,0,.3); }
.bank-card-number { direction:ltr; text-align:right; font-size:19px; font-weight:700; letter-spacing:3px; color:#fff; text-shadow:0 1px 0 rgba(255,255,255,.18); }
.bank-card-bottom { display:flex; align-items:flex-end; justify-content:space-between; gap:10px; }
.bank-card-holder small { display:block; color:#9aa0a3; font-size:9px; }
.bank-card-holder span { display:block; margin-top:5px; color:#e6e6e6; font-size:11px; font-weight:700; letter-spacing:.3px; }
.bank-card-copy { display:flex; align-items:center; gap:6px; padding:7px 12px; border:1px solid rgba(255,255,255,.28); border-radius:99px; background:rgba(255,255,255,.10); color:#fff; font:inherit; font-size:10px; font-weight:700; }
.bank-card-copy svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.bank-card-copy:active { transform:scale(.96); }
.wallet-topup-form { display:grid; gap:13px; margin-top:18px; }.wallet-topup-form label>span { display:block; margin-bottom:7px; font-size:11px; font-weight:800; }.wallet-topup-form input[type=text] { width:100%; min-height:54px; padding:12px 14px; border:0; border-radius:15px; background:#f0f2f2; font:inherit; }.receipt-picker { display:flex; flex-direction:column; align-items:center; gap:6px; padding:20px 16px; border:1.5px dashed #c7ccce; border-radius:16px; background:#fafbfb; text-align:center; transition:border-color .2s; }.receipt-picker:has(input:focus) { border-color:var(--brand-accent); }.receipt-picker input { position:absolute; width:1px; height:1px; opacity:0; }.receipt-picker-icon { width:26px; height:26px; fill:none; stroke:var(--brand-accent); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }.receipt-picker span { font-size:12px; font-weight:700; }.receipt-picker small { display:block; color:var(--mini-muted); font-size:9px; }.wallet-history-list { display:grid; gap:8px; margin-top:18px; }.wallet-history-item { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px; border:1px solid #e4e7e7; border-radius:15px; }.wallet-history-item strong,.wallet-history-item small { display:block; }.wallet-history-item small { margin-top:3px; color:var(--mini-muted); font-size:9px; }.wallet-history-item .credit { color:#16794c; }.wallet-history-item .debit { color:#b42318; }.wallet-status { padding:4px 8px; border-radius:99px; background:#fff4da; color:#8a6200; font-size:9px; }.wallet-status.approved { background:#e9f7ef;color:#16794c; }.wallet-status.rejected { background:#fff0ee;color:#b42318; }
.reputation-sheet { position:fixed; z-index:1250; inset:0; background:#fff; }.reputation-sheet[hidden]{display:none}.reputation-sheet-panel{width:min(100%,600px);height:100dvh;margin:auto;overflow-y:auto;padding:max(96px,calc(var(--tg-safe-top,0px) + 72px)) 20px calc(30px + var(--tg-safe-bottom,0px));}.reputation-score{display:grid;margin:18px 0;padding:25px;place-items:center;border-radius:22px;background:#fff8dd;color:#765400}.reputation-score strong{font-size:30px}.reputation-score span{margin-top:6px;font-size:10px}
.ai-assistant { position:fixed; z-index:1400; inset:0; display:flex; align-items:flex-end; justify-content:center; }
.ai-assistant[hidden] { display:none; }
.ai-assistant-backdrop { position:absolute; inset:0; width:100%; border:0; background:rgba(14,16,17,.46); opacity:0; transition:opacity .22s ease; }
.ai-assistant-panel { position:relative; width:min(100%,560px); max-height:min(82dvh,760px); overflow-y:auto; padding:10px 18px calc(20px + var(--tg-safe-bottom,0px)); border-radius:28px 28px 0 0; background:#fff; transform:translateY(105%); transition:transform .24s ease; }
.ai-assistant.is-open .ai-assistant-backdrop { opacity:1; }.ai-assistant.is-open .ai-assistant-panel { transform:translateY(0); }
.ai-assistant-handle { width:42px; height:4px; margin:0 auto 15px; border-radius:3px; background:#d8dddd; }
.ai-assistant header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; }
.ai-assistant header h2 { margin:0; font-size:18px; }.ai-assistant header p { margin:5px 0 0; color:var(--mini-muted); font-size:10px; line-height:1.7; }
.ai-assistant header button { width:34px; height:34px; flex:0 0 auto; border:0; border-radius:50%; background:#f0f2f2; color:#222; font-size:23px; line-height:1; }
#aiAssistantText { box-sizing:border-box; width:100%; min-height:112px; resize:vertical; padding:14px; border:1px solid #e0e4e4; border-radius:17px; outline:0; background:#f5f6f6; color:#111; font:inherit; font-size:13px; line-height:1.8; }
#aiAssistantText:focus { border-color:#111; background:#fff; }
.ai-assistant-actions { display:grid; grid-template-columns:1fr 1.45fr; gap:8px; margin-top:10px; }
.ai-assistant-actions button,.ai-apply-btn { min-height:48px; border:0; border-radius:24px; font:inherit; font-size:11px; font-weight:800; }
.ai-record-btn { display:flex; align-items:center; justify-content:center; gap:8px; background:#eef0f0; color:#111; transition:background .2s,color .2s; }
.ai-record-icon-wrap { position:relative; display:grid; place-items:center; width:22px; height:22px; flex:0 0 auto; }
.ai-record-icon-wrap .ai-mic-icon,.ai-record-icon-wrap .ai-stop-icon { position:relative; width:18px; height:18px; z-index:1; }
.ai-record-icon-wrap .ai-stop-icon { display:none; }
.ai-record-ring { position:absolute; inset:-3px; border-radius:50%; background:#e33232; opacity:0; }
.ai-record-btn.is-recording { background:#fff0f0; color:#a71616; }
.ai-record-btn.is-recording .ai-mic-icon { display:none; }
.ai-record-btn.is-recording .ai-stop-icon { display:block; }
.ai-record-btn.is-recording .ai-record-ring { opacity:1; animation:ai-pulse 1.1s ease-out infinite; }
.ai-analyze-btn,.ai-apply-btn { background:#050505; color:#fff; }.ai-analyze-btn:disabled,.ai-record-btn:disabled { opacity:.48; }
.ai-assistant-status { min-height:18px; margin:8px 2px 0; color:#666; font-size:10px; }.ai-assistant-status.is-error { color:#b42318; }
.ai-assistant-result { margin-top:6px; padding-top:13px; border-top:1px solid #eceeee; }.ai-result-heading strong,.ai-result-heading small { display:block; }.ai-result-heading strong { font-size:12px; }.ai-result-heading small { margin-top:3px; color:#777; font-size:9px; }
.ai-result-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:11px; }.ai-result-fields label { display:grid; gap:5px; color:#555; font-size:9px; }.ai-result-fields input { min-width:0; width:100%; min-height:42px; padding:9px 10px; border:0; border-radius:12px; background:#f0f2f2; color:#111; font:inherit; font-size:11px; }
.ai-apply-btn { width:100%; margin-top:12px; }
.ai-assistant-open { overflow:hidden!important; }
@keyframes ai-pulse { 0% { transform:scale(1); opacity:.45; } 100% { transform:scale(1.9); opacity:0; } }

/* SMS verification of the mobile number */
.phone-otp { display: grid; gap: 8px; width: min(100%, 340px); justify-self: center; margin-top: 10px; }
.phone-otp[hidden] { display: none; }
.phone-otp label > span { text-align: right; }
.phone-otp input { direction: ltr; text-align: center; letter-spacing: .5em; font-size: 1.2rem; font-weight: 800; }
.phone-otp-resend { --p: 0%; justify-self: stretch; position: relative; overflow: hidden; padding: 10px 14px; border: 1px solid #dbe4f3; border-radius: 12px; background: #fff; color: var(--accent, #2563eb); font: inherit; font-size: .85rem; font-weight: 800; cursor: pointer; font-variant-numeric: tabular-nums; }
.phone-otp-resend:disabled { color: #64748b; cursor: default; background: linear-gradient(to left, #e8eefb var(--p), #f6f8fc var(--p)); transition: background .9s linear; }
.phone-otp label > span { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 700; color: #4b5563; }

.phone-share-btn { width: min(100%, 340px); justify-self: center; margin: 0 auto 8px; padding: 12px 14px; border: 0; border-radius: 12px; background: var(--accent, #2563eb); color: #fff; font: inherit; font-size: .9rem; font-weight: 800; cursor: pointer; display: block; }
.phone-share-btn[hidden], .phone-share-hint[hidden] { display: none; }
.phone-share-btn:disabled { opacity: .6; cursor: default; }
.phone-share-hint { margin: 0 0 8px; font-size: .75rem; color: #64748b; text-align: center; }
.referral-card[hidden] { display: none; }
.referral-card input { width: 100%; direction: ltr; padding: 10px 12px; border: 1px solid #dbe4f3; border-radius: 12px; background: #f6f8fc; font-size: .8rem; }
.referral-actions { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.referral-actions .phone-share-btn { margin: 0; width: auto; flex: 1; }
.referral-count { font-size: .8rem; font-weight: 700; color: #4b5563; }
.messenger-row { flex-wrap: wrap; }
.messenger-prefs { flex: 1 1 100%; display: grid; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #eef0f2; }
.messenger-prefs[hidden] { display: none; }
.messenger-pref { display: flex; align-items: center; gap: 10px; font-size: .8rem; line-height: 1.7; color: #374151; cursor: pointer; }
.messenger-pref input { flex: none; width: 38px; height: 22px; appearance: none; -webkit-appearance: none; border-radius: 999px; background: #cbd5e1; position: relative; cursor: pointer; transition: background .2s; margin: 0; }
.messenger-pref input::after { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.messenger-pref input:checked { background: var(--accent, #2563eb); }
.messenger-pref input:checked::after { transform: translateX(-16px); }
html[dir="ltr"] .messenger-pref input:checked::after { transform: translateX(16px); }
.messenger-pref input:disabled { opacity: .6; }

/* Phone verification status & badges */
.phone-status-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; line-height: 1.4; vertical-align: middle; }
.phone-status-badge.verified { background: #dcfce7; color: #15803d; }
.phone-status-badge.unverified { background: #fee2e2; color: #b91c1c; }
.phone-status-badge svg { width: 12px; height: 12px; fill: currentColor; }

.phone-verify-notice { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; padding: 12px 14px; border: 1px solid #fecaca; border-radius: 16px; background: #fff5f5; color: #991b1b; }
.phone-verify-notice p { margin: 0; font-size: 12px; font-weight: 700; line-height: 1.6; }
.phone-verify-notice small { display: block; font-size: 10.5px; font-weight: 500; color: #b91c1c; margin-top: 2px; }
.phone-verify-btn { flex: none; border: 0; border-radius: 10px; background: #dc2626; color: #fff; padding: 7px 12px; font: inherit; font-size: 11.5px; font-weight: 800; cursor: pointer; }
.phone-verify-notice[hidden] { display: none !important; }

.profile-phone-verified-tag { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: 6px; font-size: 11px; font-weight: 700; }
.profile-phone-verified-tag.is-verified { color: #16a34a; }
.profile-phone-verified-tag.is-unverified { color: #dc2626; }

/* Icons: keep the Font Awesome fonts (the global MiniApp font rule would blank them) */
.miniapp-container i[class*="fa-"], .profile-onboarding i[class*="fa-"], .mini-select-page i[class*="fa-"] { font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; font-style: normal; }
.miniapp-container i.fa-regular, .profile-onboarding i.fa-regular, .mini-select-page i.fa-regular { font-weight: 400 !important; }
.miniapp-container i.fa-brands, .profile-onboarding i.fa-brands, .mini-select-page i.fa-brands { font-family: "Font Awesome 6 Brands" !important; font-weight: 400 !important; }
/* Outline nav icons must not fill in on the active tab (only the profile glyph is a filled shape) */
.bottom-nav .tab-btn.active:not([data-tab="profile-page"]) svg { fill: none !important; }
/* The universal ::before font rule must not reach the icon glyph itself */
i[class*="fa-"]::before, i[class*="fa-"]::after { font-family: inherit !important; font-weight: inherit !important; }

/* Share-my-number buttons: black pill with a raised 3D edge (invite "copy link" keeps its own style) */
#profilePhoneShare, #profileEditPhoneShare {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    width: min(100%, 360px); min-height: 54px; margin: 4px auto 14px; padding: 0 26px;
    border: 0; border-radius: 999px; cursor: pointer;
    background: linear-gradient(180deg, #3a3a3a 0%, #111 55%, #000 100%); color: #fff;
    font: inherit; font-size: .95rem; font-weight: 800; letter-spacing: .01em;
    box-shadow: 0 5px 0 #000, 0 12px 22px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .28) !important;
    transition: transform .12s ease, box-shadow .12s ease;
}
#profilePhoneShare[hidden], #profileEditPhoneShare[hidden] { display: none; }
#profilePhoneShare:active, #profileEditPhoneShare:active { transform: translateY(4px); box-shadow: 0 1px 0 #000, 0 4px 10px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .2) !important; }
#profilePhoneShare:disabled, #profileEditPhoneShare:disabled { opacity: .55; transform: none; }
.phone-locked input[readonly] { background: #f1f3f3; color: #333; cursor: default; }

/* Bid sheet hero: small cutout on white, no frame; text beside it (stacked on phones) */
.bid-hero { position: static; display: flex; align-items: center; gap: 16px; min-height: 0; margin: 0 0 14px; padding: 0; overflow: visible; border: 0; border-radius: 0; background: #fff; }
.bid-hero::after { display: none; }
.bid-hero img { width: 150px; height: auto; flex: 0 0 auto; object-fit: contain; opacity: 1; }
.bid-hero > div { position: static; min-width: 0; color: #111; }
.bid-hero strong { font-size: 15px; line-height: 1.7; }
.bid-hero span { margin-top: 3px; color: #6b7280; font-size: 12px; line-height: 1.8; }
@media (max-width: 420px) { .bid-hero { flex-direction: column; text-align: center; gap: 6px; } .bid-hero img { width: 130px; } }
@media (min-width: 900px) { .bid-hero img { width: 190px; } .bid-hero strong { font-size: 16px; } }

/* Inbox: header icons (top left) and the bottom sheet */
.app-header { position: relative; }
.app-header-actions { position: absolute; left: 4px; top: 50%; transform: translateY(-50%); display: flex; gap: 8px; direction: ltr; }
.inbox-trigger { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: #f1f3f3; color: #111; cursor: pointer; }
.inbox-trigger:active { transform: scale(.94); }
.inbox-trigger svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.inbox-trigger b, .inbox-tabs b { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: #e11d48; color: #fff; font-size: 10px; font-weight: 800; line-height: 1; }
.inbox-trigger b { position: absolute; top: -3px; right: -3px; }
.inbox-trigger b[hidden], .inbox-tabs b[hidden] { display: none; }
.inbox-sheet { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: flex-end; justify-content: center; }
.inbox-sheet[hidden] { display: none; }
.inbox-backdrop { position: absolute; inset: 0; border: 0; background: rgba(0, 0, 0, .45); cursor: default; }
.inbox-panel { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 560px; max-height: 86vh; background: #fff; border-radius: 24px 24px 0 0; overflow: hidden; }
.inbox-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 8px; }
.inbox-head h2 { margin: 0; font-size: 16px; }
.inbox-close { width: 34px; height: 34px; border: 0; border-radius: 50%; background: #f1f3f3; cursor: pointer; }
.inbox-tabs { display: flex; gap: 6px; padding: 6px 14px 10px; }
.inbox-tabs button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; border: 0; border-radius: 999px; background: #f1f3f3; color: #555; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.inbox-tabs button.active { background: #000; color: #fff; }
.inbox-body { display: flex; flex-direction: column; gap: 10px; padding: 4px 14px 22px; overflow-y: auto; }
.inbox-card { padding: 13px 14px; border-radius: 16px; background: #f7f8f8; }
.inbox-card header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.inbox-chip { padding: 3px 10px; border-radius: 999px; background: #e5e7eb; font-size: 10px; font-weight: 700; }
.inbox-card p { margin: 3px 0; font-size: 12px; line-height: 1.8; }
.inbox-route { font-weight: 700; }
.inbox-meta { color: #6b7280; }
.inbox-price strong { color: #111; }
.inbox-card small { display: block; margin-top: 6px; color: #9ca3af; font-size: 10px; }
.inbox-empty { padding: 34px 10px; text-align: center; color: #9ca3af; font-size: 12px; }
@media (min-width: 900px) { .inbox-sheet { align-items: center; } .inbox-panel { border-radius: 24px; max-height: 80vh; } }

/* Support tickets sheet (reuses the inbox sheet frame) */
.ticket-new-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; margin-bottom: 8px; padding: 0 20px; border: 0; border-radius: 999px; background: linear-gradient(180deg, #3a3a3a 0%, #111 55%, #000 100%); color: #fff; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; box-shadow: 0 4px 0 #000, 0 10px 18px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .25) !important; }
.ticket-new-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #000, 0 3px 8px rgba(0, 0, 0, .25) !important; }
.ticket-new-btn:disabled { opacity: .55; }
.ticket-back { align-self: flex-start; border: 0; background: none; color: #555; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; padding: 4px 0; }
.ticket-row { cursor: pointer; }
.ticket-open { background: #fee2e2; color: #991b1b; }
.ticket-answered { background: #dcfce7; color: #166534; }
.ticket-closed { background: #e5e7eb; color: #4b5563; }
.ticket-thread-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ticket-thread-title strong { font-size: 14px; }
.ticket-msgs { display: flex; flex-direction: column; gap: 8px; max-height: 42vh; overflow-y: auto; }
.ticket-bubble { max-width: 86%; padding: 10px 12px; border-radius: 16px; background: #f1f3f3; font-size: 12px; line-height: 1.9; }
.ticket-bubble.user { align-self: flex-start; background: #000; color: #fff; }
.ticket-bubble.admin { align-self: flex-end; }
.ticket-bubble small { display: block; margin-top: 4px; font-size: 9px; opacity: .6; }
.ticket-form { display: flex; flex-direction: column; gap: 10px; }
.ticket-form label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 700; }
.ticket-form input, .ticket-form textarea { width: 100%; padding: 12px 14px; border: 1px solid #e4e8e8; border-radius: 14px; background: #fff; font: inherit; font-size: 13px; resize: vertical; }
.ticket-note { min-height: 16px; margin: 0; color: #b91c1c; font-size: 11px; }

/* Ticket section opens as a full page, not a bottom sheet */
#ticketSheet.ticket-page { align-items: stretch; background: #fff; }
#ticketSheet.ticket-page .inbox-backdrop { display: none; }
#ticketSheet.ticket-page .inbox-panel { max-width: 560px; max-height: none; height: 100%; border-radius: 0; margin: 0 auto; }
#ticketSheet .inbox-head { justify-content: flex-start; gap: 12px; padding: max(14px, env(safe-area-inset-top)) 14px 10px; border-bottom: 1px solid #eef0f0; }
#ticketSheet .inbox-body { flex: 1; padding-top: 12px; }
@media (min-width: 900px) {
    #ticketSheet.ticket-page { background: #eef1f5; }
    #ticketSheet.ticket-page .inbox-panel { height: calc(100% - 48px); margin: 24px auto; border-radius: 28px; background: #fff; box-shadow: 0 18px 60px rgba(20, 32, 51, .12) !important; }
}
.ticket-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.ticket-presets button { min-height: 36px; padding: 0 14px; border: 1px solid #e4e8e8; border-radius: 999px; background: #fff; color: #333; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.ticket-presets button.active { border-color: #000; background: #000; color: #fff; }

/* Invite "copy link" button: same black 3D pill as the share-number button */
#referralCopy {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    flex: 1; width: auto; min-height: 50px; margin: 0; padding: 0 24px; border: 0; border-radius: 999px; cursor: pointer;
    background: linear-gradient(180deg, #3a3a3a 0%, #111 55%, #000 100%); color: #fff;
    font: inherit; font-size: .92rem; font-weight: 800;
    box-shadow: 0 5px 0 #000, 0 12px 22px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .28) !important;
    transition: transform .12s ease, box-shadow .12s ease;
}
#referralCopy:active { transform: translateY(4px); box-shadow: 0 1px 0 #000, 0 4px 10px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .2) !important; }

/* Web sign-out at the bottom of the profile */
.site-logout-btn { display: flex; align-items: center; justify-content: center; width: calc(100% - 32px); max-width: 360px; min-height: 50px; margin: 22px auto 120px; border: 1.5px solid #e11d48; border-radius: 999px; background: #fff; color: #e11d48; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.site-logout-btn[hidden] { display: none; }
.site-logout-btn:active { background: #fff1f2; }
.site-logout-btn:disabled { opacity: .55; }

/* Load detail: a full page (same frame as the ticket page) with a fixed bid bar */
#loadDetail.load-detail-page { align-items: stretch; background: #fff; z-index: 1090; }
#loadDetail .inbox-backdrop { display: none; }
#loadDetail .inbox-panel { max-width: 560px; max-height: none; height: 100%; border-radius: 0; margin: 0 auto; padding-bottom: env(safe-area-inset-bottom, 0px); }
#loadDetail .inbox-head { justify-content: flex-start; gap: 12px; padding: max(14px, env(safe-area-inset-top)) 14px 10px; border-bottom: 1px solid #eef0f0; }
#loadDetail .load-detail-body { flex: 1; gap: 14px; padding: 14px 16px 24px; }
@media (min-width: 900px) {
    #loadDetail.load-detail-page { background: #eef1f5; }
    #loadDetail .inbox-panel { height: calc(100% - 48px); margin: 24px auto; border-radius: 28px; background: #fff; box-shadow: 0 18px 60px rgba(20, 32, 51, .12) !important; }
}
.ld-banner { width: 100%; max-height: 230px; object-fit: cover; border-radius: 20px; background: #f1f3f3; }
.ld-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ld-head h3 { margin: 0; font-size: 18px; }
.ld-status { padding: 4px 12px; border-radius: 999px; background: #dcfce7; color: #166534; font-size: 11px; font-weight: 800; white-space: nowrap; }
.ld-status.done { background: #e5e7eb; color: #4b5563; }
.ld-route { margin: 0; font-size: 15px; font-weight: 800; }
.ld-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ld-row { display: grid; gap: 3px; padding: 12px 14px; border-radius: 16px; background: #f6f7f7; }
.ld-row span { color: #6b7280; font-size: 11px; }
.ld-row strong { font-size: 13px; word-break: break-word; }
.ld-desc { padding: 14px; border-radius: 16px; background: #f6f7f7; }
.ld-desc h4 { margin: 0 0 6px; font-size: 13px; }
.ld-desc p { margin: 0; font-size: 13px; line-height: 2; color: #374151; }
.ld-owner { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; background: #f6f7f7; }
.ld-owner > div { display: grid; gap: 2px; }
.ld-owner small { color: #6b7280; font-size: 11px; }
.ld-owner em { font-style: normal; color: #6b7280; font-size: 12px; }
.ld-avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #111; color: #fff; font-weight: 800; }
.ld-trust { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ld-trust li { padding: 6px 12px; border-radius: 999px; background: #eef2ff; color: #3730a3; font-size: 11px; font-weight: 700; }
.load-detail-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid #eef0f0; background: #fff; }
.load-detail-bar > div { display: grid; gap: 2px; min-width: 0; }
.load-detail-bar small { color: #6b7280; font-size: 11px; }
.load-detail-bar strong { font-size: 15px; }
.load-detail-bar .ticket-new-btn { width: auto; flex: 1; max-width: 220px; margin: 0; }
.hm-load-card { cursor: pointer; }

/* ===== Detail page and bid sheet: roughly double the top spacing so content clears Telegram's header ===== */
#loadDetail .inbox-head, #ticketSheet .inbox-head, #inboxSheet .inbox-head { padding-top: calc(30px + var(--tg-safe-top, 0px) + env(safe-area-inset-top, 0px)) !important; }
.bid-sheet-panel { padding-top: calc(36px + var(--tg-safe-top, 0px) + env(safe-area-inset-top, 0px)) !important; }

/* ===== One button language: black 3D pill with white text (same as the invite-link button) ===== */
.miniapp-container .primary-btn, .miniapp-container .ai-analyze-btn, .miniapp-container .ai-apply-btn, .miniapp-container .phone-verify-btn, .miniapp-container .bid-submit,
.miniapp-container .messenger-connect-btn, .miniapp-container .hm-action-btn:not(:disabled), .miniapp-container .ticket-new-btn, .miniapp-container .site-start-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 0 !important; border-radius: 999px !important; cursor: pointer;
    background-color: #000 !important;
    background-image: linear-gradient(180deg, #3a3a3a 0%, #111 55%, #000 100%) !important;
    color: #fff !important; font-weight: 800;
    box-shadow: 0 4px 0 #000, 0 10px 18px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .25) !important;
    transition: transform .12s ease, box-shadow .12s ease;
}
.miniapp-container .primary-btn, .miniapp-container .ai-analyze-btn, .miniapp-container .ai-apply-btn, .miniapp-container .phone-verify-btn, .miniapp-container .bid-submit { min-height: 50px; }
.miniapp-container .primary-btn:active, .miniapp-container .ai-analyze-btn:active, .miniapp-container .ai-apply-btn:active, .miniapp-container .phone-verify-btn:active, .miniapp-container .bid-submit:active,
.miniapp-container .messenger-connect-btn:active, .miniapp-container .hm-action-btn:not(:disabled):active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #000, 0 3px 8px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .2) !important;
}
/* Success / saved states keep their own green */
.miniapp-container .primary-btn.is-saved, .miniapp-container .primary-btn.success { background-image: none !important; background-color: #16794c !important; box-shadow: 0 4px 0 #0e5636, 0 10px 18px rgba(22, 121, 76, .25) !important; }

/* White text and icons in every state, including nested spans/icons */
.miniapp-container .primary-btn, .miniapp-container .primary-btn *, .miniapp-container .ai-analyze-btn, .miniapp-container .ai-analyze-btn *, .miniapp-container .ai-apply-btn, .miniapp-container .ai-apply-btn *,
.miniapp-container .phone-verify-btn, .miniapp-container .phone-verify-btn *, .miniapp-container .bid-submit, .miniapp-container .bid-submit *, .miniapp-container .messenger-connect-btn,
.miniapp-container .messenger-connect-btn *, .miniapp-container .hm-action-btn:not(:disabled), .miniapp-container .hm-action-btn:not(:disabled) *, .miniapp-container .ticket-new-btn, .miniapp-container .ticket-new-btn *,
.miniapp-container #referralCopy, .miniapp-container #profilePhoneShare, .miniapp-container #profileEditPhoneShare, .miniapp-container #loadDetailBid, .miniapp-container #loadDetailBid *,
.miniapp-container .filter-tabs button.active, .ticket-presets button.active, .inbox-tabs button.active, #loadDetail .ticket-new-btn, #loadDetail .ticket-new-btn *, #ticketSheet .ticket-new-btn, #ticketSheet .ticket-new-btn * { color: #fff !important; }
.miniapp-container .primary-btn:hover, .miniapp-container .primary-btn:focus, .miniapp-container .primary-btn:disabled, .miniapp-container .bid-submit:disabled, .miniapp-container .ticket-new-btn:disabled { color: #fff !important; }
.miniapp-container .primary-btn:disabled, .miniapp-container .bid-submit:disabled { opacity: .5; box-shadow: 0 3px 0 #000 !important; }

/* Native file pickers (cargo image, vehicle image, receipts, avatar): the "choose file" part becomes the same pill */
.miniapp-container input[type="file"] { width: 100%; font: inherit; font-size: 12px; color: #4b5563; }
.miniapp-container input[type="file"]::file-selector-button {
    margin-inline-end: 12px; padding: 11px 22px; border: 0; border-radius: 999px; cursor: pointer;
    background-image: linear-gradient(180deg, #3a3a3a 0%, #111 55%, #000 100%); background-color: #000; color: #fff;
    font: inherit; font-size: 13px; font-weight: 800;
    box-shadow: 0 3px 0 #000, 0 8px 14px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.miniapp-container input[type="file"]::-webkit-file-upload-button {
    margin-inline-end: 12px; padding: 11px 22px; border: 0; border-radius: 999px; cursor: pointer;
    background-image: linear-gradient(180deg, #3a3a3a 0%, #111 55%, #000 100%); background-color: #000; color: #fff;
    font: inherit; font-size: 13px; font-weight: 800;
    box-shadow: 0 3px 0 #000, 0 8px 14px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .25);
}

/* Same pill buttons outside .miniapp-container (onboarding, pickers, account sub-pages) */
body .primary-btn, body .ai-analyze-btn, body .ai-apply-btn, body .phone-verify-btn, body .bid-submit {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px;
    border: 0 !important; border-radius: 999px !important; cursor: pointer; font-weight: 800;
    background-color: #000 !important; background-image: linear-gradient(180deg, #3a3a3a 0%, #111 55%, #000 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 0 #000, 0 10px 18px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .25) !important;
    transition: transform .12s ease, box-shadow .12s ease;
}
body .primary-btn *, body .ai-analyze-btn *, body .ai-apply-btn *, body .phone-verify-btn *, body .bid-submit * { color: #fff !important; }
body .primary-btn:active, body .ai-analyze-btn:active, body .ai-apply-btn:active, body .phone-verify-btn:active, body .bid-submit:active {
    transform: translateY(3px); box-shadow: 0 1px 0 #000, 0 3px 8px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .2) !important;
}
body .primary-btn.is-saved, body .primary-btn.success { background-image: none !important; background-color: #16794c !important; box-shadow: 0 4px 0 #0e5636, 0 10px 18px rgba(22, 121, 76, .25) !important; }
body .primary-btn:disabled, body .bid-submit:disabled { opacity: .5; box-shadow: 0 3px 0 #000 !important; }

/* Header inbox icons: loads tab only; unread badge inside profile menu rows */
body.not-loads-tab .app-header-actions { display: none; }
.profile-menu-list .menu-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-inline-start: auto; margin-inline-end: 8px; border-radius: 999px; background: #e11d48; color: #fff; font-size: 10px; font-style: normal; font-weight: 800; line-height: 1; }
.profile-menu-list .menu-badge[hidden] { display: none; }

/* Header inbox: bell + arrow; the arrow expands the received / sent buttons */
.app-header-actions { align-items: center; gap: 6px; }
.inbox-expand { position: relative; display: inline-grid; place-items: center; width: 26px; height: 40px; padding: 0; border: 0; border-radius: 13px; background: #f1f3f3; color: #000; cursor: pointer; }
.inbox-expand svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .22s ease; }
.app-header-actions.expanded .inbox-expand svg { transform: rotate(180deg); }
.inbox-expand b { position: absolute; top: 2px; right: 2px; min-width: 8px; height: 8px; padding: 0; border-radius: 50%; background: #e11d48; font-size: 0; }
.inbox-expand b[hidden] { display: none; }
.app-header-actions.expanded .inbox-expand b { display: none; }
.inbox-extra { display: none; align-items: center; gap: 8px; }
.app-header-actions.expanded .inbox-extra { display: flex; animation: inbox-extra-in .2s ease-out; }
@keyframes inbox-extra-in { from { opacity: 0; transform: translateX(-8px) scale(.9); } to { opacity: 1; transform: none; } }

/* Header logo: centered normally, slides to the right edge while the inbox buttons are expanded */
.app-header { container-type: inline-size; }
.miniapp-brand-logo { transition: transform .38s cubic-bezier(.2, .9, .25, 1); will-change: transform; }
.app-header.actions-open .miniapp-brand-logo { transform: translateX(calc(50cqw - 50% - 14px)); }
@media (prefers-reduced-motion: reduce) { .miniapp-brand-logo { transition: none; } }

/* ===== Vehicle plate: yellow Iranian truck plate with a blue strip, or a white transit plate ===== */
.plate-kinds { display: flex; gap: 8px; margin-bottom: 10px; }
.plate-kind { flex: 1; min-height: 38px; padding: 0 10px; border: 1.5px solid #e1e4e4; border-radius: 999px; background: #fff; color: #333; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.plate-kind.active { border-color: #000; background: #000; color: #fff; }
.plate-frame { position: relative; height: 66px; border: 3px solid #111; border-radius: 12px; background: #f7c600; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35), 0 3px 8px rgba(0, 0, 0, .22) !important; }
.plate-frame[hidden] { display: none; }
.plate-strip { flex: 0 0 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: linear-gradient(180deg, #2a5bd0, #1a3f9e); color: #fff; font-size: 8px; font-weight: 800; line-height: 1.15; text-align: center; }
.plate-strip i { display: block; width: 22px; height: 14px; border-radius: 1px; font-style: normal; background: linear-gradient(to bottom, #239f40 33%, #fff 33% 66%, #da0000 66%); }
.plate-frame .plate-cell { min-width: 0; border-left: 0; background: transparent; color: #111; font-size: 32px; font-weight: 900; }
.plate-frame .plate-cell-2d { flex: 1 1 20%; }
.plate-frame .plate-cell-letter { flex: 1 1 17%; font-size: 26px; }
.plate-frame .plate-cell-3d { flex: 1.4 1 26%; }
.plate-frame .plate-cell:focus { background: rgba(255, 255, 255, .38); }
.plate-region { flex: 0 0 27%; gap: 0; padding: 3px 2px; justify-content: center; border-left: 3px solid #111; background: transparent; }
.plate-region small { color: #111; font-size: 11px; font-weight: 900; line-height: 1; }
.plate-region .plate-region-num { height: 34px; color: #111; font-size: 28px; font-weight: 900; }
.plate-frame::placeholder, .plate-frame input::placeholder { color: rgba(17, 17, 17, .28); font-weight: 700; }
.plate-transit { background: #fff; }
.plate-strip-eu i { width: auto; height: auto; background: none; color: #ffd400; font-size: 14px; }
.plate-transit-input { flex: 1; min-width: 0; padding: 0 10px; border: 0; background: transparent; color: #111; font: 800 30px/1 "Courier New", monospace; letter-spacing: .08em; text-align: center; text-transform: uppercase; outline: none; }

/* ===== File picker label ("choose vehicle photo"): same black 3D pill with white text ===== */
body .file-picker-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 50px; padding: 0 22px;
    border: 0 !important; border-radius: 999px !important; cursor: pointer; font-weight: 800;
    background-color: #000 !important; background-image: linear-gradient(180deg, #3a3a3a 0%, #111 55%, #000 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 0 #000, 0 10px 18px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .25) !important;
    transition: transform .12s ease, box-shadow .12s ease;
}
body .file-picker-btn *, body .file-picker-btn i, body .file-picker-btn span { color: #fff !important; }
body .file-picker-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #000, 0 3px 8px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .2) !important; }

/* Plate columns: fixed shares so the 3-digit cell is never squeezed by the letter dropdown */
.plate-frame { box-sizing: border-box; }
.plate-frame .plate-cell-2d { flex: 0 0 19%; }
.plate-frame .plate-cell-letter { flex: 0 0 16%; width: 0; padding: 0; border-radius: 0; background-color: transparent; text-align: center; text-align-last: center; -webkit-appearance: none; appearance: none; font-size: 24px; }
.plate-frame .plate-cell-letter:invalid { font-size: 13px; color: rgba(17, 17, 17, .45); }
.plate-frame .plate-cell-3d { flex: 0 0 27%; }
.plate-frame .plate-region { flex: 0 0 26%; }
.plate-frame .plate-cell { padding: 0 2px; text-align: center; }
.plate-frame select.plate-cell-letter { background: transparent !important; background-image: none !important; border-radius: 0 !important; box-shadow: none !important; min-height: 0 !important; padding: 0 !important; }
.plate-frame select.plate-cell-letter:focus { background: rgba(255, 255, 255, .38) !important; }

/* ===== Load share sheet (MiniApp) ===== */
.load-share-btn { margin-inline-start: auto; }
.share-sheet { position: fixed; inset: 0; z-index: 1120; display: flex; align-items: flex-end; justify-content: center; }
.share-sheet[hidden] { display: none; }
.share-backdrop { position: absolute; inset: 0; border: 0; background: rgba(0, 0, 0, .45); cursor: default; }
.share-panel { position: relative; width: 100%; max-width: 560px; display: grid; gap: 12px; padding: 10px 18px calc(22px + env(safe-area-inset-bottom, 0px)); border-radius: 26px 26px 0 0; background: #fff; animation: share-up .25s cubic-bezier(.2, .9, .25, 1); }
@keyframes share-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.share-handle { width: 42px; height: 5px; margin: 2px auto 4px; border-radius: 5px; background: #d5d9de; }
.share-panel h3 { margin: 0; font-size: 16px; text-align: center; }
.share-panel .ticket-new-btn { width: 100%; margin: 0; }
.share-link { display: grid; gap: 6px; }
.share-link small { color: #6b7280; font-size: 11px; }
.share-link > div { display: flex; gap: 8px; }
.share-link input { flex: 1; min-width: 0; height: 44px; padding: 0 12px; border: 1px solid #e4e8e8; border-radius: 14px; background: #f6f7f7; font-size: 12px; color: #374151; }
.share-link button { flex: none; min-width: 78px; height: 44px; border: 0; border-radius: 999px; background: #111; color: #fff; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.share-more { height: 44px; border: 1.5px solid #e1e4e4; border-radius: 999px; background: #fff; color: #111; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.share-more[hidden] { display: none; }
@media (min-width: 900px) { .share-sheet { align-items: center; } .share-panel { border-radius: 26px; max-width: 480px; } }

/* AI entry button: gradient AI tile with an "AI" badge and a small label underneath */
.ai-entry-icon { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; width: 58px; height: auto; padding: 0; background: transparent; }
.ai-entry-icon svg { width: 38px; height: 38px; padding: 8px; border-radius: 13px; background: linear-gradient(135deg, #1769e0 0%, #5b3df0 55%, #8b2fe0 100%); color: #fff; fill: currentColor; box-shadow: 0 6px 14px rgba(70, 60, 220, .35), inset 0 1px 0 rgba(255, 255, 255, .35); transition: transform .15s ease; }
.ai-entry-icon:active svg { transform: scale(.92); }
.ai-entry-icon::before { content: "AI"; position: absolute; top: -5px; right: 6px; padding: 2px 5px; border-radius: 7px; background: #000; color: #fff; font-size: 8px; font-weight: 900; line-height: 1; letter-spacing: .03em; }
.ai-entry-icon::after { content: "هوش مصنوعی"; color: #111; font-size: 10px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
#new-cargo .ai-entry-icon, #driver-status .ai-entry-icon { top: -56px; }

/* Messenger connection card: no outer border (the rows inside are already filled) */
.messenger-connect { border: 0; padding: 6px 0; background: transparent; }

/* AI button: the animated sparkles icon on a black tile (no extra badge needed) */
.ai-entry-icon .ai-anim { display: block; width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(145deg, #1c1c1c, #000); box-shadow: 0 5px 0 #000, 0 10px 16px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .22); overflow: hidden; }
.ai-entry-icon:active .ai-anim { transform: translateY(3px); box-shadow: 0 1px 0 #000, 0 3px 8px rgba(0, 0, 0, .25); }
.ai-entry-icon::before { display: none; }
.ai-entry-icon { gap: 7px; }
#new-cargo .ai-entry-icon, #driver-status .ai-entry-icon { top: -60px; }
.ai-entry-icon .ai-anim { background: none; box-shadow: 0 6px 14px rgba(70, 60, 220, .32); border-radius: 14px; }
.ai-entry-icon:active .ai-anim { transform: scale(.94); box-shadow: 0 2px 6px rgba(70, 60, 220, .3); }
#new-cargo .ai-entry-icon, #driver-status .ai-entry-icon { top: -46px; }

/* AI button: just the animated sparkles on white (no tile, gradient or shadow behind them) */
.ai-entry-icon .ai-anim { width: 50px; height: 50px; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
.ai-entry-icon .ai-anim svg { width: 100%; height: 100%; padding: 0; border-radius: 0; background: none; box-shadow: none; }
.ai-entry-icon:active .ai-anim { transform: scale(.94); box-shadow: none; }
.ai-entry-icon { gap: 2px; }

/* ===== Deal flow UI: accept / reject, notices, timeline, commission box ===== */
.inbox-tabs button { font-size: 11px; padding: 0 4px; }
.inbox-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.inbox-actions .inbox-confirm { flex: 1 1 100%; margin: 0; font-size: 12px; line-height: 1.9; color: #374151; }
.deal-accept, .deal-reject { min-height: 42px; padding: 0 18px; border: 0; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.deal-accept { flex: 1; background: linear-gradient(180deg, #3a3a3a 0%, #111 55%, #000 100%); color: #fff !important; box-shadow: 0 3px 0 #000, 0 8px 14px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .25); }
.deal-accept.small { flex: none; min-height: 36px; margin-top: 8px; font-size: 12px; }
.deal-reject { background: #fff; color: #b42318; border: 1.5px solid #f3c1bb; }
.deal-accept:disabled, .deal-reject:disabled { opacity: .55; }
.inbox-notice { margin: 0 0 4px; padding: 12px 14px; border-radius: 14px; background: #ecfdf3; color: #166534; font-size: 12px; line-height: 1.9; }
.inbox-event { background: #f1f5ff; }
.inbox-event strong { display: block; margin-bottom: 4px; font-size: 13px; }

.commission-info { margin: 0 0 6px; padding: 12px 14px; border-radius: 14px; background: #fffbeb; color: #92400e; font-size: 13px; line-height: 1.9; }
.commission-info small { opacity: .75; }

.my-load-card { display: grid; gap: 10px; padding: 14px; border-radius: 18px; background: #f6f7f7; }
.my-load-card header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.my-load-status { padding: 3px 10px; border-radius: 999px; background: #e5e7eb; font-size: 10px; font-weight: 800; }
.load-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.load-steps li { position: relative; display: flex; align-items: center; gap: 10px; padding-inline-start: 2px; font-size: 12px; color: #9ca3af; }
.load-steps li i { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #d1d5db; background: #fff; }
.load-steps li.done { color: #111; font-weight: 700; }
.load-steps li.done i { border-color: #16a34a; background: #16a34a; }
.load-steps li.current { color: #1769e0; font-weight: 800; }
.load-steps li.current i { border-color: #1769e0; box-shadow: 0 0 0 4px rgba(23, 105, 224, .18); }
.my-load-note { margin: 0; padding: 10px 12px; border-radius: 12px; background: #eff6ff; color: #1e40af; font-size: 12px; }
.link-btn { border: 0; background: none; color: #1769e0; font: inherit; font-weight: 800; text-decoration: underline; cursor: pointer; }

/* ===== File fields: Persian choose-file button and styled errors ===== */
.file-field { display: flex; align-items: center; gap: 12px; width: 100%; }
.file-field-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none; min-height: 44px; padding: 0 22px; border-radius: 999px; cursor: pointer; font-size: 13px; font-weight: 800; color: #fff !important; background-color: #000; background-image: linear-gradient(180deg, #3a3a3a 0%, #111 55%, #000 100%); box-shadow: 0 3px 0 #000, 0 8px 14px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .25) !important; }
.file-field-btn * { color: #fff !important; }
.file-field-btn input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 0; }
.file-field-btn:active { transform: translateY(2px); }
.file-field-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #6b7280; font-size: 12px; }
.file-error { display: block; margin-top: 8px; padding: 9px 12px; border-radius: 12px; background: #fef2f2; color: #b42318; font-size: 12px; font-weight: 700; line-height: 1.8; }
.file-error[hidden] { display: none; }
.has-error { outline: 2px solid #f3c1bb; outline-offset: 3px; border-radius: 16px; }

/* ===== Persian date picker (month and day) ===== */
.date-trigger { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 0 16px; border: 0; border-radius: 17px; background: var(--mini-soft, #f1f3f3); color: #111; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; text-align: right; }
.date-trigger svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.date-trigger-text { flex: none; }
.date-trigger-sub { margin-inline-start: auto; color: #6b7280; font-size: 12px; font-weight: 600; }
.date-sheet { z-index: 1130; }
.dp-panel { max-height: 86vh; overflow-y: auto; }
.dp-quick { display: flex; gap: 10px; }
.dp-quick button { flex: 1; min-height: 46px; border: 0; border-radius: 999px; background: linear-gradient(180deg, #3a3a3a 0%, #111 55%, #000 100%); color: #fff; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; box-shadow: 0 3px 0 #000, 0 8px 14px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .25); }
.dp-quick button:active { transform: translateY(2px); }
.dp-months { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 6px; }
.dp-months button { flex: none; min-height: 38px; padding: 0 16px; border: 1.5px solid #e1e4e4; border-radius: 999px; background: #fff; color: #333; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.dp-months button.active { border-color: #000; background: #000; color: #fff; }
.dp-months button:disabled { opacity: .35; cursor: default; }
.dp-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.dp-days button { aspect-ratio: 1; border: 0; border-radius: 14px; background: #f4f6f6; color: #111; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.dp-days button.today { box-shadow: inset 0 0 0 2px #1769e0; }
.dp-days button.selected { background: #000; color: #fff; }
.dp-days button:disabled { background: transparent; color: #c4c8cc; cursor: default; }

/* Ticket photo attachments */
.ticket-attach { display: grid; gap: 8px; }
.ticket-attach > span { font-size: 12px; font-weight: 700; }
.ticket-img-link { display: block; margin-top: 8px; }
.ticket-img { display: block; max-width: 100%; max-height: 220px; border-radius: 12px; object-fit: cover; }
.file-error.file-info { background: #ecfdf3; color: #166534; }

/* Profile tab: fixed header, centered logo, content fades out under a white gradient */
body.profile-tab-active .app-header { display: flex; position: fixed; top: 0; left: 0; right: 0; z-index: 50; min-height: calc(56px + var(--tg-safe-top, 0px)); margin: 0; padding-top: var(--tg-safe-top, 0px); justify-content: center; align-items: center; background: linear-gradient(#fff 55%, rgba(255,255,255,0)); pointer-events: none; }
body.profile-tab-active .app-header-actions { display: none; }
body.profile-tab-active .profile-page { padding-top: 64px; }

/* Profile hub: avatar on top, then name, then phone, all centered */
.profile-hub-head { flex-direction: column; justify-content: center; gap: 10px; text-align: center; }
.profile-hub-head .profile-hub-avatar { width: 88px; height: 88px; font-size: 32px; }
.profile-hub-head h1 { margin: 0; }
.profile-hub-head p { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 4px 0 0; }

/* Price-validity acknowledgement: small, right-aligned, custom tick */
.price-validity { text-align: right; }
.price-validity label { display: flex; align-items: center; justify-content: flex-start; gap: 8px; margin-top: 8px; font-size: 11.5px; font-weight: 600; color: #333; cursor: pointer; }
.price-validity input[type="checkbox"], .bq-validity input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 18px; height: 18px; margin: 0; border: 1.5px solid #b8bec2; border-radius: 6px; background: #fff; display: grid; place-content: center; cursor: pointer; transition: background .15s, border-color .15s; }
.price-validity input[type="checkbox"]::after, .bq-validity input[type="checkbox"]::after { content: ""; width: 9px; height: 5px; border: solid #fff; border-width: 0 0 2px 2px; transform: rotate(-45deg) scale(0); margin-top: -2px; transition: transform .15s; }
.price-validity input[type="checkbox"]:checked, .bq-validity input[type="checkbox"]:checked { background: #111; border-color: #111; }
.price-validity input[type="checkbox"]:checked::after, .bq-validity input[type="checkbox"]:checked::after { transform: rotate(-45deg) scale(1); }

/* Website (/account): much less top spacing than inside Telegram */
html.site-web .miniapp-container { margin-top: 8px; padding-top: 12px; }
html.site-web .profile-onboarding { padding-top: 18px; }
html.site-web .app-header { min-height: 34px; margin-bottom: 4px; }
html.site-web body.profile-tab-active .app-header { min-height: 44px; padding-top: 0; }
html.site-web body.profile-tab-active .profile-page { padding-top: 48px; }
html.site-web .miniapp-brand-logo { width: 32px; height: 32px; }

/* Tenure ring around the profile photo: colour and effect grow with time on Barnet */
.tenure-ring { position: relative; display: grid; place-items: center; width: 108px; height: 108px; border-radius: 50%; --ring: conic-gradient(#8fb6ff, #c9dcff, #8fb6ff); }
.tenure-ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--ring); }
.tenure-ring .profile-hub-avatar { position: relative; z-index: 1; width: 98px !important; height: 98px !important; border: 4px solid #fff; box-sizing: border-box; font-size: 34px; }
.tenure-badge { position: absolute; z-index: 2; bottom: -12px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 4px 11px; border-radius: 999px; background: #111; color: #fff; font-size: 11px; font-weight: 800; box-shadow: 0 4px 12px rgba(0,0,0,.18); }
.tenure-badge[hidden] { display: none; }
.tenure-ring[data-tier="1"] { --ring: conic-gradient(#34d399, #a7f3d0, #34d399); }
.tenure-ring[data-tier="2"] { --ring: conic-gradient(#f59e0b, #fde68a, #f59e0b); box-shadow: 0 0 0 3px rgba(245,158,11,.15); }
.tenure-ring[data-tier="3"] { --ring: conic-gradient(#ef4444, #f97316, #fde047, #ef4444); box-shadow: 0 0 18px rgba(249,115,22,.35); }
.tenure-ring[data-tier="4"] { --ring: conic-gradient(#7c3aed, #38bdf8, #f0abfc, #7c3aed); box-shadow: 0 0 22px rgba(124,58,237,.45); }
.tenure-ring[data-tier="3"]::before { animation: tenure-spin 6s linear infinite; }
.tenure-ring[data-tier="4"]::before { animation: tenure-spin 4s linear infinite; }
@keyframes tenure-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tenure-ring::before { animation: none !important; } }
.profile-hub-head { padding-bottom: 8px; }

/* Tap the profile photo to pick a new one */
.tenure-ring { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.avatar-camera { position: absolute; z-index: 2; top: 2px; right: 2px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #111; border: 2px solid #fff; }
.avatar-camera svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linejoin: round; }
.tenure-ring.is-uploading .profile-hub-avatar { opacity: .55; }

/* The photo picker input stays invisible; the global file-input styling must not show it */
.quick-photo-input, .profile-hub-head input[type="file"] { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; border: 0 !important; opacity: 0 !important; overflow: hidden !important; pointer-events: none !important; clip: rect(0 0 0 0) !important; }
.tenure-ring { margin-inline: auto; }

/* Filter sheet: the active tab was white text on a white pill */
.filter-tabs button.active, .miniapp-container .filter-tabs button.active { background: #111 !important; color: #fff !important; }

/* Select pickers must open above account sub-pages (profile edit, wallet, ...), not under them */
.mini-select-page { z-index: 1300 !important; }

/* Profile edit: the save button floats at the bottom while the form scrolls */
#profileEditForm { padding-bottom: 96px; }
#profileEditForm #profileEditSubmit { position: sticky; bottom: calc(14px + var(--tg-safe-bottom, 0px)); z-index: 5; width: 100%; box-shadow: 0 10px 28px rgba(0,0,0,.28); }
#profileEditForm #profileEditMessage { margin-top: 10px; }

/* Medals */
.profile-medals { margin: 18px 0 8px; }
.profile-medals h3 { margin: 0 0 10px; font-size: 15px; font-weight: 800; }
.medal-row { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: none; }
.medal-row::-webkit-scrollbar { display: none; }
.medal { flex: 0 0 auto; width: 92px; display: grid; justify-items: center; gap: 6px; padding: 10px 6px; border: 1px solid #eceeee; border-radius: 18px; background: #fff; font: inherit; cursor: pointer; }
.medal b { font-size: 10.5px; font-weight: 800; line-height: 1.6; text-align: center; color: #222; }
.medal-art { display: grid; place-items: center; width: 64px; height: 64px; font-size: 26px; }
.medal-art svg { width: 100% !important; height: 100% !important; }
.medal:not(.earned) { background: #f6f7f8; }
.medal:not(.earned) .medal-art { filter: grayscale(1); opacity: .45; }
.medal:not(.earned) b { color: #8a8f93; }
.medal.earned { border-color: #fde68a; box-shadow: 0 6px 16px rgba(245, 158, 11, .14); }

/* Medals page and sheet */
.medals-title { margin: 6px 0 4px; font-size: 22px; font-weight: 900; text-align: right; }
.medals-lead { margin: 0 0 16px; color: #747879; font-size: 12px; text-align: right; }
.medal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-bottom: 28px; }
.medal-grid .medal { width: auto; padding: 16px 10px; }
.medal-grid .medal-art { width: 84px; height: 84px; }
.medal-grid .medal b { font-size: 12px; }
.medal-art > svg[viewBox="0 0 24 24"] { width: 34px !important; height: 34px !important; fill: none; stroke: #9aa0a6; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.medal-sheet-panel { text-align: center; padding-top: 22px; }
.medal-sheet-art { width: 190px; height: 190px; margin: 0 auto 6px; }
.medal-sheet-art.is-locked { filter: grayscale(1); opacity: .6; animation: medal-shake 2.4s ease-in-out infinite; }
.medal-sheet-art svg { width: 100% !important; height: 100% !important; }
.medal-sheet-panel h2 { margin: 4px 0 6px; font-size: 20px; }
.medal-sheet-state { display: inline-block; margin: 0 0 10px; padding: 4px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 800; }
.medal-sheet-state.earned { background: #dcfce7; color: #166534; }
.medal-sheet-state.locked { background: #f1f3f3; color: #555; }
.medal-sheet-text { margin: 0 0 18px; color: #555; font-size: 13px; line-height: 2; }
@keyframes medal-shake { 0%, 88%, 100% { transform: rotate(0); } 91% { transform: rotate(-5deg); } 94% { transform: rotate(5deg); } 97% { transform: rotate(-3deg); } }
@media (prefers-reduced-motion: reduce) { .medal-sheet-art.is-locked { animation: none; } }