/* v2.1.3 notifications: first-launch permission sheet (.v213-np), in-app heads-up banner (.v213-hu) and the
 * Settings status rows (.v213-ns). Gold ScrimMate look, dark + light themes, reduced-motion aware. */
:root { --v213-gold: var(--v211-gold, #f6c445); --v213-card: #14130d; --v213-line: rgb(255 255 255 / .08); --v213-soft: rgb(255 255 255 / .05); --v213-text: #f4efe0; --v213-muted: #b9b29d; --v213-green: #34d399; --v213-blue: #5b8cff; }
:root[data-theme="light"] { --v213-card: #ffffff; --v213-line: rgb(0 0 0 / .08); --v213-soft: rgb(0 0 0 / .04); --v213-text: #1e1b13; --v213-muted: #5e5747; }

/* ---------- first-launch sheet ---------- */
.v213-np { position: fixed; inset: 0; z-index: 9990; display: grid; align-items: end; justify-items: center; padding: 0 0 env(safe-area-inset-bottom); pointer-events: auto; }
.v213-np__scrim { position: absolute; inset: 0; background: rgb(4 4 6 / .66); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transition: opacity .28s ease; }
:root[data-theme="light"] .v213-np__scrim { background: rgb(30 27 19 / .34); }
.v213-np__card { position: relative; width: min(100%, 460px); max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; margin: 0 auto; padding: 0 20px 18px; border-radius: 28px 28px 0 0; background: radial-gradient(130% 60% at 50% 0%, rgb(246 196 69 / .16), transparent 60%), var(--v213-card); color: var(--v213-text); border: 1px solid var(--v213-line); border-bottom: 0; box-shadow: 0 -24px 70px rgb(0 0 0 / .45); transform: translateY(104%); transition: transform .42s cubic-bezier(.2, .9, .25, 1.08); }
:root[data-theme="light"] .v213-np__card { box-shadow: 0 -20px 60px rgb(60 45 0 / .16); }
.v213-np.is-in .v213-np__scrim { opacity: 1; }
.v213-np.is-in .v213-np__card { transform: none; }
.v213-np.is-out .v213-np__scrim { opacity: 0; transition-duration: .2s; }
.v213-np.is-out .v213-np__card { transform: translateY(104%); transition: transform .24s ease-in; }
.v213-np__card::before { content: ""; display: block; width: 40px; height: 4px; margin: 10px auto 0; border-radius: 4px; background: var(--v213-line); }

.v213-np__hero { position: relative; height: 196px; margin: 6px 0 0; }
.v213-np__bell { position: relative; z-index: 2; width: 76px; height: 76px; display: grid; place-items: center; border-radius: 26px; color: #2a1d00; background: linear-gradient(145deg, #ffe58f, #f6c445 48%, #d99a0b); box-shadow: 0 14px 34px rgb(246 196 69 / .38), inset 0 1px 0 rgb(255 255 255 / .55); transform-origin: 50% 8%; animation: v213-ring 2.8s ease-in-out .5s infinite; position: absolute; top: 18px; left: 50%; margin-left: -38px; }
.v213-np__bell svg { width: 40px; height: 40px; fill: currentColor; }
.v213-np__dot { position: absolute; z-index: 3; top: 8px; left: calc(50% + 22px); min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; display: grid; place-items: center; font: 800 12px/1 system-ui, sans-serif; color: #fff; background: #ff4757; border: 3px solid var(--v213-card); animation: v213-pop .5s cubic-bezier(.3, 1.6, .5, 1) .55s both; }
.v213-np__ring { position: absolute; z-index: 1; top: 18px; left: 50%; width: 76px; height: 76px; margin-left: -38px; border-radius: 26px; border: 2px solid rgb(246 196 69 / .5); animation: v213-pulse 2.4s ease-out infinite; }
.v213-np__ring--2 { animation-delay: 1.2s; }
.v213-np__preview { position: absolute; z-index: 4; left: 50%; bottom: 4px; width: min(92%, 340px); display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 18px; text-align: left; background: color-mix(in srgb, var(--v213-card) 82%, #fff 6%); border: 1px solid var(--v213-line); box-shadow: 0 12px 30px rgb(0 0 0 / .32); transform: translate(-50%, 18px); opacity: 0; animation: v213-slide .6s cubic-bezier(.2, .9, .25, 1.1) .75s forwards; }
:root[data-theme="light"] .v213-np__preview { background: #fff; box-shadow: 0 12px 30px rgb(60 45 0 / .14); }
.v213-np__preview img { width: 36px; height: 36px; border-radius: 10px; flex: none; object-fit: cover; }
.v213-np__preview div { display: grid; gap: 1px; min-width: 0; }
.v213-np__preview span { font-size: 11px; color: var(--v213-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v213-np__preview span b { color: var(--v213-text); font-weight: 700; }
.v213-np__preview strong { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v213-np__preview small { font-size: 12px; color: var(--v213-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.v213-np__body { display: grid; gap: 10px; text-align: center; padding-top: 10px; animation: v213-fade .45s ease .2s both; }
.v213-np__eyebrow { justify-self: center; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font: 700 11px/1 system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--v213-gold); background: rgb(246 196 69 / .12); border: 1px solid rgb(246 196 69 / .25); }
:root[data-theme="light"] .v213-np__eyebrow { color: #7a5a00; background: rgb(246 196 69 / .2); }
.v213-np__eyebrow svg { width: 14px; height: 14px; fill: currentColor; }
.v213-np__body h2 { margin: 2px 0 0; font-size: 25px; line-height: 1.15; font-weight: 800; letter-spacing: -.01em; }
.v213-np__body > p { margin: 0 auto; max-width: 34ch; font-size: 14.5px; line-height: 1.45; color: var(--v213-muted); }
.v213-np__list { list-style: none; margin: 6px 0 4px; padding: 6px; display: grid; gap: 2px; text-align: left; border-radius: 18px; background: var(--v213-soft); border: 1px solid var(--v213-line); }
.v213-np__list li { display: flex; align-items: center; gap: 12px; padding: 9px 8px; border-radius: 12px; opacity: 0; transform: translateY(6px); animation: v213-rise .4s ease forwards; }
.v213-np__list li:nth-child(1) { animation-delay: .38s; }
.v213-np__list li:nth-child(2) { animation-delay: .48s; }
.v213-np__list li:nth-child(3) { animation-delay: .58s; }
.v213-np__list li div { display: grid; gap: 1px; min-width: 0; }
.v213-np__list b { font-size: 14px; font-weight: 700; }
.v213-np__list small { font-size: 12.5px; color: var(--v213-muted); }
.v213-np__ico { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 12px; }
.v213-np__ico svg { width: 20px; height: 20px; fill: currentColor; }
.v213-np__ico--gold { color: var(--v213-gold); background: rgb(246 196 69 / .14); }
.v213-np__ico--blue { color: var(--v213-blue); background: rgb(91 140 255 / .14); }
.v213-np__ico--green { color: var(--v213-green); background: rgb(52 211 153 / .14); }
:root[data-theme="light"] .v213-np__ico--gold { color: #8a6500; background: rgb(246 196 69 / .22); }
.v213-np__cta { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 15.5px; font-weight: 800; border-radius: 16px; position: relative; overflow: hidden; }
.v213-np__cta svg { width: 20px; height: 20px; fill: currentColor; }
.v213-np__cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / .38) 50%, transparent 70%); transform: translateX(-120%); animation: v213-shine 3.2s ease-in-out 1.4s infinite; pointer-events: none; }
.v213-np__cta.is-busy { opacity: .8; }
.v213-np__cta.is-busy svg { animation: v213-ring 1s ease-in-out infinite; }
.v213-np__later { min-height: 46px; border-radius: 14px; font-weight: 700; color: var(--v213-muted); }
.v213-np__foot { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; color: var(--v213-muted); padding: 2px 0 4px; }
.v213-np__foot svg { width: 13px; height: 13px; fill: currentColor; opacity: .8; }

.v213-np[data-state="done"] .v213-np__hero, .v213-np[data-state="denied"] .v213-np__hero, .v213-np[data-state="blocked"] .v213-np__hero { display: none; }
.v213-np__result { padding: 26px 4px 6px; }
.v213-np__result[hidden] { display: none; }
.v213-np__badge { justify-self: center; width: 76px; height: 76px; display: grid; place-items: center; border-radius: 50%; animation: v213-pop .5s cubic-bezier(.3, 1.6, .5, 1) both; }
.v213-np__badge svg { width: 40px; height: 40px; fill: currentColor; }
.v213-np__badge.is-ok { color: #06281b; background: radial-gradient(circle at 30% 25%, #8ef0c6, #34d399 60%, #0f9f6e); box-shadow: 0 0 0 10px rgb(52 211 153 / .14), 0 14px 34px rgb(52 211 153 / .35); }
.v213-np__badge.is-off { color: var(--v213-muted); background: var(--v213-soft); border: 1px solid var(--v213-line); }
.v213-np__actions { display: grid; gap: 8px; margin-top: 6px; }
.v213-np__actions:empty { display: none; }

/* ---------- in-app heads-up banner ---------- */
.v213-hu { position: fixed; z-index: 9995; left: 0; right: 0; top: 0; padding: calc(env(safe-area-inset-top) + 10px) 12px 0; display: flex; justify-content: center; pointer-events: none; }
.v213-hu__card { pointer-events: auto; position: relative; width: min(100%, 460px); display: flex; align-items: stretch; overflow: hidden; border-radius: 20px; background: color-mix(in srgb, var(--v213-card) 90%, transparent); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); border: 1px solid var(--v213-line); box-shadow: 0 18px 44px rgb(0 0 0 / .42), 0 0 0 1px rgb(246 196 69 / .1); transform: translateY(-130%); opacity: 0; transition: transform .38s cubic-bezier(.2, .9, .25, 1.1), opacity .2s ease; touch-action: pan-x; }
:root[data-theme="light"] .v213-hu__card { box-shadow: 0 16px 40px rgb(60 45 0 / .18); }
.v213-hu.is-in .v213-hu__card { transform: none; opacity: 1; }
.v213-hu.is-out .v213-hu__card { transform: translateY(-130%); opacity: 0; transition: transform .22s ease-in, opacity .22s ease-in; }
.v213-hu__main { flex: 1; min-width: 0; display: flex; gap: 12px; align-items: center; padding: 12px 6px 14px 12px; border: 0; background: none; color: var(--v213-text); text-align: left; font: inherit; cursor: pointer; }
.v213-hu__ico { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 14px; }
.v213-hu__ico svg { width: 22px; height: 22px; fill: currentColor; }
.v213-hu__ico--gold { color: #2a1d00; background: linear-gradient(145deg, #ffe58f, #f6c445 55%, #e0a512); box-shadow: 0 6px 16px rgb(246 196 69 / .3); }
.v213-hu__ico--blue { color: #fff; background: linear-gradient(145deg, #86a8ff, #5b8cff); }
.v213-hu__ico--green { color: #06281b; background: linear-gradient(145deg, #8ef0c6, #34d399); }
.v213-hu__txt { display: grid; gap: 1px; min-width: 0; }
.v213-hu__txt small { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--v213-gold); }
:root[data-theme="light"] .v213-hu__txt small { color: #7a5a00; }
.v213-hu__txt b { font-size: 14.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v213-hu__txt span { font-size: 13px; line-height: 1.35; color: var(--v213-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.v213-hu__x { flex: none; width: 44px; border: 0; background: none; color: var(--v213-muted); display: grid; place-items: center; cursor: pointer; }
.v213-hu__x svg { width: 18px; height: 18px; fill: currentColor; }
.v213-hu__timer { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: linear-gradient(90deg, #f6c445, #ffe58f); transform-origin: left; animation: v213-timer 6.5s linear forwards; opacity: .85; }

/* ---------- Settings status rows ---------- */
.v213-ns-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font: 700 12px/1 system-ui, sans-serif; white-space: nowrap; }
.v213-ns-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.v213-ns-chip--on { color: var(--v213-green); background: rgb(52 211 153 / .13); }
.v213-ns-chip--off { color: var(--v213-muted); background: var(--v213-soft); }
.v213-ns-chip--blocked { color: #ff6b6b; background: rgb(255 107 107 / .12); }
:root[data-theme="light"] .v213-ns-chip--on { color: #0b7a52; }
:root[data-theme="light"] .v213-ns-chip--blocked { color: #c0392b; }

/* ---------- motion ---------- */
@keyframes v213-ring { 0%, 52%, 100% { transform: rotate(0); } 6% { transform: rotate(14deg); } 12% { transform: rotate(-12deg); } 18% { transform: rotate(9deg); } 24% { transform: rotate(-6deg); } 30% { transform: rotate(3deg); } 36% { transform: rotate(0); } }
@keyframes v213-pulse { 0% { transform: scale(1); opacity: .65; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes v213-pop { 0% { transform: scale(0); } 100% { transform: scale(1); } }
@keyframes v213-slide { to { transform: translate(-50%, 0); opacity: 1; } }
@keyframes v213-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes v213-rise { to { opacity: 1; transform: none; } }
@keyframes v213-shine { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@keyframes v213-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.v213-np.is-reduced *, .v213-hu.is-reduced * { animation: none !important; transition: none !important; }
.v213-np.is-reduced .v213-np__preview { opacity: 1; transform: translate(-50%, 0); }
.v213-np.is-reduced .v213-np__list li { opacity: 1; transform: none; }
.v213-np.is-reduced .v213-np__card, .v213-hu.is-reduced .v213-hu__card { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .v213-np *, .v213-hu * { animation: none !important; }
  .v213-np__preview { opacity: 1; transform: translate(-50%, 0); }
  .v213-np__list li { opacity: 1; transform: none; }
}
@media (min-width: 600px) { .v213-np { align-items: center; } .v213-np__card { border-radius: 28px; border-bottom: 1px solid var(--v213-line); } }
@media (max-height: 640px) { .v213-np__hero { height: 168px; } .v213-np__bell, .v213-np__ring { width: 62px; height: 62px; margin-left: -31px; top: 12px; } .v213-np__dot { top: 2px; left: calc(50% + 16px); } .v213-np__list li { padding: 6px 8px; } }