.notification-page-header{margin-bottom:1.25rem}.notification-title-row{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem}.notification-grid{display:grid;gap:1rem}.notification-status-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:1rem}.notification-main-grid{grid-template-columns:1.1fr .9fr;margin-bottom:1rem}.notification-status-card,.notification-panel{padding:1.15rem}.notification-status-card{display:flex;align-items:center;gap:.8rem}.notification-status-icon{width:2.25rem;height:2.25rem;border-radius:.65rem;display:grid;place-items:center;background:color-mix(in srgb,var(--ghz-brand-color,#00c37a) 16%,transparent);color:var(--ghz-brand-color,#00c37a)}.notification-status-card strong,.notification-panel h3{font-size:.95rem}.notification-status-card p,.notification-panel-heading p{margin:.18rem 0 0;color:var(--ghz-text-muted,#9ca3af);font-size:.75rem}.notification-status{display:inline-flex;align-items:center;gap:.35rem;font-size:.72rem}.notification-status.is-ok{color:var(--ghz-text-primary,#1f2937)}.notification-status.is-ok i{color:#168a57}.notification-status.is-off{color:var(--ghz-text-primary,#1f2937)}.notification-status.is-off i{color:#d9363e}.notification-panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;margin-bottom:1rem}.notification-panel-heading h3{margin:0;font-weight:700}.notification-button{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;border:1px solid var(--ghz-card-border,#374151);border-radius:.55rem;background:var(--ghz-input-bg,#181b20);color:var(--ghz-text,#fff);padding:.55rem .75rem;font-size:.75rem;font-weight:650;cursor:pointer}.notification-button:hover{filter:brightness(1.12)}.notification-button-primary{background:var(--ghz-brand-color,#00c37a);border-color:var(--ghz-brand-color,#00c37a);color:var(--ghz-brand-contrast,#062217);box-shadow:0 4px 12px color-mix(in srgb,var(--ghz-brand-color,#00c37a) 22%,transparent)}.notification-button-primary:hover{filter:brightness(1.08);box-shadow:0 6px 16px color-mix(in srgb,var(--ghz-brand-color,#00c37a) 32%,transparent)}.notification-button-primary:focus-visible{outline:2px solid var(--ghz-brand-color,#00c37a);outline-offset:2px}.notification-setting-row,.notification-topic-row,.notification-schedule-row{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.75rem 0;border-bottom:1px solid var(--ghz-card-border,#2a2e35)}.notification-setting-row:last-child{border-bottom:0}.notification-setting-row strong,.notification-topic-row strong,.notification-schedule-row strong{display:block;font-size:.8rem}.notification-setting-row small,.notification-topic-row small,.notification-schedule-row small{display:block;color:var(--ghz-text-muted,#9ca3af);font-size:.7rem;margin-top:.15rem}.notification-switch{position:relative;display:inline-block;width:2.25rem;height:1.25rem;flex:none}.notification-switch input{position:absolute;opacity:0}.notification-switch span{position:absolute;inset:0;border-radius:2rem;background:#47515a;cursor:pointer;transition:.15s}.notification-switch span:after{content:"";position:absolute;width:.85rem;height:.85rem;top:.2rem;left:.2rem;background:#e5e7eb;border-radius:50%;transition:.15s}.notification-switch input:checked+span{background:#27a873}.notification-switch input:checked+span:after{transform:translateX(1rem);background:#fff}.topic-heading{margin-top:1.1rem;margin-bottom:.2rem}.notification-topic-row{position:relative;cursor:default;gap:.5rem}.notification-topic-row>span:first-child{flex:1;min-width:0}.notification-topic-channels{display:flex;align-items:center;gap:.15rem;flex:none}.notification-topic-channel{position:relative;display:flex;align-items:center;justify-content:center;width:1.9rem;height:1.9rem;border-radius:.5rem;cursor:pointer;background:color-mix(in srgb,var(--ghz-text-primary,#1f2937) 8%,transparent);color:var(--ghz-text-primary,#1f2937);transition:.15s}.notification-topic-channel input{position:absolute;opacity:0}.notification-topic-channel i{font-size:.95rem;color:inherit;transition:.15s}.notification-topic-channel:has(input:not(:checked)){opacity:1}.notification-topic-channel:has(input:not(:checked))::after{content:"×";position:absolute;inset:0;z-index:2;display:grid;place-items:center;border-radius:.5rem;background:rgb(217 54 62 / 78%);color:#fff;font-size:1.7rem;font-weight:900;line-height:1;text-shadow:0 1px 2px rgb(0 0 0 / 45%);box-shadow:inset 0 0 0 2px #d9363e}.notification-topic-channel:hover{background:color-mix(in srgb,var(--ghz-brand-color,#00c37a) 18%,transparent);color:var(--ghz-brand-color,#00c37a)}.notification-topic-channel input:checked{background-color:color-mix(in srgb,var(--ghz-brand-color,#00c37a) 25%,transparent)}.notification-topic-channel:has(input[data-topic-channel="web_push"]){color:#1683d8;background:color-mix(in srgb,#1683d8 12%,transparent)}.notification-topic-channel:has(input[data-topic-channel="telegram"]){color:#168dcc;background:color-mix(in srgb,#168dcc 12%,transparent)}.notification-topic-channel:has(input:checked){background:color-mix(in srgb,var(--ghz-brand-color,#00c37a) 22%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ghz-brand-color,#00c37a) 50%,transparent)}.notification-topic-channel:has(input:checked)::after{content:none}.notification-topic-channel input:checked+i{color:var(--ghz-brand-color,#00c37a);filter:drop-shadow(0 0 4px color-mix(in srgb,var(--ghz-brand-color,#00c37a) 40%,transparent))}.notification-topic-channel:focus-within{outline:2px solid var(--ghz-brand-color,#00c37a);outline-offset:2px;border-radius:.25rem}.notification-form{display:grid;gap:.8rem}.notification-form label{display:grid;gap:.35rem;color:var(--ghz-text-primary,#1f2937);font-size:.75rem;font-weight:600}.notification-form input,.notification-form textarea,.notification-schedule-row input[type=time]{width:100%;border:1px solid var(--ghz-card-border,#374151);border-radius:.45rem;background:var(--ghz-input-bg,#181b20);color:var(--ghz-text-primary,#1f2937);padding:.6rem .7rem;outline:0}.notification-form input::placeholder,.notification-form textarea::placeholder{color:color-mix(in srgb,var(--ghz-text-primary,#1f2937) 58%,transparent)}.notification-form textarea{resize:vertical}.notification-safe-note{color:var(--ghz-text-primary,#1f2937);font-size:.7rem;margin:.9rem 0 0;opacity:.78}.notification-safe-note i{color:#62d8a3;margin-right:.25rem}.notification-schedule-list{display:grid;gap:0}.notification-schedule-row{border-bottom:1px solid var(--ghz-card-border,#2a2e35)}.notification-schedule-row>span{min-width:10rem}.notification-schedule-row input[type=time]{width:6.5rem}.notification-schedule-row .notification-button{white-space:nowrap}.notification-count{color:var(--ghz-text-muted,#9ca3af);font-size:.72rem}.notification-table-wrap{overflow:auto}.notification-table{width:100%;border-collapse:collapse;font-size:.75rem}.notification-table th,.notification-table td{text-align:left;padding:.7rem .55rem;border-top:1px solid var(--ghz-card-border,#2a2e35);vertical-align:top}.notification-table th{color:var(--ghz-text-muted,#9ca3af);font-size:.68rem;font-weight:650}.notification-table td strong,.notification-table td small{display:block}.notification-table td small{color:var(--ghz-text-muted,#9ca3af);margin-top:.2rem;max-width:24rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.notification-error-cell{color:#ef9b8f;max-width:18rem}.notification-empty,.notification-loading,.notification-error{text-align:center;color:var(--ghz-text-muted,#9ca3af);padding:2rem}.notification-error{color:#ef9b8f}.notification-loading i,.notification-error i{margin-right:.35rem}@media(max-width:800px){.notification-status-grid,.notification-main-grid{grid-template-columns:1fr}.notification-title-row{align-items:flex-start;flex-direction:column}.notification-schedule-row{align-items:flex-start;flex-wrap:wrap}.notification-schedule-row>span{width:100%}}@media(max-width:520px){.notification-panel{padding:.9rem}.notification-table{min-width:650px}.notification-table-wrap{margin:0 -.9rem;padding:0 .9rem}.notification-schedule-row .notification-button{margin-left:auto}}.notification-panel-heading p,.notification-setting-row small,.notification-topic-row small,.notification-schedule-row small{color:var(--ghz-text-primary,#374151);opacity:.68}.notification-form label{color:var(--ghz-text-primary,#374151)}.notification-safe-note{color:var(--ghz-text-primary,#374151);opacity:.72}.notification-form input,.notification-form textarea,.notification-schedule-row input[type=time]{color:var(--ghz-text-primary,#1f2937)}
