/* ===========================================================================
   fun.simplemoney.online — design system
   Loaded AFTER the shared /css/styles.css so it can override site defaults.
   Everything is prefixed smo-/page-/seg- so it cannot leak into other pages.

   Contains: tokens, light + dark themes, layout, feed cards, skeletons,
   comments, sheets, toasts, reels, uploader, legal pages, responsive rules.
   =========================================================================== */

/* ------------------------------------------------------------------ tokens */
:root {
    color-scheme: light;

    /* type scale (1.200 minor third, 16px base) */
    --smo-fs-xs:   0.75rem;
    --smo-fs-sm:   0.8125rem;
    --smo-fs-base: 0.9375rem;
    --smo-fs-md:   1.0625rem;
    --smo-fs-lg:   1.25rem;
    --smo-fs-xl:   1.5rem;
    --smo-fs-2xl:  1.875rem;

    /* spacing scale */
    --smo-1: 4px;  --smo-2: 8px;  --smo-3: 12px; --smo-4: 16px;
    --smo-5: 20px; --smo-6: 24px; --smo-8: 32px; --smo-10: 40px;
    --smo-12: 48px; --smo-16: 64px;

    --smo-radius-sm: 8px;
    --smo-radius: 14px;
    --smo-radius-lg: 20px;
    --smo-radius-pill: 999px;

    --smo-col: 680px;              /* the reading column */
    --smo-reel-h: 100dvh;
    --smo-reel-w: 520px;

    /* light theme */
    --smo-bg:        #f2f4f7;
    --smo-surface:   #ffffff;
    --smo-surface-2: #f7f9fb;
    --smo-media-bg:  #eceff3;
    --smo-text:      #12161c;
    --smo-text-2:    #4a5462;
    --smo-muted:     #6b7684;
    --smo-line:      #e3e8ee;
    --smo-line-2:    #d3dae3;

    --smo-accent:      #1160f4;
    --smo-accent-ink:  #ffffff;
    --smo-accent-soft: #e8f0fe;
    --smo-like:        #e0245e;
    --smo-danger:      #c62828;
    --smo-ok:          #067647;
    --smo-warn:        #92400e;
    --smo-warn-bg:     #fff7ed;
    --smo-warn-line:   #fed7aa;

    --smo-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
    --smo-shadow:    0 1px 3px rgba(16, 24, 40, .07), 0 8px 24px rgba(16, 24, 40, .06);
    --smo-shadow-lg: 0 12px 40px rgba(16, 24, 40, .18);
    --smo-ring:      0 0 0 3px rgba(17, 96, 244, .35);

    --smo-skeleton-a: #e8ecf1;
    --smo-skeleton-b: #f3f6f9;

    --smo-ease: cubic-bezier(.2, .7, .3, 1);
}

/* dark theme — applied by OS preference or by the in-page toggle */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { color-scheme: dark; }
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --smo-bg:        #0d1117;
        --smo-surface:   #161b22;
        --smo-surface-2: #1b2129;
        --smo-media-bg:  #0a0d12;
        --smo-text:      #e9edf3;
        --smo-text-2:    #b3bdca;
        --smo-muted:     #8b96a5;
        --smo-line:      #262d36;
        --smo-line-2:    #333c47;

        --smo-accent:      #4d8dff;
        --smo-accent-ink:  #06101f;
        --smo-accent-soft: #16233a;
        --smo-like:        #ff4d7d;
        --smo-danger:      #ff6b6b;
        --smo-ok:          #4ade80;
        --smo-warn:        #fbbf24;
        --smo-warn-bg:     #2a1f0c;
        --smo-warn-line:   #4d3a10;

        --smo-shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
        --smo-shadow:    0 1px 3px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .45);
        --smo-shadow-lg: 0 12px 40px rgba(0, 0, 0, .6);
        --smo-ring:      0 0 0 3px rgba(77, 141, 255, .45);

        --smo-skeleton-a: #1b2129;
        --smo-skeleton-b: #232b35;
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --smo-bg:        #0d1117;
    --smo-surface:   #161b22;
    --smo-surface-2: #1b2129;
    --smo-media-bg:  #0a0d12;
    --smo-text:      #e9edf3;
    --smo-text-2:    #b3bdca;
    --smo-muted:     #8b96a5;
    --smo-line:      #262d36;
    --smo-line-2:    #333c47;

    --smo-accent:      #4d8dff;
    --smo-accent-ink:  #06101f;
    --smo-accent-soft: #16233a;
    --smo-like:        #ff4d7d;
    --smo-danger:      #ff6b6b;
    --smo-ok:          #4ade80;
    --smo-warn:        #fbbf24;
    --smo-warn-bg:     #2a1f0c;
    --smo-warn-line:   #4d3a10;

    --smo-shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
    --smo-shadow:    0 1px 3px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .45);
    --smo-shadow-lg: 0 12px 40px rgba(0, 0, 0, .6);
    --smo-ring:      0 0 0 3px rgba(77, 141, 255, .45);

    --smo-skeleton-a: #1b2129;
    --smo-skeleton-b: #232b35;
}

/* ------------------------------------------------------------------- base */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    padding-bottom: 0;            /* shared styles.css sets 80px */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: var(--smo-fs-base);
    line-height: 1.5;
    background: var(--smo-bg);
    color: var(--smo-text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

:where(a) { color: var(--smo-accent); }

:where(button, a, input, textarea, select):focus-visible {
    outline: none;
    box-shadow: var(--smo-ring);
    border-radius: var(--smo-radius-sm);
}

/* The `hidden` ATTRIBUTE only sets display:none through the UA stylesheet, so
   any author rule with a display value silently beats it. `.smo-reply-form`
   and `.load-more` both set display, which is why every reply box was showing
   open under every comment. This one line fixes all of them. */
[hidden] { display: none !important; }

.smo-visually-hidden {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* -------------------------------------------------------------- page header */
.page-header {
    background: var(--smo-surface);
    border-bottom: 1px solid var(--smo-line);
    padding: var(--smo-3) var(--smo-4) var(--smo-2);
    position: sticky;
    top: 0;
    z-index: 20;
    /* The shared /css/styles.css sets `header { background:#222; color:#fff }`
       and .page-header IS a <header>, so the colour must be re-asserted or the
       heading renders white-on-white. */
    color: var(--smo-text);
    backdrop-filter: saturate(1.4) blur(8px);
}

.page-header h1,
.page-header h2 { color: var(--smo-text); }

.page-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--smo-3);
    max-width: var(--smo-col);
    margin: 0 auto;
}

.brand {
    display: flex;
    align-items: center;
    gap: var(--smo-2);
    min-width: 0;
}

.brand h1 {
    margin: 0;
    font-size: var(--smo-fs-md);
    font-weight: 700;
    letter-spacing: -.015em;
    white-space: nowrap;
}

.brand-mark {
    flex: none;
    width: 30px; height: 30px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    font-size: 17px;
    line-height: 1;
    background: linear-gradient(140deg, #ffd166, #ff8b3d);
    box-shadow: var(--smo-shadow-sm);
}

.page-header p {
    margin: 2px 0 0;
    color: var(--smo-muted);
    font-size: var(--smo-fs-sm);
}

.header-actions { display: flex; align-items: center; gap: var(--smo-2); flex: none; }

.icon-btn {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border: 1px solid var(--smo-line);
    background: var(--smo-surface);
    color: var(--smo-text-2);
    border-radius: var(--smo-radius-pill);
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    transition: background .15s var(--smo-ease), border-color .15s var(--smo-ease);
}
.icon-btn:hover { background: var(--smo-surface-2); border-color: var(--smo-line-2); }

.upload-cta {
    flex: none;
    background: var(--smo-accent);
    color: var(--smo-accent-ink);
    text-decoration: none;
    padding: 9px var(--smo-4);
    border-radius: var(--smo-radius-pill);
    font-weight: 650;
    font-size: var(--smo-fs-sm);
    white-space: nowrap;
    box-shadow: var(--smo-shadow-sm);
    transition: transform .12s var(--smo-ease), filter .15s var(--smo-ease);
}
.upload-cta:hover { filter: brightness(1.06); }
.upload-cta:active { transform: scale(.97); }

.controls {
    display: flex;
    gap: var(--smo-2);
    flex-wrap: wrap;
    max-width: var(--smo-col);
    margin: var(--smo-3) auto 0;
}

.seg {
    display: inline-flex;
    background: var(--smo-surface-2);
    border: 1px solid var(--smo-line);
    border-radius: var(--smo-radius-pill);
    padding: 3px;
    gap: 2px;
}

.seg button {
    border: 0;
    background: transparent;
    padding: 6px var(--smo-3);
    border-radius: var(--smo-radius-pill);
    font-size: var(--smo-fs-sm);
    font-weight: 620;
    font-family: inherit;
    color: var(--smo-muted);
    cursor: pointer;
    transition: background .15s var(--smo-ease), color .15s var(--smo-ease);
}
.seg button:hover { color: var(--smo-text); }
.seg button[aria-pressed="true"] {
    background: var(--smo-surface);
    color: var(--smo-text);
    box-shadow: var(--smo-shadow-sm);
}

/* --------------------------------------------------------------- live rail */
.live-rail { max-width: var(--smo-col); margin: var(--smo-4) auto 0; padding: 0 var(--smo-4); }
.live-rail-title { font-size: var(--smo-fs-sm); margin: 0 0 var(--smo-2); color: var(--smo-text-2); }
.live-rail-items { display: flex; gap: var(--smo-2); overflow-x: auto; padding-bottom: var(--smo-1); }

.live-card {
    flex: 0 0 auto;
    display: flex; flex-direction: column; gap: 2px;
    min-width: 168px;
    padding: var(--smo-2) var(--smo-3);
    background: var(--smo-surface);
    border: 1px solid var(--smo-line);
    border-radius: var(--smo-radius);
    text-decoration: none;
    color: inherit;
}
.live-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #e11d48;
    animation: smo-pulse 1.6s ease-in-out infinite;
}
@keyframes smo-pulse { 50% { opacity: .3; } }
.live-title { font-weight: 640; font-size: var(--smo-fs-sm); }
.live-owner, .live-viewers { color: var(--smo-muted); font-size: var(--smo-fs-xs); }

/* -------------------------------------------------------------------- feed */
main { max-width: var(--smo-col); margin: 0 auto; padding: var(--smo-4); }

.smo-feed { display: flex; flex-direction: column; gap: var(--smo-4); }

.smo-card {
    background: var(--smo-surface);
    border: 1px solid var(--smo-line);
    border-radius: var(--smo-radius);
    box-shadow: var(--smo-shadow);
    overflow: hidden;
    content-visibility: auto;
    contain-intrinsic-size: auto 420px;
}
.smo-card.smo-broken,
.smo-card.smo-hidden { display: none; }

.smo-media-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
    background: var(--smo-media-bg);
    line-height: 0;
}
.smo-media-wrap:has(video) { background: #000; }

/* Never upscale: a 210x220 sticker used to be stretched to 596x763 and go
   blurry, because width:100% forces small media up to the card width. */
.smo-media {
    display: block;
    margin: 0 auto;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
    background: transparent;
    opacity: 0;
    transition: opacity .28s var(--smo-ease);
}
.smo-media.is-loaded { opacity: 1; }

video.smo-media { width: 100%; max-height: 70vh; background: #000; }

/* skeleton shown until the real media decodes — stops the layout jumping */
.smo-skeleton {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
        var(--smo-skeleton-a) 20%,
        var(--smo-skeleton-b) 40%,
        var(--smo-skeleton-a) 60%);
    background-size: 220% 100%;
    animation: smo-shimmer 1.4s linear infinite;
}
@keyframes smo-shimmer { to { background-position: -220% 0; } }
.smo-media-wrap.is-ready .smo-skeleton { display: none; }

.smo-badge {
    position: absolute;
    top: var(--smo-2); left: var(--smo-2);
    z-index: 2;
    background: rgba(0, 0, 0, .62);
    color: #fff;
    font-size: var(--smo-fs-xs);
    font-weight: 650;
    padding: 3px 9px;
    border-radius: var(--smo-radius-pill);
    letter-spacing: .02em;
    backdrop-filter: blur(4px);
}

/* safe-browsing blur */
.smo-card.smo-blurred .smo-media { filter: blur(28px); transform: scale(1.06); }
.smo-reveal {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    gap: var(--smo-2);
    background: rgba(10, 13, 18, .35);
    color: #fff;
    font-size: var(--smo-fs-sm);
    font-weight: 600;
    cursor: pointer;
    border: 0;
    z-index: 3;
    font-family: inherit;
}
.smo-card:not(.smo-blurred) .smo-reveal { display: none; }

/* ----------------------------------------------------------------- actions */
.smo-actions {
    display: flex;
    align-items: center;
    gap: var(--smo-1);
    padding: var(--smo-2) var(--smo-2) 0;
}

.smo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 0;
    background: transparent;
    padding: 8px 10px;
    border-radius: var(--smo-radius-pill);
    cursor: pointer;
    font-size: var(--smo-fs-base);
    font-family: inherit;
    color: var(--smo-text-2);
    text-decoration: none;
    min-height: 40px;
    min-width: 40px;
    transition: background .15s var(--smo-ease), color .15s var(--smo-ease),
                transform .12s var(--smo-ease);
}
.smo-btn:hover { background: var(--smo-surface-2); color: var(--smo-text); }
.smo-btn:active { transform: scale(.94); }
.smo-btn:disabled { opacity: .45; cursor: default; }
.smo-ico { font-size: 1.1rem; line-height: 1; }
.smo-n {
    font-size: var(--smo-fs-sm);
    color: var(--smo-muted);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* the glyph is swapped in JS (♡ -> ♥); CSS only carries the colour */
.smo-like.liked .smo-ico { color: var(--smo-like); }
.smo-like.liked .smo-n { color: var(--smo-like); }
.smo-like.liked .smo-ico { animation: smo-pop .32s var(--smo-ease); }
@keyframes smo-pop { 40% { transform: scale(1.35); } }

.smo-spacer { margin-left: auto; }

.smo-meta { padding: 2px var(--smo-4) var(--smo-3); }
.smo-title {
    font-size: var(--smo-fs-sm);
    color: var(--smo-text-2);
    word-break: break-word;
    font-weight: 550;
}
.smo-sub { font-size: var(--smo-fs-xs); color: var(--smo-muted); margin-top: 2px; }

/* ---------------------------------------------------------------- comments */
.smo-comments {
    border-top: 1px solid var(--smo-line);
    padding: var(--smo-3) var(--smo-4) var(--smo-4);
    background: var(--smo-surface-2);
}

.smo-comment-list {
    display: flex; flex-direction: column;
    gap: var(--smo-3);
    margin-bottom: var(--smo-3);
}

.smo-comment { font-size: var(--smo-fs-base); }
.smo-user { font-weight: 680; color: var(--smo-text); }
.smo-time { color: var(--smo-muted); font-size: var(--smo-fs-xs); margin-left: 6px; }
.smo-text { margin-top: 2px; white-space: pre-wrap; word-break: break-word; color: var(--smo-text-2); }

.smo-reply-btn {
    border: 0; background: transparent;
    color: var(--smo-muted);
    font-size: var(--smo-fs-xs);
    font-weight: 650;
    font-family: inherit;
    padding: 4px 0;
    cursor: pointer;
}
.smo-reply-btn:hover { color: var(--smo-accent); }

.smo-replies {
    margin-left: var(--smo-3);
    border-left: 2px solid var(--smo-line-2);
    padding-left: var(--smo-3);
}
.smo-reply { margin-top: var(--smo-2); font-size: var(--smo-fs-sm); }

.smo-comment-form, .smo-reply-form { display: flex; gap: var(--smo-2); margin-top: var(--smo-2); }

.smo-comment-input, .smo-reply-input {
    flex: 1; min-width: 0;
    padding: 10px var(--smo-4);
    border: 1px solid var(--smo-line-2);
    border-radius: var(--smo-radius-pill);
    font-size: var(--smo-fs-base);
    font-family: inherit;
    background: var(--smo-surface);
    color: var(--smo-text);
}
.smo-comment-input::placeholder, .smo-reply-input::placeholder { color: var(--smo-muted); }

.smo-send {
    border: 0;
    background: var(--smo-accent);
    color: var(--smo-accent-ink);
    border-radius: var(--smo-radius-pill);
    padding: 0 var(--smo-5);
    font-weight: 650;
    font-size: var(--smo-fs-sm);
    font-family: inherit;
    cursor: pointer;
    min-height: 40px;
    white-space: nowrap;
}
.smo-send:disabled { opacity: .45; cursor: default; }

.smo-empty { color: var(--smo-muted); font-size: var(--smo-fs-sm); margin: 0; }
.smo-empty.smo-standalone {
    text-align: center;
    padding: var(--smo-16) var(--smo-4);
    background: var(--smo-surface);
    border: 1px dashed var(--smo-line-2);
    border-radius: var(--smo-radius);
}
.smo-empty-icon { font-size: 40px; display: block; margin-bottom: var(--smo-3); }
.smo-empty-title {
    font-size: var(--smo-fs-md); font-weight: 680;
    color: var(--smo-text); margin: 0 0 var(--smo-1);
}
.smo-err { color: var(--smo-danger); }

.smo-retry {
    margin-top: var(--smo-4);
    border: 1px solid var(--smo-line-2);
    background: var(--smo-surface);
    color: var(--smo-text);
    border-radius: var(--smo-radius-pill);
    padding: 9px var(--smo-5);
    font-weight: 640;
    font-size: var(--smo-fs-sm);
    font-family: inherit;
    cursor: pointer;
}

/* ------------------------------------------------------------ load / poll */
/* This is now the ONLY way to page (infinite scroll is off by default), so it
   reads as a primary action rather than a quiet outline. */
.load-more {
    display: block;
    width: 100%;
    margin: var(--smo-6) 0 var(--smo-4);
    padding: var(--smo-4);
    border: 0;
    border-radius: var(--smo-radius);
    background: var(--smo-accent);
    color: var(--smo-accent-ink);
    font-size: var(--smo-fs-md);
    font-weight: 660;
    font-family: inherit;
    cursor: pointer;
    box-shadow: var(--smo-shadow-sm);
    transition: filter .15s var(--smo-ease), transform .12s var(--smo-ease);
}
.load-more:hover { filter: brightness(1.06); }
.load-more:active { transform: scale(.99); }
.load-more:disabled {
    background: var(--smo-surface);
    color: var(--smo-muted);
    border: 1px solid var(--smo-line);
    box-shadow: none;
    cursor: default;
    filter: none;
}

.smo-spinner {
    width: 30px; height: 30px;
    margin: var(--smo-5) auto;
    border: 3px solid var(--smo-line);
    border-top-color: var(--smo-accent);
    border-radius: 50%;
    animation: smo-spin .9s linear infinite;
}
@keyframes smo-spin { to { transform: rotate(360deg); } }

.smo-new-pill {
    position: fixed;
    top: 84px; left: 50%;
    transform: translate(-50%, -20px);
    z-index: 60;
    border: 0;
    background: var(--smo-accent);
    color: var(--smo-accent-ink);
    padding: 10px var(--smo-5);
    border-radius: var(--smo-radius-pill);
    font-weight: 650;
    font-size: var(--smo-fs-sm);
    font-family: inherit;
    box-shadow: var(--smo-shadow-lg);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s var(--smo-ease), transform .25s var(--smo-ease);
}
.smo-new-pill.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }

.smo-toast {
    position: fixed;
    left: 50%; bottom: var(--smo-6);
    transform: translate(-50%, 20px);
    z-index: 90;
    display: flex; align-items: center; gap: var(--smo-3);
    background: #12161c;
    color: #fff;
    padding: var(--smo-3) var(--smo-5);
    border-radius: var(--smo-radius);
    font-size: var(--smo-fs-sm);
    max-width: min(92vw, 480px);
    box-shadow: var(--smo-shadow-lg);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s var(--smo-ease), transform .2s var(--smo-ease);
}
.smo-toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.smo-toast.error { background: var(--smo-danger); }
.smo-toast-action {
    border: 0; background: rgba(255, 255, 255, .18); color: #fff;
    border-radius: var(--smo-radius-pill);
    padding: 5px var(--smo-3);
    font-weight: 650; font-size: var(--smo-fs-xs); font-family: inherit;
    cursor: pointer; flex: none;
}

/* ------------------------------------------------------------------ sheet */
.smo-sheet-backdrop {
    position: fixed; inset: 0;
    background: rgba(9, 12, 17, .6);
    z-index: 100;
    display: grid; place-items: center;
    padding: var(--smo-4);
    opacity: 0; pointer-events: none;
    transition: opacity .2s var(--smo-ease);
    backdrop-filter: blur(2px);
}
.smo-sheet-backdrop.show { opacity: 1; pointer-events: auto; }

.smo-sheet {
    background: var(--smo-surface);
    color: var(--smo-text);
    border-radius: var(--smo-radius-lg);
    box-shadow: var(--smo-shadow-lg);
    width: min(440px, 100%);
    max-height: 86vh;
    overflow-y: auto;
    padding: var(--smo-5);
    transform: translateY(12px);
    transition: transform .2s var(--smo-ease);
}
.smo-sheet-backdrop.show .smo-sheet { transform: none; }
.smo-sheet h2 { margin: 0 0 var(--smo-1); font-size: var(--smo-fs-md); }
.smo-sheet p { margin: 0 0 var(--smo-4); color: var(--smo-muted); font-size: var(--smo-fs-sm); }

.smo-choice {
    display: block; width: 100%; text-align: left;
    padding: var(--smo-3) var(--smo-4);
    margin-bottom: var(--smo-2);
    border: 1px solid var(--smo-line);
    border-radius: var(--smo-radius-sm);
    background: var(--smo-surface);
    color: var(--smo-text);
    font-size: var(--smo-fs-base);
    font-family: inherit;
    cursor: pointer;
    transition: border-color .15s var(--smo-ease), background .15s var(--smo-ease);
}
.smo-choice:hover { border-color: var(--smo-accent); background: var(--smo-accent-soft); }
.smo-sheet-cancel {
    display: block; width: 100%;
    margin-top: var(--smo-3);
    padding: var(--smo-3);
    border: 0; background: transparent;
    color: var(--smo-muted);
    font-weight: 640; font-size: var(--smo-fs-sm); font-family: inherit;
    cursor: pointer;
}

/* ------------------------------------------------------------------ reels */
body[data-view="reels"] {
    background: #000;
    overflow: hidden;
    padding-bottom: 0;
}
body[data-view="reels"] .page-header {
    background: rgba(0, 0, 0, .8);
    border-bottom-color: #1e242c;
}
body[data-view="reels"] .page-header,
body[data-view="reels"] .page-header h1,
body[data-view="reels"] .brand h1 { color: #fff; }
body[data-view="reels"] .page-header p { color: #97a1ae; }
body[data-view="reels"] .seg { background: rgba(255, 255, 255, .1); border-color: rgba(255,255,255,.14); }
body[data-view="reels"] .seg button { color: #ccd4dd; }
body[data-view="reels"] .seg button[aria-pressed="true"] { background: #fff; color: #000; }
body[data-view="reels"] .icon-btn {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .16);
    color: #fff;
}
body[data-view="reels"] .live-rail,
body[data-view="reels"] #footer { display: none; }

body[data-view="reels"] main {
    max-width: none;
    padding: 0;
    height: var(--smo-reel-h);
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

body[data-view="reels"] .smo-feed { gap: 0; }

body[data-view="reels"] .smo-card {
    position: relative;
    height: var(--smo-reel-h);
    scroll-snap-align: start;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    contain-intrinsic-size: auto;
}

body[data-view="reels"] .smo-media-wrap {
    width: 100%;
    max-width: var(--smo-reel-w);
    height: 100%;
    margin: 0 auto;
    min-height: 0;
    background: #000;
}
body[data-view="reels"] .smo-media {
    width: 100%; height: 100%;
    max-width: 100%; max-height: none;
    object-fit: contain;
}

body[data-view="reels"] .smo-actions {
    position: absolute;
    right: max(8px, calc(50% - (var(--smo-reel-w) / 2) + 8px));
    bottom: 18%;
    flex-direction: column;
    padding: 0;
    gap: var(--smo-2);
    z-index: 6;
}
body[data-view="reels"] .smo-btn {
    flex-direction: column;
    gap: 2px;
    background: rgba(0, 0, 0, .5);
    color: #fff;
    width: 52px; height: 52px;
    border-radius: 50%;
    padding: 0;
    backdrop-filter: blur(6px);
}
body[data-view="reels"] .smo-btn:hover { background: rgba(0, 0, 0, .72); }
body[data-view="reels"] .smo-n { color: #fff; font-size: var(--smo-fs-xs); }
body[data-view="reels"] .smo-spacer { margin-left: 0; }

body[data-view="reels"] .smo-meta {
    position: absolute;
    left: max(0px, calc(50% - (var(--smo-reel-w) / 2)));
    right: max(70px, calc(50% - (var(--smo-reel-w) / 2) + 70px));
    bottom: 10%;
    padding: var(--smo-3) var(--smo-4);
}
body[data-view="reels"] .smo-title,
body[data-view="reels"] .smo-sub {
    color: #fff;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .95);
}

body[data-view="reels"] .smo-comments {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 100%;
    max-width: var(--smo-reel-w);
    max-height: 60%;
    overflow-y: auto;
    background: var(--smo-surface);
    border-top: 0;
    border-radius: var(--smo-radius-lg) var(--smo-radius-lg) 0 0;
    z-index: 7;
}

body[data-view="reels"] .load-more,
body[data-view="reels"] #smo-sentinel { display: none; }

/* --------------------------------------------------------------- uploader */
.drop-zone {
    border: 2px dashed var(--smo-line-2);
    border-radius: var(--smo-radius);
    padding: var(--smo-12) var(--smo-5);
    text-align: center;
    color: var(--smo-muted);
    background: var(--smo-surface);
    cursor: pointer;
    transition: border-color .15s var(--smo-ease), background .15s var(--smo-ease);
}
.drop-zone:hover, .drop-zone.dragover {
    border-color: var(--smo-accent);
    background: var(--smo-accent-soft);
}
.drop-zone strong {
    display: block; color: var(--smo-text);
    font-size: var(--smo-fs-md); margin-bottom: var(--smo-1);
}
.drop-zone .hint { font-size: var(--smo-fs-sm); margin-top: var(--smo-2); }

.upload-list { display: flex; flex-direction: column; gap: var(--smo-3); margin-top: var(--smo-6); }

.upload-item {
    display: flex; gap: var(--smo-4); align-items: center;
    background: var(--smo-surface);
    border: 1px solid var(--smo-line);
    border-radius: var(--smo-radius);
    padding: var(--smo-3) var(--smo-4);
}
.upload-thumb {
    width: 64px; height: 64px; flex: none;
    border-radius: var(--smo-radius-sm);
    object-fit: cover;
    background: var(--smo-surface-2);
}
.upload-body { flex: 1; min-width: 0; }
.upload-name {
    font-size: var(--smo-fs-sm); font-weight: 640;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.upload-status { font-size: var(--smo-fs-xs); color: var(--smo-muted); margin-top: 2px; }
.upload-status.ok { color: var(--smo-ok); }
.upload-status.err { color: var(--smo-danger); }

.upload-bar {
    height: 6px; background: var(--smo-line);
    border-radius: var(--smo-radius-pill);
    margin-top: var(--smo-2); overflow: hidden;
}
.upload-bar span {
    display: block; height: 100%; width: 0;
    background: var(--smo-accent);
    border-radius: var(--smo-radius-pill);
    transition: width .2s var(--smo-ease);
}
.upload-item.done .upload-bar span { background: var(--smo-ok); }
.upload-item.failed .upload-bar span { background: var(--smo-danger); }

/* ------------------------------------------------------------ doc / legal */
.doc {
    max-width: 720px;
    margin: 0 auto;
    padding: var(--smo-8) var(--smo-4) var(--smo-16);
}
.doc h1 { font-size: var(--smo-fs-2xl); letter-spacing: -.02em; margin: 0 0 var(--smo-2); }
.doc h2 {
    font-size: var(--smo-fs-md); margin: var(--smo-8) 0 var(--smo-2);
    padding-top: var(--smo-4); border-top: 1px solid var(--smo-line);
}
.doc p, .doc li { color: var(--smo-text-2); }
.doc ul { padding-left: var(--smo-5); }
.doc li { margin-bottom: var(--smo-1); }
.doc .updated { color: var(--smo-muted); font-size: var(--smo-fs-sm); margin-bottom: var(--smo-6); }
.doc code {
    background: var(--smo-surface-2); border: 1px solid var(--smo-line);
    padding: 1px 6px; border-radius: 6px; font-size: .9em;
}

.notice {
    background: var(--smo-warn-bg);
    border: 1px solid var(--smo-warn-line);
    color: var(--smo-warn);
    border-radius: var(--smo-radius-sm);
    padding: var(--smo-3) var(--smo-4);
    font-size: var(--smo-fs-sm);
    margin: var(--smo-4) 0;
}

.site-footer {
    max-width: var(--smo-col);
    margin: var(--smo-10) auto 0;
    padding: var(--smo-5) var(--smo-4) var(--smo-10);
    border-top: 1px solid var(--smo-line);
    display: flex; flex-wrap: wrap; gap: var(--smo-2) var(--smo-4);
    align-items: center;
    font-size: var(--smo-fs-xs);
    color: var(--smo-muted);
}
.site-footer a { color: var(--smo-muted); text-decoration: none; }
.site-footer a:hover { color: var(--smo-accent); text-decoration: underline; }
body[data-view="reels"] .site-footer { display: none; }

/* ------------------------------------------------------------- responsive */

/* The shared site nav is `nav { display:flex; flex-wrap:wrap; gap:16px }` with
   7 links + an online counter + a login link. On a phone that wraps to three
   rows and eats half the screen. Scoped to #header so no other subdomain's
   nav is affected — this stylesheet only loads here. */
@media (max-width: 820px) {
    #header nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 4px;
        padding: 8px 10px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    #header nav::-webkit-scrollbar { display: none; }
    #header nav > div { flex: none; margin: 0 !important; display: flex; align-items: center; }
    #header nav a { white-space: nowrap; padding: 6px 9px; font-size: var(--smo-fs-sm); }
    #header nav #onlineCount { display: none; }
}

@media (max-width: 700px) {
    .page-header { padding: 10px var(--smo-3) 8px; }
    .page-header p { display: none; }
    .brand h1 { font-size: var(--smo-fs-base); }
    .brand-mark { width: 28px; height: 28px; font-size: 15px; }
    .upload-cta { padding: 8px var(--smo-3); }
    .icon-btn { width: 36px; height: 36px; }
    .controls { gap: 6px; margin-top: var(--smo-2); }
    .seg button { padding: 6px 10px; font-size: var(--smo-fs-xs); }
    main { padding: var(--smo-2); }
    .smo-feed { gap: var(--smo-3); }
    .smo-media { max-height: 62vh; }
    .smo-comments { padding: var(--smo-3); }
    .doc { padding: var(--smo-5) var(--smo-4) var(--smo-12); }
    .doc h1 { font-size: var(--smo-fs-xl); }
}

@media (max-width: 400px) {
    .page-header-row { flex-wrap: wrap; }
    .header-actions { width: 100%; }
    .upload-cta { flex: 1; text-align: center; }
    .controls { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .controls::-webkit-scrollbar { display: none; }
    .seg { flex: none; }
    .smo-btn { padding: 8px; }
    .smo-actions { gap: 0; }
}

@media (min-width: 1100px) { :root { --smo-reel-w: 560px; } }

/* Landscape phones have almost no vertical room. */
@media (max-height: 520px) and (orientation: landscape) {
    .smo-media { max-height: 78vh; }
    .page-header p { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .smo-media { opacity: 1; }
}

@media print {
    .page-header, .smo-actions, .smo-comments, .load-more, #header, .site-footer { display: none; }
}