MMO — Multi-Account Manager

\n \n \n\n",[],[168,356],"07d8d29a-3157-11f1-a470-42dde27851f2","index.css","07d8d358-3157-11f1-a470-42dde27851f2",21,["D",1775438528867],"@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');\n\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n:root {\n --bg: #0b0b10;\n --surface: #13131e;\n --surface2: #1a1a2e;\n --border: #252540;\n --primary: #6366f1;\n --primary-d: #4f52d0;\n --accent: #8b5cf6;\n --green: #22c55e;\n --red: #ef4444;\n --yellow: #f59e0b;\n --blue: #3b82f6;\n --text: #e2e8f0;\n --text2: #94a3b8;\n --text3: #475569;\n --radius: 12px;\n --radius-sm: 8px;\n font-family: 'Inter', system-ui, sans-serif;\n}\n\nbody {\n background: var(--bg);\n color: var(--text);\n font-size: 14px;\n line-height: 1.5;\n overflow: hidden;\n height: 100vh;\n user-select: none;\n}\n\n#root { display: flex; height: 100vh; overflow: hidden; }\n\n/* Scrollbar */\n::-webkit-scrollbar { width: 6px; height: 6px; }\n::-webkit-scrollbar-track { background: transparent; }\n::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }\n::-webkit-scrollbar-thumb:hover { background: var(--text3); }\n\n/* Button */\nbutton { font-family: inherit; cursor: pointer; border: none; }\n.btn {\n display: inline-flex; align-items: center; gap: 6px;\n padding: 8px 16px; border-radius: var(--radius-sm);\n font-size: 13px; font-weight: 600; transition: all 140ms;\n}\n.btn-primary { background: var(--primary); color: #fff; }\n.btn-primary:hover { background: var(--primary-d); transform: translateY(-1px); }\n.btn-ghost { background: var(--surface2); color: var(--text2); }\n.btn-ghost:hover { background: var(--border); color: var(--text); }\n.btn-danger { background: #2d0e0e; color: var(--red); }\n.btn-danger:hover { background: #3d1111; }\n.btn-sm { padding: 5px 10px; font-size: 12px; }\n.btn-icon { padding: 6px; border-radius: 8px; background: none; color: var(--text3); }\n.btn-icon:hover { background: var(--surface2); color: var(--text); }\n\n/* Input */\ninput, textarea, select {\n font-family: inherit; font-size: 13px;\n background: var(--surface2); color: var(--text);\n border: 1px solid var(--border); border-radius: var(--radius-sm);\n padding: 8px 12px; outline: none; width: 100%;\n transition: border-color 150ms;\n}\ninput:focus, textarea:focus, select:focus { border-color: var(--primary); }\ninput::placeholder, textarea::placeholder { color: var(--text3); }\nselect option { background: var(--surface); }\ntextarea { resize: vertical; min-height: 80px; }\n\n/* Label */\n.field { display: flex; flex-direction: column; gap: 5px; }\n.field label { font-size: 12px; font-weight: 600; color: var(--text2); text-transform: uppercase; letter-spacing: .04em; }\n\n/* Card */\n.card {\n background: var(--surface);\n border: 1px solid var(--border);\n border-radius: var(--radius);\n padding: 20px;\n}\n\n/* Badge */\n.badge {\n display: inline-flex; align-items: center; gap: 4px;\n padding: 2px 8px; border-radius: 20px;\n font-size: 11px; font-weight: 700;\n text-transform: uppercase; letter-spacing: .04em;\n}\n.badge-fb { background: #1a2744; color: #4a7cff; }\n.badge-google { background: #1a1a10; color: #f59e0b; }\n.badge-tiktok { background: #1a0e20; color: #e040fb; }\n.badge-active { background: #0f2e1a; color: var(--green); }\n.badge-inactive { background: #1e1e2e; color: var(--text3); }\n.badge-banned { background: #2d0e0e; color: var(--red); }\n.badge-warming { background: #2d2000; color: var(--yellow); }\n\n/* Avatar */\n.avatar {\n width: 36px; height: 36px; border-radius: 50%;\n background: linear-gradient(135deg, var(--primary), var(--accent));\n display: flex; align-items: center; justify-content: center;\n font-size: 14px; font-weight: 700; color: #fff; flex-shrink: 0;\n}\n.avatar-sm { width: 28px; height: 28px; font-size: 11px; }\n.avatar-lg { width: 48px; height: 48px; font-size: 20px; }\n\n/* Modal */\n.modal-overlay {\n position: fixed; inset: 0;\n background: rgba(0,0,0,.6); backdrop-filter: blur(4px);\n z-index: 1000; display: flex; align-items: center; justify-content: center;\n animation: fadeIn 150ms ease;\n}\n.modal {\n background: var(--surface);\n border: 1px solid var(--border);\n border-radius: 16px;\n width: min(520px, calc(100vw - 40px));\n max-height: 85vh; overflow-y: auto;\n animation: slideUp 180ms cubic-bezier(.34,1.56,.64,1);\n box-shadow: 0 40px 100px rgba(0,0,0,.6);\n}\n.modal-header {\n padding: 20px 24px 16px;\n border-bottom: 1px solid var(--border);\n display: flex; align-items: center; justify-content: space-between;\n}\n.modal-title { font-size: 16px; font-weight: 700; }\n.modal-body { padding: 24px; display: flex; flex-direction: column; gap: 16px; }\n.modal-footer {\n padding: 16px 24px;\n border-top: 1px solid var(--border);\n display: flex; justify-content: flex-end; gap: 10px;\n}\n\n/* Toast */\n.toast-container {\n position: fixed; bottom: 24px; right: 24px;\n display: flex; flex-direction: column; gap: 8px; z-index: 9999;\n}\n.toast {\n background: var(--surface2); border: 1px solid var(--border);\n border-radius: var(--radius-sm); padding: 12px 16px;\n font-size: 13px; font-weight: 500;\n box-shadow: 0 8px 32px rgba(0,0,0,.5);\n display: flex; align-items: center; gap: 8px;\n animation: slideIn 200ms ease;\n max-width: 320px;\n}\n.toast-success { border-left: 3px solid var(--green); }\n.toast-error { border-left: 3px solid var(--red); }\n.toast-info { border-left: 3px solid var(--primary); }\n\n/* Table */\n.table-wrap { overflow-x: auto; }\ntable { width: 100%; border-collapse: collapse; }\nth { padding: 10px 14px; text-align: left; font-size: 11px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--border); }\ntd { padding: 12px 14px; border-bottom: 1px solid #161624; font-size: 13px; }\ntr:hover td { background: var(--surface2); }\ntr:last-child td { border-bottom: none; }\n\n/* Stat card */\n.stat-card {\n background: var(--surface);\n border: 1px solid var(--border);\n border-radius: var(--radius);\n padding: 20px;\n display: flex; flex-direction: column; gap: 6px;\n}\n.stat-num { font-size: 32px; font-weight: 800; line-height: 1; }\n.stat-label { font-size: 12px; color: var(--text2); font-weight: 500; }\n.stat-delta { font-size: 12px; color: var(--green); font-weight: 600; }\n\n/* Sidebar */\n.sidebar {\n width: 220px; flex-shrink: 0;\n background: var(--surface);\n border-right: 1px solid var(--border);\n display: flex; flex-direction: column;\n padding: 0;\n}\n.sidebar-logo {\n padding: 20px 18px 16px;\n border-bottom: 1px solid var(--border);\n display: flex; align-items: center; gap: 10px;\n}\n.sidebar-logo-icon {\n width: 32px; height: 32px;\n background: linear-gradient(135deg, var(--primary), var(--accent));\n border-radius: 10px; display: flex; align-items: center; justify-content: center;\n font-size: 16px; box-shadow: 0 2px 12px rgba(99,102,241,.4);\n}\n.sidebar-logo-text { font-size: 16px; font-weight: 800; }\n.sidebar-logo-sub { font-size: 10px; color: var(--text3); }\n.sidebar-nav { flex: 1; padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }\n.nav-item {\n display: flex; align-items: center; gap: 10px;\n padding: 9px 10px; border-radius: var(--radius-sm);\n font-size: 13px; font-weight: 500; color: var(--text2);\n cursor: pointer; transition: all 140ms;\n border: none; background: none; width: 100%; text-align: left;\n}\n.nav-item:hover { background: var(--surface2); color: var(--text); }\n.nav-item.active { background: rgba(99,102,241,.15); color: var(--primary); }\n.nav-item svg { width: 16px; height: 16px; flex-shrink: 0; }\n.nav-section { padding: 14px 10px 4px; font-size: 10px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: .08em; }\n.sidebar-footer { padding: 14px 10px; border-top: 1px solid var(--border); }\n\n/* Main */\n.main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }\n.topbar {\n height: 56px; flex-shrink: 0;\n border-bottom: 1px solid var(--border);\n display: flex; align-items: center; justify-content: space-between;\n padding: 0 24px;\n background: var(--surface);\n}\n.topbar-title { font-size: 16px; font-weight: 700; }\n.topbar-actions { display: flex; align-items: center; gap: 10px; }\n.content { flex: 1; overflow-y: auto; padding: 24px; }\n\n/* Grid */\n.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }\n.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }\n.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }\n.grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }\n\n/* Account card */\n.account-card {\n background: var(--surface);\n border: 1px solid var(--border);\n border-radius: var(--radius);\n padding: 16px;\n transition: border-color 200ms, transform 150ms;\n cursor: pointer;\n}\n.account-card:hover { border-color: var(--primary); transform: translateY(-2px); }\n.account-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }\n.account-card-info { flex: 1; min-width: 0; }\n.account-card-name { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.account-card-user { font-size: 12px; color: var(--text2); }\n.account-card-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }\n.account-card-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }\n.acc-stat { text-align: center; }\n.acc-stat-num { font-size: 16px; font-weight: 800; color: var(--primary); }\n.acc-stat-label { font-size: 10px; color: var(--text3); text-transform: uppercase; }\n.account-card-actions { margin-top: 12px; display: flex; gap: 6px; }\n\n/* Platform icons (emoji fallback) */\n.platform-icon { font-size: 18px; }\n\n/* Charts */\n.chart-wrap { height: 200px; }\n\n/* Empty state */\n.empty { padding: 60px 20px; text-align: center; color: var(--text3); }\n.empty-icon { font-size: 48px; margin-bottom: 16px; }\n.empty-title { font-size: 18px; font-weight: 700; color: var(--text2); margin-bottom: 6px; }\n.empty-sub { font-size: 13px; }\n\n/* Tag */\n.tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; background: var(--surface2); color: var(--text2); border: 1px solid var(--border); }\n\n/* Divider */\n.divider { border: none; border-top: 1px solid var(--border); margin: 0; }\n\n/* Activity feed */\n.activity-item {\n display: flex; gap: 12px; padding: 12px 0;\n border-bottom: 1px solid #161624;\n}\n.activity-item:last-child { border-bottom: none; }\n.activity-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }\n\n/* Animations */\n@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }\n@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }\n@keyframes slideIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }\n\n/* Spinner */\n.spinner {\n width: 20px; height: 20px;\n border: 2px solid var(--border);\n border-top-color: var(--primary);\n border-radius: 50%;\n animation: spin .6s linear infinite;\n display: inline-block;\n}\n@keyframes spin { to { transform: rotate(360deg); } }\n\n/* Heading */\nh1 { font-size: 24px; font-weight: 800; }\nh2 { font-size: 18px; font-weight: 700; }\nh3 { font-size: 15px; font-weight: 700; }\n\n/* Flex helpers */\n.flex { display: flex; }\n.flex-col { flex-direction: column; }\n.items-center { align-items: center; }\n.justify-between { justify-content: space-between; }\n.gap-2 { gap: 8px; }\n.gap-3 { gap: 12px; }\n.gap-4 { gap: 16px; }\n.flex-1 { flex: 1; }\n.mt-4 { margin-top: 16px; }\n.mb-4 { margin-bottom: 16px; }\n",[],[168,363],["D",1775438477550],[184,185,186],[168],["D",1775438052675],{"_98":97,"_105":101},{"_98":97,"_99":-5,"_100":101,"_19":58,"_102":103,"_104":30},{"_13":87,"_37":88,"_47":46,"_89":48,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":49,"_96":97},"ctx",{"_80":-5,"_125":410,"_411":412,"_413":414,"_415":30,"_416":30,"_417":30,"_418":139,"_419":-5,"_420":-7,"_421":-7,"_422":64,"_423":30,"_424":30,"_425":-5,"_426":30,"_427":30,"_428":30,"_429":-5},"ENV",{"_381":382,"_383":384,"_385":88,"_386":387,"_388":389,"_390":391,"_392":393,"_394":395,"_396":397,"_398":399,"_400":401,"_402":403,"_404":405,"_406":407,"_408":409},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v22