.intro{font-size:var(--font-size-lg);color:var(--color-text-light);margin-bottom:var(--space-lg)}.mode-tabs{display:flex;gap:var(--space-xs);margin-bottom:var(--space-lg);border-bottom:2px solid var(--color-border);padding-bottom:var(--space-xs)}.mode-tab{padding:var(--space-sm) var(--space-lg);border:none;background:none;font-size:var(--font-size-base);font-weight:500;color:var(--color-text-light);cursor:pointer;border-radius:var(--border-radius) var(--border-radius) 0 0;transition:all .2s}.mode-tab:hover{background:var(--color-bg-alt)}.mode-tab.active{color:var(--color-primary);background:var(--color-bg-alt);border-bottom:2px solid var(--color-primary);margin-bottom:-2px}.mode-content{display:none}.mode-content.active{display:block}.calculator-form,.settings-section,.devices-section,.summary-section,.chart-section{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--border-radius);padding:var(--space-lg);margin-bottom:var(--space-lg)}.form-grid,.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-md)}.form-group{display:flex;flex-direction:column;gap:var(--space-xs)}.form-group label{font-weight:500;font-size:var(--font-size-sm);display:flex;align-items:center;gap:var(--space-xs);flex-wrap:wrap}.tooltip{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:var(--color-text-light);color:#fff;font-size:11px;font-weight:600;cursor:help;flex-shrink:0}.tooltip:hover{background:var(--color-primary)}.input-with-unit{display:flex;align-items:stretch}.input-with-unit input{flex:1;min-width:0;padding:var(--space-sm);border:1px solid var(--color-border);border-radius:var(--border-radius) 0 0 var(--border-radius);font-size:var(--font-size-base)}.input-with-unit .unit{padding:var(--space-sm) var(--space-md);background:var(--color-bg-alt);border:1px solid var(--color-border);border-left:none;border-radius:0 var(--border-radius) var(--border-radius) 0;font-size:var(--font-size-sm);color:var(--color-text-light);white-space:nowrap}.form-actions{display:flex;gap:var(--space-sm);margin-top:var(--space-lg)}.btn{padding:var(--space-sm) var(--space-lg);border:none;border-radius:var(--border-radius);font-size:var(--font-size-base);font-weight:500;cursor:pointer;transition:all .2s}.btn-primary{background:var(--color-primary);color:#fff}.btn-primary:hover{background:var(--color-primary-dark)}.btn-secondary{background:var(--color-bg-alt);color:var(--color-text);border:1px solid var(--color-border)}.btn-secondary:hover{background:var(--color-border)}.btn-danger{background:#dc3545;color:#fff}.btn-danger:hover{background:#c82333}.btn-sm{padding:var(--space-xs) var(--space-md);font-size:var(--font-size-sm)}.results-box{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--border-radius);padding:var(--space-lg);margin-top:var(--space-lg)}.results-box h3{margin-top:0;margin-bottom:var(--space-md)}.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-md)}.result-item{text-align:center;padding:var(--space-md);background:var(--color-bg-alt);border-radius:var(--border-radius)}.result-item.main{background:var(--color-primary);color:#fff}.result-item .label{display:block;font-size:var(--font-size-sm);opacity:.8;margin-bottom:var(--space-xs)}.result-item .value{display:block;font-size:var(--font-size-lg);font-weight:600}.result-item.main .value{font-size:var(--font-size-xl)}.advanced-settings{margin-top:var(--space-md)}.advanced-settings summary{cursor:pointer;font-weight:500;color:var(--color-primary);padding:var(--space-sm) 0}.advanced-settings[open] summary{margin-bottom:var(--space-md)}.checkbox-group label{display:flex;align-items:center;gap:var(--space-xs);font-weight:400;cursor:pointer}.radio-group{display:flex;flex-direction:column;gap:var(--space-xs)}.radio-group label{display:flex;align-items:center;gap:var(--space-xs);font-weight:400;cursor:pointer}.day-night-fields{display:contents}.day-night-fields[hidden]{display:none}.devices-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--space-md);margin-bottom:var(--space-md)}.devices-header h3{margin:0}.devices-actions{display:flex;gap:var(--space-sm);flex-wrap:wrap}.preset-dropdown{padding:var(--space-xs) var(--space-md);border:1px solid var(--color-border);border-radius:var(--border-radius);font-size:var(--font-size-sm);background:var(--color-bg);min-width:180px}.devices-list{display:flex;flex-direction:column;gap:var(--space-md)}.no-devices-msg{text-align:center;color:var(--color-text-light);padding:var(--space-xl);background:var(--color-bg-alt);border-radius:var(--border-radius)}.device-card{background:var(--color-bg-alt);border:1px solid var(--color-border);border-radius:var(--border-radius);padding:var(--space-md)}.device-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-md)}.device-name-input{font-size:var(--font-size-base);font-weight:600;padding:var(--space-xs) var(--space-sm);border:1px solid transparent;border-radius:var(--border-radius);background:transparent;width:200px}.device-name-input:hover,.device-name-input:focus{border-color:var(--color-border);background:var(--color-bg)}.device-card-actions{display:flex;gap:var(--space-xs)}.device-card-actions button{padding:var(--space-xs);background:none;border:none;cursor:pointer;color:var(--color-text-light);font-size:var(--font-size-sm)}.device-card-actions button:hover{color:var(--color-text)}.device-card-actions .delete-btn:hover{color:#dc3545}.device-card-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--space-sm)}.device-card-fields .form-group{gap:2px}.device-card-fields label{font-size:var(--font-size-xs)}.device-card-fields input{padding:var(--space-xs);font-size:var(--font-size-sm)}.device-card-fields .unit{padding:var(--space-xs) var(--space-sm);font-size:var(--font-size-xs)}.device-result{margin-top:var(--space-sm);padding-top:var(--space-sm);border-top:1px solid var(--color-border);font-size:var(--font-size-sm);color:var(--color-text-light)}.device-result strong{color:var(--color-text)}.summary-section h3{margin-top:0}.summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-md)}.summary-item{text-align:center;padding:var(--space-md);background:var(--color-bg-alt);border-radius:var(--border-radius)}.summary-item.main{background:var(--color-primary);color:#fff}.summary-item.yearly{background:var(--color-secondary, #28a745);color:#fff}.summary-item .label{display:block;font-size:var(--font-size-sm);opacity:.8;margin-bottom:var(--space-xs)}.summary-item .value{display:block;font-size:var(--font-size-lg);font-weight:600}.top-expenses{margin-top:var(--space-lg);padding-top:var(--space-lg);border-top:1px solid var(--color-border)}.top-expenses h4{margin-top:0;margin-bottom:var(--space-md)}.top-expenses ol{margin:0;padding-left:var(--space-lg)}.top-expenses li{margin-bottom:var(--space-xs)}.top-expenses .expense-name{font-weight:500}.top-expenses .expense-cost{color:var(--color-text-light)}.chart-section h3{margin-top:0}.chart-container{position:relative;height:300px}.data-actions{display:flex;gap:var(--space-sm);flex-wrap:wrap;margin-bottom:var(--space-md)}.import-label{display:inline-flex;align-items:center;cursor:pointer}.example-link{font-size:var(--font-size-sm);color:var(--color-primary);text-decoration:underline;align-self:center}.example-link:hover{text-decoration:none}.persistence-notice{font-size:var(--font-size-sm);color:var(--color-text-light);text-align:center}@media (max-width: 768px){.mode-tabs{gap:0}.mode-tab{padding:var(--space-sm) var(--space-md);font-size:var(--font-size-sm)}.chart-container{height:250px}}@media (max-width: 600px){.result-grid{grid-template-columns:repeat(2,1fr)}.result-item .value{font-size:var(--font-size-base)}.result-item.main .value{font-size:var(--font-size-lg)}.devices-header{flex-direction:column;align-items:stretch}.devices-actions{flex-direction:column}.preset-dropdown{width:100%}.device-card-fields{grid-template-columns:repeat(2,1fr)}.device-name-input{width:100%;max-width:180px}.summary-grid{grid-template-columns:repeat(2,1fr)}.summary-item .value{font-size:var(--font-size-base)}.data-actions{flex-direction:column;align-items:stretch}.data-actions .btn{width:100%;text-align:center}.example-link{text-align:center}}@media (max-width: 400px){.result-grid,.device-card-fields,.summary-grid{grid-template-columns:1fr}.device-card-header{flex-direction:column;align-items:flex-start;gap:var(--space-sm)}.device-name-input{max-width:100%}.device-card-actions{width:100%;justify-content:flex-end}}