:root{--outs-primary:#3b82f6;--outs-success:#10b981;--outs-warning:#f59e0b;--outs-text-primary:#1a202c;--outs-text-secondary:#64748b;--outs-text-muted:#94a3b8;--outs-bg-primary:#fff;--outs-bg-secondary:#fafbfc;--outs-border:rgba(0,0,0,.06);--outs-border-hover:rgba(59,130,246,.2);--outs-shadow-sm:0 2px 8px rgba(0,0,0,.04),0 1px 2px rgba(0,0,0,.06);--outs-shadow-md:0 8px 25px rgba(0,0,0,.08),0 3px 6px rgba(0,0,0,.1);--outs-radius:12px;--outs-radius-sm:8px;--outs-transition:all .2s cubic-bezier(.4,0,.2,1)}.online-users-tracker-widget{background:var(--outs-bg-primary);border-radius:var(--outs-radius);padding:24px;margin-bottom:24px;box-shadow:var(--outs-shadow-sm);border:1px solid var(--outs-border);transition:var(--outs-transition);position:relative;overflow:hidden}.online-users-tracker-widget:hover{transform:translateY(-2px);box-shadow:var(--outs-shadow-md)}.online-users-tracker-widget .widget-title{font-size:16px;font-weight:600;color:var(--outs-text-primary);margin:0 0 20px;display:flex;align-items:center;gap:8px}.online-users-tracker-widget .widget-title:before{content:'👥';font-size:18px}.online-users-stats{margin-bottom:24px;padding:0;background:0 0}.online-users-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0;padding:10px 0}.online-user-item.fake-visitor{opacity:.85}.online-user-item.fake-visitor .user-avatar{filter:brightness(.95)}.online-user-item.fake-visitor .user-name{color:#888}.online-user-item{display:flex;flex-direction:column;align-items:center;text-align:center;padding:6px;background:0 0;border:none;transition:all .3s ease;position:relative}.online-user-item:hover{transform:translateY(-2px)}.user-avatar{width:40px;height:40px;border-radius:50%;margin-bottom:4px;border:2px solid #fff;box-shadow:0 1px 1px rgba(0,0,0,.05),0 2px 2px rgba(0,0,0,.05),0 4px 4px rgba(0,0,0,.05),0 6px 6px rgba(0,0,0,.06);transition:all .4s cubic-bezier(.16,1,.3,1);object-fit:cover}.online-user-item .user-avatar{position:relative}.online-user-item:hover .user-avatar{transform:scale(1.05);box-shadow:0 2px 2px rgba(0,0,0,.06),0 4px 4px rgba(0,0,0,.06),0 8px 8px rgba(0,0,0,.07),0 12px 12px rgba(0,0,0,.08)}.online-user-item:after{content:'';position:absolute;top:28px;right:calc(50% - 20px);width:12px;height:12px;background:linear-gradient(135deg,#4caf50 0%,#81c784 100%);border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px rgba(76,175,80,.2),0 0 0 2px rgba(76,175,80,.15);animation:pulse 1.5s infinite;z-index:2}.online-user-item[data-user-type=visitor]:after{background:linear-gradient(135deg,#ffb74d 0%,#ffcc80 100%);box-shadow:0 0 0 1px rgba(255,183,77,.2),0 0 0 2px rgba(255,183,77,.15)}.user-info{width:100%}.user-name{font-size:11px;font-weight:500;color:#1a202c;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2}.more-users{text-align:center;padding:16px;background:rgba(148,163,184,.05);border-radius:12px;color:#64748b;font-size:13px;border:1px solid rgba(148,163,184,.1);margin-top:16px;transition:all .2s ease}.more-users:hover{background:rgba(148,163,184,.08)}.no-users{text-align:center;padding:48px 24px;color:#94a3b8;background:rgba(148,163,184,.03);border-radius:12px;border:1px solid rgba(148,163,184,.1)}.no-users:before{content:'😴';display:block;font-size:40px;margin-bottom:12px;opacity:.6}.last-update{text-align:center;font-size:11px;color:#94a3b8;margin-top:20px;padding-top:16px;border-top:1px solid rgba(148,163,184,.1)}@media (max-width:768px){.online-users-list{grid-template-columns:repeat(auto-fit,minmax(55px,1fr)) !important;max-width:calc(4*55px + 3*6px);gap:6px}.online-user-item{padding:4px}.user-avatar{width:36px;height:36px}.online-user-item:after{top:24px;right:calc(50% - 18px);width:10px;height:10px}.user-name{font-size:10px}}@media (max-width:480px){.online-users-tracker-widget{padding:20px 16px;margin-bottom:20px;border-radius:16px}.online-users-list{grid-template-columns:repeat(auto-fit,minmax(50px,1fr)) !important;max-width:calc(3*50px + 2*5px);gap:5px}.user-avatar{width:32px;height:32px}.online-user-item:after{top:20px;right:calc(50% - 16px);width:8px;height:8px}.user-name{font-size:9px}.online-time{font-size:8px;padding:2px 6px}}@keyframes slideInUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%{transform:scale(.95);box-shadow:0 0 0 0 rgba(76,175,80,.4),0 0 0 1px rgba(76,175,80,.3)}70%{transform:scale(1.05);box-shadow:0 0 0 4px rgba(76,175,80,.1),0 0 0 6px rgba(76,175,80,0)}100%{transform:scale(.95);box-shadow:0 0 0 0 rgba(76,175,80,0),0 0 0 1px rgba(76,175,80,.1)}}.online-users-list.updating{opacity:.7;transform:scale(.98);transition:all .3s ease}.online-users-list{transition:all .3s ease}.more-users{grid-column:1/-1;text-align:center;font-size:11px;color:#666;padding:8px;background:rgba(0,0,0,.02);border-radius:6px;margin-top:8px}.online-users-count,.online-users-count-users,.online-users-count-visitors{transition:all .3s ease}.online-users-count.updating,.online-users-count-users.updating,.online-users-count-visitors.updating{transform:scale(1.1);color:#3b82f6}.online-user-item{animation:slideInUp .4s cubic-bezier(.4,0,.2,1) forwards;opacity:0}.online-user-item:nth-child(1){animation-delay:.05s}.online-user-item:nth-child(2){animation-delay:.1s}.online-user-item:nth-child(3){animation-delay:.15s}.online-user-item:nth-child(4){animation-delay:.2s}.online-user-item:nth-child(5){animation-delay:.25s}.online-user-item:nth-child(6){animation-delay:.3s}@media (prefers-color-scheme:dark){.online-users-tracker-widget{background:#1e293b;color:#e2e8f0;border-color:rgba(148,163,184,.1)}.online-users-tracker-widget .widget-title{color:#f1f5f9}.online-user-item{color:#e2e8f0}.user-name{color:#f1f5f9}.online-time{background:rgba(148,163,184,.2);color:#cbd5e1;border-color:rgba(148,163,184,.3)}.more-users{background:rgba(148,163,184,.1);border-color:rgba(148,163,184,.2);color:#cbd5e1}.no-users{background:rgba(148,163,184,.05);border-color:rgba(148,163,184,.1);color:#94a3b8}.last-update{border-color:rgba(148,163,184,.2);color:#94a3b8}.total-count{background:rgba(59,130,246,.2);color:#93c5fd;border-color:rgba(59,130,246,.3)}.user-count{background:rgba(16,185,129,.2);color:#6ee7b7;border-color:rgba(16,185,129,.3)}.visitor-count{background:rgba(245,158,11,.2);color:#fbbf24;border-color:rgba(245,158,11,.3)}}@media print{.online-users-tracker-widget{box-shadow:none;border:1px solid #ddd;background:#fff !important;color:#000 !important}.online-user-item{break-inside:avoid;color:#000 !important}.user-avatar{filter:grayscale(100%)}.user-name{color:#000 !important}.online-time{background:#f5f5f5 !important;color:#666 !important}}.online-users-tracker-widget::-webkit-scrollbar{width:6px}.online-users-tracker-widget::-webkit-scrollbar-track{background:rgba(148,163,184,.1);border-radius:3px}.online-users-tracker-widget::-webkit-scrollbar-thumb{background:rgba(148,163,184,.3);border-radius:3px;transition:background .2s ease}.online-users-tracker-widget::-webkit-scrollbar-thumb:hover{background:rgba(148,163,184,.5)}.online-user-item:focus{outline:2px solid var(--outs-primary);outline-offset:2px}@media (prefers-reduced-motion:reduce){.online-user-item,.online-users-tracker-widget{animation:none;transition:none}}@media (prefers-contrast:high){.online-users-tracker-widget{border:2px solid #000}.user-name{color:#000;font-weight:700}}