.x-auth-shell { position: relative; width: min(440px,calc(100% - 40px)); margin: 0 auto; padding: 42px 0; min-height: 100dvh; }
.x-auth-logo { display: flex; justify-content: center; margin-bottom: 28px; }
.x-auth-logo svg { width: 35px; height: 35px; }
.x-auth-back { position: absolute; left: 0; top: 20px; }
.site-auth-theme { position: absolute; right: 0; top: 20px; }
.site-verification-note { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 24px; padding: 14px; border: 1px solid var(--x-border); border-radius: 12px; color: var(--x-ink); background: var(--accent-soft); }
.site-verification-note > svg { width: 22px; height: 22px; color: var(--accent); }
.site-verification-note p { margin: 0; font-size: 14px; line-height: 21px; }
.site-verification-note strong { display: block; margin-bottom: 4px; }
.site-turnstile { min-height: 70px; color: var(--x-danger); font-size: 14px; line-height: 21px; }
.x-auth-shell h1 { margin: 0 0 28px; font-size: 31px; line-height: 36px; letter-spacing: -.5px; }
.x-auth-form { display: grid; gap: 20px; }
.x-auth-form > label:not(.x-auth-remember) { display: grid; gap: 6px; color: var(--x-muted); font-size: 14px; }
.x-auth-form input:not([type=checkbox]) { display: block; width: 100%; min-height: 54px; padding: 14px 12px; border: 1px solid var(--x-border); border-radius: 4px; color: var(--x-ink); background: var(--x-bg); font-size: 17px; }
.x-auth-form input:where(:not([type=checkbox])):focus { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: -2px; }
.x-auth-form label > span { font-size: 12px; }
.x-auth-submit { display: block; width: 100%; min-height: 48px; margin-top: 8px; padding: 12px 20px; border: 0; border-radius: 999px; color: var(--x-primary-text); background: var(--x-primary-bg); font-size: 16px; font-weight: 700; }
.x-auth-submit:hover { background: var(--x-primary-hover); }
.x-auth-remember { display: flex; align-items: center; gap: 8px; color: var(--x-ink); }
.x-auth-remember input { width: 18px; height: 18px; accent-color: var(--accent); }
.x-auth-link { display: inline-block; margin-top: 20px; border: 0; background: transparent; color: var(--accent); padding: 0; }
.x-auth-hint { margin-top: 24px; color: var(--x-muted); font-size: 15px; line-height: 22px; }
.x-auth-hint a { color: var(--accent); }
.x-form-status { padding: 12px 14px; border-radius: 12px; color: var(--x-success); background: var(--x-success-bg); font-size: 15px; line-height: 22px; }
.x-form-error { margin: 12px 16px; color: var(--x-danger); font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }
.x-auth-shell .x-form-error { margin: 0 0 20px; }
.x-form-error p { margin: 0 0 6px; }
.x-compose-dialog { width: min(600px,calc(100% - 24px)); max-height: calc(100dvh - 40px); margin: min(8vh,80px) auto auto; padding: 0; overflow: auto; border: 0; border-radius: 16px; background: var(--x-panel-bg, var(--x-bg)); color: var(--x-ink); box-shadow: 0 0 15px #65778633; }
.x-compose-dialog::backdrop { background: #0006; }
.x-compose-dialog > header { display: flex; align-items: center; gap: 18px; padding: 12px 16px; }
.x-compose-dialog h2 { margin: 0; font-size: 18px; }
.x-compose-dialog header button { font-size: 28px; }
.x-inline-composer { border-bottom: 1px solid var(--x-line); scroll-margin-top: 110px; }
.x-write-form { padding: 16px; }
.x-write-row { display: flex; align-items: flex-start; gap: 12px; }
.x-write-row textarea { display: block; min-width: 0; flex: 1; width: 100%; min-height: 96px; resize: vertical; padding: 8px 0; border: 0; background: transparent; color: var(--x-ink); font-size: 20px; line-height: 26px; }
.x-write-row textarea:focus { outline: none; }
.x-write-row:focus-within { box-shadow: 0 1px var(--accent); }
.x-write-row textarea::placeholder { color: var(--x-muted); opacity: 1; }
.x-write-bottom { display: flex; align-items: center; gap: 8px; margin: 12px 0 0 52px; padding-top: 12px; border-top: 1px solid var(--x-line); }
.x-write-category { min-width: 0; flex: 1; }
.x-write-category select { min-width: 0; width: 100%; max-width: 200px; min-height: 36px; padding: 5px 8px; border: 0; border-radius: 999px; color: var(--accent); background: transparent; font-size: 13px; }
.x-write-counter { flex-shrink: 0; margin-left: auto; color: var(--x-muted); font-size: 12px; white-space: nowrap; }
.x-write-counter.is-over { color: var(--x-danger); font-weight: 700; }
.x-write-bottom .x-blue-button { flex-shrink: 0; margin-left: auto; font-size: 14px; }
.x-write-form button:disabled { opacity: .5; cursor: default; }
.x-reply-hint { min-width: 0; color: var(--accent); font-size: 13px; overflow-wrap: anywhere; }
.x-join-prompt { padding: 20px 16px; }
.x-join-prompt p { margin: 0 0 16px; color: var(--x-muted); font-size: 18px; line-height: 25px; }
.x-join-prompt > a + a { margin-left: 8px; }
.x-user-text { margin: 0 0 12px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 21px; }
.x-reply { cursor: default; }
.x-replies { scroll-margin-top: 64px; }
.x-replies .x-write-form { border-bottom: 1px solid var(--x-line); }
.x-delete-button { padding: 6px 0; border: 0; color: var(--x-danger); background: transparent; font-size: 12px; }
.x-delete-button:hover { text-decoration: underline; }
.x-more-popover > form > button { display: block; width: 100%; padding: 14px 20px; border: 0; background: transparent; text-align: left; font-size: 17px; font-weight: 700; }
.x-more-popover > form > button:hover { background: var(--x-hover); }
.x-profile-pagination { display: flex; justify-content: space-around; gap: 16px; color: var(--accent); }
.x-profile-pagination a { padding: 16px; }
.x-profile-pagination a:hover { text-decoration: underline; }
.x-member-logout { padding: 12px 16px; text-align: right; }
.x-delete-dialog { width: min(340px,calc(100% - 32px)); padding: 28px; border: 0; border-radius: 16px; background: var(--x-panel-bg, var(--x-bg)); color: var(--x-ink); }
.x-delete-dialog::backdrop { background: #0006; }
.x-delete-dialog h2 { margin: 0 0 12px; font-size: 22px; }
.x-delete-dialog p { color: var(--x-muted); line-height: 22px; }
.x-delete-dialog > button { width: 100%; margin-top: 10px; }
.x-delete-dialog > .x-blue-button { background: #d91b32; color: #fff; }
.x-flash-status { position: fixed; z-index: 100; bottom: 24px; left: 50%; transform: translateX(-50%); max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 4px; background: var(--accent); color: var(--x-accent-text); box-shadow: 0 2px 12px #0002; font-size: 14px; }
.x-community-status { position: fixed; z-index: 10001; left: 50%; bottom: 24px; transform: translateX(-50%); max-width: calc(100% - 32px); width: max-content; padding: 12px 18px; border-radius: 4px; background: var(--accent); color: var(--x-accent-text); font-size: 15px; }
@media(max-width:600px) {
    .x-compose-dialog { width: 100%; max-width: 100%; min-height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
    .x-write-bottom { flex-wrap: wrap; margin-left: 0; }
    .x-write-category { min-width: 100px; }
    .x-write-form { padding: 12px 16px; }
    .x-write-row textarea { font-size: 18px; line-height: 24px; }
    .x-write-bottom .x-blue-button { font-size: 13px; padding-inline: 12px; }
    .x-community-status, .x-flash-status { bottom: calc(76px + env(safe-area-inset-bottom)); }
}
@media(max-width:360px) { .x-auth-shell { width: calc(100% - 20px); } .x-write-counter { font-size: 11px; } }

.site-media-previews:not([hidden]) { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.site-media-preview-item { position: relative; min-width: 0; overflow: hidden; border-radius: 12px; background: var(--x-line); }
.site-media-previews .site-media-preview-item img { width: 100%; height: 160px; object-fit: cover; }
.site-media-previews .site-media-preview-item button { width: 36px; height: 36px; color: #fff; background: #000b; font-size: 26px; }
.site-media-upload:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.site-media-tools small { color: var(--x-muted); }
.site-post-gallery { position: relative; min-width: 0; max-width: 100%; margin: 8px 0 4px; }
.site-gallery-track { display: flex; gap: 6px; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 16px; }
.site-gallery-track::-webkit-scrollbar { display: none; }
.site-gallery-track:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.site-gallery-item { position: relative; display: block; flex: 0 0 86%; min-width: 0; height: clamp(220px,56vw,360px); overflow: hidden; scroll-snap-align: start; border: 1px solid var(--x-border); border-radius: 16px; background: var(--x-line); }
.site-post-gallery .site-gallery-item img { display: block; width: 100%; height: 100%; max-height: none; object-fit: cover; }
.site-post-gallery[data-count="1"] .site-gallery-item { flex-basis: 100%; height: auto; }
.site-post-gallery[data-count="1"] img { height: auto; max-height: 510px; object-fit: contain; }
.site-gallery-item:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.site-gallery-step { position: absolute; z-index: 1; top: calc(50% - 20px); display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid #ffffff40; border-radius: 50%; background: #0f1419c9; color: #fff; font-size: 30px; line-height: 1; cursor: pointer; }
.site-gallery-step[hidden] { display: none; }
.site-gallery-step:disabled { opacity: .35; cursor: default; }
.site-gallery-step:not(:disabled):hover { background: #0f1419ed; }
.site-gallery-step:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.site-gallery-step-back { left: 8px; }
.site-gallery-step-forward { right: 8px; }
.site-gallery-position { position: absolute; right: 12px; bottom: 10px; padding: 3px 9px; border-radius: 999px; background: #0f1419c9; color: #fff; font-size: 12px; pointer-events: none; }
.site-gallery-viewer { position: fixed; inset: 0; width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; padding: 56px 60px; border: 0; background: #000f; color: #fff; overflow: hidden; }
.site-gallery-viewer[open] { display: grid; place-items: center; }
.site-gallery-viewer::backdrop { background: #000e; }
.site-gallery-full { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100dvh - 112px); object-fit: contain; }
.site-gallery-viewer > button { position: absolute; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: #242424df; color: #fff; font-size: 36px; cursor: pointer; }
.site-gallery-viewer > button[hidden] { display: none; }
.site-gallery-viewer > button:hover { background: #444; }
.site-gallery-viewer > button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.site-gallery-close { top: 8px; left: 8px; }
.site-gallery-previous { top: calc(50% - 22px); left: 8px; }
.site-gallery-next { top: calc(50% - 22px); right: 8px; }
.site-gallery-counter { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); margin: 0; font-size: 15px; }
@media(max-width:600px) {
    .site-media-previews .site-media-preview-item img { height: 130px; }
    .site-gallery-viewer { padding: 56px 0; }
    .site-gallery-viewer > button { background: #0009; }
}
:root[data-theme='dark'] .site-gallery-viewer { background: var(--x-bg); color: var(--x-ink); }
:root[data-theme='dark'] :is(.site-gallery-viewer > button, .site-media-previews .site-media-preview-item button) { background: var(--x-primary-bg); color: var(--x-ink); }
:root[data-theme='dark'] .site-gallery-viewer > button:hover { background: var(--x-primary-hover); }
:root[data-theme='dark'] .site-gallery-viewer > button:focus-visible { outline-color: var(--accent); }
:root[data-theme='dark'] .x-delete-dialog > .x-blue-button { background: #5b2637; color: var(--x-danger); }
:root[data-theme='dark'] :is(.site-gallery-step, .site-gallery-position) { color: var(--x-ink); background: var(--x-primary-bg); border-color: var(--x-border); }
:root[data-theme='dark'] .site-gallery-step:not(:disabled):hover { background: var(--x-primary-hover); }