/* Smart Muslim - Mobile-First Essential Design System */
@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,600;0,700;0,800;1,600;1,700&display=swap');

:root {
    /* Smart Muslim V2 palette: warm light-first, explicitly no gold. */
    --sm-canvas: #f3ede5;
    --sm-surface: #fffdf9;
    --sm-surface-soft: #f8f2eb;
    --sm-ink: #18352e;
    --sm-muted: #6d746f;
    --sm-line: #e4d9cd;
    --sm-green: #1f604e;
    --sm-green-soft: #e3eee8;
    --sm-purple: #765c9d;
    --sm-purple-soft: #eee8f5;
    --sm-coral: #c86f64;
    --sm-coral-soft: #f8e8e5;
    --sm-slate: #5d7886;
    --sm-slate-soft: #e7eef1;
    --sm-radius-card: 18px;
    --sm-radius-control: 13px;

    --primary: var(--sm-green);
    --primary-light: var(--sm-green-soft);
    --accent: var(--sm-purple);
    --accent-light: var(--sm-purple-soft);
    --gold: var(--sm-coral); /* legacy token retained; visual value is coral */
    --navy: var(--sm-ink);
    --text-dark: var(--sm-ink);
    --text-light: #ffffff;
    --text-muted: var(--sm-muted);
    --surface: var(--sm-surface);
    --bg-warm: var(--sm-canvas);
    --bg-light: var(--sm-surface);
    --border-color: var(--sm-line);
    --border-radius-lg: 16px;
    --border-radius-md: 12px;
    --border-radius-sm: 8px;
    --transition-smooth: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --shadow-sm: 0 2px 4px rgba(44, 74, 62, 0.05);
    --shadow-md: 0 4px 12px rgba(44, 74, 62, 0.08);
    --shadow-lg: 0 8px 24px rgba(44, 74, 62, 0.12);
}

body.dark-theme {
    --sm-canvas: #0b1411;
    --sm-surface: #121e19;
    --sm-surface-soft: #172720;
    --sm-ink: #eef3ef;
    --sm-muted: #a9b5ae;
    --sm-line: #2d4037;
    --sm-green: #91c5ad;
    --sm-green-soft: #17372d;
    --sm-purple: #c0a8dc;
    --sm-purple-soft: #302a3c;
    --sm-coral: #e28d82;
    --sm-coral-soft: #3c2928;
    --sm-slate: #9bb8c4;
    --sm-slate-soft: #23343b;

    --primary: var(--sm-green);
    --primary-light: var(--sm-green-soft);
    --accent: var(--sm-purple);
    --accent-light: var(--sm-purple-soft);
    --gold: var(--sm-coral);
    --navy: var(--sm-ink);
    --text-dark: var(--sm-ink);
    --text-light: #0b1411;
    --text-muted: var(--sm-muted);
    --surface: var(--sm-surface);
    --bg-warm: var(--sm-canvas);
    --bg-light: var(--sm-surface);
    --border-color: var(--sm-line);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
}

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

body {
    background-color: #e8dece;
    color: var(--text-dark);
    font-family: 'Inter', -apple-system, sans-serif;
    line-height: 1.5;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 100vh;
    transition: var(--transition-smooth);
    overflow-x: hidden;
}

/* App Mockup Wrapper (Strictly Mobile Width) */
.app-container {
    width: 100%;
    max-width: 430px;
    overflow-x: hidden;
    background-color: var(--bg-warm);
    min-height: 100vh;
    padding: 22px 16px 104px 16px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.08);
}

/* Header & Controls */
header {
    text-align: left;
    padding-bottom: 5px;
    margin-top: 8px;
}

.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.theme-toggle, .admin-toggle-btn {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-dark);
    padding: 5px 7px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 7px;
    transition: var(--transition-smooth);
}

.theme-moon {
    color: var(--primary);
    font-size: 1.05rem;
    line-height: 1;
}

.theme-split {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: linear-gradient(90deg, #111 0 50%, #fff 50% 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25);
}

.theme-toggle:hover, .admin-toggle-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.brand-subtitle {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent);
    font-weight: 700;
}

header h1 {
    font-family: 'Inter', -apple-system, sans-serif;
    font-weight: 800;
    font-size: 1.35rem;
    color: var(--navy);
    margin: 2px 0;
    line-height: 1.2;
}

.brand-desc {
    color: var(--text-muted);
    font-size: 0.8rem;
    max-width: 320px;
    margin: 0;
}

/* Fixed Bottom Navigation (Mobile Native Feeling) */
.bottom-nav {
    position: fixed;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: min(430px, calc(100% - 24px));
    max-width: 430px;
    height: 72px;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    display: flex;
    justify-content: flex-start;
    align-items: stretch; /* Stretch items to full height for centering */
    z-index: 9999;
    box-shadow: 0 16px 44px rgba(22, 33, 63, 0.16);
    padding: 8px;
    overflow-x: auto;
    scrollbar-width: none;
}

.bottom-nav::-webkit-scrollbar {
    display: none;
}

.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--text-muted);
    font-size: 0.66rem;
    font-weight: 700;
    cursor: pointer;
    flex: 0 0 64px;
    height: 100%;
    border-radius: 999px;
    border: 0;
    background: transparent;
    padding: 0;
    transition: var(--transition-smooth);
}

body.dark-theme .bottom-nav {
    background: #111b17;
    border-color: #3b4c42;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
}

body.dark-theme .bottom-nav-item {
    color: #d9e3dc;
}

body.dark-theme .bottom-nav-item.active {
    background: var(--primary);
    color: #0f1412;
}

body.dark-theme .bottom-nav-item:not(.active):hover {
    background: #1d2a24;
    color: #ffffff;
}

.section-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.floating-plus-btn {
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}

.home-insight-card,
.home-continue-section,
.empty-state-card {
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 14px;
    margin-bottom: 14px;
    box-shadow: var(--shadow-sm);
}

.home-insight-card {
    border-left: 4px solid var(--accent);
}

.home-insight-card span {
    display: block;
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.home-insight-card strong,
.empty-state-card strong {
    color: var(--primary);
    font-size: 0.95rem;
}

.empty-state-card p {
    margin: 6px 0 0;
    color: var(--text-muted);
    font-size: 0.84rem;
    line-height: 1.4;
}

.home-continue-row {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
}

.home-continue-row::-webkit-scrollbar {
    display: none;
}

.home-continue-card {
    flex: 0 0 160px;
    min-height: 74px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-warm);
    color: var(--text-dark);
    text-align: left;
    padding: 12px;
    cursor: pointer;
}

.home-continue-card strong,
.home-continue-card small {
    display: block;
}

.home-continue-card small {
    margin-top: 5px;
    color: var(--text-muted);
    font-size: 0.76rem;
    line-height: 1.3;
}

.smart-muted-left {
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.35;
    margin: 5px 0 12px;
}

.menu-customizer-card {
    padding: 14px;
    margin-bottom: 14px;
}

.menu-customizer-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.menu-customizer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-dark);
    background: var(--bg-warm);
}

.nuh-game-frame-wrap {
    width: 100%;
    height: min(72vh, 680px);
    min-height: 520px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    background: #77a47b;
}

.nuh-game-frame {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.bottom-nav-item.active {
    color: #fff;
    background: var(--accent);
    box-shadow: 0 8px 18px rgba(90, 25, 168, 0.24);
}

body.dark-theme .bottom-nav-item.active {
    background: var(--primary);
    color: #0f1412;
    box-shadow: 0 8px 18px rgba(127, 179, 157, 0.22);
}

.bottom-nav-item svg {
    width: 21px;
    height: 21px;
    display: block; /* Removes baseline spacing mismatch */
    margin: 0 auto;
}

.bottom-menu-symbol {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    line-height: 1;
    font-size: 1.18rem;
}

.dua-hands-symbol {
    filter: saturate(1.05);
}

.favorite-star-symbol {
    color: #f2bd2f;
    text-shadow: 0 1px 0 #8c6d1a;
    font-size: 1.35rem;
}

.story-book-icon {
    width: 24px;
    height: 24px;
}

.smart-hero {
    display: grid;
    gap: 12px;
    padding: 16px;
    margin-bottom: 12px;
    color: #fff;
    background:
        radial-gradient(circle at 88% 18%, rgba(213, 168, 71, 0.34), transparent 9rem),
        linear-gradient(145deg, var(--navy), var(--primary));
    border-radius: 18px;
    box-shadow: 0 14px 28px rgba(22, 33, 63, 0.14);
    overflow: hidden;
}

.smart-eyebrow {
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.smart-hero h2 {
    margin: 0 0 6px;
    max-width: 320px;
    font-size: clamp(1.25rem, 5vw, 1.55rem);
    line-height: 1.05;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.smart-hero p {
    max-width: 300px;
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.86rem;
    overflow-wrap: anywhere;
}

.smart-hero-action {
    width: 100%;
    min-height: 42px;
    color: var(--navy);
    background: linear-gradient(180deg, #ffe7a6, var(--gold));
    border: 0;
    border-radius: 14px;
    font-weight: 900;
}

.daily-message-card {
    display: grid;
    gap: 5px;
    width: 100%;
    margin-bottom: 12px;
    padding: 14px 15px;
    text-align: left;
    color: var(--text-dark);
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
}

.daily-message-card span {
    color: var(--accent);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.daily-message-card strong {
    font-size: 0.98rem;
    line-height: 1.22;
}

.daily-message-card small {
    color: var(--text-muted);
    font-size: 0.78rem;
}

.home-icon-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.home-icon-grid button {
    display: grid;
    place-items: center;
    gap: 5px;
    min-height: 76px;
    padding: 10px 6px;
    color: var(--primary);
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    font-size: 1.25rem;
    font-weight: 900;
    position: relative;
}

.home-icon-grid button::before {
    content: none;
}

.home-icon-grid button > * {
    position: relative;
    z-index: 1;
}

.home-menu-icon {
    display: grid;
    place-items: center;
    width: auto;
    height: auto;
    color: var(--primary);
    font-size: 1.28rem;
    line-height: 1;
}

.home-icon-grid span {
    color: var(--text-dark);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.15;
    text-align: center;
}

.tasbih-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 24px;
    color: var(--primary);
}

.tasbih-icon i {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: currentColor;
    opacity: 0.72;
}

.tasbih-icon b {
    display: inline-grid;
    place-items: center;
    min-width: 24px;
    height: 24px;
    margin-left: 2px;
    color: #fff;
    background: var(--accent);
    border-radius: 999px;
    font-size: 0.68rem;
    line-height: 1;
}

.home-path-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.home-path-row button {
    display: grid;
    gap: 5px;
    min-height: 92px;
    padding: 13px;
    text-align: left;
    color: var(--text-dark);
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 16px;
}

.home-path-row strong {
    font-size: 0.92rem;
    line-height: 1.12;
}

.home-path-row span {
    color: var(--text-muted);
    font-size: 0.76rem;
    line-height: 1.25;
}

.home-prayer-priority {
    margin-bottom: 16px;
}

.smart-focus-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.smart-focus-card {
    min-width: 0;
    min-height: 142px;
    padding: 16px;
    text-align: left;
    color: var(--text-dark);
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
}

.smart-focus-card.primary {
    grid-column: 1 / -1;
    min-height: 128px;
    color: #fff;
    background:
        radial-gradient(circle at 90% 16%, rgba(255, 255, 255, 0.2), transparent 8rem),
        linear-gradient(135deg, var(--accent), #2f6d5c);
    border: 0;
}

.smart-focus-card span {
    display: inline-flex;
    margin-bottom: 12px;
    color: inherit;
    opacity: 0.72;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.smart-focus-card strong {
    display: block;
    margin-bottom: 6px;
    font-size: 1.05rem;
    line-height: 1.12;
    overflow-wrap: anywhere;
}

.smart-focus-card small {
    display: block;
    color: inherit;
    opacity: 0.68;
    font-size: 0.8rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.compact-home-card {
    padding: 14px;
    margin-bottom: 14px;
}

.smart-section-title {
    margin: 22px 0 10px;
    color: var(--navy);
    font-size: 1rem;
    font-weight: 900;
}

.smart-continue-list,
.more-list {
    display: grid;
    gap: 10px;
}

.smart-continue-list button,
.more-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    width: 100%;
    padding: 15px 16px;
    text-align: left;
    color: var(--text-dark);
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
}

.smart-continue-list strong,
.more-row strong {
    font-size: 0.94rem;
}

.smart-continue-list span,
.more-row small,
.smart-muted-center {
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.35;
}

.smart-muted-center {
    margin: 0 0 18px;
    text-align: center;
}

.more-row {
    grid-template-columns: 48px 1fr;
    align-items: center;
}

.more-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    color: #fff;
    background: var(--accent);
    border-radius: 14px;
    font-weight: 900;
    font-size: 1.05rem;
}

/* Search Box */
.search-container {
    background: var(--bg-light);
    border-radius: var(--border-radius-lg);
    padding: 16px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.search-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
}

.search-wrapper {
    position: relative;
    display: flex;
    width: 100%;
}

.search-input {
    width: 100%;
    min-height: 64px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 12px 42px 12px 12px;
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--text-dark);
    background: var(--bg-warm);
    resize: none;
    outline: none;
    transition: var(--transition-smooth);
}

.search-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(44, 74, 62, 0.1);
}

.search-icon-btn {
    position: absolute;
    right: 8px;
    bottom: 8px;
    background: var(--primary);
    color: white;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: var(--border-radius-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-smooth);
}

.search-icon-btn:hover {
    background: var(--accent);
}

.search-icon-btn svg {
    width: 18px;
    height: 18px;
}

.quick-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tag {
    background: var(--primary-light);
    color: var(--primary);
    padding: 5px 10px;
    border-radius: var(--border-radius-sm);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.tag:hover {
    background: var(--accent-light);
    color: var(--accent);
}

/* Horizontal chips categories (Native scroll) */
.category-nav {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 6px;
    border-bottom: 1.5px solid var(--border-color);
    scrollbar-width: none; /* Hide scrollbar Firefox */
}

.category-nav::-webkit-scrollbar {
    display: none; /* Hide scrollbar Chrome/Safari */
}

.nav-tab {
    white-space: nowrap;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    border-radius: var(--border-radius-sm);
    transition: var(--transition-smooth);
}

.nav-tab.active {
    background: var(--primary);
    color: white;
}

.category-scroll-hint {
    display: inline-block;
    margin-left: 4px;
    font-size: 1rem;
    line-height: .7;
    opacity: .7;
}

/* Results section and Single Column layout */
.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}

.results-header.is-empty {
    display: none;
}

.results-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.15rem;
    color: var(--primary);
    font-weight: 700;
}

.reset-btn {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    padding: 5px 10px;
    border-radius: var(--border-radius-sm);
    font-size: 0.7rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: var(--transition-smooth);
}

.reset-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.analysis-summary-banner {
    background: var(--primary-light);
    border: 1px solid var(--primary);
    border-radius: var(--border-radius-md);
    padding: 12px;
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    animation: fadeIn 0.3s ease-out;
}

.analysis-summary-banner h4 {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--primary);
    font-weight: 800;
}

.analysis-summary-banner p {
    font-size: 0.82rem;
    color: var(--text-dark);
}

/* Single Column Results Flow */
.results-layout {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 12px;
}

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

/* Results Content Subtabs Bar */
.result-tabs-container {
    display: flex;
    gap: 2px;
    background: var(--primary-light);
    padding: 3px;
    border-radius: var(--border-radius-md);
}

.result-subtab {
    flex: 1;
    text-align: center;
    padding: 8px 4px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--primary);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: var(--transition-smooth);
}

.result-subtab.active {
    background: var(--bg-light);
    box-shadow: var(--shadow-sm);
    color: var(--primary);
}

/* Collapsible / Floating Spiritual Plan in column */
.spiritual-plan-container {
    background: var(--accent-light);
    border-radius: var(--border-radius-lg);
    padding: 16px;
    border: 1px solid var(--accent);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.plan-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.05rem;
    color: var(--primary);
    font-weight: 700;
    border-bottom: 1.5px solid var(--accent);
    padding-bottom: 4px;
}

.plan-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.plan-subtitle {
    font-size: 0.72rem;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: 0.5px;
}

.plan-desc {
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--text-dark);
}

.plan-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-left: 14px;
}

.plan-list-item {
    font-size: 0.82rem;
    color: var(--text-dark);
}

/* Results Content Container Cards */
.results-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Premium Card Designs */
.card {
    background: var(--bg-light);
    border-radius: var(--border-radius-lg);
    padding: 16px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: var(--transition-smooth);
    animation: slideUp 0.25s ease-out;
}

.card:hover {
    box-shadow: var(--shadow-md);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px;
}

.card-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 180px;
    min-width: 0;
}

.card-category {
    font-size: 0.68rem;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--accent);
}

.card-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.card-source-badge {
    font-size: 0.65rem;
    background: var(--primary-light);
    color: var(--primary);
    padding: 3px 8px;
    border-radius: 20px;
    font-weight: 600;
    max-width: 100%;
    white-space: normal;
    text-align: center;
    overflow-wrap: anywhere;
}

.card-intro {
    font-size: 0.82rem;
    color: var(--text-muted);
    font-style: italic;
    line-height: 1.4;
}

/* Arabic Text Box */
.arabic-container {
    background: var(--bg-warm);
    border-radius: var(--border-radius-md);
    padding: 14px;
    text-align: right;
    border: 1px solid var(--border-color);
    direction: rtl;
}

.arabic-text {
    font-family: 'Amiri', Georgia, serif;
    font-size: 1.7rem;
    line-height: 1.6;
    color: var(--primary);
    word-wrap: break-word;
}

/* Sub-labels and text styling */
.text-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--accent);
    display: block;
    margin-bottom: 2px;
}

.translit-text {
    font-size: 0.85rem;
    color: var(--text-dark);
    line-height: 1.4;
}

.translation-text {
    font-size: 0.85rem;
    color: var(--text-dark);
    line-height: 1.4;
    font-weight: 500;
}

/* Explanation Block */
.explanation-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--bg-warm);
    border-radius: var(--border-radius-md);
    padding: 12px;
    border: 1px solid var(--border-color);
}

.exp-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.exp-content {
    font-size: 0.8rem;
    color: var(--text-dark);
    line-height: 1.4;
}

/* Nicolas Yassin Message Box */
.yassin-box {
    background: var(--primary-light);
    border-left: 3.5px solid var(--primary);
    border-radius: var(--border-radius-md);
    padding: 12px;
}

.yassin-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.yassin-header svg {
    width: 14px;
    height: 14px;
    color: var(--primary);
}

.yassin-title {
    font-size: 0.65rem;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--primary);
}

.yassin-content {
    font-size: 0.82rem;
    color: var(--primary);
    font-style: italic;
    line-height: 1.45;
}

/* Recommended Names of Allah Grid inside cards */
.names-allah-section {
    background: #faf7ed;
    border-left: 3px solid var(--accent);
    border-radius: var(--border-radius-md);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 2px;
}

body.dark-theme .names-allah-section {
    background: #2c281e;
}

.names-title {
    font-size: 0.68rem;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 1px;
    color: #8c6d1a;
}

body.dark-theme .names-title {
    color: var(--accent);
}

.names-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.name-card {
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 8px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.name-ar {
    font-family: 'Amiri', Georgia, serif;
    font-size: 1.15rem;
    color: var(--primary);
    font-weight: 700;
    order: 2;
}

.name-info {
    display: flex;
    flex-direction: column;
    order: 1;
}

.name-tr {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-dark);
}

.name-it {
    font-size: 0.68rem;
    color: var(--text-muted);
}

/* copy buttons */
.copy-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.quran-verse-actions {
    align-items: center;
    border-top: 1px dashed var(--border-color);
    justify-content: flex-end;
    margin-top: 10px;
    padding-top: 8px;
}

.quran-cta-btn {
    align-items: center;
    background: var(--bg-warm);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--primary);
    cursor: pointer;
    display: inline-flex;
    font-size: 0.74rem;
    font-weight: 900;
    min-height: 34px;
    padding: 0 11px;
}

.quran-cta-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.quran-cta-btn:disabled {
    background: transparent;
    color: var(--text-muted);
    cursor: default;
    opacity: 0.72;
}

.action-icon-btn {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    color: var(--primary);
    background: var(--primary-light);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 900;
    cursor: pointer;
}

.action-icon-btn.active {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
}

.quran-tafsir-icon-btn {
    font-family: Georgia, serif;
    font-size: 1.05rem;
    font-style: italic;
}
.quran-reading-point-btn { font-size: 1.22rem; border-width: 2px; }
.quran-reading-point-btn.active { color: #5d4100; background: #f0c24b; border-color: #a87508; }

.show-more-results,
.routine-swap-btn,
.routine-quran-btn {
    width: 100%;
    min-height: 42px;
    margin-top: 10px;
    color: var(--primary);
    background: var(--primary-light);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    font-weight: 900;
    cursor: pointer;
}

.routine-swap-btn,
.routine-quran-btn {
    margin-top: 12px;
    text-align: center;
}

.routine-quran-btn {
    color: #fff;
    background: var(--primary);
    border-color: var(--primary);
}

.routine-recitation-panel {
    max-height: 280px;
    overflow-y: auto;
    padding-right: 3px;
    overscroll-behavior: contain;
}

.routine-recitation-panel .translit-text,
.routine-recitation-panel .translation-text {
    overflow-wrap: anywhere;
}

.routine-alt-strip {
    grid-template-columns: 34px minmax(0, 1fr) 34px;
    align-items: stretch;
    gap: 6px;
    margin-top: 10px;
}

.routine-alt-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(190px, 78%);
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 4px;
}

.routine-alt-card {
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-height: 150px;
    padding: 12px;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
}

.routine-alt-card h4 {
    margin: 0;
    color: var(--primary);
    font-family: 'Playfair Display', serif;
    font-size: 0.94rem;
    line-height: 1.18;
    overflow-wrap: anywhere;
}

.routine-alt-card p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.routine-alt-actions {
    margin-top: auto;
    padding-top: 4px;
}

.routine-alt-arrow {
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--primary);
    background: var(--primary-light);
    font-size: 1.3rem;
    font-weight: 900;
    cursor: pointer;
}

.kids-available-note {
    margin: 12px 0 0;
    color: var(--text-muted);
    font-size: 0.8rem;
    text-align: center;
}

.action-btn {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    padding: 6px 10px;
    border-radius: var(--border-radius-sm);
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: var(--transition-smooth);
}

.action-btn:hover, .action-btn.active {
    border-color: var(--primary);
    color: var(--primary);
    background-color: var(--primary-light);
}

/* Dhikr Counter Widget */
.counter-widget {
    background: var(--bg-light);
    border-radius: var(--border-radius-lg);
    padding: 16px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.counter-circle {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    border: 5px solid var(--primary-light);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    user-select: none;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-smooth);
}

.counter-circle:active {
    transform: scale(0.96);
    border-color: var(--accent);
}

.counter-number {
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--primary);
}

.counter-target-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.counter-controls {
    display: flex;
    gap: 10px;
    width: 100%;
}

.counter-btn {
    flex: 1;
    background: none;
    border: 1px solid var(--border-color);
    padding: 8px;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.78rem;
    transition: var(--transition-smooth);
}

.counter-btn:hover {
    border-color: var(--primary);
    background: var(--primary-light);
    color: var(--primary);
}

.counter-select {
    width: 100%;
    padding: 8px;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-warm);
    color: var(--text-dark);
    font-size: 0.85rem;
}

/* Fallback Warning Box */
.fallback-message {
    background: var(--accent-light);
    border-left: 3.5px solid var(--accent);
    border-radius: var(--border-radius-md);
    padding: 12px;
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--text-dark);
}

/* Safety Warning Full-Screen Modal Overlay */
.safety-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(44, 74, 62, 0.95);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px;
}

.safety-modal {
    background: var(--bg-light);
    border-radius: var(--border-radius-lg);
    max-width: 420px;
    width: 100%;
    padding: 20px;
    box-shadow: var(--shadow-lg);
    border: 2px solid var(--accent);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.safety-header {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #b33939;
}

.safety-header svg {
    width: 24px;
    height: 24px;
}

.safety-header h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.15rem;
    font-weight: 700;
}

.safety-desc {
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--text-dark);
}

.safety-contacts {
    background: var(--primary-light);
    border-radius: var(--border-radius-md);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.contact-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.82rem;
    font-weight: 700;
}

.contact-num {
    color: var(--primary);
    font-size: 0.95rem;
}

.safety-footer {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-style: italic;
    border-top: 1px solid var(--border-color);
    padding-top: 10px;
    text-align: center;
}

.safety-close-btn {
    background: var(--primary);
    color: white;
    padding: 10px;
    border-radius: var(--border-radius-sm);
    border: none;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.85rem;
    text-align: center;
    transition: var(--transition-smooth);
}

.safety-close-btn:hover {
    background: var(--accent);
}

.quran-ref-overlay {
    position: fixed;
    inset: 0;
    z-index: 10020;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    background: rgba(22, 33, 63, 0.62);
    backdrop-filter: blur(4px);
}

.quran-ref-modal {
    width: min(100%, 430px);
    max-height: min(78vh, 660px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    color: var(--text-dark);
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    box-shadow: var(--shadow-lg);
}

.quran-ref-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 8px;
}

.quran-ref-modal-header h3 {
    margin: 2px 0 0;
    color: var(--primary);
    font-family: 'Playfair Display', serif;
    font-size: 1.05rem;
    line-height: 1.2;
}

.quran-ref-close {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--bg-warm);
    color: var(--text-dark);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
}

.quran-ref-modal-body {
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 3px;
}

.quran-ref-modal-verse {
    padding: 10px 0;
    border-bottom: 1px dashed var(--border-color);
}

.quran-ref-modal-verse span {
    display: inline-flex;
    margin-bottom: 5px;
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 900;
}

.quran-ref-modal-verse p,
.quran-ref-modal-empty {
    margin: 0;
    color: var(--text-dark);
    font-size: 0.9rem;
    line-height: 1.48;
}

.quran-ref-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px solid var(--border-color);
    padding-top: 10px;
}

#view-prophets .quick-tags {
    display: none !important;
}

/* Admin Panel */
.admin-panel {
    background: var(--bg-light);
    border-radius: var(--border-radius-lg);
    padding: 16px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

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

.admin-actions {
    display: flex;
    gap: 8px;
}

.admin-textarea {
    width: 100%;
    min-height: 180px;
    font-family: monospace;
    font-size: 0.72rem;
    padding: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-warm);
    color: var(--text-dark);
}

/* Footer style */
footer.app-footer {
    text-align: center;
    padding: 24px 16px;
    color: var(--text-muted);
    font-size: 0.75rem;
    border-top: 1px solid var(--border-color);
    background: var(--bg-warm);
    margin-top: auto;
}

.footer-logo {
    font-family: 'Playfair Display', serif;
    font-weight: 800;
    color: var(--primary);
    font-size: 1rem;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

/* Routines View styling (Single column layout) */
.routines-view-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.routine-box {
    background: var(--bg-light);
    border-radius: var(--border-radius-md);
    padding: 14px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.routine-box-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1.5px dashed var(--border-color);
    padding-bottom: 6px;
    margin-bottom: 10px;
}

.routine-box-title {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--primary);
}

.routine-checklist {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.routine-item {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 0.82rem;
}

.routine-item input[type="checkbox"] {
    margin-top: 2px;
    cursor: pointer;
}

.routine-standard-head {
    background: var(--primary-light);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 12px 14px;
    margin-bottom: 12px;
}

.routine-standard-head p {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 0.84rem;
}

.routine-standard-stack,
.custom-routine-stack {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.custom-routine-stack {
    margin-bottom: 18px;
}

.routine-custom-menu {
    width: 100%;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 12px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.routine-custom-menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.routine-custom-menu-head strong {
    display: block;
    color: var(--primary);
    font-size: 1rem;
}

.routine-custom-card {
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-warm);
    color: var(--text-dark);
    padding: 11px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    cursor: pointer;
    font-weight: 800;
}

.routine-custom-card small,
.routine-custom-empty {
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.routine-day-card {
    background: var(--bg-light);
    border: 1.5px solid var(--border-color);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.routine-day-card:first-child {
    border-color: var(--primary);
}

.routine-day-card.custom {
    border-left: 4px solid var(--accent);
}

.routine-day-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border-color);
}

.routine-day-badge {
    border-radius: 999px;
    background: #f5f1e7;
    color: var(--primary);
    font-size: 0.76rem;
    font-weight: 900;
    padding: 5px 12px;
    white-space: nowrap;
}

body.dark-theme .routine-day-badge {
    background: #24342c;
    color: var(--primary);
}

.routine-day-title-block {
    min-width: 0;
}

.routine-day-title-block h3 {
    color: var(--primary);
    font-size: 1.12rem;
    line-height: 1.15;
    margin: 0;
}

.routine-day-title-block p {
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 800;
    margin: 2px 0 0;
}

.routine-day-edit {
    width: 46px;
    height: 46px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    background: var(--bg-light);
    color: var(--primary);
    font-size: 1.1rem;
    font-weight: 900;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}

.routine-day-items {
    display: flex;
    flex-direction: column;
}

.routine-complete-toast {
    position: fixed;
    left: 50%;
    bottom: 96px;
    z-index: 1000;
    width: min(320px, calc(100vw - 36px));
    background: var(--primary);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-lg);
    color: white;
    opacity: 0;
    pointer-events: none;
    padding: 12px 14px;
    transform: translate(-50%, 12px);
    transition: opacity 180ms ease, transform 180ms ease;
}

.routine-complete-toast.show {
    opacity: 1;
    transform: translate(-50%, 0);
}

.routine-complete-toast strong {
    display: block;
    font-size: 0.95rem;
    margin-bottom: 2px;
}

.routine-complete-toast span {
    color: rgba(255,255,255,0.88);
    font-size: 0.84rem;
    font-weight: 700;
}

.quran-action-toast {
    position: fixed;
    left: 50%;
    bottom: 96px;
    z-index: 1000;
    width: min(320px, calc(100vw - 36px));
    background: var(--primary);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-lg);
    color: white;
    opacity: 0;
    pointer-events: none;
    padding: 12px 14px;
    transform: translate(-50%, 12px);
    transition: opacity 180ms ease, transform 180ms ease;
}

.quran-action-toast.show {
    opacity: 1;
    transform: translate(-50%, 0);
}

.quran-action-toast strong {
    display: block;
    font-size: 0.95rem;
    margin-bottom: 2px;
}

.quran-action-toast span {
    color: rgba(255,255,255,0.88);
    font-size: 0.84rem;
    font-weight: 700;
}

.routine-row-wrap + .routine-row-wrap {
    border-top: 1px solid var(--border-color);
}

.routine-row {
    min-height: 72px;
    padding: 13px 18px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.routine-empty-row {
    color: var(--text-muted);
    font-size: 0.86rem;
}

.routine-check-label {
    display: grid;
    grid-template-columns: 26px 1fr;
    align-items: center;
    gap: 10px;
    min-width: 0;
    cursor: pointer;
}

.routine-check-label input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.routine-check-square {
    width: 24px;
    height: 24px;
    border: 2px solid #8f928c;
    border-radius: 4px;
    background: var(--bg-light);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.routine-check-label input:checked + .routine-check-square {
    background: var(--primary);
    border-color: var(--primary);
}

.routine-check-label input:checked + .routine-check-square::after {
    content: "";
    width: 6px;
    height: 11px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.routine-row-title {
    font-size: 0.96rem;
    line-height: 1.25;
    font-weight: 900;
    color: var(--text-dark);
    min-width: 0;
}

.routine-row-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.routine-icon-btn,
.routine-info-btn {
    min-width: 34px;
    min-height: 34px;
    border: none;
    border-radius: var(--border-radius-sm);
    background: transparent;
    color: #8c6d1a;
    cursor: pointer;
    font-weight: 900;
}

.routine-icon-btn {
    border: 1px solid var(--border-color);
    background: var(--bg-warm);
}

.routine-info-btn {
    font-size: 0.83rem;
}

.routine-details-panel {
    border-top: 1px dashed var(--border-color);
    padding: 14px 18px 16px;
    background: var(--bg-warm);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.routine-details-panel p {
    font-size: 0.86rem;
    color: var(--text-dark);
    line-height: 1.45;
    margin: 4px 0 0;
}

.routine-recitation-panel {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.routine-swap-btn,
.routine-quran-btn {
    border: none;
    border-radius: var(--border-radius-sm);
    padding: 10px 12px;
    font-size: 0.82rem;
    font-weight: 900;
    cursor: pointer;
}

.routine-swap-btn {
    background: var(--accent-light);
    color: var(--accent);
}

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

.routine-builder-overlay {
    position: fixed;
    inset: 0;
    z-index: 20000;
    background: rgba(17, 24, 21, 0.46);
    display: none;
    align-items: flex-end;
    justify-content: center;
    padding: 14px;
}

.routine-builder-modal {
    width: min(430px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 16px;
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.routine-builder-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
}

.routine-builder-tabs .nav-tab {
    white-space: nowrap;
}

.routine-builder-choices,
.routine-builder-selected {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.routine-builder-choices {
    max-height: 240px;
    overflow-y: auto;
}

.routine-choice-row,
.routine-selected-row {
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-warm);
    color: var(--text-dark);
    padding: 10px 11px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    text-align: left;
}

.routine-choice-row.active {
    border-color: var(--primary);
    background: var(--primary-light);
}

.routine-choice-row span,
.routine-selected-row span {
    font-size: 0.86rem;
    font-weight: 800;
    line-height: 1.3;
}

.routine-choice-row small {
    color: var(--text-muted);
    font-weight: 800;
}

.routine-selected-row button {
    border: none;
    background: var(--primary);
    color: #fff;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    cursor: pointer;
    font-size: 1.1rem;
}

.routine-builder-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.danger-btn {
    border: 1px solid #b84a4a;
    background: #fff1f1;
    color: #9b2d2d;
    border-radius: var(--border-radius-sm);
    padding: 10px 12px;
    font-weight: 900;
    cursor: pointer;
}

body.dark-theme .danger-btn {
    background: #331c1c;
    color: #ffb3b3;
}

.ebook-reader-card,
.sisters-card,
.dua-guide-card {
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 14px;
    box-shadow: var(--shadow-sm);
}

.ebook-progress-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
    margin: 10px 0;
}

.ebook-frame-wrap {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    background: #fff;
    height: 68vh;
}

.ebook-frame-wrap iframe {
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
}

body.reader-open {
    overflow: hidden;
}

#ebook-reader-container {
    position: fixed;
    inset: 0;
    z-index: 30000;
    background: #efe3d2;
    display: none;
    flex-direction: column;
}

.ebook-fullscreen-reader {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
    background: #efe3d2;
}

.ebook-reader-topbar,
.ebook-reader-footer {
    background: var(--bg-light);
    border-color: var(--border-color);
    display: grid;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    box-shadow: var(--shadow-sm);
}

.ebook-reader-topbar {
    grid-template-columns: auto 1fr auto;
    border-bottom: 1px solid var(--border-color);
}

.ebook-reader-footer {
    grid-template-columns: auto 1fr auto;
    border-top: 1px solid var(--border-color);
}

.ebook-reader-title {
    min-width: 0;
    text-align: center;
}

.ebook-reader-title span,
.ebook-reader-footer label {
    display: block;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 800;
}

.ebook-reader-title strong {
    display: block;
    color: var(--primary);
    font-size: 0.9rem;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ebook-back-btn,
.ebook-bookmark-btn,
.ebook-load-btn {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--primary);
    color: #fff;
    min-height: 38px;
    padding: 8px 11px;
    font-size: 0.78rem;
    font-weight: 900;
    cursor: pointer;
}

.ebook-bookmark-btn,
.ebook-load-btn {
    background: var(--accent);
}

.ebook-book-stage {
    min-height: 0;
    padding: 10px;
    display: flex;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.ebook-book-frame {
    width: min(100%, 760px);
    height: 100%;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    background: #fff;
    box-shadow: 0 12px 30px rgba(43, 34, 24, 0.16);
}

.ebook-reader-footer input[type="range"] {
    width: 100%;
    accent-color: var(--primary);
}

.ebook-page-btn {
    position: absolute;
    z-index: 2;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 48px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    color: var(--primary);
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}
.ebook-page-btn:hover { background: var(--surface); }
.ebook-page-prev { left: 16px; }
.ebook-page-next { right: 16px; }
.ebook-page-label { color: var(--text-muted); font-size: .76rem; font-weight: 800; white-space: nowrap; }

.quran-reader-settings-btn {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 34px;
    height: 34px;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: var(--surface);
    color: var(--primary);
    cursor: pointer;
}
.quran-reader-settings {
    position: absolute;
    z-index: 4;
    top: 50px;
    right: 12px;
    width: min(260px, calc(100% - 24px));
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: var(--shadow-md);
}
.quran-reader-settings label { display: flex; justify-content: space-between; gap: 8px; font-size: .78rem; color: var(--text-dark); }
.quran-reader-settings input { width: 100%; margin-top: 8px; accent-color: var(--primary); }

body.dark-theme #ebook-reader-container,
body.dark-theme .ebook-fullscreen-reader {
    background: #0f1412;
}

.dua-guide-steps {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dua-guide-card {
    border-left: 4px solid var(--primary);
}

.dua-guide-card h3,
.sisters-card h3 {
    color: var(--primary);
    font-size: 1rem;
    margin: 0 0 6px;
}

.dua-guide-card p,
.sisters-card p {
    color: var(--text-dark);
    font-size: 0.86rem;
    line-height: 1.45;
    margin: 0;
}

.sisters-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    margin: 12px 0;
}

.sisters-panel-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sisters-cycle-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    margin-top: 10px;
}

.sisters-cycle-day {
    aspect-ratio: 1;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-warm);
    color: var(--text-dark);
    font-size: 0.78rem;
    font-weight: 800;
}

.sisters-cycle-day.active {
    background: var(--primary);
    color: #fff;
}

.sisters-input-grid {
    display: grid;
    gap: 8px;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Storie dei Profeti & Quiz styles */
.tag.active {
    background: var(--primary) !important;
    color: white !important;
    border-color: var(--primary) !important;
}

#story-reader-overlay {
    backdrop-filter: blur(8px);
    transition: var(--transition-smooth);
}

#story-reader-overlay .card {
    border-radius: var(--border-radius-lg);
    background-color: var(--bg-warm);
    max-height: 90vh;
    overflow-y: auto;
    animation: slideUp 0.3s ease-out;
}

#quiz-question-box button {
    transition: var(--transition-smooth);
    border: 1.5px solid var(--border-color);
}

#quiz-question-box button:not([disabled]):hover {
    border-color: var(--primary);
    background: var(--primary-light);
}

#quiz-question-box button[disabled] {
    cursor: default;
    opacity: 0.9;
}

/* Quran Section Styles */
.quran-ref-card {
    background: var(--primary-light);
    border: 1.5px solid var(--border-color);
    border-left: 4px solid var(--primary);
    border-radius: var(--border-radius-md);
    padding: 12px;
    margin: 8px 0;
    transition: var(--transition-smooth);
    display: block;
    text-align: left;
    text-decoration: none;
    color: inherit;
}

.quran-ref-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(44, 74, 62, 0.08);
}

.quran-ref-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.quran-ref-title {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--primary);
    text-transform: uppercase;
}

.quran-ref-badge {
    background: var(--bg-warm);
    border: 1px solid var(--border-color);
    color: #8c6d1a;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: var(--border-radius-sm);
}

.quran-ref-reason {
    font-size: 0.8rem;
    color: var(--text-dark);
    margin-bottom: 4px;
}

.quran-ref-preview {
    font-size: 0.82rem;
    font-style: italic;
    color: var(--primary);
    margin: 4px 0 0 0;
}

.quran-back-icon,
.quran-bottom-back {
    width: 38px;
    height: 38px;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: var(--bg-light);
    color: var(--primary);
    cursor: pointer;
    font-size: 1.15rem;
    font-weight: 900;
    margin: 0 0 8px;
    box-shadow: var(--shadow-sm);
}

.quran-bottom-back {
    display: block;
    margin: 10px auto 0;
}

.quran-book-header {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border-color) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-bottom: 8px !important;
    padding: 8px 4px 12px !important;
}

.quran-basmala-block {
    margin: 10px 0 12px !important;
    text-align: center;
}

#surah-verses-container.results-container {
    gap: 0;
}

.quran-reading-card {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border-color);
    box-shadow: none;
    padding: 12px 4px 14px;
}

.quran-reading-reference {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 8px;
}

.quran-reading-reference span {
    color: #6a20b8;
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.quran-reading-reference strong {
    background: var(--bg-warm);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 800;
    padding: 3px 8px;
    white-space: nowrap;
}

.quran-fast-scroll-rail {
    position: fixed;
    top: 46%;
    right: max(8px, calc((100vw - 760px) / 2 - 28px));
    z-index: 8;
    display: grid;
    justify-items: center;
    gap: 5px;
    width: 28px;
    padding: 8px 4px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    color: var(--text-muted);
    box-shadow: var(--shadow-sm);
    font-size: .62rem;
    font-weight: 800;
}
.quran-fast-scroll-rail input {
    width: 150px;
    height: 22px;
    margin: 60px -60px;
    accent-color: var(--primary);
    transform: rotate(-90deg);
}
.quran-fast-scroll-rail span:last-child { color: var(--primary); }

.quran-arabic-ayah {
    font-family: 'Amiri', serif;
    font-size: 1.82rem;
    line-height: 1.95;
    color: var(--primary);
    text-align: right;
    padding: 8px 2px;
    margin: 0 0 6px;
    background: transparent;
    border-radius: 0;
}

.quran-transliteration-ayah {
    border: 0;
    border-left: 2px solid var(--accent);
    border-radius: 0;
    background: transparent;
    padding: 2px 0 2px 9px;
    margin: 0 0 7px;
    text-align: left;
}

.quran-transliteration-ayah span {
    display: block;
    color: var(--primary);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.quran-transliteration-ayah p {
    margin: 0;
    color: var(--text-dark);
    font-size: 0.84rem;
    font-style: italic;
    line-height: 1.5;
}

.quran-translation-ayah {
    color: var(--text-dark);
    font-size: 0.96rem;
    line-height: 1.55;
    margin-bottom: 8px;
    text-align: left;
}

.quran-translation-ayah > span {
    display: block;
    color: var(--primary);
    font-size: 0.68rem;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.quran-tafsir-details,
.quran-tafsir-panel,
.assistant-sources-details {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-light);
    margin: 6px 0 8px;
    overflow: hidden;
}

.quran-tafsir-details summary,
.assistant-sources-details summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    color: var(--primary);
    font-size: 0.82rem;
    font-weight: 900;
    padding: 8px 10px;
    list-style-position: inside;
}

.quran-tafsir-details summary span {
    color: var(--primary);
}

.quran-tafsir-details summary small {
    color: #8c6d1a;
    font-size: 0.72rem;
    font-weight: 900;
}

.quran-tafsir-empty {
    border: 1px dashed var(--border-color);
    border-radius: var(--border-radius-sm);
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 700;
    margin: 10px 0 12px;
    padding: 9px 11px;
    text-align: left;
}

.quran-tafsir-note {
    border-top: 1px solid var(--border-color);
    padding: 10px 12px;
    text-align: left;
}

.quran-tafsir-note strong {
    color: #8c6d1a;
    font-size: 0.76rem;
}

.quran-tafsir-note p {
    margin: 5px 0 0;
    color: var(--text-dark);
    font-size: 0.84rem;
    line-height: 1.5;
}

.local-assistant-answer {
    border-left: 4px solid var(--primary);
}

.assistant-main-answer {
    font-size: 0.94rem;
    line-height: 1.55;
}

.assistant-sources-details .assistant-linked-box {
    padding: 0 10px 10px;
}

.assistant-next-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.assistant-linked-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.assistant-source-card {
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--gold);
    border-radius: var(--border-radius-sm);
    background: var(--bg-warm);
    padding: 10px 12px;
}

.assistant-source-card strong {
    color: var(--primary);
    font-size: 0.86rem;
}

.assistant-source-card small {
    display: block;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 800;
    margin-top: 2px;
}

.assistant-source-card p {
    margin: 6px 0 0;
    color: var(--text-dark);
    font-size: 0.82rem;
    line-height: 1.45;
}

.note-ref {
    color: #8c6d1a;
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline dotted;
    padding: 0 2px;
}

.note-ref:hover {
    color: var(--primary);
}

.highlighted-verse {
    animation: pulseGlow 1.5s infinite alternate;
    border: 2px solid var(--accent) !important;
}

@keyframes pulseGlow {
    from { box-shadow: 0 0 4px rgba(140, 109, 26, 0.2); background: var(--primary-light); }
    to { box-shadow: 0 0 16px rgba(140, 109, 26, 0.6); background: var(--accent-light); }
}

.surah-item {
    background: var(--bg-light);
    border: 0;
    border-bottom: 1px solid var(--border-color);
    border-radius: 0;
    padding: 9px 2px;
    margin-bottom: 0;
    cursor: pointer;
    transition: var(--transition-smooth);
    display: grid;
    grid-template-columns: 34px 1fr;
    justify-content: initial;
    align-items: center;
    gap: 10px;
}

.surah-item:hover {
    border-color: var(--primary);
    transform: none;
    box-shadow: none;
}

.surah-item-meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.surah-item-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--primary);
}

.surah-item-sub {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.surah-item-num {
    background: var(--primary-light);
    border: 1px solid var(--border-color);
    color: var(--text-dark);
    font-size: 0.8rem;
    font-weight: 800;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.category-filter-btn {
    border: 1.5px solid var(--border-color);
    background: var(--bg-light);
    color: var(--text-dark);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: var(--transition-smooth);
}

.category-filter-btn.active, .category-filter-btn:hover {
    border-color: var(--primary);
    background: var(--primary-light);
    color: var(--primary);
}

.user-note-area {
    width: 100%;
    min-height: 60px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 8px;
    font-family: inherit;
    font-size: 0.82rem;
    resize: vertical;
    margin-top: 6px;
    background: var(--bg-light);
    color: var(--text-dark);
}

.user-note-area:focus {
    outline: none;
    border-color: var(--primary);
}

.user-note-indicator {
    font-size: 0.72rem;
    color: var(--primary);
    background: var(--primary-light);
    padding: 2px 6px;
    border-radius: var(--border-radius-sm);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
}

/* --- NIK KIDS SECTION STYLES --- */
#view-kids {
    font-family: 'Outfit', 'Inter', system-ui, -apple-system, sans-serif;
}

#view-kids .card {
    border-radius: var(--border-radius-lg);
    background: var(--bg-warm);
    border: 1.5px solid var(--border-color);
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
}

.kids-title {
    font-family: 'Outfit', 'Playfair Display', serif;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--primary);
    margin: 5px 0;
}

.kids-tagline {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.45;
}

/* Animals Grid */
.animals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 16px;
    margin-top: 15px;
}

.animal-card {
    border-radius: 20px !important;
    overflow: hidden;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s, box-shadow 0.2s;
}

.animal-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: var(--shadow-md);
}

.animal-card-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    visibility: visible;
}

/* Kids Animal Sheet details (Vertical Flow) */
@keyframes kidsFadeInUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.kids-index-container::-webkit-scrollbar {
    display: none;
}

.kids-hero-container {
    width: 100%;
    position: relative;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
    animation: kidsFadeInUp 0.4s ease-out forwards;
}

.kids-hero-img {
    width: 100%;
    display: block;
    object-fit: cover;
    max-height: 220px;
}

.kids-names-container {
    text-align: center;
    background: var(--accent-light);
    border-radius: 16px;
    padding: 12px;
    margin-bottom: 20px;
    border: 1.5px solid var(--accent);
}

.kids-name-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--primary);
    margin: 0;
}

.kids-name-ar {
    font-family: 'Amiri', serif;
    font-size: 1.6rem;
    color: var(--accent);
    margin: 5px 0 0 0;
    direction: rtl;
}

.kids-name-en {
    font-size: 0.9rem;
    color: var(--text-muted);
    font-style: italic;
    margin: 3px 0 0 0;
}

.kids-section-box {
    margin-bottom: 20px;
}

.kids-section-box h4 {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--primary);
    border-bottom: 2px solid var(--accent);
    padding-bottom: 6px;
    margin: 0 0 10px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.kids-section-content {
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--text-dark);
}

.kids-badge-img, .kids-sticker-img {
    max-width: 90px;
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    margin: 0 auto;
    display: block;
}

/* Kids list bullet items */
.kids-list {
    padding-left: 18px;
    margin: 8px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kids-list-item {
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--text-dark);
}

.kids-future-box {
    background: var(--bg-warm);
    border: 1.5px dashed var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 15px;
    text-align: center;
    font-size: 0.86rem;
    color: var(--text-muted);
    font-style: italic;
}

@media (prefers-reduced-motion: reduce) {
    .kids-hero-container {
        animation: none !important;
    }
    #kids-completion-overlay *, #kids-completion-overlay {
        animation: none !important;
        transition: none !important;
    }
    html, body {
        scroll-behavior: auto !important;
    }
}

/* ==============================================================
   REFERENCE MATCH · PEARL EDITION
   Dense, illustrated mobile UI matching the selected rendering.
   This final layer intentionally centralizes the visual tuning.
   ============================================================== */
:root {
    --ref-page: #f7f1e8;
    --ref-surface: #fffdf9;
    --ref-surface-2: #fbf7f0;
    --ref-ink: #17372f;
    --ref-muted: #6f7771;
    --ref-line: #e9dfd2;
    --ref-shadow: 0 5px 16px rgba(62, 51, 38, .055);
    --ref-radius: 13px;
    --ref-green: #1d5b4b;
    --ref-purple: #73579a;
    --ref-coral: #ce7069;
    --ref-sand: #b78b54;
}

body:not(.dark-theme) {
    background: #e9e0d4;
}

.app-container {
    padding: 11px 12px 78px;
    gap: 10px;
    background: var(--ref-page);
    box-shadow: 0 0 30px rgba(55, 43, 31, .09);
}

.app-container > header {
    margin: 0;
    padding: 0 2px 3px;
}

.top-bar { margin: 0 0 2px; min-height: 30px; }
.home-toggle-btn { padding: 0 !important; min-width: auto !important; min-height: 30px !important; font-size: .66rem !important; }
.assistant-quick-btn { width: 30px; height: 30px; min-width: 30px; min-height: 30px; padding: 6px; }
.app-container > header h1 { font: 800 1.16rem/1.1 Inter, -apple-system, sans-serif; color: var(--ref-ink); }
.brand-desc { font-size: .68rem; color: var(--ref-muted); }

body:has(#view-routine-hub[style*="display: block"]) .app-container > header,
body:has(#view-impara-hub[style*="display: block"]) .app-container > header,
body:has(#view-vita-hub[style*="display: block"]) .app-container > header,
body:has(#view-profilo-hub[style*="display: block"]) .app-container > header { display: none; }

#view-home[style*="display: block"] {
    display: flex !important;
    flex-direction: column;
    gap: 9px;
}

#view-home[style*="display: block"] .smart-hero { order: 1; }
#view-home[style*="display: block"] .home-prayer-priority { order: 2; }
#view-home[style*="display: block"] .home-continue-section { order: 3; }
#view-home[style*="display: block"] .home-icon-grid { order: 4; }
#view-home[style*="display: block"] .daily-message-card { order: 5; }
#view-home[style*="display: block"] .home-insight-card { order: 6; }
#view-home[style*="display: block"] .home-quiz-card { order: 7; }

.smart-hero {
    min-height: 0;
    margin: 0;
    padding: 12px 11px 10px;
    border: 1px solid var(--ref-line);
    border-radius: var(--ref-radius);
    background: var(--ref-surface);
    box-shadow: var(--ref-shadow);
}
.smart-hero::after { display: none; }
.smart-hero h2 { margin: 0 0 2px; font: 750 .83rem/1.2 Inter, sans-serif; color: var(--ref-ink); }
.smart-hero p { margin: 0; font-size: .58rem; line-height: 1.3; }
.smart-hero-action { display: none; }

.home-need-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
    margin-top: 9px;
}
.home-need-grid button {
    min-width: 0;
    padding: 7px 2px 6px;
    display: grid;
    justify-items: center;
    gap: 4px;
    color: var(--ref-ink);
    border: 0;
    border-radius: 10px;
    background: var(--ref-surface-2);
    font-family: Inter, sans-serif;
}
.home-need-grid span { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; color: var(--ref-green); background: #e6efe8; }
.home-need-grid button:nth-child(2) span { color: var(--ref-purple); background: #eee8f4; }
.home-need-grid button:nth-child(3) span { color: #bb842e; background: #faefd8; }
.home-need-grid button:nth-child(4) span { color: #5d86a5; background: #e8f0f5; }
.home-need-grid .sm-icon { width: 15px; height: 15px; }
.home-need-grid small { overflow: hidden; text-overflow: ellipsis; font-size: .54rem; font-weight: 650; }

.home-prayer-priority { margin: 0; position: relative; }
.home-prayer-priority > .card {
    min-height: 118px;
    padding: 13px 48% 12px 12px !important;
    overflow: hidden;
    color: var(--ref-ink) !important;
    border: 1px solid var(--ref-line) !important;
    border-radius: var(--ref-radius) !important;
    background: var(--ref-surface) !important;
    box-shadow: var(--ref-shadow) !important;
}
.home-prayer-priority > .card::after {
    content: '';
    position: absolute;
    inset: 0 0 0 45%;
    background: url('assets/ui/pearl/prayer-mosque.jpg') center / cover no-repeat;
    pointer-events: none;
}
.home-prayer-priority > .card > * { position: relative; z-index: 1; }
.home-prayer-priority h3 { font-size: 1.2rem !important; color: var(--ref-ink) !important; }
.home-prayer-priority span { color: var(--ref-green) !important; font-size: .87rem !important; }
.home-prayer-priority button { color: var(--ref-green) !important; }

.home-continue-section,
.daily-message-card,
.home-insight-card,
.home-quiz-card,
.home-icon-grid {
    margin: 0;
    border-color: var(--ref-line);
    border-radius: var(--ref-radius);
    background: var(--ref-surface);
    box-shadow: var(--ref-shadow);
}
.home-continue-section { padding: 10px; }
.home-continue-section .routine-box-header { margin-bottom: 6px; }
.home-continue-section .routine-box-title { font: 750 .72rem/1.2 Inter, sans-serif; }
.home-icon-grid { padding: 7px 5px; gap: 3px; }
.home-icon-grid button { padding: 4px 1px; font-size: .54rem; }
.home-menu-icon { width: 29px; height: 29px; border-radius: 9px; }
.daily-message-card, .home-insight-card, .home-quiz-card { padding: 10px 11px; }

.hub-section { padding: 0 0 8px; }
.hub-header {
    display: flex;
    flex-direction: column;
    margin: 0 1px 9px;
    padding: 3px 1px 1px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.hub-header .hub-title { order: 1; margin: 0 0 3px; font: 800 1.24rem/1.1 Inter, sans-serif; letter-spacing: -.025em; color: var(--ref-ink) !important; }
.hub-header .hub-eyebrow { order: 2; font-size: .65rem; font-weight: 450; letter-spacing: 0; text-transform: none; color: var(--ref-muted); }

.hub-group {
    margin: 0 0 9px;
    padding: 9px;
    border: 1px solid var(--ref-line);
    border-radius: var(--ref-radius);
    background: var(--ref-surface);
    box-shadow: var(--ref-shadow);
}
.hub-group-label { margin: 0 0 7px; color: var(--ref-ink); font-size: .61rem; font-weight: 750; letter-spacing: 0; text-transform: none; }
.hub-grid { gap: 6px; }

.hub-card,
.hub-section.hub-routine .hub-card,
.hub-section.hub-impara .hub-card,
.hub-section.hub-vita .hub-card,
.hub-section.hub-profilo .hub-card {
    min-height: 0;
    padding: 8px;
    gap: 4px;
    border: 1px solid #eee6dc;
    border-radius: 10px;
    background: var(--ref-surface-2);
    box-shadow: 0 3px 9px rgba(53, 45, 36, .035);
}
.hub-card .hub-icon { width: 31px; height: 31px; flex-basis: 31px; border-radius: 9px; }
.hub-card .hub-icon .sm-icon { width: 17px; height: 17px; }
.hub-card strong { font-size: .66rem; color: var(--ref-ink); }
.hub-card small { font-size: .54rem; line-height: 1.2; color: var(--ref-muted); }

.hub-routine .hub-group { padding: 9px; }
.hub-routine .hub-grid { gap: 6px; }
.hub-routine .hub-card { min-height: 82px; align-content: start; text-align: center; justify-items: center; padding: 8px 5px; }
.hub-routine .hub-card small { display: none; }
.hub-routine .hub-group:last-child .hub-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.hub-quick-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 6px;
    margin: 0 0 9px;
}
.hub-quick-grid button {
    min-height: 76px;
    padding: 9px 4px 7px;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 6px;
    color: var(--ref-ink);
    border: 1px solid var(--ref-line);
    border-radius: 11px;
    background: var(--ref-surface);
    box-shadow: var(--ref-shadow);
    font-family: Inter, sans-serif;
}
.hub-quick-grid span { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; color: var(--ref-purple); background: #efe9f5; }
.hub-quick-grid button:nth-child(1) span { color: #c56288; background: #f8e9ef; }
.hub-quick-grid button:nth-child(3) span { color: #6774ae; background: #e9eaf6; }
.hub-quick-grid .sm-icon { width: 17px; height: 17px; }
.hub-quick-grid strong { font-size: .6rem; }

.hub-impara .hub-group-stories .hub-grid,
.hub-impara .hub-group-library .hub-grid,
.hub-vita .hub-grid,
.hub-profilo .hub-grid { grid-template-columns: 1fr; }

.hub-impara .hub-group-stories .hub-card,
.hub-impara .hub-group-library .hub-card,
.hub-vita .hub-card,
.hub-profilo .hub-card {
    min-height: 52px;
    display: grid;
    grid-template-columns: 37px minmax(0,1fr) 13px;
    grid-template-rows: auto auto;
    column-gap: 8px;
    row-gap: 1px;
    align-items: center;
    padding: 6px 8px;
}
.hub-story-thumb {
    width: 37px;
    height: 37px;
    grid-row: 1 / 3;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid rgba(23,55,47,.08);
}
.hub-impara-thumb-wrap {
    width: 58px;
    height: 58px;
    max-width: 100%;
    flex: 0 0 58px;
    display: block;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid rgba(23,55,47,.1);
    background: #f7f0e6;
}
.hub-impara-thumb-wrap img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transform-origin: center;
}
.hub-impara-thumb--corano img { transform: scale(1.32); }
.hub-impara-thumb--ebook img { transform: scale(1.30); }
.hub-impara-thumb--perche-islam img { transform: scale(1.28); }
.hub-impara-thumb--manuale img { transform: scale(1.30); }
.hub-impara-thumb--wudu img { transform: scale(1.28); }
.hub-impara-thumb--salah img { transform: scale(1.28); }
.hub-impara .hub-group-library .hub-impara-thumb-wrap {
    grid-row: 1 / 3;
}
.hub-impara .hub-group-stories .hub-card strong,
.hub-impara .hub-group-library .hub-card strong,
.hub-vita .hub-card strong,
.hub-profilo .hub-card strong { grid-column: 2; align-self: end; }
.hub-impara .hub-group-stories .hub-card small,
.hub-impara .hub-group-library .hub-card small,
.hub-vita .hub-card small,
.hub-profilo .hub-card small { grid-column: 2; align-self: start; }
.hub-impara .hub-group-stories .hub-card::after,
.hub-impara .hub-group-library .hub-card::after,
.hub-vita .hub-card::after,
.hub-profilo .hub-card::after {
    content: '›';
    grid-column: 3;
    grid-row: 1 / 3;
    color: var(--ref-muted);
    font-size: 1rem;
}
.hub-impara .hub-group-library .hub-icon,
.hub-vita .hub-icon,
.hub-profilo .hub-icon { grid-row: 1 / 3; }

.hub-vita .hub-group,
.hub-profilo .hub-group { padding: 0; border: 0; background: transparent; box-shadow: none; }
.hub-vita .hub-group-label,
.hub-profilo .hub-group-label { margin-left: 2px; }
.hub-vita .hub-card,
.hub-profilo .hub-card { background: var(--ref-surface); }
.hub-card-soon { opacity: 1; border-style: solid; }

.profile-assistant-card {
    width: 100%;
    min-height: 96px;
    margin: 0 0 10px;
    padding: 13px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    color: var(--ref-ink);
    border: 1px solid #f0dedb;
    border-radius: var(--ref-radius);
    background: radial-gradient(circle at 91% 50%, #f7dcd9 0 31px, transparent 32px), linear-gradient(135deg, #fffdf9, #fbefec);
    box-shadow: var(--ref-shadow);
    font-family: Inter, sans-serif;
}
.profile-assistant-copy { display: grid; gap: 3px; }
.profile-assistant-copy strong { font-size: .88rem; }
.profile-assistant-copy small { max-width: 190px; font-size: .58rem; color: var(--ref-muted); }
.profile-assistant-copy em { width: max-content; margin-top: 5px; padding: 5px 8px; border-radius: 7px; color: var(--ref-coral); background: #fae7e4; font-size: .55rem; font-style: normal; font-weight: 700; }
.profile-assistant-icon { width: 42px; height: 42px; display: grid; place-items: center; color: var(--ref-coral); }
.profile-assistant-icon .sm-icon { width: 25px; height: 25px; }

.bottom-nav {
    bottom: 0;
    width: min(430px, 100%);
    height: calc(61px + env(safe-area-inset-bottom));
    padding: 6px 8px max(6px, env(safe-area-inset-bottom));
    border: 0;
    border-top: 1px solid var(--ref-line);
    border-radius: 0;
    background: rgba(255,253,249,.97);
    box-shadow: 0 -3px 14px rgba(48,38,28,.045);
}
.bottom-nav-item { gap: 2px; border-radius: 0; font-size: .51rem; font-weight: 550; background: transparent !important; }
.bottom-nav-item svg { width: 18px; height: 18px; }
.bottom-nav-item.active[data-nav-key="oggi"],
.bottom-nav-item.active[data-nav-key="routine"] { color: var(--ref-green); }
.bottom-nav-item.active[data-nav-key="impara"] { color: var(--ref-purple); }
.bottom-nav-item.active[data-nav-key="vita"] { color: var(--ref-coral); }
.bottom-nav-item.active[data-nav-key="profilo"] { color: var(--ref-sand); }

.amin-fab {
    right: 12px;
    bottom: calc(68px + env(safe-area-inset-bottom));
    width: 43px;
    height: 43px;
    border-width: 3px;
    box-shadow: 0 8px 19px rgba(29,91,75,.23);
}
.amin-fab svg { width: 18px; height: 18px; }

body.dark-theme {
    --ref-page: #101a17;
    --ref-surface: #17231f;
    --ref-surface-2: #1d2a25;
    --ref-ink: #f4f0e9;
    --ref-muted: #aab6af;
    --ref-line: #314039;
    --ref-shadow: 0 5px 18px rgba(0,0,0,.2);
}
body.dark-theme .app-container { background: var(--ref-page); }
body.dark-theme .smart-hero,
body.dark-theme .hub-group,
body.dark-theme .hub-quick-grid button,
body.dark-theme .hub-card,
body.dark-theme .hub-vita .hub-card,
body.dark-theme .hub-profilo .hub-card { background: var(--ref-surface); border-color: var(--ref-line); }
body.dark-theme .home-need-grid button { background: var(--ref-surface-2); color: var(--ref-ink); }
body.dark-theme .home-prayer-priority > .card { background: var(--ref-surface) !important; border-color: var(--ref-line) !important; }
body.dark-theme .home-prayer-priority h3 { color: var(--ref-ink) !important; }
body.dark-theme .bottom-nav { background: rgba(23,35,31,.97); border-color: var(--ref-line); box-shadow: 0 -3px 16px rgba(0,0,0,.25); }
body.dark-theme .profile-assistant-card { color: var(--ref-ink); border-color: #593d3d; background: radial-gradient(circle at 91% 50%, #583b3b 0 31px, transparent 32px), linear-gradient(135deg, #1b2723, #2a2221); }

@media (max-width: 400px) {
    .app-container { padding-inline: 11px; }
    .hub-routine .hub-card { min-height: 78px; padding: 7px 3px; }
    .hub-routine .hub-card strong { font-size: .61rem; }
    .amin-fab { width: 41px; height: 41px; }
}

.color-palette-item.selected {
    transform: scale(1.18);
    border: 2px solid var(--primary) !important;
    box-shadow: 0 0 6px rgba(44, 74, 62, 0.4);
}

/* Home Dashboard Styles */
.quick-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md) !important;
}

.prayer-time-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 8px;
    border-bottom: 1px solid var(--border-color);
}
.prayer-time-row:last-child {
    border-bottom: none;
}
.prayer-time-row.active {
    background: var(--bg-warm);
    border-radius: 8px;
    font-weight: bold;
    border-left: 4px solid var(--accent);
    padding-left: 12px;
}
.prayer-time-row.passed {
    opacity: 0.6;
}

.qibla-card {
    text-align: center;
    padding: 18px;
}

.qibla-card h3 {
    margin: 12px 0 6px;
    color: var(--primary);
    font-family: 'Outfit', sans-serif;
    font-size: 1.35rem;
}

.qibla-card p {
    margin: 0 auto 14px;
    max-width: 28rem;
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.45;
}

.qibla-location {
    display: inline-flex;
    margin-bottom: 14px;
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 0.76rem;
    font-weight: 800;
}

.qibla-compass {
    display: grid;
    place-items: center;
    margin: 8px 0 12px;
}

.qibla-ring {
    position: relative;
    width: min(72vw, 260px);
    aspect-ratio: 1;
    border-radius: 50%;
    border: 10px solid var(--bg-light);
    box-shadow: inset 0 0 0 2px var(--border-color), var(--shadow-md);
    background:
        radial-gradient(circle at center, var(--bg-card) 0 42%, transparent 43%),
        conic-gradient(from 0deg, rgba(30,53,43,0.06), rgba(184,134,11,0.12), rgba(30,53,43,0.06));
}

.qibla-north,
.qibla-east,
.qibla-south,
.qibla-west {
    position: absolute;
    font-weight: 900;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.qibla-north {
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
}

.qibla-east {
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
}

.qibla-south {
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
}

.qibla-west {
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
}

.qibla-arrow {
    position: absolute;
    top: 16px;
    left: 50%;
    width: 4px;
    height: calc(50% - 28px);
    color: var(--primary);
    font-size: 3.1rem;
    line-height: 1;
    font-weight: 900;
    transform-origin: 50% calc(100% + 12px);
    transition: transform 0.25s ease;
    text-shadow: 0 8px 18px rgba(30, 53, 43, 0.22);
}

.qibla-kaaba {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 74px;
    height: 74px;
    border-radius: 16px;
    background:
        linear-gradient(90deg, transparent 0 42%, var(--accent) 42% 50%, transparent 50% 100%),
        linear-gradient(180deg, #101010 0 30%, var(--accent) 30% 38%, #101010 38% 100%);
    border: 5px solid #fff;
    outline: 2px solid rgba(184, 134, 11, 0.4);
    box-shadow: var(--shadow-sm);
}

.qibla-kaaba::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 13px;
    height: 18px;
    border-radius: 4px 4px 0 0;
    border: 2px solid rgba(255,255,255,0.78);
    border-bottom: 0;
}

.qibla-kaaba-band {
    position: absolute;
    left: 7px;
    right: 7px;
    top: 22px;
    height: 6px;
    border-radius: 999px;
    background: var(--accent);
}

.qibla-status {
    margin: 0 auto 12px;
    padding: 9px 12px;
    max-width: 28rem;
    border-radius: 14px;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 0.78rem;
    font-weight: 800;
}

.qibla-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

.home-switch-control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px dashed var(--border-color);
}
.home-switch-control:last-child {
    border-bottom: none;
}

.home-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}
.home-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.home-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #ccc;
    transition: .3s;
    border-radius: 24px;
}
.home-slider:before {
    position: absolute;
    content: "";
    height: 18px; width: 18px;
    left: 3px; bottom: 3px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
}
input:checked + .home-slider {
    background-color: var(--accent);
}
input:checked + .home-slider:before {
    transform: translateX(20px);
}

/* Essential content surfaces */
.dua-page-intro {
    padding: 2px 2px 10px;
    max-width: 34rem;
}

.dua-page-intro h2 {
    margin: 0 0 6px;
    color: var(--primary);
    font-size: 1.12rem;
    line-height: 1.25;
}

.dua-page-intro p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.86rem;
    line-height: 1.45;
}

.dua-search-container {
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
}

.ebook-library {
    margin-top: 18px;
}

.ebook-shelf-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    color: var(--text-muted);
    font-size: 0.76rem;
}

.ebook-shelf-label strong {
    color: var(--primary);
}

.ebook-shelf {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 12px;
    align-items: end;
    padding: 4px 6px 18px;
}

.ebook-volume {
    position: relative;
    aspect-ratio: 0.72;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(35, 43, 38, 0.28);
    border-radius: 4px 7px 7px 4px;
    padding: 22px 14px 14px 21px;
    color: #fff;
    box-shadow: 5px 8px 0 rgba(48, 36, 22, 0.1), 0 12px 24px rgba(48, 36, 22, 0.12);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    text-align: left;
    cursor: pointer;
}

.ebook-volume-1 { background: #244c42; }
.ebook-volume-2 { background: #77413b; }
.ebook-volume-3 { background: #324763; }
.ebook-volume-4 { background: #746129; }
.ebook-volume-5 { background: #4e3f61; }

.ebook-spine {
    position: absolute;
    inset: 0 auto 0 0;
    width: 10px;
    border-right: 1px solid rgba(255,255,255,0.32);
    background: rgba(0,0,0,0.15);
}

.ebook-cover-kicker {
    position: absolute;
    top: 17px;
    left: 21px;
    right: 12px;
    font-size: 0.62rem;
    font-weight: 900;
    text-transform: uppercase;
    color: rgba(255,255,255,0.82);
}

.ebook-volume strong {
    font-family: 'Playfair Display', serif;
    font-size: 1.02rem;
    line-height: 1.16;
}

.ebook-volume small {
    margin-top: 8px;
    color: rgba(255,255,255,0.82);
    font-size: 0.7rem;
    font-weight: 800;
}

.ebook-progress-track {
    width: 100%;
    height: 3px;
    margin-top: 10px;
    overflow: hidden;
    background: rgba(255,255,255,0.26);
}

.ebook-progress-track i {
    display: block;
    height: 100%;
    background: #fff;
}

.ebook-shelf-edge {
    height: 9px;
    border: 1px solid #9b7b55;
    border-radius: 2px;
    background: #b99669;
    box-shadow: 0 7px 12px rgba(66, 45, 25, 0.16);
}

.stories-source-note,
.story-references,
.story-episode-source,
.story-quiz-details,
.zakat-help,
.sisters-guidance details {
    border-top: 1px solid var(--border-color);
    padding: 11px 0;
    color: var(--text-muted);
    font-size: 0.79rem;
}

.stories-source-note {
    margin-top: 14px;
}

.stories-source-note summary,
.story-references summary,
.story-episode-source summary,
.story-quiz-details summary,
.zakat-help summary,
.sisters-guidance summary {
    color: var(--primary);
    font-weight: 900;
    cursor: pointer;
    list-style-position: inside;
}

.story-favorite-btn {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: var(--bg-warm);
    color: var(--text-muted);
    font-size: 1.25rem;
    cursor: pointer;
}

.story-favorite-btn.active {
    color: #d9a400;
}

.story-reader-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.story-reader-segmented {
    display: grid;
    grid-template-columns: 1fr 1fr;
    flex: 1;
    padding: 3px;
    border-radius: 8px;
    background: var(--bg-warm);
}

.story-reader-segmented button {
    border: 0;
    border-radius: 6px;
    padding: 9px 8px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 900;
    cursor: pointer;
}

.story-reader-segmented button.active {
    background: var(--bg-light);
    color: var(--primary);
    box-shadow: var(--shadow-sm);
}

.story-brief-reading p,
.story-brief-reading li,
.story-lessons-end li {
    color: var(--text-dark);
    font-size: 0.88rem;
    line-height: 1.55;
}

.story-brief-reading h4,
.story-lessons-end h4,
.story-prophet-chapter h4 {
    margin: 14px 0 6px;
    color: var(--primary);
    font-family: 'Playfair Display', serif;
    font-size: 1rem;
}

.story-long-reading,
.story-prophet-chapter {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.story-prophet-chapter + .story-prophet-chapter {
    margin-top: 16px;
    border-top: 1px solid var(--border-color);
}

.story-readable-line {
    position: relative;
    padding: 9px 36px 9px 0;
    border-bottom: 1px solid rgba(134, 116, 91, 0.16);
}

.story-readable-line p {
    margin: 0;
    color: var(--text-dark);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 0.92rem;
    line-height: 1.66;
}

.story-readable-line > button {
    position: absolute;
    top: 8px;
    right: 0;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    opacity: 0.5;
    cursor: pointer;
}

.story-readable-line.bookmarked {
    margin-left: -10px;
    padding-left: 10px;
    border-left: 3px solid #d9a400;
    background: rgba(241, 211, 111, 0.14);
}

.story-readable-line.bookmarked > button {
    opacity: 1;
}

.story-references .quran-ref-card {
    margin: 8px 0;
}

.story-quiz-details {
    margin-top: 12px;
}

.story-quiz-details[open] {
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--primary-light);
}

.hadith-archive {
    margin-bottom: 18px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 16px;
}

.hadith-archive-head span,
.hadith-archive-head strong {
    display: block;
}

.hadith-archive-head span {
    color: var(--accent);
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: uppercase;
}

.hadith-archive-head strong {
    margin: 3px 0 10px;
    color: var(--primary);
}

.hadith-archive > button {
    width: 100%;
    border: 0;
    border-top: 1px solid var(--border-color);
    padding: 12px 0;
    background: transparent;
    color: var(--text-dark);
    display: grid;
    grid-template-columns: 34px 1fr auto;
    align-items: center;
    gap: 9px;
    text-align: left;
    cursor: pointer;
}

.hadith-archive > button div strong,
.hadith-archive > button div small {
    display: block;
}

.hadith-archive > button div small,
.hadith-archive > p {
    color: var(--text-muted);
    font-size: 0.74rem;
}

.hadith-archive > button b {
    color: var(--primary);
    font-size: 0.76rem;
}

.story-integral-source-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-light);
    color: var(--text-dark);
    text-align: left;
}

.story-integral-source-btn > span:last-child {
    display: grid;
    gap: 2px;
}

.story-integral-source-btn small {
    color: var(--text-muted);
    font-size: 0.72rem;
}

.zakat-calculator {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 16px;
}

.zakat-step {
    padding: 18px 0;
    border-top: 1px solid var(--border-color);
}

.zakat-step-head {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 10px;
    align-items: start;
    margin-bottom: 14px;
}

.zakat-step-head > span {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-weight: 900;
}

.zakat-step-head strong,
.zakat-step-head small {
    display: block;
}

.zakat-step-head strong {
    color: var(--primary);
}

.zakat-step-head small {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 0.78rem;
}

.zakat-choice-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}

.zakat-choice-row label,
.zakat-confirm {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px;
    background: var(--bg-light);
    color: var(--text-dark);
    font-size: 0.78rem;
    font-weight: 800;
}

.zakat-choice-row input,
.zakat-confirm input {
    accent-color: var(--primary);
}

.zakat-fields-grid,
.sisters-input-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.zakat-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.zakat-field > span,
.sisters-input-grid label > span {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 800;
}

.zakat-field input,
.zakat-field select,
.sisters-input-grid select,
#sisters-cycle-month {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 9px 10px;
    background: var(--bg-light);
    color: var(--text-dark);
    font: inherit;
}

.zakat-field > div {
    display: grid;
    grid-template-columns: 1fr 76px;
    gap: 8px;
}

.zakat-inline-result {
    margin: 10px 0 0;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.zakat-inline-result strong {
    color: var(--primary);
}

.zakat-confirm {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
    line-height: 1.4;
}

.zakat-result {
    border-radius: 8px;
    padding: 18px;
    background: var(--primary);
    color: #fff;
}

.zakat-result > span,
.zakat-result > strong,
.zakat-result > p {
    display: block;
}

.zakat-result > span {
    font-size: 0.72rem;
    font-weight: 800;
    color: rgba(255,255,255,0.76);
}

.zakat-result > strong {
    margin-top: 2px;
    font-size: 1.28rem;
}

.zakat-result > p {
    margin: 8px 0 14px;
    color: rgba(255,255,255,0.84);
    font-size: 0.8rem;
}

.zakat-result > div {
    border-top: 1px solid rgba(255,255,255,0.2);
    padding-top: 13px;
}

.zakat-result > div small,
.zakat-result > div b {
    display: block;
}

.zakat-result > div b {
    margin-top: 3px;
    font-size: 1.7rem;
}

.zakat-save-btn,
.sisters-save-day {
    width: 100%;
    min-height: 44px;
    margin-top: 14px;
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 8px;
    background: #fff;
    color: var(--primary);
    font-weight: 900;
    cursor: pointer;
}

.sisters-cycle-layout {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.sisters-cycle-calendar,
.sisters-day-editor,
.sisters-guidance {
    border-top: 1px solid var(--border-color);
    padding-top: 14px;
}

.sisters-cycle-title-row,
.sisters-day-editor-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.sisters-cycle-title-row h3,
.sisters-guidance h3 {
    margin: 2px 0 0;
    color: var(--primary);
}

#sisters-cycle-month {
    width: 145px;
}

.sisters-weekdays,
.sisters-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}

.sisters-weekdays {
    margin: 14px 0 5px;
}

.sisters-weekdays span {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 900;
}

.sisters-calendar-day,
.sisters-calendar-empty {
    aspect-ratio: 1;
}

.sisters-calendar-day {
    position: relative;
    border: 1px solid transparent;
    border-radius: 50%;
    background: transparent;
    color: var(--text-dark);
    font-weight: 800;
    cursor: pointer;
}

.sisters-calendar-day.selected {
    border-color: var(--primary);
    background: var(--primary-light);
}

.sisters-calendar-day i {
    position: absolute;
    left: 50%;
    bottom: 4px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    transform: translateX(-50%);
}

.sisters-calendar-day.has-red i,
.flow-red { background: #bb4d57; }
.sisters-calendar-day.has-brown i,
.flow-brown { background: #8a6349; }
.sisters-calendar-day.has-yellow i,
.flow-yellow { background: #d6a925; }
.sisters-calendar-day.has-clear i,
.sisters-calendar-day.has-pure i,
.flow-pure { background: #2f7a62; }

.sisters-calendar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
    color: var(--text-muted);
    font-size: 0.66rem;
}

.sisters-calendar-legend span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.sisters-calendar-legend i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.sisters-day-editor-head {
    margin-bottom: 12px;
}

.sisters-day-editor-head span,
.sisters-day-editor-head strong {
    display: block;
}

.sisters-day-editor-head span {
    color: var(--text-muted);
    font-size: 0.7rem;
}

.sisters-day-editor-head strong {
    color: var(--primary);
}

.sisters-day-editor-head button {
    border: 0;
    background: transparent;
    color: #a23f3f;
    font-size: 0.75rem;
    font-weight: 900;
    cursor: pointer;
}

.sisters-symptom-pills {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    margin: 10px 0;
}

.sisters-symptom-pills label {
    flex: 0 0 auto;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 7px 10px;
    color: var(--text-dark);
    font-size: 0.72rem;
    font-weight: 800;
}

.sisters-save-day {
    background: var(--primary);
    color: #fff;
}

.sisters-guidance details p {
    color: var(--text-dark);
    line-height: 1.5;
}

.sisters-explore-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.sisters-explore-grid button {
    min-height: 145px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 14px;
    background: var(--bg-light);
    color: var(--text-dark);
    text-align: left;
    cursor: pointer;
}

.sisters-explore-grid button span,
.sisters-explore-grid button strong,
.sisters-explore-grid button small {
    display: block;
}

.sisters-explore-grid button span {
    color: var(--accent);
    font-size: 1.3rem;
}

.sisters-explore-grid button strong {
    margin: 18px 0 5px;
    color: var(--primary);
}

.sisters-explore-grid button small {
    color: var(--text-muted);
    line-height: 1.35;
}

.sisters-topic-sheet {
    position: fixed;
    inset: auto 12px 86px;
    z-index: 9000;
    max-width: 440px;
    margin: auto;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 18px;
    background: var(--bg-light);
    box-shadow: var(--shadow-lg);
}

.sisters-topic-sheet button {
    float: right;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: 1.2rem;
}

@media (max-width: 380px) {
    .zakat-fields-grid,
    .sisters-input-grid {
        grid-template-columns: 1fr;
    }

    .ebook-shelf {
        gap: 12px 9px;
    }
}

/* Product refresh: compact navigation, quick help and in-app reading surfaces. */
.assistant-quick-btn { width: 34px; height: 34px; border: 1px solid var(--primary); border-radius: 50%; background: var(--surface); color: var(--primary); font-size: 1rem; font-weight: 800; cursor: pointer; display: inline-grid; place-items: center; }
.assistant-quick-btn:hover, .assistant-quick-btn:focus-visible { background: var(--primary); color: #fff; }
.quick-favorites-btn { color: #d39d11; border-color: #d39d11; }
.sisters-quick-btn { color: #9b4a65; border-color: #9b4a65; }
.sisters-quick-btn:hover, .sisters-quick-btn:focus-visible { background: #9b4a65; color: #fff; }
#view-tab-ebooks, #view-tab-favorites, #view-tab-kids { display: none !important; }
.discovery-duplicate { display: none !important; }
.bottom-nav { justify-content: space-around; }
.favorite-star-symbol, .routine-icon-btn.favorite-active, .action-icon-btn.active { color: #d39d11 !important; }
.dua-result-actions { flex-wrap: wrap; align-items: center; }
.compact-action { min-height: 36px; padding: 7px 10px; font-size: .76rem; }
.name-copy-btn { border: 0; background: transparent; color: var(--primary); cursor: pointer; margin-left: 6px; }
.assistant-history { margin-top: 14px; }
.assistant-history > details { border-top: 1px solid var(--border-color); padding-top: 10px; }
.assistant-history summary { cursor: pointer; font-weight: 800; color: var(--primary); }
.assistant-history-list { display: grid; gap: 8px; margin-top: 10px; }
.assistant-history-item { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 10px 12px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--surface); }
.assistant-history-item.pinned { border-color: var(--accent); background: var(--primary-light); }
.assistant-history-item strong { display: block; font-size: .82rem; }
.assistant-history-item p { margin: 4px 0 0; color: var(--text-muted); font-size: .75rem; line-height: 1.35; }
.assistant-history-actions { display: flex; gap: 4px; align-items: start; }
.assistant-history-actions button { border: 0; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 1rem; }
.home-icon-grid { margin: 10px 0 18px; }
.home-icon-grid button { min-height: 82px; }
.home-icon-grid .home-menu-icon { font-size: 1.35rem; }
.story-resource-detail, [id^="story-detail-"] { max-height: min(68vh, 640px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.story-long-reading { display: grid; gap: 0; }
.story-readable-line { position: relative; padding: 12px 38px 12px 0; border-bottom: 1px solid var(--border-color); }
.story-readable-line.bookmarked { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.story-readable-line > button { position: absolute; right: 2px; top: 12px; border: 0; background: transparent; color: var(--text-muted); cursor: pointer; }
.story-readable-line > button.active { color: #d39d11; }
.story-reader-overlay[hidden] { display: none; }
.story-reader-overlay { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; padding: 12px; background: rgba(35, 42, 38, .64); }
.story-reader-window { width: min(100%, 720px); max-height: min(88vh, 900px); display: flex; flex-direction: column; background: var(--bg-light); color: var(--text-dark); border: 1px solid var(--border-color); border-radius: 16px; box-shadow: 0 24px 80px rgba(0,0,0,.3); overflow: hidden; }
.story-reader-window-head { display: flex; justify-content: space-between; gap: 12px; align-items: start; padding: 16px; background: var(--bg-light); border-bottom: 1px solid var(--border-color); }
.story-reader-window-head h2 { margin: 4px 0 0; color: var(--primary); }
.story-reader-window-head > button { min-width: 40px; min-height: 40px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-warm); font-size: 1.5rem; line-height: 1; color: var(--primary); cursor: pointer; }
.story-reader-head-actions { display: flex; align-items: center; gap: 8px; }
.story-reader-head-actions > button { min-width: 44px; min-height: 44px; border: 1px solid #bfae92; border-radius: 10px; background: #f1e5d3; color: #173d32; font-size: 1.35rem; line-height: 1; cursor: pointer; }
.story-reader-window-body { overflow-y: auto; padding: 20px 22px; background: var(--bg-light); color: var(--text-dark); overscroll-behavior: contain; }
.story-reader-window-body .story-readable-line { color: var(--text-dark); border-color: var(--border-color); font-family: Georgia, 'Times New Roman', serif; font-size: 1.04rem; line-height: 1.65; }
.story-reader-window-body .story-readable-line > button { color: var(--primary); }

/* V2 story body (Markdown sanitizzato) — leggibilita' story vera, ben spaziata */
.story-reader-window-body .story-reader-new { color: var(--text-dark); font-family: Georgia, 'Times New Roman', serif; font-size: 1.05rem; line-height: 1.7; }
.story-reader-window-body .story-body-markdown p { margin: 0 0 1em; }
.story-reader-window-body .story-body-markdown h1,
.story-reader-window-body .story-body-markdown h2,
.story-reader-window-body .story-body-markdown h3,
.story-reader-window-body .story-body-markdown h4 { color: var(--primary); font-family: 'Playfair Display', serif; margin: 1.2em 0 .4em; }
.story-reader-window-body .story-body-markdown blockquote { border-left: 3px solid var(--primary); padding: 4px 12px; margin: 0.8em 0; color: var(--text-muted); background: var(--bg-warm); border-radius: 4px; }
.story-reader-window-body .story-body-markdown ul,
.story-reader-window-body .story-body-markdown ol { padding-left: 1.4em; margin: 0 0 1em; }
.story-reader-window-body .story-body-markdown a { color: var(--primary); }
.story-reader-window-body .story-references { color: var(--text-dark); }
.story-reader-window-body .story-references summary { color: var(--primary); cursor: pointer; }
.story-reader-window-body .story-references ul { padding-left: 1.2em; }
.story-reader-window-body .story-lessons-end h4 { color: var(--primary); }
.story-reader-window-body .story-lessons-end li { color: var(--text-dark); }
.story-reader-window-body .story-brief-reading p,
.story-reader-window-body .story-brief-reading li { color: var(--text-dark); font-size: 0.98rem; line-height: 1.6; }
/* Mobile: reader quasi full-screen */
@media (max-width: 640px) {
    .story-reader-overlay { padding: 4px; }
    .story-reader-window { width: 100%; max-height: 96vh; border-radius: 12px; }
    .story-reader-window-body { padding: 16px 14px; }
    .story-reader-window-body .story-reader-new { font-size: 1rem; line-height: 1.65; }
}
.story-reader-back-btn { min-height: 38px; border: 1px solid #bfae92; border-radius: 10px; background: #f1e5d3; color: #173d32; font-weight: 800; cursor: pointer; }
.story-reader-back-btn { width: 44px; min-width: 44px; padding: 0; font-size: 1.35rem; line-height: 1; }
.story-reader-window-body .story-readable-line > button { width: 42px; height: 42px; border: 1px solid #9f845d; border-radius: 50%; background: #f5e8d5; color: #155446; font-size: 1.2rem; box-shadow: 0 2px 6px rgba(32, 51, 42, .12); }
.story-reader-window-body .story-readable-line > button.active { background: #f0c24b; border-color: #a87508; color: #5d4100; }
body.story-reader-open { overflow: hidden; }
.stories-tabs { overflow-x: auto; justify-content: flex-start; }
.ebook-shelf { align-items: stretch; }
.ebook-volume { position: relative; overflow: hidden; isolation: isolate; padding-top: 82px; }
.ebook-volume::after { content: ''; position: absolute; inset: 0; opacity: .24; z-index: -1; background: repeating-linear-gradient(135deg, transparent 0 12px, rgba(255,255,255,.3) 13px 14px); }
.ebook-cover-kicker { letter-spacing: .06em; }
.ebook-cover-art { position: absolute; top: 38px; right: 16px; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.42); border-radius: 50%; background: rgba(255,255,255,.13); font-size: 1.65rem; filter: saturate(.9); pointer-events: none; }
.ebook-cover-kicker { max-width: calc(100% - 78px); white-space: normal; overflow-wrap: anywhere; }
.ebook-volume strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; overflow-wrap: anywhere; }
.ebook-volume small { overflow-wrap: anywhere; }
.ebook-volume strong, .ebook-volume small, .ebook-cover-kicker, .ebook-progress-track { position: relative; z-index: 1; }
.ebook-volume { justify-content: flex-start; padding-top: 18px; }
.ebook-volume .ebook-cover-kicker { position: relative; top: auto; left: auto; right: auto; min-height: 2.6em; flex: 0 0 auto; }
.ebook-volume strong { margin-top: auto; }
#quran-detail-view { position: relative; }
.ebook-fullscreen-reader { max-width: 760px; width: calc(100% - 20px); }
.ebook-book-stage { min-height: 0; height: min(76vh, 760px); }
.ebook-book-frame { height: 100%; width: 100%; border: 0; background: #f7efe3; }
.ebook-reader-footer { flex-wrap: wrap; }
.onboarding-overlay { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); background: rgba(24, 31, 28, .76); isolation: isolate; }
.onboarding-modal { position: relative; z-index: 1; width: min(100%, 430px); max-height: min(720px, calc(100vh - 32px)); max-height: min(720px, calc(100dvh - 32px)); overflow-y: auto; overscroll-behavior: contain; background: #fffaf1; color: #2b2b2a; border: 1px solid #dfd2c1; border-radius: 16px; padding: 22px; box-shadow: 0 22px 70px rgba(0,0,0,.34); opacity: 1; }
.onboarding-modal input.search-input { background: #fffdf8; color: #2b2b2a; border-color: #dfd2c1; opacity: 1; }
.onboarding-modal input.search-input::placeholder { color: #85827d; opacity: 1; }
.onboarding-modal input.search-input:focus { outline: 3px solid rgba(90, 25, 168, .18); border-color: var(--accent); }
body.dark-theme .onboarding-modal { background: #161e1a; color: #f5f3ef; border-color: #4f685b; }
body.dark-theme .onboarding-modal input.search-input { background: #202c25; color: #f5f3ef; border-color: #4f685b; }
body.dark-theme .onboarding-modal input.search-input::placeholder { color: #b9c0ba; }
body.onboarding-open { overflow: hidden; }
.onboarding-modal h2 { margin: 8px 0; color: var(--primary); }
.onboarding-modal p { color: var(--text-muted); font-size: .86rem; line-height: 1.45; }
.onboarding-modal label { display: grid; gap: 6px; margin-top: 12px; font-weight: 700; font-size: .82rem; }
.onboarding-modal fieldset { display: flex; gap: 16px; border: 0; padding: 14px 0; margin: 0; color: var(--text-dark); font-size: .82rem; }
.onboarding-modal fieldset label { display: flex; margin: 0; align-items: center; }
.onboarding-submit { width: 100%; justify-content: center; background: var(--primary); color: #fff; }
.zakat-step:not(.active) > :not(.zakat-step-head) { display: none; }
.zakat-step-head { cursor: pointer; position: relative; }
.zakat-info-btn { width: 22px; height: 22px; border: 1px solid var(--primary); border-radius: 50%; background: transparent; color: var(--primary); font-weight: 800; cursor: pointer; }
.home-quiz-card { border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); padding: 16px 0; margin: 0 0 18px; }
.home-quiz-card h3 { margin: 4px 0 0; color: var(--primary); }
.home-quiz-card p { margin: 7px 0; color: var(--text-muted); font-size: .82rem; }
.quiz-score-badge { font-size: .7rem; color: var(--accent); font-weight: 800; }
.quiz-age-actions, .quiz-options { display: flex; gap: 8px; flex-wrap: wrap; }
.quiz-age-actions[hidden], #home-quiz-question[hidden], .quiz-start-btn[hidden] { display: none !important; }
.quiz-start-btn { min-height: 42px; padding: 9px 14px; border: 1px solid var(--primary); border-radius: 10px; background: var(--primary); color: #fff; font-weight: 800; cursor: pointer; }
.quiz-age-actions button, .quiz-options button, .quiz-finished button { border: 1px solid var(--border-color); background: var(--surface); color: var(--text-dark); border-radius: 9px; padding: 9px 12px; font-weight: 700; cursor: pointer; }
.quiz-age-actions button:hover, .quiz-options button:hover, .quiz-finished button:hover { border-color: var(--primary); color: var(--primary); }
.quiz-question-title { display: block; margin: 12px 0 9px; }
.quiz-finished { display: grid; gap: 8px; margin-top: 12px; }
.quiz-finished span { color: var(--text-muted); font-size: .82rem; }
.calendar-day-plus { position: absolute; right: 4px; bottom: 2px; font-size: .65rem; color: var(--primary); }
.sisters-calendar-day { position: relative; }
.sisters-calendar-hint { margin: 8px 0 0; color: var(--text-muted); font-size: .76rem; }
.sisters-calendar-day { min-height: 52px; border: 1px solid var(--border-color); background: var(--surface); color: var(--text-dark); font-weight: 800; }
.sisters-calendar-day .calendar-day-plus { right: 6px; bottom: 5px; display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid currentColor; border-radius: 50%; font-size: 1rem; line-height: 1; background: var(--bg-light); }
.sisters-calendar-day > i { width: 12px; height: 12px; right: 7px; top: 7px; border: 2px solid var(--surface); box-shadow: 0 0 0 1px currentColor; }
.sisters-calendar-day.has-red { background: color-mix(in srgb, #d75b62 18%, var(--surface)); border-color: #b8454e; }
.sisters-calendar-day.has-brown { background: color-mix(in srgb, #9a6a3a 19%, var(--surface)); border-color: #825328; }
.sisters-calendar-day.has-yellow { background: color-mix(in srgb, #e2bf3c 24%, var(--surface)); border-color: #b58e12; }
.sisters-calendar-day.has-pure { background: color-mix(in srgb, #4d9b83 16%, var(--surface)); border-color: #27745e; }
.sisters-calendar-day.selected { outline: 3px solid var(--primary); outline-offset: 1px; }
.prayer-travel-cta { padding: 16px; margin-bottom: 24px; }
.assistant-inline-icon { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-right: 4px; border-radius: 10px; background: #f5dce5; font-size: 1.05rem; vertical-align: middle; }
.quran-tafsir-source-note { background: color-mix(in srgb, var(--accent-light) 60%, var(--surface)); }
.travel-results { margin-top: 16px; }
.hadith-topic-index { display: flex; gap: 6px; overflow-x: auto; padding: 8px 0 4px; }
.hadith-topic-index button { flex: 0 0 auto; min-height: 34px; padding: 0 10px; border: 1px solid var(--border-color); border-radius: 999px; background: var(--surface); color: var(--text-dark); font-weight: 800; cursor: pointer; }
.hadith-topic-index button:hover, .hadith-topic-index button:focus-visible { border-color: var(--primary); color: var(--primary); }
.travel-result-head { display: flex; justify-content: space-between; gap: 10px; align-items: end; border-bottom: 1px solid var(--border-color); padding-bottom: 8px; }
.travel-result-head small { color: var(--text-muted); }
.travel-window-list { display: grid; gap: 8px; margin-top: 10px; }
.travel-window-list article { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; padding: 10px; border-left: 3px solid var(--primary); background: var(--primary-light); border-radius: 8px; }
.travel-window-list article small { grid-column: 1 / -1; color: var(--text-muted); font-size: .74rem; }
.theme-settings-card { padding: 16px; margin-bottom: 24px; }
.theme-setting-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.theme-setting-actions button { min-height: 42px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-light); color: var(--text-dark); font-weight: 800; cursor: pointer; }
.theme-setting-actions button.active { border-color: var(--primary); background: var(--primary); color: #fff; }
.routine-tab { flex: 0 0 auto; display: grid; gap: 3px; min-width: 132px; padding: 10px 12px; border: 1px solid var(--border-color); border-radius: 12px; background: var(--surface); color: var(--text-dark); text-align: left; cursor: pointer; }
.routine-tab strong { color: var(--primary); font-size: .78rem; }
.routine-tab small { color: var(--text-muted); font-size: .7rem; }
.routine-tab.active { border-color: var(--primary); background: var(--primary-light); }
.routine-target-overlay { position: fixed; inset: 0; z-index: 1150; display: grid; place-items: center; padding: 16px; background: rgba(35,42,38,.46); }
.routine-target-modal { width: min(100%, 430px); max-height: calc(100vh - 32px); overflow-y: auto; padding: 18px; border: 1px solid var(--border-color); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-md); }
.routine-target-list { display: grid; gap: 8px; }
.routine-target-choice { display: grid; gap: 3px; padding: 12px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-light); color: var(--text-dark); text-align: left; cursor: pointer; }
.routine-target-choice strong { color: var(--primary); }
.routine-target-choice small { color: var(--text-muted); }
.zakat-field-info { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 4px; font-size: .68rem; vertical-align: middle; }
.zakat-step-note { margin: -4px 0 12px; color: var(--text-muted); font-size: .78rem; line-height: 1.4; }
.travel-kit { margin-top: 16px; padding: 16px; }
.travel-kit-list { display: grid; gap: 8px; }
.travel-kit-item { display: flex; align-items: center; gap: 9px; padding: 10px 0; border-top: 1px solid var(--border-color); color: var(--text-dark); font-size: .82rem; }
.travel-kit-item input { width: 18px; height: 18px; accent-color: var(--primary); }
body.dark-theme .assistant-quick-btn { background: #17342d; color: #f7f0e5; border-color: #b7d4c5; }
body.dark-theme .bottom-nav { background: #12241f; border-color: #8bb8a4; }
body.dark-theme .bottom-nav-item { color: #e8f2ed; }
body.dark-theme .bottom-nav-item svg { color: #e8f2ed; }
body.dark-theme .bottom-nav-item.active { background: #28735b; color: #fff; }
@media (max-width: 600px) {
    .top-bar { gap: 4px; }
    .assistant-quick-btn { width: 32px; height: 32px; }
    .quran-fast-scroll-rail { right: 5px; width: 25px; }
    .quran-fast-scroll-rail input { width: 120px; margin-left: -47px; margin-right: -47px; }
    .home-icon-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
    .home-icon-grid button { min-height: 70px; padding: 8px 4px; font-size: .68rem; }
    .ebook-fullscreen-reader { width: 100%; }
    .ebook-book-stage { height: calc(100vh - 190px); }
    .story-resource-detail, [id^="story-detail-"] { max-height: 62vh; }
}

/* Mobile density: keep the daily routine scannable without the extra intro card. */
.routine-standard-stack,
.custom-routine-stack { gap: 12px; }
.routine-day-header { padding: 12px 14px; gap: 8px; }
.routine-day-title-block h3 { font-size: 1rem; }
.routine-day-title-block p { font-size: .74rem; }
.routine-row { min-height: 58px; padding: 10px 14px; gap: 8px; }
.routine-row-title { font-size: .86rem; }
.routine-check-label { grid-template-columns: 22px 1fr; gap: 8px; }
.routine-check-square { width: 21px; height: 21px; }
.routine-row-actions { gap: 3px; }
.routine-icon-btn,
.routine-info-btn { min-width: 30px; min-height: 30px; }
.routine-details-panel { padding: 11px 14px 13px; }

/* Six primary destinations must fit in one mobile viewport. */
.bottom-nav {
    width: min(430px, calc(100% - 8px));
    padding: 6px 4px;
    overflow: hidden;
}
.bottom-nav-item {
    flex: 1 1 0;
    min-width: 0;
    font-size: .58rem;
}
.bottom-nav-item svg { width: 21px; height: 21px; }
.bottom-menu-symbol { font-size: 1.05rem; }

.ebook-book-stage {
    display: grid;
    place-items: center;
    height: min(76vh, 760px);
    padding: 8px 34px;
}
.ebook-page-surface {
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #f7efe3;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    box-shadow: 0 12px 30px rgba(43, 34, 24, .16);
}
.ebook-page-surface canvas {
    display: block;
    max-width: 100%;
    max-height: 100%;
    background: #fff;
    box-shadow: 0 8px 22px rgba(43, 34, 24, .14);
}
.ebook-page-loading {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--primary);
    font-weight: 800;
    pointer-events: none;
}
.ebook-page-surface.is-ready .ebook-page-loading { display: none; }
body.dark-theme .ebook-page-surface { background: #202b25; }

@media (max-width: 600px) {
    .bottom-nav { width: calc(100% - 8px); }
    .bottom-nav-item { flex-basis: 0; }
    .ebook-book-stage { height: calc(100dvh - 190px); height: calc(100vh - 190px); padding-inline: 30px; }
}

/* =========================================================
   V2 UX Phase 1 - Hub views + Amin FAB
   Uses only existing theme tokens (--bg-light, --bg-warm, --text-dark, --primary,
   --border-color, --accent, --text-muted). Dark mode inherits automatically.
   ========================================================= */

.hub-section { padding: 18px 16px 120px; max-width: 720px; margin: 0 auto; }
.hub-header { margin: 6px 0 22px; }
.hub-eyebrow {
    display: inline-block; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
    color: var(--text-muted); font-weight: 600;
}
.hub-title {
    margin: 4px 0 0; font-size: 2rem; line-height: 1.15;
    font-family: 'Playfair Display', Georgia, serif; color: var(--primary);
}
.hub-group { margin: 22px 0; }
.hub-group-label {
    font-size: .82rem; font-weight: 700; color: var(--text-muted);
    margin: 0 0 10px 4px; letter-spacing: .02em;
}
.hub-grid {
    display: grid; gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px) {
    .hub-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.hub-card {
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
    padding: 16px 14px; border-radius: 14px;
    background: var(--bg-light); color: var(--text-dark);
    border: 1px solid var(--border-color);
    text-align: left; cursor: pointer; font: inherit;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
    min-height: 108px;
    box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.hub-card:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.08); border-color: var(--primary); }
.hub-card:active { transform: translateY(0); }
.hub-card-link { text-decoration: none; }
.hub-card .hub-icon { font-size: 1.35rem; line-height: 1; }
.hub-card strong { font-size: 1rem; color: var(--primary); font-weight: 700; line-height: 1.2; }
.hub-card small { font-size: .78rem; color: var(--text-muted); line-height: 1.35; }
.hub-card-soon { opacity: .78; border-style: dashed; }
.hub-card-soon strong::after { content: ''; }

/* Accenti leggeri per hub - solo la stripe superiore, DNA visivo Smart Muslim intatto */
.hub-section.hub-routine  .hub-card { border-top: 3px solid #2f6b8f; }
.hub-section.hub-impara   .hub-card { border-top: 3px solid #6d4a8f; }
.hub-section.hub-vita     .hub-card { border-top: 3px solid #b9603d; }
.hub-section.hub-profilo  .hub-card { border-top: 3px solid #a67c25; }
.hub-section.hub-routine  .hub-title { color: #2f6b8f; }
.hub-section.hub-impara   .hub-title { color: #6d4a8f; }
.hub-section.hub-vita     .hub-title { color: #b9603d; }
.hub-section.hub-profilo  .hub-title { color: #a67c25; }

body.dark-theme .hub-section.hub-routine  .hub-title { color: #7fb7d3; }
body.dark-theme .hub-section.hub-impara   .hub-title { color: #b997d4; }
body.dark-theme .hub-section.hub-vita     .hub-title { color: #f0a683; }

/* Sorelle — Calendario premium (Rendering 2) */
#view-sisters {
    --sisters-rose: #bd5a59;
    --sisters-rose-soft: #f7e5e1;
    --sisters-green: #164f40;
    --sisters-green-soft: #e6eee9;
    --sisters-line: #ded8cd;
    --sisters-cream: #fbf7ef;
    color: var(--text-dark);
}

.sr-only {
    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;
}

.sisters-page-heading {
    display: grid;
    justify-items: center;
    margin: 8px 0 2px;
    color: var(--sisters-rose);
}

.sisters-page-heading h2 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2rem, 7vw, 2.65rem);
    font-weight: 700;
    letter-spacing: -.02em;
}

.sisters-page-heading span {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 116px;
    color: #db8b83;
}

.sisters-page-heading span::before,
.sisters-page-heading span::after {
    content: "";
    flex: 1;
    height: 1px;
    background: currentColor;
}

.sisters-page-heading .sm-icon { width: 23px; height: 23px; }

#view-sisters > .smart-muted-center {
    max-width: 470px;
    margin: 0 auto 20px;
    line-height: 1.45;
}

#view-sisters .category-nav {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    width: 100%;
    margin: 0 0 22px;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--sisters-line);
    overflow: visible;
}

#view-sisters .category-nav .nav-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    min-height: 46px;
    padding: 7px 5px;
    border: 1px solid transparent;
    border-radius: 15px;
    background: transparent;
    color: var(--sisters-green);
    font-size: .75rem;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
}

#view-sisters .category-nav .nav-tab::after { display: none; }
#view-sisters .category-nav .nav-tab .sm-icon { width: 19px; height: 19px; flex: 0 0 auto; }

#view-sisters .category-nav .nav-tab.active {
    border-color: var(--sisters-green);
    background: var(--sisters-green);
    color: #fff;
    box-shadow: 0 8px 20px rgba(22,79,64,.15);
}

.sisters-cycle-layout { gap: 16px; }

.sisters-cycle-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
}

.sisters-cycle-section-head .card-category {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--sisters-rose);
    font-size: .72rem;
}

.sisters-cycle-section-head .card-category .sm-icon { width: 16px; height: 16px; }

.sisters-cycle-section-head h3,
.sisters-panel-intro h3,
.sisters-amina-card h3 {
    margin: 4px 0 0;
    color: var(--sisters-green);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.65rem, 6vw, 2.15rem);
    line-height: 1.05;
}

.sisters-month-control {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 164px;
    min-height: 48px;
    padding: 0 36px 0 8px;
    border: 1px solid var(--sisters-green);
    border-radius: 12px;
    background: var(--surface);
    color: var(--sisters-green);
}

.sisters-month-control input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: .9rem;
    font-weight: 800;
}

.sisters-month-control > .sm-icon {
    position: absolute;
    right: 27px;
    width: 18px;
    height: 18px;
    pointer-events: none;
}

.sisters-month-control .sisters-month-chevron { right: 7px; width: 15px; height: 15px; }

#view-sisters .sisters-cycle-calendar,
#view-sisters .sisters-day-editor {
    border: 1px solid var(--sisters-line);
    border-radius: 16px;
    padding: 16px;
    background: color-mix(in srgb, var(--surface) 94%, var(--sisters-cream));
    box-shadow: 0 7px 22px rgba(41,52,46,.06);
}

#view-sisters .sisters-cycle-calendar { padding-top: 8px; }
#view-sisters .sisters-cycle-title-row { min-height: 0; }
#view-sisters .sisters-weekdays { margin: 6px 0 7px; }
#view-sisters .sisters-weekdays span { color: var(--text-muted); font-size: .72rem; }

#view-sisters .sisters-calendar-grid { gap: 7px 4px; }

#view-sisters .sisters-calendar-day,
#view-sisters .sisters-calendar-empty {
    width: 100%;
    min-width: 0;
    min-height: 0;
    aspect-ratio: 1;
}

#view-sisters .sisters-calendar-day {
    border: 1px solid var(--sisters-line);
    border-radius: 50%;
    background: var(--surface);
    color: var(--sisters-green);
    font-size: clamp(.72rem, 3.6vw, .95rem);
    box-shadow: none;
}

#view-sisters .sisters-calendar-day .calendar-day-plus { display: none; }

#view-sisters .sisters-calendar-day > i {
    top: auto;
    right: auto;
    bottom: 5px;
    left: 50%;
    width: 6px;
    height: 6px;
    border: 0;
    box-shadow: none;
    transform: translateX(-50%);
}

#view-sisters .sisters-calendar-day.selected {
    border-color: var(--sisters-green);
    outline: 2px solid var(--sisters-rose);
    outline-offset: 3px;
    background: var(--sisters-green);
    color: #fff;
}

#view-sisters .sisters-calendar-day.selected > i { border: 1px solid #fff; }

#view-sisters .sisters-calendar-legend {
    justify-content: space-between;
    gap: 7px;
    margin-top: 15px;
    padding-top: 13px;
    border-top: 1px solid var(--sisters-line);
    font-size: .68rem;
}

#view-sisters .sisters-calendar-legend i { width: 8px; height: 8px; }

#view-sisters .sisters-day-editor { padding: 0; overflow: hidden; }

#view-sisters .sisters-day-editor-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 11px;
    margin: 0;
    padding: 14px 16px;
    background: color-mix(in srgb, var(--sisters-green-soft) 48%, var(--surface));
}

#view-sisters .sisters-day-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--sisters-green);
    color: #fff;
}

#view-sisters .sisters-day-icon .sm-icon { width: 21px; height: 21px; }
#view-sisters .sisters-day-editor-head strong { font-size: 1rem; }
#view-sisters .sisters-day-editor-head span { margin-top: 2px; }

#view-sisters .sisters-edit-day {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--sisters-line);
    border-radius: 10px;
    background: var(--surface);
    color: var(--sisters-green);
}

#view-sisters .sisters-edit-day .sm-icon { width: 18px; height: 18px; }

.sisters-editor-row {
    display: flex;
    align-items: center;
    min-height: 52px;
    gap: 10px;
    margin: 0 16px;
    border-bottom: 1px solid var(--sisters-line);
    color: var(--sisters-green);
    font-size: .78rem;
}

.sisters-editor-row > label,
.sisters-editor-row > span:first-child { margin-right: auto; }

.sisters-select-wrap {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--sisters-rose);
}

.sisters-select-wrap .sm-icon { width: 16px; height: 16px; }
.sisters-select-wrap select { max-width: 122px; border: 0; background: transparent; color: var(--sisters-green); font-weight: 800; outline: 0; appearance: none; }

.sisters-intensity-row { flex-wrap: wrap; }
.sisters-intensity-control { display: flex; align-items: center; gap: 5px; }

.sisters-intensity-control button {
    width: 18px;
    height: 18px;
    padding: 0;
    border: 1px solid var(--sisters-line);
    border-radius: 50%;
    background: var(--surface);
}

.sisters-intensity-control button.active { border-color: var(--sisters-rose); background: var(--sisters-rose); }
.sisters-intensity-control button.clear-choice { margin-left: 2px; }
.sisters-intensity-row > strong { min-width: 62px; color: var(--sisters-rose); text-align: right; font-size: .74rem; }

.sisters-purity-choice { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.sisters-purity-choice input { position: absolute; opacity: 0; pointer-events: none; }
.sisters-purity-choice i { width: 14px; height: 14px; border: 1px solid var(--sisters-line); border-radius: 50%; background: var(--surface); }
.sisters-purity-choice input:checked + i { border-color: var(--sisters-green); background: var(--sisters-green); box-shadow: inset 0 0 0 3px var(--surface); }
.sisters-purity-choice b { color: var(--sisters-green); font-size: .76rem; }

.sisters-symptoms-title { display: block; margin: 13px 16px 0; color: var(--sisters-green); font-size: .82rem; }

#view-sisters .sisters-symptom-pills {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    margin: 9px 16px 12px;
    overflow: visible;
}

#view-sisters .sisters-symptom-pills label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    padding: 7px 5px;
    border-radius: 999px;
    background: var(--surface);
    cursor: pointer;
}

#view-sisters .sisters-symptom-pills input { position: absolute; opacity: 0; }
#view-sisters .sisters-symptom-pills .sm-icon { width: 16px; height: 16px; flex: 0 0 auto; }
#view-sisters .sisters-symptom-pills span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view-sisters .sisters-symptom-pills label:has(input:checked) { border-color: var(--sisters-rose); background: var(--sisters-rose-soft); color: var(--sisters-rose); }

.sisters-note-details { margin: 0 16px 10px; }
.sisters-note-details summary { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: .74rem; cursor: pointer; }
.sisters-note-details summary .sm-icon { width: 15px; height: 15px; }
.sisters-note-details textarea { margin-top: 8px; }

.sisters-editor-actions { display: grid; grid-template-columns: auto 1fr; gap: 9px; padding: 0 16px 16px; }
.sisters-delete-day { min-width: 70px; border: 1px solid var(--sisters-line); border-radius: 10px; background: var(--surface); color: var(--sisters-rose); font-weight: 800; }
#view-sisters .sisters-save-day { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; margin: 0; border: 0; border-radius: 10px; background: var(--sisters-green); color: #fff; }
#view-sisters .sisters-save-day .sm-icon { width: 20px; height: 20px; }

#view-sisters .sisters-guidance { border: 0; padding-top: 4px; }
#view-sisters .sisters-guidance h3 { font-family: Georgia, "Times New Roman", serif; }
#view-sisters .sisters-guidance details { border: 1px solid var(--sisters-line); border-radius: 11px; padding: 0 12px; background: var(--surface); }

.sisters-panel-intro { margin-bottom: 14px; }
.sisters-panel-intro p { margin: 7px 0 0; color: var(--text-muted); }

.sisters-fasting-panel { padding: 20px; border-color: var(--sisters-line); border-radius: 18px; }
.sisters-fasting-panel > .card-category { color: var(--sisters-rose); }
.sisters-fasting-panel > .routine-box-title { margin: 8px 0 6px; font-family: Georgia, "Times New Roman", serif; color: var(--sisters-green); font-size: 1.65rem; }
.sisters-fasting-panel > .translation-text { margin: 0 0 18px; color: var(--text-muted); line-height: 1.5; }
.sisters-fasting-counters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sisters-fasting-counter { min-width: 0; padding: 13px; border: 1px solid var(--sisters-line); border-radius: 15px; background: var(--sisters-cream); }
.sisters-fasting-counter > span { display: block; margin-bottom: 10px; color: var(--sisters-green); font-size: .77rem; font-weight: 850; }
.sisters-fasting-counter > div { display: grid; grid-template-columns: 34px minmax(38px, 1fr) 34px; align-items: center; gap: 6px; }
.sisters-fasting-counter button { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--sisters-line); border-radius: 50%; background: var(--surface); color: var(--sisters-green); font-size: 1.25rem; line-height: 1; }
.sisters-fasting-counter button:active { transform: scale(.96); background: var(--sisters-green-soft); }
.sisters-fasting-counter output { color: var(--sisters-green); font-family: Georgia, "Times New Roman", serif; font-size: 2rem; font-weight: 700; text-align: center; }
.sisters-fasting-counter.recovered { background: var(--sisters-green-soft); }
.sisters-fasting-progress { margin: 14px 0 18px; padding: 13px 14px; border-radius: 14px; background: color-mix(in srgb, var(--sisters-green-soft) 62%, var(--surface)); }
.sisters-fasting-progress > div { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.sisters-fasting-progress strong { color: var(--sisters-green); font-size: .84rem; }
.sisters-fasting-progress span { color: var(--text-muted); font-size: .72rem; white-space: nowrap; }
.sisters-fasting-progress > i { display: block; height: 7px; overflow: hidden; border-radius: 999px; background: var(--sisters-line); }
.sisters-fasting-progress > i > b { display: block; height: 100%; border-radius: inherit; background: var(--sisters-green); transition: width .2s ease; }
.sisters-fasting-note { display: grid; gap: 7px; color: var(--sisters-green); font-weight: 800; }
.sisters-fasting-note .search-input { margin: 0; border-color: var(--sisters-line); border-radius: 13px; background: var(--sisters-cream); }
.sisters-fasting-reminder { margin: 14px 0; border-color: var(--sisters-line); border-radius: 13px; background: var(--surface); }
.sisters-fasting-reminder span { color: var(--sisters-green); font-weight: 800; }
#view-sisters .sisters-fasting-panel > .sisters-save-day { width: 100%; }
.sisters-tool-footnote { margin-bottom: 0; padding-right: 70px; }

#view-sisters,
#view-marriage,
#view-pregnancy,
#view-parenting { padding-bottom: 92px; }

.sisters-path-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sisters-path-grid button,
.sisters-path-grid a {
    display: flex;
    flex-direction: column;
    height: 144px;
    min-height: 144px;
    padding: 14px;
    border: 1px solid var(--sisters-line);
    border-radius: 14px;
    background: var(--surface);
    color: var(--text-dark);
    font: inherit;
    text-align: left;
    text-decoration: none;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    box-shadow: 0 5px 16px rgba(41,52,46,.05);
}

.sisters-path-grid button > span,
.sisters-path-grid a > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--sisters-rose-soft); color: var(--sisters-rose); }
.sisters-path-grid .sm-icon { width: 21px; height: 21px; }
.sisters-path-grid strong { margin: auto 0 4px; color: var(--sisters-green); font-size: .86rem; line-height: 1.2; }
.sisters-path-grid small { color: var(--text-muted); font-size: .7rem; line-height: 1.35; }

.sisters-women-grid { display: grid; gap: 8px; }
.sisters-women-grid button {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 11px;
    width: 100%;
    min-height: 70px;
    padding: 10px 12px;
    border: 1px solid var(--sisters-line);
    border-radius: 13px;
    background: var(--surface);
    color: var(--text-dark);
    text-align: left;
}

.sisters-woman-icon { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 50%; background: var(--sisters-rose-soft); color: var(--sisters-rose); }
.sisters-woman-icon .sm-icon { width: 20px; height: 20px; }
.sisters-women-grid button > span:nth-child(2) { min-width: 0; }
.sisters-women-grid strong,
.sisters-women-grid small { display: block; }
.sisters-women-grid strong { color: var(--sisters-green); }
.sisters-women-grid small { margin-top: 3px; overflow: hidden; color: var(--text-muted); font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.sisters-woman-arrow { width: 17px; height: 17px; transform: rotate(-90deg); }

.sisters-amina-card { position: relative; overflow: hidden; border: 1px solid var(--sisters-line); border-radius: 16px; padding: 20px; }
.sisters-amina-card .card-category { color: var(--sisters-rose); }
.sisters-amina-card > p { max-width: 470px; color: var(--text-muted); line-height: 1.5; }
.sisters-amina-mark { position: absolute; top: 14px; right: 16px; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--sisters-rose-soft); color: var(--sisters-rose); }
.sisters-amina-mark .sm-icon { width: 23px; height: 23px; }
.sisters-amina-card textarea { border-color: var(--sisters-line); border-radius: 12px; background: var(--bg-light); }
.sisters-amina-submit { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; margin-top: 9px; border: 0; border-radius: 10px; background: var(--sisters-green); color: #fff; font-weight: 900; }
.sisters-amina-submit .sm-icon { width: 19px; height: 19px; }
.assistant-safety-notice { margin: 12px 0; padding: 10px 12px; border-left: 3px solid var(--sisters-rose, var(--accent)); border-radius: 5px 10px 10px 5px; background: var(--sisters-rose-soft, var(--accent-light)); color: var(--text-dark); font-size: .8rem; line-height: 1.45; }

body.dark-theme #view-sisters {
    --sisters-rose: #efaaa3;
    --sisters-rose-soft: #392a2c;
    --sisters-green: #a9d4c4;
    --sisters-green-soft: #20362f;
    --sisters-line: #40504a;
    --sisters-cream: #202824;
}

body.dark-theme #view-sisters .category-nav .nav-tab.active,
body.dark-theme #view-sisters .sisters-save-day,
body.dark-theme .sisters-amina-submit,
body.dark-theme #view-sisters .sisters-day-icon,
body.dark-theme #view-sisters .sisters-calendar-day.selected { background: #2c6d59; color: #fff; }

@media (max-width: 430px) {
    #view-sisters .category-nav .nav-tab { flex-direction: column; gap: 3px; min-height: 54px; padding: 5px 2px; font-size: .61rem; }
    #view-sisters .category-nav .nav-tab .sm-icon { width: 18px; height: 18px; }
    .sisters-cycle-section-head { align-items: center; }
    .sisters-cycle-section-head h3 { font-size: 1.75rem; }
    .sisters-month-control { min-width: 148px; min-height: 45px; }
    #view-sisters .sisters-cycle-calendar { padding: 12px 10px 14px; }
    #view-sisters .sisters-calendar-grid { gap: 6px 3px; }
    #view-sisters .sisters-calendar-day { font-size: .75rem; }
    #view-sisters .sisters-calendar-day > i { bottom: 3px; width: 5px; height: 5px; }
    #view-sisters .sisters-calendar-legend { font-size: .58rem; }
    .sisters-editor-row { margin: 0 13px; }
    #view-sisters .sisters-symptom-pills { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-inline: 13px; }
    .sisters-note-details { margin-inline: 13px; }
    .sisters-editor-actions { padding-inline: 13px; }
    .sisters-fasting-panel { padding: 18px 14px; }
    .sisters-fasting-counters { gap: 8px; }
    .sisters-fasting-counter { padding: 12px 9px; }
    .sisters-fasting-counter > div { grid-template-columns: 32px minmax(32px, 1fr) 32px; gap: 3px; }
    .sisters-fasting-counter button { width: 32px; height: 32px; }
    .sisters-fasting-counter output { font-size: 1.75rem; }
}
body.dark-theme .hub-section.hub-profilo  .hub-title { color: #dbba6a; }

/* Amin FAB - accesso globale */
.amin-fab {
    position: fixed;
    right: 16px;
    bottom: calc(76px + env(safe-area-inset-bottom));
    z-index: 1000;
    display: flex; align-items: center; gap: 8px;
    padding: 12px 16px;
    background: var(--primary); color: var(--text-light);
    border: none; border-radius: 999px;
    box-shadow: 0 8px 24px rgba(0,0,0,.28);
    font: inherit; font-weight: 700; font-size: .92rem;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
}
.amin-fab:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(0,0,0,.32); }
.amin-fab svg { width: 20px; height: 20px; }
.amin-fab-label { line-height: 1; }
body.story-reader-open .amin-fab { display: none !important; }
body:has(#view-sisters[style*="display: block"]) .amin-fab { display: none !important; }
@media (max-width: 400px) {
    .amin-fab { padding: 12px 14px; }
    .amin-fab-label { display: none; }
    .amin-fab svg { width: 22px; height: 22px; }
}

/* =========================================================
   SMART MUSLIM V2 — ELEGANTE ISLAMIC / PEARL EDITION
   Final visual layer. Components and hub palettes live here so the
   interface can be tuned without touching content, routes or engines.
   ========================================================= */

.sm-icon-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
}

.sm-icon {
    width: 1.35em;
    height: 1.35em;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body {
    background:
        radial-gradient(circle at 12% 0%, rgba(255,255,255,.82), transparent 28rem),
        var(--sm-canvas);
}

.app-container {
    background:
        radial-gradient(circle at 88% 2%, color-mix(in srgb, var(--sm-green-soft) 74%, transparent), transparent 13rem),
        var(--sm-canvas);
    padding: 18px 14px 112px;
    gap: 14px;
}

header {
    padding: 0 2px 4px;
    margin-top: 2px;
}

.top-bar {
    margin-bottom: 10px;
    gap: 8px;
}

.home-toggle-btn {
    margin-right: auto;
    border: 1px solid var(--sm-line) !important;
    border-radius: 999px;
    background: color-mix(in srgb, var(--sm-surface) 86%, transparent) !important;
    box-shadow: 0 6px 20px rgba(34,55,47,.05);
}

header h1 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.65rem;
    font-weight: 700;
    letter-spacing: -.025em;
    color: var(--sm-ink);
}

.brand-desc {
    color: var(--sm-muted);
    font-size: .78rem;
}

.assistant-quick-btn {
    width: 38px;
    height: 38px;
    border-color: var(--sm-line);
    background: color-mix(in srgb, var(--sm-surface) 88%, transparent);
    color: var(--sm-green);
    box-shadow: 0 6px 18px rgba(35,57,49,.06);
}

.assistant-quick-btn .sm-icon { width: 18px; height: 18px; }
.quick-favorites-btn { color: var(--sm-purple); border-color: var(--sm-line); }
.sisters-quick-btn { color: var(--sm-coral); border-color: var(--sm-line); }

.smart-hero,
.daily-message-card,
.home-insight-card,
.home-continue-section,
.empty-state-card,
.home-icon-grid button,
.home-path-row button,
.card,
.search-container {
    background: color-mix(in srgb, var(--sm-surface) 96%, transparent);
    border: 1px solid var(--sm-line);
    border-radius: var(--sm-radius-card);
    box-shadow: 0 8px 28px rgba(34,55,47,.055);
}

.smart-hero {
    color: var(--sm-ink);
    padding: 18px;
    overflow: hidden;
    position: relative;
}

.smart-hero::after {
    content: '';
    position: absolute;
    width: 150px;
    height: 150px;
    right: -56px;
    top: -72px;
    border: 1px solid color-mix(in srgb, var(--sm-green) 18%, transparent);
    border-radius: 38% 62% 57% 43%;
    transform: rotate(24deg);
    pointer-events: none;
}

.smart-hero h2 {
    color: var(--sm-ink);
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.42rem;
}

.smart-hero p { color: var(--sm-muted); }

.smart-hero-action {
    width: auto;
    justify-self: start;
    min-height: 40px;
    padding: 0 15px;
    color: #fff;
    background: var(--sm-green);
    border-radius: var(--sm-radius-control);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--sm-green) 22%, transparent);
}

.daily-message-card {
    border-left: 3px solid var(--sm-coral);
    padding: 15px 16px;
}

.daily-message-card span,
.home-insight-card span,
.card-category { color: var(--sm-coral); }

.home-insight-card { border-left: 3px solid var(--sm-purple); }
.home-insight-card span { color: var(--sm-purple); }

.home-icon-grid {
    gap: 8px;
    margin: 10px 0 16px;
}

.home-icon-grid button {
    min-height: 78px;
    gap: 7px;
    padding: 9px 4px;
}

.home-menu-icon {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    color: var(--sm-green);
    background: var(--sm-green-soft);
}

.home-menu-icon .sm-icon { width: 18px; height: 18px; }
.home-icon-grid button:nth-child(2) .home-menu-icon { color: var(--sm-purple); background: var(--sm-purple-soft); }
.home-icon-grid button:nth-child(3) .home-menu-icon { color: var(--sm-coral); background: var(--sm-coral-soft); }
.home-icon-grid button:nth-child(4) .home-menu-icon { color: var(--sm-slate); background: var(--sm-slate-soft); }
.home-icon-grid button:nth-child(5) .home-menu-icon { color: var(--sm-coral); background: var(--sm-coral-soft); }
.favorite-star-symbol { color: var(--sm-purple) !important; text-shadow: none; }

.home-path-row button,
.home-continue-card,
.more-row {
    border-color: var(--sm-line);
    background: var(--sm-surface);
    box-shadow: 0 7px 22px rgba(34,55,47,.045);
}

.smart-section-title,
.results-title { color: var(--sm-ink); }

/* Premium five-tab navigation: calm surface, colored active destinations. */
.bottom-nav {
    bottom: 8px;
    width: min(414px, calc(100% - 16px));
    height: 70px;
    padding: 7px 8px max(7px, env(safe-area-inset-bottom));
    border-radius: 22px;
    border-color: color-mix(in srgb, var(--sm-line) 88%, transparent);
    background: color-mix(in srgb, var(--sm-surface) 94%, transparent);
    box-shadow: 0 18px 48px rgba(24,53,46,.16);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.bottom-nav-item {
    gap: 4px;
    border-radius: 14px;
    color: var(--sm-muted);
    font-size: .6rem;
    font-weight: 700;
}

.bottom-nav-item svg { width: 20px; height: 20px; stroke-width: 1.8; }
.bottom-nav-item.active { box-shadow: none; }
.bottom-nav-item.active[data-nav-key="oggi"] { color: var(--sm-green); background: var(--sm-green-soft); }
.bottom-nav-item.active[data-nav-key="routine"] { color: var(--sm-green); background: var(--sm-green-soft); }
.bottom-nav-item.active[data-nav-key="impara"] { color: var(--sm-purple); background: var(--sm-purple-soft); }
.bottom-nav-item.active[data-nav-key="vita"] { color: var(--sm-coral); background: var(--sm-coral-soft); }
.bottom-nav-item.active[data-nav-key="profilo"] { color: var(--sm-slate); background: var(--sm-slate-soft); }

/* Hub component system. */
.hub-section {
    --hub-accent: var(--sm-green);
    --hub-soft: var(--sm-green-soft);
    width: 100%;
    padding: 2px 0 106px;
    max-width: none;
}

.hub-routine { --hub-accent: var(--sm-green); --hub-soft: var(--sm-green-soft); }
.hub-impara { --hub-accent: var(--sm-purple); --hub-soft: var(--sm-purple-soft); }
.hub-vita { --hub-accent: var(--sm-coral); --hub-soft: var(--sm-coral-soft); }
.hub-profilo { --hub-accent: var(--sm-slate); --hub-soft: var(--sm-slate-soft); }

.hub-header {
    margin: 2px 2px 20px;
    padding: 16px 16px 17px;
    border: 1px solid var(--sm-line);
    border-radius: var(--sm-radius-card);
    background:
        radial-gradient(circle at 92% 0%, color-mix(in srgb, var(--hub-accent) 13%, transparent), transparent 9rem),
        var(--sm-surface);
    box-shadow: 0 9px 26px rgba(34,55,47,.05);
}

.hub-eyebrow {
    color: var(--sm-muted);
    font-size: .7rem;
    letter-spacing: .075em;
    font-weight: 700;
}

.hub-title,
.hub-section.hub-routine .hub-title,
.hub-section.hub-impara .hub-title,
.hub-section.hub-vita .hub-title,
.hub-section.hub-profilo .hub-title,
body.dark-theme .hub-section .hub-title {
    color: var(--hub-accent);
    font-size: 2.05rem;
    letter-spacing: -.035em;
}

.hub-group { margin: 18px 0 22px; }
.hub-group-label {
    margin: 0 0 9px 5px;
    color: var(--sm-ink);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.hub-grid { gap: 9px; }

.hub-card,
.hub-section.hub-routine .hub-card,
.hub-section.hub-impara .hub-card,
.hub-section.hub-vita .hub-card,
.hub-section.hub-profilo .hub-card {
    min-width: 0;
    min-height: 112px;
    padding: 13px;
    gap: 7px;
    border: 1px solid var(--sm-line);
    border-top: 1px solid var(--sm-line);
    border-radius: 16px;
    background: var(--sm-surface);
    box-shadow: 0 8px 24px rgba(34,55,47,.045);
}

.hub-card:hover,
.hub-card:focus-visible {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--hub-accent) 48%, var(--sm-line));
    box-shadow: 0 12px 30px rgba(34,55,47,.085);
    outline: none;
}

.hub-card .hub-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    border-radius: 13px;
    color: var(--hub-accent);
    background: var(--hub-soft);
}

.hub-card .hub-icon .sm-icon { width: 21px; height: 21px; }
.hub-card strong { color: var(--sm-ink); font-size: .88rem; font-weight: 750; }
.hub-card small { color: var(--sm-muted); font-size: .7rem; line-height: 1.32; }
.hub-card-soon { opacity: .78; border-style: dashed; }

/* Routine keeps the compact tool-grid seen in the chosen rendering. */
.hub-routine .hub-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hub-routine .hub-group:last-child .hub-grid { grid-template-columns: 1fr; }

/* Impara: story destinations read as editorial rows, library remains compact. */
.hub-impara .hub-group:first-of-type .hub-grid,
.hub-vita .hub-grid,
.hub-profilo .hub-grid { grid-template-columns: 1fr; }

.hub-impara .hub-group:first-of-type .hub-card,
.hub-vita .hub-card,
.hub-profilo .hub-card {
    min-height: 72px;
    display: grid;
    grid-template-columns: 38px minmax(0,1fr) 18px;
    grid-template-rows: auto auto;
    column-gap: 11px;
    row-gap: 2px;
    align-items: center;
    padding: 11px 13px;
}

.hub-impara .hub-group:first-of-type .hub-icon,
.hub-vita .hub-icon,
.hub-profilo .hub-icon { grid-row: 1 / 3; }

.hub-impara .hub-group:first-of-type .hub-card strong,
.hub-vita .hub-card strong,
.hub-profilo .hub-card strong { grid-column: 2; align-self: end; }

.hub-impara .hub-group:first-of-type .hub-card small,
.hub-vita .hub-card small,
.hub-profilo .hub-card small { grid-column: 2; align-self: start; }

.hub-impara .hub-group:first-of-type .hub-card::after,
.hub-vita .hub-card::after,
.hub-profilo .hub-card::after {
    content: '›';
    grid-column: 3;
    grid-row: 1 / 3;
    color: var(--hub-accent);
    font-size: 1.35rem;
    font-weight: 400;
}

/* Vita graphic pack v1. */
.hub-vita .hub-header {
    min-height: 170px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(255,252,246,.98) 0%, rgba(255,252,246,.84) 42%, rgba(255,252,246,.16) 78%),
        url('assets/ui/vita-v1/background/vita_sfondo_moschea.png') center right / cover no-repeat,
        var(--sm-surface);
}

.hub-vita .hub-header .hub-title {
    margin: 0 0 4px;
    color: var(--sm-ink);
    font-size: clamp(2.65rem, 13vw, 3.75rem);
}

.hub-vita .hub-header .hub-eyebrow {
    color: var(--sm-ink);
    font-size: clamp(.88rem, 4.3vw, 1.12rem);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.hub-vita .hub-group-label {
    color: var(--sm-coral);
    font-size: .8rem;
    letter-spacing: .045em;
}

.hub-vita .hub-grid { gap: 0; }

.hub-vita .hub-card,
.hub-section.hub-vita .hub-card {
    min-height: 76px;
    border-radius: 0;
    box-shadow: none;
}

.hub-vita .hub-card:first-child { border-radius: 18px 18px 0 0; }
.hub-vita .hub-card:last-child { border-radius: 0 0 18px 18px; }
.hub-vita .hub-card + .hub-card { border-top: 0; }

.hub-vita .hub-icon.vita-hub-icon {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    overflow: hidden;
    border-radius: 50%;
    background: transparent;
}

.hub-vita .vita-hub-icon img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.hub-vita .vita-hub-card--soon {
    opacity: .62;
    cursor: default;
}

.hub-vita .vita-hub-card--soon::after { color: var(--sm-muted); }

.hub-vita .vita-coming-soon {
    grid-column: 3;
    grid-row: 1 / 3;
    align-self: center;
    justify-self: end;
    padding: 5px 8px;
    border-radius: 999px;
    color: var(--sm-muted);
    background: var(--sm-soft);
    font-size: .56rem;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
}

.hub-vita .vita-hub-card--soon::after { display: none; }

body.dark-theme .hub-vita .hub-header {
    background:
        linear-gradient(90deg, rgba(12,35,29,.98) 0%, rgba(12,35,29,.84) 46%, rgba(12,35,29,.28) 82%),
        url('assets/ui/vita-v1/background/vita_sfondo_moschea.png') center right / cover no-repeat,
        var(--sm-surface);
}

body.dark-theme .hub-vita .hub-header .hub-title,
body.dark-theme .hub-vita .hub-header .hub-eyebrow { color: var(--sm-ink); }

@media (max-width: 390px) {
    .hub-vita .hub-header { min-height: 152px; padding-inline: 14px; }
    .hub-vita .hub-card,
    .hub-section.hub-vita .hub-card {
        grid-template-columns: 44px minmax(0,1fr) auto;
        padding-inline: 10px;
        column-gap: 9px;
    }
    .hub-vita .hub-icon.vita-hub-icon { width: 44px; height: 44px; }
    .hub-vita .hub-card strong { font-size: .84rem; }
    .hub-vita .hub-card small { font-size: .66rem; }
    .hub-vita .vita-coming-soon { padding: 4px 6px; font-size: .5rem; }
}

/* Amin remains global and visually coordinated, without warm metallic tones. */
.amin-fab {
    right: 18px;
    bottom: calc(86px + env(safe-area-inset-bottom));
    width: 58px;
    height: 58px;
    padding: 0;
    display: grid;
    place-items: center;
    gap: 0;
    color: #fff;
    background: var(--sm-green);
    border: 5px solid color-mix(in srgb, var(--sm-surface) 92%, transparent);
    box-shadow: 0 12px 30px rgba(24,74,59,.28);
}

.amin-fab svg { width: 23px; height: 23px; }
.amin-fab-label { display: none; }

/* Remove remaining legacy amber presentation while retaining the old token/API names. */
.quick-favorites-btn,
.favorite-star-symbol,
.routine-icon-btn.favorite-active,
.action-icon-btn.active,
.story-readable-line > button.active { color: var(--sm-purple) !important; border-color: var(--sm-purple) !important; }

.quran-reading-point-btn.active,
.story-reader-window-body .story-readable-line > button.active {
    color: var(--sm-ink) !important;
    background: var(--sm-coral-soft) !important;
    border-color: var(--sm-coral) !important;
}

.assistant-source-card { border-left-color: var(--sm-coral); }
[style*="#8c6d1a"] { color: var(--sm-coral) !important; }

body.dark-theme .bottom-nav {
    background: color-mix(in srgb, var(--sm-surface) 94%, transparent);
    border-color: var(--sm-line);
    box-shadow: 0 20px 52px rgba(0,0,0,.48);
}

body.dark-theme .bottom-nav-item { color: var(--sm-muted); }
body.dark-theme .bottom-nav-item svg { color: currentColor; }
body.dark-theme .assistant-quick-btn { background: var(--sm-surface); color: var(--sm-green); border-color: var(--sm-line); }
body.dark-theme .quick-favorites-btn { color: var(--sm-purple) !important; }

@media (max-width: 400px) {
    .app-container { padding-inline: 12px; }
    .hub-routine .hub-grid { gap: 7px; }
    .hub-routine .hub-card { padding: 10px 8px; min-height: 108px; }
    .hub-routine .hub-card strong { font-size: .78rem; }
    .hub-routine .hub-card small { font-size: .64rem; }
    .amin-fab { width: 56px; height: 56px; padding: 0; }
    .amin-fab svg { width: 22px; height: 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .hub-card,
    .amin-fab,
    .bottom-nav-item { transition: none; }
}

/* =========================================================
   HOME — CALENDARIO ISLAMICO
   Frasi e fonti arrivano da content/islamic-calendar.json.
   ========================================================= */
#view-home {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

#view-home .home-islamic-calendar,
#view-home .home-next-prayer-card,
#view-home .home-continue-section,
#view-home .home-small-step,
#view-home #home-location-panel {
    border: 1px solid var(--sm-line);
    border-radius: 20px;
    background: color-mix(in srgb, var(--sm-surface) 97%, transparent);
    box-shadow: 0 9px 28px rgba(34,55,47,.055);
}

.home-islamic-calendar {
    position: relative;
    order: 1;
    overflow: hidden;
    padding: 6px;
    border-color: color-mix(in srgb, #b88938 64%, var(--sm-line));
    background:
        radial-gradient(circle at 92% 4%, rgba(184,137,56,.12), transparent 23%),
        linear-gradient(135deg, transparent 0 94%, rgba(184,137,56,.09) 94% 100%),
        color-mix(in srgb, var(--sm-surface) 98%, #f2dfb5);
}
.home-islamic-calendar::before {
    content: '';
    position: absolute;
    inset: 5px;
    pointer-events: none;
    border: 1px solid color-mix(in srgb, #b88938 55%, transparent);
    border-radius: 16px;
    box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--sm-surface) 88%, transparent), inset 0 0 0 4px color-mix(in srgb, #b88938 24%, transparent);
}
.home-islamic-calendar::after {
    content: '⌁  ◇  ⌁';
    position: absolute;
    top: 11px;
    right: 14px;
    color: rgba(184,137,56,.38);
    font-size: .48rem;
    letter-spacing: .28em;
}
.home-calendar-body { position: relative; display: grid; grid-template-columns: 34% minmax(0, 66%); min-height: 0; padding: 14px 11px; }
.home-calendar-date { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-width: 0; padding: 1px 11px 1px 2px; color: var(--sm-ink); text-align: center; }
.home-calendar-date::after { content: ''; position: absolute; top: 4px; right: 0; bottom: 4px; width: 1px; background: color-mix(in srgb, #b88938 52%, var(--sm-line)); }
.home-calendar-date::before { content: '✦'; position: absolute; z-index: 1; top: 48%; right: -4px; padding: 2px 0; background: color-mix(in srgb, var(--sm-surface) 98%, #f2dfb5); color: #b88938; font-size: .48rem; }
.home-calendar-emblem { position: relative; width: 39px; height: 31px; margin: 0 auto 3px; color: #b88938; }
.home-calendar-emblem::before { content: '☾'; position: absolute; inset: -9px auto auto 1px; font-family: Georgia, serif; font-size: 2.55rem; line-height: 1; }
.home-calendar-emblem span { position: absolute; top: 0; right: 3px; font-size: .66rem; }
.home-calendar-date h2 { margin: 0; color: var(--sm-ink); font-family: 'Playfair Display', Georgia, serif; font-size: clamp(.51rem, 2.18vw, .65rem); font-weight: 700; letter-spacing: .035em; text-transform: uppercase; white-space: nowrap; text-shadow: 0 .4px 0 color-mix(in srgb, var(--sm-ink) 18%, transparent); }
.home-calendar-rule,
.home-calendar-message-rule { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; color: #b88938; }
.home-calendar-rule { margin: 6px 0 8px; }
.home-calendar-rule i,
.home-calendar-message-rule i { width: 28%; height: 1px; background: currentColor; opacity: .55; }
.home-calendar-rule b,
.home-calendar-message-rule b { font-size: .52rem; }
.home-calendar-date > span { font-family: 'Playfair Display', Georgia, serif; font-size: .67rem; font-weight: 700; letter-spacing: .19em; }
.home-calendar-date > strong { margin: -1px 0 -3px; font-family: 'Playfair Display', Georgia, serif; font-size: clamp(3.55rem, 16vw, 4.35rem); font-weight: 500; line-height: .98; }
.home-calendar-date > b { position: relative; width: 90%; padding-bottom: 7px; font-family: 'Playfair Display', Georgia, serif; font-size: .65rem; font-weight: 600; letter-spacing: .2em; }
.home-calendar-date > b::after { content: '◆'; position: absolute; right: 0; bottom: -2px; left: 0; height: 1px; background: color-mix(in srgb, #b88938 55%, transparent); color: #b88938; font-size: .36rem; line-height: 1px; }
.home-calendar-date > em { margin-top: 7px; color: #a7782f; font-family: 'Playfair Display', Georgia, serif; font-size: .62rem; font-style: normal; letter-spacing: .21em; }
.home-calendar-date > small { width: 100%; margin-top: 10px; padding-top: 8px; border-top: 1px solid color-mix(in srgb, #b88938 47%, transparent); color: var(--sm-green); font-family: 'Playfair Display', Georgia, serif; font-size: .54rem; line-height: 1.3; }
.home-calendar-date > small::before,
.home-calendar-date > small::after { content: '❧'; display: inline-block; margin: 0 3px; color: #b88938; font-size: .55rem; }
.home-calendar-date > small::after { transform: scaleX(-1); }
.home-calendar-message { display: flex; flex-direction: column; align-items: stretch; min-width: 0; padding: 1px 1px 1px 13px; text-align: left; }
.home-calendar-message-rule { margin-bottom: 7px; }
.home-calendar-greeting { min-height: 1em; margin: 0 0 4px; color: var(--sm-ink); font-family: 'Playfair Display', Georgia, serif; font-size: .82rem; font-weight: 700; line-height: 1.18; }
.home-calendar-message > #home-calendar-phrase { margin: 0; color: var(--sm-ink); font-family: 'Playfair Display', Georgia, serif; font-size: .72rem; font-weight: 430; line-height: 1.36; letter-spacing: .003em; }
.home-calendar-message mark { display: inline; margin-inline: -.09em; padding: .025em .15em .055em; color: inherit; background: radial-gradient(ellipse 60% 72% at 12% 54%, rgba(215,178,103,.4), transparent 98%), radial-gradient(ellipse 72% 68% at 76% 44%, rgba(215,178,103,.36), transparent 98%), linear-gradient(96deg, transparent 0, rgba(215,178,103,.2) 2.5%, rgba(215,178,103,.36) 19%, rgba(215,178,103,.3) 79%, rgba(215,178,103,.11) 97%, transparent); border-radius: 48% 12% 42% 17% / 27% 54% 21% 47%; box-shadow: .05em .12em 0 rgba(215,178,103,.08), -.04em -.07em 0 rgba(215,178,103,.065); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.home-calendar-message footer { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 56px; align-items: center; width: 100%; box-sizing: border-box; margin-top: 9px; padding: 8px 7px 7px 10px; border: 1px solid color-mix(in srgb, #b88938 68%, var(--sm-line)); border-radius: 10px 16px 10px 16px; background: color-mix(in srgb, var(--sm-surface) 96%, #ead8ae); text-align: center; box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--sm-surface) 88%, transparent), inset 0 0 0 4px color-mix(in srgb, #b88938 24%, transparent); }
.home-calendar-message footer::before,
.home-calendar-message footer::after { content: '✦'; position: absolute; color: #b88938; font-size: .43rem; }
.home-calendar-message footer::before { top: 4px; left: 7px; }
.home-calendar-message footer::after { right: 7px; bottom: 4px; }
.home-calendar-message footer[hidden] { display: none; }
.home-calendar-source-copy { min-width: 0; }
.home-calendar-message footer strong,
.home-calendar-message footer small,
.home-calendar-message footer b { display: block; }
.home-calendar-message footer strong { color: var(--sm-ink); font-family: 'Noto Naskh Arabic', 'Amiri', serif; font-size: .94rem; font-weight: 600; line-height: 1.35; }
.home-calendar-message footer small { margin-top: 2px; color: var(--sm-ink); font-family: 'Playfair Display', Georgia, serif; font-size: .54rem; line-height: 1.25; }
.home-calendar-message footer b { margin-top: 4px; color: #a7782f; font-family: 'Playfair Display', Georgia, serif; font-size: .54rem; font-weight: 700; }
#home-calendar-source-decoration { display: grid; place-items: center; width: 56px; height: 50px; color: var(--sm-green); }
#home-calendar-source-decoration svg { width: 100%; height: 100%; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 1.5px rgba(70,48,20,.16)); }
#home-calendar-source-decoration .home-calendar-quran-shadow { fill: rgba(72,49,23,.13); stroke: none; }
#home-calendar-source-decoration .home-calendar-quran-pages { fill: #efe0b6; stroke: #8e6425; stroke-width: 1.65; }
#home-calendar-source-decoration .home-calendar-quran-cover { fill: color-mix(in srgb, var(--sm-green) 88%, #162c25); stroke: #7c561f; stroke-width: 1.75; }
#home-calendar-source-decoration .home-calendar-quran-detail { fill: none; stroke: #d8b66a; stroke-width: 1.3; }
#home-calendar-source-decoration .home-calendar-quran-medallion { fill: #d8b66a; stroke: #f3dfaa; stroke-width: .55; }
#home-calendar-source-decoration .home-calendar-quran-stand { fill: #8b5f28; stroke: #5f401f; stroke-width: 1.55; }
.home-calendar-hadith-art { display: none; }
.home-calendar-message footer[data-source-type="hadith"] .home-calendar-quran-art { display: none; }
.home-calendar-message footer[data-source-type="hadith"] .home-calendar-hadith-art { display: block; fill: none; color: #a7782f; }

#view-home #home-location-panel { order: 2; margin: 0; padding: 15px; }
.home-location-setup-head { display: flex; align-items: center; gap: 11px; }
.home-location-setup-head > span { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 50%; color: var(--sm-green); background: var(--sm-green-soft); }
.home-location-setup-head .sm-icon { width: 20px; height: 20px; }
.home-location-setup-head strong,
.home-location-setup-head small { display: block; }
.home-location-setup-head strong { color: var(--sm-ink); }
.home-location-setup-head small { margin-top: 2px; color: var(--sm-muted); font-size: .7rem; }
.home-location-privacy { margin: 9px 0 0; color: var(--sm-muted); font-size: .67rem; }
.home-return-gps {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    min-height: 44px;
    margin-top: 12px;
    padding: 9px 12px;
    border: 1px solid var(--sm-border);
    border-radius: var(--sm-radius-sm);
    background: var(--sm-surface);
    color: var(--sm-green);
    font: 700 .78rem/1.2 var(--sm-sans);
}
.home-return-gps .sm-icon { width: 16px; height: 16px; }
.home-location-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.home-location-actions button { min-height: 42px; border: 1px solid var(--sm-green); border-radius: 11px; background: var(--sm-green); color: #fff; font-weight: 800; }
.home-location-actions button + button { background: transparent; color: var(--sm-green); }

#view-home .home-prayer-priority { order: 3; }
.home-next-prayer-card { display: grid; grid-template-columns: 52% 48%; min-height: 184px; margin: 0; padding: 0; overflow: hidden; }
.home-next-prayer-copy { position: relative; z-index: 1; display: flex; flex-direction: column; min-width: 0; padding: 17px 0 14px 17px; }
.home-next-prayer-copy > span { color: var(--sm-green); font-size: .68rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.home-next-prayer-copy > div { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 9px; }
.home-next-prayer-copy h3 { margin: 0; color: var(--sm-ink); font-family: 'Playfair Display', Georgia, serif; font-size: 1.75rem; font-weight: 700; }
.home-next-prayer-copy > div > strong { padding-right: 4px; color: var(--sm-green); font-size: 1rem; }
.home-next-prayer-copy > p { display: flex; align-items: flex-start; gap: 7px; margin: 13px 0 0; color: var(--sm-purple); font-size: .72rem; font-weight: 800; line-height: 1.35; }
.home-next-prayer-copy > p .sm-icon { width: 16px; height: 16px; flex: 0 0 auto; color: var(--sm-coral); }
.home-next-prayer-copy footer { display: flex; align-items: center; justify-content: space-between; gap: 7px; margin-top: auto; font-size: .65rem; }
.home-next-prayer-copy footer > span { display: flex; align-items: center; gap: 4px; min-width: 0; color: var(--sm-muted); white-space: nowrap; }
.home-next-prayer-copy footer .sm-icon { width: 14px; height: 14px; color: var(--sm-green); }
.home-next-prayer-copy footer button { padding: 4px 2px; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: var(--sm-green); font-size: .63rem; font-weight: 850; white-space: nowrap; }
.home-next-prayer-art { position: relative; overflow: hidden; background: var(--sm-green-soft); }
.home-next-prayer-art::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--sm-surface), transparent 34%); }
.home-next-prayer-art img { width: 100%; height: 100%; object-fit: cover; object-position: right center; }

#view-home .home-continue-section { order: 4; margin: 0; padding: 14px; }
#view-home .home-continue-section .routine-box-header { margin-bottom: 10px; }
#view-home .home-continue-section .routine-box-title { color: var(--sm-ink); font-size: .75rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
#view-home .home-continue-row { display:flex; gap:10px; width:100%; max-width:100%; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
#view-home .home-continue-row::-webkit-scrollbar { display:none; }
#view-home .home-continue-row.is-single { display:grid; grid-template-columns:1fr; }
#view-home .home-continue-card { position: relative; }
#view-home .home-continue-card .home-continue-eyebrow { display:block; margin-bottom:5px; color:var(--sm-coral); font-size:.58rem; font-weight:900; letter-spacing:.09em; text-transform:uppercase; }
#view-home .home-continue-card i { position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--sm-ink); font-style:normal; font-size:1.25rem; }
#view-home .home-continue-card strong,#view-home .home-continue-card small { padding-right:18px; }
#view-home .home-continue-card { flex:0 0 calc(82% - 4px); width:calc(82% - 4px); min-width:0; max-width:100%; min-height:94px; padding:13px; border:1px solid var(--sm-line); border-radius:14px; text-align:left; scroll-snap-align:start; }
#view-home .home-continue-row.is-single .home-continue-card { width:100%; }
#view-home .home-continue-card strong { color: var(--sm-ink); font-family: 'Playfair Display', Georgia, serif; font-size: .9rem; line-height: 1.2; }
#view-home .home-continue-card small { margin-top: 6px; color: var(--sm-muted); font-size: .67rem; line-height: 1.35; }

#view-home .home-small-step { order: 5; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; width: 100%; min-height: 104px; padding: 13px 14px; color: var(--sm-ink); text-align: left; }
.home-small-step-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: var(--sm-coral); background: var(--sm-coral-soft); }
.home-small-step-icon .sm-icon { width: 25px; height: 25px; }
.home-small-step > span:nth-child(2) { min-width: 0; }
.home-small-step small,
.home-small-step strong,
.home-small-step b { display: block; }
.home-small-step small { margin-bottom: 4px; color: var(--sm-green); font-size: .63rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.home-small-step strong { font-family: 'Playfair Display', Georgia, serif; font-size: 1rem; }
.home-small-step b { margin-top: 3px; color: var(--sm-muted); font-size: .66rem; font-weight: 500; line-height: 1.35; }
.home-small-step-arrow { width: 19px; height: 19px; transform: rotate(-90deg); color: var(--sm-green); }

/* Home shortcuts: user-owned, separate from favorites and resume. */
#view-home .home-shortcuts { order: 5; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; padding: 14px; overflow: hidden; border: 1px solid var(--sm-line); border-radius: 20px; background: color-mix(in srgb, var(--sm-surface) 97%, transparent); box-shadow: 0 9px 28px rgba(34,55,47,.055); }
.home-shortcuts-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 11px; }
.home-shortcuts-head h3 { margin: 0; color: var(--sm-ink); font-size: .75rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.home-shortcuts-head button { min-height: 38px; padding: 6px 4px; border: 0; background: transparent; color: var(--sm-green); font: 800 .72rem/1 var(--sm-sans); }
.home-shortcuts-rail { display: flex; gap: 9px; width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.home-shortcuts-rail::-webkit-scrollbar { display: none; }
.home-shortcut-tile { flex: 0 0 92px; width: 92px; min-height: 104px; padding: 10px 7px; border: 1px solid var(--sm-line); border-radius: 15px; background: var(--sm-surface); color: var(--sm-ink); text-align: center; scroll-snap-align: start; box-shadow: 0 4px 14px rgba(34,55,47,.045); }
.home-shortcut-tile > span { display: grid; place-items: center; width: 38px; height: 38px; margin: 0 auto 8px; border-radius: 50%; background: var(--sm-green-soft); color: var(--sm-green); font-size: 1.35rem; }
.home-shortcut-tile .sm-icon { width: 20px; height: 20px; }
.home-shortcut-tile > span.is-routine { width: 58px; height: 58px; overflow: hidden; border-radius: 16px; background: transparent; }
.home-shortcut-tile .home-routine-shortcut-icon { width: 58px; height: 58px; max-width: none; object-fit: contain; transform: scale(1.9); transform-origin: center; }
.home-shortcut-tile strong,.home-shortcut-tile small { display: block; overflow: hidden; text-overflow: ellipsis; }
.home-shortcut-tile strong { font-size: .72rem; line-height: 1.15; }
.home-shortcut-tile small { margin-top: 4px; color: var(--sm-muted); font-size: .58rem; white-space: nowrap; }
.home-shortcut-tile.is-add { border-style: dashed; color: var(--sm-green); }
.home-shortcuts-empty { display: grid; place-items: center; width: 100%; min-height: 92px; padding: 15px; border: 1px dashed color-mix(in srgb, var(--sm-green) 45%, var(--sm-line)); border-radius: 15px; background: var(--sm-green-soft); color: var(--sm-green); }
.home-shortcuts-empty strong,.home-shortcuts-empty small { display: block; }
.home-shortcuts-empty strong { font-size: .8rem; }
.home-shortcuts-empty small { margin-top: 5px; color: var(--sm-muted); font-size: .68rem; }

.sm-add-home-action { position: relative; z-index: 4; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; margin: 0 0 10px auto; padding: 8px 12px; border: 1px solid var(--sm-green); border-radius: 999px; background: var(--sm-surface); color: var(--sm-green); font: 800 .7rem/1.1 var(--sm-sans); }
.sm-add-home-action.is-added { background: var(--sm-green); color: #fff; }
.shortcut-sheet-open { overflow: hidden; }
.shortcut-backdrop { position: fixed; z-index: 12000; inset: 0; background: rgba(17,34,29,.38); backdrop-filter: blur(2px); }
.shortcut-sheet { position: fixed; z-index: 12001; right: max(8px,env(safe-area-inset-right)); bottom: 0; left: max(8px,env(safe-area-inset-left)); width: min(560px,calc(100% - 16px)); max-height: min(82dvh,760px); margin-inline: auto; padding: 8px 16px calc(18px + env(safe-area-inset-bottom)); overflow: hidden; border: 1px solid var(--sm-line); border-radius: 22px 22px 0 0; background: var(--sm-surface); box-shadow: 0 -18px 55px rgba(17,34,29,.18); }
.shortcut-sheet-handle { width: 42px; height: 4px; margin: 1px auto 10px; border-radius: 99px; background: var(--sm-line); }
.shortcut-sheet > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.shortcut-sheet > header h2 { margin: 0; color: var(--sm-ink); font-family: 'Playfair Display',Georgia,serif; font-size: 1.25rem; }
.shortcut-sheet > header button { width: 42px; height: 42px; border: 1px solid var(--sm-line); border-radius: 50%; background: var(--sm-surface); color: var(--sm-ink); font-size: 1.35rem; }
.shortcut-search { display: block; margin: 12px 0; }
.shortcut-search input { width: 100%; min-width: 0; min-height: 46px; box-sizing: border-box; padding: 10px 13px; border: 1px solid var(--sm-line); border-radius: 12px; background: var(--sm-bg); color: var(--sm-ink); font: 500 .8rem var(--sm-sans); }
.shortcut-picker-list,.shortcut-manager-list { max-height: calc(min(82dvh,760px) - 155px); overflow-y: auto; overscroll-behavior: contain; }
.shortcut-picker-list h3 { margin: 16px 0 7px; color: var(--sm-coral); font-size: .65rem; letter-spacing: .09em; }
.shortcut-picker-row,.shortcut-manage-row { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 9px; min-width: 0; padding: 10px 0; border-bottom: 1px solid var(--sm-line); }
.shortcut-picker-icon,.shortcut-manage-row > span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--sm-green-soft); color: var(--sm-green); }
.shortcut-picker-icon .sm-icon,.shortcut-manage-row .sm-icon { width: 18px; height: 18px; }
.shortcut-picker-icon,
.shortcut-manage-row > span { overflow: hidden; }
.shortcut-official-icon { width: 100%; height: 100%; display: block; object-fit: cover; transform-origin: center; }
.home-shortcut-icon .shortcut-official-icon { width: 100%; height: 100%; object-fit: cover; }
.shortcut-picker-row.is-disabled { opacity: .62; }
.shortcut-picker-row.is-disabled > button { border-color: var(--sm-line); background: var(--sm-green-soft); color: var(--sm-muted); cursor: not-allowed; }
.shortcut-coming-soon { color: var(--sm-coral) !important; font-weight: 800; text-transform: uppercase; letter-spacing: .045em; }
.shortcut-picker-row > span:nth-child(2) { min-width: 0; }
.shortcut-picker-row strong,.shortcut-picker-row small { display: block; }
.shortcut-picker-row strong { color: var(--sm-ink); font-size: .76rem; }
.shortcut-picker-row small { margin-top: 2px; color: var(--sm-muted); font-size: .62rem; }
.shortcut-picker-row > button { min-height: 38px; max-width: 120px; padding: 7px 10px; border: 1px solid var(--sm-green); border-radius: 10px; background: var(--sm-green); color: #fff; font: 800 .64rem var(--sm-sans); }
.shortcut-picker-row > button.is-added { background: var(--sm-surface); color: var(--sm-coral); border-color: var(--sm-coral); }
.shortcut-manage-row { grid-template-columns: 38px minmax(0,1fr) auto; }
.shortcut-manage-row > strong { min-width: 0; color: var(--sm-ink); font-size: .76rem; }
.shortcut-manage-row > div { display: flex; gap: 5px; }
.shortcut-manage-row button { min-width: 36px; min-height: 36px; padding: 5px; border: 1px solid var(--sm-line); border-radius: 9px; background: var(--sm-bg); color: var(--sm-green); }
.shortcut-manage-row button:disabled { opacity: .35; }
.shortcut-manage-row button.is-remove { padding-inline: 8px; color: var(--sm-coral); }
.shortcut-manager-add { width: 100%; min-height: 46px; margin-top: 12px; border: 0; border-radius: 12px; background: var(--sm-green); color: #fff; font-weight: 850; }
.shortcut-manager-empty { padding: 24px 8px; color: var(--sm-muted); text-align: center; }
.shortcut-live { position: absolute; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom)); left: 16px; display: none; padding: 10px 12px; border-radius: 11px; background: var(--sm-green); color: #fff; }
.shortcut-live.is-on { display: grid; }
.shortcut-live span { font-size: .65rem; }

@media (max-width: 390px) {
  .home-shortcut-tile { flex-basis: 86px; width: 86px; }
  .home-shortcut-tile > span.is-routine,
  .home-shortcut-tile .home-routine-shortcut-icon { width: 56px; height: 56px; }
  .shortcut-sheet { padding-inline: 12px; }
  .shortcut-picker-row > button { max-width: 105px; padding-inline: 7px; font-size: .6rem; }
  .shortcut-manage-row button.is-remove { font-size: .58rem; }
}

#view-home #home-daily-times-container { order: 6; }
#view-home #home-notifications-container { order: 7; }
#view-home #home-settings-container { order: 8; }

@media (max-width: 400px) {
    .home-islamic-calendar { padding: 6px; }
    .home-calendar-body { grid-template-columns: 33% minmax(0, 67%); padding: 13px 8px; }
    .home-calendar-date { padding-right: 8px; }
    .home-calendar-date h2 { font-size: .495rem; letter-spacing: .022em; }
    .home-calendar-date > strong { font-size: 3.5rem; }
    .home-calendar-date > span { font-size: .61rem; }
    .home-calendar-message { padding-left: 10px; }
    .home-calendar-greeting { font-size: .77rem; }
    .home-calendar-message > #home-calendar-phrase { font-size: .66rem; line-height: 1.31; }
    .home-calendar-message footer { grid-template-columns: minmax(0, 1fr) 48px; padding: 7px 5px 6px 8px; }
    .home-calendar-message footer strong { font-size: .84rem; }
    .home-calendar-message footer small,
    .home-calendar-message footer b { font-size: .49rem; }
    #home-calendar-source-decoration { width: 48px; height: 44px; }
    .home-next-prayer-card { grid-template-columns: 54% 46%; }
    .home-next-prayer-copy { padding-left: 14px; }
    .home-next-prayer-copy h3 { font-size: 1.55rem; }
}
/* Matrimonio e Gravidanza: componenti editoriali data-driven. */
.smart-guide-question { margin: 18px 0 24px; display: grid; gap: 10px; }
.smart-guide-question textarea { min-height: 92px; resize: vertical; }
.smart-guide-question .counter-btn { background: var(--primary); color: #fff; min-height: 46px; }
.smart-guide-note, .smart-guide-stage-head p { margin: 0; color: var(--text-muted, #64716c); font-size: .88rem; line-height: 1.5; }
.smart-guide-stage { margin: 26px 0; }
.smart-guide-stage-head { margin-bottom: 12px; }
.smart-guide-stage-head h3 { margin: 0 0 4px; color: var(--text-primary, #173c32); }
.smart-guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.smart-guide-card { width: 100%; min-height: 132px; border: 1px solid var(--border, rgba(18,64,52,.14)); border-radius: 16px; padding: 15px; background: var(--card-bg, #fff); color: var(--text-primary, #173c32); text-align: left; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 5px 16px rgba(23,60,50,.06); cursor: pointer; }
.smart-guide-card:hover { transform: translateY(-1px); border-color: var(--primary); }
.smart-guide-card > span { color: var(--primary); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .035em; }
.smart-guide-card > strong { font-size: 1rem; line-height: 1.25; }
.smart-guide-card > small { color: var(--text-muted, #64716c); font-size: .82rem; line-height: 1.45; }
.smart-guide-answer { margin-top: 4px; }
.smart-guide-answer:empty { display: none; }
.smart-guide-answer-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 0; }
.smart-guide-answer-badge { color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); border-radius: 999px; padding: 6px 10px; font-size: .75rem; font-weight: 700; }
.smart-guide-loading, .smart-guide-unavailable, .smart-guide-remote { border-radius: 14px; padding: 14px; background: color-mix(in srgb, var(--primary) 6%, var(--card-bg, #fff)); }
.smart-guide-open-source { min-height: 42px; margin: 12px 0; border: 1px solid var(--primary); border-radius: 12px; padding: 8px 13px; background: transparent; color: var(--primary); font-weight: 700; cursor: pointer; }
.smart-guide-reader[hidden] { display: none; }
.smart-guide-reader { position: fixed; inset: 0; z-index: 10020; background: rgba(7,25,20,.62); display: grid; place-items: end center; padding: 18px; }
.smart-guide-reader-sheet { width: min(720px, 100%); max-height: 92vh; overflow: auto; position: relative; border-radius: 24px 24px 16px 16px; background: var(--bg, #faf8f2); color: var(--text-primary, #173c32); padding: 26px 22px 34px; box-shadow: 0 22px 80px rgba(0,0,0,.28); }
.smart-guide-reader-sheet h2 { margin: 8px 40px 3px 0; }
.smart-guide-reader-sheet h3 { margin: 24px 0 8px; }
.smart-guide-subtitle { margin: 0 0 20px; color: var(--text-muted, #64716c); }
.smart-guide-body { line-height: 1.68; }
.smart-guide-close { position: absolute; right: 14px; top: 12px; width: 42px; height: 42px; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--text-primary, #173c32); font-size: 1.75rem; cursor: pointer; }
.smart-guide-safety { margin-top: 22px; padding: 12px 14px; border-left: 3px solid var(--primary); background: color-mix(in srgb, var(--primary) 7%, transparent); border-radius: 4px 12px 12px 4px; font-size: .88rem; line-height: 1.5; }
body.smart-guide-open { overflow: hidden; }
@media (max-width: 560px) {
    .smart-guide-grid { grid-template-columns: 1fr; }
    .smart-guide-reader { padding: 0; }
    .smart-guide-reader-sheet { max-height: 94vh; border-radius: 22px 22px 0 0; padding: 24px 18px 32px; }
}

/* =========================================================
   V2 Stories subnav (Impara → Storie): 4 pill coerenti con Sorelle
   Riutilizza .category-nav + .nav-tab; specificita locale per garantire
   fit su 390x844 senza scroll, senza wrap, senza dipendenza da #view-*.
   ========================================================= */
.stories-category-nav {
    display: flex;
    gap: 6px;
    margin-top: 12px;
    padding: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.stories-category-nav::-webkit-scrollbar { display: none; }
.stories-category-nav .nav-tab {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 8px;
    border: 1px solid var(--sm-line, var(--border-color));
    border-radius: 999px;
    background: var(--sm-paper, var(--bg-light));
    color: var(--sm-forest, var(--primary));
    font: 600 .82rem/1 Inter, system-ui, sans-serif;
    letter-spacing: .01em;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
    white-space: nowrap;
    min-height: 40px;
}
.stories-category-nav .nav-tab .sm-icon {
    width: 18px; height: 18px; flex: 0 0 auto;
}
.stories-category-nav .nav-tab.active {
    background: var(--sm-forest, var(--primary));
    color: #fff;
    border-color: var(--sm-forest, var(--primary));
    box-shadow: 0 2px 6px rgba(23, 61, 53, .18);
}
.stories-category-nav .nav-tab.active .sm-icon { color: #fff; }
.stories-category-nav .nav-tab:hover:not(.active) { border-color: var(--sm-forest, var(--primary)); }

/* Mobile 390: garantisce 4 pill su una riga */
@media (max-width: 430px) {
    .stories-category-nav { gap: 5px; }
    .stories-category-nav .nav-tab { padding: 8px 6px; font-size: .78rem; min-height: 40px; }
    .stories-category-nav .nav-tab .sm-icon { width: 17px; height: 17px; }
}
@media (max-width: 360px) {
    .stories-category-nav .nav-tab { padding: 8px 5px; font-size: .74rem; gap: 4px; }
    .stories-category-nav .nav-tab .sm-icon { width: 16px; height: 16px; }
}

body.dark-theme .stories-category-nav .nav-tab {
    background: var(--bg-light);
    color: var(--primary);
    border-color: var(--border-color);
}
body.dark-theme .stories-category-nav .nav-tab.active {
    background: var(--primary);
    color: var(--text-light);
    border-color: var(--primary);
}

/* =========================================================
   V2 Stories page - presentazione dinamica per collection
   Header serif centrato + pill icona-sopra (stile Sorelle)
   ========================================================= */
.stories-page-heading {
    text-align: center;
    padding: 22px 14px 10px;
    display: grid;
    justify-items: center;
    gap: 10px;
}
.stories-page-heading h1 {
    margin: 0;
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: 1.85rem;
    line-height: 1.15;
    color: var(--sm-forest, var(--primary));
    letter-spacing: -.01em;
}
.stories-page-heading .stories-page-divider {
    width: 42px; height: 2px;
    background: var(--sm-forest, var(--primary));
    opacity: .55;
    border-radius: 2px;
}
.stories-page-heading p {
    margin: 0;
    max-width: 42ch;
    font-size: .92rem;
    line-height: 1.5;
    color: var(--text-muted);
}
body.dark-theme .stories-page-heading h1 { color: var(--primary); }

/* Pill Stories - override: icona sopra, testo sotto, forma piu ariosa (stile Sorelle) */
.stories-category-nav {
    display: flex !important;
    gap: 8px !important;
    margin: 6px 14px 18px;
    padding: 0;
    overflow: visible;
}
.stories-category-nav .nav-tab {
    flex: 1 1 0 !important;
    min-width: 0;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 11px 6px !important;
    min-height: 66px;
    border: 1px solid var(--sm-line, var(--border-color)) !important;
    border-radius: 18px !important;
    background: var(--sm-paper, var(--bg-light)) !important;
    color: var(--sm-forest, var(--primary)) !important;
    font: 700 .74rem/1.1 Inter, system-ui, sans-serif !important;
    letter-spacing: .01em;
    text-align: center;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.stories-category-nav .nav-tab .sm-icon {
    width: 22px !important; height: 22px !important;
    flex: 0 0 auto;
    color: var(--sm-forest, var(--primary));
}
.stories-category-nav .nav-tab.active {
    background: var(--sm-forest, var(--primary)) !important;
    color: #fff !important;
    border-color: var(--sm-forest, var(--primary)) !important;
    box-shadow: 0 4px 12px rgba(23, 61, 53, .22);
}
.stories-category-nav .nav-tab.active .sm-icon { color: #fff !important; }
.stories-category-nav .nav-tab:hover:not(.active) {
    border-color: var(--sm-forest, var(--primary)) !important;
    transform: translateY(-1px);
}

/* Mobile 390: 4 pill in una riga */
@media (max-width: 430px) {
    .stories-page-heading { padding: 18px 12px 6px; }
    .stories-page-heading h1 { font-size: 1.6rem; }
    .stories-page-heading p { font-size: .86rem; }
    .stories-category-nav { gap: 6px !important; margin: 6px 10px 14px; }
    .stories-category-nav .nav-tab {
        padding: 10px 4px !important;
        min-height: 62px;
        font-size: .68rem !important;
        border-radius: 16px !important;
    }
    .stories-category-nav .nav-tab .sm-icon { width: 20px !important; height: 20px !important; }
}
@media (max-width: 360px) {
    .stories-category-nav .nav-tab { font-size: .64rem !important; padding: 9px 3px !important; }
    .stories-category-nav .nav-tab .sm-icon { width: 18px !important; height: 18px !important; }
}

/* Controls (search + sort) piu leggeri, fuori da grande card */
.stories-controls {
    padding: 0 14px;
    margin-bottom: 14px;
    display: grid;
    gap: 8px;
}
.stories-controls .search-wrapper { margin: 0; }
.stories-controls .search-input {
    min-height: 46px;
    border-radius: 14px;
    border: 1px solid var(--sm-line, var(--border-color));
    background: var(--sm-paper, var(--bg-light));
    padding: 0 14px;
    font-size: .92rem;
    color: var(--text-dark);
}
.stories-sort-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 2px 4px;
}
.stories-sort-label {
    font-size: .78rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: .02em;
}
.stories-controls .counter-select {
    max-width: 220px;
    padding: 6px 10px;
    border-radius: 10px;
    border: 1px solid var(--sm-line, var(--border-color));
    background: var(--sm-paper, var(--bg-light));
    color: var(--text-dark);
    font: 600 .82rem Inter, system-ui, sans-serif;
}

/* Intro dinamica breve */
.stories-intro {
    margin: 4px 14px 16px;
    padding: 12px 14px;
    font-size: .88rem;
    line-height: 1.55;
    color: var(--text-dark);
    font-style: italic;
    background: var(--sm-sage-soft, var(--primary-light));
    border-left: 3px solid var(--sm-forest, var(--primary));
    border-radius: 10px;
}
body.dark-theme .stories-intro {
    background: rgba(127, 179, 157, .08);
    color: var(--text-dark);
}

/* =========================================================
   V2 Profeti page — griglia cover-based (mockup approvato)
   Cover HD in assets/stories/prophets/<slug>.jpg (fallback SVG elegante)
   ========================================================= */
.prophets-section-heading {
    margin: 8px 14px 12px;
    padding: 0;
    font: 800 .78rem/1 Inter, system-ui, sans-serif;
    letter-spacing: .14em;
    color: #b9603d;  /* coral cipria del design system */
    text-transform: uppercase;
}
.prophets-hero-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 0 14px 24px;
}
@media (max-width: 640px) {
    .prophets-hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 12px 24px; }
    .prophets-section-heading { margin: 6px 12px 10px; font-size: .74rem; }
}
@media (max-width: 380px) {
    .prophets-hero-grid { gap: 8px; }
}

.prophets-cover-card {
    display: flex;
    flex-direction: column;
    background: var(--sm-paper, var(--bg-light));
    border: 1px solid var(--sm-line, var(--border-color));
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    box-shadow: 0 2px 6px rgba(53, 45, 36, .04);
}
.prophets-cover-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(53, 45, 36, .1);
    border-color: var(--sm-forest, var(--primary));
}
.prophets-cover-card:active { transform: translateY(0); }

.prophets-cover-imgwrap {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, #f4ecdb, #e6d9bd);
    overflow: hidden;
}
.prophets-cover-img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.prophets-cover-fav {
    position: absolute;
    top: 8px; right: 8px;
    width: 28px; height: 28px;
    display: grid; place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 253, 246, .85);
    color: var(--sm-forest, var(--primary));
    font-size: 15px; line-height: 1;
    cursor: pointer;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
    transition: background .15s ease, transform .1s ease;
}
.prophets-cover-fav.active { background: #f0c24b; color: #5d4100; }
.prophets-cover-fav:hover { transform: scale(1.05); }

.prophets-cover-body {
    padding: 10px 12px 6px;
    display: grid;
    gap: 2px;
    min-height: 62px;
}
.prophets-cover-title {
    margin: 0;
    font: 700 .95rem/1.2 'Playfair Display', Georgia, serif;
    color: var(--sm-forest-deep, var(--primary));
}
.prophets-cover-sub {
    margin: 0;
    font: 500 .72rem/1.35 Inter, system-ui, sans-serif;
    color: var(--text-muted);
}
@media (max-width: 640px) {
    .prophets-cover-title { font-size: .88rem; }
    .prophets-cover-sub { font-size: .68rem; }
    .prophets-cover-body { padding: 9px 10px 5px; min-height: 58px; }
}

/* Progress bar (fondo card, sottile, verde bosco) */
.prophets-cover-progress {
    position: relative;
    margin: 4px 12px 12px;
    height: 5px;
    background: rgba(23, 61, 53, .1);
    border-radius: 999px;
    overflow: visible;
}
.prophets-cover-progress-fill {
    display: block;
    height: 100%;
    background: var(--sm-forest, var(--primary));
    border-radius: 999px;
    transition: width .3s ease;
}
.prophets-cover-progress-label {
    position: absolute;
    top: -18px;
    right: 0;
    font: 700 .68rem/1 Inter, system-ui, sans-serif;
    color: var(--sm-forest, var(--primary));
    opacity: .82;
}

/* Dark theme */
body.dark-theme .prophets-cover-card {
    background: var(--bg-light);
    border-color: var(--border-color);
}
body.dark-theme .prophets-cover-title { color: var(--primary); }
body.dark-theme .prophets-cover-progress { background: rgba(127, 179, 157, .14); }
body.dark-theme .prophets-cover-progress-fill { background: var(--primary); }
body.dark-theme .prophets-cover-progress-label { color: var(--primary); }
body.dark-theme .prophets-section-heading { color: #f0a683; }

/* Donne dell'Islam — stessa griglia editoriale cover-based di Profeti/Sahaba. */
.women-stories-grid { padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
.women-cover-img { object-position: center; }
.women-cover-card .prophets-cover-sub {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
.stories-empty-message {
    margin: 10px 14px 120px;
    padding: 24px 18px;
    border: 1px solid var(--sm-line, var(--border-color));
    border-radius: 18px;
    background: var(--sm-paper, var(--bg-light));
    color: var(--text-muted);
    text-align: center;
}
.story-episode-references {
    margin: -3px 4px 16px;
    color: var(--text-muted);
    font-size: .72rem;
    line-height: 1.45;
}
.prophet-reader-cover { object-position: center; }
.prophet-reader-narrative { margin-top: 2px; }
.prophet-reader-episode { margin: 0; }
.prophet-reader-episode h3 {
    margin: 22px 0 4px;
    color: var(--primary);
    font: 700 1.18rem/1.3 'Playfair Display', Georgia, serif;
}
.prophet-reader-episode:first-child h3 { margin-top: 4px; }
.prophet-reader-episode .story-readable-line {
    padding-top: 7px;
    padding-bottom: 10px;
    border-bottom: 0;
}
.prophet-reader-today {
    margin-top: 18px;
    padding: 16px;
    border-left: 3px solid var(--primary);
    border-radius: 4px 14px 14px 4px;
    background: var(--bg-warm);
}
.prophet-reader-today h3 { margin-top: 0; }
.prophet-reader-today p { margin-bottom: 0; line-height: 1.6; }

/* Sahaba V2 — pagina autonoma, stesso sistema editoriale Profeti. */
#view-sahaba,#sahaba-page-root { width: 100%; max-width: 100%; min-width: 0; overflow-x: hidden; }

/* Ahadith V1 — editoriale, text-first, nello stesso design system di Impara. */
#view-ahadith,#ahadith-page-root{width:100%;max-width:100%;min-width:0;overflow-x:hidden;box-sizing:border-box}
#ahadith-page-root{padding-bottom:calc(118px + env(safe-area-inset-bottom))}
.ahadith-view button,.ahadith-view input{font:inherit;box-sizing:border-box}
.ahadith-heading{margin-bottom:16px}
.ahadith-callout{margin:20px 0!important}
.ahadith-search{margin:0 0 14px}.ahadith-search .search-input{width:100%;min-height:52px;font-size:16px}
.ahadith-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;margin-bottom:24px}
.ahadith-tabs .smart-segmented-item{min-width:0;padding-inline:7px;white-space:nowrap}
.ahadith-daily,.ahadith-collections,.ahadith-results{margin:22px 0}
.ahadith-daily>button{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:7px;text-align:left;border:1px solid var(--pearl-border,#d9d1c2);border-radius:22px;padding:20px;background:linear-gradient(135deg,var(--pearl-card,#fffdf8),#edf3ed);color:var(--pearl-green,#0d5a48);box-shadow:0 8px 22px rgba(35,58,49,.06)}
.ahadith-daily strong{font-family:var(--font-display,Georgia,serif);font-size:1.35rem;line-height:1.15}.ahadith-daily span{color:var(--text-muted,#68716c);line-height:1.45}.ahadith-daily em{font-style:normal;font-weight:800;color:var(--coral,#c9655d)}
.ahadith-collection-list,.ahadith-practice-list{display:grid;gap:12px;margin-top:12px}
.ahadith-collection-card{width:100%;display:grid;grid-template-columns:54px minmax(0,1fr) 20px;gap:14px;align-items:center;text-align:left;border:1px solid var(--pearl-border,#d9d1c2);border-radius:18px;padding:15px;background:var(--pearl-card,#fffdf8);color:var(--pearl-green,#0d5a48);box-shadow:0 4px 14px rgba(35,58,49,.045)}
.ahadith-collection-icon{width:54px;height:54px;display:grid;place-items:center;border-radius:50%;background:#f6e5e1;color:var(--coral,#c9655d);font-size:1.55rem;font-family:Georgia,serif;flex:none}
.ahadith-collection-copy{min-width:0;display:flex;flex-direction:column;gap:3px}.ahadith-collection-copy strong{font-family:var(--font-display,Georgia,serif);font-size:1.15rem}.ahadith-collection-copy small{font-size:.88rem;line-height:1.3;color:var(--text-muted,#6f7772)}.ahadith-collection-copy em{font-size:.72rem;font-weight:800;font-style:normal;text-transform:uppercase;letter-spacing:.04em;color:var(--coral,#c9655d)}.ahadith-chevron{font-size:1.7rem;color:#7a827d}
.ahadith-practice-card{position:relative;border:1px solid var(--pearl-border,#d9d1c2);border-radius:18px;padding:17px;background:var(--pearl-card,#fffdf8);box-shadow:0 4px 14px rgba(35,58,49,.045);cursor:pointer;min-width:0}
.ahadith-card-top{display:flex;justify-content:space-between;align-items:center;gap:10px}.ahadith-save-mini{width:38px;height:38px;border:1px solid var(--pearl-border,#d9d1c2);border-radius:50%;background:#fffdf8;color:var(--pearl-green,#0d5a48);font-size:1.25rem}.ahadith-save-mini.is-saved{color:var(--coral,#c9655d)}
.ahadith-practice-card h3{margin:9px 0 6px;font-family:var(--font-display,Georgia,serif);font-size:1.25rem;line-height:1.18;color:var(--pearl-green,#0d5a48)}.ahadith-practice-card p{margin:0 0 12px;color:var(--text-muted,#68716c);line-height:1.45}.ahadith-source-chip{display:inline-flex;max-width:100%;padding:6px 9px;border-radius:999px;background:#edf2ed;color:#496158;font-size:.72rem;font-weight:700;white-space:normal}
.ahadith-more{display:block;width:100%;min-height:48px;margin-top:15px;border:1px solid var(--pearl-green,#0d5a48);border-radius:14px;background:transparent;color:var(--pearl-green,#0d5a48);font-weight:800}
.ahadith-empty,.ahadith-loading{padding:28px 18px;text-align:center;border:1px solid var(--pearl-border,#d9d1c2);border-radius:18px;background:var(--pearl-card,#fffdf8)}
.ahadith-back{margin:4px 0 20px}.ahadith-collection-head{display:flex;gap:15px;align-items:center;margin-bottom:24px}.ahadith-collection-head h1{margin:3px 0;font-family:var(--font-display,Georgia,serif);font-size:2rem;color:var(--pearl-green,#0d5a48)}.ahadith-collection-head p{margin:0 0 4px;color:var(--text-muted,#68716c);line-height:1.4}.ahadith-collection-head small{font-weight:800;color:var(--coral,#c9655d)}
.ahadith-reader .story-reader-window-body{padding-bottom:calc(40px + env(safe-area-inset-bottom))}.ahadith-reader-hook{font-family:var(--font-display,Georgia,serif);font-size:1.25rem;line-height:1.45;color:var(--pearl-green,#0d5a48);border-left:3px solid var(--coral,#c9655d);padding:8px 0 8px 15px}
.ahadith-formula,.ahadith-reader-section,.ahadith-reader-source,.ahadith-quran-refs{margin:16px 0;padding:17px;border:1px solid var(--pearl-border,#d9d1c2);border-radius:17px;background:#fffdf8}
.ahadith-arabic{font-family:var(--font-arabic,'Noto Naskh Arabic',serif);font-size:1.75rem!important;line-height:1.85!important;text-align:right;color:var(--pearl-green,#0d5a48)}.ahadith-transliteration{font-style:italic;line-height:1.55}.ahadith-translation{color:var(--text-muted,#68716c);line-height:1.55}.ahadith-repetition{display:inline-flex;padding:5px 9px;border-radius:999px;background:#f6e5e1;color:var(--coral,#c9655d);font-weight:900}
.ahadith-formula-steps{display:grid;gap:12px;margin:16px 0}.ahadith-formula-step{display:grid;grid-template-columns:32px minmax(0,1fr);gap:10px;align-items:start}.ahadith-formula-step>span{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:var(--pearl-green,#0d5a48);color:#fff;font-weight:800}.ahadith-formula-step .ahadith-formula{margin:0}.ahadith-formula-step strong{display:block;margin:5px 0;color:var(--pearl-green,#0d5a48)}
.ahadith-quran-ref{width:100%;min-height:50px;border:1px solid var(--pearl-green,#0d5a48);border-radius:14px;background:#edf3ed;color:var(--pearl-green,#0d5a48);font-weight:800}.ahadith-reader-section h3{margin:0 0 8px;font-family:var(--font-display,Georgia,serif);color:var(--pearl-green,#0d5a48)}.ahadith-reader-section p{margin:0;line-height:1.55}.ahadith-daily-application{background:#edf3ed}.ahadith-reader-source{display:flex;flex-direction:column;gap:4px}.ahadith-reader-source span{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--coral,#c9655d);font-weight:900}.ahadith-reader-source strong{line-height:1.4;color:var(--pearl-green,#0d5a48)}
.ahadith-reader-actions{display:grid;gap:10px;margin-top:18px}.ahadith-save,.ahadith-routine-cta{width:100%;min-height:52px;border-radius:15px;font-weight:900}.ahadith-save{border:1px solid var(--pearl-green,#0d5a48);background:#fffdf8;color:var(--pearl-green,#0d5a48)}.ahadith-save.is-saved{color:var(--coral,#c9655d)}.ahadith-routine-cta{border:0;background:var(--pearl-green,#0d5a48);color:#fff}.ahadith-formula-missing{padding:14px;border:1px solid #bd4949;border-radius:12px;color:#8b2929;background:#fff3f3}
@media(max-width:390px){.ahadith-tabs .smart-segmented-item{font-size:.73rem;padding-inline:3px}.ahadith-collection-card{grid-template-columns:48px minmax(0,1fr) 16px;padding:13px;gap:11px}.ahadith-collection-icon{width:48px;height:48px}.ahadith-practice-card{padding:15px}}
.sahaba-page-heading { position: relative; padding-top: 22px; }
.sahaba-page-heading .hub-eyebrow { display: block; margin-bottom: 8px; color: #b9603d; font-size: .72rem; font-weight: 850; letter-spacing: .14em; }
.sahaba-back { position: absolute; left: 14px; top: 18px; border: 1px solid var(--border-color); border-radius: 999px; padding: 8px 11px; background: var(--bg-light); color: var(--primary); font: 750 .75rem/1 Inter,system-ui,sans-serif; }
.sahaba-controls { margin-top: 8px; }
.sahaba-empty { margin: 10px 14px 120px; padding: 24px 18px; border: 1px solid var(--border-color); border-radius: 18px; background: var(--bg-light); text-align: center; }
.sahaba-empty h2 { margin: 0 0 6px; color: var(--primary); font-family: 'Playfair Display',Georgia,serif; }
.sahaba-empty p { margin: 0; color: var(--text-muted); }
.sahaba-reader .story-reader-window-head p { margin: 5px 0 0; color: var(--text-muted); font-size: .82rem; }
.sahaba-reader-cover { width: 100%; aspect-ratio: 16/8; object-fit: cover; border: 1px solid var(--border-color); border-radius: 16px; margin-bottom: 16px; }
.sahaba-reader-summary { margin: 0 0 18px; padding: 14px; border-left: 3px solid var(--primary); border-radius: 4px 12px 12px 4px; background: var(--bg-warm); color: var(--text-dark); font: 600 .95rem/1.55 Inter,system-ui,sans-serif; }
.sahaba-reader-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
.sahaba-reader-nav button { min-height: 44px; border: 1px solid var(--primary); border-radius: 12px; background: var(--bg-light); color: var(--primary); font-weight: 800; }
.sahaba-cover-img { object-position: center; }
.sahaba-preparing { margin: 18px 0; padding: 28px 20px; border: 1px solid var(--border-color); border-radius: 18px; background: var(--bg-warm); text-align: center; }
.sahaba-preparing span { color: #b9603d; font-size: .68rem; font-weight: 900; letter-spacing: .14em; }
.sahaba-preparing h3 { margin: 8px 0 6px; color: var(--primary); font-family: 'Playfair Display',Georgia,serif; font-size: 1.35rem; }
.sahaba-preparing p { margin: 0; color: var(--text-muted); line-height: 1.5; }
@media (max-width:640px) {
  .sahaba-page-heading { padding-top: 22px; }
  #view-sahaba .prophets-hero-grid { padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
}

/* =========================================================
   V2 ROUTINE — Fase 1
   Home Routine + Come ti senti? + Dopo <Salah>
   Usa i token esistenti: --sm-paper --sm-line --sm-forest --sm-forest-deep
   --sm-muted --sm-coral --sm-sage-soft (fallback su --bg-light/--primary/...)
   ========================================================= */
.rt-section { padding: 0 0 130px; max-width: 720px; margin: 0 auto; }

/* ---- Header ---- */
.rt-header { padding: 16px 16px 4px; text-align: center; }
.rt-header-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.rt-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--sm-line, var(--border-color));
  background: var(--sm-paper, var(--bg-light));
  color: var(--sm-forest, var(--primary));
  font: 600 .82rem Inter, system-ui, sans-serif; cursor: pointer;
}
.rt-chip .sm-icon { width: 16px; height: 16px; }
.rt-header-actions { display: flex; gap: 8px; }
.rt-icon-btn {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: transparent;
  color: var(--sm-forest, var(--primary)); cursor: pointer;
}
.rt-icon-btn .sm-icon { width: 22px; height: 22px; }
.rt-title {
  margin: 4px 0 0; font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700; font-size: 2rem; line-height: 1.1;
  color: var(--sm-forest-deep, var(--primary)); letter-spacing: -.01em;
}
.rt-divider {
  display: block; width: 120px; height: 1px; margin: 10px auto 8px;
  background: linear-gradient(90deg, transparent, var(--sm-coral, #b9603d) 35%, var(--sm-coral, #b9603d) 65%, transparent);
  opacity: .5; position: relative;
}
.rt-divider::after {
  content: '✦'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  color: var(--sm-coral, #b9603d); font-size: .6rem; background: var(--bg-warm, #f3eadc); padding: 0 5px;
}
.rt-subtitle { margin: 0 0 4px; font-size: .92rem; line-height: 1.45; color: var(--text-muted); }
.rt-header-sub { padding-top: 22px; position: relative; }
.rt-back {
  position: absolute; left: 12px; top: 18px;
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 0; background: transparent; color: var(--sm-forest, var(--primary));
  font-size: 1.8rem; line-height: 1; cursor: pointer;
}
.rt-back-box {
  border: 1px solid var(--sm-line, var(--border-color)); border-radius: 12px;
  background: var(--sm-paper, var(--bg-light)); font-size: 1.2rem;
}

/* ---- Card base ---- */
.rt-card {
  margin: 12px 14px; padding: 16px;
  background: var(--sm-paper, var(--bg-light));
  border: 1px solid var(--sm-line, var(--border-color));
  border-radius: 18px;
  box-shadow: 0 2px 8px rgba(53, 45, 36, .04);
}
.rt-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.rt-card-head-split { justify-content: space-between; }
.rt-card-head h2 {
  margin: 0; font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.18rem; font-weight: 700; color: var(--sm-forest-deep, var(--primary));
}
.rt-card-icon {
  width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center;
  border-radius: 12px; background: var(--sm-sage-soft, var(--primary-light));
  color: var(--sm-forest, var(--primary));
}
.rt-card-icon .sm-icon { width: 21px; height: 21px; }
.rt-eyebrow {
  font: 800 .72rem Inter, system-ui, sans-serif; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-muted);
}
.rt-link { border: 0; background: transparent; color: var(--sm-forest, var(--primary)); font: 600 .82rem Inter, sans-serif; cursor: pointer; }
.rt-chevron { color: var(--text-muted); font-size: 1.15rem; font-style: normal; flex: 0 0 auto; }

/* ---- Oggi ---- */
.rt-today-count { margin: 6px 0 10px; font-size: 1.05rem; color: var(--sm-forest-deep, var(--primary)); font-family: 'Playfair Display', Georgia, serif; }
.rt-today-count b { font-size: 1.7rem; font-weight: 700; }
.rt-progress { height: 6px; border-radius: 999px; background: rgba(23, 61, 53, .1); overflow: hidden; }
.rt-progress i { display: block; height: 100%; border-radius: 999px; background: var(--sm-forest, var(--primary)); transition: width .3s ease; }
.rt-today-note { display: block; margin-top: 8px; font-size: .8rem; color: var(--text-muted); }

/* ---- La mia giornata (timeline) ---- */
.rt-day-list { list-style: none; margin: 0; padding: 0; }
.rt-day-row {
  display: grid; grid-template-columns: 22px 36px 1fr auto;
  align-items: center; gap: 10px; padding: 11px 0;
  border-bottom: 1px solid rgba(134, 116, 91, .12); cursor: pointer;
}
.rt-day-row:last-child { border-bottom: 0; }
.rt-day-rail { display: grid; place-items: center; height: 100%; position: relative; }
.rt-day-rail::before {
  content: ''; position: absolute; top: 0; bottom: 0; width: 1.5px;
  background: rgba(23, 61, 53, .14);
}
.rt-day-row:first-child .rt-day-rail::before { top: 50%; }
.rt-day-row:last-child .rt-day-rail::before { bottom: 50%; }
.rt-day-dot {
  width: 9px; height: 9px; border-radius: 50%; position: relative; z-index: 1;
  background: var(--sm-paper, var(--bg-light));
  border: 1.5px solid rgba(23, 61, 53, .28);
}
.rt-day-dot.is-done { background: var(--sm-forest, var(--primary)); border-color: var(--sm-forest, var(--primary)); }
.rt-day-icon { display: grid; place-items: center; color: var(--sm-forest, var(--primary)); opacity: .82; }
.rt-day-icon .sm-icon { width: 22px; height: 22px; }
.rt-day-copy { display: grid; gap: 1px; min-width: 0; }
.rt-day-copy strong { font: 700 .95rem 'Playfair Display', Georgia, serif; color: var(--sm-forest-deep, var(--primary)); }
.rt-day-copy small { font-size: .76rem; color: var(--text-muted); line-height: 1.3; }
.rt-day-action { display: grid; place-items: center; }
.rt-pill-btn {
  display: inline-block; padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--sm-line, var(--border-color));
  background: var(--sm-sage-soft, var(--primary-light));
  color: var(--sm-forest, var(--primary));
  font: 600 .78rem Inter, sans-serif; font-style: normal;
}
.rt-check {
  width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%;
  background: var(--sm-sage-soft, var(--primary-light)); color: var(--sm-forest, var(--primary));
}
.rt-check .sm-icon { width: 15px; height: 15px; }
.rt-day-row.is-done .rt-day-copy strong { opacity: .68; }

/* ---- Dopo la Salah ---- */
.rt-salah-row { display: flex; gap: 7px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.rt-salah-row::-webkit-scrollbar { display: none; }
.rt-salah-pill {
  flex: 1 1 0; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 8px; border-radius: 999px;
  border: 1px solid var(--sm-line, var(--border-color));
  background: var(--sm-paper, var(--bg-light));
  color: var(--sm-forest, var(--primary));
  font: 600 .8rem Inter, system-ui, sans-serif; white-space: nowrap; cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.rt-salah-pill.is-done { border-color: var(--sm-forest, var(--primary)); background: var(--sm-sage-soft, var(--primary-light)); }
.rt-salah-pill.is-progress { border-color: var(--sm-coral, #b9603d); }
.rt-salah-pill.is-active { background: var(--sm-forest, var(--primary)); color: #fff; border-color: var(--sm-forest, var(--primary)); }
.rt-salah-mark {
  width: 15px; height: 15px; flex: 0 0 15px; border-radius: 50%;
  border: 1.5px solid rgba(23, 61, 53, .3); display: grid; place-items: center;
}
.rt-salah-mark.is-done { border-color: var(--sm-forest, var(--primary)); background: var(--sm-forest, var(--primary)); color: #fff; border-width: 0; }
.rt-salah-mark.is-done .sm-icon { width: 10px; height: 10px; stroke-width: 3; }
.rt-salah-mark.is-progress { border-color: var(--sm-coral, #b9603d); border-width: 3px; }

/* ---- Come ti senti? (entry) ---- */
.rt-mood-entry { cursor: pointer; }
.rt-mood-desc { margin: 0 0 12px; font-size: .82rem; line-height: 1.45; color: var(--text-muted); }
.rt-fakefield {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border: 1px solid var(--sm-line, var(--border-color)); border-radius: 14px;
  background: rgba(255, 255, 255, .5); color: var(--text-muted); font-size: .88rem;
}
.rt-fakefield .sm-icon { width: 17px; height: 17px; }
.rt-fakefield span { flex: 1; }

/* ---- Le mie routine ---- */
.rt-myroutine-grid { display: grid; gap: 8px; }
.rt-myroutine-card {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px; border-radius: 14px; text-align: left; cursor: pointer;
  border: 1px solid var(--sm-line, var(--border-color));
  background: rgba(255, 255, 255, .45); font: inherit;
}
.rt-myroutine-thumb {
  width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center;
  border-radius: 12px; background: var(--sm-sage-soft, var(--primary-light));
  color: var(--sm-forest, var(--primary));
}
.rt-myroutine-thumb .sm-icon { width: 21px; height: 21px; }
.rt-myroutine-copy { flex: 1; display: grid; gap: 1px; min-width: 0; }
.rt-myroutine-copy strong { font: 700 .9rem 'Playfair Display', Georgia, serif; color: var(--sm-forest-deep, var(--primary)); }
.rt-myroutine-copy small { font-size: .74rem; color: var(--text-muted); }

/* ---- Esplora ---- */
.rt-explore-row { display: grid; gap: 8px; margin-bottom: 8px; }
.rt-explore-btn, .rt-explore-wide {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 11px 12px; border-radius: 13px; text-align: left; cursor: pointer;
  border: 1px solid var(--sm-line, var(--border-color));
  background: rgba(255, 255, 255, .45); font: inherit;
  color: var(--sm-forest-deep, var(--primary));
}
.rt-explore-btn > .sm-icon, .rt-explore-wide > .sm-icon {
  width: 22px; height: 22px; flex: 0 0 22px; color: var(--sm-forest, var(--primary));
}
.rt-explore-btn span, .rt-explore-wide span { flex: 1; display: grid; gap: 1px; min-width: 0; }
.rt-explore-btn strong, .rt-explore-wide strong { font-size: .86rem; font-weight: 700; }
.rt-explore-btn small, .rt-explore-wide small { font-size: .72rem; color: var(--text-muted); }
.rt-explore-wide { margin-top: 4px; }

/* ---- Come ti senti? (schermata) ---- */
.rt-searchwrap {
  display: flex; align-items: center; gap: 10px; margin: 6px 14px 14px;
  padding: 13px 15px; border-radius: 15px;
  border: 1px solid var(--sm-line, var(--border-color));
  background: var(--sm-paper, var(--bg-light));
}
.rt-searchwrap .sm-icon { width: 18px; height: 18px; color: var(--text-muted); flex: 0 0 18px; }
.rt-search {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  font: 500 .95rem Inter, system-ui, sans-serif; color: var(--text-dark);
}
.rt-clear {
  width: 24px; height: 24px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(23, 61, 53, .1); color: var(--text-muted); font-size: 1rem; line-height: 1;
}
.rt-sec-title {
  margin: 18px 16px 10px; font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.1rem; font-weight: 700; color: var(--sm-forest-deep, var(--primary));
}
.rt-sugg-card {
  display: flex; align-items: center; gap: 12px; margin: 0 14px 10px; padding: 14px;
  border: 1px solid var(--sm-line, var(--border-color)); border-radius: 16px;
  background: var(--sm-paper, var(--bg-light)); cursor: pointer;
  box-shadow: 0 2px 6px rgba(53, 45, 36, .03);
}
.rt-sugg-badge {
  width: 54px; height: 54px; flex: 0 0 54px; display: grid; place-items: center;
  border-radius: 50%; background: var(--sm-sage-soft, var(--primary-light));
  color: var(--sm-forest-deep, var(--primary));
  font-size: .72rem; line-height: 1.2; text-align: center; padding: 6px; overflow: hidden;
}
.rt-sugg-badge.is-plain { font-size: 1.3rem; }
.rt-sugg-copy { flex: 1; display: grid; gap: 2px; min-width: 0; }
.rt-sugg-kind { font: 600 .7rem Inter, sans-serif; color: var(--text-muted); }
.rt-sugg-copy strong { font: 700 1rem 'Playfair Display', Georgia, serif; color: var(--sm-forest-deep, var(--primary)); line-height: 1.25; }
.rt-sugg-copy small { font-size: .76rem; color: var(--text-muted); line-height: 1.35; }
.rt-sugg-qty {
  padding: 6px 11px; border-radius: 999px; flex: 0 0 auto;
  background: var(--sm-sage-soft, var(--primary-light));
  color: var(--sm-forest, var(--primary)); font: 700 .78rem Inter, sans-serif;
}
.rt-sugg-qty.is-ghost { background: transparent; color: var(--text-muted); font-weight: 600; }

/* ---- Aggiungi alla mia giornata ---- */
.rt-addto h3 { margin: 0 0 12px; font: 700 1.05rem 'Playfair Display', Georgia, serif; color: var(--sm-forest-deep, var(--primary)); }
.rt-slot-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 12px; }
.rt-slot {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 11px 6px; border-radius: 14px; cursor: pointer;
  border: 1px solid var(--sm-line, var(--border-color));
  background: var(--sm-paper, var(--bg-light));
  color: var(--sm-forest, var(--primary));
  font: 600 .72rem Inter, system-ui, sans-serif; text-align: center;
}
.rt-slot .sm-icon { width: 18px; height: 18px; }
.rt-slot.is-on { border-color: var(--sm-forest, var(--primary)); background: var(--sm-sage-soft, var(--primary-light)); }
.rt-slot-mark { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid rgba(23, 61, 53, .28); }
.rt-slot.is-on .rt-slot-mark { background: var(--sm-forest, var(--primary)); border-color: var(--sm-forest, var(--primary)); }
.rt-add-btn {
  width: 100%; padding: 13px; border: 0; border-radius: 14px; cursor: pointer;
  background: var(--sm-forest, var(--primary)); color: #fff;
  font: 700 .9rem Inter, system-ui, sans-serif;
}
.rt-added {
  display: flex; align-items: center; gap: 12px; margin: 0 14px 12px; padding: 14px;
  border-radius: 15px; background: var(--sm-sage-soft, var(--primary-light));
  border: 1px solid var(--sm-line, var(--border-color));
}
.rt-added > i { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--sm-forest, var(--primary)); color: var(--sm-forest, var(--primary)); }
.rt-added > i .sm-icon { width: 15px; height: 15px; }
.rt-added > div { flex: 1; display: grid; gap: 1px; }
.rt-added strong { font: 700 .9rem 'Playfair Display', Georgia, serif; color: var(--sm-forest-deep, var(--primary)); }
.rt-added small { font-size: .74rem; color: var(--text-muted); }
.rt-added > button { border: 0; background: transparent; color: var(--text-muted); font-size: 1.3rem; cursor: pointer; }
.rt-empty { margin: 24px 18px; text-align: center; font-size: .88rem; line-height: 1.5; color: var(--text-muted); }

/* ---- Dopo <Salah> ---- */
.rt-header-salah { padding-top: 18px; }
.rt-modes {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  margin: 6px 14px 14px; padding: 4px; border-radius: 999px;
  border: 1px solid var(--sm-line, var(--border-color));
  background: var(--sm-paper, var(--bg-light));
}
.rt-mode {
  padding: 11px 6px; border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--sm-forest, var(--primary));
  font: 600 .85rem Inter, system-ui, sans-serif;
  transition: background .15s ease, color .15s ease;
}
.rt-mode.is-on { background: var(--sm-forest, var(--primary)); color: #fff; font-weight: 700; }
.rt-salah-summary { display: flex; align-items: center; gap: 13px; }
.rt-summary-icon {
  width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center;
  border-radius: 50%; background: var(--sm-sage-soft, var(--primary-light)); color: var(--sm-forest, var(--primary));
}
.rt-summary-icon .sm-icon { width: 22px; height: 22px; }
.rt-summary-copy { flex: 1; }
.rt-summary-copy p { margin: 0 0 8px; font-family: 'Playfair Display', Georgia, serif; font-size: .98rem; color: var(--sm-forest-deep, var(--primary)); }
.rt-summary-copy b { font-size: 1.35rem; font-weight: 700; }
.rt-items { display: grid; gap: 9px; padding: 0 14px; }
.rt-item {
  display: grid; grid-template-columns: 26px 46px 1fr auto;
  align-items: center; gap: 11px; padding: 13px;
  border: 1px solid var(--sm-line, var(--border-color)); border-radius: 15px;
  background: var(--sm-paper, var(--bg-light));
  border-left: 3px solid transparent;
}
.rt-item.is-done { border-left-color: var(--sm-forest, var(--primary)); }
.rt-item-check {
  width: 24px; height: 24px; display: grid; place-items: center; cursor: pointer;
  border: 1.5px solid rgba(23, 61, 53, .3); border-radius: 50%;
  background: transparent; color: #fff; padding: 0;
}
.rt-item.is-done .rt-item-check { background: var(--sm-forest, var(--primary)); border-color: var(--sm-forest, var(--primary)); }
.rt-item-check .sm-icon { width: 13px; height: 13px; stroke-width: 3; }
.rt-item-badge {
  width: 46px; height: 46px; flex: 0 0 46px; display: grid; place-items: center;
  border-radius: 50%; background: var(--sm-sage-soft, var(--primary-light));
  color: var(--sm-forest-deep, var(--primary));
  font-size: .62rem; line-height: 1.15; text-align: center; padding: 5px; overflow: hidden;
}
.rt-item-copy { display: grid; gap: 2px; min-width: 0; }
.rt-item-copy strong { font: 700 .95rem 'Playfair Display', Georgia, serif; color: var(--sm-forest-deep, var(--primary)); line-height: 1.2; }
.rt-item-copy small { font-size: .74rem; color: var(--text-muted); line-height: 1.3; }
.rt-item-src { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; font: 500 .66rem Inter, sans-serif; font-style: normal; color: var(--text-muted); opacity: .85; }
.rt-item-src .sm-icon { width: 12px; height: 12px; }
.rt-item-ctrl { display: grid; gap: 6px; justify-items: end; }
.rt-item-target {
  padding: 5px 10px; border-radius: 999px; white-space: nowrap;
  background: var(--sm-sage-soft, var(--primary-light));
  color: var(--sm-forest, var(--primary)); font: 700 .74rem Inter, sans-serif;
}
.rt-stepper { display: inline-flex; align-items: center; gap: 6px; }
.rt-stepper button {
  width: 27px; height: 27px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--sm-line, var(--border-color));
  background: var(--sm-paper, var(--bg-light));
  color: var(--sm-forest, var(--primary)); font-size: .85rem; line-height: 1; padding: 0;
}
.rt-stepper b { min-width: 20px; text-align: center; font: 700 .88rem Inter, sans-serif; color: var(--sm-forest-deep, var(--primary)); }
.rt-salah-switch { margin: 20px 14px 0; }
.rt-salah-switch > span { display: block; margin-bottom: 8px; font: 600 .76rem Inter, sans-serif; color: var(--text-muted); }

/* ---- Mobile ---- */
@media (max-width: 430px) {
  .rt-title { font-size: 1.75rem; }
  .rt-card { margin: 10px 12px; padding: 14px; }
  .rt-day-row { grid-template-columns: 20px 30px 1fr auto; gap: 8px; }
  .rt-day-icon .sm-icon { width: 20px; height: 20px; }
  .rt-day-copy strong { font-size: .89rem; }
  .rt-day-copy small { font-size: .71rem; }
  .rt-salah-pill { font-size: .72rem; padding: 9px 5px; gap: 4px; }
  .rt-item { grid-template-columns: 24px 40px 1fr auto; gap: 8px; padding: 11px; }
  .rt-item-badge { width: 40px; height: 40px; flex-basis: 40px; font-size: .56rem; }
  .rt-item-copy strong { font-size: .87rem; }
  .rt-mode { font-size: .8rem; padding: 10px 4px; }
  .rt-sugg-badge { width: 48px; height: 48px; flex-basis: 48px; }
}

/* ---- Dark ---- */
body.dark-theme .rt-card,
body.dark-theme .rt-sugg-card,
body.dark-theme .rt-item,
body.dark-theme .rt-searchwrap,
body.dark-theme .rt-modes { background: var(--bg-light); border-color: var(--border-color); }
body.dark-theme .rt-title,
body.dark-theme .rt-card-head h2,
body.dark-theme .rt-day-copy strong,
body.dark-theme .rt-item-copy strong,
body.dark-theme .rt-sugg-copy strong { color: var(--primary); }
body.dark-theme .rt-progress { background: rgba(127, 179, 157, .14); }
body.dark-theme .rt-progress i { background: var(--primary); }
body.dark-theme .rt-card-icon,
body.dark-theme .rt-item-badge,
body.dark-theme .rt-sugg-badge,
body.dark-theme .rt-summary-icon,
body.dark-theme .rt-myroutine-thumb,
body.dark-theme .rt-item-target,
body.dark-theme .rt-sugg-qty,
body.dark-theme .rt-check,
body.dark-theme .rt-pill-btn { background: rgba(127, 179, 157, .12); color: var(--primary); }
body.dark-theme .rt-mode.is-on,
body.dark-theme .rt-salah-pill.is-active,
body.dark-theme .rt-add-btn { background: var(--primary); color: var(--text-light); }
body.dark-theme .rt-myroutine-card,
body.dark-theme .rt-explore-btn,
body.dark-theme .rt-explore-wide,
body.dark-theme .rt-fakefield { background: rgba(255, 255, 255, .03); border-color: var(--border-color); }
body.dark-theme .rt-divider::after { background: var(--bg-warm); }
body.dark-theme .rt-added { background: rgba(127, 179, 157, .08); }

/* =========================================================
   V2 ROUTINE — correzioni chirurgiche
   ========================================================= */

/* A. Niente doppio header sulle schermate Routine (hanno header proprio) */
body.rt-immersive > .app-container > header,
body.rt-immersive > header { display: none !important; }

/* C. Header Routine: icone a destra mai tagliate dal viewport */
.rt-header { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
.rt-header-top { padding-top: max(6px, env(safe-area-inset-top)); }
.rt-header-actions { flex: 0 0 auto; margin-right: 0; }
.rt-icon-btn { flex: 0 0 40px; }

/* B. FAB Amin: safe-area + nessun contenuto interattivo coperto.
   L'ultima card/riga della pagina ha spazio extra a destra e in basso. */
.rt-section { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }
.rt-section .rt-card:last-of-type,
.rt-items > .rt-item:last-child,
.rt-salah-switch { margin-bottom: 84px; }
.rt-item-ctrl { padding-right: 2px; }
@media (max-width: 430px) {
  /* la colonna dei contatori resta libera dal FAB */
  .rt-items > .rt-item:last-child,
  .rt-items > .rt-item:nth-last-child(2) { padding-right: 16px; }
}

/* Stato "in corso" nella timeline giornata */
.rt-day-dot.is-partial {
  background: var(--sm-paper, var(--bg-light));
  border-color: var(--sm-coral, #b9603d); border-width: 3px;
}

/* Card suggerimento: azione "+" per singolo contenuto */
.rt-sugg-card { display: block; padding: 0; overflow: hidden; }
.rt-sugg-main { display: flex; align-items: center; gap: 12px; padding: 14px; }
.rt-sugg-add {
  width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center;
  border: 1px solid var(--sm-line, var(--border-color)); border-radius: 50%;
  background: var(--sm-sage-soft, var(--primary-light));
  color: var(--sm-forest, var(--primary));
  font-size: 1.25rem; line-height: 1; cursor: pointer; padding: 0;
}
.rt-sugg-card.has-slots .rt-sugg-add { background: var(--sm-forest, var(--primary)); color: #fff; border-color: var(--sm-forest, var(--primary)); }
.rt-sugg-slots {
  padding: 0 14px 14px; border-top: 1px solid rgba(134, 116, 91, .12);
  margin-top: 0; padding-top: 12px;
}
.rt-sugg-slots-label { display: block; margin-bottom: 8px; font: 600 .74rem Inter, sans-serif; color: var(--text-muted); }
.rt-sugg-slots .rt-slot-row { margin-bottom: 0; }
.rt-added-inline { margin: 0; border: 0; border-top: 1px solid rgba(134, 116, 91, .12); border-radius: 0; }

/* Post-Salah: Tasbih composto 33 + 33 + 33 + Tahlil finale. */
.rt-item:has(.rt-tasbih-parts) { align-items: start; }
.rt-tasbih-parts {
  grid-column: 3 / -1; display: grid; gap: 8px; width: 100%;
  margin-top: 8px; padding-top: 10px; border-top: 1px solid rgba(134, 116, 91, .14);
}
.rt-tasbih-part {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.rt-tasbih-part > span { font-size: .76rem; color: var(--text-muted); }
.rt-tasbih-part > span b { color: var(--sm-forest-deep, var(--primary)); }
.rt-tasbih-part .rt-stepper b { min-width: 34px; }

.post-tasbih-parts { display: grid; gap: 10px; margin-top: 14px; }
.post-tasbih-part {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-top: 1px solid var(--border-color);
}
.post-tasbih-part > div:first-child { display: grid; gap: 2px; }
.post-tasbih-part small { color: var(--text-muted); }

@media (max-width: 430px) {
  .rt-tasbih-parts { grid-column: 2 / -1; }
  .post-tasbih-part { align-items: flex-start; flex-direction: column; }
  .post-tasbih-part .post-dhikr-counter { width: 100%; justify-content: flex-end; }
}

/* =========================================================
   V2 ROUTINE — allineamento e safe-area mobile reale
   Scope esclusivo: routine-hub / mood / salah-detail.
   ========================================================= */
body.rt-immersive {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  touch-action: pan-y;
}

body.rt-immersive .app-container {
  width: min(100%, 430px);
  max-width: 100%;
  min-width: 0;
  padding-left: 0 !important;
  padding-right: 0 !important;
  gap: 0;
  overflow-x: hidden;
}

#view-routine-hub,
#view-mood,
#view-salah-detail,
#rt-home-root,
#rt-mood-root,
#rt-salah-root {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

.rt-section,
.rt-section *,
.rt-section *::before,
.rt-section *::after {
  box-sizing: border-box;
}

.rt-section > div,
.rt-card,
.rt-searchwrap,
.rt-sugg-card,
.rt-added,
.rt-modes,
.rt-items,
.rt-salah-switch {
  max-width: 100%;
  min-width: 0;
}

.rt-header {
  width: 100%;
  max-width: 100%;
  padding-left: max(16px, calc(env(safe-area-inset-left) + 12px));
  padding-right: max(16px, calc(env(safe-area-inset-right) + 12px));
}
.rt-header-top { width: 100%; min-width: 0; gap: 10px; }
.rt-header-actions { min-width: 0; padding-right: 0; }
.rt-icon-btn { flex: 0 0 40px; max-width: 40px; }

.rt-card,
.rt-searchwrap,
.rt-sugg-card,
.rt-added,
.rt-modes,
.rt-salah-switch {
  width: auto;
  margin-left: max(12px, calc(env(safe-area-inset-left) + 10px));
  margin-right: max(12px, calc(env(safe-area-inset-right) + 10px));
}
.rt-items {
  width: 100%;
  padding-left: max(12px, calc(env(safe-area-inset-left) + 10px));
  padding-right: max(12px, calc(env(safe-area-inset-right) + 10px));
}

/* Le cinque preghiere restano dentro la card, senza secondo scroller. */
.rt-salah-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: 100%;
  max-width: 100%;
  min-width: 0;
  gap: 6px;
  overflow: visible;
}
.rt-salah-pill {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding-left: 5px;
  padding-right: 5px;
  overflow: hidden;
}
.rt-salah-pill > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rt-day-row { grid-template-columns: 22px 34px minmax(0, 1fr) auto; }
.rt-day-copy strong,
.rt-day-copy small,
.rt-sugg-copy strong,
.rt-sugg-copy small,
.rt-added strong,
.rt-added small,
.rt-item-copy strong,
.rt-item-copy small {
  max-width: 100%;
  overflow-wrap: anywhere;
}
.rt-day-action { min-width: 0; justify-self: end; }
.rt-pill-btn { max-width: 100%; white-space: nowrap; }

.rt-sugg-main { width: 100%; max-width: 100%; min-width: 0; }
.rt-sugg-copy { overflow: hidden; }
.rt-sugg-add { margin-left: auto; }
.rt-sugg-slots { width: 100%; max-width: 100%; overflow: hidden; }
.rt-slot-row { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
.rt-slot { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.rt-searchwrap input { width: 100%; max-width: 100%; min-width: 0; }

.rt-modes { grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; }
.rt-mode { width: 100%; min-width: 0; white-space: nowrap; }
.rt-progress { width: 100%; max-width: 100%; }

@media (max-width: 430px) {
  .rt-section { width: 100%; max-width: 100%; padding-bottom: calc(176px + env(safe-area-inset-bottom)); }
  .rt-card { padding: 14px; }
  .rt-day-row { grid-template-columns: 18px 28px minmax(0, 1fr) auto; gap: 7px; }
  .rt-pill-btn { padding: 6px 10px; font-size: .72rem; }
  .rt-salah-row { gap: 4px; }
  .rt-salah-pill { gap: 3px; padding: 8px 3px; font-size: clamp(.62rem, 2.75vw, .72rem); }
  .rt-salah-mark { width: 12px; height: 12px; flex-basis: 12px; }

  /* Su mobile il contatore va su una seconda riga: nessuna colonna auto può sforare. */
  .rt-item { grid-template-columns: 24px 40px minmax(0, 1fr); gap: 8px; width: 100%; max-width: 100%; }
  .rt-item-ctrl { grid-column: 3 / -1; width: 100%; justify-items: stretch; }
  .rt-item-ctrl .rt-item-target { justify-self: end; }
  .rt-item-ctrl .rt-stepper { justify-self: end; }
  .rt-tasbih-parts { grid-column: 1 / -1; min-width: 0; }
  .rt-tasbih-part { min-width: 0; }
  .rt-tasbih-part > span { min-width: 0; overflow-wrap: anywhere; }
  .rt-tasbih-part .rt-stepper { flex: 0 0 auto; }

  body.rt-immersive .amin-fab {
    right: max(12px, calc(env(safe-area-inset-right) + 10px)) !important;
    bottom: calc(82px + env(safe-area-inset-bottom)) !important;
  }
  .rt-section .rt-card:last-of-type,
  .rt-items > .rt-item:last-child,
  .rt-salah-switch { margin-bottom: 96px; }
}

@media (max-width: 350px) {
  .rt-card,
  .rt-searchwrap,
  .rt-sugg-card,
  .rt-added,
  .rt-modes,
  .rt-salah-switch { margin-left: 9px; margin-right: 9px; }
  .rt-items { padding-left: 9px; padding-right: 9px; }
  .rt-day-row { grid-template-columns: 16px 24px minmax(0, 1fr) auto; gap: 5px; }
  .rt-day-icon .sm-icon { width: 18px; height: 18px; }
  .rt-pill-btn { padding-inline: 8px; font-size: .68rem; }
  .rt-mode { padding-inline: 2px; font-size: .74rem; }
  .rt-salah-mark { display: none; }
}

/* =========================================================
   ROUTINE — Risveglio, mood diretto e counter inline
   ========================================================= */
#view-routine-wakeup,
#rt-wakeup-root,
#view-routine-morning,
#rt-morning-root,
#view-routine-evening,
#rt-evening-root,
#view-routine-bedtime,
#rt-bedtime-root { width: 100%; max-width: 100%; min-width: 0; overflow-x: hidden; }

.rt-bedtime-sunnah { margin: 14px 0; padding: 16px; }
.rt-bedtime-sunnah strong { color: var(--heading-color); font-family: var(--font-serif); font-size: 20px; }
.rt-bedtime-sunnah p { margin: 8px 0; color: var(--text-color); line-height: 1.5; }
.rt-bedtime-sunnah small, .rt-bedtime-note { color: var(--muted-color); line-height: 1.45; }
.rt-bedtime-note, .rt-bedtime-instruction { margin: 12px 0; padding: 12px; border-left: 3px solid var(--accent-color); background: var(--sm-surface-soft); border-radius: 0 12px 12px 0; }
.rt-bedtime-counter-label { display: block; margin: 0 0 8px; color: var(--heading-color); }
.rt-bedtime-tasbih + .rt-bedtime-tasbih { border-top: 1px solid var(--border-color); padding-top: 16px; margin-top: 16px; }
.rt-bedtime-tasbih h3 { margin: 0 0 10px; color: var(--heading-color); }

/* Preferiti — stesso sistema visuale delle nuove Routine */
#view-favorites,#favorites-container { width: 100%; max-width: 100%; min-width: 0; overflow-x: hidden; }
.fav-main { padding: 0 14px calc(180px + env(safe-area-inset-bottom)); }
.fav-main > .rt-header { margin-left: -14px; margin-right: -14px; }
.fav-summary { margin: 14px 0 12px; padding: 15px 17px; }
.fav-summary strong { color: var(--heading-color); font-family: Georgia,serif; font-size: 1.12rem; }
.fav-filters { margin-bottom: 14px; }
.fav-list { display: grid; gap: 14px; min-width: 0; }
.fav-card { margin: 0; min-width: 0; overflow: hidden; }
.fav-card-head h2,.fav-card h2 { margin: 5px 0 0; color: var(--heading-color); font-family: Georgia,serif; font-size: 1.34rem; line-height: 1.2; }
.fav-source { margin: 13px 0 0; color: var(--text-muted); font-size: .82rem; line-height: 1.4; }
.fav-name-ar { margin: 4px 0 8px; color: var(--heading-color); font-family: 'Amiri',serif; font-size: 2rem; line-height: 1.6; text-align: center; }
.fav-name-meaning { margin: 10px 0 0; color: var(--text-color); line-height: 1.55; }
.fav-quran-open { margin-top: 14px; min-height: 44px; border: 1px solid var(--accent-color); border-radius: 12px; padding: 10px 14px; background: var(--sm-surface-soft); color: var(--heading-color); font-weight: 750; }
.fav-status { display: inline-flex; align-items: center; width: max-content; margin: 0 0 11px; padding: 6px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-color); font-size: .78rem; font-weight: 800; }
.fav-actions { position: relative; display: flex; align-items: stretch; gap: 8px; margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--border-color); }
.fav-actions button { min-width: 0; min-height: 46px; border-radius: 12px; padding: 10px 8px; font: inherit; font-weight: 760; }
.fav-add { flex: 1 1 auto; border: 1px solid var(--accent-color); background: var(--accent-color); color: #fff; }
.fav-quran-open { flex: 1 1 auto; margin-top: 0; }
.fav-more { flex: 0 0 46px; border: 1px solid var(--border-color); background: var(--sm-surface-soft); color: var(--heading-color); font-size: 1.25rem !important; }
.fav-menu { position: absolute; right: 0; bottom: 54px; z-index: 5; width: min(245px,100%); padding: 7px; border: 1px solid var(--border-color); border-radius: 14px; background: var(--sm-surface); box-shadow: var(--shadow-lg); }
.fav-menu button { display: block; width: 100%; border: 0; background: transparent; color: var(--heading-color); text-align: left; }
.fav-menu button:first-child { color: #a33d3d; }
.fav-discover { margin-top: 18px; padding: 22px 18px; text-align: center; }
.fav-discover h2 { margin: 0; color: var(--heading-color); font-family: Georgia,serif; }
.fav-discover p { color: var(--text-muted); line-height: 1.5; }
.fav-discover button { display: block; width: 100%; min-height: 50px; border: 0; border-radius: 12px; padding: 12px 18px; background: var(--sm-green); color: #fff; font: inherit; font-weight: 800; opacity: 1; -webkit-appearance: none; appearance: none; }
.rt-result-tabs { margin: 0 0 14px; }
.rt-result-category { min-width: 0; }
.fav-undo-toast { position: fixed; left: 50%; bottom: calc(104px + env(safe-area-inset-bottom)); z-index: 1200; display: flex; align-items: center; justify-content: space-between; gap: 18px; width: min(360px,calc(100vw - 28px)); padding: 12px 14px; border-radius: 14px; background: var(--sm-green); color: #fff; box-shadow: var(--shadow-lg); opacity: 0; transform: translate(-50%,12px); transition: .18s ease; }
.fav-undo-toast.show { opacity: 1; transform: translate(-50%,0); }
.fav-undo-toast button { border: 0; background: transparent; color: #fff; font: inherit; font-weight: 850; text-decoration: underline; }
.rt-sheet-item.is-added { color: var(--accent-color); }
.fav-empty { padding: 26px 20px; text-align: center; }
.fav-empty .rt-card-icon { margin: 0 auto 13px; }
.fav-empty h2 { margin: 0; color: var(--heading-color); font-family: Georgia,serif; }
.fav-empty p { color: var(--text-muted); line-height: 1.55; }
.fav-empty button { min-height: 46px; border: 0; border-radius: 12px; padding: 11px 18px; background: var(--accent-color); color: #fff; font-weight: 760; }

.rt-home-mood-form {
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; margin-top: 14px;
}
.rt-home-mood-form input {
  min-width: 0; width: 100%; height: 52px; border: 1px solid var(--border-color);
  border-radius: 16px; padding: 0 15px; background: var(--card-bg); color: var(--text-color);
  font: inherit; font-size: 16px;
}
.rt-home-mood-form button,
.rt-once-check,
.rt-counter-start,
.rt-counter-tap,
.rt-counter-tools button,
.rt-moment-nav button,
.rt-moment-sheet button,
.rt-context-action {
  min-height: 44px; touch-action: manipulation; font-size: 16px;
}
.rt-home-mood-form button {
  display: grid; place-items: center; border: 0; border-radius: 16px;
  background: var(--sm-green, var(--primary)); color: #fff; padding: 0 18px; font-weight: 800;
}
.rt-home-mood-form button .sm-icon { width: 23px; height: 23px; }
.rt-search { font-size: 16px; }
.rt-clear,.rt-sugg-add { min-width: 44px; min-height: 44px; touch-action: manipulation; }
.rt-mood-search-form { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; align-items: stretch; margin: 6px 14px 14px; }
.rt-mood-search-form .rt-searchwrap { min-width: 0; margin: 0; }
.rt-mood-search-submit { min-height: 50px; border: 0; border-radius: 15px; background: var(--sm-green); color: #fff; padding: 0 18px; font: inherit; font-size: 16px; font-weight: 800; touch-action: manipulation; }
@media (max-width: 390px) {
  .rt-mood-search-form { grid-template-columns: 1fr; }
  .rt-mood-search-submit { width: 100%; }
}

.smart-segmented-control {
  width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box;
  padding: 4px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0,1fr); gap: 4px;
  border: 1px solid var(--border-color); border-radius: 16px; background: var(--sm-surface-soft);
}
.smart-segmented-item {
  min-width: 0; min-height: 46px; padding: 7px 5px; border: 0; border-radius: 12px;
  background: transparent; color: var(--sm-green); font: inherit; font-size: clamp(.68rem,2.9vw,.82rem);
  line-height: 1.15; font-weight: 800; white-space: nowrap; touch-action: manipulation;
  transition: background-color .2s ease,color .2s ease;
}
.smart-segmented-item.is-active { background: #174f40; color: #fff; box-shadow: 0 4px 12px rgba(23,79,64,.16); }
.rt-main-tabs {
  width: auto; margin: 0 max(12px,calc(env(safe-area-inset-right) + 10px)) 16px;
}
.rt-home-tab-content { width: 100%; max-width: 100%; min-width: 0; }
.rt-home-panel { margin: 0 max(12px,calc(env(safe-area-inset-right) + 10px)); }
.rt-panel-intro { padding: 5px 3px 14px; }
.rt-panel-intro h2 { margin: 0; color: var(--heading-color); font-family: Georgia,serif; font-size: 1.45rem; }
.rt-panel-intro p { margin: 5px 0 0; color: var(--text-muted); line-height: 1.45; }
.rt-panel-kicker { color: var(--accent-coral); font-size: .78rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.rt-prayer-list,.rt-other-list { display: grid; grid-template-columns: 1fr; gap: 10px; }
.rt-prayer-card,.rt-other-card {
  width: 100%; min-width: 0; min-height: 76px; display: grid; grid-template-columns: 46px minmax(0,1fr) 20px;
  align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--border-color); border-radius: 17px;
  background: var(--sm-surface); color: var(--heading-color); text-align: left; touch-action: manipulation;
  box-shadow: 0 4px 14px rgba(24,53,46,.05);
}
.rt-prayer-icon,.rt-other-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--sm-green-soft); color: var(--sm-green); }
.rt-prayer-icon .sm-icon,.rt-other-icon .sm-icon { width: 23px; height: 23px; }
.rt-prayer-card > span:nth-child(2),.rt-other-card > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.rt-prayer-card strong,.rt-other-card strong { font-size: 1rem; overflow-wrap: anywhere; }
.rt-prayer-card small,.rt-other-card small { color: var(--text-muted); font-size: .8rem; line-height: 1.35; }
.rt-prayer-card > i,.rt-other-card > i { justify-self: end; font-style: normal; font-size: 1.25rem; }
.rt-other-card:disabled { opacity: 1; cursor: default; background: color-mix(in srgb,var(--sm-surface) 88%,var(--sm-surface-soft)); }
.rt-other-card:disabled > i { color: var(--text-muted); opacity: .55; }
.rt-prayer-section + .rt-prayer-section { margin-top: 24px; }
.rt-witr-card,.rt-special-toggle,.rt-special-hub-card {
  width: 100%; min-width: 0; min-height: 78px; display: grid; grid-template-columns: 46px minmax(0,1fr) 22px;
  align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--border-color); border-radius: 17px;
  background: var(--sm-surface); color: var(--heading-color); text-align: left; touch-action: manipulation;
  box-shadow: 0 4px 14px rgba(24,53,46,.05);
}
.rt-witr-card > span:nth-child(2),.rt-special-toggle > span:nth-child(2),.rt-special-hub-card > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.rt-witr-card strong,.rt-special-toggle strong,.rt-special-hub-card strong { font-size: 1rem; }
.rt-witr-card small,.rt-special-toggle small,.rt-special-hub-card small { color: var(--text-muted); font-size: .8rem; line-height: 1.35; }
.rt-witr-card em,.rt-special-hub-card em { color: var(--accent-coral); font-size: .7rem; font-style: normal; font-weight: 800; }
.rt-witr-card > i,.rt-special-toggle > i,.rt-special-hub-card > i { justify-self: end; color: var(--sm-green); font-style: normal; font-size: 1.2rem; }
.rt-witr-card:disabled { opacity: 1; cursor: default; }
.rt-special-accordion { border-radius: 17px; }
.rt-special-accordion.is-open { border: 1px solid var(--border-color); background: var(--sm-surface); overflow: hidden; box-shadow: 0 4px 14px rgba(24,53,46,.05); }
.rt-special-accordion.is-open .rt-special-toggle { border: 0; border-bottom: 1px solid var(--border-color); border-radius: 0; box-shadow: none; }
.rt-special-list { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 12px; }
.rt-special-item {
  width: 100%; min-width: 0; min-height: 58px; display: grid; grid-template-columns: 38px minmax(0,1fr);
  align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--border-color); border-radius: 13px;
  background: var(--sm-surface-soft); color: var(--heading-color); text-align: left; opacity: 1;
}
.rt-special-item-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--sm-green-soft); color: var(--sm-green); }
.rt-special-item-icon .sm-icon { width: 19px; height: 19px; }
.rt-special-item > span:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.rt-special-item strong { overflow-wrap: anywhere; }
.rt-special-item small { color: var(--text-muted); font-size: .7rem; }

/* Routine > Preghiera: timeline dinamica nello stile approvato di La mia giornata. */
.rt-panel-prayers { display: grid; gap: 14px; padding-bottom: calc(118px + env(safe-area-inset-bottom)); }
.rt-prayer-timeline-card { margin: 0; padding: 16px 14px 10px; overflow: hidden; }
.rt-prayer-card-head { display: grid; grid-template-columns: 58px minmax(0,1fr); align-items: center; gap: 12px; padding: 0 2px 14px; }
.rt-prayer-card-head > div { min-width: 0; }
.rt-prayer-card-head h2 { margin: 2px 0 0; color: var(--heading-color); font-family: Georgia,serif; font-size: 1.35rem; line-height: 1.15; }
.rt-prayer-card-head p { margin: 5px 0 0; color: var(--text-muted); font-size: .78rem; line-height: 1.4; }
.rt-prayer-heading-icon,.rt-prayer-medallion { display: grid; place-items: center; overflow: hidden; background: #fbf7ef; }
.rt-prayer-heading-icon { width: 56px; height: 56px; border-radius: 17px; }
.rt-prayer-medallion { width: 48px; height: 48px; border-radius: 15px; }
.rt-prayer-heading-icon img,.rt-prayer-medallion img { width: 100%; height: 100%; max-width: none; object-fit: contain; transform: scale(1.72); transform-origin: center; }
.rt-prayer-timeline { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.rt-prayer-timeline-row { position: relative; min-width: 0; }
.rt-prayer-timeline-row > button { display: grid; grid-template-columns: 20px 48px minmax(0,1fr) auto; align-items: center; gap: 10px; width: 100%; min-width: 0; min-height: 76px; padding: 8px 8px 8px 0; border: 0; border-radius: 16px; background: transparent; color: var(--heading-color); text-align: left; touch-action: manipulation; }
.rt-prayer-timeline-row.is-current > button,.rt-prayer-timeline-row.is-next > button { background: color-mix(in srgb,var(--sm-green-soft) 82%,var(--sm-surface)); }
.rt-prayer-rail { align-self: stretch; position: relative; display: grid; place-items: center; }
.rt-prayer-rail::before,.rt-prayer-rail::after { content: ''; position: absolute; left: 50%; width: 2px; height: 50%; transform: translateX(-50%); background: var(--border-color); }
.rt-prayer-rail::before { top: 0; }.rt-prayer-rail::after { bottom: 0; }
.rt-prayer-timeline-row:first-child .rt-prayer-rail::before,.rt-prayer-timeline-row:last-child .rt-prayer-rail::after { display: none; }
.rt-prayer-rail i { position: relative; z-index: 1; width: 11px; height: 11px; border: 2px solid var(--border-color); border-radius: 50%; background: var(--sm-surface); }
.rt-prayer-timeline-row.is-completed .rt-prayer-rail::before,.rt-prayer-timeline-row.is-completed .rt-prayer-rail::after,.rt-prayer-timeline-row.is-past .rt-prayer-rail::before,.rt-prayer-timeline-row.is-past .rt-prayer-rail::after { background: color-mix(in srgb,var(--sm-green) 68%,var(--border-color)); }
.rt-prayer-timeline-row.is-completed .rt-prayer-rail i { border-color: var(--sm-green); background: var(--sm-green); box-shadow: inset 0 0 0 2px var(--sm-surface); }
.rt-prayer-timeline-row.is-current .rt-prayer-rail i,.rt-prayer-timeline-row.is-next .rt-prayer-rail i { width: 15px; height: 15px; border-color: #b88938; background: var(--sm-green); box-shadow: 0 0 0 4px color-mix(in srgb,#b88938 18%,transparent); }
.rt-prayer-copy { min-width: 0; display: grid; gap: 3px; }
.rt-prayer-copy strong { color: var(--heading-color); font-size: 1rem; line-height: 1.2; }
.rt-prayer-copy small { color: var(--text-muted); font-size: .72rem; line-height: 1.35; overflow-wrap: anywhere; }
.rt-prayer-action { justify-self: end; display: grid; place-items: center; min-width: 34px; }
.rt-prayer-check { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; background: var(--sm-green); color: #fff; font-weight: 900; }
.rt-prayer-open { min-height: 36px; display: grid; place-items: center; padding: 0 12px; border-radius: 999px; background: var(--sm-green); color: #fff; font-size: .7rem; font-weight: 850; }
.rt-prayer-chevron { color: var(--sm-green); font-size: 1.35rem; }
.rt-prayer-secondary-list { display: grid; gap: 10px; }
.rt-prayer-secondary-card { grid-template-columns: 52px minmax(0,1fr) 20px; min-height: 82px; padding: 12px; }
.rt-prayer-secondary-card .rt-prayer-medallion { width: 50px; height: 50px; }
@media (max-width:390px) {
  .rt-prayer-timeline-card { padding-inline: 11px; }
  .rt-prayer-card-head { grid-template-columns: 52px minmax(0,1fr); gap: 9px; }
  .rt-prayer-heading-icon { width: 50px; height: 50px; }
  .rt-prayer-timeline-row > button { grid-template-columns: 17px 43px minmax(0,1fr) auto; gap: 7px; padding-right: 5px; }
  .rt-prayer-medallion { width: 43px; height: 43px; }
  .rt-prayer-open { padding-inline: 9px; }
  .rt-prayer-secondary-card { grid-template-columns: 47px minmax(0,1fr) 18px; gap: 9px; }
  .rt-prayer-secondary-card .rt-prayer-medallion { width: 45px; height: 45px; }
}

#view-special-prayers,#rt-special-prayers-root { width: 100%; max-width: 100%; min-width: 0; overflow-x: hidden; }
.rt-special-prayers-main {
  width: 100%; max-width: 100%; min-width: 0; display: grid; gap: 28px;
  padding: 4px max(12px,calc(env(safe-area-inset-right) + 10px)) calc(136px + env(safe-area-inset-bottom)) max(12px,calc(env(safe-area-inset-left) + 10px));
  box-sizing: border-box;
}
.rt-special-prayers-group { min-width: 0; display: grid; gap: 12px; }
.rt-special-guide-list { min-width: 0; display: grid; gap: 10px; }
.rt-special-guide-card {
  width: 100%; max-width: 100%; min-width: 0; min-height: 82px; display: grid;
  grid-template-columns: 46px minmax(0,1fr) 20px; align-items: center; gap: 12px; padding: 13px;
  border: 1px solid var(--border-color); border-radius: 18px; background: var(--sm-surface);
  color: var(--heading-color); text-align: left; box-sizing: border-box; touch-action: manipulation;
  box-shadow: 0 4px 14px rgba(24,53,46,.05);
}
.rt-special-guide-card:active { background: var(--sm-surface-soft); transform: translateY(1px); }
.rt-special-guide-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--sm-green-soft); color: var(--sm-green); }
.rt-special-guide-icon .sm-icon { width: 23px; height: 23px; }
.rt-special-guide-copy { min-width: 0; display: grid; gap: 3px; }
.rt-special-guide-copy strong { font-size: 1rem; line-height: 1.2; overflow-wrap: anywhere; }
.rt-special-guide-copy small { color: var(--text-muted); font-size: .79rem; line-height: 1.38; overflow-wrap: anywhere; }
.rt-special-guide-copy em { width: fit-content; margin-top: 3px; color: var(--accent-coral); font-size: .67rem; font-style: normal; font-weight: 800; letter-spacing: .02em; }
.rt-special-guide-card > i { justify-self: end; color: var(--sm-green); font-style: normal; font-size: 1.25rem; }
.rt-special-prayers-footer { display: flex; justify-content: center; padding-top: 4px; }
.rt-special-prayers-footer button { border: 0; background: transparent; color: var(--text-muted); font: inherit; font-size: .82rem; font-weight: 750; padding: 12px 18px; }
.rt-special-prayers-toast {
  position: fixed; z-index: 1200; left: 50%; bottom: calc(92px + env(safe-area-inset-bottom));
  max-width: calc(100vw - 40px); padding: 11px 17px; border-radius: 999px; background: var(--sm-green);
  color: #fff; font-size: .82rem; font-weight: 800; opacity: 0; pointer-events: none;
  transform: translate(-50%,10px); transition: opacity .18s ease,transform .18s ease; box-shadow: 0 8px 24px rgba(17,69,55,.22);
}
.rt-special-prayers-toast.is-visible { opacity: 1; transform: translate(-50%,0); }

.rt-wakeup-modes { margin-bottom: 16px; }
.rt-wakeup-items { display: grid; gap: 14px; padding: 0 max(12px, calc(env(safe-area-inset-left) + 10px)); }
.rt-wakeup-item,
.rt-wakeup-context {
  width: 100%; min-width: 0; border: 1px solid var(--border-color); border-radius: 22px;
  background: var(--card-bg); padding: 18px; box-shadow: var(--card-shadow);
}
.rt-wakeup-item.is-done { border-color: color-mix(in srgb, var(--accent-color) 42%, var(--border-color)); }
.rt-wakeup-item-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.rt-wakeup-item-head h2 { margin: 4px 0 0; color: var(--heading-color); font-family: Georgia,serif; font-size: 1.35rem; }
.rt-once-check {
  flex: 0 0 48px; width: 48px; border-radius: 50%; border: 1px solid var(--border-color);
  background: var(--card-bg); color: var(--accent-color); display: grid; place-items: center;
}
.rt-once-check.is-done { background: var(--accent-color); color: #fff; }
.rt-once-check .sm-icon { width: 24px; height: 24px; }
.rt-wakeup-ar { margin: 20px 0; color: var(--heading-color); font-size: clamp(1.5rem,6vw,2rem); line-height: 1.9; text-align: right; overflow-wrap: anywhere; }
.rt-wakeup-text { border-top: 1px solid var(--border-color); padding-top: 13px; margin-top: 13px; }
.rt-wakeup-text span { color: var(--accent-coral); text-transform: uppercase; font-size: .72rem; font-weight: 800; letter-spacing: .08em; }
.rt-wakeup-text p { margin: 6px 0 0; color: var(--text-color); font-size: 1rem; line-height: 1.55; overflow-wrap: anywhere; }
.rt-wakeup-source { display: flex; gap: 9px; align-items: flex-start; margin-top: 15px; color: var(--text-muted); font-size: .88rem; line-height: 1.45; }
.rt-wakeup-source .sm-icon { flex: 0 0 19px; width: 19px; height: 19px; }

.rt-morning-summary { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.rt-morning-summary span { color: var(--heading-color); font-family: Georgia,serif; font-size: 1.2rem; font-weight: 750; }
.rt-morning-summary small { color: var(--text-muted); text-align: right; }
.rt-morning-items { display: grid; gap: 14px; padding: 0 max(12px,calc(env(safe-area-inset-left) + 10px)); }
.rt-morning-item { width: 100%; min-width: 0; padding: 18px; border: 1px solid var(--border-color); border-radius: 22px; background: var(--sm-surface); box-shadow: 0 5px 18px rgba(24,53,46,.06); }
.rt-morning-item.is-done { border-color: color-mix(in srgb,var(--sm-green) 42%,var(--border-color)); }
.rt-morning-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.rt-morning-head h2 { margin: 4px 0 0; color: var(--heading-color); font-family: Georgia,serif; font-size: 1.34rem; line-height: 1.2; }
.rt-morning-ar { margin: 19px 0; color: var(--heading-color); font-family: 'Amiri',serif; font-size: clamp(1.45rem,5.8vw,1.9rem); line-height: 1.9; text-align: right; white-space: pre-line; overflow-wrap: anywhere; }
.rt-morning-copy { padding-top: 13px; margin-top: 13px; border-top: 1px solid var(--border-color); }
.rt-morning-copy span { color: var(--accent-coral); font-size: .72rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.rt-morning-copy p { margin: 6px 0 0; color: var(--text-color); font-size: 1rem; line-height: 1.58; white-space: pre-line; overflow-wrap: anywhere; }
.rt-morning-item > .rt-counter-start { margin-top: 16px; }
.rt-morning-counter { margin-top: 16px; }
.rt-morning-counter .rt-morning-ar { margin-top: 5px; }
.rt-composite-preview { display: grid; gap: 7px; margin-top: 15px; padding: 12px; border-radius: 14px; background: var(--sm-surface-soft); }
.rt-composite-preview span { display: flex; justify-content: space-between; gap: 10px; color: var(--text-muted); }
.rt-composite-preview b { color: var(--heading-color); }
.rt-once-wide {
  width: 100%; min-height: 56px; margin-top: 16px; border: 1px solid color-mix(in srgb,var(--sm-green) 34%,var(--border-color));
  border-radius: 15px; background: var(--sm-green-soft); color: var(--sm-green); font: inherit; font-size: 16px;
  font-weight: 820; touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.rt-once-wide.is-done { background: #174f40; border-color: #174f40; color: #fff; }
.rt-inline-routine-counter { width: 100%; min-width: 0; display: grid; gap: 9px; margin-top: 16px; }
.rt-inline-count-touch {
  width: 100%; min-height: 84px; display: grid; place-items: center; gap: 2px; padding: 11px 14px;
  border: 1px solid color-mix(in srgb,var(--sm-green) 28%,var(--border-color)); border-radius: 17px;
  background: color-mix(in srgb,var(--sm-green-soft) 72%,var(--sm-surface)); color: var(--sm-green);
  font: inherit; font-size: 16px; font-weight: 800; text-transform: uppercase; letter-spacing: .045em;
  touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.rt-inline-count-touch strong { font-family: Georgia,serif; font-size: 1.75rem; line-height: 1.15; letter-spacing: 0; }
.rt-inline-routine-counter.is-done .rt-inline-count-touch { background: var(--sm-green-soft); border-color: var(--sm-green); }
.rt-inline-progress { width: 100%; height: 4px; margin-top: 6px; overflow: hidden; border-radius: 99px; background: color-mix(in srgb,var(--sm-green) 12%,transparent); }
.rt-inline-progress b { display: block; height: 100%; max-width: 100%; border-radius: inherit; background: var(--sm-green); transition: width .16s ease; }
.rt-inline-count-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rt-inline-count-tools button {
  min-width: 0; min-height: 48px; padding: 8px; border: 1px solid var(--border-color); border-radius: 13px;
  background: var(--sm-surface); color: var(--heading-color); font: inherit; font-size: 16px; font-weight: 700;
  touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.rt-morning-part-list { display: grid; gap: 9px; margin-top: 16px; }
.rt-morning-part { overflow: hidden; border: 1px solid var(--border-color); border-radius: 15px; background: var(--sm-surface-soft); }
.rt-morning-part.is-done { border-color: color-mix(in srgb,var(--sm-green) 42%,var(--border-color)); }
.rt-morning-part-toggle {
  width: 100%; min-height: 56px; display: grid; grid-template-columns: minmax(0,1fr) auto 22px; align-items: center; gap: 9px;
  padding: 10px 13px; border: 0; background: transparent; color: var(--heading-color); text-align: left;
  font: inherit; font-size: 16px; font-weight: 780; touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.rt-morning-part-toggle b { color: var(--sm-green); white-space: nowrap; }
.rt-morning-part-toggle i { justify-self: end; color: var(--sm-green); font-style: normal; }
.rt-morning-part-body { padding: 0 14px 15px; border-top: 1px solid var(--border-color); background: var(--sm-surface); }
.rt-morning-part-body .rt-wakeup-source { margin-bottom: 2px; }

/* Fajr — stessa grammatica visiva delle Routine Mattina/Sera */
.rt-fajr-section { width: 100%; min-width: 0; padding: 0 max(12px,calc(env(safe-area-inset-left) + 10px)); margin-bottom: 28px; }
.rt-fajr-section > h2 { margin: 5px 0 14px; color: var(--heading-color); font-family: Georgia,serif; font-size: 1.55rem; }
.rt-fajr-section .rt-morning-item { margin: 0; }
.rt-fajr-after { padding: 0 0 calc(180px + env(safe-area-inset-bottom)); }
.rt-fajr-after > .rt-panel-kicker,.rt-fajr-after > h2 { margin-left: max(12px,calc(env(safe-area-inset-left) + 10px)); margin-right: max(12px,calc(env(safe-area-inset-right) + 10px)); }
.rt-fajr-modes { width: auto; margin: 0 max(12px,calc(env(safe-area-inset-right) + 10px)) 14px; }
.rt-fajr-sunnah > h2 { margin: 0; color: var(--heading-color); font-family: Georgia,serif; font-size: 1.34rem; }
.rt-fajr-sunnah > p,.rt-fajr-note { color: var(--text-muted); line-height: 1.55; }
.rt-fajr-sunnah blockquote { margin: 17px 0; padding: 15px 16px; border-left: 3px solid var(--accent-coral); border-radius: 0 14px 14px 0; background: var(--sm-surface-soft); color: var(--heading-color); font-family: Georgia,serif; font-size: 1.08rem; line-height: 1.55; }
.rt-fajr-recitations { margin-top: 16px; border-top: 1px solid var(--border-color); padding-top: 14px; }
.rt-fajr-recitations summary { color: var(--heading-color); font-weight: 820; cursor: pointer; }
.rt-fajr-recitations > p,.rt-fajr-recitations > small { color: var(--text-muted); line-height: 1.5; }
.rt-fajr-recitations > div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 10px; padding: 13px 0; border-top: 1px solid var(--border-color); }
.rt-fajr-recitations > div strong,.rt-fajr-recitations > div span { min-width: 0; }
.rt-fajr-recitations > div span { color: var(--heading-color); font-family: Georgia,serif; font-size: 1.05rem; }
.rt-fajr-recitations button { grid-column: 2; grid-row: 1 / span 2; align-self: center; min-height: 44px; border: 1px solid var(--sm-green); border-radius: 13px; padding: 8px 11px; background: var(--sm-surface); color: var(--sm-green); font: inherit; font-weight: 750; }
.rt-fajr-opening { display: grid; gap: 18px; }
.rt-fajr-part + .rt-fajr-part { border-top: 1px solid var(--border-color); padding-top: 18px; }
.rt-fajr-part h3,.rt-fajr-tasbih-part h3 { margin: 0; color: var(--heading-color); font-family: Georgia,serif; font-size: 1.12rem; }
.rt-fajr-part h3 small { color: var(--accent-coral); font-family: inherit; }
.rt-fajr-tasbih { display: grid; margin-top: 16px; border: 1px solid var(--border-color); border-radius: 16px; overflow: hidden; }
.rt-fajr-tasbih-part { min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 14px; background: var(--sm-surface-soft); }
.rt-fajr-tasbih-part + .rt-fajr-tasbih-part { border-top: 1px solid var(--border-color); }
.rt-fajr-tasbih-part.is-done { background: color-mix(in srgb,var(--sm-green-soft) 72%,var(--sm-surface)); }
.rt-fajr-tasbih-part p { color: var(--text-muted); line-height: 1.45; overflow-wrap: anywhere; }
.rt-fajr-tasbih-part .rt-morning-ar { margin: 12px 0 5px; font-size: 1.35rem; }
.rt-fajr-step { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; justify-items: center; }
.rt-fajr-step b { grid-column: 1 / -1; color: var(--sm-green); white-space: nowrap; }
.rt-fajr-step button { width: 42px; height: 42px; border: 1px solid var(--border-color); border-radius: 50%; background: var(--sm-surface); color: var(--sm-green); font-size: 1.2rem; }
.rt-fajr-footer { display: grid; gap: 9px; width: auto; margin: 28px max(12px,calc(env(safe-area-inset-right) + 10px)) 0; padding-bottom: 12px; }
.rt-fajr-footer button { width: 100%; min-height: 52px; border-radius: 15px; padding: 12px 16px; font: inherit; font-size: 16px; font-weight: 800; touch-action: manipulation; }
.rt-fajr-next { border: 1px solid #174f40; background: #174f40; color: #fff; box-shadow: 0 5px 15px rgba(23,79,64,.15); }
.rt-fajr-next:active { background: #103d32; }
.rt-fajr-prayers { border: 1px solid var(--sm-green); background: var(--sm-surface); color: var(--sm-green); }
.rt-fajr-top { min-height: 44px !important; border: 0; background: transparent; color: var(--text-muted); font-weight: 700 !important; }
.rt-dhuhr-after { padding-left: 0; padding-right: 0; }
.rt-dhuhr-after > .rt-panel-kicker,.rt-dhuhr-after > h2 { margin-left: max(12px,calc(env(safe-area-inset-left) + 10px)); margin-right: max(12px,calc(env(safe-area-inset-right) + 10px)); }
.rt-dhuhr-note { display: grid; gap: 7px; margin-top: 17px; padding: 14px 15px; border-left: 3px solid var(--sm-green); border-radius: 0 14px 14px 0; background: var(--sm-surface-soft); color: var(--heading-color); line-height: 1.5; }
.rt-dhuhr-note small { color: var(--text-muted); }
.rt-dhuhr-sunnah { padding-bottom: calc(180px + env(safe-area-inset-bottom)); }
.rt-dhuhr-sunnah > .rt-morning-items { padding: 0; }
.rt-dhuhr-extra h2 { margin: 5px 0; color: var(--heading-color); font-family: Georgia,serif; font-size: 1.3rem; }
.rt-dhuhr-extra h3 { margin: 0 0 7px; color: var(--heading-color); }
.rt-dhuhr-extra p { color: var(--text-muted); line-height: 1.55; }
.rt-fajr-standard-step { display: grid; grid-template-columns: 48px minmax(70px,1fr) 48px; align-items: center; gap: 10px; }
.rt-fajr-standard-step button { width: 48px; height: 48px; border: 1px solid var(--border-color); border-radius: 50%; background: var(--sm-surface); color: var(--sm-green); font-size: 1.25rem; }
.rt-fajr-standard-step strong { color: var(--sm-green); font-family: Georgia,serif; font-size: 1.3rem; text-align: center; }
.rt-asr-info h2 { margin: 6px 0 9px; color: var(--heading-color); font-family: Georgia,serif; font-size: 1.32rem; line-height: 1.3; }
.rt-asr-info p { color: var(--text-muted); line-height: 1.58; }
.rt-witr-transition h2 { margin: 6px 0 9px; color: var(--heading-color); font-family: Georgia,serif; font-size: 1.4rem; }
.rt-witr-transition > p { color: var(--text-muted); line-height: 1.58; }
.rt-witr-link { width: 100%; min-height: 54px; margin-top: 18px; border-radius: 15px; font: inherit; font-size: 16px; font-weight: 820; }
#view-witr,#rt-witr-root { width: 100%; max-width: 100%; min-width: 0; overflow-x: hidden; }
.rt-witr-selector { width: auto; margin: 0 0 15px; }
.rt-witr-when { display: grid; gap: 16px; }
.rt-witr-when > section { padding: 15px; border: 1px solid var(--border-color); border-radius: 16px; background: var(--sm-surface-soft); }
.rt-witr-when h3 { margin: 0 0 6px; color: var(--heading-color); font-family: Georgia,serif; font-size: 1.08rem; }
.rt-witr-when p { margin: 0; color: var(--text-muted); line-height: 1.5; }
.rt-witr-steps { display: grid; gap: 10px; margin-top: 16px; }
.rt-witr-steps > section { display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 12px; padding: 15px; border: 1px solid var(--border-color); border-radius: 16px; background: var(--sm-surface-soft); }
.rt-witr-steps > section > b { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--sm-green); color: #fff; }
.rt-witr-steps strong { color: var(--heading-color); font-family: Georgia,serif; font-size: 1.08rem; }
.rt-witr-steps p { margin: 5px 0 0; color: var(--text-muted); line-height: 1.5; }
.rt-witr-steps .rt-once-wide { grid-column: 1 / -1; }
.rt-witr-steps > i { color: var(--accent-coral); font-style: normal; font-size: 1.3rem; text-align: center; }
.rt-witr-complete { margin-top: 15px; padding: 14px; border-radius: 14px; background: var(--sm-green); color: #fff; font-weight: 820; text-align: center; }
.rt-witr-faq { display: grid; gap: 12px; padding-bottom: calc(180px + env(safe-area-inset-bottom)); }
.rt-witr-faq > details { margin: 0; }
.rt-witr-faq > details > summary { color: var(--heading-color); font-family: Georgia,serif; font-size: 1.12rem; font-weight: 750; line-height: 1.35; cursor: pointer; }
.rt-witr-faq > details > p,.rt-witr-faq > details > small { display: block; color: var(--text-muted); line-height: 1.55; }
.rt-witr-faq .rt-fajr-footer { margin-left: 0; margin-right: 0; }
@media (max-width: 360px) { .rt-witr-steps > section { grid-template-columns: 32px minmax(0,1fr); padding: 13px; } }
@media (max-width: 360px) {
  .rt-fajr-recitations > div { grid-template-columns: 1fr; }
  .rt-fajr-recitations button { grid-column: 1; grid-row: auto; width: 100%; }
  .rt-fajr-tasbih-part { grid-template-columns: 1fr; }
  .rt-fajr-step { grid-template-columns: auto auto; justify-content: start; }
}

/* Durante la giornata + motore locale Cosa stai vivendo? */
.rt-daytime-search { margin-bottom: 18px; padding: 20px; }
.rt-daytime-search h2 { margin: 7px 0 8px; color: var(--sm-green); font-family: Georgia,serif; font-size: 1.35rem; }
.rt-daytime-search p { margin: 0 0 15px; color: var(--text-secondary); line-height: 1.5; }
.rt-daytime-search form { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
.rt-daytime-search input { width: 100%; min-width: 0; min-height: 50px; box-sizing: border-box; border: 1px solid var(--border-color); border-radius: 14px; background: var(--sm-surface-soft); color: var(--text-primary); padding: 0 14px; font-size: 16px; }
.rt-daytime-search button { min-height: 50px; border: 0; border-radius: 14px; background: var(--sm-green); color: #fff; padding: 0 17px; font-weight: 800; touch-action: manipulation; }
.rt-custom-title { margin-top: 28px; }
.rt-mood-intro { max-width: 34rem; margin: 5px auto 16px; color: var(--text-secondary); text-align: center; line-height: 1.5; }
.rt-sugg-card .rt-sugg-main { align-items: center; }
.rt-sugg-card .rt-sugg-add { width: auto; min-width: 44px; padding: 0 12px; white-space: nowrap; }
.rt-sugg-card .rt-morning-ar,.rt-sugg-card .rt-morning-copy,.rt-sugg-card .rt-wakeup-source,.rt-name-guidance { margin-left: 16px; margin-right: 16px; }
.rt-sugg-card .rt-wakeup-source { margin-bottom: 15px; }
.rt-name-guidance { margin-top: 0; margin-bottom: 16px; color: var(--sm-green); font-style: italic; }
.rt-empty strong,.rt-empty small { display: block; }
.rt-empty small { margin-top: 10px; line-height: 1.65; }
@media (max-width:390px) { .rt-daytime-search form { grid-template-columns: 1fr; } .rt-daytime-search button { width: 100%; } }

/* SmartRoutineSearch V2.1 — azioni card e bottom sheet coerenti con l'app. */
#view-mood { overflow-x: hidden; padding-bottom: calc(150px + env(safe-area-inset-bottom)); }
.rt-mood-results { min-width: 0; padding-bottom: calc(44px + env(safe-area-inset-bottom)); }
.rt-mood-results .rt-sec-title { margin: 24px 0 14px; }
.rt-result-group { margin: 20px 0 10px; }
.rt-sugg-card { max-width: 100%; min-width: 0; overflow: hidden; }
.rt-card-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 7px; margin-top: 12px; padding: 11px 14px 13px; border-top: 1px solid var(--border-color); }
.rt-card-action { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--border-color); border-radius: 12px; background: var(--sm-surface-soft); color: var(--sm-green); padding: 8px 12px; font: inherit; font-size: .86rem; font-weight: 780; }
.rt-card-action .sm-icon { width: 18px; height: 18px; }
.rt-card-action b { font-size: 1.1rem; line-height: 1; }
.rt-card-action.is-primary { background: var(--sm-green); border-color: var(--sm-green); color: #fff; }
.rt-card-action.rt-open-quran { margin-right: auto; background: transparent; }
.rt-search-notice { margin: 14px 0; padding: 12px 14px; border: 1px solid var(--border-color); border-radius: 14px; background: var(--sm-surface-soft); color: var(--text-muted); line-height: 1.5; }
.rt-disambiguation-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.rt-disambiguation-chips button { min-height: 40px; border: 1px solid var(--sm-green); border-radius: 999px; background: var(--sm-surface); color: var(--sm-green); padding: 8px 13px; font-weight: 760; }
.rt-add-sheet { height: auto; max-height: min(70dvh,620px); }
.rt-custom-manage { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-color); }
.rt-custom-manage button { min-height: 42px; border: 1px solid var(--border-color); border-radius: 12px; background: var(--sm-surface-soft); color: var(--sm-green); padding: 8px 12px; font-weight: 780; }
.rt-custom-manage button.is-danger { color: #a84f4f; border-color: color-mix(in srgb,#a84f4f 35%,var(--border-color)); background: color-mix(in srgb,#a84f4f 7%,var(--sm-surface)); }
.rt-move-sheet { height: auto; max-height: min(65dvh,560px); }
body.rt-sheet-open .amin-fab { display: none !important; }
@media (max-width:390px) { .rt-card-actions { justify-content: stretch; } .rt-card-action { flex: 1 1 auto; min-width: 0; padding-inline: 9px; } .rt-card-action.rt-open-quran { flex-basis: 100%; } }

/* Routine search UX: copy compatto, preferiti e sheet ordinato. */
.rt-home-mood .rt-card-head { align-items: flex-start; }
.rt-home-mood .rt-card-head > div { min-width: 0; }
.rt-home-mood .rt-card-head .rt-eyebrow { display: block; margin: 0 0 3px; font-size: .68rem; }
.rt-home-mood .rt-card-head h2 { margin: 0; line-height: 1.18; }
.rt-home-mood .rt-mood-desc { margin: 9px 0 12px; line-height: 1.42; }
.rt-card-action.is-saved { color: var(--sm-green); background: var(--sm-surface-soft); border-color: color-mix(in srgb,var(--sm-green) 32%,var(--border-color)); }
.rt-sheet-create { color: var(--sm-green); font-weight: 780; }

/* Le mie routine nella Home Routine. */
.rt-personal-routines { margin-top: 14px; }
.rt-personal-list { display: grid; gap: 8px; margin-top: 12px; }
.rt-personal-empty { margin: 8px 0 2px; color: var(--text-muted); line-height: 1.5; }
.rt-personal-row { width: 100%; min-width: 0; display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 11px; border: 1px solid var(--border-color); border-radius: 15px; background: var(--sm-surface-soft); color: var(--text-color); padding: 11px 12px; text-align: left; }
.rt-personal-row > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.rt-personal-row strong, .rt-personal-row small { overflow-wrap: anywhere; }
.rt-personal-row strong { color: var(--heading-color); }
.rt-personal-row small { color: var(--text-muted); }
.rt-personal-row > i { color: var(--text-muted); font-size: 1.25rem; font-style: normal; }
.rt-personal-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--sm-green); }
.rt-personal-icon .sm-icon { width: 21px; height: 21px; }
.rt-personal-create { min-height: 44px; margin-top: 12px; border: 1px solid var(--sm-green); border-radius: 13px; background: transparent; color: var(--sm-green); padding: 9px 14px; font-weight: 800; }

/* Routine dinamica v2 — asset approvati + timeline collegata agli orari Salah. */
.rt-dynamic-card-head { align-items: center; }
.rt-dynamic-card-head > div { min-width: 0; }
.rt-dynamic-card-head p { margin: 2px 0 0; color: var(--text-muted); font-size: .78rem; line-height: 1.35; }
.rt-card-icon.rt-card-image { width: 54px; height: 54px; flex-basis: 54px; padding: 0; overflow: hidden; border-radius: 17px; background: transparent; }
.rt-dynamic-icon { display: block; width: 100%; height: 100%; object-fit: cover; }
.rt-daily-progress { display: block; margin-top: 5px; color: var(--sm-green); font-size: .67rem; font-weight: 800; }
.rt-day-row { transition: opacity .2s ease, background-color .2s ease; }
.rt-day-row.is-current { margin-inline: -7px; padding-inline: 7px; border-radius: 14px; background: color-mix(in srgb,var(--sm-green-soft) 62%,transparent); }
.rt-day-row.is-current .rt-day-dot { width: 13px; height: 13px; border: 3px solid var(--sm-surface); background: var(--sm-green); box-shadow: 0 0 0 3px color-mix(in srgb,var(--sm-green) 25%,transparent); }
.rt-day-row.is-completed .rt-day-dot { background: var(--sm-green); border-color: var(--sm-green); }
.rt-day-row.is-completed .rt-day-rail::before { background: var(--sm-green); }
.rt-day-row.is-upcoming { opacity: .72; }
.rt-day-row.is-past:not(.is-completed) { opacity: .82; }
.rt-moment-icon { display: block; width: 38px; height: 38px; object-fit: cover; border-radius: 50%; box-shadow: 0 3px 10px rgba(24,53,46,.12); }
.rt-day-icon { opacity: 1; }
.rt-day-row.is-current .rt-pill-btn { color: #fff; border-color: var(--sm-green); background: var(--sm-green); }
.rt-day-row.is-completed .rt-pill-btn { color: var(--sm-green); background: var(--sm-green-soft); }
.rt-personal-row-icon { display: block; width: 42px; height: 42px; object-fit: cover; border-radius: 50%; }
.rt-personal-icon { overflow: hidden; padding: 0; background: transparent; }
.rt-personal-create { display: flex; align-items: center; justify-content: center; gap: 9px; border-style: dashed; }
.rt-create-icon { width: 30px; height: 30px; object-fit: contain; border-radius: 50%; }
.rt-prayer-card.is-time-current { border-color: var(--sm-coral); box-shadow: inset 3px 0 0 var(--sm-coral); }
.rt-prayer-card.is-time-next { border-color: var(--sm-green); }
body.dark-theme .rt-day-row.is-current { background: color-mix(in srgb,var(--dark-green, #17644f) 32%,transparent); }
body.dark-theme .rt-day-row.is-current .rt-day-dot { border-color: var(--dark-surface, #0d211a); }

@media (max-width: 390px) {
  .rt-card-icon.rt-card-image { width: 49px; height: 49px; flex-basis: 49px; }
  .rt-moment-icon { width: 34px; height: 34px; }
  .rt-day-row { grid-template-columns: 17px 34px minmax(0,1fr) auto; }
}
.routine-builder-modal.is-simple-create .routine-builder-tabs,
.routine-builder-modal.is-simple-create #routine-builder-search,
.routine-builder-modal.is-simple-create #routine-builder-choices,
.routine-builder-modal.is-simple-create .routine-selected-box { display: none !important; }
.routine-builder-modal.is-simple-create { max-height: min(360px, calc(100dvh - 40px)); }

.rt-wakeup-context { margin: 16px max(12px, calc(env(safe-area-inset-right) + 10px)) 0; width: auto; }
.rt-context-note { color: var(--text-muted); line-height: 1.5; }
.rt-context-action {
  width: 100%; display: grid; grid-template-columns: 44px minmax(0,1fr); align-items: start; gap: 12px;
  border: 1px solid var(--border-color); background: color-mix(in srgb,var(--card-bg) 92%,var(--accent-soft));
  color: var(--text-color); border-radius: 16px; padding: 13px; text-align: left; margin-top: 10px;
}
.rt-context-action span:last-child { display: grid; gap: 4px; min-width: 0; }
.rt-context-action strong { color: var(--heading-color); }
.rt-context-action small,.rt-context-action em { color: var(--text-muted); line-height: 1.4; font-style: normal; }
.rt-quran-link { width: fit-content; margin-top: 5px; padding: 9px 13px; border: 0; border-radius: 11px; background: var(--accent-color); color: #fff; font-weight: 750; }
.rt-context-icon { width: 42px; height: 42px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-color); display: grid; place-items: center; }
.rt-context-icon .sm-icon { width: 22px; height: 22px; }
.rt-context-action.is-done .rt-context-icon { background: var(--accent-color); color: #fff; }

.rt-moment-nav {
  position: sticky; z-index: 34; bottom: calc(72px + env(safe-area-inset-bottom));
  display: grid; grid-template-columns: 1fr 1.25fr; gap: 8px; margin: 18px max(12px,calc(env(safe-area-inset-right) + 10px)) 0;
  padding: 9px; border: 1px solid var(--border-color); border-radius: 18px; background: var(--sm-surface, #fffdf9);
  box-shadow: 0 -8px 24px rgba(24,53,46,.10);
}
.rt-moment-nav button { border: 0; border-radius: 12px; padding: 10px; background: var(--accent-soft); color: var(--heading-color); font-weight: 750; }
.rt-moment-nav button:last-child { background: #174f40; color: #fff; opacity: 1; }
.rt-moment-nav button:last-child:active { background: #103c31; color: #fff; }
.rt-moment-nav button:last-child:disabled { background: #6f8f84; color: #fff; opacity: 1; }
.rt-sheet-backdrop { position: fixed; z-index: 9990; inset: 0; width: 100%; height: 100dvh; background: rgba(18,31,27,.31); touch-action: none; }
.rt-moment-sheet {
  position: fixed; z-index: 9991; left: 50%; bottom: 0; transform: translateX(-50%); width: min(430px,100%);
  height: min(72dvh, 680px); max-height: 75dvh; overflow: hidden; padding: 10px 0 0;
  border-radius: 28px 28px 0 0; background: var(--sm-surface, #fffdf9); color: var(--text-color);
  box-shadow: 0 -18px 45px rgba(20,42,35,.24); display: flex; flex-direction: column;
}
.rt-sheet-handle { width: 48px; height: 5px; border-radius: 99px; background: var(--border-color); margin: 0 auto 12px; }
.rt-sheet-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 0 18px 12px; border-bottom: 1px solid var(--border-color); }
.rt-sheet-head h2 { color: var(--heading-color); font-family: Georgia,serif; }
.rt-sheet-head button { width: 44px; min-width: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--sm-surface-soft); color: var(--heading-color); font-size: 1.55rem; }
.rt-sheet-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 0 16px calc(24px + env(safe-area-inset-bottom)); }
.rt-moment-sheet h3 { margin: 17px 0 9px; color: var(--accent-coral); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.rt-sheet-list { display: grid; grid-template-columns: 1fr; gap: 7px; }
.rt-sheet-item { width: 100%; display: grid; grid-template-columns: 38px minmax(0,1fr) 24px; align-items: center; gap: 11px; min-height: 52px; border: 1px solid var(--border-color); border-radius: 14px; background: var(--sm-surface-soft); color: var(--heading-color); padding: 7px 12px; text-align: left; font-weight: 720; }
.rt-sheet-item.is-active { background: var(--sm-green-soft); border-color: color-mix(in srgb,var(--sm-green) 35%,var(--border-color)); color: var(--sm-green); }
.rt-sheet-item-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--sm-surface); color: var(--sm-green); }
.rt-sheet-item-icon .sm-icon { width: 20px; height: 20px; }
.rt-sheet-item i { justify-self: end; font-style: normal; font-size: 1.15rem; }
.rt-sheet-item:disabled { grid-template-columns: 38px minmax(0,1fr) auto; opacity: 1; color: var(--text-muted); }
.rt-sheet-item:disabled i { font-size: .7rem; color: var(--text-muted); white-space: nowrap; }
body.rt-sheet-open { overflow: hidden !important; }
body.rt-sheet-open .amin-fab { display: none !important; }

.rt-item.is-expanded { align-items: start; }
.rt-item-check { border: 1px solid var(--border-color); background: var(--card-bg); color: var(--accent-color); padding: 0; }
.rt-item-check:not(:disabled) { touch-action: manipulation; cursor: pointer; }
.rt-item-check:disabled { opacity: 1; }
.rt-counter-start { grid-column: 1 / -1; width: 100%; border: 0; border-radius: 14px; background: var(--accent-color); color: #fff; font-weight: 800; }
.rt-counter-start.is-done { background: var(--accent-soft); color: var(--accent-color); }
.rt-inline-counter { grid-column: 1 / -1; width: 100%; min-width: 0; display: grid; gap: 11px; padding-top: 13px; border-top: 1px solid var(--border-color); }
.rt-counter-phase { color: var(--heading-color); font-weight: 800; text-align: center; }
.rt-counter-value { color: var(--heading-color); font-family: Georgia,serif; font-size: 2rem; text-align: center; }
.rt-counter-tap { width: 100%; min-height: 76px; border: 0; border-radius: 18px; background: var(--accent-color); color: #fff; font-weight: 850; text-transform: uppercase; letter-spacing: .05em; }
.rt-counter-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rt-counter-tools button { border: 1px solid var(--border-color); border-radius: 12px; background: var(--card-bg); color: var(--text-color); }
.rt-counter-summary { display: grid; gap: 6px; }
.rt-counter-summary span { display: grid; grid-template-columns: 12px minmax(0,1fr) auto; align-items: center; gap: 7px; color: var(--text-muted); font-size: .84rem; }
.rt-counter-summary span::before { content: ''; width: 9px; height: 9px; border: 1.5px solid currentColor; border-radius: 50%; }
.rt-counter-summary span b { grid-column: 3; }
.rt-counter-summary span.is-done { color: var(--accent-color); }
.rt-counter-summary span.is-done::before { background: currentColor; }

@media (max-width: 430px) {
  #view-routine-wakeup,
  #view-routine-morning,
  #view-routine-evening,
  #view-routine-bedtime { padding-bottom: calc(270px + env(safe-area-inset-bottom)); }
  body.rt-immersive:has(#view-routine-wakeup[style*="display: block"]) .amin-fab,
  body.rt-immersive:has(#view-routine-morning[style*="display: block"]) .amin-fab,
  body.rt-immersive:has(#view-routine-evening[style*="display: block"]) .amin-fab,
  body.rt-immersive:has(#view-routine-bedtime[style*="display: block"]) .amin-fab,
  body.rt-immersive:has(#view-salah-detail[style*="display: block"]) .amin-fab { bottom: calc(166px + env(safe-area-inset-bottom)) !important; }
  .rt-wakeup-item { padding: 15px; }
  .rt-morning-item { padding: 15px; }
  .rt-inline-count-tools button { font-size: 16px; }
}
/* ================================================================
   Routine personali — builder e dettaglio dedicati
   ================================================================ */
#view-personal-routine-builder,
#view-personal-routine-detail {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
    box-sizing: border-box;
    padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px));
}

#personal-routine-builder-root,
#personal-routine-detail-root,
.pr-builder-main,
.pr-detail-main,
.pr-results,
.pr-detail-list {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.pr-header { position: relative; }
.pr-header .rt-back { margin-bottom: 18px; }
.pr-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.pr-title-row > div { min-width: 0; }
.pr-title-row h1 { overflow-wrap: anywhere; }
.pr-title-row p { margin: 4px 0 0; color: var(--text-muted); }
.pr-menu-button {
    flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid var(--rt-line, #dcd3c5); background: var(--card-bg, #fffdf9);
    color: var(--primary); font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.pr-menu {
    position: absolute; z-index: 8; right: max(20px, env(safe-area-inset-right, 0px)); top: 118px;
    width: min(230px, calc(100% - 40px)); padding: 8px; border-radius: 18px;
    background: var(--card-bg, #fffdf9); border: 1px solid var(--rt-line, #dcd3c5);
    box-shadow: 0 14px 34px rgba(22, 59, 49, .15);
}
.pr-menu button { display: block; width: 100%; padding: 13px 12px; border: 0; border-radius: 12px; background: transparent; color: var(--text-dark); text-align: left; font: inherit; cursor: pointer; }
.pr-menu button:hover { background: rgba(26, 91, 72, .07); }
.pr-menu .is-danger { color: #a84843; }

.pr-builder-main,
.pr-detail-main { padding: 4px clamp(18px, 5vw, 28px) 28px; }
.pr-builder-main label { display: block; margin: 0 0 8px; color: var(--primary); font-weight: 800; }
.pr-builder-main h2 { margin: 26px 0 12px; color: var(--primary); font-family: var(--font-display, Georgia, serif); }
.pr-name,
.pr-search {
    display: block; width: 100%; max-width: 100%; box-sizing: border-box;
    border: 1px solid var(--rt-line, #dcd3c5); border-radius: 16px;
    background: var(--card-bg, #fffdf9); color: var(--text-dark); font: inherit;
    padding: 15px 16px; outline: none;
}
.pr-name:focus,
.pr-search:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(21, 88, 68, .10); }
.pr-tabs { margin: 2px 0 10px; }
.pr-tabs .pr-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 66px; padding: 5px 2px; overflow: hidden; }
.pr-tab-icon { display: grid; place-items: center; width: 30px; height: 30px; overflow: hidden; border-radius: 9px; background: #fbf7ef; box-shadow: inset 0 0 0 1px rgba(23,79,64,.08); }
.pr-tab-icon img { width: 30px; height: 30px; max-width: none; object-fit: contain; transform: scale(1.65); transform-origin: center; }
.pr-tab-label { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-tabs .pr-tab.is-active .pr-tab-icon { background: #fffaf1; box-shadow: inset 0 0 0 1px rgba(255,255,255,.45),0 2px 7px rgba(0,0,0,.12); }
@media (max-width: 390px) {
  .pr-tabs { gap: 3px; padding: 3px; }
  .pr-tabs .pr-tab { min-height: 62px; padding-inline: 1px; font-size: .68rem; }
  .pr-tab-icon,.pr-tab-icon img { width: 28px; height: 28px; }
}
.pr-search-form { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; align-items: stretch; margin: 4px 0 14px; }
.pr-search-form .pr-search { min-width: 0; margin: 0; }
.pr-search-form button { min-height: 50px; border: 0; border-radius: 16px; padding: 0 18px; background: var(--primary); color: #fff; font: inherit; font-size: 16px; font-weight: 800; touch-action: manipulation; }
.pr-results { display: grid; gap: 10px; }
.pr-result {
    display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: flex-start;
    width: 100%; max-width: 100%; padding: 15px; box-sizing: border-box;
    border: 1px solid var(--rt-line, #dcd3c5); border-radius: 17px;
    background: var(--card-bg, #fffdf9); color: var(--text-dark); text-align: left; cursor: pointer;
}
.pr-result.is-selected { border-color: var(--primary); background: rgba(24, 99, 76, .07); }
.pr-result span:last-child { min-width: 0; }
.pr-result small { display: block; color: var(--coral, #c96d62); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.pr-result strong { display: block; margin-top: 4px; color: var(--primary); overflow-wrap: anywhere; }
.pr-result em { display: block; margin-top: 5px; color: var(--text-muted); font-size: .82rem; font-style: normal; overflow-wrap: anywhere; }
.pr-select { color: var(--primary); font-size: 1.25rem; }
.pr-empty { margin: 10px 0; padding: 24px 16px; border-radius: 17px; background: rgba(255,255,255,.5); color: var(--text-muted); text-align: center; }
.pr-empty strong { display: block; color: var(--primary); }
.pr-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 15px; }
.pr-chips button { padding: 8px 12px; border: 1px solid var(--rt-line, #dcd3c5); border-radius: 999px; background: var(--card-bg, #fffdf9); color: var(--primary); }
.pr-disambiguation,.pr-other-tabs { padding: 18px 16px; border: 1px solid var(--rt-line, #dcd3c5); border-radius: 17px; background: var(--card-bg, #fffdf9); color: var(--text-muted); text-align: center; }
.pr-disambiguation strong { color: var(--primary); }
.pr-other-tabs small { display: block; margin-bottom: 10px; }
.pr-other-tabs button { border: 0; background: transparent; color: var(--primary); padding: 5px; font: inherit; font-weight: 800; }
.pr-sticky {
    position: fixed; z-index: 44; left: 50%; transform: translateX(-50%);
    bottom: calc(var(--bottom-nav-height, 76px) + env(safe-area-inset-bottom, 0px));
    width: min(100%, 572px); max-width: 100%; box-sizing: border-box;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px max(18px, env(safe-area-inset-right, 0px)) 12px max(18px, env(safe-area-inset-left, 0px));
    border-top: 1px solid var(--rt-line, #dcd3c5); background: rgba(255, 253, 249, .96); backdrop-filter: blur(14px);
}
.pr-sticky strong { min-width: 0; color: var(--text-muted); font-size: .82rem; }
.pr-sticky button,
.pr-add-content {
    min-height: 44px; border: 0; border-radius: 14px; padding: 11px 17px;
    background: var(--primary); color: #fff; font-weight: 800; cursor: pointer;
}
.pr-add-content { display: block; width: 100%; margin-bottom: 15px; }
.pr-detail-list { display: grid; gap: 14px; }
.pr-detail-card { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; padding: 20px; border: 1px solid var(--rt-line, #dcd3c5); border-radius: 22px; background: var(--card-bg, #fffdf9); box-shadow: 0 8px 20px rgba(39,54,43,.05); }
.pr-detail-card h2 { margin: 5px 0 14px; color: var(--primary); font-family: var(--font-display, Georgia, serif); overflow-wrap: anywhere; }
.pr-detail-card .rt-morning-ar { max-width: 100%; overflow-wrap: anywhere; }
.pr-source { color: var(--text-muted); font-size: .82rem; overflow-wrap: anywhere; }
.pr-item-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--rt-line, #dcd3c5); }
.pr-item-actions button { flex: 1 1 105px; min-height: 40px; padding: 8px; border: 1px solid var(--rt-line, #dcd3c5); border-radius: 12px; background: transparent; color: var(--primary); font-weight: 700; }
.pr-item-actions button:disabled { opacity: .36; }
.pr-item-actions .is-danger { color: #a84843; }
.pr-reorder-list { display: grid; gap: 10px; }
.pr-reorder-row { display: grid; grid-template-columns: 28px minmax(0,1fr) auto; align-items: center; gap: 10px; width: 100%; min-width: 0; box-sizing: border-box; padding: 14px; border: 1px solid var(--rt-line, #dcd3c5); border-radius: 16px; background: var(--card-bg, #fffdf9); }
.pr-reorder-row > span { min-width: 0; }
.pr-reorder-row small { display: block; color: var(--coral, #c96d62); font-size: .7rem; font-weight: 800; text-transform: uppercase; }
.pr-reorder-row strong { display: block; margin-top: 3px; color: var(--primary); overflow-wrap: anywhere; }
.pr-drag { color: var(--text-muted); font-size: 1.15rem; }
.pr-reorder-actions { display: flex; gap: 6px; }
.pr-reorder-actions button { width: 42px; height: 42px; border: 1px solid var(--rt-line, #dcd3c5); border-radius: 12px; background: transparent; color: var(--primary); font-size: 1.1rem; font-weight: 800; }
.pr-reorder-actions button:disabled { opacity: .3; }
.pr-save-order { display: block; width: 100%; min-height: 50px; margin-top: 16px; border: 0; border-radius: 15px; background: var(--primary); color: #fff; font: inherit; font-weight: 800; }
.rt-favorites-card { display: grid; grid-template-columns: 48px minmax(0,1fr) auto; align-items: center; gap: 12px; width: calc(100% - 28px); margin: 14px; padding: 16px; color: var(--text-color); text-align: left; }
.rt-favorites-card > span:nth-child(2) { min-width: 0; }
.rt-favorites-card strong,.rt-favorites-card small { display: block; }
.rt-favorites-card strong { color: var(--sm-green); font-family: Georgia,serif; font-size: 1.15rem; }
.rt-favorites-card small { margin-top: 3px; color: var(--text-muted); }
.rt-favorites-card > i { color: var(--text-muted); font-style: normal; font-size: 1.35rem; }

@media (max-width: 390px) {
    .pr-builder-main, .pr-detail-main { padding-left: 16px; padding-right: 16px; }
    .pr-sticky strong { max-width: 44%; }
    .pr-sticky button { padding-left: 13px; padding-right: 13px; }
    .pr-search-form { grid-template-columns: 1fr; }
    .pr-search-form button { width: 100%; }
}
/* Manuale del convertito — composizione sui componenti/tokens condivisi di Impara. */
.manual-view,.manual-view *{box-sizing:border-box}.manual-view{width:100%;min-height:100dvh;overflow-x:hidden;background:var(--bg-light);color:var(--text-dark)}
.manual-topbar{position:sticky;top:0;z-index:12;min-height:62px;padding:calc(8px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 8px max(16px,env(safe-area-inset-left));display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:8px;background:color-mix(in srgb,var(--bg-light) 94%,transparent);border-bottom:1px solid var(--border-color);backdrop-filter:blur(14px)}
.manual-topbar strong{min-width:0;text-align:center;color:var(--primary);font-size:1rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.manual-topbar-spacer{width:44px}.manual-back.rt-back-btn{width:44px;min-width:44px;height:44px;margin:0;padding:0;display:grid;place-items:center;border:0;background:transparent;font-size:1.35rem}
.manual-content{width:100%;max-width:620px;min-width:0;margin:0 auto;padding:18px max(16px,env(safe-area-inset-right)) calc(142px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}.manual-eyebrow.hub-eyebrow{display:block;margin-bottom:8px;color:var(--accent-coral);font-size:.72rem;font-weight:850;letter-spacing:.09em;text-transform:uppercase}
.manual-hero.card{position:relative;min-width:0;margin:0;padding:22px 20px;overflow:hidden;border:1px solid var(--border-color);border-radius:22px;background:linear-gradient(135deg,var(--sm-surface),color-mix(in srgb,var(--sm-green-soft) 58%,var(--sm-surface)));box-shadow:0 5px 18px rgba(24,53,46,.06)}
.manual-hero.card::after{content:"";position:absolute;right:-8px;bottom:-14px;width:112px;height:150px;opacity:.1;background:url('assets/manual-path-thinking.png') center/cover no-repeat;border-radius:50%;pointer-events:none}.manual-hero>*{position:relative;z-index:1}.manual-hero h1,.manual-path-page>h1,.manual-reader>h1{margin:0 0 12px;color:var(--heading-color,var(--primary));font-family:var(--font-display,Georgia,serif);font-weight:700;line-height:1.16}.manual-hero h1{max-width:82%;font-size:1.85rem}.manual-hero p{max-width:92%;margin:0 0 10px;color:var(--text-color,var(--text-dark));font-size:.95rem;line-height:1.55}.manual-tagline{display:block;margin-top:17px;color:var(--primary);font-size:1rem}
.manual-paths{display:grid;gap:12px;margin-top:16px}.manual-path-card{width:100%;min-width:0;min-height:96px;padding:14px;display:grid;grid-template-columns:58px minmax(0,1fr) 20px;gap:13px;align-items:center;text-align:left;color:var(--heading-color,var(--primary));border:1px solid var(--border-color);border-radius:18px;background:var(--sm-surface);box-shadow:0 4px 14px rgba(24,53,46,.05);cursor:pointer}.manual-path-new_convert{background:color-mix(in srgb,var(--sm-slate-soft) 38%,var(--sm-surface))}.manual-path-card img{width:56px;height:56px;object-fit:cover;border-radius:50%}.manual-path-copy{min-width:0;display:grid;gap:4px}.manual-path-card strong{font-size:1.02rem;line-height:1.24}.manual-path-card small{display:-webkit-box;overflow:hidden;color:var(--text-muted);font-size:.79rem;line-height:1.38;-webkit-box-orient:vertical;-webkit-line-clamp:2}.manual-path-card>b,.manual-page-card>b{justify-self:end;color:var(--primary);font-size:1.35rem;font-weight:400}
.manual-quick-section{margin-top:25px}.manual-quick-section h2{margin:0 0 12px;color:var(--heading-color,var(--primary));font-family:var(--font-display,Georgia,serif);font-size:1.35rem}.manual-quick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.manual-quick-card{min-width:0;min-height:112px;padding:13px 9px;display:grid;place-items:center;align-content:center;border:1px solid var(--border-color);border-radius:17px;background:var(--sm-surface);color:var(--heading-color,var(--primary));box-shadow:0 4px 14px rgba(24,53,46,.045);cursor:pointer}.manual-quick-card img{width:48px;height:48px;margin:0 0 7px;object-fit:cover;border-radius:50%}.manual-quick-card strong,.manual-quick-card small{display:block;text-align:center}.manual-quick-card strong{font-size:.88rem}.manual-quick-card small{margin-top:3px;color:var(--text-muted);font-size:.68rem;line-height:1.25}
.manual-path-page>h1{font-size:1.9rem}.manual-lead{margin:-2px 0 25px;color:var(--text-muted);font-size:.92rem;line-height:1.5}.manual-group{margin-bottom:26px}.manual-group>h2.hub-eyebrow{margin:0 0 11px;color:var(--accent-coral);font-size:.75rem;font-weight:850;letter-spacing:.09em;text-transform:uppercase}.manual-page-list{display:grid;gap:11px}.manual-page-card{width:100%;min-width:0;min-height:84px;padding:14px 15px;display:grid;grid-template-columns:minmax(0,1fr) 20px;gap:12px;align-items:center;text-align:left;border:1px solid var(--border-color);border-radius:18px;background:var(--sm-surface);color:var(--heading-color,var(--primary));box-shadow:0 4px 14px rgba(24,53,46,.045);cursor:pointer}.manual-page-copy{min-width:0;display:grid;gap:5px}.manual-page-card strong{font-family:var(--font-display,Georgia,serif);font-size:1.08rem;line-height:1.22}.manual-page-card small{display:-webkit-box;overflow:hidden;color:var(--text-muted);font-size:.8rem;line-height:1.38;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.manual-reader{max-width:600px}.manual-reader-meta{display:flex;justify-content:space-between;gap:8px;margin-bottom:22px}.manual-reader-meta span{max-width:68%;padding:6px 10px;overflow:hidden;border-radius:999px;background:var(--sm-green-soft);color:var(--primary);font-size:.72rem;white-space:nowrap;text-overflow:ellipsis}.manual-reader>h1{font-size:1.95rem}.manual-hook{margin:0 0 22px;padding:8px 0 8px 14px;border-left:3px solid var(--accent-coral);color:var(--primary);font-family:var(--font-display,Georgia,serif);font-size:1.12rem;line-height:1.48}.manual-body p{margin:0 0 16px;color:var(--text-color,var(--text-dark));font-size:1rem;line-height:1.68}
.manual-formula-card.ahadith-formula,.manual-pillars.ahadith-reader-section,.manual-sources.ahadith-reader-source{margin:20px 0;padding:17px;border-radius:17px}.manual-formula-card>div+div{margin-top:13px;padding-top:13px;border-top:1px solid var(--border-color)}.manual-formula-card span,.manual-sources>span{color:var(--accent-coral);font-size:.72rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.manual-formula-card p{margin:6px 0 0;line-height:1.55}.manual-formula-card .manual-arabic{color:var(--primary);font-family:var(--font-arabic,'Amiri',serif);font-size:1.72rem;line-height:1.85;text-align:right}.manual-pillars h2{margin:0 0 10px;color:var(--primary);font-family:var(--font-display,Georgia,serif);font-size:1.25rem}.manual-pillars ol{margin:0;padding-left:23px}.manual-pillars li{padding:6px 0;color:var(--text-color,var(--text-dark))}.manual-sources{background:var(--sm-surface-soft)}.manual-sources p{margin:7px 0 0;color:var(--text-muted);font-size:.84rem;line-height:1.4}
.manual-primary-cta{width:100%;min-height:52px;margin-top:22px;padding:13px 17px;display:flex;justify-content:center;align-items:center;gap:10px;border:0;border-radius:15px;background:var(--sm-green);color:#fff;font:inherit;font-size:1rem;font-weight:850;box-shadow:0 6px 18px rgba(23,79,64,.16);cursor:pointer}.manual-primary-cta:active{background:#123f34}.manual-secondary-link{width:100%;min-height:46px;margin-top:8px;border:0;background:transparent;color:var(--primary);font:inherit;font-size:.84rem;font-weight:750;cursor:pointer}.manual-loading,.manual-error{padding:72px 22px;text-align:center;color:var(--primary)}
body.dark-theme .manual-topbar{background:color-mix(in srgb,var(--bg-light) 94%,transparent)}body.dark-theme .manual-hero.card::after{opacity:.05}
@media(max-width:390px){.manual-content{padding-left:14px;padding-right:14px}.manual-topbar{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}.manual-hero.card{padding:20px 17px}.manual-hero h1{font-size:1.75rem}.manual-path-card{grid-template-columns:52px minmax(0,1fr) 18px;padding:12px;gap:11px}.manual-path-card img{width:50px;height:50px}.manual-page-card{padding:13px}.manual-reader>h1{font-size:1.85rem}}

/* Letture e percorsi: componenti scoped per Manuale / Perché l'Islam. */
.manual-tabs.smart-segmented-control{width:100%;margin:0 0 18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:4px;border:1px solid var(--border-color);border-radius:16px;background:var(--sm-surface-soft)}
.manual-tabs .smart-segmented-item{min-width:0;min-height:42px;padding:8px 12px;border:0;border-radius:12px;background:transparent;color:var(--primary);font:inherit;font-size:.88rem;font-weight:800;cursor:pointer}
.manual-tabs .smart-segmented-item.is-active{background:var(--sm-green);color:#fff;box-shadow:0 3px 10px rgba(23,79,64,.14)}
.manual-search-panel>h2{margin:22px 0 12px;color:var(--primary);font-family:var(--font-display,Georgia,serif);font-size:1.3rem}
.manual-search-box{width:100%;min-height:52px;padding:0 15px;display:flex;align-items:center;gap:10px;border:1px solid var(--border-color);border-radius:16px;background:var(--sm-surface);color:var(--primary)}
.manual-search-box input{width:100%;min-width:0;min-height:50px;padding:0;border:0;outline:0;background:transparent;color:var(--text-dark);font:inherit;font-size:16px}
.manual-search-routing,.manual-search-empty,.why-manual-callout{margin-top:20px;padding:18px;border:1px solid var(--border-color);border-radius:18px;background:var(--sm-surface);box-shadow:0 4px 14px rgba(24,53,46,.045)}
.manual-search-routing p,.manual-search-empty p,.why-manual-callout p{margin:0;color:var(--text-muted);font-size:.88rem;line-height:1.5}.manual-search-empty strong{display:block;margin-bottom:7px;color:var(--primary);line-height:1.4}
.manual-faq-next,.why-reader-block{margin:20px 0;padding:17px;border:1px solid var(--border-color);border-radius:17px;background:var(--sm-surface)}
.manual-faq-next h2,.why-reader-block h2,.why-manual-callout h2{margin:0 0 10px;color:var(--primary);font-family:var(--font-display,Georgia,serif);font-size:1.22rem}.manual-faq-next p,.why-reader-block p{margin:0 0 12px;line-height:1.65}.manual-faq-next p:last-child,.why-reader-block p:last-child{margin-bottom:0}
.why-hero .why-hero-subtitle{color:var(--primary);font-family:var(--font-display,Georgia,serif);font-size:1.06rem;line-height:1.48}.why-sections{display:grid;gap:11px;margin-top:16px}.why-section-card{min-height:96px}.why-card small{-webkit-line-clamp:3}.why-reader-block.why-limits{border-left:3px solid var(--accent-coral);background:var(--sm-surface-soft)}
.why-manual-callout h2{font-size:1.2rem}.why-manual-callout .manual-primary-cta{margin-top:14px}.manual-why-callout{margin-top:28px}
@media(max-width:390px){.why-content{padding-left:14px;padding-right:14px}.why-section-card{padding:13px}.manual-search-panel>h2{font-size:1.2rem}}

/* Perché l'Islam? V1.5 — percorso narrativo a cinque capitoli. */
.why-v15-hero h1{max-width:100%;font-size:1.72rem}.why-v15-hero .why-hero-subtitle{max-width:100%;margin-bottom:0;font-size:1rem}
.why-reading-path{display:grid;gap:11px;margin-top:16px}.why-chapter-card{position:relative;width:100%;min-width:0;min-height:112px;padding:17px 44px 16px 17px;display:block;text-align:left;border:1px solid var(--border-color);border-radius:18px;background:var(--sm-surface);color:var(--primary);box-shadow:0 4px 14px rgba(24,53,46,.045);cursor:pointer}.why-chapter-card .manual-eyebrow{margin-bottom:7px}.why-chapter-card strong,.why-chapter-card small{display:block}.why-chapter-card strong{font-family:var(--font-display,Georgia,serif);font-size:1.16rem;line-height:1.25}.why-chapter-card small{margin-top:6px;color:var(--text-muted);font-size:.84rem;line-height:1.4}.why-chapter-card>b{position:absolute;right:17px;top:50%;translate:0 -50%;font-size:1.35rem;font-weight:400}
.why-chapter-page>h1{font-size:1.78rem}.why-chapter-question{margin:-4px 0 10px;color:var(--primary);font-family:var(--font-display,Georgia,serif);font-size:1.08rem;font-weight:700;line-height:1.4}.why-chapter-page>.manual-lead{margin-bottom:22px}
.why-subgroup{margin-top:25px}.why-subgroup>h2{margin:0 0 7px;color:var(--primary);font-family:var(--font-display,Georgia,serif);font-size:1.28rem;line-height:1.25}.why-subgroup>p{margin:0 0 12px;color:var(--text-muted);font-size:.85rem;line-height:1.5}.why-subgroup.why-optional{margin-top:30px;padding-top:22px;border-top:1px solid var(--border-color)}
.why-transition{margin-top:28px;padding:17px;border-left:3px solid var(--accent-coral);border-radius:0 16px 16px 0;background:var(--sm-surface-soft)}.why-transition>p{margin:0;color:var(--primary);font-family:var(--font-display,Georgia,serif);font-size:1rem;line-height:1.58}.why-transition .manual-primary-cta{margin-top:15px}
.why-final-callout{margin-top:16px}.why-v15-reader>h1{font-size:1.75rem;line-height:1.18}.why-v15-reader .why-reader-block{padding:2px 0 4px;border:0;background:transparent}.why-v15-reader .why-reader-block+ .why-reader-block{margin-top:23px;padding-top:20px;border-top:1px solid var(--border-color)}.why-v15-reader .why-reader-block h2{font-size:1.18rem}
@media(max-width:390px){.why-v15-hero h1{font-size:1.62rem}.why-chapter-card{min-height:104px;padding:15px 40px 14px 15px}.why-chapter-card strong{font-size:1.08rem}.why-chapter-page>h1,.why-v15-reader>h1{font-size:1.62rem}}

/* Manuale V1.6 — uscita conclusiva verso i moduli canonici. */
.manual-closing-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:24px 0 8px}.manual-closing-action{position:relative;min-width:0;min-height:88px;padding:15px 34px 15px 14px;text-align:left;border:1px solid var(--border-color);border-radius:17px;background:var(--sm-surface);color:var(--primary);box-shadow:0 4px 14px rgba(24,53,46,.045);cursor:pointer}.manual-closing-action strong{font-family:var(--font-display,Georgia,serif);font-size:1rem;line-height:1.3}.manual-closing-action b{position:absolute;right:14px;top:50%;translate:0 -50%;font-size:1.25rem;font-weight:400}
@media(max-width:375px){.manual-closing-actions{grid-template-columns:1fr}.manual-closing-action{min-height:68px}}

/* Wuḍūʾ + Ṣalāh learning modules — native Smart Muslim UI */
.learn-view,.learn-view *{box-sizing:border-box}.learn-view{width:100%;min-height:100dvh;overflow-x:hidden;background:var(--bg-light);color:var(--text-dark)}
.learn-topbar{position:sticky;top:0;z-index:12;min-height:62px;padding:calc(8px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 8px max(16px,env(safe-area-inset-left));display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:8px;background:color-mix(in srgb,var(--bg-light) 94%,transparent);border-bottom:1px solid var(--border-color);backdrop-filter:blur(14px)}
.learn-topbar strong{min-width:0;text-align:center;color:var(--primary);font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.learn-back{width:44px;height:44px;padding:0;display:grid;place-items:center;border:0;background:transparent;color:var(--primary);font:inherit;font-size:1.35rem;cursor:pointer}
.learn-content{width:100%;max-width:620px;min-width:0;margin:0 auto;padding:18px max(16px,env(safe-area-inset-right)) calc(150px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}.learn-eyebrow{display:block;margin-bottom:7px;color:var(--accent-coral);font-size:.7rem;font-weight:850;letter-spacing:.09em}.learn-hero{position:relative;min-height:238px;padding:27px 20px 22px;overflow:hidden;border:1px solid var(--border-color);border-radius:22px;background:linear-gradient(145deg,var(--sm-surface),color-mix(in srgb,var(--sm-green-soft) 55%,var(--sm-surface)));box-shadow:0 5px 18px rgba(24,53,46,.06)}
.learn-hero-art{position:absolute;right:-10px;bottom:-15px;width:160px;height:160px;display:grid;place-items:center;border-radius:55% 45% 0 45%;background:radial-gradient(circle,#dbe8dc 0,#eef1e9 62%,transparent 63%);color:var(--sm-green);opacity:.8}.learn-hero-art .learn-icon{width:70px;height:70px}.learn-hero>*:not(.learn-hero-art){position:relative;z-index:1}.learn-hero h1,.learn-page-title,.learn-step h1,.learn-section-title{margin:0;color:var(--primary);font-family:var(--font-display,Georgia,serif);line-height:1.15}.learn-hero h1{max-width:75%;font-size:1.85rem}.learn-hero p{max-width:68%;margin:10px 0 0;color:var(--text-muted);font-size:.94rem;line-height:1.52}.learn-menu{display:grid;gap:10px;margin-top:14px}.learn-menu-card{width:100%;min-width:0;min-height:92px;padding:13px 14px;display:grid;grid-template-columns:54px minmax(0,1fr) 18px;gap:13px;align-items:center;text-align:left;border:1px solid var(--border-color);border-radius:18px;background:var(--sm-surface);color:var(--primary);box-shadow:0 4px 14px rgba(24,53,46,.045);cursor:pointer}.learn-menu-card.is-green{background:color-mix(in srgb,var(--sm-green-soft) 45%,var(--sm-surface))}.learn-menu-card.is-blue{background:color-mix(in srgb,#dcecf3 45%,var(--sm-surface))}.learn-menu-card.is-lilac{background:color-mix(in srgb,#ebe4f2 45%,var(--sm-surface))}.learn-menu-card.is-sand{background:color-mix(in srgb,#f3e7ca 38%,var(--sm-surface))}.learn-menu-icon,.learn-list-icon{display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--sm-green-soft) 72%,var(--sm-surface));color:var(--primary)}.learn-menu-icon{width:54px;height:54px}.learn-icon{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.learn-menu-card>span:nth-child(2){min-width:0;display:grid;gap:4px}.learn-menu-card strong{font-size:1rem}.learn-menu-card small{color:var(--text-muted);font-size:.78rem;line-height:1.35}.learn-menu-card>b{font-size:1.35rem;font-weight:400}.learn-primary{width:100%;min-width:0;min-height:52px;padding:13px 17px;border:0;border-radius:15px;background:var(--sm-green);color:#fff;font:inherit;font-size:.95rem;font-weight:850;cursor:pointer}.learn-primary:active{background:#123f34}.learn-primary:disabled{opacity:.45}.learn-final-cta{margin-top:14px;display:grid;grid-template-columns:24px 1fr 18px;align-items:center}.learn-final-cta .learn-icon{width:21px;height:21px}.learn-page-title{font-size:1.85rem}.learn-lead{margin:8px 0 20px;color:var(--text-muted);font-size:.92rem;line-height:1.5}
.learn-progress{display:grid;gap:10px;margin:0 0 26px;text-align:center}.learn-progress>span{color:var(--primary);font-size:.75rem;font-weight:800}.learn-progress>div{display:flex;justify-content:center;gap:5px}.learn-progress i{width:min(34px,10%);height:5px;border-radius:999px;background:var(--border-color)}.learn-progress i.is-done{background:var(--sm-green)}.learn-step{text-align:center}.learn-step>h1{font-size:2rem}.learn-step>p{max-width:420px;margin:17px auto;color:var(--text-dark);font-size:.95rem;line-height:1.5}.learn-illustration{position:relative;width:100%;max-width:370px;aspect-ratio:1.22;margin:18px auto 0;display:grid;place-items:center;overflow:hidden;border:1px solid var(--border-color);border-radius:24px;background:linear-gradient(145deg,#f8f1df,#e8eee4)}.learn-visual-halo{position:absolute;width:70%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.58)}.learn-visual-figure{position:relative;z-index:1;color:var(--sm-green)}.learn-wudu-visual .learn-icon{width:100px;height:100px;stroke-width:1}.learn-illustration>small{position:absolute;right:14px;top:14px;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:var(--sm-surface);color:var(--primary);font-weight:850}.learn-repeat{width:max-content;margin:-15px auto 0;padding:8px 14px;position:relative;z-index:2;display:flex;align-items:center;gap:6px;border:1px solid var(--border-color);border-radius:999px;background:var(--sm-surface);color:var(--primary);font-weight:800}.learn-repeat .learn-icon{width:17px;height:17px}.learn-step-nav{display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px;margin-top:20px}.learn-step-nav>button:first-child{min-height:52px;border:1px solid var(--border-color);border-radius:50%;background:var(--sm-surface);color:var(--primary);font:inherit;font-size:1.2rem}.learn-step-nav>button:disabled{opacity:.35}.learn-quick-grid,.learn-check-list,.learn-prayers,.learn-lessons{display:grid;gap:10px}.learn-quick-grid article{min-width:0;padding:12px;display:grid;grid-template-columns:30px minmax(0,1fr);gap:9px;align-items:center;border:1px solid var(--border-color);border-radius:17px;background:var(--sm-surface)}.learn-quick-grid article>span{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:var(--sm-green-soft);color:var(--primary);font-size:.78rem;font-weight:850}.learn-quick-grid article>div{min-width:0;display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:8px}.learn-quick-grid strong{font-size:.86rem}.learn-quick-grid small{color:var(--accent-coral);font-size:.74rem;font-weight:850}.learn-check-list{margin:18px 0 22px}.learn-check-list>div{min-width:0;min-height:76px;padding:11px 14px;display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:12px;align-items:center;border:1px solid var(--border-color);border-radius:17px;background:var(--sm-surface)}.learn-list-icon{width:48px;height:48px}.learn-check-list strong{font-size:.9rem;line-height:1.35}.learn-check-list i{width:25px;height:25px;display:grid;place-items:center;border-radius:50%;background:var(--sm-green);color:#fff;font-style:normal}.learn-before-list button{min-height:38px;padding:7px 10px;border:1px solid var(--sm-green);border-radius:11px;background:transparent;color:var(--primary);font:inherit;font-size:.74rem;font-weight:800}.learn-callout{margin-top:24px;padding:17px;display:grid;grid-template-columns:56px minmax(0,1fr);gap:13px;border:1px solid color-mix(in srgb,var(--sm-green) 28%,var(--border-color));border-radius:19px;background:color-mix(in srgb,var(--sm-green-soft) 55%,var(--sm-surface))}.learn-callout>span{width:56px;height:56px;display:grid;place-items:center;border-radius:50%;background:var(--sm-surface);color:var(--primary)}.learn-callout>span .learn-icon{width:32px;height:32px}.learn-callout h2{margin:2px 0 6px;color:var(--primary);font-family:var(--font-display,Georgia,serif);font-size:1.2rem}.learn-callout p{margin:0;color:var(--text-muted);font-size:.8rem;line-height:1.45}.learn-callout .learn-primary{grid-column:1/-1;margin-top:2px}
.salah-position>p{margin-bottom:5px}.learn-salah-visual .learn-visual-figure{width:105px;height:145px;transform:rotate(19deg)}.learn-salah-visual .learn-visual-figure i{position:absolute;left:38px;top:3px;width:34px;height:34px;border:3px solid var(--sm-green);border-radius:50%}.learn-salah-visual .learn-visual-figure b{position:absolute;left:47px;top:37px;width:25px;height:96px;border:4px solid var(--sm-green);border-radius:50% 50% 30% 30%;transform:skew(-17deg)}.learn-phrase{max-width:370px;margin:10px auto 0;padding:15px;display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:4px 10px;align-items:center;text-align:left;border:1px solid var(--border-color);border-radius:17px;background:var(--sm-surface)}.learn-phrase strong{color:var(--primary);font-family:var(--font-display,Georgia,serif);font-size:1.06rem;line-height:1.35}.learn-phrase span{grid-column:1;color:var(--text-muted);font-size:.72rem}.learn-phrase button,.learn-lesson button{grid-column:2;grid-row:1/3;width:42px;height:42px;border:1px solid var(--border-color);border-radius:50%;background:var(--sm-surface-soft);color:var(--text-muted)}.learn-prayers{margin:20px 0}.learn-prayers article{min-height:77px;padding:12px 14px;display:grid;grid-template-columns:48px minmax(0,1fr) 42px;gap:12px;align-items:center;border:1px solid var(--border-color);border-radius:17px;background:var(--sm-surface)}.learn-prayers article>span{width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:var(--sm-green-soft);color:var(--primary)}.learn-prayers article>div{display:grid;gap:3px}.learn-prayers strong{color:var(--primary);font-family:var(--font-display,Georgia,serif);font-size:1.05rem}.learn-prayers small{color:var(--text-muted)}.learn-prayers b{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:var(--sm-green);color:#fff}.learn-section-title{margin:30px 0 5px;font-size:1.35rem}.learn-lesson{min-width:0;min-height:82px;padding:12px 13px;display:grid;grid-template-columns:46px minmax(0,1fr) 42px;gap:11px;align-items:center;border:1px solid var(--border-color);border-radius:17px;background:var(--sm-surface)}.learn-lesson.is-featured{border-color:color-mix(in srgb,var(--sm-green) 55%,var(--border-color));background:color-mix(in srgb,var(--sm-green-soft) 40%,var(--sm-surface))}.learn-lesson>span{width:46px;height:46px;display:grid;place-items:center;border-radius:50%;background:var(--sm-green-soft);color:var(--primary)}.learn-lesson>div{min-width:0;display:grid;gap:4px}.learn-lesson strong{color:var(--primary);font-size:.94rem}.learn-lesson small{color:var(--text-muted);font-size:.7rem;line-height:1.3}.learn-lesson button{grid-column:3;grid-row:1}.learn-loading{padding:80px 22px;text-align:center;color:var(--primary)}body.dark-theme .learn-topbar{background:color-mix(in srgb,var(--bg-light) 94%,transparent)}
@media(max-width:390px){.learn-content{padding-left:14px;padding-right:14px}.learn-topbar{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}.learn-hero{min-height:226px;padding:23px 17px}.learn-hero h1{font-size:1.68rem}.learn-hero-art{width:140px;height:140px}.learn-menu-card{grid-template-columns:50px minmax(0,1fr) 16px;padding:11px;gap:11px}.learn-menu-icon{width:50px;height:50px}.learn-page-title{font-size:1.7rem}.learn-step>h1{font-size:1.8rem}.learn-check-list>div{padding:10px;gap:9px}.learn-before-list>div{grid-template-columns:44px minmax(0,1fr) auto}.learn-list-icon{width:44px;height:44px}}
@media(max-width:375px){.learn-hero p{max-width:72%}.learn-check-list strong{font-size:.82rem}.learn-before-list button{padding:6px 8px;font-size:.68rem}.learn-lesson{grid-template-columns:42px minmax(0,1fr) 38px;padding:10px;gap:9px}.learn-lesson>span{width:42px;height:42px}.learn-lesson button{width:38px;height:38px}}
.learn-phrase>div{min-width:0;display:grid;gap:5px}.learn-phrase>div span,.learn-phrase>div small{color:var(--text-muted);font-size:.72rem}.learn-phrase>div span{grid-column:auto}.learn-phrase>button{grid-row:1}

/* Complete learning content V1.2: real image crops + instructional blocks */
.learn-real-image{position:relative;width:100%;max-width:390px;aspect-ratio:1.28;margin:18px auto 0;overflow:hidden;border:1px solid var(--border-color);border-radius:23px;background:#f7f1e5}.learn-real-image img{position:absolute;max-width:none;object-fit:cover}.learn-real-image>span{position:absolute;z-index:2;top:12px;left:12px;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:var(--sm-green);color:#fff;font-weight:850;box-shadow:0 2px 8px rgba(24,53,46,.18)}
.learn-image-wudu-hands img,.learn-image-wudu-mouth img,.learn-image-wudu-nose img,.learn-image-wudu-face img{inset:0;width:100%;height:100%;object-fit:cover}.learn-image-wudu-prepare img,.learn-image-wudu-arms img,.learn-image-wudu-head img,.learn-image-wudu-feet img{width:200%;height:400%;object-fit:fill}.learn-image-wudu-prepare img{left:0;top:0}.learn-image-wudu-arms img{left:-100%;top:-200%}.learn-image-wudu-head img{left:0;top:-300%}.learn-image-wudu-feet img{left:-100%;top:-300%}
.learn-image-wudu-mouth img{object-position:center 42%}.learn-image-wudu-nose img{object-position:center 36%}.learn-image-wudu-face img{object-position:center 42%}.learn-image-wudu-hands img{object-position:center 48%}
.learn-image-salah-takbir img,.learn-image-salah-ruku img,.learn-image-salah-rise1 img,.learn-image-salah-rise2 img,.learn-image-salah-sujud1 img,.learn-image-salah-sitting img,.learn-image-salah-sujud2 img{width:200%;height:400%;object-fit:fill}.learn-image-salah-takbir img{left:0;top:0}.learn-image-salah-ruku img{left:0;top:-100%}.learn-image-salah-rise1 img,.learn-image-salah-rise2 img{left:-100%;top:-100%}.learn-image-salah-sujud1 img{left:0;top:-200%}.learn-image-salah-sitting img{left:-100%;top:-200%}.learn-image-salah-sujud2 img{left:0;top:-300%;width:100%}.learn-image-salah-qiyam img{inset:0;width:100%;height:100%;object-fit:cover;object-position:center 43%}.learn-image-salah-tashahhud-finger{aspect-ratio:1.04}.learn-image-salah-tashahhud-finger img{width:365%;height:auto;right:-1%;bottom:-1%;object-fit:contain}
.learn-step-body{max-width:420px;margin:17px auto 13px;color:var(--text-dark);font-size:.98rem;line-height:1.55}.learn-how{max-width:420px;margin:13px auto 0;padding:17px;text-align:left;border:1px solid var(--border-color);border-radius:18px;background:var(--sm-surface);box-shadow:0 4px 14px rgba(24,53,46,.045)}.learn-how>span{display:block;margin-bottom:9px;color:var(--accent-coral);font-size:.7rem;font-weight:900;letter-spacing:.09em}.learn-how ul{margin:0;padding-left:20px}.learn-how li{padding:5px 0;color:var(--text-dark);font-size:.88rem;line-height:1.5}.learn-check-copy{min-width:0;display:grid;gap:4px}.learn-check-copy small{color:var(--text-muted);font-size:.72rem;line-height:1.35}
.learn-phrase{margin-top:12px}.learn-phrase>div>span{color:var(--accent-coral);font-size:.65rem;font-weight:850;letter-spacing:.07em}.learn-phrase>div>strong{margin-bottom:7px}.learn-phrase>div>p{margin:0;color:var(--text-dark);font-size:.82rem;line-height:1.4}.learn-audio{width:45px;min-height:45px;padding:0;display:grid;place-items:center;border:1px solid var(--border-color);border-radius:50%;background:var(--sm-surface-soft);color:var(--text-muted)}.learn-audio small{display:none}.learn-secondary{width:100%;min-height:48px;margin-top:12px;padding:11px 14px;border:1px solid var(--sm-green);border-radius:14px;background:transparent;color:var(--primary);font:inherit;font-size:.83rem;font-weight:800}.learn-quick-grid article>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px}.learn-quick-grid article p{grid-column:1/-1;margin:2px 0 0;color:var(--text-muted);font-size:.72rem;line-height:1.4}
.learn-lessons{margin-top:12px}.learn-lesson{width:100%;text-align:left}.learn-lesson>b{color:var(--primary);font-size:1.25rem;font-weight:400}.learn-phrase-list{display:grid;gap:10px}.learn-phrase-card{padding:14px;border:1px solid var(--border-color);border-radius:16px;background:var(--sm-surface)}.learn-phrase-card>span{display:block;color:var(--accent-coral);font-size:.69rem;font-weight:850;letter-spacing:.06em;text-transform:uppercase}.learn-phrase-card>strong{display:block;margin:7px 0 5px;color:var(--primary);font-family:var(--font-display,Georgia,serif);font-size:1rem;line-height:1.35}.learn-phrase-card>p{margin:0;color:var(--text-muted);font-size:.8rem;line-height:1.4}.learn-surah-lines{display:grid;gap:10px;margin:18px 0}.learn-surah-lines article{padding:14px;display:grid;grid-template-columns:31px minmax(0,1fr);gap:11px;border:1px solid var(--border-color);border-radius:16px;background:var(--sm-surface)}.learn-surah-lines article>span{width:31px;height:31px;display:grid;place-items:center;border-radius:50%;background:var(--sm-green-soft);color:var(--primary);font-size:.75rem;font-weight:850}.learn-surah-lines article>div{min-width:0}.learn-surah-lines strong{display:block;color:var(--primary);font-family:var(--font-display,Georgia,serif);font-size:.96rem;line-height:1.45}.learn-surah-lines p{margin:7px 0 0;color:var(--text-muted);font-size:.81rem;line-height:1.45}
@media(max-width:390px){.learn-real-image{border-radius:20px}.learn-how{padding:15px}.learn-how li{font-size:.84rem}.learn-step-body{font-size:.93rem}.learn-surah-lines article{padding:12px}.learn-check-copy small{font-size:.68rem}}

/* Final Wuḍūʾ + Ṣalāh V2.0 */
.learn-v2-salah-takbir img,.learn-v2-salah-rise_from_ruku img,.learn-v2-salah-sitting_between_sujud img{width:200%;height:400%;max-width:none;object-fit:fill}.learn-v2-salah-takbir img{left:0;top:0}.learn-v2-salah-rise_from_ruku img{left:-100%;top:-100%}.learn-v2-salah-sitting_between_sujud img{left:-100%;top:-200%}.learn-v2-salah-ruku img{width:200%;height:200%;max-width:none;left:-100%;top:0;object-fit:fill}.learn-v2-salah-qiyam img,.learn-v2-salah-stand_after_ruku img,.learn-v2-salah-first_sujud img,.learn-v2-salah-second_sujud img{inset:0;width:100%;height:100%;object-fit:cover}.learn-v2-salah-qiyam img,.learn-v2-salah-stand_after_ruku img{object-position:center 45%}.learn-v2-salah-first_sujud img,.learn-v2-salah-second_sujud img{object-position:center 57%}
.learn-after-grid{display:grid;gap:11px;margin:18px 0 22px}.learn-after-grid article{position:relative;padding:17px 16px 17px 58px;border:1px solid var(--border-color);border-radius:18px;background:var(--sm-surface);box-shadow:0 4px 14px rgba(24,53,46,.045)}.learn-after-grid article>span{position:absolute;left:15px;top:16px;width:31px;height:31px;display:grid;place-items:center;border-radius:50%;background:var(--sm-green-soft);color:var(--primary);font-weight:850}.learn-after-grid h2{margin:0 0 6px;color:var(--primary);font-family:var(--font-display,Georgia,serif);font-size:1.05rem}.learn-after-grid p{margin:0;color:var(--text-muted);font-size:.82rem;line-height:1.5}
.learn-tashahhud-image{width:100%;margin:17px 0;overflow:hidden;border:1px solid var(--border-color);border-radius:22px;background:#f7f1e5}.learn-tashahhud-image img{display:block;width:100%;height:auto}.learn-formula-list{display:grid;gap:12px;margin-top:22px}.learn-full-formula{position:relative;padding:17px 66px 17px 17px;border:1px solid var(--border-color);border-radius:18px;background:var(--sm-surface)}.learn-full-formula h2{margin:0 0 14px;color:var(--primary);font-family:var(--font-display,Georgia,serif);font-size:1.2rem}.learn-full-formula>span{display:block;margin-top:11px;color:var(--accent-coral);font-size:.65rem;font-weight:850;letter-spacing:.07em}.learn-full-formula>strong{display:block;margin-top:5px;color:var(--primary);font-family:var(--font-display,Georgia,serif);font-size:.92rem;line-height:1.55}.learn-full-formula>p{margin:5px 0 0;color:var(--text-muted);font-size:.8rem;line-height:1.5}.learn-full-formula>.learn-audio{position:absolute;right:14px;top:14px}
.learn-prayer-accordion,.learn-surah-accordion{display:grid;gap:10px}.learn-prayer-accordion>article,.learn-surah-accordion>article{overflow:hidden;border:1px solid var(--border-color);border-radius:17px;background:var(--sm-surface)}.learn-prayer-accordion>article.is-open,.learn-surah-accordion>article.is-open{border-color:color-mix(in srgb,var(--sm-green) 52%,var(--border-color));box-shadow:0 5px 16px rgba(24,53,46,.07)}.learn-prayer-accordion article>button,.learn-surah-accordion article>button{width:100%;min-height:72px;padding:11px 14px;display:grid;grid-template-columns:45px minmax(0,1fr) 24px;gap:11px;align-items:center;text-align:left;border:0;background:transparent;color:var(--primary);font:inherit}.learn-prayer-accordion button>span,.learn-surah-accordion button>span{width:45px;height:45px;display:grid;place-items:center;border-radius:50%;background:var(--sm-green-soft)}.learn-prayer-accordion button>div{display:grid;gap:3px}.learn-prayer-accordion button strong,.learn-surah-accordion button strong{font-size:.95rem}.learn-prayer-accordion button small{color:var(--text-muted);font-size:.74rem}.learn-prayer-accordion button>b,.learn-surah-accordion button>b{justify-self:end;font-size:1.15rem;font-weight:500}.learn-prayer-accordion ol{margin:0;padding:0 17px 15px 42px;border-top:1px solid var(--border-color)}.learn-prayer-accordion li{padding:10px 0 0 3px;color:var(--text-dark);font-size:.8rem;line-height:1.45}.learn-surah-accordion>.is-open{padding-bottom:14px}.learn-surah-accordion>.is-open>.learn-audio{margin-left:14px}.learn-surah-accordion .learn-surah-lines{margin:12px 13px 0}.learn-surah-accordion article>button{grid-template-columns:45px minmax(0,1fr) 24px}.learn-surah-accordion article>button strong{text-align:left}
@media(max-width:390px){.learn-full-formula{padding:15px 58px 15px 14px}.learn-full-formula>strong{font-size:.87rem}.learn-tashahhud-image{border-radius:19px}.learn-prayer-accordion article>button,.learn-surah-accordion article>button{padding:10px}.learn-prayer-accordion ol{padding-left:34px;padding-right:13px}}

/* Continuous prayer mode: prayer mat flow, no theory detours */
.learn-prayer-choice{display:grid;gap:10px;margin-top:20px}.learn-prayer-choice>button{width:100%;min-height:76px;padding:12px 14px;display:grid;grid-template-columns:48px minmax(0,1fr) 20px;gap:12px;align-items:center;text-align:left;border:1px solid var(--border-color);border-radius:17px;background:var(--sm-surface);color:var(--primary);font:inherit;box-shadow:0 4px 14px rgba(24,53,46,.045)}.learn-prayer-choice>button>span{width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:var(--sm-green-soft)}.learn-prayer-choice>button>div{display:grid;gap:3px}.learn-prayer-choice strong{font-family:var(--font-display,Georgia,serif);font-size:1.05rem}.learn-prayer-choice small{color:var(--text-muted);font-size:.76rem}.learn-prayer-choice b{font-size:1.2rem;font-weight:400}
.learn-inline-fatiha,.learn-inline-surah{max-width:420px;margin:14px auto 0;padding:15px;border:1px solid var(--border-color);border-radius:18px;background:var(--sm-surface);text-align:left}.learn-inline-fatiha>h2,.learn-inline-surah>h2{margin:0 54px 10px 0;color:var(--primary);font-family:var(--font-display,Georgia,serif);font-size:1.15rem}.learn-inline-fatiha>.learn-audio,.learn-inline-surah>.learn-audio{float:right;margin-top:-44px}.learn-inline-fatiha .learn-surah-lines,.learn-inline-surah .learn-surah-lines{margin:12px 0 0}.learn-inline-surah select{width:100%;min-height:48px;padding:10px 38px 10px 12px;border:1px solid var(--sm-green);border-radius:13px;background:var(--sm-surface);color:var(--primary);font:inherit;font-size:16px;font-weight:800}.learn-inline-surah h3{margin:16px 52px 8px 0;color:var(--primary);font-family:var(--font-display,Georgia,serif);font-size:1.1rem}.learn-qiyam-note{max-width:420px;margin:13px auto 0;padding:13px;border-left:3px solid var(--accent-coral);background:var(--sm-surface-soft);color:var(--primary);font-size:.84rem;line-height:1.45;text-align:left}.learn-practical-seated img{width:200%;height:400%;max-width:none;left:-100%;top:-200%;object-fit:fill}.learn-step>.learn-eyebrow{margin-top:0}.learn-step .learn-full-formula{text-align:left;margin-top:14px}.learn-step .learn-full-formula+.learn-how{margin-top:14px}
.learn-salah-dedicated img,.learn-wudu-dedicated img{inset:0;width:100%;height:100%;max-width:100%;display:block;object-fit:contain;object-position:center}
@media(max-width:390px){.learn-inline-fatiha,.learn-inline-surah{padding:12px}.learn-inline-fatiha .learn-surah-lines article,.learn-inline-surah .learn-surah-lines article{padding:10px}.learn-inline-fatiha .learn-surah-lines strong,.learn-inline-surah .learn-surah-lines strong{font-size:.86rem}.learn-prayer-choice>button{padding:10px}}