@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.1)}}.card{background:linear-gradient(145deg,#ffffff14,#ffffff05);border:1px solid rgba(255,255,255,.1);border-radius:1.5rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 8px 32px #0000004d,inset 0 1px #ffffff1a;transition:all .3s cubic-bezier(.4,0,.2,1);padding:1.5rem;position:relative;overflow:hidden}.card:hover{transform:translateY(-2px);box-shadow:0 12px 40px #0006,inset 0 1px #ffffff26;border-color:#fff3}.dashboard-container{max-width:1400px;margin:0 auto;padding:2rem;min-height:100vh;position:relative;z-index:1}.dashboard-container>*{position:relative;z-index:1}@media (max-width: 768px){.dashboard-container{padding:1rem 1rem 2rem}}.dashboard-header{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(145deg,#ffffff14,#ffffff05);border:1px solid rgba(255,255,255,.1);border-radius:1.5rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 8px 32px #0000004d,inset 0 1px #ffffff1a;transition:all .3s cubic-bezier(.4,0,.2,1);padding:1.5rem 2rem;margin-bottom:3rem}.dashboard-header:hover{transform:translateY(-2px);box-shadow:0 12px 40px #0006,inset 0 1px #ffffff26;border-color:#fff3}@media (max-width: 768px){.dashboard-header{flex-direction:column;gap:1rem;padding:1rem}}.title-section{display:flex;align-items:center;gap:1rem}.dashboard-title{background:linear-gradient(135deg,#fff,#fffc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 2px 8px rgba(0,0,0,.3);font-size:2.5rem;font-weight:700;margin:0}@media (max-width: 768px){.dashboard-title{font-size:2rem}}@media (max-width: 480px){.dashboard-title{font-size:1.8rem}}.live-indicator{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:#00ff881a;border:1px solid rgba(0,255,136,.3);border-radius:2rem;font-size:.85rem;font-weight:600;color:#0f8}.live-indicator .live-dot{width:8px;height:8px;background:#0f8;border-radius:50%;box-shadow:0 0 8px #0f8;animation:pulse 2s ease-in-out infinite}.live-indicator .live-text{text-transform:uppercase;letter-spacing:.5px}.timestamp{font-size:.9rem;color:#fff9;font-weight:500}.section-title{font-size:1.5rem;font-weight:600;color:#ffffffe6;margin-bottom:1.5rem;padding-left:1rem;border-left:3px solid rgba(255,255,255,.1);text-shadow:0 2px 4px rgba(0,0,0,.3)}.section-title.section-primary{border-left-color:#0f8}.section-title.section-secondary{border-left-color:#74b9ff}.section-title.section-accent{border-left-color:#ffd93d}.section-title.section-danger{border-left-color:#ff6b6b}.section-title.section-success{border-left-color:#00b894}.section-title.section-warning{border-left-color:#fa0}.section-title.section-info{border-left-color:#fd79a8}.primary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}@media (max-width: 1200px){.primary-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 768px){.primary-grid{grid-template-columns:1fr;gap:1rem}}.secondary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem;align-items:stretch;width:100%}@media (max-width: 768px){.secondary-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem}}@media (max-width: 480px){.secondary-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.8rem}}.flow-diagram{display:flex;justify-content:center;align-items:center;background:linear-gradient(145deg,#ffffff14,#ffffff05);border:1px solid rgba(255,255,255,.1);border-radius:1.5rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 8px 32px #0000004d,inset 0 1px #ffffff1a;transition:all .3s cubic-bezier(.4,0,.2,1);gap:2rem;padding:2rem;flex-wrap:wrap}.flow-diagram:hover{transform:translateY(-2px);box-shadow:0 12px 40px #0006,inset 0 1px #ffffff26;border-color:#fff3}@media (max-width: 768px){.flow-diagram{flex-direction:column;gap:1rem}}.flow-item{transition:all .3s ease;display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1.5rem;background:linear-gradient(145deg,#ffffff1a,#ffffff08);border:1px solid rgba(255,255,255,.15);border-radius:1rem;min-width:120px}.flow-item:hover{transform:translateY(-4px);box-shadow:0 8px 25px #0000004d}.flow-item.solar{border-left:3px solid #ffd93d}.flow-item.home{border-left:3px solid #74b9ff}.flow-item.battery{border-left:3px solid #00b894}.flow-item .flow-icon{font-size:2rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}.flow-item .flow-label{font-size:.85rem;color:#ffffffb3;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.flow-item .flow-value{font-size:1.1rem;color:#fff;font-weight:600;text-align:center}.flow-arrow{display:flex;justify-content:center;align-items:center;width:60px;height:60px;background:linear-gradient(145deg,#ffffff1a,#ffffff0d);border:1px solid rgba(255,255,255,.2);border-radius:50%;transition:all .3s ease}.flow-arrow.reverse{background:linear-gradient(145deg,#ff6b6b33,#ff6b6b1a);border-color:#ff6b6b4d}.flow-arrow .arrow-symbol{font-size:1.5rem;font-weight:700;color:#fffc;animation:pulse 2s ease-in-out infinite}.progress-bar{position:absolute;bottom:0;left:0;height:3px;background:linear-gradient(90deg,#0f8,#00cc6d);border-radius:0 0 1.5rem 1.5rem;transition:width .5s ease;box-shadow:0 0 8px #00ff8880}.trend-indicator{display:flex;align-items:center;margin-left:.5rem}.trend-arrow{font-size:1rem;font-weight:700;transition:all .3s ease}.trend-arrow.trend-up{color:#0f8;text-shadow:0 0 8px currentColor}.trend-arrow.trend-down{color:#ff6b6b;text-shadow:0 0 8px currentColor}.trend-arrow.trend-stable{color:#fff9}section{margin-bottom:3rem}html{box-sizing:border-box;min-height:100%;background:linear-gradient(135deg,#0f0f0f,#1a1a1a,#0a0a0a);background-attachment:fixed}body{min-height:100vh;margin:0;padding:0;display:flex;flex-direction:column;color:#fff;position:relative;background:radial-gradient(circle at 20% 20%,rgba(64,224,208,.1) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(255,107,107,.05) 0%,transparent 50%),radial-gradient(circle at 40% 60%,rgba(255,215,61,.05) 0%,transparent 50%);background-attachment:fixed}:root{--font-sans: "" }:root{--background: 0 0% 100%;--foreground: 240 10% 3.9%;--card: 0 0% 100%;--card-foreground: 240 10% 3.9%;--popover: 0 0% 100%;--popover-foreground: 240 10% 3.9%;--primary: 240 5.9% 10%;--primary-foreground: 0 0% 98%;--secondary: 240 4.8% 95.9%;--secondary-foreground: 240 5.9% 10%;--muted: 240 4.8% 95.9%;--muted-foreground: 240 3.8% 46.1%;--accent: 240 4.8% 95.9%;--accent-foreground: 240 5.9% 10%;--destructive: 0 84.2% 60.2%;--destructive-foreground: 0 0% 98%;--border: 240 5.9% 90%;--input: 240 5.9% 90%;--ring: 240 5.9% 10%;--radius: .5rem;color-scheme:light}.dark{--background: 240 10% 3.9%;--foreground: 0 0% 98%;--card: 240 10% 3.9%;--card-foreground: 0 0% 98%;--popover: 240 10% 3.9%;--popover-foreground: 0 0% 98%;--primary: 0 0% 98%;--primary-foreground: 240 5.9% 10%;--secondary: 240 3.7% 15.9%;--secondary-foreground: 0 0% 98%;--muted: 240 3.7% 15.9%;--muted-foreground: 240 5% 64.9%;--accent: 240 3.7% 15.9%;--accent-foreground: 0 0% 98%;--destructive: 0 62.8% 30.6%;--destructive-foreground: 0 0% 98%;--border: 240 3.7% 15.9%;--input: 240 3.7% 15.9%;--ring: 240 4.9% 83.9%;color-scheme:dark}@layer base{*{@apply border-border;}}