:root{--bg-color: #0a0a0a;--bg-secondary: #141414;--bg-card: #1a1a1a;--bg-card-hover: #222;--text-color: #ffffff;--text-secondary: #888;--text-muted: #555;--accent-color: #fe2c55;--accent-success: #22c55e;--accent-warning: #f59e0b;--accent-error: #ef4444;--border-color: #2a2a2a;--telegram-color: #0088cc;--web-color: #8b5cf6;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--header-height: 56px;--tab-bar-height: 64px;--safe-bottom: env(safe-area-inset-bottom, 0px);--content-padding: 16px;--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-size-xs: 11px;--font-size-sm: 13px;--font-size-md: 15px;--font-size-lg: 18px;--font-size-xl: 24px;--font-size-2xl: 32px;--font-size-3xl: 48px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px;--shadow-card: 0 2px 8px rgba(0, 0, 0, .3);--shadow-elevated: 0 4px 16px rgba(0, 0, 0, .4);--transition-fast: .15s ease;--transition-normal: .25s ease;--transition-slow: .4s ease}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;font-family:var(--font-family);font-size:var(--font-size-md);background:var(--bg-color);color:var(--text-color);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}#app{min-height:100%;display:flex;flex-direction:column}.login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--spacing-lg);background:var(--bg-color)}.login-box{width:100%;max-width:320px;text-align:center}.login-logo{font-size:var(--font-size-3xl);font-weight:700;letter-spacing:-2px;margin-bottom:var(--spacing-xs)}.login-subtitle{color:var(--text-secondary);margin-bottom:var(--spacing-xl);font-size:var(--font-size-sm)}.login-form{display:flex;flex-direction:column;gap:var(--spacing-md)}.login-form input{padding:var(--spacing-md);border:1px solid var(--border-color);border-radius:var(--radius-md);background:var(--bg-card);color:var(--text-color);font-size:var(--font-size-md);text-align:center;outline:none;transition:border-color var(--transition-fast)}.login-form input:focus{border-color:var(--accent-color)}.login-form button{padding:var(--spacing-md);border:none;border-radius:var(--radius-md);background:var(--accent-color);color:#fff;font-size:var(--font-size-md);font-weight:600;cursor:pointer;transition:opacity var(--transition-fast)}.login-form button:active{opacity:.8}.login-error{color:var(--accent-error);font-size:var(--font-size-sm);min-height:20px}.dashboard{display:flex;flex-direction:column;min-height:100vh;padding-bottom:calc(var(--tab-bar-height) + var(--safe-bottom))}.header{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;height:var(--header-height);padding:0 var(--content-padding);background:var(--bg-color);border-bottom:1px solid var(--border-color)}.header-title{font-size:var(--font-size-lg);font-weight:700;letter-spacing:-.5px}.header-actions{display:flex;gap:var(--spacing-sm)}.header-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:none;border-radius:var(--radius-md);background:var(--bg-card);color:var(--text-color);cursor:pointer;transition:background var(--transition-fast)}.header-btn:active{background:var(--bg-card-hover)}.header-btn svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none}.platform-filter{display:flex;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--content-padding);background:var(--bg-color)}.platform-chip{display:flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--border-color);border-radius:var(--radius-xl);background:transparent;color:var(--text-secondary);font-size:var(--font-size-sm);cursor:pointer;transition:all var(--transition-fast)}.platform-chip.active{background:var(--text-color);color:var(--bg-color);border-color:var(--text-color)}.platform-chip svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none}.content{flex:1;padding:var(--content-padding);overflow-y:auto}.tab-bar{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:space-around;height:calc(var(--tab-bar-height) + var(--safe-bottom));padding-bottom:var(--safe-bottom);background:#0a0a0af2;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid var(--border-color);z-index:100}.tab-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:none;background:transparent;color:var(--text-muted);font-size:14px;font-weight:500;cursor:pointer;transition:color var(--transition-fast)}.tab-btn.active{color:var(--accent-color)}.tab-btn svg{width:26px;height:26px;stroke:currentColor;stroke-width:2;fill:none}.metrics-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-md);margin-bottom:var(--spacing-lg)}.metric-card{padding:var(--spacing-md);background:var(--bg-card);border-radius:var(--radius-lg);border:1px solid var(--border-color)}.metric-value{font-size:var(--font-size-2xl);font-weight:700;margin-bottom:var(--spacing-xs)}.metric-label{color:var(--text-secondary);font-size:var(--font-size-sm)}.metric-trend{display:flex;align-items:center;gap:var(--spacing-xs);margin-top:var(--spacing-sm);font-size:var(--font-size-xs)}.metric-trend.up{color:var(--accent-success)}.metric-trend.down{color:var(--accent-error)}.section{margin-bottom:var(--spacing-xl)}.section-title{font-size:var(--font-size-md);font-weight:600;margin-bottom:var(--spacing-md);color:var(--text-color)}.chart-container{background:var(--bg-card);border-radius:var(--radius-lg);border:1px solid var(--border-color);padding:var(--spacing-md);height:220px}.game-card{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-md);background:var(--bg-card);border-radius:var(--radius-md);border:1px solid var(--border-color);margin-bottom:var(--spacing-sm);cursor:pointer;transition:background var(--transition-fast)}.game-card:active{background:var(--bg-card-hover)}.game-thumb{width:48px;height:48px;border-radius:var(--radius-sm);background:var(--bg-secondary);object-fit:cover}.game-info{flex:1;min-width:0}.game-name-row{display:flex;align-items:center;gap:6px;margin-bottom:2px}.game-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ad-badge{flex-shrink:0;padding:2px 6px;background:#fbbf2433;color:#fbbf24;border-radius:4px;font-size:10px;font-weight:600;text-transform:uppercase}.game-stats{color:var(--text-secondary);font-size:var(--font-size-sm)}.game-chevron{color:var(--text-muted);transition:transform var(--transition-fast)}.game-chevron svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none}.game-card.expanded{flex-wrap:wrap}.game-card.expanded .game-chevron{transform:rotate(90deg)}.game-details{display:none;width:100%;margin-top:var(--spacing-sm);padding-top:var(--spacing-sm);border-top:1px solid var(--border-color)}.game-card.expanded .game-details{display:block}.game-detail-row{display:flex;justify-content:space-between;padding:var(--spacing-xs) 0;font-size:var(--font-size-sm);color:var(--text-secondary)}.game-detail-row span:last-child{font-weight:600;color:var(--text-color)}.game-detail-row.error span:last-child{color:var(--accent-error)}.game-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}.game-tag{display:inline-block;padding:2px 8px;background:#8b5cf626;color:var(--web-color);border-radius:10px;font-size:11px;font-weight:500}.search-wrapper{margin-bottom:var(--spacing-md)}.search-input{width:100%;padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--border-color);border-radius:var(--radius-md);background:var(--bg-card);color:var(--text-color);font-size:var(--font-size-md);outline:none;transition:border-color var(--transition-fast)}.search-input:focus{border-color:var(--accent-color)}.search-input::placeholder{color:var(--text-muted)}.games-list{min-height:100px}.load-more-wrapper{margin-top:var(--spacing-md);text-align:center}.load-more-btn{padding:var(--spacing-sm) var(--spacing-xl);border:1px solid var(--border-color);border-radius:var(--radius-md);background:var(--bg-card);color:var(--text-color);font-size:var(--font-size-sm);cursor:pointer;transition:all var(--transition-fast)}.load-more-btn:hover{background:var(--bg-card-hover)}.load-more-btn:active{transform:scale(.98)}.error-card{padding:var(--spacing-md);background:var(--bg-card);border-radius:var(--radius-md);border:1px solid var(--border-color);border-left:3px solid var(--accent-error);margin-bottom:var(--spacing-sm)}.error-message{font-family:monospace;font-size:var(--font-size-sm);color:var(--accent-error);margin-bottom:var(--spacing-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.error-meta{display:flex;align-items:center;gap:var(--spacing-sm);color:var(--text-secondary);font-size:var(--font-size-xs)}.platform-badge{display:inline-flex;align-items:center;gap:2px;padding:2px 6px;border-radius:4px;font-size:10px;font-weight:600}.platform-badge.telegram{background:#08c3;color:var(--telegram-color)}.platform-badge.web{background:#8b5cf633;color:var(--web-color)}.platform-breakdown{background:var(--bg-card);border-radius:var(--radius-md);border:1px solid var(--border-color);padding:var(--spacing-md);margin-bottom:var(--spacing-lg)}.platform-row{display:flex;align-items:center;gap:var(--spacing-md);margin-bottom:var(--spacing-md)}.platform-row:last-child{margin-bottom:0}.platform-icon{display:flex;align-items:center;gap:var(--spacing-xs);width:100px;font-size:var(--font-size-sm)}.platform-icon.telegram{color:var(--telegram-color)}.platform-icon.web{color:var(--web-color)}.platform-icon svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none}.platform-bar{flex:1;height:8px;background:var(--bg-secondary);border-radius:4px;overflow:hidden}.platform-bar-fill{height:100%;border-radius:4px;transition:width var(--transition-normal)}.platform-bar-fill.telegram{background:var(--telegram-color)}.platform-bar-fill.web{background:var(--web-color)}.platform-count{min-width:80px;text-align:right;font-size:var(--font-size-sm);color:var(--text-secondary)}.skeleton{background:linear-gradient(90deg,var(--bg-card) 25%,var(--bg-card-hover) 50%,var(--bg-card) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--radius-md)}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.date-picker-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;z-index:200;opacity:0;visibility:hidden;transition:all var(--transition-normal)}.date-picker-overlay.visible{opacity:1;visibility:visible}.date-picker-sheet{position:fixed;bottom:0;left:0;right:0;background:var(--bg-secondary);border-radius:var(--radius-xl) var(--radius-xl) 0 0;padding:var(--spacing-lg);padding-bottom:calc(var(--spacing-lg) + var(--safe-bottom));transform:translateY(100%);transition:transform var(--transition-normal);z-index:201}.date-picker-overlay.visible .date-picker-sheet{transform:translateY(0)}.date-picker-title{font-size:var(--font-size-lg);font-weight:600;text-align:center;margin-bottom:var(--spacing-lg)}.date-preset{display:flex;align-items:center;padding:var(--spacing-md);border:none;background:transparent;color:var(--text-color);font-size:var(--font-size-md);width:100%;cursor:pointer;border-radius:var(--radius-md);transition:background var(--transition-fast)}.date-preset:active{background:var(--bg-card)}.date-preset.active{color:var(--accent-color)}.date-preset-check{width:24px;margin-right:var(--spacing-md);color:var(--accent-color)}.metric-subtitle{color:var(--text-muted);font-size:var(--font-size-xs);margin-top:var(--spacing-xs)}.depth-funnel{background:var(--bg-card);border-radius:var(--radius-lg);border:1px solid var(--border-color);padding:var(--spacing-md)}.funnel-row{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-sm) 0}.funnel-row:not(:last-child){border-bottom:1px solid var(--border-color)}.funnel-label{width:90px;font-size:var(--font-size-sm);color:var(--text-secondary);flex-shrink:0}.funnel-bar-container{flex:1;height:20px;background:var(--bg-secondary);border-radius:4px;overflow:hidden}.funnel-bar{height:100%;border-radius:4px;transition:width var(--transition-normal)}.funnel-value{width:90px;text-align:right;font-size:var(--font-size-sm);font-weight:600;flex-shrink:0}.crash-row{margin-top:var(--spacing-sm);padding-top:var(--spacing-md);border-top:1px dashed var(--accent-error)}.crash-row .funnel-label,.crash-row .funnel-value{color:var(--accent-error)}@media(min-width:768px){.dashboard{padding-bottom:0}.tab-bar{position:fixed;top:0;bottom:auto;left:0;width:80px;height:100vh;flex-direction:column;justify-content:flex-start;padding:var(--spacing-lg) 0;border-top:none;border-right:1px solid var(--border-color)}.tab-btn{width:100%;height:64px}.header,.platform-filter,.content{margin-left:80px}.metrics-grid{grid-template-columns:repeat(4,1fr)}}