.manager-center { background: radial-gradient( circle at 15% 0, rgba(222, 206, 255, 0.58), rgba(251, 248, 255, 0) 28% ), radial-gradient( circle at 92% 18%, rgba(229, 238, 255, 0.62), rgba(251, 248, 255, 0) 31% ), var(--page-bg); } .manager-center .hero-bg { display: none; } .manager-center .home-indicator { display: none; } .manager-center .title-bar { grid-template-columns: 52px minmax(0, 1fr) 52px; height: 72px; padding: 13px 18px 0; } .manager-center .title-bar h1 { color: #11162e; font-size: 22px; font-weight: 820; line-height: 1.1; } .manager-center .back-button, .manager-center .language-button { width: 44px; height: 44px; } .manager-center .language-button { border: 0; border-radius: 50%; background: transparent; box-shadow: none; color: #11162e; } .manager-center .language-button svg { width: 32px; height: 32px; } .manager-center .back-button path, .manager-center .language-button path, .manager-center .manager-copy-button path { fill: currentColor; stroke: none; } .manager-center .content { gap: 12px; padding: 10px 16px 30px; } .manager-center .card { border: 1px solid rgba(125, 87, 199, 0.12); border-radius: 16px; background: linear-gradient( 145deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.89) ), var(--card-bg); box-shadow: 0 18px 42px rgba(88, 66, 142, 0.075), inset 0 1px 0 rgba(255, 255, 255, 0.96); } .manager-profile-card { display: grid; grid-template-columns: 82px minmax(0, 1fr) auto; gap: 11px; align-items: center; min-height: 112px; padding: 13px 12px; } .manager-avatar-shell { position: relative; width: 76px; height: 76px; border: 3px solid transparent; border-radius: 50%; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(145deg, #f4eaff, #b894ff) border-box; box-shadow: 0 8px 22px rgba(125, 87, 199, 0.2); } .manager-avatar-image, .manager-avatar-fallback { width: 100%; height: 100%; border-radius: 50%; } .manager-avatar-image { display: block; object-fit: cover; } .manager-avatar-fallback { display: flex; align-items: center; justify-content: center; background: linear-gradient(145deg, #f7f0ff, #e3d5ff); color: var(--primary-deep); font-size: 32px; font-weight: 950; } .manager-profile-copy { display: grid; min-width: 0; gap: 7px; } .manager-profile-copy strong { overflow: hidden; color: #151936; font-size: 24px; font-weight: 820; line-height: 1; text-overflow: ellipsis; white-space: nowrap; } .manager-role-badge { display: inline-flex; width: max-content; max-width: 100%; height: 24px; align-items: center; gap: 6px; padding: 0 10px; border-radius: 7px; background: linear-gradient(135deg, #a678ff, #8b5ce8); color: #fff; font-size: 14px; font-weight: 780; line-height: 24px; box-shadow: 0 8px 18px rgba(139, 92, 232, 0.22); } .manager-role-badge svg { width: 14px; height: 14px; } .manager-role-badge path { fill: currentColor; } .manager-id-line { display: flex; min-width: 0; align-items: center; gap: 5px; color: #837ba3; font-size: 14px; font-weight: 650; line-height: 1.1; } .manager-id-line > span:nth-child(2) { overflow: hidden; flex: 0 0 auto; text-overflow: ellipsis; white-space: nowrap; } .manager-copy-button { display: flex; flex: 0 0 22px; width: 22px; height: 22px; align-items: center; justify-content: center; color: #837ba3; } .manager-copy-button svg { width: 18px; height: 18px; } .manager-kpi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .manager-kpi-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); min-height: 128px; overflow: hidden; padding: 18px 13px 16px; } .manager-kpi-icon { position: absolute; top: 18px; left: 13px; z-index: 1; display: flex; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: 50%; pointer-events: none; } .manager-kpi-icon svg { width: 30px; height: 30px; } .manager-kpi-icon path, .manager-kpi-icon circle, .manager-asset-icon path, .manager-asset-icon circle { fill: currentColor; stroke: none; } .manager-kpi-icon .icon-cutout, .manager-asset-icon .icon-cutout { fill: #fff; stroke: none; } .manager-kpi-icon .icon-dot { fill: currentColor; stroke: none; } .manager-asset-icon.wallet .icon-cutout, .manager-asset-icon.wallet .icon-dot { fill: #ff6c08; } .manager-asset-icon.bank .icon-cutout { fill: #2f61ff; } .manager-kpi-copy { position: relative; z-index: 2; display: grid; align-content: center; min-width: 0; gap: 6px; padding-left: 58px; } .manager-kpi-copy span, .manager-kpi-copy em { color: #827f99; font-size: 14px; font-style: normal; font-weight: 540; line-height: 1.12; } .manager-kpi-copy strong { color: #ff660a; font-size: 25px; font-weight: 840; line-height: 1; letter-spacing: 0; white-space: nowrap; } .kpi-hosts .manager-kpi-copy strong { color: #171b35; } .kpi-growth .manager-kpi-copy strong { color: #ff424d; } .kpi-wallet .manager-kpi-icon { background: #f2e9ff; color: #854fe8; } .kpi-report .manager-kpi-icon { background: #eef4ff; color: #3478f6; } .kpi-hosts .manager-kpi-icon { background: #e8fbf8; color: #10bda6; } .kpi-growth .manager-kpi-icon { background: #fff0f4; color: #ff3d52; } .manager-bars { position: absolute; right: 13px; bottom: 16px; width: 39px; height: 34px; opacity: 0.38; background: linear-gradient(currentColor, currentColor) 0 21px / 7px 13px no-repeat, linear-gradient(currentColor, currentColor) 11px 14px / 7px 20px no-repeat, linear-gradient(currentColor, currentColor) 22px 7px / 7px 27px no-repeat, linear-gradient(currentColor, currentColor) 33px 0 / 7px 34px no-repeat; } .kpi-wallet .manager-bars { color: #eadcff; } .kpi-report .manager-bars { color: #d9e9ff; } .kpi-hosts .manager-bars { color: #d9fbf5; } .kpi-growth .manager-bars { color: #ffe0e7; } .manager-assets-card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 88px; margin-top: 12px; overflow: hidden; padding: 0; } .manager-asset-item { display: grid; grid-template-columns: 48px minmax(0, 1fr) 14px; gap: 10px; align-items: center; min-width: 0; min-height: 88px; padding: 16px 13px; text-align: left; } .manager-asset-item + .manager-asset-item { border-left: 1px solid rgba(125, 87, 199, 0.1); } .manager-asset-icon, .manager-action-icon { display: flex; align-items: center; justify-content: center; border-radius: 50%; } .manager-asset-icon { width: 48px; height: 48px; color: #fff; } .manager-asset-icon.wallet { background: linear-gradient(145deg, #ff8a16, #ff5a00); } .manager-asset-icon.bank { background: linear-gradient(145deg, #4d73ff, #215dff); } .manager-asset-icon svg { width: 29px; height: 29px; } .manager-asset-item strong, .manager-action-item > span:last-child { overflow-wrap: anywhere; color: #1d2140; font-size: 14px; font-weight: 560; line-height: 1.15; } .manager-asset-item strong { white-space: nowrap; } .manager-action-item > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .manager-asset-item em { display: block; margin-top: 7px; color: #ff660a; font-size: 14px; font-style: normal; font-weight: 700; line-height: 1; } .manager-asset-item:nth-child(2) em { color: #858296; font-weight: 540; } .manager-asset-item i { color: #a8a4b7; font-size: 30px; font-style: normal; font-weight: 300; line-height: 1; } .manager-actions-card { overflow: hidden; margin-top: 8px; padding: 0; } .manager-action-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .manager-action-item { display: grid; min-height: 114px; align-content: center; justify-items: center; gap: 8px; padding: 11px 7px; text-align: center; } .manager-action-item:nth-child(n + 4) { border-top: 1px solid rgba(125, 87, 199, 0.055); } .manager-action-item:not(:nth-child(3n + 1)) { border-left: 1px solid rgba(125, 87, 199, 0.055); } .manager-action-icon { width: 56px; height: 56px; } .manager-action-icon svg { width: 33px; height: 33px; } .manager-action-icon path, .manager-action-icon circle { fill: currentColor; stroke: none; } .manager-action-icon .icon-cutout { fill: #fff; stroke: none; } .action-admin .manager-action-icon, .action-send-frame .manager-action-icon { background: #f0e6ff; color: #844dec; } .action-block-users .manager-action-icon { background: #fff1f4; color: #d95d72; } .action-bd .manager-action-icon, .action-send-car .manager-action-icon { background: #eef4ff; color: #2f6df1; } .action-invite-admin .manager-action-icon, .action-send-vip .manager-action-icon { background: #ffe9ef; color: #ff304a; } .action-invite-bd .manager-action-icon, .action-update-level .manager-action-icon { background: #e5fbf7; color: #08bca6; } .action-super .manager-action-icon, .action-send-badge .manager-action-icon { background: #fff4db; color: #ff9700; } .manager-center.is-loading .manager-profile-card, .manager-center.is-loading .manager-kpi-card, .manager-center.is-loading .manager-assets-card, .manager-center.is-loading .manager-actions-card { opacity: 0.72; } .manager-center.is-denied .manager-action-grid { opacity: 0.46; pointer-events: none; } .manager-panel { position: relative; display: grid; gap: 14px; padding: 16px; border: 1px solid rgba(125, 87, 199, 0.06); } .manager-center.is-loading .manager-grid { min-height: 410px; opacity: 0; pointer-events: none; } .manager-center.is-loading .manager-panel::after { position: absolute; inset: 16px; content: ''; border-radius: 10px; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.72), transparent ) 0 0 / 180px 100% no-repeat, linear-gradient(#f1e7ff, #f1e7ff) 0 0 / 100% 132px no-repeat, linear-gradient(#f1e7ff, #f1e7ff) 0 144px / 100% 132px no-repeat, linear-gradient(#f1e7ff, #f1e7ff) 0 288px / 100% 104px no-repeat; animation: managerSkeleton 1.1s linear infinite; } .manager-center.is-denied .manager-grid { opacity: 0.46; pointer-events: none; } @keyframes managerSkeleton { 0% { background-position: -180px 0, 0 0, 0 144px, 0 288px; } 100% { background-position: calc(100% + 180px) 0, 0 0, 0 144px, 0 288px; } } .manager-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .manager-tile { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 132px; overflow: hidden; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcfc; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 6px 16px rgba(99, 69, 159, 0.05); text-align: left; } .manager-tile:active { transform: translateY(1px); } .manager-tile:focus-visible { outline: 2px solid rgba(125, 87, 199, 0.28); outline-offset: 2px; } .manager-tile-wide { grid-column: 1 / -1; grid-template-columns: 92px minmax(0, 1fr); flex-direction: row; min-height: 104px; align-items: center; justify-content: flex-start; gap: 16px; } .tile-title { position: relative; z-index: 1; order: -1; align-self: start; min-width: 0; overflow-wrap: anywhere; color: var(--text); font-size: 17px; font-weight: 950; letter-spacing: 0; line-height: 1.16; } .manager-tile-wide .tile-title { order: 0; align-self: center; font-size: 19px; } .tile-icon { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; justify-self: center; width: 72px; height: 72px; margin: 14px auto 0; border-radius: 8px; } .manager-tile-wide .tile-icon { flex: 0 0 72px; justify-self: start; margin: 0; } .tile-icon svg { width: 58px; height: 58px; } .tile-icon path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.8; } .level-icon { color: #7d57c7; background: #f4ebff; } .frame-icon { color: #7d57c7; background: #f4ebff; } .car-icon { color: #4e78d7; background: #eef4ff; } .badge-icon { color: #3c8a6b; background: #eaf8f1; } .vip-icon { color: #d5a032; background: #fff7dc; } .block-icon { color: #d95d72; background: #fff1f4; } .bd-leader-icon { color: #3c8a6b; background: #eaf8f1; } .admin-icon { color: #4e78d7; background: #eef4ff; } .superadmin-icon { color: #bd6c2f; background: #fff2e6; } .country-icon { color: #4e78d7; background: #eef4ff; } .block-modal[hidden] { display: none; } .block-modal { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-end; justify-content: center; padding: 18px; } .block-backdrop { position: absolute; inset: 0; border: 0; background: rgba(24, 21, 33, 0.48); } .block-dialog { position: relative; z-index: 1; display: flex; width: min(100%, 430px); max-height: min(86dvh, 720px); flex-direction: column; overflow: hidden; border-radius: 18px; background: #fff; box-shadow: 0 -8px 34px rgba(43, 34, 65, 0.18); } .block-dialog-header { display: flex; min-height: 64px; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--line); } .block-dialog-header h2 { margin: 0; color: var(--text); font-size: 20px; font-weight: 950; letter-spacing: 0; line-height: 1.1; } .block-close { display: flex; width: 40px; height: 40px; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: var(--primary-soft); color: var(--primary-deep); } .block-close svg { width: 22px; height: 22px; } .block-close path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 3; } .block-dialog-body { min-height: 0; overflow-y: auto; padding: 16px 18px 20px; } .block-field { display: grid; gap: 8px; } .block-field label, .block-section-title { color: var(--text); font-size: 14px; font-weight: 900; line-height: 1.2; } .block-search-row { display: grid; grid-template-columns: minmax(0, 1fr) 100px; gap: 10px; } .block-search-row input { min-width: 0; height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: 8px; background: rgba(252, 249, 255, 0.86); color: var(--text); font-size: 15px; font-weight: 800; outline: none; } .block-search-row input:focus { border-color: rgba(125, 87, 199, 0.42); box-shadow: 0 0 0 3px rgba(125, 87, 199, 0.12); } .block-search-row input::placeholder { color: rgba(42, 38, 57, 0.38); } .block-search-row button, .confirm-block-button, .confirm-level-button, .user-level-button, .user-unblock-button, .user-block-button { border: 0; border-radius: 8px; background: var(--button); color: #fff; font-size: 14px; font-weight: 950; } .block-search-row button { height: 48px; } .block-search-result { min-height: 28px; margin-top: 12px; } .searched-user, .blocked-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 8px; background: rgba(255, 255, 255, 0.94); } .searched-user { padding: 10px; } .searched-avatar, .blocked-avatar { overflow: hidden; display: flex; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: 50%; background: var(--primary); color: var(--primary-deep); font-size: 18px; font-weight: 950; } .searched-avatar img, .blocked-avatar img { width: 100%; height: 100%; object-fit: cover; } .searched-name, .blocked-name { overflow: hidden; color: var(--text); font-size: 15px; font-weight: 950; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; } .searched-meta, .searched-vip, .blocked-meta, .blocked-time { margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 12px; font-weight: 800; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; } .searched-vip { color: #7d57c7; } .user-block-button { min-width: 70px; height: 40px; padding: 0 14px; background: #d95d72; } .user-unblock-button { min-width: 76px; height: 38px; padding: 0 12px; border: 1px solid rgba(125, 87, 199, 0.22); background: #fff; color: var(--primary-deep); font-size: 12px; } .block-duration-panel { display: grid; gap: 12px; margin-top: 14px; padding: 14px; border: 1px solid rgba(125, 87, 199, 0.12); border-radius: 10px; background: rgba(248, 242, 255, 0.68); } .block-duration-panel[hidden] { display: none; } .level-panel { display: grid; gap: 12px; margin-top: 14px; padding: 14px; border: 1px solid rgba(125, 87, 199, 0.12); border-radius: 10px; background: rgba(248, 242, 255, 0.68); } .level-panel[hidden] { display: none; } .duration-grid, .track-grid, .grant-option-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .level-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .duration-grid button, .level-grid button, .track-grid button, .grant-option-grid button { min-height: 38px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--muted); font-size: 12px; font-weight: 900; } .duration-grid button.is-selected, .level-grid button.is-selected, .track-grid button.is-selected, .grant-option-grid button.is-selected { border-color: var(--primary-deep); background: var(--primary-deep); color: #fff; } .duration-grid button:disabled, .level-grid button:disabled, .track-grid button:disabled, .grant-option-grid button:disabled { cursor: not-allowed; border-color: rgba(125, 87, 199, 0.12); background: #f3eef8; color: #b5a9c5; } .grant-option-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grant-option-grid.is-resource-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .vip-grant-note { grid-column: 1 / -1; color: #7d6e90; font-size: 12px; font-weight: 800; line-height: 1.3; } .resource-selected-note { grid-column: 1 / -1; color: #7d6e90; font-size: 12px; font-weight: 900; line-height: 1.3; } .grant-resource-option { position: relative; overflow: hidden; display: grid; min-height: 96px; place-items: center; padding: 10px; border-color: rgba(125, 87, 199, 0.14); background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), #fff), radial-gradient( circle at 50% 24%, rgba(125, 87, 199, 0.12), transparent 58% ); } .grant-resource-option::after { position: absolute; top: 7px; right: 7px; width: 18px; height: 18px; content: ''; border: 2px solid rgba(125, 87, 199, 0.2); border-radius: 999px; background: #fff; } .grant-resource-option.is-selected { border-color: var(--primary-deep); background: linear-gradient(180deg, rgba(248, 243, 255, 0.98), #fff), radial-gradient( circle at 50% 24%, rgba(125, 87, 199, 0.2), transparent 58% ); color: var(--text); box-shadow: inset 0 0 0 2px rgba(125, 87, 199, 0.22); } .grant-resource-option.is-selected::after { border-color: var(--primary-deep); background: var(--primary-deep); box-shadow: inset 0 0 0 4px #fff; } .grant-resource-media { display: flex; width: 68px; height: 68px; align-items: center; justify-content: center; } .grant-resource-media img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; } .grant-resource-fallback { width: 58px; height: 58px; border-radius: 50%; background: linear-gradient( 135deg, rgba(125, 87, 199, 0.28), rgba(78, 120, 215, 0.18) ), #f6f0ff; } .country-option { display: grid; min-height: 44px; align-content: center; line-height: 1.15; } .country-option span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .confirm-block-button, .confirm-level-button { height: 46px; } .confirm-block-button:disabled, .confirm-level-button:disabled { background: var(--button-disabled); color: rgba(42, 38, 57, 0.42); } .block-list-header { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); } .block-list-count { min-width: 28px; height: 24px; padding: 0 8px; border-radius: 999px; background: var(--primary-soft); color: var(--primary-deep); font-size: 12px; font-weight: 950; line-height: 24px; text-align: center; } .blocked-list { display: grid; max-height: 216px; margin-top: 10px; overflow-y: auto; gap: 10px; padding-right: 2px; } .blocked-row { min-height: 76px; padding: 10px; } .blocked-row-main { min-width: 0; } .blocked-time { color: #d95d72; } .blocked-empty { display: flex; min-height: 92px; align-items: center; justify-content: center; border: 1px dashed var(--line); border-radius: 8px; color: var(--muted); font-size: 13px; font-weight: 850; text-align: center; } @media (max-width: 360px) { .manager-panel { padding: 16px; } .manager-grid { gap: 10px; } .manager-tile { min-height: 126px; padding: 12px 10px 14px; } .tile-title { font-size: 16px; } .tile-icon { width: 68px; height: 68px; } .tile-icon svg { width: 52px; height: 52px; } .block-modal { padding: 12px; } .block-dialog-header { min-height: 58px; padding: 14px 16px; } .block-dialog-body { padding: 14px 16px 18px; } .block-search-row { grid-template-columns: minmax(0, 1fr) 88px; gap: 8px; } .duration-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .level-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }