*{margin:0;padding:0;box-sizing:border-box}:root{--primary: #3b82f6;--primary-dark: #2563eb;--primary-light: #60a5fa;--primary-bg: #eff6ff;--accent: #0891b2;--accent-light: #06b6d4;--urgent: #ef4444;--urgent-bg: #fee2e2;--success: #10b981;--success-bg: #d1fae5;--gray-50: #f9fafb;--gray-100: #f3f4f6;--gray-200: #e5e7eb;--gray-300: #d1d5db;--gray-400: #9ca3af;--gray-500: #6b7280;--gray-600: #4b5563;--gray-700: #374151;--gray-800: #1f2937;--gray-900: #111827;--bg: #ffffff;--bg-secondary: var(--gray-50);--text: var(--gray-900);--text-secondary: var(--gray-600);--border: var(--gray-200);--shadow: 0 1px 3px 0 rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1)}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:var(--bg-secondary);color:var(--text);line-height:1.6}.app{max-width:1400px;margin:0 auto;padding:20px}.header{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);color:#fff;padding:24px 32px;border-radius:12px;margin-bottom:24px;box-shadow:var(--shadow-lg)}.header h1{font-size:28px;font-weight:700;margin:0}.header p{margin:8px 0 0;opacity:.9;font-size:16px}.detail-header{display:flex;align-items:center;gap:16px}.back-btn{background:#fff3;color:#fff;border:1px solid rgba(255,255,255,.3);padding:8px 16px;border-radius:8px;cursor:pointer;font-size:14px;transition:all .2s}.back-btn:hover{background:#ffffff4d}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:24px}.stat-card{background:var(--bg);padding:20px;border-radius:12px;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s}.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.stat-card .icon{font-size:32px;margin-bottom:8px}.stat-card .value{font-size:32px;font-weight:700;color:var(--primary);margin-bottom:4px}.stat-card .label{font-size:14px;color:var(--text-secondary)}.stat-card.urgent .value{color:var(--urgent)}.tabs{display:flex;gap:8px;margin-bottom:24px;background:var(--bg);padding:6px;border-radius:12px;box-shadow:var(--shadow)}.tab{flex:1;padding:12px 20px;background:transparent;border:none;border-radius:8px;cursor:pointer;font-size:15px;font-weight:500;color:var(--text-secondary);transition:all .2s}.tab:hover{background:var(--gray-100);color:var(--text)}.tab.active{background:var(--primary);color:#fff;box-shadow:var(--shadow)}.tab.urgent.active{background:var(--urgent)}.section{background:var(--bg);border-radius:12px;padding:24px;box-shadow:var(--shadow)}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.section-header h2{font-size:20px;font-weight:600;color:var(--text)}.filter-toggle{background:var(--primary);color:#fff;border:none;padding:10px 20px;border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s}.filter-toggle:hover{background:var(--primary-dark)}.filters-panel{background:var(--gray-50);padding:20px;border-radius:8px;margin-bottom:20px}.filter-row{display:flex;gap:12px;margin-bottom:12px}.filter-row:last-child{margin-bottom:0}.filter-group{flex:1;display:flex;flex-direction:column;gap:6px}.filter-group label{font-size:13px;font-weight:500;color:var(--text-secondary)}.filter-group input,.filter-group select{padding:8px 12px;border:1px solid var(--border);border-radius:6px;font-size:14px;background:#fff;transition:border-color .2s}.filter-group input:focus,.filter-group select:focus{outline:none;border-color:var(--primary)}.clear-filters-btn{background:var(--gray-100);color:var(--text);border:1px solid var(--border);padding:8px 16px;border-radius:6px;cursor:pointer;font-size:14px;align-self:flex-end;transition:all .2s}.clear-filters-btn:hover{background:var(--gray-200)}.recording-list{display:flex;flex-direction:column;gap:12px}.recording-item{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:16px;cursor:pointer;transition:all .2s}.recording-item:hover{border-color:var(--primary);box-shadow:var(--shadow);transform:translate(4px)}.recording-item.urgent{border-left:4px solid var(--urgent);background:var(--urgent-bg)}.recording-item .main-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.recording-item .phone{font-weight:600;font-size:16px;color:var(--text)}.recording-item .duration{font-size:14px;color:var(--text-secondary);background:var(--gray-100);padding:4px 10px;border-radius:12px}.recording-item .names-preview{display:flex;gap:12px;margin-bottom:6px;font-size:14px;color:var(--text-secondary)}.recording-item .meta{font-size:13px;color:var(--text-secondary);margin-bottom:8px}.recording-item .badges{display:flex;gap:6px;flex-wrap:wrap}.badge{display:inline-block;padding:4px 10px;border-radius:12px;font-size:12px;font-weight:500}.badge.urgent{background:var(--urgent-bg);color:var(--urgent)}.badge.audio{background:var(--primary-bg);color:var(--primary)}.badge.pet{background:var(--accent-light);color:#fff}.badge.transcript{background:var(--gray-100);color:var(--gray-700)}.badge.cost{background:var(--gray-800);color:#fff}.badge.success{background:var(--success-bg);color:var(--success)}.badge.partial{background:#fef3c7;color:#f59e0b}.badge.failed{background:var(--urgent-bg);color:var(--urgent)}.badge.unknown{background:var(--gray-100);color:var(--gray-600)}.badge.quality{background:#fbbf24;color:#fff}.detail-container{max-width:900px;margin:0 auto}.detail-card{background:var(--bg);border-radius:12px;padding:24px;box-shadow:var(--shadow)}.urgency-banner{background:var(--urgent-bg);border:2px solid var(--urgent);padding:16px;border-radius:8px;text-align:center;margin-bottom:20px;color:var(--urgent);font-weight:600}.detail-header-info h2{font-size:24px;margin-bottom:12px;color:var(--text)}.detail-header-info .names{margin-bottom:8px}.detail-header-info .customer-name{font-size:16px;color:var(--text-secondary)}.detail-header-info .meta{display:flex;gap:16px;margin-bottom:12px;font-size:14px;color:var(--text-secondary)}.detail-header-info .badges{display:flex;gap:8px;margin-bottom:20px}.pet-info-section{background:var(--primary-bg);padding:20px;border-radius:8px;margin-bottom:20px}.pet-info-section h3{color:var(--primary-dark);margin-bottom:16px;font-size:16px;font-weight:600}.pet-info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}.pet-info-item{display:flex;flex-direction:column;gap:4px}.pet-info-item.full-width{grid-column:1 / -1}.pet-info-item .label{font-size:12px;color:var(--text-secondary);font-weight:500}.pet-info-item .value{font-size:15px;color:var(--text);font-weight:500}.pet-info-item .value.problem{background:#fff;padding:12px;border-radius:6px;border-left:3px solid var(--primary)}.analyze-btn,.callback-btn{background:var(--primary);color:#fff;border:none;padding:12px 24px;border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;margin-top:16px;transition:all .2s}.analyze-btn:hover,.callback-btn:hover{background:var(--primary-dark);transform:translateY(-1px);box-shadow:var(--shadow)}.analyze-btn:disabled{background:var(--gray-300);cursor:not-allowed;transform:none}.analysis-section,.function-calls-section,.audio-section,.transcript-section,.token-usage-section{margin-top:20px;padding-top:20px;border-top:1px solid var(--border)}.analysis-section h3,.function-calls-section h3,.audio-section h3,.transcript-section h3,.token-usage-section h4{color:var(--primary-dark);margin-bottom:12px;font-size:16px}.analysis-section p{color:var(--text-secondary);line-height:1.6}.function-calls-list{display:flex;flex-direction:column;gap:12px}.function-call{background:var(--gray-50);padding:16px;border-radius:8px;border-left:3px solid var(--primary)}.function-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.function-name{font-weight:600;color:var(--text)}.function-time{font-size:13px;color:var(--text-secondary)}.function-details{display:flex;flex-direction:column;gap:8px}.function-details .arg{font-size:14px;color:var(--text-secondary)}.function-details .arg strong{color:var(--text)}.function-error{background:var(--urgent-bg);color:var(--urgent);padding:12px;border-radius:6px;margin-top:8px;font-size:14px}.audio-controls{display:flex;align-items:center;gap:12px;margin-bottom:12px}.play-btn{background:var(--primary);color:#fff;border:none;width:44px;height:44px;border-radius:50%;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;transition:all .2s}.play-btn:hover{background:var(--primary-dark);transform:scale(1.05)}.play-btn:disabled{background:var(--gray-300);cursor:not-allowed}.seek-bar{flex:1;height:6px;border-radius:3px;background:var(--gray-200);outline:none;cursor:pointer}.seek-bar::-webkit-slider-thumb{width:16px;height:16px;border-radius:50%;background:var(--primary);cursor:pointer}.time{font-size:13px;color:var(--text-secondary);min-width:45px}.speed-controls{display:flex;gap:8px;align-items:center}.speed-controls span{font-size:13px;color:var(--text-secondary)}.speed-controls button{background:var(--gray-100);border:1px solid var(--border);padding:6px 12px;border-radius:6px;cursor:pointer;font-size:13px;transition:all .2s}.speed-controls button:hover{background:var(--gray-200)}.speed-controls button.active{background:var(--primary);color:#fff;border-color:var(--primary)}.download-btn{margin-left:auto;background:var(--gray-100);border:1px solid var(--border);padding:6px 14px;border-radius:6px;font-size:13px;color:var(--text-primary);text-decoration:none;cursor:pointer;transition:all .2s}.download-btn:hover{background:var(--primary);color:#fff;border-color:var(--primary)}.transcript-segments{display:flex;flex-direction:column;gap:12px}.segment{padding:12px;border-radius:8px;background:var(--gray-50)}.segment.ai{background:var(--primary-bg);border-left:3px solid var(--primary)}.segment .speaker-label{font-weight:600;color:var(--text);margin-right:8px}.segment .text{color:var(--text-secondary)}.raw-transcript{background:var(--gray-50);padding:16px;border-radius:8px;white-space:pre-wrap;font-family:monospace;font-size:13px;color:var(--text-secondary);line-height:1.6}.token-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}.token-group{background:var(--gray-50);padding:16px;border-radius:8px}.token-group.total{background:var(--primary-bg);border:1px solid var(--primary)}.token-header{font-weight:600;color:var(--text);margin-bottom:12px;font-size:14px}.token-detail{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.token-label{font-size:13px;color:var(--text-secondary)}.token-value{font-size:13px;color:var(--text)}.token-cost{font-size:13px;color:var(--primary);font-weight:500}.cost-breakdown{display:flex;flex-direction:column;gap:8px}.cost-item{display:flex;justify-content:space-between;font-size:13px}.cost-item.total-cost{padding-top:8px;border-top:1px solid var(--border);margin-top:4px}.cost-label{color:var(--text-secondary)}.cost-value{color:var(--text);font-weight:500}.empty-state{text-align:center;padding:60px 20px;color:var(--text-secondary)}.empty-state .icon{font-size:64px;margin-bottom:16px;opacity:.5}.empty-state p{font-size:16px}.loading{text-align:center;padding:60px 20px;font-size:18px;color:var(--text-secondary)}.no-data{color:var(--text-secondary);font-style:italic;font-size:14px}.problem-preview{font-size:14px;color:var(--text-secondary);margin-bottom:8px;padding:8px;background:#fff;border-radius:6px;border-left:3px solid var(--urgent)}