:root {
    --navy: #14233a;
    --navy-deep: #0c1829;
    --ink: #1a2744;
    --orange: #f26a21;
    --orange-deep: #d45512;
    --paper: #f6f1ea;
    --white: #ffffff;
    --card: #ffffff;
    --muted: #5c6b80;
    --line: #e4ddd3;
    --cyan: #2ec4d6;
    --green: #2fbf71;
    --yellow: #ffd166;
    --red: #e85d4c;
    --shadow: 0 12px 32px rgba(20, 35, 58, 0.08);
    --nav-bg: rgba(255, 255, 255, 0.96);
    --ok-bg: #e4f8ee;
    --ok-fg: #1c7a46;
    --warn-bg: #fff3e4;
    --warn-fg: #b45309;
    --err-bg: #fde8e4;
    --err-fg: #9b2c1f;
    --chat-log: #fbf8f4;
    --bubble-mine: #14233a;
    --glow-1: radial-gradient(1200px 500px at 10% -10%, rgba(46, 196, 214, 0.12), transparent 50%);
    --glow-2: radial-gradient(900px 400px at 110% 0%, rgba(242, 106, 33, 0.12), transparent 46%);
    --radius: 18px;
    --font: "Nunito", "Segoe UI", sans-serif;
    --display: "Outfit", var(--font);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; width: 100%; overflow-x: hidden; }
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font);
    color: var(--ink);
    background: var(--glow-1), var(--glow-2), var(--paper);
    min-height: 100vh;
    line-height: 1.45;
}
img { max-width: 100%; }
a { color: var(--orange-deep); text-decoration: none; }
h1, h2, h3, .brand-text strong {
    font-family: var(--display);
    letter-spacing: -0.02em;
}
h1 { font-size: 1.7rem; margin: 0 0 0.2rem; }
h2 { font-size: 1.15rem; margin: 0 0 0.75rem; }
h3 { font-size: 1.05rem; margin: 0 0 0.3rem; }
p { margin: 0 0 0.8rem; }
label { display: flex; flex-direction: column; gap: 0.35rem; font-weight: 700; font-size: 0.92rem; }
input, textarea, select {
    font: inherit;
    padding: 0.85rem 0.95rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--white);
    color: var(--ink);
}
input:focus, textarea:focus, select:focus {
    outline: 2px solid rgba(242, 106, 33, 0.35);
    border-color: var(--orange);
}
button { font: inherit; }

.app-shell { min-height: 100vh; width: 100%; }
.main-wrap { min-width: 0; width: 100%; }
.content {
    width: min(100% - 1.5rem, 42rem);
    margin: 0 auto;
    padding: 1rem 0 calc(7rem + env(safe-area-inset-bottom, 0px));
}
.no-nav .content { padding-bottom: 2rem; }
.no-nav .app-shell { display: block; }

.sidebar { display: none; }
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 1rem 0;
}
.brand, .brand-mobile {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--navy);
}
.brand-mark {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--card);
    box-shadow: 0 0 0 3px var(--card), 0 0 0 6px #f26a21, 0 0 0 8px #ffd166, 0 0 0 10px #2fbf71, 0 0 0 12px #2ec4d6;
    flex: 0 0 auto;
}
.brand-mark img { width: 100%; height: 100%; object-fit: cover; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-text strong { font-size: 1.15rem; }
.brand-text small {
    color: var(--orange);
    font-weight: 800;
    letter-spacing: 0.18em;
    font-size: 0.62rem;
}

.bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    background: var(--nav-bg);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
    padding: 0.28rem 0.12rem calc(0.38rem + env(safe-area-inset-bottom, 0px));
    z-index: 50;
    overflow: hidden;
}
.bottom-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.08rem;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    color: var(--muted);
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 1.15;
    padding: 0.28rem 0.06rem;
    border-radius: 10px;
    text-align: center;
}
.bottom-nav .nav-ico {
    font-size: 1.05rem;
    line-height: 1;
    flex: 0 0 auto;
}
.bottom-nav .nav-lbl {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.side-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
    padding: 0.4rem 0.2rem;
    border-radius: 12px;
}
.bottom-nav a.is-active, .side-nav a.is-active {
    color: var(--navy);
    background: rgba(242, 106, 33, 0.12);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border: 0;
    border-radius: 999px;
    padding: 0.85rem 1.15rem;
    font-weight: 800;
    cursor: pointer;
    text-align: center;
    min-height: 46px;
}
.btn-primary { background: var(--orange); color: #fff; }
.btn-primary:hover { background: var(--orange-deep); }
.btn-ghost { background: var(--card); color: var(--navy); border: 1px solid var(--line); }
.btn-small { min-height: 38px; padding: 0.45rem 0.9rem; font-size: 0.9rem; }
.btn-tiny { min-height: 32px; padding: 0.25rem 0.7rem; font-size: 0.78rem; }
.btn-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1.1rem;
}
.eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--orange);
    margin: 0 0 0.2rem;
}
.muted { color: var(--muted); }
.center { text-align: center; }
.hint { color: var(--muted); font-size: 0.88rem; font-weight: 500; }
.empty {
    background: var(--card);
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    padding: 1.2rem;
    color: var(--muted);
}
.stack { display: grid; gap: 0.85rem; }
.panel, .plain-card, .event-card, .auth-card, .score-card, .group-chip {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.panel { padding: 1.1rem; }
.plain-card, .event-card { display: block; padding: 1rem 1.1rem; color: inherit; }
.plain-card-top, .block-head, .meta-row, .score-line {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    align-items: center;
}
.block-head { justify-content: space-between; margin-bottom: 0.7rem; align-items: center; gap: 0.5rem; }
.block-head h2 { margin: 0; min-width: 0; flex: 1 1 auto; }
.block { margin: 1.4rem 0; }
.card-list { display: grid; gap: 0.8rem; }
.event-when { color: var(--orange); font-weight: 800; font-size: 0.86rem; }
.meta-row { color: var(--muted); font-size: 0.86rem; }
.pill {
    background: var(--paper);
    color: var(--navy);
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 800;
}
.pill-ok { background: var(--ok-bg); color: var(--ok-fg); }
.pill-warn { background: var(--warn-bg); color: var(--warn-fg); }

.stat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.45rem; margin-bottom: 1rem; }
.stat {
    background: var(--card);
    border-radius: 16px;
    padding: 0.7rem 0.4rem;
    text-align: center;
    box-shadow: var(--shadow);
    min-width: 0;
}
.stat strong { display: block; font-size: 1.3rem; font-family: var(--display); }
.stat span { color: var(--muted); font-size: 0.72rem; font-weight: 700; overflow-wrap: anywhere; }

.score-chip, .score-card {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    padding: 0.8rem 1rem;
}
.score-chip {
    background: var(--card);
    border-radius: 16px;
    box-shadow: var(--shadow);
    flex-direction: row;
    align-items: center;
    white-space: nowrap;
}
.score-chip-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}
.score-chip-text span {
    font-family: var(--display);
    font-size: 1.25rem;
    font-weight: 800;
}
.score-chip-text small { color: var(--muted); font-weight: 700; }
.score-grid { display: grid; gap: 0.8rem; margin: 1rem 0; }
.score-card { color: inherit; }
.place-mark {
    width: 48px; height: 48px; border-radius: 50%;
    display: grid; place-items: center;
    background: linear-gradient(135deg, #f26a21, #ffd166 40%, #2fbf71 70%, #2ec4d6);
    color: #fff; font-size: 1.3rem; flex: 0 0 auto;
}
.stars { color: #d9d1c7; letter-spacing: 0.05em; }
.stars .on { color: var(--orange); }
.avatar {
    width: 42px; height: 42px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--navy); color: #fff;
    font-weight: 800; flex: 0 0 auto;
    overflow: hidden;
}
.avatar.tiny { width: 28px; height: 28px; font-size: 0.7rem; }
.avatar.has-photo { padding: 0; background: #d9d1c7; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.profile-photo { width: 72px; height: 72px; font-size: 1.4rem; }
.profile-head { display: flex; align-items: center; gap: 0.85rem; }
.profile-meta { margin: 0.15rem 0 0; font-weight: 700; }

.people-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.45rem; }
.people-list li { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; min-width: 0; }
.person { display: flex; align-items: center; gap: 0.55rem; color: inherit; font-weight: 700; min-width: 0; }
.person small { display: block; color: var(--muted); font-weight: 600; }
.split-people { display: grid; gap: 1rem; margin: 1rem 0; }
.chip-row, .group-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.7rem;
    width: 100%;
}
.group-chip {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 0.85rem 1rem;
    color: inherit;
    overflow-wrap: anywhere;
}
.group-chip strong, .group-chip small { display: block; overflow-wrap: anywhere; }
.group-chip small { color: var(--muted); }

.banner {
    background: var(--warn-bg);
    border-left: 4px solid var(--orange);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
}

.hero { text-align: center; padding: 1.2rem 0 2rem; }
.hero-logo img {
    width: min(280px, 78vw);
    filter: drop-shadow(0 12px 24px rgba(20, 35, 58, 0.12));
}
.hero-copy h1 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.hero-lead { max-width: 36rem; margin: 0.6rem auto 1.2rem; color: var(--muted); font-size: 1.05rem; }
.hero-actions { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; }
.feature-grid {
    list-style: none; padding: 0;
    display: grid; gap: 0.7rem;
    margin: 2rem 0 0;
    text-align: left;
}
.feature-grid li {
    background: var(--card); border-radius: 16px; padding: 1rem;
    box-shadow: var(--shadow);
}
.feature-grid strong { display: block; margin-bottom: 0.2rem; }

.auth-page .content { width: min(26rem, calc(100% - 1.5rem)); }
.landing-page .content { width: min(72rem, calc(100% - 1.5rem)); }

.home-welcome {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 1rem;
    flex-wrap: wrap;
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.15rem 1.25rem;
    margin-bottom: 1.2rem;
}
.home-welcome h1 { margin-bottom: 0.15rem; }
.home-welcome-copy { margin: 0; }
.welcome-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}
.note-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--card);
    box-shadow: var(--shadow);
    color: var(--navy);
    flex: 0 0 auto;
}
.nav-badge {
    display: inline-flex;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.32rem;
    border-radius: 999px;
    background: var(--orange);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    align-items: center;
    justify-content: center;
    line-height: 1;
    margin-left: 0.25rem;
}
.note-bell .nav-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    margin: 0;
}
.feed-list { display: grid; gap: 0.7rem; }
.feed-card {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 0.9rem 1rem;
    color: inherit;
    text-align: left;
    width: 100%;
    border: 0;
    cursor: pointer;
    font: inherit;
}
.feed-card h3 { margin: 0.12rem 0 0.2rem; }
.feed-card p { margin: 0.2rem 0; }
.note-form { margin: 0; }
.note-card.is-unread, .feed-card.is-unread {
    box-shadow: 0 0 0 2px rgba(242, 106, 33, 0.4), var(--shadow);
}
.place-actions { margin: 0.85rem 0 1.15rem; }
.review-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
    display: grid;
    gap: 0.75rem;
}
.review-list li {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
}
.review-list p { margin: 0.2rem 0 0; }
.home-layout { display: grid; gap: 0.2rem; }
.event-grid, .card-list {
    display: grid;
    gap: 0.8rem;
    grid-template-columns: minmax(0, 1fr);
}
.event-card, .group-chip, .plain-card { min-width: 0; max-width: 100%; }
.event-card h3, .plain-card h3, .plain-card p { overflow-wrap: anywhere; }

.media-upload { margin-bottom: 1rem; }
.media-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
    margin-top: 1rem;
}
.media-card {
    margin: 0;
    background: var(--paper);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.media-card img, .media-card video {
    width: 100%;
    height: 150px;
    object-fit: cover;
    background: var(--navy-deep);
    display: block;
}
.media-card figcaption {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.6rem 0.2rem;
    font-size: 0.8rem;
    font-weight: 700;
}
.media-card form { padding: 0 0.55rem 0.55rem; }
.media-vis select { width: 100%; padding: 0.4rem 0.5rem; font-size: 0.8rem; }
.auth-card { padding: 1.4rem 1.2rem 1.2rem; }
.auth-logo { width: 140px; display: block; margin: 0 auto 0.6rem; }
.auth-card h1 { text-align: center; }
.logout-wrap { margin: 1rem 0 2rem; }

.map {
    height: 220px;
    border-radius: 16px;
    overflow: hidden;
    margin: 0.4rem 0 0.8rem;
    border: 1px solid var(--line);
}
.map-tools { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }

.rsvp {
    background: var(--card);
    border-radius: var(--radius);
    padding: 1rem;
    box-shadow: var(--shadow);
    margin: 1rem 0;
}
.segment {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}
.segment button {
    border: 1px solid var(--line);
    background: var(--card);
    border-radius: 999px;
    padding: 0.8rem;
    font-weight: 800;
    color: var(--navy);
}
.segment button.is-on {
    background: var(--orange);
    border-color: var(--orange);
    color: #fff;
}

.event-layout { display: grid; gap: 1rem; }
.chat-panel {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    min-height: 420px;
    overflow: hidden;
}
.chat-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--line);
}
.chat-head h2 { margin: 0; }
.nudge-btn {
    background: linear-gradient(90deg, #f26a21, #ffd166 45%, #2ec4d6);
    color: var(--navy);
    border: 0;
    border-radius: 999px;
    padding: 0.45rem 0.8rem;
    font-weight: 800;
    cursor: pointer;
}
.chat-log {
    flex: 1;
    overflow-y: auto;
    padding: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    background: var(--chat-log);
    max-height: 50vh;
}
.bubble {
    max-width: 85%;
    background: var(--card);
    border-radius: 16px 16px 16px 4px;
    padding: 0.55rem 0.75rem;
    box-shadow: 0 4px 12px rgba(20, 35, 58, 0.05);
    align-self: flex-start;
}
.bubble.mine {
    align-self: flex-end;
    background: var(--bubble-mine);
    color: #fff;
    border-radius: 16px 16px 4px 16px;
}
.bubble.mine small, .bubble.mine time { color: rgba(255,255,255,0.7); }
.bubble small, .bubble time { display: block; font-size: 0.72rem; color: var(--muted); }
.bubble p { margin: 0.15rem 0; }
.bubble.nudge, .bubble.wink {
    align-self: center;
    background: var(--warn-bg);
    color: var(--navy);
    border-radius: 999px;
    font-weight: 800;
}
.bubble.wink { background: #e8f6fb; }
html[data-theme="dark"] .bubble.wink { background: #16323a; }
.wink-btn { background: linear-gradient(90deg, #2ec4d6, #ffd166 70%); }
.dm-panel { min-height: 28rem; margin-bottom: 1rem; }
.chat-head .btn-row { margin: 0; }
.chat-form {
    display: flex;
    gap: 0.45rem;
    padding: 0.7rem;
    border-top: 1px solid var(--line);
}
.chat-form input { flex: 1; }

.toast {
    border-radius: 14px;
    padding: 0.8rem 1rem;
    margin-bottom: 0.9rem;
    font-weight: 700;
}
.toast-ok { background: var(--ok-bg); color: var(--ok-fg); }
.toast-err { background: var(--err-bg); color: var(--err-fg); }

.nudge-flash {
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: rgba(242, 106, 33, 0.18);
    z-index: 80;
}
body.nudging {
    animation: msn-nudge 0.7s ease-in-out;
}
@keyframes msn-nudge {
    0%, 100% { transform: translate(0, 0) rotate(0); }
    15% { transform: translate(-14px, 6px) rotate(-1.2deg); }
    30% { transform: translate(14px, -8px) rotate(1.2deg); }
    45% { transform: translate(-10px, -4px) rotate(-0.6deg); }
    60% { transform: translate(10px, 7px) rotate(0.8deg); }
    75% { transform: translate(-5px, 2px); }
    90% { transform: translate(3px, -2px); }
}

@media (min-width: 720px) {
    .event-grid, .card-list {
        grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
    }
    .group-grid { grid-template-columns: 1fr; }
    .stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .score-grid { grid-template-columns: 1fr 1fr; }
    .split-people { grid-template-columns: 1fr 1fr; }
    .feature-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 960px) {
    body:not(.no-nav) .app-shell {
        display: grid;
        grid-template-columns: 15.5rem minmax(0, 1fr);
        align-items: stretch;
    }
    .sidebar {
        display: flex;
        flex-direction: column;
        gap: 1.4rem;
        padding: 1.3rem 1rem;
        background: var(--card);
        border-right: 1px solid var(--line);
        min-height: 100vh;
        height: 100vh;
        position: sticky;
        top: 0;
        overflow-y: auto;
    }
    .side-nav { display: grid; gap: 0.3rem; }
    .side-nav a { flex-direction: row; justify-content: flex-start; padding: 0.7rem 0.8rem; font-size: 0.95rem; }
    .side-user { margin-top: auto; display: flex; gap: 0.7rem; align-items: center; }
    .side-user small { display: block; color: var(--muted); font-size: 0.78rem; overflow-wrap: anywhere; }
    .side-user .ui-btn { margin-left: auto; flex: 0 0 auto; }
    .topbar, .bottom-nav { display: none; }
    body:not(.no-nav) .content {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 1.75rem clamp(1.25rem, 2.4vw, 2.75rem) 2.75rem;
    }
    .main-wrap { min-width: 0; width: 100%; }
    .home-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);
        gap: 1.5rem;
        align-items: start;
    }
    .home-groups { position: sticky; top: 1.2rem; }
    .home-layout .group-grid { grid-template-columns: 1fr; }
    .home-welcome { padding: 1.4rem 1.6rem; }
    .map { height: 280px; }
    .hero {
        display: grid;
        grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
        align-items: center;
        text-align: left;
        gap: clamp(1.5rem, 4vw, 3rem);
        padding: 2.2rem 0 1.4rem;
    }
    .hero-logo img { width: min(18rem, 100%); }
    .hero-lead { margin: 0.5rem 0 1.2rem; max-width: 38rem; }
    .hero-actions { justify-content: flex-start; }
    .landing-page .content {
        width: min(70rem, calc(100% - 4rem));
        padding-top: 2.5rem;
        padding-bottom: 4rem;
    }
    .auth-page .content { width: min(26rem, calc(100% - 4rem)); }
    .media-card img, .media-card video { height: 11rem; }
}

@media (min-width: 1100px) {
    .event-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(20rem, 24rem);
        align-items: start;
        gap: 1.25rem;
    }
    .chat-panel { position: sticky; top: 1rem; height: calc(100vh - 2rem); min-height: 32rem; }
    .chat-log { max-height: none; }
    .feature-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .media-grid { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
}

@media (min-width: 1400px) {
    body:not(.no-nav) .app-shell { grid-template-columns: 16.5rem minmax(0, 1fr); }
    body:not(.no-nav) .content { padding-left: clamp(2rem, 3vw, 3.5rem); padding-right: clamp(2rem, 3vw, 3.5rem); }
    .home-layout { grid-template-columns: minmax(0, 1fr) 21rem; }
    .event-grid, .card-list { grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); }
}

.attend {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 0.85rem 1rem;
    margin: 0.85rem 0 1rem;
}
.attend-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 800;
    margin-bottom: 0.45rem;
}
.attend-track {
    height: 10px;
    border-radius: 999px;
    background: var(--line);
    overflow: hidden;
}
.attend-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--orange), var(--cyan));
    min-width: 0;
}
.attend small { display: block; margin-top: 0.4rem; }
.attend-pill {
    display: inline-flex;
    align-items: center;
    background: var(--paper);
    color: var(--navy);
    border-radius: 999px;
    padding: 0.15rem 0.55rem;
    font-size: 0.75rem;
    font-weight: 800;
}

.topbar-actions { display: flex; align-items: center; gap: 0.45rem; }
.ui-btn {
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: var(--card);
    box-shadow: var(--shadow);
    color: var(--navy);
    cursor: pointer;
    font-size: 1.05rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ui-dock {
    position: fixed;
    top: 0.7rem;
    right: 0.7rem;
    z-index: 60;
}
.no-nav .ui-dock { display: block; }
body:not(.no-nav) .ui-dock { display: none; }

.bg-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.5rem;
}
.bg-swatch {
    aspect-ratio: 1;
    border: 2px solid var(--line);
    border-radius: 14px;
    cursor: pointer;
    padding: 0;
    box-shadow: var(--shadow);
}
.bg-swatch.is-on { border-color: var(--orange); box-shadow: 0 0 0 2px var(--orange); }
.bg-swatch[data-bg="paper"] { background: #f6f1ea; }
.bg-swatch[data-bg="mint"] { background: #d9efe6; }
.bg-swatch[data-bg="dusk"] { background: #e4dcf3; }
.bg-swatch[data-bg="rose"] { background: #f3d9d2; }
.bg-swatch[data-bg="ocean"] { background: #cfe8ef; }

html[data-theme="dark"] {
    color-scheme: dark;
    --navy: #e7edf5;
    --navy-deep: #0b1018;
    --ink: #e7edf5;
    --orange-deep: #ff8a4c;
    --paper: #121820;
    --white: #1b2430;
    --card: #1b2430;
    --muted: #9aa8ba;
    --line: #2c3848;
    --shadow: 0 12px 32px rgba(0, 0, 0, 0.38);
    --nav-bg: rgba(18, 24, 32, 0.94);
    --ok-bg: #163528;
    --ok-fg: #7ddea8;
    --warn-bg: #3a2a12;
    --warn-fg: #ffc56d;
    --err-bg: #3a1c18;
    --err-fg: #ff9b8f;
    --chat-log: #141b24;
    --bubble-mine: #0e1622;
    --glow-1: radial-gradient(1200px 500px at 10% -10%, rgba(46, 196, 214, 0.1), transparent 50%);
    --glow-2: radial-gradient(900px 400px at 110% 0%, rgba(242, 106, 33, 0.1), transparent 46%);
}
html[data-theme="dark"][data-bg="paper"] { --paper: #121820; }
html[data-theme="dark"][data-bg="mint"] { --paper: #101a16; --glow-1: radial-gradient(1200px 500px at 10% -10%, rgba(47, 191, 113, 0.16), transparent 50%); }
html[data-theme="dark"][data-bg="dusk"] { --paper: #16141e; --glow-1: radial-gradient(1200px 500px at 10% -10%, rgba(160, 130, 220, 0.16), transparent 50%); }
html[data-theme="dark"][data-bg="rose"] { --paper: #1a1414; --glow-2: radial-gradient(900px 400px at 110% 0%, rgba(242, 106, 33, 0.18), transparent 46%); }
html[data-theme="dark"][data-bg="ocean"] { --paper: #10181c; --glow-1: radial-gradient(1200px 500px at 10% -10%, rgba(46, 196, 214, 0.18), transparent 50%); }

html[data-theme="light"][data-bg="paper"] { --paper: #f6f1ea; }
html[data-theme="light"][data-bg="mint"] { --paper: #e7f4ef; --glow-1: radial-gradient(1200px 500px at 10% -10%, rgba(47, 191, 113, 0.16), transparent 50%); }
html[data-theme="light"][data-bg="dusk"] { --paper: #ece7f6; --glow-1: radial-gradient(1200px 500px at 10% -10%, rgba(140, 110, 210, 0.14), transparent 50%); }
html[data-theme="light"][data-bg="rose"] { --paper: #f8ece8; --glow-2: radial-gradient(900px 400px at 110% 0%, rgba(242, 106, 33, 0.16), transparent 46%); }
html[data-theme="light"][data-bg="ocean"] { --paper: #e6f3f6; --glow-1: radial-gradient(1200px 500px at 10% -10%, rgba(46, 196, 214, 0.18), transparent 50%); }

@media (min-width: 960px) {
    body:not(.no-nav) .ui-dock { display: none; }
}