/* ============================================================
   UNIVERSE REDESIGN — full-section scroll layout
   ============================================================ */

/* Kill any backdrop-filter bleed from old styles.css inside our sections */
.full-section,
.full-section * {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* Scroll Progress Bar */
.scroll-bar {
    position: fixed;
    top: 0; left: 0;
    height: 4px;
    background: linear-gradient(90deg, #ff6b6b, #f093fb, #4ecdc4, #f6d365);
    background-size: 300% 100%;
    animation: barShimmer 3s linear infinite;
    z-index: 9999;
    width: 0%;
    transition: width 0.15s linear;
}
@keyframes barShimmer {
    0%   { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

/* Side Dot Navigation */
.dot-nav {
    position: fixed;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 14px;
    z-index: 1000;
    width: auto;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.dot-link {
    display: block;
    width: 11px; height: 11px;
    border-radius: 50%;
    background: rgba(255,255,255,0.35);
    border: 2px solid rgba(255,255,255,0.55);
    transition: all 0.3s ease;
    position: relative;
    cursor: pointer;
    text-decoration: none;
}
.dot-link::after {
    content: attr(data-label);
    position: absolute;
    right: 20px; top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.75);
    color: #fff;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-family: 'Poppins', sans-serif;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}
.dot-link:hover::after,
.dot-link.active::after { opacity: 1; }
.dot-link.active {
    background: #fff;
    border-color: #fff;
    transform: scale(1.4);
    box-shadow: 0 0 10px rgba(255,255,255,0.6);
}
.dot-link:hover { background: rgba(255,255,255,0.75); transform: scale(1.25); }

/* Full Section Base */
.full-section {
    position: relative;
    min-height: auto;
    padding: 60px 0 50px;
    overflow: hidden;
}
/* Active page sections need visible overflow for infinite scroll + sticky headers */
body[data-page="activity"] .full-section.activity-section-active,
body[data-page="vibe"] #oneliners,
body[data-page="ideas"] #suggestions {
    overflow: visible;
}
.sec-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 2;
}

/* ── Tab-Based Page Navigation ── */
body[data-page] .full-section { display: none !important; padding-bottom: 90px; }
body[data-page="vibe"] #oneliners,
body[data-page="think"] #friends,
body[data-page="ideas"] #suggestions,
body[data-page="gallery"] #photos,
body[data-page="notes"] #notesPage,
body[data-page="pins"] #pinsPage { display: block !important; }
body[data-page] .dot-nav,
body[data-page] .scroll-bar,
body[data-page] .wave-div { display: none !important; }
body[data-page="vibe"] #oneliners,
body[data-page="think"] #friends,
body[data-page="ideas"] #suggestions,
body[data-page="gallery"] #photos,
body[data-page="notes"] #notesPage,
body[data-page="pins"] #pinsPage {
    min-height: calc(100vh - 108px);
}
body[data-page="gallery"] #gallery-container,
body[data-page="gallery"] #profileOccasionsView {
    opacity: 1 !important;
    transform: none !important;
}
body[data-page="activity"] #routine,
body[data-page="activity"] #workouts,
body[data-page="activity"] #food,
body[data-page="activity"] #plans,
body[data-page="activity"] #saved {
    min-height: calc(100vh - 108px);
}
body[data-page="activity"] .full-section.activity-section-active {
    display: block !important;
}
/* Page transition overlay — captures old background, fades out to reveal new page */
#_pgTrans {
    position: fixed;
    inset: 0;
    z-index: 9990;
    pointer-events: none;
    opacity: 0;
}
body[data-page="vibe"] {
    background: var(--sec-oneliners-grad);
}
body[data-page="think"] {
    background: var(--sec-friends-grad);
}
body[data-page="ideas"] {
    background: var(--sec-suggestions-grad);
}
body[data-page="gallery"] {
    background: var(--sec-galaxy-grad);
}
body[data-page="notes"] {
    background:
        radial-gradient(circle at top, rgba(255, 215, 92, 0.08), transparent 30%),
        radial-gradient(circle at 22% 22%, rgba(121,154,255,0.12), transparent 36%),
        linear-gradient(180deg, #121622 0%, #171c2b 44%, #1a202f 100%);
}
body[data-page="activity"] {
    background:
        radial-gradient(circle at top, rgba(121,154,255,0.16), transparent 28%),
        linear-gradient(180deg, #0d1222 0%, #12182d 42%, #181a24 100%);
}

/* Activity Page Header (inline health ring for Activity tab) */
.activity-page-header {
    text-align: center;
    padding: 18px 18px 10px;
    background: transparent;
}
.activity-chip-bar {
    position: sticky;
    top: 0;
    z-index: 14;
    display: flex;
    gap: 10px;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding: 8px 18px 12px;
    background: transparent;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.activity-chip-bar::-webkit-scrollbar { display: none; }
.activity-chip {
    flex: 0 0 auto;
    white-space: nowrap;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.76);
    padding: 10px 18px;
    font: 700 0.88rem 'Poppins', sans-serif;
    cursor: pointer;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.activity-chip:hover,
.activity-chip.active {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.34);
    color: #fff;
}
.activity-chip.active { transform: translateY(-1px); }
.profile-chip-bar {
    display: flex;
    gap: 10px;
    margin: 0 auto 18px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
}
.profile-chip-bar::-webkit-scrollbar { display: none; }
.gallery-toolbar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin: 0 auto 18px;
}
.gallery-toolbar .profile-chip-bar {
    margin: 0;
}
.gallery-toolbar #profileChipBar {
    flex: 1 1 auto;
}
.profile-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.76);
    padding: 10px 16px;
    font: 600 0.84rem 'Poppins', sans-serif;
    cursor: pointer;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.profile-chip:hover,
.profile-chip.active {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.34);
    color: #fff;
}
.profile-chip .chip-icon {
    flex-shrink: 0;
    opacity: 0.55;
    transition: opacity 0.18s ease, transform 0.18s ease;
    vertical-align: middle;
}
.profile-chip:hover .chip-icon,
.profile-chip.active .chip-icon {
    opacity: 1;
    transform: scale(1.12);
}
.profile-chip .chip-label {
    overflow: hidden;
    max-width: 120px;
    transition: max-width 0.22s ease, opacity 0.18s ease;
    opacity: 1;
    white-space: nowrap;
}
.profile-chip.active .chip-label {
    max-width: 0;
    opacity: 0;
    pointer-events: none;
}
/* ── Inline Dashboard (Profile Hub > Dashboard chip) ── */
.idash-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    padding: 18px 16px;
    margin-bottom: 14px;
}
.idash-card-title {
    font: 700 0.68rem 'Poppins', sans-serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
    margin-bottom: 14px;
}
.idash-score-hero {
    display: flex;
    align-items: center;
    gap: 16px;
}
.idash-score-ring {
    flex-shrink: 0;
    position: relative;
    width: 88px;
    height: 88px;
}
.idash-score-ring .asr-svg { width: 88px; height: 88px; }
.idash-score-ring .asr-label { font-size: 1.1rem; }
.idash-bars {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.idash-bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.idash-bar-lbl {
    font: 500 0.74rem 'Poppins', sans-serif;
    color: rgba(255,255,255,0.65);
    width: 50px;
    flex-shrink: 0;
}
.idash-bar-track {
    flex: 1;
    height: 6px;
    background: rgba(255,255,255,0.1);
    border-radius: 999px;
    overflow: hidden;
}
.idash-bar-fill {
    height: 100%;
    background: #a78bfa;
    border-radius: 999px;
    transition: width 0.5s ease;
}
.idash-bar-workout { background: #f6d365; }
.idash-bar-food    { background: #fd9644; }
.idash-bar-val {
    font: 600 0.74rem 'Poppins', sans-serif;
    color: rgba(255,255,255,0.85);
    width: 30px;
    text-align: right;
    flex-shrink: 0;
}
.idash-week-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.idash-week-box {
    background: rgba(255,255,255,0.06);
    border-radius: 14px;
    padding: 12px 8px;
    text-align: center;
}
.idash-week-val {
    font: 700 1.4rem 'Poppins', sans-serif;
    color: #fff;
    margin-bottom: 3px;
}
.idash-week-lbl {
    font: 400 0.68rem 'Poppins', sans-serif;
    color: rgba(255,255,255,0.45);
    line-height: 1.3;
}
.idash-streak-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.idash-streak-card {
    background: rgba(255,255,255,0.06);
    border-radius: 14px;
    padding: 14px 8px 12px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.idash-st-icon {
    font-size: 1.4rem;
    margin-bottom: 4px;
}
.idash-st-val {
    font: 700 1.05rem 'Poppins', sans-serif;
    color: #f6d365;
}
.idash-st-lbl {
    font: 400 0.64rem 'Poppins', sans-serif;
    color: rgba(255,255,255,0.5);
    line-height: 1.3;
}
.idash-st-best {
    font: 400 0.6rem 'Poppins', sans-serif;
    color: rgba(255,255,255,0.28);
    margin-top: 1px;
}

/* ── Inline Dashboard: Daily Routine ── */
.idash-routine-days {
    display: flex;
    gap: 5px;
    flex-wrap: nowrap;
    justify-content: space-between;
}
.idash-routine-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1;
    min-width: 0;
}
.idash-routine-day .rd-date {
    font: 400 0.58rem 'Poppins', sans-serif;
    color: rgba(255,255,255,0.4);
    text-align: center;
    line-height: 1.3;
}
.idash-routine-day .rd-pct {
    font: 600 0.72rem 'Poppins', sans-serif;
    color: rgba(255,255,255,0.35);
    padding: 5px 4px;
    border-radius: 6px;
    background: rgba(255,255,255,0.06);
    width: 100%;
    text-align: center;
}
.idash-routine-day.rd-low .rd-pct  { color: #fca5a5; background: rgba(252,165,165,0.12); }
.idash-routine-day.rd-mid .rd-pct  { color: #fde68a; background: rgba(253,230,138,0.12); }
.idash-routine-day.rd-high .rd-pct { color: #a78bfa; background: rgba(167,139,250,0.15); }

/* ── Inline Dashboard: Workout History ── */
.idash-workout-day-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 4px;
    padding: 0 2px;
}
.idash-workout-day-header span {
    font: 400 0.6rem 'Poppins', sans-serif;
    color: rgba(255,255,255,0.38);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.idash-workout-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.idash-workout-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    align-items: center;
}
.idash-wk-label {
    /* hidden — weeks labelled only via aria */
    display: none;
}
.idash-workout-cell {
    height: 22px;
    border-radius: 4px;
    background: rgba(255,255,255,0.07);
    transition: background 0.25s;
    cursor: default;
}
.idash-workout-cell.worked {
    background: linear-gradient(135deg, #a78bfa 0%, #6d28d9 100%);
    color: rgba(255,255,255,0.7);
    font-size: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Inline Dashboard: Food Log ── */
.idash-food-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.idash-food-row {
    display: grid;
    grid-template-columns: 1.4rem 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 2px 8px;
}
.fr-emoji {
    font-size: 1.1rem;
    text-align: center;
    line-height: 1;
    grid-row: 1 / 3;
    grid-column: 1;
}
.fr-name {
    font: 500 0.78rem 'Poppins', sans-serif;
    color: rgba(255,255,255,0.82);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    grid-row: 1;
    grid-column: 2;
}
.fr-times {
    font: 400 0.68rem 'Poppins', sans-serif;
    color: rgba(255,255,255,0.42);
    text-align: right;
    white-space: nowrap;
    grid-row: 1;
    grid-column: 3;
}
.fr-bar {
    grid-row: 2;
    grid-column: 2 / 4;
    height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,0.1);
    overflow: hidden;
}
.fr-bar-fill {
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(90deg, #f6d365, #fda085);
    transition: width 0.5s ease;
}

/* ── Inline Dashboard: Score Trend ── */
.idash-bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 64px;
    padding: 0 2px;
}
.idash-trend-bar {
    flex: 1;
    border-radius: 3px 3px 0 0;
    min-height: 3px;
    background: linear-gradient(180deg, #a78bfa 0%, rgba(109,40,217,0.4) 100%);
    transition: height 0.5s ease;
}
.idash-trend-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
}
.idash-trend-labels span {
    font: 400 0.6rem 'Poppins', sans-serif;
    color: rgba(255,255,255,0.38);
}

/* ── Inline Dashboard: Empty State ── */
.idash-empty {
    text-align: center;
    font: 400 0.75rem 'Poppins', sans-serif;
    color: rgba(255,255,255,0.35);
    padding: 12px 0;
}

/* ── Inline Snapshots View ── */
.inline-snap-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Save card */
.isnap-save-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.isnap-save-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.isnap-save-title {
    font: 600 0.82rem 'Poppins', sans-serif;
    color: rgba(255,255,255,0.75);
    letter-spacing: 0.02em;
}
.isnap-limit-badge {
    font: 400 0.68rem 'Poppins', sans-serif;
    color: rgba(255,255,255,0.35);
    background: rgba(255,255,255,0.06);
    border-radius: 20px;
    padding: 2px 10px;
    white-space: nowrap;
}
.isnap-limit-badge.reached {
    color: rgba(248,185,73,0.85);
    background: rgba(248,185,73,0.1);
}
.isnap-name-input {
    width: 100%;
    box-sizing: border-box;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 10px 14px;
    font: 400 0.84rem 'Poppins', sans-serif;
    color: #e6edf3;
    outline: none;
    transition: border-color 0.2s;
}
.isnap-name-input:focus {
    border-color: rgba(246,211,101,0.45);
    background: rgba(255,255,255,0.08);
}
.isnap-name-input::placeholder { color: rgba(255,255,255,0.28); }
.isnap-save-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    padding: 11px 16px;
    background: rgba(246,211,101,0.13);
    border: 1px solid rgba(246,211,101,0.28);
    border-radius: 10px;
    color: #f6d365;
    font: 600 0.84rem 'Poppins', sans-serif;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.isnap-save-btn:hover {
    background: rgba(246,211,101,0.22);
    border-color: rgba(246,211,101,0.45);
}
.isnap-save-btn:disabled { opacity: 0.4; cursor: default; }

/* List card */
.isnap-list-card { display: flex; flex-direction: column; gap: 10px; }
.isnap-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.isnap-list-title {
    font: 600 0.82rem 'Poppins', sans-serif;
    color: rgba(255,255,255,0.75);
    letter-spacing: 0.02em;
}

/* Empty state (inline) */
.isnap-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 24px 0 8px;
    text-align: center;
}
.isnap-empty p {
    font: 500 0.82rem 'Poppins', sans-serif;
    color: rgba(255,255,255,0.4);
    margin: 0;
}
.isnap-empty-sub {
    font-size: 0.72rem !important;
    color: rgba(255,255,255,0.25) !important;
    max-width: 220px;
    line-height: 1.5;
}

/* ── End Inline Dashboard ── */

/* ══════════════════════════════════════════════════════════════
   AI EXPERIENCE COMPONENTS
   ══════════════════════════════════════════════════════════════ */

/* Shared AI badge */
.lm-ai-badge {
    font: 700 0.58rem 'Poppins', sans-serif;
    letter-spacing: 0.08em;
    background: linear-gradient(135deg, #a78bfa, #6d28d9);
    color: #fff;
    border-radius: 4px;
    padding: 2px 6px;
    flex-shrink: 0;
}

/* ── Pulse Strip ─────────────────────────────────────────────── */
.ai-pulse-strip {
    margin: 0 0 14px;
    padding: 0;
}
.ai-pulse-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 2px 8px;
}
.ai-pulse-greeting {
    font: 600 0.82rem 'Poppins', sans-serif;
    color: rgba(255,255,255,0.65);
    flex: 1;
}
.ai-pulse-cards-row {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 4px;
}
.ai-pulse-cards-row::-webkit-scrollbar { display: none; }
.ai-pulse-card {
    flex: 0 0 200px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 16px;
    padding: 14px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    position: relative;
    transition: border-color 0.2s;
}
.ai-pulse-card:hover { border-color: rgba(167,139,250,0.3); }
.ai-pulse-card[data-energy="high"]   { border-color: rgba(167,139,250,0.2); }
.ai-pulse-card[data-energy="medium"] { border-color: rgba(246,211,101,0.15); }
.ai-pulse-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    font: 600 0.6rem 'Poppins', sans-serif;
    background: rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 2px 8px;
    color: rgba(255,255,255,0.55);
}
.ai-pulse-card-emoji { font-size: 1.4rem; line-height: 1; }
.ai-pulse-card-headline {
    font: 600 0.78rem 'Poppins', sans-serif;
    color: rgba(255,255,255,0.88);
    line-height: 1.35;
    margin-top: 2px;
}
.ai-pulse-card-body {
    font: 400 0.72rem 'Poppins', sans-serif;
    color: rgba(255,255,255,0.5);
    line-height: 1.45;
    flex: 1;
}
.ai-pulse-cta {
    margin-top: 6px;
    padding: 7px 12px;
    border-radius: 8px;
    background: rgba(167,139,250,0.13);
    border: 1px solid rgba(167,139,250,0.3);
    color: #c4b5fd;
    font: 600 0.72rem 'Poppins', sans-serif;
    cursor: pointer;
    transition: background 0.2s;
    text-align: center;
}
.ai-pulse-cta:hover { background: rgba(167,139,250,0.22); }

/* ── Streak Reminder Banner (compact) ───────────────────────── */
.streak-reminder-banner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 7px;
    background: linear-gradient(135deg, rgba(251,146,60,0.10) 0%, rgba(246,211,101,0.06) 100%);
    border: 1px solid rgba(251,146,60,0.22);
    border-radius: 16px;
    padding: 9px 10px 9px 13px;
    margin: 0 0 12px;
    overflow: hidden;
}
.streak-reminder-banner::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #fb923c, #f6d365);
    border-radius: 16px 0 0 16px;
}
.streak-reminder-header {
    display: flex;
    align-items: center;
    gap: 7px;
}
.streak-reminder-fire {
    font-size: 1.05rem;
    flex: 0 0 auto;
    line-height: 1;
    filter: drop-shadow(0 0 4px rgba(251,146,60,0.5));
}
.streak-reminder-title {
    font: 600 0.8rem 'Poppins', sans-serif;
    color: #fde68a;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.streak-dismiss-btn {
    flex: 0 0 auto;
    background: none;
    border: none;
    padding: 2px 4px;
    cursor: pointer;
    color: rgba(255,255,255,0.3);
    font-size: 0.8rem;
    line-height: 1;
    border-radius: 6px;
    transition: color 0.15s;
}
.streak-dismiss-btn:hover { color: rgba(255,255,255,0.6); }
.streak-scroll-row {
    display: flex;
    flex-direction: row;
    gap: 7px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
}
.streak-scroll-row::-webkit-scrollbar { display: none; }
.streak-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    font: 500 0.74rem 'Poppins', sans-serif;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.82);
    border-radius: 20px;
    padding: 5px 11px;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.streak-chip:hover { background: rgba(251,146,60,0.12); border-color: rgba(251,146,60,0.3); }
.streak-chip:active { opacity: 0.7; }
.streak-chip.streak-chip-done {
    background: rgba(34,197,94,0.1);
    border-color: rgba(34,197,94,0.25);
    color: rgba(255,255,255,0.3);
    cursor: default;
    text-decoration: line-through;
    pointer-events: none;
}
.streak-chip-all-done {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(34,197,94,0.15);
    border: 1px solid rgba(34,197,94,0.35);
    color: #4ade80;
    border-radius: 50%;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
}
.streak-chip-all-done:hover { background: rgba(34,197,94,0.25); border-color: rgba(34,197,94,0.5); }
.streak-chip-all-done:active { transform: scale(0.92); }
.streak-chip-all-done:disabled { opacity: 0.5; cursor: default; }

/* ── Life Mirror ─────────────────────────────────────────────── */
.lm-section {
    margin-top: 10px;
}
.lm-trigger-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.lm-reveal-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    padding: 11px 14px;
    background: rgba(167,139,250,0.08);
    border: 1px solid rgba(167,139,250,0.22);
    border-radius: 12px;
    color: #c4b5fd;
    font: 600 0.82rem 'Poppins', sans-serif;
    cursor: pointer;
    transition: background 0.2s;
}
.lm-reveal-btn:hover { background: rgba(167,139,250,0.15); }
.lm-content {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.lm-loading { text-align: center; padding: 16px 0; }
.lm-archetype-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(167,139,250,0.12), rgba(109,40,217,0.08));
    border: 1px solid rgba(167,139,250,0.2);
    border-radius: 14px;
}
.lm-archetype-emoji { font-size: 2rem; flex-shrink: 0; }
.lm-archetype-title {
    font: 700 0.95rem 'Poppins', sans-serif;
    color: #e9d5ff;
}
.lm-archetype-tagline {
    font: 400 0.72rem 'Poppins', sans-serif;
    color: rgba(255,255,255,0.5);
    margin-top: 2px;
    line-height: 1.4;
}
.lm-story {
    font: 400 0.78rem 'Poppins', sans-serif;
    color: rgba(255,255,255,0.65);
    line-height: 1.6;
    padding: 12px 14px;
    background: rgba(255,255,255,0.04);
    border-radius: 12px;
    border-left: 2px solid rgba(167,139,250,0.4);
    margin: 0;
}
.lm-traits {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.lm-trait-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.04);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.07);
}
.lm-trait-emoji { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }
.lm-trait-name {
    font: 600 0.78rem 'Poppins', sans-serif;
    color: rgba(255,255,255,0.85);
}
.lm-trait-evidence {
    font: 400 0.7rem 'Poppins', sans-serif;
    color: rgba(255,255,255,0.45);
    line-height: 1.4;
    margin-top: 2px;
}
.lm-pattern-card {
    background: rgba(246,211,101,0.07);
    border: 1px solid rgba(246,211,101,0.18);
    border-radius: 12px;
    padding: 12px 14px;
}
.lm-pattern-label {
    font: 700 0.65rem 'Poppins', sans-serif;
    color: rgba(246,211,101,0.7);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    display: block;
    margin-bottom: 5px;
}
.lm-pattern-text {
    font: 400 0.76rem 'Poppins', sans-serif;
    color: rgba(255,255,255,0.6);
    line-height: 1.55;
    margin: 0;
}
.lm-fun-fact {
    font: 400 0.76rem 'Poppins', sans-serif;
    color: rgba(255,255,255,0.45);
    line-height: 1.5;
    text-align: center;
    font-style: italic;
    margin: 0;
    padding: 0 8px;
}
.lm-refresh-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 14px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: rgba(255,255,255,0.35);
    font: 400 0.7rem 'Poppins', sans-serif;
    cursor: pointer;
    transition: border-color 0.2s;
    align-self: center;
}
.lm-refresh-btn:hover { border-color: rgba(255,255,255,0.25); color: rgba(255,255,255,0.6); }

/* ── AI Coach ────────────────────────────────────────────────── */
.ai-coach-section {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ai-coach-header {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ai-coach-title {
    font: 600 0.82rem 'Poppins', sans-serif;
    color: rgba(255,255,255,0.7);
    flex: 1;
}
.ai-coach-refresh-btn {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.35);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    transition: color 0.2s;
}
.ai-coach-refresh-btn:hover { color: rgba(255,255,255,0.7); }
.ai-coach-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ai-coach-summary {
    font: 400 0.75rem 'Poppins', sans-serif;
    color: rgba(255,255,255,0.45);
    line-height: 1.5;
    margin: 0;
    padding: 0 2px 4px;
}
.ai-coach-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color 0.2s;
}
.ai-coach-card:hover { border-color: rgba(255,255,255,0.14); }
.ai-coach-card-top {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.ai-coach-card-emoji { font-size: 1.3rem; flex-shrink: 0; }
.ai-coach-card-headline {
    font: 600 0.82rem 'Poppins', sans-serif;
    color: rgba(255,255,255,0.88);
    line-height: 1.3;
}
.ai-coach-card-reason {
    font: 400 0.7rem 'Poppins', sans-serif;
    color: rgba(255,255,255,0.4);
    margin-top: 2px;
    line-height: 1.4;
}
.ai-coach-card-body {
    font: 400 0.75rem 'Poppins', sans-serif;
    color: rgba(255,255,255,0.58);
    line-height: 1.5;
    margin: 0;
}
.ai-coach-add-btn {
    padding: 9px 14px;
    background: rgba(167,139,250,0.1);
    border: 1px solid rgba(167,139,250,0.25);
    border-radius: 10px;
    color: #c4b5fd;
    font: 600 0.76rem 'Poppins', sans-serif;
    cursor: pointer;
    transition: background 0.2s;
    text-align: center;
}
.ai-coach-add-btn:hover { background: rgba(167,139,250,0.2); }
.ai-coach-add-btn.added {
    background: rgba(52,211,153,0.1);
    border-color: rgba(52,211,153,0.25);
    color: #6ee7b7;
    cursor: default;
}

/* ── Circle AI Panel ─────────────────────────────────────────── */
.circle-ai-panel {
    margin: 0 0 6px;
    min-height: 0;
}
.cai-panel {
    background: rgba(167,139,250,0.06);
    border: 1px solid rgba(167,139,250,0.18);
    border-radius: 16px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 0 6px;
}
.cai-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.cai-match-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--score-color, rgba(167,139,250,0.3));
    flex-shrink: 0;
}
.cai-score {
    font: 700 1.05rem 'Poppins', sans-serif;
    color: var(--score-color, #c4b5fd);
    line-height: 1;
}
.cai-score-label {
    font: 400 0.55rem 'Poppins', sans-serif;
    color: rgba(255,255,255,0.4);
    margin-top: 1px;
    white-space: nowrap;
}
.cai-intro-text {
    flex: 1;
    font: 400 0.74rem 'Poppins', sans-serif;
    color: rgba(255,255,255,0.58);
    line-height: 1.5;
}
.cai-persona-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.04);
    border-radius: 10px;
}
.cai-persona-emoji { font-size: 1.2rem; flex-shrink: 0; }
.cai-persona-title {
    font: 600 0.8rem 'Poppins', sans-serif;
    color: rgba(255,255,255,0.85);
}
.cai-persona-desc {
    font: 400 0.68rem 'Poppins', sans-serif;
    color: rgba(255,255,255,0.42);
    margin-top: 1px;
    line-height: 1.4;
}
.cai-starters-label,
.cai-icebreaker-label {
    font: 700 0.62rem 'Poppins', sans-serif;
    color: rgba(255,255,255,0.38);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.cai-starters { display: flex; flex-direction: column; gap: 6px; }
.cai-starter-card {
    font: 400 0.74rem 'Poppins', sans-serif;
    color: rgba(255,255,255,0.62);
    line-height: 1.5;
    padding: 8px 12px;
    background: rgba(255,255,255,0.04);
    border-radius: 8px;
    border-left: 2px solid rgba(167,139,250,0.35);
    font-style: italic;
}
.cai-icebreaker {
    border-top: 1px solid rgba(255,255,255,0.07);
    padding-top: 10px;
}
.cai-icebreaker-text {
    font: 400 0.76rem 'Poppins', sans-serif;
    color: rgba(255,255,255,0.6);
    line-height: 1.55;
    margin: 0;
    padding: 10px 12px;
    background: rgba(255,255,255,0.04);
    border-radius: 10px;
}

/* ══════════════════════════════════════════════════════════════ */

.profile-occasions-view {
    display: grid;
    gap: 1rem;
}
[data-theme="instagram"] .activity-chip-bar {
    background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.82), rgba(255,255,255,0));
}
[data-theme="instagram"] .activity-chip,
[data-theme="instagram"] .profile-chip {
    background: rgba(255,255,255,0.92);
    border-color: rgba(219,219,219,0.92);
    color: #262626;
}
[data-theme="instagram"] .activity-chip:hover,
[data-theme="instagram"] .activity-chip.active,
[data-theme="instagram"] .profile-chip:hover,
[data-theme="instagram"] .profile-chip.active {
    background: #fff;
    border-color: rgba(0,149,246,0.4);
    color: #0095f6;
}
.aph-ring {
    position: relative;
    width: 92px;
    height: 92px;
    margin: 0 auto 10px;
}
.aph-ring .asr-svg { width: 100%; height: 100%; }
.aph-ring .asr-label {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.35rem;
    font-weight: 700;
    color: #fff;
}
.aph-subtitle {
    color: rgba(255,255,255,0.76);
    font-size: 0.85rem;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}
.aph-kicker {
    font: 700 1.15rem 'Poppins', sans-serif;
    color: #fff;
    letter-spacing: 0.01em;
}
.aph-copy {
    color: rgba(255,255,255,0.62);
    font-size: 0.82rem;
}
.aph-breakdown {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}
.aph-breakdown .ab-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.8);
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    border-radius: 999px;
    padding: 8px 12px;
    cursor: pointer;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.aph-breakdown .ab-row.active {
    background: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.26);
}
.aph-breakdown .ab-row:hover { transform: translateY(-1px); }
.aph-breakdown .ab-icon { font-size: 1.1rem; }
.aph-breakdown .ab-pct { font-weight: 600; color: #4ade80; }
.aph-breakdown .ab-pct.pct-amber { color: #fbbf24; }
.aph-breakdown .ab-pct.pct-red { color: #f87171; }

/* Active bottom nav orb */
.bnav-orb.bnav-active {
    background: rgba(60, 60, 90, 0.95) !important;
    border-color: rgba(255,255,255,0.45) !important;
    box-shadow: 0 0 12px rgba(255,255,255,0.15), inset 0 0 8px rgba(255,255,255,0.08);
}
.bnav-orb.bnav-active .bnav-label { opacity: 1; color: #fff; }

/* Universal + FAB */
.universal-fab {
    position: fixed;
    bottom: 85px;
    right: 20px;
    z-index: 9989;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(246,211,101,0.9), rgba(253,160,133,0.9));
    border: 1px solid rgba(255,255,255,0.2);
    color: #1a1a2e;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3), 0 0 12px rgba(246,211,101,0.2);
    transition: transform 0.18s, box-shadow 0.18s;
    -webkit-tap-highlight-color: transparent;
}
.universal-fab:active {
    transform: scale(0.88);
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.universal-fab svg { pointer-events: none; }
body.circle-open .universal-fab,
body.circle-switcher-open .universal-fab { display: none !important; }

/* ── FAB Action Menu ────────────────────────────────────────── */
.fab-menu-backdrop {
    position: fixed; inset: 0; z-index: 9990;
    background: rgba(0,0,0,0.35);
}
.fab-menu {
    position: fixed;
    bottom: 145px;
    right: 16px;
    z-index: 9991;
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 0;
    transform: translateY(12px) scale(0.92);
    transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.32,0.72,0,1);
}
.fab-menu.fab-menu-open {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.fab-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(20,20,40,0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: rgba(255,255,255,0.9);
    font-size: 0.88rem;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.fab-menu-item:hover, .fab-menu-item:active {
    background: rgba(255,255,255,0.10);
    border-color: rgba(246,211,101,0.35);
}
.fab-menu-item-ai {
    background: linear-gradient(135deg, rgba(99,102,241,0.2), rgba(168,85,247,0.2));
    border-color: rgba(168,85,247,0.3);
}
.fab-menu-item-ai:hover, .fab-menu-item-ai:active {
    background: linear-gradient(135deg, rgba(99,102,241,0.3), rgba(168,85,247,0.3));
    border-color: rgba(168,85,247,0.5);
}
.fab-menu-icon {
    font-size: 1.1rem;
    flex: 0 0 auto;
}
.fab-menu-label {
    flex: 1;
}
.fab-menu-kbd {
    flex: 0 0 auto;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 5px;
    color: rgba(255,255,255,0.35);
    font-size: 0.65rem;
    font-family: 'Space Mono', monospace;
    padding: 2px 6px;
    line-height: 1.3;
}

/* ── Scroll-to-top button ──────────────────────────────────── */
.scroll-top-btn {
    position: fixed;
    bottom: 100px;
    left: 16px;
    z-index: 900;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(20,20,40,0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: rgba(255,255,255,0.8);
    font-size: 1.3rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease, background 0.15s;
}
.scroll-top-btn.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.scroll-top-btn:hover {
    background: rgba(40,40,80,0.95);
    border-color: rgba(255,255,255,0.25);
}

/* Galaxy Grid (flat photo grid replacing folder carousels) */
.galaxy-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
    border-radius: 8px;
    overflow: hidden;
}
.gallery-empty-hint {
    max-width: 390px;
    margin: 12px auto 4px;
    padding-top: 12px;
}
.gallery-empty-hint p strong {
    color: #fff;
}
.gallery-view-bar {
    flex: 0 0 auto;
    align-self: flex-end;
    gap: 6px;
    overflow: visible;
}
.gallery-view-chip {
    min-width: 36px;
    width: 36px;
    height: 36px;
    padding: 0;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}
.gallery-view-chip svg {
    width: 14px;
    height: 14px;
}
.gallery-toolbar #profileChipBar + .gallery-view-bar {
    margin-top: -2px;
}
.gallery-view-chip svg {
    display: block;
    pointer-events: none;
}
.galaxy-grid-item {
    aspect-ratio: 1;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    background: rgba(255,255,255,0.05);
    border-radius: 16px;
}
.galaxy-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.galaxy-list-item {
    position: relative;
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 14px;
    align-items: center;
    min-height: 120px;
    padding: 10px;
    border-radius: 22px;
    background: rgba(255,255,255,0.05);
    overflow: hidden;
    cursor: pointer;
}
.galaxy-list-item img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 16px;
}
.galaxy-list-copy {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.galaxy-post-date {
    color: rgba(255,255,255,0.68);
    font-size: 0.76rem;
    font-weight: 500;
}
.galaxy-list-item .galaxy-post-title {
    white-space: normal;
    line-height: 1.2;
}
.galaxy-list-item .galaxy-stack-badge {
    top: 12px;
    right: 12px;
}
.galaxy-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s;
}
.galaxy-grid-item:active img { transform: scale(1.05); }
.galaxy-grid-item::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 46%;
    background: linear-gradient(180deg, rgba(0,0,0,0), rgba(5,5,12,0.84));
    pointer-events: none;
}
.galaxy-stack-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    min-width: 34px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(12,12,24,0.82);
    color: #fff;
    font: 700 0.76rem 'Poppins', sans-serif;
    text-align: center;
}
.galaxy-post-meta {
    position: absolute;
    inset: auto 12px 12px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.galaxy-post-title {
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.galaxy-post-count {
    color: rgba(255,255,255,0.74);
    font-size: 0.72rem;
}
.galaxy-item-delete {
    position: absolute;
    top: 4px; right: 4px;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: rgba(0,0,0,0.6);
    color: #fff;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0,0,0,0.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 10010;
}
.lightbox-modal.show {
    display: flex;
}
.lightbox-content {
    position: relative;
    width: min(92vw, 720px);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.lightbox-content img {
    width: 100%;
    max-height: 72vh;
    object-fit: contain;
    border-radius: 18px;
    background: rgba(255,255,255,0.04);
    box-shadow: 0 24px 60px rgba(0,0,0,0.4);
}
.lightbox-footer {
    width: auto;
    max-width: min(92vw, 720px);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
}
.lightbox-caption {
    color: rgba(255,255,255,0.82);
    text-align: center;
    font: 500 0.92rem 'Poppins', sans-serif;
    min-height: 1.3em;
    padding: 0 6px;
    max-width: min(52vw, 320px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lightbox-close,
.lightbox-nav {
    border: none;
    border-radius: 999px;
    background: rgba(14,18,30,0.82);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 24px rgba(0,0,0,0.28);
}
.lightbox-close {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 44px;
    height: 44px;
    font-size: 1.8rem;
    line-height: 1;
}
.lightbox-nav {
    position: static;
    width: 46px;
    height: 46px;
    font-size: 1.6rem;
}
.lightbox-prev,
.lightbox-next {
    flex: 0 0 auto;
}

@media (max-width: 768px) {
    .gallery-toolbar {
        align-items: stretch;
        gap: 8px;
    }
    .gallery-toolbar #profileChipBar {
        min-width: 0;
    }
    .gallery-view-bar {
        align-self: flex-end;
    }
    .gallery-view-chip {
        min-width: 34px;
        width: 34px;
        height: 34px;
        border-radius: 11px;
    }
    .gallery-empty-hint {
        max-width: 340px;
        margin-top: 8px;
    }
    .galaxy-list-item {
        grid-template-columns: 88px 1fr;
        min-height: 88px;
        padding: 8px;
        border-radius: 18px;
    }
    .galaxy-list-item img {
        width: 88px;
        height: 88px;
        border-radius: 14px;
    }
    .lightbox-modal {
        padding: 14px;
    }
    .lightbox-content {
        width: 100%;
        max-height: 92vh;
    }
    .lightbox-content img {
        max-height: 68vh;
        border-radius: 16px;
    }
    .lightbox-footer {
        max-width: calc(100vw - 28px);
        gap: 14px;
    }
    .lightbox-caption {
        font-size: 0.98rem;
        line-height: 1.2;
        max-width: min(48vw, 220px);
    }
    .lightbox-close {
        top: 10px;
        right: 10px;
    }
    .lightbox-nav {
        width: 44px;
        height: 44px;
    }
}

/* Radial Favorite Circles Menu */
.radial-fav-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 9994;
}
.radial-fav-menu {
    position: fixed;
    z-index: 9995;
    pointer-events: none;
    transform: translate(-50%, -50%);
}
.radial-fav-orbs { position: relative; pointer-events: auto; }
.radial-fav-orb {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(calc(-50% + var(--rx)), calc(-50% + var(--ry))) scale(0);
    width: 64px;
    height: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(30, 30, 50, 0.95);
    border: 2px solid rgba(255,255,255,0.2);
    cursor: pointer;
    animation: radialPopIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: var(--delay, 0ms);
    transition: transform 0.15s, box-shadow 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.radial-fav-orb.hovered {
    transform: translate(calc(-50% + var(--rx)), calc(-50% + var(--ry))) scale(1.2);
    border-color: rgba(255,255,255,0.6);
    box-shadow: 0 0 20px rgba(255,255,255,0.25);
}
.radial-fav-emoji { font-size: 1.6rem; }
.radial-fav-name {
    position: absolute;
    bottom: -18px;
    white-space: nowrap;
    font-size: 0.6rem;
    color: rgba(255,255,255,0.7);
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.radial-fav-dot {
    position: absolute;
    top: 4px; right: 4px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #f97316;
    animation: dot-pulse 2s ease-in-out infinite;
}
@keyframes radialPopIn {
    from { transform: translate(calc(-50% + var(--rx) * 0.3), calc(-50% + var(--ry) * 0.3)) scale(0); opacity: 0; }
    to   { transform: translate(calc(-50% + var(--rx)), calc(-50% + var(--ry))) scale(1); opacity: 1; }
}

/* Activity radial orb accent colors */
.radial-activity-orb[data-section="routine"]  { background: rgba(16,42,60,0.97);  border-color: rgba(56,189,248,0.45); }
.radial-activity-orb[data-section="workouts"] { background: rgba(50,20,10,0.97);  border-color: rgba(251,146,60,0.45); }
.radial-activity-orb[data-section="food"]     { background: rgba(20,44,20,0.97);  border-color: rgba(74,222,128,0.45); }
.radial-activity-orb[data-section="plans"]    { background: rgba(40,20,60,0.97);  border-color: rgba(167,139,250,0.45); }
.radial-activity-orb[data-section="routine"].hovered  { border-color: rgba(56,189,248,0.9);  box-shadow: 0 0 20px rgba(56,189,248,0.3); }
.radial-activity-orb[data-section="workouts"].hovered { border-color: rgba(251,146,60,0.9);  box-shadow: 0 0 20px rgba(251,146,60,0.3); }
.radial-activity-orb[data-section="food"].hovered     { border-color: rgba(74,222,128,0.9);  box-shadow: 0 0 20px rgba(74,222,128,0.3); }
.radial-activity-orb[data-section="plans"].hovered    { border-color: rgba(167,139,250,0.9); box-shadow: 0 0 20px rgba(167,139,250,0.3); }

/* Wave Divider */
.wave-div {
    display: none;
}

/* Section Header */
.sec-header { text-align: center; margin-bottom: 1.5rem; }
.sec-header h2 {
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 800;
    color: #fff;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}
.sec-header p { font-size: 1.05rem; color: rgba(255,255,255,0.7); font-weight: 300; }
.activity-section-head-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    width: min(100%, 620px);
    margin-top: 0.9rem;
    margin-left: auto;
    margin-right: auto;
}
body[data-page="activity"] #plans.activity-section-active .activity-section-head-actions {
    justify-content: center;
    flex-wrap: nowrap;
}
.activity-section-log-btn {
    appearance: none;
    border: 1px solid rgba(255,255,255,0.22);
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.92);
    border-radius: 999px;
    padding: 0.68rem 1rem;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease;
    white-space: nowrap;
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
}
.activity-section-log-btn:hover {
    transform: translateY(-1px);
    background: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.32);
}

.activity-section-share-row {
    display: flex;
    justify-content: center;
    margin-top: 0.7rem;
}

.activity-section-share-footer {
    display: flex;
    justify-content: center;
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
}

.activity-section-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.58rem;
    appearance: none;
    border: 1px solid rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.84);
    border-radius: 999px;
    padding: 0.62rem 1rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease;
    white-space: nowrap;
}

.activity-section-share-btn svg {
    flex: 0 0 auto;
    opacity: 0.92;
}

.activity-section-share-btn:hover {
    transform: translateY(-1px);
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.26);
}

.activity-section-history-btn {
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.82);
}

.notes-overlay {
    z-index: 4050;
}

.notes-modal {
    width: min(1120px, calc(100vw - 28px));
    max-height: min(90vh, 940px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.notes-copy {
    gap: 12px;
}

.notes-section-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.notes-section-tab {
    appearance: none;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.78);
    border-radius: 999px;
    padding: 10px 14px;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.notes-section-tab.active,
.notes-section-tab:hover {
    background: rgba(255, 215, 92, 0.12);
    border-color: rgba(255, 215, 92, 0.22);
    color: rgba(255,255,255,0.94);
}

.notes-page-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 1.4rem;
    padding: 22px;
    border-radius: 32px;
    border: 1px solid rgba(255,255,255,0.08);
    background:
        radial-gradient(circle at top right, rgba(255, 215, 92, 0.08), transparent 28%),
        linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
    box-shadow: 0 26px 60px rgba(0,0,0,0.24);
}

.notes-layout {
    display: grid;
    grid-template-columns: minmax(230px, 270px) minmax(0, 1fr);
    gap: 18px;
    min-height: 0;
    flex: 1 1 auto;
}

.notes-sidebar {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
}

.notes-sidebar-card,
.notes-sidebar-stats {
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
    padding: 16px;
}

.notes-sidebar-kicker {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.42);
}

.notes-sidebar-title {
    margin-top: 8px;
    font-size: 1.18rem;
    font-weight: 800;
    color: rgba(255,255,255,0.95);
}

.notes-sidebar-copy {
    margin: 10px 0 0;
    color: rgba(255,255,255,0.68);
    line-height: 1.55;
    font-size: 0.92rem;
}

.notes-sidebar-stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.notes-sidebar-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
}

.notes-sidebar-stat-value {
    font-size: 1.1rem;
    font-weight: 800;
    color: rgba(255,255,255,0.94);
}

.notes-sidebar-stat-label {
    font-size: 0.76rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
}

.notes-main {
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: 14px;
}

.notes-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
}

.notes-toolbar-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.notes-toolbar-copy strong {
    font-size: 1rem;
    color: rgba(255,255,255,0.94);
}

.notes-toolbar-copy span {
    color: rgba(255,255,255,0.58);
    font-size: 0.84rem;
}

.notes-toolbar-controls {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.notes-date-picker {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 170px;
}

.notes-date-picker-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.46);
}

.notes-date-picker input {
    appearance: none;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.9);
    font: inherit;
}

.notes-date-reset {
    appearance: none;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.74);
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.notes-date-reset:hover,
.notes-date-reset.active {
    background: rgba(255, 215, 92, 0.12);
    border-color: rgba(255, 215, 92, 0.22);
    color: rgba(255,255,255,0.94);
}

.notes-page-copy {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 2px 4px 0;
}

.notes-page-copy h3 {
    margin: 0;
    font-size: clamp(1.45rem, 3.1vw, 2rem);
    color: rgba(255,255,255,0.95);
}

.notes-page-copy p {
    margin: 0;
    max-width: 720px;
    color: rgba(255,255,255,0.66);
    line-height: 1.55;
}

.notes-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.notes-kpi-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.08);
    background:
        radial-gradient(circle at top right, rgba(255, 215, 92, 0.06), transparent 36%),
        linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.03));
}

.notes-kpi-value {
    font-size: clamp(1.35rem, 2.5vw, 1.8rem);
    font-weight: 900;
    color: rgba(255,255,255,0.96);
}

.notes-kpi-label {
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    color: rgba(255,255,255,0.5);
}

.notes-kpi-meta {
    color: rgba(255,255,255,0.66);
    font-size: 0.84rem;
    line-height: 1.4;
}

.notes-list {
    flex: 1 1 auto;
    overflow-y: auto;
    padding-right: 4px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.notes-day-group {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,0.08);
    background:
        radial-gradient(circle at top right, rgba(255, 215, 92, 0.08), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.03));
}

.notes-day-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.notes-day-title {
    margin: 0;
    font-size: 1.12rem;
    font-weight: 800;
    color: rgba(255,255,255,0.95);
}

.notes-day-subtitle {
    margin: 4px 0 0;
    color: rgba(255,255,255,0.56);
    font-size: 0.84rem;
}

.notes-day-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.notes-day-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.78);
    font-size: 0.78rem;
    font-weight: 700;
}

.notes-day-entries {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Activity section header — transparent, scrolls with content (like Vibe/Ideas) */
body[data-page="activity"] .full-section.activity-section-active > .sec-container > .sec-header {
    background: transparent;
    padding: 16px 20px 14px;
}
body[data-page="activity"] .full-section.activity-section-active > .sec-container > .sec-header h2 {
    font-size: clamp(1.3rem, 3.5vw, 1.8rem);
    margin-bottom: 0.15rem;
}
body[data-page="activity"] .full-section.activity-section-active > .sec-container > .sec-header p {
    font-size: 0.82rem;
    margin-bottom: 0;
}
/* Plans view toggle */
body[data-page="activity"] #plans.activity-section-active .plans-view-bar {
    margin: 0.75rem auto 0;
    display: flex;
    justify-content: center;
}
@media (max-width: 768px) {
    body[data-page="activity"] .full-section.activity-section-active > .sec-container > .sec-header {
        padding: 14px 20px 10px;
    }
    body[data-page="activity"] .full-section.activity-section-active > .sec-container > .sec-header h2 {
        font-size: 1.1rem;
    }
    body[data-page="activity"] .full-section.activity-section-active > .sec-container > .sec-header p {
        font-size: 0.72rem;
    }
    .activity-section-head-actions {
        gap: 6px;
        width: 100%;
    }
    .activity-section-log-btn {
        padding: 0.64rem 0.8rem;
        font-size: 0.76rem;
    }
}
.sec-header-dark h2 { color: #1a1a2e !important; text-shadow: none !important; }
.sec-header-dark p  { color: rgba(0,0,0,0.55) !important; }

/* Shared Add Row */
.add-row {
    display: flex;
    gap: 1rem;
    max-width: 580px;
    margin: 2rem auto 0;
}
.add-input {
    flex: 1;
    padding: 0.85rem 1.4rem;
    border-radius: 50px;
    border: 2px solid rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.15);
    color: #fff;
    font-size: 0.95rem;
    font-family: 'Poppins', sans-serif;
    /* backdrop-filter removed to prevent blur bleed-through during entrance animations */
    transition: all 0.3s ease;
}
.add-input::placeholder { color: rgba(255,255,255,0.5); }
.add-input:focus {
    outline: none;
    border-color: rgba(255,255,255,0.65);
    background: rgba(255,255,255,0.22);
}
.add-btn {
    padding: 0.85rem 1.6rem;
    border-radius: 50px;
    border: none;
    background: rgba(255,255,255,0.22);
    color: #fff;
    font-size: 0.9rem; font-weight: 600;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    transition: all 0.3s ease;
    /* backdrop-filter removed to prevent blur bleed-through during entrance animations */
    white-space: nowrap;
}
.add-btn:hover { background: rgba(255,255,255,0.38); transform: scale(1.05); }
.add-btn:active { transform: scale(0.97); }

/* ---- THEMES: CSS custom properties ---- */
:root {
    --sheet-bg:             rgba(38,38,54,0.98);
    --sheet-border:         rgba(255,255,255,0.1);
    --sheet-handle:         rgba(255,255,255,0.2);
    --sheet-text:           #ffffff;
    --sheet-subtext:        rgba(255,255,255,0.4);
    --sec-friends-grad:     linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --sec-oneliners-grad:   linear-gradient(135deg, #c0392b 0%, #e91e8c 100%);
    --sec-birthday-grad:    linear-gradient(135deg, #f6d365 0%, #fda085 100%);
    --sec-suggestions-grad: linear-gradient(135deg, #0d7377 0%, #38ef7d 100%);
    --sec-routine-grad:     linear-gradient(135deg, #2c3e8c 0%, #8e54e9 100%);
    --sec-workouts-grad:    linear-gradient(135deg, #c0392b 0%, #f39c12 100%);
    --sec-food-grad:        linear-gradient(135deg, #0a3d62 0%, #30cfd0 100%);
    --sec-plans-grad:       linear-gradient(135deg, #7c5c1d 0%, #f6d365 100%);
    --sec-galaxy-grad:      linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
    /* Circle theme */
    --circle-bg:            linear-gradient(180deg, #09090d 0%, #101015 48%, #0b0b10 100%);
    --circle-accent:        #ff5c96;
    --circle-accent-soft:   rgba(255,92,150,0.12);
    --circle-accent-border: rgba(255,92,150,0.24);
    --circle-tab-active:    #ffd3e2;
    --circle-author:        rgba(255,211,226,0.78);
    --cs-bg:                linear-gradient(180deg, #131318 0%, #17171d 46%, #101015 100%);
    --cs-orb-base:          #111117;
}
[data-theme="ocean"] {
    --sheet-bg:             rgba(8,30,54,0.98);
    --sheet-border:         rgba(0,180,219,0.18);
    --sheet-handle:         rgba(0,180,219,0.3);
    --sec-friends-grad:     linear-gradient(135deg, #1a6891 0%, #00b4db 100%);
    --sec-oneliners-grad:   linear-gradient(135deg, #0052d4 0%, #4364f7 100%);
    --sec-birthday-grad:    linear-gradient(135deg, #43cea2 0%, #185a9d 100%);
    --sec-suggestions-grad: linear-gradient(135deg, #005c97 0%, #363795 100%);
    --sec-routine-grad:     linear-gradient(135deg, #0093e9 0%, #80d0c7 100%);
    --sec-workouts-grad:    linear-gradient(135deg, #1cb5e0 0%, #000851 100%);
    --sec-food-grad:        linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --sec-plans-grad:       linear-gradient(135deg, #0f8b8d 0%, #ffd166 100%);
    --sec-galaxy-grad:      linear-gradient(135deg, #000428 0%, #004e92 100%);
    --circle-bg:            linear-gradient(160deg, #020d1a 0%, #041828 50%, #021520 100%);
    --circle-accent:        #00b4db;
    --circle-accent-soft:   rgba(0,180,219,0.16);
    --circle-accent-border: rgba(0,180,219,0.30);
    --circle-tab-active:    #7de8f8;
    --circle-author:        rgba(120,220,240,0.85);
    --cs-bg:                linear-gradient(160deg, #061828 0%, #0a2236 45%, #051c28 100%);
    --cs-orb-base:          #041422;
}
[data-theme="forest"] {
    --sheet-bg:             rgba(14,28,18,0.98);
    --sheet-border:         rgba(82,183,136,0.18);
    --sheet-handle:         rgba(82,183,136,0.3);
    --sec-friends-grad:     linear-gradient(135deg, #2d6a4f 0%, #74c69d 100%);
    --sec-oneliners-grad:   linear-gradient(135deg, #1b4332 0%, #52b788 100%);
    --sec-birthday-grad:    linear-gradient(135deg, #a8dadc 0%, #457b9d 100%);
    --sec-suggestions-grad: linear-gradient(135deg, #40916c 0%, #d8f3dc 100%);
    --sec-routine-grad:     linear-gradient(135deg, #2d6a4f 0%, #95d5b2 100%);
    --sec-workouts-grad:    linear-gradient(135deg, #1b4332 0%, #40916c 100%);
    --sec-food-grad:        linear-gradient(135deg, #52b788 0%, #b7e4c7 100%);
    --sec-plans-grad:       linear-gradient(135deg, #386641 0%, #f2e8cf 100%);
    --sec-galaxy-grad:      linear-gradient(135deg, #081c15 0%, #1b4332 50%, #2d6a4f 100%);
    --circle-bg:            linear-gradient(160deg, #030f07 0%, #071a0e 50%, #051208 100%);
    --circle-accent:        #52b788;
    --circle-accent-soft:   rgba(82,183,136,0.15);
    --circle-accent-border: rgba(82,183,136,0.28);
    --circle-tab-active:    #95d5b2;
    --circle-author:        rgba(140,210,170,0.85);
    --cs-bg:                linear-gradient(160deg, #081a10 0%, #0f2618 45%, #081a10 100%);
    --cs-orb-base:          #061510;
}
[data-theme="sunset"] {
    --sheet-bg:             rgba(50,20,6,0.98);
    --sheet-border:         rgba(247,151,30,0.18);
    --sheet-handle:         rgba(247,151,30,0.3);
    --sec-friends-grad:     linear-gradient(135deg, #f7971e 0%, #ffd200 100%);
    --sec-oneliners-grad:   linear-gradient(135deg, #f953c6 0%, #b91d73 100%);
    --sec-birthday-grad:    linear-gradient(135deg, #f6d365 0%, #f093fb 100%);
    --sec-suggestions-grad: linear-gradient(135deg, #f5af19 0%, #f12711 100%);
    --sec-routine-grad:     linear-gradient(135deg, #fc4a1a 0%, #f7b733 100%);
    --sec-workouts-grad:    linear-gradient(135deg, #8e0e00 0%, #1f1f1f 100%);
    --sec-food-grad:        linear-gradient(135deg, #ee9ca7 0%, #ffdde1 100%);
    --sec-plans-grad:       linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);
    --sec-galaxy-grad:      linear-gradient(135deg, #1c0a00 0%, #6b3fa0 50%, #24243e 100%);
    --circle-bg:            linear-gradient(160deg, #1a0800 0%, #250d00 50%, #1a0a05 100%);
    --circle-accent:        #f7971e;
    --circle-accent-soft:   rgba(247,151,30,0.14);
    --circle-accent-border: rgba(247,151,30,0.28);
    --circle-tab-active:    #ffc97a;
    --circle-author:        rgba(255,200,120,0.85);
    --cs-bg:                linear-gradient(160deg, #2a1005 0%, #351808 45%, #2a1205 100%);
    --cs-orb-base:          #200e04;
}
[data-theme="minimal"] {
    --sheet-bg:             rgba(36,36,36,0.98);
    --sheet-border:         rgba(255,255,255,0.08);
    --sheet-handle:         rgba(255,255,255,0.18);
    --sec-friends-grad:     linear-gradient(135deg, #2c2c2c 0%, #4a4a4a 100%);
    --sec-oneliners-grad:   linear-gradient(135deg, #1a1a1a 0%, #3d3d3d 100%);
    --sec-birthday-grad:    linear-gradient(135deg, #bebec3 0%, #8f8f95 100%);
    --sec-suggestions-grad: linear-gradient(135deg, #37474f 0%, #546e7a 100%);
    --sec-routine-grad:     linear-gradient(135deg, #212121 0%, #484848 100%);
    --sec-workouts-grad:    linear-gradient(135deg, #263238 0%, #37474f 100%);
    --sec-food-grad:        linear-gradient(135deg, #424242 0%, #616161 100%);
    --sec-plans-grad:       linear-gradient(135deg, #3b3b3b 0%, #8d8d8d 100%);
    --sec-galaxy-grad:      linear-gradient(135deg, #0a0a0a 0%, #1c1c1c 50%, #0a0a0a 100%);
    --circle-bg:            linear-gradient(160deg, #0a0a0a 0%, #111111 50%, #0a0a0a 100%);
    --circle-accent:        #8c8c90;
    --circle-accent-soft:   rgba(172,172,176,0.12);
    --circle-accent-border: rgba(205,205,210,0.2);
    --circle-tab-active:    #e3e3e6;
    --circle-author:        rgba(226,226,230,0.76);
    --cs-bg:                linear-gradient(160deg, #181818 0%, #202020 45%, #141414 100%);
    --cs-orb-base:          #111111;
}
[data-theme="instagram"] {
    --sheet-bg:             rgba(255,255,255,0.98);
    --sheet-border:         rgba(219,219,219,0.8);
    --sheet-handle:         rgba(0,0,0,0.15);
    --sheet-text:           #262626;
    --sheet-subtext:        rgba(38,38,38,0.5);
    /* Warm, subtly tinted section backgrounds — each section has its own personality */
    --sec-friends-grad:     linear-gradient(160deg, #fef6fb 0%, #f9f0f7 50%, #fdf4f9 100%);
    --sec-oneliners-grad:   linear-gradient(160deg, #fafafa 0%, #f5f5f5 50%, #fafafa 100%);
    --sec-birthday-grad:    linear-gradient(160deg, #fefcf5 0%, #fdf8ed 50%, #fefbf2 100%);
    --sec-suggestions-grad: linear-gradient(160deg, #f5faf8 0%, #eef7f3 50%, #f3f9f6 100%);
    --sec-routine-grad:     linear-gradient(160deg, #f5f8fe 0%, #eef2fc 50%, #f3f7fd 100%);
    --sec-workouts-grad:    linear-gradient(160deg, #fef7f5 0%, #fdf1ee 50%, #fef5f2 100%);
    --sec-food-grad:        linear-gradient(160deg, #f5fcfc 0%, #eef8f8 50%, #f3fafa 100%);
    --sec-plans-grad:       linear-gradient(160deg, #fffaf0 0%, #fdf4e7 50%, #fff8ee 100%);
    --sec-galaxy-grad:      linear-gradient(160deg, #f8f8fa 0%, #f0f0f4 50%, #f6f6f9 100%);
    /* Circle & switcher */
    --circle-bg:            linear-gradient(180deg, #ffffff 0%, #fafafa 48%, #ffffff 100%);
    --circle-accent:        #0095f6;
    --circle-accent-soft:   rgba(0,149,246,0.08);
    --circle-accent-border: rgba(219,219,219,0.8);
    --circle-tab-active:    #262626;
    --circle-author:        rgba(38,38,38,0.85);
    --cs-bg:                linear-gradient(180deg, #ffffff 0%, #fafafa 46%, #ffffff 100%);
    --cs-orb-base:          #f0f0f0;
}

/* ---- SECTION BACKGROUNDS ---- */
.sec-friends     { background: var(--sec-friends-grad); }
.sec-oneliners   { background: var(--sec-oneliners-grad); }
.sec-birthday    { background: var(--sec-birthday-grad); }
.sec-suggestions { background: var(--sec-suggestions-grad); }
.sec-routine     { background: var(--sec-routine-grad); }
.sec-workouts    { background: var(--sec-workouts-grad); }
.sec-food        { background: var(--sec-food-grad); }
.sec-plans       { background: var(--sec-plans-grad); }
.sec-saved       { background: var(--sec-saved-grad, linear-gradient(160deg, #151b2a 0%, #171c2b 52%, #121622 100%)); }
.sec-galaxy      { background: var(--sec-galaxy-grad); }
.sec-pins        { background: linear-gradient(160deg, #13151f 0%, #161824 60%, #111420 100%); }

/* ── Pins Page ───────────────────────────────────────────────── */
.pins-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 32px;
}
.pins-empty {
    text-align: center;
    padding: 48px 0;
    color: rgba(255,255,255,0.35);
    font: 400 0.9rem 'Poppins', sans-serif;
}
.pins-empty-icon { font-size: 2.4rem; display: block; margin-bottom: 10px; }
.pin-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    padding: 14px 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    transition: border-color 0.15s, background 0.15s;
    position: relative;
    overflow: hidden;
}
.pin-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    border-radius: 18px 0 0 18px;
}
.pin-card[data-pin-type="vibe"]::before        { background: linear-gradient(180deg,#a78bfa,#6c63ff); }
.pin-card[data-pin-type="idea"]::before        { background: linear-gradient(180deg,#f6d365,#fb923c); }
.pin-card[data-pin-type="routine"]::before     { background: linear-gradient(180deg,#6ee7b7,#34d399); }
.pin-card[data-pin-type="workout"]::before     { background: linear-gradient(180deg,#fb923c,#f43f5e); }
.pin-card[data-pin-type="food"]::before        { background: linear-gradient(180deg,#f9a8d4,#ec4899); }
.pin-card[data-pin-type="circle_post"]::before { background: linear-gradient(180deg,#60a5fa,#3b82f6); }
.pin-card-icon {
    font-size: 1.4rem;
    flex: 0 0 auto;
    line-height: 1;
    margin-top: 2px;
}
.pin-card-body {
    flex: 1;
    min-width: 0;
}
.pin-card-type {
    font: 600 0.66rem 'Poppins', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 4px;
}
.pin-card[data-pin-type="vibe"]        .pin-card-type { color: #a78bfa; }
.pin-card[data-pin-type="idea"]        .pin-card-type { color: #f6d365; }
.pin-card[data-pin-type="routine"]     .pin-card-type { color: #6ee7b7; }
.pin-card[data-pin-type="workout"]     .pin-card-type { color: #fb923c; }
.pin-card[data-pin-type="food"]        .pin-card-type { color: #f9a8d4; }
.pin-card[data-pin-type="circle_post"] .pin-card-type { color: #60a5fa; }
.pin-card-text {
    font: 500 0.9rem 'Poppins', sans-serif;
    color: rgba(255,255,255,0.88);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pin-card-meta {
    font: 400 0.72rem 'Poppins', sans-serif;
    color: rgba(255,255,255,0.35);
    margin-top: 5px;
}
.pin-card-type-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}
.pin-card-type-row .pin-card-type { margin-bottom: 0; }
.pin-card-sublabel {
    font: 400 0.62rem 'Poppins', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.06);
    border-radius: 4px;
    padding: 1px 5px;
}
.pin-card-desc {
    font: 400 0.78rem 'Poppins', sans-serif;
    color: rgba(255,255,255,0.45);
    margin-top: 3px;
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.pin-card-thumb {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    object-fit: cover;
    flex: 0 0 auto;
}
.pin-unpin-btn {
    flex: 0 0 auto;
    background: none;
    border: none;
    padding: 4px 6px;
    cursor: pointer;
    color: rgba(255,255,255,0.3);
    font-size: 1rem;
    line-height: 1;
    border-radius: 8px;
    transition: color 0.15s, background 0.15s;
    margin-top: -2px;
}
.pin-unpin-btn:hover { color: #f43f5e; background: rgba(244,63,94,0.1); }

/* Pin button on cards (vibe, idea action rows) */
.pin-action-btn {
    background: none;
    border: none;
    padding: 5px 6px;
    cursor: pointer;
    color: rgba(255,255,255,0.3);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
    flex: 0 0 auto;
}
.pin-action-btn:hover { color: #f6d365; background: rgba(246,211,101,0.1); }
.pin-action-btn.pinned { color: #f6d365; }

/* ---- FRIENDS ---- */
.sec-friends .friends-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.2rem;
}
.sec-friends .friend-card {
    background: rgba(255,255,255,0.2) !important;
    /* backdrop-filter removed to prevent blur bleed-through during entrance animations */
    border: 1px solid rgba(255,255,255,0.25) !important;
    border-radius: 20px !important;
    padding: 1.6rem !important;
    text-align: center;
    position: relative;
    transition: all 0.3s ease;
    color: #fff;
    box-shadow: none !important;
}
.sec-friends .friend-card:hover { transform: translateY(-6px) !important; background: rgba(255,255,255,0.22) !important; }
.sec-friends .friend-name { font-size: 1.2rem; font-weight: 700; margin-bottom: 0.4rem; color: #fff !important; }
.sec-friends .think-count {
    font-size: 2.5rem; font-weight: 800;
    color: rgba(255,255,255,0.95) !important;
    margin-bottom: 0.8rem;
    font-family: 'Space Mono', monospace;
    display: block;
}
.sec-friends .think-btn {
    background: rgba(255,255,255,0.3) !important;
    border: 2px solid rgba(255,255,255,0.6) !important;
    color: #fff !important;
    padding: 0.55rem 1.2rem !important;
    border-radius: 30px !important;
    cursor: pointer;
    font-size: 0.85rem; font-weight: 600;
    font-family: 'Poppins', sans-serif;
    transition: all 0.2s ease;
    width: 100%;
    text-transform: none !important;
}
.sec-friends .think-btn:hover { background: rgba(255,255,255,0.35) !important; transform: scale(1.04); }
@keyframes countPulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.18); }
    100% { transform: scale(1); }
}
.sec-friends .delete-btn {
    position: absolute; top: 10px; right: 12px;
    background: none !important; border: none !important;
    color: rgba(255,255,255,0.35) !important; cursor: pointer;
    font-size: 0.9rem; transition: color 0.2s;
}
.sec-friends .delete-btn:hover { color: rgba(255,100,100,0.8) !important; }

/* ---- ONE-LINERS ---- */
.oneliners-flow {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.05rem;
    justify-content: stretch;
    min-height: 80px;
    align-items: flex-start;
    width: min(100%, 980px);
    margin: 0 auto;
}
.ol-view-toggle {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    flex-shrink: 0;
}
.ol-view-btn {
    width: 52px;
    min-width: 52px;
    flex: 0 0 52px;
    height: 31px;
    padding: 0;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
#olViewToggle {
    margin-left: auto;
}
.ol-view-btn:hover {
    transform: translateY(-1px);
}
.ol-view-symbol {
    position: relative;
    display: block;
    color: currentColor;
}
.ol-view-symbol.z {
    width: 16px;
    height: 11px;
    background: linear-gradient(
        to bottom right,
        transparent 44%,
        currentColor 44%,
        currentColor 56%,
        transparent 56%
    );
}
.ol-view-symbol.z::before,
.ol-view-symbol.z::after {
    content: "";
    position: absolute;
    left: 0;
    width: 16px;
    height: 2px;
    background: currentColor;
    border-radius: 999px;
}
.ol-view-symbol.z::before { top: 0; }
.ol-view-symbol.z::after { bottom: 0; }
.ol-view-symbol.hash {
    width: 13px;
    height: 13px;
}
.ol-view-symbol.hash span,
.ol-view-symbol.equal span {
    position: absolute;
    background: currentColor;
    border-radius: 999px;
}
.ol-view-symbol.hash span:nth-child(1),
.ol-view-symbol.hash span:nth-child(2) {
    width: 2px;
    height: 13px;
    top: 0;
}
.ol-view-symbol.hash span:nth-child(1) { left: 3.5px; }
.ol-view-symbol.hash span:nth-child(2) { right: 3.5px; }
.ol-view-symbol.hash span:nth-child(3),
.ol-view-symbol.hash span:nth-child(4) {
    width: 13px;
    height: 2px;
    left: 0;
}
.ol-view-symbol.hash span:nth-child(3) { top: 3.5px; }
.ol-view-symbol.hash span:nth-child(4) { bottom: 3.5px; }
.ol-view-symbol.equal {
    width: 14px;
    height: 8px;
}
.ol-view-symbol.equal span {
    left: 0;
    width: 14px;
    height: 2px;
}
.ol-view-symbol.equal span:nth-child(1) { top: 0; }
.ol-view-symbol.equal span:nth-child(2) { bottom: 0; }
@keyframes popIn {
    from { opacity: 0; transform: scale(0.6); }
    to   { opacity: 1; transform: scale(1); }
}
.oneliner-card {
    background: linear-gradient(180deg, rgba(41,43,55,0.88), rgba(30,31,41,0.94));
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 28px;
    padding: 0;
    width: 100%;
    max-width: none;
    position: relative;
    overflow: hidden;
    transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    animation: popIn 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    cursor: pointer;
    box-shadow: 0 20px 42px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.05);
}
.oneliner-card.has-author-orb .card-inner {
    padding: 1.55rem 1.65rem 1.2rem;
}
.ol-author-orb {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    padding: 0;
    background: linear-gradient(135deg, rgba(246, 211, 101, 0.38), rgba(253, 160, 133, 0.28));
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
    cursor: pointer;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.ol-author-orb:hover {
    transform: scale(1.06);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.32);
}
.ol-author-orb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.avatar-letter-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    font: inherit;
    line-height: 1;
    text-transform: uppercase;
}
.avatar-letter-fallback[hidden] {
    display: none !important;
}
.ol-author-orb-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font: 700 1rem/1 'Poppins', sans-serif;
    text-transform: uppercase;
}
.oneliner-media-btn {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0.25rem 0 0;
    border: none;
    background: none;
    border-radius: 22px;
    overflow: hidden;
    cursor: pointer;
}
.oneliner-media {
    display: block;
    width: 100%;
    max-height: 380px;
    object-fit: cover;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.24);
}
.oneliner-video-wrap {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    margin: 0.25rem 0 0;
}
.oneliner-media-video {
    object-fit: contain;
    background: #000;
    cursor: default;
    border-radius: 0;
    margin: 0;
    box-shadow: none;
    border: none;
}
.oneliner-video-play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.32);
    border: none;
    cursor: pointer;
    transition: background 0.15s;
}
.oneliner-video-play-overlay:hover { background: rgba(0,0,0,0.48); }
.oneliner-video-play-overlay svg {
    width: 56px;
    height: 56px;
    color: #fff;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
}
.popup-video-preview {
    display: block;
    width: 100%;
    max-height: 220px;
    border-radius: 14px;
    background: #000;
}
/* Card inner — slides left on right-swipe to reveal share button */
.card-inner {
    padding: 0.7rem 1.1rem;
    transition: transform 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Swipe-reveal share button — sits off the right edge */
.swipe-share-btn {
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 72px;
    background: linear-gradient(160deg, #667eea, #764ba2);
    border: none;
    color: #fff;
    font-size: 1.1rem;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border-radius: 0 14px 14px 0;
}
.swipe-share-btn span { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; opacity: 0.9; }

/* Active swipe state */
.oneliner-card.swipe-share .card-inner,
.sug-card.swipe-share .card-inner,
.occasion-card.swipe-share .card-inner,
.occ-hero.swipe-share .card-inner  { transform: translateX(-72px); }
.oneliner-card.swipe-share .swipe-share-btn,
.sug-card.swipe-share .swipe-share-btn,
.occasion-card.swipe-share .swipe-share-btn,
.occ-hero.swipe-share .swipe-share-btn { transform: translateX(0); }

.oneliner-card:hover {
    transform: translateY(-2px);
    background: linear-gradient(180deg, rgba(47,49,63,0.92), rgba(32,34,45,0.96));
    border-color: rgba(255,255,255,0.18);
    box-shadow: 0 24px 48px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.06);
}
.oneliner-text {
    font-size: clamp(1.15rem, 2.4vw, 1.5rem);
    color: #f7f8fc;
    font-weight: 500;
    line-height: 1.35;
    font-style: normal;
    margin: 0 0 0.95rem;
    transition: margin-bottom 0.2s ease;
    letter-spacing: -0.015em;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.ol-vibey-signature {
    display: none;
}
.oneliner-text::before,
.oneliner-text::after { content: none; }
.oneliner-card .card-inner {
    padding: 1.55rem 1.65rem 1.2rem;
}
.oneliner-card .tile-menu-btn {
    position: absolute;
    top: 1rem;
    right: 1.05rem;
    z-index: 3;
    border: 0;
    background: none;
    color: rgba(255,255,255,0.72);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}
.ol-post-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.45rem;
    padding-right: 0.9rem;
}
.ol-post-author {
    display: inline-flex;
    align-items: center;
    gap: 0.95rem;
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    min-width: 0;
    text-align: left;
}
.ol-post-author-static {
    cursor: default;
}
.ol-post-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    flex-shrink: 0;
}
.ol-post-author-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}
.ol-post-author-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.ol-post-author-name {
    color: #f7f8fc;
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.ol-post-author-dot {
    color: rgba(255,255,255,0.38);
    font-size: 0.95rem;
}
.ol-post-time {
    color: rgba(255,255,255,0.42);
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1;
}
.ol-badges-inline {
    margin: 0 0 0.7rem 4.75rem;
}
.ol-post-body {
    margin-left: 4.75rem;
}
.ol-post-actions {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin: 0.7rem 0 0 4.75rem;
    padding-top: 0.65rem;
    border-top: 1px solid rgba(255,255,255,0.09);
}
.ol-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 40px;
    padding: 0.55rem 0.9rem;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 999px;
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.72);
    font-family: 'Poppins', sans-serif;
    font-size: 0.94rem;
    font-weight: 700;
    cursor: pointer;
    transition: color 0.18s ease, transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.ol-post-actions .react-btn {
    font-size: 0.94rem;
    line-height: 1;
}
.ol-post-actions .react-btn:hover,
.ol-post-actions .react-btn.reacted {
    background: rgba(255, 109, 130, 0.12);
    border-color: rgba(255, 109, 130, 0.24);
    transform: translateY(-1px);
}
.ol-action-btn:hover {
    color: #fff;
    background: rgba(255,255,255,0.09);
    border-color: rgba(255,255,255,0.18);
    transform: translateY(-1px);
}
.ol-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    line-height: 1;
}
.ol-action-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}
.ol-action-icon-heart {
    color: #ff5d6c;
}
.ol-heart-btn.reacted,
.ol-heart-btn.reacted .ol-action-icon-heart {
    color: #ff7a88;
}
.ol-share-inline .ol-action-icon {
    color: rgba(255,255,255,0.78);
}
.ol-post-meta {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    margin-top: 0.75rem;
}
.ol-post-meta-right {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}
.ol-card-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.55rem;
}
.source-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 20px;
    padding: 0.1rem 0.48rem;
    border-radius: 999px;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    flex-shrink: 0;
}
.source-chip-mcp {
    color: rgba(255,255,255,0.74);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.12);
}
.ol-post-meta-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.ol-heart-chip {
    flex-shrink: 0;
}
.ol-author-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 0;
    border: none;
    background: none;
    color: rgba(255,255,255,0.9);
    cursor: pointer;
}
.ol-author-link-static {
    cursor: default;
}
.ol-author-link-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(246, 211, 101, 0.38), rgba(253, 160, 133, 0.28));
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24);
}
.ol-author-link-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ol-author-link-name {
    color: rgba(255,255,255,0.7);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ol-post-meta .ol-post-time {
    flex-shrink: 0;
    color: rgba(255,255,255,0.46);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
}
.oneliners-flow.ol-view-classic {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    width: 100%;
}
.oneliners-flow.ol-view-classic .oneliner-card {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 14px;
    width: min(100%, 380px);
    max-width: 380px;
    box-shadow: none;
    --ol-zig-offset: 0px;
    transform: translateY(var(--ol-zig-offset));
}
.oneliners-flow.ol-view-classic .oneliner-card:hover {
    transform: translateY(calc(var(--ol-zig-offset) - 3px));
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.38);
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.oneliners-flow.ol-view-classic .oneliner-card .card-inner,
.oneliners-flow.ol-view-classic .oneliner-card.has-author-orb .card-inner {
    padding: 0.8rem 1.1rem 0.95rem;
}
.oneliners-flow.ol-view-classic .oneliner-text {
    font-size: 0.9rem;
    font-style: italic;
    line-height: 1.45;
    letter-spacing: 0;
    margin: 0;
}
.oneliners-flow.ol-view-classic .oneliner-text::before {
    content: '\201C';
    font-size: 1.25rem;
    vertical-align: -0.25rem;
    opacity: 0.45;
    margin-right: 1px;
}
.oneliners-flow.ol-view-classic .oneliner-text::after {
    content: '\201D';
    font-size: 1.25rem;
    vertical-align: -0.25rem;
    opacity: 0.45;
    margin-left: 1px;
}
.oneliners-flow.ol-view-classic .oneliner-media-btn {
    margin: 0 0 0.7rem;
    border-radius: 12px;
}
.oneliners-flow.ol-view-classic .oneliner-media {
    max-height: 220px;
    border-radius: 12px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}
.oneliners-flow.ol-view-classic .ol-badges-inline,
.oneliners-flow.ol-view-classic .ol-post-body,
.oneliners-flow.ol-view-classic .ol-post-actions {
    margin-left: 0;
}
.oneliners-flow.ol-view-classic .ol-card-tags {
    margin-top: 0.65rem;
}
.oneliners-flow.ol-view-classic .ol-post-header,
.oneliners-flow.ol-view-classic .ol-post-author,
.oneliners-flow.ol-view-classic .ol-post-author-static,
.oneliners-flow.ol-view-classic .ol-post-actions {
    display: none;
}
.oneliners-flow.ol-view-classic .ol-post-meta {
    display: flex;
}
.oneliners-flow.ol-view-classic .ol-heart-chip {
    display: inline-flex;
}
.oneliners-flow.ol-view-classic .ol-author-link-avatar {
    width: 34px;
    height: 34px;
}
.oneliners-flow.ol-view-classic .card-hover-share {
    display: block;
}
.oneliners-flow.ol-view-classic .oneliner-card:nth-child(4n + 1) { --ol-zig-offset: 0px; }
.oneliners-flow.ol-view-classic .oneliner-card:nth-child(4n + 2) { --ol-zig-offset: 18px; }
.oneliners-flow.ol-view-classic .oneliner-card:nth-child(4n + 3) { --ol-zig-offset: 4px; }
.oneliners-flow.ol-view-classic .oneliner-card:nth-child(4n + 4) { --ol-zig-offset: 24px; }
.oneliners-flow.ol-view-classic .ol-post-time {
    color: rgba(255,255,255,0.46);
    font-size: 0.78rem;
    font-weight: 600;
}
.oneliners-flow.ol-view-feed .ol-post-meta,
.oneliners-flow.ol-view-feed .ol-heart-chip,
.oneliners-flow.ol-view-feed .card-hover-share {
    display: none;
}
.oneliners-flow.ol-view-feed .oneliner-card {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.15);
    box-shadow: 0 14px 34px rgba(0,0,0,0.14);
}
.oneliners-flow.ol-view-feed .oneliner-card:hover {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.24);
    box-shadow: 0 22px 42px rgba(0,0,0,0.18);
}
.oneliners-flow.ol-view-vibey {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 1.15rem 1rem;
    width: min(100%, 1420px);
    margin: 0 auto;
}
.oneliners-flow.ol-view-vibey .oneliner-card {
    background: rgba(255,255,255,0.11);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 24px;
    width: min(100%, 430px);
    max-width: 430px;
    box-shadow: 0 14px 34px rgba(0,0,0,0.14);
    --ol-vibey-offset-y: 0px;
    --ol-vibey-offset-x: 0px;
    transform: translate(var(--ol-vibey-offset-x), var(--ol-vibey-offset-y));
}
.oneliners-flow.ol-view-vibey .oneliner-card:hover {
    transform: translate(var(--ol-vibey-offset-x), calc(var(--ol-vibey-offset-y) - 4px));
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.24);
    box-shadow: 0 22px 42px rgba(0,0,0,0.18);
}
.oneliners-flow.ol-view-vibey .oneliner-card .card-inner,
.oneliners-flow.ol-view-vibey .oneliner-card.has-author-orb .card-inner {
    padding: 1.1rem 1.25rem 1rem;
}
.oneliners-flow.ol-view-vibey .oneliner-text {
    font-size: clamp(0.82rem, 1.44vw, 1.09rem);
    line-height: 1.46;
    font-style: italic;
    letter-spacing: -0.015em;
    margin: 0 0 0.7rem;
}
.oneliners-flow.ol-view-vibey .oneliner-text::before {
    content: '\201C';
    font-size: 1.1rem;
    vertical-align: -0.2rem;
    opacity: 0.42;
    margin-right: 1px;
}
.oneliners-flow.ol-view-vibey .oneliner-text::after {
    content: '\201D';
    font-size: 1.1rem;
    vertical-align: -0.2rem;
    opacity: 0.42;
    margin-left: 1px;
}
.oneliners-flow.ol-view-vibey .ol-vibey-signature {
    display: block;
    width: max-content;
    max-width: 100%;
    margin: -0.1rem 0 0.8rem auto;
    color: rgba(255,255,255,0.62);
    font-size: 0.88rem;
    font-style: italic;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-align: right;
}
.oneliners-flow.ol-view-vibey .oneliner-media-btn {
    margin: 0 0 0.95rem;
    border-radius: 20px;
}
.oneliners-flow.ol-view-vibey .oneliner-media {
    max-height: 440px;
    border-radius: 20px;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.18);
}
.oneliners-flow.ol-view-vibey .ol-post-header,
.oneliners-flow.ol-view-vibey .ol-post-author,
.oneliners-flow.ol-view-vibey .ol-post-author-static,
.oneliners-flow.ol-view-vibey .ol-post-actions {
    display: none;
}
.oneliners-flow.ol-view-vibey .ol-post-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 0.8rem;
}
.oneliners-flow.ol-view-vibey .ol-post-meta-left {
    flex: 1 1 auto;
    min-width: 0;
}
.oneliners-flow.ol-view-vibey .ol-heart-chip {
    display: inline-flex;
}
.oneliners-flow.ol-view-vibey .card-hover-share {
    display: block;
}
.oneliners-flow.ol-view-vibey .ol-author-link {
    flex: 0 0 auto;
    min-width: auto;
    gap: 0;
}
.oneliners-flow.ol-view-vibey .ol-author-link-avatar {
    width: 42px;
    height: 42px;
}
.oneliners-flow.ol-view-vibey .ol-author-link-name {
    display: none;
}
.oneliners-flow.ol-view-vibey .ol-post-time {
    flex-shrink: 0;
    margin-left: 10px;
    font-size: 0.76rem;
    white-space: nowrap;
}
.oneliners-flow.ol-view-vibey .oneliner-card.ol-card-has-image {
    width: min(100%, 520px);
    max-width: 520px;
}
.oneliners-flow.ol-view-vibey .oneliner-card.ol-card-short {
    width: min(100%, 360px);
    max-width: 360px;
}
.oneliners-flow.ol-view-vibey .oneliner-card.ol-card-long {
    width: min(100%, 560px);
    max-width: 560px;
}
.oneliners-flow.ol-view-vibey .oneliner-card:nth-child(8n + 1) {
    --ol-vibey-offset-y: 4px;
    --ol-vibey-offset-x: -12px;
}
.oneliners-flow.ol-view-vibey .oneliner-card:nth-child(8n + 2) {
    --ol-vibey-offset-y: 34px;
    --ol-vibey-offset-x: 20px;
}
.oneliners-flow.ol-view-vibey .oneliner-card:nth-child(8n + 3) {
    --ol-vibey-offset-y: -6px;
    --ol-vibey-offset-x: 14px;
}
.oneliners-flow.ol-view-vibey .oneliner-card:nth-child(8n + 4) {
    --ol-vibey-offset-y: 24px;
    --ol-vibey-offset-x: -18px;
}
.oneliners-flow.ol-view-vibey .oneliner-card:nth-child(8n + 5) {
    --ol-vibey-offset-y: 10px;
    --ol-vibey-offset-x: 10px;
}
.oneliners-flow.ol-view-vibey .oneliner-card:nth-child(8n + 6) {
    --ol-vibey-offset-y: 42px;
    --ol-vibey-offset-x: -8px;
}
.oneliners-flow.ol-view-vibey .oneliner-card:nth-child(8n + 7) {
    --ol-vibey-offset-y: 0px;
    --ol-vibey-offset-x: 24px;
}
.oneliners-flow.ol-view-vibey .oneliner-card:nth-child(8n + 8) {
    --ol-vibey-offset-y: 28px;
    --ol-vibey-offset-x: -16px;
}
.oneliners-flow.ol-view-vibey .oneliner-card.ol-qotd,
.oneliners-flow.ol-view-vibey .oneliner-card.ol-trending {
    background: linear-gradient(180deg, rgba(111,97,48,0.34), rgba(60,56,39,0.38));
    border-color: rgba(222, 186, 83, 0.5);
}
.oneliners-flow.ol-view-vibey .oneliner-card.ol-qotd {
    width: min(100%, 620px);
    max-width: 620px;
}
.popup-upload-shell {
    display: grid;
    gap: 0.65rem;
}
.popup-upload-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}
.popup-upload-row-compact {
    gap: 0.5rem;
}
.popup-upload-btn,
.popup-upload-clear {
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.92);
    border-radius: 999px;
    padding: 0.7rem 1rem;
    font: inherit;
}
.popup-upload-btn-compact {
    padding: 0.5rem 0.8rem;
    font-size: 0.88rem;
    line-height: 1;
    min-width: 0;
}
.popup-upload-row-compact .popup-upload-clear {
    padding: 0.5rem 0.85rem;
    font-size: 0.84rem;
}
.popup-upload-clear {
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.72);
}
.popup-upload-preview {
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05);
}
.popup-upload-preview img,
.popup-upload-preview video {
    display: block;
    width: 100%;
    max-height: 220px;
    object-fit: cover;
}
.activity-card-media {
    width: 100%;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.06);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.activity-card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.activity-card-media-occasion {
    aspect-ratio: 16 / 9;
    margin: 0.35rem 0 0.9rem;
}
.activity-card-media-occasion-hero {
    aspect-ratio: 16 / 8;
    margin: 0.45rem 0 1rem;
}
.activity-card-media-routine {
    aspect-ratio: 16 / 8;
    margin-bottom: 0.8rem;
    border-radius: 14px;
}
.tl-item.tl-has-image .activity-card-media-routine {
    margin: 0 0 0.8rem;
    border-radius: 0;
    border: 0;
    box-shadow: none;
}
.activity-card-media-workout {
    aspect-ratio: 16 / 8;
    margin-bottom: 0.9rem;
}
.activity-card-media-food {
    aspect-ratio: 16 / 9;
    margin-bottom: 1rem;
}
.activity-card-media-plan {
    aspect-ratio: 16 / 9;
    margin-bottom: 1rem;
}
.card-footer {
    display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.25s ease, opacity 0.2s ease, margin-top 0.2s ease;
    margin-top: 0;
}
/* Reveal reactions on hover (desktop) or tap (mobile) */
.oneliner-card:hover .oneliner-text,
.oneliner-card.touched .oneliner-text {
    margin-bottom: 0;
}
.like-btn {
    background: none;
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
    padding: 0.25rem 0.7rem;
    border-radius: 30px;
    cursor: pointer; font-size: 0.82rem;
    display: flex; align-items: center; gap: 4px;
    transition: all 0.2s ease;
    font-family: 'Poppins', sans-serif;
}
.like-btn:hover { background: rgba(255,255,255,0.18); transform: scale(1.1); }
.like-btn.liked { background: rgba(255,80,80,0.35); border-color: #ff6b6b; }
.del-x {
    background: none; border: none;
    color: rgba(255,255,255,0.3); cursor: pointer;
    font-size: 0.95rem; padding: 0 4px;
    transition: color 0.2s;
}
.del-x:hover { color: rgba(255,100,100,0.8); }

/* Suggestion cards: del-x anchored to top-right corner */
.sug-card { position: relative; }
.sug-card .del-x {
    position: absolute;
    top: 8px; right: 8px;
}

/* ── BIRTHDAY / OCCASIONS ─────────────────────────────────────────────────── */

/* Hero — Coming Up Next */
#occasionsHero { margin-bottom: 1.6rem; }
.occ-hero {
    position: relative;
    border-radius: 22px;
    padding: 0;
    text-align: center;
    color: #1a1a2e;
    background: rgba(255,255,255,0.36);
    border: 1px solid rgba(255,255,255,0.5);
    box-shadow: 0 8px 32px rgba(0,0,0,0.10);
    transition: box-shadow 0.3s;
    overflow: hidden;
}
.occ-hero > .card-inner { padding: 2rem 2rem 1.6rem; }
.occ-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 22px;
    pointer-events: none;
    opacity: 0.18;
    background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.9) 0%, transparent 70%);
}
.occ-hero-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    opacity: 0.5;
    margin-bottom: 0.6rem;
}
.occ-hero-icon-zone {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;
    margin-bottom: 0.6rem;
}
.occ-hero-icon-zone::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.55) 0%, transparent 75%);
}
.occ-hero-icon { font-size: 3.6rem; position: relative; }
.occ-hero-title {
    font-size: clamp(1.25rem, 3vw, 1.6rem);
    font-weight: 800;
    color: #1a1a2e;
    margin-bottom: 0.2rem;
}
.occ-hero-date {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(0,0,0,0.45);
    margin-bottom: 0.5rem;
}
.occ-hero-memory {
    font-size: 0.88rem;
    color: rgba(0,0,0,0.55);
    font-style: italic;
    margin: 0.4rem 0 0.8rem;
}
/* Grid */
.occasions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1.4rem;
    align-items: stretch;
}
.occasions-grid > .occasion-card { display: flex; flex-direction: column; }
/* Card */
.occasion-card {
    position: relative;
    background: rgba(255,255,255,0.30);
    border: 1px solid rgba(255,255,255,0.45);
    border-radius: 20px;
    padding: 0;
    text-align: center;
    color: #1a1a2e;
    transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease;
    overflow: hidden;
}
.occasion-card > .card-inner { padding: 1.6rem 1.4rem 1.2rem; }
.occasion-card.occ-has-image > .card-inner {
    padding: 0 0 1.2rem;
}
.occasion-card:hover {
    transform: translateY(-6px);
    background: rgba(255,255,255,0.44);
    box-shadow: 0 16px 36px rgba(0,0,0,0.14);
}
.occasion-card:hover .occ-icon-zone { transform: scale(1.08); }
.occasion-card:hover .occ-countdown { filter: brightness(1.25); }

/* Add occasion tile */
.occ-add-tile {
    cursor: pointer;
    transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease;
}
.occ-add-tile:hover {
    transform: translateY(-6px);
    background: rgba(255,255,255,0.44);
    box-shadow: 0 16px 36px rgba(0,0,0,0.14);
}
.occ-add-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.6rem;
    flex: 1;
    padding: 1.6rem 1.4rem 1.2rem;
}
.occ-add-icon {
    font-size: 2.4rem;
    opacity: 0.5;
    pointer-events: none;
}
.occ-add-label {
    font-size: 0.96rem;
    font-weight: 700;
    line-height: 1.15;
    color: rgba(255,255,255,0.7);
    text-align: center;
    pointer-events: none;
}

/* Countdown chip */
.occ-countdown {
    position: absolute;
    top: 12px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    font-size: 0.68rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: 0.3px;
    pointer-events: none;
    white-space: nowrap;
}
.occ-cnt-today   { background: #f6d365; color: #7a5000; box-shadow: 0 0 8px rgba(246,211,101,0.5); }
.occ-cnt-soon    { background: rgba(255,140,50,0.22); color: #c05000; border: 1px solid rgba(255,140,50,0.5); }
.occ-cnt-month   { background: rgba(64,210,180,0.15); color: #1a6a60; border: 1px solid rgba(64,210,180,0.4); }
.occ-cnt-far     { background: rgba(160,160,160,0.15); color: rgba(0,0,0,0.45); border: 1px solid rgba(160,160,160,0.3); }
/* Also style the chip inside .occ-hero */
.occ-hero .occ-countdown {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    transform: none;
    display: inline-block;
    margin-bottom: 0.6rem;
}

/* Admin buttons (edit + delete) — shown in edit mode */
.occ-admin-btns {
    position: absolute;
    top: 8px;
    right: 10px;
    left: auto;
    display: none;
    gap: 4px;
}
body.edit-mode .occ-admin-btns { display: flex; }

/* Icon zone */
.occ-icon-zone {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin: 0.4rem auto 0.6rem;
    transition: transform 0.28s ease;
}
.occ-icon-zone::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.50) 0%, transparent 72%);
}
.occ-icon { font-size: 2.6rem; position: relative; }

/* Typography */
.occ-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #1a1a2e;
    margin: 0 0 0.25rem;
}
.occ-card-copy {
    padding: 0;
}
.occasion-card.occ-has-image .occ-card-copy {
    padding: 0 1.1rem;
}
.occ-date {
    font-size: 0.73rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(0,0,0,0.42);
    margin-bottom: 0.4rem;
}
.occ-memory {
    font-size: 0.82rem;
    color: rgba(0,0,0,0.55);
    font-style: italic;
    margin: 0.2rem 0 0.6rem;
    line-height: 1.4;
}
.occasion-card.occ-has-image .activity-card-media-occasion {
    aspect-ratio: 16 / 10;
    margin: 0 0 1rem;
    border-radius: 0;
    border: 0;
    box-shadow: none;
}
.occ-empty {
    opacity: 0.5;
    text-align: center;
    padding: 2rem 0;
    grid-column: 1 / -1;
}

/* Action row */
.occ-action-row {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 0.6rem;
    flex-wrap: wrap;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}
.occasion-card:hover .occ-action-row,
.occasion-card:focus-within .occ-action-row,
.occasion-card.touched .occ-action-row,
.occ-hero:hover .occ-action-row,
.occ-hero.touched .occ-action-row {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.occ-btn {
    background: rgba(0,0,0,0.07);
    border: 1px solid rgba(0,0,0,0.14);
    border-radius: 20px;
    color: #1a1a2e;
    font-size: 0.78rem;
    padding: 5px 14px;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
}
.occ-btn:hover { background: rgba(0,0,0,0.14); transform: scale(1.04); }

/* ── Mood themes ── */
/* Birthday — soft pink/peach */
.occ-mood-birthday {
    border-color: rgba(255,150,150,0.55);
    box-shadow: 0 4px 20px rgba(255,120,120,0.12);
}
.occ-mood-birthday .occ-icon-zone::before {
    background: radial-gradient(circle, rgba(255,180,180,0.55) 0%, transparent 72%);
}
.occ-mood-birthday.occ-hero,
.occ-hero.occ-mood-birthday { border-color: rgba(255,150,150,0.55); box-shadow: 0 8px 36px rgba(255,120,120,0.18); }

/* Diwali — gold */
.occ-mood-diwali {
    border-color: rgba(255,200,50,0.55);
    box-shadow: 0 4px 20px rgba(255,180,20,0.14);
}
.occ-mood-diwali .occ-icon-zone::before {
    background: radial-gradient(circle, rgba(255,220,80,0.55) 0%, transparent 72%);
}
.occ-mood-diwali.occ-hero,
.occ-hero.occ-mood-diwali { border-color: rgba(255,200,50,0.6); box-shadow: 0 8px 36px rgba(255,180,20,0.22); }

/* Christmas — green */
.occ-mood-christmas {
    border-color: rgba(80,200,100,0.5);
    box-shadow: 0 4px 20px rgba(60,180,80,0.12);
}
.occ-mood-christmas .occ-icon-zone::before {
    background: radial-gradient(circle, rgba(100,220,120,0.5) 0%, transparent 72%);
}
.occ-mood-christmas.occ-hero,
.occ-hero.occ-mood-christmas { border-color: rgba(80,200,100,0.55); box-shadow: 0 8px 36px rgba(60,180,80,0.20); }

/* New Year — midnight blue */
.occ-mood-newyear {
    border-color: rgba(100,150,255,0.5);
    box-shadow: 0 4px 20px rgba(80,120,255,0.12);
}
.occ-mood-newyear .occ-icon-zone::before {
    background: radial-gradient(circle, rgba(140,170,255,0.5) 0%, transparent 72%);
}
.occ-mood-newyear.occ-hero,
.occ-hero.occ-mood-newyear { border-color: rgba(100,150,255,0.55); box-shadow: 0 8px 36px rgba(80,120,255,0.20); }

/* Anniversary — purple/pink */
.occ-mood-anniversary {
    border-color: rgba(220,100,200,0.5);
    box-shadow: 0 4px 20px rgba(200,80,180,0.12);
}
.occ-mood-anniversary .occ-icon-zone::before {
    background: radial-gradient(circle, rgba(230,130,210,0.5) 0%, transparent 72%);
}

[data-theme="minimal"] .occ-hero,
[data-theme="minimal"] .occasion-card {
    background: linear-gradient(180deg, rgba(220,220,224,0.96), rgba(198,198,202,0.98)) !important;
    border-color: rgba(116,116,120,0.24) !important;
    box-shadow: 0 12px 30px rgba(0,0,0,0.1) !important;
    color: #23232a;
}
[data-theme="minimal"] .occ-hero:hover,
[data-theme="minimal"] .occasion-card:hover {
    background: linear-gradient(180deg, rgba(212,212,216,0.98), rgba(190,190,194,0.98)) !important;
    box-shadow: 0 16px 34px rgba(0,0,0,0.12) !important;
}
[data-theme="minimal"] .occ-hero::before,
[data-theme="minimal"] .occasion-card::before {
    background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.26) 0%, transparent 72%);
    opacity: 0.58;
}
[data-theme="minimal"] .occ-hero-label,
[data-theme="minimal"] .occ-hero-date,
[data-theme="minimal"] .occ-date {
    color: rgba(44,44,48,0.48);
}
[data-theme="minimal"] .occ-hero-title,
[data-theme="minimal"] .occ-title {
    color: #24242d;
}
[data-theme="minimal"] .occ-hero-memory,
[data-theme="minimal"] .occ-memory {
    color: rgba(44,44,48,0.62);
}
[data-theme="minimal"] .occ-icon-zone::before,
[data-theme="minimal"] .occ-hero-icon-zone::before {
    background: radial-gradient(circle, rgba(70,70,74,0.08) 0%, transparent 72%);
}
[data-theme="minimal"] .occ-btn {
    background: rgba(40,40,40,0.05);
    border-color: rgba(40,40,40,0.12);
    color: #2f2f36;
}
[data-theme="minimal"] .occ-btn:hover {
    background: rgba(40,40,40,0.1);
}
[data-theme="minimal"] .occ-cnt-today,
[data-theme="minimal"] .occ-cnt-soon,
[data-theme="minimal"] .occ-cnt-month,
[data-theme="minimal"] .occ-cnt-far {
    color: #55565d;
    border: 1px solid rgba(108,108,112,0.18);
    box-shadow: none;
}
[data-theme="minimal"] .occ-cnt-today {
    background: rgba(228,228,228,0.98);
}
[data-theme="minimal"] .occ-cnt-soon {
    background: rgba(222,222,224,0.92);
}
[data-theme="minimal"] .occ-cnt-month {
    background: rgba(216,216,218,0.9);
}
[data-theme="minimal"] .occ-cnt-far {
    background: rgba(210,210,212,0.86);
}
[data-theme="minimal"] .occasion-card[class*="occ-mood-"],
[data-theme="minimal"] .occ-hero[class*="occ-mood-"] {
    border-color: rgba(116,116,120,0.24) !important;
    box-shadow: 0 12px 30px rgba(0,0,0,0.1) !important;
}
[data-theme="minimal"] .occasion-card[class*="occ-mood-"] .occ-icon-zone::before,
[data-theme="minimal"] .occ-hero[class*="occ-mood-"] .occ-icon-zone::before,
[data-theme="minimal"] .occ-hero[class*="occ-mood-"] .occ-hero-icon-zone::before {
    background: radial-gradient(circle, rgba(92,92,96,0.14) 0%, transparent 72%);
}

/* ── SUGGESTIONS — Activity Board ────────────────────────────────────────── */

/* Category filter row */
.sug-cat-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.2rem;
}
.sug-cat-btn {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 20px;
    color: #fff;
    font-size: 0.78rem;
    padding: 5px 14px;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    font-family: 'Poppins', sans-serif;
}
.sug-cat-btn:hover { background: rgba(255,255,255,0.22); transform: scale(1.05); }
.sug-cat-btn.active { background: rgba(255,255,255,0.28); border-color: rgba(255,255,255,0.55); font-weight: 700; }

/* Category filter/tag row */
.sug-add-cat-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1rem;
}
.sug-add-cat-label { font-size: 0.75rem; color: rgba(255,255,255,0.55); white-space: nowrap; }
.sug-add-tag-search {
    display: inline-flex;
    align-items: center;
    gap: 0;
    min-width: 0;
    height: 24px;
    padding: 0 8px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.08);
    transition: background 0.2s, border-color 0.2s;
}
.sug-add-tag-search.active {
    background: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.35);
}
.sug-add-tag-search-icon {
    display: none;
}
.sug-search-symbol {
    display: none;
}
.sug-search-symbol::before,
.sug-search-symbol::after {
    content: "";
    position: absolute;
}
.sug-search-symbol::before {
    top: 0;
    left: 0;
    width: 9px;
    height: 9px;
    border: 2px solid currentColor;
    border-radius: 50%;
    box-sizing: border-box;
}
.sug-search-symbol::after {
    width: 6px;
    height: 2px;
    background: currentColor;
    border-radius: 999px;
    right: 0;
    bottom: 1px;
    transform-origin: center;
    transform: rotate(45deg);
}
.sug-add-tag-search-input {
    width: 58px;
    min-width: 0;
    height: 20px;
    line-height: 20px;
    padding: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: #fff;
    font-size: 0.60rem;
    font-family: 'Poppins', sans-serif;
}
.sug-add-tag-search-input::placeholder { color: rgba(255,255,255,0.45); }
.sug-add-cat-btn {
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 20px;
    color: rgba(255,255,255,0.75);
    font-size: 0.78rem;
    padding: 5px 13px;
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, transform 0.15s;
    font-family: 'Poppins', sans-serif;
}
.sug-add-cat-btn:hover { background: rgba(255,255,255,0.18); transform: scale(1.05); }
.sug-add-cat-btn.active { background: rgba(255,255,255,0.28); color: #fff; border-color: rgba(255,255,255,0.55); font-weight: 700; }
.sug-chip-symbol {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: currentColor;
    overflow: hidden;
}
.sug-chip-symbol-star {
    width: 11px;
    height: 11px;
    margin-right: 1px;
}
.sug-chip-symbol-star::before,
.sug-chip-symbol-star::after {
    content: "";
    position: absolute;
    inset: 0;
    background: currentColor;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 92%, 50% 71%, 21% 92%, 32% 57%, 2% 35%, 39% 35%);
}
.sug-chip-symbol-star::after {
    transform: rotate(35deg) scale(0.8);
    opacity: 0.92;
}
.sug-chip-symbol-person {
    width: 12px;
    height: 12px;
}
.sug-chip-symbol-person::before,
.sug-chip-symbol-person::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.sug-chip-symbol-person::before {
    top: 0;
    width: 8px;
    height: 8px;
    border: 1.7px solid currentColor;
    border-radius: 50%;
    box-sizing: border-box;
}
.sug-chip-symbol-person::after {
    bottom: 0;
    width: 12px;
    height: 5px;
    border: 1.7px solid currentColor;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    box-sizing: border-box;
}

/* Trending hero */
#sugTrending { margin-bottom: 1.2rem; }
.sug-card-trending {
    background: rgba(255,255,255,0.18) !important;
    border-color: rgba(255,180,50,0.55) !important;
    box-shadow: 0 6px 28px rgba(255,150,30,0.20) !important;
}
.sug-trend-badge {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ffd166;
    margin-bottom: 0;
}
.sug-card-trending .sug-text { font-size: 1.05rem !important; }

/* Card grid */
.suggestions-flow {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1rem;
    margin-bottom: 1.2rem;
}
.sug-card {
    background: rgba(255,255,255,0.11);
    border: 1px solid rgba(255,255,255,0.20);
    border-radius: 16px;
    padding: 0;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
    position: relative;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    animation: popIn 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}
.sug-card > .card-inner {
    padding: 1.1rem 1.2rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.sug-card-head {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    padding-right: 1.7rem;
    min-height: 48px;
}
.sug-card-author {
    flex: 0 0 auto;
}
.sug-card-head .ol-author-orb {
    position: relative;
    top: auto;
    left: auto;
    width: 48px;
    height: 48px;
    display: flex;
}
.sug-card-head-copy {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding-top: 0.1rem;
}
.sug-card:hover {
    transform: translateY(-4px);
    background: rgba(255,255,255,0.18);
    box-shadow: 0 12px 28px rgba(0,0,0,0.30);
}
.sug-card-top {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.4rem;
    min-height: 22px;
}
.sug-cat-chip {
    font-size: 0.68rem;
    font-weight: 600;
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 12px;
    padding: 2px 9px;
    color: rgba(255,255,255,0.85);
}
.sug-text {
    font-size: 0.94rem;
    font-weight: 600;
    line-height: 1.4;
    flex: 1;
    margin: 0.05rem 0 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.sug-card-meta {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.1rem;
}
.sug-card-footer {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.8rem;
    margin-top: 0.25rem;
    padding-top: 0.05rem;
}
.sug-byline {
    font-size: 0.72rem;
    opacity: 0.5;
    font-style: italic;
    text-align: right;
}
.sug-vote-row {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}
.sug-vote-row.is-loading {
    opacity: 0.6;
    pointer-events: none;
}
.sug-action-row {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}
.sug-vote-btn {
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.28);
    color: #fff;
    border-radius: 20px;
    padding: 5px 11px;
    cursor: pointer;
    font-size: 0.72rem;
    transition: background 0.2s, transform 0.15s;
    display: flex;
    align-items: center;
    gap: 0.38rem;
    font-family: 'Poppins', sans-serif;
    text-transform: lowercase;
    white-space: nowrap;
}
.sug-vote-word {
    font-weight: 700;
    letter-spacing: 0.01em;
}
.sug-vote-count {
    min-width: 0.85rem;
    text-align: center;
    font-weight: 600;
    opacity: 0.92;
}
.sug-vote-btn:hover { background: rgba(255,255,255,0.28); transform: scale(1.05); }
.sug-vote-btn-yes.active {
    background: rgba(122, 255, 171, 0.18);
    border-color: rgba(122, 255, 171, 0.5);
}
.sug-vote-btn-no.active {
    background: rgba(255, 154, 122, 0.18);
    border-color: rgba(255, 154, 122, 0.5);
}
.sug-hook-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 5px 11px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.24);
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.92);
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 700;
    transition: background 0.18s ease, transform 0.15s ease, border-color 0.18s ease;
    white-space: nowrap;
}
.sug-hook-icons {
    display: inline-flex;
    align-items: center;
    gap: 0.16rem;
    line-height: 1;
}
.sug-hook-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.88rem;
    height: 0.88rem;
    filter: saturate(0.95);
}
.sug-hook-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}
.sug-hook-btn:hover {
    background: rgba(246, 211, 101, 0.18);
    border-color: rgba(246, 211, 101, 0.4);
    transform: translateY(-1px);
}
.sug-hook-count {
    min-width: 0.85rem;
    text-align: center;
    color: rgba(255,255,255,0.78);
}
.sug-hook-btn.is-loading {
    opacity: 0.65;
    pointer-events: none;
}
.sug-empty {
    grid-column: 1 / -1;
    text-align: center;
    opacity: 0.45;
    padding: 2rem 0;
}

/* Vote pop animation */
@keyframes sugVotePop {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.45); filter: brightness(1.6); }
    60%  { transform: scale(0.92); }
    100% { transform: scale(1); filter: brightness(1); }
}
.sug-vote-btn.sug-vote-pop { animation: sugVotePop 0.55s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

/* ── Hover-reveal Share button (oneliners + suggestions) ── */
.card-hover-share {
    display: block;
    width: 100%;
    background: rgba(102,126,234,0.10);
    border: 1px solid rgba(102,126,234,0.25);
    border-radius: 10px;
    color: rgba(160,180,255,0.85);
    font-size: 0.74rem;
    font-family: 'Poppins', sans-serif;
    padding: 0;
    cursor: pointer;
    text-align: center;
    margin-top: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.2s ease, opacity 0.2s ease, margin-top 0.2s ease, padding 0.2s ease, background 0.2s;
    pointer-events: none;
}
.card-hover-share {
    align-items: center;
    justify-content: center;
    gap: 0.38rem;
}
.card-share-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.88rem;
    height: 0.88rem;
    vertical-align: middle;
}
.card-share-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}
.card-hover-share:hover { background: rgba(102,126,234,0.22); color: #a0b4ff; }
.oneliner-card:hover .card-hover-share,
.oneliner-card:focus-within .card-hover-share,
.oneliner-card.touched .card-hover-share,
.sug-card:hover .card-hover-share,
.sug-card:focus-within .card-hover-share,
.sug-card.touched .card-hover-share {
    display: inline-flex;
    max-height: 36px;
    opacity: 1;
    padding: 5px 0;
    margin-top: 0.4rem;
    pointer-events: auto;
}

/* Random pick highlight */
@keyframes sugRandomPick {
    0%   { box-shadow: 0 0 0 0 rgba(246,211,101,0); border-color: rgba(255,255,255,0.20); }
    20%  { box-shadow: 0 0 0 6px rgba(246,211,101,0.4); border-color: #f6d365; }
    60%  { box-shadow: 0 0 0 10px rgba(246,211,101,0.15); border-color: #f6d365; }
    100% { box-shadow: 0 0 0 0 rgba(246,211,101,0); border-color: rgba(255,255,255,0.20); }
}
.sug-card.sug-random-pick {
    animation: sugRandomPick 2.2s ease forwards;
    background: rgba(246,211,101,0.12) !important;
}

/* ---- ROUTINE TIMELINE ---- */
.new-timeline {
    position: relative;
    max-width: 680px;
    margin: 0 auto;
}
.new-timeline::before {
    content: '';
    position: absolute;
    left: 90px; top: 0; bottom: 0;
    width: 2px;
    background: rgba(255,255,255,0.25);
}
.tl-item {
    display: flex;
    align-items: center;
    margin-bottom: 1.2rem;
    position: relative;
}
.tl-time {
    min-width: 80px;
    font-size: 0.75rem; font-weight: 700;
    color: rgba(255,255,255,0.65);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: right;
}
.tl-dot {
    width: 12px; height: 12px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid rgba(255,255,255,0.4);
    box-shadow: 0 0 12px rgba(255,255,255,0.5);
    flex-shrink: 0;
    margin: 0 16px;
    z-index: 1;
}
.tl-content {
    flex: 1;
    background: rgba(255,255,255,0.18);
    /* backdrop-filter removed to prevent blur bleed-through during entrance animations */
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 14px;
    padding: 0.85rem 1.2rem;
    transition: all 0.3s ease;
}
.tl-item.tl-has-image .tl-content {
    padding: 0 0 0.95rem;
    overflow: hidden;
}
.tl-content:hover { background: rgba(255,255,255,0.2); transform: translateX(6px); }
.tl-content h4 { color: #fff; font-size: 0.95rem; font-weight: 600; margin-bottom: 0.15rem; }
.tl-content p  { color: rgba(255,255,255,0.6); font-size: 0.82rem; }
.tl-copy { padding: 0; }
.tl-item.tl-has-image .tl-copy { padding: 0 1.2rem; }
.tl-content,
.wo-card,
.fo-card {
    perspective: 1200px;
}
.tile-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}
.tl-content .tile-flip-inner {
    min-height: 64px;
}
.tile-face {
    width: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.tile-face-front {
    position: relative;
    z-index: 1;
}
.tile-face-back {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    transform: rotateY(180deg);
}
.tl-item.tl-has-image .tile-face-back {
    padding: 0.85rem 1.2rem;
}
.tl-item.show-notes .tile-flip-inner,
.wo-card.show-notes .tile-flip-inner,
.fo-card.show-notes .tile-flip-inner {
    transform: rotateY(180deg);
}
.tile-notes-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.52);
    margin-bottom: 0.5rem;
}
.tile-notes-copy {
    margin: 0;
    color: rgba(255,255,255,0.86);
    font-size: 0.84rem;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* ---- WORKOUT GRID ---- */
.new-workout-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}
.wo-card {
    background: rgba(255,255,255,0.2);
    /* backdrop-filter removed to prevent blur bleed-through during entrance animations */
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 16px;
    padding: 1rem 1.1rem;
    text-align: center;
    color: #fff;
    transition: all 0.3s ease;
}
.wo-card.wo-has-image {
    padding: 0 0 1rem;
    overflow: hidden;
}
.wo-card:hover { transform: translateY(-6px); background: rgba(255,255,255,0.22); box-shadow: 0 16px 32px rgba(0,0,0,0.2); }
.wo-card .tile-flip-inner {
    min-height: 100%;
}
.wo-card .tile-face-back {
    justify-content: center;
}
.wo-card.wo-has-image .tile-face-back {
    padding: 1rem 1.1rem;
}
.wo-cover {
    position: relative;
}
.wo-copy {
    padding: 0;
}
.wo-card.wo-has-image .wo-copy {
    padding: 0 1.1rem;
}
.wo-day {
    display: inline-block;
    background: rgba(255,255,255,0.18);
    padding: 0.2rem 0.75rem;
    border-radius: 30px;
    font-size: 0.7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px;
    margin-bottom: 0.55rem;
}
.wo-card.wo-has-image .wo-day {
    position: absolute;
    top: 0.85rem;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 0;
    z-index: 1;
    background: rgba(255,255,255,0.28);
    backdrop-filter: blur(6px);
}
.wo-emoji { font-size: 1.9rem; margin-bottom: 0.4rem; }
.wo-card h3 { font-size: 0.95rem; font-weight: 700; margin-bottom: 0.6rem; }
.wo-card ul { list-style: none; padding: 0; text-align: left; margin-bottom: 0.7rem; }
.wo-card ul li {
    padding: 0.18rem 0 0.18rem 1rem;
    font-size: 0.8rem; color: rgba(255,255,255,0.8); position: relative;
}
.wo-card ul li::before { content: '›'; position: absolute; left: 0; opacity: 0.55; }
.wo-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.1rem;
}
.wo-badge {
    display: inline-block;
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.28);
    padding: 0.18rem 0.65rem;
    border-radius: 30px;
    font-size: 0.74rem; font-weight: 600;
}
.wo-card.wo-has-image .activity-card-media-workout {
    aspect-ratio: 16 / 10;
    margin: 0 0 0.9rem;
    border-radius: 0;
    border: 0;
    box-shadow: none;
}

/* ---- FOOD GRID ---- */
.new-food-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1.3rem;
}
.fo-card {
    background: rgba(255,255,255,0.18);
    /* backdrop-filter removed to prevent blur bleed-through during entrance animations */
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 20px;
    padding: 1.8rem 1.3rem;
    text-align: center;
    color: #fff;
    transition: all 0.3s ease;
}
.fo-card.fo-has-image {
    padding: 0 0 1.05rem;
    overflow: hidden;
}
.fo-card:hover { transform: translateY(-8px) scale(1.03); background: rgba(255,255,255,0.2); box-shadow: 0 20px 40px rgba(0,0,0,0.2); }
.fo-card .tile-flip-inner {
    min-height: 100%;
}
.fo-card .tile-face-back {
    justify-content: center;
}
.fo-card.fo-has-image .tile-face-back {
    padding: 1rem 1.3rem;
}
.fo-emoji { font-size: 3rem; margin-bottom: 0.75rem; display: block; }
.fo-copy { padding: 0; }
.fo-card.fo-has-image .fo-copy { padding: 0 1.3rem; }
.fo-card h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.4rem; }
.fo-card p  { font-size: 0.83rem; color: rgba(255,255,255,0.68); margin-bottom: 0.8rem; }
.fo-tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.1rem;
}
.fo-tag {
    display: inline-block;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.28);
    padding: 0.18rem 0.75rem;
    border-radius: 30px;
    font-size: 0.72rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.fo-card.fo-has-image .activity-card-media-food {
    aspect-ratio: 16 / 10;
    margin: 0 0 0.95rem;
    border-radius: 0;
    border: 0;
    box-shadow: none;
}

/* ---- PLANS ---- */
.new-plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.3rem;
}
.plans-view-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    gap: 10px;
    margin: 0;
}
.plans-view-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.plans-view-btn {
    width: 42px;
    height: 42px;
    border: 2px solid rgba(255,255,255,0.14);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.72);
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.plans-view-btn svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.plans-view-btn.active {
    background: rgba(255,255,255,0.14);
    color: #fff;
    border-color: rgba(255,255,255,0.4);
    box-shadow: 0 10px 24px rgba(0,0,0,0.16);
}
.plans-view-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(255,255,255,0.28);
}
.new-plan-grid.plans-list-mode {
    grid-template-columns: 1fr;
    gap: 0.9rem;
}
.plan-card {
    position: relative;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 22px;
    padding: 1.5rem 1.3rem;
    color: #fff;
    box-shadow: 0 16px 32px rgba(0,0,0,0.14);
}
.plan-card h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 0.45rem;
}
.plan-card-copy,
.plan-notes-block p {
    font-size: 0.84rem;
    line-height: 1.55;
    color: rgba(255,255,255,0.78);
}
.saved-activity-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.1rem;
}
.saved-activity-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    border-radius: 20px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    color: rgba(255,255,255,0.95);
    overflow: hidden;
    transition: border-color 0.2s;
}
.saved-activity-card.sac-open {
    border-color: rgba(255,255,255,0.22);
    background: rgba(255,255,255,0.11);
}

/* Collapsed header row */
.sac-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.sac-header-left { flex: 1; min-width: 0; }
.sac-chevron {
    font-size: 1.2rem;
    color: rgba(255,255,255,0.35);
    transition: transform 0.22s ease;
    flex-shrink: 0;
}
.sac-open .sac-chevron { transform: rotate(90deg); }

/* Expanded body */
.sac-body {
    padding: 0 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border-top: 1px solid rgba(255,255,255,0.07);
    font-size: 0.78rem;
}
.sac-body .saved-activity-copy {
    font-size: 0.78rem;
    margin: 0;
    color: rgba(255,255,255,0.75);
}
.sac-body .saved-activity-detail {
    font-size: 0.76rem;
    color: rgba(255,255,255,0.7);
}
.sac-body .saved-activity-notes {
    padding: 8px 10px;
    border-radius: 10px;
}
.sac-body .saved-activity-notes-label {
    font-size: 0.6rem;
    letter-spacing: 0.06em;
}
.sac-body .saved-activity-notes p {
    font-size: 0.76rem;
    margin: 4px 0 0;
}
.sac-body .saved-activity-exercise {
    font-size: 0.74rem;
    padding: 4px 8px;
}
.sac-body .saved-activity-move-btn {
    font-size: 0.78rem;
    padding: 9px 14px;
    border-radius: 14px;
}
.sac-body .saved-activity-remove-btn {
    font-size: 0.76rem;
    padding: 8px 14px;
    border-radius: 14px;
}

/* Inline actions for cards with no body */
.sac-body-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 14px 12px;
}

/* Compact fonts inside header */
.sac-header .saved-activity-title {
    margin: 3px 0 0;
    font-size: 0.8rem;
    font-weight: 600;
}
.sac-header .saved-activity-topline {
    font-size: 0.6rem;
    gap: 0.3rem;
}
.sac-header .saved-activity-type,
.sac-header .saved-activity-source,
.sac-header .saved-activity-chip {
    font-size: 0.6rem;
    padding: 1px 6px;
}
.sac-header .saved-activity-time {
    font-size: 0.6rem;
    opacity: 0.6;
    margin-left: 0;
}
.saved-activity-topline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.76rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.saved-activity-type,
.saved-activity-source,
.saved-activity-chip {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.35rem 0.7rem;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.88);
    font-weight: 700;
}
.saved-activity-source {
    background: rgba(246,211,101,0.14);
    border-color: rgba(246,211,101,0.28);
    color: #f6d365;
}
.saved-activity-time {
    margin-left: auto;
    color: rgba(255,255,255,0.56);
    font-size: 0.8rem;
    text-transform: none;
    letter-spacing: 0;
}
.saved-activity-media-wrap {
    border-radius: 22px;
    overflow: hidden;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
}
.saved-activity-media {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}
.saved-activity-title {
    margin: 0;
    font-size: clamp(1.12rem, 3.9vw, 1.34rem);
    line-height: 1.18;
    color: #fff;
}
.saved-activity-copy,
.saved-activity-detail,
.saved-activity-exercise,
.saved-activity-notes p {
    color: rgba(255,255,255,0.76);
    font-size: 1rem;
    line-height: 1.6;
}
.saved-activity-copy {
    margin: 0;
}
.saved-activity-chip-row,
.saved-activity-exercises {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}
.saved-activity-exercise {
    width: 100%;
    padding-left: 1rem;
    position: relative;
}
.saved-activity-exercise::before {
    content: '›';
    position: absolute;
    left: 0;
    color: rgba(255,255,255,0.4);
}
.saved-activity-notes {
    padding: 0.95rem 1rem;
    border-radius: 20px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
}
.saved-activity-notes-label {
    margin-bottom: 0.45rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
}
.saved-activity-notes p {
    margin: 0;
}
.saved-activity-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-top: auto;
}
.saved-activity-move-btn,
.saved-activity-remove-btn {
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 999px;
    padding: 0.72rem 1rem;
    background: rgba(255,255,255,0.08);
    color: #fff;
    font: 700 0.9rem 'Poppins', sans-serif;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.saved-activity-move-btn {
    background: rgba(246,211,101,0.14);
    border-color: rgba(246,211,101,0.32);
    color: #f6d365;
}
.saved-activity-remove-btn {
    color: rgba(255,255,255,0.72);
}
.saved-activity-move-btn:hover,
.saved-activity-remove-btn:hover {
    transform: translateY(-1px);
}
.saved-activity-empty {
    grid-column: 1 / -1;
    padding: 2rem 1.5rem;
    border-radius: 28px;
    text-align: center;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.14);
    color: rgba(255,255,255,0.92);
}
.saved-activity-empty-icon {
    font-size: 2rem;
    margin-bottom: 0.6rem;
}
.saved-activity-empty h3 {
    margin: 0 0 0.55rem;
    color: rgba(255,255,255,0.96);
}
.saved-activity-empty p {
    margin: 0;
    color: rgba(255,255,255,0.7);
}
@media (max-width: 640px) {
    .saved-activity-list {
        grid-template-columns: 1fr;
    }
    .saved-activity-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .saved-activity-time {
        width: 100%;
        margin-left: 0;
    }
}
.plan-card-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 16px;
    display: grid;
    place-items: center;
    font-size: 1.55rem;
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.18);
    margin-bottom: 0.95rem;
}
.plan-card-type {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0.9rem;
    padding: 0.3rem 0.72rem;
    border-radius: 999px;
    background: rgba(17,24,39,0.22);
    border: 1px solid rgba(255,255,255,0.18);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.plan-list-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 1rem 3.25rem 1rem 1rem;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.12);
    color: #fff;
    box-shadow: 0 12px 24px rgba(0,0,0,0.12);
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.plan-list-item:hover {
    transform: translateY(-1px);
    border-color: rgba(255,255,255,0.22);
}
.plan-list-item.expanded {
    background: rgba(255,255,255,0.16);
    border-color: rgba(246,211,101,0.22);
    box-shadow: 0 16px 30px rgba(0,0,0,0.16);
}
.plan-list-main {
    display: grid;
    gap: 0.45rem;
    width: 100%;
}
.plan-list-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.plan-list-title-row-end {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}
.plan-list-title-row h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}
.plan-list-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    border-radius: 12px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.14);
    font-size: 1rem;
}
.plan-list-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.86);
    font-size: 1rem;
    line-height: 1;
}
.plan-list-copy {
    margin: 0;
    color: rgba(255,255,255,0.76);
    font-size: 0.83rem;
    line-height: 1.45;
}
.plan-list-detail {
    margin-top: 0.55rem;
    padding-top: 0.8rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    display: grid;
    gap: 0.7rem;
}
.plan-list-detail-media {
    margin-bottom: 0.2rem;
}
.plan-list-detail-copy {
    margin: 0;
    color: rgba(255,255,255,0.8);
    font-size: 0.84rem;
    line-height: 1.5;
}
.plan-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.9rem;
}
.plan-chip-row-inline {
    margin-top: 0.15rem;
}
.plan-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.72rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.18);
    font-size: 0.73rem;
    color: rgba(255,255,255,0.9);
}
.plan-field-list {
    margin: 1rem 0 0;
    display: grid;
    gap: 0.65rem;
}
.plan-field-list-compact {
    margin-top: 0.7rem;
    gap: 0.5rem;
}
.plan-field-row {
    padding: 0.7rem 0.85rem;
    border-radius: 16px;
    background: rgba(17,24,39,0.18);
    border: 1px solid rgba(255,255,255,0.12);
}
.plan-field-row dt {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.6);
    margin-bottom: 0.25rem;
}
.plan-field-row dd {
    margin: 0;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.94);
}
.plan-notes-block {
    margin-top: 1rem;
    padding: 0.85rem 0.95rem;
    border-radius: 18px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.14);
}
.plan-notes-block-compact {
    margin-top: 0.75rem;
    padding: 0.7rem 0.8rem;
    border-radius: 16px;
}
.plan-notes-label {
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.4rem;
    color: rgba(255,255,255,0.68);
}
.plan-profile-list {
    display: grid;
    gap: 0.6rem;
    margin-top: 1rem;
}
.plan-profile-list-item {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.75rem 0.85rem;
    border-radius: 16px;
    background: rgba(17,24,39,0.16);
    border: 1px solid rgba(255,255,255,0.12);
}
.plan-profile-item-media {
    margin-bottom: 0.3rem;
}
.plan-profile-list-item strong {
    font-size: 0.88rem;
    color: rgba(255,255,255,0.94);
}
.plan-profile-list-item span {
    font-size: 0.74rem;
    color: rgba(255,255,255,0.62);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.plan-profile-list-copy {
    margin: 0;
    color: rgba(255,255,255,0.76);
    font-size: 0.8rem;
    line-height: 1.45;
}

@media (max-width: 640px) {
    .plans-view-bar {
        justify-content: center;
    }
}

/* ---- GALAXY ---- */
.galaxy-title {
    background: linear-gradient(90deg, #f093fb, #f5576c, #4ecdc4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.sec-galaxy .sec-header p { color: rgba(255,255,255,0.45); }
.sec-galaxy .category { margin-bottom: 3rem; }
.sec-galaxy .category-title { color: #fff !important; font-size: 1.4rem; font-weight: 700; }
.sec-galaxy .category-text  { color: rgba(255,255,255,0.55) !important; margin-bottom: 1.5rem; }

/* ---- SECTION ENTRANCE ANIMATIONS ---- */
/* opacity + transform only — no visibility:hidden (avoids bleed-through artifacts) */
.full-section .sec-header,
.full-section .friends-grid,
.full-section .oneliners-flow,
.full-section .occasions-grid,
.full-section .suggestions-flow,
.full-section .new-timeline,
.full-section .new-workout-grid,
.full-section .new-food-grid,
.full-section .new-plan-grid,
.full-section #gallery-container,
.full-section .add-row {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.full-section.in-view .sec-header         { opacity: 1; transform: none; transition-delay: 0.05s; }
.full-section.in-view .friends-grid,
.full-section.in-view .oneliners-flow,
.full-section.in-view .occasions-grid,
.full-section.in-view .suggestions-flow,
.full-section.in-view .new-timeline,
.full-section.in-view .new-workout-grid,
.full-section.in-view .new-food-grid,
.full-section.in-view .new-plan-grid,
.full-section.in-view #gallery-container  { opacity: 1; transform: none; transition-delay: 0.2s; }
.full-section.in-view .add-row            { opacity: 1; transform: none; transition-delay: 0.35s; }

/* ============================================================
   AUTH BAR + MODAL
   ============================================================ */

.auth-bar {
    position: fixed;
    top: 12px;
    right: 60px;
    display: none; /* replaced by profile orb + menu button on all sizes */
    align-items: center;
    gap: 8px;
    z-index: 9998;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 30px;
    padding: 6px 14px;
}
.auth-username { color: #f6d365; font-weight: 600; font-size: 0.85rem; letter-spacing: 0.03em; }

.auth-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
    border-radius: 20px;
    padding: 4px 14px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    white-space: nowrap;
}
.auth-btn:hover { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.6); }
.auth-btn-primary {
    background: linear-gradient(135deg, #f6d365, #fda085);
    border-color: transparent;
    color: #1a1a2e;
    font-weight: 700;
}
.auth-btn-primary:hover { opacity: 0.88; }
.auth-btn-full { width: 100%; margin-top: 4px; padding: 10px; font-size: 0.95rem; box-sizing: border-box; }

.auth-modal-overlay {
    position: fixed;
    inset: 0;
    padding: 20px 14px;
    background: rgba(0,0,0,0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 10002;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    box-sizing: border-box;
}
.auth-modal-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    cursor: default;
}
.auth-modal-box {
    background: linear-gradient(160deg, #1a1a2e 0%, #16213e 100%);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 18px;
    padding: 2rem 2.2rem 2.2rem;
    width: min(380px, 92vw);
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    box-shadow: 0 24px 60px rgba(0,0,0,0.55);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 1;
}
.auth-modal-box h3 { color: #f6d365; font-size: 1.4rem; margin: 0 0 4px; text-align: center; }
.auth-modal-close {
    position: absolute;
    top: 12px; right: 16px;
    background: none; border: none;
    color: rgba(255,255,255,0.5);
    font-size: 1.4rem; cursor: pointer;
    line-height: 1; transition: color 0.2s;
}
.auth-modal-close:hover { color: #fff; }

.auth-input {
    width: 100%;
    padding: 10px 14px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 10px;
    color: #fff;
    font-size: 0.95rem;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
}
.auth-input:focus { border-color: #f6d365; }
.auth-input::placeholder { color: rgba(255,255,255,0.35); }

.auth-error { color: #ff6b6b; font-size: 0.82rem; min-height: 18px; text-align: center; }

.auth-toggle { text-align: center; color: rgba(255,255,255,0.5); font-size: 0.82rem; margin: 0; }
.auth-link {
    background: none; border: none;
    color: #f6d365; cursor: pointer;
    font-size: inherit; font-family: inherit;
    text-decoration: underline; padding: 0;
}
.auth-link:hover { color: #fda085; }

.guest-auth-choice-overlay {
    z-index: 10002;
    background: rgba(0,0,0,0.56);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.guest-auth-choice-box {
    width: min(392px, 84vw);
    align-items: center;
    text-align: center;
    gap: 14px;
    padding: 1.55rem 1.05rem 0.95rem;
    background: linear-gradient(180deg, rgba(88, 108, 138, 0.40), rgba(37, 47, 62, 0.34));
    border: 1px solid rgba(92, 124, 170, 0.42);
    border-radius: 34px;
    box-shadow:
        0 30px 70px rgba(0,0,0,0.34),
        inset 0 1px 0 rgba(255,255,255,0.08);
    overflow: hidden;
    backdrop-filter: blur(20px) saturate(108%);
    -webkit-backdrop-filter: blur(20px) saturate(108%);
}
.guest-auth-choice-box::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02) 30%, rgba(255,255,255,0) 65%),
        radial-gradient(circle at 50% 0%, rgba(255,255,255,0.08), transparent 26%);
}
.guest-auth-choice-box::after {
    display: none;
}
.guest-auth-choice-box .auth-modal-close {
    top: 10px;
    right: 12px;
    color: rgba(255,255,255,0.58);
    font-size: 1.35rem;
    z-index: 2;
}
.guest-auth-choice-box h3 {
    margin: 0;
    color: rgba(255,255,255,0.78);
    font-size: 1.15rem;
    font-weight: 400;
    letter-spacing: -0.04em;
    position: relative;
    z-index: 1;
}
.guest-auth-choice-text {
    margin: -4px 0 0;
    max-width: 250px;
    color: rgba(255,255,255,0.54);
    font-size: 0.74rem;
    line-height: 1.32;
    position: relative;
    z-index: 1;
}
.guest-auth-choice-star {
    font-size: 2.7rem;
    line-height: 1;
    color: #f6d365;
    text-shadow:
        0 0 30px rgba(246,211,101,0.2),
        0 10px 20px rgba(246,211,101,0.12);
    position: relative;
    z-index: 1;
    margin-bottom: 2px;
}
.guest-auth-choice-copy {
    display: none;
}
.guest-auth-choice-actions {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 14px;
    padding-top: 4px;
    position: relative;
    z-index: 1;
}
.guest-auth-choice-btn {
    min-width: 102px;
    padding: 0;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.88);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    position: relative;
    transition: transform 0.18s ease, filter 0.18s ease;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.guest-auth-choice-btn::before {
    content: "";
    width: 82px;
    height: 82px;
    border-radius: 50%;
    border: 2px solid rgba(97, 122, 236, 0.82);
    background: linear-gradient(180deg, rgba(55, 66, 112, 0.40), rgba(42, 51, 92, 0.26));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 10px 20px rgba(0,0,0,0.14);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
}
.guest-auth-choice-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
}
.guest-auth-choice-btn-primary {
    color: rgba(255,255,255,0.88);
}
.guest-auth-choice-btn-primary::before {
    border-color: rgba(246,211,101,0.68);
    background: linear-gradient(180deg, rgba(88, 80, 54, 0.40), rgba(73, 63, 42, 0.26));
}
.guest-auth-choice-icon {
    font-size: 1.7rem;
    line-height: 1;
    margin-top: 15px;
    position: relative;
    z-index: 1;
}
.guest-auth-choice-label {
    font-size: 0.76rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    position: relative;
    z-index: 1;
}

.login-prompt { text-align: center; padding: 1.2rem; color: rgba(255,255,255,0.55); font-size: 0.9rem; }
.prompt-login-btn {
    background: none; border: none;
    color: #f6d365; cursor: pointer;
    font-size: inherit; font-family: inherit;
    text-decoration: underline; padding: 0;
}
.prompt-login-btn:hover { color: #fda085; }

/* ── Profile Modal ──────────────────────────────────────────── */
.profile-modal-box {
    max-width: 440px;
    max-height: min(88vh, 860px);
    padding-bottom: 18px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.profile-modal-box::-webkit-scrollbar,
.auth-modal-box::-webkit-scrollbar {
    width: 4px;
}
.profile-modal-box::-webkit-scrollbar-track,
.auth-modal-box::-webkit-scrollbar-track {
    background: transparent;
}
.profile-modal-box::-webkit-scrollbar-thumb,
.auth-modal-box::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.15);
    border-radius: 999px;
}
.profile-modal-box::-webkit-scrollbar-thumb:hover,
.auth-modal-box::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.28);
}
.profile-modal-box > .auth-btn-full {
    position: sticky;
    bottom: 0;
    margin-top: 8px;
    z-index: 1;
    box-shadow: 0 -12px 28px rgba(22, 33, 62, 0.72);
}

@media (max-width: 640px) {
    #profileModal.auth-modal-overlay,
    #upgradeModal.auth-modal-overlay {
        align-items: flex-end;
        padding: 0;
        background: rgba(0,0,0,0.55);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
    #profileModal .auth-modal-box,
    #upgradeModal .auth-modal-box {
        width: 100%;
        max-width: 100%;
        max-height: 92svh;
        max-height: 92vh;
        border-radius: 24px 24px 0 0;
        border-bottom: none;
        padding: 10px 1.1rem 2rem;
        background: var(--sheet-bg);
        border-color: var(--sheet-border);
        animation: apSlideUp 0.38s cubic-bezier(0.22,1,0.36,1);
    }
    #profileModal .profile-drag-handle,
    #upgradeModal .profile-drag-handle {
        display: flex;
        justify-content: center;
        padding-bottom: 12px;
    }
    .auth-modal-overlay {
        align-items: center;
        padding: 14px 10px;
    }
    .auth-modal-box {
        width: min(100%, 96vw);
        max-height: calc(100vh - 28px);
        padding: 1.15rem 1rem 1rem;
        gap: 10px;
    }
    .guest-auth-choice-box {
        width: min(82vw, 308px);
        padding: 1.55rem 0.8rem 0.9rem;
        gap: 13px;
    }
    .guest-auth-choice-box h3 {
        font-size: 1.08rem;
    }
    .guest-auth-choice-text {
        max-width: 220px;
        font-size: 0.72rem;
        line-height: 1.28;
    }
    .guest-auth-choice-star {
        font-size: 2.55rem;
    }
    .guest-auth-choice-actions {
        gap: 10px;
        padding-top: 2px;
    }
    .guest-auth-choice-btn {
        flex: 1;
        min-width: 0;
        gap: 6px;
    }
    .guest-auth-choice-btn::before {
        width: 74px;
        height: 74px;
    }
    .guest-auth-choice-icon {
        font-size: 1.52rem;
        margin-top: 14px;
    }
    .guest-auth-choice-label {
        font-size: 0.72rem;
    }
    .profile-modal-box {
        width: min(92vw, 420px);
        max-width: 420px;
        max-height: 65vh;
        padding-bottom: 14px;
    }
    .public-profile-modal-box {
        width: min(92vw, 430px);
        max-height: 82vh;
        max-height: 82svh;
        padding: 1rem 0.95rem 1rem;
    }
}
.public-profile-modal-box {
    width: min(680px, 92vw);
    max-height: min(88vh, 820px);
    margin: auto;
    padding: 1.1rem 1.35rem 1.35rem;
    gap: 12px;
    background: var(--sheet-bg, rgba(18,18,30,0.97));
    border: 1px solid var(--sheet-border, rgba(255,255,255,0.1));
    border-radius: 24px;
    box-shadow: 0 32px 96px rgba(0,0,0,0.7);
}
.public-profile-modal-box .auth-modal-close {
    top: 18px;
    right: 20px;
    z-index: 5;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(128,128,128,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
}
.public-profile-modal-box.public-profile-modal-context {
    padding-top: 1.4rem;
}
.public-profile-search-wrap {
    position: sticky;
    top: 0;
    z-index: 3;
    display: grid;
    gap: 10px;
    padding: 0 4.1rem 0.9rem 0;
    margin: -0.1rem 0 0.15rem;
    background: var(--sheet-bg, rgba(18,18,30,0.97));
    border-bottom: 1px solid var(--sheet-border, rgba(255,255,255,0.08));
}
.public-profile-search-input {
    padding-right: 42px;
    min-height: 50px;
    border-radius: 14px;
    background: rgba(128,128,128,0.08);
    border-color: var(--sheet-border, rgba(255,255,255,0.12));
}
.public-profile-search-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 4;
    display: grid;
    gap: 8px;
    max-height: 220px;
    overflow-y: auto;
    padding: 4px;
    border-radius: 16px;
    background: var(--sheet-bg, rgba(18,18,30,0.98));
    border: 1px solid var(--sheet-border, rgba(255,255,255,0.12));
    box-shadow: 0 18px 38px rgba(0,0,0,0.36);
}
.public-profile-search-item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    width: 100%;
    padding: 10px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    background: rgba(128,128,128,0.08);
    color: var(--sheet-text, #fff);
    text-align: left;
    cursor: pointer;
    transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}
.public-profile-search-item:hover {
    background: rgba(246, 211, 101, 0.12);
    border-color: rgba(246, 211, 101, 0.22);
    transform: translateY(-1px);
}
.public-profile-search-avatar,
.public-profile-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f6d365, #fda085);
    color: #1a1a2e;
    font: 700 1rem/1 'Poppins', sans-serif;
}
.public-profile-avatar {
    width: 72px;
    height: 72px;
    font-size: 1.45rem;
    box-shadow: 0 14px 30px rgba(0,0,0,0.24);
}
.public-profile-search-avatar img,
.public-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.public-profile-search-copy strong {
    display: block;
    font-size: 0.95rem;
}
.public-profile-search-copy span {
    color: rgba(255,255,255,0.62);
    font-size: 0.78rem;
}
.public-profile-status {
    min-height: 0.6rem;
    text-align: left;
    padding-left: 2px;
    color: var(--sheet-subtext, rgba(255,255,255,0.55));
    font-size: 0.8rem;
}
.public-profile-shell {
    display: grid;
    gap: 16px;
}
.public-profile-shell-context {
    padding-top: 2px;
}
.public-profile-eyebrow {
    color: rgba(246, 211, 101, 0.84);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.public-profile-head {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    padding: 2px 0 0;
}
.public-profile-head-copy h3 {
    margin: 0;
    color: var(--sheet-text, #fff);
    font-size: 1.7rem;
    text-align: left;
    letter-spacing: 0.01em;
}
.public-profile-username {
    color: #f6d365;
    font-size: 1rem;
    font-weight: 700;
}
.public-profile-bio {
    margin-top: 6px;
    color: rgba(255,255,255,0.72);
    font-size: 0.92rem;
    line-height: 1.45;
}
.public-profile-kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.public-profile-kpi {
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(128,128,128,0.08);
    border: 1px solid rgba(255,255,255,0.08);
}
.public-profile-kpi strong {
    display: block;
    color: var(--sheet-text, #fff);
    font-size: 1.65rem;
}
.public-profile-kpi span {
    color: var(--sheet-subtext, rgba(255,255,255,0.5));
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.public-profile-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.public-profile-tab {
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 999px;
    background: rgba(128,128,128,0.08);
    color: rgba(255,255,255,0.7);
    padding: 10px 18px;
    font: 700 0.82rem/1 'Poppins', sans-serif;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease, color 0.16s ease;
}
.public-profile-tab:hover {
    background: rgba(246, 211, 101, 0.1);
    border-color: rgba(246, 211, 101, 0.2);
    color: rgba(255,255,255,0.92);
    transform: translateY(-1px);
}
.public-profile-tab.active {
    background: rgba(246, 211, 101, 0.16);
    color: #f7d56f;
    border-color: rgba(246, 211, 101, 0.32);
    box-shadow: inset 0 0 0 1px rgba(246, 211, 101, 0.12);
}
.public-profile-feed,
.public-profile-activity {
    display: grid;
    gap: 14px;
}
.public-profile-empty {
    padding: 20px 16px;
    border-radius: 18px;
    background: rgba(128,128,128,0.08);
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.68);
    text-align: center;
}
.public-profile-vibe-card,
.public-profile-activity-card {
    padding: 16px 17px;
    border-radius: 22px;
    background: rgba(128,128,128,0.08);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}
.public-profile-vibe-card p,
.public-profile-activity-card p {
    margin: 0;
}
.public-profile-vibe-card .public-profile-vibe-text {
    color: var(--sheet-text, #fff);
    font-size: 1rem;
    line-height: 1.55;
    font-style: italic;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.public-profile-vibe-footer {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.public-profile-vibe-heart {
    min-width: 56px;
    justify-content: center;
    padding: 5px 11px;
    color: rgba(255,255,255,0.88);
}
.public-profile-vibe-heart .ol-react-total {
    min-width: 0.7rem;
    text-align: center;
}
.public-profile-suggestion-card .public-profile-vibe-text {
    font-style: normal;
    font-weight: 600;
}
.public-profile-idea-topline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.public-profile-idea-flags {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.public-profile-idea-category {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.78);
    font-size: 0.72rem;
    font-weight: 600;
}
.public-profile-idea-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.82);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}
.public-profile-idea-badge-heart {
    color: #ffb3bb;
    border-color: rgba(255, 118, 136, 0.25);
    background: rgba(255, 118, 136, 0.1);
}
.public-profile-idea-badge-hot {
    color: #f6d365;
    border-color: rgba(246, 211, 101, 0.22);
    background: rgba(246, 211, 101, 0.1);
}
.public-profile-vibe-meta,
.public-profile-activity-meta {
    color: rgba(255,255,255,0.5);
    font-size: 0.74rem;
}
.public-profile-suggestion-footer {
    margin-top: 12px;
    display: grid;
    gap: 10px;
}
.public-profile-suggestion-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.public-profile-suggestion-card .public-profile-vibe-meta {
    margin-top: 0;
}
.public-profile-suggestion-card .sug-vote-row {
    flex-wrap: wrap;
}
.public-profile-suggestion-card .sug-vote-btn {
    padding: 5px 11px;
    font-size: 0.68rem;
}
.public-profile-suggestion-card .sug-hook-btn {
    padding: 5px 11px;
    font-size: 0.68rem;
}
@media (max-width: 600px) {
    .public-profile-modal-box {
        width: 100%;
        border-radius: 24px 24px 0 0;
        padding: 1rem 1rem 1.05rem;
    }
    .public-profile-modal-box .auth-modal-close {
        top: 14px;
        right: 14px;
    }
    .public-profile-search-wrap {
        padding-right: 4rem;
    }
    .public-profile-head {
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 14px;
    }
    .public-profile-head-copy h3 {
        font-size: 1.45rem;
    }
    .public-profile-kpi {
        padding: 13px 14px;
    }
}

.idea-hook-modal {
    max-width: 580px;
}

.idea-hook-fields {
    gap: 14px;
}

.idea-hook-quote {
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.92);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
}

.idea-hook-section-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.idea-hook-section-btn {
    appearance: none;
    min-height: 48px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.82);
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.idea-hook-section-btn.active,
.idea-hook-section-btn:hover {
    background: rgba(246, 211, 101, 0.12);
    border-color: rgba(246, 211, 101, 0.28);
    color: rgba(255,255,255,0.95);
}

.idea-hook-mode-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.idea-hook-mode-row .add-btn {
    flex: 1 1 180px;
}

.idea-hook-hint {
    color: rgba(255,255,255,0.58);
    font-size: 0.84rem;
    line-height: 1.5;
}
.public-profile-activity-sections {
    display: grid;
    gap: 14px;
}
.public-profile-activity-section {
    display: grid;
    gap: 10px;
}
.public-profile-activity-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.public-profile-activity-section-head h4 {
    margin: 0;
    color: #fff;
    font-size: 1rem;
}
.public-profile-activity-section-head span {
    color: rgba(255,255,255,0.55);
    font-size: 0.74rem;
}
.public-profile-activity-grid {
    display: grid;
    gap: 10px;
}
.public-profile-activity-title {
    color: #fff;
    font-weight: 700;
    font-size: 0.92rem;
}
.public-profile-activity-sub {
    color: rgba(255,255,255,0.62);
    font-size: 0.78rem;
}
.public-profile-activity-copy {
    margin-top: 6px;
    color: rgba(255,255,255,0.8);
    font-size: 0.82rem;
    line-height: 1.45;
}
.profile-avatar-section {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 4px 0 8px;
}
.profile-avatar-preview {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f6d365, #fda085);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem; color: #1a1a2e; font-weight: 700;
    overflow: hidden; flex-shrink: 0;
}
.profile-avatar-img {
    width: 100%; height: 100%;
    object-fit: cover; border-radius: 50%;
}
.profile-avatar-actions {
    display: flex; flex-direction: column; gap: 6px;
}
.auth-btn-small {
    padding: 5px 12px; font-size: 0.78rem;
    border-radius: 8px; cursor: pointer;
    text-align: center;
}
.auth-btn-danger {
    background: rgba(255,80,80,0.18) !important;
    color: #ff6b6b !important;
    border-color: rgba(255,80,80,0.3) !important;
}
.auth-btn-danger:hover { background: rgba(255,80,80,0.3) !important; }
.profile-username-display {
    font-size: 0.95rem; color: #f6d365;
    font-weight: 600;
    padding: 8px 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    user-select: all;
}
.profile-label {
    font-size: 0.78rem; color: rgba(255,255,255,0.55);
    margin-bottom: -6px; margin-top: 2px;
}
.profile-bio-input {
    min-height: 60px; resize: vertical;
    font-family: inherit;
}
.profile-char-count {
    font-size: 0.72rem; color: rgba(255,255,255,0.35);
    text-align: right; margin-top: -8px;
}
.profile-success {
    color: #51cf66; font-size: 0.82rem;
    min-height: 18px; text-align: center;
}
.ms-avatar-img {
    width: 100%; height: 100%;
    object-fit: cover; border-radius: 50%;
}
.orb-avatar-img {
    width: 40px; height: 40px;
    object-fit: cover; border-radius: 50%;
    display: block;
}

/* ── Avatar Crop Modal ──────────────────────────────────────── */
.crop-modal-box { max-width: 340px; align-items: center; }
.crop-viewport {
    width: 240px; height: 240px;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
    background: #111;
    cursor: grab;
    touch-action: none;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 4px rgba(246,211,101,0.35);
}
.crop-viewport:active { cursor: grabbing; }
.crop-img {
    position: absolute;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}
.crop-controls {
    width: 100%;
    display: flex; align-items: center; gap: 10px;
    margin: 4px 0;
}
.crop-zoom-label {
    font-size: 0.78rem; color: rgba(255,255,255,0.55);
    white-space: nowrap;
}
.crop-zoom-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: rgba(255,255,255,0.15);
    border-radius: 4px;
    outline: none;
}
.crop-zoom-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #f6d365;
    cursor: pointer;
    border: 2px solid #1a1a2e;
}
.crop-zoom-slider::-moz-range-thumb {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #f6d365;
    cursor: pointer;
    border: 2px solid #1a1a2e;
}

.activity-crop-modal-box {
    max-width: 390px;
}
.activity-crop-copy {
    margin: 0 0 0.8rem;
    text-align: center;
    color: rgba(255,255,255,0.68);
    font-size: 0.9rem;
    line-height: 1.45;
}
.activity-crop-viewport {
    --activity-crop-aspect: 16 / 10;
    width: min(100%, 300px);
    height: auto;
    aspect-ratio: var(--activity-crop-aspect);
    border-radius: 24px;
    box-shadow: 0 0 0 4px rgba(246,211,101,0.22);
}
.activity-crop-mask {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
    pointer-events: none;
}

/* ---- SMALL ADD INPUT ---- */
.add-input-sm {
    flex: 0 0 auto;
    width: 120px;
    min-width: 80px;
}

/* ---- EDIT BUTTON ---- */
.edit-btn {
    display: none;
    background: rgba(246,211,101,0.15);
    border: 1px solid rgba(246,211,101,0.4);
    color: #f6d365;
    border-radius: 6px;
    padding: 3px 7px;
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1;
    transition: background 0.2s;
}
.edit-btn:hover { background: rgba(246,211,101,0.3); }
body.edit-mode .edit-btn { display: inline-block; }

/* ---- INLINE EDIT FORM ---- */
.inline-edit-form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 0;
}
.inline-edit-form .add-input {
    flex: 1 1 140px;
    padding: 6px 10px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    color: #fff;
    font-size: 0.88rem;
    font-family: inherit;
    outline: none;
}
.inline-edit-form textarea.add-input { resize: vertical; }
.inline-edit-form .add-input:focus { border-color: #f6d365; }
.edit-form-actions { display: flex; gap: 8px; flex-basis: 100%; }

/* ---- GALLERY SLIDE OVERLAY ---- */
.carousel-slide { position: relative; }
.slide-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    padding: 0.5rem 0.8rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 0 0 12px 12px;
}
.slide-caption {
    color: #fff;
    font-size: 0.82rem;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 80%;
}
/* Delete: × top-right, edit mode only */
.slide-delete-btn {
    display: none;
    position: absolute;
    top: 8px; right: 8px;
    background: rgba(220,50,50,0.85);
    border: none;
    color: #fff;
    border-radius: 50%;
    width: 26px; height: 26px;
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    z-index: 2;
}
.slide-delete-btn:hover { background: rgba(220,50,50,1); }
body.edit-mode .slide-delete-btn { display: flex; }
/* Share: bottom-left, white, visible when logged in */
.slide-share-btn {
    display: none;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.4);
    color: #fff;
    border-radius: 6px;
    padding: 3px 8px;
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1;
    flex-shrink: 0;
    transition: background 0.2s;
}
.slide-share-btn:hover { background: rgba(255,255,255,0.3); }
body.logged-in .carousel-slide:hover .slide-share-btn { display: inline-block; }
body.logged-in.edit-mode .slide-share-btn { display: inline-block; }

/* ---- ROUTINE CURRENT TIME SLOT ---- */
.tl-item.tl-current .tl-content {
    background: rgba(255,255,255,0.28);
    border-color: rgba(255,255,255,0.5);
    box-shadow: 0 0 18px rgba(246,211,101,0.2);
}
.tl-item.tl-current .tl-dot {
    background: #f6d365;
    box-shadow: 0 0 12px rgba(246,211,101,0.8);
    transform: scale(1.3);
}
.tl-item.tl-current .tl-time {
    color: #f6d365;
    font-weight: 800;
}

/* ---- THEME BUTTON ---- */
.theme-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
    border-radius: 20px;
    padding: 4px 8px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1;
}
.theme-btn:hover { background: rgba(255,255,255,0.15); transform: scale(1.12); }

/* ---- EDIT MODE ---- */
/* Delete buttons hidden in view mode, shown in edit mode */
.del-x { display: none; }
body.edit-mode .del-x { display: inline-block; }
.sec-friends .delete-btn { display: none; }
body.edit-mode .sec-friends .delete-btn { display: inline-block; }
/* occ-admin-btns handled by the .occ-admin-btns rule above */
.occasion-card .delete-btn,
.occ-hero .delete-btn { display: none; }
body.edit-mode .occasion-card .delete-btn,
body.edit-mode .occ-hero .delete-btn { display: inline-block; }

/* Gallery upload button — visible when logged in */
.gallery-upload-btn { display: none; }
body.logged-in .gallery-upload-btn { display: inline-flex; }

/* Add rows inside per-user dynamic containers — visible when logged in */
#routineDynamic .add-row,
#workoutsDynamic .add-row,
#foodDynamic .add-row { display: none !important; }
body.logged-in #routineDynamic .add-row,
body.logged-in #workoutsDynamic .add-row,
body.logged-in #foodDynamic .add-row { display: flex !important; }

/* Collapsed add row: only show the "+" trigger button, hide inputs */
.add-row.ac-collapsed > *:not(.add-btn) { display: none !important; }
.add-row.ac-collapsed { flex-wrap: nowrap !important; gap: 0 !important; }

/* Hide edit pencil buttons — click-to-edit handles edits */
.edit-btn { display: none !important; }

/* ---- Tile Action Bottom Sheet ---- */
.tile-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 10010;
    opacity: 0;
    transition: opacity 0.25s ease;
    -webkit-tap-highlight-color: transparent;
}
.tile-sheet-backdrop.open { opacity: 1; }

.tile-sheet {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(100%);
    width: min(400px, 94vw);
    z-index: 10011;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 0 max(env(safe-area-inset-bottom, 12px), 12px);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}
.tile-sheet.open {
    transform: translateX(-50%) translateY(0);
}

.tile-sheet-actions {
    background: rgba(38, 38, 48, 0.97);
    border-radius: 16px 16px 0 0;
    overflow: hidden;
}
.tile-sheet-action {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 15px 20px;
    background: none;
    border: none;
    border-top: 1px solid rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.88);
    font-size: 0.95rem;
    font-weight: 500;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.tile-sheet-action:first-child { border-top: none; }
.tile-sheet-action:hover,
.tile-sheet-action:active { background: rgba(255,255,255,0.07); }
.tile-sheet-action-icon { font-size: 1.1rem; width: 24px; text-align: center; }
.tile-sheet-action-danger { color: rgba(255, 100, 100, 0.92); }

.tile-sheet-cancel {
    display: block;
    width: 100%;
    padding: 15px;
    background: rgba(38, 38, 48, 0.97);
    border: none;
    border-radius: 16px;
    color: rgba(255,255,255,0.7);
    font-size: 0.95rem;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.tile-sheet-cancel:hover,
.tile-sheet-cancel:active { background: rgba(255,255,255,0.1); }

/* ---- MOBILE ---- */
@media (max-width: 768px) {
    .dot-nav { display: none; }
    .full-section { padding: 50px 0 40px; }
    .auth-username { max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .new-timeline::before { left: 70px; }
    .tl-time { min-width: 62px; font-size: 0.68rem; }
    .add-row { flex-direction: column; }
    .add-input-sm { width: 100%; }
    .sec-header h2 { font-size: 1.8rem; }
    .tl-content { padding: 0.7rem 1rem; }

    /* Mobile hero strip removed */
}

/* ========== CIRCLES ========== */

/* Circle button in auth bar */
.circle-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
    border-radius: 20px;
    padding: 4px 8px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1;
}
.circle-btn:hover { background: rgba(255,255,255,0.15); transform: scale(1.12); }

/* ---- Circle Switcher Panel ---- */
.circle-switcher-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 1200;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.4,0,0.2,1);
}
.circle-switcher-backdrop.open {
    opacity: 1;
    pointer-events: all;
}
.circle-switcher {
    position: fixed;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.92);
    opacity: 0;
    pointer-events: none;
    width: 360px;
    max-width: 92vw;
    max-height: 86vh;
    background: var(--cs-bg);
    border: 1px solid var(--circle-accent-border);
    border-radius: 24px;
    box-shadow: 0 32px 80px rgba(0,0,0,0.65), 0 0 0 1px var(--circle-accent-soft);
    z-index: 1201;
    display: flex;
    flex-direction: column;
    transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), opacity 0.3s ease;
    overflow: hidden;
}
.circle-switcher.open {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    pointer-events: all;
}

/* ── Staggered circle orb entrance ── */
.circle-orb-item {
    opacity: 0;
    transform: translateY(12px) scale(0.9);
    animation: circleOrbIn 0.35s cubic-bezier(0.22,1,0.36,1) forwards;
    animation-delay: calc(var(--ci, 0) * 0.06s + 0.1s);
}
@keyframes circleOrbIn {
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.circle-switcher-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 20px 16px 16px;
    border-bottom: 1px solid var(--circle-accent-border);
    flex-shrink: 0;
}
.circle-switcher-header h3 {
    color: #fff;
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0;
    text-align: center;
    letter-spacing: 0.01em;
}
.circle-switcher-close {
    position: absolute;
    right: 14px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.14);
    color: rgba(255,255,255,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, transform 0.3s ease;
    -webkit-tap-highlight-color: transparent;
}
.circle-switcher-close:hover {
    background: rgba(255,255,255,0.14);
    color: #fff;
    transform: rotate(90deg);
}
.circle-switcher-close:active { transform: rotate(90deg) scale(0.88); }

/* Circle search bar (at top of switcher) */
.circle-search-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    margin-bottom: 12px;
    position: relative;
}
.circle-search-bar .circle-browse-search-icon {
    position: absolute;
    left: 28px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,0.4);
    pointer-events: none;
    z-index: 1;
}
.circle-search-bar .circle-browse-input {
    padding: 0 14px 0 44px !important;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px;
    color: #fff;
    font-size: 0.9rem;
    height: 44px;
}
.circle-search-create-btn {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.18);
    background: linear-gradient(135deg, rgba(246,211,101,0.92), rgba(253,160,133,0.92));
    color: #1a1a2e;
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.18);
}
.circle-search-create-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
}
@media (max-width: 600px) {
    .circle-search-bar {
        padding: 0 12px;
        margin-bottom: 8px;
    }
    .circle-search-bar .circle-browse-search-icon {
        left: 22px;
    }
    .circle-search-bar .circle-browse-input {
        font-size: 0.84rem;
        padding-left: 40px !important;
        height: 42px;
    }
    .circle-search-create-btn {
        flex: 0 0 42px;
        width: 42px;
        height: 42px;
        font-size: 1.55rem;
    }
}
.circle-browse-divider {
    grid-column: 1 / -1;
    text-align: center;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(255,255,255,0.35);
    padding: 10px 0 4px;
    border-top: 1px solid rgba(255,255,255,0.08);
    margin-top: 8px;
}
.circle-join-inline {
    font-size: 0.7rem;
    padding: 3px 10px;
    margin-top: 4px;
}

.circle-switcher-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 0;
}
.circle-switcher-body::-webkit-scrollbar { width: 4px; }
.circle-switcher-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }

/* ---- Circle Orb Grid ---- */
.circle-orb-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px 16px;
    padding: 20px 16px;
}
.circle-orb-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 80px;
    cursor: pointer;
    animation: csOrbPop 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
    animation-delay: calc(var(--ci, 0) * 0.07s);
    -webkit-tap-highlight-color: transparent;
}
.circle-orb-btn {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--cs-orb-base);
    border: 2px solid var(--circle-accent-border);
    box-shadow: inset 0 0 0 100px var(--circle-accent-soft), 0 4px 16px rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, box-shadow 0.2s;
}
.circle-orb-item:active .circle-orb-btn { transform: scale(0.9); }
.circle-orb-item:hover .circle-orb-btn {
    box-shadow: inset 0 0 0 100px var(--circle-accent-soft), 0 6px 22px rgba(0,0,0,0.4), 0 0 14px var(--circle-accent-border);
}
.circle-orb-owner {
    border-color: rgba(246,211,101,0.65);
    box-shadow: inset 0 0 0 100px rgba(246,211,101,0.15), 0 0 20px rgba(246,211,101,0.28), 0 4px 16px rgba(0,0,0,0.5);
}
.circle-orb-emoji { font-size: 2rem; line-height: 1; }
.circle-orb-name {
    font-size: 0.78rem;
    font-weight: 700;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80px;
}
.circle-orb-meta {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.45);
    text-align: center;
}
.circle-orb-role {
    font-size: 0.62rem;
    color: rgba(246,211,101,0.7);
    text-align: center;
    font-weight: 600;
}
.circle-orb-item:not(:has(.circle-orb-owner)) .circle-orb-role {
    color: rgba(255,255,255,0.35);
    font-weight: 400;
}
.circle-orb-owner-tag {
    font-size: 0.62rem;
    color: rgba(187,134,252,0.7);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90px;
}
@keyframes csOrbPop {
    from { transform: scale(0) translateY(12px); opacity: 0; }
    to   { transform: scale(1) translateY(0);    opacity: 1; }
}

/* keep old .circle-item for any remaining references */
.circle-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 10px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s;
    color: #fff;
}
.circle-item:hover { background: rgba(255,255,255,0.08); }
.circle-item-emoji { font-size: 1.4rem; line-height: 1; }
.circle-item-info { flex: 1; min-width: 0; }
.circle-item-name { font-size: 0.95rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.circle-item-meta { font-size: 0.75rem; color: rgba(255,255,255,0.5); margin-top: 1px; }

.circle-switcher-footer {
    padding: 12px 16px 16px;
    border-top: 1px solid var(--circle-accent-border);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.circle-help-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 9px;
    background: none;
    border: 1px dashed rgba(255,255,255,0.15);
    border-radius: 12px;
    color: rgba(255,255,255,0.38);
    font-size: 0.78rem;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
    -webkit-tap-highlight-color: transparent;
}
.circle-help-btn-icon {
    position: absolute;
    left: 14px;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 50%;
    flex-shrink: 0;
}
.circle-help-btn:hover {
    color: var(--circle-tab-active);
    border-color: var(--circle-accent-border);
    background: var(--circle-accent-soft);
}

/* Create circle form */
.circle-create-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.08);
    border: 1px dashed rgba(255,255,255,0.25);
    border-radius: 10px;
    color: rgba(255,255,255,0.7);
    padding: 10px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
    text-align: center;
}
.circle-create-toggle:hover { background: rgba(255,255,255,0.12); color: #fff; }

.circle-create-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
    animation: fadeIn 0.15s ease;
}
.circle-create-form input,
.circle-create-form textarea,
.circle-create-form select {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 8px;
    color: #fff;
    padding: 8px 10px;
    font-size: 0.85rem;
    outline: none;
    resize: none;
}
.circle-create-form input::placeholder,
.circle-create-form textarea::placeholder { color: rgba(255,255,255,0.35); }
.circle-create-form input:focus,
.circle-create-form textarea:focus { border-color: rgba(255,255,255,0.35); }
.circle-create-form .row { display: flex; gap: 6px; }
.circle-create-form .row input { flex: 1; }
.circle-create-submit {
    background: linear-gradient(135deg, #667eea, #764ba2);
    border: none;
    border-radius: 8px;
    color: #fff;
    padding: 9px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
}
.circle-create-submit:hover { opacity: 0.88; }

/* Browse circles */
.circle-browse-section {
    padding: 12px 16px 16px;
    border-top: 1px solid rgba(255,255,255,0.08);
    margin-top: 8px;
}
.circle-browse-section h4 {
    color: rgba(255,255,255,0.5);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 8px;
}
.circle-search-row {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}
.circle-search-input {
    flex: 1;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    color: #fff;
    padding: 7px 10px;
    font-size: 0.85rem;
    outline: none;
}
.circle-search-btn {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    color: #fff;
    padding: 7px 12px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s;
}
.circle-search-btn:hover { background: rgba(255,255,255,0.18); }

.circle-browse-results { display: flex; flex-direction: column; gap: 4px; }
.circle-browse-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(255,255,255,0.04);
    border-radius: 8px;
    color: #fff;
}
.circle-browse-item-info { flex: 1; min-width: 0; }
.circle-browse-item-name { font-size: 0.9rem; font-weight: 600; }
.circle-browse-item-meta { font-size: 0.72rem; color: rgba(255,255,255,0.45); }
.circle-join-btn {
    background: linear-gradient(135deg, #667eea, #764ba2);
    border: none;
    border-radius: 6px;
    color: #fff;
    padding: 5px 12px;
    font-size: 0.8rem;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.2s;
    flex-shrink: 0;
}
.circle-join-btn:hover { opacity: 0.85; }
.circle-join-btn:disabled { opacity: 0.5; cursor: default; }

/* ---- Circle View Overlay ---- */
.circle-view {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: var(--circle-bg);
    z-index: 10000;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(30px) scale(0.97);
    transition: opacity 0.35s cubic-bezier(0.4,0,0.2,1),
                transform 0.4s cubic-bezier(0.4,0,0.2,1),
                visibility 0s linear 0.4s;
}
.circle-view.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    transition: opacity 0.35s cubic-bezier(0.4,0,0.2,1),
                transform 0.4s cubic-bezier(0.22,1,0.36,1);
}
body.circle-open { background: #09090d !important; }
body.circle-open > .splash-screen,
body.circle-open > .scroll-bar,
body.circle-open > .auth-bar,
body.circle-open > .profile-orb,
body.circle-open > .mobile-menu-btn,
body.circle-open > .ms-backdrop,
body.circle-open > .mobile-sheet,
body.circle-open > .auth-modal-overlay:not(#circleEditModal),
body.circle-open > .dot-nav,
body.circle-open > .full-section,
body.circle-open > .friend-add-overlay,
body.circle-open > .fav-circle-fab,
body.circle-open > .vibe-fab,
body.circle-open > .bottom-nav,
body.circle-open > .activity-panel,
body.circle-open > .lightbox-modal,
body.circle-open > .circle-switcher-backdrop,
body.circle-open > .circle-switcher,
body.circle-open > .admin-console,
body.circle-open > .guided-tour-overlay,
body.circle-open > .radial-fav-menu,
body.circle-open > .radial-fav-backdrop,
body.circle-open > .activity-page-header,
body.circle-open > .cli-overlay { display: none !important; }

.circle-view-inner {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    height: 100vh;
    height: 100dvh;
    max-width: 680px;
    width: 100%;
    margin: 0 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    transform: translateY(24px) scale(0.98);
    transition: opacity 0.4s cubic-bezier(0.4,0,0.2,1) 0.08s,
                transform 0.45s cubic-bezier(0.22,1,0.36,1) 0.08s;
}
.circle-view.open .circle-view-inner {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Header */
.circle-view-header {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--circle-accent-border);
    background: linear-gradient(180deg, var(--circle-accent-soft) 0%, transparent 100%);
    flex-shrink: 0;
    position: relative;
}
.circle-view-header::before {
    content: '';
    position: absolute;
    top: 0; left: 50%; transform: translateX(-50%);
    width: 320px; height: 180px;
    background: radial-gradient(ellipse at 50% 0%, var(--circle-accent-soft) 0%, transparent 72%);
    pointer-events: none;
}
.circle-nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px 4px;
    position: relative;
    z-index: 1;
}
.circle-back-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    background: var(--circle-accent-soft);
    border: 1px solid var(--circle-accent-border);
    border-radius: 20px;
    color: var(--circle-tab-active);
    padding: 6px 14px 6px 10px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s, transform 0.15s;
    font-family: 'Poppins', sans-serif;
    -webkit-tap-highlight-color: transparent;
}
.circle-back-btn:hover { background: var(--circle-accent-border); color: #fff; }
.circle-back-btn:active { transform: scale(0.94); }

.circle-manage-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    background: var(--circle-accent-soft);
    border: 1px solid var(--circle-accent-border);
    border-radius: 20px;
    color: var(--circle-tab-active);
    padding: 6px 14px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s, transform 0.15s;
    flex-shrink: 0;
    font-family: 'Poppins', sans-serif;
    -webkit-tap-highlight-color: transparent;
}
.circle-manage-btn:hover { background: var(--circle-accent-border); color: #fff; }
.circle-manage-btn:active { transform: scale(0.94); }
.circle-leave-btn {
    width: 40px;
    min-width: 40px;
    padding: 0;
    justify-content: center;
    border-color: rgba(255,107,107,0.35);
    color: #ff9494;
}
.circle-leave-btn:hover { background: rgba(255,107,107,0.15); }

.circle-nav-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}
.circle-members-icon-btn {
    width: 40px;
    min-width: 40px;
    padding: 0;
    justify-content: center;
}
.circle-orb-score {
    margin-top: 2px;
    display: flex;
    justify-content: center;
}
.circle-orb-score .score-badge {
    font-size: 0.68rem;
    padding: 2px 8px;
}

.circle-member-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--circle-tab-active);
    background: var(--circle-accent-soft);
    border: 1px solid var(--circle-accent-border);
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 6px;
}

/* Circle name + fav star row */
.circle-hero-name-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Favorite circle star button in hero row */
.circle-fav-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,0.25);
    font-size: 1.5rem;
    cursor: pointer;
    transition: color 0.25s, transform 0.25s, filter 0.25s;
    -webkit-tap-highlight-color: transparent;
    padding: 2px;
    line-height: 1;
}
.circle-fav-btn:hover {
    color: rgba(255,215,0,0.6);
    transform: scale(1.15);
}
.circle-fav-btn:active {
    transform: scale(0.9);
}
.circle-fav-btn.is-fav {
    color: #ffd700;
    filter: drop-shadow(0 0 6px rgba(255,215,0,0.4));
    animation: favPop 0.35s ease;
}
.circle-fav-btn.is-fav:hover {
    filter: drop-shadow(0 0 10px rgba(255,215,0,0.5));
}
@keyframes favPop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* Circle edit button in name row */
.circle-edit-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,0.25);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    transition: color 0.2s, background 0.2s;
    -webkit-tap-highlight-color: transparent;
}
.circle-edit-btn:hover { color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.08); }

/* Editable orb shell — tap to change cover */
.circle-hero-orb-editable { cursor: pointer; position: relative; }
.circle-hero-orb-editable .circle-hero-orb { transition: opacity 0.2s; }
.circle-hero-orb-editable:hover .circle-hero-orb { opacity: 0.75; }
.circle-orb-edit-hint {
    position: absolute;
    bottom: 2px; right: 2px;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: rgba(20,22,28,0.88);
    border: 1px solid rgba(255,255,255,0.15);
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.6);
    pointer-events: none;
}
.circle-orb-remove-img {
    position: absolute;
    top: 0; right: -6px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: rgba(248,81,73,0.85);
    border: none;
    color: #fff;
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    z-index: 2;
}
.circle-hero-cover-img {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 50%;
}


/* Hero identity block */
.circle-hero-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0 20px 8px;
    margin-top: -20px;
    position: relative;
    z-index: 1;
}
.circle-hero-row .circle-hero-orb-shell {
    margin-bottom: 6px;
}
.circle-hero-orb {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--cs-orb-base, #131228);
    border: 2px solid var(--circle-accent-border);
    box-shadow: inset 0 0 0 100px var(--circle-accent-soft), 0 0 28px var(--circle-accent-soft), 0 4px 20px rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    line-height: 1;
}
.circle-hero-name {
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
    margin: 0;
    text-align: center;
    letter-spacing: -0.01em;
}
.circle-hero-stats {
    display: flex;
    align-items: center;
    gap: 8px;
}
.circle-hero-score-row {
    display: flex;
    justify-content: center;
    margin-top: 2px;
}
.circle-hero-score-row .score-badge {
    font-size: 0.74rem;
    padding: 4px 10px;
}
.circle-score-alerts {
    margin: 0 16px 10px;
    padding: 14px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 14px 36px rgba(0,0,0,0.18);
}
.circle-score-alerts-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.circle-score-alerts-head h3 {
    margin: 0;
    color: #fff;
    font-size: 0.88rem;
    font-weight: 800;
}
.circle-score-alerts-head p {
    margin: 4px 0 0;
    color: rgba(255,255,255,0.5);
    font-size: 0.72rem;
    line-height: 1.45;
}
.circle-score-alerts-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.circle-score-alert-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
}
.circle-score-alert-rank {
    min-width: 34px;
    height: 34px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,191,102,0.12);
    border: 1px solid rgba(255,191,102,0.22);
    color: rgba(255,214,133,0.92);
    font-size: 0.76rem;
    font-weight: 800;
}
.circle-score-alert-copy {
    min-width: 0;
}
.circle-score-alert-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.circle-score-alert-name {
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.circle-score-alert-role {
    flex-shrink: 0;
    color: rgba(255,255,255,0.45);
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.circle-score-alert-meta {
    margin-top: 2px;
    color: rgba(255,255,255,0.44);
    font-size: 0.7rem;
}
.circle-score-alert-item .score-badge {
    font-size: 0.72rem;
    padding: 4px 10px;
}
.circle-score-alert-empty {
    padding: 12px 10px;
    border-radius: 16px;
    background: rgba(255,255,255,0.03);
    border: 1px dashed rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.55);
    font-size: 0.74rem;
    text-align: center;
}
.circle-stat-chip {
    font-size: 0.72rem;
    color: var(--circle-tab-active);
    background: var(--circle-accent-soft);
    border: 1px solid var(--circle-accent-border);
    border-radius: 20px;
    padding: 2px 10px;
    font-weight: 600;
}
.circle-stat-sep { color: rgba(255,255,255,0.2); font-size: 0.7rem; }

/* Tabs */
.circle-tabs {
    display: flex;
    gap: 6px;
    padding: 6px 14px;
    border-bottom: 1px solid var(--circle-accent-border);
    background: rgba(0,0,0,0.15);
    flex-shrink: 0;
    overflow-x: auto;
}
.circle-tabs::-webkit-scrollbar { display: none; }
.circle-tab {
    background: none;
    border: 1px solid transparent;
    border-radius: 20px;
    color: rgba(255,255,255,0.38);
    padding: 5px 13px;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.18s;
    white-space: nowrap;
    font-family: 'Poppins', sans-serif;
    -webkit-tap-highlight-color: transparent;
}
.circle-tab:hover {
    color: var(--circle-tab-active);
    background: var(--circle-accent-soft);
    border-color: var(--circle-accent-border);
}
.circle-tab.active {
    color: var(--circle-tab-active);
    background: var(--circle-accent-soft);
    border-color: var(--circle-accent);
    font-weight: 700;
}

/* Feed */
.circle-feed {
    flex: 1;
    padding: 14px 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Pull-to-refresh indicator */
.ptr-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 0;
    overflow: hidden;
    opacity: 0;
    flex-shrink: 0;
    transition: height 0.2s ease, opacity 0.2s ease;
}
.ptr-text {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.5);
    font-weight: 500;
}
.ptr-ready .ptr-text { color: rgba(255,255,255,0.8); }
.ptr-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,0.15);
    border-top-color: rgba(255,255,255,0.6);
    border-radius: 50%;
}
.ptr-ready .ptr-spinner { border-top-color: #fff; }
.ptr-loading .ptr-spinner {
    animation: ptrSpin 0.6s linear infinite;
}
@keyframes ptrSpin {
    to { transform: rotate(360deg); }
}
.circle-view-inner::-webkit-scrollbar { width: 3px; }
.circle-view-inner::-webkit-scrollbar-thumb { background: var(--circle-accent-border); border-radius: 2px; }

.circle-empty {
    text-align: center;
    color: rgba(160,180,255,0.3);
    font-size: 0.9rem;
    padding: 60px 20px;
}
.circle-empty .circle-empty-icon { font-size: 2.5rem; margin-bottom: 12px; }

/* Circle switcher empty hint */
.circle-switcher-hint {
    grid-column: 1 / -1;
    width: 100%;
    text-align: center;
    padding: 28px 20px 20px;
    color: rgba(255,255,255,.9);
    border-radius: 20px;
    border: 1px dashed rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.025);
}
.circle-switcher-hint p {
    margin: 4px 0;
    font-size: .88rem;
    line-height: 1.5;
    color: rgba(255,255,255,.9);
}
.circle-hint-or {
    margin: 8px 0 !important;
    opacity: .55;
    font-size: .8rem;
    color: rgba(255,255,255,.9);
}
.circle-hint-arrow-up {
    font-size: 1.4rem;
    display: block;
    margin-bottom: 6px;
    animation: circleHintBounceUp 1.2s ease-in-out infinite;
}
.circle-hint-arrow-down {
    font-size: 1.4rem;
    display: block;
    margin: 6px 0;
    animation: circleHintBounceDown 1.2s ease-in-out infinite;
}
@keyframes circleHintBounceUp {
    0%,100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }
}
@keyframes circleHintBounceDown {
    0%,100% { transform: translateY(0); }
    50%      { transform: translateY(5px); }
}

/* ── Notes Accordion ─────────────────────────────────────────────────────── */
.notes-accordion {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 1rem;
}

.notes-acc-item {
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
    overflow: hidden;
    transition: border-color 0.2s;
}
.notes-acc-item.acc-open {
    border-color: rgba(255,215,92,0.22);
    background: rgba(255,215,92,0.04);
}

.notes-acc-header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: none;
    border: none;
    color: rgba(255,255,255,0.9);
    cursor: pointer;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
}
.notes-acc-icon { font-size: 1.1rem; flex-shrink: 0; }
.notes-acc-label {
    font-size: 0.95rem;
    font-weight: 700;
    flex: 1;
}
.notes-acc-meta {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.45);
    white-space: nowrap;
}
.notes-acc-chevron {
    font-size: 1.2rem;
    color: rgba(255,255,255,0.4);
    transition: transform 0.22s ease;
    line-height: 1;
    flex-shrink: 0;
}
.notes-acc-item.acc-open .notes-acc-chevron {
    transform: rotate(90deg);
}

.notes-acc-body {
    padding: 0 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.notes-acc-content {
    margin-top: 10px;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(255,215,92,0.18);
    background: rgba(255,215,92,0.03);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.notes-acc-filter {
    display: flex;
    gap: 8px;
    align-items: center;
}
.notes-acc-date-input {
    flex: 1;
    min-height: 38px;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.9);
    font: inherit;
    font-size: 0.85rem;
}
.notes-acc-reset-btn {
    min-height: 38px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.74);
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
.notes-acc-reset-btn.active,
.notes-acc-reset-btn:hover {
    background: rgba(255,215,92,0.12);
    border-color: rgba(255,215,92,0.22);
    color: #fff;
}

/* Day group collapsible */
.notes-day-chevron {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.35);
    transition: transform 0.2s ease;
    margin-left: auto;
    line-height: 1;
}
.notes-day-group:not(.day-collapsed) .notes-day-chevron {
    transform: rotate(90deg);
}
.notes-day-head { user-select: none; }

/* Friends empty hint */
.friends-empty-hint {
    text-align: center;
    padding: 32px 24px 16px;
    color: rgba(255,255,255,.9);
}
.friends-empty-hint p {
    margin: 6px 0;
    font-size: .85rem;
    color: #fff;
    line-height: 1.4;
}
.friends-hint-or {
    font-size: .75rem;
    margin: 4px 0;
    opacity: .6;
    color: #fff;
}
.friends-hint-arrow-up {
    font-size: 1.4rem;
    display: block;
    margin-bottom: 6px;
    animation: circleHintBounceUp 1.2s ease-in-out infinite;
}
.friends-hint-arrow-down {
    font-size: 1.4rem;
    display: block;
    margin-top: 6px;
    animation: circleHintBounceDown 1.2s ease-in-out infinite;
}

/* Rich empty state */
.circle-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 52px 24px 40px;
    gap: 10px;
}
.circle-empty-emoji {
    font-size: 3.4rem;
    line-height: 1;
    margin-bottom: 4px;
    filter: drop-shadow(0 0 18px var(--circle-accent-soft));
    animation: cEmptyFloat 3s ease-in-out infinite;
}
@keyframes cEmptyFloat {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-8px); }
}
.circle-empty-title {
    color: rgba(255,255,255,0.65);
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
}
.circle-empty-hint {
    color: rgba(255,255,255,0.28);
    font-size: 0.8rem;
    line-height: 1.55;
    margin: 0;
    max-width: 260px;
}

/* Feed cards */
.feed-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-left: 3px solid rgba(102,126,234,0.45);
    border-radius: 12px;
    padding: 12px 14px 10px;
    transition: border-color 0.2s, background 0.2s;
    position: relative;
}
.feed-card:hover {
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,255,255,0.14);
    border-left-color: rgba(102,126,234,0.7);
}

/* ── Feed card — avatar + body + inline like ── */
.feed-card {
    display: flex;
    align-items: center;
    gap: 12px;
    border-left: none;
    padding: 11px 14px;
}
.feed-card:hover { background: rgba(255,255,255,0.07); }

/* Avatar circle */
.feed-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    background: linear-gradient(135deg, #667eea, #764ba2);
}
/* Avatar color per content type */
.feed-av-oneliner   { background: linear-gradient(135deg, #be64ff, #7c3aed); }
.feed-av-suggestion { background: linear-gradient(135deg, #32d2b4, #0d9488); }
.feed-av-occasion   { background: linear-gradient(135deg, #ff9696, #e05252); }
.feed-av-routine    { background: linear-gradient(135deg, #64a0ff, #3b6fd4); }
.feed-av-workout    { background: linear-gradient(135deg, #ffa03c, #d97706); }
.feed-av-food       { background: linear-gradient(135deg, #50d264, #16a34a); }
.feed-av-photo      { background: linear-gradient(135deg, #ffc850, #d97706); }

/* Body — type label + content */
.feed-body {
    flex: 1;
    min-width: 0;
}
.feed-meta-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
}
.feed-author {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--circle-author);
    flex-shrink: 0;
}
.feed-meta-sep {
    color: rgba(255,255,255,0.2);
    font-size: 0.7rem;
}
.feed-type-label {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.38);
    font-weight: 500;
}
.feed-time { color: rgba(255,255,255,0.22); font-size: 0.7rem; margin-left: auto; }

.feed-text {
    color: rgba(255,255,255,0.9);
    font-size: 0.88rem;
    font-style: italic;
    line-height: 1.45;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.feed-photo {
    width: 100%;
    max-height: 200px;
    object-fit: cover;
    border-radius: 8px;
    margin-top: 6px;
    display: block;
}

/* Inline like button — right side */
.feed-like-btn {
    background: none;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 20px;
    color: rgba(255,255,255,0.38);
    padding: 3px 10px;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    font-family: 'Poppins', sans-serif;
}
.feed-like-btn:hover { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.75); }
.feed-like-btn.liked {
    background: rgba(255,107,107,0.12);
    border-color: rgba(255,107,107,0.45);
    color: #ff9494;
}
.feed-remove-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,0.3);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 3px 7px;
    border-radius: 6px;
    transition: all 0.15s;
    margin-left: auto;
}
.feed-remove-btn:hover { color: #ff6b6b; background: rgba(255,107,107,0.1); }

/* ---- Circle Admin Overlay ---- */
.circle-admin {
    position: fixed;
    inset: 0;
    background: rgba(5,5,20,0.97);
    backdrop-filter: blur(24px);
    z-index: 10001;
    display: none;
    flex-direction: column;
    overflow: hidden;
}
.circle-admin.open { display: flex; }

.circle-admin-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-width: 680px;
    width: 100%;
    margin: 0 auto;
}

.circle-admin-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 20px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    flex-shrink: 0;
}
.circle-admin-header h3 {
    flex: 1;
    color: #fff;
    font-size: 1.1rem;
    margin: 0;
}
.circle-admin-close {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    color: rgba(255,255,255,0.7);
    padding: 6px 12px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s;
}
.circle-admin-close:hover { background: rgba(255,255,255,0.15); color: #fff; }

.circle-admin-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
}
.circle-admin-body::-webkit-scrollbar { width: 4px; }
.circle-admin-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 2px; }

.circle-admin-section {
    margin-bottom: 28px;
}
.circle-admin-section h4 {
    color: rgba(255,255,255,0.45);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 10px;
}

.circle-member-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.04);
    border-radius: 10px;
    margin-bottom: 6px;
    color: #fff;
}
.circle-member-name { flex: 1; font-size: 0.9rem; font-weight: 600; }
.circle-member-status {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.4);
    text-transform: capitalize;
}
.circle-approve-btn {
    background: rgba(72,199,142,0.2);
    border: 1px solid rgba(72,199,142,0.4);
    border-radius: 6px;
    color: #48c78e;
    padding: 4px 10px;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.15s;
}
.circle-approve-btn:hover { background: rgba(72,199,142,0.3); }
.circle-reject-btn {
    background: rgba(255,107,107,0.15);
    border: 1px solid rgba(255,107,107,0.35);
    border-radius: 6px;
    color: #ff9494;
    padding: 4px 10px;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.15s;
}
.circle-reject-btn:hover { background: rgba(255,107,107,0.25); }
.circle-remove-btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    color: rgba(255,255,255,0.45);
    padding: 4px 10px;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.15s;
}
.circle-remove-btn:hover { background: rgba(255,107,107,0.15); border-color: rgba(255,107,107,0.3); color: #ff9494; }

/* ---- Share Picker Modal ---- */
.share-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 10001;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.share-modal-sheet {
    background: linear-gradient(160deg, #1a1a2e 0%, #16213e 100%);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 20px 20px 0 0;
    width: 100%;
    max-width: 480px;
    padding: 0 0 env(safe-area-inset-bottom, 0);
    animation: slideUpSheet 0.22s cubic-bezier(0.25,0.8,0.25,1);
}
@keyframes slideUpSheet {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
.share-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
}
.share-modal-close {
    background: rgba(255,255,255,0.08);
    border: none;
    color: rgba(255,255,255,0.6);
    border-radius: 50%;
    width: 28px; height: 28px;
    cursor: pointer;
    font-size: 0.85rem;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s;
}
.share-modal-close:hover { background: rgba(255,255,255,0.18); color: #fff; }
.share-modal-list { padding: 8px 12px; }
.share-modal-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 8px;
    color: #fff;
    cursor: pointer;
    font-size: 0.95rem;
    transition: background 0.15s, border-color 0.15s;
    text-align: left;
}
.share-modal-item:hover { background: rgba(102,126,234,0.18); border-color: rgba(102,126,234,0.4); }
.share-modal-item-emoji { font-size: 1.4rem; }
.share-modal-item-name { font-weight: 500; }
.share-modal-cancel-btn {
    display: block;
    width: calc(100% - 24px);
    margin: 4px 12px 16px;
    padding: 12px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    color: rgba(255,255,255,0.6);
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.15s;
}
.share-modal-cancel-btn:hover { background: rgba(255,255,255,0.12); }

/* ---- Card Share Strip — full-width bottom action ---- */
.card-share-strip {
    display: none;
    width: 100%;
    padding: 8px 12px;
    margin-top: 10px;
    touch-action: manipulation;
    background: linear-gradient(90deg, rgba(102,126,234,0.12), rgba(102,126,234,0.06));
    border: 1px solid rgba(102,126,234,0.2);
    border-radius: 8px;
    color: rgba(160,180,255,0.85);
    font-size: 0.78rem;
    text-align: center;
    cursor: pointer;
    letter-spacing: 0.03em;
    transition: background 0.15s, border-color 0.15s;
}
.card-share-strip:hover { background: rgba(102,126,234,0.22); border-color: rgba(102,126,234,0.45); color: #a0b4ff; }
/* Inline strip for routine timeline */
.tl-share-strip { margin-top: 8px; padding: 6px 10px; }
/* Show on card hover (desktop) when logged in */
@media (min-width: 769px) {
    body.logged-in .occasion-card:hover .card-share-strip,
    body.logged-in .tl-item:hover .card-share-strip,
    body.logged-in .wo-card:hover .card-share-strip,
    body.logged-in .fo-card:hover .card-share-strip { display: block; }
}
/* Show after tap — unified .touched class (all screen sizes) */
.card-share-strip { -webkit-tap-highlight-color: rgba(102,126,234,0.2); touch-action: manipulation; }
body.logged-in .share-revealed .card-share-strip,
body.logged-in .touched .card-share-strip { display: block; }
/* Always show in edit mode (all devices) */
body.logged-in.edit-mode .card-share-strip { display: block; }

/* ---- Custom Confirm Dialog ---- */
.confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 99998;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.confirm-overlay.visible { opacity: 1; }
.confirm-dialog {
    background: var(--cs-bg, linear-gradient(160deg,#181630 0%,#1c1e3a 45%,#162030 100%));
    border: 1px solid var(--circle-accent-border, rgba(102,126,234,0.28));
    border-radius: 22px;
    padding: 32px 28px 24px;
    width: min(320px, 88vw);
    box-shadow: 0 0 0 1px var(--circle-accent-soft, rgba(102,126,234,0.12)),
                0 32px 80px rgba(0,0,0,0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transform: scale(0.88) translateY(16px);
    transition: transform 0.22s cubic-bezier(0.34,1.5,0.64,1);
    position: relative;
    overflow: hidden;
}
.confirm-dialog::before {
    content: '';
    position: absolute;
    top: -60px; left: 50%;
    transform: translateX(-50%);
    width: 200px; height: 120px;
    background: radial-gradient(ellipse at 50% 0%, var(--circle-accent-soft, rgba(102,126,234,0.22)) 0%, transparent 70%);
    pointer-events: none;
}
.confirm-overlay.visible .confirm-dialog {
    transform: scale(1) translateY(0);
}
.confirm-icon {
    font-size: 1.6rem;
    line-height: 1;
    margin-bottom: 4px;
    position: relative;
    z-index: 1;
    color: var(--circle-tab-active, #a0b4ff);
    text-shadow: 0 0 16px var(--circle-accent-soft, rgba(102,126,234,0.5));
}
.confirm-title {
    color: #fff;
    font-size: 1.08rem;
    font-weight: 700;
    margin: 0;
    text-align: center;
    letter-spacing: -0.01em;
    position: relative;
    z-index: 1;
}
.confirm-msg {
    color: rgba(255,255,255,0.42);
    font-size: 0.8rem;
    text-align: center;
    margin: 4px 0 10px;
    line-height: 1.55;
    position: relative;
    z-index: 1;
}
.confirm-actions {
    display: flex;
    gap: 8px;
    width: 100%;
    position: relative;
    z-index: 1;
}
.confirm-btn {
    flex: 1;
    padding: 11px 0;
    border-radius: 12px;
    font-size: 0.86rem;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s, transform 0.1s;
    letter-spacing: 0.01em;
}
.confirm-cancel {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.55);
}
.confirm-cancel:hover { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.8); }
.confirm-ok {
    background: var(--circle-accent-soft, rgba(102,126,234,0.2));
    border: 1px solid var(--circle-accent-border, rgba(102,126,234,0.35));
    color: var(--circle-tab-active, #a0b4ff);
}
.confirm-ok:hover { opacity: 0.85; }
.confirm-ok.confirm-danger {
    background: rgba(200,50,50,0.18);
    border: 1px solid rgba(200,60,60,0.35);
    color: #f08080;
}
.confirm-ok.confirm-danger:hover { background: rgba(200,50,50,0.3); }
.confirm-btn:active { transform: scale(0.97); }

/* ---- Toast Notification ---- */
.app-toast {
    position: fixed;
    bottom: 110px;
    left: 50%;
    transform: translateX(-50%) translateY(16px);
    background: rgba(20,20,50,0.95);
    color: #fff;
    border: 1px solid rgba(102,126,234,0.4);
    border-radius: 24px;
    padding: 10px 22px;
    font-size: 0.9rem;
    z-index: 20000;
    opacity: 0;
    transition: opacity 0.22s ease, transform 0.22s ease;
    pointer-events: none;
    white-space: normal;
    max-width: min(340px, calc(100vw - 48px));
    text-align: center;
}
.app-toast.app-toast-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.app-toast.app-toast-error { border-color: rgba(255,100,100,0.5); background: rgba(50,10,10,0.95); }
.app-toast.app-toast-loading {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.app-toast-spinner {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.22);
    border-top-color: #f6d365;
    animation: appToastSpin 0.75s linear infinite;
    flex: 0 0 16px;
}
@keyframes appToastSpin {
    to { transform: rotate(360deg); }
}

/* Fade-in keyframe (reusable) */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ========== ACTIVITY / HEALTH SCORE ========== */

.score-badge {
    font-size: 0.8rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    cursor: default;
    white-space: nowrap;
}
.score-green { background: rgba(72,199,142,0.25); color: #48c78e; border: 1px solid rgba(72,199,142,0.4); }
.score-amber { background: rgba(255,189,0,0.2);   color: #ffcd00; border: 1px solid rgba(255,189,0,0.35); }
.score-red   { background: rgba(255,107,107,0.2); color: #ff9494; border: 1px solid rgba(255,107,107,0.35); }

.bell-btn {
    position: relative;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.25);
    color: rgba(255,255,255,0.8);
    border-radius: 20px;
    padding: 4px 8px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    line-height: 1;
}
.bell-btn:hover { background: rgba(255,255,255,0.1); }
.bell-has-unread { border-color: rgba(255,107,107,0.6); color: #ff9494; }
.bell-count {
    position: absolute;
    top: -4px; right: -4px;
    background: #ff4757;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    border-radius: 10px;
    padding: 1px 4px;
    min-width: 14px;
    text-align: center;
    line-height: 1.4;
    pointer-events: none;
}

/* ── Notification Panel ──────────────────────────────────────────────────── */
.notif-panel {
    position: fixed;
    inset: 0;
    background: rgba(5,5,20,0.97);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    z-index: 10001;
    display: none;
    justify-content: center;
    overflow-y: auto;
}
.notif-panel.open { display: flex; }

.notif-panel-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    max-width: 560px;
    padding: 22px 24px 28px;
    gap: 16px;
}
.notif-panel-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    flex-shrink: 0;
}
.notif-panel-header h3 {
    flex: 1;
    margin: 0;
    color: #fff;
    font-size: 1.3rem;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
}
.notif-panel-body {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 20px;
}
.notif-panel-body::-webkit-scrollbar { width: 4px; }
.notif-panel-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 2px; }

.notif-card {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    transition: background 0.2s;
}
.notif-card-link {
    width: 100%;
    text-align: left;
    color: inherit;
    font: inherit;
    cursor: pointer;
}
.notif-card-link:hover {
    background: rgba(255,255,255,0.07);
}
.notif-card-link:focus-visible {
    outline: 2px solid rgba(246,211,101,0.65);
    outline-offset: 2px;
}
.notif-card.unread {
    background: rgba(102,126,234,0.08);
    border-color: rgba(102,126,234,0.25);
}
.notif-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(255,255,255,0.06);
}
.notif-card.unread .notif-icon {
    background: rgba(102,126,234,0.15);
}
.notif-content {
    flex: 1;
    min-width: 0;
}
.notif-target-flash {
    animation: notifTargetFlash 1.5s ease;
}
@keyframes notifTargetFlash {
    0% { box-shadow: 0 0 0 0 rgba(246,211,101,0); transform: scale(1); }
    20% { box-shadow: 0 0 0 4px rgba(246,211,101,0.18), 0 0 28px rgba(246,211,101,0.24); transform: scale(1.01); }
    100% { box-shadow: 0 0 0 0 rgba(246,211,101,0); transform: scale(1); }
}
.notif-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: rgba(255,255,255,0.92);
    margin-bottom: 3px;
    font-family: 'Poppins', sans-serif;
}
.notif-body {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.5);
    line-height: 1.4;
    margin-bottom: 4px;
}
.notif-time {
    font-size: 0.68rem;
    color: rgba(255,255,255,0.3);
}
.notif-loading {
    color: rgba(255,255,255,0.4);
    text-align: center;
    padding: 40px 0;
    font-size: 0.9rem;
}
.notif-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 0;
    gap: 12px;
}
.notif-empty-icon {
    font-size: 2.5rem;
    opacity: 0.3;
}
.notif-empty {
    color: rgba(255,255,255,0.35);
    text-align: center;
    font-size: 0.9rem;
}

/* ── Notification Panel — bottom sheet style ─────────────────────────────── */
.notif-sheet {
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    align-items: flex-end;
    justify-content: center;
    overflow-y: visible;
}
.notif-sheet .notif-panel-inner {
    max-width: 480px;
    width: 100%;
    height: auto;
    max-height: 92vh;
    max-height: 92svh;
    background: var(--sheet-bg);
    border: 1px solid var(--sheet-border);
    border-bottom: none;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -12px 56px rgba(0,0,0,0.55);
    padding: 10px 20px 32px;
    overflow-y: auto;
    animation: apSlideUp 0.38s cubic-bezier(0.22,1,0.36,1);
}
.notif-sheet .notif-panel-header {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--sheet-border);
    margin-bottom: 4px;
}
.notif-sheet .notif-panel-header h3 { color: var(--sheet-text); }

/* ── Snapshot Panel — bottom sheet style ──────────────────────────────────── */
.snap-panel {
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    align-items: flex-end;
    justify-content: center;
    overflow-y: visible;
}
.snap-panel .notif-panel-inner {
    max-width: 480px;
    width: 100%;
    height: auto;
    max-height: 92vh;
    max-height: 92svh;
    background: var(--sheet-bg);
    border: 1px solid var(--sheet-border);
    border-bottom: none;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -12px 56px rgba(0,0,0,0.55);
    padding: 10px 20px 32px;
    overflow-y: auto;
    animation: apSlideUp 0.38s cubic-bezier(0.22,1,0.36,1);
}
.snap-handle-bar {
    display: flex;
    justify-content: center;
    padding: 0 0 12px;
}
.snap-handle {
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: var(--sheet-handle, rgba(255,255,255,0.2));
}
.snap-panel-desc {
    font-size: 0.78rem;
    color: var(--sheet-subtext, rgba(255,255,255,0.4));
    margin: 2px 0 0;
    line-height: 1.4;
}
.snap-panel .notif-panel-header {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--sheet-border);
    margin-bottom: 4px;
}
.snap-panel .notif-panel-header h3 { color: var(--sheet-text); }
.snap-panel .notif-panel-body {
    overflow-y: auto;
}

.snap-panel .snap-save-row {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 0 0 4px;
}
.snap-save-row {
    flex-wrap: wrap;
}
.snap-save-row input {
    flex: 1 1 160px;
    min-width: 0;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    color: #e6edf3;
    border-radius: 10px;
    padding: 9px 14px;
    font-size: 16px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
}
.snap-save-row input:focus { border-color: rgba(246,211,101,0.5); }
.snap-save-row input::placeholder { color: rgba(255,255,255,0.28); }
.snap-save-btn {
    flex: 1 1 auto;
    background: rgba(246,211,101,0.12);
    border: 1px solid rgba(246,211,101,0.3);
    color: #f6d365;
    border-radius: 10px;
    padding: 9px 16px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
    text-align: center;
}
.snap-save-btn:hover { background: rgba(246,211,101,0.2); }
.snap-save-btn:disabled { opacity: 0.4; cursor: default; }
.snap-limit-note {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.3);
    padding: 2px 0 10px;
}
.snap-limit-reached {
    color: rgba(248,185,73,0.75);
}
.snap-upgrade-link {
    background: none;
    border: none;
    color: #f6d365;
    font-size: inherit;
    font-family: inherit;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}

.snap-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color 0.2s;
}
/* Inside inline list card — lighten background to avoid double-nesting heaviness */
.isnap-list-card .snap-card {
    background: rgba(255,255,255,0.03);
    padding: 12px 14px;
}
.snap-card:hover { border-color: rgba(255,255,255,0.14); }
.snap-card-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.snap-card-icon {
    font-size: 1.3rem;
    flex-shrink: 0;
    margin-top: 1px;
}
.snap-card-meta { flex: 1; min-width: 0; }
.snap-card-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: #e6edf3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.snap-card-date {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.35);
    margin-top: 2px;
}
.snap-card-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.snap-count-pill {
    background: rgba(255,255,255,0.06);
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 0.72rem;
    color: rgba(255,255,255,0.55);
    white-space: nowrap;
}
.snap-count-pill.has-items { color: rgba(255,255,255,0.8); background: rgba(255,255,255,0.09); }
.snap-card-actions {
    display: flex;
    gap: 8px;
    margin-top: 2px;
}
.snap-restore-btn {
    flex: 1;
    background: rgba(102,126,234,0.12);
    border: 1px solid rgba(102,126,234,0.3);
    color: #7c94f9;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.snap-restore-btn:hover { background: rgba(102,126,234,0.22); }
.snap-delete-btn {
    background: rgba(248,81,73,0.08);
    border: 1px solid rgba(248,81,73,0.2);
    color: rgba(248,81,73,0.7);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.2s;
}
.snap-delete-btn:hover { background: rgba(248,81,73,0.18); color: #f85149; }

/* Inline delete confirmation strip */
.snap-card-actions:has(.snap-delete-confirm-yes) {
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.snap-delete-confirm-label {
    flex: 1 1 100%;
    font: 400 0.75rem 'Poppins', sans-serif;
    color: rgba(255,255,255,0.5);
    margin-bottom: 2px;
}
.snap-delete-confirm-yes,
.snap-delete-confirm-no {
    flex: 1;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid;
    font: 600 0.78rem 'Poppins', sans-serif;
    cursor: pointer;
    transition: background 0.2s;
}
.snap-delete-confirm-yes {
    background: rgba(248,81,73,0.12);
    border-color: rgba(248,81,73,0.3);
    color: #f85149;
}
.snap-delete-confirm-yes:hover { background: rgba(248,81,73,0.22); }
.snap-delete-confirm-no {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.55);
}
.snap-delete-confirm-no:hover { background: rgba(255,255,255,0.1); }

/* Restore confirm modal */
.snap-restore-box { max-width: 380px; }
.snap-restore-desc {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.5);
    margin: 0 0 18px;
    line-height: 1.5;
}
.snap-restore-options { display: flex; flex-direction: column; gap: 10px; }
.snap-restore-opt {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 14px 18px;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.2s, background 0.2s;
    color: #e6edf3;
}
.snap-restore-opt:hover { background: rgba(255,255,255,0.08); }
.snap-restore-replace:hover { border-color: rgba(248,81,73,0.4); }
.snap-restore-append:hover  { border-color: rgba(63,185,80,0.4); }
.snap-restore-opt-icon {
    font-size: 1.2rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(255,255,255,0.07);
}
.snap-restore-replace .snap-restore-opt-icon { background: rgba(248,81,73,0.12); color: #f85149; }
.snap-restore-append  .snap-restore-opt-icon { background: rgba(63,185,80,0.12);  color: #3fb950; }
.snap-restore-opt strong { display: block; font-size: 0.88rem; margin-bottom: 2px; }
.snap-restore-opt span   { font-size: 0.76rem; color: rgba(255,255,255,0.45); line-height: 1.4; }

/* Minimal theme */
[data-theme="minimal"] .notif-panel {
    background: rgba(18,18,20,0.97);
}
[data-theme="minimal"] .notif-card {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.06);
}
[data-theme="minimal"] .notif-card.unread {
    background: rgba(176,176,180,0.06);
    border-color: rgba(176,176,180,0.15);
}

/* Instagram theme */
[data-theme="instagram"] .notif-panel {
    background: #ffffff !important;
    backdrop-filter: none !important;
}
[data-theme="instagram"] .notif-panel-header h3 {
    color: #262626 !important;
}
[data-theme="instagram"] .notif-card {
    background: #fafafa !important;
    border-color: rgba(219,219,219,0.6) !important;
}
[data-theme="instagram"] .notif-card.unread {
    background: rgba(0,149,246,0.05) !important;
    border-color: rgba(0,149,246,0.25) !important;
}
[data-theme="instagram"] .notif-title {
    color: #262626 !important;
}
[data-theme="instagram"] .notif-body {
    color: #8e8e8e !important;
}
[data-theme="instagram"] .notif-time {
    color: #c7c7c7 !important;
}
[data-theme="instagram"] .notif-icon {
    background: #efefef !important;
}
[data-theme="instagram"] .notif-empty,
[data-theme="instagram"] .notif-loading {
    color: #8e8e8e !important;
}

@media (max-width: 600px) {
    .notif-panel-inner {
        padding: 14px 12px 18px;
    }
    .notif-card {
        padding: 12px 12px;
        border-radius: 14px;
    }
}

/* Checked tile states */
.tl-item.checked .tl-content {
    border-color: rgba(72,199,142,0.6) !important;
    background: rgba(72,199,142,0.1) !important;
}
.tl-item.checked .tl-dot { background: #48c78e !important; box-shadow: 0 0 10px rgba(72,199,142,0.6); }
.tl-item.checked .tl-time { color: #48c78e; }
.wo-card.checked {
    border-color: rgba(72,199,142,0.5) !important;
    background: rgba(72,199,142,0.08) !important;
}
.fo-card.checked {
    border-color: rgba(72,199,142,0.5) !important;
    background: rgba(72,199,142,0.08) !important;
}
.tl-item.checked .tl-content::after,
.wo-card.checked::after,
.fo-card.checked::after {
    content: '✨';
    position: absolute;
    top: 0.4rem; right: 0.5rem;
    font-size: 1.1rem;
    background: none;
    border: none;
    padding: 0;
    pointer-events: none;
}
.wo-card { position: relative; }
.tl-item.checked .tl-content::after {
    top: 0.4rem;
    left: -0.55rem;
    right: auto;
    transform: none;
    font-size: 1.05rem;
}
.wo-card.checked::after {
    top: 0.4rem;
    left: 0.5rem;
    right: auto;
    transform: none;
    font-size: 1.05rem;
}
.fo-card.checked::after {
    top: 0.4rem;
    left: 0.5rem;
    right: auto;
    transform: none;
    font-size: 1.05rem;
}
.fo-card { position: relative; }

/* ---- Circle mobile adjustments ---- */
@media (max-width: 768px) {
    .circle-switcher { width: 92vw; max-height: 88vh; }
    .circle-view-inner,
    .circle-admin-inner { max-width: 100%; }
    .circle-tabs { padding: 10px 12px 0; }
    .circle-feed { padding: 12px; }
    .circle-view-header,
    .circle-admin-header { padding: 6px 12px 4px; }
}

/* ========== ADMIN CONSOLE ========== */
.admin-console {
    position: fixed;
    top: 58px;
    right: 20px;
    width: 440px;
    max-height: calc(100vh - 80px);
    background: rgba(8, 8, 22, 0.98);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.7);
    display: flex;
    flex-direction: column;
    z-index: 9500;
    overflow: hidden;
}
.admin-console-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 0;
    flex-shrink: 0;
}
.admin-console-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: rgba(255,255,255,0.9);
    letter-spacing: 0.04em;
    margin-right: auto;
}
.admin-console-tabs {
    display: flex;
    gap: 4px;
}
.admin-tab {
    background: none;
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.45);
    border-radius: 20px;
    padding: 3px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    font-family: 'Poppins', sans-serif;
}
.admin-tab.active {
    background: rgba(102,126,234,0.25);
    border-color: rgba(102,126,234,0.5);
    color: #a0b0ff;
}
.admin-console-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.35);
    cursor: pointer;
    font-size: 1rem;
    padding: 0 4px;
    transition: color 0.15s;
    flex-shrink: 0;
}
.admin-console-close:hover { color: rgba(255,255,255,0.8); }
.admin-tab-panel {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    padding: 12px 16px;
}
.admin-add-row {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}
.admin-input {
    flex: 1;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    padding: 8px 12px;
    color: #fff;
    font-size: 0.85rem;
    font-family: 'Poppins', sans-serif;
    outline: none;
}
.admin-input::placeholder { color: rgba(255,255,255,0.3); }
.admin-input:focus { border-color: rgba(102,126,234,0.6); }
.admin-publish-btn {
    background: linear-gradient(135deg, #667eea, #764ba2);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 8px 14px;
    cursor: pointer;
    white-space: nowrap;
    font-family: 'Poppins', sans-serif;
    transition: opacity 0.15s;
}
.admin-publish-btn:hover { opacity: 0.85; }
.admin-item-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.admin-item-list::-webkit-scrollbar { width: 4px; }
.admin-item-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }
.admin-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    padding: 10px 12px;
    transition: background 0.15s;
}
.admin-item:hover { background: rgba(255,255,255,0.07); }
.admin-item-body { flex: 1; min-width: 0; }
.admin-item-text {
    font-size: 0.88rem;
    color: rgba(255,255,255,0.88);
    line-height: 1.4;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.admin-item-meta { font-size: 0.72rem; color: rgba(255,255,255,0.35); }
.admin-item-actions { display: flex; gap: 4px; flex-shrink: 0; }
.admin-edit-btn, .admin-del-btn {
    background: none;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    color: rgba(255,255,255,0.4);
    cursor: pointer;
    font-size: 0.8rem;
    padding: 3px 7px;
    transition: all 0.15s;
}
.admin-edit-btn:hover { background: rgba(102,126,234,0.2); color: #a0b0ff; border-color: rgba(102,126,234,0.4); }
.admin-del-btn:hover  { background: rgba(220,50,50,0.2);   color: #ff8888; border-color: rgba(220,50,50,0.4); }
.admin-empty {
    text-align: center;
    color: rgba(255,255,255,0.28);
    font-size: 0.85rem;
    padding: 24px 0;
}
.admin-console-trigger {
    background: rgba(102,126,234,0.18) !important;
    border-color: rgba(102,126,234,0.4) !important;
    color: #a0b0ff !important;
}
.admin-console-trigger:hover { background: rgba(102,126,234,0.3) !important; }

@media (max-width: 768px) {
    .admin-console {
        right: 8px;
        left: 8px;
        width: auto;
        top: 54px;
    }
}

/* ============================================================
   ONBOARDING WALKTHROUGH  (z-index 10002 — above all modals)
   ============================================================ */

.ob-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 10002;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    gap: 0;
}

/* ── Modal chrome (dots + nav) ── */
.ob-box {
    background: linear-gradient(160deg, #1a1a2e 0%, #16213e 100%);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 18px;
    padding: 20px 24px 20px;
    width: min(500px, 96vw);
    box-shadow: 0 32px 80px rgba(0,0,0,0.65);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── User profile card in Help modal ── */
.ob-user-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
}
.ob-up-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f6d365, #fda085);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 800;
    color: #1a1a2e;
    flex-shrink: 0;
}
.ob-up-info { flex: 1; min-width: 0; }
.ob-up-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: #f6d365;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 5px;
}
.ob-up-score-row { display: flex; align-items: center; gap: 8px; }
.ob-up-bar-wrap {
    flex: 1;
    height: 5px;
    border-radius: 3px;
    background: rgba(255,255,255,0.1);
    overflow: hidden;
}
.ob-up-bar {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #48c78e, #5eead4);
    transition: width 0.6s ease;
}
.ob-up-bar.bar-amber { background: linear-gradient(90deg, #f5b942, #fda085); }
.ob-up-bar.bar-red   { background: linear-gradient(90deg, #ff6b6b, #ff9494); }
.ob-up-label { font-size: 0.72rem; color: rgba(255,255,255,0.5); white-space: nowrap; }

/* ── Step blocks ── */
.ob-step {
    display: none;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    width: min(500px, 96vw);
    margin-bottom: 12px;
}
.ob-step-active { display: flex; }
.ob-intro-shell {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
#obStep0 > :not(.ob-intro-shell),
#obStep1 > :not(.ob-intro-shell),
#obStep2 > :not(.ob-intro-shell),
#obStep3 > :not(.ob-intro-shell),
#obStep4 > :not(.ob-intro-shell) {
    display: none;
}

/* ── Scene stage ── */
.ob-scene {
    width: 100%;
    height: 180px;
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Typography ── */
.ob-title {
    font-size: clamp(1.1rem, 3.5vw, 1.45rem);
    font-weight: 800;
    color: #f6d365;
    margin: 0;
    line-height: 1.25;
}
.ob-desc {
    font-size: clamp(0.8rem, 2.2vw, 0.9rem);
    color: rgba(255,255,255,0.7);
    margin: 0;
    line-height: 1.65;
    max-width: 420px;
}
.ob-desc kbd {
    display: inline-block;
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.28);
    border-radius: 5px;
    padding: 1px 7px;
    font-size: 0.82em;
    font-family: 'Poppins', sans-serif;
    color: #fff;
    letter-spacing: 0.04em;
}

/* ── Progress dots ── */
.ob-dots { display: flex; justify-content: center; gap: 10px; }
.ob-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    border: 2px solid rgba(255,255,255,0.28);
    cursor: pointer;
    transition: all 0.25s ease;
}
.ob-dot-active {
    background: #f6d365;
    border-color: #f6d365;
    transform: scale(1.4);
    box-shadow: 0 0 8px rgba(246,211,101,0.55);
}

/* ── Nav buttons ── */
.ob-nav { display: flex; align-items: center; gap: 10px; }
.ob-btn {
    padding: 9px 22px;
    border-radius: 50px;
    border: none;
    font-family: 'Poppins', sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.ob-btn-ghost {
    background: rgba(255,255,255,0.09);
    border: 1px solid rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.65);
}
.ob-btn-ghost:hover { background: rgba(255,255,255,0.18); color: #fff; }
.ob-btn-primary {
    background: linear-gradient(135deg, #f6d365, #fda085);
    color: #1a1a2e;
    margin-left: auto;
}
.ob-btn-primary:hover { opacity: 0.88; transform: scale(1.03); }
#obSkipBtn { margin-right: auto; }

/* ============================================================
   STEP 0 — ORBIT
   ============================================================ */
.ob-scene-orbit {
    background: radial-gradient(circle at center, #1a1a3e 0%, #0d0d1a 100%);
}
.ob-star {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, #f6d365 50%, #fda085 100%);
    box-shadow: 0 0 20px 8px rgba(246,211,101,0.4), 0 0 40px 16px rgba(246,211,101,0.12);
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    z-index: 2;
    animation: obStarPulse 2.5s ease-in-out infinite;
}
@keyframes obStarPulse {
    0%,100% { box-shadow: 0 0 20px 8px rgba(246,211,101,0.4),0 0 40px 16px rgba(246,211,101,0.12); }
    50%      { box-shadow: 0 0 28px 14px rgba(246,211,101,0.65),0 0 55px 22px rgba(246,211,101,0.25); }
}
.ob-orbit {
    position: absolute; top: 50%; left: 50%;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.07);
    transform-origin: center center;
    transform: translate(-50%,-50%);
}
.ob-orbit-1 { width: 64px;  height: 64px;  animation: obOrbit 3.2s linear infinite; }
.ob-orbit-2 { width: 96px;  height: 96px;  animation: obOrbit 5.0s linear infinite reverse; }
.ob-orbit-3 { width: 128px; height: 128px; animation: obOrbit 7.5s linear infinite; }
.ob-orbit-4 { width: 160px; height: 160px; animation: obOrbit 11s  linear infinite reverse; }
@keyframes obOrbit {
    from { transform: translate(-50%,-50%) rotate(0deg); }
    to   { transform: translate(-50%,-50%) rotate(360deg); }
}
.ob-planet {
    width: 10px; height: 10px;
    border-radius: 50%;
    position: absolute;
    top: -5px; left: 50%;
    transform: translateX(-50%);
}
.ob-planet-gold   { background:#f6d365; box-shadow:0 0 6px rgba(246,211,101,0.7); }
.ob-planet-purple { background:#bc8cff; box-shadow:0 0 6px rgba(188,140,255,0.7); width:12px; height:12px; top:-6px; }
.ob-planet-blue   { background:#58a6ff; box-shadow:0 0 6px rgba(88,166,255,0.7);  width:9px;  height:9px;  top:-4.5px; }
.ob-planet-coral  { background:#fda085; box-shadow:0 0 6px rgba(253,160,133,0.7); width:11px; height:11px; top:-5.5px; }

/* ============================================================
   STEP 1 — LIKE / HEART
   ============================================================ */
.ob-scene-like { background: linear-gradient(135deg, #1a0530 0%, #2d0b0b 100%); }

.ob-card-demo {
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 16px;
    padding: 18px 22px 14px;
    max-width: 280px; width: 85%;
}
.ob-card-text {
    font-size: 0.88rem; color: #fff;
    font-style: italic; margin: 0 0 12px;
    line-height: 1.5;
}
.ob-card-text::before { content: '\201C'; }
.ob-card-text::after  { content: '\201D'; }
.ob-card-foot { display: flex; justify-content: flex-end; }
.ob-heart-btn {
    background: rgba(255,80,80,0.25);
    border: 1px solid rgba(255,107,107,0.5);
    color: #fff; border-radius: 30px;
    padding: 5px 14px; font-size: 0.82rem;
    cursor: default;
    display: flex; align-items: center; gap: 5px;
}
.ob-card-slide { animation: obCardSlide 3.5s ease-in-out infinite; }
@keyframes obCardSlide {
    0%   { opacity:0; transform:translateY(40px); }
    18%  { opacity:1; transform:translateY(0); }
    60%  { opacity:1; transform:translateY(0); }
    78%  { opacity:0; transform:translateY(-20px); }
    100% { opacity:0; transform:translateY(40px); }
}
.ob-card-slide .ob-heart-btn { animation: obHeartPulse 3.5s ease-in-out infinite; }
@keyframes obHeartPulse {
    0%,30% { transform:scale(1);    background:rgba(255,80,80,0.25); }
    40%    { transform:scale(1.35); background:rgba(255,80,80,0.55); box-shadow:0 0 12px rgba(255,107,107,0.5); }
    50%    { transform:scale(1.15); }
    60%    { transform:scale(1.35); }
    70%    { transform:scale(1);    background:rgba(255,80,80,0.35); }
    100%   { transform:scale(1);    background:rgba(255,80,80,0.25); }
}

/* ============================================================
   STEP 2 — FRIENDS / THINK
   ============================================================ */
.ob-scene-friends {
    background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
    flex-direction: column; gap: 14px;
}
.ob-friend-pair {
    display: flex; gap: 32px;
    animation: obFriendsAppear 4s ease-in-out infinite;
}
@keyframes obFriendsAppear {
    0%   { opacity:0; transform:scale(0.7); }
    20%  { opacity:1; transform:scale(1); }
    75%  { opacity:1; transform:scale(1); }
    90%  { opacity:0; transform:scale(0.9); }
    100% { opacity:0; transform:scale(0.7); }
}
.ob-avatar { display:flex; flex-direction:column; align-items:center; gap:6px; }
.ob-avatar span {
    width:44px; height:44px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:1.1rem; color:#1a1a2e;
}
.ob-av-a { background: linear-gradient(135deg,#f6d365,#fda085); }
.ob-av-b { background: linear-gradient(135deg,#bc8cff,#58a6ff); }
.ob-av-label { font-size:0.72rem; color:rgba(255,255,255,0.65); font-weight:600; }
.ob-av-link  { font-size:0.62rem; color:rgba(246,211,101,0.7); letter-spacing:0.02em; }
.ob-friend-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}
.ob-friend-pill {
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid rgba(246,211,101,0.34);
    background: rgba(246,211,101,0.12);
    color: #f6d365;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.ob-friend-pill-soft {
    border-color: rgba(188,140,255,0.34);
    background: rgba(188,140,255,0.12);
    color: #d6c0ff;
}
.ob-think-btn {
    padding:8px 18px; border-radius:30px;
    border:2px solid rgba(255,255,255,0.45);
    background:rgba(255,255,255,0.18);
    color:#fff; font-size:0.85rem; font-weight:600;
    font-family:'Poppins',sans-serif; cursor:default;
}
.ob-think-pulse { animation: obThinkPulse 4s ease-in-out infinite; }
@keyframes obThinkPulse {
    0%,25%  { transform:scale(1);    box-shadow:none; }
    40%     { transform:scale(1.18); box-shadow:0 0 18px rgba(188,140,255,0.6); border-color:#bc8cff; background:rgba(188,140,255,0.3); }
    55%     { transform:scale(1.08); }
    70%     { transform:scale(1.18); box-shadow:0 0 18px rgba(188,140,255,0.6); }
    85%,100%{ transform:scale(1);    box-shadow:none; border-color:rgba(255,255,255,0.45); background:rgba(255,255,255,0.18); }
}

/* ============================================================
   STEP 3 — EDIT MODE
   ============================================================ */
.ob-scene-edit {
    background: linear-gradient(135deg,#0d1117 0%,#1a1a2e 100%);
    flex-direction:column; gap:12px; position:relative;
}
.ob-username-label {
    background: rgba(246,211,101,0.12);
    border: 1px solid rgba(246,211,101,0.35);
    color: #f6d365; border-radius:20px;
    padding:6px 18px; font-size:0.9rem; font-weight:700;
    cursor:default; position:relative; z-index:1;
}
.ob-click-anim { animation: obClickFlash 3.8s ease-in-out infinite; }
@keyframes obClickFlash {
    0%,15%  { background:rgba(246,211,101,0.12); transform:scale(1); }
    30%     { background:rgba(246,211,101,0.38); transform:scale(0.96); box-shadow:0 0 14px rgba(246,211,101,0.4); }
    38%     { background:rgba(246,211,101,0.12); transform:scale(1); }
    100%    { background:rgba(246,211,101,0.12); transform:scale(1); }
}
.ob-cursor {
    width:14px; height:14px; border-radius:50%;
    background:rgba(255,255,255,0.8); border:2px solid #fff;
    position:absolute; z-index:2; pointer-events:none;
    box-shadow:0 2px 6px rgba(0,0,0,0.4);
}
.ob-cursor-anim { animation: obCursorMove 3.8s ease-in-out infinite; }
@keyframes obCursorMove {
    0%   { opacity:0;   top:75%; left:55%; }
    12%  { opacity:1;   top:75%; left:55%; }
    28%  { opacity:1;   top:38%; left:49%; transform:scale(0.85); }
    34%  { opacity:1;   top:38%; left:49%; transform:scale(1.15); }
    40%  { opacity:0.5; top:38%; left:49%; transform:scale(1); }
    55%  { opacity:0; }
    100% { opacity:0;   top:75%; left:55%; }
}
.ob-add-btns { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.ob-add-chip {
    background:rgba(72,199,142,0.18);
    border:1px solid rgba(72,199,142,0.4);
    color:#48c78e; border-radius:30px;
    padding:5px 13px; font-size:0.76rem; font-weight:600;
}
.ob-chip-1 { animation:obChipBounce 3.8s ease-in-out infinite 0.45s; opacity:0; }
.ob-chip-2 { animation:obChipBounce 3.8s ease-in-out infinite 0.62s; opacity:0; }
.ob-chip-3 { animation:obChipBounce 3.8s ease-in-out infinite 0.79s; opacity:0; }
@keyframes obChipBounce {
    0%,32%  { opacity:0; transform:scale(0.5) translateY(10px); }
    45%     { opacity:1; transform:scale(1.12) translateY(-3px); }
    52%     { opacity:1; transform:scale(1) translateY(0); }
    78%     { opacity:1; transform:scale(1) translateY(0); }
    88%     { opacity:0; transform:scale(0.8) translateY(-8px); }
    100%    { opacity:0; transform:scale(0.5) translateY(10px); }
}

/* ============================================================
   STEP 4 — GALLERY
   ============================================================ */
.ob-scene-gallery {
    background: linear-gradient(135deg,#0f0c29 0%,#1a1a2e 100%);
    flex-direction:column;
}
.ob-folder { display:flex; flex-direction:column; align-items:flex-start; }
.ob-folder-tab {
    width:60px; height:16px;
    background:#f6d365; border-radius:6px 6px 0 0;
    margin-left:20px;
    animation:obFolderTab 4s ease-in-out infinite;
}
@keyframes obFolderTab {
    0%,10%  { opacity:0; transform:scaleX(0.4); transform-origin:left; }
    25%     { opacity:1; transform:scaleX(1); }
    85%,100%{ opacity:1; }
}
.ob-folder-body {
    width:180px; min-height:90px;
    background:rgba(246,211,101,0.08);
    border:2px solid rgba(246,211,101,0.3);
    border-radius:0 10px 10px 10px;
    display:grid; grid-template-columns:1fr 1fr;
    gap:6px; padding:10px;
    animation:obFolderBody 4s ease-in-out infinite;
}
@keyframes obFolderBody {
    0%,15%  { opacity:0; transform:scaleY(0.2); transform-origin:top; }
    30%     { opacity:1; transform:scaleY(1); }
    85%,100%{ opacity:1; }
}
.ob-photo { border-radius:6px; height:32px; }
.ob-ph-1 { background:linear-gradient(135deg,#667eea,#764ba2); animation:obPhotoSlide 4s ease-in-out infinite 0.35s; opacity:0; }
.ob-ph-2 { background:linear-gradient(135deg,#f6d365,#fda085); animation:obPhotoSlide 4s ease-in-out infinite 0.50s; opacity:0; }
.ob-ph-3 { background:linear-gradient(135deg,#48c78e,#38ef7d); animation:obPhotoSlide 4s ease-in-out infinite 0.65s; opacity:0; }
.ob-ph-4 { background:linear-gradient(135deg,#58a6ff,#4ecdc4); animation:obPhotoSlide 4s ease-in-out infinite 0.80s; opacity:0; }
@keyframes obPhotoSlide {
    0%,30%  { opacity:0; transform:scale(0.5); }
    48%     { opacity:1; transform:scale(1.06); }
    55%,85% { opacity:1; transform:scale(1); }
    100%    { opacity:0; transform:scale(0.5); }
}

/* ============================================================
   STEP 5 — SHARE TO CIRCLE
   ============================================================ */
.ob-scene-share {
    background: linear-gradient(135deg,#0d1117 0%,#16213e 100%);
    flex-direction:row; justify-content:center;
    align-items:center; gap:12px; padding:0 20px;
}
.ob-share-card {
    background:rgba(255,255,255,0.14);
    border:1px solid rgba(255,255,255,0.22);
    border-radius:12px; padding:10px 14px;
    font-size:0.78rem; color:#fff;
    max-width:145px; text-align:center;
    font-style:italic; flex-shrink:0;
}
.ob-share-arrow {
    font-size:1.6rem; color:#58a6ff; flex-shrink:0;
    animation:obArrowPulse 3s ease-in-out infinite;
}
@keyframes obArrowPulse {
    0%,100% { opacity:0.4; transform:translateX(0); }
    50%     { opacity:1;   transform:translateX(5px); }
}
.ob-circle-avatar {
    width:52px; height:52px; border-radius:50%;
    background:linear-gradient(135deg,#667eea,#764ba2);
    display:flex; align-items:center; justify-content:center;
    font-size:1.5rem; flex-shrink:0;
    border:2px solid rgba(102,126,234,0.5);
    animation:obCircleRing 3s ease-in-out infinite;
}
@keyframes obCircleRing {
    0%,30% { box-shadow:0 0 0 0 rgba(102,126,234,0.4); }
    60%    { box-shadow:0 0 0 12px rgba(102,126,234,0); }
    100%   { box-shadow:0 0 0 0 rgba(102,126,234,0); }
}
.ob-share-fly { animation:obShareFly 3s ease-in-out infinite; }
@keyframes obShareFly {
    0%   { opacity:0; transform:translateX(-30px) scale(0.9); }
    18%  { opacity:1; transform:translateX(0) scale(1); }
    55%  { opacity:1; transform:translateX(0) scale(1); }
    78%  { opacity:0; transform:translateX(40px) scale(0.8); }
    100% { opacity:0; transform:translateX(-30px) scale(0.9); }
}

/* ============================================================
   STEP 1 — NAVIGATION (mobile vs desktop)
   ============================================================ */
.ob-scene-nav {
    background: linear-gradient(135deg,#0d1117 0%,#1a1a2e 100%);
    align-items: center;
    justify-content: center;
    padding: 12px;
}
.ob-nav-split {
    display: flex;
    align-items: flex-start;
    gap: 0;
    width: 100%;
    max-width: 360px;
}
.ob-nav-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 0 8px;
}
.ob-device-icon { font-size: 1.6rem; margin-bottom: 4px; }
.ob-nav-chip {
    font-size: 0.64rem;
    font-weight: 700;
    color: rgba(255,255,255,0.85);
    background: rgba(102,126,234,0.2);
    border: 1px solid rgba(102,126,234,0.35);
    border-radius: 12px;
    padding: 3px 8px;
    text-align: center;
    white-space: nowrap;
}
.ob-nav-sub {
    font-size: 0.6rem;
    color: rgba(255,255,255,0.38);
    text-align: center;
    margin-bottom: 4px;
}
.ob-kbd {
    display: inline-block;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 0.72rem;
    font-family: monospace;
    color: #f6d365;
}
.ob-nav-divider {
    width: 1px;
    align-self: stretch;
    background: rgba(255,255,255,0.1);
    margin: 20px 0;
}

/* ============================================================
   STEP 5 — CIRCLES
   ============================================================ */
.ob-scene-circles {
    background: linear-gradient(135deg,#0a0a20 0%,#0f1628 100%);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px;
}
.ob-circles-row {
    display: flex;
    align-items: center;
    gap: 14px;
}
.ob-circle-orb {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    background: rgba(102,126,234,0.18);
    border: 2px solid rgba(102,126,234,0.4);
    animation: obCOPop 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
}
.ob-co-1 { animation-delay: 0.1s; }
.ob-co-center {
    width: 62px;
    height: 62px;
    font-size: 1.7rem;
    background: rgba(246,211,101,0.18);
    border-color: rgba(246,211,101,0.55);
    box-shadow: 0 0 18px rgba(246,211,101,0.25);
    animation-delay: 0s;
}
.ob-co-3 { animation-delay: 0.2s; }
@keyframes obCOPop {
    from { transform: scale(0); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}
.ob-circles-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: rgba(246,211,101,0.7);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.ob-circles-feed {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    max-width: 240px;
}
.ob-cf-item {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 0.72rem;
    color: rgba(255,255,255,0.7);
    animation: obCFSlide 0.5s ease both;
}
.ob-cf-1 { animation-delay: 0.35s; }
.ob-cf-2 { animation-delay: 0.5s; }
.ob-cf-3 { animation-delay: 0.65s; }
@keyframes obCFSlide {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ob-scene-life-system {
    background:
        radial-gradient(circle at top left, rgba(72,199,142,0.16), transparent 32%),
        radial-gradient(circle at bottom right, rgba(246,211,101,0.14), transparent 28%),
        linear-gradient(135deg, #0f1722 0%, #151f32 100%);
    flex-direction: column;
    gap: 14px;
    padding: 16px;
}
.ob-life-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.ob-life-card {
    min-height: 58px;
    padding: 12px 12px 10px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: left;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    animation: obLifeFloat 4.8s ease-in-out infinite;
}
.ob-life-card strong {
    color: #fff;
    font-size: 0.8rem;
    line-height: 1.2;
}
.ob-life-card span {
    color: rgba(255,255,255,0.58);
    font-size: 0.64rem;
    line-height: 1.35;
}
.ob-life-card-routine { border-color: rgba(88,166,255,0.32); }
.ob-life-card-workout { border-color: rgba(72,199,142,0.34); animation-delay: 0.18s; }
.ob-life-card-food { border-color: rgba(246,211,101,0.34); animation-delay: 0.34s; }
.ob-life-card-plan { border-color: rgba(188,140,255,0.34); animation-delay: 0.5s; }
@keyframes obLifeFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}
.ob-life-track {
    width: min(100%, 280px);
    height: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
}
.ob-life-track-fill {
    width: 62%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #58a6ff, #48c78e, #f6d365);
    background-size: 180% 100%;
    animation: obLifeTrackMove 3.4s linear infinite;
}
@keyframes obLifeTrackMove {
    from { background-position: 0% 50%; }
    to { background-position: 180% 50%; }
}

.ob-scene-app-nav {
    background:
        radial-gradient(circle at top center, rgba(246,211,101,0.14), transparent 24%),
        linear-gradient(180deg, #141723 0%, #1b1f30 100%);
    flex-direction: column;
    justify-content: space-between;
    padding: 16px 14px 12px;
}
.ob-app-top {
    width: 100%;
    display: grid;
    grid-template-columns: 52px 1fr 52px;
    align-items: center;
    gap: 10px;
}
.ob-app-orb,
.ob-app-menu {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(22,24,36,0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 24px rgba(0,0,0,0.28);
}
.ob-app-orb {
    position: relative;
}
.ob-app-orb::after {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    border: 1px solid rgba(188,140,255,0.22);
}
.ob-app-orb span {
    color: #ffffff;
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1;
}
.ob-app-menu {
    flex-direction: column;
    gap: 4px;
}
.ob-app-menu span {
    width: 16px;
    height: 2px;
    border-radius: 999px;
    background: rgba(255,255,255,0.82);
}
.ob-app-wordmark {
    text-align: center;
    color: #fff;
    font-size: 1.08rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    animation: obWordmarkGlow 2.8s ease-in-out infinite;
}
@keyframes obWordmarkGlow {
    0%, 100% { opacity: 0.82; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(-1px); }
}
.ob-app-bottom {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    padding: 8px 10px;
    border-radius: 28px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.05);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
.ob-app-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 54px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(17,19,29,0.84);
    color: rgba(255,255,255,0.76);
    animation: obAppTabFloat 4.6s ease-in-out infinite;
}
.ob-app-tab:nth-child(2) { animation-delay: 0.12s; }
.ob-app-tab:nth-child(3) { animation-delay: 0.24s; }
.ob-app-tab:nth-child(4) { animation-delay: 0.36s; }
.ob-app-tab:nth-child(5) { animation-delay: 0.48s; }
@keyframes obAppTabFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}
.ob-app-tab-icon {
    font-size: 1rem;
    line-height: 1;
}
.ob-scene-app-nav .ob-app-tab:nth-child(1) .ob-app-tab-icon,
.ob-scene-app-nav .ob-app-tab:nth-child(2) .ob-app-tab-icon {
    font-size: 0;
}
.ob-scene-app-nav .ob-app-tab:nth-child(1) .ob-app-tab-icon::before,
.ob-scene-app-nav .ob-app-tab:nth-child(2) .ob-app-tab-icon::before {
    font-size: 1rem;
    line-height: 1;
}
.ob-scene-app-nav .ob-app-tab:nth-child(1) .ob-app-tab-icon::before {
    content: '\2606';
}
.ob-scene-app-nav .ob-app-tab:nth-child(2) .ob-app-tab-icon::before {
    content: '\25CB';
}
.ob-app-tab-label {
    font-size: 0.54rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.ob-app-tab-center {
    background: linear-gradient(135deg, #f6d365, #fda085);
    color: #17131d;
    border-color: rgba(246,211,101,0.4);
    box-shadow: 0 10px 24px rgba(246,211,101,0.18);
}
.ob-app-tab-center .ob-app-tab-icon {
    font-size: 1.25rem;
    font-weight: 800;
}

/* ── Mobile ── */
@media (max-width: 600px) {
    .ob-box   { padding:16px; gap:14px; }
    .ob-scene { height:150px; }
    .ob-title { font-size:1rem; }
    .ob-desc  { font-size:0.78rem; }
    .ob-btn   { padding:8px 16px; font-size:0.82rem; }
    .ob-orbit-3 { width:110px; height:110px; }
    .ob-orbit-4 { width:140px; height:140px; }
    .ob-scene-share { flex-direction:column; gap:6px; padding:8px; }
    .ob-share-card  { max-width:200px; }
    .ob-share-arrow { animation:obArrowPulseV 3s ease-in-out infinite; }
    .ob-life-grid {
        gap: 8px;
    }
    .ob-life-card {
        min-height: 52px;
        padding: 10px;
        border-radius: 14px;
    }
    .ob-life-card strong {
        font-size: 0.74rem;
    }
    .ob-life-card span {
        font-size: 0.6rem;
    }
    .ob-scene-app-nav {
        padding: 12px 10px 10px;
    }
    .ob-app-top {
        grid-template-columns: 44px 1fr 44px;
        gap: 8px;
    }
    .ob-app-orb,
    .ob-app-menu {
        width: 44px;
        height: 44px;
    }
    .ob-app-wordmark {
        font-size: 0.94rem;
    }
    .ob-app-bottom {
        gap: 6px;
        padding: 7px 8px;
        border-radius: 24px;
    }
    .ob-app-tab {
        min-height: 48px;
        border-radius: 18px;
    }
    .ob-app-tab-label {
        font-size: 0.48rem;
    }
    @keyframes obArrowPulseV {
        0%,100% { opacity:0.4; transform:rotate(90deg) translateX(0); }
        50%     { opacity:1;   transform:rotate(90deg) translateX(5px); }
    }
}

/* ============================================================
   HELP BUTTON (auth bar — always visible, re-opens onboarding)
   ============================================================ */
.help-btn {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.65);
    border-radius: 50%;
    width: 28px; height: 28px;
    font-size: 0.82rem; font-weight: 700;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s ease;
    font-family: 'Poppins', sans-serif;
    flex-shrink: 0;
}
.help-btn:hover {
    background: rgba(246,211,101,0.18);
    border-color: rgba(246,211,101,0.5);
    color: #f6d365;
    transform: scale(1.08);
}

/* ============================================================
   CIRCLE ONBOARDING (3 steps — shown on first circle entry)
   ============================================================ */

/* Slightly different tint to distinguish from main onboarding */
.ob-circle-overlay { background: rgba(0,0,0,0.88); }
.ob-circle-box { border-color: rgba(102,126,234,0.3); }
.ob-circle-box::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, #667eea, #764ba2, #bc8cff);
    border-radius: 18px 18px 0 0;
}

/* ── Scene 0: Circle intro — orbiting members ── */
.ob-scene-circle-intro {
    background: radial-gradient(circle at center, #1a0a3e 0%, #0d0d1a 100%);
    position: relative;
}
.obc-ring {
    position: absolute; top: 50%; left: 50%;
    border-radius: 50%;
    border: 1px solid rgba(102,126,234,0.25);
    transform: translate(-50%,-50%);
    animation: obcOrbit 8s linear infinite;
}
.obc-ring-outer { width: 148px; height: 148px; }
.obc-ring-inner { width: 100px; height: 100px; animation-direction: reverse; animation-duration: 5s; }
@keyframes obcOrbit {
    from { transform: translate(-50%,-50%) rotate(0deg); }
    to   { transform: translate(-50%,-50%) rotate(360deg); }
}
.obc-center-icon {
    font-size: 2rem; z-index: 2; position: relative;
    animation: obcPulse 3s ease-in-out infinite;
}
@keyframes obcPulse {
    0%,100% { filter: drop-shadow(0 0 8px rgba(102,126,234,0.5)); }
    50%     { filter: drop-shadow(0 0 18px rgba(102,126,234,0.9)); }
}
/* Member avatars orbit the ring */
.obc-member {
    position: absolute;
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem; font-weight: 800; color: #1a1a2e;
}
.obc-member span { width: 100%; height: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.obc-m1 { top: calc(50% - 16px - 74px); left: calc(50% - 16px); }
.obc-m1 span { background: linear-gradient(135deg,#f6d365,#fda085); }
.obc-m2 { top: calc(50% - 16px); left: calc(50% - 16px + 74px); }
.obc-m2 span { background: linear-gradient(135deg,#bc8cff,#667eea); }
.obc-m3 { top: calc(50% - 16px + 74px); left: calc(50% - 16px); }
.obc-m3 span { background: linear-gradient(135deg,#48c78e,#4ecdc4); }
.obc-m4 { top: calc(50% - 16px); left: calc(50% - 16px - 74px); }
.obc-m4 span { background: linear-gradient(135deg,#fda085,#f85149); }
/* Each member pulses in with a stagger */
.obc-m1 { animation: obcMemberAppear 4s ease-in-out infinite 0.0s; opacity:0; }
.obc-m2 { animation: obcMemberAppear 4s ease-in-out infinite 0.3s; opacity:0; }
.obc-m3 { animation: obcMemberAppear 4s ease-in-out infinite 0.6s; opacity:0; }
.obc-m4 { animation: obcMemberAppear 4s ease-in-out infinite 0.9s; opacity:0; }
@keyframes obcMemberAppear {
    0%,15%  { opacity:0; transform:scale(0.4); }
    35%     { opacity:1; transform:scale(1.1); }
    45%     { opacity:1; transform:scale(1); }
    80%,100%{ opacity:1; transform:scale(1); }
}

/* ── Scene 1: Feed — posts sliding in ── */
.ob-scene-circle-share {
    background: linear-gradient(135deg, #0d1117 0%, #161b22 100%);
    align-items: flex-start;
    padding: 12px 16px;
    overflow: hidden;
}
.obc-feed { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.obc-post {
    display: flex; align-items: center; gap: 10px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px; padding: 8px 12px;
    opacity: 0;
}
.obc-post-1 { animation: obcPostSlide 4.5s ease-in-out infinite 0.2s; }
.obc-post-2 { animation: obcPostSlide 4.5s ease-in-out infinite 0.55s; }
.obc-post-3 { animation: obcPostSlide 4.5s ease-in-out infinite 0.9s; }
@keyframes obcPostSlide {
    0%,10%  { opacity:0; transform:translateX(-20px); }
    28%     { opacity:1; transform:translateX(0); }
    75%,100%{ opacity:1; transform:translateX(0); }
}
.obc-post-av {
    width: 28px; height: 28px; border-radius: 50%;
    background: linear-gradient(135deg,#667eea,#764ba2);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.72rem; font-weight: 800; color: #fff;
    flex-shrink: 0;
}
.obc-post-body { display: flex; flex-direction: column; gap: 2px; }
.obc-post-type { font-size: 0.65rem; color: rgba(255,255,255,0.45); }
.obc-post-text { font-size: 0.78rem; color: rgba(255,255,255,0.85); font-style: italic; }

/* ── Scene 2: Interact / Like ── */
.ob-scene-circle-like {
    background: linear-gradient(135deg, #0d1117 0%, #1a0530 100%);
}
.obc-interact-card {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 14px; padding: 14px 18px;
    max-width: 280px; width: 88%;
    display: flex; flex-direction: column; gap: 10px;
    animation: obcCardPop 4s ease-in-out infinite;
}
@keyframes obcCardPop {
    0%   { opacity:0; transform:scale(0.85); }
    18%  { opacity:1; transform:scale(1); }
    80%,100% { opacity:1; transform:scale(1); }
}
.obc-ic-header { display:flex; align-items:center; gap:8px; }
.obc-av-sm { width:26px; height:26px; flex-shrink:0; font-size:0.7rem; }
.obc-ic-meta { font-size:0.7rem; color:rgba(255,255,255,0.45); }
.obc-ic-text { font-size:0.85rem; color:#fff; font-style:italic; line-height:1.4; }
.obc-ic-actions { display:flex; }
.obc-like-btn {
    background:rgba(255,80,80,0.2);
    border:1px solid rgba(255,107,107,0.4);
    color:#fff; border-radius:30px;
    padding:5px 14px; font-size:0.8rem;
    cursor:default;
    display:flex; align-items:center; gap:5px;
}
.obc-like-anim { animation: obcLikePulse 4s ease-in-out infinite 0.8s; }
@keyframes obcLikePulse {
    0%,35%  { transform:scale(1);    background:rgba(255,80,80,0.2); }
    50%     { transform:scale(1.3);  background:rgba(255,80,80,0.5); box-shadow:0 0 14px rgba(255,107,107,0.5); }
    65%     { transform:scale(1);    background:rgba(255,80,80,0.3); }
    100%    { transform:scale(1);    background:rgba(255,80,80,0.2); }
}

/* ==========================================================
   MOBILE PROFILE ORB + BOTTOM SHEET
   ========================================================== */

/* ---- Profile Orb (hidden on desktop, visible on mobile) ---- */
.profile-orb {
    display: flex; /* visible on all screen sizes */
    position: fixed;
    top: 10px;
    left: 12px;
    right: auto;
    z-index: 9998;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(20, 20, 40, 0.85);
    border: none;
    padding: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 2px 16px rgba(0,0,0,0.4);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    -webkit-tap-highlight-color: transparent;
}
.profile-orb:active { transform: scale(0.92); }
.profile-orb.ms-open { box-shadow: 0 0 0 2px rgba(246,211,101,0.6), 0 4px 20px rgba(0,0,0,0.5); }

/* Status ring on profile orb — same conic-gradient technique as friend orbs */
.profile-orb-has-status::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    padding: 3px;
    background: conic-gradient(#f9a825 0%, #e91e63 30%, #9c27b0 55%, #3f51b5 78%, #f9a825 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: orb-status-ring-spin 3s linear infinite;
    pointer-events: none;
    z-index: 1;
}
.mobile-menu-btn {
    display: flex; /* visible on all screen sizes */
    position: fixed;
    top: 10px;
    right: 12px;
    z-index: 9998;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(20, 20, 40, 0.85);
    border: none;
    padding: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 2px 16px rgba(0,0,0,0.4);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    -webkit-tap-highlight-color: transparent;
}
.mobile-menu-btn > span:not(.mobile-menu-notif-dot) {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: rgba(255,255,255,0.86);
    transition: transform 0.22s ease, opacity 0.22s ease;
}
.mobile-menu-btn.ms-open > span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-menu-btn.ms-open > span:nth-child(2) { opacity: 0; }
.mobile-menu-btn.ms-open > span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu-notif-dot {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ff6b6b;
    border: 1.5px solid rgba(20,20,40,0.9);
    animation: orbNotifPulse 2s ease infinite;
    pointer-events: none;
    z-index: 2;
}
/* Gold pulsing ring when edit mode is active */
body.edit-mode .profile-orb {
    box-shadow: 0 0 0 3px rgba(246,211,101,0.75), 0 0 14px rgba(246,211,101,0.35);
    animation: orbEditPulse 2s ease-in-out infinite;
}
@keyframes orbEditPulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(246,211,101,0.75), 0 0 14px rgba(246,211,101,0.35); }
    50%       { box-shadow: 0 0 0 4px rgba(246,211,101,0.5),  0 0 22px rgba(246,211,101,0.55); }
}

/* Desktop edit chip in auth bar */
.auth-edit-chip {
    font-size: 0.68rem;
    font-weight: 700;
    background: rgba(246,211,101,0.15);
    border: 1px solid rgba(246,211,101,0.4);
    color: #f6d365;
    border-radius: 20px;
    padding: 2px 9px;
    letter-spacing: 0.03em;
    vertical-align: middle;
}

.orb-ring-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
.orb-ring-bg   { stroke: rgba(255,255,255,0.12); }
.orb-ring-fill { stroke: #48c78e; stroke-linecap: round; transition: stroke-dashoffset 0.6s ease, stroke 0.4s ease; }
.orb-ring-fill.ring-amber { stroke: #f5b942; }
.orb-ring-fill.ring-red   { stroke: #ff6b6b; }

.orb-initial {
    position: relative;
    font-size: 1.68rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    pointer-events: none;
    user-select: none;
}

.orb-notif-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ff6b6b;
    border: 1.5px solid rgba(20,20,40,0.9);
    animation: orbNotifPulse 2s ease infinite;
}
@keyframes orbNotifPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.7; transform: scale(1.25); }
}

/* ---- Sheet Backdrop ---- */
.ms-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(0,0,0,0);
    transition: background 0.3s ease;
}
.ms-backdrop.ms-open {
    display: block;
    background: rgba(0,0,0,0.28);
}

/* ---- Menu Sheet ---- */
.mobile-sheet {
    position: fixed;
    z-index: 9999;
    background: transparent;
    transition: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1),
                opacity 0.3s ease;
}
/* Unified: top-right dropdown on all screen sizes */
.mobile-sheet {
    top: 74px;
    right: 12px;
    left: auto;
    bottom: auto;
    width: 320px;
    padding: 0;
    transform: translateY(-10px) scale(0.97);
    opacity: 0;
    pointer-events: none;
    max-height: calc(100vh - 90px);
    overflow: visible;
}
.mobile-sheet.ms-open {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
}
.mobile-sheet #msLoggedIn {
    background: var(--sheet-bg, rgba(28,28,46,0.97));
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--sheet-border, rgba(255,255,255,0.11));
    border-radius: 20px;
    padding: 12px;
    max-height: calc(100vh - 90px);
    overflow-y: auto;
    overflow-x: hidden;
}
.mobile-sheet #msLoggedIn::-webkit-scrollbar { width: 4px; }
.mobile-sheet #msLoggedIn::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 999px; }
.mobile-sheet .ms-admin-btn {
    margin-top: 8px;
    border-radius: 14px;
}
/* Mobile: slightly wider */
@media (max-width: 768px) {
    .mobile-sheet {
        top: 74px;
        right: 10px;
        width: calc(100vw - 20px);
        max-width: 400px;
    }
}
/* Guest (logged-out) sheet: fullscreen centered overlay — unchanged */
.mobile-sheet.ms-guest {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
    max-height: none;
    padding: 20px;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(8px);
    border-radius: 0;
}
.mobile-sheet.ms-guest.ms-open {
    transform: translateY(0);
}
.mobile-sheet.ms-guest #msLoggedOut {
    width: 100%;
    max-width: 360px;
    background: rgba(20, 20, 40, 0.92);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 20px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.mobile-sheet .ms-welcome-art,
.mobile-sheet .ms-welcome-text { text-align: center; }
/* CLI trigger bar inside menu sheet */
.ms-cli-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    margin-bottom: 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05);
    transition: background 0.15s ease, border-color 0.15s ease;
}
.ms-cli-trigger:hover, .ms-cli-trigger:active, .ms-cli-trigger:focus-within {
    background: rgba(255,255,255,0.10);
    border-color: rgba(246,211,101,0.35);
}
.ms-cli-icon {
    font-size: 1rem;
    flex: 0 0 auto;
}
.ms-cli-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.88);
    font-family: 'Poppins', sans-serif;
}
.ms-cli-input::placeholder {
    color: rgba(255,255,255,0.35);
}
.ms-cli-kbd {
    flex: 0 0 auto;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    color: rgba(255,255,255,0.35);
    font-size: 0.65rem;
    font-family: 'Space Mono', monospace;
    padding: 2px 7px;
    line-height: 1.4;
}

.ms-cli-results {
    display: none;
    flex-direction: column;
    gap: 10px;
    margin: 12px 0 14px;
    max-height: min(48vh, 420px);
    overflow-y: auto;
}
.ms-cli-results::-webkit-scrollbar {
    width: 6px;
}
.ms-cli-results::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.14);
    border-radius: 999px;
}
.ms-cli-results-group {
    padding: 4px 8px 0;
    color: rgba(255,255,255,0.32);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.ms-cli-result-item {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.9);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.ms-cli-result-item:hover,
.ms-cli-result-item.ms-cli-active {
    background: rgba(255,255,255,0.10);
    border-color: rgba(246,211,101,0.28);
}
.ms-cli-result-item:active {
    transform: scale(0.985);
}
.ms-cli-result-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.08);
    font-size: 1.05rem;
    flex: 0 0 auto;
}
.ms-cli-result-copy {
    flex: 1;
    min-width: 0;
}
.ms-cli-result-label {
    display: block;
    font-size: 0.92rem;
    font-weight: 600;
    color: #fff;
}
.ms-cli-result-hint {
    display: block;
    margin-top: 2px;
    font-size: 0.72rem;
    color: rgba(255,255,255,0.45);
}
.ms-cli-result-slash {
    flex: 0 0 auto;
    color: rgba(246,211,101,0.52);
    font-size: 0.7rem;
    font-family: 'Space Mono', monospace;
}
.ms-cli-result-empty {
    justify-content: center;
    color: rgba(255,255,255,0.46);
    cursor: default;
}
.ms-trending-header {
    color: rgba(246,211,101,0.7);
    letter-spacing: 0.04em;
}
.ms-trending-item {
    border-left: 2px solid rgba(246,211,101,0.18);
}
.ms-trending-item:hover,
.ms-trending-item:focus {
    border-left-color: rgba(246,211,101,0.55);
}
.ms-trending-count {
    display: inline-block;
    font-size: 0.62rem;
    color: rgba(246,211,101,0.65);
    background: rgba(246,211,101,0.1);
    border-radius: 4px;
    padding: 1px 5px;
    margin-left: 6px;
    vertical-align: middle;
    font-family: 'Space Mono', monospace;
}
.ms-cli-result-persona-badge {
    flex: 0 0 auto;
    font-size: 0.65rem;
    font-family: 'Space Mono', monospace;
    color: rgba(255,255,255,0.5);
    background: rgba(246,211,101,0.12);
    border: 1px solid rgba(246,211,101,0.25);
    border-radius: 4px;
    padding: 1px 5px;
    letter-spacing: 0.02em;
}

/* ---- Share Link Button (share picker footer) ---- */
.share-modal-link-btn {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 14px;
    color: rgba(255,255,255,0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.12s;
    padding: 0;
}
.share-modal-link-btn:hover {
    background: rgba(246,211,101,0.12);
    border-color: rgba(246,211,101,0.35);
    color: #f6d365;
    transform: scale(1.06);
}
.share-modal-link-btn:active { transform: scale(0.96); }

/* ---- Share Link Bar (shown below the footer after generating) ---- */
.share-link-bar {
    padding: 12px 16px;
    border-top: 1px solid rgba(255,255,255,0.08);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.share-link-bar-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(255,255,255,0.4);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.share-link-bar-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.share-link-input {
    flex: 1;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 10px;
    color: rgba(255,255,255,0.9);
    font-size: 0.8rem;
    padding: 9px 12px;
    font-family: 'Space Mono', monospace;
    outline: none;
    min-width: 0;
    user-select: all;
    -webkit-user-select: all;
}
.share-link-input:focus { border-color: rgba(246,211,101,0.4); }
.share-link-copy-btn {
    flex: 0 0 auto;
    background: rgba(246,211,101,0.15);
    border: 1px solid rgba(246,211,101,0.3);
    border-radius: 10px;
    color: #f6d365;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 9px 16px;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}
.share-link-copy-btn:hover { background: rgba(246,211,101,0.25); }

/* ---- Shared Post Viewer Modal ---- */
.shared-post-overlay {
    position: fixed; inset: 0; z-index: 9800;
    background: rgba(0,0,0,0.65);
    display: flex; align-items: center; justify-content: center;
    padding: 20px 16px;
}
.shared-post-sheet {
    background: var(--sheet-bg, rgba(22,22,38,0.99));
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 24px;
    width: 100%; max-width: 440px;
    padding: 12px 22px 28px;
    position: relative;
    display: flex; flex-direction: column; gap: 14px;
    max-height: 88vh;
    overflow-y: auto;
    touch-action: pan-y;
}
.shared-post-drag-handle {
    width: 36px; height: 4px;
    background: rgba(255,255,255,0.18);
    border-radius: 2px;
    margin: 2px auto 4px;
    flex-shrink: 0;
}
.shared-post-close {
    position: absolute; top: 14px; right: 16px;
    background: rgba(255,255,255,0.08); border: none;
    color: rgba(255,255,255,0.6);
    width: 30px; height: 30px; border-radius: 50%;
    font-size: 1.1rem; cursor: pointer; line-height: 1;
    display: flex; align-items: center; justify-content: center;
}
.shared-post-close:hover { background: rgba(255,255,255,0.16); color: #fff; }
.shared-post-brand {
    font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em;
    text-transform: uppercase; color: rgba(246,211,101,0.6);
    padding-top: 4px;
}
.shared-post-type-label {
    font-size: 0.75rem; font-weight: 600; color: rgba(255,255,255,0.45);
    letter-spacing: 0.05em;
}
.shared-post-text {
    font-size: 1.18rem; font-weight: 700;
    color: #fff; line-height: 1.5; margin: 0;
}
.shared-post-img {
    width: 100%; border-radius: 14px;
    max-height: 200px; object-fit: cover;
    flex-shrink: 0;
}
.shared-post-meta {
    display: flex; align-items: center; gap: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
}
.shared-post-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    object-fit: cover; flex: 0 0 auto;
}
.shared-post-avatar-placeholder {
    background: linear-gradient(135deg,#6c63ff,#f6d365);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.9rem; font-weight: 700; color: #fff;
}
.shared-post-author { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.shared-post-author-name { font-size: 0.85rem; font-weight: 700; color: #fff; }
.shared-post-author-handle { font-size: 0.75rem; color: rgba(255,255,255,0.45); }
.shared-post-likes { font-size: 0.82rem; color: rgba(255,255,255,0.5); white-space: nowrap; }

/* ---- Inline Notification Section ---- */
.ms-notif-section {
    margin: 14px 0 12px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    overflow: hidden;
    background: rgba(255,255,255,0.04);
}
.ms-notif-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 10px 9px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.ms-notif-tabs {
    display: flex;
    gap: 5px;
    flex: 1;
}
.ms-notif-tab {
    padding: 4px 13px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.1);
    background: none;
    color: rgba(255,255,255,0.38);
    font-size: 0.71rem;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    transition: background 0.14s, color 0.14s, border-color 0.14s;
    line-height: 1.6;
}
.ms-notif-tab.active {
    background: rgba(246,211,101,0.14);
    border-color: rgba(246,211,101,0.38);
    color: #f6d365;
}
.ms-notif-tab:hover:not(.active) {
    background: rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.65);
    border-color: rgba(255,255,255,0.16);
}
.ms-sheet-notif-list {
    max-height: 240px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.ms-sheet-notif-list::-webkit-scrollbar { width: 4px; }
.ms-sheet-notif-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 999px; }
.ms-notif-placeholder,
.ms-notif-loading-inline,
.ms-notif-empty-inline {
    padding: 18px 14px;
    text-align: center;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.3);
}
.ms-notif-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    background: none;
    cursor: pointer;
    text-align: left;
    color: rgba(255,255,255,0.7);
    width: 100%;
    position: relative;
    transition: background 0.12s ease;
}
.ms-notif-item:last-child { border-bottom: none; }
.ms-notif-item:hover { background: rgba(255,255,255,0.06); }
.ms-notif-item:active { background: rgba(255,255,255,0.1); }
.ms-notif-item.unread { color: rgba(255,255,255,0.92); }
.ms-notif-item.unread .ms-notif-item-title { font-weight: 700; }
.ms-notif-item-icon {
    font-size: 1rem;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255,255,255,0.07);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin-top: 1px;
}
.ms-notif-item-copy { flex: 1; min-width: 0; }
.ms-notif-item-title {
    font-size: 0.8rem;
    font-weight: 500;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'Poppins', sans-serif;
}
.ms-notif-item-body {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}
.ms-notif-item-time {
    font-size: 0.66rem;
    color: rgba(255,255,255,0.28);
    margin-top: 3px;
}

/* ---- Action Row (Help / Circle Hub / Logout) ---- */
.ms-action-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
    margin-top: 2px;
}
.ms-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 4px 10px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.06);
    cursor: pointer;
    color: rgba(255,255,255,0.82);
    font-family: 'Poppins', sans-serif;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.ms-action-btn:hover {
    background: rgba(255,255,255,0.11);
    border-color: rgba(255,255,255,0.18);
    transform: translateY(-1px);
}
.ms-action-btn:active { transform: scale(0.94); }
.ms-action-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.ms-action-icon .ms-menu-svg { width: 16px; height: 16px; }
.ms-action-label {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-align: center;
    line-height: 1.2;
}
.ms-action-btn-danger {
    color: #ffb4b4;
    border-color: rgba(255,107,107,0.18);
    background: rgba(255,107,107,0.07);
}
.ms-action-btn-danger .ms-action-icon {
    background: rgba(255,107,107,0.1);
}
.ms-action-btn-danger:hover {
    background: rgba(255,107,107,0.13);
    border-color: rgba(255,107,107,0.3);
    transform: translateY(-1px);
}

/* legacy list styles kept for any other usage */
.ms-menu-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}
.ms-menu-item {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.9);
    font-size: 0.94rem;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    text-align: left;
}
.ms-menu-label {
    flex: 1;
    min-width: 0;
}
.ms-menu-item:active { transform: scale(0.98); }
.ms-menu-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.08);
    font-size: 1.05rem;
    flex: 0 0 auto;
}
.ms-menu-symbol {
    position: relative;
    display: inline-block;
    color: currentColor;
    flex: 0 0 auto;
    box-sizing: border-box;
}
.ms-menu-svg {
    width: 18px;
    height: 18px;
    display: block;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    overflow: visible;
}
.ms-menu-symbol-person {
    width: 14px;
    height: 14px;
}
.ms-menu-symbol-person::before,
.ms-menu-symbol-person::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
}
.ms-menu-symbol-person::before {
    top: 0;
    width: 8px;
    height: 8px;
    border: 1.8px solid currentColor;
    border-radius: 50%;
}
.ms-menu-symbol-person::after {
    bottom: 0;
    width: 14px;
    height: 6px;
    border: 1.8px solid currentColor;
    border-bottom: 0;
    border-radius: 9px 9px 0 0;
}
.ms-menu-symbol-bell {
    width: 14px;
    height: 15px;
    border: 1.8px solid currentColor;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    border-bottom-width: 2px;
    box-sizing: border-box;
}
.ms-menu-symbol-bell::before,
.ms-menu-symbol-bell::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
}
.ms-menu-symbol-bell::before {
    top: -4px;
    width: 5px;
    height: 4px;
    background: currentColor;
    border-radius: 5px 5px 0 0;
}
.ms-menu-symbol-bell::after {
    bottom: -4px;
    width: 4px;
    height: 4px;
    background: currentColor;
    border-radius: 50%;
}
.ms-menu-symbol-help {
    width: 14px;
    height: 14px;
    border: 1.8px solid currentColor;
    border-radius: 50%;
}
.ms-menu-symbol-help::before,
.ms-menu-symbol-help::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
}
.ms-menu-symbol-help::before {
    top: 2px;
    width: 6px;
    height: 7px;
    border: 1.8px solid currentColor;
    border-left: 0;
    border-bottom: 0;
    border-radius: 0 6px 0 0;
}
.ms-menu-symbol-help::after {
    bottom: 2px;
    width: 2.4px;
    height: 2.4px;
    background: currentColor;
    border-radius: 50%;
}
.ms-menu-symbol-hub {
    width: 14px;
    height: 14px;
}
.ms-menu-symbol-hub::before,
.ms-menu-symbol-hub::after {
    content: "";
    position: absolute;
    left: 1px;
    right: 1px;
    box-sizing: border-box;
    border: 1.8px solid currentColor;
    border-radius: 3px;
}
.ms-menu-symbol-hub::before {
    top: 1px;
    height: 4px;
    box-shadow: 0 4px 0 -1px currentColor, 0 8px 0 -1px currentColor;
}
.ms-menu-symbol-hub::after {
    top: 1px;
    bottom: 1px;
    border-left-width: 3px;
    opacity: 0.95;
}
.ms-menu-symbol-dashboard {
    width: 15px;
    height: 14px;
    border-left: 1.8px solid currentColor;
    border-bottom: 1.8px solid currentColor;
}
.ms-menu-symbol-dashboard::before,
.ms-menu-symbol-dashboard::after {
    content: "";
    position: absolute;
    box-sizing: border-box;
}
.ms-menu-symbol-dashboard::before {
    left: 2px;
    right: 1px;
    bottom: 2px;
    height: 8px;
    background:
        linear-gradient(135deg, transparent 0 34%, currentColor 34% 46%, transparent 46% 56%, currentColor 56% 68%, transparent 68%),
        linear-gradient(currentColor, currentColor) left bottom / 2px 3px no-repeat,
        linear-gradient(currentColor, currentColor) center bottom / 2px 6px no-repeat,
        linear-gradient(currentColor, currentColor) right bottom / 2px 8px no-repeat;
}
.ms-menu-symbol-logout {
    width: 15px;
    height: 14px;
}
.ms-menu-symbol-logout::before,
.ms-menu-symbol-logout::after {
    content: "";
    position: absolute;
    box-sizing: border-box;
}
.ms-menu-symbol-logout::before {
    left: 0;
    top: 1px;
    width: 7px;
    height: 12px;
    border: 1.8px solid currentColor;
    border-right: 0;
    border-radius: 3px 0 0 3px;
}
.ms-menu-symbol-logout::after {
    right: 0;
    top: 5px;
    width: 10px;
    height: 4px;
    background:
        linear-gradient(currentColor, currentColor) left center / 7px 1.8px no-repeat,
        linear-gradient(45deg, transparent 45%, currentColor 46% 56%, transparent 57%) right center / 4px 4px no-repeat,
        linear-gradient(-45deg, transparent 45%, currentColor 46% 56%, transparent 57%) right center / 4px 4px no-repeat;
}
.ms-menu-item-danger {
    color: #ffb4b4;
    border-color: rgba(255,107,107,0.2);
    background: rgba(255,107,107,0.08);
}
.ms-menu-item-danger .ms-menu-icon {
    background: rgba(255,107,107,0.12);
}

.ms-handle-bar { display: flex; justify-content: center; padding: 12px 0 4px; }
.ms-handle {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,0.2);
}

/* ---- User row ---- */
.ms-user-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 0 14px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 18px;
}
.ms-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f6d365, #fda085);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    font-weight: 800;
    color: #1a1a2e;
    flex-shrink: 0;
    letter-spacing: -0.02em;
}
.ms-user-info { flex: 1; min-width: 0; }
.ms-username {
    font-size: 1.05rem;
    font-weight: 700;
    color: #f6d365;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 6px;
}
.ms-score-track { display: flex; align-items: center; gap: 8px; }
.ms-score-bar-wrap {
    flex: 1;
    height: 5px;
    border-radius: 3px;
    background: rgba(255,255,255,0.1);
    overflow: hidden;
}
.ms-score-bar {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #48c78e, #5eead4);
    transition: width 0.6s ease;
}
.ms-score-bar.bar-amber { background: linear-gradient(90deg, #f5b942, #fda085); }
.ms-score-bar.bar-red   { background: linear-gradient(90deg, #ff6b6b, #ff9494); }
.ms-score-label { font-size: 0.75rem; color: rgba(255,255,255,0.55); white-space: nowrap; }

.ms-edit-toggle {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 10px;
    color: rgba(255,255,255,0.6);
    font-size: 1.1rem;
    width: 38px;
    height: 38px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
    flex-shrink: 0;
}
.ms-edit-toggle.active { background: rgba(246,211,101,0.15); border-color: rgba(246,211,101,0.4); color: #f6d365; }
.ms-edit-toggle:active { transform: scale(0.92); }

/* ---- Orb Dock ---- */
.ms-orb-dock {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 14px;
    padding: 6px 0 4px;
    margin-bottom: 16px;
}
.ms-auth-dock { justify-content: center; gap: 20px; margin-top: 4px; }
.ms-orb-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
}
.ms-orb {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: rgba(255,255,255,0.09);
    border: 1.5px solid rgba(255,255,255,0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    color: #fff;
    transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
    -webkit-tap-highlight-color: transparent;
}
.ms-orb:active { transform: scale(0.86); }
.ms-orb-center {
    width: 72px;
    height: 72px;
    background: rgba(246,211,101,0.15);
    border-color: rgba(246,211,101,0.55);
    box-shadow: 0 0 20px rgba(246,211,101,0.28), 0 4px 18px rgba(0,0,0,0.35);
}
.ms-orb-logout {
    background: rgba(255,107,107,0.1);
    border-color: rgba(255,107,107,0.3);
}
.ms-orb-icon {
    font-size: 1.55rem;
    line-height: 1;
    display: flex;
    position: relative;
}
.ms-orb-center .ms-orb-icon { font-size: 1.75rem; }
.ms-orb-label {
    font-size: 0.62rem;
    color: rgba(255,255,255,0.5);
    text-align: center;
    letter-spacing: 0.03em;
}
/* Stagger pop-in when sheet opens */
.mobile-sheet.ms-open .ms-orb {
    animation: msOrbPop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-delay: calc(var(--oi, 0) * 0.07s);
}
@keyframes msOrbPop {
    from { transform: scale(0) translateY(18px); opacity: 0; }
    to   { transform: scale(1) translateY(0);    opacity: 1; }
}

.ms-notif-badge {
    position: static;
    margin-left: auto;
    min-width: 20px;
    height: 20px;
    border-radius: 999px;
    background: #ff6b6b;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    border: 1.5px solid #16213e;
    line-height: 1;
    flex: 0 0 auto;
}

/* ---- Admin ---- */
.ms-admin-btn {
    width: 100%;
    padding: 11px;
    margin-top: 4px;
    background: rgba(246,211,101,0.08);
    border: 1px solid rgba(246,211,101,0.25);
    border-radius: 14px;
    color: #f6d365;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.02em;
    transition: background 0.2s;
}
.ms-admin-btn:active { background: rgba(246,211,101,0.18); }

/* ---- Logged-out state ---- */
.ms-welcome-art {
    font-size: 2.8rem;
    text-align: center;
    padding: 20px 0 6px;
    color: #f6d365;
    text-shadow: 0 0 24px rgba(246,211,101,0.5);
}
.ms-welcome-text {
    text-align: center;
    font-size: 1.05rem;
    color: rgba(255,255,255,0.6);
    margin: 0 0 22px;
}
/* ── Upgrade plan modal ───────────────────────────────────────────────────── */
.upgrade-modal-box { max-width: 560px; width: 100%; max-height: 88vh; overflow-y: auto; padding: 28px 24px; }

/* Hero */
.up-hero { text-align: center; margin-bottom: 20px; }
.up-hero-emoji { font-size: 2.4rem; line-height: 1; }
.up-hero-tier { font-size: 1.4rem; font-weight: 800; margin: 6px 0 2px; letter-spacing: -0.02em; }
.up-hero-sub { font-size: 0.75rem; color: rgba(255,255,255,0.38); }

/* Usage grid */
.up-usage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.up-usage-item { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; padding: 10px 12px; }
.up-usage-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.up-usage-label { font-size: 0.78rem; color: rgba(255,255,255,0.55); }
.up-usage-val { font-size: 0.78rem; font-weight: 600; }
.up-usage-bar { height: 4px; background: rgba(255,255,255,0.08); border-radius: 99px; overflow: hidden; }
.up-usage-fill { height: 100%; border-radius: 99px; transition: width 0.4s ease; }

/* Section label */
.up-section-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.3); margin-bottom: 10px; }

/* Tier cards */
.up-tier-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 4px; }
.up-tier-card { border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 14px; position: relative; transition: border-color 0.2s; }
.up-tier-card-current { border-color: var(--tc, #8b949e); background: rgba(255,255,255,0.04); }
.up-tier-card-name { font-size: 1rem; font-weight: 800; color: var(--tc, #e6edf3); margin-bottom: 10px; }
.up-tier-badge { position: absolute; top: 10px; right: 10px; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; background: var(--tc, #8b949e); color: #000; padding: 2px 7px; border-radius: 99px; }
.up-tier-stats { display: flex; flex-direction: column; gap: 4px; }
.up-tier-stats span { font-size: 0.73rem; color: rgba(255,255,255,0.5); }

/* Form */
.upgrade-request-form { display: flex; flex-direction: column; }
.up-form-label { font-size: 0.75rem; color: rgba(255,255,255,0.45); margin-bottom: 5px; }
.upgrade-request-form .auth-input { margin-bottom: 0; }
.upgrade-request-form textarea.auth-input { min-height: 64px; resize: vertical; font-family: inherit; }
.upgrade-pending-note { text-align: center; padding: 14px 16px; background: rgba(246,211,101,0.07); border: 1px solid rgba(246,211,101,0.18); border-radius: 12px; font-size: 0.85rem; color: rgba(255,255,255,0.65); }

@media (max-width: 480px) {
    .up-usage-grid { grid-template-columns: 1fr; }
    .up-tier-cards  { grid-template-columns: 1fr; }
    .upgrade-modal-box { padding: 20px 16px; }
}

/* Google Sign-In button */
.google-btn-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0 10px;
    color: rgba(255,255,255,0.35);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
}
.google-btn-divider::before,
.google-btn-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,0.12);
}
.google-btn-mount {
    display: flex;
    justify-content: center;
    min-height: 44px;
    margin-bottom: 4px;
}
.ms-google-divider { margin: 12px 0 8px; }

/* auth orb overrides - login orb has key color, signup orb uses gold gradient */
.ms-auth-dock .ms-orb:not(.ms-orb-center) {
    background: rgba(100,130,255,0.12);
    border-color: rgba(100,130,255,0.35);
}
.ms-auth-dock .ms-orb-center {
    background: linear-gradient(135deg, rgba(246,211,101,0.25), rgba(253,160,133,0.2));
    border-color: rgba(246,211,101,0.6);
}

/* ==========================================================
   LINKED FRIENDS — profile search, chip, thought-of badge
   ========================================================== */

/* ── "Thought of by others" card ── */
.friends-feedback-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 18px;
}

.thought-of-badge {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: 16px 22px;
    max-width: 360px;
    width: min(100%, 360px);
    background: linear-gradient(135deg, rgba(246,211,101,0.1) 0%, rgba(253,160,133,0.07) 100%);
    border: 1px solid rgba(246,211,101,0.22);
    border-radius: 20px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    position: relative;
    overflow: hidden;
    animation: tobFloat 4s ease-in-out infinite;
}
.thought-of-badge::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(246,211,101,0.04), transparent);
    animation: tobShine 3.5s linear infinite;
}
@keyframes tobFloat {
    0%, 100% { transform: translateY(0);    box-shadow: 0 4px 20px rgba(246,211,101,0.1); }
    50%       { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(246,211,101,0.2); }
}
@keyframes tobShine {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(200%); }
}

.tob-icon-wrap {
    font-size: 1.8rem;
    line-height: 1;
    flex-shrink: 0;
    filter: drop-shadow(0 0 8px rgba(246,211,101,0.5));
}

.tob-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    flex: 1;
}
.tob-count {
    font-size: 2rem;
    font-weight: 900;
    color: #f6d365;
    line-height: 1;
    text-shadow: 0 0 20px rgba(246,211,101,0.4);
    letter-spacing: -0.02em;
}
.tob-label {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.55);
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.thought-of-badge-angry {
    background: linear-gradient(135deg, rgba(255,154,139,0.12) 0%, rgba(255,107,107,0.08) 100%);
    border-color: rgba(255,154,139,0.24);
}

.thought-of-badge-angry .tob-icon-wrap {
    filter: drop-shadow(0 0 8px rgba(255,154,139,0.42));
}

.thought-of-badge-angry .tob-count {
    color: #ff9a8b;
    text-shadow: 0 0 20px rgba(255,154,139,0.28);
}

.friends-mood-split {
    display: flex;
    justify-content: center;
    margin: 22px auto 6px;
}

.friends-mood-card {
    width: min(100%, 720px);
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    align-items: stretch;
    border-radius: 28px;
    border: 1px solid rgba(255,255,255,0.12);
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(246,211,101,0.12) 0%, rgba(253,160,133,0.04) 48%, rgba(255,107,107,0.12) 100%),
        rgba(12,12,16,0.5);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.05),
        0 18px 42px rgba(0,0,0,0.22);
}

.friends-mood-segment {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 18px 14px;
    text-align: center;
}

.friends-mood-count-wrap {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.friends-mood-icon {
    font-size: 1.5rem;
    line-height: 1;
}

.friends-mood-count {
    font: 800 clamp(1.9rem, 4vw, 3rem) 'Space Mono', monospace;
    line-height: 1;
    letter-spacing: -0.04em;
}

.friends-mood-thought .friends-mood-count,
.friends-mood-thought .friends-mood-label {
    color: #f6d365;
}

.friends-mood-angry .friends-mood-count,
.friends-mood-angry .friends-mood-label {
    color: #ff9a8b;
}

.friends-mood-label {
    font: 600 0.82rem 'Poppins', sans-serif;
}

.friends-mood-divider {
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(255,255,255,0.24), transparent);
}

/* ── Linked profile chip on friend card ── */
.friend-linked-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(246,211,101,0.7);
    background: rgba(246,211,101,0.08);
    border: 1px solid rgba(246,211,101,0.18);
    border-radius: 20px;
    padding: 3px 10px;
    margin: 3px 0 5px;
    letter-spacing: 0.04em;
}

/* ── Link-profile search wrapper in add-row ── */
.link-profile-wrap {
    position: relative;
    flex: 1;
    min-width: 150px;
}

/* Override add-input-sm inside link wrap to match dark theme */
.link-profile-wrap input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    background: rgba(255,255,255,0.07) !important;
    border: 1.5px solid rgba(255,255,255,0.14) !important;
    border-radius: 14px !important;
    color: #fff !important;
    font-size: 0.86rem;
    padding: 10px 14px !important;
    outline: none;
    transition: border-color 0.2s, background 0.2s;
    font-family: inherit;
}
.link-profile-wrap input[type="text"]::placeholder {
    color: rgba(255,255,255,0.35) !important;
}
.link-profile-wrap input[type="text"]:focus {
    border-color: rgba(246,211,101,0.45) !important;
    background: rgba(255,255,255,0.1) !important;
    box-shadow: 0 0 0 3px rgba(246,211,101,0.08);
}

/* ── Autocomplete dropdown ── */
.link-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: linear-gradient(160deg, #1e1e38, #16213e);
    border: 1px solid rgba(246,211,101,0.15);
    border-radius: 16px;
    overflow-y: auto;
    max-height: 220px;
    -webkit-overflow-scrolling: touch;
    z-index: 500;
    box-shadow: 0 12px 36px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04);
}
.link-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.link-dropdown-item:last-child { border-bottom: none; }
.link-dropdown-item:hover { background: rgba(246,211,101,0.07); }
.link-dropdown-item:active { background: rgba(246,211,101,0.12); }

.mention-suggest-dropdown {
    position: fixed;
    background: linear-gradient(160deg, #1e1e38, #16213e);
    border: 1px solid rgba(246,211,101,0.15);
    border-radius: 16px;
    overflow-y: auto;
    max-height: 220px;
    -webkit-overflow-scrolling: touch;
    z-index: 10030;
    box-shadow: 0 12px 36px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04);
}
.mention-suggest-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    color: #fff;
    cursor: pointer;
    text-align: left;
    font: inherit;
}
.mention-suggest-item:last-child { border-bottom: none; }
.mention-suggest-item:hover,
.mention-suggest-item.is-active {
    background: rgba(246,211,101,0.07);
}
.mention-suggest-item:active {
    background: rgba(246,211,101,0.12);
}
.mention-suggest-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f6d365, #fda085);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 800;
    color: #1a1a2e;
    flex-shrink: 0;
    letter-spacing: -0.02em;
}
.mention-suggest-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.mention-suggest-name {
    font-size: 0.9rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mention-suggest-meta {
    font-size: 0.74rem;
    color: rgba(255,255,255,0.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.link-dd-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f6d365, #fda085);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 800;
    color: #1a1a2e;
    flex-shrink: 0;
    letter-spacing: -0.02em;
}
.link-dd-info { flex: 1; min-width: 0; }
.link-dd-name {
    font-size: 0.9rem;
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.link-dd-meta {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.38);
    margin-top: 1px;
}
.link-dd-thought {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    gap: 1px;
}
.link-dd-thought-num {
    font-size: 0.92rem;
    font-weight: 800;
    color: rgba(246,211,101,0.8);
    line-height: 1;
}
.link-dd-thought-label {
    font-size: 0.58rem;
    color: rgba(255,255,255,0.3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Selected user chip ── */
.fao-linked {
    border-color: rgba(100,220,180,0.5) !important;
    background: rgba(100,220,180,0.08) !important;
}
.fao-user-results {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 0;
}
.fao-results-label {
    width: 100%;
    font-size: 0.7rem;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.fao-user-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px 6px 6px;
    background: rgba(255,255,255,0.07);
    border: 1.5px solid rgba(255,255,255,0.15);
    border-radius: 24px;
    color: #fff;
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.15s ease;
}
.fao-user-chip:active,
.fao-user-chip:hover {
    background: rgba(246,211,101,0.12);
    border-color: rgba(246,211,101,0.4);
}
.fao-user-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f6d365, #fda085);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: #1a1a2e;
}
.fao-linked-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 0.82rem;
    color: rgba(100,220,180,0.95);
    background: rgba(100,220,180,0.1);
    border: 1.5px solid rgba(100,220,180,0.25);
    border-radius: 14px;
}
.fao-linked-badge strong { color: #fff; }
.fao-linked-check { font-size: 0.9rem; }
.fao-unlink-btn {
    margin-left: auto;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    color: rgba(255,255,255,0.5);
    font-size: 0.75rem;
    padding: 2px 8px;
    cursor: pointer;
}
.fao-unlink-btn:hover { background: rgba(255,107,107,0.2); color: #ff9494; }

.link-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px 7px 10px;
    background: linear-gradient(135deg, rgba(246,211,101,0.14), rgba(253,160,133,0.08));
    border: 1px solid rgba(246,211,101,0.3);
    border-radius: 14px;
    font-size: 0.84rem;
    color: #f6d365;
    font-weight: 700;
    white-space: nowrap;
    width: 100%;
    box-sizing: border-box;
}
.link-chip-remove {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    font-size: 0.7rem;
    padding: 2px 5px;
    line-height: 1;
    transition: background 0.15s, color 0.15s;
    margin-left: auto;
}
.link-chip-remove:hover { background: rgba(255,107,107,0.2); border-color: rgba(255,107,107,0.3); color: #ff9494; }

/* ═══════════════════════════════════════════════════════
   FRIENDS — SOCIAL HEAT MAP
   ═══════════════════════════════════════════════════════ */

.friends-heatmap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.2rem;
    padding: 1.5rem 0;
    min-height: 120px;
}

/* ── Individual orb ── */
.friend-orb {
    width:  var(--orb-size, 110px);
    height: var(--orb-size, 110px);
    border-radius: 50%;
    background: radial-gradient(
        circle at 36% 34%,
        rgba(255,255,255, calc(var(--orb-intensity, 0.5) * 0.38)),
        rgba(255,255,255, calc(var(--orb-intensity, 0.5) * 0.07))
    );
    border: 2px solid rgba(255,255,255, calc(var(--orb-intensity, 0.5) * 0.55));
    box-shadow:
        0 0 calc(var(--orb-intensity, 0.5) * 30px) rgba(255,255,255, calc(var(--orb-intensity, 0.5) * 0.22)),
        inset 0 0 18px rgba(255,255,255, 0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible;
    transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s ease;
    flex-shrink: 0;
    text-align: center;
    gap: 2px;
    padding: 8px;
    box-sizing: border-box;
    opacity: 1;
    animation: friendOrbIn 0.5s cubic-bezier(0.22,1,0.36,1) forwards;
    animation-delay: 0s;
}
@keyframes friendOrbIn {
    from { opacity: 0; transform: scale(0.6) translateY(20px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.friend-orb:hover {
    transform: scale(1.1) translateY(-4px);
    box-shadow:
        0 0 calc(var(--orb-intensity, 0.5) * 52px) rgba(255,255,255, calc(var(--orb-intensity, 0.5) * 0.4)),
        inset 0 0 22px rgba(255,255,255, 0.07),
        0 8px 24px rgba(0,0,0,0.2);
}

.friend-orb-name {
    font-size: clamp(0.75rem, 1.8vw, 0.92rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    max-width: 88%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.friend-orb-link {
    font-size: 0.58rem;
    color: rgba(246,211,101,0.75);
    font-weight: 600;
    letter-spacing: 0.02em;
}
.friend-orb-stats {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 6px;
}

.friend-orb-stat-count {
    font: 800 0.98rem 'Space Mono', monospace;
    line-height: 1;
}

.friend-orb-stat-count-thought {
    color: rgba(246,211,101,0.95);
}

.friend-orb-stat-count-angry {
    color: rgba(255,154,139,0.95);
}

.friend-orb-stat-slash {
    font: 700 0.96rem 'Space Mono', monospace;
    color: rgba(255,255,255,0.34);
}

/* Counter pop animation */
@keyframes orbCountPop {
    0%   { transform: scale(1);    color: rgba(255,255,255,0.95); }
    40%  { transform: scale(1.6);  color: #f6d365; }
    100% { transform: scale(1);    color: rgba(255,255,255,0.95); }
}
.orb-count-pulse { animation: orbCountPop 0.55s ease; }

/* Friend mood buttons */

/* Orb remove button — own class to avoid all .delete-btn cascade conflicts */
.orb-del-btn {
    position: absolute;
    top: 4px; right: 4px;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.25);
    color: rgba(255,255,255,0.65);
    font-size: 0.62rem;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 5;
    transition: background 0.2s, color 0.2s;
}
body.edit-mode .orb-del-btn { display: inline-flex; }
.orb-del-btn:hover { background: rgba(220,50,50,0.7); color: #fff; border-color: rgba(255,100,100,0.5); }

/* ── Friend add-orb ── */
.friend-add-orb {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    border: 2px dashed rgba(255,255,255,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
    flex-shrink: 0;
    align-self: center;
}
.friend-add-orb:hover {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.7);
    transform: scale(1.12);
}
.friend-add-plus {
    font-size: 1rem;
    color: rgba(255,255,255,0.7);
    line-height: 1;
    pointer-events: none;
}

/* ── Floating thought bubble ── */
@keyframes thoughtFly {
    0%   { opacity: 1; transform: translate(-50%, -50%) scale(0.5); }
    55%  { opacity: 1; transform: translate(-50%, calc(-50% - 65px)) scale(1.3); }
    100% { opacity: 0; transform: translate(-50%, calc(-50% - 120px)) scale(0.2); }
}
.thought-bubble-fx {
    position: absolute;
    top: 50%; left: 50%;
    font-size: 1.7rem;
    pointer-events: none;
    z-index: 20;
    animation: thoughtFly 0.88s ease-out forwards;
    user-select: none;
}

/* ── Random think highlight ── */
@keyframes orbHighlight {
    0%   { box-shadow: 0 0 0 0 rgba(246,211,101,0); }
    40%  { box-shadow: 0 0 55px 12px rgba(246,211,101,0.75), inset 0 0 30px rgba(246,211,101,0.15); }
    100% { box-shadow: 0 0 calc(var(--orb-intensity, 0.5) * 30px) rgba(255,255,255, calc(var(--orb-intensity, 0.5) * 0.22)), inset 0 0 18px rgba(255,255,255,0.04); }
}
.friend-orb.orb-highlight { animation: orbHighlight 1.1s ease-out forwards; }
.friends-heatmap.hammer-armed .friend-orb,
.friends-heatmap.teddy-armed .friend-orb {
    cursor: cell;
}
.friend-orb.orb-angry-hit {
    animation: orbAngryHit 0.9s ease-out forwards;
}
.friend-orb.orb-teddy-hit {
    animation: orbTeddyHit 0.9s ease-out forwards;
}
@keyframes orbAngryHit {
    0% { transform: scale(1); box-shadow: 0 0 calc(var(--orb-intensity, 0.5) * 30px) rgba(255,255,255, calc(var(--orb-intensity, 0.5) * 0.22)), inset 0 0 18px rgba(255,255,255,0.04); }
    22% { transform: scale(0.96) rotate(-2deg); box-shadow: 0 0 34px rgba(255,154,139,0.55), inset 0 0 28px rgba(255,127,80,0.2); }
    52% { transform: scale(1.04) rotate(1deg); box-shadow: 0 0 44px rgba(255,127,80,0.45), inset 0 0 24px rgba(255,154,139,0.16); }
    100% { transform: scale(1); box-shadow: 0 0 calc(var(--orb-intensity, 0.5) * 30px) rgba(255,255,255, calc(var(--orb-intensity, 0.5) * 0.22)), inset 0 0 18px rgba(255,255,255,0.04); }
}
@keyframes orbTeddyHit {
    0% { transform: scale(1); box-shadow: 0 0 calc(var(--orb-intensity, 0.5) * 30px) rgba(255,255,255, calc(var(--orb-intensity, 0.5) * 0.22)), inset 0 0 18px rgba(255,255,255,0.04); }
    22% { transform: scale(1.03) rotate(2deg); box-shadow: 0 0 34px rgba(246,211,101,0.48), inset 0 0 28px rgba(255,214,102,0.14); }
    52% { transform: scale(0.98) rotate(-1deg); box-shadow: 0 0 42px rgba(255,184,108,0.38), inset 0 0 22px rgba(255,214,102,0.12); }
    100% { transform: scale(1); box-shadow: 0 0 calc(var(--orb-intensity, 0.5) * 30px) rgba(255,255,255, calc(var(--orb-intensity, 0.5) * 0.22)), inset 0 0 18px rgba(255,255,255,0.04); }
}
.hammer-bang-fx,
.hammer-impact-fx,
.teddy-love-fx {
    position: absolute;
    pointer-events: none;
    z-index: 25;
    user-select: none;
}
.hammer-bang-fx {
    top: 8%;
    right: 16%;
    font-size: 1.7rem;
    transform-origin: 80% 80%;
    animation: hammerBangDrop 0.62s cubic-bezier(0.2,0.9,0.3,1) forwards;
}
.hammer-impact-fx {
    top: 42%;
    right: 28%;
    font-size: 1.2rem;
    animation: hammerImpactPop 0.52s ease-out forwards;
}
@keyframes hammerBangDrop {
    0% { opacity: 0; transform: translate(18px, -12px) rotate(-36deg) scale(0.7); }
    35% { opacity: 1; transform: translate(6px, 0) rotate(-8deg) scale(1.05); }
    70% { opacity: 1; transform: translate(0, 14px) rotate(24deg) scale(1); }
    100% { opacity: 0; transform: translate(8px, 18px) rotate(24deg) scale(0.88); }
}
@keyframes hammerImpactPop {
    0% { opacity: 0; transform: scale(0.2); }
    35% { opacity: 1; transform: scale(1.14); }
    100% { opacity: 0; transform: scale(1.7); }
}
.teddy-love-fx {
    top: 18%;
    left: 10%;
    font-size: 1.55rem;
    animation: teddyLoveDrift 0.68s cubic-bezier(0.22,0.9,0.3,1) forwards;
}
@keyframes teddyLoveDrift {
    0% { opacity: 0; transform: translate(-18px, 8px) rotate(-14deg) scale(0.72); }
    35% { opacity: 1; transform: translate(-4px, 0) rotate(0deg) scale(1); }
    70% { opacity: 1; transform: translate(8px, -8px) rotate(8deg) scale(1.06); }
    100% { opacity: 0; transform: translate(14px, -14px) rotate(10deg) scale(0.9); }
}

/* ── Think Random button ── */
.friends-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: min(100%, 920px);
    margin: 0 auto 0.25rem;
    padding: 0.25rem 0 0.45rem;
    min-height: 0;
}
.friend-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.22);
    background: rgba(14,18,30,0.26);
    color: #fff;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.friend-action-btn:hover {
    transform: translateY(-2px);
    background: rgba(255,255,255,0.16);
    box-shadow: 0 8px 22px rgba(0,0,0,0.2);
}
.friend-action-btn:active {
    transform: translateY(0) scale(0.98);
}
.friend-action-icon {
    font-size: 1.4rem;
    line-height: 1;
}
.friend-action-label {
    display: none;
}
.friend-hammer-btn.active {
    border-color: rgba(255,154,139,0.46);
    background: linear-gradient(135deg, rgba(255,127,80,0.2), rgba(255,154,139,0.14));
    box-shadow: 0 0 0 1px rgba(255,154,139,0.14), 0 10px 28px rgba(0,0,0,0.24);
    animation: hammerArmedPulse 0.9s ease-in-out infinite alternate;
}
.friend-teddy-btn.active {
    border-color: rgba(246,211,101,0.46);
    background: linear-gradient(135deg, rgba(246,211,101,0.18), rgba(255,200,120,0.12));
    box-shadow: 0 0 0 1px rgba(246,211,101,0.12), 0 10px 28px rgba(0,0,0,0.24);
    animation: teddyArmedPulse 0.9s ease-in-out infinite alternate;
}
@keyframes hammerArmedPulse {
    from { transform: translateY(0) rotate(-4deg); }
    to   { transform: translateY(-1px) rotate(4deg); }
}
@keyframes teddyArmedPulse {
    from { transform: translateY(0) rotate(4deg); }
    to   { transform: translateY(-1px) rotate(-4deg); }
}
.think-random-btn {
    background: rgba(255,255,255,0.12);
    border: 2px solid rgba(255,255,255,0.28);
    border-radius: 30px;
    color: #fff;
    font-size: 0.88rem;
    font-weight: 700;
    padding: 0.55rem 1.6rem;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    letter-spacing: 0.02em;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.think-random-btn:hover {
    background: rgba(255,255,255,0.22);
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(0,0,0,0.25);
}
.think-random-btn:active { transform: translateY(0); }

@media (max-width: 600px) {
    .friends-feedback-row {
        width: min(100%, 360px);
        margin: 18px auto 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
        border-radius: 22px;
        overflow: hidden;
        border: 1px solid rgba(255,255,255,0.12);
        background:
            linear-gradient(135deg, rgba(246,211,101,0.08) 0%, rgba(255,154,139,0.08) 100%),
            rgba(12,12,16,0.5);
        box-shadow:
            inset 0 0 0 1px rgba(255,255,255,0.04),
            0 16px 36px rgba(0,0,0,0.18);
    }
    .thought-of-badge {
        width: auto;
        max-width: none;
        min-width: 0;
        border: none;
        border-radius: 0;
        margin: 0;
        padding: 14px 10px;
        gap: 10px;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        animation: none;
        box-shadow: none;
    }
    .thought-of-badge::before {
        display: none;
    }
    .thought-of-badge:first-child {
        border-right: 1px solid rgba(255,255,255,0.12);
    }
    .tob-icon-wrap {
        font-size: 1.45rem;
    }
    .tob-body {
        min-width: 0;
        align-items: flex-start;
    }
    .tob-count {
        font-size: clamp(1.45rem, 6vw, 1.9rem);
    }
    .tob-label {
        font-size: 0.64rem;
        letter-spacing: 0.04em;
    }
    .friend-orb { gap: 1px; }
    .friend-orb-stats {
        gap: 7px;
    }
    .friend-orb-stat-count {
        font-size: 0.88rem;
    }
    .friend-orb-stat-slash {
        font-size: 0.82rem;
    }
    .friend-action-btn {
        width: 52px;
        height: 52px;
    }
    .friend-action-icon {
        font-size: 1.28rem;
    }
}

/* ═══════════════════════════════════════════════════════
   DROP A VIBE — ANIMATED WORDMARK
   ═══════════════════════════════════════════════════════ */

.dav-header {
    text-align: center;
    position: relative;
}

.dav-wordmark {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
    position: relative;
    margin: 0;
    padding-bottom: 12px;
    line-height: 1;
    /* hide the default sec-header ::after underline */
}
.dav-wordmark::after { display: none !important; }

.dav-letter {
    display: inline-block;
    position: relative;
    cursor: default;
    transition: transform 0.3s ease;
}
.dav-letter:hover {
    transform: scale(1.15) translateY(-4px);
}

/* Letter sizing — font-size from the h2 context, JS sets font-family + color */
.dav-letter {
    font-size: clamp(2.4rem, 6.2vw, 3.84rem);
}

.dav-spacer {
    display: inline-block;
    width: clamp(0.4rem, 1.5vw, 0.9rem);
}

/* Animated underline */
.dav-underline {
    position: absolute;
    bottom: 0;
    left: 5%;
    width: 90%;
    height: 10px;
    color: rgba(255,255,255,0.12);
    pointer-events: none;
}

/* Floating animations from the reference */
@keyframes davFloat1 {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
}
@keyframes davFloat2 {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(6px); }
}
@keyframes davFloat3 {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }
}
@keyframes davFade {
    from { opacity: 0.82; }
    to   { opacity: 1; }
}
@keyframes davShine {
    0%   { filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
    50%  { filter: drop-shadow(0 0 8px rgba(255,255,255,0.25)); }
    100% { filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
}

/* ── Decorative floating dots ── */
.dav-header::before,
.dav-header::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.dav-header::before {
    width: 6px;
    height: 6px;
    background: #f9a8d4;
    right: 18%;
    top: 20%;
    opacity: 0.7;
    animation: davFloat1 4s ease-in-out infinite;
}
.dav-header::after {
    width: 4px;
    height: 4px;
    background: #67e8f9;
    right: 14%;
    top: 35%;
    opacity: 0.6;
    animation: davFloat3 5s ease-in-out infinite;
}

/* ── Instagram theme — dots + underline ── */
[data-theme="instagram"] .dav-header::before { background: #dd2a7b; }
[data-theme="instagram"] .dav-header::after  { background: #0095f6; }

/* ═══════════════════════════════════════════════════════
   ONE-LINERS — ENHANCED
   ═══════════════════════════════════════════════════════ */

/* Badges (Trending / Quote of Day) */
.ol-badges {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin-bottom: 0.35rem;
}
.ol-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.ol-badge-trending {
    background: rgba(255,80,30,0.22);
    border: 1px solid rgba(255,100,50,0.4);
    color: #ffb38a;
}
.ol-badge-qotd {
    background: rgba(246,211,101,0.18);
    border: 1px solid rgba(246,211,101,0.35);
    color: #f6d365;
}

/* Featured card (trending / QotD) */
.oneliner-card.ol-featured {
    max-width: 520px;
    width: 100%;
}
.oneliner-card.ol-featured .card-inner {
    padding: 0.85rem 1.2rem;
}
.oneliner-card.ol-trending {
    background: rgba(255,90,40,0.14);
    border-color: rgba(255,120,60,0.45);
    box-shadow: 0 2px 16px rgba(255,80,30,0.12);
}
.oneliner-card.ol-trending:hover {
    background: rgba(255,90,40,0.22);
    border-color: rgba(255,140,80,0.65);
}
.oneliner-card.ol-trending .oneliner-text {
    font-size: 0.97rem;
}
/* QOTD — gold tint */
.oneliner-card.ol-qotd {
    background: rgba(246,211,101,0.1);
    border-color: rgba(246,211,101,0.35);
}
.oneliner-card.ol-qotd:hover {
    background: rgba(246,211,101,0.18);
    border-color: rgba(246,211,101,0.55);
}

/* Author line */
.ol-author {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.45);
    font-style: normal;
    font-weight: 600;
    margin-top: 0.2rem;
    margin-bottom: 0;
    letter-spacing: 0.02em;
}
.ol-visibility {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: 10px;
    margin-top: 6px;
    text-transform: uppercase;
}
.ol-vis-public {
    color: rgba(100,220,180,0.85);
    background: rgba(100,220,180,0.1);
}
.ol-vis-private {
    color: rgba(255,190,100,0.85);
    background: rgba(255,190,100,0.1);
}

/* Like pop animation */
@keyframes liPop {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.45); filter: brightness(1.5); }
    60%  { transform: scale(0.9); }
    100% { transform: scale(1); filter: brightness(1); }
}
.like-btn.li-pop { animation: liPop 0.55s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

/* ── Reactions Row ── */
.reactions-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 6px;
}
.react-btn {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 20px;
    color: #fff;
    font-size: 0.82rem;
    padding: 4px 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background 0.2s, transform 0.15s, border-color 0.2s;
    line-height: 1.3;
}
.react-btn:hover { background: rgba(255,255,255,0.18); transform: scale(1.1); }
.react-btn.reacted { background: rgba(255,200,50,0.22); border-color: rgba(255,200,50,0.6); }
.react-count { font-size: 0.78rem; opacity: 0.85; }
@keyframes reactPop {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.5); filter: brightness(1.6); }
    60%  { transform: scale(0.9); }
    100% { transform: scale(1); filter: brightness(1); }
}
.react-btn.react-pop { animation: reactPop 0.55s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

/* ── Favorite Circle FAB ── */
.fav-circle-fab {
    position: fixed;
    bottom: 6px;
    left: 24px;
    z-index: 9990;
    background: rgba(30, 30, 45, 0.9);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 30px;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    padding: 0.55rem 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 7px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.4);
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
    letter-spacing: 0.01em;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    max-width: 160px;
    overflow: hidden;
}
.fav-circle-fab:hover {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 10px 32px rgba(0,0,0,0.5);
    background: rgba(40, 40, 60, 0.95);
}
.fav-circle-fab:active { transform: scale(0.97); }
.fav-circle-emoji { font-size: 1.1rem; line-height: 1; flex-shrink: 0; }
.fav-circle-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgba(255,255,255,0.85);
}

/* Multi-fav: small orbs only */
.fav-circle-fab.fav-circle-multi {
    padding: 0.35rem 0.5rem;
    gap: 5px;
    background: rgba(20, 20, 35, 0.85);
    max-width: none;
}
.fav-circle-orb {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    color: #fff;
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
    -webkit-tap-highlight-color: transparent;
}
.fav-circle-orb:hover {
    transform: scale(1.12);
    background: rgba(255,255,255,0.14);
    box-shadow: 0 0 12px rgba(139,92,246,0.3);
}
.fav-circle-orb:active { transform: scale(0.92); }
.fav-circle-orb { position: relative; }
.fav-circle-emoji { position: relative; }
.fav-circle-dot,
.circle-orb-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    background: #e91e8c;
    border-radius: 50%;
    border: 2px solid rgba(20,20,30,0.9);
    box-shadow: 0 0 6px rgba(233,30,140,0.6);
    animation: dot-pulse 2s ease-in-out infinite;
    pointer-events: none;
}
.circle-activity-dot {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 7px;
    height: 7px;
    background: #e91e8c;
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(233,30,140,0.6);
    animation: dot-pulse 2s ease-in-out infinite;
    pointer-events: none;
    z-index: 3;
}
@keyframes dot-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.8; }
}

@media (max-width: 600px) {
    .fav-circle-fab { bottom: 18px; left: 16px; font-size: 0.78rem; padding: 0.5rem 1rem; max-width: 140px; }
    .fav-circle-fab.fav-circle-multi { padding: 0.3rem 0.4rem; max-width: none; }
    .fav-circle-orb { width: 34px; height: 34px; font-size: 1rem; }
    body.circle-switcher-open .fav-circle-fab {
        opacity: 0;
        pointer-events: none;
        transform: translateY(16px);
    }
}

/* ── Circle Add Post FAB ── */
/* old FAB hidden — replaced by compose bar */
.circle-add-post-fab { display: none; }

/* ── Circle Compose Bar ── */
.circle-compose-bar {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 900;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 10px 12px 14px;
    background: rgba(18,18,24,0.96);
    backdrop-filter: blur(14px);
    border-top: 1px solid rgba(255,255,255,0.08);
}
.ccb-media-btn {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.ccb-media-btn:hover { background: rgba(255,255,255,0.14); color: #fff; }
.ccb-input-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.ccb-media-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    width: fit-content;
}
.ccb-media-preview img,
.ccb-media-preview video {
    height: 72px;
    max-width: 120px;
    border-radius: 8px;
    object-fit: cover;
    background: #000;
    border: 1px solid rgba(255,255,255,0.12);
}
.ccb-preview-remove {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(0,0,0,0.75);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    font-size: 0.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    line-height: 1;
}
.ccb-preview-remove:hover { background: #e74c3c; }
.ccb-text-input {
    width: 100%;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 20px;
    color: #fff;
    font-size: 0.9rem;
    padding: 9px 14px;
    outline: none;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color 0.15s;
}
.ccb-text-input::placeholder { color: rgba(255,255,255,0.35); }
.ccb-text-input:focus { border-color: rgba(255,255,255,0.28); }
.ccb-send-btn {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #ff547d, #e91e8c);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.15s;
    box-shadow: 0 4px 14px rgba(233,30,140,0.35);
}
.ccb-send-btn:hover { opacity: 0.9; transform: scale(1.06); }
.ccb-send-btn:disabled { opacity: 0.4; cursor: default; transform: none; }

/* ── Circle Compose Sheet ── */
.circle-compose-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10020;
    background: rgba(24,24,30,0.97);
    backdrop-filter: blur(16px);
    border-radius: 18px 18px 0 0;
    padding: 20px 18px 28px;
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(.4,0,.2,1);
    max-width: 520px;
    margin: 0 auto;
}
.circle-compose-sheet.open { transform: translateY(0); }
.circle-compose-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}
.circle-compose-title {
    font-weight: 700;
    font-size: 1.05rem;
    color: #fff;
}
.circle-compose-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 4px 8px;
}
.circle-compose-close:hover { color: #fff; }
.circle-compose-textarea {
    width: 100%;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    color: #fff;
    font-size: 0.92rem;
    padding: 12px;
    resize: none;
    outline: none;
    font-family: inherit;
    box-sizing: border-box;
}
.circle-compose-textarea:focus {
    border-color: rgba(255,255,255,0.25);
}
/* Compose image picker */
.circle-compose-image-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}
.circle-compose-img-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    color: rgba(255,255,255,0.7);
    font-size: 0.82rem;
    padding: 7px 12px;
    cursor: pointer;
    transition: background 0.15s;
}
.circle-compose-img-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
.circle-compose-img-btn svg { opacity: 0.8; }
.circle-compose-preview {
    position: relative;
    display: inline-block;
}
.circle-compose-preview img {
    max-height: 120px;
    max-width: 200px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,0.12);
}
.circle-compose-preview-remove {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0,0,0,0.7);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    line-height: 1;
}
.circle-compose-preview-remove:hover { background: #e74c3c; }

/* Post photo in feed */
.feed-post-photo {
    margin-top: 8px;
    max-width: 100%;
    border-radius: 8px;
}

.circle-compose-submit {
    margin-top: 12px;
    width: 100%;
    padding: 11px 0;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #c0392b, #e91e8c);
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: opacity 0.2s;
}
.circle-compose-submit:hover { opacity: 0.9; }
.circle-compose-submit:disabled { opacity: 0.5; cursor: not-allowed; }

/* Post cards in feed (wall posts mixed into tabs) */
.feed-card-post { border-left: 2px solid #e91e8c; }
.feed-av-post { background: linear-gradient(135deg, #c0392b, #e91e8c) !important; }

@media (max-width: 640px) {
    .circle-add-post-fab { bottom: 18px; right: 16px; width: 48px; height: 48px; }
}

/* ── Visibility Toggle (Personal / Public) ── */
.visibility-toggle {
    display: flex;
    gap: 0;
    margin-top: 10px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.12);
    width: fit-content;
}
.vis-btn {
    background: rgba(255,255,255,0.04);
    border: none;
    color: rgba(255,255,255,0.5);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 6px 14px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.vis-btn + .vis-btn { border-left: 1px solid rgba(255,255,255,0.12); }
.vis-btn.active[data-vis="personal"] {
    background: rgba(255,255,255,0.12);
    color: #fff;
}
.vis-btn.active[data-vis="public"] {
    background: rgba(46,204,113,0.2);
    color: #2ecc71;
}
.vis-btn:hover:not(.active) { background: rgba(255,255,255,0.08); }

/* ── Suggestion Popup Tags ── */
.sug-popup-tags {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 10px;
}
.sug-popup-tags-label {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.5);
    font-weight: 600;
    margin-right: 2px;
}
.sug-popup-tag-input {
    min-width: 160px;
    flex: 1 1 220px;
}
.sug-popup-tag-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
    margin-top: 4px;
}
.sug-popup-tag-btn {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    color: rgba(255,255,255,0.6);
    font-size: 0.78rem;
    padding: 4px 10px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.sug-popup-tag-btn:hover { background: rgba(255,255,255,0.1); }
.sug-popup-tag-btn.active {
    background: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.25);
    color: #fff;
}

/* ── Quick Post FAB ── */
.vibe-fab {
    position: fixed;
    bottom: 6px;
    right: 24px;
    z-index: 9990;
    background: linear-gradient(135deg, #c0392b, #e91e8c);
    border: none;
    border-radius: 30px;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    padding: 0.65rem 1.4rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 6px 24px rgba(192,57,43,0.45);
    transition: transform 0.2s, box-shadow 0.2s;
    letter-spacing: 0.02em;
}
.vibe-fab:hover {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 10px 32px rgba(192,57,43,0.55);
}
.vibe-fab:active { transform: scale(0.97); }

@media (max-width: 600px) {
    .vibe-fab { bottom: 18px; right: 16px; font-size: 0.82rem; padding: 0.6rem 1.1rem; }
    body.circle-switcher-open .vibe-fab {
        opacity: 0;
        pointer-events: none;
        transform: translateY(16px);
    }
}

/* ═══════════════════════════════════════════════════════
   MOBILE COMPACT — all sections more condensed at ≤600px
   ═══════════════════════════════════════════════════════ */
@media (max-width: 600px) {

    /* ── Section container inner padding ── */
    .full-section { padding: 40px 0 30px; }
    .sec-container { padding: 0 1rem; }
    .sec-header { margin-bottom: 1rem; }
    .sec-header h2 { font-size: 1.5rem; }

    /* ── One-liners ── */
    .oneliner-card { max-width: 100%; border-radius: 22px; }
    .oneliner-card .card-inner { padding: 1rem 1rem 0.9rem; }
    .oneliner-card.ol-featured .card-inner { padding: 1rem 1rem 0.9rem; }
    .ol-view-toggle { margin-left: auto; }
    .ol-view-btn { width: 40px; min-width: 40px; flex-basis: 40px; height: 23px; padding: 0; }
    #olViewToggle { margin-left: auto; }
    .ol-post-header { padding-right: 1.6rem; margin-bottom: 0.4rem; }
    .ol-post-avatar,
    .ol-author-link-avatar { width: 46px; height: 46px; }
    .ol-post-body,
    .ol-post-actions,
    .ol-badges-inline { margin-left: 0; }
    .ol-post-actions { gap: 0.65rem; margin-top: 0.85rem; padding-top: 0.8rem; }
    .ol-action-btn { min-height: 36px; padding: 0.48rem 0.8rem; }
    .ol-action-icon { width: 1.1rem; height: 1.1rem; }
    .oneliner-text { font-size: 1rem; }
    .oneliner-media,
    .oneliner-media-btn { border-radius: 16px; }
    .oneliners-flow.ol-view-classic .oneliner-card { --ol-zig-offset: 0px; }
    .oneliners-flow.ol-view-vibey {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }
    .oneliners-flow.ol-view-vibey .oneliner-card {
        width: min(92vw, 740px);
        max-width: 92vw;
        --ol-vibey-offset-y: 0px;
        --ol-vibey-offset-x: 0px;
    }
    .oneliners-flow.ol-view-vibey .oneliner-card.ol-card-has-image {
        width: min(72vw, 520px);
        max-width: 72vw;
    }
    .oneliners-flow.ol-view-vibey .oneliner-card.ol-card-short {
        width: min(56vw, 420px);
        max-width: 56vw;
    }
    .oneliners-flow.ol-view-vibey .oneliner-card.ol-card-long {
        width: min(88vw, 780px);
        max-width: 88vw;
    }
    .oneliners-flow.ol-view-vibey .oneliner-text {
        font-size: 0.96rem;
        line-height: 1.5;
    }
    .oneliners-flow.ol-view-vibey .ol-vibey-signature {
        margin-bottom: 0.72rem;
        font-size: 0.82rem;
    }
    .oneliners-flow.ol-view-vibey .ol-post-meta {
        gap: 12px;
    }
    .oneliners-flow.ol-view-vibey .ol-post-meta-left {
        gap: 8px;
    }
    .oneliners-flow.ol-view-vibey .ol-heart-chip {
        padding: 4px 10px;
    }
    .oneliners-flow.ol-view-vibey .ol-author-link {
        gap: 0;
    }
    .oneliners-flow.ol-view-vibey .ol-author-link-avatar {
        width: 40px;
        height: 40px;
    }
    .oneliners-flow.ol-view-vibey .ol-post-time {
        margin-left: 8px;
        font-size: 0.72rem;
    }
    .oneliners-flow.ol-view-vibey .oneliner-card:nth-child(4n + 1) {
        --ol-vibey-offset-x: -18px;
        --ol-vibey-offset-y: 2px;
    }
    .oneliners-flow.ol-view-vibey .oneliner-card:nth-child(4n + 2) {
        --ol-vibey-offset-x: 24px;
        --ol-vibey-offset-y: 12px;
    }
    .oneliners-flow.ol-view-vibey .oneliner-card:nth-child(4n + 3) {
        --ol-vibey-offset-x: -6px;
        --ol-vibey-offset-y: -4px;
    }
    .oneliners-flow.ol-view-vibey .oneliner-card:nth-child(4n + 4) {
        --ol-vibey-offset-x: 16px;
        --ol-vibey-offset-y: 10px;
    }
    .ol-author { font-size: 0.7rem; }
    .reactions-row { gap: 4px; }
    .react-btn { font-size: 0.75rem; padding: 3px 8px; }

    /* ── Occasions ── */
    .occ-hero { padding: 1.2rem 1rem 1rem; }
    .occ-hero-icon-zone { width: 68px; height: 68px; margin-bottom: 0.4rem; }
    .occ-hero-icon { font-size: 2.8rem; }
    .occ-hero-title { font-size: 1.1rem; }
    .occ-hero-memory { font-size: 0.8rem; margin: 0.3rem 0 0.5rem; }

    .occasions-grid { gap: 0.8rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
    .occasion-card { padding: 1.1rem 0.9rem 0.9rem; border-radius: 16px; }
    .occasion-card.occ-has-image { padding: 0; }
    .occasion-card.occ-has-image > .card-inner { padding: 0 0 0.9rem; }
    .occasion-card.occ-has-image .activity-card-media-occasion { margin: 0 0 0.8rem; }
    .occasion-card.occ-has-image .occ-card-copy { padding: 0 0.9rem; }
    .tl-item.tl-has-image .tl-content { padding: 0 0 0.8rem; }
    .tl-item.tl-has-image .activity-card-media-routine { margin: 0 0 0.7rem; }
    .tl-item.tl-has-image .tl-copy { padding: 0 1rem; }
    .occ-icon-zone { width: 54px; height: 54px; margin: 0.2rem auto 0.4rem; }
    .occ-icon { font-size: 2rem; }
    .occ-title { font-size: 0.92rem; }
    .occ-memory { font-size: 0.76rem; margin: 0.15rem 0 0.4rem; }
    .occ-action-row { margin-top: 0.4rem; gap: 6px; }
    .occ-countdown { top: 10px; font-size: 0.64rem; padding: 3px 9px; }
    .occ-add-inner { min-height: 140px; gap: 0.45rem; }
    .occ-add-icon { font-size: 2rem; }
    .occ-add-label { font-size: 0.84rem; }

    /* ── Suggestions ── */
    .sug-cat-row { gap: 0.35rem; margin-bottom: 0.8rem; }
    .sug-cat-btn { font-size: 0.72rem; padding: 4px 11px; }
    .sug-add-cat-row { gap: 0.3rem; }
    .sug-add-tag-search { height: 22px; padding: 0 8px; }
    .sug-add-tag-search-input { width: 50px; height: 18px; line-height: 18px; font-size: 0.4rem; }
    .sug-add-cat-btn { font-size: 0.68rem; padding: 2px 8px; }

    #sugTrending { margin-bottom: 0.8rem; }
    .suggestions-flow { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.65rem; margin-bottom: 0.8rem; }
    .sug-card { border-radius: 13px; }
    .sug-card > .card-inner { padding: 0.75rem 0.85rem 0.65rem; gap: 0.3rem; }
    .sug-card-head { gap: 0.65rem; min-height: 42px; padding-right: 1.5rem; }
    .sug-card-head .ol-author-orb { width: 42px; height: 42px; }
    .sug-text { font-size: 0.84rem; }
    .sug-byline { font-size: 0.67rem; }
    .sug-card-meta { margin-top: 0.05rem; }
    .sug-card-footer { margin-top: 0.2rem; }
    .sug-vote-btn { font-size: 0.68rem; padding: 4px 9px; }
    .sug-card-trending .sug-text { font-size: 0.94rem !important; }
}

/* ═══════════════════════════════════════════════════════
   PAGE LOAD SPLASH SCREEN
   ═══════════════════════════════════════════════════════ */

.splash-screen {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at 50% 40%, #1a1040 0%, #0d0d1a 60%, #000 100%);
    pointer-events: none;
    animation: splashFadeOut 0.55s ease-in 2s forwards;
}

.splash-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    animation: splashDrop 0.7s cubic-bezier(0.22, 1.2, 0.36, 1) 0.1s both;
}

.splash-symbol {
    font-size: clamp(3.5rem, 12vw, 6rem);
    background: linear-gradient(135deg, #f6d365 0%, #fda085 50%, #f6d365 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 32px rgba(246,211,101,0.55));
    animation: splashSymbolSpin 0.7s cubic-bezier(0.22, 1.2, 0.36, 1) 0.1s both,
               splashPulse 1.2s ease-in-out 0.8s 2;
    line-height: 1;
}

.splash-wordmark {
    display: inline-flex;
    align-items: baseline;
    gap: 0;
    animation: splashWordFade 0.5s ease 0.5s both;
}
.sw-l {
    display: inline-block;
    font-size: clamp(3.31rem, 9.66vw, 6.21rem);
    letter-spacing: 0.04em;
}
.sw-float1 { animation: davFloat1 3.2s ease-in-out infinite; }
.sw-float2 { animation: davFloat2 3.8s ease-in-out infinite; }
.sw-float3 { animation: davFloat3 4.3s ease-in-out infinite; }
.sw-shine  { animation: davFloat1 3.2s ease-in-out infinite, davShine 6s linear infinite; }
.sw-fade   { animation: davFloat2 3.8s ease-in-out infinite, davFade 2.8s ease-in-out infinite alternate; }

.mobile-brand-header { display: none !important; }

.splash-tagline {
    font-size: clamp(0.65rem, 2vw, 0.85rem);
    letter-spacing: 0.18em;
    color: rgba(255,255,255,0.38);
    text-transform: uppercase;
    animation: splashWordFade 0.5s ease 0.75s both;
}

/* Floating particles */
.splash-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.sp {
    position: absolute;
    color: rgba(246,211,101,0.5);
    animation: splashParticle var(--dur, 2.5s) ease-in var(--delay, 0s) infinite;
    font-size: var(--sz, 1rem);
    left: var(--x, 50%);
}

.sp1  { --x:8%;  --sz:0.7rem; --dur:2.8s; --delay:0.1s; }
.sp2  { --x:17%; --sz:0.4rem; --dur:3.2s; --delay:0.6s; }
.sp3  { --x:28%; --sz:0.9rem; --dur:2.5s; --delay:0.3s; }
.sp4  { --x:42%; --sz:0.35rem;--dur:3.5s; --delay:0.9s; }
.sp5  { --x:58%; --sz:0.75rem;--dur:2.9s; --delay:0.2s; }
.sp6  { --x:72%; --sz:0.4rem; --dur:3.1s; --delay:0.7s; }
.sp7  { --x:84%; --sz:0.85rem;--dur:2.7s; --delay:0.4s; }
.sp8  { --x:93%; --sz:0.5rem; --dur:3.3s; --delay:1.0s; }

/* ── Keyframes ── */

@keyframes splashDrop {
    from { opacity: 0; transform: translateY(-60px) scale(0.85); }
    to   { opacity: 1; transform: translateY(0)     scale(1); }
}

@keyframes splashSymbolSpin {
    from { opacity: 0; transform: rotate(-90deg) scale(0.6); }
    to   { opacity: 1; transform: rotate(0deg)   scale(1); }
}

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

@keyframes splashPulse {
    0%, 100% { filter: drop-shadow(0 0 24px rgba(246,211,101,0.45)); }
    50%       { filter: drop-shadow(0 0 48px rgba(246,211,101,0.85)); }
}

@keyframes splashParticle {
    0%   { opacity: 0;   transform: translateY(110vh) rotate(0deg); }
    15%  { opacity: 0.7; }
    85%  { opacity: 0.4; }
    100% { opacity: 0;   transform: translateY(-10vh) rotate(360deg); }
}

@keyframes splashFadeOut {
    0%   { opacity: 1; transform: scale(1); }
    70%  { opacity: 0; transform: scale(1.04); }
    100% { opacity: 0; transform: scale(1.04); visibility: hidden; pointer-events: none; }
}

/* Prevent body scroll during splash */
body.splash-active { overflow: hidden; }

/* ── Circle Universe Loading ── */
.circle-loading {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.2rem;
    background: var(--circle-bg, linear-gradient(180deg, #09090d 0%, #101015 48%, #0b0b10 100%));
    padding: 2rem;
}

.cl-orbit-wrap {
    position: relative;
    width: 160px;
    height: 160px;
}

/* Concentric orbit rings */
.cl-ring {
    position: absolute;
    border-radius: 50%;
    border: 1.5px solid transparent;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}
.cl-ring1 {
    width: 90px; height: 90px;
    border-color: rgba(246,211,101,0.35);
    animation: clOrbit 1.8s linear infinite;
}
.cl-ring2 {
    width: 130px; height: 130px;
    border-color: rgba(168,130,255,0.28);
    animation: clOrbit 2.8s linear infinite reverse;
}
.cl-ring3 {
    width: 160px; height: 160px;
    border-color: rgba(99,179,255,0.2);
    animation: clOrbit 4s linear infinite;
}

/* Centre orb */
.cl-core {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.4rem;
    animation: clCorePulse 2s ease-in-out infinite;
    filter: drop-shadow(0 0 14px rgba(246,211,101,0.55));
    line-height: 1;
}

/* Orbiting dot — sits at 12-o'clock of its parent ring, rides it around */
.cl-dot {
    position: absolute;
    width: 9px; height: 9px;
    border-radius: 50%;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
}
.cl-dot-1 { background: #f6c76d; box-shadow: 0 0 8px #f6c76d; }
.cl-dot-2 { background: #ff7aa8; box-shadow: 0 0 8px #ff7aa8; }
.cl-dot-3 { background: #b9bcc8; box-shadow: 0 0 8px #b9bcc8; }

.cl-label {
    font-size: 0.92rem;
    color: rgba(255,255,255,0.6);
    letter-spacing: 0.04em;
    animation: clLabelFade 1.4s ease-in-out infinite alternate;
}
.cl-label strong { color: rgba(255,255,255,0.9); font-weight: 700; }

@keyframes clOrbit {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes clCorePulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1);    filter: drop-shadow(0 0 10px rgba(246,211,101,0.45)); }
    50%       { transform: translate(-50%, -50%) scale(1.12); filter: drop-shadow(0 0 22px rgba(246,211,101,0.75)); }
}
@keyframes clLabelFade {
    from { opacity: 0.45; }
    to   { opacity: 0.85; }
}

/* ── Swipe-to-Done (routine / workout / food) ── */

/* Cards need overflow:hidden + position:relative for the flash overlay */
.tl-item, .wo-card, .fo-card { overflow: hidden; }

/* Swipe right hint — a faint green edge glow during the gesture */
.tl-item, .wo-card, .fo-card {
    transition: box-shadow 0.2s ease, border-color 0.2s ease,
                background 0.3s ease, transform 0.2s ease;
}

/* Flash overlay that appears briefly after swipe */
.swipe-done-flash {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    border-radius: inherit;
    pointer-events: none;
    animation: swipeDoneFlash 0.85s ease forwards;
    z-index: 10;
}

@keyframes swipeDoneFlash {
    0%   { background: rgba(72,199,142,0.45); color: #fff; opacity: 1;  transform: scale(1);    }
    60%  { background: rgba(72,199,142,0.25); color: #fff; opacity: 1;  transform: scale(1.03); }
    100% { background: rgba(72,199,142,0);    color: #fff; opacity: 0;  transform: scale(1);    }
}

/* Undone flash — soft purple */
.swipe-done-flash:not(:empty) {
    /* "↩ Undone" text gets a slightly different tint via the animation below */
}


/* ── Mobile-only vs Desktop-only share controls ── */

/* Hide swipe share btn on desktop (hover-capable pointer devices) */
@media (hover: hover) and (pointer: fine) {
    .mobile-only-share { display: none !important; }
}

/* Hide desktop hover-share on touch devices (swipe handles it) */
@media (hover: none), (pointer: coarse) {
    .desktop-only-share { display: none !important; }
}

/* ── Routine time-lock states ── */

/* Future items — muted, not yet available */
.tl-item.tl-future {
    opacity: 0.45;
    cursor: not-allowed;
}
.tl-item.tl-future .tl-dot {
    background: rgba(255,255,255,0.2) !important;
    box-shadow: none !important;
}
.tl-item.tl-future .tl-time { color: rgba(255,255,255,0.35); }

/* Expired items — window passed (>3h ago), faded with strikethrough time */
.tl-item.tl-expired:not(.checked) {
    opacity: 0.3;
    cursor: not-allowed;
}
.tl-item.tl-expired:not(.checked) .tl-time {
    text-decoration: line-through;
    color: rgba(255,255,255,0.3);
}
.tl-item.tl-expired:not(.checked) .tl-dot {
    background: rgba(255,255,255,0.15) !important;
    box-shadow: none !important;
}

/* ===== CIRCLE DISCUSSION WALL ===== */

.cc-wall {
    display: flex; flex-direction: column; gap: 0;
}
.cc-list {
    display: flex; flex-direction: column; gap: 10px;
    overflow-y: auto; max-height: 55vh;
    padding: 4px 2px 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.12) transparent;
}
.cc-list::-webkit-scrollbar { width: 4px; }
.cc-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; }

.cc-item {
    display: flex; align-items: flex-start; gap: 10px;
    animation: ccItemIn 0.3s ease both;
}
@keyframes ccItemIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.cc-av {
    width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, rgba(167,139,250,0.55), rgba(99,102,241,0.55));
    color: #fff; font-size: 0.78rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; margin-top: 2px;
}
.cc-mine .cc-av {
    background: linear-gradient(135deg, rgba(246,211,101,0.6), rgba(253,160,133,0.6));
}
.cc-body {
    flex: 1; min-width: 0;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 0 14px 14px 14px;
    padding: 8px 12px;
}
.cc-mine .cc-body {
    background: rgba(167,139,250,0.1);
    border-color: rgba(167,139,250,0.2);
    border-radius: 14px 0 14px 14px;
}
.cc-meta {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 4px;
}
.cc-author {
    font-size: 0.73rem; font-weight: 700;
    color: var(--circle-accent, #a78bfa);
}
.cc-mine .cc-author { color: #f6d365; }
.cc-time {
    font-size: 0.67rem; color: rgba(255,255,255,0.3); flex: 1;
}
.cc-del {
    background: none; border: none; cursor: pointer;
    color: rgba(255,255,255,0.18); font-size: 0.7rem;
    padding: 1px 5px; border-radius: 6px;
    transition: color 0.2s, background 0.2s; line-height: 1;
}
.cc-del:hover { color: #ff9494; background: rgba(255,100,100,0.1); }
.cc-text {
    font-size: 0.87rem; color: rgba(255,255,255,0.88);
    line-height: 1.5; margin: 0;
    white-space: pre-wrap; word-break: break-word;
}
.cc-empty {
    display: flex; flex-direction: column; align-items: center;
    gap: 8px; padding: 2rem 0; color: rgba(255,255,255,0.3);
    font-size: 0.85rem; text-align: center;
}
.cc-empty-icon { font-size: 2rem; }
.cc-loading {
    text-align: center; color: rgba(255,255,255,0.3);
    font-size: 0.82rem; padding: 2rem 0;
}

/* Compose row */
.cc-compose {
    display: flex; gap: 8px; align-items: flex-end;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.08);
    margin-top: 8px;
}
.cc-textarea {
    flex: 1; background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px; color: #fff;
    font-size: 0.85rem; padding: 9px 14px;
    resize: none; outline: none;
    font-family: inherit; line-height: 1.45;
    transition: border-color 0.2s;
    max-height: 120px; overflow-y: auto;
}
.cc-textarea:focus {
    border-color: var(--circle-accent-border, rgba(167,139,250,0.4));
}
.cc-textarea::placeholder { color: rgba(255,255,255,0.28); }
.cc-post-btn {
    width: 40px; height: 40px; flex-shrink: 0;
    background: var(--circle-accent-soft, rgba(167,139,250,0.18));
    border: 1px solid var(--circle-accent-border, rgba(167,139,250,0.35));
    border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s, transform 0.15s;
    color: var(--circle-accent, #a78bfa);
}
.cc-post-btn:hover {
    background: var(--circle-accent-soft, rgba(167,139,250,0.3));
    transform: scale(1.08);
}
.cc-post-btn:disabled { opacity: 0.4; cursor: default; }

/* ===== CIRCLE COMMENTS ===== */

/* Comment toggle button inside feed card */
.feed-comment-toggle {
    display: inline-flex; align-items: center; gap: 5px;
    background: none; border: none; cursor: pointer;
    color: rgba(255,255,255,0.38);
    font-size: 0.76rem; font-weight: 600;
    padding: 4px 8px 0 0;
    margin-top: 4px;
    transition: color 0.2s;
}
.feed-comment-toggle svg { flex-shrink: 0; }
.feed-comment-toggle:hover { color: rgba(255,255,255,0.75); }
.feed-comment-toggle.has-comments { color: var(--circle-accent, #a78bfa); }

/* Comment thread container */
.feed-comment-thread {
    margin-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.07);
    padding-top: 8px;
    animation: fcThreadIn 0.25s ease both;
}
@keyframes fcThreadIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Individual comment item */
.fc-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }

.fc-item {
    display: flex; align-items: flex-start; gap: 8px;
    position: relative;
}
.fc-av {
    width: 26px; height: 26px; border-radius: 50%;
    background: linear-gradient(135deg, rgba(167,139,250,0.5), rgba(139,92,246,0.5));
    color: #fff; font-size: 0.7rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; margin-top: 2px;
}
.fc-body {
    flex: 1; min-width: 0;
    background: rgba(255,255,255,0.05);
    border-radius: 10px;
    padding: 6px 10px;
}
.fc-author {
    font-size: 0.72rem; font-weight: 700;
    color: var(--circle-accent, #a78bfa);
    margin-right: 6px;
}
.fc-time {
    font-size: 0.68rem; color: rgba(255,255,255,0.3);
}
.fc-text {
    font-size: 0.83rem; color: rgba(255,255,255,0.85);
    margin: 3px 0 0; line-height: 1.4;
    white-space: pre-wrap; word-break: break-word;
}
.fc-del {
    background: none; border: none; cursor: pointer;
    color: rgba(255,255,255,0.18); font-size: 0.72rem;
    padding: 2px 5px; border-radius: 6px;
    transition: color 0.2s, background 0.2s;
    flex-shrink: 0; margin-top: 4px;
}
.fc-del:hover { color: #ff9494; background: rgba(255,100,100,0.12); }

/* Empty state */
.fc-empty {
    font-size: 0.78rem; color: rgba(255,255,255,0.3);
    font-style: italic; text-align: center;
    padding: 6px 0 10px;
}

/* Loading */
.fc-loading {
    font-size: 0.78rem; color: rgba(255,255,255,0.3);
    text-align: center; padding: 8px 0;
}

/* Input row */
.fc-input-row {
    display: flex; gap: 8px; align-items: center;
}
.fc-input {
    flex: 1; background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px; color: #fff;
    font-size: 0.82rem; padding: 7px 14px;
    outline: none; transition: border-color 0.2s;
    font-family: inherit;
}
.fc-input:focus { border-color: var(--circle-accent-border, rgba(167,139,250,0.4)); }
.fc-input::placeholder { color: rgba(255,255,255,0.3); }
.fc-post-btn {
    background: var(--circle-accent-soft, rgba(167,139,250,0.15));
    border: 1px solid var(--circle-accent-border, rgba(167,139,250,0.3));
    color: var(--circle-accent, #a78bfa);
    font-size: 0.8rem; font-weight: 700;
    padding: 7px 14px; border-radius: 20px; cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    white-space: nowrap; font-family: inherit;
}
.fc-post-btn:hover {
    background: var(--circle-accent-soft, rgba(167,139,250,0.28));
    transform: scale(1.04);
}
.fc-post-btn:disabled { opacity: 0.4; cursor: default; }

/* ===== DAILY BRIEF ===== */
.db-overlay {
    position: fixed; inset: 0; z-index: 10004;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(20px) saturate(1.4);
    background: rgba(0,0,0,0.75);
    animation: dbFadeIn 0.45s ease both;
}
.db-overlay.db-exit {
    animation: dbFadeOut 0.35s ease forwards;
}
@keyframes dbFadeIn  { from { opacity: 0 } to { opacity: 1 } }
@keyframes dbFadeOut { from { opacity: 1 } to { opacity: 0 } }

.db-panel {
    width: min(480px, 94vw);
    max-height: 88vh;
    overflow-y: auto;
    overflow-x: hidden;
    background: linear-gradient(160deg, #1a1a2e 0%, #16213e 60%, #0f1b30 100%);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 28px;
    padding: 2rem 1.8rem 1.8rem;
    display: flex; flex-direction: column; gap: 1.1rem;
    box-shadow: 0 32px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
    scrollbar-width: none;
}
.db-panel::-webkit-scrollbar { display: none; }

.db-header {
    animation: dbCardIn 0.5s ease both;
    animation-delay: 0.05s;
}
.db-greeting {
    font-size: clamp(1.25rem, 4vw, 1.65rem);
    font-weight: 800; color: #fff; line-height: 1.2;
}
.db-subtitle {
    font-size: 0.8rem; color: rgba(255,255,255,0.4);
    margin-top: 0.3rem; letter-spacing: 0.01em;
}

/* ── Divider line ── */
.db-header::after {
    content: '';
    display: block;
    height: 1px;
    background: linear-gradient(90deg, rgba(246,211,101,0.35), transparent);
    margin-top: 1rem;
}

.db-cards { display: flex; flex-direction: column; gap: 0.65rem; }

.db-card {
    display: flex; align-items: flex-start; gap: 0.95rem;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 16px;
    padding: 0.95rem 1.1rem;
    animation: dbCardIn 0.6s cubic-bezier(0.34,1.56,0.64,1) both;
    animation-delay: calc(0.22s + var(--di,0) * 0.14s);
    transition: background 0.2s, transform 0.2s;
}
.db-card:hover {
    background: rgba(255,255,255,0.1);
    transform: translateX(4px);
}

/* Accent borders per card type */
.db-card[data-type="friend"]  { border-left: 3px solid rgba(167,139,250,0.6); }
.db-card[data-type="vibe"]    { border-left: 3px solid rgba(246,211,101,0.6); }
.db-card[data-type="event"]   { border-left: 3px solid rgba(252,165,165,0.6); }
.db-card[data-type="suggest"] { border-left: 3px solid rgba(110,231,183,0.6); }
.db-card[data-type="routine"] { border-left: 3px solid rgba(147,197,253,0.6); }

.db-card-icon {
    font-size: 1.75rem; line-height: 1;
    flex-shrink: 0; margin-top: 1px;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
}
.db-card-body { display: flex; flex-direction: column; gap: 0.18rem; min-width: 0; }
.db-card-label {
    font-size: 0.64rem; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; color: rgba(255,255,255,0.4);
}
.db-card-value {
    font-size: 0.97rem; font-weight: 700; color: #fff; line-height: 1.4;
    white-space: normal; word-break: break-word;
}
.db-card-sub {
    font-size: 0.76rem; color: rgba(255,255,255,0.42);
    font-style: italic; margin-top: 1px;
}

.db-go-btn {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    align-self: center;
    background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
    color: #1a1205; font-weight: 800; font-size: 0.95rem;
    border: none; border-radius: 40px;
    padding: 0.8rem 2.4rem; cursor: pointer;
    margin-top: 0.3rem;
    animation: dbCardIn 0.55s cubic-bezier(0.34,1.56,0.64,1) both;
    transition: transform 0.2s, box-shadow 0.2s;
}
.db-go-btn:hover {
    transform: scale(1.05) translateY(-1px);
    box-shadow: 0 10px 28px rgba(246,211,101,0.4);
}
.db-go-btn svg { stroke: #1a1205; }

@keyframes dbCardIn {
    from { opacity: 0; transform: translateY(26px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 480px) {
    .db-panel { padding: 1.6rem 1.3rem 1.5rem; border-radius: 22px; }
    .db-card-icon { font-size: 1.55rem; }
}

/* ===== CIRCLE VIEW REFRESH ===== */
.circle-view {
    background:
        radial-gradient(circle at 50% -10%, rgba(255,255,255,0.04), transparent 26%),
        radial-gradient(circle at 22% 18%, color-mix(in srgb, var(--circle-accent, #ff5c96) 8%, transparent), transparent 32%),
        radial-gradient(circle at 78% 70%, rgba(255,255,255,0.02), transparent 30%),
        var(--circle-bg, linear-gradient(180deg, #09090d 0%, #101015 48%, #0b0b10 100%));
}
.circle-view::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.38;
    background-image:
        radial-gradient(circle at 16% 14%, rgba(255,255,255,0.2) 0 1px, transparent 1.5px),
        radial-gradient(circle at 74% 18%, rgba(255,255,255,0.12) 0 1px, transparent 1.6px),
        radial-gradient(circle at 34% 42%, rgba(255,255,255,0.14) 0 1px, transparent 1.6px),
        radial-gradient(circle at 82% 56%, rgba(255,255,255,0.1) 0 1px, transparent 1.6px),
        radial-gradient(circle at 20% 76%, rgba(255,255,255,0.1) 0 1px, transparent 1.6px),
        radial-gradient(circle at 62% 84%, rgba(255,255,255,0.16) 0 1px, transparent 1.6px);
}
.circle-view::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: min(42vw, 320px);
    height: 2px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, rgba(255,255,255,0), color-mix(in srgb, var(--circle-accent, #ff5c96) 42%, rgba(255,255,255,0.26)), rgba(255,255,255,0));
    opacity: 0.58;
    pointer-events: none;
    filter: blur(0.4px);
}
.circle-view-inner {
    position: relative;
    z-index: 1;
    max-width: 800px;
    padding: 8px 22px 24px;
    font-family: 'Poppins', sans-serif;
    text-rendering: optimizeLegibility;
}
.circle-view-header {
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.circle-view-header::before {
    width: 280px;
    height: 124px;
    top: -12px;
    background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--circle-accent, #ff5c96) 5%, transparent), transparent 72%);
    opacity: 0.18;
}
.circle-nav-row {
    padding: 2px 4px 0;
}
.circle-back-btn,
.circle-manage-btn {
    min-height: 40px;
    gap: 7px;
    padding: 0 16px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(241, 238, 251, 0.88);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: -0.02em;
}
.circle-back-btn svg,
.circle-manage-btn svg {
    flex: 0 0 auto;
}
.circle-share-btn {
    width: 40px;
    min-width: 40px;
    padding: 0;
    justify-content: center;
}
.circle-back-btn:hover,
.circle-manage-btn:hover {
    background: rgba(255,255,255,0.11);
    color: #fff;
    border-color: rgba(255,255,255,0.18);
}
.circle-leave-btn {
    width: 40px;
    min-width: 40px;
    padding: 0;
    justify-content: center;
    color: rgba(255, 176, 186, 0.96);
    border-color: rgba(255, 129, 151, 0.24);
}
.circle-leave-btn:hover {
    background: rgba(255, 107, 107, 0.14);
    border-color: rgba(255, 129, 151, 0.34);
}
.circle-hero-row {
    gap: 2px;
    padding: 0 18px 2px;
    margin-top: -20px;
}
.circle-hero-orb-shell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%, rgba(255,255,255,0.05), rgba(255,255,255,0.01) 62%, transparent 66%),
        linear-gradient(135deg, color-mix(in srgb, var(--circle-tab-active, #ffd3e2) 22%, #fff 78%), color-mix(in srgb, var(--circle-accent, #ff5c96) 34%, #ffb37b 66%));
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.08),
        0 0 12px color-mix(in srgb, var(--circle-accent, #ff5c96) 16%, transparent),
        0 0 28px color-mix(in srgb, var(--circle-accent, #ff5c96) 10%, transparent),
        0 0 56px rgba(255,255,255,0.03);
    animation: orbRadiate 3s ease-in-out infinite;
}
@keyframes orbRadiate {
    0%, 100% {
        box-shadow:
            0 0 0 1px rgba(255,255,255,0.08),
            0 0 12px color-mix(in srgb, var(--circle-accent, #ff5c96) 16%, transparent),
            0 0 28px color-mix(in srgb, var(--circle-accent, #ff5c96) 10%, transparent),
            0 0 56px rgba(255,255,255,0.03);
    }
    50% {
        box-shadow:
            0 0 0 1px rgba(255,255,255,0.12),
            0 0 16px color-mix(in srgb, var(--circle-accent, #ff5c96) 22%, transparent),
            0 0 38px color-mix(in srgb, var(--circle-accent, #ff5c96) 14%, transparent),
            0 0 72px rgba(255,255,255,0.04);
    }
}
.circle-hero-orb-shell::before {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    background: rgba(12, 12, 30, 0.9);
}
.circle-hero-orb {
    position: relative;
    z-index: 1;
    width: 85px;
    height: 85px;
    font-size: 2.3rem;
    border: none;
    background: transparent;
    box-shadow: none;
}
.circle-hero-name {
    font-size: clamp(1.54rem, 2.4vw, 1.94rem);
    letter-spacing: -0.045em;
    font-weight: 600;
    line-height: 1.02;
}
.circle-hero-stats {
    justify-content: center;
    gap: 6px;
    color: rgba(223, 217, 236, 0.72);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: -0.02em;
}
.circle-stat-sep {
    color: rgba(255,255,255,0.28);
    font-size: 0.8rem;
}
.circle-hero-description {
    margin: 0;
    max-width: 420px;
    text-align: center;
    color: rgba(223, 217, 236, 0.58);
    font-size: 0.77rem;
    font-weight: 400;
    letter-spacing: -0.015em;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.circle-tabs-wrap {
    padding: 0;
    border-top: 1px solid rgba(255,255,255,0.18);
    border-bottom: none;
    margin-top: 4px;
    position: sticky;
    top: 0;
    z-index: 10;
    background:
        linear-gradient(180deg, rgba(10,10,14,0.985), rgba(10,10,14,0.95));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
.circle-tabs {
    gap: 6px;
    padding: 5px 0 5px;
    background: transparent;
    border-bottom: none;
}
.circle-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 10px;
    border-radius: 999px;
    color: rgba(224, 219, 238, 0.54);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: -0.018em;
    background: transparent;
}
.circle-tab:hover {
    color: rgba(255,255,255,0.9);
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.1);
}
.circle-tab.active {
    color: #fff;
    background: rgba(255,255,255,0.09);
    border-color: color-mix(in srgb, var(--circle-accent, #8b5cf6) 34%, rgba(255,255,255,0.12));
    font-weight: 600;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        0 0 0 1px color-mix(in srgb, var(--circle-tab-active, #7c89ff) 14%, transparent),
        0 12px 24px rgba(6, 7, 24, 0.16);
}
.circle-tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
}
.circle-tab-icon svg {
    width: 13px;
    height: 13px;
    stroke: currentColor;
    fill: none;
}
.circle-feed-meta {
    padding: 10px 6px 8px;
    margin-top: 2px;
    text-align: center;
    color: rgba(223, 217, 236, 0.64);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: -0.018em;
    border-top: 1px solid rgba(255,255,255,0.18);
    background: linear-gradient(180deg, rgba(10,10,14,0.95), rgba(10,10,14,0.9));
}
.circle-feed {
    gap: 16px;
    padding: 8px 0 28px;
}
.circle-view-inner::-webkit-scrollbar {
    width: 8px;
}
.circle-view-inner::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.12);
    border-radius: 999px;
}
.circle-empty-state {
    margin: 12px 0 0;
    border-radius: 30px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
}
.feed-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: flex-start;
    padding: 22px 22px 18px;
    border-radius: 30px;
    background:
        radial-gradient(circle at 82% 100%, color-mix(in srgb, var(--circle-accent, #8b5cf6) 12%, transparent), transparent 28%),
        linear-gradient(180deg, rgba(23, 19, 49, 0.78), rgba(17, 17, 37, 0.82));
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.04),
        0 20px 40px rgba(5, 6, 24, 0.22);
}
.feed-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 16%;
    width: 36%;
    height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,0), color-mix(in srgb, var(--circle-tab-active, #7c89ff) 60%, rgba(255,255,255,0.4)), rgba(255,255,255,0));
    opacity: 0.72;
}
.feed-card:hover {
    background:
        radial-gradient(circle at 82% 100%, color-mix(in srgb, var(--circle-accent, #8b5cf6) 16%, transparent), transparent 28%),
        linear-gradient(180deg, rgba(28, 24, 58, 0.84), rgba(19, 19, 42, 0.88));
    border-color: rgba(255,255,255,0.12);
}
.feed-avatar {
    width: 60px;
    height: 60px;
    font-size: 1.7rem;
    box-shadow: 0 14px 24px rgba(0,0,0,0.2);
}
.feed-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.feed-meta-row {
    gap: 8px;
    margin-bottom: 0;
    flex-wrap: wrap;
}
.feed-author {
    font-size: 0.88rem;
    color: #fff;
    font-weight: 600;
    letter-spacing: -0.02em;
}
.feed-meta-sep {
    color: rgba(255,255,255,0.22);
    font-size: 0.84rem;
}
.feed-type-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: rgba(223, 217, 236, 0.58);
    font-weight: 500;
    letter-spacing: -0.012em;
}
.feed-type-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.feed-time {
    margin-left: auto;
    font-size: 0.8rem;
    color: rgba(223, 217, 236, 0.48);
    letter-spacing: -0.012em;
}
.feed-remove-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-left: 2px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.46);
}
.feed-remove-btn:hover {
    color: #ffb5bf;
    background: rgba(255,107,107,0.12);
}
.feed-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.feed-text {
    margin: 0;
    white-space: pre-wrap;
    overflow: visible;
    text-overflow: clip;
    font-size: 0.94rem;
    font-style: normal;
    line-height: 1.62;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.feed-text strong {
    color: #fff;
    font-weight: 600;
}
.feed-text-quote {
    font-size: clamp(1.05rem, 1.8vw, 1.28rem);
    font-style: italic;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.02em;
}
.feed-inline-icon {
    margin-right: 0.35rem;
}
.feed-inline-sep {
    color: rgba(255,255,255,0.28);
}
.feed-photo-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
}
.feed-photo {
    width: min(100%, 520px);
    max-height: 420px;
    margin-top: 0;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 18px 34px rgba(0,0,0,0.18);
}
.feed-photo-caption {
    color: rgba(223, 217, 236, 0.7);
    font-size: 0.82rem;
    font-style: italic;
    letter-spacing: -0.01em;
}
.feed-actions-row {
    display: flex;
    align-items: center;
    gap: 18px;
}
.circle-feed .feed-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px 10px;
    border-radius: 24px;
    font-family: "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
.circle-feed .feed-avatar {
    width: 36px;
    height: 36px;
    margin-top: 1px;
    font-size: 1rem;
    flex: 0 0 36px;
}
.circle-feed .feed-main {
    flex: 1 1 auto;
    min-width: 0;
    gap: 5px;
}
.circle-feed .feed-meta-row {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: nowrap;
    min-width: 0;
}
.circle-feed .feed-author {
    font-size: 0.8rem;
    line-height: 1.08;
    font-weight: 600;
    letter-spacing: -0.015em;
}
.circle-feed .feed-type-label {
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 500;
    color: rgba(223, 217, 236, 0.62);
    white-space: nowrap;
}
.circle-feed .feed-time {
    margin-left: 0;
    font-size: 0.72rem;
    font-weight: 500;
    color: rgba(223, 217, 236, 0.46);
    white-space: nowrap;
    flex: 0 0 auto;
}
.circle-feed .feed-card-tools {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}
.circle-feed .feed-remove-btn {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
}
.circle-feed .feed-content {
    gap: 4px;
}
.circle-feed .feed-text {
    font-size: 0.84rem;
    line-height: 1.28;
    letter-spacing: -0.012em;
    font-weight: 400;
}
.circle-feed .feed-text-quote {
    font-size: clamp(0.92rem, 1.12vw, 1rem);
    line-height: 1.22;
    font-weight: 400;
    letter-spacing: -0.015em;
}
.circle-feed .feed-inline-icon {
    margin-right: 0.2rem;
}
.circle-feed .feed-actions-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 0;
}
.circle-feed .feed-like-btn,
.circle-feed .feed-comment-toggle {
    font-size: 0.72rem;
    font-weight: 500;
}
.circle-feed .feed-actions-cluster {
    display: inline-flex;
    align-items: center;
    gap: 14px;
}
.circle-feed .feed-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-left: auto;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid rgba(246, 211, 101, 0.2);
    background: rgba(246, 211, 101, 0.1);
    color: rgba(246, 211, 101, 0.92);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.circle-feed .feed-add-chip-icon {
    font-size: 0.9rem;
    line-height: 1;
    font-weight: 700;
}
.circle-feed .feed-photo-caption {
    font-size: 0.78rem;
    font-style: italic;
    font-weight: 400;
}
.circle-feed .feed-card[data-feed-type="oneliner"] .feed-content {
    margin-top: -1px;
}
.circle-feed .circle-share-tile {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}
.circle-feed .circle-share-bundle {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}
.circle-feed .circle-share-bundle-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.circle-feed .circle-share-bundle-preview-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.68rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(240, 234, 252, 0.72);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.2;
}
.circle-feed .circle-share-bundle-head {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.circle-feed .circle-share-bundle-eyebrow {
    align-self: flex-start;
    padding: 0.22rem 0.68rem;
    border-radius: 999px;
    background: rgba(246, 211, 101, 0.14);
    border: 1px solid rgba(246, 211, 101, 0.2);
    color: rgba(246, 211, 101, 0.92);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.circle-feed .circle-share-bundle-list {
    display: grid;
    gap: 12px;
}
.circle-feed .circle-share-bundle-toggle {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.44rem 0.82rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05);
    color: rgba(247, 243, 255, 0.86);
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}
.circle-feed .circle-share-bundle-toggle:hover {
    transform: translateY(-1px);
    background: rgba(255,255,255,0.09);
    border-color: rgba(255,255,255,0.2);
}
.circle-feed .circle-share-bundle-toggle svg {
    transition: transform 0.18s ease;
}
.circle-feed .circle-share-bundle.is-collapsed .circle-share-bundle-list {
    display: none;
}
.circle-feed .circle-share-bundle.is-expanded .circle-share-bundle-toggle svg {
    transform: rotate(180deg);
}
.circle-feed .circle-share-bundle-entry {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border-radius: 20px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
}
.circle-feed .circle-share-bundle-entry-title {
    margin: 0;
    color: #f7f7fb;
    font-size: 0.92rem;
    line-height: 1.28;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.circle-feed .circle-share-title {
    margin: 0;
    color: #f7f7fb;
    font-size: 0.98rem;
    line-height: 1.28;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.circle-feed .circle-share-copy {
    margin: 0;
    color: rgba(232, 227, 244, 0.78);
    font-size: 0.84rem;
    line-height: 1.5;
    letter-spacing: -0.01em;
}
.circle-feed .circle-share-kicker {
    align-self: flex-start;
    padding: 0.2rem 0.72rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(240, 234, 252, 0.72);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.circle-feed .circle-share-media {
    width: 100%;
}
.circle-feed .circle-share-media img {
    width: min(100%, 520px);
    max-height: 420px;
    object-fit: cover;
    border-radius: 22px;
}
.circle-feed .circle-share-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.circle-feed .circle-share-list li {
    position: relative;
    padding-left: 14px;
    color: rgba(232, 227, 244, 0.78);
    font-size: 0.82rem;
    line-height: 1.45;
}
.circle-feed .circle-share-list li::before {
    content: '›';
    position: absolute;
    left: 0;
    color: rgba(255,255,255,0.4);
}
.circle-feed .circle-share-notes-block {
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
}
.circle-feed .circle-share-notes-copy {
    margin: 0;
    color: rgba(245, 241, 252, 0.84);
    font-size: 0.82rem;
    line-height: 1.5;
    white-space: pre-wrap;
}
.circle-feed .circle-share-emoji {
    font-size: 2rem;
    line-height: 1;
    margin-bottom: -2px;
}
.circle-feed .circle-share-icon-zone {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
    border: 1px solid rgba(255,255,255,0.08);
}
.circle-feed .circle-share-icon {
    font-size: 2rem;
    line-height: 1;
}
.circle-feed .occ-title,
.circle-feed .occ-date,
.circle-feed .occ-memory,
.circle-feed .tile-notes-label,
.circle-feed .wo-day,
.circle-feed .wo-badge,
.circle-feed .fo-tag {
    color: inherit;
}
.circle-feed .occ-title {
    color: #f7f7fb;
    margin: 0;
}
.circle-feed .occ-date {
    color: rgba(232, 227, 244, 0.54);
    margin-bottom: 0;
}
.circle-feed .occ-memory {
    color: rgba(232, 227, 244, 0.74);
    margin: 0;
    font-style: normal;
}
.circle-feed .wo-day {
    align-self: flex-start;
    margin-bottom: 0;
    background: rgba(255,255,255,0.08);
    color: rgba(240, 234, 252, 0.72);
}
.circle-feed .wo-badge,
.circle-feed .fo-tag {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.14);
    color: rgba(247, 243, 255, 0.84);
}
.circle-feed .tile-notes-label {
    color: rgba(240, 234, 252, 0.58);
    margin-bottom: 0.35rem;
}
.circle-feed .feed-card[data-feed-type="photo"] .feed-main {
    gap: 10px;
}
.circle-feed .feed-card[data-feed-type="photo"] .feed-photo {
    width: min(100%, 470px);
}
.circle-feed .feed-card[data-feed-type="photo"] .feed-photo-caption {
    margin-top: -2px;
}
.feed-like-btn,
.feed-comment-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0;
    margin-top: 0;
    border: none;
    background: transparent;
    color: rgba(223, 217, 236, 0.58);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: -0.012em;
}
.feed-like-btn svg,
.feed-comment-toggle svg {
    flex: 0 0 auto;
}
.circle-feed .feed-add-btn:hover,
.feed-like-btn:hover,
.feed-comment-toggle:hover {
    background: transparent;
    color: #fff;
}
.circle-feed .feed-add-btn:hover {
    background: rgba(246, 211, 101, 0.16);
    border-color: rgba(246, 211, 101, 0.3);
    color: #ffe59a;
}
.feed-like-btn.liked {
    background: transparent;
    border-color: transparent;
    color: #ff8ea7;
}
.feed-comment-toggle.has-comments {
    color: var(--circle-tab-active, #a78bfa);
}
.feed-comment-thread {
    margin-top: 2px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.07);
}
.fc-list {
    gap: 10px;
    margin-bottom: 14px;
}
.fc-item {
    gap: 10px;
}
.fc-av {
    width: 30px;
    height: 30px;
    font-size: 0.78rem;
}
.fc-body {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 16px;
    padding: 10px 12px;
}
.fc-author {
    font-size: 0.72rem;
    letter-spacing: -0.01em;
}
.fc-time {
    font-size: 0.66rem;
    letter-spacing: -0.01em;
}
.fc-text {
    font-size: 0.8rem;
    line-height: 1.5;
    letter-spacing: -0.008em;
}
.fc-input-row {
    gap: 10px;
}
.fc-input {
    min-height: 46px;
    border-radius: 999px;
    padding: 0 16px;
    background: rgba(255,255,255,0.06);
}
.fc-post-btn {
    min-height: 46px;
    padding: 0 18px;
    border-radius: 999px;
}
.cc-wall {
    gap: 14px;
}
.circle-feed .cc-list {
    max-height: none;
    overflow: visible;
    gap: 14px;
    padding: 0;
}
.cc-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px 10px;
    border-radius: 24px;
    background:
        radial-gradient(circle at 82% 100%, color-mix(in srgb, var(--circle-accent, #8b5cf6) 12%, transparent), transparent 28%),
        linear-gradient(180deg, rgba(23, 19, 49, 0.78), rgba(17, 17, 37, 0.82));
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.04),
        0 20px 40px rgba(5, 6, 24, 0.18);
    font-family: "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
.cc-av {
    width: 36px;
    height: 36px;
    font-size: 1rem;
    margin-top: 1px;
    flex: 0 0 36px;
}
.cc-body {
    flex: 1;
    min-width: 0;
    border-radius: 0;
    padding: 0;
    background: transparent;
    border: none;
}
.cc-mine .cc-body {
    background: transparent;
    border-color: transparent;
}
.cc-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    min-width: 0;
}
.cc-author {
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.015em;
}
.cc-mine .cc-author { color: #fff; }
.cc-time {
    font-size: 0.72rem;
    font-weight: 500;
    color: rgba(223, 217, 236, 0.46);
    letter-spacing: -0.01em;
    margin-left: 0;
    flex: 0 0 auto;
}
.cc-del {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-left: auto;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
    color: rgba(223, 217, 236, 0.42);
    font-size: 1rem;
    line-height: 1;
}
.cc-del:hover {
    color: #ffb5bf;
    background: rgba(255,107,107,0.12);
}
.cc-text {
    font-size: 0.84rem;
    line-height: 1.28;
    letter-spacing: -0.012em;
    color: rgba(255,255,255,0.94);
    font-weight: 400;
}
.cc-post-img {
    max-width: 100%;
    max-height: 240px;
    border-radius: 8px;
    margin-top: 6px;
    object-fit: cover;
}
.cc-compose {
    margin-top: 2px;
    padding-top: 14px;
    gap: 12px;
    align-items: flex-end;
    border-top: 1px solid rgba(255,255,255,0.07);
}
.cc-textarea {
    min-height: 50px;
    padding: 12px 16px;
    border-radius: 24px;
    font-size: 0.88rem;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    font-family: "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.35;
}
.cc-post-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(223, 217, 236, 0.7);
}
.cc-post-btn:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
    transform: none;
}

.circle-admin {
    background:
        radial-gradient(circle at 24% 14%, rgba(124, 137, 255, 0.18), transparent 28%),
        radial-gradient(circle at 78% 78%, rgba(255, 120, 173, 0.12), transparent 30%),
        linear-gradient(180deg, rgba(9, 10, 27, 0.96), rgba(7, 7, 20, 0.98));
    backdrop-filter: blur(22px);
}
.circle-admin-inner {
    max-width: 860px;
    padding: 22px 24px 28px;
    gap: 16px;
}
.circle-admin-header {
    gap: 16px;
    padding: 0;
    border-bottom: none;
}
.circle-admin-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.circle-admin-eyebrow {
    color: rgba(223, 217, 236, 0.46);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.circle-admin-header h3 {
    flex: 1;
    margin: 0;
    color: #fff;
    font-size: clamp(1.4rem, 2.8vw, 1.95rem);
    font-weight: 600;
    letter-spacing: -0.045em;
    line-height: 1.02;
}
.circle-admin-body {
    padding: 0 0 8px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
}
.circle-admin-body::-webkit-scrollbar {
    width: 8px;
}
.circle-admin-body::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.12);
    border-radius: 999px;
}
.circle-admin-section {
    margin: 0;
    padding: 18px 20px;
    border-radius: 28px;
    border: 1px solid rgba(255,255,255,0.08);
    background:
        radial-gradient(circle at 82% 100%, color-mix(in srgb, var(--circle-accent, #8b5cf6) 12%, transparent), transparent 28%),
        linear-gradient(180deg, rgba(23, 19, 49, 0.78), rgba(17, 17, 37, 0.82));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.04),
        0 20px 40px rgba(5, 6, 24, 0.2);
}
.circle-admin-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.circle-admin-section-title {
    margin: 0;
    color: rgba(255,255,255,0.92);
    font-size: 0.84rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    text-transform: none;
}
.circle-admin-section-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(223, 217, 236, 0.72);
    font-size: 0.72rem;
    font-weight: 600;
}
.circle-member-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.circle-member-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 0;
    padding: 12px 14px;
    border-radius: 20px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
}
.circle-member-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    color: #fff;
    font-size: 0.96rem;
    font-weight: 700;
    background: linear-gradient(135deg, rgba(167,139,250,0.62), rgba(99,102,241,0.62));
    box-shadow: 0 12px 20px rgba(0,0,0,0.16);
}
.circle-member-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.circle-member-name {
    flex: none;
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: -0.015em;
}
.circle-member-time {
    color: rgba(223, 217, 236, 0.48);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: -0.01em;
}
.circle-member-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}
.circle-approve-btn,
.circle-reject-btn,
.circle-remove-btn {
    height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: -0.012em;
}
.circle-approve-btn {
    background: rgba(72,199,142,0.16);
    border-color: rgba(72,199,142,0.28);
    color: #83f2ba;
}
.circle-approve-btn:hover {
    background: rgba(72,199,142,0.24);
}
.circle-reject-btn {
    background: rgba(255,107,107,0.12);
    border-color: rgba(255,107,107,0.24);
    color: #ffb0ba;
}
.circle-reject-btn:hover {
    background: rgba(255,107,107,0.2);
}
.circle-remove-btn {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.1);
    color: rgba(223, 217, 236, 0.76);
}
.circle-remove-btn:hover {
    background: rgba(255,107,107,0.12);
    border-color: rgba(255,107,107,0.22);
    color: #ffb0ba;
}
.circle-admin-empty {
    min-height: 116px;
    padding: 18px;
    border-radius: 22px;
    border: 1px dashed rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.02);
    display: flex;
    align-items: center;
    justify-content: center;
}
.circle-admin-section-danger {
    border-color: rgba(255, 107, 107, 0.18);
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 107, 107, 0.16), transparent 36%),
        linear-gradient(180deg, rgba(48, 16, 25, 0.9), rgba(29, 11, 18, 0.92));
}
.circle-admin-danger-copy {
    margin: 0 0 14px;
    color: rgba(255, 216, 223, 0.8);
    font-size: 0.8rem;
    line-height: 1.5;
}
.circle-delete-btn {
    width: 100%;
    min-height: 42px;
    border-radius: 18px;
    border: 1px solid rgba(255, 107, 107, 0.28);
    background: rgba(255, 107, 107, 0.16);
    color: #ffd6dc;
    font: 600 0.82rem 'Poppins', sans-serif;
    letter-spacing: -0.01em;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.circle-delete-btn:hover {
    background: rgba(255, 107, 107, 0.24);
    border-color: rgba(255, 107, 107, 0.38);
    transform: translateY(-1px);
}
.circle-delete-btn:active {
    transform: scale(0.985);
}
.circle-empty {
    margin: 0;
    color: rgba(223, 217, 236, 0.48);
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: -0.01em;
}
[data-theme="minimal"] .circle-view {
    background:
        radial-gradient(circle at 50% -8%, rgba(255,255,255,0.05), transparent 28%),
        radial-gradient(circle at 20% 22%, rgba(170,170,174,0.08), transparent 34%),
        radial-gradient(circle at 78% 68%, rgba(124,124,128,0.06), transparent 30%),
        var(--circle-bg, linear-gradient(180deg, rgba(14, 14, 16, 0.98), rgba(9, 9, 10, 0.98)));
}
[data-theme="minimal"] .circle-view::after {
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(218,218,222,0.34), rgba(255,255,255,0));
}
[data-theme="minimal"] .circle-view-header::before {
    background: radial-gradient(ellipse at 50% 0%, rgba(188,188,192,0.12), transparent 70%);
}
[data-theme="minimal"] .circle-hero-orb-shell {
    background:
        radial-gradient(circle at 50% 50%, rgba(255,255,255,0.05), rgba(255,255,255,0.01) 62%, transparent 66%),
        linear-gradient(135deg, rgba(222,222,225,0.78), rgba(128,128,132,0.72));
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.06),
        0 0 16px rgba(255,255,255,0.04);
}
[data-theme="minimal"] .feed-card,
[data-theme="minimal"] .cc-item,
[data-theme="minimal"] .circle-admin-section {
    background:
        radial-gradient(circle at 82% 100%, rgba(255,255,255,0.04), transparent 28%),
        linear-gradient(180deg, rgba(28, 28, 30, 0.86), rgba(18, 18, 20, 0.9));
}
[data-theme="minimal"] .feed-card:hover {
    background:
        radial-gradient(circle at 82% 100%, rgba(255,255,255,0.05), transparent 28%),
        linear-gradient(180deg, rgba(34, 34, 36, 0.9), rgba(21, 21, 23, 0.92));
}
[data-theme="minimal"] .circle-admin {
    background:
        radial-gradient(circle at 24% 14%, rgba(176,176,180,0.08), transparent 28%),
        radial-gradient(circle at 78% 78%, rgba(255,255,255,0.05), transparent 30%),
        linear-gradient(180deg, rgba(12, 12, 13, 0.96), rgba(8, 8, 9, 0.98));
}
[data-theme="minimal"] .circle-admin-section-count {
    color: rgba(234,234,236,0.74);
}
@media (max-width: 900px) {
    .circle-view-inner {
        max-width: 760px;
        padding: 6px 16px 20px;
    }
    .circle-view-header {
        max-height: min(30vh, 276px);
    }
    .circle-hero-orb-shell {
        width: 83px;
        height: 83px;
    }
    .circle-hero-orb {
        width: 76px;
        height: 76px;
        font-size: 2.05rem;
    }
    .circle-feed {
        padding: 8px 0 24px;
    }
    .feed-card {
        padding: 18px 18px 16px;
        border-radius: 24px;
    }
    .circle-admin-inner {
        max-width: 100%;
        padding: 18px 16px 22px;
        gap: 14px;
    }
    .circle-admin-body {
        gap: 14px;
    }
    .circle-admin-section {
        padding: 16px 16px;
        border-radius: 24px;
    }
    .circle-member-row {
        padding: 10px 12px;
        border-radius: 18px;
    }
    .circle-member-actions {
        gap: 6px;
    }
}
@media (max-width: 640px) {
    .circle-view-inner {
        padding: 6px 10px 16px;
    }
    .circle-view-header {
        max-height: min(36vh, 340px);
    }
    .circle-nav-row {
        padding: 2px 2px 0;
    }
    .circle-hero-row {
        padding: 0 12px 2px;
        gap: 2px;
        margin-top: -22px;
    }
    .circle-back-btn,
    .circle-manage-btn {
        min-height: 34px;
        padding: 0 11px;
        font-size: 0.66rem;
    }
    .circle-members-icon-btn {
        width: 34px;
        min-width: 34px;
        padding: 0;
    }
    .circle-hero-orb-shell {
        width: 69px;
        height: 69px;
    }
    .circle-hero-orb {
        width: 62px;
        height: 62px;
        font-size: 1.7rem;
    }
    .circle-hero-name {
        font-size: 1.22rem;
    }
    .circle-hero-stats,
    .circle-feed-meta {
        font-size: 0.7rem;
    }
    .circle-hero-description {
        font-size: 0.8rem;
    }
    .circle-tabs-wrap {
        padding: 0;
    }
    .circle-tabs {
        gap: 4px;
        padding: 4px 0 4px;
    }
    .circle-tab {
        min-height: 28px;
        padding: 0 8px;
        font-size: 0.72rem;
        gap: 4px;
    }
    .circle-tab-icon svg {
        width: 12px;
        height: 12px;
    }
    .feed-card {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 16px 16px 14px;
        border-radius: 22px;
    }
    .feed-avatar {
        width: 52px;
        height: 52px;
        font-size: 1.4rem;
    }
    .circle-feed .feed-avatar {
        width: 32px;
        height: 32px;
        font-size: 0.92rem;
        flex-basis: 32px;
    }
    .circle-feed .feed-card {
        gap: 10px;
        padding: 10px 14px 9px;
        border-radius: 20px;
    }
    .circle-feed .feed-main {
        gap: 4px;
    }
    .feed-meta-row {
        gap: 7px;
    }
    .circle-feed .feed-author {
        font-size: 0.76rem;
    }
    .circle-feed .feed-type-label,
    .circle-feed .feed-time {
        font-size: 0.68rem;
    }
    .circle-feed .feed-time {
        margin-left: 0;
    }
    .circle-feed .feed-text {
        font-size: 0.79rem;
        line-height: 1.24;
    }
    .circle-feed .feed-text-quote {
        font-size: 0.9rem;
        line-height: 1.18;
    }
    .circle-feed .feed-actions-row {
        gap: 13px;
    }
    .feed-photo {
        max-height: 280px;
        width: 100%;
    }
    .feed-actions-row {
        gap: 16px;
    }
    .feed-like-btn,
    .feed-comment-toggle {
        font-size: 0.76rem;
    }
    .cc-av {
        width: 32px;
        height: 32px;
        font-size: 0.92rem;
        flex-basis: 32px;
    }
    .cc-item {
        gap: 10px;
        padding: 10px 14px 9px;
        border-radius: 20px;
    }
    .cc-body {
        padding: 0;
        border-radius: 0;
    }
    .cc-meta {
        gap: 5px;
        margin-bottom: 3px;
    }
    .cc-author {
        font-size: 0.76rem;
    }
    .cc-time {
        font-size: 0.68rem;
    }
    .cc-text {
        font-size: 0.8rem;
        line-height: 1.22;
    }
    .cc-textarea {
        min-height: 46px;
        font-size: 0.82rem;
        border-radius: 20px;
    }
    .cc-post-btn {
        width: 40px;
        height: 40px;
    }
    .circle-admin-inner {
        padding: 14px 10px 18px;
    }
    .circle-admin-header {
        gap: 12px;
    }
    .circle-admin-eyebrow {
        font-size: 0.6rem;
    }
    .circle-admin-header h3 {
        font-size: 1.22rem;
    }
    .circle-admin-section {
        padding: 14px 14px;
        border-radius: 20px;
    }
    .circle-admin-section-head {
        margin-bottom: 12px;
    }
    .circle-admin-section-title {
        font-size: 0.78rem;
    }
    .circle-member-row {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 10px;
    }
    .circle-member-avatar {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
        font-size: 0.88rem;
    }
    .circle-member-info {
        min-width: 0;
        flex: 1 1 calc(100% - 42px);
    }
    .circle-member-name {
        font-size: 0.8rem;
    }
    .circle-member-time {
        font-size: 0.68rem;
    }
    .circle-member-actions {
        width: 100%;
        justify-content: flex-end;
        padding-top: 2px;
    }
    .circle-approve-btn,
    .circle-reject-btn,
    .circle-remove-btn {
        height: 32px;
        padding: 0 11px;
        font-size: 0.72rem;
    }
    .circle-admin-empty {
        min-height: 96px;
        border-radius: 18px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   INSTAGRAM THEME
   ───────────────────────────────────────────────────────────────────────────
   A complete light-mode theme inspired by Instagram's design language.
   Key colors:
     Primary text:     #262626
     Secondary text:   #8e8e8e
     Card background:  #ffffff
     Page background:  #fafafa
     Border:           #dbdbdb  / rgba(219,219,219,...)
     IG Blue:          #0095f6
     IG Red (hearts):  #ed4956
     IG Gradient:      #f58529 → #dd2a7b → #8134af → #515bd4
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Global text & background overrides ──────────────────────────────────── */
[data-theme="instagram"] .sec-header h2 {
    color: #262626 !important;
    text-shadow: none !important;
}
[data-theme="instagram"] .sec-header p {
    color: rgba(38,38,38,0.55) !important;
}
[data-theme="instagram"] .scroll-bar {
    background: linear-gradient(90deg, #f58529, #dd2a7b, #8134af, #515bd4);
    background-size: 300% 100%;
}

/* ── Dot nav ─────────────────────────────────────────────────────────────── */
[data-theme="instagram"] .dot-nav a {
    background: rgba(0,0,0,0.15);
    border-color: rgba(0,0,0,0.08);
}
[data-theme="instagram"] .dot-nav a.active {
    background: #0095f6;
    border-color: #0095f6;
    box-shadow: 0 0 8px rgba(0,149,246,0.4);
}

/* ── Auth bar ────────────────────────────────────────────────────────────── */
[data-theme="instagram"] .auth-bar {
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-color: rgba(219,219,219,0.6);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
[data-theme="instagram"] .auth-username {
    color: #262626;
}
[data-theme="instagram"] .auth-btn {
    color: #262626;
    border-color: rgba(219,219,219,0.8);
}
[data-theme="instagram"] .auth-btn:hover {
    background: rgba(0,0,0,0.05);
    border-color: rgba(219,219,219,1);
}
[data-theme="instagram"] .auth-btn-primary {
    background: #0095f6 !important;
    border-color: transparent !important;
    color: #fff !important;
}
[data-theme="instagram"] .auth-btn-primary:hover { opacity: 0.85; }
[data-theme="instagram"] .auth-edit-chip {
    background: rgba(0,149,246,0.1);
    border-color: rgba(0,149,246,0.3);
    color: #0095f6;
}

/* ── Add row / inputs ────────────────────────────────────────────────────── */
[data-theme="instagram"] .add-input {
    background: #ffffff;
    border-color: rgba(219,219,219,1);
    color: #262626;
}
[data-theme="instagram"] .add-input::placeholder { color: #8e8e8e; }
[data-theme="instagram"] .add-input:focus { border-color: #0095f6; }
[data-theme="instagram"] .add-btn {
    background: #0095f6;
    color: #fff;
}
[data-theme="instagram"] .add-btn:hover { background: #1877f2; }

/* ── Friend orbs ─────────────────────────────────────────────────────────── */
[data-theme="instagram"] .friend-orb {
    background: radial-gradient(
        circle at 36% 34%,
        rgba(0,0,0, calc(var(--orb-intensity, 0.5) * 0.08)),
        rgba(0,0,0, calc(var(--orb-intensity, 0.5) * 0.02))
    ) !important;
    border: 3px solid transparent !important;
    background-clip: padding-box !important;
    box-shadow:
        0 0 0 3px #fafafa,
        0 0 0 5px #dd2a7b,
        0 0 0 5px transparent,
        0 4px 12px rgba(0,0,0,0.08) !important;
}
[data-theme="instagram"] .friend-orb::before {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    background: linear-gradient(45deg, #f58529, #dd2a7b, #8134af, #515bd4);
    z-index: -1;
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
}
[data-theme="instagram"] .friend-orb-name {
    color: #262626 !important;
}
[data-theme="instagram"] .friend-orb-link {
    color: #0095f6 !important;
}
[data-theme="instagram"] .friend-orb-count {
    color: #262626 !important;
}
[data-theme="instagram"] .friend-orb:hover {
    box-shadow:
        0 0 0 3px #fafafa,
        0 0 0 5px #dd2a7b,
        0 8px 24px rgba(0,0,0,0.12) !important;
}
[data-theme="instagram"] .thought-badge,
[data-theme="instagram"] .vibe-fab {
    background: #0095f6 !important;
    border-color: #fff !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(0,149,246,0.3) !important;
}

/* ── Oneliner cards ──────────────────────────────────────────────────────── */
[data-theme="instagram"] .oneliner-card {
    background: #ffffff !important;
    border: 1px solid rgba(219,219,219,0.8) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}
[data-theme="instagram"] .oneliner-card:hover {
    background: #ffffff !important;
    border-color: rgba(219,219,219,1) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}
[data-theme="instagram"] .oneliner-text {
    color: #262626 !important;
}
[data-theme="instagram"] .ol-author {
    color: #8e8e8e !important;
}
[data-theme="instagram"] .ol-actions button {
    color: #262626;
}
[data-theme="instagram"] .ol-like-btn.liked {
    color: #ed4956 !important;
}
[data-theme="instagram"] .ol-hero-label {
    color: #8e8e8e !important;
}
[data-theme="instagram"] .ol-hero-text {
    color: #262626 !important;
}

/* ── Suggestion cards ────────────────────────────────────────────────────── */
[data-theme="instagram"] .sug-card {
    background: #ffffff !important;
    border: 1px solid rgba(219,219,219,0.8) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
    color: #262626 !important;
}
[data-theme="instagram"] .sug-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
    border-color: rgba(219,219,219,1) !important;
}
[data-theme="instagram"] .sug-text { color: #262626 !important; }
[data-theme="instagram"] .sug-author { color: #8e8e8e !important; }
[data-theme="instagram"] .sug-cat-chip {
    background: #efefef !important;
    color: #262626 !important;
    border-color: rgba(219,219,219,0.6) !important;
}
[data-theme="instagram"] .sug-cat-btn {
    background: #efefef !important;
    border-color: rgba(219,219,219,0.8) !important;
    color: #262626 !important;
}
[data-theme="instagram"] .sug-cat-btn.active {
    background: #0095f6 !important;
    border-color: #0095f6 !important;
    color: #fff !important;
}
[data-theme="instagram"] .sug-like-btn.liked {
    color: #ed4956 !important;
}
[data-theme="instagram"] .sug-hero {
    background: #ffffff !important;
    border: 1px solid rgba(219,219,219,0.8) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}

/* ── Occasion cards ──────────────────────────────────────────────────────── */
[data-theme="instagram"] .occ-hero,
[data-theme="instagram"] .occasion-card {
    background: #ffffff !important;
    border: 1px solid rgba(219,219,219,0.8) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
    color: #262626 !important;
}
[data-theme="instagram"] .occ-hero:hover,
[data-theme="instagram"] .occasion-card:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,0.1) !important;
}
[data-theme="instagram"] .occ-hero::before,
[data-theme="instagram"] .occasion-card::before {
    background: radial-gradient(ellipse at 50% 0%, rgba(0,149,246,0.06) 0%, transparent 72%);
    opacity: 0.6;
}
[data-theme="instagram"] .occ-hero-label,
[data-theme="instagram"] .occ-hero-date,
[data-theme="instagram"] .occ-date { color: #8e8e8e !important; }
[data-theme="instagram"] .occ-hero-title,
[data-theme="instagram"] .occ-title { color: #262626 !important; }
[data-theme="instagram"] .occ-hero-memory,
[data-theme="instagram"] .occ-memory { color: rgba(38,38,38,0.6) !important; }
[data-theme="instagram"] .occ-icon-zone::before,
[data-theme="instagram"] .occ-hero-icon-zone::before {
    background: radial-gradient(circle, rgba(0,149,246,0.06) 0%, transparent 72%);
}
[data-theme="instagram"] .occ-btn {
    background: #efefef;
    border-color: rgba(219,219,219,0.6);
    color: #262626;
}
[data-theme="instagram"] .occ-btn:hover { background: #e0e0e0; }
[data-theme="instagram"] .occ-cnt-today,
[data-theme="instagram"] .occ-cnt-soon,
[data-theme="instagram"] .occ-cnt-month,
[data-theme="instagram"] .occ-cnt-far {
    color: #262626;
    border: 1px solid rgba(219,219,219,0.6);
    box-shadow: none;
    background: #efefef;
}
[data-theme="instagram"] .occ-cnt-today { background: #dff4e8; color: #2d6a4f; }
[data-theme="instagram"] .occ-cnt-soon { background: #fef5e0; color: #8a6d3b; }
[data-theme="instagram"] .occasion-card[class*="occ-mood-"],
[data-theme="instagram"] .occ-hero[class*="occ-mood-"] {
    border-color: rgba(219,219,219,0.8) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
}

/* ── Routine timeline ────────────────────────────────────────────────────── */
[data-theme="instagram"] .new-timeline::before {
    background: rgba(219,219,219,0.6) !important;
}
[data-theme="instagram"] .tl-dot {
    background: #0095f6 !important;
    border-color: #fafafa !important;
    box-shadow: 0 0 0 3px rgba(0,149,246,0.15) !important;
}
[data-theme="instagram"] .tl-time {
    color: #8e8e8e !important;
}
[data-theme="instagram"] .tl-content {
    background: #ffffff !important;
    border: 1px solid rgba(219,219,219,0.8) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
    color: #262626 !important;
}
[data-theme="instagram"] .tl-content:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}
[data-theme="instagram"] .tl-title { color: #262626 !important; }
[data-theme="instagram"] .tl-desc { color: #8e8e8e !important; }
[data-theme="instagram"] .tl-item.checked .tl-content {
    background: #f0faf4 !important;
    border-color: rgba(82,183,136,0.3) !important;
}

/* ── Workout cards ───────────────────────────────────────────────────────── */
[data-theme="instagram"] .wo-card {
    background: #ffffff !important;
    border: 1px solid rgba(219,219,219,0.8) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
    color: #262626 !important;
}
[data-theme="instagram"] .wo-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}
[data-theme="instagram"] .wo-title { color: #262626 !important; }
[data-theme="instagram"] .wo-day { color: #8e8e8e !important; }
[data-theme="instagram"] .wo-exercise { color: rgba(38,38,38,0.7) !important; }
[data-theme="instagram"] .wo-card.checked {
    background: #f0faf4 !important;
    border-color: rgba(82,183,136,0.3) !important;
}
[data-theme="instagram"] .wo-badge {
    background: #0095f6 !important;
    color: #fff !important;
}

/* ── Food cards ──────────────────────────────────────────────────────────── */
[data-theme="instagram"] .fo-card {
    background: #ffffff !important;
    border: 1px solid rgba(219,219,219,0.8) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
    color: #262626 !important;
}
[data-theme="instagram"] .fo-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}
[data-theme="instagram"] .fo-name { color: #262626 !important; }
[data-theme="instagram"] .fo-tag { color: #8e8e8e !important; }
[data-theme="instagram"] .fo-card.checked {
    background: #f0faf4 !important;
    border-color: rgba(82,183,136,0.3) !important;
}

/* ── Gallery section ─────────────────────────────────────────────────────── */
[data-theme="instagram"] .sec-galaxy .category-title { color: #262626 !important; }
[data-theme="instagram"] .sec-galaxy .category-text { color: #8e8e8e !important; }
[data-theme="instagram"] .carousel {
    border: 1px solid rgba(219,219,219,0.6);
    border-radius: 12px;
    overflow: hidden;
}

/* ── Card share strip ────────────────────────────────────────────────────── */
[data-theme="instagram"] .card-share-strip {
    background: rgba(0,149,246,0.06) !important;
    border-color: rgba(0,149,246,0.15) !important;
    color: #0095f6 !important;
}
[data-theme="instagram"] .card-share-strip:hover {
    background: rgba(0,149,246,0.12) !important;
    border-color: rgba(0,149,246,0.3) !important;
}

/* ── Inline edit form ────────────────────────────────────────────────────── */
[data-theme="instagram"] .inline-edit-form .add-input {
    background: #fafafa;
    border-color: rgba(219,219,219,1);
    color: #262626;
}
[data-theme="instagram"] .inline-edit-form .add-input:focus { border-color: #0095f6; }
[data-theme="instagram"] .edit-btn {
    background: rgba(0,149,246,0.08);
    border-color: rgba(0,149,246,0.25);
    color: #0095f6;
}
[data-theme="instagram"] .edit-btn:hover { background: rgba(0,149,246,0.15); }

/* ── Login prompt ────────────────────────────────────────────────────────── */
[data-theme="instagram"] .login-prompt { color: #8e8e8e !important; }
[data-theme="instagram"] .prompt-login-btn { color: #0095f6 !important; }
[data-theme="instagram"] .prompt-login-btn:hover { color: #1877f2 !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   INSTAGRAM THEME — Circle Switcher
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="instagram"] .circle-switcher-backdrop.open {
    background: rgba(0,0,0,0.35);
}
[data-theme="instagram"] #circleSwitcher.circle-switcher {
    background: #ffffff;
    border: 1px solid rgba(219,219,219,0.8);
    box-shadow: 0 8px 40px rgba(0,0,0,0.15), 0 0 0 1px rgba(219,219,219,0.3);
}
[data-theme="instagram"] .circle-switcher-header {
    border-bottom-color: rgba(219,219,219,0.6);
}
[data-theme="instagram"] .circle-switcher-header h3 {
    color: #262626;
}
[data-theme="instagram"] .circle-switcher-close {
    background: #efefef;
    border-color: rgba(219,219,219,0.6);
    color: #262626;
}
[data-theme="instagram"] .circle-switcher-close:hover {
    background: #dbdbdb;
    color: #000;
}
[data-theme="instagram"] .circle-switcher-body::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.15);
}

/* Circle orbs in switcher */
[data-theme="instagram"] .circle-orb-btn {
    background: #fafafa;
    border: 2px solid rgba(219,219,219,0.8);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
[data-theme="instagram"] .circle-orb-item:hover .circle-orb-btn {
    box-shadow: 0 4px 16px rgba(0,0,0,0.1), 0 0 0 2px rgba(0,149,246,0.2);
}
[data-theme="instagram"] .circle-orb-owner {
    border-color: transparent !important;
    background: linear-gradient(#fafafa, #fafafa) padding-box,
                linear-gradient(45deg, #f58529, #dd2a7b, #8134af, #515bd4) border-box !important;
    box-shadow: 0 2px 12px rgba(221,42,123,0.15) !important;
}
[data-theme="instagram"] .circle-orb-name {
    color: #262626;
}
[data-theme="instagram"] .circle-orb-meta {
    color: #8e8e8e;
}
[data-theme="instagram"] .circle-orb-role {
    color: #0095f6;
}
[data-theme="instagram"] .circle-orb-item:not(:has(.circle-orb-owner)) .circle-orb-role {
    color: #8e8e8e;
}
[data-theme="instagram"] .circle-orb-new::after {
    background: #ed4956 !important;
}

/* Circle switcher footer */
[data-theme="instagram"] .circle-switcher-footer {
    border-top-color: rgba(219,219,219,0.6);
}
[data-theme="instagram"] .circle-create-toggle {
    background: #fafafa;
    border-color: rgba(219,219,219,0.8);
    color: #262626;
}
[data-theme="instagram"] .circle-create-toggle:hover {
    background: #efefef;
    color: #000;
}
[data-theme="instagram"] .circle-help-btn {
    border-color: rgba(219,219,219,0.5);
    color: #8e8e8e;
}
[data-theme="instagram"] .circle-help-btn:hover {
    color: #0095f6;
    border-color: rgba(0,149,246,0.3);
    background: rgba(0,149,246,0.04);
}

/* Circle create form */
[data-theme="instagram"] .circle-create-form input,
[data-theme="instagram"] .circle-create-form textarea,
[data-theme="instagram"] .circle-create-form select {
    background: #fafafa;
    border-color: rgba(219,219,219,1);
    color: #262626;
}
[data-theme="instagram"] .circle-create-form input::placeholder,
[data-theme="instagram"] .circle-create-form textarea::placeholder {
    color: #8e8e8e;
}
[data-theme="instagram"] .circle-create-form input:focus,
[data-theme="instagram"] .circle-create-form textarea:focus {
    border-color: #0095f6;
}
[data-theme="instagram"] .circle-create-submit {
    background: #0095f6;
}
[data-theme="instagram"] .circle-create-submit:hover { opacity: 0.85; }

/* ═══════════════════════════════════════════════════════════════════════════
   INSTAGRAM THEME — Circle Browse / Search
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="instagram"] .circle-browse-section {
    border-top-color: rgba(219,219,219,0.5);
}
[data-theme="instagram"] .circle-browse-section h4 {
    color: #8e8e8e;
}
[data-theme="instagram"] .circle-search-input {
    background: #fafafa;
    border-color: rgba(219,219,219,1);
    color: #262626;
}
[data-theme="instagram"] .circle-search-input::placeholder { color: #8e8e8e; }
[data-theme="instagram"] .circle-search-input:focus { border-color: #0095f6; }
[data-theme="instagram"] .circle-search-btn {
    background: #0095f6;
    border-color: #0095f6;
    color: #fff;
}
[data-theme="instagram"] .circle-search-btn:hover { background: #1877f2; }
[data-theme="instagram"] .circle-browse-item {
    background: #fafafa;
    border: 1px solid rgba(219,219,219,0.5);
    border-radius: 10px;
    color: #262626;
}
[data-theme="instagram"] .circle-browse-item-name { color: #262626; }
[data-theme="instagram"] .circle-browse-item-meta { color: #8e8e8e; }
[data-theme="instagram"] .circle-join-btn {
    background: #0095f6;
}
[data-theme="instagram"] .circle-join-btn:hover { opacity: 0.85; }
[data-theme="instagram"] .circle-join-btn:disabled { opacity: 0.4; }

/* ═══════════════════════════════════════════════════════════════════════════
   INSTAGRAM THEME — Circle View (full-page overlay)
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="instagram"] .circle-view {
    background: #fafafa !important;
}
[data-theme="instagram"] .circle-view::after {
    background: linear-gradient(90deg, rgba(219,219,219,0), rgba(219,219,219,0.4), rgba(219,219,219,0)) !important;
}
[data-theme="instagram"] body.circle-open {
    background: #fafafa !important;
}
[data-theme="instagram"] .circle-view-header {
    border-bottom-color: rgba(219,219,219,0.6);
    background: linear-gradient(180deg, rgba(0,149,246,0.03) 0%, transparent 100%);
}
[data-theme="instagram"] .circle-view-header::before {
    background: radial-gradient(ellipse at 50% 0%, rgba(0,149,246,0.05), transparent 70%);
}
[data-theme="instagram"] .circle-back-btn {
    background: #efefef;
    border-color: rgba(219,219,219,0.8);
    color: #262626;
}
[data-theme="instagram"] .circle-back-btn:hover {
    background: #dbdbdb;
    color: #000;
}
[data-theme="instagram"] .circle-manage-btn {
    background: #efefef;
    border-color: rgba(219,219,219,0.8);
    color: #262626;
}
[data-theme="instagram"] .circle-manage-btn:hover {
    background: #dbdbdb;
}
[data-theme="instagram"] .circle-hero-orb-shell {
    background: linear-gradient(135deg, #ffffff, #f0f0f0) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
    border: 3px solid transparent;
    background-clip: padding-box;
}
[data-theme="instagram"] .circle-hero-name {
    color: #262626 !important;
}
[data-theme="instagram"] .circle-hero-desc {
    color: #8e8e8e !important;
}
[data-theme="instagram"] .circle-hero-stat-val {
    color: #262626 !important;
}
[data-theme="instagram"] .circle-hero-stat-label {
    color: #8e8e8e !important;
}
[data-theme="instagram"] .circle-fav-btn {
    color: #8e8e8e;
    border-color: rgba(219,219,219,0.6);
    background: #efefef;
}
[data-theme="instagram"] .circle-fav-btn.is-fav {
    color: #f7971e !important;
    border-color: rgba(247,151,30,0.3);
    background: rgba(247,151,30,0.06);
}

/* Circle tabs */
[data-theme="instagram"] .circle-tabs {
    border-bottom-color: rgba(219,219,219,0.5);
}
[data-theme="instagram"] .circle-tab {
    color: #8e8e8e;
}
[data-theme="instagram"] .circle-tab.active {
    color: #262626;
    border-bottom-color: #262626;
}
[data-theme="instagram"] .circle-tab:hover {
    color: #262626;
}

/* Circle feed cards */
[data-theme="instagram"] .feed-card {
    background: #ffffff !important;
    border: 1px solid rgba(219,219,219,0.6) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}
[data-theme="instagram"] .feed-card:hover {
    background: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}
[data-theme="instagram"] .feed-author { color: #262626 !important; font-weight: 600; }
[data-theme="instagram"] .feed-type-label { color: #8e8e8e !important; }
[data-theme="instagram"] .feed-time { color: #8e8e8e !important; }
[data-theme="instagram"] .feed-text { color: #262626 !important; }
[data-theme="instagram"] .feed-text-quote { color: #262626 !important; }
[data-theme="instagram"] .feed-like-btn { color: #262626; }
[data-theme="instagram"] .feed-like-btn.liked { color: #ed4956 !important; }
[data-theme="instagram"] .feed-comment-toggle { color: #262626; }
[data-theme="instagram"] .feed-comment-count { color: #8e8e8e; }
[data-theme="instagram"] .feed-actions-row {
    border-top-color: rgba(219,219,219,0.4);
}

/* Circle wall posts */
[data-theme="instagram"] .cc-item {
    background: #ffffff !important;
    border: 1px solid rgba(219,219,219,0.6) !important;
}
[data-theme="instagram"] .cc-author { color: #262626 !important; }
[data-theme="instagram"] .cc-time { color: #8e8e8e !important; }
[data-theme="instagram"] .cc-text { color: #262626 !important; }
[data-theme="instagram"] .cc-like-btn.liked { color: #ed4956 !important; }

/* Circle empty state */
[data-theme="instagram"] .circle-empty {
    color: #8e8e8e !important;
}

/* Circle compose area */
[data-theme="instagram"] .circle-compose-input {
    background: #fafafa !important;
    border-color: rgba(219,219,219,1) !important;
    color: #262626 !important;
}
[data-theme="instagram"] .circle-compose-input::placeholder { color: #8e8e8e; }
[data-theme="instagram"] .circle-compose-input:focus { border-color: #0095f6 !important; }
[data-theme="instagram"] .circle-compose-btn {
    background: #0095f6 !important;
    color: #fff !important;
}

/* Circle members */
[data-theme="instagram"] .circle-member-row {
    border-bottom-color: rgba(219,219,219,0.4) !important;
}
[data-theme="instagram"] .circle-member-avatar {
    background: linear-gradient(135deg, #0095f6, #8134af) !important;
    color: #fff !important;
}
[data-theme="instagram"] .circle-member-name { color: #262626 !important; }
[data-theme="instagram"] .circle-member-time { color: #8e8e8e !important; }
[data-theme="instagram"] .circle-approve-btn {
    background: #0095f6 !important;
    color: #fff !important;
}
[data-theme="instagram"] .circle-reject-btn,
[data-theme="instagram"] .circle-remove-btn {
    background: #efefef !important;
    border-color: rgba(219,219,219,0.8) !important;
    color: #262626 !important;
}

/* Circle admin */
[data-theme="instagram"] .circle-admin {
    background: #fafafa !important;
}
[data-theme="instagram"] .circle-admin-section {
    background: #ffffff !important;
    border: 1px solid rgba(219,219,219,0.6) !important;
}
[data-theme="instagram"] .circle-admin-section-count {
    color: #8e8e8e !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   INSTAGRAM THEME — Tile Sheet (3-dot menu)
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="instagram"] .tile-sheet-backdrop.open {
    background: rgba(0,0,0,0.4);
}

[data-theme="instagram"] .tile-sheet-actions {
    background: #ffffff;
}
[data-theme="instagram"] .tile-sheet-action {
    color: #262626;
    border-top-color: rgba(219,219,219,0.5);
}
[data-theme="instagram"] .tile-sheet-action:hover,
[data-theme="instagram"] .tile-sheet-action:active {
    background: #fafafa;
}
[data-theme="instagram"] .tile-sheet-action-danger {
    color: #ed4956 !important;
}
[data-theme="instagram"] .tile-sheet-cancel {
    background: #ffffff;
    color: #8e8e8e;
    border: 1px solid rgba(219,219,219,0.6);
}
[data-theme="instagram"] .tile-sheet-cancel:hover,
[data-theme="instagram"] .tile-sheet-cancel:active {
    background: #fafafa;
}

/* ═══════════════════════════════════════════════════════════════════════════
   INSTAGRAM THEME — Share Modal
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="instagram"] .share-modal-overlay {
    background: rgba(0,0,0,0.5);
}
[data-theme="instagram"] .share-modal-sheet {
    background: #ffffff;
    border-color: rgba(219,219,219,0.6);
}
[data-theme="instagram"] .share-modal-header {
    color: #262626;
    border-bottom-color: rgba(219,219,219,0.5);
}
[data-theme="instagram"] .share-modal-close {
    background: #efefef;
    color: #262626;
}
[data-theme="instagram"] .share-modal-close:hover {
    background: #dbdbdb;
    color: #000;
}
[data-theme="instagram"] .share-modal-item {
    background: #fafafa;
    border-color: rgba(219,219,219,0.5);
    color: #262626;
}
[data-theme="instagram"] .share-modal-item:hover {
    background: #efefef;
    border-color: rgba(0,149,246,0.3);
}
[data-theme="instagram"] .share-modal-cancel-btn {
    background: #fafafa;
    border-color: rgba(219,219,219,0.6);
    color: #8e8e8e;
}
[data-theme="instagram"] .share-modal-cancel-btn:hover {
    background: #efefef;
}

/* ═══════════════════════════════════════════════════════════════════════════
   INSTAGRAM THEME — Confirm Dialog
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="instagram"] .confirm-overlay {
    background: rgba(0,0,0,0.5);
}
[data-theme="instagram"] .confirm-dialog {
    background: #ffffff !important;
    border-color: rgba(219,219,219,0.6) !important;
    box-shadow: 0 8px 40px rgba(0,0,0,0.15) !important;
}
[data-theme="instagram"] .confirm-dialog::before {
    background: radial-gradient(ellipse at 50% 0%, rgba(0,149,246,0.05) 0%, transparent 70%) !important;
}
[data-theme="instagram"] .confirm-title {
    color: #262626 !important;
}
[data-theme="instagram"] .confirm-msg {
    color: #8e8e8e !important;
}
[data-theme="instagram"] .confirm-cancel {
    background: #efefef !important;
    border-color: rgba(219,219,219,0.6) !important;
    color: #262626 !important;
}
[data-theme="instagram"] .confirm-cancel:hover { background: #dbdbdb !important; }
[data-theme="instagram"] .confirm-ok {
    background: #0095f6 !important;
    border-color: #0095f6 !important;
    color: #fff !important;
}
[data-theme="instagram"] .confirm-ok:hover { opacity: 0.85; }
[data-theme="instagram"] .confirm-ok.confirm-danger {
    background: #ed4956 !important;
    border-color: #ed4956 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   INSTAGRAM THEME — Toast
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="instagram"] .app-toast {
    background: #262626;
    color: #fff;
    border-color: rgba(255,255,255,0.12);
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
[data-theme="instagram"] .app-toast.app-toast-error {
    background: #ed4956;
    border-color: rgba(237,73,86,0.6);
}

/* ═══════════════════════════════════════════════════════════════════════════
   INSTAGRAM THEME — Auth Modal
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="instagram"] .auth-modal-overlay {
    background: rgba(0,0,0,0.5);
}
[data-theme="instagram"] .auth-modal-box {
    background: #ffffff !important;
    border-color: rgba(219,219,219,0.8) !important;
    box-shadow: 0 8px 40px rgba(0,0,0,0.15) !important;
}
[data-theme="instagram"] .auth-modal-box h3 {
    color: #262626 !important;
}
[data-theme="instagram"] .auth-modal-close {
    color: #8e8e8e;
}
[data-theme="instagram"] .auth-modal-close:hover { color: #262626; }
[data-theme="instagram"] .auth-input {
    background: #fafafa !important;
    border-color: rgba(219,219,219,1) !important;
    color: #262626 !important;
}
[data-theme="instagram"] .auth-input:focus { border-color: #0095f6 !important; }
[data-theme="instagram"] .auth-input::placeholder { color: #8e8e8e !important; }
[data-theme="instagram"] .auth-toggle { color: #8e8e8e !important; }
[data-theme="instagram"] .auth-link {
    color: #0095f6 !important;
}
[data-theme="instagram"] .auth-link:hover { color: #1877f2 !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   INSTAGRAM THEME — Friend Add Overlay
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="instagram"] .friend-add-overlay {
    background: rgba(0,0,0,0.4) !important;
}
[data-theme="instagram"] .friend-add-modal {
    background: #ffffff !important;
    border-color: rgba(219,219,219,0.8) !important;
    box-shadow: 0 8px 40px rgba(0,0,0,0.15) !important;
}
[data-theme="instagram"] .friend-add-modal::before {
    background: linear-gradient(180deg, rgba(0,0,0,0.01), rgba(0,0,0,0)) !important;
}
[data-theme="instagram"] .friend-add-modal::after {
    background: linear-gradient(90deg, rgba(219,219,219,0), rgba(0,149,246,0.4), rgba(219,219,219,0)) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   INSTAGRAM THEME — Mobile Sheet & Profile Orb
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="instagram"] .profile-orb {
    background: #ffffff !important;
    border: 2px solid transparent;
    box-shadow: 0 2px 12px rgba(0,0,0,0.12) !important;
}
[data-theme="instagram"] .profile-orb::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: linear-gradient(45deg, #f58529, #dd2a7b, #8134af, #515bd4);
    z-index: -1;
    mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
}
[data-theme="instagram"] .profile-orb.ms-open {
    box-shadow: 0 0 0 2px #0095f6, 0 4px 20px rgba(0,0,0,0.15) !important;
}
[data-theme="instagram"] .mobile-menu-btn {
    background: #ffffff !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.12) !important;
}
[data-theme="instagram"] .mobile-menu-btn > span:not(.mobile-menu-notif-dot) {
    background: #262626 !important;
}
[data-theme="instagram"] .orb-initial {
    color: #262626 !important;
}
[data-theme="instagram"] body.edit-mode .profile-orb {
    box-shadow: 0 0 0 3px #0095f6, 0 0 14px rgba(0,149,246,0.2) !important;
    animation: none !important;
}

[data-theme="instagram"] .ms-backdrop.ms-open {
    background: rgba(0,0,0,0.35);
}
[data-theme="instagram"] .ms-handle {
    background: rgba(0,0,0,0.15);
}
[data-theme="instagram"] .ms-user-row {
    border-bottom-color: rgba(219,219,219,0.5);
}
[data-theme="instagram"] .ms-avatar {
    background: linear-gradient(135deg, #f58529, #dd2a7b) !important;
    color: #fff !important;
}
[data-theme="instagram"] .ms-username {
    color: #262626 !important;
}
[data-theme="instagram"] .ms-score-bar-wrap {
    background: rgba(0,0,0,0.06);
}
[data-theme="instagram"] .ms-orb {
    background: #ffffff !important;
    border-color: rgba(219,219,219,0.8) !important;
    color: #262626 !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08) !important;
}
[data-theme="instagram"] .ms-orb:hover {
    background: #fafafa !important;
}
[data-theme="instagram"] .ms-orb-label {
    color: #8e8e8e !important;
}
[data-theme="instagram"] .ms-orb-center {
    background: #0095f6 !important;
    color: #fff !important;
    border-color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   INSTAGRAM THEME — Favorite Circle FAB
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="instagram"] .fav-circle-fab {
    background: #ffffff !important;
    border-color: rgba(219,219,219,0.8) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.12) !important;
    color: #262626 !important;
}
[data-theme="instagram"] .fav-circle-fab:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.16) !important;
}
[data-theme="instagram"] .fav-circle-fab-name {
    color: #262626 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   INSTAGRAM THEME — Onboarding / Guided Tour
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="instagram"] .guided-tour-card {
    background: #ffffff !important;
    border-color: rgba(219,219,219,0.8) !important;
    box-shadow: 0 8px 40px rgba(0,0,0,0.15) !important;
    color: #262626 !important;
}
[data-theme="instagram"] .guided-tour-card h3 {
    color: #262626 !important;
}
[data-theme="instagram"] .guided-tour-card p {
    color: #8e8e8e !important;
}
[data-theme="instagram"] .guided-tour-next,
[data-theme="instagram"] .guided-tour-done {
    background: #0095f6 !important;
    color: #fff !important;
}
[data-theme="instagram"] .guided-tour-back,
[data-theme="instagram"] .guided-tour-skip {
    background: #efefef !important;
    color: #262626 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   INSTAGRAM THEME — Daily Brief
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="instagram"] .daily-brief-overlay {
    background: rgba(0,0,0,0.5) !important;
}
[data-theme="instagram"] .daily-brief-card {
    background: #ffffff !important;
    border-color: rgba(219,219,219,0.6) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
    color: #262626 !important;
}
[data-theme="instagram"] .daily-brief-greeting {
    color: #262626 !important;
}
[data-theme="instagram"] .daily-brief-label {
    color: #8e8e8e !important;
}
[data-theme="instagram"] .daily-brief-value {
    color: #262626 !important;
}
[data-theme="instagram"] .daily-brief-sub {
    color: #8e8e8e !important;
}
[data-theme="instagram"] .daily-brief-go {
    background: #0095f6 !important;
    color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   INSTAGRAM THEME — Splash Screen
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="instagram"] .splash-screen {
    background: #ffffff !important;
}
[data-theme="instagram"] .splash-screen * {
    color: #262626 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   INSTAGRAM THEME — Notification badge
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="instagram"] .notif-badge {
    background: #ed4956 !important;
    color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   INSTAGRAM THEME — Admin console
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="instagram"] .admin-console {
    background: #fafafa !important;
}
[data-theme="instagram"] .admin-console-inner {
    color: #262626 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   INSTAGRAM THEME — Del button / action buttons
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="instagram"] .del-x {
    color: #ed4956 !important;
}
[data-theme="instagram"] .del-x:hover {
    background: rgba(237,73,86,0.08) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   INSTAGRAM THEME — Lightbox
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="instagram"] .lightbox-modal {
    background: rgba(0,0,0,0.9) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   INSTAGRAM THEME — Theme & Circle Buttons (top bar)
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="instagram"] .theme-btn,
[data-theme="instagram"] .circle-btn {
    border-color: rgba(219,219,219,0.8);
    color: #262626;
}
[data-theme="instagram"] .theme-btn:hover,
[data-theme="instagram"] .circle-btn:hover {
    background: rgba(0,0,0,0.05);
    border-color: rgba(219,219,219,1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   INSTAGRAM THEME — Health Score Badge
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="instagram"] .health-badge {
    background: #ffffff !important;
    border-color: rgba(219,219,219,0.8) !important;
    color: #262626 !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   INSTAGRAM THEME — Comment thread styles
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="instagram"] .feed-comment-thread {
    background: #fafafa !important;
    border-color: rgba(219,219,219,0.4) !important;
}
[data-theme="instagram"] .feed-comment-item {
    color: #262626 !important;
}
[data-theme="instagram"] .feed-comment-author { color: #262626 !important; font-weight: 600; }
[data-theme="instagram"] .feed-comment-time { color: #8e8e8e !important; }
[data-theme="instagram"] .feed-comment-input {
    background: #ffffff !important;
    border-color: rgba(219,219,219,1) !important;
    color: #262626 !important;
}
[data-theme="instagram"] .feed-comment-input::placeholder { color: #8e8e8e; }
[data-theme="instagram"] .feed-comment-input:focus { border-color: #0095f6 !important; }
[data-theme="instagram"] .feed-comment-submit {
    background: #0095f6 !important;
    color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   INSTAGRAM THEME — Missing overrides for hardcoded white elements
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Wave dividers (SVG fills can't be overridden, hide them) ──────────── */
[data-theme="instagram"] .wave-div {
    opacity: 0 !important;
    pointer-events: none;
}

/* ── Dot nav links ─────────────────────────────────────────────────────── */
[data-theme="instagram"] .dot-link {
    background: rgba(0,0,0,0.12);
    border-color: rgba(0,0,0,0.08);
}
[data-theme="instagram"] .dot-link:hover {
    background: rgba(0,0,0,0.35);
}
[data-theme="instagram"] .dot-link.active {
    background: #0095f6;
    border-color: #0095f6;
    box-shadow: 0 0 10px rgba(0,149,246,0.4);
}
[data-theme="instagram"] .dot-link::after {
    background: #262626;
    color: #fff;
}

/* ── Friend cards (all use !important in base — must counter with !important) */
[data-theme="instagram"] .sec-friends .friend-card {
    background: #ffffff !important;
    border: 1px solid rgba(219,219,219,0.8) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
    color: #262626 !important;
}
[data-theme="instagram"] .sec-friends .friend-card:hover {
    background: #ffffff !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.1) !important;
}
[data-theme="instagram"] .sec-friends .friend-name {
    color: #262626 !important;
}
[data-theme="instagram"] .sec-friends .think-count {
    color: #262626 !important;
}
[data-theme="instagram"] .sec-friends .think-btn {
    background: #0095f6 !important;
    border: 2px solid #0095f6 !important;
    color: #fff !important;
}
[data-theme="instagram"] .sec-friends .think-btn:hover {
    background: #1877f2 !important;
    border-color: #1877f2 !important;
}
[data-theme="instagram"] .sec-friends .delete-btn {
    color: rgba(142,142,142,0.5) !important;
}
[data-theme="instagram"] .sec-friends .delete-btn:hover {
    color: #ed4956 !important;
}

/* ── Generic like-btn (oneliners footer) ───────────────────────────────── */
[data-theme="instagram"] .like-btn {
    border-color: rgba(219,219,219,0.6);
    color: #262626;
    background: none;
}
[data-theme="instagram"] .like-btn:hover {
    background: rgba(0,0,0,0.04);
}
[data-theme="instagram"] .like-btn.liked {
    background: rgba(237,73,86,0.08);
    border-color: #ed4956;
    color: #ed4956;
}

/* ── Oneliner text color ───────────────────────────────────────────────── */
[data-theme="instagram"] .oneliner-text {
    color: #262626 !important;
}

/* ── Card hover-share button ───────────────────────────────────────────── */
[data-theme="instagram"] .card-hover-share {
    background: rgba(0,149,246,0.06);
    border-color: rgba(0,149,246,0.2);
    color: #0095f6;
}
[data-theme="instagram"] .card-hover-share:hover {
    background: rgba(0,149,246,0.12);
    color: #1877f2;
}

/* ── Swipe-share button ────────────────────────────────────────────────── */
[data-theme="instagram"] .swipe-share-btn {
    background: linear-gradient(160deg, #0095f6, #1877f2);
}

/* ── Occasion add tile ─────────────────────────────────────────────────── */
[data-theme="instagram"] .occ-add-tile {
    background: #ffffff !important;
    border: 1px solid rgba(219,219,219,0.8) !important;
}
[data-theme="instagram"] .occ-add-tile:hover {
    background: #ffffff !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.1) !important;
}
[data-theme="instagram"] .occ-add-label {
    color: #8e8e8e !important;
}
[data-theme="instagram"] .occ-add-icon {
    opacity: 0.6;
}

/* ── Occasion countdown chips refined ──────────────────────────────────── */
[data-theme="instagram"] .occ-countdown {
    color: #262626;
}

/* ── Scroll-to-top (Instagram) ─────────────────────────────────────────── */
[data-theme="instagram"] .scroll-top-btn {
    background: #fff;
    border-color: rgba(219,219,219,0.6);
    color: #262626;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
[data-theme="instagram"] .scroll-top-btn:hover {
    background: #fafafa;
    border-color: #dbdbdb;
}

/* ── Suggestion add-form category ──────────────────────────────────────── */
[data-theme="instagram"] .sug-add-cat-label {
    color: #8e8e8e;
}
[data-theme="instagram"] .sug-add-cat-btn {
    background: #efefef;
    border-color: rgba(219,219,219,0.6);
    color: #262626;
}
[data-theme="instagram"] .sug-add-cat-btn:hover {
    background: #e0e0e0;
}
[data-theme="instagram"] .sug-add-cat-btn.active {
    background: #0095f6;
    color: #fff;
    border-color: #0095f6;
}

/* ── Suggestion trending ───────────────────────────────────────────────── */
[data-theme="instagram"] .sug-card-trending {
    background: #ffffff !important;
    border-color: rgba(0,149,246,0.4) !important;
    box-shadow: 0 4px 16px rgba(0,149,246,0.12) !important;
}
[data-theme="instagram"] .sug-trend-badge {
    color: #0095f6;
}

/* ── Suggestion cat-chip text ──────────────────────────────────────────── */
[data-theme="instagram"] .sug-cat-chip {
    color: #262626 !important;
    background: #efefef !important;
    border-color: rgba(219,219,219,0.6) !important;
}
[data-theme="instagram"] .sug-byline {
    color: #8e8e8e;
}
[data-theme="instagram"] .sug-empty {
    color: #8e8e8e;
}

/* ── Suggestion like button ────────────────────────────────────────────── */
[data-theme="instagram"] .sug-like-btn {
    background: #efefef !important;
    border-color: rgba(219,219,219,0.6) !important;
    color: #262626 !important;
}
[data-theme="instagram"] .sug-like-btn:hover {
    background: #e0e0e0 !important;
}
[data-theme="instagram"] .sug-like-btn.liked {
    background: rgba(237,73,86,0.08) !important;
    border-color: #ed4956 !important;
    color: #ed4956 !important;
}

/* ── Timeline text (h4 and p inside tl-content) ───────────────────────── */
[data-theme="instagram"] .tl-content h4 {
    color: #262626 !important;
}
[data-theme="instagram"] .tl-content p {
    color: #8e8e8e !important;
}
[data-theme="instagram"] .tl-time {
    color: #8e8e8e !important;
}

/* ── Workout card internals ────────────────────────────────────────────── */
[data-theme="instagram"] .wo-card h3 {
    color: #262626 !important;
}
[data-theme="instagram"] .wo-card ul li {
    color: rgba(38,38,38,0.7) !important;
}
[data-theme="instagram"] .wo-day {
    background: #efefef !important;
    color: #262626 !important;
}
[data-theme="instagram"] .wo-badge {
    border-color: rgba(219,219,219,0.6) !important;
}

/* ── Food card internals ───────────────────────────────────────────────── */
[data-theme="instagram"] .fo-card h3 {
    color: #262626 !important;
}
[data-theme="instagram"] .fo-card p {
    color: #8e8e8e !important;
}
[data-theme="instagram"] .fo-tag {
    background: #efefef !important;
    border-color: rgba(219,219,219,0.6) !important;
    color: #262626 !important;
}

/* ── Galaxy section text ───────────────────────────────────────────────── */
[data-theme="instagram"] .galaxy-title {
    background: linear-gradient(90deg, #f58529, #dd2a7b, #8134af, #515bd4) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}
[data-theme="instagram"] .sec-galaxy .sec-header p {
    color: #8e8e8e !important;
}
[data-theme="instagram"] .sec-galaxy .category-title {
    color: #262626 !important;
}
[data-theme="instagram"] .sec-galaxy .category-text {
    color: #8e8e8e !important;
}

/* ── Slide share button ────────────────────────────────────────────────── */
[data-theme="instagram"] .slide-share-btn {
    background: rgba(0,149,246,0.1);
    color: #0095f6;
}
[data-theme="instagram"] .slide-share-btn:hover {
    background: rgba(0,149,246,0.18);
}

/* ── Circle loading animation ──────────────────────────────────────────── */
[data-theme="instagram"] .circle-loading {
    background: var(--circle-bg, linear-gradient(180deg, #ffffff 0%, #fafafa 48%, #ffffff 100%)) !important;
}
[data-theme="instagram"] .cl-ring1 {
    border-color: rgba(0,149,246,0.3) !important;
}
[data-theme="instagram"] .cl-ring2 {
    border-color: rgba(221,42,123,0.25) !important;
}
[data-theme="instagram"] .cl-ring3 {
    border-color: rgba(129,52,175,0.2) !important;
}
[data-theme="instagram"] .cl-dot {
    background: #0095f6 !important;
    box-shadow: 0 0 8px rgba(0,149,246,0.4) !important;
}
[data-theme="instagram"] .cl-dot-1 { background: #0095f6 !important; box-shadow: 0 0 8px rgba(0,149,246,0.4) !important; }
[data-theme="instagram"] .cl-dot-2 { background: #dd2a7b !important; box-shadow: 0 0 8px rgba(221,42,123,0.4) !important; }
[data-theme="instagram"] .cl-dot-3 { background: #f58529 !important; box-shadow: 0 0 8px rgba(245,133,41,0.4) !important; }
[data-theme="instagram"] .cl-label {
    color: #8e8e8e !important;
}
[data-theme="instagram"] .cl-label strong {
    color: #262626 !important;
}
[data-theme="instagram"] .cl-core {
    filter: drop-shadow(0 0 14px rgba(0,149,246,0.35)) !important;
}

/* ── Pull-to-refresh ───────────────────────────────────────────────────── */
[data-theme="instagram"] .ptr-text {
    color: #8e8e8e !important;
}
[data-theme="instagram"] .ptr-ready .ptr-text {
    color: #262626 !important;
}
[data-theme="instagram"] .ptr-spinner {
    border-color: rgba(0,0,0,0.1) !important;
    border-top-color: #8e8e8e !important;
}
[data-theme="instagram"] .ptr-ready .ptr-spinner {
    border-top-color: #0095f6 !important;
}

/* ── Mobile sheet base ─────────────────────────────────────────────────── */
[data-theme="instagram"] .ms-handle {
    background: rgba(0,0,0,0.15) !important;
}

/* ── Circle feed / wall loading text ───────────────────────────────────── */
[data-theme="instagram"] .fc-loading,
[data-theme="instagram"] .cc-loading {
    color: #8e8e8e !important;
}

/* ── Circle empty state ────────────────────────────────────────────────── */
[data-theme="instagram"] .circle-empty-state {
    color: #8e8e8e !important;
}

/* ── Random hero badge (occasions) ─────────────────────────────────────── */
[data-theme="instagram"] .random-hero-badge {
    border-color: rgba(219,219,219,0.6) !important;
    background: #ffffff !important;
    color: #262626 !important;
}

/* ── Auth signup input ─────────────────────────────────────────────────── */
[data-theme="instagram"] .auth-signup-input {
    background: #fafafa !important;
    border-color: rgba(219,219,219,1) !important;
    color: #262626 !important;
}
[data-theme="instagram"] .auth-signup-input:focus {
    border-color: #0095f6 !important;
}
[data-theme="instagram"] .auth-signup-input::placeholder {
    color: #8e8e8e !important;
}

/* ── OB share card (onboarding) ────────────────────────────────────────── */
[data-theme="instagram"] .ob-share-card {
    background: #ffffff !important;
    color: #262626 !important;
    border: 1px solid rgba(219,219,219,0.6);
}

/* ── Fav circle orb ────────────────────────────────────────────────────── */
[data-theme="instagram"] .fav-circle-orb {
    color: #262626 !important;
}

/* ── Scroll bar gradient ───────────────────────────────────────────────── */
[data-theme="instagram"] .scroll-bar {
    background: linear-gradient(90deg, #f58529, #dd2a7b, #8134af, #515bd4) !important;
    background-size: 300% 100%;
}

/* ── Notification panel ────────────────────────────────────────────────── */
[data-theme="instagram"] .ms-notif-badge {
    background: #ed4956 !important;
    color: #fff !important;
}

/* ── Circle admin empty ────────────────────────────────────────────────── */
[data-theme="instagram"] .circle-admin-empty {
    color: #8e8e8e !important;
    border-color: rgba(219,219,219,0.5) !important;
    background: #fafafa !important;
}

/* ── Checked states with IG-appropriate colors ─────────────────────────── */
[data-theme="instagram"] .tl-item.checked .tl-dot {
    background: #52b788 !important;
    border-color: rgba(82,183,136,0.3) !important;
    box-shadow: 0 0 8px rgba(82,183,136,0.25) !important;
}
[data-theme="instagram"] .tl-item.tl-current .tl-content {
    background: rgba(0,149,246,0.06) !important;
    border-color: rgba(0,149,246,0.2) !important;
}
[data-theme="instagram"] .tl-item.tl-current .tl-dot {
    background: #0095f6 !important;
    border-color: rgba(0,149,246,0.3) !important;
    box-shadow: 0 0 8px rgba(0,149,246,0.3) !important;
}

/* ── Section-specific soft borders between sections ────────────────────── */
[data-theme="instagram"] .full-section + .full-section {
    border-top: 1px solid rgba(219,219,219,0.3);
}

/* ── Instagram font override for cleaner look ──────────────────────────── */
[data-theme="instagram"] .sec-header h2 {
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* ── Occasion card date/memory text that uses #1a1a2e (already dark, but ensure consistency) */
[data-theme="instagram"] .occ-hero-label { color: #8e8e8e !important; }
[data-theme="instagram"] .occ-hero-title { color: #262626 !important; }
[data-theme="instagram"] .occ-hero-date { color: #8e8e8e !important; }
[data-theme="instagram"] .occ-hero-memory { color: rgba(38,38,38,0.6) !important; }
[data-theme="instagram"] .occ-title { color: #262626 !important; }
[data-theme="instagram"] .occ-date { color: #8e8e8e !important; }
[data-theme="instagram"] .occ-memory { color: rgba(38,38,38,0.6) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   INSTAGRAM THEME — Phase 2: Deep polish & remaining gaps
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Typography: Instagram system font stack ───────────────────────────── */
[data-theme="instagram"],
[data-theme="instagram"] body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}
[data-theme="instagram"] .sec-header h2,
[data-theme="instagram"] .circle-hero-name,
[data-theme="instagram"] .circle-switcher-header h3,
[data-theme="instagram"] .share-modal-header,
[data-theme="instagram"] .confirm-title,
[data-theme="instagram"] .auth-modal-box h3,
[data-theme="instagram"] .daily-brief-greeting,
[data-theme="instagram"] .db-greeting {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}

/* ── Kill all text-shadows globally for IG theme ───────────────────────── */
[data-theme="instagram"] * {
    text-shadow: none !important;
}

/* ── Circle view: remove star-dots pseudo & simplify background ─────── */
[data-theme="instagram"] .circle-view {
    background: #fafafa !important;
}
[data-theme="instagram"] .circle-view::before {
    display: none !important;
}
[data-theme="instagram"] .circle-view::after {
    background: linear-gradient(90deg, rgba(219,219,219,0), rgba(219,219,219,0.4), rgba(219,219,219,0)) !important;
}
[data-theme="instagram"] .circle-view-inner {
    background: transparent !important;
}

/* ── Circle admin header & body ────────────────────────────────────────── */
[data-theme="instagram"] .circle-admin {
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
[data-theme="instagram"] .circle-admin-header {
    border-bottom-color: rgba(219,219,219,0.6) !important;
}
[data-theme="instagram"] .circle-admin-header h3 {
    color: #262626 !important;
}
[data-theme="instagram"] .circle-admin-close {
    background: #efefef !important;
    border-color: rgba(219,219,219,0.6) !important;
    color: #262626 !important;
}
[data-theme="instagram"] .circle-admin-close:hover {
    background: #dbdbdb !important;
    color: #000 !important;
}
[data-theme="instagram"] .circle-admin-section h4 {
    color: #8e8e8e !important;
}
[data-theme="instagram"] .circle-admin-body::-webkit-scrollbar { width: 4px; }
[data-theme="instagram"] .circle-admin-body::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.15) !important;
    border-radius: 2px;
}

/* ── Circle member rows ────────────────────────────────────────────────── */
[data-theme="instagram"] .circle-member-row {
    background: #fafafa !important;
    color: #262626 !important;
    border-bottom-color: rgba(219,219,219,0.4) !important;
}
[data-theme="instagram"] .circle-member-status {
    color: #8e8e8e !important;
}
[data-theme="instagram"] .circle-approve-btn {
    background: #0095f6 !important;
    border-color: #0095f6 !important;
    color: #fff !important;
}
[data-theme="instagram"] .circle-approve-btn:hover {
    background: #1877f2 !important;
}
[data-theme="instagram"] .circle-reject-btn {
    background: #efefef !important;
    border-color: rgba(219,219,219,0.8) !important;
    color: #ed4956 !important;
}
[data-theme="instagram"] .circle-reject-btn:hover {
    background: rgba(237,73,86,0.08) !important;
    border-color: rgba(237,73,86,0.3) !important;
}
[data-theme="instagram"] .circle-remove-btn {
    background: #efefef !important;
    border-color: rgba(219,219,219,0.8) !important;
    color: #8e8e8e !important;
}
[data-theme="instagram"] .circle-remove-btn:hover {
    background: rgba(237,73,86,0.08) !important;
    border-color: rgba(237,73,86,0.3) !important;
    color: #ed4956 !important;
}

/* ── Circle leave button ───────────────────────────────────────────────── */
[data-theme="instagram"] .circle-leave-btn {
    border-color: rgba(237,73,86,0.3) !important;
    color: #ed4956 !important;
}
[data-theme="instagram"] .circle-leave-btn:hover {
    background: rgba(237,73,86,0.06) !important;
    border-color: rgba(237,73,86,0.5) !important;
}

/* ── Circle manage button hover fix ────────────────────────────────────── */
[data-theme="instagram"] .circle-manage-btn:hover {
    background: #efefef !important;
    color: #262626 !important;
}

/* ── Circle compose textarea & image picker ────────────────────────────── */
[data-theme="instagram"] .circle-compose-textarea {
    background: #fafafa !important;
    border-color: rgba(219,219,219,1) !important;
    color: #262626 !important;
}
[data-theme="instagram"] .circle-compose-textarea:focus {
    border-color: #0095f6 !important;
}
[data-theme="instagram"] .circle-compose-textarea::placeholder {
    color: #8e8e8e !important;
}
[data-theme="instagram"] .circle-compose-close {
    color: #8e8e8e !important;
}
[data-theme="instagram"] .circle-compose-close:hover {
    color: #262626 !important;
}
[data-theme="instagram"] .circle-compose-img-btn {
    background: #efefef !important;
    border-color: rgba(219,219,219,0.6) !important;
    color: #262626 !important;
}
[data-theme="instagram"] .circle-compose-img-btn:hover {
    background: #e0e0e0 !important;
    color: #000 !important;
}
[data-theme="instagram"] .circle-compose-preview img {
    border-color: rgba(219,219,219,0.5) !important;
}
[data-theme="instagram"] .circle-compose-preview-remove {
    background: #ed4956 !important;
    border-color: #fff !important;
    color: #fff !important;
}
[data-theme="instagram"] .circle-compose-submit {
    background: #0095f6 !important;
    color: #fff !important;
    border: none !important;
}
[data-theme="instagram"] .circle-compose-submit:hover {
    background: #1877f2 !important;
}

/* ── CC wall comment compose ───────────────────────────────────────────── */
[data-theme="instagram"] .cc-compose {
    border-top-color: rgba(219,219,219,0.4) !important;
}
[data-theme="instagram"] .cc-textarea {
    background: #ffffff !important;
    border-color: rgba(219,219,219,1) !important;
    color: #262626 !important;
}
[data-theme="instagram"] .cc-textarea:focus {
    border-color: #0095f6 !important;
}
[data-theme="instagram"] .cc-textarea::placeholder {
    color: #8e8e8e !important;
}
[data-theme="instagram"] .cc-post-btn {
    background: #0095f6 !important;
    border-color: #0095f6 !important;
    color: #fff !important;
}
[data-theme="instagram"] .cc-post-btn:hover {
    background: #1877f2 !important;
}
[data-theme="instagram"] .cc-del {
    color: #8e8e8e !important;
}
[data-theme="instagram"] .cc-del:hover {
    color: #ed4956 !important;
    background: rgba(237,73,86,0.06) !important;
}
[data-theme="instagram"] .cc-mine .cc-author {
    color: #0095f6 !important;
}
[data-theme="instagram"] .cc-item.cc-mine .cc-bubble {
    background: rgba(0,149,246,0.06) !important;
    border-color: rgba(0,149,246,0.15) !important;
}
[data-theme="instagram"] .cc-bubble {
    background: #fafafa !important;
    border-color: rgba(219,219,219,0.5) !important;
}
[data-theme="instagram"] .cc-text {
    color: #262626 !important;
}
[data-theme="instagram"] .cc-empty {
    color: #8e8e8e !important;
}

/* ── FC feed comment input & button ────────────────────────────────────── */
[data-theme="instagram"] .fc-input {
    background: #ffffff !important;
    border-color: rgba(219,219,219,1) !important;
    color: #262626 !important;
}
[data-theme="instagram"] .fc-input:focus {
    border-color: #0095f6 !important;
}
[data-theme="instagram"] .fc-input::placeholder {
    color: #8e8e8e !important;
}
[data-theme="instagram"] .fc-post-btn {
    background: #0095f6 !important;
    border-color: #0095f6 !important;
    color: #fff !important;
}
[data-theme="instagram"] .fc-post-btn:hover {
    background: #1877f2 !important;
}

/* ── Feed comment toggle ───────────────────────────────────────────────── */
[data-theme="instagram"] .feed-comment-toggle {
    color: #8e8e8e !important;
}
[data-theme="instagram"] .feed-comment-toggle:hover {
    color: #262626 !important;
}
[data-theme="instagram"] .feed-comment-toggle.has-comments {
    color: #0095f6 !important;
}

/* ── Score / health badges ─────────────────────────────────────────────── */
[data-theme="instagram"] .score-green {
    background: rgba(45,106,79,0.1) !important;
    color: #2d6a4f !important;
    border-color: rgba(45,106,79,0.25) !important;
}
[data-theme="instagram"] .score-amber {
    background: rgba(138,109,59,0.1) !important;
    color: #8a6d3b !important;
    border-color: rgba(138,109,59,0.25) !important;
}
[data-theme="instagram"] .score-red {
    background: rgba(237,73,86,0.1) !important;
    color: #ed4956 !important;
    border-color: rgba(237,73,86,0.25) !important;
}

/* ── Bell / notification ───────────────────────────────────────────────── */
[data-theme="instagram"] .bell-btn {
    border-color: rgba(219,219,219,0.8) !important;
    color: #262626 !important;
}
[data-theme="instagram"] .bell-btn:hover {
    background: rgba(0,0,0,0.04) !important;
}
[data-theme="instagram"] .bell-has-unread {
    border-color: rgba(237,73,86,0.5) !important;
    color: #ed4956 !important;
}
[data-theme="instagram"] .bell-count {
    background: #ed4956 !important;
    color: #fff !important;
}
[data-theme="instagram"] .ms-notif-badge {
    background: #ed4956 !important;
    color: #fff !important;
    border-color: #fff !important;
}

/* ── Admin console ─────────────────────────────────────────────────────── */
[data-theme="instagram"] .admin-console {
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-color: rgba(219,219,219,0.8) !important;
    box-shadow: 0 8px 40px rgba(0,0,0,0.12) !important;
}
[data-theme="instagram"] .admin-console-title {
    color: #262626 !important;
}
[data-theme="instagram"] .admin-tab {
    border-color: rgba(219,219,219,0.6) !important;
    color: #8e8e8e !important;
}
[data-theme="instagram"] .admin-tab.active {
    background: rgba(0,149,246,0.1) !important;
    border-color: rgba(0,149,246,0.3) !important;
    color: #0095f6 !important;
}
[data-theme="instagram"] .admin-console-close {
    color: #8e8e8e !important;
}
[data-theme="instagram"] .admin-console-close:hover {
    color: #262626 !important;
}
[data-theme="instagram"] .admin-input {
    background: #fafafa !important;
    border-color: rgba(219,219,219,1) !important;
    color: #262626 !important;
}
[data-theme="instagram"] .admin-input::placeholder {
    color: #8e8e8e !important;
}
[data-theme="instagram"] .admin-input:focus {
    border-color: #0095f6 !important;
}
[data-theme="instagram"] .admin-publish-btn {
    background: #0095f6 !important;
    color: #fff !important;
}
[data-theme="instagram"] .admin-item {
    background: #fafafa !important;
    border-color: rgba(219,219,219,0.5) !important;
}
[data-theme="instagram"] .admin-item:hover {
    background: #f0f0f0 !important;
}
[data-theme="instagram"] .admin-item-text {
    color: #262626 !important;
}
[data-theme="instagram"] .admin-item-meta {
    color: #8e8e8e !important;
}
[data-theme="instagram"] .admin-edit-btn {
    border-color: rgba(219,219,219,0.6) !important;
    color: #0095f6 !important;
}
[data-theme="instagram"] .admin-edit-btn:hover {
    background: rgba(0,149,246,0.08) !important;
    border-color: rgba(0,149,246,0.3) !important;
}
[data-theme="instagram"] .admin-del-btn {
    border-color: rgba(219,219,219,0.6) !important;
    color: #8e8e8e !important;
}
[data-theme="instagram"] .admin-del-btn:hover {
    background: rgba(237,73,86,0.08) !important;
    border-color: rgba(237,73,86,0.3) !important;
    color: #ed4956 !important;
}
[data-theme="instagram"] .admin-empty {
    color: #8e8e8e !important;
}
[data-theme="instagram"] .admin-console-trigger {
    background: rgba(0,149,246,0.08) !important;
    border-color: rgba(0,149,246,0.25) !important;
    color: #0095f6 !important;
}
[data-theme="instagram"] .admin-console-trigger:hover {
    background: rgba(0,149,246,0.15) !important;
}
[data-theme="instagram"] .admin-item-list::-webkit-scrollbar { width: 4px; }
[data-theme="instagram"] .admin-item-list::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.12) !important;
    border-radius: 2px;
}

/* ── Mobile sheet admin button ─────────────────────────────────────────── */
[data-theme="instagram"] .ms-admin-btn {
    background: rgba(0,149,246,0.06) !important;
    border-color: rgba(0,149,246,0.2) !important;
    color: #0095f6 !important;
}
[data-theme="instagram"] .ms-menu-item {
    background: #ffffff !important;
    border-color: rgba(219,219,219,0.85) !important;
    color: #262626 !important;
}
[data-theme="instagram"] .ms-menu-icon {
    background: #f6f6f6 !important;
}
[data-theme="instagram"] .ms-menu-item-danger {
    color: #ed4956 !important;
    border-color: rgba(237,73,86,0.18) !important;
    background: #fff5f6 !important;
}
[data-theme="instagram"] .ms-menu-item-danger .ms-menu-icon {
    background: rgba(237,73,86,0.08) !important;
}
[data-theme="instagram"] .ms-admin-btn:active {
    background: rgba(0,149,246,0.12) !important;
}

/* ── Mobile sheet welcome/logged-out state ─────────────────────────────── */
[data-theme="instagram"] .ms-welcome-art {
    color: #0095f6 !important;
}

/* ── Daily Brief panel ─────────────────────────────────────────────────── */
[data-theme="instagram"] .db-overlay {
    background: rgba(0,0,0,0.5) !important;
    backdrop-filter: blur(10px) !important;
}
[data-theme="instagram"] .db-panel {
    background: #ffffff !important;
    border-color: rgba(219,219,219,0.6) !important;
    box-shadow: 0 16px 48px rgba(0,0,0,0.15) !important;
}
[data-theme="instagram"] .db-greeting {
    color: #262626 !important;
}
[data-theme="instagram"] .db-subtitle {
    color: #8e8e8e !important;
}
[data-theme="instagram"] .db-header::after {
    background: linear-gradient(90deg, rgba(0,149,246,0.3), transparent) !important;
}
[data-theme="instagram"] .db-card {
    background: #fafafa !important;
    border-color: rgba(219,219,219,0.5) !important;
}
[data-theme="instagram"] .db-card:hover {
    background: #f0f0f0 !important;
}
[data-theme="instagram"] .db-card[data-type="friend"]  { border-left-color: #0095f6 !important; }
[data-theme="instagram"] .db-card[data-type="vibe"]    { border-left-color: #f58529 !important; }
[data-theme="instagram"] .db-card[data-type="event"]   { border-left-color: #ed4956 !important; }
[data-theme="instagram"] .db-card[data-type="suggest"] { border-left-color: #2d6a4f !important; }
[data-theme="instagram"] .db-card[data-type="routine"] { border-left-color: #8134af !important; }
[data-theme="instagram"] .db-card-icon {
    filter: none !important;
}
[data-theme="instagram"] .db-card-label {
    color: #8e8e8e !important;
}
[data-theme="instagram"] .db-card-value {
    color: #262626 !important;
}
[data-theme="instagram"] .db-card-sub {
    color: #8e8e8e !important;
}
[data-theme="instagram"] .db-go-btn {
    background: #0095f6 !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(0,149,246,0.3) !important;
}
[data-theme="instagram"] .db-go-btn:hover {
    background: #1877f2 !important;
    box-shadow: 0 8px 24px rgba(0,149,246,0.35) !important;
}
[data-theme="instagram"] .db-go-btn svg {
    stroke: #fff !important;
}

/* ── Onboarding overlay ────────────────────────────────────────────────── */
[data-theme="instagram"] .ob-overlay {
    background: rgba(0,0,0,0.5) !important;
    backdrop-filter: blur(10px) !important;
}
[data-theme="instagram"] .ob-box {
    background: #ffffff !important;
    border-color: rgba(219,219,219,0.8) !important;
    box-shadow: 0 16px 48px rgba(0,0,0,0.15) !important;
}
[data-theme="instagram"] .ob-user-profile {
    background: #fafafa !important;
    border-color: rgba(219,219,219,0.5) !important;
}
[data-theme="instagram"] .ob-up-name {
    color: #262626 !important;
}
[data-theme="instagram"] .ob-up-label {
    color: #8e8e8e !important;
}
[data-theme="instagram"] .ob-up-bar-wrap {
    background: rgba(0,0,0,0.06) !important;
}
[data-theme="instagram"] .ob-scene {
    background: #fafafa !important;
    border-color: rgba(219,219,219,0.5) !important;
}

/* ── Feed card post type border ────────────────────────────────────────── */
[data-theme="instagram"] .feed-card-post {
    border-left-color: #dd2a7b !important;
}

/* ── All scrollbars in circle view ─────────────────────────────────────── */
[data-theme="instagram"] .circle-view-inner::-webkit-scrollbar { width: 3px; }
[data-theme="instagram"] .circle-view-inner::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.12) !important;
    border-radius: 2px;
}
[data-theme="instagram"] .cc-list::-webkit-scrollbar { width: 3px; }
[data-theme="instagram"] .cc-list::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.12) !important;
    border-radius: 2px;
}

/* ── Friend orb name — remove dark text-shadow ─────────────────────────── */
[data-theme="instagram"] .friend-orb-name {
    color: #262626 !important;
}

/* ── Checked time color ────────────────────────────────────────────────── */
[data-theme="instagram"] .tl-item.checked .tl-time {
    color: #2d6a4f !important;
}

/* ── Softer hover transforms (Instagram is subtle, not dramatic) ───────── */
[data-theme="instagram"] .oneliner-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}
[data-theme="instagram"] .sug-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}
[data-theme="instagram"] .occasion-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 16px rgba(0,0,0,0.08) !important;
}
[data-theme="instagram"] .wo-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 16px rgba(0,0,0,0.08) !important;
}
[data-theme="instagram"] .fo-card:hover {
    transform: translateY(-4px) scale(1.01) !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08) !important;
}
[data-theme="instagram"] .sec-friends .friend-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 16px rgba(0,0,0,0.08) !important;
}

/* ── Reduce border-radius for Instagram look (flatter, more structured) ─ */
[data-theme="instagram"] .oneliner-card { border-radius: 12px !important; }
[data-theme="instagram"] .sug-card { border-radius: 12px !important; }
[data-theme="instagram"] .occasion-card { border-radius: 14px !important; }
[data-theme="instagram"] .occ-hero { border-radius: 14px !important; }
[data-theme="instagram"] .tl-content { border-radius: 12px !important; }
[data-theme="instagram"] .wo-card { border-radius: 12px !important; }
[data-theme="instagram"] .fo-card { border-radius: 14px !important; }
[data-theme="instagram"] .feed-card { border-radius: 12px !important; }
[data-theme="instagram"] .sec-friends .friend-card { border-radius: 14px !important; }

/* ── Occasion mood-color borders: neutralize to IG style ───────────────── */
[data-theme="instagram"] .occasion-card[class*="occ-mood-"],
[data-theme="instagram"] .occ-hero[class*="occ-mood-"] {
    border-color: rgba(219,219,219,0.8) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
}

/* ── Delete X button IG refinement ─────────────────────────────────────── */
[data-theme="instagram"] .del-x {
    color: rgba(142,142,142,0.5) !important;
}
[data-theme="instagram"] .del-x:hover {
    color: #ed4956 !important;
    background: rgba(237,73,86,0.06) !important;
}

/* ── OCC icon zone glow: subtle blue instead of white ──────────────────── */
[data-theme="instagram"] .occ-icon-zone::before,
[data-theme="instagram"] .occ-hero-icon-zone::before {
    background: radial-gradient(circle, rgba(0,149,246,0.05) 0%, transparent 72%) !important;
}

/* ── OCC hero glow overlay ─────────────────────────────────────────────── */
[data-theme="instagram"] .occ-hero::before {
    background: radial-gradient(ellipse at 50% 0%, rgba(0,149,246,0.04) 0%, transparent 70%) !important;
    opacity: 1 !important;
}

/* ── Feed like-btn generic ─────────────────────────────────────────────── */
[data-theme="instagram"] .feed-like-btn {
    color: #262626 !important;
}
[data-theme="instagram"] .feed-like-btn.liked {
    color: #ed4956 !important;
}
[data-theme="instagram"] .feed-comment-count {
    color: #8e8e8e !important;
}

/* ── CC like button ────────────────────────────────────────────────────── */
[data-theme="instagram"] .cc-like-btn {
    color: #262626 !important;
}
[data-theme="instagram"] .cc-like-btn.liked {
    color: #ed4956 !important;
}

/* ── Circle empty rich state ───────────────────────────────────────────── */
[data-theme="instagram"] .circle-empty-state h3 {
    color: #262626 !important;
}

/* ── Tile sheet full panel ─────────────────────────────────────────────── */
[data-theme="instagram"] .tile-sheet-actions {
    background: #ffffff !important;
}

/* ── Occ-add-tile dashed border ────────────────────────────────────────── */
[data-theme="instagram"] .occ-add-tile {
    background: #ffffff !important;
    border: 2px dashed rgba(219,219,219,0.8) !important;
}
[data-theme="instagram"] .occ-add-tile:hover {
    border-color: #0095f6 !important;
    background: rgba(0,149,246,0.02) !important;
}

/* ── Circle hero orb shell IG refinement ───────────────────────────────── */
[data-theme="instagram"] .circle-hero-orb-shell {
    background: linear-gradient(135deg, #ffffff, #f5f5f5) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
}

/* ── Profile orb IG styling ────────────────────────────────────────────── */
[data-theme="instagram"] .profile-orb {
    background: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
}

/* ── Auth bar refinement ───────────────────────────────────────────────── */
[data-theme="instagram"] .auth-bar {
    background: rgba(255,255,255,0.95) !important;
    border-color: rgba(219,219,219,0.5) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06) !important;
}

/* ── Theme & circle button refinement ──────────────────────────────────── */
[data-theme="instagram"] .theme-btn,
[data-theme="instagram"] .circle-btn {
    border-color: rgba(219,219,219,0.8) !important;
    color: #262626 !important;
    background: rgba(255,255,255,0.8) !important;
}
[data-theme="instagram"] .theme-btn:hover,
[data-theme="instagram"] .circle-btn:hover {
    background: #ffffff !important;
    border-color: rgba(219,219,219,1) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   INSTAGRAM THEME — Phase 3: Premium animations & emoji replacements
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Splash screen: IG gradient shimmer ────────────────────────────────── */
[data-theme="instagram"] .splash-screen {
    background: #ffffff !important;
}
[data-theme="instagram"] .sw-l:nth-child(1) { color: #f58529 !important; }
[data-theme="instagram"] .sw-l:nth-child(2) { color: #dd2a7b !important; }
[data-theme="instagram"] .sw-l:nth-child(3) { color: #8134af !important; }
[data-theme="instagram"] .sw-l:nth-child(4) { color: #515bd4 !important; }
[data-theme="instagram"] .sw-l:nth-child(5) { color: #dd2a7b !important; }
[data-theme="instagram"] .sw-l:nth-child(6) { color: #f58529 !important; }
[data-theme="instagram"] .splash-symbol {
    background: linear-gradient(135deg, #f58529, #dd2a7b) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
[data-theme="instagram"] .splash-tagline {
    color: #8e8e8e !important;
}
[data-theme="instagram"] .splash-particles .sp {
    color: #dd2a7b !important;
    opacity: 0.3 !important;
}
@keyframes igSplashShimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* ── Section header: hide emoji, show elegant underline ────────────────── */
[data-theme="instagram"] .sec-header h2 {
    color: #262626 !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    position: relative !important;
}
/* Elegant accent line under section headers */
[data-theme="instagram"] .sec-header h2::after {
    content: '' !important;
    display: block !important;
    width: 40px !important;
    height: 3px !important;
    background: linear-gradient(90deg, #f58529, #dd2a7b, #8134af) !important;
    border-radius: 2px !important;
    margin: 0.5rem auto 0 !important;
}

/* ── Circle loading: IG gradient spinner ───────────────────────────────── */
[data-theme="instagram"] .circle-loading {
    background: #fafafa !important;
}
[data-theme="instagram"] .cl-orbit-wrap {
    position: relative !important;
}
/* Replace orbit rings with a single gradient spinner ring */
[data-theme="instagram"] .cl-ring {
    border: none !important;
    animation: none !important;
}
[data-theme="instagram"] .cl-ring1 {
    border: none !important;
    width: 80px !important;
    height: 80px !important;
}
[data-theme="instagram"] .cl-ring2 {
    border: none !important;
    width: 80px !important;
    height: 80px !important;
}
[data-theme="instagram"] .cl-ring3 {
    width: 80px !important;
    height: 80px !important;
    border: 3px solid rgba(219,219,219,0.3) !important;
    border-top-color: transparent !important;
    border-right-color: transparent !important;
    background: conic-gradient(from 0deg, #f58529, #dd2a7b, #8134af, #515bd4, transparent) !important;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)) !important;
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)) !important;
    animation: igSpinnerRotate 1.2s linear infinite !important;
}
[data-theme="instagram"] .cl-dot {
    display: none !important;
}
[data-theme="instagram"] .cl-core {
    filter: none !important;
    font-size: 2rem !important;
}
@keyframes igSpinnerRotate {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ── Empty states: replace big emojis with subtle animated icons ────── */
[data-theme="instagram"] .circle-empty-icon {
    font-size: 1.6rem !important;
    opacity: 0.4 !important;
    animation: igEmptyPulse 2s ease-in-out infinite !important;
}
[data-theme="instagram"] .cc-empty-icon {
    font-size: 1.4rem !important;
    opacity: 0.35 !important;
    animation: igEmptyPulse 2s ease-in-out infinite !important;
}
@keyframes igEmptyPulse {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50%      { opacity: 0.5; transform: scale(1.05); }
}

/* ── Thought-of badge: IG treatment ────────────────────────────────────── */
[data-theme="instagram"] .thought-of-badge {
    background: #ffffff !important;
    border: 1px solid rgba(219,219,219,0.8) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}
[data-theme="instagram"] .tob-count {
    color: #0095f6 !important;
}
[data-theme="instagram"] .tob-label {
    color: #8e8e8e !important;
}
[data-theme="instagram"] .tob-sparkle {
    display: none !important;
}
[data-theme="instagram"] .tob-icon-wrap {
    background: rgba(0,149,246,0.08) !important;
}

/* ── Think random button ───────────────────────────────────────────────── */
[data-theme="instagram"] .think-random-btn {
    background: #0095f6 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
}
[data-theme="instagram"] .think-random-btn:hover {
    background: #1877f2 !important;
}

/* ── Card reaction buttons: subtle IG treatment ────────────────────────── */
[data-theme="instagram"] .ol-actions button {
    border-radius: 20px !important;
    padding: 4px 10px !important;
    font-size: 0.8rem !important;
    transition: background 0.15s ease !important;
}
[data-theme="instagram"] .ol-actions button:hover {
    background: rgba(0,0,0,0.04) !important;
}


/* ── Share button in cards: clean IG blue ───────────────────────────────── */
[data-theme="instagram"] .card-share-strip {
    background: rgba(0,149,246,0.04) !important;
    border-color: rgba(0,149,246,0.12) !important;
    color: #0095f6 !important;
    font-weight: 600 !important;
}

/* ── Scroll bar: IG gradient animation ─────────────────────────────────── */
[data-theme="instagram"] .scroll-bar {
    background: linear-gradient(90deg, #f58529, #dd2a7b, #8134af, #515bd4, #f58529) !important;
    background-size: 200% 100% !important;
    animation: igScrollGrad 3s linear infinite !important;
    height: 3px !important;
}
@keyframes igScrollGrad {
    0%   { background-position: 0% 0; }
    100% { background-position: 200% 0; }
}

/* ── Friend orb ring: IG stories-style gradient ────────────────────────── */
[data-theme="instagram"] .friend-orb::before {
    content: '' !important;
    position: absolute !important;
    inset: -4px !important;
    border-radius: 50% !important;
    background: conic-gradient(from 0deg, #f58529, #feda77, #dd2a7b, #8134af, #515bd4, #f58529) !important;
    z-index: -1 !important;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)) !important;
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)) !important;
}

/* Status orb in IG theme — spin the ring */
[data-theme="instagram"] .friend-orb.orb-has-status::before {
    animation: orb-status-ring-spin 3s linear infinite !important;
}

/* ── Profile orb: IG gradient ring ─────────────────────────────────────── */
[data-theme="instagram"] .profile-orb::before {
    content: '' !important;
    position: absolute !important;
    inset: -3px !important;
    border-radius: 50% !important;
    background: conic-gradient(from 0deg, #f58529, #feda77, #dd2a7b, #8134af, #515bd4, #f58529) !important;
    z-index: -1 !important;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px)) !important;
    mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px)) !important;
}

/* ── Toast: clean, no emoji needed ─────────────────────────────────────── */
[data-theme="instagram"] .app-toast {
    background: #262626 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    font-weight: 500 !important;
}

/* ── Confirm dialog icon area ──────────────────────────────────────────── */
[data-theme="instagram"] .confirm-icon {
    background: linear-gradient(135deg, #f58529, #dd2a7b) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* ── Like button animation: smooth heart pop ───────────────────────────── */
[data-theme="instagram"] .like-btn.liked,
[data-theme="instagram"] .ol-like-btn.liked,
[data-theme="instagram"] .sug-like-btn.liked,
[data-theme="instagram"] .feed-like-btn.liked {
    animation: igHeartPop 0.35s cubic-bezier(0.17, 0.89, 0.32, 1.28) !important;
}
@keyframes igHeartPop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.25); }
    100% { transform: scale(1); }
}

/* ── Card entrance: cleaner fade-up instead of spring pop ──────────────── */
[data-theme="instagram"] .oneliner-card,
[data-theme="instagram"] .sug-card {
    animation: igCardFadeUp 0.4s ease both !important;
}
@keyframes igCardFadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Occasion card mood glow: subtle IG blue accent ────────────────────── */
[data-theme="instagram"] .occasion-card::before {
    background: radial-gradient(ellipse at 50% 0%, rgba(0,149,246,0.03) 0%, transparent 70%) !important;
}

/* ── Checked flash animation: softer for IG ────────────────────────────── */
[data-theme="instagram"] .tl-item.checked .tl-content::after,
[data-theme="instagram"] .wo-card.checked::after,
[data-theme="instagram"] .fo-card.checked::after {
    background: rgba(45,106,79,0.08) !important;
}

/* ── Login prompt IG treatment ─────────────────────────────────────────── */
[data-theme="instagram"] .login-prompt {
    color: #8e8e8e !important;
}
[data-theme="instagram"] .prompt-login-btn {
    color: #0095f6 !important;
    font-weight: 600 !important;
}

/* ── Galaxy title: IG gradient text ────────────────────────────────────── */
[data-theme="instagram"] .galaxy-title {
    background: linear-gradient(90deg, #f58529, #dd2a7b, #8134af, #515bd4) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-size: 200% 100% !important;
    animation: igSplashShimmer 4s ease infinite !important;
}

/* ── Carousel nav arrows: clean circles ────────────────────────────────── */
[data-theme="instagram"] .carousel-btn {
    background: #ffffff !important;
    border: 1px solid rgba(219,219,219,0.8) !important;
    color: #262626 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}
[data-theme="instagram"] .carousel-btn:hover {
    background: #fafafa !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12) !important;
}

/* ═══════════════════════════════════════════════════════
   ENHANCED TRANSITIONS — Friends & Circles
   ═══════════════════════════════════════════════════════ */

/* ── Circle loading entrance — pulse the core emoji ── */
.circle-loading {
    animation: clLoadFadeIn 0.5s ease-out;
}
@keyframes clLoadFadeIn {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1); }
}

/* ── Feed card staggered entrance in circle view ── */
.feed-card {
    opacity: 0;
    transform: translateY(16px);
    animation: feedCardIn 0.4s cubic-bezier(0.22,1,0.36,1) forwards;
    animation-delay: calc(var(--fc-i, 0) * 0.06s + 0.15s);
}
@keyframes feedCardIn {
    to { opacity: 1; transform: translateY(0); }
}

/* ── Circle view header slide-down ── */
.circle-view.open .circle-view-header {
    animation: cvHeaderIn 0.45s cubic-bezier(0.22,1,0.36,1) 0.1s both;
}
@keyframes cvHeaderIn {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Friend add-orb subtle bounce ── */
.friend-add-orb {
    animation: addOrbPulse 2s ease-in-out infinite;
}
@keyframes addOrbPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

/* ── Smoother thought bubble ── */
.thought-bubble-fx {
    animation: thoughtFlySmooth 1.05s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    transform-origin: center;
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
@keyframes thoughtFlySmooth {
    0%   { opacity: 0; transform: translate3d(-50%, -48%, 0) scale(0.9); }
    15%  { opacity: 0.8; transform: translate3d(-50%, calc(-50% - 12px), 0) scale(0.98); }
    45%  { opacity: 1; transform: translate3d(-50%, calc(-50% - 42px), 0) scale(1.04); }
    75%  { opacity: 0.82; transform: translate3d(-50%, calc(-50% - 76px), 0) scale(1.02); }
    100% { opacity: 0; transform: translate3d(-50%, calc(-50% - 108px), 0) scale(0.96); }
}

/* ── Think-random orb highlight — richer pulse ── */
@keyframes orbHighlightEnhanced {
    0%   { box-shadow: 0 0 0 0 rgba(246,211,101,0); transform: scale(1); }
    25%  { box-shadow: 0 0 40px 8px rgba(246,211,101,0.6); transform: scale(1.05); }
    50%  { box-shadow: 0 0 60px 14px rgba(246,211,101,0.8), inset 0 0 30px rgba(246,211,101,0.2); transform: scale(1.12); }
    100% { box-shadow: 0 0 calc(var(--orb-intensity, 0.5) * 30px) rgba(255,255,255, calc(var(--orb-intensity, 0.5) * 0.22)), inset 0 0 18px rgba(255,255,255,0.04); transform: scale(1); }
}
.friend-orb.orb-highlight { animation: orbHighlightEnhanced 1.2s cubic-bezier(0.22,1,0.36,1) forwards; }

/* ── Smoother hover for friend orb think button ── */
.friend-orb .think-btn {
    transition: background 0.25s, transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.25s;
}
.friend-orb .think-btn:hover {
    transform: scale(1.2);
    box-shadow: 0 2px 12px rgba(255,255,255,0.15);
}
.friend-orb .think-btn:active {
    transform: scale(0.92);
}

/* ═══════════════════════════════════════════════════════
   BOTTOM NAVIGATION BAR
   ═══════════════════════════════════════════════════════ */
.bottom-nav {
    position: fixed;
    top: auto;
    bottom: 10px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    z-index: 9990;
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    width: fit-content;
    height: auto;
    max-width: calc(100vw - 32px);
    background: rgba(18, 18, 28, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 28px;
    backdrop-filter: blur(18px) saturate(1.6);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    pointer-events: auto;
}

.bnav-orb {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.18);
    background: rgba(20,20,30,0.75);
    color: rgba(255,255,255,0.75);
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.22,1,0.36,1),
                background 0.25s,
                border-color 0.25s,
                box-shadow 0.3s;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    padding: 0;
    outline: none;
    pointer-events: auto;
    box-shadow: 0 2px 10px rgba(0,0,0,0.35);
}
.bnav-orb:hover {
    background: rgba(30,30,45,0.9);
    border-color: rgba(255,255,255,0.3);
    transform: translateY(-3px) scale(1.08);
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    color: #fff;
}
.bnav-orb:active {
    transform: scale(0.9);
}

/* Center orb — slightly larger, accent glow */
.bnav-orb-center {
    width: 62px;
    height: 62px;
    background: linear-gradient(135deg, rgba(192,57,43,0.55), rgba(233,30,140,0.55));
    border-color: rgba(233,30,140,0.5);
    margin-bottom: 4px;
    box-shadow: 0 0 14px rgba(233,30,140,0.25), 0 2px 10px rgba(0,0,0,0.3);
    color: rgba(255,255,255,0.95);
}
.bnav-orb-center:hover {
    background: linear-gradient(135deg, rgba(192,57,43,0.7), rgba(233,30,140,0.7));
    border-color: rgba(233,30,140,0.7);
    box-shadow: 0 0 22px rgba(233,30,140,0.35), 0 4px 16px rgba(0,0,0,0.35);
    transform: translateY(-4px) scale(1.12);
}

.bnav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.bnav-cloud-symbol {
    position: relative;
    display: block;
    width: 22px;
    height: 18px;
    color: currentColor;
}
.bnav-cloud-symbol::before,
.bnav-cloud-symbol::after,
.bnav-cloud-symbol span {
    content: "";
    position: absolute;
    display: block;
}
.bnav-cloud-symbol::before {
    left: 2px;
    top: 4px;
    width: 18px;
    height: 11px;
    border: 2px solid currentColor;
    border-radius: 999px;
    box-sizing: border-box;
    background: transparent;
}
.bnav-cloud-symbol::after {
    left: 5px;
    top: 0;
    width: 6px;
    height: 6px;
    border: 2px solid currentColor;
    border-radius: 50%;
    background: rgba(0,0,0,0);
    box-sizing: border-box;
    box-shadow:
        6px -1px 0 -1px currentColor,
        8px 3px 0 -1px currentColor;
}
.bnav-cloud-symbol > span {
    left: 2px;
    bottom: 0;
    width: 4px;
    height: 4px;
    background: currentColor;
    border-radius: 50%;
    box-shadow: 6px -4px 0 0 currentColor;
}
.bnav-icon svg {
    display: block;
    width: 22px;
    height: 22px;
}
.bnav-orb-center .bnav-icon svg {
    width: 24px;
    height: 24px;
}

.bnav-label {
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1;
    opacity: 0.8;
}

/* Notification dot */
.bnav-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff4757;
    box-shadow: 0 0 6px rgba(255,71,87,0.6);
    animation: bnavDotPulse 2s ease-in-out infinite;
}
@keyframes bnavDotPulse {
    0%, 100% { box-shadow: 0 0 6px rgba(255,71,87,0.6); }
    50%      { box-shadow: 0 0 12px rgba(255,71,87,0.9); }
}

/* Staggered entrance — class-driven so it replays on re-show */
.bottom-nav.bnav-entrance .bnav-orb {
    animation: bnavOrbIn 0.4s cubic-bezier(0.22,1,0.36,1) both;
}
.bottom-nav.bnav-entrance .bnav-orb:nth-child(1) { animation-delay: 0.05s; }
.bottom-nav.bnav-entrance .bnav-orb:nth-child(2) { animation-delay: 0.10s; }
.bottom-nav.bnav-entrance .bnav-orb:nth-child(3) { animation-delay: 0.15s; }
.bottom-nav.bnav-entrance .bnav-orb:nth-child(4) { animation-delay: 0.20s; }
.bottom-nav.bnav-entrance .bnav-orb:nth-child(5) { animation-delay: 0.25s; }
@keyframes bnavOrbIn {
    from { opacity: 0; transform: translateY(16px) scale(0.7); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Ripple tap effect */
.bnav-orb::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    transform: scale(0);
    opacity: 0;
    transition: none;
}
.bnav-orb:active::after {
    animation: bnavRipple 0.4s ease-out;
}
@keyframes bnavRipple {
    0%   { transform: scale(0); opacity: 0.5; }
    100% { transform: scale(1.6); opacity: 0; }
}

/* Add padding to all sections so bottom nav doesn't overlap content */
.full-section .sec-container {
    padding-bottom: 90px;
}

/* ── Mobile adjustments ── */
@media (max-width: 600px) {
    .bottom-nav {
        padding: 6px 14px 8px;
        bottom: 8px;
        gap: 8px;
    }
    .bnav-orb {
        width: 50px;
        height: 50px;
    }
    .bnav-orb-center {
        width: 58px;
        height: 58px;
    }
    .bnav-label {
        font-size: 0.5rem;
    }
    .bnav-icon svg {
        width: 20px;
        height: 20px;
    }
    .bnav-cloud-symbol {
        width: 20px;
        height: 16px;
    }
    .bnav-orb-center .bnav-icon svg {
        width: 22px;
        height: 22px;
    }
}

/* ═══════════════════════════════════════════════════════
   ACTIVITY PANEL
   ═══════════════════════════════════════════════════════ */
.activity-panel {
    position: fixed;
    inset: 0;
    z-index: 10001;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    animation: apFadeIn 0.3s ease forwards;
}
@keyframes apFadeIn {
    to { opacity: 1; }
}

.activity-panel-inner {
    width: 100%;
    max-width: 480px;
    max-height: 82vh;
    max-height: 82svh;
    background: var(--sheet-bg);
    border: 1px solid var(--sheet-border);
    border-radius: 24px 24px 0 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: apSlideUp 0.4s cubic-bezier(0.22,1,0.36,1);
}
@keyframes apSlideUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}
@keyframes apSlideDown {
    from { transform: translateY(0); }
    to   { transform: translateY(100%); }
}

.activity-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.activity-panel-header h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
}
.activity-panel-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.6);
    font-size: 1.3rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
    padding: 0;
    line-height: 1;
}
.activity-panel-close:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
}

.activity-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

/* Score ring */
.activity-score-ring {
    position: relative;
    width: 140px;
    height: 140px;
}
.asr-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.asr-bg {
    fill: none;
    stroke: rgba(255,255,255,0.08);
    stroke-width: 8;
}
.asr-fill {
    fill: none;
    stroke: #48c78e;
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset 1s cubic-bezier(0.22,1,0.36,1), stroke 0.3s;
}
.asr-fill.ring-amber { stroke: #ffcd00; }
.asr-fill.ring-red   { stroke: #ff9494; }

.asr-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: 800;
    color: #fff;
    font-family: 'Space Mono', monospace;
}

.activity-score-subtitle {
    color: rgba(255,255,255,0.5);
    font-size: 0.85rem;
    margin: -10px 0 0;
    text-align: center;
}

/* Breakdown categories */
.activity-breakdown {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ab-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.04);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.06);
}
.ab-icon {
    font-size: 1.3rem;
    width: 32px;
    text-align: center;
    flex-shrink: 0;
}
.ab-info {
    flex: 1;
    min-width: 0;
}
.ab-info-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
}
.ab-info-detail {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.45);
}
.ab-pct {
    font-size: 0.9rem;
    font-weight: 700;
    color: #48c78e;
    font-family: 'Space Mono', monospace;
    white-space: nowrap;
}
.ab-pct.pct-amber { color: #ffcd00; }
.ab-pct.pct-red   { color: #ff9494; }

/* log it */
.activity-log-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.al-header {
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.al-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(255,255,255,0.03);
    border-radius: 10px;
}
.al-item-icon {
    font-size: 1rem;
    width: 24px;
    text-align: center;
}
.al-item-text {
    flex: 1;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.7);
}
.al-item-time {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.35);
}
.al-empty {
    text-align: center;
    color: rgba(255,255,255,0.35);
    font-size: 0.85rem;
    padding: 24px 0;
}

.activity-log-overlay {
    z-index: 4000;
}

.activity-log-modal {
    width: min(720px, calc(100vw - 28px));
    max-height: min(88vh, 860px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.activity-log-copy {
    gap: 12px;
}

.activity-log-copy-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.activity-log-section-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.92);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.popup-close-btn {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.8);
    font-size: 1.4rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.popup-close-btn:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
    border-color: rgba(255,255,255,0.28);
}

.activity-log-fields {
    overflow-y: auto;
    padding-right: 4px;
}

.activity-log-notes {
    min-height: 132px;
}

.activity-log-upload-shell {
    margin-top: 2px;
}

.activity-log-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.activity-log-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.88rem;
    font-weight: 700;
    color: rgba(255,255,255,0.88);
}

.activity-log-panel-kicker {
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.42);
}

.activity-log-analysis-empty,
.activity-log-history-empty {
    padding: 18px;
    border-radius: 18px;
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.45);
    font-size: 0.9rem;
    text-align: center;
}

.activity-log-analysis-loading {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 215, 92, 0.12), rgba(255,255,255,0.04));
    border: 1px solid rgba(255, 215, 92, 0.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

.activity-log-analysis-spinner {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    border: 2px solid rgba(255,255,255,0.18);
    border-top-color: #ffd76a;
    border-right-color: rgba(255, 215, 106, 0.62);
    flex: 0 0 auto;
    animation: activity-log-spin 0.9s linear infinite;
}

.activity-log-analysis-loading-copy {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.activity-log-analysis-loading-copy strong {
    color: rgba(255,255,255,0.94);
    font-size: 0.96rem;
    line-height: 1.35;
}

.activity-log-analysis-loading-copy span {
    color: rgba(255,255,255,0.68);
    font-size: 0.84rem;
    line-height: 1.45;
}

.activity-log-analysis-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03));
    border: 1px solid rgba(255,255,255,0.08);
}

.activity-log-analysis-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.activity-log-analysis-progress {
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.03em;
}

.activity-log-analysis-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.86);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: capitalize;
}

.activity-log-analysis-status.status-low {
    color: #ffb0b0;
    background: rgba(255, 120, 120, 0.14);
}

.activity-log-analysis-status.status-steady {
    color: #f8e08b;
    background: rgba(255, 213, 92, 0.14);
}

.activity-log-analysis-status.status-good,
.activity-log-analysis-status.status-strong {
    color: #8bf0b6;
    background: rgba(72, 199, 142, 0.16);
}

.activity-log-analysis-summary,
.activity-log-analysis-motivation {
    margin: 0;
    line-height: 1.55;
}

.activity-log-analysis-summary {
    color: rgba(255,255,255,0.9);
    font-weight: 600;
}

.activity-log-analysis-motivation {
    color: rgba(255,255,255,0.72);
}

.activity-log-analysis-suggestions {
    margin: 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: rgba(255,255,255,0.8);
}

.activity-log-history {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.activity-log-history-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    border-radius: 18px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
}

.activity-log-history-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.activity-log-history-head-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.activity-log-history-date {
    font-size: 0.84rem;
    font-weight: 700;
    color: rgba(255,255,255,0.88);
}

.activity-log-history-time {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.activity-log-history-status {
    font-size: 0.76rem;
    font-weight: 700;
    color: rgba(255,255,255,0.8);
    text-transform: capitalize;
}

.activity-log-history-notes,
.activity-log-history-summary {
    margin: 0;
    color: rgba(255,255,255,0.82);
    line-height: 1.55;
}

.activity-log-history-summary {
    color: rgba(255,255,255,0.62);
}

.activity-log-task-snapshot {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.activity-log-task-snapshot-title {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.48);
}

.activity-log-task-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.activity-log-task-item {
    padding: 12px 13px;
    border-radius: 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
}

.activity-log-task-item.is-done {
    border-color: rgba(72, 199, 142, 0.22);
    background: rgba(72, 199, 142, 0.08);
}

.activity-log-task-item.is-pending {
    border-color: rgba(255,255,255,0.08);
}

.activity-log-task-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.activity-log-task-item-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: rgba(255,255,255,0.92);
}

.activity-log-task-item-state {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.66);
}

.activity-log-task-item-meta,
.activity-log-task-item-copy {
    margin-top: 5px;
    font-size: 0.84rem;
    line-height: 1.45;
    color: rgba(255,255,255,0.64);
}

.activity-history-modal {
    max-height: min(88vh, 900px);
}

.activity-history-fields {
    display: grid;
    grid-template-columns: minmax(220px, 250px) minmax(0, 1fr);
    align-items: start;
    gap: 16px;
}

.activity-history-toolbar {
    gap: 14px;
    position: sticky;
    top: 0;
}

.activity-history-controls {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.activity-history-date-shell {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    color: rgba(255,255,255,0.8);
    font-size: 0.9rem;
    font-weight: 700;
}

.activity-history-date-input {
    min-width: 180px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.92);
    font: inherit;
}

.activity-history-date-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.activity-history-date-chip {
    appearance: none;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.78);
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.activity-history-date-chip.active,
.activity-history-date-chip:hover {
    background: rgba(255, 215, 92, 0.12);
    border-color: rgba(255, 215, 92, 0.22);
    color: rgba(255,255,255,0.94);
}

.activity-history-dates-empty {
    width: 100%;
    text-align: left;
}

.activity-history-summary {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.activity-history-summary-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    border-radius: 18px;
    background:
        radial-gradient(circle at top right, rgba(255, 215, 92, 0.12), transparent 38%),
        linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03));
    border: 1px solid rgba(255,255,255,0.08);
}

.activity-history-summary-top {
    display: flex;
    align-items: stretch;
    gap: 12px;
    flex-wrap: wrap;
}

.activity-history-summary-date-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-width: min(220px, 100%);
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255,255,255,0.045);
    border: 1px solid rgba(255,255,255,0.06);
}

.activity-history-summary-date {
    font-size: 1rem;
    line-height: 1.3;
    font-weight: 800;
    color: rgba(255,255,255,0.95);
}

.activity-history-summary-date-sub {
    font-size: 0.76rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
}

.activity-history-summary-metric {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 94px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.06);
}

.activity-history-summary-value {
    font-size: 1.02rem;
    font-weight: 800;
    color: rgba(255,255,255,0.95);
    letter-spacing: -0.03em;
}

.activity-history-summary-label {
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
}

.activity-history-summary-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    min-width: 90px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.86);
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: capitalize;
}

.activity-history-summary-pill.status-low {
    color: #ffb0b0;
    background: rgba(255, 120, 120, 0.14);
}

.activity-history-summary-pill.status-steady {
    color: #f8e08b;
    background: rgba(255, 213, 92, 0.14);
}

.activity-history-summary-pill.status-good,
.activity-history-summary-pill.status-strong {
    color: #8bf0b6;
    background: rgba(72, 199, 142, 0.16);
}

.activity-history-summary-copy {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.55;
    color: rgba(255,255,255,0.9);
    font-weight: 600;
}

.activity-history-summary-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    color: rgba(255,255,255,0.56);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.activity-history-summary .activity-log-history-empty {
    text-align: left;
}

.activity-log-history-image {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
}

.activity-log-history-image img {
    display: block;
    width: 100%;
    max-height: 200px;
    object-fit: cover;
}

.activity-log-actions {
    margin-top: auto;
}

.activity-log-actions .add-btn {
    min-width: 132px;
}

.activity-log-overlay.is-analyzing .activity-log-panel:first-of-type {
    border-color: rgba(255, 215, 92, 0.18);
    box-shadow: 0 0 0 1px rgba(255, 215, 92, 0.08), inset 0 1px 0 rgba(255,255,255,0.04);
}

.activity-log-overlay.is-analyzing .popup-close-btn,
.activity-log-overlay.is-analyzing .activity-log-actions .fao-cancel-btn,
.activity-log-overlay.is-analyzing .activity-log-actions #activityLogSaveBtn {
    opacity: 0.55;
    pointer-events: none;
}

.activity-log-overlay.is-analyzing .activity-log-actions #activityLogAnalyzeBtn {
    min-width: 146px;
}

.activity-log-overlay.is-analyzing .activity-log-actions #activityLogAnalyzeBtn::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 8px;
    vertical-align: -2px;
    border-radius: 999px;
    border: 2px solid rgba(255,255,255,0.36);
    border-top-color: rgba(255,255,255,0.92);
    animation: activity-log-spin 0.85s linear infinite;
}

@keyframes activity-log-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 640px) {
    .notes-modal {
        width: min(100vw - 18px, 100%);
        max-height: calc(100vh - 22px);
        padding: 22px 18px 18px;
        border-radius: 28px;
    }

    .notes-page-shell {
        margin-top: 0.6rem;
        padding: 12px;
        border-radius: 20px;
        gap: 12px;
    }

    /* Hide the sidebar entirely — tabs already handle section switching */
    .notes-sidebar { display: none; }

    /* Collapse layout to single column */
    .notes-layout {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    /* Remove redundant page-copy block (title + meta repeated below toolbar) */
    .notes-page-copy { display: none; }

    /* Compact toolbar: just section label + date controls stacked */
    .notes-toolbar {
        flex-direction: column;
        align-items: stretch;
        padding: 10px 12px;
        gap: 8px;
        border-radius: 16px;
    }

    /* Hide the verbose meta span, keep just the bold section title */
    .notes-toolbar-copy span { display: none; }
    .notes-toolbar-copy strong { font-size: 0.9rem; }

    .notes-toolbar-controls {
        width: 100%;
        flex-direction: row;
        gap: 8px;
    }

    /* 4-column KPI strip */
    .notes-kpis {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
    }

    .notes-kpi-card {
        padding: 8px 6px;
        border-radius: 12px;
        gap: 3px;
    }

    .notes-kpi-value {
        font-size: 1.1rem;
    }

    .notes-kpi-label {
        font-size: 0.6rem;
    }

    .notes-kpi-meta {
        font-size: 0.6rem;
    }

    /* Compact section tabs */
    .notes-section-tabs {
        gap: 6px;
    }
    .notes-section-tab {
        padding: 7px 12px;
        font-size: 0.78rem;
    }

    .idea-hook-section-grid {
        grid-template-columns: 1fr;
    }

    .idea-hook-mode-row {
        flex-direction: column;
    }

    .notes-date-picker {
        min-width: 0;
        width: 100%;
    }

    .notes-date-reset {
        width: 100%;
    }

    .notes-sidebar-stats {
        grid-template-columns: 1fr;
    }

    .notes-day-head {
        flex-direction: column;
    }

    .activity-log-modal {
        width: min(100vw - 18px, 100%);
        max-height: calc(100vh - 22px);
        padding: 22px 18px 18px;
        border-radius: 28px;
    }

    .activity-log-copy-top,
    .activity-log-panel-head,
    .activity-log-analysis-head,
    .activity-log-history-head,
    .activity-log-actions {
        flex-wrap: wrap;
    }

    .activity-history-date-shell {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .activity-history-fields {
        display: flex;
        flex-direction: column;
    }

    .activity-history-toolbar {
        position: static;
    }

    .activity-history-date-input {
        width: 100%;
        min-width: 0;
    }

    .activity-history-summary-top {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .activity-history-summary-date-block {
        grid-column: 1 / -1;
        min-width: 0;
    }

    .activity-log-actions .add-btn {
        flex: 1 1 140px;
        min-width: 0;
    }
}

/* ── Instagram theme overrides for bottom nav ── */
[data-theme="instagram"] .bottom-nav {
    background: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
[data-theme="instagram"] .bnav-orb {
    background: rgba(255,255,255,0.92) !important;
    border-color: rgba(219,219,219,0.7) !important;
    color: #262626 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
}
[data-theme="instagram"] .bnav-orb:hover {
    background: #fff !important;
    border-color: rgba(219,219,219,1) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important;
}
[data-theme="instagram"] .bnav-orb-center {
    background: linear-gradient(135deg, rgba(245,133,41,0.2), rgba(221,42,123,0.2), rgba(129,52,175,0.2)) !important;
    border-color: rgba(221,42,123,0.45) !important;
    box-shadow: 0 0 12px rgba(221,42,123,0.15), 0 2px 10px rgba(0,0,0,0.1) !important;
    color: #262626 !important;
}
[data-theme="instagram"] .bnav-orb-center:hover {
    background: linear-gradient(135deg, rgba(245,133,41,0.3), rgba(221,42,123,0.3), rgba(129,52,175,0.3)) !important;
    border-color: rgba(221,42,123,0.65) !important;
    box-shadow: 0 0 20px rgba(221,42,123,0.25), 0 4px 16px rgba(0,0,0,0.12) !important;
}
[data-theme="instagram"] .bnav-label {
    color: #8e8e8e !important;
}
[data-theme="instagram"] .bnav-orb:hover .bnav-label {
    color: #262626 !important;
}
[data-theme="instagram"] .bnav-orb.bnav-active {
    background: #fff !important;
    border-color: #0095f6 !important;
    box-shadow: 0 0 0 2px rgba(0,149,246,0.25), 0 2px 10px rgba(0,0,0,0.1) !important;
}
[data-theme="instagram"] .bnav-orb.bnav-active .bnav-label {
    color: #0095f6 !important;
}
[data-theme="instagram"] .universal-fab {
    background: linear-gradient(135deg, #f58529, #dd2a7b) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,0.3) !important;
    box-shadow: 0 4px 16px rgba(221,42,123,0.3) !important;
}

/* Instagram activity panel */
[data-theme="instagram"] .activity-panel {
    background: rgba(0,0,0,0.3) !important;
}
[data-theme="instagram"] .activity-panel-inner {
    background: #ffffff !important;
    border-color: rgba(219,219,219,0.5) !important;
}
[data-theme="instagram"] .activity-panel-header {
    border-bottom-color: rgba(219,219,219,0.5) !important;
}
[data-theme="instagram"] .activity-panel-header h3 {
    color: #262626 !important;
}
[data-theme="instagram"] .activity-panel-close {
    background: #efefef !important;
    border-color: rgba(219,219,219,0.5) !important;
    color: #262626 !important;
}
[data-theme="instagram"] .asr-bg {
    stroke: rgba(0,0,0,0.06) !important;
}
[data-theme="instagram"] .asr-label {
    color: #262626 !important;
}
[data-theme="instagram"] .activity-score-subtitle {
    color: #8e8e8e !important;
}
[data-theme="instagram"] .ab-row {
    background: #fafafa !important;
    border-color: rgba(219,219,219,0.4) !important;
}
[data-theme="instagram"] .ab-info-title {
    color: #262626 !important;
}
[data-theme="instagram"] .ab-info-detail {
    color: #8e8e8e !important;
}
[data-theme="instagram"] .al-header {
    color: #8e8e8e !important;
    border-top-color: rgba(219,219,219,0.4) !important;
}
[data-theme="instagram"] .al-item {
    background: #fafafa !important;
}
[data-theme="instagram"] .al-item-text {
    color: #262626 !important;
}
[data-theme="instagram"] .al-item-time {
    color: #8e8e8e !important;
}
[data-theme="instagram"] .al-empty {
    color: #8e8e8e !important;
}

/* ── Guided Tour — mobile overrides ─────────────────────────────────────────── */
@media (max-width: 768px) {
    .tour-card {
        max-width: calc(100vw - 24px);
        padding: 14px 14px 12px;
        border-radius: 16px;
    }
    .tour-card h3 {
        font-size: 0.95rem;
    }
    .tour-card p {
        font-size: 0.82rem;
        line-height: 1.55;
        margin-bottom: 12px;
    }
    .tour-next-btn,
    .tour-back-btn {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .tour-next-btn {
        padding: 10px 22px;
        font-size: 0.9rem;
    }
    .tour-back-btn {
        padding: 10px 16px;
    }
    .tour-skip-btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    .tour-highlight {
        border-radius: 12px;
    }
}

/* ============================================================
   CLI COMMAND BAR
   ============================================================ */
.cli-overlay {
    position: fixed;
    inset: 0;
    z-index: 10001;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding-top: min(18vh, 140px);
}
.cli-overlay.cli-open {
    display: flex;
}
.cli-bar {
    width: min(560px, 92vw);
    background: rgba(18, 18, 30, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255,255,255,0.06) inset;
    overflow: hidden;
    animation: cliSlideIn 0.22s cubic-bezier(0.32, 0.72, 0, 1);
}
@keyframes cliSlideIn {
    from { opacity: 0; transform: translateY(-16px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.cli-input-row {
    display: flex;
    align-items: center;
    padding: 14px 18px;
    gap: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.cli-prompt {
    color: rgba(246, 211, 101, 0.9);
    font-size: 1.2rem;
    font-weight: 700;
    font-family: 'Space Mono', monospace;
    flex: 0 0 auto;
    user-select: none;
}
.cli-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: #fff;
    font-size: 1.05rem;
    font-family: 'Space Mono', 'Poppins', monospace;
    caret-color: #f6d365;
}
.cli-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
    font-family: 'Poppins', sans-serif;
}
.cli-esc-hint {
    flex: 0 0 auto;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.65rem;
    font-family: 'Poppins', sans-serif;
    padding: 2px 7px;
    line-height: 1.4;
}
.cli-results {
    list-style: none;
    margin: 0;
    padding: 6px;
    max-height: 340px;
    overflow-y: auto;
}
.cli-results:empty {
    display: none;
}
.cli-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.12s ease;
    color: rgba(255, 255, 255, 0.82);
}
.cli-result-item:hover,
.cli-result-item.cli-active {
    background: rgba(255, 255, 255, 0.08);
}
.cli-result-item.cli-active {
    background: rgba(246, 211, 101, 0.12);
}
.cli-result-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    background: rgba(255, 255, 255, 0.06);
    flex: 0 0 auto;
}
.cli-result-text {
    flex: 1;
    min-width: 0;
}
.cli-result-label {
    font-size: 0.92rem;
    font-weight: 600;
    color: #fff;
    display: block;
}
.cli-result-hint {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.4);
    display: block;
    margin-top: 1px;
}
.cli-result-slash {
    font-size: 0.72rem;
    color: rgba(246, 211, 101, 0.5);
    font-family: 'Space Mono', monospace;
    flex: 0 0 auto;
}
.cli-result-group {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.25);
    padding: 10px 14px 4px;
}

/* Theme overrides */
[data-theme="instagram"] .cli-bar {
    background: rgba(255, 255, 255, 0.97);
    border-color: rgba(219, 219, 219, 0.6);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0,0,0,0.04) inset;
}
[data-theme="instagram"] .cli-input-row {
    border-bottom-color: rgba(219, 219, 219, 0.5);
}
[data-theme="instagram"] .cli-prompt { color: #e1306c; }
[data-theme="instagram"] .cli-input { color: #262626; caret-color: #e1306c; }
[data-theme="instagram"] .cli-input::placeholder { color: #8e8e8e; }
[data-theme="instagram"] .cli-esc-hint {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
    color: #8e8e8e;
}
[data-theme="instagram"] .cli-result-item { color: #262626; }
[data-theme="instagram"] .cli-result-item:hover,
[data-theme="instagram"] .cli-result-item.cli-active { background: rgba(0, 0, 0, 0.04); }
[data-theme="instagram"] .cli-result-item.cli-active { background: rgba(225, 48, 108, 0.08); }
[data-theme="instagram"] .cli-result-icon { background: rgba(0, 0, 0, 0.04); }
[data-theme="instagram"] .cli-result-label { color: #262626; }
[data-theme="instagram"] .cli-result-hint { color: #8e8e8e; }
[data-theme="instagram"] .cli-result-slash { color: rgba(225, 48, 108, 0.5); }
[data-theme="instagram"] .cli-result-group { color: #8e8e8e; }

/* ── Friend Requests Section ──────────────────────────────────────────────── */
.friend-requests-section {
    margin: 0 0 14px;
    padding: 0 4px;
}
.freq-header {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.freq-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 20px;
    background: #e74c3c;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0;
}
.freq-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.freq-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    padding: 10px 12px;
    transition: opacity .2s;
}
.freq-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}
.freq-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.freq-avatar-init {
    font-size: 1rem;
    font-weight: 700;
    color: rgba(255,255,255,0.7);
}
.freq-info {
    flex: 1;
    min-width: 0;
}
.freq-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.freq-uname {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.42);
    margin-top: 1px;
}
.freq-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.freq-btn {
    border: none;
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity .15s, transform .1s;
}
.freq-btn:active { transform: scale(0.96); }
.freq-accept {
    background: linear-gradient(135deg, #27ae60, #2ecc71);
    color: #fff;
}
.freq-deny {
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.55);
}
.freq-deny:hover { background: rgba(231,76,60,0.25); color: #e74c3c; }

/* Badge on the Friends guide trigger button */
.freq-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 20px;
    background: #e74c3c;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0;
    margin-left: 4px;
    vertical-align: middle;
}

/* ── Sent section header ── */
.freq-header-sent {
    color: rgba(255,255,255,0.45);
    margin-top: 10px;
}
.freq-cancel {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.45);
    font-size: 0.72rem;
    padding: 4px 10px;
}
.freq-cancel:hover { background: rgba(231,76,60,0.2); color: #e74c3c; }
.freq-avatar-sent { opacity: 0.55; }

/* ── Friend Add Overlay: base layout ────────────────────────────────────── */
.friend-add-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 10002;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 14px;
    box-sizing: border-box;
    overflow-y: auto;
}
.friend-add-modal {
    background: linear-gradient(160deg, #1a1a2e 0%, #16213e 100%);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 18px;
    padding: 1.6rem 1.6rem 1.4rem;
    width: min(380px, 92vw);
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    box-shadow: 0 24px 60px rgba(0,0,0,0.55);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.friend-add-modal h3 {
    color: #f6d365;
    font-size: 1.15rem;
    margin: 0 0 2px;
}
.friend-add-modal p {
    color: rgba(255,255,255,0.5);
    font-size: 0.8rem;
    margin: 0 0 4px;
}
.fao-request-modal { /* no additional overrides needed — inherits .friend-add-modal */ }
.popup-copy { margin-bottom: 4px; }
.popup-fields { display: flex; flex-direction: column; gap: 6px; }
.fao-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 4px;
}
.fao-actions-compact {
    gap: 8px;
}
.fao-btn-compact {
    min-width: 0;
    padding: 0.58rem 1rem;
    font-size: 0.9rem;
    line-height: 1.05;
    border-radius: 999px;
}
.vibe-add-modal .popup-copy {
    gap: 6px;
    padding-bottom: 8px;
}
.vibe-add-modal .popup-copy p {
    max-width: none;
    line-height: 1.34;
}
.vibe-add-modal .popup-fields {
    margin-top: 6px;
}
.fao-cancel-btn {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.6);
}
.fao-cancel-btn:hover { background: rgba(255,255,255,0.13); }
.add-btn-primary {
    background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
    color: #1a1a2e;
    font-weight: 700;
}
.add-btn-primary:hover { opacity: 0.9; transform: scale(1.03); }

/* ── Friend Add Overlay: search-only UI ─────────────────────────────────── */
.fao-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}
.fao-search-wrap .add-input {
    flex: 1;
    margin: 0;
}
.fao-search-clear {
    flex-shrink: 0;
    background: none;
    border: none;
    color: rgba(255,255,255,0.4);
    font-size: 1rem;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}
.fao-search-clear:hover { color: rgba(255,255,255,0.8); }
.fao-search-results {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 220px;
    overflow-y: auto;
    margin-bottom: 8px;
    border-radius: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 4px;
}
.fao-result-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: none;
    border: none;
    border-radius: 8px;
    padding: 7px 8px;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s;
    color: inherit;
}
.fao-result-row:hover { background: rgba(255,255,255,0.07); }
.fao-result-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.fao-result-avatar-img { width: 100%; height: 100%; object-fit: cover; }
.fao-result-avatar-init { font-size: 0.9rem; font-weight: 700; color: rgba(255,255,255,0.7); }
.fao-result-info { flex: 1; min-width: 0; }
.fao-result-name { font-size: 0.88rem; font-weight: 600; color: rgba(255,255,255,0.9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fao-result-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 2px;
}
.fao-result-uname { font-size: 0.72rem; color: rgba(255,255,255,0.4); }
.fao-result-badge,
.fao-sel-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid rgba(100,220,180,0.26);
    background: rgba(100,220,180,0.12);
    color: rgba(178,255,229,0.92);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.2;
}
.fao-no-results {
    text-align: center;
    padding: 12px 8px;
    color: rgba(255,255,255,0.35);
    font-size: 0.82rem;
}
.fao-selected-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(100,220,180,0.08);
    border: 1px solid rgba(100,220,180,0.25);
    border-radius: 10px;
    padding: 9px 12px;
    margin-bottom: 10px;
}
.fao-sel-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}
.fao-sel-avatar-img { width: 100%; height: 100%; object-fit: cover; }
.fao-sel-avatar-init { font-size: 0.95rem; font-weight: 700; color: rgba(255,255,255,0.75); }
.fao-sel-info { flex: 1; min-width: 0; }
.fao-sel-name { font-size: 0.9rem; font-weight: 600; color: rgba(255,255,255,0.9); }
.fao-sel-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 2px;
}
.fao-sel-uname { font-size: 0.75rem; color: rgba(100,220,180,0.7); }
.fao-sel-clear {
    background: none;
    border: none;
    color: rgba(255,255,255,0.35);
    font-size: 1rem;
    cursor: pointer;
    padding: 2px 4px;
    flex-shrink: 0;
}
.fao-sel-clear:hover { color: rgba(255,100,100,0.8); }

/* ── Profile Status Widget ────────────────────────────────────────────────── */
.profile-status-widget {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 18px;
    padding: 14px 16px;
    margin: 0 0 16px;
}
.psw-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.psw-title {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
}
.psw-hint {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.28);
}
.psw-photo-preview {
    margin-bottom: 10px;
    border-radius: 12px;
    overflow: hidden;
    max-height: 200px;
}
.status-photo-thumb {
    width: 100%;
    height: 100%;
    max-height: 200px;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}
.psw-text-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.psw-text-input {
    flex: 1;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 20px;
    padding: 8px 14px;
    font-size: 0.88rem;
    color: rgba(255,255,255,0.88);
    outline: none;
    transition: border-color .15s;
}
.psw-text-input::placeholder { color: rgba(255,255,255,0.28); }
.psw-text-input:focus { border-color: rgba(255,255,255,0.28); }
.psw-save-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
    border: none;
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: opacity .15s, transform .1s;
}
.psw-save-btn:active { transform: scale(0.94); }
.psw-photo-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.psw-photo-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.45);
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.12);
    transition: background .15s, color .15s;
}
.psw-photo-label:hover { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.7); }
.psw-remove-btn {
    background: none;
    border: none;
    font-size: 0.75rem;
    color: rgba(231,76,60,0.7);
    cursor: pointer;
    padding: 4px 6px;
}
.psw-remove-btn:hover { color: #e74c3c; }

/* ── Status Ring on Friend Orbs ──────────────────────────────────────────── */
/* Spinning gradient ring using ::before + mask — never covers orb content */
.friend-orb.orb-has-status::before {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    padding: 3px;
    background: conic-gradient(
        #f9a825 0%,
        #e91e63 30%,
        #9c27b0 55%,
        #3f51b5 78%,
        #f9a825 100%
    );
    /* mask punches out the center so only the ring border is visible */
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: orb-status-ring-spin 3s linear infinite;
    pointer-events: none;
    z-index: 3;
}
/* Soft glow halo behind the orb */
.friend-orb.orb-has-status::after {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: radial-gradient(
        circle at 50% 50%,
        rgba(233, 30, 99, 0.30) 0%,
        rgba(155, 89, 182, 0.15) 50%,
        transparent 72%
    );
    pointer-events: none;
    z-index: 0;
    animation: orb-status-glow 2.2s ease-in-out infinite;
}
@keyframes orb-status-ring-spin {
    to { transform: rotate(360deg); }
}
@keyframes orb-status-glow {
    0%, 100% { opacity: 0.55; transform: scale(1); }
    50%       { opacity: 1;    transform: scale(1.04); }
}

/* ── Friend Status Viewer (story overlay) ────────────────────────────────── */
.fsv-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(0,0,0,0.92);
    display: flex;
    align-items: center;
    justify-content: center;
}
.fsv-inner {
    position: relative;
    width: min(420px, 100vw);
    max-height: 100dvh;
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    overflow: hidden;
    background: #111;
}
/* Multi-segment story progress bar */
.fsv-progress-wrap {
    position: absolute;
    top: 8px; left: 10px; right: 10px;
    display: flex;
    gap: 4px;
    z-index: 4;
}
.fsv-seg-track {
    flex: 1;
    height: 3px;
    background: rgba(255,255,255,0.22);
    border-radius: 3px;
    overflow: hidden;
}
.fsv-seg-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #9b59b6, #e74c3c);
    border-radius: 3px;
}
.fsv-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 8px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.6), transparent);
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 3;
}
.fsv-username {
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.fsv-close-btn {
    background: rgba(255,255,255,0.15);
    border: none;
    color: #fff;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    cursor: pointer;
    flex-shrink: 0;
}
.fsv-media {
    min-height: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 56px 24px 24px;
}
.fsv-photo {
    width: 100%;
    max-height: 60dvh;
    object-fit: contain;
    border-radius: 12px;
    display: block;
}
.fsv-text {
    font-size: 1.35rem;
    font-weight: 700;
    color: #fff;
    text-align: center;
    line-height: 1.4;
    word-break: break-word;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
    padding: 12px 0;
}
.fsv-hint {
    text-align: center;
    font-size: 0.72rem;
    color: rgba(255,255,255,0.3);
    padding: 10px 16px 16px;
}
/* Swipe-down pill handle */
.fsv-inner::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,0.25);
    margin: 10px auto 0;
    flex-shrink: 0;
}

/* ── Status Compose Modal ────────────────────────────────────────────────── */
.status-compose-modal {
    max-width: 400px;
}

/* ── Status photo grid (shared between widget + compose overlay) ─────────── */
.spg-grid,
.sap-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    margin-bottom: 10px;
}
.spg-item,
.sap-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
}
.spg-thumb,
.sap-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.spg-del,
.sap-del {
    position: absolute;
    top: 2px; right: 2px;
    background: rgba(0,0,0,0.65);
    border: none;
    color: #fff;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}
.spg-del:hover,
.sap-del:hover { background: rgba(231,76,60,0.85); }
.spg-add,
.sap-add {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    cursor: pointer;
    color: rgba(255,255,255,0.4);
    font-size: 0.6rem;
    transition: background .15s, color .15s;
}
.spg-add:hover,
.sap-add:hover { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.8); }

/* ── Profile status display: photo strip ─────────────────────────────────── */
.psd-photo-strip {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.psd-photo-thumb {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}

/* ── Public profile status: photo strip ───────────────────────────────────── */
.pp-status-photos {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

/* ── Profile Status Dashboard Display Card ─────────────────────────────────── */
.psd-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 16px;
}
.psd-photo-wrap {
    width: 100%;
    max-height: 220px;
    overflow: hidden;
}
.psd-photo {
    width: 100%;
    max-height: 220px;
    object-fit: cover;
    display: block;
}
.psd-body {
    padding: 12px 16px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.psd-text {
    flex: 1;
    font-size: 0.95rem;
    color: rgba(255,255,255,0.88);
    line-height: 1.45;
    word-break: break-word;
}
.psd-photo-strip { cursor: pointer; }
.psd-actions { display: flex; gap: 6px; flex-shrink: 0; }
.psd-view-btn {
    background: rgba(249,163,37,0.15);
    border: 1px solid rgba(249,163,37,0.3);
    border-radius: 20px;
    color: rgba(249,163,37,0.9);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 5px 12px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s;
}
.psd-view-btn:hover { background: rgba(249,163,37,0.25); }
.psd-edit-btn {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 20px;
    color: rgba(255,255,255,0.5);
    font-size: 0.72rem;
    padding: 4px 12px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .15s, color .15s;
}
.psd-edit-btn:hover { background: rgba(255,255,255,0.14); color: rgba(255,255,255,0.8); }

/* ── Public Profile Status Card ───────────────────────────────────────────── */
.pp-status-card {
    margin: 10px 0 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 14px;
    overflow: hidden;
}
.pp-status-photo {
    width: 100%;
    max-height: 180px;
    object-fit: cover;
    display: block;
}
.pp-status-text {
    padding: 10px 14px;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.8);
    line-height: 1.45;
    word-break: break-word;
}

/* ── Public Profile Friend Gallery ───────────────────────────────────────── */
.pp-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 8px 0 4px;
}
.pp-gallery-folder {
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.09);
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease;
}
.pp-gallery-folder:hover {
    transform: translateY(-2px);
    border-color: rgba(246,211,101,0.25);
}
.pp-gallery-cover {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}
.pp-gallery-cover-empty {
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, rgba(246,211,101,0.08), rgba(255,255,255,0.04));
    display: flex;
    align-items: center;
    justify-content: center;
}
.pp-gallery-cover-empty::after {
    content: '🖼';
    font-size: 2rem;
    opacity: 0.4;
}
.pp-gallery-info {
    padding: 8px 10px 9px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pp-gallery-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pp-gallery-count {
    font-size: 0.76rem;
    color: rgba(255,255,255,0.45);
}