:root{--primary-color: #6eb323;--primary-hover-color: #11462e;--primary-color-disabled: #a5c96f;--text-color: #171717;--background-color: #ffffff;--input-background-color: #f9f9f9;--input-border-color: #6eb323;--input-focus-border-color: #11462e;--table-border-color: #dddddd;--table-stripe-color-even: #f2f2f2;--table-stripe-color-odd: #ffffff;--table-stripe-color-alarm: #ff0f0f4a;--tooltip-background-color: rgba(255, 255, 255, .8);--box-shadow: 0px 0px 5px rgba(0, 0, 0, .2)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;background-color:var(--background-color);color:var(--text-color);line-height:1.6;padding:10px}input[type=text],input[type=email],input[type=password],input[type=number],input[type=tel],select,textarea{width:100%;padding:12px;margin-bottom:10px;border:1px solid var(--input-border-color);border-radius:4px;font-size:16px;background-color:var(--input-background-color);color:var(--text-color);height:auto;line-height:1.6}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--input-focus-border-color);box-shadow:var(--box-shadow)}select{height:48px;line-height:normal;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-sizing:border-box;padding-right:36px;background:var(--input-background-color) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="%23444444"><path d="M5.516 6.547a.714.714 0 0 1 1.03 0L10 10l3.453-3.453a.714.714 0 0 1 1.03 1.03l-4 4a.714.714 0 0 1-1.03 0l-4-4a.714.714 0 0 1 0-1.03z"/></svg>') no-repeat right 10px center}input:disabled,select:disabled,textarea:disabled{background-color:var(--primary-color-disabled);cursor:not-allowed}button,input[type=submit],input[type=button]{width:100%;padding:12px;margin:6px 0;background-color:var(--primary-color);border:none;border-radius:4px;color:var(--background-color);font-size:16px;cursor:pointer;transition:background-color .3s ease}button:hover,input[type=submit]:hover,input[type=button]:hover{background-color:var(--primary-hover-color)}button:disabled,input[type=submit]:disabled,input[type=button]:disabled{background-color:var(--primary-color-disabled);cursor:not-allowed}table{width:100%;border-collapse:collapse;margin-bottom:20px}th{padding:12px;text-align:left;background-color:var(--primary-hover-color);color:var(--background-color);border-bottom:1px solid var(--table-border-color)}td{padding:12px;text-align:left;border-bottom:1px solid var(--table-border-color)}tbody tr:nth-child(2n){background-color:var(--table-stripe-color-even)}tbody tr.alarm:nth-child(2n){background:repeating-linear-gradient(45deg,var(--table-stripe-color-even),var(--table-stripe-color-even) 10px,var(--table-stripe-color-alarm) 10px,var(--table-stripe-color-alarm) 20px)}tbody tr:nth-child(odd){background-color:var(--table-stripe-color-odd)}tbody tr.alarm:nth-child(odd){background:repeating-linear-gradient(45deg,var(--table-stripe-color-odd),var(--table-stripe-color-odd) 10px,var(--table-stripe-color-alarm) 10px,var(--table-stripe-color-alarm) 20px)}@media only screen and (max-width: 600px){body{padding:5px}input[type=text],input[type=email],input[type=password],input[type=number],input[type=tel],select,textarea,button,input[type=submit],input[type=button],th,td{padding:10px;font-size:14px}}body,input,button,select,textarea{background-color:var(--background-color);color:var(--text-color)}button,input[type=submit],input[type=button]{background-color:var(--primary-color);color:var(--background-color)}button:hover,input[type=submit]:hover,input[type=button]:hover{background-color:var(--primary-hover-color);color:var(--background-color)}.icon-button{width:40px;height:40px;padding:5px;margin:0 6px;display:inline-flex;justify-content:center;align-items:center;border-radius:4px;background-color:var(--primary-color);color:#fff}.icon-button:hover,.icon-button:focus{background-color:var( --primary-hover-color );outline:none}.icon-button:disabled{background-color:var(--primary-color-disabled);outline:none}@media only screen and (max-width: 600px){table.responsive,table.responsive thead,table.responsive tbody,table.responsive th,table.responsive td,table.responsive tr{display:block}table.responsive thead{display:none}table.responsive tr{margin-bottom:10px;display:flex;flex-direction:column;border:1px solid var(--table-border-color);padding:10px;background-color:var(--background-color);overscroll-behavior-y:none}table.responsive tr:nth-child(2n){background-color:var( --table-stripe-color-even )}table.responsive tr:nth-child(odd){background-color:var( --table-stripe-color-odd )}table.responsive td{display:flex;justify-content:space-between;padding:8px;border-bottom:1px solid var(--table-border-color);position:relative;text-align:left}table.responsive td:before{content:attr(data-label);font-weight:700;text-transform:uppercase;color:var(--text-color);flex:1 1 auto;padding-right:10px}table.responsive td:has(.recipient-entry),table.responsive td.recipients-column{flex-direction:column;align-items:flex-start}table.responsive td .recipient-entry{display:block;width:100%;margin-bottom:2px}}.recipients-list{list-style-type:none;padding:0;margin:0}.recipients-list li{display:grid;grid-template-columns:auto 1fr;align-items:center;padding:8px 0;grid-gap:10px}.recipients-list li>span{width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.recipients-list li>button{margin-left:10px}.Root{text-align:center}.Root-logo{height:40vmin;pointer-events:none}@media (prefers-reduced-motion: no-preference){.Root-logo{animation:Root-logo-spin infinite 20s linear}}.Root-header{background-color:#282c34;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:calc(10px + 2vmin);color:#fff}.Root-link{color:#61dafb}@keyframes Root-logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.login-page{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;color:#333}.login-page h1{margin-bottom:.25em}.login-page p{margin-top:0;margin-bottom:2em;color:#666}.login-button{padding:12px 32px;font-size:1rem;border:none;border-radius:4px;background-color:var(--primary-color);color:#fff;cursor:pointer}.login-button:hover{opacity:.9}.nav-container{position:fixed;top:10px;left:10px;z-index:1000}.hamburger-menu{display:block;cursor:pointer}.bar{width:25px;height:3px;background-color:#333;margin:5px 0;transition:.4s}.nav-menu{position:absolute;top:35px;left:0;width:180px;background-color:#fff;padding:10px;box-shadow:0 2px 5px #0000001a;display:none;list-style:none;margin:0}.nav-menu.show{display:block}.nav-menu li{transition:background-color .3s ease}.nav-menu li:hover{background-color:#f0f0f0}.nav-menu li>a{text-decoration:none;color:#333;display:block;padding:8px 12px}.nav-menu li>button{text-decoration:none;color:#333;display:block;padding:8px 12px;border:none;background-color:inherit;font:inherit;margin:inherit}.change .bar:nth-child(1){transform:translateY(8px) rotate(45deg)}.change .bar:nth-child(2){opacity:0}.change .bar:nth-child(3){transform:translateY(-8px) rotate(-45deg)}.menu-divider{height:2px;background-color:#ccc;margin:10px 0}h2{padding-left:50px}.page-selector-trigger{margin-left:50px}.page-selector-trigger h2{padding-left:0}@media only screen and (max-width: 600px){h2{padding-left:40px}.page-selector-trigger{margin-left:40px}}.notifications-container{position:fixed;bottom:0;left:50%;transform:translate(-50%);z-index:1000;display:flex;flex-direction:column;align-items:center;gap:.5rem;pointer-events:none}.notification{display:flex;flex-direction:column;gap:.25rem;padding:.6rem .6rem .6rem 1rem;border-radius:6px 6px 0 0;box-shadow:0 4px 12px #0003;pointer-events:auto;animation:notification-pop-up .25s cubic-bezier(.34,1.56,.64,1);width:min(320px,calc(100vw - 2rem))}.notification__header{display:flex;align-items:center;gap:.75rem}.notification__title{flex:1;font-weight:600;font-size:1rem}@keyframes notification-pop-up{0%{transform:translateY(1rem);opacity:0}to{transform:translateY(0);opacity:1}}.notification--success{background-color:var(--color-success, #d4edda);border:1px solid var(--color-success-border, #c3e6cb);color:var(--color-success-text, #155724)}.notification--error{background-color:var(--color-error, #f8d7da);border:1px solid var(--color-error-border, #f5c6cb);color:var(--color-error-text, #721c24)}.notification--warning{background-color:var(--color-warning, #fff3cd);border:1px solid var(--color-warning-border, #ffeeba);color:var(--color-warning-text, #856404)}.notification--info{background-color:var(--color-info, #d1ecf1);border:1px solid var(--color-info-border, #bee5eb);color:var(--color-info-text, #0c5460)}.notification__message{flex:1;overflow-wrap:break-word}.notification__dismiss{width:1.5rem;background:transparent;border:none;font-size:.9rem;line-height:1.4;cursor:pointer;padding:0;color:#777;opacity:.8;transition:opacity .2s}.notification__dismiss:hover{opacity:1;background-color:transparent;color:#777}.notification__hint{font-size:.75rem;opacity:.75}.notification__details{background:transparent;border:none;align-self:center;font-size:.7rem;cursor:pointer;padding:0;color:#777;opacity:.8;text-decoration:underline;transition:opacity .2s}.notification__details:hover{opacity:1;background-color:transparent;color:#777}.page{max-width:1400px;margin:0 auto}.page-header{display:flex;align-items:center;gap:16px;margin-bottom:24px;flex-wrap:wrap}.page-header h2{margin:0}.header-actions{margin-left:auto;display:flex;gap:8px;align-items:center}.form-panel,.edit-section{background-color:var(--input-background-color);border:1px solid var(--table-border-color);border-radius:8px;padding:16px 20px;margin-bottom:24px}.form-panel-title,.edit-section>h3{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#555;margin:0 0 16px}.form-grid{display:grid;grid-template-columns:1fr;gap:12px 16px;max-width:640px;margin-bottom:16px}.form-grid-2{grid-template-columns:repeat(2,1fr);max-width:640px}.form-grid-full{grid-column:1 / -1}.form-field{display:flex;flex-direction:column;font-size:13px;font-weight:600;color:#555;gap:4px}.form-field input,.form-field select,.form-field textarea{margin-bottom:0;font-weight:400}.form-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:4px}.form-panel button:not(.icon-button),.form-panel input[type=submit],.form-panel input[type=button],.edit-section button:not(.icon-button),.edit-section input[type=submit],.edit-section input[type=button],.page-header button:not(.icon-button),.page-header input[type=button],.form-actions button:not(.icon-button),.form-actions input[type=submit],.form-actions input[type=button]{width:auto;padding:10px 20px;margin:4px 0;white-space:nowrap}.edit-section button.btn-sm,.form-panel button.btn-sm{padding:6px 12px;font-size:14px}button.btn-secondary,input[type=button].btn-secondary{background-color:var(--input-background-color);color:var(--text-color);border:1px solid var(--table-border-color)}button.btn-secondary:hover,input[type=button].btn-secondary:hover{background-color:var(--table-border-color)}button.btn-danger,input[type=button].btn-danger,.icon-button.danger{background-color:#dc2626}button.btn-danger:hover,input[type=button].btn-danger:hover,.icon-button.danger:hover{background-color:#b91c1c}.checkbox-group{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}.checkbox-field{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:14px;font-weight:400;color:var(--text-color)}.checkbox-field input[type=checkbox]{width:auto;margin:0}.access-list{margin-bottom:16px}.access-entry{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--table-border-color);font-size:14px}.access-entry-label{flex:1}.field-label-row{display:flex;align-items:center;gap:5px}.field-error{font-size:12px;font-weight:400;color:#dc2626;margin-top:2px}.empty-hint{color:#888;font-size:14px;padding:8px 0;font-style:italic}@media only screen and (max-width: 600px){.page-header{flex-direction:column;align-items:flex-start}.header-actions{margin-left:0;width:100%}.form-panel,.edit-section{padding:12px}.form-grid.form-grid-2{grid-template-columns:1fr}.form-actions{flex-direction:column}.form-actions button:not(.icon-button),.form-actions input[type=submit],.form-actions input[type=button]{width:100%;text-align:center}}.devices-list{max-width:1400px;margin:0 auto}.devices-list-header{display:flex;align-items:center;gap:16px;margin-bottom:20px;flex-wrap:wrap}.devices-list-header h2{margin:0}.devices-count{font-size:14px;color:#666}.devices-list-header button{width:auto;padding:10px 20px;margin:0 0 0 auto}.devices-filter-bar{background-color:var(--input-background-color);border:1px solid var(--table-border-color);border-radius:8px;padding:16px;margin-bottom:20px}.devices-filter-bar h3{font-size:14px;font-weight:700;color:var(--text-color);margin:0 0 12px;text-transform:uppercase;letter-spacing:.5px}.devices-filter-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;align-items:end}.devices-filter-grid label{display:flex;flex-direction:column;font-size:13px;font-weight:600;color:#555}.devices-filter-grid select,.devices-filter-grid input[type=text]{margin-bottom:0;margin-top:4px}.devices-filter-actions{display:flex;align-items:flex-end}.devices-filter-actions button{width:auto;padding:10px 16px;margin:4px 0 0;white-space:nowrap;background-color:var(--input-background-color);color:var(--text-color);border:1px solid var(--table-border-color)}.devices-filter-actions button:hover{background-color:var(--table-border-color)}.status-badge{display:inline-block;padding:2px 10px;border-radius:12px;font-size:13px;font-weight:600;line-height:1.6}.status-badge.active{background-color:#e6f4d7;color:#2d6a0e}.status-badge.inactive{background-color:#fde8e8;color:#9b1c1c}.status-badge.hidden{background-color:#f3f4f6;color:#6b7280}.devices-actions{white-space:nowrap}.devices-loading,.devices-error,.devices-empty{display:flex;align-items:center;justify-content:center;min-height:200px;background-color:var(--input-background-color);border:2px dashed var(--table-border-color);border-radius:8px}.devices-loading p,.devices-error p,.devices-empty p{font-size:16px;color:#666}.devices-error p{color:#9b1c1c}@media only screen and (max-width: 600px){.devices-list-header{flex-direction:column;align-items:flex-start}.devices-list-header button{margin-left:0;width:100%}.devices-filter-grid{grid-template-columns:1fr}.devices-filter-bar{padding:12px}}.field-tooltip-wrapper{position:relative;display:inline-flex;align-items:center}.field-tooltip-btn{all:unset;display:inline-flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer;color:#aaa;background:none;transition:color .15s}.field-tooltip-btn:hover,.field-tooltip-btn[aria-expanded=true]{color:#666;background:none}.field-tooltip-popup{position:absolute;left:50%;top:calc(100% + 6px);transform:translate(-50%);z-index:100;background:#fff;border:1px solid var(--table-border-color, #ddd);border-radius:6px;padding:8px 12px;font-size:13px;font-weight:400;color:var(--text-color, #333);line-height:1.5;width:260px;box-shadow:0 4px 12px #0000001a;white-space:normal}.field-tooltip-popup:before{content:"";position:absolute;top:-5px;left:50%;transform:translate(-50%);width:8px;height:8px;background:#fff;border-left:1px solid var(--table-border-color, #ddd);border-top:1px solid var(--table-border-color, #ddd);transform:translate(-50%) rotate(45deg)}.device-toggle-container{display:flex;flex-direction:column;gap:10px}.device-toggle-header{display:flex;justify-content:space-between;align-items:center;gap:8px}.device-toggle-actions{display:flex;gap:8px}.device-toggle-action-btn{padding:6px 12px;min-width:auto;width:auto;font-size:14px;background-color:var(--input-background-color);color:var(--text-color);border:1px solid var(--input-border-color);border-radius:4px;cursor:pointer;transition:background-color .2s ease}.device-toggle-action-btn:hover{background-color:var(--primary-color);color:var(--background-color)}.device-toggle-chips{display:flex;flex-wrap:wrap;gap:8px;overflow-x:auto;padding:4px 0;-webkit-overflow-scrolling:touch}.device-chip{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;min-height:44px;min-width:44px;font-size:14px;font-weight:600;border:2px solid var(--chip-color);border-radius:22px;cursor:pointer;transition:all .2s ease;white-space:nowrap;background-color:var(--chip-bg);color:var(--chip-text);margin:0;width:auto}.device-chip:hover{background-color:var(--chip-bg);color:var(--chip-text)}@media (hover: hover){.device-chip:hover{opacity:.85}}.device-chip:focus{outline:none}.device-chip:focus-visible{outline:none;box-shadow:0 0 0 3px #6eb32366}.device-chip.selected{box-shadow:0 2px 4px #0003}.device-chip.selected:focus-visible{box-shadow:0 2px 4px #0003,0 0 0 3px #6eb32366}@media only screen and (max-width: 600px){.device-toggle-chips{flex-wrap:wrap;overflow-y:auto;overflow-x:hidden;max-height:calc(50vh - 120px);padding-bottom:8px}.device-chip{flex-shrink:0}}.device-group-manager{display:flex;flex-direction:column;gap:10px}.device-group-header{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:8px}.device-group-title{font-weight:600;font-size:14px;white-space:nowrap}.device-group-back-btn{padding:4px 8px;font-size:13px;background-color:var(--input-background-color);color:var(--text-color);border:1px solid var(--input-border-color);border-radius:4px;cursor:pointer;transition:background-color .2s ease;white-space:nowrap}.device-group-back-btn:hover{background-color:var(--primary-color);color:var(--background-color)}.device-group-menu-container{position:relative}.device-group-icon-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;font-size:16px;background-color:var(--input-background-color);color:var(--text-muted-color, #666);border:1px solid var(--input-border-color);border-radius:4px;cursor:pointer;transition:background-color .2s ease,color .2s ease}.device-group-icon-btn:hover{background-color:var(--primary-color);color:var(--background-color)}.device-group-popover{position:absolute;top:100%;right:0;margin-top:4px;min-width:150px;background-color:var(--input-background-color);border:1px solid var(--input-border-color);border-radius:6px;box-shadow:0 4px 12px #00000026;z-index:10;overflow:hidden}.device-group-popover-item{display:block;width:100%;padding:10px 14px;font-size:14px;text-align:left;background:none;border:none;color:var(--text-color);cursor:pointer;transition:background-color .15s ease}.device-group-popover-item:hover{background-color:var(--primary-color);color:var(--background-color)}.device-group-popover-item+.device-group-popover-item{border-top:1px solid var(--input-border-color)}.device-group-loaded-indicator{font-size:12px;color:var(--text-muted-color, #666);padding:4px 8px;background-color:var(--input-background-color);border-radius:4px}.device-group-modified{font-style:italic;color:var(--warning-color, #FF9800)}.device-group-empty{text-align:center;color:var(--text-muted-color, #666);padding:20px}.device-group-list{list-style:none;margin:0;padding:0}.device-group-item{display:grid;grid-template-columns:1fr auto;align-items:center;padding:8px;border-bottom:1px solid var(--input-border-color)}.device-group-item:last-child{border-bottom:none}.device-group-name-btn{min-width:0;padding:8px 12px;background:none;border:none;font-size:14px;font-weight:500;color:var(--text-color);cursor:pointer;text-align:left;border-radius:4px;transition:background-color .2s ease;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.device-group-name-btn:hover{background-color:var(--primary-color);color:var(--background-color)}.device-group-count{font-size:12px;color:var(--text-muted-color, #666);font-weight:400;white-space:nowrap;margin-left:6px}.device-group-name-btn:hover .device-group-count{color:inherit}.device-group-delete-btn{padding:8px;background:none;border:none;color:var(--text-muted-color, #666);cursor:pointer;border-radius:4px;transition:color .2s ease,background-color .2s ease}.device-group-delete-btn:hover{color:var(--danger-color, #F44336);background-color:var(--input-background-color)}.device-group-delete-confirm{display:flex;flex-direction:column;gap:8px;width:100%;padding:8px;background-color:var(--input-background-color);border-radius:4px}.device-group-delete-actions{display:flex;gap:8px}.device-group-confirm-btn{padding:6px 12px;font-size:14px;background-color:var(--danger-color, #F44336);color:#fff;border:none;border-radius:4px;cursor:pointer}.device-group-confirm-btn:hover{opacity:.9}.device-group-cancel-btn{padding:6px 12px;font-size:14px;background-color:var(--input-background-color);color:var(--text-color);border:1px solid var(--input-border-color);border-radius:4px;cursor:pointer}.device-group-cancel-btn:hover{background-color:var(--background-color)}.device-group-naming{display:flex;flex-direction:column;gap:12px;padding:8px}.device-group-naming label{font-weight:600;font-size:14px}.device-group-naming input{padding:10px 12px;font-size:16px;border:1px solid var(--input-border-color);border-radius:4px;background-color:var(--input-background-color);color:var(--text-color)}.device-group-naming input:focus{outline:none;border-color:var(--input-focus-border-color)}.device-group-naming-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.device-group-save-confirm-btn{padding:10px 16px;font-size:14px;font-weight:600;background-color:var(--primary-color);color:#fff;border:none;border-radius:6px;cursor:pointer}.device-group-save-confirm-btn:hover:not(:disabled){background-color:var(--primary-hover-color)}.device-group-save-confirm-btn:disabled{opacity:.5;cursor:not-allowed}.time-range-selector{display:flex;flex-direction:column;gap:12px}.time-range-presets{display:flex;gap:8px;flex-wrap:wrap}.time-range-preset-btn{padding:10px 16px;min-height:44px;min-width:50px;width:auto;font-size:14px;font-weight:600;background-color:var(--input-background-color);color:var(--text-color);border:2px solid var(--input-border-color);border-radius:6px;cursor:pointer;transition:all .2s ease;margin:0}.time-range-preset-btn:hover{background-color:var(--primary-color);color:var(--background-color);border-color:var(--primary-color)}.time-range-preset-btn.active{background-color:var(--primary-hover-color);color:var(--background-color);border-color:var(--primary-hover-color)}.time-range-custom{display:flex;gap:16px;flex-wrap:wrap}.time-range-input-group{display:flex;flex-direction:column;gap:4px;flex:1;min-width:180px}.time-range-input-group label{font-size:14px;font-weight:600;color:var(--text-color)}.time-range-input-group input[type=datetime-local]{padding:10px 12px;min-height:44px;font-size:14px;border:1px solid var(--input-border-color);border-radius:4px;background-color:var(--input-background-color);color:var(--text-color);margin-bottom:0}.time-range-input-group input[type=datetime-local]:focus{outline:none;border-color:var(--input-focus-border-color);box-shadow:var(--box-shadow)}.time-range-live-indicator{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;font-size:12px;font-weight:600;color:var(--primary-color);background-color:color-mix(in srgb,var(--primary-color) 15%,transparent);border-radius:4px;align-self:flex-start}.time-range-live-indicator:before{content:"";width:8px;height:8px;background-color:var(--primary-color);border-radius:50%;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}@media only screen and (max-width: 600px){.time-range-presets{width:100%}.time-range-preset-btn{flex:1 1 auto;min-width:70px}.time-range-custom{flex-direction:column}.time-range-input-group{width:100%}}.collapsible-selector-chip{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;margin:4px;min-height:36px;background-color:var(--input-background-color);border:1px solid var(--input-border-color);border-radius:18px;cursor:pointer;font-size:13px;transition:border-color .2s ease,background-color .2s ease;width:auto}.collapsible-selector-chip:hover{border-color:var(--primary-color);background-color:var(--input-background-color)}.collapsible-selector-chip:focus{outline:none;border-color:var(--input-focus-border-color);box-shadow:var(--box-shadow)}.collapsible-selector-label{color:var(--text-muted-color, #666);font-weight:500}.collapsible-selector-value{color:var(--text-color);font-weight:600;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.collapsible-selector-live-dot{width:8px;height:8px;background-color:var(--primary-color);border-radius:50%;animation:collapsible-pulse 2s ease-in-out infinite;flex-shrink:0}@keyframes collapsible-pulse{0%,to{opacity:1}50%{opacity:.4}}.collapsible-selector-content{padding:8px 0}.collapsible-selector-done-btn{width:100%;padding:12px 16px;font-size:14px;font-weight:600;background-color:var(--primary-color);color:#fff;border:none;border-radius:6px;cursor:pointer;margin-top:16px}.collapsible-selector-done-btn:hover{background-color:var(--primary-hover-color)}.collapsible-selector-modal .modal-content{position:fixed;bottom:0;left:0;right:0;max-width:none;border-radius:16px 16px 0 0;max-height:80vh;overflow-y:auto;animation:slideUp .3s ease-out}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.collapsible-selector-modal.device-selector-modal .modal-content{min-height:50vh;max-height:50vh}.area-chart-container{background-color:var(--background-color);border:1px solid var(--table-border-color);border-radius:8px;padding:16px;box-shadow:var(--box-shadow)}.area-chart-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px;gap:12px}.area-chart-header-info{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}.area-chart-actions{display:flex;gap:8px;flex-shrink:0}.area-chart-action-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;background-color:var(--input-background-color);color:var(--text-muted-color, #666);border:1px solid var(--input-border-color);border-radius:6px;cursor:pointer;transition:all .2s ease;text-decoration:none;font-size:14px}.area-chart-action-btn:hover{background-color:var(--primary-color);color:var(--background-color);border-color:var(--primary-color)}.area-chart-title{font-size:16px;font-weight:700;color:var(--text-color);margin:0;padding:0}.area-chart-latest{font-size:13px;font-weight:600;color:#666;white-space:nowrap}.area-chart-with-nav{display:flex;align-items:stretch}.area-chart-nav-btn{display:flex;align-items:center;justify-content:center;width:32px;flex-shrink:0;padding:0;background:none;border:1px solid var(--table-border-color);border-radius:6px;color:var(--text-muted-color, #666);cursor:pointer;font-size:18px;transition:all .2s ease}.area-chart-nav-btn:hover{background-color:var(--input-background-color);color:var(--primary-color);border-color:var(--primary-color)}.area-chart-wrapper{position:relative;flex:1;min-width:0;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.area-chart-wrapper *:focus{outline:none}.area-chart-no-data{position:absolute;top:0;right:10px;bottom:20px;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:1}.area-chart-no-data span{font-size:16px;font-weight:600;color:#999}.area-chart-tooltip{background-color:var(--tooltip-background-color);border:2px solid var(--primary-hover-color);border-radius:6px;padding:10px 14px;box-shadow:0 2px 8px #0003;min-width:120px}.area-chart-tooltip-time{font-size:13px;font-weight:600;color:#666;margin:0 0 4px}.area-chart-tooltip-value{font-size:18px;font-weight:700;color:var(--text-color);margin:0}.area-chart-tooltip-secondary{font-size:13px;font-weight:500;color:#888;margin:2px 0 0}.area-chart-container .recharts-wrapper{touch-action:pan-y}.area-chart-interacting .recharts-wrapper{touch-action:none;cursor:col-resize}.area-chart-interacting .recharts-surface{pointer-events:none}@media only screen and (max-width: 600px){.area-chart-container .recharts-wrapper{touch-action:none}.area-chart-container .recharts-surface{pointer-events:none}}.area-chart-container .recharts-cartesian-axis-tick-value{font-weight:600!important}@media only screen and (max-width: 600px){.area-chart-nav-btn{display:none}.area-chart-container{padding:12px}.area-chart-header{flex-direction:row;align-items:flex-start;gap:8px}.area-chart-header-info{gap:2px}.area-chart-title{font-size:14px}.area-chart-latest{font-size:12px}.area-chart-tooltip-value{font-size:16px}.area-chart-action-btn{width:36px;height:36px}}.chart-selection-popup{position:fixed;transform:translate(-50%,-120%);background-color:var(--primary-color, #4a90d9);color:#fff;padding:4px 10px;border-radius:6px;font-size:13px;font-weight:600;white-space:nowrap;pointer-events:none;z-index:10;box-shadow:0 2px 8px #0003}.rainfall-loading,.rainfall-empty{padding:40px 20px;text-align:center;color:#666}.rainfall-table-wrapper{overflow-x:auto}.rainfall-table{width:100%;border-collapse:collapse;font-size:.9rem}.rainfall-table th,.rainfall-table td{padding:10px 12px;text-align:right;border:1px solid var(--table-border-color)}.rainfall-table th:first-child,.rainfall-table td:first-child{text-align:left}.rainfall-table th:nth-child(2),.rainfall-table td:nth-child(2){text-align:left}.rainfall-table th{white-space:nowrap}.rainfall-table tbody tr:nth-child(2n){background:var(--table-stripe-color-even)}.rainfall-device-link{background:none;border:none;color:var(--primary-color);cursor:pointer;font-size:inherit;font-family:inherit;padding:0;text-decoration:underline;text-align:left}.rainfall-device-link:hover{color:var(--primary-hover-color)}.single-stat-card{display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--input-background-color);border:1px solid var(--table-border-color);border-radius:8px;padding:16px 12px;flex:1;min-width:0;text-align:center;box-shadow:var(--box-shadow)}.single-stat-value{font-size:1.6rem;font-weight:700;color:var(--primary-color);line-height:1.2;white-space:nowrap}.single-stat-label{font-size:.8rem;color:#666;margin-top:4px;text-transform:uppercase;letter-spacing:.05em}.rain-gauge-page{display:flex;flex-direction:column;gap:16px}.rain-gauge-device-name{font-size:1.2rem;font-weight:600;color:var(--text-color)}.rain-gauge-stats-row{display:flex;gap:12px;flex-wrap:wrap}.rain-gauge-stats-row .single-stat-card{min-width:120px}.line-chart-container{background:var(--background-color);border:1px solid var(--table-border-color);border-radius:8px;padding:16px;margin-bottom:16px;box-shadow:var(--box-shadow)}.line-chart-header{margin-bottom:8px}.line-chart-title{font-size:1rem;font-weight:600;color:var(--text-color)}.line-chart-with-nav{display:flex;align-items:stretch}.line-chart-wrapper{position:relative;flex:1;min-width:0}.line-chart-interacting{cursor:col-resize;-webkit-user-select:none;user-select:none}.line-chart-nav-btn{display:flex;align-items:center;justify-content:center;width:32px;flex-shrink:0;padding:0;background:none;border:1px solid var(--table-border-color);border-radius:6px;color:var(--text-muted-color, #666);cursor:pointer;font-size:18px;transition:all .2s ease}.line-chart-nav-btn:hover{background-color:var(--input-background-color);color:var(--primary-color);border-color:var(--primary-color)}@media only screen and (max-width: 600px){.line-chart-nav-btn{display:none}}.line-chart-no-data{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;color:#999;font-size:.9rem;pointer-events:none;z-index:1}.line-chart-tooltip{background:var(--tooltip-background-color);border:1px solid var(--table-border-color);border-radius:4px;padding:8px 12px;font-size:.85rem;box-shadow:var(--box-shadow)}.line-chart-tooltip-time{font-weight:600;margin-bottom:4px;color:var(--text-color)}.wind-rose-container{background:var(--background-color);border:1px solid var(--table-border-color);border-radius:8px;padding:16px;margin-bottom:16px;box-shadow:var(--box-shadow)}.wind-rose-title{font-size:1rem;font-weight:600;color:var(--text-color);margin-bottom:12px}.wind-rose-no-data{color:#999;font-size:.9rem;text-align:center;padding:40px 0}.wind-rose-chart{display:flex;align-items:center;gap:24px;flex-wrap:wrap}.wind-rose-chart svg{flex-shrink:0}.wind-rose-legend{display:flex;flex-direction:column;gap:8px;font-size:.8rem}.wind-rose-legend-item{display:flex;align-items:center;gap:8px}.wind-rose-legend-swatch{display:inline-block;width:14px;height:14px;border-radius:2px;flex-shrink:0}.wind-rose-total{margin-top:4px;color:#888;font-size:.75rem}.weather-station-page{display:flex;flex-direction:column;gap:16px}.weather-station-device-name{font-size:1.2rem;font-weight:600;color:var(--text-color)}.weather-station-stats-row{display:flex;gap:12px;flex-wrap:wrap}.weather-station-stats-row .single-stat-card{min-width:120px}.visualisations{max-width:1600px;margin:0 auto}.back-to-rainfall-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:1px solid var(--input-border-color);border-radius:4px;padding:6px 12px;margin-bottom:12px;cursor:pointer;font-size:.9rem;color:var(--primary-color);width:100%;text-align:left}.back-to-rainfall-btn:hover{background:var(--table-stripe-color-even)}.page-selector-trigger{display:inline-flex;align-items:center;gap:8px;background:none;border:none;padding:0;margin-bottom:20px;cursor:pointer;text-align:left}.page-selector-trigger h2{margin:0;color:var(--text-color);transition:color .2s ease}.page-selector-trigger:hover h2{color:var(--primary-color)}.page-selector-arrow{font-size:12px;color:#666;transition:transform .2s ease}.page-selector-trigger:hover .page-selector-arrow{color:var(--primary-color)}.page-selector-list{list-style:none;margin:0;padding:0}.page-selector-list li{margin:0}.page-selector-option{display:flex;flex-direction:column;align-items:flex-start;width:100%;padding:14px 16px;border:1px solid var(--table-border-color);border-radius:8px;margin-bottom:8px;background:var(--background-color);cursor:pointer;text-align:left;transition:border-color .2s ease,background-color .2s ease}.page-selector-option:last-child{margin-bottom:0}.page-selector-option:hover{border-color:var(--primary-color);background-color:var(--input-background-color)}.page-selector-option.active{border-color:var(--primary-color);background-color:rgba(var(--primary-color-rgb, 0, 123, 255),.08)}.page-option-name{font-size:16px;font-weight:600;color:var(--text-color);margin-bottom:4px}.page-option-description{font-size:13px;color:#666}.visualisations-layout{display:flex;gap:24px}.visualisations-controls{flex:0 0 320px;display:flex;flex-direction:column;gap:20px}.control-section{background-color:var(--input-background-color);border:1px solid var(--table-border-color);border-radius:8px;padding:16px}.control-section h3{font-size:14px;font-weight:700;color:var(--text-color);margin:0 0 12px;text-transform:uppercase;letter-spacing:.5px}.visualisations-charts{flex:1;min-width:0}.charts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:20px}.loading-message{font-size:14px;color:#666;margin:0}.empty-state{display:flex;align-items:center;justify-content:center;min-height:300px;background-color:var(--input-background-color);border:2px dashed var(--table-border-color);border-radius:8px}.empty-state p{font-size:16px;color:#666}.refresh-controls{margin-bottom:12px}.refresh-controls button{width:100%;padding:10px 16px;margin:0}.last-updated{font-size:13px;color:#666;margin:0}.auto-refresh-indicator{color:var(--primary-color);font-weight:600}@media only screen and (max-width: 900px){.visualisations-layout{flex-direction:column}.visualisations-controls{flex:none;width:100%}.charts-grid{grid-template-columns:1fr}}.visualisations-footer{display:flex;justify-content:flex-end;margin-top:24px;padding-top:24px;border-top:1px solid var(--table-border-color)}.share-button{padding:12px 24px;font-size:14px;font-weight:600;background-color:var(--secondary-color, #6c757d);color:#fff;border:none;border-radius:6px;cursor:pointer;transition:background-color .2s ease}.share-button:hover{background-color:var(--secondary-hover-color, #5a6268)}.mobile-collapsed-selectors{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}@media only screen and (max-width: 600px){.visualisations{padding:0 4px;overflow-x:hidden}.control-section{padding:12px}}.device-data h2{margin-bottom:16px}.device-data-error{color:#c00}.device-data-table-wrapper{overflow-x:auto}.device-data-table-wrapper table{white-space:nowrap}.device-data-table-wrapper td,.device-data-table-wrapper th{padding:8px 12px}