/* Oxus Rapers — shared site stylesheet */

:root {
    --bg: #0a0a0c;
    --panel: #151518;
    --panel-2: #1b1b1f;
    --border: #2a2a2f;
    --red: #e63946;
    --red-dark: #d62839;
    --text: #e8e8ea;
    --muted: #8a8a92;
    --green: #3ddc84;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    margin: 0;
    line-height: 1.5;
}

a { color: var(--red); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap {
    max-width: 560px;
    margin: 0 auto;
    padding: 40px 16px;
}

.wrap.wide { max-width: 880px; }

h1 { font-size: 22px; letter-spacing: -0.02em; margin-bottom: 4px; }
h2 { font-size: 15px; margin-top: 0; }
.sub { color: var(--muted); font-size: 14px; margin-bottom: 28px; }
.sub-tight { margin-bottom: 0; }
.home-explore-sub { margin-bottom: 10px; }
.brand-accent-dot { color: var(--red); }
.tracks-upload-hint { margin: -8px 0 4px; }

.panel {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 24px;
    margin-bottom: 20px;
}

label { display: block; font-size: 13px; color: var(--muted); margin: 14px 0 6px; }
.label-no-margin { margin: 0; }

input[type=text], input[type=email], input[type=password], textarea {
    width: 100%;
    padding: 10px 12px;
    background: #0f0f12;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 14px;
    font-family: inherit;
}
input:focus, textarea:focus { outline: none; border-color: var(--red); }
input[type=file] { display: block; width: 100%; padding: 6px 0; color: var(--muted); font-size: 13px; }

.checkbox-row { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: 13px; color: var(--muted); }
.checkbox-row input { width: auto; }

button, .btn {
    display: inline-block;
    width: 100%;
    margin-top: 20px;
    padding: 12px;
    background: var(--red);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    box-shadow: none;
}
button:hover, .btn:hover { background: var(--red-dark); text-decoration: none; }

.btn-secondary { background: var(--panel-2); border: 1px solid var(--border); }
.btn-secondary:hover { background: #222226; }
.btn-small {
    background: var(--red);
    color: #fff;
    padding: 8px 14px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
}
.btn-small:hover { background: var(--red-dark); text-decoration: none; }

.error {
    background: rgba(230,57,70,0.1);
    border: 1px solid var(--red);
    color: #ff9ba3;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 13px;
    margin-bottom: 14px;
}
.error-inline { margin: 0; }

.success-msg {
    background: rgba(61,220,132,0.08);
    border: 1px solid var(--green);
    color: var(--green);
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 13px;
    margin-bottom: 14px;
}

.info-msg {
    background: rgba(138,138,146,0.08);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 13px;
    margin-bottom: 14px;
}
.info-msg-inline { margin: 0; }

.select-field { width: 100%; padding: 10px 12px; background: #0f0f12; border: 1px solid var(--border); border-radius: 6px; color: var(--text); }

.success { color: var(--green); }
.success svg { width: 13px; height: 13px; vertical-align: -1px; margin-right: 2px; }
.muted { color: var(--muted); }
code { background: #0f0f12; padding: 2px 6px; border-radius: 4px; font-size: 13px; word-break: break-all; }

.warn-box {
    background: rgba(230,57,70,0.08);
    border: 1px solid var(--red);
    border-radius: 8px;
    padding: 16px;
    font-size: 13px;
    margin-top: 20px;
}

.form-footer { text-align: center; font-size: 13px; color: var(--muted); margin-top: 18px; }

/* --- Nav --- */
nav.topbar {
    border-bottom: 1px solid var(--border);
    background: var(--panel);
    position: sticky;
    top: 0;
    z-index: 60;
    transition: background-color 0.25s ease, backdrop-filter 0.25s ease, box-shadow 0.25s ease;
}
/* Added by the small scroll-listener in includes/header.php once the
   page has scrolled past a small threshold — shrinks the bar slightly
   and gives it a soft glass/blur look instead of just sitting flat,
   while never leaving the top of the viewport. */
nav.topbar.fv3-scrolled {
    background: rgba(21,21,24,0.82);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    box-shadow: 0 6px 24px rgba(0,0,0,0.35);
}
nav.topbar.fv3-scrolled .inner { padding-top: 10px; padding-bottom: 10px; }
nav.topbar .inner {
    max-width: 880px;
    margin: 0 auto;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: padding 0.25s ease;
}
nav.topbar .logo {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text);
}
nav.topbar .logo span { color: var(--red); }
nav.topbar .links { display: flex; align-items: center; gap: 16px; font-size: 14px; }
nav.topbar .links a { color: var(--text); }
nav.topbar .links a:hover { color: var(--red); text-decoration: none; }
nav.topbar .links .btn-small {
    background: var(--red);
    color: #fff;
    padding: 8px 14px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 13px;
}
nav.topbar .links .btn-small:hover { background: var(--red-dark); }
.lang-switch { display: flex; gap: 4px; margin-left: 6px; padding-left: 12px; border-left: 1px solid var(--border); }
.lang-switch a { font-size: 12px; font-weight: 700; color: var(--muted); padding: 2px 4px; }
.lang-switch a.active { color: var(--red); }
.lang-switch a:hover { color: var(--text); text-decoration: none; }

.banner {
    background: rgba(230,57,70,0.08);
    border-bottom: 1px solid var(--border);
    color: var(--text);
    font-size: 13px;
    text-align: center;
    padding: 10px 16px;
}
.banner a { font-weight: 600; }

.center-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(var(--vh, 1vh) * 100 - var(--topbar-h, 60px) - var(--bottomnav-h, 0px));
    padding: 20px;
}

/* --- Profile V3 (2026 redesign) --- */
@keyframes oxusFadeSlideIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.profile-banner-wrap {
    position: relative;
    height: 320px;
    overflow: hidden;
    border-bottom: 1px solid var(--border);
    background: var(--panel-2);
    animation: oxusFadeSlideIn 220ms ease both;
}
.profile-banner {
    position: absolute;
    inset: 0;
    background: var(--panel-2) center/cover no-repeat;
    transform: scale(1.04);
    filter: saturate(1.05);
    transition: transform 600ms ease;
}
.profile-banner-wrap:hover .profile-banner { transform: scale(1.08); }
.profile-banner-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Alt kısımda içerik okunabilirliği için gradient + hafif blur/glow katmanı */
.profile-banner-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10,10,12,0) 0%, rgba(10,10,12,0.15) 45%, var(--bg) 100%);
}
.profile-banner-glow {
    position: absolute;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(230,57,70,0.35), transparent 70%);
    filter: blur(60px);
    top: -160px;
    right: -120px;
    pointer-events: none;
    opacity: 0.7;
}
@media (max-width: 640px) { .profile-banner-wrap { height: 200px; } .profile-banner-glow { width: 280px; height: 280px; } }

.profile-header {
    position: relative;
    max-width: 880px;
    margin: -64px auto 0;
    padding: 0 16px;
    display: flex;
    align-items: flex-end;
    gap: 20px;
    flex-wrap: wrap;
    animation: oxusFadeSlideIn 220ms ease 40ms both;
}
.profile-avatar-wrap {
    position: relative;
    width: 132px;
    height: 132px;
    flex-shrink: 0;
    border-radius: 50%;
    transition: transform 200ms ease;
}
.profile-avatar-wrap:hover { transform: translateY(-2px) scale(1.03); }
.profile-avatar-wrap.is-premium::before {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #FFD700, #e63946, #FFD700);
    animation: oxusRingSpin 4s linear infinite;
    z-index: 0;
}
@keyframes oxusRingSpin { to { transform: rotate(360deg); } }
.profile-avatar {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 4px solid var(--bg);
    background: var(--panel-2) center/cover no-repeat;
    box-shadow: 0 6px 24px rgba(0,0,0,0.4);
    transition: box-shadow 200ms ease;
}
.profile-avatar-wrap:hover .profile-avatar { box-shadow: 0 8px 32px rgba(230,57,70,0.35); }
.profile-name-block { padding-bottom: 8px; flex: 1; min-width: 200px; }
.profile-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.profile-display-name { font-size: 22px; font-weight: 700; }
.profile-username { color: var(--muted); font-size: 14px; }
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(230,57,70,0.15);
    color: var(--red);
    border: 1px solid rgba(230,57,70,0.3);
    transition: transform 150ms ease;
}
.badge:hover { transform: translateY(-1px); }
.badge.verified { background: rgba(61,220,132,0.12); color: var(--green); border-color: rgba(61,220,132,0.3); }
.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.user-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid;
    margin-left: 6px;
    vertical-align: middle;
    cursor: help;
    white-space: nowrap;
}
.profile-actions { padding-bottom: 8px; }
.profile-actions .btn, .profile-actions button { width: auto; margin-top: 0; padding: 10px 20px; }

/* --- Profile page cleanup (removed inline styles, NEXT_SESSION.md #11) --- */
/* NOT: .profile-actions .btn/button zaten width:auto veriyor, button/.btn zaten
   display:inline-block; bu yüzden eski "width:auto"/"display:inline-block"
   inline stilleri zaten gereksizdi ve class eklemeden direkt kaldırıldı. */
.profile-premium-cta { background: #FFD700; color: #1a1a0a; }
.profile-action-form { display: inline-block; }
.profile-inline-form { display: inline; }
.profile-block-link { all: unset; cursor: pointer; color: var(--muted); }
.profile-block-link:hover { color: var(--red); }
.profile-bio-text { white-space: pre-wrap; }
.profile-meta-line { font-size: 12px; }
.profile-meta-line-sm { font-size: 13px; }
.profile-thread-category-badge { margin-right: 6px; }

/* --- Admin pages cleanup (removed inline styles, this session) --- */
.admin-panel-heading { margin-top: 0; }
.admin-flex-1 { flex: 1; }
.admin-note-13 { font-size: 13px; }
.admin-note-12 { font-size: 12px; }
.admin-notif-detail { margin-top: 4px; }
.admin-notif-detail-sm { margin-top: 2px; }
.admin-action-row { display: flex; gap: 8px; margin-top: 8px; }
.admin-action-row button, .admin-action-row .btn { width: auto; }
.admin-form-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.admin-form-row button, .admin-form-row .btn { width: auto; }
.admin-form-mt10 { margin-top: 10px; }
.admin-form-mt10 button, .admin-form-mt10 .btn { width: auto; }
.admin-tag-color-input { height: 40px; width: 60px; padding: 2px; cursor: pointer; }
.admin-inline-select { padding: 10px 12px; background: #0f0f12; border: 1px solid var(--border); border-radius: 6px; color: var(--text); }

.profile-body { max-width: 880px; margin: 24px auto; padding: 0 16px; display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
@media (max-width: 640px) { .profile-body { grid-template-columns: 1fr; } }

/* Legacy (kept for other pages that still render a plain .stat-row) */
.stat-row { display: flex; gap: 20px; margin-bottom: 16px; }
.stat { text-align: center; color: var(--text); text-decoration: none; }
.stat b { display: block; font-size: 18px; }
.stat span { font-size: 12px; color: var(--muted); }
a.stat:hover { text-decoration: none; }
a.stat:hover span { color: var(--text); }

/* --- Profile V3: professional stats dashboard --- */
.stats-dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}
.stats-dashboard .stat-card {
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 12px;
    text-align: center;
    text-decoration: none;
    color: var(--text);
    transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
    animation: oxusFadeSlideIn 220ms ease both;
}
.stats-dashboard .stat-card:nth-child(1) { animation-delay: 20ms; }
.stats-dashboard .stat-card:nth-child(2) { animation-delay: 40ms; }
.stats-dashboard .stat-card:nth-child(3) { animation-delay: 60ms; }
.stats-dashboard .stat-card:nth-child(4) { animation-delay: 80ms; }
.stats-dashboard .stat-card:nth-child(5) { animation-delay: 100ms; }
.stats-dashboard .stat-card:nth-child(6) { animation-delay: 120ms; }
.stats-dashboard .stat-card:hover {
    transform: translateY(-2px);
    border-color: rgba(230,57,70,0.4);
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
    text-decoration: none;
}
.stats-dashboard .stat-card b { display: block; font-size: 19px; line-height: 1.2; }
.stats-dashboard .stat-card span { display: block; font-size: 11px; color: var(--muted); margin-top: 3px; }

/* --- Profile V3: artist panel (verified sanatçı / parça sahibi kullanıcılar) --- */
.artist-panel { margin-top: 16px; }
.artist-panel h2 { display: flex; align-items: center; gap: 8px; }
.artist-highlight-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    margin-top: 10px;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.artist-highlight-cover {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    background: var(--panel) center/cover no-repeat;
    flex-shrink: 0;
}
.artist-highlight-info { min-width: 0; }
.artist-highlight-title { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.artist-highlight-sub { font-size: 12px; color: var(--muted); }
.artist-genre-bars { margin-top: 12px; }

.social-links { display: flex; flex-wrap: wrap; gap: 8px; }
.social-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--panel-2);
    border: 1px solid var(--border);
    font-size: 13px;
    color: var(--text);
    text-decoration: none;
    transition: transform 150ms ease, border-color 150ms ease;
}
.social-chip:hover { transform: translateY(-1px); border-color: rgba(230,57,70,0.4); text-decoration: none; }
.social-chip-ico { font-size: 14px; line-height: 1; }

.verified-tick { display: inline-flex; align-items: center; vertical-align: middle; margin-left: 3px; color: var(--green); }
.verified-tick svg { display: block; }

.user-list-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.user-list-row:last-child { border-bottom: none; }
.user-list-row .card-avatar { width: 44px; height: 44px; }
.user-list-info { flex: 1; min-width: 0; }
.user-list-name { font-weight: 600; font-size: 14px; display: flex; align-items: center; }
.user-list-username { font-size: 13px; color: var(--muted); }
.user-list-row form { margin: 0; }
.user-list-row button, .user-list-row .btn { width: auto; padding: 6px 14px; font-size: 13px; }

.social-links { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.social-links a { color: var(--text); }
.social-links a:hover { color: var(--red); }

.avatar-preview {
    width: 72px; height: 72px; border-radius: 50%;
    background: var(--panel-2) center/cover no-repeat;
    border: 1px solid var(--border);
    margin-bottom: 10px;
}
.banner-preview {
    width: 100%; height: 100px; border-radius: 8px;
    background: var(--panel-2) center/cover no-repeat;
    border: 1px solid var(--border);
    margin-bottom: 10px;
}
input[type=file] {
    width: 100%;
    padding: 8px;
    background: #0f0f12;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--muted);
    font-size: 13px;
}
input[type=color] {
    width: 60px; height: 36px; padding: 2px; background: #0f0f12;
    border: 1px solid var(--border); border-radius: 6px; cursor: pointer;
}
textarea { min-height: 90px; resize: vertical; }
.new-thread-textarea { min-height: 180px; }
.checkbox-field { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.checkbox-field-first { margin-top: 18px; }
.checkbox-input { width: auto; }

/* --- Feed & Forum --- */
.page-head { max-width: 680px; margin: 0 auto; padding: 32px 16px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.page-head h1 { margin-bottom: 2px; }

.composer { max-width: 680px; margin: 20px auto 0; padding: 0 16px; }
.composer textarea { min-height: 70px; }

.feed { max-width: 680px; margin: 0 auto; padding: 20px 16px 60px; }

.card { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 18px; margin-bottom: 14px; }
.card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.card-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--panel-2) center/cover no-repeat; flex-shrink: 0; }
.follow-request-actions { display: flex; gap: 8px; }
.card-author { font-weight: 600; font-size: 14px; }
.card-author a { color: var(--text); }
.card-meta { font-size: 12px; color: var(--muted); }
.card-content { font-size: 14px; white-space: pre-wrap; word-wrap: break-word; margin-bottom: 10px; }
.track-detail-title { font-size: 18px; margin-bottom: 6px; }
.track-reviews-heading { margin-top: 24px; }
.card-image { max-width: 100%; border-radius: 8px; margin-bottom: 10px; display: block; }
.card-actions { display: flex; gap: 16px; font-size: 13px; }
.card-actions button, .card-actions a {
    background: none; border: none; color: var(--muted); cursor: pointer;
    font-size: 13px; padding: 0; width: auto; margin: 0; font-family: inherit;
}
.card-actions button:hover, .card-actions a:hover { color: var(--red); text-decoration: none; }
.card-actions .liked { color: var(--red); font-weight: 600; }
.card-actions form { display: inline; }

.embed-wrap { margin: 6px 0 10px; border-radius: 10px; overflow: hidden; background: #000; }
.embed-wrap iframe { display: block; width: 100%; border: 0; }
.embed-spotify iframe { height: 152px; }
.embed-soundcloud iframe { height: 166px; }
.embed-youtube { position: relative; width: 100%; padding-top: 56.25%; height: 0; background: #000; }
.embed-youtube iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.comment { border-top: 1px solid var(--border); padding: 12px 0 0; margin-top: 12px; }
.comment:first-child { border-top: none; margin-top: 0; padding-top: 0; }
.comment-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.comment-author { font-weight: 600; font-size: 13px; }
.comment-meta { font-size: 11px; color: var(--muted); }
.comment-content { font-size: 13px; white-space: pre-wrap; word-wrap: break-word; }
.comment-footer { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.no-comments-note { font-size: 13px; }
.login-to-comment-note { font-size: 13px; margin-top: 16px; }
.comment-reply-btn { all: unset; cursor: pointer; color: var(--muted); font-size: 11px; font-weight: 600; }
.comment-reply-btn:hover { color: var(--text); }
.comment-delete-btn { all: unset; cursor: pointer; color: var(--muted); font-size: 11px; }
.comment-delete-btn:hover { color: var(--red); }
.comment-like-form { display: inline-flex; }
.comment-like-btn { all: unset; cursor: pointer; color: var(--muted); font-size: 12px; }
.comment-like-btn.liked { color: var(--red); font-weight: 600; }
.comment-owner-like { font-size: 11px; margin-left: 2px; }
.comment-reply-form { margin-top: 8px; margin-left: 32px; }
.comment-replies { margin-left: 32px; margin-top: 8px; }
.comment-replies .comment { border-top: 1px solid var(--border); padding-top: 10px; margin-top: 10px; }
.comment-replies .comment:first-child { border-top: 1px solid var(--border); padding-top: 10px; margin-top: 10px; }
.comment-pinned { background: rgba(255, 196, 0, 0.06); border-radius: 8px; padding: 10px 10px 0; margin-left: -10px; margin-right: -10px; width: calc(100% + 20px); }
.comment-pinned-badge { font-size: 11px; color: #b8860b; font-weight: 600; margin-left: 2px; }
.comment-pin-form { display: inline-flex; }
.comment-pin-btn { all: unset; cursor: pointer; color: var(--muted); font-size: 11px; }
.comment-pin-btn:hover { color: #b8860b; }
.comment-pin-btn.pinned { color: #b8860b; font-weight: 600; }

.explore-search { max-width: 680px; margin: 0 auto 16px; padding: 0 16px; }
.explore-search-input { width: 100%; box-sizing: border-box; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel-bg, #fff); font-size: 14px; }
.explore-search-tabs { display: flex; gap: 8px; margin-top: 10px; }
.hashtag-tabs { margin-bottom: 16px; }
.explore-search-tab { all: unset; cursor: pointer; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border); font-size: 12px; color: var(--muted); }
.explore-search-tab.active { background: var(--text); color: var(--panel-bg, #fff); border-color: var(--text); }
.explore-search-results { max-width: 680px; margin: 0 auto 16px; padding: 0 16px; }
.explore-user-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); text-decoration: none; color: inherit; }
.explore-user-row img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--border); }
.explore-user-row .eu-name { font-weight: 600; font-size: 14px; }
.explore-user-row .eu-username { font-size: 12px; color: var(--muted); }
.explore-post-row { display: block; padding: 10px 0; border-bottom: 1px solid var(--border); text-decoration: none; color: inherit; }
.explore-post-row .ep-author { font-weight: 600; font-size: 13px; }
.explore-post-row .ep-content { font-size: 13px; color: var(--muted); margin-top: 2px; white-space: pre-wrap; word-wrap: break-word; }
.explore-search-empty { color: var(--muted); font-size: 13px; padding: 16px 0; }

.hashtag-link { color: var(--accent, #1d7cff); font-weight: 600; text-decoration: none; }
.hashtag-link:hover { text-decoration: underline; }

.mention-link { color: var(--red); font-weight: 600; text-decoration: none; }
.mention-link:hover { text-decoration: underline; }

.edited-tag { color: var(--muted); font-style: italic; }

.edit-post-form { flex-direction: column; gap: 8px; margin: 10px 0; }
.edit-post-form textarea { width: 100%; min-height: 70px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; color: var(--text); padding: 8px; font: inherit; resize: vertical; }
.edit-post-actions { display: flex; gap: 8px; }
.edit-post-actions button { border: 1px solid var(--border); background: var(--panel-2); color: var(--text); border-radius: 999px; padding: 4px 12px; font-size: 13px; cursor: pointer; }
.edit-post-actions button[type="submit"] { background: var(--red); border-color: var(--red-dark); }

.reaction-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; position: relative; }
.reaction-pills { display: flex; gap: 4px; flex-wrap: wrap; }
.reaction-pill { background: var(--panel); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; font-size: 12px; cursor: pointer; color: var(--text); }
.reaction-pill.mine { border-color: var(--red); background: rgba(230,57,70,0.12); }
.reaction-add-btn { all: unset; cursor: pointer; font-size: 13px; color: var(--muted); padding: 1px 4px; }
.reaction-add-btn:hover { color: var(--text); }
.comment .reaction-row { margin-top: 4px; margin-bottom: 2px; }

.explore-trending-tags { max-width: 680px; margin: 0 auto 14px; padding: 0 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.hashtag-trending-tags { margin-bottom: 20px; }
.explore-tag-pill { display: inline-block; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border); font-size: 12px; font-weight: 600; color: var(--text); text-decoration: none; background: var(--panel-bg, #fff); }
.explore-tag-pill:hover { border-color: var(--accent, #1d7cff); color: var(--accent, #1d7cff); }
.explore-tag-pill.active { background: var(--text); color: var(--panel-bg, #fff); border-color: var(--text); }

.story-camera-wrap { margin-top: 10px; }
.story-camera-video { width: 100%; max-width: 420px; border-radius: 12px; background: #000; display: block; }
.story-camera-controls { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.story-camera-controls button { all: unset; cursor: pointer; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border); font-size: 13px; }
.story-camera-controls button.primary { background: var(--text); color: var(--panel-bg, #fff); border-color: var(--text); }
.story-camera-controls.mt-8 { margin-top: 8px; }
.story-canvas-wrap-spacing { margin-top: 14px; }
.story-track-hint-spacing { margin: 2px 0 0; }
.story-sticker-empty-hint { font-size: 12px; }
.story-share-btn { margin-top: 16px; }
.story-camera-error { color: #c0392b; font-size: 12px; margin-top: 6px; }

.category-list { max-width: 680px; margin: 20px auto 60px; padding: 0 16px; }
.category-row {
    display: flex; justify-content: space-between; align-items: center;
    background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
    padding: 16px 18px; margin-bottom: 10px;
}
.category-row a.cat-name { font-size: 15px; font-weight: 600; color: var(--text); }
.category-row .cat-desc { font-size: 13px; color: var(--muted); margin-top: 2px; }
.category-row .cat-count { font-size: 13px; color: var(--muted); white-space: nowrap; }

.thread-list { max-width: 680px; margin: 20px auto 60px; padding: 0 16px; }
.thread-row {
    background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
    padding: 14px 18px; margin-bottom: 8px;
}
.thread-row.pinned { border-color: var(--red); }
.thread-title { font-size: 14px; font-weight: 600; }
.thread-title a { color: var(--text); }
.thread-sub { font-size: 12px; color: var(--muted); margin-top: 4px; }
.pin-tag { color: var(--red); font-size: 11px; font-weight: 700; text-transform: uppercase; margin-right: 6px; }
.thread-lock-ico { display: inline-flex; vertical-align: -2px; color: var(--muted); margin-right: 2px; }
.thread-lock-ico svg { width: 13px; height: 13px; }

.thread-view { max-width: 680px; margin: 0 auto; padding: 20px 16px 60px; }
.thread-view-title { margin-bottom: 14px; }
.thread-replies-heading { margin-top: 24px; }
.thread-reply-textarea { min-height: 100px; }
.thread-reply-note { margin-top: 16px; }
.reply-form { margin-top: 20px; }

.pagination { display: flex; justify-content: center; gap: 10px; margin-top: 20px; font-size: 13px; }
.pagination a, .pagination span { padding: 6px 12px; border: 1px solid var(--border); border-radius: 6px; color: var(--text); }
.pagination a:hover { border-color: var(--red); text-decoration: none; }
.pagination .current { background: var(--red); border-color: var(--red); }

.empty-state { text-align: center; color: var(--muted); font-size: 14px; padding: 40px 16px; }
.clan-not-found-msg { padding: 0; }
.clan-not-found-back { margin: 10px 0 0; }

/* --- Battles --- */
.battle-list { max-width: 680px; margin: 20px auto 60px; padding: 0 16px; }
.battle-row {
    background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
    padding: 16px 18px; margin-bottom: 10px;
}
.battle-title { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.battle-title a { color: var(--text); }
.battle-vs { font-size: 13px; color: var(--muted); }
.battle-status {
    display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase;
    padding: 2px 8px; border-radius: 999px; margin-left: 6px;
}
.battle-status.pending { background: rgba(138,138,146,0.15); color: var(--muted); }
.battle-status.active { background: rgba(230,57,70,0.15); color: var(--red); }
.battle-status.completed { background: rgba(61,220,132,0.12); color: var(--green); }
.battle-status.declined, .battle-status.cancelled { background: rgba(138,138,146,0.1); color: var(--muted); }

.battle-view { max-width: 680px; margin: 0 auto; padding: 20px 16px 60px; }
.vs-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: stretch; margin: 20px 0; }
.vs-side { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 18px; text-align: center; }
.vs-side.winner { border-color: var(--green); }
.vs-mid { display: flex; align-items: center; justify-content: center; color: var(--muted); font-weight: 700; font-size: 13px; }
.vs-avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--panel-2) center/cover no-repeat; margin: 0 auto 10px; }
.battle-decline-form { margin-top: 10px; }
.battle-vote-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.battle-vote-form { margin: 0; }
.vs-listen-link { margin-top: 8px; }
.vs-bar { height: 8px; border-radius: 999px; background: var(--panel-2); margin-top: 12px; overflow: hidden; }
.vs-bar-fill { height: 100%; background: var(--red); }
.vs-pct { font-size: 12px; color: var(--muted); margin-top: 6px; }
.section-title { font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 24px 0 10px; }

/* --- Nav badge --- */
.nav-badge {
    display: inline-block; min-width: 16px; height: 16px; line-height: 16px;
    padding: 0 4px; border-radius: 999px; background: var(--red); color: #fff;
    font-size: 10px; font-weight: 700; text-align: center; margin-left: 2px;
    position: relative; top: -6px;
}

/* --- Messages --- */
.convo-list { max-width: 680px; margin: 20px auto 60px; padding: 0 16px; }
.convo-row {
    display: flex; align-items: center; gap: 12px;
    background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
    padding: 12px 16px; margin-bottom: 8px;
}
.convo-row.unread { border-color: var(--red); }
.convo-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--panel-2) center/cover no-repeat; flex-shrink: 0; position: relative; }
.convo-avatar-wrap { position: relative; flex-shrink: 0; }
.convo-avatar-lg { width: 64px; height: 64px; }
.group-settings-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.group-settings-title { font-weight: 600; }
.group-settings-member-count { font-size: 12px; }
.group-settings-avatar-hint { font-size: 12px; margin-top: 4px; }
.group-settings-save-btn { margin-top: 12px; }
.group-settings-members-heading { margin-top: 0; }
.group-settings-member-info { flex: 1; }
.online-dot { position: absolute; bottom: 0; right: 0; width: 12px; height: 12px; border-radius: 50%; background: #2ecc71; border: 2px solid var(--bg); }
.activity-status { font-size: 12px; color: var(--muted); }
.activity-status.online { color: #2ecc71; }
.activity-status.online::before { content: '● '; }

/* --- Notes (24h, Instagram-style) --- */
.notes-tray { max-width: 680px; margin: 16px auto 0; padding: 0 16px; display: flex; gap: 16px; overflow-x: auto; }
.notes-tray { padding-top: 34px; }
.note-bubble { display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; width: 64px; text-align: center; color: var(--text); position: relative; }
.note-avatar { position: relative; width: 56px; height: 56px; border-radius: 50%; background: var(--panel-2) center/cover no-repeat; border: 2px solid var(--border); }
.note-bubble-self { cursor: pointer; }
.note-add-icon { position: absolute; bottom: -2px; right: -2px; width: 20px; height: 20px; border-radius: 50%; background: var(--red); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; border: 2px solid var(--bg); }
/* Anchored to the avatar itself (its nearest positioned ancestor) instead
   of the whole flex column, so its height no longer has to be guessed
   with a fixed "bottom" offset. That old guess ran out of room and let
   the pill's top edge get clipped into the avatar photo. */
.note-text-pill {
    position: absolute;
    bottom: 100%;
    margin-bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 5px 9px;
    font-size: 11px;
    white-space: nowrap;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 2;
}
.note-text-pill::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--border);
}
.note-text-pill::before {
    content: "";
    position: absolute;
    top: calc(100% - 1px);
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: var(--panel);
    z-index: 1;
}
.note-caption { font-size: 11px; color: var(--muted); max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-editor { max-width: 680px; margin: 12px auto 0; padding: 0 16px; }
.note-editor form { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 12px; }
.note-editor textarea { min-height: 60px; }
.note-editor button { width: auto; margin-top: 8px; }
.note-editor-actions { display: flex; gap: 8px; }
.convo-row-link { display: block; }
.convo-row-info { min-width: 0; }

/* --- Message replies --- */
.msg-reply-btn, .msg-react-btn { all: unset; cursor: pointer; font-size: 12px; color: var(--muted); padding: 2px 4px; }
.msg-reply-btn:hover, .msg-react-btn:hover { color: var(--text); }
.msg-actions-row { display: flex; gap: 6px; margin-top: 2px; align-items: center; position: relative; }
.msg-row.mine .msg-actions-row { justify-content: flex-end; }
.msg-quote { border-left: 3px solid var(--red); padding: 4px 8px; margin-bottom: 4px; font-size: 12px; color: var(--muted); background: var(--panel-2); border-radius: 6px; max-width: 75%; }
.msg-quote strong { color: var(--text); }
.reply-preview-bar { display: flex; align-items: center; justify-content: space-between; background: var(--panel-2); border-radius: 8px; padding: 6px 10px; margin-bottom: 8px; font-size: 12px; }
.reply-preview-bar button { all: unset; cursor: pointer; color: var(--muted); font-size: 14px; }
.reaction-picker { position: absolute; bottom: 100%; background: var(--panel); border: 1px solid var(--border); border-radius: 999px; padding: 4px 6px; display: flex; gap: 2px; box-shadow: 0 4px 12px rgba(0,0,0,0.3); z-index: 5; }
.reaction-picker button { all: unset; cursor: pointer; font-size: 18px; padding: 2px 4px; border-radius: 50%; }
.reaction-picker button:hover { background: var(--panel-2); }
.msg-reactions { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
.msg-reaction-pill { background: var(--panel); border: 1px solid var(--border); border-radius: 999px; padding: 1px 7px; font-size: 11px; cursor: pointer; }
.msg-reaction-pill.mine { border-color: var(--red); background: rgba(230,57,70,0.12); }
.convo-name { font-weight: 600; font-size: 14px; }
.convo-preview { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 380px; }
.convo-time { font-size: 11px; color: var(--muted); margin-left: auto; white-space: nowrap; }

.message-thread { max-width: 680px; margin: 0 auto; padding: 20px 16px 100px; }
.thread-back-link { margin-bottom: 8px; }
.back-link { margin-bottom: 8px; }
.thread-title { margin: 0; }
.thread-title-link { color: inherit; }
.msg-row { display: flex; margin-bottom: 10px; }
.msg-row.mine { justify-content: flex-end; }
.msg-bubble { max-width: 75%; padding: 10px 14px; border-radius: 14px; font-size: 14px; white-space: pre-wrap; word-wrap: break-word; background: var(--panel); border: 1px solid var(--border); }
.msg-row.mine .msg-bubble { background: var(--red); border-color: var(--red); color: #fff; }
.msg-time { font-size: 10px; color: var(--muted); margin-top: 3px; }
.msg-seen-label { font-size: 10px; color: var(--muted); text-align: right; margin-top: 2px; }
.msg-row.mine .msg-time { text-align: right; }
.message-form { position: sticky; bottom: 0; background: var(--bg); padding: 12px 0 0; border-top: 1px solid var(--border); margin-top: 16px; }
.message-form .message-text-form { display: flex; gap: 8px; align-items: center; }
.message-form textarea { min-height: 44px; flex: 1; }
.message-form button { width: auto; margin-top: 0; }
.sticker-toggle-btn { all: unset; cursor: pointer; font-size: 22px; line-height: 1; padding: 4px; flex-shrink: 0; }
.track-toggle-btn { all: unset; cursor: pointer; font-size: 20px; line-height: 1; padding: 4px; flex-shrink: 0; }

/* --- Group conversations --- */
.thread-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.convo-group-icon { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 18px; }
.link-btn { all: unset; cursor: pointer; color: var(--red); font-size: 13px; font-weight: 600; }
.link-btn:hover { text-decoration: underline; }
.group-members { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 6px; }
.group-member-chip { display: flex; align-items: center; gap: 6px; background: var(--panel); border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px 4px 4px; font-size: 12px; color: var(--text); }
.group-member-chip img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.msg-sender-name { font-size: 11px; color: var(--muted); margin-bottom: 2px; }

/* --- Stickers in chat --- */
.msg-sticker img { width: 96px; height: 96px; object-fit: contain; }
.sticker-tray { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 10px; margin-bottom: 8px; max-height: 220px; overflow-y: auto; }
.sticker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 8px; }
.sticker-pick { all: unset; cursor: pointer; background: var(--panel-2); border-radius: 8px; padding: 4px; display: flex; align-items: center; justify-content: center; }
.sticker-pick:hover { background: var(--border); }
.sticker-pick img { width: 40px; height: 40px; object-fit: contain; }
.sticker-tray-empty { font-size: 12px; }
.sticker-tray-add-link { font-size: 12px; }
.sticker-library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 10px; margin-top: 10px; }
.sticker-library-item { background: var(--panel-2); border-radius: 10px; padding: 8px; display: flex; align-items: center; justify-content: center; }
.sticker-library-item img { width: 56px; height: 56px; object-fit: contain; }
.sticker-create-hint { font-size: 12px; margin: 6px 0 14px; }
.sticker-library-panel { margin-top: 16px; }

/* --- Shared Kaykay video/post inside a chat bubble --- */
.msg-shared-post { position: relative; display: block; width: 160px; border-radius: 12px; overflow: hidden; background: #000; border: 1px solid var(--border); }
.msg-shared-post video, .msg-shared-post img { width: 100%; height: 200px; object-fit: cover; display: block; }
.msg-shared-post-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 28px; text-shadow: 0 1px 4px rgba(0,0,0,0.6); }
.msg-shared-post-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 8px; font-size: 11px; color: #fff; background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0)); }
.msg-track-card { display: block; width: 240px; }
.msg-track-card-playable .oxus-player { width: 100%; }
.msg-track-card-link { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; background: var(--panel); border: 1px solid var(--border); text-decoration: none; color: inherit; }
.msg-track-card-cover { width: 44px; height: 44px; border-radius: 8px; flex-shrink: 0; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; background-color: var(--border); }
.msg-track-card-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.msg-track-card-title { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-track-card-artist { font-size: 11.5px; opacity: 0.7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-track-card-play { flex-shrink: 0; opacity: 0.8; }

/* --- User picker (new group / kaykay share) --- */
.contact-results { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; max-height: 220px; overflow-y: auto; }
.contact-row { all: unset; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 8px; font-size: 13px; }
.contact-row:hover { background: var(--panel-2); }
.contact-row img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.contact-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.contact-chip { display: flex; align-items: center; gap: 6px; background: var(--panel); border: 1px solid var(--border); border-radius: 999px; padding: 4px 6px 4px 4px; font-size: 12px; }
.contact-chip img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.contact-chip button { all: unset; cursor: pointer; color: var(--muted); font-size: 11px; padding: 0 2px; }

/* --- Notifications ---
   UI Polish pass: emoji glyphs replaced with the site's SVG icon system
   (icon_svg()); actor avatar (already fetched by the query, previously
   unused) is now shown with a small colored icon badge overlapping its
   corner — same "avatar + type badge" language used on most modern feeds,
   consistent with the dark/red/green palette already used elsewhere. */
.notif-page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.notif-mark-all-form { margin: 0; }
.notif-mark-all-btn { white-space: nowrap; }
.notif-list { max-width: 680px; margin: 20px auto 60px; padding: 0 16px; }
.notif-row {
    display: flex; align-items: center; gap: 12px;
    background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
    padding: 12px 14px; margin-bottom: 8px;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.notif-row:hover { border-color: var(--muted); }
.notif-row.unread { border-color: var(--red); background: rgba(230,57,70,0.05); }

.notif-avatar-wrap { position: relative; flex-shrink: 0; width: 42px; height: 42px; }
.notif-avatar {
    width: 42px; height: 42px; border-radius: 50%; background-size: cover;
    background-position: center; background-color: var(--panel-2);
    border: 1px solid var(--border);
}
.notif-badge {
    position: absolute; right: -3px; bottom: -3px; width: 19px; height: 19px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--panel); color: #fff;
}
.notif-badge svg { width: 11px; height: 11px; }
.notif-icon-solo {
    flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; color: #fff;
}
.notif-icon-solo svg { width: 19px; height: 19px; }

.notif-badge-red, .notif-icon-solo.notif-badge-red { background: var(--red); }
.notif-badge-green, .notif-icon-solo.notif-badge-green { background: var(--green); color: #06130b; }
.notif-badge-blue, .notif-icon-solo.notif-badge-blue { background: #3d8bdc; }
.notif-badge-gold, .notif-icon-solo.notif-badge-gold { background: #e0b73d; color: #241a02; }
.notif-badge-muted, .notif-icon-solo.notif-badge-muted { background: var(--muted); color: #0a0a0c; }

.notif-body { flex: 1; min-width: 0; }
.notif-message { font-size: 14px; line-height: 1.35; }
.notif-message a { color: var(--text); }
.notif-row.unread .notif-message { font-weight: 500; }
.notif-time { font-size: 12px; color: var(--muted); margin-top: 2px; }
.notif-mark-one-form { margin: 0; flex-shrink: 0; }
.notif-mark-one-btn {
    all: unset; cursor: pointer; width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--muted); border: 1px solid var(--border);
}
.notif-mark-one-btn svg { width: 13px; height: 13px; }
.notif-mark-one-btn:hover { color: var(--green); border-color: var(--green); }
.notif-read-spacer { display: block; width: 28px; height: 28px; flex-shrink: 0; }

.notif-list .empty-state { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 20px; }
.notif-list .empty-state-icon {
    width: 44px; height: 44px; border-radius: 50%; background: var(--panel-2);
    display: flex; align-items: center; justify-content: center; color: var(--muted);
}
.notif-list .empty-state-icon svg { width: 20px; height: 20px; }

@media (max-width: 480px) {
    .notif-row { padding: 10px 12px; gap: 10px; }
    .notif-avatar-wrap, .notif-avatar, .notif-icon-solo { width: 36px; height: 36px; }
}

/* --- Post/thread/reply video attachments (feed, thread, post cards) --- */
.card-video {
    max-width: 100%;
    max-height: 480px;
    width: 100%;
    border-radius: 8px;
    margin-bottom: 10px;
    display: block;
    background: #000;
}

/* --- Kaykay (discover feed): compact, centered, TikTok/Reels style ---
   Unlike the old edge-to-edge version, the card itself is capped to a
   phone-like max-width/aspect so vertical videos don't blow up huge and
   distorted on wide desktop screens — it's centered with the rest of
   the screen simply left dark, exactly like Reels/TikTok on desktop. */
.kaykay-feed {
    height: calc(var(--vh, 1vh) * 100 - var(--topbar-h, 60px) - var(--bottomnav-h, 0px));
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    background: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.kaykay-feed::-webkit-scrollbar { display: none; }

.kaykay-item {
    position: relative;
    width: 100%;
    max-width: 460px;
    height: calc(var(--vh, 1vh) * 100 - var(--topbar-h, 60px) - var(--bottomnav-h, 0px));
    scroll-snap-align: start;
    scroll-snap-stop: always;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    overflow: hidden;
}

.kaykay-media-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kaykay-media {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

.kaykay-overlay {
    position: absolute;
    left: 0;
    right: 56px;
    bottom: 0;
    padding: 16px 16px 22px;
    background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0));
    color: #fff;
}
.kaykay-author { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.kaykay-name { color: #fff; font-weight: 600; font-size: 14px; }
.kaykay-caption { font-size: 14px; margin-bottom: 10px; white-space: pre-wrap; word-wrap: break-word; }
.kaykay-open {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: rgba(230,57,70,0.9);
    padding: 6px 12px;
    border-radius: 20px;
}
.kaykay-open:hover { background: var(--red-dark); text-decoration: none; }

/* Right-hand action rail: like / comment / repost, Reels-style.
   Kept intentionally compact (36px / 32px on small screens) — the
   original 48px circles were oversized next to the rest of the UI and
   ate into the video itself on narrow phones. */
.kaykay-actions {
    position: absolute;
    right: 6px;
    bottom: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    z-index: 2;
}
.kaykay-action {
    background: rgba(0,0,0,0.35);
    border: none;
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 0;
    padding: 0;
    font-family: inherit;
    line-height: 1;
    gap: 1px;
}
.kaykay-action-icon { font-size: 15px; }
.kaykay-action-count { font-size: 9px; font-weight: 600; }
.kaykay-action.active .kaykay-action-icon { color: var(--red); }
.kaykay-action.kaykay-repost.active .kaykay-action-icon { color: var(--green); }
.kaykay-action:hover { background: rgba(0,0,0,0.55); }

@media (max-width: 480px) {
    .kaykay-actions { right: 4px; bottom: 80px; gap: 12px; }
    .kaykay-action { width: 32px; height: 32px; }
    .kaykay-action-icon { font-size: 14px; }
    .kaykay-action-count { font-size: 8px; }
}

.kaykay-mute {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0,0,0,0.5);
    border: none;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    margin-top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}
.kaykay-mute .oxus-ico, .kaykay-mute.oxus-ico { width: 17px; height: 17px; }
.kaykay-mute svg { width: 100%; height: 100%; display: block; }
.kaykay-mute:hover { background: rgba(0,0,0,0.7); }

.kaykay-empty { display: flex; }
.kaykay-empty-inner { text-align: center; color: var(--muted); padding: 0 24px; }
.kaykay-empty-inner p:first-child { color: var(--text); font-size: 16px; margin-bottom: 6px; }

/* Inline comment drawer (bottom sheet), used only from Kaykay */
.kaykay-comments-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: none;
    align-items: flex-end;
    justify-content: center;
    z-index: 50;
}
.kaykay-comments-backdrop.open { display: flex; }
.kaykay-comments-drawer {
    background: var(--panel);
    width: 100%;
    max-width: 460px;
    max-height: 70vh;
    border-radius: 16px 16px 0 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-bottom: none;
}
.kaykay-comments-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    font-weight: 600;
    font-size: 14px;
    border-bottom: 1px solid var(--border);
}
.kaykay-comments-close { all: unset; cursor: pointer; color: var(--muted); font-size: 16px; padding: 4px; }
.kaykay-comments-list { overflow-y: auto; padding: 12px 16px; flex: 1; }
.kaykay-comment-row { display: flex; gap: 8px; margin-bottom: 12px; }
.kaykay-comment-author { font-weight: 600; font-size: 12px; }
.kaykay-comment-time { font-weight: 400; color: var(--muted); font-size: 11px; }
.kaykay-comment-content { font-size: 13px; word-wrap: break-word; }
.kaykay-comments-form { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border); }
.kaykay-comments-form input { flex: 1; margin: 0; }
.kaykay-comments-form button { width: auto; margin: 0; }
.kaykay-share-list { overflow-y: auto; flex: 1; max-height: 320px; }

@media (max-width: 480px) {
    .kaykay-item { max-width: 100%; }
}

/* Status line shown under a file input while video-compress.js is
   re-encoding a selected clip in the background. */
.media-compress-status {
    font-size: 12px;
    color: var(--muted);
    margin-top: 6px;
}

/* --- Profile tabs (Gönderiler / Medya / Repostlar) --- */
.profile-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 16px;
}
.profile-tab {
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.profile-tab:hover { color: var(--text); text-decoration: none; }
.profile-tab.active { color: var(--text); border-bottom-color: var(--red); }
.profile-tab-count { font-weight: 400; color: var(--muted); font-size: 12px; }

.repost-tag { font-size: 12px; color: var(--green); font-weight: 600; margin-bottom: 8px; }
.card-actions .reposted { color: var(--green); font-weight: 600; }

/* --- Profile "Medya" grid + Keşfet grid (Instagram-style tiles) --- */
.media-grid, .explore-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    max-width: 680px;
    margin: 0 auto;
}
.explore-grid { padding: 0 16px 60px; }
.media-grid-tile, .explore-tile {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    background: var(--panel-2);
    overflow: hidden;
}
.media-grid-tile img, .media-grid-tile video,
.explore-tile img, .explore-tile video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.media-grid-badge, .explore-tile-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    color: #fff;
    font-size: 12px;
    text-shadow: 0 0 4px rgba(0,0,0,0.8);
}
.explore-tile-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.35);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.explore-tile-overlay span { display: inline-flex; align-items: center; gap: 5px; }
.explore-tile-overlay .oxus-ico { width: 15px; height: 15px; }
.explore-tile:hover .explore-tile-overlay { opacity: 1; }
.explore-tile:hover { text-decoration: none; }

/* --- "Anlık" (stories) bar on the profile page --- */
.story-bar-wrap { max-width: 880px; margin: 18px auto 0; padding: 0 16px; }
.story-bar { display: flex; gap: 18px; overflow-x: auto; padding-bottom: 4px; }
.story-bubble-wrap { position: relative; flex-shrink: 0; width: 68px; text-align: center; }
.story-bubble {
    display: block;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    padding: 3px;
    background: var(--panel-2);
    border: 2px solid var(--border);
}
.story-bubble img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    background: var(--panel-2);
}
.story-bubble.has-story { background: linear-gradient(135deg, var(--red), #ff9a56); border-color: transparent; }
.story-bubble.has-story.seen { background: var(--border); }
.story-bubble.highlight { border-color: var(--border); }
.story-add-badge {
    position: absolute;
    right: 2px;
    bottom: 16px;
    width: 20px;
    height: 20px;
    line-height: 18px;
    text-align: center;
    border-radius: 50%;
    background: var(--red);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    border: 2px solid var(--bg);
}
.story-add-badge:hover { text-decoration: none; background: var(--red-dark); }
.story-bubble-label {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Anlık editor + fullscreen viewer shared canvas --- */
.story-canvas {
    position: relative;
    width: 100%;
    max-width: 360px;
    aspect-ratio: 9 / 16;
    margin: 0 auto;
    background: #000 center/cover no-repeat;
    border-radius: 14px;
    overflow: hidden;
    user-select: none;
    touch-action: none;
}
.story-canvas img.story-canvas-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}
.story-overlay { position: absolute; max-width: 90%; }
.story-overlay.story-sticker { cursor: grab; }
.story-overlay.story-sticker img { width: 100%; display: block; pointer-events: none; }
.story-overlay.story-text {
    cursor: grab;
    padding: 6px 10px;
    white-space: pre-wrap;
    text-align: center;
    font-size: 20px;
    line-height: 1.3;
    word-break: break-word;
}
.story-overlay.story-text.editing { outline: 2px dashed rgba(255,255,255,0.6); }
.story-text-classic { color: #fff; font-weight: 600; text-shadow: 0 1px 4px rgba(0,0,0,0.7); }
.story-text-bold { color: #fff; font-weight: 800; font-size: 24px; background: rgba(0,0,0,0.55); border-radius: 6px; }
.story-text-neon { color: #ff2d55; font-weight: 700; text-shadow: 0 0 6px #ff2d55, 0 0 14px #ff2d55; }
.story-text-typewriter { color: #111; background: #fff; font-family: 'Courier New', monospace; border-radius: 4px; }
.story-text-handwritten { color: #fff; font-family: 'Brush Script MT', cursive; font-size: 26px; text-shadow: 0 1px 4px rgba(0,0,0,0.7); }

.story-editor-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.story-editor-tools button { width: auto; padding: 8px 14px; font-size: 13px; }
.story-text-style-picker { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.story-text-style-picker button {
    width: auto; padding: 6px 12px; font-size: 12px;
    background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
}
.story-text-style-picker button.active { border-color: var(--red); color: var(--red); }
.story-sticker-picker {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
    gap: 8px; max-height: 220px; overflow-y: auto; margin-top: 10px;
    background: var(--panel-2); border-radius: 10px; padding: 10px;
}
.story-sticker-picker img { width: 100%; cursor: pointer; border-radius: 6px; }
.story-overlay-remove {
    position: absolute; top: -8px; right: -8px; width: 20px; height: 20px;
    border-radius: 50%; background: var(--red); color: #fff; font-size: 12px;
    line-height: 20px; text-align: center; cursor: pointer;
    z-index: 1;
}
.story-overlay.story-track {
    cursor: grab;
    display: flex; align-items: center; gap: 8px;
    background: rgba(0,0,0,0.55); backdrop-filter: blur(6px);
    border-radius: 999px; padding: 6px 14px 6px 6px; color: #fff;
    max-width: 220px; white-space: nowrap;
}
.story-overlay.story-track .story-music-badge-icon { width: 24px; height: 24px; border-radius: 50%; background: var(--red); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.story-overlay.story-track .story-music-badge-icon svg { width: 12px; height: 12px; }
.story-overlay.story-track span.title { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; }

/* --- Fullscreen viewer --- */
.story-viewer-backdrop {
    position: fixed; inset: 0; background: #000; z-index: 999;
    display: flex; align-items: center; justify-content: center;
    /* A left/right drag anywhere on this layer used to be interpreted by
       the mobile browser itself as its native "swipe back to previous
       page" gesture, which animates in a preview of whatever page was
       open before the viewer — that's the stray flash of colour people
       see mid-swipe. Taking over horizontal touch handling here (we
       don't use horizontal drags for anything) stops the browser from
       ever starting that gesture in the first place. */
    touch-action: pan-y;
    overscroll-behavior-x: none;
}
.story-viewer-canvas, .story-viewer-canvas * { touch-action: pan-y; }
.story-viewer-canvas { position: relative; width: 100%; max-width: 420px; height: 100%; max-height: 100vh; }
.story-viewer-canvas .story-canvas { max-width: none; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
.story-progress-row { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; gap: 4px; z-index: 3; }
.story-progress-seg { flex: 1; height: 3px; background: rgba(255,255,255,0.3); border-radius: 2px; overflow: hidden; }
.story-progress-seg-fill { height: 100%; width: 0%; background: #fff; }
.story-progress-seg.done .story-progress-seg-fill { width: 100%; }
.story-viewer-head {
    position: absolute; top: 20px; left: 10px; right: 10px; z-index: 3;
    display: flex; align-items: center; gap: 8px; color: #fff; font-size: 13px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
.story-viewer-head img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.story-viewer-time-ago { opacity: 0.75; }
.story-viewer-close { position: absolute; top: 18px; right: 10px; z-index: 4; color: #fff; font-size: 22px; background: none !important; width: auto; padding: 4px 10px; -webkit-tap-highlight-color: transparent; }
.story-viewer-topactions { position: absolute; top: 14px; right: 48px; z-index: 4; display: flex; gap: 4px; }
.story-viewer-icon-btn {
    all: unset; cursor: pointer; color: #fff; font-size: 17px; line-height: 1;
    width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
    -webkit-tap-highlight-color: transparent;
}
.story-viewer-icon-btn:active { transform: scale(0.88); }
.story-viewer-nav { position: absolute; top: 0; bottom: 0; width: 35%; z-index: 2; background: transparent !important; border: none; -webkit-tap-highlight-color: transparent; outline: none; }
.story-viewer-nav:active, .story-viewer-nav:focus { background: transparent !important; outline: none; }
.story-viewer-nav.prev { left: 0; }
.story-viewer-nav.next { right: 0; }
.story-viewer-link {
    position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 3;
    width: auto; padding: 10px 22px; border-radius: 999px; background: rgba(255,255,255,0.95); color: #111; font-weight: 700;
}
.story-viewer-owner-bar {
    position: absolute; bottom: 20px; left: 16px; right: 16px; z-index: 3;
    display: flex; justify-content: space-between; gap: 8px; color: #fff; font-size: 13px;
}
.story-viewer-owner-bar a, .story-viewer-owner-bar button { color: #fff; background: rgba(0,0,0,0.45); border: 1px solid rgba(255,255,255,0.3); width: auto; padding: 6px 12px; font-size: 12px; border-radius: 999px; }
.story-viewer-owner-bar #viewer-count { cursor: pointer; }
.story-viewer-owner-bar #viewer-count:active { transform: scale(0.96); }

/* --- Fullscreen viewer: reply bar + quick reactions (non-owner) --- */
.story-viewer-replybar {
    position: absolute; bottom: 18px; left: 12px; right: 12px; z-index: 3;
    display: flex; flex-direction: column; gap: 8px;
}
.story-quickreacts { display: flex; gap: 6px; justify-content: center; }
.story-quickreacts button {
    all: unset; cursor: pointer; font-size: 20px; width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.45); border-radius: 50%; transition: transform 120ms ease;
}
.story-quickreacts button:active { transform: scale(0.85); }
.story-quickreacts button.mine { background: rgba(230,57,70,0.55); box-shadow: 0 0 0 2px rgba(255,255,255,0.5) inset; }
.story-reply-form { display: flex; gap: 8px; align-items: center; }
.story-reply-form input {
    flex: 1; margin: 0; background: rgba(0,0,0,0.45); border: 1px solid rgba(255,255,255,0.3);
    border-radius: 999px; padding: 10px 16px; color: #fff; font-size: 13px;
}
.story-reply-form input::placeholder { color: rgba(255,255,255,0.7); }
.story-reply-form button[type="submit"] {
    all: unset; cursor: pointer; width: 38px; height: 38px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 16px;
    background: var(--red); color: #fff; border-radius: 50%;
}
.story-reply-form button[type="submit"]:active { transform: scale(0.92); }
.story-viewer-canvas.has-replybar .story-viewer-link { bottom: 96px; }

/* Emoji that floats up from a tapped quick-reaction button and fades out */
.story-float-emoji {
    position: absolute; z-index: 5; font-size: 26px; pointer-events: none;
    transform: translate(-50%, 0);
    animation: story-float-up 1100ms ease-out forwards;
}
@keyframes story-float-up {
    0%   { transform: translate(-50%, 0) scale(0.6); opacity: 0; }
    15%  { transform: translate(-50%, -20px) scale(1.15); opacity: 1; }
    100% { transform: translate(-50%, -180px) scale(1); opacity: 0; }
}

/* --- Fullscreen viewer: "seen by" modal (owner) --- */
.story-viewer-modal-backdrop {
    position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,0.6);
    display: none; align-items: flex-end; justify-content: center;
}
.story-viewer-modal-backdrop.open { display: flex; }
.story-viewer-modal {
    width: 100%; max-width: 420px; max-height: 60vh; background: var(--panel);
    border-radius: 16px 16px 0 0; overflow: hidden; display: flex; flex-direction: column;
}
@media (min-width: 640px) {
    .story-viewer-modal-backdrop { align-items: center; }
    .story-viewer-modal { border-radius: 16px; max-height: 70vh; }
}
.story-viewer-modal .oxus-modal-list { overflow-y: auto; }
.story-viewer-modal-row { justify-content: space-between; }
.story-viewer-modal-avatar { border-radius: 50%; }
.story-viewer-modal-reaction { font-size: 16px; margin-left: 8px; }

/* --- Fullscreen viewer: toast --- */
.story-viewer-toast {
    position: absolute; top: 60px; left: 50%; z-index: 6;
    transform: translate(-50%, -12px); opacity: 0; pointer-events: none;
    background: rgba(0,0,0,0.75); color: #fff; font-size: 12.5px;
    padding: 8px 16px; border-radius: 999px; white-space: nowrap;
    transition: opacity 180ms ease, transform 180ms ease;
}
.story-viewer-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* =====================================================================
   OXUS PREMIUM
   ===================================================================== */
.premium-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 2px 8px 2px 6px;
    border-radius: 999px;
    border: 1px solid;
    margin-left: 6px;
    vertical-align: middle;
    white-space: nowrap;
    cursor: help;
}
.premium-badge-icon { flex-shrink: 0; }
.premium-nav-cta {
    background: linear-gradient(135deg, #FFD700, #f5b400) !important;
    color: #1a1a0a !important;
    font-weight: 700;
}
.premium-nav-cta:hover { background: #f5b400 !important; }

.premium-page { padding-top: 32px; }

.premium-hero {
    position: relative;
    max-width: 720px;
    margin: 0 auto 40px;
    padding: 48px 28px 40px;
    text-align: center;
    background:
        radial-gradient(120% 140% at 50% -20%, rgba(255,215,0,0.16), transparent 60%),
        linear-gradient(160deg, #17150c, var(--panel) 70%);
    border: 1px solid #FFD70033;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 50px -30px rgba(255, 215, 0, 0.35);
}
.premium-hero::before {
    content: "";
    position: absolute;
    top: -60%; left: 50%;
    width: 140%; height: 140%;
    transform: translateX(-50%);
    background: conic-gradient(from 0deg, transparent 0 70%, rgba(255,215,0,0.08) 80%, transparent 90%);
    animation: premium-glow-spin 12s linear infinite;
    pointer-events: none;
}
@keyframes premium-glow-spin { to { transform: translateX(-50%) rotate(360deg); } }

.premium-kicker {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #FFD700;
    background: rgba(255,215,0,0.08);
    border: 1px solid #FFD70033;
    padding: 5px 12px;
    border-radius: 999px;
    margin-bottom: 18px;
}
.premium-kicker-dot { width: 6px; height: 6px; border-radius: 50%; background: #FFD700; box-shadow: 0 0 8px 1px rgba(255,215,0,0.8); }

.premium-hero h1 {
    position: relative;
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.premium-hero-star { font-size: 26px; filter: drop-shadow(0 0 10px rgba(255,215,0,0.6)); }
.premium-hero .sub { position: relative; }
.premium-hero .price {
    position: relative;
    font-size: 44px;
    font-weight: 800;
    background: linear-gradient(135deg, #FFEB80, #FFD700 55%, #f5b400);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin: 18px 0 4px;
}
.premium-hero .price span { font-size: 15px; color: var(--muted); font-weight: 500; -webkit-text-fill-color: var(--muted); }
.premium-active-pill {
    position: relative;
    display: inline-block;
    margin-top: 14px;
    padding: 6px 16px;
    font-weight: 700;
    font-size: 13px;
    color: #FFD700;
    background: rgba(255,215,0,0.1);
    border: 1px solid #FFD70044;
    border-radius: 999px;
}

.premium-feature-grid {
    position: relative;
    max-width: 760px;
    margin: 0 auto 40px;
    padding: 0 16px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
.premium-feature-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.premium-feature-card:hover { border-color: #FFD70055; transform: translateY(-2px); }
.premium-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    font-size: 19px;
    border-radius: 11px;
    background: linear-gradient(150deg, rgba(255,215,0,0.16), rgba(255,215,0,0.04));
    border: 1px solid #FFD70033;
    margin-bottom: 12px;
}
.premium-feature-card h3 { margin: 0 0 6px; font-size: 14.5px; }
.premium-feature-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }

.btn-premium {
    display: inline-block; background: linear-gradient(135deg, #FFEB80, #FFD700 55%, #f5b400);
    color: #1a1a0a !important; font-weight: 800; padding: 14px 34px; border-radius: 999px;
    border: none; cursor: pointer; font-size: 15px; letter-spacing: 0.01em;
    box-shadow: 0 10px 24px -10px rgba(255, 215, 0, 0.6);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-premium:hover { background: #f5b400; text-decoration: none; transform: translateY(-1px); box-shadow: 0 14px 28px -10px rgba(255, 215, 0, 0.7); }

@media (max-width: 640px) {
    .premium-hero { padding: 36px 18px 32px; border-radius: 16px; }
    .premium-hero h1 { font-size: 26px; }
    .premium-hero .price { font-size: 36px; }
    .premium-feature-grid { grid-template-columns: 1fr; }
}
.badge-customizer { display: flex; gap: 16px; align-items: center; margin-top: 10px; }
.badge-customizer input[type=color] { width: 48px; height: 36px; padding: 2px; border: 1px solid var(--border); background: none; border-radius: 6px; cursor: pointer; }
.badge-customizer input[type=text] { flex: 1; }
.premium-locked-note { font-size: 12px; color: var(--muted); margin-top: 6px; }
.premium-locked-note a { color: #FFD700; }
.premium-active-until { font-size: 13px; }
.premium-active-until-urgent { color: #ff5a5f; font-weight: 500; }
.premium-cta-row { margin-top: 18px; }
.premium-links-row { text-align: center; }
.flair-picker { flex-wrap: wrap; gap: 8px; }
.flair-option { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; font-size: 18px; background: rgba(255,255,255,0.03); }
.flair-option input[type=radio] { position: absolute; opacity: 0; width: 0; height: 0; }
.flair-option:has(input:checked) { border-color: #FFD700; background: #FFD70022; }
.premium-flair { margin-left: 2px; font-size: 13px; }

/* =====================================================================
   OXUS PREMIUM v2 — siyah/koyu gri/beyaz/kırmızı; altın SADECE rozet
   ve satın alma (plan) kartlarında vurgu olarak kullanılır.
   ===================================================================== */
.prem2-page { padding-top: 24px; }
.prem2-section { max-width: 900px; margin: 0 auto 56px; padding: 0 16px; }
.prem2-section-title { text-align: center; font-size: 22px; margin: 0 0 24px; }

/* --- Hero --- */
.prem2-hero {
    position: relative;
    overflow: hidden;
    max-width: 760px;
    margin: 0 auto 56px;
    padding: 52px 24px 44px;
    text-align: center;
    background: linear-gradient(180deg, var(--panel) 0%, var(--bg) 100%);
    border: 1px solid var(--border);
    border-radius: 20px;
}
.prem2-hero-pattern {
    position: absolute; inset: 0; opacity: 0.06; pointer-events: none;
    background-image:
        radial-gradient(circle at 12% 18%, var(--red) 0, transparent 3%),
        radial-gradient(circle at 88% 12%, var(--red) 0, transparent 3%),
        radial-gradient(circle at 45% 82%, var(--red) 0, transparent 3%),
        radial-gradient(circle at 75% 55%, var(--red) 0, transparent 2.5%),
        radial-gradient(circle at 22% 58%, var(--red) 0, transparent 2.5%),
        radial-gradient(circle at 95% 88%, var(--red) 0, transparent 2.5%),
        linear-gradient(135deg, transparent 48%, var(--red) 49%, var(--red) 50%, transparent 51%);
    background-size: 220px 220px, 220px 220px, 220px 220px, 220px 220px, 220px 220px, 220px 220px, 60px 60px;
}
.prem2-hero-inner { position: relative; }
.prem2-logo { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 20px; background: linear-gradient(150deg, rgba(255,215,0,0.16), rgba(255,215,0,0.03)); border: 1px solid rgba(255,215,0,0.3); color: #FFD700; margin-bottom: 16px; animation: prem2FadeUp 0.5s ease both; }
.prem2-kicker { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; color: var(--muted); margin-bottom: 8px; }
.prem2-title { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 12px; color: var(--text); }
.prem2-desc { color: var(--muted); font-size: 14.5px; max-width: 480px; margin: 0 auto 22px; line-height: 1.65; }
.prem2-status-pill { display: inline-block; padding: 7px 16px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--red); background: rgba(230,57,70,0.1); border: 1px solid rgba(230,57,70,0.3); margin-bottom: 8px; }
.prem2-status-success { color: #4ade80; background: rgba(74,222,128,0.1); border-color: rgba(74,222,128,0.3); }
.prem2-status-note { font-size: 12.5px; color: var(--muted); margin: 8px 0 0; }
.prem2-status-note a { color: #FFD700; }
.prem2-status-urgent { color: var(--red); font-weight: 600; }
.prem2-fine-print { text-align: center; font-size: 12px; margin-top: 20px; }
.prem2-fine-print a { color: #FFD700; }

.prem2-cta {
    display: inline-block; background: var(--red); color: #fff !important; font-weight: 700;
    padding: 14px 32px; border-radius: 999px; border: none; cursor: pointer; font-size: 15px;
    box-shadow: 0 10px 24px -12px rgba(230,57,70,0.7);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.prem2-cta:hover { background: var(--red-dark); text-decoration: none; transform: translateY(-1px) scale(1.015); box-shadow: 0 14px 28px -12px rgba(230,57,70,0.8); }
.prem2-cta:active { transform: scale(0.97); }
#prem2-checkout-form { margin: 0; }

/* --- Avantaj kartları --- */
.prem2-perks-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.prem2-perk-card {
    position: relative;
    background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 20px;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    animation: prem2FadeUp 0.4s ease both;
}
.prem2-perk-card:hover { transform: translateY(-3px); border-color: rgba(230,57,70,0.4); box-shadow: 0 14px 26px -16px rgba(0,0,0,0.6); }
.prem2-perk-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: rgba(230,57,70,0.1); border: 1px solid rgba(230,57,70,0.25); color: var(--red); margin-bottom: 12px; }
.prem2-perk-icon .oxus-ico { width: 17px; height: 17px; }
.prem2-perk-card h3 { margin: 0 0 6px; font-size: 14px; }
.prem2-perk-card p { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.55; }
.prem2-perk-soon { opacity: 0.72; }
.prem2-perk-ribbon { position: absolute; top: 12px; right: 12px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.03em; color: #FFD700; background: rgba(255,215,0,0.1); border: 1px solid rgba(255,215,0,0.3); padding: 2px 8px; border-radius: 999px; }

/* --- Plan kartları (altın vurgu burada serbest) --- */
.prem2-plans-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; }
.prem2-plan-card {
    position: relative;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 26px 16px 22px;
    cursor: pointer; transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.prem2-plan-card input { position: absolute; opacity: 0; width: 0; height: 0; }
.prem2-plan-card:hover:not(.prem2-plan-disabled) { transform: translateY(-3px); border-color: rgba(255,215,0,0.4); }
.prem2-plan-selected { border-color: #FFD700; background: linear-gradient(180deg, rgba(255,215,0,0.06), var(--panel) 60%); transform: scale(1.055); box-shadow: 0 18px 34px -18px rgba(255,215,0,0.35); z-index: 1; }
.prem2-plan-selected:hover { transform: scale(1.07) translateY(-2px); }
.prem2-plan-disabled { cursor: not-allowed; opacity: 0.55; }
.prem2-plan-badge { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; color: #1a1a0a; background: linear-gradient(135deg, #FFEB80, #FFD700 60%); padding: 3px 10px; border-radius: 999px; margin-bottom: 10px; }
.prem2-plan-badge-soon { color: var(--muted); background: var(--panel-2); }
.prem2-plan-name { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.prem2-plan-price { font-size: 26px; font-weight: 800; color: #FFD700; margin-bottom: 2px; }
.prem2-plan-disabled .prem2-plan-price { color: var(--muted); }
.prem2-plan-note { font-size: 11.5px; color: var(--muted); }
.prem2-plan-trial { font-size: 11px; color: var(--red); font-weight: 600; margin-top: 6px; }
.prem2-checkout-row { text-align: center; }

/* --- SSS --- */
.prem2-faq-list { max-width: 700px; margin: 0 auto; }
.prem2-faq-item { border-bottom: 1px solid var(--border); }
.prem2-faq-question { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 16px 4px; cursor: pointer; font-size: 14px; font-weight: 600; }
.prem2-faq-chevron { display: inline-flex; width: 16px; height: 16px; color: var(--muted); transition: transform 0.22s ease; flex-shrink: 0; margin-left: 12px; }
.prem2-faq-question[aria-expanded="true"] .prem2-faq-chevron { transform: rotate(180deg); color: var(--red); }
.prem2-faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; }
.prem2-faq-answer p { margin: 0 4px 16px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.prem2-bottom-links { margin-top: -20px; margin-bottom: 40px; }

@keyframes prem2FadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.prem2-reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; }
.prem2-reveal.prem2-revealed { opacity: 1; transform: translateY(0); }

@media (max-width: 760px) {
    .prem2-perks-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .prem2-hero { padding: 40px 18px 34px; border-radius: 16px; }
    .prem2-title { font-size: 27px; }
    .prem2-plans-grid { grid-template-columns: 1fr; }
    .prem2-plan-selected { transform: none; }
    .prem2-plan-selected:hover { transform: translateY(-2px); }
    .prem2-perks-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .prem2-perk-card, .prem2-logo, .prem2-reveal { animation: none; transition: none; }
}
.legal-page h3 { margin-top: 28px; margin-bottom: 8px; font-size: 16px; }
.legal-page ul { margin: 0 0 12px 20px; color: var(--muted); font-size: 14px; }
.legal-page p { color: var(--muted); font-size: 14px; line-height: 1.6; }
.legal-page a { color: #FFD700; }

/* =====================================================================
   KLANLAR — hero
   ===================================================================== */
.clans-hero {
    position: relative;
    overflow: hidden;
    padding: 56px 16px 40px;
    text-align: center;
    background: linear-gradient(180deg, var(--panel) 0%, var(--bg) 100%);
    border-bottom: 1px solid var(--border);
}
.clans-hero-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.05;
    background-image:
        radial-gradient(circle at 15% 20%, var(--red) 0, transparent 3%),
        radial-gradient(circle at 85% 15%, var(--red) 0, transparent 3%),
        radial-gradient(circle at 40% 80%, var(--red) 0, transparent 3%),
        radial-gradient(circle at 70% 60%, var(--red) 0, transparent 3%),
        radial-gradient(circle at 25% 55%, var(--red) 0, transparent 2.5%),
        radial-gradient(circle at 92% 85%, var(--red) 0, transparent 2.5%);
    background-size: 240px 240px;
    pointer-events: none;
}
.clans-hero-inner { position: relative; max-width: 640px; margin: 0 auto; }
.clans-hero-title { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 32px; margin: 10px 0 8px; }
.clans-hero-icon.oxus-ico { width: 26px; height: 26px; color: var(--red); }
.clans-hero-sub { color: var(--muted); font-size: 14px; max-width: 460px; margin: 0 auto 22px; line-height: 1.6; }
.clans-hero-cta { display: inline-flex; align-items: center; gap: 6px; width: auto; padding: 12px 26px; animation: clanFadeUp 0.5s ease both; }
.clans-hero-cta-locked { display: inline-flex; align-items: center; gap: 5px; }
.clans-hero-cta-locked svg { width: 13px; height: 13px; }

/* =====================================================================
   KLANLAR — toolbar (count + sort)
   ===================================================================== */
.clans-toolbar { max-width: 900px; margin: 24px auto 18px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.clans-toolbar-count { color: var(--muted); font-size: 13px; }
.clans-sort-toggle { display: inline-flex; background: var(--panel); border: 1px solid var(--border); border-radius: 999px; padding: 3px; gap: 2px; }
.clans-sort-toggle a { padding: 6px 14px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--muted); transition: background 0.18s ease, color 0.18s ease; }
.clans-sort-toggle a.active { background: var(--red); color: #fff; }
.clans-sort-toggle a:hover:not(.active) { color: var(--text); text-decoration: none; }

.clans-empty-state { text-align: center; padding: 60px 16px; }
.clans-empty-icon { width: 40px; height: 40px; color: var(--border); margin-bottom: 12px; }
.clans-empty-note { text-align: center; }

/* =====================================================================
   KLANLAR — kart ızgarası
   ===================================================================== */
.clan-grid { max-width: 900px; margin: 0 auto 60px; padding: 0 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 16px; }
.clan-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
    animation: clanCardFadeIn 0.45s ease both;
}
.clan-card:hover {
    transform: translateY(-4px) scale(1.012);
    border-color: rgba(230,57,70,0.4);
    box-shadow: 0 14px 30px -14px rgba(0,0,0,0.55), 0 0 0 1px rgba(230,57,70,0.08);
    text-decoration: none;
}
.clan-card-banner { position: relative; height: 70px; background-size: cover; background-position: center; background-color: var(--panel-2); }
.clan-card-premium-tag {
    position: absolute; top: 8px; right: 8px;
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.02em;
    padding: 3px 8px; border-radius: 999px;
    background: rgba(10,10,12,0.65); backdrop-filter: blur(4px);
    color: #FFD700; border: 1px solid rgba(255,215,0,0.35);
}
.clan-card-premium-tag .oxus-ico { width: 10px; height: 10px; }
.clan-card-body { padding: 14px; display: flex; gap: 10px; align-items: flex-start; }
.clan-card-avatar { width: 44px; height: 44px; border-radius: 10px; background-size: cover; background-position: center; background-color: var(--panel-2); flex-shrink: 0; margin-top: -28px; border: 3px solid var(--panel); transition: border-color 0.22s ease; }
.clan-card:hover .clan-card-avatar { border-color: var(--red-dark); }
.clan-card-info { min-width: 0; }
.clan-card-name { font-weight: 700; font-size: 15px; }
.clan-card-desc { color: var(--muted); font-size: 12px; margin: 2px 0 6px; }
.clan-card-meta { color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.clan-card-meta .oxus-ico { width: 12px; height: 12px; }
.clan-card-meta-dot { opacity: 0.5; }

/* =====================================================================
   KLAN SAYFASI
   ===================================================================== */
.clan-banner { height: 160px; background-size: cover; background-position: center; background-color: var(--panel-2); border-radius: 12px 12px 0 0; }
.clan-header { max-width: 760px; margin: 0 auto; padding: 0 16px; }
.clan-header-body { display: flex; gap: 16px; align-items: flex-end; margin-top: -32px; padding: 0 8px; }
.clan-avatar { width: 76px; height: 76px; border-radius: 16px; background-size: cover; background-position: center; background-color: var(--panel-2); border: 4px solid var(--bg); }
.clan-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.clan-title { margin: 0; font-size: 22px; }
.clan-header-info { flex: 1; min-width: 0; }
.clan-header-action { flex-shrink: 0; }
.clan-header-form { margin: 0; }
.btn-inline { width: auto; display: inline-block; }

.clan-premium-pill {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
    background: rgba(255,215,0,0.1); color: #FFD700; border: 1px solid rgba(255,215,0,0.3);
}
.clan-premium-pill .oxus-ico { width: 11px; height: 11px; }

.clan-role-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: rgba(230,57,70,0.15); color: var(--red); }
.clan-role-icon.oxus-ico { width: 11px; height: 11px; }
.clan-role-owner { background: rgba(255,215,0,0.12); color: #FFD700; }
.clan-role-coowner { background: rgba(255,215,0,0.08); color: #e6c34d; }
.clan-role-admin { background: rgba(230,57,70,0.15); color: var(--red); }
.clan-role-moderator { background: rgba(148,163,184,0.15); color: #94a3b8; }

.clan-stats-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }
.clan-stat { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 13px; }
.clan-stat .oxus-ico { width: 13px; height: 13px; }

.clan-description { margin: 20px 0; line-height: 1.6; }

/* Klan sayfası sekmeleri (Hakkında / Üyeler) */
.clan-tabs { display: flex; gap: 4px; margin-top: 28px; border-bottom: 1px solid var(--border); }
.clan-tab {
    display: inline-flex; align-items: center; gap: 6px;
    background: none; border: none; color: var(--muted);
    font-size: 13px; font-weight: 600; padding: 10px 14px;
    cursor: pointer; border-bottom: 2px solid transparent;
    transition: color 0.18s ease, border-color 0.18s ease;
}
.clan-tab .oxus-ico { width: 14px; height: 14px; }
.clan-tab:hover { color: var(--text); }
.clan-tab.active { color: var(--text); border-bottom-color: var(--red); }
.clan-tab-panel { padding-top: 4px; }
.clan-tab-panel-fade { animation: clanFadeUp 0.28s ease both; }

.clan-member-list { display: flex; flex-direction: column; }
.clan-member-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); animation: clanFadeUp 0.32s ease both; transition: opacity 0.2s ease, transform 0.2s ease; }
.clan-member-row-removing { opacity: 0; transform: translateX(6px); }
.clan-member-avatar { width: 36px; height: 36px; border-radius: 50%; background-size: cover; background-position: center; background-color: var(--panel-2); }
.clan-member-info { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Katıl / Ayrıl butonu */
.clan-join-toggle-btn {
    width: auto; display: inline-flex; align-items: center; gap: 6px;
    transition: transform 0.16s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.clan-join-toggle-btn.is-member { background: var(--panel-2); border: 1px solid var(--border); color: var(--text); }
.clan-invite-landing { text-align: center; max-width: 420px; margin: 40px auto; }
.clan-invite-landing h2 { margin-top: 0; }
.clan-locked-note { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
.clan-locked-note svg { width: 13px; height: 13px; }
.clan-join-pending-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; }
.clan-join-pending-pill .oxus-ico { width: 12px; height: 12px; }
.clan-apply-toggle-btn { width: auto; }
.clan-apply-form { max-width: 760px; margin: 14px auto 0; padding: 14px 16px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; animation: clanFadeUp 0.22s ease both; }
.clan-apply-form label { font-size: 13px; }

/* Davetler / davet listesi */
.clan-invite-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.clan-invite-code { font-family: monospace; font-size: 13px; background: var(--panel-2); padding: 3px 8px; border-radius: 6px; }
.clan-invite-meta { color: var(--muted); font-size: 11.5px; }
.clan-invite-qr { width: 96px; height: 96px; border-radius: 8px; border: 1px solid var(--border); background: #fff; }

/* Yetki matrisi */
.clan-perm-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.clan-perm-table th, .clan-perm-table td { padding: 8px 6px; border-bottom: 1px solid var(--border); text-align: center; }
.clan-perm-table th:first-child, .clan-perm-table td:first-child { text-align: left; color: var(--muted); }
.clan-perm-toggle { width: 34px; height: 20px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--border); position: relative; cursor: pointer; display: inline-block; transition: background 0.18s ease; }
.clan-perm-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--muted); transition: transform 0.18s ease, background 0.18s ease; }
.clan-perm-toggle.on { background: rgba(230,57,70,0.25); border-color: var(--red); }
.clan-perm-toggle.on::after { transform: translateX(14px); background: var(--red); }

/* Başvurular / Üye Susturma-Yasaklama listeleri (manage) */
.clan-request-row, .clan-ban-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.clan-request-answer { font-size: 12px; color: var(--muted); margin-top: 3px; }
.clan-mute-badge { font-size: 10px; color: #94a3b8; }
.clan-join-toggle-btn.is-loading { opacity: 0.6; pointer-events: none; }
.clan-join-btn-pop { transform: scale(0.94); }

.clans-cta-wrap { text-align: center; margin-top: -16px; margin-bottom: 24px; }
.clans-cta-wrap .premium-locked-note { display: inline-flex; align-items: center; gap: 5px; }
.clans-cta-wrap .premium-locked-note svg { width: 13px; height: 13px; }
.clan-card-link { text-decoration: none; color: inherit; }
.clan-not-found-msg { padding: 0; }
.clan-not-found-back { margin: 10px 0 0; }

/* =====================================================================
   YENİ KLAN / KLAN AYARLARI — form yardımcıları
   ===================================================================== */
.new-clan-wrap, .clan-manage-wrap { max-width: 640px; }
.new-clan-panel { animation: clanFadeUp 0.35s ease both; }
.field-counter { text-align: right; font-size: 11px; color: var(--muted); margin-top: -10px; margin-bottom: 4px; }
.new-clan-submit { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; }
.panel-heading-flush { margin-top: 0; }
.btn-xs { width: auto; padding: 6px 12px; font-size: 12px; }

/* Klan yönetim sekmeleri */
.clan-manage-tabs { display: flex; gap: 4px; margin: 20px 0 18px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.clan-manage-tab {
    display: inline-flex; align-items: center; gap: 6px;
    background: none; border: none; color: var(--muted);
    font-size: 13px; font-weight: 600; padding: 10px 14px;
    cursor: pointer; border-bottom: 2px solid transparent;
    transition: color 0.18s ease, border-color 0.18s ease;
}
.clan-manage-tab .oxus-ico { width: 14px; height: 14px; }
.clan-manage-tab:hover { color: var(--text); }
.clan-manage-tab.active { color: var(--text); border-bottom-color: var(--red); }
.clan-manage-tab-danger.active { border-bottom-color: var(--red); color: var(--red); }
.clan-manage-panel { animation: clanFadeUp 0.28s ease both; }

.clan-member-manage-row { justify-content: space-between; }
.clan-member-manage-actions { display: flex; gap: 6px; flex-shrink: 0; }

.clan-danger-panel { border-color: rgba(230,57,70,0.3); }
.clan-danger-heading { color: var(--red); }
.clan-danger-note { font-size: 13px; margin-bottom: 16px; }
.clan-delete-form { margin: 0; }
.clan-delete-trigger { width: auto; border-color: var(--red); color: var(--red); }
.clan-delete-trigger:hover { background: rgba(230,57,70,0.1); }
.clan-delete-confirm-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--muted); animation: clanFadeUp 0.22s ease both; }
.clan-delete-confirm-btn { width: auto; background: var(--red); color: #fff; border: none; }
.clan-delete-confirm-btn:hover { background: var(--red-dark); }

/* =====================================================================
   MİKRO ANİMASYONLAR (hover / fade / slide / glow / scale — abartısız)
   ===================================================================== */
/* =====================================================================
   KLAN SOHBETİ
   ===================================================================== */
.clan-chat-panel { display: flex; flex-direction: column; height: 520px; max-height: 70vh; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--panel); }
.clan-chat-toolbar { display: flex; flex-direction: column; border-bottom: 1px solid var(--border); }
.clan-chat-search-toggle { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; font-size: 12px; color: var(--muted); }
.clan-chat-search-toggle:hover { color: var(--text); }
.clan-chat-search-toggle .oxus-ico { width: 13px; height: 13px; }
.clan-chat-search-box { padding: 0 12px 10px; animation: clanFadeUp 0.2s ease both; }
.clan-chat-search-box input { margin: 0; font-size: 13px; }

.clan-chat-pinned { background: rgba(255,215,0,0.06); border-bottom: 1px solid rgba(255,215,0,0.2); max-height: 90px; overflow-y: auto; padding: 6px 12px; }
.clan-chat-pinned-item { font-size: 12px; color: var(--muted); padding: 3px 0; }
.clan-chat-pinned-item b { color: var(--text); }

.clan-chat-messages { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.clan-chat-empty { text-align: center; padding: 30px 10px; }
.clan-chat-msg { display: flex; gap: 8px; animation: clanFadeUp 0.2s ease both; transition: opacity 0.2s ease; position: relative; }
.clan-chat-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--panel-2) center/cover no-repeat; flex-shrink: 0; }
.clan-chat-body { min-width: 0; font-size: 13px; line-height: 1.4; background: var(--panel-2); border-radius: 10px; padding: 7px 10px; max-width: 78%; }
.clan-chat-msg-mine .clan-chat-body { background: rgba(230,57,70,0.14); }
.clan-chat-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.clan-chat-name { font-weight: 700; font-size: 12px; }
.clan-chat-time { color: var(--muted); font-size: 10.5px; }
.clan-chat-pin-badge { font-size: 10px; color: #FFD700; }
.clan-chat-text { color: var(--text); word-wrap: break-word; }
.clan-chat-reply-quote { font-size: 11px; color: var(--muted); border-left: 2px solid var(--red); padding-left: 6px; margin-bottom: 4px; }
.clan-chat-track-share { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; margin-top: 4px; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 5px 9px; }
.clan-chat-track-share .oxus-ico { width: 13px; height: 13px; color: var(--red); }

.clan-chat-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.clan-chat-reaction-chip { all: unset; cursor: pointer; font-size: 11px; padding: 2px 7px; border-radius: 999px; background: var(--panel); border: 1px solid var(--border); }
.clan-chat-reaction-chip.active { border-color: var(--red); background: rgba(230,57,70,0.14); }
.clan-chat-reaction-chip:hover { border-color: var(--red); }

.clan-chat-msg-actions { position: absolute; top: -10px; right: 0; display: none; gap: 2px; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 2px; }
.clan-chat-msg:hover .clan-chat-msg-actions { display: flex; }
.clan-chat-action-btn { all: unset; cursor: pointer; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 12px; border-radius: 5px; }
.clan-chat-action-btn:hover { background: var(--panel-2); }
.clan-chat-emoji-picker { position: absolute; top: -40px; right: 0; display: flex; gap: 3px; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 4px; z-index: 2; animation: clanFadeUp 0.15s ease both; }
.clan-chat-emoji-pick { all: unset; cursor: pointer; font-size: 15px; padding: 2px 4px; border-radius: 5px; }
.clan-chat-emoji-pick:hover { background: var(--panel-2); transform: scale(1.15); }

.clan-chat-reply-preview { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 12px; font-size: 11.5px; color: var(--muted); border-top: 1px solid var(--border); background: var(--panel-2); }
.clan-chat-reply-preview button { all: unset; cursor: pointer; color: var(--muted); padding: 2px 6px; }
.clan-chat-reply-preview button:hover { color: var(--red); }

.clan-chat-form { display: flex; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--border); align-items: center; }
.clan-chat-form input[type=text] { flex: 1; margin: 0; font-size: 13px; }
.clan-chat-form button[type=submit] { all: unset; cursor: pointer; width: 34px; height: 34px; border-radius: 50%; background: var(--red); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform 0.15s ease; }
.clan-chat-form button[type=submit] .oxus-ico { width: 15px; height: 15px; color: #fff; }
.clan-chat-form button[type=submit]:active { transform: scale(0.9); }

.clan-chat-attach-btn { all: unset; cursor: pointer; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--muted); transition: background 0.15s ease, color 0.15s ease; }
.clan-chat-attach-btn:hover { background: var(--panel-2); color: var(--text); }
.clan-chat-attach-btn .oxus-ico { width: 16px; height: 16px; }
.clan-chat-attach-btn.recording { color: var(--red); background: rgba(230,57,70,0.15); animation: clanRecordPulse 1.1s ease-in-out infinite; }
#clan-chat-image-input, #clan-chat-video-input { display: none !important; }

/* Bu bileşenlerin kendi display kuralları var (flex/grid), bu yüzden
   tarayıcının varsayılan [hidden] davranışı bazı durumlarda ezilebiliyor
   (yazar stil sayfası, UA stilinden her zaman önceliklidir). JS'in
   `el.hidden = true` ile gizlediği her şeyin gerçekten gizlenmesini
   garanti altına alıyoruz. */
.clan-chat-reply-preview[hidden],
.clan-chat-pinned[hidden],
.clan-chat-search-box[hidden],
.clan-chat-empty[hidden],
.clan-tab-panel[hidden],
.clan-manage-panel[hidden],
.clan-delete-confirm-row[hidden],
.clan-apply-form[hidden] { display: none !important; }
@keyframes clanRecordPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(230,57,70,0.35); } 50% { box-shadow: 0 0 0 6px rgba(230,57,70,0); } }

.clan-chat-upload-progress { padding: 4px 12px; font-size: 11.5px; color: var(--muted); border-top: 1px dashed var(--border); }

.clan-chat-img { max-width: 220px; max-height: 220px; border-radius: 8px; margin-top: 4px; display: block; cursor: zoom-in; }
.clan-chat-video { max-width: 240px; max-height: 240px; border-radius: 8px; margin-top: 4px; display: block; background: #000; }
.clan-chat-voice { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.clan-chat-voice audio { height: 32px; max-width: 200px; }
.clan-chat-voice-dur { font-size: 11px; color: var(--muted); }

.clan-chat-search-result { border-top: 1px dashed var(--border); margin-top: 8px; padding-top: 8px; }

@media (max-width: 640px) {
    .clan-chat-panel { height: 62vh; max-height: none; border-radius: 0; margin: 0 -14px; }
    .clan-chat-body { max-width: 86%; }
    .clan-chat-msg-actions { position: static; display: flex; margin-top: 4px; background: none; border: none; padding: 0; }
}

/* Klan mikro-animasyon keyframe'leri (yukarıdaki tüm .clan-* kurallar bunları kullanır) */
@keyframes clanFadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes clanCardFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
    .clan-card, .clan-member-row, .clan-tab-panel-fade, .clans-hero-cta, .new-clan-panel,
    .clan-manage-panel, .clan-chat-msg, .clan-chat-search-box, .clan-chat-emoji-picker,
    .clan-delete-confirm-row { animation: none; }
    .clan-card:hover { transform: none; }
}

/* =====================================================================
   MOBİL OPTİMİZASYON
   ===================================================================== */

/* Hamburger buton — masaüstünde gizli */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 36px;
    height: 36px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
}
.nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 40;
}

/* Mobile-only elements (bottom tab bar, drawer, quick icons in the
   topbar) are hidden by default and switched on inside the ≤768px
   media query below, so desktop is completely unaffected. */
.mobile-topbar-actions { display: none; }
.bottom-nav { display: none; }
.more-drawer, .more-backdrop { display: none; }

@media (max-width: 768px) {
    html, body { overflow-x: hidden; overscroll-behavior-x: none; }

    /* The old build let people drag a horizontally-scrolling tab strip
       that lived inside the page flow — on some browsers that scroll
       leaked into the page itself and the whole layout would slide
       sideways. It's replaced below with an Instagram-style fixed
       bottom tab bar (its own isolated, non-scrolling strip) plus a
       slide-in "more" drawer for secondary links, both position:fixed
       so they can never drag the page with them. */
    nav.topbar .inner {
        padding: 12px 16px;
        position: relative;
        flex-wrap: nowrap;
    }
    nav.topbar .logo { padding: 0; }

    .nav-toggle, .nav-backdrop { display: none !important; }
    nav.topbar .links { display: none !important; }

    .mobile-topbar-actions {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-left: auto;
    }
    .icon-btn {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        padding: 0;
        margin: 0;
        background: none;
        border: none;
        color: var(--text);
        cursor: pointer;
        border-radius: 50%;
    }
    .icon-btn:hover { background: var(--panel-2); }
    .nav-badge-dot {
        position: absolute;
        top: 2px;
        right: 2px;
        min-width: 15px;
        height: 15px;
        padding: 0 3px;
        border-radius: 999px;
        background: var(--red);
        color: #fff;
        font-size: 9px;
        font-weight: 700;
        line-height: 15px;
        text-align: center;
    }

    /* Bottom tab bar — fixed, isolated from document flow so it is the
       only thing that can ever "slide"; the page behind it keeps its
       normal, single-direction vertical scroll. */
    .bottom-nav {
        display: flex;
        align-items: center;
        justify-content: space-around;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 50;
        height: 58px;
        padding-bottom: env(safe-area-inset-bottom, 0);
        background: var(--panel);
        border-top: 1px solid var(--border);
    }
    .bn-item {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1;
        height: 100%;
        color: var(--muted);
        position: relative;
    }
    .bn-item:hover { text-decoration: none; }
    .bn-item.active { color: var(--text); }
    .bn-item.bn-accent { color: #fff; }
    .bn-item.bn-accent svg {
        background: var(--red);
        border-radius: 8px;
        padding: 4px;
        box-sizing: content-box;
    }
    .bn-item.bn-accent.active svg,
    .bn-item.bn-accent:hover svg { background: var(--red-dark); }
    .bn-dot {
        position: absolute;
        top: 8px;
        right: calc(50% - 16px);
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--red);
        border: 2px solid var(--panel);
    }
    .bn-avatar-img {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background-size: cover;
        background-position: center;
        background-color: var(--panel-2);
        border: 1.5px solid transparent;
    }
    .bn-item.bn-avatar.active .bn-avatar-img { border-color: var(--text); }

    /* Body needs room so page content never sits under the fixed bar. */
    body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0)); }

    /* "More" drawer — slides in from the right over everything else.
       It's position:fixed and translated on its own transform, so
       opening it never resizes or shifts the page underneath. */
    .more-drawer {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 78%;
        max-width: 320px;
        background: var(--panel);
        border-left: 1px solid var(--border);
        z-index: 101;
        transform: translateX(100%);
        transition: transform 0.25s ease;
        overflow-y: auto;
    }
    .more-drawer.open { transform: translateX(0); }
    .more-drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px;
        border-bottom: 1px solid var(--border);
        font-weight: 700;
        font-size: 15px;
        flex-shrink: 0;
    }
    .more-drawer-links { display: flex; flex-direction: column; padding: 8px; gap: 2px; }
    .more-drawer-links a {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 13px 12px;
        border-radius: 8px;
        color: var(--text);
        font-size: 14px;
    }
    .more-drawer-links a:hover { background: var(--panel-2); text-decoration: none; }
    .more-drawer-links .nav-badge { position: static; margin-left: auto; }
    .more-drawer-links .premium-nav-cta { color: #FFD700; font-weight: 700; }
    .more-drawer-links .more-logout { color: var(--red); margin-top: 6px; border-top: 1px solid var(--border); border-radius: 0; padding-top: 16px; }
    .more-drawer-links .lang-switch {
        display: flex;
        gap: 6px;
        border-left: none;
        border-top: 1px solid var(--border);
        margin: 6px 0 0;
        padding: 12px 12px 4px;
    }
    .more-drawer-links .lang-switch a { padding: 6px 10px; background: var(--panel-2); border-radius: 999px; }
    .more-drawer-links .lang-switch a.active { color: var(--red); }

    .more-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 100;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }
    .more-backdrop.open { opacity: 1; pointer-events: auto; }

    body.drawer-open { overflow: hidden; }

    .message-form {
        position: sticky;
        bottom: calc(58px + env(safe-area-inset-bottom, 0));
        background: var(--bg);
        z-index: 10;
    }
}

@media (max-width: 640px) {
    .wrap { padding: 24px 14px; }
    h1 { font-size: 19px; }
    .panel { padding: 18px; }

    .page-head { padding: 22px 14px 0; flex-direction: column; align-items: flex-start; gap: 8px; }
    .composer, .feed, .thread-list, .category-list, .battle-list,
    .convo-list, .thread-view, .battle-view, .message-thread,
    .notes-tray, .note-editor, .clan-grid, .explore-grid,
    .story-bar-wrap { padding-left: 14px; padding-right: 14px; }

    .profile-header { margin-top: -44px; gap: 12px; }
    .profile-avatar-wrap { width: 88px; height: 88px; }
    .profile-body { margin: 18px auto; padding: 0 14px; }
    .stats-dashboard { grid-template-columns: repeat(3, 1fr); }
    .stats-dashboard .stat-card b { font-size: 16px; }
    .profile-display-name { font-size: 17px; }
    .profile-actions { width: 100%; padding-bottom: 0; margin-top: 4px; }
    .profile-actions .btn, .profile-actions button { width: 100%; }

    .card { padding: 14px; }
    .card-avatar { width: 36px; height: 36px; }

    .category-row, .thread-row, .battle-row { flex-wrap: wrap; gap: 6px; padding: 14px; }
    .convo-row { padding: 10px 12px; }
    .convo-preview { max-width: 52vw; }

    .vs-grid { grid-template-columns: 1fr; gap: 10px; }
    .vs-mid { padding: 4px 0; }

    .clan-grid { grid-template-columns: 1fr; }
    .clan-header-body { flex-wrap: wrap; }
    .clan-header-action { width: 100%; }
    .clan-header-action .btn, .clan-header-action .clan-join-toggle-btn { width: 100%; justify-content: center; }
    .clans-hero { padding: 40px 14px 30px; }
    .clans-hero-title { font-size: 24px; }
    .clans-toolbar { flex-direction: column; align-items: flex-start; }
    .clan-tabs, .clan-manage-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
    .clan-tab, .clan-manage-tab { white-space: nowrap; padding: 10px 12px; }
    .clan-member-manage-row { flex-wrap: wrap; }
    .clan-member-manage-actions { width: 100%; margin-top: 6px; }
    .clan-member-manage-actions .btn-xs { flex: 1; }
    .clan-delete-confirm-row { flex-direction: column; align-items: flex-start; }
    .clan-delete-confirm-btn, #clan-delete-cancel { width: 100%; }

    .media-grid, .explore-grid { gap: 3px; }

    .msg-bubble { max-width: 85%; }
    .story-canvas { max-width: 300px; }

    button, .btn { padding: 11px; font-size: 14px; }
}

@media (max-width: 400px) {
    .badge, .user-tag, .premium-badge { font-size: 10px; padding: 2px 6px; }
    .profile-name-row { gap: 6px; }
    .stat-row { gap: 14px; }
    .artist-highlight-row { flex-wrap: wrap; }
    .story-bubble { width: 56px; height: 56px; }
    .story-bubble-wrap { width: 60px; }
}
/* =====================================================================
   OXUS PLAYER — custom waveform audio player
   ===================================================================== */
.oxus-player {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(155deg, #17171b, #0f0f12);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px;
    margin: 10px 0;
    position: relative;
    overflow: hidden;
}
.oxus-player::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(120px 80px at 0% 0%, rgba(230,57,70,0.14), transparent 70%);
    pointer-events: none;
}
.oxus-player-cover {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    background: var(--panel-2) center/cover no-repeat;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.oxus-player-cover-fallback { width: 22px; height: 22px; color: var(--muted); opacity: 0.8; }
.oxus-player-cover-fallback svg { width: 100%; height: 100%; }

.oxus-player-toggle {
    all: unset;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--red);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(230,57,70,0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    position: relative;
    margin: 0;
}
.oxus-player-toggle:hover { transform: scale(1.06); }
.oxus-player-toggle:active { transform: scale(0.96); }
.oxus-player-toggle:disabled { background: var(--panel-2); box-shadow: none; cursor: not-allowed; }
.oxus-player-toggle .oxus-icon { width: 18px; height: 18px; display: block; }
.oxus-player-toggle .oxus-icon svg { width: 100%; height: 100%; }
.oxus-icon-play svg { margin-left: 2px; }
.oxus-player-spinner {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.35);
    border-top-color: #fff;
    animation: oxus-spin 0.7s linear infinite;
}
@keyframes oxus-spin { to { transform: rotate(360deg); } }

.oxus-player-body { flex: 1; min-width: 0; position: relative; z-index: 1; }
.oxus-player-meta { display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; overflow: hidden; }
.oxus-player-title { font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oxus-player-artist { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.oxus-player-wave {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 22px;
    margin-bottom: 6px;
    opacity: 0.85;
}
.oxus-bar {
    flex: 1;
    min-width: 1px;
    max-width: 3px;
    height: calc(var(--h, 0.4) * 100%);
    background: linear-gradient(180deg, var(--red), var(--red-dark));
    border-radius: 2px;
    opacity: 0.35;
    transform: scaleY(0.5);
    transform-origin: bottom;
    transition: opacity 0.2s ease;
}
.oxus-player.is-playing .oxus-bar {
    opacity: 1;
    animation: oxus-bar-bounce 1.1s ease-in-out infinite;
    animation-delay: var(--d, 0s);
}
@keyframes oxus-bar-bounce {
    0%, 100% { transform: scaleY(var(--h, 0.4)); }
    50% { transform: scaleY(calc(var(--h, 0.4) * 0.35 + 0.15)); }
}

.oxus-player-scrub { }
.oxus-player-progress {
    position: relative;
    height: 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
    cursor: pointer;
    touch-action: none;
}
.oxus-player-progress-buffered {
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 0%; background: rgba(255,255,255,0.12); border-radius: 3px;
}
.oxus-player-progress-fill {
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 0%; background: var(--red); border-radius: 3px;
}
.oxus-player-progress-handle {
    position: absolute; top: 50%; left: 0%;
    width: 12px; height: 12px; margin-left: -6px; margin-top: -6px;
    background: #fff; border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
    opacity: 0; transition: opacity 0.15s ease;
}
.oxus-player-progress:hover .oxus-player-progress-handle { opacity: 1; }
.oxus-player-time { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--muted); margin-top: 4px; }

.oxus-player-error {
    display: flex; align-items: center; gap: 8px;
    color: var(--muted); font-size: 12.5px; padding: 4px 0;
}
.oxus-player-error svg { width: 16px; height: 16px; color: var(--red); flex-shrink: 0; }
.oxus-player.has-error { opacity: 0.85; }

.oxus-player-volume {
    all: unset; width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--muted); cursor: pointer; flex-shrink: 0; position: relative; z-index: 1;
}
.oxus-player-volume:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.oxus-player-volume .oxus-icon { width: 17px; height: 17px; }
.oxus-player-volume .oxus-icon svg { width: 100%; height: 100%; }

/* Compact variant — used in list cards (tracks.php feed list, attached
   track on a post) where space is tighter. */
.oxus-player-compact { padding: 9px; gap: 10px; border-radius: 12px; }
.oxus-player-compact .oxus-player-cover { width: 40px; height: 40px; border-radius: 8px; }
.oxus-player-compact .oxus-player-toggle { width: 34px; height: 34px; }
.oxus-player-compact .oxus-player-toggle .oxus-icon { width: 14px; height: 14px; }
.oxus-player-compact .oxus-player-wave { height: 16px; }
.oxus-player-compact .oxus-player-volume { display: none; }

/* Used where the track title is already shown by the surrounding card
   (e.g. the tracks list), so the player itself doesn't repeat it. */
.oxus-player-no-meta .oxus-player-meta { display: none; }

@media (max-width: 480px) {
    .oxus-player-wave { display: none; }
}

/* =====================================================================
   PROFESSIONAL UPLOAD DROPZONES
   ===================================================================== */
.oxus-dropzone {
    position: relative;
    border: 1.5px dashed var(--border);
    border-radius: 12px;
    background: var(--panel-2);
    padding: 22px 16px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.oxus-dropzone:hover, .oxus-dropzone.is-dragover {
    border-color: var(--red);
    background: rgba(230,57,70,0.06);
}
.oxus-dropzone input[type=file] {
    position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; padding: 0;
}
.oxus-dropzone-icon {
    width: 34px; height: 34px; margin: 0 auto 8px; color: var(--muted);
}
.oxus-dropzone-icon svg { width: 100%; height: 100%; }
.oxus-dropzone-title { font-size: 13.5px; font-weight: 600; color: var(--text); }
.oxus-dropzone-hint { font-size: 12px; color: var(--muted); margin-top: 3px; }
.oxus-dropzone.has-file { border-style: solid; border-color: var(--green); background: rgba(61,220,132,0.06); }

.oxus-file-preview {
    display: none;
    align-items: center;
    gap: 10px;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    margin-top: 8px;
}
.oxus-file-preview.show { display: flex; }
.oxus-file-preview-thumb {
    width: 40px; height: 40px; border-radius: 8px; flex-shrink: 0;
    background: var(--panel) center/cover no-repeat;
    display: flex; align-items: center; justify-content: center; color: var(--red);
}
.oxus-file-preview-thumb svg { width: 20px; height: 20px; }
.oxus-file-preview-info { flex: 1; min-width: 0; }
.oxus-file-preview-name { font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oxus-file-preview-size { font-size: 11px; color: var(--muted); }
.oxus-file-preview-remove {
    all: unset; width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--muted); cursor: pointer; flex-shrink: 0;
}
.oxus-file-preview-remove:hover { background: rgba(230,57,70,0.15); color: var(--red); }
.oxus-file-preview-remove svg { width: 15px; height: 15px; }

.oxus-field-group { margin-bottom: 4px; }

/* Base size for every inline oxus-ico SVG icon — without this, any icon
   used outside .card-actions/.kaykay-action (profile post lists, hashtag
   pages, explore tiles, etc.) falls back to the browser's default SVG
   intrinsic size and either disappears or renders far too large. More
   specific selectors below still win via specificity where a different
   size is wanted. */
.oxus-ico { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; flex-shrink: 0; vertical-align: -2px; }
.oxus-ico svg { width: 100%; height: 100%; display: block; }

/* =====================================================================
   PROFESSIONAL INTERACTION BUTTONS (feed cards + kaykay)
   ===================================================================== */
.card-actions { align-items: center; }
.card-actions button, .card-actions a, .card-actions span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    background: transparent;
    transition: background 0.15s ease, color 0.15s ease;
}
.card-actions button:hover, .card-actions a:hover { background: rgba(255,255,255,0.06); text-decoration: none; }
.card-actions .oxus-ico { width: 17px; height: 17px; flex-shrink: 0; }
.card-actions .oxus-ico svg { width: 100%; height: 100%; display: block; }
.card-actions .liked .oxus-ico { color: var(--red); }
.card-actions .liked .oxus-ico svg path { fill: var(--red); }
.card-actions .reposted { color: var(--green); }
.card-actions .reposted .oxus-ico svg path { fill: var(--green); }

.kaykay-action { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.kaykay-action .oxus-ico { width: 22px; height: 22px; }
.kaykay-action .oxus-ico svg { width: 100%; height: 100%; display: block; }
.kaykay-action.active .oxus-ico svg path { fill: var(--red); stroke: var(--red); }
.kaykay-action.kaykay-repost.active .oxus-ico svg path { fill: var(--green); stroke: var(--green); }

/* Attached-track chip used in the feed/story composers once a track has
   been picked from the library. */
.oxus-track-chip {
    display: flex; align-items: center; gap: 10px;
    background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px;
    padding: 8px 10px; margin-top: 8px;
}
.oxus-track-chip-cover { width: 32px; height: 32px; border-radius: 7px; background: var(--panel) center/cover no-repeat; flex-shrink: 0; }
.oxus-track-chip-info { flex: 1; min-width: 0; font-size: 12.5px; }
.oxus-track-chip-title { font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oxus-track-chip-artist { color: var(--muted); font-size: 11px; }
.oxus-track-chip-remove { all: unset; cursor: pointer; color: var(--muted); width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 50%; flex-shrink: 0; }
.oxus-track-chip-remove:hover { background: rgba(230,57,70,0.15); color: var(--red); }
.oxus-track-chip-remove svg { width: 14px; height: 14px; }

.oxus-add-track-btn {
    all: unset; display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; color: var(--muted); cursor: pointer; padding: 8px 0;
}
.oxus-add-track-btn:hover { color: var(--red); }
.oxus-add-track-btn svg { width: 16px; height: 16px; }

/* Track-picker modal (shared by feed composer + story composer) */
.oxus-modal-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,0.6);
    display: none; align-items: flex-end; justify-content: center;
    z-index: 1000;
}
.oxus-modal-backdrop.open { display: flex; }
.oxus-modal {
    background: var(--panel); border: 1px solid var(--border);
    border-radius: 16px 16px 0 0; width: 100%; max-width: 480px;
    max-height: 74vh; display: flex; flex-direction: column;
}
@media (min-width: 640px) {
    .oxus-modal-backdrop { align-items: center; }
    .oxus-modal { border-radius: 16px; max-height: 70vh; }
}
.oxus-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.oxus-modal-head span { font-weight: 700; font-size: 14px; }
.oxus-modal-close { all: unset; cursor: pointer; color: var(--muted); width: 26px; height: 26px; }
.oxus-modal-search { padding: 10px 16px; }
.oxus-modal-search input { margin: 0; }
.oxus-modal-list { overflow-y: auto; padding: 4px 8px 14px; }
.oxus-modal-track-row {
    all: unset; display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 9px 8px; border-radius: 10px; cursor: pointer; box-sizing: border-box;
}
.oxus-modal-track-row:hover { background: rgba(255,255,255,0.06); }
.oxus-modal-track-cover { width: 38px; height: 38px; border-radius: 8px; background: var(--panel-2) center/cover no-repeat; flex-shrink: 0; }
.oxus-modal-track-info { flex: 1; min-width: 0; }
.oxus-modal-track-title { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oxus-modal-track-sub { font-size: 11.5px; color: var(--muted); }
.oxus-modal-empty { padding: 24px 16px; text-align: center; color: var(--muted); font-size: 13px; }

/* Story music badge (shown in the story composer + full story viewer) */
.story-music-badge {
    display: flex; align-items: center; gap: 8px;
    background: rgba(0,0,0,0.55); backdrop-filter: blur(6px);
    border-radius: 999px; padding: 6px 12px 6px 6px; margin-top: 10px; color: #fff;
    max-width: fit-content;
}
.story-music-badge-icon { width: 26px; height: 26px; border-radius: 50%; background: var(--red); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.story-music-badge-icon svg { width: 13px; height: 13px; color: #fff; }
.story-music-badge-text { font-size: 12px; max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.story-viewer-music {
    position: absolute; z-index: 5; cursor: pointer;
    left: 50%; top: 88%;
    transform: translate(-50%, -50%);
}
.story-viewer-music.playing .story-music-badge-icon svg.p { display: block; }
.story-viewer-music.playing .story-music-badge-icon svg.b { display: none; }
.story-viewer-music:not(.playing) .story-music-badge-icon svg.p { display: none; }
.story-viewer-music:not(.playing) .story-music-badge-icon svg.b { display: block; }

/* -----------------------------------------------------------------------
 * Media load-error placeholder
 * -----------------------------------------------------------------------
 * BUG FIX: Bazı yüklenen dosyalar (özellikle telefonlarda kaydedilen ve
 * ziyaretçinin tarayıcısının desteklemediği kodekte olan videolar) bazı
 * cihazlarda görüntülenirken bazılarında görüntülenmiyordu; tarayıcı bu
 * durumda ya boş bir kutu ya da çirkin/kırık dosya ikonu gösteriyordu
 * (bkz. Keşfet sayfası ızgarası). InfinityFree'de sunucu tarafında video
 * dönüştürme (ffmpeg) imkanı olmadığından, her cihazda her videonun
 * oynatılabileceğini garanti edemiyoruz; bunun yerine oynatılamayan
 * dosyayı görünür/anlaşılır ve indirilebilir hale getiriyoruz.
 * (Bkz. assets/js/media-fallback.js)
 * --------------------------------------------------------------------- */
.media-load-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 100%;
    min-height: 90px;
    padding: 12px;
    text-align: center;
    background: var(--panel-2);
    border: 1px dashed var(--border);
    border-radius: 8px;
    color: var(--muted);
    font-size: 12px;
}
.media-load-error-label { display: block; }
.media-load-error a {
    font-size: 12px;
    font-weight: 600;
    color: var(--red);
}

/* ============================================================
   UI polish + stability pass (2026 refresh)
   Additive design tokens + component states. Nothing above this
   block is overridden — this only fills in spacing/radius/shadow/
   motion consistency and the story "not found" fallback UI.
   ============================================================ */
:root {
    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.24);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.32);
    --ease: 220ms cubic-bezier(.2,.7,.3,1);
}

/* Consistent, GPU-friendly interaction states across every button/link
   that behaves like a button, without touching layout-affecting props. */
button, .btn, .card-actions button, .card-actions a {
    transition: transform 200ms ease-out, background-color 200ms ease-out,
                border-color 200ms ease-out, color 200ms ease-out, opacity 200ms ease-out;
}
button:active, .btn:active, .card-actions button:active, .card-actions a:active {
    transform: scale(0.98);
}
button:disabled, .btn:disabled, button.is-loading, .btn.is-loading {
    opacity: 0.6;
    cursor: default;
    transform: none;
    pointer-events: none;
}
.btn, .panel, .card {
    box-shadow: var(--shadow-sm);
}
.card {
    transition: border-color var(--ease);
}
.card:hover {
    border-color: #35353b;
}

/* Story "not found / expired" fallback — replaces hard redirects so a
   stale story link never reads as a broken page. */
.story-unavailable {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3);
}
.story-unavailable-card {
    max-width: 360px;
    width: 100%;
    text-align: center;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-3);
    box-shadow: var(--shadow-md);
}
.story-unavailable-icon {
    font-size: 40px;
    margin-bottom: var(--space-2);
    line-height: 1;
}
.story-unavailable-card h1 {
    font-size: 17px;
    margin: 0 0 6px;
}
.story-unavailable-card p {
    color: var(--muted);
    font-size: 14px;
    margin: 0 0 var(--space-3);
}
.story-unavailable-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.story-unavailable-actions .btn {
    margin-top: 0;
}

/* ---------------------------------------------------------------------
   RADIO (radio.php) — continuous auto-advancing station player.
   Visually related to .oxus-player but its own block since it manages a
   whole queue rather than one independent track.
--------------------------------------------------------------------- */
.radio-wrap { max-width: 680px; margin: 0 auto; padding: 16px; }

.radio-filter {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}
.radio-filter a {
    padding: 7px 14px;
    border: 1px solid var(--border);
    border-radius: 20px;
    font-size: 13px;
    color: var(--muted);
}
.radio-filter a:hover { color: var(--text); text-decoration: none; }
.radio-filter a.active { background: var(--red); border-color: var(--red); color: #fff; }

.radio-player {
    display: flex;
    gap: 16px;
    background: linear-gradient(155deg, #17171b, #0f0f12);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 18px;
    margin-bottom: 22px;
    position: relative;
    overflow: hidden;
}
.radio-player::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(160px 100px at 0% 0%, rgba(230,57,70,0.16), transparent 70%);
    pointer-events: none;
}
.radio-player-cover {
    width: 84px;
    height: 84px;
    border-radius: 12px;
    background: var(--panel-2) center/cover no-repeat;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}
.radio-player-cover-fallback { width: 32px; height: 32px; color: var(--muted); opacity: 0.8; }
.radio-player-cover-fallback svg { width: 100%; height: 100%; }
.radio-player-cover.has-cover .radio-player-cover-fallback { display: none; }

.radio-player-body { flex: 1; min-width: 0; position: relative; z-index: 1; }
.radio-onair {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--red);
    margin-bottom: 4px;
}
.radio-player-title { font-size: 15px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.radio-player-artist { font-size: 13px; color: var(--muted); margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.radio-player-scrub { margin-bottom: 10px; }
.radio-player-progress {
    position: relative;
    height: 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
    cursor: pointer;
}
.radio-player-progress-fill {
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 0%; background: var(--red); border-radius: 3px;
}
.radio-player-time { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--muted); margin-top: 4px; }

.radio-player-controls { display: flex; align-items: center; gap: 10px; }
.radio-player-controls button {
    all: unset;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 50%;
}
.radio-player-controls button:hover { color: var(--text); background: rgba(255,255,255,0.06); }
.radio-player-controls button svg { width: 18px; height: 18px; }
.radio-player-controls .radio-toggle {
    width: 42px;
    height: 42px;
    background: var(--red);
    color: #fff;
    box-shadow: 0 4px 14px rgba(230,57,70,0.35);
}
.radio-player-controls .radio-toggle:hover { background: var(--red-dark); color: #fff; transform: scale(1.05); }
.radio-player-controls .radio-toggle svg { width: 20px; height: 20px; }
#radioShuffle { margin-left: auto; }

.radio-player-error { color: var(--muted); font-size: 12.5px; margin-top: 8px; }

.radio-queue-heading { font-size: 15px; margin: 0 0 10px; color: var(--text); }
.radio-queue { display: flex; flex-direction: column; gap: 6px; max-height: 560px; overflow-y: auto; }
.radio-queue-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 10px;
    border: 1px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.radio-queue-item:hover { background: rgba(255,255,255,0.03); }
.radio-queue-item.is-playing { background: rgba(230,57,70,0.08); border-color: rgba(230,57,70,0.35); }

.radio-queue-cover {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: var(--panel-2) center/cover no-repeat;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
}
.radio-queue-cover svg { width: 18px; height: 18px; }

.radio-queue-info { flex: 1; min-width: 0; }
.radio-queue-title { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.radio-queue-title a { color: var(--text); }
.radio-queue-artist { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.radio-queue-artist a { color: var(--muted); }
.radio-queue-meta { display: flex; gap: 10px; font-size: 11px; color: var(--muted); margin-top: 2px; }
.radio-queue-meta .oxus-ico { width: 12px; height: 12px; display: inline-block; vertical-align: -1px; }

.radio-queue-play {
    all: unset;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    cursor: pointer;
    flex-shrink: 0;
}
.radio-queue-play:hover { background: rgba(255,255,255,0.08); color: var(--text); }
.radio-queue-play svg { width: 16px; height: 16px; }
.radio-queue-item.is-playing .radio-queue-play { color: var(--red); }

@media (max-width: 520px) {
    .radio-player { flex-direction: column; align-items: flex-start; }
    .radio-player-cover { width: 100%; height: 140px; }
}

/* ---------------------------------------------------------------------
   TRACKS PAGE — OXUS premium redesign (spotlight hero, rails, search,
   numbered list). Deliberately NOT a Spotify skin: sharp diagonal cut
   accents, spray/grain texture, uppercase display type and a per-track
   dynamic glow (lifted from the spotlighted cover at runtime) replace
   the soft rounded neutral card language most streaming apps share.
   Reuses site tokens only (--bg/--panel/--red/--green/--border/--muted);
   no new colors were introduced. GPU-cheap: transforms/opacity only,
   no layout-triggering hover properties.
   --------------------------------------------------------------------- */

.tracks-hero {
    position: relative;
    max-width: 900px;
    margin: 20px auto 0;
    padding: 0 16px;
    overflow: hidden;
    --spot-r: 230; --spot-g: 57; --spot-b: 70; /* default: brand red, overwritten by JS from the cover */
}
.tracks-hero-texture {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.5;
    background-image:
        repeating-linear-gradient(115deg, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 5px);
    mix-blend-mode: overlay;
}
.tracks-hero-glow {
    position: absolute;
    inset: -70px -20px auto -20px;
    height: 260px;
    background:
        radial-gradient(50% 100% at 15% 0%, rgba(var(--spot-r), var(--spot-g), var(--spot-b), 0.28), transparent 72%),
        radial-gradient(40% 100% at 95% 10%, rgba(61,220,132,0.14), transparent 70%);
    pointer-events: none;
    z-index: 0;
    transition: background 0.6s ease;
}
.tracks-hero-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 20px;
    background: linear-gradient(155deg, var(--panel-2) 0%, var(--panel) 65%);
    border: 1px solid var(--border);
    border-left: 3px solid rgb(var(--spot-r), var(--spot-g), var(--spot-b));
    border-radius: 4px 16px 16px 4px;
    padding: 24px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 22px, 14px 0);
}
.tracks-hero-icon {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--panel);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--green);
}
.tracks-hero-icon svg { width: 28px; height: 28px; }

.tracks-hero-spot-cover {
    position: relative;
    width: 96px;
    height: 96px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    background: var(--panel) center/cover no-repeat;
    border: 1px solid var(--border);
    box-shadow: 0 12px 28px -8px rgba(var(--spot-r), var(--spot-g), var(--spot-b), 0.45);
    display: block;
}
.tracks-hero-spot-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tracks-hero-spot-cover svg { width: 32px; height: 32px; color: var(--muted); position: absolute; inset: 0; margin: auto; }
.tracks-hero-spot-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(6,6,8,0.45);
    color: #fff;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.tracks-hero-spot-play svg { width: 30px; height: 30px; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5)); }
.tracks-hero-spot-cover:hover .tracks-hero-spot-play { opacity: 1; }

.tracks-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgb(var(--spot-r), var(--spot-g), var(--spot-b));
    margin: 0 0 4px;
}
.tracks-hero-eyebrow .oxus-ico { width: 12px; height: 12px; }
.tracks-hero-inner h1 {
    margin: 0;
    font-size: 27px;
    letter-spacing: -0.01em;
    font-weight: 800;
    line-height: 1.15;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.tracks-hero-sub { color: var(--muted); font-size: 13.5px; margin: 6px 0 0; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.tracks-hero-sub a { color: var(--muted); }
.tracks-hero-sub a:hover { color: var(--text); }
.tracks-hero-sub .oxus-ico { width: 13px; height: 13px; }
.tracks-hero-text { flex: 1; min-width: 0; }
.tracks-upload-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    flex-shrink: 0;
    border-radius: 4px;
}
.tracks-upload-toggle .oxus-ico { width: 16px; height: 16px; }

.tracks-composer[data-collapsed="1"] { display: none; }

/* --- Live search bar --- */
.tracks-search-bar { max-width: 900px; margin: 16px auto 0; padding: 0 16px; }
.tracks-search-field {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 10px 16px;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.tracks-search-field:focus-within { border-color: var(--red); background: var(--panel-2); }
.tracks-search-field > .oxus-ico { width: 16px; height: 16px; color: var(--muted); flex-shrink: 0; }
.tracks-search-field input {
    all: unset;
    flex: 1;
    min-width: 0;
    font-size: 14px;
    color: var(--text);
}
.tracks-search-field input::placeholder { color: var(--muted); }
.tracks-search-clear {
    all: unset;
    display: none;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: var(--muted);
    cursor: pointer;
    flex-shrink: 0;
}
.tracks-search-clear svg { width: 13px; height: 13px; }
.tracks-search-clear.is-visible { display: flex; }
.tracks-search-clear:hover { background: var(--panel-2); color: var(--text); }
.tracks-search-recent { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 10px 2px 0; min-height: 1px; }
.tracks-search-recent-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.tracks-search-recent-chip {
    all: unset;
    font-size: 12px;
    color: var(--muted);
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px 11px;
    cursor: pointer;
}
.tracks-search-recent-chip:hover { color: var(--text); border-color: var(--muted); }

.tracks-sorttabs {
    max-width: 900px;
    margin: 18px auto 0;
    padding: 0 16px;
    display: flex;
    gap: 8px;
}
.tracks-sorttabs a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 8px 16px;
    border-radius: 3px;
    border: 1px solid var(--border);
    background: var(--panel);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}
.tracks-sorttabs a .oxus-ico { width: 13px; height: 13px; }
.tracks-sorttabs a:hover { color: var(--text); text-decoration: none; border-color: var(--muted); }
.tracks-sorttabs a.active { background: var(--red); border-color: var(--red); color: #fff; box-shadow: 0 4px 14px -4px rgba(230,57,70,0.55); }

/* --- Genre / mood / year filter chips (tracks.php) --- */
.tracks-chip-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 10px 0 20px;
    max-width: 1160px;
}
.tracks-chip-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
    margin: 0 2px 0 8px;
}
.tracks-chip-label:first-child { margin-left: 0; }
.tracks-chip {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--panel);
    font-size: 12.5px;
    color: var(--text);
    text-decoration: none;
    transition: background .15s, border-color .15s, transform .15s;
}
.tracks-chip:hover { border-color: var(--muted); text-decoration: none; transform: translateY(-1px); }
.tracks-chip.active { background: var(--red); border-color: var(--red); color: #fff; }
.tracks-chip-clear { color: var(--red); border-color: var(--red); margin-left: 8px; }

/* --- Composer genre/mood/year row (tracks.php upload form) --- */
.tracks-composer-meta-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
}
.tracks-composer-meta-row select,
.tracks-composer-meta-row input { width: 100%; }
@media (max-width: 560px) {
    .tracks-composer-meta-row { grid-template-columns: 1fr; }
}

/* --- Oxus discover rails (tracks.php) — horizontally scrollable rows of
   cards. Renamed away from any streaming-service naming; visual language
   is sharp-cornered with a spray-glow play affordance instead of a
   perfectly round pill button. --- */
.oxus-rail-section { max-width: 1160px; margin: 10px auto 0; padding: 0 16px; }
.oxus-rail { margin-bottom: 32px; }
.oxus-rail-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.oxus-rail-head h2 {
    font-size: 15px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text);
}
.oxus-rail-head h2 .oxus-ico { width: 14px; height: 14px; color: var(--red); }
.oxus-rail-head a { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.oxus-rail-head a:hover { color: var(--text); text-decoration: none; }

.oxus-rail-track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding: 4px 4px 14px;
    cursor: grab;
    scrollbar-width: none;
}
.oxus-rail-track:active { cursor: grabbing; }
.oxus-rail-track::-webkit-scrollbar { display: none; }

.rail-card {
    flex: 0 0 156px;
    scroll-snap-align: start;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 3px 12px 12px 3px;
    padding: 12px;
    text-decoration: none;
    color: var(--text);
    display: block;
    perspective: 600px;
    transform: perspective(600px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateZ(0);
    transition: border-color 0.15s ease, box-shadow 0.2s ease, transform 0.12s ease-out;
    user-select: none;
    will-change: transform;
}
.rail-card:hover {
    border-color: var(--red);
    box-shadow: 0 14px 28px -12px rgba(0,0,0,0.55), 0 0 0 1px rgba(230,57,70,0.25);
    text-decoration: none;
}

.rail-card-cover {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 2px 8px 8px 2px;
    background: var(--panel-2) center/cover no-repeat;
    display: flex; align-items: center; justify-content: center;
    color: var(--muted);
    margin-bottom: 10px;
    overflow: hidden;
}
.rail-card-cover svg { width: 30px; height: 30px; }
.rail-card-sheen {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.14) 0%, transparent 35%);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}
.rail-card:hover .rail-card-sheen { opacity: 1; }
.rail-card-cover-playlist { background: var(--panel-2); padding: 0; }
.rail-card-cover-new {
    background: var(--panel-2);
    border: 1.5px dashed var(--muted);
    color: var(--muted);
}
.rail-card-new { text-align: left; }
.rail-card-new:hover .rail-card-cover-new { border-color: var(--red); color: var(--red); }

.rail-card-collage { display: grid; width: 100%; height: 100%; }
.rail-card-collage-1 { grid-template-columns: 1fr; }
.rail-card-collage-2 { grid-template-columns: 1fr 1fr; }
.rail-card-collage-3, .rail-card-collage-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.rail-card-collage span { background: var(--panel-2) center/cover no-repeat; }

.rail-card-play {
    position: absolute;
    right: 8px; bottom: 8px;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--red);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 16px rgba(230,57,70,0.5);
    opacity: 0;
    transform: translateY(8px) scale(0.85);
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.rail-card-play svg { width: 15px; height: 15px; margin-left: 1px; }
.rail-card:hover .rail-card-play { opacity: 1; transform: translateY(0) scale(1); }

.rail-card-title {
    font-size: 13.5px; font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rail-card-sub {
    font-size: 12px; color: var(--muted); margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rail-empty { padding: 20px; font-size: 13px; }

@media (max-width: 640px) {
    .rail-card { flex-basis: 124px; padding: 9px; }
    .oxus-rail-section { margin-top: 4px; }
}

.tracks-list-heading { max-width: 900px; margin: 34px auto 0; padding: 0 16px; }
.tracks-list-heading h2 {
    font-size: 15px;
    margin: 0 0 4px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tracks-list { max-width: 900px; margin: 0 auto; padding: 0 16px; }

/* --- Track card grid — the main library view. A real grid (not a
   list): cover-forward tiles with rank badge, hover play affordance,
   inline compact player for uploads, click-to-expand embed panel for
   Spotify/YouTube/SoundCloud links. Sharp asymmetric corners + red
   accent line keep it OXUS rather than a neutral streaming-app tile. */
.tracks-card-grid {
    max-width: 1160px;
    margin: 0 auto 10px;
    padding: 0 16px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 16px;
    align-items: start;
}
.track-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-left: 2px solid transparent;
    border-radius: 3px 14px 14px 3px;
    padding: 12px;
    position: relative;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.track-card:hover {
    border-color: var(--muted);
    border-left-color: var(--red);
    background: var(--panel-2);
    transform: translateY(-3px);
    box-shadow: 0 14px 28px -14px rgba(0,0,0,0.55);
}
.track-card-rank {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    background: rgba(10,10,12,0.65);
    backdrop-filter: blur(3px);
    border-radius: 3px;
    padding: 2px 6px;
    font-variant-numeric: tabular-nums;
}

.track-card-cover {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 2px 10px 10px 2px;
    background: var(--panel-2) center/cover no-repeat;
    overflow: hidden;
    margin-bottom: 10px;
    color: var(--muted);
    text-decoration: none;
}
.track-card-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.track-card-cover svg { width: 30px; height: 30px; position: absolute; inset: 0; margin: auto; }
.track-card-cover-btn { all: unset; display: block; position: relative; width: 100%; cursor: pointer; box-sizing: border-box; }
.track-card-sheen {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.14) 0%, transparent 35%);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}
.track-card:hover .track-card-sheen { opacity: 1; }
.track-card-playbtn {
    position: absolute;
    right: 8px; bottom: 8px;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--red);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 16px rgba(230,57,70,0.5);
    opacity: 0;
    transform: translateY(8px) scale(0.85);
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.track-card-playbtn svg { width: 16px; height: 16px; margin-left: 1px; }
.track-card:hover .track-card-playbtn { opacity: 1; transform: translateY(0) scale(1); }
.track-card-chevron {
    position: absolute;
    left: 8px; bottom: 8px;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: rgba(10,10,12,0.65);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.15s ease, color 0.15s ease;
}
.track-card-chevron svg { width: 13px; height: 13px; }
.track-card.is-open .track-card-chevron { transform: rotate(180deg); color: var(--red); background: #fff; }

.track-card-body { min-width: 0; }
.track-card-title {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
}
.track-card-title:hover { color: var(--red); text-decoration: none; }
.track-card-artist {
    font-size: 12px;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}
.track-card-album { color: var(--muted); font-style: italic; }
.track-row-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

.track-card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.track-card-tag {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--muted);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 2px 8px;
}

.track-card-player { margin-top: 8px; }
.track-card-player .oxus-player { background: transparent; border: none; padding: 0; margin: 0; }
.track-card-player .oxus-player::before { display: none; }

.track-card-stats { display: flex; gap: 10px; margin-top: 8px; }
.track-card-stats .tl-stat { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.track-card-stats .tl-stat .oxus-ico { width: 12px; height: 12px; }

.track-card-embed-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s cubic-bezier(.2,.8,.2,1);
}
.track-card.is-open .track-card-embed-panel { max-height: 420px; margin-top: 8px; }

.track-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}
.track-row-author {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.track-row-author:hover { color: var(--red); text-decoration: none; }
.track-row-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--panel-2) center/cover no-repeat;
    flex-shrink: 0;
}

/* On tracks.php only, the save/playlist action pair fades in on card
   hover/focus rather than sitting fully visible at all times — a small
   premium touch that doesn't touch the shared .track-action-btn rules
   used on radio.php/track.php. */
@media (hover: hover) {
    .track-card .track-actions-row { opacity: 0; transform: translateY(2px); transition: opacity 0.15s ease, transform 0.15s ease; }
    .track-card:hover .track-actions-row,
    .track-card:focus-within .track-actions-row { opacity: 1; transform: translateY(0); }
}

/* Reduced motion: drop the tilt/translate flourishes, keep color cues. */
@media (prefers-reduced-motion: reduce) {
    .rail-card, .track-card, .track-card-cover, .rail-card-play, .rail-card-sheen, .track-card-sheen { transition: none !important; transform: none !important; }
}

/* Wider viewports (large desktop / ultrawide / 4K) get a bit more room
   instead of stretching a fixed column into empty space. */
@media (min-width: 1440px) {
    .tracks-hero, .tracks-search-bar, .tracks-sorttabs, .tracks-list-heading, .tracks-list { max-width: 1160px; }
    .tracks-card-grid { max-width: 1400px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
}
@media (min-width: 1920px) {
    .tracks-hero, .tracks-search-bar, .tracks-sorttabs, .tracks-list-heading, .tracks-list { max-width: 1320px; }
    .rail-card { flex-basis: 172px; }
    .tracks-card-grid { max-width: 1680px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}

@media (max-width: 640px) {
    .tracks-hero-inner { flex-wrap: wrap; padding: 18px; }
    .tracks-hero-inner h1 { font-size: 20px; -webkit-line-clamp: 3; }
    .tracks-hero-spot-cover, .tracks-hero-icon { width: 64px; height: 64px; }
    .tracks-sorttabs { overflow-x: auto; scrollbar-width: none; }
    .tracks-sorttabs::-webkit-scrollbar { display: none; }
    .tracks-card-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
    .track-card .track-actions-row { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------
   TRACKS PAGE — PREMIUM PASS (2026 redesign, part 2). Pure visual/UX
   layer on top of the block above: no new endpoints, tables or scripts
   — everything here either reuses render_track_actions_row()'s existing
   save/playlist-add call, or is decorative CSS/client-only JS (share
   sheet, FAB icon state). Scoped entirely to tracks.php-only classes
   (.tracks-*, .rail-card-*, .track-card-*, .hero-action-*) so no other
   page's styling is touched.
   --------------------------------------------------------------------- */

/* --- Glass hero: the panel gets a translucent/blurred body so the
   spotlight glow underneath actually reads as "premium light", not a
   flat gradient. */
.tracks-hero-inner {
    background: linear-gradient(155deg, rgba(27,27,31,0.86) 0%, rgba(10,10,12,0.92) 65%);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
}
.tracks-hero-glow {
    height: 320px;
    background:
        radial-gradient(45% 100% at 12% 0%, rgba(var(--spot-r), var(--spot-g), var(--spot-b), 0.32), transparent 72%),
        radial-gradient(35% 90% at 90% 8%, rgba(61,220,132,0.16), transparent 70%),
        radial-gradient(60% 60% at 50% 100%, rgba(var(--spot-r), var(--spot-g), var(--spot-b), 0.10), transparent 75%);
    animation: tracksGlowDrift 14s ease-in-out infinite alternate;
}
@keyframes tracksGlowDrift {
    from { background-position: 0% 0%, 0% 0%, 0% 0%; }
    to   { background-position: 6% 4%, -6% -2%, 0% -4%; }
}

/* --- Vinyl disc peeking out from behind the spotlight cover — a small
   "still spinning" ambient detail. Lives on a sibling wrapper (not a
   pseudo-element of the cover itself) because the cover has
   overflow:hidden for its own image clipping. */
.tracks-hero-spot-wrap { position: relative; flex-shrink: 0; }
.tracks-hero-vinyl-disc {
    position: absolute;
    left: -28px;
    top: 50%;
    width: 72px;
    height: 72px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: repeating-radial-gradient(circle at center, #101012 0px, #101012 3px, #1c1c1f 3px, #1c1c1f 6px);
    box-shadow: inset 0 0 0 7px #0a0a0c, inset 0 0 0 9px rgba(255,255,255,0.05), 0 6px 18px rgba(0,0,0,0.55);
    z-index: 0;
    animation: tracksVinylSpin 7s linear infinite;
}
.tracks-hero-vinyl-disc::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 16px; height: 16px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgb(var(--spot-r), var(--spot-g), var(--spot-b));
}
.tracks-hero-spot-cover { position: relative; z-index: 1; }
@keyframes tracksVinylSpin { to { transform: translateY(-50%) rotate(360deg); } }
@media (max-width: 640px) { .tracks-hero-vinyl-disc { display: none; } }

/* --- Ambient "canlı" equalizer next to the eyebrow label — decorative
   only (not wired to actual audio playback state), signals "this is a
   music page" at a glance. */
.tracks-hero-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 10px; margin-left: 4px; vertical-align: middle; }
.tracks-hero-eq i { display: block; width: 2.5px; border-radius: 1px; background: rgb(var(--spot-r), var(--spot-g), var(--spot-b)); animation: tracksEqBounce 0.9s ease-in-out infinite; }
.tracks-hero-eq i:nth-child(1) { height: 40%; animation-delay: 0s; }
.tracks-hero-eq i:nth-child(2) { height: 100%; animation-delay: .15s; }
.tracks-hero-eq i:nth-child(3) { height: 65%; animation-delay: .3s; }
.tracks-hero-eq i:nth-child(4) { height: 85%; animation-delay: .45s; }
@keyframes tracksEqBounce { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } }

/* --- Hero action row (Dinle / Kaydet / Playlist'e ekle / Paylaş /
   Sanatçıya git). The save+playlist pair is the exact same markup
   render_track_actions_row() prints elsewhere on the site — this only
   restyles it to sit as pills next to the other hero buttons. */
.tracks-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.hero-action-btn {
    all: unset;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text);
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.03);
    text-decoration: none;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.hero-action-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.hero-action-btn:hover { border-color: var(--muted); transform: translateY(-1px); text-decoration: none; }
.hero-action-btn:active { transform: scale(0.96); }
.hero-action-primary {
    background: rgb(var(--spot-r), var(--spot-g), var(--spot-b));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 20px -6px rgba(var(--spot-r), var(--spot-g), var(--spot-b), 0.55);
}
.hero-action-primary:hover { filter: brightness(1.08); }
.hero-action-ghost { color: var(--muted); background: transparent; }
.hero-action-ghost:hover { color: var(--text); }
.tracks-hero-actions .track-actions-row { display: inline-flex; gap: 8px; margin: 0; }
.tracks-hero-actions .track-action-btn { padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,0.03); }

/* --- Floating upload action button. Replaces the old full-size red
   button that used to sit inside the hero — same toggle target/JS
   (.tracks-upload-toggle), just relocated + restyled so it never
   competes with the hero's own layout. */
.tracks-fab {
    all: unset;
    position: fixed;
    right: 22px;
    bottom: 26px;
    z-index: 45;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--red), var(--red-dark));
    color: #fff;
    cursor: pointer;
    box-shadow: 0 10px 24px -6px rgba(230,57,70,0.55), 0 0 0 1px rgba(255,255,255,0.08) inset;
    transition: transform 0.2s cubic-bezier(.34,1.56,.64,1), box-shadow 0.2s ease;
}
.tracks-fab svg { width: 22px; height: 22px; transition: transform 0.2s ease; }
.tracks-fab-label {
    position: absolute;
    right: 66px;
    top: 50%;
    transform: translateY(-50%) translateX(6px);
    background: var(--panel);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 999px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.tracks-fab:hover { transform: scale(1.07); box-shadow: 0 14px 30px -6px rgba(230,57,70,0.65), 0 0 0 1px rgba(255,255,255,0.08) inset; }
.tracks-fab:hover svg { transform: rotate(45deg); }
.tracks-fab.is-open svg { transform: rotate(45deg); }
.tracks-fab:hover .tracks-fab-label { opacity: 1; transform: translateY(-50%) translateX(0); }
.tracks-fab:active { transform: scale(0.94); }
@media (max-width: 768px) {
    .tracks-fab { right: 16px; bottom: calc(58px + 18px + env(safe-area-inset-bottom, 0)); width: 50px; height: 50px; }
    .tracks-fab-label { display: none; }
}

/* --- Decorative waveform bars — a purely aesthetic "this is audio"
   flourish on cover hover, not a real waveform render of the file. */
.rail-card-wave, .track-card-wave {
    position: absolute;
    display: flex;
    align-items: flex-end;
    gap: 2px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.rail-card-wave { left: 10px; right: 10px; top: 10px; height: 14px; transform: translateY(-3px); }
.track-card-wave { left: 8px; right: 8px; top: 8px; height: 14px; transform: translateY(-3px); }
.rail-card:hover .rail-card-wave,
.track-card:hover .track-card-wave { opacity: 0.85; transform: translateY(0); }
.rail-card-wave i, .track-card-wave i {
    flex: 1;
    background: rgba(255,255,255,0.8);
    border-radius: 1px;
    animation: tracksWaveBounce 1.1s ease-in-out infinite;
}
.rail-card-wave i:nth-child(odd), .track-card-wave i:nth-child(odd) { animation-duration: 0.9s; }
.rail-card-wave i:nth-child(1), .track-card-wave i:nth-child(1) { animation-delay: 0s; }
.rail-card-wave i:nth-child(2), .track-card-wave i:nth-child(2) { animation-delay: .1s; }
.rail-card-wave i:nth-child(3), .track-card-wave i:nth-child(3) { animation-delay: .2s; }
.rail-card-wave i:nth-child(4), .track-card-wave i:nth-child(4) { animation-delay: .3s; }
.rail-card-wave i:nth-child(5), .track-card-wave i:nth-child(5) { animation-delay: .15s; }
.rail-card-wave i:nth-child(6), .track-card-wave i:nth-child(6) { animation-delay: .25s; }
.rail-card-wave i:nth-child(7), .track-card-wave i:nth-child(7) { animation-delay: .35s; }
.rail-card-wave i:nth-child(8), .track-card-wave i:nth-child(8) { animation-delay: .05s; }
@keyframes tracksWaveBounce { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }

/* --- Slightly springier card hover (was a flat ease-out translate). */
.track-card { transition: border-color 0.15s ease, background 0.15s ease, transform 0.25s cubic-bezier(.34,1.56,.64,1), box-shadow 0.25s ease; }
.track-card:hover { transform: translateY(-4px) scale(1.008); }
.rail-card { transition: border-color 0.15s ease, box-shadow 0.2s ease, transform 0.25s cubic-bezier(.34,1.56,.64,1); }

/* --- Layered surface tones: rank badge / stat pills / tags pick up a
   touch more contrast against --panel-2 on hover so the card doesn't
   read as one flat block. */
.track-card:hover .track-card-tag { border-color: rgba(255,255,255,0.14); }
.track-card:hover .track-card-stats .tl-stat { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
    .tracks-hero-glow, .tracks-hero-vinyl-disc, .tracks-hero-eq i, .rail-card-wave i, .track-card-wave i,
    .tracks-fab, .tracks-fab svg, .hero-action-btn { animation: none !important; transition: none !important; }
    .tracks-fab:hover, .track-card:hover, .rail-card:hover { transform: none !important; }
}


/* Shopier "Ürün Linki" (API'siz) ödeme akışı için küçük yardımcı stiller */
.admin-inline-actions { display: flex; gap: 8px; flex-shrink: 0; }
.premium-confirm-row { padding: 14px 0; border-bottom: 1px solid var(--border); }
.premium-confirm-row:last-child { border-bottom: none; }
.premium-confirm-row input[type="text"],
.premium-confirm-row input:not([type="hidden"]) { width: 100%; max-width: 420px; margin: 6px 0; }

/* ============================================================
   Playlists / Library / Radio live chat (Music Engine, phase 1)
   ============================================================ */

/* Save-to-library + add-to-playlist row under a track (tracks.php,
   track.php, radio queue cards). Sits right under .reaction-row. */
.track-actions-row { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.track-action-btn {
    all: unset; display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
    color: var(--muted); font-size: 12px; font-weight: 600; padding: 4px 9px;
    border-radius: 999px; border: 1px solid var(--border); transition: color var(--ease, 200ms), border-color var(--ease, 200ms), transform 150ms;
}
.track-action-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.track-action-btn:hover { color: var(--text); border-color: var(--muted); }
.track-action-btn:active { transform: scale(0.95); }
.track-action-btn.active { color: var(--red); border-color: var(--red); }
.track-action-btn.active svg { fill: var(--red); stroke: none; }
@media (max-width: 480px) { .track-action-label { display: none; } .track-action-btn { padding: 6px; } }

/* Add-to-playlist modal extras (base .oxus-modal-* rules live above) */
.oxus-modal-playlist-cover { background: var(--panel-2) url('data:image/svg+xml;utf8,') center/cover; display: flex; align-items: center; justify-content: center; }
.oxus-modal-playlist-cover::before { content: "♪"; color: var(--muted); font-size: 15px; }
.oxus-modal-track-row.is-added { opacity: 0.6; }
.oxus-modal-added-check { color: var(--green); font-weight: 700; padding: 0 4px; }
.oxus-modal-newplaylist { display: flex; gap: 8px; padding: 10px 16px 16px; border-top: 1px solid var(--border); }
.oxus-modal-newplaylist input { flex: 1; margin: 0; }
.oxus-modal-newplaylist button {
    all: unset; cursor: pointer; padding: 8px 16px; border-radius: 999px;
    background: var(--red); color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap;
}
.oxus-modal-newplaylist button:active { transform: scale(0.96); }

/* Library page ("Kitaplığım") — Spotify-style: tabs + card grid */
.library-header { max-width: 900px; margin: 0 auto; padding: 24px 16px 0; }
.library-title { font-size: 26px; font-weight: 800; margin: 0 0 4px; }
.library-sub { color: var(--muted); font-size: 13px; margin: 0 0 18px; }
.library-tabs { display: flex; gap: 8px; max-width: 900px; margin: 0 auto; padding: 0 16px; flex-wrap: wrap; }
.library-tab {
    text-decoration: none; color: var(--muted); font-weight: 700; font-size: 13.5px;
    padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel);
    transition: color 200ms, border-color 200ms, background 200ms;
}
.library-tab:hover { color: var(--text); }
.library-tab.active { color: #fff; background: var(--red); border-color: var(--red); }
.library-new-playlist-btn {
    all: unset; cursor: pointer; margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
    color: var(--text); font-weight: 700; font-size: 13.5px; padding: 8px 16px; border-radius: 999px;
    border: 1px solid var(--border); background: var(--panel);
}
.library-new-playlist-btn:hover { border-color: var(--red); color: var(--red); }
.library-new-playlist-btn svg { width: 15px; height: 15px; }

.playlist-grid {
    max-width: 900px; margin: 18px auto 60px; padding: 0 16px;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px;
}
.playlist-card {
    display: block; text-decoration: none; color: var(--text); background: var(--panel);
    border: 1px solid var(--border); border-radius: var(--radius-md, 12px); padding: 14px;
    transition: transform var(--ease, 200ms), border-color var(--ease, 200ms);
}
.playlist-card:hover { transform: translateY(-2px); border-color: var(--muted); }
.playlist-card-cover {
    width: 100%; aspect-ratio: 1/1; border-radius: 8px; margin-bottom: 10px;
    background: linear-gradient(135deg, var(--panel-2), #000); display: flex; align-items: center; justify-content: center;
}
.playlist-card-cover svg { width: 34px; height: 34px; color: var(--muted); }
.playlist-card-name { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.playlist-card-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }

.library-track-list { max-width: 900px; margin: 18px auto 60px; padding: 0 16px; }
.library-track-row {
    display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border);
}
.library-track-row:last-child { border-bottom: none; }
.library-track-cover { width: 46px; height: 46px; border-radius: 8px; background: var(--panel-2) center/cover no-repeat; flex-shrink: 0; }
.library-track-info { flex: 1; min-width: 0; }
.library-track-title { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.library-track-artist { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Playlist detail page */
.playlist-hero { max-width: 900px; margin: 0 auto; padding: 24px 16px 12px; display: flex; gap: 18px; align-items: flex-end; }
.playlist-hero-cover {
    width: 120px; height: 120px; border-radius: 12px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--panel-2), #000); display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,0.32));
}
.playlist-hero-cover svg { width: 44px; height: 44px; color: var(--muted); }
.playlist-hero-meta { min-width: 0; }
.playlist-hero-kicker { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.playlist-hero-name { font-size: 28px; font-weight: 800; margin: 4px 0; word-break: break-word; }
.playlist-hero-desc { font-size: 13px; color: var(--muted); margin: 0 0 6px; }
.playlist-hero-sub { font-size: 12.5px; color: var(--muted); }
.playlist-hero-actions { display: flex; gap: 8px; max-width: 900px; margin: 12px auto 0; padding: 0 16px; }
.playlist-hero-actions button, .playlist-hero-actions a.btn-like {
    all: unset; cursor: pointer; padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 700;
    border: 1px solid var(--border); color: var(--text);
}
.playlist-hero-actions .danger { color: var(--red); border-color: var(--red); }

/* Radio live chat rail — sits next to the player on radio.php */
.radio-layout { max-width: 1040px; margin: 0 auto; padding: 0 16px; display: flex; gap: 24px; align-items: flex-start; }
.radio-layout-main { flex: 1; min-width: 0; }
.radio-chat { width: 300px; flex-shrink: 0; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-md, 12px); display: flex; flex-direction: column; height: 520px; }
.radio-chat-head { padding: 12px 14px; border-bottom: 1px solid var(--border); font-weight: 700; font-size: 13.5px; display: flex; align-items: center; gap: 8px; }
.radio-chat-head .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); display: inline-block; }
.radio-chat-messages { flex: 1; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; }
.radio-chat-msg { display: flex; gap: 8px; animation: radioChatIn 200ms var(--ease, ease-out); }
@keyframes radioChatIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.radio-chat-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--panel-2) center/cover no-repeat; flex-shrink: 0; }
.radio-chat-body { min-width: 0; font-size: 12.5px; line-height: 1.4; }
.radio-chat-name { font-weight: 700; margin-right: 5px; }
.radio-chat-text { color: var(--text); word-wrap: break-word; }
.radio-chat-empty { color: var(--muted); font-size: 12.5px; text-align: center; padding: 20px 10px; }
.radio-chat-form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border); }
.radio-chat-form input { flex: 1; margin: 0; font-size: 13px; }
.radio-chat-form button { all: unset; cursor: pointer; width: 34px; height: 34px; border-radius: 50%; background: var(--red); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.radio-chat-form button svg { width: 15px; height: 15px; color: #fff; }
.radio-chat-form button:active { transform: scale(0.92); }
.radio-chat-login-hint { padding: 14px; text-align: center; font-size: 12.5px; color: var(--muted); }
.radio-chat-login-hint a { color: var(--red); font-weight: 700; }

@media (max-width: 860px) {
    .radio-layout { flex-direction: column; }
    .radio-chat { width: 100%; height: 380px; }
}

/* ============================================================
   TRACKS ENGINE 2.0 — Faz 1: Album sistemi + Track detay zenginleştirme
   ============================================================ */

.album-header { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.album-cover { width: 160px; height: 160px; object-fit: cover; border-radius: 10px; flex-shrink: 0; }
.album-header-info { flex: 1; min-width: 200px; }
.album-type-badge {
    display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--red); border: 1px solid var(--red);
    border-radius: 999px; padding: 2px 10px; margin-bottom: 6px;
}
.album-title { margin: 4px 0 6px; font-size: 24px; }
.album-stats-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: 13px; color: var(--muted); }

.album-tracklist { margin-top: 16px; }
.album-track-row {
    display: flex; align-items: center; gap: 10px; padding: 8px 6px;
    border-radius: 8px; border: 1px solid transparent;
}
.album-track-row:hover { background: rgba(255,255,255,.03); border-color: var(--border); }
.album-track-row.dragging { opacity: .4; }
.album-track-drag { cursor: grab; color: var(--muted); font-size: 14px; user-select: none; }
.album-track-num { width: 22px; text-align: center; color: var(--muted); font-variant-numeric: tabular-nums; }
.album-track-title { flex: 1; color: var(--text, #fff); text-decoration: none; }
.album-track-title:hover { color: var(--red); }
.album-track-duration { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }

.track-album-link { margin: 4px 0 10px; font-size: 14px; }
.track-album-link a { color: var(--red); }

.track-meta-grid { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.track-meta-pill {
    font-size: 12px; color: var(--muted); border: 1px solid var(--border);
    border-radius: 999px; padding: 3px 10px;
}

.track-credits { margin: 14px 0; display: flex; flex-direction: column; gap: 6px; }
.track-credit-row { display: flex; gap: 8px; font-size: 13px; }
.track-credit-role { color: var(--muted); min-width: 110px; flex-shrink: 0; }
.track-credit-names a { color: var(--red); }

.track-lyrics-panel .track-lyrics-text { white-space: pre-line; line-height: 1.7; color: var(--muted); }

.track-dna-heading { margin: 0 0 12px; font-size: 16px; }
.track-dna-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 18px; }
.track-dna-bar { display: grid; grid-template-columns: 90px 1fr 28px; align-items: center; gap: 8px; }
.track-dna-label { font-size: 12px; color: var(--muted); }
.track-dna-track { height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; }
.track-dna-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--red), var(--green)); }
.track-dna-value { font-size: 11px; color: var(--muted); text-align: right; }

.tracks-composer-credits { margin: 10px 0; padding-top: 10px; border-top: 1px solid var(--border); }
.tracks-composer-credits label { font-size: 12px; margin-top: 8px; }

@media (max-width: 640px) {
    .album-cover { width: 110px; height: 110px; }
    .album-title { font-size: 19px; }
    .track-dna-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   FEED V3.1 — "Underground Premium" visual pass (scoped entirely to
   feed.php). Every selector below is prefixed "fv3-" and only ever
   appears inside feed.php's markup, so nothing here can affect
   Explore/Tracks/Profile/DM/Battle or any other page. Where a shared,
   site-wide class (badges, reaction pills, the audio player) needs to
   look sharper *inside the feed specifically*, it is overridden with a
   `.fv3-* .shared-class` scoped selector below rather than edited at
   its original definition — so every other page keeps its exact
   current look. No markup, no PHP, no JS, no DB, no algorithm changed:
   this file is the only thing that moved.
   ===================================================================== */

:root {
    /* Layered "coal → graphite → anthracite" depth scale. Nothing here
       is a flat black — each step has a whisper of blue-violet mixed
       in so stacked panels read as distinct surfaces under one light
       source, not as cut-outs of the same color. */
    --fv3-bg-0: #08080a;
    --fv3-panel-1: #131317;   /* composer / rail card */
    --fv3-panel-2: #17171c;   /* post card base */
    --fv3-panel-3: #1d1d23;   /* hover / elevated */
    --fv3-panel-4: #24242b;   /* dropdown / menu / chip */
    --fv3-panel-5: #2b2b33;   /* topmost — active/pressed */
    --fv3-hairline: rgba(255,255,255,0.07);
    --fv3-hairline-strong: rgba(255,255,255,0.13);
    --fv3-glass-top: rgba(255,255,255,0.05);
    --fv3-shadow-1: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px -8px rgba(0,0,0,0.55);
    --fv3-shadow-2: 0 2px 4px rgba(0,0,0,0.45), 0 16px 40px -12px rgba(0,0,0,0.65);
    --fv3-ease-spring: cubic-bezier(.2, .8, .2, 1.2);
    --fv3-ease-out: cubic-bezier(.16, 1, .3, 1);
    --fv3-grain: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='120'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.85'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url%28%23n%29'/%3E%3C/svg%3E");
}

/* --- Page-level ambience ------------------------------------------- */
/* A fixed, very soft multi-glow backdrop sitting behind the whole
   column so the page reads as one continuous atmosphere instead of
   "gray boxes on black". Purely decorative, zero layout impact. */
body:has(.fv3-wrap) {
    background:
        radial-gradient(720px 420px at 12% -8%, rgba(230,57,70,0.10), transparent 60%),
        radial-gradient(640px 480px at 88% 18%, rgba(61,220,132,0.055), transparent 55%),
        radial-gradient(900px 700px at 50% 120%, rgba(120,90,255,0.06), transparent 60%),
        var(--bg);
    background-attachment: fixed;
}

.fv3-wrap { max-width: 620px; margin: 0 auto; padding: 24px 16px 70px; position: relative; }

@keyframes fv3FadeSlideUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fv3Fade {
    from { opacity: 0; } to { opacity: 1; }
}
@keyframes fv3ScaleIn {
    from { opacity: 0; transform: scale(.94); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes fv3HeartPop {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.4) rotate(-4deg); }
    60%  { transform: scale(0.9); }
    100% { transform: scale(1); }
}
@keyframes fv3Shimmer {
    0%   { background-position: -300px 0; }
    100% { background-position: 300px 0; }
}
@keyframes fv3PulseGlow {
    0%, 100% { opacity: .55; }
    50%      { opacity: 1; }
}
@keyframes fv3RingSpin {
    to { transform: rotate(360deg); }
}

/* --- Hero ------------------------------------------------------------
   The hero is the loudest object on the screen on purpose (visual
   hierarchy: media/track first). Glass edge on top, ambient color glow
   sampled from the cover by feed-v3.js (unchanged JS), and a near-
   invisible grain layer so the blurred backdrop doesn't look like a
   flat CSS blur — it should feel like it has material, like a printed
   sleeve, not a browser filter. */
.fv3-hero {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    margin-bottom: 20px;
    border: 1px solid var(--fv3-hairline);
    background: linear-gradient(180deg, var(--fv3-panel-3), var(--fv3-panel-2));
    box-shadow: var(--fv3-shadow-2);
    animation: fv3FadeSlideUp 380ms var(--fv3-ease-out) both;
    --fv3-hero-color: 230, 57, 70;
}
.fv3-hero::before {
    /* Hairline glass highlight along the top edge — the thing that
       makes a dark card read as "raised glass" instead of "hole cut
       into the page". */
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 1px 0 var(--fv3-glass-top), inset 0 0 0 1px rgba(255,255,255,0.02);
    pointer-events: none;
    z-index: 2;
}
.fv3-hero::after {
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 15% 0%, rgba(var(--fv3-hero-color), 0.38), transparent 55%),
        var(--fv3-grain);
    background-blend-mode: normal, overlay;
    opacity: 0;
    mix-blend-mode: screen;
    pointer-events: none;
    transition: opacity 500ms ease;
}
.fv3-hero.fv3-hero-colored::after { opacity: 1; }
.fv3-hero-bg {
    position: absolute; inset: -20px;
    background: center/cover no-repeat;
    filter: blur(42px) saturate(170%) brightness(0.5);
    transform: scale(1.18);
}
.fv3-hero-scrim {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(8,8,10,0.32) 0%, rgba(8,8,10,0.74) 62%, rgba(8,8,10,0.96) 100%);
}
.fv3-hero-inner { position: relative; z-index: 3; padding: 24px 24px 20px; }
.fv3-hero-eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 800; letter-spacing: 0.06em;
    color: #ffd88a; text-transform: uppercase;
    margin-bottom: 12px;
    padding: 5px 10px 5px 8px;
    border-radius: 999px;
    background: rgba(255,216,138,0.1);
    border: 1px solid rgba(255,216,138,0.18);
    position: relative; z-index: 1;
}
.fv3-hero-flame { animation: fv3PulseGlow 1.8s ease-in-out infinite; }
.fv3-hero-title-link { text-decoration: none; }
.fv3-hero-title {
    color: #fff; font-size: 28px; font-weight: 800; letter-spacing: -0.025em;
    margin: 0 0 5px; line-height: 1.12;
    text-shadow: 0 2px 20px rgba(0,0,0,0.55);
}
.fv3-hero-artist { font-size: 13.5px; color: rgba(255,255,255,0.68); margin-bottom: 18px; font-weight: 500; }
.fv3-hero-artist a { color: rgba(255,255,255,0.95); font-weight: 700; }
.fv3-hero-dot { margin: 0 6px; opacity: .6; }
.fv3-hero .oxus-player-full {
    background: rgba(255,255,255,0.055);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px;
    backdrop-filter: blur(10px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.fv3-hero.fv3-hero-colored .oxus-player-toggle {
    box-shadow: 0 0 0 0 rgba(var(--fv3-hero-color), 0), 0 6px 22px rgba(var(--fv3-hero-color), 0.5);
    transition: box-shadow 400ms ease;
}
@media (max-width: 480px) {
    .fv3-hero-title { font-size: 22px; }
    .fv3-hero-inner { padding: 20px 16px 16px; }
}

/* --- Quick-access rail ----------------------------------------------
   Each card gets its own icon "chip" in a soft gradient tile rather
   than a flat tinted square, plus a glass top edge to match the hero
   and post cards — same material language throughout the page. */
.fv3-rail-wrap { margin-bottom: 20px; animation: fv3FadeSlideUp 380ms 60ms var(--fv3-ease-out) both; }
.fv3-rail {
    display: flex; gap: 10px; overflow-x: auto; padding: 3px 3px 10px;
    scroll-snap-type: x proximity;
    -ms-overflow-style: none; scrollbar-width: none;
}
.fv3-rail::-webkit-scrollbar { display: none; }
.fv3-rail-card {
    scroll-snap-align: start;
    position: relative;
    flex: 0 0 auto;
    width: 136px;
    background: linear-gradient(160deg, var(--fv3-panel-3), var(--fv3-panel-1));
    border: 1px solid var(--fv3-hairline);
    border-radius: 16px;
    padding: 14px 13px;
    display: flex; flex-direction: column; gap: 7px;
    text-decoration: none;
    color: var(--text);
    box-shadow: var(--fv3-shadow-1);
    transition: transform 220ms var(--fv3-ease-spring), border-color 220ms ease,
                background 220ms ease, box-shadow 220ms ease;
}
.fv3-rail-card::before {
    content: "";
    position: absolute; inset: 0; border-radius: inherit;
    box-shadow: inset 0 1px 0 var(--fv3-glass-top);
    pointer-events: none;
}
.fv3-rail-card:hover {
    transform: translateY(-4px);
    border-color: rgba(230,57,70,0.45);
    background: linear-gradient(160deg, var(--fv3-panel-4), var(--fv3-panel-2));
    box-shadow: var(--fv3-shadow-2), 0 0 0 1px rgba(230,57,70,0.12);
    text-decoration: none;
}
.fv3-rail-icon {
    width: 34px; height: 34px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(140deg, rgba(230,57,70,0.22), rgba(230,57,70,0.08));
    color: var(--red);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.fv3-rail-icon svg { width: 17px; height: 17px; }
.fv3-rail-label { font-size: 13px; font-weight: 700; letter-spacing: -0.01em; }
.fv3-rail-sub { font-size: 11px; color: var(--muted); line-height: 1.3; letter-spacing: 0.01em; }

/* --- Composer (collapsed by default, expands on interaction) ------- */
.fv3-composer-wrap { margin-bottom: 20px; animation: fv3FadeSlideUp 380ms 100ms var(--fv3-ease-out) both; }
.fv3-composer {
    position: relative;
    background: linear-gradient(165deg, var(--fv3-panel-2), var(--fv3-panel-1));
    border: 1px solid var(--fv3-hairline);
    border-radius: 18px;
    padding: 13px 15px;
    box-shadow: var(--fv3-shadow-1);
    transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.fv3-composer::before {
    content: "";
    position: absolute; inset: 0; border-radius: inherit;
    box-shadow: inset 0 1px 0 var(--fv3-glass-top);
    pointer-events: none;
}
.fv3-composer.is-expanded {
    border-color: var(--fv3-hairline-strong);
    box-shadow: var(--fv3-shadow-2);
}
.fv3-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--panel-2) center/cover no-repeat;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px var(--fv3-panel-1), 0 0 0 3px var(--fv3-hairline-strong);
}
.fv3-composer-collapsed {
    display: flex; align-items: center; gap: 11px; cursor: text;
}
.fv3-composer-avatar { width: 40px; height: 40px; }
.fv3-composer-placeholder {
    flex: 1; color: var(--muted); font-size: 14px;
    background: rgba(0,0,0,0.28); border: 1px solid var(--fv3-hairline);
    border-radius: 999px; padding: 11px 15px;
    transition: border-color 180ms ease, background-color 180ms ease;
}
.fv3-composer-collapsed:hover .fv3-composer-placeholder {
    border-color: rgba(230,57,70,0.35);
    background: rgba(0,0,0,0.36);
}
.fv3-composer-quick-icons { display: flex; gap: 4px; flex-shrink: 0; }
.fv3-composer-quick-icon {
    width: 33px; height: 33px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: var(--muted); background: rgba(255,255,255,0.035);
    border: 1px solid transparent;
    transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}
.fv3-composer-quick-icon svg { width: 16px; height: 16px; }
@media (max-width: 560px) { .fv3-composer-quick-icons { display: none; } }

.fv3-composer-full {
    position: relative;
    display: none;
    flex-direction: column;
    padding-top: 13px;
    animation: fv3ScaleIn 240ms var(--fv3-ease-spring) both;
}
.fv3-composer.is-expanded .fv3-composer-collapsed { display: none; }
.fv3-composer.is-expanded .fv3-composer-full { display: flex; }
.fv3-composer-close {
    position: absolute; top: 9px; right: 0;
    background: none; width: auto; margin: 0; padding: 6px;
    color: var(--muted); border-radius: 8px;
}
.fv3-composer-close:hover { color: var(--text); background: rgba(255,255,255,0.07); }
.fv3-composer-full textarea {
    min-height: 92px; resize: vertical;
    background: rgba(0,0,0,0.3); border: 1px solid var(--fv3-hairline);
    border-radius: 12px; color: var(--text); font-size: 14px;
    font-family: inherit; padding: 13px; width: 100%;
    transition: border-color 160ms ease;
}
.fv3-composer-full textarea:focus {
    border-color: rgba(230,57,70,0.5);
    outline: none;
    box-shadow: 0 0 0 3px rgba(230,57,70,0.1);
}

/* --- Post cards: "music object" styling -----------------------------
   Visual hierarchy inside a card, in the order the eye should travel:
   media > author line > body copy > interaction row. Each tier gets a
   distinct type weight/size/color so nothing competes with the media
   for attention. */
.fv3-feed { display: flex; flex-direction: column; gap: 16px; }
.fv3-card {
    position: relative;
    background: linear-gradient(175deg, var(--fv3-panel-3) 0%, var(--fv3-panel-2) 55%);
    border: 1px solid var(--fv3-hairline);
    border-radius: 18px;
    padding: 17px;
    box-shadow: var(--fv3-shadow-1);
    animation: fv3FadeSlideUp 300ms var(--fv3-ease-out) both;
    transition: transform 220ms var(--fv3-ease-spring), border-color 220ms ease,
                box-shadow 220ms ease, background 220ms ease;
}
.fv3-card::before {
    content: "";
    position: absolute; inset: 0; border-radius: inherit;
    box-shadow: inset 0 1px 0 var(--fv3-glass-top);
    pointer-events: none;
}
.fv3-card:hover {
    transform: translateY(-2px);
    border-color: var(--fv3-hairline-strong);
    box-shadow: var(--fv3-shadow-2);
}
.fv3-card-head { display: flex; align-items: center; gap: 11px; margin-bottom: 11px; }
.fv3-card-head-info { flex: 1; min-width: 0; }
.fv3-card-author {
    font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em;
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
    color: #f2f2f4;
}
.fv3-card-author a { color: inherit; }
.fv3-card-author a:hover { text-decoration: none; opacity: 0.85; }
.fv3-card-meta {
    font-size: 12px; font-weight: 500; color: var(--muted);
    margin-top: 2px; letter-spacing: 0.01em;
}
.fv3-card-text {
    font-size: 14.5px; font-weight: 400; line-height: 1.58;
    color: rgba(232,232,234,0.92);
    margin-bottom: 12px; white-space: pre-wrap; word-wrap: break-word;
}
.fv3-card-media {
    border-radius: 14px; overflow: hidden; margin-bottom: 12px;
    border: 1px solid var(--fv3-hairline);
    box-shadow: var(--fv3-shadow-1);
    position: relative;
}
.fv3-card-media img, .fv3-card-media video { display: block; width: 100%; max-height: 540px; object-fit: cover; }
.fv3-card-track {
    margin-bottom: 10px;
    border-radius: 14px;
    background: rgba(0,0,0,0.18);
    border: 1px solid var(--fv3-hairline);
    padding: 2px;
}

/* Feed-scoped polish for the shared verified/premium badges — the
   global definitions (used on profile, comments, etc.) are untouched. */
.fv3-card-author .verified-tick {
    color: #59e0a6;
    filter: drop-shadow(0 0 5px rgba(89,224,166,0.45));
}
.fv3-card-author .premium-badge {
    font-weight: 800; letter-spacing: 0.02em;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}

.fv3-avatar-link { position: relative; display: inline-flex; border-radius: 50%; }
.fv3-card-head .fv3-avatar { width: 44px; height: 44px; }

.fv3-icon-btn {
    width: 32px; height: 32px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: transparent; color: var(--muted); margin: 0; padding: 0;
    border-radius: 9px;
    transition: background-color 160ms ease, color 160ms ease;
}
.fv3-icon-btn:hover { background: rgba(230,57,70,0.14); color: var(--red); }
.fv3-icon-btn svg { width: 16px; height: 16px; }

/* --- Card overflow menu (⋯ → Düzenle / Paylaş / Rapor Et / Sil) ----- */
.fv3-menu { position: relative; flex-shrink: 0; }
.fv3-menu-btn.fv3-icon-btn[aria-expanded="true"] { background: var(--fv3-panel-5); color: var(--text); }
.fv3-menu-panel {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 20;
    min-width: 178px;
    background: linear-gradient(175deg, var(--fv3-panel-5), var(--fv3-panel-4));
    border: 1px solid var(--fv3-hairline-strong);
    border-radius: 14px;
    padding: 6px;
    box-shadow: var(--fv3-shadow-2);
    animation: fv3ScaleIn 160ms var(--fv3-ease-spring) both;
    transform-origin: top right;
}
.fv3-menu-item {
    display: flex; align-items: center; gap: 9px;
    width: 100%; margin: 0; padding: 9px 10px;
    background: transparent; border: none; border-radius: 9px;
    color: var(--text); font-size: 13.5px; font-weight: 600;
    text-align: left; text-decoration: none; cursor: pointer;
    transition: background-color 140ms ease;
}
.fv3-menu-item:hover { background: rgba(255,255,255,0.07); text-decoration: none; }
.fv3-menu-item svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--muted); }
.fv3-menu-item-danger { color: #ff6b76; }
.fv3-menu-item-danger svg { color: #ff6b76; }
.fv3-menu-item-danger:hover { background: rgba(230,57,70,0.14); }

/* --- Inline post editing --------------------------------------------
   Replaces the rendered .fv3-card-text in place; no navigation, same
   endpoint (edit-post.php) the full-page post.php editor already uses. */
.fv3-card-text-block { margin-bottom: 2px; }
.fv3-card-text-block:empty { display: none; }
.fv3-edit-form {
    display: flex; flex-direction: column; gap: 8px;
    margin-bottom: 12px;
    animation: fv3ScaleIn 180ms var(--fv3-ease-spring) both;
}
.fv3-edit-textarea {
    width: 100%; min-height: 84px; resize: vertical;
    background: rgba(0,0,0,0.3); border: 1px solid var(--fv3-hairline-strong);
    border-radius: 12px; color: var(--text); font-size: 14.5px; line-height: 1.5;
    font-family: inherit; padding: 12px;
    transition: border-color 160ms ease;
}
.fv3-edit-textarea:focus {
    outline: none; border-color: rgba(230,57,70,0.5);
    box-shadow: 0 0 0 3px rgba(230,57,70,0.1);
}
.fv3-edit-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.fv3-edit-error { margin-right: auto; font-size: 12px; color: #ff6b76; }
.fv3-edit-cancel, .fv3-edit-save {
    width: auto; margin: 0; font-size: 12.5px; font-weight: 700;
    padding: 7px 14px; border-radius: 999px; cursor: pointer;
    transition: background-color 160ms ease, opacity 160ms ease;
}
.fv3-edit-cancel {
    background: transparent; color: var(--muted); border: 1px solid var(--fv3-hairline-strong);
}
.fv3-edit-cancel:hover { color: var(--text); background: rgba(255,255,255,0.06); }
.fv3-edit-save {
    background: linear-gradient(155deg, var(--red), var(--red-dark)); color: #fff; border: 1px solid transparent;
}
.fv3-edit-save:hover { filter: brightness(1.08); }
.fv3-edit-save[data-busy="1"] { opacity: 0.7; cursor: default; }

.fv3-follow-btn {
    flex-shrink: 0;
    width: auto; margin: 0;
    font-size: 12.5px; font-weight: 700;
    padding: 7px 14px; border-radius: 999px;
    background: linear-gradient(155deg, var(--red), var(--red-dark));
    color: #fff;
    box-shadow: 0 3px 10px -3px rgba(230,57,70,0.55);
    transition: transform 160ms var(--fv3-ease-spring), background-color 160ms ease,
                color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
    border: 1px solid transparent;
}
.fv3-follow-btn:hover { filter: brightness(1.08); }
.fv3-follow-btn:active { transform: scale(0.94); }
.fv3-follow-btn.is-following {
    background: transparent; color: var(--muted); border-color: var(--fv3-hairline-strong);
    box-shadow: none;
}
.fv3-follow-btn.is-following:hover { color: var(--red); border-color: var(--red); background: rgba(230,57,70,0.08); }

.fv3-card-actions {
    display: flex; align-items: center; gap: 4px; margin-top: 6px;
    padding-top: 11px; border-top: 1px solid var(--fv3-hairline);
}
.fv3-action {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent; color: var(--muted);
    border: none; padding: 7px 11px; border-radius: 10px;
    font-size: 13px; font-weight: 600; width: auto; margin: 0;
    text-decoration: none; cursor: pointer;
    transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--fv3-ease-spring);
}
.fv3-action:hover { background: rgba(255,255,255,0.06); color: var(--text); text-decoration: none; }
.fv3-action:active { transform: scale(0.93); }
.fv3-action-static { cursor: default; }
.fv3-action-static:hover { background: transparent; color: var(--muted); }
.fv3-action svg { width: 16px; height: 16px; }
.fv3-action-count { font-variant-numeric: tabular-nums; font-weight: 700; }

.fv3-like:hover { background: rgba(230,57,70,0.12); color: var(--red); }
.fv3-like .fv3-icon-fill { display: none; color: var(--red); }
.fv3-like.is-active .fv3-icon-outline { display: none; }
.fv3-like.is-active .fv3-icon-fill { display: inline-flex; }
.fv3-like.is-active { color: var(--red); }
.fv3-like.fv3-pop .fv3-icon-fill,
.fv3-like.fv3-pop .fv3-icon-outline { animation: fv3HeartPop 340ms var(--fv3-ease-spring); }

.fv3-comment:hover { background: rgba(120,150,255,0.1); color: #a9bbff; }

.fv3-repost.is-active { color: var(--green); }
.fv3-repost:hover { background: rgba(61,220,132,0.12); color: var(--green); }
.fv3-repost.is-active:hover { background: rgba(61,220,132,0.16); }

/* Feed-scoped reaction row polish (global .reaction-* rule untouched). */
.fv3-card .reaction-row { margin-top: 10px; }
.fv3-card .reaction-pill {
    background: rgba(255,255,255,0.04);
    border-color: var(--fv3-hairline);
    padding: 3px 9px;
    font-weight: 600;
}
.fv3-card .reaction-pill.mine { border-color: rgba(230,57,70,0.5); }

.fv3-card.fv3-removing { animation: fv3Fade 200ms ease both reverse; pointer-events: none; }

/* --- Skeleton loading (infinite scroll) ---------------------------- */
.fv3-skeleton {
    background: linear-gradient(175deg, var(--fv3-panel-3), var(--fv3-panel-2));
    border: 1px solid var(--fv3-hairline);
    border-radius: 18px;
    padding: 17px;
    box-shadow: var(--fv3-shadow-1);
    animation: fv3Fade 220ms ease both;
}
.fv3-skeleton-row { display: flex; align-items: center; gap: 11px; margin-bottom: 13px; }
.fv3-skel-block {
    border-radius: 8px;
    background: linear-gradient(90deg, var(--fv3-panel-3) 25%, var(--fv3-panel-5) 37%, var(--fv3-panel-3) 63%);
    background-size: 400px 100%;
    animation: fv3Shimmer 1.4s ease infinite;
}
.fv3-skel-avatar { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; }
.fv3-skel-line { height: 10px; border-radius: 5px; margin-bottom: 6px; }
.fv3-skel-line.w60 { width: 60%; }
.fv3-skel-line.w30 { width: 30%; }
.fv3-skel-media { height: 170px; border-radius: 14px; }

.fv3-sentinel { height: 1px; }

/* Motion-reduction respect, matching the rest of the site's pattern. */
@media (prefers-reduced-motion: reduce) {
    .fv3-hero, .fv3-rail-wrap, .fv3-composer-wrap, .fv3-card, .fv3-skeleton,
    .fv3-follow-btn, .fv3-like .fv3-icon-fill, .fv3-like .fv3-icon-outline,
    .fv3-hero-flame, .fv3-skel-block, .fv3-action, .fv3-rail-card {
        animation: none !important;
        transition: none !important;
    }
    .fv3-rail-card:hover, .fv3-follow-btn:active, .fv3-card:hover, .fv3-action:active {
        transform: none !important;
    }
}

@media (max-width: 480px) {
    .fv3-wrap { padding: 16px 10px 56px; }
    .fv3-card { padding: 14px; border-radius: 16px; }
    .fv3-rail-card { width: 120px; }
}

/* ============================================================
   OXUS — DM UI ENGINE 2026
   Visual-only redesign of the messaging surface (messages.php +
   message-thread.php). No markup contracts used by JS are removed —
   #messageList, .msg-row, .msg-bubble, .msg-reactions[data-reactions],
   .msg-actions-row, #textForm, #stickerTray, #replyPreviewBar, etc. all
   keep their original meaning. This section only layers a deeper,
   more deliberate look on top, plus the 3-column desktop shell and
   consecutive-message grouping the brief asked for.
   ============================================================ */
:root {
    --dm-void: #0a0a0b;
    --dm-charcoal: #18181b;
    --dm-anthracite: #1e1e22;
    --dm-graphite: #26262b;
    --dm-graphite-2: #2d2d33;
    --dm-hairline: rgba(255,255,255,0.07);
    --dm-hairline-soft: rgba(255,255,255,0.045);
    --dm-text: #f0f0f2;
    --dm-muted: #97979f;
    --dm-muted-dim: #6c6c74;
    --dm-accent: var(--red);
    --dm-accent-dim: rgba(230,57,70,0.15);
    --dm-gold: #f0b23c;
    --dm-online: #34d17b;
    --dm-r-bubble: 19px;
    --dm-r-panel: 20px;
    --dm-r-pill: 999px;
    --dm-shadow-panel: 0 10px 34px rgba(0,0,0,0.38);
    --dm-shadow-soft: 0 2px 12px rgba(0,0,0,0.28);
    --dm-spring: 420ms cubic-bezier(.22,.9,.32,1.18);
    --dm-ease: 200ms cubic-bezier(.2,.7,.3,1);
}

/* --- Shell / 3-column desktop layout --------------------------------- */
.dm-shell {
    position: relative;
    max-width: 1360px;
    margin: 0 auto;
}
.dm-rail, .dm-info { display: none; }

@media (min-width: 1100px) {
    .dm-shell {
        display: grid;
        grid-template-columns: 288px minmax(0, 1fr) 292px;
        gap: 22px;
        padding: 20px 24px 40px;
        /* "start" bırakılırsa orta sütun (.message-thread.dm-main) grid
           satırının yüksekliğine göre değil kendi içeriğine (TÜM mesajlar)
           göre boy alır — yani hiçbir zaman sınırlanmaz, bu da içindeki
           .dm-message-scroll'un kendi içinde kaymasını (overflow-y:auto)
           işe yaramaz hale getirir; sayfa body'nin overflow:hidden'ı
           yüzünden altta kırpılmış görünür. "stretch" ile orta sütun
           (ve rail/info, onlar zaten kendi max-height'larıyla sınırlı)
           grid satırının — dolayısıyla nihayetinde body.dm-shell'in sabit
           yüksekliğinin — tamamını kaplar, böylece iç scroll gerçekten
           çalışır. */
        align-items: stretch;
    }
    .dm-rail, .dm-info {
        display: flex;
        flex-direction: column;
        position: sticky;
        top: calc(var(--topbar-h, 60px) + 20px);
        max-height: calc(100vh - var(--topbar-h, 60px) - 40px);
        background: linear-gradient(175deg, var(--dm-anthracite), var(--dm-charcoal));
        border: 1px solid var(--dm-hairline);
        border-radius: var(--dm-r-panel);
        box-shadow: var(--dm-shadow-panel);
        overflow: hidden;
    }
    .dm-shell .message-thread.dm-main {
        max-width: 760px;
        margin: 0 auto;
        padding: 0 0 100px;
        width: 100%;
    }
    .dm-shell .thread-back-link { display: none; }
}

/* --- Rail (left): conversation list ---------------------------------- */
.dm-rail-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 18px 14px; flex-shrink: 0;
    border-bottom: 1px solid var(--dm-hairline-soft);
}
.dm-rail-head h2 { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; margin: 0; color: var(--dm-text); }
.dm-rail-new { all: unset; cursor: pointer; color: var(--dm-muted); font-size: 18px; line-height: 1; padding: 5px 8px; border-radius: 999px; transition: background var(--dm-ease), color var(--dm-ease); }
.dm-rail-new:hover { background: var(--dm-graphite); color: var(--dm-text); }
.dm-rail-list { overflow-y: auto; padding: 8px; flex: 1; min-height: 0; }
.dm-rail-list::-webkit-scrollbar, .dm-info::-webkit-scrollbar { width: 6px; }
.dm-rail-list::-webkit-scrollbar-thumb, .dm-info::-webkit-scrollbar-thumb { background: var(--dm-graphite-2); border-radius: 999px; }
.dm-rail-item {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 10px; border-radius: 14px; margin-bottom: 2px;
    color: var(--dm-text); text-decoration: none !important;
    transition: background var(--dm-ease), transform var(--dm-ease);
    position: relative;
}
.dm-rail-item:hover { background: var(--dm-graphite); transform: translateX(1px); }
.dm-rail-item.active { background: linear-gradient(90deg, var(--dm-accent-dim), rgba(230,57,70,0.03)); }
.dm-rail-item.active::before {
    content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px;
    border-radius: 999px; background: var(--dm-accent);
}
.dm-rail-avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--dm-graphite) center/cover no-repeat; flex-shrink: 0; position: relative; border: 1px solid var(--dm-hairline); }
.dm-rail-info { min-width: 0; flex: 1; }
.dm-rail-name-row { display: flex; align-items: baseline; gap: 6px; }
.dm-rail-name { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-rail-item.unread .dm-rail-name { font-weight: 700; }
.dm-rail-time { font-size: 10.5px; color: var(--dm-muted-dim); margin-left: auto; flex-shrink: 0; }
.dm-rail-preview { font-size: 12px; color: var(--dm-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
.dm-rail-item.unread .dm-rail-preview { color: var(--dm-text); }
.dm-rail-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dm-accent); flex-shrink: 0; margin-left: 6px; }
.dm-rail-empty { padding: 30px 18px; text-align: center; color: var(--dm-muted); font-size: 13px; }

/* --- Info panel (right) ----------------------------------------------- */
.dm-info-inner { overflow-y: auto; padding: 26px 20px; flex: 1; text-align: center; }
.dm-info-avatar {
    width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 12px;
    background: var(--dm-graphite) center/cover no-repeat; border: 3px solid var(--dm-hairline);
    box-shadow: var(--dm-shadow-soft);
}
.dm-info-name { font-size: 16px; font-weight: 700; color: var(--dm-text); }
.dm-info-name a { color: inherit; }
.dm-info-sub { font-size: 12.5px; color: var(--dm-muted); margin-top: 3px; }
.dm-info-sub.online { color: var(--dm-online); }
.dm-info-divider { height: 1px; background: var(--dm-hairline-soft); margin: 20px 0; }
.dm-info-section-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--dm-muted-dim); text-align: left; margin-bottom: 10px; font-weight: 700; }
.dm-info-members { display: flex; flex-direction: column; gap: 8px; }
.dm-info-member { display: flex; align-items: center; gap: 9px; text-align: left; color: var(--dm-text); text-decoration: none !important; padding: 6px 8px; border-radius: 10px; transition: background var(--dm-ease); }
.dm-info-member:hover { background: var(--dm-graphite); }
.dm-info-member img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.dm-info-member span { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-info-view-profile {
    display: inline-block; margin-top: 18px; font-size: 12.5px; font-weight: 600;
    color: var(--dm-text); background: var(--dm-graphite); border: 1px solid var(--dm-hairline);
    padding: 9px 16px; border-radius: var(--dm-r-pill); transition: background var(--dm-ease), border-color var(--dm-ease);
}
.dm-info-view-profile:hover { background: var(--dm-graphite-2); border-color: var(--dm-accent); text-decoration: none; }

/* --- Main column: header, layered dark background --------------------- */
.dm-shell .message-thread { background: transparent; }
.dm-shell .thread-head {
    background: linear-gradient(175deg, var(--dm-anthracite), var(--dm-charcoal));
    border: 1px solid var(--dm-hairline);
    border-radius: var(--dm-r-panel);
    padding: 14px 18px;
    margin-bottom: 16px;
    box-shadow: var(--dm-shadow-soft);
}
@media (min-width: 1100px) {
    .dm-shell .thread-head { position: sticky; top: calc(var(--topbar-h, 60px) + 12px); z-index: 5; }
}
.thread-head .convo-avatar { width: 46px; height: 46px; border: 1px solid var(--dm-hairline); }
.thread-title { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.activity-status { font-size: 12px; margin-top: 1px; }
.activity-status.online { color: var(--dm-online); }

/* --- Message list spacing ---------------------------------------------- */
#messageList { padding-top: 4px; }
.message-thread .empty-state { color: var(--dm-muted); }

/* --- Bubbles + consecutive-message grouping ---------------------------- */
.msg-row { margin-bottom: 14px; align-items: flex-end; }
.msg-row.msg-start, .msg-row.msg-mid { margin-bottom: 3px; }
.msg-row > div { max-width: 78%; }

.msg-sender-name { font-size: 11.5px; font-weight: 600; color: var(--dm-muted); margin: 0 0 3px 3px; }

.msg-bubble {
    background: var(--dm-anthracite);
    border: 1px solid var(--dm-hairline);
    padding: 9px 14px;
    font-size: 14.5px;
    line-height: 1.48;
    box-shadow: var(--dm-shadow-soft);
    border-radius: var(--dm-r-bubble) var(--dm-r-bubble) var(--dm-r-bubble) 5px;
}
.msg-row.mine .msg-bubble {
    background: linear-gradient(175deg, var(--dm-accent), var(--red-dark));
    border-color: transparent;
    color: #fff;
    border-radius: var(--dm-r-bubble) var(--dm-r-bubble) 5px var(--dm-r-bubble);
}
/* Grouped shapes: tight corner on the side the run continues toward. */
.msg-row.msg-start .msg-bubble { border-radius: var(--dm-r-bubble) var(--dm-r-bubble) var(--dm-r-bubble) 5px; }
.msg-row.msg-mid .msg-bubble   { border-radius: var(--dm-r-bubble) var(--dm-r-bubble) var(--dm-r-bubble) 5px; }
.msg-row.msg-end .msg-bubble   { border-radius: var(--dm-r-bubble) var(--dm-r-bubble) var(--dm-r-bubble) var(--dm-r-bubble); }
.msg-row.mine.msg-start .msg-bubble { border-radius: var(--dm-r-bubble) var(--dm-r-bubble) 5px var(--dm-r-bubble); }
.msg-row.mine.msg-mid .msg-bubble   { border-radius: var(--dm-r-bubble) var(--dm-r-bubble) 5px var(--dm-r-bubble); }
.msg-row.mine.msg-end .msg-bubble   { border-radius: var(--dm-r-bubble) var(--dm-r-bubble) var(--dm-r-bubble) var(--dm-r-bubble); }

.msg-time { font-size: 10.5px; color: var(--dm-muted-dim); margin-top: 4px; }
.msg-seen-label { font-size: 10.5px; color: var(--dm-muted-dim); }
.msg-row.msg-start .msg-actions-row, .msg-row.msg-mid .msg-actions-row { opacity: 0.72; }

.msg-quote {
    border-left: 3px solid var(--dm-accent);
    background: var(--dm-graphite);
    color: var(--dm-muted);
    border-radius: 8px 10px 10px 8px;
}
.msg-quote strong { color: var(--dm-text); }

/* --- Reactions ----------------------------------------------------------- */
.msg-reaction-pill {
    background: var(--dm-graphite);
    border: 1px solid var(--dm-hairline);
    color: var(--dm-text);
    transition: transform var(--dm-ease), border-color var(--dm-ease);
}
.msg-reaction-pill:hover { transform: translateY(-1px); }
.msg-reaction-pill.mine { border-color: var(--dm-accent); background: var(--dm-accent-dim); }
.reaction-picker {
    background: var(--dm-anthracite);
    border: 1px solid var(--dm-hairline);
    box-shadow: var(--dm-shadow-panel);
    animation: dmPopIn 160ms var(--dm-ease) both;
}
.reaction-picker button:hover { background: var(--dm-graphite); transform: scale(1.15); }
.msg-react-btn, .msg-reply-btn { color: var(--dm-muted-dim); }
.msg-react-btn:hover, .msg-reply-btn:hover { color: var(--dm-text); }

/* --- Stickers + shared posts --------------------------------------------- */
.msg-sticker img { width: 104px; height: 104px; }
.sticker-tray {
    background: linear-gradient(175deg, var(--dm-anthracite), var(--dm-charcoal));
    border: 1px solid var(--dm-hairline);
    border-radius: var(--dm-r-panel);
    box-shadow: var(--dm-shadow-soft);
}
.sticker-pick { background: var(--dm-graphite); border-radius: 12px; transition: transform var(--dm-ease), background var(--dm-ease); }
.sticker-pick:hover { background: var(--dm-graphite-2); transform: translateY(-1px); }
.msg-shared-post {
    width: 176px;
    border-radius: 16px;
    border: 1px solid var(--dm-hairline);
    box-shadow: var(--dm-shadow-soft);
}
.msg-shared-post video, .msg-shared-post img { height: 216px; }
.msg-shared-story img { height: 260px; } /* stories are portrait, taller crop reads better than the post ratio */
.msg-shared-story-gone {
    width: 176px;
    padding: 14px 12px;
    border-radius: 16px;
    border: 1px dashed var(--dm-hairline);
    background: var(--dm-anthracite);
    color: var(--dm-muted-dim);
    font-size: 12.5px;
    text-align: center;
}
.msg-track-card-link {
    width: 240px;
    background: linear-gradient(175deg, var(--dm-anthracite), var(--dm-charcoal));
    border: 1px solid var(--dm-hairline);
    border-radius: 14px;
    box-shadow: var(--dm-shadow-soft);
    color: var(--dm-text);
    transition: transform var(--dm-ease), background var(--dm-ease);
}
.msg-track-card-link:hover { background: var(--dm-graphite); transform: translateY(-1px); }
.msg-track-card-artist { color: var(--dm-muted-dim); }
.msg-track-card-playable .oxus-player-compact {
    background: linear-gradient(175deg, var(--dm-anthracite), var(--dm-charcoal));
    border: 1px solid var(--dm-hairline);
    box-shadow: var(--dm-shadow-soft);
}

/* --- Composer (input bar) — "mixer channel" signature ------------------- */
.message-form {
    background: linear-gradient(0deg, var(--dm-void) 60%, rgba(10,10,11,0));
    border-top: none;
    padding-top: 16px;
}
.message-form::before {
    content: '';
    display: block;
    height: 1px;
    margin: 0 0 14px;
    background: linear-gradient(90deg, transparent, var(--dm-hairline) 20%, var(--dm-hairline) 80%, transparent);
}
.message-text-form {
    background: linear-gradient(175deg, var(--dm-graphite), var(--dm-anthracite));
    border: 1px solid var(--dm-hairline);
    border-radius: var(--dm-r-pill);
    padding: 6px 8px 6px 14px !important;
    box-shadow: var(--dm-shadow-panel);
    gap: 10px !important;
}
.message-form textarea {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 8px 2px;
    font-size: 14.5px;
    min-height: 24px;
    max-height: 120px;
    resize: none;
}
.message-form textarea:focus { outline: none; box-shadow: none; }
.sticker-toggle-btn {
    width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; transition: background var(--dm-ease); flex-shrink: 0;
}
.sticker-toggle-btn:hover { background: var(--dm-graphite-2); }
.track-toggle-btn {
    width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; transition: background var(--dm-ease); flex-shrink: 0;
}
.track-toggle-btn:hover { background: var(--dm-graphite-2); }
.message-form button[type="submit"] {
    width: 38px; height: 38px; margin-top: 0; padding: 0; flex-shrink: 0;
    border-radius: 50%; font-size: 0; position: relative;
    background: linear-gradient(175deg, var(--dm-accent), var(--red-dark));
    box-shadow: 0 3px 10px rgba(230,57,70,0.35);
    transition: transform var(--dm-ease);
}
.message-form button[type="submit"]:hover { transform: scale(1.06); }
.message-form button[type="submit"]::after {
    content: '';
    position: absolute; inset: 0; margin: auto; width: 15px; height: 15px;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M22 2 11 13'/><path d='M22 2 15 22l-4-9-9-4 20-7Z'/></svg>") center/contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M22 2 11 13'/><path d='M22 2 15 22l-4-9-9-4 20-7Z'/></svg>") center/contain no-repeat;
    background: #fff;
}
.reply-preview-bar {
    background: var(--dm-graphite);
    border: 1px solid var(--dm-hairline);
    border-left: 3px solid var(--dm-accent);
    border-radius: 10px;
}

/* --- Group member chips (mobile toggle list, unchanged behavior) ------- */
.group-members { background: var(--dm-anthracite); border: 1px solid var(--dm-hairline); border-radius: 14px; padding: 10px; }
.group-member-chip { background: var(--dm-graphite); border-color: var(--dm-hairline); }

/* --- New-message entrance animation (applied by JS on live-polled rows) - */
@keyframes dmMsgIn {
    0%   { opacity: 0; transform: translateY(12px) scale(0.96); }
    65%  { opacity: 1; transform: translateY(-1px) scale(1.01); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
.msg-enter { animation: dmMsgIn var(--dm-spring) both; }
@keyframes dmPopIn {
    0% { opacity: 0; transform: scale(0.85) translateY(4px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* --- Messages list page (messages.php) ---------------------------------- */
.convo-list { max-width: 640px; }
.convo-row {
    background: linear-gradient(175deg, var(--dm-anthracite), var(--dm-charcoal));
    border: 1px solid var(--dm-hairline);
    border-radius: 16px;
    padding: 13px 16px;
    box-shadow: var(--dm-shadow-soft);
    transition: transform var(--dm-ease), border-color var(--dm-ease), background var(--dm-ease);
}
.convo-row-link:hover .convo-row { transform: translateY(-1px); border-color: var(--dm-graphite-2); }
.convo-row.unread { border-color: var(--dm-accent-dim); }
.convo-avatar { border: 1px solid var(--dm-hairline); }
.online-dot { background: var(--dm-online); box-shadow: 0 0 0 2px var(--dm-void); }
.convo-name { font-size: 14.5px; }
.convo-row.unread .convo-name { font-weight: 700; }
.convo-row.unread .convo-preview { color: var(--dm-text); }
.convo-list .empty-state, .dm-rail-empty { color: var(--dm-muted); }
.notes-tray { gap: 18px; }
.note-avatar {
    border: 2px solid var(--dm-charcoal);
    box-shadow: 0 0 0 2px var(--dm-accent), 0 0 0 4px transparent;
    transition: box-shadow var(--dm-ease);
}
.note-bubble-self .note-avatar { box-shadow: 0 0 0 2px var(--dm-gold); }
.note-add-icon { background: var(--dm-accent); border-color: var(--dm-charcoal); }
.note-editor form { background: var(--dm-anthracite); border-color: var(--dm-hairline); border-radius: var(--dm-r-panel); box-shadow: var(--dm-shadow-soft); }

/* --- Motion + small-screen respect --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .msg-enter, .reaction-picker, .dm-rail-item, .convo-row-link .convo-row,
    .msg-reaction-pill, .message-form button[type="submit"] {
        animation: none !important;
        transition: none !important;
    }
}

@media (max-width: 640px) {
    .msg-row > div { max-width: 86%; }
    .message-text-form { padding: 5px 6px 5px 12px !important; }
    .dm-info-avatar { width: 72px; height: 72px; }
}

/* ========================================================================
   OXUS VISUAL DNA — Digitalized Calligraffiti background system
   v2: daha agresif — köşe motifi büyütüldü/koyulaştırıldı, orijinal
   OXUS vektör wordmark eklendi. Tüm header.php sayfalarında aktif
   (body.oxus-dna).

   Marka brief'i (OXUS_VISUAL_DESIGN_SYSTEM.txt) kuralları:
   - Düz siyah arka plan yasak → köşelerde belirgin, orijinal vektör
     "calligraffiti" motifi (assets/img/oxus-dna-corners.svg — gerçek
     kopyalanmış tag/harf YOK, tamamen soyut eğri+ok+taç+halka+swirl
     biçimleri + kendi OXUS wordmark'ımız).
   - Merkez her zaman sakin/boş kalmalı → radial mask ile motif sadece
     kenarlarda görünüyor, ortada tamamen şeffaf (v2'de kenar alanı
     büyüdü ama merkez hâlâ dokunulmuyor).
   - Siyah hakim, kırmızı aksan artık daha belirgin, hafif grain/noise.
   - İçerik asla arka planla yarışmaz: motif z-index:0, pointer-events:none,
     tüm gerçek layout (.wrap, nav.topbar, .bottom-nav) z-index:1.
   ======================================================================== */

body.oxus-dna { position: relative; background: var(--dm-void, var(--bg)); }

body.oxus-dna::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: url('/assets/img/oxus-dna-corners.svg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    opacity: 0.85;
    -webkit-mask-image: radial-gradient(ellipse at center, transparent 0%, transparent 26%, black 62%);
    mask-image: radial-gradient(ellipse at center, transparent 0%, transparent 26%, black 62%);
    pointer-events: none;
    z-index: 0;
}

body.oxus-dna::after {
    content: "";
    position: fixed;
    inset: 0;
    opacity: 0.045;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 0;
}

body.oxus-dna > nav.topbar,
body.oxus-dna > .wrap,
body.oxus-dna > nav.bottom-nav,
body.oxus-dna .bottom-nav {
    position: relative;
    z-index: 1;
}

/* DM yüzeylerine (rail, thread panel, info panel) motifle uyumlu ince
   kırmızı üst-kenar vurgusu — mevcut .dm-* panel stillerine EK, onları
   değiştirmiyor. */
body.oxus-dna .dm-rail-list,
body.oxus-dna .dm-info,
body.oxus-dna .group-members {
    box-shadow: var(--dm-shadow-panel, none), inset 0 1px 0 rgba(230,57,70,0.08);
}

@media (max-width: 640px) {
    body.oxus-dna::before { opacity: 0.6; }
}

/* ========================================================================
   STORY COMPOSER — premium camera-first redesign (v4)
   Scoped entirely under body.story-composer-page / .story-composer so this
   never touches any other page. Reuses the existing graphite/red --dm-*
   token system (see OXUS VISUAL DNA + DM redesign blocks above) instead of
   inventing a parallel palette. Backend/story logic untouched — this is
   presentation only; every #id referenced by story-create.php's inline
   script is preserved.
   ======================================================================== */

body.story-composer-page { overflow: hidden; background: var(--dm-void); }
body.story-composer-page nav.topbar,
body.story-composer-page .bottom-nav,
body.story-composer-page .more-drawer,
body.story-composer-page .more-backdrop {
    display: none !important;
}

.story-composer {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    background: var(--dm-void);
}

/* Bug fix: several composer elements (upload-status pill, camera boot
   screen, camera-unavailable fallback, draft-restore banner) are toggled
   purely via the native `hidden` attribute from JS (element.hidden = true/false),
   but their own class rules below (`.sc-upload-status`, `.sc-stage-boot`,
   `.sc-stage-fallback`, `.sc-draft-banner`) declare an unconditional
   `display: ...`. An author rule with equal specificity to the browser's
   built-in `[hidden] { display: none }` always wins over it in the cascade,
   so `hidden` was silently doing nothing for these elements — they showed
   up permanently (e.g. the "Paylaşılıyor…" pill and the "Kamera
   hazırlanıyor…" boot screen never actually went away, and the draft
   banner appeared even with no draft). This single rule restores `hidden`
   as the final word for every element in the composer, regardless of any
   `display` set elsewhere. */
.story-composer [hidden] {
    display: none !important;
}

.sc-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.sc-visually-hidden-input {
    position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden;
    pointer-events: none;
}

/* --- top chrome: close · duration pill · upload status --- */
.sc-topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: max(14px, env(safe-area-inset-top)) 16px 10px;
    flex-shrink: 0; position: relative; z-index: 3;
}
.sc-icon-btn {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.08); backdrop-filter: blur(10px);
    color: var(--dm-text); border: 1px solid var(--dm-hairline);
    transition: transform var(--dm-ease), background-color var(--dm-ease);
}
.sc-icon-btn svg { width: 18px; height: 18px; }
.sc-icon-btn:active { transform: scale(0.92); }
.sc-icon-btn:hover { background: rgba(255,255,255,0.14); text-decoration: none; }
.sc-topbar-spacer { visibility: hidden; pointer-events: none; }

.sc-top-meta { display: flex; align-items: center; gap: 8px; }
.sc-duration-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; border-radius: var(--dm-r-pill);
    background: rgba(255,255,255,0.08); backdrop-filter: blur(10px);
    border: 1px solid var(--dm-hairline);
    font-size: 12.5px; font-weight: 600; color: var(--dm-text);
}
.sc-upload-status {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 14px; border-radius: var(--dm-r-pill);
    background: var(--dm-accent-dim); color: #ff8a92; font-size: 12.5px; font-weight: 600;
}
.sc-spinner {
    width: 13px; height: 13px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.25); border-top-color: #fff;
    animation: sc-spin 700ms linear infinite;
}
@keyframes sc-spin { to { transform: rotate(360deg); } }

.sc-error {
    margin: 0 16px 10px; padding: 10px 14px; border-radius: var(--radius-md, 12px);
    background: rgba(230,57,70,0.14); border: 1px solid rgba(230,57,70,0.35);
    color: #ff9aa1; font-size: 13px; flex-shrink: 0; position: relative; z-index: 3;
}

/* --- form fills the remaining height; stage dominates it --- */
.sc-form { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 0 0 max(14px, env(safe-area-inset-bottom)); }

.sc-stage {
    position: relative; flex: 1; min-height: 0; margin: 0 12px 14px;
    border-radius: var(--radius-lg, 16px); overflow: hidden;
    background: linear-gradient(180deg, var(--dm-charcoal), var(--dm-void));
    box-shadow: var(--dm-shadow-panel);
    border: 1px solid var(--dm-hairline);
}

.sc-layer { position: absolute; inset: 0; }
.sc-layer-camera { background: #050506; }
.sc-video {
    width: 100%; height: 100%; object-fit: cover; display: block;
    background: #050506; transition: opacity 260ms ease;
}
.sc-video.sc-mirrored { transform: scaleX(-1); }

.sc-stage-boot {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 14px;
    color: var(--dm-muted); font-size: 13px; z-index: 2;
    background: radial-gradient(circle at center, var(--dm-anthracite), var(--dm-void));
}
.sc-boot-pulse { width: 54px; height: 54px; border-radius: 50%; border: 2px solid var(--dm-accent); animation: sc-pulse 1400ms ease-out infinite; }
@keyframes sc-pulse {
    0% { transform: scale(0.6); opacity: 0.9; }
    100% { transform: scale(1.6); opacity: 0; }
}

.sc-stage-fallback {
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; gap: 6px; padding: 32px;
    background: radial-gradient(circle at center, var(--dm-anthracite), var(--dm-void));
}
.sc-fallback-icon {
    width: 60px; height: 60px; border-radius: 50%; margin-bottom: 6px;
    display: flex; align-items: center; justify-content: center;
    background: var(--dm-graphite); color: var(--dm-muted);
}
.sc-fallback-title { font-size: 15px; font-weight: 700; color: var(--dm-text); margin: 0; }
.sc-fallback-hint { font-size: 13px; color: var(--dm-muted); margin: 0 0 6px; max-width: 260px; }
.sc-fallback-retry {
    width: auto; padding: 9px 18px; border-radius: var(--dm-r-pill);
    background: var(--dm-accent); color: #fff; font-size: 13px; font-weight: 600; border: none;
}

/* --- captured/edit layer --- */
.sc-layer-canvas { display: flex; align-items: center; justify-content: center; padding: 0; animation: sc-fade-in 280ms ease; }
.sc-layer-canvas .story-canvas {
    width: 100%; height: 100%; max-width: none; aspect-ratio: auto;
    border-radius: 0; margin: 0;
}
.sc-retake {
    position: absolute; top: 12px; left: 12px; z-index: 4;
    width: 36px; height: 36px; background: rgba(0,0,0,0.45);
}

.sc-tool-rail { position: absolute; top: 14px; right: 12px; z-index: 4; display: flex; flex-direction: column; gap: 10px; }
.sc-tool-btn {
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(20,20,22,0.55); backdrop-filter: blur(10px);
    border: 1px solid var(--dm-hairline); color: #fff;
    transition: transform var(--dm-ease), background-color var(--dm-ease);
}
.sc-tool-btn svg { width: 19px; height: 19px; }
.sc-tool-btn:active { transform: scale(0.9); }
.sc-tool-btn.is-active { background: var(--dm-accent); border-color: transparent; }
.sc-tool-glyph { font-size: 15px; font-weight: 700; }

.sc-text-style-picker {
    position: absolute; left: 12px; right: 60px; bottom: 14px; z-index: 4;
    display: flex; gap: 8px; flex-wrap: wrap;
}
.sc-text-style-picker .text-style-btn {
    width: auto; padding: 7px 13px; font-size: 12px; border-radius: var(--dm-r-pill);
    background: rgba(20,20,22,0.6); backdrop-filter: blur(10px);
    border: 1px solid var(--dm-hairline); color: var(--dm-text);
}
.sc-text-style-picker .text-style-btn.active { border-color: var(--dm-accent); color: #fff; background: var(--dm-accent); }

.sc-sticker-picker {
    position: absolute; left: 12px; right: 12px; bottom: 14px; z-index: 4;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
    gap: 8px; max-height: 40%; overflow-y: auto;
    background: rgba(15,15,17,0.7); backdrop-filter: blur(14px);
    border: 1px solid var(--dm-hairline); border-radius: var(--dm-r-panel);
    padding: 12px;
}
.sc-sticker-picker img.sticker-pick { width: 100%; cursor: pointer; border-radius: 8px; }
.sc-sticker-empty-hint { font-size: 12px; grid-column: 1 / -1; color: var(--dm-muted); }

/* --- bottom action bar --- */
.sc-bottombar { flex-shrink: 0; padding: 4px 16px 0; position: relative; z-index: 3; }

.sc-capture-controls { display: flex; align-items: center; justify-content: space-between; max-width: 320px; margin: 0 auto; padding: 6px 6px 2px; }
.sc-side-btn {
    width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--dm-graphite); border: 1px solid var(--dm-hairline); color: var(--dm-text);
    transition: transform var(--dm-ease), background-color var(--dm-ease);
}
.sc-side-btn:active { transform: scale(0.9); }

.sc-shutter {
    width: 74px; height: 74px; border-radius: 50%; flex-shrink: 0;
    background: transparent; border: 3px solid #fff;
    display: flex; align-items: center; justify-content: center; padding: 5px;
}
.sc-shutter-ring { width: 100%; height: 100%; border-radius: 50%; background: #fff; transition: transform 160ms var(--dm-spring), background-color 160ms ease; }
.sc-shutter:active .sc-shutter-ring { transform: scale(0.82); }
.sc-shutter.is-shooting .sc-shutter-ring { background: var(--dm-accent); transform: scale(0.7); }

.sc-no-camera .sc-capture-controls .sc-shutter,
.sc-no-camera .sc-capture-controls #btn-camera-switch { display: none; }
.sc-no-camera .sc-capture-controls { justify-content: center; }
.sc-no-camera .sc-capture-controls #scGalleryBtn { width: 60px; height: 60px; background: var(--dm-accent); border-color: transparent; }

.sc-edit-controls { display: flex; flex-direction: column; gap: 10px; padding: 4px 2px 2px; }
.sc-link-toggle {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 7px;
    width: auto; padding: 8px 14px; border-radius: var(--dm-r-pill);
    background: var(--dm-graphite); border: 1px solid var(--dm-hairline);
    color: var(--dm-muted); font-size: 12.5px; font-weight: 600;
}
.sc-link-toggle.active { color: var(--dm-text); border-color: var(--dm-accent); }
.sc-link-row { animation: sc-fade-in 200ms ease; }
.sc-link-row input {
    width: 100%; padding: 11px 14px; border-radius: var(--radius-md, 12px);
    background: var(--dm-charcoal); border: 1px solid var(--dm-hairline); color: var(--dm-text);
    font-size: 14px;
}
@keyframes sc-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.sc-track-hint { font-size: 12px; color: var(--dm-muted); margin: -2px 0 0; }

.sc-share-btn {
    width: 100%; padding: 15px; border-radius: var(--dm-r-pill);
    background: linear-gradient(135deg, var(--red), var(--red-dark));
    color: #fff; font-size: 15.5px; font-weight: 700; border: none;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    box-shadow: 0 8px 24px rgba(230,57,70,0.35);
}
.sc-share-btn svg { width: 16px; height: 16px; }
.sc-share-btn.is-loading { opacity: 0.75; }

/* --- responsive: desktop gets a framed, centered "phone" composer --- */
@media (min-width: 720px) {
    body.story-composer-page { overflow: auto; display: flex; align-items: flex-start; justify-content: center; }
    .story-composer {
        position: relative; inset: auto; width: 400px; max-width: 100%;
        margin: 40px auto; height: min(780px, calc(var(--vh, 1vh) * 100 - 80px));
        border-radius: 28px; overflow: hidden;
        box-shadow: var(--dm-shadow-panel); border: 1px solid var(--dm-hairline);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sc-boot-pulse, .sc-spinner, .sc-shutter-ring, .sc-link-row, .sc-layer-canvas { animation: none !important; transition: none !important; }
}

/* ========================================================================
   STORY COMPOSER — crop/zoom/rotate, filters, drafts (v5)
   Additive only: nothing above is edited. Scoped the same way as the v4
   block (body.story-composer-page / .story-composer descendants).
   ======================================================================== */

.sc-photo-frame {
    position: absolute; inset: 0; overflow: hidden; touch-action: none;
    background: #050506;
}
.sc-photo-img {
    position: absolute; top: 50%; left: 50%;
    max-width: none; max-height: none; will-change: transform;
    transform: translate(-50%, -50%);
    transition: filter 120ms ease;
}
.sc-crop-hint {
    position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
    z-index: 4; margin: 0; padding: 7px 14px; border-radius: var(--dm-r-pill);
    background: rgba(15,15,17,0.65); backdrop-filter: blur(10px);
    color: var(--dm-text); font-size: 12px; font-weight: 600;
    opacity: 0; pointer-events: none; transition: opacity 220ms ease;
}
.sc-crop-hint.visible { opacity: 1; }

.sc-filter-panel {
    position: absolute; left: 12px; right: 12px; bottom: 14px; z-index: 4;
    display: flex; flex-direction: column; gap: 12px; padding: 14px;
    background: rgba(15,15,17,0.7); backdrop-filter: blur(14px);
    border: 1px solid var(--dm-hairline); border-radius: var(--dm-r-panel);
}
.sc-filter-presets { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.sc-filter-chip {
    flex-shrink: 0; width: auto; padding: 7px 14px; font-size: 12px; font-weight: 600;
    border-radius: var(--dm-r-pill); background: rgba(255,255,255,0.08);
    border: 1px solid var(--dm-hairline); color: var(--dm-text);
}
.sc-filter-chip.active { background: var(--dm-accent); border-color: transparent; color: #fff; }
.sc-filter-slider-row {
    display: flex; align-items: center; gap: 10px;
    font-size: 12.5px; color: var(--dm-muted); font-weight: 600;
}
.sc-filter-slider-row span { flex-shrink: 0; width: 70px; }
.sc-filter-slider-row input[type="range"] {
    flex: 1; accent-color: var(--dm-accent, var(--red));
}

.sc-draft-banner {
    position: absolute; left: 12px; right: 12px; top: 60px; z-index: 6;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 11px 14px; border-radius: var(--radius-md, 12px);
    background: rgba(15,15,17,0.85); backdrop-filter: blur(14px);
    border: 1px solid var(--dm-hairline); color: var(--dm-text); font-size: 13px;
}
.sc-draft-banner-actions { display: flex; gap: 8px; flex-shrink: 0; }
.sc-draft-banner-actions button {
    width: auto; padding: 7px 13px; border-radius: var(--dm-r-pill);
    font-size: 12px; font-weight: 700; border: none;
}
#scDraftRestore { background: var(--dm-accent); color: #fff; }
#scDraftDiscard { background: rgba(255,255,255,0.1); color: var(--dm-text); }

.sc-inline-retry {
    width: auto; margin-left: 8px; padding: 5px 12px; border-radius: var(--dm-r-pill);
    background: #fff; color: var(--dm-void, #111); font-size: 12px; font-weight: 700; border: none;
}

@media (prefers-reduced-motion: reduce) {
    .sc-photo-img, .sc-crop-hint { transition: none !important; }
}

/* ===================================================================
   DM ENGINE UPDATE — mesajlaşma sayfası app-shell scroll mimarisi
   ===================================================================
   Eski davranış: sayfa body/window üzerinden scroll oluyordu; navbar
   `position: sticky` olsa da bazı tarayıcı/viewport kombinasyonlarında
   (adres çubuğu gizlenmesi, klavye açılması, resize olayları) titriyor
   ya da tamamen kayboluyormuş gibi hissettiriyordu.
   Yeni davranış: DM sayfası artık Instagram/Discord/Messenger/Slack
   gibi sabit bir "app shell". Navbar HER ZAMAN yerinde kalır (hiç
   scroll edilmez); sadece mesaj listesi (#dmMessageScroll) kendi
   bağımsız scroll container'ında kayar. Body scroll / window scroll
   YOK. Diğer hiçbir sayfa etkilenmez — aşağıdaki tüm kurallar sadece
   `.message-thread` mesaj sayfası aktifken (body.dm-shell VEYA
   :has(.message-thread) desteği olan tarayıcılarda) devreye girer.
   NOT: Bu blok, üstteki "OXUS — DM UI ENGINE 2026" bloğundaki masaüstü
   3 sütunlu `.dm-shell` (döngü/rail/info) grid düzeniyle AYNI class
   adını (dm-shell) paylaşıyor ama farklı bir elemente uygulanıyor:
   oradaki `.dm-shell` bir <div>, buradaki `body.dm-shell` ise <body>
   etiketi üzerinde. Seçiciler element+sınıf (`body.dm-shell`) ile
   scope'landığı için birbirine karışmıyor; masaüstünde `.dm-shell
   .message-thread.dm-main` kuralı (3 sınıf) `body.dm-shell
   .message-thread` kuralından (2 sınıf) daha spesifik olduğundan
   masaüstü genişlik/padding değerleri korunuyor. */

body.dm-shell,
body:has(> .message-thread) {
    display: flex;
    flex-direction: column;
    /* --vh / --topbar-h / --bottomnav-h zaten includes/header.php
       tarafından her resize/orientation değişiminde güncelleniyor
       (bkz. kaykay-feed'de aynı desen). */
    height: calc(var(--vh, 1vh) * 100 - var(--bottomnav-h, 0px));
    overflow: hidden;
}

/* Topbar zaten position:sticky; flex-shrink:0 ile app-shell içinde
   sabit yüksekliğini korur, hiçbir zaman translateY/hide edilmez. */
body.dm-shell nav.topbar,
body:has(> .message-thread) nav.topbar {
    flex-shrink: 0;
}

/* Flash mesajları (varsa) da shell'in normal akışında, sabit alanda
   kalır — sadece mesaj listesi esner/kayar. */
body.dm-shell > .wrap,
body:has(> .message-thread) > .wrap {
    flex-shrink: 0;
}

/* KRİTİK: body.dm-shell'in kendisi display:flex + sabit height ile
   navbar'ı sabitliyor, ama araya giren `<div class="dm-shell">` (rail/
   main/info 3-sütun sarmalayıcısı) bu flex bağlamında sınırlı bir
   yükseklik almazsa (flex:1/min-height:0 yoksa) tüm mesajları sığdırmak
   için sonsuza kadar büyür ve body'nin overflow:hidden'ı fazlasını
   kırpar — navbar dahil düzen bozulmuş gibi görünür. Bu kural onu
   body'nin kalan (sabit) yüksekliğine sıkıştırıyor; masaüstünde grid,
   mobilde flex olması (aşağıdaki max-width:1099.98px bloğu) bu boyuttan
   bağımsız, sadece İÇ dağılımı belirliyor. */
body.dm-shell > .dm-shell,
body:has(> .message-thread) > .dm-shell {
    flex: 1 1 auto;
    min-height: 0;
}

@media (max-width: 1099.98px) {
    /* Bu genişlikte .dm-shell masaüstündeki gibi grid OLMUYOR (rail/info
       zaten display:none) — sade bir block kalıyor, yani içindeki
       .message-thread'in flex:1/min-height:0 kuralları (aşağıda) hiçbir
       şey yapmaz çünkü ebeveyni flex değil. Burada flex yapmak, mesaj
       listesinin kendi içinde (page değil) kaymasını sağlıyor. */
    body.dm-shell > .dm-shell,
    body:has(> .message-thread) > .dm-shell {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
}

body.dm-shell .message-thread,
body:has(> .message-thread) .message-thread {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    max-width: 680px;
    width: 100%;
    margin: 0 auto;
    padding: 0 16px;
}

.dm-thread-head {
    flex-shrink: 0;
}
body.dm-shell .dm-thread-head,
body:has(> .message-thread) .dm-thread-head {
    /* Shell modunda .message-thread'in kendi üst padding'i sıfırlanmış
       olduğundan (bkz. yukarıdaki flex kuralı, padding: 0 16px), üst
       boşluk burada veriliyor — fallback modda .message-thread zaten
       kendi padding-top:20px'ini koruyor, çift boşluk oluşmaz. */
    padding-top: 16px;
}

/* Bağımsız scroll container: sayfanın geri kalanı hiç kaymaz, sadece
   burası — overflow-y:auto + momentum scrolling (iOS) + overscroll
   containment (konuşma sonuna gelince arkadaki body'yi tetiklemesin). */
.dm-message-scroll {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    scroll-behavior: smooth;
    padding: 8px 0 4px;
}

/* JS kapalıysa (veya :has() desteklenmiyorsa) body.dm-shell hiç
   eklenmez — bu durumda .dm-message-scroll sade bir blok olarak kalır
   ve sayfa eskisi gibi normal body scroll ile çalışmaya devam eder;
   hiçbir içerik kaybolmaz, sadece "sabit navbar" davranışı pasif olur. */

.message-form {
    flex-shrink: 0;
}
body.dm-shell .message-form,
body:has(> .message-thread) .message-form {
    /* Shell içinde artık sticky'e gerek yok, parent zaten scroll
       olmadığı için form doğal olarak her zaman görünür kalıyor. */
    position: static;
}

/* "↓ Yeni Mesajlar" — kullanıcı eski mesajları okurken scroll'u zorla
   aşağı götürmek yerine gösterilen buton (Instagram/Messenger deseni). */
.dm-jump-latest {
    all: unset;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 6px;
    /* Absolutely positioned against .dm-message-scroll (its nearest
       positioned ancestor), so it stays pinned to the bottom-right
       corner of the visible message area while the list scrolls
       underneath it — same corner Instagram/Messenger use — without
       taking up space in the normal flex flow. */
    position: absolute;
    right: 14px;
    bottom: 10px;
    padding: 7px 16px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
    cursor: pointer;
    z-index: 5;
    white-space: nowrap;
}
.dm-jump-latest:hover { border-color: var(--red); color: var(--red); }

/* Uzun konuşmalarda scrollbar'ı ince/görünür ama rahatsız etmeyecek
   şekilde stilliyoruz (WebKit); Firefox `scrollbar-width: thin`. */
.dm-message-scroll { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.dm-message-scroll::-webkit-scrollbar { width: 6px; }
.dm-message-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
.dm-message-scroll::-webkit-scrollbar-track { background: transparent; }

@media (max-width: 768px) {
    /* Mobilde alt tab bar (.bottom-nav) position:fixed olduğu için
       shell yüksekliği zaten --bottomnav-h düşülerek hesaplanıyor
       (yukarıda body.dm-shell height kuralı) — burada ekstra bir şey
       yapmaya gerek yok, form artık sticky olmadığı için eski
       `bottom: calc(58px + safe-area)` offset'i de gereksiz. */
    body.dm-shell .message-form,
    body:has(> .message-thread) .message-form {
        bottom: auto;
    }
    body.dm-shell .dm-thread-head,
    body:has(> .message-thread) .dm-thread-head {
        padding-top: 12px;
    }
    body.dm-shell .message-thread,
    body:has(> .message-thread) .message-thread {
        padding: 0 14px;
    }
}

@media (max-width: 480px) {
    .dm-jump-latest { font-size: 12px; padding: 6px 14px; }
}

/* Layout-shift / flicker koruması: topbar'ın kendi geçiş efektleri
   (arka plan/blur) dışında hiçbir transform/translate kuralı yok, bu
   yüzden CLS'e sebep olabilecek bir yer değiştirme oluşmuyor. */

/* ============================================================
   DM ENGINE — real-time infrastructure (edit/delete/pin/forward/
   typing/search). Layers onto the v2 redesign above; reuses the
   --dm-* variables so it matches the existing message-thread.php
   surface instead of introducing a second visual language.
   ============================================================ */

/* --- Search bar (thread header) --------------------------------------- */
.thread-search-toggle {
    all: unset; cursor: pointer; flex-shrink: 0;
    width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
    border-radius: 999px; font-size: 15px; color: var(--dm-muted);
    transition: background var(--dm-ease), color var(--dm-ease);
}
.thread-search-toggle:hover { background: var(--dm-graphite); color: var(--dm-text); }
.thread-search-bar {
    background: var(--dm-charcoal); border: 1px solid var(--dm-hairline);
    border-radius: var(--dm-r-panel); padding: 10px 12px; margin: 8px 0; flex-shrink: 0;
}
.thread-search-bar input[type="text"] {
    background: var(--dm-graphite); border: 1px solid var(--dm-hairline); color: var(--dm-text);
    border-radius: 999px; padding: 8px 14px; font-size: 13px; width: 60%; margin: 0 6px 0 0;
}
.thread-search-bar select {
    background: var(--dm-graphite); border: 1px solid var(--dm-hairline); color: var(--dm-text);
    border-radius: 8px; padding: 7px 8px; font-size: 12.5px;
}
.thread-search-bar #threadSearchClose {
    all: unset; cursor: pointer; float: right; color: var(--dm-muted); font-size: 14px; padding: 4px 6px;
}
.thread-search-results { margin-top: 8px; max-height: 260px; overflow-y: auto; }
.thread-search-loading, .thread-search-empty { color: var(--dm-muted-dim); font-size: 12.5px; padding: 10px 4px; }
.thread-search-result {
    display: block; padding: 8px 6px; border-radius: 10px; font-size: 12.5px; color: var(--dm-text);
    text-decoration: none; border-bottom: 1px solid var(--dm-hairline-soft);
}
.thread-search-result:hover { background: var(--dm-graphite); text-decoration: none; }
.thread-search-result strong { color: var(--dm-text); }
.thread-search-result span { color: var(--dm-muted); }
.thread-search-result em { display: block; font-style: normal; color: var(--dm-muted-dim); font-size: 11px; margin-top: 2px; }

/* --- Pinned message banner --------------------------------------------- */
.thread-pinned-banner {
    display: flex; align-items: center; gap: 8px;
    background: var(--dm-accent-dim); border: 1px solid rgba(230,57,70,0.3);
    border-radius: 12px; padding: 8px 12px; margin: 0 0 8px; flex-shrink: 0; font-size: 12.5px;
}
.thread-pinned-icon { flex-shrink: 0; }
.thread-pinned-text { flex: 1; min-width: 0; color: var(--dm-text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thread-pinned-text strong { color: var(--dm-accent); }
.thread-pinned-unpin { all: unset; cursor: pointer; color: var(--dm-muted); font-size: 13px; flex-shrink: 0; padding: 2px 4px; }
.thread-pinned-unpin:hover { color: var(--dm-text); }

/* --- Typing indicator ---------------------------------------------------- */
.thread-typing-indicator {
    font-size: 12px; color: var(--dm-muted); padding: 0 4px 6px; flex-shrink: 0; font-style: italic;
}

/* --- Message states: edited / deleted / forwarded ----------------------- */
.msg-edited-tag { color: var(--dm-muted-dim); font-style: italic; }
.msg-bubble-deleted { background: transparent !important; border: 1px dashed var(--dm-hairline) !important; color: var(--dm-muted-dim) !important; }
.msg-deleted-label { font-style: italic; }
.msg-forwarded-label { font-size: 11px; color: var(--dm-muted-dim); margin-bottom: 2px; }
.msg-row.mine .msg-forwarded-label { text-align: right; }

/* Deep-link highlight (copy-link / pinned banner / search result jump) */
@keyframes msgHighlightPulse {
    0%   { box-shadow: 0 0 0 0 rgba(230,57,70,0.55); }
    100% { box-shadow: 0 0 0 10px rgba(230,57,70,0); }
}
.msg-highlight .msg-bubble { animation: msgHighlightPulse 1.1s ease-out; }

/* --- Overflow ("⋯") menu ------------------------------------------------- */
.msg-more-btn { all: unset; cursor: pointer; font-size: 14px; color: var(--dm-muted); padding: 2px 5px; line-height: 1; }
.msg-more-btn:hover { color: var(--dm-text); }
.msg-more-menu {
    position: absolute; bottom: 100%; margin-bottom: 4px;
    background: var(--dm-charcoal); border: 1px solid var(--dm-hairline); border-radius: 12px;
    box-shadow: var(--dm-shadow-panel); padding: 6px; display: flex; flex-direction: column;
    min-width: 168px; z-index: 6;
}
.msg-row.mine .msg-more-menu { right: 0; }
.msg-more-menu button {
    all: unset; cursor: pointer; padding: 8px 10px; border-radius: 8px; font-size: 12.5px; color: var(--dm-text);
    white-space: nowrap;
}
.msg-more-menu button:hover { background: var(--dm-graphite); }
.msg-more-menu-danger { color: #ff6b6b !important; }

/* --- Inline edit box ------------------------------------------------------ */
.msg-edit-box {
    max-width: 75%; background: var(--dm-graphite); border: 1px solid var(--dm-accent);
    border-radius: 14px; padding: 8px 10px;
}
.msg-edit-box textarea {
    width: 100%; min-height: 44px; background: transparent; border: none; color: var(--dm-text);
    font: inherit; font-size: 14px; resize: vertical; padding: 0; margin: 0;
}
.msg-edit-box textarea:focus { outline: none; }
.msg-edit-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.msg-edit-actions button {
    all: unset; cursor: pointer; font-size: 12px; padding: 4px 10px; border-radius: 999px;
}
.msg-edit-save { background: var(--dm-accent); color: #fff; font-weight: 600; }
.msg-edit-cancel { color: var(--dm-muted); }
.msg-edit-cancel:hover { color: var(--dm-text); }

/* --- Toast (copy-link / forward confirmations) ---------------------------- */
.oxus-toast {
    position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 12px);
    background: var(--dm-charcoal); border: 1px solid var(--dm-hairline); color: var(--dm-text);
    padding: 10px 18px; border-radius: 999px; font-size: 13px; box-shadow: var(--dm-shadow-panel);
    opacity: 0; transition: opacity 200ms ease-out, transform 200ms ease-out; z-index: 999; pointer-events: none;
}
.oxus-toast-show { opacity: 1; transform: translate(-50%, 0); }

/* --- Forward picker (reuses .oxus-modal-* base rules) --------------------- */
.oxus-modal-row-check {
    display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 10px; cursor: pointer;
}
.oxus-modal-row-check:hover { background: rgba(255,255,255,0.06); }
.oxus-modal-row-check input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--dm-accent); }
.oxus-modal-row-avatar {
    width: 34px; height: 34px; border-radius: 50%; background: var(--dm-graphite) center/cover no-repeat; flex-shrink: 0;
}
.oxus-modal-forward-actions { padding: 10px 16px 16px; border-top: 1px solid var(--dm-hairline); }
.oxus-modal-forward-send {
    all: unset; box-sizing: border-box; display: block; width: 100%; text-align: center; cursor: pointer;
    background: var(--dm-accent); color: #fff; font-weight: 600; font-size: 13px; padding: 10px; border-radius: 999px;
}
.oxus-modal-forward-send[disabled] { opacity: 0.4; cursor: default; }