:root{--page-bg: #ffffff;--card-bg: #ffffff;--card-border: #e5e7eb;--primary: #2563eb;--secondary: #8b5cf6;--danger: #ef4444;--success: #10b981;--text-primary: #111827;--text-muted: #6b7280;--shadow-soft: 0 18px 40px rgba(15, 23, 42, .12)}*,*:before,*:after{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:system-ui,-apple-system,BlinkMacSystemFont,SF Pro Text,Helvetica Neue,Arial,sans-serif;background:var(--page-bg);color:var(--text-primary)}#app{max-width:1200px;margin:0 auto;padding:24px 16px 40px}.dashboard-header{position:sticky;top:0;z-index:50;height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;background-color:#fff;border-bottom:1px solid #e5e7eb}.header-logo{display:flex;align-items:center;gap:12px}.header-logo-img{height:36px;width:auto;object-fit:contain}.header-right{display:flex;align-items:center;gap:20px}.header-status{background-color:#10b981;color:#fff;padding:6px 12px;border-radius:9999px;font-size:.75rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase}.header-clock{font-variant-numeric:tabular-nums;font-size:.9375rem;font-weight:500;color:#6b7280}.dashboard-main{display:flex;flex-direction:column;gap:20px;margin-top:24px}.kpi-card{border-radius:22px;background:var(--card-bg);border:1px solid var(--card-border);box-shadow:var(--shadow-soft);padding:18px 18px 20px}.kpi-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.kpi-title-wrap{display:flex;align-items:center;gap:10px}.kpi-title-icon{display:flex;align-items:center;justify-content:center;color:var(--primary)}.kpi-title{margin:0;font-size:1rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-primary)}.kpi-badge{padding:5px 12px;border-radius:999px;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;background:#2563eb1f;color:#1d4ed8;border:1px solid rgba(37,99,235,.35)}#kpi-apple-zone .kpi-badge{background:#8b5cf61f;color:#6d28d9;border-color:#8b5cf659}.kpi-employee-badge{padding:5px 12px;border-radius:999px;font-size:.7rem;letter-spacing:.08em;text-transform:none;font-weight:600}.kpi-employee-badge.employee-present{background:#10b98126;color:#047857;border:1px solid rgba(16,185,129,.4)}.kpi-employee-badge.employee-absent{background:#6b728026;color:#4b5563;border:1px solid rgba(107,114,128,.35)}.kpi-body{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:20px;align-items:stretch}.kpi-video-container{position:relative;overflow:hidden;border-radius:12px;border:1px solid var(--card-border);background:#000;aspect-ratio:16 / 9;min-height:360px}.kpi-video-label{position:absolute;top:10px;left:10px;z-index:1;padding:4px 10px;border-radius:6px;font-size:.7rem;font-weight:600;letter-spacing:.08em;background:#00000080;color:#fff}.kpi-video{width:100%;height:100%;display:block;background:#000;object-fit:contain}.kpi-right{display:flex;flex-direction:column;gap:10px;min-height:0}.kpi-metric-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.18em;color:var(--text-muted)}.kpi-metric-value{font-variant-numeric:tabular-nums;font-size:2.2rem;font-weight:600;color:var(--text-primary)}.kpi-graph{width:100%;height:160px;border-radius:16px;border:1px solid var(--card-border);background:#fff;display:block}.kpi-legend{margin-top:4px;font-size:.75rem;color:var(--text-muted)}.kpi-legend>div+div{margin-top:2px}#kpi-apple-zone .kpi-interaction-value{font-size:1.5rem}@media (max-width: 900px){#app{padding-inline:12px}.kpi-body{grid-template-columns:1fr}}