:root {
    color-scheme: light;
    --bg: #f5f6fa; --surface: #fff; --text: #17213a; --muted: #546079;
    --line: #d8deea; --accent: #3149a3; --accent-text: #fff; --soft: #e9edff;
    --danger: #8b223c; --error-bg: #fff0f2; --notice: #fff5d9; --focus: #354fc0;
    --ok: #155f46; --ok-bg: #ddf4ea; --shadow: 0 3px 18px #26345a09;
}
:root[data-theme=dark] {
    color-scheme: dark;
    --bg: #121625; --surface: #1b2134; --text: #f0f3fb; --muted: #b3bed6;
    --line: #37435e; --accent: #aabaff; --accent-text: #17213a; --soft: #283556;
    --danger: #ffc3cd; --error-bg: #432638; --notice: #3b3324; --focus: #ffd787;
    --ok: #a4e5cd; --ok-bg: #1e423a; --shadow: none;
}
:root[data-theme=hellokitty] {
    --bg: #fffaf4; --surface: #fffefa; --text: #302225; --muted: #71555a;
    --line: #ecd8d4; --accent: #ba203f; --soft: #ffe4e5; --focus: #ba203f;
    --shadow: 0 3px 18px #8a30400a;
}
:root[data-theme=pinkneon] {
    color-scheme: dark;
    --bg: #1b1022; --surface: #2c1b33; --text: #fff1ff; --muted: #d9bddb;
    --line: #503457; --accent: #ffaae2; --accent-text: #29102a; --soft: #4d2c50;
    --danger: #ffc1d1; --error-bg: #49243f; --notice: #452d36; --focus: #ffd3ef;
    --ok: #b4eedb; --ok-bg: #25453f; --shadow: none;
    --meme-ass-we-can: url("../icons/pink-neon-ass-we-can.svg");
    --meme-gachigasm: url("../icons/pink-neon-gachigasm.svg");
}
*, *::before, *::after { box-sizing: border-box; }
body {
    margin: 0; background: var(--bg); color: var(--text); font: 1rem/1.5 system-ui, sans-serif;
    padding: max(env(safe-area-inset-top), var(--safe-top, 0px)) max(env(safe-area-inset-right), var(--safe-right, 0px))
        max(env(safe-area-inset-bottom), var(--safe-bottom, 0px)) max(env(safe-area-inset-left), var(--safe-left, 0px));
    overflow-wrap: anywhere;
}
a { color: var(--accent); }
a, button, input, select, textarea { touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
h1[tabindex="-1"]:focus { outline: none; }
header {
    display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.5rem;
    padding: .65rem max(1rem, calc((100% - 68rem) / 2)); border-bottom: 1px solid var(--line); background: var(--surface);
}
.brand { color: var(--text); font-size: 1.48rem; font-weight: 800; letter-spacing: -.05em; text-decoration: none; }
.brand span { color: var(--accent); margin-left: .4rem; font-size: .48em; vertical-align: middle; }
[data-theme=hellokitty] .brand span {
    display: inline-block; width: 1.35rem; height: .95rem; font-size: 0;
    background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 17' fill='%23e42b4c'%3E%3Cpath d='M11 8C7 3 4 2 2 5s-2 8 0 10 6-1 10-4c5 2 9 3 11 1s1-8-1-10-6 1-10 5z'/%3E%3Ccircle cx='12' cy='9' r='3' fill='%23ba203f'/%3E%3C/svg%3E");
}
[data-theme=pinkneon] .brand span {
    display: inline-block; width: 1.55rem; height: 1.55rem; font-size: 0;
    border: 1px solid var(--accent); border-radius: 50%; box-shadow: 0 0 .45rem #e467b45c;
    background: 47% 50% / auto 140% no-repeat var(--meme-gachigasm);
}
.startup-screen {
    display: grid; place-content: center; justify-items: center; gap: .75rem; padding: 1.25rem; text-align: center;
    min-block-size: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    min-block-size: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}
.startup-screen img { filter: grayscale(1) contrast(.82); }
.startup-screen .brand { font-size: 1.75rem; margin: 0; }
.startup-panel { width: min(18rem, 75vw); }
.startup-panel p:last-child { margin: 0; }
[data-loading] :is(.loading-value, .charge-price, input, select, textarea) { filter: blur(3px); opacity: .65; }
@media (prefers-reduced-motion: no-preference) {
    [data-loading] :is(.loading-value, .charge-price, input, select, textarea) { animation: loading-pulse 1.4s ease-in-out infinite alternate; }
}
@keyframes loading-pulse { to { opacity: .35; } }
nav, .actions, .account { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
nav a { color: var(--muted); text-decoration: none; padding: .6rem .75rem; border-radius: .45rem; font-size: .95rem; font-weight: 600; }
nav a.active { color: var(--accent); background: var(--soft); }
.account { margin-left: auto; font-size: .875rem; }
.account-name { max-width: 10rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.language-switch { display: flex; position: relative; isolation: isolate; }
.language-switch::before {
    content: ""; position: absolute; inset: .4375rem .375rem; z-index: -1;
    border: 1px solid var(--line); border-radius: .5rem;
}
.language-switch button {
    width: 2.75rem; min-height: 2.75rem; padding: 0; border: 0;
    background: transparent; color: var(--muted); font-size: .75rem;
}
.language-switch button span {
    display: grid; place-items: center; width: 1.75rem; height: 1.5rem; border-radius: .375rem;
}
.language-switch button[aria-pressed=true] span {
    color: var(--accent-text); background: var(--accent); font-weight: 800;
}
.language-switch button:hover:not(:disabled) span { text-decoration: underline; }
.account .logout {
    position: relative; width: 2.75rem; min-height: 2.75rem; padding: 0;
    border-width: 0; border-radius: .5rem; color: var(--muted);
}
.account .logout::before {
    content: ""; position: absolute; inset: .25rem; border: 1px solid;
    border-color: inherit; border-radius: inherit;
}
.account .logout svg { width: 1.125rem; height: 1.125rem; }
.skip { position: absolute; top: -5rem; left: .75rem; z-index: 3; background: var(--surface); padding: .65rem; }
.skip:focus { top: .75rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
main { max-width: 70rem; margin: auto; padding: 1.25rem 1rem 3rem; min-width: 0; }
h1, h2, p { margin-top: 0; }
h1 { font-size: clamp(1.55rem, 4vw, 2rem); letter-spacing: -.035em; line-height: 1.2; margin-bottom: .85rem; }
h2 { font-size: 1.03rem; margin-bottom: .6rem; line-height: 1.25; }
.page-title { display: flex; flex-wrap: wrap; gap: .65rem 1rem; justify-content: space-between; align-items: center; margin-bottom: .85rem; }
.page-title h1 { margin: 0; }
.page-title > .button { font-size: .9rem; }
.eyebrow { color: var(--accent); text-transform: uppercase; letter-spacing: .1em; font-weight: 750; font-size: .75rem; margin-bottom: .4rem; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: .85rem; box-shadow: var(--shadow); padding: 1rem; min-width: 0; }
.login { max-width: 29rem; margin: 3rem auto; padding: 1.5rem; }
.muted { color: var(--muted); }
.notice, .error { border-radius: .55rem; padding: .75rem .9rem; margin-bottom: 1rem; }
.notice { background: var(--notice); }
.error { background: var(--error-bg); border: 1px solid var(--danger); color: var(--danger); }
.error p { margin: 0 0 .35rem; }
button, .button, input, select, textarea { font: inherit; }
button, .button {
    display: inline-flex; align-items: center; justify-content: center; padding: .45rem .72rem; min-height: 2.55rem;
    border: 1px solid var(--line); border-radius: .5rem; background: var(--surface); color: var(--text); text-decoration: none;
    font-weight: 650; cursor: pointer; text-align: center;
}
button:hover:not(:disabled), .button:hover { border-color: var(--accent); }
.primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.quiet { background: transparent; }
.danger, .field-error { color: var(--danger); }
button:disabled, .subscription-add[aria-disabled=true] { opacity: .62; cursor: not-allowed; }
.actions { margin-top: .75rem; }
header .actions, .account .actions { margin-top: 0; }
.metrics, .dashboard-grid, .subscription-grid, .form-grid { display: grid; gap: .75rem; }
.metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: .8rem; }
[data-theme=hellokitty] .monthly-total {
    --kitty-sticker: clamp(2.75rem, 6.5vw, 4.5rem);
    padding-inline-end: calc(var(--kitty-sticker) + 1.25rem);
    background: #fff0ed url("../icons/hello-kitty.svg") right .55rem bottom .45rem / var(--kitty-sticker) auto no-repeat;
    box-shadow: inset 0 3px #d6344e, var(--shadow);
}
[data-theme=pinkneon] .monthly-total {
    --meme-image: var(--meme-ass-we-can);
    position: relative; background: #3c2546; box-shadow: none;
}
[data-theme=pinkneon] .monthly-total::after {
    content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
    border-radius: inherit; box-shadow: inset 0 2px var(--accent);
}
:is(.monthly-total, .subscription-link):has(> .meme-art) {
    position: relative; isolation: isolate;
}
.meme-art {
    position: absolute; inset: 0; overflow: hidden; pointer-events: none;
    border-radius: inherit; color: var(--accent);
}
.meme-art::before {
    content: ""; position: absolute; inset: 0 0 0 auto; z-index: -1; width: 50%;
    background: var(--meme-position, right center) / cover no-repeat var(--meme-image);
    mask-image: linear-gradient(to right, transparent, #000 38%);
    filter: drop-shadow(-.2rem .15rem .45rem #100a15b3);
}
.meme-art > span {
    position: absolute; inset: .1rem .4rem auto auto; z-index: 1; padding-inline: .22rem;
    border-radius: .25rem; background: color-mix(in srgb, var(--surface) 90%, transparent);
    line-height: 1.05;
}
:is(.monthly-total, .subscription-link):has(> .meme-art) > .meme-card-text {
    position: relative; z-index: 2;
    text-shadow: 0 1px 3px #150a1c, 0 0 .4rem #150a1c;
}
.subscription-link[data-meme] .card-top { justify-content: flex-start; }
[data-theme=pinkneon] .monthly-total .total { color: var(--accent); }
.monthly-meme { color: var(--accent); font: italic 750 .75rem/1.2 Georgia, serif; }
.dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.total, .price { font-variant-numeric: tabular-nums; font-weight: 750; font-size: clamp(1.3rem, 4vw, 1.9rem); margin: .4rem 0 0; }
.total span, .price span { color: var(--muted); font-size: .82rem; font-weight: 600; }
.expense, .charge { padding: .45rem 0; border-top: 1px solid var(--line); }
.expense > div:first-child, .charge { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .35rem .75rem; }
.charge > div:first-child { flex: 1 1 10rem; min-width: 0; overflow-wrap: anywhere; }
.charge-price small { display: block; }
.charge-price small, .charge-date { font-size: .82rem; }
.charge-date [role="timer"] { margin-inline-start: .25em; white-space: nowrap; }
.billing-date { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 .35rem; }
.billing-date time { white-space: nowrap; }
.billing-countdown { font-size: .7rem; font-variant-numeric: tabular-nums; }
.charge-amount { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .3rem; font-variant-numeric: tabular-nums; }
.bar { height: .4rem; border-radius: 99px; background: var(--soft); margin-top: .35rem; }
.bar span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.subscription-tools { display: grid; grid-template-columns: minmax(0, 22rem) max-content 1fr; gap: .5rem; margin-bottom: .75rem; }
.subscription-tools input[type=search] { background: var(--surface); }
.subscription-tools input::placeholder { color: var(--muted); opacity: 1; }
.subscription-add { grid-column: 3; justify-self: end; width: 2.75rem; height: 2.75rem; padding: 0; }
.subscription-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: .6rem; }
.subscription { display: grid; padding: 0; box-shadow: none; }
.subscription:hover { border-color: var(--accent); }
.subscription-link { display: block; padding: .7rem .8rem; border-radius: inherit; color: inherit; text-decoration: none; }
.subscription.paused { background: var(--bg); color: var(--muted); }
.subscription.paused .badge { background: var(--surface); }
.subscription .charge-price { margin-top: .3rem; }
.subscription .charge-amount strong { font-size: 1.2rem; }
.subscription .charge-amount span, .subscription-meta { font-size: .82rem; }
.subscription-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 .65rem; margin-top: .3rem; }
.subscription-meta:empty { display: none; }
.card-top { display: flex; align-items: start; justify-content: space-between; gap: .5rem; }
.card-top h2 { margin-bottom: 0; }
[data-theme=pinkneon] .subscription:has(.subscription-link[data-meme]) { border-color: var(--accent); }
.meme-sticker { font: 750 .72rem/1.2 ui-monospace, monospace; }
.subscription-link[data-meme="ass-we-can"] { --meme-image: var(--meme-ass-we-can); }
.subscription-link[data-meme="gachigasm"] { --meme-image: var(--meme-gachigasm); }
.subscription-link[data-meme="wrong-door"] {
    --meme-image: url("../icons/pink-neon-wrong-door.svg"); --meme-position: center top;
}
.subscription-link[data-meme="leather-club"] {
    --meme-image: url("../icons/pink-neon-leather-club.svg"); --meme-position: center 15%;
}
.subscription-link[data-meme="reaction"] { --meme-image: url("../icons/pink-neon-reaction.svg"); }
.subscription-link[data-meme="flower"] {
    --meme-image: url("../icons/pink-neon-flower.svg"); --meme-position: center 22%;
}
.badge { border-radius: 2rem; background: var(--soft); color: var(--muted); padding: .25rem .55rem; font-size: .82rem; white-space: nowrap; }
.active-badge { background: var(--ok-bg); color: var(--ok); }
dl { margin: .8rem 0; }
dl div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem .5rem; }
dt { color: var(--muted); }
dd { margin: 0; font-weight: 650; }
.empty { margin-bottom: 1rem; }
.editor { max-width: 52rem; }
.subscription-editor { max-width: 34rem; margin-inline: auto; }
.subscription-editor .page-title { flex-wrap: nowrap; }
.editor-fields, .amount-fields { display: grid; gap: .65rem; }
.amount-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 0; }
.amount-fields > label { display: grid; grid-row: span 3; grid-template-rows: subgrid; gap: 0; }
.amount-fields > label > span:first-child { margin-bottom: .28rem; }
.amount-fields .field-error { margin-top: .28rem; }
.editor-section { border-top: 1px solid var(--line); margin-top: .55rem; }
.editor-section summary { cursor: pointer; padding: .55rem 0; }
.editor-section small { margin-inline-start: .35rem; }
.editor-section p { margin-bottom: .35rem; font-size: .85rem; }
.notes-preview { display: inline-block; max-inline-size: 65%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.editor-menu { position: relative; flex: none; }
.editor-menu summary { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--line); border-radius: .5rem; background: var(--surface); cursor: pointer; font-size: 1.35rem; list-style: none; }
.editor-menu summary::-webkit-details-marker { display: none; }
.editor-menu .panel { position: absolute; z-index: 2; inset-inline-end: 0; display: grid; gap: .3rem; min-width: 9rem; padding: .35rem; }
.editor-menu button { justify-content: start; border-color: transparent; }
.back-link { display: inline-block; margin-bottom: .6rem; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 1rem; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; align-items: start; max-width: 56rem; }
.settings-grid > .preferences, .settings-grid > .backup-settings { grid-column: 1 / -1; }
.settings-grid .preferences { max-width: none; }
.account-deletion { width: 100%; max-width: 28rem; }
.delete-account {
    display: flex; flex-direction: column; align-items: stretch; gap: .7rem; width: 100%; padding: .85rem 1rem;
    background: color-mix(in srgb, #991b1b var(--delete-red), #fff); color: var(--delete-text);
    border-color: transparent; border-radius: .75rem; user-select: none; -webkit-user-select: none; text-align: start;
}
.delete-account:hover:not(:disabled) { border-color: transparent; }
.delete-account-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.delete-account-meta { flex: none; font-size: .8rem; font-weight: 400; font-variant-numeric: tabular-nums; }
.delete-account-segments { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: .25rem; }
.delete-account-segments > span { height: .25rem; border-radius: .125rem; background: currentColor; opacity: .16; }
.delete-account-segments > span[data-filled] { opacity: 1; }
.preferences .form-grid { margin-bottom: 0; }
.zone-field { display: grid; gap: .28rem; }
.zone-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .45rem; }
.zone-controls select { text-overflow: ellipsis; }
.zone-controls button { min-height: 2.75rem; font-size: .875rem; white-space: nowrap; }
.zone-controls button svg { display: none; }
.channel-switch {
    justify-content: space-between; width: 100%; min-height: 2.75rem; padding: .35rem 0;
    border: 0; background: transparent; text-align: start;
}
.channel-switch:disabled { opacity: 1; color: var(--muted); }
.push-settings { border-top: 1px solid var(--line); }
.switch-track {
    display: inline-flex; align-items: center; flex: none; width: 2.5rem; height: 1.45rem; padding: .16rem;
    border: 1px solid var(--muted); border-radius: 2rem; background: var(--bg); color: var(--muted);
}
.switch-track::before { content: ""; width: 1rem; height: 1rem; border-radius: 50%; background: currentColor; }
.channel-switch[aria-checked=true] .switch-track {
    justify-content: flex-end; border-color: var(--accent); background: var(--accent); color: var(--accent-text);
}
.channel-switch:disabled .switch-track { opacity: .45; }
.channel-actions { margin: 0 0 .4rem; font-size: .875rem; }
.backup-action { display: flex; justify-content: flex-start; gap: .55rem; width: 100%; min-height: 2.75rem; }
.backup-action svg { flex: none; color: var(--accent); }
.backup-settings details { margin-top: .4rem; }
.backup-settings summary::-webkit-details-marker { display: none; }
.backup-settings summary::after {
    content: ""; width: .45rem; height: .45rem; border: solid currentColor; border-width: 0 1.5px 1.5px 0;
    margin-inline: auto .2rem; transform: rotate(45deg);
}
.backup-settings details[open] summary::after { transform: rotate(225deg); }
.backup-file {
    position: relative; display: flex; align-items: center; height: 2.75rem; padding: .35rem .5rem;
    border: 1px solid var(--line); border-radius: .45rem; background: var(--bg); font-weight: 400;
}
.backup-file > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.backup-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.backup-file input:disabled { cursor: not-allowed; }
.backup-file:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.backup-settings [role=status]:not(:empty), .backup-settings [role=alert] { margin-top: .65rem; }
.wide { grid-column: 1 / -1; }
label { display: flex; flex-direction: column; gap: .28rem; font-size: .9rem; font-weight: 600; min-width: 0; }
.date-field { display: flex; flex-direction: column; gap: .28rem; min-width: 0; }
input:not([type=checkbox]), select, textarea { font: 400 1rem system-ui, sans-serif; width: 100%; min-width: 0; max-width: 100%; border: 1px solid var(--line); border-radius: .45rem; background: var(--bg); color: var(--text); padding: .35rem .5rem; }
input:not([type=checkbox]), select { height: 2.75rem; margin: 0; }
/* iOS WebKit adds input padding outside the date/time box (bug 301648). */
input:is([type=date], [type=time]) { appearance: none; padding: 0; }
input:is([type=date], [type=time])::-webkit-date-and-time-value {
    min-width: 0; min-height: 1.25em; margin: 0; padding-inline: .5rem; text-align: start;
}
input:is([type=date], [type=time])::-webkit-datetime-edit { padding-inline: .5rem; }
input[type=file]::file-selector-button { font: inherit; }
.localized-date { position: relative; display: block; }
.localized-date > input { padding-inline-end: 2.75rem; }
.date-picker { position: absolute; inset: 0 0 0 auto; width: 2.75rem; display: grid; place-items: center; }
.date-picker input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.date-picker input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; }
.date-picker:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: -3px; border-radius: .45rem; }
textarea { min-height: 2.75rem; resize: vertical; }
.check { flex-direction: row; align-items: center; gap: .5rem; min-height: 2rem; }
input[type=checkbox] { width: 1.1rem; height: 1.1rem; accent-color: var(--accent); flex: none; }
.reminder-row { display: grid; align-items: center; grid-template-columns: minmax(0, 1fr) minmax(0, min(50%, 9rem)); gap: .6rem; padding: .25rem 0; }
.form-actions { margin-top: 1rem; }
#blazor-error-ui:not([hidden]) { position: fixed; inset: auto 0 0; padding: .75rem; background: var(--error-bg); z-index: 5; }
@media (max-width: 360px) {
    .zone-controls button { width: 2.75rem; padding: 0; }
    .zone-controls button svg { display: block; }
    .zone-controls button span { display: none; }
}
@media (max-width: 53rem) {
    header { padding: .6rem .75rem; gap: .35rem .5rem; }
    nav { order: 3; width: 100%; justify-content: space-between; gap: .15rem; }
    nav a { flex: 1; min-height: 2.75rem; padding: .65rem .25rem; text-align: center; font-size: .9rem; }
    .account-name { display: none; }
}
@media (max-width: 640px) {
    main { padding-top: 1rem; }
    .metrics, .dashboard-grid, .settings-grid, .form-grid { grid-template-columns: 1fr; }
    [data-theme=hellokitty] .monthly-total { --kitty-sticker: 4.5rem; }
    .subscription-tools { grid-template-columns: minmax(0, 1fr) fit-content(52%) auto; }
    .login { margin-top: 1rem; }
}