:root { color: #3d1f10; background: #f8efe7; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-synthesis: none; text-rendering: optimizeLegibility; } * { box-sizing: border-box; } body { min-width: 320px; min-height: 100vh; margin: 0; background: #f8efe7; } button, input, select, textarea { font: inherit; } button { cursor: pointer; } button:disabled { cursor: not-allowed; opacity: 0.62; } #root { min-height: 100vh; } .admin-loading-screen, .admin-login-screen { display: grid; min-height: 100dvh; place-items: center; padding: 20px; } .admin-loading-screen { gap: 12px; color: #7b6150; } .admin-loading-mark { width: 24px; height: 24px; border: 3px solid #e1ccbb; border-top-color: #b6623f; border-radius: 50%; animation: admin-spin 0.8s linear infinite; } .admin-login-screen { background: linear-gradient(145deg, rgba(204, 117, 76, 0.14), transparent 36%), linear-gradient(315deg, rgba(226, 171, 134, 0.16), transparent 34%), #f8efe7; } .admin-login-panel, .admin-panel { border: 1px solid #e1ccbb; border-radius: 8px; background: #ffffff; box-shadow: 0 12px 36px rgba(112, 57, 30, 0.08); } .admin-login-panel { display: grid; width: min(100%, 420px); gap: 18px; padding: 28px; } .admin-login-brand, .admin-brand { display: flex; align-items: center; gap: 12px; } .admin-login-brand h1 { margin: 0; color: #3d1f10; font-size: 26px; line-height: 1.16; } .admin-login-brand span, .admin-brand span { color: #8f7868; font-size: 12px; } .admin-brand-icon { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid #dfc8b7; border-radius: 8px; color: #b6623f; background: #f4e5d7; } .admin-brand-icon-large { width: 48px; height: 48px; } .admin-shell { display: grid; height: 100dvh; min-height: 100dvh; grid-template-columns: 232px minmax(0, 1fr); overflow: hidden; } .admin-sidebar { display: flex; min-height: 0; flex-direction: column; gap: 24px; border-right: 1px solid #e1ccbb; background: #ffffff; padding: 22px 18px; overflow-y: auto; } .admin-brand strong { display: block; font-size: 17px; } .admin-nav { display: grid; gap: 8px; } .admin-nav-button, .admin-bottom-nav-button, .admin-icon-button, .admin-primary-button, .admin-secondary-button, .admin-danger-button, .admin-ghost-button { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; white-space: nowrap; } .admin-nav-button { justify-content: flex-start; gap: 10px; min-height: 42px; padding: 0 12px; color: #755a49; background: transparent; } .admin-nav-button[data-active="true"] { color: #8f3f27; background: #f4e5d7; } .admin-main { display: grid; min-width: 0; min-height: 0; grid-template-rows: 64px minmax(0, 1fr); overflow: hidden; } .admin-topbar { display: flex; align-items: center; justify-content: flex-end; gap: 12px; border-bottom: 1px solid #e1ccbb; background: rgba(255, 255, 255, 0.86); padding: 0 24px; } .admin-user { display: grid; justify-items: end; gap: 2px; } .admin-user span { font-weight: 650; } .admin-user small { color: #8f7868; } .admin-content { min-width: 0; min-height: 0; padding: 24px; overflow: auto; } .admin-zero-permission-state { min-height: 180px; place-items: center; } .admin-zero-permission-state h2 { margin: 0; color: #6f5848; font-size: 20px; } .admin-page { display: grid; gap: 18px; max-width: 1180px; margin: 0 auto; } .admin-page-wide { max-width: 1480px; } .admin-page-heading, .admin-panel-heading, .admin-subsection-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .admin-page-heading h2, .admin-panel-heading h3 { margin: 0; color: #3d1f10; } .admin-page-heading h2 { font-size: 25px; } .admin-page-heading p { margin: 3px 0 0; color: #8f7868; } .admin-panel { display: grid; gap: 16px; min-width: 0; padding: 18px; } .admin-panel-heading h3 { font-size: 16px; } .admin-panel-heading span { color: #8f7868; font-size: 13px; } .admin-panel-warning { border-color: #efc894; background: #fffaf3; } .admin-overview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .admin-dashboard-heading { align-items: flex-start; } .admin-dashboard-actions { display: flex; flex-wrap: wrap; align-items: end; justify-content: flex-end; gap: 10px; } .admin-dashboard-granularity { width: 250px; flex: 0 0 auto; } .admin-dashboard-period-fields { display: grid; width: 352px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .admin-dashboard-date-field { width: 170px; } .admin-dashboard-actions .admin-secondary-button { min-width: 86px; } .admin-dashboard-tabs { display: inline-grid; width: fit-content; grid-template-columns: repeat(2, minmax(96px, 1fr)); gap: 6px; border: 1px solid #e1ccbb; border-radius: 8px; background: #ffffff; padding: 4px; } .admin-dashboard-tabs button { min-height: 38px; border: 0; border-radius: 6px; color: #755a49; background: transparent; font-weight: 800; } .admin-dashboard-tabs button[data-active="true"] { color: #8f3f27; background: #f4e5d7; } .admin-dashboard-metric-grid, .admin-dashboard-chart-grid, .admin-dashboard-operation-grid { display: grid; gap: 14px; } .admin-dashboard-metric-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .admin-dashboard-operation-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .admin-dashboard-retention-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .admin-dashboard-retention-card { display: grid; min-width: 0; min-height: 112px; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr; gap: 8px 16px; align-items: center; padding: 16px; } .admin-dashboard-retention-card + .admin-dashboard-retention-card { border-left: 1px solid #ead8ca; } .admin-dashboard-retention-card > span { color: #8f7868; font-size: 13px; font-weight: 750; } .admin-dashboard-retention-card > strong { grid-row: 1 / -1; grid-column: 2; color: #8f3f27; font-size: 30px; font-variant-numeric: tabular-nums; line-height: 1.1; white-space: nowrap; } .admin-dashboard-retention-card > div { display: flex; min-width: 0; align-items: baseline; gap: 8px; } .admin-dashboard-retention-card small { min-width: 0; color: #a38f80; font-size: 12px; } .admin-dashboard-retention-card b { flex: 0 0 auto; color: #755a49; font-size: 13px; font-variant-numeric: tabular-nums; } .admin-dashboard-chart-grid, .admin-dashboard-operations { grid-template-columns: repeat(2, minmax(0, 1fr)); } .admin-dashboard-operations { display: grid; gap: 16px; align-items: start; } .admin-dashboard-operations > .admin-panel:first-child { grid-column: 1 / -1; } .admin-dashboard-metric-card { gap: 8px; min-height: 132px; } .admin-dashboard-metric-card[data-compact="true"] { min-height: 112px; } .admin-dashboard-metric-card span { color: #8f7868; font-size: 13px; font-weight: 750; line-height: 1.35; } .admin-dashboard-metric-card strong { color: #3d1f10; font-size: 30px; line-height: 1.1; overflow-wrap: anywhere; } .admin-dashboard-metric-card small { color: #a38f80; font-size: 12px; font-weight: 700; } .admin-dashboard-chart-card { min-height: 286px; } .admin-dashboard-bars { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(36px, 1fr); align-items: end; gap: 8px; min-height: 196px; overflow-x: auto; overscroll-behavior-inline: contain; padding: 4px 2px 0; scrollbar-color: #bdaea3 #f4e5d7; scrollbar-width: thin; } .admin-dashboard-bar-item { display: grid; min-width: 36px; gap: 7px; align-items: end; justify-items: center; } .admin-dashboard-bar-track { position: relative; display: flex; width: 18px; max-width: 100%; min-width: 18px; height: 160px; align-items: flex-end; overflow: hidden; border-radius: 7px; background: #f4e5d7; } .admin-dashboard-bar-track span { display: block; width: 100%; border-radius: 7px 7px 0 0; background: linear-gradient(180deg, #c87955, #8f3f27); } .admin-dashboard-bar-item small { width: 100%; max-width: 44px; overflow: hidden; color: #8f7868; font-size: 11px; font-variant-numeric: tabular-nums; font-weight: 700; text-align: center; text-overflow: ellipsis; white-space: nowrap; } .admin-dashboard-breakdown-panel { min-height: 300px; } .admin-dashboard-breakdown-list { display: grid; gap: 12px; } .admin-dashboard-breakdown-row { display: grid; gap: 7px; } .admin-dashboard-breakdown-row > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .admin-dashboard-breakdown-row strong, .admin-dashboard-breakdown-row span { min-width: 0; overflow-wrap: anywhere; } .admin-dashboard-breakdown-row strong { color: #3d1f10; font-size: 13px; } .admin-dashboard-breakdown-row span { color: #8f7868; font-size: 12px; font-weight: 700; } .admin-dashboard-breakdown-track { height: 8px; overflow: hidden; border-radius: 999px; background: #f4e5d7; } .admin-dashboard-breakdown-track span { display: block; height: 100%; border-radius: inherit; background: #8f3f27; } .admin-two-column { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr); gap: 16px; align-items: start; } .admin-two-column-wide { grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr); } .admin-accounts-layout { display: grid; grid-template-columns: minmax(240px, 0.42fr) minmax(0, 1fr); gap: 16px; align-items: start; } .admin-account-list { align-content: start; } .admin-account-list-items { display: grid; gap: 8px; } .admin-account-list-items > button { display: flex; min-width: 0; min-height: 58px; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid #eaded2; border-radius: 8px; color: #755a49; background: #fffdf9; padding: 10px 12px; text-align: left; } .admin-account-list-items > button[data-active="true"] { border-color: #c87955; background: #f9eee5; } .admin-account-list-items > button > span { display: grid; min-width: 0; gap: 3px; } .admin-account-list-items strong, .admin-account-list-items small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .admin-account-list-items small { color: #8f7868; font-size: 12px; } .admin-permission-fieldset { min-width: 0; margin: 0; border: 1px solid #e1ccbb; border-radius: 8px; padding: 14px; } .admin-permission-fieldset legend { color: #6f5848; font-size: 13px; font-weight: 750; padding: 0 6px; } .admin-permission-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 14px; } .admin-permission-grid label { display: flex; min-width: 0; align-items: center; gap: 8px; color: #5f4738; font-size: 13px; } .admin-stack, .admin-form { display: grid; gap: 16px; } .admin-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: end; } .admin-gate-key-selectors { display: grid; grid-template-columns: minmax(150px, 0.42fr) minmax(0, 1fr); gap: 10px; } .admin-filter-grid { display: grid; grid-template-columns: repeat(5, minmax(120px, 1fr)) auto; gap: 12px; align-items: end; } .admin-table-query-grid { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(160px, 1fr) minmax(220px, 1.2fr) minmax(96px, 0.45fr) auto; gap: 12px; align-items: end; } .admin-recharge-filter-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; align-items: end; } .admin-recharge-filter-actions { justify-content: flex-start; } .admin-inline-identity { display: flex; min-width: 0; align-items: flex-start; justify-content: space-between; gap: 8px; } .admin-inline-identity > div { display: grid; min-width: 0; gap: 2px; } .admin-inline-identity small { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .admin-database-user-cell, .admin-tracking-user-reference { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 7px; } .admin-database-user-cell .admin-table-cell-ellipsis, .admin-tracking-user-reference span, .admin-tracking-user-reference small { min-width: 0; } .admin-inline-identity strong, .admin-inline-identity small, .admin-mono-value { overflow-wrap: anywhere; } .admin-mono-value { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: 12px; } .admin-table tbody tr[data-clickable="true"] { cursor: pointer; } .admin-table tbody tr[data-clickable="true"]:hover { background: #fff7f0; } .admin-text-button:hover, .admin-text-button:focus-visible { color: #b6623f; text-decoration: underline; outline: none; } .admin-action-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; } .admin-asset-query-filter-row { align-items: end; } .admin-asset-query-filter-row .admin-field { min-width: 140px; } .admin-asset-query-filter-row .admin-field:last-child { min-width: 240px; } .admin-asset-query-thumb-button { display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; padding: 0; cursor: zoom-in; } .admin-asset-query-thumb { border: 1px solid #eaded2; border-radius: 8px; width: 72px; height: 72px; background: #fffdf9; object-fit: contain; object-position: center; } .admin-asset-query-thumb-placeholder { display: block; } .admin-asset-query-resource-cell { display: flex; align-items: flex-start; gap: 6px; } .admin-asset-query-resource-cell > div:last-child small { display: block; max-width: 92px; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .admin-asset-query-expand-button { display: inline-flex; flex: 0 0 28px; width: 28px; height: 28px; align-items: center; justify-content: center; border: 0; background: transparent; color: #78523e; cursor: pointer; } .admin-asset-query-expand-spacer, .admin-asset-query-child-branch { display: block; flex: 0 0 28px; width: 28px; } .admin-asset-query-child-row { background: #fffaf5; } .admin-asset-query-resource-cell-child { padding-left: 12px; } .admin-asset-query-child-branch { height: 34px; border-bottom: 1px solid #d8c3b3; border-left: 1px solid #d8c3b3; } .admin-asset-query-prompt-text { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .admin-query-action-row { justify-content: space-between; } .admin-query-summary, .admin-detail-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .admin-query-summary { color: #8f7868; font-size: 12px; font-weight: 650; } .admin-field { display: grid; min-width: 0; gap: 7px; color: #6f5848; font-size: 13px; font-weight: 650; } .admin-field-fill { min-width: 0; } .admin-field-compact { max-width: 160px; } .admin-field input, .admin-field select, .admin-field textarea { width: 100%; min-height: 42px; border: 1px solid #dfc8b7; border-radius: 8px; color: #3d1f10; background: #fffdf9; padding: 9px 11px; outline: none; } .admin-field-note { color: #8f7868; font-size: 12px; font-weight: 500; line-height: 1.45; } .admin-field textarea { min-height: 112px; resize: vertical; } .admin-field input:focus, .admin-field select:focus, .admin-field textarea:focus { border-color: #b6623f; box-shadow: 0 0 0 3px rgba(204, 117, 76, 0.16); } .admin-combobox { position: relative; min-width: 0; } .admin-combobox-control { display: grid; grid-template-columns: minmax(0, 1fr) 38px; } .admin-combobox-control input { border-top-right-radius: 0; border-bottom-right-radius: 0; } .admin-combobox-toggle { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; border: 1px solid #dfc8b7; border-left: 0; border-radius: 0 8px 8px 0; color: #755a49; background: #fffdf9; } .admin-combobox:focus-within .admin-combobox-toggle { border-color: #b6623f; box-shadow: 0 0 0 3px rgba(204, 117, 76, 0.16); } .admin-combobox-menu { position: absolute; top: calc(100% + 6px); right: 0; left: 0; z-index: 30; display: grid; max-height: 260px; overflow: auto; border: 1px solid #dfc8b7; border-radius: 8px; background: #ffffff; box-shadow: 0 16px 40px rgba(112, 57, 30, 0.14); padding: 6px; } .admin-combobox-option { display: grid; gap: 3px; width: 100%; border: 0; border-radius: 7px; color: #3d1f10; background: transparent; padding: 9px 10px; text-align: left; } .admin-combobox-option:hover, .admin-combobox-option:focus-visible { background: #f4e5d7; outline: none; } .admin-combobox-option span { color: #8f3f27; font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: 12px; font-weight: 700; } .admin-combobox-option small, .admin-combobox-empty { color: #8f7868; font-size: 12px; font-weight: 500; line-height: 1.45; } .admin-combobox-empty { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px; } .admin-switch-field { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; min-height: 42px; color: #6f5848; font-size: 13px; font-weight: 650; } .admin-switch-field input { width: 18px; height: 18px; accent-color: #b6623f; } .admin-primary-button, .admin-secondary-button, .admin-danger-button, .admin-icon-button { gap: 8px; min-height: 40px; padding: 0 14px; font-weight: 700; } .admin-confirm-backdrop { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: rgba(61, 31, 16, 0.34); padding: 16px; } .admin-confirm-panel { display: grid; width: min(100%, 420px); gap: 16px; border: 1px solid #e1ccbb; border-radius: 10px; background: #ffffff; box-shadow: 0 22px 60px rgba(112, 57, 30, 0.24); padding: 18px; } .admin-detail-panel { display: grid; width: min(100%, 760px); max-height: min(90dvh, 760px); gap: 16px; overflow: auto; border: 1px solid #e1ccbb; border-radius: 10px; background: #ffffff; box-shadow: 0 22px 60px rgba(112, 57, 30, 0.24); padding: 18px; } .admin-user-detail-backdrop { z-index: 85; } .admin-user-detail-panel { width: min(100%, 920px); max-height: min(92dvh, 900px); } .admin-user-reference-button { flex: 0 0 34px; min-width: 34px; padding: 0; } .admin-user-detail-loading, .admin-user-detail-error { display: grid; min-height: 180px; place-items: center; gap: 12px; } .admin-user-detail-error { align-content: center; } .admin-user-identity { display: grid; grid-template-columns: 68px minmax(160px, 0.42fr) minmax(280px, 1fr); gap: 16px; align-items: center; border-bottom: 1px solid #eaded2; padding-bottom: 16px; } .admin-user-avatar { display: grid; width: 64px; height: 64px; place-items: center; overflow: hidden; border: 1px solid #dfc8b7; border-radius: 50%; color: #8f3f27; background: #f4e5d7; } .admin-user-avatar img { width: 100%; height: 100%; object-fit: cover; } .admin-user-identity-primary { display: grid; min-width: 0; gap: 5px; } .admin-user-identity-primary strong { overflow-wrap: anywhere; color: #3d1f10; font-size: 18px; } .admin-user-identity-primary span { overflow-wrap: anywhere; color: #8f3f27; font-size: 13px; font-weight: 750; } .admin-user-identity-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .admin-user-identity-list div { grid-template-columns: 1fr; gap: 3px; } .admin-user-wallet-section, .admin-user-restriction-section, .admin-user-recharge-section { display: grid; gap: 12px; } .admin-user-wallet-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; } .admin-user-restriction-section { border-top: 1px solid #eaded2; border-bottom: 1px solid #eaded2; padding: 16px 0; } .admin-user-restriction-record { display: grid; gap: 3px; color: #6f5848; font-size: 13px; } .admin-user-restriction-record small { color: #8f7868; } .admin-user-restriction-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; } .admin-user-restriction-actions button { min-width: 150px; } .admin-user-recharge-table { min-width: 720px; } .admin-detail-list .admin-code-block { max-height: 280px; } .admin-confirm-warning { border: 1px solid #efc894; border-radius: 8px; color: #8f4b26; background: #fffaf3; padding: 10px 12px; font-size: 13px; font-weight: 650; } .admin-confirm-actions { display: flex; justify-content: flex-end; gap: 10px; } .admin-confirm-actions button { min-width: 92px; } .admin-primary-button { color: #ffffff; background: #b6623f; } .admin-secondary-button, .admin-icon-button { border: 1px solid #dfc8b7; color: #4b2412; background: #ffffff; } .admin-danger-button { color: #ffffff; background: #a6402f; } .admin-ghost-button { width: 34px; height: 34px; color: #755a49; background: #f8efe7; } .admin-ghost-button.admin-user-wallet-reconcile-button { width: auto; min-width: 92px; padding: 0 10px; gap: 6px; } .admin-ghost-button.admin-query-reset-button { width: auto; min-width: 76px; height: 40px; padding: 0 12px; } .admin-text-button { display: inline; border: 0; color: #8f3f27; background: transparent; padding: 0; text-align: left; font-weight: 700; } .admin-alert { border: 1px solid #e2b9a4; border-radius: 8px; color: #8f3f27; background: #fff4f3; padding: 10px 12px; font-size: 13px; } .admin-alert-warning, .admin-alert-success, .admin-refund-result-banner { display: flex; align-items: flex-start; gap: 10px; } .admin-alert-warning { border-color: #efc894; color: #8f4b26; background: #fffaf3; } .admin-alert-success { border-color: #a9cfb2; color: #28633a; background: #f2faf4; } .admin-refund-result-banner div { display: grid; gap: 3px; } .admin-refund-result-banner span { line-height: 1.45; } .admin-info-list { display: grid; gap: 10px; margin: 0; } .admin-info-list > div { display: grid; grid-template-columns: minmax(90px, 0.34fr) minmax(0, 1fr); gap: 12px; align-items: baseline; } .admin-info-list dt { color: #8f7868; font-size: 12px; } .admin-info-list dd { min-width: 0; margin: 0; overflow-wrap: anywhere; color: #3d1f10; font-size: 13px; font-weight: 650; } .admin-table-wrap { max-width: 100%; overflow: auto; scrollbar-gutter: stable; -webkit-overflow-scrolling: touch; } .admin-table { width: 100%; min-width: 620px; border-collapse: collapse; } .admin-table th, .admin-table td { border-bottom: 1px solid #eaded2; padding: 10px; text-align: left; vertical-align: top; } .admin-table th { color: #8f7868; font-size: 12px; } .admin-table td small { display: block; margin-top: 3px; color: #8f7868; font-size: 12px; } .admin-table textarea { width: min(100%, 220px); min-height: 64px; border: 1px solid #dfc8b7; border-radius: 8px; color: #3d1f10; background: #fffdf9; padding: 8px 10px; resize: vertical; } .admin-muted-text { color: #a38f80; } .admin-tag-list { display: flex; min-width: 0; flex-wrap: wrap; gap: 6px; } .admin-tag { display: inline-flex; max-width: 100%; align-items: center; border: 1px solid #dfc8b7; border-radius: 999px; background: #f7eadf; color: #8f3f27; padding: 3px 8px; font-size: 12px; font-weight: 750; line-height: 1.2; overflow-wrap: anywhere; } .admin-table-compact { min-width: 360px; } .admin-table-wide { min-width: 1180px; } .admin-recharge-table { min-width: 1080px; table-layout: fixed; } .admin-recharge-table th:nth-child(1) { width: 13%; } .admin-recharge-table th:nth-child(2) { width: 17%; } .admin-recharge-table th:nth-child(3) { width: 14%; } .admin-recharge-table th:nth-child(4) { width: 10%; } .admin-recharge-table th:nth-child(5) { width: 16%; } .admin-recharge-table th:nth-child(6) { width: 14%; } .admin-recharge-table th:nth-child(7), .admin-recharge-table th:nth-child(8) { width: 8%; } .admin-recharge-table td { overflow-wrap: anywhere; } .admin-recharge-tags { margin-top: 7px; } .admin-recharge-refund-button { min-width: 82px; } .admin-recharge-dialog { width: min(100%, 840px); } .admin-refund-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .admin-recharge-metric { display: grid; min-width: 0; gap: 5px; border: 1px solid #eaded2; border-radius: 8px; background: #fffdf9; padding: 11px 12px; } .admin-recharge-metric span { color: #8f7868; font-size: 12px; } .admin-recharge-metric strong { overflow-wrap: anywhere; color: #3d1f10; font-size: 16px; } .admin-refund-mode { grid-template-columns: repeat(2, minmax(0, 1fr)); } .admin-refund-preview { display: grid; gap: 12px; border: 1px solid #eaded2; border-radius: 8px; background: #fffdf9; padding: 14px; } .admin-asset-query-table { min-width: 1080px; table-layout: fixed; } .admin-asset-query-table th:nth-child(1), .admin-asset-query-table td:nth-child(1) { width: 13%; } .admin-asset-query-table th:nth-child(2), .admin-asset-query-table td:nth-child(2), .admin-asset-query-table th:nth-child(3), .admin-asset-query-table td:nth-child(3) { width: 13%; } .admin-asset-query-table th:nth-child(4), .admin-asset-query-table td:nth-child(4) { width: 27%; } .admin-asset-query-table th:nth-child(5), .admin-asset-query-table td:nth-child(5) { width: 10%; } .admin-asset-query-table th:nth-child(6), .admin-asset-query-table td:nth-child(6) { width: 10%; } .admin-asset-query-table th:nth-child(7), .admin-asset-query-table td:nth-child(7) { width: 10%; } .admin-showcase-review-table { table-layout: fixed; } .admin-showcase-review-table th:nth-child(1), .admin-showcase-review-table td:nth-child(1) { width: 8%; text-align: center; } .admin-showcase-review-table td:nth-child(1) small { display: block; max-width: 100%; margin-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .admin-showcase-review-table td:nth-child(4) select { width: 100%; min-width: 0; } .admin-showcase-review-table th:nth-child(2), .admin-showcase-review-table td:nth-child(2), .admin-showcase-review-table th:nth-child(3), .admin-showcase-review-table td:nth-child(3) { width: 13%; } .admin-showcase-review-table th:nth-child(4), .admin-showcase-review-table td:nth-child(4), .admin-showcase-review-table th:nth-child(5), .admin-showcase-review-table td:nth-child(5), .admin-showcase-review-table th:nth-child(7), .admin-showcase-review-table td:nth-child(7) { width: 10%; } .admin-showcase-review-table th:nth-child(6), .admin-showcase-review-table td:nth-child(6) { width: 21%; } .admin-showcase-review-table th:nth-child(8), .admin-showcase-review-table td:nth-child(8) { width: 15%; } .admin-showcase-review-actions { display: grid; gap: 8px; } .admin-showcase-review-actions input { min-width: 0; } .admin-showcase-campaign-grid { align-items: end; } .admin-showcase-campaign-grid .admin-field { min-width: 160px; } .admin-hidden-file-input { display: none; } .admin-showcase-campaign-image-row { display: flex; align-items: center; gap: 8px; } .admin-showcase-campaign-image-row input { min-width: 0; } .admin-showcase-campaign-prompt { min-width: min(100%, 320px); } .admin-asset-query-detail-dialog, .admin-asset-query-prompt-dialog, .admin-asset-query-preview-dialog { width: min(100%, 860px); } .admin-asset-query-prompt-dialog .admin-panel-heading > div, .admin-asset-query-detail-dialog .admin-panel-heading > div, .admin-asset-query-preview-dialog .admin-panel-heading > div { min-width: 0; } .admin-asset-query-prompt-dialog .admin-panel-heading span, .admin-asset-query-detail-dialog .admin-panel-heading span, .admin-asset-query-preview-dialog .admin-panel-heading span { display: block; max-width: 100%; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .admin-asset-query-prompt-full { max-height: min(68dvh, 520px); } .admin-asset-query-detail-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; align-items: start; } .admin-asset-query-detail-thumb-button .admin-asset-query-thumb { width: 220px; height: 220px; } .admin-asset-query-preview-dialog { width: min(100%, 960px); } .admin-asset-query-preview-media { display: block; max-width: 100%; max-height: min(72dvh, 680px); margin: 0 auto; border: 1px solid #eaded2; border-radius: 8px; background: #fffdf9; object-fit: contain; } .admin-asset-query-sequence-preview { position: relative; width: min(100%, 720px); min-height: min(64dvh, 560px); overflow: hidden; } .admin-asset-query-sequence-frame { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; } .admin-asset-query-sequence-controls { position: absolute; right: 12px; bottom: 12px; z-index: 2; display: flex; max-width: calc(100% - 24px); flex-wrap: wrap; align-items: center; gap: 8px; border-radius: 999px; background: rgba(43, 31, 22, 0.82); color: #fff; padding: 6px 10px; font-size: 12px; } .admin-asset-query-sequence-controls button { display: grid; min-width: 44px; min-height: 44px; border: 0; background: transparent; color: inherit; cursor: pointer; padding: 0; place-items: center; } .admin-asset-query-sequence-error { display: grid; color: #9d3127; place-items: center; } .admin-asset-query-preview-audio { display: grid; justify-items: center; gap: 16px; padding: 18px 0; } .admin-asset-query-preview-cover { width: min(240px, 64vw); aspect-ratio: 1; border: 1px solid #eaded2; border-radius: 8px; background: #fffdf9; object-fit: contain; } .admin-asset-query-preview-player { width: min(100%, 620px); } .admin-asset-query-preview-placeholder { min-height: 220px; border: 1px dashed #dfc8b7; border-radius: 8px; background: #fffdf9; } .admin-database-table { width: max-content; min-width: 100%; table-layout: fixed; } .admin-database-table th, .admin-database-table td { width: 220px; min-width: 220px; max-width: 220px; } .admin-database-table th:last-child, .admin-database-table td:last-child { width: 112px; min-width: 112px; max-width: 112px; } .admin-database-tables-page { padding-bottom: calc(var(--admin-database-pagination-height, 68px) + 16px); } .admin-database-pagination { position: fixed; right: 0; bottom: 0; left: 232px; z-index: 18; justify-content: space-between; border-top: 1px solid #eaded2; background: rgba(255, 255, 255, 0.96); box-shadow: 0 -8px 24px rgba(112, 57, 30, 0.08); padding: 12px 24px calc(12px + env(safe-area-inset-bottom)); backdrop-filter: blur(10px); } .admin-database-pagination-info { color: #755a49; font-size: 13px; font-weight: 700; } .admin-table-sort-button { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; border: 0; color: #8f7868; background: transparent; padding: 0; text-align: left; font-size: 12px; font-weight: 800; } .admin-table-sort-button span { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .admin-table-sort-button svg { flex: 0 0 auto; } .admin-table-cell-ellipsis { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .admin-table-sort-button:hover, .admin-table-sort-button:focus-visible, .admin-table-sort-button[data-active="true"] { color: #8f3f27; outline: none; } .admin-json-preview { max-width: 360px; max-height: 160px; margin: 0; overflow: auto; color: #4b2412; font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: 12px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; } .admin-contract-card { display: grid; gap: 12px; border: 1px solid #eaded2; border-radius: 8px; background: #fffdf9; padding: 12px; } .admin-contract-field-list, .admin-contract-field-editor-list { display: grid; gap: 10px; } .admin-contract-field-list { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .admin-contract-field-card, .admin-contract-field-editor { display: grid; gap: 6px; border: 1px solid #eaded2; border-radius: 8px; background: #fff8f1; padding: 10px; } .admin-contract-field-card strong, .admin-contract-field-card span { min-width: 0; overflow-wrap: anywhere; } .admin-contract-field-card strong { color: #3d1f10; font-size: 13px; } .admin-contract-field-card span { color: #8f7868; font-size: 12px; font-weight: 650; } .admin-contract-dialog { width: min(100%, 860px); } .admin-contract-field-editor-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(120px, 0.6fr) minmax(0, 1fr) auto; gap: 10px; align-items: end; } .admin-contract-required-toggle { min-height: 42px; } .admin-status { display: inline-flex; max-width: 460px; border-radius: 999px; padding: 3px 8px; font-size: 12px; overflow-wrap: anywhere; } .admin-status-ok { color: #2f7b46; background: #edf8ef; } .admin-status-pending { color: #8f4b26; background: #fdf1e5; } .admin-status-error { color: #8f3f27; background: #fff0e9; } .admin-error-list { display: grid; gap: 8px; margin: 0; padding-left: 18px; color: #8f4b26; overflow-wrap: anywhere; } .admin-subsection { display: grid; gap: 10px; } .admin-subsection-heading { color: #6f5848; font-size: 13px; font-weight: 650; } .admin-header-editor { display: grid; gap: 8px; } .admin-header-row { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) 34px; gap: 8px; align-items: center; } .admin-header-row input { min-width: 0; min-height: 38px; border: 1px solid #dfc8b7; border-radius: 8px; padding: 8px 10px; } .admin-result-panel { min-height: 260px; } .admin-code-block { max-height: 520px; margin: 0; overflow: auto; border: 1px solid #eaded2; border-radius: 8px; background: #3d1f10; color: #fdf9f5; padding: 14px; font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: 12px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; } .admin-empty-state { display: grid; min-height: 140px; place-items: center; border: 1px dashed #dfc8b7; border-radius: 8px; color: #8f7868; background: #fffdf9; } .admin-segmented-control { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; border: 1px solid #e1ccbb; border-radius: 8px; background: #f8efe7; padding: 4px; } .admin-segmented-control button { min-height: 36px; border: 0; border-radius: 6px; color: #755a49; background: transparent; font-weight: 700; } .admin-segmented-control button[data-active="true"] { color: #8f3f27; background: #ffffff; box-shadow: 0 2px 8px rgba(112, 57, 30, 0.08); } .admin-pricing-grid, .admin-pricing-field-list, .admin-pricing-model-list, .admin-pricing-model-card { display: grid; gap: 12px; } .admin-pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .admin-pricing-model-card { border: 1px solid #eaded2; border-radius: 8px; background: #fffdf9; padding: 12px; } .admin-pricing-model-card strong { color: #3d1f10; overflow-wrap: anywhere; } .admin-pricing-model-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .admin-pricing-unit { flex: 0 0 auto; border-radius: 999px; background: #f2e3d7; color: #7b4a2f; font-size: 12px; font-weight: 800; line-height: 1; padding: 5px 8px; } .admin-bottom-nav { display: none; } @keyframes admin-spin { to { transform: rotate(360deg); } } @media (max-width: 980px) { .admin-shell { grid-template-columns: 1fr; } .admin-sidebar { display: none; } .admin-main { grid-template-rows: 58px minmax(0, 1fr); } .admin-topbar { justify-content: space-between; padding: 0 14px; } .admin-content { padding: 16px 14px calc(88px + env(safe-area-inset-bottom)); } .admin-overview-grid, .admin-dashboard-chart-grid, .admin-dashboard-operations, .admin-two-column, .admin-two-column-wide, .admin-accounts-layout, .admin-pricing-grid, .admin-form-row, .admin-filter-grid, .admin-table-query-grid, .admin-recharge-filter-grid, .admin-contract-field-editor-grid { grid-template-columns: 1fr; } .admin-permission-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .admin-dashboard-heading { display: grid; } .admin-dashboard-actions { justify-content: stretch; } .admin-dashboard-granularity, .admin-dashboard-period-fields, .admin-dashboard-date-field, .admin-dashboard-actions .admin-secondary-button { width: 100%; } .admin-dashboard-period-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } .admin-dashboard-metric-grid, .admin-dashboard-operation-grid, .admin-dashboard-retention-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .admin-dashboard-retention-card:nth-child(odd) { border-left: 0; } .admin-dashboard-retention-card:nth-child(n + 3) { border-top: 1px solid #ead8ca; } .admin-field-compact { max-width: none; } .admin-gate-key-selectors { grid-template-columns: 1fr; } .admin-bottom-nav { position: fixed; right: 0; bottom: 0; left: 0; z-index: 20; display: flex; min-height: calc(72px + env(safe-area-inset-bottom)); align-items: flex-start; gap: 4px; overflow-x: auto; overflow-y: hidden; border-top: 1px solid #e1ccbb; background: rgba(255, 255, 255, 0.94); padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); backdrop-filter: blur(10px); scrollbar-width: thin; } .admin-database-pagination { right: 0; bottom: var(--admin-bottom-nav-height, 64px); left: 0; padding: 10px 14px; } .admin-database-tables-page { padding-bottom: calc( var(--admin-bottom-nav-height, 64px) + var(--admin-database-pagination-height, 58px) + 16px ); } .admin-bottom-nav-button { display: grid; flex: 0 0 76px; gap: 4px; min-height: 48px; color: #8f7868; background: transparent; font-size: 11px; font-weight: 700; } .admin-bottom-nav-button[data-active="true"] { color: #8f3f27; background: #f4e5d7; } } @media (max-width: 360px) { .admin-database-pagination .admin-secondary-button { width: 38px; min-width: 38px; padding: 0; } .admin-database-pagination .admin-secondary-button span { display: none; } } @media (max-width: 560px) { .admin-permission-grid { grid-template-columns: 1fr; } .admin-login-panel, .admin-panel { padding: 16px; } .admin-confirm-panel { padding: 16px; } .admin-confirm-actions { display: grid; } .admin-recharge-page-heading { display: grid; align-items: stretch; } .admin-recharge-page-heading .admin-action-row { justify-content: stretch; } .admin-recharge-page-heading .admin-action-row button { flex: 1 1 150px; } .admin-refund-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .admin-user-identity { grid-template-columns: 56px minmax(0, 1fr); } .admin-user-avatar { width: 52px; height: 52px; } .admin-user-identity-list { grid-column: 1 / -1; grid-template-columns: 1fr; } .admin-user-wallet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .admin-user-restriction-actions { grid-template-columns: 1fr; } .admin-login-brand h1, .admin-page-heading h2 { font-size: 22px; } .admin-info-list > div { grid-template-columns: 1fr; gap: 3px; } .admin-asset-query-detail-layout { grid-template-columns: 1fr; } .admin-asset-query-detail-thumb-button { justify-self: center; } .admin-dashboard-tabs { width: 100%; } .admin-dashboard-period-fields { grid-template-columns: 1fr; } .admin-dashboard-retention-card { grid-template-columns: 1fr; grid-template-rows: auto; } .admin-dashboard-retention-card + .admin-dashboard-retention-card { border-top: 1px solid #ead8ca; border-left: 0; } .admin-dashboard-retention-card > strong { grid-row: auto; grid-column: auto; } .admin-dashboard-retention-card > div { align-items: flex-start; flex-direction: column; gap: 3px; } .admin-dashboard-metric-grid, .admin-dashboard-operation-grid, .admin-dashboard-retention-grid { grid-template-columns: 1fr; } .admin-dashboard-metric-card { min-height: 112px; } .admin-dashboard-chart-card { min-height: 250px; } .admin-header-row { grid-template-columns: 1fr; } .admin-header-row .admin-ghost-button { width: 100%; } .admin-icon-button span { display: none; } .admin-database-pagination, .admin-database-pagination .admin-action-row { flex-wrap: nowrap; } .admin-database-pagination { gap: 8px; padding: 10px; } .admin-database-pagination .admin-action-row { gap: 6px; } .admin-database-pagination .admin-secondary-button { gap: 4px; min-height: 38px; padding: 0 8px; } .admin-database-pagination-info { font-size: 12px; white-space: nowrap; } }