:root {
    --bg-main: #0a1122;
    --bg-card: #131c31;
    --text-main: #ffffff;
    --text-muted: #8b99af;
    --border-color: #2a3a5c;
    --accent-blue: #0088ff;
    --accent-green: #00ff88;
    --accent-red: #ff4444;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    background-color: var(--bg-main);
    color: var(--text-main);
    font-size: 11px;
    padding: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    transition: background-color 0.3s, color 0.3s;
}

/* Container for the rest of the dashboard */
.dashboard-content {
    padding: 0 10px 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-grow: 1;
}

/* --- FULL-WIDTH HEADER (PILL DESIGN) --- */
.top-header {
    width: 100%;
    padding: 8px 10px;
    background-color: var(--bg-main);
    transition: background 0.3s;
    margin-bottom: 2px;

}

.header-pill {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 50px;
    padding: 6px 18px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-icon {
    width: 32px;
    height: 32px;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid #059669;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.logo h1 { font-size: 16px; color: #ffffff; margin-bottom: 0px; letter-spacing: 0.5px; font-weight: 800; }
.logo h1 span { font-weight: 400; color: #38bdf8; }
.logo p { font-size: 9.5px; color: #94a3b8; }

.nav-menu { display: flex; gap: 6px; }
.nav-item {
    display: flex; align-items: center; gap: 6px; padding: 6px 14px;
    color: #cbd5e1; text-decoration: none; font-size: 12px;
    font-weight: 600; border-radius: 30px; transition: all 0.3s ease;
}
.nav-item svg { width: 15px; height: 15px; stroke-width: 2; }
.nav-item:hover { background: rgba(255, 255, 255, 0.05); color: #ffffff; }
.nav-item.active { color: #ffffff; background: var(--accent-blue); box-shadow: 0 2px 8px rgba(0, 136, 255, 0.4); }

.header-right { display: flex; align-items: center; gap: 15px; }

.theme-toggle {
    background: rgba(255,255,255,0.05); border: 1px solid #2a3a5c;
    color: #fff; width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; cursor: pointer; transition: all 0.3s ease;
}
.theme-toggle:hover { background: rgba(255,255,255,0.1); transform: scale(1.05); }

.status-wrapper { display: flex; flex-direction: column; justify-content: center; }
.status-online { display: flex; align-items: center; gap: 6px; color: #ffffff; font-size: 12px; font-weight: 700; }
.status-dot { width: 8px; height: 8px; background-color: #10b981; border-radius: 50%; box-shadow: 0 0 6px rgba(16, 185, 129, 0.8); }
.status-date { font-size: 10px; color: #94a3b8; margin-top: 2px; margin-left: 14px; }

/* --- TOP SUMMARY CARDS --- */
.top-summary { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 2px; }
.summary-card {
    background: linear-gradient(90deg, var(--glow-bg) 0%, #151b2b 70%);
    border: 1px solid var(--card-border); border-radius: 6px; padding: 10px 12px;
    display: flex; align-items: center; gap: 10px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    position: relative; overflow: hidden; transition: background 0.3s, border-color 0.3s;
}
.card-blue { --theme-color: #3b82f6; --card-border: #1e3a8a; --glow-bg: rgba(59, 130, 246, 0.2); --text-color: #ffffff; }
.card-green { --theme-color: #10b981; --card-border: #064e3b; --glow-bg: rgba(16, 185, 129, 0.2); --text-color: #10b981; }
.card-purple { --theme-color: #8b5cf6; --card-border: #4c1d95; --glow-bg: rgba(139, 92, 246, 0.2); --text-color: #ffffff; }
.card-orange { --theme-color: #f59e0b; --card-border: #78350f; --glow-bg: rgba(245, 158, 11, 0.2); --text-color: #f59e0b; }
.card-cyan { --theme-color: #0ea5e9; --card-border: #0c4a6e; --glow-bg: rgba(14, 165, 233, 0.2); --text-color: #ffffff; }
.card-lime { --theme-color: #34d399; --card-border: #064e3b; --glow-bg: rgba(52, 211, 153, 0.2); --text-color: #34d399; }

.card-icon svg { width: 22px; height: 22px; color: var(--theme-color); filter: drop-shadow(0px 0px 6px var(--theme-color)); }
.card-info { display: flex; flex-direction: column; gap: 2px; }
.card-info h3 { font-size: 10px; color: #e2e8f0; font-weight: 500; }
.card-info p { font-size: 15px; font-weight: 700; color: var(--text-color); letter-spacing: 0.5px; }
.card-info p span { font-size: 9px; font-weight: 600; margin-left: 2px; }

/* --- MAIN GRID (PHASE PANELS) --- */
.main-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; flex-grow: 1; }

.phase-panel {
    background-color: #0b1426; border-radius: 6px; display: flex; flex-direction: column;
    box-shadow: 0 0 0 1px #0b1426, 0 0 0 2px #034f72, inset 0 0 15px rgba(14, 165, 233, 0.1);
    overflow: hidden; transition: background-color 0.3s, box-shadow 0.3s;
}

.panel-header {
    padding: 8px 12px; font-weight: 700; font-size: 13px; color: #ffffff;
    display: flex; align-items: center; gap: 8px; border-bottom: 1px solid #1e3a8a;
    background: linear-gradient(90deg, #0f1c35 40%, rgba(15, 28, 53, 0.4) 100%),
    repeating-linear-gradient(to right, rgba(56, 189, 248, 0.1) 0, rgba(56, 189, 248, 0.1) 1px, transparent 1px, transparent 40px),
    repeating-linear-gradient(to bottom, rgba(56, 189, 248, 0.1) 0, rgba(56, 189, 248, 0.1) 1px, transparent 1px, transparent 20px) #0a1128;
}

.panel-header svg { width: 16px; height: 16px; color: #ffffff; filter: drop-shadow(0 0 5px #ffffff); }

.panel-stats { display: flex; justify-content: space-between; padding: 10px; gap: 8px; }
.stat-box { flex: 1; border-radius: 4px; padding: 8px 4px; text-align: center; display: flex; flex-direction: column; justify-content: center; transition: background 0.3s, border-color 0.3s; }
.stat-box h4 { font-size: 9.5px; margin-bottom: 4px; text-transform: uppercase; font-weight: 600; }
.stat-box p { font-size: 14px; font-weight: 700; }
.stat-box p span { font-size: 10px; font-weight: 600; margin-left: 2px;}

.s-inv { border: 1px solid #1e3a8a; background: rgba(30, 58, 138, 0.2); }
.s-inv h4 { color: #93c5fd; } .s-inv p { color: #ffffff; }
.s-mfm { border: 1px solid #059669; background: rgba(5, 150, 105, 0.15); box-shadow: inset 0 0 10px rgba(5, 150, 105, 0.2);}
.s-mfm h4 { color: #34d399; } .s-mfm p { color: #4ade80; text-shadow: 0 0 5px rgba(74, 222, 128, 0.4);}
.s-inv-tod { border: 1px solid #1e3a8a; background: rgba(30, 58, 138, 0.2); }
.s-inv-tod h4 { color: #e2e8f0; } .s-inv-tod p { color: #ffffff; }
.s-mfm-tod { border: 1px solid #6d28d9; background: rgba(109, 40, 217, 0.2); }
.s-mfm-tod h4 { color: #c4b5fd; } .s-mfm-tod p { color: #ffffff; }
.s-pr { border: 1px solid #1d4ed8; background: rgba(29, 78, 216, 0.2); }
.s-pr h4 { color: #e2e8f0; } .s-pr p { color: #ffffff; }

.panel-inner-body { margin: 0 10px 10px 10px; border: 1px solid #16325B; border-radius: 6px; display: flex; background: #091a33; transition: background 0.3s, border-color 0.3s; }
.inverter-table { width: 280px; border-right: 1px solid #16325B; display: flex; flex-direction: column; }
.tbl-header, .tbl-row { display: grid; grid-template-columns: 0.9fr 1.2fr 1.5fr; }
.tbl-header span, .tbl-row span { text-align: center; white-space: nowrap; display: flex; align-items: center; justify-content: center; padding: 8px 6px; }
.tbl-header { font-size: 11px; color: #e2e8f0; font-weight: 600; border-bottom: 1px solid #16325B; }
.tbl-row { font-size: 12px; color: #f8fafc; font-weight: 500; flex-grow: 1; }
.tbl-header span:nth-child(2), .tbl-row span:nth-child(2) { border-left: 1px solid #16325B; border-right: 1px solid #16325B; }
.tbl-row span:first-child { font-weight: 700; color: #ffffff; }

.smb-section { flex-grow: 1; display: flex; flex-direction: column; }
.smb-header { font-size: 11px; color: #e2e8f0; font-weight: 600; padding: 8px 10px; border-bottom: 1px solid #16325B; }
.smb-grid { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px; }
.smb-item { background: #08291f; border: 1px solid #1a5c40; color: #ffffff; padding: 4px 6px; border-radius: 4px; font-size: 10.5px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.smb-item span:last-child { font-size: 9px; color: #4ade80; }

/* --- BOTTOM SECTION --- */
.bottom-section { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.bottom-panel { background-color: #0b1426; border-radius: 6px; padding: 12px; display: flex; flex-direction: column; box-shadow: 0 0 0 1px #0b1426, 0 0 0 2px #043c57, inset 0 0 15px rgba(14, 165, 233, 0.1); transition: background-color 0.3s, box-shadow 0.3s; }
.bottom-header { font-weight: 700; font-size: 13px; color: #ffffff; display: flex; align-items: center; gap: 8px; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; }
.bottom-header svg { width: 18px; height: 18px; color: #38bdf8; filter: drop-shadow(0 0 5px #38bdf8); }

.export-grid-top { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 8px; }
.export-grid-bottom { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

.ex-card { border: 1px solid #1e3a8a; border-radius: 6px; padding: 8px 10px; background: rgba(15, 23, 42, 0.4); display: flex; flex-direction: column; justify-content: center; transition: background 0.3s, border-color 0.3s; }
.ex-card-title { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: #cbd5e1; margin-bottom: 4px; font-weight: 500; }
.ex-card-title svg { width: 15px; height: 15px; color: #38bdf8; }
.ex-card-value { font-size: 14px; font-weight: 700; color: #ffffff; margin-left: 21px; }
.ex-card-value span { font-size: 10px; font-weight: 600; margin-left: 2px; }

.exc-today { border-color: #2563eb; background: rgba(37, 99, 235, 0.15); box-shadow: inset 0 0 10px rgba(37, 99, 235, 0.2); }
.exc-today .ex-card-title svg { color: #60a5fa; }
.exc-import { border-color: #991b1b; background: rgba(153, 27, 27, 0.15); box-shadow: inset 0 0 10px rgba(153, 27, 27, 0.2); }
.exc-import .ex-card-title { color: #fca5a5; }
.exc-import .ex-card-title svg { color: #ef4444; }
.exc-import .ex-card-value { color: #f87171; text-shadow: 0 0 5px rgba(248, 113, 113, 0.4); }
.exc-green { border-color: #059669; background: rgba(5, 150, 105, 0.15); box-shadow: inset 0 0 10px rgba(5, 150, 105, 0.2); }
.exc-green .ex-card-title svg { color: #34d399; }
.exc-green .ex-card-value { color: #4ade80; text-shadow: 0 0 5px rgba(74, 222, 128, 0.4); }
.exc-wms .ex-card-value { color: #ffffff; text-shadow: none;}

.env-panel .bottom-header svg { color: #10b981; filter: none; }
.weather-container { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; height: 100%; }
.weather-box { border: 1px solid #1e3a8a; border-radius: 6px; background: rgba(15, 23, 42, 0.6); display: flex; flex-direction: column; padding: 4px 10px; transition: background 0.3s, border-color 0.3s; }

.right-box {
    position: relative; z-index: 1;
    background: linear-gradient(to right, rgba(15, 23, 42, 0.95) 40%, rgba(15, 23, 42, 0.75) 100%), 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Crect width='200' height='200' fill='%23e0f2fe'/%3E%3Cpath d='M 40 80 Q 50 60 70 70 Q 90 50 110 70 Q 130 60 140 80 Z' fill='%23ffffff' opacity='0.6'/%3E%3Cpath d='M 0 150 Q 50 120 120 140 T 200 130 L 200 200 L 0 200 Z' fill='%2386efac'/%3E%3Cpath d='M -20 200 Q 40 140 120 170 T 220 150 L 220 200 Z' fill='%234ade80'/%3E%3Cg stroke='%230284c7' stroke-width='2' transform='translate(160, 130)'%3E%3Cline x1='0' y1='0' x2='0' y2='40'/%3E%3Ccircle cx='0' cy='0' r='3' fill='%230284c7'/%3E%3Cline x1='0' y1='0' x2='-15' y2='-20'/%3E%3Cline x1='0' y1='0' x2='15' y2='-20'/%3E%3Cline x1='0' y1='0' x2='0' y2='25'/%3E%3C/g%3E%3Cg transform='translate(100, 160)'%3E%3Cpolygon points='0,20 60,10 50,-10 -10,0' fill='%230ea5e9' stroke='%23ffffff' stroke-width='1.5'/%3E%3Cline x1='15' y1='15' x2='5' y2='-5' stroke='%23ffffff' stroke-width='1'/%3E%3Cline x1='30' y1='10' x2='20' y2='-10' stroke='%23ffffff' stroke-width='1'/%3E%3Cline x1='45' y1='5' x2='35' y2='-10' stroke='%23ffffff' stroke-width='1'/%3E%3Cline x1='-5' y1='10' x2='55' y2='0' stroke='%23ffffff' stroke-width='1'/%3E%3C/g%3E%3Ccircle cx='50' cy='150' r='15' fill='%2315803d'/%3E%3Ccircle cx='65' cy='155' r='10' fill='%2316a34a'/%3E%3C/svg%3E") no-repeat right bottom;
    background-size: cover, auto 100%;
}

.w-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid #1e3a8a; }
.w-row:last-child { border-bottom: none; }
.w-label { display: flex; align-items: center; gap: 8px; color: #cbd5e1; font-size: 11.5px; font-weight: 500; }
.w-label svg { width: 15px; height: 15px; color: #3b82f6; }
.icon-sun svg { color: #f59e0b; }
.w-val { color: #ffffff; font-size: 12px; font-weight: 700; }
.w-val span { font-size: 10px; font-weight: 600; color: #94a3b8; margin-left: 2px; }

/* --- LIGHT MODE CSS --- */
body.light-mode { background-color: #e2e8f0; color: #0f172a; }
body.light-mode .top-header { background: #e0f2fe url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100'%3E%3Cpath fill='%23bae6fd' fill-opacity='0.4' d='M0,32L120,42.7C240,53,480,75,720,74.7C960,75,1200,53,1320,42.7L1440,32L1440,0L1320,0C1200,0,960,0,720,0C480,0,240,0,120,0L0,0Z'%3E%3C/path%3E%3C/svg%3E") no-repeat center bottom; background-size: cover; border-bottom: 1px solid #bae6fd; }
body.light-mode .header-pill { background-color: #ffffff; border: none; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); }
body.light-mode .logo-icon { background: #ecfdf5; border-color: #6ee7b7; }
body.light-mode .logo h1 { color: #1e3a8a; } body.light-mode .logo h1 span { color: #38bdf8; }
body.light-mode .logo p { color: #64748b; } body.light-mode .status-online { color: #1e3a8a; }
body.light-mode .status-date { color: #64748b; }
body.light-mode .theme-toggle { border-color: #cbd5e1; background: #ffffff; color: #0f172a; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
body.light-mode .theme-toggle:hover { background: #f8fafc; }
body.light-mode .nav-item { color: #1e3a8a; } body.light-mode .nav-item svg { color: #475569; }
body.light-mode .nav-item:hover { color: #1d4ed8; background: #f1f5f9; }
body.light-mode .nav-item.active { color: #ffffff; background: #0ea5e9; box-shadow: 0 2px 8px rgba(14, 165, 233, 0.3); }
body.light-mode .nav-item.active svg { color: #ffffff; filter: none; }
body.light-mode .summary-card { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
body.light-mode .card-blue { background: #eff6ff; border-color: #bfdbfe; } body.light-mode .card-blue .card-info h3 { color: #1e3a8a; } body.light-mode .card-blue .card-info p { color: #1d4ed8; }
body.light-mode .card-green { background: #f0fdf4; border-color: #bbf7d0; } body.light-mode .card-green .card-info h3 { color: #064e3b; } body.light-mode .card-green .card-info p { color: #15803d; }
body.light-mode .card-purple { background: #faf5ff; border-color: #e9d5ff; } body.light-mode .card-purple .card-info h3 { color: #4c1d95; } body.light-mode .card-purple .card-info p { color: #6d28d9; }
body.light-mode .card-orange { background: #fffbeb; border-color: #fde68a; } body.light-mode .card-orange .card-info h3 { color: #78350f; } body.light-mode .card-orange .card-info p { color: #b45309; }
body.light-mode .card-cyan { background: #ecfeff; border-color: #a5f3fc; } body.light-mode .card-cyan .card-info h3 { color: #164e63; } body.light-mode .card-cyan .card-info p { color: #0369a1; }
body.light-mode .card-lime { background: #f7fee7; border-color: #d9f99d; } body.light-mode .card-lime .card-info h3 { color: #3f6212; } body.light-mode .card-lime .card-info p { color: #4d7c0f; }
body.light-mode .phase-panel { background-color: #ffffff; box-shadow: 0 0 0 1px #cbd5e1; }
body.light-mode .panel-header { background: #f8fafc; border-bottom-color: #cbd5e1; color: #0f172a !important; }
body.light-mode .panel-header svg { color: #0284c7; filter: none; }
body.light-mode .stat-box { box-shadow: 0 2px 4px rgba(0,0,0,0.03); }
body.light-mode .s-inv { background: #eff6ff; border-color: #93c5fd; } body.light-mode .s-inv h4 { color: #1e40af; } body.light-mode .s-inv p { color: #1d4ed8; text-shadow: none; }
body.light-mode .s-mfm { background: #ecfdf5; border-color: #6ee7b7; box-shadow: none; } body.light-mode .s-mfm h4 { color: #065f46; } body.light-mode .s-mfm p { color: #047857; text-shadow: none; }
body.light-mode .s-inv-tod { background: #f8fafc; border-color: #cbd5e1; } body.light-mode .s-inv-tod h4 { color: #334155; } body.light-mode .s-inv-tod p { color: #0f172a; text-shadow: none; }
body.light-mode .s-mfm-tod { background: #faf5ff; border-color: #d8b4fe; } body.light-mode .s-mfm-tod h4 { color: #5b21b6; } body.light-mode .s-mfm-tod p { color: #6d28d9; text-shadow: none; }
body.light-mode .s-pr { background: #f0f9ff; border-color: #7dd3fc; } body.light-mode .s-pr h4 { color: #0369a1; } body.light-mode .s-pr p { color: #0284c7; text-shadow: none; }
body.light-mode .panel-inner-body { background: #ffffff; border-color: #cbd5e1; }
body.light-mode .inverter-table { border-right-color: #cbd5e1; }
body.light-mode .tbl-header { border-bottom-color: #cbd5e1; color: #475569; }
body.light-mode .tbl-header span:nth-child(2), body.light-mode .tbl-row span:nth-child(2) { border-color: #cbd5e1; }
body.light-mode .tbl-row, body.light-mode .tbl-row span:first-child { color: #0f172a; }
body.light-mode .smb-header { border-bottom-color: #cbd5e1; color: #475569; }
body.light-mode .smb-item { background: green ; border-color: #adb9be; color: #f1f2f3; font-weight: 700; }
body.light-mode .smb-item span:last-child { color: #059669; }
body.light-mode .bottom-panel { background-color: #ffffff; box-shadow: 0 0 0 1px #cbd5e1; }
body.light-mode .bottom-header { color: #1e3a8a; } body.light-mode .bottom-header svg { filter: none; }
body.light-mode .ex-card { background: #ffffff; border-color: #cbd5e1; box-shadow: 0 2px 5px rgba(0,0,0,0.03); }
body.light-mode .ex-card-title { color: #475569; } body.light-mode .ex-card-value { color: #0f172a; }
body.light-mode .exc-today { background: #eff6ff; border-color: #93c5fd; box-shadow: none; }
body.light-mode .exc-today .ex-card-title { color: #1e40af; } body.light-mode .exc-today .ex-card-title svg { color: #2563eb; } body.light-mode .exc-today .ex-card-value { color: #1d4ed8; }
body.light-mode .exc-import { background: #fef2f2; border-color: #fca5a5; box-shadow: none; }
body.light-mode .exc-import .ex-card-title { color: #991b1b; } body.light-mode .exc-import .ex-card-title svg { color: #dc2626; } body.light-mode .exc-import .ex-card-value { color: #dc2626; text-shadow: none; }
body.light-mode .exc-green { background: #f0fdf4; border-color: #86efac; box-shadow: none; }
body.light-mode .exc-green .ex-card-title { color: #166534; } body.light-mode .exc-green .ex-card-title svg { color: #16a34a; } body.light-mode .exc-green .ex-card-value { color: #15803d; text-shadow: none; }
body.light-mode .exc-wms .ex-card-value { color: #15803d !important; text-shadow: none; }
body.light-mode .env-panel { border-color: #e0f2fe; box-shadow: inset 0 0 0 1px #e0f2fe; }
body.light-mode .weather-box { background: #ffffff; border-color: #bfdbfe; }
body.light-mode .w-row { border-bottom-color: #e0f2fe; } body.light-mode .w-label { color: #64748b; }
body.light-mode .w-val { color: #1e3a8a; } body.light-mode .w-val span { color: #3b82f6; }
body.light-mode .right-box {
    background: linear-gradient(to right, #ffffff 40%, rgba(255, 255, 255, 0.8) 75%, transparent 100%), 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Crect width='200' height='200' fill='%23e0f2fe'/%3E%3Cpath d='M 40 80 Q 50 60 70 70 Q 90 50 110 70 Q 130 60 140 80 Z' fill='%23ffffff' opacity='0.6'/%3E%3Cpath d='M 0 150 Q 50 120 120 140 T 200 130 L 200 200 L 0 200 Z' fill='%2386efac'/%3E%3Cpath d='M -20 200 Q 40 140 120 170 T 220 150 L 220 200 Z' fill='%234ade80'/%3E%3Cg stroke='%230284c7' stroke-width='2' transform='translate(160, 130)'%3E%3Cline x1='0' y1='0' x2='0' y2='40'/%3E%3Ccircle cx='0' cy='0' r='3' fill='%230284c7'/%3E%3Cline x1='0' y1='0' x2='-15' y2='-20'/%3E%3Cline x1='0' y1='0' x2='15' y2='-20'/%3E%3Cline x1='0' y1='0' x2='0' y2='25'/%3E%3C/g%3E%3Cg transform='translate(100, 160)'%3E%3Cpolygon points='0,20 60,10 50,-10 -10,0' fill='%230ea5e9' stroke='%23ffffff' stroke-width='1.5'/%3E%3Cline x1='15' y1='15' x2='5' y2='-5' stroke='%23ffffff' stroke-width='1'/%3E%3Cline x1='30' y1='10' x2='20' y2='-10' stroke='%23ffffff' stroke-width='1'/%3E%3Cline x1='45' y1='5' x2='35' y2='-10' stroke='%23ffffff' stroke-width='1'/%3E%3Cline x1='-5' y1='10' x2='55' y2='0' stroke='%23ffffff' stroke-width='1'/%3E%3C/g%3E%3Ccircle cx='50' cy='150' r='15' fill='%2315803d'/%3E%3Ccircle cx='65' cy='155' r='10' fill='%2316a34a'/%3E%3C/svg%3E") no-repeat right bottom;
    background-size: cover, auto 100%;
}