/* =========================================================
   Break the Locks — Refined Design System
   Typography: Fraunces (display) + Inter (UI)
   Mobile-first, soft, premium feel.
   ========================================================= */

:root {
    /* Palette ----------------------------------------------- */
    --ink-900:   #14111F;   /* near-black ink */
    --ink-700:   #2A2440;
    --ink-500:   #4A4566;
    --ink-400:   #6B6786;
    --ink-300:   #9A95B0;
    --ink-200:   #D7D3E0;
    --ink-100:   #ECE9F2;
    --ink-50:    #F7F5FB;

    --cream:     #FAF7F2;   /* warm body background */
    --paper:     #FFFFFF;

    --brand-900: #1D1438;   /* deep aubergine */
    --brand-700: #3B2A6E;
    --brand-500: #6B4FE0;   /* primary action */
    --brand-400: #8A74F0;
    --brand-100: #EFEAFE;

    --accent:    #E8845C;   /* warm terracotta accent */
    --accent-dk: #C6633E;

    --success:   #2BB673;
    --success-bg:#E5F6EE;
    --warning:   #E0A52A;
    --error:     #DB4F4F;
    --error-bg:  #FBE9E9;

    /* Aliases (keep legacy variable names usable in inline styles) */
    --primary-color:   var(--brand-500);
    --primary-hover:   var(--brand-700);
    --secondary-color: var(--ink-50);
    --dark-text:       var(--ink-900);
    --light-text:      #FFF;
    --body-bg:         var(--cream);
    --container-bg:    var(--paper);
    --border-color:    var(--ink-200);
    --success-color:   var(--success);
    --error-color:     var(--error);
    --warning-color:   var(--warning);
    --brand-color:     var(--brand-900);
    --accent-color:    var(--accent);

    /* Type ------------------------------------------------- */
    --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
    --font-display: 'Newsreader', 'Iowan Old Style', 'Times New Roman', Georgia, serif;
    --font-script:  'Dancing Script', cursive;
    --font-family:  var(--font-sans);  /* legacy alias */

    /* Scale (mobile-first, fluid) -------------------------- */
    --fs-xs:  0.78rem;
    --fs-sm:  0.875rem;
    --fs-base:1rem;
    --fs-md:  1.0625rem;
    --fs-lg:  1.25rem;
    --fs-xl:  clamp(1.4rem, 4.4vw, 1.65rem);
    --fs-2xl: clamp(1.75rem, 5.5vw, 2.25rem);
    --fs-3xl: clamp(2.1rem, 6.5vw, 2.85rem);

    /* Space + radius -------------------------------------- */
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 18px;
    --r-xl: 26px;
    --border-radius: var(--r-md);

    --shadow-xs: 0 1px 2px rgba(20,17,31,0.05);
    --shadow-sm: 0 2px 8px rgba(20,17,31,0.06);
    --shadow-md: 0 6px 24px rgba(20,17,31,0.08);
    --shadow-lg: 0 18px 50px rgba(20,17,31,0.12);
    --shadow:    var(--shadow-md);

    --tx: cubic-bezier(.2,.7,.2,1);
}

/* Reset --------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: 1.55;
    color: var(--ink-900);
    background: var(--cream);
    background-image:
        radial-gradient(1200px 600px at 0% -10%, rgba(107,79,224,0.07), transparent 60%),
        radial-gradient(900px 500px at 100% 0%, rgba(232,132,92,0.06), transparent 60%);
    background-attachment: fixed;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5 {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--ink-900);
    line-height: 1.2;
    font-optical-sizing: auto;
}
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }

p { color: var(--ink-700); }

a { color: var(--brand-500); }
a:hover { color: var(--brand-700); }

::selection { background: var(--brand-100); color: var(--brand-900); }

/* Layout shell ------------------------------------------- */
.main-container {
    width: 100%;
    max-width: 1240px;
    background: var(--paper);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow);
    overflow: hidden;
    margin: 16px 0 40px;
    border: 1px solid var(--ink-100);
}

.main-header {
    background: linear-gradient(135deg, var(--brand-900) 0%, var(--brand-700) 50%, #4D32A8 100%);
    color: #fff;
    padding: 22px 22px 24px;
    text-align: center;
    position: relative;
}
.main-header h1,
.main-header h2,
.main-header h3 { color: #fff; }

.main-header h2 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.2rem, 4vw, 1.5rem);
    margin-top: 4px;
    color: rgba(255,255,255,0.92);
    letter-spacing: 0;
}

.logo-img {
    max-height: 56px;
    width: auto;
    max-width: 80%;
    display: block;
    margin: 0 auto 8px;
}

/* --- Slider ---------------------------------------------- */
.btl-slider {
    width: 100%;
    overflow: hidden;
    position: relative;
}
.slider-track {
    display: flex;
    transition: transform 0.45s var(--tx);
}
.slide {
    min-width: 100%;
    width: 100%;
    flex-shrink: 0;
    padding: 28px 22px 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.intro-slide img {
    width: 100%;
    max-width: 520px;
    max-height: 320px;
    object-fit: cover;
    border-radius: var(--r-lg);
    margin-bottom: 22px;
    box-shadow: var(--shadow-sm);
}
.intro-slide p {
    font-size: var(--fs-md);
    line-height: 1.65;
    color: var(--ink-500);
    max-width: 56ch;
}

/* --- Navigation strip + buttons -------------------------- */
.slider-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
    background: var(--ink-50);
    border-top: 1px solid var(--ink-100);
    flex-wrap: wrap;
}
.slider-nav > * { flex: 0 0 auto; }
.slider-dots { display: none; }

button, input, select, textarea { font-family: var(--font-sans); }

.btn-primary, .btn-secondary,
a.btn-primary, a.btn-secondary {
    -webkit-appearance: none;
    appearance: none;
    padding: 12px 20px;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform .12s var(--tx), background-color .15s var(--tx), box-shadow .15s var(--tx);
    line-height: 1.2;
    text-decoration: none;
}
.btn-primary, a.btn-primary {
    background: var(--brand-500);
    color: #fff;
    box-shadow: 0 6px 18px rgba(107,79,224,0.25);
}
.btn-primary:hover, a.btn-primary:hover {
    background: var(--brand-700);
    color: #fff;
    box-shadow: 0 10px 22px rgba(107,79,224,0.32);
    text-decoration: none;
}
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled { background: var(--ink-300); box-shadow: none; cursor: not-allowed; }

.btn-secondary, a.btn-secondary {
    background: #fff;
    color: var(--ink-700);
    border: 1px solid var(--ink-200);
}
.btn-secondary:hover, a.btn-secondary:hover {
    background: var(--ink-50);
    color: var(--ink-700);
    border-color: var(--ink-300);
    text-decoration: none;
}

.btn-yes {
    background: #fff;
    color: var(--success);
    border: 2px solid var(--success);
    min-width: 130px;
}
.btn-yes:hover { background: var(--success); color: #fff; }

.btn-no {
    background: #fff;
    color: var(--ink-500);
    border: 2px solid var(--ink-200);
    min-width: 130px;
}
.btn-no:hover { border-color: var(--ink-400); background: var(--ink-50); }

.btn-full-width { width: 100%; }

.button-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 18px;
}

/* --- Commitment questions -------------------------------- */
.commitment-slide { padding-top: 36px; padding-bottom: 36px; }
.question-number {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--brand-500);
    background: var(--brand-100);
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 22px;
}
.commitment-slide h3 {
    font-size: clamp(1.5rem, 5.2vw, 1.95rem);
    font-family: var(--font-display);
    font-weight: 400;
    margin: 12px 0 28px;
    line-height: 1.25;
    color: var(--ink-900);
    max-width: 38ch;
    letter-spacing: -0.01em;
}

/* --- Forms ---------------------------------------------- */
.form-group {
    width: 100%;
    max-width: 440px;
    margin-bottom: 16px;
    text-align: left;
}
.form-group label {
    display: block;
    margin-bottom: 7px;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--ink-700);
    letter-spacing: 0.01em;
}
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--ink-200);
    border-radius: var(--r-md);
    font-size: 1rem;
    color: var(--ink-900);
    background: #fff;
    transition: border-color .15s var(--tx), box-shadow .15s var(--tx);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--brand-500);
    box-shadow: 0 0 0 4px rgba(107,79,224,0.12);
}
.form-group input::placeholder { color: var(--ink-300); }

.password-group { position: relative; }
.password-group input { padding-right: 46px; }
.toggle-password {
    position: absolute;
    right: 16px;
    top: 41px;
    color: var(--ink-400);
    cursor: pointer;
    user-select: none;
}
.toggle-password:hover { color: var(--ink-700); }

.form-error {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--error-bg);
    color: var(--error);
    border: 1px solid #F5C7C7;
    padding: 12px 14px;
    border-radius: var(--r-md);
    font-size: 0.92rem;
    margin-bottom: 14px;
    max-width: 440px;
    width: 100%;
}

/* Login form ------------------- */
.login-form .slide {
    padding: 32px 22px 28px;
    align-items: center;
}
.login-form h3 {
    margin-bottom: 22px;
    text-align: center;
    font-size: 1.45rem;
}
.login-form .btn-primary {
    margin-top: 6px;
    padding: 14px 22px;
    width: 100%;
    max-width: 440px;
}

/* --- Signature pad --------------------------------------- */
#signaturePad {
    border: 2px dashed var(--ink-200);
    background: #FBFAFE;
    width: 100%;
    height: 160px;
    border-radius: var(--r-md);
    touch-action: none;
}
.btn-link {
    background: none;
    border: none;
    color: var(--brand-500);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: underline;
    padding: 6px 0;
    margin-top: 6px;
}

/* --- Footer link strip ----------------------------------- */
.form-footer {
    text-align: center;
    padding: 18px;
    border-top: 1px solid var(--ink-100);
    background: var(--ink-50);
    font-size: 0.92rem;
    color: var(--ink-500);
}
.form-footer a {
    color: var(--brand-500);
    font-weight: 600;
    text-decoration: none;
}
.form-footer a:hover { text-decoration: underline; }

/* --- Notification modals --------------------------------- */
.btl-notification {
    position: fixed;
    inset: 0;
    background: rgba(20, 17, 31, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden;
    opacity: 0;
    transition: .25s var(--tx);
    z-index: 999;
    padding: 18px;
}
.btl-notification.show { visibility: visible; opacity: 1; }
.notification-content {
    background: #fff;
    padding: 28px 24px;
    border-radius: var(--r-lg);
    width: 100%;
    max-width: 420px;
    text-align: center;
    box-shadow: var(--shadow-lg);
    transform: translateY(8px);
    transition: transform .25s var(--tx);
}
.btl-notification.show .notification-content { transform: translateY(0); }
.notification-content i { font-size: 2rem; color: var(--brand-500); margin-bottom: 10px; }
.notification-content h3 { margin-bottom: 8px; }
.notification-content p { color: var(--ink-500); margin-bottom: 18px; }

/* =========================================================
   DASHBOARD
   ========================================================= */
.dashboard-container { max-width: 1320px; }
.dashboard-content { padding: 26px 22px 40px; }

.btn-logout {
    position: absolute;
    top: 18px;
    right: 18px;
    color: #fff;
    font-size: 1.05rem;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.22);
    background: rgba(255,255,255,0.05);
    transform: none;
    transition: background .15s var(--tx);
}
.btn-logout:hover { background: rgba(255,255,255,0.16); color: #fff; }

.dashboard-greeting {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: 400;
    margin-bottom: 4px;
    color: var(--ink-900);
    letter-spacing: -0.015em;
}
.dashboard-greeting small {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--ink-400);
    margin-top: 4px;
    letter-spacing: 0;
}

.dashboard-section-title {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ink-400);
    margin: 28px 0 14px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--ink-100);
}
.dashboard-section-title:first-child { margin-top: 0; }

/* Grid */
.dashboard-main-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
}

/* Quick-access right rail (replaces impact widget) */
.quick-rail {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.quick-card {
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: var(--r-lg);
    padding: 16px 14px;
    box-shadow: var(--shadow-xs);
}
.quick-card .quick-title {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ink-400);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin: 4px 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.quick-card .quick-title i { color: var(--brand-500); font-size: 0.85em; }

.quick-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.quick-tool {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: var(--r-md);
    text-decoration: none;
    color: var(--ink-700);
    transition: background .15s var(--tx), transform .12s var(--tx), color .15s var(--tx);
    position: relative;
}
.quick-tool:hover {
    background: var(--ink-50);
    color: var(--ink-900);
}
.quick-tool .qt-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--brand-100);
    color: var(--brand-500);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
    transition: background .15s var(--tx);
}
.quick-tool:hover .qt-icon {
    background: var(--brand-500);
    color: #fff;
}
.quick-tool .qt-label {
    font-weight: 500;
    font-size: 0.92rem;
    flex: 1;
    line-height: 1.25;
}
.quick-tool .qt-arrow {
    color: var(--ink-300);
    font-size: 0.78rem;
    transition: transform .15s var(--tx), color .15s var(--tx);
}
.quick-tool:hover .qt-arrow {
    color: var(--brand-500);
    transform: translateX(2px);
}
.quick-tool.highlight .qt-icon {
    background: var(--brand-500);
    color: #fff;
}
.quick-tool.highlight {
    background: linear-gradient(135deg, var(--brand-100) 0%, transparent 70%);
}

/* Tools */
.tools-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.tool-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: var(--r-lg);
    padding: 18px 10px;
    text-align: center;
    text-decoration: none;
    color: var(--ink-900);
    transition: transform .15s var(--tx), border-color .15s var(--tx), box-shadow .15s var(--tx);
    min-height: 108px;
    position: relative;
    overflow: hidden;
}
.tool-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(107,79,224,0.05), transparent 50%);
    opacity: 0;
    transition: opacity .15s var(--tx);
    pointer-events: none;
}
.tool-btn:hover { transform: translateY(-2px); border-color: var(--brand-400); box-shadow: var(--shadow-sm); color: var(--ink-900); }
.tool-btn:hover::after { opacity: 1; }
.tool-btn i {
    font-size: 1.45rem;
    color: var(--brand-500);
    margin-bottom: 8px;
}
.tool-btn span {
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.25;
    color: var(--ink-700);
}
.tool-btn.highlight {
    background: linear-gradient(160deg, var(--brand-100) 0%, #fff 70%);
    border-color: var(--brand-400);
}

/* Impact widget */
.impact-widget {
    background: linear-gradient(160deg, #FFF6F0 0%, #fff 70%);
    border: 1px solid #F4E3D7;
    border-radius: var(--r-lg);
    padding: 22px 18px;
    text-align: center;
    max-width: 100%;
}
.impact-widget > p {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--accent-dk);
    margin-bottom: 6px;
}
.impact-value {
    font-family: var(--font-display);
    font-size: 2.8rem;
    font-weight: 400;
    color: var(--accent-dk);
    line-height: 1;
    margin-bottom: 4px;
    letter-spacing: -0.02em;
}
.impact-goal {
    font-size: 0.82rem;
    color: var(--ink-400);
    margin-bottom: 14px;
}
.thermometer-container {
    width: 22px;
    height: 110px;
    background: #fff;
    border-radius: 14px;
    margin: 12px auto 22px;
    position: relative;
    border: 2px solid #F4E3D7;
    box-shadow: inset 0 0 8px rgba(20,17,31,0.05);
}
.thermometer-bulb {
    width: 36px;
    height: 36px;
    background: var(--accent);
    border-radius: 50%;
    position: absolute;
    bottom: -14px;
    left: 50%;
    transform: translateX(-50%);
    border: 3px solid #fff;
    box-shadow: 0 4px 10px rgba(232,132,92,0.4);
    z-index: 2;
}
.thermometer-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(180deg, var(--accent), var(--accent-dk));
    border-radius: 0 0 12px 12px;
    transition: height 1s var(--tx);
    min-height: 16px;
}
.btn-impact {
    background: var(--accent);
    color: #fff;
    width: 100%;
    margin-top: 6px;
    padding: 12px 18px;
    font-size: 0.9rem;
    box-shadow: 0 6px 16px rgba(232,132,92,0.32);
}
.btn-impact:hover { background: var(--accent-dk); }

/* Journey progress */
.progress-bar {
    background: var(--ink-100);
    border-radius: 999px;
    height: 8px;
    overflow: hidden;
    margin-bottom: 18px;
}
.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--brand-500), var(--brand-400));
    border-radius: 999px;
    transition: width .8s var(--tx);
}

.parts-list { display: flex; flex-direction: column; gap: 8px; }
.part-row {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: var(--r-md);
    text-decoration: none;
    color: var(--ink-700);
    transition: background .15s var(--tx), border-color .15s var(--tx), transform .15s var(--tx);
}
.part-row:hover { background: var(--ink-50); border-color: var(--ink-200); transform: translateX(2px); color: var(--ink-900); }
.part-row i { width: 22px; text-align: center; font-size: 1.05rem; color: var(--ink-300); }
.part-row.completed i { color: var(--success); }
.part-row.locked { opacity: 0.65; pointer-events: none; }
.part-row.locked i { color: var(--ink-300); }
.part-row.current {
    border-color: var(--brand-400);
    background: linear-gradient(135deg, var(--brand-100) 0%, #fff 60%);
    box-shadow: var(--shadow-xs);
}
.part-row.current i { color: var(--brand-500); }
.part-row span { margin-left: 12px; font-weight: 500; font-size: 0.95rem; }
.part-row.completed span { color: var(--ink-500); }

/* ========================================================
   Agreement page
   ======================================================== */
.agreement-container { background: #F3EFE7; max-width: 920px; }

.btn-back-nav, a.btn-back-nav {
    position: absolute;
    top: 16px;
    left: 14px;
    color: #fff !important;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    font-size: 0.85rem;
    transition: background .15s var(--tx), opacity .15s var(--tx);
    transform: none;
    padding: 7px 13px 7px 11px;
    border-radius: 999px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.16);
    z-index: 2;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.btn-back-nav:hover, a.btn-back-nav:hover { background: rgba(255,255,255,0.18); color: #fff !important; text-decoration: none; }
/* When a page has a back nav, push the header content down so it never overlaps */
.main-header:has(.btn-back-nav) {
    padding-top: 60px;
}
@media (min-width: 640px) {
    .btn-back-nav { top: 18px; }
    .main-header:has(.btn-back-nav) { padding-top: 26px; }
}

.agreement-paper {
    background: #fff;
    width: 100%;
    max-width: 760px;
    margin: 28px auto;
    padding: 32px 24px;
    border: 1px solid #E7E3D9;
    box-shadow: var(--shadow-sm);
    border-radius: var(--r-lg);
    position: relative;
}
.agreement-paper-header {
    text-align: center;
    margin-bottom: 32px;
    border-bottom: 1.5px solid var(--ink-900);
    padding-bottom: 18px;
}
.agreement-paper-header h1 {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 6vw, 2.2rem);
    color: var(--ink-900);
    letter-spacing: -0.01em;
    margin-bottom: 6px;
    font-weight: 400;
}
.agreement-date {
    font-style: italic;
    color: var(--ink-400);
    font-size: 0.92rem;
}
.agreement-body {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--ink-700);
}
.agreement-body .intro {
    margin-bottom: 26px;
    font-size: 1.05rem;
    color: var(--ink-700);
}
.commitment-list { list-style: none; padding-left: 0; }
.commitment-list li {
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.commitment-list li i { color: var(--brand-500); margin-top: 6px; font-size: 0.85em; }

.agreement-footer {
    margin-top: 48px;
    display: flex;
    justify-content: center;
}
.signature-block { text-align: center; width: 100%; max-width: 280px; }
.signature-img { max-width: 100%; height: 80px; object-fit: contain; margin-bottom: 5px; }
.signature-line { border-bottom: 2px solid var(--ink-900); margin-bottom: 6px; }
.signature-label { font-size: 0.88rem; color: var(--ink-500); font-style: italic; }

/* ========================================================
   Part 2 — Eulogy & Goals
   ======================================================== */
.large-textarea {
    width: 100%;
    min-height: 260px;
    padding: 18px;
    border: 1px solid var(--ink-200);
    border-radius: var(--r-md);
    font-family: var(--font-sans);
    font-size: 1.02rem;
    line-height: 1.65;
    resize: vertical;
    margin-bottom: 18px;
    background: #FBFAFE;
    color: var(--ink-900);
    transition: border-color .15s var(--tx), box-shadow .15s var(--tx);
}
.large-textarea:focus {
    outline: none;
    border-color: var(--brand-500);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(107,79,224,0.12);
}

.action-buttons {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    margin-top: 8px;
    flex-wrap: wrap;
}
.action-buttons .btn-primary,
.action-buttons .btn-secondary { flex: 1 1 auto; min-width: 120px; }

.goal-input-group {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    width: 100%;
}
.goal-input {
    flex-grow: 1;
    padding: 14px 16px;
    font-size: 1rem;
    border: 1px solid var(--ink-200);
    border-radius: var(--r-md);
    background: #fff;
    color: var(--ink-900);
    transition: border-color .15s var(--tx), box-shadow .15s var(--tx);
}
.goal-input:focus {
    outline: none;
    border-color: var(--brand-500);
    box-shadow: 0 0 0 4px rgba(107,79,224,0.12);
}
.btn-remove-goal {
    background: #fff;
    border: 1px solid var(--error);
    color: var(--error);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s var(--tx), color .15s var(--tx);
    flex-shrink: 0;
}
.btn-remove-goal:hover { background: var(--error); color: #fff; }

.report-content-box {
    background: var(--ink-50);
    border: 1px solid var(--ink-100);
    border-radius: var(--r-md);
    padding: 22px;
    margin: 18px 0;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--ink-700);
}
.report-content-box h3 {
    color: var(--brand-900);
    margin-top: 22px;
    margin-bottom: 10px;
    font-size: 1.15rem;
    border-bottom: 1px solid var(--ink-200);
    padding-bottom: 6px;
}
.report-content-box h3:first-child { margin-top: 0; }
.report-content-box ul { padding-left: 20px; margin-bottom: 14px; }
.report-content-box li { margin-bottom: 5px; }

/* ========================================================
   Part 3 — Purpose Wizard
   ======================================================== */
.wizard-header { text-align: center; margin-bottom: 22px; }
.wizard-header h3 {
    font-size: clamp(1.35rem, 4.6vw, 1.7rem);
    color: var(--brand-900);
    margin-bottom: 8px;
}
.wizard-header p { color: var(--ink-500); font-size: 1.02rem; }

.activity-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%;
}
.activity-card {
    background: #fff;
    border: 1.5px solid var(--ink-100);
    border-radius: var(--r-md);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    transition: border-color .15s var(--tx), background .15s var(--tx), transform .15s var(--tx);
    min-height: 60px;
}
.activity-card:hover { border-color: var(--brand-400); transform: translateY(-1px); }
.activity-card.selected {
    border-color: var(--success);
    background: var(--success-bg);
}
.check-circle {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 50%;
    border: 2px solid var(--ink-200);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: transparent;
    transition: all .15s var(--tx);
    font-size: 0.7rem;
}
.activity-card.selected .check-circle {
    background: var(--success);
    border-color: var(--success);
    color: #fff;
}
.activity-card span { font-weight: 500; font-size: 0.95rem; color: var(--ink-700); line-height: 1.3; }
.activity-card.selected span { color: var(--ink-900); }

/* Results */
.result-card {
    background: #fff;
    border-left: 4px solid var(--brand-500);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    padding: 22px 22px 22px 22px;
    padding-right: 56px;
    margin-bottom: 16px;
    position: relative;
}
.result-card:hover { background: #fafafd; }
.result-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-wrap: wrap; gap: 8px; }
.result-header h4 { font-size: 1.2rem; color: var(--ink-900); margin: 0; font-family: var(--font-display); }
.result-meaning { font-size: 1.02rem; font-style: italic; color: var(--ink-500); margin-bottom: 12px; }
.result-card .sub {
    font-size: 0.92rem;
    color: var(--brand-900);
    background: var(--brand-100);
    padding: 10px 12px;
    border-radius: var(--r-sm);
}
.result-select-container { position: absolute; top: 18px; right: 18px; }
.result-checkbox {
    width: 22px;
    height: 22px;
    cursor: pointer;
    accent-color: var(--brand-500);
}

/* Save/exit link */
.btn-text-link {
    background: transparent;
    border: none;
    padding: 8px 16px;
    color: var(--ink-400);
    font-size: 0.92rem;
    font-weight: 500;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: color .15s var(--tx), background .15s var(--tx);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: 999px;
}
.btn-text-link:hover { color: var(--ink-900); background: var(--ink-50); }

/* Dropdown */
.jump-to-container { display: inline-block; position: relative; }
.jump-select {
    padding: 11px 36px 11px 14px;
    border: 1px solid var(--ink-200);
    border-radius: var(--r-md);
    font-family: var(--font-sans);
    font-size: 0.92rem;
    color: var(--ink-700);
    background: #fff;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%236B6786' d='M6 8 0 0h12z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 10px;
}
.jump-select:hover { border-color: var(--brand-400); }
.jump-select:focus { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 4px rgba(107,79,224,0.12); }

/* Purpose option card */
.purpose-option-card {
    background: #fff;
    border: 1.5px solid var(--ink-200);
    border-radius: var(--r-md);
    padding: 22px;
    margin-bottom: 14px;
    cursor: pointer;
    transition: border-color .15s var(--tx), background .15s var(--tx);
}
.purpose-option-card:hover { border-color: var(--brand-400); }
.purpose-option-card.selected { border-color: var(--success); background: var(--success-bg); }
.purpose-option-card h4 { color: var(--brand-500); margin-bottom: 8px; font-family: var(--font-sans); font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.14em; }
.purpose-option-card p { color: var(--ink-700); font-size: 1.02rem; line-height: 1.55; }
.blended-card { border-color: var(--brand-500); background: var(--brand-100); }
.blended-card h4 { color: var(--brand-900); }

/* Page indicator */
.page-indicator { text-align: center; color: var(--ink-400); font-size: 0.85rem; margin-top: 10px; }
.wizard-content { min-height: 280px; margin-bottom: 16px; }
.activity-card.add-new {
    border-style: dashed;
    justify-content: center;
    color: var(--brand-500);
    flex-direction: column;
    text-align: center;
    background: var(--brand-100);
}
.activity-card.add-new i { font-size: 1.4rem; margin-bottom: 5px; }
.activity-card.add-new span { color: var(--brand-700); font-weight: 600; }

/* ========================================================
   Purpose / Certificate
   ======================================================== */
.certificate-container {
    border: 6px double var(--ink-200);
    padding: 28px 22px;
    text-align: center;
    margin: 18px 0;
    background: #FFFDF7;
    border-radius: var(--r-md);
}
.certificate-title {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ink-400);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    margin-bottom: 22px;
}
.certificate-body {
    font-family: var(--font-script);
    font-size: clamp(1.6rem, 5.5vw, 2.4rem);
    color: var(--brand-700);
    line-height: 1.35;
    margin-bottom: 26px;
}
.back-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    text-decoration: none;
    font-size: 0.88rem;
    position: absolute;
    left: 18px;
    top: 22px;
    transform: none;
}
.back-nav-btn:hover { opacity: 0.8; color: #fff; }

/* ========================================================
   Responsive — desktop tweaks
   ======================================================== */
@media (min-width: 640px) {
    body { padding: 24px; }
    .slide { padding: 36px 32px 44px; }
    .slider-nav { padding: 18px 28px; }
    .main-header { padding: 26px 28px 28px; }
    .logo-img { max-height: 64px; }
    .dashboard-content { padding: 32px; }
    .tools-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
    .activity-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .agreement-paper { padding: 56px; }
}

@media (min-width: 900px) {
    .dashboard-main-grid {
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: 36px;
    }
    .tools-grid { grid-template-columns: repeat(5, 1fr); }
    .impact-widget { position: sticky; top: 24px; }
    .quick-rail   { position: sticky; top: 24px; align-self: start; }
}

@media (min-width: 1024px) {
    .activity-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Print --------------------------------------------------- */
@media print {
    body * { visibility: hidden; }
    .agreement-paper, .agreement-paper * { visibility: visible; }
    .agreement-paper {
        position: absolute; left: 0; top: 0; width: 100%;
        margin: 0; border: none; box-shadow: none;
        background: #fff;
    }
    .main-container { box-shadow: none; margin: 0; border: none; }
}

/* Small helpers ------------------------------------------ */
.text-center { text-align: center; }
.muted { color: var(--ink-400); }


/* ========================================================
   Part 7 — Habits & Triggers
   ======================================================== */

/* Habit row card */
.habit-row {
    background: #fff;
    border: 1.5px solid var(--ink-100);
    border-radius: var(--r-md);
    margin-bottom: 10px;
    overflow: hidden;
    transition: border-color .15s var(--tx);
}
.habit-row:hover { border-color: var(--brand-400); }

.habit-row .habit-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    cursor: pointer;
}
.habit-row .habit-text {
    flex: 1;
    font-size: 0.96rem;
    color: var(--ink-900);
    line-height: 1.4;
    word-break: break-word;
}
.habit-row .habit-tools {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    align-items: center;
}
.habit-row .habit-tools button {
    background: none;
    border: none;
    color: var(--ink-300);
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 6px;
    transition: color .15s var(--tx), background .15s var(--tx);
    font-size: 0.92rem;
}
.habit-row .habit-tools button:hover { color: var(--brand-500); background: var(--brand-100); }
.habit-row .habit-tools button.del:hover { color: var(--error); background: var(--error-bg); }
.habit-row .habit-tools .toggle-chev {
    transition: transform .2s var(--tx);
    color: var(--ink-400);
    margin-left: 4px;
}
.habit-row.open .habit-tools .toggle-chev { transform: rotate(180deg); }

.habit-row .triggers-section {
    border-top: 1px dashed var(--ink-200);
    background: var(--ink-50);
    padding: 12px 14px;
    display: none;
}
.habit-row.open .triggers-section { display: block; }

.triggers-section .triggers-prompt {
    font-size: 0.82rem;
    color: var(--ink-500);
    margin-bottom: 8px;
    font-weight: 500;
}
.triggers-section .triggers-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
}
.trigger-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: var(--r-sm);
    padding: 8px 12px;
}
.trigger-row .trigger-text {
    flex: 1;
    font-size: 0.88rem;
    color: var(--ink-700);
    line-height: 1.4;
    word-break: break-word;
}
.trigger-row .trigger-text::before {
    content: "\f0a4"; /* hand-point-right */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--brand-400);
    margin-right: 8px;
    font-size: 0.78em;
}
.trigger-row .trigger-del {
    background: none;
    border: none;
    color: var(--ink-300);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 0.82rem;
    transition: color .15s var(--tx), background .15s var(--tx);
}
.trigger-row .trigger-del:hover { color: var(--error); background: var(--error-bg); }

/* Inline add form (used for habit + trigger) */
.inline-add {
    display: flex;
    gap: 6px;
    align-items: stretch;
}
.inline-add input {
    flex: 1;
    padding: 10px 13px;
    border: 1px solid var(--ink-200);
    border-radius: var(--r-md);
    font-family: var(--font-sans);
    font-size: 0.92rem;
    background: #fff;
    color: var(--ink-900);
    min-width: 0;
}
.inline-add input:focus {
    outline: none;
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px rgba(107,79,224,0.10);
}
.inline-add button {
    background: var(--brand-500);
    color: #fff;
    border: none;
    border-radius: var(--r-md);
    padding: 0 14px;
    cursor: pointer;
    font-weight: 600;
    transition: background .15s var(--tx);
    flex-shrink: 0;
    font-size: 0.85rem;
}
.inline-add button:hover { background: var(--brand-700); }

/* Helpers tied to ta-section already provide nesting for Step 1 / Step 2 visuals */
.habit-empty {
    background: var(--ink-50);
    border: 1px dashed var(--ink-200);
    border-radius: var(--r-md);
    padding: 16px;
    text-align: center;
    color: var(--ink-500);
    font-size: 0.9rem;
    margin-bottom: 10px;
}


/* ========================================================
   Part 8 — Mental Matrix
   ======================================================== */

/* Tab bar */
.mx-tabs {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: var(--r-lg);
    padding: 6px;
    margin-bottom: 24px;
    box-shadow: 0 2px 10px rgba(28,15,68,0.04);
    position: sticky;
    top: 8px;
    z-index: 5;
}
.mx-tab {
    background: none;
    border: none;
    color: var(--ink-500);
    font-family: var(--font-sans);
    font-size: 0.92rem;
    font-weight: 600;
    padding: 9px 16px;
    border-radius: var(--r-md);
    cursor: pointer;
    transition: background .15s var(--tx), color .15s var(--tx);
}
.mx-tab:hover { background: var(--brand-100); color: var(--brand-700); }
.mx-tab.active {
    background: var(--brand-500);
    color: #fff;
}
.mx-tab i { margin-right: 6px; }
.mx-finish-btn {
    margin-left: auto;
    background: var(--ink-50);
    border: 1px solid var(--ink-200);
    color: var(--ink-700);
    font-family: var(--font-sans);
    font-size: 0.86rem;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: var(--r-md);
    cursor: pointer;
    transition: all .15s var(--tx);
}
.mx-finish-btn:hover {
    background: #d4a017;
    color: #fff;
    border-color: #d4a017;
}
.mx-finish-btn i { margin-right: 6px; }

/* Pane base */
.mx-pane { display: none; }
.mx-pane.active { display: block; }

.mx-pane-head { margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--ink-100); }
.mx-pane-head h3 {
    font-family: var(--font-display);
    font-size: 1.6rem;
    color: var(--ink-900);
    margin: 0 0 8px;
}
.mx-pane-head p {
    color: var(--ink-500);
    font-size: 0.96rem;
    line-height: 1.55;
    margin: 0;
    max-width: 720px;
}

/* Empty states */
.mx-empty {
    text-align: center;
    padding: 60px 20px;
    background: var(--ink-50);
    border: 1px dashed var(--ink-200);
    border-radius: var(--r-lg);
    color: var(--ink-500);
}
.mx-empty p {
    margin-top: 12px;
    font-size: 0.96rem;
    line-height: 1.5;
}

/* Category — wraps a banner + its seed groups */
.mx-category { margin-bottom: 28px; }
.mx-cat-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: var(--r-lg);
    margin-bottom: 12px;
    background: linear-gradient(135deg, rgba(107,79,224,0.10), rgba(107,79,224,0.04));
    border: 1px solid rgba(107,79,224,0.18);
}
.mx-cat-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-500);
    color: #fff;
    font-size: 1.2rem;
    flex-shrink: 0;
}
.mx-cat-text h3 {
    font-family: var(--font-display);
    font-size: 1.3rem;
    margin: 0 0 2px;
    color: var(--ink-900);
}
.mx-cat-text p {
    margin: 0;
    color: var(--ink-500);
    font-size: 0.88rem;
    line-height: 1.45;
}
/* Pattern category — warmer red palette */
.mx-cat-patterns .mx-cat-banner {
    background: linear-gradient(135deg, rgba(185,78,58,0.10), rgba(185,78,58,0.04));
    border-color: rgba(185,78,58,0.18);
}
.mx-cat-patterns .mx-cat-icon { background: #b94e3a; }
/* Custom category — neutral */
.mx-cat-custom .mx-cat-banner {
    background: linear-gradient(135deg, rgba(28,15,68,0.06), rgba(28,15,68,0.02));
    border-color: var(--ink-100);
}
.mx-cat-custom .mx-cat-icon { background: var(--ink-700); }

/* Pattern seed cards — distinct warm tone */
.mx-seed-card.cat-patterns.added {
    background: rgba(185,78,58,0.10);
    border-color: #b94e3a;
}
.mx-seed-card.cat-patterns.added .mx-seed-check {
    background: #b94e3a;
    border-color: #b94e3a;
}

/* Pattern seed pill in Explore */
.mx-seed-pill.pattern.active {
    background: #b94e3a;
    border-color: #b94e3a;
}
.mx-seed-pill.pattern:not(.active) .mx-pill-type {
    background: rgba(185,78,58,0.12);
    color: #8a3c2c;
}

/* Pattern-seed tone tag (used in editor) */
.mx-tone-tag.tone-pattern-seed {
    background: rgba(185,78,58,0.14);
    color: #8a3c2c;
}

/* Seeds tab */
.mx-seed-group {
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: var(--r-lg);
    padding: 20px 22px;
    margin-bottom: 18px;
    box-shadow: 0 1px 4px rgba(28,15,68,0.03);
}
.mx-seed-group h4 {
    font-family: var(--font-sans);
    font-size: 0.86rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-500);
    font-weight: 700;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.mx-seed-group h4 i { color: var(--brand-500); }
.mx-group-count {
    background: var(--brand-100);
    color: var(--brand-700);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 0.74rem;
    margin-left: auto;
}
.mx-seed-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 8px;
}
.mx-seed-card {
    position: relative;
    text-align: left;
    background: var(--ink-50);
    border: 1.5px solid transparent;
    border-radius: var(--r-md);
    padding: 12px 14px 12px 38px;
    cursor: pointer;
    transition: all .15s var(--tx);
    font-family: var(--font-sans);
    color: var(--ink-900);
    line-height: 1.4;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mx-seed-card:hover {
    background: #fff;
    border-color: var(--brand-300);
}
.mx-seed-card .mx-seed-check {
    position: absolute;
    left: 10px;
    top: 12px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid var(--ink-200);
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    font-size: 0.7rem;
    transition: all .15s var(--tx);
}
.mx-seed-card .mx-seed-text { font-size: 0.92rem; }
.mx-seed-card .mx-seed-meta {
    font-size: 0.74rem;
    color: var(--ink-500);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.mx-seed-card.added {
    background: var(--brand-100);
    border-color: var(--brand-500);
}
.mx-seed-card.added .mx-seed-check {
    background: var(--brand-500);
    border-color: var(--brand-500);
    color: #fff;
}

.mx-pane-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 18px;
    flex-wrap: wrap;
    gap: 12px;
}
.mx-pane-status { color: var(--ink-500); font-size: 0.92rem; }
.mx-pane-status strong { color: var(--brand-500); font-size: 1.1rem; }

/* === Origins tab — stands out with a gold treatment === */
.mx-tab.mx-tab-origins {
    color: #92400e;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #fbbf24;
    font-weight: 600;
    position: relative;
}
.mx-tab.mx-tab-origins::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 10px;
    box-shadow: 0 0 0 0 rgba(212, 160, 23, 0.5);
    animation: mxOriginsPulse 2.4s ease-in-out infinite;
    pointer-events: none;
}
@keyframes mxOriginsPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(212, 160, 23, 0.25); }
    50%      { box-shadow: 0 0 0 6px rgba(212, 160, 23, 0.0); }
}
.mx-tab.mx-tab-origins i { color: #b45309; }
.mx-tab.mx-tab-origins.active {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #fff;
    border-color: #d97706;
}
.mx-tab.mx-tab-origins.active i { color: #fff; }

/* My Truths tab — emerald accent so it visually pairs with completed origins */
.mx-tab.mx-tab-truths {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #166534;
    border: 1px solid #4ade80;
    font-weight: 600;
}
.mx-tab.mx-tab-truths i { color: #15803d; }
.mx-tab.mx-tab-truths.active {
    background: linear-gradient(135deg, #22c55e 0%, #15803d 100%);
    color: #fff;
    border-color: #166534;
}
.mx-tab.mx-tab-truths.active i { color: #fff; }

/* My Truths document — patterned after Part 10's commandments view */
.mt-doc {
    background: linear-gradient(180deg, #fffbeb 0%, #fff 60%);
    border: 1px solid var(--ink-100);
    border-radius: var(--r-lg);
    padding: 48px 52px;
    box-shadow: 0 8px 28px rgba(29, 20, 56, 0.07);
}
.mt-doc-header { text-align: center; margin-bottom: 36px; }
.mt-doc-tagline {
    font-family: 'Newsreader', Georgia, serif;
    font-size: 0.82rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-500);
    font-style: italic;
}
.mt-doc-header h1 {
    font-family: 'Newsreader', Georgia, serif;
    font-size: 2.4rem;
    font-weight: 600;
    color: var(--ink-900);
    margin: 6px 0 8px;
    line-height: 1.1;
}
.mt-doc-sub {
    color: var(--ink-500);
    font-size: 0.95rem;
    margin: 0;
}
.mt-truths-list {
    list-style: none;
    counter-reset: truth;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.mt-truth-row {
    counter-increment: truth;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 18px;
    background: #fff;
    border: 1px solid var(--ink-100);
    border-left: 4px solid #16a34a;
    border-radius: var(--r-md);
}
.mt-truth-num::before {
    content: counter(truth, decimal-leading-zero);
    font-family: 'Newsreader', Georgia, serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: #16a34a;
    line-height: 1;
    min-width: 38px;
    display: inline-block;
}
.mt-truth-text {
    font-family: 'Newsreader', Georgia, serif;
    font-size: 1.18rem;
    line-height: 1.5;
    color: var(--ink-900);
    flex: 1;
}
.mt-doc-foot {
    margin: 36px 0 0;
    color: var(--ink-500);
    text-align: center;
    font-style: italic;
    font-size: 0.92rem;
}
@media (max-width: 720px) {
    .mt-doc { padding: 30px 20px; }
    .mt-doc-header h1 { font-size: 1.7rem; }
    .mt-truth-text { font-size: 1.05rem; }
}

.mx-origins-list { display: flex; flex-direction: column; gap: 18px; }
.mx-origin-card {
    background: #fff;
    border: 1px solid var(--ink-100);
    border-left: 4px solid #d4a017;
    border-radius: var(--r-lg);
    padding: 22px 24px;
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
}
.mx-origin-card.has-new-truth { border-left-color: #2c9b6a; background: linear-gradient(90deg, rgba(44, 155, 106, 0.04), #fff 30%); }
.mx-origin-num {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Newsreader', Georgia, serif;
    font-weight: 700;
    font-size: 0.95rem;
    flex: 0 0 36px;
}
.mx-origin-body { min-width: 0; }
.mx-origin-anchor {
    font-size: 0.78rem;
    color: var(--ink-500);
    margin-bottom: 12px;
    background: var(--ink-50);
    padding: 6px 10px;
    border-radius: 6px;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mx-origin-anchor-label {
    font-weight: 600;
    color: var(--ink-400);
    margin-right: 5px;
}
.mx-origin-anchor-text { color: var(--brand-700); }
.mx-origin-existing {
    margin: 0 0 18px;
    font-family: 'Newsreader', Georgia, serif;
}
.mx-origin-tag {
    display: inline-block;
    background: #fef3c7;
    color: #92400e;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-right: 8px;
    font-family: 'Inter', sans-serif;
    vertical-align: middle;
}
.mx-origin-quote {
    font-size: 1.15rem;
    color: var(--ink-900);
    font-style: italic;
    line-height: 1.4;
}
.mx-origin-q { margin-bottom: 16px; }
.mx-origin-q label {
    display: block;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--ink-700);
    margin-bottom: 6px;
}
.mx-origin-q textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--ink-100);
    border-radius: var(--r-md);
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--ink-900);
    box-sizing: border-box;
    resize: vertical;
    min-height: 70px;
    background: var(--ink-50);
}
.mx-origin-q textarea:focus {
    outline: none;
    border-color: var(--brand-500);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(107, 79, 224, 0.12);
}
.mx-origin-credible {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.mx-cred-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.92rem;
    color: var(--ink-700);
    transition: background 0.15s ease;
}
.mx-cred-btn:hover { background: var(--ink-50); }
.mx-cred-btn.is-on[data-val="1"] { background: #dcfce7; color: #166534; border-color: #86efac; }
.mx-cred-btn.is-on[data-val="0"] { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.mx-origin-divider {
    display: flex;
    align-items: center;
    margin: 22px 0 16px;
    color: var(--brand-600);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.mx-origin-divider::before,
.mx-origin-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--ink-100);
    margin: 0 12px;
}
.mx-origin-divider span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: var(--brand-100);
    border-radius: 999px;
}
.mx-origin-status {
    color: var(--success, #2c9b6a);
    font-size: 0.82rem;
    margin-top: 8px;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.mx-origin-status.show { opacity: 1; }
@media (max-width: 720px) {
    .mx-origin-card { padding: 18px 16px; grid-template-columns: 1fr; gap: 10px; }
    .mx-origin-num { margin-bottom: 4px; }
}

/* AI report panel — shared by Part 6, Part 8 */
.mx-report-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    background: var(--ink-50);
    border: 1px solid var(--ink-100);
    border-radius: var(--r-md);
    padding: 12px 14px;
    margin-bottom: 20px;
}
.mx-report-note { color: var(--ink-500); font-size: 0.9rem; }
.mx-report-body {
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: var(--r-lg);
    padding: 28px 30px;
    color: var(--ink-700);
    font-family: 'Newsreader', Georgia, serif;
    font-size: 1.07rem;
    line-height: 1.65;
}
.mx-report-body:empty { display: none; }
.mx-report-body h1 {
    font-family: 'Newsreader', Georgia, serif;
    font-size: 1.7rem;
    color: var(--ink-900);
    margin: 0 0 14px;
    line-height: 1.25;
}
.mx-report-body h2 {
    font-family: 'Newsreader', Georgia, serif;
    font-size: 1.25rem;
    color: var(--brand-700);
    margin: 24px 0 10px;
    line-height: 1.3;
}
.mx-report-body h3 {
    font-family: 'Newsreader', Georgia, serif;
    font-size: 1.05rem;
    color: var(--ink-900);
    margin: 18px 0 6px;
}
.mx-report-body p { margin: 0 0 14px; }
.mx-report-body ul { margin: 6px 0 14px 22px; }
.mx-report-body li { margin: 4px 0; }
.mx-report-body strong { color: var(--ink-900); }
.mx-report-body em { color: var(--brand-600); font-style: italic; }
.mx-report-empty-state {
    margin-top: 18px;
    color: var(--ink-500);
    font-size: 0.95rem;
    text-align: center;
}
.mx-report-empty-state i { margin-right: 6px; color: var(--brand-400); }
.mx-report-flash {
    animation: mxFlash 1.3s ease;
    box-shadow: 0 0 0 0 rgba(107, 79, 224, 0.45);
}
@keyframes mxFlash {
    0%   { box-shadow: 0 0 0 0 rgba(107, 79, 224, 0.0); }
    20%  { box-shadow: 0 0 0 10px rgba(107, 79, 224, 0.35); }
    100% { box-shadow: 0 0 0 0 rgba(107, 79, 224, 0.0); }
}
/* My Reports page */
.my-reports-intro {
    color: var(--ink-500);
    margin: 0 0 22px;
    max-width: 720px;
}
.myr-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--ink-100);
    margin-bottom: 24px;
    padding-bottom: 0;
}
.myr-tab {
    background: transparent;
    border: 1px solid transparent;
    border-bottom: none;
    color: var(--ink-500);
    padding: 10px 16px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 8px 8px 0 0;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.myr-tab:hover { color: var(--brand-700); }
.myr-tab.active {
    background: #fff;
    color: var(--brand-700);
    border-color: var(--ink-100);
    border-bottom: 1px solid #fff;
    margin-bottom: -1px;
}
.myr-tab-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--brand-500);
    display: inline-block;
}
.myr-pane { display: none; }
.myr-pane.active { display: block; }
.myr-pane-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.myr-pane-head h3 {
    font-family: 'Newsreader', Georgia, serif;
    font-size: 1.5rem;
    color: var(--ink-900);
    margin: 0 0 4px;
}
.myr-sub { color: var(--ink-500); font-size: 0.9rem; margin: 0; }
.myr-empty {
    background: var(--ink-50);
    border: 1px dashed var(--ink-100);
    border-radius: var(--r-lg);
    padding: 36px 24px;
    text-align: center;
    color: var(--ink-500);
}
.myr-empty i { font-size: 2.2rem; color: var(--brand-300); margin-bottom: 8px; display: block; }
.myr-empty h4 { color: var(--ink-900); margin: 6px 0; }
.myr-empty p { margin: 0 0 14px; }

/* Coaching page */
.coach-page { max-width: 980px; margin: 0 auto; }
.coach-hero {
    background: linear-gradient(135deg, #1D1438 0%, #4D32A8 100%);
    color: #fff;
    border-radius: var(--r-lg);
    padding: 36px 32px;
    margin-bottom: 32px;
}
.coach-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.12);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.84rem;
    font-weight: 500;
    margin-bottom: 14px;
    letter-spacing: 0.02em;
}
.coach-hero h1 {
    font-family: 'Newsreader', Georgia, serif;
    font-size: 2.1rem;
    line-height: 1.18;
    margin: 0 0 12px;
    color: #fff;
}
.coach-hero-lede {
    font-size: 1.08rem;
    line-height: 1.55;
    color: rgba(255,255,255,0.88);
    margin: 0;
    max-width: 720px;
}

.coach-benefits { margin-bottom: 40px; }
.coach-benefits h2 {
    font-family: 'Newsreader', Georgia, serif;
    font-size: 1.45rem;
    color: var(--ink-900);
    margin: 0 0 18px;
}
.coach-benefit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}
.coach-benefit {
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: var(--r-md);
    padding: 20px;
}
.cb-icon {
    width: 42px; height: 42px;
    border-radius: 12px;
    background: var(--brand-100);
    color: var(--brand-600);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.15rem;
    margin-bottom: 12px;
}
.coach-benefit h4 {
    font-family: 'Newsreader', Georgia, serif;
    font-size: 1.1rem;
    color: var(--ink-900);
    margin: 0 0 6px;
}
.coach-benefit p {
    color: var(--ink-600);
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
}

.coach-apply {
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: var(--r-lg);
    padding: 30px 30px 36px;
}
.coach-apply-head { margin-bottom: 24px; }
.coach-apply-head h2 {
    font-family: 'Newsreader', Georgia, serif;
    font-size: 1.5rem;
    color: var(--ink-900);
    margin: 0 0 6px;
}
.coach-apply-head p { color: var(--ink-500); margin: 0; font-size: 0.95rem; }

.coach-form fieldset.cf-section {
    border: none;
    padding: 0;
    margin: 0 0 28px;
    border-top: 1px solid var(--ink-100);
    padding-top: 20px;
}
.coach-form fieldset.cf-section:first-of-type { border-top: none; padding-top: 0; }
.coach-form legend {
    font-weight: 600;
    color: var(--brand-700);
    font-size: 0.92rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0;
    margin-bottom: 14px;
}
.coach-form .cf-row { display: grid; gap: 14px; margin-bottom: 14px; }
.coach-form .cf-row.two { grid-template-columns: 1fr 1fr; }
.coach-form label {
    display: block;
    margin-bottom: 14px;
}
.coach-form .cf-label {
    display: block;
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--ink-700);
    margin-bottom: 6px;
}
.coach-form .cf-label em {
    color: #c75c5c;
    font-style: normal;
    margin-left: 2px;
}
.coach-form input[type="text"],
.coach-form input[type="email"],
.coach-form input[type="tel"],
.coach-form select,
.coach-form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--ink-100);
    border-radius: var(--r-md);
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--ink-900);
    background: #fff;
    box-sizing: border-box;
}
.coach-form input:focus,
.coach-form select:focus,
.coach-form textarea:focus {
    outline: none;
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px rgba(107, 79, 224, 0.15);
}
.coach-form textarea { resize: vertical; min-height: 80px; }

.cf-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--ink-50);
    border: 1px solid var(--ink-100);
    border-radius: var(--r-md);
    padding: 12px 14px;
    font-size: 0.92rem;
    color: var(--ink-700);
    margin-bottom: 18px;
}
.cf-consent input { margin-top: 3px; }

.cf-submit-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.cf-submit-note { color: var(--ink-500); font-size: 0.88rem; }

.coach-success {
    text-align: center;
    padding: 30px 20px;
}
.coach-success i {
    font-size: 3rem;
    color: #2c9b6a;
    margin-bottom: 12px;
}
.coach-success h3 {
    font-family: 'Newsreader', Georgia, serif;
    font-size: 1.6rem;
    margin: 6px 0 8px;
    color: var(--ink-900);
}
.coach-success p { color: var(--ink-600); margin: 0 0 20px; }

@media (max-width: 720px) {
    .coach-hero { padding: 24px 22px; }
    .coach-hero h1 { font-size: 1.6rem; }
    .coach-hero-lede { font-size: 1rem; }
    .coach-form .cf-row.two { grid-template-columns: 1fr; }
    .coach-apply { padding: 22px 20px 28px; }
}

/* ===== Account / Pricing / Admin / Ask shared styling ===== */
.acct-card {
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: var(--r-lg);
    padding: 24px 26px;
    margin-bottom: 22px;
}
.acct-card h3 {
    font-family: 'Newsreader', Georgia, serif;
    font-size: 1.3rem;
    color: var(--ink-900);
    margin: 0 0 6px;
}
.acct-sub { color: var(--ink-500); margin: 0 0 14px; font-size: 0.92rem; }
.acct-card-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    flex-wrap: wrap; gap: 12px; margin-bottom: 12px;
}
.acct-tier-pill {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--ink-50); border: 1px solid var(--ink-100);
    padding: 6px 12px; border-radius: 999px; font-size: 0.85rem;
    color: var(--ink-700); font-weight: 500;
}
.acct-tier-pill.tier-core  { background:#eef2ff; color:#4338ca; border-color:#c7d2fe; }
.acct-tier-pill.tier-plus  { background:#fef3c7; color:#92400e; border-color:#fcd34d; }
.acct-tier-pill.tier-inner { background:#fdf2f8; color:#9d174d; border-color:#fbcfe8; }
.acct-form label { display: block; margin-bottom: 14px; }
.acct-form input { width: 100%; padding: 10px 12px; border: 1px solid var(--ink-100); border-radius: var(--r-md); font-family: inherit; font-size: 0.95rem; }

.acct-affil-code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.6rem; font-weight: 700;
    background: linear-gradient(135deg, #1D1438 0%, #4D32A8 100%);
    color: #fff; text-align: center;
    padding: 18px; border-radius: var(--r-md);
    letter-spacing: 0.08em; margin-bottom: 14px;
}
.acct-affil-link { display: flex; gap: 8px; margin-bottom: 14px; }
.acct-affil-link input { flex: 1; padding: 10px 12px; border: 1px solid var(--ink-100); border-radius: var(--r-md); font-family: monospace; font-size: 0.9rem; }
.acct-affil-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.acct-affil-stats > div {
    background: var(--ink-50); border-radius: var(--r-md);
    padding: 12px; text-align: center;
}
.acct-affil-stats .ass-num { display: block; font-weight: 700; color: var(--ink-900); font-size: 1.2rem; }
.acct-affil-stats span:last-child { font-size: 0.8rem; color: var(--ink-500); }
@media (max-width: 720px) { .acct-affil-stats { grid-template-columns: repeat(2, 1fr); } }

/* ===== Have-a-code gate on signup (part1) ===== */
.code-gate {
    padding: 28px 16px 36px;
    display: flex;
    justify-content: center;
}
.cg-card {
    width: 100%;
    max-width: 440px;
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: 16px;
    padding: 26px 24px;
    box-shadow: 0 6px 22px rgba(29, 20, 56, 0.06);
    text-align: center;
}
.cg-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #facc15, #f59e0b);
    color: #78350f;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.cg-card h3 {
    font-family: 'Newsreader', Georgia, serif;
    font-size: 1.5rem;
    color: var(--ink-900);
    margin: 0 0 6px;
    line-height: 1.2;
}
.cg-card > p {
    color: var(--ink-500);
    font-size: 0.94rem;
    line-height: 1.5;
    margin: 0 auto 16px;
    max-width: 34ch;
}
#codeGateForm {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    margin-bottom: 4px;
}
#codeInput {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid var(--ink-200);
    border-radius: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 1rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
    background: var(--ink-50);
    color: var(--ink-900);
}
#codeInput:focus {
    outline: none;
    background: #fff;
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px rgba(107, 79, 224, 0.12);
}
#codeGateForm button {
    padding: 12px 16px;
    border-radius: 10px;
    white-space: nowrap;
}
.cg-error {
    color: #c75c5c;
    font-size: 0.85rem;
    min-height: 1.1em;
    margin: 8px 0 2px;
}
.cg-skip {
    display: inline-block;
    margin-top: 10px;
    color: var(--ink-500);
    font-size: 0.88rem;
}
@media (max-width: 420px) {
    #codeGateForm { grid-template-columns: 1fr; }
    #codeGateForm button { width: 100%; justify-content: center; }
}

/* ===== Celebration screen after redeeming a code ===== */
.code-celebration {
    padding: 30px 22px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.cc-confetti {
    position: absolute; inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.cc-confetti i {
    position: absolute;
    color: #facc15;
    opacity: 0;
    animation: ccPop 2.6s ease-in-out infinite;
    font-size: 1rem;
}
.cc-confetti i:nth-child(1) { top: 12%;  left: 10%; animation-delay: 0s;    color: #fb7185; }
.cc-confetti i:nth-child(2) { top: 22%;  right: 14%; animation-delay: 0.3s; color: #facc15; font-size: 1.4rem; }
.cc-confetti i:nth-child(3) { top: 40%;  left: 18%; animation-delay: 0.6s;  color: #6b4fe0; font-size: 1.2rem; }
.cc-confetti i:nth-child(4) { top: 56%;  right: 12%; animation-delay: 0.9s; color: #2c9b6a; font-size: 1.4rem; }
.cc-confetti i:nth-child(5) { top: 72%;  left: 22%; animation-delay: 1.2s;  color: #facc15; }
.cc-confetti i:nth-child(6) { top: 84%;  right: 22%; animation-delay: 1.5s; color: #fb7185; font-size: 1.2rem; }
@keyframes ccPop {
    0%  { opacity: 0; transform: scale(0.4) rotate(0deg); }
    20% { opacity: 1; transform: scale(1.1) rotate(8deg); }
    60% { opacity: 1; transform: scale(1) rotate(-4deg); }
    100%{ opacity: 0; transform: scale(0.5) translateY(40px); }
}
.cc-card {
    position: relative;
    max-width: 500px;
    margin: 0 auto;
    background: linear-gradient(160deg, #1D1438 0%, #4D32A8 100%);
    border-radius: 22px;
    padding: 36px 32px 32px;
    color: #fff;
    box-shadow: 0 18px 50px rgba(29, 20, 56, 0.32);
    overflow: hidden;
}
.cc-card::before {
    content: '';
    position: absolute;
    top: -80px; left: 50%;
    transform: translateX(-50%);
    width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(250, 204, 21, 0.42), transparent 65%);
    pointer-events: none;
}
.cc-value-block {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 22px 12px;
    background: linear-gradient(135deg, #facc15 0%, #f59e0b 100%);
    border-radius: 16px;
    margin-bottom: 16px;
    box-shadow: 0 8px 22px rgba(250, 204, 21, 0.35);
}
.cc-value-label {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    color: rgba(120, 53, 15, 0.78);
}
.cc-value-amt {
    font-family: 'Newsreader', Georgia, serif;
    font-size: 2.6rem;
    font-weight: 700;
    color: #78350f;
    line-height: 1;
    margin-top: -2px;
    text-shadow: 0 2px 4px rgba(255,255,255,0.4);
}
.cc-trophy {
    position: relative;
    width: 74px; height: 74px;
    margin: 8px auto 14px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.18), rgba(255,255,255,0.06));
    border: 1px solid rgba(255,255,255,0.22);
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem;
    color: #facc15;
    box-shadow: inset 0 0 22px rgba(250, 204, 21, 0.18);
}
.cc-congrats {
    position: relative;
    font-family: 'Newsreader', Georgia, serif;
    font-size: 2.2rem;
    margin: 0 0 6px;
    color: #fff;
}
.cc-headline {
    position: relative;
    font-family: 'Newsreader', Georgia, serif;
    font-size: 1.3rem;
    color: #facc15;
    margin-bottom: 6px;
}
.cc-sub {
    position: relative;
    color: rgba(255,255,255,0.78);
    font-size: 0.95rem;
    margin-bottom: 22px;
}
.cc-continue {
    position: relative;
    background: #fff;
    color: #1D1438;
    padding: 14px 26px;
    font-weight: 700;
}
.cc-continue:hover { background: #f3eeff; color: #1D1438; box-shadow: 0 10px 26px rgba(0,0,0,0.18); }

/* ===== Cart funnel (purchase.php) ===== */
.funnel-page {
    max-width: 760px;
    margin: 0 auto;
    padding-bottom: 40px;
}
.funnel-reason {
    display: flex; align-items: center; gap: 10px;
    background: linear-gradient(90deg, #fef3c7, #fde68a);
    border: 1px solid #fcd34d;
    color: #78350f;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 0.92rem;
    margin-bottom: 14px;
}
.funnel-reason i { color: #d97706; }

.funnel-trust {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
    margin: 4px 0 18px;
    color: var(--ink-500);
    font-size: 0.82rem;
}
.funnel-trust span { display: inline-flex; align-items: center; gap: 6px; }
.funnel-trust i { color: var(--brand-500); }

/* Step indicator */
.funnel-steps {
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    gap: 8px;
    counter-reset: fstep;
}
.funnel-steps li {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--ink-400);
    font-weight: 600;
    position: relative;
}
.funnel-steps li span {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--ink-100);
    color: var(--ink-500);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.78rem;
    flex: 0 0 26px;
    transition: background 0.2s ease, color 0.2s ease;
}
.funnel-steps li.active { color: var(--brand-700); }
.funnel-steps li.active span { background: var(--brand-500); color: #fff; box-shadow: 0 0 0 4px rgba(107, 79, 224, 0.15); }
.funnel-steps li.complete { color: var(--success, #2c9b6a); }
.funnel-steps li.complete span { background: #2c9b6a; color: #fff; }
.funnel-steps li.complete span::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
.funnel-steps li.complete span > * { display: none; }
@media (max-width: 560px) {
    .funnel-steps li { font-size: 0.72rem; }
    .funnel-steps li span { width: 22px; height: 22px; flex-basis: 22px; }
}

/* Steps */
.funnel-step { display: none; animation: funnelIn 0.3s ease; }
.funnel-step.active { display: block; }
@keyframes funnelIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.funnel-eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--brand-100);
    color: var(--brand-700);
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.funnel-hero h1, .funnel-h2 {
    font-family: 'Newsreader', Georgia, serif;
    color: var(--ink-900);
    line-height: 1.1;
    font-weight: 600;
    margin: 0 0 12px;
}
.funnel-hero h1 { font-size: 2.4rem; }
.funnel-h2 { font-size: 2rem; }
@media (max-width: 560px) {
    .funnel-hero h1 { font-size: 1.8rem; }
    .funnel-h2 { font-size: 1.5rem; }
}
.funnel-lede, .funnel-sub {
    color: var(--ink-600);
    font-size: 1.02rem;
    line-height: 1.55;
    margin: 0 0 22px;
}

/* The hero price card */
.funnel-pricecard {
    background: linear-gradient(135deg, #1D1438 0%, #4D32A8 100%);
    color: #fff;
    border-radius: 18px;
    padding: 28px 30px;
    text-align: center;
    margin-bottom: 24px;
    box-shadow: 0 12px 32px rgba(29, 20, 56, 0.22);
    position: relative;
    overflow: hidden;
}
.funnel-pricecard::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(250, 204, 21, 0.18), transparent 55%);
    pointer-events: none;
}
.fpc-anchor {
    display: inline-flex; align-items: baseline; gap: 8px;
    color: rgba(255,255,255,0.55);
    font-size: 0.96rem;
    margin-bottom: 8px;
    position: relative;
}
.fpc-anchor-label { color: rgba(255,255,255,0.5); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; }
.fpc-anchor-amt {
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    text-decoration-color: rgba(252, 165, 165, 0.7);
    font-weight: 600;
}
.fpc-actual {
    display: flex; flex-direction: column; align-items: center;
    margin: 8px 0 14px;
}
.fpc-actual-amt {
    font-family: 'Newsreader', Georgia, serif;
    font-size: 4.2rem;
    font-weight: 700;
    color: #facc15;
    line-height: 1;
    text-shadow: 0 4px 18px rgba(250, 204, 21, 0.35);
}
.fpc-actual-sub {
    color: rgba(255,255,255,0.78);
    font-size: 0.92rem;
    margin-top: 6px;
    letter-spacing: 0.02em;
}
.fpc-savings {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 999px;
    padding: 6px 14px;
    display: inline-block;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.88);
}

.funnel-includes {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
    background: var(--ink-50);
    border-radius: 14px;
    padding: 18px 22px;
}
.funnel-includes li {
    padding: 6px 0;
    color: var(--ink-700);
    font-size: 0.96rem;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.funnel-includes i { color: #2c9b6a; margin-top: 3px; flex-shrink: 0; }

.funnel-cta {
    width: 100%;
    padding: 16px 20px;
    font-size: 1.06rem;
    font-weight: 700;
    border-radius: 12px;
    transition: transform 0.12s ease, box-shadow 0.15s ease;
}
.funnel-cta:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(107, 79, 224, 0.32); }
.funnel-cta:disabled { background: var(--ink-200); color: var(--ink-500); cursor: not-allowed; }
.funnel-cta-add { background: linear-gradient(135deg, #f59e0b, #d97706); }
.funnel-cta-add:hover { background: linear-gradient(135deg, #d97706, #b45309); }
.funnel-cta-inner { background: linear-gradient(135deg, #d4a017, #92400e); }
.funnel-cta-inner:hover { background: linear-gradient(135deg, #92400e, #78350f); }
.funnel-cta-checkout { background: linear-gradient(135deg, #2c9b6a, #166534); }
.funnel-cta-checkout:hover { background: linear-gradient(135deg, #166534, #14532d); }

.funnel-guarantee {
    text-align: center;
    margin: 14px 0 0;
    color: var(--ink-500);
    font-size: 0.86rem;
}
.funnel-guarantee i { color: var(--brand-500); margin-right: 4px; }

.funnel-coupon { margin-top: 22px; }

/* Tools grid (Step 2) */
.funnel-tools-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 22px;
}
@media (max-width: 500px) { .funnel-tools-grid { grid-template-columns: 1fr; } }
.funnel-tool {
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: 14px;
    padding: 18px 18px 16px;
}
.ft-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: 1.15rem;
    margin-bottom: 12px;
}
.ft-bolt  { background: linear-gradient(135deg, #f59e0b, #d97706); }
.ft-meter { background: linear-gradient(135deg, #6b4fe0, #4d32a8); }
.ft-heart { background: linear-gradient(135deg, #ec4899, #be185d); }
.ft-money { background: linear-gradient(135deg, #10b981, #059669); }
.funnel-tool h4 {
    font-family: 'Newsreader', Georgia, serif;
    font-size: 1.1rem;
    margin: 0 0 4px;
    color: var(--ink-900);
}
.funnel-tool p { margin: 0; color: var(--ink-600); font-size: 0.92rem; line-height: 1.5; }

/* Upsell card shared */
.funnel-upsell-card {
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
    border: 1px solid #f59e0b;
    border-radius: 16px;
    padding: 22px 24px;
    text-align: center;
    box-shadow: 0 6px 22px rgba(245, 158, 11, 0.18);
}
.fuc-price { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 16px; }
.fuc-anchor {
    color: rgba(120, 53, 15, 0.55);
    font-size: 1.05rem;
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    text-decoration-color: rgba(220, 38, 38, 0.5);
}
.fuc-actual {
    font-family: 'Newsreader', Georgia, serif;
    font-size: 2.8rem;
    font-weight: 700;
    color: #78350f;
    line-height: 1;
}
.fuc-meta { color: #b45309; font-size: 0.82rem; margin-top: 4px; letter-spacing: 0.02em; }
.fuc-cta-row { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.funnel-cta-skip {
    color: #b45309;
    font-size: 0.92rem;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    font-weight: 500;
}
.funnel-cta-skip:hover { color: #92400e; text-decoration: underline; }
.fuc-footnote {
    margin: 12px 0 0;
    color: #92400e;
    font-size: 0.82rem;
}
.fuc-footnote i { color: #d97706; margin-right: 4px; }

/* Step 3 — Inner Circle */
.funnel-inner-card {
    position: relative;
    background: linear-gradient(135deg, #1D1438 0%, #4D32A8 100%);
    color: #fff;
    border-radius: 18px;
    padding: 30px 32px;
    overflow: hidden;
}
.fic-glow {
    position: absolute;
    top: -60px; right: -40px;
    width: 240px; height: 240px;
    background: radial-gradient(circle, rgba(250, 204, 21, 0.5) 0%, transparent 70%);
    pointer-events: none;
}
.fic-content { position: relative; }
.funnel-inner-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}
.funnel-inner-list li {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 8px 0;
    color: rgba(255,255,255,0.92);
    font-size: 0.98rem;
}
.funnel-inner-list i { color: #facc15; font-size: 0.95rem; margin-top: 4px; }
.funnel-upsell-card-inner {
    background: rgba(0, 0, 0, 0.22);
    border-color: rgba(250, 204, 21, 0.4);
    box-shadow: none;
}
.funnel-upsell-card-inner .fuc-actual { color: #facc15; }
.funnel-upsell-card-inner .fuc-meta { color: rgba(255, 215, 130, 0.85); }
.funnel-upsell-card-inner .funnel-cta-skip { color: rgba(255,255,255,0.7); }
.funnel-upsell-card-inner .funnel-cta-skip:hover { color: #fff; }

/* Step 4 — cart */
.funnel-cart {
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: 16px;
    padding: 22px 24px;
    margin: 22px 0;
}
.fcart-row {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--ink-100);
}
.fcart-row:first-child { padding-top: 0; }
.fcart-name { color: var(--ink-700); font-size: 0.96rem; line-height: 1.4; }
.fcart-amt {
    font-weight: 600;
    color: var(--ink-900);
    font-family: 'Newsreader', Georgia, serif;
    font-size: 1.05rem;
    flex-shrink: 0;
}
.fcart-total {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: 16px;
    margin-top: 6px;
    border-top: 2px solid var(--ink-900);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ink-900);
}
.fcart-total-amt {
    font-family: 'Newsreader', Georgia, serif;
    font-size: 1.8rem;
    color: var(--brand-700);
}
.funnel-checkout-note {
    text-align: center;
    margin: 14px 0 18px;
    color: var(--ink-500);
    font-size: 0.86rem;
}
.funnel-checkout-note i { color: var(--brand-500); margin-right: 4px; }
.funnel-cta-back {
    display: block;
    margin: 0 auto;
    text-align: center;
}

/* Pricing */
.pricing-page { max-width: 1100px; margin: 0 auto; }
.upgrade-banner {
    background: linear-gradient(135deg, #1D1438, #4D32A8);
    color: #fff; padding: 18px 20px; border-radius: var(--r-md);
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 26px;
}
.upgrade-banner i { font-size: 1.6rem; }
.upgrade-banner strong { font-size: 1.05rem; }
.upgrade-banner p { margin: 4px 0 0; color: rgba(255,255,255,0.85); }
.coupon-row {
    background: #fff; border: 1px solid var(--ink-100);
    border-radius: var(--r-md); padding: 16px 18px; margin-bottom: 22px;
}
.coupon-row label { font-weight: 500; color: var(--ink-700); }
.coupon-row .cf-inline { display: flex; gap: 8px; margin-top: 8px; }
.coupon-row input { flex: 1; padding: 10px 12px; border: 1px solid var(--ink-100); border-radius: var(--r-md); }
.coupon-status { margin: 8px 0 0; font-size: 0.9rem; }
.coupon-status.ok { color: #2c9b6a; }
.coupon-status.err { color: #c75c5c; }

.pricing-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}
.pricing-card {
    position: relative; background: #fff; border: 1px solid var(--ink-100);
    border-radius: var(--r-lg); padding: 28px 24px;
    display: flex; flex-direction: column;
}
.pricing-card.highlight {
    border: 2px solid var(--brand-500);
    box-shadow: 0 6px 24px rgba(107,79,224,0.18);
}
.pricing-badge {
    position: absolute; top: -10px; right: 16px;
    background: var(--brand-500); color: #fff;
    padding: 4px 12px; border-radius: 999px; font-size: 0.78rem; font-weight: 600;
}
.pricing-card h3 {
    font-family: 'Newsreader', Georgia, serif;
    font-size: 1.5rem; color: var(--ink-900); margin: 0 0 8px;
}
.pricing-price {
    font-family: 'Newsreader', Georgia, serif;
    font-size: 2.4rem; color: var(--brand-700); font-weight: 600;
}
.pricing-once { display: block; font-family: 'Inter', sans-serif; font-size: 0.8rem; color: var(--ink-500); font-weight: 400; letter-spacing: 0.02em; }
.pricing-tagline { color: var(--ink-600); margin: 12px 0 16px; min-height: 42px; }
.pricing-features { list-style: none; padding: 0; margin: 0 0 22px; flex: 1; }
.pricing-features li { padding: 4px 0; color: var(--ink-700); font-size: 0.93rem; }
.pricing-features li i { color: #2c9b6a; margin-right: 6px; }

/* Locked quick-tool */
.quick-tool.locked {
    opacity: 0.65;
    background: linear-gradient(135deg, var(--ink-50) 0%, #fff 100%);
}
.quick-tool.locked .qt-arrow { color: var(--ink-400); }
.part-row.tier-locked { background: var(--ink-50); }

/* Admin */
.admin-tabs { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid var(--ink-100); margin-bottom: 22px; }
.admin-tab {
    padding: 10px 14px; color: var(--ink-500); text-decoration: none;
    font-weight: 500; border-bottom: 2px solid transparent;
    display: inline-flex; align-items: center; gap: 6px; font-size: 0.92rem;
}
.admin-tab.active { color: var(--brand-700); border-bottom-color: var(--brand-500); }
.admin-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 22px; }
.kpi { background: #fff; border: 1px solid var(--ink-100); border-radius: var(--r-md); padding: 16px; }
.kpi-label { display:block; font-size: 0.85rem; color: var(--ink-500); }
.kpi-val { display:block; font-size: 1.6rem; font-weight: 700; color: var(--ink-900); margin-top: 4px; font-family: 'Newsreader', Georgia, serif; }
.admin-tier-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-top: 8px; }
.admin-tier-cell { background:#fff; border:1px solid var(--ink-100); border-radius: var(--r-md); padding:14px; text-align:center; }
.admin-tier-cell strong { display:block; font-size: 1.6rem; color: var(--ink-900); }
.admin-tier-cell span { color: var(--ink-500); font-size:0.85rem; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; background: #fff; border: 1px solid var(--ink-100); border-radius: var(--r-md); overflow: hidden; }
.admin-table th, .admin-table td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--ink-100); vertical-align: top; }
.admin-table th { background: var(--ink-50); font-weight: 600; color: var(--ink-700); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table code { background: var(--ink-50); padding: 2px 6px; border-radius: 4px; font-size: 0.82rem; }
.admin-table .set-tier { padding: 4px 8px; border: 1px solid var(--ink-100); border-radius: 4px; }
.admin-app-card { background: #fff; border: 1px solid var(--ink-100); border-radius: var(--r-md); padding: 16px 18px; margin-bottom: 14px; }
.admin-app-head { display: flex; flex-wrap: wrap; gap: 10px 16px; font-size: 0.9rem; color: var(--ink-700); margin-bottom: 12px; align-items: center; }
.admin-app-status { background: var(--ink-50); padding: 2px 10px; border-radius: 999px; font-size: 0.78rem; }
.admin-app-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; font-size: 0.9rem; color: var(--ink-700); }
@media (max-width: 720px) { .admin-app-grid { grid-template-columns: 1fr; } }
.admin-form-card { background: #fff; border: 1px solid var(--ink-100); border-radius: var(--r-lg); padding: 22px; }
.admin-reply-form { display: flex; gap: 8px; margin-top: 10px; }
.admin-reply-form textarea { flex: 1; padding: 8px 10px; border: 1px solid var(--ink-100); border-radius: var(--r-md); font-family: inherit; }
.record-payout-form { display: flex; gap: 6px; }
.record-payout-form input { width: 100px; padding: 6px 8px; border: 1px solid var(--ink-100); border-radius: 6px; font-size: 0.85rem; }

/* ====== Gamification card on dashboard (light redesign) ====== */
.gm-card {
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: 18px;
    padding: 20px 22px;
    margin: 0 0 18px;
    box-shadow: 0 4px 20px rgba(29, 20, 56, 0.06);
    position: relative;
}
.gm-card-top {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 18px;
    align-items: stretch;
    margin-bottom: 18px;
}
@media (max-width: 720px) {
    .gm-card-top { grid-template-columns: 1fr; gap: 14px; }
}
/* Level block */
.gm-level {
    background: linear-gradient(135deg, #f5f0ff 0%, #ede5ff 100%);
    border-radius: 14px;
    padding: 16px 18px;
}
.gm-level-pill {
    display: inline-block;
    background: var(--brand-500);
    color: #fff;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.gm-level-name {
    font-family: 'Newsreader', Georgia, serif;
    font-size: 1.65rem;
    font-weight: 600;
    color: var(--brand-700);
    margin-bottom: 12px;
    line-height: 1.15;
}
.gm-level-bar {
    height: 8px;
    background: rgba(107, 79, 224, 0.15);
    border-radius: 999px;
    overflow: hidden;
}
.gm-level-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #6b4fe0, #facc15);
    border-radius: 999px;
    transition: width 0.4s ease;
}
.gm-level-sub {
    font-size: 0.82rem;
    color: var(--ink-500);
    margin-top: 8px;
}

/* Level row with info button */
.gm-level-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.gm-info-btn {
    margin-left: auto;
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    border: none;
    background: rgba(107, 79, 224, 0.12);
    color: var(--brand-600);
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.15s ease, transform 0.15s ease;
    padding: 0;
}
.gm-info-btn:hover { background: rgba(107, 79, 224, 0.22); transform: scale(1.05); }

/* XP / Level info modal */
.gm-modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
}
.gm-modal.is-open { display: flex; }
.gm-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(29, 20, 56, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.gm-modal-card {
    position: relative;
    background: #fff;
    border-radius: 18px;
    width: 100%;
    max-width: 560px;
    max-height: 88vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 30px 60px rgba(29, 20, 56, 0.35);
    animation: gmModalIn 0.2s ease;
}
@keyframes gmModalIn {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.gm-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--ink-100);
}
.gm-modal-head h2 {
    font-family: 'Newsreader', Georgia, serif;
    font-size: 1.3rem;
    color: var(--ink-900);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.gm-modal-head h2 i { color: #f59e0b; }
.gm-modal-close {
    background: var(--ink-50);
    border: none;
    width: 34px; height: 34px;
    border-radius: 50%;
    cursor: pointer;
    color: var(--ink-700);
    font-size: 1rem;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s ease;
}
.gm-modal-close:hover { background: var(--ink-100); }
.gm-modal-body {
    padding: 18px 22px 22px;
    overflow-y: auto;
}
.gm-modal-body section + section { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--ink-100); }
.gm-modal-body h3 {
    font-family: 'Newsreader', Georgia, serif;
    font-size: 1.1rem;
    color: var(--brand-700);
    margin: 0 0 12px;
}
.gm-modal-body h4 {
    font-size: 0.85rem;
    color: var(--ink-500);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 18px 0 8px;
    font-weight: 600;
}
.gm-xp-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.gm-xp-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--ink-50);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 0.92rem;
    color: var(--ink-700);
}
.gm-xp-amt {
    display: inline-block;
    background: var(--brand-500);
    color: #fff;
    padding: 3px 10px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.82rem;
    min-width: 60px;
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
}
.gm-levels-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: 10px;
    overflow: hidden;
}
.gm-levels-table th, .gm-levels-table td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid var(--ink-100);
}
.gm-levels-table th {
    background: var(--ink-50);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-500);
}
.gm-levels-table tr:last-child td { border-bottom: none; }
.gm-levels-table tr.gm-levels-current {
    background: linear-gradient(90deg, #f5f0ff, #ede5ff);
}
.gm-levels-current td { color: var(--brand-700); font-weight: 600; }
.gm-modal-foot {
    margin: 16px 0 0;
    color: var(--ink-500);
    text-align: center;
    font-size: 0.92rem;
}
.gm-modal-foot strong { color: var(--brand-700); }

/* Streak block */
.gm-streak {
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    border: 1px solid #fed7aa;
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.gm-streak-flame {
    position: relative;
    width: 54px; height: 54px;
    flex: 0 0 54px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 60%, #fb923c 0%, #ea580c 60%, #c2410c 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(251, 146, 60, 0.4);
    animation: gmFlameGlow 2.4s ease-in-out infinite;
}
@keyframes gmFlameGlow {
    0%, 100% { box-shadow: 0 4px 14px rgba(251, 146, 60, 0.4); }
    50%      { box-shadow: 0 6px 22px rgba(251, 146, 60, 0.7); }
}
.gm-streak-flame i { color: rgba(255, 230, 160, 0.95); font-size: 0.72rem; }
.gm-streak-num { font-family: 'Newsreader', Georgia, serif; font-size: 1.35rem; font-weight: 700; color: #fff; line-height: 1; margin-top: 1px; }
.gm-streak-meta { flex: 1; min-width: 110px; }
.gm-streak-meta strong { display: block; font-size: 0.92rem; color: #7c2d12; }
.gm-streak-meta span { display: block; font-size: 0.76rem; color: #9a3412; margin-top: 2px; }
.gm-streak-target {
    background: rgba(255,255,255,0.7);
    border-radius: 10px;
    padding: 6px 12px;
    font-size: 0.78rem;
    color: #9a3412;
    flex: 1 1 100%;
    margin-top: 2px;
}
.gm-streak-target strong { color: #c2410c; }

/* Badges */
.gm-badges { position: relative; }
.gm-badges-head {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: var(--ink-50);
    border: 1px solid var(--ink-100);
    border-radius: 10px;
    padding: 10px 14px;
    cursor: pointer;
    font-family: inherit;
    margin-bottom: 12px;
    transition: background 0.15s ease;
}
.gm-badges-head:hover { background: #f4f0fe; }
.gm-badges-head h3 {
    font-family: 'Newsreader', Georgia, serif;
    font-size: 1.05rem;
    color: var(--ink-900);
    margin: 0;
    font-weight: 600;
}
.gm-badges-count { color: var(--ink-500); font-size: 0.85rem; }
.gm-badges-chev {
    margin-left: auto;
    color: var(--ink-500);
    transition: transform 0.2s ease;
}
.gm-badges-head.is-open .gm-badges-chev { transform: rotate(180deg); }

.gm-badges-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}
@media (max-width: 600px) {
    .gm-badges-grid { grid-template-columns: repeat(5, 1fr); gap: 8px; }
}
.gm-badge-extra { display: none; }
.gm-badges-grid.is-expanded .gm-badge-extra { display: block; }

.gm-badge {
    position: relative;
    text-align: center;
    padding: 8px 4px;
    border-radius: 12px;
    cursor: help;
    transition: transform 0.15s ease, background 0.15s ease;
}
.gm-badge:hover { transform: translateY(-2px); background: var(--ink-50); }
.gm-badge-medal {
    width: 52px; height: 52px;
    margin: 0 auto 6px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 3px 10px rgba(0,0,0,0.18), inset 0 -3px 6px rgba(0,0,0,0.16), inset 0 3px 6px rgba(255,255,255,0.2);
    color: #fff;
    font-size: 1.2rem;
    position: relative;
}
.gm-badge-medal::after {
    content: '';
    position: absolute; inset: 4px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.22);
}
.gm-badge.locked .gm-badge-medal {
    filter: grayscale(1) brightness(0.85);
    opacity: 0.55;
}
.gm-badge-img {
    width: 56px; height: 56px; margin: 0 auto 6px;
    border-radius: 50%; overflow: hidden;
    box-shadow: 0 3px 12px rgba(29, 20, 56, 0.18);
    background: var(--ink-50);
}
.gm-badge-img img { width: 100%; height: 100%; object-fit: cover; }
.gm-badge.locked .gm-badge-img img { filter: grayscale(1) brightness(0.95); opacity: 0.45; }
.gm-badge-name {
    font-size: 0.7rem;
    color: var(--ink-700);
    line-height: 1.2;
    font-weight: 500;
}
.gm-badge.locked .gm-badge-name { color: var(--ink-400); }

.gm-badge { cursor: pointer; }
.gm-badge.is-active { background: rgba(107, 79, 224, 0.08); }

/* Shared popover used by JS — works on both desktop hover and mobile tap */
.gm-badge-pop {
    position: fixed;
    background: var(--ink-900);
    color: #fff;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 0.82rem;
    line-height: 1.45;
    max-width: 280px;
    text-align: left;
    z-index: 60;
    box-shadow: 0 10px 28px rgba(0,0,0,0.32);
    opacity: 0;
    transform: translateY(4px);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.gm-badge-pop.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.gm-badge-pop-title {
    font-family: 'Newsreader', Georgia, serif;
    font-weight: 600;
    font-size: 0.98rem;
    display: block;
    margin-bottom: 4px;
}
.gm-badge-pop-hint {
    display: block;
    color: rgba(255,255,255,0.82);
}
.gm-badge-pop-status {
    display: inline-block;
    margin-top: 8px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.gm-badge-pop-status.earned { background: #2c9b6a; color: #fff; }
.gm-badge-pop-status.locked { background: rgba(255,255,255,0.18); color: rgba(255,255,255,0.85); }
.gm-badge-pop-close {
    position: absolute;
    top: 6px;
    right: 8px;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    padding: 4px;
    font-size: 0.85rem;
}
.gm-badge-pop-close:hover { color: #fff; }
@media (max-width: 600px) {
    /* On narrow screens the popover becomes a small bottom sheet */
    .gm-badge-pop {
        left: 12px !important;
        right: 12px !important;
        bottom: 16px !important;
        top: auto !important;
        max-width: none;
        padding: 14px 16px 16px;
        border-radius: 16px;
    }
}

/* Welcome video card */
.welcome-vid {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, #1D1438 0%, #4D32A8 100%);
    color: #fff;
    border-radius: 14px;
    padding: 14px 18px;
    margin: 0 0 14px;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(29, 20, 56, 0.18);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    overflow: hidden;
}
.welcome-vid::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(250, 204, 21, 0.18), transparent 55%);
    pointer-events: none;
}
.welcome-vid:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 30px rgba(29, 20, 56, 0.25);
    color: #fff;
    text-decoration: none;
}
.wv-thumb {
    position: relative;
    flex: 0 0 56px;
    width: 56px; height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, #facc15, #f59e0b);
    color: #1D1438;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    box-shadow: 0 6px 16px rgba(250, 204, 21, 0.35);
}
.wv-text {
    flex: 1; min-width: 0;
    position: relative;
}
.wv-text strong {
    display: block;
    font-family: 'Newsreader', Georgia, serif;
    font-size: 1.05rem;
    line-height: 1.25;
    color: #fff;
}
.wv-text span {
    display: block;
    color: rgba(255,255,255,0.78);
    font-size: 0.86rem;
    margin-top: 2px;
    line-height: 1.4;
}
.wv-close {
    background: rgba(255,255,255,0.08);
    border: none;
    color: rgba(255,255,255,0.78);
    width: 28px; height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
    position: relative;
}
.wv-close:hover { background: rgba(255,255,255,0.2); color: #fff; }

/* Life list attention nudge */
.ll-nudge {
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(90deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #fcd34d;
    border-radius: 14px;
    padding: 14px 18px;
    margin: 0 0 22px;
    text-decoration: none;
    color: #78350f;
    position: relative;
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ll-nudge:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(245, 158, 11, 0.25);
    color: #78350f;
    text-decoration: none;
}
.ll-nudge > i {
    width: 40px; height: 40px;
    border-radius: 12px;
    background: rgba(245,158,11,0.22);
    color: #d97706;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    z-index: 1;
}
.ll-nudge-text { flex: 1; min-width: 0; z-index: 1; }
.ll-nudge-text strong { display: block; font-size: 0.98rem; color: #78350f; }
.ll-nudge-text span { font-size: 0.85rem; color: #92400e; }
.ll-nudge-arrow { color: #d97706; font-size: 0.85rem; z-index: 1; }
.ll-nudge-pulse {
    position: absolute;
    top: 18px;
    left: 30px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: rgba(220, 38, 38, 0.7);
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7);
    animation: llNudgePulse 1.6s ease-in-out infinite;
    z-index: 0;
}
@keyframes llNudgePulse {
    0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.55); }
    70% { box-shadow: 0 0 0 14px rgba(220, 38, 38, 0); }
    100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}

/* Part 2 — gratitude journal nudge on the alignment report */
.p2-gratitude-prompt {
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, #fff7ed 0%, #ffe4e6 100%);
    border: 1px solid #fecaca;
    border-radius: 14px;
    padding: 16px 18px;
    margin: 22px 0 6px;
    text-decoration: none;
    color: #7c2d12;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.p2-gratitude-prompt:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(244, 114, 182, 0.22);
    color: #7c2d12;
    text-decoration: none;
}
.p2-gp-icon {
    width: 42px; height: 42px;
    flex: 0 0 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, #fb7185 0%, #e11d48 100%);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    box-shadow: 0 4px 12px rgba(225, 29, 72, 0.25);
}
.p2-gp-text { flex: 1; min-width: 0; }
.p2-gp-text strong {
    display: block;
    font-family: 'Newsreader', Georgia, serif;
    font-size: 1.05rem;
    color: #9f1239;
    line-height: 1.25;
    margin-bottom: 4px;
}
.p2-gp-text p {
    margin: 0;
    color: #7c2d12;
    font-size: 0.92rem;
    line-height: 1.5;
}
.p2-gp-arrow { color: #e11d48; flex-shrink: 0; }

/* ====== Gratitude Journal ====== */
.gj-streak-card {
    display: flex; align-items: center; gap: 16px;
    background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%);
    border: 1px solid #fecdd3;
    border-radius: 16px;
    padding: 16px 20px;
    margin-bottom: 18px;
}
.gj-streak-flame {
    width: 56px; height: 56px; flex: 0 0 56px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 60%, #fb7185 0%, #e11d48 65%, #9f1239 100%);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: #fff;
    box-shadow: 0 4px 14px rgba(225, 29, 72, 0.4);
}
.gj-streak-flame i { font-size: 0.85rem; color: #ffe4e6; }
.gj-streak-flame span { font-family: 'Newsreader', Georgia, serif; font-size: 1.4rem; font-weight: 700; line-height: 1; }
.gj-streak-text strong { display: block; font-size: 1.05rem; color: #9f1239; font-family: 'Newsreader', Georgia, serif; }
.gj-streak-text span { display: block; color: #be185d; font-size: 0.85rem; }

.gj-instructions {
    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
    border: 1px solid #e9d5ff;
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 22px;
}
.gj-instructions h3 {
    font-family: 'Newsreader', Georgia, serif;
    font-size: 1.15rem;
    color: var(--brand-700);
    margin: 0 0 8px;
    display: flex; align-items: center; gap: 6px;
}
.gj-instructions p { color: var(--ink-700); line-height: 1.55; margin: 0 0 12px; font-size: 0.96rem; }
.gj-instructions em { font-style: italic; color: var(--brand-700); }
.gj-dim-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.gj-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    background: var(--ink-50);
    color: var(--ink-700);
}
.gj-chip.dim-hope       { background: #fef3c7; color: #92400e; }
.gj-chip.dim-security   { background: #dbeafe; color: #1e40af; }
.gj-chip.dim-value      { background: #fce7f3; color: #9d174d; }
.gj-chip.dim-connection { background: #d1fae5; color: #065f46; }

.gj-today-card {
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: 16px;
    padding: 22px 24px;
    margin-bottom: 24px;
    box-shadow: 0 6px 22px rgba(29, 20, 56, 0.05);
}
.gj-today-head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 16px; flex-wrap: wrap; gap: 8px;
}
.gj-today-head h3 {
    font-family: 'Newsreader', Georgia, serif;
    font-size: 1.3rem;
    margin: 0; color: var(--ink-900);
}
.gj-saved-tag {
    color: #166534;
    background: #dcfce7;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
}

.gj-form { display: flex; flex-direction: column; gap: 12px; }
.gj-line { display: flex; align-items: center; gap: 12px; }
.gj-line-num {
    width: 30px; height: 30px;
    flex: 0 0 30px;
    border-radius: 50%;
    background: var(--brand-100);
    color: var(--brand-700);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
    font-family: 'Newsreader', Georgia, serif;
}
.gj-line input {
    flex: 1;
    padding: 11px 14px;
    border: 1px solid var(--ink-100);
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.96rem;
    color: var(--ink-900);
    background: var(--ink-50);
    width: 100%;
    box-sizing: border-box;
}
.gj-line input:focus {
    outline: none;
    border-color: var(--brand-500);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(107, 79, 224, 0.12);
}

.gj-dim-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
.gj-dim-label {
    width: 100%;
    font-size: 0.82rem;
    color: var(--ink-500);
    margin-bottom: 4px;
}
.gj-dim-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--ink-100);
    font-size: 0.84rem;
    cursor: pointer;
    transition: background 0.15s ease;
    user-select: none;
}
.gj-dim-pill input { display: none; }
.gj-dim-pill:has(input:checked) { background: var(--brand-100); border-color: var(--brand-500); color: var(--brand-700); }
.gj-dim-pill.dim-hope:has(input:checked)       { background: #fef3c7; border-color: #f59e0b; color: #92400e; }
.gj-dim-pill.dim-security:has(input:checked)   { background: #dbeafe; border-color: #3b82f6; color: #1e40af; }
.gj-dim-pill.dim-value:has(input:checked)      { background: #fce7f3; border-color: #ec4899; color: #9d174d; }
.gj-dim-pill.dim-connection:has(input:checked) { background: #d1fae5; border-color: #10b981; color: #065f46; }

.gj-notes-wrap summary {
    cursor: pointer;
    color: var(--brand-700);
    font-size: 0.88rem;
    padding: 6px 0;
    user-select: none;
}
.gj-notes-wrap textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--ink-100);
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.94rem;
    margin-top: 6px;
    box-sizing: border-box;
}
.gj-save-btn { align-self: flex-start; margin-top: 6px; }

.gj-past h3 {
    font-family: 'Newsreader', Georgia, serif;
    font-size: 1.2rem;
    margin: 0 0 12px;
    color: var(--ink-900);
}
.gj-past-empty { color: var(--ink-500); font-style: italic; }
.gj-past-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.gj-past-item {
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: 12px;
    padding: 16px 18px;
}
.gj-past-item header {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-bottom: 10px;
}
.gj-past-date {
    font-weight: 600;
    color: var(--ink-700);
    font-size: 0.92rem;
    flex: 1;
    min-width: 140px;
}
.gj-past-gratitudes {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.gj-past-gratitudes li {
    padding: 6px 12px;
    background: var(--ink-50);
    border-left: 3px solid var(--brand-400);
    border-radius: 0 8px 8px 0;
    color: var(--ink-700);
    font-size: 0.94rem;
}
.gj-past-notes {
    margin: 10px 0 0;
    padding: 8px 12px;
    background: #fffbeb;
    border-left: 3px solid #fbbf24;
    border-radius: 0 6px 6px 0;
    color: #78350f;
    font-style: italic;
    font-size: 0.88rem;
}

/* Part 3 — purpose hero on revisit */
.p3-purpose-hero {
    background: linear-gradient(135deg, #1D1438 0%, #4D32A8 100%);
    color: #fff;
    border-radius: var(--r-lg);
    padding: 28px 30px;
    margin: 0 0 22px;
}
.p3-purpose-eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,0.16);
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.p3-purpose-hero blockquote {
    margin: 0 0 12px;
    font-family: 'Newsreader', Georgia, serif;
    font-size: 1.4rem;
    line-height: 1.4;
    color: #fff;
    border: none;
    padding: 0;
}
.p3-purpose-foot {
    margin: 0;
    color: rgba(255,255,255,0.78);
    font-size: 0.88rem;
}

/* My Callings — inline miracle form */
.cb-miracle-form {
    margin-top: 10px;
    display: flex;
    gap: 6px;
}
.cb-miracle-form input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--ink-100);
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.92rem;
}
.cb-miracle-form button {
    padding: 8px 14px;
    background: var(--brand-500);
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.88rem;
    display: inline-flex; align-items: center; gap: 6px;
}
.cb-miracle-form button:hover { background: var(--brand-700); }
.cb-miracles-list { margin: 4px 0 0; }

/* Part 11 — callings + miracle calling tag */
.rp-callings-list {
    list-style: none;
    padding: 0;
    margin: 6px 0 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.rp-callings-list li {
    background: var(--ink-50);
    border-left: 3px solid var(--brand-500);
    padding: 10px 14px;
    border-radius: 0 8px 8px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.98rem;
    color: var(--ink-900);
}
.rp-callings-list li i { color: var(--brand-500); }

.rp-miracle-form { flex-wrap: wrap; gap: 8px; }
.rp-miracle-calling {
    padding: 9px 12px;
    border: 1px solid var(--ink-100);
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.88rem;
    background: #fff;
    color: var(--ink-700);
    flex: 0 1 220px;
    min-width: 0;
}
/* Filter row above the miracle list */
.rp-miracle-filter {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0 8px;
    flex-wrap: wrap;
}
.rp-miracle-filter label {
    color: var(--ink-500);
    font-size: 0.88rem;
}
.rp-miracle-filter select {
    flex: 1 1 220px;
    min-width: 0;
    padding: 8px 12px;
    border: 1px solid var(--ink-100);
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.92rem;
    background: #fff;
    color: var(--ink-900);
}
/* Uniform miracle row — all miracles render the same regardless of source */
.rp-miracles-list > li {
    background: #fff;
    border: 1px solid var(--ink-100);
}

/* Part 12 — Teach Others */
.p12-principle {
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: var(--r-lg);
    padding: 30px 32px;
    margin-bottom: 22px;
}
.p12-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--brand-100);
    color: var(--brand-700);
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.p12-principle h1 {
    font-family: 'Newsreader', Georgia, serif;
    font-size: 1.85rem;
    line-height: 1.22;
    color: var(--ink-900);
    margin: 0 0 14px;
}
.p12-principle p {
    color: var(--ink-700);
    font-size: 1.02rem;
    line-height: 1.6;
    margin: 0 0 12px;
}

.p12-movement {
    background: linear-gradient(135deg, #1D1438 0%, #4D32A8 100%);
    color: #fff;
    border-radius: var(--r-lg);
    padding: 30px 32px;
    text-align: center;
    margin-bottom: 30px;
}
.p12-movement-icon {
    font-size: 2.2rem;
    color: rgba(255,255,255,0.7);
    margin-bottom: 10px;
}
.p12-movement h2 {
    font-family: 'Newsreader', Georgia, serif;
    font-size: 1.6rem;
    color: #fff;
    margin: 0 0 10px;
}
.p12-movement p {
    color: rgba(255,255,255,0.86);
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.55;
}

.p12-paths-title {
    font-family: 'Newsreader', Georgia, serif;
    font-size: 1.4rem;
    color: var(--ink-900);
    margin: 0 0 18px;
    text-align: center;
}

.p12-paths {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 18px;
    margin-bottom: 30px;
}
.p12-path {
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: var(--r-lg);
    padding: 24px 26px;
    display: flex;
    flex-direction: column;
}
.p12-path.card-cert { border-top: 4px solid #d4a017; }
.p12-path.card-coach { border-top: 4px solid var(--brand-500); }
.p12-path.card-affiliate { border-top: 4px solid #2c9b6a; }
.p12-path-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.p12-path-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--ink-50);
    color: var(--brand-600);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
}
.p12-path h3 {
    font-family: 'Newsreader', Georgia, serif;
    font-size: 1.25rem;
    color: var(--ink-900);
    margin: 0;
}
.p12-path-blurb {
    color: var(--ink-600);
    font-size: 0.96rem;
    line-height: 1.55;
    margin: 0 0 14px;
}
.p12-affil-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
}
.p12-affil-stats > div {
    background: var(--ink-50);
    border-radius: var(--r-md);
    padding: 10px;
    text-align: center;
}
.p12-affil-stats span {
    display: block;
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--ink-900);
    font-family: 'Newsreader', Georgia, serif;
}
.p12-affil-stats small {
    color: var(--ink-500);
    font-size: 0.75rem;
}
.p12-path-list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    flex: 1;
}
.p12-path-list li {
    color: var(--ink-700);
    padding: 4px 0;
    font-size: 0.93rem;
}
.p12-path-list li i {
    color: #2c9b6a;
    margin-right: 6px;
    font-size: 0.85rem;
}
.p12-path-call {
    background: var(--ink-50);
    border-left: 3px solid var(--brand-500);
    padding: 10px 14px;
    border-radius: 6px;
    color: var(--ink-700);
    font-size: 0.92rem;
    margin: 0 0 14px;
}
.p12-cta-btn { width: 100%; text-align: center; justify-content: center; }
.p12-share-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
}
.p12-share-code {
    background: linear-gradient(135deg, #1D1438 0%, #4D32A8 100%);
    color: #fff;
    padding: 8px 14px;
    border-radius: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.p12-share-row input {
    padding: 8px 12px;
    border: 1px solid var(--ink-100);
    border-radius: 8px;
    font-family: monospace;
    font-size: 0.8rem;
    width: 100%;
}
@media (max-width: 520px) {
    .p12-share-row { grid-template-columns: 1fr; }
}

.p12-finish-row {
    text-align: center;
    padding: 26px 0 18px;
    border-top: 1px solid var(--ink-100);
}
.p12-finish-row small {
    display: block;
    color: var(--ink-500);
    margin-top: 10px;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

/* Coming-soon state on quick-rail tools (user has access but the page isn't built yet) */
.quick-tool.coming-soon {
    cursor: default;
    opacity: 0.78;
}
.quick-tool.coming-soon:hover {
    background: var(--ink-50);
    transform: none;
}
.quick-tool.coming-soon .qt-icon { background: var(--ink-50); color: var(--ink-400); }
.qt-soon-badge {
    margin-left: auto;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
    border: 1px solid #fcd34d;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Tier label badge on quick-card titles */
.quick-tier-badge {
    margin-left: auto;
    background: rgba(107, 79, 224, 0.12);
    color: var(--brand-700);
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 8px;
    border-radius: 999px;
}
.quick-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Header action pills (top-right of dashboard header) */
.header-actions {
    position: absolute;
    top: 14px;
    right: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 3;
}
.header-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 500;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    transition: background 0.15s ease;
    line-height: 1;
    white-space: nowrap;
}
.header-pill:hover { background: rgba(255, 255, 255, 0.18); color: #fff; }
.header-pill.icon-only {
    width: 36px; height: 36px; padding: 0;
    justify-content: center; gap: 0;
}
.header-pill i { font-size: 0.9rem; }
@media (max-width: 560px) {
    .header-pill span { display: none; }
    .header-pill { width: 32px; height: 32px; padding: 0; justify-content: center; gap: 0; font-size: 0.78rem; }
    .header-actions { top: 10px; right: 10px; gap: 6px; }
    /* Push the logo down so it never sits behind the action pills */
    .main-header { padding-top: 54px; }
    .main-header:has(.header-actions) { padding-top: 54px; }
    .logo-img { max-height: 44px; max-width: 70%; margin-bottom: 6px; }
}

/* Free-tier upsell banner on the dashboard */
.free-upsell {
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg, #1D1438 0%, #4D32A8 100%);
    color: #fff;
    border-radius: 14px;
    padding: 16px 20px;
    margin: 0 0 22px;
    box-shadow: 0 4px 18px rgba(29, 20, 56, 0.15);
}
.free-upsell .fu-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.16);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}
.free-upsell .fu-text {
    flex: 1;
    min-width: 0;
}
.free-upsell .fu-title {
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.3;
    margin-bottom: 2px;
}
.free-upsell .fu-sub {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.4;
}
.free-upsell .fu-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    color: #1D1438;
    padding: 10px 18px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.92rem;
    white-space: nowrap;
    transition: transform 0.15s ease;
}
.free-upsell .fu-btn:hover {
    transform: translateY(-1px);
    background: #f3eeff;
}
@media (max-width: 640px) {
    .free-upsell { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px; }
    .free-upsell .fu-icon { width: 36px; height: 36px; flex-basis: 36px; }
    .free-upsell .fu-btn { width: 100%; justify-content: center; }
}

/* Admin: range picker */
.admin-range-row {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: #fff; border: 1px solid var(--ink-100); border-radius: var(--r-md);
    padding: 10px 14px; margin-bottom: 14px;
}
.admin-range-row label { font-weight: 600; color: var(--ink-700); font-size: 0.9rem; }
.admin-range-row select { padding: 6px 10px; border: 1px solid var(--ink-100); border-radius: 6px; font-family: inherit; font-size: 0.92rem; }
.admin-range-hint { color: var(--ink-500); font-size: 0.85rem; }

/* KPI tile footer line */
.kpi-foot { display: block; font-size: 0.74rem; color: var(--ink-500); margin-top: 4px; }

/* Admin: responsive table wrapper — card flow on mobile */
.admin-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* === Coupons redesign === */
.coupon-layout {
    display: grid;
    grid-template-columns: minmax(280px, 360px) 1fr;
    gap: 22px;
    align-items: start;
}
@media (max-width: 880px) { .coupon-layout { grid-template-columns: 1fr; } }

.coupon-form-card {
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: var(--r-lg);
    padding: 22px;
    position: sticky;
    top: 14px;
}
@media (max-width: 880px) { .coupon-form-card { position: static; } }
.coupon-form-head {
    display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px;
}
.coupon-form-head > i {
    width: 38px; height: 38px; border-radius: 10px;
    background: var(--brand-100); color: var(--brand-600);
    display: flex; align-items: center; justify-content: center; font-size: 1rem;
    flex: 0 0 38px;
}
.coupon-form-head h3 { font-family: 'Newsreader', Georgia, serif; font-size: 1.15rem; color: var(--ink-900); margin: 0 0 2px; }
.coupon-form-head p { color: var(--ink-500); font-size: 0.85rem; margin: 0; }

.coupon-form { display: flex; flex-direction: column; gap: 14px; }
.coupon-field { display: flex; flex-direction: column; gap: 4px; }
.coupon-field > span {
    font-size: 0.82rem; font-weight: 600; color: var(--ink-700);
}
.coupon-field > span small { font-weight: 400; color: var(--ink-400); }
.coupon-field input, .coupon-field select {
    padding: 9px 11px; border: 1px solid var(--ink-100); border-radius: 8px;
    font-family: inherit; font-size: 0.92rem; color: var(--ink-900);
    background: #fff;
    width: 100%; box-sizing: border-box;
}
.coupon-field input:focus {
    outline: none; border-color: var(--brand-500);
    box-shadow: 0 0 0 3px rgba(107, 79, 224, 0.12);
}
.coupon-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 420px) { .coupon-row-2 { grid-template-columns: 1fr; } }

.coupon-inline-suffix {
    display: flex; align-items: stretch;
    border: 1px solid var(--ink-100); border-radius: 8px;
    overflow: hidden; background: #fff;
}
.coupon-inline-suffix input {
    border: none; padding: 9px 11px; flex: 1;
    font-family: inherit; font-size: 0.92rem; min-width: 0; width: 100%;
}
.coupon-inline-suffix input:focus { outline: none; }
.coupon-inline-suffix span {
    background: var(--ink-50);
    color: var(--ink-500);
    padding: 9px 12px;
    font-size: 0.9rem;
    display: flex; align-items: center;
}

.coupon-checkbox {
    display: flex; align-items: flex-start; gap: 10px;
    background: var(--ink-50);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 0.88rem;
    color: var(--ink-700);
}
.coupon-checkbox input { margin-top: 3px; }

.coupon-submit-btn { width: 100%; justify-content: center; text-align: center; }

/* List */
.coupon-list-head {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 14px; flex-wrap: wrap; gap: 8px;
}
.coupon-list-head h3 { font-family: 'Newsreader', Georgia, serif; font-size: 1.2rem; margin: 0; color: var(--ink-900); }
.coupon-count { color: var(--ink-500); font-size: 0.88rem; }
.coupon-empty {
    background: var(--ink-50);
    border: 1px dashed var(--ink-100);
    border-radius: var(--r-lg);
    padding: 36px 20px; text-align: center; color: var(--ink-500);
}
.coupon-empty i { font-size: 2rem; color: var(--brand-300); display: block; margin-bottom: 8px; }

.coupon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}
.coupon-card {
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: 12px;
    padding: 16px;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.coupon-card.is-archived { opacity: 0.6; }
.coupon-card.is-active { border-left: 4px solid var(--brand-500); }
.coupon-card-top {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px;
}
.coupon-card-code {
    background: linear-gradient(135deg, #1D1438, #4D32A8);
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}
.coupon-card-label { color: var(--ink-500); font-size: 0.82rem; margin: 0 0 6px; }
.coupon-card-discount {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--ink-900);
    font-family: 'Newsreader', Georgia, serif;
    margin-bottom: 10px;
}
.coupon-card-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.coupon-tag {
    background: var(--ink-50);
    color: var(--ink-700);
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    display: inline-flex; align-items: center; gap: 4px;
}
.coupon-tag.expired { background: #fee2e2; color: #991b1b; }
.coupon-tag.tier-grant { background: linear-gradient(135deg, #facc15, #d97706); color: #fff; border: none; font-weight: 700; }
.coupon-tag.tier-grant i { color: #fff; }
.coupon-card-usage strong { font-size: 1rem; color: var(--ink-900); }
.coupon-card-usage span { color: var(--ink-500); font-size: 0.85rem; }
.coupon-bar {
    margin-top: 6px;
    height: 4px; background: var(--ink-50); border-radius: 999px; overflow: hidden;
}
.coupon-bar-fill { height: 100%; background: var(--brand-500); transition: width 0.2s ease; }

/* Coupon toggle switch */
.coupon-toggle {
    display: inline-block; cursor: pointer;
    width: 40px; height: 22px; position: relative;
}
.coupon-toggle input { opacity: 0; width: 0; height: 0; }
.coupon-toggle-switch {
    position: absolute; inset: 0;
    background: var(--ink-100);
    border-radius: 999px; transition: background 0.2s;
}
.coupon-toggle-switch::after {
    content: ''; position: absolute;
    top: 2px; left: 2px;
    width: 18px; height: 18px;
    background: #fff; border-radius: 50%;
    transition: transform 0.2s;
}
.coupon-toggle input:checked + .coupon-toggle-switch { background: var(--brand-500); }
.coupon-toggle input:checked + .coupon-toggle-switch::after { transform: translateX(18px); }

/* ====================== Admin: mobile responsiveness ====================== */
@media (max-width: 720px) {
    /* Tabs scroll horizontally instead of wrapping into 5 lines */
    .admin-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 4px;
        margin-bottom: 16px;
        scrollbar-width: thin;
    }
    .admin-tab {
        flex: 0 0 auto;
        padding: 10px 12px;
        font-size: 0.88rem;
        white-space: nowrap;
    }
    .admin-tab i { margin-right: 4px; }

    /* KPI cards: two per row */
    .admin-kpis { grid-template-columns: repeat(2, 1fr); }
    .kpi-val { font-size: 1.3rem; }

    .admin-tier-row { grid-template-columns: repeat(2, 1fr); }

    /* Charts stack */
    .admin-charts-row { grid-template-columns: 1fr; gap: 12px; }

    /* User detail grid stacks */
    .admin-user-grid { grid-template-columns: 1fr; }
    .admin-user-head h2 { font-size: 1.4rem; }

    /* Search/filter rows: full width inputs */
    .admin-search-row { flex-direction: column; align-items: stretch; gap: 8px; }
    .admin-search-row input[type=text], .admin-search-row select { width: 100%; min-width: 0; }
    .admin-range-row { flex-direction: column; align-items: stretch; }
    .admin-range-row select { width: 100%; }

    /* Tables: convert to card flow using data-label */
    .admin-table-wrap { overflow-x: visible; }
    .admin-table thead { display: none; }
    .admin-table, .admin-table tbody, .admin-table tr, .admin-table td { display: block; width: 100%; }
    .admin-table tr {
        background: #fff;
        border: 1px solid var(--ink-100);
        border-radius: 10px;
        padding: 12px 14px;
        margin-bottom: 10px;
    }
    .admin-table td {
        border: none !important;
        padding: 5px 0;
        display: flex; align-items: flex-start; justify-content: space-between;
        gap: 12px;
        font-size: 0.9rem;
    }
    .admin-table td:before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--ink-500);
        font-size: 0.78rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        flex: 0 0 100px;
    }
    .admin-table td[data-label=""]::before { display: none; }
    .admin-table td[data-label=""] { justify-content: flex-end; padding-top: 8px; }

    /* App cards: vertical head */
    .admin-app-head { flex-direction: column; align-items: flex-start; gap: 6px; }
    .admin-app-head select { width: 100%; }
}

/* Admin extras */
.admin-search-row {
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
    background: #fff; border: 1px solid var(--ink-100); border-radius: var(--r-md);
    padding: 10px 12px; margin-bottom: 14px;
}
.admin-search-row input[type=text], .admin-search-row select {
    padding: 8px 10px; border: 1px solid var(--ink-100); border-radius: 6px;
    font-family: inherit; font-size: 0.92rem;
}
.admin-search-row input[type=text] { flex: 1; min-width: 220px; }

.admin-charts-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px;
}
.admin-chart-card {
    background: #fff; border: 1px solid var(--ink-100); border-radius: var(--r-md);
    padding: 16px 18px;
}
.admin-chart-card h3 {
    font-family: 'Newsreader', Georgia, serif; font-size: 1rem;
    color: var(--ink-700); margin: 0 0 10px;
}
@media (max-width: 720px) { .admin-charts-row { grid-template-columns: 1fr; } }

.admin-user-head {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px; margin: 12px 0 20px;
}
.admin-user-head h2 {
    font-family: 'Newsreader', Georgia, serif; font-size: 1.8rem;
    color: var(--ink-900); margin: 0;
}
.admin-user-head h2 small { font-family: monospace; font-size: 0.85rem; color: var(--ink-500); margin-left: 8px; }
.admin-user-head p { margin: 4px 0 0; color: var(--ink-500); font-size: 0.92rem; }

.admin-user-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
@media (max-width: 760px) { .admin-user-grid { grid-template-columns: 1fr; } }

.admin-user-grid label { display: block; margin-bottom: 12px; }
.admin-user-grid label .cf-label { display:block; font-size:0.86rem; color: var(--ink-700); margin-bottom: 6px; }
.admin-user-grid input, .admin-user-grid select, .admin-user-grid textarea {
    width: 100%; padding: 10px 12px; border: 1px solid var(--ink-100);
    border-radius: var(--r-md); font-family: inherit; font-size: 0.95rem;
    box-sizing: border-box;
}
.reset-link-out { margin-top: 10px; }
.coaching-status, .question-status {
    padding: 4px 8px; border: 1px solid var(--ink-100); border-radius: 6px;
    font-size: 0.82rem;
}

/* Ask */
.ask-thread { background: #fff; border: 1px solid var(--ink-100); border-radius: var(--r-lg); padding: 22px 24px; margin-top: 12px; }
.ask-status { display:inline-block; background: var(--ink-50); padding: 2px 10px; border-radius: 999px; font-size: 0.78rem; color: var(--ink-700); }
.ask-status.status-open { background:#fef3c7; color:#92400e; }
.ask-status.status-answered { background:#dcfce7; color:#166534; }
.ask-messages { margin: 18px 0; display: flex; flex-direction: column; gap: 12px; }
.ask-msg { padding: 12px 14px; border-radius: var(--r-md); max-width: 86%; }
.ask-msg.msg-user { background: var(--ink-50); align-self: flex-start; }
.ask-msg.msg-admin { background: var(--brand-100); align-self: flex-end; }
.ask-msg-who { font-size: 0.78rem; color: var(--ink-500); margin-bottom: 4px; }
.ask-msg-body { color: var(--ink-900); }
.ask-reply textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--ink-100); border-radius: var(--r-md); font-family: inherit; }
.ask-reply button { margin-top: 8px; }
.ask-new-card { background:#fff; border:1px solid var(--ink-100); border-radius: var(--r-lg); padding: 22px 24px; margin: 18px 0; }
.ask-new-card label { display: block; margin-bottom: 12px; }
.ask-new-card input, .ask-new-card textarea { width:100%; padding: 10px 12px; border: 1px solid var(--ink-100); border-radius: var(--r-md); font-family: inherit; font-size:0.95rem; }
.ask-list { margin-top: 24px; }
.ask-row { display: flex; align-items:center; gap: 12px; padding: 12px 14px; background:#fff; border: 1px solid var(--ink-100); border-radius: var(--r-md); margin-bottom: 8px; text-decoration: none; color: inherit; }
.ask-row div { flex: 1; }
.ask-row small { display:block; color: var(--ink-500); font-size: 0.8rem; }

.form-success {
    background:#dcfce7; border:1px solid #86efac; color:#166534;
    padding: 12px 14px; border-radius: var(--r-md);
    display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
}

.p6-report-link-row {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--ink-100);
    text-align: center;
}
@media (max-width: 720px) {
    .mx-report-body { padding: 18px 18px; font-size: 1rem; }
    .mx-report-body h1 { font-size: 1.4rem; }
}

/* Explore tab */
.mx-seed-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}
.mx-seed-pill {
    background: #fff;
    border: 1.5px solid var(--ink-100);
    border-radius: 999px;
    padding: 8px 14px;
    cursor: pointer;
    transition: all .15s var(--tx);
    font-family: var(--font-sans);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
}
.mx-seed-pill:hover { border-color: var(--brand-400); }
.mx-seed-pill.active {
    background: var(--brand-500);
    border-color: var(--brand-500);
    color: #fff;
}
.mx-seed-pill .mx-pill-type {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: rgba(255,255,255,0.18);
    color: inherit;
    border-radius: 999px;
    padding: 2px 8px;
    opacity: 0.85;
}
.mx-seed-pill:not(.active) .mx-pill-type {
    background: var(--brand-100);
    color: var(--brand-700);
}
.mx-seed-pill .mx-pill-text {
    font-size: 0.88rem;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mx-explore-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 16px;
}
@media (max-width: 900px) {
    .mx-explore-grid { grid-template-columns: 1fr; }
}

.mx-tree-wrap {
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: var(--r-lg);
    padding: 14px;
    min-height: 540px;
}
.mx-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 0.78rem;
    color: var(--ink-500);
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--ink-100);
}
.mx-legend i { margin-right: 4px; }
.mx-tree-scroll {
    overflow: auto;
    max-height: 540px;
}

/* Editor panel */
.mx-editor {
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: var(--r-lg);
    padding: 18px;
    align-self: start;
    position: sticky;
    top: 12px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
}
.mx-editor-empty {
    text-align: center;
    color: var(--ink-500);
    padding: 30px 10px;
}
.mx-editor-empty p { margin-top: 12px; font-size: 0.92rem; }
.mx-editor-head {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.mx-tone-tag {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--ink-100);
    color: var(--ink-700);
}
.mx-tone-tag.tone-seed     { background: var(--brand-100); color: var(--brand-700); }
.mx-tone-tag.tone-positive { background: rgba(44,155,106,0.12); color: #1f6d4a; }
.mx-tone-tag.tone-negative { background: rgba(199,92,92,0.12); color: #8a3c3c; }
.mx-tone-tag.tone-origin,
.mx-tone-tag.is-origin {
    background: rgba(212,160,23,0.18);
    color: #7a5d04;
}
.mx-tone-tag i { margin-right: 4px; }

.mx-editor-text {
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--ink-900);
    line-height: 1.4;
    padding: 8px 0 12px;
    border-bottom: 1px dashed var(--ink-100);
    margin-bottom: 12px;
}
.mx-editor-help {
    font-size: 0.84rem;
    color: var(--ink-500);
    line-height: 1.5;
    margin: 0 0 14px;
    font-style: italic;
}
.mx-add-rows {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}
.mx-add-row label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink-700);
    margin-bottom: 4px;
}
.mx-add-row label i { margin-right: 4px; }

.mx-editor-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}
.mx-editor-actions button {
    background: none;
    border: 1px solid var(--ink-200);
    color: var(--ink-700);
    font-family: var(--font-sans);
    font-size: 0.84rem;
    padding: 8px 12px;
    border-radius: var(--r-md);
    cursor: pointer;
    text-align: left;
    transition: all .15s var(--tx);
}
.mx-editor-actions button:hover {
    background: var(--ink-50);
    border-color: var(--ink-300);
}
.mx-editor-actions button i { margin-right: 6px; }
.mx-btn-origin.on {
    background: rgba(212,160,23,0.15);
    border-color: #d4a017;
    color: #7a5d04;
}
.mx-btn-origin.on:hover { background: rgba(212,160,23,0.25); }
.mx-btn-del:hover {
    background: var(--error-bg);
    border-color: var(--error);
    color: var(--error);
}

.mx-child-count {
    font-size: 0.78rem;
    color: var(--ink-400);
    text-align: center;
    margin: 4px 0 0;
}

/* Map tab */
.mx-map-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 0.82rem;
    color: var(--ink-500);
    margin-bottom: 12px;
    padding: 10px 14px;
    background: var(--ink-50);
    border-radius: var(--r-md);
}
.mx-map-legend i { margin-right: 4px; }
.mx-map-hint { margin-left: auto; color: var(--ink-400); font-style: italic; }
.mx-map-canvas {
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: var(--r-lg);
    padding: 8px;
    overflow: hidden;
}
.mx-map-canvas svg { cursor: grab; }
.mx-map-canvas svg:active { cursor: grabbing; }


/* ========================================================
   Part 9 — Architect New Identity
   ======================================================== */

/* Identity strip (always visible at top) */
.id-identity-strip {
    background: linear-gradient(135deg, #1D1438 0%, #4D32A8 100%);
    color: #fff;
    border-radius: var(--r-lg);
    padding: 18px 22px;
    margin-bottom: 18px;
    box-shadow: 0 4px 18px rgba(28,15,68,0.18);
    position: sticky;
    top: 8px;
    z-index: 5;
}
.id-strip-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}
.id-strip-head h3 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: #fff;
    margin: 0;
}
.id-strip-count {
    background: rgba(255,255,255,0.16);
    color: #fff;
    border-radius: 999px;
    padding: 3px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.id-strip-add-toggle {
    margin-left: auto;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.22);
    color: #fff;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 999px;
    cursor: pointer;
    transition: all .15s var(--tx);
}
.id-strip-add-toggle:hover { background: rgba(255,255,255,0.18); }
.id-strip-add-toggle.open { background: rgba(255,255,255,0.24); }
.id-strip-add-toggle i { margin-right: 4px; }

/* Make the custom-add form inside the strip readable on dark bg */
.id-identity-strip .id-custom-add input {
    background: rgba(255,255,255,0.96);
    color: var(--ink-900);
}
.id-identity-strip .id-custom-add button {
    background: #ffd250;
    color: var(--ink-900);
}
.id-identity-strip .id-custom-add button:hover { background: #ffc107; }
.id-trait-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 36px;
    align-items: center;
}
.id-strip-empty {
    color: rgba(255,255,255,0.6);
    font-size: 0.9rem;
    font-style: italic;
}
.id-trait-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.14);
    color: #fff;
    border-radius: 999px;
    padding: 6px 12px 6px 10px;
    font-size: 0.86rem;
    font-weight: 500;
    border: 1px solid rgba(255,255,255,0.2);
    backdrop-filter: blur(4px);
}
.id-trait-chip i:first-child { color: #b9ff9b; font-size: 0.78em; }
.id-trait-chip.custom { background: rgba(255,210,80,0.18); border-color: rgba(255,210,80,0.45); }
.id-trait-chip.custom i:first-child { color: #ffd250; }
.id-trait-del {
    background: rgba(255,255,255,0.08);
    border: none;
    color: rgba(255,255,255,0.7);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    transition: all .15s var(--tx);
    margin-left: 2px;
}
.id-trait-del:hover { background: #c75c5c; color: #fff; }

/* Aspiration pills bar */
.id-aspiration-bar {
    margin-bottom: 18px;
}
.id-aspiration-label {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: var(--ink-500);
    margin-right: 10px;
    display: block;
    margin-bottom: 8px;
}
.id-aspiration-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.id-aspiration-pill {
    background: #fff;
    border: 1.5px solid var(--ink-100);
    border-radius: var(--r-md);
    padding: 8px 12px;
    cursor: pointer;
    font-family: var(--font-sans);
    transition: all .15s var(--tx);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
}
.id-aspiration-pill:hover { border-color: var(--brand-400); }
.id-aspiration-pill.active {
    background: var(--brand-500);
    color: #fff;
    border-color: var(--brand-500);
}
.id-pill-group {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: var(--brand-100);
    color: var(--brand-700);
    border-radius: 999px;
    padding: 2px 8px;
    font-weight: 700;
}
.id-aspiration-pill.active .id-pill-group {
    background: rgba(255,255,255,0.2);
    color: #fff;
}
.id-pill-text {
    font-size: 0.86rem;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Main aspiration card */
.id-aspiration-card {
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: var(--r-lg);
    padding: 22px 24px 24px;
    box-shadow: 0 1px 4px rgba(28,15,68,0.04);
    margin-bottom: 22px;
}
.id-card-head { margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px dashed var(--ink-100); }
.id-card-head h3 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--ink-900);
    margin: 8px 0 6px;
    line-height: 1.3;
}
.id-card-sub {
    color: var(--ink-500);
    font-size: 0.92rem;
    margin: 0;
    font-style: italic;
}
.id-group-tag {
    display: inline-block;
    background: var(--brand-100);
    color: var(--brand-700);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
}

.id-section { margin-bottom: 26px; }
.id-section:last-child { margin-bottom: 0; }
.id-section-head { margin-bottom: 14px; }
.id-section-head h4 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--ink-900);
    margin: 0 0 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.id-section-head h4 i { color: var(--brand-500); font-size: 0.92em; }
.id-section-head p {
    color: var(--ink-500);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}

/* Blocker row */
.id-blocker-row {
    background: var(--ink-50);
    border: 1px solid var(--ink-100);
    border-radius: var(--r-md);
    padding: 14px 16px;
    margin-bottom: 12px;
}
.id-blocker-text {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.96rem;
    color: var(--ink-900);
    font-weight: 500;
}
.id-blocker-text > i { color: #c75c5c; }
.id-blocker-text > span { flex: 1; line-height: 1.4; }
.id-blocker-del {
    background: none;
    border: none;
    color: var(--ink-300);
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 0.86rem;
    transition: all .15s var(--tx);
    flex-shrink: 0;
}
.id-blocker-del:hover { color: var(--error); background: var(--error-bg); }

.id-sugs-wrap {
    margin-top: 12px;
    padding: 12px 14px;
    background: #fff;
    border-radius: var(--r-sm);
    border: 1px dashed var(--ink-200);
}
.id-sugs-label {
    font-size: 0.82rem;
    color: var(--ink-500);
    margin-bottom: 8px;
    font-weight: 500;
}
.id-sugs-label i { color: #2c9b6a; }
.id-sugs-loading,
.id-sugs-empty {
    color: var(--ink-500);
    font-size: 0.9rem;
    padding: 6px 0;
}
.id-sugs-loading i { color: var(--brand-500); margin-right: 6px; }

.id-sug-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.id-sug-chip {
    background: #fff;
    border: 1.5px solid var(--ink-200);
    border-radius: 999px;
    padding: 7px 14px 7px 8px;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.88rem;
    color: var(--ink-900);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all .15s var(--tx);
}
.id-sug-chip:hover {
    border-color: #2c9b6a;
    background: rgba(44,155,106,0.06);
}
.id-sug-chip .chip-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--ink-50);
    border: 1.5px solid var(--ink-200);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.66rem;
    color: var(--ink-500);
    transition: all .15s var(--tx);
}
.id-sug-chip.adopted {
    background: rgba(44,155,106,0.08);
    border-color: #2c9b6a;
    color: var(--ink-900);
}
.id-sug-chip.adopted .chip-icon {
    background: #2c9b6a;
    border-color: #2c9b6a;
    color: #fff;
}

.id-sugs-regen {
    background: none;
    border: none;
    color: var(--brand-500);
    font-family: var(--font-sans);
    font-size: 0.82rem;
    margin-top: 8px;
    padding: 4px 0;
    cursor: pointer;
    font-weight: 500;
}
.id-sugs-regen:hover { text-decoration: underline; }
.id-sugs-regen i { margin-right: 4px; }

/* Add forms */
.id-blocker-add,
.id-custom-add {
    margin-top: 12px;
}
.id-blocker-add button {
    background: #c75c5c;
}
.id-blocker-add button:hover { background: #a44545; }

/* Finish bar */
.id-finish-bar {
    text-align: center;
    padding: 24px 0 8px;
    border-top: 1px solid var(--ink-100);
    margin-top: 24px;
}

/* Stage header (used in both Stage 1 and Stage 2 of Part 9) */
.stage-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.stage-pill {
    background: var(--brand-100);
    color: var(--brand-700);
    border-radius: 999px;
    padding: 6px 14px 6px 10px;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.stage-pill i {
    background: var(--brand-500);
    color: #fff;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.74rem;
    font-style: normal;
}

/* Stage 1 — empty blockers state */
.id-blocker-empty {
    background: var(--ink-50);
    border: 1px dashed var(--ink-200);
    border-radius: var(--r-md);
    padding: 16px;
    text-align: center;
    color: var(--ink-500);
    font-size: 0.9rem;
    margin-bottom: 12px;
}
.id-blocker-row.simple .id-sugs-wrap { display: none; }

/* Stage 2 intro */
.stage2-intro {
    background: var(--ink-50);
    border-radius: var(--r-md);
    padding: 14px 18px;
    margin-bottom: 18px;
}
.stage2-intro p {
    margin: 0;
    color: var(--ink-700);
    font-size: 0.92rem;
    line-height: 1.5;
}

/* Stage 2 sections (one per aspiration that has blockers) */
.id-stage2-section {
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: var(--r-lg);
    padding: 20px 22px;
    margin-bottom: 18px;
    box-shadow: 0 1px 4px rgba(28,15,68,0.03);
}
.id-stage2-section-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px dashed var(--ink-100);
}
.id-stage2-section-head h4 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    margin: 0;
    color: var(--ink-900);
    line-height: 1.3;
    flex: 1;
}

/* Top action bar in Stage 2 — always-visible way back to original questions */
.id-stage2-topbar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    background: var(--ink-50);
    border: 1px solid var(--ink-100);
    border-radius: var(--r-md);
    padding: 10px 14px;
    margin-bottom: 18px;
}
.id-stage2-topbar .btn-secondary { padding: 8px 14px; font-size: 0.92rem; }
.id-stage2-hint {
    color: var(--ink-500);
    font-size: 0.88rem;
}

/* Identity Statement card (top of Stage 2 — the deliverable) */
.id-statement-card {
    background: linear-gradient(135deg, #1D1438 0%, #4D32A8 100%);
    color: #fff;
    border-radius: var(--r-lg);
    padding: 22px 24px;
    margin: 0 0 24px;
    box-shadow: 0 6px 22px rgba(28,15,68,0.18);
    position: relative;
    overflow: hidden;
}
/* Empty state — show a more compact CTA-style card before crafting */
.id-statement-card.is-empty {
    background: linear-gradient(135deg, rgba(29,20,56,0.08), rgba(77,50,168,0.06));
    color: var(--ink-900);
    box-shadow: none;
    border: 1px dashed rgba(107,79,224,0.35);
    padding: 16px 20px;
}
.id-statement-card.is-empty::after { display: none; }
.id-statement-card.is-empty .id-statement-head > i {
    background: rgba(107,79,224,0.15);
    color: var(--brand-700);
}
.id-statement-card.is-empty .id-statement-head h4 { color: var(--ink-900); }
.id-statement-card.is-empty .id-statement-head p { color: var(--ink-500); }
.id-statement-card.is-empty .id-statement-body {
    background: rgba(0,0,0,0.02);
    border-left-color: rgba(107,79,224,0.40);
    color: var(--ink-500);
    font-size: 0.95rem;
}
.id-statement-card.is-empty .id-statement-body:empty::before {
    color: var(--ink-400);
}
.id-statement-card.is-empty .id-statement-actions .btn-primary {
    background: var(--brand-500);
    color: #fff;
}
.id-statement-card.is-empty .id-statement-actions .btn-primary:hover {
    background: var(--brand-700);
}
.id-statement-card::after {
    content: "";
    position: absolute;
    top: -40px;
    right: -40px;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(255,210,80,0.20), transparent 60%);
    pointer-events: none;
}
.id-statement-head {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 14px;
}
.id-statement-head > i {
    background: rgba(255,210,80,0.20);
    color: #ffd250;
    border-radius: 10px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
}
.id-statement-head h4 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: #fff;
    margin: 0 0 4px;
    font-weight: 500;
}
.id-statement-head p {
    color: rgba(255,255,255,0.7);
    font-size: 0.86rem;
    line-height: 1.45;
    margin: 0;
}
.id-statement-body {
    font-family: var(--font-display);
    font-size: 1.25rem;
    line-height: 1.65;
    color: #fff;
    padding: 18px 22px 22px;
    background: rgba(255,255,255,0.06);
    border-left: 3px solid #ffd250;
    border-radius: 0 8px 8px 0;
    margin-bottom: 16px;
    min-height: 48px;
    font-style: italic;
    position: relative;
    z-index: 1;
    letter-spacing: 0.005em;
    white-space: pre-wrap;
}
.id-statement-body br + br { display: block; margin-top: 8px; content: " "; }
.id-statement-body:empty::before {
    content: "Your statement will appear here.";
    color: rgba(255,255,255,0.45);
    font-size: 0.96rem;
    font-style: italic;
}
.id-statement-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    position: relative;
    z-index: 1;
}
.id-statement-actions .btn-primary {
    background: #ffd250;
    color: var(--ink-900);
    font-weight: 600;
}
.id-statement-actions .btn-primary:hover { background: #ffc107; }
.id-statement-actions .btn-primary:disabled { opacity: 0.7; }
.id-statement-actions .btn-secondary {
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.22);
    color: #fff;
}
.id-statement-actions .btn-secondary:hover { background: rgba(255,255,255,0.18); }

#statementEditForm textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: var(--r-md);
    background: rgba(255,255,255,0.96);
    color: var(--ink-900);
    font-family: var(--font-display);
    font-size: 1.05rem;
    line-height: 1.5;
    resize: vertical;
}
#statementEditForm textarea:focus {
    outline: none;
    border-color: #ffd250;
    box-shadow: 0 0 0 3px rgba(255,210,80,0.30);
}
.id-statement-edit-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    justify-content: flex-end;
    align-items: center;
}
.id-statement-edit-actions .btn-text-link { color: rgba(255,255,255,0.7); }
.id-statement-edit-actions .btn-text-link:hover { color: #fff; }
.id-statement-edit-actions .btn-primary {
    background: #ffd250;
    color: var(--ink-900);
}


/* ========================================================
   Part 10 — Create Boundaries / Life Rules
   ======================================================== */

/* Sticky strip of adopted rules at top of workspace */
.lr-rules-strip {
    background: linear-gradient(135deg, #1D1438 0%, #4D32A8 100%);
    color: #fff;
    border-radius: var(--r-lg);
    padding: 20px 22px;
    margin-bottom: 22px;
    box-shadow: 0 4px 18px rgba(28,15,68,0.18);
    position: sticky;
    top: 8px;
    z-index: 5;
    max-height: 50vh;
    overflow-y: auto;
}
.lr-strip-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.lr-strip-head h3 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: #fff;
    margin: 0;
    flex: 1;
}
.lr-strip-count {
    background: rgba(255,255,255,0.16);
    color: #fff;
    border-radius: 999px;
    padding: 2px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    margin-left: 6px;
}
.lr-strip-head .btn-primary {
    background: #ffd250;
    color: var(--ink-900);
    font-size: 0.85rem;
    padding: 8px 14px;
}
.lr-strip-head .btn-primary:hover { background: #ffc107; }

.lr-rules-list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: rules;
}
.lr-rules-empty {
    color: rgba(255,255,255,0.6);
    font-size: 0.9rem;
    font-style: italic;
    padding: 6px 0;
}
.lr-my-rule {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: var(--r-md);
    margin-bottom: 6px;
    counter-increment: rules;
}
.lr-my-rule::before {
    content: counter(rules) ".";
    color: rgba(255,255,255,0.45);
    font-weight: 600;
    font-size: 0.86rem;
    min-width: 22px;
}
.lr-my-rule-tag {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 8px;
    border-radius: 4px;
    flex-shrink: 0;
}
.lr-my-rule-tag.pos { background: rgba(127,217,156,0.20); color: #b9ff9b; }
.lr-my-rule-tag.neg { background: rgba(255,138,138,0.20); color: #ffc4c4; }
.lr-my-rule-text {
    flex: 1;
    color: #fff;
    font-size: 0.94rem;
    line-height: 1.4;
}
.lr-my-rule-tools {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.lr-rule-tool {
    background: none;
    border: none;
    color: rgba(255,255,255,0.55);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    transition: all .15s var(--tx);
    font-size: 0.85rem;
}
.lr-rule-tool:hover { color: #fff; background: rgba(255,255,255,0.10); }
.lr-rule-tool.del:hover { color: #fff; background: var(--error); }

/* Sections (suggestions, custom) */
.lr-section {
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: var(--r-lg);
    padding: 22px 24px;
    margin-bottom: 18px;
    box-shadow: 0 1px 4px rgba(28,15,68,0.03);
}
.lr-section-head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px dashed var(--ink-100);
}
.lr-section-head h3 {
    font-family: var(--font-display);
    font-size: 1.35rem;
    color: var(--ink-900);
    margin: 0;
    flex: 1;
    min-width: 0;
}
.lr-section-head h3 i { color: var(--brand-500); margin-right: 6px; font-size: 0.92em; }
.lr-section-head p {
    flex-basis: 100%;
    margin: 0;
    color: var(--ink-500);
    font-size: 0.9rem;
    line-height: 1.5;
}
.lr-section-head .btn-secondary {
    flex-shrink: 0;
    font-size: 0.82rem;
    padding: 7px 12px;
}

.lr-sugs-empty {
    text-align: center;
    padding: 30px 12px;
    color: var(--ink-500);
    font-size: 0.94rem;
}
.lr-sugs-empty i { color: var(--brand-500); margin-right: 6px; }

/* Suggestion card with two-option pick */
.lr-sug {
    background: var(--ink-50);
    border: 1px solid var(--ink-100);
    border-radius: var(--r-md);
    padding: 14px 16px;
    margin-bottom: 10px;
}
.lr-sug-theme {
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-500);
    margin-bottom: 8px;
}
.lr-sug-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
@media (max-width: 640px) {
    .lr-sug-options { grid-template-columns: 1fr; }
}

.lr-sug-option {
    background: #fff;
    border: 1.5px solid var(--ink-200);
    border-radius: var(--r-md);
    padding: 12px 14px 12px 14px;
    cursor: pointer;
    font-family: var(--font-sans);
    text-align: left;
    transition: all .15s var(--tx);
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap;
    color: var(--ink-900);
    position: relative;
}
.lr-sug-option:hover { border-color: var(--brand-400); }
.lr-sug-tag {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 8px;
    border-radius: 4px;
    flex-shrink: 0;
    margin-top: 1px;
}
.lr-sug-option.pos .lr-sug-tag { background: rgba(44,155,106,0.14); color: #1f6d4a; }
.lr-sug-option.neg .lr-sug-tag { background: rgba(199,92,92,0.14); color: #8a3c3c; }
.lr-sug.trigger-rule .lr-sug-option.pos .lr-sug-tag { background: rgba(107,79,224,0.14); color: var(--brand-700); }
.lr-sug.trigger-rule { border-left: 3px solid var(--brand-500); }
.lr-commandment.trigger {
    font-style: italic;
    color: var(--ink-700);
}

/* Trigger-rule body — template sentence with chooseable alternatives */
.lr-trigger-body { padding: 4px 2px; }
.lr-trigger-template {
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: var(--r-md);
    padding: 12px 14px;
    margin-bottom: 12px;
    font-family: var(--font-display);
    font-size: 1.02rem;
    line-height: 1.55;
    color: var(--ink-900);
}
.lr-tt-piece { color: var(--ink-700); }
.lr-tt-fill {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 4px;
    font-weight: 600;
}
.lr-tt-fill.trigger { background: rgba(212,160,23,0.18); color: #7a5d04; }
.lr-tt-fill.habit { background: rgba(199,92,92,0.16); color: #8a3c3c; }

.lr-alt-help {
    font-size: 0.82rem;
    color: var(--ink-500);
    margin-bottom: 8px;
    font-weight: 500;
}

.lr-alt-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}
.lr-alt-chip {
    background: #fff;
    border: 1.5px solid var(--ink-200);
    border-radius: var(--r-md);
    padding: 8px 12px 8px 8px;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.88rem;
    color: var(--ink-900);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all .15s var(--tx);
}
.lr-alt-chip:hover {
    border-color: #2c9b6a;
    background: rgba(44,155,106,0.04);
}
.lr-alt-check {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--ink-50);
    border: 1.5px solid var(--ink-200);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-400);
    font-size: 0.60rem;
    flex-shrink: 0;
    transition: all .15s var(--tx);
}
.lr-alt-chip.adopted {
    background: rgba(44,155,106,0.08);
    border-color: #2c9b6a;
    color: var(--ink-900);
}
.lr-alt-chip.adopted .lr-alt-check {
    background: #2c9b6a;
    border-color: #2c9b6a;
    color: #fff;
}

.lr-alt-custom-form {
    margin-bottom: 10px;
}
.lr-alt-custom-form input { font-size: 0.88rem; }
.lr-alt-custom-form.adopted input {
    border-color: #2c9b6a;
    background: rgba(44,155,106,0.06);
}
.lr-alt-custom-form.adopted button {
    background: #2c9b6a;
}
.lr-alt-custom-form.adopted button:hover { background: #1f6d4a; }
.lr-alt-custom-confirm {
    font-size: 0.82rem;
    color: #2c9b6a;
    font-weight: 600;
    margin: -4px 0 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.lr-alt-custom-confirm i { font-size: 0.9rem; }

/* Trigger context line — small label showing trigger + habit being interrupted */
.lr-trigger-context {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 0.82rem;
    flex-wrap: wrap;
}

/* Full-sentence positive option cards (replaces template + verb-phrase chips) */
.lr-alt-sentences {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}
.lr-alt-sentence {
    background: #fff;
    border: 1.5px solid var(--ink-200);
    border-radius: var(--r-md);
    padding: 12px 14px;
    cursor: pointer;
    font-family: var(--font-sans);
    text-align: left;
    transition: all .15s var(--tx);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--ink-900);
}
.lr-alt-sentence:hover {
    border-color: #2c9b6a;
    background: rgba(44,155,106,0.04);
}
.lr-alt-sentence-text {
    flex: 1;
    font-size: 0.95rem;
    line-height: 1.45;
}
.lr-alt-sentence .lr-alt-check {
    margin-top: 2px;
    flex-shrink: 0;
}
.lr-alt-sentence.adopted {
    background: rgba(44,155,106,0.08);
    border-color: #2c9b6a;
}
.lr-alt-sentence.adopted .lr-alt-check {
    background: #2c9b6a;
    border-color: #2c9b6a;
    color: #fff;
}


/* ========================================================
   Part 11 — Reprogram Yourself
   ======================================================== */

/* Hero — daily recite call-to-action */
.rp-hero {
    background: linear-gradient(135deg, #1D1438 0%, #4D32A8 100%);
    color: #fff;
    border-radius: var(--r-lg);
    padding: 24px 28px;
    margin-bottom: 22px;
    box-shadow: 0 6px 22px rgba(28,15,68,0.18);
    position: relative;
    overflow: hidden;
}
.rp-hero::after {
    content: "";
    position: absolute;
    top: -50px; right: -50px;
    width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(255,210,80,0.22), transparent 65%);
    pointer-events: none;
}
.rp-hero-head {
    display: flex; gap: 18px; align-items: center; margin-bottom: 18px;
}
.rp-streak {
    display: flex; gap: 12px; align-items: center;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,210,80,0.35);
    border-radius: 14px;
    padding: 10px 16px;
    flex-shrink: 0;
}
.rp-streak > i {
    font-size: 1.6rem; color: #ffd250;
}
.rp-streak-num {
    font-family: var(--font-display);
    font-size: 1.8rem; font-weight: 600; line-height: 1; color: #fff;
}
.rp-streak-label {
    font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em;
    color: rgba(255,255,255,0.7); font-weight: 600;
}
.rp-hero-text h2 {
    font-family: var(--font-display); font-size: 1.6rem; color: #fff;
    margin: 0 0 6px; font-weight: 500;
}
.rp-hero-text p {
    margin: 0; color: rgba(255,255,255,0.78); font-size: 0.95rem; line-height: 1.55;
}
.rp-hero-cta {
    display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
    position: relative; z-index: 1;
}
.rp-begin-btn {
    background: #ffd250; color: var(--ink-900); font-weight: 600; font-size: 1.02rem;
    padding: 12px 22px; border-radius: 999px;
}
.rp-begin-btn:hover { background: #ffc107; }
.rp-begin-btn i { margin-right: 8px; }
.rp-today-status {
    color: rgba(255,255,255,0.7); font-size: 0.86rem;
}
.rp-today-status.done { color: #b9ff9b; }
.rp-today-status i { margin-right: 6px; }

/* Sections */
.rp-section {
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: var(--r-lg);
    padding: 24px 26px;
    margin-bottom: 18px;
    box-shadow: 0 1px 4px rgba(28,15,68,0.03);
}
.rp-section.rp-doubt {
    background: linear-gradient(135deg, rgba(212,160,23,0.06), rgba(212,160,23,0.02));
    border-color: rgba(212,160,23,0.30);
}
.rp-section-head { margin-bottom: 16px; }
.rp-section-head h3 {
    font-family: var(--font-display); font-size: 1.4rem; margin: 0 0 6px;
    color: var(--ink-900); display: flex; align-items: center; gap: 10px;
}
.rp-section-head h3 i { color: var(--brand-500); font-size: 0.92em; }
.rp-section-head p {
    color: var(--ink-500); font-size: 0.92rem; line-height: 1.55; margin: 0;
}
.rp-empty {
    background: var(--ink-50);
    border: 1px dashed var(--ink-200);
    border-radius: var(--r-md);
    padding: 18px; text-align: center; color: var(--ink-500); font-size: 0.9rem;
}
.rp-tip {
    background: rgba(212,160,23,0.10);
    border-left: 3px solid #d4a017;
    padding: 10px 14px;
    margin-top: 12px;
    border-radius: 0 6px 6px 0;
    display: flex; gap: 10px; align-items: flex-start;
    font-size: 0.88rem; color: var(--ink-700); line-height: 1.5;
}
.rp-tip i { color: #d4a017; margin-top: 3px; flex-shrink: 0; }

/* Needs grid for truth declarations */
.rp-needs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
}
.rp-need-card {
    background: var(--ink-50);
    border: 1px solid var(--ink-100);
    border-radius: var(--r-md);
    padding: 16px 18px;
    display: flex; flex-direction: column; gap: 10px;
}
.rp-need-card.has-truth {
    background: rgba(212,160,23,0.05);
    border-color: rgba(212,160,23,0.30);
}
.rp-need-label {
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--ink-500); font-weight: 700;
}
.rp-need-text {
    font-family: var(--font-display); font-size: 1.05rem;
    color: var(--ink-900); line-height: 1.4;
}
.rp-declare-btn {
    align-self: flex-start; font-size: 0.85rem;
    background: var(--brand-500);
}
.rp-truth-block {
    margin-top: 8px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid rgba(212,160,23,0.25);
    border-left: 3px solid #d4a017;
    border-radius: 0 8px 8px 0;
}
.rp-truth-label, .rp-viz-label {
    font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em;
    color: #7a5d04; font-weight: 700; margin-bottom: 6px;
    display: flex; align-items: center; gap: 6px;
}
.rp-viz-label { margin-top: 14px; color: var(--brand-700); }
.rp-truth-text {
    font-family: var(--font-display); font-size: 1.1rem; font-style: italic;
    color: var(--ink-900); line-height: 1.55;
}
.rp-viz-text {
    font-family: var(--font-display); font-size: 0.95rem;
    color: var(--ink-700); line-height: 1.6;
}
.rp-truth-actions {
    display: flex; gap: 14px; margin-top: 12px;
    font-size: 0.78rem;
}

.rp-matrix-link {
    display: inline-flex; align-items: center; gap: 8px;
    text-decoration: none; font-size: 0.92rem;
}

/* Generic add form + list */
.rp-add-form {
    margin-bottom: 12px;
}
.rp-list {
    list-style: none; padding: 0; margin: 0;
}
.rp-list li {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 10px 12px;
    border-bottom: 1px dashed var(--ink-100);
}
.rp-list li:last-child { border-bottom: none; }
.rp-list-date {
    font-size: 0.74rem; color: var(--ink-400); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em;
    min-width: 50px; padding-top: 2px; flex-shrink: 0;
}
.rp-list-text { flex: 1; color: var(--ink-900); line-height: 1.45; font-size: 0.94rem; }
.rp-list-del {
    background: none; border: none; color: var(--ink-300);
    cursor: pointer; padding: 4px 6px; border-radius: 4px;
    font-size: 0.84rem; flex-shrink: 0;
    transition: all .15s var(--tx);
}
.rp-list-del:hover { color: var(--error); background: var(--error-bg); }

/* Telling log */
.rp-telling-form {
    display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px;
}
.rp-telling-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
@media (max-width: 600px) {
    .rp-telling-row { grid-template-columns: 1fr; }
}
.rp-telling-form input,
.rp-telling-form select,
.rp-telling-form textarea {
    padding: 10px 12px;
    border: 1px solid var(--ink-200);
    border-radius: var(--r-md);
    font-family: var(--font-sans); font-size: 0.92rem;
}
.rp-telling-form button { align-self: flex-start; }

.rp-telling-list { list-style: none; padding: 0; margin: 0; }
.rp-tell-item {
    background: var(--ink-50);
    border: 1px solid var(--ink-100);
    border-left: 3px solid var(--ink-200);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    padding: 12px 14px;
    margin-bottom: 8px;
}
.rp-tell-item.resp-supportive { border-left-color: #2c9b6a; background: rgba(44,155,106,0.04); }
.rp-tell-item.resp-neutral    { border-left-color: var(--ink-400); }
.rp-tell-item.resp-negative   { border-left-color: #c75c5c; background: rgba(199,92,92,0.04); }
.rp-tell-head {
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
    margin-bottom: 6px;
}
.rp-tell-head strong { color: var(--ink-900); }
.rp-tell-date {
    font-size: 0.78rem; color: var(--ink-400);
    text-transform: uppercase; letter-spacing: 0.04em;
}
.rp-resp-tag {
    font-size: 0.68rem; font-weight: 700; padding: 2px 8px;
    border-radius: 999px; text-transform: uppercase; letter-spacing: 0.06em;
}
.rp-resp-tag.supportive { background: rgba(44,155,106,0.14); color: #1f6d4a; }
.rp-resp-tag.neutral    { background: var(--ink-100); color: var(--ink-700); }
.rp-resp-tag.negative   { background: rgba(199,92,92,0.14); color: #8a3c3c; }
.rp-tell-body { color: var(--ink-700); font-size: 0.92rem; line-height: 1.5; }

.rp-finish-bar {
    text-align: center;
    padding: 28px 0 12px;
    margin-top: 18px;
    border-top: 1px solid var(--ink-100);
}

/* Recite Mode overlay — distraction-free reading */
.rp-recite-overlay {
    position: fixed; inset: 0;
    background: rgba(13,7,30,0.94);
    backdrop-filter: blur(6px);
    z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.rp-recite-shell {
    width: min(720px, 100%);
    max-height: 92vh;
    background: linear-gradient(180deg, #1D1438 0%, #2a1d5d 100%);
    border-radius: 18px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.5);
    display: flex; flex-direction: column;
    overflow: hidden;
    color: #fff;
}
.rp-recite-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 22px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.rp-recite-step {
    font-family: var(--font-sans); font-size: 0.78rem;
    color: rgba(255,255,255,0.6); letter-spacing: 0.04em;
}
.rp-recite-close {
    background: rgba(255,255,255,0.08); border: none;
    color: rgba(255,255,255,0.8);
    width: 32px; height: 32px; border-radius: 50%;
    cursor: pointer; transition: all .15s var(--tx);
}
.rp-recite-close:hover { background: rgba(255,255,255,0.18); }
.rp-recite-body {
    padding: 36px 32px;
    overflow-y: auto;
    flex: 1;
}
.rp-recite-card { color: #fff; text-align: center; }
.rp-recite-tag {
    font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.10em;
    color: #ffd250; font-weight: 700; margin-bottom: 10px;
}
.rp-recite-title {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 4vw, 1.85rem);
    color: #fff;
    margin: 0 0 18px;
    font-weight: 500;
}
.rp-recite-text {
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 3.4vw, 1.45rem);
    line-height: 1.6;
    color: rgba(255,255,255,0.95);
    font-style: italic;
    max-width: 56ch; margin: 0 auto;
}
.rp-recite-viz {
    margin-top: 22px;
    padding: 16px 18px;
    background: rgba(255,210,80,0.10);
    border: 1px solid rgba(255,210,80,0.30);
    border-radius: 12px;
    color: rgba(255,255,255,0.92);
    font-size: 0.98rem; line-height: 1.6;
    text-align: left;
}
.rp-recite-viz-label {
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em;
    color: #ffd250; font-weight: 700; margin-bottom: 8px;
    display: flex; align-items: center; gap: 6px;
}
.rp-recite-rule {
    text-align: left;
    padding: 12px 16px;
    margin-bottom: 8px;
    background: rgba(255,255,255,0.05);
    border-left: 3px solid rgba(255,255,255,0.20);
    border-radius: 0 8px 8px 0;
    font-family: var(--font-display);
    font-size: 1.02rem; line-height: 1.5;
    color: rgba(255,255,255,0.96);
}
.rp-recite-rule.positive { border-left-color: #b9ff9b; }
.rp-recite-rule.negative { border-left-color: #ffc4c4; }
.rp-recite-card.complete .rp-recite-title { color: #ffd250; }
.rp-recite-foot {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 22px;
    border-top: 1px solid rgba(255,255,255,0.08);
    flex-wrap: wrap; gap: 12px;
}
.rp-recite-foot .btn-secondary {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    color: #fff;
}
.rp-recite-foot .btn-secondary:hover { background: rgba(255,255,255,0.16); }
.rp-recite-foot .btn-secondary:disabled { opacity: 0.4; cursor: not-allowed; }
.rp-recite-foot .btn-primary {
    background: #ffd250; color: var(--ink-900);
}
.rp-recite-foot .btn-primary:hover { background: #ffc107; }
.rp-recite-tip {
    font-size: 0.82rem; color: rgba(255,255,255,0.55);
    display: flex; align-items: center; gap: 6px;
}
.rp-recite-tip i { color: #ffd250; }

/* Recorder strip inside Recite Mode */
.rp-recorder {
    padding: 12px 22px;
    border-top: 1px solid rgba(255,255,255,0.06);
    background: rgba(0,0,0,0.18);
}
.rp-recorder-row {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.rp-mic-btn {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.10);
    border: 1.5px solid rgba(255,255,255,0.20);
    color: #fff;
    cursor: pointer;
    transition: all .15s var(--tx);
    font-size: 1.05rem;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.rp-mic-btn:hover { background: rgba(255,255,255,0.18); }
.rp-mic-btn.recording {
    background: #c75c5c; border-color: #c75c5c;
    animation: micPulse 1.2s infinite;
}
@keyframes micPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(199,92,92,0.55); }
    50% { box-shadow: 0 0 0 10px rgba(199,92,92,0); }
}
.rp-recorder-status {
    flex: 1; min-width: 0; color: rgba(255,255,255,0.65);
    font-size: 0.82rem; line-height: 1.45;
}
.rp-recorder-status i { margin-right: 4px; }
#recitePlayback {
    flex: 1; min-width: 200px;
    background: rgba(255,255,255,0.08);
    border-radius: 24px;
    height: 36px;
}
.rp-recorder-save {
    background: rgba(255,210,80,0.18);
    border: 1px solid rgba(255,210,80,0.40);
    color: #ffd250;
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    transition: all .15s var(--tx);
}
.rp-recorder-save:hover { background: rgba(255,210,80,0.32); }
.rp-recorder-save i { margin-right: 4px; }

.rp-recite-card.tip .rp-recite-text { color: rgba(255,255,255,0.92); font-style: normal; }
.rp-recite-card.tip .rp-recite-title { color: #ffd250; }
.rp-recite-card.iam .rp-recite-text { white-space: pre-wrap; }
.rp-recite-card.lock .rp-recite-tag { color: #ffc4c4; }
.rp-recite-card.need .rp-recite-tag { color: #b9ff9b; }


/* ========================================================
   Part 9 — "I am" recitable traits statement card
   (sits under the main identity statement)
   ======================================================== */
.id-traits-card {
    background: linear-gradient(135deg, rgba(212,160,23,0.10), rgba(212,160,23,0.04));
    border: 1px solid rgba(212,160,23,0.28);
    border-radius: var(--r-lg);
    padding: 20px 22px;
    margin: 0 0 24px;
}
.id-traits-card.is-empty {
    background: var(--ink-50);
    border-color: var(--ink-100);
    border-style: dashed;
}
.id-traits-head {
    display: flex; gap: 12px; align-items: flex-start;
    margin-bottom: 12px;
}
.id-traits-head > i {
    background: rgba(212,160,23,0.18); color: #7a5d04;
    border-radius: 10px;
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; flex-shrink: 0;
}
.id-traits-head h4 {
    font-family: var(--font-display);
    font-size: 1.15rem; margin: 0 0 3px;
    color: var(--ink-900); font-weight: 500;
}
.id-traits-head p {
    color: var(--ink-500); font-size: 0.84rem; line-height: 1.5; margin: 0;
}
.id-traits-body {
    font-family: var(--font-display); font-style: italic;
    font-size: 1.05rem; line-height: 1.6;
    color: var(--ink-900);
    padding: 12px 16px;
    background: rgba(255,255,255,0.7);
    border-left: 3px solid #d4a017;
    border-radius: 0 8px 8px 0;
    margin-bottom: 12px;
    white-space: pre-wrap;
    min-height: 40px;
}
.id-traits-body:empty::before {
    content: "Your I am lines will appear here.";
    color: var(--ink-400);
    font-style: italic;
    font-size: 0.92rem;
}
.id-traits-actions {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.id-traits-actions .btn-secondary { background: #d4a017; color: #fff; border: none; }
.id-traits-actions .btn-secondary:hover { background: #b88912; }
#traitsEditForm textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--ink-200);
    border-radius: var(--r-md);
    font-family: var(--font-display); font-style: italic;
    font-size: 1rem; line-height: 1.55;
    resize: vertical;
}


/* ========================================================
   Part 1 — Signed Commitment view (returning user)
   ======================================================== */
.signed-commitment {
    background:
        radial-gradient(ellipse at top, rgba(212,160,23,0.08), transparent 60%),
        #fdfaf2;
    border: 1px solid rgba(212,160,23,0.22);
    border-radius: var(--r-lg);
    padding: 36px 32px 28px;
    margin: 22px;
    box-shadow: 0 10px 36px rgba(28,15,68,0.08);
    position: relative;
    overflow: hidden;
}
.signed-ribbon {
    position: absolute;
    top: 18px; right: 18px;
    background: var(--brand-500);
    color: #fff;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase;
}
.signed-ribbon i { margin-right: 6px; }
.signed-commitment h3 {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 4vw, 1.9rem);
    color: var(--ink-900);
    margin: 0 0 8px;
    padding-right: 160px;
    line-height: 1.25;
}
.signed-sub {
    color: var(--ink-500); margin: 0 0 16px;
    font-size: 0.92rem; padding-right: 160px;
}
.signed-questions {
    list-style: none; padding: 0; margin: 0 0 22px;
    border-top: 1px dashed rgba(28,15,68,0.12);
}
.signed-q {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 4px;
    border-bottom: 1px dashed rgba(28,15,68,0.10);
    font-size: 0.96rem;
    color: var(--ink-900);
    line-height: 1.45;
}
.signed-q i { font-size: 1.05rem; flex-shrink: 0; width: 20px; text-align: center; }
.signed-q.yes i { color: #2c9b6a; }
.signed-q.no i { color: #c75c5c; }
.signed-q span { flex: 1; line-height: 1.45; }
.signed-signature {
    text-align: center;
    margin: 22px auto 18px;
    max-width: 320px;
}
.signed-sig-label {
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--ink-500); font-weight: 700;
}
.signed-sig-name {
    font-family: var(--font-display); font-size: 1.15rem;
    color: var(--ink-900); margin: 4px 0;
}
.signed-sig-image {
    max-width: 100%; height: auto; max-height: 100px;
    margin-top: 4px;
}
.signed-actions {
    display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
    padding-top: 18px; border-top: 1px solid rgba(28,15,68,0.06);
}
@media (max-width: 700px) {
    .signed-commitment { padding: 24px 18px 20px; }
    .signed-commitment h3, .signed-sub { padding-right: 0; }
    .signed-ribbon { top: 12px; right: 12px; padding: 4px 10px; font-size: 0.62rem; }
}

.lr-trigger-negative { margin-top: 8px; }
.lr-sug-option.full-width { width: 100%; }
.lr-sug-text {
    font-size: 0.92rem;
    line-height: 1.4;
    flex: 1;
    min-width: 0;
}
.lr-sug-check {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid var(--ink-200);
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-300);
    font-size: 0.66rem;
    flex-shrink: 0;
    margin-top: 1px;
    transition: all .15s var(--tx);
}
.lr-sug-option.adopted { border-color: var(--brand-500); background: rgba(107,79,224,0.06); }
.lr-sug-option.pos.adopted { border-color: #2c9b6a; background: rgba(44,155,106,0.06); }
.lr-sug-option.pos.adopted .lr-sug-check { background: #2c9b6a; border-color: #2c9b6a; color: #fff; }
.lr-sug-option.neg.adopted { border-color: #c75c5c; background: rgba(199,92,92,0.06); }
.lr-sug-option.neg.adopted .lr-sug-check { background: #c75c5c; border-color: #c75c5c; color: #fff; }

/* Custom rule form + style toggle */
.lr-custom-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.lr-style-toggle {
    display: inline-flex;
    background: var(--ink-50);
    border: 1px solid var(--ink-200);
    border-radius: var(--r-md);
    padding: 4px;
    gap: 4px;
    align-self: flex-start;
}
.lr-style-btn {
    background: none;
    border: none;
    padding: 8px 16px;
    font-family: var(--font-sans);
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--ink-500);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: all .15s var(--tx);
}
.lr-style-btn:hover { color: var(--ink-700); }
.lr-style-btn.active {
    background: #fff;
    color: var(--brand-500);
    box-shadow: 0 1px 3px rgba(28,15,68,0.08);
}

/* Edit modal */
#editRuleInput {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--ink-200);
    border-radius: var(--r-md);
    font-family: var(--font-sans);
    font-size: 0.92rem;
    resize: vertical;
}

/* ========== Commandments document view ========== */
.lr-document {
    background:
        linear-gradient(180deg, rgba(255,250,235,0.0) 0%, rgba(255,250,235,0.0) 100%),
        radial-gradient(ellipse at top, rgba(212,160,23,0.06), transparent 60%),
        #fdfaf2;
    border: 1px solid rgba(212,160,23,0.20);
    border-radius: var(--r-lg);
    padding: 40px 44px 36px;
    box-shadow: 0 10px 40px rgba(28,15,68,0.10);
    position: relative;
    overflow: hidden;
}
.lr-document::before,
.lr-document::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    max-width: 320px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(28,15,68,0.18), transparent);
}
.lr-document::before { top: 28px; }
.lr-document::after  { bottom: 28px; }

.lr-doc-actions-top {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 18px;
}
.lr-doc-actions-top button {
    font-size: 0.82rem;
    padding: 6px 12px;
}

.lr-doc-header {
    text-align: center;
    margin: 24px 0 36px;
}
.lr-doc-tagline {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--ink-500);
    font-size: 0.96rem;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
    display: block;
}
.lr-doc-header h1 {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 6vw, 3.4rem);
    font-weight: 500;
    color: var(--ink-900);
    margin: 0 0 16px;
    letter-spacing: -0.005em;
    line-height: 1.1;
}
.lr-doc-identity {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--ink-700);
    font-size: 1rem;
    line-height: 1.55;
    max-width: 56ch;
    margin: 0 auto;
    padding: 12px 24px;
    border-top: 1px dashed rgba(28,15,68,0.18);
    border-bottom: 1px dashed rgba(28,15,68,0.18);
}

.lr-commandments {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: cmds;
    max-width: 60ch;
    margin-left: auto;
    margin-right: auto;
}
.lr-commandment {
    counter-increment: cmds;
    display: flex;
    align-items: baseline;
    gap: 18px;
    padding: 18px 8px;
    border-bottom: 1px dashed rgba(28,15,68,0.12);
    font-family: var(--font-display);
    font-size: 1.18rem;
    line-height: 1.55;
    color: var(--ink-900);
}
.lr-commandment:last-child { border-bottom: none; }
.lr-commandment::before {
    content: counter(cmds, upper-roman) ".";
    color: rgba(28,15,68,0.30);
    font-weight: 500;
    font-size: 0.92rem;
    min-width: 48px;
    text-align: right;
    flex-shrink: 0;
    letter-spacing: 0.04em;
}
.lr-cmd-stem {
    font-weight: 600;
    color: var(--brand-700);
    letter-spacing: 0.02em;
    flex-shrink: 0;
}
.lr-commandment.negative .lr-cmd-stem { color: #8a3c3c; }
.lr-cmd-text { flex: 1; }

.lr-doc-actions {
    display: flex;
    justify-content: center;
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1px solid rgba(28,15,68,0.08);
}

/* Print styles — keep only the commandments document */
@media print {
    body * { visibility: hidden; }
    .lr-document, .lr-document * { visibility: visible; }
    .lr-doc-actions-top, .lr-doc-actions { display: none !important; }
    .lr-document {
        position: absolute;
        left: 0; top: 0;
        width: 100%;
        box-shadow: none;
        border: none;
        padding: 20px 30px;
    }
}


/* ========================================================
   Part 7 (Take Action) — Personalized AI suggestions block
   ======================================================== */
.ta-personalized-wrap { margin-bottom: 14px; }
.ta-personalized {
    background: linear-gradient(135deg, rgba(107,79,224,0.06), rgba(107,79,224,0.02));
    border: 1px solid rgba(107,79,224,0.22);
    border-radius: var(--r-md);
    padding: 14px 16px;
    margin-bottom: 12px;
}
.ta-personalized.empty {
    background: var(--ink-50);
    border-color: var(--ink-100);
}
.ta-personalized-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.ta-personalized-head i {
    color: var(--brand-500);
    font-size: 1rem;
}
.ta-personalized-head h5 {
    font-family: var(--font-display);
    font-size: 1.05rem;
    margin: 0;
    color: var(--ink-900);
    font-weight: 500;
}
.ta-pers-loading {
    font-size: 0.78rem;
    color: var(--ink-500);
    margin-left: auto;
}
.ta-pers-loading i { color: var(--brand-500); margin-right: 4px; }
.ta-pers-regen {
    margin-left: auto;
    background: rgba(107,79,224,0.10);
    border: 1px solid rgba(107,79,224,0.20);
    color: var(--brand-700);
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    cursor: pointer;
    transition: all .15s var(--tx);
}
.ta-pers-regen:hover { background: rgba(107,79,224,0.18); }
.ta-pers-regen i { margin-right: 4px; }

/* Library section header */
.ta-library-head {
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-400);
    margin: 4px 0 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ta-library-head i { color: var(--ink-400); font-size: 0.78rem; }

/* AI badge on suggestion chip */
.ta-idea-badge {
    margin-left: auto;
    background: rgba(107,79,224,0.14);
    color: var(--brand-700);
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}
.ta-idea-badge i { margin-right: 3px; font-size: 0.86em; }
.ta-idea.ai-suggested {
    border-color: rgba(107,79,224,0.30);
    background: rgba(107,79,224,0.04);
}
.ta-idea.ai-suggested:hover { border-color: var(--brand-500); }


/* ========================================================
   "View intro" button — appears in the main-header on parts
   that auto-skip the slider after the user has saved state.
   Mirrors the position of .btn-back-nav on the right side.
   ======================================================== */
.btn-view-intro {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.28);
    color: #fff;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 999px;
    cursor: pointer;
    backdrop-filter: blur(4px);
    z-index: 4;
    transition: all .15s var(--tx);
}
.btn-view-intro:hover { background: rgba(255,255,255,0.22); }
.btn-view-intro i { margin-right: 4px; font-size: 0.86em; }
@media (max-width: 600px) {
    .btn-view-intro { top: 10px; right: 10px; font-size: 0.72rem; padding: 5px 10px; }
}



/* ========================================================
   Part 4 v3 — Need reflections + Miracles + My Callings
   ======================================================== */

/* Per-need reflection panel wrapping each path row */
.need-row {
    background: var(--ink-50);
    border: 1px solid var(--ink-100);
    border-radius: var(--r-md);
    padding: 8px;
    margin-bottom: 8px;
    position: relative;
}
.need-row .need-tools {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 1;
    display: flex;
    gap: 4px;
}
.need-row .need-tools button {
    background: rgba(255,255,255,0.92);
    border: 1px solid var(--ink-100);
    border-radius: 8px;
    color: var(--ink-500);
    width: 30px;
    height: 30px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .12s var(--tx);
    font-size: 0.78rem;
}
.need-row .need-tools button:hover { color: var(--ink-900); background: #fff; border-color: var(--ink-200); }
.need-row .need-tools button.del:hover { color: var(--error); border-color: var(--error); }

/* The crafted statement bubble below the path */
.need-statement {
    margin-top: 8px;
    background: linear-gradient(160deg, var(--brand-100) 0%, #fff 70%);
    border: 1px solid var(--brand-400);
    border-radius: var(--r-md);
    padding: 12px 14px;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.02rem;
    line-height: 1.45;
    color: var(--ink-900);
    letter-spacing: -0.005em;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.need-statement::before {
    content: "\f10d"; /* quote-left */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.7em;
    color: var(--brand-500);
    margin-top: 6px;
    flex-shrink: 0;
}
.need-statement.empty {
    background: var(--ink-50);
    border: 1px dashed var(--ink-200);
    color: var(--ink-400);
    font-family: var(--font-sans);
    font-style: italic;
}
.need-statement.empty::before { content: none; }

/* Reflection toggle button */
.btn-reflect {
    background: transparent;
    border: 1px solid var(--ink-200);
    color: var(--ink-500);
    border-radius: 999px;
    padding: 5px 12px;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    transition: background .15s var(--tx), color .15s var(--tx), border-color .15s var(--tx);
}
.btn-reflect:hover { background: var(--brand-100); color: var(--brand-700); border-color: var(--brand-400); }
.btn-reflect.has-statement { color: var(--brand-700); border-color: var(--brand-400); background: var(--brand-100); }

/* Reflection panel itself */
.reflection-panel {
    margin-top: 10px;
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: var(--r-md);
    padding: 14px;
}
.reflection-panel[hidden] { display: none; }
.reflection-panel h5 {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ink-500);
    margin: 0 0 6px;
}
.reflection-panel textarea {
    width: 100%;
    min-height: 60px;
    padding: 11px 14px;
    border: 1px solid var(--ink-200);
    border-radius: var(--r-md);
    font-family: var(--font-sans);
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--ink-900);
    background: var(--ink-50);
    resize: vertical;
    margin-bottom: 12px;
    transition: border-color .15s var(--tx), box-shadow .15s var(--tx);
}
.reflection-panel textarea:focus {
    outline: none;
    background: #fff;
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px rgba(107,79,224,0.10);
}
.reflection-panel .rp-tools {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.reflection-panel .rp-tools button {
    font-size: 0.85rem;
    padding: 8px 14px;
}

/* ---------- Miracles section ---------- */
.miracles-section {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px dashed var(--ink-200);
}
.miracles-section h4 {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ink-500);
    margin: 0 0 4px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.miracles-section h4 i { color: #D9A437; }
.miracles-section .miracle-help {
    font-size: 0.85rem;
    color: var(--ink-500);
    line-height: 1.5;
    margin-bottom: 12px;
}
.miracle-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.miracle-card {
    background: linear-gradient(160deg, #FFF8E5 0%, #fff 70%);
    border: 1px solid #F2DA9C;
    border-left: 4px solid #D9A437;
    border-radius: var(--r-md);
    padding: 14px 38px 14px 16px;
    position: relative;
}
.miracle-card .mc-statement {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.45;
    color: var(--ink-900);
    letter-spacing: -0.005em;
}
.miracle-card .mc-statement::before {
    content: "\f005"; /* star */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.78em;
    color: #D9A437;
    margin-right: 8px;
}
.miracle-card .mc-date {
    font-size: 0.74rem;
    color: var(--ink-400);
    margin-top: 6px;
    font-family: var(--font-sans);
}
.miracle-card .mc-del {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    color: var(--ink-300);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    transition: color .15s var(--tx), background .15s var(--tx);
    font-size: 0.85rem;
}
.miracle-card .mc-del:hover { color: var(--error); background: var(--error-bg); }

.miracle-add-form {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.miracle-add-form input {
    flex: 1;
    padding: 11px 14px;
    border: 1px solid var(--ink-200);
    border-radius: var(--r-md);
    font-family: var(--font-sans);
    font-size: 0.95rem;
    background: #fff;
    color: var(--ink-900);
    min-width: 0;
}
.miracle-add-form input:focus {
    outline: none;
    border-color: #D9A437;
    box-shadow: 0 0 0 3px rgba(217,164,55,0.18);
}
.miracle-add-form button {
    background: #D9A437;
    color: #fff;
    border: none;
    border-radius: var(--r-md);
    padding: 0 14px;
    cursor: pointer;
    font-weight: 600;
    transition: background .15s var(--tx);
    flex-shrink: 0;
    font-size: 0.88rem;
    white-space: nowrap;
}
.miracle-add-form button:hover { background: #9B6D14; }

/* ========================================================
   My Callings (read-only quick view)
   ======================================================== */
.callings-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.calling-block {
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: var(--r-xl);
    padding: 22px;
    box-shadow: var(--shadow-xs);
}
.calling-block .cb-head {
    margin-bottom: 16px;
}
.calling-block .cb-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--brand-500);
    margin-bottom: 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.calling-block .cb-text {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.4rem, 5.2vw, 1.7rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--ink-900);
}
.calling-block .cb-sub-label {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ink-400);
    margin: 14px 0 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.calling-block .cb-statement {
    background: linear-gradient(160deg, var(--brand-100) 0%, #fff 70%);
    border-left: 4px solid var(--brand-500);
    border-radius: var(--r-md);
    padding: 14px 16px;
    margin-bottom: 8px;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.05rem;
    line-height: 1.5;
    color: var(--ink-900);
    letter-spacing: -0.005em;
}
.calling-block .cb-statement.miracle {
    background: linear-gradient(160deg, #FFF8E5 0%, #fff 70%);
    border-left-color: #D9A437;
}
.calling-block .cb-empty {
    color: var(--ink-400);
    font-size: 0.9rem;
    font-style: italic;
    padding: 8px 0;
}


/* ========================================================
   Part 4 v2 — Alignment overview, multi-need form, path visual
   ======================================================== */

/* Overview view */
.alignments-overview {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}
.alignment-card {
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: var(--r-xl);
    padding: 20px;
    position: relative;
    box-shadow: var(--shadow-xs);
}
.alignment-card .ac-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}
.alignment-card .ac-calling-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brand-500);
    margin-bottom: 4px;
}
.alignment-card .ac-calling-text {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.25rem, 4.4vw, 1.5rem);
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--ink-900);
}
.alignment-card .ac-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.alignment-card .ac-actions button {
    background: none;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    color: var(--ink-400);
    cursor: pointer;
    transition: color .15s var(--tx), background .15s var(--tx);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.alignment-card .ac-actions button:hover { color: var(--ink-900); background: var(--ink-50); }
.alignment-card .ac-actions button.del:hover { color: var(--error); background: var(--error-bg); }

.alignment-card .ac-paths-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-400);
    margin: 4px 0 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.alignment-card .ac-paths-label::before,
.alignment-card .ac-paths-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--ink-100);
}

/* The Purpose → Need → Calling path visual */
.align-path {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 12px;
    background: linear-gradient(160deg, var(--ink-50) 0%, #fff 70%);
    border: 1px solid var(--ink-100);
    border-radius: var(--r-md);
    margin-bottom: 8px;
}
.path-station {
    background: #fff;
    border: 1.5px solid var(--ink-200);
    border-radius: var(--r-md);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
}
.path-station .ps-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ink-100);
    color: var(--ink-500);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    flex-shrink: 0;
}
.path-station .ps-meta {
    flex: 1;
    min-width: 0;
}
.path-station .ps-label {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ink-400);
    line-height: 1.2;
    margin-bottom: 2px;
}
.path-station .ps-text {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1rem;
    color: var(--ink-900);
    letter-spacing: -0.005em;
    line-height: 1.3;
    word-break: break-word;
}

/* Variants for each station */
.path-station.purpose {
    background: linear-gradient(135deg, var(--brand-900) 0%, var(--brand-700) 100%);
    border-color: var(--brand-900);
    color: #fff;
}
.path-station.purpose .ps-icon { background: rgba(255,255,255,0.18); color: #fff; }
.path-station.purpose .ps-label { color: rgba(255,255,255,0.72); }
.path-station.purpose .ps-text  { color: #fff; }

.path-station.need    { border-color: #F4E3D7; background: linear-gradient(160deg, #FFF6F0 0%, #fff 60%); }
.path-station.need .ps-icon { background: var(--accent); color: #fff; }

.path-station.calling { border-color: var(--brand-400); background: linear-gradient(160deg, var(--brand-100) 0%, #fff 60%); }
.path-station.calling .ps-icon { background: var(--brand-500); color: #fff; }

/* The connector between stations */
.path-connector {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-300);
    font-size: 0.92rem;
    line-height: 1;
    padding: 0 6px;
}
.path-connector .down  { display: block; }
.path-connector .right { display: none; }

/* On wider screens, render the path as a horizontal row */
@media (min-width: 720px) {
    .align-path {
        grid-template-columns: minmax(0, 1.2fr) auto minmax(0, 1fr) auto minmax(0, 1.4fr);
        gap: 8px;
        align-items: center;
        padding: 14px;
    }
    .path-connector .down  { display: none; }
    .path-connector .right { display: block; font-size: 1.1rem; }
    .path-station {
        height: 100%;
    }
}

/* "Add need" footer inside an alignment card */
.alignment-card .ac-add-need-form {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}
.alignment-card .ac-add-need-form input {
    flex: 1;
    padding: 11px 14px;
    border: 1px solid var(--ink-200);
    border-radius: var(--r-md);
    font-family: var(--font-sans);
    font-size: 0.95rem;
    background: var(--ink-50);
    color: var(--ink-900);
    min-width: 0;
}
.alignment-card .ac-add-need-form input:focus {
    outline: none;
    background: #fff;
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px rgba(107,79,224,0.10);
}
.alignment-card .ac-add-need-form button {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--r-md);
    padding: 0 14px;
    cursor: pointer;
    font-weight: 600;
    transition: background .15s var(--tx);
    flex-shrink: 0;
    font-size: 0.88rem;
    white-space: nowrap;
}
.alignment-card .ac-add-need-form button:hover { background: var(--accent-dk); }

/* Multi-need form list (builder) */
.needs-fields-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.need-field-row {
    display: flex;
    gap: 6px;
    align-items: stretch;
}
.need-field-row textarea {
    flex: 1;
    min-height: 56px;
    padding: 12px 14px;
    border: 1.5px solid var(--ink-200);
    border-radius: var(--r-md);
    font-family: var(--font-sans);
    font-size: 0.98rem;
    line-height: 1.4;
    color: var(--ink-900);
    background: #fff;
    resize: vertical;
    transition: border-color .15s var(--tx), box-shadow .15s var(--tx);
}
.need-field-row textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(232,132,92,0.14);
}
.need-field-row .nfr-remove {
    background: #fff;
    color: var(--ink-300);
    border: 1.5px solid var(--ink-200);
    border-radius: var(--r-md);
    width: 40px;
    cursor: pointer;
    flex-shrink: 0;
    transition: color .15s var(--tx), border-color .15s var(--tx), background .15s var(--tx);
    font-size: 0.92rem;
}
.need-field-row .nfr-remove:hover { color: var(--error); border-color: var(--error); background: var(--error-bg); }

.btn-add-need {
    background: var(--ink-50);
    border: 1px dashed var(--ink-300);
    color: var(--ink-700);
    padding: 11px 14px;
    border-radius: var(--r-md);
    cursor: pointer;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.9rem;
    transition: background .15s var(--tx), border-color .15s var(--tx);
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn-add-need:hover { background: var(--brand-100); border-color: var(--brand-400); color: var(--brand-700); }

/* Header for the overview action row */
.overview-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 6px;
}
.overview-actions .btn-primary,
.overview-actions .btn-secondary { flex: 1 1 auto; min-width: 160px; }


/* ========================================================
   Part 6 — Take Action v2 (per-lock wizard)
   ======================================================== */
.ta-card {
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: var(--r-xl);
    padding: 22px 20px 20px;
    box-shadow: var(--shadow-xs);
}
.ta-card .ta-lock-tag {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--brand-500);
    background: var(--brand-100);
    padding: 4px 11px;
    border-radius: 999px;
    margin-bottom: 10px;
}
.ta-card h3 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.4rem, 5.2vw, 1.8rem);
    letter-spacing: -0.01em;
    color: var(--ink-900);
    margin: 0 0 18px;
    line-height: 1.2;
}

.ta-section {
    margin-bottom: 22px;
}
.ta-section-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.ta-step-num {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--ink-100);
    color: var(--ink-500);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.78rem;
    flex-shrink: 0;
    transition: background .15s var(--tx), color .15s var(--tx);
}
.ta-section.done .ta-step-num {
    background: var(--success);
    color: #fff;
}
.ta-section.done .ta-step-num::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.72em;
}
.ta-section.done .ta-step-num span { display: none; }
.ta-section-head h4 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.1rem;
    letter-spacing: -0.005em;
    color: var(--ink-900);
    margin: 0;
}
.ta-section-help {
    color: var(--ink-500);
    font-size: 0.88rem;
    line-height: 1.5;
    margin: 0 0 10px 36px;
}

.ta-textarea {
    width: 100%;
    min-height: 110px;
    margin-left: 0;
    padding: 14px 16px;
    border: 1.5px solid var(--ink-200);
    border-radius: var(--r-md);
    font-family: var(--font-sans);
    font-size: 0.98rem;
    line-height: 1.55;
    color: var(--ink-900);
    background: var(--ink-50);
    resize: vertical;
    transition: border-color .15s var(--tx), box-shadow .15s var(--tx), background .15s var(--tx);
}
.ta-textarea:focus {
    outline: none;
    background: #fff;
    border-color: var(--brand-500);
    box-shadow: 0 0 0 4px rgba(107,79,224,0.12);
}
.ta-save-hint {
    font-size: 0.78rem;
    color: var(--ink-400);
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ta-save-hint.saved { color: var(--success); }

/* Idea chips */
.ta-idea-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 4px;
}
.ta-idea {
    background: #fff;
    border: 1.5px solid var(--ink-100);
    border-radius: var(--r-md);
    padding: 12px 14px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    transition: border-color .15s var(--tx), background .15s var(--tx), transform .12s var(--tx);
    font-size: 0.95rem;
}
.ta-idea:hover { border-color: var(--brand-400); transform: translateX(2px); }
.ta-idea.added {
    background: var(--brand-100);
    border-color: var(--brand-400);
}
.ta-idea .ta-idea-check {
    width: 22px;
    height: 22px;
    min-width: 22px;
    border-radius: 6px;
    border: 2px solid var(--ink-300);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
    color: transparent;
    transition: all .12s var(--tx);
    font-size: 0.7rem;
}
.ta-idea.added .ta-idea-check {
    background: var(--brand-500);
    border-color: var(--brand-500);
    color: #fff;
}
.ta-idea .ta-idea-text {
    flex: 1;
    color: var(--ink-700);
    line-height: 1.4;
    word-break: break-word;
}
.ta-idea.added .ta-idea-text { color: var(--ink-900); }
.ta-idea.custom .ta-idea-text::after {
    content: "Yours";
    margin-left: 8px;
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--ink-400);
    background: var(--ink-100);
    padding: 2px 7px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    vertical-align: middle;
}
.ta-idea.added.custom .ta-idea-text::after {
    color: var(--brand-700);
    background: rgba(255,255,255,0.6);
}
.ta-idea-delete {
    background: none;
    border: none;
    color: var(--ink-300);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 0.9rem;
    flex-shrink: 0;
}
.ta-idea-delete:hover { color: var(--error); background: var(--error-bg); }

.ta-add-idea {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}
.ta-add-idea input {
    flex: 1;
    padding: 11px 14px;
    border: 1px solid var(--ink-200);
    border-radius: var(--r-md);
    font-family: var(--font-sans);
    font-size: 0.95rem;
    background: var(--ink-50);
    color: var(--ink-900);
    min-width: 0;
}
.ta-add-idea input:focus {
    outline: none;
    background: #fff;
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px rgba(107,79,224,0.10);
}
.ta-add-idea button {
    background: var(--brand-500);
    color: #fff;
    border: none;
    border-radius: var(--r-md);
    padding: 0 16px;
    cursor: pointer;
    font-weight: 600;
    transition: background .15s var(--tx);
    flex-shrink: 0;
}
.ta-add-idea button:hover { background: var(--brand-700); }

.ta-ideas-tail {
    font-size: 0.82rem;
    color: var(--ink-500);
    margin-top: 12px;
    padding: 10px 12px;
    background: var(--brand-100);
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    gap: 8px;
}
.ta-ideas-tail i { color: var(--brand-500); }

/* Wizard progress strip — reused .quiz-progress from Part 5 */

/* ========================================================
   Life List — Ideas tab + lock context
   ======================================================== */
.ll-tabs {
    display: inline-flex;
    background: var(--ink-100);
    padding: 4px;
    border-radius: 999px;
    margin-bottom: 18px;
    gap: 2px;
}
.ll-tab {
    background: transparent;
    border: none;
    padding: 8px 16px;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ink-500);
    cursor: pointer;
    transition: background .15s var(--tx), color .15s var(--tx);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ll-tab .tab-count {
    background: rgba(0,0,0,0.08);
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 0.72rem;
}
.ll-tab.active {
    background: #fff;
    color: var(--ink-900);
    box-shadow: var(--shadow-xs);
}
.ll-tab.active .tab-count { background: var(--brand-100); color: var(--brand-700); }

/* Idea items — derived from .ll-item with a yellow accent */
.ll-item.idea {
    border-left: 4px solid #E0A52A;
    background: linear-gradient(160deg, #FFFBF1 0%, #fff 80%);
}
.ll-item.idea .ll-title { color: var(--ink-900); }
.ll-item .ll-promote {
    background: var(--brand-500);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 7px 14px;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background .15s var(--tx), transform .12s var(--tx);
    flex-shrink: 0;
    white-space: nowrap;
}
.ll-item .ll-promote:hover { background: var(--brand-700); transform: translateX(2px); }

/* Lock tag with name (used in both tabs) */
.ll-tag.lock-named {
    background: var(--brand-100);
    color: var(--brand-700);
}

/* Group header for ideas-by-lock */
.idea-group-head {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ink-500);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin: 18px 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--ink-100);
}
.idea-group-head:first-child { margin-top: 0; }


/* ========================================================
   4K Meter — wellbeing snapshot (Hope / Security / Value / Connection)
   ======================================================== */

/* Hero scores grid (top of page) */
.meter-hero {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 18px;
}
.score-tile {
    background: linear-gradient(160deg, #fff 0%, var(--ink-50) 100%);
    border: 1px solid var(--ink-100);
    border-radius: var(--r-lg);
    padding: 14px 14px 12px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.score-tile.hope       { background: linear-gradient(160deg, #FFF8E5 0%, #fff 60%); border-color: #F2DA9C; }
.score-tile.security   { background: linear-gradient(160deg, #E8F5EC 0%, #fff 60%); border-color: #BCE5CC; }
.score-tile.value      { background: linear-gradient(160deg, var(--brand-100) 0%, #fff 60%); border-color: var(--brand-400); }
.score-tile.connection { background: linear-gradient(160deg, #FFEEE7 0%, #fff 60%); border-color: #F4BFA5; }

.score-tile .st-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ink-500);
    margin-bottom: 4px;
}
.score-tile .st-value {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2rem, 8vw, 2.6rem);
    line-height: 1.05;
    color: var(--ink-900);
    letter-spacing: -0.02em;
}
.score-tile .st-value span { color: var(--ink-300); font-size: 0.55em; margin-left: 1px; }
/* Dimension tint kept on the tile background, but the NUMBER is colored
   by the score value via .score-low/.score-mid/.score-good/.score-high.
   See generic score-* rules at the bottom of this section. */

.score-tile .st-delta {
    font-size: 0.7rem;
    color: var(--ink-400);
    margin-top: 4px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.score-tile .st-delta.up   { color: var(--success); }
.score-tile .st-delta.down { color: var(--error); }

/* Last assessed strip */
.last-assessed {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    background: var(--ink-50);
    border: 1px solid var(--ink-100);
    border-radius: var(--r-md);
    padding: 10px 14px;
    margin-bottom: 18px;
    flex-wrap: wrap;
    font-size: 0.88rem;
    color: var(--ink-500);
}
.last-assessed strong { color: var(--ink-900); font-weight: 600; }

/* Chart card wrapper */
.chart-card {
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: var(--r-lg);
    padding: 16px;
    margin-bottom: 18px;
    box-shadow: var(--shadow-xs);
}
.chart-card h4 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.15rem;
    color: var(--ink-900);
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}
.chart-card .chart-sub {
    font-size: 0.86rem;
    color: var(--ink-500);
    margin-bottom: 14px;
}
.chart-canvas-wrap {
    position: relative;
    width: 100%;
    /* Default mobile-friendly aspect */
    height: 280px;
}
.chart-canvas-wrap.tall { height: 320px; }

/* AI insights */
.insight-card {
    background: linear-gradient(160deg, var(--brand-100) 0%, #fff 80%);
    border: 1px solid var(--brand-400);
    border-radius: var(--r-md);
    padding: 14px 16px;
    margin-bottom: 10px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.insight-card .insight-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--brand-500);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.9rem;
}
.insight-card .insight-title {
    font-weight: 600;
    color: var(--ink-900);
    margin-bottom: 3px;
    font-size: 0.98rem;
}
.insight-card .insight-body {
    font-size: 0.9rem;
    color: var(--ink-700);
    line-height: 1.5;
}

.btn-generate-insights {
    background: #fff;
    border: 1px dashed var(--brand-400);
    color: var(--brand-700);
    padding: 10px 16px;
    border-radius: 999px;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background .15s var(--tx);
}
.btn-generate-insights:hover { background: var(--brand-100); }
.btn-generate-insights:disabled { opacity: 0.6; cursor: not-allowed; }

/* Assessment form */
.assess-card {
    background: #fff;
    border: 1px solid var(--ink-100);
    border-left: 4px solid var(--brand-500);
    border-radius: var(--r-lg);
    padding: 18px;
    margin-bottom: 14px;
    box-shadow: var(--shadow-xs);
}
.assess-card.dim-hope       { border-left-color: #D9A437; }
.assess-card.dim-security   { border-left-color: var(--success); }
.assess-card.dim-value      { border-left-color: var(--brand-500); }
.assess-card.dim-connection { border-left-color: var(--accent); }

.assess-card h4 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.3rem;
    color: var(--ink-900);
    letter-spacing: -0.01em;
    margin-bottom: 4px;
}
.assess-card .assess-blurb {
    color: var(--ink-500);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 14px;
}

/* 1-10 picker */
.scale-row {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 5px;
    margin-bottom: 6px;
}
.scale-btn {
    aspect-ratio: 1 / 1;
    border: 1.5px solid var(--ink-200);
    background: #fff;
    color: var(--ink-700);
    border-radius: 8px;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.92rem;
    cursor: pointer;
    transition: all .12s var(--tx);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.scale-btn:hover { border-color: var(--brand-400); transform: translateY(-1px); }
.scale-btn.selected {
    background: var(--brand-500);
    color: #fff;
    border-color: var(--brand-500);
    box-shadow: 0 4px 12px rgba(107,79,224,0.25);
}
.dim-hope .scale-btn.selected       { background: #D9A437; border-color: #D9A437; }
.dim-security .scale-btn.selected   { background: var(--success); border-color: var(--success); }
.dim-connection .scale-btn.selected { background: var(--accent); border-color: var(--accent); }

.scale-legend {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    color: var(--ink-400);
    margin-bottom: 12px;
    font-weight: 500;
}

.notes-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--ink-200);
    border-radius: var(--r-md);
    font-family: var(--font-sans);
    font-size: 0.95rem;
    line-height: 1.5;
    resize: vertical;
    min-height: 70px;
    background: var(--ink-50);
    color: var(--ink-900);
    transition: border-color .15s var(--tx), box-shadow .15s var(--tx);
}
.notes-input:focus {
    outline: none;
    background: #fff;
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px rgba(107,79,224,0.10);
}

/* Past assessment history */
.history-card {
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: var(--r-md);
    padding: 14px 16px;
    margin-bottom: 8px;
    transition: border-color .15s var(--tx), background .15s var(--tx);
}
.history-card .hc-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.history-card .hc-date {
    font-weight: 600;
    color: var(--ink-700);
    font-size: 0.94rem;
}
.history-card .hc-scores {
    display: inline-flex;
    gap: 5px;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--ink-500);
}
.history-card .hc-scores span {
    background: var(--ink-100);
    padding: 2px 7px;
    border-radius: 999px;
    color: var(--ink-700);
}
.history-card .hc-toggle {
    color: var(--ink-300);
    transition: transform .2s var(--tx);
}
.history-card.open .hc-toggle { transform: rotate(180deg); }
.history-card .hc-detail {
    border-top: 1px solid var(--ink-100);
    margin-top: 12px;
    padding-top: 12px;
    display: none;
}
.history-card.open .hc-detail { display: block; }
.history-card .hc-dim {
    margin-bottom: 12px;
    font-size: 0.92rem;
}
.history-card .hc-dim .dim-name {
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-400);
    margin-right: 8px;
}
.history-card .hc-dim .dim-score { font-weight: 700; color: var(--ink-900); }
.history-card .hc-dim .dim-notes {
    color: var(--ink-700);
    margin-top: 4px;
    line-height: 1.5;
    white-space: pre-wrap;
}

/* Empty state */
.meter-empty {
    background: var(--ink-50);
    border: 1px dashed var(--ink-200);
    border-radius: var(--r-lg);
    padding: 32px 18px;
    text-align: center;
    color: var(--ink-500);
}
.meter-empty .icon {
    font-size: 2.2rem;
    color: var(--brand-400);
    margin-bottom: 10px;
}
.meter-empty strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.3rem;
    color: var(--ink-900);
    margin-bottom: 6px;
}

/* Dashboard mini-meter widget */
.mini-meter {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-bottom: 10px;
}
.mini-meter .mm-cell {
    background: var(--ink-50);
    border-radius: 8px;
    padding: 8px 4px;
    text-align: center;
}
.mini-meter .mm-cell.hope       { background: #FFF8E5; }
.mini-meter .mm-cell.security   { background: #E8F5EC; }
.mini-meter .mm-cell.value      { background: var(--brand-100); }
.mini-meter .mm-cell.connection { background: #FFEEE7; }
.mini-meter .mm-val {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.3rem;
    color: var(--ink-900);
    line-height: 1;
    letter-spacing: -0.02em;
}
.mini-meter .mm-lbl {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--ink-500);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 4px;
}

@media (min-width: 640px) {
    .meter-hero { grid-template-columns: repeat(4, 1fr); }
}

/* ----- Score-by-value color coding (1-10) -----
   Buckets:
     1-3  → low   (red)
     4-5  → mid   (amber)
     6-7  → good  (light green)
     8-10 → high  (deep green)
   Apply via PHP/JS helper that emits one of: score-low | score-mid | score-good | score-high
*/
:root {
    --score-low:    #DB4F4F;
    --score-mid:    #E0A52A;
    --score-good:   #5BA85C;
    --score-high:   #2BB673;
    --score-low-bg:    #FBE9E9;
    --score-mid-bg:    #FFF6E7;
    --score-good-bg:   #E5F6EE;
    --score-high-bg:   #DFF4E8;
}

/* Hero score tiles — the big number */
.st-value.score-low   { color: var(--score-low);  }
.st-value.score-mid   { color: var(--score-mid);  }
.st-value.score-good  { color: var(--score-good); }
.st-value.score-high  { color: var(--score-high); }

/* Mini-meter on dashboard */
.mm-val.score-low   { color: var(--score-low);  }
.mm-val.score-mid   { color: var(--score-mid);  }
.mm-val.score-good  { color: var(--score-good); }
.mm-val.score-high  { color: var(--score-high); }

/* History row pills (H 7, S 4 …) */
.hc-scores span.score-low   { background: var(--score-low-bg);   color: var(--score-low);  }
.hc-scores span.score-mid   { background: var(--score-mid-bg);   color: #9B6D14;           }
.hc-scores span.score-good  { background: var(--score-good-bg);  color: #1F8A56;           }
.hc-scores span.score-high  { background: var(--score-high-bg);  color: #1F8A56;           }

/* Scale buttons in the assessment form — selected state by score level */
.scale-btn.selected.score-low   { background: var(--score-low);   border-color: var(--score-low);   color: #fff; box-shadow: 0 4px 12px rgba(219,79,79,0.30);  }
.scale-btn.selected.score-mid   { background: var(--score-mid);   border-color: var(--score-mid);   color: #fff; box-shadow: 0 4px 12px rgba(224,165,42,0.30); }
.scale-btn.selected.score-good  { background: var(--score-good);  border-color: var(--score-good);  color: #fff; box-shadow: 0 4px 12px rgba(91,168,92,0.30);  }
.scale-btn.selected.score-high  { background: var(--score-high);  border-color: var(--score-high);  color: #fff; box-shadow: 0 4px 12px rgba(43,182,115,0.30); }

/* Override the dimension-tinted selected state when score class is present */
.dim-hope       .scale-btn.selected[class*="score-"],
.dim-security   .scale-btn.selected[class*="score-"],
.dim-value      .scale-btn.selected[class*="score-"],
.dim-connection .scale-btn.selected[class*="score-"] {
    /* score-* color wins — no override needed, this just bumps specificity */
}

/* In-card dim-score in history */
.hc-dim .dim-score.score-low   { color: var(--score-low);  }
.hc-dim .dim-score.score-mid   { color: #9B6D14;           }
.hc-dim .dim-score.score-good  { color: #1F8A56;           }
.hc-dim .dim-score.score-high  { color: #1F8A56;           }


/* ========================================================
   Part 6 — Take Action (action plan per confirmed lock)
   ======================================================== */
.lock-action-card {
    background: #fff;
    border: 1px solid var(--ink-100);
    border-left: 4px solid var(--brand-500);
    border-radius: var(--r-lg);
    padding: 18px 18px 16px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-xs);
}
.lock-action-card .lac-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 4px;
}
.lock-action-card h3 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.2rem, 4.4vw, 1.45rem);
    color: var(--ink-900);
    letter-spacing: -0.01em;
    line-height: 1.25;
    margin: 0;
    flex: 1;
}
.lac-chosen-count {
    background: var(--brand-100);
    color: var(--brand-700);
    border-radius: 999px;
    padding: 4px 11px;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    white-space: nowrap;
    flex-shrink: 0;
}
.lac-chosen-count.zero { background: var(--ink-100); color: var(--ink-400); }
.lac-hint {
    color: var(--ink-500);
    font-size: 0.92rem;
    line-height: 1.5;
    margin-bottom: 16px;
}
.lac-section-title {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ink-400);
    margin: 14px 0 8px;
}

/* Toggleable action rows */
.action-list { display: flex; flex-direction: column; gap: 6px; }
.action-item {
    background: #fff;
    border: 1.5px solid var(--ink-100);
    border-radius: var(--r-md);
    padding: 12px 14px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    transition: border-color .15s var(--tx), background .15s var(--tx), transform .12s var(--tx);
}
.action-item:hover { border-color: var(--brand-400); transform: translateX(2px); }
.action-item.chosen {
    background: var(--brand-100);
    border-color: var(--brand-400);
}
.action-check {
    width: 22px;
    height: 22px;
    min-width: 22px;
    border-radius: 6px;
    border: 2px solid var(--ink-300);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: transparent;
    margin-top: 1px;
    transition: all .12s var(--tx);
    font-size: 0.7rem;
}
.action-item.chosen .action-check {
    background: var(--brand-500);
    border-color: var(--brand-500);
    color: #fff;
}
.action-text {
    flex: 1;
    font-size: 0.95rem;
    color: var(--ink-700);
    line-height: 1.4;
    word-break: break-word;
}
.action-item.chosen .action-text { color: var(--ink-900); }
.action-item.custom .action-text::after {
    content: "Yours";
    margin-left: 8px;
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--ink-400);
    background: var(--ink-100);
    padding: 2px 7px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    vertical-align: middle;
}
.action-item.custom.chosen .action-text::after {
    color: var(--brand-700);
    background: rgba(255,255,255,0.6);
}
.action-item .action-delete {
    background: none;
    border: none;
    color: var(--ink-300);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 0.9rem;
    transition: color .15s var(--tx), background .15s var(--tx);
    flex-shrink: 0;
}
.action-item .action-delete:hover { color: var(--error); background: var(--error-bg); }

/* Custom add form */
.lac-add-form {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}
.lac-add-form input {
    flex: 1;
    padding: 11px 14px;
    border: 1px solid var(--ink-200);
    border-radius: var(--r-md);
    font-family: var(--font-sans);
    font-size: 0.95rem;
    background: var(--ink-50);
    color: var(--ink-900);
    transition: border-color .15s var(--tx), box-shadow .15s var(--tx);
    min-width: 0;
}
.lac-add-form input:focus {
    outline: none;
    background: #fff;
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px rgba(107,79,224,0.10);
}
.lac-add-form button {
    background: var(--brand-500);
    color: #fff;
    border: none;
    border-radius: var(--r-md);
    padding: 0 16px;
    cursor: pointer;
    font-weight: 600;
    transition: background .15s var(--tx);
    flex-shrink: 0;
}
.lac-add-form button:hover { background: var(--brand-700); }

/* "Why are no locks shown" empty state */
.no-locks-state {
    background: var(--ink-50);
    border: 1px dashed var(--ink-200);
    border-radius: var(--r-lg);
    padding: 28px 18px;
    text-align: center;
    color: var(--ink-500);
}
.no-locks-state strong {
    display: block;
    margin-bottom: 6px;
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--ink-700);
}


/* ========================================================
   Life List — daily todo with date navigation
   ======================================================== */
.ll-date-strip {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: var(--r-lg);
    padding: 10px 14px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-xs);
}
.ll-date-arrow {
    background: var(--ink-50);
    border: 1px solid var(--ink-100);
    color: var(--ink-700);
    border-radius: 50%;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s var(--tx), border-color .15s var(--tx);
}
.ll-date-arrow:hover { background: var(--brand-100); border-color: var(--brand-400); color: var(--brand-700); }
.ll-date-arrow:disabled { opacity: 0.4; cursor: not-allowed; }

.ll-date-main {
    flex: 1;
    text-align: center;
    line-height: 1.2;
}
.ll-date-day {
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--ink-900);
    letter-spacing: -0.005em;
}
.ll-date-sub {
    font-size: 0.72rem;
    color: var(--ink-400);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-weight: 700;
    margin-top: 2px;
}
.ll-date-sub.today { color: var(--brand-500); }

.btn-today {
    background: var(--brand-100);
    color: var(--brand-700);
    border: 1px solid var(--brand-400);
    border-radius: 999px;
    padding: 7px 13px;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s var(--tx);
    flex-shrink: 0;
}
.btn-today:hover { background: var(--brand-400); color: #fff; }

/* Quick add input */
.ll-add-form {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
}
.ll-add-form input {
    flex: 1;
    padding: 13px 16px;
    border: 1.5px solid var(--ink-200);
    border-radius: var(--r-md);
    font-family: var(--font-sans);
    font-size: 1rem;
    background: #fff;
    color: var(--ink-900);
    transition: border-color .15s var(--tx), box-shadow .15s var(--tx);
    min-width: 0;
}
.ll-add-form input:focus {
    outline: none;
    border-color: var(--brand-500);
    box-shadow: 0 0 0 4px rgba(107,79,224,0.12);
}
.ll-add-form button {
    background: var(--brand-500);
    color: #fff;
    border: none;
    border-radius: var(--r-md);
    padding: 0 18px;
    cursor: pointer;
    font-weight: 600;
    transition: background .15s var(--tx);
    flex-shrink: 0;
    min-width: 50px;
}
.ll-add-form button:hover { background: var(--brand-700); }

/* Summary banner */
.ll-summary {
    background: var(--brand-100);
    border-radius: var(--r-md);
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 0.88rem;
    color: var(--brand-900);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.ll-summary.complete { background: var(--success-bg); color: #1F8A56; }

/* Item rows */
.ll-list { display: flex; flex-direction: column; gap: 8px; }
.ll-item {
    background: #fff;
    border: 1.5px solid var(--ink-100);
    border-radius: var(--r-md);
    padding: 12px 12px 12px 14px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    transition: border-color .15s var(--tx), background .15s var(--tx);
    position: relative;
}
.ll-item:hover { border-color: var(--brand-400); }
.ll-item.done {
    background: var(--success-bg);
    border-color: #BCE5CC;
}
.ll-item.done .ll-title { text-decoration: line-through; color: var(--ink-400); }

.ll-check {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    border: 2px solid var(--ink-300);
    flex-shrink: 0;
    margin-top: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    transition: all .12s var(--tx);
    font-size: 0.78rem;
    background: #fff;
    cursor: pointer;
}
.ll-check:hover { border-color: var(--brand-500); }
.ll-item.done .ll-check {
    background: var(--success);
    border-color: var(--success);
    color: #fff;
}

.ll-body { flex: 1; min-width: 0; }
.ll-title {
    font-size: 0.98rem;
    font-weight: 500;
    color: var(--ink-900);
    line-height: 1.35;
    word-break: break-word;
}
.ll-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
    align-items: center;
}
.ll-tag {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--ink-100);
    color: var(--ink-500);
}
.ll-tag.alignment, .ll-tag.calling { background: var(--brand-100); color: var(--brand-700); }
.ll-tag.lock      { background: var(--error-bg); color: var(--error); }
.ll-tag.purpose   { background: #FFF6E7; color: #9B6D14; }
.ll-tag.habit     { background: var(--success-bg); color: #1F8A56; }
.ll-tag.reprogram         { background: #ede9fe; color: #5b21b6; }
.ll-tag.gratitude_journal { background: #ffe4e6; color: #9f1239; }
.ll-goto {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--brand-500);
    color: #fff;
    text-decoration: none;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
    transition: background 0.15s ease;
    margin-left: auto;
}
.ll-goto:hover { background: var(--brand-700); color: #fff; text-decoration: none; }
.ll-goto i { font-size: 0.72rem; }
.ll-tag-recur {
    font-size: 0.66rem;
    color: var(--ink-400);
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.ll-actions {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
    align-self: flex-start;
}
.ll-actions button {
    background: none;
    border: none;
    color: var(--ink-300);
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 6px;
    transition: color .15s var(--tx), background .15s var(--tx);
    font-size: 0.9rem;
}
.ll-actions button:hover { color: var(--brand-500); background: var(--brand-100); }
.ll-actions button.del:hover { color: var(--error); background: var(--error-bg); }

/* Empty state */
.ll-empty {
    background: var(--ink-50);
    border: 1px dashed var(--ink-200);
    border-radius: var(--r-lg);
    padding: 36px 18px;
    text-align: center;
    color: var(--ink-500);
}
.ll-empty .icon {
    font-size: 2rem;
    color: var(--ink-300);
    margin-bottom: 10px;
}
.ll-empty p { margin-top: 6px; font-size: 0.95rem; }
.ll-empty strong { color: var(--ink-700); display: block; margin-bottom: 4px; font-family: var(--font-display); font-size: 1.15rem; font-weight: 400; }

/* Edit modal body */
.ll-edit-modal .notification-content { text-align: left; max-width: 460px; }
.ll-edit-modal .notification-content h3 { text-align: center; margin-bottom: 16px; }
.ll-edit-modal .form-group { max-width: 100%; }
.ll-edit-modal .recur-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: var(--ink-50);
    border-radius: var(--r-md);
    margin: 10px 0 16px;
}
.ll-edit-modal .recur-row label {
    margin: 0;
    flex: 1;
    font-weight: 500;
    color: var(--ink-700);
    cursor: pointer;
}
.ll-edit-modal .recur-row .recur-sub {
    font-size: 0.8rem;
    color: var(--ink-400);
    margin-top: 2px;
}
.ll-edit-modal input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--brand-500); cursor: pointer; }
.ll-edit-modal .button-row {
    display: flex;
    gap: 8px;
    margin-top: 18px;
    justify-content: flex-end;
}


/* ========================================================
   Part 5 — Discover Your Locks (quiz + report)
   ======================================================== */
.quiz-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
    font-size: 0.82rem;
    color: var(--ink-500);
}
.quiz-progress .bar {
    flex: 1;
    height: 6px;
    background: var(--ink-100);
    border-radius: 999px;
    overflow: hidden;
}
.quiz-progress .bar > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--brand-500), var(--brand-400));
    transition: width .4s var(--tx);
}
.quiz-progress .count {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--ink-700);
    flex-shrink: 0;
}

.lock-page {
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: var(--r-lg);
    padding: 20px 18px;
    margin-bottom: 18px;
}
.lock-page h3 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.4rem, 5vw, 1.75rem);
    color: var(--ink-900);
    letter-spacing: -0.01em;
    margin-bottom: 6px;
}
.lock-page .lock-blurb {
    color: var(--ink-500);
    font-size: 0.98rem;
    line-height: 1.55;
    margin-bottom: 18px;
}

/* Intro video at the top of each lock page */
.lock-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--ink-900);
    border-radius: var(--r-md);
    overflow: hidden;
    margin-bottom: 22px;
    box-shadow: var(--shadow-sm);
}
.lock-video video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    background: var(--ink-900);
}
/* Fallback for older browsers without aspect-ratio support */
@supports not (aspect-ratio: 16 / 9) {
    .lock-video { padding-top: 56.25%; height: 0; }
    .lock-video video { position: absolute; inset: 0; }
}

.question-row {
    padding: 14px 0;
    border-top: 1px solid var(--ink-100);
}
.question-row:first-of-type { border-top: none; padding-top: 4px; }
.question-text {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ink-900);
    margin-bottom: 12px;
}

.answer-pills {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}
.ans-pill {
    background: #fff;
    border: 1.5px solid var(--ink-200);
    border-radius: 999px;
    padding: 10px 8px;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink-500);
    cursor: pointer;
    transition: all .12s var(--tx);
    text-align: center;
    line-height: 1.2;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ans-pill:hover { border-color: var(--brand-400); color: var(--ink-700); }
.ans-pill.selected[data-val="0"] {
    background: var(--success-bg);
    border-color: var(--success);
    color: #1F8A56;
}
.ans-pill.selected[data-val="1"] {
    background: #FFF6E7;
    border-color: var(--warning);
    color: #9B6D14;
}
.ans-pill.selected[data-val="2"] {
    background: var(--error-bg);
    border-color: var(--error);
    color: #B23838;
}

/* Wizard navigation footer */
.wizard-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    flex-wrap: wrap;
}

/* Lock report cards */
.report-group { margin-bottom: 28px; }
.report-group h3 {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ink-500);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--ink-100);
}
.report-group h3 .group-count {
    background: var(--ink-100);
    color: var(--ink-700);
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
}
.report-group.likely   h3 i { color: var(--error); }
.report-group.possible h3 i { color: var(--warning); }
.report-group.unlikely h3 i { color: var(--success); }

.lock-card {
    background: #fff;
    border: 1.5px solid var(--ink-100);
    border-radius: var(--r-lg);
    padding: 14px 16px;
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    cursor: pointer;
    transition: border-color .15s var(--tx), background .15s var(--tx);
}
.lock-card.likely   { border-left: 4px solid var(--error); }
.lock-card.possible { border-left: 4px solid var(--warning); }
.lock-card.unlikely { border-left: 4px solid var(--success); opacity: 0.85; }
.lock-card:hover { background: var(--ink-50); border-color: var(--ink-200); }
.lock-card.checked { background: var(--brand-100); border-color: var(--brand-400); opacity: 1; }

.lock-check {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 2px solid var(--ink-300);
    flex-shrink: 0;
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    transition: all .12s var(--tx);
    font-size: 0.7rem;
}
.lock-card.checked .lock-check {
    background: var(--brand-500);
    border-color: var(--brand-500);
    color: #fff;
}

.lock-body { flex: 1; min-width: 0; }
.lock-name {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.15rem;
    color: var(--ink-900);
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin-bottom: 4px;
}
.lock-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.lock-tag {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 2px 9px;
    border-radius: 999px;
}
.lock-tag.likely   { background: var(--error-bg); color: var(--error); }
.lock-tag.possible { background: #FFF6E7; color: #9B6D14; }
.lock-tag.unlikely { background: var(--success-bg); color: #1F8A56; }
.lock-score {
    font-size: 0.78rem;
    color: var(--ink-400);
    font-variant-numeric: tabular-nums;
}
.lock-blurb-mini {
    font-size: 0.88rem;
    color: var(--ink-500);
    line-height: 1.45;
}

.report-toggle-unlikely {
    background: none;
    border: none;
    color: var(--brand-500);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.88rem;
    padding: 6px 0;
}
.report-toggle-unlikely:hover { text-decoration: underline; }

@media (min-width: 640px) {
    .lock-page { padding: 26px 28px; }
    .answer-pills { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .ans-pill { font-size: 0.9rem; padding: 11px 10px; }
}


/* ========================================================
   Part 4 — Alignment Builder (Draft model)
   ======================================================== */

/* Purpose pinned at top — compact, anchored */
.purpose-pin {
    background: linear-gradient(135deg, var(--brand-900) 0%, var(--brand-700) 100%);
    color: #fff;
    border-radius: var(--r-lg);
    padding: 16px 18px;
    margin-bottom: 22px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.purpose-pin .pin-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: rgba(255,255,255,0.72);
}
.purpose-pin .pin-text {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.15rem, 4.4vw, 1.4rem);
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: #fff;
}

/* Stacked draft fields, with a connector between them */
.align-draft {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 28px;
}

.align-field {
    background: #fff;
    border: 1.5px solid var(--ink-200);
    border-radius: var(--r-lg);
    padding: 14px 14px 12px;
    transition: border-color .15s var(--tx), box-shadow .15s var(--tx);
}
.align-field:focus-within {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 4px rgba(107,79,224,0.10);
}
.align-field.need:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(232,132,92,0.12);
}

.align-field-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.align-field-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ink-500);
}
.align-field.need .align-field-label i { color: var(--accent-dk); }
.align-field.calling .align-field-label i { color: var(--brand-500); }
.align-field-label .field-num {
    background: var(--ink-100);
    color: var(--ink-500);
    border-radius: 999px;
    padding: 2px 7px;
    font-size: 0.68rem;
    font-weight: 700;
}

.suggestions-toggle {
    background: var(--ink-50);
    color: var(--ink-700);
    border: 1px solid var(--ink-200);
    border-radius: 999px;
    padding: 6px 11px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background .15s var(--tx), border-color .15s var(--tx);
    font-family: var(--font-sans);
    white-space: nowrap;
}
.suggestions-toggle:hover { background: var(--brand-100); border-color: var(--brand-400); }
.suggestions-toggle .chev { transition: transform .2s var(--tx); }
.suggestions-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
.suggestions-toggle .count {
    background: var(--brand-500);
    color: #fff;
    border-radius: 999px;
    padding: 1px 7px;
    font-size: 0.68rem;
    font-weight: 700;
    margin-left: 2px;
}

.align-textarea {
    width: 100%;
    min-height: 80px;
    border: none;
    background: transparent;
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ink-900);
    resize: vertical;
    padding: 4px 2px;
}
.align-textarea:focus { outline: none; }
.align-textarea::placeholder { color: var(--ink-300); }

/* Suggestion chips tray */
.suggestions-tray {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--ink-200);
}
.suggestions-tray[hidden] { display: none; }
.suggestions-tray .tray-hint {
    font-size: 0.8rem;
    color: var(--ink-400);
    margin-bottom: 10px;
}
.chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}
.chip {
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: 18px;
    padding: 9px 14px 9px 12px;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    color: var(--ink-700);
    cursor: pointer;
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
    transition: border-color .15s var(--tx), background .15s var(--tx), transform .12s var(--tx);
    text-align: left;
    line-height: 1.35;
    max-width: 100%;
    user-select: none;
}
.chip:hover { border-color: var(--brand-400); background: var(--brand-100); transform: translateY(-1px); }
.chip:focus-visible { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(107,79,224,0.18); }
.chip-icon {
    font-size: 0.9em;
    flex-shrink: 0;
    margin-top: 3px;
}
.chip-icon.from-ai     { color: var(--brand-500); }
.chip-icon.from-goal   { color: var(--accent-dk); }
.chip-icon.from-custom { color: var(--ink-400); }
.chip-text {
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.chip .chip-delete {
    background: none;
    border: none;
    color: var(--ink-300);
    padding: 0 2px;
    margin-top: 2px;
    cursor: pointer;
    font-size: 0.95em;
    flex-shrink: 0;
    border-radius: 4px;
    transition: color .15s var(--tx), background .15s var(--tx);
}
.chip .chip-delete:hover { color: var(--error); background: var(--error-bg); }

.chip-tools {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}

.chip-add {
    display: flex;
    gap: 8px;
}
.chip-add input {
    flex: 1;
    padding: 10px 13px;
    border: 1px solid var(--ink-200);
    border-radius: var(--r-md);
    font-family: var(--font-sans);
    font-size: 0.92rem;
    background: var(--ink-50);
    color: var(--ink-900);
    transition: border-color .15s var(--tx), box-shadow .15s var(--tx);
    min-width: 0;
}
.chip-add input:focus {
    outline: none;
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px rgba(107,79,224,0.10);
    background: #fff;
}
.chip-add button {
    background: var(--brand-500);
    color: #fff;
    border: none;
    border-radius: var(--r-md);
    padding: 0 14px;
    cursor: pointer;
    font-weight: 600;
    transition: background .15s var(--tx);
    flex-shrink: 0;
}
.chip-add button:hover { background: var(--brand-700); }

.btn-generate-more {
    background: #fff;
    border: 1px dashed var(--brand-400);
    color: var(--brand-700);
    padding: 7px 13px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background .15s var(--tx);
}
.btn-generate-more:hover { background: var(--brand-100); }
.btn-generate-more:disabled { opacity: 0.5; cursor: not-allowed; }

/* Connector between draft fields */
.draft-connector {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-300);
    font-size: 1.1rem;
    margin: -2px 0;
}
.draft-connector .line {
    width: 2px;
    height: 18px;
    background: var(--ink-200);
    margin-right: 0;
}

/* Save trio button */
.btn-save-trio {
    margin-top: 4px;
    padding: 14px 22px;
    width: 100%;
    font-size: 1rem;
}

/* ---------- Saved trios ---------- */
.trios-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.trio-card {
    background: #fff;
    border: 1px solid var(--ink-100);
    border-radius: var(--r-lg);
    padding: 16px 14px;
    position: relative;
}
.trio-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: stretch;
    padding-right: 28px; /* leave room for delete x */
}
.trio-bit {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.trio-bit .trio-lbl {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--ink-400);
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.trio-bit .trio-val {
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: var(--ink-900);
    letter-spacing: -0.005em;
    line-height: 1.3;
}
.trio-arrow {
    color: var(--ink-300);
    text-align: center;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.trio-arrow .down { display: block; }
.trio-arrow .right { display: none; }
.trio-delete {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    color: var(--ink-300);
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 6px;
    transition: color .15s var(--tx), background .15s var(--tx);
    font-size: 0.95rem;
}
.trio-delete:hover { color: var(--error); background: var(--error-bg); }

.empty-state {
    background: var(--ink-50);
    border: 1px dashed var(--ink-200);
    border-radius: var(--r-lg);
    padding: 22px 16px;
    text-align: center;
    color: var(--ink-500);
    font-size: 0.92rem;
    line-height: 1.5;
}

/* Desktop polish */
@media (min-width: 820px) {
    .purpose-pin { padding: 20px 22px; }
    .align-field { padding: 18px 20px 16px; }
    .align-textarea { min-height: 70px; }
    /* Suggestions tray expanded by default on desktop */
    .suggestions-tray { display: block; }
    .suggestions-toggle { display: none; }

    .trio-row {
        grid-template-columns: 1.4fr 22px 1fr 22px 1.4fr;
        gap: 12px;
        align-items: center;
    }
    .trio-arrow .down { display: none; }
    .trio-arrow .right { display: block; }
}


/* ========================================================
   GLOBAL MOBILE FIX-UP PASS — line-spacing & padding
   Applied last so it overrides earlier rules. Targets the
   common offenders called out by users: section heads
   running into copy, headings with cramped line-height,
   cards over-padded, list items wrapping awkwardly.
   ======================================================== */
@media (max-width: 720px) {
    /* Full-bleed on phones — drop the outer card chrome so content uses every pixel */
    .main-container { margin: 0; border-radius: 0; border: none; box-shadow: none; }
    body { background: var(--paper); }
    .dashboard-content { padding: 18px 14px 28px; }

    /* Headings: tighter line-height, room above and below */
    .main-header h2 { line-height: 1.25; padding: 0 12px; }
    h2 { line-height: 1.25; }
    h3 { line-height: 1.3; margin-top: 0; }
    h4 { line-height: 1.35; }

    p { line-height: 1.55; }

    /* Common section-head pattern used by every part — gap and wrap */
    .rp-section-head h3,
    .lr-section-head h3,
    .id-section-head h4,
    .ta-section-head h4 {
        line-height: 1.3;
        gap: 8px;
        flex-wrap: wrap;
    }
    .rp-section-head p,
    .lr-section-head p,
    .id-section-head p,
    .ta-section-help { margin-top: 6px; line-height: 1.55; }

    /* Cards — tighten padding so the content has room to breathe */
    .ta-card,
    .lr-section,
    .rp-section,
    .id-aspiration-card,
    .id-stage2-section,
    .mx-seed-group,
    .mx-category .mx-cat-banner,
    .lr-document {
        padding: 18px 18px 20px;
    }
    .ta-card { margin-bottom: 18px; }
    .lr-section, .rp-section, .id-stage2-section { margin-bottom: 14px; }

    /* Identity statement / traits / strip — big purple cards */
    .id-statement-card,
    .id-traits-card,
    .id-identity-strip,
    .lr-rules-strip,
    .rp-hero {
        padding: 18px 18px 20px;
    }
    .id-statement-head,
    .id-traits-head,
    .id-strip-head,
    .lr-strip-head,
    .rp-hero-head {
        gap: 10px;
        flex-wrap: wrap;
    }
    .id-statement-body,
    .id-traits-body {
        font-size: 1.1rem;
        line-height: 1.55;
        padding: 14px 16px;
    }
    .rp-hero-head { margin-bottom: 14px; }
    .rp-hero-text h2 { font-size: 1.35rem; }

    /* Identity strip head — count + button stacked tidily */
    .id-strip-head h3 { font-size: 1.1rem; }

    /* Suggestion cards & trigger templates — easier to read on small */
    .lr-trigger-template {
        font-size: 0.96rem;
        padding: 11px 13px;
        line-height: 1.5;
    }
    .lr-alt-sentence { padding: 11px 13px; }
    .lr-alt-sentence-text { font-size: 0.92rem; line-height: 1.45; }

    /* Aspiration pills and seed pills wrap nicely */
    .mx-seed-pills, .id-aspiration-pills, .stage-header { gap: 6px; }
    .mx-pill-text, .id-pill-text { max-width: 200px; }

    /* My Rules list — number + tag + text should wrap */
    .lr-my-rule {
        flex-wrap: wrap;
        gap: 6px 8px;
        padding: 10px 12px;
    }
    .lr-my-rule-tools { margin-left: auto; }
    .lr-my-rule-text { flex-basis: 100%; order: 3; line-height: 1.45; padding-top: 4px; }

    /* Trait chips wrap and breathe */
    .id-trait-chip { font-size: 0.82rem; padding: 5px 11px 5px 9px; }

    /* Stage 2 sections head — tag + h4 stack */
    .id-stage2-section-head { gap: 8px; margin-bottom: 14px; padding-bottom: 12px; }
    .id-stage2-section-head h4 { font-size: 1.05rem; flex-basis: 100%; }

    /* Forms — inputs have enough touch room */
    .inline-add input { padding: 11px 13px; font-size: 0.96rem; }
    .inline-add button { padding: 0 14px; }
    textarea { line-height: 1.5; }

    /* Wizard / quiz nav rows */
    .wizard-nav { gap: 8px; padding: 10px 0; }
    .quiz-progress { margin-bottom: 14px; }

    /* Wizards with progress bars */
    .lr-document { padding: 26px 18px 22px; }
    .lr-doc-header { margin: 18px 0 24px; }
    .lr-doc-header h1 { font-size: 1.85rem; }
    .lr-commandment { gap: 12px; padding: 14px 4px; font-size: 1.05rem; line-height: 1.5; }
    .lr-commandment::before { min-width: 36px; font-size: 0.86rem; }

    /* Part 4 path visual / cards — don't collide */
    .alignment-card, .path-visual { padding: 16px 16px; }

    /* Part 5 lock pages */
    .lock-card { padding: 16px; }

    /* Recite Mode shell */
    .rp-recite-shell { border-radius: 14px; }
    .rp-recite-body { padding: 26px 18px; }
    .rp-recite-title { line-height: 1.25; margin-bottom: 14px; }
    .rp-recite-text { font-size: 1.05rem; line-height: 1.55; }
    .rp-recite-foot { padding: 12px 16px; gap: 8px; }
    .rp-recorder { padding: 10px 16px; }
    .rp-recorder-row { gap: 8px; }

    /* Lists with date columns */
    .rp-list li { gap: 10px; padding: 10px 4px; }
    .rp-list-date { min-width: 44px; font-size: 0.7rem; }
    .rp-list-text { font-size: 0.92rem; line-height: 1.5; }

    /* Telling log items */
    .rp-tell-item { padding: 10px 12px; }
    .rp-tell-head { gap: 6px; }
    .rp-tell-body { font-size: 0.9rem; line-height: 1.5; }

    /* Signed commitment view */
    .signed-q { padding: 10px 2px; gap: 10px; line-height: 1.45; font-size: 0.92rem; }
    .signed-actions { gap: 8px; padding-top: 14px; }
    .signed-actions button { flex: 1 1 calc(50% - 4px); min-width: 0; font-size: 0.86rem; padding: 10px 12px; }

    /* Btn-back-nav placement on the dark header */
    .btn-back-nav { font-size: 0.74rem; padding: 5px 10px; }

    /* Doc actions row */
    .lr-doc-actions-top { flex-wrap: wrap; gap: 6px; }
}