*{box-sizing:border-box}body{margin:0}:root{--bg:#f4f7fc;--card-bg:#fff;--text-primary:#1e293b;--text-secondary:#475569;--text-muted:#94a3b8;--border:#e2e8f0;--shadow-sm:0 1px 2px #00000008;--shadow:0 1px 3px #0000000f, 0 1px 2px #0000000a;--shadow-md:0 4px 12px #0000000f;--shadow-lg:0 12px 24px #0000000f;--radius-sm:10px;--radius:14px;--radius-lg:20px;--transition:.2s ease;--color-inbound:#2563eb;--color-outbound:#059669;--color-transfer:#7c3aed;--color-queue:#0f766e;--accent:#6366f1;color:var(--text-primary);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,Segoe UI,system-ui,-apple-system,sans-serif;line-height:1.4}body{background:var(--bg);min-height:100vh;padding:24px 20px 40px}button,input,select{font:inherit}.dashboard{flex-direction:column;gap:22px;max-width:1200px;margin:0 auto;display:flex}.header{background:var(--card-bg);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);border:1px solid var(--border);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;padding:20px 28px;display:flex}.header__left{flex-wrap:wrap;align-items:center;gap:16px;display:flex}.header__avatar{color:#fff;background:linear-gradient(135deg,#4f46e5,#3b82f6);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:52px;height:52px;font-size:22px;font-weight:700;display:flex}.header__info{flex-direction:column;gap:4px;display:flex}.header__name{letter-spacing:-.3px;margin:0;font-size:1.4rem;font-weight:700}.header__update-block{color:var(--text-secondary);flex-direction:column;align-items:flex-start;gap:4px;font-size:.85rem;display:flex}.header__update-text{align-items:center;gap:6px;display:flex}.live-dot{background:#10b981;border-radius:50%;width:9px;height:9px;animation:2s infinite pulse}@keyframes pulse{0%,to{box-shadow:0 0 #10b98166}50%{box-shadow:0 0 0 8px #10b98100}}.timer{color:#0f172a;white-space:nowrap;background:#f1f5f9;border-radius:20px;align-items:center;gap:6px;width:fit-content;padding:5px 12px;font-size:.85rem;font-weight:600;display:inline-flex}.timer__icon{font-size:1rem}.period-block{flex-direction:column;align-items:flex-end;gap:12px;display:flex}.preset-buttons{flex-wrap:wrap;gap:8px;display:flex}.preset-btn{color:var(--text-secondary);cursor:pointer;transition:all var(--transition);white-space:nowrap;letter-spacing:-.2px;background:#f1f5f9;border:1.5px solid #0000;border-radius:24px;padding:8px 16px;font-size:.8rem;font-weight:600}.preset-btn:hover{color:var(--text-primary);background-color:#e2e8f0}.preset-btn--active,.preset-btn--active:hover{background-color:var(--accent);color:#fff;border-color:var(--accent)}.preset-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-position:right 12px center;background-repeat:no-repeat;background-size:12px 12px;padding-right:28px}.preset-select.preset-btn--active{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")}.custom-range{border:1.5px solid var(--border);transition:all var(--transition);background:#f8fafc;border-radius:28px;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 16px;display:flex}.custom-range.active-range{border-color:var(--accent);background:#fff}.date-label{font-size:.8rem;font-weight:500}.custom-range input[type=date],.custom-range select{border:1px solid var(--border);color:var(--text-primary);background:#fff;border-radius:16px;padding:7px 12px;font-size:.8rem;transition:all .15s}.custom-range input[type=date]:focus,.custom-range select:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px #6366f11a}.custom-range select{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-position:right 10px center;background-repeat:no-repeat;padding-right:28px}.time-label{color:var(--text-muted);font-size:.8rem;font-weight:500}.date-separator{color:var(--text-muted);font-weight:500}.section{background:var(--card-bg);border-radius:var(--radius-lg);box-shadow:var(--shadow);border:1px solid var(--border);flex-direction:column;gap:18px;padding:20px 24px;display:flex}.section-title{letter-spacing:-.2px;align-items:center;gap:8px;margin:0;font-size:1rem;font-weight:700;display:flex}.section-title:before{content:"";border-radius:2px;flex-shrink:0;width:4px;height:22px}.section-title--status:before{background:#6366f1}.section-title--inbound:before{background:var(--color-inbound)}.section-title--outbound:before{background:var(--color-outbound)}.section-title--transfer:before{background:var(--color-transfer)}.section-title--queue:before{background:var(--color-queue)}.card-grid{grid-template-columns:repeat(4,1fr);gap:14px;display:grid}.card-grid--3{grid-template-columns:repeat(3,1fr)}.metric-card{background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow-sm);border:1px solid var(--border);transition:transform var(--transition), box-shadow var(--transition);flex-direction:column;gap:6px;padding:14px 16px;display:flex}.metric-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}.metric-card__label{text-transform:uppercase;letter-spacing:.4px;color:var(--text-secondary);font-size:.72rem;font-weight:600}.metric-card__value{color:var(--text-primary);font-size:1.5rem;font-weight:700}.metric-card__value--null{color:var(--text-muted);font-size:1.2rem;font-weight:400}.status-chart-layout{flex-wrap:wrap;align-items:center;gap:24px;display:flex}.legend-table{border-collapse:collapse;flex:240px;min-width:200px;font-size:.82rem}.legend-table td{border-bottom:1px solid #f1f5f9;padding:6px 8px}.legend-color{border-radius:4px;width:14px;height:14px;display:inline-block}.legend-label{color:var(--text-primary);font-weight:500}.legend-time{text-align:right;color:#0f172a;font-weight:600}.legend-percent{color:var(--text-muted);text-align:right;font-size:.7rem}.chart-container{flex:260px;justify-content:center;align-items:center;min-width:180px;display:flex}canvas{max-width:100%;height:auto}.queue-selector{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.queue-selector__label{font-weight:500}.queue-selector__select{appearance:none;border:1.5px solid var(--border);color:var(--text-primary);cursor:pointer;background:#f8fafc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") right 14px center no-repeat;border-radius:24px;min-width:220px;padding:10px 36px 10px 16px;font-size:.9rem;font-weight:500}.queue-metric-line{border-radius:var(--radius-sm);background:#f0fdfa;border:1px solid #ccfbf1;padding:12px 18px;font-weight:500}.queue-metric-line__value{color:#0f766e;font-weight:700}.queue-metric-line--empty{border-color:var(--border);color:var(--text-muted);background:#f9fafb;font-style:italic}@media (width<=800px){.card-grid,.card-grid--3{grid-template-columns:repeat(2,1fr)}}@media (width<=450px){body{padding:16px 12px 28px}.header{padding:18px}.card-grid,.card-grid--3{grid-template-columns:1fr}}