:root {
    --bg: #17212b;
    --surface: #1d2733;
    --surface-2: #232f3d;
    --line: #2a3642;
    --text: #eaf0f6;
    --muted: #7f8fa0;
    --accent: var(--tg-theme-button-color, #4ea1f0);
    --accent-soft: rgba(78, 161, 240, 0.14);
    --danger: #e56a6a;
    --warn: #d9a441;
    --ok: #6bbf83;
    --faint: #55677a;
    --radius-sm: 10px;
    --radius: 14px;
    --radius-lg: 20px;
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

/* Author display rules would otherwise beat the hidden attribute. */
[hidden] {
    display: none !important;
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Arabic",
        "Segoe UI", "Noto Sans Arabic", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: 0.1px;
    -webkit-font-smoothing: antialiased;
}

input,
button {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

/* ---------- gate ---------- */

.gate {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: var(--muted);
    padding: 24px;
    text-align: center;
}

.spinner {
    width: 26px;
    height: 26px;
    border: 2px solid var(--line);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

.gate.is-error .spinner {
    display: none;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ---------- shell ---------- */

.app {
    max-width: 560px;
    margin: 0 auto;
    /* Bottom room for the floating microphone. */
    padding: 10px 16px calc(104px + env(safe-area-inset-bottom));
}

/* The app is a set of modules; personal accounting is only the first one. */
.modules {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 4px 0 14px;
    margin: 0 -16px 4px;
    padding-inline: 16px;
}

.modules::-webkit-scrollbar {
    display: none;
}

.modules,
.tabs,
.chips-scroll {
    -webkit-mask-image: linear-gradient(
        to left,
        #000 calc(100% - 22px),
        transparent
    );
    mask-image: linear-gradient(
        to left,
        #000 calc(100% - 22px),
        transparent
    );
}

/* Nothing to fade when the row already fits. */
@media (min-width: 520px) {
    .modules,
    .tabs,
    .chips-scroll {
        -webkit-mask-image: none;
        mask-image: none;
    }
}

.module {
    flex: none;
    background: var(--surface);
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 9px 16px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--muted);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.16s ease, color 0.16s ease,
        border-color 0.16s ease;
}

.module.is-active {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

.soon {
    text-align: center;
    padding: 64px 20px;
    color: var(--muted);
}

.soon h2 {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 600;
    color: var(--text);
}

.soon p {
    margin: 0;
    font-size: 13.5px;
}

/* ---------- voice ---------- */

.mic {
    position: fixed;
    z-index: 30;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(20px + env(safe-area-inset-bottom));
    width: 62px;
    height: 62px;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(180deg, var(--surface-2), var(--surface));
    box-shadow: 0 0 0 1px var(--line), 0 10px 26px rgba(0, 0, 0, 0.45);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.mic:active {
    transform: translateX(-50%) scale(0.94);
}

.mic svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: var(--accent);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mic-pulse {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1px solid var(--accent);
    opacity: 0;
}

.mic.is-listening {
    box-shadow: 0 0 0 1px var(--accent), 0 10px 30px rgba(78, 161, 240, 0.35);
}

.mic.is-listening .mic-pulse {
    animation: pulse 1.4s ease-out infinite;
}

.mic.is-disabled {
    opacity: 0.45;
}

.mic.is-busy {
    opacity: 0.6;
    pointer-events: none;
}

@keyframes pulse {
    0% {
        opacity: 0.5;
        transform: scale(0.94);
    }
    100% {
        opacity: 0;
        transform: scale(1.18);
    }
}

.voice-dock {
    position: fixed;
    z-index: 29;
    left: 0;
    right: 0;
    bottom: calc(92px + env(safe-area-inset-bottom));
    display: flex;
    justify-content: center;
    padding: 0 16px;
    pointer-events: none;
}

.voice-panel {
    width: 100%;
    max-width: 460px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
    padding: 14px 16px;
    pointer-events: auto;
    animation: rise 0.2s ease-out;
}

.voice-hint {
    margin: 0;
    font-size: 13px;
    color: var(--muted);
    text-align: center;
    min-height: 20px;
}

.voice-close {
    display: block;
    width: 100%;
    margin-top: 10px;
    background: none;
    border: 0;
    padding: 6px;
    font: inherit;
    font-size: 13px;
    color: var(--muted);
    cursor: pointer;
}

.voice-reply {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
    max-height: 40vh;
    overflow-y: auto;
}

.voice-transcript {
    margin: 0;
    font-size: 13px;
    color: var(--muted);
    line-height: 1.6;
}

.voice-transcript:empty {
    display: none;
}

.voice-answer {
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 1.7;
}

.voice-answer:empty {
    display: none;
}

.limit-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 12px 14px;
    margin-bottom: 16px;
}

.limit-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 9px;
}

.limit-label {
    font-size: 12.5px;
    color: var(--muted);
}

.limit-value {
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: -0.2px;
}

.limit-track {
    height: 5px;
    border-radius: 999px;
    background: var(--surface-2);
    overflow: hidden;
}

.limit-fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: var(--accent);
    transition: width 0.35s ease, background 0.25s ease;
}

.limit-card.is-half .limit-fill {
    background: var(--warn);
}

.limit-card.is-half .limit-value {
    color: var(--warn);
}

.limit-card.is-over .limit-fill {
    background: var(--danger);
}

.limit-card.is-over .limit-value {
    color: var(--danger);
}

.limit-note {
    margin: 9px 0 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--muted);
}

.limit-note:empty {
    display: none;
}

.limit-card.is-half .limit-note {
    color: var(--warn);
}

.limit-card.is-over .limit-note {
    color: var(--danger);
}

/* ---------- tabs ---------- */

.tabs {
    position: relative;
    display: flex;
    border-bottom: 1px solid var(--line);
    margin-bottom: 18px;
    overflow-x: auto;
    scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
    display: none;
}

.tab {
    flex: 1;
    min-width: 0;
    background: none;
    border: 0;
    padding: 12px 8px;
    font-size: 13px;
    white-space: nowrap;
    font-weight: 500;
    color: var(--muted);
    cursor: pointer;
    transition: color 0.18s ease;
}

.tab.is-active {
    color: var(--text);
}

.tab-icon {
    flex: 0 0 auto;
    padding-inline: 16px;
    display: grid;
    place-items: center;
}

.tab-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tab-marker {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--accent);
    transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1),
        width 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- form ---------- */

.amount-field {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    padding: 10px 0 20px;
}

.amount-field input {
    width: 100%;
    max-width: 220px;
    background: none;
    border: 0;
    outline: none;
    text-align: center;
    font-size: 44px;
    font-weight: 300;
    letter-spacing: -0.5px;
    padding: 0;
}

.amount-field input::placeholder {
    color: var(--faint);
}

.amount-suffix {
    font-size: 16px;
    color: var(--muted);
    flex: none;
}

.amount-old {
    margin: -14px 0 16px;
    text-align: center;
    font-size: 12.5px;
    color: var(--muted);
}

.amount-old:empty {
    display: none;
}

.segment {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    background: var(--surface);
    border-radius: var(--radius);
    padding: 4px;
    margin-bottom: 22px;
}

.segment-item {
    background: none;
    border: 0;
    padding: 9px 0;
    border-radius: var(--radius-sm);
    color: var(--muted);
    font-size: 14px;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}

.segment-item.is-active {
    background: var(--surface-2);
    color: var(--text);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.field {
    margin-bottom: 18px;
}

.field-label {
    display: block;
    font-size: 12.5px;
    color: var(--muted);
    margin-bottom: 8px;
}

.field input {
    width: 100%;
    background: var(--surface);
    border: 1px solid transparent;
    border-radius: var(--radius);
    padding: 12px 14px;
    outline: none;
    transition: border-color 0.18s ease, background 0.18s ease;
}

.field input::placeholder {
    color: var(--faint);
}

.field input:focus {
    border-color: var(--accent);
    background: var(--surface-2);
}

input[type="date"] {
    color-scheme: dark;
}

/* The native picker button ignores the spacing it is given in some webviews,
   which is why it ends up against the border. Rather than keep negotiating
   with it, it is removed from the field and replaced by an icon of our own
   that sits exactly where we place it. Tapping the field still opens the
   picker: that is the platform default on mobile, and showPicker() covers
   the desktop client. */
.date-field {
    position: relative;
    display: block;
}

.date-field input[type="date"] {
    width: 100%;
    /* Room for the icon, on the side the text does not use. */
    padding-inline-end: 42px;
    -webkit-appearance: none;
    appearance: none;
}

.date-field input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
}

.date-field input[type="date"]::-webkit-inner-spin-button,
.date-field input[type="date"]::-webkit-clear-button {
    display: none;
}

.date-icon {
    position: absolute;
    inset-inline-end: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 17px;
    height: 17px;
    fill: none;
    stroke: var(--muted);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
    transition: stroke 0.16s ease;
}

.date-field input[type="date"]:focus ~ .date-icon {
    stroke: var(--accent);
}

/* ---------- chips ---------- */

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.chips-scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    margin-bottom: 10px;
    scrollbar-width: none;
}

.chips-scroll::-webkit-scrollbar {
    display: none;
}

.chip {
    flex: none;
    background: var(--surface);
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 13.5px;
    color: var(--muted);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.16s ease;
}

.chip.is-active {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

.chip-add {
    color: var(--accent);
    border-style: dashed;
    border-color: var(--line);
}

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px 14px 14px;
    margin-bottom: 14px;
}

.card-title {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 600;
}

.card-note {
    margin: 0 0 16px;
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--muted);
}

.card .field input {
    width: 100%;
    background: var(--surface-2);
    border: 1px solid transparent;
    border-radius: var(--radius);
    padding: 12px 14px;
    color: var(--text);
    font: inherit;
    outline: none;
}

.card .field input:focus {
    border-color: var(--accent);
}

.rate-live {
    background: var(--surface-2);
    border-radius: var(--radius);
    padding: 12px 14px;
    margin-bottom: 14px;
}

.rate-live-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.rate-live-label {
    font-size: 12.5px;
    color: var(--muted);
}

.rate-live-value {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.2px;
}

.rate-live.is-stale .rate-live-value {
    color: var(--muted);
}

.rate-live-meta {
    display: block;
    margin-top: 5px;
    font-size: 11.5px;
    color: var(--muted);
}

.rate-live-meta:empty {
    display: none;
}

.field-hint {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--muted);
}

.field-hint:empty {
    display: none;
}

.card .segment {
    margin-bottom: 14px;
}

.card .actions {
    margin-bottom: 0;
}

.boxes {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}

.box {
    flex: 1;
    min-width: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px;
}

.box-name {
    display: block;
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 8px;
}

.box-label {
    display: block;
    font-size: 11.5px;
    color: var(--muted);
}

.box-main {
    display: block;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.3px;
    margin-top: 2px;
}

.box-old {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--muted);
}

.box-old:empty {
    display: none;
}

.box-split {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
}

.box-split .box-main {
    font-size: 16px;
    color: var(--accent);
}

.box.is-negative .box-main {
    color: var(--danger);
}

.box-debts {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 11.5px;
    color: var(--muted);
}

.box-debts span {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.box-debts:empty {
    display: none;
}

.kinds {
    margin-bottom: 8px;
}

.kind-note {
    margin: 0 0 14px;
    min-height: 18px;
}

.kind-note:empty {
    display: none;
}

.people {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}

.person {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 11px 14px;
}

.person-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.person-name {
    font-size: 14px;
    font-weight: 600;
}

.person-net {
    font-size: 14px;
    font-weight: 600;
}

.person-net.is-owed {
    color: var(--ok);
}

.person-net.is-owing {
    color: var(--danger);
}

.person-detail {
    display: block;
    margin-top: 4px;
    font-size: 11.5px;
    color: var(--muted);
}

.entry-kind {
    display: inline-block;
    font-size: 10.5px;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--muted);
    margin-inline-start: 6px;
}

.entry-kind.is-lent {
    color: var(--warn);
}

.entry-kind.is-borrowed {
    color: var(--danger);
}

.entry-kind.is-income {
    color: var(--ok);
}

.day-pick {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.day-pick .field-label {
    margin: 0;
    flex: none;
}

.day-pick .date-field {
    flex: 1;
    min-width: 0;
}

.day-pick input {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 9px 12px;
    color: var(--text);
    font: inherit;
    font-size: 13.5px;
    outline: none;
}

.day-pick input:focus {
    border-color: var(--accent);
}

.day-pick .btn {
    flex: none;
    width: auto;
    padding: 9px 14px;
    font-size: 13px;
}

.period {
    cursor: pointer;
}

.period-title {
    display: block;
    font-size: 14.5px;
    font-weight: 600;
}

.period-sub {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--muted);
}

.period-figures {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    flex: none;
    text-align: left;
}

.period-out,
.period-in {
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
}

.period-out {
    color: var(--danger);
}

.period-in {
    color: var(--ok);
}

.period-old {
    font-size: 10.5px;
    font-weight: 400;
    color: var(--muted);
}

.pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 4px;
}

.pager .btn {
    width: auto;
    flex: none;
    padding: 9px 16px;
    font-size: 13px;
}

.pager .btn[disabled] {
    opacity: 0.35;
    pointer-events: none;
}

.pager-label {
    font-size: 12.5px;
    color: var(--muted);
}

/* ---------- diet ---------- */

.pick {
    text-align: center;
    padding: 22px 16px 16px;
}

.pick-label {
    display: block;
    font-size: 11.5px;
    color: var(--muted);
}

.pick-name {
    display: block;
    margin-top: 6px;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.5px;
    line-height: 1.3;
}

.pick-category {
    display: inline-block;
    margin-top: 8px;
    font-size: 11.5px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
}

.pick-category:empty {
    display: none;
}

.pick-reason {
    margin: 10px 0 16px;
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--muted);
}

.wheel-card {
    text-align: center;
}

.wheel {
    position: relative;
    width: 100%;
    max-width: 260px;
    margin: 4px auto 18px;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    padding: 22px;
    background:
        conic-gradient(
            var(--surface-2) 0 45deg,
            var(--surface) 45deg 90deg,
            var(--surface-2) 90deg 135deg,
            var(--surface) 135deg 180deg,
            var(--surface-2) 180deg 225deg,
            var(--surface) 225deg 270deg,
            var(--surface-2) 270deg 315deg,
            var(--surface) 315deg 360deg
        );
    box-shadow: 0 0 0 1px var(--line), inset 0 0 0 6px var(--bg);
    transition: transform 1.1s cubic-bezier(0.15, 0.8, 0.25, 1);
}

.wheel.is-spinning {
    transform: rotate(1080deg);
}

.wheel-name {
    font-size: 19px;
    font-weight: 600;
    line-height: 1.35;
    /* The dial turns; the word stays upright. */
    transition: opacity 0.25s ease;
}

.wheel.is-spinning .wheel-name {
    opacity: 0;
}

.meal-group {
    margin-bottom: 16px;
}

.meal-group-name {
    display: block;
    margin-bottom: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--muted);
}

.meal-row {
    padding: 10px 12px;
}

.meal-row .item-title {
    font-size: 14px;
}

/* ---------- analysis ---------- */

.facts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
}

.fact {
    min-width: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 12px 14px;
}

.fact-label {
    display: block;
    font-size: 11.5px;
    color: var(--muted);
    margin-bottom: 4px;
}

.fact-value {
    display: block;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.2px;
    overflow-wrap: anywhere;
}

.fact-note {
    display: block;
    margin-top: 3px;
    font-size: 11.5px;
    color: var(--muted);
}

.fact-note:empty {
    display: none;
}

.facts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

/* A facts list that is itself a card: the list reset above zeroes both the
   padding and the margin, which would push the rows against the border and
   glue the next card to it. Both are restored to the card's own values. */
.facts.card {
    padding: 16px 14px 14px;
    margin-bottom: 14px;
}

.facts li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 13px;
}

.facts li span:first-child {
    color: var(--muted);
}

.facts li span:last-child {
    font-weight: 600;
    text-align: left;
    overflow-wrap: anywhere;
}

.forecast-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 10px;
}

.forecast-value {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.4px;
}

.forecast-old {
    font-size: 11.5px;
    color: var(--muted);
}

.forecast .facts {
    margin-top: 12px;
}

.chart {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 110px;
    padding-top: 6px;
}

.chart-bar {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 5px;
    height: 100%;
}

.chart-fill {
    width: 100%;
    min-height: 2px;
    border-radius: 4px 4px 2px 2px;
    background: var(--accent);
    opacity: 0.75;
    transition: height 0.3s ease;
}

.chart-bar.is-peak .chart-fill {
    opacity: 1;
}

.chart-bar.is-empty .chart-fill {
    background: var(--surface-2);
}

.chart-day {
    font-size: 9.5px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
}

.bars {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bar-row {
    display: block;
}

.bar-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 5px;
    font-size: 13px;
}

.bar-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bar-value {
    font-weight: 600;
    flex: none;
}

.bar-track {
    height: 6px;
    border-radius: 999px;
    background: var(--surface-2);
    overflow: hidden;
}

.bar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--accent);
}

.bar-sub {
    display: block;
    margin-top: 4px;
    font-size: 11.5px;
    color: var(--muted);
}

.advice {
    margin: 0 0 12px;
    font-size: 13.5px;
    line-height: 1.85;
    white-space: pre-wrap;
}

.advice:empty {
    display: none;
}

.recurring-when {
    display: inline-block;
    font-size: 10.5px;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--muted);
    margin-inline-start: 6px;
}

.item.is-paused {
    opacity: 0.5;
}

/* ---------- totals ---------- */

.totals {
    display: flex;
    gap: 10px;
    margin: 6px 0 16px;
}

.total-card {
    flex: 1;
    background: var(--surface);
    border-radius: var(--radius);
    padding: 12px 14px;
}

.total-card span {
    display: block;
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 2px;
}

.total-card strong {
    display: block;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.2px;
}

.total-card em {
    display: block;
    margin-top: 3px;
    font-size: 11.5px;
    font-style: normal;
    color: var(--muted);
}

.total-card em:empty {
    display: none;
}

.totals {
    flex-wrap: wrap;
}

.total-card.is-wide {
    flex-basis: 100%;
}

.item-amount {
    text-align: left;
}

.item-amount em {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    font-style: normal;
    font-weight: 400;
    color: var(--muted);
}

.item-amount em:empty {
    display: none;
}

/* ---------- list ---------- */

.list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--surface);
    border-radius: var(--radius);
    padding: 13px 14px;
}

.item-main {
    flex: 1;
    min-width: 0;
}

.item-title {
    display: block;
    font-size: 14.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-sub {
    display: block;
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
}

.item-amount {
    flex: none;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.2px;
}

.item-actions {
    display: flex;
    gap: 4px;
    flex: none;
}

.icon-btn {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--muted);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: color 0.16s ease, background 0.16s ease;
}

.icon-btn svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon-btn.is-danger:active {
    color: var(--danger);
}

.empty {
    text-align: center;
    color: var(--muted);
    font-size: 13.5px;
    padding: 34px 0;
}

@media (max-width: 380px) {
    .item {
        gap: 9px;
    }

    .icon-btn {
        width: 29px;
        height: 29px;
    }
}

/* ---------- buttons & messages ---------- */

.actions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.btn {
    flex: 1;
    border: 0;
    border-radius: var(--radius);
    padding: 14px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.16s ease;
}

.btn:active {
    opacity: 0.8;
}

.btn-primary {
    background: var(--accent);
    color: #fff;
}

.btn-ghost {
    background: var(--surface);
    color: var(--muted);
}

.message {
    min-height: 18px;
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--danger);
    text-align: center;
}

.message.is-ok {
    color: var(--ok);
}

/* ---------- sheet ---------- */

.sheet {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 20;
}

.sheet-card {
    width: 100%;
    max-width: 560px;
    background: var(--surface);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 22px 18px calc(22px + env(safe-area-inset-bottom));
    animation: rise 0.22s ease-out;
}

@keyframes rise {
    from {
        transform: translateY(16px);
        opacity: 0;
    }
}

.sheet-title {
    margin: 0 0 14px;
    font-size: 16px;
    font-weight: 600;
}

.sheet-note {
    margin: -8px 0 14px;
    font-size: 13px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sheet-note:empty {
    display: none;
}

/* A long category list stays inside the sheet instead of pushing the
   buttons off screen. */
#picker-chips {
    max-height: 40vh;
    overflow-y: auto;
    margin-bottom: 14px;
}

.sheet-card input {
    width: 100%;
    background: var(--surface-2);
    border: 1px solid transparent;
    border-radius: var(--radius);
    padding: 12px 14px;
    margin-bottom: 16px;
    outline: none;
}

.sheet-card input:focus {
    border-color: var(--accent);
}

/* ---------- faith ---------- */

/* A second row of tabs inside a tab. Quieter than the row above it, so the
   hierarchy reads at a glance rather than as two competing bars. */
.subtabs {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
}

.subtab {
    flex: 1;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    padding: 7px 0;
    font-size: 13px;
    color: var(--muted);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.subtab.is-active {
    background: var(--surface-2);
    color: var(--text);
}

.prayer-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.prayer-head .card-title {
    margin-bottom: 2px;
}

.prayer-head .card-note {
    margin: 0;
}

.prayer-city {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--muted);
    background: var(--surface-2);
    border-radius: 999px;
    padding: 4px 10px;
}

.prayers {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.prayer-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--line);
}

.prayer-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.prayer-row:first-child {
    padding-top: 0;
}

/* Faint before its time, amber once it is in, filled once it is done: the
   box says where the prayer stands without a word of explanation. */
.prayer-check {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    border: 2px solid var(--faint);
    background: none;
    padding: 0;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
}

.prayer-check svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: var(--bg);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.prayer-row.is-upcoming .prayer-check {
    opacity: 0.45;
    cursor: default;
}

.prayer-row.is-due .prayer-check {
    border-color: var(--warn);
}

.prayer-row.is-missed .prayer-check {
    border-color: var(--danger);
    opacity: 0.7;
}

.prayer-row.is-prayed .prayer-check {
    border-color: var(--ok);
    background: var(--ok);
}

.prayer-row.is-prayed .prayer-check svg {
    opacity: 1;
}

.prayer-name {
    flex: 1;
    font-weight: 600;
}

.prayer-row.is-upcoming .prayer-name {
    color: var(--muted);
    font-weight: 500;
}

.prayer-times {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.35;
}

.prayer-time {
    font-variant-numeric: tabular-nums;
    font-size: 15px;
}

.prayer-iqama {
    font-size: 11px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.prayer-row.is-due .prayer-time {
    color: var(--warn);
}

.prayer-row.is-prayed .prayer-time {
    color: var(--ok);
}

/* ---------- the month ---------- */

.month-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.month-arrow {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.month-arrow:disabled {
    opacity: 0.35;
    cursor: default;
}

.month-label {
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.month-row {
    display: grid;
    grid-template-columns: 1.6fr repeat(5, 1fr);
    align-items: center;
    gap: 4px;
}

.month-head {
    padding-bottom: 9px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--line);
    font-size: 10px;
    color: var(--muted);
    text-align: center;
}

.month-head .month-day {
    text-align: start;
}

.month-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    /* Long months stay inside the card instead of stretching the page. */
    max-height: 58vh;
    overflow-y: auto;
}

.month-grid .month-row {
    padding: 5px 0;
}

.month-day {
    font-size: 12px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.month-row.is-today .month-day {
    color: var(--accent);
    font-weight: 600;
}

.month-cell {
    height: 17px;
    border-radius: 5px;
    background: var(--surface-2);
}

.month-cell.is-prayed {
    background: var(--ok);
}

.month-cell.is-missed {
    background: rgba(229, 106, 106, 0.28);
}

.month-cell.is-open {
    background: rgba(217, 164, 65, 0.3);
}

/* Before the user started tracking there is nothing to judge, so the cell
   shows an absence rather than a failure. */
.month-cell.is-untracked {
    background: none;
    border: 1px dashed var(--line);
}

/* ---------- statistics ---------- */

.stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin-bottom: 16px;
}

.stat {
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    padding: 12px 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stat-value {
    font-size: 22px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.stat-value.is-ok {
    color: var(--ok);
}

.stat-value.is-warn {
    color: var(--warn);
}

.stat-value.is-danger {
    color: var(--danger);
}

.stat-label {
    font-size: 11px;
    color: var(--muted);
}

/* The analysis tab already owns the bar vocabulary; the per-prayer chart
   borrows it rather than defining a second one. Only the list reset it needs
   as a <ul> is added here. */
ul.bars {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ---------- prayer settings ---------- */

.iqama-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
    gap: 8px;
    margin-bottom: 16px;
}

.iqama {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11px;
    color: var(--muted);
}

.card .iqama input {
    margin-bottom: 0;
    padding: 9px 10px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* ---------- quran ---------- */

/* Verses want a different rhythm from the rest of the app: larger, looser,
   and with the Uthmani script given room to breathe. */
.mushaf {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mushaf-page {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 16px 14px 14px;
}

.mushaf-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
    font-size: 12px;
    color: var(--muted);
}

.ayah {
    display: block;
    width: 100%;
    text-align: start;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    padding: 9px 8px;
    margin: 0;
    cursor: pointer;
    font-family: "Amiri", "Scheherazade New", "Traditional Arabic",
        "Noto Naskh Arabic", serif;
    font-size: 20px;
    line-height: 2.1;
    color: var(--text);
    transition: background 0.2s ease;
}

.ayah:hover {
    background: var(--surface-2);
}

.ayah.is-playing {
    background: var(--accent-soft);
}

/* The verse number sits in its own mark, the way the mushaf prints it. */
.ayah-number {
    display: inline-block;
    margin-inline-start: 6px;
    font-family: inherit;
    font-size: 15px;
    color: var(--accent);
}

.ayah.is-sajda .ayah-number::after {
    content: " ۩";
    color: var(--warn);
}

.split {
    display: flex;
    gap: 8px;
}

.split .field {
    flex: 1;
    min-width: 0;
}

/* A native select styled like the app's own inputs; the arrow is drawn
   rather than left to the platform, which places it badly under RTL. */
.select {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    background: var(--surface-2);
    border: 1px solid transparent;
    border-radius: var(--radius);
    padding: 12px 14px;
    padding-inline-end: 34px;
    outline: none;
    cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
        linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-size: 5px 5px, 5px 5px;
    background-position: calc(14px) calc(50% + 1px), calc(19px) calc(50% + 1px);
    background-repeat: no-repeat;
}

.card .select {
    margin-bottom: 16px;
}

.select:focus {
    border-color: var(--accent);
}

/* ---------- adhkar ---------- */

.dhikr-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dhikr {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--surface);
    border-radius: var(--radius);
    padding: 14px;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.dhikr.is-done {
    opacity: 0.55;
}

.dhikr-text {
    flex: 1;
    min-width: 0;
    font-family: "Amiri", "Scheherazade New", "Traditional Arabic",
        "Noto Naskh Arabic", serif;
    font-size: 17px;
    line-height: 1.95;
}

/* The counter is the control: tapping the card is one repetition, and the
   ring says how many are left without a second line of text. */
.dhikr-count {
    flex-shrink: 0;
    min-width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--surface-2);
    border: 2px solid var(--line);
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.dhikr.is-started .dhikr-count {
    border-color: var(--warn);
    color: var(--warn);
}

.dhikr.is-done .dhikr-count {
    border-color: var(--ok);
    background: var(--ok);
    color: var(--bg);
}