@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;800&family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
    --font-body: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-diary: 'Segoe Print', 'Bradley Hand', 'Comic Sans MS', cursive;
    --sage: #86A789;
    --sage-dark: #4F6F52;
    --sage-deep: #3F5B42;
    --sage-soft: #DCE8D6;
    --cream: #F8F1E7;
    --cream-2: #FFF9EF;
    --paper: rgba(255, 252, 245, 0.92);
    --paper-solid: #FFFCF5;
    --brown: #8A735D;
    --ink: #2F3A33;
    --muted: #738071;
    --gold: #D8B46A;
    --rose: #E7B7A0;
    --shadow: 0 22px 70px rgba(62, 76, 63, .13);
}

* {
    font-family: var(--font-body);
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    background:
        radial-gradient(circle at top left, rgba(220, 232, 214, .95), transparent 34%),
        radial-gradient(circle at bottom right, rgba(248, 225, 191, .72), transparent 36%),
        linear-gradient(135deg, var(--cream-2), var(--cream));
    color: var(--ink);
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -3;
    opacity: .32;
    background-image:
        linear-gradient(rgba(79,111,82,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(79,111,82,.08) 1px, transparent 1px);
    background-size: 34px 34px;
}

.main-wrapper {
    padding: 34px 0 70px;
}

h1, h2, h3, .navbar-brand, .story-title, .font-display {
    font-family: 'Playfair Display', serif;
}

.app-navbar {
    background: rgba(255, 252, 245, .82);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(79, 111, 82, .13);
}

.navbar-brand {
    color: var(--sage-dark) !important;
    letter-spacing: .3px;
    font-size: 1.45rem;
}

.nav-link {
    color: var(--ink) !important;
    font-weight: 500;
}

.nav-link:hover {
    color: var(--sage-dark) !important;
}

.btn-sage {
    color: #fff;
    background: linear-gradient(135deg, var(--sage), var(--sage-dark));
    border: 0;
    box-shadow: 0 10px 24px rgba(79,111,82,.18);
}

.btn-sage:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(79,111,82,.23);
}

.btn-outline-success {
    border-color: rgba(79,111,82,.45);
    color: var(--sage-dark);
}

.btn-outline-success:hover {
    background: var(--sage);
    border-color: var(--sage);
}

.hero-card,
.auth-card,
.content-card,
.story-card,
.journal-panel {
    border: 1px solid rgba(79,111,82,.14);
    background: var(--paper);
    border-radius: 30px;
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
}

.hero-card::after,
.content-card::after,
.auth-card::after {
    content: "";
    position: absolute;
    right: -40px;
    top: -40px;
    width: 150px;
    height: 150px;
    background: rgba(220,232,214,.55);
    border-radius: 999px;
    z-index: 0;
}

.hero-card > *,
.auth-card > *,
.content-card > *,
.story-card > * {
    position: relative;
    z-index: 1;
}

.hero-card {
    padding: 56px;
    min-height: 480px;
}

.auth-card {
    max-width: 500px;
    margin: 0 auto;
    padding: 36px;
}

.content-card {
    padding: 36px;
}

.story-card {
    padding: 24px;
    transition: .25s ease;
    animation: riseIn .55s ease both;
}

.story-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 24px 80px rgba(62, 76, 63, .18);
}

.journal-visual {
    min-height: 330px;
    border-radius: 30px;
    background:
        linear-gradient(90deg, rgba(79,111,82,.08) 1px, transparent 1px),
        linear-gradient(var(--paper-solid), #FBF4E8);
    background-size: 38px 100%;
    border: 1px solid rgba(79,111,82,.13);
    box-shadow: inset 0 0 0 10px rgba(255,255,255,.33), 0 20px 55px rgba(62, 76, 63, .12);
    position: relative;
    padding: 34px;
}

.journal-visual::before {
    content: "";
    position: absolute;
    left: 22px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(231, 183, 160, .65);
}

.paper-line {
    height: 13px;
    border-radius: 20px;
    background: rgba(79,111,82,.20);
    margin: 16px 0;
    animation: writeLine 2.8s ease-in-out infinite;
}

.paper-line.short { width: 52%; animation-delay: .2s; }
.paper-line.medium { width: 72%; animation-delay: .4s; }
.paper-line.long { width: 86%; animation-delay: .6s; }

.mini-media-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 28px;
}

.media-tile {
    height: 72px;
    border-radius: 18px;
    background: linear-gradient(145deg, var(--sage-soft), rgba(255,255,255,.72));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sage-dark);
    font-size: 1.7rem;
    box-shadow: 0 10px 25px rgba(62, 76, 63, .08);
    animation: floatSoft 4s ease-in-out infinite;
}

.media-tile:nth-child(2) { animation-delay: .6s; background: linear-gradient(145deg, #F6E0BE, rgba(255,255,255,.75)); }
.media-tile:nth-child(3) { animation-delay: 1.1s; background: linear-gradient(145deg, #EAC3AF, rgba(255,255,255,.75)); }

.badge-locked {
    background: #F7E4BB;
    color: #7C5C26;
}

.badge-open {
    background: var(--sage-soft);
    color: var(--sage-dark);
}

.form-control,
.form-select {
    border-radius: 18px;
    border: 1px solid rgba(79,111,82,.24);
    padding: 13px 15px;
    background: rgba(255,255,255,.72);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--sage);
    box-shadow: 0 0 0 .22rem rgba(134,167,137,.22);
}

textarea.form-control {
    min-height: 240px;
    line-height: 1.8;
    background-image: linear-gradient(transparent 95%, rgba(79,111,82,.10) 96%);
    background-size: 100% 34px;
}

.small-muted {
    color: var(--muted);
    font-size: .94rem;
}

.preview-box {
    border: 1px dashed rgba(79,111,82,.45);
    border-radius: 24px;
    background:
        radial-gradient(circle at top right, rgba(220,232,214,.6), transparent 40%),
        rgba(255,255,255,.48);
    padding: 22px;
    display: none;
    animation: riseIn .35s ease both;
}

.preview-box img,
.preview-box video {
    max-width: 100%;
    max-height: 420px;
    object-fit: contain;
    border-radius: 22px;
    box-shadow: 0 16px 42px rgba(62, 76, 63, .13);
}

.locked-panel {
    border-radius: 26px;
    background:
        radial-gradient(circle at top right, rgba(246, 224, 190, .6), transparent 45%),
        rgba(247, 226, 183, .30);
    border: 1px solid rgba(180, 135, 61, .19);
    padding: 32px;
    position: relative;
    overflow: hidden;
}

.locked-panel::before {
    content: "🔒";
    position: absolute;
    right: 28px;
    bottom: 14px;
    font-size: 4rem;
    opacity: .16;
    animation: lockPulse 1.9s ease-in-out infinite;
}

.open-panel {
    animation: openStory .65s ease both;
}

.detail-media img,
.detail-media video {
    width: 100%;
    max-height: 520px;
    object-fit: contain;
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 20px 60px rgba(62, 76, 63, .13);
}

.floating-shape {
    position: fixed;
    border-radius: 999px;
    z-index: -2;
    opacity: .55;
    filter: blur(.2px);
    animation: floaty 8s ease-in-out infinite;
}

.shape-one {
    width: 260px;
    height: 260px;
    background: var(--sage-soft);
    top: 110px;
    right: -90px;
}

.shape-two {
    width: 190px;
    height: 190px;
    background: #F6E0BE;
    bottom: 70px;
    left: -70px;
    animation-delay: 1.5s;
}

.shape-three {
    width: 115px;
    height: 115px;
    background: #EAC3AF;
    top: 55%;
    right: 12%;
    opacity: .32;
    animation-delay: 2.2s;
}

.leaf {
    position: fixed;
    width: 18px;
    height: 36px;
    border-radius: 90% 0 90% 0;
    background: rgba(134,167,137,.48);
    z-index: -1;
    animation: leafFall 11s linear infinite;
}

.leaf.l1 { left: 10%; top: -40px; animation-delay: 0s; }
.leaf.l2 { left: 38%; top: -60px; animation-delay: 3s; transform: scale(.8); }
.leaf.l3 { left: 78%; top: -50px; animation-delay: 6s; transform: scale(.65); }

.dashboard-icon {
    width: 58px;
    height: 58px;
    border-radius: 21px;
    background: linear-gradient(145deg, var(--sage-soft), rgba(255,255,255,.7));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sage-dark);
    font-size: 1.55rem;
    box-shadow: inset 0 0 0 1px rgba(79,111,82,.09);
}

.story-title {
    color: var(--sage-dark);
    font-weight: 800;
    line-height: 1.25;
}

.story-meta {
    border-left: 3px solid rgba(134,167,137,.55);
    padding-left: 12px;
}

.time-progress {
    width: 100%;
    height: 8px;
    background: rgba(79,111,82,.11);
    border-radius: 999px;
    overflow: hidden;
    margin: 14px 0 4px;
}

.time-progress span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--sage), var(--gold));
    border-radius: 999px;
    width: 55%;
    animation: progressGlow 2.2s ease-in-out infinite;
}

.empty-state {
    min-height: 290px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.empty-illustration {
    width: 120px;
    height: 120px;
    border-radius: 35px;
    margin: 0 auto 18px;
    background: linear-gradient(145deg, var(--sage-soft), #F6E0BE);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    animation: floatSoft 4s ease-in-out infinite;
}

.music-hint {
    font-size: .78rem;
    color: var(--muted);
    display: block;
    margin-top: 3px;
}

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

@keyframes floatSoft {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-9px) rotate(1deg); }
}

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

@keyframes writeLine {
    0%, 100% { transform: scaleX(.92); opacity: .62; transform-origin: left; }
    50% { transform: scaleX(1); opacity: .95; transform-origin: left; }
}

@keyframes lockPulse {
    0%, 100% { transform: scale(1); opacity: .14; }
    50% { transform: scale(1.08); opacity: .22; }
}

@keyframes openStory {
    from { opacity: .2; transform: translateY(20px) scale(.98); filter: blur(4px); }
    to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes progressGlow {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.18); }
}

@keyframes leafFall {
    0% { transform: translateY(-80px) rotate(0deg); opacity: 0; }
    10% { opacity: .55; }
    100% { transform: translateY(110vh) rotate(260deg); opacity: 0; }
}

@media (max-width: 992px) {
    .hero-card {
        padding: 40px 28px;
        min-height: auto;
    }

    .journal-visual {
        min-height: 270px;
        margin-top: 10px;
    }
}

@media (max-width: 768px) {
    .main-wrapper {
        padding: 22px 0 50px;
    }

    .content-card,
    .auth-card {
        padding: 24px;
        border-radius: 24px;
    }

    .hero-card {
        padding: 30px 22px;
        border-radius: 24px;
    }

    .display-5 {
        font-size: 2.25rem;
    }

    .story-card {
        border-radius: 24px;
    }

    .navbar .btn {
        width: 100%;
        margin-top: 8px;
    }

    .navbar-nav {
        padding-top: 12px;
    }

    .d-flex.gap-2,
    .d-flex.flex-wrap.gap-2 {
        gap: .55rem !important;
    }

    textarea.form-control {
        min-height: 210px;
    }

    .mini-media-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .media-tile {
        height: 62px;
    }
}


/* ===== V4 Final Interaktif Rapi ===== */
body {
    --line-soft: rgba(79,111,82,.14);
}

.wizard-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 24px;
    align-items: start;
}

.wizard-sidebar {
    position: sticky;
    top: 96px;
}

.step-card {
    background: rgba(255,252,245,.88);
    border: 1px solid var(--line-soft);
    border-radius: 26px;
    box-shadow: 0 18px 50px rgba(62,76,63,.10);
    padding: 22px;
}

.step-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.step-list li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 13px 0;
    border-bottom: 1px solid rgba(79,111,82,.09);
}

.step-list li:last-child {
    border-bottom: 0;
}

.step-num {
    width: 30px;
    height: 30px;
    border-radius: 12px;
    background: var(--sage-soft);
    color: var(--sage-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex: 0 0 auto;
}

.step-list li.active .step-num {
    background: linear-gradient(135deg, var(--sage), var(--sage-dark));
    color: #fff;
    box-shadow: 0 10px 24px rgba(79,111,82,.22);
}

.focus-panel {
    border-radius: 22px;
    background: rgba(220,232,214,.34);
    border: 1px solid rgba(79,111,82,.12);
    padding: 16px;
}

.form-section {
    border: 1px solid rgba(79,111,82,.11);
    background: rgba(255,255,255,.36);
    border-radius: 24px;
    padding: 24px;
    margin-bottom: 20px;
    animation: sectionFade .45s ease both;
}

.section-title {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 15px;
}

.section-icon {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    background: var(--sage-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--sage-dark);
    font-size: 1.35rem;
}

.media-picker {
    border: 1.5px dashed rgba(79,111,82,.42);
    border-radius: 22px;
    padding: 22px;
    background: rgba(255,252,245,.62);
    cursor: pointer;
    transition: .22s ease;
}

.media-picker:hover,
.media-picker.dragover {
    background: rgba(220,232,214,.46);
    border-color: var(--sage-dark);
    transform: translateY(-2px);
}

.media-mini-preview {
    display: none;
    margin-top: 16px;
    border-radius: 18px;
    padding: 14px;
    background: rgba(255,255,255,.58);
    border: 1px solid rgba(79,111,82,.12);
}

.media-mini-preview img,
.media-mini-preview video {
    max-width: 100%;
    max-height: 260px;
    object-fit: contain;
    border-radius: 16px;
    display: block;
}

.preview-modal-card {
    border: 0;
    border-radius: 28px;
    overflow: hidden;
    background: var(--paper-solid);
}

.final-preview {
    border-radius: 22px;
    background:
        linear-gradient(90deg, rgba(79,111,82,.08) 1px, transparent 1px),
        linear-gradient(#fffdf7, #fbf4e8);
    background-size: 34px 100%;
    padding: 26px;
    border: 1px solid rgba(79,111,82,.13);
}

.final-preview-title {
    font-family: 'Playfair Display', serif;
    color: var(--sage-dark);
    font-size: 1.65rem;
    font-weight: 800;
    margin-bottom: 12px;
}

.final-preview-body {
    white-space: pre-line;
    line-height: 1.85;
    color: var(--ink);
    max-height: 260px;
    overflow-y: auto;
    padding-right: 6px;
}

.final-preview-media {
    margin-top: 16px;
}

.final-preview-media img,
.final-preview-media video {
    max-width: 100%;
    max-height: 320px;
    border-radius: 18px;
    object-fit: contain;
    background: #fff;
    box-shadow: 0 14px 35px rgba(62,76,63,.10);
}

.story-countdown {
    border-radius: 16px;
    background: rgba(220,232,214,.45);
    border: 1px solid rgba(79,111,82,.13);
    color: var(--sage-deep);
    font-size: .88rem;
    font-weight: 600;
    padding: 9px 12px;
    display: inline-block;
}

.lock-state {
    position: relative;
    padding-left: 56px;
}

.lock-state::before {
    content: "🔒";
    position: absolute;
    left: 0;
    top: 2px;
    width: 42px;
    height: 42px;
    border-radius: 16px;
    background: #F7E4BB;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    animation: softPulse 2s ease-in-out infinite;
}

.open-state {
    position: relative;
    padding-left: 56px;
}

.open-state::before {
    content: "✨";
    position: absolute;
    left: 0;
    top: 2px;
    width: 42px;
    height: 42px;
    border-radius: 16px;
    background: var(--sage-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    animation: softPulse 2s ease-in-out infinite;
}

.char-info {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.char-bar {
    height: 8px;
    border-radius: 999px;
    background: rgba(79,111,82,.10);
    overflow: hidden;
}

.char-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    width: 0%;
    background: linear-gradient(90deg, var(--sage), var(--gold));
    transition: width .2s ease;
}

@keyframes softPulse {
    0%,100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

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

@media (max-width: 992px) {
    .wizard-layout {
        grid-template-columns: 1fr;
    }
    .wizard-sidebar {
        position: relative;
        top: auto;
    }
    .step-list {
        display: grid;
        grid-template-columns: repeat(2,1fr);
        gap: 8px;
    }
    .step-list li {
        border: 1px solid rgba(79,111,82,.10);
        border-radius: 16px;
        padding: 12px;
    }
}

@media (max-width: 576px) {
    .step-list {
        grid-template-columns: 1fr;
    }
    .form-section {
        padding: 18px;
    }
    .final-preview {
        padding: 18px;
    }
}


/* ===== V5 Guided Storytelling ===== */
.guidance-card {
    border-radius: 26px;
    background:
        radial-gradient(circle at top right, rgba(220,232,214,.75), transparent 42%),
        rgba(255,252,245,.86);
    border: 1px solid rgba(79,111,82,.13);
    box-shadow: 0 16px 45px rgba(62,76,63,.08);
    padding: 24px;
    margin-bottom: 22px;
}

.guidance-title {
    font-family: 'Playfair Display', serif;
    color: var(--sage-dark);
    font-weight: 800;
    font-size: 1.45rem;
    margin-bottom: 8px;
}

.prompt-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
}

.prompt-chip {
    border: 1px solid rgba(79,111,82,.16);
    background: rgba(255,255,255,.58);
    color: var(--sage-deep);
    border-radius: 18px;
    padding: 12px 14px;
    text-align: left;
    font-size: .92rem;
    transition: .18s ease;
}

.prompt-chip:hover {
    transform: translateY(-2px);
    background: rgba(220,232,214,.52);
    border-color: rgba(79,111,82,.32);
}

.focus-action-card {
    cursor: pointer;
}

.focus-action-card .focus-action-button {
    pointer-events: none;
}

.focus-action-card:hover {
    transform: translateY(-5px);
}

.focus-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 8px 14px;
    background: rgba(220,232,214,.70);
    color: var(--sage-dark);
    font-weight: 600;
    font-size: .88rem;
}

@media (max-width: 576px) {
    .prompt-grid {
        grid-template-columns: 1fr;
    }
}


/* ===== V6 Final Storytelling System ===== */
.story-label-options {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.label-option {
    position: relative;
}

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

.label-box {
    border: 1px solid rgba(79,111,82,.15);
    background: rgba(255,255,255,.55);
    border-radius: 18px;
    padding: 14px 12px;
    min-height: 92px;
    cursor: pointer;
    transition: .18s ease;
    display: block;
}

.label-box strong {
    display: block;
    color: var(--sage-dark);
    margin-bottom: 4px;
}

.label-box span {
    color: var(--muted);
    font-size: .82rem;
}

.label-option input:checked + .label-box {
    background: rgba(220,232,214,.66);
    border-color: rgba(79,111,82,.42);
    box-shadow: 0 12px 30px rgba(62,76,63,.10);
    transform: translateY(-2px);
}

.story-structure {
    border-left: 3px solid rgba(134,167,137,.58);
    padding-left: 16px;
}

.structure-item {
    margin-bottom: 12px;
}

.structure-item:last-child {
    margin-bottom: 0;
}

.structure-item strong {
    color: var(--sage-dark);
}

.timeline-mini {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 12px;
    flex-wrap: wrap;
}

.timeline-node {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 7px 10px;
    font-size: .78rem;
    font-weight: 600;
    background: rgba(220,232,214,.45);
    color: var(--sage-deep);
    border: 1px solid rgba(79,111,82,.12);
}

.timeline-node.active {
    background: linear-gradient(135deg, var(--sage), var(--sage-dark));
    color: #fff;
}

.timeline-line {
    flex: 1;
    min-width: 22px;
    height: 2px;
    background: rgba(79,111,82,.18);
}

.story-label-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 6px 11px;
    background: rgba(220,232,214,.55);
    color: var(--sage-dark);
    font-size: .78rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.reading-mode {
    max-width: 880px;
    margin: 0 auto;
}

.reading-paper {
    border-radius: 30px;
    padding: 34px;
    background:
        linear-gradient(90deg, rgba(79,111,82,.06) 1px, transparent 1px),
        linear-gradient(#fffdf7, #fbf4e8);
    background-size: 34px 100%;
    border: 1px solid rgba(79,111,82,.13);
    box-shadow: 0 20px 60px rgba(62,76,63,.12);
}

.reading-intro {
    border-radius: 22px;
    padding: 18px 20px;
    background: rgba(220,232,214,.42);
    border: 1px solid rgba(79,111,82,.12);
    margin-bottom: 22px;
}

.context-note {
    border-radius: 22px;
    background:
        radial-gradient(circle at top right, rgba(220,232,214,.62), transparent 45%),
        rgba(255,252,245,.78);
    border: 1px solid rgba(79,111,82,.13);
    padding: 18px 20px;
    margin-bottom: 18px;
}

.context-note h5 {
    font-family: 'Playfair Display', serif;
    color: var(--sage-dark);
    font-weight: 800;
    margin-bottom: 6px;
}

.final-preview-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 16px;
}

.meta-pill {
    border-radius: 999px;
    padding: 7px 11px;
    background: rgba(220,232,214,.46);
    color: var(--sage-deep);
    font-size: .82rem;
    font-weight: 600;
}

@media (max-width: 992px) {
    .story-label-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 576px) {
    .story-label-options {
        grid-template-columns: 1fr;
    }

    .reading-paper {
        padding: 22px;
        border-radius: 24px;
    }

    .timeline-line {
        display: none;
    }
}


/* ===== V7 Final Clean Storytelling ===== */
.clean-note {
    border-radius: 22px;
    background: rgba(220,232,214,.36);
    border: 1px solid rgba(79,111,82,.12);
    padding: 16px 18px;
    margin-bottom: 18px;
}

.clean-note h5 {
    font-family: 'Playfair Display', serif;
    color: var(--sage-dark);
    font-weight: 800;
    margin-bottom: 6px;
}

.story-filter-panel {
    border-radius: 24px;
    background: rgba(255,252,245,.82);
    border: 1px solid rgba(79,111,82,.13);
    box-shadow: 0 16px 45px rgba(62,76,63,.08);
    padding: 18px;
    margin-bottom: 22px;
}

.story-filter-panel .form-control,
.story-filter-panel .form-select {
    padding: 10px 13px;
    border-radius: 14px;
}

.story-card.hidden-by-filter {
    display: none !important;
}

.story-count-info {
    color: var(--muted);
    font-size: .92rem;
}

.form-section.compact-section {
    padding: 22px;
}

.story-label-options.clean-label-options {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.clean-writing-helper {
    font-size: .92rem;
    color: var(--muted);
    margin-top: 8px;
}

@media (max-width: 992px) {
    .story-label-options.clean-label-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 576px) {
    .story-label-options.clean-label-options {
        grid-template-columns: 1fr;
    }
}


/* ===== V8 Musik Latar Atas Kiri ===== */
.music-top-left {
    position: fixed;
    top: 14px;
    left: 16px;
    z-index: 1050;
}

.music-toggle-btn {
    border: 1px solid rgba(79,111,82,.22);
    background: rgba(255,252,245,.94);
    color: var(--sage-dark);
    border-radius: 999px;
    padding: 8px 14px;
    font-size: .84rem;
    font-weight: 700;
    box-shadow: 0 10px 26px rgba(62,76,63,.12);
    backdrop-filter: blur(12px);
    transition: .18s ease;
}

.music-toggle-btn:hover {
    transform: translateY(-1px);
    background: rgba(220,232,214,.96);
}

.music-toggle-btn.is-on {
    background: linear-gradient(135deg, var(--sage), var(--sage-dark));
    color: #fff;
    border-color: transparent;
}

@media (min-width: 769px) {
    .app-navbar .container {
        padding-left: 168px;
    }
}

@media (max-width: 768px) {
    .music-top-left {
        top: 10px;
        left: 10px;
    }

    .music-toggle-btn {
        font-size: .76rem;
        padding: 7px 10px;
    }

    .navbar-brand {
        margin-left: 112px;
    }
}


/* ===== V9 Animasi Interaktif Terarah ===== */

/* transisi masuk halaman */
.main-wrapper {
    animation: pageEnter .55s ease both;
}

@keyframes pageEnter {
    from {
        opacity: 0;
        transform: translateY(14px);
        filter: blur(3px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* animasi navbar dan tombol */
.app-navbar {
    animation: navDrop .45s ease both;
}

@keyframes navDrop {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.btn,
.music-toggle-btn,
.prompt-chip,
.label-box {
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

.btn:hover,
.music-toggle-btn:hover,
.prompt-chip:hover,
.label-box:hover {
    transform: translateY(-2px);
}

/* step/wizard lebih terasa */
.step-list li {
    position: relative;
    transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.step-list li:hover {
    transform: translateX(4px);
}

.step-list li.active .step-num {
    animation: stepPulse 2.1s ease-in-out infinite;
}

@keyframes stepPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(134,167,137,.28);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(134,167,137,.08);
    }
}

/* section form muncul berurutan */
.form-section {
    animation: sectionRise .5s ease both;
}

.form-section:nth-of-type(1) { animation-delay: .04s; }
.form-section:nth-of-type(2) { animation-delay: .10s; }
.form-section:nth-of-type(3) { animation-delay: .16s; }
.form-section:nth-of-type(4) { animation-delay: .22s; }

@keyframes sectionRise {
    from {
        opacity: 0;
        transform: translateY(18px) scale(.99);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* label cerita lebih interaktif tapi tetap bersih */
.label-option input:checked + .label-box {
    animation: labelSelected .35s ease both;
}

@keyframes labelSelected {
    0% {
        transform: scale(.98);
    }
    60% {
        transform: scale(1.025);
    }
    100% {
        transform: scale(1);
    }
}

/* area media */
.media-picker {
    position: relative;
    overflow: hidden;
}

.media-picker::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent);
    transform: translateX(-120%);
    transition: transform .55s ease;
}

.media-picker:hover::after,
.media-picker.dragover::after {
    transform: translateX(120%);
}

.media-mini-preview {
    animation: mediaReveal .42s ease both;
}

@keyframes mediaReveal {
    from {
        opacity: 0;
        transform: translateY(10px) scale(.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* progress karakter lebih hidup */
.char-bar span {
    position: relative;
    overflow: hidden;
}

.char-bar span::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
    animation: barShine 1.7s ease-in-out infinite;
}

@keyframes barShine {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
}

/* kartu cerita */
[data-story-card] {
    animation: cardStagger .45s ease both;
}

[data-story-card]:nth-child(1) { animation-delay: .04s; }
[data-story-card]:nth-child(2) { animation-delay: .08s; }
[data-story-card]:nth-child(3) { animation-delay: .12s; }
[data-story-card]:nth-child(4) { animation-delay: .16s; }
[data-story-card]:nth-child(5) { animation-delay: .20s; }
[data-story-card]:nth-child(6) { animation-delay: .24s; }

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

.story-card {
    position: relative;
    overflow: hidden;
}

.story-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: -80%;
    width: 45%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
    transform: skewX(-16deg);
    transition: left .55s ease;
    z-index: 0;
}

.story-card:hover::before {
    left: 120%;
}

/* timeline cerita */
.timeline-node {
    transition: transform .18s ease, box-shadow .18s ease;
}

.timeline-node.active {
    animation: nodeGlow 2s ease-in-out infinite;
}

@keyframes nodeGlow {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(134,167,137,.24);
    }
    50% {
        box-shadow: 0 0 0 7px rgba(134,167,137,.08);
    }
}

.timeline-line {
    position: relative;
    overflow: hidden;
}

.timeline-line::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(134,167,137,.75), transparent);
    animation: timelineFlow 2.4s ease-in-out infinite;
}

@keyframes timelineFlow {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
}

/* status terkunci dan terbuka */
.badge-locked {
    animation: lockedBreath 2.6s ease-in-out infinite;
}

.badge-open {
    animation: openBreath 2.6s ease-in-out infinite;
}

@keyframes lockedBreath {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(216,180,106,.20);
    }
    50% {
        box-shadow: 0 0 0 7px rgba(216,180,106,.06);
    }
}

@keyframes openBreath {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(134,167,137,.22);
    }
    50% {
        box-shadow: 0 0 0 7px rgba(134,167,137,.07);
    }
}

/* countdown lebih terlihat sebagai elemen interaktif */
.story-countdown {
    position: relative;
    overflow: hidden;
}

.story-countdown::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent, rgba(255,255,255,.42), transparent);
    animation: countdownSweep 2.8s ease-in-out infinite;
}

@keyframes countdownSweep {
    from { transform: translateX(-120%); }
    to { transform: translateX(120%); }
}

/* modal pratinjau */
.preview-modal-card {
    animation: modalPop .28s ease both;
}

@keyframes modalPop {
    from {
        opacity: 0;
        transform: translateY(14px) scale(.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.final-preview {
    animation: storyPaperIn .42s ease both;
}

@keyframes storyPaperIn {
    from {
        opacity: 0;
        transform: translateY(10px);
        filter: blur(2px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* detail cerita */
.locked-panel {
    animation: lockedPanelIn .45s ease both;
}

@keyframes lockedPanelIn {
    from {
        opacity: 0;
        transform: translateY(14px) scale(.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.lock-state::before {
    animation: lockShakeSoft 2.4s ease-in-out infinite;
}

@keyframes lockShakeSoft {
    0%, 100% {
        transform: rotate(0deg) scale(1);
    }
    25% {
        transform: rotate(-3deg) scale(1.03);
    }
    50% {
        transform: rotate(3deg) scale(1.06);
    }
    75% {
        transform: rotate(-2deg) scale(1.03);
    }
}

.reading-paper {
    animation: readingOpen .55s ease both;
}

@keyframes readingOpen {
    from {
        opacity: 0;
        transform: translateY(18px) scale(.985);
        filter: blur(3px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

.open-state::before {
    animation: sparklePulse 1.9s ease-in-out infinite;
}

@keyframes sparklePulse {
    0%, 100% {
        transform: scale(1) rotate(0deg);
    }
    50% {
        transform: scale(1.12) rotate(8deg);
    }
}

/* filter daftar cerita */
.story-filter-panel {
    animation: filterEnter .45s ease both;
}

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

.story-card.hidden-by-filter {
    animation: filterOut .18s ease both;
}

@keyframes filterOut {
    to {
        opacity: 0;
        transform: scale(.97);
    }
}

/* empty state */
.empty-illustration {
    animation: emptyFloat 3.2s ease-in-out infinite;
}

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

/* hormati pengguna yang mengurangi animasi */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Fase 9: nuansa diary dan dekorasi dashboard dari permintaan klien. */
.diary-heading,
.memory-hero-copy h1,
.cerita-hero h1,
.cerita-modal .modal-title,
.journal-write-head h1,
.journal-list-head h1,
.journal-open-head h1,
.journal-locked-detail h1,
.journal-story-card h3,
.final-preview-title {
    font-family: var(--font-diary);
    font-weight: 700;
    letter-spacing: -.025em;
    overflow-wrap: anywhere;
}

.memory-dashboard {
    position: relative;
    isolation: isolate;
}

.memory-dashboard-hero,
.memory-summary-strip {
    position: relative;
    z-index: 1;
}

.memory-hero-copy {
    border-color: rgba(79,111,82,.18);
}

.memory-hero-copy::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent 35px,
        rgba(79,111,82,.055) 36px
    );
    pointer-events: none;
}

.memory-hero-copy::after {
    z-index: 0;
}

.memory-hero-copy > * {
    position: relative;
    z-index: 1;
}

.memory-hero-copy h1 {
    font-size: clamp(2.2rem, 4.7vw, 4.15rem);
    line-height: 1.12;
    animation: diaryContentIn .46s ease both;
}

.memory-hero-copy .dashboard-opening-note {
    animation: diaryContentIn .46s .08s ease both;
}

.memory-hero-actions {
    animation: diaryContentIn .46s .16s ease both;
}

.memory-vault-card {
    animation: diaryContentIn .5s .12s ease both;
}

body.dark-theme .memory-hero-copy::before {
    background: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent 35px,
        rgba(220,232,214,.055) 36px
    );
}

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

@media (max-width: 760px) {
    .memory-hero-copy h1,
    .journal-write-head h1,
    .journal-list-head h1,
    .journal-open-head h1,
    .journal-locked-detail h1 {
        font-size: clamp(2rem, 9vw, 3rem);
    }

}

@media (max-width: 420px) {
    .memory-hero-copy h1 {
        font-size: clamp(1.9rem, 10vw, 2.65rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .memory-hero-copy h1,
    .memory-hero-copy .dashboard-opening-note,
    .memory-hero-actions,
    .memory-vault-card {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Fase 8: interactive polish berisiko rendah dan siap diuji manual. */
.btn {
    position: relative;
}

.btn:not(:disabled):active {
    transform: translateY(0) scale(.985) !important;
}

.btn:disabled,
.btn[aria-busy="true"] {
    cursor: wait;
    opacity: .68;
    box-shadow: none !important;
}

.rc-global-feedback {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 2200;
    width: max-content;
    max-width: min(520px, calc(100vw - 150px));
    padding: 12px 18px;
    border: 1px solid rgba(79,111,82,.2);
    border-radius: 16px;
    background: #FFFDF7;
    color: #36563A;
    box-shadow: 0 18px 52px rgba(33,42,35,.2);
    font-weight: 700;
    transform: translateX(-50%);
    animation: rcGlobalFeedbackIn .2s ease both;
}

.rc-global-feedback[hidden] {
    display: none !important;
}

.rc-global-feedback.is-error {
    border-color: rgba(160,75,75,.28);
    color: #7B3535;
}

body.dark-theme .rc-global-feedback {
    border-color: rgba(220,232,214,.18);
    background: #262C27;
    color: #DCE8D6;
}

body.dark-theme .rc-global-feedback.is-error {
    color: #F2C9C5;
}

.memory-summary-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.memory-summary-strip article {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 18px 20px;
    border: 1px solid rgba(79,111,82,.14);
    border-radius: 22px;
    background: rgba(255,253,247,.78);
    box-shadow: 0 14px 36px rgba(62,76,63,.08);
    animation: rcSummaryIn .32s ease both;
}

.memory-summary-strip article:nth-child(2) { animation-delay: 50ms; }
.memory-summary-strip article:nth-child(3) { animation-delay: 100ms; }

.memory-summary-strip i {
    flex: 0 0 auto;
    color: var(--sage-dark, #4F6F52);
    font-size: 1.35rem;
}

.memory-summary-strip strong,
.memory-summary-strip span {
    display: block;
}

.memory-summary-strip strong {
    color: var(--sage-deep, #3F5B42);
    font-size: 1.35rem;
    font-variant-numeric: tabular-nums;
}

.memory-summary-strip span {
    color: var(--muted, #738071);
    font-size: .86rem;
}

body.dark-theme .memory-summary-strip article {
    border-color: rgba(220,232,214,.16);
    background: rgba(38,44,39,.82);
}

body.dark-theme .memory-summary-strip strong,
body.dark-theme .memory-summary-strip i {
    color: #DCE8D6;
}

.journal-filter-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: -4px 2px 18px;
}

.journal-filter-summary p {
    margin: 0;
    color: var(--j-muted, #6F756F);
}

.journal-filter-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.journal-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 11px;
    border: 1px solid rgba(79,111,82,.18);
    border-radius: 999px;
    background: rgba(220,232,214,.48);
    color: #36563A;
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
}

.journal-filter-chip:hover,
.journal-filter-chip:focus-visible {
    background: rgba(220,232,214,.78);
    color: #29482E;
}

body.dark-theme .journal-filter-chip {
    border-color: rgba(220,232,214,.16);
    background: rgba(125,146,122,.22);
    color: #DCE8D6;
}

.journal-card-countdown strong,
.journal-countdown strong {
    min-width: 2ch;
    font-variant-numeric: tabular-nums;
}

.rc-countdown-retry {
    margin-left: 6px;
    color: inherit !important;
    font-weight: 800;
}

@keyframes rcGlobalFeedbackIn {
    from { opacity: 0; transform: translate(-50%, 6px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

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

@media (max-width: 720px) {
    .memory-summary-strip {
        grid-template-columns: 1fr;
    }

    .journal-filter-summary {
        align-items: flex-start;
        flex-direction: column;
    }

    .journal-filter-chips {
        justify-content: flex-start;
    }
}

@media (max-width: 420px) {
    .rc-global-feedback {
        bottom: 130px;
        max-width: calc(100vw - 24px);
    }

    .journal-filter-chip {
        max-width: 100%;
        overflow-wrap: anywhere;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rc-global-feedback,
    .memory-summary-strip article {
        animation: none !important;
        transition: none !important;
    }

    .btn:not(:disabled):active {
        transform: none !important;
    }
}

/* Fase 5B: feedback sinkronisasi dan unlock dinamis tanpa redesign. */
.rc-countdown-page-feedback,
.rc-countdown-feedback {
    display: none;
    margin: 0 0 14px;
    padding: 11px 15px;
    border: 1px solid rgba(79, 111, 82, .16);
    border-radius: 16px;
    background: rgba(220, 232, 214, .5);
    color: #36563A;
    font-weight: 650;
}

.rc-countdown-page-feedback.is-visible,
.rc-countdown-feedback.is-visible {
    display: block;
}

.rc-countdown-page-feedback.is-error,
.rc-countdown-feedback.is-error {
    border-color: rgba(160, 75, 75, .2);
    background: rgba(244, 218, 214, .62);
    color: #7B3535;
}

.interactive-locked-detail [data-countdown-feedback] {
    grid-column: 1 / -1;
}

.interactive-locked-detail.is-unlocking .time-lock::before {
    content: "OPEN";
}

.interactive-locked-detail.is-unlocking .time-lock,
.journal-story-card.rc-story-unlocked {
    animation: rcServerUnlock .62s ease both;
}

.rc-dynamic-unlocked,
.rc-dynamic-unlocked .journal-story-body {
    animation: rcMemoryUnfold .72s ease both;
}

.rc-dynamic-unlocked .journal-story-body {
    white-space: pre-wrap;
}

body.dark-theme .rc-countdown-page-feedback,
body.dark-theme .rc-countdown-feedback {
    background: rgba(79, 111, 82, .24);
    border-color: rgba(220, 232, 214, .16);
    color: #DCE8D6;
}

body.dark-theme .rc-countdown-page-feedback.is-error,
body.dark-theme .rc-countdown-feedback.is-error {
    background: rgba(123, 53, 53, .28);
    color: #F2C9C5;
}

@keyframes rcServerUnlock {
    0% { transform: scale(1); filter: blur(1px); }
    45% { transform: scale(1.035); }
    100% { transform: scale(1); filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
    .interactive-locked-detail.is-unlocking .time-lock,
    .journal-story-card.rc-story-unlocked,
    .rc-dynamic-unlocked,
    .rc-dynamic-unlocked .journal-story-body {
        animation: none !important;
        transition: none !important;
    }
}


.click-feedback {
    animation: clickPop .22s ease both;
}

@keyframes clickPop {
    0% { transform: scale(1); }
    50% { transform: scale(.97); }
    100% { transform: scale(1); }
}

.step-list li.active-current {
    background: rgba(220,232,214,.35);
    border-radius: 16px;
}

.step-list li.active-current .step-num {
    background: linear-gradient(135deg, var(--sage), var(--sage-dark));
    color: #fff;
}


/* ===== V10 Guided Page Transition ===== */
.guided-transition {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background:
        radial-gradient(circle at top left, rgba(220,232,214,.88), transparent 36%),
        linear-gradient(135deg, rgba(255,252,245,.96), rgba(248,241,231,.96));
    backdrop-filter: blur(12px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.guided-transition.show {
    display: flex;
    animation: guidedFadeIn .22s ease both;
}

.guided-box {
    width: min(520px, 100%);
    border-radius: 30px;
    background: rgba(255,252,245,.92);
    border: 1px solid rgba(79,111,82,.14);
    box-shadow: 0 28px 90px rgba(62,76,63,.18);
    padding: 34px;
    text-align: center;
    animation: guidedBoxIn .35s ease both;
}

.guided-icon {
    width: 72px;
    height: 72px;
    border-radius: 26px;
    margin: 0 auto 18px;
    background: linear-gradient(145deg, var(--sage-soft), rgba(255,255,255,.74));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sage-dark);
    font-size: 2rem;
    box-shadow: 0 16px 35px rgba(62,76,63,.10);
    animation: guidedIconFloat 1.6s ease-in-out infinite;
}

.guided-title {
    font-family: 'Playfair Display', serif;
    color: var(--sage-dark);
    font-weight: 800;
    font-size: 1.65rem;
    margin-bottom: 10px;
}

.guided-message {
    color: var(--muted);
    line-height: 1.7;
    margin-bottom: 20px;
}

.guided-progress {
    height: 8px;
    border-radius: 999px;
    background: rgba(79,111,82,.12);
    overflow: hidden;
}

.guided-progress span {
    display: block;
    height: 100%;
    width: 0%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--sage), var(--gold));
    animation: guidedProgress .8s ease forwards;
}

@keyframes guidedFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes guidedBoxIn {
    from {
        opacity: 0;
        transform: translateY(18px) scale(.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

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

@keyframes guidedProgress {
    from { width: 0%; }
    to { width: 100%; }
}

@media (max-width: 576px) {
    .guided-box {
        padding: 26px 20px;
        border-radius: 24px;
    }

    .guided-title {
        font-size: 1.38rem;
    }
}


/* ===== V11 Guided Transition Quote ===== */
.guided-quote {
    margin: 2px 0 20px;
    color: var(--sage-dark);
    font-size: .95rem;
    line-height: 1.65;
    font-style: italic;
    opacity: .92;
    animation: quoteFade .52s ease both;
}

@keyframes quoteFade {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: .92;
        transform: translateY(0);
    }
}


/* ===== FINAL LOGIN OK LANDING ===== */
.landing-clean {
    min-height: 86vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 70px 18px;
    text-align: center;
}

.landing-clean-inner {
    max-width: 780px;
    margin: 0 auto;
}

.landing-clean-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(3.3rem, 8.5vw, 8rem);
    font-weight: 900;
    line-height: .95;
    color: transparent;
    background: linear-gradient(90deg, var(--sage-dark, #4f6f52), var(--sage, #86a789), var(--sage-dark, #4f6f52));
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    margin-bottom: 24px;
    animation: landingTitleIn .8s ease both, landingGradient 4.5s ease-in-out infinite;
}

.landing-clean-text {
    max-width: 660px;
    margin: 0 auto;
    color: var(--muted, #6f766f);
    font-size: clamp(1rem, 2vw, 1.22rem);
    line-height: 1.85;
    animation: landingTextIn .7s ease .16s both;
}

.landing-clean-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 30px;
    animation: landingActionsIn .7s ease .28s both;
}

@keyframes landingTitleIn {
    from {
        opacity: 0;
        transform: translateY(24px) scale(.98);
        filter: blur(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes landingGradient {
    0%, 100% { background-position: 0% center; }
    50% { background-position: 100% center; }
}

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

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


/* ===== UPGRADE CLEAN UI REVISION ===== */
.landing-upgrade { min-height: 86vh; }
.landing-clean-title {
    line-height: 1.14 !important;
    padding-bottom: 18px;
    margin-bottom: 10px !important;
    overflow: visible;
}
.landing-clean-text {
    font-family: 'Nunito Sans', 'Inter', 'Poppins', system-ui, sans-serif;
    max-width: 760px;
    font-size: clamp(1.04rem, 2vw, 1.24rem);
    line-height: 1.9;
    letter-spacing: .01em;
    color: rgba(69, 80, 70, .88);
}
.dashboard-clean-note {
    border-radius: 24px;
    background: rgba(255, 252, 245, .86);
    border: 1px solid rgba(79,111,82,.13);
    box-shadow: 0 14px 38px rgba(62,76,63,.08);
    padding: 22px;
    margin: 24px 0;
}
.dashboard-clean-note h4 {
    font-family: 'Playfair Display', serif;
    color: var(--sage-dark, #4f6f52);
    font-weight: 800;
    margin-bottom: 8px;
}
.dashboard-clean-note p { color: var(--muted, #6f766f); margin-bottom: 0; line-height: 1.7; }
.story-form-clean { max-width: 980px; margin: 0 auto; }
.story-form-clean .content-card { width: 100%; }
.music-top-left, #toggleMusic.music-toggle-btn { display: none !important; }

.music-float-icon {
    position: fixed;
    right: 22px;
    bottom: 22px;
    width: 54px;
    height: 54px;
    border-radius: 999px;
    border: 1px solid rgba(79,111,82,.2);
    background: rgba(255,252,245,.94);
    color: var(--sage-dark, #4f6f52);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    box-shadow: 0 16px 40px rgba(62,76,63,.16);
    backdrop-filter: blur(12px);
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.music-float-icon:hover { transform: translateY(-3px); background: rgba(220,232,214,.96); }
.music-float-icon .music-note { font-size: 1.65rem; line-height: 1; font-weight: 800; }
.music-float-icon.is-on {
    background: linear-gradient(135deg, var(--sage, #86a789), var(--sage-dark, #4f6f52));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 18px 46px rgba(79,111,82,.25);
}
.music-float-icon.is-on .music-note { animation: musicNoteDance .85s ease-in-out infinite; }
.music-float-icon.is-on::before, .music-float-icon.is-on::after {
    content: "";
    position: absolute;
    inset: -7px;
    border-radius: inherit;
    border: 1px solid rgba(134,167,137,.42);
    animation: musicPulse 1.6s ease-out infinite;
}
.music-float-icon.is-on::after { animation-delay: .55s; }
@keyframes musicNoteDance {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    35% { transform: translateY(-3px) rotate(-7deg); }
    70% { transform: translateY(2px) rotate(7deg); }
}
@keyframes musicPulse {
    from { opacity: .65; transform: scale(.88); }
    to { opacity: 0; transform: scale(1.28); }
}
@media (max-width: 768px) {
    .music-float-icon { right: 16px; bottom: 16px; width: 50px; height: 50px; }
    .landing-clean-title { padding-bottom: 14px; }
}


/* ===== UPGRADE INTERAKTIF BUKU + DASHBOARD ===== */

/* Dashboard lebih personal */
.dashboard-hero-clean {
    border-radius: 30px;
    background:
        radial-gradient(circle at top right, rgba(220,232,214,.70), transparent 42%),
        linear-gradient(135deg, rgba(255,252,245,.96), rgba(248,241,231,.88));
    border: 1px solid rgba(79,111,82,.13);
    box-shadow: 0 18px 55px rgba(62,76,63,.10);
    padding: 34px;
    margin-bottom: 22px;
    animation: dashboardEnter .55s ease both;
}

.dashboard-greeting {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 900;
    color: var(--sage-dark, #4f6f52);
    margin-bottom: 10px;
}

.dashboard-intro {
    max-width: 780px;
    color: rgba(69,80,70,.86);
    line-height: 1.75;
    margin-bottom: 0;
    font-size: 1.04rem;
}

@keyframes dashboardEnter {
    from { opacity: 0; transform: translateY(18px) scale(.99); filter: blur(3px); }
    to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* Quotes dashboard */
.quote-carousel-card {
    position: relative;
    border-radius: 26px;
    background: rgba(255,252,245,.86);
    border: 1px solid rgba(79,111,82,.13);
    box-shadow: 0 14px 42px rgba(62,76,63,.08);
    padding: 22px 24px;
    margin-bottom: 24px;
    overflow: hidden;
}

.quote-carousel-card::before {
    content: "“";
    position: absolute;
    right: 28px;
    top: -24px;
    font-family: 'Playfair Display', serif;
    font-size: 7rem;
    color: rgba(134,167,137,.14);
    line-height: 1;
}

.quote-label {
    display: block;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--sage-dark, #4f6f52);
    margin-bottom: 8px;
}

.dashboard-quote {
    color: rgba(69,80,70,.92);
    font-size: clamp(1rem, 2vw, 1.22rem);
    line-height: 1.75;
    font-style: italic;
    margin-bottom: 0;
    min-height: 42px;
}

.dashboard-quote.quote-change {
    animation: quoteSlideFade .48s ease both;
}

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

.dashboard-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin: 24px 0;
}

/* Navbar lebih interaktif */
.app-navbar .nav-link,
.navbar .nav-link {
    position: relative;
    transition: transform .18s ease, color .18s ease;
}

.app-navbar .nav-link::after,
.navbar .nav-link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 0;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--sage, #86a789), var(--sage-dark, #4f6f52));
    transition: width .22s ease, left .22s ease;
}

.app-navbar .nav-link:hover,
.navbar .nav-link:hover {
    transform: translateY(-2px);
}

.app-navbar .nav-link:hover::after,
.navbar .nav-link:hover::after,
.app-navbar .nav-link.active::after,
.navbar .nav-link.active::after {
    width: 72%;
    left: 14%;
}

.app-navbar .navbar-brand,
.navbar .navbar-brand {
    transition: transform .2s ease, letter-spacing .2s ease;
}

.app-navbar .navbar-brand:hover,
.navbar .navbar-brand:hover {
    transform: translateY(-1px) scale(1.015);
    letter-spacing: .02em;
}

/* Buat cerita: feel membuka buku/jurnal */
.story-book-stage {
    max-width: 1040px;
    margin: 0 auto;
    perspective: 1200px;
}

.book-paper-card {
    position: relative;
    overflow: hidden;
    border-radius: 32px !important;
    background:
        linear-gradient(90deg, rgba(79,111,82,.04) 1px, transparent 1px),
        linear-gradient(135deg, rgba(255,253,247,.98), rgba(250,244,234,.94)) !important;
    background-size: 34px 100%, auto;
    box-shadow: 0 26px 80px rgba(62,76,63,.14) !important;
    transform-origin: left center;
    animation: bookOpenIn .72s cubic-bezier(.2,.75,.2,1) both;
}

.book-paper-card::before {
    content: "";
    position: absolute;
    left: 22px;
    top: 24px;
    bottom: 24px;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(79,111,82,.08), rgba(79,111,82,.22), rgba(79,111,82,.08));
}

@keyframes bookOpenIn {
    0% {
        opacity: 0;
        transform: rotateY(-10deg) translateY(18px) scale(.985);
        filter: blur(3px);
    }
    70% {
        opacity: 1;
        transform: rotateY(2deg) translateY(0) scale(1);
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: rotateY(0deg) translateY(0) scale(1);
        filter: blur(0);
    }
}

.book-opening-note {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    border-radius: 24px;
    background: rgba(220,232,214,.34);
    border: 1px solid rgba(79,111,82,.12);
    padding: 18px 20px;
    margin-bottom: 22px;
    animation: bookNoteIn .55s ease .16s both;
}

.book-opening-note .book-icon {
    width: 42px;
    height: 42px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,252,245,.92);
    color: var(--sage-dark, #4f6f52);
    box-shadow: 0 10px 26px rgba(62,76,63,.09);
}

.book-opening-note h4 {
    font-family: 'Playfair Display', serif;
    color: var(--sage-dark, #4f6f52);
    font-weight: 800;
    margin-bottom: 4px;
}

.book-opening-note p {
    color: var(--muted, #6f766f);
    margin-bottom: 0;
    line-height: 1.65;
}

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

.book-form-section {
    animation: pageSectionIn .52s ease both;
}

.book-form-section:nth-of-type(1) { animation-delay: .08s; }
.book-form-section:nth-of-type(2) { animation-delay: .14s; }
.book-form-section:nth-of-type(3) { animation-delay: .20s; }
.book-form-section:nth-of-type(4) { animation-delay: .26s; }
.book-form-section:nth-of-type(5) { animation-delay: .32s; }

@keyframes pageSectionIn {
    from { opacity: 0; transform: translateX(16px); }
    to { opacity: 1; transform: translateX(0); }
}

.journal-textarea {
    min-height: 260px;
    line-height: 1.9 !important;
    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,.86) 0px,
            rgba(255,255,255,.86) 36px,
            rgba(134,167,137,.12) 37px
        ) !important;
    border-radius: 22px !important;
    padding: 18px 20px !important;
}

/* Musik global floating */
.music-top-left,
#toggleMusic.music-toggle-btn {
    display: none !important;
}

.music-float-icon {
    position: fixed;
    right: 22px;
    bottom: 22px;
    width: 54px;
    height: 54px;
    border-radius: 999px;
    border: 1px solid rgba(79,111,82,.2);
    background: rgba(255,252,245,.94);
    color: var(--sage-dark, #4f6f52);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    box-shadow: 0 16px 40px rgba(62,76,63,.16);
    backdrop-filter: blur(12px);
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}

.music-float-icon:hover {
    transform: translateY(-3px);
    background: rgba(220,232,214,.96);
}

.music-float-icon .music-note {
    font-size: 1.65rem;
    line-height: 1;
    font-weight: 800;
}

.music-float-icon.is-on {
    background: linear-gradient(135deg, var(--sage, #86a789), var(--sage-dark, #4f6f52));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 18px 46px rgba(79,111,82,.25);
}

.music-float-icon.is-on .music-note {
    animation: musicNoteDance .85s ease-in-out infinite;
}

.music-float-icon.is-on::before,
.music-float-icon.is-on::after {
    content: "";
    position: absolute;
    inset: -7px;
    border-radius: inherit;
    border: 1px solid rgba(134,167,137,.42);
    animation: musicPulse 1.6s ease-out infinite;
}

.music-float-icon.is-on::after {
    animation-delay: .55s;
}

@keyframes musicNoteDance {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    35% { transform: translateY(-3px) rotate(-7deg); }
    70% { transform: translateY(2px) rotate(7deg); }
}

@keyframes musicPulse {
    from { opacity: .65; transform: scale(.88); }
    to { opacity: 0; transform: scale(1.28); }
}

@media (max-width: 768px) {
    .dashboard-summary-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-hero-clean {
        padding: 24px;
    }

    .book-paper-card::before {
        display: none;
    }

    .music-float-icon {
        right: 16px;
        bottom: 16px;
        width: 50px;
        height: 50px;
    }
}


/* ===== REVISI: DASHBOARD CENTER, MUSIC ICON ONLY, JOURNALING STEPS ===== */

/* Dashboard diposisikan tengah dan label quotes dihapus */
.dashboard-centered {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dashboard-centered .dashboard-intro {
    margin-left: auto;
    margin-right: auto;
}

.quote-center-card {
    width: min(820px, 100%);
    margin: 24px auto 0;
    text-align: center;
    padding: 26px 34px;
}

.quote-center-card::before {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    top: -34px;
    opacity: .65;
}

.quote-center-card .dashboard-quote {
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Paksa hilangkan label quote kalau masih tersisa dari versi lama */
.quote-label {
    display: none !important;
}

/* Musik hanya ikon, tidak ada teks/tombol panjang */
.music-float-icon,
.music-toggle-btn,
.music-top-left,
#toggleMusic.music-float-icon,
#toggleMusic.music-toggle-btn {
    display: none !important;
}

.music-icon-only {
    position: fixed;
    right: 22px;
    bottom: 22px;
    width: 54px;
    height: 54px;
    border-radius: 999px;
    border: 1px solid rgba(79,111,82,.18);
    background: rgba(255,252,245,.94);
    color: var(--sage-dark, #4f6f52);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 1080;
    box-shadow: 0 16px 42px rgba(62,76,63,.17);
    backdrop-filter: blur(12px);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    font-size: 0;
}

.music-icon-only span {
    font-size: 1.75rem;
    line-height: 1;
    font-weight: 900;
}

.music-icon-only:hover {
    transform: translateY(-3px) scale(1.03);
    background: rgba(220,232,214,.96);
}

.music-icon-only.is-on {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, var(--sage, #86a789), var(--sage-dark, #4f6f52));
    box-shadow: 0 18px 48px rgba(79,111,82,.28);
}

.music-icon-only.is-on span {
    animation: musicIconDance 1s ease-in-out infinite;
}

.music-icon-only.is-on::before,
.music-icon-only.is-on::after {
    content: "";
    position: absolute;
    inset: -7px;
    border-radius: inherit;
    border: 1px solid rgba(134,167,137,.42);
    animation: musicIconPulse 1.7s ease-out infinite;
}

.music-icon-only.is-on::after {
    animation-delay: .55s;
}

@keyframes musicIconDance {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    30% { transform: translateY(-3px) rotate(-8deg); }
    70% { transform: translateY(2px) rotate(8deg); }
}

@keyframes musicIconPulse {
    from { opacity: .65; transform: scale(.88); }
    to { opacity: 0; transform: scale(1.28); }
}

/* Buat cerita: journaling bertahap, bukan muncul sekaligus */
.story-book-stage {
    max-width: 1050px;
    margin: 0 auto;
    perspective: 1400px;
}

.journal-book-shell,
.book-paper-card {
    position: relative;
    overflow: hidden;
    transform-origin: left center;
    animation: journalBookOpen 1.05s cubic-bezier(.2,.75,.2,1) both !important;
}

.journal-book-shell::after,
.book-paper-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(79,111,82,.08), transparent 18%, transparent 82%, rgba(79,111,82,.04));
    opacity: .45;
}

@keyframes journalBookOpen {
    0% {
        opacity: 0;
        transform: rotateY(-18deg) translateX(-18px) translateY(18px) scale(.97);
        filter: blur(4px);
    }
    55% {
        opacity: 1;
        transform: rotateY(4deg) translateX(0) translateY(0) scale(1);
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: rotateY(0) translateX(0) translateY(0) scale(1);
        filter: blur(0);
    }
}

.journal-opening-note {
    animation: journalStepIn .65s ease .35s both;
}

.journal-step {
    opacity: 0;
    animation: journalStepIn .58s ease both;
}

.journal-step:nth-of-type(1) { animation-delay: .65s; }
.journal-step:nth-of-type(2) { animation-delay: .95s; }
.journal-step:nth-of-type(3) { animation-delay: 1.25s; }
.journal-step:nth-of-type(4) { animation-delay: 1.55s; }
.journal-step:nth-of-type(5) { animation-delay: 1.85s; }
.journal-step:nth-of-type(6) { animation-delay: 2.15s; }
.journal-step:nth-of-type(7) { animation-delay: 2.45s; }
.journal-step:nth-of-type(8) { animation-delay: 2.75s; }

@keyframes journalStepIn {
    from {
        opacity: 0;
        transform: translateY(18px) translateX(10px);
        filter: blur(3px);
    }
    to {
        opacity: 1;
        transform: translateY(0) translateX(0);
        filter: blur(0);
    }
}

.journal-textarea {
    min-height: 280px !important;
    line-height: 1.9 !important;
    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,.88) 0px,
            rgba(255,255,255,.88) 36px,
            rgba(134,167,137,.13) 37px
        ) !important;
    border-radius: 22px !important;
    padding: 18px 20px !important;
}

@media (max-width: 768px) {
    .quote-center-card .dashboard-quote {
        min-height: 110px;
    }

    .music-icon-only {
        right: 16px;
        bottom: 16px;
        width: 50px;
        height: 50px;
    }
}


/* ===== REVISI FINAL DASHBOARD, MUSIC, JOURNALING ===== */

/* Dashboard text final */
.dashboard-final-hero {
    text-align: center !important;
    align-items: center !important;
    padding-top: 40px;
    padding-bottom: 40px;
}

.dashboard-final-hero .small-muted {
    font-size: 1rem;
    letter-spacing: .03em;
}

.dashboard-final-hero .dashboard-greeting {
    margin-bottom: 12px;
}

.dashboard-final-hero .dashboard-intro {
    max-width: 790px;
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(1.03rem, 2vw, 1.18rem);
}

.quote-label {
    display: none !important;
}

.quote-center-card {
    margin-top: 26px !important;
}

/* Hide all previous music UI variations */
.music-float-icon,
.music-icon-only,
.music-toggle-btn,
.music-top-left,
#toggleMusic.music-float-icon,
#toggleMusic.music-icon-only,
#toggleMusic.music-toggle-btn {
    display: none !important;
}

/* Real visible music icon */
.music-real-icon {
    position: fixed;
    right: 22px;
    bottom: 22px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid rgba(79,111,82,.22);
    background: rgba(255,252,245,.96);
    color: var(--sage-dark, #4f6f52);
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    z-index: 1200;
    box-shadow: 0 16px 44px rgba(62,76,63,.18);
    backdrop-filter: blur(12px);
    cursor: pointer;
    transition: transform .2s ease, background .2s ease, box-shadow .2s ease, color .2s ease;
}

.music-real-icon:hover {
    transform: translateY(-3px) scale(1.04);
    background: rgba(220,232,214,.98);
}

.music-real-icon .music-svg {
    width: 27px;
    height: 27px;
    display: block;
    fill: currentColor;
}

.music-real-icon.is-on {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, var(--sage, #86a789), var(--sage-dark, #4f6f52));
    box-shadow: 0 18px 52px rgba(79,111,82,.32);
}

.music-real-icon.is-on .music-svg {
    animation: musicRealBounce .95s ease-in-out infinite;
}

.music-real-icon.is-on::before,
.music-real-icon.is-on::after {
    content: "";
    position: absolute;
    inset: -7px;
    border-radius: inherit;
    border: 1px solid rgba(134,167,137,.48);
    animation: musicRealPulse 1.75s ease-out infinite;
}

.music-real-icon.is-on::after {
    animation-delay: .58s;
}

@keyframes musicRealBounce {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    35% { transform: translateY(-3px) rotate(-5deg); }
    70% { transform: translateY(2px) rotate(5deg); }
}

@keyframes musicRealPulse {
    from { opacity: .65; transform: scale(.88); }
    to { opacity: 0; transform: scale(1.30); }
}

/* Stronger journaling page opening */
.journal-scene {
    position: relative;
    max-width: 1050px;
    margin: 0 auto;
    perspective: 1600px;
}

.journal-cover-animation {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    display: flex;
    border-radius: 32px;
    overflow: hidden;
    animation: journalCoverGone .2s ease 1.55s both;
}

.journal-cover-left,
.journal-cover-right {
    flex: 1;
    min-height: 420px;
    background:
        radial-gradient(circle at 30% 30%, rgba(255,252,245,.22), transparent 38%),
        linear-gradient(135deg, #6f8f72, #4f6f52);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}

.journal-cover-left {
    transform-origin: left center;
    animation: journalCoverLeftOpen 1.45s cubic-bezier(.19,.76,.22,1) both;
}

.journal-cover-right {
    transform-origin: right center;
    animation: journalCoverRightOpen 1.45s cubic-bezier(.19,.76,.22,1) both;
}

@keyframes journalCoverLeftOpen {
    0% { transform: rotateY(0deg); opacity: 1; }
    72% { transform: rotateY(-84deg); opacity: .95; }
    100% { transform: rotateY(-96deg); opacity: 0; }
}

@keyframes journalCoverRightOpen {
    0% { transform: rotateY(0deg); opacity: 1; }
    72% { transform: rotateY(84deg); opacity: .95; }
    100% { transform: rotateY(96deg); opacity: 0; }
}

@keyframes journalCoverGone {
    to { visibility: hidden; opacity: 0; }
}

.journal-book-page {
    position: relative;
    overflow: hidden;
    border-radius: 32px !important;
    background:
        linear-gradient(90deg, rgba(79,111,82,.05) 1px, transparent 1px),
        linear-gradient(135deg, rgba(255,253,247,.98), rgba(250,244,234,.95)) !important;
    background-size: 34px 100%, auto;
    box-shadow: 0 26px 82px rgba(62,76,63,.14) !important;
    opacity: 0;
    transform-origin: center;
    animation: journalPageReveal .8s ease 1.35s both;
}

.journal-book-page::before {
    content: "";
    position: absolute;
    left: 22px;
    top: 24px;
    bottom: 24px;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(79,111,82,.08), rgba(79,111,82,.22), rgba(79,111,82,.08));
}

@keyframes journalPageReveal {
    from {
        opacity: 0;
        transform: translateY(20px) scale(.985);
        filter: blur(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

.journal-start-note {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    border-radius: 24px;
    background: rgba(220,232,214,.34);
    border: 1px solid rgba(79,111,82,.12);
    padding: 18px 20px;
    margin-bottom: 22px;
    opacity: 0;
    animation: journalItemIn .62s ease 1.95s both;
}

.journal-pen-icon {
    width: 42px;
    height: 42px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,252,245,.92);
    color: var(--sage-dark, #4f6f52);
    box-shadow: 0 10px 26px rgba(62,76,63,.09);
    font-size: 1.25rem;
}

.journal-start-note h4 {
    font-family: 'Playfair Display', serif;
    color: var(--sage-dark, #4f6f52);
    font-weight: 800;
    margin-bottom: 4px;
}

.journal-start-note p {
    color: var(--muted, #6f766f);
    margin-bottom: 0;
    line-height: 1.65;
}

/* Make every field appear clearly one by one */
.journal-progress-form .journal-step {
    opacity: 0;
    transform: translateY(18px);
    animation: journalItemIn .62s ease both;
}

.journal-progress-form .journal-step:nth-of-type(1) { animation-delay: 2.25s; }
.journal-progress-form .journal-step:nth-of-type(2) { animation-delay: 2.65s; }
.journal-progress-form .journal-step:nth-of-type(3) { animation-delay: 3.05s; }
.journal-progress-form .journal-step:nth-of-type(4) { animation-delay: 3.45s; }
.journal-progress-form .journal-step:nth-of-type(5) { animation-delay: 3.85s; }
.journal-progress-form .journal-step:nth-of-type(6) { animation-delay: 4.25s; }
.journal-progress-form .journal-step:nth-of-type(7) { animation-delay: 4.65s; }
.journal-progress-form .journal-step:nth-of-type(8) { animation-delay: 5.05s; }

@keyframes journalItemIn {
    from {
        opacity: 0;
        transform: translateY(18px) translateX(8px);
        filter: blur(3px);
    }
    to {
        opacity: 1;
        transform: translateY(0) translateX(0);
        filter: blur(0);
    }
}

.journal-writing-area {
    min-height: 280px !important;
    line-height: 1.9 !important;
    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,.88) 0px,
            rgba(255,255,255,.88) 36px,
            rgba(134,167,137,.13) 37px
        ) !important;
    border-radius: 22px !important;
    padding: 18px 20px !important;
}

@media (max-width: 768px) {
    .music-real-icon {
        right: 16px;
        bottom: 16px;
        width: 50px;
        height: 50px;
    }

    .music-real-icon .music-svg {
        width: 24px;
        height: 24px;
    }

    .journal-cover-animation {
        display: none;
    }

    .journal-book-page {
        animation-delay: .15s;
    }

    .journal-start-note {
        animation-delay: .45s;
    }

    .journal-progress-form .journal-step:nth-of-type(n) {
        animation-delay: .65s;
    }
}


/* ===== REVISI GUIDED STORY FINAL ===== */

/* Musik: benar-benar ikon not, tanpa teks panjang dan tanpa error visual */
.music-float-icon,
.music-icon-only,
.music-real-icon,
.music-toggle-btn,
.music-top-left,
#toggleMusic.music-float-icon,
#toggleMusic.music-icon-only,
#toggleMusic.music-real-icon,
#toggleMusic.music-toggle-btn {
    display: none !important;
}

.music-note-button {
    position: fixed;
    right: 22px;
    bottom: 22px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid rgba(79,111,82,.22);
    background: rgba(255,252,245,.96);
    color: var(--sage-dark, #4f6f52);
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    z-index: 1200;
    box-shadow: 0 16px 44px rgba(62,76,63,.18);
    backdrop-filter: blur(12px);
    cursor: pointer;
    transition: transform .2s ease, background .2s ease, box-shadow .2s ease, color .2s ease;
    font-size: 0;
}

.music-note-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 900;
    line-height: 1;
    transform: translateY(-1px);
}

.music-note-button:hover {
    transform: translateY(-3px) scale(1.04);
    background: rgba(220,232,214,.98);
}

.music-note-button.is-on {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, var(--sage, #86a789), var(--sage-dark, #4f6f52));
    box-shadow: 0 18px 52px rgba(79,111,82,.32);
}

.music-note-button.is-on .music-note-symbol {
    animation: musicNoteAlive .95s ease-in-out infinite;
}

.music-note-button.is-on::before,
.music-note-button.is-on::after {
    content: "";
    position: absolute;
    inset: -7px;
    border-radius: inherit;
    border: 1px solid rgba(134,167,137,.48);
    animation: musicNotePulse 1.75s ease-out infinite;
}

.music-note-button.is-on::after {
    animation-delay: .58s;
}

@keyframes musicNoteAlive {
    0%, 100% { transform: translateY(-1px) rotate(0deg); }
    35% { transform: translateY(-4px) rotate(-6deg); }
    70% { transform: translateY(2px) rotate(6deg); }
}

@keyframes musicNotePulse {
    from { opacity: .65; transform: scale(.88); }
    to { opacity: 0; transform: scale(1.30); }
}

/* Dashboard summary: info/reminder lebih hidup */
.dashboard-reminder-grid {
    align-items: stretch;
}

.dashboard-reminder-card {
    position: relative;
    overflow: hidden;
    animation: dashboardCardIn .7s ease both;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.dashboard-reminder-card:nth-child(1) { animation-delay: .15s; }
.dashboard-reminder-card:nth-child(2) { animation-delay: .32s; }
.dashboard-reminder-card:nth-child(3) { animation-delay: .49s; }

.dashboard-reminder-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 58px rgba(62,76,63,.14);
    border-color: rgba(79,111,82,.22);
}

.dashboard-reminder-card::after {
    content: "";
    position: absolute;
    right: -40px;
    top: -40px;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: rgba(134,167,137,.12);
}

.summary-card-icon {
    width: 46px;
    height: 46px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(220,232,214,.55);
    margin-bottom: 14px;
    font-size: 1.35rem;
    box-shadow: 0 10px 28px rgba(62,76,63,.08);
}

.dashboard-reminder-card .count-up {
    animation: countPop .65s ease both;
}

@keyframes dashboardCardIn {
    from { opacity: 0; transform: translateY(18px) scale(.985); filter: blur(3px); }
    to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes countPop {
    0% { transform: scale(.86); opacity: .25; }
    65% { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* Transisi halaman dibuat lebih terbaca */
.guided-transition.is-active .guided-box {
    animation-duration: .55s;
}

.guided-transition .guided-title,
.guided-transition .guided-message,
.guided-transition .guided-quote {
    line-height: 1.65;
}

.guided-progress span {
    animation-duration: 3s !important;
}

/* Guided journaling form */
.guided-story-page {
    max-width: 1040px;
    margin: 0 auto;
}

.guided-story-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    border-radius: 30px;
    background:
        radial-gradient(circle at top right, rgba(220,232,214,.70), transparent 44%),
        linear-gradient(135deg, rgba(255,252,245,.96), rgba(248,241,231,.88));
    border: 1px solid rgba(79,111,82,.13);
    box-shadow: 0 18px 55px rgba(62,76,63,.10);
    padding: 28px 30px;
    margin-bottom: 22px;
    animation: dashboardEnter .6s ease both;
}

.guided-book-mark {
    width: 54px;
    height: 54px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,252,245,.96);
    color: var(--sage-dark, #4f6f52);
    box-shadow: 0 12px 28px rgba(62,76,63,.10);
    font-size: 1.5rem;
    flex: 0 0 auto;
}

.guided-story-header h2 {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    color: var(--sage-dark, #4f6f52);
    margin-bottom: 8px;
}

.guided-story-header p:last-child {
    color: rgba(69,80,70,.86);
    margin-bottom: 0;
    line-height: 1.75;
}

.guided-progress-steps {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    margin-bottom: 18px;
}

.guided-progress-steps span {
    position: relative;
    border-radius: 999px;
    background: rgba(255,252,245,.82);
    border: 1px solid rgba(79,111,82,.13);
    color: rgba(69,80,70,.72);
    padding: 9px 10px;
    text-align: center;
    font-size: .88rem;
    font-weight: 700;
    box-shadow: 0 8px 22px rgba(62,76,63,.06);
    transition: transform .2s ease, background .2s ease, color .2s ease;
}

.guided-progress-steps span.active,
.guided-progress-steps span.done {
    background: rgba(220,232,214,.72);
    color: var(--sage-dark, #4f6f52);
}

.guided-progress-steps span.active {
    transform: translateY(-2px);
}

.guided-story-shell {
    position: relative;
    perspective: 1500px;
}

.journal-page-shadow {
    position: absolute;
    inset: 18px 22px -14px;
    border-radius: 34px;
    background: rgba(62,76,63,.08);
    filter: blur(12px);
    z-index: 0;
}

.guided-story-form {
    position: relative;
    z-index: 1;
    min-height: 520px;
    border-radius: 34px;
    padding: 30px;
    background:
        linear-gradient(90deg, rgba(79,111,82,.05) 1px, transparent 1px),
        linear-gradient(135deg, rgba(255,253,247,.98), rgba(250,244,234,.95));
    background-size: 34px 100%, auto;
    border: 1px solid rgba(79,111,82,.13);
    box-shadow: 0 26px 82px rgba(62,76,63,.14);
    overflow: hidden;
    animation: guidedBookOpen .9s cubic-bezier(.2,.75,.2,1) both;
}

.guided-story-form::before {
    content: "";
    position: absolute;
    left: 24px;
    top: 26px;
    bottom: 26px;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(79,111,82,.08), rgba(79,111,82,.22), rgba(79,111,82,.08));
}

@keyframes guidedBookOpen {
    from {
        opacity: 0;
        transform: rotateY(-11deg) translateY(18px) scale(.985);
        filter: blur(4px);
    }
    to {
        opacity: 1;
        transform: rotateY(0) translateY(0) scale(1);
        filter: blur(0);
    }
}

.story-guide-step {
    display: none;
    padding-left: 18px;
    min-height: 360px;
}

.story-guide-step.active {
    display: block;
    animation: guidePageTurn .46s ease both;
}

@keyframes guidePageTurn {
    from { opacity: 0; transform: translateX(24px) rotateY(-3deg); filter: blur(2px); }
    to { opacity: 1; transform: translateX(0) rotateY(0); filter: blur(0); }
}

.guide-step-intro {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    border-radius: 24px;
    background: rgba(220,232,214,.33);
    border: 1px solid rgba(79,111,82,.11);
    padding: 18px 20px;
    margin-bottom: 22px;
}

.guide-step-number {
    width: 42px;
    height: 42px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,252,245,.96);
    color: var(--sage-dark, #4f6f52);
    font-weight: 900;
    box-shadow: 0 10px 26px rgba(62,76,63,.09);
    flex: 0 0 auto;
}

.guide-step-intro h4 {
    font-family: 'Playfair Display', serif;
    color: var(--sage-dark, #4f6f52);
    font-weight: 850;
    margin-bottom: 4px;
}

.guide-step-intro p,
.guide-helper-text {
    color: var(--muted, #6f766f);
    line-height: 1.65;
}

.guide-helper-text {
    margin-top: 10px;
    margin-bottom: 0;
    font-size: .94rem;
}

.guided-input,
.guided-textarea {
    border-radius: 18px !important;
}

.guided-textarea,
.journal-writing-area {
    min-height: 280px !important;
    line-height: 1.9 !important;
    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,.88) 0px,
            rgba(255,255,255,.88) 36px,
            rgba(134,167,137,.13) 37px
        ) !important;
    padding: 18px 20px !important;
}

.guided-media-picker {
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.guided-media-picker:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 38px rgba(62,76,63,.10);
}

.preview-reminder-box {
    border-radius: 24px;
    background: rgba(255,252,245,.82);
    border: 1px solid rgba(79,111,82,.13);
    padding: 22px;
    color: rgba(69,80,70,.86);
}

.guided-story-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
    border-top: 1px solid rgba(79,111,82,.10);
    padding-top: 22px;
    margin-top: 24px;
}

/* Label -> kategori */
.story-label-options .label-option {
    animation: dashboardCardIn .5s ease both;
}

.story-label-options .label-option:nth-child(1) { animation-delay: .05s; }
.story-label-options .label-option:nth-child(2) { animation-delay: .12s; }
.story-label-options .label-option:nth-child(3) { animation-delay: .19s; }
.story-label-options .label-option:nth-child(4) { animation-delay: .26s; }
.story-label-options .label-option:nth-child(5) { animation-delay: .33s; }

@media (max-width: 768px) {
    .guided-story-header {
        padding: 22px;
    }

    .guided-progress-steps {
        grid-template-columns: repeat(2, 1fr);
    }

    .guided-story-form {
        padding: 22px;
        min-height: auto;
    }

    .guided-story-form::before {
        display: none;
    }

    .story-guide-step {
        padding-left: 0;
        min-height: 320px;
    }

    .music-note-button {
        right: 16px;
        bottom: 16px;
        width: 50px;
        height: 50px;
    }

    .music-note-symbol {
        font-size: 1.78rem;
    }
}


/* ===== JOURNAL WORKSPACE STYLE REVISION ===== */
.music-float-icon,.music-icon-only,.music-real-icon,.music-toggle-btn,.music-top-left,#toggleMusic.music-float-icon,#toggleMusic.music-icon-only,#toggleMusic.music-real-icon,#toggleMusic.music-toggle-btn{display:none!important}
.music-note-button{position:fixed;right:22px;bottom:22px;width:56px;height:56px;border-radius:50%;border:1px solid rgba(79,111,82,.22);background:rgba(255,252,245,.96);color:var(--sage-dark,#4f6f52);display:inline-flex!important;align-items:center;justify-content:center;z-index:1200;box-shadow:0 16px 44px rgba(62,76,63,.18);backdrop-filter:blur(12px);cursor:pointer;transition:.2s;font-size:0}
.music-note-symbol{font-size:2rem;font-weight:900;line-height:1;transform:translateY(-1px)}
.music-note-button:hover{transform:translateY(-3px) scale(1.04);background:rgba(220,232,214,.98)}
.music-note-button.is-on{color:#fff;border-color:transparent;background:linear-gradient(135deg,var(--sage,#86a789),var(--sage-dark,#4f6f52));box-shadow:0 18px 52px rgba(79,111,82,.32)}
.music-note-button.is-on .music-note-symbol{animation:musicNoteAlive .95s ease-in-out infinite}
.music-note-button.is-on:before,.music-note-button.is-on:after{content:"";position:absolute;inset:-7px;border-radius:inherit;border:1px solid rgba(134,167,137,.48);animation:musicNotePulse 1.75s ease-out infinite}
.music-note-button.is-on:after{animation-delay:.58s}
@keyframes musicNoteAlive{0%,100%{transform:translateY(-1px) rotate(0)}35%{transform:translateY(-4px) rotate(-6deg)}70%{transform:translateY(2px) rotate(6deg)}}
@keyframes musicNotePulse{from{opacity:.65;transform:scale(.88)}to{opacity:0;transform:scale(1.3)}}

.journal-workspace-page{max-width:1180px;margin:0 auto}
.journal-workspace-hero{display:flex;align-items:flex-start;gap:16px;border-radius:30px;background:radial-gradient(circle at top right,rgba(220,232,214,.7),transparent 44%),linear-gradient(135deg,rgba(255,252,245,.96),rgba(248,241,231,.88));border:1px solid rgba(79,111,82,.13);box-shadow:0 18px 55px rgba(62,76,63,.1);padding:28px 30px;margin-bottom:22px;animation:dashboardEnter .6s ease both}
.journal-hero-icon{width:54px;height:54px;border-radius:20px;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,252,245,.96);color:var(--sage-dark,#4f6f52);box-shadow:0 12px 28px rgba(62,76,63,.1);font-size:1.5rem;flex:0 0 auto}
.journal-workspace-hero h2{font-family:'Playfair Display',serif;font-weight:900;color:var(--sage-dark,#4f6f52);margin-bottom:8px}
.journal-workspace-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:20px;align-items:start}
.journal-step-sidebar{position:sticky;top:94px;display:grid;gap:10px;border-radius:28px;background:rgba(255,252,245,.86);border:1px solid rgba(79,111,82,.12);padding:14px;box-shadow:0 18px 55px rgba(62,76,63,.08)}
.journal-step-tab{width:100%;border:1px solid transparent;border-radius:20px;background:transparent;text-align:left;display:grid;grid-template-columns:34px 1fr;column-gap:10px;padding:12px;color:rgba(69,80,70,.78);transition:.18s}
.journal-step-tab span{grid-row:span 2;width:34px;height:34px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;background:rgba(220,232,214,.46);color:var(--sage-dark,#4f6f52);font-weight:900}
.journal-step-tab strong{font-size:.95rem}.journal-step-tab small{color:var(--muted,#6f766f)}
.journal-step-tab.active,.journal-step-tab.done{background:rgba(220,232,214,.55);border-color:rgba(79,111,82,.12)}
.journal-step-tab.active{transform:translateX(4px);box-shadow:0 10px 28px rgba(62,76,63,.08)}
.journal-main-panel{min-width:0}
.journal-workspace-form{position:relative;border-radius:34px;padding:28px;background:linear-gradient(90deg,rgba(79,111,82,.05) 1px,transparent 1px),linear-gradient(135deg,rgba(255,253,247,.98),rgba(250,244,234,.95));background-size:34px 100%,auto;border:1px solid rgba(79,111,82,.13);box-shadow:0 26px 82px rgba(62,76,63,.14);overflow:hidden;animation:guidedBookOpen .9s cubic-bezier(.2,.75,.2,1) both}
.journal-workspace-form:before{content:"";position:absolute;left:24px;top:26px;bottom:26px;width:3px;border-radius:999px;background:linear-gradient(180deg,rgba(79,111,82,.08),rgba(79,111,82,.22),rgba(79,111,82,.08))}
.journal-page-toolbar{position:relative;z-index:1;display:grid;gap:8px;margin-left:18px;margin-bottom:22px}
.journal-page-toolbar span{color:var(--sage-dark,#4f6f52);font-weight:800;font-size:.94rem}
.journal-progress-line{height:8px;border-radius:999px;background:rgba(79,111,82,.1);overflow:hidden}
.journal-progress-line span{display:block;height:100%;width:14.28%;border-radius:inherit;background:linear-gradient(90deg,var(--sage,#86a789),var(--sage-dark,#4f6f52));transition:width .28s ease}
.journal-guide-step{position:relative;z-index:1;display:none;padding-left:18px;min-height:420px}
.journal-guide-step.active{display:block;animation:guidePageTurn .46s ease both}
.sticker-category-grid .label-option .label-box{border-radius:24px;transition:.2s}
.sticker-category-grid .label-option:hover .label-box{transform:translateY(-4px) rotate(-.5deg);box-shadow:0 16px 38px rgba(62,76,63,.1)}
.focus-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.writing-style-grid{display:grid;gap:20px}
.color-choice-row{display:flex;gap:10px;flex-wrap:wrap}
.color-choice-row button{width:38px;height:38px;border-radius:999px;border:3px solid rgba(255,255,255,.9);box-shadow:0 8px 24px rgba(62,76,63,.12);transition:.18s}
.color-choice-row button[data-color=ink]{background:#2f352f}.color-choice-row button[data-color=brown]{background:#7a533c}.color-choice-row button[data-color=sage]{background:#4f6f52}.color-choice-row button[data-color=gray]{background:#4b5563}.color-choice-row button[data-color=navy]{background:#243b53}
.color-choice-row button.active,.color-choice-row button:hover{transform:translateY(-3px);outline:2px solid rgba(79,111,82,.35)}
.theme-choice-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.theme-choice-grid button{border:1px solid rgba(79,111,82,.14);border-radius:18px;background:rgba(255,252,245,.9);padding:12px 10px;color:rgba(69,80,70,.86);font-weight:700;transition:.18s}
.theme-choice-grid button.active,.theme-choice-grid button:hover{transform:translateY(-3px);background:rgba(220,232,214,.66);border-color:rgba(79,111,82,.22)}
.style-preview-note{border-radius:24px;background:rgba(255,252,245,.82);border:1px solid rgba(79,111,82,.12);padding:18px 20px;margin-top:22px}
.style-preview-note p{margin:8px 0 0;line-height:1.7}
.journal-workspace-form.font-serif .journal-writing-area,.journal-workspace-form.font-serif .inline-story-preview p,.journal-workspace-form.font-serif #stylePreviewText{font-family:Georgia,"Times New Roman",serif}
.journal-workspace-form.font-sans .journal-writing-area,.journal-workspace-form.font-sans .inline-story-preview p,.journal-workspace-form.font-sans #stylePreviewText{font-family:"Inter","Poppins",system-ui,sans-serif}
.journal-workspace-form.font-hand .journal-writing-area,.journal-workspace-form.font-hand .inline-story-preview p,.journal-workspace-form.font-hand #stylePreviewText{font-family:"Comic Sans MS","Segoe Print",cursive}
.journal-workspace-form.color-ink .journal-writing-area,.journal-workspace-form.color-ink .inline-story-preview p,.journal-workspace-form.color-ink #stylePreviewText{color:#2f352f}
.journal-workspace-form.color-brown .journal-writing-area,.journal-workspace-form.color-brown .inline-story-preview p,.journal-workspace-form.color-brown #stylePreviewText{color:#7a533c}
.journal-workspace-form.color-sage .journal-writing-area,.journal-workspace-form.color-sage .inline-story-preview p,.journal-workspace-form.color-sage #stylePreviewText{color:#4f6f52}
.journal-workspace-form.color-gray .journal-writing-area,.journal-workspace-form.color-gray .inline-story-preview p,.journal-workspace-form.color-gray #stylePreviewText{color:#4b5563}
.journal-workspace-form.color-navy .journal-writing-area,.journal-workspace-form.color-navy .inline-story-preview p,.journal-workspace-form.color-navy #stylePreviewText{color:#243b53}
.journal-workspace-form.theme-paper .journal-writing-area,.journal-workspace-form.theme-paper .inline-story-preview{background:#fffdf8!important}
.journal-workspace-form.theme-cream .journal-writing-area,.journal-workspace-form.theme-cream .inline-story-preview{background:#f8f1e7!important}
.journal-workspace-form.theme-sage .journal-writing-area,.journal-workspace-form.theme-sage .inline-story-preview{background:#eef5ec!important}
.journal-workspace-form.theme-night .journal-writing-area,.journal-workspace-form.theme-night .inline-story-preview{background:#263238!important;color:#f5f1e8!important}
.journal-workspace-form.theme-clean .journal-writing-area,.journal-workspace-form.theme-clean .inline-story-preview{background:#f8fafc!important}
.journal-writing-area{min-height:320px!important;line-height:1.9!important;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.88) 0,rgba(255,255,255,.88) 36px,rgba(134,167,137,.13) 37px)!important;padding:18px 20px!important;border-radius:22px!important}
.inline-story-preview{border-radius:28px;background:rgba(255,252,245,.88);border:1px solid rgba(79,111,82,.13);padding:24px;box-shadow:0 14px 38px rgba(62,76,63,.08)}
.inline-preview-head{display:flex;justify-content:space-between;gap:14px;align-items:center;margin-bottom:16px}
.inline-preview-head span{border-radius:999px;background:rgba(220,232,214,.65);color:var(--sage-dark,#4f6f52);font-weight:800;padding:7px 14px}
.inline-story-preview h3{font-family:'Playfair Display',serif;color:var(--sage-dark,#4f6f52);font-weight:900;margin-bottom:14px}
.inline-story-preview p{white-space:pre-wrap;line-height:1.85;margin-bottom:0}
.preview-media-inline{margin-top:20px}.preview-media-inline img,.preview-media-inline video,.media-mini-preview img,.media-mini-preview video{max-width:100%;border-radius:20px;box-shadow:0 16px 42px rgba(62,76,63,.12)}
.preview-warning{margin-top:16px;border-radius:20px;background:rgba(220,232,214,.42);border:1px solid rgba(79,111,82,.12);color:rgba(69,80,70,.84);padding:14px 16px;font-size:.94rem}
.guided-story-actions{position:relative;z-index:2;display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;border-top:1px solid rgba(79,111,82,.1);padding-top:22px;margin-top:24px}
body.focus-writing .journal-workspace-hero,body.focus-writing .journal-step-sidebar,body.focus-writing .journal-page-toolbar,body.focus-writing .guide-step-intro,body.focus-writing .guided-story-actions{opacity:.18;transition:.2s}
body.focus-writing .journal-workspace-layout{grid-template-columns:1fr}body.focus-writing .journal-step-sidebar{display:none}body.focus-writing .journal-guide-step:not([data-step="2"]){display:none!important}body.focus-writing .journal-guide-step[data-step="2"]{display:block!important}body.focus-writing .journal-writing-area{min-height:540px!important}
@media(max-width:992px){.journal-workspace-layout{grid-template-columns:1fr}.journal-step-sidebar{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}.theme-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:768px){.journal-workspace-hero{padding:22px}.journal-workspace-form{padding:22px}.journal-workspace-form:before{display:none}.journal-guide-step{padding-left:0;min-height:360px}.journal-step-sidebar{grid-template-columns:1fr}.music-note-button{right:16px;bottom:16px;width:50px;height:50px}.music-note-symbol{font-size:1.78rem}}


/* ===== TIME CAPSULE STORYTELLING REVISION ===== */

/* Stable music icon */
.music-float-icon,.music-icon-only,.music-real-icon,.music-toggle-btn,.music-top-left,#toggleMusic.music-float-icon,#toggleMusic.music-icon-only,#toggleMusic.music-real-icon,#toggleMusic.music-toggle-btn{display:none!important}
.music-note-button{position:fixed;right:22px;bottom:22px;width:56px;height:56px;border-radius:50%;border:1px solid rgba(79,111,82,.22);background:rgba(255,252,245,.96);color:var(--sage-dark,#4f6f52);display:inline-flex!important;align-items:center;justify-content:center;z-index:1200;box-shadow:0 16px 44px rgba(62,76,63,.18);backdrop-filter:blur(12px);cursor:pointer;transition:.2s;font-size:0}
.music-note-symbol{font-size:2rem;font-weight:900;line-height:1;transform:translateY(-1px)}
.music-note-button:hover{transform:translateY(-3px) scale(1.04);background:rgba(220,232,214,.98)}
.music-note-button.is-on{color:#fff;border-color:transparent;background:linear-gradient(135deg,var(--sage,#86a789),var(--sage-dark,#4f6f52));box-shadow:0 18px 52px rgba(79,111,82,.32)}
.music-note-button.is-on .music-note-symbol{animation:musicNoteAlive .95s ease-in-out infinite}
.music-note-button.is-on:before,.music-note-button.is-on:after{content:"";position:absolute;inset:-7px;border-radius:inherit;border:1px solid rgba(134,167,137,.48);animation:musicNotePulse 1.75s ease-out infinite}
.music-note-button.is-on:after{animation-delay:.58s}
@keyframes musicNoteAlive{0%,100%{transform:translateY(-1px) rotate(0)}35%{transform:translateY(-4px) rotate(-6deg)}70%{transform:translateY(2px) rotate(6deg)}}
@keyframes musicNotePulse{from{opacity:.65;transform:scale(.88)}to{opacity:0;transform:scale(1.3)}}

/* Dashboard capsule */
.capsule-dashboard-hero{position:relative;display:grid;grid-template-columns:160px 1fr;gap:24px;align-items:center;border-radius:34px;background:radial-gradient(circle at top right,rgba(220,232,214,.78),transparent 42%),linear-gradient(135deg,rgba(255,252,245,.97),rgba(248,241,231,.9));border:1px solid rgba(79,111,82,.13);box-shadow:0 24px 70px rgba(62,76,63,.12);padding:34px;margin-bottom:22px;overflow:hidden}
.capsule-hero-orb{width:132px;height:132px;border-radius:42px;background:linear-gradient(135deg,rgba(134,167,137,.28),rgba(79,111,82,.13));display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px rgba(79,111,82,.1),0 22px 55px rgba(62,76,63,.12);animation:capsuleFloat 3.8s ease-in-out infinite}
.capsule-hero-orb span{width:70px;height:92px;border-radius:28px 28px 34px 34px;background:linear-gradient(180deg,rgba(255,252,245,.98),rgba(220,232,214,.62));border:2px solid rgba(79,111,82,.22);box-shadow:0 12px 30px rgba(62,76,63,.12)}
@keyframes capsuleFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8px) rotate(2deg)}}
.capsule-hero-content h2{font-family:'Playfair Display',serif;font-weight:900;color:var(--sage-dark,#4f6f52);font-size:clamp(2rem,4vw,3.1rem);margin-bottom:10px}
.capsule-hero-content p{max-width:760px;line-height:1.75;color:rgba(69,80,70,.88)}
.capsule-hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.capsule-quote-card{margin-bottom:24px}
.capsule-dashboard-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px}
.capsule-info-panel{border-radius:28px;background:rgba(255,252,245,.9);border:1px solid rgba(79,111,82,.13);box-shadow:0 16px 45px rgba(62,76,63,.08);padding:24px}
.panel-title-row{display:flex;align-items:center;gap:10px;margin-bottom:14px}.panel-title-row h4{font-family:'Playfair Display',serif;color:var(--sage-dark,#4f6f52);font-weight:850;margin:0}
.capsule-info-panel h5{font-weight:800;color:rgba(69,80,70,.92)}
.capsule-countdown,.mini-countdown{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.capsule-countdown span,.mini-countdown span{border-radius:16px;background:rgba(220,232,214,.68);color:var(--sage-dark,#4f6f52);font-weight:900;padding:8px 12px;min-width:44px;text-align:center}
.capsule-countdown small,.mini-countdown small{color:var(--muted,#6f766f);font-weight:700}

/* Create capsule */
.time-capsule-create{max-width:1180px;margin:0 auto}
.capsule-create-hero,.capsule-list-hero{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;border-radius:32px;background:radial-gradient(circle at top right,rgba(220,232,214,.72),transparent 45%),linear-gradient(135deg,rgba(255,252,245,.97),rgba(248,241,231,.9));border:1px solid rgba(79,111,82,.13);box-shadow:0 20px 60px rgba(62,76,63,.1);padding:28px 30px;margin-bottom:22px}
.capsule-create-icon{width:58px;height:58px;border-radius:22px;background:rgba(255,252,245,.96);box-shadow:0 12px 28px rgba(62,76,63,.1);display:flex;align-items:center;justify-content:center;font-size:1.7rem;flex:0 0 auto}
.capsule-create-hero h2,.capsule-list-hero h2{font-family:'Playfair Display',serif;font-weight:900;color:var(--sage-dark,#4f6f52)}
.capsule-create-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:20px;align-items:start}
.capsule-step-sidebar{position:sticky;top:94px;display:grid;gap:10px;border-radius:28px;background:rgba(255,252,245,.88);border:1px solid rgba(79,111,82,.12);padding:14px;box-shadow:0 18px 55px rgba(62,76,63,.08)}
.capsule-step-tab{width:100%;border:1px solid transparent;border-radius:20px;background:transparent;text-align:left;display:grid;grid-template-columns:34px 1fr;column-gap:10px;padding:12px;color:rgba(69,80,70,.78);transition:.18s}
.capsule-step-tab span{grid-row:span 2;width:34px;height:34px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;background:rgba(220,232,214,.46);color:var(--sage-dark,#4f6f52);font-weight:900}
.capsule-step-tab strong{font-size:.95rem}.capsule-step-tab small{color:var(--muted,#6f766f)}
.capsule-step-tab.active,.capsule-step-tab.done{background:rgba(220,232,214,.58);border-color:rgba(79,111,82,.12)}
.capsule-step-tab.active{transform:translateX(4px);box-shadow:0 10px 28px rgba(62,76,63,.08)}
.capsule-form-shell{position:relative;border-radius:34px;padding:28px;background:linear-gradient(90deg,rgba(79,111,82,.05) 1px,transparent 1px),linear-gradient(135deg,rgba(255,253,247,.98),rgba(250,244,234,.95));background-size:34px 100%,auto;border:1px solid rgba(79,111,82,.13);box-shadow:0 26px 82px rgba(62,76,63,.14);overflow:hidden;animation:guidedBookOpen .9s cubic-bezier(.2,.75,.2,1) both}
.capsule-progress-toolbar{display:grid;gap:8px;margin-bottom:22px}.capsule-progress-toolbar>span{color:var(--sage-dark,#4f6f52);font-weight:800}.capsule-progress-track{height:8px;border-radius:999px;background:rgba(79,111,82,.1);overflow:hidden}.capsule-progress-track span{display:block;height:100%;width:16.66%;border-radius:inherit;background:linear-gradient(90deg,var(--sage,#86a789),var(--sage-dark,#4f6f52));transition:.28s}
.capsule-guide-step{display:none;min-height:410px}.capsule-guide-step.active{display:block;animation:guidePageTurn .46s ease both}
.capsule-step-intro{display:flex;gap:14px;align-items:flex-start;border-radius:24px;background:rgba(220,232,214,.34);border:1px solid rgba(79,111,82,.11);padding:18px 20px;margin-bottom:22px}
.capsule-step-number{width:42px;height:42px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:rgba(255,252,245,.96);color:var(--sage-dark,#4f6f52);font-weight:900;box-shadow:0 10px 26px rgba(62,76,63,.09);flex:0 0 auto}
.capsule-step-intro h4{font-family:'Playfair Display',serif;color:var(--sage-dark,#4f6f52);font-weight:850;margin-bottom:4px}.capsule-step-intro p{color:var(--muted,#6f766f);line-height:1.65;margin:0}
.capsule-category-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.capsule-category-card{cursor:pointer}.capsule-category-card input{display:none}.capsule-category-card{display:grid;gap:6px;border-radius:24px;background:rgba(255,252,245,.9);border:1px solid rgba(79,111,82,.13);padding:18px;transition:.2s;box-shadow:0 12px 30px rgba(62,76,63,.06)}
.capsule-category-card span{font-size:1.5rem}.capsule-category-card strong{color:rgba(69,80,70,.92)}.capsule-category-card small{color:var(--muted,#6f766f);line-height:1.5}
.capsule-category-card:has(input:checked),.capsule-category-card:hover{transform:translateY(-4px);background:rgba(220,232,214,.58);border-color:rgba(79,111,82,.24);box-shadow:0 16px 38px rgba(62,76,63,.1)}
.capsule-input,.capsule-writing-area{border-radius:20px!important}.capsule-writing-tools{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.capsule-writing-area{min-height:320px!important;line-height:1.9!important;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.88) 0,rgba(255,255,255,.88) 36px,rgba(134,167,137,.13) 37px)!important;padding:18px 20px!important}
.capsule-time-preview{border-radius:24px;background:rgba(255,252,245,.9);border:1px solid rgba(79,111,82,.13);padding:18px;margin-top:16px}.capsule-time-preview p{margin:6px 0 0;color:var(--muted,#6f766f)}
.capsule-inline-preview{position:relative;border-radius:30px;background:rgba(255,252,245,.9);border:1px solid rgba(79,111,82,.13);padding:26px;box-shadow:0 16px 44px rgba(62,76,63,.09);overflow:hidden}.capsule-seal{position:absolute;right:24px;top:18px;font-size:3.5rem;opacity:.12}.inline-preview-head{display:flex;justify-content:space-between;gap:14px;align-items:center;margin-bottom:16px}.inline-preview-head span{border-radius:999px;background:rgba(220,232,214,.65);color:var(--sage-dark,#4f6f52);font-weight:800;padding:7px 14px}.capsule-inline-preview h3{font-family:'Playfair Display',serif;color:var(--sage-dark,#4f6f52);font-weight:900;margin-bottom:14px}.capsule-inline-preview p{white-space:pre-wrap;line-height:1.85;margin-bottom:0}
.preview-warning{margin-top:16px;border-radius:20px;background:rgba(220,232,214,.42);border:1px solid rgba(79,111,82,.12);color:rgba(69,80,70,.84);padding:14px 16px;font-size:.94rem}

/* Shelf */
.capsule-filter-bar{display:grid;grid-template-columns:1fr 190px 190px auto;gap:10px;margin-bottom:18px;border-radius:24px;background:rgba(255,252,245,.86);border:1px solid rgba(79,111,82,.12);padding:14px;box-shadow:0 12px 36px rgba(62,76,63,.07)}
.capsule-shelf-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.capsule-card{position:relative;overflow:hidden;border-radius:30px;background:rgba(255,252,245,.92);border:1px solid rgba(79,111,82,.13);box-shadow:0 16px 45px rgba(62,76,63,.08);padding:22px;transition:.2s;animation:dashboardCardIn .6s ease both}.capsule-card:hover{transform:translateY(-6px);box-shadow:0 24px 64px rgba(62,76,63,.13)}
.capsule-card.is-locked{background:linear-gradient(135deg,rgba(255,252,245,.93),rgba(235,241,232,.78))}.capsule-card.is-open{background:linear-gradient(135deg,rgba(255,252,245,.96),rgba(248,241,231,.88))}
.capsule-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.capsule-status-icon{font-size:1.7rem}.capsule-status-badge{border-radius:999px;background:rgba(220,232,214,.68);color:var(--sage-dark,#4f6f52);font-weight:800;font-size:.82rem;padding:6px 12px}
.capsule-card h3{font-family:'Playfair Display',serif;color:var(--sage-dark,#4f6f52);font-weight:850}.capsule-label{font-weight:800;color:rgba(69,80,70,.8)}.capsule-card-desc{color:var(--muted,#6f766f)}
.capsule-card-footer{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-top:18px;flex-wrap:wrap}.capsule-card-footer small{color:var(--muted,#6f766f)}
.empty-capsule-state{grid-column:1/-1;text-align:center;border-radius:30px;background:rgba(255,252,245,.86);border:1px solid rgba(79,111,82,.12);padding:40px}.empty-capsule-state span{font-size:3rem}

/* Detail */
.locked-capsule-detail{display:grid;grid-template-columns:300px 1fr;gap:28px;align-items:center;border-radius:36px;background:radial-gradient(circle at top right,rgba(220,232,214,.75),transparent 45%),linear-gradient(135deg,rgba(255,252,245,.97),rgba(248,241,231,.9));border:1px solid rgba(79,111,82,.13);box-shadow:0 24px 70px rgba(62,76,63,.12);padding:34px}.capsule-lock-orb{width:230px;height:230px;border-radius:70px;background:linear-gradient(135deg,rgba(134,167,137,.28),rgba(79,111,82,.12));display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px rgba(79,111,82,.12),0 24px 60px rgba(62,76,63,.12);animation:capsuleFloat 4s ease-in-out infinite}.capsule-lock-orb span{font-size:5rem}
.locked-capsule-content h2,.open-capsule-banner h2{font-family:'Playfair Display',serif;font-weight:900;color:var(--sage-dark,#4f6f52)}
.locked-countdown-large{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:24px 0}.locked-countdown-large div{border-radius:24px;background:rgba(255,252,245,.88);border:1px solid rgba(79,111,82,.13);padding:16px;text-align:center}.locked-countdown-large strong{display:block;font-size:2rem;color:var(--sage-dark,#4f6f52)}.locked-countdown-large span{color:var(--muted,#6f766f);font-weight:700}
.locked-meta{border-radius:24px;background:rgba(255,252,245,.62);border:1px solid rgba(79,111,82,.1);padding:16px}.locked-meta p{margin-bottom:6px}
.open-capsule-banner{display:flex;gap:16px;align-items:flex-start;border-radius:32px;background:linear-gradient(135deg,rgba(255,252,245,.97),rgba(248,241,231,.9));border:1px solid rgba(79,111,82,.13);box-shadow:0 20px 60px rgba(62,76,63,.1);padding:28px;margin-bottom:20px}.open-capsule-icon{font-size:2rem;width:58px;height:58px;border-radius:22px;background:rgba(220,232,214,.6);display:flex;align-items:center;justify-content:center}
.opened-story-card{border-radius:34px;background:rgba(255,252,245,.94);border:1px solid rgba(79,111,82,.13);box-shadow:0 24px 70px rgba(62,76,63,.1);padding:30px;animation:storyReveal .8s ease both}.story-meta-strip{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px}.story-meta-strip span,.story-meta-strip small{border-radius:999px;background:rgba(220,232,214,.55);color:rgba(69,80,70,.86);padding:7px 14px;font-weight:700}.story-reveal-body{font-size:1.08rem;line-height:2;white-space:pre-wrap;color:rgba(48,56,49,.94);animation:storyTextIn 1.1s ease both}.story-media-section{margin-top:26px}.story-media-section h5{color:var(--sage-dark,#4f6f52);font-weight:850}.story-media-section img,.story-media-section video{max-width:100%;border-radius:24px;box-shadow:0 18px 50px rgba(62,76,63,.14)}
@keyframes storyReveal{from{opacity:0;transform:translateY(20px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes storyTextIn{from{opacity:0;filter:blur(4px)}to{opacity:1;filter:blur(0)}}

body.focus-writing .capsule-create-hero,body.focus-writing .capsule-step-sidebar,body.focus-writing .capsule-progress-toolbar,body.focus-writing .capsule-step-intro,body.focus-writing .guided-story-actions{opacity:.16;transition:.2s}body.focus-writing .capsule-create-layout{grid-template-columns:1fr}body.focus-writing .capsule-step-sidebar{display:none}body.focus-writing .capsule-guide-step:not([data-step="2"]){display:none!important}body.focus-writing .capsule-guide-step[data-step="2"]{display:block!important}body.focus-writing .capsule-writing-area{min-height:540px!important}
@media(max-width:992px){.capsule-dashboard-hero,.locked-capsule-detail{grid-template-columns:1fr}.capsule-dashboard-grid,.capsule-create-layout{grid-template-columns:1fr}.capsule-shelf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.capsule-filter-bar{grid-template-columns:1fr 1fr}.capsule-step-sidebar{position:static;grid-template-columns:repeat(2,1fr)}.capsule-category-grid{grid-template-columns:1fr}}
@media(max-width:768px){.capsule-shelf-grid,.capsule-filter-bar,.locked-countdown-large{grid-template-columns:1fr}.capsule-create-hero,.capsule-list-hero{display:block}.capsule-card-footer{display:grid}.music-note-button{right:16px;bottom:16px;width:50px;height:50px}.music-note-symbol{font-size:1.78rem}}
/* =========================================================
   RUANG CERITA - KONSEP KAPSUL FINAL
   Fokus: bukan notes biasa, tetapi time capsule storytelling.
========================================================= */

/* hide old music variations */
.music-float-icon,.music-icon-only,.music-real-icon,.music-toggle-btn,.music-top-left,#toggleMusic.music-float-icon,#toggleMusic.music-icon-only,#toggleMusic.music-real-icon,#toggleMusic.music-toggle-btn{display:none!important}
.music-note-button{position:fixed;right:22px;bottom:22px;width:56px;height:56px;border-radius:50%;border:1px solid rgba(79,111,82,.22);background:rgba(255,252,245,.96);color:var(--sage-dark,#4f6f52);display:inline-flex!important;align-items:center;justify-content:center;z-index:1200;box-shadow:0 16px 44px rgba(62,76,63,.18);backdrop-filter:blur(12px);cursor:pointer;transition:.2s;font-size:0}
.music-note-symbol{font-size:2rem;font-weight:900;line-height:1;transform:translateY(-1px)}
.music-note-button:hover{transform:translateY(-3px) scale(1.04);background:rgba(220,232,214,.98)}
.music-note-button.is-on{color:#fff;border-color:transparent;background:linear-gradient(135deg,var(--sage,#86a789),var(--sage-dark,#4f6f52));box-shadow:0 18px 52px rgba(79,111,82,.32)}
.music-note-button.is-on .music-note-symbol{animation:musicNoteAlive .95s ease-in-out infinite}
.music-note-button.is-on:before,.music-note-button.is-on:after{content:"";position:absolute;inset:-7px;border-radius:inherit;border:1px solid rgba(134,167,137,.48);animation:musicNotePulse 1.75s ease-out infinite}.music-note-button.is-on:after{animation-delay:.58s}
@keyframes musicNoteAlive{0%,100%{transform:translateY(-1px) rotate(0)}35%{transform:translateY(-4px) rotate(-6deg)}70%{transform:translateY(2px) rotate(6deg)}}@keyframes musicNotePulse{from{opacity:.65;transform:scale(.88)}to{opacity:0;transform:scale(1.3)}}

.tc-eyebrow{display:inline-flex;border-radius:999px;background:rgba(220,232,214,.62);color:var(--sage-dark,#4f6f52);font-weight:850;padding:7px 14px;margin-bottom:10px;letter-spacing:.02em}
.tc-muted{color:var(--muted,#6f766f)}.tc-lead{font-size:1.04rem;line-height:1.8;color:rgba(69,80,70,.86)}

/* Dashboard */
.tc-dashboard{max-width:1180px;margin:0 auto}.tc-hero{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) 420px;gap:28px;align-items:center;border-radius:38px;padding:42px;background:radial-gradient(circle at 78% 18%,rgba(220,232,214,.85),transparent 36%),linear-gradient(135deg,rgba(255,252,245,.98),rgba(248,241,231,.92));border:1px solid rgba(79,111,82,.13);box-shadow:0 28px 88px rgba(62,76,63,.14);overflow:hidden}
.tc-hero h1,.tc-create-intro h1,.tc-shelf-hero h1,.tc-lock-content h1,.tc-open-intro h1{font-family:'Playfair Display',serif;font-weight:950;color:var(--sage-dark,#4f6f52);font-size:clamp(2.2rem,4.5vw,4rem);line-height:1.05;margin-bottom:14px}.tc-hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.tc-capsule-stage{min-height:330px;display:grid;place-items:center;position:relative}.tc-orbit{position:absolute;width:310px;height:310px;border-radius:50%;border:1px dashed rgba(79,111,82,.24);animation:tcOrbit 18s linear infinite}.tc-orbit:before,.tc-orbit:after{content:"";position:absolute;width:14px;height:14px;border-radius:50%;background:rgba(79,111,82,.35)}.tc-orbit:before{top:28px;left:64px}.tc-orbit:after{bottom:36px;right:70px}
@keyframes tcOrbit{to{transform:rotate(360deg)}}.tc-capsule-object{position:relative;width:150px;height:230px;animation:tcFloat 4s ease-in-out infinite}.tc-capsule-lid{position:absolute;left:28px;top:0;width:94px;height:38px;border-radius:26px;background:linear-gradient(135deg,#6d8b72,#4f6f52);box-shadow:0 12px 30px rgba(79,111,82,.28)}.tc-capsule-glass{position:absolute;left:18px;top:28px;width:114px;height:180px;border-radius:42px;background:linear-gradient(180deg,rgba(255,252,245,.88),rgba(220,232,214,.45));border:2px solid rgba(79,111,82,.18);box-shadow:inset 0 0 28px rgba(255,255,255,.65),0 26px 60px rgba(62,76,63,.18)}.tc-capsule-note{position:absolute;left:43px;top:82px;width:66px;height:82px;border-radius:12px;background:#fff9ed;box-shadow:0 12px 26px rgba(62,76,63,.12);transform:rotate(-7deg)}
@keyframes tcFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-10px) rotate(2deg)}}.tc-stage-label{position:absolute;bottom:10px;border-radius:999px;background:rgba(255,252,245,.82);padding:8px 16px;color:var(--sage-dark,#4f6f52);font-weight:800;box-shadow:0 10px 28px rgba(62,76,63,.08)}
.tc-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:20px 0}.tc-metric-card,.tc-next-panel,.tc-latest-panel,.tc-quote-card{border-radius:30px;background:rgba(255,252,245,.9);border:1px solid rgba(79,111,82,.13);box-shadow:0 16px 48px rgba(62,76,63,.09);padding:24px}.tc-metric-card small{font-weight:850;color:var(--sage-dark,#4f6f52)}.tc-metric-card strong{display:block;font-size:2.35rem;color:rgba(48,56,49,.95)}.tc-metric-card p{margin:0;color:var(--muted,#6f766f)}
.tc-dashboard-panels{display:grid;grid-template-columns:1.25fr .75fr;gap:18px}.tc-panel-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:16px}.tc-panel-head>span{width:48px;height:48px;border-radius:18px;background:rgba(220,232,214,.56);display:grid;place-items:center;font-size:1.35rem}.tc-panel-head h3{font-family:'Playfair Display',serif;font-weight:900;color:var(--sage-dark,#4f6f52);margin:0}.tc-panel-head p{margin:4px 0 0;color:var(--muted,#6f766f)}
.tc-countdown-large{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:20px 0}.tc-countdown-large div{border-radius:24px;background:linear-gradient(180deg,rgba(220,232,214,.58),rgba(255,252,245,.9));border:1px solid rgba(79,111,82,.13);padding:16px;text-align:center}.tc-countdown-large strong{display:block;font-size:2rem;color:var(--sage-dark,#4f6f52)}.tc-countdown-large span{font-weight:750;color:var(--muted,#6f766f)}
.tc-mini-capsule-card{display:flex;gap:14px;align-items:center;border-radius:24px;background:rgba(220,232,214,.35);padding:18px}.tc-mini-capsule-card>span{font-size:2rem}.tc-mini-capsule-card h4{font-weight:850;margin:0;color:rgba(48,56,49,.94)}.tc-mini-capsule-card p{margin:5px 0 0;color:var(--muted,#6f766f)}.tc-empty-soft{border-radius:24px;background:rgba(220,232,214,.26);padding:20px}.tc-empty-soft p{margin:6px 0 0;color:var(--muted,#6f766f)}.tc-quote-card{text-align:center;margin-top:18px}.tc-quote-card p{margin:0;font-family:'Playfair Display',serif;font-size:1.3rem;color:var(--sage-dark,#4f6f52);font-weight:800}

/* Create */
.tc-create-page{max-width:1180px;margin:0 auto}.tc-create-intro{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:24px;align-items:center;border-radius:38px;padding:36px;background:linear-gradient(135deg,rgba(255,252,245,.98),rgba(248,241,231,.92));border:1px solid rgba(79,111,82,.13);box-shadow:0 28px 88px rgba(62,76,63,.12);margin-bottom:22px}
.tc-create-progress{text-align:center}.tc-progress-capsule{position:relative;width:112px;height:156px;margin:0 auto 12px;border-radius:38px;background:rgba(255,252,245,.82);border:2px solid rgba(79,111,82,.22);overflow:hidden;box-shadow:inset 0 0 18px rgba(255,255,255,.65),0 18px 48px rgba(62,76,63,.12)}.tc-progress-capsule span{position:absolute;left:0;bottom:0;width:100%;height:12%;background:linear-gradient(180deg,rgba(134,167,137,.55),rgba(79,111,82,.55));transition:height .35s ease}.tc-progress-capsule i{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;font-size:2rem;color:var(--sage-dark,#4f6f52);font-weight:900}.tc-create-progress p{font-weight:850;color:var(--sage-dark,#4f6f52);margin:0}
.tc-capsule-builder{border-radius:38px;background:rgba(255,252,245,.92);border:1px solid rgba(79,111,82,.13);box-shadow:0 26px 82px rgba(62,76,63,.12);overflow:hidden}.tc-build-map{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:rgba(79,111,82,.12);border-bottom:1px solid rgba(79,111,82,.12)}.tc-map-dot{border:0;background:rgba(255,252,245,.9);padding:16px 10px;color:rgba(69,80,70,.75);font-weight:850;transition:.2s}.tc-map-dot span{display:block;width:32px;height:32px;border-radius:13px;background:rgba(220,232,214,.48);margin:0 auto 8px;line-height:32px;color:var(--sage-dark,#4f6f52)}.tc-map-dot.active,.tc-map-dot.done{background:rgba(220,232,214,.56);color:var(--sage-dark,#4f6f52)}
.tc-build-stage{padding:30px}.tc-build-step{display:none;min-height:460px}.tc-build-step.active{display:block;animation:tcStepIn .45s ease both}@keyframes tcStepIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}.tc-stage-header{display:flex;gap:16px;align-items:flex-start;margin-bottom:24px}.tc-stage-header>span{width:54px;height:54px;border-radius:20px;display:grid;place-items:center;background:rgba(220,232,214,.58);color:var(--sage-dark,#4f6f52);font-weight:950}.tc-stage-header h2{font-family:'Playfair Display',serif;font-weight:900;color:var(--sage-dark,#4f6f52);margin:0 0 5px}.tc-stage-header p{margin:0;color:var(--muted,#6f766f);line-height:1.7}
.tc-purpose-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.tc-purpose-card{min-height:178px;border:1px solid rgba(79,111,82,.13);border-radius:28px;background:linear-gradient(180deg,rgba(255,252,245,.96),rgba(248,241,231,.68));padding:18px;text-align:left;display:grid;gap:8px;box-shadow:0 12px 30px rgba(62,76,63,.07);transition:.2s}.tc-purpose-card span{font-size:1.75rem}.tc-purpose-card strong{font-size:1.06rem;color:rgba(48,56,49,.95)}.tc-purpose-card small{color:var(--muted,#6f766f);line-height:1.5}.tc-purpose-card.active,.tc-purpose-card:hover{transform:translateY(-6px);background:rgba(220,232,214,.58);border-color:rgba(79,111,82,.25);box-shadow:0 18px 44px rgba(62,76,63,.12)}
.tc-identity-card,.tc-time-input-card,.tc-time-lock-preview,.tc-media-chamber,.tc-seal-note{border-radius:30px;background:linear-gradient(135deg,rgba(255,252,245,.98),rgba(248,241,231,.78));border:1px solid rgba(79,111,82,.13);padding:24px;box-shadow:0 14px 40px rgba(62,76,63,.07)}.tc-big-input{min-height:58px;border-radius:20px!important;font-size:1.05rem!important}
.tc-writing-desk{display:grid;grid-template-columns:250px 1fr;gap:18px}.tc-writing-sidebar{border-radius:28px;background:rgba(220,232,214,.32);border:1px solid rgba(79,111,82,.12);padding:18px;display:grid;gap:10px;align-content:start}.tc-writing-sidebar strong{color:var(--sage-dark,#4f6f52)}.tc-prompt-chip{border:1px solid rgba(79,111,82,.16);border-radius:999px;background:rgba(255,252,245,.9);padding:9px 12px;text-align:left;color:rgba(48,56,49,.9);font-weight:700;transition:.18s}.tc-prompt-chip:hover{background:rgba(220,232,214,.65);transform:translateX(3px)}.tc-writing-sidebar small{line-height:1.5;color:var(--muted,#6f766f)}
.tc-writing-tools{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.tc-story-paper{min-height:360px!important;border-radius:28px!important;line-height:1.95!important;padding:22px!important;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.9) 0,rgba(255,255,255,.9) 38px,rgba(134,167,137,.13) 39px)!important}
.tc-media-drop{min-height:170px;border-radius:28px!important;display:grid!important;place-items:center;text-align:center;background:rgba(255,252,245,.82)!important}.tc-media-preview{margin-top:16px}.tc-media-preview img,.tc-media-preview video,.preview-media-inline img,.preview-media-inline video{max-width:100%;border-radius:22px;box-shadow:0 16px 46px rgba(62,76,63,.12)}
.tc-time-lock-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.tc-time-presets{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.tc-time-presets button{border:1px solid rgba(79,111,82,.16);border-radius:999px;background:rgba(220,232,214,.48);color:var(--sage-dark,#4f6f52);font-weight:850;padding:9px 14px}.tc-time-lock-preview{text-align:center;display:grid;place-items:center}.tc-time-lock-preview span{font-size:3rem}.tc-time-lock-preview strong{color:var(--sage-dark,#4f6f52);font-size:1.25rem}.tc-time-lock-preview p{color:var(--muted,#6f766f);line-height:1.7;margin:.4rem 0 0}
.tc-final-seal-layout{display:grid;grid-template-columns:1.1fr .75fr;gap:18px}.tc-final-preview{position:relative;overflow:hidden;border-radius:34px;background:linear-gradient(135deg,rgba(255,252,245,.98),rgba(248,241,231,.78));border:1px solid rgba(79,111,82,.13);box-shadow:0 18px 50px rgba(62,76,63,.09);padding:28px}.tc-final-seal{position:absolute;right:22px;top:18px;font-size:4rem;opacity:.13}.inline-preview-head{display:flex;justify-content:space-between;gap:14px;align-items:center;margin-bottom:16px}.inline-preview-head span{border-radius:999px;background:rgba(220,232,214,.65);color:var(--sage-dark,#4f6f52);font-weight:850;padding:7px 14px}.tc-final-preview h3{font-family:'Playfair Display',serif;font-weight:900;color:var(--sage-dark,#4f6f52)}.tc-final-preview p{white-space:pre-wrap;line-height:1.85}.tc-seal-note h4{font-family:'Playfair Display',serif;color:var(--sage-dark,#4f6f52);font-weight:900}.tc-seal-note li{margin-bottom:10px;color:rgba(69,80,70,.88)}.tc-builder-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;border-top:1px solid rgba(79,111,82,.12);padding:22px 30px}

/* Shelf */
.tc-shelf-page{max-width:1180px;margin:0 auto}.tc-shelf-hero{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;border-radius:38px;background:linear-gradient(135deg,rgba(255,252,245,.98),rgba(248,241,231,.9));border:1px solid rgba(79,111,82,.13);box-shadow:0 24px 72px rgba(62,76,63,.11);padding:34px;margin-bottom:18px}.tc-shelf-hero p{max-width:760px;color:var(--muted,#6f766f);line-height:1.75}
.tc-shelf-filter{display:grid;grid-template-columns:1fr 180px 180px auto;gap:10px;border-radius:26px;background:rgba(255,252,245,.9);border:1px solid rgba(79,111,82,.13);padding:14px;box-shadow:0 12px 38px rgba(62,76,63,.07);margin-bottom:20px}.tc-shelf-track{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tc-shelf-capsule{position:relative;overflow:hidden;border-radius:34px;padding:24px;border:1px solid rgba(79,111,82,.13);box-shadow:0 18px 52px rgba(62,76,63,.1);transition:.2s}.tc-shelf-capsule:hover{transform:translateY(-6px);box-shadow:0 26px 72px rgba(62,76,63,.14)}.tc-shelf-capsule.locked{background:radial-gradient(circle at top right,rgba(220,232,214,.72),transparent 46%),linear-gradient(135deg,rgba(255,252,245,.96),rgba(235,241,232,.82))}.tc-shelf-capsule.opened{background:radial-gradient(circle at top right,rgba(248,241,231,.84),transparent 46%),linear-gradient(135deg,rgba(255,252,245,.98),rgba(248,241,231,.88))}
.tc-capsule-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.tc-capsule-head span{font-size:1.8rem}.tc-capsule-head small{border-radius:999px;background:rgba(220,232,214,.68);color:var(--sage-dark,#4f6f52);font-weight:850;padding:6px 12px}.tc-shelf-capsule h3{font-family:'Playfair Display',serif;font-weight:900;color:var(--sage-dark,#4f6f52)}.tc-capsule-purpose{font-weight:850;color:rgba(69,80,70,.82)}
.tc-card-countdown{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0}.tc-card-countdown div{border-radius:18px;background:rgba(255,252,245,.75);padding:12px;text-align:center}.tc-card-countdown strong{display:block;color:var(--sage-dark,#4f6f52);font-size:1.35rem}.tc-card-countdown span{font-size:.78rem;color:var(--muted,#6f766f);font-weight:750}.tc-open-state{border-radius:22px;background:rgba(220,232,214,.45);padding:16px;margin:18px 0}.tc-open-state p{margin:4px 0 0;color:var(--muted,#6f766f)}.tc-capsule-footer{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}.tc-capsule-footer small{color:var(--muted,#6f766f)}.tc-empty-shelf{grid-column:1/-1;text-align:center;border-radius:34px;background:rgba(255,252,245,.9);border:1px solid rgba(79,111,82,.13);box-shadow:0 16px 48px rgba(62,76,63,.08);padding:44px}.tc-empty-shelf span{font-size:3rem}

/* Detail locked/open */
.tc-locked-detail{display:grid;grid-template-columns:350px minmax(0,1fr);gap:30px;align-items:center;max-width:1180px;margin:0 auto;border-radius:42px;background:radial-gradient(circle at 20% 15%,rgba(220,232,214,.82),transparent 36%),linear-gradient(135deg,rgba(255,252,245,.98),rgba(248,241,231,.92));border:1px solid rgba(79,111,82,.13);box-shadow:0 30px 92px rgba(62,76,63,.14);padding:40px}.tc-lock-visual{display:grid;place-items:center}.tc-locked-capsule{position:relative;width:210px;height:300px;animation:tcFloat 4s ease-in-out infinite}.tc-lock-lid{position:absolute;left:44px;top:0;width:122px;height:48px;border-radius:28px;background:linear-gradient(135deg,#6d8b72,#4f6f52)}.tc-lock-body{position:absolute;left:24px;top:38px;width:162px;height:238px;border-radius:56px;background:linear-gradient(180deg,rgba(255,252,245,.88),rgba(220,232,214,.45));border:2px solid rgba(79,111,82,.2);box-shadow:inset 0 0 30px rgba(255,255,255,.65),0 26px 70px rgba(62,76,63,.18)}.tc-locked-capsule strong{position:absolute;inset:0;display:grid;place-items:center;font-size:4.2rem;z-index:2}.tc-lock-meta,.tc-lock-message{border-radius:26px;background:rgba(255,252,245,.78);border:1px solid rgba(79,111,82,.12);padding:18px;margin-top:16px}.tc-lock-meta p{margin-bottom:7px}.tc-lock-message p{margin:.4rem 0 0;color:var(--muted,#6f766f);line-height:1.7}
.tc-open-detail{max-width:1020px;margin:0 auto}.tc-open-intro{display:flex;gap:18px;align-items:flex-start;border-radius:38px;background:linear-gradient(135deg,rgba(255,252,245,.98),rgba(248,241,231,.92));border:1px solid rgba(79,111,82,.13);box-shadow:0 24px 72px rgba(62,76,63,.11);padding:34px;margin-bottom:20px}.tc-open-icon{width:68px;height:68px;border-radius:24px;background:rgba(220,232,214,.62);display:grid;place-items:center;font-size:2rem;flex:0 0 auto}.tc-open-intro p{color:var(--muted,#6f766f);line-height:1.75}
.tc-story-unsealed{border-radius:42px;background:linear-gradient(180deg,rgba(255,252,245,.98),rgba(248,241,231,.84));border:1px solid rgba(79,111,82,.13);box-shadow:0 28px 88px rgba(62,76,63,.13);padding:34px;animation:storyReveal .75s ease both}.tc-unseal-strip{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px}.tc-unseal-strip span,.tc-unseal-strip small{border-radius:999px;background:rgba(220,232,214,.6);padding:8px 14px;color:rgba(48,56,49,.86);font-weight:800}.tc-unseal-divider{text-align:center;border-top:1px solid rgba(79,111,82,.13);margin:18px 0 24px}.tc-unseal-divider span{position:relative;top:-13px;background:#fffaf0;border-radius:999px;padding:5px 14px;color:var(--sage-dark,#4f6f52);font-weight:850}.tc-story-body{font-size:1.08rem;line-height:2.05;color:rgba(48,56,49,.94);animation:storyTextIn 1s ease both}.tc-story-media{margin-top:30px;border-radius:30px;background:rgba(220,232,214,.25);border:1px solid rgba(79,111,82,.1);padding:22px}.tc-story-media h3{font-family:'Playfair Display',serif;font-weight:900;color:var(--sage-dark,#4f6f52)}.tc-story-media p{color:var(--muted,#6f766f)}.tc-story-media img,.tc-story-media video{max-width:100%;border-radius:24px;box-shadow:0 18px 54px rgba(62,76,63,.14)}
@keyframes storyReveal{from{opacity:0;transform:translateY(22px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes storyTextIn{from{opacity:0;filter:blur(4px)}to{opacity:1;filter:blur(0)}}

/* focus mode */
body.focus-writing .tc-create-intro,body.focus-writing .tc-build-map,body.focus-writing .tc-stage-header,body.focus-writing .tc-builder-actions,body.focus-writing .tc-writing-sidebar{opacity:.12;transition:.2s}body.focus-writing .tc-writing-desk{grid-template-columns:1fr}body.focus-writing .tc-writing-sidebar{display:none}body.focus-writing .tc-build-step:not([data-step="2"]){display:none!important}body.focus-writing .tc-build-step[data-step="2"]{display:block!important}body.focus-writing .tc-story-paper{min-height:560px!important}

@media(max-width:1080px){.tc-hero,.tc-create-intro,.tc-locked-detail{grid-template-columns:1fr}.tc-capsule-stage{min-height:280px}.tc-purpose-grid{grid-template-columns:repeat(2,1fr)}.tc-dashboard-panels,.tc-time-lock-grid,.tc-final-seal-layout,.tc-writing-desk{grid-template-columns:1fr}.tc-shelf-track{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.tc-hero,.tc-create-intro,.tc-shelf-hero,.tc-locked-detail,.tc-open-intro{padding:24px}.tc-build-map{grid-template-columns:repeat(3,1fr)}.tc-metrics,.tc-countdown-large,.tc-shelf-track,.tc-shelf-filter{grid-template-columns:1fr}.tc-build-stage{padding:20px}.tc-purpose-grid{grid-template-columns:1fr}.tc-builder-actions{justify-content:flex-start;padding:20px}.tc-shelf-hero{display:block}.tc-open-intro{display:block}.tc-open-icon{margin-bottom:14px}.music-note-button{right:16px;bottom:16px;width:50px;height:50px}.music-note-symbol{font-size:1.78rem}}


/* =========================================================
   CALM NEUTRAL TIME CAPSULE THEME
   Tema: tenang, netral, modern, realistis.
========================================================= */
:root{
--cn-bg:#FAF8F3;--cn-bg-2:#F3EEE6;--cn-bg-3:#EEF0ED;--cn-card:rgba(255,253,247,.86);--cn-card-solid:#FFFDF7;--cn-text:#2F3430;--cn-muted:#6F756F;--cn-sage:#7D927A;--cn-sage-dark:#5F735E;--cn-olive:#4F604F;--cn-line:rgba(95,115,94,.14);--cn-shadow:0 24px 70px rgba(65,73,66,.11);--cn-shadow-soft:0 14px 38px rgba(65,73,66,.08)
}
html{scroll-behavior:smooth}
body.calm-neutral-app,body{background:radial-gradient(circle at 12% 8%,rgba(220,232,214,.55),transparent 28%),radial-gradient(circle at 84% 18%,rgba(243,238,230,.88),transparent 34%),linear-gradient(135deg,var(--cn-bg),var(--cn-bg-3))!important;color:var(--cn-text)}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgba(95,115,94,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(95,115,94,.032) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.55),transparent 78%);z-index:-1}
.btn{transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease!important}.btn:hover{transform:translateY(-2px)}
.btn-sage,.btn-success{background:linear-gradient(135deg,var(--cn-sage),var(--cn-sage-dark))!important;border-color:transparent!important;color:#fff!important;box-shadow:0 12px 30px rgba(95,115,94,.22)}
.btn-sage:hover,.btn-success:hover{box-shadow:0 18px 42px rgba(95,115,94,.30)}
.btn-outline-success{border-color:rgba(95,115,94,.30)!important;color:var(--cn-sage-dark)!important;background:rgba(255,253,247,.45)!important}
.btn-outline-success:hover{background:rgba(220,232,214,.62)!important;color:var(--cn-olive)!important;box-shadow:0 12px 30px rgba(95,115,94,.13)}
.form-control,.form-select{background:rgba(255,253,247,.82)!important;border:1px solid rgba(95,115,94,.16)!important;border-radius:18px!important;color:var(--cn-text)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.72);transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}
.form-control:focus,.form-select:focus{background:#fffdf7!important;border-color:rgba(95,115,94,.46)!important;box-shadow:0 0 0 .22rem rgba(125,146,122,.14)!important}
.alert{border-radius:22px!important;border:1px solid rgba(95,115,94,.13)!important;box-shadow:var(--cn-shadow-soft)}
.navbar,.app-navbar,header .navbar{position:sticky!important;top:14px;z-index:1050;width:min(1180px,calc(100% - 28px));margin:14px auto 22px!important;border-radius:999px!important;background:rgba(255,253,247,.72)!important;border:1px solid rgba(95,115,94,.16)!important;box-shadow:0 18px 48px rgba(65,73,66,.10)!important;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);padding:10px 14px!important}
.navbar-brand,.app-brand,.navbar .navbar-brand{font-weight:900!important;color:var(--cn-olive)!important;letter-spacing:-.02em}
.navbar .nav-link,.app-navbar .nav-link,.nav-link{border-radius:999px;padding:9px 14px!important;color:rgba(47,52,48,.72)!important;font-weight:750;transition:background .18s ease,color .18s ease,transform .18s ease}
.navbar .nav-link:hover,.app-navbar .nav-link:hover,.navbar .nav-link.active,.app-navbar .nav-link.active,.nav-link.active{color:var(--cn-olive)!important;background:rgba(220,232,214,.64);transform:translateY(-1px)}
.music-float-icon,.music-icon-only,.music-real-icon,.music-toggle-btn,.music-top-left,#toggleMusic.music-float-icon,#toggleMusic.music-icon-only,#toggleMusic.music-real-icon,#toggleMusic.music-toggle-btn{display:none!important}
.music-note-button{position:fixed!important;right:24px!important;bottom:24px!important;width:54px!important;height:54px!important;border-radius:50%!important;background:rgba(255,253,247,.74)!important;border:1px solid rgba(95,115,94,.18)!important;color:var(--cn-sage-dark)!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;z-index:1200!important;box-shadow:0 18px 46px rgba(65,73,66,.13)!important;backdrop-filter:blur(16px);font-size:0!important}
.music-note-symbol{font-size:2rem;font-weight:900;line-height:1;transform:translateY(-1px)}
.music-note-button.is-on{color:#fff!important;background:linear-gradient(135deg,var(--cn-sage),var(--cn-sage-dark))!important}
.tc-capsule-object,.tc-progress-capsule,.tc-locked-capsule{filter:drop-shadow(0 24px 28px rgba(65,73,66,.13))}
.tc-capsule-glass,.tc-progress-capsule,.tc-lock-body{position:relative}
.tc-capsule-glass:before,.tc-progress-capsule:before,.tc-lock-body:before{content:"";position:absolute;left:20%;top:9%;width:18%;height:70%;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.08));filter:blur(.2px);opacity:.9}
.tc-capsule-glass:after,.tc-progress-capsule:after,.tc-lock-body:after{content:"";position:absolute;inset:8px 10px 16px;border-radius:inherit;border:1px solid rgba(255,255,255,.42);pointer-events:none}
.tc-capsule-note{background:linear-gradient(180deg,rgba(255,253,247,.98),rgba(243,238,230,.94))!important;border:1px solid rgba(95,115,94,.10)}
.tc-capsule-note:before{content:"";position:absolute;left:12px;right:12px;top:20px;height:1px;background:rgba(95,115,94,.20);box-shadow:0 16px 0 rgba(95,115,94,.16),0 32px 0 rgba(95,115,94,.12)}
.tc-hero,.tc-create-intro,.tc-shelf-hero,.tc-locked-detail,.tc-open-intro,.tc-story-unsealed,.tc-capsule-builder{background:rgba(255,253,247,.76)!important;border:1px solid var(--cn-line)!important;box-shadow:var(--cn-shadow)!important;backdrop-filter:blur(14px);animation:cnSurfaceIn .55s ease both}
.tc-hero{background:radial-gradient(circle at 74% 18%,rgba(220,232,214,.72),transparent 34%),radial-gradient(circle at 20% 84%,rgba(243,238,230,.95),transparent 32%),rgba(255,253,247,.76)!important}
.tc-hero h1,.tc-create-intro h1,.tc-shelf-hero h1,.tc-lock-content h1,.tc-open-intro h1{color:var(--cn-olive)!important;letter-spacing:-.045em}
.tc-hero h1:after,.tc-create-intro h1:after,.tc-shelf-hero h1:after{content:"";display:block;width:72px;height:4px;border-radius:999px;background:linear-gradient(90deg,var(--cn-sage),rgba(125,146,122,.16));margin-top:18px}
.tc-eyebrow{background:rgba(220,232,214,.62)!important;color:var(--cn-olive)!important;border:1px solid rgba(95,115,94,.10);box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}
.tc-lead,.tc-hero-copy p,.tc-create-intro p,.tc-shelf-hero p,.tc-open-intro p{color:var(--cn-muted)!important}
.tc-stage-label{background:rgba(255,253,247,.76)!important;border:1px solid rgba(95,115,94,.14);backdrop-filter:blur(10px);color:var(--cn-olive)!important}
.tc-metric-card,.tc-next-panel,.tc-latest-panel,.tc-quote-card,.tc-purpose-card,.tc-identity-card,.tc-time-input-card,.tc-time-lock-preview,.tc-media-chamber,.tc-seal-note,.tc-final-preview,.tc-writing-sidebar,.tc-shelf-filter,.tc-lock-meta,.tc-lock-message,.tc-story-media{background:rgba(255,253,247,.68)!important;border:1px solid rgba(95,115,94,.13)!important;box-shadow:var(--cn-shadow-soft)!important;backdrop-filter:blur(10px)}
.tc-metric-card,.tc-next-panel,.tc-latest-panel,.tc-purpose-card,.tc-shelf-capsule{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.tc-metric-card:hover,.tc-next-panel:hover,.tc-latest-panel:hover,.tc-purpose-card:hover,.tc-purpose-card.active,.tc-shelf-capsule:hover{transform:translateY(-5px);box-shadow:0 22px 58px rgba(65,73,66,.12)!important;border-color:rgba(95,115,94,.22)!important}
.tc-purpose-card.active,.tc-purpose-card:hover{background:radial-gradient(circle at top right,rgba(220,232,214,.72),transparent 55%),rgba(255,253,247,.84)!important;transform:translateY(-5px) scale(1.01)}
.tc-metric-card strong,.tc-countdown-large strong,.tc-card-countdown strong,.tc-stage-header h2,.tc-panel-head h3,.tc-seal-note h4,.tc-story-media h3{color:var(--cn-olive)!important}
.tc-countdown-large div,.tc-card-countdown div{background:linear-gradient(180deg,rgba(255,253,247,.90),rgba(238,240,237,.70))!important;border:1px solid rgba(95,115,94,.12)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.72),0 10px 24px rgba(65,73,66,.06);transition:transform .18s ease,background .18s ease}
.tc-countdown-large div:hover,.tc-card-countdown div:hover{transform:translateY(-2px)}
.tc-build-map{background:rgba(95,115,94,.10)!important}
.tc-map-dot{background:rgba(255,253,247,.58)!important;color:rgba(47,52,48,.66)!important}
.tc-map-dot span{background:rgba(238,240,237,.92)!important;color:var(--cn-olive)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.72)}
.tc-map-dot.active,.tc-map-dot.done{background:rgba(220,232,214,.58)!important;color:var(--cn-olive)!important}
.tc-stage-header>span{background:rgba(220,232,214,.58)!important;color:var(--cn-olive)!important;border:1px solid rgba(95,115,94,.10)}
.tc-story-paper{background:linear-gradient(90deg,rgba(125,146,122,.10) 1px,transparent 1px),repeating-linear-gradient(to bottom,rgba(255,253,247,.92) 0,rgba(255,253,247,.92) 39px,rgba(95,115,94,.10) 40px)!important;background-size:44px 100%,auto!important;border:1px solid rgba(95,115,94,.14)!important;box-shadow:inset 0 2px 10px rgba(65,73,66,.03)}
.tc-prompt-chip{background:rgba(255,253,247,.76)!important;border-color:rgba(95,115,94,.14)!important}.tc-prompt-chip:hover{background:rgba(220,232,214,.68)!important}
.tc-progress-capsule{background:linear-gradient(180deg,rgba(255,253,247,.86),rgba(238,240,237,.54))!important;border-color:rgba(95,115,94,.18)!important}
.tc-progress-capsule span{background:linear-gradient(180deg,rgba(220,232,214,.72),rgba(125,146,122,.58))!important}.tc-progress-capsule i{color:var(--cn-olive)!important}
.tc-time-lock-preview{min-height:190px}.tc-time-lock-preview span{filter:drop-shadow(0 8px 16px rgba(65,73,66,.10))}
.tc-time-presets button{background:rgba(220,232,214,.60)!important;border-color:rgba(95,115,94,.14)!important}.tc-time-presets button:hover{background:rgba(125,146,122,.18)!important}
.tc-shelf-track{align-items:stretch}.tc-shelf-capsule{min-height:310px;display:flex;flex-direction:column;background:rgba(255,253,247,.76)!important;border:1px solid var(--cn-line)!important;box-shadow:var(--cn-shadow-soft)!important;backdrop-filter:blur(14px)}
.tc-shelf-capsule:before{content:"";position:absolute;right:-24px;top:-20px;width:138px;height:190px;border-radius:48px;background:linear-gradient(180deg,rgba(255,255,255,.50),rgba(220,232,214,.28));border:1px solid rgba(95,115,94,.10);transform:rotate(16deg);opacity:.46}
.tc-shelf-capsule:after{content:"";position:absolute;right:22px;top:36px;width:30px;height:112px;border-radius:999px;background:rgba(255,255,255,.36);transform:rotate(16deg);opacity:.65}
.tc-shelf-capsule>*{position:relative;z-index:1}.tc-shelf-capsule.locked{background:radial-gradient(circle at top right,rgba(220,232,214,.68),transparent 48%),rgba(255,253,247,.76)!important}.tc-shelf-capsule.opened{background:radial-gradient(circle at top right,rgba(243,238,230,.96),transparent 48%),rgba(255,253,247,.80)!important}
.tc-capsule-footer{margin-top:auto}.tc-capsule-head small,.tc-unseal-strip span,.tc-unseal-strip small,.inline-preview-head span{background:rgba(220,232,214,.62)!important;color:var(--cn-olive)!important;border:1px solid rgba(95,115,94,.10)}
.tc-locked-detail{background:radial-gradient(circle at 22% 20%,rgba(220,232,214,.74),transparent 35%),rgba(255,253,247,.76)!important}
.tc-locked-capsule{filter:drop-shadow(0 30px 32px rgba(65,73,66,.14))}
.tc-story-unsealed{background:linear-gradient(180deg,rgba(255,253,247,.90),rgba(243,238,230,.74))!important;position:relative}
.tc-story-unsealed:before{content:"";position:absolute;inset:22px;border:1px solid rgba(95,115,94,.08);border-radius:30px;pointer-events:none}
.tc-story-body{position:relative;border-radius:28px;background:linear-gradient(90deg,rgba(125,146,122,.08) 1px,transparent 1px),repeating-linear-gradient(to bottom,rgba(255,253,247,.72) 0,rgba(255,253,247,.72) 40px,rgba(95,115,94,.08) 41px);background-size:48px 100%,auto;padding:26px;border:1px solid rgba(95,115,94,.10)}
.tc-unseal-divider span{background:#faf8f3!important}
.tc-capsule-head span,.tc-panel-head>span,.tc-open-icon{background:rgba(220,232,214,.50);border:1px solid rgba(95,115,94,.10);filter:saturate(.82)}
@keyframes cnSurfaceIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.cn-click-feedback{animation:cnClickFeedback .26s ease both}@keyframes cnClickFeedback{0%{transform:scale(1)}45%{transform:scale(.985)}100%{transform:scale(1)}}
@media(max-width:1080px){.navbar,.app-navbar,header .navbar{top:8px;width:min(100% - 18px,1180px);margin-top:8px!important;border-radius:26px!important}}
@media(max-width:820px){body:before{background-size:32px 32px}.tc-hero,.tc-create-intro,.tc-shelf-hero,.tc-locked-detail,.tc-open-intro,.tc-story-unsealed{border-radius:28px!important}.tc-shelf-capsule{min-height:280px}.music-note-button{right:16px!important;bottom:16px!important;width:50px!important;height:50px!important}.music-note-symbol{font-size:1.78rem}}


/* =========================================================
   RUANG CERITA - INTERACTIVE JOURNALING FINAL
   No capsule concept. Calm neutral interactive journaling.
========================================================= */
:root{--j-bg:#FAF8F3;--j-bg2:#F3EEE6;--j-card:rgba(255,253,247,.82);--j-text:#2F3430;--j-muted:#6F756F;--j-sage:#7D927A;--j-sage-dark:#5F735E;--j-line:rgba(95,115,94,.14);--j-shadow:0 24px 70px rgba(65,73,66,.11);--j-shadow-soft:0 14px 38px rgba(65,73,66,.08)}
body.journal-app,body{background:radial-gradient(circle at 10% 8%,rgba(220,232,214,.48),transparent 28%),radial-gradient(circle at 86% 16%,rgba(243,238,230,.82),transparent 35%),linear-gradient(135deg,#FAF8F3,#EEF0ED)!important;color:var(--j-text)}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgba(95,115,94,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(95,115,94,.032) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.50),transparent 80%);z-index:-1}
.navbar,.app-navbar,header .navbar{position:sticky!important;top:14px;z-index:1050;width:min(1180px,calc(100% - 28px));margin:14px auto 22px!important;border-radius:999px!important;background:rgba(255,253,247,.74)!important;border:1px solid var(--j-line)!important;box-shadow:0 18px 48px rgba(65,73,66,.10)!important;backdrop-filter:blur(18px);padding:10px 14px!important}
.navbar-brand,.app-brand,.navbar .navbar-brand{font-weight:900!important;color:#4F604F!important}
.navbar .nav-link,.app-navbar .nav-link,.nav-link{border-radius:999px;padding:9px 14px!important;color:rgba(47,52,48,.72)!important;font-weight:750;transition:.18s}
.navbar .nav-link:hover,.app-navbar .nav-link:hover,.navbar .nav-link.active,.app-navbar .nav-link.active,.nav-link.active{background:rgba(220,232,214,.64);color:#4F604F!important;transform:translateY(-1px)}
.btn{transition:.18s!important}.btn:hover{transform:translateY(-2px)}.btn-sage,.btn-success{background:linear-gradient(135deg,var(--j-sage),var(--j-sage-dark))!important;border-color:transparent!important;color:#fff!important;box-shadow:0 12px 30px rgba(95,115,94,.22)}.btn-outline-success{border-color:rgba(95,115,94,.30)!important;color:var(--j-sage-dark)!important;background:rgba(255,253,247,.50)!important}
.form-control,.form-select{background:rgba(255,253,247,.84)!important;border:1px solid rgba(95,115,94,.16)!important;border-radius:18px!important;color:var(--j-text)!important}.form-control:focus,.form-select:focus{border-color:rgba(95,115,94,.46)!important;box-shadow:0 0 0 .22rem rgba(125,146,122,.14)!important}
.music-float-icon,.music-icon-only,.music-real-icon,.music-toggle-btn,.music-top-left,#toggleMusic.music-float-icon,#toggleMusic.music-icon-only,#toggleMusic.music-real-icon,#toggleMusic.music-toggle-btn{display:none!important}.music-note-button{position:fixed!important;right:24px!important;bottom:24px!important;width:54px!important;height:54px!important;border-radius:50%!important;background:rgba(255,253,247,.74)!important;border:1px solid rgba(95,115,94,.18)!important;color:var(--j-sage-dark)!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;z-index:1200!important;box-shadow:0 18px 46px rgba(65,73,66,.13)!important;backdrop-filter:blur(16px);font-size:0!important}.music-note-symbol{font-size:2rem;font-weight:900}.music-note-button.is-on{background:linear-gradient(135deg,var(--j-sage),var(--j-sage-dark))!important;color:white!important}
.journal-eyebrow{display:inline-flex;border-radius:999px;background:rgba(220,232,214,.62);color:#4F604F;font-weight:850;padding:7px 14px;margin-bottom:10px;border:1px solid rgba(95,115,94,.10)}
.journal-muted{color:var(--j-muted)}.journal-lead{font-size:1.05rem;line-height:1.8;color:var(--j-muted)}
.journal-dashboard,.journal-write-page,.journal-list-page,.journal-open-detail,.journal-locked-detail{max-width:1180px;margin:0 auto 40px}
.journal-hero,.journal-write-head,.journal-list-head,.journal-locked-detail,.journal-open-head,.journal-reading-page,.journal-workspace{background:var(--j-card)!important;border:1px solid var(--j-line)!important;box-shadow:var(--j-shadow)!important;backdrop-filter:blur(14px);border-radius:34px;animation:journalSurfaceIn .55s ease both}
@keyframes journalSurfaceIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.journal-hero{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:28px;align-items:center;padding:40px;background:radial-gradient(circle at 80% 18%,rgba(220,232,214,.70),transparent 35%),rgba(255,253,247,.76)!important}.journal-hero h1,.journal-write-head h1,.journal-list-head h1,.journal-open-head h1,.journal-locked-detail h1{font-family:Georgia,serif;font-weight:900;color:#4F604F;letter-spacing:-.045em;font-size:clamp(2.1rem,4.4vw,3.8rem)}.journal-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.journal-hero-panel{display:grid;place-items:center}.journal-paper-stack{position:relative;width:210px;height:240px}.paper{position:absolute;border-radius:24px;background:#fffdf7;border:1px solid rgba(95,115,94,.14);box-shadow:0 18px 44px rgba(65,73,66,.10)}.paper-one{inset:36px 30px 10px 20px;transform:rotate(-8deg);background:#f3eee6}.paper-two{inset:20px 20px 18px 30px;transform:rotate(6deg);background:#eef0ed}.paper-three{inset:0 0 34px 0;padding:46px 28px}.paper-three span{display:block;height:2px;border-radius:999px;background:rgba(95,115,94,.18);margin-bottom:18px}
.journal-quote-card,.journal-summary-grid article,.journal-panel,.journal-filter,.journal-story-card,.journal-type-panel,.journal-editor-panel,.journal-live-preview,.journal-save-box,.journal-media-preview,.journal-time-info,.journal-detail-meta,.journal-detail-media{background:rgba(255,253,247,.72);border:1px solid var(--j-line);box-shadow:var(--j-shadow-soft);backdrop-filter:blur(10px);border-radius:26px}
.journal-quote-card{text-align:center;padding:22px;margin:18px 0}.journal-quote-card p{margin:0;font-family:Georgia,serif;font-size:1.25rem;color:#4F604F;font-weight:800}
.journal-summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:18px}.journal-summary-grid article{padding:22px}.journal-summary-grid small{font-weight:850;color:#4F604F}.journal-summary-grid strong{display:block;font-size:2.2rem;color:var(--j-text)}.journal-summary-grid p{margin:0;color:var(--j-muted)}
.journal-dashboard-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}.journal-panel{padding:24px}.journal-panel-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:16px}.journal-panel-head>span{width:46px;height:46px;display:grid;place-items:center;border-radius:18px;background:rgba(220,232,214,.55);border:1px solid rgba(95,115,94,.10)}.journal-panel h3{font-family:Georgia,serif;color:#4F604F;font-weight:900;margin:0}.journal-panel p{color:var(--j-muted)}
.journal-countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0}.journal-countdown div,.journal-card-countdown div{border-radius:18px;background:linear-gradient(180deg,rgba(255,253,247,.92),rgba(238,240,237,.72));border:1px solid rgba(95,115,94,.12);text-align:center;padding:12px}.journal-countdown strong,.journal-card-countdown strong{display:block;color:#4F604F;font-size:1.5rem}.journal-countdown span,.journal-card-countdown span{color:var(--j-muted);font-size:.82rem;font-weight:750}
.journal-write-head,.journal-list-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;padding:32px;margin-bottom:18px}.journal-write-head p,.journal-list-head p{color:var(--j-muted);max-width:720px}
.journal-workspace{display:grid;grid-template-columns:180px minmax(0,1fr) 310px;gap:16px;padding:18px}
.journal-type-panel{padding:18px;align-self:start;position:sticky;top:104px}.journal-type-panel h3{font-family:Georgia,serif;color:#4F604F;font-weight:900;font-size:1.1rem;margin-bottom:14px}.journal-type{width:100%;border:1px solid rgba(95,115,94,.12);background:rgba(255,253,247,.70);border-radius:18px;padding:11px 13px;margin-bottom:8px;text-align:left;color:var(--j-text);font-weight:750;transition:.18s}.journal-type:hover,.journal-type.active{background:rgba(220,232,214,.65);transform:translateX(3px);color:#4F604F}
.journal-editor-panel{padding:20px}.journal-editor-toolbar{display:flex;justify-content:space-between;gap:14px;align-items:center;margin-bottom:14px}.journal-current-info{color:#4F604F;font-weight:800}.journal-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.journal-tool-btn{border:1px solid rgba(95,115,94,.14);background:rgba(255,253,247,.72);border-radius:999px;padding:8px 12px;color:#4F604F;font-weight:800}.journal-tool-btn:hover{background:rgba(220,232,214,.62)}
.journal-title-input{width:100%;border:0;background:transparent;border-bottom:1px solid rgba(95,115,94,.18);font-family:Georgia,serif;font-size:2rem;font-weight:850;color:#4F604F;padding:10px 4px 14px;margin-bottom:14px;outline:none}.journal-title-input::placeholder{color:rgba(79,96,79,.45)}
.journal-textarea{width:100%;min-height:390px;border:1px solid rgba(95,115,94,.12);border-radius:24px;background:linear-gradient(90deg,rgba(125,146,122,.08) 1px,transparent 1px),repeating-linear-gradient(to bottom,rgba(255,253,247,.86) 0,rgba(255,253,247,.86) 39px,rgba(95,115,94,.08) 40px);background-size:44px 100%,auto;padding:20px;line-height:1.9;color:var(--j-text);resize:vertical;outline:none}
.journal-media-preview{display:none;margin-top:14px;padding:14px}.journal-media-preview-head{display:flex;justify-content:space-between;gap:10px;margin-bottom:10px;color:#4F604F}.journal-media-preview img,.journal-media-preview video,.preview-media-inline img,.preview-media-inline video,.journal-detail-media img,.journal-detail-media video{max-width:100%;border-radius:20px;box-shadow:0 16px 42px rgba(65,73,66,.12)}
.journal-time-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}.journal-time-info{padding:16px;color:var(--j-muted);display:flex;align-items:center;line-height:1.6}
.journal-live-preview{padding:18px;align-self:start;position:sticky;top:104px}.journal-preview-card{border-radius:24px;background:linear-gradient(180deg,rgba(255,253,247,.92),rgba(243,238,230,.70));border:1px solid rgba(95,115,94,.12);padding:20px;min-height:360px}.journal-preview-card>span{display:inline-flex;border-radius:999px;background:rgba(220,232,214,.62);color:#4F604F;font-weight:850;padding:6px 12px;margin-bottom:12px}.journal-preview-card h3{font-family:Georgia,serif;color:#4F604F;font-weight:900}.journal-preview-card p{white-space:pre-wrap;line-height:1.75;color:var(--j-text)}.journal-preview-card small{display:block;color:var(--j-muted);margin-top:16px}.journal-save-box{padding:16px;margin-top:14px}.journal-save-box p{color:var(--j-muted);font-size:.92rem}
.journal-filter{display:grid;grid-template-columns:1fr 180px 180px auto;gap:10px;padding:14px;margin-bottom:18px}.journal-story-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.journal-story-card{padding:22px;min-height:260px;display:flex;flex-direction:column;transition:.2s}.journal-story-card:hover{transform:translateY(-5px);box-shadow:0 22px 58px rgba(65,73,66,.12)}.journal-story-card.waiting{background:radial-gradient(circle at top right,rgba(220,232,214,.62),transparent 48%),rgba(255,253,247,.72)}.journal-story-card.opened{background:radial-gradient(circle at top right,rgba(243,238,230,.92),transparent 48%),rgba(255,253,247,.76)}.journal-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.journal-card-top span,.journal-card-top small{border-radius:999px;background:rgba(220,232,214,.62);color:#4F604F;font-weight:850;padding:6px 12px}.journal-story-card h3{font-family:Georgia,serif;color:#4F604F;font-weight:900}.journal-story-card p{color:var(--j-muted)}.journal-card-countdown{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}.journal-card-footer{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:auto;flex-wrap:wrap}.journal-card-footer small{color:var(--j-muted)}
.journal-empty-state{grid-column:1/-1;text-align:center;padding:44px;border-radius:30px;background:rgba(255,253,247,.72);border:1px solid var(--j-line);box-shadow:var(--j-shadow-soft)}
.journal-locked-detail{padding:36px}.journal-locked-detail p{color:var(--j-muted)}.journal-countdown.large{grid-template-columns:repeat(4,1fr);max-width:720px}.journal-detail-meta{padding:18px;margin-top:18px}.journal-detail-meta p{margin-bottom:8px}
.journal-open-head{padding:34px;margin-bottom:18px}.journal-open-head p{color:var(--j-muted)}.journal-reading-page{padding:34px}.journal-story-body{font-size:1.08rem;line-height:2.05;border-radius:28px;background:linear-gradient(90deg,rgba(125,146,122,.08) 1px,transparent 1px),repeating-linear-gradient(to bottom,rgba(255,253,247,.74) 0,rgba(255,253,247,.74) 40px,rgba(95,115,94,.08) 41px);background-size:48px 100%,auto;padding:26px;border:1px solid rgba(95,115,94,.10)}.journal-detail-media{padding:18px;margin-top:22px}
body.focus-writing .journal-write-head,body.focus-writing .journal-type-panel,body.focus-writing .journal-live-preview,body.focus-writing .journal-editor-toolbar,body.focus-writing .journal-time-row{opacity:.16;transition:.2s}body.focus-writing .journal-workspace{grid-template-columns:1fr}body.focus-writing .journal-type-panel,body.focus-writing .journal-live-preview{display:none}body.focus-writing .journal-textarea{min-height:590px}
@keyframes journalClick{0%{transform:scale(1)}45%{transform:scale(.985)}100%{transform:scale(1)}}.journal-click-feedback{animation:journalClick .26s ease both}
@media(max-width:1100px){.journal-hero,.journal-workspace,.journal-dashboard-grid{grid-template-columns:1fr}.journal-hero-panel,.journal-type-panel,.journal-live-preview{position:static}.journal-story-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.navbar,.app-navbar,header .navbar{top:8px;width:min(100% - 18px,1180px);border-radius:26px!important}.journal-hero,.journal-write-head,.journal-list-head{display:block;padding:24px}.journal-summary-grid,.journal-filter,.journal-story-grid,.journal-time-row,.journal-countdown{grid-template-columns:1fr}.journal-workspace{padding:12px}.journal-title-input{font-size:1.55rem}.music-note-button{right:16px!important;bottom:16px!important;width:50px!important;height:50px!important}.music-note-symbol{font-size:1.75rem}}


/* =========================================================
   ADMIN TERBATAS + USER THEME TOGGLE
========================================================= */

.theme-toggle-button {
    position: fixed !important;
    right: 24px !important;
    bottom: 88px !important;
    width: 54px !important;
    height: 54px !important;
    border-radius: 50% !important;
    background: rgba(255,253,247,.74) !important;
    border: 1px solid rgba(95,115,94,.18) !important;
    color: var(--j-sage-dark, #5F735E) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1200 !important;
    box-shadow: 0 18px 46px rgba(65,73,66,.13) !important;
    backdrop-filter: blur(16px);
    transition: transform .18s ease, background .18s ease;
}
.theme-toggle-button:hover {
    transform: translateY(-2px);
}
.theme-symbol {
    font-size: 1.65rem;
    font-weight: 900;
    line-height: 1;
}

/* Dark theme for user */
body.dark-theme {
    background:
        radial-gradient(circle at 12% 8%, rgba(95,115,94,.22), transparent 28%),
        radial-gradient(circle at 86% 16%, rgba(101,84,62,.20), transparent 35%),
        linear-gradient(135deg, #1F241F, #2B302C) !important;
    color: #ECEBE5 !important;
}
body.dark-theme:before {
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
}
body.dark-theme .navbar,
body.dark-theme .app-navbar,
body.dark-theme header .navbar,
body.dark-theme .journal-hero,
body.dark-theme .journal-write-head,
body.dark-theme .journal-list-head,
body.dark-theme .journal-locked-detail,
body.dark-theme .journal-open-head,
body.dark-theme .journal-reading-page,
body.dark-theme .journal-workspace,
body.dark-theme .journal-quote-card,
body.dark-theme .journal-summary-grid article,
body.dark-theme .journal-panel,
body.dark-theme .journal-filter,
body.dark-theme .journal-story-card,
body.dark-theme .journal-type-panel,
body.dark-theme .journal-editor-panel,
body.dark-theme .journal-live-preview,
body.dark-theme .journal-save-box,
body.dark-theme .journal-media-preview,
body.dark-theme .journal-time-info,
body.dark-theme .journal-detail-meta,
body.dark-theme .journal-detail-media,
body.dark-theme .admin-card,
body.dark-theme .admin-hero,
body.dark-theme .admin-privacy-note,
body.dark-theme .admin-stat-grid article {
    background: rgba(38, 44, 39, .78) !important;
    border-color: rgba(220,232,214,.14) !important;
    box-shadow: 0 24px 70px rgba(0,0,0,.24) !important;
}
body.dark-theme .journal-hero h1,
body.dark-theme .journal-write-head h1,
body.dark-theme .journal-list-head h1,
body.dark-theme .journal-open-head h1,
body.dark-theme .journal-locked-detail h1,
body.dark-theme .journal-preview-card h3,
body.dark-theme .journal-panel h3,
body.dark-theme .journal-story-card h3,
body.dark-theme .admin-card h1,
body.dark-theme .admin-card h2,
body.dark-theme .admin-hero h1 {
    color: #DCE8D6 !important;
}
body.dark-theme .journal-muted,
body.dark-theme .journal-lead,
body.dark-theme .journal-panel p,
body.dark-theme .journal-story-card p,
body.dark-theme .journal-write-head p,
body.dark-theme .journal-list-head p,
body.dark-theme .journal-open-head p,
body.dark-theme .journal-locked-detail p,
body.dark-theme .admin-card p,
body.dark-theme .admin-hero p {
    color: #B9BEB6 !important;
}
body.dark-theme .form-control,
body.dark-theme .form-select,
body.dark-theme .journal-title-input,
body.dark-theme .journal-textarea,
body.dark-theme .journal-preview-card,
body.dark-theme .journal-tool-btn,
body.dark-theme .journal-type {
    background: rgba(28, 32, 29, .74) !important;
    border-color: rgba(220,232,214,.16) !important;
    color: #ECEBE5 !important;
}
body.dark-theme .journal-textarea,
body.dark-theme .journal-story-body {
    background:
        linear-gradient(90deg, rgba(220,232,214,.06) 1px, transparent 1px),
        repeating-linear-gradient(to bottom, rgba(28,32,29,.78) 0, rgba(28,32,29,.78) 39px, rgba(220,232,214,.08) 40px) !important;
}
body.dark-theme .journal-type:hover,
body.dark-theme .journal-type.active,
body.dark-theme .journal-eyebrow,
body.dark-theme .journal-card-top span,
body.dark-theme .journal-card-top small {
    background: rgba(125,146,122,.25) !important;
    color: #DCE8D6 !important;
}
body.dark-theme .theme-toggle-button,
body.dark-theme .music-note-button {
    background: rgba(38,44,39,.76) !important;
    color: #DCE8D6 !important;
    border-color: rgba(220,232,214,.16) !important;
}
body.dark-theme .paper,
body.dark-theme .paper-one,
body.dark-theme .paper-two,
body.dark-theme .paper-three {
    background: rgba(238,240,237,.86) !important;
}

/* Admin layout */
.admin-main {
    max-width: 1180px;
    margin: 0 auto 46px;
}
.admin-navbar {
    gap: 16px;
}
.admin-nav-links {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.admin-hero,
.admin-card,
.admin-privacy-note,
.admin-stat-grid article {
    background: rgba(255,253,247,.82);
    border: 1px solid rgba(95,115,94,.14);
    box-shadow: 0 24px 70px rgba(65,73,66,.11);
    backdrop-filter: blur(14px);
    border-radius: 30px;
}
.admin-hero {
    padding: 34px;
    margin-bottom: 18px;
}
.admin-hero h1,
.admin-card h1,
.admin-card h2,
.admin-privacy-note h3 {
    font-family: Georgia, serif;
    font-weight: 900;
    color: #4F604F;
    letter-spacing: -.035em;
}
.admin-stat-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}
.admin-stat-grid article {
    padding: 20px;
}
.admin-stat-grid small {
    color: #4F604F;
    font-weight: 850;
}
.admin-stat-grid strong {
    display: block;
    font-size: 2rem;
}
.admin-stat-grid p,
.admin-privacy-note p {
    color: #6F756F;
    margin-bottom: 0;
}
.admin-privacy-note {
    padding: 24px;
}
.admin-two-col {
    display: grid;
    grid-template-columns: 380px minmax(0, 1fr);
    gap: 18px;
}
.admin-card {
    padding: 24px;
}
.admin-single {
    max-width: 900px;
    margin: 0 auto;
}
.admin-check {
    display: flex;
    gap: 10px;
    align-items: center;
    font-weight: 750;
}
.admin-list {
    display: grid;
    gap: 12px;
}
.admin-list article {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 16px;
    border: 1px solid rgba(95,115,94,.12);
    border-radius: 22px;
    background: rgba(255,253,247,.52);
}
.admin-list p {
    color: #6F756F;
    margin: 6px 0;
}
.admin-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}
.admin-table-wrap {
    overflow-x: auto;
}
.admin-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
}
.admin-table th,
.admin-table td {
    padding: 14px 16px;
    background: rgba(255,253,247,.58);
    border-top: 1px solid rgba(95,115,94,.12);
    border-bottom: 1px solid rgba(95,115,94,.12);
}
.admin-table th:first-child,
.admin-table td:first-child {
    border-left: 1px solid rgba(95,115,94,.12);
    border-radius: 18px 0 0 18px;
}
.admin-table th:last-child,
.admin-table td:last-child {
    border-right: 1px solid rgba(95,115,94,.12);
    border-radius: 0 18px 18px 0;
}
.admin-login-body {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
}
.admin-login-card {
    width: min(480px, 100%);
    background: rgba(255,253,247,.82);
    border: 1px solid rgba(95,115,94,.14);
    border-radius: 34px;
    box-shadow: 0 24px 70px rgba(65,73,66,.11);
    padding: 34px;
    backdrop-filter: blur(14px);
}
.admin-login-card h1 {
    font-family: Georgia, serif;
    color: #4F604F;
    font-weight: 900;
}
@media(max-width: 1050px) {
    .admin-stat-grid,
    .admin-two-col {
        grid-template-columns: 1fr;
    }
    .admin-nav-links {
        justify-content: flex-start;
    }
}
@media(max-width: 720px) {
    .theme-toggle-button {
        right: 16px !important;
        bottom: 78px !important;
        width: 50px !important;
        height: 50px !important;
    }
    .admin-list article {
        display: block;
    }
    .admin-actions {
        flex-direction: row;
        margin-top: 12px;
    }
}


/* =========================================================
   FIX STABIL ADMIN + JOURNALING
========================================================= */
body.journal-app {
    min-height: 100vh;
}

.main-wrapper {
    padding-bottom: 48px;
}

.admin-login-body {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
}

.admin-login-card {
    width: min(480px, 100%);
    background: rgba(255,253,247,.88);
    border: 1px solid rgba(95,115,94,.14);
    border-radius: 34px;
    box-shadow: 0 24px 70px rgba(65,73,66,.13);
    padding: 34px;
    backdrop-filter: blur(14px);
}

.admin-login-card h1 {
    font-family: Georgia, serif;
    font-weight: 900;
    color: #4F604F;
    letter-spacing: -.03em;
    margin-bottom: 10px;
}

.admin-login-card p,
.admin-default-note {
    color: #6F756F;
}

.admin-default-note {
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(220,232,214,.52);
    border: 1px solid rgba(95,115,94,.12);
    font-size: .9rem;
}

.admin-main {
    max-width: 1180px;
    margin: 0 auto 48px;
    padding: 0 14px;
}

.admin-hero,
.admin-card,
.admin-privacy-note,
.admin-stat-grid article {
    background: rgba(255,253,247,.82);
    border: 1px solid rgba(95,115,94,.14);
    box-shadow: 0 24px 70px rgba(65,73,66,.11);
    backdrop-filter: blur(14px);
    border-radius: 30px;
}

.admin-hero {
    padding: 34px;
    margin-bottom: 18px;
}

.admin-hero h1,
.admin-card h1,
.admin-card h2,
.admin-privacy-note h3 {
    font-family: Georgia, serif;
    font-weight: 900;
    color: #4F604F;
    letter-spacing: -.035em;
}

.admin-hero p,
.admin-card p,
.admin-privacy-note p {
    color: #6F756F;
}

.admin-stat-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}

.admin-stat-grid article {
    padding: 20px;
}

.admin-stat-grid small {
    color: #4F604F;
    font-weight: 850;
}

.admin-stat-grid strong {
    display: block;
    font-size: 2rem;
}

.admin-privacy-note,
.admin-card {
    padding: 24px;
}

.admin-two-col {
    display: grid;
    grid-template-columns: 390px minmax(0,1fr);
    gap: 18px;
}

.admin-single {
    max-width: 900px;
    margin: 0 auto;
}

.admin-check {
    display: flex;
    gap: 10px;
    align-items: center;
    font-weight: 750;
}

.admin-list {
    display: grid;
    gap: 12px;
}

.admin-list article {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 16px;
    border: 1px solid rgba(95,115,94,.12);
    border-radius: 22px;
    background: rgba(255,253,247,.58);
}

.admin-list p {
    color: #6F756F;
    margin: 6px 0;
}

.admin-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}

.admin-table-wrap {
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
}

.admin-table th,
.admin-table td {
    padding: 14px 16px;
    background: rgba(255,253,247,.62);
    border-top: 1px solid rgba(95,115,94,.12);
    border-bottom: 1px solid rgba(95,115,94,.12);
}

.admin-table th:first-child,
.admin-table td:first-child {
    border-left: 1px solid rgba(95,115,94,.12);
    border-radius: 18px 0 0 18px;
}

.admin-table th:last-child,
.admin-table td:last-child {
    border-right: 1px solid rgba(95,115,94,.12);
    border-radius: 0 18px 18px 0;
}

.theme-toggle-button {
    position: fixed !important;
    right: 24px !important;
    bottom: 88px !important;
    width: 54px !important;
    height: 54px !important;
    border-radius: 50% !important;
    background: rgba(255,253,247,.78) !important;
    border: 1px solid rgba(95,115,94,.18) !important;
    color: #5F735E !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1200 !important;
    box-shadow: 0 18px 46px rgba(65,73,66,.13) !important;
    backdrop-filter: blur(16px);
}

.theme-symbol {
    font-size: 1.65rem;
    font-weight: 900;
    line-height: 1;
}

body.dark-theme {
    background:
        radial-gradient(circle at 12% 8%, rgba(95,115,94,.22), transparent 28%),
        radial-gradient(circle at 86% 16%, rgba(101,84,62,.20), transparent 35%),
        linear-gradient(135deg, #1F241F, #2B302C) !important;
    color: #ECEBE5 !important;
}

body.dark-theme .navbar,
body.dark-theme .app-navbar,
body.dark-theme .journal-hero,
body.dark-theme .journal-write-head,
body.dark-theme .journal-list-head,
body.dark-theme .journal-locked-detail,
body.dark-theme .journal-open-head,
body.dark-theme .journal-reading-page,
body.dark-theme .journal-workspace,
body.dark-theme .journal-quote-card,
body.dark-theme .journal-summary-grid article,
body.dark-theme .journal-panel,
body.dark-theme .journal-filter,
body.dark-theme .journal-story-card,
body.dark-theme .journal-type-panel,
body.dark-theme .journal-editor-panel,
body.dark-theme .journal-live-preview,
body.dark-theme .journal-save-box,
body.dark-theme .journal-media-preview,
body.dark-theme .journal-time-info,
body.dark-theme .journal-detail-meta,
body.dark-theme .journal-detail-media,
body.dark-theme .admin-card,
body.dark-theme .admin-hero,
body.dark-theme .admin-privacy-note,
body.dark-theme .admin-stat-grid article {
    background: rgba(38,44,39,.82) !important;
    border-color: rgba(220,232,214,.16) !important;
    color: #ECEBE5 !important;
}

body.dark-theme .journal-hero h1,
body.dark-theme .journal-write-head h1,
body.dark-theme .journal-list-head h1,
body.dark-theme .journal-open-head h1,
body.dark-theme .journal-locked-detail h1,
body.dark-theme .journal-preview-card h3,
body.dark-theme .journal-panel h3,
body.dark-theme .journal-story-card h3,
body.dark-theme .admin-card h1,
body.dark-theme .admin-card h2,
body.dark-theme .admin-hero h1 {
    color: #DCE8D6 !important;
}

body.dark-theme .journal-muted,
body.dark-theme .journal-lead,
body.dark-theme .journal-panel p,
body.dark-theme .journal-story-card p,
body.dark-theme .journal-write-head p,
body.dark-theme .journal-list-head p,
body.dark-theme .journal-open-head p,
body.dark-theme .journal-locked-detail p,
body.dark-theme .admin-card p,
body.dark-theme .admin-hero p {
    color: #B9BEB6 !important;
}

body.dark-theme .form-control,
body.dark-theme .form-select,
body.dark-theme .journal-title-input,
body.dark-theme .journal-textarea,
body.dark-theme .journal-preview-card,
body.dark-theme .journal-tool-btn,
body.dark-theme .journal-type {
    background: rgba(28,32,29,.78) !important;
    border-color: rgba(220,232,214,.16) !important;
    color: #ECEBE5 !important;
}

body.dark-theme .theme-toggle-button,
body.dark-theme .music-note-button {
    background: rgba(38,44,39,.82) !important;
    color: #DCE8D6 !important;
    border-color: rgba(220,232,214,.16) !important;
}

@media(max-width: 1050px) {
    .admin-stat-grid,
    .admin-two-col {
        grid-template-columns: 1fr;
    }
}

@media(max-width: 720px) {
    .admin-list article {
        display: block;
    }
    .admin-actions {
        flex-direction: row;
        flex-wrap: wrap;
        margin-top: 12px;
    }
    .theme-toggle-button {
        right: 16px !important;
        bottom: 78px !important;
        width: 50px !important;
        height: 50px !important;
    }
}


/* =========================================================
   FIX TELITI ADMIN + LOGIN SEJENIS PENGGUNA
========================================================= */

.auth-card {
    max-width: 470px;
    margin-left: auto;
    margin-right: auto;
    background: rgba(255,253,247,.88);
    border: 1px solid rgba(95,115,94,.14);
    border-radius: 34px;
    box-shadow: 0 24px 70px rgba(65,73,66,.13);
    padding: 34px;
    backdrop-filter: blur(14px);
}

.auth-card h3 {
    font-family: Georgia, serif;
    color: #4F604F;
    letter-spacing: -.03em;
}

.small-muted {
    color: #6F756F;
}

.admin-main {
    max-width: 1180px;
    margin: 0 auto 48px;
    padding: 0 14px;
}

.admin-hero,
.admin-card,
.admin-privacy-note,
.admin-stat-grid article {
    background: rgba(255,253,247,.82);
    border: 1px solid rgba(95,115,94,.14);
    box-shadow: 0 24px 70px rgba(65,73,66,.11);
    backdrop-filter: blur(14px);
    border-radius: 30px;
}

.admin-hero {
    padding: 34px;
    margin-bottom: 18px;
}

.admin-hero h1,
.admin-card h1,
.admin-card h2,
.admin-privacy-note h3 {
    font-family: Georgia, serif;
    font-weight: 900;
    color: #4F604F;
    letter-spacing: -.035em;
}

.admin-hero p,
.admin-card p,
.admin-privacy-note p {
    color: #6F756F;
}

.admin-stat-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}

.admin-stat-grid article {
    padding: 20px;
}

.admin-stat-grid small {
    color: #4F604F;
    font-weight: 850;
}

.admin-stat-grid strong {
    display: block;
    font-size: 2rem;
}

.admin-card,
.admin-privacy-note {
    padding: 24px;
}

.admin-two-col {
    display: grid;
    grid-template-columns: 390px minmax(0,1fr);
    gap: 18px;
}

.admin-single {
    max-width: 900px;
    margin: 0 auto;
}

.admin-check {
    display: flex;
    gap: 10px;
    align-items: center;
    font-weight: 750;
}

.admin-list {
    display: grid;
    gap: 12px;
}

.admin-list article {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 16px;
    border: 1px solid rgba(95,115,94,.12);
    border-radius: 22px;
    background: rgba(255,253,247,.58);
}

.admin-list p {
    color: #6F756F;
    margin: 6px 0;
}

.admin-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}

.admin-table-wrap {
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
}

.admin-table th,
.admin-table td {
    padding: 14px 16px;
    background: rgba(255,253,247,.62);
    border-top: 1px solid rgba(95,115,94,.12);
    border-bottom: 1px solid rgba(95,115,94,.12);
}

.admin-table th:first-child,
.admin-table td:first-child {
    border-left: 1px solid rgba(95,115,94,.12);
    border-radius: 18px 0 0 18px;
}

.admin-table th:last-child,
.admin-table td:last-child {
    border-right: 1px solid rgba(95,115,94,.12);
    border-radius: 0 18px 18px 0;
}

.theme-toggle-button {
    position: fixed !important;
    right: 24px !important;
    bottom: 88px !important;
    width: 54px !important;
    height: 54px !important;
    border-radius: 50% !important;
    background: rgba(255,253,247,.78) !important;
    border: 1px solid rgba(95,115,94,.18) !important;
    color: #5F735E !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1200 !important;
    box-shadow: 0 18px 46px rgba(65,73,66,.13) !important;
    backdrop-filter: blur(16px);
}

.theme-symbol {
    font-size: 1.65rem;
    font-weight: 900;
    line-height: 1;
}

body.dark-theme {
    background:
        radial-gradient(circle at 12% 8%, rgba(95,115,94,.22), transparent 28%),
        radial-gradient(circle at 86% 16%, rgba(101,84,62,.20), transparent 35%),
        linear-gradient(135deg, #1F241F, #2B302C) !important;
    color: #ECEBE5 !important;
}

body.dark-theme .navbar,
body.dark-theme .app-navbar,
body.dark-theme .journal-hero,
body.dark-theme .journal-write-head,
body.dark-theme .journal-list-head,
body.dark-theme .journal-locked-detail,
body.dark-theme .journal-open-head,
body.dark-theme .journal-reading-page,
body.dark-theme .journal-workspace,
body.dark-theme .journal-quote-card,
body.dark-theme .journal-summary-grid article,
body.dark-theme .journal-panel,
body.dark-theme .journal-filter,
body.dark-theme .journal-story-card,
body.dark-theme .journal-type-panel,
body.dark-theme .journal-editor-panel,
body.dark-theme .journal-live-preview,
body.dark-theme .journal-save-box,
body.dark-theme .journal-media-preview,
body.dark-theme .journal-time-info,
body.dark-theme .journal-detail-meta,
body.dark-theme .journal-detail-media,
body.dark-theme .admin-card,
body.dark-theme .admin-hero,
body.dark-theme .admin-privacy-note,
body.dark-theme .admin-stat-grid article,
body.dark-theme .auth-card {
    background: rgba(38,44,39,.82) !important;
    border-color: rgba(220,232,214,.16) !important;
    color: #ECEBE5 !important;
}

body.dark-theme .journal-hero h1,
body.dark-theme .journal-write-head h1,
body.dark-theme .journal-list-head h1,
body.dark-theme .journal-open-head h1,
body.dark-theme .journal-locked-detail h1,
body.dark-theme .journal-preview-card h3,
body.dark-theme .journal-panel h3,
body.dark-theme .journal-story-card h3,
body.dark-theme .admin-card h1,
body.dark-theme .admin-card h2,
body.dark-theme .admin-hero h1,
body.dark-theme .auth-card h3 {
    color: #DCE8D6 !important;
}

body.dark-theme .journal-muted,
body.dark-theme .journal-lead,
body.dark-theme .journal-panel p,
body.dark-theme .journal-story-card p,
body.dark-theme .journal-write-head p,
body.dark-theme .journal-list-head p,
body.dark-theme .journal-open-head p,
body.dark-theme .journal-locked-detail p,
body.dark-theme .admin-card p,
body.dark-theme .admin-hero p,
body.dark-theme .small-muted {
    color: #B9BEB6 !important;
}

body.dark-theme .form-control,
body.dark-theme .form-select,
body.dark-theme .journal-title-input,
body.dark-theme .journal-textarea,
body.dark-theme .journal-preview-card,
body.dark-theme .journal-tool-btn,
body.dark-theme .journal-type {
    background: rgba(28,32,29,.78) !important;
    border-color: rgba(220,232,214,.16) !important;
    color: #ECEBE5 !important;
}

body.dark-theme .theme-toggle-button,
body.dark-theme .music-note-button {
    background: rgba(38,44,39,.82) !important;
    color: #DCE8D6 !important;
    border-color: rgba(220,232,214,.16) !important;
}

@media(max-width: 1050px) {
    .admin-stat-grid,
    .admin-two-col {
        grid-template-columns: 1fr;
    }
}

@media(max-width: 720px) {
    .auth-card {
        padding: 24px;
        border-radius: 26px;
    }

    .admin-list article {
        display: block;
    }

    .admin-actions {
        flex-direction: row;
        flex-wrap: wrap;
        margin-top: 12px;
    }

    .theme-toggle-button {
        right: 16px !important;
        bottom: 78px !important;
        width: 50px !important;
        height: 50px !important;
    }
}


/* =========================================================
   UPGRADE: USER SETTINGS + ADMIN QUICK ACTIONS
========================================================= */
.user-settings-page {
    max-width: 1180px;
    margin: 0 auto 44px;
}
.user-settings-hero {
    background: rgba(255,253,247,.82);
    border: 1px solid rgba(95,115,94,.14);
    box-shadow: 0 24px 70px rgba(65,73,66,.11);
    border-radius: 34px;
    padding: 34px;
    backdrop-filter: blur(14px);
    margin-bottom: 18px;
}
.user-settings-hero h1 {
    font-family: Georgia, serif;
    color: #4F604F;
    font-weight: 900;
    letter-spacing: -.04em;
}
.user-settings-hero p {
    color: #6F756F;
    margin-bottom: 0;
}
.user-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
.user-setting-card {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    background: rgba(255,253,247,.78);
    border: 1px solid rgba(95,115,94,.14);
    box-shadow: 0 18px 48px rgba(65,73,66,.09);
    border-radius: 30px;
    padding: 24px;
    backdrop-filter: blur(14px);
}
.setting-icon {
    width: 54px;
    height: 54px;
    border-radius: 20px;
    background: rgba(220,232,214,.62);
    color: #4F604F;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    border: 1px solid rgba(95,115,94,.12);
}
.user-setting-card h3 {
    font-family: Georgia, serif;
    color: #4F604F;
    font-weight: 900;
    margin-bottom: 8px;
}
.user-setting-card p {
    color: #6F756F;
    line-height: 1.7;
}
.setting-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 14px 0 8px;
}
.setting-status {
    color: #6F756F;
    display: block;
}
.admin-quick-actions {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-bottom: 18px;
}
.admin-quick-actions a {
    display: block;
    text-decoration: none;
    background: rgba(255,253,247,.82);
    border: 1px solid rgba(95,115,94,.14);
    box-shadow: 0 14px 38px rgba(65,73,66,.08);
    border-radius: 22px;
    padding: 16px;
    color: #4F604F;
    font-weight: 850;
    transition: transform .18s ease, box-shadow .18s ease;
}
.admin-quick-actions a:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 50px rgba(65,73,66,.12);
}
body.dark-theme .user-settings-hero,
body.dark-theme .user-setting-card,
body.dark-theme .admin-quick-actions a {
    background: rgba(38,44,39,.82) !important;
    border-color: rgba(220,232,214,.16) !important;
    color: #ECEBE5 !important;
}
body.dark-theme .user-settings-hero h1,
body.dark-theme .user-setting-card h3,
body.dark-theme .admin-quick-actions a {
    color: #DCE8D6 !important;
}
body.dark-theme .user-settings-hero p,
body.dark-theme .user-setting-card p,
body.dark-theme .setting-status {
    color: #B9BEB6 !important;
}
body.dark-theme .setting-icon {
    background: rgba(125,146,122,.25);
    color: #DCE8D6;
    border-color: rgba(220,232,214,.16);
}
@media(max-width: 1050px) {
    .admin-quick-actions { grid-template-columns: repeat(2, 1fr); }
    .user-settings-grid { grid-template-columns: 1fr; }
}
@media(max-width: 620px) {
    .admin-quick-actions { grid-template-columns: 1fr; }
    .user-setting-card { display: block; }
    .setting-icon { margin-bottom: 14px; }
}


/* =========================================================
   USER EXPERIENCE UPGRADE: INTERACTIVE JOURNALING
========================================================= */

.upgraded-dashboard,
.upgraded-write-page,
.upgraded-list-page {
    position: relative;
}

.user-hero-live {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) 420px;
    gap: 24px;
    align-items: stretch;
    margin-bottom: 18px;
}

.user-hero-copy,
.user-hero-visual,
.today-reflection-card,
.user-summary-live article,
.recent-story-mini,
.recent-story-empty,
.prompt-card-live,
.user-setting-card {
    background: rgba(255,253,247,.82);
    border: 1px solid rgba(95,115,94,.14);
    box-shadow: 0 24px 70px rgba(65,73,66,.10);
    border-radius: 34px;
    backdrop-filter: blur(14px);
}

.user-hero-copy {
    padding: 38px;
}

.user-hero-copy h1 {
    font-family: Georgia, serif;
    font-weight: 900;
    color: #4F604F;
    letter-spacing: -.045em;
    font-size: clamp(2.15rem, 4vw, 4.1rem);
}

.hero-live-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 22px 0;
}

.today-reflection-card {
    padding: 20px;
    border-radius: 26px;
    box-shadow: none;
    background: rgba(220,232,214,.44);
}

.today-reflection-card small,
.prompt-card-live small {
    color: #4F604F;
    font-weight: 850;
}

.today-reflection-card p,
.prompt-card-live p {
    color: #4F604F;
    font-family: Georgia, serif;
    font-size: 1.12rem;
    line-height: 1.65;
    margin: 8px 0 10px;
}

.mini-link-button {
    border: 0;
    background: transparent;
    color: #5F735E;
    font-weight: 850;
    padding: 0;
}

.user-hero-visual {
    min-height: 360px;
    position: relative;
    overflow: hidden;
    padding: 24px;
}

.floating-journal-scene {
    position: relative;
    height: 100%;
    min-height: 310px;
    border-radius: 28px;
    background:
        radial-gradient(circle at 40% 36%, rgba(220,232,214,.78), transparent 32%),
        linear-gradient(135deg, rgba(247,239,226,.9), rgba(228,235,224,.76));
    overflow: hidden;
}

.scene-orbit {
    position: absolute;
    border: 1px solid rgba(95,115,94,.16);
    border-radius: 999px;
    animation: slowOrbit 14s linear infinite;
}

.orbit-one {
    width: 260px;
    height: 260px;
    top: 30px;
    left: 54px;
}

.orbit-two {
    width: 190px;
    height: 190px;
    right: 34px;
    bottom: 34px;
    animation-duration: 18s;
}

.journal-card-float {
    position: absolute;
    background: rgba(255,253,247,.88);
    border: 1px solid rgba(95,115,94,.14);
    box-shadow: 0 24px 48px rgba(65,73,66,.12);
    border-radius: 24px;
    padding: 18px;
    animation: floatSoft 4.8s ease-in-out infinite;
}

.card-a {
    width: 190px;
    height: 145px;
    top: 74px;
    left: 54px;
    transform: rotate(-5deg);
}

.card-a span {
    display: block;
    height: 10px;
    border-radius: 20px;
    background: rgba(95,115,94,.18);
    margin-bottom: 12px;
}

.card-a span:nth-child(1) { width: 80%; }
.card-a span:nth-child(2) { width: 58%; }
.card-a span:nth-child(3) { width: 70%; }

.card-b,
.card-c {
    width: 135px;
    height: 116px;
    text-align: center;
    display: grid;
    place-content: center;
}

.card-b {
    right: 42px;
    top: 56px;
    animation-delay: .4s;
}

.card-c {
    right: 86px;
    bottom: 58px;
    animation-delay: .9s;
}

.card-b strong,
.card-c strong {
    display: block;
    font-size: 2rem;
    color: #4F604F;
}

.card-b small,
.card-c small {
    color: #6F756F;
    font-weight: 800;
}

.user-summary-live {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}

.user-summary-live article {
    border-radius: 28px;
    padding: 22px;
}

.summary-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: rgba(220,232,214,.58);
    color: #4F604F;
    margin-bottom: 14px;
}

.user-summary-live small {
    color: #4F604F;
    font-weight: 850;
}

.user-summary-live strong {
    display: block;
    font-size: 2rem;
    color: #2F3B31;
}

.user-summary-live p {
    color: #6F756F;
    margin: 0;
}

.interactive-dashboard-grid {
    align-items: stretch;
}

.prompt-card-live {
    padding: 20px;
    box-shadow: none;
}

.recent-story-strip {
    margin-top: 18px;
}

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

.section-title-row h2 {
    font-family: Georgia, serif;
    color: #4F604F;
    font-weight: 900;
    margin: 4px 0 0;
}

.section-title-row a {
    color: #5F735E;
    font-weight: 850;
    text-decoration: none;
}

.recent-story-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.recent-story-mini,
.recent-story-empty {
    padding: 20px;
    text-decoration: none;
    display: block;
    border-radius: 26px;
    transition: transform .18s ease, box-shadow .18s ease;
}

.recent-story-mini:hover {
    transform: translateY(-4px);
    box-shadow: 0 28px 70px rgba(65,73,66,.13);
}

.recent-story-mini span {
    color: #5F735E;
    font-weight: 850;
    font-size: .88rem;
}

.recent-story-mini h3 {
    color: #4F604F;
    font-family: Georgia, serif;
    font-weight: 900;
    font-size: 1.15rem;
    margin: 10px 0;
}

.recent-story-mini small,
.recent-story-empty p {
    color: #6F756F;
}

/* Writing page upgrade */
.interactive-write-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
}

.write-head-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.writing-mood-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: -4px 0 18px;
}

.mood-chip {
    border: 1px solid rgba(95,115,94,.16);
    background: rgba(255,253,247,.72);
    color: #4F604F;
    border-radius: 999px;
    padding: 10px 16px;
    font-weight: 850;
    box-shadow: 0 12px 30px rgba(65,73,66,.06);
    transition: transform .18s ease, background .18s ease;
}

.mood-chip:hover,
.mood-chip.active {
    transform: translateY(-2px);
    background: rgba(220,232,214,.72);
}

.interactive-workspace {
    grid-template-columns: 270px minmax(0, 1fr) 330px !important;
}

.interactive-side-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.side-section {
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(95,115,94,.12);
}

.side-section:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.inspiration-box p {
    color: #4F604F;
    line-height: 1.7;
}

.goal-ring {
    width: 118px;
    height: 118px;
    border-radius: 50%;
    display: grid;
    place-content: center;
    text-align: center;
    margin: 14px auto 10px;
    background:
        conic-gradient(#7D927A var(--goal-progress, 0%), rgba(220,232,214,.78) 0),
        rgba(255,253,247,.8);
    border: 8px solid rgba(255,253,247,.9);
    box-shadow: inset 0 0 0 1px rgba(95,115,94,.12), 0 16px 34px rgba(65,73,66,.10);
}

.goal-ring strong {
    font-size: 1.75rem;
    color: #4F604F;
}

.goal-ring span {
    color: #6F756F;
    font-size: .82rem;
    font-weight: 800;
}

.goal-ring.goal-complete {
    box-shadow: inset 0 0 0 1px rgba(95,115,94,.12), 0 16px 44px rgba(95,115,94,.22);
}

.interactive-title-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.title-hint-button {
    border: 1px solid rgba(95,115,94,.16);
    background: rgba(220,232,214,.55);
    color: #4F604F;
    font-weight: 850;
    border-radius: 18px;
    padding: 12px 16px;
}

.interactive-textarea {
    min-height: 410px !important;
}

.writing-helper-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.helper-pill {
    border: 1px solid rgba(95,115,94,.14);
    background: rgba(255,253,247,.68);
    color: #5F735E;
    border-radius: 999px;
    padding: 9px 14px;
    font-weight: 800;
}

.interactive-time-row {
    margin-top: 18px;
}

.preview-window-label {
    color: #5F735E;
    font-weight: 900;
    margin-bottom: 10px;
}

.mini-timeline {
    display: grid;
    gap: 10px;
    margin: 18px 0;
}

.timeline-step {
    display: flex;
    gap: 10px;
    align-items: center;
    color: #6F756F;
}

.timeline-step span {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(220,232,214,.6);
    color: #4F604F;
    font-weight: 900;
}

.timeline-step p {
    margin: 0;
    font-weight: 800;
}

.prompt-pop {
    animation: promptPop .38s ease both;
}

@keyframes promptPop {
    0% { opacity: .4; transform: translateY(6px) scale(.98); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

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

@keyframes floatSoft {
    0%, 100% { transform: translateY(0) rotate(-4deg); }
    50% { transform: translateY(-10px) rotate(-2deg); }
}

/* Dark theme support for new user upgrade */
body.dark-theme .user-hero-copy,
body.dark-theme .user-hero-visual,
body.dark-theme .today-reflection-card,
body.dark-theme .user-summary-live article,
body.dark-theme .recent-story-mini,
body.dark-theme .recent-story-empty,
body.dark-theme .prompt-card-live,
body.dark-theme .mood-chip,
body.dark-theme .helper-pill,
body.dark-theme .title-hint-button {
    background: rgba(38,44,39,.82) !important;
    border-color: rgba(220,232,214,.16) !important;
    color: #ECEBE5 !important;
}

body.dark-theme .user-hero-copy h1,
body.dark-theme .section-title-row h2,
body.dark-theme .recent-story-mini h3,
body.dark-theme .user-summary-live strong,
body.dark-theme .today-reflection-card p,
body.dark-theme .prompt-card-live p,
body.dark-theme .goal-ring strong {
    color: #DCE8D6 !important;
}

body.dark-theme .user-summary-live p,
body.dark-theme .recent-story-mini small,
body.dark-theme .recent-story-empty p,
body.dark-theme .today-reflection-card small,
body.dark-theme .setting-status,
body.dark-theme .goal-ring span {
    color: #B9BEB6 !important;
}

body.dark-theme .floating-journal-scene {
    background:
        radial-gradient(circle at 40% 36%, rgba(125,146,122,.22), transparent 32%),
        linear-gradient(135deg, rgba(38,44,39,.88), rgba(31,36,31,.9));
}

body.dark-theme .journal-card-float,
body.dark-theme .goal-ring {
    background: rgba(38,44,39,.88) !important;
    border-color: rgba(220,232,214,.16) !important;
}

@media(max-width: 1180px) {
    .user-hero-live,
    .interactive-workspace {
        grid-template-columns: 1fr !important;
    }

    .user-summary-live,
    .recent-story-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width: 720px) {
    .interactive-write-head,
    .section-title-row {
        display: block;
    }

    .write-head-actions,
    .hero-live-actions {
        margin-top: 14px;
    }

    .user-summary-live,
    .recent-story-row {
        grid-template-columns: 1fr;
    }

    .interactive-title-row {
        grid-template-columns: 1fr;
    }

    .user-hero-copy {
        padding: 28px;
    }
}


/* =========================================================
   PROFIL PENGGUNA
========================================================= */

.profile-page {
    max-width: 1180px;
    margin: 0 auto 48px;
}

.profile-hero-card,
.profile-card,
.profile-stat-grid article {
    background: rgba(255,253,247,.82);
    border: 1px solid rgba(95,115,94,.14);
    box-shadow: 0 24px 70px rgba(65,73,66,.10);
    border-radius: 34px;
    backdrop-filter: blur(14px);
}

.profile-hero-card {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 34px;
    margin-bottom: 18px;
}

.profile-avatar-wrap {
    flex-shrink: 0;
}

.profile-avatar {
    width: 132px;
    height: 132px;
    border-radius: 42px;
    object-fit: cover;
    border: 1px solid rgba(95,115,94,.18);
    box-shadow: 0 18px 42px rgba(65,73,66,.12);
    background: rgba(220,232,214,.58);
}

.profile-avatar-placeholder {
    display: grid;
    place-items: center;
    font-size: 3.2rem;
    font-weight: 900;
    font-family: Georgia, serif;
    color: #4F604F;
}

.profile-hero-info h1 {
    font-family: Georgia, serif;
    font-weight: 900;
    color: #4F604F;
    letter-spacing: -.045em;
    margin-bottom: 6px;
}

.profile-hero-info p {
    color: #6F756F;
    margin-bottom: 6px;
    font-weight: 700;
}

.profile-hero-info small {
    color: #6F756F;
}

.profile-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}

.profile-stat-grid article {
    padding: 22px;
}

.profile-stat-grid small {
    color: #4F604F;
    font-weight: 850;
}

.profile-stat-grid strong {
    display: block;
    font-size: 2rem;
    color: #2F3B31;
}

.profile-stat-grid p {
    color: #6F756F;
    margin-bottom: 0;
}

.profile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.profile-card {
    padding: 26px;
}

.profile-card h2 {
    font-family: Georgia, serif;
    color: #4F604F;
    font-weight: 900;
    margin-bottom: 14px;
}

.profile-info-list {
    display: grid;
    gap: 12px;
}

.profile-info-list div {
    padding: 14px 16px;
    background: rgba(220,232,214,.42);
    border: 1px solid rgba(95,115,94,.10);
    border-radius: 20px;
}

.profile-info-list span {
    display: block;
    color: #6F756F;
    font-size: .88rem;
    font-weight: 800;
    margin-bottom: 4px;
}

.profile-info-list strong {
    color: #4F604F;
}

.privacy-profile-card {
    background: rgba(220,232,214,.38);
}

body.dark-theme .profile-hero-card,
body.dark-theme .profile-card,
body.dark-theme .profile-stat-grid article {
    background: rgba(38,44,39,.82) !important;
    border-color: rgba(220,232,214,.16) !important;
    color: #ECEBE5 !important;
}

body.dark-theme .profile-hero-info h1,
body.dark-theme .profile-card h2,
body.dark-theme .profile-stat-grid strong,
body.dark-theme .profile-info-list strong,
body.dark-theme .profile-avatar-placeholder {
    color: #DCE8D6 !important;
}

body.dark-theme .profile-hero-info p,
body.dark-theme .profile-hero-info small,
body.dark-theme .profile-stat-grid p,
body.dark-theme .profile-info-list span {
    color: #B9BEB6 !important;
}

body.dark-theme .profile-info-list div,
body.dark-theme .profile-avatar {
    background: rgba(125,146,122,.18) !important;
    border-color: rgba(220,232,214,.16) !important;
}

@media(max-width: 850px) {
    .profile-hero-card {
        display: block;
        text-align: center;
    }

    .profile-avatar-wrap {
        margin-bottom: 18px;
    }

    .profile-stat-grid,
    .profile-grid {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   PROFIL PENGGUNA - FINAL RAPI & LEBIH HIDUP
========================================================= */

.profile-page {
    max-width: 1180px;
    margin: 0 auto 48px;
}

.profile-hero-card,
.profile-card,
.profile-stat-grid article {
    background: rgba(255,253,247,.82);
    border: 1px solid rgba(95,115,94,.14);
    box-shadow: 0 24px 70px rgba(65,73,66,.10);
    border-radius: 34px;
    backdrop-filter: blur(14px);
}

.profile-hero-upgrade {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) 190px;
    align-items: center;
    gap: 24px;
    padding: 34px;
    margin-bottom: 18px;
}

.profile-avatar {
    width: 132px;
    height: 132px;
    border-radius: 42px;
    object-fit: cover;
    border: 1px solid rgba(95,115,94,.18);
    box-shadow: 0 18px 42px rgba(65,73,66,.12);
    background: rgba(220,232,214,.58);
}

.profile-avatar-placeholder {
    display: grid;
    place-items: center;
    font-size: 3.2rem;
    font-weight: 900;
    font-family: Georgia, serif;
    color: #4F604F;
}

.profile-hero-info h1 {
    font-family: Georgia, serif;
    font-weight: 900;
    color: #4F604F;
    letter-spacing: -.045em;
    margin-bottom: 6px;
}

.profile-hero-info p {
    color: #6F756F;
    margin-bottom: 6px;
    font-weight: 700;
}

.profile-hero-info small {
    color: #6F756F;
}

.profile-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.profile-progress-widget {
    text-align: center;
}

.profile-progress-ring {
    width: 136px;
    height: 136px;
    border-radius: 50%;
    display: grid;
    place-content: center;
    background:
        conic-gradient(#7D927A var(--profile-progress, 0%), rgba(220,232,214,.75) 0),
        rgba(255,253,247,.85);
    border: 8px solid rgba(255,253,247,.96);
    box-shadow: inset 0 0 0 1px rgba(95,115,94,.12), 0 16px 38px rgba(65,73,66,.10);
    margin: 0 auto 10px;
}

.profile-progress-ring strong {
    display: block;
    font-size: 1.65rem;
    color: #4F604F;
    font-weight: 900;
}

.profile-progress-ring span {
    color: #6F756F;
    font-size: .82rem;
    font-weight: 800;
}

.profile-progress-widget p {
    color: #6F756F;
    font-size: .9rem;
    margin: 0;
}

.profile-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}

.profile-stat-grid article {
    padding: 22px;
}

.profile-stat-grid small {
    color: #4F604F;
    font-weight: 850;
}

.profile-stat-grid strong {
    display: block;
    font-size: 1.8rem;
    color: #2F3B31;
    word-break: break-word;
}

.profile-stat-grid p {
    color: #6F756F;
    margin-bottom: 0;
}

.profile-grid-upgrade {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 18px;
}

.profile-card {
    padding: 26px;
}

.profile-card h2 {
    font-family: Georgia, serif;
    color: #4F604F;
    font-weight: 900;
    margin-bottom: 14px;
}

.profile-info-list {
    display: grid;
    gap: 12px;
}

.profile-info-list div {
    padding: 14px 16px;
    background: rgba(220,232,214,.42);
    border: 1px solid rgba(95,115,94,.10);
    border-radius: 20px;
}

.profile-info-list span {
    display: block;
    color: #6F756F;
    font-size: .88rem;
    font-weight: 800;
    margin-bottom: 4px;
}

.profile-info-list strong {
    color: #4F604F;
}

.latest-profile-story {
    padding: 18px;
    border-radius: 22px;
    background: rgba(220,232,214,.42);
    border: 1px solid rgba(95,115,94,.10);
}

.latest-profile-story span {
    color: #5F735E;
    font-weight: 850;
    font-size: .88rem;
}

.latest-profile-story h3 {
    color: #4F604F;
    font-family: Georgia, serif;
    font-weight: 900;
    margin: 8px 0;
}

.latest-profile-story p,
.latest-profile-story small {
    color: #6F756F;
}

.privacy-profile-card {
    background: rgba(220,232,214,.38);
}

.password-profile-card {
    grid-column: 1 / -1;
}

body.dark-theme .profile-hero-card,
body.dark-theme .profile-card,
body.dark-theme .profile-stat-grid article {
    background: rgba(38,44,39,.82) !important;
    border-color: rgba(220,232,214,.16) !important;
    color: #ECEBE5 !important;
}

body.dark-theme .profile-hero-info h1,
body.dark-theme .profile-card h2,
body.dark-theme .profile-stat-grid strong,
body.dark-theme .profile-info-list strong,
body.dark-theme .profile-avatar-placeholder,
body.dark-theme .profile-progress-ring strong,
body.dark-theme .latest-profile-story h3 {
    color: #DCE8D6 !important;
}

body.dark-theme .profile-hero-info p,
body.dark-theme .profile-hero-info small,
body.dark-theme .profile-stat-grid p,
body.dark-theme .profile-info-list span,
body.dark-theme .profile-progress-widget p,
body.dark-theme .profile-progress-ring span,
body.dark-theme .latest-profile-story p,
body.dark-theme .latest-profile-story small {
    color: #B9BEB6 !important;
}

body.dark-theme .profile-info-list div,
body.dark-theme .profile-avatar,
body.dark-theme .latest-profile-story,
body.dark-theme .profile-progress-ring {
    background: rgba(125,146,122,.18) !important;
    border-color: rgba(220,232,214,.16) !important;
}

@media(max-width: 1000px) {
    .profile-hero-upgrade {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .profile-quick-actions {
        justify-content: center;
    }

    .profile-stat-grid,
    .profile-grid-upgrade {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

@media(max-width: 720px) {
    .profile-stat-grid,
    .profile-grid-upgrade {
        grid-template-columns: 1fr;
    }

    .profile-avatar {
        width: 116px;
        height: 116px;
        border-radius: 34px;
    }
}



/* FINAL INTERACTIVE EXPERIENCE - CALM DIGITAL STORYTELLING */
.storytelling-workspace{--mood-main:#7D927A;--mood-soft:rgba(220,232,214,.64);--mood-glow:rgba(125,146,122,.18);position:relative;padding-bottom:46px}
.storytelling-workspace[data-mood-theme="hope"]{--mood-main:#B8945D;--mood-soft:rgba(244,225,190,.72);--mood-glow:rgba(184,148,93,.18)}
.storytelling-workspace[data-mood-theme="memory"]{--mood-main:#8A7EAD;--mood-soft:rgba(224,218,241,.70);--mood-glow:rgba(138,126,173,.16)}
.storytelling-workspace[data-mood-theme="letter"]{--mood-main:#9B7768;--mood-soft:rgba(237,215,206,.72);--mood-glow:rgba(155,119,104,.16)}
.storytelling-hero{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:22px;align-items:stretch;background:rgba(255,253,247,.84);border:1px solid rgba(95,115,94,.14);box-shadow:0 24px 70px rgba(65,73,66,.10);border-radius:38px;padding:34px;margin-bottom:18px;overflow:hidden;position:relative}
.storytelling-hero:before{content:"";position:absolute;width:360px;height:360px;border-radius:999px;background:var(--mood-glow);right:-110px;top:-120px;filter:blur(6px)}
.storytelling-hero h1{font-family:Georgia,serif;font-weight:900;color:#4F604F;letter-spacing:-.045em;font-size:clamp(2rem,3.8vw,3.7rem)}
.storytelling-hero p{color:#6F756F;max-width:760px;line-height:1.75}
.soft-3d-journal{position:relative;min-height:210px;display:grid;place-items:center}
.journal-book{width:230px;height:150px;position:relative;transform:rotate(-6deg);filter:drop-shadow(0 24px 28px rgba(65,73,66,.16))}
.book-page{position:absolute;width:112px;height:148px;top:0;border-radius:16px 8px 8px 16px;background:linear-gradient(135deg,#FFFCF4,#EFE7D8);border:1px solid rgba(95,115,94,.12)}
.page-left{left:6px;transform:skewY(2deg)}.page-right{right:6px;transform:skewY(-2deg);border-radius:8px 16px 16px 8px}
.page-right span{display:block;height:9px;background:rgba(95,115,94,.16);border-radius:20px;margin:18px 18px 0}.page-right span:nth-child(2){width:58%}.page-right span:nth-child(3){width:72%}
.floating-paper{position:absolute;width:58px;height:42px;border-radius:10px;background:rgba(255,253,247,.9);border:1px solid rgba(95,115,94,.14);box-shadow:0 16px 32px rgba(65,73,66,.12);animation:paperFloat 4.4s ease-in-out infinite}
.paper-a{right:22px;top:24px;transform:rotate(10deg)}.paper-b{left:16px;bottom:22px;transform:rotate(-12deg);animation-delay:.8s}
.story-stepper{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:18px}
.story-step{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center;text-align:left;border:1px solid rgba(95,115,94,.14);background:rgba(255,253,247,.72);border-radius:22px;padding:12px;color:#4F604F;box-shadow:0 14px 30px rgba(65,73,66,.06);transition:.2s}
.story-step:hover,.story-step.active{transform:translateY(-3px);background:var(--mood-soft);border-color:rgba(95,115,94,.22)}.story-step.done span{background:var(--mood-main);color:#fff}
.story-step span{width:34px;height:34px;display:grid;place-items:center;background:rgba(220,232,214,.72);color:#4F604F;border-radius:14px;font-weight:900}.story-step strong{display:block;font-size:.95rem;line-height:1}.story-step small{display:block;color:#6F756F;margin-top:3px;grid-column:2}
.guided-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:18px;align-items:start}.guided-main,.story-live-sidebar,.guided-panel{min-width:0}
.guided-panel,.story-live-sidebar{background:rgba(255,253,247,.82);border:1px solid rgba(95,115,94,.14);border-radius:34px;box-shadow:0 24px 70px rgba(65,73,66,.10);backdrop-filter:blur(14px)}
.guided-panel{padding:28px;display:none;animation:panelIn .36s ease both}.guided-panel.active{display:block}
.panel-heading span{color:var(--mood-main);font-weight:900;text-transform:uppercase;font-size:.82rem;letter-spacing:.08em}.panel-heading h2{font-family:Georgia,serif;color:#4F604F;font-weight:900;margin:6px 0 8px}.panel-heading p{color:#6F756F;line-height:1.7}
.mood-grid-interactive,.story-type-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:20px 0}
.mood-card,.story-type-choice{text-align:left;border:1px solid rgba(95,115,94,.14);background:rgba(255,253,247,.66);border-radius:24px;padding:18px;color:#4F604F;transition:.2s}
.mood-card:hover,.mood-card.active,.story-type-choice:hover,.story-type-choice.active{transform:translateY(-4px);background:var(--mood-soft);box-shadow:0 22px 48px rgba(65,73,66,.11)}
.mood-card span{display:grid;place-items:center;width:48px;height:48px;border-radius:18px;background:rgba(255,253,247,.74);color:var(--mood-main);font-size:1.45rem;margin-bottom:14px}.mood-card strong,.story-type-choice strong{display:block;font-family:Georgia,serif;font-size:1.15rem}.mood-card small,.story-type-choice small{display:block;color:#6F756F;line-height:1.55;margin-top:6px}
.story-response-box,.prompt-stage,.save-feedback-card,.time-gate-panel,.media-drop-zone,.final-checklist,.writing-metrics{background:rgba(220,232,214,.36);border:1px solid rgba(95,115,94,.12);border-radius:24px;padding:18px}.story-response-box{color:#4F604F;font-weight:800}.panel-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:22px}
.prompt-stage{display:flex;justify-content:space-between;gap:14px;align-items:center;margin:18px 0}.prompt-stage small{color:var(--mood-main);font-weight:900}.prompt-stage p{color:#4F604F;font-family:Georgia,serif;font-size:1.12rem;margin:4px 0 0}
.title-line{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center}.title-hint-button{border:1px solid rgba(95,115,94,.16);background:var(--mood-soft);color:#4F604F;font-weight:850;border-radius:18px;padding:12px 16px}
.guided-textarea{min-height:360px!important}.writing-metrics{display:grid;grid-template-columns:120px 120px minmax(0,1fr);gap:12px;margin-top:14px}.metric-card{background:rgba(255,253,247,.66);border:1px solid rgba(95,115,94,.10);border-radius:20px;padding:14px}.metric-card small{color:#6F756F;font-weight:800}.metric-card strong{display:block;color:#4F604F;font-size:1.7rem}.metric-card p{color:#6F756F;margin:8px 0 0}.story-progress-line{height:12px;overflow:hidden;border-radius:999px;background:rgba(95,115,94,.12);margin-top:10px}.story-progress-line span{display:block;height:100%;width:0;border-radius:inherit;background:var(--mood-main);transition:width .25s}
.sentence-helper-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}.helper-pill{border:1px solid rgba(95,115,94,.14);background:rgba(255,253,247,.72);color:#5F735E;border-radius:999px;padding:9px 14px;font-weight:800}
.media-drop-zone{text-align:center;padding:34px;margin:18px 0;border-style:dashed}.media-drop-zone.has-file{background:var(--mood-soft)}.drop-icon{width:68px;height:68px;display:grid;place-items:center;margin:0 auto 14px;border-radius:24px;background:rgba(255,253,247,.86);color:var(--mood-main);font-size:2rem;font-weight:900;box-shadow:0 14px 32px rgba(65,73,66,.09)}.media-drop-zone h3{font-family:Georgia,serif;color:#4F604F;font-weight:900}.media-drop-zone p{color:#6F756F}
.mini-countdown-preview{display:none;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}.mini-countdown-preview.active{display:grid}.mini-countdown-preview div{background:rgba(255,253,247,.68);border:1px solid rgba(95,115,94,.10);border-radius:20px;padding:16px;text-align:center}.mini-countdown-preview strong{display:block;font-size:1.7rem;color:#4F604F}.mini-countdown-preview span{color:#6F756F;font-weight:800}
.final-checklist{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:18px 0}.check-item{padding:14px 16px;border-radius:18px;background:rgba(255,253,247,.68);color:#6F756F;font-weight:850;border:1px solid rgba(95,115,94,.10)}.check-item:before{content:"○";margin-right:8px}.check-item.is-ready{color:#4F604F;background:var(--mood-soft)}.check-item.is-ready:before{content:"✓";color:var(--mood-main)}
.story-live-sidebar{padding:22px;position:sticky;top:86px}.preview-window-label{color:var(--mood-main);font-weight:900;margin-bottom:10px}.narrative-preview-card{background:linear-gradient(145deg,rgba(255,253,247,.92),rgba(247,239,226,.78));border:1px solid rgba(95,115,94,.14);border-radius:30px;padding:22px;min-height:300px;box-shadow:0 20px 50px rgba(65,73,66,.10);transition:.25s}.narrative-preview-card:hover{transform:translateY(-4px)}
.preview-cover{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}.preview-cover span,.preview-cover strong{display:inline-flex;border-radius:999px;padding:8px 12px;background:var(--mood-soft);color:var(--mood-main);font-size:.85rem;font-weight:900}.narrative-preview-card h3{font-family:Georgia,serif;font-weight:900;color:#4F604F;margin-bottom:12px}.narrative-preview-card p{color:#6F756F;line-height:1.75;white-space:pre-wrap}.narrative-preview-card small{display:block;color:#6F756F;margin-top:12px}.sidebar-response{background:var(--mood-soft);border:1px solid rgba(95,115,94,.12);border-radius:22px;padding:16px;margin:16px 0}.sidebar-response strong{color:#4F604F}.sidebar-response p{color:#6F756F;margin:6px 0 0}
.story-saved-overlay{position:fixed;inset:0;background:rgba(43,48,44,.38);backdrop-filter:blur(12px);display:grid;place-items:center;z-index:3000;padding:24px;animation:fadeIn .25s both}.story-saved-overlay.hide{animation:fadeOut .25s both;pointer-events:none}.story-saved-card{width:min(460px,100%);background:rgba(255,253,247,.94);border:1px solid rgba(95,115,94,.14);border-radius:34px;padding:32px;text-align:center;box-shadow:0 30px 80px rgba(43,48,44,.22)}.saved-icon{width:76px;height:76px;border-radius:28px;display:grid;place-items:center;background:rgba(220,232,214,.76);color:#4F604F;font-size:2.3rem;font-weight:900;margin:0 auto 18px;animation:savedPop .5s both}.story-saved-card h2{font-family:Georgia,serif;color:#4F604F;font-weight:900}.story-saved-card p{color:#6F756F}
.locked-visual-scene{position:relative;width:230px;height:170px;margin:20px 0}.lock-orbit{position:absolute;inset:10px;border:1px dashed rgba(95,115,94,.22);border-radius:50%;animation:slowOrbit 18s linear infinite}.time-lock{position:absolute;width:88px;height:88px;border-radius:30px;background:rgba(220,232,214,.72);display:grid;place-items:center;font-size:2.4rem;top:40px;left:70px;box-shadow:0 22px 48px rgba(65,73,66,.13)}.lock-paper{position:absolute;width:90px;height:64px;border-radius:16px;background:rgba(255,253,247,.86);border:1px solid rgba(95,115,94,.12);right:8px;bottom:26px;transform:rotate(10deg);box-shadow:0 18px 40px rgba(65,73,66,.10)}
.reading-ribbon{display:inline-flex;border-radius:999px;padding:9px 14px;background:rgba(220,232,214,.66);color:#4F604F;font-weight:900;margin-bottom:18px}
body.focus-writing .app-navbar,body.focus-writing .storytelling-hero,body.focus-writing .story-stepper,body.focus-writing .story-live-sidebar{display:none!important}body.focus-writing .guided-layout{grid-template-columns:1fr!important}body.focus-writing .guided-panel.active{max-width:880px;margin:0 auto}
.prompt-pop{animation:promptPop .38s both}@keyframes promptPop{0%{opacity:.4;transform:translateY(6px) scale(.98)}100%{opacity:1;transform:translateY(0) scale(1)}}@keyframes panelIn{0%{opacity:0;transform:translateY(12px)}100%{opacity:1;transform:translateY(0)}}@keyframes paperFloat{0%,100%{transform:translateY(0) rotate(10deg)}50%{transform:translateY(-12px) rotate(4deg)}}@keyframes slowOrbit{from{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes savedPop{0%{opacity:0;transform:scale(.72) rotate(-8deg)}100%{opacity:1;transform:scale(1) rotate(0)}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeOut{from{opacity:1}to{opacity:0}}
body.dark-theme .storytelling-hero,body.dark-theme .guided-panel,body.dark-theme .story-live-sidebar,body.dark-theme .story-step,body.dark-theme .mood-card,body.dark-theme .story-type-choice,body.dark-theme .story-response-box,body.dark-theme .prompt-stage,body.dark-theme .save-feedback-card,body.dark-theme .time-gate-panel,body.dark-theme .media-drop-zone,body.dark-theme .final-checklist,body.dark-theme .writing-metrics,body.dark-theme .metric-card,body.dark-theme .narrative-preview-card,body.dark-theme .story-saved-card,body.dark-theme .check-item,body.dark-theme .mini-countdown-preview div,body.dark-theme .helper-pill,body.dark-theme .title-hint-button{background:rgba(38,44,39,.82)!important;border-color:rgba(220,232,214,.16)!important;color:#ECEBE5!important}
body.dark-theme .storytelling-hero h1,body.dark-theme .panel-heading h2,body.dark-theme .mood-card strong,body.dark-theme .story-type-choice strong,body.dark-theme .metric-card strong,body.dark-theme .narrative-preview-card h3,body.dark-theme .media-drop-zone h3,body.dark-theme .mini-countdown-preview strong,body.dark-theme .story-saved-card h2{color:#DCE8D6!important}
body.dark-theme .storytelling-hero p,body.dark-theme .panel-heading p,body.dark-theme .mood-card small,body.dark-theme .story-type-choice small,body.dark-theme .metric-card p,body.dark-theme .narrative-preview-card p,body.dark-theme .narrative-preview-card small,body.dark-theme .media-drop-zone p,body.dark-theme .story-saved-card p{color:#B9BEB6!important}
@media(max-width:1180px){.storytelling-hero,.guided-layout{grid-template-columns:1fr}.story-live-sidebar{position:relative;top:auto}.story-stepper{grid-template-columns:repeat(3,1fr)}}@media(max-width:780px){.story-stepper,.mood-grid-interactive,.story-type-grid,.writing-metrics,.final-checklist{grid-template-columns:1fr}.title-line,.prompt-stage{display:block}.title-hint-button,#shuffleGuidedPrompt{margin-top:10px;width:100%}.storytelling-hero{padding:26px}.soft-3d-journal{min-height:160px}}


/* =========================================================
   RUANG CERITA UI POLISH - warm, soft, and interaction-led
========================================================= */

body.rc-page-ready {
    animation: rcPageArrive .46s ease both;
}

.rc-reveal {
    opacity: 0;
    transform: translateY(16px);
}

.rc-revealed {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .48s ease, transform .48s ease, box-shadow .22s ease, border-color .22s ease;
}

.auth-page-soft .main-wrapper {
    min-height: 100vh;
    display: grid;
    align-items: center;
}

.auth-card-soft {
    max-width: 560px;
    padding: 42px;
    border-radius: 34px;
    background:
        radial-gradient(circle at top right, rgba(220,232,214,.74), transparent 42%),
        linear-gradient(145deg, rgba(255,252,245,.94), rgba(248,241,231,.88));
}

.auth-card-soft::before {
    content: "";
    position: absolute;
    left: 28px;
    right: 28px;
    top: 18px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(79,111,82,.22), transparent);
}

.auth-memory-mark {
    width: 76px;
    height: 76px;
    border-radius: 26px;
    margin-bottom: 20px;
    background:
        linear-gradient(90deg, rgba(79,111,82,.12) 1px, transparent 1px),
        linear-gradient(145deg, var(--paper-solid), var(--sage-soft));
    background-size: 18px 100%, auto;
    border: 1px solid rgba(79,111,82,.16);
    box-shadow: 0 18px 38px rgba(62,76,63,.12);
    position: relative;
    animation: rcFloatMemory 4.8s ease-in-out infinite;
}

.auth-memory-mark::before,
.auth-memory-mark::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    height: 6px;
    border-radius: 999px;
    background: rgba(79,111,82,.18);
}

.auth-memory-mark::before { top: 25px; }
.auth-memory-mark::after { top: 41px; right: 28px; }

.auth-card-soft .form-label,
.cerita-modal .form-label {
    color: var(--sage-deep);
    font-weight: 700;
}

.auth-card-soft a {
    color: var(--sage-dark);
    font-weight: 700;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

.journal-filter {
    align-items: center;
}

.journal-story-card {
    isolation: isolate;
    overflow: hidden;
    position: relative;
}

.journal-story-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.34), rgba(220,232,214,.28));
    transition: opacity .28s ease;
}

.journal-story-card::after {
    position: absolute;
    right: 18px;
    bottom: 14px;
    color: rgba(79,111,82,.13);
    font-family: Georgia, serif;
    font-size: 2.8rem;
    font-weight: 900;
    letter-spacing: 0;
    pointer-events: none;
}

.journal-story-card.waiting::after { content: "LOCK"; }
.journal-story-card.opened::after { content: "OPEN"; }

.journal-story-card:hover::before {
    opacity: 1;
}

.journal-story-card.waiting:hover {
    border-color: rgba(216,180,106,.34);
}

.journal-story-card.opened:hover {
    border-color: rgba(79,111,82,.26);
}

.journal-card-top span,
.journal-card-top small {
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.34);
}

.journal-card-countdown div,
.journal-countdown div {
    position: relative;
    overflow: hidden;
}

.journal-card-countdown div::before,
.journal-countdown div::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.48), transparent);
    transform: translateX(-100%);
}

.journal-card-countdown.is-near-open div::before,
.journal-countdown.is-near-open div::before {
    opacity: 1;
    animation: rcCountdownShine 2.8s ease-in-out infinite;
}

.journal-card-countdown.is-very-near-open strong,
.journal-countdown.is-very-near-open strong {
    animation: rcTimePulse 1s ease-in-out infinite;
}

.emotional-countdown::after {
    content: attr(data-countdown-note);
    grid-column: 1 / -1;
    display: block;
    padding: 12px 16px;
    border-radius: 18px;
    background: rgba(255,252,245,.68);
    border: 1px solid rgba(79,111,82,.10);
    color: var(--muted);
    font-weight: 650;
}

.interactive-locked-detail {
    overflow: hidden;
    background:
        radial-gradient(circle at 88% 20%, rgba(216,180,106,.22), transparent 34%),
        radial-gradient(circle at 12% 88%, rgba(220,232,214,.60), transparent 38%),
        var(--j-card, rgba(255,253,247,.84)) !important;
}

.interactive-locked-detail > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 12px 32px;
    align-items: center;
}

.interactive-locked-detail .locked-memory-note {
    max-width: 680px;
    padding: 14px 18px;
    border-left: 4px solid rgba(216,180,106,.64);
    border-radius: 18px;
    background: rgba(255,252,245,.58);
    color: var(--sage-deep);
    font-weight: 600;
}

.locked-visual-scene {
    grid-column: 2;
    grid-row: 1 / span 5;
    justify-self: center;
    margin: 0;
}

.time-lock {
    font-size: 0 !important;
    color: var(--sage-deep);
    border: 1px solid rgba(79,111,82,.13);
    animation: rcLockBreathe 2.8s ease-in-out infinite;
}

.time-lock::before {
    content: "LOCK";
    font-family: Georgia, serif;
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 0;
}

.time-lock::after {
    content: "";
    position: absolute;
    width: 40px;
    height: 30px;
    border: 7px solid rgba(79,111,82,.28);
    border-bottom: 0;
    border-radius: 24px 24px 0 0;
    top: -18px;
    left: 24px;
}

.lock-paper::before,
.lock-paper::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    height: 6px;
    border-radius: 999px;
    background: rgba(79,111,82,.14);
}

.lock-paper::before { top: 18px; }
.lock-paper::after { top: 34px; right: 30px; }

.memory-open-detail .journal-open-head {
    position: relative;
    overflow: hidden;
    padding-right: min(300px, 28vw);
}

.memory-opened-scene {
    position: absolute;
    right: 34px;
    top: 50%;
    width: 210px;
    height: 150px;
    transform: translateY(-50%);
    pointer-events: none;
}

.memory-opened-scene span {
    position: absolute;
    width: 92px;
    height: 64px;
    border-radius: 16px;
    background:
        linear-gradient(90deg, rgba(79,111,82,.10) 1px, transparent 1px),
        rgba(255,252,245,.90);
    background-size: 18px 100%, auto;
    border: 1px solid rgba(79,111,82,.13);
    box-shadow: 0 18px 38px rgba(62,76,63,.11);
    animation: rcPaperLift 5.2s ease-in-out infinite;
}

.memory-opened-scene span:nth-child(1) {
    left: 14px;
    top: 48px;
    transform: rotate(-9deg);
}

.memory-opened-scene span:nth-child(2) {
    left: 74px;
    top: 20px;
    transform: rotate(7deg);
    animation-delay: .45s;
}

.memory-opened-scene span:nth-child(3) {
    left: 104px;
    top: 78px;
    transform: rotate(14deg);
    animation-delay: .9s;
}

.story-reading-experience {
    position: relative;
}

.story-reading-experience::before {
    content: "";
    position: absolute;
    left: 34px;
    top: 96px;
    bottom: 34px;
    width: 2px;
    background: linear-gradient(to bottom, transparent, rgba(231,183,160,.54), transparent);
}

.story-reading-experience .journal-story-body {
    animation: rcMemoryUnfold .72s ease both;
}

.cerita-page {
    position: relative;
    overflow: hidden;
}

.cerita-page::before {
    content: "";
    position: absolute;
    left: 28px;
    right: 28px;
    top: 22px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(79,111,82,.20), transparent);
}

.btn-mulai-cerita,
.cerita-modal .btn {
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.btn-mulai-cerita:hover,
.cerita-modal .btn:hover {
    transform: translateY(-2px);
}

.cerita-modal .modal-content {
    border: 1px solid rgba(79,111,82,.14) !important;
    box-shadow: 0 30px 90px rgba(47,58,51,.22);
}

.cerita-modal .modal-header {
    background:
        radial-gradient(circle at top right, rgba(220,232,214,.28), transparent 44%),
        linear-gradient(135deg, var(--sage-deep), var(--sage-dark)) !important;
}

.cerita-modal .modal-body {
    background:
        linear-gradient(90deg, rgba(79,111,82,.055) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,252,245,.98), rgba(248,241,231,.74));
    background-size: 34px 100%, auto;
}

.story-step-page.active {
    animation: rcPanelSlide .28s ease both !important;
}

@media (prefers-reduced-motion: reduce) {
    .story-step-page.active {
        animation: none !important;
    }
}

.cerita-icon {
    box-shadow: inset 0 0 0 1px rgba(79,111,82,.10), 0 16px 34px rgba(62,76,63,.10);
    animation: rcFloatMemory 4.4s ease-in-out infinite;
}

.paper-journal {
    border-left-color: var(--sage-dark) !important;
    box-shadow: 0 18px 46px rgba(62,76,63,.10) !important;
}

.story-lock-overlay {
    background:
        radial-gradient(circle at top, rgba(220,232,214,.72), transparent 58%),
        rgba(255,252,245,.90) !important;
    border: 1px solid rgba(79,111,82,.12);
}

.countdown-box {
    background: linear-gradient(135deg, var(--sage), var(--sage-dark)) !important;
    box-shadow: 0 12px 26px rgba(79,111,82,.22);
}

body.dark-theme .auth-card-soft,
body.dark-theme .interactive-locked-detail .locked-memory-note,
body.dark-theme .emotional-countdown::after {
    background: rgba(38,44,39,.82) !important;
    border-color: rgba(220,232,214,.16) !important;
    color: #DCE8D6 !important;
}

@keyframes rcPageArrive {
    from { opacity: .82; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes rcFloatMemory {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-8px) rotate(1deg); }
}

@keyframes rcCountdownShine {
    0% { transform: translateX(-120%); }
    46%, 100% { transform: translateX(120%); }
}

@keyframes rcTimePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

@keyframes rcLockBreathe {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-5px) scale(1.03); }
}

@keyframes rcPaperLift {
    0%, 100% { margin-top: 0; }
    50% { margin-top: -12px; }
}

@keyframes rcMemoryUnfold {
    from { opacity: .35; transform: translateY(16px); filter: blur(3px); }
    to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes rcPanelSlide {
    from { opacity: 0; transform: translateX(14px); }
    to { opacity: 1; transform: translateX(0); }
}

@media (max-width: 920px) {
    .interactive-locked-detail > div {
        grid-template-columns: 1fr;
    }

    .locked-visual-scene {
        grid-column: 1;
        grid-row: auto;
        margin: 18px auto;
    }

    .memory-open-detail .journal-open-head {
        padding-right: 24px;
    }

    .memory-opened-scene {
        position: relative;
        right: auto;
        top: auto;
        transform: none;
        margin-top: 18px;
        width: 190px;
    }
}

@media (max-width: 576px) {
    .auth-card-soft {
        padding: 28px;
        border-radius: 26px;
    }

    .journal-card-footer .btn,
    .journal-list-head .btn {
        width: 100%;
    }

    .emotional-countdown::after {
        padding: 11px 13px;
    }

    .story-reading-experience::before {
        display: none;
    }

    .cerita-page {
        padding: 34px 18px;
        border-radius: 26px;
    }
}


/* =========================================================
   DASHBOARD MEMORY ROOM - distinct dashboard experience
========================================================= */

.dashboard-legacy-hidden {
    display: none !important;
}

.memory-dashboard {
    max-width: 1180px;
    margin: 0 auto 48px;
}

.memory-dashboard-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) 360px;
    gap: 20px;
    align-items: stretch;
    margin-bottom: 18px;
}

.memory-hero-copy,
.memory-vault-card,
.memory-stat-rail article,
.memory-next-card,
.memory-prompt-card,
.memory-latest-card,
.memory-timeline-card {
    background: rgba(255,253,247,.82);
    border: 1px solid rgba(79,111,82,.14);
    box-shadow: 0 24px 70px rgba(62,76,63,.10);
    backdrop-filter: blur(14px);
}

.memory-hero-copy {
    position: relative;
    overflow: hidden;
    border-radius: 38px;
    padding: 42px;
    min-height: 330px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background:
        radial-gradient(circle at 86% 16%, rgba(220,232,214,.84), transparent 34%),
        radial-gradient(circle at 12% 88%, rgba(231,183,160,.20), transparent 38%),
        rgba(255,253,247,.84);
}

.memory-hero-copy::after {
    content: "";
    position: absolute;
    right: 28px;
    bottom: 28px;
    width: 138px;
    height: 94px;
    border-radius: 24px;
    background:
        linear-gradient(90deg, rgba(79,111,82,.10) 1px, transparent 1px),
        rgba(255,252,245,.76);
    background-size: 24px 100%, auto;
    border: 1px solid rgba(79,111,82,.12);
    transform: rotate(-4deg);
    opacity: .72;
}

.memory-hero-copy h1 {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin: 6px 0 12px;
    color: var(--sage-deep);
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2.35rem, 5vw, 4.6rem);
    font-weight: 900;
    line-height: .98;
}

.memory-hero-copy .journal-lead {
    position: relative;
    z-index: 1;
    max-width: 720px;
    color: var(--muted);
    line-height: 1.82;
    font-size: 1.02rem;
}

.memory-hero-actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.memory-vault-card {
    border-radius: 38px;
    padding: 26px;
    display: grid;
    gap: 16px;
    align-content: center;
    background:
        radial-gradient(circle at top, rgba(220,232,214,.76), transparent 52%),
        linear-gradient(145deg, rgba(255,253,247,.88), rgba(248,241,231,.72));
}

.memory-vault-illustration {
    position: relative;
    height: 190px;
    display: grid;
    place-items: center;
}

.vault-paper {
    position: absolute;
    width: 170px;
    height: 112px;
    border-radius: 24px;
    background:
        linear-gradient(90deg, rgba(79,111,82,.10) 1px, transparent 1px),
        linear-gradient(145deg, rgba(255,252,245,.98), rgba(248,241,231,.86));
    background-size: 22px 100%, auto;
    border: 1px solid rgba(79,111,82,.13);
    box-shadow: 0 20px 44px rgba(62,76,63,.12);
}

.vault-paper::before,
.vault-paper::after {
    content: "";
    position: absolute;
    left: 28px;
    height: 8px;
    border-radius: 999px;
    background: rgba(79,111,82,.16);
}

.vault-paper::before { top: 40px; width: 98px; }
.vault-paper::after { top: 62px; width: 70px; }
.paper-one { transform: rotate(-9deg) translate(-18px, 10px); animation: rcPaperLift 5s ease-in-out infinite; }
.paper-two { transform: rotate(8deg) translate(20px, -4px); animation: rcPaperLift 5s ease-in-out infinite .55s; }

.vault-lock {
    position: absolute;
    width: 74px;
    height: 58px;
    border-radius: 21px;
    bottom: 28px;
    left: calc(50% - 37px);
    background: linear-gradient(135deg, var(--sage), var(--sage-dark));
    box-shadow: 0 18px 38px rgba(79,111,82,.28);
    animation: rcLockBreathe 3s ease-in-out infinite;
}

.vault-lock::before {
    content: "";
    position: absolute;
    left: 19px;
    top: -22px;
    width: 36px;
    height: 28px;
    border: 7px solid rgba(79,111,82,.36);
    border-bottom: 0;
    border-radius: 24px 24px 0 0;
}

.memory-vault-copy {
    display: grid;
    place-items: center;
    text-align: center;
}

.memory-vault-copy small {
    color: var(--muted);
    font-weight: 800;
    margin-bottom: 10px;
}

.memory-progress-ring {
    width: 142px;
    height: 142px;
    border-radius: 50%;
    display: grid;
    place-content: center;
    background:
        conic-gradient(var(--sage-dark) var(--memory-progress, 0%), rgba(220,232,214,.74) 0),
        rgba(255,253,247,.92);
    border: 9px solid rgba(255,253,247,.94);
    box-shadow: inset 0 0 0 1px rgba(79,111,82,.14), 0 18px 38px rgba(62,76,63,.10);
}

.memory-progress-ring strong {
    color: var(--sage-deep);
    font-size: 1.8rem;
    font-weight: 900;
    line-height: 1;
}

.memory-progress-ring span {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 800;
}

.memory-stat-rail {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.memory-stat-rail article {
    border-radius: 26px;
    padding: 18px 20px;
    transition: .22s ease;
}

.memory-stat-rail article:hover {
    transform: translateY(-4px);
    box-shadow: 0 26px 70px rgba(62,76,63,.14);
}

.memory-stat-rail span {
    display: block;
    color: var(--sage-dark);
    font-weight: 850;
    font-size: .86rem;
}

.memory-stat-rail strong {
    display: block;
    margin: 3px 0;
    color: var(--ink);
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    font-weight: 900;
}

.memory-stat-rail small {
    color: var(--muted);
    font-weight: 600;
}

.memory-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
    gap: 18px;
    align-items: start;
}

.memory-next-card,
.memory-prompt-card,
.memory-latest-card,
.memory-timeline-card {
    border-radius: 32px;
    padding: 26px;
}

.memory-next-card {
    min-height: 330px;
    background:
        radial-gradient(circle at top right, rgba(216,180,106,.18), transparent 40%),
        rgba(255,253,247,.84);
}

.memory-prompt-card {
    background:
        radial-gradient(circle at top left, rgba(220,232,214,.72), transparent 45%),
        rgba(255,253,247,.82);
}

.memory-latest-card {
    background:
        radial-gradient(circle at bottom right, rgba(231,183,160,.18), transparent 44%),
        rgba(255,253,247,.82);
}

.memory-timeline-card {
    grid-row: span 2;
}

.memory-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.memory-card-head a {
    color: var(--sage-dark);
    font-weight: 800;
    text-decoration: none;
}

.memory-next-card h2,
.memory-latest-card h2 {
    color: var(--sage-deep);
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 900;
    line-height: 1.12;
}

.memory-next-card p,
.memory-latest-card p,
.memory-empty-card p {
    color: var(--muted);
    line-height: 1.75;
}

.memory-mini-countdown {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 18px;
}

.memory-mini-countdown div {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    padding: 14px 10px;
    text-align: center;
    background: rgba(255,252,245,.72);
    border: 1px solid rgba(79,111,82,.12);
}

.memory-mini-countdown strong {
    display: block;
    color: var(--sage-deep);
    font-size: 1.65rem;
    font-weight: 900;
}

.memory-mini-countdown span {
    color: var(--muted);
    font-size: .82rem;
    font-weight: 800;
}

.memory-prompt-card p {
    color: var(--sage-deep);
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1.35;
    margin: 14px 0 20px;
}

.builder-prompt-trigger {
    cursor: pointer;
    border-radius: 18px;
    transition: background .18s ease, transform .18s ease;
}

.builder-prompt-trigger:hover,
.builder-prompt-trigger:focus {
    background: rgba(255,252,245,.48);
    transform: translateY(-2px);
    outline: none;
}

.memory-icon-button {
    border: 1px solid rgba(79,111,82,.18);
    border-radius: 999px;
    background: rgba(220,232,214,.72);
    color: var(--sage-deep);
    font-weight: 800;
    padding: 10px 16px;
    transition: .2s ease;
}

.memory-icon-button:hover {
    transform: translateY(-2px);
    background: rgba(220,232,214,.96);
}

.memory-prompt-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.memory-icon-button.subtle {
    background: rgba(255,252,245,.70);
}

.prompt-builder-modal {
    z-index: 2055 !important;
}

.prompt-builder-content {
    border: 1px solid rgba(79,111,82,.14);
    border-radius: 32px;
    overflow: hidden;
    background:
        radial-gradient(circle at top right, rgba(220,232,214,.72), transparent 42%),
        rgba(255,253,247,.96);
    box-shadow: 0 32px 92px rgba(47,58,51,.24);
}

.prompt-builder-head,
.prompt-builder-body,
.prompt-builder-footer {
    padding: 26px 30px;
}

.prompt-builder-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    border-bottom: 1px solid rgba(79,111,82,.10);
}

.prompt-builder-head h2 {
    margin: 5px 0 6px;
    color: var(--sage-deep);
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 900;
}

.prompt-builder-head p,
.builder-prompt-preview small,
.builder-topic span {
    color: var(--muted);
}

.builder-prompt-preview {
    border-radius: 24px;
    padding: 18px;
    margin-bottom: 18px;
    background: rgba(220,232,214,.42);
    border: 1px solid rgba(79,111,82,.12);
}

.builder-prompt-preview p {
    color: var(--sage-deep);
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.28rem;
    font-weight: 850;
    line-height: 1.4;
    margin: 4px 0 0;
}

.builder-topic-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.builder-topic {
    text-align: left;
    border: 1px solid rgba(79,111,82,.14);
    border-radius: 22px;
    background: rgba(255,252,245,.72);
    padding: 15px;
    transition: .2s ease;
}

.builder-topic:hover,
.builder-topic.active {
    transform: translateY(-3px);
    background: rgba(220,232,214,.62);
    border-color: rgba(79,111,82,.28);
    box-shadow: 0 16px 38px rgba(62,76,63,.10);
}

.builder-topic strong {
    display: block;
    color: var(--sage-deep);
    margin-bottom: 4px;
}

.builder-topic span {
    display: block;
    font-size: .84rem;
    line-height: 1.5;
}

.builder-draft-textarea {
    min-height: 150px !important;
}

.prompt-builder-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid rgba(79,111,82,.10);
    background: rgba(220,232,214,.24);
}

.builder-prefill-note {
    border-radius: 24px;
    padding: 18px;
    margin-bottom: 18px;
    background: rgba(220,232,214,.48);
    border: 1px solid rgba(79,111,82,.13);
}

.builder-prefill-note span {
    color: var(--sage-dark);
    font-weight: 850;
    font-size: .86rem;
}

.builder-prefill-note p {
    margin: 6px 0;
    color: var(--sage-deep);
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 850;
    line-height: 1.35;
}

.builder-prefill-note small {
    color: var(--muted);
}

.memory-timeline {
    display: grid;
    gap: 10px;
    position: relative;
}

.memory-timeline::before {
    content: "";
    position: absolute;
    left: 13px;
    top: 12px;
    bottom: 12px;
    width: 2px;
    background: linear-gradient(to bottom, rgba(79,111,82,.12), rgba(79,111,82,.28), rgba(79,111,82,.08));
}

.memory-timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
    border-radius: 20px;
    color: inherit;
    text-decoration: none;
    transition: .2s ease;
}

.memory-timeline-item:hover {
    transform: translateX(4px);
    background: rgba(220,232,214,.32);
}

.memory-timeline-item > span {
    width: 28px;
    height: 28px;
    border-radius: 12px;
    background: var(--sage-soft);
    border: 1px solid rgba(79,111,82,.14);
    z-index: 1;
}

.memory-timeline-item.is-open > span {
    background: linear-gradient(135deg, var(--sage), var(--sage-dark));
}

.memory-timeline-item.is-waiting > span {
    background: linear-gradient(135deg, var(--sage-soft), rgba(216,180,106,.62));
}

.memory-timeline-item strong {
    display: block;
    color: var(--sage-deep);
    font-weight: 850;
    overflow-wrap: anywhere;
}

.memory-timeline-item small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    line-height: 1.55;
}

.memory-empty-card {
    border-radius: 22px;
    padding: 18px;
    background: rgba(220,232,214,.38);
    border: 1px solid rgba(79,111,82,.10);
}

body.dark-theme .memory-hero-copy,
body.dark-theme .memory-vault-card,
body.dark-theme .memory-stat-rail article,
body.dark-theme .memory-next-card,
body.dark-theme .memory-prompt-card,
body.dark-theme .memory-latest-card,
body.dark-theme .memory-timeline-card,
body.dark-theme .memory-empty-card,
body.dark-theme .prompt-builder-content,
body.dark-theme .builder-prompt-preview,
body.dark-theme .builder-topic,
body.dark-theme .builder-prefill-note {
    background: rgba(38,44,39,.82) !important;
    border-color: rgba(220,232,214,.16) !important;
    color: #ECEBE5 !important;
}

body.dark-theme .memory-hero-copy h1,
body.dark-theme .memory-progress-ring strong,
body.dark-theme .memory-stat-rail strong,
body.dark-theme .memory-next-card h2,
body.dark-theme .memory-latest-card h2,
body.dark-theme .memory-prompt-card p,
body.dark-theme .memory-timeline-item strong,
body.dark-theme .prompt-builder-head h2,
body.dark-theme .builder-prompt-preview p,
body.dark-theme .builder-topic strong,
body.dark-theme .builder-prefill-note p {
    color: #DCE8D6 !important;
}

body.dark-theme .memory-hero-copy .journal-lead,
body.dark-theme .memory-vault-copy small,
body.dark-theme .memory-progress-ring span,
body.dark-theme .memory-stat-rail small,
body.dark-theme .memory-next-card p,
body.dark-theme .memory-latest-card p,
body.dark-theme .memory-timeline-item small,
body.dark-theme .memory-empty-card p,
body.dark-theme .prompt-builder-head p,
body.dark-theme .builder-topic span,
body.dark-theme .builder-prefill-note small {
    color: #B9BEB6 !important;
}

@media (max-width: 1040px) {
    .memory-dashboard-hero,
    .memory-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .memory-timeline-card {
        grid-row: auto;
    }
}

@media (max-width: 760px) {
    .memory-hero-copy,
    .memory-vault-card,
    .memory-next-card,
    .memory-prompt-card,
    .memory-latest-card,
    .memory-timeline-card {
        border-radius: 26px;
        padding: 22px;
    }

    .memory-stat-rail,
    .memory-mini-countdown,
    .builder-topic-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .memory-card-head {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 520px) {
    .memory-hero-actions .btn,
    .memory-next-card .btn,
    .memory-latest-card .btn {
        width: 100%;
    }

    .memory-stat-rail,
    .memory-mini-countdown,
    .builder-topic-grid {
        grid-template-columns: 1fr;
    }

    .prompt-builder-head,
    .prompt-builder-body,
    .prompt-builder-footer {
        padding: 22px;
    }

    .prompt-builder-footer {
        display: grid;
    }
}


/* Bootstrap backdrop is disabled because it can sit above custom modals in this app. */
.modal-backdrop,
.modal-backdrop.fade,
.modal-backdrop.show,
.modal-backdrop.fade.show,
body.modal-open > .modal-backdrop,
body.modal-open > .modal-backdrop.fade.show {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Fase 2: masuknya kartu singkat dan bertahap dari JavaScript global. */
.journal-story-card.rc-enter {
    animation: dashboardCardIn .42s ease both;
    animation-delay: var(--rc-card-delay, 0ms);
}

/* Fase 1: focus state dasar dan empty state lokal tanpa aset eksternal. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(79, 111, 82, .45);
    outline-offset: 3px;
}

.journal-empty-illustration {
    width: 112px;
    height: 112px;
    margin: 0 auto 20px;
    display: grid;
    place-items: center;
    border-radius: 32px;
    color: #4F604F;
    background: linear-gradient(145deg, rgba(220, 232, 214, .9), rgba(246, 224, 190, .75));
    border: 1px solid rgba(95, 115, 94, .14);
    font-size: 3rem;
}

/* Fase 4: interaksi linimasa, status, filter, dan empty state. */
.journal-filter-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.journal-filter-reset {
    color: var(--j-sage-dark, #4F604F);
    font-weight: 700;
    text-underline-offset: 3px;
}

.journal-story-card {
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.journal-story-card:focus-within {
    transform: translateY(-3px);
    border-color: rgba(79, 111, 82, .42);
    box-shadow: 0 22px 58px rgba(65, 73, 66, .15);
}

.journal-story-card:active {
    transform: translateY(-1px) scale(.995);
}

.journal-story-card .btn:focus-visible {
    outline: 3px solid rgba(79, 111, 82, .62) !important;
    outline-offset: 3px;
    box-shadow: 0 0 0 .22rem rgba(125, 146, 122, .2) !important;
}

.journal-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.journal-status-badge.is-open {
    background: rgba(220, 232, 214, .82);
    color: #36563A;
}

.journal-status-badge.is-locked {
    background: rgba(246, 224, 190, .82);
    color: #69502C;
}

.journal-card-countdown {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.journal-card-countdown > p {
    grid-column: 1 / -1;
}

.journal-empty-filter .journal-empty-illustration {
    background: linear-gradient(145deg, rgba(238, 240, 237, .95), rgba(220, 232, 214, .68));
}

body.dark-theme .journal-status-badge.is-open {
    background: rgba(102, 145, 105, .28) !important;
    color: #DCE8D6 !important;
}

body.dark-theme .journal-status-badge.is-locked {
    background: rgba(216, 180, 106, .24) !important;
    color: #F2D69F !important;
}

body.dark-theme .journal-empty-state,
body.dark-theme .journal-empty-illustration {
    border-color: rgba(220, 232, 214, .16);
    color: #DCE8D6;
}

@media (max-width: 820px) {
    .journal-filter-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

@media (max-width: 520px) {
    .journal-card-countdown {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .journal-filter-actions .btn {
        flex: 1 1 auto;
    }

    .journal-empty-state {
        padding-inline: 22px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .journal-story-card,
    .journal-story-card.rc-enter,
    .journal-empty-illustration,
    .btn-pulse {
        animation: none !important;
        transition: none !important;
    }

    .journal-story-card:hover,
    .journal-story-card:focus-within,
    .journal-story-card:active {
        transform: none;
    }
}

/* Fase 6: detail cerita, media dialog, dan konfirmasi hapus. */
.journal-open-detail,
.journal-locked-detail {
    overflow-wrap: anywhere;
}

.journal-locked-detail.is-locked .time-lock {
    transition: transform .32s ease, filter .32s ease;
}

.journal-detail-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    color: var(--j-muted, #6F756F);
}

.journal-detail-summary p {
    margin: 0;
}

.journal-story-body {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.story-reading-experience .journal-story-body,
.rc-dynamic-unlocked,
.rc-dynamic-unlocked .journal-story-body {
    animation: none;
}

.rc-detail-reveal {
    animation: rcDetailReveal .42s ease both;
}

.rc-detail-reveal-meta { animation-delay: .06s; }
.rc-detail-reveal-body { animation-delay: .12s; }
.rc-detail-reveal-media { animation-delay: .18s; }
.rc-detail-reveal-actions { animation-delay: .22s; }

.rc-detail-open-feedback,
.rc-media-feedback {
    margin: 12px 0 0;
    color: #36563A;
    font-weight: 700;
}

.rc-media-feedback:empty {
    display: none;
}

.journal-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.journal-detail-media img,
.journal-detail-media video {
    display: block;
    width: 100%;
    max-height: min(72vh, 720px);
    object-fit: contain;
    background: rgba(28, 32, 29, .06);
}

.journal-media-zoom {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 20px;
    background: transparent;
    cursor: zoom-in;
}

.journal-media-zoom:disabled {
    cursor: default;
    opacity: .72;
}

body.rc-dialog-open {
    overflow: hidden;
}

.rc-dialog[hidden] {
    display: none !important;
}

.rc-dialog {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: grid;
    place-items: center;
    padding: 18px;
    overflow-y: auto;
    background: rgba(24, 29, 25, .68);
    backdrop-filter: blur(8px);
}

.rc-dialog-panel {
    width: min(100%, 520px);
    max-height: calc(100vh - 36px);
    overflow: auto;
    padding: 28px;
    border: 1px solid rgba(79, 111, 82, .18);
    border-radius: 28px;
    background: #FFFDF7;
    color: var(--j-text, #343A35);
    box-shadow: 0 30px 90px rgba(22, 28, 23, .3);
    animation: rcDialogIn .24s ease both;
}

.rc-dialog-panel h2 {
    margin: 0 0 10px;
    font-family: Georgia, serif;
    color: #4F604F;
}

.rc-dialog-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    margin-bottom: 14px;
    border-radius: 16px;
    background: rgba(183, 75, 75, .12);
    color: #963F3F;
    font-size: 1.25rem;
}

.rc-dialog-actions,
.rc-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.rc-dialog-actions {
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-top: 24px;
}

.rc-dialog-close {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border: 1px solid rgba(79, 111, 82, .18);
    border-radius: 50%;
    background: rgba(220, 232, 214, .4);
    color: #4F604F;
}

.rc-image-dialog-panel {
    width: min(100%, 980px);
}

.rc-image-dialog-panel img {
    display: block;
    width: 100%;
    max-height: calc(100vh - 150px);
    margin-top: 16px;
    object-fit: contain;
    border-radius: 18px;
}

body.dark-theme .rc-dialog-panel {
    border-color: rgba(220, 232, 214, .18);
    background: #262C27;
    color: #ECEBE5;
}

body.dark-theme .rc-dialog-panel h2,
body.dark-theme .rc-detail-open-feedback,
body.dark-theme .rc-media-feedback {
    color: #DCE8D6;
}

body.dark-theme .rc-dialog-close {
    border-color: rgba(220, 232, 214, .2);
    background: rgba(125, 146, 122, .2);
    color: #DCE8D6;
}

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

@keyframes rcDialogIn {
    from { opacity: 0; transform: translateY(8px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 520px) {
    .journal-open-head,
    .journal-reading-page,
    .journal-locked-detail {
        padding: 22px;
        border-radius: 26px;
    }

    .journal-story-body,
    .journal-detail-media {
        padding: 16px;
        border-radius: 20px;
    }

    .journal-detail-actions .btn,
    .rc-dialog-actions .btn {
        width: 100%;
    }

    .rc-dialog {
        padding: 10px;
    }

    .rc-dialog-panel {
        max-height: calc(100vh - 20px);
        padding: 22px;
        border-radius: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .journal-locked-detail.is-locked .time-lock,
    .rc-detail-reveal,
    .rc-dialog-panel {
        animation: none !important;
        transition: none !important;
    }
}

/* Fase 7: kontrol global, tema, navigasi mobile, dan aksesibilitas. */
body.dark-theme {
    color-scheme: dark;
}

.music-note-button,
.theme-toggle-button {
    touch-action: manipulation;
}

.navbar-toggler:focus-visible,
.music-note-button:focus-visible,
.theme-toggle-button:focus-visible,
.rc-dialog-close:focus-visible {
    outline: 3px solid rgba(79, 111, 82, .62) !important;
    outline-offset: 3px;
    box-shadow: 0 0 0 .22rem rgba(125, 146, 122, .2) !important;
}

body.dark-theme .navbar-toggler {
    border-color: rgba(220, 232, 214, .28);
}

body.dark-theme .navbar-toggler-icon {
    filter: invert(1) grayscale(1);
}

body.dark-theme .form-control::placeholder,
body.dark-theme .form-select::placeholder {
    color: #AEB6AC;
    opacity: 1;
}

@media (max-width: 991.98px) {
    #navbarRuangCerita {
        padding-top: 10px;
    }

    #navbarRuangCerita .navbar-nav {
        align-items: stretch;
    }

    #navbarRuangCerita .nav-link,
    #navbarRuangCerita form,
    #navbarRuangCerita .btn {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .music-note-button,
    .theme-toggle-button {
        right: 12px !important;
        width: 48px !important;
        height: 48px !important;
    }

    .music-note-button {
        bottom: 12px !important;
    }

    .theme-toggle-button {
        bottom: 70px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto !important;
    }

    .main-wrapper,
    .app-navbar,
    .music-note-button,
    .music-note-button::before,
    .music-note-button::after,
    .music-note-symbol,
    .theme-toggle-button,
    .guided-transition,
    .guided-progress span {
        animation: none !important;
        transition: none !important;
    }

    .music-note-button:hover,
    .theme-toggle-button:hover {
        transform: none !important;
    }
}

/* Fase 9: final cascade untuk tipografi diary di atas generasi CSS lama. */
.diary-heading,
.memory-hero-copy h1,
.cerita-hero h1,
.cerita-modal .modal-title,
.journal-write-head h1,
.journal-list-head h1,
.journal-open-head h1,
.journal-locked-detail h1,
.journal-story-card h3,
.final-preview-title {
    font-family: var(--font-diary);
    font-weight: 700;
    letter-spacing: -.025em;
    overflow-wrap: anywhere;
}

.memory-hero-copy h1 {
    font-size: clamp(2.2rem, 4.7vw, 4.15rem);
    line-height: 1.12;
}

@media (max-width: 760px) {
    .memory-hero-copy h1,
    .journal-write-head h1,
    .journal-list-head h1,
    .journal-open-head h1,
    .journal-locked-detail h1 {
        font-size: clamp(2rem, 9vw, 3rem);
    }
}

@media (max-width: 420px) {
    .memory-hero-copy h1 {
        font-size: clamp(1.9rem, 10vw, 2.65rem);
    }
}

/* Fase 9B: font aplikasi global. */
:root {
    --font-app: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
    --font-body: var(--font-app);
    --font-diary: var(--font-app);
}

html,
body,
body *,
button,
input,
textarea,
select,
option {
    font-family: var(--font-app) !important;
}

body {
    line-height: 1.62;
}

button,
input,
textarea,
select,
option {
    line-height: 1.4;
}

.memory-dashboard {
    position: relative;
    isolation: isolate;
}

.dashboard-background-decorations {
    position: absolute;
    inset: -30px;
    z-index: 0;
    overflow: hidden;
    border-radius: 52px;
    pointer-events: none;
    color: var(--sage-dark);
}

.dashboard-background-decorations::before,
.dashboard-background-decorations::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.dashboard-background-decorations::before {
    width: 190px;
    height: 190px;
    left: -72px;
    top: 24%;
    background: rgba(134,167,137,.1);
}

.dashboard-background-decorations::after {
    width: 150px;
    height: 150px;
    right: -54px;
    bottom: 5%;
    border: 1px solid rgba(216,180,106,.2);
    background: rgba(248,241,231,.14);
}

.memory-dashboard-hero,
.memory-summary-strip {
    position: relative;
    z-index: 2;
}

.dashboard-leaf,
.dashboard-floating-lock,
.dashboard-floating-book,
.dashboard-sparkle {
    position: absolute;
    display: block;
    pointer-events: none;
    will-change: transform;
}

.dashboard-leaf {
    top: -54px;
    width: 26px;
    height: 26px;
    color: var(--sage-dark);
    opacity: .55;
    animation: dashboardLeafFall 14s linear infinite;
}

.dashboard-leaf svg,
.dashboard-floating-lock svg,
.dashboard-floating-book svg {
    display: block;
    width: 100%;
    height: 100%;
}

.dashboard-leaf.leaf-1 { left: 1%; width: 22px; height: 22px; animation-duration: 11s; animation-delay: -2.5s; }
.dashboard-leaf.leaf-2 { left: 19%; width: 30px; height: 30px; animation-duration: 15s; animation-delay: -5s; }
.dashboard-leaf.leaf-3 { left: 47%; width: 25px; height: 25px; animation-duration: 18s; animation-delay: -8s; }
.dashboard-leaf.leaf-4 { left: 73%; width: 34px; height: 34px; animation-duration: 13s; animation-delay: -10s; }
.dashboard-leaf.leaf-5 { left: 96%; width: 27px; height: 27px; animation-duration: 19s; animation-delay: -13s; }

.dashboard-floating-lock {
    right: 1.8%;
    top: 34%;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 7px;
    border: 1px solid rgba(79,111,82,.18);
    border-radius: 14px;
    background: rgba(220,232,214,.56);
    color: var(--sage-deep);
    opacity: .62;
    animation: dashboardLockFloat 6.4s -2s ease-in-out infinite;
}

.dashboard-floating-book {
    left: 1.2%;
    bottom: 10%;
    width: 50px;
    height: 50px;
    color: var(--brown);
    opacity: .55;
    animation: dashboardBookFloat 8.6s -4s ease-in-out infinite;
}

.dashboard-sparkle {
    color: var(--gold);
    opacity: .58;
    font-size: 24px;
    line-height: 1;
    animation: dashboardSparkleFloat 5.8s -1.5s ease-in-out infinite;
}

.dashboard-sparkle.sparkle-1 {
    left: 34%;
    top: 48%;
}

.dashboard-sparkle.sparkle-2 {
    right: 27%;
    bottom: 3%;
    font-size: 20px;
    animation-delay: -4.2s;
}

body.dark-theme .dashboard-leaf {
    color: #B9D1B8;
    opacity: .62;
}

body.dark-theme .dashboard-floating-lock {
    border-color: rgba(220,232,214,.2);
    background: rgba(125,146,122,.3);
    color: #DCE8D6;
    opacity: .65;
}

body.dark-theme .dashboard-floating-book {
    color: #E7C9AA;
    opacity: .6;
}

body.dark-theme .dashboard-sparkle {
    color: #F2D69F;
    opacity: .62;
}

body.dark-theme .dashboard-background-decorations::before {
    background: rgba(185,209,184,.08);
}

body.dark-theme .dashboard-background-decorations::after {
    border-color: rgba(242,214,159,.16);
    background: rgba(55,62,56,.12);
}

@keyframes dashboardLeafFall {
    0% { transform: translate3d(0, -70px, 0) rotate(-15deg); }
    35% { transform: translate3d(30px, 220px, 0) rotate(12deg); }
    70% { transform: translate3d(-18px, 520px, 0) rotate(28deg); }
    100% { transform: translate3d(24px, 900px, 0) rotate(48deg); }
}

@keyframes dashboardLockFloat {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(-2deg); }
    50% { transform: translate3d(-4px, -12px, 0) rotate(4deg); }
}

@keyframes dashboardBookFloat {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1) rotate(-4deg); }
    50% { transform: translate3d(12px, -10px, 0) scale(1.04) rotate(-1deg); }
}

@keyframes dashboardSparkleFloat {
    0%, 100% { transform: translate3d(0, 0, 0) scale(.94); opacity: .42; }
    50% { transform: translate3d(4px, -7px, 0) scale(1.06); opacity: .64; }
}

@media (max-width: 1040px) {
    .dashboard-leaf.leaf-2,
    .dashboard-leaf.leaf-4,
    .dashboard-sparkle.sparkle-2 {
        display: none;
    }
}

@media (max-width: 760px) {
    .dashboard-background-decorations {
        inset: -12px;
        border-radius: 34px;
    }

    .dashboard-leaf.leaf-2,
    .dashboard-leaf.leaf-3,
    .dashboard-leaf.leaf-4,
    .dashboard-floating-book,
    .dashboard-sparkle {
        display: none;
    }

    .dashboard-leaf.leaf-1 {
        left: 8%;
        width: 18px;
        height: 18px;
    }

    .dashboard-leaf.leaf-5 {
        left: 82%;
        width: 22px;
        height: 22px;
    }

    .dashboard-floating-lock {
        right: 4px;
        top: 66%;
        width: 34px;
        height: 34px;
        padding: 6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dashboard-leaf,
    .dashboard-floating-lock,
    .dashboard-floating-book,
    .dashboard-sparkle {
        animation: none !important;
    }

    .dashboard-leaf.leaf-3,
    .dashboard-leaf.leaf-4,
    .dashboard-leaf.leaf-5,
    .dashboard-floating-book,
    .dashboard-sparkle {
        display: none;
    }

    .dashboard-leaf.leaf-1,
    .dashboard-leaf.leaf-2 {
        display: block;
        opacity: .35;
        transform: rotate(-12deg);
    }

    .dashboard-leaf.leaf-1 {
        top: 9%;
        left: 3%;
    }

    .dashboard-leaf.leaf-2 {
        top: auto;
        right: 3%;
        bottom: 8%;
        left: auto;
    }

    .dashboard-floating-lock {
        top: 48%;
        right: 1%;
        display: grid;
        opacity: .4;
        transform: rotate(2deg);
    }
}

.bi,
[class^="bi-"],
[class*=" bi-"] {
    font-family: "bootstrap-icons" !important;
}

/* ===== PATCH 9D: Draft story cards and readable page transitions ===== */
.guided-transition.is-active .guided-progress span {
    animation-duration: var(--rc-transition-duration, 750ms) !important;
}

.journal-story-card.draft {
    background: radial-gradient(circle at top right, rgba(242, 214, 159, .24), transparent 52%), rgba(255, 253, 247, .78);
    border-style: dashed;
}

.journal-story-card.draft::after {
    content: "DRAFT";
}

.journal-status-badge.is-draft {
    background: rgba(242, 214, 159, .34);
    color: #725c31;
}

.journal-draft-summary {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin: .75rem 0 1rem;
}

.journal-draft-summary span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .65rem;
    border-radius: 999px;
    background: rgba(125, 132, 113, .1);
    color: var(--j-muted);
    font-size: .85rem;
}

.journal-draft-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

body.dark-theme .journal-story-card.draft {
    background: radial-gradient(circle at top right, rgba(242, 214, 159, .12), transparent 52%), rgba(55, 62, 56, .78);
}

body.dark-theme .journal-status-badge.is-draft {
    background: rgba(242, 214, 159, .18);
    color: #f2d69f;
}

@media (max-width: 576px) {
    .cerita-footer-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .cerita-footer-actions .btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .guided-transition.show,
    .guided-transition.is-active .guided-box,
    .guided-transition.is-active .guided-progress span {
        animation-duration: .01ms !important;
    }
}

.memory-summary-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 760px) {
    .memory-summary-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}