:root {
    /* Quiet Momentum system: the only component geometry used by the app. */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --radius-control: 8px;
    --radius-surface: 12px;
    --radius-panel: 16px;
    --line: 1px solid var(--border);
    --elevation-1: 0 2px 8px rgba(74, 45, 31, .06);
    --elevation-2: 0 12px 30px rgba(74, 45, 31, .10);
    --transition-ui: 160ms cubic-bezier(.2,.7,.2,1);
    --brand: #b65f49;
    --brand-light: #df947d;
    --brand-gradient: linear-gradient(135deg, #ad5542 0%, #e37c63 100%);
    --bg-app: #f5eee3;
    --surface: #fffaf3;
    --surface-secondary: #f0e5d7;
    --text-main: #34231d;
    --text-muted: #766158;
    --success: #059669;
    --danger: #dc2626;
    --border: rgba(79, 48, 33, 0.10);
    /* Legacy aliases retained only for templates that still reference them. */
    --radius-lg: var(--radius-panel);
    --radius-md: var(--radius-surface);
    --radius-badge: 999px; /* semantic badge/progress exception */
    --radius-circle: 50%; /* semantic toggle/medallion exception */
    --shadow-soft: 0 10px 25px -5px rgba(79, 48, 33, 0.08), 0 8px 10px -6px rgba(79, 48, 33, 0.05);
    --shadow-lg: 0 20px 25px -5px rgba(79, 48, 33, 0.14), 0 10px 10px -5px rgba(79, 48, 33, 0.06);
}

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

body {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg-app);
    color: var(--text-main);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.3s, color 0.3s;
}

.container { max-width: 900px; margin: 0 auto; padding: 0 24px; }

/* Header & Navigation */
header {
    background: var(--surface);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 1.5rem 0;
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--border);
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-nav {
    display: flex;
    align-items: center;
    gap: 15px;
}

header h1 {
    font-size: 1.5rem;
    font-weight: 700;
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.05em;
    margin: 0; /* Reset margin */
}

nav { display: flex; justify-content: center; gap: 12px; }
nav button {
    padding: 10px 24px;
    border-radius: var(--radius-badge);
    border: none;
    background: var(--surface-secondary);
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
nav button.active { background: var(--text-main); color: var(--surface); transform: scale(1.05); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); }

/* Responsive Header */
@media (max-width: 768px) {
    .header-container {
        flex-direction: column;
        align-items: stretch;
        gap: 1.5rem;
    }
    .header-brand {
        justify-content: space-between;
    }
    .header-nav {
        justify-content: space-between;
    }
    header {
        padding: 1rem 0;
    }
    nav {
        flex-grow: 1;
    }
    nav button {
        flex-grow: 1;
        text-align: center;
        padding: 10px 12px;
    }
    .filter-bar {
        flex-wrap: wrap;
    }
}


/* Sections */
section { padding: 3rem 0; }
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2.5rem; }
.section-header h2 { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.03em; }
.hidden { display: none !important; }

/* Filter Bar */
.filter-bar {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    margin-bottom: 2rem;
    padding-bottom: 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--brand) transparent;
}
.filter-bar::-webkit-scrollbar { height: 4px; display: block; }
.filter-bar::-webkit-scrollbar-thumb { background: var(--brand); border-radius: var(--radius-control); }
.filter-tag {
    padding: 8px 18px;
    border-radius: var(--radius-badge);
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}
.filter-tag.active { background: var(--brand); color: white; border-color: var(--brand); box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2); }

/* Buttons */
.btn-primary { 
    background: var(--brand-gradient); 
    color: white; 
    border: none; 
    padding: 12px 28px; 
    border-radius: var(--radius-surface); 
    font-weight: 600; 
    cursor: pointer; 
    box-shadow: 0 10px 20px -5px rgba(79, 70, 229, 0.4);
    transition: all 0.3s ease;
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 15px 25px -5px rgba(79, 70, 229, 0.5); }

.btn-block { 
    width: 100%; 
    padding: 18px; 
    background: var(--brand-gradient); 
    color: white; 
    border: none; 
    border-radius: var(--radius-surface); 
    font-weight: 600; 
    font-size: 1rem;
    cursor: pointer; 
    margin-top: 24px; 
    transition: all 0.3s;
    box-shadow: 0 8px 20px -5px rgba(79, 70, 229, 0.3);
}
.btn-block:hover { transform: translateY(-2px); box-shadow: 0 12px 25px -5px rgba(79, 70, 229, 0.4); }

.modal-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    width: 100%;
}
.management-header {
    margin-top: 24px;
    margin-bottom: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}
.management-header::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}
#general-actions { 
    margin-top: 0; 
    display: flex;
    flex-direction: column;
    width: 100%;
}
.btn-success { background: var(--success); color: white; border: none; padding: 14px 20px; border-radius: var(--radius-control); font-weight: 600; cursor: pointer; flex: 1; transition: all 0.3s; box-shadow: 0 8px 20px -5px rgba(5, 150, 105, 0.2); font-size: 0.95rem; display: flex; align-items: center; justify-content: center; gap: 8px; }
.btn-danger { background: rgba(220, 38, 38, 0.08); color: var(--danger); border: 1px solid rgba(220, 38, 38, 0.12); padding: 14px 20px; border-radius: var(--radius-control); font-weight: 600; cursor: pointer; flex: 1; transition: all 0.3s; font-size: 0.95rem; display: flex; align-items: center; justify-content: center; gap: 8px; }
.btn-outline { background: var(--surface); color: var(--brand); border: 2px solid var(--brand); padding: 14px 20px; border-radius: var(--radius-control); font-weight: 600; cursor: pointer; flex: 1; transition: all 0.3s; font-size: 0.95rem; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: none; }
.btn-outline:hover { background: var(--surface-secondary); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.btn-success:hover { transform: translateY(-2px); box-shadow: 0 12px 25px -5px rgba(5, 150, 105, 0.4); background: #047857; }
.btn-danger:hover { transform: translateY(-2px); background: rgba(220, 38, 38, 0.15); border-color: var(--danger); }

/* Challenge Cards */
.challenges-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 32px;
}

.challenge-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--border);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.card-image {
    height: 160px;
    width: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
}

.card-image::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; width: 100%; height: 50%;
    background: linear-gradient(to top, var(--surface), transparent);
}

.card-body {
    padding: 1.5rem 2rem 2rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.challenge-card:hover { 
    transform: translateY(-10px); 
    box-shadow: var(--shadow-lg);
    border-color: var(--brand-light);
}

.card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.card-top h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.03em; color: var(--text-main); }
.tag { font-size: 0.7rem; padding: 4px 12px; border-radius: var(--radius-control); background: var(--surface-secondary); color: var(--brand); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }

.short-desc { font-size: 0.95rem; color: var(--text-muted); margin-bottom: 1.5rem; line-height: 1.5; flex: 1; }

/* Hero Section */
.discover-hero {
    background: var(--brand-gradient);
    border-radius: var(--radius-panel);
    padding: 4rem 2rem;
    color: white;
    text-align: center;
    margin-bottom: 4rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(79, 70, 229, 0.2);
}

.discover-hero::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%; width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    animation: rotate 20s linear infinite;
}

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

.hero-content { position: relative; z-index: 1; max-width: 600px; margin: 0 auto; }
.hero-content h1 { font-size: 2.5rem; font-weight: 800; margin-bottom: 1rem; color: white; -webkit-text-fill-color: initial; background: none; }
.hero-content h1 span { opacity: 0.8; font-weight: 400; }
.hero-content p { font-size: 1.1rem; opacity: 0.9; margin-bottom: 2.5rem; }

.search-wrapper {
    position: relative;
    max-width: 450px;
    margin: 0 auto;
}
.search-icon {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--brand);
    z-index: 2;
}
#challenge-search {
    padding: 18px 20px 18px 55px;
    border-radius: var(--radius-surface);
    border: none;
    background: white;
    color: #0f172a;
    font-size: 1rem;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
#challenge-search:focus {
    transform: scale(1.02);
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}

/* v7.1.3 — compact Quiet Momentum footer */
.site-footer {
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 28px 0;
    margin-top: 48px;
}

/* v7.3.0 — unified Quiet Momentum component language */
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--brand) 35%, transparent);
    outline-offset: 2px;
}
nav button, .filter-tag, .shop-trigger, .theme-picker-trigger, .btn-primary, .btn-block,
.btn-success, .btn-danger, .btn-outline, .btn-view, .btn-view-details, .shop-card button,
.discount-form button, .shop-close, .secondary-close, .restore-btn, .footer-data-action,
.load-more-button, .hero-cta, .tab-btn, .day-btn, .btn-icon, .btn-settings {
    border-radius: var(--radius-control);
    transition: background-color var(--transition-ui), border-color var(--transition-ui), color var(--transition-ui), transform var(--transition-ui), box-shadow var(--transition-ui);
}
.challenge-card, .dashboard-hero, .quiet-hero, .shop-card, .guide-container, .switch-group,
.discount-form, .confirm-content, .details-view { border-radius: var(--radius-surface); }
.modal-content { border-radius: var(--radius-panel); }

/* Navigation and filters are compact utility controls, not pills. */
nav { gap: var(--space-2); }
nav button { border: 1px solid transparent; border-radius: var(--radius-control); padding: 10px 16px; }
nav button.active { transform: none; box-shadow: var(--elevation-1); }
.theme-picker-trigger, .shop-trigger { border-radius: var(--radius-control); min-height: 40px; }
.filter-tag { border-radius: var(--radius-control); padding: 8px 14px; }
.filter-tag.active { box-shadow: var(--elevation-1); }

/* One consistent input and button treatment. */
input, textarea, select, .discount-form input { border: var(--line); border-radius: var(--radius-surface); background: var(--surface-secondary); padding: 12px 14px; }
input:focus, textarea:focus, select:focus, .discount-form input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
.btn-primary, .btn-block, .btn-success, .btn-danger, .btn-outline { min-height: 44px; padding: 11px 18px; }
.btn-primary:hover, .btn-block:hover, .btn-success:hover, .btn-danger:hover, .btn-outline:hover, .btn-view:hover, .shop-card button:hover { transform: translateY(-1px); }
.btn-primary:active, .btn-block:active, .btn-success:active, .btn-danger:active, .btn-outline:active, .btn-view:active, .shop-card button:active { transform: translateY(0); }
.btn-primary:disabled, .btn-block:disabled, .btn-success:disabled, .btn-danger:disabled, .btn-outline:disabled, .shop-card button:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

/* Cards have a quiet frame; image actions use the same square control geometry. */
.challenge-card { border: var(--line); box-shadow: var(--elevation-1); transition: transform var(--transition-ui), box-shadow var(--transition-ui), border-color var(--transition-ui); }
.challenge-card:hover { transform: translateY(-3px); box-shadow: var(--elevation-2); border-color: color-mix(in srgb, var(--brand) 36%, var(--border)); }
.card-image { border-radius: var(--radius-surface) var(--radius-surface) 0 0; }
.card-controls { gap: var(--space-2); }
.card-controls .icon-action, .card-controls .archive-btn, .btn-favorite, .btn-icon, .btn-settings, .close-modal {
    border-radius: var(--radius-control); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--elevation-1);
}
.card-controls .icon-action, .card-controls .archive-btn { width: 32px; height: 32px; }
.card-controls .icon-action:hover, .card-controls .archive-btn:hover, .btn-icon:hover, .btn-settings:hover, .close-modal:hover { background: var(--surface-secondary); color: var(--brand); transform: translateY(-1px); }
.card-controls .btn-favorite.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.favorite-saved-badge, .tag, .price-badge, .streak-badge { border-radius: var(--radius-control); }
.btn-view { border-radius: var(--radius-control); min-height: 44px; }

/* Editorial panels retain hierarchy without competing rounded shapes. */
.discover-hero { border-radius: var(--radius-panel); padding: clamp(32px, 5vw, 56px) 24px; margin-bottom: 32px; }
#challenge-search { border-radius: var(--radius-surface); }
.quiet-hero { border-radius: var(--radius-panel); box-shadow: var(--elevation-2); }
.hero-cta { border-radius: var(--radius-control); }
.dashboard-hero { border-radius: var(--radius-panel); border-width: 1px; border-style: dashed; }

/* Modals are deliberate panels on every viewport. */
.modal-content { padding: clamp(24px, 4vw, 40px); box-shadow: var(--elevation-2); }
@media (max-width: 599px) { .modal-content { border-radius: var(--radius-panel) var(--radius-panel) 0 0; } }
.close-modal { width: 36px; height: 36px; right: 16px; top: 16px; }
.shop-card { border-radius: var(--radius-surface); }
.shop-heading > span, .checkout-icon { border-radius: var(--radius-control); }
.theme-option { border-radius: var(--radius-surface); transition: border-color var(--transition-ui), background-color var(--transition-ui), box-shadow var(--transition-ui); }
.theme-option:hover, .theme-option.selected { box-shadow: var(--elevation-1); }
.theme-swatch { border-radius: var(--radius-control); }

/* Status is communicated by color plus shape, motion and text—never color alone. */
.challenge-card.card-completed { border-width: 1px; box-shadow: inset 3px 0 0 #f59e0b, var(--elevation-1); }
.challenge-card.feedback-copied { box-shadow: inset 3px 0 0 var(--success), var(--elevation-1); }
.challenge-card.feedback-archived { border-color: var(--danger); }
.load-more-button { border-radius: var(--radius-control); box-shadow: var(--elevation-1); }
.site-footer { border-top: var(--line); }

@media (max-width: 600px) {
    .container { padding-left: 16px; padding-right: 16px; }
    .challenge-card:hover { transform: none; }
    .quiet-hero, .discover-hero, .dashboard-hero { border-radius: var(--radius-surface); }
    .card-body { padding: 16px; }
}
.footer-content { display:flex; align-items:center; justify-content:space-between; gap:28px; }
.footer-brand { min-width:0; }
.footer-kicker { display:block; margin-bottom:5px; color:var(--brand); font-size:.68rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.footer-brand h3 { margin:0; color:var(--text-main); font-size:1.25rem; font-weight:800; letter-spacing:-.045em; }
.footer-brand p { margin:5px 0 7px; color:var(--text-muted); font-size:.82rem; }
.footer-brand small { color:var(--text-muted); font-size:.72rem; }
.footer-credits { display:flex; align-items:center; justify-content:flex-end; gap:22px; }
.data-actions { display:flex; gap:7px; justify-content:flex-start; margin:0; }
.footer-data-action { display:inline-flex; align-items:center; gap:7px; padding:8px 10px; border:1px solid var(--border); border-radius:var(--radius-control); background:var(--surface-secondary); color:var(--text-main); font:700 .74rem/1 inherit; cursor:pointer; transition:transform .18s ease, background .18s ease, border-color .18s ease; }
.footer-data-action svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.footer-data-action:hover { background:var(--brand); border-color:var(--brand); color:#fff; transform:translateY(-1px); }
.footer-data-action:focus-visible, .footer-links a:focus-visible, .footer-meta a:focus-visible { outline:2px solid var(--brand); outline-offset:3px; }
.footer-meta { display:flex; align-items:center; gap:16px; }
.footer-meta p { margin:0; color:var(--text-muted); font-size:.76rem; white-space:nowrap; }
.footer-meta p a { color:var(--brand); font-weight:800; text-decoration:none; }
.footer-links { display:flex; align-items:center; gap:13px; }
.footer-links a { color:var(--text-muted); text-decoration:none; font-size:.74rem; font-weight:600; white-space:nowrap; transition:color .18s ease; }
.footer-links a:hover { color:var(--brand); }
.visually-hidden { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
@media (max-width: 820px) { .footer-content { align-items:flex-start; flex-direction:column; } .footer-credits { align-items:flex-start; justify-content:flex-start; flex-direction:column; gap:15px; } .footer-meta { align-items:flex-start; flex-direction:column; gap:10px; } }
@media (max-width: 480px) { .site-footer { padding:24px 0; margin-top:34px; } .footer-links { flex-wrap:wrap; gap:8px 13px; } .footer-brand p { max-width:22rem; } }

/* Progress Info */
.progress-container { 
    height: 8px; 
    background: var(--surface-secondary); 
    border-radius: var(--radius-badge); 
    overflow: hidden; 
    margin-bottom: 4px;
    display: flex;
    width: 100%;
}
.progress-bar { 
    height: 100%; 
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.progress-bar-success {
    background: var(--success);
}
.progress-bar-failed {
    background: var(--danger);
}
.progress-info small { font-weight: 600; color: var(--text-muted); font-size: 0.85rem; }

/* Form Styling */
.form-group { margin-bottom: 24px; }
.form-group label { display: block; font-size: 0.8rem; font-weight: 600; margin-bottom: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
input, textarea, select {
    width: 100%;
    padding: 16px 20px;
    border-radius: var(--radius-surface);
    border: 2px solid var(--border);
    background: var(--surface-secondary);
    color: var(--text-main);
    font-family: inherit;
    font-size: 1rem;
    transition: all 0.2s;
}
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--brand);
    background: var(--surface);
    box-shadow: 0 0 0 5px rgba(79, 70, 229, 0.1);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* Matrix Refinement */
.matrix-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    background: var(--surface-secondary);
    padding: 4px;
    border-radius: var(--radius-surface);
}

.tab-btn {
    flex: 1;
    padding: 10px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 500;
    border-radius: var(--radius-control);
    cursor: pointer;
    transition: all 0.2s;
}

.tab-btn.active {
    background: var(--surface);
    color: var(--brand);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.matrix {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
    gap: 10px;
    margin-top: 1rem;
    max-height: 300px;
    overflow-y: auto;
    padding: 4px;
}
.matrix-box {
    aspect-ratio: 1;
    border-radius: var(--radius-control);
    background: var(--surface-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-muted);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
    cursor: pointer;
}

/* v7.1 — Quiet Momentum editorial library */
body[data-theme="harbor"]{--bg-app:#edf3f2;--surface:#fcfdfb;--surface-secondary:#dfeae8;--text-main:#173141;--text-muted:#5c7883;--brand:#176b85;--brand-light:#65a5ac;--brand-gradient:linear-gradient(135deg,#176b85,#39968f);--border:rgba(22,63,77,.12);--shadow-soft:0 16px 34px rgba(23,49,65,.09)}
body[data-theme="moss"]{--bg-app:#edf0e6;--surface:#fbfcf7;--surface-secondary:#e1e7d8;--text-main:#28342a;--text-muted:#6b7767;--brand:#4f6d3d;--brand-light:#8aa66d;--brand-gradient:linear-gradient(135deg,#4f6d3d,#8a9750);--border:rgba(51,72,47,.13);--shadow-soft:0 15px 30px rgba(48,65,44,.1)}
body[data-theme="cobalt"]{--bg-app:#10182d;--surface:#17223b;--surface-secondary:#233150;--text-main:#edf3ff;--text-muted:#b2c1de;--brand:#75a7ff;--brand-light:#a7c4ff;--brand-gradient:linear-gradient(135deg,#3e6bd1,#78a5ff);--border:rgba(206,221,255,.14);--shadow-soft:0 18px 38px rgba(1,8,25,.32)}
body[data-theme="orchid"]{--bg-app:#251a2d;--surface:#31233b;--surface-secondary:#412d4e;--text-main:#fff4fc;--text-muted:#dec6da;--brand:#e292c7;--brand-light:#f2b5dc;--brand-gradient:linear-gradient(135deg,#b95da8,#e292c7);--border:rgba(255,225,248,.14);--shadow-soft:0 18px 38px rgba(21,8,27,.3)}
body[data-theme="solstice"]{--bg-app:#f4ead9;--surface:#fffaf0;--surface-secondary:#f4dfbf;--text-main:#3c281d;--text-muted:#806252;--brand:#bd5d32;--brand-light:#e9a260;--brand-gradient:linear-gradient(135deg,#bd5d32,#e5a054);--border:rgba(86,46,27,.13);--shadow-soft:0 16px 35px rgba(91,51,27,.11)}
body[data-theme="mist"]{--bg-app:#eff3f5;--surface:#fcfdfd;--surface-secondary:#e2ebee;--text-main:#20323b;--text-muted:#657b84;--brand:#517887;--brand-light:#91b7c3;--brand-gradient:linear-gradient(135deg,#517887,#86aab6);--border:rgba(42,71,82,.12);--shadow-soft:0 15px 32px rgba(35,60,70,.09)}
body[data-theme="terracotta"]{--bg-app:#f3e8df;--surface:#fffaf6;--surface-secondary:#efd7c6;--text-main:#492d25;--text-muted:#89685b;--brand:#ad6047;--brand-light:#db9b78;--brand-gradient:linear-gradient(135deg,#ad6047,#d68b64);--border:rgba(91,51,38,.13);--shadow-soft:0 16px 34px rgba(84,47,35,.1)}
body[data-theme="juniper"]{--bg-app:#172720;--surface:#20352c;--surface-secondary:#2d493c;--text-main:#eff9ee;--text-muted:#bfd2c2;--brand:#9bc37a;--brand-light:#c4dda8;--brand-gradient:linear-gradient(135deg,#557c58,#9bc37a);--border:rgba(224,247,223,.14);--shadow-soft:0 18px 38px rgba(5,18,11,.34)}
body[data-theme="velvet"]{--bg-app:#261b2f;--surface:#352442;--surface-secondary:#493157;--text-main:#fff4fd;--text-muted:#dbc7de;--brand:#d58ab7;--brand-light:#efb9d7;--brand-gradient:linear-gradient(135deg,#875180,#d58ab7);--border:rgba(255,229,250,.14);--shadow-soft:0 18px 38px rgba(18,7,23,.33)}
body[data-theme="lumen"]{--bg-app:#f8f0d9;--surface:#fffdf5;--surface-secondary:#f5e4ad;--text-main:#3c3420;--text-muted:#776b48;--brand:#af861f;--brand-light:#d9bb5c;--brand-gradient:linear-gradient(135deg,#a87916,#d3b04b);--border:rgba(89,68,18,.13);--shadow-soft:0 16px 35px rgba(92,70,17,.11)}
.theme-harbor .theme-swatch i:nth-child(1){background:#dfeae8}.theme-moss .theme-swatch i:nth-child(1){background:#e1e7d8}.theme-mist .theme-swatch i:nth-child(1){background:#e2ebee}.theme-terracotta .theme-swatch i:nth-child(1){background:#efd7c6}.theme-cobalt .theme-swatch i:nth-child(1){background:#17223b}.theme-orchid .theme-swatch i:nth-child(1){background:#31233b}.theme-solstice .theme-swatch i:nth-child(1){background:#f4dfbf}.theme-juniper .theme-swatch i:nth-child(1){background:#20352c}.theme-velvet .theme-swatch i:nth-child(1){background:#352442}.theme-lumen .theme-swatch i:nth-child(1){background:#f5e4ad}
#discover-section{padding:34px 0 10px}.discover-hero{display:grid;grid-template-columns:1.08fr .92fr;grid-template-rows:auto auto;background:var(--surface);color:var(--text-main);padding:0;margin:0 0 34px;border:1px solid var(--border);border-radius:var(--radius-panel);box-shadow:var(--shadow-soft);text-align:left;overflow:hidden}.discover-hero::before{display:none}.discover-intro{padding:42px 42px 22px}.discover-intro h2{font:600 clamp(2.4rem,5vw,4.4rem)/.92 Georgia,serif;color:var(--text-main);letter-spacing:-.065em}.discover-intro h2 em{color:var(--brand);font-weight:400}.discover-intro>p:last-child{max-width:32rem;margin:20px 0 0;color:var(--text-muted);font-size:1rem;opacity:1}.discover-art{grid-row:1/3;grid-column:2;margin:0;min-height:300px;background:var(--surface-secondary)}.discover-art img{width:100%;height:100%;display:block;object-fit:cover;mix-blend-mode:multiply;opacity:.9}.search-wrapper{grid-column:1;padding:0 42px 36px;max-width:none;margin:0}.search-icon{width:18px;height:18px;stroke:var(--brand);fill:none;stroke-width:1.8;left:58px}.search-wrapper input{width:100%;border:1px solid var(--border);border-radius:var(--radius-surface);background:var(--surface-secondary);box-shadow:none;color:var(--text-main);padding:15px 18px 15px 47px}.search-wrapper input:focus{transform:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent);outline:0}.library-toolbar{display:flex;align-items:end;justify-content:space-between;margin:0 0 16px}.library-toolbar h2{font:600 2rem/1 Georgia,serif;letter-spacing:-.04em}.library-count{color:var(--text-muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.12em}.filter-bar{display:flex;flex-wrap:wrap;gap:8px;padding:0 0 24px;border-bottom:1px solid var(--border);overflow:visible}.filter-tag{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);border-radius:var(--radius-control);padding:8px 11px;background:transparent;color:var(--text-muted);font-size:.78rem}.filter-tag svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.filter-tag.active{background:var(--brand);color:white;border-color:var(--brand);box-shadow:none}.filter-divider{width:1px;height:27px;background:var(--border);margin:0 4px}.filter-bar+.challenges-grid{margin-top:24px}.challenges-grid#discover-challenges-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.challenges-grid#discover-challenges-grid .challenge-card{border-radius:var(--radius-surface);box-shadow:var(--elevation-1);min-height:0}.challenges-grid#discover-challenges-grid .challenge-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft)}.challenges-grid#discover-challenges-grid .card-image{height:118px;background-image:url('img/library-still-life.png');background-size:cover;background-position:center}.challenges-grid#discover-challenges-grid .card-image::after{height:100%;background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 58%,transparent),transparent)}.category-fitness{background-position:left center!important}.category-mind{background-position:center center!important}.category-productivity{background-position:right center!important}.card-controls{position:absolute;right:9px;top:9px;display:flex;gap:5px;z-index:2}.icon-action{width:27px;height:27px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--text-main) 14%,transparent);border-radius:var(--radius-control);background:color-mix(in srgb,var(--surface) 89%,transparent);color:var(--text-main);cursor:pointer}.icon-action svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linejoin:round}.icon-action.btn-favorite.active{color:var(--brand)}.completed-badge{position:absolute;left:9px;top:9px;z-index:2;display:flex;align-items:center;gap:4px;padding:4px 6px;background:var(--surface);color:var(--brand);font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em}.completed-badge svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2}.challenges-grid#discover-challenges-grid .card-body{padding:17px 18px 18px}.challenges-grid#discover-challenges-grid .card-top{margin-bottom:7px;gap:8px}.challenges-grid#discover-challenges-grid .card-top h3{font-size:1.04rem;line-height:1.15}.challenges-grid#discover-challenges-grid .tag{padding:3px 6px;border-radius:var(--radius-control);font-size:.58rem}.challenges-grid#discover-challenges-grid .short-desc{font-size:.81rem;line-height:1.45;margin-bottom:16px}.card-cta{width:100%;padding:10px 12px;border-radius:var(--radius-control);font-size:.8rem;display:flex;justify-content:center;align-items:center;gap:6px}.card-cta svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.library-empty{grid-column:1/-1;text-align:center;padding:64px 20px;background:var(--surface);border:1px dashed var(--border)}.library-empty>svg{width:28px;height:28px;stroke:var(--brand);fill:none;stroke-width:1.7}.library-empty h3{font:600 1.5rem Georgia,serif;margin:11px 0 4px}.library-empty p{color:var(--text-muted);margin-bottom:18px}.library-empty .btn-outline{display:inline-flex;padding:10px 14px;border-radius:var(--radius-control);font-size:.8rem}
@media(max-width:768px){#discover-section{padding-top:20px}.discover-hero{grid-template-columns:1fr}.discover-intro{padding:30px 24px 16px}.discover-intro h2{font-size:2.65rem}.discover-art{grid-row:auto;grid-column:1;height:185px;min-height:0;order:2}.search-wrapper{grid-column:1;grid-row:2;padding:20px 24px 26px}.search-icon{left:40px}.library-toolbar{align-items:flex-start;margin-top:28px}.library-toolbar h2{font-size:1.7rem}.library-count{padding-top:4px}.filter-bar{gap:6px}.filter-divider{display:none}.filter-tag{font-size:.72rem;padding:7px 9px}.challenges-grid#discover-challenges-grid{grid-template-columns:1fr 1fr;gap:10px}.challenges-grid#discover-challenges-grid .card-image{height:105px}.challenges-grid#discover-challenges-grid .card-body{padding:14px}.challenges-grid#discover-challenges-grid .short-desc{display:none}.challenges-grid#discover-challenges-grid .card-top h3{font-size:.96rem}.card-cta{margin-top:10px;font-size:.72rem;padding:9px 5px}.card-controls .icon-action:last-child{display:none}}
@media(max-width:430px){.challenges-grid#discover-challenges-grid{grid-template-columns:1fr}.challenges-grid#discover-challenges-grid .card-image{height:128px}.challenges-grid#discover-challenges-grid .short-desc{display:block}}

/* Quiet Momentum design system */
:root { --ink:#34231d; --cream:#fffaf3; --coral:#ca654e; --violet:#b65f49; --card-shadow:0 20px 50px rgba(79,48,33,.11); --font-display:'Playfair Display', Georgia, serif; --font-body:'DM Sans', sans-serif; }
body { font-family:var(--font-body); background:radial-gradient(circle at 82% 0%,rgba(238,118,94,.10),transparent 26rem),var(--bg-app); }
body[data-theme="midnight"] { --bg-app:#161426;--surface:#201d33;--surface-secondary:#2a2640;--text-main:#f7f2e9;--text-muted:#bcb5c7;--brand:#a99dff;--brand-gradient:linear-gradient(135deg,#8175f4,#e77575);--border:rgba(255,255,255,.1); }
/* Nocturne — included after-hours reading room: indigo-charcoal, parchment, copper. */
body[data-theme="nocturne"] { --bg-app:#12131d;--surface:#1c1b29;--surface-secondary:#292536;--text-main:#f5eddf;--text-muted:#c8bbaa;--brand:#c47a57;--brand-light:#e0ae75;--brand-gradient:linear-gradient(135deg,#76536f 0%,#c47a57 52%,#e0ae75 100%);--border:rgba(245,237,223,.12);--shadow-soft:0 18px 38px rgba(4,5,12,.38); }
body[data-theme="paper"] { --bg-app:#eee7dc;--surface:#fffdf8;--surface-secondary:#f4ede2;--text-main:#30271f;--text-muted:#766a60;--brand:#9b4e52;--brand-gradient:linear-gradient(135deg,#9b4e52,#c67d56); }
body[data-theme="aurora"] { --bg-app:#0d1d2a;--surface:#132b3b;--surface-secondary:#18384a;--text-main:#ebfffa;--text-muted:#b2d5d0;--brand:#66d7c0;--brand-gradient:linear-gradient(135deg,#5bc7d6,#9381ec);--border:rgba(190,255,246,.13); }
body[data-theme="ember"] { --bg-app:#2c1b1b;--surface:#422928;--surface-secondary:#533332;--text-main:#fff3e5;--text-muted:#dfc4b0;--brand:#f38b5e;--brand-gradient:linear-gradient(135deg,#e6694f,#d6a045);--border:rgba(255,227,200,.13); }
::selection { background:var(--coral);color:#fff; } ::-webkit-scrollbar{width:10px}::-webkit-scrollbar-thumb{background:var(--brand);border:3px solid var(--bg-app);border-radius:9px}
.version-chip { font:500 .62rem 'DM Mono',monospace; color:var(--brand); border:1px solid var(--border); padding:3px 7px; cursor:pointer; }
.shop-trigger,.theme-picker-trigger { display:inline-flex;align-items:center;gap:7px; }.shop-trigger svg,.theme-picker-trigger svg,.shop-card-icon svg,.shop-heading-icon svg,.checkout-icon svg { width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }
.theme-picker-trigger { background:transparent;border:0;color:var(--text-muted);font:600 .78rem var(--font-body);cursor:pointer; }
.quiet-hero { position:relative;display:grid;grid-template-columns:1.04fr .96fr;min-height:475px;overflow:hidden;background:var(--surface);border:1px solid var(--border);box-shadow:var(--card-shadow); }
.quiet-hero-copy { padding:65px 45px 38px 55px;position:relative;z-index:1; }.eyebrow { color:var(--coral);font:500 .69rem 'DM Mono',monospace;letter-spacing:.13em;margin-bottom:14px; }.quiet-hero h3 { font:600 clamp(2.4rem,5vw,4.4rem)/.98 var(--font-display);letter-spacing:-.06em;margin:0 0 22px; }.quiet-hero h3 em { color:var(--brand); }.quiet-hero-copy>p:not(.eyebrow){color:var(--text-muted);max-width:410px;font-size:1rem; }.hero-cta{margin-top:28px;display:inline-flex;align-items:center;gap:12px;border-radius:var(--radius-control);padding:14px 18px;}.hero-cta svg{width:17px;stroke:currentColor;fill:none;stroke-width:2;}
.quiet-hero-art { margin:0;position:relative;min-height:100%;overflow:hidden;background:#dfd8d0; }.quiet-hero-art img { width:100%;height:100%;object-fit:cover;display:block;mix-blend-mode:multiply; }.quiet-hero-art figcaption{position:absolute;right:22px;bottom:18px;color:#fff;font:500 .62rem 'DM Mono',monospace;letter-spacing:.08em;text-shadow:0 1px 6px #151325;}.hero-metrics{display:flex;gap:20px;margin-top:47px;border-top:1px solid var(--border);padding-top:17px}.hero-metrics span{display:grid;gap:1px}.hero-metrics b{font:600 1.15rem var(--font-display)}.hero-metrics small{font-size:.66rem;color:var(--text-muted)}
.themes-modal{max-width:650px;max-height:min(86vh,790px);overflow:auto}.themes-modal h3{font:600 2rem var(--font-display);line-height:1.05}.theme-intro{color:var(--text-muted);margin:9px 0 20px}.theme-group+.theme-group{margin-top:24px;padding-top:23px;border-top:1px solid var(--border)}.theme-group-heading{display:flex;align-items:end;justify-content:space-between;gap:16px}.theme-group-kicker{margin:0 0 2px;color:var(--coral);font:500 .62rem 'DM Mono',monospace;letter-spacing:.12em}.theme-group-heading h4{font:600 1.15rem var(--font-display);letter-spacing:-.02em}.theme-group-heading>span{color:var(--text-muted);font:500 .62rem 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}.theme-group-description{margin:5px 0 12px;color:var(--text-muted);font-size:.75rem}.theme-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}.theme-option{position:relative;text-align:left;display:flex;align-items:center;gap:12px;min-height:66px;border:1px solid var(--border);border-radius:var(--radius-surface);background:var(--surface-secondary);color:var(--text-main);padding:12px;cursor:pointer;transition:border-color var(--transition-ui),box-shadow var(--transition-ui),transform var(--transition-ui)}.theme-option:hover{transform:translateY(-1px)}.theme-option:hover,.theme-option.selected{border-color:var(--brand);box-shadow:0 6px 20px rgba(29,22,57,.08)}.theme-option:focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 30%,transparent);outline-offset:2px}.theme-option-copy{min-width:0}.theme-option strong,.theme-option small{display:block}.theme-option strong{font-size:.96rem}.theme-option small{color:var(--text-muted);font-size:.72rem;line-height:1.4}.theme-swatch{display:flex;flex:0 0 auto;width:35px;height:35px;overflow:hidden;border-radius:var(--radius-control)}.theme-swatch i{flex:1}.theme-swatch i:nth-child(1){background:#f5f1e9}.theme-swatch i:nth-child(2){background:#6554e8}.theme-swatch i:nth-child(3){background:#ee765e}.theme-midnight .theme-swatch i:nth-child(1),.theme-aurora .theme-swatch i:nth-child(1){background:#172136}.theme-paper .theme-swatch i:nth-child(1){background:#eee1cd}.theme-ember .theme-swatch i:nth-child(1){background:#3d2423}.theme-lock,.theme-active{margin-left:auto;font-size:.62rem;text-transform:uppercase;letter-spacing:.07em;white-space:nowrap}.theme-lock{color:var(--coral)}.theme-active{color:var(--brand)}
@media(max-width:768px){.theme-picker-trigger span{display:none}.quiet-hero{grid-template-columns:1fr}.quiet-hero-copy{padding:42px 28px 30px}.quiet-hero-art{height:255px;order:-1}.hero-metrics{margin-top:30px}.theme-options{grid-template-columns:1fr}.header-nav{gap:10px}}
body::-webkit-scrollbar { width: 10px; }
body::-webkit-scrollbar-thumb { background: var(--brand); border: 3px solid var(--bg-app); border-radius: var(--radius-surface); }

/* Daylight — the warm first-run morning desk. */
body[data-theme="daylight"] { --bg-app:#f5eee3; --surface:#fffaf3; --surface-secondary:#f0e5d7; --text-main:#34231d; --text-muted:#766158; --brand:#b65f49; --brand-light:#df947d; --brand-gradient:linear-gradient(135deg,#ad5542 0%,#e37c63 100%); --border:rgba(79,48,33,.10); --shadow-soft:0 10px 25px -5px rgba(79,48,33,.08),0 8px 10px -6px rgba(79,48,33,.05); }
.theme-daylight .theme-swatch i:nth-child(1) { background:#f0e5d7; }
.theme-daylight .theme-swatch i:nth-child(2) { background:#b65f49; }
.theme-daylight .theme-swatch i:nth-child(3) { background:#e37c63; }
.matrix-box svg {
    display: block;
    flex-shrink: 0;
}
.matrix-box:hover { background: var(--border); transform: translateY(-2px); }
.matrix-box.selected { border-color: var(--brand); background: var(--surface); color: var(--brand); z-index: 10; transform: scale(1.1); box-shadow: 0 5px 15px rgba(79, 70, 229, 0.2); }
.matrix-box.done { background: var(--success); color: white; border-color: transparent; }
.matrix-box.failed { background: var(--danger); color: white; border-color: transparent; opacity: 0.8; }
.matrix-box.today { border-color: var(--brand); border-style: dashed; }

.details-short-desc {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
    line-height: 1.6;
}

.guide-expand-btn {
    display: none;
}
.guide-content {
    line-height: 1.7;
    color: var(--text-main);
}
.guide-content h4 {
    color: var(--brand);
    font-size: 1.1rem;
}
.guide-content ul, .guide-content ol {
    padding-left: 1.25rem;
    margin-bottom: 1rem;
}
.guide-content li {
    margin-bottom: 0.5rem;
}
.guide-content strong {
    color: var(--brand-light);
}

/* Modal Refinement */
.modal {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 1000;
    opacity: 0; visibility: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.modal.active { opacity: 1; visibility: visible; }

.modal-content {
    background: var(--surface);
    width: 100%;
    max-width: 550px;
    border-radius: var(--radius-panel) var(--radius-panel) 0 0;
    padding: 3rem;
    max-height: 95vh;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 -15px 50px rgba(0,0,0,0.15);
}
@media (min-width: 600px) {
    .modal { align-items: center; padding: 20px; }
    .modal-content { border-radius: var(--radius-panel); transform: scale(0.9) translateY(40px); }
    .modal.active .modal-content { transform: scale(1) translateY(0); }
}
.modal.active .modal-content { transform: translateY(0); }

.close-modal { 
    position: absolute; 
    right: 1.5rem; 
    top: 1.5rem; 
    width: 32px; 
    height: 32px; 
    background: transparent; 
    border: 0;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: var(--text-muted); 
    cursor: pointer; 
    transition: all 0.2s ease; 
}
.close-modal:hover { 
    background: transparent; 
    color: var(--brand);
}

/* Upgrades */
.shop-trigger { background:var(--surface-secondary); border:1px solid var(--border); color:var(--brand); border-radius:var(--radius-control); padding:9px 14px; font-weight:800; cursor:pointer; white-space:nowrap; }
.shop-trigger:hover { background:var(--brand); color:white; }
.shop-modal { max-width:780px; }
.shop-heading { display:flex; gap:15px; align-items:flex-start; margin-bottom:24px; padding-right:30px; }
.shop-heading > span, .checkout-icon { display:grid; place-items:center; flex:0 0 44px; height:44px; border-radius:var(--radius-surface); background:var(--brand-gradient); color:white; font-size:1.35rem; }
.shop-heading h3, .checkout-modal h3 { font-size:1.45rem; line-height:1.2; }
.shop-heading p, .checkout-modal p { color:var(--text-muted); font-size:.9rem; margin-top:5px; }
.shop-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
.shop-card { min-height:210px; border:1px solid var(--border); border-radius:var(--radius-surface); padding:17px; background:var(--surface-secondary); display:flex; flex-direction:column; justify-content:space-between; gap:13px; }
.shop-card.base-tier { background:var(--surface); }
.shop-card-icon { color:var(--brand); font-size:1.25rem; font-weight:900; }
.shop-card h4 { font-size:1rem; margin-top:4px; }.shop-card p { color:var(--text-muted); font-size:.8rem; line-height:1.45; margin:5px 0 8px; }.shop-card strong { color:var(--brand); font-size:1.05rem; }
.shop-card button, .discount-form button { border:0; border-radius:var(--radius-control); padding:10px; background:var(--brand-gradient); color:#fff; font-weight:750; cursor:pointer; }.shop-card button:disabled { background:var(--border); color:var(--text-muted); cursor:default; }
.discount-form { margin-top:18px; padding:15px; border:1px solid var(--border); border-radius:var(--radius-surface); }.discount-form label { display:block; font-size:.78rem; font-weight:800; margin-bottom:7px; }.discount-form div { display:flex; gap:8px; }.discount-form input { min-width:0; flex:1; padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius-control); background:var(--surface); color:var(--text-main); }.discount-form p { margin-top:8px; color:var(--text-muted); font-size:.75rem; }.discount-success { color:var(--success)!important; }.discount-error { color:var(--danger)!important; }
.shop-close, .secondary-close { width:100%; margin-top:12px; border:1px solid var(--border); background:transparent; color:var(--text-main); padding:11px; border-radius:var(--radius-surface); cursor:pointer; font-weight:700; }.checkout-modal { max-width:430px; text-align:center; }.checkout-icon { margin:0 auto 16px; }.price-badge { display:inline-block; margin-top:15px; padding:5px 11px; color:var(--brand); background:var(--surface-secondary); font-weight:900; border-radius:var(--radius-badge); }.legal-copy { margin-top:20px; color:var(--text-muted); line-height:1.7; }.legal-copy p + p { margin-top:12px; }.legal-copy a { color:var(--brand); font-weight:700; }.feature-lock { font-size:.58rem; padding:2px 5px; border-radius:var(--radius-control); background:rgba(255,255,255,.22); vertical-align:middle; }.is-locked-feature { opacity:.85; }
@media (max-width:600px) { .shop-grid { grid-template-columns:1fr; }.shop-card { min-height:180px; }.shop-trigger { padding:8px 10px; font-size:.78rem; }.header-nav { gap:8px; } }

/* Dashboard Hero */
.dashboard-hero {
    grid-column: 1 / -1;
    text-align: center;
    padding: 5rem 2rem;
    background: var(--surface);
    border-radius: var(--radius-lg);
    border: 3px dashed var(--border);
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.hero-icon { font-size: 5rem; margin-bottom: 1.5rem; display: block; filter: drop-shadow(0 10px 15px rgba(0,0,0,0.1)); }
.dashboard-hero h3 { font-size: 1.75rem; font-weight: 700; margin-bottom: 0.75rem; color: var(--text-main); }
.dashboard-hero p { color: var(--text-muted); margin-bottom: 2rem; max-width: 400px; }

/* First-run Dashboard and premium-library states */
.dashboard-onboarding{width:100%;max-width:100%;padding:22px 24px 20px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-panel);box-shadow:var(--elevation-1)}
.dashboard-onboarding-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 24px;align-items:end}.dashboard-onboarding-heading .eyebrow{grid-column:1/-1;margin:0}.dashboard-onboarding-heading h3{font:600 clamp(1.55rem,2.5vw,2.15rem)/.98 var(--font-display);letter-spacing:-.045em;margin:0}.dashboard-onboarding-heading h3 br{display:none}.dashboard-onboarding-heading p:not(.eyebrow){color:var(--text-muted);font-size:.88rem;margin:6px 0 0}.dashboard-explore-cta{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;padding:10px 13px;border-radius:var(--radius-control);font-size:.78rem}.dashboard-explore-cta svg{width:15px;fill:none;stroke:currentColor;stroke-width:2}
.dashboard-starters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:16px 0 0}
.starter-card{position:relative;min-width:0;text-align:left;padding:12px 34px 12px 12px;border:1px solid var(--border);border-radius:var(--radius-control);background:color-mix(in srgb,var(--surface) 88%,var(--surface-secondary));color:var(--text-main);cursor:pointer;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.starter-card:hover,.starter-card:focus-visible{transform:translateY(-2px);border-color:var(--brand);box-shadow:var(--elevation-1);outline:0}
.starter-card span{display:block;color:var(--brand);font-size:.58rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-bottom:5px}
.starter-card strong{display:block;font-size:.82rem;line-height:1.18}.starter-card small{display:block;color:var(--text-muted);font-size:.68rem;line-height:1.3;margin-top:4px}.starter-card>svg{position:absolute;right:11px;bottom:13px;width:14px;height:14px;fill:none;stroke:var(--brand);stroke-width:2}
.card-tags{display:flex;align-items:center;justify-content:flex-end;gap:5px;flex-wrap:wrap}
.premium-template-badge{display:inline-flex;align-items:center;gap:3px;padding:3px 5px;border:1px solid color-mix(in srgb,var(--brand) 28%,var(--border));border-radius:var(--radius-control);color:var(--brand);background:var(--surface-secondary);font-size:.54rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.premium-template-badge svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.premium-start svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px;margin-right:4px}
@media(max-width:700px){.dashboard-onboarding{padding:20px}.dashboard-onboarding-heading{grid-template-columns:1fr;align-items:start}.dashboard-explore-cta{justify-self:start}.dashboard-starters{grid-template-columns:1fr}.starter-card{padding:10px 34px 10px 10px}}

/* Details actions must own their icon geometry.  iconSvg() deliberately emits
   viewBox-only SVGs; without this boundary a browser falls back to its 300×150
   intrinsic SVG viewport and turns Start now into a giant play-shaped control. */
#general-actions .btn-success > svg,
#general-actions .btn-outline > svg,
#general-actions .btn-danger > svg,
#general-actions .button-ui-icon {
    width:16px !important;
    height:16px !important;
    min-width:16px;
    max-width:16px;
    max-height:16px;
    flex:0 0 16px;
    display:block;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}
#general-actions > .btn-success,
#general-actions > .btn-outline {
    width:100%;
    min-height:48px;
    margin-top:0;
}
#general-actions > .btn-outline { margin-top:10px; }

/* First-run preserves the editorial Quiet Hero; recommendations remain a
   deliberately subordinate, compact companion rather than replacing it. */
.dashboard-recommendations {
    width:100%;
    margin-top:20px;
    padding:20px 22px;
    background:color-mix(in srgb,var(--surface) 88%,var(--surface-secondary));
    border:1px solid var(--border);
    border-radius:var(--radius-surface);
}
.dashboard-recommendations-heading { display:flex; align-items:end; justify-content:space-between; gap:16px; }
.dashboard-recommendations-heading .eyebrow { margin:0 0 4px; }
.dashboard-recommendations-heading h3 { font:600 1.25rem/1 var(--font-display); letter-spacing:-.025em; }
.dashboard-text-link { display:inline-flex; align-items:center; gap:6px; padding:7px 0; border:0; background:transparent; color:var(--brand); font:700 .78rem var(--font-body); cursor:pointer; white-space:nowrap; }
.dashboard-text-link svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; }
.dashboard-recommendations .dashboard-starters { margin-top:14px; }
.dashboard-recommendations .starter-card { background:var(--surface); }
.premium-card-cta { border:1px solid color-mix(in srgb,var(--brand) 45%,var(--border)); }
.premium-card-cta svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
@media(max-width:700px) {
    .dashboard-recommendations { padding:18px 16px; }
    .dashboard-recommendations-heading { align-items:start; flex-direction:column; gap:6px; }
}

/* Custom Confirm Modal */
.confirm-content {
    text-align: center;
    padding: 3rem !important;
}
.confirm-icon-wrapper {
    width: 80px;
    height: 80px;
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
    font-size: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-circle);
    margin: 0 auto 1.5rem;
}
.confirm-content h2 {
    font-size: 1.5rem;
    color: var(--text-main);
    margin-bottom: 0.75rem;
}
.confirm-content p {
    color: var(--text-muted);
    font-size: 1rem;
    margin-bottom: 2rem;
}

/* Unified confirmation decisions: visual hierarchy without crowded actions. */
.confirm-view .confirm-content { padding:clamp(44px,7vw,58px) clamp(24px,5vw,38px) 30px !important; }
.confirm-icon { display:grid; place-items:center; width:48px; height:48px; margin:0 auto 15px; color:var(--brand); background:var(--surface-secondary); border:1px solid var(--border); border-radius:var(--radius-control); }
.confirm-icon svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.celebration-icon { color:var(--success); }
.confirm-content h3 { margin:0; font:700 1.35rem/1.2 var(--font-display); }
.confirm-content #confirm-message { margin:9px auto 0 !important; max-width:23rem; }
.confirm-btns { display:grid; grid-template-columns:1fr; gap:10px; width:100%; margin-top:26px; }
.confirm-btns .btn-block { width:100%; margin:0; min-height:48px; }
.confirm-primary { background:var(--danger); }
.confirm-secondary { background:var(--surface-secondary) !important; color:var(--text-main) !important; border:1px solid var(--border) !important; box-shadow:none !important; }
.confirm-secondary:hover,.confirm-secondary:focus-visible { color:var(--brand) !important; border-color:var(--brand) !important; background:var(--surface) !important; }
.confirm-primary:focus-visible,.confirm-secondary:focus-visible { outline:3px solid color-mix(in srgb,var(--brand) 35%,transparent); outline-offset:2px; }
.streak-badge .inline-ui-icon { width:13px; height:13px; margin-right:3px; vertical-align:-2px; }

/* Details View */
.guide-container { background: var(--surface-secondary); padding: 2rem; border-radius: var(--radius-panel); border: 1px solid var(--border); margin: 2rem 0; }
.guide-container h4 { margin: 1rem auto 0; font-weight: 600; font-size: 1.1rem; }
#details-guide { color: var(--text-muted); font-size: 1.05rem; margin-bottom: 50px;}

/* Toast Notifications */
#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.toast {
    background: var(--surface);
    padding: 16px 24px;
    border-radius: var(--radius-surface);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border-left: 4px solid var(--brand);
    color: var(--text-main);
    font-weight: 600;
    font-size: 0.9rem;
    animation: slideIn 0.3s ease-out forwards;
    min-width: 250px;
}
@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* Form Refinement */
.form-group input, .form-group textarea, .form-group select {
    background: var(--surface);
    border: 2px solid var(--border);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
}
.form-group label {
    color: var(--text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* View Details Button in Grid */
.btn-view-details {
    margin-top: 12px;
    padding: 10px;
    border-radius: var(--radius-surface);
    border: 1.5px solid var(--border);
    background: var(--surface-secondary);
    color: var(--brand);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
}
.btn-view-details:hover {
    background: var(--brand);
    color: white;
    border-color: var(--brand);
}

/* Card Actions Refinement */
.card-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 1.5rem;
}
.btn-view {
    flex: 1;
    padding: 12px;
    background: var(--brand-gradient);
    color: white;
    border: none;
    border-radius: var(--radius-control);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
}
.btn-settings {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-secondary);
    border-radius: var(--radius-surface);
    cursor: pointer;
    transition: all 0.2s;
    color: var(--text-muted);
}
.btn-settings svg { transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.btn-settings:hover { background: var(--border); color: var(--text-main); }
.btn-settings:hover svg { transform: rotate(90deg); }

/* Schedule Info */
.schedule-info {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--brand);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Day Selector */
.day-selector {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.day-btn {
    padding: 6px 10px;
    border-radius: var(--radius-control);
    border: 1.5px solid var(--border);
    background: var(--surface);
    color: var(--text-main);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}
.day-btn.active {
    background: var(--brand);
    color: white;
    border-color: var(--brand);
}

/* Switch Styling */
.switch-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding: 12px 16px;
    background: var(--surface-secondary);
    border-radius: var(--radius-surface);
}
.switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #cbd5e1;
    transition: .4s;
    border-radius: var(--radius-panel);
}
.slider:before {
    position: absolute;
    content: "";
    height: 18px; width: 18px;
    left: 3px; bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: var(--radius-circle);
}
input:checked + .slider { background-color: var(--brand); }
input:checked + .slider:before { transform: translateX(20px); }

/* New UI Elements */
.btn-icon {
    background: var(--surface-secondary);
    border: none;
    color: var(--text-main);
    width: 42px;
    height: 42px;
    border-radius: var(--radius-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-icon:hover { background: var(--border); transform: scale(1.05); }

.heart-btn {
    color: var(--text-muted);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background: none;
    border: none;
    padding: 5px;
    cursor: pointer;
}
.heart-btn.active { color: #ef4444; transform: scale(1.2); }

.filter-divider {
    width: 1px;
    height: 24px;
    background: var(--border);
    margin: 0 5px;
    align-self: center;
}

.archive-btn {
    background: transparent;
    color: var(--text-muted);
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s;
    opacity: 0.6;
}
.archive-btn:hover { transform: scale(1.1); opacity: 1; color: var(--danger); }

.restore-btn {
    background: var(--success);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: var(--radius-surface);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.restore-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(5, 150, 105, 0.2); }

.btn-favorite {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    border: none;
    border-radius: var(--radius-control);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.btn-favorite.active {
    color: #ef4444;
    background: white;
}

.btn-favorite:hover {
    transform: scale(1.1);
    background: white;
}

.btn-favorite svg {
    width: 22px;
    height: 22px;
}

.changelog-date {
    display: none;
}

.shop-card.is-unlocked { border-color:color-mix(in srgb,var(--brand) 38%,var(--border)); }
.shop-card.is-unlocked strong { color:var(--success); font-size:.76rem; }
.shop-card .shop-use-action { background:var(--brand-gradient); color:#fff; cursor:pointer; opacity:1; }
.shop-card .shop-use-action:hover { filter:brightness(1.05); transform:translateY(-1px); }

/* Responsive */
@media (max-width: 600px) {
    .challenges-grid { grid-template-columns: 1fr; }
    .container { padding: 0 20px; }
    .modal-content { padding: 2.5rem 1.5rem; }
    .section-header h2 { font-size: 1.5rem; }
}

/* Confetti Animation */
.confetti {
    position: fixed;
    width: 10px;
    height: 10px;
    background-color: #f2d74e;
    top: -10px;
    z-index: 9999;
    pointer-events: none;
    border-radius: var(--radius-control);
    animation: fall linear forwards;
}
@keyframes fall {
    to { transform: translateY(100vh) rotate(720deg); }
}

/* Streak Badge */
.streak-badge {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white !important;
    padding: 2px 8px;
    border-radius: var(--radius-surface);
    font-size: 0.75rem;
    font-weight: 800;
    box-shadow: 0 4px 10px rgba(217, 119, 6, 0.3);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    animation: streakBounce 2s infinite;
}

@keyframes streakBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

/* Completed Challenge Styles */
.challenge-card.card-completed {
    border: 2px solid #ffc107; /* Brighter gold */
    box-shadow: 0 0 20px rgba(255, 193, 7, 0.5);
}

.challenge-card.card-completed .card-image::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to top, rgba(30, 30, 30, 0.5), transparent);
    opacity: 0.8;
}

.completed-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: linear-gradient(145deg, #ffd700, #ffb300);
    color: #422d00;
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-circle);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    z-index: 2;
    border: 2px solid rgba(255,255,255,0.5);
}

/* Structural guardrails for the empty-dashboard composition. */
.challenges-grid { min-width: 0; }
.challenges-grid.empty-dashboard { display: block; width: 100%; }
.challenges-grid > .quiet-hero { grid-column: 1 / -1; min-width: 0; width: 100%; }

/* A single active practice needs a deliberate composition, not an abandoned
   first column. The card keeps its existing component/interaction contract. */
.challenges-grid.dashboard-state-single { display:block; }
.dashboard-single-focus-layout { display:grid; grid-template-columns:minmax(320px, 510px) minmax(250px, 340px); justify-content:center; align-items:stretch; gap:clamp(22px,4vw,56px); max-width:980px; margin:10px auto 44px; }
.dashboard-single-focus-layout > .challenge-card { width:100%; min-width:0; }
.dashboard-focus-companion { position:relative; min-width:0; align-self:center; padding:30px 0 30px 30px; border-left:1px solid color-mix(in srgb,var(--brand) 30%,var(--border)); color:var(--text-main); }
.dashboard-focus-companion::before { content:""; position:absolute; left:-3px; top:30px; width:5px; height:38px; background:var(--brand); border-radius:var(--radius-control); }
.dashboard-focus-companion .eyebrow { margin:0 0 9px; }
.dashboard-focus-companion h3 { max-width:13ch; margin:0; font:600 clamp(1.65rem,2.7vw,2.25rem)/.99 var(--font-display); letter-spacing:-.045em; }
.dashboard-focus-note { max-width:28ch; margin:15px 0 22px; color:var(--text-muted); font-size:.93rem; line-height:1.55; }
.dashboard-focus-status { display:flex; align-items:center; gap:11px; padding:12px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.dashboard-focus-status > svg { width:18px; height:18px; flex:0 0 18px; fill:none; stroke:var(--brand); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.dashboard-focus-status span,.dashboard-focus-status strong { display:block; }
.dashboard-focus-status span { color:var(--text-muted); font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.dashboard-focus-status strong { margin-top:2px; font-size:.9rem; }
.dashboard-focus-add { display:inline-flex; align-items:center; gap:7px; margin-top:20px; padding:0; border:0; background:none; color:var(--brand); font:700 .8rem var(--font-body); cursor:pointer; }
.dashboard-focus-add svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform var(--transition-ui); }
.dashboard-focus-add:hover svg,.dashboard-focus-add:focus-visible svg { transform:translateX(3px); }
.dashboard-focus-add:focus-visible { outline:2px solid var(--brand); outline-offset:5px; border-radius:var(--radius-control); }
@media(max-width:760px) { .dashboard-single-focus-layout { grid-template-columns:minmax(0,1fr); gap:20px; max-width:510px; margin:0 auto 30px; } .dashboard-focus-companion { padding:23px 0 0; border-left:0; border-top:1px solid color-mix(in srgb,var(--brand) 30%,var(--border)); } .dashboard-focus-companion::before { left:0; top:-3px; width:38px; height:5px; } .dashboard-focus-companion h3 { max-width:18ch; } }

/* One canonical library-card surface. Discover and the Dashboard starter shelf
   opt into this exact same geometry; Dashboard only suppresses the utility
   overlay so the recommendation context stays calm. */
.challenge-library-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.challenge-library-grid .challenge-card { border-radius:var(--radius-surface); box-shadow:var(--elevation-1); min-height:0; cursor:pointer; }
.challenge-library-grid .challenge-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-soft); }
.challenge-library-grid .card-image { height:136px; background-size:cover; background-position:center; }
.challenge-library-grid .card-image::after { height:100%; background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 58%,transparent),transparent); }
.challenge-library-grid .card-body { padding:17px 18px 18px; }
.challenge-library-grid .card-top { margin-bottom:7px; gap:8px; }
.challenge-library-grid .card-top h3 { font-size:1.04rem; line-height:1.15; }
.challenge-library-grid .tag { padding:3px 6px; font-size:.58rem; }
.challenge-library-grid .short-desc { font-size:.81rem; line-height:1.45; margin-bottom:16px; }
.dashboard-recommendation-cards .card-controls,
.dashboard-recommendation-cards .favorite-saved-badge { display:none; }
@media(max-width:768px) {
    .challenge-library-grid { grid-template-columns:1fr 1fr; gap:10px; }
    .challenge-library-grid .card-image { height:105px; }
    .challenge-library-grid .card-body { padding:14px; }
    .challenge-library-grid .short-desc { display:none; }
    .challenge-library-grid .card-top h3 { font-size:.96rem; }
}

/* v7.5.12 — Discover's compact category shelf. Search remains in the stable
   editorial column while the image half changes direction. */
.discover-category-slider {
    grid-column:2;
    grid-row:1 / 3;
    position:relative;
    min-width:0;
    min-height:248px;
    overflow:hidden;
    background:var(--surface-secondary);
    --slider-accent:var(--brand);
}
.discover-slider-viewport,
.discover-category-slide { position:absolute; inset:0; }
.discover-slider-image {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center;
    opacity:0;
    transform:scale(1.028) translateX(1.2%);
    transition:opacity 540ms cubic-bezier(.22,.72,.2,1),transform 600ms cubic-bezier(.22,.72,.2,1);
    will-change:opacity,transform;
}
.discover-slider-image.is-active { opacity:1; transform:scale(1) translateX(0); }
.discover-slider-image.is-exiting { opacity:0; transform:scale(1.024) translateX(-1.1%); }
.discover-category-slider:hover .discover-slider-image.is-active { transform:scale(1.018); }
.discover-slider-scrim {
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,color-mix(in srgb,var(--slider-accent) 88%,#1f1712) 0%,color-mix(in srgb,var(--slider-accent) 44%,transparent) 49%,rgba(23,16,12,.08) 100%);
}
.discover-slider-copy {
    position:absolute;
    z-index:1;
    left:clamp(22px,3vw,38px);
    bottom:42px;
    width:min(78%, 350px);
    color:#fffaf3;
    text-shadow:0 1px 12px rgba(24,15,10,.26);
    transition:opacity 180ms ease,transform 180ms ease;
    will-change:opacity,transform;
}
.discover-slider-copy.is-leaving { opacity:0; transform:translateY(8px); }
.discover-slider-copy.is-entering > * { animation:discover-copy-in 360ms cubic-bezier(.22,.72,.2,1) both; }
.discover-slider-copy.is-entering .discover-slider-kicker { animation-delay:35ms; }
.discover-slider-copy.is-entering .discover-slider-title { animation-delay:85ms; }
.discover-slider-copy.is-entering .discover-slider-description { animation-delay:135ms; }
.discover-slider-copy.is-entering .discover-slider-cta { animation-delay:175ms; }
@keyframes discover-copy-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
.discover-slider-kicker {
    margin:0 0 8px;
    color:color-mix(in srgb,#fff 76%,var(--slider-accent));
    font-size:.66rem;
    font-weight:700;
    letter-spacing:.13em;
    text-transform:uppercase;
}
.discover-slider-title {
    margin:0;
    font:600 clamp(1.45rem,2.25vw,2.1rem)/.98 Georgia,serif;
    letter-spacing:-.045em;
    color:#fffdf9;
}
.discover-slider-description { margin:9px 0 14px; font-size:.84rem; line-height:1.4; color:rgba(255,250,244,.89); }
.discover-slider-cta {
    appearance:none;
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:0;
    border:0;
    border-bottom:1px solid rgba(255,255,255,.72);
    background:transparent;
    color:#fffdf9;
    font:700 .75rem/1.2 inherit;
    cursor:pointer;
}
.discover-slider-cta svg,
.discover-slider-arrow svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.discover-slider-cta:focus-visible,
.discover-slider-arrow:focus-visible,
.discover-slider-dot:focus-visible { outline:2px solid #fff; outline-offset:4px; }
.discover-slider-controls {
    position:absolute;
    z-index:2;
    right:16px;
    bottom:15px;
    display:flex;
    align-items:center;
    gap:8px;
}
.discover-slider-arrow {
    width:27px;
    height:27px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.34);
    border-radius:var(--radius-control);
    color:#fff;
    background:rgba(29,19,13,.2);
    cursor:pointer;
}
.discover-slider-arrow:hover { background:rgba(29,19,13,.42); }
.discover-slider-dots { display:flex; align-items:center; gap:5px; }
.discover-slider-dot {
    width:6px;
    height:6px;
    padding:0;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.48);
    cursor:pointer;
    transition:width .2s ease, background .2s ease;
}
.discover-slider-dot[aria-selected="true"] { width:18px; border-radius:5px; background:#fffdf9; }
.discover-art { display:none; }
@media (prefers-reduced-motion:reduce) {
    .discover-slider-image,
    .discover-slider-copy,
    .discover-slider-dot { transition:none; animation:none!important; }
}
@media (max-width:768px) {
    .discover-category-slider { grid-column:1; grid-row:2; min-height:142px; height:142px; }
    .discover-slider-copy { left:24px; bottom:34px; width:min(76%, 360px); }
    .discover-slider-title { font-size:1.45rem; }
    .discover-slider-description { display:none; }
    .discover-slider-kicker { margin-bottom:6px; }
    .discover-slider-controls { right:13px; bottom:12px; gap:6px; }
    .discover-slider-arrow { width:25px; height:25px; }
}
@media(max-width:430px) {
    .challenge-library-grid { grid-template-columns:1fr; }
    .challenge-library-grid .card-image { height:128px; }
    .challenge-library-grid .short-desc { display:block; }
}

/* Discover pagination and category-specific local artwork */
.challenges-grid#discover-challenges-grid .card-image {
    background-image: none;
    background-size: cover;
    background-position: center;
}
.challenges-grid#discover-challenges-grid .card-image::after {
    height: 100%;
    background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 52%, transparent), transparent 72%);
}
.discover-load-more { display:flex; justify-content:center; padding:26px 0 12px; }
.load-more-button {
    min-width:238px;
    border:1px solid var(--border);
    background:var(--surface);
    color:var(--text-main);
    padding:12px 17px;
    cursor:pointer;
    font:600 .82rem var(--font-body);
    letter-spacing:.01em;
    box-shadow:var(--shadow-soft);
    transition:transform .2s ease,border-color .2s ease;
}
.load-more-button:hover,.load-more-button:focus-visible { border-color:var(--brand); transform:translateY(-2px); outline:none; }
.load-more-button span { color:var(--brand); margin-left:7px; }
.load-more-button small { display:block; margin-top:3px; color:var(--text-muted); font:500 .66rem var(--font-body); letter-spacing:.08em; text-transform:uppercase; }
.card-cta { text-decoration:none; }
.close-modal svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.1; stroke-linecap:round; }
.modal-content .inline-ui-icon { display:inline-block; width:17px; height:17px; margin-right:6px; vertical-align:-3px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.modal-content .button-ui-icon { display:inline-block; width:16px; height:16px; margin:0 6px -3px 0; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.guide-container h4 .inline-ui-icon { color:var(--brand); }
.modal-heading { display:flex; align-items:center; gap:11px; padding-right:30px; }.modal-title-icon { width:32px; height:32px; display:grid; place-items:center; flex:0 0 32px; color:var(--brand); background:var(--surface-secondary); border-radius:var(--radius-control); }.modal-title-icon svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.brand-home-link { color:inherit; text-decoration:none; }.brand-home-link:focus-visible { outline:2px solid var(--brand); outline-offset:4px; border-radius:var(--radius-control); }
.challenges-grid#discover-challenges-grid .challenge-card { cursor:pointer; }.challenges-grid#discover-challenges-grid .challenge-card:focus-visible { outline:3px solid color-mix(in srgb,var(--brand) 52%,transparent); outline-offset:3px; }
/* Discover search: explicit local positioning avoids inherited hero-search offsets. */
.discover-hero .search-wrapper { position:relative; display:grid; grid-template-columns:52px minmax(0,1fr); align-items:center; }
.discover-hero .search-icon { position:static; grid-area:1 / 1; justify-self:center; align-self:center; width:18px; height:18px; transform:none; pointer-events:none; z-index:2; }
.discover-hero .search-wrapper input { grid-area:1 / 1 / 1 / -1; display:block; min-height:52px; line-height:1.35; padding-left:52px; }
/* Challenge details header: reserve a dedicated close-control zone. */
.details-view > .close-modal { top:20px; right:20px; z-index:4; }
.details-view #details-header { padding-right:48px; }
.details-view #details-header > div { display:grid !important; grid-template-columns:minmax(0,1fr) auto; gap:14px; align-items:start !important; }
.details-view #details-schedule-badge { margin-top:0 !important; white-space:nowrap; }
@media(max-width:599px){.details-view #details-header{padding-right:0}.details-view #details-header > div{grid-template-columns:minmax(0,1fr);gap:10px}.details-view #details-schedule-badge{justify-self:start}.details-view > .close-modal{top:18px;right:18px}}
/* Changelog: a fixed modal frame with one intentional scroll surface. */
.changelog-modal-content {
    position: relative;
    width: min(100%, 520px);
    max-width: 520px;
    height: min(680px, calc(100dvh - 48px));
    max-height: calc(100dvh - 48px);
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    overscroll-behavior: contain;
}
.changelog-modal-content > .close-modal {
    top: 16px;
    right: 16px;
    z-index: 3;
    width: 38px;
    height: 38px;
    color: var(--text-muted);
    background: var(--surface);
    border: var(--line);
    box-shadow: var(--elevation-1);
}
.changelog-modal-content > .close-modal:hover { background: var(--surface-secondary); color: var(--brand); }
.changelog-modal-header {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    min-height: 112px;
    padding: 25px 76px 21px 28px;
    border-bottom: var(--line);
    background: linear-gradient(100deg, color-mix(in srgb, var(--surface-secondary) 78%, var(--surface)), var(--surface));
}
.changelog-announcement-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: var(--brand);
    background: color-mix(in srgb, var(--brand) 10%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--border));
    border-radius: var(--radius-control);
}
.changelog-announcement-icon svg { width: 23px; height: 23px; }
.changelog-modal-header h3 { margin: 0; color: var(--text); font: 800 1.45rem/1.15 var(--font-display); }
.changelog-modal-header p { margin: 4px 0 0; color: var(--text-muted); font-size: .86rem; }
.changelog-modal-header .changelog-kicker { margin: 0 0 4px; color: var(--brand); font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.changelog-list {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding: 18px 20px 18px 28px;
    scrollbar-color: color-mix(in srgb, var(--brand) 55%, var(--border)) transparent;
}
.changelog-list::-webkit-scrollbar { width: 8px; }
.changelog-list::-webkit-scrollbar-track { margin: 8px 0; background: transparent; }
.changelog-list::-webkit-scrollbar-thumb { border: 2px solid var(--surface); border-radius: var(--radius-control); background: color-mix(in srgb, var(--brand) 55%, var(--border)); }
.changelog-entry { margin: 0 0 12px; padding: 15px 16px; border: var(--line); border-radius: var(--radius-surface); background: var(--surface-secondary); }
.changelog-entry:last-child { margin-bottom: 0; }
.changelog-entry-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.changelog-version { color: var(--brand); font-size: .94rem; font-weight: 800; }
.changelog-date { display: inline; color: var(--text-muted); font-size: .69rem; font-weight: 700; white-space: nowrap; }
.changelog-entry ul { margin: 0; padding-left: 18px; color: var(--text); font-size: .83rem; line-height: 1.55; }
.changelog-entry li + li { margin-top: 4px; }
.changelog-modal-footer { flex: 0 0 auto; padding: 14px 28px 22px; border-top: var(--line); background: var(--surface); }
.changelog-modal-footer .btn-block { width: 100%; margin: 0; }
@media (max-width: 599px) {
    .changelog-modal-content { height: min(720px, calc(100dvh - 20px)); max-height: calc(100dvh - 20px); }
    .changelog-modal-header { grid-template-columns: 36px minmax(0, 1fr); min-height: 96px; padding: 17px 67px 16px 20px; gap: 11px; }
    .changelog-announcement-icon { width: 36px; height: 36px; }.changelog-announcement-icon svg { width: 20px; height: 20px; }
    .changelog-modal-header h3 { font-size: 1.23rem; }.changelog-modal-header p { font-size: .79rem; }
    .changelog-modal-content > .close-modal { top: 14px; right: 14px; }
    .changelog-list { padding: 14px 13px 14px 20px; }.changelog-entry { padding: 13px 14px; }
    .changelog-modal-footer { padding: 12px 20px 18px; }
}
.card-controls { display:flex; align-items:center; gap:6px; }.card-controls .icon-action,.card-controls .archive-btn { position:static; display:grid; place-items:center; width:30px; height:30px; padding:0; border:1px solid rgba(255,255,255,.5); border-radius:var(--radius-circle); background:rgba(255,255,255,.92); color:#334155; opacity:1; box-shadow:0 3px 10px rgba(15,23,42,.12); }.card-controls .archive-btn:hover { color:var(--danger); transform:none; }.card-controls .btn-favorite.active { color:var(--brand); }.card-controls .icon-action:hover { background:white; }.challenges-grid#discover-challenges-grid .card-image { background-size:cover; background-position:center; }
.card-controls .btn-favorite.active { color:#fff; background:var(--brand); border-color:var(--brand); box-shadow:0 4px 13px color-mix(in srgb,var(--brand) 48%,transparent); }.card-controls .btn-favorite.active svg { fill:currentColor; stroke:currentColor; }.favorite-saved-badge { position:absolute; left:10px; top:10px; z-index:3; display:inline-flex; align-items:center; gap:4px; padding:5px 7px; background:var(--brand); color:#fff; font:700 .59rem var(--font-body); letter-spacing:.07em; text-transform:uppercase; box-shadow:0 4px 12px color-mix(in srgb,var(--brand) 38%,transparent); }.favorite-saved-badge svg { width:12px; height:12px; fill:currentColor; stroke:currentColor; stroke-width:1.8; }
.challenges-grid#discover-challenges-grid .card-image { height:136px; background-position:center; }.challenge-card.feedback-liked { animation:cardLikePulse .28s ease-out; }.challenge-card.feedback-liked .btn-favorite { color:white; background:var(--brand); border-color:var(--brand); transform:scale(1.14); }.challenge-card.feedback-copied { animation:cardCopyFlash .48s ease-out; }.challenge-card.feedback-copied .icon-action:last-child { color:white; background:var(--success); border-color:var(--success); }.challenge-card.feedback-archived { animation:cardArchiveAway .28s ease-in forwards; }.challenge-card.feedback-archived .archive-btn { color:white; background:var(--danger); border-color:var(--danger); }@keyframes cardLikePulse{50%{transform:translateY(-4px) scale(1.015);box-shadow:0 14px 28px color-mix(in srgb,var(--brand) 26%,transparent)}}@keyframes cardCopyFlash{50%{outline:2px solid var(--success);outline-offset:3px}}@keyframes cardArchiveAway{to{opacity:0;transform:scale(.96)}}
.quiet-hero, .quiet-hero-copy, .quiet-hero-art, .hero-metrics, .hero-metrics span { min-width: 0; }
.quiet-hero h3 { overflow-wrap: normal; word-break: normal; font-size: clamp(2.45rem, 4.2vw, 3.65rem); }
.quiet-hero h3 em { display: block; white-space: nowrap; }

/* System enforcement — kept last so legacy declarations cannot fragment the UI. */
nav button { border-radius:var(--radius-control); padding:10px 16px; }
nav button.active { transform:none; box-shadow:var(--elevation-1); }
.filter-tag, .shop-trigger, .theme-picker-trigger { border-radius:var(--radius-control); }
input, textarea, select { border:var(--line); border-radius:var(--radius-surface); padding:12px 14px; }
.btn-primary { border-radius:var(--radius-control); padding:11px 18px; }
.btn-block { border-radius:var(--radius-control); min-height:44px; padding:11px 18px; }
.btn-success, .btn-danger, .btn-outline, .btn-view, .btn-view-details, .shop-card button, .discount-form button, .shop-close, .secondary-close, .restore-btn { border-radius:var(--radius-control); }
.challenge-card, .dashboard-hero, .quiet-hero, .shop-card, .guide-container, .switch-group, .discount-form, .confirm-content, .details-view { border-radius:var(--radius-surface); }
.quiet-hero, .discover-hero, .dashboard-hero { border-radius:var(--radius-panel); }
.modal-content { border-radius:var(--radius-panel); padding:clamp(24px, 4vw, 40px); }
.card-controls .icon-action, .card-controls .archive-btn, .btn-favorite, .btn-icon, .btn-settings, .close-modal { border-radius:var(--radius-control); }
.card-controls .icon-action, .card-controls .archive-btn { width:32px; height:32px; }
.card-controls { gap:var(--space-2); }
.shop-heading > span, .checkout-icon { border-radius:var(--radius-control); }
.theme-option { border-radius:var(--radius-surface); }
.theme-swatch, .favorite-saved-badge, .tag, .price-badge, .streak-badge { border-radius:var(--radius-control); }
.load-more-button { border-radius:var(--radius-control); }
@media (max-width:599px) { .modal-content { border-radius:var(--radius-panel) var(--radius-panel) 0 0; } .quiet-hero, .discover-hero, .dashboard-hero { border-radius:var(--radius-surface); } }

@media (max-width: 600px) {
    html, body { max-width: 100%; overflow-x: hidden; }
    header .header-container { display: flex; align-items: stretch; gap: .9rem; }
    header .header-brand { width: 100%; }
    header .header-nav { display: grid; grid-template-columns: minmax(0, 1fr) 40px 40px; align-items: center; gap: 7px; width: 100%; min-width: 0; }
    /* Navigation owns a full grid row: no inherited flex width can squeeze or
       clip Dashboard/Discover when the account area is present. */
    header .header-nav nav { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); grid-column:1 / -1; grid-row:2; width:100%; min-width:0; max-width:100%; gap:7px; overflow:visible; }
    header .header-nav nav button { width:100%; min-width:0; min-height:40px; padding:9px 8px; font-size:.8rem; line-height:1.2; white-space:nowrap; overflow:visible; }
    header .theme-picker-trigger { grid-column: 2; grid-row: 1; width: 40px; height: 40px; justify-content: center; padding: 0; border: 1px solid var(--border); background: var(--surface-secondary); border-radius: var(--radius-control); }
    header .theme-picker-trigger span, header .shop-trigger span { display: none; }
    header .shop-trigger { grid-column: 3; grid-row: 1; width: 40px; height: 40px; justify-content: center; padding: 0; border-radius: var(--radius-control); }
    header #auth-container { grid-column: 1; grid-row: 1; min-width: 0; max-width:100%; overflow: hidden; }
    .section-header { gap: 12px; margin-bottom: 1.35rem; min-width: 0; }
    .section-header h2 { min-width: 0; font-size: 1.3rem; }
    #btn-create-challenge { flex: 0 0 auto; padding: 10px 13px; font-size: .8rem; white-space: nowrap; }
    .challenges-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .challenges-grid.empty-dashboard { width:100%; max-width:100%; }
    .quiet-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; width:100%; max-width:100%; }
    .quiet-hero-copy { padding: 32px 23px 25px; }
    .quiet-hero h3 { font-size: clamp(2.15rem, 10vw, 2.8rem); }.quiet-hero h3 em{white-space:normal;}
    .quiet-hero-copy > p:not(.eyebrow) { font-size: .92rem; }
    .quiet-hero-art { order: -1; height: 205px; min-height: 205px; }
    .quiet-hero-art img { object-position: 65% center; }
    .hero-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 26px; }
    .hero-metrics b { font-size: 1rem; }.hero-metrics small { font-size: .57rem; line-height: 1.25; }
}

/* Keep the changelog exit control self-contained above all legacy modal rules. */
.changelog-modal-content { padding: 0 !important; }
.changelog-modal-content > button.close-modal {
    position: absolute !important;
    inset: 16px 16px auto auto !important;
    display: grid !important;
    place-items: center !important;
    width: 40px !important;
    min-width: 40px;
    height: 40px !important;
    min-height: 40px;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible;
    line-height: 0;
    color: var(--text-main);
    background: var(--surface);
    border: var(--line);
    box-shadow: var(--elevation-1);
}
.changelog-modal-content > button.close-modal svg {
    display: block !important;
    flex: 0 0 20px !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0;
    overflow: visible;
    stroke: currentColor !important;
    stroke-width: 2.4 !important;
}
.changelog-modal-content > button.close-modal:hover,
.changelog-modal-content > button.close-modal:focus-visible { color: var(--brand); background: var(--surface-secondary); }
/* This is a semantic header inside a modal, not the site's sticky page header. */
.changelog-modal-header {
    position: relative;
    top: auto;
    z-index: 1;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.changelog-modal-content > button.close-modal { z-index: 2 !important; }
@media (max-width: 599px) {
    .changelog-modal-content > button.close-modal { inset: 12px 12px auto auto !important; }
    .changelog-modal-header { padding-right: 72px; }
}

@media (max-width:600px) { header .theme-picker-trigger, header .shop-trigger { border-radius:var(--radius-control); } }

/* v7.5.7 — Challenge detail guide: one shared category artwork becomes a
   calm editorial ribbon, while the authored instructions stay highly legible. */
.details-view .guide-container {
    position:relative;
    isolation:isolate;
    overflow:hidden;
    margin:22px 0 26px;
    padding:0;
    border:1px solid var(--border);
    background:var(--surface-secondary);
    box-shadow:inset 0 1px 0 color-mix(in srgb,var(--surface) 48%,transparent);
}
.details-view .guide-artwork {
    position:relative;
    z-index:0;
    height:108px;
    background-image:linear-gradient(90deg,color-mix(in srgb,var(--brand) 56%,transparent),color-mix(in srgb,var(--brand-light) 20%,transparent)),var(--guide-artwork);
    background-size:cover;
    background-position:center;
    filter:saturate(.82) contrast(.94);
}
.details-view .guide-artwork::after {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,transparent 12%,var(--surface-secondary) 100%);
}
.details-view .guide-inner {
    position:relative;
    z-index:1;
    margin-top:-31px;
    padding:0 clamp(22px,4vw,34px) clamp(24px,4vw,32px);
}
.details-view .guide-kicker {
    margin:0 0 7px;
    color:var(--brand);
    font-size:.67rem;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
}
.details-view .guide-container h4 {
    display:flex;
    align-items:center;
    gap:8px;
    margin:0 0 17px;
    color:var(--text-main);
    font-family:var(--font-display);
    font-size:clamp(1.18rem,2.2vw,1.42rem);
    line-height:1.15;
}
.details-view .guide-container h4 .inline-ui-icon { width:18px; height:18px; margin:0; flex:0 0 auto; color:var(--brand); }
.details-view #details-guide { margin:0; color:var(--text-muted); font-size:1rem; line-height:1.65; }
.details-view .guide-content > :first-child { margin-top:0; }
.details-view .guide-content > :last-child { margin-bottom:0; }
.details-view .guide-content p { margin:0 0 15px; }
.details-view .guide-content h4 {
    margin:25px 0 9px;
    color:var(--brand);
    font-family:var(--font-body);
    font-size:.76rem;
    font-weight:750;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.details-view .guide-content ul,
.details-view .guide-content ol { display:grid; gap:9px; margin:0 0 18px; padding:0; list-style:none; counter-reset:guide-step; }
.details-view .guide-content li { position:relative; margin:0; padding:10px 12px 10px 38px; color:var(--text-main); background:color-mix(in srgb,var(--surface) 48%,transparent); border-left:2px solid color-mix(in srgb,var(--brand) 56%,transparent); }
.details-view .guide-content ul li::before { content:""; position:absolute; left:16px; top:1.02em; width:7px; height:7px; border-radius:50%; background:var(--brand); }
.details-view .guide-content ol li { counter-increment:guide-step; }
.details-view .guide-content ol li::before { content:counter(guide-step); position:absolute; left:11px; top:9px; width:19px; height:19px; display:grid; place-items:center; border:1px solid color-mix(in srgb,var(--brand) 48%,transparent); color:var(--brand); font-size:.66rem; font-weight:800; line-height:1; }
.details-view .guide-content strong { color:var(--text-main); font-weight:750; }
/* Modal panels use a border-box contract: the 100% mobile sheet cannot add
   its padding outside the viewport and crop either actions or the close icon. */
.modal-content { box-sizing:border-box; }
#general-actions > .btn-success,
#general-actions > .btn-outline { box-sizing:border-box; }
@media (max-width:599px) {
    .details-view .guide-container { margin:18px 0 22px; }
    .details-view .guide-artwork { height:94px; background-position:center; }
    .details-view .guide-inner { margin-top:-26px; padding:0 20px 23px; }
    .details-view .guide-container h4 { margin-bottom:14px; }
    .details-view #details-guide { font-size:.94rem; line-height:1.58; }
    .details-view .guide-content li { padding:9px 10px 9px 35px; }
}

/* v7.4.2 — Discover is a compact, editorial shelf: library content stays above the fold. */
#discover-section { padding-top:26px; }
.discover-hero {
    grid-template-columns:minmax(0, .98fr) minmax(360px, 1.02fr);
    grid-template-rows:minmax(0, 1fr) auto;
    min-height:248px;
    margin-bottom:24px;
    background:var(--surface);
}
.discover-intro { padding:30px 36px 8px; align-self:end; }
.discover-intro .eyebrow { margin-bottom:9px; }
.discover-intro h2 { font-size:clamp(2.1rem, 3.6vw, 3.45rem); line-height:.91; }
.discover-intro > p:last-child { margin-top:13px; max-width:25rem; font-size:.94rem; line-height:1.45; }
.discover-art { min-height:248px; }
.discover-art img { object-position:center 64%; mix-blend-mode:normal; opacity:1; }
.search-wrapper { padding:16px 36px 28px; }
.discover-hero .search-wrapper input { min-height:46px; }
.library-toolbar { margin-bottom:12px; }
.library-toolbar h2 { font-size:1.75rem; }
.filter-bar { padding-bottom:17px; }
.filter-bar + .challenges-grid { margin-top:17px; }

/* v7.4.4 — Search focus bridges the editorial hero and the actionable library. */
#discover-section.search-is-focused .search-wrapper input { box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent); }
@media (prefers-reduced-motion: reduce) { #discover-section.search-is-focused .search-wrapper input { transition:none; } }

@media (max-width:768px) {
    #discover-section { padding-top:20px; }
    .discover-hero { grid-template-columns:1fr; grid-template-rows:auto auto auto; min-height:0; }
    .discover-intro { padding:28px 24px 8px; }
    .discover-intro h2 { font-size:2.45rem; }
    .discover-art { grid-column:1; grid-row:2; min-height:128px; height:128px; }
    .discover-art img { object-position:center 68%; }
    .search-wrapper { grid-column:1; grid-row:3; padding:16px 24px 24px; }
    .library-toolbar { margin-top:24px; }
}

/* v7.4.3 — Appearance is a vertical gallery; only its theme collection scrolls. */
.themes-modal {
    position:relative;
    display:flex;
    flex-direction:column;
    width:min(720px, calc(100vw - 40px));
    height:min(86vh, 760px);
    max-height:calc(100vh - 40px);
    padding:0 !important;
    overflow:hidden;
    isolation:isolate;
}
.themes-modal-header {
    flex:0 0 auto;
    min-width:0;
    padding:34px 82px 20px 36px;
    border-bottom:1px solid var(--border);
    background:var(--surface);
}
.themes-modal-header .eyebrow { margin:0 0 12px; }
.themes-modal h3 { margin:0; font-size:clamp(1.75rem, 3vw, 2.2rem); }
.themes-modal .theme-intro { margin:9px 0 0; max-width:38rem; }
.themes-modal > .close-modal {
    z-index:3;
    right:24px;
    top:25px;
    display:grid;
    place-items:center;
    background:var(--surface-secondary);
    border:1px solid var(--border);
    box-shadow:var(--elevation-1);
}
.themes-modal-list {
    display:block;
    min-width:0;
    min-height:0;
    flex:1 1 auto;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:22px 36px 36px;
    scrollbar-gutter:stable;
}
.themes-modal-list .theme-group { min-width:0; }
.themes-modal-list .theme-group + .theme-group { margin-top:24px; }
.themes-modal-list .theme-options { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.themes-modal-list .theme-option {
    display:grid;
    grid-template-columns:35px minmax(0, 1fr) auto;
    align-items:start;
    min-height:76px;
}
.themes-modal-list .theme-option-copy { min-width:0; }
.themes-modal-list .theme-option small { overflow-wrap:anywhere; }
.themes-modal-list .theme-lock,
.themes-modal-list .theme-active {
    max-width:72px;
    margin:2px 0 0;
    text-align:right;
    white-space:normal;
    overflow-wrap:anywhere;
}
@media (max-width:599px) {
    .themes-modal {
        width:100%;
        height:min(90vh, 760px);
        max-height:90vh;
    }
    .themes-modal-header { padding:27px 70px 17px 24px; }
    .themes-modal > .close-modal { top:18px; right:18px; }
    .themes-modal-list { padding:18px 24px 28px; }
    .themes-modal-list .theme-options { grid-template-columns:minmax(0, 1fr); }
}

/* Nocturne's swatch mirrors its indigo-charcoal, dusk-plum, and amber palette. */
.theme-nocturne .theme-swatch i:nth-child(1) { background:#292536; }
.theme-nocturne .theme-swatch i:nth-child(2) { background:#76536f; }
.theme-nocturne .theme-swatch i:nth-child(3) { background:#d69a63; }

/* A real link layer preserves browser new-tab affordances for active Dashboard
   challenges; the visible View Progress control stays above it and independent. */
.dashboard-active-card { position:relative; cursor:pointer; }
.dashboard-card-open-link { position:absolute; inset:0; z-index:1; border-radius:inherit; color:transparent; text-decoration:none; }
.dashboard-active-card .card-image, .dashboard-active-card .card-body { position:relative; z-index:2; pointer-events:none; }
.dashboard-active-card .btn-view-details { position:relative; z-index:3; pointer-events:auto; }
.dashboard-active-card:has(.dashboard-card-open-link:hover), .dashboard-active-card:has(.dashboard-card-open-link:focus-visible) { transform:translateY(-4px); box-shadow:var(--shadow-soft); border-color:color-mix(in srgb,var(--brand) 42%,var(--border)); }
.dashboard-card-open-link:focus-visible { outline:3px solid color-mix(in srgb,var(--brand) 54%,transparent); outline-offset:-3px; }