.notification-page{--notification-panel:#0c1d2e;--notification-panel-2:#10263b;--notification-line:rgba(129,180,222,.17);--notification-muted:#7f9ab3;min-height:100vh;background:#071626;color:#eaf3fb}
.site-header{border-bottom:1px solid rgba(137,190,225,.13);background:rgba(7,22,38,.9);position:sticky;top:0;z-index:5;backdrop-filter:blur(18px)}
.site-header__inner{width:min(1440px,calc(100% - 48px));min-height:76px;margin:auto;display:flex;align-items:center;gap:28px}.brand{display:flex;align-items:center;gap:10px;color:#f0f7ff;text-decoration:none;white-space:nowrap}.brand strong{display:block;font-size:18px}.brand small{display:block;color:#7f9ab3;font-size:10px;margin-top:2px}.brand__mark{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;color:#55e1ba;font-size:24px;background:linear-gradient(135deg,#153a53,#0c253a);border:1px solid #24516d}.site-nav{display:flex;align-items:center;justify-content:center;gap:7px;flex:1}.site-nav a{padding:10px 12px;border-radius:10px;color:#8fa9be;text-decoration:none;font-size:12px;transition:.2s}.site-nav a:hover,.site-nav a.is-active{color:#57e0be;background:rgba(49,177,175,.1)}.auth-slot{min-width:88px;text-align:left}
.notification-shell{width:min(1280px,calc(100% - 48px));margin:0 auto 70px}.notification-hero{display:flex;align-items:end;justify-content:space-between;gap:28px;padding:58px 0 32px}.eyebrow{display:block;color:#4bdcc5;letter-spacing:1.4px;font-size:11px;font-weight:800;margin-bottom:10px}.notification-hero h1{font-size:clamp(28px,4vw,48px);margin:0 0 13px;letter-spacing:-1px}.notification-hero p{color:#9ab2c7;margin:0;max-width:680px;line-height:2;font-size:14px}.hero-status{display:flex;align-items:center;gap:9px;border:1px solid rgba(71,219,184,.28);border-radius:999px;background:rgba(41,195,158,.09);color:#61e0be;padding:10px 15px;font-size:12px;white-space:nowrap}.hero-status[data-state=off]{color:#ff91ab;border-color:rgba(255,121,153,.3);background:rgba(255,102,139,.08)}.status-dot{width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 15px currentColor}
.page-message{margin:0 0 18px;padding:13px 16px;border-radius:12px;background:#122c42;border:1px solid var(--notification-line);color:#dcecf7;font-size:13px}.page-message.is-error{border-color:rgba(255,120,150,.4);color:#ff9ab0;background:rgba(105,29,54,.22)}.page-message.is-success{border-color:rgba(71,219,184,.35);color:#69e4c2}
.status-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}.status-card,.settings-card,.notification-guide,.empty-state{border:1px solid var(--notification-line);background:linear-gradient(145deg,rgba(16,39,60,.97),rgba(9,26,43,.97));border-radius:18px;box-shadow:0 18px 50px rgba(0,0,0,.11)}.status-card{padding:19px 20px}.status-card__label{display:block;color:#7f9ab3;font-size:11px;margin-bottom:12px}.status-card strong{display:block;font-size:20px;color:#f0f7ff;margin-bottom:5px}.status-card small{color:#819ab0;font-size:11px}
.settings-card{padding:27px;margin-top:18px}.section-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}.section-heading h2,.notification-guide h2{font-size:21px;margin:0}.section-heading p,.section-hint{color:#819ab0;font-size:12px;line-height:1.9;margin:11px 0 0}.section-heading--stacked{display:block}.section-heading--stacked p{max-width:740px}.field-grid{display:grid;gap:15px;margin-top:23px}.field-grid--three{grid-template-columns:1.3fr .7fr .7fr}.field-grid--two{grid-template-columns:1fr 1fr}.field-group{min-width:0}.field-group label,.field-group legend{display:block;color:#b3c7d8;font-size:12px;margin-bottom:8px}.field-group small{display:block;color:#6f899f;font-size:10px;line-height:1.7;margin-top:7px}.field-group select,.field-group input[type=time]{width:100%;box-sizing:border-box;border:1px solid var(--notification-line);background:#0a1c2e;color:#eff7ff;border-radius:10px;padding:12px 13px;font:inherit;font-size:13px;outline:none}.field-group select:focus,.field-group input:focus{border-color:#3fd5d8;box-shadow:0 0 0 3px rgba(63,213,216,.1)}fieldset{border:0;padding:0;margin:0}.preset-group{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.preset-option{position:relative;display:block;cursor:pointer}.preset-option input{position:absolute;opacity:0}.preset-option span{display:block;min-height:57px;padding:10px 12px;border:1px solid var(--notification-line);border-radius:10px;background:rgba(7,24,40,.45);transition:.2s}.preset-option b{display:block;font-size:12px;color:#dcecf7;margin-bottom:4px}.preset-option small{display:block;color:#748da4;font-size:10px}.preset-option input:checked+span{border-color:#43d6bf;background:rgba(43,195,164,.1);box-shadow:inset 0 0 0 1px rgba(67,214,191,.16)}
.channels-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px;padding-top:21px;border-top:1px solid rgba(129,180,222,.1)}.check-list{display:flex;gap:8px;flex-wrap:wrap}.check-option{display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center;min-width:135px;padding:11px 12px;border:1px solid var(--notification-line);border-radius:10px;cursor:pointer;background:rgba(7,24,40,.35)}.check-option input{accent-color:#48d9b8}.check-option span{font-size:12px;color:#d6e7f4}.check-option small{grid-column:2;color:#708aa0;font-size:9px}.check-option--muted{opacity:.55;cursor:not-allowed}
.switch-label{display:inline-flex;align-items:center;gap:9px;color:#b4c9d9;font-size:12px;cursor:pointer}.switch-label input{position:absolute;opacity:0}.switch{width:39px;height:22px;border-radius:99px;background:#20374b;border:1px solid #35516a;position:relative;transition:.2s}.switch:after{content:"";position:absolute;width:16px;height:16px;top:2px;right:2px;border-radius:50%;background:#8399aa;transition:.2s}.switch-label input:checked+.switch{background:#1d887b;border-color:#40d8b5}.switch-label input:checked+.switch:after{right:19px;background:#e7fff8}
.quiet-card{background:linear-gradient(145deg,rgba(18,43,61,.97),rgba(10,29,44,.97))}.quiet-explainer{display:flex;align-items:center;gap:12px;margin-top:19px;padding:13px 15px;border-radius:12px;background:rgba(10,25,40,.65);color:#97aec0}.quiet-explainer p{font-size:12px;line-height:1.9;margin:0}.quiet-explainer strong{color:#dcebf5}.quiet-icon{font-size:21px;color:#61dcc4}.quiet-card .field-grid{margin-top:15px}.is-disabled{opacity:.55}.is-disabled input{cursor:not-allowed}
.feature-rules{display:grid;grid-template-columns:repeat(2,1fr);gap:11px;margin-top:20px}.feature-rule{display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:start;padding:16px;border-radius:13px;border:1px solid rgba(129,180,222,.13);background:rgba(7,23,39,.44)}.feature-rule__icon{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;color:#64e4ca;background:rgba(45,190,162,.1);font-size:18px}.feature-rule__top{display:flex;align-items:center;justify-content:space-between;gap:8px}.feature-rule h3{font-size:14px;margin:1px 0 5px}.feature-rule p{font-size:10px;color:#7f99ad;line-height:1.7;margin:0}.feature-rule__controls{grid-column:2 / -1;display:grid;grid-template-columns:1fr 1fr;gap:8px}.feature-rule__controls label{font-size:10px;color:#7992a8}.feature-rule__controls select,.feature-rule__controls input[type=text]{display:block;width:100%;box-sizing:border-box;margin-top:5px;border:1px solid var(--notification-line);border-radius:8px;background:#0a1b2c;color:#eaf4fb;padding:9px;font:inherit;font-size:11px}.feature-rule__controls input[type=range]{display:block;width:100%;accent-color:#48d9b8}.rule-toggle{transform:scale(.85);transform-origin:center top}
.preview-card{border-color:rgba(65,211,184,.25)}.sms-preview{display:flex;align-items:center;gap:14px;margin-top:19px;padding:17px;border-radius:14px;background:#071725;border:1px solid rgba(78,220,193,.18)}.sms-preview__badge{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:linear-gradient(145deg,#1b927e,#176077);font-size:11px;color:white}.sms-preview strong{font-size:13px;color:#f1f8fd}.sms-preview p{margin:6px 0;color:#89a4b8;font-size:11px}.sms-preview code{font-family:Consolas,monospace;color:#54dfc0;font-size:11px}.preview-note{color:#7893aa;font-size:11px;margin:13px 0 0}.form-actions{display:flex;align-items:center;gap:10px;margin:22px 0}.button{border-radius:10px;padding:12px 18px;border:1px solid transparent;font:inherit;font-size:12px;cursor:pointer;text-decoration:none}.button--primary{background:linear-gradient(135deg,#48d5b0,#37b8be);color:#052033;font-weight:800}.button--primary:hover{filter:brightness(1.08)}.button--ghost{background:#0d2336;border-color:var(--notification-line);color:#b9ccda}.button:disabled{opacity:.55;cursor:wait}.last-updated{color:#718ba2;font-size:10px;margin-right:auto}.notification-guide{display:grid;grid-template-columns:.7fr 1.3fr;gap:30px;padding:23px 27px;margin-top:18px}.notification-guide h2{font-size:18px}.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.guide-grid p{margin:0;color:#8da6b9;font-size:11px;line-height:1.9}.guide-grid b{display:block;color:#d9e9f4;margin-bottom:4px}.empty-state{text-align:center;padding:65px 24px;margin-top:20px}.empty-state__icon{font-size:38px;color:#4bd9bb}.empty-state h2{margin:13px 0 8px;font-size:21px}.empty-state p{color:#819bb0;font-size:12px;margin:0 auto 22px;max-width:440px;line-height:1.9}
@media(max-width:980px){.site-header__inner{width:min(100% - 28px,760px);flex-wrap:wrap;padding:14px 0}.site-nav{order:3;overflow:auto;justify-content:flex-start;width:100%}.auth-slot{margin-right:auto}.notification-shell{width:min(100% - 28px,760px)}.notification-hero{padding-top:38px}.status-grid{grid-template-columns:repeat(2,1fr)}.field-grid--three,.channels-row{grid-template-columns:1fr}.feature-rules{grid-template-columns:1fr}.notification-guide{grid-template-columns:1fr}.guide-grid{grid-template-columns:1fr}}
@media(max-width:540px){.notification-hero{display:block}.hero-status{display:inline-flex;margin-top:20px}.settings-card{padding:20px 16px}.preset-group{grid-template-columns:1fr}.feature-rule{grid-template-columns:34px 1fr}.feature-rule__icon{width:32px;height:32px}.feature-rule__top{display:block}.feature-rule__top .switch-label{margin-top:8px}.feature-rule__controls{grid-column:1 / -1}.form-actions{flex-wrap:wrap}.last-updated{width:100%;margin:2px 0}.guide-grid{grid-template-columns:1fr}.site-nav a{white-space:nowrap}}