:root {
            --bg-color: #1c212c;
            --text-color: #e8e6df;
            --hint-color: #9a958c;
            --btn-color: #e3b04a;
            --btn-text-color: #16120a;
            --secondary-bg: #12151c;
            --line-color: #2a3140;
        }

        html, body { color-scheme: dark; }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: var(--secondary-bg);
            color: var(--text-color);
            margin: 0;
            padding: 12px;
            padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
            padding-left: calc(12px + env(safe-area-inset-left, 0px));
            padding-right: calc(12px + env(safe-area-inset-right, 0px));
            -webkit-tap-highlight-color: transparent;
        }
        #tgMissingBanner {
            display: none;
            background: #3a2a12;
            color: #f3d7a0;
            border: 1px solid #e3b04a;
            border-radius: 10px;
            padding: 10px 12px;
            margin-bottom: 10px;
            font-size: 14px;
            line-height: 1.4;
        }

        .screen { display: none; }
        .screen.active { display: block; }

        .search-container {
            position: sticky;
            top: 0;
            background-color: var(--secondary-bg);
            padding-bottom: 8px;
            z-index: 100;
        }

        .search-input {
            width: 100%;
            padding: 12px 16px;
            border-radius: 12px;
            border: none;
            background-color: var(--bg-color);
            color: var(--text-color);
            font-size: 16px;
            box-sizing: border-box;
            outline: none;
            border: 1px solid var(--line-color);
        }

        .category-header-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 12px 0 8px 4px;
        }

        .header-bar-right {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            margin: 12px 4px 8px 0;
        }

        .category-title {
            font-size: 17px;
            font-weight: 700;
            margin: 0;
        }

        .btn-back-cat {
            background: none;
            border: none;
            color: var(--btn-color);
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            padding: 0;
        }

        .categories-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
            margin-top: 6px;
        }

        .category-card {
            background-color: var(--bg-color);
            border-radius: 12px;
            padding: 10px 12px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-shadow: none;
            cursor: pointer;
            width: 100%;
            border: 1px solid var(--line-color);
            font: inherit;
            color: inherit;
            text-align: left;
            box-sizing: border-box;
        }

        .category-card:active {
            background-color: var(--secondary-bg);
        }

        .category-card-name {
            font-size: 14px;
            font-weight: 600;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            padding-right: 6px;
        }

        .category-card-count {
            font-size: 12px;
            font-weight: 600;
            color: var(--btn-color);
            background-color: var(--secondary-bg);
            padding: 2px 8px;
            border-radius: 8px;
            flex-shrink: 0;
        }

        .catalog-footer-btns {
            display: flex;
            gap: 8px;
            margin-top: 16px;
            align-items: stretch;
        }
        .feedback-btn {
            display: block;
            flex: 1;
            text-align: center;
            background-color: transparent;
            color: var(--btn-color);
            border: 1px solid var(--btn-color);
            border-radius: 12px;
            padding: 12px 8px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
        }

        .product-card {
            background-color: var(--bg-color);
            border-radius: 14px;
            padding: 12px 16px;
            margin-bottom: 8px;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            box-shadow: none;
            border: 1px solid var(--line-color);
        }
        .product-card-main {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 8px;
        }
        .product-card.has-photo .product-card-main { cursor: pointer; }
        .product-info { flex-grow: 1; padding-right: 8px; min-width: 0; }
        .product-name { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
        .product-price { font-size: 14px; font-weight: 700; color: var(--btn-color); }
        .product-photo-hint {
            display: none;
            margin-left: 6px;
            color: var(--hint-color);
            font-size: 12px;
            font-weight: 400;
        }
        .product-card.has-photo .product-photo-hint { display: inline; }
        .product-photo-hint::before { content: "▾"; }
        .product-card.open .product-photo-hint::before { content: "▴"; }
        .product-action { flex-shrink: 0; }
        .product-photo { display: none; margin-top: 10px; }
        .product-card.open .product-photo { display: block; }
        .product-photo img {
            width: 100%;
            max-height: 280px;
            object-fit: contain;
            background: #12151c;
            border-radius: 10px;
        }

        .btn-add {
            background-color: var(--btn-color);
            color: var(--btn-text-color);
            border: none;
            padding: 8px 12px;
            border-radius: 10px;
            font-weight: 600;
            font-size: 14px;
            cursor: pointer;
            min-width: 95px;
            height: 38px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .counter {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 6px;
            background-color: var(--secondary-bg);
            padding: 4px 6px;
            border-radius: 10px;
            min-width: 95px;
            height: 38px;
            box-sizing: border-box;
        }

        .counter-btn {
            background-color: var(--btn-color);
            color: var(--btn-text-color);
            border: none;
            width: 28px;
            height: 28px;
            border-radius: 8px;
            font-size: 16px;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

        .counter-val { font-weight: 700; font-size: 15px; text-align: center; flex-grow: 1; }

        .section-card {
            background-color: var(--bg-color);
            border-radius: 14px;
            padding: 16px;
            margin-bottom: 12px;
            box-shadow: none;
            border: 1px solid var(--line-color);
        }

        .section-title { font-weight: 700; font-size: 16px; margin-bottom: 12px; }
        .option-group { display: flex; flex-direction: column; gap: 8px; }

        .option-btn {
            background-color: var(--secondary-bg);
            border: 2px solid transparent;
            border-radius: 10px;
            padding: 12px;
            font-size: 15px;
            font-weight: 600;
            color: var(--text-color);
            cursor: pointer;
            text-align: left;
        }

        .option-btn.selected {
            border-color: var(--btn-color);
            background-color: var(--bg-color);
        }

        .summary-item-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--line-color);
        }

        .summary-total {
            border-top: 1px solid var(--line-color);
            padding-top: 8px;
            margin-top: 8px;
            font-weight: 700;
            font-size: 16px;
            display: flex;
            justify-content: space-between;
        }
        .summary-bonus {
            display: flex;
            justify-content: space-between;
            margin-top: 6px;
            font-size: 13px;
            color: #5dcc8a;
            font-weight: 600;
        }
        .summary-due {
            display: flex;
            justify-content: space-between;
            margin-top: 6px;
            font-size: 14px;
            font-weight: 700;
        }
        .checkout-pay-row {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .checkout-pay-select {
            flex: 0 1 220px;
            width: 58%;
            max-width: 240px;
            min-width: 0;
            padding: 12px 36px 12px 12px;
            border-radius: 12px;
            border: 1px solid var(--line-color);
            background-color: var(--bg-color);
            color: var(--text-color);
            font-size: 15px;
            font-weight: 600;
            outline: none;
            appearance: none;
            -webkit-appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%239a958c' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 12px center;
        }
        .checkout-pay-select option {
            background-color: var(--bg-color);
            color: var(--text-color);
        }
        .checkout-pay-due {
            flex: 0 0 auto;
            font-size: 22px;
            font-weight: 800;
            letter-spacing: -0.03em;
            white-space: nowrap;
            line-height: 1.1;
            color: var(--btn-color);
        }
        .wallet-split { margin-bottom: 12px; }
        .wallet-split-row {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            gap: 12px;
            margin-bottom: 6px;
            font-size: 16px;
            font-weight: 800;
        }
        .wallet-split-row > span { font-size: 13px; font-weight: 600; color: var(--hint-color); }
        .wallet-split-amt {
            text-align: right;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 2px;
        }
        .game-bonus-till {
            font-size: 11px;
            font-weight: 600;
            color: var(--hint-color);
            white-space: nowrap;
        }

        .pay-info {
            background-color: var(--secondary-bg);
            border-radius: 10px;
            padding: 12px;
            font-size: 13px;
            margin-top: 10px;
            line-height: 1.4;
        }
        .credit-plaque {
            display: none;
            margin-top: 10px;
            border-radius: 12px;
            padding: 12px 14px;
            border: 1px solid #6a3a32;
            background: #2a1614;
            color: var(--text-color);
        }
        .credit-plaque.show { display: block; }
        .credit-plaque.ok {
            border-color: #6a5430;
            background: #2a2414;
        }
        .credit-plaque .credit-title {
            font-size: 14px;
            font-weight: 800;
            color: #ff8b7a;
            margin-bottom: 6px;
        }
        .credit-plaque.ok .credit-title { color: var(--btn-color); }
        .credit-plaque ul {
            margin: 6px 0 0;
            padding-left: 18px;
            font-size: 12px;
            line-height: 1.45;
            color: var(--hint-color);
        }
        .credit-plaque .credit-check {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            margin-top: 10px;
            font-size: 13px;
            font-weight: 600;
        }
        .credit-plaque .credit-check input { margin-top: 2px; }

        .card-copy-box {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            background-color: var(--bg-color);
            border: 1px solid var(--line-color);
            border-radius: 8px;
            padding: 6px 10px;
            margin: 8px 0 0;
        }

        .card-number {
            font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
            font-size: 12px;
            font-weight: 600;
            color: var(--hint-color);
            letter-spacing: 0.03em;
        }
        .btn-copy {
            background-color: var(--secondary-bg);
            color: var(--text-color);
            border: 1px solid var(--line-color);
            padding: 4px 8px;
            border-radius: 6px;
            font-size: 11px;
            font-weight: 600;
            cursor: pointer;
            flex-shrink: 0;
        }
        .mono-pay { margin-top: 8px; }
        .mono-link { color: var(--btn-color); font-weight: 700; text-decoration: none; font-size: 14px; }

        .floating-action-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background-color: var(--bg-color);
            padding: 12px 16px;
            box-shadow: none;
            border-top: 1px solid var(--line-color);
            box-sizing: border-box;
            z-index: 200;
            display: none;
            align-items: center;
            justify-content: space-between;
        }
        .floating-action-bar.active { display: flex; }
        .btn-main-action {
            background-color: var(--btn-color);
            color: var(--btn-text-color);
            border: none;
            padding: 14px 20px;
            border-radius: 12px;
            font-size: 16px;
            font-weight: 700;
            cursor: pointer;
            width: 100%;
            text-align: center;
        }
        .btn-main-action:disabled {
            opacity: 0.45;
            cursor: not-allowed;
        }

        .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.65); z-index: 1000; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; }
        .modal.active { display: flex; }
        .modal-content { background-color: var(--bg-color); width: 100%; max-width: 400px; border-radius: 16px; padding: 20px; border: 1px solid var(--line-color); }
        .modal-textarea { width: 100%; height: 100px; border-radius: 10px; border: 1px solid var(--hint-color); background-color: var(--secondary-bg); color: var(--text-color); padding: 10px; font-size: 14px; resize: none; outline: none; margin-bottom: 12px; box-sizing: border-box; }
        .modal-buttons { display: flex; gap: 8px; }
        .modal-btn { flex: 1; padding: 10px; border-radius: 10px; border: none; font-weight: 600; font-size: 14px; cursor: pointer; }
        .btn-cancel { background-color: var(--secondary-bg); color: var(--text-color); }
        .btn-submit { background-color: var(--btn-color); color: var(--btn-text-color); }

        .success-container { text-align: center; padding: 40px 20px; background-color: var(--bg-color); border-radius: 16px; margin-top: 20px; border: 1px solid var(--line-color); }
        .success-icon { font-size: 48px; margin-bottom: 16px; }
        .success-title { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
        .success-text { font-size: 14px; color: var(--hint-color); margin-bottom: 24px; line-height: 1.4; }
        .btn-restart { background-color: var(--btn-color); color: var(--btn-text-color); border: none; padding: 12px 24px; border-radius: 12px; font-size: 15px; font-weight: 600; cursor: pointer; width: 100%; }

        .role-picker {
            display: none;
            position: fixed;
            inset: 0;
            background: var(--secondary-bg);
            z-index: 400;
            padding: 48px 20px;
            text-align: center;
            box-sizing: border-box;
        }
        .role-picker.visible { display: block; }
        .role-picker h2 { margin: 0 0 8px; font-size: 22px; }
        .role-picker p { color: var(--hint-color); margin: 0 0 24px; }
        .role-btn {
            display: block;
            width: 100%;
            max-width: 320px;
            margin: 0 auto 12px;
            border: none;
            border-radius: 14px;
            padding: 16px;
            font-size: 16px;
            font-weight: 700;
            cursor: pointer;
        }
        .role-btn-client { background: var(--bg-color); color: var(--text-color); border: 1px solid var(--line-color); }
        .role-btn-admin { background: var(--btn-color); color: var(--btn-text-color); }
        .admin-order {
            background: var(--bg-color);
            border-radius: 12px;
            padding: 0;
            margin-bottom: 8px;
            font-size: 13px;
            line-height: 1.35;
            overflow: hidden;
            border: 1px solid var(--line-color);
        }
        .admin-order-head {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            padding: 10px 12px;
            cursor: pointer;
            user-select: none;
        }
        .admin-order-head-main { flex: 1; min-width: 0; }
        .tg-profile-link {
            position: relative;
            z-index: 3;
            color: inherit;
            text-decoration: none;
            border-bottom: 1px dashed rgba(227,176,74,.45);
            cursor: pointer;
            pointer-events: auto;
        }
        .tg-profile-link:hover { color: var(--btn-color); }
        .tg-tag { font-weight: 600; }
        .admin-order-title {
            font-weight: 700;
            font-size: 14px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .admin-order-meta { color: var(--hint-color); font-size: 12px; margin-top: 2px; }
        .admin-order-sum { font-weight: 700; white-space: nowrap; padding-top: 2px; }
        .order-repeat-btn {
            flex-shrink: 0;
            border: none;
            border-radius: 8px;
            padding: 6px 8px;
            background: var(--btn-color);
            color: var(--btn-text-color);
            font-weight: 700;
            font-size: 11px;
            cursor: pointer;
            white-space: nowrap;
            line-height: 1.2;
        }
        .wallet-pending {
            background: var(--secondary-bg);
            border-radius: 10px;
            padding: 10px 12px;
            margin-bottom: 8px;
            font-size: 13px;
        }
        #topupAmount { margin-bottom: 12px; }
        .admin-order-chevron {
            color: var(--hint-color);
            transition: transform .2s ease;
            padding-top: 2px;
        }
        .admin-order.open .admin-order-chevron { transform: rotate(180deg); }
        .admin-order-body {
            max-height: 0;
            overflow: hidden;
            transition: max-height .28s ease;
            padding: 0 12px;
        }
        .admin-order.open .admin-order-body {
            max-height: 2000px;
            padding-bottom: 12px;
        }
        .admin-order-items { white-space: pre-wrap; margin: 6px 0; }
        .admin-actions { display: flex; gap: 8px; margin-bottom: 12px; }
        .admin-actions button { flex: 1; }

        .catalog-toolbar {
            display: flex;
            gap: 8px;
            align-items: stretch;
            margin-bottom: 8px;
        }
        .catalog-toolbar .search-input {
            flex: 1;
            min-width: 0;
            width: auto;
            padding: 10px 12px;
            font-size: 15px;
        }
        .shop-tabs {
            display: flex;
            gap: 8px;
            margin-bottom: 10px;
            align-items: stretch;
        }
        .shop-tab {
            flex: 1;
            border: none;
            border-radius: 12px;
            padding: 10px 8px;
            font-size: 14px;
            font-weight: 700;
            background: var(--bg-color);
            color: var(--text-color);
            cursor: pointer;
            border: 1px solid var(--line-color);
        }
        .shop-tab.active {
            background: var(--btn-color);
            color: var(--btn-text-color);
            border-color: var(--btn-color);
        }
        .admin-kind-tabs { margin: 12px 0 0; }
        .admin-kind-tabs .shop-tab { font-size: 13px; }
        .toolbar-icon,
        .wallet-chip {
            flex: 0 0 auto;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            border: none;
            border-radius: 12px;
            background: var(--bg-color);
            color: var(--text-color);
            font-weight: 700;
            font-size: 13px;
            cursor: pointer;
            white-space: nowrap;
            box-shadow: none;
            border: 1px solid var(--line-color);
        }
        .toolbar-icon {
            width: 44px;
            min-width: 44px;
            font-size: 18px;
            padding: 0;
        }
        .wallet-chip { padding: 8px 10px; }
        .wallet-chip .wallet-sum { color: var(--btn-color); }
        .wallet-chip.neg .wallet-sum { color: #ff8b7a; }
        .stock-badge {
            font-size: 12px;
            color: var(--hint-color);
            font-weight: 600;
            margin-top: 2px;
        }
        .stock-badge.zero { color: #ff8b7a; }

        .ux-topbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 12px;
        }
        .ux-brand { font-weight: 700; font-size: 18px; }
        .ux-brand-sub { display: block; font-size: 12px; font-weight: 500; color: var(--hint-color); margin-top: 2px; }
        .ux-burger {
            width: 44px; height: 44px; border-radius: 12px;
            border: 1px solid var(--line-color);
            background: var(--bg-color);
            color: var(--text-color);
            display: inline-flex; flex-direction: column;
            justify-content: center; align-items: center; gap: 5px;
            cursor: pointer; padding: 0;
        }
        .ux-burger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; }
        .ux-drawer-backdrop {
            position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 90;
            display: none;
        }
        .ux-drawer-backdrop.open { display: block; }
        .ux-drawer {
            position: fixed; top: 0; right: 0; width: min(320px, 88vw); height: 100%;
            background: var(--bg-color); color: var(--text-color);
            z-index: 100; transform: translateX(105%); transition: transform .22s ease;
            padding: 18px 14px 24px; box-sizing: border-box;
            display: flex; flex-direction: column; gap: 8px;
            box-shadow: -8px 0 24px rgba(0,0,0,.12);
        }
        .ux-drawer.open { transform: translateX(0); }
        .client-drawer-backdrop { z-index: 105; }
        .client-drawer { z-index: 110; }
        .catalog-toolbar .ux-burger { flex: 0 0 auto; align-self: stretch; height: auto; min-height: 44px; }
        .ux-drawer-title {
            font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
            color: var(--hint-color); margin: 4px 4px 10px;
        }
        .ux-menu-item {
            display: block; width: 100%; text-align: left; border: none;
            background: var(--secondary-bg); color: var(--text-color);
            border-radius: 12px; padding: 14px; font-size: 15px; font-weight: 600; cursor: pointer;
        }
        .ux-menu-item.active { background: var(--btn-color); color: var(--btn-text-color); }
        .referral-code-box {
            display: flex; align-items: center; justify-content: space-between; gap: 8px;
            background: var(--secondary-bg); border-radius: 12px; padding: 12px 14px; margin: 8px 0 12px;
            border: 1px solid var(--line-color);
        }
        .referral-code {
            font-size: 22px; font-weight: 800; letter-spacing: .04em; word-break: break-all;
        }
        .referral-input { margin-top: 8px; }

        .status-chip {
            display: inline-block; font-size: 11px; font-weight: 800;
            padding: 4px 9px; border-radius: 999px; background: var(--secondary-bg);
            color: var(--text-color); white-space: nowrap; flex-shrink: 0;
        }
        .status-chip.st-new { background: #e3b04a; color: #16120a; }
        .status-chip.st-confirmed { background: #3d7ea6; color: #f4f8fb; }
        .status-chip.st-done { background: #2f6a45; color: #d8f0e0; }
        .status-chip.st-cancelled { background: #6b3a38; color: #ffc4be; }
        .status-chip.st-open { background: #e3b04a; color: #16120a; }
        .status-chip.st-in_progress { background: #3d7ea6; color: #f4f8fb; }
        .status-chip.st-rejected { background: #6b3a38; color: #ffc4be; }
        .status-chip.st-fixed { background: #2f6a45; color: #d8f0e0; }
        .fb-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
        .fb-logs {
            margin-top: 8px; font-size: 11px; white-space: pre-wrap; word-break: break-word;
            max-height: 160px; overflow: auto; background: var(--secondary-bg); padding: 8px; border-radius: 8px;
            color: var(--hint-color);
        }
        .fb-file-wrap { margin-bottom: 12px; }
        .fb-file-btn {
            display: block; width: 100%; box-sizing: border-box; text-align: center;
            border: 1px dashed var(--line-color); background: var(--secondary-bg);
            color: var(--text-color); border-radius: 10px; padding: 10px 12px;
            font-size: 13px; font-weight: 600; cursor: pointer;
        }
        .fb-file-btn input { display: none; }
        .fb-file-hint { font-size: 12px; color: var(--hint-color); margin-top: 6px; }
        .fb-atts { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
        .fb-att-img {
            width: 96px; height: 96px; object-fit: cover; border-radius: 10px;
            border: 1px solid var(--line-color); display: block;
        }
        .order-status-filters {
            display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px;
        }
        .status-filter {
            border: 1px solid var(--line-color); background: var(--bg-color);
            color: var(--text-color); border-radius: 999px; padding: 7px 10px;
            font-weight: 700; font-size: 12px; cursor: pointer;
        }
        .status-filter.on { background: var(--btn-color); color: var(--btn-text-color); border-color: var(--btn-color); }
        .order-group-title {
            display: flex; align-items: center; gap: 8px;
            font-size: 13px; font-weight: 800; margin: 14px 0 8px;
            color: var(--text-color);
        }
        .admin-order.st-new { border-left: 3px solid #e3b04a; }
        .admin-order.st-confirmed { border-left: 3px solid #3d7ea6; }
        .admin-order.st-done { border-left: 3px solid #2f6a45; }
        .admin-order.st-cancelled { border-left: 3px solid #6b3a38; }
        .admin-order-title-row {
            display: flex; align-items: center; gap: 8px; min-width: 0;
        }
        .admin-order-title-row .admin-order-title { flex: 1; min-width: 0; }
        .order-reply { width: 100%; min-height: 64px; margin-top: 8px; }
        .stock-row {
            background: var(--bg-color); border-radius: 12px; padding: 12px; margin-bottom: 8px;
            border: 1px solid var(--line-color);
        }
        .stock-row-name { font-weight: 700; font-size: 14px; }
        .stock-row-meta { color: var(--hint-color); font-size: 12px; margin: 4px 0 8px; }
        .stock-row-actions { display: flex; gap: 6px; align-items: center; margin-top: 6px; }
        .stock-row-actions input {
            width: 72px; padding: 8px; border-radius: 8px; border: none;
            background: var(--secondary-bg); color: var(--text-color); font-size: 14px;
        }
        .stock-row-actions button {
            flex: 1; border: none; border-radius: 8px; padding: 8px;
            background: var(--btn-color); color: var(--btn-text-color);
            font-weight: 600; font-size: 12px; cursor: pointer;
        }
        .buy-row {
            display: flex; align-items: center; gap: 10px;
            background: var(--bg-color); border-radius: 12px; padding: 12px; margin-bottom: 8px;
            border: 1px solid var(--line-color);
        }
        .buy-row.on { border-color: var(--btn-color); }
        .buy-row-main { flex: 1; min-width: 0; }
        .buy-qty { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
        .buy-qty button {
            width: 36px; height: 36px; border: none; border-radius: 8px;
            background: var(--btn-color); color: var(--btn-text-color);
            font-weight: 800; font-size: 18px; cursor: pointer; line-height: 1;
        }
        .buy-qty b { min-width: 28px; text-align: center; font-size: 16px; }
        #buyPreview {
            min-height: 160px; height: auto; white-space: pre; line-height: 1.45;
            font-family: inherit; resize: vertical;
        }
        .buy-sum-box {
            margin-top: 10px; padding: 12px 14px; border-radius: 12px;
            background: var(--secondary-bg); border: 1px solid var(--line-color);
        }
        .buy-sum-label { font-size: 12px; font-weight: 700; color: var(--hint-color); }
        .buy-sum-value { font-size: 26px; font-weight: 800; margin-top: 2px; }
        .buy-row-price {
            font-weight: 800; font-size: 15px; white-space: nowrap;
            text-align: right; min-width: 72px; flex-shrink: 0;
        }
        .buy-line-sum { font-size: 12px; color: var(--hint-color); margin-top: 2px; }
        .mini-btn {
            border: none; border-radius: 8px; padding: 7px 10px; margin: 4px 4px 0 0;
            background: var(--secondary-bg); color: var(--text-color);
            font-weight: 600; font-size: 12px; cursor: pointer;
        }
        .mini-btn.on { background: var(--btn-color); color: var(--btn-text-color); }
        .stat-rank-row {
            display: flex; align-items: flex-start; gap: 8px;
            padding: 8px 0; border-bottom: 1px solid var(--line-color);
        }
        .stat-rank-row:last-child { border-bottom: none; }
        .stat-rank-n {
            width: 22px; height: 22px; border-radius: 8px; flex-shrink: 0;
            background: var(--secondary-bg); color: var(--hint-color);
            font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center;
            margin-top: 2px;
        }
        .stat-rank-main { flex: 1; min-width: 0; }
        .stat-rank-name { font-size: 14px; font-weight: 700; }
        .stat-day-bar {
            display: flex; align-items: flex-end; gap: 3px; height: 56px; margin-top: 8px;
        }
        .stat-day-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
        .stat-day-fill { width: 100%; max-width: 14px; background: var(--btn-color); border-radius: 4px 4px 0 0; min-height: 2px; }
        .stat-day-lab { font-size: 9px; color: var(--hint-color); margin-top: 2px; }
        .order-notify-lab {
            display: flex; align-items: center; gap: 8px;
            font-size: 13px; font-weight: 600; margin: 8px 0 4px;
            color: var(--text-color); cursor: pointer; user-select: none;
        }
        .order-notify-lab input { width: 18px; height: 18px; accent-color: var(--btn-color); flex-shrink: 0; }
        .wallet-move {
            display: flex;
            justify-content: space-between;
            gap: 10px;
            padding: 10px 0;
            border-bottom: 1px solid var(--line-color);
            font-size: 13px;
        }
        .wallet-move:last-child { border-bottom: none; }
        .wallet-move-plus { color: #5dcc8a; font-weight: 700; }
        .wallet-move-minus { color: #ff8b7a; font-weight: 700; }
        .client-card { background: var(--bg-color); border-radius: 12px; margin-bottom: 8px; overflow: hidden; border: 1px solid var(--line-color); }
        .client-card-head {
            display: flex; align-items: center; gap: 8px;
            padding: 10px 12px; cursor: pointer;
        }
        .client-card-head-main { flex: 1; min-width: 0; }
        .client-card-body {
            max-height: 0; overflow: hidden; transition: max-height .28s ease;
            padding: 0 12px;
        }
        .client-card.open .client-card-body { max-height: 2800px; padding-bottom: 12px; }
        .client-card.open .admin-order-chevron { transform: rotate(180deg); }
        .field-row { display: flex; gap: 6px; margin-top: 8px; align-items: center; flex-wrap: wrap; }
        .field-row input, .field-row select, .field-row textarea {
            flex: 1; min-width: 0;
            padding: 8px; border-radius: 8px; border: none;
            background: var(--secondary-bg); color: var(--text-color); font-size: 14px;
        }
        .purchase-row { font-size: 13px; padding: 8px 0; border-bottom: 1px solid var(--line-color); }
        .m3-hud {
            display: flex;
            gap: 8px;
            margin: 10px 0 4px;
        }
        .m3-hud > div {
            flex: 1;
            background: var(--secondary-bg);
            border-radius: 10px;
            padding: 8px 6px;
            text-align: center;
        }
        .m3-hud-label { display: block; font-size: 11px; color: var(--hint-color); margin-bottom: 2px; }
        .m3-board {
            display: grid;
            gap: 4px;
            max-width: 360px;
            margin: 12px auto;
            position: relative;
            z-index: 2;
            touch-action: none;
            user-select: none;
            -webkit-user-select: none;
            overscroll-behavior: contain;
        }
        .m3-cell {
            aspect-ratio: 1;
            border: 1px solid var(--line-color);
            background: var(--bg-color);
            border-radius: 10px;
            font-size: 26px;
            line-height: 1;
            cursor: grab;
            padding: 0;
            color: inherit;
            display: flex;
            align-items: center;
            justify-content: center;
            touch-action: none;
            user-select: none;
            -webkit-user-select: none;
            -webkit-touch-callout: none;
            transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
        }
        .m3-cell.sel { border-color: var(--btn-color); box-shadow: 0 0 0 2px rgba(227,176,74,.35); cursor: grabbing; }
        .m3-cell.pop { animation: m3Pop .22s ease-in forwards; }
        .m3-cell.spawn { animation: m3Spawn .18s cubic-bezier(.2, 1.25, .3, 1); }
        .m3-hud > div.m3-hurry b { color: #ff8b7a; }
        .m3-board.m3-sz7 .m3-cell { font-size: 22px; }
        .m3-board-wrap {
            position: relative;
            max-width: 360px;
            margin: 12px auto;
        }
        .m3-board-wrap .m3-board { margin: 0; max-width: none; }
        .m3-result {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(12, 14, 20, .72);
            z-index: 6;
            border-radius: 12px;
            padding: 12px;
            box-sizing: border-box;
        }
        .m3-result[hidden] { display: none !important; }
        .m3-result-card {
            background: var(--bg-color);
            border: 1px solid var(--line-color);
            border-radius: 14px;
            padding: 16px 14px 14px;
            text-align: center;
            width: min(260px, 100%);
            box-shadow: 0 10px 28px rgba(0,0,0,.35);
            position: relative;
        }
        .m3-pause-restart {
            position: absolute;
            top: 8px;
            right: 8px;
            width: 32px;
            height: 32px;
            border: 1px solid var(--line-color);
            border-radius: 8px;
            background: var(--secondary-bg);
            color: var(--hint-color);
            font-size: 15px;
            line-height: 1;
            cursor: pointer;
            padding: 0;
        }
        .m3-result-kicker {
            font-size: 12px;
            color: var(--hint-color);
            letter-spacing: .04em;
            text-transform: uppercase;
            margin-bottom: 4px;
        }
        .m3-result-title {
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 10px;
            color: var(--btn-color);
        }
        .m3-result-row {
            font-size: 14px;
            margin: 4px 0;
            color: var(--text-color);
        }
        .m3-result-row b { color: var(--btn-color); }
        .m3-result-card .btn-main-action { margin-top: 12px; }
        .m3-result-card .mini-btn { width: 100%; margin-top: 8px; }
        .m3-lobby-card { width: min(300px, 100%); max-height: min(460px, 72vh); overflow-y: auto; }
        .m3-howto {
            margin-top: 12px;
            text-align: left;
            font-size: 12px;
            color: var(--hint-color);
            line-height: 1.45;
        }
        .m3-howto summary {
            cursor: pointer;
            color: var(--btn-color);
            font-weight: 600;
            text-align: center;
            list-style: none;
        }
        .m3-howto summary::-webkit-details-marker { display: none; }
        .m3-howto p { margin: 8px 0 0; }
        .m3-howto-warn { color: #ffb07a; margin-top: 8px; font-size: 12px; line-height: 1.4; }
        .m3-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            margin-bottom: 12px;
        }
        .m3-head .section-title { margin-bottom: 0; flex: 1; text-align: center; }
        .m3-head .btn-back-cat { flex-shrink: 0; }
        .game-pick { display: grid; gap: 8px; margin-top: 10px; }
        .game-pick .mini-btn { width: 100%; }
        .g48-board {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 8px;
            background: #161a24;
            padding: 8px;
            border-radius: 12px;
            max-width: 360px;
            margin: 0 auto;
            touch-action: none;
            user-select: none;
            overscroll-behavior: none;
        }
        #screen-g2048, #screen-gpac {
            overscroll-behavior: none;
        }
        .game-pad {
            display: grid;
            grid-template-columns: 56px 56px 56px;
            grid-template-rows: 44px 44px;
            gap: 6px;
            justify-content: center;
            margin: 10px auto 4px;
            width: max-content;
        }
        .game-pad button {
            background: var(--secondary-bg);
            color: var(--text-color);
            border: 1px solid var(--line-color);
            border-radius: 10px;
            font-size: 18px;
            cursor: pointer;
            padding: 0;
        }
        .game-pad .pad-up { grid-column: 2; }
        .game-pad .pad-left { grid-column: 1; grid-row: 2; }
        .game-pad .pad-down { grid-column: 2; grid-row: 2; }
        .game-pad .pad-right { grid-column: 3; grid-row: 2; }
        .g48-cell {
            aspect-ratio: 1;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: 22px;
            background: #1c212c;
            color: var(--text-color);
            transition: background-color .18s ease, color .18s ease, transform .18s ease;
        }
        .g48-cell.spawn { animation: g48Spawn .22s cubic-bezier(.2, 1.3, .3, 1); }
        .g48-cell.merge { animation: g48Merge .22s ease-out; }
        .g48-n2 { background: #2a3344; color: #d8d4cc; }
        .g48-n4 { background: #3a3f52; color: #eee; }
        .g48-n8 { background: #6b4a1e; color: #e3b04a; }
        .g48-n16 { background: #8a5a18; color: #ffe0a0; }
        .g48-n32 { background: #a45c12; color: #fff3d6; }
        .g48-n64 { background: #c45e10; color: #fff; }
        .g48-n128 { background: #c98412; color: #1a1208; font-size: 18px; }
        .g48-n256 { background: #e3b04a; color: #1a1208; font-size: 18px; }
        .g48-n512 { background: #f0c86a; color: #1a1208; font-size: 18px; }
        .g48-n1024 { background: #ff8b7a; color: #1a1208; font-size: 16px; }
        .g48-n2048 { background: #ffd36a; color: #1a1208; font-size: 16px; }
        .g48-n4096, .g48-n8192 { background: #ff5a6a; color: #fff; font-size: 15px; }
        .pac-board {
            display: grid;
            gap: 1px;
            max-width: 360px;
            margin: 0 auto;
            background: #12151c;
            padding: 4px;
            border-radius: 10px;
            touch-action: none;
            user-select: none;
        }
        .pac-cell {
            aspect-ratio: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            line-height: 1;
        }
        .pac-wall { background: #2a3a62; border-radius: 3px; }
        .pac-pellet { color: #e8e0c8; font-size: 8px; }
        .pac-power { color: #e3b04a; font-size: 12px; }
        .pac-player { font-size: 13px; animation: pacStep .28s ease-out; }
        .pac-ghost { font-size: 13px; animation: pacStep .28s ease-out; }
        .m3-pause-btn {
            flex-shrink: 0;
            background: var(--secondary-bg);
            color: var(--text-color);
            border: 1px solid var(--line-color);
            border-radius: 10px;
            padding: 6px 12px;
            font-size: 16px;
            line-height: 1;
            cursor: pointer;
        }
        @keyframes m3PanicPulse {
            0%, 100% { background-color: #12151c; }
            50% { background-color: #4a1018; }
        }
        @keyframes m3PanicPulseCard {
            0%, 100% { background-color: #1c212c; }
            50% { background-color: #3a0e14; }
        }
        @keyframes m3Pop {
            0% { transform: scale(1); opacity: 1; }
            35% { transform: scale(1.12); opacity: 1; }
            100% { transform: scale(0.45); opacity: .2; }
        }
        @keyframes m3Spawn {
            from { transform: scale(0.55); opacity: .35; }
            to { transform: scale(1); opacity: 1; }
        }
        @keyframes g48Spawn {
            from { transform: scale(0.4); opacity: .45; }
            to { transform: scale(1); opacity: 1; }
        }
        @keyframes g48Merge {
            0% { transform: scale(1); }
            40% { transform: scale(1.14); }
            100% { transform: scale(1); }
        }
        @keyframes pacStep {
            from { transform: scale(0.82); }
            to { transform: scale(1); }
        }
        body.m3-panic,
        #screen-admin.m3-panic,
        #screen-game.m3-panic {
            animation: m3PanicPulse 1.6s ease-in-out infinite;
        }
        #screen-game.m3-panic .section-card {
            animation: m3PanicPulseCard 1.6s ease-in-out infinite;
        }