/* ================================================================
   Seren — Self-Evolving Reflective Engine Network - Frontend Styles
   Design: Clean / Analytical / Stripe-inspired
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&family=DM+Mono:wght@400;500&display=swap');

/* ── Variables ─────────────────────────────────────────────────── */
.tie-engine {
    --tie-bg:         #FAFAFA;
    --tie-surface:    #FFFFFF;
    --tie-border:     #E8E8ED;
    --tie-text:       #1A1A2E;
    --tie-muted:      #6B7280;
    --tie-accent:     #2563EB;
    --tie-accent-lt:  #EFF6FF;
    --tie-success:    #059669;
    --tie-warn:       #D97706;
    --tie-danger:     #DC2626;
    --tie-radius:     10px;
    --tie-radius-lg:  16px;
    --tie-shadow:     0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
    --tie-shadow-md:  0 4px 16px rgba(0,0,0,.10);
    --tie-ff:         'DM Sans', system-ui, sans-serif;
    --tie-mono:       'DM Mono', monospace;

    /* DTI colours */
    --dti-low:        #059669;
    --dti-low-bg:     #ECFDF5;
    --dti-mid:        #D97706;
    --dti-mid-bg:     #FFFBEB;
    --dti-high:       #DC2626;
    --dti-high-bg:    #FEF2F2;
}

/* ── Reset / Base ──────────────────────────────────────────────── */
.tie-engine *,
.tie-engine *::before,
.tie-engine *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Exempt fan cards from the reset */
.tie-fan-card,
.tie-seren-back,
.tie-seren-back * { margin: initial; padding: initial; }
.tie-fan-card { margin: 0 -8px !important; }

.tie-engine {
    font-family:    var(--tie-ff);
    font-size:      15px;
    line-height:    1.6;
    color:          var(--tie-text);
    background:     var(--tie-bg);
    border:         1px solid var(--tie-border);
    border-radius:  var(--tie-radius-lg);
    overflow:       hidden;
    max-width:      720px;
    margin:         2rem auto;
    box-shadow:     var(--tie-shadow-md);
}

/* ── Engine Header ─────────────────────────────────────────────── */
.tie-engine-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         20px 28px;
    background:      var(--tie-surface);
    border-bottom:   1px solid var(--tie-border);
}

.tie-engine-logo {
    display:     flex;
    align-items: center;
    gap:         14px;
}

.tie-engine-title {
    display:     flex;
    align-items: center;
    gap:         14px;
}

.tie-engine-mark {
    font-size:   28px;
    color:       var(--tie-accent);
    line-height: 1;
    flex-shrink: 0;
}

.tie-engine-title h2 {
    font-size:   17px;
    font-weight: 600;
    color:       var(--tie-text);
    letter-spacing: -.01em;
}

.tie-engine-title p {
    font-size:  12px;
    color:      var(--tie-muted);
    font-style: italic;
    margin-top: 1px;
}

.tie-engine-meta {
    display: flex;
    gap:     10px;
}

.tie-meta-pill {
    display:       flex;
    flex-direction:column;
    align-items:   center;
    background:    var(--tie-accent-lt);
    border:        1px solid #BFDBFE;
    border-radius: 8px;
    padding:       6px 14px;
    min-width:     60px;
}

.tie-meta-val {
    font-size:   18px;
    font-weight: 600;
    color:       var(--tie-accent);
    font-family: var(--tie-mono);
    line-height: 1;
}

.tie-meta-lbl {
    font-size:  10px;
    color:      var(--tie-muted);
    margin-top: 2px;
    white-space:nowrap;
}

/* ── Body ──────────────────────────────────────────────────────── */
.tie-engine-body {
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* ── Steps ─────────────────────────────────────────────────────── */
.tie-step {
    animation: tieFadeIn .3s ease;
}

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

.tie-step-label {
    font-size:      10px;
    font-weight:    600;
    letter-spacing: .12em;
    color:          var(--tie-muted);
    text-transform: uppercase;
    margin-bottom:  16px;
    font-family:    var(--tie-mono);
}

/* ── Card Stage ────────────────────────────────────────────────── */
.tie-card-stage {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            20px;
}

.tie-card-face {
    width:         160px;
    height:        280px;
    position:      relative;
    display:       flex;
    align-items:   center;
    justify-content:center;
    flex-shrink:   0;
}

.tie-card-back,
.tie-card-front {
    width:         100%;
    height:        100%;
    border-radius: 12px;
    position:      absolute;
    top: 0; left: 0;
    backface-visibility: hidden;
}

.tie-card-back {
    background:    var(--tie-text);
    display:       flex;
    align-items:   center;
    justify-content: center;
    border:        1px solid rgba(255,255,255,.12);
    overflow:      hidden;
    position:      relative;
}

.tie-card-back-pattern {
    width:    100%;
    height:   100%;
    position: relative;
    display:  flex;
    align-items:   center;
    justify-content: center;
}

/* ── Card Fan Selection ─────────────────────────────────────────── */
.tie-card-fan {
    display:         flex;
    align-items:     flex-end;
    justify-content: center;
    gap:             0;
    padding:         20px 0 10px;
    min-height:      220px;
    position:        relative;
    z-index:         1;
}

.tie-fan-card {
    width:           72px;
    height:          120px;
    border-radius:   6px;
    cursor:          pointer;
    position:        relative;
    transition:      transform .25s ease, box-shadow .25s ease;
    flex-shrink:     0;
    margin:          0 -8px;
    border:          1px solid rgba(255,255,255,.15);
    overflow:        hidden;
}

.tie-fan-card {
    pointer-events: auto !important;
}

.tie-fan-card svg,
.tie-fan-card svg * {
    pointer-events: none !important;
}

.tie-fan-card:hover {
    transform:       translateY(-18px) scale(1.06) !important;
    box-shadow:      0 16px 40px rgba(0,0,0,.35);
    z-index:         10;
}

.tie-fan-card.selected {
    transform:       translateY(-24px) scale(1.1) !important;
    box-shadow:      0 20px 48px rgba(37,99,235,.4);
    z-index:         11;
    border-color:    rgba(37,99,235,.6);
}

.tie-fan-prompt {
    font-size:   13px;
    color:       var(--tie-muted);
    text-align:  center;
    margin-top:  16px;
    font-style:  italic;
    transition:  opacity .3s;
}

.tie-fan-confirm {
    display:       none;
    margin-top:    16px;
    text-align:    center;
}

.tie-btn-confirm-card {
    background:    var(--tie-text);
    color:         #fff;
    border:        none;
    border-radius: var(--tie-radius);
    padding:       11px 24px;
    font-size:     14px;
    font-weight:   500;
    font-family:   var(--tie-ff);
    cursor:        pointer;
    transition:    all .2s;
    animation:     tieFadeIn .3s ease;
}

.tie-btn-confirm-card:hover {
    background: #2D3561;
    transform:  translateY(-1px);
}

.tie-card-front {
    background:     var(--tie-surface);
    border:         1px solid var(--tie-border);
    padding:        20px 18px;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    text-align:     center;
    gap:            8px;
    box-shadow:     var(--tie-shadow-md);
}

.tie-card-front.is-flipping {
    animation: tieCardFlip .5s ease;
}

@keyframes tieCardFlip {
    0%   { transform: rotateY(-90deg); opacity: 0; }
    100% { transform: rotateY(0deg);   opacity: 1; }
}

.tie-card-suit {
    font-size:   28px;
    margin-top:  8px;
}

.tie-card-name {
    font-size:   16px;
    font-weight: 600;
    color:       var(--tie-text);
    line-height: 1.3;
}

.tie-card-arcana {
    font-size:      10px;
    font-weight:    500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color:          var(--tie-muted);
    font-family:    var(--tie-mono);
}

.tie-card-meaning {
    font-size:   12px;
    color:       var(--tie-muted);
    line-height: 1.5;
    border-top:  1px solid var(--tie-border);
    padding-top: 10px;
    margin-top:  4px;
}

/* ── Buttons ───────────────────────────────────────────────────── */
.tie-btn-pull {
    display:       flex;
    align-items:   center;
    gap:           8px;
    background:    var(--tie-text);
    color:         #fff;
    border:        none;
    border-radius: var(--tie-radius);
    padding:       13px 28px;
    font-size:     14px;
    font-weight:   500;
    font-family:   var(--tie-ff);
    cursor:        pointer;
    transition:    all .2s;
    letter-spacing:-.01em;
}

.tie-btn-pull:hover {
    background:    #2D3561;
    transform:     translateY(-1px);
    box-shadow:    var(--tie-shadow-md);
}

.tie-btn-pull:active { transform: translateY(0); }

.tie-btn-pull .tie-btn-icon { font-size: 16px; }

.tie-btn-save {
    display:       flex;
    align-items:   center;
    gap:           8px;
    background:    var(--tie-accent);
    color:         #fff;
    border:        none;
    border-radius: var(--tie-radius);
    padding:       13px 28px;
    font-size:     14px;
    font-weight:   500;
    font-family:   var(--tie-ff);
    cursor:        pointer;
    transition:    all .2s;
    margin-top:    8px;
}

.tie-btn-save:hover { background: #1D4ED8; transform: translateY(-1px); }
.tie-btn-save:disabled { background: var(--tie-muted); cursor: not-allowed; transform: none; }

.tie-btn-reset {
    display:       flex;
    align-items:   center;
    gap:           8px;
    background:    transparent;
    color:         var(--tie-muted);
    border:        1px solid var(--tie-border);
    border-radius: var(--tie-radius);
    padding:       10px 20px;
    font-size:     13px;
    font-family:   var(--tie-ff);
    cursor:        pointer;
    transition:    all .2s;
    margin-top:    20px;
}

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

/* ── Form Fields ───────────────────────────────────────────────── */
.tie-field { margin-bottom: 20px; }
.tie-field:last-child { margin-bottom: 0; }

.tie-label {
    display:       block;
    font-size:     13px;
    font-weight:   500;
    color:         var(--tie-text);
    margin-bottom: 8px;
}

.tie-optional {
    font-weight: 400;
    color:       var(--tie-muted);
    font-size:   12px;
}

.tie-input,
.tie-select,
.tie-textarea {
    width:         100%;
    border:        1px solid var(--tie-border);
    border-radius: var(--tie-radius);
    padding:       12px 16px;
    font-size:     16px !important;
    line-height:   1.5;
    font-family:   var(--tie-ff);
    color:         var(--tie-text) !important;
    background:    var(--tie-surface) !important;
    transition:    border-color .15s;
    outline:       none;
    -webkit-appearance: none;
    appearance:    none;
    min-height:    48px;
}

.tie-input:focus,
.tie-select:focus,
.tie-textarea:focus {
    border-color: var(--tie-accent);
    box-shadow:   0 0 0 3px rgba(37,99,235,.12);
}

.tie-textarea { resize: vertical; min-height: 80px; }

.tie-tag-row {
    display: flex;
    gap:     10px;
}

.tie-tag-row .tie-select { flex: 1; }
.tie-tag-row .tie-input  { flex: 1; }

/* ── DTI Slider ────────────────────────────────────────────────── */
.tie-dti-control {
    background:    var(--tie-bg);
    border:        1px solid var(--tie-border);
    border-radius: var(--tie-radius);
    padding:       16px 18px;
}

.tie-dti-labels {
    display:         flex;
    justify-content: space-between;
    font-size:       11px;
    color:           var(--tie-muted);
    margin-bottom:   8px;
    font-family:     var(--tie-mono);
}

.tie-slider {
    -webkit-appearance: none;
    width:          100%;
    height:         6px;
    border-radius:  6px;
    background:     linear-gradient(to right, var(--dti-low) 0%, var(--dti-mid) 50%, var(--dti-high) 100%);
    outline:        none;
    cursor:         pointer;
    border:         none;
}

.tie-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width:         20px;
    height:        20px;
    border-radius: 50%;
    background:    #fff;
    border:        2px solid var(--tie-text);
    box-shadow:    var(--tie-shadow);
    cursor:        pointer;
    transition:    transform .15s;
}

.tie-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.tie-slider::-moz-range-thumb {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--tie-text);
    cursor: pointer;
}

.tie-dti-display {
    display:         flex;
    align-items:     baseline;
    gap:             10px;
    margin-top:      12px;
    justify-content: center;
}

.tie-dti-number {
    font-size:   36px;
    font-weight: 600;
    font-family: var(--tie-mono);
    line-height: 1;
    color:       var(--tie-text);
    transition:  color .2s;
}

.tie-dti-text {
    font-size:   14px;
    color:       var(--tie-muted);
    font-weight: 400;
}

/* DTI colour states */
.tie-dti-display.dti-low  .tie-dti-number { color: var(--dti-low); }
.tie-dti-display.dti-mid  .tie-dti-number { color: var(--dti-mid); }
.tie-dti-display.dti-high .tie-dti-number { color: var(--dti-high); }

/* ── Coaching Output ───────────────────────────────────────────── */
.tie-coaching-prompts {
    display:        flex;
    flex-direction: column;
    gap:            12px;
}

.tie-prompt {
    border-radius: var(--tie-radius);
    padding:       16px 18px;
    border:        1px solid;
    display:       flex;
    gap:           14px;
    align-items:   flex-start;
    animation:     tieFadeIn .4s ease both;
}

.tie-prompt:nth-child(2) { animation-delay: .1s; }
.tie-prompt:nth-child(3) { animation-delay: .2s; }
.tie-prompt:nth-child(4) { animation-delay: .3s; }

.tie-prompt.sev-high {
    background:   var(--dti-high-bg);
    border-color: #FECACA;
}

.tie-prompt.sev-medium {
    background:   var(--dti-mid-bg);
    border-color: #FDE68A;
}

.tie-prompt.sev-low {
    background:   var(--dti-low-bg);
    border-color: #A7F3D0;
}

.tie-prompt-icon {
    font-size:  20px;
    flex-shrink:0;
    line-height:1.2;
}

.tie-prompt-content {}

.tie-prompt-headline {
    font-size:   13px;
    font-weight: 600;
    color:       var(--tie-text);
    margin-bottom: 4px;
}

.tie-prompt-body {
    font-size:  13px;
    color:      var(--tie-muted);
    line-height:1.55;
}

.tie-coaching-saved {
    background:    var(--tie-accent-lt);
    border:        1px solid #BFDBFE;
    border-radius: var(--tie-radius);
    padding:       14px 18px;
    font-size:     13px;
    color:         var(--tie-accent);
    margin-bottom: 16px;
    font-weight:   500;
    display:       flex;
    align-items:   center;
    gap:           8px;
}

/* ── DTI Pill (history) ────────────────────────────────────────── */
.tie-dti-pill {
    display:        inline-flex;
    align-items:    center;
    justify-content:center;
    width:          28px;
    height:         28px;
    border-radius:  8px;
    font-size:      12px;
    font-weight:    600;
    font-family:    var(--tie-mono);
}

.tie-dti-pill.dti-low  { background: var(--dti-low-bg);  color: var(--dti-low); }
.tie-dti-pill.dti-mid  { background: var(--dti-mid-bg);  color: var(--dti-mid); }
.tie-dti-pill.dti-high { background: var(--dti-high-bg); color: var(--dti-high); }

/* ── History Panel ─────────────────────────────────────────────── */
.tie-history-panel {
    border-top: 1px solid var(--tie-border);
}

.tie-history-toggle {
    width:       100%;
    display:     flex;
    align-items: center;
    justify-content: space-between;
    padding:     16px 28px;
    background:  none;
    border:      none;
    font-family: var(--tie-ff);
    font-size:   13px;
    font-weight: 500;
    color:       var(--tie-muted);
    cursor:      pointer;
    transition:  color .15s;
}

.tie-history-toggle:hover { color: var(--tie-text); }
.tie-toggle-caret { font-size: 12px; transition: transform .2s; }
.tie-history-toggle.open .tie-toggle-caret { transform: rotate(180deg); }

.tie-history-body { padding: 0 28px 24px; }

.tie-history-table {
    width:          100%;
    border-collapse:collapse;
    font-size:      13px;
}

.tie-history-table th {
    text-align:     left;
    color:          var(--tie-muted);
    font-size:      11px;
    font-weight:    500;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding:        8px 12px;
    border-bottom:  1px solid var(--tie-border);
    font-family:    var(--tie-mono);
}

.tie-history-table td {
    padding:       10px 12px;
    border-bottom: 1px solid var(--tie-bg);
    color:         var(--tie-text);
    vertical-align:middle;
}

.tie-history-table tr:hover td { background: var(--tie-bg); }

/* ── Login notice ──────────────────────────────────────────────── */
.tie-login-notice {
    background:    var(--tie-surface);
    border:        1px solid var(--tie-border);
    border-radius: var(--tie-radius-lg);
    padding:       32px;
    text-align:    center;
    max-width:     480px;
    margin:        2rem auto;
    font-family:   var(--tie-ff);
}

.tie-login-notice a { color: var(--tie-accent); }

/* ── Loading state ─────────────────────────────────────────────── */
.tie-loading {
    display:    inline-block;
    width:      16px;
    height:     16px;
    border:     2px solid rgba(255,255,255,.3);
    border-top: 2px solid #fff;
    border-radius: 50%;
    animation:  tieSpin .7s linear infinite;
    vertical-align: middle;
}

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

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 520px) {
    .tie-engine-header   { flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px 20px; }
    .tie-engine-body     { padding: 20px; }
    .tie-history-body    { padding: 0 20px 20px; }
    .tie-history-toggle  { padding: 14px 20px; }
    .tie-tag-row         { flex-direction: column; }
    .tie-card-face       { width: 160px; height: 256px; }
}

/* ── SVG Card Display ──────────────────────────────────────────── */
.tie-card-svg-wrap {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           100%;
    height:          100%;
}

.tie-card-svg-wrap svg {
    border-radius: 12px;
    box-shadow:    0 8px 32px rgba(0,0,0,0.25);
    max-width:     160px;
    max-height:    280px;
    width:         auto;
    height:        auto;
}

@keyframes tieCardFlip {
    from { opacity: 0; transform: rotateY(-80deg) scale(0.9); }
    to   { opacity: 1; transform: rotateY(0deg) scale(1); }
}



/* ── Select dropdown fix ───────────────────────────────────────── */
.tie-engine .tie-select {
    background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat:   no-repeat !important;
    background-position: right 14px center !important;
    padding-right:       40px !important;
    cursor:              pointer;
}

.tie-engine .tie-select option {
    font-size:   16px;
    padding:     8px 12px;
    color:       #1A1A2E;
    background:  #ffffff;
}

.tie-engine .tie-label {
    font-size:   14px;
    font-weight: 500;
    color:       var(--tie-text) !important;
    margin-bottom: 8px;
    display:     block;
}

.tie-engine .tie-textarea {
    font-size: 15px !important;
    min-height: 90px;
}

/* ── DTI Explainer ─────────────────────────────────────────────── */
.tie-dti-explainer {
    margin-bottom: 12px;
}

.tie-explainer-toggle {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    width:           100%;
    background:      none;
    border:          none;
    padding:         0;
    cursor:          pointer;
    font-family:     var(--tie-ff);
    gap:             12px;
}

.tie-info-badge {
    font-size:      11px;
    color:          var(--tie-accent);
    font-weight:    500;
    white-space:    nowrap;
    flex-shrink:    0;
    letter-spacing: .02em;
    transition:     opacity .15s;
}

.tie-explainer-toggle:hover .tie-info-badge { opacity: .7; }

.tie-explainer-body {
    background:    var(--tie-bg);
    border:        1px solid var(--tie-border);
    border-radius: var(--tie-radius);
    padding:       16px 18px;
    margin-top:    10px;
    animation:     tieFadeIn .2s ease;
}

.tie-explainer-body p {
    font-size:     13px;
    color:         var(--tie-muted);
    line-height:   1.65;
    margin:        0 0 10px;
}

.tie-explainer-body p:last-child { margin-bottom: 0; }

.tie-explainer-body strong { color: var(--tie-text); font-weight: 500; }
.tie-explainer-body em     { font-style: italic; }

/* Scale guide */
.tie-dti-scale-guide {
    display:        flex;
    flex-direction: column;
    gap:            8px;
    margin:         12px 0;
}

.tie-scale-item {
    display:       grid;
    grid-template-columns: 56px 88px 1fr;
    align-items:   center;
    gap:           10px;
    padding:       10px 14px;
    border-radius: 8px;
    border:        1px solid;
}

.tie-scale-item.scale-low  { background: var(--dti-low-bg);  border-color: #A7F3D0; }
.tie-scale-item.scale-mid  { background: var(--dti-mid-bg);  border-color: #FDE68A; }
.tie-scale-item.scale-high { background: var(--dti-high-bg); border-color: #FECACA; }

.tie-scale-num {
    font-family: var(--tie-mono);
    font-size:   12px;
    font-weight: 500;
}

.tie-scale-item.scale-low  .tie-scale-num { color: var(--dti-low); }
.tie-scale-item.scale-mid  .tie-scale-num { color: var(--dti-mid); }
.tie-scale-item.scale-high .tie-scale-num { color: var(--dti-high); }

.tie-scale-label {
    font-size:   12px;
    font-weight: 500;
    color:       var(--tie-text);
}

.tie-scale-desc {
    font-size:   12px;
    color:       var(--tie-muted);
    line-height: 1.4;
}

.tie-explainer-why {
    background:    white;
    border-left:   3px solid var(--tie-accent);
    padding:       10px 14px !important;
    border-radius: 0 6px 6px 0;
    margin-top:    12px !important;
}

/* Mobile */
@media (max-width: 520px) {
    .tie-scale-item {
        grid-template-columns: 52px 1fr;
        grid-template-rows:    auto auto;
    }
    .tie-scale-desc {
        grid-column: 1 / -1;
    }
}

/* ── Seren Card Back ───────────────────────────────────────────── */
.tie-seren-back {
    width:          72px !important;
    height:         120px !important;
    min-width:      72px !important;
    min-height:     120px !important;
    background:     linear-gradient(145deg, #1A1A2E 0%, #16213E 50%, #0F3460 100%) !important;
    border-radius:  5px !important;
    position:       relative !important;
    overflow:       hidden !important;
    display:        flex !important;
    flex-direction: column !important;
    align-items:    center !important;
    justify-content:center !important;
    box-sizing:     border-box !important;
}

.tie-seren-back::before {
    content:       '';
    position:      absolute;
    inset:         3px;
    border:        1px solid rgba(240,198,116,0.5);
    border-radius: 4px;
    pointer-events:none;
}

.tie-seren-back::after {
    content:       '';
    position:      absolute;
    inset:         5px;
    border:        1px solid rgba(240,198,116,0.2);
    border-radius: 3px;
    pointer-events:none;
}

.tie-seren-back-star {
    width:         28px;
    height:        28px;
    margin-bottom: 6px;
    opacity:       0.85;
}

.tie-seren-back-name {
    font-family:   Georgia, serif;
    font-style:    italic;
    font-size:     7px;
    letter-spacing:2px;
    color:         #F0C674;
    opacity:       0.9;
    margin-top:    4px;
}

.tie-seren-back-rule {
    width:         32px;
    height:        1px;
    background:    rgba(240,198,116,0.4);
    margin-bottom: 4px;
}

.tie-seren-back-corner {
    position:      absolute;
    width:         4px;
    height:        4px;
    border-radius: 50%;
    background:    rgba(240,198,116,0.5);
}

.tie-seren-back-corner.tl { top:  8px; left:  8px; }
.tie-seren-back-corner.tr { top:  8px; right: 8px; }
.tie-seren-back-corner.bl { bottom: 8px; left:  8px; }
.tie-seren-back-corner.br { bottom: 8px; right: 8px; }

/* ── Post-coaching navigation ──────────────────────────────────── */
.tie-coaching-nav {
    display:        flex;
    flex-direction: column;
    gap:            8px;
    margin-top:     20px;
    border-top:     1px solid var(--tie-border);
    padding-top:    18px;
}

.tie-coaching-nav-link {
    display:         flex;
    align-items:     center;
    gap:             14px;
    padding:         13px 16px;
    background:      var(--tie-bg);
    border:          1px solid var(--tie-border);
    border-radius:   var(--tie-radius);
    text-decoration: none;
    color:           var(--tie-text);
    transition:      all .15s;
}

.tie-coaching-nav-link:hover {
    border-color: var(--tie-accent);
    background:   #EFF6FF;
}

.tie-coaching-nav-pro {
    border-color: #C7D7FD;
    background:   #F0F4FF;
}

.tie-coaching-nav-pro:hover {
    border-color: var(--tie-accent);
    background:   #EFF6FF;
}

.tie-nav-icon {
    font-size:  18px;
    color:      var(--tie-accent);
    flex-shrink:0;
    width:      28px;
    text-align: center;
}

.tie-coaching-nav-link div {
    flex: 1;
}

.tie-coaching-nav-link strong {
    display:     block;
    font-size:   13px;
    font-weight: 500;
    color:       var(--tie-text);
    margin-bottom: 2px;
}

.tie-coaching-nav-link span {
    display:   block;
    font-size: 12px;
    color:     var(--tie-muted);
}

.tie-nav-badge {
    display:        inline-block !important;
    background:     var(--tie-accent) !important;
    color:          #fff !important;
    font-size:      9px !important;
    font-weight:    600;
    padding:        2px 7px;
    border-radius:  999px;
    letter-spacing: .05em;
    flex-shrink:    0;
}

/* ── Post-reading navigation ───────────────────────────────────── */
.tie-coaching-nav {
    display:        flex;
    flex-direction: column;
    gap:            8px;
    margin-top:     20px;
    padding-top:    20px;
    border-top:     1px solid var(--tie-border);
}

.tie-nav-link {
    display:        block;
    text-align:     center;
    padding:        11px 20px;
    border-radius:  var(--tie-radius);
    font-size:      13px;
    font-weight:    500;
    font-family:    var(--tie-ff);
    text-decoration:none;
    transition:     all .15s;
}

.tie-nav-audit {
    background:  var(--tie-text);
    color:       #fff !important;
}

.tie-nav-audit:hover { background: #2D3561; }

.tie-nav-dashboard {
    background:  transparent;
    color:       var(--tie-accent) !important;
    border:      1px solid var(--tie-border);
}

.tie-nav-dashboard:hover {
    border-color: var(--tie-accent);
    background:   var(--tie-accent-lt);
}

/* ── Soul Audit signpost ───────────────────────────────────────── */
.tie-audit-signpost {
    margin:        20px 0 16px;
    animation:     tieFadeIn .4s ease .3s both;
}

.tie-signpost-inner {
    display:       flex;
    align-items:   center;
    gap:           14px;
    background:    linear-gradient(135deg, #1e1b4b 0%, #1e3a8a 100%);
    border-radius: var(--tie-radius);
    padding:       16px 18px;
    flex-wrap:     wrap;
}

.tie-signpost-mark {
    font-size:  24px;
    color:      #a78bfa;
    flex-shrink:0;
}

.tie-signpost-text {
    flex: 1;
    min-width: 160px;
}

.tie-signpost-text strong {
    display:     block;
    font-size:   13px;
    font-weight: 600;
    color:       #ede9fe;
    margin-bottom: 3px;
}

.tie-signpost-text p {
    font-size:   12px;
    color:       #a78bfa;
    line-height: 1.5;
    margin:      0;
}

.tie-signpost-btn {
    display:        inline-block;
    background:     rgba(255,255,255,0.12);
    color:          #ede9fe !important;
    border:         1px solid rgba(255,255,255,0.2);
    border-radius:  7px;
    padding:        8px 14px;
    font-size:      12px;
    font-weight:    500;
    text-decoration:none;
    white-space:    nowrap;
    transition:     background .15s;
    font-family:    var(--tie-ff);
}

.tie-signpost-btn:hover {
    background: rgba(255,255,255,0.2);
    color:      #fff !important;
}

/* ── Soul Audit Teaser ─────────────────────────────────────────── */
.tie-soul-teaser {
    margin:        20px 0 16px;
    animation:     tieFadeIn .4s ease .3s both;
}

.tie-soul-teaser-inner {
    display:       flex;
    align-items:   center;
    gap:           14px;
    background:    #F0F4FF;
    border:        1px solid #C7D7FD;
    border-radius: var(--tie-radius);
    padding:       14px 16px;
    flex-wrap:     wrap;
}

.tie-soul-teaser-mark {
    font-size:  22px;
    color:      var(--tie-accent);
    flex-shrink:0;
}

.tie-soul-teaser-text {
    flex: 1;
    min-width: 160px;
}

.tie-soul-teaser-text strong {
    display:     block;
    font-size:   13px;
    font-weight: 600;
    color:       var(--tie-text);
    margin-bottom: 3px;
}

.tie-soul-teaser-text p {
    font-size:   12px;
    color:       var(--tie-muted);
    line-height: 1.5;
    margin:      0;
}

.tie-soul-teaser-btn {
    display:        inline-block;
    background:     var(--tie-accent);
    color:          #fff !important;
    text-decoration:none;
    border-radius:  8px;
    padding:        9px 14px;
    font-size:      12px;
    font-weight:    500;
    font-family:    var(--tie-ff);
    white-space:    nowrap;
    transition:     background .15s;
    flex-shrink:    0;
}

.tie-soul-teaser-btn:hover { background: #1D4ED8; }

/* ── Soul Audit link ───────────────────────────────────────────── */
.tie-soul-audit-link {
    padding:     0 28px 20px;
    margin-top:  4px;
}

.tie-soul-audit-nudge {
    display:        flex;
    align-items:    center;
    gap:            12px;
    background:     #F0F4FF;
    border:         1px solid #C7D7FD;
    border-radius:  var(--tie-radius);
    padding:        12px 16px;
    text-decoration:none;
    transition:     background .15s, border-color .15s;
}

.tie-soul-audit-nudge:hover {
    background:   #EBF1FF;
    border-color: #93AFFE;
}

.tie-nudge-icon {
    font-size:   20px;
    color:       var(--tie-accent);
    flex-shrink: 0;
}

.tie-soul-audit-nudge > div {
    flex:        1;
    display:     flex;
    flex-direction: column;
    gap:         2px;
}

.tie-nudge-title {
    font-size:   13px;
    font-weight: 500;
    color:       var(--tie-text);
}

.tie-nudge-sub {
    font-size:  11px;
    color:      var(--tie-muted);
    line-height:1.4;
}

.tie-nudge-arrow {
    font-size:  14px;
    color:      var(--tie-accent);
    flex-shrink:0;
}