:root {
    color-scheme: dark;
    --tg-bg: #0b1422;
    --tg-bg-strong: #09101b;
    --tg-surface: rgba(20, 32, 53, 0.84);
    --tg-card: rgba(24, 39, 64, 0.92);
    --tg-border: rgba(103, 137, 186, 0.24);
    --tg-border-strong: rgba(123, 168, 226, 0.34);
    --tg-text: #e7f1ff;
    --tg-muted: #98aecf;
    --tg-accent: #33a8eb;
    --tg-accent-press: #1b94d7;
    --tg-ok: #49d091;
    --tg-warn: #f2be5b;
    --tg-danger: #ef6a73;
    --tg-shadow: 0 22px 56px rgba(2, 9, 18, 0.45);
    --tg-radius-lg: 20px;
    --tg-radius-md: 14px;
    --tg-radius-sm: 10px;
    --tg-page-width: 980px;
    --tg-bottom-nav-height: 72px;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    font-family: "Manrope", "Sora", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--tg-text);
    background:
        radial-gradient(1300px 520px at 85% -10%, rgba(64, 113, 173, 0.3), transparent 62%),
        radial-gradient(900px 500px at -20% 100%, rgba(35, 95, 166, 0.22), transparent 58%),
        linear-gradient(180deg, var(--tg-bg) 0%, var(--tg-bg-strong) 100%);
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
    -webkit-tap-highlight-color: transparent;
}

body.tg-theme-dark {
    color-scheme: dark;
}

a {
    color: inherit;
}

h1,
h2,
h3,
h4,
p {
    margin: 0;
}

.tg-shell {
    max-width: var(--tg-page-width);
    margin: 0 auto;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    padding: max(12px, env(safe-area-inset-top)) 14px 0;
}

.tg-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 12px 10px;
    border: 1px solid var(--tg-border);
    border-radius: 16px;
    background: rgba(16, 28, 46, 0.8);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 8px 24px rgba(2, 10, 19, 0.22);
}

.tg-topbar__title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.tg-topbar__title {
    font-family: "Sora", "Manrope", sans-serif;
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.tg-topbar__subtitle {
    font-size: 0.85rem;
    color: var(--tg-muted);
}

.tg-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    border: 1px solid rgba(82, 165, 225, 0.42);
    background: rgba(38, 125, 191, 0.2);
    color: #b7ddfb;
    padding: 5px 10px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.tg-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--tg-border);
    background: rgba(17, 30, 49, 0.8);
    color: var(--tg-text);
    text-decoration: none;
    cursor: pointer;
    transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
}

.tg-icon-btn:hover {
    transform: translateY(-1px);
    border-color: var(--tg-border-strong);
    background: rgba(30, 48, 74, 0.9);
}

.tg-content {
    flex: 1;
    display: grid;
    gap: 12px;
    padding: 12px 0 calc(var(--tg-bottom-nav-height) + max(14px, env(safe-area-inset-bottom)) + 30px);
}

.tg-card {
    border: 1px solid var(--tg-border);
    border-radius: var(--tg-radius-lg);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)), var(--tg-card);
    box-shadow: var(--tg-shadow);
    padding: 16px;
}

.tg-card--compact {
    padding: 14px;
}

.tg-card__title {
    font-family: "Sora", "Manrope", sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: -0.02em;
}

.tg-card__desc {
    color: var(--tg-muted);
    font-size: 0.92rem;
    line-height: 1.5;
    margin-bottom: 8px;
}

.tg-list {
    display: grid;
    gap: 8px;
}

.tg-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.tg-key {
    color: var(--tg-muted);
    font-size: 0.86rem;
}

.tg-value {
    font-size: 0.95rem;
    font-weight: 700;
    text-align: right;
}

.tg-divider {
    height: 1px;
    border: 0;
    margin: 12px 0;
    background: linear-gradient(90deg, transparent, rgba(96, 139, 195, 0.42), transparent);
}

.tg-label {
    display: block;
    margin-bottom: 8px;
    color: var(--tg-muted);
    font-size: 0.84rem;
}

.tg-input-row {
    display: flex;
    gap: 10px;
}

.tg-input,
.form-input,
#edit-prompt-input,
#user-caption-input {
    width: 100%;
    border: 1px solid rgba(92, 130, 181, 0.46);
    border-radius: var(--tg-radius-sm);
    background: rgba(11, 20, 34, 0.88);
    color: var(--tg-text);
    padding: 11px 12px;
    font-family: inherit;
    font-size: 0.95rem;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.tg-input:focus,
.form-input:focus,
#edit-prompt-input:focus,
#user-caption-input:focus {
    outline: none;
    border-color: rgba(72, 163, 228, 0.84);
    box-shadow: 0 0 0 3px rgba(58, 153, 222, 0.16);
}

.tg-input.tg-input-code {
    text-align: center;
    letter-spacing: 0.26em;
    font-weight: 700;
}

.tg-button,
.btn,
.action-btn,
.action-btn.full-width {
    border: 1px solid transparent;
    border-radius: 11px;
    padding: 11px 14px;
    background: rgba(38, 61, 95, 0.75);
    color: var(--tg-text);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    text-decoration: none;
    transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}

.tg-button:hover,
.btn:hover,
.action-btn:hover {
    transform: translateY(-1px);
    border-color: var(--tg-border-strong);
}

.tg-button:active,
.btn:active,
.action-btn:active {
    transform: translateY(0);
}

.tg-button:disabled,
.btn:disabled,
.action-btn:disabled {
    opacity: 0.62;
    cursor: not-allowed;
    transform: none;
}

.tg-button-primary,
.btn-primary,
.action-btn--primary,
.action-btn.full-width,
.fab-btn {
    background: linear-gradient(180deg, #34b2f4 0%, #2198db 100%);
    color: #eff7ff;
    border-color: rgba(114, 193, 240, 0.5);
}

.tg-button-primary:hover,
.btn-primary:hover,
.action-btn--primary:hover,
.action-btn.full-width:hover,
.fab-btn:hover {
    background: linear-gradient(180deg, #3bb6f5 0%, #1f90cd 100%);
}

.tg-button-muted,
.btn-secondary {
    background: rgba(29, 47, 74, 0.78);
    border-color: rgba(87, 124, 177, 0.35);
}

.action-btn-danger {
    background: rgba(192, 66, 75, 0.86);
    border-color: rgba(231, 116, 126, 0.42);
}

.action-btn-accent {
    background: rgba(50, 168, 188, 0.84);
    border-color: rgba(126, 224, 238, 0.38);
}

.tg-status,
.state,
#page-auth-status {
    min-height: 1.2em;
    margin-top: 10px;
    font-size: 0.87rem;
    color: var(--tg-muted);
}

.tg-status.ok,
.state.ok,
#page-auth-status.is-success {
    color: var(--tg-ok);
}

.tg-status.warn,
.state.warn {
    color: var(--tg-warn);
}

.tg-status.err,
.state.err,
#page-auth-status.is-error {
    color: var(--tg-danger);
}

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

.tg-tile-link {
    border: 1px solid rgba(86, 122, 175, 0.36);
    border-radius: 12px;
    background: rgba(23, 37, 59, 0.82);
    color: #d2e5ff;
    text-decoration: none;
    text-align: center;
    padding: 11px;
    font-weight: 700;
    font-size: 0.86rem;
    transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
}

.tg-tile-link:hover {
    border-color: rgba(117, 171, 235, 0.6);
    background: rgba(32, 51, 79, 0.9);
    transform: translateY(-1px);
}

.tg-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1100;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 8px 14px max(8px, env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(9, 16, 29, 0.2), rgba(9, 16, 29, 0.88));
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(92, 126, 176, 0.2);
}

.tg-bottom-nav__item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    border-radius: 12px;
    border: 1px solid rgba(88, 123, 173, 0.25);
    background: rgba(16, 27, 44, 0.9);
    color: #b8cae4;
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 700;
}

.tg-bottom-nav__item.active {
    border-color: rgba(120, 187, 239, 0.62);
    background: rgba(27, 47, 78, 0.96);
    color: #e6f4ff;
}

.tg-bottom-nav__item i {
    font-size: 0.95rem;
}

.tg-empty {
    width: 100%;
    text-align: center;
    color: var(--tg-muted);
    border: 1px dashed rgba(95, 131, 183, 0.44);
    border-radius: 14px;
    padding: 24px;
    background: rgba(17, 29, 48, 0.72);
}

.tg-empty i {
    display: block;
    font-size: 1.6rem;
    color: #8ec8f2;
    margin-bottom: 8px;
}

.gallery-grid-full {
    grid-column: 1 / -1;
}

.is-hidden {
    display: none;
}

/* Miniapp */
.mini-hero {
    padding-top: 18px;
    padding-bottom: 18px;
}

.mini-hero .tg-card__title {
    font-size: 1.16rem;
}

/* Gallery */
.gallery-shell .tg-content {
    padding-top: 14px;
}

.gallery-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.stat-card {
    border: 1px solid var(--tg-border);
    border-radius: 13px;
    background: rgba(14, 24, 39, 0.88);
    padding: 12px;
}

.stat-card .label {
    color: var(--tg-muted);
    font-size: 0.78rem;
    margin-bottom: 6px;
}

.stat-card .value {
    font-family: "Sora", "Manrope", sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    color: #d9ecff;
}

.controls {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.controls .btn {
    flex: 1 1 170px;
}

#fav-filter-btn.is-active,
#select-mode-btn.is-active {
    background: rgba(49, 110, 172, 0.88);
    border-color: rgba(126, 181, 236, 0.5);
}

#download-selected-btn,
#delete-selected-btn {
    display: none;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.gallery-item {
    position: relative;
    border: 1px solid var(--tg-border);
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    background: rgba(16, 27, 45, 0.95);
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.gallery-item:hover {
    transform: translateY(-2px);
    border-color: rgba(134, 187, 240, 0.5);
    box-shadow: 0 10px 28px rgba(3, 11, 21, 0.45);
}

.gallery-item img,
.gallery-item video {
    width: 100%;
    aspect-ratio: 1;
    display: block;
    object-fit: cover;
    background: rgba(8, 16, 28, 0.9);
}

.gallery-item .info {
    padding: 9px 10px 10px;
    display: grid;
    gap: 4px;
    font-size: 0.8rem;
    color: #c6d8f1;
}

.gallery-item .info strong {
    font-weight: 700;
}

.gallery-meta {
    display: block;
    color: var(--tg-muted);
    font-size: 0.76rem;
}

.fav-btn,
.select-indicator {
    position: absolute;
    top: 8px;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fav-btn {
    right: 8px;
    border: 1px solid rgba(130, 173, 228, 0.58);
    background: rgba(15, 28, 46, 0.8);
    color: #dbe8f8;
    cursor: pointer;
}

.fav-btn.active {
    color: #ef6f7a;
    background: rgba(47, 20, 30, 0.9);
    border-color: rgba(245, 131, 141, 0.52);
}

.select-indicator {
    left: 8px;
    border: 1px solid rgba(118, 163, 221, 0.6);
    background: rgba(13, 24, 39, 0.82);
    color: transparent;
    display: none;
}

.gallery-grid.selection-mode .select-indicator {
    display: flex;
    color: #e6f2ff;
}

.gallery-item.selected {
    border-color: rgba(99, 173, 235, 0.92);
    box-shadow: 0 0 0 2px rgba(99, 173, 235, 0.34);
}

.gallery-item.selected .select-indicator {
    background: rgba(41, 133, 204, 0.92);
    border-color: rgba(139, 200, 246, 0.8);
}

.play-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(239, 247, 255, 0.94);
    font-size: 1.5rem;
    pointer-events: none;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.7);
}

.loading {
    text-align: center;
    padding: 26px 12px;
    color: var(--tg-muted);
}

.loading i {
    display: block;
    font-size: 1.25rem;
    color: #8fcaf6;
    margin-bottom: 8px;
}

/* Shared modal */
.modal,
.lightbox-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 22px;
    background: rgba(5, 11, 19, 0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.modal.active,
.lightbox-modal.active {
    display: flex;
}

.modal-content,
.lightbox-content {
    width: min(860px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 18px;
    border: 1px solid rgba(114, 151, 203, 0.35);
    background: rgba(14, 25, 40, 0.96);
    padding: 16px;
    box-shadow: var(--tg-shadow);
}

.modal-content img,
.modal-content video,
.lightbox-content img {
    width: 100%;
    border-radius: 12px;
    background: rgba(8, 14, 25, 0.95);
    object-fit: contain;
    max-height: 72vh;
}

.modal-caption {
    margin-top: 10px;
    color: #d3e2f6;
    font-size: 0.86rem;
    line-height: 1.5;
}

.modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.modal-close,
.modal-nav,
.lightbox-close,
.lightbox-nav,
.close-modal {
    border: 1px solid rgba(116, 153, 203, 0.45);
    background: rgba(17, 29, 46, 0.9);
    color: #ebf6ff;
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease;
}

.modal-close:hover,
.modal-nav:hover,
.lightbox-close:hover,
.lightbox-nav:hover,
.close-modal:hover {
    border-color: rgba(148, 196, 247, 0.65);
    background: rgba(27, 45, 71, 0.96);
}

.modal-close,
.lightbox-close,
.close-modal {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
}

.modal-nav,
.lightbox-nav {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
}

.modal-nav.prev,
.lightbox-nav.prev {
    left: 8px;
}

.modal-nav.next,
.lightbox-nav.next {
    right: 8px;
}

#edit-modal .modal-content {
    width: min(520px, 100%);
}

#edit-prompt-input {
    min-height: 130px;
    resize: vertical;
}

/* Social */
.social-shell .tg-content {
    gap: 10px;
    padding-top: 10px;
}

.social-view-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.view-tab {
    border: 1px solid rgba(87, 124, 176, 0.35);
    border-radius: 11px;
    background: rgba(18, 31, 50, 0.86);
    color: #bad0eb;
    min-height: 40px;
    font-size: 1rem;
    cursor: pointer;
}

.view-tab.active {
    background: rgba(35, 72, 121, 0.94);
    border-color: rgba(135, 184, 241, 0.62);
    color: #ebf6ff;
}

.social-content-area {
    min-height: 0;
}

.social-feed {
    display: grid;
    gap: 10px;
    padding-bottom: 6px;
}

.social-feed.hidden,
.social-grid.hidden {
    display: none;
}

.social-card {
    border: 1px solid rgba(88, 123, 173, 0.3);
    border-radius: 14px;
    background: rgba(15, 27, 45, 0.92);
    overflow: hidden;
}

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

.social-avatar {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    object-fit: cover;
    border: 1px solid rgba(114, 151, 200, 0.42);
    background: rgba(22, 36, 59, 0.82);
}

.social-avatar.user-avatar {
    padding: 6px;
}

.social-user-info {
    flex: 1;
}

.social-username {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 0.9rem;
}

.verified-badge {
    color: #73c5ff;
}

.social-location,
.social-time {
    color: var(--tg-muted);
    font-size: 0.77rem;
}

.social-carousel {
    width: 100%;
    aspect-ratio: 1;
    background: rgba(8, 15, 25, 0.95);
}

.social-slides {
    display: flex;
    overflow-x: auto;
    height: 100%;
    width: 100%;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
}

.social-slides::-webkit-scrollbar {
    display: none;
}

.social-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    scroll-snap-align: center;
    flex-shrink: 0;
}

.social-dots {
    position: relative;
    margin-top: -24px;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    gap: 6px;
}

.social-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(228, 239, 255, 0.4);
}

.social-dot.active {
    background: rgba(236, 245, 255, 0.98);
}

.social-actions {
    padding: 8px 10px 0;
}

.social-action-btn {
    border: 0;
    background: transparent;
    color: #d8e9fc;
    font-size: 1.2rem;
    cursor: pointer;
}

.social-action-btn.liked {
    color: #f6757f;
}

.like-count {
    display: block;
    padding: 0 10px;
    margin-top: 6px;
    font-size: 0.82rem;
    color: #c5d9f4;
    font-weight: 700;
}

.social-caption {
    padding: 8px 10px 12px;
    font-size: 0.87rem;
    line-height: 1.45;
    color: #d8e8fb;
}

.social-caption .username {
    font-weight: 700;
    margin-right: 4px;
}

.social-hashtag {
    color: #84cbfb;
}

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

.social-grid-item {
    aspect-ratio: 1;
    position: relative;
    background: rgba(10, 17, 30, 0.92);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
}

.social-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carousel-icon {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 0.85rem;
    color: rgba(242, 248, 255, 0.92);
}

.fab-btn {
    position: fixed;
    right: 18px;
    bottom: calc(var(--tg-bottom-nav-height) + max(12px, env(safe-area-inset-bottom)));
    width: 56px;
    height: 56px;
    border-radius: 999px;
    z-index: 1200;
}

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

.modal-header h2 {
    font-family: "Sora", "Manrope", sans-serif;
    font-size: 1.05rem;
}

.modal-body {
    display: grid;
    gap: 10px;
}

.post-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.post-tab {
    border: 1px solid rgba(87, 124, 176, 0.35);
    border-radius: 10px;
    background: rgba(19, 33, 53, 0.84);
    color: #c1d5ef;
    min-height: 38px;
    cursor: pointer;
    font-weight: 700;
}

.post-tab.active {
    background: rgba(33, 92, 150, 0.96);
    color: #eef7ff;
    border-color: rgba(131, 190, 245, 0.68);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.form-group {
    margin-bottom: 10px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    color: var(--tg-muted);
    font-size: 0.8rem;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.sub-input {
    margin-top: 6px;
}

.upload-area {
    border: 1px dashed rgba(108, 156, 216, 0.58);
    border-radius: 12px;
    padding: 18px;
    text-align: center;
    color: var(--tg-muted);
    cursor: pointer;
}

.upload-area i {
    font-size: 1.4rem;
    color: #9fd2f8;
    margin-bottom: 8px;
}

.preview-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.preview-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(95, 133, 186, 0.4);
}

.preview-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.preview-item .remove-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: 1px solid rgba(236, 129, 136, 0.7);
    background: rgba(173, 55, 64, 0.88);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.social-modal-note {
    color: var(--tg-muted);
    font-size: 0.84rem;
    margin-bottom: 8px;
    line-height: 1.45;
}

.loading-spinner {
    text-align: center;
    color: var(--tg-muted);
    padding: 28px;
}

.page-auth-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(4, 9, 16, 0.82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.page-auth-overlay.active {
    display: flex;
}

.page-auth-card {
    width: min(420px, 100%);
    border: 1px solid rgba(118, 157, 211, 0.36);
    border-radius: 16px;
    background: rgba(13, 24, 40, 0.97);
    box-shadow: var(--tg-shadow);
    padding: 16px;
}

.page-auth-title {
    font-family: "Sora", "Manrope", sans-serif;
    font-size: 1.15rem;
    margin-bottom: 8px;
}

.page-auth-desc {
    color: var(--tg-muted);
    font-size: 0.9rem;
    line-height: 1.45;
    margin-bottom: 14px;
}

.page-auth-form {
    display: grid;
    gap: 8px;
}

.page-auth-actions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.page-auth-actions .tg-button,
.page-auth-actions .tg-button-muted {
    flex: 1;
}

@media (max-width: 900px) {
    .gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gallery-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .tg-shell {
        padding-left: 10px;
        padding-right: 10px;
    }

    .tg-topbar {
        padding: 10px;
    }

    .tg-input-row {
        flex-direction: column;
    }

    .tg-grid-links {
        grid-template-columns: 1fr;
    }

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

    .controls .btn {
        flex: 1 1 100%;
    }

    .gallery-grid {
        gap: 8px;
    }

    .social-grid {
        gap: 3px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .tg-card,
    .social-card,
    .gallery-item {
        animation: tgFadeIn 260ms ease both;
    }
}

@keyframes tgFadeIn {
    from {
        opacity: 0;
        transform: translateY(3px);
    }

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