.metrics-root{background:var(--bg-main);flex-direction:column;flex:1;gap:24px;height:100%;padding:28px 32px;font-family:Segoe UI,system-ui,sans-serif;display:flex;overflow-y:auto}.metrics-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;display:flex}.metrics-title{flex-direction:column;gap:4px;display:flex}.metrics-title h1{color:var(--txt-main);letter-spacing:-.5px;font-size:1.6rem;font-weight:700}.metrics-title p{color:var(--txt-sec);font-size:.82rem}.metrics-header-actions{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.filter-bar{background:var(--bg-rail);border:1px solid #ffffff0f;border-radius:14px;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 16px;display:flex}.filter-chip{color:var(--txt-sec);cursor:pointer;letter-spacing:.3px;background:0 0;border:none;border-radius:8px;padding:6px 16px;font-size:.82rem;font-weight:600;transition:all .18s}.filter-chip:hover{color:var(--green);background:#00a8841f}.filter-chip.active{background:var(--green);color:#fff}.filter-divider{background:#ffffff1a;width:1px;height:20px}.date-input{background:var(--bg-hover);color:var(--txt-main);cursor:pointer;border:1px solid #ffffff1a;border-radius:8px;padding:6px 10px;font-size:.8rem;transition:border-color .18s}.date-input:focus{border-color:var(--green)}.export-btn{background:var(--bg-rail);color:var(--txt-main);cursor:pointer;border:1px solid #ffffff1f;border-radius:9px;align-items:center;gap:6px;padding:8px 18px;font-size:.82rem;font-weight:600;transition:all .18s;display:flex}.export-btn:hover{background:var(--green);border-color:var(--green);color:#fff}.refresh-btn{background:var(--bg-rail);width:36px;height:36px;color:var(--txt-sec);cursor:pointer;border:1px solid #ffffff1f;border-radius:9px;justify-content:center;align-items:center;font-size:1rem;transition:all .2s;display:flex}.refresh-btn:hover{background:var(--green);color:#fff;border-color:var(--green)}.refresh-btn.spinning{animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.section-title{letter-spacing:1.2px;text-transform:uppercase;color:var(--txt-sec);margin-bottom:0;font-size:.78rem;font-weight:700}.kpi-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px;display:grid}.kpi-card{background:var(--bg-rail);border:1px solid #ffffff0f;border-radius:16px;flex-direction:column;gap:12px;padding:20px 22px;transition:transform .2s,box-shadow .2s;display:flex;position:relative;overflow:hidden}.kpi-card:before{content:"";background:var(--card-accent,var(--green));border-radius:16px 16px 0 0;height:3px;position:absolute;top:0;left:0;right:0}.kpi-card:hover{transform:translateY(-3px);box-shadow:0 8px 30px #00000040}.kpi-card-header{justify-content:space-between;align-items:center;display:flex}.kpi-card-label{text-transform:uppercase;letter-spacing:.8px;color:var(--txt-sec);font-size:.75rem;font-weight:600}.kpi-card-icon{opacity:.8;font-size:1.4rem}.kpi-card-main{color:var(--txt-main);letter-spacing:-1px;font-size:2rem;font-weight:800;line-height:1}.kpi-card-main.na{color:var(--txt-sec);letter-spacing:0;font-size:1rem;font-weight:600}.kpi-card-sub{flex-direction:column;gap:4px;display:flex}.kpi-sub-row{color:var(--txt-sec);justify-content:space-between;font-size:.75rem;display:flex}.kpi-sub-row span:last-child{color:var(--txt-main);font-weight:600}.funnel-card{background:var(--bg-rail);border:1px solid #ffffff0f;border-radius:16px;flex-direction:column;gap:16px;padding:24px;display:flex}.funnel-steps{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.funnel-step{background:var(--bg-hover);text-align:center;border-radius:12px;flex:1;min-width:120px;padding:16px;position:relative}.funnel-step-number{color:var(--txt-main);font-size:1.8rem;font-weight:800}.funnel-step-label{color:var(--txt-sec);text-transform:uppercase;letter-spacing:.6px;margin-top:4px;font-size:.73rem;font-weight:600}.funnel-arrow{color:var(--txt-sec);flex-direction:column;flex-shrink:0;align-items:center;gap:2px;font-size:1.2rem;display:flex}.funnel-arrow span{color:var(--green);font-size:.7rem;font-weight:700}.charts-grid{grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:20px;display:grid}.chart-card{background:var(--bg-rail);border:1px solid #ffffff0f;border-radius:16px;flex-direction:column;gap:12px;padding:22px 24px;display:flex}.chart-card-title{color:var(--txt-main);font-size:.85rem;font-weight:700}.chart-card-sub{color:var(--txt-sec);margin-top:-8px;font-size:.73rem}.chart-container{width:100%;height:220px}.skeleton{background:linear-gradient(90deg,#ffffff0a 25%,#ffffff14 50%,#ffffff0a 75%) 0 0/200% 100%;border-radius:10px;animation:1.4s infinite shimmer}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-card{border-radius:16px;height:130px}.skeleton-chart{border-radius:16px;height:260px}.metrics-error{color:#ea4335;background:#ea43351f;border:1px solid #ea43354d;border-radius:12px;align-items:center;gap:10px;padding:16px 20px;font-size:.85rem;display:flex}.last-updated{color:var(--txt-sec);text-align:right;margin-top:-8px;font-size:.73rem}@media print{.metrics-header-actions,.filter-bar,.refresh-btn,.export-btn{display:none!important}.metrics-root{height:auto;padding:10px;overflow:visible}.kpi-card,.chart-card,.funnel-card{break-inside:avoid}}@media (max-width:768px){.metrics-root{gap:16px;padding:16px}.charts-grid{grid-template-columns:1fr}.kpi-grid{grid-template-columns:repeat(2,1fr)}.metrics-header{flex-direction:column;align-items:flex-start}.funnel-steps{flex-direction:column}.funnel-arrow{transform:rotate(90deg)}}