/* ============================================================
   Up-Level Theme
   ALL rules scoped under .theme-up-level-test (always on <body>).

   DO NOT modify: app.css, overrides.css, icon system,
   routes, models, JS logic, i18n keys, payments, scheduler.
   ============================================================ */


/* ── Local font faces (loaded only when theme is active) ────
   font-display: optional eliminates CLS:
   browser has ~100ms to load; if missed → system font, no swap.
   On repeat visits fonts are served from disk cache instantly.
   Files: static/fonts/*.woff2 — cyrillic + latin subsets only.
   ─────────────────────────────────────────────────────────── */

/* Manrope — cyrillic */
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: optional;
    src: url('../fonts/manrope-cyrillic-400-normal.woff2') format('woff2');
    unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: optional;
    src: url('../fonts/manrope-cyrillic-500-normal.woff2') format('woff2');
    unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: optional;
    src: url('../fonts/manrope-cyrillic-600-normal.woff2') format('woff2');
    unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: optional;
    src: url('../fonts/manrope-cyrillic-700-normal.woff2') format('woff2');
    unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }

/* Manrope — latin */
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: optional;
    src: url('../fonts/manrope-latin-400-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: optional;
    src: url('../fonts/manrope-latin-500-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: optional;
    src: url('../fonts/manrope-latin-600-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: optional;
    src: url('../fonts/manrope-latin-700-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* Exo 2 — cyrillic */
@font-face { font-family: 'Exo 2'; font-style: normal; font-weight: 600; font-display: optional;
    src: url('../fonts/exo-2-cyrillic-600-normal.woff2') format('woff2');
    unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Exo 2'; font-style: normal; font-weight: 700; font-display: optional;
    src: url('../fonts/exo-2-cyrillic-700-normal.woff2') format('woff2');
    unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }

/* Exo 2 — latin */
@font-face { font-family: 'Exo 2'; font-style: normal; font-weight: 600; font-display: optional;
    src: url('../fonts/exo-2-latin-600-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Exo 2'; font-style: normal; font-weight: 700; font-display: optional;
    src: url('../fonts/exo-2-latin-700-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }


/* ── Phase A: Typography tokens ─────────────────────────── */

.theme-up-level-test {
    /* Font families */
    --ul-font-body:     'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ul-font-display:  'Exo 2', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Type scale */
    --ul-text-xs:   11px;
    --ul-text-sm:   13px;
    --ul-text-base: 15px;
    --ul-text-md:   17px;
    --ul-text-lg:   20px;
    --ul-text-xl:   24px;
    --ul-text-2xl:  28px;

    /* Weights */
    --ul-weight-regular:   400;
    --ul-weight-medium:    500;
    --ul-weight-semibold:  600;
    --ul-weight-bold:      700;

    /* Letter spacing */
    --ul-tracking-tight:  -0.02em;
    --ul-tracking-normal:  0em;
    --ul-tracking-wide:    0.03em;
    --ul-tracking-widest:  0.06em;

    /* Line heights */
    --ul-leading-tight:  1.25;
    --ul-leading-normal: 1.5;
    --ul-leading-relaxed: 1.65;

    /* Elevation / shadow */
    --ul-shadow-card:     0 2px 8px rgba(29, 90, 108, 0.08);
    --ul-shadow-elevated: 0 4px 16px rgba(29, 90, 108, 0.13);
    --ul-shadow-header:   0 2px 12px rgba(29, 90, 108, 0.18);

    /* Border radius */
    --ul-radius-sm:   8px;
    --ul-radius-md:   12px;
    --ul-radius-lg:   16px;
    --ul-radius-xl:   20px;
    --ul-radius-pill: 100px;
}


/* ── Phase A: Body base ──────────────────────────────────── */

.theme-up-level-test {
    font-family: var(--ul-font-body);
    font-size: var(--ul-text-base);
    font-weight: var(--ul-weight-regular);
    line-height: var(--ul-leading-normal);
    letter-spacing: var(--ul-tracking-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* ── Phase A: Header ─────────────────────────────────────── */

.theme-up-level-test .header-wrapper {
    box-shadow: var(--ul-shadow-header);
}

.theme-up-level-test .header {
    padding-top: 4px;
    padding-bottom: 4px;
}

/* Brand name — Exo 2 display font */
.theme-up-level-test .habit-hero-brand__name {
    font-family: var(--ul-font-display);
    font-weight: var(--ul-weight-bold);
    font-size: var(--ul-text-lg);
    letter-spacing: var(--ul-tracking-tight);
}

/* Header action links (Pro / Settings) */
.theme-up-level-test .header-action-link {
    font-family: var(--ul-font-body);
    font-size: var(--ul-text-xs);
    font-weight: var(--ul-weight-semibold);
    letter-spacing: var(--ul-tracking-wide);
    text-transform: uppercase;
}


/* ── Phase A: Navigation tabs ────────────────────────────── */

.theme-up-level-test .nav-tabs {
    box-shadow: 0 -1px 0 rgba(29, 90, 108, 0.10);
}

.theme-up-level-test .nav-tabs .nav-link {
    font-family: var(--ul-font-body);
    font-size: var(--ul-text-xs);
    font-weight: var(--ul-weight-medium);
    letter-spacing: var(--ul-tracking-wide);
    text-transform: uppercase;
}

.theme-up-level-test .nav-tabs .nav-link.active {
    font-weight: var(--ul-weight-bold);
}

/* Nav icon sizing — colour only, no size/path changes */
.theme-up-level-test .nav-tabs .nav-link i {
    color: inherit;
}


/* ── Phase A: Base content surface ───────────────────────── */

.theme-up-level-test .content {
    background-color: var(--color-page-bg);
}


/* ══════════════════════════════════════════════════════════
   PHASE B — Component refinements
   ══════════════════════════════════════════════════════════ */


/* ── B1: Habit cards ─────────────────────────────────────── */

.theme-up-level-test .habit-card {
    border-left-width: 3px;           /* thinner accent stripe */
    border-radius: var(--ul-radius-lg);
    box-shadow: var(--ul-shadow-card);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.theme-up-level-test .habit-card:hover {
    box-shadow: var(--ul-shadow-elevated);
    transform: translateY(-1px);      /* subtler lift than Phase A default */
}

.theme-up-level-test .habit-card.completed {
    box-shadow: 0 2px 8px rgba(67, 160, 165, 0.12);
}

.theme-up-level-test .habit-title {
    font-family: var(--ul-font-body);
    font-weight: var(--ul-weight-semibold);
    font-size: var(--ul-text-base);
    letter-spacing: var(--ul-tracking-normal);
    margin-bottom: 0.25rem;
}

.theme-up-level-test .habit-meta {
    font-size: var(--ul-text-sm);
    line-height: var(--ul-leading-relaxed);
}

/* Check-in CTA — Up-Level primary style */
.theme-up-level-test .checkin-btn.btn-success {
    border-radius: var(--ul-radius-md);
    font-family: var(--ul-font-body);
    font-weight: var(--ul-weight-semibold);
    font-size: var(--ul-text-sm);
    letter-spacing: var(--ul-tracking-wide);
    padding: 0.45rem 1rem;
    box-shadow: 0 2px 6px rgba(29, 90, 108, 0.20);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.theme-up-level-test .checkin-btn.btn-success:hover {
    box-shadow: 0 4px 10px rgba(29, 90, 108, 0.28);
    transform: translateY(-1px);
}

/* Add habit outline button */
.theme-up-level-test .btn-outline-primary {
    border-radius: var(--ul-radius-md);
    font-family: var(--ul-font-body);
    font-weight: var(--ul-weight-medium);
    font-size: var(--ul-text-sm);
    letter-spacing: var(--ul-tracking-normal);
}

/* Reorder label above arrows (CSS order only, no DOM/JS changes) */
.theme-up-level-test .habit-reorder-label {
    order: -1;
    margin-top: 0;
    margin-bottom: 3px;
}

/* Separator between header row (title/reorder) and meta row (status/dims) */
.theme-up-level-test .habit-meta-row {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(29, 90, 108, 0.10);
}

/* Reorder arrows — lighter visual weight, ghost style */
.theme-up-level-test .habit-reorder-btn {
    min-width: 36px;
    font-size: 18px;
    padding: 4px 8px;
    background: rgba(29, 90, 108, 0.10);
    color: var(--hhh-teal-deep);
    border-color: rgba(29, 90, 108, 0.20);
    border-radius: var(--ul-radius-sm);
    font-weight: var(--ul-weight-medium);
    box-shadow: none;
}

/* Bottom row (delete + edit) — visually deprioritised */
.theme-up-level-test .habit-bottom-row {
    border-top-color: rgba(29, 90, 108, 0.08);
    padding-top: 8px;
    margin-top: 8px !important; /* mirrors app.css !important on same property */
}

.theme-up-level-test .habit-bottom-row .btn {
    font-size: var(--ul-text-xs);
    font-weight: var(--ul-weight-medium);
    border-radius: var(--ul-radius-sm);
    opacity: 0.75;
    transition: opacity 0.15s ease;
}

.theme-up-level-test .habit-bottom-row .btn:hover {
    opacity: 1;
}

/* Progress bar inside habit card */
.theme-up-level-test .habit-card .progress {
    border-radius: var(--ul-radius-pill);
    height: 5px;
    background: rgba(29, 90, 108, 0.08);
}

.theme-up-level-test .habit-card .progress-bar {
    border-radius: var(--ul-radius-pill);
}


/* ── B2: Stats section ───────────────────────────────────── */

/* Stat card container */
.theme-up-level-test .stat-card {
    border-radius: var(--ul-radius-lg);
    box-shadow: var(--ul-shadow-card);
    padding: 1.25rem 1rem;
}

/* Numbers — Exo 2 display font.
   !important required: app.css line 2151 sets color with !important on
   #stats-content .stat-number; font-family is not !important there but
   Bootstrap specificity can win in some cascade orders. Using !important
   here for parity to ensure font override is stable. */
.theme-up-level-test #stats-content .stat-number {
    font-family: var(--ul-font-display) !important;
    font-size: 2.25rem;
    font-weight: var(--ul-weight-bold);
    letter-spacing: var(--ul-tracking-tight);
    line-height: 1;
}

/* Labels */
.theme-up-level-test #stats-content .stat-label {
    font-family: var(--ul-font-body);
    font-size: var(--ul-text-xs);
    font-weight: var(--ul-weight-medium);
    letter-spacing: var(--ul-tracking-wide);
    text-transform: uppercase;
    margin-top: 6px;
}

/* General stat cards within stats screen */
.theme-up-level-test #stats-content .card {
    border-radius: var(--ul-radius-lg);
    box-shadow: var(--ul-shadow-card);
    border-color: rgba(29, 90, 108, 0.10);
}

/* Progress bars */
.theme-up-level-test #stats-content .progress {
    border-radius: var(--ul-radius-pill);
    height: 6px;
}

.theme-up-level-test #stats-content .progress-bar {
    border-radius: var(--ul-radius-pill);
}

/* Journey section */
.theme-up-level-test .journey-stage-row {
    font-family: var(--ul-font-body);
    font-weight: var(--ul-weight-semibold);
    font-size: var(--ul-text-sm);
}


/* ── B3: Calendar ────────────────────────────────────────── */

.theme-up-level-test .calendar-grid {
    gap: 3px;
    border-radius: var(--ul-radius-md);
}

/* Day cells — slightly rounded for premium feel */
.theme-up-level-test .calendar-day {
    border-radius: 4px;
    font-size: 0.75rem;
}

/* Header row */
.theme-up-level-test .calendar-day.calendar-header {
    font-family: var(--ul-font-body);
    font-size: var(--ul-text-xs);
    font-weight: var(--ul-weight-semibold);
    letter-spacing: var(--ul-tracking-wide);
    text-transform: uppercase;
    border-bottom-color: rgba(29, 90, 108, 0.12);
}

/* Today ring — teal, lighter */
.theme-up-level-test .calendar-day.today {
    box-shadow: inset 0 0 0 2px var(--hhh-aqua) !important;
    /* !important required: app.css line 705 sets this with !important on same selector */
}

/* Legend */
.theme-up-level-test .calendar-legend {
    margin-top: 0.75rem;
    gap: 8px;
}

.theme-up-level-test .legend-item {
    font-family: var(--ul-font-body);
    font-size: var(--ul-text-xs);
    font-weight: var(--ul-weight-medium);
    color: var(--hhh-text-secondary) !important;
    /* !important required: app.css line 864 sets color with !important on .legend-item */
}

.theme-up-level-test .legend-color {
    border-radius: 3px;
    width: 10px;
    height: 10px;
}


/* ── B4: Resource screen ─────────────────────────────────── */

.theme-up-level-test .resource-section-title {
    font-family: var(--ul-font-display);
    font-weight: var(--ul-weight-bold);
    font-size: var(--ul-text-md);
    letter-spacing: var(--ul-tracking-tight);
}

.theme-up-level-test .resource-directions {
    gap: 12px;
}

.theme-up-level-test .resource-direction-card {
    border-radius: var(--ul-radius-lg);
    padding: 14px 14px;
    box-shadow: var(--ul-shadow-card);
    gap: 14px;
    border: 1px solid rgba(29, 90, 108, 0.07);
}

.theme-up-level-test .resource-direction-name {
    font-family: var(--ul-font-body);
    font-weight: var(--ul-weight-semibold);
    font-size: var(--ul-text-base);
    margin-bottom: 3px;
}

.theme-up-level-test .resource-direction-desc {
    font-family: var(--ul-font-body);
    font-size: var(--ul-text-sm);
    line-height: var(--ul-leading-relaxed);
    color: var(--color-text-secondary);
}

/* Dim icons — size/colour from app.css, only spacing */
.theme-up-level-test .dim-icon.dim-icon-lg {
    border-radius: var(--ul-radius-md);
}

.theme-up-level-test .resource-info-title {
    font-family: var(--ul-font-display);
    font-weight: var(--ul-weight-semibold);
    font-size: var(--ul-text-base);
    letter-spacing: var(--ul-tracking-tight);
}

.theme-up-level-test .resource-info-text {
    font-family: var(--ul-font-body);
    font-size: var(--ul-text-sm);
    line-height: var(--ul-leading-relaxed);
}


/* ── B5: Pro / Subscription screen ──────────────────────── */

.theme-up-level-test .subscription-card {
    border-radius: var(--ul-radius-lg);
    box-shadow: var(--ul-shadow-card);
    padding: 1.5rem;
}

.theme-up-level-test .subscription-card.active {
    box-shadow: 0 4px 16px rgba(40, 167, 69, 0.15);
}

.theme-up-level-test .subscription-card.pro-card {
    box-shadow: 0 4px 20px rgba(195, 139, 114, 0.18);
}

.theme-up-level-test .subscription-card.pro-card.active {
    box-shadow: 0 6px 24px rgba(195, 139, 114, 0.25);
}

/* Price numbers — display font */
.theme-up-level-test .price {
    font-family: var(--ul-font-display);
    font-weight: var(--ul-weight-bold);
    font-size: 1.75rem;
    letter-spacing: var(--ul-tracking-tight);
}

.theme-up-level-test .period {
    font-family: var(--ul-font-body);
    font-size: var(--ul-text-sm);
    letter-spacing: var(--ul-tracking-normal);
}

/* Upgrade CTA */
.theme-up-level-test .btn-upgrade {
    border-radius: var(--ul-radius-md);
    font-family: var(--ul-font-body);
    font-weight: var(--ul-weight-bold);
    font-size: var(--ul-text-sm);
    letter-spacing: var(--ul-tracking-widest);
    padding: 0.6rem 1.5rem;
}

/* Save badge */
.theme-up-level-test .save-badge {
    border-radius: var(--ul-radius-sm);
    font-family: var(--ul-font-body);
    font-weight: var(--ul-weight-semibold);
    font-size: var(--ul-text-xs);
    letter-spacing: var(--ul-tracking-wide);
    text-transform: uppercase;
}

/* Billing option — selected state */
.theme-up-level-test .clickable-price {
    border-radius: var(--ul-radius-md);
}


/* ── B6: Settings + Edit Habit Modal ─────────────────────── */

/* Form inputs */
.theme-up-level-test #settings-content .form-control {
    border-radius: var(--ul-radius-sm);
    font-family: var(--ul-font-body);
    font-size: var(--ul-text-base);
    border-width: 1.5px;
    padding: 0.5rem 0.75rem;
}

/* Slider — thumb shape */
.theme-up-level-test #settings-content .form-range::-webkit-slider-thumb {
    border-radius: 50%;
    width: 20px;
    height: 20px;
}

/* Modal chrome */
.theme-up-level-test .modal-content {
    border-radius: var(--ul-radius-lg);
    box-shadow: var(--ul-shadow-elevated);
    border: 1px solid rgba(29, 90, 108, 0.10);
    overflow: hidden;              /* clip children to rounded corners */
}

.theme-up-level-test .modal-header {
    border-bottom: 1px solid rgba(29, 90, 108, 0.10);
    padding: 1rem 1.25rem;
}

.theme-up-level-test .modal-title {
    font-family: var(--ul-font-display);
    font-weight: var(--ul-weight-bold);
    font-size: var(--ul-text-md);
    letter-spacing: var(--ul-tracking-tight);
    color: var(--hhh-text-primary) !important;
    /* !important required: app.css line 886 sets color with !important on .modal-title */
}

.theme-up-level-test .modal-body {
    padding: 1.25rem;
}

.theme-up-level-test .modal-footer {
    border-top: 1px solid rgba(29, 90, 108, 0.08);
    padding: 0.75rem 1.25rem;
}

/* Edit habit modal form inputs */
.theme-up-level-test .modal .form-control,
.theme-up-level-test .modal .form-select {
    border-radius: var(--ul-radius-sm);
    font-family: var(--ul-font-body);
    font-size: var(--ul-text-base);
    border-width: 1.5px;
}

/* Settings card headers */
.theme-up-level-test #settings-content .card-header {
    border-radius: var(--ul-radius-md) var(--ul-radius-md) 0 0;
}

.theme-up-level-test #settings-content .card-header h5 {
    font-family: var(--ul-font-display);
    font-weight: var(--ul-weight-semibold);
    font-size: var(--ul-text-base);
    letter-spacing: var(--ul-tracking-tight);
}

/* Settings cards */
.theme-up-level-test #settings-content .card {
    border-radius: var(--ul-radius-lg);
    box-shadow: var(--ul-shadow-card);
    border-color: rgba(29, 90, 108, 0.10);
    margin-bottom: 12px;
}


/* ══════════════════════════════════════════════════════════
   PHASE C — Responsive fixes & dark mode compatibility
   ══════════════════════════════════════════════════════════ */


/* ── C1: Responsive — ≤576px ─────────────────────────────── */

@media (max-width: 576px) {
    /* stat-number: our B2 selector (.theme-up-level-test #stats-content .stat-number)
       has higher specificity (0,2,1) than app.css .stat-number (0,1,0), so the mobile
       font-size reduction in app.css is overridden. Mirror it here with same selector
       to restore mobile sizing. Appears after B2 rule → later wins at equal specificity. */
    .theme-up-level-test #stats-content .stat-number {
        font-size: 1.5rem;
    }

    /* Brand name — reduce from 20px to match app.css header scale */
    .theme-up-level-test .habit-hero-brand__name {
        font-size: var(--ul-text-md); /* 17px */
    }

    /* Calendar grid — restore tighter gap from app.css (1px at 576px) */
    .theme-up-level-test .calendar-grid {
        gap: 1px;
    }

    /* Subscription card — reduce padding on narrow screens */
    .theme-up-level-test .subscription-card {
        padding: 1.25rem;
    }
}


/* ── C2: Responsive — ≤400px ─────────────────────────────── */

@media (max-width: 400px) {
    /* Further stat-number reduction per app.css breakpoint */
    .theme-up-level-test #stats-content .stat-number {
        font-size: 1.3rem;
    }

    /* Brand name — match app.css 0.75rem header scale at very narrow */
    .theme-up-level-test .habit-hero-brand__name {
        font-size: var(--ul-text-base); /* 15px */
        letter-spacing: 0;
    }

    /* Nav labels — reduce tracking to fit tight widths */
    .theme-up-level-test .nav-tabs .nav-link {
        letter-spacing: 0.01em;
    }

    /* Subscription card — tighter padding */
    .theme-up-level-test .subscription-card {
        padding: 1rem;
    }

    /* Resource direction card — tighter padding */
    .theme-up-level-test .resource-direction-card {
        padding: 10px 12px;
    }
}


/* ── C3: Dark mode compatibility ─────────────────────────── */
/*
   data-theme is on <html> → selector: html[data-theme="dark"] .theme-up-level-test

   app.css handles all dark backgrounds via its own html[data-theme="dark"] rules
   using --hhh-dark-* tokens. Our theme's shadows (rgba(29,90,108,0.08)) become
   nearly invisible on dark surfaces — this is acceptable behaviour (cards are
   distinguished by background color, not shadow, in dark mode).

   Only fix applied: ensure our card border doesn't add unwanted contrast on dark.
*/

html[data-theme="dark"] .theme-up-level-test .habit-reorder-btn {
    background: rgba(255, 255, 255, 0.08);
    color: var(--hhh-aqua);
    border-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .theme-up-level-test .resource-direction-card {
    /* Dark surfaces: app.css sets card bg to --hhh-surface-soft (dark variant).
       Our 1px border (rgba(29,90,108,0.07)) is invisible in dark — remove it
       to avoid a faint ghost border on dark backgrounds. */
    border-color: transparent;
}

html[data-theme="dark"] .theme-up-level-test .habit-card {
    /* Shadow invisible on dark — keep card visible via existing dark bg from app.css */
    box-shadow: none;
}

html[data-theme="dark"] .theme-up-level-test .stat-card,
html[data-theme="dark"] .theme-up-level-test #stats-content .card,
html[data-theme="dark"] .theme-up-level-test #settings-content .card {
    box-shadow: none;
    border-color: rgba(255, 255, 255, 0.07);
}


/* ── Phase C: Known issues ───────────────────────────────── */
/*
   1. Dark mode card shadows: --ul-shadow-card uses rgba(29,90,108,0.08) which
      is invisible on dark teal surfaces. Shadows are suppressed in dark mode
      via the rules above (C3). Cards remain visually separated by background color.

   2. Font first-visit: woff2 served locally via @font-face with font-display:optional.
      Preload links in base.html <head> start download before CSS parse, maximizing
      the chance fonts arrive within the 100ms optional block window.
      On repeat visits fonts load from disk cache (instant). On first visit over slow
      connections the browser may fall back to system font for that load only.

   3. Theme not tested in actual Telegram WebView (tested in desktop Chrome only).
      Safe-area-inset-top and TG-specific env() vars are handled by app.css, not
      this theme file.

   4. Viewport emulation: Chrome's window.resizeTo does not change innerWidth in
      this environment. Responsive rules verified via CSS specificity analysis and
      media query logic, not pixel-perfect browser simulation.
*/