*{margin:0;padding:0;box-sizing:border-box}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:#0b1120;color:#e2e8f0;min-height:100vh}header{padding:.75rem 2rem;border-bottom:1px solid #1e293b;display:flex;align-items:center;justify-content:space-between;background:#0f172a;gap:1rem}.header-left,.header-center,.header-right{display:flex;align-items:center;gap:.75rem}.header-center{flex:1;justify-content:center}header h1{font-size:1.1rem;font-weight:700;letter-spacing:-.02em;background:linear-gradient(135deg,#8b5cf6,#6366f1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.api-badge{display:flex;align-items:center;gap:.35rem;font-size:.7rem;padding:.2rem .5rem;border-radius:100px;text-transform:uppercase;letter-spacing:.05em;font-weight:600}.api-badge .dot{width:6px;height:6px;border-radius:50%}.api-badge.online{background:#10b9811a;color:#34d399}.api-badge.online .dot{background:#34d399}.api-badge.offline{background:#ef44441a;color:#f87171}.api-badge.offline .dot{background:#f87171}.api-badge.checking{background:#f59e0b1a;color:#fbbf24}.api-badge.checking .dot{background:#fbbf24}.btn-retry{display:flex;align-items:center;gap:.35rem;background:#1e293b;color:#94a3b8;border:1px solid #334155;padding:.4rem .75rem;border-radius:6px;font-size:.8rem;cursor:pointer;transition:all .15s}.btn-retry:hover:not(:disabled){background:#059669;color:#fff;border-color:#059669}.btn-retry:disabled{opacity:.4;cursor:not-allowed}.toast{position:fixed;top:1rem;right:1rem;z-index:100;padding:.6rem 1rem;background:#065f46;color:#6ee7b7;border-radius:8px;font-size:.85rem;border:1px solid #047857;box-shadow:0 4px 12px #0000004d;animation:slideIn .3s ease}.toast.error{background:#7f1d1d;color:#fca5a5;border-color:#991b1b}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}nav{display:flex;gap:.25rem;background:#1e293b;padding:.25rem;border-radius:8px}nav button{background:transparent;color:#64748b;border:none;padding:.45rem 1rem;border-radius:6px;cursor:pointer;font-size:.85rem;font-weight:500;transition:all .15s}nav button:hover{color:#e2e8f0}nav button.active{background:#8b5cf6;color:#fff}main{padding:1.5rem 2rem;max-width:1200px;margin:0 auto}.section{margin-bottom:1.5rem}.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.section-header h2{font-size:1rem;font-weight:600;color:#f1f5f9}.header-actions{display:flex;align-items:center;gap:.75rem}.demo-toggle{display:flex;align-items:center;gap:.4rem;font-size:.8rem;color:#64748b;cursor:pointer;-webkit-user-select:none;user-select:none}.demo-toggle input{accent-color:#8b5cf6}.btn-refresh{display:flex;align-items:center;gap:.35rem;background:#1e293b;color:#94a3b8;border:1px solid #334155;padding:.35rem .75rem;border-radius:6px;font-size:.8rem;cursor:pointer;transition:all .15s}.btn-refresh:hover:not(:disabled){background:#334155;color:#e2e8f0;border-color:#475569}.btn-refresh:disabled{opacity:.5;cursor:not-allowed}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}.card{background:#1e293b;border-radius:12px;border:1px solid #1e293b;transition:border-color .15s,transform .15s}.stat-card{padding:1.25rem;display:flex;align-items:flex-start;gap:1rem;position:relative}.stat-card:hover{border-color:#334155}.stat-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}.stat-icon.visits{background:#8b5cf626}.stat-icon.conversions{background:#10b98126}.stat-icon.rate{background:#f59e0b26}.stat-content{flex:1;display:flex;flex-direction:column;gap:.25rem}.stat-content .label{font-size:.8rem;color:#64748b;font-weight:500}.stat-content .value{font-size:1.75rem;font-weight:700;letter-spacing:-.02em;line-height:1.1}.trend{font-size:.75rem;padding:.15rem .4rem;border-radius:4px;white-space:nowrap;position:absolute;top:1rem;right:1rem}.trend.up{background:#10b9811a;color:#34d399}.trend.neutral{background:#64748b1a;color:#94a3b8}.chart-box{background:#1e293b;border-radius:12px;padding:1.25rem;border:1px solid #1e293b}table{width:100%;border-collapse:collapse;background:#1e293b;border-radius:12px;overflow:hidden;border:1px solid #1e293b}thead{background:#0f172a}th{padding:.7rem 1rem;text-align:left;font-size:.8rem;color:#64748b;font-weight:500;border-bottom:1px solid #1e293b;text-transform:uppercase;letter-spacing:.05em}th.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}th.sortable:hover{color:#94a3b8}td{padding:.75rem 1rem;font-size:.9rem;border-bottom:1px solid #1e293b}tr:last-child td{border-bottom:none}tr:hover td{background:#3341554d}.source-cell{display:flex;align-items:center;gap:.5rem}.source-icon{font-size:1rem}.source-name{font-weight:500}.num{font-variant-numeric:tabular-nums;text-align:right}.bar-cell{width:35%}.bar-track{height:6px;background:#334155;border-radius:3px;overflow:hidden}.bar-fill{height:100%;background:linear-gradient(90deg,#8b5cf6,#6366f1);border-radius:3px;transition:width .4s ease}.empty-cell{text-align:center!important;color:#475569;padding:2rem!important}.skeleton .card{pointer-events:none}.skeleton-card{padding:1.25rem;display:flex;flex-direction:column;gap:.75rem}.skel-line{height:12px;width:60%;background:#334155;border-radius:4px;animation:pulse 1.5s infinite}.skel-value{height:28px;width:40%;background:#334155;border-radius:6px;animation:pulse 1.5s infinite .2s}.chart-placeholder{background:#1e293b;border-radius:12px;padding:1.25rem;border:1px solid #1e293b;height:350px}.skeleton-chart{height:100%;background:linear-gradient(90deg,#1e293b 25%,#334155,#1e293b 75%);background-size:200% 100%;border-radius:8px;animation:shimmer 1.5s infinite}.table-skeleton{background:#1e293b;border-radius:12px;padding:.75rem 1rem;border:1px solid #1e293b;overflow:hidden}.skel-row{padding:.75rem 0;border-bottom:1px solid #1e293b}.skel-row:last-child{border-bottom:none}.skel-bar{height:16px;width:40%;background:#334155;border-radius:4px;animation:pulse 1.5s infinite .1s}@keyframes pulse{0%,to{opacity:.4}50%{opacity:.7}}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.spinner{display:inline-block;width:12px;height:12px;border:2px solid #64748b;border-top:2px solid #8b5cf6;border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error-banner{margin-top:.75rem;padding:.6rem 1rem;background:#ef44441a;border:1px solid rgba(239,68,68,.2);border-radius:8px;color:#f87171;font-size:.85rem}.error-banner a{color:#fbbf24;text-decoration:underline;cursor:pointer}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:#0f172a}::-webkit-scrollbar-thumb{background:#334155;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#475569}