/* =====================================================
   SIMULIZI — PUBLIC STYLES
   ===================================================== */
:root {
    --brand: #0f766e;
    --brand-600: #0d9488;
    --brand-50: #f0fdfa;
    --accent: #f59e0b;
    --ink: #0f172a;
    --muted: #64748b;
    --bg: #fbfaf7;
    --card: #ffffff;
    --line: #e7e5e4;
    --radius: 18px;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 2px 8px rgba(15, 23, 42, .04);
    --shadow: 0 10px 30px -12px rgba(15, 23, 42, .18);

    --bs-primary: var(--brand);
    --bs-primary-rgb: 15, 118, 110;
    --bs-body-font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --bs-body-color: var(--ink);
    --bs-link-color: var(--brand);
    --bs-link-hover-color: #115e59;
    --bs-link-color-rgb: 15, 118, 110;
}

body {
    background: var(--bg);
    color: var(--ink);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
}
.site-main { flex: 1 0 auto; }

/* ---------- Buttons ---------- */
.btn-primary {
    --bs-btn-bg: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: #115e59;
    --bs-btn-hover-border-color: #115e59;
    --bs-btn-active-bg: #134e4a;
    --bs-btn-active-border-color: #134e4a;
    --bs-btn-disabled-bg: var(--brand);
    --bs-btn-disabled-border-color: var(--brand);
    font-weight: 600;
}
.btn { font-weight: 600; }
.btn-touch { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; }
.btn-whatsapp { background: #25d366; color: #fff; }
.btn-whatsapp:hover { background: #1ebe5a; color: #fff; }
.btn-facebook { background: #1877f2; color: #fff; }
.btn-facebook:hover { background: #0f66d8; color: #fff; }
.btn.copied { background: var(--brand); color: #fff; border-color: var(--brand); }
.form-control:focus { border-color: var(--brand-600); box-shadow: 0 0 0 .25rem rgba(13, 148, 136, .15); }

/* ---------- Navbar ---------- */
.site-navbar {
    background: rgba(251, 250, 247, .88);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--line);
    padding: .8rem 0;
}
.site-navbar .navbar-brand { font-weight: 800; font-size: 1.35rem; color: var(--ink); letter-spacing: -.02em; }
.site-navbar .nav-link { font-weight: 600; color: var(--muted); padding: .5rem .9rem !important; border-radius: 999px; }
.site-navbar .nav-link:hover, .site-navbar .nav-link.active { color: var(--brand); background: var(--brand-50); }

/* ---------- Hero ---------- */
.hero {
    position: relative;
    padding: 5.5rem 0 4.5rem;
    overflow: hidden;
    background:
        radial-gradient(600px 300px at 15% 10%, rgba(20, 184, 166, .16), transparent 70%),
        radial-gradient(500px 280px at 90% 30%, rgba(245, 158, 11, .14), transparent 70%);
}
.hero-pill {
    display: inline-flex; align-items: center;
    background: #fff; border: 1px solid var(--line);
    padding: .45rem 1rem; border-radius: 999px;
    font-size: .85rem; font-weight: 600; color: var(--muted);
    box-shadow: var(--shadow-sm);
}
.hero-title {
    font-weight: 800; letter-spacing: -.035em; line-height: 1.05;
    font-size: clamp(2.3rem, 6vw, 4.2rem);
    margin: 1.4rem 0 1rem;
}
.hero-title span {
    background: linear-gradient(120deg, var(--brand-600), var(--brand) 60%, var(--accent));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-lead { font-size: clamp(1.05rem, 2.2vw, 1.3rem); color: var(--muted); max-width: 640px; margin: 0 auto; }

/* ---------- Steps ---------- */
.step-card {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 2rem 1.5rem; height: 100%; box-shadow: var(--shadow-sm);
}
.step-icon {
    width: 56px; height: 56px; border-radius: 16px; margin: 0 auto 1rem;
    display: grid; place-items: center; font-size: 1.3rem;
    background: var(--brand-50); color: var(--brand);
}

/* ---------- Sections ---------- */
.section-title { font-weight: 800; letter-spacing: -.02em; font-size: 1.6rem; }
.page-title { font-weight: 800; letter-spacing: -.03em; font-size: clamp(1.8rem, 4vw, 2.6rem); }
.page-header { padding: 3.5rem 0 1rem; }
.cta-band {
    background: linear-gradient(135deg, #115e59, var(--brand) 55%, #0d9488);
    color: #fff; padding: 4rem 0; margin-top: 2rem;
}

/* ---------- Story cards ---------- */
.story-card {
    border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease;
    background: var(--card);
}
.story-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.story-card .card-body { padding: 1.6rem; }
.story-card-meta { font-size: .82rem; color: var(--muted); font-weight: 500; }
.story-card-title { font-size: 1.2rem; font-weight: 700; line-height: 1.35; margin-bottom: .75rem; }
.story-card-title a { color: var(--ink); text-decoration: none; }
.story-card:hover .story-card-title a { color: var(--brand); }
.story-card-excerpt { color: var(--muted); font-family: 'Lora', Georgia, serif; line-height: 1.7; }
.story-card-link { font-weight: 700; font-size: .85rem; color: var(--brand); letter-spacing: .03em; }

.empty-state {
    text-align: center; padding: 3.5rem 1.5rem;
    background: var(--card); border: 1px dashed #d6d3d1; border-radius: var(--radius);
}
.empty-state > i { font-size: 2.6rem; color: #a8a29e; margin-bottom: 1rem; display: block; }

/* ---------- Write story ---------- */
.write-section { padding: 2.5rem 0 4rem; }
.write-prompt { font-size: clamp(1.125rem, 4.8vw, 2.25rem); line-height: 1.4; min-height: 1.4em; }
.write-prompt span {
    display: inline-block; white-space: nowrap; vertical-align: top;
    transition: opacity .2s ease, transform .2s ease;
}
.write-prompt .is-changing { opacity: 0; transform: translateY(5px); }
@media (prefers-reduced-motion: reduce) {
    .write-prompt span { transition: none; }
    .write-prompt .is-changing { transform: none; }
}
.write-card, .success-card {
    border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); background: var(--card);
}
.form-label-lg { font-weight: 700; font-size: .85rem; letter-spacing: .06em; color: var(--muted); }
.write-card .form-control { border-radius: 14px; border-color: #e2e8f0; background: #fcfcfb; }
.write-card .form-control-lg { font-weight: 600; font-size: 1.1rem; padding: .9rem 1rem; }
textarea.story-textarea {
    min-height: 360px; resize: vertical; padding: 1rem;
    font-family: 'Lora', Georgia, serif; font-size: 1.08rem; line-height: 1.8;
}
.word-progress { height: 6px; border-radius: 999px; background: #eef2f1; }
.word-progress .progress-bar { background: var(--brand-600); transition: width .2s ease, background-color .35s ease; }
.word-counter { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 600; white-space: nowrap; }
.word-counter.is-near { color: #b45309; }
.word-counter.is-full { color: #dc2626; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Floating reminder appears in the final ten characters, without interrupting typing. */
.send-reminder[hidden] { display: none; }
.send-reminder {
    position: fixed; right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 1040;
    display: flex; align-items: flex-start; gap: 1rem;
    width: min(390px, calc(100% - 2rem)); padding: 1.15rem 2.5rem 1.15rem 1.15rem;
    border: 1px solid #5eead4; border-bottom: 5px solid #0f766e; border-radius: 22px;
    background: linear-gradient(145deg, #fff, #ccfbf1); color: #134e4a;
    box-shadow: inset 0 2px 0 #fff, 0 8px 0 -2px #115e59, 0 22px 40px -12px rgba(15, 118, 110, .5);
    animation: sendReminderIn .4s ease-out;
}
.send-reminder-icon {
    flex: 0 0 50px; height: 50px; display: grid; place-items: center; border-radius: 15px;
    color: #fff; font-size: 1.3rem; background: linear-gradient(135deg, #2dd4bf, #0f766e);
    transform: perspective(250px) rotateY(-18deg) rotateX(12deg);
    box-shadow: inset 1px 2px 1px #99f6e4, 4px 5px 0 #115e59, 6px 10px 16px rgba(15, 118, 110, .25);
}
.send-reminder-body { min-width: 0; }
.send-reminder-body strong { display: block; font-size: 1rem; }
.send-reminder-body p { margin-top: .25rem; font-size: .82rem; line-height: 1.5; }
.send-reminder-action {
    margin-top: .85rem; padding: .6rem .9rem; min-height: 44px;
    border: 1px solid #0f766e; border-radius: 12px; color: #fff;
    background: linear-gradient(#0f766e, #115e59); font: inherit; font-size: .85rem; font-weight: 700;
    box-shadow: 0 4px 0 #042f2e; transition: transform .15s ease, box-shadow .15s ease;
}
.send-reminder-action:active { transform: translateY(3px); box-shadow: 0 1px 0 #042f2e; }
.send-reminder-close {
    position: absolute; top: .5rem; right: .4rem; width: 36px; height: 36px;
    display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: inherit;
}
.send-reminder-close:hover { background: rgba(15, 118, 110, .12); }
.send-reminder button:focus-visible { outline: 3px solid #d97706; outline-offset: 3px; }
@keyframes sendReminderIn {
    from { opacity: 0; transform: perspective(600px) translateY(20px) rotateX(-12deg); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .send-reminder { animation: none; }
    .send-reminder-action { transition: none; }
}
[data-theme="dark"] .send-reminder {
    background: linear-gradient(145deg, #183c37, #0f2522); color: #ccfbf1; border-color: #2c766a;
    box-shadow: inset 0 1px 0 #367b70, 0 8px 0 -2px #042f2e, 0 22px 40px -12px rgba(0, 0, 0, .6);
}

.success-icon {
    width: 86px; height: 86px; margin: 0 auto; border-radius: 50%;
    display: grid; place-items: center; font-size: 2.4rem; color: #fff;
    background: linear-gradient(135deg, #14b8a6, var(--brand));
    box-shadow: 0 12px 30px -8px rgba(15, 118, 110, .55);
    animation: pop .45s cubic-bezier(.2, 1.4, .4, 1);
}
@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---------- Single story ---------- */
.back-link { color: var(--muted); text-decoration: none; font-weight: 600; font-size: .92rem; }
.back-link:hover { color: var(--brand); }
.story-title { font-weight: 800; letter-spacing: -.03em; line-height: 1.15; font-size: clamp(1.9rem, 4.5vw, 2.8rem); }
.story-meta { display: flex; flex-wrap: wrap; gap: 1.2rem; color: var(--muted); font-size: .92rem; margin-top: 1rem; }
.story-body { font-family: 'Lora', Georgia, serif; font-size: 1.16rem; line-height: 1.9; color: #1e293b; }
.story-body p { margin-bottom: 1.4rem; }
.share-box {
    margin-top: 2.5rem; padding: 1.5rem; border-radius: var(--radius);
    background: var(--card); border: 1px solid var(--line);
}

/* ---------- Pagination ---------- */
.pagination { --bs-pagination-active-bg: var(--brand); --bs-pagination-active-border-color: var(--brand); --bs-pagination-color: var(--brand); gap: .3rem; }
.pagination .page-link { border-radius: 10px !important; }

/* ---------- Footer ---------- */
.site-footer { background: #fff; border-top: 1px solid var(--line); padding: 2rem 0; color: var(--muted); }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--brand); }
.footer-brand { font-weight: 800; color: var(--ink) !important; font-size: 1.1rem; }

/* ---------- Mobile ---------- */
@media (max-width: 575.98px) {
    .hero { padding: 3.5rem 0 3rem; }
    .write-section { padding: 1.5rem 0 3rem; }
    textarea.story-textarea { min-height: 52vh; font-size: 1.05rem; }
    .write-card { border-radius: 18px; }
    .story-body { font-size: 1.08rem; }
}


/* ---------- Write story: healing notification (phone-style) ---------- */
.heal-notice {
    position: relative; overflow: hidden;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(14px);
    border: 1px solid #e7e5e4; border-radius: 20px;
    padding: .85rem 1rem 1rem;
    box-shadow: 0 18px 40px -18px rgba(15, 118, 110, .45), 0 2px 6px rgba(15, 23, 42, .05);
    animation: healDrop .6s cubic-bezier(.2, 1.2, .4, 1);
    transition: opacity .3s ease, transform .3s ease, max-height .35s ease, margin .35s ease, padding .35s ease;
    max-height: 400px;
}
.heal-notice::before {
    content: ""; position: absolute; inset: 0 auto 0 0; width: 4px;
    background: linear-gradient(180deg, #14b8a6, var(--brand), var(--accent));
}
.heal-notice.is-closing { opacity: 0; transform: translateY(-12px) scale(.98); max-height: 0; margin: 0 !important; padding-top: 0; padding-bottom: 0; border-width: 0; }
.heal-notice-head { display: flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--muted); margin-bottom: .55rem; }
.heal-notice-head img { border-radius: 6px; }
.heal-app { font-weight: 700; color: var(--ink); text-transform: uppercase; letter-spacing: .04em; }
.heal-dot { opacity: .6; }
.heal-close {
    margin-left: auto; border: 0; background: #f1f5f9; color: var(--muted);
    width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem;
}
.heal-close:hover { background: #e2e8f0; color: var(--ink); }
.heal-notice-body { display: flex; gap: .85rem; align-items: flex-start; }
.heal-icon {
    flex: 0 0 46px; height: 46px; border-radius: 14px;
    display: grid; place-items: center; font-size: 1.2rem; color: #fff;
    background: linear-gradient(135deg, #14b8a6, var(--brand));
    box-shadow: 0 8px 18px -8px rgba(15, 118, 110, .7);
    animation: healPulse 2.8s ease-in-out infinite;
}
.heal-title { font-weight: 800; font-size: 1rem; color: var(--ink); margin-bottom: .2rem; }
.heal-text {
    font-family: 'Lora', Georgia, serif; font-size: 1rem; line-height: 1.6; color: #334155;
    min-height: 3.2em; transition: opacity .4s ease, transform .4s ease;
}
.heal-text.is-fading { opacity: 0; transform: translateY(6px); }
.min-w-0 { min-width: 0; }

@keyframes healDrop { from { opacity: 0; transform: translateY(-24px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes healPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@media (prefers-reduced-motion: reduce) { .heal-notice, .heal-icon { animation: none; } }
@media (max-width: 575.98px) {
    .heal-notice { border-radius: 18px; padding: .8rem .85rem .9rem; }
    .heal-icon { flex-basis: 40px; height: 40px; font-size: 1.05rem; }
    .heal-text { font-size: .95rem; min-height: 4.8em; }
}

/* ---------- Continue story: title part hint ---------- */
.title-hint {
    margin-top: .5rem; font-size: .85rem; font-weight: 600; color: var(--brand);
    background: var(--brand-50); border: 1px solid #99f6e4;
    padding: .45rem .75rem; border-radius: 10px;
    animation: healDrop .4s ease-out;
}

/* ---------- Hidden admin entrance (long-press logo) ---------- */
#brandLogo { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
#brandLogo img { transition: transform 1.5s ease; }
#brandLogo.is-holding img { transform: scale(.82) rotate(-8deg); }

/* ---------- Send animation (gather words → envelope → Admin box) ---------- */
.send-overlay {
    position: fixed; inset: 0; z-index: 2000; overflow: hidden;
    background: radial-gradient(circle at 50% 55%, rgba(240, 253, 250, .75), rgba(251, 250, 247, .55));
    backdrop-filter: blur(1.5px);
}
.send-word {
    position: fixed; white-space: nowrap; pointer-events: none;
    font-family: 'Lora', Georgia, serif; font-size: .95rem; color: #134e4a;
    background: #fff; border: 1px solid #99f6e4; border-radius: 999px;
    padding: .12rem .55rem; box-shadow: 0 4px 12px -6px rgba(15, 118, 110, .5);
    will-change: transform, opacity;
}
.send-word.is-title { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; background: var(--brand); color: #fff; border-color: var(--brand); }
.send-envelope {
    position: fixed; width: 104px; height: 104px; border-radius: 28px;
    display: grid; place-items: center; font-size: 2.9rem; color: #fff;
    background: linear-gradient(135deg, #14b8a6, var(--brand));
    box-shadow: 0 18px 40px -12px rgba(15, 118, 110, .7), inset 0 -4px 0 rgba(0, 0, 0, .12);
    transform: translate(-50%, -50%) scale(0);
    will-change: transform;
}
.send-seal {
    position: absolute; right: -8px; bottom: -8px; width: 36px; height: 36px; border-radius: 50%;
    display: grid; place-items: center; font-size: .95rem; color: #fff;
    background: #e11d48; border: 3px solid #fff; box-shadow: 0 4px 10px rgba(225, 29, 72, .45);
}
.send-caption {
    position: fixed; left: 0; right: 0; padding: 0 16px; text-align: center;
    font-weight: 700; color: #134e4a; font-size: 1.05rem; letter-spacing: .01em;
}
.send-box {
    position: fixed; width: 112px; height: 98px; border-radius: 24px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
    background: #fff; color: #b45309; font-size: 2.6rem;
    border: 2px solid #fde68a; box-shadow: 0 18px 40px -14px rgba(180, 83, 9, .5);
    transform: translate(-50%, -50%) scale(0);
}
.send-box span { font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #92400e; }
.send-check {
    position: absolute; top: -12px; right: -12px; width: 34px; height: 34px; border-radius: 50%;
    display: grid; place-items: center; font-size: .9rem; color: #fff;
    background: #16a34a; border: 3px solid #fff; box-shadow: 0 4px 12px rgba(22, 163, 74, .5);
    animation: pop .4s cubic-bezier(.2, 1.4, .4, 1);
}
.send-spark { position: fixed; width: 9px; height: 9px; border-radius: 50%; pointer-events: none; }
.heal-notice.is-sending { opacity: .15; filter: blur(2px); }

/* =====================================================
   THEME TOGGLE + DARK THEME
   ===================================================== */
.theme-toggle {
    width: 42px; height: 42px; border-radius: 50%; flex: 0 0 42px;
    display: grid; place-items: center; font-size: 1.05rem;
    border: 1px solid var(--line); background: var(--card); color: var(--ink);
    transition: background .2s, color .2s, transform .35s cubic-bezier(.2, 1.4, .4, 1);
}
.theme-toggle:hover { color: var(--brand); border-color: var(--brand-600); }
.theme-toggle:active { transform: rotate(-30deg) scale(.9); }
.theme-toggle .fa-sun { color: #fbbf24; }

html { color-scheme: light; }
body, .site-navbar, .site-footer, .story-card, .write-card, .success-card, .step-card, .share-box, .heal-notice {
    transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}

[data-theme="dark"] {
    color-scheme: dark;
    --brand: #0d9488;
    --brand-600: #14b8a6;
    --brand-50: rgba(45, 212, 191, .1);
    --ink: #e6f1ef;
    --muted: #94a8a5;
    --bg: #0b1514;
    --card: #121e1d;
    --line: #22312f;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow: 0 12px 30px -12px rgba(0, 0, 0, .6);
    --bs-body-bg: var(--bg);
    --bs-link-color: #2dd4bf;
    --bs-link-hover-color: #5eead4;
    --bs-link-color-rgb: 45, 212, 191;
}
[data-theme="dark"] .site-navbar { background: rgba(11, 21, 20, .85); }
[data-theme="dark"] .site-navbar .nav-link:hover,
[data-theme="dark"] .site-navbar .nav-link.active,
[data-theme="dark"] .story-card-link,
[data-theme="dark"] .story-card:hover .story-card-title a,
[data-theme="dark"] .back-link:hover,
[data-theme="dark"] .site-footer a:hover,
[data-theme="dark"] .title-hint { color: #2dd4bf; }
[data-theme="dark"] .navbar-toggler { color: var(--ink); }
[data-theme="dark"] .hero-pill,
[data-theme="dark"] .site-footer { background: var(--card); }
[data-theme="dark"] .empty-state { border-color: var(--line); }
[data-theme="dark"] .write-card .form-control { background: #0f1918; border-color: var(--line); color: var(--ink); }
[data-theme="dark"] .write-card .form-control::placeholder { color: #6b7f7c; }
[data-theme="dark"] .word-progress { background: #1c2a28; }
[data-theme="dark"] .story-body { color: #d5e3e0; }
[data-theme="dark"] .text-muted { color: var(--muted) !important; }
[data-theme="dark"] .title-hint { border-color: rgba(45, 212, 191, .3); }

[data-theme="dark"] .heal-notice { background: rgba(18, 30, 29, .92); border-color: var(--line); }
[data-theme="dark"] .heal-text { color: #c4d4d1; }
[data-theme="dark"] .heal-close { background: #1c2a28; }
[data-theme="dark"] .heal-close:hover { background: #26403c; }

[data-theme="dark"] .send-overlay { background: radial-gradient(circle at 50% 55%, rgba(13, 148, 136, .18), rgba(11, 21, 20, .7)); }
[data-theme="dark"] .send-caption { color: #5eead4; }
[data-theme="dark"] .send-word { background: #142321; color: #ccfbf1; border-color: rgba(45, 212, 191, .35); }
[data-theme="dark"] .send-word.is-title { background: var(--brand); color: #fff; }
[data-theme="dark"] .send-box { background: #1d1a12; border-color: #78350f; color: #fbbf24; }
[data-theme="dark"] .send-box span { color: #fcd34d; }
[data-theme="dark"] .send-seal,
[data-theme="dark"] .send-check { border-color: var(--card); }

/* ---------- Admin login popup (long-press logo) ---------- */
.admin-login-pop { border: 0; border-radius: 22px; padding: 1.75rem 1.5rem 1.5rem; background: var(--card); box-shadow: var(--shadow); }
.admin-login-logo { display: inline-grid; animation: pop .45s cubic-bezier(.2, 1.4, .4, 1); }
#adminLoginModal .modal-dialog { transform: scale(.85); transition: transform .3s cubic-bezier(.2, 1.3, .4, 1); }
#adminLoginModal.show .modal-dialog { transform: none; }
.admin-login-pop.shake { animation: shake .4s ease; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
[data-theme="dark"] .admin-login-pop .form-control { background: #0f1918; border-color: var(--line); }