.notification-page{max-width:1040px;margin:0 auto;padding:30px 0 64px}.notification-intro{margin-bottom:30px;display:flex;align-items:end;justify-content:space-between;gap:20px}.notification-intro h1{font:600 clamp(32px,5vw,48px)/1.15 var(--font-heading,var(--font-display));margin:6px 0 12px}.notification-intro p,.notification-card p,.notification-page small{color:var(--muted)}.notification-eyebrow{font-size:11px;letter-spacing:.2em;color:var(--accent)}.notification-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.notification-card{border:1px solid var(--border);background:var(--surface);padding:24px;border-radius:12px;min-width:0}.notification-card header{display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--border);padding-bottom:18px;margin-bottom:22px}.notification-card h2{font-size:23px;margin:0}.notification-card header p{margin:2px 0;font-size:12px}.notification-icon{width:46px;height:46px;background:color-mix(in srgb,var(--accent) 10%,transparent);border:1px solid var(--border);border-radius:12px;display:grid;place-items:center;font-size:27px;color:var(--accent)}.notification-identity{display:flex;gap:12px;align-items:center;margin-bottom:22px;overflow-wrap:anywhere}.notification-avatar{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:var(--soft,var(--surface-raised));font-weight:600;flex:none}.notification-identity strong,.notification-identity small{display:block}.notification-identity small{color:var(--accent)}.notification-row{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:20px 0}.notification-row label{font-weight:500}.notification-switch{width:42px;height:24px;accent-color:var(--accent);cursor:pointer}.notification-segments{display:flex;gap:4px;padding:4px;border:1px solid var(--border);border-radius:7px;margin:10px 0 22px}.notification-segments button{flex:1;border:0;background:transparent;color:var(--muted);padding:10px;border-radius:4px;cursor:pointer;font:inherit}.notification-segments button[aria-pressed=true]{background:var(--surface-raised,var(--soft));color:var(--fg)}.notification-card select{background:var(--bg);color:var(--fg);border:1px solid var(--border);padding:8px 20px;border-radius:6px}.notification-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:24px}.notification-actions .quiet{color:var(--muted);background:none;border:none;cursor:pointer;padding:8px}.notification-card .btn{max-width:100%}.notification-hint{font-size:12px;margin-top:18px!important}.notification-guest{border:1px solid var(--border);border-radius:9px;padding:20px;margin-bottom:20px;display:flex;align-items:center;justify-content:space-between;gap:20px}.notification-test{font-size:12px;min-height:20px;margin-top:14px;color:var(--accent)}.notification-bottom{margin-top:25px;padding:18px 0;color:var(--muted)}.notification-bottom a{color:var(--accent)}.notification-code{padding:14px;background:var(--bg);border:1px solid var(--border);border-radius:6px;overflow-wrap:anywhere;user-select:all;font-size:12px;white-space:normal;display:block;margin:16px 0}.notification-mini .btn{font:inherit}.notifications-mini{background:var(--bg);min-height:100vh}.notifications-mini .notification-page{max-width:520px;padding:calc(20px + env(safe-area-inset-top)) 16px calc(30px + env(safe-area-inset-bottom))}.notifications-mini .notification-intro{margin-bottom:20px}.notifications-mini .notification-intro h1{font-size:30px}.notifications-mini .notification-card{padding:20px}.notification-matches{margin-top:28px}.notification-match{display:flex;align-items:center;gap:13px;padding:14px 0;border-bottom:1px solid var(--border);min-width:0}.notification-match img{width:48px;height:48px;object-fit:contain}.notification-match strong,.notification-match small{display:block}.notification-match .match-result{margin-left:auto;font-size:12px}.notification-match .win{color:var(--success)}.notification-match .loss{color:var(--danger)}.notification-error{border:1px solid var(--border);padding:24px;border-radius:10px}.notification-page button:focus-visible,.notification-page a:focus-visible,.notification-page select:focus-visible{outline:2px solid var(--accent);outline-offset:4px}@media(max-width:700px){.notification-page{padding:18px 0 40px}.notification-grid{grid-template-columns:1fr}.notification-intro{align-items:start;flex-direction:column}.notification-card{padding:20px}.notification-guest{align-items:start;flex-direction:column}.notification-card h2{font-size:22px}}

.notification-icon svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.notification-switch{appearance:none;position:relative;flex:none;width:42px;height:24px;margin:0;border:1px solid var(--border);border-radius:99px;background:var(--bg);transition:background .15s}.notification-switch:before{content:'';position:absolute;width:16px;height:16px;left:3px;top:3px;border-radius:50%;background:var(--muted);transition:transform .15s}.notification-switch:checked{background:var(--accent);border-color:var(--accent)}.notification-switch:checked:before{transform:translateX(18px);background:var(--bg)}