* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --bg: #f5f6f8;
    --card: #ffffff;
    --text: #151619;
    --muted: #858991;
    --line: rgba(0,0,0,.07);
    --green: #3c9b68;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    padding-bottom: 115px;
    -webkit-user-select: none;
    user-select: none;
}

/* =====================================================
   HEADER
===================================================== */

.header {
    position: sticky;
    top: 0;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    background: rgba(255,255,255,.88);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid var(--line);
    z-index: 50;
}

.brand {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 18px;
    font-weight: 750;

    transition:
        opacity .1s cubic-bezier(.4,0,.2,1),
        transform .25s cubic-bezier(.4,0,.2,1);
}

.brand-logo {
    font-size: 21px;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 5px;

    transition:
        opacity .1s cubic-bezier(.4,0,.2,1);
}

.header-btn {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    color: #33363b;
    border-radius: 13px;
    cursor: pointer;
    transition:
        background .25s ease,
        transform .25s ease,
        opacity .1s cubic-bezier(.4,0,.2,1);
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

.header-btn:hover {
    background: #f0f1f3;
}

.header-btn:active {
    transform: scale(.88);
}

.header-btn:focus,
.header-btn:focus-visible {
    outline: none;
    box-shadow: none;
}

.header-btn svg {
    width: 21px;
    height: 21px;
}

/* =====================================================
   SEARCH EXPAND
===================================================== */

.search-area {
    position: absolute;
    top: 0;
    right: 18px;
    height: 68px;

    display: flex;
    align-items: center;
    gap: 8px;

    pointer-events: none;
    z-index: 60;
}

.search-expand {
    width: 40px;
    height: 40px;
    flex-shrink: 1;

    display: flex;
    align-items: center;

    background: #ffffff;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 14px;

    overflow: hidden;
    opacity: 0;
    pointer-events: none;

    transform: scale(.92);
    transform-origin: right center;

    transition:
        width .25s cubic-bezier(.4,0,.2,1),
        transform .25s cubic-bezier(.4,0,.2,1),
        opacity .1s cubic-bezier(.4,0,.2,1);

    z-index: 1;

    box-shadow:
        0 4px 14px rgba(0,0,0,.05);
}

.search-expand-icon {
    width: 40px;
    min-width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    color: #17191c;
}

.search-expand-icon svg {
    width: 21px;
    height: 21px;
}

.search-expand-input {
    flex: 1;
    min-width: 0;

    height: 100%;

    border: 0;
    outline: none;
    background: transparent;

    color: #17191c;
    font: inherit;
    font-size: 14px;
    font-weight: 500;

    opacity: 0;
    pointer-events: none;

    transition:
        opacity .15s cubic-bezier(.4,0,.2,1);

    -webkit-appearance: none;
    appearance: none;
}

.search-expand-input::-webkit-search-cancel-button,
.search-expand-input::-webkit-search-decoration,
.search-expand-input::-webkit-search-results-button,
.search-expand-input::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

.search-expand-input::placeholder {
    color: #858991;
    opacity: 1;
}

.search-clear {
    width: 34px;
    min-width: 34px;
    height: 34px;

    margin-right: 3px;

    display: grid;
    place-items: center;

    border: 0;
    background: transparent;

    color: #656970;

    cursor: pointer;

    opacity: 0;
    pointer-events: none;

    transition:
        opacity .15s cubic-bezier(.4,0,.2,1),
        transform .2s ease;
}

.search-clear svg {
    width: 16px;
    height: 16px;
}

.search-clear:active {
    transform: scale(.86);
}

.search-close {
    width: 40px;
    min-width: 40px;
    height: 40px;
    flex-shrink: 0;

    display: grid;
    place-items: center;

    border: 0;
    background: transparent;

    color: #33363b;

    cursor: pointer;

    opacity: 0;
    pointer-events: none;

    transition:
        opacity .15s cubic-bezier(.4,0,.2,1),
        transform .2s ease,
        background .2s ease;
}

.search-close:hover {
    background: #f0f1f3;
    border-radius: 13px;
}

.search-close:active {
    transform: scale(.88);
}

.search-close:focus,
.search-close:focus-visible {
    outline: none;
    box-shadow: none;
}

.search-close svg {
    width: 21px;
    height: 21px;
}

/* =====================================================
   SEARCH ACTIVE
===================================================== */

.header.search-open .brand,
.header.search-open .header-actions {
    opacity: 0;
    pointer-events: none;
}

.header.search-open .search-expand {
    width: min(
        calc(100vw - 92px),
        360px
    );

    opacity: 1;
    pointer-events: auto;

    transform: scale(1);
}

.header.search-open .search-expand-input {
    opacity: 1;
    pointer-events: auto;
    transition-delay: .1s;
}

.header.search-open .search-close {
    opacity: 1;
    pointer-events: auto;
    transition-delay: .1s;
}

.search-expand.has-text .search-clear {
    opacity: 1;
    pointer-events: auto;
}

/* =====================================================
   NOTIFICATION POPOVER
===================================================== */

.notification-popover {
    position: absolute;
    top: 58px;
    right: 14px;

    width: min(
        calc(100vw - 28px),
        350px
    );

    /* Nền trắng đặc để che hoàn toàn nội dung phía sau */
    background: #ffffff;

    border: 1px solid rgba(0,0,0,.07);
    border-radius: 20px;

    box-shadow:
        0 18px 45px rgba(0,0,0,.12),
        0 4px 14px rgba(0,0,0,.05);

    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform:
        translateY(-10px)
        scale(.85);

    transform-origin: top right;

    transition:
        opacity .26s cubic-bezier(.4,0,.2,1),
        transform .3s cubic-bezier(.34,1.56,.64,1),
        visibility .26s ease;

    z-index: 80;

    overflow: hidden;
}

.notification-popover.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform:
        translateY(0)
        scale(1);
}

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

    padding: 16px 16px 12px;

    border-bottom: 1px solid var(--line);
}

.notification-title {
    font-size: 16px;
    font-weight: 750;
    color: #17191c;
}

.notification-mark {
    border: 0;
    background: transparent;
    color: #858991;

    font-size: 11px;
    font-weight: 600;

    cursor: pointer;
    padding: 5px 4px;

    -webkit-tap-highlight-color: transparent;
    outline: none;
}

.notification-mark:focus,
.notification-mark:focus-visible,
.notification-mark:active {
    outline: none;
    box-shadow: none;
}

/* =====================================================
   NOTIFICATION LIST
===================================================== */

.notification-list {
    max-height: 390px;
    overflow-y: auto;
    scrollbar-width: none;
}

.notification-list::-webkit-scrollbar {
    display: none;
}

.notification-item {
    display: flex;
    align-items: flex-start;
    gap: 11px;

    width: 100%;

    padding: 13px 15px;

    border: 0;
    background: #ffffff;

    text-align: left;

    cursor: pointer;

    transition:
        background .2s ease,
        transform .2s ease;

    -webkit-tap-highlight-color: transparent;
    outline: none;
}

.notification-item:hover {
    background: #fafafa;
}

.notification-item:active {
    transform: scale(.985);
}

.notification-item:focus,
.notification-item:focus-visible {
    outline: none;
    box-shadow: none;
}

.notification-item.unread {
    background: #f3f7fb;
}

.notification-item.unread:hover {
    background: #eef4f9;
}

.notification-avatar {
    width: 40px;
    height: 40px;
    min-width: 40px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #e9eceb;

    font-size: 18px;
}

.notification-content {
    min-width: 0;
    flex: 1;
}

.notification-text {
    font-size: 13px;
    line-height: 1.45;
    color: #25272b;
}

.notification-text strong {
    font-weight: 700;
}

.notification-time {
    margin-top: 4px;

    font-size: 10px;
    color: #969aa0;
}

.notification-dot {
    width: 7px;
    height: 7px;
    min-width: 7px;

    margin-top: 16px;

    border-radius: 50%;
    background: #5b9bd5;
}

/* =====================================================
   NOTIFICATION FOOTER
===================================================== */

.notification-footer {
    padding: 10px 15px 12px;

    border-top: 1px solid var(--line);

    color: #a0a4aa;

    font-size: 10px;
    font-weight: 500;

    text-align: center;
}

.notification-empty {
    display: none;

    min-height: 140px;

    align-items: center;
    justify-content: center;

    flex-direction: column;

    text-align: center;

    color: #858991;
}

.notification-empty.show {
    display: flex;
}

.notification-empty-icon {
    font-size: 28px;
    margin-bottom: 8px;
}

.notification-empty strong {
    font-size: 13px;
    color: #25272b;
}

.notification-empty span {
    margin-top: 4px;
    font-size: 11px;
}

/* =====================================================
   MAIN
===================================================== */

.main {
    width: min(100%, 680px);
    margin: 0 auto;
    padding: 18px 14px 0;
}

/* =====================================================
   MOMENTS
===================================================== */

.moments-section {
    margin-top: 2px;
    padding: 15px 15px 14px;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(0,0,0,.055);
    border-radius: 22px;
    box-shadow: 0 7px 25px rgba(0,0,0,.035);
    overflow: hidden;
}

.moments-section.search-hidden {
    display: none;
}

.moments-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 13px;
}

.section-title {
    font-size: 15px;
    font-weight: 750;
}

.moments-label {
    font-size: 11px;
    color: #969aa0;
    font-weight: 600;
}

.moments {
    display: flex;
    gap: 13px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 2px 1px 3px;
}

.moments::-webkit-scrollbar {
    display: none;
}

.moment {
    width: 57px;
    flex-shrink: 0;
    text-align: center;
    font-size: 11px;
    color: #6d7076;
}

.moment.hidden {
    display: none;
}

.moment-avatar {
    width: 54px;
    height: 54px;
    margin: 0 auto 6px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #e9eceb;
    border: 2px solid white;
    box-shadow: 0 3px 12px rgba(0,0,0,.08);
    font-size: 19px;
    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.moment:hover .moment-avatar {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,.10);
}

.moment.add .moment-avatar {
    background: #111;
    color: white;
    font-size: 25px;
    border: 0;
    box-shadow: 0 5px 14px rgba(0,0,0,.15);
}

.moment.add {
    color: #25272b;
    font-weight: 650;
}

/* =====================================================
   TOPIC BAR
===================================================== */

.topic-section {
    margin-top: 20px;
    padding: 15px 15px 14px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 22px;
    box-shadow: 0 7px 25px rgba(0,0,0,.035);
    overflow: hidden;
}

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

.topic-heading strong {
    font-size: 15px;
    font-weight: 750;
}

.topic-subtitle {
    font-size: 11px;
    color: #969aa0;
    font-weight: 600;
}

.topics {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 1px 4px;
    scrollbar-width: none;
    min-height: 42px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.topics::-webkit-scrollbar {
    display: none;
}

.topic-indicator {
    position: absolute;
    top: 2px;
    left: 1px;
    height: 36px;
    width: 0;
    background: #111;
    border-radius: 100px;
    z-index: 1;
    pointer-events: none;
    opacity: 1;
    box-shadow: 0 5px 13px rgba(0,0,0,.13);
    transition:
        left .55s cubic-bezier(.16,1,.3,1),
        width .55s cubic-bezier(.16,1,.3,1);
}

.topic {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    height: 36px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f6f7;
    border: 1px solid rgba(0,0,0,.045);
    border-radius: 100px;
    color: #62656b;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition:
        color .35s ease,
        transform .25s ease,
        background .35s ease;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    user-select: none;
    -webkit-user-select: none;
    appearance: none;
}

.topic.active {
    background: transparent;
    color: white;
    border-color: transparent;
}

.topic:focus,
.topic:focus-visible,
.topic:focus-within {
    outline: none;
    box-shadow: none;
}

.topic:active {
    transform: scale(.94);
}

/* =====================================================
   FEED
===================================================== */

.feed-section {
    margin-top: 20px;
}

.feed {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* =====================================================
   POST CARD
===================================================== */

.post {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 17px;
    box-shadow: 0 5px 20px rgba(0,0,0,.035);
}

.post.search-hidden {
    display: none;
}

.post-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.avatar {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    background: #e9eceb;
    border-radius: 50%;
    font-size: 17px;
}

.author {
    font-size: 14px;
    font-weight: 700;
}

.post-meta {
    margin-top: 3px;
    font-size: 11px;
    color: var(--muted);
}

.bookmark-btn {
    margin-left: auto;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    color: #656970;
    border-radius: 10px;
    cursor: pointer;
    transition:
        transform .2s ease,
        background .2s ease;
    -webkit-tap-highlight-color: transparent;
}

.bookmark-btn svg {
    width: 20px;
    height: 20px;
}

.bookmark-btn:active {
    transform: scale(.86);
}

.bookmark-btn.saved {
    color: #111;
}

.post-text {
    margin: 15px 0;
    font-size: 15px;
    line-height: 1.65;
}

.post-media {
    width: 100%;
    height: 230px;
    display: grid;
    place-items: center;
    background:
        linear-gradient(
            135deg,
            #e8ece8,
            #dfe6e1
        );
    border-radius: 15px;
    color: #68706a;
    font-size: 13px;
}

.post-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 15px;
}

.post-action,
.comment-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: transparent;
    color: #696d73;
    font-size: 12px;
    cursor: pointer;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    user-select: none;
    -webkit-user-select: none;
    transition: .25s ease;
}

.post-action:focus,
.post-action:focus-visible,
.comment-btn:focus,
.comment-btn:focus-visible {
    outline: none;
    box-shadow: none;
}

.post-action svg,
.comment-btn svg {
    width: 20px;
    height: 20px;
}

.post-action:active,
.comment-btn:active {
    transform: scale(.92);
}

.comment-btn svg {
    fill: none;
    stroke: #17191c;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.share-icon {
    width: 24px;
    height: 24px;
    display: inline-block;
    color: #17191c;
    flex-shrink: 0;
}

.share-icon svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.share-line {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    opacity: .85;
}

.share-node {
    fill: currentColor;
}

.meaning-count {
    margin-top: 12px;
    font-size: 11px;
    color: #999ca2;
}

/* =====================================================
   SEARCH RESULT
===================================================== */

.search-result-message {
    display: none;
    min-height: 180px;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #858991;
    font-size: 13px;
    padding: 25px;
}

.search-result-message.show {
    display: flex;
}

.search-result-message strong {
    display: block;
    margin-bottom: 5px;
    color: #222;
    font-size: 15px;
}

/* =====================================================
   END FEED
===================================================== */

.end-feed {
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #777b80;
}

.end-feed.search-hidden {
    display: none;
}

.end-icon {
    font-size: 38px;
    margin-bottom: 18px;
}

.end-feed strong {
    color: #222;
    font-size: 15px;
}

.end-feed p {
    margin-top: 7px;
    font-size: 12px;
    line-height: 1.6;
}

.home-btn {
    margin-top: 18px;
    border: 0;
    background: #111;
    color: white;
    padding: 11px 16px;
    border-radius: 13px;
    font-size: 12px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

/* =====================================================
   BOTTOM NAVIGATION
===================================================== */

.navbar {
    position: fixed;
    left: 50%;
    bottom: 17px;
    transform: translateX(-50%);
    width: min(94%, 430px);
    height: 74px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 8px;
    background: rgba(255,255,255,.9);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--line);
    border-radius: 24px;
    box-shadow: 0 16px 45px rgba(0,0,0,.10);
    z-index: 100;
}

.indicator {
    position: absolute;
    top: 50%;
    width: 50px;
    height: 50px;
    transform: translateY(-50%);
    background: #111;
    border-radius: 16px;
    pointer-events: none;
    z-index: 0;
    transition:
        left .65s cubic-bezier(.16,1,.3,1);
}

.nav-item {
    position: relative;
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #858991;
    text-decoration: none;
    border-radius: 17px;
    z-index: 2;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    outline: none;
}

.nav-item svg {
    width: 25px;
    height: 25px;
    overflow: visible;
}

.nav-item.active {
    color: white;
}

.nav-item:focus,
.nav-item:focus-visible,
.nav-item:active {
    outline: none;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
}

.create {
    width: 50px;
    height: 50px;
    background: white;
    color: #111;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 16px;
    box-shadow: 0 6px 15px rgba(0,0,0,.11);
    z-index: 5;
}

/* =====================================================
   NAV ANIMATIONS
===================================================== */

@keyframes homeJump {
    0% { transform: translateY(5px) scale(.84); }
    28% { transform: translateY(-7px) scale(1.16); }
    48% { transform: translateY(2px) scale(.96); }
    68% { transform: translateY(-2px) scale(1.10); }
    100% { transform: translateY(0) scale(1.08); }
}

@keyframes friendsConnect {
    0% { transform: scale(.86) rotate(0); }
    18% { transform: scale(1.12) rotate(-8deg); }
    35% { transform: scale(.98) rotate(7deg); }
    52% { transform: scale(1.09) rotate(-5deg); }
    70% { transform: scale(1.03) rotate(3deg); }
    100% { transform: scale(1.08) rotate(0); }
}

@keyframes createPop {
    0% { transform: scale(.72) rotate(-12deg); }
    30% { transform: scale(1.18) rotate(7deg); }
    55% { transform: scale(.92) rotate(-4deg); }
    100% { transform: scale(1) rotate(0); }
}

@keyframes heartBeat {
    0% { transform: scale(.82); }
    16% { transform: scale(1.20); }
    30% { transform: scale(.94); }
    46% { transform: scale(1.15); }
    65% { transform: scale(.98); }
    100% { transform: scale(1.08); }
}

@keyframes profilePop {
    0% { transform: translateY(5px) scale(.80); }
    30% { transform: translateY(-6px) scale(1.17); }
    52% { transform: translateY(2px) scale(.95); }
    75% { transform: translateY(-2px) scale(1.09); }
    100% { transform: translateY(0) scale(1.08); }
}

.home.bounce svg {
    animation: homeJump .65s cubic-bezier(.16,1,.3,1);
}

.friends.bounce svg {
    animation: friendsConnect .70s cubic-bezier(.16,1,.3,1);
}

.create.bounce svg {
    animation: createPop .55s cubic-bezier(.16,1,.3,1);
}

.inbox.bounce svg {
    animation: heartBeat .62s cubic-bezier(.16,1,.3,1);
}

.profile.bounce svg {
    animation: profilePop .65s cubic-bezier(.16,1,.3,1);
}

/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 360px) {

    .navbar {
        height: 70px;
        bottom: 11px;
        border-radius: 21px;
    }

    .nav-item {
        width: 54px;
    }

    .indicator {
        width: 46px;
        height: 46px;
        border-radius: 15px;
    }

    .create {
        width: 46px;
        height: 46px;
    }

    .post-media {
        height: 190px;
    }

    .moments-section,
    .topic-section {
        border-radius: 20px;
        padding-left: 13px;
        padding-right: 13px;
    }

    .post-actions {
        gap: 14px;
    }

    .search-area {
        right: 12px;
        gap: 6px;
    }

    .header.search-open .search-expand {
        width: calc(100vw - 72px);
    }

    .search-close {
        width: 38px;
        min-width: 38px;
    }

    .notification-popover {
        right: 10px;
        width: calc(100vw - 20px);
        border-radius: 18px;
    }
}



/* =========================================================
   ZENZ FRIENDS — relationship-first connection experience
========================================================= */
body.zf-friends-open #momentsSection,
body.zf-friends-open .topic-section,
body.zf-friends-open .feed-section {
    display: none !important;
}
body.zf-friends-open #friendsView { display: block; }
#friendsView {
    display: none;
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    padding: 19px 0 34px;
    color: var(--text, #151619);
}
.zf-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin: 2px 2px 20px;
}
.zf-kicker {
    display: block;
    margin-bottom: 7px;
    color: #438466;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .15em;
}
.zf-title {
    margin: 0;
    font-size: clamp(26px, 6vw, 32px);
    line-height: 1.12;
    letter-spacing: -.045em;
    font-weight: 780;
}
.zf-subtitle {
    margin: 8px 0 0;
    max-width: 355px;
    color: #777e83;
    font-size: 13px;
    line-height: 1.55;
}
.zf-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 14px;
    font: inherit;
    font-size: 12px;
    font-weight: 750;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.zf-button:active { transform: scale(.97); }
.zf-button svg { width: 16px; height: 16px; flex: 0 0 auto; }
.zf-primary { background: #277c59; color: #fff; box-shadow: 0 5px 13px rgba(39,124,89,.15); }
.zf-primary:hover { background: #216b4c; }
.zf-secondary { background: transparent; color: #35694f; border-color: rgba(39,124,89,.22); }
.zf-secondary:hover { background: rgba(39,124,89,.07); }
.zf-quiet { background: #f1f4f2; border-color: #e9eeeb; color: #38443d; }
.zf-danger { background: #fff2f1; color: #b4433c; border-color: #f5dfdc; }
.zf-wide { width: 100%; }
.zf-principle {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 15px;
    margin-bottom: 18px;
    border: 1px solid rgba(57,133,99,.15);
    border-radius: 19px;
    background: linear-gradient(110deg, rgba(225,244,233,.76), rgba(244,249,245,.82));
}
.zf-principle-icon {
    display: grid;
    place-items: center;
    width: 39px;
    height: 39px;
    flex: 0 0 auto;
    border-radius: 13px;
    background: rgba(255,255,255,.78);
    color: #287a55;
}
.zf-principle-icon svg { width: 20px; height: 20px; }
.zf-principle-title { font-size: 13px; font-weight: 780; margin: 1px 0 4px; }
.zf-principle-copy { color: #63736a; font-size: 11px; line-height: 1.55; }
.zf-mini-link { padding: 0; margin-top: 7px; border: 0; background: transparent; color: #2f7955; font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; }
.zf-tabs {
    display: flex;
    gap: 5px;
    padding: 5px;
    margin: 0 0 14px;
    border: 1px solid rgba(0,0,0,.045);
    border-radius: 15px;
    background: rgba(235,239,236,.78);
}
.zf-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1 1 0;
    min-width: 0;
    min-height: 38px;
    padding: 0 7px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: #747d77;
    font: inherit;
    font-size: 11px;
    font-weight: 750;
    cursor: pointer;
}
.zf-tab.active { background: #fff; color: #203d2d; box-shadow: 0 2px 8px rgba(24,49,33,.06); }
.zf-count { display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 7px; background: #dcefe3; color: #28764e; font-size: 10px; }
.zf-search-wrap { position: relative; margin-bottom: 15px; }
.zf-search-wrap > svg { position: absolute; top: 50%; left: 13px; transform: translateY(-50%); width: 17px; height: 17px; color: #858d88; pointer-events: none; }
.zf-search {
    width: 100%; min-height: 43px; padding: 0 14px 0 40px;
    border: 1px solid rgba(0,0,0,.075); border-radius: 14px;
    outline: none; background: rgba(255,255,255,.84); color: #202622;
    font: inherit; font-size: 12px; user-select: text; -webkit-user-select: text;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.zf-search:focus { border-color: rgba(39,124,89,.48); box-shadow: 0 0 0 3px rgba(39,124,89,.08); }
.zf-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 17px 2px 10px; }
.zf-section-title { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: -.015em; }
.zf-section-note { color: #8a918c; font-size: 10px; }
.zf-person-list { display: grid; gap: 9px; }
.zf-person {
    padding: 13px;
    border: 1px solid rgba(0,0,0,.065);
    border-radius: 18px;
    background: rgba(255,255,255,.9);
    box-shadow: 0 4px 14px rgba(18,38,25,.025);
}
.zf-person-main { display: flex; align-items: center; gap: 11px; min-width: 0; }
.zf-avatar {
    display: grid; place-items: center; flex: 0 0 auto;
    width: 45px; height: 45px; border-radius: 16px;
    color: #315242; font-size: 14px; font-weight: 800; letter-spacing: -.04em;
    border: 1px solid rgba(48,89,65,.08);
}
.zf-avatar.mint { background: #dcefe5; }
.zf-avatar.blue { background: #dcecf8; color: #356181; }
.zf-avatar.lilac { background: #eee4fa; color: #76528f; }
.zf-avatar.peach { background: #f9e8db; color: #936343; }
.zf-avatar.yellow { background: #f5efcf; color: #847232; }
.zf-person-identity { flex: 1 1 auto; min-width: 0; }
.zf-person-name { margin: 0 0 4px; color: #222a25; font-size: 13px; line-height: 1.2; font-weight: 780; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zf-person-id { margin: 0; color: #929992; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zf-icon-button {
    display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px;
    border: 1px solid rgba(39,124,89,.15); border-radius: 12px;
    background: #f4faf6; color: #357754; cursor: pointer;
}
.zf-icon-button svg { width: 17px; height: 17px; }
.zf-reason-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 11px 0 12px 56px; }
.zf-tag { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 8px; background: #f1f5f2; color: #617269; font-size: 10px; font-weight: 650; line-height: 1.15; }
.zf-tag svg { width: 12px; height: 12px; }
.zf-person-tools { display: flex; align-items: center; justify-content: space-between; gap: 9px; padding-top: 11px; border-top: 1px solid rgba(0,0,0,.055); }
.zf-group-control { display: flex; align-items: center; gap: 7px; min-width: 0; color: #89918b; font-size: 10px; }
.zf-group-select { max-width: 128px; min-width: 0; padding: 7px 22px 7px 9px; border: 1px solid rgba(0,0,0,.075); border-radius: 9px; background: #fbfcfb; color: #45564b; font: inherit; font-size: 10px; outline: none; }
.zf-person-tools .zf-button { min-height: 32px; padding: 0 9px; border-radius: 10px; font-size: 10px; }
.zf-empty { padding: 30px 20px; border: 1px dashed rgba(0,0,0,.13); border-radius: 18px; text-align: center; background: rgba(255,255,255,.45); }
.zf-empty-icon { display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto 12px; border-radius: 16px; color: #4d8063; background: #e8f4eb; }
.zf-empty-icon svg { width: 22px; height: 22px; }
.zf-empty-title { margin: 0 0 6px; font-size: 13px; font-weight: 780; }
.zf-empty-copy { margin: 0 auto 15px; max-width: 280px; color: #818982; font-size: 11px; line-height: 1.6; }
.zf-request {
    padding: 14px; border: 1px solid rgba(0,0,0,.065); border-radius: 18px;
    background: rgba(255,255,255,.91);
}
.zf-request-note { margin: 12px 0 13px; padding: 10px 11px; border-radius: 11px; background: #f5f7f5; color: #667169; font-size: 11px; line-height: 1.5; }
.zf-request-actions { display: flex; gap: 8px; }
.zf-request-actions .zf-button { flex: 1; min-height: 36px; font-size: 11px; }
.zf-pending-label { margin: 13px 0 8px; color: #838b84; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.zf-group-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.zf-group-card { min-width: 0; padding: 14px; border: 1px solid rgba(0,0,0,.06); border-radius: 17px; background: rgba(255,255,255,.9); }
.zf-group-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.zf-group-symbol { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 12px; background: #e8f2eb; color: #467455; }
.zf-group-symbol svg { width: 17px; height: 17px; }
.zf-group-count { padding: 5px 7px; border-radius: 8px; color: #7b857d; background: #f3f5f3; font-size: 9px; white-space: nowrap; }
.zf-group-name { margin: 12px 0 4px; font-size: 13px; font-weight: 800; }
.zf-group-members { min-height: 31px; color: #879087; font-size: 10px; line-height: 1.5; }
.zf-group-actions { display: flex; gap: 6px; margin-top: 10px; }
.zf-group-actions .zf-button { flex: 1; min-height: 31px; padding: 0 7px; font-size: 10px; }
.zf-demo-note { margin: 18px 0 0; color: #9aa19b; font-size: 9px; line-height: 1.5; text-align: center; }
.zf-modal { display: none; position: fixed; inset: 0; z-index: 1000; align-items: center; justify-content: center; padding: 18px; background: rgba(14,22,17,.43); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.zf-modal.is-open { display: flex; animation: zfFadeIn .18s ease both; }
.zf-dialog { width: min(100%, 440px); max-height: min(86dvh, 720px); overflow: auto; padding: 21px; border: 1px solid rgba(255,255,255,.68); border-radius: 23px; background: #fcfdfc; color: #222a25; box-shadow: 0 24px 75px rgba(0,0,0,.22); animation: zfDialogIn .22s cubic-bezier(.2,.85,.25,1) both; }
.zf-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.zf-dialog-title { margin: 0; font-size: 20px; line-height: 1.2; letter-spacing: -.03em; font-weight: 800; }
.zf-dialog-copy { margin: 7px 0 0; color: #7c857e; font-size: 11px; line-height: 1.6; }
.zf-close { display: grid; place-items: center; width: 33px; height: 33px; flex: 0 0 auto; border: 0; border-radius: 11px; background: #f0f4f1; color: #58655c; cursor: pointer; }
.zf-close svg { width: 16px; height: 16px; }
.zf-field { display: grid; gap: 7px; margin: 13px 0; }
.zf-label { color: #4f5e54; font-size: 11px; font-weight: 780; }
.zf-input, .zf-select, .zf-textarea { width: 100%; min-height: 43px; padding: 11px 12px; border: 1px solid #e1e8e2; border-radius: 12px; outline: none; background: #fff; color: #252e28; font: inherit; font-size: 12px; user-select: text; -webkit-user-select: text; }
.zf-textarea { min-height: 77px; resize: vertical; line-height: 1.5; }
.zf-input:focus, .zf-select:focus, .zf-textarea:focus { border-color: #78b392; box-shadow: 0 0 0 3px rgba(56,136,91,.08); }
.zf-field-hint { color: #909891; font-size: 10px; line-height: 1.5; }
.zf-form-actions { display: flex; gap: 8px; margin-top: 17px; }
.zf-form-actions .zf-button { flex: 1; }
.zf-permission-list { display: grid; gap: 8px; margin-top: 15px; }
.zf-permission-row { display: flex; align-items: center; gap: 11px; padding: 11px; border: 1px solid #e8eee9; border-radius: 13px; background: #fff; }
.zf-permission-row input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: #2c8159; }
.zf-permission-text { flex: 1; min-width: 0; }
.zf-permission-name { display: block; font-size: 12px; font-weight: 750; }
.zf-permission-desc { display: block; margin-top: 3px; color: #8a938c; font-size: 10px; line-height: 1.45; }
.zf-toast { position: fixed; z-index: 1200; left: 50%; bottom: 96px; width: max-content; max-width: calc(100vw - 32px); padding: 11px 15px; border: 1px solid rgba(255,255,255,.12); border-radius: 13px; background: #1e3025; color: #fff; font-size: 11px; font-weight: 700; line-height: 1.45; box-shadow: 0 10px 28px rgba(0,0,0,.2); transform: translate(-50%, 10px); opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; }
.zf-toast.show { opacity: 1; transform: translate(-50%,0); }
@keyframes zfFadeIn { from {opacity:0} to {opacity:1} }
@keyframes zfDialogIn { from {opacity:0; transform:translateY(8px) scale(.985)} to {opacity:1; transform:translateY(0) scale(1)} }
@media (max-width: 440px) {
    #friendsView { padding-top: 16px; }
    .zf-head { margin-bottom: 16px; }
    .zf-title { font-size: 28px; }
    .zf-subtitle { font-size: 11px; }
    .zf-head > .zf-primary { padding: 0 11px; min-height: 39px; gap: 6px; font-size: 11px; }
    .zf-principle { padding: 12px; gap: 10px; }
    .zf-tabs { gap: 3px; padding: 4px; }
    .zf-tab { min-height: 36px; font-size: 10px; }
    .zf-person { padding: 11px; }
    .zf-person-tools { gap: 6px; }
    .zf-group-control { gap: 5px; }
    .zf-group-select { max-width: 112px; }
    .zf-person-tools .zf-button { padding: 0 8px; }
    .zf-dialog { padding: 18px; border-radius: 20px; }
}
@media (max-width: 360px) {
    .zf-group-grid { grid-template-columns: 1fr; }
    .zf-reason-line { margin-left: 0; }
    .zf-person-tools { align-items: flex-start; flex-direction: column; }
    .zf-person-tools .zf-button { align-self: stretch; }
}
html[data-theme="dark"] .zf-title,
html[data-theme="dark"] .zf-person-name,
html[data-theme="dark"] .zf-section-title { color: #edf4ef; }
html[data-theme="dark"] .zf-subtitle,
html[data-theme="dark"] .zf-section-note,
html[data-theme="dark"] .zf-demo-note { color: #93a198; }
html[data-theme="dark"] .zf-principle { background: linear-gradient(115deg, rgba(43,79,58,.5), rgba(29,43,34,.7)); border-color: rgba(128,190,151,.15); }
html[data-theme="dark"] .zf-principle-icon { background: rgba(255,255,255,.07); }
html[data-theme="dark"] .zf-principle-copy { color: #b2c5b8; }
html[data-theme="dark"] .zf-tabs { background: #17211b; border-color: rgba(255,255,255,.055); }
html[data-theme="dark"] .zf-tab { color: #91a198; }
html[data-theme="dark"] .zf-tab.active { background: #2a3a30; color: #eff8f1; box-shadow: none; }
html[data-theme="dark"] .zf-search { background: #151e18; color: #f1f5f2; border-color: rgba(255,255,255,.09); }
html[data-theme="dark"] .zf-person,
html[data-theme="dark"] .zf-request,
html[data-theme="dark"] .zf-group-card { background: #151d18; border-color: rgba(255,255,255,.08); box-shadow: none; }
html[data-theme="dark"] .zf-person-id,
html[data-theme="dark"] .zf-group-members { color: #8f9e93; }
html[data-theme="dark"] .zf-tag,
html[data-theme="dark"] .zf-group-count,
html[data-theme="dark"] .zf-quiet { background: #202b23; color: #bdc9c0; border-color: rgba(255,255,255,.07); }
html[data-theme="dark"] .zf-group-select { background: #1c2820; color: #dce8df; border-color: rgba(255,255,255,.1); }
html[data-theme="dark"] .zf-person-tools { border-top-color: rgba(255,255,255,.07); }
html[data-theme="dark"] .zf-icon-button { background: #1d2b22; color: #a1d2b0; border-color: rgba(130,190,148,.14); }
html[data-theme="dark"] .zf-empty { background: rgba(255,255,255,.02); border-color: rgba(255,255,255,.14); }
html[data-theme="dark"] .zf-empty-title { color: #eef4ef; }
html[data-theme="dark"] .zf-empty-copy,
html[data-theme="dark"] .zf-request-note { color: #9aa79e; }
html[data-theme="dark"] .zf-request-note { background: #202a23; }
html[data-theme="dark"] .zf-dialog { background: #141d17; color: #eef4ef; border-color: rgba(255,255,255,.12); }
html[data-theme="dark"] .zf-dialog-copy,
html[data-theme="dark"] .zf-field-hint,
html[data-theme="dark"] .zf-permission-desc { color: #9aa79e; }
html[data-theme="dark"] .zf-label { color: #c3d0c7; }
html[data-theme="dark"] .zf-input,
html[data-theme="dark"] .zf-select,
html[data-theme="dark"] .zf-textarea { background: #1b2820; color: #f1f5f2; border-color: rgba(255,255,255,.1); }
html[data-theme="dark"] .zf-close { background: #202d24; color: #d0ded4; }
html[data-theme="dark"] .zf-permission-row { background: #1a251e; border-color: rgba(255,255,255,.08); }
html[data-theme="dark"] .zf-permission-name { color: #e7efe9; }
html[data-theme="dark"] .zf-danger { background: #392321; color: #ffb1a9; border-color: #58302d; }

/* ======================================================
   CSS được tách từ khối <style> tiếp theo trong file gốc
====================================================== */

/* ===== ZENZ MENU STYLES (merged) ===== */


/* =========================================================
   RESET & VARIABLES
========================================================= */

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

:root {
    --bg-color: #f5f6f8;
    --card-color: rgba(255, 255, 255, 0.92);
    --card-border: rgba(225, 231, 239, 0.8);
    --item-hover: rgba(0, 0, 0, 0.04);

    --icon-bg: rgba(60, 155, 104, 0.08);
    --icon-color: #3c9b68;

    --text-color: #151619;
    --muted-color: #858991;
    --line-color: rgba(0, 0, 0, 0.06);

    --sky-bg: linear-gradient(180deg, #7dd3fc, #bae6fd);
    --sun-color: #fbbf24;
    --cloud-color: #ffffff;

    --accent: #3c9b68;
    --success: #34c759;
}

[data-theme="dark"] {
    --bg-color: #0f1419;
    --card-color: rgba(21, 28, 38, 0.95);
    --card-border: rgba(255, 255, 255, 0.08);
    --item-hover: rgba(255, 255, 255, 0.05);

    --icon-bg: rgba(59, 130, 246, 0.15);
    --icon-color: #4ade80;

    --text-color: #f5f6f8;
    --muted-color: #94a3b8;
    --line-color: rgba(255, 255, 255, 0.08);

    --sky-bg: linear-gradient(180deg, #151619, #1a2332);
    --sun-color: #f1f5f9;
}

body {
    min-height: 100vh;
    background-color: var(--bg-color);
    color: var(--text-color);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "SF Pro Display",
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    overflow-x: hidden;

    transition:
        background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =========================================================
   HOME DEMO
========================================================= */

.app {
    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;
}

.app-content {
    text-align: center;
}

.app-content h1 {
    font-size: 2.375rem;
    font-weight: 800;
    letter-spacing: -0.03em;

    background:
        linear-gradient(
            135deg,
            var(--accent),
            #4ade80
        );

        -webkit-background-clip: text;
    background-clip: text; /* Thêm dòng này để đạt chuẩn */
    -webkit-text-fill-color: transparent;
}
.app-content p {
    margin-top: 8px;

    color: var(--muted-color);
    font-size: 0.9375rem;
}

/* =========================================================
   BUTTON TOGGLE MENU
========================================================= */

.more-btn {
    position: fixed;
    top: 20px;
    right: 20px;

    width: 48px;
    height: 48px;

    border: 1px solid var(--card-border);

    background: var(--card-color);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    color: var(--text-color);

    border-radius: 16px;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    box-shadow:
        0 4px 16px rgba(0,0,0,0.06);

    transition:
        all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    z-index: 10;
}

.more-btn:hover {
    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(0,0,0,0.1);
}

.more-btn:active {
    transform: scale(0.92);
}

.more-btn svg {
    width: 22px;
    height: 22px;
}

/* =========================================================
   OVERLAY
========================================================= */

.overlay {
    position: fixed;
    inset: 0;

    background: rgba(0, 0, 0, 0.4);

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.35s ease,
        visibility 0.35s ease;

    z-index: 90;
}

.overlay.show {
    opacity: 1;
    visibility: visible;
}

/* =========================================================
   BOTTOM SHEET
========================================================= */

.bottom-sheet {
    position: fixed;

    left: 0;
    right: 0;
    bottom: 0;

    width: 100%;
    max-width: 580px;

    margin: auto;

    background: var(--card-color);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    border: 1px solid var(--card-border);
    border-bottom: none;

    border-radius: 32px 32px 0 0;

    box-shadow:
        0 -16px 48px rgba(0, 0, 0, 0.18);

    transform: translateY(100%);

    transition:
        transform 0.38s cubic-bezier(0.32, 0.72, 0, 1);

    z-index: 100;

    overflow: hidden;

    padding-bottom:
        max(16px, env(safe-area-inset-bottom));

    will-change: transform;
}

.bottom-sheet.show {
    transform: translateY(0);
}

.bottom-sheet.dragging {
    transition: none !important;
}

/* =========================================================
   HANDLE & HEADER
========================================================= */

.sheet-drag-area {
    padding-top: 12px;
    padding-bottom: 4px;

    cursor: grab;
    user-select: none;
    touch-action: none;
}

.sheet-drag-area:active {
    cursor: grabbing;
}

.sheet-handle {
    width: 38px;
    height: 5px;

    margin: 0 auto;

    border-radius: 999px;

    background: var(--muted-color);

    opacity: 0.3;
}

.sheet-header {
    min-height: 56px;

    display: flex;
    align-items: center;

    padding: 6px 20px 12px;

    border-bottom:
        1px solid var(--line-color);
}

.sheet-header-main {
    flex: 1;
    min-width: 0;
}

.sheet-title {
    font-size: 1.25rem;

    font-weight: 700;

    letter-spacing: -0.02em;

    line-height: 1.5;

    margin-bottom: 4px;
}

.sheet-subtitle {
    margin-top: 0;

    font-size: 0.8125rem;

    color: var(--muted-color);

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    line-height: 1.5;

    margin-bottom: 4px;
}

.back-btn,
.sheet-close {
    width: 36px;
    height: 36px;

    border: none;

    background:
        rgba(127, 127, 127, 0.08);

    color: var(--text-color);

    border-radius: 50%;

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    transition: all 0.2s ease;

    flex-shrink: 0;
}

.back-btn:hover,
.sheet-close:hover {
    background:
        rgba(127, 127, 127, 0.16);
}

.back-btn:active,
.sheet-close:active {
    transform: scale(0.9);
}

.back-btn svg,
.sheet-close svg {
    width: 18px;
    height: 18px;
}

/* =========================================================
   BODY & MENU LIST
========================================================= */

.sheet-body {
    max-height: 70vh;

    overflow-y: auto;

    overscroll-behavior: contain;

    padding:
        12px 20px 16px;
}

.menu-page {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.menu-item {
    width: 100%;
    min-height: 48px;

    display: flex;
    align-items: center;

    border: none;

    background: transparent;

    color: var(--text-color);

    padding: 6px 12px;

    border-radius: 16px;

    cursor: pointer;

    text-align: left;

    transition:
        background 0.18s ease,
        transform 0.15s ease;
}

.menu-item:hover {
    background: var(--item-hover);
}

.menu-item:active {
    transform: scale(0.98);
}

.menu-icon {
    width: 36px;
    height: 36px;

    border-radius: 12px;

    background: var(--icon-bg);
    color: var(--icon-color);

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    transition:
        all 0.3s ease;
}

.menu-icon svg {
    width: 20px;
    height: 20px;
}

.menu-text {
    flex: 1;
    min-width: 0;

    margin-left: 14px;
    margin-right: 12px;
}

.menu-title {
    display: block;

    font-size: 0.9375rem;

    font-weight: 600;

    line-height: 1.4;

    margin-bottom: 1px;
}

.menu-description {
    display: block;

    margin-top: 0;

    font-size: 0.75rem;

    color: var(--muted-color);

    line-height: 1.4;

    padding-bottom: 2px;

    margin-bottom: 0;
}

.menu-arrow {
    color: var(--muted-color);

    opacity: 0.5;

    transition:
        transform 0.2s ease,
        opacity 0.2s ease;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-item:hover .menu-arrow {
    opacity: 1;

    transform:
        translateX(2px);
}

.menu-arrow svg {
    width: 18px;
    height: 18px;
}

/* =========================================================
   PAGE ANIMATIONS
========================================================= */

.sheet-page {
    animation:
        pageIn
        0.28s
        cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes pageIn {

    from {
        opacity: 0;
        transform:
            translateX(20px);
    }

    to {
        opacity: 1;
        transform:
            translateX(0);
    }
}

/* =========================================================
   CONTENT PAGE
========================================================= */

.content-page {
    padding: 4px 0 10px;
}

.content-row {
    min-height: 58px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 6px 12px;

    border-bottom:
        1px solid var(--line-color);

    border-radius: 16px;

    cursor: pointer;

    transition:
        background 0.18s ease,
        transform 0.15s ease;
}

.content-row:last-child {
    border-bottom: none;
}

.content-row:hover {
    background: var(--item-hover);
}

.content-row:active {
    transform: scale(0.985);
}

.content-row-main {
    flex: 1;
    min-width: 0;
}

.content-row-title {
    display: flex;
    align-items: center;

    gap: 10px;

    font-size: 0.9375rem;

    font-weight: 600;

    line-height: 1.4;

    margin-bottom: 1px;
}

.content-row-title svg {
    width: 24px;
    height: 24px;

    flex: 0 0 24px;

    display: block;
}

.content-row-desc {
    display: block;

    font-size: 0.75rem;

    color: var(--muted-color);

    line-height: 1.4;

    padding-right: 8px;
}

.content-row-arrow {
    color: var(--muted-color);

    opacity: 0.5;

    transition:
        transform 0.2s ease,
        opacity 0.2s ease;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;
}

.content-row:hover .content-row-arrow {
    opacity: 1;

    transform:
        translateX(2px);
}

.content-row-arrow svg {
    width: 18px;
    height: 18px;
}

/* =========================================================
   CONTENT SUBPAGE
========================================================= */

.content-subpage {
    padding: 4px 0 10px;
}

.content-subtitle {
    padding: 8px 12px 14px;

    color: var(--muted-color);

    font-size: 0.8rem;

    line-height: 1.5;
}

.content-option {
    min-height: 54px;

    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 8px 12px;

    border: none;

    border-bottom:
        1px solid var(--line-color);

    background: transparent;

    color: var(--text-color);

    cursor: pointer;

    text-align: left;

    border-radius: 14px;

    transition:
        background 0.18s ease,
        transform 0.15s ease;
}

.content-option:last-child {
    border-bottom: none;
}

.content-option:hover {
    background: var(--item-hover);
}

.content-option:active {
    transform: scale(0.985);
}

.content-option-text {
    flex: 1;
    min-width: 0;

    font-size: 0.9375rem;

    font-weight: 600;
}

.content-option-state {
    margin-left: 14px;

    font-size: 0.95rem;

    font-weight: 700;

    color: var(--accent);

    flex-shrink: 0;
}

/* =========================================================
   IPHONE STYLE SWITCH
========================================================= */

.iphone-switch {
    position: relative;

    width: 51px;
    height: 31px;

    flex-shrink: 0;

    border: none;

    border-radius: 999px;

    background: #d1d5db;

    cursor: pointer;

    transition:
        background 0.25s ease;

    box-shadow:
        inset 0 0 0 1px rgba(0,0,0,0.06);
}

.iphone-switch::after {
    content: "";

    position: absolute;

    top: 2px;
    left: 2px;

    width: 27px;
    height: 27px;

    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 1px 4px rgba(0,0,0,0.22);

    transition:
        transform
        0.25s
        cubic-bezier(0.4,0,0.2,1);
}

.iphone-switch.is-on {
    background:
        var(--success);
}

.iphone-switch.is-on::after {
    transform:
        translateX(20px);
}

/* =========================================================
   FEATURED DETAIL
========================================================= */

.featured-info {
    padding: 4px 12px 12px;
}

.featured-info-title {
    font-size: 0.9375rem;

    font-weight: 700;

    margin-bottom: 6px;
}

.featured-info-desc {
    color: var(--muted-color);

    font-size: 0.75rem;

    line-height: 1.5;
}

.featured-choice {
    min-height: 54px;

    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 8px 12px;

    border: none;

    border-bottom:
        1px solid var(--line-color);

    background: transparent;

    color: var(--text-color);

    cursor: pointer;

    text-align: left;

    border-radius: 14px;

    transition:
        background 0.18s ease,
        transform 0.15s ease;
}

.featured-choice:hover {
    background: var(--item-hover);
}

.featured-choice:active {
    transform: scale(0.985);
}

.featured-choice-main {
    flex: 1;
    min-width: 0;
}

.featured-choice-title {
    font-size: 0.9375rem;

    font-weight: 600;

    line-height: 1.4;
}

.featured-choice-desc {
    margin-top: 2px;

    color: var(--muted-color);

    font-size: 0.75rem;

    line-height: 1.4;
}

.featured-choice-state {
    margin-left: 14px;

    color: var(--accent);

    font-size: 0.95rem;

    font-weight: 700;
}

/* =========================================================
   DIALOG
========================================================= */

.dialog-backdrop {
    position: fixed;

    inset: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 20px;

    background:
        rgba(0,0,0,0.18);

    backdrop-filter:
        blur(5px);

    -webkit-backdrop-filter:
        blur(5px);

    opacity: 0;

    visibility: hidden;

    transition:
        opacity 0.2s ease,
        visibility 0.2s ease;

    z-index: 200;
}

.dialog-backdrop.show {
    opacity: 1;

    visibility: visible;
}

.dialog-box {
    width:
        min(92%, 360px);

    background:
        var(--card-color);

    border:
        1px solid var(--card-border);

    border-radius: 20px;

    padding: 20px;

    box-shadow:
        0 18px 44px rgba(0,0,0,0.2);

    transform:
        scale(0.96);

    transition:
        transform
        0.2s
        cubic-bezier(0.2,0.8,0.2,1);
}

.dialog-backdrop.show .dialog-box {
    transform:
        scale(1);
}

.dialog-title {
    font-size: 1.05rem;

    font-weight: 700;

    text-align: center;
}

.dialog-text {
    margin-top: 8px;

    color: var(--muted-color);

    font-size: 0.8rem;

    line-height: 1.5;

    text-align: center;
}

.dialog-actions {
    display: flex;

    margin-top: 18px;

    border-top:
        1px solid var(--line-color);
}

.dialog-btn {
    flex: 1;

    min-height: 42px;

    border: none;

    background: transparent;

    color: var(--accent);

    font-size: 0.85rem;

    font-weight: 600;

    cursor: pointer;
}

.dialog-btn + .dialog-btn {
    border-left:
        1px solid var(--line-color);
}

.dialog-btn:active {
    background:
        var(--item-hover);
}


/* =========================================================
   IOS STYLE ACTION DIALOG
========================================================= */

.ios-dialog-backdrop {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0,0,0,0.22);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s ease, visibility 0.22s ease;
    z-index: 320;
}

.ios-dialog-backdrop.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.ios-dialog-box {
    width: min(92vw, 390px);
    max-height: min(80vh, 620px);
    overflow: auto;
    border: 1px solid var(--card-border);
    border-radius: 22px;
    background: var(--card-color);
    color: var(--text-color);
    box-shadow: 0 20px 55px rgba(0,0,0,0.24);
    transform: scale(0.96) translateY(6px);
    transition: transform 0.22s cubic-bezier(0.2,0.8,0.2,1);
    -webkit-font-smoothing: antialiased;
}

.ios-dialog-backdrop.show .ios-dialog-box {
    transform: scale(1) translateY(0);
}

.ios-dialog-content {
    padding: 21px 20px 18px;
}

.ios-dialog-title {
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
}

.ios-dialog-text {
    margin-top: 8px;
    color: var(--muted-color);
    font-size: 0.79rem;
    line-height: 1.5;
    text-align: center;
    white-space: pre-line;
}

.ios-dialog-input-wrap {
    margin-top: 14px;
}

.ios-dialog-input {
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--card-border);
    border-radius: 12px;
    background: rgba(127,127,127,0.055);
    color: var(--text-color);
    padding: 0 12px;
    font: inherit;
    font-size: 0.84rem;
    outline: none;
}

.ios-dialog-input:focus {
    border-color: rgba(37,99,235,0.35);
    background: rgba(127,127,127,0.08);
}

.ios-dialog-input + .ios-dialog-input {
    margin-top: 8px;
}

.ios-dialog-options {
    display: grid;
    gap: 7px;
    margin-top: 14px;
}

.ios-dialog-option {
    min-height: 43px;
    width: 100%;
    border: 1px solid var(--card-border);
    border-radius: 13px;
    background: transparent;
    color: var(--muted-color);
    font: inherit;
    font-size: 0.79rem;
    font-weight: 650;
    text-align: left;
    padding: 8px 11px;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.15s ease;
}

.ios-dialog-option:hover {
    background: var(--item-hover);
}

.ios-dialog-option:active {
    transform: scale(0.985);
}

.ios-dialog-option.active {
    background: rgba(37,99,235,0.1);
    border-color: rgba(37,99,235,0.28);
    color: var(--accent);
}

.ios-dialog-actions {
    display: flex;
    border-top: 1px solid var(--line-color);
}

.ios-dialog-btn {
    flex: 1;
    min-height: 44px;
    border: none;
    background: transparent;
    color: var(--accent);
    font-size: 0.84rem;
    font-weight: 650;
    cursor: pointer;
}

.ios-dialog-btn + .ios-dialog-btn {
    border-left: 1px solid var(--line-color);
}

.ios-dialog-btn.destructive {
    color: #ef4444;
}

.ios-dialog-btn:active {
    background: var(--item-hover);
}

[data-reduce-motion="true"] *,
[data-reduce-motion="true"] *::before,
[data-reduce-motion="true"] *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
}

[data-reduce-animation="true"] .sheet-page {
    animation: none !important;
}

[data-reduce-page-effects="true"] .bottom-sheet,
[data-reduce-page-effects="true"] .overlay,
[data-reduce-page-effects="true"] .dialog-backdrop,
[data-reduce-page-effects="true"] .ios-dialog-backdrop {
    transition: none !important;
}

[data-contrast="Cao"] {
    --text-color: #0b1220;
    --muted-color: #334155;
    --line-color: rgba(0,0,0,0.14);
}

[data-contrast="Rất cao"] {
    --text-color: #000000;
    --muted-color: #1e293b;
    --line-color: rgba(0,0,0,0.22);
    --card-border: rgba(15,23,42,0.28);
}

[data-theme="dark"][data-contrast="Cao"] {
    --text-color: #ffffff;
    --muted-color: #d1d5db;
    --line-color: rgba(255,255,255,0.2);
}

[data-theme="dark"][data-contrast="Rất cao"] {
    --text-color: #ffffff;
    --muted-color: #f1f5f9;
    --line-color: rgba(255,255,255,0.3);
    --card-border: rgba(255,255,255,0.22);
}

[data-density="Gọn"] .settings-row,
[data-density="Gọn"] .settings-detail-row {
    min-height: 47px;
    padding-top: 5px;
    padding-bottom: 5px;
}

[data-density="Gọn"] .notification-item {
    min-height: 54px;
}

[data-density="Rộng"] .settings-row,
[data-density="Rộng"] .settings-detail-row {
    min-height: 64px;
    padding-top: 9px;
    padding-bottom: 9px;
}

[data-density="Rộng"] .notification-item {
    min-height: 68px;
}

/* =========================================================
   WHY PAGE
========================================================= */

.reason-page {
    padding:
        8px 12px 14px;
}

.reason-intro {
    font-size: 0.95rem;

    font-weight: 700;

    line-height: 1.4;

    margin-bottom: 14px;
}

.reason-item {
    padding:
        12px 0;

    border-bottom:
        1px solid var(--line-color);

    font-size: 0.85rem;

    line-height: 1.5;

    color: var(--text-color);
}

.reason-item:last-child {
    border-bottom: none;
}

/* =========================================================
   CONTROL INDEX
========================================================= */

.control-page {
    padding: 4px 0 10px;
}

.control-item {
    min-height: 58px;

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        7px 12px;

    border: none;

    border-bottom:
        1px solid var(--line-color);

    background: transparent;

    color: var(--text-color);

    text-align: left;

    border-radius: 16px;

    cursor: pointer;

    transition:
        background 0.18s ease,
        transform 0.15s ease;
}

.control-item:hover {
    background:
        var(--item-hover);
}

.control-item:active {
    transform:
        scale(0.985);
}

.control-item-main {
    display: flex;

    align-items: center;

    gap: 12px;

    flex: 1;

    min-width: 0;
}

.control-item-icon {
    width: 34px;
    min-width: 34px;
    height: 34px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: var(--text-color);
}

.control-item-icon svg {
    width: 25px;
    height: 25px;
    display: block;
}

.control-item-text {
    min-width: 0;
}

.control-item-title {
    font-size: 0.9375rem;

    font-weight: 600;

    line-height: 1.4;
}

.control-item-desc {
    margin-top: 2px;

    color: var(--muted-color);

    font-size: 0.75rem;

    line-height: 1.4;
}

.control-item-arrow {
    color: var(--muted-color);

    opacity: 0.5;
}

/* =========================================================
   SEARCH
========================================================= */

.control-search-wrap {
    padding:
        4px 12px 12px;
}

.control-search {
    width: 100%;

    height: 42px;

    border:
        1px solid var(--card-border);

    border-radius: 13px;

    background:
        rgba(127,127,127,0.07);

    color: var(--text-color);

    outline: none;

    padding:
        0 13px;

    font-size: 0.85rem;

    transition:
        border-color 0.2s ease,
        background 0.2s ease;
}

.control-search:focus {
    border-color:
        rgba(37,99,235,0.35);

    background:
        rgba(127,127,127,0.1);
}

.control-search::placeholder {
    color: var(--muted-color);
}

/* =========================================================
   TOPIC / CREATOR LIST
========================================================= */

.control-list {
    display: flex;

    flex-direction: column;
}

.control-list-item {
    min-height: 55px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        7px 12px;

    border-bottom:
        1px solid var(--line-color);

    border-radius: 14px;

    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        background 0.18s ease;
}

.control-list-item:hover {
    background:
        var(--item-hover);
}

.control-list-item.is-hidden {
    opacity: 0.48;

    transform:
        scale(0.985);
}

.control-list-name {
    flex: 1;

    min-width: 0;

    font-size: 0.9rem;

    font-weight: 600;
}

.control-hide-btn {
    border: none;

    padding:
        8px 12px;

    border-radius: 11px;

    background:
        rgba(127,127,127,0.08);

    color: var(--text-color);

    font-size: 0.75rem;

    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.18s ease,
        transform 0.15s ease;
}

.control-hide-btn:hover {
    background:
        rgba(127,127,127,0.15);
}

.control-hide-btn:active {
    transform:
        scale(0.94);
}

.control-hide-btn.is-hidden {
    background:
        rgba(52,199,89,0.1);

    color:
        var(--success);
}

/* =========================================================
   SENSITIVE SEGMENTED CONTROL
========================================================= */

.sensitivity-wrap {
    padding:
        8px 12px 12px;
}

.sensitivity-label {
    margin-bottom: 10px;

    font-size: 0.8rem;

    color: var(--muted-color);

    line-height: 1.4;
}

.sensitivity-control {
    position: relative;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    padding: 4px;

    border-radius: 14px;

    background:
        rgba(127,127,127,0.08);

    overflow: hidden;
}

.sensitivity-slider {
    position: absolute;

    top: 4px;
    bottom: 4px;

    left: 4px;

    width: calc(
        (100% - 8px) / 3
    );

    border-radius: 11px;

    background:
        var(--card-color);

    box-shadow:
        0 1px 5px rgba(0,0,0,0.1);

    transition:
        transform
        0.28s
        cubic-bezier(0.4,0,0.2,1);
}

.sensitivity-option {
    position: relative;

    z-index: 2;

    min-height: 38px;

    border: none;

    background: transparent;

    color: var(--muted-color);

    border-radius: 11px;

    font-size: 0.72rem;

    font-weight: 600;

    cursor: pointer;

    transition:
        color 0.2s ease;
}

.sensitivity-option.active {
    color:
        var(--text-color);
}

/* =========================================================
   HIDDEN CONTENT CARDS
========================================================= */

.hidden-card-list {
    display: flex;

    flex-direction: column;

    gap: 8px;
}

.hidden-card {
    padding:
        13px 12px;

    border:
        1px solid var(--card-border);

    border-radius: 15px;

    background:
        rgba(127,127,127,0.035);

    transition:
        opacity 0.28s ease,
        transform 0.28s ease;
}

.hidden-card.removing {
    opacity: 0;

    transform:
        translateX(28px);
}

.hidden-card-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;
}

.hidden-card-type {
    font-size: 0.72rem;

    font-weight: 700;

    color: var(--muted-color);
}

.hidden-card-name {
    margin-top: 4px;

    font-size: 0.9rem;

    font-weight: 600;
}

.unhide-btn {
    border: none;

    background:
        rgba(127,127,127,0.08);

    color: var(--text-color);

    padding:
        7px 11px;

    border-radius: 10px;

    font-size: 0.72rem;

    font-weight: 600;

    cursor: pointer;

    flex-shrink: 0;

    transition:
        background 0.18s ease,
        transform 0.15s ease;
}

.unhide-btn:hover {
    background:
        rgba(127,127,127,0.15);
}

.unhide-btn:active {
    transform:
        scale(0.94);
}

.hidden-empty {
    padding:
        22px 12px;

    text-align: center;

    color: var(--muted-color);

    font-size: 0.82rem;

    line-height: 1.5;
}

/* =========================================================
   FOLLOWING GROUPS
========================================================= */

.following-group {
    margin-bottom: 12px;
}

.following-group:last-child {
    margin-bottom: 0;
}

.following-group-title {
    padding:
        8px 12px 7px;

    font-size: 0.8rem;

    color: var(--muted-color);

    font-weight: 700;
}

.following-item {
    min-height: 52px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        8px 12px;

    border-bottom:
        1px solid var(--line-color);
}

.following-item:last-child {
    border-bottom: none;
}

.following-name {
    flex: 1;

    min-width: 0;

    font-size: 0.9375rem;

    font-weight: 600;

    color: var(--text-color);
}

.unfollow-btn {
    border: none;

    background:
        rgba(127,127,127,0.08);

    color: var(--text-color);

    padding:
        8px 12px;

    border-radius: 12px;

    font-size: 0.75rem;

    font-weight: 600;

    cursor: pointer;

    transition:
        all 0.18s ease;

    flex-shrink: 0;
}

.unfollow-btn:hover {
    background:
        rgba(127,127,127,0.16);
}

.unfollow-btn:active {
    transform:
        scale(0.94);
}

.empty-following {
    padding:
        18px 12px;

    color: var(--muted-color);

    font-size: 0.8125rem;

    text-align: center;
}

/* =========================================================
   FILTER PAGE LEGACY
========================================================= */

.filter-item {
    min-height: 56px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        8px 12px;

    border-bottom:
        1px solid var(--line-color);

    border-radius: 14px;

    cursor: pointer;

    transition:
        background 0.18s ease,
        transform 0.15s ease;
}

.filter-item:last-child {
    border-bottom: none;
}

.filter-item:hover {
    background:
        var(--item-hover);
}

.filter-item:active {
    transform:
        scale(0.985);
}

.filter-name {
    font-size: 0.9375rem;

    font-weight: 600;

    color: var(--text-color);
}

.filter-state {
    color: var(--accent);

    font-size: 0.8rem;

    font-weight: 700;
}

/* =========================================================
   INTERFACE SETTINGS PAGE
========================================================= */

.interface-page {
    padding:
        8px 0 16px;
}

.interface-row {
    min-height: 56px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        6px 12px;

    border-bottom:
        1px solid var(--line-color);
}

.interface-row:last-child {
    border-bottom: none;
}

.interface-name {
    font-size: 0.9375rem;

    font-weight: 600;

    color: var(--text-color);

    display: flex;

    align-items: center;
}

/* =========================================================
   TOGGLE SWITCH
========================================================= */

.toggle-wrapper {
    position: relative;

    width: 58px;
    height: 32px;

    background:
        var(--sky-bg);

    border-radius: 100px;

    cursor: pointer;

    overflow: hidden;

    box-shadow:
        inset 0 2px 4px rgba(0,0,0,0.15);

    transition:
        all 0.4s cubic-bezier(0.4,0,0.2,1);
}

.roller {
    position: absolute;

    top: 3px;
    left: 3px;

    width: 26px;
    height: 26px;

    background-color:
        var(--sun-color);

    border-radius: 50%;

    box-shadow:
        0 2px 5px rgba(0,0,0,0.2);

    transition:
        all 0.4s cubic-bezier(0.4,0,0.2,1);

    z-index: 3;
}

.roller::after {
    content: "";

    position: absolute;

    top: -6px;
    right: -6px;

    width: 26px;
    height: 26px;

    background:
        var(--sky-bg);

    border-radius: 50%;

    transform:
        scale(0);

    transition:
        all 0.4s cubic-bezier(0.4,0,0.2,1);
}

.cloud-decor {
    position: absolute;

    right: 3px;
    bottom: -5px;

    width: 24px;
    height: 12px;

    background-color:
        var(--cloud-color);

    border-radius: 20px;

    transition:
        all 0.4s cubic-bezier(0.4,0,0.2,1);

    z-index: 2;
}

.cloud-decor::before {
    content: "";

    position: absolute;

    top: -7px;
    left: 6px;

    width: 12px;
    height: 12px;

    background-color:
        var(--cloud-color);

    border-radius: 50%;
}

.stars-decor {
    position: absolute;

    top: 8px;
    left: 10px;

    width: 2px;
    height: 2px;

    background: #fff;

    border-radius: 50%;

    opacity: 0;

    box-shadow:
        8px 6px 0 #fff,
        14px 1px 0 #fff;

    transition:
        all 0.4s cubic-bezier(0.4,0,0.2,1);

    z-index: 1;
}

.toggle-wrapper.is-dark .roller {
    transform:
        translateX(26px)
        rotate(360deg);

    background-color:
        #f1f5f9;
}

.toggle-wrapper.is-dark .roller::after {
    transform:
        scale(1)
        translate(-3px,3px);
}

.toggle-wrapper.is-dark .cloud-decor {
    transform:
        translateX(30px);

    opacity: 0;
}

.toggle-wrapper.is-dark .stars-decor {
    opacity: 1;
}

/* =========================================================
   FONT SLIDER
========================================================= */

.font-slider-wrap {
    display: flex;

    align-items: center;

    gap: 12px;

    justify-content: flex-end;
}

.font-small {
    font-size: 0.75rem;

    font-weight: 700;

    color: var(--muted-color);

    line-height: 1;

    display: flex;

    align-items: center;
    justify-content: flex-start;

    width: 14px;
}

.font-large {
    font-size: 1.125rem;

    font-weight: 700;

    color: var(--muted-color);

    line-height: 1;

    display: flex;

    align-items: center;
    justify-content: flex-end;

    width: 14px;
}

.font-slider {
    width: 120px;
    height: 6px;

    appearance: none;
    -webkit-appearance: none;

    border-radius: 99px;

    background:
        rgba(127,127,127,0.2);

    outline: none;

    cursor: pointer;
}

.font-slider::-webkit-slider-thumb {
    -webkit-appearance: none;

    width: 18px;
    height: 18px;

    border-radius: 50%;

    background:
        var(--accent);

    border:
        2px solid #fff;

    box-shadow:
        0 2px 6px rgba(0,0,0,0.25);

    transition:
        transform 0.1s ease;
}

.font-slider::-webkit-slider-thumb:active {
    transform:
        scale(1.2);
}

/* =========================================================
   SETTINGS PAGE
========================================================= */

.settings-page {
    padding: 4px 0 16px;
}

.settings-group {
    margin-bottom: 12px;
}

.settings-group:last-child {
    margin-bottom: 0;
}

.settings-group-title {
    padding: 7px 12px 6px;
    color: var(--muted-color);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.settings-row {
    width: 100%;
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 12px;
    border: none;
    border-bottom: 1px solid var(--line-color);
    border-radius: 16px;
    background: transparent;
    color: var(--text-color);
    text-align: left;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.15s ease;
}

.settings-row:last-child {
    border-bottom: none;
}

.settings-row:hover {
    background: var(--item-hover);
}

.settings-row:active {
    transform: scale(0.985);
}

.settings-row-main {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.settings-row-icon {
    width: 34px;
    min-width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--icon-color);
}

.settings-row-icon svg {
    width: 22px;
    height: 22px;
    display: block;
}

.settings-row-text {
    min-width: 0;
}

.settings-row-title {
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.4;
}

.settings-row-desc {
    margin-top: 2px;
    color: var(--muted-color);
    font-size: 0.74rem;
    line-height: 1.4;
}

.settings-row-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-shrink: 0;
    min-height: 34px;
}

.settings-switch {
    flex: 0 0 auto;
    display: block;
    margin: 0;
}

.settings-value {
    color: var(--muted-color);
    font-size: 0.75rem;
    font-weight: 600;
}

.settings-row-arrow {
    color: var(--muted-color);
    opacity: 0.5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.settings-row-arrow svg {
    width: 18px;
    height: 18px;
}


/* =========================================================
   SETTINGS DETAIL PAGES
========================================================= */

.settings-detail-page {
    padding: 4px 0 16px;
}

.settings-detail-intro {
    padding: 8px 12px 12px;
    color: var(--muted-color);
    font-size: 0.78rem;
    line-height: 1.5;
}

.settings-detail-section {
    margin-bottom: 12px;
}

.settings-detail-title {
    padding: 7px 12px 6px;
    color: var(--muted-color);
    font-size: 0.76rem;
    font-weight: 700;
}

.settings-detail-row {
    min-height: 54px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 12px;
    border: none;
    border-bottom: 1px solid var(--line-color);
    background: transparent;
    color: var(--text-color);
    text-align: left;
    border-radius: 14px;
    transition: background 0.18s ease, transform 0.15s ease;
}

.settings-detail-row:last-child {
    border-bottom: none;
}

.settings-detail-row.clickable {
    cursor: pointer;
}

.settings-detail-row.clickable:hover {
    background: var(--item-hover);
}

.settings-detail-row.clickable:active {
    transform: scale(0.985);
}

.settings-detail-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

.settings-detail-icon {
    width: 32px;
    min-width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--icon-color);
}

.settings-detail-icon svg {
    width: 21px;
    height: 21px;
    display: block;
}

.settings-detail-text {
    min-width: 0;
}

.settings-detail-label {
    font-size: 0.9rem;
    font-weight: 650;
    line-height: 1.35;
}

.settings-detail-desc {
    margin-top: 2px;
    color: var(--muted-color);
    font-size: 0.74rem;
    line-height: 1.4;
}

.settings-detail-right {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.settings-detail-value {
    color: var(--muted-color);
    font-size: 0.74rem;
    font-weight: 600;
}

.settings-option-grid {
    display: grid;
    gap: 7px;
    padding: 4px 12px 10px;
}

.settings-option {
    min-height: 44px;
    padding: 8px 11px;
    border: 1px solid var(--card-border);
    border-radius: 13px;
    background: transparent;
    color: var(--muted-color);
    font-size: 0.78rem;
    font-weight: 650;
    text-align: left;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.settings-option.active {
    background: rgba(37,99,235,0.1);
    border-color: rgba(37,99,235,0.28);
    color: var(--accent);
}

.settings-field {
    width: 100%;
    height: 42px;
    margin-top: 6px;
    border: 1px solid var(--card-border);
    border-radius: 12px;
    background: rgba(127,127,127,0.055);
    color: var(--text-color);
    padding: 0 10px;
    font: inherit;
    font-size: 0.82rem;
    outline: none;
}

.settings-field:focus {
    border-color: rgba(37,99,235,0.35);
}

.settings-preview-card {
    margin: 4px 12px 12px;
    padding: 12px;
    border: 1px solid var(--card-border);
    border-radius: 15px;
    background: rgba(127,127,127,0.04);
}

.settings-preview-title {
    font-size: 0.82rem;
    font-weight: 700;
}

.settings-preview-text {
    margin-top: 4px;
    color: var(--muted-color);
    font-size: 0.74rem;
    line-height: 1.45;
}

.settings-danger {
    color: #ef4444;
}

.settings-primary-btn {
    min-height: 42px;
    width: calc(100% - 24px);
    margin: 8px 12px 4px;
    border: 1px solid rgba(37,99,235,0.25);
    border-radius: 13px;
    background: rgba(60,155,104,0.08);
    color: var(--accent);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
}

/* =========================================================
   SIMPLE PAGE
========================================================= */

.simple-page {
    padding:
        36px 20px;

    text-align: center;
}

.simple-page-icon {
    width: 64px;
    height: 64px;

    margin:
        0 auto 16px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 20px;

    background:
        var(--icon-bg);

    color:
        var(--icon-color);
}

.simple-page-icon svg {
    width: 32px;
    height: 32px;
}

.simple-page h3 {
    font-size: 1.125rem;

    font-weight: 700;
}

.simple-page p {
    max-width: 360px;

    margin:
        8px auto 0;

    color:
        var(--muted-color);

    font-size: 0.875rem;

    line-height: 1.5;
}

/* =========================================================
   RESPONSIVE SPACING
========================================================= */

@media (max-width: 480px) {

    .sheet-body {
        padding-left: 16px;
        padding-right: 16px;
    }

    .menu-page {
        gap: 2px;
    }

    .menu-item {
        min-height: 46px;

        padding:
            6px 10px;
    }

    .menu-text {
        margin-left: 13px;
        margin-right: 10px;
    }
}

/* =========================================================
   NOTIFICATION PAGE
========================================================= */

.notification-page {
    padding: 4px 0 10px;
}

.notification-item {
    min-height: 62px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border: none;
    border-bottom: 1px solid var(--line-color);
    background: transparent;
    color: var(--text-color);
    text-align: left;
    border-radius: 16px;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.15s ease;
}

.notification-item:last-child {
    border-bottom: none;
}

.notification-item:hover {
    background: var(--item-hover);
}

.notification-item:active {
    transform: scale(0.985);
}

.notification-item-main {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.notification-item-icon {
    width: 34px;
    min-width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--icon-color);
}

.notification-item-icon svg {
    width: 23px;
    height: 23px;
    display: block;
}

.notification-item-text {
    min-width: 0;
}

.notification-item-title {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4;
}

.notification-item-desc {
    margin-top: 2px;
    color: var(--muted-color);
    font-size: 0.75rem;
    line-height: 1.4;
}

.notification-item-arrow {
    color: var(--muted-color);
    opacity: 0.5;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notification-item-arrow svg {
    width: 18px;
    height: 18px;
}

.notification-subpage {
    padding: 4px 0 14px;
}

.notification-card {
    margin: 4px 0 12px;
    padding: 14px 12px;
    border: 1px solid var(--card-border);
    border-radius: 16px;
    background: rgba(127,127,127,0.045);
}

.notification-card-title {
    font-size: 0.96rem;
    font-weight: 700;
}

.notification-card-desc {
    margin-top: 5px;
    color: var(--muted-color);
    font-size: 0.76rem;
    line-height: 1.5;
}

.notification-status {
    margin-top: 10px;
    color: var(--muted-color);
    font-size: 0.78rem;
    line-height: 1.45;
}

.notification-status strong {
    color: var(--text-color);
}

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

.notification-action-btn {
    min-height: 42px;
    border: 1px solid var(--card-border);
    border-radius: 13px;
    background: rgba(127,127,127,0.06);
    color: var(--text-color);
    font-size: 0.8rem;
    font-weight: 650;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.15s ease, border-color 0.18s ease;
}

.notification-action-btn:hover {
    background: var(--item-hover);
}

.notification-action-btn:active {
    transform: scale(0.97);
}

.notification-action-btn.primary {
    border-color: rgba(37,99,235,0.22);
    color: var(--accent);
}

.notification-action-btn.danger {
    color: #ef4444;
}

.notification-action-btn.full {
    grid-column: 1 / -1;
}

.notification-section-label {
    margin: 14px 12px 8px;
    color: var(--muted-color);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.notification-choice-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
}

.notification-choice {
    min-height: 42px;
    padding: 5px 3px;
    border: 1px solid var(--card-border);
    border-radius: 12px;
    background: transparent;
    color: var(--muted-color);
    font-size: 0.68rem;
    font-weight: 650;
    cursor: pointer;
}

.notification-choice.active {
    background: rgba(37,99,235,0.1);
    border-color: rgba(37,99,235,0.28);
    color: var(--accent);
}

.notification-setting-row {
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--line-color);
}

.notification-setting-row:last-child {
    border-bottom: none;
}

.notification-setting-main {
    min-width: 0;
    flex: 1;
}

.notification-setting-title {
    font-size: 0.9rem;
    font-weight: 650;
}

.notification-setting-desc {
    margin-top: 2px;
    color: var(--muted-color);
    font-size: 0.74rem;
    line-height: 1.4;
}

.notification-time-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 10px;
}

.notification-time-input {
    width: 100%;
    height: 42px;
    border: 1px solid var(--card-border);
    border-radius: 12px;
    background: rgba(127,127,127,0.055);
    color: var(--text-color);
    padding: 0 10px;
    font: inherit;
    font-size: 0.84rem;
    outline: none;
}

.notification-time-input:focus {
    border-color: rgba(37,99,235,0.35);
}

.notification-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 5px;
    margin-top: 8px;
}

.notification-day {
    min-height: 38px;
    border: 1px solid var(--card-border);
    border-radius: 11px;
    background: transparent;
    color: var(--muted-color);
    font-size: 0.68rem;
    font-weight: 700;
    cursor: pointer;
}

.notification-day.active {
    background: rgba(37,99,235,0.1);
    border-color: rgba(37,99,235,0.28);
    color: var(--accent);
}

.notification-switch {
    position: relative;
    width: 51px;
    height: 31px;
    flex-shrink: 0;
    border: none;
    border-radius: 999px;
    background: rgba(127,127,127,0.23);
    cursor: pointer;
    transition: background 0.2s ease;
}

.notification-switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.22);
    transition: transform 0.2s cubic-bezier(0.4,0,0.2,1);
}

.notification-switch.is-on {
    background: var(--success);
}

.notification-switch.is-on::after {
    transform: translateX(20px);
}

.notification-preview {
    margin-top: 10px;
    padding: 12px;
    border: 1px solid var(--card-border);
    border-radius: 15px;
    background: rgba(127,127,127,0.04);
}

.notification-preview-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.notification-preview-app {
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--muted-color);
}

.notification-preview-time {
    font-size: 0.68rem;
    color: var(--muted-color);
}

.notification-preview-title {
    margin-top: 6px;
    font-size: 0.84rem;
    font-weight: 700;
}

.notification-preview-text {
    margin-top: 3px;
    color: var(--muted-color);
    font-size: 0.74rem;
    line-height: 1.4;
}

.notification-permission {
    margin-top: 10px;
    font-size: 0.76rem;
    color: var(--muted-color);
}

.notification-permission strong {
    color: var(--text-color);
}

.notification-banner-preview {
    margin-top: 10px;
    padding: 11px 12px;
    border: 1px solid var(--card-border);
    border-radius: 14px;
    background: var(--card-color);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.notification-dot-preview {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--accent);
    vertical-align: middle;
}

.notification-muted {
    color: var(--muted-color);
    font-size: 0.74rem;
}

@media (max-width: 480px) {
    .notification-choice-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .notification-days {
        gap: 4px;
    }
}

.notification-page {
    padding: 4px 0 10px;
}

.notification-item {
    min-height: 62px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border: none;
    border-bottom: 1px solid var(--line-color);
    background: transparent;
    color: var(--text-color);
    text-align: left;
    border-radius: 16px;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.15s ease;
}

.notification-item:last-child {
    border-bottom: none;
}

.notification-item:hover {
    background: var(--item-hover);
}

.notification-item:active {
    transform: scale(0.985);
}

.notification-item-main {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.notification-item-icon {
    width: 34px;
    min-width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--icon-color);
}

.notification-item-icon svg {
    width: 23px;
    height: 23px;
    display: block;
}

.notification-item-text {
    min-width: 0;
}

.notification-item-title {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4;
}

.notification-item-desc {
    margin-top: 2px;
    color: var(--muted-color);
    font-size: 0.75rem;
    line-height: 1.4;
}

.notification-item-arrow {
    color: var(--muted-color);
    opacity: 0.5;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notification-item-arrow svg {
    width: 18px;
    height: 18px;
}

/* =========================================================
   NOTIFICATION PAGE
========================================================= */


/* =========================================================
   ZENZ MODE PAGE
========================================================= */

.zen-page { padding: 4px 0 16px; }
.zen-hero { margin: 4px 12px 12px; padding: 14px 12px; border: 1px solid var(--card-border); border-radius: 17px; background: rgba(127,127,127,0.045); }
.zen-hero-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.zen-hero-main { min-width:0; }
.zen-hero-title { font-size:.98rem; font-weight:700; }
.zen-hero-desc { margin-top:3px; color:var(--muted-color); font-size:.75rem; line-height:1.45; }
.zen-countdown { margin-top:10px; padding-top:10px; border-top:1px solid var(--line-color); color:var(--accent); font-size:.78rem; font-weight:700; }
.zen-countdown.hidden { display:none; }
.zen-item { min-height:60px; width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 12px; border:none; border-bottom:1px solid var(--line-color); background:transparent; color:var(--text-color); text-align:left; }
.zen-item-main { display:flex; align-items:center; gap:12px; flex:1; min-width:0; }
.zen-item-icon { width:34px; min-width:34px; height:34px; display:flex; align-items:center; justify-content:center; color:var(--icon-color); }
.zen-item-icon svg { width:23px; height:23px; display:block; }
.zen-item-text { min-width:0; flex:1; }
.zen-item-title { font-size:.91rem; font-weight:650; line-height:1.4; }
.zen-item-desc { margin-top:2px; color:var(--muted-color); font-size:.74rem; line-height:1.4; }
.zen-subsection { margin:12px 12px 0; padding-top:12px; border-top:1px solid var(--line-color); }
.zen-section-label { margin-bottom:8px; color:var(--muted-color); font-size:.74rem; font-weight:700; }
.zen-choice-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
.zen-choice { min-height:40px; border:1px solid var(--card-border); border-radius:12px; background:transparent; color:var(--muted-color); font-size:.69rem; font-weight:650; cursor:pointer; transition:background .18s ease,border-color .18s ease,color .18s ease; }
.zen-choice.active { background:rgba(37,99,235,.1); border-color:rgba(37,99,235,.28); color:var(--accent); }
.zen-schedule-box { margin-top:9px; padding:11px; border:1px solid var(--card-border); border-radius:14px; background:rgba(127,127,127,.035); }
.zen-time-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.zen-time-input { width:100%; height:40px; border:1px solid var(--card-border); border-radius:11px; background:rgba(127,127,127,.055); color:var(--text-color); padding:0 10px; font:inherit; font-size:.82rem; outline:none; }
.zen-days { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px; margin-top:8px; }
.zen-day { min-height:36px; border:1px solid var(--card-border); border-radius:10px; background:transparent; color:var(--muted-color); font-size:.67rem; font-weight:700; cursor:pointer; }
.zen-day.active { background:rgba(37,99,235,.1); border-color:rgba(37,99,235,.28); color:var(--accent); }
.zen-note { margin-top:7px; color:var(--muted-color); font-size:.7rem; line-height:1.45; }
@media (max-width:480px) { .zen-choice-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }



/* =========================================================
   ZENZ NOTIFICATION PAUSE - 24H BARREL PICKER
========================================================= */

.zenz-pause-time-launcher {
    width: 100%;
    min-height: 46px;
    margin-top: 12px;
    border: 1px solid var(--card-border);
    border-radius: 14px;
    background: transparent;
    color: var(--text-color);
    font: inherit;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .18s ease, transform .15s ease;
}

.zenz-pause-time-launcher:hover { background: var(--item-hover); }
.zenz-pause-time-launcher:active { transform: scale(.985); }

.zenz-pause-time-picker {
    margin-top: 12px;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(16px);
    pointer-events: none;
    transition:
        max-height .38s cubic-bezier(.16,1,.3,1),
        opacity .24s ease,
        transform .38s cubic-bezier(.16,1,.3,1);
}

.zenz-pause-time-picker.is-open {
    max-height: 390px;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.zenz-pause-picker-card {
    overflow: hidden;
    border: 1px solid var(--card-border);
    border-radius: 20px;
    background: var(--card-color);
}

.zenz-pause-picker-head {
    padding: 14px 14px 6px;
}

.zenz-pause-picker-title {
    font-size: .84rem;
    font-weight: 700;
    color: var(--text-color);
}

.zenz-pause-picker-desc {
    margin-top: 3px;
    font-size: .72rem;
    line-height: 1.45;
    color: var(--muted-color);
}

.zenz-pause-barrel {
    position: relative;
    height: 214px;
    overflow: hidden;
}

.zenz-pause-barrel::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 4;
    background: linear-gradient(
        to bottom,
        var(--card-color) 0%,
        rgba(0,0,0,0) 30%,
        rgba(0,0,0,0) 70%,
        var(--card-color) 100%
    );
    opacity: .94;
}

.zenz-pause-visor {
    position: absolute;
    top: 50%;
    left: 14px;
    right: 14px;
    height: 42px;
    transform: translateY(-50%);
    border-radius: 11px;
    background: rgba(127,127,127,.10);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
    pointer-events: none;
    z-index: 1;
}

.zenz-pause-columns {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.zenz-pause-colon {
    margin: 0 1px;
    color: var(--text-color);
    font-size: 26px;
    font-weight: 700;
    pointer-events: none;
}

.zenz-pause-wheel {
    position: relative;
    width: 86px;
    height: 100%;
    perspective: 760px;
    touch-action: none;
    cursor: grab;
}

.zenz-pause-wheel:active { cursor: grabbing; }

.zenz-pause-viewport {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
}

.zenz-pause-slot {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 42px;
    margin-top: -21px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
    font-size: 24px;
    font-weight: 400;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform, opacity;
}

.zenz-pause-slot.active { font-weight: 700; }

.zenz-pause-selected {
    padding: 9px 14px 2px;
    text-align: center;
    font-size: .8rem;
    font-weight: 700;
    color: var(--text-color);
}

.zenz-pause-preview {
    padding: 0 14px 10px;
    text-align: center;
    font-size: .72rem;
    color: var(--muted-color);
}

.zenz-pause-actions {
    display: flex;
    border-top: 1px solid var(--line-color);
}

.zenz-pause-action {
    flex: 1;
    min-height: 44px;
    border: none;
    background: transparent;
    color: var(--accent);
    font: inherit;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .18s ease, transform .15s ease;
}

.zenz-pause-action + .zenz-pause-action {
    border-left: 1px solid var(--line-color);
}

.zenz-pause-action:hover { background: var(--item-hover); }
.zenz-pause-action:active { transform: scale(.97); }
.zenz-pause-action.danger { color: #ef4444; }

@media (prefers-reduced-motion: reduce) {
    .zenz-pause-time-picker,
    .zenz-pause-time-launcher,
    .zenz-pause-action { transition: none; }
}



.more-btn { display: none !important; }

/* ===== OVERRIDE: Force light theme default & fix dark mode colors ===== */
html, body {
    background-color: #f5f6f8 !important;
    color: #151619 !important;
}
html[data-theme="dark"], html[data-theme="dark"] body {
    background-color: #0f1419 !important;
    color: #f5f6f8 !important;
}
html[data-theme="dark"] {
    --bg-color: #0f1419 !important;
    --card-color: rgba(21, 28, 38, 0.95) !important;
    --card-border: rgba(255,255,255,0.08) !important;
    --text-color: #f5f6f8 !important;
    --muted-color: #8b98a5 !important;
    --line-color: rgba(255,255,255,0.08) !important;
    --icon-bg: rgba(60,155,104,0.15) !important;
    --icon-color: #4ade80 !important;
    --accent: #3c9b68 !important;
    --success: #34c759 !important;
    --sky-bg: linear-gradient(180deg, #0f1419, #1a2332) !important;
    --sun-color: #f1f5f9 !important;
}
/* Ensure app containers don't show dark background */
.app, main, .feed, .content-area, .page {
    background-color: transparent !important;
}
/* Fix bottom sheet z-index and positioning */
.bottom-sheet {
    z-index: 1000 !important;
}
.overlay {
    z-index: 999 !important;
}
.dialog-backdrop, .ios-dialog-backdrop {
    z-index: 2000 !important;
}
/* Ensure header stays above content */
.header {
    z-index: 100 !important;
    position: relative;
}



/* =========================================================
   ZENZ COLOR SYSTEM REPAIR
   Keeps the existing layout and interactions; synchronizes
   the home feed and the merged menu in light/dark themes.
========================================================= */
:root {
    --bg: #f5f6f8;
    --card: #ffffff;
    --text: #151619;
    --muted: #858991;
    --line: rgba(0, 0, 0, .07);
}

html[data-theme="dark"] {
    /* Tokens used by the original home/feed stylesheet */
    --bg: #0f1419 !important;
    --card: rgba(21, 28, 38, .97) !important;
    --text: #f5f6f8 !important;
    --muted: #94a3b8 !important;
    --line: rgba(255, 255, 255, .09) !important;

    /* Shared accent tokens used by the settings sheet */
    --accent: #3c9b68 !important;
    --success: #34c759 !important;
}

/* Header and search */
html[data-theme="dark"] .header {
    background: rgba(18, 24, 32, .94) !important;
    border-bottom-color: var(--line-color) !important;
}
html[data-theme="dark"] .header-btn,
html[data-theme="dark"] .search-close,
html[data-theme="dark"] .search-expand-icon {
    color: var(--text-color) !important;
}
html[data-theme="dark"] .header-btn:hover,
html[data-theme="dark"] .search-close:hover {
    background: rgba(255, 255, 255, .07) !important;
}
html[data-theme="dark"] .search-expand {
    background: #151c26 !important;
    border-color: rgba(255, 255, 255, .1) !important;
}
html[data-theme="dark"] .search-expand-input {
    color: var(--text-color) !important;
}
html[data-theme="dark"] .search-expand-input::placeholder {
    color: var(--muted-color) !important;
}
html[data-theme="dark"] .search-clear {
    color: var(--muted-color) !important;
}

/* Surfaces shared by the feed and the navigation */
html[data-theme="dark"] .moments-section,
html[data-theme="dark"] .topic-section,
html[data-theme="dark"] .post,
html[data-theme="dark"] .navbar {
    background: var(--card-color) !important;
    border-color: var(--card-border) !important;
    box-shadow: 0 8px 26px rgba(0, 0, 0, .22) !important;
}
html[data-theme="dark"] .section-title,
html[data-theme="dark"] .brand,
html[data-theme="dark"] .author,
html[data-theme="dark"] .post-text {
    color: var(--text-color) !important;
}
html[data-theme="dark"] .moments-label,
html[data-theme="dark"] .moment,
html[data-theme="dark"] .topic-subtitle,
html[data-theme="dark"] .post-meta,
html[data-theme="dark"] .meaning-count,
html[data-theme="dark"] .post-action,
html[data-theme="dark"] .comment-btn {
    color: var(--muted-color) !important;
}
html[data-theme="dark"] .moment-avatar,
html[data-theme="dark"] .avatar,
html[data-theme="dark"] .notification-avatar {
    background: #27313d !important;
    border-color: #27313d !important;
}
html[data-theme="dark"] .moment.add {
    color: var(--text-color) !important;
}
html[data-theme="dark"] .moment.add .moment-avatar {
    background: var(--accent) !important;
    color: #ffffff !important;
}
html[data-theme="dark"] .topic {
    background: rgba(255, 255, 255, .055) !important;
    border-color: rgba(255, 255, 255, .09) !important;
    color: #b7c0cb !important;
}
html[data-theme="dark"] .topic-indicator,
html[data-theme="dark"] .indicator {
    background: #2f8054 !important;
    box-shadow: 0 5px 14px rgba(0, 0, 0, .28) !important;
}
html[data-theme="dark"] .topic.active,
html[data-theme="dark"] .nav-item.active {
    color: #ffffff !important;
}
html[data-theme="dark"] .nav-item {
    color: #a4afbd;
}
html[data-theme="dark"] .create {
    background: #2f8054 !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, .14) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .24) !important;
}
html[data-theme="dark"] .bookmark-btn {
    color: var(--muted-color) !important;
}
html[data-theme="dark"] .bookmark-btn.saved {
    color: #65d49a !important;
}
html[data-theme="dark"] .comment-btn svg {
    stroke: var(--text-color) !important;
}
html[data-theme="dark"] .share-icon {
    color: var(--muted-color) !important;
}
html[data-theme="dark"] .post-media {
    background: linear-gradient(135deg, #26323d, #1b2530) !important;
    color: #b6c1cc !important;
}

/* Notifications */
html[data-theme="dark"] .notification-popover {
    background: #151c26 !important;
    border-color: rgba(255, 255, 255, .1) !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .42) !important;
}
html[data-theme="dark"] .notification-title,
html[data-theme="dark"] .notification-text,
html[data-theme="dark"] .notification-empty strong,
html[data-theme="dark"] .search-result-message strong,
html[data-theme="dark"] .end-feed strong {
    color: var(--text-color) !important;
}
html[data-theme="dark"] .notification-mark,
html[data-theme="dark"] .notification-time,
html[data-theme="dark"] .notification-footer,
html[data-theme="dark"] .notification-empty,
html[data-theme="dark"] .search-result-message,
html[data-theme="dark"] .end-feed,
html[data-theme="dark"] .end-feed p {
    color: var(--muted-color) !important;
}
html[data-theme="dark"] .notification-item {
    background: #151c26 !important;
}
html[data-theme="dark"] .notification-item:hover {
    background: #1c2733 !important;
}
html[data-theme="dark"] .notification-item.unread {
    background: #1b2b38 !important;
}
html[data-theme="dark"] .notification-item.unread:hover {
    background: #223646 !important;
}
html[data-theme="dark"] .notification-avatar {
    color: var(--text-color) !important;
}
html[data-theme="dark"] .notification-footer,
html[data-theme="dark"] .notification-header {
    border-color: var(--line-color) !important;
}
html[data-theme="dark"] .home-btn {
    background: #2f8054 !important;
    color: #ffffff !important;
}

/* Keep the settings sheet, dialogs and controls legible too. */
html[data-theme="dark"] .dialog-box,
html[data-theme="dark"] .ios-dialog-box,
html[data-theme="dark"] .notification-card,
html[data-theme="dark"] .notification-preview {
    background: var(--card-color) !important;
    color: var(--text-color) !important;
    border-color: var(--card-border) !important;
}
html[data-theme="dark"] .notification-time-input {
    background: rgba(255, 255, 255, .06) !important;
    color: var(--text-color) !important;
    border-color: var(--card-border) !important;
}
html[data-theme="dark"] .notification-switch::after,
html[data-theme="dark"] .iphone-switch::after {
    background: #f8fafc !important;
}


    /* Scoped login component styles; global reset intentionally removed. */


    .cl-icon {
      height: 1em;
      width: auto;
      fill: currentColor;
      display: inline-block;
    }

    .cl-login08-demo {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      place-items: center;
      min-height: 100vh;
      box-sizing: border-box;
      padding: 40px 16px;
      background: radial-gradient(circle at 8% 90%, #ffe38f 0 120px, transparent 121px),
        radial-gradient(circle at 94% 8%, #c9d6ff 0 150px, transparent 151px),
        #dff5e8;
    }

    .cl-login08 {
      --cl-login08-ink: #2b1d16;
      --cl-login08-muted: #5f4f47;
      --cl-login08-tomato: #d63d1f;
      --cl-login08-tomato-dark: #a82c12;
      --cl-login08-leaf: #1f6d42;
      --cl-login08-peach: #ffe7dc;
      --cl-login08-error: #b3261e;
      font-family: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      width: 100%;
      max-width: 960px;
      overflow: hidden;
      border-radius: 36px;
      background: #fff;
      box-shadow: 0 30px 60px -30px rgba(47, 138, 87, .45);
      color: var(--cl-login08-ink);
      line-height: 1.5;
    }

    .cl-login08 *,
    .cl-login08 *::before,
    .cl-login08 *::after {
      box-sizing: border-box;
    }

    .cl-login08 [hidden] {
      display: none !important;
    }

    .cl-login08__vh {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      padding: 0;
      overflow: hidden;
      clip: rect(0 0 0 0);
      clip-path: inset(50%);
      white-space: nowrap;
      border: 0;
    }

    .cl-login08__art {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 40px 24px;
      background: var(--cl-login08-peach);
    }

    .cl-login08__scene {
      width: 100%;
      max-width: 340px;
      height: auto;
    }

    .cl-login08__eyes-shut {
      opacity: 0;
    }

    .cl-login08.is-shy .cl-login08__eyes-open {
      opacity: 0;
    }

    .cl-login08.is-shy .cl-login08__eyes-shut {
      opacity: 1;
    }

    .cl-login08__scene g {
      transition: opacity .15s ease;
    }

    .cl-login08__tag {
      margin: 0;
      padding: 8px 16px;
      border-radius: 999px;
      background: #fff;
      color: var(--cl-login08-leaf);
      font-size: 14px;
      font-weight: 800;
      box-shadow: 0 6px 16px -8px rgba(229, 72, 42, .5);
    }

    .cl-login08__panel {
      padding: clamp(28px, 5vw, 52px);
    }

    .cl-login08__brand {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin: 0 0 22px;
      color: var(--cl-login08-leaf);
      font-size: 20px;
      font-weight: 900;
    }

    .cl-login08__dot {
      width: 14px;
      height: 14px;
      border-radius: 50% 0;
      background: #57c98a;
      transform: rotate(-45deg);
    }

    .cl-login08__title {
      margin: 0 0 6px;
      font-size: clamp(28px, 3.4vw, 36px);
      font-weight: 900;
      letter-spacing: -.02em;
      line-height: 1.1;
    }

    .cl-login08__sub {
      margin: 0 0 26px;
      color: var(--cl-login08-muted);
      font-size: 17px;
    }

    .cl-login08__field {
      margin-bottom: 16px;
    }

    .cl-login08__label {
      display: block;
      margin: 0 0 6px 6px;
      font-size: 15px;
      font-weight: 800;
    }

    .cl-login08__input {
      display: block;
      width: 100%;
      min-height: 54px;
      padding: 12px 20px;
      border: 3px solid #eadfd8;
      border-radius: 999px;
      background: #fffaf7;
      color: var(--cl-login08-ink);
      font: inherit;
      font-size: 17px;
      font-weight: 600;
      transition: border-color .15s ease, box-shadow .15s ease;
    }

    .cl-login08__input:hover {
      border-color: #d9c8be;
    }

    .cl-login08__input:focus {
      outline: none;
      border-color: #6c8cff;
      box-shadow: 0 0 0 5px rgba(108, 140, 255, .22);
    }

    .cl-login08__pw {
      position: relative;
    }

    .cl-login08__pw .cl-login08__input {
      padding-right: 60px;
    }

    .cl-login08__eye {
      position: absolute;
      top: 50%;
      right: 6px;
      transform: translateY(-50%);
      display: grid;
      place-items: center;
      width: 44px;
      height: 44px;
      border: 0;
      border-radius: 50%;
      background: transparent;
      color: var(--cl-login08-muted);
      cursor: pointer;
    }

    .cl-login08__eye:hover {
      background: #f5ebe5;
      color: var(--cl-login08-ink);
    }

    .cl-login08__eye-off,
    .cl-login08__eye[aria-pressed="true"] .cl-login08__eye-on {
      display: none;
    }

    .cl-login08__eye[aria-pressed="true"] .cl-login08__eye-off {
      display: block;
    }

    .cl-login08__caps {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin: 10px 0 0 10px;
      padding: 6px 14px;
      border-radius: 12px;
      background: #ffe38f;
      color: #5a3d00;
      font-size: 14px;
      font-weight: 800;
    }

    .cl-login08__caps::before {
      content: "";
      position: absolute;
      top: -6px;
      left: 18px;
      border: 6px solid transparent;
      border-top: 0;
      border-bottom-color: #ffe38f;
    }

    .cl-login08__row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin: 4px 6px 24px;
    }

    .cl-login08__check {
      display: inline-flex;
      align-items: flex-start;
      gap: 8px;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      line-height: 1.4;
    }

    .cl-login08__check input {
      flex: 0 0 auto;
      width: 20px;
      height: 20px;
      margin: 2px 0 0;
      accent-color: var(--cl-login08-leaf);
    }

    .cl-login08__link {
      color: #3552d6;
      font-weight: 800;
      text-decoration: none;
      border-radius: 6px;
    }

    .cl-login08__link:hover {
      text-decoration: underline;
      text-decoration-thickness: 2px;
      text-underline-offset: 3px;
    }

    /* Buttons that borrow the link look keep their own reset */
    button.cl-login08__link {
      padding: 0;
      border: 0;
      background: none;
      font-family: inherit;
      font-size: inherit;
      line-height: inherit;
      font-weight: 800;
      cursor: pointer;
      text-align: left;
    }

    .cl-login08__submit {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
      min-height: 58px;
      border: 0;
      border-radius: 999px;
      background: var(--cl-login08-tomato);
      color: #fff;
      font: inherit;
      font-size: 18px;
      font-weight: 900;
      cursor: pointer;
      box-shadow: 0 6px 0 var(--cl-login08-tomato-dark);
      transition: transform .1s ease, box-shadow .1s ease;
    }

    .cl-login08__submit:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 0 var(--cl-login08-tomato-dark);
    }

    .cl-login08__submit:active {
      transform: translateY(4px);
      box-shadow: 0 2px 0 var(--cl-login08-tomato-dark);
    }

    .cl-login08__submit:disabled {
      cursor: progress;
      opacity: .9;
      transform: none;
      box-shadow: 0 6px 0 var(--cl-login08-tomato-dark);
    }

    .cl-login08__spinner {
      display: none;
      width: 20px;
      height: 20px;
      border: 3px solid rgba(255, 255, 255, .45);
      border-top-color: #fff;
      border-radius: 50%;
      animation: cl-login08-spin .7s linear infinite;
    }

    .cl-login08__submit.is-loading .cl-login08__spinner {
      display: block;
    }

    @keyframes cl-login08-spin {
      to {
        transform: rotate(360deg);
      }
    }

    .cl-login08__foot {
      margin: 24px 0 0;
      color: var(--cl-login08-muted);
      font-size: 16px;
      text-align: center;
    }

    .cl-login08__demo {
      margin: 10px 0 0;
      color: #6d5d55;
      font-size: 13px;
      text-align: center;
    }

    .cl-login08__eye:focus-visible,
    .cl-login08__check input:focus-visible,
    .cl-login08__link:focus-visible,
    .cl-login08__submit:focus-visible,
    .cl-login08__ghost:focus-visible {
      outline: 3px solid #6c8cff;
      outline-offset: 3px;
    }

    .cl-login08__error {
      display: flex;
      align-items: center;
      gap: 6px;
      margin: 8px 0 0 10px;
      color: var(--cl-login08-error);
      font-size: 14px;
      font-weight: 700;
    }

    .cl-login08__error::before {
      content: "\2639";
      font-size: 18px;
      line-height: 1;
    }

    .cl-login08__error:empty {
      display: none;
    }

    .cl-login08__field.is-error .cl-login08__input {
      border-color: #f08a7a;
      background: #fff4f2;
    }

    /* Checkbox field error state: tint the label text instead of the input */
    .cl-login08__field.is-error .cl-login08__check {
      color: var(--cl-login08-error);
    }

    .cl-login08__done {
      padding: 40px 0;
      text-align: center;
    }

    .cl-login08__done:focus {
      outline: none;
    }

    .cl-login08__done:focus-visible {
      outline: 3px solid #6c8cff;
      outline-offset: 6px;
      border-radius: 20px;
    }

    .cl-login08__done-icon {
      display: inline-grid;
      place-items: center;
      width: 88px;
      height: 88px;
      margin-bottom: 12px;
      border-radius: 50%;
      background: #dff5e8;
    }

    .cl-login08__done .cl-login08__sub {
      margin-bottom: 26px;
    }

    .cl-login08__ghost {
      min-height: 50px;
      padding: 0 24px;
      border: 3px solid #eadfd8;
      border-radius: 999px;
      background: #fff;
      color: var(--cl-login08-ink);
      font: inherit;
      font-size: 16px;
      font-weight: 800;
      cursor: pointer;
    }

    .cl-login08__ghost:hover {
      border-color: #d9c8be;
      background: #fffaf7;
    }

    .cl-login08__noscript {
      margin: 0 0 18px;
      padding: 12px 16px;
      border-radius: 16px;
      background: #fff4f2;
      color: var(--cl-login08-error);
      font-size: 15px;
      font-weight: 700;
    }

    @media (max-width: 780px) {
      .cl-login08 {
        grid-template-columns: minmax(0, 1fr);
        border-radius: 28px;
      }

      .cl-login08__art {
        padding: 20px 16px 16px;
      }

      .cl-login08__scene {
        max-width: 200px;
      }

      .cl-login08__tag {
        display: none;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .cl-login08 *,
      .cl-login08 *::before,
      .cl-login08 *::after {
        transition: none !important;
        animation: none !important;
      }
    }
  

/* Integrated login overlay: keep the app untouched behind it. */
body.zenz-auth-locked > :not(.cl-login08-demo) {
  visibility: hidden !important;
  pointer-events: none !important;
}
body.zenz-auth-locked > .cl-login08-demo {
  visibility: visible !important;
  pointer-events: auto !important;
}
.cl-login08-demo {
  position: fixed;
  inset: 0;
  z-index: 99999;
  min-height: 100vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.cl-login08-demo[hidden] { display: none !important; }
@media (max-width: 520px) {
  .cl-login08 { border-radius: 22px; }
  .cl-login08__panel { padding: 26px 22px; }
}


/* =========================================================
   ZENZ DATING — safety-first UI prototype
   Isolated selectors; follows the app's light/dark theme.
========================================================= */
:root {
  --zd-bg: #f5f8f6;
  --zd-card: #ffffff;
  --zd-text: #1b2922;
  --zd-muted: #75837a;
  --zd-line: rgba(28, 62, 43, .10);
  --zd-soft: #eef6f0;
  --zd-green: #3c9b68;
  --zd-green-dark: #257349;
  --zd-shadow: 0 12px 35px rgba(24, 66, 43, .055);
}
html[data-theme="dark"] {
  --zd-bg: #111820;
  --zd-card: #18222c;
  --zd-text: #eff5f1;
  --zd-muted: #9cabb3;
  --zd-line: rgba(255,255,255,.10);
  --zd-soft: #202f32;
  --zd-green: #58c88c;
  --zd-green-dark: #72d69f;
  --zd-shadow: 0 12px 35px rgba(0,0,0,.16);
}
body.zd-dating-open #momentsSection,
body.zd-dating-open .topic-section,
body.zd-dating-open .feed-section,
body.zd-dating-open #friendsView { display: none !important; }
body.zd-dating-open #datingView { display: block; }
#datingView {
  display: none;
  width: min(100%, 900px);
  margin: 0 auto;
  padding: 22px 0 44px;
  color: var(--zd-text);
  color-scheme: light;
}
html[data-theme="dark"] #datingView { color-scheme: dark; }
#datingView * { box-sizing: border-box; }
#datingView button, #datingView input, #datingView select { font: inherit; }
#datingView button { -webkit-tap-highlight-color: transparent; }
.zd-topline { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin:0 2px 18px; }
.zd-eyebrow, .zd-overline { display:block; color:var(--zd-green-dark); font-size:10px; letter-spacing:.16em; font-weight:900; }
.zd-title { margin:7px 0 5px; color:var(--zd-text); font-size:clamp(26px,4vw,36px); letter-spacing:-.055em; font-weight:900; }
.zd-title span { color:var(--zd-green); }
.zd-subtitle { color:var(--zd-muted); font-size:13px; margin:0; line-height:1.6; }
.zd-demo-pill { flex-shrink:0; display:inline-flex; align-items:center; gap:7px; border:1px solid var(--zd-line); color:var(--zd-muted); padding:8px 11px; border-radius:999px; font-size:11px; font-weight:800; background:var(--zd-card); }
.zd-status-dot { width:7px; height:7px; background:#e4a94c; border-radius:50%; box-shadow:0 0 0 3px rgba(228,169,76,.14); }
.zd-age-note { display:flex; gap:11px; padding:13px 15px; border:1px solid rgba(204,153,53,.28); background:rgba(233,188,87,.10); border-radius:16px; margin-bottom:16px; }
.zd-note-icon { display:grid; place-items:center; flex:0 0 29px; width:29px; height:29px; border-radius:10px; background:rgba(204,153,53,.15); color:#bf8b22; font-size:20px; }
.zd-age-note strong { display:block; color:var(--zd-text); font-size:12px; margin:1px 0 4px; }
.zd-age-note p { margin:0; color:var(--zd-muted); font-size:11px; line-height:1.6; }
.zd-hero { position:relative; isolation:isolate; display:flex; overflow:hidden; min-height:208px; padding:clamp(22px,4vw,34px); border:1px solid var(--zd-line); border-radius:26px; background:radial-gradient(ellipse at 80% 20%, rgba(98,199,139,.18), transparent 45%), linear-gradient(120deg,var(--zd-card),var(--zd-bg)); box-shadow:var(--zd-shadow); }
.zd-hero-copy { max-width:590px; position:relative; z-index:2; }
.zd-hero-kicker { color:var(--zd-green-dark); font-size:9px; letter-spacing:.2em; font-weight:900; }
.zd-hero h2 { max-width:485px; margin:12px 0 9px; font-size:clamp(23px,3.5vw,32px); line-height:1.12; letter-spacing:-.05em; }
.zd-hero p { max-width:480px; margin:0; color:var(--zd-muted); font-size:12px; line-height:1.7; }
.zd-hero-tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:17px; }
.zd-hero-tags span { padding:6px 9px; border-radius:9px; color:var(--zd-green-dark); background:var(--zd-soft); font-size:10px; font-weight:800; }
.zd-hero-art { position:absolute; top:0; right:0; width:34%; height:100%; min-width:170px; color:var(--zd-green); display:grid; place-items:center; pointer-events:none; }
.zd-art-ring { position:absolute; aspect-ratio:1; width:166px; border-radius:50%; border:1px solid rgba(60,155,104,.15); }
.zd-ring-one { width:218px; }
.zd-ring-two { width:270px; }
.zd-art-lock { position:relative; display:grid; place-items:center; width:94px; height:94px; border-radius:31px; background:linear-gradient(135deg,rgba(60,155,104,.19),rgba(60,155,104,.06)); border:1px solid rgba(60,155,104,.20); box-shadow:0 20px 45px rgba(40,130,80,.10); transform:rotate(-7deg); }
.zd-art-lock svg { width:48px; height:48px; }
.zd-float-chip { position:absolute; padding:7px 10px; border:1px solid var(--zd-line); background:var(--zd-card); color:var(--zd-text); border-radius:10px; font-size:10px; font-weight:850; box-shadow:var(--zd-shadow); }
.zd-float-a { top:30px; right:20px; transform:rotate(5deg); }
.zd-float-b { bottom:28px; right:28px; transform:rotate(-4deg); }
.zd-tabs { display:flex; gap:5px; padding:5px; margin:15px 0 19px; border:1px solid var(--zd-line); border-radius:16px; background:var(--zd-card); overflow-x:auto; scrollbar-width:none; }
.zd-tabs::-webkit-scrollbar { display:none; }
.zd-tab { display:flex; align-items:center; justify-content:center; gap:7px; flex:1; min-width:max-content; padding:11px 13px; border:0; border-radius:11px; background:transparent; color:var(--zd-muted); font-size:11px !important; font-weight:850; cursor:pointer; transition:background .2s ease,color .2s ease,transform .2s ease; }
.zd-tab span { font-size:15px; line-height:1; }
.zd-tab.is-active { color:var(--zd-green-dark); background:var(--zd-soft); }
.zd-tab:active { transform:scale(.98); }
.zd-panel { animation:zd-panel-in .28s ease both; }
.zd-panel[hidden] { display:none !important; }
@keyframes zd-panel-in { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
.zd-section-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; margin:5px 2px 17px; }
.zd-section-heading h2 { margin:6px 0 5px; color:var(--zd-text); font-size:22px; font-weight:900; letter-spacing:-.045em; }
.zd-section-heading p { margin:0; color:var(--zd-muted); font-size:12px; line-height:1.6; }
.zd-private-label { flex-shrink:0; padding:8px 10px; border-radius:10px; color:var(--zd-green-dark); background:var(--zd-soft); font-size:10px; font-weight:850; }
.zd-stat-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:12px; }
.zd-stat-card { min-width:0; display:flex; flex-direction:column; align-items:flex-start; padding:18px; background:var(--zd-card); border:1px solid var(--zd-line); border-radius:19px; box-shadow:var(--zd-shadow); }
.zd-stat-icon { display:grid; place-items:center; width:34px; height:34px; margin-bottom:17px; border-radius:12px; font-size:18px; font-weight:900; }
.zd-icon-green { background:rgba(60,155,104,.12); color:var(--zd-green); }
.zd-icon-blue { background:rgba(59,130,246,.12); color:#5894ef; }
.zd-icon-orange { background:rgba(228,169,76,.15); color:#ce9433; }
.zd-stat-label { color:var(--zd-muted); font-size:10px; }
.zd-stat-card > strong { min-height:24px; margin:5px 0 12px; color:var(--zd-text); font-size:16px; letter-spacing:-.025em; overflow-wrap:anywhere; }
.zd-text-action { padding:0; border:0; background:transparent; color:var(--zd-green-dark); font-size:10px !important; font-weight:850; cursor:pointer; text-align:left; }
.zd-feature-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
.zd-feature-card { display:flex; align-items:center; gap:12px; min-width:0; padding:16px; background:var(--zd-card); border:1px solid var(--zd-line); border-radius:17px; color:var(--zd-text); text-align:left; cursor:pointer; transition:transform .18s ease,border-color .18s ease; }
.zd-feature-card:hover { transform:translateY(-2px); border-color:rgba(60,155,104,.35); }
.zd-feature-symbol { display:grid; place-items:center; flex:0 0 39px; width:39px; height:39px; border-radius:13px; background:var(--zd-soft); color:var(--zd-green-dark); font-size:20px; }
.zd-feature-blue { color:#5894ef; background:rgba(59,130,246,.12); }
.zd-feature-orange { color:#ce9433; background:rgba(228,169,76,.15); }
.zd-feature-red { color:#dd6c76; background:rgba(221,108,118,.13); }
.zd-feature-card > span:nth-child(2) { display:flex; flex:1; flex-direction:column; min-width:0; gap:4px; }
.zd-feature-card strong { color:var(--zd-text); font-size:12px; }
.zd-feature-card small { color:var(--zd-muted); font-size:10px; line-height:1.5; }
.zd-feature-arrow { color:var(--zd-muted); font-size:16px; }
.zd-footnote { margin:15px 3px 0; color:var(--zd-muted); font-size:10px; line-height:1.6; }
.zd-round-icon { display:grid; place-items:center; flex:0 0 43px; width:43px; height:43px; border-radius:15px; color:var(--zd-green-dark); background:var(--zd-soft); font-size:22px; }
.zd-blue-round { color:#5894ef; background:rgba(59,130,246,.12); }
.zd-orange-round { color:#ce9433; background:rgba(228,169,76,.15); }
.zd-red-round { color:#dd6c76; background:rgba(221,108,118,.13); }
.zd-setting-card { padding:20px; border:1px solid var(--zd-line); border-radius:21px; background:var(--zd-card); box-shadow:var(--zd-shadow); }
.zd-setting-row { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.zd-setting-copy strong, .zd-field-head strong, .zd-inline-form strong { display:block; color:var(--zd-text); font-size:13px; }
.zd-setting-copy p { margin:6px 0 8px; color:var(--zd-muted); font-size:11px; line-height:1.6; }
.zd-inline-status { color:var(--zd-green-dark); font-size:10px; font-weight:800; }
.zd-switch { position:relative; flex-shrink:0; display:inline-flex; width:49px; height:29px; }
.zd-switch input { position:absolute; width:1px; height:1px; opacity:0; }
.zd-switch > span { position:absolute; inset:0; border:1px solid var(--zd-line); border-radius:100px; background:rgba(120,130,125,.20); cursor:pointer; transition:background .2s ease; }
.zd-switch > span::after { content:""; position:absolute; top:3px; left:3px; width:21px; height:21px; border-radius:50%; background:white; box-shadow:0 1px 5px rgba(0,0,0,.18); transition:transform .2s ease; }
.zd-switch input:checked + span { background:var(--zd-green); border-color:var(--zd-green); }
.zd-switch input:checked + span::after { transform:translateX(20px); }
.zd-switch input:focus-visible + span { outline:3px solid rgba(60,155,104,.3); outline-offset:3px; }
.zd-divider { height:1px; margin:18px 0; background:var(--zd-line); }
.zd-field-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.zd-field-head > span { color:var(--zd-muted); font-size:10px; }
.zd-help { display:block; margin:5px 0 13px; color:var(--zd-muted); font-size:10px; line-height:1.6; }
.zd-circle-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.zd-check-card { position:relative; display:flex; gap:10px; align-items:flex-start; padding:13px; border:1px solid var(--zd-line); border-radius:14px; background:var(--zd-bg); cursor:pointer; transition:border-color .18s ease,background .18s ease; }
.zd-check-card input { position:absolute; opacity:0; width:1px; height:1px; }
.zd-check-mark { display:grid; place-items:center; flex:0 0 18px; width:18px; height:18px; margin-top:1px; border:1.5px solid var(--zd-line); border-radius:6px; color:transparent; font-size:12px; font-weight:900; }
.zd-check-card input:checked + .zd-check-mark { background:var(--zd-green); border-color:var(--zd-green); color:white; }
.zd-check-card:has(input:checked) { border-color:rgba(60,155,104,.40); background:var(--zd-soft); }
.zd-check-card input:focus-visible + .zd-check-mark { outline:3px solid rgba(60,155,104,.24); outline-offset:2px; }
.zd-check-card > span:last-child { min-width:0; display:flex; flex-direction:column; gap:4px; }
.zd-check-card strong { color:var(--zd-text); font-size:11px; }
.zd-check-card small { color:var(--zd-muted); font-size:10px; line-height:1.4; }
.zd-inline-form { display:flex; flex-direction:column; gap:11px; }
.zd-inline-form label { display:block; }
.zd-inline-form label .zd-help { margin-bottom:0; }
.zd-input-action { display:flex; gap:8px; }
.zd-input { width:100%; min-width:0; border:1px solid var(--zd-line); border-radius:12px; padding:11px 12px; color:var(--zd-text); background:var(--zd-bg); font-size:12px !important; outline:none; }
.zd-input:focus { border-color:rgba(60,155,104,.65); box-shadow:0 0 0 3px rgba(60,155,104,.10); }
.zd-input::placeholder { color:var(--zd-muted); opacity:.8; }
.zd-button { display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:11px 14px; border-radius:12px; border:1px solid transparent; font-size:11px !important; font-weight:850; cursor:pointer; transition:transform .16s ease,filter .16s ease,border-color .16s ease; }
.zd-button:active { transform:scale(.98); }
.zd-button-primary { color:#fff; background:#328b5d; box-shadow:0 5px 14px rgba(50,139,93,.16); }
html[data-theme="dark"] .zd-button-primary { color:#07180f; background:#66d698; }
.zd-button-primary:hover { filter:brightness(1.04); }
.zd-button-secondary { color:var(--zd-green-dark); background:var(--zd-soft); border-color:rgba(60,155,104,.19); }
.zd-button-danger { color:#c04f5b; background:rgba(221,108,118,.10); border-color:rgba(221,108,118,.23); }
.zd-chip-list { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.zd-chip { display:inline-flex; align-items:center; gap:8px; padding:7px 9px; border:1px solid var(--zd-line); border-radius:10px; background:var(--zd-soft); color:var(--zd-text); font-size:10px; }
.zd-chip button { display:grid; place-items:center; width:18px; height:18px; border:0; border-radius:6px; background:transparent; color:var(--zd-muted); cursor:pointer; }
.zd-form-note { margin-top:15px; padding:11px 12px; border-radius:12px; background:var(--zd-bg); color:var(--zd-muted); font-size:10px; line-height:1.6; }
.zd-verify-summary { display:flex; gap:13px; align-items:flex-start; padding:16px 17px; margin-bottom:12px; border:1px solid rgba(59,130,246,.16); background:rgba(59,130,246,.065); border-radius:17px; }
.zd-verify-mark { display:grid; place-items:center; flex:0 0 35px; width:35px; height:35px; color:#3c82dd; border-radius:12px; background:rgba(59,130,246,.12); font-size:18px; font-weight:900; }
.zd-verify-summary strong { color:var(--zd-text); font-size:12px; }
.zd-verify-summary p { margin:5px 0 0; color:var(--zd-muted); font-size:11px; line-height:1.6; }
.zd-verify-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.zd-verify-card { padding:18px; background:var(--zd-card); border:1px solid var(--zd-line); border-radius:19px; box-shadow:var(--zd-shadow); }
.zd-verify-card-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.zd-verify-icon { display:grid; place-items:center; width:39px; height:39px; border-radius:13px; color:var(--zd-green-dark); background:var(--zd-soft); font-size:23px; }
.zd-verify-icon-blue { color:#5894ef; background:rgba(59,130,246,.12); }
.zd-status-tag { padding:6px 8px; background:var(--zd-bg); border:1px solid var(--zd-line); border-radius:9px; color:var(--zd-muted); font-size:9px; font-weight:800; }
.zd-status-tag.is-pending { color:#b77b1a; background:rgba(228,169,76,.12); border-color:rgba(228,169,76,.22); }
.zd-verify-card h3 { margin:15px 0 7px; color:var(--zd-text); font-size:15px; letter-spacing:-.02em; }
.zd-verify-card p, .zd-verify-card li { color:var(--zd-muted); font-size:11px; line-height:1.7; }
.zd-verify-card p { margin:0 0 10px; }
.zd-verify-card ul { margin:0 0 16px; padding-left:16px; }
.zd-verify-card .zd-button { width:100%; }
.zd-verify-policy { display:flex; gap:10px; margin-top:12px; padding:13px; border:1px solid var(--zd-line); border-radius:14px; }
.zd-verify-policy > span { color:var(--zd-muted); }
.zd-verify-policy p { margin:0; color:var(--zd-muted); font-size:10px; line-height:1.7; }
.zd-verify-policy strong { color:var(--zd-text); }
.zd-hello-card { padding:clamp(18px,3.5vw,26px); background:var(--zd-card); border:1px solid var(--zd-line); border-radius:22px; box-shadow:var(--zd-shadow); }
.zd-hello-top { display:flex; justify-content:space-between; gap:12px; }
.zd-hello-top h3 { margin:6px 0 5px; color:var(--zd-text); font-size:17px; letter-spacing:-.03em; }
.zd-hello-top p { margin:0; color:var(--zd-muted); font-size:11px; line-height:1.6; }
.zd-hello-icon { display:grid; place-items:center; flex:0 0 43px; width:43px; height:43px; border-radius:15px; color:#ce9433; background:rgba(228,169,76,.15); font-size:24px; }
.zd-limit-options { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; margin:22px 0 18px; }
.zd-limit-btn { padding:13px 5px; border:1px solid var(--zd-line); border-radius:13px; color:var(--zd-text); background:var(--zd-bg); font-size:19px !important; font-weight:900; cursor:pointer; }
.zd-limit-btn small { display:block; margin-top:3px; color:var(--zd-muted); font-size:9px; font-weight:700; }
.zd-limit-btn.is-selected { color:var(--zd-green-dark); border-color:rgba(60,155,104,.5); background:var(--zd-soft); box-shadow:inset 0 0 0 1px rgba(60,155,104,.08); }
.zd-usage-row { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:8px; }
.zd-usage-row strong { color:var(--zd-text); font-size:11px; }
.zd-usage-row span { color:var(--zd-muted); font-size:9px; text-align:right; }
.zd-meter { height:8px; overflow:hidden; border-radius:99px; background:var(--zd-bg); border:1px solid var(--zd-line); }
.zd-meter span { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#3c9b68,#82dca5); transition:width .25s ease; }
.zd-send-demo { width:100%; margin-top:19px; }
.zd-demo-feedback { margin:10px 0 0; color:var(--zd-muted); font-size:10px; line-height:1.6; text-align:center; }
.zd-tip-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:12px; }
.zd-tip-grid article { padding:15px; border:1px solid var(--zd-line); background:var(--zd-card); border-radius:16px; }
.zd-tip-grid article > span { color:var(--zd-green-dark); font-size:10px; letter-spacing:.12em; font-weight:900; }
.zd-tip-grid strong { display:block; margin:10px 0 5px; color:var(--zd-text); font-size:11px; }
.zd-tip-grid p { margin:0; color:var(--zd-muted); font-size:10px; line-height:1.6; }
.zd-safety-banner { display:flex; gap:13px; align-items:center; margin-bottom:12px; padding:16px; border-radius:17px; border:1px solid rgba(221,108,118,.18); background:rgba(221,108,118,.07); }
.zd-safety-shield { display:grid; place-items:center; flex:0 0 40px; height:40px; border-radius:14px; color:#d76571; background:rgba(221,108,118,.12); font-size:21px; }
.zd-safety-banner strong { color:var(--zd-text); font-size:12px; }
.zd-safety-banner p { margin:5px 0 0; color:var(--zd-muted); font-size:10px; line-height:1.6; }
.zd-safety-form { display:flex; flex-direction:column; gap:13px; }
.zd-safety-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.zd-field { display:flex; flex-direction:column; gap:7px; min-width:0; }
.zd-field > span { color:var(--zd-text); font-size:11px; font-weight:800; }
.zd-safety-form > .zd-button { align-self:flex-start; }
.zd-list-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.zd-list-heading strong { color:var(--zd-text); font-size:12px; }
.zd-list-heading p { margin:4px 0 0; color:var(--zd-muted); font-size:10px; }
.zd-count-pill { display:grid; place-items:center; flex:0 0 27px; height:27px; border-radius:9px; color:var(--zd-muted); background:var(--zd-bg); border:1px solid var(--zd-line); font-size:10px; font-weight:900; }
.zd-safety-list { display:flex; flex-direction:column; gap:7px; margin-top:11px; }
.zd-empty-row { padding:12px; border:1px dashed var(--zd-line); border-radius:12px; color:var(--zd-muted); font-size:10px; }
.zd-safety-row { display:flex; align-items:center; gap:10px; padding:11px; border:1px solid var(--zd-line); border-radius:12px; background:var(--zd-bg); }
.zd-safety-row > div { flex:1; min-width:0; }
.zd-safety-row strong { display:block; color:var(--zd-text); font-size:11px; overflow-wrap:anywhere; }
.zd-safety-row small { display:block; margin-top:3px; color:var(--zd-muted); font-size:10px; }
.zd-safety-row button { flex-shrink:0; border:1px solid var(--zd-line); background:var(--zd-card); color:var(--zd-muted); border-radius:9px; padding:7px 9px; font-size:10px !important; font-weight:800; cursor:pointer; }
.zd-danger-zone { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:12px; padding:16px; border:1px solid rgba(221,108,118,.22); border-radius:17px; background:rgba(221,108,118,.055); }
.zd-danger-zone strong { color:var(--zd-text); font-size:11px; }
.zd-danger-zone p { margin:5px 0 0; max-width:460px; color:var(--zd-muted); font-size:10px; line-height:1.6; }
.zd-toast { position:fixed; z-index:99998; left:50%; bottom:calc(94px + env(safe-area-inset-bottom,0px)); max-width:min(90vw,420px); padding:11px 15px; border-radius:12px; color:#fff; background:#202d26; box-shadow:0 12px 30px rgba(0,0,0,.22); font-size:11px; line-height:1.5; opacity:0; visibility:hidden; transform:translate(-50%,10px); transition:opacity .2s ease,transform .2s ease,visibility .2s ease; pointer-events:none; }
.zd-toast.is-visible { opacity:1; visibility:visible; transform:translate(-50%,0); }
html[data-theme="dark"] .zd-toast { color:#0e1a13; background:#d9f7e4; }
@media (max-width:760px) {
  #datingView { width:100%; padding:16px 0 34px; }
  .zd-hero-art { width:27%; min-width:115px; opacity:.78; }
  .zd-hero-copy { max-width:76%; }
  .zd-art-lock { width:72px; height:72px; border-radius:24px; }
  .zd-art-lock svg { width:37px; height:37px; }
  .zd-ring-one { width:160px; }.zd-ring-two { width:210px; }
  .zd-float-a { right:8px; top:20px; }.zd-float-b { right:10px; bottom:20px; }
  .zd-stat-grid { gap:8px; }
  .zd-stat-card { padding:13px; border-radius:16px; }
  .zd-stat-icon { margin-bottom:12px; }
  .zd-stat-card > strong { font-size:13px; }
  .zd-tab { padding:10px 11px; }
}
@media (max-width:520px) {
  .zd-topline { align-items:flex-start; gap:8px; }
  .zd-demo-pill { padding:7px 8px; font-size:9px; }
  .zd-title { font-size:29px; }
  .zd-subtitle { max-width:265px; font-size:11px; }
  .zd-age-note { padding:11px; gap:9px; border-radius:14px; }
  .zd-hero { min-height:220px; padding:21px 18px; border-radius:21px; }
  .zd-hero-copy { max-width:100%; padding-right:0; }
  .zd-hero-art { right:-22px; top:68px; width:130px; min-width:0; opacity:.23; }
  .zd-hero h2 { max-width:300px; font-size:26px; }
  .zd-hero p { max-width:300px; }
  .zd-hero-tags { max-width:270px; }
  .zd-tabs { gap:3px; margin-top:12px; border-radius:14px; }
  .zd-tab { padding:10px 12px; font-size:10px !important; }
  .zd-tab span { display:none; }
  .zd-section-heading { align-items:flex-start; }
  .zd-section-heading h2 { font-size:20px; }
  .zd-section-heading p { font-size:11px; }
  .zd-stat-grid { grid-template-columns:1fr; }
  .zd-stat-card { display:grid; grid-template-columns:36px 1fr; grid-template-rows:auto auto auto; column-gap:11px; align-items:center; }
  .zd-stat-icon { grid-row:1 / span 3; margin:0; }
  .zd-stat-label { align-self:end; }
  .zd-stat-card > strong { min-height:0; margin:3px 0 7px; }
  .zd-text-action { align-self:start; }
  .zd-feature-grid, .zd-circle-grid, .zd-verify-grid, .zd-tip-grid { grid-template-columns:1fr; }
  .zd-feature-card { padding:14px; }
  .zd-setting-card { padding:14px; border-radius:18px; }
  .zd-check-card { padding:12px; }
  .zd-input-action { flex-direction:column; }
  .zd-input-action .zd-button { width:100%; }
  .zd-verify-card { padding:15px; }
  .zd-limit-options { gap:6px; }
  .zd-limit-btn { font-size:17px !important; padding:12px 2px; }
  .zd-usage-row { align-items:flex-start; flex-direction:column; gap:4px; }
  .zd-usage-row span { text-align:left; }
  .zd-safety-form-grid { grid-template-columns:1fr; }
  .zd-safety-form > .zd-button { width:100%; }
  .zd-danger-zone { align-items:flex-start; flex-direction:column; }
  .zd-danger-zone .zd-button { width:100%; }
}
@media (prefers-reduced-motion: reduce) {
  #datingView *, #datingView *::before, #datingView *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}


/* Restored original ZenZ Create composer styles. */
/* =========================================================
   ZENZ CREATE — native post composer + LockStar-style styling
   Scoped under .zc-* so it does not alter existing ZenZ screens.
========================================================= */
.zc-overlay[hidden],
.zc-stage[hidden],
.zc-sheet-backdrop[hidden],
.zc-media-wrap[hidden],
.zc-metadata-badges[hidden],
.zc-emoji-tray[hidden] { display: none !important; }
.zc-overlay {
    position: fixed;
    inset: 0;
    z-index: 50000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(15, 19, 17, .43);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    color: #141715;
    overscroll-behavior: contain;
}
.zc-dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(100%, 760px);
    height: min(920px, calc(100dvh - 36px));
    min-height: 0;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 25px;
    background: #fff;
    box-shadow: 0 30px 90px rgba(0,0,0,.24);
    color: #161816;
    isolation: isolate;
}
.zc-topbar {
    position: relative;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 94px;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    min-height: 72px;
    padding: 0 18px;
    border-bottom: 1px solid rgba(0,0,0,.055);
    background: rgba(255,255,255,.97);
    z-index: 2;
}
.zc-icon-btn {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: #151815;
    cursor: pointer;
    transition: background .18s ease, transform .18s ease;
    -webkit-tap-highlight-color: transparent;
}
.zc-icon-btn:hover { background: #f1f3f1; }
.zc-icon-btn:active { transform: scale(.92); }
.zc-icon-btn svg { width: 27px; height: 27px; }
.zc-top-title { overflow: hidden; text-align: center; font-size: 19px; line-height: 1.2; font-weight: 800; letter-spacing: -.035em; white-space: nowrap; text-overflow: ellipsis; }
.zc-next-btn {
    min-width: 84px;
    height: 44px;
    border: 0;
    border-radius: 14px;
    background: #287b58;
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 11px rgba(39,124,89,.17);
    transition: transform .18s ease, background .18s ease;
    -webkit-tap-highlight-color: transparent;
}
.zc-next-btn:hover { background: #216b4b; }
.zc-next-btn:active { transform: scale(.97); }
.zc-stage { flex: 1 1 auto; min-height: 0; overflow: hidden; background: #fff; }
.zc-edit-stage { display: flex; flex-direction: column; }
.zc-scroll-area { min-height: 0; flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #d7ddd8 transparent; }
.zc-author-row { display: flex; align-items: center; gap: 13px; padding: 24px 25px 15px; }
.zc-author-avatar { display: grid; place-items: center; flex: 0 0 auto; width: 58px; height: 58px; border-radius: 50%; background: #e2f2e8; font-size: 27px; box-shadow: inset 0 0 0 1px rgba(39,124,89,.06); }
.zc-author-details { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; }
.zc-author-details strong { color: #171a17; font-size: 17px; line-height: 1.2; font-weight: 800; letter-spacing: -.025em; }
.zc-author-details span { color: #858b86; font-size: 11px; }
.zc-audience-quick { display: inline-flex; align-items: center; gap: 6px; max-width: 155px; min-height: 32px; padding: 0 9px; border: 1px solid #e1e7e2; border-radius: 10px; background: #f8faf8; color: #4c6254; font: inherit; font-size: 10px; font-weight: 750; cursor: pointer; }
.zc-audience-quick > svg:first-child { width: 14px; height: 14px; flex: 0 0 auto; }
.zc-audience-quick span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.zc-chevron { width: 13px; height: 13px; flex: 0 0 auto; }
.zc-context-row { display: flex; align-items: center; gap: 8px; overflow-x: auto; padding: 6px 25px 15px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.zc-context-row::-webkit-scrollbar { display: none; }
.zc-context-chip { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; min-height: 37px; padding: 0 13px; border: 1px solid #e0e5e1; border-radius: 999px; background: #fff; color: #292e2a; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; transition: background .18s ease, border-color .18s ease, transform .18s ease; }
.zc-context-chip:hover, .zc-context-chip.has-value { background: #f0f7f2; border-color: #bdd9c7; color: #2a6b4b; }
.zc-context-chip:active { transform: scale(.97); }
.zc-context-chip svg { width: 17px; height: 17px; flex: 0 0 auto; }
.zc-post-canvas { --zc-font-size: 17px; --zc-radius: 14px; --zc-text-align: left; --zc-font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; margin: 0 25px; border: 1px solid transparent; border-radius: 18px; overflow: hidden; background: #fff; color: #171a17; transition: background .2s ease, border-color .2s ease; }
.zc-caption-frame { position: relative; padding: 3px 0 0; background: transparent; transition: padding .2s ease, background .2s ease; }
.zc-caption { display: block; width: 100%; min-height: 120px; max-height: 340px; resize: vertical; padding: 9px 0 5px; border: 0; outline: 0; border-radius: 0; background: transparent; color: inherit; font-family: var(--zc-font-family); font-size: var(--zc-font-size); font-weight: 450; line-height: 1.55; text-align: var(--zc-text-align); white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
.zc-caption::placeholder { color: #777d78; opacity: 1; }
.zc-caption:focus-visible { outline: none; }
.zc-caption-foot { display: flex; align-items: center; justify-content: space-between; min-height: 24px; color: #9aa09b; font-size: 10px; }
.zc-emoji-toggle { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: #5e8b6e; font-size: 20px; cursor: pointer; }
.zc-emoji-tray { display: flex; flex-wrap: wrap; gap: 5px; padding: 7px 0 4px; }
.zc-emoji-tray button { display: grid; place-items: center; width: 35px; height: 35px; border: 0; border-radius: 10px; background: #f3f6f3; font-size: 19px; cursor: pointer; }
.zc-attach-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 11px 0 15px; }
.zc-add-media, .zc-customize-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 0 13px; border: 1px solid #e1e7e2; border-radius: 12px; background: #f8faf8; color: #314238; font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; transition: background .18s ease, transform .18s ease, border-color .18s ease; -webkit-tap-highlight-color: transparent; }
.zc-add-media:hover, .zc-customize-btn:hover { background: #eef6f0; border-color: #c6ddce; }
.zc-add-media:active, .zc-customize-btn:active { transform: scale(.98); }
.zc-add-media svg, .zc-customize-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
.zc-customize-btn { color: #276c4b; background: #eff7f1; border-color: #dcece0; }
.zc-new-badge { padding: 3px 5px; border-radius: 5px; background: #d5eadb; color: #2e6b49; font-size: 8px; letter-spacing: .025em; }
.zc-media-wrap { padding: 0 0 14px; }
.zc-media-heading { display: flex; align-items: center; justify-content: space-between; margin: 2px 0 9px; color: #717972; font-size: 11px; font-weight: 800; }
.zc-media-heading button { padding: 5px 7px; border: 0; border-radius: 7px; background: #eef6f0; color: #2c704c; font: inherit; font-size: 10px; font-weight: 800; cursor: pointer; }
.zc-media-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.zc-media-grid.layout-stack { grid-template-columns: minmax(0,1fr); }
.zc-media-grid.layout-carousel { display: flex; overflow-x: auto; padding-bottom: 3px; scroll-snap-type: x mandatory; }
.zc-media-grid.layout-carousel .zc-media-card { flex: 0 0 84%; scroll-snap-align: start; }
.zc-media-card { position: relative; min-width: 0; aspect-ratio: 1 / 1; overflow: hidden; border: 2px solid transparent; border-radius: var(--zc-radius); background: #edf0ed; cursor: pointer; transition: border-color .16s ease, transform .16s ease; }
.zc-media-card:only-child { aspect-ratio: 16 / 9; }
.zc-media-card.is-selected { border-color: #2d8159; box-shadow: 0 0 0 2px rgba(45,129,89,.15); }
.zc-media-card img, .zc-media-card video { display: block; width: 100%; height: 100%; object-fit: var(--zc-media-fit, cover); }
.zc-media-card .zc-media-name { position: absolute; right: 6px; bottom: 6px; left: 6px; overflow: hidden; padding: 5px 7px; border-radius: 7px; background: rgba(14,18,15,.62); color: white; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
.zc-media-card .zc-media-actions { position: absolute; top: 7px; right: 7px; display: flex; gap: 5px; }
.zc-media-action { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; background: rgba(16,21,18,.68); color: white; cursor: pointer; backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.zc-media-action svg { width: 15px; height: 15px; }
.zc-metadata-badges { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 0 14px; }
.zc-metadata-badge { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 6px 9px; border-radius: 9px; background: rgba(39,124,89,.09); color: #35694d; font-size: 10px; font-weight: 750; }
.zc-metadata-badge button { border: 0; background: transparent; color: inherit; font-size: 14px; cursor: pointer; }
.zc-composer-note { display: flex; align-items: flex-start; gap: 8px; margin: 7px 25px 18px; padding: 11px 12px; border: 1px solid #e7efe8; border-radius: 12px; background: #f8fbf8; color: #76837a; font-size: 10px; line-height: 1.5; }
.zc-composer-note svg { width: 15px; height: 15px; flex: 0 0 auto; color: #4a8a62; }
.zc-bottom-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: 0 0 auto; min-height: 70px; padding: 12px 24px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid #e5e7e5; background: rgba(255,255,255,.97); }
.zc-audience-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; max-width: 210px; padding: 0 12px; border: 0; border-radius: 999px; background: #eaf0eb; color: #273a2e; font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; }
.zc-audience-icon { display: grid; place-items: center; width: 20px; height: 20px; font-size: 18px; line-height: 1; }
.zc-bottom-hint { color: #9aa09b; font-size: 10px; text-align: right; }
.zc-hidden-input { display: none !important; }

/* The post's visual identity changes without turning the caption into a poster. */
.zc-post-canvas[data-zc-theme="sage"] { padding: 14px 14px 0; border-color: #dcece0; background: #edf6ef; color: #234330; }
.zc-post-canvas[data-zc-theme="sage"] .zc-caption-frame { padding: 0 0 4px; }
.zc-post-canvas[data-zc-theme="lavender"] { padding: 14px 14px 0; border-color: #e9def6; background: #f5effb; color: #453354; }
.zc-post-canvas[data-zc-theme="lavender"] .zc-caption-frame { padding: 0 0 4px; }
.zc-post-canvas[data-zc-theme="midnight"] { padding: 14px 14px 0; border-color: #29332e; background: #19231e; color: #f1f7f2; }
.zc-post-canvas[data-zc-theme="midnight"] .zc-caption::placeholder { color: #a3b3a8; }
.zc-post-canvas[data-zc-theme="midnight"] .zc-caption-foot { color: #a3b3a8; }
.zc-post-canvas[data-zc-theme="midnight"] .zc-attach-toolbar { border-color: rgba(255,255,255,.08); }
.zc-post-canvas[data-zc-theme="midnight"] .zc-add-media, .zc-post-canvas[data-zc-theme="midnight"] .zc-customize-btn { background: #26392d; border-color: #385442; color: #e7f5ea; }
.zc-post-canvas[data-zc-theme="midnight"] .zc-new-badge { background: #385442; color: #f0fff4; }
.zc-post-canvas[data-zc-theme="midnight"] .zc-media-heading { color: #c7d7cb; }
.zc-post-canvas[data-zc-theme="midnight"] .zc-media-heading button { background: #314739; color: #e9f7ed; }
.zc-post-canvas[data-zc-theme="midnight"] .zc-metadata-badge { background: rgba(255,255,255,.1); color: #dcefe1; }
.zc-post-canvas[data-zc-theme="sage"] .zc-attach-toolbar, .zc-post-canvas[data-zc-theme="lavender"] .zc-attach-toolbar { padding-bottom: 14px; }
.zc-post-canvas[data-zc-font="serif"] .zc-caption { font-family: Georgia, "Times New Roman", serif; }
.zc-post-canvas[data-zc-font="rounded"] .zc-caption { font-family: "Nunito", "Trebuchet MS", sans-serif; font-weight: 650; }
.zc-post-canvas[data-zc-font="system"] .zc-caption { font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }

/* Preview step */
.zc-preview-stage { overflow-y: auto; padding: 24px clamp(18px,4vw,42px) 30px; background: #f7f9f7; }
.zc-preview-intro { margin: 0 0 18px; }
.zc-preview-kicker { color: #438466; font-size: 9px; font-weight: 900; letter-spacing: .18em; }
.zc-preview-intro h2 { margin: 6px 0; color: #202621; font-size: 22px; letter-spacing: -.04em; }
.zc-preview-intro p { margin: 0; color: #858d87; font-size: 12px; line-height: 1.5; }
.zc-preview-mount { width: min(100%, 560px); margin: 0 auto; }
.zc-preview-card { overflow: hidden; border: 1px solid #e5e9e5; border-radius: 20px; background: #fff; box-shadow: 0 8px 30px rgba(26,45,32,.07); }
.zc-preview-card-head { display: flex; align-items: center; gap: 10px; padding: 15px 16px 12px; }
.zc-preview-avatar { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #e1f2e7; font-size: 20px; }
.zc-preview-author { min-width: 0; flex: 1; }
.zc-preview-author strong { display: block; color: #232823; font-size: 12px; font-weight: 800; }
.zc-preview-author span { display: block; margin-top: 3px; color: #8d958e; font-size: 10px; }
.zc-preview-audience { color: #76867a; font-size: 10px; font-weight: 750; }
.zc-preview-caption { padding: 2px 16px 15px; color: #222722; font-size: var(--zc-font-size,17px); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; text-align: var(--zc-text-align,left); font-family: var(--zc-font-family,inherit); }
.zc-preview-caption:empty { display: none; }
.zc-preview-tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 13px; }
.zc-preview-tag { padding: 5px 8px; border-radius: 8px; background: #f0f5f1; color: #56715e; font-size: 10px; }
.zc-preview-media { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2px; overflow: hidden; }
.zc-preview-media.layout-stack { grid-template-columns: minmax(0,1fr); }
.zc-preview-media.layout-carousel { display: flex; overflow-x: auto; }
.zc-preview-media.layout-carousel img, .zc-preview-media.layout-carousel video { flex: 0 0 84%; }
.zc-preview-media img, .zc-preview-media video { display: block; width: 100%; max-height: 440px; aspect-ratio: 1 / 1; object-fit: cover; background: #e9eee9; }
.zc-preview-media:has(> :only-child) { grid-template-columns: minmax(0,1fr); }
.zc-preview-media:has(> :only-child) img, .zc-preview-media:has(> :only-child) video { aspect-ratio: 16 / 9; }
.zc-preview-actions { display: flex; align-items: center; justify-content: space-around; gap: 10px; padding: 13px 12px; border-top: 1px solid #edf0ed; color: #738076; font-size: 10px; font-weight: 700; }
.zc-preview-actions span { display: inline-flex; align-items: center; gap: 5px; }
.zc-preview-actions svg { width: 15px; height: 15px; }
.zc-back-edit { display: block; margin: 18px auto 12px; min-height: 40px; padding: 0 16px; border: 1px solid #dce4dd; border-radius: 12px; background: #fff; color: #3a5b45; font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; }
.zc-preview-privacy { text-align: center; color: #919991; font-size: 10px; }

/* Slide-up sheets */
.zc-sheet-backdrop { position: absolute; inset: 0; z-index: 20; display: flex; align-items: flex-end; justify-content: center; background: rgba(15,21,17,.42); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); animation: zcFade .16s ease both; }
.zc-sheet { width: min(100%, 580px); max-height: min(88%, 760px); display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(255,255,255,.85); border-bottom: 0; border-radius: 25px 25px 0 0; background: #fff; color: #202520; box-shadow: 0 -18px 55px rgba(0,0,0,.17); padding-bottom: env(safe-area-inset-bottom); animation: zcSheetUp .28s cubic-bezier(.2,.8,.2,1) both; }
.zc-sheet-grabber { width: 38px; height: 4px; flex: 0 0 auto; margin: 9px auto 0; border-radius: 9px; background: #d9ded9; }
.zc-sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 17px 21px 12px; }
.zc-sheet-kicker { color: #438466; font-size: 8px; font-weight: 900; letter-spacing: .16em; }
.zc-sheet-head h2 { margin: 5px 0 4px; font-size: 19px; letter-spacing: -.035em; }
.zc-sheet-head p { margin: 0; color: #838b84; font-size: 11px; line-height: 1.45; }
.zc-sheet-close { flex: 0 0 auto; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #f1f4f1; color: #37433a; font-size: 25px; line-height: 1; cursor: pointer; }
.zc-sheet-body { min-height: 0; overflow-y: auto; padding: 0 21px 12px; }
.zc-setting-group { padding: 14px 0; border-top: 1px solid #eef1ee; }
.zc-setting-label, .zc-setting-label-row { margin-bottom: 10px; color: #333b34; font-size: 11px; font-weight: 850; }
.zc-setting-label-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.zc-setting-label-row output { color: #64816b; font-size: 10px; font-weight: 800; }
.zc-theme-options { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.zc-theme-option { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 8px 5px; border: 1px solid #e3e8e3; border-radius: 13px; background: #fff; color: #58645b; font: inherit; font-size: 10px; cursor: pointer; }
.zc-theme-option.active { border-color: #3c9262; box-shadow: 0 0 0 2px rgba(60,146,98,.11); color: #246c45; background: #f6fbf7; }
.zc-theme-swatch { display: block; width: 100%; height: 43px; border-radius: 8px; border: 1px solid rgba(0,0,0,.05); }
.zc-swatch-classic { background: linear-gradient(135deg,#fff,#f4f6f4); }
.zc-swatch-sage { background: linear-gradient(135deg,#e6f2e8,#c9e2d0); }
.zc-swatch-lavender { background: linear-gradient(135deg,#f7f0fc,#e3d4f2); }
.zc-swatch-midnight { background: linear-gradient(135deg,#263b2e,#111a14); }
.zc-segmented { display: flex; gap: 5px; padding: 4px; border-radius: 12px; background: #f0f3f0; }
.zc-segmented button { flex: 1 1 0; min-width: 0; min-height: 35px; padding: 0 7px; border: 0; border-radius: 9px; background: transparent; color: #6e796f; font: inherit; font-size: 10px; font-weight: 750; cursor: pointer; }
.zc-segmented button.active { background: #fff; color: #285b3a; box-shadow: 0 2px 7px rgba(20,40,24,.07); }
.zc-setting-group input[type="range"] { display: block; width: 100%; accent-color: #39865a; }
.zc-sheet-actions { display: flex; align-items: center; gap: 9px; padding: 12px 21px 16px; border-top: 1px solid #edf0ed; background: #fff; }
.zc-reset-style, .zc-apply-style { min-height: 43px; padding: 0 15px; border-radius: 12px; font: inherit; font-size: 11px; font-weight: 850; cursor: pointer; }
.zc-reset-style { flex: 0 0 auto; border: 1px solid #e0e6e0; background: white; color: #59675c; }
.zc-apply-style { flex: 1 1 auto; border: 0; background: #287b58; color: white; box-shadow: 0 4px 12px rgba(39,124,89,.16); }
.zc-meta-form { display: grid; gap: 12px; padding-top: 4px; }
.zc-form-label { display: grid; gap: 7px; color: #536057; font-size: 10px; font-weight: 800; }
.zc-form-input, .zc-form-select { width: 100%; min-height: 43px; padding: 0 12px; border: 1px solid #dfe6df; border-radius: 12px; outline: 0; background: #fbfdfb; color: #1e281f; font: inherit; font-size: 12px; user-select: text; -webkit-user-select: text; }
.zc-form-input:focus, .zc-form-select:focus { border-color: #80b595; box-shadow: 0 0 0 3px rgba(39,124,89,.09); }
.zc-choice-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.zc-choice-chip { min-height: 33px; padding: 0 11px; border: 1px solid #e0e7e0; border-radius: 999px; background: #f8faf8; color: #5f6c61; font: inherit; font-size: 10px; font-weight: 750; cursor: pointer; }
.zc-choice-chip.active { border-color: #a5cfb1; background: #e9f5ec; color: #276a43; }
.zc-toast { position: absolute; z-index: 40; left: 50%; bottom: calc(82px + env(safe-area-inset-bottom)); max-width: calc(100% - 30px); padding: 11px 15px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: #1d2921; color: #fff; font-size: 11px; line-height: 1.45; text-align: center; box-shadow: 0 9px 25px rgba(0,0,0,.19); transform: translate(-50%, 10px); opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; }
.zc-toast.show { opacity: 1; transform: translate(-50%, 0); }
@keyframes zcFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes zcSheetUp { from { transform: translateY(24px); opacity: .7; } to { transform: translateY(0); opacity: 1; } }

/* Published posts created by this local prototype */
.zc-published-post .zc-post-canvas { margin: 10px 0 0; border-radius: 14px; }
.zc-published-post .zc-caption-frame { padding: 12px 12px 4px; }
.zc-published-post .zc-caption { min-height: 0; max-height: none; resize: none; padding: 0 0 5px; }
.zc-published-post .zc-attach-toolbar { padding: 8px 0; }
.zc-published-post .zc-add-media, .zc-published-post .zc-customize-btn, .zc-published-post .zc-caption-foot { display: none !important; }
.zc-published-post .zc-media-wrap { padding: 0 0 8px; }
.zc-published-post .zc-media-heading { display: none; }
.zc-published-post .zc-media-grid { gap: 2px; }
.zc-published-post .zc-media-grid .zc-media-card { border-radius: 0; border: 0; aspect-ratio: 1 / 1; }
.zc-published-post .zc-media-grid .zc-media-card:only-child { aspect-ratio: 16 / 9; }
.zc-published-post .zc-media-actions { display: none !important; }
.zc-published-post .zc-composer-note { display: none; }
.zc-published-post .zc-post-canvas[data-zc-theme="sage"] { padding-top: 1px; }
.zc-published-post .zc-post-canvas[data-zc-theme="lavender"] { padding-top: 1px; }
.zc-published-post .zc-post-canvas[data-zc-theme="midnight"] { padding-top: 1px; }
.zc-published-post .zc-post-canvas[data-zc-theme="midnight"] .zc-caption { color: #f1f7f2; }
.zc-published-post .zc-post-canvas[data-zc-theme="sage"] .zc-caption { color: #234330; }
.zc-published-post .zc-post-canvas[data-zc-theme="lavender"] .zc-caption { color: #453354; }
.zc-published-post .zc-meta-line { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin: 8px 0 0; color: #7d8b7f; font-size: 10px; }
.zc-published-post .zc-meta-line span { padding: 4px 7px; border-radius: 7px; background: rgba(39,124,89,.08); }
.zc-published-post .zc-post-note { display: flex; align-items: center; gap: 5px; margin-top: 7px; color: #8b928b; font-size: 9px; }
.zc-published-post .zc-post-note svg { width: 12px; height: 12px; }
.zc-published-post .post-media { display: none; }
.zc-published-post .post-actions .post-action.is-liked { color: #287b58; font-weight: 800; }
.zc-published-post .post-actions .post-action.is-liked svg { fill: rgba(40,123,88,.15); }

@media (max-width: 680px) {
    .zc-overlay { display: block; padding: 0; background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
    .zc-dialog { width: 100%; height: 100dvh; min-height: 0; border: 0; border-radius: 0; box-shadow: none; }
    .zc-topbar { grid-template-columns: 42px minmax(0,1fr) 78px; gap: 6px; min-height: 66px; padding: 0 12px; padding-top: env(safe-area-inset-top); }
    .zc-icon-btn { width: 39px; height: 39px; }
    .zc-icon-btn svg { width: 25px; height: 25px; }
    .zc-top-title { font-size: 17px; }
    .zc-next-btn { min-width: 72px; height: 41px; border-radius: 12px; font-size: 12px; }
    .zc-author-row { padding: 20px 20px 12px; gap: 11px; }
    .zc-author-avatar { width: 53px; height: 53px; font-size: 24px; }
    .zc-author-details strong { font-size: 15px; }
    .zc-author-details span { font-size: 10px; }
    .zc-audience-quick { max-width: 115px; min-height: 30px; padding: 0 7px; gap: 4px; font-size: 9px; }
    .zc-audience-quick > svg:first-child { width: 12px; height: 12px; }
    .zc-context-row { padding: 6px 20px 15px; gap: 7px; }
    .zc-context-chip { min-height: 35px; padding: 0 11px; font-size: 10px; }
    .zc-context-chip svg { width: 15px; height: 15px; }
    .zc-post-canvas { margin: 0 20px; }
    .zc-caption { min-height: 118px; font-size: var(--zc-font-size); }
    .zc-attach-toolbar { gap: 7px; padding-top: 9px; }
    .zc-add-media, .zc-customize-btn { min-height: 36px; padding: 0 10px; font-size: 10px; }
    .zc-composer-note { margin: 6px 20px 16px; padding: 9px 10px; font-size: 9px; }
    .zc-bottom-bar { min-height: 66px; padding: 10px 20px calc(10px + env(safe-area-inset-bottom)); }
    .zc-audience-btn { min-height: 36px; font-size: 10px; }
    .zc-bottom-hint { max-width: 145px; font-size: 9px; }
    .zc-preview-stage { padding: 21px 16px 28px; }
    .zc-sheet { max-height: min(90%, 780px); }
    .zc-sheet-head { padding: 16px 18px 11px; }
    .zc-sheet-body { padding-right: 18px; padding-left: 18px; }
    .zc-sheet-actions { padding: 11px 18px calc(13px + env(safe-area-inset-bottom)); }
}
@media (max-width: 380px) {
    .zc-author-row { padding-left: 15px; padding-right: 15px; }
    .zc-context-row { padding-left: 15px; padding-right: 15px; }
    .zc-post-canvas { margin-left: 15px; margin-right: 15px; }
    .zc-composer-note { margin-left: 15px; margin-right: 15px; }
    .zc-author-avatar { width: 47px; height: 47px; }
    .zc-audience-quick { max-width: 102px; }
    .zc-bottom-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .zc-overlay *, .zc-overlay *::before, .zc-overlay *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Privacy selector rows used by the composer bottom sheet */
.zc-audience-choice { display: flex; align-items: center; gap: 11px; width: 100%; padding: 12px; border: 1px solid #e4e9e4; border-radius: 14px; background: #fff; cursor: pointer; transition: border-color .16s ease, background .16s ease; }
.zc-audience-choice + .zc-audience-choice { margin-top: 8px; }
.zc-audience-choice.active { border-color: #8fc2a0; background: #f4faf5; }
.zc-audience-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.zc-audience-choice-icon { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto; border-radius: 12px; background: #edf4ee; color: #386c49; font-size: 20px; }
.zc-audience-choice-text { display: grid; gap: 4px; flex: 1 1 auto; min-width: 0; }
.zc-audience-choice-text strong { color: #2b372d; font-size: 12px; }
.zc-audience-choice-text small { color: #879088; font-size: 10px; line-height: 1.4; }
.zc-audience-radio { display: grid; place-items: center; width: 18px; height: 18px; flex: 0 0 auto; border: 1.5px solid #c8d1c9; border-radius: 50%; }
.zc-audience-choice.active .zc-audience-radio { border: 5px solid #2d8055; }
.zc-meta-help { margin: 0; color: #8b948c; font-size: 10px; line-height: 1.5; }
.zc-preview-canvas .zc-preview-caption { margin: 0; padding: 12px 13px 16px; font-size: var(--zc-font-size,17px); font-family: var(--zc-font-family,inherit); text-align: var(--zc-text-align,left); }
.zc-preview-canvas[data-zc-theme="sage"] .zc-preview-caption { color: #234330; }
.zc-preview-canvas[data-zc-theme="lavender"] .zc-preview-caption { color: #453354; }
.zc-preview-canvas[data-zc-theme="midnight"] .zc-preview-caption { color: #f1f7f2; }
.zc-preview-canvas[data-zc-theme="midnight"] .zc-preview-tags .zc-preview-tag { background: rgba(255,255,255,.1); color: #dcefe1; }
.zc-published-post .zc-preview-caption { white-space: pre-wrap; overflow-wrap: anywhere; }
body.zc-composer-open { overflow: hidden !important; }
html[data-theme="dark"] .zc-overlay { color: #161816; }
/* Final mobile polish: avoid the native textarea resize grip and keep attachment previews image-first. */
.zc-caption { resize: none; }
.zc-media-name { display: none; }


/* =========================================================
   ZENZ P1 PROFILE — Studio, View Mirror Lite, Collections
   Additive module: existing styles above remain untouched.
========================================================= */
body.zp-profile-open #momentsSection,
body.zp-profile-open .topic-section,
body.zp-profile-open .feed-section,
body.zp-profile-open #friendsView,
body.zp-profile-open #datingView { display:none !important; }
body.zp-profile-open #profileView { display:block; }
body.zf-friends-open #profileView,
body.zd-dating-open #profileView { display:none !important; }
#profileView { display:none; width:min(100%, 1020px); margin:0 auto; padding:22px 0 42px; color:var(--zp-text); --zp-accent:#3c9b68; --zp-accent-strong:#28794e; --zp-accent-soft:#e4f4e9; --zp-bg:#ffffff; --zp-card:#ffffff; --zp-text:#19251f; --zp-muted:#76847c; --zp-line:rgba(40,80,57,.12); --zp-soft:#f5f8f5; --zp-shadow:0 12px 34px rgba(24,65,43,.055); }
html[data-theme="dark"] #profileView { --zp-bg:#151c19; --zp-card:#1b2520; --zp-text:#f0f6f2; --zp-muted:#a2b2a8; --zp-line:rgba(255,255,255,.11); --zp-soft:#202b25; --zp-accent-soft:#233b2d; --zp-shadow:0 12px 34px rgba(0,0,0,.18); }
#profileView[data-zp-color="lavender"] { --zp-accent:#9172c9; --zp-accent-strong:#7252aa; --zp-accent-soft:#f0e9fc; }
#profileView[data-zp-color="ocean"] { --zp-accent:#3e88b9; --zp-accent-strong:#286893; --zp-accent-soft:#e4f2fc; }
#profileView[data-zp-color="midnight"] { --zp-accent:#6573c9; --zp-accent-strong:#4857a7; --zp-accent-soft:#e9ebfc; }
html[data-theme="dark"] #profileView[data-zp-color="lavender"], html[data-theme="dark"] #profileView[data-zp-color="ocean"], html[data-theme="dark"] #profileView[data-zp-color="midnight"] { --zp-accent-soft:color-mix(in srgb, var(--zp-accent) 19%, #17211b); }
#profileView * { box-sizing:border-box; }
#profileView button, #profileView input, #profileView textarea, #profileView select { font:inherit; }
#profileView button { -webkit-tap-highlight-color:transparent; }
#profileView [hidden] { display:none !important; }
.zp-page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin:0 2px 19px; }
.zp-kicker, .zp-overline { display:block; color:var(--zp-accent-strong); font-size:10px; letter-spacing:.16em; font-weight:900; }
.zp-page-title { margin:7px 0 5px; color:var(--zp-text); font-size:clamp(27px,4.4vw,37px); font-weight:900; line-height:1.12; letter-spacing:-.055em; }
.zp-page-subtitle { margin:0; color:var(--zp-muted); font-size:13px; }
.zp-head-actions, .zp-profile-identity-actions, .zp-intro-actions, .zp-form-actions { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.zp-button { min-height:40px; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 14px; border:1px solid transparent; border-radius:12px; cursor:pointer; font-size:12px !important; font-weight:850 !important; transition:transform .16s ease, background .16s ease, border-color .16s ease; }
.zp-button:active { transform:scale(.98); }
.zp-button-primary { background:var(--zp-accent); color:#fff; box-shadow:0 7px 16px color-mix(in srgb, var(--zp-accent) 22%, transparent); }
.zp-button-primary:hover { background:var(--zp-accent-strong); }
.zp-button-quiet { background:transparent; color:var(--zp-text); border-color:var(--zp-line); }
.zp-button-soft { background:var(--zp-accent-soft); color:var(--zp-accent-strong); }
.zp-button-outline { background:var(--zp-card); color:var(--zp-text); border-color:var(--zp-line); }
.zp-wide { width:100%; }
.zp-card { border:1px solid var(--zp-line); border-radius:19px; background:var(--zp-card); box-shadow:var(--zp-shadow); color:var(--zp-text); }
.zp-profile-hero { overflow:hidden; border:1px solid var(--zp-line); border-radius:24px; background:var(--zp-card); box-shadow:var(--zp-shadow); }
.zp-cover { min-height:202px; position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:flex-end; padding:clamp(18px,4vw,28px); color:#fff; background:radial-gradient(ellipse at 78% 20%,rgba(211,255,224,.42),transparent 27%),radial-gradient(ellipse at 20% 100%,rgba(20,91,56,.45),transparent 42%),linear-gradient(115deg,#174b35,#3c9b68 56%,#b5ddb7); }
.zp-cover[data-zp-cover-style="horizon"] { background:radial-gradient(ellipse at 80% 14%,rgba(255,255,255,.5),transparent 25%),linear-gradient(125deg,#234d67,#5f9fb3 53%,#d8d4b2); }
.zp-cover[data-zp-cover-style="aurora"] { background:radial-gradient(ellipse at 24% 30%,rgba(166,236,201,.8),transparent 26%),radial-gradient(ellipse at 79% 30%,rgba(176,157,255,.72),transparent 28%),linear-gradient(115deg,#182d3f,#33565d 52%,#614e81); }
.zp-cover-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-1; }
.zp-cover-shade { position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(8,35,22,.58),rgba(8,35,22,.08) 74%),linear-gradient(0deg,rgba(0,0,0,.2),transparent 58%); }
.zp-cover-copy { display:flex; flex-direction:column; gap:6px; position:relative; z-index:1; max-width:68%; }
.zp-cover-copy span { font-size:9px; letter-spacing:.2em; font-weight:900; opacity:.86; }
.zp-cover-copy strong { font-size:clamp(19px,3vw,29px); line-height:1.1; letter-spacing:-.04em; text-shadow:0 1px 12px rgba(0,0,0,.1); }
.zp-cover-tools { position:absolute; right:16px; top:15px; display:flex; gap:7px; z-index:2; }
.zp-cover-tool { display:flex; align-items:center; gap:6px; padding:8px 10px; border:1px solid rgba(255,255,255,.35); border-radius:999px; color:#fff; background:rgba(13,37,26,.27); backdrop-filter:blur(14px); cursor:pointer; font-size:10px !important; font-weight:850 !important; }
.zp-profile-identity { display:flex; align-items:center; gap:17px; padding:0 clamp(16px,3vw,28px) 15px; margin-top:-38px; position:relative; }
.zp-avatar-button { position:relative; flex:0 0 92px; width:92px; height:92px; padding:0; border:4px solid var(--zp-card); border-radius:50%; overflow:hidden; background:var(--zp-accent-soft); color:var(--zp-accent-strong); box-shadow:0 3px 13px rgba(0,0,0,.08); cursor:pointer; }
.zp-avatar-fallback, .zp-avatar-image { display:grid; place-items:center; width:100%; height:100%; font-size:25px; font-weight:900; object-fit:cover; }
.zp-avatar-edit { position:absolute; right:1px; bottom:2px; width:25px; height:25px; display:grid; place-items:center; border:2px solid var(--zp-card); border-radius:50%; color:#fff; background:var(--zp-accent); font-size:12px; }
.zp-identity-copy { min-width:0; flex:1; padding-top:41px; }
.zp-name-line { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.zp-name-line h2 { margin:0; font-size:clamp(20px,3vw,27px); letter-spacing:-.045em; font-weight:900; color:var(--zp-text); line-height:1.18; }
.zp-profile-mark { display:inline-grid; place-items:center; width:17px; height:17px; border-radius:50%; color:#fff; background:var(--zp-accent); font-size:10px; flex-shrink:0; }
.zp-handle { margin:5px 0; color:var(--zp-muted); font-size:11px; font-weight:750; }
.zp-bio { margin:8px 0 9px; max-width:610px; color:var(--zp-text); font-size:12px; line-height:1.6; overflow-wrap:anywhere; }
.zp-profile-tags { display:flex; flex-wrap:wrap; gap:6px; }
.zp-profile-tags span { padding:5px 8px; border:1px solid var(--zp-line); border-radius:999px; color:var(--zp-muted); background:var(--zp-soft); font-size:10px; }
.zp-profile-identity-actions { align-self:flex-end; padding-bottom:3px; }
.zp-stats-row { display:flex; align-items:center; gap:0; padding:13px clamp(16px,3vw,28px); border-top:1px solid var(--zp-line); background:color-mix(in srgb,var(--zp-soft) 48%,transparent); }
.zp-stats-row > div:not(.zp-stat-caption) { min-width:78px; display:flex; align-items:baseline; gap:5px; padding-right:20px; margin-right:20px; border-right:1px solid var(--zp-line); }
.zp-stats-row strong { font-size:16px; color:var(--zp-text); font-weight:900; }
.zp-stats-row span { font-size:10px; color:var(--zp-muted); }
.zp-stat-caption { display:flex; align-items:center; gap:7px; margin-left:auto; color:var(--zp-muted); font-size:10px; }
.zp-live-dot { width:7px; height:7px; background:#48b978; border-radius:50%; box-shadow:0 0 0 3px color-mix(in srgb,#48b978 14%,transparent); }
.zp-edit-card { margin-top:14px; padding:20px; }
.zp-card-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.zp-card-heading h2 { margin:5px 0; font-size:19px; letter-spacing:-.035em; color:var(--zp-text); }
.zp-card-heading p { margin:0; font-size:11px; line-height:1.5; color:var(--zp-muted); }
.zp-icon-close { width:32px; height:32px; display:grid; place-items:center; border:1px solid var(--zp-line); border-radius:10px; background:var(--zp-soft); color:var(--zp-text); cursor:pointer; font-size:20px !important; }
.zp-edit-grid { display:grid; grid-template-columns:1fr 1fr; gap:13px; margin-top:18px; }
.zp-field { display:flex; flex-direction:column; gap:7px; min-width:0; }
.zp-field > span { display:flex; justify-content:space-between; color:var(--zp-text); font-size:11px; font-weight:850; }
.zp-field small { color:var(--zp-muted); font-size:10px; font-weight:650; }
.zp-field input, .zp-field textarea, .zp-field select { width:100%; min-width:0; padding:11px 12px; border:1px solid var(--zp-line); border-radius:11px; outline:0; color:var(--zp-text); background:var(--zp-bg); font-size:12px !important; }
.zp-field input:focus, .zp-field textarea:focus, .zp-field select:focus { border-color:var(--zp-accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--zp-accent) 13%,transparent); }
.zp-field textarea { resize:vertical; line-height:1.55; }
.zp-field-full { grid-column:1/-1; }
.zp-handle-input { display:flex; align-items:center; border:1px solid var(--zp-line); border-radius:11px; background:var(--zp-bg); padding-left:11px; color:var(--zp-muted); }
.zp-handle-input input { border:0; box-shadow:none !important; padding-left:3px; }
.zp-form-actions { justify-content:flex-end; margin-top:15px; }
.zp-tabs { display:flex; gap:5px; padding:6px; margin:17px 0 18px; border:1px solid var(--zp-line); border-radius:15px; background:var(--zp-card); box-shadow:var(--zp-shadow); overflow:auto; scrollbar-width:none; }
.zp-tabs::-webkit-scrollbar { display:none; }
.zp-tab { display:flex; align-items:center; justify-content:center; gap:7px; min-height:40px; flex:1; white-space:nowrap; padding:9px 13px; border:0; border-radius:10px; background:transparent; color:var(--zp-muted); font-size:11px !important; font-weight:850 !important; cursor:pointer; }
.zp-tab.is-active { color:var(--zp-accent-strong); background:var(--zp-accent-soft); }
.zp-lite-pill { padding:2px 4px; border-radius:4px; color:var(--zp-accent-strong); background:color-mix(in srgb,var(--zp-accent) 16%,transparent); font-size:8px; font-style:normal; }
.zp-panel { color:var(--zp-text); }
.zp-panel[hidden] { display:none !important; }
.zp-panel.is-active { animation:zpPanelIn .22s ease both; }
@keyframes zpPanelIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
.zp-home-layout { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(230px,.78fr); align-items:start; gap:16px; }
.zp-main-column, .zp-side-column, .zp-studio-controls { display:flex; flex-direction:column; gap:15px; min-width:0; }
.zp-intro-card { padding:20px; }
.zp-card-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.zp-card-heading h2 { margin:5px 0 0; font-size:19px; line-height:1.25; letter-spacing:-.04em; }
.zp-heading-spark { color:var(--zp-accent); font-size:23px; }
.zp-intro-card > p { max-width:590px; margin:12px 0 16px; color:var(--zp-muted); font-size:12px; line-height:1.75; }
.zp-intro-actions .zp-button { min-height:37px; }
.zp-section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin:7px 1px -2px; }
.zp-section-head h2 { margin:5px 0 0; font-size:19px; letter-spacing:-.04em; }
.zp-section-head p { margin:6px 0 0; color:var(--zp-muted); font-size:11px; line-height:1.6; }
.zp-section-note { color:var(--zp-muted); font-size:10px; }
.zp-text-button { padding:4px 0; border:0; background:transparent; color:var(--zp-accent-strong); font-size:11px !important; font-weight:850 !important; cursor:pointer; white-space:nowrap; }
.zp-pinned-card { padding:16px; }
.zp-pinned-top { display:flex; align-items:center; gap:9px; }
.zp-small-avatar { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; color:var(--zp-accent-strong); background:var(--zp-accent-soft); font-weight:900; }
.zp-pinned-top > div:nth-child(2) { display:flex; flex-direction:column; gap:3px; min-width:0; }
.zp-pinned-top strong { font-size:11px; }
.zp-pinned-top small { color:var(--zp-muted); font-size:9px; }
.zp-pinned-star { margin-left:auto; color:var(--zp-accent); }
.zp-pinned-card > p { margin:13px 0; font-size:12px; line-height:1.7; }
.zp-pinned-art { display:flex; align-items:center; justify-content:space-between; min-height:116px; padding:20px; border-radius:14px; color:#f5fff8; background:radial-gradient(circle at 84% 16%,rgba(199,255,212,.6),transparent 22%),linear-gradient(130deg,#1b5035,#3c9b68 62%,#b5dbb9); overflow:hidden; }
.zp-pinned-art span { font-size:10px; line-height:1.5; letter-spacing:.12em; }
.zp-pinned-art strong { font-size:clamp(18px,3vw,27px); letter-spacing:-.055em; }
.zp-pinned-art i { font-size:48px; font-style:normal; opacity:.75; }
.zp-pinned-footer { display:flex; gap:15px; padding-top:12px; color:var(--zp-muted); font-size:9px; }
.zp-collections-title { margin-top:4px; }
.zp-collection-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px; }
.zp-collection-card { min-width:0; overflow:hidden; border:1px solid var(--zp-line); border-radius:16px; background:var(--zp-card); box-shadow:var(--zp-shadow); }
.zp-collection-art { min-height:104px; position:relative; display:flex; align-items:flex-end; justify-content:space-between; gap:6px; padding:13px; overflow:hidden; color:#fff; background:linear-gradient(135deg,#356b4f,#88bf9c); }
.zp-collection-art::before, .zp-collection-art::after { content:""; position:absolute; width:90px; height:90px; border:1px solid rgba(255,255,255,.25); border-radius:30px; transform:rotate(35deg); top:-39px; right:-12px; }
.zp-collection-art::after { width:66px; height:66px; top:auto; bottom:-37px; right:44px; }
.zp-collection-art.art-ideas { background:linear-gradient(135deg,#415b7f,#829dd0); }
.zp-collection-art.art-moments { background:linear-gradient(135deg,#a96c5c,#e0b29a); }
.zp-collection-art.art-private { background:linear-gradient(135deg,#49445e,#8c7baa); }
.zp-collection-art.art-custom { background:linear-gradient(135deg,var(--zp-accent-strong),var(--zp-accent)); }
.zp-collection-emoji { z-index:1; font-size:24px; filter:drop-shadow(0 2px 5px rgba(0,0,0,.1)); }
.zp-collection-access { z-index:1; padding:4px 6px; border:1px solid rgba(255,255,255,.3); border-radius:999px; color:#fff; background:rgba(0,0,0,.18); backdrop-filter:blur(5px); font-size:8px; }
.zp-collection-body { padding:12px; }
.zp-collection-body h3 { margin:0 0 5px; font-size:12px; line-height:1.35; overflow-wrap:anywhere; }
.zp-collection-body p { min-height:30px; margin:0; color:var(--zp-muted); font-size:10px; line-height:1.55; }
.zp-collection-foot { display:flex; align-items:center; justify-content:space-between; gap:6px; margin-top:10px; color:var(--zp-muted); font-size:9px; }
.zp-collection-delete { border:0; background:transparent; color:#ba5760; cursor:pointer; font-size:10px !important; }
.zp-link-card { position:relative; padding:19px; background:linear-gradient(150deg,var(--zp-card),var(--zp-accent-soft)); }
.zp-link-icon { display:grid; place-items:center; width:37px; height:37px; margin-bottom:13px; border:1px solid var(--zp-line); border-radius:12px; color:var(--zp-accent-strong); background:var(--zp-card); font-size:21px; }
.zp-link-card h3 { margin:6px 0 8px; font-size:19px; line-height:1.18; letter-spacing:-.045em; }
.zp-link-card p { margin:0 0 15px; color:var(--zp-muted); font-size:11px; line-height:1.7; }
.zp-demo-caption { display:block; margin-top:10px; color:var(--zp-muted); font-size:9px; line-height:1.5; }
.zp-privacy-mini { display:flex; gap:11px; padding:15px; }
.zp-privacy-icon { flex-shrink:0; width:34px; height:34px; display:grid; place-items:center; border-radius:11px; color:var(--zp-accent-strong); background:var(--zp-accent-soft); font-size:21px; }
.zp-privacy-mini strong { display:block; margin:2px 0 5px; font-size:11px; }
.zp-privacy-mini p { margin:0 0 6px; color:var(--zp-muted); font-size:10px; line-height:1.6; }
.zp-studio-heading { margin:4px 1px 17px; }
.zp-studio-status, .zp-collection-count, .zp-mirror-pill { display:inline-flex; align-items:center; gap:7px; white-space:nowrap; padding:7px 9px; border:1px solid var(--zp-line); border-radius:999px; color:var(--zp-muted); background:var(--zp-card); font-size:9px; font-weight:800; }
.zp-studio-status i, .zp-mirror-pill span { width:7px; height:7px; border-radius:50%; background:#43ba78; }
.zp-studio-layout { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr); gap:15px; align-items:start; }
.zp-control-card { padding:17px; }
.zp-control-title { display:flex; align-items:flex-start; gap:10px; margin-bottom:14px; }
.zp-control-icon { flex-shrink:0; width:34px; height:34px; display:grid; place-items:center; border-radius:11px; color:var(--zp-accent-strong); background:var(--zp-accent-soft); font-size:18px; }
.zp-control-title h3 { margin:2px 0 4px; font-size:13px; }
.zp-control-title p { margin:0; color:var(--zp-muted); font-size:10px; line-height:1.5; }
.zp-swatch-row { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
.zp-swatch { display:flex; flex-direction:column; align-items:center; gap:6px; padding:8px 4px; border:1px solid transparent; border-radius:11px; background:transparent; color:var(--zp-muted); cursor:pointer; font-size:9px !important; }
.zp-swatch.is-selected { border-color:var(--zp-accent); background:var(--zp-accent-soft); color:var(--zp-text); }
.zp-swatch i { width:29px; height:29px; border-radius:50%; background:#3c9b68; box-shadow:inset 0 0 0 3px rgba(255,255,255,.25); }
.zp-swatch[data-zp-color="lavender"] i { background:#9172c9; }
.zp-swatch[data-zp-color="ocean"] i { background:#3e88b9; }
.zp-swatch[data-zp-color="midnight"] i { background:#6573c9; }
.zp-cover-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:13px; }
.zp-cover-choice { min-width:0; display:flex; flex-direction:column; gap:6px; padding:5px; border:1px solid transparent; border-radius:11px; background:transparent; color:var(--zp-muted); font-size:9px !important; cursor:pointer; }
.zp-cover-choice.is-selected { border-color:var(--zp-accent); background:var(--zp-accent-soft); color:var(--zp-text); }
.zp-cover-sample { display:block; height:49px; border-radius:7px; background:linear-gradient(120deg,#174b35,#3c9b68,#b5ddb7); }
.zp-cover-sample.horizon { background:linear-gradient(120deg,#234d67,#5f9fb3,#d8d4b2); }
.zp-cover-sample.aurora { background:radial-gradient(ellipse at 25% 30%,#a6ecc9,transparent 26%),linear-gradient(120deg,#182d3f,#33565d,#614e81); }
.zp-layout-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.zp-layout-choice { display:flex; flex-direction:column; align-items:flex-start; gap:5px; min-width:0; padding:9px; border:1px solid var(--zp-line); border-radius:11px; background:var(--zp-bg); color:var(--zp-text); text-align:left; cursor:pointer; }
.zp-layout-choice.is-selected { border-color:var(--zp-accent); background:var(--zp-accent-soft); }
.zp-layout-choice strong { font-size:9px; }
.zp-layout-choice small { color:var(--zp-muted); font-size:8px; }
.zp-layout-mini { width:100%; height:40px; display:flex; gap:3px; padding:4px; border-radius:6px; background:var(--zp-soft); }
.zp-layout-mini i { display:block; border:1px solid var(--zp-line); border-radius:3px; background:var(--zp-card); flex:1; }
.zp-layout-mini.mini-cards i:nth-child(2) { flex:1.3; }
.zp-layout-mini.mini-mosaic i:first-child { flex:1.5; }
.zp-layout-mini.mini-minimal { flex-direction:column; }
.zp-layout-mini.mini-minimal i { flex:none; width:75%; height:7px; }
.zp-studio-preview-col { position:sticky; top:15px; }
.zp-preview-label { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:1px 3px 9px; color:var(--zp-muted); font-size:9px; font-weight:850; letter-spacing:.06em; }
.zp-studio-live-card { overflow:hidden; padding-bottom:17px; }
.zp-live-cover { height:117px; background:linear-gradient(120deg,#174b35,#3c9b68,#b5ddb7); }
#profileView[data-zp-cover-style="horizon"] .zp-live-cover { background:linear-gradient(120deg,#234d67,#5f9fb3,#d8d4b2); }
#profileView[data-zp-cover-style="aurora"] .zp-live-cover { background:radial-gradient(ellipse at 25% 30%,#a6ecc9,transparent 26%),linear-gradient(120deg,#182d3f,#33565d,#614e81); }
.zp-live-profile { display:flex; align-items:center; gap:10px; padding:0 15px; margin-top:-23px; position:relative; }
.zp-live-avatar { width:49px; height:49px; display:grid; place-items:center; border:3px solid var(--zp-card); border-radius:50%; background:var(--zp-accent-soft); color:var(--zp-accent-strong); font-size:13px; font-weight:900; overflow:hidden; background-size:cover; background-position:center; }
.zp-live-profile > div { display:flex; min-width:0; flex-direction:column; gap:4px; padding-top:21px; }
.zp-live-profile strong { font-size:11px; overflow-wrap:anywhere; }
.zp-live-profile small { color:var(--zp-muted); font-size:9px; }
.zp-studio-live-card > p { margin:12px 15px; color:var(--zp-muted); font-size:10px; line-height:1.6; }
.zp-live-skeleton { display:flex; gap:7px; margin:12px 15px 0; }
.zp-live-skeleton i { height:40px; flex:1; border-radius:8px; background:var(--zp-soft); }
.zp-live-skeleton i:first-child { flex:1.3; }
.zp-live-skeleton.wide i { height:7px; }
.zp-hint { margin:10px 3px; color:var(--zp-muted); font-size:9px; line-height:1.65; }
#profileView[data-zp-layout="mosaic"] .zp-collection-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
#profileView[data-zp-layout="mosaic"] .zp-collection-card:nth-child(3n+1) .zp-collection-art { min-height:142px; }
#profileView[data-zp-layout="minimal"] .zp-collection-grid { grid-template-columns:1fr; }
#profileView[data-zp-layout="minimal"] .zp-collection-card { display:grid; grid-template-columns:86px minmax(0,1fr); }
#profileView[data-zp-layout="minimal"] .zp-collection-art { min-height:90px; }
#profileView[data-zp-layout="minimal"] .zp-collection-body p { min-height:auto; }
.zp-create-collection { display:flex; align-items:center; gap:12px; padding:14px; margin-bottom:14px; }
.zp-create-icon { flex-shrink:0; width:38px; height:38px; display:grid; place-items:center; border-radius:12px; color:var(--zp-accent-strong); background:var(--zp-accent-soft); font-size:21px; }
.zp-create-copy { min-width:155px; flex:1; }
.zp-create-copy strong { font-size:11px; }
.zp-create-copy p { margin:4px 0 0; color:var(--zp-muted); font-size:9px; }
.zp-collection-name { flex:1.1; max-width:215px; }
.zp-collection-audience { width:128px; }
.zp-collection-name input, .zp-collection-audience select { min-height:39px; padding:9px 10px; font-size:10px !important; }
.zp-all-collections { grid-template-columns:repeat(3,minmax(0,1fr)); }
.zp-collection-privacy { display:flex; align-items:flex-start; gap:10px; padding:13px 15px; margin-top:15px; border:1px solid var(--zp-line); border-radius:14px; color:var(--zp-muted); background:var(--zp-soft); }
.zp-collection-privacy > span { color:var(--zp-accent-strong); font-size:20px; }
.zp-collection-privacy strong { display:block; margin:2px 0 5px; color:var(--zp-text); font-size:10px; line-height:1.5; }
.zp-collection-privacy p { margin:0; font-size:10px; line-height:1.65; }
.zp-mirror-switcher { display:flex; width:max-content; max-width:100%; gap:5px; padding:5px; margin-bottom:14px; border:1px solid var(--zp-line); border-radius:13px; background:var(--zp-card); }
.zp-mirror-switcher button { min-width:115px; padding:10px 13px; border:0; border-radius:9px; color:var(--zp-muted); background:transparent; font-size:11px !important; font-weight:850 !important; cursor:pointer; }
.zp-mirror-switcher button.is-selected { color:var(--zp-accent-strong); background:var(--zp-accent-soft); }
.zp-mirror-layout { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(220px,.65fr); align-items:start; gap:15px; }
.zp-mirror-preview { overflow:hidden; padding:0 0 17px; }
.zp-mirror-top { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 15px; border-bottom:1px solid var(--zp-line); }
.zp-mirror-viewer-label { color:var(--zp-muted); font-size:8px; letter-spacing:.12em; font-weight:900; }
.zp-mirror-public-badge { padding:5px 7px; border-radius:999px; color:var(--zp-accent-strong); background:var(--zp-accent-soft); font-size:8px; font-weight:800; }
.zp-mirror-cover { height:156px; background:linear-gradient(120deg,#174b35,#3c9b68,#b5ddb7); }
#profileView[data-zp-cover-style="horizon"] .zp-mirror-cover { background:linear-gradient(120deg,#234d67,#5f9fb3,#d8d4b2); }
#profileView[data-zp-cover-style="aurora"] .zp-mirror-cover { background:radial-gradient(ellipse at 25% 30%,#a6ecc9,transparent 26%),linear-gradient(120deg,#182d3f,#33565d,#614e81); }
.zp-mirror-identity { display:flex; gap:12px; align-items:flex-start; padding:0 17px; margin-top:-23px; position:relative; }
.zp-mirror-avatar { flex:0 0 57px; width:57px; height:57px; display:grid; place-items:center; overflow:hidden; border:4px solid var(--zp-card); border-radius:50%; background:var(--zp-accent-soft); background-size:cover; background-position:center; color:var(--zp-accent-strong); font-size:14px; font-weight:900; }
.zp-mirror-identity > div { min-width:0; flex:1; padding-top:25px; }
.zp-mirror-identity h3 { margin:0; font-size:18px; letter-spacing:-.04em; }
.zp-mirror-identity p { margin:5px 0 0; color:var(--zp-muted); font-size:10px; line-height:1.6; overflow-wrap:anywhere; }
.zp-mirror-public-fields, .zp-mirror-friend-fields { padding:14px 17px 0; }
.zp-field-chip { display:inline-flex; padding:6px 8px; margin:0 5px 5px 0; border:1px solid var(--zp-line); border-radius:999px; color:var(--zp-muted); font-size:9px; }
.zp-friend-only-note { display:flex; gap:9px; align-items:flex-start; padding:11px; margin-bottom:10px; border-radius:12px; color:var(--zp-text); background:var(--zp-accent-soft); }
.zp-friend-only-note > span { font-size:19px; color:var(--zp-accent-strong); }
.zp-friend-only-note strong { font-size:10px; }
.zp-friend-only-note p { margin:4px 0 0; color:var(--zp-muted); font-size:9px; line-height:1.6; }
.zp-mirror-collections-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:17px 17px 10px; }
.zp-mirror-collections-heading strong { font-size:11px; }
.zp-mirror-collections-heading small { color:var(--zp-muted); font-size:9px; }
.zp-mirror-collections { grid-template-columns:repeat(2,minmax(0,1fr)); padding:0 17px; }
.zp-mirror-collections .zp-collection-art { min-height:65px; padding:8px; }
.zp-mirror-collections .zp-collection-emoji { font-size:18px; }
.zp-mirror-collections .zp-collection-body { padding:9px; }
.zp-mirror-collections .zp-collection-body h3 { font-size:10px; }
.zp-mirror-collections .zp-collection-body p { min-height:0; font-size:8px; }
.zp-mirror-collections .zp-collection-foot { font-size:8px; }
.zp-mirror-notes { display:flex; flex-direction:column; gap:10px; }
.zp-mirror-note-card { padding:15px; }
.zp-note-icon { width:30px; height:30px; display:grid; place-items:center; margin-bottom:10px; border-radius:10px; font-size:15px; }
.zp-note-icon.green { color:#23754a; background:#dff4e6; }
.zp-note-icon.blue { color:#2e69a7; background:#e0ecfb; }
.zp-mirror-note-card h3 { margin:0 0 6px; font-size:12px; }
.zp-mirror-note-card p { margin:0; color:var(--zp-muted); font-size:10px; line-height:1.7; }
.zp-mirror-warning { display:flex; align-items:flex-start; gap:9px; padding:13px; border:1px solid rgba(208,160,62,.25); border-radius:13px; color:#a37b27; background:rgba(211,173,84,.09); }
.zp-mirror-warning > span { font-size:17px; }
.zp-mirror-warning p { margin:0; font-size:9px; line-height:1.65; }
.zp-mirror-warning strong { color:var(--zp-text); }
.zp-toast { position:fixed; z-index:1400; left:50%; bottom:calc(94px + env(safe-area-inset-bottom)); max-width:min(90vw,400px); padding:11px 15px; transform:translate(-50%,12px); border:1px solid var(--zp-line); border-radius:12px; opacity:0; pointer-events:none; color:var(--zp-text); background:var(--zp-card); box-shadow:0 12px 34px rgba(0,0,0,.16); font-size:11px; line-height:1.5; transition:opacity .18s ease, transform .18s ease; }
.zp-toast.is-visible { opacity:1; transform:translate(-50%,0); }
.zp-hidden-input, .zp-visually-hidden { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; }
body.zp-public-route .cl-login08-demo, body.zp-public-route .navbar { display:none !important; }
body.zp-public-route .zp-owner-only { display:none !important; }
body.zp-public-route #profileView { display:block; max-width:920px; padding-top:18px; }
body.zp-public-route .zp-page-head { margin-bottom:12px; }
body.zp-public-route .zp-tabs { display:none !important; }
body.zp-public-route [data-zp-panel="home"] { display:block !important; }
body.zp-public-route .zp-stats-row > div:nth-child(2) { display:none; }
body.zp-public-route .zp-home-layout { grid-template-columns:minmax(0,1fr); }
body.zp-public-route .zp-side-column { display:none; }
body.zp-public-route .zp-mirror-warning { display:flex; }
@media (max-width:760px) {
  #profileView { padding:15px 0 32px; width:100%; }
  .zp-page-head { align-items:flex-start; margin:0 2px 14px; }
  .zp-head-actions { gap:6px; }
  .zp-head-actions .zp-button { min-height:35px; padding:8px 10px; font-size:10px !important; }
  .zp-cover { min-height:162px; }
  .zp-cover-tools { top:10px; right:10px; }
  .zp-cover-tool { padding:7px 8px; font-size:9px !important; }
  .zp-profile-identity { align-items:flex-start; gap:11px; padding:0 14px 13px; margin-top:-29px; flex-wrap:wrap; }
  .zp-avatar-button { flex-basis:72px; width:72px; height:72px; border-width:3px; }
  .zp-avatar-fallback, .zp-avatar-image { font-size:20px; }
  .zp-identity-copy { padding-top:31px; flex:1; }
  .zp-name-line h2 { font-size:20px; }
  .zp-profile-tags { gap:5px; }
  .zp-profile-tags span { font-size:9px; padding:4px 7px; }
  .zp-profile-identity-actions { flex-basis:100%; padding:0; margin-top:1px; }
  .zp-profile-identity-actions .zp-button { min-height:35px; }
  .zp-stats-row { padding:11px 14px; }
  .zp-stats-row > div:not(.zp-stat-caption) { min-width:0; flex:1; justify-content:center; gap:4px; padding-right:8px; margin-right:8px; }
  .zp-stats-row strong { font-size:14px; }
  .zp-stats-row span { font-size:9px; }
  .zp-stat-caption { display:none; }
  .zp-tabs { margin:12px 0 14px; padding:4px; gap:2px; }
  .zp-tab { min-height:39px; padding:8px 10px; font-size:10px !important; }
  .zp-tab span { display:inline; }
  .zp-lite-pill { display:none; }
  .zp-home-layout, .zp-studio-layout, .zp-mirror-layout { grid-template-columns:minmax(0,1fr); }
  .zp-side-column { display:grid; grid-template-columns:1fr 1fr; align-items:stretch; }
  .zp-link-card { padding:14px; }
  .zp-link-card h3 { font-size:16px; }
  .zp-link-card p { font-size:10px; }
  .zp-privacy-mini { padding:12px; }
  .zp-collection-grid, .zp-all-collections { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  .zp-collection-art { min-height:84px; }
  .zp-create-collection { flex-wrap:wrap; }
  .zp-create-copy { min-width:calc(100% - 55px); }
  .zp-collection-name { flex:1 1 56%; max-width:none; }
  .zp-collection-audience { flex:1 1 35%; width:auto; }
  .zp-create-collection > .zp-button { width:100%; }
  .zp-studio-preview-col { position:static; }
  .zp-mirror-preview { min-width:0; }
  .zp-mirror-notes { display:grid; grid-template-columns:1fr 1fr; }
  .zp-mirror-warning { grid-column:1/-1; }
}
@media (max-width:420px) {
  .zp-page-head { flex-direction:column; align-items:stretch; }
  .zp-head-actions .zp-button { flex:1; }
  .zp-cover { min-height:150px; padding:15px; }
  .zp-cover-copy { max-width:76%; }
  .zp-cover-copy strong { font-size:20px; }
  .zp-cover-tool span { display:none; }
  .zp-profile-identity { gap:8px; }
  .zp-avatar-button { flex-basis:63px; width:63px; height:63px; }
  .zp-identity-copy { padding-top:31px; }
  .zp-name-line h2 { font-size:18px; }
  .zp-bio { font-size:11px; }
  .zp-stats-row > div:not(.zp-stat-caption) { flex-direction:column; align-items:center; gap:2px; }
  .zp-tabs { width:100%; }
  .zp-tab { flex:1; padding:8px 6px; gap:4px; font-size:9px !important; }
  .zp-tab span { font-size:9px; }
  .zp-intro-card, .zp-pinned-card { padding:14px; }
  .zp-intro-card .zp-card-heading h2 { font-size:17px; }
  .zp-side-column { grid-template-columns:minmax(0,1fr); }
  .zp-collection-grid, .zp-all-collections { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .zp-collection-body { padding:9px; }
  .zp-collection-body h3 { font-size:11px; }
  .zp-swatch-row { gap:3px; }
  .zp-swatch { font-size:8px !important; }
  .zp-layout-choice { padding:6px; }
  .zp-layout-choice strong { font-size:8px; }
  .zp-edit-card { padding:14px; }
  .zp-edit-grid { grid-template-columns:1fr; }
  .zp-field-full { grid-column:auto; }
  .zp-mirror-switcher { width:100%; }
  .zp-mirror-switcher button { flex:1; min-width:0; }
  .zp-mirror-cover { height:125px; }
  .zp-mirror-notes { grid-template-columns:1fr; }
  .zp-mirror-warning { grid-column:auto; }
}
@media (prefers-reduced-motion:reduce) { .zp-panel.is-active, .zp-button, .zp-toast { animation:none !important; transition:none !important; } }

/* Public-share route: show the avatar but remove owner editing affordance. */
body.zp-public-route .zp-avatar-edit { display:none !important; }
body.zp-public-route .zp-avatar-button { cursor:default; }

/* Keep profile content clear of the fixed bottom navigation and mobile avatar overlap. */
#profileView { padding-bottom:calc(112px + env(safe-area-inset-bottom)); }
@media (max-width:760px) {
  .zp-cover { align-items:flex-start; padding-top:16px; }
  .zp-cover-copy { margin-top:32px; }
}
@media (max-width:420px) {
  .zp-cover-copy { margin-top:30px; }
}


/* =========================================================
   ZENZ SLOW LIVING — additive UI layer
========================================================= */
.zl-feed-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:4px 0 14px;padding:13px 14px;border:1px solid rgba(70,139,97,.16);border-radius:18px;background:linear-gradient(120deg,rgba(227,245,233,.78),rgba(248,251,248,.94));}
.zl-feed-heading{display:flex;flex-direction:column;gap:4px;min-width:190px}.zl-feed-heading>strong{font-size:13px;color:#264b34;font-weight:850}.zl-eyebrow{font-size:9px;letter-spacing:.12em;font-weight:900;color:#43835b}.zl-feed-filters{display:flex;gap:5px;flex-wrap:wrap}.zl-feed-filters button{border:1px solid rgba(59,130,84,.17);background:rgba(255,255,255,.78);color:#54705d;border-radius:999px;padding:7px 10px;font-family:inherit;font-size:10px;font-weight:750;line-height:1.2;cursor:pointer;transition:background .18s,border-color .18s,transform .18s}.zl-feed-filters button.is-selected{background:#2f8153;border-color:#2f8153;color:#fff;box-shadow:0 5px 13px rgba(43,124,77,.16)}.zl-feed-filters button:active{transform:scale(.97)}.zl-diurnal-badge{font-size:10px;font-weight:800;border-radius:999px;padding:6px 10px;background:#e3eafc;color:#4459a0}.zl-feed-empty{margin:12px 0;padding:25px 15px;text-align:center;border:1px dashed rgba(71,131,91,.3);border-radius:16px;background:rgba(239,248,241,.76);color:#557260}.zl-feed-empty[hidden]{display:none!important}.zl-empty-hourglass{display:block;font-size:25px;margin-bottom:8px}.zl-feed-empty strong{display:block;font-size:13px;color:#2c523a}.zl-feed-empty p{margin:6px 0 0;font-size:11px}.zl-ghost-banner{margin:0 0 12px;padding:12px 15px;border-radius:15px;background:linear-gradient(115deg,#e7f4e8,#f7f3df);border:1px solid rgba(68,133,83,.2);color:#315e3d;font-size:12px;font-weight:800;line-height:1.55}.zl-ghost-banner[hidden]{display:none!important}.zl-ghost-banner.is-frozen{background:#e8edf6;border-color:#c9d4e8;color:#455b7d}.zl-post-life-tag{display:inline-flex;align-items:center;margin:3px 0 0 6px;padding:3px 6px;border-radius:999px;background:#edf6ee;color:#428256;font-size:9px;font-weight:850;white-space:nowrap}.zl-post-life-tag.is-sandglass{background:#fff0d9;color:#986a25}.zl-composer-life{margin:8px 22px 14px;padding:12px;border:1px solid rgba(63,139,88,.19);border-radius:15px;background:#f5faf6;color:#284a34}.zl-composer-life-head{display:flex;justify-content:space-between;gap:10px;align-items:baseline;flex-wrap:wrap}.zl-composer-life-head strong{font-size:12px}.zl-composer-life-head>span{font-size:10px;color:#77877a}.zl-composer-life-options{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:9px}.zl-composer-life-options button{display:flex;align-items:center;gap:9px;text-align:left;min-width:0;padding:10px;border:1px solid #dce9df;border-radius:12px;background:#fff;color:#3c5643;cursor:pointer}.zl-composer-life-options button.is-selected{border-color:#41975d;background:#eaf6ed;box-shadow:inset 0 0 0 1px #41975d}.zl-composer-life-options button>span:first-child{font-size:20px}.zl-composer-life-options button b{display:block;font-size:11px}.zl-composer-life-options button small{display:block;margin-top:3px;font-size:9px;line-height:1.4;color:#758679}.zl-composer-life-note{margin:9px 0 0;color:#748278;font-size:9px;line-height:1.5}.zl-seed-card{margin:18px 0 0;padding:clamp(16px,3vw,24px);border:1px solid rgba(75,145,93,.19);border-radius:22px;background:linear-gradient(135deg,#f4fbf4,#fffdf4);color:#284431}.zl-seed-top{display:flex;align-items:flex-start;gap:14px}.zl-seed-emblem{width:53px;height:53px;display:grid;place-items:center;border-radius:17px;background:#dff1e2;font-size:28px;flex:0 0 auto}.zl-seed-heading{flex:1;min-width:0}.zl-seed-heading h3{margin:4px 0 5px;font-size:18px;letter-spacing:-.03em}.zl-seed-heading p{margin:0;color:#728174;font-size:11px;line-height:1.55}.zl-seed-stage{border-radius:999px;padding:7px 10px;background:#e3f3e6;color:#327349;font-size:10px;font-weight:850;white-space:nowrap}.zl-seed-meter{height:7px;border-radius:99px;overflow:hidden;background:#e0e9e0;margin:17px 0}.zl-seed-meter span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#73bf81,#267c49);transition:width .25s}.zl-seed-tasks,.zl-seed-quick-tasks{display:grid;gap:9px}.zl-seed-tasks label{display:flex;align-items:flex-start;gap:10px;padding:11px;border:1px solid rgba(67,132,83,.12);border-radius:13px;background:rgba(255,255,255,.78);cursor:pointer}.zl-seed-tasks input,.zl-seed-quick-tasks input{accent-color:#2f8951;margin-top:3px;flex:0 0 auto}.zl-seed-tasks b{display:block;font-size:11px}.zl-seed-tasks small{display:block;margin-top:3px;color:#7b897d;font-size:10px;line-height:1.4}.zl-seed-disclaimer,.zl-muted-note{margin:12px 0 0;color:#7b897d;font-size:10px;line-height:1.6}.zl-global-toast{position:fixed;z-index:100000;left:50%;bottom:90px;transform:translateX(-50%);max-width:min(90vw,520px);padding:11px 15px;border-radius:13px;background:#203629;color:white;font:700 12px/1.5 system-ui,sans-serif;box-shadow:0 12px 36px #0002}.zl-life-page{padding:0 0 22px}.zl-life-hero{display:flex;align-items:center;gap:15px;margin:0 0 14px;padding:20px;border-radius:20px;background:linear-gradient(125deg,#e0f3e5,#f5f3df);color:#284d35}.zl-life-orbit{width:54px;height:54px;display:grid;place-items:center;flex:0 0 auto;border-radius:18px;background:#fff8d8;font-size:27px;box-shadow:0 8px 25px #426d4b14}.zl-life-hero h2{margin:5px 0 7px;font-size:22px;letter-spacing:-.04em}.zl-life-hero p{margin:0;font-size:11px;line-height:1.6;color:#67806b}.zl-life-card{margin:12px 0;padding:17px;border-radius:19px;border:1px solid var(--line-color,#e1e9e2);background:var(--card-bg,#fff);color:var(--text-color,#253b2c);box-shadow:0 5px 20px rgba(25,51,33,.035)}.zl-card-heading{display:flex;align-items:flex-start;gap:11px;margin-bottom:14px}.zl-feature-icon{width:39px;height:39px;flex:0 0 auto;border-radius:13px;display:grid;place-items:center;background:#e6f4e9;font-size:20px}.zl-card-heading>div{flex:1;min-width:0}.zl-card-heading h3{margin:4px 0 5px;font-size:16px;letter-spacing:-.025em}.zl-card-heading p{margin:0;color:var(--muted-color,#7b897f);font-size:11px;line-height:1.55}.zl-setting-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:13px 0;border-top:1px solid var(--line-color,#edf0ed)}.zl-setting-copy{min-width:0;flex:1}.zl-setting-copy strong{display:block;font-size:12px}.zl-setting-copy p{margin:4px 0 0;color:var(--muted-color,#7d887f);font-size:10px;line-height:1.5}.zl-switch{width:43px;height:26px;flex:0 0 auto;padding:3px;border:0;border-radius:99px;background:#cdd4ce;cursor:pointer;transition:background .18s}.zl-switch span{display:block;width:20px;height:20px;border-radius:50%;background:white;box-shadow:0 1px 4px #0002;transition:transform .18s}.zl-switch.is-on{background:#338a51}.zl-switch.is-on span{transform:translateX(17px)}.zl-time-settings{display:grid;grid-template-columns:1fr 1fr;gap:11px;padding:13px 0}.zl-time-settings label{display:grid;gap:7px;color:var(--muted-color,#738075);font-size:10px;font-weight:800}.zl-time-settings input{width:100%;min-width:0;padding:10px 11px;border:1px solid var(--line-color,#dae5dc);border-radius:11px;background:var(--input-bg,#f9fbf9);color:var(--text-color,#283e2f);font:800 12px system-ui,sans-serif}.zl-inline-status{margin:10px 0;padding:11px 12px;border-radius:12px;background:var(--muted-bg,#f5f7f5);color:var(--muted-color,#78847a);font-size:11px;font-weight:750}.zl-inline-status.is-active{background:#e8f5eb;color:#32744a}.zl-audio-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:13px;border-top:1px solid var(--line-color,#edf0ed)}.zl-audio-row strong{font-size:12px}.zl-audio-row p{margin:4px 0 0;color:var(--muted-color,#78847a);font-size:10px;line-height:1.5}.zl-audio-actions,.zl-chat-actions{display:flex;gap:7px;flex-wrap:wrap}.zl-action-button{border:1px solid rgba(61,137,82,.2);border-radius:999px;padding:9px 12px;background:#eaf6ed;color:#2c7745;font:800 10px system-ui,sans-serif;cursor:pointer}.zl-action-button:active{transform:scale(.97)}.zl-action-secondary{background:transparent;border-color:var(--line-color,#dfe7e0);color:var(--text-color,#3d5944);margin-top:8px}.zl-demo-chat{margin-top:12px;padding:14px;border:1px solid var(--line-color,#e5ece6);border-radius:16px;background:var(--muted-bg,#f9fbf9)}.zl-demo-chat-top{display:flex;align-items:center;gap:9px}.zl-demo-avatar{width:35px;height:35px;border-radius:50%;display:grid;place-items:center;background:#dff0e3}.zl-demo-chat-top>div{display:flex;flex:1;flex-direction:column;gap:3px}.zl-demo-chat-top strong{font-size:11px}.zl-demo-chat-top small{font-size:9px;color:var(--muted-color,#7e8b80)}.zl-chat-lock{font-size:8px;letter-spacing:.08em;font-weight:900;color:#62836c}.zl-chat-bubble{margin:13px 0 8px 42px;padding:11px 12px;border-radius:13px 13px 13px 3px;background:var(--card-bg,#fff);border:1px solid var(--line-color,#e5ece6);font-size:11px;line-height:1.5}.zl-chat-meta-preview{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 12px 42px}.zl-chat-meta-preview span{font-size:9px;color:var(--muted-color,#7d897f);border-radius:99px;padding:5px 8px;background:var(--pill-bg,#edf3ed)}.zl-seed-quick-tasks{gap:8px}.zl-seed-quick-tasks label{display:flex;align-items:center;gap:8px;color:var(--text-color,#435748);font-size:11px}.zl-ghost-current{display:flex;align-items:center;gap:8px;padding:11px 12px;background:var(--muted-bg,#f5f7f5);border-radius:12px;font-size:11px}.zl-ghost-pulse{width:8px;height:8px;border-radius:50%;background:#55a96b}.zl-ghost-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}.zl-ghost-options button{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0;padding:12px 10px;border:1px solid var(--line-color,#e0e8e1);border-radius:13px;background:var(--card-bg,#fff);color:var(--text-color,#2b4432);text-align:left;cursor:pointer}.zl-ghost-options button>span{font-size:20px}.zl-ghost-options b{font-size:10px}.zl-ghost-options small{font-size:9px;line-height:1.4;color:var(--muted-color,#7e8a80)}.zl-ghost-options button.is-selected{border-color:#5caa71;background:#edf8ef;box-shadow:inset 0 0 0 1px #5caa71}.zl-data-cleanup{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:13px;padding-top:13px;border-top:1px solid var(--line-color,#edf0ed)}.zl-data-cleanup strong{font-size:11px}.zl-data-cleanup p{margin:4px 0 0;color:var(--muted-color,#7e897f);font-size:10px;line-height:1.5}.zl-action-danger{flex:0 0 auto;background:#fff0ee;border-color:#f0cbc5;color:#a44338}.zl-ghost-public-notice{min-height:70vh;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:35px 20px;text-align:center;background:var(--bg-color,#f4f7f4);color:var(--text-color,#294433)}.zl-ghost-public-notice[hidden]{display:none!important}.zl-ghost-public-notice .zl-ghost-plant{font-size:44px;margin-bottom:17px}.zl-ghost-public-notice h1{margin:8px 0;font-size:clamp(25px,5vw,40px);letter-spacing:-.04em}.zl-ghost-public-notice p{max-width:430px;font-size:13px;line-height:1.65;color:var(--muted-color,#7c897e)}body.zp-public-route.zl-ghost-frozen #profileView{display:none!important}.zl-expand-text{display:inline-block;margin-top:5px;border:0;background:transparent;color:#328653;font-weight:850;font-size:11px;cursor:pointer}.feed .zl-long-text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}.feed .zl-long-text.zl-text-expanded{display:block;overflow:visible;-webkit-line-clamp:unset}.zl-global-toast{animation:zl-toast-in .2s ease-out}@keyframes zl-toast-in{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
html[data-theme="dark"] .zl-feed-toolbar{background:linear-gradient(120deg,#1c2c21,#18221b);border-color:#2e4435}html[data-theme="dark"] .zl-feed-heading>strong{color:#d8eadc}html[data-theme="dark"] .zl-feed-filters button{background:#1b2720;border-color:#34463a;color:#b3c8b7}html[data-theme="dark"] .zl-feed-filters button.is-selected{background:#347e4d;color:#fff;border-color:#347e4d}html[data-theme="dark"] .zl-feed-empty{background:#17231b;border-color:#3b5542;color:#9db5a2}html[data-theme="dark"] .zl-feed-empty strong{color:#deefe1}html[data-theme="dark"] .zl-ghost-banner{background:#203627;color:#cbe9d1;border-color:#34583d}html[data-theme="dark"] .zl-ghost-banner.is-frozen{background:#202b3a;color:#cfdbf0;border-color:#3d4e67}html[data-theme="dark"] .zl-post-life-tag{background:#24402b;color:#9bd6a7}html[data-theme="dark"] .zl-post-life-tag.is-sandglass{background:#453723;color:#f0ca81}html[data-theme="dark"] .zl-composer-life{background:#18251c;border-color:#2c4934;color:#dcece0}html[data-theme="dark"] .zl-composer-life-head>span,html[data-theme="dark"] .zl-composer-life-note{color:#91a494}html[data-theme="dark"] .zl-composer-life-options button{background:#202c24;border-color:#374b3c;color:#d4e6d8}html[data-theme="dark"] .zl-composer-life-options button.is-selected{background:#233d2b;border-color:#55a56b}html[data-theme="dark"] .zl-composer-life-options button small{color:#9bb09f}html[data-theme="dark"] .zl-seed-card{background:linear-gradient(135deg,#17271d,#24271b);border-color:#304a37;color:#e0eee2}html[data-theme="dark"] .zl-seed-emblem,html[data-theme="dark"] .zl-feature-icon{background:#243a2a}html[data-theme="dark"] .zl-seed-heading p,html[data-theme="dark"] .zl-seed-disclaimer{color:#9cad9f}html[data-theme="dark"] .zl-seed-stage{background:#24402b;color:#a4ddb0}html[data-theme="dark"] .zl-seed-meter{background:#293b2e}html[data-theme="dark"] .zl-seed-tasks label{background:#1a281e;border-color:#2b402f}html[data-theme="dark"] .zl-seed-tasks small{color:#97a99a}html[data-theme="dark"] .zl-life-hero{background:linear-gradient(125deg,#1c3022,#2b2a1b);color:#dceddf}html[data-theme="dark"] .zl-life-hero p{color:#9fb6a4}html[data-theme="dark"] .zl-life-orbit{background:#35351d}html[data-theme="dark"] .zl-life-card{--card-bg:#151e18;--text-color:#e2ece4;--muted-color:#91a193;--line-color:#2b3b2f;--muted-bg:#1b2720;--input-bg:#18231c;--pill-bg:#26372a;background:#151e18;border-color:#2c3b30;color:#e2ece4;box-shadow:none}html[data-theme="dark"] .zl-switch{background:#445147}html[data-theme="dark"] .zl-switch.is-on{background:#34834e}html[data-theme="dark"] .zl-time-settings input{border-color:#34473a}html[data-theme="dark"] .zl-inline-status{background:#202b23;color:#9eafa1}html[data-theme="dark"] .zl-inline-status.is-active{background:#223e29;color:#aad9b2}html[data-theme="dark"] .zl-action-button{background:#223a29;color:#b5e6c0;border-color:#355940}html[data-theme="dark"] .zl-action-secondary{background:transparent;color:#d0dfd2}html[data-theme="dark"] .zl-demo-chat{background:#17221b;border-color:#2e3b31}html[data-theme="dark"] .zl-demo-avatar{background:#263d2d}html[data-theme="dark"] .zl-chat-bubble{background:#1e2a22;border-color:#324438}html[data-theme="dark"] .zl-chat-meta-preview span{background:#243329;color:#a1b5a4}html[data-theme="dark"] .zl-ghost-current{background:#202b23}html[data-theme="dark"] .zl-ghost-options button{background:#17221b;border-color:#2f4033;color:#dce9df}html[data-theme="dark"] .zl-ghost-options button.is-selected{background:#233e2a;border-color:#59a46c}html[data-theme="dark"] .zl-ghost-options small,html[data-theme="dark"] .zl-data-cleanup p,html[data-theme="dark"] .zl-muted-note{color:#9aa99c}html[data-theme="dark"] .zl-action-danger{background:#3a2422;border-color:#5d3430;color:#ffb9b1}html[data-theme="dark"] .zl-ghost-public-notice{background:#0f1419;color:#e0ece3}html[data-theme="dark"] .zl-ghost-public-notice p{color:#9eaea1}
body.zl-night-active .zl-feed-toolbar{background:linear-gradient(125deg,#19271e,#1d2220);border-color:#334236}body.zl-night-active .zl-feed-heading>strong{color:#dbe9dd}body.zl-night-active .post{box-shadow:0 5px 20px rgba(0,0,0,.06)}body.zl-night-active .post video{display:none!important}body.zl-night-active .post .post-media{filter:saturate(.72)}body.zl-reduce-motion *,body.zl-reduce-motion *::before,body.zl-reduce-motion *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}body.zl-night-active .zc-overlay{backdrop-filter:blur(5px)}
@media(prefers-reduced-motion:reduce){.zl-feed-filters button,.zl-switch,.zl-seed-meter span{transition:none!important}.zl-global-toast{animation:none!important}}
@media(max-width:600px){.zl-feed-toolbar{align-items:flex-start;gap:10px;padding:12px}.zl-feed-filters{width:100%}.zl-feed-filters button{flex:1;padding:8px 6px;font-size:9px}.zl-composer-life{margin-left:14px;margin-right:14px}.zl-composer-life-options{grid-template-columns:1fr}.zl-seed-top{flex-wrap:wrap}.zl-seed-stage{margin-left:auto}.zl-life-hero{padding:16px}.zl-life-orbit{width:44px;height:44px;border-radius:15px}.zl-life-hero h2{font-size:20px}.zl-life-card{padding:14px}.zl-card-heading h3{font-size:15px}.zl-audio-row{align-items:flex-start;flex-direction:column}.zl-ghost-options{grid-template-columns:1fr}.zl-ghost-options button{display:grid;grid-template-columns:28px 1fr;align-items:center}.zl-ghost-options button>span{grid-row:span 2}.zl-ghost-options small{grid-column:2}.zl-data-cleanup{align-items:flex-start;flex-direction:column}.zl-action-danger{align-self:flex-start}.zl-seed-heading h3{font-size:16px}}
.feed .post[hidden]{display:none!important}


/* =========================================================
   ZENZ LIQUID GLASS DOCK
   Namespaced overrides: only the bottom navigation is styled here.
========================================================= */
html body .navbar.dock-navbar,
html[data-theme="dark"] body .navbar.dock-navbar {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important;
    width: min(100%, 560px) !important;
    max-width: 560px !important;
    height: 80px !important;
    min-height: 80px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: block !important;
    transform: none !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    z-index: 100 !important;
    isolation: isolate;
    pointer-events: none;
}

.navbar.dock-navbar .dock-legacy-indicator {
    display: none !important;
    pointer-events: none !important;
}

.navbar.dock-navbar .dock-demo-container,
.navbar.dock-navbar #dockDemoArea {
    position: relative;
    width: 100%;
    height: 80px;
    min-height: 80px;
    margin: 0;
    padding: 0;
    overflow: visible;
    background: transparent;
    pointer-events: none;
}

.navbar.dock-navbar #dockRealWorld {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    border-radius: 28px;
}

.navbar.dock-navbar #dockRealWorld .dock-bg-shape-1,
.navbar.dock-navbar #dockRealWorld .dock-bg-shape-2 {
    position: absolute;
    border-radius: 50%;
    filter: blur(34px);
    pointer-events: none;
}

.navbar.dock-navbar #dockRealWorld .dock-bg-shape-1 {
    width: 180px;
    height: 180px;
    bottom: -112px;
    left: 5%;
    background: #71a7ff;
    opacity: .34;
}

.navbar.dock-navbar #dockRealWorld .dock-bg-shape-2 {
    width: 160px;
    height: 160px;
    top: -108px;
    right: 5%;
    background: #ed8cc7;
    opacity: .27;
}

.navbar.dock-navbar .dock-wrapper {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 80px;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    pointer-events: none;
}

.navbar.dock-navbar #dockTrack {
    position: relative;
    width: calc(100% - 20px);
    max-width: 520px;
    height: 80px;
    margin: 0 auto;
    padding: 0 8px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 0;
    overflow: visible;
    border: 1px solid rgba(255, 255, 255, .56);
    border-radius: 28px;
    background: rgba(247, 250, 255, .58);
    box-shadow: 0 18px 48px rgba(26, 38, 58, .16), inset 0 1px 1px rgba(255, 255, 255, .86), inset 0 -1px 1px rgba(255, 255, 255, .28);
    backdrop-filter: blur(22px) saturate(1.55);
    -webkit-backdrop-filter: blur(22px) saturate(1.55);
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    cursor: grab;
    pointer-events: auto;
    contain: layout paint;
}

.navbar.dock-navbar #dockTrack.dragging {
    cursor: grabbing;
}

.navbar.dock-navbar .dock-bubble {
    position: absolute;
    top: 7px;
    left: 8px;
    width: 80px;
    height: 66px;
    border-radius: 33px;
    z-index: 2;
    pointer-events: none;
    transform-origin: center center;
    will-change: transform;
    contain: layout paint;
}

.navbar.dock-navbar .dock-bubble-clone {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    z-index: 1;
    will-change: filter, transform;
    contain: strict;
    filter: url(#dockGlassFilter);
}

.navbar.dock-navbar .dock-clone-world {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    transform-origin: top left;
    background: transparent;
    will-change: transform;
}

.navbar.dock-navbar .dock-bubble-inner {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 1px solid rgba(255, 255, 255, .66);
    border-radius: inherit;
    background: linear-gradient(145deg, rgba(255,255,255,.48), rgba(255,255,255,.13));
    box-shadow: 0 9px 26px rgba(27, 42, 67, .17), inset 0 1px 2px rgba(255,255,255,.9), inset 0 -1px 2px rgba(255,255,255,.3);
    z-index: 3;
    pointer-events: none;
    backdrop-filter: blur(12px) saturate(1.6);
    -webkit-backdrop-filter: blur(12px) saturate(1.6);
}

.navbar.dock-navbar .dock-filter-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
}

.navbar.dock-navbar.use-backdrop-filter .dock-bubble-clone {
    display: none;
}

.navbar.dock-navbar.use-backdrop-filter .dock-bubble-inner {
    backdrop-filter: url(#dockGlassFilter) blur(9px) saturate(1.6);
    -webkit-backdrop-filter: url(#dockGlassFilter) blur(9px) saturate(1.6);
}

.navbar.dock-navbar .dock-item {
    position: relative;
    z-index: 10;
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    max-width: none;
    height: 100%;
    margin: 0;
    padding: 5px 1px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 0;
    border-radius: 18px;
    background: transparent;
    box-shadow: none;
    color: rgba(34, 43, 58, .65);
    opacity: .78;
    text-decoration: none;
    cursor: pointer;
    pointer-events: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.navbar.dock-navbar .dock-item.active {
    color: #fff;
    opacity: 1;
}

.navbar.dock-navbar .dock-item svg {
    display: block;
    flex: 0 0 auto;
    width: 25px;
    height: 25px;
    max-width: 25px;
    max-height: 25px;
    overflow: visible;
    color: currentColor;
    stroke: currentColor;
    fill: none;
    transition: transform .32s cubic-bezier(.34, 1.56, .64, 1), filter .24s ease;
}

.navbar.dock-navbar .dock-item__label {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    color: currentColor;
    font-family: inherit;
    font-size: 9px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.015em;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: .94;
}

.navbar.dock-navbar .dock-item.active svg {
    transform: translateY(-1px) scale(1.12);
    filter: drop-shadow(0 1px 5px rgba(255,255,255,.36));
}

.navbar.dock-navbar .dock-item:focus-visible {
    outline: 2px solid rgba(72, 137, 255, .9);
    outline-offset: -4px;
}

.navbar.dock-navbar .dock-item.create,
.navbar.dock-navbar .dock-item.create:hover,
.navbar.dock-navbar .dock-item.create:active {
    width: auto;
    height: 100%;
    margin: 0;
    padding: 5px 1px 4px;
    border: 0;
    border-radius: 18px;
    background: transparent;
    color: rgba(34, 43, 58, .76);
    box-shadow: none;
    transform: none;
}

.navbar.dock-navbar .dock-item.create svg {
    width: 27px;
    height: 27px;
    stroke-width: 2.3;
}

.navbar.dock-navbar .dock-item.create .dock-item__label {
    font-size: 8.5px;
}

html[data-theme="dark"] body .navbar.dock-navbar #dockTrack {
    border-color: rgba(255, 255, 255, .17);
    background: rgba(17, 23, 32, .61);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .36), inset 0 1px 1px rgba(255,255,255,.18), inset 0 -1px 1px rgba(255,255,255,.045);
}

html[data-theme="dark"] body .navbar.dock-navbar .dock-item,
html[data-theme="dark"] body .navbar.dock-navbar .dock-item.create {
    color: rgba(244, 247, 252, .72);
}

html[data-theme="dark"] body .navbar.dock-navbar .dock-item.active {
    color: #fff;
}

html[data-theme="dark"] body .navbar.dock-navbar .dock-bubble-inner {
    border-color: rgba(255, 255, 255, .34);
    background: linear-gradient(145deg, rgba(255,255,255,.27), rgba(255,255,255,.055));
    box-shadow: 0 9px 26px rgba(0,0,0,.3), inset 0 1px 2px rgba(255,255,255,.5), inset 0 -1px 2px rgba(255,255,255,.12);
}

@media (max-width: 380px) {
    html body .navbar.dock-navbar,
    html[data-theme="dark"] body .navbar.dock-navbar {
        bottom: max(7px, env(safe-area-inset-bottom, 0px)) !important;
        height: 74px !important;
        min-height: 74px !important;
    }
    .navbar.dock-navbar .dock-demo-container,
    .navbar.dock-navbar #dockDemoArea,
    .navbar.dock-navbar .dock-wrapper,
    .navbar.dock-navbar #dockTrack {
        height: 74px;
        min-height: 74px;
    }
    .navbar.dock-navbar .dock-item__label {
        font-size: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .navbar.dock-navbar #dockTrack,
    .navbar.dock-navbar .dock-item svg,
    .navbar.dock-navbar .dock-item__label {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}


/* =========================================================
   ZENZ ACCESSIBILITY & MOBILE USABILITY PATCH
   Additive overrides; original components and glass styling retained.
========================================================= */

/* Selectable content; controls remain non-selectable. */
body { -webkit-user-select: text; user-select: text; }
.post-text, .zc-caption, .zc-post-canvas, .zc-caption-frame,
.zp-bio, .zf-person-name, .zf-person-id, .zf-request-note,
.zf-group-name, .zf-group-members, .notification-text,
.notification-time, .search-result-message, #searchResultTitle,
#searchResultText, .zd-demo-disclaimer, .security-console__body,
.zc-preview-card, .topic-result-message {
    -webkit-user-select: text !important;
    user-select: text !important;
}
.header-btn, .search-close, .search-clear, .notification-mark,
.bookmark-btn, .post-action, .comment-btn, .topic, .nav-item,
.dock-item, .zc-icon-btn, .zc-sheet-close, .zc-emoji-toggle,
.zc-emoji-tray button, .zf-close, .moment-avatar,
.zc-sheet-grabber, #dockTrack, #dockTrack * {
    -webkit-user-select: none;
    user-select: none;
}
input, textarea, select, [contenteditable="true"] {
    -webkit-user-select: text;
    user-select: text;
}

/* 44px target minimums; keep glyph sizes unchanged. */
.header-btn { width:44px; height:44px; min-width:44px; min-height:44px; }
.search-close { width:44px; min-width:44px; height:44px; }
.search-clear { width:44px; min-width:44px; height:44px; }
.notification-mark { min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
.bookmark-btn { width:44px; min-width:44px; height:44px; min-height:44px; }
.post-actions { align-items:center; gap:clamp(3px,1.5vw,10px); }
.post-action, .comment-btn { min-width:44px; min-height:44px; padding-left:4px; padding-right:4px; justify-content:center; align-items:center; }
.topic { min-width:44px; min-height:44px; height:44px; }
.topic-indicator { top:4px; height:36px; }
.moment.add { appearance:none; -webkit-appearance:none; display:block; border:0; padding:0; background:transparent; color:inherit; font:inherit; cursor:pointer; }
.moment.add:focus-visible { outline:2px solid var(--zenz-focus-ring); outline-offset:3px; border-radius:12px; }
.nav-item { min-width:44px; min-height:44px; }
.navbar.dock-navbar .dock-item { min-width:44px; min-height:44px; }
.zc-icon-btn, .zc-sheet-close { width:44px; height:44px; min-width:44px; min-height:44px; }
.zc-next-btn, .zc-add-media, .zc-customize-btn, .zc-context-chip,
.zc-audience-quick, .zc-apply-style, .zc-reset-style,
.zc-back-edit, .zf-button, .zf-close, .zf-tab,
.zp-button, .zp-button-primary, .zp-button-secondary,
.zp-button-danger, .zd-button, .dialog-btn, .ios-dialog-btn,
.ios-dialog-option, .security-icon-button, .zc-emoji-toggle {
    min-height:44px;
}
.zc-emoji-tray button { min-width:44px; min-height:44px; }
.zf-close, .security-icon-button { width:44px; height:44px; min-width:44px; }
.zf-person-tools .zf-button, .zf-request-actions .zf-button,
.zf-group-actions .zf-button { min-height:44px; }

/* Composer's optional topic selector. */
.zc-topic-picker { display:flex; align-items:center; flex-wrap:wrap; gap:9px; margin:0 25px 12px; color:#7d897f; font-size:11px; font-weight:750; }
.zc-topic-picker select { min-width:0; min-height:40px; padding:0 11px; border:1px solid rgba(0,0,0,.08); border-radius:999px; background:#fff; color:#29332d; font:inherit; font-size:11px; }

/* Consistent keyboard focus without shifting layout. */
:root { --zenz-focus-ring:#246fbd; --zenz-focus-halo:rgba(36,111,189,.20); }
html[data-theme="dark"] { --zenz-focus-ring:#9bcfff; --zenz-focus-halo:rgba(115,183,255,.25); }
:where(button,a[href],input,select,textarea,[tabindex]:not([tabindex="-1"])):focus-visible {
    outline:2px solid var(--zenz-focus-ring) !important;
    outline-offset:2px;
    box-shadow:0 0 0 3px var(--zenz-focus-halo);
}
.navbar.dock-navbar .dock-item:focus-visible {
    outline:2px solid var(--zenz-focus-ring) !important;
    outline-offset:-4px;
    box-shadow:inset 0 0 0 2px var(--zenz-focus-halo);
}
:where(button,a[href],input,select,textarea):focus:not(:focus-visible) { outline:none; }

/* Boundary-aware fades for horizontal carousels. */
.moments-section, .topic-section { position:relative; --zenz-scroll-edge:rgba(255,255,255,.96); }
.moments-section::before,.moments-section::after,.topic-section::before,.topic-section::after {
    content:""; position:absolute; z-index:5; width:18px; pointer-events:none; opacity:0; transition:opacity .18s ease;
}
.moments-section::before,.moments-section::after { top:44px; height:62px; }
.topic-section::before,.topic-section::after { top:43px; height:48px; }
.moments-section::before,.topic-section::before { left:12px; background:linear-gradient(to right,var(--zenz-scroll-edge),transparent); }
.moments-section::after,.topic-section::after { right:12px; background:linear-gradient(to left,var(--zenz-scroll-edge),transparent); }
.moments-section.zenz-hscroll-overflow:not(.zenz-hscroll-start)::before,
.topic-section.zenz-hscroll-overflow:not(.zenz-hscroll-start)::before,
.moments-section.zenz-hscroll-overflow:not(.zenz-hscroll-end)::after,
.topic-section.zenz-hscroll-overflow:not(.zenz-hscroll-end)::after { opacity:.82; }
html[data-theme="dark"] .moments-section,html[data-theme="dark"] .topic-section { --zenz-scroll-edge:rgba(27,36,48,.97); }

/* Topic/search result state and local-only interaction dialogs. */
.post.topic-hidden { display:none !important; }
.topic-result-message { margin:12px 0; padding:20px 16px; border:1px solid var(--line); border-radius:16px; background:var(--card); color:var(--muted); text-align:center; font-size:13px; line-height:1.55; }
.topic-result-message[hidden] { display:none !important; }
.zenz-feed-toast { position:fixed; left:50%; bottom:calc(100px + env(safe-area-inset-bottom)); z-index:100050; width:max-content; max-width:min(90vw,430px); padding:11px 15px; border:1px solid rgba(255,255,255,.14); border-radius:14px; background:rgba(28,34,30,.95); color:#fff; font-size:12px; line-height:1.45; text-align:center; box-shadow:0 10px 30px rgba(0,0,0,.2); opacity:0; pointer-events:none; transform:translate(-50%,8px); transition:opacity .18s ease,transform .18s ease; }
.zenz-feed-toast.is-visible { opacity:1; transform:translate(-50%,0); }
.zenz-comment-dialog,.zenz-moment-dialog { width:min(540px,calc(100vw - 24px)); max-width:none; max-height:min(88vh,88dvh); padding:0; border:0; border-radius:22px; background:transparent; color:var(--text); }
.zenz-comment-dialog::backdrop,.zenz-moment-dialog::backdrop { background:rgba(15,22,18,.48); backdrop-filter:blur(5px); }
.zenz-comment-dialog__panel,.zenz-moment-dialog form { max-height:min(88vh,88dvh); padding:18px; overflow:auto; overscroll-behavior:contain; border:1px solid var(--line); border-radius:22px; background:var(--card); box-shadow:0 22px 70px rgba(0,0,0,.22); }
.zenz-comment-dialog header,.zenz-moment-dialog header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; }
.zenz-comment-dialog h2,.zenz-moment-dialog h2 { font-size:18px; font-weight:800; }
.zenz-comment-dialog header p,.zenz-moment-dialog form>p { margin-top:4px; color:var(--muted); font-size:11px; line-height:1.5; }
.zenz-comment-dialog header button,.zenz-moment-dialog header button { width:44px; height:44px; border:0; border-radius:50%; background:rgba(120,130,120,.1); color:var(--text); font-size:23px; }
.zenz-comment-local-note,.zenz-moment-dialog form>p { padding:10px 12px; border-radius:12px; background:rgba(60,155,104,.08); color:var(--muted); font-size:11px; line-height:1.55; }
.zenz-comment-empty { padding:18px; color:var(--muted); text-align:center; font-size:12px; }
.zenz-comment-list { display:grid; gap:9px; max-height:280px; overflow:auto; }
.zenz-comment-item { padding:11px; border:1px solid var(--line); border-radius:13px; background:rgba(120,130,120,.05); }
.zenz-comment-item strong { font-size:11px; }
.zenz-comment-item p { margin:6px 0; font-size:13px; line-height:1.5; overflow-wrap:anywhere; user-select:text; }
.zenz-comment-item time { color:var(--muted); font-size:10px; }
.zenz-comment-dialog form { display:grid; gap:8px; margin-top:14px; }
.zenz-comment-dialog label,.zenz-moment-dialog label { font-size:12px; font-weight:750; }
.zenz-comment-dialog textarea,.zenz-moment-dialog input { width:100%; min-height:44px; padding:10px; border:1px solid var(--line); border-radius:11px; background:var(--card); color:var(--text); font:inherit; font-size:13px; user-select:text; }
.zenz-comment-actions,.zenz-moment-dialog footer { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:8px; margin-top:8px; }
.zenz-comment-actions button,.zenz-moment-dialog footer button { min-height:44px; padding:0 14px; border:1px solid var(--line); border-radius:11px; background:transparent; color:var(--text); font:inherit; font-size:11px; font-weight:800; }
.zenz-comment-actions .zenz-comment-submit,.zenz-moment-dialog footer button[type="submit"] { border-color:#32875a; background:#3c9b68; color:#fff; }
.zenz-moment-dialog form { display:grid; gap:10px; }
.zenz-moment-dialog [data-moment-preview] { display:grid; place-items:center; min-height:100px; max-height:260px; overflow:hidden; border:1px solid var(--line); border-radius:14px; }
.zenz-moment-dialog [data-moment-preview][hidden] { display:none; }
.zenz-moment-dialog [data-moment-preview] img { max-width:100%; max-height:250px; object-fit:contain; }
.zenz-moment-dialog [data-moment-error] { color:#bd4545; font-size:11px; }
.zenz-local-moment { position:relative; }
.zenz-local-moment .moment-avatar { display:block; object-fit:cover; }
.zenz-moment-remove { position:absolute; top:-3px; right:-3px; z-index:2; width:22px; height:22px; border:1px solid rgba(0,0,0,.12); border-radius:50%; background:#fff; color:#333; font-size:15px; cursor:pointer; }
.zd-demo-disclaimer { margin:0 2px 14px; padding:12px 14px; border:1px solid rgba(204,153,53,.25); border-radius:15px; background:rgba(233,188,87,.09); }
.zd-demo-disclaimer strong { display:block; margin-bottom:5px; font-size:10px; letter-spacing:.06em; }
.zd-demo-disclaimer p { color:var(--zd-muted); font-size:11px; line-height:1.55; }
.zenz-demo-mode-badge { display:inline-flex; align-items:center; min-height:24px; padding:0 8px; border:1px solid rgba(60,155,104,.22); border-radius:999px; background:rgba(60,155,104,.09); color:#287b50; font-size:9px; font-weight:850; white-space:nowrap; }

/* Dynamic viewport and safe-area dialog limits. */
.zf-modal,.dialog-backdrop,.ios-dialog-backdrop { max-height:100vh; max-height:100dvh; }
.zf-dialog { max-height:min(88vh,88dvh); overflow:auto; overscroll-behavior:contain; }
.bottom-sheet { max-height:min(90vh,90dvh); overflow:auto; overscroll-behavior:contain; }
.dialog-box,.ios-dialog-box { max-height:min(88vh,88dvh); overflow:auto; overscroll-behavior:contain; }
.zc-dialog { max-height:100vh; max-height:100dvh; }
.zc-sheet { max-height:min(90vh,90dvh); overflow:auto; overscroll-behavior:contain; }
.security-console__panel { max-height:calc(100vh - 24px); max-height:calc(100dvh - 24px); overflow:auto; overscroll-behavior:contain; }
html,body { max-width:100%; }
.main,.moments-section,.topic-section,.feed-section,.feed { min-width:0; max-width:100%; }

/* Dock layers are promoted only during animation by the JS controller. */
.navbar.dock-navbar .dock-clone-world { will-change:auto; }
.navbar.dock-navbar.dock-low-performance .dock-clone-world { display:none !important; }
.navbar.dock-navbar.dock-low-performance .dock-bubble-inner { backdrop-filter:blur(12px) saturate(1.4); -webkit-backdrop-filter:blur(12px) saturate(1.4); }
.navbar.dock-navbar.dock-low-performance .dock-bubble-clone { display:none !important; }

@media(max-width:360px) {
    .header { padding-left:12px; padding-right:12px; }
    .post-actions { gap:3px; }
    .post-action,.comment-btn { padding-left:3px; padding-right:3px; font-size:12px; }
    .zc-topic-picker { margin-left:18px; margin-right:18px; }
}
@media(orientation:landscape) and (max-height:500px) {
    .zf-dialog,.dialog-box,.ios-dialog-box { max-height:calc(100dvh - 16px); }
    .zc-sheet { max-height:94dvh; }
}
@media(prefers-reduced-motion:reduce) {
    .moments-section::before,.moments-section::after,.topic-section::before,.topic-section::after { transition:none; }
    .zenz-feed-toast { transition:none; }
}


/* =========================================================
   ZENZ TARGETED UI PATCH — DOCK + SEARCH
   Only overrides the requested Dock and Search presentation.
========================================================= */

/* Make Create Post a fifth, visually uniform Dock item. */
.navbar.dock-navbar .dock-item.create,
.navbar.dock-navbar .dock-item.create:hover,
.navbar.dock-navbar .dock-item.create:active,
.navbar.dock-navbar .dock-item.create:focus {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 5px 1px 4px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    border: 0 !important;
    border-radius: 18px !important;
    background: transparent !important;
    color: rgba(34, 43, 58, .65) !important;
    box-shadow: none !important;
    transform: none !important;
}

.navbar.dock-navbar .dock-item.create svg {
    width: 25px !important;
    height: 25px !important;
    max-width: 25px !important;
    max-height: 25px !important;
    stroke-width: 2 !important;
}

.navbar.dock-navbar .dock-item.create .dock-item__label {
    font-size: 9px !important;
}

/* Keep the dark Dock palette intact while removing the green tile. */
html[data-theme="dark"] body .navbar.dock-navbar .dock-item.create {
    color: rgba(244, 247, 252, .72) !important;
}

html[data-theme="dark"] body .navbar.dock-navbar .dock-item.create.active {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Light mode: readable active item on the pale glass bubble. */
html:not([data-theme="dark"]) body .navbar.dock-navbar .dock-item.active {
    color: #111827 !important;
}

html:not([data-theme="dark"]) body .navbar.dock-navbar #dockTrack {
    border: 1px solid rgba(0, 0, 0, .08) !important;
}

/* Remove the input's own focus rectangle; put focus feedback on its frame. */
.search-expand-input,
.search-expand-input:focus,
.search-expand-input:focus-visible {
    display: block;
    flex: 1 1 auto;
    width: 0;
    min-width: 0;
    height: 100%;
    align-self: stretch;
    margin: 0;
    border: 0 !important;
    border-radius: 0;
    outline: none !important;
    box-shadow: none !important;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
}

.search-expand {
    transition:
        width .25s cubic-bezier(.4, 0, .2, 1),
        transform .25s cubic-bezier(.4, 0, .2, 1),
        opacity .1s cubic-bezier(.4, 0, .2, 1),
        border-color .18s ease,
        box-shadow .18s ease;
}

.search-expand:focus-within {
    border-color: rgba(47, 129, 83, .58);
    box-shadow:
        0 0 0 3px rgba(47, 129, 83, .11),
        0 4px 14px rgba(0, 0, 0, .05);
}

html[data-theme="dark"] .search-expand:focus-within {
    border-color: rgba(91, 176, 119, .68);
    box-shadow:
        0 0 0 3px rgba(60, 155, 104, .18),
        0 4px 14px rgba(0, 0, 0, .24);
}


/* =========================================================
   ZENZ CONSENT GATE — isolated styles
   Scoped to zenz-consent-* to avoid existing UI collisions.
========================================================= */
.zenz-consent-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(18px, env(safe-area-inset-top, 0px)) 16px max(18px, env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: rgba(10, 16, 12, .66);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    visibility: visible !important;
    pointer-events: auto !important;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-user-select: text;
    user-select: text;
}

.zenz-consent-overlay[hidden] {
    display: none !important;
}

/* The login screen has its own auth lock; keep this consent layer visible above it. */
body.zenz-auth-locked > .zenz-consent-overlay {
    visibility: visible !important;
    pointer-events: auto !important;
}

body.zenz-consent-open {
    overflow: hidden !important;
}

.zenz-consent-panel {
    width: min(100%, 470px);
    max-height: calc(100dvh - 36px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    margin: auto;
    padding: clamp(22px, 5vw, 34px);
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 26px;
    background: #ffffff;
    color: #17221b;
    box-shadow: 0 28px 90px rgba(0, 0, 0, .3), 0 3px 12px rgba(0, 0, 0, .08);
    -webkit-overflow-scrolling: touch;
    outline: none;
}

.zenz-consent-mark {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: 18px;
    border-radius: 14px;
    background: #eaf5ed;
    color: #267448;
    font-size: 21px;
    font-weight: 900;
    letter-spacing: -.06em;
}

.zenz-consent-eyebrow {
    margin: 0 0 8px;
    color: #39845a;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .16em;
}

.zenz-consent-title {
    margin: 0 0 13px;
    color: #17221b;
    font-size: clamp(21px, 5vw, 27px);
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: -.035em;
}

.zenz-consent-description {
    margin: 0;
    color: #59665e;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.65;
}

.zenz-consent-description strong {
    color: #267448;
    font-weight: 850;
}

.zenz-consent-check-row {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: start;
    gap: 11px;
    margin-top: 23px;
    padding: 15px;
    border: 1px solid rgba(45, 105, 68, .14);
    border-radius: 15px;
    background: #f7faf7;
    color: #455249;
    font-size: 12px;
    font-weight: 550;
    line-height: 1.6;
    cursor: pointer;
}

.zenz-consent-checkbox {
    width: 19px;
    height: 19px;
    margin: 1px 0 0;
    accent-color: #2f8753;
    cursor: pointer;
}

.zenz-consent-policy-highlight {
    display: inline;
    padding: 1px 4px 2px;
    border-radius: 5px;
    background: #e3f3e8;
    font-weight: 900;
}

.zenz-consent-policy-highlight a {
    color: #176b3d;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.zenz-consent-policy-highlight a:focus-visible {
    border-radius: 3px;
    outline: 2px solid #2f8753;
    outline-offset: 3px;
}

.zenz-consent-confirm {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 49px;
    margin-top: 17px;
    padding: 12px 18px;
    border: 0;
    border-radius: 14px;
    background: #2f8753;
    color: #ffffff;
    font: inherit;
    font-size: 14px;
    font-weight: 850;
    cursor: pointer;
    transition: background .18s ease, opacity .18s ease, transform .18s ease, box-shadow .18s ease;
    -webkit-tap-highlight-color: transparent;
}

.zenz-consent-confirm:disabled {
    background: #d9dfdb;
    color: #858e88;
    box-shadow: none;
    cursor: not-allowed;
    opacity: 1;
}

.zenz-consent-confirm:not(:disabled) {
    background: #2f8753;
    box-shadow: 0 7px 18px rgba(47, 135, 83, .2);
}

.zenz-consent-confirm:not(:disabled):active {
    transform: scale(.985);
}

.zenz-consent-confirm:focus-visible {
    outline: 3px solid rgba(47, 135, 83, .28);
    outline-offset: 3px;
}

html[data-theme="dark"] .zenz-consent-panel {
    border-color: rgba(255, 255, 255, .1);
    background: #17211b;
    color: #edf5ef;
    box-shadow: 0 28px 90px rgba(0, 0, 0, .55), 0 3px 12px rgba(0, 0, 0, .22);
}

html[data-theme="dark"] .zenz-consent-mark {
    background: #233d2b;
    color: #9edbb0;
}

html[data-theme="dark"] .zenz-consent-eyebrow,
html[data-theme="dark"] .zenz-consent-description strong {
    color: #83d19b;
}

html[data-theme="dark"] .zenz-consent-title {
    color: #edf5ef;
}

html[data-theme="dark"] .zenz-consent-description {
    color: #b3c2b7;
}

html[data-theme="dark"] .zenz-consent-check-row {
    border-color: rgba(125, 190, 143, .18);
    background: #1e2b22;
    color: #d1ded4;
}

html[data-theme="dark"] .zenz-consent-policy-highlight {
    background: #264632;
}

html[data-theme="dark"] .zenz-consent-policy-highlight a {
    color: #a8e5b8;
}

html[data-theme="dark"] .zenz-consent-confirm:disabled {
    background: #39443d;
    color: #9aa69d;
}

html[data-theme="dark"] .zenz-consent-confirm:not(:disabled) {
    background: #55ad76;
    color: #0d1a11;
}

@media (max-width: 520px) {
    .zenz-consent-overlay {
        align-items: center;
        padding-right: 12px;
        padding-left: 12px;
    }

    .zenz-consent-panel {
        width: 100%;
        padding: 23px 20px;
        border-radius: 22px;
    }
}

@media (max-height: 520px) and (orientation: landscape) {
    .zenz-consent-overlay {
        align-items: flex-start;
    }

    .zenz-consent-panel {
        margin: 8px auto;
        padding: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .zenz-consent-confirm {
        transition: none;
    }
}

/* =========================================================
   ZENZ IN-APP PRIVACY POLICY READER — isolated styles
   All selectors use the zenz-policy-* namespace.
========================================================= */
.zenz-policy-overlay {
    position: fixed;
    inset: 0;
    z-index: 100002;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(12px, env(safe-area-inset-top, 0px)) 12px max(12px, env(safe-area-inset-bottom, 0px));
    background: rgba(8, 13, 10, .72);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    overscroll-behavior: contain;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #1b241e;
}

.zenz-policy-overlay[hidden] {
    display: none !important;
}

.zenz-policy-backdrop {
    position: absolute;
    inset: 0;
}

.zenz-policy-reader {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(100%, 880px);
    max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    overflow: hidden;
    border: 1px solid rgba(15, 25, 18, .1);
    border-radius: 22px;
    background: #ffffff;
    color: #1b241e;
    box-shadow: 0 28px 100px rgba(0, 0, 0, .35);
    outline: none;
}

.zenz-policy-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 26px 18px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    background: rgba(255, 255, 255, .98);
}

.zenz-policy-header-copy {
    min-width: 0;
}

.zenz-policy-eyebrow {
    margin: 0 0 7px;
    color: #39845a;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .13em;
}

.zenz-policy-header h2 {
    margin: 0;
    color: #17221b;
    font-size: clamp(20px, 4vw, 26px);
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: -.03em;
}

.zenz-policy-header-subtitle {
    margin: 7px 0 0;
    color: #78827b;
    font-size: 12px;
    line-height: 1.5;
}

.zenz-policy-close {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-width: 68px;
    min-height: 40px;
    padding: 9px 14px;
    border: 1px solid rgba(47, 135, 83, .2);
    border-radius: 11px;
    background: #f1f7f2;
    color: #216b3d;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.zenz-policy-close:hover {
    background: #e8f3eb;
}

.zenz-policy-close:focus-visible {
    outline: 3px solid rgba(47, 135, 83, .28);
    outline-offset: 3px;
}

.zenz-policy-scroll {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: clamp(20px, 4vw, 38px) clamp(18px, 6vw, 64px);
    color: #303a33;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
}

.zenz-policy-scroll:focus-visible {
    outline: 2px solid rgba(47, 135, 83, .3);
    outline-offset: -3px;
}

.zenz-policy-document {
    width: min(100%, 720px);
    margin: 0 auto;
    overflow-wrap: anywhere;
    font-size: 14px;
    line-height: 1.78;
}

.zenz-policy-doc-title {
    margin: 0 0 6px;
    color: #17221b;
    font-size: clamp(25px, 5vw, 34px);
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: -.035em;
}

.zenz-policy-updated {
    margin: 0 0 26px !important;
    color: #7a857d;
    font-size: 12px;
    font-weight: 650;
}

.zenz-policy-h2 {
    margin: 34px 0 12px;
    padding-top: 7px;
    color: #1b2b20;
    font-size: 19px;
    font-weight: 850;
    line-height: 1.35;
    letter-spacing: -.018em;
}

.zenz-policy-h3 {
    margin: 22px 0 8px;
    color: #2d4936;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.45;
}

.zenz-policy-paragraph {
    margin: 0 0 14px;
    color: #3e4942;
    font-size: 13px;
    line-height: 1.8;
    white-space: normal;
}

.zenz-policy-list {
    margin: 2px 0 18px;
    padding-left: 23px;
    color: #3e4942;
}

.zenz-policy-list li {
    margin: 0 0 9px;
    padding-left: 4px;
    font-size: 13px;
    line-height: 1.75;
}

.zenz-policy-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 22px;
    border-top: 1px solid rgba(0, 0, 0, .08);
    background: #fbfcfb;
    color: #89928c;
    font-size: 11px;
}

.zenz-policy-close-bottom {
    min-height: 34px;
    padding: 6px 12px;
    font-size: 12px;
}

html[data-theme="dark"] .zenz-policy-reader {
    border-color: rgba(255, 255, 255, .1);
    background: #17211b;
    color: #eaf1eb;
}

html[data-theme="dark"] .zenz-policy-header {
    border-bottom-color: rgba(255, 255, 255, .1);
    background: #17211b;
}

html[data-theme="dark"] .zenz-policy-header h2,
html[data-theme="dark"] .zenz-policy-doc-title {
    color: #edf5ef;
}

html[data-theme="dark"] .zenz-policy-eyebrow {
    color: #83d19b;
}

html[data-theme="dark"] .zenz-policy-header-subtitle,
html[data-theme="dark"] .zenz-policy-updated {
    color: #a0b0a4;
}

html[data-theme="dark"] .zenz-policy-close {
    border-color: rgba(131, 209, 155, .22);
    background: #233d2b;
    color: #b9edc7;
}

html[data-theme="dark"] .zenz-policy-close:hover {
    background: #2a4933;
}

html[data-theme="dark"] .zenz-policy-scroll,
html[data-theme="dark"] .zenz-policy-paragraph,
html[data-theme="dark"] .zenz-policy-list {
    color: #cad6cd;
}

html[data-theme="dark"] .zenz-policy-h2 {
    color: #e0efe4;
}

html[data-theme="dark"] .zenz-policy-h3 {
    color: #b7dfc2;
}

html[data-theme="dark"] .zenz-policy-footer {
    border-top-color: rgba(255, 255, 255, .1);
    background: #141c17;
    color: #9aa99e;
}

@media (max-width: 560px) {
    .zenz-policy-overlay {
        align-items: stretch;
        padding: max(8px, env(safe-area-inset-top, 0px)) 8px max(8px, env(safe-area-inset-bottom, 0px));
    }

    .zenz-policy-reader {
        width: 100%;
        max-height: calc(100dvh - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
        border-radius: 17px;
    }

    .zenz-policy-header {
        gap: 10px;
        padding: 16px 15px 13px;
    }

    .zenz-policy-close {
        min-width: 58px;
        min-height: 38px;
        padding: 8px 10px;
    }

    .zenz-policy-scroll {
        padding: 20px 17px 28px;
    }

    .zenz-policy-document {
        font-size: 13px;
        line-height: 1.72;
    }

    .zenz-policy-h2 {
        margin-top: 28px;
        font-size: 17px;
    }

    .zenz-policy-h3 {
        font-size: 14px;
    }

    .zenz-policy-paragraph,
    .zenz-policy-list li {
        font-size: 12.5px;
        line-height: 1.75;
    }

    .zenz-policy-footer {
        padding: 9px 14px;
    }
}

@media (max-height: 520px) and (orientation: landscape) {
    .zenz-policy-reader {
        max-height: calc(100dvh - 12px);
    }

    .zenz-policy-header {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .zenz-policy-scroll {
        padding-top: 14px;
        padding-bottom: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .zenz-policy-close {
        transition: none;
    }
}