@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap";:root{--bg-primary:#fafafa;--bg-secondary:#ffffffd9;--bg-tertiary:#f4f4f5;--bg-card:#fff;--accent-cyan:#0070f3;--accent-purple:#7928ca;--accent-gradient:linear-gradient(135deg, #0070f3, #7928ca);--green:#10b981;--yellow:#f59e0b;--red:#ef4444;--orange:#f97316;--blue:#3b82f6;--text-primary:#111827;--text-secondary:#4b5563;--text-tertiary:#9ca3af;--border:#eaeaea;--border-hover:#ccc;--shadow-sm:0 1px 2px #0000000a;--shadow-lg:0 12px 24px -10px #00000014;--radius:16px;--radius-sm:8px;--sidebar-w:240px;--topbar-h:0px;--font-sans:"Inter", -apple-system, BlinkMacSystemFont, sans-serif;--font-mono:"JetBrains Mono", "Fira Code", monospace}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;letter-spacing:-.01em;background-image:radial-gradient(circle at 15%,#0070f308,#0000 25%),radial-gradient(circle at 85% 30%,#7928ca08,#0000 25%);min-height:100vh}.app-layout{min-height:100vh;display:flex}.main-content{margin-left:var(--sidebar-w);flex:1;max-width:1200px;padding:32px 40px}.sidebar{width:var(--sidebar-w);border-right:1px solid var(--border);z-index:100;background:#fff;flex-direction:column;height:100vh;display:flex;position:fixed;overflow-y:auto}.sidebar-brand{border-bottom:1px solid var(--border);padding:28px 24px 24px}.sidebar-logo{background:var(--accent-gradient);-webkit-text-fill-color:transparent;letter-spacing:-.02em;-webkit-background-clip:text;background-clip:text;font-size:1.2rem;font-weight:800}.sidebar-sub{color:var(--text-tertiary);letter-spacing:.04em;margin-top:4px;font-size:.68rem}.sidebar-nav{flex:1;padding:16px 0}.nav-item{color:var(--text-secondary);border-left:3px solid #0000;align-items:center;gap:12px;margin:2px 0;padding:12px 24px;font-size:.85rem;font-weight:500;text-decoration:none;transition:all .15s;display:flex}.nav-item:hover{color:var(--text-primary);background:var(--bg-tertiary)}.nav-item.active{color:var(--accent-cyan);border-left-color:var(--accent-cyan);background:#0070f30a;font-weight:600}.sidebar-footer{border-top:1px solid var(--border);color:var(--text-tertiary);padding:16px 24px;font-size:.68rem;line-height:1.6}.mobile-header{background:var(--bg-secondary);border-bottom:1px solid var(--border);z-index:200;align-items:center;gap:12px;height:52px;padding:0 16px;display:none;position:fixed;top:0;left:0;right:0}.hamburger-btn{cursor:pointer;background:0 0;border:none;flex-direction:column;gap:4px;margin:-8px;padding:8px;display:flex}.hamburger-btn span{background:var(--text-primary);border-radius:1px;width:18px;height:2px;display:block}.mobile-logo{background:var(--accent-gradient);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:1rem;font-weight:700}.sidebar-overlay{z-index:99;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#0f172a66;display:none;position:fixed;inset:0}.sidebar-close{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;padding:4px;display:none}.page-header{margin-bottom:32px}.page-title{letter-spacing:-.03em;color:var(--text-primary);font-size:1.6rem;font-weight:800}.page-subtitle{color:var(--text-tertiary);margin-top:6px;font-size:.82rem;font-weight:400}.glass-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);-webkit-backdrop-filter:blur(10px);padding:24px;transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s cubic-bezier(.16,1,.3,1),border-color .2s}.glass-card:hover{border-color:var(--border-hover);box-shadow:var(--shadow-lg);transform:translateY(-2px)}.glass-card-title{color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.1em;margin-bottom:16px;font-size:.72rem;font-weight:600}.top-metrics{grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:32px;display:grid}.metric-card{text-align:center;padding:20px 16px}.metric-label{color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px;font-size:.65rem;font-weight:600}.metric-icon-row{align-items:center;gap:8px;margin-bottom:12px;display:flex}.metric-icon-badge{border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;display:flex}.metric-value{color:var(--text-primary);letter-spacing:-.04em;font-size:2rem;font-weight:800;line-height:1}.metric-unit{color:var(--text-tertiary);margin-left:1px;font-size:1rem;font-weight:600}.metric-detail{color:var(--text-tertiary);margin-top:6px;font-size:.75rem}.metric-bar{background:var(--bg-tertiary);border-radius:3px;height:6px;margin-top:10px;overflow:hidden}.metric-bar-fill{background:var(--accent-gradient);border-radius:3px;height:100%;transition:width .6s}.status-dot{border-radius:50%;flex-shrink:0;width:8px;height:8px;display:inline-block}.status-dot.active{background:var(--green);box-shadow:0 0 4px #10b98166}.status-dot.inactive{background:var(--text-tertiary)}.status-dot.failed{background:var(--red);box-shadow:0 0 4px #ef444466}.status-dot.working{background:var(--yellow);box-shadow:0 0 4px #f59e0b66}.status-dot.unknown{background:var(--text-tertiary)}.services-inline{flex-wrap:wrap;gap:10px;display:flex}.service-chip{background:var(--bg-tertiary);border:1px solid #0000;border-radius:100px;align-items:center;gap:8px;padding:8px 16px;font-size:.8rem;transition:all .15s;display:inline-flex}.service-chip:hover{border-color:var(--border);background:#eef2ff}.service-chip-name{color:var(--text-primary);font-weight:600}.service-chip-detail{color:var(--text-tertiary);font-size:.72rem}.service-chip-port{color:var(--accent-cyan);font-family:var(--font-mono);font-size:.72rem;font-weight:500}.services-grid{grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:24px;display:grid}.service-card{align-items:center;gap:10px;padding:14px 16px;display:flex}.service-name{font-size:.8rem;font-weight:500}.service-detail{color:var(--text-tertiary);margin-top:2px;font-size:.68rem}.recording-hero{background:var(--bg-card);border:1px solid var(--border);margin-bottom:32px;padding:24px 30px;position:relative;overflow:hidden}.recording-hero.active{background:linear-gradient(180deg, #ef444408 0%, #fff0 100%), var(--bg-card);border-color:#ef444466;animation:3s ease-in-out infinite recording-pulse;box-shadow:0 8px 32px -12px #ef444426}@keyframes recording-pulse{0%,to{border-color:#ef444433}50%{border-color:#ef444480}}.recording-hero-header{align-items:center;gap:10px;margin-bottom:12px;display:flex}.recording-badge{text-transform:uppercase;letter-spacing:.06em;border-radius:12px;padding:3px 10px;font-size:.7rem;font-weight:700}.recording-badge.live{color:var(--red);background:#ef44441a}.recording-badge.idle{color:var(--green);background:#10b9811a}.recording-title{font-size:1rem;font-weight:600}.recording-meta{color:var(--text-secondary);flex-wrap:wrap;gap:20px;font-size:.82rem;display:flex}.recording-progress{background:var(--bg-tertiary);border-radius:3px;height:6px;margin-top:14px;overflow:hidden}.recording-progress-fill{background:linear-gradient(90deg, var(--red), var(--orange));border-radius:3px;height:100%;transition:width 1s}.recording-stats-grid{grid-template-columns:repeat(4,1fr);gap:16px;margin-top:8px;display:grid}.rec-stat{text-align:center}.rec-stat-value{color:var(--text-primary);letter-spacing:-.03em;font-size:1.5rem;font-weight:800;line-height:1.2}.rec-stat-unit{color:var(--text-tertiary);margin-left:2px;font-size:.8rem;font-weight:500}.rec-stat-label{color:var(--text-tertiary);margin-top:4px;font-size:.7rem;font-weight:500}.recording-summary{color:var(--text-secondary);gap:24px;margin-top:4px;font-size:.85rem;display:flex}.recording-summary strong{color:var(--accent-cyan)}.activity-feed{max-height:380px;overflow-y:auto}.activity-feed::-webkit-scrollbar{width:4px}.activity-feed::-webkit-scrollbar-thumb{background:var(--border-hover);border-radius:2px}.activity-item{border-bottom:1px solid var(--border);gap:12px;padding:9px 0;font-size:.82rem;display:flex}.activity-item:last-child{border-bottom:none}.activity-icon{border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;font-size:.75rem;display:flex}.activity-icon.recording{background:#10b9811a}.activity-icon.upload{background:#0284c71a}.activity-icon.bot{background:#6366f11a}.activity-icon.cron{background:#f59e0b1a}.activity-icon.error{background:#ef44441a}.activity-icon.system{background:#64748b1a}.activity-text{color:var(--text-primary);flex:1;line-height:1.4}.activity-time{color:var(--text-tertiary);flex-shrink:0;margin-top:2px;font-size:.7rem}.grid-2{grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px;display:grid}.grid-3{grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:24px;display:grid}.stat-box{text-align:center;padding:16px 12px}.stat-value{color:var(--accent-cyan);font-size:1.8rem;font-weight:700}.stat-value.gradient{background:var(--accent-gradient);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.stat-label{color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.04em;margin-top:3px;font-size:.7rem}.stat-sub{color:var(--text-secondary);margin-top:2px;font-size:.72rem}.history-table{border-collapse:collapse;width:100%}.history-table th{text-align:left;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--border);padding:8px 12px;font-size:.7rem;font-weight:600}.history-table td{border-bottom:1px solid var(--border);vertical-align:middle;padding:10px 12px;font-size:.82rem}.history-table tr:hover td{background:var(--bg-tertiary)}.vendor-tag{text-transform:uppercase;border-radius:4px;align-items:center;gap:4px;padding:2px 8px;font-size:.72rem;font-weight:600;display:inline-flex}.status-tag{border-radius:10px;padding:2px 8px;font-size:.7rem;font-weight:600}.status-tag.success{color:var(--green);background:#10b9811a}.status-tag.failed{color:var(--red);background:#ef44441a}.status-tag.partial{color:var(--yellow);background:#f59e0b1a}.heatmap{flex-wrap:wrap;gap:3px;margin-top:8px;display:flex}.heatmap-cell{cursor:default;border-radius:3px;width:16px;height:16px;transition:transform .15s}.heatmap-cell:hover{transform:scale(1.3)}.heatmap-legend{color:var(--text-tertiary);align-items:center;gap:6px;margin-top:10px;font-size:.68rem;display:flex}.heatmap-legend-cell{border-radius:2px;width:12px;height:12px}.vendor-bar-row{align-items:center;gap:10px;margin-bottom:10px;display:flex}.vendor-bar-label{text-transform:capitalize;width:72px;font-size:.78rem;font-weight:500}.vendor-bar-track{background:var(--bg-tertiary);border-radius:4px;flex:1;height:18px;overflow:hidden}.vendor-bar-fill{border-radius:4px;height:100%;transition:width .6s}.vendor-bar-value{text-align:right;width:52px;color:var(--text-secondary);font-size:.75rem;font-family:var(--font-mono)}.log-controls{flex-wrap:wrap;gap:8px;margin-bottom:14px;display:flex}.log-filter-btn{border:1px solid var(--border);background:var(--bg-secondary);color:var(--text-secondary);cursor:pointer;font-size:.75rem;font-family:var(--font-sans);border-radius:6px;padding:5px 12px;transition:all .2s}.log-filter-btn:hover{border-color:var(--accent-cyan);color:var(--accent-cyan)}.log-filter-btn.active{border-color:var(--accent-cyan);color:var(--accent-cyan);background:#0284c714;font-weight:500}.log-stream{font-family:var(--font-mono);background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius-sm);max-height:520px;padding:14px;font-size:.75rem;line-height:1.6;overflow-y:auto}.log-stream::-webkit-scrollbar{width:6px}.log-stream::-webkit-scrollbar-thumb{background:var(--border-hover);border-radius:3px}.log-line{border-bottom:1px dashed var(--border);gap:8px;padding:2px 0;display:flex}.log-line:hover{background:#ffffff80}.log-time{color:var(--text-tertiary);flex-shrink:0;width:70px}.log-source{color:var(--accent-purple);text-overflow:ellipsis;flex-shrink:0;width:130px;overflow:hidden}.log-level{text-transform:uppercase;flex-shrink:0;width:42px;font-weight:600}.log-level.info{color:var(--accent-cyan)}.log-level.warn{color:var(--yellow)}.log-level.error{color:var(--red)}.log-level.debug{color:var(--text-tertiary)}.log-msg{word-break:break-word;color:var(--text-secondary);flex:1}.log-filter-card{flex-wrap:wrap;align-items:center;gap:20px;margin-bottom:16px;padding:16px 20px;display:flex}.log-filter-group{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.log-filter-label{color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.05em;flex-shrink:0;font-size:.68rem;font-weight:600}.cron-card-row{justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;display:flex}.cron-info{flex:1;min-width:0}.cron-name{color:var(--text-primary);align-items:center;gap:6px;font-size:.88rem;font-weight:500;display:flex}.cron-schedule{font-family:var(--font-mono);color:var(--accent-cyan);margin-top:2px;font-size:.75rem}.cron-state{color:var(--text-tertiary);flex-shrink:0;align-items:center;gap:12px;font-size:.75rem;display:flex}.cron-state-item{align-items:center;gap:4px;display:inline-flex}.cron-list{flex-direction:column;gap:6px;display:flex}.cron-list .cron-card-row{background:var(--bg-tertiary);border-radius:var(--radius-sm);border:1px solid #0000;transition:all .15s}.cron-list .cron-card-row:hover{border-color:var(--border);background:#eef2ff}.info-grid{grid-template-columns:1fr 1fr;gap:8px;display:grid}.info-row{border-bottom:1px solid var(--border);justify-content:space-between;padding:6px 0;font-size:.82rem;display:flex}.info-key{color:var(--text-tertiary);font-weight:500}.info-val{color:var(--text-secondary);font-family:var(--font-mono);font-size:.78rem;font-weight:500}.storage-item{margin-bottom:16px}.storage-item:last-child{margin-bottom:0}.storage-header{justify-content:space-between;margin-bottom:6px;display:flex}.storage-mount{font-family:var(--font-mono);color:var(--text-primary);font-size:.82rem;font-weight:600}.storage-usage{color:var(--text-secondary);font-size:.78rem}.storage-avail{color:var(--text-tertiary);margin-top:4px;font-size:.7rem}.show-mobile{display:none}.hide-mobile{display:block}.recording-card-mobile{border-bottom:1px solid var(--border);padding:14px 0}.recording-card-mobile:last-child{border-bottom:none}.rcm-top{justify-content:space-between;align-items:center;margin-bottom:6px;display:flex}.rcm-title{color:var(--text-primary);margin-bottom:6px;font-size:.85rem;font-weight:500;line-height:1.4}.rcm-meta{color:var(--text-tertiary);font-size:.72rem;font-family:var(--font-mono);gap:12px;display:flex}.recharts-cartesian-grid-horizontal line,.recharts-cartesian-grid-vertical line{stroke:var(--border)}.loading-container{flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:80px 20px;display:flex}.loading-spinner{border:3px solid var(--border);border-top-color:var(--accent-cyan);border-radius:50%;width:32px;height:32px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{color:var(--text-tertiary);text-align:center;font-size:.85rem}@media (width<=1024px){.top-metrics,.services-grid{grid-template-columns:repeat(2,1fr)}.grid-2,.info-grid{grid-template-columns:1fr}}@media (width<=768px){.mobile-header{-webkit-backdrop-filter:blur(12px);background:#ffffffd9;display:flex}.sidebar-overlay{display:block}.sidebar{transition:transform .3s cubic-bezier(.16,1,.3,1);transform:translate(-100%)}.sidebar.open{transform:translate(0);box-shadow:0 0 32px #0000001a}.sidebar-close{display:block}.main-content{margin-left:0;padding:72px 16px 16px}.glass-card{padding:16px}.metric-card{padding:16px 14px}.top-metrics{grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:24px}.services-grid{grid-template-columns:1fr;gap:8px}.grid-2,.grid-3{grid-template-columns:1fr;gap:16px}.recording-meta{flex-direction:column;gap:8px}.recording-hero{margin-bottom:24px;padding:20px}.recording-stats-grid{grid-template-columns:repeat(4,1fr);gap:8px}.rec-stat-value{font-size:1.2rem}.hide-mobile{display:none}.show-mobile{display:block}.log-filter-card{flex-direction:column;gap:12px;padding:12px 14px}.log-filter-group{width:100%}.log-controls{gap:6px;margin-bottom:0}.log-filter-btn{padding:4px 8px;font-size:.68rem}.log-line{flex-wrap:wrap;gap:4px;padding:6px 0}.log-source{width:auto;max-width:120px}.log-time{width:auto}.log-msg{width:100%;font-size:.72rem}.cron-card-row{flex-direction:column;align-items:flex-start;gap:6px;padding:12px 14px}.cron-state{flex-direction:column;gap:4px;font-size:.72rem}.info-row{font-size:.78rem}.heatmap-cell{width:14px;height:14px}.services-inline{gap:8px}.service-chip{padding:6px 12px;font-size:.75rem}.vendor-bar-label{width:60px;font-size:.72rem}.vendor-bar-value{width:42px;font-size:.7rem}.page-title{font-size:1.3rem}.page-subtitle{font-size:.78rem}.metric-icon-badge{border-radius:8px;width:32px;height:32px}.metric-value{font-size:1.6rem}}