:root{--bg-0:#0a0a0f;--bg-1:#12121a;--bg-2:#1a1a26;--bg-3:#242433;--border:#2a2a3a;--text-0:#f4f4f8;--text-1:#c7c7d4;--text-2:#8a8aa0;--accent:#8b5cf6;--accent-dim:#7c3aed;--accent-glow:#8b5cf62e;--green:#10b981;--yellow:#f59e0b;--red:#ef4444;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px);--header-height:56px;--sidebar-width-desktop:240px;--bottom-nav-height:64px}@media (width>=1024px){:root{--header-height:64px}}*{box-sizing:border-box}html,body{width:100%;max-width:100vw;margin:0;padding:0;overflow-x:hidden}html,body,#root{background:var(--bg-0);color:var(--text-0);min-height:100vh;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:14px}input,textarea,select{font-size:16px}@media (width>=1024px){input,textarea,select{font-size:14px}}img,video{max-width:100%;height:auto}pre,code{max-width:100%;overflow-x:auto}a{color:var(--accent);text-decoration:none}a:hover{color:var(--accent-dim)}button{cursor:pointer;border-radius:var(--radius-sm);background:var(--accent);color:#fff;border:none;min-height:44px;padding:10px 16px;font-family:inherit;font-size:14px;transition:background .2s,transform .1s}button:hover:not(:disabled){background:var(--accent-dim)}button:active:not(:disabled){transform:scale(.98)}button:disabled{background:var(--bg-3);color:var(--text-2);cursor:not-allowed}button.secondary{background:var(--bg-2);color:var(--text-0);border:1px solid var(--border)}button.secondary:hover:not(:disabled){background:var(--bg-3)}button.ghost{color:var(--text-1);background:0 0}button.ghost:hover{background:var(--bg-2);color:var(--text-0)}button.danger{background:var(--red)}button.danger:hover:not(:disabled){background:#dc2626}input,textarea,select{background:var(--bg-1);color:var(--text-0);border:1px solid var(--border);border-radius:var(--radius-sm);outline:none;width:100%;min-height:44px;padding:10px 12px;font-family:inherit;transition:border-color .2s}input:focus,textarea:focus,select:focus{border-color:var(--accent)}textarea{min-height:80px}.mono{font-family:ui-monospace,SF Mono,Consolas,monospace}.tabular{font-variant-numeric:tabular-nums}.text-ellipsis{white-space:nowrap;text-overflow:ellipsis;min-width:0;overflow:hidden}.text-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.scrollable-x{-webkit-overflow-scrolling:touch;scrollbar-width:thin;overflow-x:auto}.scrollable-x::-webkit-scrollbar{height:4px}.scrollable-x::-webkit-scrollbar-thumb{background:var(--bg-3);border-radius:2px}.touch-target{min-width:44px;min-height:44px}.hide-mobile{display:none}@media (width>=1024px){.hide-mobile{display:initial}.hide-desktop{display:none}}.app-shell{min-height:100dvh;display:flex}.sidebar{width:var(--sidebar-width-desktop);background:var(--bg-1);border-right:1px solid var(--border);padding:20px 0;padding-left:var(--safe-left);flex-direction:column;flex-shrink:0;height:100dvh;display:flex;position:sticky;top:0}@media (width<=1023px){.sidebar{display:none}}.sidebar-brand{border-bottom:1px solid var(--border);margin-bottom:12px;padding:0 20px 20px}.sidebar-brand-title{color:var(--text-0);font-size:18px;font-weight:600}.sidebar-brand-subtitle{color:var(--text-2);letter-spacing:.5px;text-transform:uppercase;margin-top:2px;font-size:11px}.sidebar-nav{flex:1;padding:0 8px;overflow-y:auto}.nav-item{border-radius:var(--radius-sm);min-height:44px;color:var(--text-1);cursor:pointer;-webkit-user-select:none;user-select:none;border-left:3px solid #0000;align-items:center;gap:10px;margin-bottom:2px;padding:10px 12px;font-size:13px;transition:all .2s;display:flex}.nav-item:hover:not(.disabled){background:var(--bg-2);color:var(--text-0)}.nav-item.active{background:var(--accent-glow);color:var(--text-0);border-left-color:var(--accent)}.nav-item.disabled{color:var(--text-2);cursor:not-allowed;opacity:.5}.nav-icon{text-align:center;flex-shrink:0;width:20px;display:inline-block}.nav-label{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.sidebar-footer{padding:16px 20px;padding-bottom:calc(16px + var(--safe-bottom));border-top:1px solid var(--border);color:var(--text-2);font-size:12px}.main{flex:1;min-width:0;max-width:100%;padding:24px 28px;overflow-x:hidden}@media (width<=1023px){.main{padding:16px;padding-top:calc(var(--header-height) + var(--safe-top) + 12px);padding-bottom:calc(var(--bottom-nav-height) + var(--safe-bottom) + 12px);padding-left:calc(16px + var(--safe-left));padding-right:calc(16px + var(--safe-right));width:100%}}.page-header{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:10px;margin-bottom:20px;display:flex}.page-title{color:var(--text-0);font-size:24px;font-weight:700}.page-subtitle{color:var(--text-2);opacity:.7;margin-top:2px;font-size:12px}.top-bar{display:none}@media (width<=1023px){.top-bar{z-index:50;height:calc(var(--header-height) + var(--safe-top));padding-top:var(--safe-top);padding-left:calc(12px + var(--safe-left));padding-right:calc(12px + var(--safe-right));background:var(--bg-1);border-bottom:1px solid var(--border);align-items:center;gap:12px;display:flex;position:fixed;top:0;left:0;right:0}.top-bar-title{text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:16px;font-weight:600;overflow:hidden}.top-bar-button{color:var(--text-0);border-radius:var(--radius-sm);background:0 0;min-width:40px;min-height:40px;padding:8px;font-size:22px;line-height:1}.top-bar-button:hover{background:var(--bg-2)}}.bottom-nav{display:none}@media (width<=1023px){.bottom-nav{z-index:50;height:calc(var(--bottom-nav-height) + var(--safe-bottom));padding-bottom:var(--safe-bottom);background:var(--bg-1);border-top:1px solid var(--border);grid-template-columns:repeat(5,1fr);display:grid;position:fixed;bottom:0;left:0;right:0}.bottom-nav-item{color:var(--text-2);cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:2px;min-height:44px;padding:4px;font-size:10px;transition:color .15s;display:flex}.bottom-nav-item.active{color:var(--accent)}.bottom-nav-item-icon{font-size:20px;line-height:1}.bottom-nav-item-label{white-space:nowrap;letter-spacing:.2px;font-size:10px;line-height:1}}.drawer-backdrop{z-index:90;opacity:0;pointer-events:none;background:#00000080;transition:opacity .2s;position:fixed;inset:0}.drawer-backdrop.open{opacity:1;pointer-events:auto}.drawer-panel{background:var(--bg-1);z-index:91;width:280px;max-width:80vw;padding-top:var(--safe-top);padding-left:var(--safe-left);padding-bottom:var(--safe-bottom);flex-direction:column;transition:transform .25s cubic-bezier(.2,.8,.2,1);display:flex;position:fixed;top:0;bottom:0;left:0;transform:translate(-100%)}.drawer-panel.open{transform:translate(0)}.sheet-backdrop{z-index:100;opacity:0;pointer-events:none;background:#00000080;transition:opacity .2s;position:fixed;inset:0}.sheet-backdrop.open{opacity:1;pointer-events:auto}.sheet-panel{z-index:101;background:var(--bg-1);max-height:90dvh;padding-bottom:var(--safe-bottom);border-top-left-radius:20px;border-top-right-radius:20px;flex-direction:column;transition:transform .28s cubic-bezier(.2,.8,.2,1);display:flex;position:fixed;bottom:0;left:0;right:0;overflow:hidden;transform:translateY(100%)}.sheet-panel.open{transform:translateY(0)}.sheet-handle{background:var(--bg-3);border-radius:2px;flex-shrink:0;width:40px;height:4px;margin:10px auto 0}.sheet-header{flex-shrink:0;padding:12px 20px 8px;font-size:16px;font-weight:600}.sheet-body{-webkit-overflow-scrolling:touch;flex:1;padding:8px 20px 20px;overflow-y:auto}@media (width>=1024px){.sheet-backdrop.open{justify-content:center;align-items:center;display:flex}.sheet-panel{opacity:0;pointer-events:none;border-radius:var(--radius-lg);width:calc(100% - 40px);max-width:480px;max-height:85vh;position:fixed;inset:50% auto auto 50%;transform:translate(-50%,-50%)scale(.97)}.sheet-panel.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)scale(1)}.sheet-handle{display:none}}.metric-grid{grid-template-columns:repeat(2,1fr);gap:10px;display:grid}@media (width>=360px) and (width<=767px){.metric-grid{gap:12px}}@media (width>=768px){.metric-grid{grid-template-columns:repeat(3,1fr);gap:14px}}@media (width>=1024px){.metric-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}}.metric-card{background:var(--bg-1);border:1px solid var(--border);border-radius:var(--radius-md);min-width:0;min-height:96px;padding:14px;position:relative;overflow:hidden}@media (width>=1024px){.metric-card{min-height:120px;padding:20px}}.metric-card-label{color:var(--text-2);-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:12px;line-height:1.3;display:-webkit-box;overflow:hidden}@media (width>=1024px){.metric-card-label{text-transform:uppercase;letter-spacing:.5px;-webkit-line-clamp:1;font-size:11px}}.metric-card-value{color:var(--text-0);font-variant-numeric:tabular-nums;margin-top:8px;font-size:28px;font-weight:700;line-height:1.1}@media (width>=1024px){.metric-card-value{font-size:36px;font-weight:600}}.metric-card-subtitle{color:var(--text-2);margin-top:4px;font-size:11px}.metric-card-bar{background:var(--accent);height:3px;position:absolute;bottom:0;left:0;right:0}.metric-card-bar.green{background:var(--green)}.metric-card-bar.yellow{background:var(--yellow)}.metric-card-bar.red{background:var(--red)}.skeleton{background:linear-gradient(90deg, var(--bg-1) 0%, var(--bg-2) 50%, var(--bg-1) 100%);border-radius:var(--radius-sm);background-size:200% 100%;animation:1.4s infinite shimmer}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.login-container{min-height:100dvh;padding:calc(20px + var(--safe-top)) calc(16px + var(--safe-right)) calc(20px + var(--safe-bottom)) calc(16px + var(--safe-left));justify-content:center;align-items:center;display:flex}.login-card{background:var(--bg-1);border:1px solid var(--border);border-radius:var(--radius-lg);width:100%;max-width:400px;padding:24px}@media (width>=1024px){.login-card{max-width:360px;padding:32px}}.login-title{margin-bottom:4px;font-size:24px;font-weight:600}.login-subtitle{color:var(--text-2);margin-bottom:24px;font-size:13px}.login-field{margin-bottom:14px}.login-field label{color:var(--text-2);margin-bottom:6px;font-size:12px;display:block}.login-field input{height:48px}.login-error{color:var(--red);border-radius:var(--radius-sm);background:#ef444414;margin-top:12px;padding:10px;font-size:13px}.login-submit{width:100%;min-height:48px;margin-top:8px;padding:14px;font-weight:500}.topbar{border-bottom:1px solid var(--border);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-bottom:20px;padding-bottom:16px;display:flex}.topbar-user{color:var(--text-1);font-size:13px}.topbar-user .username{color:var(--text-0);font-weight:500}.topbar-user .role{color:var(--text-2);text-transform:uppercase;letter-spacing:.5px;margin-left:8px;font-size:11px}.qr-block{background:var(--bg-2);border-radius:var(--radius-md);flex-direction:column;align-items:center;margin:16px 0;padding:16px;display:flex}.qr-block img{border-radius:var(--radius-sm);background:#fff;width:70vw;max-width:280px;height:auto;padding:8px}@media (width>=1024px){.qr-block img{width:220px}}.qr-secret{color:var(--text-2);letter-spacing:1px;word-break:break-all;text-align:center;max-width:100%;margin-top:12px;font-family:ui-monospace,monospace;font-size:13px}.backup-codes-box{border:2px solid var(--yellow);border-radius:var(--radius-md);background:#f59e0b0f;margin:16px 0;padding:16px}.backup-codes-warn{color:var(--yellow);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;font-size:12px;font-weight:500}.backup-codes-grid{color:var(--text-0);letter-spacing:1px;grid-template-columns:repeat(2,1fr);gap:6px;font-family:ui-monospace,monospace;font-size:13px;display:grid}@media (width>=1024px){.backup-codes-grid{grid-template-columns:repeat(4,1fr)}}.totp-input input{letter-spacing:6px;text-align:center;height:56px;padding:16px;font-family:ui-monospace,monospace;font-size:28px}.toast{bottom:calc(16px + var(--safe-bottom));right:calc(16px + var(--safe-right));left:calc(16px + var(--safe-left));background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-md);max-width:400px;color:var(--text-0);z-index:1000;margin-left:auto;padding:12px 16px;font-size:13px;position:fixed;box-shadow:0 8px 24px #0006}@media (width<=1023px){.toast{bottom:calc(var(--bottom-nav-height) + var(--safe-bottom) + 16px)}}.toast.error{border-color:var(--red)}.toast.success{border-color:var(--green)}.card{background:var(--bg-1);border:1px solid var(--border);border-radius:var(--radius-md);overflow-wrap:break-word;min-width:0;max-width:100%;margin-bottom:16px;padding:16px}@media (width>=1024px){.card{margin-bottom:20px;padding:24px}}.card h2{margin-top:0;margin-bottom:8px;font-size:16px}.card h3{margin-top:0;margin-bottom:8px;font-size:14px}.card p{color:var(--text-1);margin:8px 0;line-height:1.5}.row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.row>*{flex:auto}.users-table-wrap{background:var(--bg-1);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden}.users-table{border-collapse:collapse;width:100%;display:table}@media (width<=1023px){.users-table-wrap{background:0 0;border:none;border-radius:0}.users-table,.users-table thead,.users-table tbody,.users-table tr,.users-table th,.users-table td{display:block}.users-table thead{display:none}.users-table tr{background:var(--bg-1);border:1px solid var(--border);border-radius:var(--radius-md);grid-template-columns:48px 1fr auto;grid-template-areas:"photo name meta""photo badges badges""photo stats stats";align-items:start;gap:8px;margin-bottom:12px;padding:12px;display:grid}.users-table td{border:none;padding:0}.users-table td[data-cell=photo]{grid-area:photo}.users-table td[data-cell=photo] img,.users-table td[data-cell=photo]>div{width:48px!important;height:48px!important}.users-table td[data-cell=name]{grid-area:name;font-size:15px;font-weight:500}.users-table td[data-cell=username]{display:none}.users-table td[data-cell=age],.users-table td[data-cell=city]{color:var(--text-2);text-align:right;grid-area:meta;justify-self:end;font-size:11px}.users-table td[data-cell=city]{display:none}.users-table td[data-cell=tier],.users-table td[data-cell=status]{flex-wrap:wrap;grid-area:badges;gap:4px;font-size:11px;display:flex}.users-table td[data-cell=status]{grid-row:badges}.users-table td[data-cell=matches],.users-table td[data-cell=reports],.users-table td[data-cell=last_seen],.users-table td[data-cell=created]{color:var(--text-2);grid-area:stats;font-size:11px;display:inline-block}.users-table td[data-cell=matches]:before{content:"💬 "}.users-table td[data-cell=reports]:before{content:"⚑ ";margin-left:8px}.users-table td[data-cell=last_seen]:before{content:" · seen "}.users-table td[data-cell=created]:before{content:" · reg "}}.user-detail-header-actions{flex-wrap:wrap;justify-content:flex-end;gap:6px;display:flex}@media (width<=1023px){.user-detail-header-actions{justify-content:stretch;width:100%}.user-detail-header-actions button{flex:calc(50% - 3px);font-size:12px}}.user-detail-grid{grid-template-columns:320px 1fr;gap:16px;display:grid}@media (width<=1023px){.user-detail-grid{grid-template-columns:1fr;gap:12px}}.user-detail-tabs{border-bottom:1px solid var(--border);-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scrollbar-width:none;gap:4px;margin-bottom:12px;display:flex;overflow-x:auto}.user-detail-tabs::-webkit-scrollbar{display:none}.user-detail-tab{cursor:pointer;color:var(--text-2);white-space:nowrap;scroll-snap-align:center;border-bottom:2px solid #0000;flex-shrink:0;align-items:center;gap:4px;min-height:44px;padding:10px 14px;font-size:13px;display:flex}.user-detail-tab.active{border-bottom-color:var(--accent);color:var(--text-0)}.user-detail-sidebar{flex-direction:column;gap:12px;display:flex}@media (width<=1023px){.user-detail-sidebar .card details summary{cursor:pointer;color:var(--text-0);justify-content:space-between;align-items:center;padding:4px 0;font-size:14px;list-style:none;display:flex}.user-detail-sidebar .card details summary:after{content:"▾";color:var(--text-2);transition:transform .2s}.user-detail-sidebar .card details[open] summary:after{transform:rotate(180deg)}}.chat-bubble{word-wrap:break-word;overflow-wrap:break-word;word-break:break-word;max-width:80%}.media-grid{grid-template-columns:repeat(2,1fr);gap:8px;display:grid}@media (width>=480px){.media-grid{grid-template-columns:repeat(3,1fr)}}@media (width>=768px){.media-grid{grid-template-columns:repeat(4,1fr)}}@media (width>=1024px){.media-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}}.chip-row{-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:6px;padding:2px 0 10px;display:flex;overflow-x:auto}.chip-row::-webkit-scrollbar{display:none}.chip-row>*{flex-shrink:0}.filter-row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}@media (width<=767px){.filter-row{flex-direction:column;align-items:stretch;gap:8px}.filter-row>input,.filter-row>select{width:100%}}.modal-actions{gap:10px;margin-top:16px;display:flex}.modal-actions button{flex:1}body.no-scroll{overflow:hidden}.chats-grid{grid-template-columns:280px 1fr;gap:12px;display:grid}@media (width<=767px){.chats-grid{grid-template-columns:1fr}.chats-grid>div:first-child{max-height:200px!important}}.feed-preview-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;display:grid}@media (width<=767px){.feed-preview-grid{grid-template-columns:repeat(2,1fr);gap:8px}}.text-wrap{overflow-wrap:break-word;word-break:break-word;min-width:0}